From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/_redirects.txt | 606 + files/de/_wikihistory.json | 14744 +++++++++++++++++++ files/de/archive/add-ons/index.html | 11 + files/de/archive/add-ons/seamonkey_2/index.html | 281 + files/de/archive/apps/index.html | 35 + .../b2g_os/anwendungsentwicklung/index.html | 12 + files/de/archive/b2g_os/api/index.html | 156 + files/de/archive/b2g_os/api/navigator/index.html | 19 + .../api/navigator/requestwakelock/index.html | 37 + .../index.html" | 48 + files/de/archive/b2g_os/apps/index.html | 50 + .../arbeiten_mit_dem_b2g_desktop_client/index.html | 135 + .../b2g_os/benutzung_des_app_managers/index.html | 264 + files/de/archive/b2g_os/building/index.html | 268 + .../compatible_devices/index.html | 357 + .../firefox_os_build_overview/index.html | 155 + .../building_and_installing_firefox_os/index.html | 45 + .../b2g_os/debugging/developer_settings/index.html | 197 + files/de/archive/b2g_os/debugging/index.html | 80 + .../b2g_os/debugging/installing_adb/index.html | 70 + .../index.html" | 41 + .../filing_bugs_against_firefox_os/index.html | 183 + .../b2g_os/developing_firefox_os/index.html | 26 + .../firefox_os_build_prerequisites/index.html | 446 + files/de/archive/b2g_os/firefox_os_faq/index.html | 41 + files/de/archive/b2g_os/gaia/gaia_apps/index.html | 86 + files/de/archive/b2g_os/gaia/hacking/index.html | 181 + files/de/archive/b2g_os/gaia/index.html | 56 + .../b2g_os/gaia/introduction_to_gaia/index.html | 35 + .../gaia_entwickeln/build_system_primer/index.html | 190 + .../customizing_build-time_apps/index.html | 117 + .../durchfuehrung_der_gaia_codebase/index.html | 71 + files/de/archive/b2g_os/gaia_entwickeln/index.html | 52 + .../making_gaia_code_changes/index.html | 85 + files/de/archive/b2g_os/index.html | 163 + .../installing_on_a_mobile_device/index.html | 81 + files/de/archive/b2g_os/introduction/index.html | 84 + .../phone_guide/alcatel_one_touch_fire/index.html | 102 + .../de/archive/b2g_os/phone_guide/flame/index.html | 39 + .../b2g_os/phone_guide/geeksphone/index.html | 202 + files/de/archive/b2g_os/phone_guide/index.html | 44 + .../b2g_os/phone_guide/phone_specs/index.html | 800 + .../b2g_os/phone_guide/zte_open_c/index.html | 82 + .../b2g_os/platform/app_architektur/index.html | 29 + .../archive/b2g_os/platform/architektur/index.html | 740 + files/de/archive/b2g_os/platform/index.html | 81 + .../b2g_os/quickstart/deine_erste_app/index.html | 339 + .../quickstart/einfuerung_zu_firefox_os/index.html | 13 + .../quickstart/for_mobile_developers/index.html | 40 + files/de/archive/b2g_os/quickstart/index.html | 49 + .../open_web_apps_and_web_standards/index.html | 38 + files/de/archive/b2g_os/releases/1.4/index.html | 71 + files/de/archive/b2g_os/releases/2.0/index.html | 112 + files/de/archive/b2g_os/releases/index.html | 24 + files/de/archive/b2g_os/simulator/index.html | 86 + files/de/archive/b2g_os/troubleshooting/index.html | 44 + files/de/archive/css3/index.html | 976 ++ files/de/archive/index.html | 21 + files/de/archive/mdn/index.html | 20 + files/de/archive/mozilla/index.html | 10 + .../de/archive/mozilla/marketplace/apis/index.html | 46 + .../de/archive/mozilla/marketplace/faq/index.html | 30 + files/de/archive/mozilla/marketplace/index.html | 126 + .../archive/mozilla/marketplace/index/index.html | 107 + .../mozilla/marketplace/marktplatz_apis/index.html | 109 + .../options/open_web_apps_for_android/index.html | 142 + .../mozilla/marketplace/publishing/index.html | 6 + .../publishing/packaged_apps/index.html | 184 + .../publishing/publish_options/index.html | 67 + .../marketplace/publishing/submit/index.html | 10 + .../publishing/updating_apps/index.html | 27 + .../mozilla/marketplace/submission/index.html | 9 + .../marketplace_review_criteria/index.html | 79 + .../marketplace/ver\303\266ffentlichen/index.html" | 106 + files/de/archive/mozilla/xul/action/index.html | 86 + .../archive/mozilla/xul/arrowscrollbox/index.html | 134 + files/de/archive/mozilla/xul/assign/index.html | 115 + .../mozilla/xul/attribute/accesskey/index.html | 24 + .../xul/attribute/activetitlebarcolor/index.html | 14 + .../archive/mozilla/xul/attribute/align/index.html | 37 + .../mozilla/xul/attribute/allowevents/index.html | 17 + .../attribute/allownegativeassertions/index.html | 11 + .../archive/mozilla/xul/attribute/color/index.html | 14 + .../archive/mozilla/xul/attribute/cols/index.html | 14 + .../mozilla/xul/attribute/decimalplaces/index.html | 14 + .../mozilla/xul/attribute/disabled/index.html | 28 + .../archive/mozilla/xul/attribute/empty/index.html | 14 + .../mozilla/xul/attribute/emptytext/index.html | 14 + .../archive/mozilla/xul/attribute/expr/index.html | 14 + .../xul/attribute/hidespinbuttons/index.html | 10 + files/de/archive/mozilla/xul/attribute/index.html | 11 + .../archive/mozilla/xul/attribute/label/index.html | 32 + .../mozilla/xul/attribute/onchange/index.html | 14 + .../mozilla/xul/attribute/prefpane.src/index.html | 25 + .../archive/mozilla/xul/attribute/src/index.html | 34 + .../mozilla/xul/attribute/treecell.src/index.html | 17 + .../mozilla/xul/attribute/treecol.src/index.html | 17 + .../archive/mozilla/xul/attribute/var/index.html | 14 + files/de/archive/mozilla/xul/bbox/index.html | 87 + files/de/archive/mozilla/xul/binding/index.html | 89 + files/de/archive/mozilla/xul/box/index.html | 101 + .../de/archive/mozilla/xul/colorpicker/index.html | 77 + .../archive/mozilla/xul/eigenschaften/index.html | 14 + files/de/archive/mozilla/xul/events/index.html | 464 + files/de/archive/mozilla/xul/grippy/index.html | 88 + files/de/archive/mozilla/xul/iframe/index.html | 161 + files/de/archive/mozilla/xul/index.html | 83 + .../archive/mozilla/xul/method/geticon/index.html | 15 + .../mozilla/xul/method/gettabforbrowser/index.html | 15 + files/de/archive/mozilla/xul/method/index.html | 14 + .../adding_menus_and_submenus/index.html | 99 + .../die_grundlagen_einer_erweiterung/index.html | 454 + .../index.html | 161 + .../xul/school_tutorial/einleitung/index.html | 44 + .../index.html | 75 + .../archive/mozilla/xul/school_tutorial/index.html | 70 + files/de/archive/mozilla/xul/separator/index.html | 123 + files/de/archive/mozilla/xul/spacer/index.html | 94 + files/de/archive/mozilla/xul/splitter/index.html | 173 + files/de/archive/mozilla/xul/style/index.html | 11 + .../mozilla/xul/style/treecol-image/index.html | 13 + files/de/archive/mozilla/xul/tab/index.html | 195 + files/de/archive/mozilla/xul/tabbox/index.html | 77 + files/de/archive/mozilla/xul/tabpanels/index.html | 100 + files/de/archive/mozilla/xul/tabs/index.html | 123 + files/de/archive/mozilla/xul/textbox/index.html | 334 + files/de/archive/mozilla/xul/treecol/index.html | 262 + files/de/archive/mozilla/xul/vbox/index.html | 100 + files/de/archive/mozilla/xul/window/index.html | 209 + .../de/archive/mozilla/xul/xul_referenz/index.html | 15 + .../xul/xul_tutorial/die_chrome_url/index.html | 39 + .../xul_tutorial/ein_fenster_erzeugen/index.html | 111 + .../xul/xul_tutorial/einfuehrung/index.html | 33 + .../de/archive/mozilla/xul/xul_tutorial/index.html | 57 + .../xul_tutorial/installations-skripte/index.html | 96 + .../xul/xul_tutorial/lokalisierung/index.html | 270 + .../positionierung_von_elementen/index.html | 259 + .../xul/xul_tutorial/xul_struktur/index.html | 154 + .../index.html" | 44 + files/de/archive/mozilla/xulrunner/index.html | 81 + files/de/archive/rss/index.html | 13 + files/de/archive/themes/index.html | 11 + files/de/archive/web-standards/index.html | 69 + .../web-standards/rdf_in_mozilla_faq/index.html | 264 + files/de/archive/web/index.html | 12 + .../web/javascript/arguments.caller/index.html | 55 + .../ecmascript_7_support_in_mozilla/index.html | 68 + files/de/archive/web/javascript/index.html | 12 + .../legacy_generator_function/index.html | 56 + .../index.html | 205 + files/de/bugzilla/index.html | 27 + files/de/bundles/index.html | 81 + files/de/codeschnipsel/cookies/index.html | 45 + files/de/codeschnipsel/index.html | 28 + files/de/codeschnipsel/on_page_load/index.html | 124 + files/de/codeschnipsel/scrollbar/index.html | 32 + files/de/codeschnipsel/tabbed_browser/index.html | 517 + files/de/codeschnipsel/tree/index.html | 69 + files/de/codeschnipsel/windows/index.html | 60 + files/de/css3_columns/index.html | 63 + files/de/dom/index.html | 65 + .../dom/ueber_das_document_object_model/index.html | 22 + files/de/dom_inspector/index.html | 89 + files/de/dragdrop/index.html | 10 + files/de/e4x/index.html | 57 + files/de/e4x/processing_xml_with_e4x/index.html | 256 + .../index.html" | 102 + .../index.html | 469 + files/de/erweiterung_erstellen/index.html | 249 + files/de/erweiterungen/index.html | 94 + files/de/erweiterungen_faq/index.html | 57 + .../index.html" | 232 + "files/de/farbverl\303\244ufe_in_css/index.html" | 408 + .../index.html" | 66 + .../firefox_1.5_f\303\274r_entwickler/index.html" | 123 + .../firefox_3.5_f\303\274r_entwickler/index.html" | 241 + .../de/firefox_3_f\303\274r_entwickler/index.html" | 173 + files/de/firefox_addons_developer_guide/index.html | 15 + files/de/games/index.html | 74 + .../index.html | 46 + .../einf\303\274hrung/index.html" | 239 + files/de/gecko-dom-referenz/index.html | 65 + .../de/gecko_user_agent_string_referenz/index.html | 230 + files/de/glossary/404/index.html | 20 + files/de/glossary/502/index.html | 23 + files/de/glossary/abstraktion/index.html | 19 + 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/algorithmus/index.html | 11 + files/de/glossary/anweisung/index.html | 29 + 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/asynchron/index.html | 34 + files/de/glossary/atag/index.html | 25 + files/de/glossary/attribute/index.html | 20 + files/de/glossary/bandbreite/index.html | 17 + 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/cms/index.html | 18 + files/de/glossary/codec/index.html | 23 + files/de/glossary/compile_time/index.html | 18 + files/de/glossary/cookie/index.html | 20 + .../cors-zugelassener-anfrage-header/index.html | 38 + 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_praeprozessor/index.html | 23 + files/de/glossary/data_structure/index.html | 17 + files/de/glossary/datenkapselung/index.html | 14 + files/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/dtd/index.html | 11 + files/de/glossary/ecma/index.html | 19 + files/de/glossary/ecmascript/index.html | 22 + .../de/glossary/einfache_datenelemente/index.html | 48 + files/de/glossary/element/index.html | 21 + files/de/glossary/falsy/index.html | 111 + files/de/glossary/firefox_os/index.html | 27 + files/de/glossary/firewall/index.html | 22 + files/de/glossary/flex/index.html | 44 + files/de/glossary/flexbox/index.html | 77 + files/de/glossary/ftp/index.html | 19 + .../de/glossary/funktion_erster-klasse/index.html | 101 + files/de/glossary/gif/index.html | 17 + files/de/glossary/git/index.html | 15 + files/de/glossary/gpu/index.html | 9 + files/de/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 + .../glossary/herstellerpr\303\244fix/index.html" | 69 + 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 | 27 + files/de/glossary/indexeddb/index.html | 20 + .../de/glossary/informationsarchitektur/index.html | 19 + 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/klasse/index.html | 20 + files/de/glossary/konstruktor/index.html | 47 + files/de/glossary/leeres_element/index.html | 34 + files/de/glossary/local_scope/index.html | 19 + files/de/glossary/local_variable/index.html | 29 + 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/objekt/index.html | 20 + 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 + .../de/glossary/progressive_enhancement/index.html | 36 + files/de/glossary/protokoll/index.html | 21 + .../prototype-based_programming/index.html | 20 + files/de/glossary/prototype/index.html | 20 + files/de/glossary/regular_expression/index.html | 27 + files/de/glossary/repo/index.html | 14 + files/de/glossary/responsive_web_design/index.html | 19 + files/de/glossary/rest/index.html | 28 + files/de/glossary/rgb/index.html | 22 + files/de/glossary/robots.txt/index.html | 50 + 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/string/index.html | 22 + files/de/glossary/svg/index.html | 33 + files/de/glossary/symbol/index.html | 27 + 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/typ/index.html | 21 + 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 + .../de/glossary/verbotener_header_name/index.html | 49 + 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 + files/de/installationsmanifest/index.html | 328 + files/de/installing_mercurial/index.html | 165 + .../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 + .../wie_das_internet_funktioniert/index.html | 95 + files/de/learn/css/building_blocks/index.html | 87 + .../css/building_blocks/organizing/index.html | 374 + .../building_blocks/werten_einheiten/index.html | 394 + files/de/learn/css/css_layout/flexbox/index.html | 352 + files/de/learn/css/css_layout/index.html | 88 + files/de/learn/css/first_steps/index.html | 54 + files/de/learn/css/index.html | 59 + files/de/learn/css/styling_text/index.html | 65 + .../css_basics/index.html | 282 + .../dateien_nutzen/index.html | 106 + .../html_basics/index.html | 226 + .../learn/getting_started_with_the_web/index.html | 66 + .../installing_basic_software/index.html | 61 + .../javascript_basis/index.html | 407 + .../publishing_your_website/index.html | 111 + .../what_will_your_website_look_like/index.html | 119 + .../wie_das_internet_funktioniert/index.html | 100 + .../der_kopf_metadaten_in_html/index.html" | 268 + .../document_and_website_structure/index.html" | 292 + .../einfache_textformatierung_in_html/index.html" | 643 + .../erstellen_von_hyperlinks/index.html" | 317 + .../fehlersuche_in_html/index.html" | 197 + .../fortgeschrittene_textformatierung/index.html" | 466 + .../html/einf\303\274hrung_in_html/index.html" | 65 + .../lerne_html_kennen/index.html" | 571 + .../marking_up_a_letter/index.html" | 102 + .../structuring_a_page_of_content/index.html" | 99 + files/de/learn/html/forms/index.html | 90 + files/de/learn/html/index.html | 75 + .../learn/html/multimedia_and_embedding/index.html | 77 + .../mozilla_splash_page/index.html | 126 + .../html/tables/grund_tabelle_html/index.html | 555 + files/de/learn/html/tables/index.html | 45 + files/de/learn/index.html | 108 + .../javascript/bausteine/ereignisse/index.html | 587 + files/de/learn/javascript/bausteine/index.html | 42 + .../javascript/first_steps/erster_blick/index.html | 597 + files/de/learn/javascript/first_steps/index.html | 67 + .../lustige_geschichten_generator/index.html | 139 + .../first_steps/useful_string_methods/index.html | 656 + .../javascript/first_steps/variables/index.html | 386 + .../first_steps/was_ist_javascript/index.html | 339 + files/de/learn/javascript/index.html | 47 + .../de/learn/javascript/objects/basics/index.html | 258 + files/de/learn/javascript/objects/index.html | 53 + .../javascript/objects/inheritance/index.html | 440 + files/de/learn/javascript/objects/json/index.html | 345 + .../objects/object-oriented_js/index.html | 290 + .../objects/object_prototypes/index.html | 288 + files/de/learn/mitarbeiten/index.html | 82 + .../de/learn/server-side/erste_schritte/index.html | 49 + .../erste_schritte/introduction/index.html | 230 + .../de/learn/server-side/express_nodejs/index.html | 65 + .../server-side/express_nodejs/mongoose/index.html | 843 ++ files/de/learn/server-side/index.html | 59 + .../cross_browser_testing/index.html | 49 + files/de/learn/tools_and_testing/index.html | 46 + .../list_of_mozilla-based_applications/index.html | 1265 ++ files/de/lokalisierbaren_code_schreiben/index.html | 22 + files/de/lokalisierung/index.html | 55 + .../index.html | 88 + .../index.html | 79 + .../community/bleibe_auf_dem_laufenden/index.html | 42 + files/de/mdn/community/index.html | 80 + files/de/mdn/contribute/feedback/index.html | 51 + files/de/mdn/contribute/getting_started/index.html | 125 + .../convert_code_samples_to_be_live/index.html | 28 + .../howto/do_a_technical_review/index.html | 54 + .../howto/do_an_editorial_review/index.html | 49 + .../howto/document_a_css_property/index.html | 89 + .../howto/erstellung_eines_mdn_profils/index.html | 50 + files/de/mdn/contribute/howto/index.html | 13 + .../index.html" | 81 + .../howto/set_the_summary_for_a_page/index.html | 54 + files/de/mdn/contribute/howto/tag/index.html | 429 + files/de/mdn/contribute/index.html | 91 + files/de/mdn/contribute/localize/index.html | 29 + .../localize/translating_pages/index.html | 58 + files/de/mdn/contribute/zu_tun_im_mdn/index.html | 27 + files/de/mdn/guidelines/index.html | 14 + files/de/mdn/guidelines/style_guide/index.html | 560 + files/de/mdn/index.html | 33 + .../kuma/beheben_von_kumascript_fehlern/index.html | 63 + files/de/mdn/kuma/index.html | 28 + files/de/mdn/nutzer_leitfaden/index.html | 8 + files/de/mdn/structures/index.html | 10 + .../kompatibilitaets_tabellen/index.html | 500 + "files/de/mdn/\303\274ber/index.html" | 99 + "files/de/mdn/\303\274ber/link_zu_mdn/index.html" | 82 + files/de/mdn_at_ten/history_of_mdn/index.html | 228 + files/de/mdn_at_ten/index.html | 40 + files/de/mdn_at_ten/zum_mdn_beitragen/index.html | 93 + files/de/mercurial/index.html | 36 + files/de/midas/index.html | 328 + files/de/midas/sicherheitseinstellungen/index.html | 73 + .../mozilla/add-ons/add-on_guidelines/index.html | 124 + files/de/mozilla/add-ons/amo/index.html | 9 + files/de/mozilla/add-ons/amo/policy/index.html | 19 + .../add-ons/bootstrapped_extensions/index.html | 243 + files/de/mozilla/add-ons/index.html | 198 + .../index.html | 156 + files/de/mozilla/add-ons/sdk/builder/index.html | 16 + .../add-ons/sdk/guides/content_scripts/index.html | 484 + files/de/mozilla/add-ons/sdk/guides/index.html | 154 + files/de/mozilla/add-ons/sdk/index.html | 83 + files/de/mozilla/add-ons/sdk/tools/index.html | 14 + files/de/mozilla/add-ons/sdk/tools/jpm/index.html | 497 + .../adding_a_button_to_the_toolbar/index.html | 100 + .../sdk/tutorials/getting_started/index.html | 214 + files/de/mozilla/add-ons/sdk/tutorials/index.html | 165 + .../add-ons/sdk/tutorials/installation/index.html | 134 + .../sdk/tutorials/mobile_development/index.html | 476 + .../index.html | 80 + .../de/mozilla/add-ons/themes/obsolete/index.html | 10 + .../anatomy_of_a_webextension/index.html | 133 + .../webextensions/api/browseraction/index.html | 135 + .../api/browseraction/setpopup/index.html | 136 + .../add-ons/webextensions/api/commands/index.html | 83 + .../add-ons/webextensions/api/downloads/index.html | 123 + .../mozilla/add-ons/webextensions/api/index.html | 51 + .../add-ons/webextensions/api/lesezeich/index.html | 121 + .../webextensions/arbeiten_mit_taps_api/index.html | 608 + .../add-ons/webextensions/beispiele/index.html | 22 + .../browser_support_for_javascript_apis/index.html | 15 + .../deine_erste_weberweiterung/index.html | 155 + .../deine_zweite_erweiterung/index.html | 357 + .../extending_the_developer_tools/index.html | 143 + files/de/mozilla/add-ons/webextensions/index.html | 86 + .../manifest.json/commands/index.html | 184 + .../manifest.json/devtools_page/index.html | 42 + .../add-ons/webextensions/manifest.json/index.html | 105 + .../webextensions/manifest.json/theme/index.html | 1361 ++ .../webextensions/match_patterns/index.html | 430 + .../what_are_webextensions/index.html | 24 + .../\303\274berliegende_erweiterungen/index.html" | 54 + files/de/mozilla/chrome_registration/index.html | 48 + .../index.html | 105 + files/de/mozilla/css/index.html | 11 + .../firefox_erfolgreich_erstellt/index.html | 14 + files/de/mozilla/developer_guide/index.html | 108 + .../mozilla/developer_guide/quelltexte/index.html | 46 + .../mozilla/firefox/developer_edition/index.html | 57 + .../zur\303\274ckkehren/index.html" | 25 + files/de/mozilla/firefox/headless-mode/index.html | 237 + files/de/mozilla/firefox/index.html | 60 + .../firefox/multiprocess_firefox/index.html | 80 + .../technical_overview/index.html | 164 + .../web_content_compatibility/index.html | 32 + .../firefox/nutzung_in_unternehmen/index.html | 142 + files/de/mozilla/firefox/privacy/index.html | 9 + .../firefox/privacy/tracking_protection/index.html | 88 + files/de/mozilla/firefox/releases/16/index.html | 104 + files/de/mozilla/firefox/releases/27/index.html | 56 + files/de/mozilla/firefox/releases/28/index.html | 116 + files/de/mozilla/firefox/releases/3.6/index.html | 301 + files/de/mozilla/firefox/releases/34/index.html | 107 + files/de/mozilla/firefox/releases/47/index.html | 174 + files/de/mozilla/firefox/releases/5/index.html | 169 + files/de/mozilla/firefox/releases/56/index.html | 122 + files/de/mozilla/firefox/releases/57/index.html | 99 + files/de/mozilla/firefox/releases/58/index.html | 186 + files/de/mozilla/firefox/releases/60/index.html | 146 + files/de/mozilla/firefox/releases/68/index.html | 162 + files/de/mozilla/firefox/releases/index.html | 12 + .../mozilla/firefox/the_about_protocol/index.html | 190 + .../updating_add-ons_for_firefox_5/index.html | 69 + .../compatibility_testing/index.html | 103 + files/de/mozilla/firefox_fuer_android/index.html | 64 + files/de/mozilla/index.html | 12 + .../javascript_code_modules/deutsch/index.html | 197 + .../de/mozilla/javascript_code_modules/index.html | 102 + files/de/mozilla/localization/index.html | 25 + .../index.html | 137 + .../localization_content_best_practices/index.html | 324 + .../lokalisierung_mit_mercurial/index.html | 252 + .../lokalisierung_von_pontoon/index.html | 135 + .../lokalisierung_von_xliff-dateien/index.html | 59 + .../index.html" | 284 + files/de/mozilla/mathml_project/index.html | 72 + .../mathml_project/mathml_torture_test/index.html | 1323 ++ files/de/mozilla/mathml_project/start/index.html | 95 + files/de/mozilla/mobile/index.html | 25 + .../de/mozilla/mobile/viewport_meta_tag/index.html | 86 + files/de/mozilla/performance/index.html | 145 + .../persona/bootstrapping_persona/index.html | 31 + files/de/mozilla/persona/branding/index.html | 42 + .../persona/browser_compatibility/index.html | 84 + files/de/mozilla/persona/index.html | 133 + .../mozilla/persona/protocol_overview/index.html | 61 + files/de/mozilla/persona/schnellstart/index.html | 201 + files/de/mozilla/persona/warum_persona/index.html | 31 + .../index.html | 10 + files/de/mozilla/preferences/index.html | 48 + files/de/mozilla/projects/deutsch/index.html | 35 + files/de/mozilla/projects/index.html | 14 + files/de/mozilla/projects/nss/index.html | 186 + .../projects/nss/nss_3.33_release_notes/index.html | 78 + .../projects/nss/nss_sample_code/index.html | 25 + files/de/mozilla/projects/nss/pkcs11/index.html | 20 + .../nss/pkcs11/module_installation/index.html | 32 + .../thunderbird_lokalisation/index.html | 98 + files/de/mozilla/qa/index.html | 70 + files/de/mozilla/tech/index.html | 14 + .../index.html | 56 + files/de/mozilla/tech/xpcom/guide/index.html | 13 + files/de/mozilla/tech/xpcom/reference/index.html | 27 + .../tech/xpcom/reference/interface/index.html | 19 + .../reference/interface/nsiloginmanager/index.html | 420 + .../using_nsiloginmanager/index.html | 212 + .../interface/nsixmlhttprequest/index.html | 89 + .../thunderbird/autokonfiguration/index.html | 146 + files/de/mozilla/thunderbird/index.html | 75 + .../building_a_thunderbird_extension/index.html | 57 + .../index.html | 61 + .../index.html | 58 + .../index.html | 24 + .../index.html | 24 + .../index.html | 43 + .../index.html | 31 + .../index.html | 44 + .../index.html | 53 + .../thunderbird/thunderbird_extensions/index.html | 138 + files/de/mozilla/verbinden/index.html | 94 + .../index.html" | 62 + .../index.html" | 24 + .../index.html" | 161 + files/de/packen_von_erweiterungen/index.html | 42 + .../beispiele_und_testf\303\244lle/index.html" | 19 + .../index.html | 139 + files/de/plugins/index.html | 88 + files/de/preferences_system/index.html | 36 + files/de/profile_manager/index.html | 173 + .../stress_testing/index.html" | 12 + files/de/quickstart_lokalisierung/index.html | 43 + .../initial_setup/index.html | 84 + .../translation_phase/index.html | 122 + files/de/rdf/index.html | 12 + files/de/rhino/index.html | 14 + files/de/rhino_documentation/index.html | 115 + .../index.html | 147 + files/de/sandbox/index.html | 69 + files/de/social_api/index.html | 69 + .../de/spidermonkey/build_documentation/index.html | 239 + files/de/spidermonkey/index.html | 106 + files/de/theme_erstellen/contents.rdf/index.html | 47 + .../theme_erstellen/einf\303\274hrung/index.html" | 83 + files/de/theme_erstellen/index.html | 26 + files/de/theme_erstellen/install.rdf/index.html | 46 + files/de/theme_erstellen/uuid/index.html | 12 + files/de/themes/hintergrund/index.html | 98 + files/de/themes/index.html | 13 + files/de/toolkit_api/index.html | 36 + files/de/tools/3d_untersuchung/index.html | 99 + files/de/tools/about_colon_debugging/index.html | 252 + files/de/tools/add-ons/index.html | 17 + .../tools/barrierefreiheits_inspektor/index.html | 136 + .../de/tools/bildschirmgroessen-testen/index.html | 81 + files/de/tools/browser_console/index.html | 157 + files/de/tools/browser_werkzeuge/index.html | 42 + files/de/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/open_the_debugger/index.html | 22 + .../debugger/how_to/use_a_source_map/index.html | 32 + files/de/tools/debugger/index.html | 369 + files/de/tools/debugger/settings/index.html | 57 + .../de/tools/debugger/source_map_errors/index.html | 70 + files/de/tools/firefox_os_1.1_simulator/index.html | 352 + files/de/tools/index.html | 149 + files/de/tools/index/index.html | 9 + files/de/tools/json_viewer/index.html | 26 + files/de/tools/keyboard_shortcuts/index.html | 847 ++ files/de/tools/netzwerkanalyse/index.html | 126 + .../how_to/event_listener_untersuchen/index.html | 27 + files/de/tools/page_inspector/how_to/index.html | 13 + .../how_to/raster_layout_untersuchen/index.html | 23 + .../how_to/schriftarten_bearbeitung/index.html | 231 + files/de/tools/paint_flashing_tool/index.html | 94 + files/de/tools/performance/index.html | 96 + .../debugging_firefox_desktop/index.html | 38 + .../firefox_for_android/index.html | 136 + files/de/tools/remote_debugging/index.html | 44 + files/de/tools/scratchpad/index.html | 85 + files/de/tools/seiten_inspektor/index.html | 109 + .../tastenkombinationen/index.html | 12 + files/de/tools/shader-editor/index.html | 57 + .../storage_inspector/cache_storage/index.html | 15 + .../de/tools/storage_inspector/cookies/index.html | 43 + files/de/tools/storage_inspector/index.html | 200 + .../tools/storage_inspector/indexeddb/index.html | 45 + .../local_storage_session_storage/index.html | 20 + files/de/tools/style_editor/index.html | 54 + files/de/tools/web_konsole/hilfe/index.html | 65 + files/de/tools/web_konsole/index.html | 582 + files/de/tools/webide/index.html | 280 + .../tools/webide/probleml\303\266sung/index.html" | 165 + files/de/tools/webide_clone/index.html | 279 + .../index.html" | 95 + .../index.html | 97 + .../accessibility/understanding_wcag/index.html | 59 + .../understanding_wcag/perceivable/index.html | 359 + files/de/web/api/aescbcparams/index.html | 52 + files/de/web/api/animationevent/index.html | 190 + .../api/audiocontext/decodeaudiodata/index.html | 218 + files/de/web/api/audiocontext/index.html | 232 + files/de/web/api/audiodestinationnode/index.html | 141 + files/de/web/api/audionode/index.html | 191 + files/de/web/api/audiotrack/index.html | 86 + files/de/web/api/battery_status_api/index.html | 92 + files/de/web/api/blob/index.html | 245 + files/de/web/api/body/arraybuffer/index.html | 87 + files/de/web/api/body/blob/index.html | 73 + files/de/web/api/body/body/index.html | 86 + files/de/web/api/body/bodyused/index.html | 73 + files/de/web/api/body/formdata/index.html | 62 + files/de/web/api/body/index.html | 99 + files/de/web/api/body/json/index.html | 73 + files/de/web/api/body/text/index.html | 80 + files/de/web/api/cache/add/index.html | 106 + files/de/web/api/cache/addall/index.html | 212 + files/de/web/api/cache/index.html | 288 + .../api/canvasrenderingcontext2d/canvas/index.html | 56 + .../canvasrenderingcontext2d/fillrect/index.html | 177 + .../getimagedata/index.html | 142 + .../de/web/api/canvasrenderingcontext2d/index.html | 432 + .../ispointinpath/index.html | 206 + .../api/canvasrenderingcontext2d/scale/index.html | 223 + .../setlinedash/index.html | 179 + .../canvasrenderingcontext2d/textalign/index.html | 128 + files/de/web/api/childnode/index.html | 190 + files/de/web/api/childnode/remove/index.html | 97 + files/de/web/api/console/assert/index.html | 98 + files/de/web/api/console/clear/index.html | 49 + files/de/web/api/console/count/index.html | 103 + files/de/web/api/console/debug/index.html | 63 + files/de/web/api/console/dir/index.html | 56 + files/de/web/api/console/index.html | 296 + files/de/web/api/console/log/index.html | 180 + files/de/web/api/console/table/index.html | 214 + files/de/web/api/console/time/index.html | 56 + files/de/web/api/console/timeend/index.html | 57 + files/de/web/api/console/warn/index.html | 147 + files/de/web/api/crypto/index.html | 68 + files/de/web/api/css/escape/index.html | 79 + files/de/web/api/css/index.html | 90 + files/de/web/api/css_painting_api/guide/index.html | 534 + files/de/web/api/css_painting_api/index.html | 199 + files/de/web/api/cssmediarule/index.html | 120 + files/de/web/api/csspagerule/index.html | 129 + files/de/web/api/cssrule/csstext/index.html | 31 + files/de/web/api/cssrule/index.html | 258 + .../api/customelementregistry/define/index.html | 241 + files/de/web/api/customelementregistry/index.html | 106 + .../web/api/dedicatedworkerglobalscope/index.html | 114 + .../message_event/index.html | 83 + files/de/web/api/document/adoptnode/index.html | 53 + files/de/web/api/document/alinkcolor/index.html | 30 + files/de/web/api/document/body/index.html | 140 + .../de/web/api/document/createattribute/index.html | 76 + .../api/document/createdocumentfragment/index.html | 137 + files/de/web/api/document/createelement/index.html | 153 + .../de/web/api/document/createelementns/index.html | 175 + .../de/web/api/document/createtextnode/index.html | 131 + .../web/api/document/createtreewalker/index.html | 241 + files/de/web/api/document/dir/index.html | 95 + files/de/web/api/document/document/index.html | 45 + .../de/web/api/document/documentelement/index.html | 42 + .../api/document/fullscreenchange_event/index.html | 87 + .../de/web/api/document/getelementbyid/index.html | 131 + .../api/document/getelementsbyclassname/index.html | 105 + files/de/web/api/document/head/index.html | 73 + files/de/web/api/document/importnode/index.html | 93 + files/de/web/api/document/index.html | 405 + files/de/web/api/document/queryselector/index.html | 129 + .../web/api/document/queryselectorall/index.html | 172 + files/de/web/api/document/readystate/index.html | 111 + files/de/web/api/document/referrer/index.html | 46 + .../de/web/api/document/registerelement/index.html | 113 + files/de/web/api/document/title/index.html | 70 + files/de/web/api/document/url/index.html | 19 + files/de/web/api/document/width/index.html | 45 + files/de/web/api/document/write/index.html | 85 + files/de/web/api/document/writeln/index.html | 60 + files/de/web/api/documentfragment/index.html | 258 + files/de/web/api/domerror/index.html | 189 + files/de/web/api/domparser/index.html | 181 + files/de/web/api/domstring/index.html | 57 + files/de/web/api/domtokenlist/add/index.html | 73 + files/de/web/api/domtokenlist/index.html | 125 + files/de/web/api/dragevent/index.html | 239 + files/de/web/api/element/classlist/index.html | 300 + files/de/web/api/element/classname/index.html | 128 + .../api/element/getboundingclientrect/index.html | 62 + files/de/web/api/element/hasattribute/index.html | 129 + files/de/web/api/element/index.html | 522 + files/de/web/api/element/innerhtml/index.html | 204 + .../web/api/element/insertadjacenthtml/index.html | 144 + files/de/web/api/element/queryselector/index.html | 89 + .../de/web/api/element/queryselectorall/index.html | 206 + .../de/web/api/element/removeattribute/index.html | 42 + .../web/api/element/requestfullscreen/index.html | 118 + files/de/web/api/element/scrollintoview/index.html | 85 + files/de/web/api/element/scrollleft/index.html | 83 + files/de/web/api/element/scrollwidth/index.html | 49 + files/de/web/api/element/setattribute/index.html | 48 + files/de/web/api/event/bubbles/index.html | 59 + files/de/web/api/event/event/index.html | 72 + files/de/web/api/event/index.html | 253 + files/de/web/api/eventlistener/index.html | 48 + files/de/web/api/eventsource/index.html | 126 + files/de/web/api/eventtarget/index.html | 174 + files/de/web/api/federatedcredential/index.html | 125 + files/de/web/api/fetch_api/index.html | 84 + files/de/web/api/file/filename/index.html | 35 + files/de/web/api/file/filesize/index.html | 36 + files/de/web/api/file/getastext/index.html | 78 + files/de/web/api/file/index.html | 146 + files/de/web/api/file/name/index.html | 104 + files/de/web/api/file/typ/index.html | 65 + .../index.html | 512 + files/de/web/api/filereader/index.html | 153 + files/de/web/api/filereader/onload/index.html | 24 + files/de/web/api/formdata/formdata/index.html | 184 + files/de/web/api/formdata/get/index.html | 145 + files/de/web/api/formdata/getall/index.html | 74 + files/de/web/api/formdata/index.html | 80 + files/de/web/api/fullscreenoptions/index.html | 43 + files/de/web/api/gainnode/index.html | 134 + files/de/web/api/gamepad_api/index.html | 95 + .../api/geolocation/getcurrentposition/index.html | 88 + files/de/web/api/geolocation/index.html | 71 + files/de/web/api/globaleventhandlers/index.html | 540 + .../web/api/globaleventhandlers/onclick/index.html | 88 + .../web/api/globaleventhandlers/onload/index.html | 150 + .../api/globaleventhandlers/onresize/index.html | 77 + files/de/web/api/htmlcanvaselement/index.html | 242 + .../web/api/htmlcanvaselement/todataurl/index.html | 206 + .../webglcontextcreationerror_event/index.html | 132 + .../webglcontextlost_event/index.html | 133 + .../webglcontextrestored_event/index.html | 135 + files/de/web/api/htmlcollection/index.html | 70 + .../de/web/api/htmlformelement/elements/index.html | 46 + files/de/web/api/htmlformelement/index.html | 260 + .../api/htmlformelement/submit_event/index.html | 76 + files/de/web/api/htmlinputelement/index.html | 435 + .../de/web/api/htmlinputelement/select/index.html | 84 + .../api/htmlslotelement/assignednodes/index.html | 66 + files/de/web/api/htmlslotelement/index.html | 67 + .../api/htmltableelement/createcaption/index.html | 75 + files/de/web/api/htmltableelement/index.html | 132 + .../web/api/htmltableelement/insertrow/index.html | 122 + files/de/web/api/htmlunknownelement/index.html | 56 + files/de/web/api/index.html | 14 + .../index.html | 131 + .../grundkonzepte_hinter_indexeddb/index.html | 194 + files/de/web/api/indexeddb_api/index.html | 252 + .../indexeddb_api/indexeddb_verwenden/index.html | 1180 ++ files/de/web/api/keyboardevent/altkey/index.html | 118 + .../api/keyboardevent/getmodifierstate/index.html | 247 + files/de/web/api/keyboardevent/index.html | 458 + files/de/web/api/keyboardevent/keycode/index.html | 3185 ++++ .../de/web/api/l10n.language.direction/index.html | 63 + files/de/web/api/linkstyle/index.html | 56 + files/de/web/api/messageevent/index.html | 205 + files/de/web/api/mouseevent/index.html | 323 + files/de/web/api/mozmobileconnection/index.html | 134 + .../selectnetworkautomatically/index.html | 57 + files/de/web/api/mutationobserver/index.html | 287 + files/de/web/api/navigator/index.html | 122 + .../navigator/registerprotocolhandler/index.html | 170 + .../webbasierte_protokoll-handler/index.html | 127 + files/de/web/api/navigator/sendbeacon/index.html | 144 + files/de/web/api/navigator/vibrate/index.html | 107 + files/de/web/api/navigatoronline/index.html | 127 + files/de/web/api/navigatoronline/online/index.html | 190 + .../online_and_offline_events/index.html | 120 + files/de/web/api/node/appendchild/index.html | 144 + files/de/web/api/node/childnodes/index.html | 70 + files/de/web/api/node/clonenode/index.html | 135 + files/de/web/api/node/firstchild/index.html | 62 + files/de/web/api/node/haschildnodes/index.html | 120 + files/de/web/api/node/index.html | 365 + files/de/web/api/node/innertext/index.html | 90 + files/de/web/api/node/lastchild/index.html | 41 + files/de/web/api/node/nextsibling/index.html | 60 + files/de/web/api/node/nodevalue/index.html | 88 + files/de/web/api/node/normalize/index.html | 49 + files/de/web/api/node/parentnode/index.html | 79 + files/de/web/api/node/previoussibling/index.html | 69 + files/de/web/api/node/removechild/index.html | 82 + files/de/web/api/node/replacechild/index.html | 61 + files/de/web/api/node/setuserdata/index.html | 121 + files/de/web/api/node/textcontent/index.html | 69 + files/de/web/api/notification/index.html | 265 + .../de/web/api/notification/permission/index.html | 187 + files/de/web/api/page_visibility_api/index.html | 189 + files/de/web/api/performance/index.html | 135 + files/de/web/api/performance/now/index.html | 164 + files/de/web/api/push_api/index.html | 180 + files/de/web/api/pushmanager/index.html | 161 + files/de/web/api/pushmanager/subscribe/index.html | 143 + files/de/web/api/range/index.html | 254 + files/de/web/api/range/range/index.html | 95 + files/de/web/api/readablestream/index.html | 101 + files/de/web/api/renderingcontext/index.html | 41 + files/de/web/api/response/index.html | 120 + files/de/web/api/response/response/index.html | 75 + files/de/web/api/rtcicecandidate/index.html | 121 + files/de/web/api/rtcpeerconnection/index.html | 379 + .../web/api/rtcrtptransceiver/direction/index.html | 82 + files/de/web/api/rtcrtptransceiver/index.html | 85 + files/de/web/api/service_worker_api/index.html | 280 + .../using_service_workers/index.html | 507 + files/de/web/api/serviceworker/index.html | 103 + files/de/web/api/serviceworkercontainer/index.html | 158 + .../api/serviceworkercontainer/register/index.html | 122 + files/de/web/api/sharedworker/index.html | 117 + files/de/web/api/speechsynthesis/index.html | 134 + files/de/web/api/storage/clear/index.html | 61 + files/de/web/api/storage/getitem/index.html | 78 + files/de/web/api/storage/index.html | 161 + files/de/web/api/storage/key/index.html | 75 + files/de/web/api/storage/length/index.html | 63 + files/de/web/api/storage/removeitem/index.html | 68 + files/de/web/api/storage/setitem/index.html | 146 + files/de/web/api/transferable/index.html | 122 + files/de/web/api/url/createobjecturl/index.html | 139 + files/de/web/api/url/index.html | 222 + files/de/web/api/url/protocol/index.html | 61 + files/de/web/api/urlsearchparams/index.html | 211 + files/de/web/api/usvstring/index.html | 42 + files/de/web/api/vollbild_api/index.html | 305 + files/de/web/api/web_animations_api/index.html | 99 + files/de/web/api/web_storage_api/index.html | 142 + files/de/web/api/web_workers_api/index.html | 226 + files/de/web/api/webgl_api/index.html | 258 + .../3d-objekte_mit_webgl_erstellen/index.html | 126 + .../animierte_texturen_in_webgl/index.html | 89 + .../tutorial/beleuchtung_in_webgl/index.html | 172 + .../einf\303\274hrung_in_webgl/index.html" | 73 + .../index.html" | 97 + .../index.html" | 238 + files/de/web/api/webgl_api/tutorial/index.html | 40 + .../objekte_mit_webgl_animieren/index.html | 118 + .../texturen_in_webgl_verwenden/index.html | 159 + files/de/web/api/webglactiveinfo/index.html | 129 + files/de/web/api/webglprogram/index.html | 166 + .../api/webglrenderingcontext/canvas/index.html | 74 + .../getactiveattrib/index.html | 115 + .../getattriblocation/index.html | 65 + files/de/web/api/webglrenderingcontext/index.html | 441 + files/de/web/api/websocket/binarytype/index.html | 56 + files/de/web/api/websocket/close/index.html | 64 + files/de/web/api/websocket/extensions/index.html | 49 + files/de/web/api/websocket/index.html | 314 + files/de/web/api/websocket/onclose/index.html | 45 + files/de/web/api/websocket/protocol/index.html | 51 + files/de/web/api/websocket/readystate/index.html | 77 + files/de/web/api/websocket/url/index.html | 47 + files/de/web/api/webxr_device_api/index.html | 298 + files/de/web/api/window/alert/index.html | 72 + .../de/web/api/window/applicationcache/index.html | 33 + .../web/api/window/cancelanimationframe/index.html | 72 + files/de/web/api/window/close/index.html | 78 + files/de/web/api/window/confirm/index.html | 73 + files/de/web/api/window/console/index.html | 56 + files/de/web/api/window/dump/index.html | 42 + files/de/web/api/window/history/index.html | 56 + files/de/web/api/window/index.html | 384 + files/de/web/api/window/length/index.html | 51 + files/de/web/api/window/localstorage/index.html | 81 + files/de/web/api/window/name/index.html | 57 + files/de/web/api/window/navigator/index.html | 98 + files/de/web/api/window/ondevicemotion/index.html | 56 + files/de/web/api/window/opendialog/index.html | 90 + files/de/web/api/window/opener/index.html | 28 + files/de/web/api/window/performance/index.html | 96 + files/de/web/api/window/print/index.html | 50 + files/de/web/api/window/prompt/index.html | 79 + files/de/web/api/window/screenx/index.html | 98 + files/de/web/api/window/scroll/index.html | 56 + files/de/web/api/window/scrollto/index.html | 75 + files/de/web/api/window/sessionstorage/index.html | 90 + files/de/web/api/window/stop/index.html | 38 + files/de/web/api/windowbase64/btoa/index.html | 145 + files/de/web/api/windowbase64/index.html | 120 + files/de/web/api/windoweventhandlers/index.html | 189 + .../windoweventhandlers/onafterprint/index.html | 93 + .../windoweventhandlers/onhashchange/index.html | 162 + .../api/windoweventhandlers/onpopstate/index.html | 57 + files/de/web/api/windowtimers/index.html | 124 + .../de/web/api/windowtimers/settimeout/index.html | 329 + files/de/web/api/worker/index.html | 191 + files/de/web/api/xmlhttprequest/index.html | 710 + .../xmlhttprequest/using_xmlhttprequest/index.html | 789 + .../index.html | 232 + .../aria/aria_live_regionen/index.html | 89 + .../aria/aria_techniken/index.html | 168 + files/de/web/barrierefreiheit/aria/index.html | 137 + files/de/web/barrierefreiheit/index.html | 78 + .../index.html | 145 + .../web/barrierefreiheit/webentwicklung/index.html | 58 + files/de/web/css/-moz-binding/index.html | 65 + .../web/css/-moz-border-bottom-colors/index.html | 134 + .../de/web/css/-moz-border-left-colors/index.html | 136 + .../de/web/css/-moz-border-right-colors/index.html | 88 + files/de/web/css/-moz-border-top-colors/index.html | 136 + files/de/web/css/-moz-box-flex/index.html | 103 + files/de/web/css/-moz-box-ordinal-group/index.html | 66 + files/de/web/css/-moz-box-pack/index.html | 136 + files/de/web/css/-moz-cell/index.html | 11 + files/de/web/css/-moz-float-edge/index.html | 67 + .../css/-moz-force-broken-image-icon/index.html | 57 + files/de/web/css/-moz-image-rect/index.html | 146 + files/de/web/css/-moz-image-region/index.html | 84 + files/de/web/css/-moz-orient/index.html | 73 + .../css/-moz-outline-radius-bottomleft/index.html | 22 + .../css/-moz-outline-radius-bottomright/index.html | 22 + .../web/css/-moz-outline-radius-topleft/index.html | 22 + .../css/-moz-outline-radius-topright/index.html | 22 + files/de/web/css/-moz-outline-radius/index.html | 141 + files/de/web/css/-moz-stack-sizing/index.html | 59 + files/de/web/css/-moz-text-blink/index.html | 47 + files/de/web/css/-moz-user-focus/index.html | 117 + files/de/web/css/-moz-user-input/index.html | 64 + files/de/web/css/-moz-user-modify/index.html | 133 + files/de/web/css/-moz-user-select/index.html | 55 + files/de/web/css/-moz-window-shadow/index.html | 53 + files/de/web/css/-webkit-box-reflect/index.html | 116 + files/de/web/css/-webkit-mask-origin/index.html | 100 + .../de/web/css/-webkit-mask-position-x/index.html | 124 + .../de/web/css/-webkit-mask-position-y/index.html | 122 + files/de/web/css/-webkit-mask-repeat-x/index.html | 128 + files/de/web/css/-webkit-mask-repeat-y/index.html | 126 + files/de/web/css/-webkit-mask-repeat/index.html | 127 + .../web/css/-webkit-overflow-scrolling/index.html | 95 + .../web/css/-webkit-print-color-adjust/index.html | 97 + .../web/css/-webkit-tap-highlight-color/index.html | 33 + .../de/web/css/-webkit-text-fill-color/index.html | 83 + .../web/css/-webkit-text-stroke-color/index.html | 108 + .../web/css/-webkit-text-stroke-width/index.html | 85 + files/de/web/css/-webkit-text-stroke/index.html | 126 + files/de/web/css/-webkit-touch-callout/index.html | 108 + files/de/web/css/@charset/index.html | 79 + files/de/web/css/@document/index.html | 71 + files/de/web/css/@import/index.html | 79 + files/de/web/css/@keyframes/index.html | 114 + files/de/web/css/@media/any-pointer/index.html | 67 + files/de/web/css/@media/index.html | 260 + files/de/web/css/@media/pointer/index.html | 91 + .../css/@media/prefers-reduced-motion/index.html | 23 + files/de/web/css/@media/width/index.html | 53 + files/de/web/css/@page/bleed/index.html | 77 + files/de/web/css/@page/index.html | 90 + files/de/web/css/@page/marks/index.html | 84 + files/de/web/css/@viewport/index.html | 96 + files/de/web/css/_colon_-moz-broken/index.html | 25 + files/de/web/css/_colon_-moz-drag-over/index.html | 42 + files/de/web/css/_colon_-moz-first-node/index.html | 48 + files/de/web/css/_colon_-moz-focusring/index.html | 91 + .../_colon_-moz-full-screen-ancestor/index.html | 82 + .../web/css/_colon_-moz-handler-blocked/index.html | 23 + .../web/css/_colon_-moz-handler-crashed/index.html | 23 + .../css/_colon_-moz-handler-disabled/index.html | 23 + files/de/web/css/_colon_-moz-last-node/index.html | 48 + .../de/web/css/_colon_-moz-list-bullet/index.html | 47 + .../de/web/css/_colon_-moz-list-number/index.html | 45 + files/de/web/css/_colon_-moz-loading/index.html | 17 + .../web/css/_colon_-moz-locale-dir(ltr)/index.html | 28 + .../web/css/_colon_-moz-locale-dir(rtl)/index.html | 30 + .../css/_colon_-moz-lwtheme-brighttext/index.html | 22 + .../css/_colon_-moz-lwtheme-darktext/index.html | 23 + files/de/web/css/_colon_-moz-lwtheme/index.html | 26 + .../web/css/_colon_-moz-only-whitespace/index.html | 36 + .../de/web/css/_colon_-moz-placeholder/index.html | 120 + .../web/css/_colon_-moz-submit-invalid/index.html | 28 + files/de/web/css/_colon_-moz-suppressed/index.html | 17 + .../index.html | 19 + .../index.html | 25 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 73 + .../index.html | 65 + .../_colon_-moz-tree-cell-text(hover)/index.html | 20 + .../web/css/_colon_-moz-tree-cell-text/index.html | 30 + files/de/web/css/_colon_-moz-tree-cell/index.html | 38 + .../de/web/css/_colon_-moz-tree-column/index.html | 29 + .../css/_colon_-moz-tree-drop-feedback/index.html | 29 + files/de/web/css/_colon_-moz-tree-image/index.html | 34 + .../css/_colon_-moz-tree-indentation/index.html | 27 + files/de/web/css/_colon_-moz-tree-line/index.html | 25 + .../css/_colon_-moz-tree-progressmeter/index.html | 28 + .../web/css/_colon_-moz-tree-row(hover)/index.html | 20 + files/de/web/css/_colon_-moz-tree-row/index.html | 48 + .../web/css/_colon_-moz-tree-separator/index.html | 29 + .../de/web/css/_colon_-moz-tree-twisty/index.html | 30 + files/de/web/css/_colon_-moz-ui-invalid/index.html | 94 + files/de/web/css/_colon_-moz-ui-valid/index.html | 94 + .../web/css/_colon_-moz-user-disabled/index.html | 19 + .../web/css/_colon_-moz-window-inactive/index.html | 51 + .../de/web/css/_colon_-webkit-autofill/index.html | 80 + files/de/web/css/_colon_active/index.html | 84 + files/de/web/css/_colon_default/index.html | 83 + files/de/web/css/_colon_dir/index.html | 69 + files/de/web/css/_colon_disabled/index.html | 139 + files/de/web/css/_colon_empty/index.html | 66 + files/de/web/css/_colon_enabled/index.html | 96 + files/de/web/css/_colon_first-child/index.html | 103 + files/de/web/css/_colon_first-of-type/index.html | 76 + files/de/web/css/_colon_first/index.html | 65 + files/de/web/css/_colon_focus/index.html | 79 + files/de/web/css/_colon_fullscreen/index.html | 81 + files/de/web/css/_colon_hover/index.html | 122 + files/de/web/css/_colon_in-range/index.html | 117 + files/de/web/css/_colon_indeterminate/index.html | 74 + files/de/web/css/_colon_invalid/index.html | 134 + files/de/web/css/_colon_lang/index.html | 85 + files/de/web/css/_colon_last-child/index.html | 74 + files/de/web/css/_colon_last-of-type/index.html | 86 + files/de/web/css/_colon_link/index.html | 70 + files/de/web/css/_colon_not/index.html | 76 + files/de/web/css/_colon_nth-child/index.html | 163 + files/de/web/css/_colon_only-child/index.html | 113 + files/de/web/css/_colon_optional/index.html | 69 + files/de/web/css/_colon_out-of-range/index.html | 94 + files/de/web/css/_colon_required/index.html | 67 + files/de/web/css/_colon_root/index.html | 48 + files/de/web/css/_colon_visited/index.html | 76 + .../css/_doublecolon_-moz-page-sequence/index.html | 83 + files/de/web/css/_doublecolon_-moz-page/index.html | 28 + .../css/_doublecolon_-moz-placeholder/index.html | 107 + .../css/_doublecolon_-moz-progress-bar/index.html | 36 + .../index.html | 81 + .../de/web/css/_doublecolon_-ms-browse/index.html | 79 + files/de/web/css/_doublecolon_-ms-check/index.html | 23 + .../web/css/_doublecolon_-ms-fill-lower/index.html | 90 + .../web/css/_doublecolon_-ms-fill-upper/index.html | 90 + files/de/web/css/_doublecolon_-ms-fill/index.html | 71 + .../de/web/css/_doublecolon_-ms-reveal/index.html | 24 + files/de/web/css/_doublecolon_-ms-thumb/index.html | 24 + files/de/web/css/_doublecolon_after/index.html | 158 + files/de/web/css/_doublecolon_backdrop/index.html | 49 + files/de/web/css/_doublecolon_before/index.html | 230 + .../de/web/css/_doublecolon_placeholder/index.html | 150 + files/de/web/css/_doublecolon_selection/index.html | 86 + files/de/web/css/alias/index.html | 10 + files/de/web/css/align-content/index.html | 212 + files/de/web/css/align-items/index.html | 107 + files/de/web/css/align-self/index.html | 95 + files/de/web/css/all/index.html | 140 + .../de/web/css/alternative_style_sheets/index.html | 47 + files/de/web/css/angle-percentage/index.html | 50 + files/de/web/css/angle/index.html | 86 + .../angrenzende_geschwisterselektoren/index.html | 88 + files/de/web/css/animation-delay/index.html | 78 + files/de/web/css/animation-direction/index.html | 91 + files/de/web/css/animation-duration/index.html | 79 + files/de/web/css/animation-fill-mode/index.html | 145 + .../web/css/animation-iteration-count/index.html | 75 + files/de/web/css/animation-name/index.html | 86 + files/de/web/css/animation-play-state/index.html | 84 + .../web/css/animation-timing-function/index.html | 93 + files/de/web/css/animation/index.html | 125 + files/de/web/css/appearance/index.html | 1532 ++ files/de/web/css/at-rule/index.html | 61 + files/de/web/css/attr()/index.html | 189 + files/de/web/css/attributselektoren/index.html | 122 + files/de/web/css/aural/index.html | 17 + files/de/web/css/auto/index.html | 26 + files/de/web/css/backdrop-filter/index.html | 97 + files/de/web/css/backface-visibility/index.html | 208 + files/de/web/css/background-attachment/index.html | 158 + files/de/web/css/background-blend-mode/index.html | 129 + files/de/web/css/background-clip/index.html | 110 + files/de/web/css/background-color/index.html | 133 + files/de/web/css/background-image/index.html | 155 + files/de/web/css/background-origin/index.html | 60 + files/de/web/css/background-position/index.html | 86 + files/de/web/css/background-repeat/index.html | 166 + files/de/web/css/background-size/index.html | 151 + files/de/web/css/background/index.html | 182 + files/de/web/css/basic-shape/index.html | 176 + files/de/web/css/berechneter_wert/index.html | 32 + files/de/web/css/border-bottom-color/index.html | 99 + .../web/css/border-bottom-left-radius/index.html | 51 + .../web/css/border-bottom-right-radius/index.html | 56 + files/de/web/css/border-bottom-style/index.html | 99 + files/de/web/css/border-bottom-width/index.html | 82 + files/de/web/css/border-bottom/index.html | 89 + files/de/web/css/border-collapse/index.html | 155 + files/de/web/css/border-color/index.html | 107 + files/de/web/css/border-image-outset/index.html | 77 + files/de/web/css/border-image-repeat/index.html | 83 + files/de/web/css/border-image-slice/index.html | 102 + files/de/web/css/border-image-source/index.html | 67 + files/de/web/css/border-image-width/index.html | 119 + files/de/web/css/border-image/index.html | 101 + files/de/web/css/border-left-color/index.html | 36 + files/de/web/css/border-left-style/index.html | 120 + files/de/web/css/border-left-width/index.html | 38 + files/de/web/css/border-left/index.html | 48 + files/de/web/css/border-radius/index.html | 141 + files/de/web/css/border-right-color/index.html | 36 + files/de/web/css/border-right-style/index.html | 120 + files/de/web/css/border-right-width/index.html | 90 + files/de/web/css/border-right/index.html | 48 + files/de/web/css/border-spacing/index.html | 143 + files/de/web/css/border-style/index.html | 219 + files/de/web/css/border-top-color/index.html | 81 + files/de/web/css/border-top-left-radius/index.html | 91 + .../de/web/css/border-top-right-radius/index.html | 47 + files/de/web/css/border-top-style/index.html | 120 + files/de/web/css/border-top-width/index.html | 90 + files/de/web/css/border-top/index.html | 98 + files/de/web/css/border-width/index.html | 118 + files/de/web/css/border/index.html | 99 + files/de/web/css/bottom/index.html | 74 + files/de/web/css/box-decoration-break/index.html | 136 + files/de/web/css/box-shadow/index.html | 107 + files/de/web/css/box-sizing/index.html | 137 + files/de/web/css/break-after/index.html | 114 + files/de/web/css/break-inside/index.html | 127 + files/de/web/css/calc()/index.html | 106 + files/de/web/css/caption-side/index.html | 153 + files/de/web/css/clear/index.html | 250 + files/de/web/css/clip-path/index.html | 128 + files/de/web/css/clip/index.html | 131 + files/de/web/css/color/index.html | 121 + files/de/web/css/column-count/index.html | 106 + files/de/web/css/column-fill/index.html | 74 + files/de/web/css/column-gap/index.html | 94 + files/de/web/css/column-rule-color/index.html | 67 + files/de/web/css/column-rule-style/index.html | 72 + files/de/web/css/column-rule-width/index.html | 78 + files/de/web/css/column-rule/index.html | 74 + files/de/web/css/column-span/index.html | 67 + files/de/web/css/column-width/index.html | 99 + files/de/web/css/columns/index.html | 113 + files/de/web/css/content/index.html | 238 + files/de/web/css/counter-increment/index.html | 99 + files/de/web/css/counter-reset/index.html | 100 + .../css_animationen_nutzen/index.html | 365 + files/de/web/css/css_animations/index.html | 79 + .../border-image_generator/index.html | 2626 ++++ .../border-radius_generator/index.html | 1600 ++ .../web/css/css_background_and_borders/index.html | 154 + .../index.html" | 69 + .../de/web/css/css_basic_user_interface/index.html | 76 + .../css_boxmodell/box-shadow_generator/index.html | 2884 ++++ .../index.html" | 52 + files/de/web/css/css_boxmodell/index.html | 165 + .../index.html" | 60 + files/de/web/css/css_charsets/index.html | 50 + .../css/css_colors/farbauswahl_werkzeug/index.html | 3225 ++++ files/de/web/css/css_colors/index.html | 117 + files/de/web/css/css_columns/index.html | 60 + .../css/css_compositing_and_blending/index.html | 98 + files/de/web/css/css_conditional_rules/index.html | 100 + files/de/web/css/css_device_adaptation/index.html | 104 + .../aligning_items_in_a_flex_container/index.html | 210 + .../flex_elemente_sortieren/index.html | 138 + .../grundlegende_konzepte_der_flexbox/index.html | 230 + .../de/web/css/css_flexible_box_layout/index.html | 111 + .../using_css_flexible_boxes/index.html | 397 + files/de/web/css/css_fonts/index.html | 145 + files/de/web/css/css_generated_content/index.html | 61 + files/de/web/css/css_grid_layout/index.html | 252 + .../implementing_image_sprites_in_css/index.html | 50 + files/de/web/css/css_images/index.html | 145 + .../css_z\303\244hler_verwenden/index.html" | 126 + files/de/web/css/css_lists_and_counters/index.html | 132 + .../index.html" | 104 + files/de/web/css/css_logical_properties/index.html | 129 + files/de/web/css/css_masken/index.html | 55 + .../de/web/css/css_namensr\303\244ume/index.html" | 51 + files/de/web/css/css_positioning/index.html | 64 + .../adding_z-index/index.html | 161 + .../understanding_z_index/index.html | 51 + .../the_stacking_context/index.html | 243 + files/de/web/css/css_referenz/index.html | 211 + files/de/web/css/css_ruby/index.html | 97 + files/de/web/css/css_selectors/index.html | 153 + files/de/web/css/css_shapes/index.html | 98 + files/de/web/css/css_table/index.html | 101 + files/de/web/css/css_text/index.html | 123 + files/de/web/css/css_textdekoration/index.html | 65 + .../css_transformationen_verwenden/index.html | 248 + files/de/web/css/css_transforms/index.html | 152 + files/de/web/css/css_transitions/index.html | 116 + files/de/web/css/css_typen/index.html | 59 + files/de/web/css/css_user_interface/index.html | 116 + files/de/web/css/css_writing_modes/index.html | 109 + files/de/web/css/cssom_view/index.html | 99 + files/de/web/css/cursor/index.html | 300 + files/de/web/css/custom-ident/index.html | 120 + files/de/web/css/direction/index.html | 90 + files/de/web/css/display/index.html | 259 + files/de/web/css/empty-cells/index.html | 76 + files/de/web/css/ersetztes_element/index.html | 23 + files/de/web/css/farben/index.html | 1285 ++ files/de/web/css/filter/index.html | 1064 ++ files/de/web/css/flex-flow/index.html | 64 + files/de/web/css/flex-grow/index.html | 82 + files/de/web/css/flex-shrink/index.html | 75 + files/de/web/css/flex-wrap/index.html | 81 + files/de/web/css/float/index.html | 109 + files/de/web/css/font-family/index.html | 185 + files/de/web/css/font-feature-settings/index.html | 108 + files/de/web/css/font-size/index.html | 327 + files/de/web/css/font-style/index.html | 225 + files/de/web/css/font-variant/index.html | 116 + files/de/web/css/font-weight/index.html | 276 + files/de/web/css/font/index.html | 176 + files/de/web/css/frequency/index.html | 111 + files/de/web/css/gradient/index.html | 91 + files/de/web/css/grid-gap/index.html | 177 + files/de/web/css/grid-template-areas/index.html | 194 + files/de/web/css/grid/index.html | 184 + files/de/web/css/height/index.html | 157 + files/de/web/css/hyphens/index.html | 119 + files/de/web/css/id-selektoren/index.html | 72 + files/de/web/css/image-orientation/index.html | 98 + files/de/web/css/image-rendering/index.html | 114 + files/de/web/css/image/index.html | 129 + files/de/web/css/index.html | 100 + files/de/web/css/index/index.html | 8 + files/de/web/css/inherit/index.html | 75 + files/de/web/css/initial/index.html | 100 + files/de/web/css/initialwert/index.html | 20 + files/de/web/css/integer/index.html | 89 + files/de/web/css/justify-content/index.html | 187 + files/de/web/css/kindselektoren/index.html | 90 + files/de/web/css/klassenselektoren/index.html | 76 + files/de/web/css/kurzformat_eigenschaft/index.html | 158 + files/de/web/css/layout_mode/index.html | 27 + files/de/web/css/left/index.html | 190 + files/de/web/css/length/index.html | 178 + files/de/web/css/letter-spacing/index.html | 117 + files/de/web/css/line-break/index.html | 72 + files/de/web/css/linear-gradient()/index.html | 332 + files/de/web/css/list-style-image/index.html | 102 + files/de/web/css/list-style-position/index.html | 116 + files/de/web/css/list-style-type/index.html | 562 + files/de/web/css/list-style/index.html | 104 + files/de/web/css/margin-bottom/index.html | 87 + files/de/web/css/margin-left/index.html | 87 + files/de/web/css/margin-right/index.html | 87 + files/de/web/css/margin-top/index.html | 87 + files/de/web/css/margin/index.html | 121 + files/de/web/css/mask/index.html | 96 + files/de/web/css/max-height/index.html | 111 + files/de/web/css/max-width/index.html | 139 + files/de/web/css/media_queries/index.html | 76 + .../media_queries/using_media_queries/index.html | 644 + files/de/web/css/min-height/index.html | 77 + files/de/web/css/min-width/index.html | 101 + files/de/web/css/mix-blend-mode/index.html | 97 + files/de/web/css/motion_path/index.html | 104 + files/de/web/css/mozilla_extensions/index.html | 661 + files/de/web/css/none/index.html | 25 + files/de/web/css/normal/index.html | 27 + files/de/web/css/number/index.html | 80 + files/de/web/css/object-fit/index.html | 148 + files/de/web/css/object-position/index.html | 147 + files/de/web/css/opacity/index.html | 158 + files/de/web/css/order/index.html | 104 + files/de/web/css/orphans/index.html | 121 + files/de/web/css/outline-color/index.html | 154 + files/de/web/css/outline/index.html | 162 + files/de/web/css/overflow-clip-box/index.html | 97 + files/de/web/css/overflow/index.html | 130 + files/de/web/css/overscroll-behavior-y/index.html | 85 + files/de/web/css/overscroll-behavior/index.html | 104 + files/de/web/css/padding-bottom/index.html | 76 + files/de/web/css/padding-left/index.html | 86 + files/de/web/css/padding-right/index.html | 76 + files/de/web/css/padding-top/index.html | 76 + files/de/web/css/padding/index.html | 125 + files/de/web/css/page-break-after/index.html | 90 + files/de/web/css/page-break-before/index.html | 90 + files/de/web/css/page-break-inside/index.html | 87 + files/de/web/css/paged_media/index.html | 21 + files/de/web/css/percentage/index.html | 84 + files/de/web/css/pointer-events/index.html | 184 + files/de/web/css/position/index.html | 104 + files/de/web/css/position_value/index.html | 86 + files/de/web/css/property_template/index.html | 165 + files/de/web/css/pseudo-classes/index.html | 122 + files/de/web/css/pseudo-elements/index.html | 78 + files/de/web/css/quotes/index.html | 86 + files/de/web/css/ratio/index.html | 79 + files/de/web/css/resize/index.html | 196 + files/de/web/css/resolution/index.html | 145 + files/de/web/css/right/index.html | 97 + files/de/web/css/row-gap/index.html | 163 + files/de/web/css/ruby-align/index.html | 153 + files/de/web/css/scroll-behavior/index.html | 143 + files/de/web/css/shape/index.html | 93 + "files/de/web/css/spezifit\303\244t/index.html" | 197 + files/de/web/css/string/index.html | 70 + files/de/web/css/tab-size/index.html | 94 + files/de/web/css/table-layout/index.html | 117 + .../web/css/tats\303\244chlicher_wert/index.html" | 36 + files/de/web/css/text-align-last/index.html | 106 + files/de/web/css/text-align/index.html | 238 + files/de/web/css/text-decoration-color/index.html | 135 + files/de/web/css/text-decoration-line/index.html | 94 + files/de/web/css/text-decoration/index.html | 116 + files/de/web/css/text-indent/index.html | 119 + files/de/web/css/text-justify/index.html | 117 + files/de/web/css/text-overflow/index.html | 274 + files/de/web/css/text-rendering/index.html | 133 + files/de/web/css/text-shadow/index.html | 145 + files/de/web/css/text-transform/index.html | 504 + .../de/web/css/text-underline-position/index.html | 92 + files/de/web/css/time/index.html | 75 + .../css/tools/cubic_bezier_generator/index.html | 321 + files/de/web/css/tools/index.html | 25 + .../css/tools/linear-gradient_generator/index.html | 3328 +++++ files/de/web/css/top/index.html | 83 + files/de/web/css/touch-action/index.html | 72 + files/de/web/css/transform-origin/index.html | 692 + files/de/web/css/transform/index.html | 123 + files/de/web/css/transition-property/index.html | 91 + files/de/web/css/transition/index.html | 104 + files/de/web/css/tutorials/index.html | 62 + files/de/web/css/type_selectors/index.html | 78 + files/de/web/css/unicode-bidi/index.html | 102 + files/de/web/css/universal_selectors/index.html | 80 + files/de/web/css/unset/index.html | 64 + files/de/web/css/url/index.html | 84 + files/de/web/css/vererbung/index.html | 33 + files/de/web/css/vertical-align/index.html | 240 + files/de/web/css/visibility/index.html | 99 + files/de/web/css/webkit_extensions/index.html | 271 + files/de/web/css/wertdefinitionssyntax/index.html | 405 + files/de/web/css/white-space/index.html | 244 + files/de/web/css/widows/index.html | 128 + files/de/web/css/width/index.html | 191 + files/de/web/css/word-break/index.html | 115 + files/de/web/css/word-spacing/index.html | 107 + files/de/web/css/word-wrap/index.html | 83 + files/de/web/css/z-index/index.html | 150 + .../web/demos_of_open_web_technologies/index.html | 154 + files/de/web/events/change/index.html | 109 + files/de/web/events/domcontentloaded/index.html | 156 + files/de/web/events/index.html | 1981 +++ files/de/web/events/load/index.html | 88 + files/de/web/events/readystatechange/index.html | 86 + files/de/web/guide/ajax/erste_schritte/index.html | 338 + files/de/web/guide/ajax/index.html | 83 + .../web/guide/css/getting_started/farbe/index.html | 332 + files/de/web/guide/css/getting_started/index.html | 59 + .../kaskadierung_und_vererbung/index.html | 159 + .../css/getting_started/lesbares_css/index.html | 165 + .../css/getting_started/selektoren/index.html | 429 + .../css/getting_started/textstyles/index.html | 151 + .../css/getting_started/was_ist_css/index.html | 112 + .../css/getting_started/why_use_css/index.html | 105 + .../wie_css_funktioniert/index.html | 122 + .../guide/css/scaling_background_images/index.html | 111 + files/de/web/guide/dom/index.html | 21 + .../manipulating_the_browser_history/index.html | 227 + .../creating_and_triggering_events/index.html | 135 + files/de/web/guide/events/index.html | 53 + files/de/web/guide/graphics/index.html | 51 + .../canvas_tutorial/advanced_animations/index.html | 380 + .../applying_styles_and_colors/index.html | 785 + .../canvas_tutorial/basic_animations/index.html | 307 + .../guide/html/canvas_tutorial/bilder/index.html | 324 + .../canvas_tutorial/canvas_optimieren/index.html | 118 + .../html/canvas_tutorial/drawing_text/index.html | 165 + .../canvas_tutorial/formen_zeichnen/index.html | 453 + .../html/canvas_tutorial/grundlagen/index.html | 154 + files/de/web/guide/html/canvas_tutorial/index.html | 51 + .../de/web/guide/html/content_editable/index.html | 52 + .../de/web/guide/html/inhaltskategorien/index.html | 153 + .../index.html | 351 + files/de/web/guide/index.html | 28 + files/de/web/html/applying_color/index.html | 498 + files/de/web/html/attributes/index.html | 662 + files/de/web/html/block-level_elemente/index.html | 108 + files/de/web/html/canvas/index.html | 120 + files/de/web/html/element/a/index.html | 361 + files/de/web/html/element/abbr/index.html | 202 + files/de/web/html/element/acronym/index.html | 78 + files/de/web/html/element/address/index.html | 163 + files/de/web/html/element/applet/index.html | 139 + files/de/web/html/element/area/index.html | 174 + files/de/web/html/element/article/index.html | 146 + files/de/web/html/element/aside/index.html | 107 + files/de/web/html/element/b/index.html | 83 + files/de/web/html/element/base/index.html | 170 + files/de/web/html/element/bdi/index.html | 138 + files/de/web/html/element/bdo/index.html | 153 + files/de/web/html/element/bgsound/index.html | 96 + files/de/web/html/element/big/index.html | 89 + files/de/web/html/element/blink/index.html | 87 + files/de/web/html/element/blockquote/index.html | 156 + files/de/web/html/element/body/index.html | 230 + files/de/web/html/element/br/index.html | 130 + files/de/web/html/element/canvas/index.html | 110 + files/de/web/html/element/caption/index.html | 151 + files/de/web/html/element/center/index.html | 41 + files/de/web/html/element/cite/index.html | 152 + files/de/web/html/element/code/index.html | 147 + files/de/web/html/element/col/index.html | 240 + files/de/web/html/element/data/index.html | 90 + files/de/web/html/element/datalist/index.html | 106 + files/de/web/html/element/dd/index.html | 140 + files/de/web/html/element/del/index.html | 124 + files/de/web/html/element/details/index.html | 97 + files/de/web/html/element/dialog/index.html | 206 + files/de/web/html/element/dir/index.html | 44 + files/de/web/html/element/div/index.html | 117 + files/de/web/html/element/dl/index.html | 222 + files/de/web/html/element/dt/index.html | 135 + files/de/web/html/element/em/index.html | 152 + files/de/web/html/element/embed/index.html | 99 + files/de/web/html/element/fieldset/index.html | 489 + files/de/web/html/element/font/index.html | 53 + files/de/web/html/element/footer/index.html | 99 + files/de/web/html/element/frame/index.html | 52 + files/de/web/html/element/h1-h6/index.html | 72 + files/de/web/html/element/head/index.html | 28 + files/de/web/html/element/header/index.html | 143 + files/de/web/html/element/hr/index.html | 57 + files/de/web/html/element/html/index.html | 157 + files/de/web/html/element/i/index.html | 156 + files/de/web/html/element/iframe/index.html | 44 + files/de/web/html/element/image/index.html | 48 + files/de/web/html/element/img/index.html | 348 + files/de/web/html/element/index.html | 249 + files/de/web/html/element/input/button/index.html | 246 + .../de/web/html/element/input/checkbox/index.html | 352 + files/de/web/html/element/input/index.html | 1411 ++ files/de/web/html/element/ins/index.html | 122 + files/de/web/html/element/legend/index.html | 97 + files/de/web/html/element/li/index.html | 193 + files/de/web/html/element/link/index.html | 361 + files/de/web/html/element/main/index.html | 175 + files/de/web/html/element/map/index.html | 116 + files/de/web/html/element/marquee/index.html | 216 + files/de/web/html/element/nav/index.html | 106 + files/de/web/html/element/noembed/index.html | 41 + files/de/web/html/element/noscript/index.html | 103 + files/de/web/html/element/object/index.html | 176 + files/de/web/html/element/ol/index.html | 157 + files/de/web/html/element/optgroup/index.html | 161 + files/de/web/html/element/option/index.html | 155 + files/de/web/html/element/p/index.html | 155 + files/de/web/html/element/picture/index.html | 103 + files/de/web/html/element/pre/index.html | 37 + files/de/web/html/element/progress/index.html | 175 + files/de/web/html/element/q/index.html | 155 + files/de/web/html/element/s/index.html | 70 + files/de/web/html/element/section/index.html | 170 + files/de/web/html/element/shadow/index.html | 159 + files/de/web/html/element/strong/index.html | 49 + files/de/web/html/element/summary/index.html | 106 + files/de/web/html/element/table/index.html | 448 + files/de/web/html/element/td/index.html | 218 + files/de/web/html/element/template/index.html | 186 + files/de/web/html/element/th/index.html | 297 + files/de/web/html/element/time/index.html | 162 + files/de/web/html/element/title/index.html | 81 + files/de/web/html/element/tr/index.html | 230 + files/de/web/html/element/tt/index.html | 52 + files/de/web/html/element/u/index.html | 68 + files/de/web/html/element/ul/index.html | 123 + files/de/web/html/element/var/index.html | 46 + files/de/web/html/element/video/index.html | 379 + .../html/globale_attribute/accesskey/index.html | 116 + .../globale_attribute/autocapitalize/index.html | 46 + .../de/web/html/globale_attribute/class/index.html | 109 + .../globale_attribute/contenteditable/index.html | 114 + files/de/web/html/globale_attribute/dir/index.html | 85 + .../html/globale_attribute/draggable/index.html | 104 + .../web/html/globale_attribute/dropzone/index.html | 45 + .../web/html/globale_attribute/hidden/index.html | 56 + files/de/web/html/globale_attribute/id/index.html | 109 + files/de/web/html/globale_attribute/index.html | 205 + .../html/globale_attribute/inputmode/index.html | 76 + files/de/web/html/globale_attribute/is/index.html | 62 + .../html/globale_attribute/kontextmenu/index.html | 169 + .../de/web/html/globale_attribute/lang/index.html | 60 + .../de/web/html/globale_attribute/style/index.html | 107 + .../web/html/globale_attribute/tabindex/index.html | 130 + .../de/web/html/globale_attribute/title/index.html | 164 + .../html/globale_attribute/translate/index.html | 30 + .../web/html/html5/html5_element_list/index.html | 586 + files/de/web/html/html5/index.html | 174 + files/de/web/html/index.html | 100 + files/de/web/html/inline_elemente/index.html | 32 + files/de/web/html/referenz/index.html | 29 + .../html/using_the_application_cache/index.html | 375 + .../identifying_resources_on_the_web/index.html | 188 + files/de/web/http/basics_of_http/index.html | 51 + files/de/web/http/caching_faq/index.html | 73 + .../http/cors/errors/corsdidnotsucceed/index.html | 34 + .../index.html | 37 + .../cors/errors/corsfehltquelleerlauben/index.html | 59 + .../http/cors/errors/corsrequestnothttp/index.html | 25 + files/de/web/http/cors/errors/index.html | 76 + files/de/web/http/cors/index.html | 567 + files/de/web/http/headers/accept/index.html | 96 + files/de/web/http/headers/age/index.html | 80 + files/de/web/http/headers/cache-control/index.html | 176 + files/de/web/http/headers/connection/index.html | 48 + files/de/web/http/headers/cookie/index.html | 72 + files/de/web/http/headers/dnt/index.html | 88 + files/de/web/http/headers/expect-ct/index.html | 113 + files/de/web/http/headers/expires/index.html | 75 + files/de/web/http/headers/index.html | 441 + files/de/web/http/headers/referer/index.html | 87 + files/de/web/http/headers/server/index.html | 69 + files/de/web/http/headers/set-cookie/index.html | 225 + .../http/headers/set-cookie/samesite/index.html | 135 + files/de/web/http/headers/tk/index.html | 94 + files/de/web/http/headers/user-agent/index.html | 139 + .../http/headers/x-content-type-options/index.html | 93 + .../de/web/http/headers/x-frame-options/index.html | 131 + files/de/web/http/index.html | 366 + files/de/web/http/methods/connect/index.html | 84 + files/de/web/http/methods/delete/index.html | 98 + files/de/web/http/methods/get/index.html | 75 + files/de/web/http/methods/index.html | 75 + files/de/web/http/status/100/index.html | 46 + files/de/web/http/status/200/index.html | 57 + files/de/web/http/status/201/index.html | 43 + files/de/web/http/status/302/index.html | 54 + files/de/web/http/status/304/index.html | 61 + files/de/web/http/status/400/index.html | 36 + files/de/web/http/status/401/index.html | 57 + files/de/web/http/status/403/index.html | 55 + files/de/web/http/status/404/index.html | 62 + files/de/web/http/status/409/index.html | 40 + files/de/web/http/status/410/index.html | 53 + files/de/web/http/status/414/index.html | 47 + files/de/web/http/status/418/index.html | 47 + files/de/web/http/status/500/index.html | 42 + files/de/web/http/status/503/index.html | 55 + files/de/web/http/status/504/index.html | 51 + files/de/web/http/status/505/index.html | 39 + files/de/web/http/status/511/index.html | 43 + files/de/web/http/status/index.html | 175 + files/de/web/index.html | 102 + .../de/web/javascript/about_javascript/index.html | 61 + .../index.html" | 340 + files/de/web/javascript/closures/index.html | 471 + files/de/web/javascript/datenstrukturen/index.html | 271 + .../index.html | 909 ++ .../index.html" | 411 + files/de/web/javascript/eventloop/index.html | 138 + .../guide/ausdruecke_und_operatoren/index.html | 965 ++ .../javascript/guide/einf\303\274hrung/index.html" | 140 + .../guide/feinheiten_des_objektmodells/index.html | 721 + .../de/web/javascript/guide/funktionen/index.html | 657 + .../guide/grammatik_und_typen/index.html | 699 + files/de/web/javascript/guide/index.html | 130 + .../guide/indexed_collections/index.html | 448 + .../javascript/guide/keyed_collections/index.html | 157 + .../kontrollfluss_und_fehlerbehandlung/index.html | 430 + .../javascript/guide/meta_programming/index.html | 265 + .../guide/mit_objekten_arbeiten/index.html | 506 + files/de/web/javascript/guide/modules/index.html | 446 + .../javascript/guide/numbers_and_dates/index.html | 378 + .../guide/regular_expressions/index.html | 625 + .../guide/schleifen_und_iterationen/index.html | 337 + .../javascript/guide/textformatierung/index.html | 257 + .../web/javascript/guide/using_promises/index.html | 341 + files/de/web/javascript/index.html | 120 + .../inheritance_and_the_prototype_chain/index.html | 300 + .../index.html | 389 + .../javascript_technologieuebersicht/index.html | 87 + .../web/javascript/language_resources/index.html | 142 + files/de/web/javascript/reference/about/index.html | 52 + .../reference/fehler/already_has_pragma/index.html | 42 + .../fehler/array_sort_argument/index.html | 47 + .../reference/fehler/bad_octal/index.html | 54 + .../reference/fehler/bad_radix/index.html | 61 + .../reference/fehler/bad_regexp_flag/index.html | 105 + .../fehler/bad_return_or_yield/index.html | 55 + .../fehler/called_on_incompatible_type/index.html | 64 + .../index.html | 60 + .../fehler/cant_access_property/index.html | 59 + .../index.html | 64 + .../reference/fehler/cant_delete/index.html | 58 + .../fehler/cant_redefine_property/index.html | 51 + .../fehler/cyclic_object_value/index.html | 67 + .../reference/fehler/dead_object/index.html | 50 + .../fehler/delete_in_strict_mode/index.html | 70 + .../index.html | 75 + .../deprecated_expression_closures/index.html | 78 + .../reference/fehler/deprecated_octal/index.html | 67 + .../fehler/deprecated_source_map_pragma/index.html | 58 + .../fehler/deprecated_string_generics/index.html | 104 + .../fehler/deprecated_tolocaleformat/index.html | 90 + .../reference/fehler/equal_as_assign/index.html | 54 + .../for-each-in_loops_are_deprecated/index.html | 168 + .../reference/fehler/getter_only/index.html | 83 + .../fehler/identifier_after_number/index.html | 53 + .../reference/fehler/illegal_character/index.html | 80 + .../fehler/in_operator_no_object/index.html | 72 + .../de/web/javascript/reference/fehler/index.html | 29 + .../fehler/invalid_array_length/index.html | 77 + .../invalid_assignment_left-hand_side/index.html | 53 + .../fehler/invalid_const_assignment/index.html | 90 + .../reference/fehler/invalid_date/index.html | 54 + .../fehler/invalid_for-in_initializer/index.html | 74 + .../fehler/invalid_for-of_initializer/index.html | 63 + .../index.html | 62 + .../reference/fehler/is_not_iterable/index.html | 103 + .../reference/fehler/json_bad_parse/index.html | 112 + .../fehler/malformed_formal_parameter/index.html | 61 + .../reference/fehler/malformed_uri/index.html | 66 + .../fehler/missing_bracket_after_list/index.html | 56 + .../missing_colon_after_property_id/index.html | 77 + .../missing_curly_after_function_body/index.html | 67 + .../missing_curly_after_property_list/index.html | 51 + .../fehler/missing_formal_parameter/index.html | 80 + .../fehler/missing_initializer_in_const/index.html | 58 + .../missing_name_after_dot_operator/index.html | 68 + .../index.html | 42 + .../missing_parenthesis_after_condition/index.html | 70 + .../missing_semicolon_before_statement/index.html | 67 + .../fehler/more_arguments_needed/index.html | 48 + .../fehler/negative_repetition_count/index.html | 44 + .../reference/fehler/no_non-null_object/index.html | 66 + .../reference/fehler/no_properties/index.html | 40 + .../reference/fehler/no_variable_name/index.html | 84 + .../non_configurable_array_element/index.html | 83 + .../reference/fehler/not_a_codepoint/index.html | 55 + .../reference/fehler/not_a_constructor/index.html | 97 + .../reference/fehler/not_a_function/index.html | 124 + .../reference/fehler/not_defined/index.html | 70 + .../reference/fehler/precision_range/index.html | 96 + .../fehler/property_access_denied/index.html | 47 + .../reference/fehler/read-only/index.html | 78 + .../fehler/redeclared_parameter/index.html | 61 + .../index.html | 88 + .../fehler/reserved_identifier/index.html | 80 + .../fehler/resulting_string_too_large/index.html | 49 + .../reference/fehler/stmt_after_return/index.html | 77 + .../fehler/strict_non_simple_params/index.html | 111 + .../reference/fehler/too_much_recursion/index.html | 54 + .../typed_array_invalid_arguments/index.html | 77 + .../reference/fehler/undeclared_var/index.html | 67 + .../reference/fehler/undefined_prop/index.html | 63 + .../reference/fehler/unexpected_token/index.html | 47 + .../reference/fehler/unexpected_type/index.html | 67 + .../fehler/unnamed_function_statement/index.html | 115 + .../fehler/unterminated_string_literal/index.html | 67 + .../reference/fehler/var_hides_argument/index.html | 56 + .../functions/arguments/@@iterator/index.html | 78 + .../functions/arguments/callee/index.html | 157 + .../reference/functions/arguments/index.html | 223 + .../functions/arguments/length/index.html | 87 + .../functions/default_parameters/index.html | 223 + .../javascript/reference/functions/get/index.html | 174 + .../web/javascript/reference/functions/index.html | 594 + .../functions/methoden_definitionen/index.html | 230 + .../reference/functions/pfeilfunktionen/index.html | 360 + .../reference/functions/rest_parameter/index.html | 167 + .../javascript/reference/functions/set/index.html | 149 + .../global_objects/array/@@iterator/index.html | 89 + .../global_objects/array/@@species/index.html | 76 + .../global_objects/array/@@unscopables/index.html | 76 + .../global_objects/array/concat/index.html | 156 + .../global_objects/array/copywithin/index.html | 187 + .../global_objects/array/entries/index.html | 84 + .../global_objects/array/every/index.html | 195 + .../reference/global_objects/array/fill/index.html | 155 + .../global_objects/array/filter/index.html | 235 + .../reference/global_objects/array/find/index.html | 243 + .../global_objects/array/findindex/index.html | 189 + .../reference/global_objects/array/flat/index.html | 116 + .../global_objects/array/flatmap/index.html | 117 + .../global_objects/array/foreach/index.html | 303 + .../reference/global_objects/array/from/index.html | 227 + .../global_objects/array/includes/index.html | 181 + .../reference/global_objects/array/index.html | 460 + .../global_objects/array/indexof/index.html | 226 + .../global_objects/array/isarray/index.html | 121 + .../reference/global_objects/array/join/index.html | 114 + .../reference/global_objects/array/keys/index.html | 76 + .../global_objects/array/lastindexof/index.html | 168 + .../global_objects/array/length/index.html | 149 + .../reference/global_objects/array/map/index.html | 337 + .../global_objects/array/observe/index.html | 91 + .../reference/global_objects/array/of/index.html | 102 + .../reference/global_objects/array/pop/index.html | 98 + .../global_objects/array/prototypen/index.html | 183 + .../reference/global_objects/array/push/index.html | 141 + .../global_objects/array/reduce/index.html | 564 + .../global_objects/array/reduceright/index.html | 334 + .../global_objects/array/reverse/index.html | 92 + .../global_objects/array/shift/index.html | 111 + .../global_objects/array/slice/index.html | 244 + .../reference/global_objects/array/some/index.html | 209 + .../reference/global_objects/array/sort/index.html | 264 + .../global_objects/array/splice/index.html | 162 + .../global_objects/array/tolocalestring/index.html | 183 + .../global_objects/array/tosource/index.html | 69 + .../global_objects/array/tostring/index.html | 80 + .../global_objects/array/unobserve/index.html | 88 + .../global_objects/array/unshift/index.html | 99 + .../global_objects/array/values/index.html | 86 + .../arraybuffer/@@species/index.html | 72 + .../arraybuffer/bytelength/index.html | 70 + .../global_objects/arraybuffer/index.html | 144 + .../global_objects/arraybuffer/isview/index.html | 89 + .../arraybuffer/prototype/index.html | 68 + .../global_objects/arraybuffer/slice/index.html | 88 + .../global_objects/arraybuffer/transfer/index.html | 84 + .../global_objects/asyncfunction/index.html | 124 + .../asyncfunction/prototype/index.html | 61 + .../global_objects/atomics/add/index.html | 83 + .../global_objects/atomics/and/index.html | 129 + .../atomics/compareexchange/index.html | 86 + .../global_objects/atomics/exchange/index.html | 85 + .../reference/global_objects/atomics/index.html | 116 + .../global_objects/atomics/islockfree/index.html | 73 + .../global_objects/atomics/load/index.html | 81 + .../reference/global_objects/atomics/or/index.html | 129 + .../global_objects/atomics/store/index.html | 82 + .../global_objects/atomics/sub/index.html | 86 + .../global_objects/atomics/wait/index.html | 95 + .../global_objects/atomics/wake/index.html | 93 + .../global_objects/atomics/xor/index.html | 130 + .../reference/global_objects/boolean/index.html | 159 + .../global_objects/boolean/prototype/index.html | 83 + .../global_objects/boolean/tosource/index.html | 60 + .../global_objects/boolean/tostring/index.html | 89 + .../global_objects/boolean/valueof/index.html | 85 + .../global_objects/dataview/buffer/index.html | 71 + .../global_objects/dataview/bytelength/index.html | 77 + .../global_objects/dataview/byteoffset/index.html | 74 + .../global_objects/dataview/getfloat32/index.html | 95 + .../global_objects/dataview/getfloat64/index.html | 95 + .../global_objects/dataview/getint16/index.html | 95 + .../global_objects/dataview/getint32/index.html | 95 + .../global_objects/dataview/getint8/index.html | 93 + .../global_objects/dataview/getuint16/index.html | 98 + .../global_objects/dataview/getuint32/index.html | 98 + .../global_objects/dataview/getuint8/index.html | 95 + .../reference/global_objects/dataview/index.html | 127 + .../global_objects/dataview/prototype/index.html | 109 + .../global_objects/dataview/setfloat32/index.html | 97 + .../global_objects/dataview/setfloat64/index.html | 97 + .../global_objects/dataview/setint16/index.html | 100 + .../global_objects/dataview/setint32/index.html | 100 + .../global_objects/dataview/setint8/index.html | 95 + .../global_objects/dataview/setuint16/index.html | 100 + .../global_objects/dataview/setuint32/index.html | 100 + .../global_objects/dataview/setuint8/index.html | 95 + .../global_objects/date/@@toprimitive/index.html | 69 + .../global_objects/date/getday/index.html | 69 + .../global_objects/date/getfullyear/index.html | 88 + .../global_objects/date/gethours/index.html | 83 + .../global_objects/date/getmilliseconds/index.html | 81 + .../global_objects/date/getminutes/index.html | 81 + .../global_objects/date/getmonth/index.html | 83 + .../global_objects/date/getseconds/index.html | 83 + .../global_objects/date/gettime/index.html | 126 + .../date/gettimezoneoffset/index.html | 102 + .../global_objects/date/getutcdate/index.html | 80 + .../global_objects/date/getutcday/index.html | 82 + .../global_objects/date/getutcfullyear/index.html | 85 + .../global_objects/date/getutchours/index.html | 81 + .../date/getutcmilliseconds/index.html | 79 + .../global_objects/date/getutcminutes/index.html | 79 + .../global_objects/date/getutcmonth/index.html | 81 + .../global_objects/date/getutcseconds/index.html | 79 + .../global_objects/date/getyear/index.html | 127 + .../reference/global_objects/date/index.html | 230 + .../reference/global_objects/date/now/index.html | 105 + .../reference/global_objects/date/parse/index.html | 173 + .../global_objects/date/prototype/index.html | 182 + .../global_objects/date/setdate/index.html | 91 + .../global_objects/date/setfullyear/index.html | 97 + .../global_objects/date/sethours/index.html | 102 + .../global_objects/date/setmilliseconds/index.html | 90 + .../global_objects/date/setminutes/index.html | 100 + .../global_objects/date/setmonth/index.html | 103 + .../global_objects/date/setseconds/index.html | 98 + .../global_objects/date/settime/index.html | 91 + .../global_objects/date/setutcdate/index.html | 90 + .../global_objects/date/setutcfullyear/index.html | 96 + .../global_objects/date/setutchours/index.html | 98 + .../date/setutcmilliseconds/index.html | 90 + .../global_objects/date/setutcminutes/index.html | 96 + .../global_objects/date/setutcmonth/index.html | 94 + .../global_objects/date/setutcseconds/index.html | 94 + .../global_objects/date/setyear/index.html | 96 + .../global_objects/date/todatestring/index.html | 92 + .../global_objects/date/togmtstring/index.html | 87 + .../global_objects/date/toisostring/index.html | 109 + .../global_objects/date/tojson/index.html | 81 + .../date/tolocaledatestring/index.html | 188 + .../global_objects/date/tolocaleformat/index.html | 81 + .../global_objects/date/tolocalestring/index.html | 188 + .../date/tolocaletimestring/index.html | 177 + .../global_objects/date/tosource/index.html | 61 + .../global_objects/date/tostring/index.html | 94 + .../global_objects/date/totimestring/index.html | 88 + .../global_objects/date/toutcstring/index.html | 84 + .../reference/global_objects/date/utc/index.html | 133 + .../global_objects/date/valueof/index.html | 85 + .../global_objects/decodeuricomponent/index.html | 127 + .../reference/global_objects/encodeuri/index.html | 163 + .../global_objects/encodeuricomponent/index.html | 163 + .../global_objects/error/columnnumber/index.html | 43 + .../global_objects/error/filename/index.html | 47 + .../reference/global_objects/error/index.html | 241 + .../global_objects/error/linenumber/index.html | 55 + .../global_objects/error/message/index.html | 75 + .../reference/global_objects/error/name/index.html | 58 + .../global_objects/error/prototype/index.html | 113 + .../global_objects/error/stack/index.html | 124 + .../global_objects/error/tosource/index.html | 57 + .../global_objects/error/tostring/index.html | 116 + .../reference/global_objects/escape/index.html | 132 + .../reference/global_objects/evalerror/index.html | 118 + .../global_objects/evalerror/prototype/index.html | 89 + .../global_objects/float32array/index.html | 204 + .../global_objects/float64array/index.html | 204 + .../global_objects/function/apply/index.html | 226 + .../global_objects/function/arguments/index.html | 92 + .../global_objects/function/arity/index.html | 32 + .../global_objects/function/bind/index.html | 286 + .../global_objects/function/call/index.html | 163 + .../global_objects/function/caller/index.html | 84 + .../global_objects/function/displayname/index.html | 81 + .../reference/global_objects/function/index.html | 188 + .../global_objects/function/isgenerator/index.html | 56 + .../global_objects/function/length/index.html | 92 + .../global_objects/function/name/index.html | 229 + .../global_objects/function/prototype/index.html | 99 + .../global_objects/function/tosource/index.html | 72 + .../global_objects/function/tostring/index.html | 236 + .../reference/global_objects/generator/index.html | 137 + .../global_objects/generator/next/index.html | 116 + .../global_objects/generator/return/index.html | 102 + .../global_objects/generator/throw/index.html | 101 + .../global_objects/generatorfunction/index.html | 115 + .../generatorfunction/prototype/index.html | 66 + .../reference/global_objects/globalthis/index.html | 96 + .../javascript/reference/global_objects/index.html | 191 + .../reference/global_objects/infinity/index.html | 83 + .../reference/global_objects/int16array/index.html | 204 + .../reference/global_objects/int32array/index.html | 204 + .../reference/global_objects/int8array/index.html | 209 + .../global_objects/internalerror/index.html | 82 + .../internalerror/prototype/index.html | 61 + .../intl/collator/compare/index.html | 101 + .../global_objects/intl/collator/index.html | 179 + .../intl/collator/prototype/index.html | 79 + .../intl/collator/resolvedoptions/index.html | 100 + .../intl/collator/supportedlocalesof/index.html | 98 + .../intl/datetimeformat/format/index.html | 101 + .../intl/datetimeformat/formattoparts/index.html | 169 + .../global_objects/intl/datetimeformat/index.html | 248 + .../intl/datetimeformat/prototype/index.html | 83 + .../intl/datetimeformat/resolvedoptions/index.html | 107 + .../datetimeformat/supportedlocalesof/index.html | 99 + .../intl/getcanonicallocales/index.html | 74 + .../reference/global_objects/intl/index.html | 129 + .../intl/numberformat/format/index.html | 98 + .../global_objects/intl/numberformat/index.html | 195 + .../intl/numberformat/prototype/index.html | 81 + .../numberformat/supportedlocalesof/index.html | 98 + .../global_objects/intl/pluralrules/index.html | 161 + .../intl/pluralrules/supportedlocalesof/index.html | 85 + .../reference/global_objects/isfinite/index.html | 99 + .../reference/global_objects/isnan/index.html | 192 + .../reference/global_objects/json/index.html | 155 + .../reference/global_objects/json/parse/index.html | 128 + .../global_objects/json/stringify/index.html | 310 + .../global_objects/map/@@iterator/index.html | 102 + .../global_objects/map/@@species/index.html | 72 + .../global_objects/map/@@tostringtag/index.html | 58 + .../reference/global_objects/map/clear/index.html | 77 + .../reference/global_objects/map/delete/index.html | 73 + .../global_objects/map/entries/index.html | 78 + .../global_objects/map/foreach/index.html | 104 + .../reference/global_objects/map/get/index.html | 80 + .../reference/global_objects/map/has/index.html | 83 + .../reference/global_objects/map/index.html | 207 + .../reference/global_objects/map/keys/index.html | 69 + .../global_objects/map/prototype/index.html | 86 + .../reference/global_objects/map/set/index.html | 96 + .../reference/global_objects/map/size/index.html | 67 + .../reference/global_objects/map/values/index.html | 77 + .../reference/global_objects/math/acos/index.html | 103 + .../reference/global_objects/math/acosh/index.html | 98 + .../reference/global_objects/math/asin/index.html | 103 + .../reference/global_objects/math/asinh/index.html | 99 + .../reference/global_objects/math/atan/index.html | 105 + .../reference/global_objects/math/atan2/index.html | 113 + .../reference/global_objects/math/cbrt/index.html | 98 + .../reference/global_objects/math/ceil/index.html | 170 + .../reference/global_objects/math/clz32/index.html | 112 + .../reference/global_objects/math/cos/index.html | 98 + .../reference/global_objects/math/cosh/index.html | 102 + .../reference/global_objects/math/e/index.html | 83 + .../reference/global_objects/math/exp/index.html | 95 + .../reference/global_objects/math/expm1/index.html | 94 + .../reference/global_objects/math/floor/index.html | 137 + .../global_objects/math/fround/index.html | 112 + .../reference/global_objects/math/hypot/index.html | 128 + .../reference/global_objects/math/imul/index.html | 92 + .../reference/global_objects/math/index.html | 201 + .../reference/global_objects/math/ln10/index.html | 83 + .../reference/global_objects/math/ln2/index.html | 83 + .../reference/global_objects/math/log/index.html | 113 + .../reference/global_objects/math/log10/index.html | 101 + .../global_objects/math/log10e/index.html | 85 + .../reference/global_objects/math/log1p/index.html | 102 + .../reference/global_objects/math/log2/index.html | 101 + .../reference/global_objects/math/log2e/index.html | 83 + .../global_objects/math/math.random/index.html | 112 + .../reference/global_objects/math/max/index.html | 118 + .../reference/global_objects/math/min/index.html | 112 + .../reference/global_objects/math/pi/index.html | 81 + .../reference/global_objects/math/pow/index.html | 113 + .../reference/global_objects/math/round/index.html | 99 + .../reference/global_objects/math/sign/index.html | 115 + .../reference/global_objects/math/sin/index.html | 97 + .../reference/global_objects/math/sinh/index.html | 102 + .../reference/global_objects/math/sqrt/index.html | 99 + .../global_objects/math/sqrt1_2/index.html | 84 + .../reference/global_objects/math/sqrt2/index.html | 82 + .../reference/global_objects/math/tan/index.html | 102 + .../reference/global_objects/math/tanh/index.html | 93 + .../reference/global_objects/math/trunc/index.html | 125 + .../reference/global_objects/nan/index.html | 97 + .../reference/global_objects/null/index.html | 93 + .../global_objects/number/epsilon/index.html | 75 + .../reference/global_objects/number/index.html | 180 + .../global_objects/number/isfinite/index.html | 93 + .../global_objects/number/isinteger/index.html | 98 + .../global_objects/number/isnan/index.html | 104 + .../global_objects/number/issafeinteger/index.html | 99 + .../number/max_safe_integer/index.html | 68 + .../global_objects/number/max_value/index.html | 82 + .../number/min_safe_integer/index.html | 66 + .../global_objects/number/min_value/index.html | 83 + .../reference/global_objects/number/nan/index.html | 65 + .../number/negative_infinity/index.html | 100 + .../global_objects/number/parsefloat/index.html | 72 + .../global_objects/number/parseint/index.html | 77 + .../number/positive_infinity/index.html | 100 + .../global_objects/number/prototype/index.html | 89 + .../global_objects/number/toexponential/index.html | 108 + .../global_objects/number/tofixed/index.html | 113 + .../global_objects/number/tointeger/index.html | 52 + .../number/tolocalestring/index.html | 192 + .../global_objects/number/toprecision/index.html | 107 + .../global_objects/number/tosource/index.html | 53 + .../global_objects/number/tostring/index.html | 116 + .../global_objects/number/valueof/index.html | 85 + .../object/__definegetter__/index.html | 150 + .../global_objects/object/assign/index.html | 277 + .../global_objects/object/constructor/index.html | 192 + .../global_objects/object/create/index.html | 268 + .../object/defineproperty/index.html | 413 + .../global_objects/object/entries/index.html | 168 + .../global_objects/object/freeze/index.html | 253 + .../object/getownpropertynames/index.html | 201 + .../object/getprototypeof/index.html | 133 + .../object/hasownproperty/index.html | 203 + .../reference/global_objects/object/index.html | 186 + .../reference/global_objects/object/is/index.html | 120 + .../global_objects/object/isextensible/index.html | 153 + .../global_objects/object/isfrozen/index.html | 173 + .../global_objects/object/keys/index.html | 206 + .../global_objects/object/observe/index.html | 199 + .../global_objects/object/proto/index.html | 196 + .../global_objects/object/prototype/index.html | 219 + .../global_objects/object/tosource/index.html | 169 + .../global_objects/object/valueof/index.html | 115 + .../global_objects/object/values/index.html | 148 + .../reference/global_objects/parsefloat/index.html | 147 + .../reference/global_objects/parseint/index.html | 195 + .../global_objects/promise/all/index.html | 137 + .../global_objects/promise/finally/index.html | 93 + .../reference/global_objects/promise/index.html | 244 + .../global_objects/promise/race/index.html | 184 + .../global_objects/promise/reject/index.html | 74 + .../global_objects/promise/then/index.html | 149 + .../reference/global_objects/rangeerror/index.html | 174 + .../global_objects/rangeerror/prototype/index.html | 128 + .../global_objects/reflect/apply/index.html | 98 + .../global_objects/reflect/construct/index.html | 157 + .../reference/global_objects/reflect/index.html | 88 + .../global_objects/regexp/flags/index.html | 83 + .../reference/global_objects/regexp/index.html | 560 + .../global_objects/regexp/input/index.html | 105 + .../global_objects/regexp/test/index.html | 127 + .../reference/global_objects/set/add/index.html | 69 + .../reference/global_objects/set/delete/index.html | 84 + .../reference/global_objects/set/has/index.html | 131 + .../reference/global_objects/set/index.html | 264 + .../global_objects/string/charat/index.html | 305 + .../global_objects/string/concat/index.html | 140 + .../global_objects/string/endswith/index.html | 148 + .../global_objects/string/fromcharcode/index.html | 134 + .../global_objects/string/includes/index.html | 131 + .../reference/global_objects/string/index.html | 310 + .../global_objects/string/indexof/index.html | 200 + .../global_objects/string/lastindexof/index.html | 148 + .../global_objects/string/length/index.html | 87 + .../global_objects/string/match/index.html | 140 + .../global_objects/string/prototype/index.html | 189 + .../reference/global_objects/string/raw/index.html | 160 + .../global_objects/string/repeat/index.html | 286 + .../global_objects/string/replace/index.html | 344 + .../global_objects/string/slice/index.html | 152 + .../global_objects/string/split/index.html | 212 + .../global_objects/string/startswith/index.html | 150 + .../global_objects/string/substr/index.html | 171 + .../global_objects/string/substring/index.html | 199 + .../global_objects/string/suchen/index.html | 105 + .../global_objects/string/tolowercase/index.html | 79 + .../global_objects/string/touppercase/index.html | 127 + .../global_objects/string/trim/index.html | 93 + .../global_objects/string/trimleft/index.html | 58 + .../global_objects/string/trimright/index.html | 58 + .../global_objects/syntaxerror/index.html | 133 + .../syntaxerror/prototype/index.html | 88 + .../reference/global_objects/typeerror/index.html | 133 + .../global_objects/typeerror/prototype/index.html | 88 + .../reference/global_objects/undefined/index.html | 135 + .../reference/global_objects/unescape/index.html | 126 + .../reference/global_objects/uneval/index.html | 109 + .../global_objects/webassembly/compile/index.html | 91 + .../webassembly/compilestreaming/index.html | 87 + .../global_objects/webassembly/index.html | 111 + files/de/web/javascript/reference/index.html | 49 + .../reference/iteration_protocols/index.html | 349 + .../reference/klassen/constructor/index.html | 165 + .../reference/klassen/extends/index.html | 172 + .../de/web/javascript/reference/klassen/index.html | 376 + .../javascript/reference/klassen/static/index.html | 136 + .../reference/lexical_grammar/index.html | 549 + .../reference/operators/addition/index.html | 82 + .../operators/array_comprehensions/index.html | 200 + .../reference/operators/async_function/index.html | 107 + .../reference/operators/await/index.html | 112 + .../operators/bitwise_operatoren/index.html | 574 + .../reference/operators/class/index.html | 157 + .../reference/operators/comma_operator/index.html | 107 + .../operators/conditional_operator/index.html | 190 + .../reference/operators/dekrement/index.html | 82 + .../reference/operators/delete/index.html | 295 + .../destrukturierende_zuweisung/index.html | 404 + .../operators/expression_closures/index.html | 76 + .../reference/operators/function/index.html | 151 + .../reference/operators/function_star_/index.html | 91 + .../operators/generator_comprehensions/index.html | 172 + .../reference/operators/grouping/index.html | 91 + .../javascript/reference/operators/in/index.html | 145 + .../web/javascript/reference/operators/index.html | 303 + .../reference/operators/inkrement/index.html | 80 + .../reference/operators/instanceof/index.html | 172 + .../operators/logische_operatoren/index.html | 246 + .../reference/operators/modulo/index.html | 78 + .../reference/operators/new.target/index.html | 102 + .../javascript/reference/operators/new/index.html | 190 + .../operators/objekt_initialisierer/index.html | 315 + .../operators/operator_precedence/index.html | 318 + .../operators/optionale_verkettung/index.html | 194 + .../operators/pipeline_operator/index.html | 67 + .../operators/property_accessors/index.html | 150 + .../reference/operators/spread_operator/index.html | 219 + .../reference/operators/spread_syntax/index.html | 236 + .../reference/operators/super/index.html | 184 + .../javascript/reference/operators/this/index.html | 394 + .../reference/operators/typeof/index.html | 259 + .../operators/vergleichsoperatoren/index.html | 243 + .../javascript/reference/operators/void/index.html | 108 + .../reference/operators/yield/index.html | 119 + .../reference/operators/yield_star_/index.html | 164 + .../operators/zuweisungsoperator/index.html | 412 + .../reference/statements/async_function/index.html | 223 + .../reference/statements/block/index.html | 115 + .../reference/statements/break/index.html | 164 + .../reference/statements/class/index.html | 192 + .../reference/statements/const/index.html | 170 + .../reference/statements/continue/index.html | 165 + .../reference/statements/debugger/index.html | 52 + .../reference/statements/default/index.html | 120 + .../reference/statements/do...while/index.html | 132 + .../reference/statements/empty/index.html | 147 + .../reference/statements/export/index.html | 126 + .../reference/statements/for...in/index.html | 227 + .../reference/statements/for...of/index.html | 183 + .../javascript/reference/statements/for/index.html | 201 + .../reference/statements/for_each...in/index.html | 122 + .../reference/statements/function_star_/index.html | 200 + .../reference/statements/funktion/index.html | 190 + .../reference/statements/if...else/index.html | 168 + .../reference/statements/import/index.html | 151 + .../web/javascript/reference/statements/index.html | 148 + .../reference/statements/label/index.html | 205 + .../javascript/reference/statements/let/index.html | 454 + .../reference/statements/return/index.html | 192 + .../reference/statements/switch/index.html | 289 + .../reference/statements/throw/index.html | 256 + .../reference/statements/try...catch/index.html | 382 + .../javascript/reference/statements/var/index.html | 243 + .../reference/statements/while/index.html | 102 + .../javascript/reference/strict_mode/index.html | 401 + .../reference/template_strings/index.html | 219 + .../veraltete_und_abgeschaffte_features/index.html | 291 + .../the_legacy_iterator_protocol/index.html | 78 + .../web/javascript/speicherverwaltung/index.html | 184 + files/de/web/javascript/typed_arrays/index.html | 230 + .../index.html | 424 + files/de/web/manifest/index.html | 423 + files/de/web/manifest/short_name/index.html | 71 + files/de/web/mathml/attribute/index.html | 487 + files/de/web/mathml/attribute/werte/index.html | 146 + files/de/web/mathml/beispiele/index.html | 19 + .../mathml_satz_des_pythagoras/index.html | 85 + .../beispiele/quadratische_gleichung/index.html | 106 + files/de/web/mathml/element/index.html | 144 + files/de/web/mathml/element/maction/index.html | 239 + files/de/web/mathml/element/math/index.html | 308 + files/de/web/mathml/element/menclose/index.html | 313 + files/de/web/mathml/element/merror/index.html | 173 + files/de/web/mathml/element/mfenced/index.html | 194 + files/de/web/mathml/element/mfrac/index.html | 207 + files/de/web/mathml/element/mi/index.html | 233 + files/de/web/mathml/element/mn/index.html | 232 + files/de/web/mathml/element/mo/index.html | 417 + files/de/web/mathml/element/mover/index.html | 225 + files/de/web/mathml/element/mpadded/index.html | 211 + files/de/web/mathml/element/mphantom/index.html | 142 + files/de/web/mathml/element/mroot/index.html | 175 + files/de/web/mathml/element/mrow/index.html | 209 + files/de/web/mathml/element/ms/index.html | 243 + files/de/web/mathml/element/mspace/index.html | 167 + files/de/web/mathml/element/msqrt/index.html | 173 + files/de/web/mathml/element/mstyle/index.html | 124 + files/de/web/mathml/element/msub/index.html | 205 + files/de/web/mathml/element/msubsup/index.html | 225 + files/de/web/mathml/element/msup/index.html | 205 + files/de/web/mathml/element/mtable/index.html | 542 + files/de/web/mathml/element/mtd/index.html | 188 + files/de/web/mathml/element/mtext/index.html | 233 + files/de/web/mathml/element/mtr/index.html | 167 + files/de/web/mathml/element/munder/index.html | 224 + files/de/web/mathml/element/munderover/index.html | 239 + files/de/web/mathml/index.html | 112 + files/de/web/performance/dns-prefetch/index.html | 66 + files/de/web/performance/index.html | 291 + files/de/web/progressive_web_apps/index.html | 79 + files/de/web/reference/api/index.html | 63 + files/de/web/reference/index.html | 30 + .../security/certificate_transparency/index.html | 64 + files/de/web/security/index.html | 17 + .../de/web/security/public_key_pinning/index.html | 147 + files/de/web/svg/attribute/class/index.html | 189 + files/de/web/svg/attribute/index.html | 467 + .../svg/attribute/preserveaspectratio/index.html | 110 + files/de/web/svg/element/animate/index.html | 115 + files/de/web/svg/element/circle/index.html | 114 + files/de/web/svg/element/foreignobject/index.html | 133 + files/de/web/svg/element/index.html | 209 + files/de/web/svg/element/path/index.html | 98 + files/de/web/svg/element/polygon/index.html | 142 + files/de/web/svg/element/rect/index.html | 164 + files/de/web/svg/element/svg/index.html | 135 + files/de/web/svg/element/textpath/index.html | 71 + files/de/web/svg/element/view/index.html | 149 + files/de/web/svg/index.html | 112 + .../de/web/svg/namespaces_crash_course/index.html | 197 + .../web/svg/tutorial/einf\303\274hrung/index.html" | 21 + .../web/svg/tutorial/fills_and_strokes/index.html | 147 + files/de/web/svg/tutorial/index.html | 14 + files/de/web/svg/tutorial/pfade/index.html | 239 + files/de/web/svg/tutorial/svg_image_tag/index.html | 36 + .../web/svg/tutorial/svg_schriftarten/index.html | 99 + files/de/web/svg/tutorial/tools_for_svg/index.html | 70 + .../web/web_components/custom_elements/index.html | 258 + files/de/web/web_components/index.html | 222 + .../using_custom_elements/index.html | 249 + files/de/web/webapi/index.html | 133 + .../webapi/verwenden_von_geolocation/index.html | 291 + files/de/web/xml/index.html | 17 + .../de/web/xml/xml_einf\303\274hrung/index.html" | 63 + files/de/web/xslt/index.html | 51 + files/de/web_development/mobile/index.html | 17 + .../mobile/responsive_design/index.html | 47 + files/de/webentwicklung/index.html | 14 + files/de/websockets/index.html | 193 + .../writing_websocket_servers/index.html | 250 + files/de/xml_web_services/index.html | 11 + .../de/xpcom/http_request_header_setzen/index.html | 216 + files/de/xpcom/index.html | 66 + files/de/xpi/index.html | 18 + files/de/xpinstall/index.html | 54 + .../index.html" | 32 + files/de/xul_explorer/index.html | 52 + files/de/zones/index.html | 53 + 2258 files changed, 324503 insertions(+) create mode 100644 files/de/_redirects.txt create mode 100644 files/de/_wikihistory.json create mode 100644 files/de/archive/add-ons/index.html create mode 100644 files/de/archive/add-ons/seamonkey_2/index.html create mode 100644 files/de/archive/apps/index.html create mode 100644 files/de/archive/b2g_os/anwendungsentwicklung/index.html create mode 100644 files/de/archive/b2g_os/api/index.html create mode 100644 files/de/archive/b2g_os/api/navigator/index.html create mode 100644 files/de/archive/b2g_os/api/navigator/requestwakelock/index.html create mode 100644 "files/de/archive/b2g_os/apps/eine_app_f\303\274r_firefox_os_schreiben/index.html" create mode 100644 files/de/archive/b2g_os/apps/index.html create mode 100644 files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html create mode 100644 files/de/archive/b2g_os/benutzung_des_app_managers/index.html create mode 100644 files/de/archive/b2g_os/building/index.html create mode 100644 files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html create mode 100644 files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html create mode 100644 files/de/archive/b2g_os/building_and_installing_firefox_os/index.html create mode 100644 files/de/archive/b2g_os/debugging/developer_settings/index.html create mode 100644 files/de/archive/b2g_os/debugging/index.html create mode 100644 files/de/archive/b2g_os/debugging/installing_adb/index.html create mode 100644 "files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_ger\303\244ts_mit_dem_rechner/index.html" create mode 100644 files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html create mode 100644 files/de/archive/b2g_os/developing_firefox_os/index.html create mode 100644 files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html create mode 100644 files/de/archive/b2g_os/firefox_os_faq/index.html create mode 100644 files/de/archive/b2g_os/gaia/gaia_apps/index.html create mode 100644 files/de/archive/b2g_os/gaia/hacking/index.html create mode 100644 files/de/archive/b2g_os/gaia/index.html create mode 100644 files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html create mode 100644 files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html create mode 100644 files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html create mode 100644 files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html create mode 100644 files/de/archive/b2g_os/gaia_entwickeln/index.html create mode 100644 files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html create mode 100644 files/de/archive/b2g_os/index.html create mode 100644 files/de/archive/b2g_os/installing_on_a_mobile_device/index.html create mode 100644 files/de/archive/b2g_os/introduction/index.html create mode 100644 files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html create mode 100644 files/de/archive/b2g_os/phone_guide/flame/index.html create mode 100644 files/de/archive/b2g_os/phone_guide/geeksphone/index.html create mode 100644 files/de/archive/b2g_os/phone_guide/index.html create mode 100644 files/de/archive/b2g_os/phone_guide/phone_specs/index.html create mode 100644 files/de/archive/b2g_os/phone_guide/zte_open_c/index.html create mode 100644 files/de/archive/b2g_os/platform/app_architektur/index.html create mode 100644 files/de/archive/b2g_os/platform/architektur/index.html create mode 100644 files/de/archive/b2g_os/platform/index.html create mode 100644 files/de/archive/b2g_os/quickstart/deine_erste_app/index.html create mode 100644 files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html create mode 100644 files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html create mode 100644 files/de/archive/b2g_os/quickstart/index.html create mode 100644 files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html create mode 100644 files/de/archive/b2g_os/releases/1.4/index.html create mode 100644 files/de/archive/b2g_os/releases/2.0/index.html create mode 100644 files/de/archive/b2g_os/releases/index.html create mode 100644 files/de/archive/b2g_os/simulator/index.html create mode 100644 files/de/archive/b2g_os/troubleshooting/index.html create mode 100644 files/de/archive/css3/index.html create mode 100644 files/de/archive/index.html create mode 100644 files/de/archive/mdn/index.html create mode 100644 files/de/archive/mozilla/index.html create mode 100644 files/de/archive/mozilla/marketplace/apis/index.html create mode 100644 files/de/archive/mozilla/marketplace/faq/index.html create mode 100644 files/de/archive/mozilla/marketplace/index.html create mode 100644 files/de/archive/mozilla/marketplace/index/index.html create mode 100644 files/de/archive/mozilla/marketplace/marktplatz_apis/index.html create mode 100644 files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html create mode 100644 files/de/archive/mozilla/marketplace/publishing/index.html create mode 100644 files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html create mode 100644 files/de/archive/mozilla/marketplace/publishing/publish_options/index.html create mode 100644 files/de/archive/mozilla/marketplace/publishing/submit/index.html create mode 100644 files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html create mode 100644 files/de/archive/mozilla/marketplace/submission/index.html create mode 100644 files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html create mode 100644 "files/de/archive/mozilla/marketplace/ver\303\266ffentlichen/index.html" create mode 100644 files/de/archive/mozilla/xul/action/index.html create mode 100644 files/de/archive/mozilla/xul/arrowscrollbox/index.html create mode 100644 files/de/archive/mozilla/xul/assign/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/accesskey/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/align/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/allowevents/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/color/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/cols/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/decimalplaces/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/disabled/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/empty/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/emptytext/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/expr/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/label/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/onchange/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/prefpane.src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/treecell.src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/treecol.src/index.html create mode 100644 files/de/archive/mozilla/xul/attribute/var/index.html create mode 100644 files/de/archive/mozilla/xul/bbox/index.html create mode 100644 files/de/archive/mozilla/xul/binding/index.html create mode 100644 files/de/archive/mozilla/xul/box/index.html create mode 100644 files/de/archive/mozilla/xul/colorpicker/index.html create mode 100644 files/de/archive/mozilla/xul/eigenschaften/index.html create mode 100644 files/de/archive/mozilla/xul/events/index.html create mode 100644 files/de/archive/mozilla/xul/grippy/index.html create mode 100644 files/de/archive/mozilla/xul/iframe/index.html create mode 100644 files/de/archive/mozilla/xul/index.html create mode 100644 files/de/archive/mozilla/xul/method/geticon/index.html create mode 100644 files/de/archive/mozilla/xul/method/gettabforbrowser/index.html create mode 100644 files/de/archive/mozilla/xul/method/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html create mode 100644 files/de/archive/mozilla/xul/school_tutorial/index.html create mode 100644 files/de/archive/mozilla/xul/separator/index.html create mode 100644 files/de/archive/mozilla/xul/spacer/index.html create mode 100644 files/de/archive/mozilla/xul/splitter/index.html create mode 100644 files/de/archive/mozilla/xul/style/index.html create mode 100644 files/de/archive/mozilla/xul/style/treecol-image/index.html create mode 100644 files/de/archive/mozilla/xul/tab/index.html create mode 100644 files/de/archive/mozilla/xul/tabbox/index.html create mode 100644 files/de/archive/mozilla/xul/tabpanels/index.html create mode 100644 files/de/archive/mozilla/xul/tabs/index.html create mode 100644 files/de/archive/mozilla/xul/textbox/index.html create mode 100644 files/de/archive/mozilla/xul/treecol/index.html create mode 100644 files/de/archive/mozilla/xul/vbox/index.html create mode 100644 files/de/archive/mozilla/xul/window/index.html create mode 100644 files/de/archive/mozilla/xul/xul_referenz/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html create mode 100644 files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html create mode 100644 "files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" create mode 100644 files/de/archive/mozilla/xulrunner/index.html create mode 100644 files/de/archive/rss/index.html create mode 100644 files/de/archive/themes/index.html create mode 100644 files/de/archive/web-standards/index.html create mode 100644 files/de/archive/web-standards/rdf_in_mozilla_faq/index.html create mode 100644 files/de/archive/web/index.html create mode 100644 files/de/archive/web/javascript/arguments.caller/index.html create mode 100644 files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html create mode 100644 files/de/archive/web/javascript/index.html create mode 100644 files/de/archive/web/javascript/legacy_generator_function/index.html create mode 100644 files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html create mode 100644 files/de/bugzilla/index.html create mode 100644 files/de/bundles/index.html create mode 100644 files/de/codeschnipsel/cookies/index.html create mode 100644 files/de/codeschnipsel/index.html create mode 100644 files/de/codeschnipsel/on_page_load/index.html create mode 100644 files/de/codeschnipsel/scrollbar/index.html create mode 100644 files/de/codeschnipsel/tabbed_browser/index.html create mode 100644 files/de/codeschnipsel/tree/index.html create mode 100644 files/de/codeschnipsel/windows/index.html create mode 100644 files/de/css3_columns/index.html create mode 100644 files/de/dom/index.html create mode 100644 files/de/dom/ueber_das_document_object_model/index.html create mode 100644 files/de/dom_inspector/index.html create mode 100644 files/de/dragdrop/index.html create mode 100644 files/de/e4x/index.html create mode 100644 files/de/e4x/processing_xml_with_e4x/index.html create mode 100644 "files/de/einrichten_einer_entwicklungsumgebung_f\303\274r_erweiterungen/index.html" create mode 100644 files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html create mode 100644 files/de/erweiterung_erstellen/index.html create mode 100644 files/de/erweiterungen/index.html create mode 100644 files/de/erweiterungen_faq/index.html create mode 100644 "files/de/erweiterungen_f\303\274r_firefox_3_aktualisieren/index.html" create mode 100644 "files/de/farbverl\303\244ufe_in_css/index.html" create mode 100644 "files/de/firefox_1.5_f\303\274r_entwickler/changing_the_priority_of_http_requests/index.html" create mode 100644 "files/de/firefox_1.5_f\303\274r_entwickler/index.html" create mode 100644 "files/de/firefox_3.5_f\303\274r_entwickler/index.html" create mode 100644 "files/de/firefox_3_f\303\274r_entwickler/index.html" create mode 100644 files/de/firefox_addons_developer_guide/index.html create mode 100644 files/de/games/index.html create mode 100644 files/de/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html create mode 100644 "files/de/gecko-dom-referenz/einf\303\274hrung/index.html" create mode 100644 files/de/gecko-dom-referenz/index.html create mode 100644 files/de/gecko_user_agent_string_referenz/index.html create mode 100644 files/de/glossary/404/index.html create mode 100644 files/de/glossary/502/index.html create mode 100644 files/de/glossary/abstraktion/index.html create mode 100644 files/de/glossary/accessibility/index.html create mode 100644 files/de/glossary/adobe_flash/index.html create mode 100644 files/de/glossary/ajax/index.html create mode 100644 files/de/glossary/algorithmus/index.html create mode 100644 files/de/glossary/anweisung/index.html create mode 100644 files/de/glossary/api/index.html create mode 100644 files/de/glossary/apple_safari/index.html create mode 100644 files/de/glossary/argument/index.html create mode 100644 files/de/glossary/aria/index.html create mode 100644 files/de/glossary/arpa/index.html create mode 100644 files/de/glossary/array/index.html create mode 100644 files/de/glossary/ascii/index.html create mode 100644 files/de/glossary/asynchron/index.html create mode 100644 files/de/glossary/atag/index.html create mode 100644 files/de/glossary/attribute/index.html create mode 100644 files/de/glossary/bandbreite/index.html create mode 100644 files/de/glossary/block/css/index.html create mode 100644 files/de/glossary/block/index.html create mode 100644 files/de/glossary/block/scripting/index.html create mode 100644 files/de/glossary/boolean/index.html create mode 100644 files/de/glossary/bootstrap/index.html create mode 100644 files/de/glossary/browser/index.html create mode 100644 files/de/glossary/buffer/index.html create mode 100644 files/de/glossary/cache/index.html create mode 100644 files/de/glossary/caldav/index.html create mode 100644 files/de/glossary/canvas/index.html create mode 100644 files/de/glossary/card_sorting/index.html create mode 100644 files/de/glossary/cdn/index.html create mode 100644 files/de/glossary/character/index.html create mode 100644 files/de/glossary/chrome/index.html create mode 100644 files/de/glossary/cms/index.html create mode 100644 files/de/glossary/codec/index.html create mode 100644 files/de/glossary/compile_time/index.html create mode 100644 files/de/glossary/cookie/index.html create mode 100644 files/de/glossary/cors-zugelassener-anfrage-header/index.html create mode 100644 files/de/glossary/cors/index.html create mode 100644 files/de/glossary/crawler/index.html create mode 100644 files/de/glossary/crlf/index.html create mode 100644 files/de/glossary/css/index.html create mode 100644 files/de/glossary/css_praeprozessor/index.html create mode 100644 files/de/glossary/data_structure/index.html create mode 100644 files/de/glossary/datenkapselung/index.html create mode 100644 files/de/glossary/denial_of_service/index.html create mode 100644 files/de/glossary/dhtml/index.html create mode 100644 files/de/glossary/dns/index.html create mode 100644 files/de/glossary/doctype/index.html create mode 100644 files/de/glossary/dom/index.html create mode 100644 files/de/glossary/domain_name/index.html create mode 100644 files/de/glossary/dos_attack/index.html create mode 100644 files/de/glossary/dtd/index.html create mode 100644 files/de/glossary/ecma/index.html create mode 100644 files/de/glossary/ecmascript/index.html create mode 100644 files/de/glossary/einfache_datenelemente/index.html create mode 100644 files/de/glossary/element/index.html create mode 100644 files/de/glossary/falsy/index.html create mode 100644 files/de/glossary/firefox_os/index.html create mode 100644 files/de/glossary/firewall/index.html create mode 100644 files/de/glossary/flex/index.html create mode 100644 files/de/glossary/flexbox/index.html create mode 100644 files/de/glossary/ftp/index.html create mode 100644 files/de/glossary/funktion_erster-klasse/index.html create mode 100644 files/de/glossary/gif/index.html create mode 100644 files/de/glossary/git/index.html create mode 100644 files/de/glossary/gpu/index.html create mode 100644 files/de/glossary/graceful_degradation/index.html create mode 100644 files/de/glossary/grid/index.html create mode 100644 files/de/glossary/gutters/index.html create mode 100644 files/de/glossary/gzip_compression/index.html create mode 100644 "files/de/glossary/herstellerpr\303\244fix/index.html" create mode 100644 files/de/glossary/hoisting/index.html create mode 100644 files/de/glossary/html/index.html create mode 100644 files/de/glossary/html5/index.html create mode 100644 files/de/glossary/http/index.html create mode 100644 files/de/glossary/https/index.html create mode 100644 files/de/glossary/hyperlink/index.html create mode 100644 files/de/glossary/ide/index.html create mode 100644 files/de/glossary/identifier/index.html create mode 100644 files/de/glossary/ietf/index.html create mode 100644 files/de/glossary/iife/index.html create mode 100644 files/de/glossary/imap/index.html create mode 100644 files/de/glossary/index.html create mode 100644 files/de/glossary/indexeddb/index.html create mode 100644 files/de/glossary/informationsarchitektur/index.html create mode 100644 files/de/glossary/internet/index.html create mode 100644 files/de/glossary/iso/index.html create mode 100644 files/de/glossary/jank/index.html create mode 100644 files/de/glossary/javascript/index.html create mode 100644 files/de/glossary/jpeg/index.html create mode 100644 files/de/glossary/json/index.html create mode 100644 files/de/glossary/klasse/index.html create mode 100644 files/de/glossary/konstruktor/index.html create mode 100644 files/de/glossary/leeres_element/index.html create mode 100644 files/de/glossary/local_scope/index.html create mode 100644 files/de/glossary/local_variable/index.html create mode 100644 files/de/glossary/middleware/index.html create mode 100644 files/de/glossary/mime_type/index.html create mode 100644 files/de/glossary/mixin/index.html create mode 100644 files/de/glossary/mozilla_firefox/index.html create mode 100644 files/de/glossary/namespace/index.html create mode 100644 files/de/glossary/node.js/index.html create mode 100644 files/de/glossary/null/index.html create mode 100644 files/de/glossary/number/index.html create mode 100644 files/de/glossary/objekt/index.html create mode 100644 files/de/glossary/oop/index.html create mode 100644 files/de/glossary/operand/index.html create mode 100644 files/de/glossary/operator/index.html create mode 100644 files/de/glossary/php/index.html create mode 100644 files/de/glossary/png/index.html create mode 100644 files/de/glossary/polyfill/index.html create mode 100644 files/de/glossary/progressive_enhancement/index.html create mode 100644 files/de/glossary/protokoll/index.html create mode 100644 files/de/glossary/prototype-based_programming/index.html create mode 100644 files/de/glossary/prototype/index.html create mode 100644 files/de/glossary/regular_expression/index.html create mode 100644 files/de/glossary/repo/index.html create mode 100644 files/de/glossary/responsive_web_design/index.html create mode 100644 files/de/glossary/rest/index.html create mode 100644 files/de/glossary/rgb/index.html create mode 100644 files/de/glossary/robots.txt/index.html create mode 100644 files/de/glossary/rss/index.html create mode 100644 files/de/glossary/scope/index.html create mode 100644 files/de/glossary/server/index.html create mode 100644 files/de/glossary/sloppy_mode/index.html create mode 100644 files/de/glossary/slug/index.html create mode 100644 files/de/glossary/specification/index.html create mode 100644 files/de/glossary/sql/index.html create mode 100644 files/de/glossary/string/index.html create mode 100644 files/de/glossary/svg/index.html create mode 100644 files/de/glossary/symbol/index.html create mode 100644 files/de/glossary/tag/index.html create mode 100644 files/de/glossary/tcp/index.html create mode 100644 files/de/glossary/tls/index.html create mode 100644 files/de/glossary/truthy/index.html create mode 100644 files/de/glossary/typ/index.html create mode 100644 files/de/glossary/type_conversion/index.html create mode 100644 files/de/glossary/ui/index.html create mode 100644 files/de/glossary/undefined/index.html create mode 100644 files/de/glossary/uri/index.html create mode 100644 files/de/glossary/url/index.html create mode 100644 files/de/glossary/user_agent/index.html create mode 100644 files/de/glossary/ux/index.html create mode 100644 files/de/glossary/validator/index.html create mode 100644 files/de/glossary/value/index.html create mode 100644 files/de/glossary/variable/index.html create mode 100644 files/de/glossary/verbotener_header_name/index.html create mode 100644 files/de/glossary/viewport/index.html create mode 100644 files/de/glossary/visual_viewport/index.html create mode 100644 files/de/glossary/voip/index.html create mode 100644 files/de/glossary/w3c/index.html create mode 100644 files/de/glossary/wai/index.html create mode 100644 files/de/glossary/webdav/index.html create mode 100644 files/de/glossary/webm/index.html create mode 100644 files/de/glossary/webp/index.html create mode 100644 files/de/glossary/webrtc/index.html create mode 100644 files/de/glossary/websockets/index.html create mode 100644 files/de/glossary/wrapper/index.html create mode 100644 files/de/glossary/xml/index.html create mode 100644 files/de/installationsmanifest/index.html create mode 100644 files/de/installing_mercurial/index.html create mode 100644 files/de/learn/accessibility/accessibility_troubleshooting/index.html create mode 100644 files/de/learn/accessibility/index.html create mode 100644 files/de/learn/common_questions/index.html create mode 100644 files/de/learn/common_questions/upload_files_to_a_web_server/index.html create mode 100644 files/de/learn/common_questions/wie_das_internet_funktioniert/index.html create mode 100644 files/de/learn/css/building_blocks/index.html create mode 100644 files/de/learn/css/building_blocks/organizing/index.html create mode 100644 files/de/learn/css/building_blocks/werten_einheiten/index.html create mode 100644 files/de/learn/css/css_layout/flexbox/index.html create mode 100644 files/de/learn/css/css_layout/index.html create mode 100644 files/de/learn/css/first_steps/index.html create mode 100644 files/de/learn/css/index.html create mode 100644 files/de/learn/css/styling_text/index.html create mode 100644 files/de/learn/getting_started_with_the_web/css_basics/index.html create mode 100644 files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html create mode 100644 files/de/learn/getting_started_with_the_web/html_basics/index.html create mode 100644 files/de/learn/getting_started_with_the_web/index.html create mode 100644 files/de/learn/getting_started_with_the_web/installing_basic_software/index.html create mode 100644 files/de/learn/getting_started_with_the_web/javascript_basis/index.html create mode 100644 files/de/learn/getting_started_with_the_web/publishing_your_website/index.html create mode 100644 files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html create mode 100644 files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" create mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" create mode 100644 files/de/learn/html/forms/index.html create mode 100644 files/de/learn/html/index.html create mode 100644 files/de/learn/html/multimedia_and_embedding/index.html create mode 100644 files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html create mode 100644 files/de/learn/html/tables/grund_tabelle_html/index.html create mode 100644 files/de/learn/html/tables/index.html create mode 100644 files/de/learn/index.html create mode 100644 files/de/learn/javascript/bausteine/ereignisse/index.html create mode 100644 files/de/learn/javascript/bausteine/index.html create mode 100644 files/de/learn/javascript/first_steps/erster_blick/index.html create mode 100644 files/de/learn/javascript/first_steps/index.html create mode 100644 files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html create mode 100644 files/de/learn/javascript/first_steps/useful_string_methods/index.html create mode 100644 files/de/learn/javascript/first_steps/variables/index.html create mode 100644 files/de/learn/javascript/first_steps/was_ist_javascript/index.html create mode 100644 files/de/learn/javascript/index.html create mode 100644 files/de/learn/javascript/objects/basics/index.html create mode 100644 files/de/learn/javascript/objects/index.html create mode 100644 files/de/learn/javascript/objects/inheritance/index.html create mode 100644 files/de/learn/javascript/objects/json/index.html create mode 100644 files/de/learn/javascript/objects/object-oriented_js/index.html create mode 100644 files/de/learn/javascript/objects/object_prototypes/index.html create mode 100644 files/de/learn/mitarbeiten/index.html create mode 100644 files/de/learn/server-side/erste_schritte/index.html create mode 100644 files/de/learn/server-side/erste_schritte/introduction/index.html create mode 100644 files/de/learn/server-side/express_nodejs/index.html create mode 100644 files/de/learn/server-side/express_nodejs/mongoose/index.html create mode 100644 files/de/learn/server-side/index.html create mode 100644 files/de/learn/tools_and_testing/cross_browser_testing/index.html create mode 100644 files/de/learn/tools_and_testing/index.html create mode 100644 files/de/list_of_mozilla-based_applications/index.html create mode 100644 files/de/lokalisierbaren_code_schreiben/index.html create mode 100644 files/de/lokalisierung/index.html create mode 100644 files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html create mode 100644 files/de/making_sure_your_theme_works_with_rtl_locales/index.html create mode 100644 files/de/mdn/community/bleibe_auf_dem_laufenden/index.html create mode 100644 files/de/mdn/community/index.html create mode 100644 files/de/mdn/contribute/feedback/index.html create mode 100644 files/de/mdn/contribute/getting_started/index.html create mode 100644 files/de/mdn/contribute/howto/convert_code_samples_to_be_live/index.html create mode 100644 files/de/mdn/contribute/howto/do_a_technical_review/index.html create mode 100644 files/de/mdn/contribute/howto/do_an_editorial_review/index.html create mode 100644 files/de/mdn/contribute/howto/document_a_css_property/index.html create mode 100644 files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html create mode 100644 files/de/mdn/contribute/howto/index.html create mode 100644 "files/de/mdn/contribute/howto/schlagw\303\266rter_f\303\274r_javascript_seiten/index.html" create mode 100644 files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html create mode 100644 files/de/mdn/contribute/howto/tag/index.html create mode 100644 files/de/mdn/contribute/index.html create mode 100644 files/de/mdn/contribute/localize/index.html create mode 100644 files/de/mdn/contribute/localize/translating_pages/index.html create mode 100644 files/de/mdn/contribute/zu_tun_im_mdn/index.html create mode 100644 files/de/mdn/guidelines/index.html create mode 100644 files/de/mdn/guidelines/style_guide/index.html create mode 100644 files/de/mdn/index.html create mode 100644 files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html create mode 100644 files/de/mdn/kuma/index.html create mode 100644 files/de/mdn/nutzer_leitfaden/index.html create mode 100644 files/de/mdn/structures/index.html create mode 100644 files/de/mdn/structures/kompatibilitaets_tabellen/index.html create mode 100644 "files/de/mdn/\303\274ber/index.html" create mode 100644 "files/de/mdn/\303\274ber/link_zu_mdn/index.html" create mode 100644 files/de/mdn_at_ten/history_of_mdn/index.html create mode 100644 files/de/mdn_at_ten/index.html create mode 100644 files/de/mdn_at_ten/zum_mdn_beitragen/index.html create mode 100644 files/de/mercurial/index.html create mode 100644 files/de/midas/index.html create mode 100644 files/de/midas/sicherheitseinstellungen/index.html create mode 100644 files/de/mozilla/add-ons/add-on_guidelines/index.html create mode 100644 files/de/mozilla/add-ons/amo/index.html create mode 100644 files/de/mozilla/add-ons/amo/policy/index.html create mode 100644 files/de/mozilla/add-ons/bootstrapped_extensions/index.html create mode 100644 files/de/mozilla/add-ons/index.html create mode 100644 files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html create mode 100644 files/de/mozilla/add-ons/sdk/builder/index.html create mode 100644 files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html create mode 100644 files/de/mozilla/add-ons/sdk/guides/index.html create mode 100644 files/de/mozilla/add-ons/sdk/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tools/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tools/jpm/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tutorials/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tutorials/installation/index.html create mode 100644 files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html create mode 100644 files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html create mode 100644 files/de/mozilla/add-ons/themes/obsolete/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/api/browseraction/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/api/commands/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/api/downloads/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/api/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/beispiele/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/match_patterns/index.html create mode 100644 files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html create mode 100644 "files/de/mozilla/add-ons/\303\274berliegende_erweiterungen/index.html" create mode 100644 files/de/mozilla/chrome_registration/index.html create mode 100644 files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html create mode 100644 files/de/mozilla/css/index.html create mode 100644 files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html create mode 100644 files/de/mozilla/developer_guide/index.html create mode 100644 files/de/mozilla/developer_guide/quelltexte/index.html create mode 100644 files/de/mozilla/firefox/developer_edition/index.html create mode 100644 "files/de/mozilla/firefox/developer_edition/zur\303\274ckkehren/index.html" create mode 100644 files/de/mozilla/firefox/headless-mode/index.html create mode 100644 files/de/mozilla/firefox/index.html create mode 100644 files/de/mozilla/firefox/multiprocess_firefox/index.html create mode 100644 files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html create mode 100644 files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html create mode 100644 files/de/mozilla/firefox/nutzung_in_unternehmen/index.html create mode 100644 files/de/mozilla/firefox/privacy/index.html create mode 100644 files/de/mozilla/firefox/privacy/tracking_protection/index.html create mode 100644 files/de/mozilla/firefox/releases/16/index.html create mode 100644 files/de/mozilla/firefox/releases/27/index.html create mode 100644 files/de/mozilla/firefox/releases/28/index.html create mode 100644 files/de/mozilla/firefox/releases/3.6/index.html create mode 100644 files/de/mozilla/firefox/releases/34/index.html create mode 100644 files/de/mozilla/firefox/releases/47/index.html create mode 100644 files/de/mozilla/firefox/releases/5/index.html create mode 100644 files/de/mozilla/firefox/releases/56/index.html create mode 100644 files/de/mozilla/firefox/releases/57/index.html create mode 100644 files/de/mozilla/firefox/releases/58/index.html create mode 100644 files/de/mozilla/firefox/releases/60/index.html create mode 100644 files/de/mozilla/firefox/releases/68/index.html create mode 100644 files/de/mozilla/firefox/releases/index.html create mode 100644 files/de/mozilla/firefox/the_about_protocol/index.html create mode 100644 files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html create mode 100644 files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html create mode 100644 files/de/mozilla/firefox_fuer_android/index.html create mode 100644 files/de/mozilla/index.html create mode 100644 files/de/mozilla/javascript_code_modules/deutsch/index.html create mode 100644 files/de/mozilla/javascript_code_modules/index.html create mode 100644 files/de/mozilla/localization/index.html create mode 100644 files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html create mode 100644 files/de/mozilla/localization/localization_content_best_practices/index.html create mode 100644 files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html create mode 100644 files/de/mozilla/localization/lokalisierung_von_pontoon/index.html create mode 100644 files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html create mode 100644 "files/de/mozilla/localization/programm\303\274bersetungen_mit_mercurial/index.html" create mode 100644 files/de/mozilla/mathml_project/index.html create mode 100644 files/de/mozilla/mathml_project/mathml_torture_test/index.html create mode 100644 files/de/mozilla/mathml_project/start/index.html create mode 100644 files/de/mozilla/mobile/index.html create mode 100644 files/de/mozilla/mobile/viewport_meta_tag/index.html create mode 100644 files/de/mozilla/performance/index.html create mode 100644 files/de/mozilla/persona/bootstrapping_persona/index.html create mode 100644 files/de/mozilla/persona/branding/index.html create mode 100644 files/de/mozilla/persona/browser_compatibility/index.html create mode 100644 files/de/mozilla/persona/index.html create mode 100644 files/de/mozilla/persona/protocol_overview/index.html create mode 100644 files/de/mozilla/persona/schnellstart/index.html create mode 100644 files/de/mozilla/persona/warum_persona/index.html create mode 100644 files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html create mode 100644 files/de/mozilla/preferences/index.html create mode 100644 files/de/mozilla/projects/deutsch/index.html create mode 100644 files/de/mozilla/projects/index.html create mode 100644 files/de/mozilla/projects/nss/index.html create mode 100644 files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html create mode 100644 files/de/mozilla/projects/nss/nss_sample_code/index.html create mode 100644 files/de/mozilla/projects/nss/pkcs11/index.html create mode 100644 files/de/mozilla/projects/nss/pkcs11/module_installation/index.html create mode 100644 files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html create mode 100644 files/de/mozilla/qa/index.html create mode 100644 files/de/mozilla/tech/index.html create mode 100644 files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html create mode 100644 files/de/mozilla/tech/xpcom/guide/index.html create mode 100644 files/de/mozilla/tech/xpcom/reference/index.html create mode 100644 files/de/mozilla/tech/xpcom/reference/interface/index.html create mode 100644 files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html create mode 100644 files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html create mode 100644 files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html create mode 100644 files/de/mozilla/thunderbird/autokonfiguration/index.html create mode 100644 files/de/mozilla/thunderbird/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html create mode 100644 files/de/mozilla/thunderbird/thunderbird_extensions/index.html create mode 100644 files/de/mozilla/verbinden/index.html create mode 100644 "files/de/mozilla/\303\274ber_colon_omni.ja_(ehemals_omni.jar)/index.html" create mode 100644 "files/de/neue_kompatibilit\303\244tstabellen_in_beta/index.html" create mode 100644 "files/de/opensearch_plugin_f\303\274r_firefox_erstellen/index.html" create mode 100644 files/de/packen_von_erweiterungen/index.html create mode 100644 "files/de/plugins/beispiele_und_testf\303\244lle/index.html" create mode 100644 files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html create mode 100644 files/de/plugins/index.html create mode 100644 files/de/preferences_system/index.html create mode 100644 files/de/profile_manager/index.html create mode 100644 "files/de/qualit\303\244tssicherung/stress_testing/index.html" create mode 100644 files/de/quickstart_lokalisierung/index.html create mode 100644 files/de/quickstart_lokalisierung/initial_setup/index.html create mode 100644 files/de/quickstart_lokalisierung/translation_phase/index.html create mode 100644 files/de/rdf/index.html create mode 100644 files/de/rhino/index.html create mode 100644 files/de/rhino_documentation/index.html create mode 100644 files/de/richtlinien_zum_schreiben_eines_bugreports/index.html create mode 100644 files/de/sandbox/index.html create mode 100644 files/de/social_api/index.html create mode 100644 files/de/spidermonkey/build_documentation/index.html create mode 100644 files/de/spidermonkey/index.html create mode 100644 files/de/theme_erstellen/contents.rdf/index.html create mode 100644 "files/de/theme_erstellen/einf\303\274hrung/index.html" create mode 100644 files/de/theme_erstellen/index.html create mode 100644 files/de/theme_erstellen/install.rdf/index.html create mode 100644 files/de/theme_erstellen/uuid/index.html create mode 100644 files/de/themes/hintergrund/index.html create mode 100644 files/de/themes/index.html create mode 100644 files/de/toolkit_api/index.html create mode 100644 files/de/tools/3d_untersuchung/index.html create mode 100644 files/de/tools/about_colon_debugging/index.html create mode 100644 files/de/tools/add-ons/index.html create mode 100644 files/de/tools/barrierefreiheits_inspektor/index.html create mode 100644 files/de/tools/bildschirmgroessen-testen/index.html create mode 100644 files/de/tools/browser_console/index.html create mode 100644 files/de/tools/browser_werkzeuge/index.html create mode 100644 files/de/tools/debugger/how_to/index.html create mode 100644 files/de/tools/debugger/how_to/open_the_debugger/index.html create mode 100644 files/de/tools/debugger/how_to/use_a_source_map/index.html create mode 100644 files/de/tools/debugger/index.html create mode 100644 files/de/tools/debugger/settings/index.html create mode 100644 files/de/tools/debugger/source_map_errors/index.html create mode 100644 files/de/tools/firefox_os_1.1_simulator/index.html create mode 100644 files/de/tools/index.html create mode 100644 files/de/tools/index/index.html create mode 100644 files/de/tools/json_viewer/index.html create mode 100644 files/de/tools/keyboard_shortcuts/index.html create mode 100644 files/de/tools/netzwerkanalyse/index.html create mode 100644 files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html create mode 100644 files/de/tools/page_inspector/how_to/index.html create mode 100644 files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html create mode 100644 files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html create mode 100644 files/de/tools/paint_flashing_tool/index.html create mode 100644 files/de/tools/performance/index.html create mode 100644 files/de/tools/remote_debugging/debugging_firefox_desktop/index.html create mode 100644 files/de/tools/remote_debugging/firefox_for_android/index.html create mode 100644 files/de/tools/remote_debugging/index.html create mode 100644 files/de/tools/scratchpad/index.html create mode 100644 files/de/tools/seiten_inspektor/index.html create mode 100644 files/de/tools/seiten_inspektor/tastenkombinationen/index.html create mode 100644 files/de/tools/shader-editor/index.html create mode 100644 files/de/tools/storage_inspector/cache_storage/index.html create mode 100644 files/de/tools/storage_inspector/cookies/index.html create mode 100644 files/de/tools/storage_inspector/index.html create mode 100644 files/de/tools/storage_inspector/indexeddb/index.html create mode 100644 files/de/tools/storage_inspector/local_storage_session_storage/index.html create mode 100644 files/de/tools/style_editor/index.html create mode 100644 files/de/tools/web_konsole/hilfe/index.html create mode 100644 files/de/tools/web_konsole/index.html create mode 100644 files/de/tools/webide/index.html create mode 100644 "files/de/tools/webide/probleml\303\266sung/index.html" create mode 100644 files/de/tools/webide_clone/index.html create mode 100644 "files/de/unterst\303\274tzung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html" create mode 100644 files/de/updating_web_applications_for_firefox_3/index.html create mode 100644 files/de/web/accessibility/understanding_wcag/index.html create mode 100644 files/de/web/accessibility/understanding_wcag/perceivable/index.html create mode 100644 files/de/web/api/aescbcparams/index.html create mode 100644 files/de/web/api/animationevent/index.html create mode 100644 files/de/web/api/audiocontext/decodeaudiodata/index.html create mode 100644 files/de/web/api/audiocontext/index.html create mode 100644 files/de/web/api/audiodestinationnode/index.html create mode 100644 files/de/web/api/audionode/index.html create mode 100644 files/de/web/api/audiotrack/index.html create mode 100644 files/de/web/api/battery_status_api/index.html create mode 100644 files/de/web/api/blob/index.html create mode 100644 files/de/web/api/body/arraybuffer/index.html create mode 100644 files/de/web/api/body/blob/index.html create mode 100644 files/de/web/api/body/body/index.html create mode 100644 files/de/web/api/body/bodyused/index.html create mode 100644 files/de/web/api/body/formdata/index.html create mode 100644 files/de/web/api/body/index.html create mode 100644 files/de/web/api/body/json/index.html create mode 100644 files/de/web/api/body/text/index.html create mode 100644 files/de/web/api/cache/add/index.html create mode 100644 files/de/web/api/cache/addall/index.html create mode 100644 files/de/web/api/cache/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/canvas/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/fillrect/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/getimagedata/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/ispointinpath/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/scale/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html create mode 100644 files/de/web/api/canvasrenderingcontext2d/textalign/index.html create mode 100644 files/de/web/api/childnode/index.html create mode 100644 files/de/web/api/childnode/remove/index.html create mode 100644 files/de/web/api/console/assert/index.html create mode 100644 files/de/web/api/console/clear/index.html create mode 100644 files/de/web/api/console/count/index.html create mode 100644 files/de/web/api/console/debug/index.html create mode 100644 files/de/web/api/console/dir/index.html create mode 100644 files/de/web/api/console/index.html create mode 100644 files/de/web/api/console/log/index.html create mode 100644 files/de/web/api/console/table/index.html create mode 100644 files/de/web/api/console/time/index.html create mode 100644 files/de/web/api/console/timeend/index.html create mode 100644 files/de/web/api/console/warn/index.html create mode 100644 files/de/web/api/crypto/index.html create mode 100644 files/de/web/api/css/escape/index.html create mode 100644 files/de/web/api/css/index.html create mode 100644 files/de/web/api/css_painting_api/guide/index.html create mode 100644 files/de/web/api/css_painting_api/index.html create mode 100644 files/de/web/api/cssmediarule/index.html create mode 100644 files/de/web/api/csspagerule/index.html create mode 100644 files/de/web/api/cssrule/csstext/index.html create mode 100644 files/de/web/api/cssrule/index.html create mode 100644 files/de/web/api/customelementregistry/define/index.html create mode 100644 files/de/web/api/customelementregistry/index.html create mode 100644 files/de/web/api/dedicatedworkerglobalscope/index.html create mode 100644 files/de/web/api/dedicatedworkerglobalscope/message_event/index.html create mode 100644 files/de/web/api/document/adoptnode/index.html create mode 100644 files/de/web/api/document/alinkcolor/index.html create mode 100644 files/de/web/api/document/body/index.html create mode 100644 files/de/web/api/document/createattribute/index.html create mode 100644 files/de/web/api/document/createdocumentfragment/index.html create mode 100644 files/de/web/api/document/createelement/index.html create mode 100644 files/de/web/api/document/createelementns/index.html create mode 100644 files/de/web/api/document/createtextnode/index.html create mode 100644 files/de/web/api/document/createtreewalker/index.html create mode 100644 files/de/web/api/document/dir/index.html create mode 100644 files/de/web/api/document/document/index.html create mode 100644 files/de/web/api/document/documentelement/index.html create mode 100644 files/de/web/api/document/fullscreenchange_event/index.html create mode 100644 files/de/web/api/document/getelementbyid/index.html create mode 100644 files/de/web/api/document/getelementsbyclassname/index.html create mode 100644 files/de/web/api/document/head/index.html create mode 100644 files/de/web/api/document/importnode/index.html create mode 100644 files/de/web/api/document/index.html create mode 100644 files/de/web/api/document/queryselector/index.html create mode 100644 files/de/web/api/document/queryselectorall/index.html create mode 100644 files/de/web/api/document/readystate/index.html create mode 100644 files/de/web/api/document/referrer/index.html create mode 100644 files/de/web/api/document/registerelement/index.html create mode 100644 files/de/web/api/document/title/index.html create mode 100644 files/de/web/api/document/url/index.html create mode 100644 files/de/web/api/document/width/index.html create mode 100644 files/de/web/api/document/write/index.html create mode 100644 files/de/web/api/document/writeln/index.html create mode 100644 files/de/web/api/documentfragment/index.html create mode 100644 files/de/web/api/domerror/index.html create mode 100644 files/de/web/api/domparser/index.html create mode 100644 files/de/web/api/domstring/index.html create mode 100644 files/de/web/api/domtokenlist/add/index.html create mode 100644 files/de/web/api/domtokenlist/index.html create mode 100644 files/de/web/api/dragevent/index.html create mode 100644 files/de/web/api/element/classlist/index.html create mode 100644 files/de/web/api/element/classname/index.html create mode 100644 files/de/web/api/element/getboundingclientrect/index.html create mode 100644 files/de/web/api/element/hasattribute/index.html create mode 100644 files/de/web/api/element/index.html create mode 100644 files/de/web/api/element/innerhtml/index.html create mode 100644 files/de/web/api/element/insertadjacenthtml/index.html create mode 100644 files/de/web/api/element/queryselector/index.html create mode 100644 files/de/web/api/element/queryselectorall/index.html create mode 100644 files/de/web/api/element/removeattribute/index.html create mode 100644 files/de/web/api/element/requestfullscreen/index.html create mode 100644 files/de/web/api/element/scrollintoview/index.html create mode 100644 files/de/web/api/element/scrollleft/index.html create mode 100644 files/de/web/api/element/scrollwidth/index.html create mode 100644 files/de/web/api/element/setattribute/index.html create mode 100644 files/de/web/api/event/bubbles/index.html create mode 100644 files/de/web/api/event/event/index.html create mode 100644 files/de/web/api/event/index.html create mode 100644 files/de/web/api/eventlistener/index.html create mode 100644 files/de/web/api/eventsource/index.html create mode 100644 files/de/web/api/eventtarget/index.html create mode 100644 files/de/web/api/federatedcredential/index.html create mode 100644 files/de/web/api/fetch_api/index.html create mode 100644 files/de/web/api/file/filename/index.html create mode 100644 files/de/web/api/file/filesize/index.html create mode 100644 files/de/web/api/file/getastext/index.html create mode 100644 files/de/web/api/file/index.html create mode 100644 files/de/web/api/file/name/index.html create mode 100644 files/de/web/api/file/typ/index.html create mode 100644 files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html create mode 100644 files/de/web/api/filereader/index.html create mode 100644 files/de/web/api/filereader/onload/index.html create mode 100644 files/de/web/api/formdata/formdata/index.html create mode 100644 files/de/web/api/formdata/get/index.html create mode 100644 files/de/web/api/formdata/getall/index.html create mode 100644 files/de/web/api/formdata/index.html create mode 100644 files/de/web/api/fullscreenoptions/index.html create mode 100644 files/de/web/api/gainnode/index.html create mode 100644 files/de/web/api/gamepad_api/index.html create mode 100644 files/de/web/api/geolocation/getcurrentposition/index.html create mode 100644 files/de/web/api/geolocation/index.html create mode 100644 files/de/web/api/globaleventhandlers/index.html create mode 100644 files/de/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/de/web/api/globaleventhandlers/onload/index.html create mode 100644 files/de/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/de/web/api/htmlcanvaselement/index.html create mode 100644 files/de/web/api/htmlcanvaselement/todataurl/index.html create mode 100644 files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html create mode 100644 files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html create mode 100644 files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html create mode 100644 files/de/web/api/htmlcollection/index.html create mode 100644 files/de/web/api/htmlformelement/elements/index.html create mode 100644 files/de/web/api/htmlformelement/index.html create mode 100644 files/de/web/api/htmlformelement/submit_event/index.html create mode 100644 files/de/web/api/htmlinputelement/index.html create mode 100644 files/de/web/api/htmlinputelement/select/index.html create mode 100644 files/de/web/api/htmlslotelement/assignednodes/index.html create mode 100644 files/de/web/api/htmlslotelement/index.html create mode 100644 files/de/web/api/htmltableelement/createcaption/index.html create mode 100644 files/de/web/api/htmltableelement/index.html create mode 100644 files/de/web/api/htmltableelement/insertrow/index.html create mode 100644 files/de/web/api/htmlunknownelement/index.html create mode 100644 files/de/web/api/index.html create mode 100644 files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html create mode 100644 files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html create mode 100644 files/de/web/api/indexeddb_api/index.html create mode 100644 files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html create mode 100644 files/de/web/api/keyboardevent/altkey/index.html create mode 100644 files/de/web/api/keyboardevent/getmodifierstate/index.html create mode 100644 files/de/web/api/keyboardevent/index.html create mode 100644 files/de/web/api/keyboardevent/keycode/index.html create mode 100644 files/de/web/api/l10n.language.direction/index.html create mode 100644 files/de/web/api/linkstyle/index.html create mode 100644 files/de/web/api/messageevent/index.html create mode 100644 files/de/web/api/mouseevent/index.html create mode 100644 files/de/web/api/mozmobileconnection/index.html create mode 100644 files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html create mode 100644 files/de/web/api/mutationobserver/index.html create mode 100644 files/de/web/api/navigator/index.html create mode 100644 files/de/web/api/navigator/registerprotocolhandler/index.html create mode 100644 files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html create mode 100644 files/de/web/api/navigator/sendbeacon/index.html create mode 100644 files/de/web/api/navigator/vibrate/index.html create mode 100644 files/de/web/api/navigatoronline/index.html create mode 100644 files/de/web/api/navigatoronline/online/index.html create mode 100644 files/de/web/api/navigatoronline/online_and_offline_events/index.html create mode 100644 files/de/web/api/node/appendchild/index.html create mode 100644 files/de/web/api/node/childnodes/index.html create mode 100644 files/de/web/api/node/clonenode/index.html create mode 100644 files/de/web/api/node/firstchild/index.html create mode 100644 files/de/web/api/node/haschildnodes/index.html create mode 100644 files/de/web/api/node/index.html create mode 100644 files/de/web/api/node/innertext/index.html create mode 100644 files/de/web/api/node/lastchild/index.html create mode 100644 files/de/web/api/node/nextsibling/index.html create mode 100644 files/de/web/api/node/nodevalue/index.html create mode 100644 files/de/web/api/node/normalize/index.html create mode 100644 files/de/web/api/node/parentnode/index.html create mode 100644 files/de/web/api/node/previoussibling/index.html create mode 100644 files/de/web/api/node/removechild/index.html create mode 100644 files/de/web/api/node/replacechild/index.html create mode 100644 files/de/web/api/node/setuserdata/index.html create mode 100644 files/de/web/api/node/textcontent/index.html create mode 100644 files/de/web/api/notification/index.html create mode 100644 files/de/web/api/notification/permission/index.html create mode 100644 files/de/web/api/page_visibility_api/index.html create mode 100644 files/de/web/api/performance/index.html create mode 100644 files/de/web/api/performance/now/index.html create mode 100644 files/de/web/api/push_api/index.html create mode 100644 files/de/web/api/pushmanager/index.html create mode 100644 files/de/web/api/pushmanager/subscribe/index.html create mode 100644 files/de/web/api/range/index.html create mode 100644 files/de/web/api/range/range/index.html create mode 100644 files/de/web/api/readablestream/index.html create mode 100644 files/de/web/api/renderingcontext/index.html create mode 100644 files/de/web/api/response/index.html create mode 100644 files/de/web/api/response/response/index.html create mode 100644 files/de/web/api/rtcicecandidate/index.html create mode 100644 files/de/web/api/rtcpeerconnection/index.html create mode 100644 files/de/web/api/rtcrtptransceiver/direction/index.html create mode 100644 files/de/web/api/rtcrtptransceiver/index.html create mode 100644 files/de/web/api/service_worker_api/index.html create mode 100644 files/de/web/api/service_worker_api/using_service_workers/index.html create mode 100644 files/de/web/api/serviceworker/index.html create mode 100644 files/de/web/api/serviceworkercontainer/index.html create mode 100644 files/de/web/api/serviceworkercontainer/register/index.html create mode 100644 files/de/web/api/sharedworker/index.html create mode 100644 files/de/web/api/speechsynthesis/index.html create mode 100644 files/de/web/api/storage/clear/index.html create mode 100644 files/de/web/api/storage/getitem/index.html create mode 100644 files/de/web/api/storage/index.html create mode 100644 files/de/web/api/storage/key/index.html create mode 100644 files/de/web/api/storage/length/index.html create mode 100644 files/de/web/api/storage/removeitem/index.html create mode 100644 files/de/web/api/storage/setitem/index.html create mode 100644 files/de/web/api/transferable/index.html create mode 100644 files/de/web/api/url/createobjecturl/index.html create mode 100644 files/de/web/api/url/index.html create mode 100644 files/de/web/api/url/protocol/index.html create mode 100644 files/de/web/api/urlsearchparams/index.html create mode 100644 files/de/web/api/usvstring/index.html create mode 100644 files/de/web/api/vollbild_api/index.html create mode 100644 files/de/web/api/web_animations_api/index.html create mode 100644 files/de/web/api/web_storage_api/index.html create mode 100644 files/de/web/api/web_workers_api/index.html create mode 100644 files/de/web/api/webgl_api/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html create mode 100644 "files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" create mode 100644 "files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" create mode 100644 "files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" create mode 100644 files/de/web/api/webgl_api/tutorial/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html create mode 100644 files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html create mode 100644 files/de/web/api/webglactiveinfo/index.html create mode 100644 files/de/web/api/webglprogram/index.html create mode 100644 files/de/web/api/webglrenderingcontext/canvas/index.html create mode 100644 files/de/web/api/webglrenderingcontext/getactiveattrib/index.html create mode 100644 files/de/web/api/webglrenderingcontext/getattriblocation/index.html create mode 100644 files/de/web/api/webglrenderingcontext/index.html create mode 100644 files/de/web/api/websocket/binarytype/index.html create mode 100644 files/de/web/api/websocket/close/index.html create mode 100644 files/de/web/api/websocket/extensions/index.html create mode 100644 files/de/web/api/websocket/index.html create mode 100644 files/de/web/api/websocket/onclose/index.html create mode 100644 files/de/web/api/websocket/protocol/index.html create mode 100644 files/de/web/api/websocket/readystate/index.html create mode 100644 files/de/web/api/websocket/url/index.html create mode 100644 files/de/web/api/webxr_device_api/index.html create mode 100644 files/de/web/api/window/alert/index.html create mode 100644 files/de/web/api/window/applicationcache/index.html create mode 100644 files/de/web/api/window/cancelanimationframe/index.html create mode 100644 files/de/web/api/window/close/index.html create mode 100644 files/de/web/api/window/confirm/index.html create mode 100644 files/de/web/api/window/console/index.html create mode 100644 files/de/web/api/window/dump/index.html create mode 100644 files/de/web/api/window/history/index.html create mode 100644 files/de/web/api/window/index.html create mode 100644 files/de/web/api/window/length/index.html create mode 100644 files/de/web/api/window/localstorage/index.html create mode 100644 files/de/web/api/window/name/index.html create mode 100644 files/de/web/api/window/navigator/index.html create mode 100644 files/de/web/api/window/ondevicemotion/index.html create mode 100644 files/de/web/api/window/opendialog/index.html create mode 100644 files/de/web/api/window/opener/index.html create mode 100644 files/de/web/api/window/performance/index.html create mode 100644 files/de/web/api/window/print/index.html create mode 100644 files/de/web/api/window/prompt/index.html create mode 100644 files/de/web/api/window/screenx/index.html create mode 100644 files/de/web/api/window/scroll/index.html create mode 100644 files/de/web/api/window/scrollto/index.html create mode 100644 files/de/web/api/window/sessionstorage/index.html create mode 100644 files/de/web/api/window/stop/index.html create mode 100644 files/de/web/api/windowbase64/btoa/index.html create mode 100644 files/de/web/api/windowbase64/index.html create mode 100644 files/de/web/api/windoweventhandlers/index.html create mode 100644 files/de/web/api/windoweventhandlers/onafterprint/index.html create mode 100644 files/de/web/api/windoweventhandlers/onhashchange/index.html create mode 100644 files/de/web/api/windoweventhandlers/onpopstate/index.html create mode 100644 files/de/web/api/windowtimers/index.html create mode 100644 files/de/web/api/windowtimers/settimeout/index.html create mode 100644 files/de/web/api/worker/index.html create mode 100644 files/de/web/api/xmlhttprequest/index.html create mode 100644 files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html create mode 100644 files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html create mode 100644 files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html create mode 100644 files/de/web/barrierefreiheit/aria/aria_techniken/index.html create mode 100644 files/de/web/barrierefreiheit/aria/index.html create mode 100644 files/de/web/barrierefreiheit/index.html create mode 100644 files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html create mode 100644 files/de/web/barrierefreiheit/webentwicklung/index.html create mode 100644 files/de/web/css/-moz-binding/index.html create mode 100644 files/de/web/css/-moz-border-bottom-colors/index.html create mode 100644 files/de/web/css/-moz-border-left-colors/index.html create mode 100644 files/de/web/css/-moz-border-right-colors/index.html create mode 100644 files/de/web/css/-moz-border-top-colors/index.html create mode 100644 files/de/web/css/-moz-box-flex/index.html create mode 100644 files/de/web/css/-moz-box-ordinal-group/index.html create mode 100644 files/de/web/css/-moz-box-pack/index.html create mode 100644 files/de/web/css/-moz-cell/index.html create mode 100644 files/de/web/css/-moz-float-edge/index.html create mode 100644 files/de/web/css/-moz-force-broken-image-icon/index.html create mode 100644 files/de/web/css/-moz-image-rect/index.html create mode 100644 files/de/web/css/-moz-image-region/index.html create mode 100644 files/de/web/css/-moz-orient/index.html create mode 100644 files/de/web/css/-moz-outline-radius-bottomleft/index.html create mode 100644 files/de/web/css/-moz-outline-radius-bottomright/index.html create mode 100644 files/de/web/css/-moz-outline-radius-topleft/index.html create mode 100644 files/de/web/css/-moz-outline-radius-topright/index.html create mode 100644 files/de/web/css/-moz-outline-radius/index.html create mode 100644 files/de/web/css/-moz-stack-sizing/index.html create mode 100644 files/de/web/css/-moz-text-blink/index.html create mode 100644 files/de/web/css/-moz-user-focus/index.html create mode 100644 files/de/web/css/-moz-user-input/index.html create mode 100644 files/de/web/css/-moz-user-modify/index.html create mode 100644 files/de/web/css/-moz-user-select/index.html create mode 100644 files/de/web/css/-moz-window-shadow/index.html create mode 100644 files/de/web/css/-webkit-box-reflect/index.html create mode 100644 files/de/web/css/-webkit-mask-origin/index.html create mode 100644 files/de/web/css/-webkit-mask-position-x/index.html create mode 100644 files/de/web/css/-webkit-mask-position-y/index.html create mode 100644 files/de/web/css/-webkit-mask-repeat-x/index.html create mode 100644 files/de/web/css/-webkit-mask-repeat-y/index.html create mode 100644 files/de/web/css/-webkit-mask-repeat/index.html create mode 100644 files/de/web/css/-webkit-overflow-scrolling/index.html create mode 100644 files/de/web/css/-webkit-print-color-adjust/index.html create mode 100644 files/de/web/css/-webkit-tap-highlight-color/index.html create mode 100644 files/de/web/css/-webkit-text-fill-color/index.html create mode 100644 files/de/web/css/-webkit-text-stroke-color/index.html create mode 100644 files/de/web/css/-webkit-text-stroke-width/index.html create mode 100644 files/de/web/css/-webkit-text-stroke/index.html create mode 100644 files/de/web/css/-webkit-touch-callout/index.html create mode 100644 files/de/web/css/@charset/index.html create mode 100644 files/de/web/css/@document/index.html create mode 100644 files/de/web/css/@import/index.html create mode 100644 files/de/web/css/@keyframes/index.html create mode 100644 files/de/web/css/@media/any-pointer/index.html create mode 100644 files/de/web/css/@media/index.html create mode 100644 files/de/web/css/@media/pointer/index.html create mode 100644 files/de/web/css/@media/prefers-reduced-motion/index.html create mode 100644 files/de/web/css/@media/width/index.html create mode 100644 files/de/web/css/@page/bleed/index.html create mode 100644 files/de/web/css/@page/index.html create mode 100644 files/de/web/css/@page/marks/index.html create mode 100644 files/de/web/css/@viewport/index.html create mode 100644 files/de/web/css/_colon_-moz-broken/index.html create mode 100644 files/de/web/css/_colon_-moz-drag-over/index.html create mode 100644 files/de/web/css/_colon_-moz-first-node/index.html create mode 100644 files/de/web/css/_colon_-moz-focusring/index.html create mode 100644 files/de/web/css/_colon_-moz-full-screen-ancestor/index.html create mode 100644 files/de/web/css/_colon_-moz-handler-blocked/index.html create mode 100644 files/de/web/css/_colon_-moz-handler-crashed/index.html create mode 100644 files/de/web/css/_colon_-moz-handler-disabled/index.html create mode 100644 files/de/web/css/_colon_-moz-last-node/index.html create mode 100644 files/de/web/css/_colon_-moz-list-bullet/index.html create mode 100644 files/de/web/css/_colon_-moz-list-number/index.html create mode 100644 files/de/web/css/_colon_-moz-loading/index.html create mode 100644 files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html create mode 100644 files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html create mode 100644 files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html create mode 100644 files/de/web/css/_colon_-moz-lwtheme-darktext/index.html create mode 100644 files/de/web/css/_colon_-moz-lwtheme/index.html create mode 100644 files/de/web/css/_colon_-moz-only-whitespace/index.html create mode 100644 files/de/web/css/_colon_-moz-placeholder/index.html create mode 100644 files/de/web/css/_colon_-moz-submit-invalid/index.html create mode 100644 files/de/web/css/_colon_-moz-suppressed/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html create mode 100644 files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-cell-text/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-cell/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-column/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-drop-feedback/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-image/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-indentation/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-line/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-progressmeter/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-row(hover)/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-row/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-separator/index.html create mode 100644 files/de/web/css/_colon_-moz-tree-twisty/index.html create mode 100644 files/de/web/css/_colon_-moz-ui-invalid/index.html create mode 100644 files/de/web/css/_colon_-moz-ui-valid/index.html create mode 100644 files/de/web/css/_colon_-moz-user-disabled/index.html create mode 100644 files/de/web/css/_colon_-moz-window-inactive/index.html create mode 100644 files/de/web/css/_colon_-webkit-autofill/index.html create mode 100644 files/de/web/css/_colon_active/index.html create mode 100644 files/de/web/css/_colon_default/index.html create mode 100644 files/de/web/css/_colon_dir/index.html create mode 100644 files/de/web/css/_colon_disabled/index.html create mode 100644 files/de/web/css/_colon_empty/index.html create mode 100644 files/de/web/css/_colon_enabled/index.html create mode 100644 files/de/web/css/_colon_first-child/index.html create mode 100644 files/de/web/css/_colon_first-of-type/index.html create mode 100644 files/de/web/css/_colon_first/index.html create mode 100644 files/de/web/css/_colon_focus/index.html create mode 100644 files/de/web/css/_colon_fullscreen/index.html create mode 100644 files/de/web/css/_colon_hover/index.html create mode 100644 files/de/web/css/_colon_in-range/index.html create mode 100644 files/de/web/css/_colon_indeterminate/index.html create mode 100644 files/de/web/css/_colon_invalid/index.html create mode 100644 files/de/web/css/_colon_lang/index.html create mode 100644 files/de/web/css/_colon_last-child/index.html create mode 100644 files/de/web/css/_colon_last-of-type/index.html create mode 100644 files/de/web/css/_colon_link/index.html create mode 100644 files/de/web/css/_colon_not/index.html create mode 100644 files/de/web/css/_colon_nth-child/index.html create mode 100644 files/de/web/css/_colon_only-child/index.html create mode 100644 files/de/web/css/_colon_optional/index.html create mode 100644 files/de/web/css/_colon_out-of-range/index.html create mode 100644 files/de/web/css/_colon_required/index.html create mode 100644 files/de/web/css/_colon_root/index.html create mode 100644 files/de/web/css/_colon_visited/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-page-sequence/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-page/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-placeholder/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-progress-bar/index.html create mode 100644 files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-browse/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-check/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-fill-lower/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-fill-upper/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-fill/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-reveal/index.html create mode 100644 files/de/web/css/_doublecolon_-ms-thumb/index.html create mode 100644 files/de/web/css/_doublecolon_after/index.html create mode 100644 files/de/web/css/_doublecolon_backdrop/index.html create mode 100644 files/de/web/css/_doublecolon_before/index.html create mode 100644 files/de/web/css/_doublecolon_placeholder/index.html create mode 100644 files/de/web/css/_doublecolon_selection/index.html create mode 100644 files/de/web/css/alias/index.html create mode 100644 files/de/web/css/align-content/index.html create mode 100644 files/de/web/css/align-items/index.html create mode 100644 files/de/web/css/align-self/index.html create mode 100644 files/de/web/css/all/index.html create mode 100644 files/de/web/css/alternative_style_sheets/index.html create mode 100644 files/de/web/css/angle-percentage/index.html create mode 100644 files/de/web/css/angle/index.html create mode 100644 files/de/web/css/angrenzende_geschwisterselektoren/index.html create mode 100644 files/de/web/css/animation-delay/index.html create mode 100644 files/de/web/css/animation-direction/index.html create mode 100644 files/de/web/css/animation-duration/index.html create mode 100644 files/de/web/css/animation-fill-mode/index.html create mode 100644 files/de/web/css/animation-iteration-count/index.html create mode 100644 files/de/web/css/animation-name/index.html create mode 100644 files/de/web/css/animation-play-state/index.html create mode 100644 files/de/web/css/animation-timing-function/index.html create mode 100644 files/de/web/css/animation/index.html create mode 100644 files/de/web/css/appearance/index.html create mode 100644 files/de/web/css/at-rule/index.html create mode 100644 files/de/web/css/attr()/index.html create mode 100644 files/de/web/css/attributselektoren/index.html create mode 100644 files/de/web/css/aural/index.html create mode 100644 files/de/web/css/auto/index.html create mode 100644 files/de/web/css/backdrop-filter/index.html create mode 100644 files/de/web/css/backface-visibility/index.html create mode 100644 files/de/web/css/background-attachment/index.html create mode 100644 files/de/web/css/background-blend-mode/index.html create mode 100644 files/de/web/css/background-clip/index.html create mode 100644 files/de/web/css/background-color/index.html create mode 100644 files/de/web/css/background-image/index.html create mode 100644 files/de/web/css/background-origin/index.html create mode 100644 files/de/web/css/background-position/index.html create mode 100644 files/de/web/css/background-repeat/index.html create mode 100644 files/de/web/css/background-size/index.html create mode 100644 files/de/web/css/background/index.html create mode 100644 files/de/web/css/basic-shape/index.html create mode 100644 files/de/web/css/berechneter_wert/index.html create mode 100644 files/de/web/css/border-bottom-color/index.html create mode 100644 files/de/web/css/border-bottom-left-radius/index.html create mode 100644 files/de/web/css/border-bottom-right-radius/index.html create mode 100644 files/de/web/css/border-bottom-style/index.html create mode 100644 files/de/web/css/border-bottom-width/index.html create mode 100644 files/de/web/css/border-bottom/index.html create mode 100644 files/de/web/css/border-collapse/index.html create mode 100644 files/de/web/css/border-color/index.html create mode 100644 files/de/web/css/border-image-outset/index.html create mode 100644 files/de/web/css/border-image-repeat/index.html create mode 100644 files/de/web/css/border-image-slice/index.html create mode 100644 files/de/web/css/border-image-source/index.html create mode 100644 files/de/web/css/border-image-width/index.html create mode 100644 files/de/web/css/border-image/index.html create mode 100644 files/de/web/css/border-left-color/index.html create mode 100644 files/de/web/css/border-left-style/index.html create mode 100644 files/de/web/css/border-left-width/index.html create mode 100644 files/de/web/css/border-left/index.html create mode 100644 files/de/web/css/border-radius/index.html create mode 100644 files/de/web/css/border-right-color/index.html create mode 100644 files/de/web/css/border-right-style/index.html create mode 100644 files/de/web/css/border-right-width/index.html create mode 100644 files/de/web/css/border-right/index.html create mode 100644 files/de/web/css/border-spacing/index.html create mode 100644 files/de/web/css/border-style/index.html create mode 100644 files/de/web/css/border-top-color/index.html create mode 100644 files/de/web/css/border-top-left-radius/index.html create mode 100644 files/de/web/css/border-top-right-radius/index.html create mode 100644 files/de/web/css/border-top-style/index.html create mode 100644 files/de/web/css/border-top-width/index.html create mode 100644 files/de/web/css/border-top/index.html create mode 100644 files/de/web/css/border-width/index.html create mode 100644 files/de/web/css/border/index.html create mode 100644 files/de/web/css/bottom/index.html create mode 100644 files/de/web/css/box-decoration-break/index.html create mode 100644 files/de/web/css/box-shadow/index.html create mode 100644 files/de/web/css/box-sizing/index.html create mode 100644 files/de/web/css/break-after/index.html create mode 100644 files/de/web/css/break-inside/index.html create mode 100644 files/de/web/css/calc()/index.html create mode 100644 files/de/web/css/caption-side/index.html create mode 100644 files/de/web/css/clear/index.html create mode 100644 files/de/web/css/clip-path/index.html create mode 100644 files/de/web/css/clip/index.html create mode 100644 files/de/web/css/color/index.html create mode 100644 files/de/web/css/column-count/index.html create mode 100644 files/de/web/css/column-fill/index.html create mode 100644 files/de/web/css/column-gap/index.html create mode 100644 files/de/web/css/column-rule-color/index.html create mode 100644 files/de/web/css/column-rule-style/index.html create mode 100644 files/de/web/css/column-rule-width/index.html create mode 100644 files/de/web/css/column-rule/index.html create mode 100644 files/de/web/css/column-span/index.html create mode 100644 files/de/web/css/column-width/index.html create mode 100644 files/de/web/css/columns/index.html create mode 100644 files/de/web/css/content/index.html create mode 100644 files/de/web/css/counter-increment/index.html create mode 100644 files/de/web/css/counter-reset/index.html create mode 100644 files/de/web/css/css_animations/css_animationen_nutzen/index.html create mode 100644 files/de/web/css/css_animations/index.html create mode 100644 files/de/web/css/css_background_and_borders/border-image_generator/index.html create mode 100644 files/de/web/css/css_background_and_borders/border-radius_generator/index.html create mode 100644 files/de/web/css/css_background_and_borders/index.html create mode 100644 "files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" create mode 100644 files/de/web/css/css_basic_user_interface/index.html create mode 100644 files/de/web/css/css_boxmodell/box-shadow_generator/index.html create mode 100644 "files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" create mode 100644 files/de/web/css/css_boxmodell/index.html create mode 100644 "files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" create mode 100644 files/de/web/css/css_charsets/index.html create mode 100644 files/de/web/css/css_colors/farbauswahl_werkzeug/index.html create mode 100644 files/de/web/css/css_colors/index.html create mode 100644 files/de/web/css/css_columns/index.html create mode 100644 files/de/web/css/css_compositing_and_blending/index.html create mode 100644 files/de/web/css/css_conditional_rules/index.html create mode 100644 files/de/web/css/css_device_adaptation/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/index.html create mode 100644 files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html create mode 100644 files/de/web/css/css_fonts/index.html create mode 100644 files/de/web/css/css_generated_content/index.html create mode 100644 files/de/web/css/css_grid_layout/index.html create mode 100644 files/de/web/css/css_images/implementing_image_sprites_in_css/index.html create mode 100644 files/de/web/css/css_images/index.html create mode 100644 "files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" create mode 100644 files/de/web/css/css_lists_and_counters/index.html create mode 100644 "files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" create mode 100644 files/de/web/css/css_logical_properties/index.html create mode 100644 files/de/web/css/css_masken/index.html create mode 100644 "files/de/web/css/css_namensr\303\244ume/index.html" create mode 100644 files/de/web/css/css_positioning/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/index.html create mode 100644 files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html create mode 100644 files/de/web/css/css_referenz/index.html create mode 100644 files/de/web/css/css_ruby/index.html create mode 100644 files/de/web/css/css_selectors/index.html create mode 100644 files/de/web/css/css_shapes/index.html create mode 100644 files/de/web/css/css_table/index.html create mode 100644 files/de/web/css/css_text/index.html create mode 100644 files/de/web/css/css_textdekoration/index.html create mode 100644 files/de/web/css/css_transforms/css_transformationen_verwenden/index.html create mode 100644 files/de/web/css/css_transforms/index.html create mode 100644 files/de/web/css/css_transitions/index.html create mode 100644 files/de/web/css/css_typen/index.html create mode 100644 files/de/web/css/css_user_interface/index.html create mode 100644 files/de/web/css/css_writing_modes/index.html create mode 100644 files/de/web/css/cssom_view/index.html create mode 100644 files/de/web/css/cursor/index.html create mode 100644 files/de/web/css/custom-ident/index.html create mode 100644 files/de/web/css/direction/index.html create mode 100644 files/de/web/css/display/index.html create mode 100644 files/de/web/css/empty-cells/index.html create mode 100644 files/de/web/css/ersetztes_element/index.html create mode 100644 files/de/web/css/farben/index.html create mode 100644 files/de/web/css/filter/index.html create mode 100644 files/de/web/css/flex-flow/index.html create mode 100644 files/de/web/css/flex-grow/index.html create mode 100644 files/de/web/css/flex-shrink/index.html create mode 100644 files/de/web/css/flex-wrap/index.html create mode 100644 files/de/web/css/float/index.html create mode 100644 files/de/web/css/font-family/index.html create mode 100644 files/de/web/css/font-feature-settings/index.html create mode 100644 files/de/web/css/font-size/index.html create mode 100644 files/de/web/css/font-style/index.html create mode 100644 files/de/web/css/font-variant/index.html create mode 100644 files/de/web/css/font-weight/index.html create mode 100644 files/de/web/css/font/index.html create mode 100644 files/de/web/css/frequency/index.html create mode 100644 files/de/web/css/gradient/index.html create mode 100644 files/de/web/css/grid-gap/index.html create mode 100644 files/de/web/css/grid-template-areas/index.html create mode 100644 files/de/web/css/grid/index.html create mode 100644 files/de/web/css/height/index.html create mode 100644 files/de/web/css/hyphens/index.html create mode 100644 files/de/web/css/id-selektoren/index.html create mode 100644 files/de/web/css/image-orientation/index.html create mode 100644 files/de/web/css/image-rendering/index.html create mode 100644 files/de/web/css/image/index.html create mode 100644 files/de/web/css/index.html create mode 100644 files/de/web/css/index/index.html create mode 100644 files/de/web/css/inherit/index.html create mode 100644 files/de/web/css/initial/index.html create mode 100644 files/de/web/css/initialwert/index.html create mode 100644 files/de/web/css/integer/index.html create mode 100644 files/de/web/css/justify-content/index.html create mode 100644 files/de/web/css/kindselektoren/index.html create mode 100644 files/de/web/css/klassenselektoren/index.html create mode 100644 files/de/web/css/kurzformat_eigenschaft/index.html create mode 100644 files/de/web/css/layout_mode/index.html create mode 100644 files/de/web/css/left/index.html create mode 100644 files/de/web/css/length/index.html create mode 100644 files/de/web/css/letter-spacing/index.html create mode 100644 files/de/web/css/line-break/index.html create mode 100644 files/de/web/css/linear-gradient()/index.html create mode 100644 files/de/web/css/list-style-image/index.html create mode 100644 files/de/web/css/list-style-position/index.html create mode 100644 files/de/web/css/list-style-type/index.html create mode 100644 files/de/web/css/list-style/index.html create mode 100644 files/de/web/css/margin-bottom/index.html create mode 100644 files/de/web/css/margin-left/index.html create mode 100644 files/de/web/css/margin-right/index.html create mode 100644 files/de/web/css/margin-top/index.html create mode 100644 files/de/web/css/margin/index.html create mode 100644 files/de/web/css/mask/index.html create mode 100644 files/de/web/css/max-height/index.html create mode 100644 files/de/web/css/max-width/index.html create mode 100644 files/de/web/css/media_queries/index.html create mode 100644 files/de/web/css/media_queries/using_media_queries/index.html create mode 100644 files/de/web/css/min-height/index.html create mode 100644 files/de/web/css/min-width/index.html create mode 100644 files/de/web/css/mix-blend-mode/index.html create mode 100644 files/de/web/css/motion_path/index.html create mode 100644 files/de/web/css/mozilla_extensions/index.html create mode 100644 files/de/web/css/none/index.html create mode 100644 files/de/web/css/normal/index.html create mode 100644 files/de/web/css/number/index.html create mode 100644 files/de/web/css/object-fit/index.html create mode 100644 files/de/web/css/object-position/index.html create mode 100644 files/de/web/css/opacity/index.html create mode 100644 files/de/web/css/order/index.html create mode 100644 files/de/web/css/orphans/index.html create mode 100644 files/de/web/css/outline-color/index.html create mode 100644 files/de/web/css/outline/index.html create mode 100644 files/de/web/css/overflow-clip-box/index.html create mode 100644 files/de/web/css/overflow/index.html create mode 100644 files/de/web/css/overscroll-behavior-y/index.html create mode 100644 files/de/web/css/overscroll-behavior/index.html create mode 100644 files/de/web/css/padding-bottom/index.html create mode 100644 files/de/web/css/padding-left/index.html create mode 100644 files/de/web/css/padding-right/index.html create mode 100644 files/de/web/css/padding-top/index.html create mode 100644 files/de/web/css/padding/index.html create mode 100644 files/de/web/css/page-break-after/index.html create mode 100644 files/de/web/css/page-break-before/index.html create mode 100644 files/de/web/css/page-break-inside/index.html create mode 100644 files/de/web/css/paged_media/index.html create mode 100644 files/de/web/css/percentage/index.html create mode 100644 files/de/web/css/pointer-events/index.html create mode 100644 files/de/web/css/position/index.html create mode 100644 files/de/web/css/position_value/index.html create mode 100644 files/de/web/css/property_template/index.html create mode 100644 files/de/web/css/pseudo-classes/index.html create mode 100644 files/de/web/css/pseudo-elements/index.html create mode 100644 files/de/web/css/quotes/index.html create mode 100644 files/de/web/css/ratio/index.html create mode 100644 files/de/web/css/resize/index.html create mode 100644 files/de/web/css/resolution/index.html create mode 100644 files/de/web/css/right/index.html create mode 100644 files/de/web/css/row-gap/index.html create mode 100644 files/de/web/css/ruby-align/index.html create mode 100644 files/de/web/css/scroll-behavior/index.html create mode 100644 files/de/web/css/shape/index.html create mode 100644 "files/de/web/css/spezifit\303\244t/index.html" create mode 100644 files/de/web/css/string/index.html create mode 100644 files/de/web/css/tab-size/index.html create mode 100644 files/de/web/css/table-layout/index.html create mode 100644 "files/de/web/css/tats\303\244chlicher_wert/index.html" create mode 100644 files/de/web/css/text-align-last/index.html create mode 100644 files/de/web/css/text-align/index.html create mode 100644 files/de/web/css/text-decoration-color/index.html create mode 100644 files/de/web/css/text-decoration-line/index.html create mode 100644 files/de/web/css/text-decoration/index.html create mode 100644 files/de/web/css/text-indent/index.html create mode 100644 files/de/web/css/text-justify/index.html create mode 100644 files/de/web/css/text-overflow/index.html create mode 100644 files/de/web/css/text-rendering/index.html create mode 100644 files/de/web/css/text-shadow/index.html create mode 100644 files/de/web/css/text-transform/index.html create mode 100644 files/de/web/css/text-underline-position/index.html create mode 100644 files/de/web/css/time/index.html create mode 100644 files/de/web/css/tools/cubic_bezier_generator/index.html create mode 100644 files/de/web/css/tools/index.html create mode 100644 files/de/web/css/tools/linear-gradient_generator/index.html create mode 100644 files/de/web/css/top/index.html create mode 100644 files/de/web/css/touch-action/index.html create mode 100644 files/de/web/css/transform-origin/index.html create mode 100644 files/de/web/css/transform/index.html create mode 100644 files/de/web/css/transition-property/index.html create mode 100644 files/de/web/css/transition/index.html create mode 100644 files/de/web/css/tutorials/index.html create mode 100644 files/de/web/css/type_selectors/index.html create mode 100644 files/de/web/css/unicode-bidi/index.html create mode 100644 files/de/web/css/universal_selectors/index.html create mode 100644 files/de/web/css/unset/index.html create mode 100644 files/de/web/css/url/index.html create mode 100644 files/de/web/css/vererbung/index.html create mode 100644 files/de/web/css/vertical-align/index.html create mode 100644 files/de/web/css/visibility/index.html create mode 100644 files/de/web/css/webkit_extensions/index.html create mode 100644 files/de/web/css/wertdefinitionssyntax/index.html create mode 100644 files/de/web/css/white-space/index.html create mode 100644 files/de/web/css/widows/index.html create mode 100644 files/de/web/css/width/index.html create mode 100644 files/de/web/css/word-break/index.html create mode 100644 files/de/web/css/word-spacing/index.html create mode 100644 files/de/web/css/word-wrap/index.html create mode 100644 files/de/web/css/z-index/index.html create mode 100644 files/de/web/demos_of_open_web_technologies/index.html create mode 100644 files/de/web/events/change/index.html create mode 100644 files/de/web/events/domcontentloaded/index.html create mode 100644 files/de/web/events/index.html create mode 100644 files/de/web/events/load/index.html create mode 100644 files/de/web/events/readystatechange/index.html create mode 100644 files/de/web/guide/ajax/erste_schritte/index.html create mode 100644 files/de/web/guide/ajax/index.html create mode 100644 files/de/web/guide/css/getting_started/farbe/index.html create mode 100644 files/de/web/guide/css/getting_started/index.html create mode 100644 files/de/web/guide/css/getting_started/kaskadierung_und_vererbung/index.html create mode 100644 files/de/web/guide/css/getting_started/lesbares_css/index.html create mode 100644 files/de/web/guide/css/getting_started/selektoren/index.html create mode 100644 files/de/web/guide/css/getting_started/textstyles/index.html create mode 100644 files/de/web/guide/css/getting_started/was_ist_css/index.html create mode 100644 files/de/web/guide/css/getting_started/why_use_css/index.html create mode 100644 files/de/web/guide/css/getting_started/wie_css_funktioniert/index.html create mode 100644 files/de/web/guide/css/scaling_background_images/index.html create mode 100644 files/de/web/guide/dom/index.html create mode 100644 files/de/web/guide/dom/manipulating_the_browser_history/index.html create mode 100644 files/de/web/guide/events/creating_and_triggering_events/index.html create mode 100644 files/de/web/guide/events/index.html create mode 100644 files/de/web/guide/graphics/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/basic_animations/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/bilder/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/drawing_text/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/grundlagen/index.html create mode 100644 files/de/web/guide/html/canvas_tutorial/index.html create mode 100644 files/de/web/guide/html/content_editable/index.html create mode 100644 files/de/web/guide/html/inhaltskategorien/index.html create mode 100644 files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/de/web/guide/index.html create mode 100644 files/de/web/html/applying_color/index.html create mode 100644 files/de/web/html/attributes/index.html create mode 100644 files/de/web/html/block-level_elemente/index.html create mode 100644 files/de/web/html/canvas/index.html create mode 100644 files/de/web/html/element/a/index.html create mode 100644 files/de/web/html/element/abbr/index.html create mode 100644 files/de/web/html/element/acronym/index.html create mode 100644 files/de/web/html/element/address/index.html create mode 100644 files/de/web/html/element/applet/index.html create mode 100644 files/de/web/html/element/area/index.html create mode 100644 files/de/web/html/element/article/index.html create mode 100644 files/de/web/html/element/aside/index.html create mode 100644 files/de/web/html/element/b/index.html create mode 100644 files/de/web/html/element/base/index.html create mode 100644 files/de/web/html/element/bdi/index.html create mode 100644 files/de/web/html/element/bdo/index.html create mode 100644 files/de/web/html/element/bgsound/index.html create mode 100644 files/de/web/html/element/big/index.html create mode 100644 files/de/web/html/element/blink/index.html create mode 100644 files/de/web/html/element/blockquote/index.html create mode 100644 files/de/web/html/element/body/index.html create mode 100644 files/de/web/html/element/br/index.html create mode 100644 files/de/web/html/element/canvas/index.html create mode 100644 files/de/web/html/element/caption/index.html create mode 100644 files/de/web/html/element/center/index.html create mode 100644 files/de/web/html/element/cite/index.html create mode 100644 files/de/web/html/element/code/index.html create mode 100644 files/de/web/html/element/col/index.html create mode 100644 files/de/web/html/element/data/index.html create mode 100644 files/de/web/html/element/datalist/index.html create mode 100644 files/de/web/html/element/dd/index.html create mode 100644 files/de/web/html/element/del/index.html create mode 100644 files/de/web/html/element/details/index.html create mode 100644 files/de/web/html/element/dialog/index.html create mode 100644 files/de/web/html/element/dir/index.html create mode 100644 files/de/web/html/element/div/index.html create mode 100644 files/de/web/html/element/dl/index.html create mode 100644 files/de/web/html/element/dt/index.html create mode 100644 files/de/web/html/element/em/index.html create mode 100644 files/de/web/html/element/embed/index.html create mode 100644 files/de/web/html/element/fieldset/index.html create mode 100644 files/de/web/html/element/font/index.html create mode 100644 files/de/web/html/element/footer/index.html create mode 100644 files/de/web/html/element/frame/index.html create mode 100644 files/de/web/html/element/h1-h6/index.html create mode 100644 files/de/web/html/element/head/index.html create mode 100644 files/de/web/html/element/header/index.html create mode 100644 files/de/web/html/element/hr/index.html create mode 100644 files/de/web/html/element/html/index.html create mode 100644 files/de/web/html/element/i/index.html create mode 100644 files/de/web/html/element/iframe/index.html create mode 100644 files/de/web/html/element/image/index.html create mode 100644 files/de/web/html/element/img/index.html create mode 100644 files/de/web/html/element/index.html create mode 100644 files/de/web/html/element/input/button/index.html create mode 100644 files/de/web/html/element/input/checkbox/index.html create mode 100644 files/de/web/html/element/input/index.html create mode 100644 files/de/web/html/element/ins/index.html create mode 100644 files/de/web/html/element/legend/index.html create mode 100644 files/de/web/html/element/li/index.html create mode 100644 files/de/web/html/element/link/index.html create mode 100644 files/de/web/html/element/main/index.html create mode 100644 files/de/web/html/element/map/index.html create mode 100644 files/de/web/html/element/marquee/index.html create mode 100644 files/de/web/html/element/nav/index.html create mode 100644 files/de/web/html/element/noembed/index.html create mode 100644 files/de/web/html/element/noscript/index.html create mode 100644 files/de/web/html/element/object/index.html create mode 100644 files/de/web/html/element/ol/index.html create mode 100644 files/de/web/html/element/optgroup/index.html create mode 100644 files/de/web/html/element/option/index.html create mode 100644 files/de/web/html/element/p/index.html create mode 100644 files/de/web/html/element/picture/index.html create mode 100644 files/de/web/html/element/pre/index.html create mode 100644 files/de/web/html/element/progress/index.html create mode 100644 files/de/web/html/element/q/index.html create mode 100644 files/de/web/html/element/s/index.html create mode 100644 files/de/web/html/element/section/index.html create mode 100644 files/de/web/html/element/shadow/index.html create mode 100644 files/de/web/html/element/strong/index.html create mode 100644 files/de/web/html/element/summary/index.html create mode 100644 files/de/web/html/element/table/index.html create mode 100644 files/de/web/html/element/td/index.html create mode 100644 files/de/web/html/element/template/index.html create mode 100644 files/de/web/html/element/th/index.html create mode 100644 files/de/web/html/element/time/index.html create mode 100644 files/de/web/html/element/title/index.html create mode 100644 files/de/web/html/element/tr/index.html create mode 100644 files/de/web/html/element/tt/index.html create mode 100644 files/de/web/html/element/u/index.html create mode 100644 files/de/web/html/element/ul/index.html create mode 100644 files/de/web/html/element/var/index.html create mode 100644 files/de/web/html/element/video/index.html create mode 100644 files/de/web/html/globale_attribute/accesskey/index.html create mode 100644 files/de/web/html/globale_attribute/autocapitalize/index.html create mode 100644 files/de/web/html/globale_attribute/class/index.html create mode 100644 files/de/web/html/globale_attribute/contenteditable/index.html create mode 100644 files/de/web/html/globale_attribute/dir/index.html create mode 100644 files/de/web/html/globale_attribute/draggable/index.html create mode 100644 files/de/web/html/globale_attribute/dropzone/index.html create mode 100644 files/de/web/html/globale_attribute/hidden/index.html create mode 100644 files/de/web/html/globale_attribute/id/index.html create mode 100644 files/de/web/html/globale_attribute/index.html create mode 100644 files/de/web/html/globale_attribute/inputmode/index.html create mode 100644 files/de/web/html/globale_attribute/is/index.html create mode 100644 files/de/web/html/globale_attribute/kontextmenu/index.html create mode 100644 files/de/web/html/globale_attribute/lang/index.html create mode 100644 files/de/web/html/globale_attribute/style/index.html create mode 100644 files/de/web/html/globale_attribute/tabindex/index.html create mode 100644 files/de/web/html/globale_attribute/title/index.html create mode 100644 files/de/web/html/globale_attribute/translate/index.html create mode 100644 files/de/web/html/html5/html5_element_list/index.html create mode 100644 files/de/web/html/html5/index.html create mode 100644 files/de/web/html/index.html create mode 100644 files/de/web/html/inline_elemente/index.html create mode 100644 files/de/web/html/referenz/index.html create mode 100644 files/de/web/html/using_the_application_cache/index.html create mode 100644 files/de/web/http/basics_of_http/identifying_resources_on_the_web/index.html create mode 100644 files/de/web/http/basics_of_http/index.html create mode 100644 files/de/web/http/caching_faq/index.html create mode 100644 files/de/web/http/cors/errors/corsdidnotsucceed/index.html create mode 100644 files/de/web/http/cors/errors/corsfehlenderallowheaderauspreflight/index.html create mode 100644 files/de/web/http/cors/errors/corsfehltquelleerlauben/index.html create mode 100644 files/de/web/http/cors/errors/corsrequestnothttp/index.html create mode 100644 files/de/web/http/cors/errors/index.html create mode 100644 files/de/web/http/cors/index.html create mode 100644 files/de/web/http/headers/accept/index.html create mode 100644 files/de/web/http/headers/age/index.html create mode 100644 files/de/web/http/headers/cache-control/index.html create mode 100644 files/de/web/http/headers/connection/index.html create mode 100644 files/de/web/http/headers/cookie/index.html create mode 100644 files/de/web/http/headers/dnt/index.html create mode 100644 files/de/web/http/headers/expect-ct/index.html create mode 100644 files/de/web/http/headers/expires/index.html create mode 100644 files/de/web/http/headers/index.html create mode 100644 files/de/web/http/headers/referer/index.html create mode 100644 files/de/web/http/headers/server/index.html create mode 100644 files/de/web/http/headers/set-cookie/index.html create mode 100644 files/de/web/http/headers/set-cookie/samesite/index.html create mode 100644 files/de/web/http/headers/tk/index.html create mode 100644 files/de/web/http/headers/user-agent/index.html create mode 100644 files/de/web/http/headers/x-content-type-options/index.html create mode 100644 files/de/web/http/headers/x-frame-options/index.html create mode 100644 files/de/web/http/index.html create mode 100644 files/de/web/http/methods/connect/index.html create mode 100644 files/de/web/http/methods/delete/index.html create mode 100644 files/de/web/http/methods/get/index.html create mode 100644 files/de/web/http/methods/index.html create mode 100644 files/de/web/http/status/100/index.html create mode 100644 files/de/web/http/status/200/index.html create mode 100644 files/de/web/http/status/201/index.html create mode 100644 files/de/web/http/status/302/index.html create mode 100644 files/de/web/http/status/304/index.html create mode 100644 files/de/web/http/status/400/index.html create mode 100644 files/de/web/http/status/401/index.html create mode 100644 files/de/web/http/status/403/index.html create mode 100644 files/de/web/http/status/404/index.html create mode 100644 files/de/web/http/status/409/index.html create mode 100644 files/de/web/http/status/410/index.html create mode 100644 files/de/web/http/status/414/index.html create mode 100644 files/de/web/http/status/418/index.html create mode 100644 files/de/web/http/status/500/index.html create mode 100644 files/de/web/http/status/503/index.html create mode 100644 files/de/web/http/status/504/index.html create mode 100644 files/de/web/http/status/505/index.html create mode 100644 files/de/web/http/status/511/index.html create mode 100644 files/de/web/http/status/index.html create mode 100644 files/de/web/index.html create mode 100644 files/de/web/javascript/about_javascript/index.html create mode 100644 "files/de/web/javascript/aufz\303\244hlbarkeit_und_zugeh\303\266rigkeit_von_eigenschaften/index.html" create mode 100644 files/de/web/javascript/closures/index.html create mode 100644 files/de/web/javascript/datenstrukturen/index.html create mode 100644 files/de/web/javascript/eine_wiedereinfuehrung_in_javascript/index.html create mode 100644 "files/de/web/javascript/einf\303\274hrung_in_den_gebrauch_von_xpath_in_javascript/index.html" create mode 100644 files/de/web/javascript/eventloop/index.html create mode 100644 files/de/web/javascript/guide/ausdruecke_und_operatoren/index.html create mode 100644 "files/de/web/javascript/guide/einf\303\274hrung/index.html" create mode 100644 files/de/web/javascript/guide/feinheiten_des_objektmodells/index.html create mode 100644 files/de/web/javascript/guide/funktionen/index.html create mode 100644 files/de/web/javascript/guide/grammatik_und_typen/index.html create mode 100644 files/de/web/javascript/guide/index.html create mode 100644 files/de/web/javascript/guide/indexed_collections/index.html create mode 100644 files/de/web/javascript/guide/keyed_collections/index.html create mode 100644 files/de/web/javascript/guide/kontrollfluss_und_fehlerbehandlung/index.html create mode 100644 files/de/web/javascript/guide/meta_programming/index.html create mode 100644 files/de/web/javascript/guide/mit_objekten_arbeiten/index.html create mode 100644 files/de/web/javascript/guide/modules/index.html create mode 100644 files/de/web/javascript/guide/numbers_and_dates/index.html create mode 100644 files/de/web/javascript/guide/regular_expressions/index.html create mode 100644 files/de/web/javascript/guide/schleifen_und_iterationen/index.html create mode 100644 files/de/web/javascript/guide/textformatierung/index.html create mode 100644 files/de/web/javascript/guide/using_promises/index.html create mode 100644 files/de/web/javascript/index.html create mode 100644 files/de/web/javascript/inheritance_and_the_prototype_chain/index.html create mode 100644 files/de/web/javascript/introduction_to_object-oriented_javascript/index.html create mode 100644 files/de/web/javascript/javascript_technologieuebersicht/index.html create mode 100644 files/de/web/javascript/language_resources/index.html create mode 100644 files/de/web/javascript/reference/about/index.html create mode 100644 files/de/web/javascript/reference/fehler/already_has_pragma/index.html create mode 100644 files/de/web/javascript/reference/fehler/array_sort_argument/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_octal/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_radix/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_regexp_flag/index.html create mode 100644 files/de/web/javascript/reference/fehler/bad_return_or_yield/index.html create mode 100644 files/de/web/javascript/reference/fehler/called_on_incompatible_type/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_access_lexical_declaration_before_init/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_access_property/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_define_property_object_not_extensible/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_delete/index.html create mode 100644 files/de/web/javascript/reference/fehler/cant_redefine_property/index.html create mode 100644 files/de/web/javascript/reference/fehler/cyclic_object_value/index.html create mode 100644 files/de/web/javascript/reference/fehler/dead_object/index.html create mode 100644 files/de/web/javascript/reference/fehler/delete_in_strict_mode/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_caller_or_arguments_usage/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_expression_closures/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_octal/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_source_map_pragma/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_string_generics/index.html create mode 100644 files/de/web/javascript/reference/fehler/deprecated_tolocaleformat/index.html create mode 100644 files/de/web/javascript/reference/fehler/equal_as_assign/index.html create mode 100644 files/de/web/javascript/reference/fehler/for-each-in_loops_are_deprecated/index.html create mode 100644 files/de/web/javascript/reference/fehler/getter_only/index.html create mode 100644 files/de/web/javascript/reference/fehler/identifier_after_number/index.html create mode 100644 files/de/web/javascript/reference/fehler/illegal_character/index.html create mode 100644 files/de/web/javascript/reference/fehler/in_operator_no_object/index.html create mode 100644 files/de/web/javascript/reference/fehler/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_array_length/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_assignment_left-hand_side/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_const_assignment/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_date/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_for-in_initializer/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_for-of_initializer/index.html create mode 100644 files/de/web/javascript/reference/fehler/invalid_right_hand_side_instanceof_operand/index.html create mode 100644 files/de/web/javascript/reference/fehler/is_not_iterable/index.html create mode 100644 files/de/web/javascript/reference/fehler/json_bad_parse/index.html create mode 100644 files/de/web/javascript/reference/fehler/malformed_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/fehler/malformed_uri/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_bracket_after_list/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_colon_after_property_id/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_function_body/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_curly_after_property_list/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_formal_parameter/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_initializer_in_const/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_name_after_dot_operator/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_argument_list/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_parenthesis_after_condition/index.html create mode 100644 files/de/web/javascript/reference/fehler/missing_semicolon_before_statement/index.html create mode 100644 files/de/web/javascript/reference/fehler/more_arguments_needed/index.html create mode 100644 files/de/web/javascript/reference/fehler/negative_repetition_count/index.html create mode 100644 files/de/web/javascript/reference/fehler/no_non-null_object/index.html create mode 100644 files/de/web/javascript/reference/fehler/no_properties/index.html create mode 100644 files/de/web/javascript/reference/fehler/no_variable_name/index.html create mode 100644 files/de/web/javascript/reference/fehler/non_configurable_array_element/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_a_codepoint/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_a_constructor/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_a_function/index.html create mode 100644 files/de/web/javascript/reference/fehler/not_defined/index.html create mode 100644 files/de/web/javascript/reference/fehler/precision_range/index.html create mode 100644 files/de/web/javascript/reference/fehler/property_access_denied/index.html create mode 100644 files/de/web/javascript/reference/fehler/read-only/index.html create mode 100644 files/de/web/javascript/reference/fehler/redeclared_parameter/index.html create mode 100644 files/de/web/javascript/reference/fehler/reduce_of_empty_array_with_no_initial_value/index.html create mode 100644 files/de/web/javascript/reference/fehler/reserved_identifier/index.html create mode 100644 files/de/web/javascript/reference/fehler/resulting_string_too_large/index.html create mode 100644 files/de/web/javascript/reference/fehler/stmt_after_return/index.html create mode 100644 files/de/web/javascript/reference/fehler/strict_non_simple_params/index.html create mode 100644 files/de/web/javascript/reference/fehler/too_much_recursion/index.html create mode 100644 files/de/web/javascript/reference/fehler/typed_array_invalid_arguments/index.html create mode 100644 files/de/web/javascript/reference/fehler/undeclared_var/index.html create mode 100644 files/de/web/javascript/reference/fehler/undefined_prop/index.html create mode 100644 files/de/web/javascript/reference/fehler/unexpected_token/index.html create mode 100644 files/de/web/javascript/reference/fehler/unexpected_type/index.html create mode 100644 files/de/web/javascript/reference/fehler/unnamed_function_statement/index.html create mode 100644 files/de/web/javascript/reference/fehler/unterminated_string_literal/index.html create mode 100644 files/de/web/javascript/reference/fehler/var_hides_argument/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/callee/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/index.html create mode 100644 files/de/web/javascript/reference/functions/arguments/length/index.html create mode 100644 files/de/web/javascript/reference/functions/default_parameters/index.html create mode 100644 files/de/web/javascript/reference/functions/get/index.html create mode 100644 files/de/web/javascript/reference/functions/index.html create mode 100644 files/de/web/javascript/reference/functions/methoden_definitionen/index.html create mode 100644 files/de/web/javascript/reference/functions/pfeilfunktionen/index.html create mode 100644 files/de/web/javascript/reference/functions/rest_parameter/index.html create mode 100644 files/de/web/javascript/reference/functions/set/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/@@species/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/@@unscopables/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/concat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/copywithin/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/entries/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/every/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/fill/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/filter/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/find/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/findindex/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/flat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/flatmap/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/foreach/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/from/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/includes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/indexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/isarray/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/join/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/keys/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/lastindexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/length/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/map/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/observe/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/of/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/pop/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/prototypen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/push/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/reduce/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/reduceright/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/reverse/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/shift/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/slice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/some/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/sort/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/splice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/tolocalestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/unobserve/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/unshift/index.html create mode 100644 files/de/web/javascript/reference/global_objects/array/values/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/@@species/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/bytelength/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/isview/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/slice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/arraybuffer/transfer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/index.html create mode 100644 files/de/web/javascript/reference/global_objects/asyncfunction/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/add/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/and/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/compareexchange/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/exchange/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/islockfree/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/load/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/or/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/store/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/sub/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/wait/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/wake/index.html create mode 100644 files/de/web/javascript/reference/global_objects/atomics/xor/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/boolean/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/buffer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/bytelength/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/byteoffset/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getfloat32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getfloat64/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/getuint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setfloat32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setfloat64/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint16/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/dataview/setuint8/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/@@toprimitive/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getday/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/gethours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/gettime/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/gettimezoneoffset/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcdate/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcday/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutchours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getutcseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/getyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/now/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/parse/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setdate/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/sethours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/settime/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcdate/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcfullyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutchours/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcmilliseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcminutes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcmonth/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setutcseconds/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/setyear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/todatestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/togmtstring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/toisostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tojson/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaledatestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaleformat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocalestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tolocaletimestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/totimestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/toutcstring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/utc/index.html create mode 100644 files/de/web/javascript/reference/global_objects/date/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/decodeuricomponent/index.html create mode 100644 files/de/web/javascript/reference/global_objects/encodeuri/index.html create mode 100644 files/de/web/javascript/reference/global_objects/encodeuricomponent/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/columnnumber/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/filename/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/linenumber/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/message/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/name/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/stack/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/error/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/escape/index.html create mode 100644 files/de/web/javascript/reference/global_objects/evalerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/evalerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/float32array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/float64array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/apply/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/arguments/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/arity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/bind/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/call/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/caller/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/displayname/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/isgenerator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/length/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/name/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/function/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/next/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/return/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generator/throw/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/index.html create mode 100644 files/de/web/javascript/reference/global_objects/generatorfunction/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/globalthis/index.html create mode 100644 files/de/web/javascript/reference/global_objects/index.html create mode 100644 files/de/web/javascript/reference/global_objects/infinity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/int16array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/int32array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/int8array/index.html create mode 100644 files/de/web/javascript/reference/global_objects/internalerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/internalerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/compare/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/resolvedoptions/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/collator/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/format/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/formattoparts/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/resolvedoptions/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/datetimeformat/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/getcanonicallocales/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/format/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/numberformat/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/pluralrules/index.html create mode 100644 files/de/web/javascript/reference/global_objects/intl/pluralrules/supportedlocalesof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/isfinite/index.html create mode 100644 files/de/web/javascript/reference/global_objects/isnan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/json/index.html create mode 100644 files/de/web/javascript/reference/global_objects/json/parse/index.html create mode 100644 files/de/web/javascript/reference/global_objects/json/stringify/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/@@iterator/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/@@species/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/@@tostringtag/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/clear/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/delete/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/entries/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/foreach/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/get/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/has/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/keys/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/set/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/size/index.html create mode 100644 files/de/web/javascript/reference/global_objects/map/values/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/acos/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/acosh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/asin/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/asinh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/atan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/atan2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/cbrt/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/ceil/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/clz32/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/cos/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/cosh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/e/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/exp/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/expm1/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/floor/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/fround/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/hypot/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/imul/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/ln10/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/ln2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log10/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log10e/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log1p/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/log2e/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/math.random/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/max/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/min/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/pi/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/pow/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/round/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sign/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sin/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sinh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt1_2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/sqrt2/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/tan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/tanh/index.html create mode 100644 files/de/web/javascript/reference/global_objects/math/trunc/index.html create mode 100644 files/de/web/javascript/reference/global_objects/nan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/null/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/epsilon/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/isfinite/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/isinteger/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/isnan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/issafeinteger/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/max_safe_integer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/max_value/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/min_safe_integer/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/min_value/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/nan/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/negative_infinity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/parsefloat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/parseint/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/positive_infinity/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/toexponential/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tofixed/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tointeger/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tolocalestring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/toprecision/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/tostring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/number/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/assign/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/constructor/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/create/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/defineproperty/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/entries/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/freeze/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/getownpropertynames/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/getprototypeof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/hasownproperty/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/is/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/isextensible/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/isfrozen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/keys/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/observe/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/proto/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/tosource/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/valueof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/object/values/index.html create mode 100644 files/de/web/javascript/reference/global_objects/parsefloat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/parseint/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/all/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/finally/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/race/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/reject/index.html create mode 100644 files/de/web/javascript/reference/global_objects/promise/then/index.html create mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/reflect/apply/index.html create mode 100644 files/de/web/javascript/reference/global_objects/reflect/construct/index.html create mode 100644 files/de/web/javascript/reference/global_objects/reflect/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/flags/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/input/index.html create mode 100644 files/de/web/javascript/reference/global_objects/regexp/test/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/add/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/delete/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/has/index.html create mode 100644 files/de/web/javascript/reference/global_objects/set/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/charat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/concat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/endswith/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/fromcharcode/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/includes/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/indexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/lastindexof/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/length/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/match/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/raw/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/repeat/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/replace/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/slice/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/split/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/startswith/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/substr/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/substring/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/suchen/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/tolowercase/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/touppercase/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trim/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimleft/index.html create mode 100644 files/de/web/javascript/reference/global_objects/string/trimright/index.html create mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/syntaxerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/typeerror/index.html create mode 100644 files/de/web/javascript/reference/global_objects/typeerror/prototype/index.html create mode 100644 files/de/web/javascript/reference/global_objects/undefined/index.html create mode 100644 files/de/web/javascript/reference/global_objects/unescape/index.html create mode 100644 files/de/web/javascript/reference/global_objects/uneval/index.html create mode 100644 files/de/web/javascript/reference/global_objects/webassembly/compile/index.html create mode 100644 files/de/web/javascript/reference/global_objects/webassembly/compilestreaming/index.html create mode 100644 files/de/web/javascript/reference/global_objects/webassembly/index.html create mode 100644 files/de/web/javascript/reference/index.html create mode 100644 files/de/web/javascript/reference/iteration_protocols/index.html create mode 100644 files/de/web/javascript/reference/klassen/constructor/index.html create mode 100644 files/de/web/javascript/reference/klassen/extends/index.html create mode 100644 files/de/web/javascript/reference/klassen/index.html create mode 100644 files/de/web/javascript/reference/klassen/static/index.html create mode 100644 files/de/web/javascript/reference/lexical_grammar/index.html create mode 100644 files/de/web/javascript/reference/operators/addition/index.html create mode 100644 files/de/web/javascript/reference/operators/array_comprehensions/index.html create mode 100644 files/de/web/javascript/reference/operators/async_function/index.html create mode 100644 files/de/web/javascript/reference/operators/await/index.html create mode 100644 files/de/web/javascript/reference/operators/bitwise_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/class/index.html create mode 100644 files/de/web/javascript/reference/operators/comma_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/conditional_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/dekrement/index.html create mode 100644 files/de/web/javascript/reference/operators/delete/index.html create mode 100644 files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html create mode 100644 files/de/web/javascript/reference/operators/expression_closures/index.html create mode 100644 files/de/web/javascript/reference/operators/function/index.html create mode 100644 files/de/web/javascript/reference/operators/function_star_/index.html create mode 100644 files/de/web/javascript/reference/operators/generator_comprehensions/index.html create mode 100644 files/de/web/javascript/reference/operators/grouping/index.html create mode 100644 files/de/web/javascript/reference/operators/in/index.html create mode 100644 files/de/web/javascript/reference/operators/index.html create mode 100644 files/de/web/javascript/reference/operators/inkrement/index.html create mode 100644 files/de/web/javascript/reference/operators/instanceof/index.html create mode 100644 files/de/web/javascript/reference/operators/logische_operatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/modulo/index.html create mode 100644 files/de/web/javascript/reference/operators/new.target/index.html create mode 100644 files/de/web/javascript/reference/operators/new/index.html create mode 100644 files/de/web/javascript/reference/operators/objekt_initialisierer/index.html create mode 100644 files/de/web/javascript/reference/operators/operator_precedence/index.html create mode 100644 files/de/web/javascript/reference/operators/optionale_verkettung/index.html create mode 100644 files/de/web/javascript/reference/operators/pipeline_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/property_accessors/index.html create mode 100644 files/de/web/javascript/reference/operators/spread_operator/index.html create mode 100644 files/de/web/javascript/reference/operators/spread_syntax/index.html create mode 100644 files/de/web/javascript/reference/operators/super/index.html create mode 100644 files/de/web/javascript/reference/operators/this/index.html create mode 100644 files/de/web/javascript/reference/operators/typeof/index.html create mode 100644 files/de/web/javascript/reference/operators/vergleichsoperatoren/index.html create mode 100644 files/de/web/javascript/reference/operators/void/index.html create mode 100644 files/de/web/javascript/reference/operators/yield/index.html create mode 100644 files/de/web/javascript/reference/operators/yield_star_/index.html create mode 100644 files/de/web/javascript/reference/operators/zuweisungsoperator/index.html create mode 100644 files/de/web/javascript/reference/statements/async_function/index.html create mode 100644 files/de/web/javascript/reference/statements/block/index.html create mode 100644 files/de/web/javascript/reference/statements/break/index.html create mode 100644 files/de/web/javascript/reference/statements/class/index.html create mode 100644 files/de/web/javascript/reference/statements/const/index.html create mode 100644 files/de/web/javascript/reference/statements/continue/index.html create mode 100644 files/de/web/javascript/reference/statements/debugger/index.html create mode 100644 files/de/web/javascript/reference/statements/default/index.html create mode 100644 files/de/web/javascript/reference/statements/do...while/index.html create mode 100644 files/de/web/javascript/reference/statements/empty/index.html create mode 100644 files/de/web/javascript/reference/statements/export/index.html create mode 100644 files/de/web/javascript/reference/statements/for...in/index.html create mode 100644 files/de/web/javascript/reference/statements/for...of/index.html create mode 100644 files/de/web/javascript/reference/statements/for/index.html create mode 100644 files/de/web/javascript/reference/statements/for_each...in/index.html create mode 100644 files/de/web/javascript/reference/statements/function_star_/index.html create mode 100644 files/de/web/javascript/reference/statements/funktion/index.html create mode 100644 files/de/web/javascript/reference/statements/if...else/index.html create mode 100644 files/de/web/javascript/reference/statements/import/index.html create mode 100644 files/de/web/javascript/reference/statements/index.html create mode 100644 files/de/web/javascript/reference/statements/label/index.html create mode 100644 files/de/web/javascript/reference/statements/let/index.html create mode 100644 files/de/web/javascript/reference/statements/return/index.html create mode 100644 files/de/web/javascript/reference/statements/switch/index.html create mode 100644 files/de/web/javascript/reference/statements/throw/index.html create mode 100644 files/de/web/javascript/reference/statements/try...catch/index.html create mode 100644 files/de/web/javascript/reference/statements/var/index.html create mode 100644 files/de/web/javascript/reference/statements/while/index.html create mode 100644 files/de/web/javascript/reference/strict_mode/index.html create mode 100644 files/de/web/javascript/reference/template_strings/index.html create mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/index.html create mode 100644 files/de/web/javascript/reference/veraltete_und_abgeschaffte_features/the_legacy_iterator_protocol/index.html create mode 100644 files/de/web/javascript/speicherverwaltung/index.html create mode 100644 files/de/web/javascript/typed_arrays/index.html create mode 100644 files/de/web/javascript/vergleiche_auf_gleichheit_und_deren_verwendung/index.html create mode 100644 files/de/web/manifest/index.html create mode 100644 files/de/web/manifest/short_name/index.html create mode 100644 files/de/web/mathml/attribute/index.html create mode 100644 files/de/web/mathml/attribute/werte/index.html create mode 100644 files/de/web/mathml/beispiele/index.html create mode 100644 files/de/web/mathml/beispiele/mathml_satz_des_pythagoras/index.html create mode 100644 files/de/web/mathml/beispiele/quadratische_gleichung/index.html create mode 100644 files/de/web/mathml/element/index.html create mode 100644 files/de/web/mathml/element/maction/index.html create mode 100644 files/de/web/mathml/element/math/index.html create mode 100644 files/de/web/mathml/element/menclose/index.html create mode 100644 files/de/web/mathml/element/merror/index.html create mode 100644 files/de/web/mathml/element/mfenced/index.html create mode 100644 files/de/web/mathml/element/mfrac/index.html create mode 100644 files/de/web/mathml/element/mi/index.html create mode 100644 files/de/web/mathml/element/mn/index.html create mode 100644 files/de/web/mathml/element/mo/index.html create mode 100644 files/de/web/mathml/element/mover/index.html create mode 100644 files/de/web/mathml/element/mpadded/index.html create mode 100644 files/de/web/mathml/element/mphantom/index.html create mode 100644 files/de/web/mathml/element/mroot/index.html create mode 100644 files/de/web/mathml/element/mrow/index.html create mode 100644 files/de/web/mathml/element/ms/index.html create mode 100644 files/de/web/mathml/element/mspace/index.html create mode 100644 files/de/web/mathml/element/msqrt/index.html create mode 100644 files/de/web/mathml/element/mstyle/index.html create mode 100644 files/de/web/mathml/element/msub/index.html create mode 100644 files/de/web/mathml/element/msubsup/index.html create mode 100644 files/de/web/mathml/element/msup/index.html create mode 100644 files/de/web/mathml/element/mtable/index.html create mode 100644 files/de/web/mathml/element/mtd/index.html create mode 100644 files/de/web/mathml/element/mtext/index.html create mode 100644 files/de/web/mathml/element/mtr/index.html create mode 100644 files/de/web/mathml/element/munder/index.html create mode 100644 files/de/web/mathml/element/munderover/index.html create mode 100644 files/de/web/mathml/index.html create mode 100644 files/de/web/performance/dns-prefetch/index.html create mode 100644 files/de/web/performance/index.html create mode 100644 files/de/web/progressive_web_apps/index.html create mode 100644 files/de/web/reference/api/index.html create mode 100644 files/de/web/reference/index.html create mode 100644 files/de/web/security/certificate_transparency/index.html create mode 100644 files/de/web/security/index.html create mode 100644 files/de/web/security/public_key_pinning/index.html create mode 100644 files/de/web/svg/attribute/class/index.html create mode 100644 files/de/web/svg/attribute/index.html create mode 100644 files/de/web/svg/attribute/preserveaspectratio/index.html create mode 100644 files/de/web/svg/element/animate/index.html create mode 100644 files/de/web/svg/element/circle/index.html create mode 100644 files/de/web/svg/element/foreignobject/index.html create mode 100644 files/de/web/svg/element/index.html create mode 100644 files/de/web/svg/element/path/index.html create mode 100644 files/de/web/svg/element/polygon/index.html create mode 100644 files/de/web/svg/element/rect/index.html create mode 100644 files/de/web/svg/element/svg/index.html create mode 100644 files/de/web/svg/element/textpath/index.html create mode 100644 files/de/web/svg/element/view/index.html create mode 100644 files/de/web/svg/index.html create mode 100644 files/de/web/svg/namespaces_crash_course/index.html create mode 100644 "files/de/web/svg/tutorial/einf\303\274hrung/index.html" create mode 100644 files/de/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/de/web/svg/tutorial/index.html create mode 100644 files/de/web/svg/tutorial/pfade/index.html create mode 100644 files/de/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/de/web/svg/tutorial/svg_schriftarten/index.html create mode 100644 files/de/web/svg/tutorial/tools_for_svg/index.html create mode 100644 files/de/web/web_components/custom_elements/index.html create mode 100644 files/de/web/web_components/index.html create mode 100644 files/de/web/web_components/using_custom_elements/index.html create mode 100644 files/de/web/webapi/index.html create mode 100644 files/de/web/webapi/verwenden_von_geolocation/index.html create mode 100644 files/de/web/xml/index.html create mode 100644 "files/de/web/xml/xml_einf\303\274hrung/index.html" create mode 100644 files/de/web/xslt/index.html create mode 100644 files/de/web_development/mobile/index.html create mode 100644 files/de/web_development/mobile/responsive_design/index.html create mode 100644 files/de/webentwicklung/index.html create mode 100644 files/de/websockets/index.html create mode 100644 files/de/websockets/writing_websocket_servers/index.html create mode 100644 files/de/xml_web_services/index.html create mode 100644 files/de/xpcom/http_request_header_setzen/index.html create mode 100644 files/de/xpcom/index.html create mode 100644 files/de/xpi/index.html create mode 100644 files/de/xpinstall/index.html create mode 100644 "files/de/xul_anwendungen_f\303\274r_firefox_1.5_anpassen/index.html" create mode 100644 files/de/xul_explorer/index.html create mode 100644 files/de/zones/index.html (limited to 'files/de') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt new file mode 100644 index 0000000000..7213b61764 --- /dev/null +++ b/files/de/_redirects.txt @@ -0,0 +1,606 @@ +# FROM-URL TO-URL +/de/docs/%C3%9Cber_das_Mozilla_Developer_Center /en-US/docs/Project:de/%C3%9Cber_das_Mozilla_Developer_Center +/de/docs/AJAX /de/docs/Web/Guide/AJAX +/de/docs/AJAX/Getting_Started /de/docs/AJAX/Einf%C3%BChrung +/de/docs/AJAX:Getting_Started /de/docs/AJAX/Einf%C3%BChrung +/de/docs/Apps/Progressiv /de/docs/Web/Progressive_web_apps +/de/docs/Apps/Progressiv/Introduction /de/docs/Web/Progressive_web_apps/Introduction +/de/docs/Barrierefreiheit /de/docs/Web/Barrierefreiheit +/de/docs/Barrierefreiheit/ARIA /de/docs/Web/Barrierefreiheit/ARIA +/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen /de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen +/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets /de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets +/de/docs/Barrierefreiheit/Webentwicklung /de/docs/Web/Barrierefreiheit/Webentwicklung +/de/docs/Bug-Entdecken_Leitfaden /de/docs/Richtlinien_zum_Schreiben_eines_Bugreports +/de/docs/Building_an_Extension /de/docs/Erweiterung_erstellen +/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/-moz-user-modify +/de/docs/CSS/-moz-user-select /de/docs/Web/CSS/-moz-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/Attributselektoren +/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_Boxmodell/Einf%C3%BChrung_in_das_CSS_Boxmodell +/de/docs/CSS/CSS_Reference/Property_Template /de/docs/Web/CSS/Property_Template +/de/docs/CSS/CSS_Unterst%C3%BCtzung /de/docs/Web/CSS/CSS_Unterst%C3%BCtzung +/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/Einf%C3%BChrung /de/docs/Web/Guide/CSS/Getting_started +/de/docs/CSS/Einheiten /de/docs/Web/CSS/Einheiten +/de/docs/CSS/Farben /de/docs/Web/CSS/Farben +/de/docs/CSS/Getting_Started /de/docs/Web/Guide/CSS/Getting_started +/de/docs/CSS/Getting_Started-weiterleitung-1 /de/docs/Web/Guide/CSS/Getting_started +/de/docs/CSS/Initialwert /de/docs/Web/CSS/Initialwert +/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/Vererbung +/de/docs/CSS/Vorlage /de/docs/Web/CSS/Property_Template +/de/docs/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Wertdefinitionssyntax +/de/docs/CSS/azimuth /de/docs/CSS/Refrerenz/Azimuth +/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/berechneter_Wert +/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/laenge /de/docs/Web/CSS/Einheiten +/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/text-shadow/text-shadow /en-US/docs/User:Elchi3/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/CSS/xx /de/docs/Web/CSS/xx +/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/-moz-user-modify +/de/docs/CSS:-moz-user-select /de/docs/Web/CSS/-moz-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_Boxmodell/Einf%C3%BChrung_in_das_CSS_Boxmodell +/de/docs/CSS:Einheiten /de/docs/Web/CSS/Einheiten +/de/docs/CSS:Farben /de/docs/Web/CSS/Farben +/de/docs/CSS:Vorlage /de/docs/Web/CSS/Property_Template +/de/docs/CSS:azimuth /de/docs/CSS/Refrerenz/Azimuth +/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:cue /de/docs/CSS/cue +/de/docs/CSS:cue-after /de/docs/CSS/cue-after +/de/docs/CSS:cue-before /de/docs/CSS/cue-before +/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:laenge /de/docs/Web/CSS/Einheiten +/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:pause /de/docs/CSS/pause +/de/docs/CSS:pause-after /de/docs/CSS/pause-after +/de/docs/CSS:pause-before /de/docs/CSS/pause-before +/de/docs/CSS:play-during /de/docs/CSS/play-during +/de/docs/CSS:position /de/docs/Web/CSS/position +/de/docs/CSS:speak /de/docs/CSS/speak +/de/docs/CSS:speak-header /de/docs/CSS/speak-header +/de/docs/CSS:speak-numeral /de/docs/CSS/speak-numeral +/de/docs/CSS:speak-punctuation /de/docs/CSS/speak-punctuation +/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:volume /de/docs/CSS/volume +/de/docs/CSS:width /de/docs/Web/CSS/width +/de/docs/CSS_Referenz /de/docs/Web/CSS/CSS_Referenz +/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/Code_snippets /de/docs/Codeschnipsel +/de/docs/Code_snippets/Scrollbar /de/docs/Codeschnipsel/Scrollbar +/de/docs/Code_snippets/Windows /de/docs/Codeschnipsel/Windows +/de/docs/Code_snippets:Tree /de/docs/Code_snippets/Tree +/de/docs/Creating_a_Skin_for_Firefox /de/docs/Theme_erstellen +/de/docs/Creating_a_Skin_for_Firefox/contents.rdf /de/docs/Theme_erstellen/contents.rdf +/de/docs/Creating_a_Skin_for_Firefox/install.rdf /de/docs/Theme_erstellen/install.rdf +/de/docs/Creating_a_Skin_for_Firefox:contents.rdf /de/docs/Theme_erstellen/contents.rdf +/de/docs/Creating_a_Skin_for_Firefox:install.rdf /de/docs/Theme_erstellen/install.rdf +/de/docs/DOM/File.fileName /de/docs/Web/API/File/fileName +/de/docs/DOM/File.fileSize /de/docs/Web/API/File/fileSize +/de/docs/DOM/File.getAsText /de/docs/Web/API/File/getAsText +/de/docs/DOM/File.lastModifiedDate /de/docs/Web/API/File/lastModifiedDate +/de/docs/DOM/File.name /de/docs/Web/API/File/name +/de/docs/DOM/File.size /de/docs/Web/API/Blob/size +/de/docs/DOM/File.type /de/docs/Web/API/File/type +/de/docs/DOM/Node /de/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/navigator.id /de/docs/Web/API/Navigator/id +/de/docs/DOM/window /de/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/WindowTimers/setTimeout +/de/docs/Developer_Guide /de/docs/Mozilla/Developer_guide +/de/docs/Developer_Guide/firefox_erfolgreich_erstellt /de/docs/Mozilla/Developer_guide/firefox_erfolgreich_erstellt +/de/docs/Eine_erste_Erweiterung_erstellen /de/docs/Erweiterung_erstellen +/de/docs/Einf%C3%BChrung_in_den_Gebrauch_von_XPath_in_JavaScript /de/docs/Web/JavaScript/Einf%C3%BChrung_in_den_Gebrauch_von_XPath_in_JavaScript +/de/docs/Einfacher_Thunderbird_build /de/docs/Mozilla/Developer_guide/Build_Anweisungen/Einfacher_Thunderbird_build +/de/docs/Einleitung /de/docs/Mozilla/Developer_guide/Einleitung +/de/docs/Entwicklerhandbuch /de/docs/Mozilla/Developer_guide +/de/docs/Entwicklerhandbuch/Build_Anweisungen /de/docs/Mozilla/Developer_guide/Build_Anweisungen +/de/docs/Entwicklerhandbuch/Build_Anweisungen/TOC /de/docs/Mozilla/Developer_guide/Build_Anweisungen/TOC +/de/docs/Entwicklerhandbuch/Build_Anweisungen/Windows_Build_Voraussetzungen /de/docs/Mozilla/Developer_guide/Build_Anweisungen/Windows_Build_Voraussetzungen +/de/docs/Entwicklerhandbuch/Quelltexte /de/docs/Mozilla/Developer_guide/Quelltexte +/de/docs/Entwicklerhandbuch/Quelltexte/Mozilla_Quelltexte_herunterladen /de/docs/Mozilla/Developer_guide/Quelltexte/Mozilla_Quelltexte_herunterladen +/de/docs/Entwicklerhandbuch/Quelltexte/Verzeichnis_struktur /de/docs/Mozilla/Developer_guide/Quelltexte/Verzeichnis_struktur +/de/docs/Error_Console /de/docs/Fehlerkonsole +/de/docs/Firefox_1.5_Beta /de/docs/Firefox_1.5_f%C3%BCr_Entwickler +/de/docs/HTML /de/docs/Web/HTML +/de/docs/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elemente +/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/h1-h6 +/de/docs/HTML/Element/h1-h6 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML/Element/h2 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML/Element/h3 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML/Element/h4 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML/Element/h5 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML/Element/h6 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML/Element/head /de/docs/Web/HTML/Element/head +/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/HTML5 /de/docs/Web/HTML/HTML5 +/de/docs/HTML/HTML5/HTML5_element_list /de/docs/Web/HTML/HTML5/HTML5_element_list +/de/docs/HTML/HTML5/liste_der_HTML5_elemente /de/docs/Web/HTML/HTML5/HTML5_element_list +/de/docs/HTML/HTML_Lernen_f%C3%BCr_Anf%C3%A4nger /de/docs/HTML/HTML_beginner +/de/docs/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elemente +/de/docs/HTML/Using_HTML5_audio_and_video /de/docs/Web/HTML/Using_HTML5_audio_and_video +/de/docs/HTML/Using_the_application_cache /de/docs/Web/HTML/Using_the_application_cache +/de/docs/HTML:Beispiele /de/docs/HTML/Beispiele +/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/h1-h6 +/de/docs/HTML:Element:h2 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML:Element:h3 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML:Element:h4 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML:Element:h5 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML:Element:h6 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/HTML:Element:head /de/docs/Web/HTML/Element/head +/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/HTTP_Request_Header_setzen /de/docs/XPCOM/HTTP_Request_Header_setzen +/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/Grundkonzepte_hinter_IndexedDB /de/docs/Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB +/de/docs/IndexedDB/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden +/de/docs/JavaScript /de/docs/Web/JavaScript +/de/docs/JavaScript/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript +/de/docs/JavaScript/Guide /de/docs/Web/JavaScript/Guide +/de/docs/JavaScript/Guide/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/Guide/%C3%9Cber_diese_Einf%C3%BChrung /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren +/de/docs/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures +/de/docs/JavaScript/Guide/Feinheiten_des_Objektmodells /de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells +/de/docs/JavaScript/Guide/Funktionen /de/docs/Web/JavaScript/Guide/Funktionen +/de/docs/JavaScript/Guide/Iteratoren_und_Generatoren /de/docs/Web/JavaScript/Guide/Iteratoren_und_Generatoren +/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten +/de/docs/JavaScript/Guide/Regular_Expressions /de/docs/Web/JavaScript/Guide/Regular_Expressions +/de/docs/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung +/de/docs/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/JavaScript/Guide/Über_diese_Einführung +/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/Grammatik_und_Typen +/de/docs/JavaScript/JQuery /de/docs/Web/JavaScript/JQuery +/de/docs/JavaScript/Javascript_lernen_f%C3%BCr_Anf%C3%A4nger /de/docs/Web/JavaScript/Guide +/de/docs/JavaScript/Language_Resources /de/docs/Web/JavaScript/Language_Resources +/de/docs/JavaScript/Neu_in_JavaScript /de/docs/Web/JavaScript/Neu_in_JavaScript +/de/docs/JavaScript/Neu_in_JavaScript/1.5 /de/docs/Web/JavaScript/Neu_in_JavaScript/1.5 +/de/docs/JavaScript/Neu_in_JavaScript/1.6 /de/docs/Web/JavaScript/Neu_in_JavaScript/1.6 +/de/docs/JavaScript/Neu_in_JavaScript/1.7 /de/docs/Web/JavaScript/Neu_in_JavaScript/1.7 +/de/docs/JavaScript/Neu_in_JavaScript/1.8 /de/docs/Web/JavaScript/Neu_in_JavaScript/1.8 +/de/docs/JavaScript/Neu_in_JavaScript/1.8.1 /de/docs/Web/JavaScript/Neu_in_JavaScript/1.8.1 +/de/docs/JavaScript/Neu_in_JavaScript/1.8.5 /de/docs/Web/JavaScript/Neu_in_JavaScript/1.8.5 +/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/Object/propertyIsEnumerable /de/docs/Web/JavaScript/Reference/Global_Objects/Object/propertyIsEnumerable +/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/Speicherverwaltung +/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/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/javascript_guide/%C3%9Cber_diese_Einf%C3%BChrung /de/docs/JavaScript/Guide/Über_diese_Einführung +/de/docs/JavaScript/javascript_guide/Anweisungen /de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung +/de/docs/JavaScript/javascript_guide/Ausdr%C3%BCcke_und_Operatoren /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren +/de/docs/JavaScript/javascript_guide/Funktionen /de/docs/Web/JavaScript/Guide/Funktionen +/de/docs/JavaScript/javascript_guide/Javascript_%C3%9Cbersicht /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten +/de/docs/JavaScript/javascript_guide/Regul%C3%A4re_Ausdr%C3%BCcke /de/docs/Web/JavaScript/Guide/Regular_Expressions +/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen +/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen +/de/docs/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/javascript_guide/ueber_javascript/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/ueber_JavaScript/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/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/MDC_style_guide/MDC_style_guide /en-US/docs/Project:En/MDC_style_guide +/de/docs/MDN/Contribute/Content /de/docs/MDN/Guidelines +/de/docs/MDN/Contribute/Content/Style_guide /de/docs/MDN/Guidelines/Style_guide +/de/docs/MDN/Contribute/Guidelines /de/docs/MDN/Guidelines +/de/docs/MDN/Contribute/Guidelines/Style_guide /de/docs/MDN/Guidelines/Style_guide +/de/docs/MDN/Contribute/Structures /de/docs/MDN/Structures +/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Kompatibilitaets_Tabellen +/de/docs/MDN/Erste_Schritte /de/docs/MDN/Contribute/Getting_started +/de/docs/MDN/Feedback /de/docs/MDN/Contribute/Feedback +/de/docs/MindTouch_Deki_bug_priorities /en-US/docs/User:Sheppy/MindTouch_Deki_bug_priorities +/de/docs/Mozilla_Quelltexte_herunterladen /de/docs/Mozilla/Developer_guide/Quelltexte/Mozilla_Quelltexte_herunterladen +/de/docs/Mozilla_entwickeln /de/docs/Mozilla/Developer_guide +/de/docs/Neuste_Version /de/docs/Mozilla/Developer_guide/Quelltexte/Mozilla_Quelltexte_herunterladen +/de/docs/Online_and_offline_events /de/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/de/docs/Profilmanager /de/docs/Profile_Manager +/de/docs/QA/Stress_Testing /de/docs/Qualit%C3%A4tssicherung/Stress_Testing +/de/docs/QA:Stress_Testing /de/docs/Qualit%C3%A4tssicherung/Stress_Testing +/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/Element/image /de/docs/Web/SVG/Element/image +/de/docs/SVG/Tutorial /de/docs/Web/SVG/Tutorial +/de/docs/SVG/Tutorial/Einf%C3%BChrung /de/docs/Web/SVG/Tutorial/Einf%C3%BChrung +/de/docs/SVG_In_HTML_Introduction /de/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction +/de/docs/SeaMonkey_mit_VC8_Express_Kompilieren /de/docs/Mozilla/Developer_guide/Build_Anweisungen/Windows_Build_Voraussetzungen +/de/docs/SeaMonkey_mit_VC_8_Express_Kompilieren /de/docs/Mozilla/Developer_guide/Build_Anweisungen/Windows_Build_Voraussetzungen +/de/docs/Simple_Firefox_build /de/docs/Mozilla/Developer_guide/Build_Anweisungen/Simple_Firefox_build +/de/docs/Simple_Firefox_build/Linux_and_MacOS_build_preparation /de/docs/Mozilla/Developer_guide/Build_Anweisungen/Simple_Firefox_build/Linux_and_MacOS_build_preparation +/de/docs/Suche_Plugins /de/docs/OpenSearch_Plugin_für_Firefox_erstellen +/de/docs/Theme_erstellen:Einf%C3%BChrung /de/docs/Theme_erstellen/Einf%C3%BChrung +/de/docs/Theme_erstellen:UUID /de/docs/Theme_erstellen/UUID +/de/docs/Theme_erstellen:contents.rdf /de/docs/Theme_erstellen/contents.rdf +/de/docs/Theme_erstellen:install.rdf /de/docs/Theme_erstellen/install.rdf +/de/docs/Themen /de/docs/Themes +/de/docs/Tools/Seiten_Inspektor/Style_panel /de/docs/Tools/Seiten_Inspektor +/de/docs/Verwenden_des_Cache_beim_Firefox_1.5 /de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) +/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/File/size /de/docs/Web/API/Blob/size +/de/docs/Web/API/MozMobileConnection.selectNetworkAutomatically /de/docs/Web/API/MozMobileConnection/selectNetworkAutomatically +/de/docs/Web/API/Node.cloneNode /de/docs/Web/API/Node/cloneNode +/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen +/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +/de/docs/Web/API/WebGL_API/Einf%C3%BChrung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL +/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen /de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen +/de/docs/Web/API/WebGL_API/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext +/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +/de/docs/Web/API/Window.alert /de/docs/Web/API/Window/alert +/de/docs/Web/API/Window/setTimeout /de/docs/Web/API/WindowTimers/setTimeout +/de/docs/Web/API/document.documentElement /de/docs/Web/API/Document/documentElement +/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-background-inline-policy /de/docs/Web/CSS/box-decoration-break +/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-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/-webkit-mask-position /de/docs/Web/CSS/mask-position +/de/docs/Web/CSS/Adjacent_sibling_combinator /de/docs/Web/CSS/Angrenzende_Geschwisterselektoren +/de/docs/Web/CSS/Adjacent_sibling_selectors /de/docs/Web/CSS/Angrenzende_Geschwisterselektoren +/de/docs/Web/CSS/Boxmodell /de/docs/Web/CSS/CSS_Boxmodell/Einf%C3%BChrung_in_das_CSS_Boxmodell +/de/docs/Web/CSS/CSS_Box_Model /de/docs/Web/CSS/CSS_Boxmodell +/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator +/de/docs/Web/CSS/CSS_Referenz/%3Cbasic-shape%3E /de/docs/Web/CSS/basic-shape +/de/docs/Web/CSS/CSS_Referenz/::backdrop /de/docs/Web/CSS/::backdrop +/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_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/Kindselektoren +/de/docs/Web/CSS/Getting_Started /de/docs/Web/Guide/CSS/Getting_started +/de/docs/Web/CSS/Pseudoklasse /de/docs/Web/CSS/Pseudo-classes +/de/docs/Web/CSS/Referenz /de/docs/Web/CSS/CSS_Referenz +/de/docs/Web/CSS/Replaced_element /de/docs/Web/CSS/ersetztes_Element +/de/docs/Web/CSS/attr /de/docs/Web/CSS/attr() +/de/docs/Web/CSS/azimuth /de/docs/CSS/Refrerenz/Azimuth +/de/docs/Web/CSS/calc /de/docs/Web/CSS/calc() +/de/docs/Web/CSS/hidden /de/docs/Web/CSS/visibility +/de/docs/Web/CSS/laenge /de/docs/Web/CSS/Einheiten +/de/docs/Web/CSS/linear-gradient /de/docs/Web/CSS/linear-gradient() +/de/docs/Web/CSS/marks /de/docs/Web/CSS/%40page/marks +/de/docs/Web/CSS/mq-boolean /de/docs/Web/CSS/Media_Queries/Using_media_queries +/de/docs/Web/CSS/text-shadow/text-shadow /en-US/docs/User:Elchi3/text-shadow +/de/docs/Web/CSS/visible /de/docs/Web/CSS/visibility +/de/docs/Web/Events/fullscreenchange /de/docs/Web/API/Document/fullscreenchange_event +/de/docs/Web/Events/popstate /de/docs/Web/API/Window/popstate_event +/de/docs/Web/Events/submit /de/docs/Web/API/HTMLFormElement/submit_event +/de/docs/Web/Events/touchstart /de/docs/Web/API/Element/touchstart_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/Getting_Started /de/docs/AJAX/Einf%C3%BChrung +/de/docs/Web/Guide/CSS /de/docs/Learn/CSS +/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen +/de/docs/Web/Guide/CSS/Flexible_boxes /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +/de/docs/Web/Guide/CSS/mehrere_Hintergr%C3%BCnde_verwenden /de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergr%C3%BCnde_in_CSS_verwenden +/de/docs/Web/Guide/HTML /de/docs/Learn/HTML +/de/docs/Web/Guide/HTML/Einf%C3%BChrung /de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML +/de/docs/Web/HTML/Element/Schaltfl%C3%A4che /de/docs/Web/HTML/Element/button +/de/docs/Web/HTML/Element/h1 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/Web/HTML/Element/h2 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/Web/HTML/Element/h3 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/Web/HTML/Element/h4 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/Web/HTML/Element/h5 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/Web/HTML/Element/h6 /de/docs/Web/HTML/Element/h1-h6 +/de/docs/Web/HTML/HTML_Lernen_f%C3%BCr_Anf%C3%A4nger /de/docs/HTML/HTML_beginner +/de/docs/Web/JavaScript/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/Datenstruktures /de/docs/Web/JavaScript/Datenstrukturen +/de/docs/Web/JavaScript/Getting_Started /de/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/de/docs/Web/JavaScript/Guide/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/Guide/%C3%9Cber_diese_Einf%C3%BChrung /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures +/de/docs/Web/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung +/de/docs/Web/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/JavaScript/Guide/Über_diese_Einführung +/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/Vergleiche_auf_Gleichheit_und_deren_Verwendung +/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/Grammatik_und_Typen +/de/docs/Web/JavaScript/Javascript_lernen_f%C3%BCr_Anf%C3%A4nger /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/Global_Objects/Array/flatten /de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat +/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/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype +/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/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +/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/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/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +/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/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/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/Properties_Index /de/docs/Web/JavaScript/Reference +/de/docs/Web/JavaScript/Tutorials /de/docs/Web/JavaScript +/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/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/javascript_guide/%C3%9Cber_diese_Einf%C3%BChrung /de/docs/JavaScript/Guide/Über_diese_Einführung +/de/docs/Web/JavaScript/javascript_guide/Ausdr%C3%BCcke_und_Operatoren /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren +/de/docs/Web/JavaScript/javascript_guide/Javascript_%C3%9Cbersicht /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen +/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen +/de/docs/Web/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/ueber_JavaScript/%C3%9Cber_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/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/3D-Objekte_mit_WebGL_erstellen +/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +/de/docs/Web/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +/de/docs/Web/WebGL/Einf%C3%BChrung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL +/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen /de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen +/de/docs/Web/WebGL/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext +/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +/de/docs/WebGL /de/docs/Web/API/WebGL_API +/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen +/de/docs/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +/de/docs/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +/de/docs/WebGL/Einf%C3%BChrung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Einf%C3%BChrung_in_WebGL +/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen /de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzuf%C3%BCgen +/de/docs/WebGL/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Hinzuf%C3%BCgen_von_2D_Inhalten_in_einen_WebGL-Kontext +/de/docs/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +/de/docs/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +/de/docs/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler +/de/docs/Werkzeuge /de/docs/Tools +/de/docs/XML_Einf%C3%BChrung /de/docs/Web/XML/XML_Einf%C3%BChrung +/de/docs/XSLT /de/docs/Web/XSLT +/de/docs/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen +/de/docs/en /en-US/ +/de/docs/install.rdf /de/docs/Installationsmanifest +/de/docs/meta:Help:External_editors /de/docs/meta/Help/External_editors diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json new file mode 100644 index 0000000000..7085c26dd5 --- /dev/null +++ b/files/de/_wikihistory.json @@ -0,0 +1,14744 @@ +{ + "Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)": { + "modified": "2019-03-24T00:04:22.542Z", + "contributors": [ + "wbamberg", + "fscholz", + "-=Renegade=-", + "Doozer" + ] + }, + "CSS3_Columns": { + "modified": "2019-03-24T00:05:49.925Z", + "contributors": [ + "SJW", + "fscholz", + "Mapag" + ] + }, + "DOM": { + "modified": "2019-03-24T00:03:18.662Z", + "contributors": [ + "TheNT87", + "Barfooz", + "ethertank", + "fscholz", + "Crash", + "Takenbot", + "M@d Man" + ] + }, + "DOM/Ueber_das_Document_Object_Model": { + "modified": "2019-12-23T07:48:22.460Z", + "contributors": [ + "Cerberooo", + "StevenS77", + "Barfooz" + ] + }, + "DOM_Inspector": { + "modified": "2020-07-16T22:36:24.131Z", + "contributors": [ + "wbamberg", + "nw520" + ] + }, + "DragDrop": { + "modified": "2019-03-23T23:26:04.264Z", + "contributors": [ + "drewp" + ] + }, + "Erweiterung_erstellen": { + "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" + ] + }, + "Erweiterungen_für_Firefox_3_aktualisieren": { + "modified": "2019-12-13T20:33:28.025Z", + "contributors": [ + "wbamberg", + "fscholz", + "Sheppy", + "Editmonkey", + "Jules Papillon" + ] + }, + "Farbverläufe_in_CSS": { + "modified": "2019-03-23T23:13:15.166Z", + "contributors": [ + "Bennyville", + "wizAmit", + "slayslot", + "Sebastianz", + "floEdelmann" + ] + }, + "Firefox_1.5_für_Entwickler": { + "modified": "2019-03-24T00:04:17.420Z", + "contributors": [ + "wbamberg", + "fscholz", + "Jules Papillon", + "Agoist", + "Umifa", + "Crash" + ] + }, + "Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests": { + "modified": "2019-10-30T20:00:38.264Z", + "contributors": [ + "sklicek" + ] + }, + "Firefox_3.5_für_Entwickler": { + "modified": "2019-03-24T00:04:29.361Z", + "contributors": [ + "wbamberg", + "Timmi", + "fscholz", + "niels" + ] + }, + "Firefox_3_für_Entwickler": { + "modified": "2019-03-24T00:04:33.617Z", + "contributors": [ + "wbamberg", + "fscholz", + "niels", + "Lukas Skywalker" + ] + }, + "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/404": { + "modified": "2019-03-23T22:25:58.962Z", + "contributors": [ + "cob", + "SebinNyshkim", + "PercyGitarrist" + ] + }, + "Glossary/502": { + "modified": "2019-03-23T22:25:51.694Z", + "contributors": [ + "Siphalor", + "PercyGitarrist" + ] + }, + "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/Abstraktion": { + "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/Algorithmus": { + "modified": "2019-03-23T22:10:22.994Z", + "contributors": [ + "herbmaier", + "Tyrandus" + ] + }, + "Glossary/Anweisung": { + "modified": "2019-04-20T19:38:11.191Z", + "contributors": [ + "GreenPepper", + "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/Asynchron": { + "modified": "2019-06-18T06:50:55.111Z", + "contributors": [ + "dbraun" + ] + }, + "Glossary/Attribute": { + "modified": "2019-03-23T22:12:44.567Z", + "contributors": [ + "CennoxX", + "Siphalor" + ] + }, + "Glossary/Bandbreite": { + "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-zugelassener-anfrage-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_Praeprozessor": { + "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/Codec": { + "modified": "2019-07-03T15:06:19.710Z", + "contributors": [ + "PercyGitarrist" + ] + }, + "Glossary/Compile_time": { + "modified": "2019-07-16T20:23:03.824Z", + "contributors": [ + "christianheinrichs" + ] + }, + "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/DTD": { + "modified": "2019-07-04T23:44:01.071Z", + "contributors": [ + "PercyGitarrist" + ] + }, + "Glossary/Data_structure": { + "modified": "2019-07-16T20:37:24.466Z", + "contributors": [ + "christianheinrichs" + ] + }, + "Glossary/Datenkapselung": { + "modified": "2020-09-30T06:05:42.392Z", + "contributors": [ + "Klingohle" + ] + }, + "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/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/Flex": { + "modified": "2020-07-03T19:19:31.495Z", + "contributors": [ + "duckymirror" + ] + }, + "Glossary/Flexbox": { + "modified": "2020-04-28T14:38:18.338Z", + "contributors": [ + "Klingohle" + ] + }, + "Glossary/Funktion_erster-Klasse": { + "modified": "2019-03-18T21:30:30.219Z", + "contributors": [ + "king-tom" + ] + }, + "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/Herstellerpräfix": { + "modified": "2019-03-23T22:29:22.756Z", + "contributors": [ + "Tyrandus", + "1903Daniel" + ] + }, + "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/Informationsarchitektur": { + "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/Klasse": { + "modified": "2019-03-18T21:37:57.063Z", + "contributors": [ + "duckymirror" + ] + }, + "Glossary/Konstruktor": { + "modified": "2019-03-23T22:04:35.334Z", + "contributors": [ + "klug_mario" + ] + }, + "Glossary/Leeres_Element": { + "modified": "2019-03-18T21:32:36.396Z", + "contributors": [ + "axelrindle" + ] + }, + "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/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/Objekt": { + "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/Progressive_Enhancement": { + "modified": "2019-03-18T21:18:33.079Z", + "contributors": [ + "tschach" + ] + }, + "Glossary/Protokoll": { + "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/Robots.txt": { + "modified": "2020-10-15T22:23:51.763Z", + "contributors": [ + "LoVo666" + ] + }, + "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/String": { + "modified": "2019-03-18T20:53:19.356Z", + "contributors": [ + "GreenPepper", + "Shidigital" + ] + }, + "Glossary/Symbol": { + "modified": "2019-03-23T22:34:59.987Z", + "contributors": [ + "schwemmer", + "wirmar" + ] + }, + "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/Typ": { + "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/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/einfache_datenelemente": { + "modified": "2019-03-23T22:46:44.221Z", + "contributors": [ + "Siphalor", + "andreas_inkoeln" + ] + }, + "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/verbotener_header_name": { + "modified": "2019-03-23T22:03:16.612Z", + "contributors": [ + "timmyRS" + ] + }, + "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/Organizing": { + "modified": "2020-11-22T15:02:52.846Z", + "contributors": [ + "hellschu" + ] + }, + "Learn/CSS/Building_blocks/Werten_Einheiten": { + "modified": "2020-07-16T22:28:56.210Z", + "contributors": [ + "GiovanniHD201E" + ] + }, + "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/Styling_text": { + "modified": "2020-09-05T15:36:12.926Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "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/Common_questions/Wie_das_Internet_funktioniert": { + "modified": "2020-07-16T22:35:36.371Z", + "contributors": [ + "frankwinter", + "NetiHeft" + ] + }, + "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/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/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_basis": { + "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/Getting_started_with_the_web/Wie_das_Internet_funktioniert": { + "modified": "2020-07-16T22:33:59.338Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/Getting_started_with_the_web/dateien_nutzen": { + "modified": "2020-07-16T22:34:32.214Z", + "contributors": [ + "michaelhochleitner", + "Aryx", + "vosspl", + "Shidigital", + "Bissmarc", + "janjo", + "d_jan" + ] + }, + "Learn/HTML": { + "modified": "2020-07-16T22:22:15.700Z", + "contributors": [ + "sigoa", + "Shidigital", + "Christian2507", + "urshensler", + "Marlonzockt", + "Trollderim" + ] + }, + "Learn/HTML/Einführung_in_HTML": { + "modified": "2020-07-16T22:22:45.948Z", + "contributors": [ + "PercyGitarrist", + "mprofitl", + "LeifMensing", + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML": { + "modified": "2020-07-16T22:23:17.212Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:03.053Z", + "contributors": [ + "DiscW0rld", + "fdeberle", + "Shidigital", + "Woehe2010", + "fataly01" + ] + }, + "Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML": { + "modified": "2020-07-16T22:23:30.695Z", + "contributors": [ + "Hofei", + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks": { + "modified": "2020-07-16T22:23:43.017Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML": { + "modified": "2020-07-16T22:24:11.946Z", + "contributors": [ + "LeniTastic", + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung": { + "modified": "2020-07-16T22:23:51.933Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen": { + "modified": "2020-11-19T12:58:27.172Z", + "contributors": [ + "fiji-flo", + "Kometheus", + "nitramrelpmur", + "Shidigital" + ] + }, + "Learn/HTML/Einführung_in_HTML/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:11.514Z", + "contributors": [ + "DiscW0rld", + "LeniTastic", + "msifrt" + ] + }, + "Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:17.990Z", + "contributors": [ + "DiscW0rld" + ] + }, + "Learn/HTML/Forms": { + "modified": "2020-07-16T22:20:54.604Z", + "contributors": [ + "Ryuno-Ki", + "PercyGitarrist", + "F.nn" + ] + }, + "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/HTML/Tables/Grund_tabelle_HTML": { + "modified": "2020-07-16T22:25:19.143Z", + "contributors": [ + "GiovanniHD201E" + ] + }, + "Learn/JavaScript": { + "modified": "2020-07-16T22:29:37.369Z", + "contributors": [ + "ManfredHTML", + "DrunkenTaunt" + ] + }, + "Learn/JavaScript/Bausteine": { + "modified": "2020-07-16T22:31:06.733Z", + "contributors": [ + "Osslack" + ] + }, + "Learn/JavaScript/Bausteine/Ereignisse": { + "modified": "2020-07-16T22:31:36.524Z", + "contributors": [ + "kaip-e", + "GiovanniHD201E" + ] + }, + "Learn/JavaScript/First_steps": { + "modified": "2020-07-16T22:29:48.847Z", + "contributors": [ + "CruzR", + "Elllenn" + ] + }, + "Learn/JavaScript/First_steps/Erster_Blick": { + "modified": "2020-07-16T22:30:16.778Z", + "contributors": [ + "GiovanniHD201E", + "Thomas-Zenkel" + ] + }, + "Learn/JavaScript/First_steps/Useful_string_methods": { + "modified": "2020-07-16T22:30:45.510Z", + "contributors": [ + "Mugges" + ] + }, + "Learn/JavaScript/First_steps/Variables": { + "modified": "2020-07-16T22:29:58.071Z", + "contributors": [ + "felix23.fn", + "mermolaev" + ] + }, + "Learn/JavaScript/First_steps/Was_ist_JavaScript": { + "modified": "2020-09-29T09:38:57.543Z", + "contributors": [ + "Devoryo", + "mchoeti", + "GreenPepper", + "hpawe01", + "Bissmarc", + "woiddale", + "JorisGutjahr" + ] + }, + "Learn/JavaScript/First_steps/lustige_geschichten_generator": { + "modified": "2020-07-16T22:31:00.101Z", + "contributors": [ + "Strubinator" + ] + }, + "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/Inheritance": { + "modified": "2020-07-16T22:32:11.988Z", + "contributors": [ + "MrFootwork" + ] + }, + "Learn/JavaScript/Objects/JSON": { + "modified": "2020-07-16T22:32:24.377Z", + "contributors": [ + "MuellerRi", + "DirkMassmann" + ] + }, + "Learn/JavaScript/Objects/Object-oriented_JS": { + "modified": "2020-07-16T22:32:04.669Z", + "contributors": [ + "Timbuktu1982", + "bluefor2" + ] + }, + "Learn/JavaScript/Objects/Object_prototypes": { + "modified": "2020-07-16T22:32:18.828Z", + "contributors": [ + "Timbuktu1982" + ] + }, + "Learn/Mitarbeiten": { + "modified": "2020-07-16T22:33:42.823Z", + "contributors": [ + "SphinxKnight", + "1000eyes", + "der_rofler" + ] + }, + "Learn/Server-side": { + "modified": "2020-07-16T22:35:55.694Z", + "contributors": [ + "LeifMensing", + "PercyGitarrist" + ] + }, + "Learn/Server-side/Erste_Schritte": { + "modified": "2020-07-16T22:36:07.662Z", + "contributors": [ + "LeifMensing", + "Dschubba" + ] + }, + "Learn/Server-side/Erste_Schritte/Introduction": { + "modified": "2020-07-16T22:36:12.624Z", + "contributors": [ + "NetiHeft", + "Dschubba" + ] + }, + "Learn/Server-side/Express_Nodejs": { + "modified": "2020-07-16T22:37:51.185Z", + "contributors": [ + "Oliver_Schafeld", + "Steffen1998" + ] + }, + "Learn/Server-side/Express_Nodejs/mongoose": { + "modified": "2020-07-16T22:38:19.573Z", + "contributors": [ + "Chorris" + ] + }, + "Learn/Tools_and_testing": { + "modified": "2020-07-16T22:38:53.810Z", + "contributors": [ + "Skasi", + "alex_hammerschmied" + ] + }, + "Learn/Tools_and_testing/Cross_browser_testing": { + "modified": "2020-07-16T22:38:59.366Z", + "contributors": [ + "wbamberg" + ] + }, + "Lokalisierung": { + "modified": "2019-03-24T00:15:25.257Z", + "contributors": [ + "taralushi", + "fscholz", + "WayneSchlegel", + "DirkS", + "maik666", + "René Schwarz", + "Ak120" + ] + }, + "MDN": { + "modified": "2019-09-10T15:39:15.802Z", + "contributors": [ + "SphinxKnight", + "wbamberg", + "GeMine", + "Jeremie", + "sbarthel", + "teoli", + "fscholz", + "Sheppy" + ] + }, + "MDN/Community": { + "modified": "2019-06-15T16:58:37.273Z", + "contributors": [ + "sklicek", + "rs-github", + "wbamberg", + "BavarianMax", + "Jeremie", + "SvenSaarland", + "msebastian100", + "Stefan_hr4u" + ] + }, + "MDN/Community/Bleibe_auf_dem_Laufenden": { + "modified": "2019-03-23T23:27:28.266Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "UweDirk" + ] + }, + "MDN/Contribute": { + "modified": "2019-03-23T23:20:05.396Z", + "contributors": [ + "wbamberg", + "matze", + "sbarthel", + "Sheppy" + ] + }, + "MDN/Contribute/Feedback": { + "modified": "2020-11-28T23:34:47.349Z", + "contributors": [ + "chrisdavidmills", + "jswisher", + "SphinxKnight", + "Streamities", + "wbamberg", + "Sebastianz" + ] + }, + "MDN/Contribute/Getting_started": { + "modified": "2020-09-30T17:09:44.157Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Kairyon", + "matze", + "sbarthel" + ] + }, + "MDN/Contribute/Howto": { + "modified": "2019-03-23T23:17:41.242Z", + "contributors": [ + "wbamberg", + "sbarthel", + "Sheppy" + ] + }, + "MDN/Contribute/Howto/Convert_code_samples_to_be_live": { + "modified": "2019-01-16T23:07:11.407Z", + "contributors": [ + "wbamberg", + "lmoench", + "Tutz" + ] + }, + "MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:26:44.220Z", + "contributors": [ + "wbamberg", + "jordylol2006", + "Sebastianz" + ] + }, + "MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-01-16T19:26:12.299Z", + "contributors": [ + "wbamberg", + "sigoa", + "Sebastianz" + ] + }, + "MDN/Contribute/Howto/Document_a_CSS_property": { + "modified": "2020-02-19T18:56:54.852Z", + "contributors": [ + "jswisher", + "SphinxKnight", + "wbamberg", + "teoli" + ] + }, + "MDN/Contribute/Howto/ERstellung_eines_MDN_Profils": { + "modified": "2019-07-28T03:19:41.741Z", + "contributors": [ + "wbamberg", + "darkfeile", + "lutzip0", + "Dev201", + "jumpball", + "jogi23", + "Clonkh" + ] + }, + "MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten": { + "modified": "2019-01-16T21:20:05.744Z", + "contributors": [ + "wbamberg", + "hictox" + ] + }, + "MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-01-16T19:16:53.470Z", + "contributors": [ + "wbamberg", + "githubsvc", + "4680", + "maxsu" + ] + }, + "MDN/Contribute/Howto/Tag": { + "modified": "2019-07-04T23:25:18.289Z", + "contributors": [ + "PercyGitarrist", + "wbamberg", + "Sixl-Daniel", + "vssn", + "hictox", + "ichlebelangeweb.de", + "drillmeister", + "clone" + ] + }, + "MDN/Contribute/Localize": { + "modified": "2019-01-16T18:27:04.795Z", + "contributors": [ + "wbamberg", + "matze", + "sbarthel", + "Sheppy" + ] + }, + "MDN/Contribute/Localize/Translating_pages": { + "modified": "2019-12-08T20:42:59.132Z", + "contributors": [ + "DavidBarke", + "wbamberg", + "fhwfzfge", + "PercyGitarrist", + "yckart", + "skl", + "Jeremie", + "Econ", + "jlelse4ever", + "jokofox", + "RalphSchwarz", + "rausven24" + ] + }, + "MDN/Contribute/zu_tun_im_MDN": { + "modified": "2019-01-16T20:30:11.342Z", + "contributors": [ + "wbamberg", + "dario.bloch" + ] + }, + "MDN/Guidelines": { + "modified": "2020-09-30T15:28:44.297Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "Jeremie", + "Sheppy" + ] + }, + "MDN/Guidelines/Style_guide": { + "modified": "2020-09-30T15:28:44.875Z", + "contributors": [ + "chrisdavidmills", + "stephanduesterhoeft", + "jswisher", + "Dschubba", + "wbamberg", + "Jeremie", + "PaddyKfg", + "Montana7755" + ] + }, + "MDN/Kuma": { + "modified": "2020-04-22T10:45:47.041Z", + "contributors": [ + "clemens.klapp", + "SphinxKnight", + "wbamberg", + "JorisGutjahr", + "Jeremie", + "Sheppy" + ] + }, + "MDN/Kuma/Beheben_von_KumaScript_Fehlern": { + "modified": "2019-01-16T21:24:01.701Z", + "contributors": [ + "wbamberg", + "rolandm" + ] + }, + "MDN/Structures": { + "modified": "2020-09-30T09:04:48.225Z", + "contributors": [ + "chrisdavidmills", + "wbamberg", + "SphinxKnight", + "hartmann2012" + ] + }, + "MDN/Structures/Kompatibilitaets_Tabellen": { + "modified": "2020-10-15T22:06:38.248Z", + "contributors": [ + "chrisdavidmills", + "thunderhook", + "wbamberg", + "jogemu" + ] + }, + "MDN/nutzer_leitfaden": { + "modified": "2019-03-23T22:50:19.741Z", + "contributors": [ + "wbamberg", + "jezdez", + "LeindK" + ] + }, + "MDN/Über": { + "modified": "2019-09-10T08:51:50.833Z", + "contributors": [ + "SphinxKnight", + "Streamities", + "wbamberg", + "rs-github" + ] + }, + "MDN/Über/Link_zu_MDN": { + "modified": "2019-01-17T03:01:28.772Z", + "contributors": [ + "wbamberg", + "sklicek" + ] + }, + "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_at_ten/Zum_MDN_beitragen": { + "modified": "2020-02-19T18:50:24.408Z", + "contributors": [ + "jswisher", + "1000eyes" + ] + }, + "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/Lesezeich.": { + "modified": "2020-10-15T21:55:55.060Z", + "contributors": [ + "wbamberg", + "nw520", + "matschibatschi" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/browserAction": { + "modified": "2020-10-15T22:26:32.419Z" + }, + "Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup": { + "modified": "2020-10-15T22:26:30.812Z", + "contributors": [ + "DJM" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/commands": { + "modified": "2020-10-15T22:08:08.658Z", + "contributors": [ + "wbamberg", + "Sorbzilla" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/downloads": { + "modified": "2020-10-15T22:18:21.095Z", + "contributors": [ + "ErichWilli" + ] + }, + "Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension": { + "modified": "2019-03-18T21:02:49.105Z", + "contributors": [ + "Asozialist" + ] + }, + "Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API": { + "modified": "2019-06-11T16:28:12.442Z", + "contributors": [ + "Patrick5555" + ] + }, + "Mozilla/Add-ons/WebExtensions/Beispiele": { + "modified": "2019-03-18T21:04:08.698Z", + "contributors": [ + "StefanM" + ] + }, + "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { + "modified": "2020-10-15T20:55:14.782Z", + "contributors": [ + "frido1973" + ] + }, + "Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung": { + "modified": "2019-07-04T07:03:49.181Z", + "contributors": [ + "trych", + "SyntaxCacao", + "HillOTech", + "Asozialist", + "twizzz", + "serv-inc", + "Draphar", + "flosommerfeld" + ] + }, + "Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung": { + "modified": "2019-07-04T06:11:16.199Z", + "contributors": [ + "trych", + "Draphar" + ] + }, + "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { + "modified": "2019-10-28T22:25:20.040Z", + "contributors": [ + "LoVo666" + ] + }, + "Mozilla/Add-ons/WebExtensions/Match_patterns": { + "modified": "2020-10-15T22:26:32.716Z", + "contributors": [ + "gyz678" + ] + }, + "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/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/Add-ons/WebExtensions/manifest.json/devtools_page": { + "modified": "2020-10-15T21:57:09.587Z", + "contributors": [ + "wbamberg", + "modding-dreams" + ] + }, + "Mozilla/Add-ons/WebExtensions/manifest.json/theme": { + "modified": "2020-10-15T22:32:55.534Z", + "contributors": [ + "zogger" + ] + }, + "Mozilla/Developer_guide": { + "modified": "2019-03-24T00:04:47.887Z", + "contributors": [ + "chrisdavidmills", + "SJW", + "tessarakt3", + "fscholz", + "Lukas Skywalker", + "Jules Papillon", + "Ak120", + "PowerToaster" + ] + }, + "Mozilla/Developer_guide/Quelltexte": { + "modified": "2019-03-24T00:04:33.890Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "Anonymous", + "gamemaster7riesen" + ] + }, + "Mozilla/Developer_guide/firefox_erfolgreich_erstellt": { + "modified": "2019-03-23T22:13:23.971Z", + "contributors": [ + "chrisdavidmills", + "friedger" + ] + }, + "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/16": { + "modified": "2019-03-23T23:24:48.916Z", + "contributors": [ + "wbamberg", + "mrstork", + "Micky261" + ] + }, + "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.6": { + "modified": "2019-12-13T20:33:15.876Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Timmi" + ] + }, + "Mozilla/Firefox/Releases/34": { + "modified": "2019-03-23T23:08:51.454Z", + "contributors": [ + "wbamberg", + "schlagi123", + "barning" + ] + }, + "Mozilla/Firefox/Releases/47": { + "modified": "2019-03-23T22:30:31.890Z", + "contributors": [ + "wbamberg", + "kdex", + "Schwarzer-Bob" + ] + }, + "Mozilla/Firefox/Releases/5": { + "modified": "2020-11-20T04:48:59.432Z", + "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" + ] + }, + "Mozilla/Firefox/Releases/60": { + "modified": "2019-03-18T21:37:55.301Z", + "contributors": [ + "wbamberg", + "mario.p" + ] + }, + "Mozilla/Firefox/Releases/68": { + "modified": "2019-06-21T08:05:41.440Z", + "contributors": [ + "Conzz" + ] + }, + "OpenSearch_Plugin_für_Firefox_erstellen": { + "modified": "2019-03-24T00:04:54.552Z", + "contributors": [ + "fscholz", + "Lexhawkins" + ] + }, + "Plugins/Flash-Aktivierung:_Browser-Vergleich": { + "modified": "2019-03-23T22:03:23.868Z", + "contributors": [ + "Artist-sumo", + "Sheppy", + "HoLuLuLu" + ] + }, + "Tools": { + "modified": "2020-07-16T22:44:14.027Z", + "contributors": [ + "SphinxKnight", + "schlampa7", + "marcaltmann", + "wbamberg", + "rugk", + "maximelore", + "Artist-sumo", + "devSchnitzel", + "alberts+", + "suriyaa", + "TRoskop", + "Langer39", + "VJSchneid", + "Tim_Lehmann", + "sympatovit", + "fscholz", + "teoli", + "Jolo", + "Mozilla-fan", + "snopy234", + "AlexPl" + ] + }, + "Tools/3D_untersuchung": { + "modified": "2020-07-16T22:34:25.058Z", + "contributors": [ + "wbamberg", + "pollti", + "SJW" + ] + }, + "Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.223Z", + "contributors": [ + "wbamberg", + "mfluehr" + ] + }, + "Tools/Barrierefreiheits_inspektor": { + "modified": "2020-07-16T22:36:39.466Z", + "contributors": [ + "hrfischer1983", + "hellschu" + ] + }, + "Tools/Browser_Console": { + "modified": "2020-07-16T22:35:42.070Z", + "contributors": [ + "wbamberg", + "atze79" + ] + }, + "Tools/Browser_Werkzeuge": { + "modified": "2020-07-16T22:35:55.309Z", + "contributors": [ + "wbamberg", + "res60", + "Dev_Falko", + "Microgamer" + ] + }, + "Tools/Debugger": { + "modified": "2020-07-16T22:35:04.001Z", + "contributors": [ + "jewuma", + "wbamberg", + "Andi21", + "achimbode", + "Nostra", + "fscholz", + "Hecky77", + "AngelSankturio", + "isoewa", + "hexefatale" + ] + }, + "Tools/Debugger/How_to": { + "modified": "2020-07-16T22:35:07.165Z", + "contributors": [ + "wbamberg" + ] + }, + "Tools/Debugger/How_to/Open_the_debugger": { + "modified": "2020-07-16T22:35:08.927Z", + "contributors": [ + "Drachenfrucht1" + ] + }, + "Tools/Debugger/How_to/Use_a_source_map": { + "modified": "2020-07-16T22:35:12.233Z", + "contributors": [ + "flyhighmartin" + ] + }, + "Tools/Debugger/Source_map_errors": { + "modified": "2020-07-16T22:35:19.061Z", + "contributors": [ + "clemens.klapp" + ] + }, + "Tools/Firefox_OS_1.1_Simulator": { + "modified": "2020-07-16T22:35:57.569Z", + "contributors": [ + "wbamberg", + "aquorange", + "MaleCat", + "Kbaby", + "Andi85er", + "AngelSankturio" + ] + }, + "Tools/Index": { + "modified": "2020-07-16T22:36:02.468Z", + "contributors": [ + "wbamberg", + "fscholz" + ] + }, + "Tools/JSON_viewer": { + "modified": "2020-07-16T22:36:31.343Z", + "contributors": [ + "tobiasdegen" + ] + }, + "Tools/Keyboard_shortcuts": { + "modified": "2020-07-16T22:35:45.057Z", + "contributors": [ + "Djfe", + "wbamberg", + "robert7k", + "maybe", + "mkohler", + "Coce" + ] + }, + "Tools/Page_Inspector/How_to": { + "modified": "2020-07-16T22:34:30.881Z", + "contributors": [ + "GiovanniHD201E", + "wbamberg", + "sidgan" + ] + }, + "Tools/Page_Inspector/How_to/Event_Listener_untersuchen": { + "modified": "2020-07-16T22:34:35.556Z", + "contributors": [ + "wbamberg", + "Sebastianz" + ] + }, + "Tools/Page_Inspector/How_to/Raster_Layout_untersuchen": { + "modified": "2020-07-16T22:34:46.944Z", + "contributors": [ + "oolong32", + "wbamberg", + "Micky261" + ] + }, + "Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung": { + "modified": "2020-08-13T20:23:50.743Z", + "contributors": [ + "cama240601", + "GiovanniHD201E" + ] + }, + "Tools/Paint_Flashing_Tool": { + "modified": "2020-07-16T22:35:43.400Z", + "contributors": [ + "wbamberg", + "marioszymanski", + "dawide2010" + ] + }, + "Tools/Performance": { + "modified": "2020-07-16T22:36:12.453Z", + "contributors": [ + "SebinNyshkim", + "wbamberg", + "hackbart" + ] + }, + "Tools/Remote_Debugging": { + "modified": "2020-07-16T22:35:37.082Z", + "contributors": [ + "wbamberg", + "Micky261", + "Ilka25", + "Zander29", + "Coerlin-C-83", + "fscholz", + "mkohler", + "cube1988", + "Allie71", + "eedenharter" + ] + }, + "Tools/Remote_Debugging/Debugging_Firefox_Desktop": { + "modified": "2020-10-11T07:49:13.330Z", + "contributors": [ + "kateBorderline" + ] + }, + "Tools/Remote_Debugging/Firefox_for_Android": { + "modified": "2020-07-16T22:35:38.869Z", + "contributors": [ + "wbamberg", + "EikeKre", + "mkohler", + "popeye007" + ] + }, + "Tools/Seiten_Inspektor": { + "modified": "2020-07-16T22:34:26.882Z", + "contributors": [ + "wbamberg", + "maybe", + "mozjan", + "One", + "MikeWalde", + "libelle17" + ] + }, + "Tools/Seiten_Inspektor/Tastenkombinationen": { + "modified": "2020-07-16T22:34:50.445Z", + "contributors": [ + "GiovanniHD201E" + ] + }, + "Tools/Shader-Editor": { + "modified": "2020-07-16T22:35:54.224Z", + "contributors": [ + "wbamberg", + "olhaar", + "cgtom" + ] + }, + "Tools/Storage_Inspector": { + "modified": "2020-07-16T22:36:09.538Z", + "contributors": [ + "hennr", + "Borgitowner", + "Nuzoo" + ] + }, + "Tools/Storage_Inspector/Cache_Storage": { + "modified": "2020-07-16T22:36:11.182Z", + "contributors": [ + "ColadaMDNWebDocs" + ] + }, + "Tools/Storage_Inspector/Cookies": { + "modified": "2020-12-04T12:52:15.534Z", + "contributors": [ + "MDN_David", + "ColadaMDNWebDocs" + ] + }, + "Tools/Storage_Inspector/IndexedDB": { + "modified": "2020-07-16T22:36:11.541Z", + "contributors": [ + "ColadaMDNWebDocs" + ] + }, + "Tools/Storage_Inspector/Local_Storage_Session_Storage": { + "modified": "2020-07-16T22:36:11.347Z", + "contributors": [ + "ColadaMDNWebDocs" + ] + }, + "Tools/Style_Editor": { + "modified": "2020-07-16T22:34:59.759Z", + "contributors": [ + "hellschu", + "wbamberg", + "maba001", + "maybe", + "Kbaby", + "fscholz", + "Helmcke42" + ] + }, + "Tools/WebIDE_clone": { + "modified": "2019-03-23T23:03:21.499Z", + "contributors": [ + "wbamberg", + "VJSchneid", + "maybe", + "AARADEANCA" + ] + }, + "Tools/Web_Konsole": { + "modified": "2020-07-16T22:34:04.628Z", + "contributors": [ + "Loilo", + "SphinxKnight", + "talikanews", + "wbamberg", + "realsplatscream", + "kleinegnomfee", + "maybe", + "PsychoMg", + "mozjan" + ] + }, + "Tools/Web_Konsole/Hilfe": { + "modified": "2020-07-16T22:34:11.469Z", + "contributors": [ + "wbamberg", + "AlexFunk", + "mherczegh" + ] + }, + "Tools/about:debugging": { + "modified": "2020-08-16T17:45:15.524Z", + "contributors": [ + "papacemal" + ] + }, + "Tools/bildschirmgroessen-testen": { + "modified": "2020-07-16T22:35:21.080Z", + "contributors": [ + "wbamberg", + "mozjan" + ] + }, + "Tools/netzwerkanalyse": { + "modified": "2020-07-16T22:35:29.556Z", + "contributors": [ + "wbamberg", + "ThomasLendo" + ] + }, + "Updating_web_applications_for_Firefox_3": { + "modified": "2019-03-24T00:04:30.175Z", + "contributors": [ + "wbamberg", + "Sheppy", + "fscholz", + "niels" + ] + }, + "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/AnimationEvent": { + "modified": "2019-03-23T22:44:28.627Z", + "contributors": [ + "fscholz", + "teoli", + "Sheppy" + ] + }, + "Web/API/AudioContext": { + "modified": "2019-03-23T22:41:23.906Z", + "contributors": [ + "suedsaft", + "mwalter" + ] + }, + "Web/API/AudioContext/decodeAudioData": { + "modified": "2019-03-23T22:38:20.001Z", + "contributors": [ + "Thalhammer" + ] + }, + "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/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/Body": { + "modified": "2020-10-15T22:15:22.404Z", + "contributors": [ + "fmeyertoens" + ] + }, + "Web/API/Body/arrayBuffer": { + "modified": "2020-10-15T22:15:22.326Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "Web/API/Body/blob": { + "modified": "2020-10-15T22:15:22.311Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "Web/API/Body/body": { + "modified": "2020-10-15T22:15:22.169Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "Web/API/Body/bodyUsed": { + "modified": "2020-10-15T22:15:22.317Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "Web/API/Body/formData": { + "modified": "2020-10-15T22:15:22.274Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "Web/API/Body/json": { + "modified": "2020-10-15T22:15:23.782Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "Web/API/Body/text": { + "modified": "2020-10-15T22:15:23.627Z", + "contributors": [ + "SebinNyshkim" + ] + }, + "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/setLineDash": { + "modified": "2019-01-17T00:14:20.097Z", + "contributors": [ + "Xenoage" + ] + }, + "Web/API/CanvasRenderingContext2D/textAlign": { + "modified": "2020-10-15T22:05:18.597Z", + "contributors": [ + "marco-a" + ] + }, + "Web/API/ChildNode": { + "modified": "2019-03-23T22:06:18.037Z", + "contributors": [ + "stevenwdv" + ] + }, + "Web/API/ChildNode/remove": { + "modified": "2020-10-15T22:05:03.102Z", + "contributors": [ + "sv3m0r" + ] + }, + "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/DOMString": { + "modified": "2019-06-02T12:14:00.624Z", + "contributors": [ + "RAnders00", + "rkeller1" + ] + }, + "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/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/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/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/EventListener": { + "modified": "2019-03-23T22:39:43.594Z", + "contributors": [ + "skanne", + "StevenS77", + "Ctwx" + ] + }, + "Web/API/EventSource": { + "modified": "2019-09-20T07:55:13.564Z", + "contributors": [ + "Locour", + "nexus511" + ] + }, + "Web/API/EventTarget": { + "modified": "2019-03-23T22:15:39.970Z", + "contributors": [ + "kamoroso94" + ] + }, + "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/Typ": { + "modified": "2020-10-15T22:20:09.678Z", + "contributors": [ + "sklicek" + ] + }, + "Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen": { + "modified": "2019-03-18T20:49:17.436Z", + "contributors": [ + "Holger.Persch", + "MatthiasApsel", + "gunnarbittersmann", + "chrisdavidmills", + "icy", + "matschu" + ] + }, + "Web/API/File/fileName": { + "modified": "2019-03-23T23:33:53.570Z", + "contributors": [ + "fscholz", + "nothine" + ] + }, + "Web/API/File/fileSize": { + "modified": "2019-03-23T23:33:53.208Z", + "contributors": [ + "fscholz", + "nothine" + ] + }, + "Web/API/File/getAsText": { + "modified": "2019-03-23T23:33:47.440Z", + "contributors": [ + "fscholz", + "nothine" + ] + }, + "Web/API/File/name": { + "modified": "2019-03-23T23:33:48.935Z", + "contributors": [ + "rehne93", + "fscholz", + "nothine" + ] + }, + "Web/API/FileReader": { + "modified": "2019-03-23T22:50:30.774Z", + "contributors": [ + "migg24", + "S0mmerD", + "nlang", + "MatthiasRubin" + ] + }, + "Web/API/FileReader/onload": { + "modified": "2019-03-23T22:41:15.437Z", + "contributors": [ + "rehne93", + "Stoffo" + ] + }, + "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/FullscreenOptions": { + "modified": "2020-10-15T22:20:23.450Z", + "contributors": [ + "Gerak842" + ] + }, + "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/GlobalEventHandlers": { + "modified": "2019-03-23T22:40:26.306Z", + "contributors": [ + "matschibatschi", + "AFBarstow" + ] + }, + "Web/API/GlobalEventHandlers/onclick": { + "modified": "2019-03-23T22:40:31.019Z", + "contributors": [ + "patrickGold", + "MrTroble" + ] + }, + "Web/API/GlobalEventHandlers/onload": { + "modified": "2019-03-23T22:09:19.030Z", + "contributors": [ + "Anonymous" + ] + }, + "Web/API/GlobalEventHandlers/onresize": { + "modified": "2019-03-23T22:10:57.097Z", + "contributors": [ + "mecograph" + ] + }, + "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/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/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/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/Grundkonzepte_hinter_IndexedDB": { + "modified": "2020-01-13T04:47:55.526Z", + "contributors": [ + "chrisdavidmills", + "gmagholder", + "Julini" + ] + }, + "Web/API/IndexedDB_API/IndexedDB_verwenden": { + "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/LinkStyle": { + "modified": "2019-03-23T23:11:18.020Z", + "contributors": [ + "fscholz", + "Sebastianz" + ] + }, + "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/Webbasierte_protokoll-handler": { + "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/NavigatorOnLine": { + "modified": "2019-03-23T22:47:26.289Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/NavigatorOnLine/Online_and_offline_events": { + "modified": "2019-03-23T22:59:48.853Z", + "contributors": [ + "chrisdavidmills", + "terabaud" + ] + }, + "Web/API/NavigatorOnLine/onLine": { + "modified": "2019-03-23T22:47:22.054Z", + "contributors": [ + "TRoskop" + ] + }, + "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/innerText": { + "modified": "2019-03-23T22:05:48.154Z", + "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/setUserData": { + "modified": "2019-03-23T22:05:46.565Z", + "contributors": [ + "Nonononoki" + ] + }, + "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/RTCPeerConnection": { + "modified": "2019-03-23T22:39:31.626Z", + "contributors": [ + "TheA13X" + ] + }, + "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/RenderingContext": { + "modified": "2020-11-02T01:51:10.279Z", + "contributors": [ + "sgadola" + ] + }, + "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/USVString": { + "modified": "2019-03-18T21:30:46.256Z", + "contributors": [ + "Keviddle" + ] + }, + "Web/API/Vollbild_API": { + "modified": "2019-07-07T13:00:37.918Z", + "contributors": [ + "wbamberg", + "lazercaveman", + "Johann150", + "axelrindle" + ] + }, + "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/3D-Objekte_mit_WebGL_erstellen": { + "modified": "2019-03-24T00:04:47.020Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL": { + "modified": "2019-03-24T00:04:47.741Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL": { + "modified": "2019-03-24T00:04:49.766Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Einführung_in_WebGL": { + "modified": "2019-03-24T00:05:30.371Z", + "contributors": [ + "noxafy", + "Oliver_Schafeld", + "H3ndr1k", + "xhallix", + "manni66", + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen": { + "modified": "2019-03-24T00:09:11.465Z", + "contributors": [ + "fscholz", + "teoli", + "WNC7" + ] + }, + "Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext": { + "modified": "2019-03-18T20:49:18.784Z", + "contributors": [ + "jsinge", + "noxafy", + "fscholz", + "teoli", + "TimN", + "WNC7" + ] + }, + "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren": { + "modified": "2019-03-18T21:15:16.400Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden": { + "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/extensions": { + "modified": "2020-10-15T22:23:14.946Z", + "contributors": [ + "axelrindle" + ] + }, + "Web/API/WebSocket/onclose": { + "modified": "2019-10-02T19:24:05.254Z", + "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/WebXR_Device_API": { + "modified": "2020-10-15T22:29:16.503Z", + "contributors": [ + "SphinxKnight", + "katjah4rms08" + ] + }, + "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/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/dump": { + "modified": "2019-03-23T23:34:35.263Z", + "contributors": [ + "fscholz", + "jsx", + "Jon_Deo" + ] + }, + "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/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/ondevicemotion": { + "modified": "2019-03-18T21:15:10.920Z", + "contributors": [ + "clepsydra", + "m9898" + ] + }, + "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/performance": { + "modified": "2019-03-23T22:07:15.480Z", + "contributors": [ + "amelzer" + ] + }, + "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/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/WindowBase64": { + "modified": "2019-03-23T22:50:32.909Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WindowBase64/btoa": { + "modified": "2019-03-23T22:50:32.544Z", + "contributors": [ + "cami" + ] + }, + "Web/API/WindowEventHandlers": { + "modified": "2019-03-23T22:50:03.877Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WindowEventHandlers/onafterprint": { + "modified": "2019-03-23T22:23:55.422Z", + "contributors": [ + "maxx-dev" + ] + }, + "Web/API/WindowEventHandlers/onhashchange": { + "modified": "2019-03-23T22:49:53.661Z", + "contributors": [ + "flosommerfeld", + "ulrobin" + ] + }, + "Web/API/WindowEventHandlers/onpopstate": { + "modified": "2019-03-23T22:35:53.667Z", + "contributors": [ + "checkdotdot", + "Oliver_Schafeld" + ] + }, + "Web/API/WindowTimers": { + "modified": "2019-03-23T23:01:42.969Z", + "contributors": [ + "teoli" + ] + }, + "Web/API/WindowTimers/setTimeout": { + "modified": "2019-03-23T23:36:28.621Z", + "contributors": [ + "mdnde", + "Eschon", + "fscholz", + "c0ffm3k4r", + "wartab" + ] + }, + "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/XMLHttpRequest/Using_XMLHttpRequest": { + "modified": "2020-10-15T22:34:13.485Z", + "contributors": [ + "Mellbabe" + ] + }, + "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/Accessibility/Understanding_WCAG": { + "modified": "2020-01-27T09:01:40.600Z" + }, + "Web/Accessibility/Understanding_WCAG/Perceivable": { + "modified": "2020-01-27T09:01:40.941Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Barrierefreiheit": { + "modified": "2019-09-09T14:09:32.470Z", + "contributors": [ + "SphinxKnight", + "alippold", + "teoli", + "fscholz", + "Mgalpha" + ] + }, + "Web/Barrierefreiheit/ARIA": { + "modified": "2019-03-23T23:21:04.985Z", + "contributors": [ + "a.lippold", + "marc-se", + "iMeta", + "eminor", + "teoli" + ] + }, + "Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen": { + "modified": "2019-03-23T23:15:24.210Z", + "contributors": [ + "teoli", + "eminor" + ] + }, + "Web/Barrierefreiheit/ARIA/ARIA_Techniken": { + "modified": "2019-03-18T21:43:56.504Z", + "contributors": [ + "juliankern" + ] + }, + "Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets": { + "modified": "2019-03-23T23:17:39.742Z", + "contributors": [ + "juliankern", + "christophfink", + "teoli", + "eminor" + ] + }, + "Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten": { + "modified": "2019-03-23T23:11:54.393Z", + "contributors": [ + "eminor" + ] + }, + "Web/Barrierefreiheit/Webentwicklung": { + "modified": "2019-03-18T20:35:27.144Z", + "contributors": [ + "chrisdavidmills", + "teoli", + "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-box-flex": { + "modified": "2020-10-15T21:40:01.205Z", + "contributors": [ + "chrisdavidmills", + "SJW", + "teoli", + "crasher666", + "Sebastianz" + ] + }, + "Web/CSS/-moz-box-ordinal-group": { + "modified": "2019-03-23T22:45:29.807Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/-moz-box-pack": { + "modified": "2020-10-15T21:39:56.493Z", + "contributors": [ + "SJW", + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/-moz-cell": { + "modified": "2019-03-23T23:11:42.748Z", + "contributors": [ + "Sebastianz", + "teoli" + ] + }, + "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/-moz-user-modify": { + "modified": "2019-03-24T00:04:27.330Z", + "contributors": [ + "teoli", + "Sebastianz", + "fscholz", + "SJW", + "Michael2402" + ] + }, + "Web/CSS/-moz-user-select": { + "modified": "2019-03-24T00:03:51.678Z", + "contributors": [ + "fscholz", + "SJW", + "Michael2402" + ] + }, + "Web/CSS/-webkit-box-reflect": { + "modified": "2019-03-23T22:45:19.920Z", + "contributors": [ + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/-webkit-mask-origin": { + "modified": "2019-03-23T22:44:52.161Z", + "contributors": [ + "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": { + "modified": "2019-03-23T22:45:10.485Z", + "contributors": [ + "Sebastianz" + ] + }, + "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-print-color-adjust": { + "modified": "2019-03-23T22:42:45.125Z", + "contributors": [ + "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-placeholder": { + "modified": "2019-03-23T23:11:34.619Z", + "contributors": [ + "teoli", + "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-ui-invalid": { + "modified": "2019-03-23T22:42:35.620Z", + "contributors": [ + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/:-moz-ui-valid": { + "modified": "2019-03-23T22:42:34.212Z", + "contributors": [ + "teoli", + "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/:-webkit-autofill": { + "modified": "2019-03-23T22:43:43.075Z", + "contributors": [ + "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-placeholder": { + "modified": "2019-03-23T23:08:23.797Z", + "contributors": [ + "teoli", + "Sebastianz", + "icy" + ] + }, + "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/::placeholder": { + "modified": "2020-10-15T22:16:04.444Z", + "contributors": [ + "sklicek" + ] + }, + "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/: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/: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/: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/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/@page/bleed": { + "modified": "2020-10-15T21:39:36.423Z", + "contributors": [ + "SJW", + "Prinz_Rana", + "Sebastianz" + ] + }, + "Web/CSS/@page/marks": { + "modified": "2020-10-15T21:29:09.846Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/@viewport": { + "modified": "2020-10-15T21:36:26.323Z", + "contributors": [ + "SJW", + "ExE-Boss", + "stefankahlau", + "fscholz", + "holgerjakobs" + ] + }, + "Web/CSS/Alias": { + "modified": "2019-03-23T22:43:38.581Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Alternative_style_sheets": { + "modified": "2019-03-23T22:43:32.591Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Angrenzende_Geschwisterselektoren": { + "modified": "2020-10-15T21:39:56.944Z", + "contributors": [ + "ExE-Boss", + "Sebastianz" + ] + }, + "Web/CSS/At-rule": { + "modified": "2019-03-23T22:44:51.883Z", + "contributors": [ + "Claas", + "Sebastianz" + ] + }, + "Web/CSS/Attributselektoren": { + "modified": "2020-10-15T21:25:18.388Z", + "contributors": [ + "SJW", + "Sebastianz", + "hansspiess", + "fscholz", + "iGadget", + "J5lx" + ] + }, + "Web/CSS/Aural": { + "modified": "2019-03-23T22:45:45.488Z", + "contributors": [ + "Sebastianz" + ] + }, + "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/CSS_Animationen_nutzen": { + "modified": "2020-04-22T06:24:42.427Z", + "contributors": [ + "Ryuno-Ki", + "hamvocke", + "hudri", + "JorisGutjahr", + "awaigand", + "Honig", + "connexo", + "SphinxKnight", + "teoli", + "Simu" + ] + }, + "Web/CSS/CSS_Background_and_Borders": { + "modified": "2019-03-23T22:44:11.176Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "modified": "2019-03-18T21:15:52.768Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "modified": "2019-03-23T22:43:49.105Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden": { + "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_Boxmodell": { + "modified": "2019-03-23T22:43:35.662Z", + "contributors": [ + "Sebastianz", + "teoli" + ] + }, + "Web/CSS/CSS_Boxmodell/Box-shadow_generator": { + "modified": "2019-03-18T20:43:44.623Z", + "contributors": [ + "BychekRU", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell": { + "modified": "2019-03-24T00:03:52.006Z", + "contributors": [ + "Sebastianz", + "fscholz", + "SJW", + "Michael2402" + ] + }, + "Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern": { + "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/farbauswahl_werkzeug": { + "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_Compositing_and_Blending": { + "modified": "2019-03-23T22:41:20.151Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Conditional_Rules": { + "modified": "2019-03-23T22:41:19.119Z", + "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/Flex_Elemente_Sortieren": { + "modified": "2020-10-26T12:12:41.192Z", + "contributors": [ + "Raqhael" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox": { + "modified": "2019-03-18T21:33:01.162Z", + "contributors": [ + "prproksch", + "td8" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": { + "modified": "2019-03-18T20:58:13.468Z", + "contributors": [ + "KadirTopal", + "wiegels", + "AccNeeder", + "rroehrig", + "thorsten.rinne", + "fscholz", + "elker", + "thandwerker", + "Honig" + ] + }, + "Web/CSS/CSS_Fonts": { + "modified": "2019-03-23T22:42:29.712Z", + "contributors": [ + "Sebastianz" + ] + }, + "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_Lists_and_Counters": { + "modified": "2019-03-23T22:42:24.617Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden": { + "modified": "2019-03-23T22:41:18.157Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung": { + "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_Masken": { + "modified": "2020-10-15T21:41:26.449Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Namensräume": { + "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-11-24T17:04:06.642Z", + "contributors": [ + "mfuji09" + ] + }, + "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": { + "modified": "2020-11-25T07:01:24.676Z", + "contributors": [ + "Johuspect" + ] + }, + "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": { + "modified": "2020-11-25T07:36:50.008Z", + "contributors": [ + "Johuspect" + ] + }, + "Web/CSS/CSS_Referenz": { + "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/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_Textdekoration": { + "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/CSS_Transformationen_verwenden": { + "modified": "2019-03-23T22:43:37.336Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Transitions": { + "modified": "2019-03-23T22:43:32.259Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Typen": { + "modified": "2020-04-21T12:32:32.615Z", + "contributors": [ + "kleinesfilmroellchen", + "Claas" + ] + }, + "Web/CSS/CSS_User_Interface": { + "modified": "2019-03-23T22:43:34.455Z", + "contributors": [ + "SphinxKnight", + "ExE-Boss", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Writing_Modes": { + "modified": "2019-03-23T22:44:48.500Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Farben": { + "modified": "2020-10-15T21:14:08.521Z", + "contributors": [ + "Borgitowner", + "SJW", + "Sebastianz", + "Simplexible", + "fscholz", + "Jürgen Jeka", + "Michael2402" + ] + }, + "Web/CSS/ID-Selektoren": { + "modified": "2020-10-15T21:41:21.317Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/Index": { + "modified": "2019-01-16T19:56:04.663Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Initialwert": { + "modified": "2019-03-23T22:18:48.927Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Kindselektoren": { + "modified": "2020-10-15T21:41:20.031Z", + "contributors": [ + "SJW", + "iCON", + "Sebastianz" + ] + }, + "Web/CSS/Klassenselektoren": { + "modified": "2020-10-15T21:41:19.898Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/Kurzformat_Eigenschaft": { + "modified": "2020-11-22T12:51:55.372Z", + "contributors": [ + "Johuspect" + ] + }, + "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-10-15T21:40:17.095Z", + "contributors": [ + "SJW", + "teoli" + ] + }, + "Web/CSS/Media_Queries/Using_media_queries": { + "modified": "2019-03-23T22:43:31.909Z", + "contributors": [ + "Sebastianz", + "mrstork", + "malayaleecoder", + "teoli" + ] + }, + "Web/CSS/Motion_Path": { + "modified": "2019-03-23T22:43:35.895Z", + "contributors": [ + "Sebastianz" + ] + }, + "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/Property_Template": { + "modified": "2019-01-16T14:33:16.131Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Sebastianz", + "fscholz", + "ethertank", + "The Witcher", + "Michael2402" + ] + }, + "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/Right": { + "modified": "2020-10-15T21:08:55.796Z", + "contributors": [ + "SJW", + "fscholz", + "Sebastianz", + "FredB", + "The Witcher" + ] + }, + "Web/CSS/Spezifität": { + "modified": "2019-03-23T23:11:49.533Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Tools": { + "modified": "2019-03-23T22:43:38.676Z", + "contributors": [ + "Sebastianz", + "creativenitish" + ] + }, + "Web/CSS/Tools/Cubic_Bezier_Generator": { + "modified": "2019-03-23T22:43:38.857Z", + "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/Vererbung": { + "modified": "2019-03-23T23:13:09.412Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/WebKit_Extensions": { + "modified": "2019-03-23T23:23:45.505Z", + "contributors": [ + "ExE-Boss", + "jlnr", + "SJW" + ] + }, + "Web/CSS/Wertdefinitionssyntax": { + "modified": "2019-03-23T23:11:56.504Z", + "contributors": [ + "Sebastianz", + "Prinz_Rana", + "Krenair", + "prayash" + ] + }, + "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/auto": { + "modified": "2019-03-23T23:23:49.598Z", + "contributors": [ + "SJW" + ] + }, + "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/berechneter_Wert": { + "modified": "2019-03-23T23:13:10.466Z", + "contributors": [ + "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-decoration-break": { + "modified": "2020-10-15T21:39:28.136Z", + "contributors": [ + "SJW", + "teoli" + ] + }, + "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/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/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/ersetztes_Element": { + "modified": "2019-03-23T22:00:32.824Z", + "contributors": [ + "Sebastianz" + ] + }, + "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-10-15T21:14:18.304Z", + "contributors": [ + "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/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-gap": { + "modified": "2020-10-15T22:00:43.740Z", + "contributors": [ + "AlexWayhill", + "Craeckerffm" + ] + }, + "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/initial": { + "modified": "2019-03-23T23:22:15.583Z", + "contributors": [ + "ralfstx", + "ansgar", + "SJW" + ] + }, + "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/linear-gradient()": { + "modified": "2020-11-16T08:56:43.415Z", + "contributors": [ + "chrisdavidmills", + "marcus-at-localhost", + "JuSchu", + "sahin", + "Sebastianz", + "prayash", + "auranvesdranor" + ] + }, + "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/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/none": { + "modified": "2019-03-23T23:23:49.504Z", + "contributors": [ + "SJW" + ] + }, + "Web/CSS/normal": { + "modified": "2019-03-23T23:23:47.885Z", + "contributors": [ + "dio", + "SJW" + ] + }, + "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/object-position": { + "modified": "2019-03-23T22:11:15.878Z", + "contributors": [ + "Craeckerffm" + ] + }, + "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/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/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/tatsächlicher_Wert": { + "modified": "2019-03-23T22:43:32.481Z", + "contributors": [ + "schlagi123", + "Sebastianz" + ] + }, + "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-10-15T21:31:19.370Z", + "contributors": [ + "LoVo666", + "SJW", + "wilmaedd", + "Sebastianz", + "fscholz", + "MatzeMarcel" + ] + }, + "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/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/vertical-align": { + "modified": "2020-10-15T21:14:21.203Z", + "contributors": [ + "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-03T14:57:27.603Z", + "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/word-wrap": { + "modified": "2020-10-15T21:38:14.535Z", + "contributors": [ + "SJW", + "ksuess", + "screeny05", + "Clubfan22", + "fscholz", + "Sebastianz", + "spiegelp" + ] + }, + "Web/CSS/z-index": { + "modified": "2020-11-24T17:13:13.731Z", + "contributors": [ + "Johuspect", + "SJW", + "chrisdavidmills", + "steve-stnhbr", + "Sebastianz", + "fscholz", + "rwetzlmayr", + "axlwaii" + ] + }, + "Web/Demos_of_open_web_technologies": { + "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/Events/DOMContentLoaded": { + "modified": "2019-04-30T14:16:07.184Z", + "contributors": [ + "wbamberg", + "timvancleef", + "forrestkirby", + "fscholz", + "Sewi", + "horlabs" + ] + }, + "Web/Events/change": { + "modified": "2019-03-23T23:08:15.170Z", + "contributors": [ + "fscholz", + "spiegelp" + ] + }, + "Web/Events/load": { + "modified": "2019-09-11T09:06:16.530Z", + "contributors": [ + "wbamberg", + "fscholz", + "LeoDecking" + ] + }, + "Web/Events/readystatechange": { + "modified": "2019-03-23T22:13:59.735Z", + "contributors": [ + "fscholz", + "mdnde", + "cussack", + "Lepstr" + ] + }, + "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/Erste_Schritte": { + "modified": "2020-08-11T10:37:53.338Z", + "contributors": [ + "merlincom" + ] + }, + "Web/Guide/CSS/Getting_started": { + "modified": "2019-03-24T00:05:49.642Z", + "contributors": [ + "teoli", + "fscholz", + "DavidWalsh" + ] + }, + "Web/Guide/CSS/Getting_started/Farbe": { + "modified": "2019-03-23T23:08:03.393Z", + "contributors": [ + "spiegelp", + "thkoch" + ] + }, + "Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung": { + "modified": "2019-03-23T22:49:16.030Z", + "contributors": [ + "spiegelp" + ] + }, + "Web/Guide/CSS/Getting_started/Lesbares_CSS": { + "modified": "2019-03-23T22:41:33.439Z", + "contributors": [ + "spiegelp" + ] + }, + "Web/Guide/CSS/Getting_started/Selektoren": { + "modified": "2019-03-23T23:11:23.467Z", + "contributors": [ + "woiddale", + "spiegelp", + "hpkainz" + ] + }, + "Web/Guide/CSS/Getting_started/Textstyles": { + "modified": "2019-03-23T22:49:16.242Z", + "contributors": [ + "spiegelp" + ] + }, + "Web/Guide/CSS/Getting_started/Was_ist_CSS": { + "modified": "2020-05-05T12:04:06.710Z", + "contributors": [ + "Helge-HH", + "fhwfzfge", + "msc1979", + "fscholz", + "Palmstroem", + "barning" + ] + }, + "Web/Guide/CSS/Getting_started/Why_use_CSS": { + "modified": "2019-03-23T22:57:29.159Z", + "contributors": [ + "fhwfzfge", + "Palmstroem" + ] + }, + "Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert": { + "modified": "2019-03-23T22:57:04.436Z", + "contributors": [ + "Palmstroem" + ] + }, + "Web/Guide/CSS/Scaling_background_images": { + "modified": "2019-03-23T23:06:19.663Z", + "contributors": [ + "sos4nt", + "mrstork", + "webwirbel" + ] + }, + "Web/Guide/DOM": { + "modified": "2019-03-23T23:28:11.671Z", + "contributors": [ + "Sheppy" + ] + }, + "Web/Guide/DOM/Manipulating_the_browser_history": { + "modified": "2019-03-23T23:28:10.854Z", + "contributors": [ + "wanst", + "NiklasMerz", + "daniel-evers", + "Adowrath", + "serv-inc", + "Oliver_Schafeld", + "BugHunter2k", + "christian314159", + "darksider3" + ] + }, + "Web/Guide/Events": { + "modified": "2019-03-18T21:10:49.464Z", + "contributors": [ + "stef4412", + "gportioli" + ] + }, + "Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-18T20:36:47.550Z", + "contributors": [ + "td8" + ] + }, + "Web/Guide/Graphics": { + "modified": "2019-03-23T23:05:58.536Z", + "contributors": [ + "mdschweda", + "Aloso", + "Cginybetty" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial": { + "modified": "2020-07-31T10:20:16.447Z", + "contributors": [ + "mgrubinger", + "sigoa", + "surferboy250", + "GeorgKern", + "Leun4m", + "medium-endian", + "manni66", + "pixunil" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Advanced_animations": { + "modified": "2019-03-23T22:48:52.383Z", + "contributors": [ + "teoli", + "jumpball" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors": { + "modified": "2019-10-10T16:33:46.525Z", + "contributors": [ + "Sebastianz", + "GeorgKern" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Basic_animations": { + "modified": "2019-03-18T21:45:29.279Z", + "contributors": [ + "RmnWtnkmp" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Bilder": { + "modified": "2019-03-23T23:12:04.746Z", + "contributors": [ + "sombrastudios", + "teoli", + "Leun4m", + "thedaft", + "pixunil" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren": { + "modified": "2019-03-18T21:47:09.896Z", + "contributors": [ + "SimonBuxx" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Drawing_text": { + "modified": "2019-03-18T21:38:17.565Z", + "contributors": [ + "Johann150" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen": { + "modified": "2019-10-06T12:20:20.273Z", + "contributors": [ + "I_I", + "oezpeda", + "Siphalor", + "teoli", + "Leun4m", + "thedaft", + "pixunil" + ] + }, + "Web/Guide/HTML/Canvas_Tutorial/Grundlagen": { + "modified": "2019-10-06T12:11:53.548Z", + "contributors": [ + "I_I", + "fheckl", + "FelixLehmann", + "P5ych0", + "teoli", + "Leun4m", + "medium-endian", + "pixunil" + ] + }, + "Web/Guide/HTML/Content_Editable": { + "modified": "2020-02-12T02:09:56.043Z", + "contributors": [ + "blackjack4494", + "lxdiamond" + ] + }, + "Web/Guide/HTML/Inhaltskategorien": { + "modified": "2020-07-16T11:12:55.534Z", + "contributors": [ + "matthiasulrich", + "Sebastianz", + "jumpball" + ] + }, + "Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document": { + "modified": "2019-03-18T20:37:20.242Z", + "contributors": [ + "SebinNyshkim", + "BlackRebell89" + ] + }, + "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/Applying_color": { + "modified": "2019-03-18T21:41:16.488Z", + "contributors": [ + "DasRudelndeRudel", + "fhwfzfge" + ] + }, + "Web/HTML/Attributes": { + "modified": "2020-08-17T16:24:34.561Z", + "contributors": [ + "Gitti039", + "steemit-halloworld", + "lkreimann", + "schlagi123", + "LazerPhil", + "Anonymous", + "StevenS77" + ] + }, + "Web/HTML/Block-level_elemente": { + "modified": "2020-05-07T06:16:30.382Z", + "contributors": [ + "zuzuzu", + "Loilo", + "mdschweda", + "drgn", + "VJSchneid", + "teoli", + "lukas.oppermann" + ] + }, + "Web/HTML/Canvas": { + "modified": "2019-03-23T23:16:11.989Z", + "contributors": [ + "sigoa", + "petacat", + "Aloso", + "barning", + "andreas.remdt" + ] + }, + "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/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/button": { + "modified": "2020-01-04T13:22:17.254Z", + "contributors": [ + "use-x", + "Breaker222", + "Sebastianz", + "Sweapz" + ] + }, + "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/h1-h6": { + "modified": "2019-03-24T00:04:35.426Z", + "contributors": [ + "schlagi123", + "teoli", + "fscholz" + ] + }, + "Web/HTML/Element/head": { + "modified": "2019-03-24T00:04:41.043Z", + "contributors": [ + "schlagi123", + "teoli", + "fscholz", + "Crash" + ] + }, + "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/th": { + "modified": "2019-03-23T22:02:40.278Z", + "contributors": [ + "dio" + ] + }, + "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/Globale_Attribute": { + "modified": "2020-10-15T21:26:14.135Z", + "contributors": [ + "LoVo666", + "qjubic", + "pixunil" + ] + }, + "Web/HTML/Globale_Attribute/accesskey": { + "modified": "2020-10-15T22:03:59.818Z", + "contributors": [ + "Claas" + ] + }, + "Web/HTML/Globale_Attribute/autocapitalize": { + "modified": "2020-10-15T22:05:02.265Z", + "contributors": [ + "alaskaa" + ] + }, + "Web/HTML/Globale_Attribute/class": { + "modified": "2019-03-23T22:53:31.655Z", + "contributors": [ + "sigoa", + "lxdiamond" + ] + }, + "Web/HTML/Globale_Attribute/contenteditable": { + "modified": "2019-03-18T21:36:35.603Z", + "contributors": [ + "4223", + "Claas" + ] + }, + "Web/HTML/Globale_Attribute/dir": { + "modified": "2020-10-15T22:05:39.463Z", + "contributors": [ + "RewoSiedge" + ] + }, + "Web/HTML/Globale_Attribute/draggable": { + "modified": "2019-03-23T22:47:23.466Z", + "contributors": [ + "schlagi123", + "RmnWtnkmp", + "rstarke-dd" + ] + }, + "Web/HTML/Globale_Attribute/dropzone": { + "modified": "2020-10-15T21:40:11.332Z", + "contributors": [ + "kaljak", + "RmnWtnkmp" + ] + }, + "Web/HTML/Globale_Attribute/hidden": { + "modified": "2020-10-15T21:38:08.779Z", + "contributors": [ + "fscholz", + "Oliver_Schafeld", + "RmnWtnkmp", + "skl" + ] + }, + "Web/HTML/Globale_Attribute/id": { + "modified": "2019-03-18T21:47:05.388Z", + "contributors": [ + "BlaM", + "skl" + ] + }, + "Web/HTML/Globale_Attribute/inputmode": { + "modified": "2020-10-15T22:14:49.189Z", + "contributors": [ + "sklicek" + ] + }, + "Web/HTML/Globale_Attribute/is": { + "modified": "2020-10-15T22:23:53.794Z", + "contributors": [ + "LoVo666" + ] + }, + "Web/HTML/Globale_Attribute/kontextmenu": { + "modified": "2020-03-26T16:11:41.701Z", + "contributors": [ + "MarcusRiemer", + "SphinxKnight", + "ctexxx" + ] + }, + "Web/HTML/Globale_Attribute/lang": { + "modified": "2020-10-15T21:51:21.501Z", + "contributors": [ + "kaljak", + "RmnWtnkmp" + ] + }, + "Web/HTML/Globale_Attribute/style": { + "modified": "2020-08-18T11:36:01.283Z", + "contributors": [ + "FelixSchwarz", + "tairt", + "RmnWtnkmp" + ] + }, + "Web/HTML/Globale_Attribute/tabindex": { + "modified": "2020-10-15T22:17:29.883Z", + "contributors": [ + "Michael-1", + "vssn" + ] + }, + "Web/HTML/Globale_Attribute/title": { + "modified": "2019-03-23T22:32:47.288Z", + "contributors": [ + "alaskaa", + "klausinger", + "eluchsinger" + ] + }, + "Web/HTML/Globale_Attribute/translate": { + "modified": "2019-10-21T21:28:23.890Z", + "contributors": [ + "LoVo666" + ] + }, + "Web/HTML/HTML5": { + "modified": "2019-03-23T23:33:45.828Z", + "contributors": [ + "suriyaa", + "teoli", + "timausk", + "thorsten.rinne", + "matze", + "nothine" + ] + }, + "Web/HTML/HTML5/HTML5_element_list": { + "modified": "2019-03-23T23:37:56.525Z", + "contributors": [ + "gk-freiheit", + "rawcat", + "teoli", + "AickeSchulz", + "jwl" + ] + }, + "Web/HTML/Inline_elemente": { + "modified": "2019-03-23T23:18:01.940Z", + "contributors": [ + "Aryx", + "petergloor", + "teoli", + "lukas.oppermann" + ] + }, + "Web/HTML/Referenz": { + "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/CORSFehlenderAllowHeaderAusPreflight": { + "modified": "2020-03-31T09:46:01.871Z", + "contributors": [ + "cradloff" + ] + }, + "Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben": { + "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_FAQ": { + "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/Connection": { + "modified": "2020-10-15T22:35:15.341Z", + "contributors": [ + "cheitmanntrade" + ] + }, + "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/Set-Cookie": { + "modified": "2020-12-03T07:50:32.705Z", + "contributors": [ + "hamishwillee" + ] + }, + "Web/HTTP/Headers/Set-Cookie/SameSite": { + "modified": "2020-12-03T07:50:35.793Z", + "contributors": [ + "dega" + ] + }, + "Web/HTTP/Headers/Tk": { + "modified": "2019-03-23T22:03:12.387Z", + "contributors": [ + "timmyRS" + ] + }, + "Web/HTTP/Headers/User-Agent": { + "modified": "2020-10-15T21:58:47.163Z", + "contributors": [ + "fscholz" + ] + }, + "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/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/About_JavaScript": { + "modified": "2020-03-12T19:39:49.162Z", + "contributors": [ + "schlagi123", + "judy55", + "loki" + ] + }, + "Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften": { + "modified": "2020-05-27T07:04:55.127Z", + "contributors": [ + "zuzuzu" + ] + }, + "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/Datenstrukturen": { + "modified": "2020-03-12T19:40:01.103Z", + "contributors": [ + "BenjHawk", + "GR_Fuchs", + "fL03", + "schlagi123", + "twarncke", + "yampus", + "ChristianLuxem", + "nodexo", + "fscholz", + "siggi-heltau", + "FabianBeiner", + "spiegelp" + ] + }, + "Web/JavaScript/Eine_Wiedereinfuehrung_in_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/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript": { + "modified": "2019-03-23T22:12:16.123Z", + "contributors": [ + "chrisdavidmills", + "QClonesClan" + ] + }, + "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/Ausdruecke_und_Operatoren": { + "modified": "2020-03-12T19:38:40.241Z", + "contributors": [ + "occcy", + "stefboll", + "HaayeHenricus", + "schlagi123", + "MelanieVeigl", + "Kevinci", + "fscholz", + "DavidWalsh", + "eminor" + ] + }, + "Web/JavaScript/Guide/Einführung": { + "modified": "2020-03-12T19:40:52.952Z", + "contributors": [ + "woiddale", + "schlagi123", + "aldec-dv", + "NedNisW", + "janjo", + "Chtheile", + "miniemuff", + "fscholz", + "Sir.Codewright" + ] + }, + "Web/JavaScript/Guide/Feinheiten_des_Objektmodells": { + "modified": "2020-10-03T02:52:53.149Z", + "contributors": [ + "c0dewalker", + "wbamberg", + "schlagi123", + "sigoa", + "DoctypeRosenthal", + "Venhaus", + "crasher666", + "IngoB", + "fscholz", + "eminor" + ] + }, + "Web/JavaScript/Guide/Funktionen": { + "modified": "2020-03-12T19:38:37.078Z", + "contributors": [ + "dmho", + "cami", + "loicyondjeu", + "stefboll", + "woiddale", + "schlagi123", + "b-lack", + "vetoCode", + "fscholz", + "eminor" + ] + }, + "Web/JavaScript/Guide/Grammatik_und_Typen": { + "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/Keyed_collections": { + "modified": "2020-07-15T01:51:42.838Z", + "contributors": [ + "kre", + "Cerberooo", + "cami", + "Julian-B90", + "schlagi123" + ] + }, + "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung": { + "modified": "2020-03-12T19:37:55.717Z", + "contributors": [ + "cami", + "deklesen", + "woiddale", + "schlagi123", + "SaschaHeyer", + "PreCodeEU", + "StevenS77", + "jwhitlock", + "KarolineCat", + "fscholz", + "vsenol", + "eminor" + ] + }, + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-03-12T19:47:40.641Z", + "contributors": [ + "mschleeweiss", + "schlagi123" + ] + }, + "Web/JavaScript/Guide/Mit_Objekten_arbeiten": { + "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/Guide/Modules": { + "modified": "2020-10-15T22:29:06.922Z", + "contributors": [ + "christophbinner" + ] + }, + "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/Textformatierung": { + "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/schleifen_und_iterationen": { + "modified": "2020-03-12T19:43:05.832Z", + "contributors": [ + "schlagi123", + "j0ck", + "moreadrenalin" + ] + }, + "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/Introduction_to_Object-Oriented_JavaScript": { + "modified": "2020-03-12T19:39:48.552Z", + "contributors": [ + "ant1d0t", + "nemo182", + "christianhegedues", + "BurnerPat", + "schlagi123", + "neverendingo", + "creitiv", + "DunklesBlut88", + "paesku", + "bricks", + "fabiankreutz", + "spiegelp" + ] + }, + "Web/JavaScript/JavaScript_technologieuebersicht": { + "modified": "2020-03-12T19:39:42.418Z", + "contributors": [ + "lesch", + "fl1p", + "spiegelp" + ] + }, + "Web/JavaScript/Language_Resources": { + "modified": "2020-03-12T19:38:27.478Z", + "contributors": [ + "schlagi123", + "hapeit", + "fscholz", + "Aurel" + ] + }, + "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/Fehler": { + "modified": "2020-03-12T19:43:41.868Z", + "contributors": [ + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Already_has_pragma": { + "modified": "2020-03-12T19:47:20.172Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Array_sort_argument": { + "modified": "2020-03-12T19:47:33.148Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Bad_octal": { + "modified": "2020-03-12T19:47:25.600Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Bad_radix": { + "modified": "2020-03-12T19:47:40.678Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Bad_regexp_flag": { + "modified": "2020-03-12T19:47:43.378Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Bad_return_or_yield": { + "modified": "2020-03-12T19:47:36.755Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Called_on_incompatible_type": { + "modified": "2020-03-12T19:47:23.087Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init": { + "modified": "2020-03-12T19:47:39.951Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Cant_access_property": { + "modified": "2020-03-12T19:48:57.195Z", + "contributors": [ + "micschwarz" + ] + }, + "Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible": { + "modified": "2020-03-12T19:47:37.913Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Cant_delete": { + "modified": "2020-03-12T19:47:33.700Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Cant_redefine_property": { + "modified": "2020-03-12T19:47:33.994Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Cyclic_object_value": { + "modified": "2020-03-12T19:47:32.067Z", + "contributors": [ + "martinr1604", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Dead_object": { + "modified": "2020-03-12T19:47:34.842Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Delete_in_strict_mode": { + "modified": "2020-03-12T19:47:47.727Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Deprecated_String_generics": { + "modified": "2020-03-12T19:47:17.153Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage": { + "modified": "2020-03-12T19:47:44.593Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Deprecated_expression_closures": { + "modified": "2020-03-12T19:47:23.525Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Deprecated_octal": { + "modified": "2020-03-12T19:47:46.456Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma": { + "modified": "2020-03-12T19:47:46.265Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat": { + "modified": "2020-03-12T19:47:24.103Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Equal_as_assign": { + "modified": "2020-03-12T19:47:33.976Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated": { + "modified": "2020-03-12T19:47:22.797Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Getter_only": { + "modified": "2020-03-12T19:47:33.589Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Identifier_after_number": { + "modified": "2020-03-12T19:47:39.577Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Illegal_character": { + "modified": "2020-03-12T19:47:40.583Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Invalid_array_length": { + "modified": "2020-03-12T19:43:36.993Z", + "contributors": [ + "schlagi123", + "yampus", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:46:39.233Z", + "contributors": [ + "schlagi123", + "Cripi" + ] + }, + "Web/JavaScript/Reference/Fehler/Invalid_const_assignment": { + "modified": "2020-03-12T19:47:33.651Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Invalid_date": { + "modified": "2020-03-12T19:47:16.548Z", + "contributors": [ + "schlagi123", + "fire-stone" + ] + }, + "Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer": { + "modified": "2020-03-12T19:47:50.395Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer": { + "modified": "2020-03-12T19:47:46.412Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/JSON_bad_parse": { + "modified": "2020-03-12T19:47:34.652Z", + "contributors": [ + "schlagi123", + "Jannik99" + ] + }, + "Web/JavaScript/Reference/Fehler/Malformed_URI": { + "modified": "2020-05-11T08:04:02.475Z", + "contributors": [ + "Skasi", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Malformed_formal_parameter": { + "modified": "2020-03-12T19:43:43.986Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_bracket_after_list": { + "modified": "2020-03-12T19:46:42.895Z", + "contributors": [ + "schlagi123", + "Stolzenhain" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id": { + "modified": "2020-03-12T19:47:39.916Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body": { + "modified": "2020-03-12T19:47:34.109Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:45:33.319Z", + "contributors": [ + "schlagi123", + "fire-stone" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_formal_parameter": { + "modified": "2020-03-12T19:47:38.482Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_initializer_in_const": { + "modified": "2020-03-12T19:47:35.587Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator": { + "modified": "2020-03-12T19:47:35.523Z", + "contributors": [ + "sicLotus", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:44:04.052Z", + "contributors": [ + "schlagi123", + "iimog", + "rolandbgd", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition": { + "modified": "2020-03-12T19:47:39.363Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:44:24.631Z", + "contributors": [ + "flufflepuff91", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/More_arguments_needed": { + "modified": "2020-03-12T19:47:35.019Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Negative_repetition_count": { + "modified": "2020-03-12T19:47:46.475Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/No_non-null_object": { + "modified": "2020-03-12T19:47:33.684Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/No_properties": { + "modified": "2020-03-12T19:46:21.338Z", + "contributors": [ + "schlagi123", + "timosperisen" + ] + }, + "Web/JavaScript/Reference/Fehler/No_variable_name": { + "modified": "2020-03-12T19:47:35.139Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Non_configurable_array_element": { + "modified": "2020-03-12T19:47:37.860Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Not_a_codepoint": { + "modified": "2020-03-12T19:44:01.592Z", + "contributors": [ + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Not_a_constructor": { + "modified": "2020-03-12T19:46:54.349Z", + "contributors": [ + "NiklasMerz", + "schlagi123", + "klug_mario" + ] + }, + "Web/JavaScript/Reference/Fehler/Not_a_function": { + "modified": "2020-03-12T19:45:23.396Z", + "contributors": [ + "flufflepuff91", + "schlagi123", + "fire-stone" + ] + }, + "Web/JavaScript/Reference/Fehler/Not_defined": { + "modified": "2020-03-12T19:44:11.129Z", + "contributors": [ + "flufflepuff91", + "schlagi123", + "BennoKieselstein", + "Bernd_L", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Precision_range": { + "modified": "2020-03-12T19:44:05.096Z", + "contributors": [ + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Property_access_denied": { + "modified": "2020-03-12T19:44:01.071Z", + "contributors": [ + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Read-only": { + "modified": "2020-03-12T19:47:33.685Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Redeclared_parameter": { + "modified": "2020-03-12T19:47:37.067Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value": { + "modified": "2020-03-12T19:47:39.369Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Reserved_identifier": { + "modified": "2020-03-12T19:47:46.391Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Resulting_string_too_large": { + "modified": "2020-03-12T19:47:46.172Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Stmt_after_return": { + "modified": "2020-03-12T19:43:39.489Z", + "contributors": [ + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params": { + "modified": "2020-03-12T19:47:45.620Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Too_much_recursion": { + "modified": "2020-03-12T19:43:58.453Z", + "contributors": [ + "schlagi123", + "olhaar", + "yampus", + "julmot", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments": { + "modified": "2020-03-12T19:47:33.971Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Undeclared_var": { + "modified": "2020-03-12T19:47:43.541Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Undefined_prop": { + "modified": "2020-03-12T19:44:10.591Z", + "contributors": [ + "schlagi123", + "ThomasFe", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Fehler/Unexpected_token": { + "modified": "2020-03-12T19:45:02.701Z", + "contributors": [ + "schlagi123", + "albasiba" + ] + }, + "Web/JavaScript/Reference/Fehler/Unexpected_type": { + "modified": "2020-03-12T19:45:54.249Z", + "contributors": [ + "schlagi123", + "thegeg", + "SusiHutzler", + "fire-stone", + "netalp" + ] + }, + "Web/JavaScript/Reference/Fehler/Unnamed_function_statement": { + "modified": "2020-03-12T19:47:45.907Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Unterminated_string_literal": { + "modified": "2020-03-12T19:47:34.534Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/Var_hides_argument": { + "modified": "2020-03-12T19:47:33.618Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/in_operator_no_object": { + "modified": "2020-03-12T19:47:34.037Z", + "contributors": [ + "matthias85", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand": { + "modified": "2020-03-12T19:47:33.003Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Fehler/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/Default_parameters": { + "modified": "2020-10-15T21:51:29.730Z", + "contributors": [ + "schlagi123", + "Eiknheimer", + "serv-inc", + "StevenS77", + "kdex", + "leonschwanitz" + ] + }, + "Web/JavaScript/Reference/Functions/Methoden_Definitionen": { + "modified": "2020-03-12T19:40:25.737Z", + "contributors": [ + "kdex", + "schlagi123", + "siggi-heltau" + ] + }, + "Web/JavaScript/Reference/Functions/Pfeilfunktionen": { + "modified": "2020-10-15T21:50:51.602Z", + "contributors": [ + "schlagi123", + "Sixl-Daniel", + "kdex", + "sja", + "Eiknheimer", + "GuidoSchweizer", + "mhash17" + ] + }, + "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_parameter": { + "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/Prototypen": { + "modified": "2020-10-15T21:52:42.525Z", + "contributors": [ + "Stoeoeoe", + "schlagi123", + "StevenS77" + ] + }, + "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/toSource": { + "modified": "2020-10-15T22:01:02.840Z", + "contributors": [ + "schlagi123" + ] + }, + "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/prototype": { + "modified": "2020-10-15T22:01:15.339Z", + "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/AsyncFunction/prototype": { + "modified": "2020-10-15T22:01:09.829Z", + "contributors": [ + "schlagi123" + ] + }, + "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/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/wake": { + "modified": "2020-10-15T22:01:24.441Z", + "contributors": [ + "Cortys", + "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/prototype": { + "modified": "2020-10-15T21:45:26.885Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { + "modified": "2020-10-15T21:45:27.090Z", + "contributors": [ + "schlagi123" + ] + }, + "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/prototype": { + "modified": "2020-10-15T21:46:53.689Z", + "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/prototype": { + "modified": "2020-10-15T21:45:25.297Z", + "contributors": [ + "schlagi123", + "Schollator" + ] + }, + "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/toSource": { + "modified": "2020-10-15T21:45:56.411Z", + "contributors": [ + "teoli", + "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/prototype": { + "modified": "2020-10-15T21:46:17.159Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Error/toSource": { + "modified": "2020-10-15T21:46:53.703Z", + "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/EvalError/prototype": { + "modified": "2020-10-15T22:01:29.746Z", + "contributors": [ + "schlagi123" + ] + }, + "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/prototype": { + "modified": "2020-10-15T22:01:36.587Z", + "contributors": [ + "xdevs23", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Function/toSource": { + "modified": "2020-10-15T22:01:47.277Z", + "contributors": [ + "schlagi123" + ] + }, + "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/GeneratorFunction/prototype": { + "modified": "2020-10-15T22:02:06.474Z", + "contributors": [ + "schlagi123" + ] + }, + "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/InternalError/prototype": { + "modified": "2020-10-15T22:02:05.813Z", + "contributors": [ + "schlagi123" + ] + }, + "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/prototype": { + "modified": "2020-10-15T22:02:09.634Z", + "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/prototype": { + "modified": "2020-10-15T21:46:02.893Z", + "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/prototype": { + "modified": "2020-10-15T22:03:24.903Z", + "contributors": [ + "fscholz", + "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/Map": { + "modified": "2020-10-15T21:39:41.133Z", + "contributors": [ + "verij51", + "Streamities", + "kdex", + "Flonk", + "schlagi123", + "the-bluesnik", + "GinoHereIam", + "Chris-CR", + "Fearodin" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { + "modified": "2020-10-15T22:01:27.148Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/@@species": { + "modified": "2020-10-15T22:01:26.820Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { + "modified": "2020-10-15T22:01:26.636Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T22:01:24.339Z", + "contributors": [ + "shaedrich", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T22:01:25.242Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/entries": { + "modified": "2020-10-15T22:01:26.606Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T21:53:59.055Z", + "contributors": [ + "schlagi123", + "Techworker" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/get": { + "modified": "2020-10-15T22:01:25.184Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/has": { + "modified": "2020-10-15T22:01:25.655Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/keys": { + "modified": "2020-10-15T21:57:34.550Z", + "contributors": [ + "schlagi123", + "patpir" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/prototype": { + "modified": "2020-10-15T22:01:26.449Z", + "contributors": [ + "Morphbreed", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/set": { + "modified": "2020-10-15T22:01:24.339Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/size": { + "modified": "2020-10-15T22:01:24.292Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Map/values": { + "modified": "2020-10-15T22:01:25.714Z", + "contributors": [ + "schlagi123" + ] + }, + "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/math.random": { + "modified": "2020-10-15T21:36:41.048Z", + "contributors": [ + "grumpy-cat", + "schlagi123", + "cami", + "serv-inc", + "Dargmuesli" + ] + }, + "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/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/prototype": { + "modified": "2020-10-15T21:45:14.479Z", + "contributors": [ + "schlagi123", + "doeck" + ] + }, + "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/toSource": { + "modified": "2020-10-15T21:45:18.319Z", + "contributors": [ + "schlagi123" + ] + }, + "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/__defineGetter__": { + "modified": "2019-03-23T22:08:08.241Z", + "contributors": [ + "Christian2507" + ] + }, + "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/defineProperty": { + "modified": "2019-07-01T07:52:37.430Z", + "contributors": [ + "JanSchuermannPH", + "Univream", + "tvormweg" + ] + }, + "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/prototype": { + "modified": "2019-03-23T22:30:41.741Z", + "contributors": [ + "peter30mar2017", + "fl1p" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Object/toSource": { + "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/RangeError": { + "modified": "2019-03-23T22:12:22.680Z", + "contributors": [ + "jameshkramer" + ] + }, + "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": { + "modified": "2019-03-23T22:12:08.670Z", + "contributors": [ + "ThomasFe" + ] + }, + "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/TrimLeft": { + "modified": "2020-10-15T21:48:35.629Z", + "contributors": [ + "teoli", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/TrimRight": { + "modified": "2020-10-15T21:47:40.889Z", + "contributors": [ + "teoli", + "schlagi123", + "Zertrax" + ] + }, + "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/prototype": { + "modified": "2020-10-15T22:24:44.810Z", + "contributors": [ + "Symtex99" + ] + }, + "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/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/suchen": { + "modified": "2020-10-15T22:11:40.635Z", + "contributors": [ + "tobipch", + "blackjack4494", + "Cr4zyG4m3rLP" + ] + }, + "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/SyntaxError": { + "modified": "2020-10-15T21:46:23.938Z", + "contributors": [ + "schlagi123", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": { + "modified": "2020-10-15T21:46:29.639Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:51:09.089Z", + "contributors": [ + "schlagi123", + "Sheggy" + ] + }, + "Web/JavaScript/Reference/Global_Objects/TypeError/prototype": { + "modified": "2020-10-15T21:58:39.373Z", + "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/null": { + "modified": "2020-10-15T21:32:16.691Z", + "contributors": [ + "schlagi123", + "HolgerJeromin", + "cuatro" + ] + }, + "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/Global_Objects/uneval": { + "modified": "2020-03-12T19:44:53.530Z", + "contributors": [ + "teoli", + "SamBrishes" + ] + }, + "Web/JavaScript/Reference/Iteration_protocols": { + "modified": "2020-03-12T19:47:50.502Z", + "contributors": [ + "P215W", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Klassen": { + "modified": "2020-03-12T19:41:32.478Z", + "contributors": [ + "schlagi123", + "Daniel_Sixl", + "Husi012", + "dehenne", + "DPangerl", + "jaller94", + "chiborg", + "akumagamo", + "neutr0nis", + "LevitatingOrange" + ] + }, + "Web/JavaScript/Reference/Klassen/constructor": { + "modified": "2020-03-12T19:43:34.404Z", + "contributors": [ + "kdex", + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Klassen/extends": { + "modified": "2020-03-12T19:43:31.080Z", + "contributors": [ + "hporten", + "kdex", + "buboh", + "schlagi123", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Klassen/static": { + "modified": "2020-10-15T21:45:38.442Z", + "contributors": [ + "kdex", + "schlagi123", + "Nimelrian", + "jahe", + "marvhock", + "kannix", + "akumagamo" + ] + }, + "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/Bitwise_Operatoren": { + "modified": "2020-10-15T21:51:28.246Z", + "contributors": [ + "fscholz", + "kaljak", + "schlagi123", + "mizhac", + "MemoWalk" + ] + }, + "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/Dekrement": { + "modified": "2020-10-15T22:34:53.783Z", + "contributors": [ + "Klingohle" + ] + }, + "Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung": { + "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/Inkrement": { + "modified": "2020-10-15T22:34:54.059Z", + "contributors": [ + "Klingohle" + ] + }, + "Web/JavaScript/Reference/Operators/Logische_Operatoren": { + "modified": "2020-10-15T21:43:07.470Z", + "contributors": [ + "schlagi123", + "LeisureLarry", + "Webastronaut" + ] + }, + "Web/JavaScript/Reference/Operators/Modulo": { + "modified": "2020-10-15T22:34:54.665Z", + "contributors": [ + "Klingohle" + ] + }, + "Web/JavaScript/Reference/Operators/Objekt_Initialisierer": { + "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/Optionale_Verkettung": { + "modified": "2020-10-15T22:26:51.885Z", + "contributors": [ + "TorbenKoehn" + ] + }, + "Web/JavaScript/Reference/Operators/Pipeline_operator": { + "modified": "2020-10-15T22:05:45.089Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Operators/Property_Accessors": { + "modified": "2020-10-15T21:55:35.876Z", + "contributors": [ + "schlagi123", + "timosperisen" + ] + }, + "Web/JavaScript/Reference/Operators/Spread_operator": { + "modified": "2020-03-12T19:42:35.849Z", + "contributors": [ + "developitz", + "mschleeweiss", + "kdex", + "theRealBaccata", + "schlagi123", + "sbusch", + "olhaar" + ] + }, + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:05:09.977Z", + "contributors": [ + "mischah", + "shaedrich", + "schlagi123", + "mschleeweiss" + ] + }, + "Web/JavaScript/Reference/Operators/Vergleichsoperatoren": { + "modified": "2020-10-15T21:37:40.074Z", + "contributors": [ + "Hocdoc", + "christophfriedrich", + "schlagi123", + "Elyasin", + "loki" + ] + }, + "Web/JavaScript/Reference/Operators/Zuweisungsoperator": { + "modified": "2020-10-15T21:48:40.239Z", + "contributors": [ + "wbamberg", + "schlagi123" + ] + }, + "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/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/default": { + "modified": "2020-10-15T21:46:29.118Z", + "contributors": [ + "schlagi123", + "eluchsinger" + ] + }, + "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-10-15T21:45:47.005Z", + "contributors": [ + "oliver-gramberg", + "arothweiler", + "schlagi123", + "xstable", + "yampus", + "kdex", + "KuhnEDV" + ] + }, + "Web/JavaScript/Reference/Statements/funktion": { + "modified": "2020-03-12T19:42:16.537Z", + "contributors": [ + "yampus", + "trillerpfeife", + "neverendingo" + ] + }, + "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/Veraltete_und_abgeschaffte_Features": { + "modified": "2020-03-12T19:43:15.969Z", + "contributors": [ + "PointedEars", + "jumpball" + ] + }, + "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol": { + "modified": "2020-03-12T19:48:53.999Z", + "contributors": [ + "ctexxx" + ] + }, + "Web/JavaScript/Reference/template_strings": { + "modified": "2020-10-15T21:38:21.925Z", + "contributors": [ + "zuzuzu", + "sandrosc", + "antstei", + "FelixSchwarzmeier", + "Editmonkey", + "SphinxKnight", + "0815fox", + "chrillek", + "22samuelk", + "stehefan" + ] + }, + "Web/JavaScript/Speicherverwaltung": { + "modified": "2020-03-12T19:38:43.251Z", + "contributors": [ + "FERNman", + "fscholz", + "Mitja", + "eminor" + ] + }, + "Web/JavaScript/Typed_arrays": { + "modified": "2020-03-12T19:40:57.461Z", + "contributors": [ + "flying-sheep", + "ksm2", + "Adowrath", + "schlagi123", + "sspringer82", + "fscholz", + "rogerraetzel" + ] + }, + "Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung": { + "modified": "2020-03-12T19:40:00.637Z", + "contributors": [ + "schlagi123", + "outverness", + "kdex", + "fscholz", + "spiegelp" + ] + }, + "Web/Manifest": { + "modified": "2020-08-31T08:04:51.977Z", + "contributors": [ + "Zyndoras", + "gpion", + "SphinxKnight", + "tomknig", + "Lanseuo", + "lionralfs", + "hrjhn", + "McSodbrenner", + "fscholz", + "mojoaxel", + "tempelgogo", + "yzanomi" + ] + }, + "Web/Manifest/short_name": { + "modified": "2020-10-15T22:31:31.945Z", + "contributors": [ + "kevin98" + ] + }, + "Web/MathML": { + "modified": "2019-03-23T22:48:05.789Z", + "contributors": [ + "Draussenduscher", + "jumpball" + ] + }, + "Web/MathML/Attribute": { + "modified": "2019-03-23T22:41:26.024Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Attribute/Werte": { + "modified": "2019-03-18T21:17:29.433Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Beispiele": { + "modified": "2019-03-23T22:41:30.288Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Beispiele/MathML_Satz_des_Pythagoras": { + "modified": "2019-03-18T21:15:50.621Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Beispiele/Quadratische_Gleichung": { + "modified": "2019-03-23T22:41:16.866Z", + "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/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/Reference": { + "modified": "2020-07-03T18:35:25.162Z", + "contributors": [ + "duckymirror", + "fhwfzfge", + "Patrick_St.", + "Nickolay" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:18:19.126Z", + "contributors": [ + "goligo", + "Hanibal1963", + "AngelSankturio" + ] + }, + "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/Einführung": { + "modified": "2019-01-16T14:32:58.426Z", + "contributors": [ + "teoli", + "fscholz", + "Mickiboy" + ] + }, + "Web/SVG/Tutorial/Fills_and_Strokes": { + "modified": "2019-03-23T22:15:38.417Z", + "contributors": [ + "kevinfoerster", + "sebastianbarfurth" + ] + }, + "Web/SVG/Tutorial/Pfade": { + "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_Schriftarten": { + "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/Security/Public_Key_Pinning": { + "modified": "2020-10-15T21:39:59.794Z", + "contributors": [ + "Dschubba", + "GanbaruTobi", + "rugk", + "TheAlxH", + "mozjan" + ] + }, + "Web/WebAPI": { + "modified": "2019-03-23T23:21:31.048Z", + "contributors": [ + "wbamberg", + "fscholz", + "casarock", + "sbarthel", + "TitanNano" + ] + }, + "Web/WebAPI/verwenden_von_geolocation": { + "modified": "2019-03-23T22:52:49.349Z", + "contributors": [ + "shaedrich", + "42triangles", + "silend" + ] + }, + "Web/Web_Components": { + "modified": "2019-03-18T20:58:34.307Z", + "contributors": [ + "SetTrend", + "vssn", + "pkos98", + "dreitzner", + "DomenicDenicola" + ] + }, + "Web/Web_Components/Custom_Elements": { + "modified": "2019-03-23T22:05:53.556Z", + "contributors": [ + "amelzer" + ] + }, + "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_Einführung": { + "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" + ] + }, + "WebSockets": { + "modified": "2019-03-23T22:59:48.670Z", + "contributors": [ + "Johann150", + "mvb1996" + ] + }, + "WebSockets/Writing_WebSocket_servers": { + "modified": "2020-08-15T02:07:04.944Z", + "contributors": [ + "otde2016" + ] + }, + "Web_Development/Mobile": { + "modified": "2019-03-23T23:29:04.325Z", + "contributors": [ + "wbamberg" + ] + }, + "Web_Development/Mobile/Responsive_design": { + "modified": "2019-03-23T23:29:04.477Z", + "contributors": [ + "HolgerSinn.Com" + ] + }, + "Webentwicklung": { + "modified": "2019-03-24T00:03:49.652Z", + "contributors": [ + "TornadoIDS", + "fscholz", + "Mrueegg" + ] + } +} \ No newline at end of file diff --git a/files/de/archive/add-ons/index.html b/files/de/archive/add-ons/index.html new file mode 100644 index 0000000000..9c0f942944 --- /dev/null +++ b/files/de/archive/add-ons/index.html @@ -0,0 +1,11 @@ +--- +title: Add-ons +slug: Archive/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons +--- +

Archived add-ons documentation.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/de/archive/add-ons/seamonkey_2/index.html b/files/de/archive/add-ons/seamonkey_2/index.html new file mode 100644 index 0000000000..ff0a0bcde2 --- /dev/null +++ b/files/de/archive/add-ons/seamonkey_2/index.html @@ -0,0 +1,281 @@ +--- +title: Extensions support in SeaMonkey 2 +slug: Archive/Add-ons/SeaMonkey_2 +translation_of: Archive/Add-ons/SeaMonkey_2 +--- +

{{AddonSidebar}}

+ +

Starting with SeaMonkey 2 Alpha 1 SeaMonkey supports toolkit/-style extensions. These type of extensions have many advantages for both users and developers compared to the old xpinstall/-style extensions.

+ +

The Basics

+ +

To support SeaMonkey 2 as a target application, you need to add it to the list of target applications in the extension's install.rdf file. The code for that will look something like this:

+ +
<em:targetApplication>
+  <!-- SeaMonkey -->
+  <Description>
+    <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id>
+    <em:minVersion>2.0</em:minVersion>
+    <em:maxVersion>2.*</em:maxVersion>
+  </Description>
+</em:targetApplication>
+ +

The install.js is not supported any more and should be removed.

+ +

Differences as compared to other toolkit/-based applications

+ + + +

URLbar Icons

+ +

To display a button with a menupopup in the urlbar-icons for both Firefox and SeaMonkey 2.0, use this code:

+ +

    <hbox id="urlbar-icons">
+         <image popup="myExt-menu"/>
+     </hbox>
+      <window id="main-window">
+         <menupopup id="myExt-menu">
+             <menuitem label="menuitem"/>
+             <menuitem label="menuitem"/>
+         </menupopup>
+     </window>

+ +

Instead of

+ +

    <hbox id="urlbar-icons">
+         <button type="menu">
+             <menupopup>
+                 <menuitem label="menuitem"/>
+                 <menuitem label="menuitem"/>
+                 <menuitem label="menuitem"/>
+             </menupopup>
+         </button>
+    </hbox>

+ +

Technical Note: The code that opens the URL history popup just looks for any menupopup, so it goes wrong if you add your own. Ordinary popups are fine of course.

+ +

The Statusbar

+ +

In Firefox 3 a new vbox has been added, called "browser-bottombox", which encloses the find bar and status bar at the bottom of the browser window. Although this doesn't affect the appearance of the display, it may affect your extension if it overlays chrome relative to these elements.

+ +

For example, if you overlay some chrome before the status bar, like this:

+ +
<vbox id="browser-bottombox">
+  <something insertbefore="status-bar" />
+</vbox>
+
+ +

Use the following technique to make your overlay work on both SeaMonkey 2 and Firefox 3:

+ +
<window id="main-window">
+  <vbox id="browser-bottombox" insertbefore="status-bar">
+    <something insertbefore="status-bar" />
+  </vbox>
+</window>
+
+ +

Thunderbird 3

+ +

gFolderDisplay API

+ +

SeaMonkey 2.0 only supports a reduced set of methods:

+ + + +

gMessageDisplay API

+ +

SeaMonkey 2.0 only supports a reduced set of methods:

+ + + +

JavaScript Tweaks

+ +

Firefox supports some shorthand in various places. These are so commonly available that developers often forget that they are not built-ins. SeaMonkey on the other hand defaults to not support them so they either need to be expanded to their proper forms or matching constants/variables need to be defined in custom code.

+ + + + + + + + + + + + + + + + + + + + + + + + +
ShorthandExpansion
CcComponents.classes
CiComponents.interfaces
CrComponents.results
CuComponents.utils
+ +

Multi-browser compatibility

+ +

To make an extension compatible with SeaMonkey as well as Firefox/Thunderbird, you may need to do different things depending on which application is running the extension.

+ +

In JavaScript code

+ +

You can use the following technique to detect the application:

+ +
const FIREFOX_ID = "{ec8030f7-c20a-464f-9b0e-13a3a9e97384}";
+const THUNDERBIRD_ID = "{3550f703-e582-4d05-9a08-453d09bdfdc6}";
+const SEAMONKEY_ID = "{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}";
+var appInfo = Components.classes["@mozilla.org/xre/app-info;1"]
+                        .getService(Components.interfaces.nsIXULAppInfo);
+if(appInfo.ID == FIREFOX_ID) {
+  // running under Firefox
+} else if(appInfo.ID == THUNDERBIRD_ID) {
+  // running under Thunderbird
+} else if(appInfo.ID == SEAMONKEY_ID) {
+  // running under SeaMonkey
+} else {
+  // another app
+}
+ +

See Using nsIXULAppInfo for more details.

+ +

In manifest file

+ +

SeaMonkey uses different overlays than other applications. You can use the application flag to select which overlay should be used with which application:

+ +
overlay chrome://browser/content/browser.xul chrome://myaddon/content/ffOverlay.xul application={ec8030f7-c20a-464f-9b0e-13a3a9e97384}
+overlay chrome://messenger/content/mailWindowOverlay.xul chrome://myaddon/content/tbOverlay.xul application={3550f703-e582-4d05-9a08-453d09bdfdc6}
+overlay chrome://navigator/content/navigator.xul chrome://myaddon/content/smOverlay.xul application={92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}
diff --git a/files/de/archive/apps/index.html b/files/de/archive/apps/index.html new file mode 100644 index 0000000000..bd2e2cad5c --- /dev/null +++ b/files/de/archive/apps/index.html @@ -0,0 +1,35 @@ +--- +title: Apps +slug: Archive/Apps +tags: + - Apps + - Deutsch + - Firefox OS + - Web +translation_of: Archive/Apps +--- +

Diese Seite enthält archivierten Inhalt für Apps, einschließlich veraltetem Web-App-Inhalt, Firefox OS-App-bezogenen Inhalten usw.

+ + + +
+
+
Erweiterte Themen  
+
Diese Artikel enthalten zusätzliche Informationen zu erweiterten Open Web Apps-Themen. Themen wie Dokumentationen zur App-Architektur, die beim Entwurf und der Implementierung offener Web-Apps hilfreich sind, und andere Dokumentationen zum Erstellen eines Geschäfts für den Verkauf und Vertrieb offener Web-Apps.  
+
API-Referenz für die App-Entwicklung  
+
Technische Überprüfung abgeschlossen. Redaktionelle Prüfung abgeschlossen.  
+
Entwerfen von Open Web Apps  
+
Die Elemente in diesem Abschnitt gelten allgemein für das Design von Webanwendungen.  
+
Grafiken und UX  
+
Beim Erstellen von Open Web Apps müssen Sie das Erscheinungsbild, die Benutzererfahrung und den Workflow Ihrer Anwendungen sehr berücksichtigen. In früheren Teilen dieses Materials haben wir uns mit der Anwendungsplanung und den flexiblen Layouts für Anwendungen befasst. In diesem Abschnitt werden wir uns sowohl mit allgemeinen Mustern als auch mit Entwurfstechniken befassen, die für Open Web Apps funktionieren, und mit bestimmten Techniken und Ressourcen, die Ihnen helfen Stellen Sie großartig aussehende Firefox OS-Apps zusammen, die der Erfahrung der Standardanwendungen des Geräts entsprechen.  
+
Öffnen Sie die Web-App-Architektur  
+
Apps können von dem Server, auf dem sie gehostet werden ("Self-Hosting"), oder von einem Store aus installiert werden. Mozilla startete den Firefox Marketplace 2012 in einem Testmodus für Apps. Andere App Stores von Drittanbietern sind mit dieser Architektur ebenfalls möglich. Apps können kostenlos oder kostenpflichtig sein. Stores können die Überprüfung von Einkäufen unterstützen, um sicherzustellen, dass Apps nur von Benutzern ausgeführt werden, die sie gekauft haben. Der Firefox-Marktplatz unterstützt dies.  
+
Aufenthaltsraum - Animation und Grafik  
+
Es gibt verschiedene Tools im Internet, mit denen Sie Animationen und Grafiken für Ihre Arbeit erstellen können. In diesem Artikel gehen wir auf einige dieser Optionen ein, damit Sie Ihr Projekt hervorheben können! Zum Beispiel ist CSS eine Möglichkeit, Animationen auf HTML-Elemente anzuwenden, während Chartist ein großartiges Werkzeug zum Erstellen von Diagrammen und Diagrammen ist.  
+
Tools und Frameworks  
+
+
Überprüfen von Web-Apps mit dem App Validator  
+
Einige Überprüfungen, die der Validator durchführt, umfassen: + +
+
diff --git a/files/de/archive/b2g_os/anwendungsentwicklung/index.html b/files/de/archive/b2g_os/anwendungsentwicklung/index.html new file mode 100644 index 0000000000..0c09cc1103 --- /dev/null +++ b/files/de/archive/b2g_os/anwendungsentwicklung/index.html @@ -0,0 +1,12 @@ +--- +title: Firefox OS Anwendungsentwicklung +slug: Archive/B2G_OS/Anwendungsentwicklung +translation_of: Archive/B2G_OS/Firefox_OS_apps/Building_apps_for_Firefox_OS +--- +

Firefox OS apps sind nichts anderes als Open Web apps, die auf einem Smartphone mit Firefox OS installiert werden.

+ +
+ Note: Firefox OS currently identifies using the same UA string as Firefox for Android, except without the "Android;" clause. For example: "Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0a1".
diff --git a/files/de/archive/b2g_os/api/index.html b/files/de/archive/b2g_os/api/index.html new file mode 100644 index 0000000000..706080ff54 --- /dev/null +++ b/files/de/archive/b2g_os/api/index.html @@ -0,0 +1,156 @@ +--- +title: B2G OS APIs +slug: Archive/B2G_OS/API +tags: + - API + - B2G API + - NeedsTranslation + - TopicStub + - b2g os api's +translation_of: Archive/B2G_OS/API +--- +

List of B2G OS APIs 

+ +

+A +B +C +D + + +F + + +H + + + + + + + + +M +N + + +P + + + + +S +T +U + + +W + + + + + + + +

diff --git a/files/de/archive/b2g_os/api/navigator/index.html b/files/de/archive/b2g_os/api/navigator/index.html new file mode 100644 index 0000000000..553b9dd513 --- /dev/null +++ b/files/de/archive/b2g_os/api/navigator/index.html @@ -0,0 +1,19 @@ +--- +title: Navigator (Firefox OS extensions) +slug: Archive/B2G_OS/API/Navigator +tags: + - API + - Firefox OS + - Interface + - Navigator + - Non-standard + - Reference +translation_of: Archive/B2G_OS/API/Navigator +--- +

{{APIRef("Firefox OS")}}{{Draft}}{{Non-standard_Header}}

+ +

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. This page represents the list of properties and methods added to Navigator on Firefox OS devices. For the list of properties and methods available to any Web sites, consult Navigator.

+ +

A Navigator object can be retrieved using the read-only Window.navigator property.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/de/archive/b2g_os/api/navigator/requestwakelock/index.html b/files/de/archive/b2g_os/api/navigator/requestwakelock/index.html new file mode 100644 index 0000000000..49d5275686 --- /dev/null +++ b/files/de/archive/b2g_os/api/navigator/requestwakelock/index.html @@ -0,0 +1,37 @@ +--- +title: Navigator.requestWakeLock() +slug: Archive/B2G_OS/API/Navigator/requestWakeLock +translation_of: Archive/B2G_OS/API/Navigator/requestWakeLock +--- +

{{APIRef("Wake Lock API")}}{{ non-standard_header() }}

+ +

This Navigator.requestWakeLock() method of the Wake Lock API is used to request a {{ domxref("MozWakeLock") }} on any resource of the device. This means that you can prevent that resource from becoming unavailable as long as your app holds a lock for that resource. For example, a voice recording app can obtain a lock to keep the screen on during recording so that it can give prover visual feedback to the user that recording is progressing.

+ +
+

Note: When the window that requested one or more wake locks is closed or destroyed, any wake locks it acquired are implicitly released; no manual release is necessary.

+
+ +

Syntax

+ +
lock = window.navigator.requestWakeLock(resourceName);
+ +

Parameters

+ +
+
resourceName
+
A string representing the name of the resource to lock. Gaia uses four basic resources names: screen, cpu,  wifi, and gps, but any certified application can expose new resources.
+
+ +

Return value

+ +

Returns a {{domxref("MozWakeLock")}} object you can use to keep track of or release the lock..

+ +

Specification

+ +

W3C tracks Wake Lock: Use cases and is working on the Editor's traft API.

+ +

See also

+ + diff --git "a/files/de/archive/b2g_os/apps/eine_app_f\303\274r_firefox_os_schreiben/index.html" "b/files/de/archive/b2g_os/apps/eine_app_f\303\274r_firefox_os_schreiben/index.html" new file mode 100644 index 0000000000..915a3be22d --- /dev/null +++ "b/files/de/archive/b2g_os/apps/eine_app_f\303\274r_firefox_os_schreiben/index.html" @@ -0,0 +1,48 @@ +--- +title: Eine App für Firefox OS schreiben +slug: Archive/B2G_OS/Apps/eine_app_für_firefox_os_schreiben +tags: + - Apps + - Firefox OS + - Handy +translation_of: Web/Apps/Fundamentals/Quickstart +--- +

Firefox OS Apps sind Web-Apps, die in HTML, CSS und JavaScript geschrieben sind. Die App wird im Internet publiziert, wie Sie es mit jeder anderen Website auch tun. Um die Website als installierbare Web-App auf dem Gerät zu erstellen, müssen Sie die App mit einem manifest und einem hock up, einem Installations-Button, wie nachfolgend erläutert, versehen.

+

Die folgenden Themen können als Ausgangspunkt genutzt werden:

+ +

Natürlich können Sie auch tiefer in die Technologie von Web-Apps eintauchen.

+

Die Web-App installieren

+

Mit der App und dem manifest im Internet, müssen Sie es Gecko bekannt machen. Während der Installationsphase schaut Gecko nach dem manifest und fügt die wichtigsten Einträge dem HomeScreen u.a. hinzu.

+

Um die App zu installieren, müssen sie die navigator.mozApps.install API aufrufen. Hier finden Sie ein Beispiel für einen Installations-Button, den Sie in ihre App einbinden können, wenn Sie sie selbst hosten.

+
<button id="install">
+  Installieren Sie diese App auf Ihrem HomeScreen!
+</button>
+
+<script>
+(function(){
+  function install(ev) {
+    ev.preventDefault();
+    // Definierung der Manifest URL
+    var manifest_url = "http://my.webapp.com/manifest.webapp";
+    // App installieren
+    var myapp = navigator.mozApps.install(manifest_url);
+    myapp.onsuccess = function(data) {
+      // App ist installiert, Entfernen-Button
+      this.parentNode.removeChild(this);
+    };
+    myapp.onerror = function() {
+      // App war noch nicht installiert, Info ist in this.error.name definiert
+      console.log('Es ist ein Fehler bei der Installation aufgetreten., error: ' + this.error.name);
+     };
+  };
+  // Ein Verweis auf den Button und Aufruf von install() beim betätigen.
+  var button = document.getElementById('install');
+  button.addEventListener('click', install, false);
+})();
+</script>
+
+

Tipp: DenInstallations-Button können Sie auch in App-Stores, wie zum Beispiel dem Firefox Marketplace, einbinden, aber es ist oft sehr praktisch den Installations-Button auf der Startseite des Projekts zu haben.

+

Nun besuchen Sie Ihre Website mit der Firefox OS Browser App und benutzen Sie den Installations-Button.

diff --git a/files/de/archive/b2g_os/apps/index.html b/files/de/archive/b2g_os/apps/index.html new file mode 100644 index 0000000000..6846cbffe7 --- /dev/null +++ b/files/de/archive/b2g_os/apps/index.html @@ -0,0 +1,50 @@ +--- +title: Apps entwickeln für Firefox OS +slug: Archive/B2G_OS/Apps +translation_of: Web/Apps/Fundamentals +--- +

Applikationen für Firefox OS Geräte sind einfach offene Web Apps die komplett auf offenen Web Technologien basieren, wie etwa Javascript, HTML oder CSS. Unsere hauptsächliche Dokumentation erklärt Dir alles grundlegende was Du wissen musst und es gibt speziellere Artikel über das Entwickeln und das Testen von Apps für Firefox OS.

+
+
+

DoKumentation und Anleitungen

+
+
+ Eine App für Firefox OS schreiben
+
+ Anleitung wie Du deine eigene erste Web Applikation für Firefox OS entwickelst.
+
+ Benutzererlebnis
+
+ Leitfaden der Dir helfen soll deine Apps mit einem aufgeräumten und attraktiven Erlebnis für den Benutzer auszustatten inklusive Codebeispielen und Templates.
+
+ Tipps und Techniken
+
+ Ein Sortiment mit Tipps und Tricks (wie auch möglichen Problemlösungen) die unsere Entwickler für Dich ausgewählt haben!
+
+

Alle anzeigen...

+
+
+

Hol dir Hilfe von der Community

+

Du brauchst Hilfe bei einem Problem mit deiner App und kannst keine Lösung in der Dokumentation finden?

+
    +
  • Konsultiere das Web Apps Forum: {{DiscussionList("dev-webapps", "mozilla.dev.webapps")}}
    • +
  • Konsultiere das Layout Forum, welches sich mit HTML und CSS beschätigt: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }} + +
    • +
+

Vergiss die Netiquette nicht...

+

Werkzeuge

+ +

Alle anzeigen...

+ + +
+
+

 

diff --git a/files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html b/files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html new file mode 100644 index 0000000000..14e53a827e --- /dev/null +++ b/files/de/archive/b2g_os/arbeiten_mit_dem_b2g_desktop_client/index.html @@ -0,0 +1,135 @@ +--- +title: Arbeiten mit dem B2G Desktop-Client +slug: Archive/B2G_OS/Arbeiten_mit_dem_B2G_Desktop_Client +translation_of: Archive/B2G_OS/Building_the_B2G_OS_simulator +--- +

Der Firefox OS desktop client, auch bekannt als B2G desktop client, bietet die Möglichkeit an Gaia and Web apps in einer Gecko-basierten Umgebung auf dem Desktop laufen zu lassen. Dabei wird die Geräte-Hardware jedoch nicht emuliert, sodass es zum Testen von Geräte-Api nicht taugt. Auch ist es kein Ersatz um auf einem Gerät zu testen. Dennoch, hat es einige aktivierte APIs, welche nicht im Firefox verfügbar sind, wie z.B. Kontakt- und Einstellungs-API. Es kann also durchaus nützlich sein, wenn man eine Anwendung entwickelt oder während man am Gaia-Inteface direkt arbeitet. Dieser Artikel behandelt das Downloaden bzw. zusammenbauen des Firefox OS Desktop Clients, jedoch auch wie man ihn benutzt.

+
+

Note: The easiest way to use the Firefox OS desktop client is to use the Firefox OS Simulator. It does not require you to build the desktop client yourself.

+
+

Download a nightly build

+
+

Note: Firefox OS version 1.0 is based on a branch of Gecko 18. There are also nightly builds based on mozilla-central here:
+ http://ftp.mozilla.org/pub/mozilla.org/b2g/nightly/latest-mozilla-central/

+
+

Just like Firefox Nightlies, the Firefox OS desktop client is built every day from the latest source code. The latest build is available from the Mozilla FTP server. Be sure to pick the latest version and the right archive for your operating system. This lets you bypass having to build it yourself. In addition, you don't have to download Gaia on your own either.

+

Be sure to install the application in a writeable location; the application needs to be able to update included the Gaia profile.

+

You can now skip ahead to Running the desktop client, unless you actually want to build it for yourself.

+

Building the desktop client

+

The first thing we need to do is set up a standard Mozilla build environment. Once we have that, we can pull down the code we'll need and configure to build the Firefox OS desktop client.

+

Downloading the code for the first time

+

In a directory where we'd like the source code to go, let's clone the mozilla-central repository that contains all of Gecko:

+
 hg clone http://hg.mozilla.org/mozilla-central
+
+

Updating the code

+

When we do subsequent builds later, we'll want to make sure we have the latest code. Here's how to pull the latest changes:

+
cd mozilla-central
+hg pull -u
+
+

Create a mozconfig

+

Next, we need to create a mozconfig file in the mozilla-central directory to configure the build system to build the Boot to Gecko client instead of Firefox:

+
. "$topsrcdir/b2g/config/mozconfigs/common"
+
+mk_add_options MOZ_OBJDIR=../build
+mk_add_options MOZ_MAKE_FLAGS="-j9 -s"
+
+ac_add_options --enable-application=b2g
+ac_add_options --disable-libjpeg-turbo
+
+# This option is required if you want to be able to run Gaia's tests
+ac_add_options --enable-tests
+
+# turn on mozTelephony/mozSms interfaces
+# Only turn this line on if you actually have a dev phone
+# you want to forward to. If you get crashes at startup,
+# make sure this line is commented.
+#ac_add_options --enable-b2g-ril
+

Building

+

Now we're ready to build the desktop client with the following command issued from the mozilla-central directory:

+
make -f client.mk
+
+

The built client will be placed in the ../build/dist directory (based on the value you specify for MOZ_OBJDIR in the mozconfig file).

+

Downloading Gaia

+

By default the desktop client will show an empty screen because it doesn't know which Web app to load initially as the system app. The collection of system apps and default apps that come with Firefox OS is called Gaia.

+

To download Gaia for the first time, let's clone the source code repository on GitHub:

+
git clone https://github.com/mozilla-b2g/gaia
+cd gaia
+

To update an already existing clone of Gaia, we can pull in the latest changes from GitHub:

+
cd gaia
+git pull
+
+

Generating a profile

+

Next we need to set up Gaia's apps for the desktop client. This includes packaging the Gaia apps in the same way like they would be installed on the device, as well as setting up the permissions for the privileged system apps. We do this by generating a profile. The following command (run in the gaia directory) will take care of that:

+
DEBUG=1 make
+
+

This should create a profile-debug directory below the gaia directory. The new profile contains a customized extension and other configuration needed to make B2G run properly.

+

Running the desktop client

+

Once you've built the client and downloaded Gaia (or downloaded and installed the nightly desktop application), you're ready to fire up the Firefox OS desktop client.

+

Running on Linux

+

To run the desktop client on Linux using the embedded Gaia profile, just run the b2g executable. If you want to specify a different Gaia profile, you need to bypass the b2g wrapper program and run the b2g-bin binary. The binary is in the archive you downloaded earlier or in the ../build/dist/bin directory if you built the client yourself.

+
.../b2g-bin -profile gaia/profile-debug
+
+

You may experience annoying rendering problems. To avoid them, add the following line to your gaia/profile/user.js file:

+
user_pref("layers.acceleration.disabled", true);
+
+

Running on Mac

+

If you downloaded the nightly build, you can simply launch it from the Finder as usual. Any console output is visible by running the standard Console utility program included with your Mac.

+

If you want to specify a different Gaia profile, you need to bypass the b2g wrapper program and run the b2g-bin binary. The command line is slightly more complicated due to the location of the b2g-bin binary and the need for absolute paths when specifying the profile directory:

+
.../B2G.app/Contents/MacOS/b2g-bin -profile /full/path/to/gaia/profile-debug
+
+

Running on Windows

+

Running the nightly build on Windows is as simple as launching b2g.exe. If you want to customize the execution, you can do so by running the b2g-bin.exe executable instead; this bypasses the wrapper program that automatically uses the bundled Gaia.

+

Command line options

+

There are a number of command line options you can use to adjust the runtime experience while using the desktop client. You can get a list by using the -help option. This section covers some of the particularly interesting ones.

+

Specifying the screen size

+

You can specify the screen size of the device you want to simulate using the --screen option:

+
b2g --screen=<width>x<height>[@<dpi>]
+

Where <width>, <height>, and <dpi> are fairly self-explanatory parameters: the width and height of the device's screen in pixels and the device resolution in DPI. For example:

+
b2g --screen=320x480
+b2g --screen=320x480@160
+
+

Optionally, you can specify certain devices by name to simulate their screen size and resolution:

+ +

Opening the JavaScript console

+

You can open the JavaScript console when launching the desktop B2G client by launching it from the command line with the -jsconsole flag. After building, just do:

+
.../b2g -jsconsole -profile /path/to/your/profile
+

If you've installed the nightly build on a Mac, you can do the following:

+
/Applications/B2G.app/Contents/MacOS/b2g-bin -jsconsole -profile /path/to/your/profile-debug
+
+

Note: On production builds of Firefox OS, console logging (such as by {{domxref("console.log()")}}) is disabled by default. In order to enable it, open the Settings app and navigate down through Device Information->More Information->Developer, then toggle on the "Console Enabled" preference.

+
+

Launching a specific application at startup

+

You can now specify an application to be launched automatically when b2g starts up in the desktop client. This is done as soon as the rest of the system is done loading up. To do this, just use the --runapp option, which takes as a parameter the name of the application to run. For example:

+
 .../b2g-bin -profile /path/to/your/gaia/profile-debug --runapp email
+

Before looking for an app to launch, the specified name is normalized by converting it to all lower case and removing all dashes and spaces. This normalized name is then compared to similarly normalized names from the manifests of available apps' manifests.

+

For example, the name of the email app is currently "E-mail", but --runapp email will work because of this normalization.

+

If you specify the --runapp option without an argument, or with an empty argument, the b2g client will output to your terminal a list of the known applications as well as a brief usage message.

+
+

Note: Using the --runapp option disables the lock screen as a side effect and does not re-enable it. It's assumed that you won't use this command on a profile on which you will be testing the lock screen, or you will turn it back on manually in Settings application. Feel free to contribute a patch to change this behavior if it's a problem.

+
+

Usage tips

+

This section provides a few helpful tips to using the B2G desktop client.

+ +

Next steps

+

Now that you have a desktop build of Boot to Gecko running, you can do testing, development, and other work in it:

+ diff --git a/files/de/archive/b2g_os/benutzung_des_app_managers/index.html b/files/de/archive/b2g_os/benutzung_des_app_managers/index.html new file mode 100644 index 0000000000..5a03b1fb3b --- /dev/null +++ b/files/de/archive/b2g_os/benutzung_des_app_managers/index.html @@ -0,0 +1,264 @@ +--- +title: Benutzung des App Managers +slug: Archive/B2G_OS/Benutzung_des_App_Managers +translation_of: Archive/B2G_OS/Using_the_App_Manager +--- +
+

Der App Manager ist ein neues Tool, das in Firefox für Desktop integriert wurde. Es stellt einige nützliche Werkzeuge zum Testen, Verteilen und Debuggen von HTML5-Webapps mit Firefox OS Smartphones und dem Firefox OS Simulator bereit, welche direkt im Browser benutzt werden können.

+ +

Der App Manager ist an Entwickler, die Firefox OS Version 1.2 oder später entwickeln, gerichtet. Wenn Sie Apps für Firefox OS 1.1 entwickeln, werfen Sie stattdessen einen Blick auf die Dokumentation für den Firefox OS Simulator 1.1.

+
+ +

{{EmbedYouTube("z1Bxg1UJVf0")}}

+ +

Der App Manager besteht aus folgenden Komponenten:

+ + + +

Schnelleinstieg:

+ +

Dieser Abschnitt soll einen möglichst schnellen Einstieg ermöglichen. Falls genauere Erklärungen benötigt werden, überspringen Sie bitte diesen Abschnitt und lesen Sie {{ anch("Device and system configuration") }}. Bei Problemen könnte außerdem der Abschnitt {{ anch("Troubleshooting") }} weiterhelfen.

+ +
    +
  1. Stellen Sie sicher, dass Firefox Desktop 26+ installiert ist.
    2. +
  2. Öffnen Sie den App Manager (tippen Sie about:app-manager in die URL-Leiste).
    3. +
  3. Falls kein echtes Gerät mit Firefox OS zur Verfügung steht: +
      +
    1. Installieren Sie den Firefox OS Simulator
      2. +
    2. Klicken Sie auf Start Simulator in der unteren Werkzeugleiste des App Managers und anschließend auf den Namen des installierten Simulators.
      3. +
    +
    4. +
  4. Falls Sie ein echtes Gerät besitzen: +
      +
    1. Stellen Sie sicher, dass auf dem Gerät Firefox OS 1.2+ läuft.
      2. +
    2. Wenn Sie unter Windows arbeiten, stellen Sie sicher, dass Sie die bereitgestellten Treiber Ihres Handys installiert haben.
      3. +
    3. Deaktivieren Sie die Bildschirmsperre in den Einstellungen des Geräts (Settings > Screen Lock) und aktivieren Sie Remote Debugging (Settings > Device information > More information > Developer).
      4. +
    4. Installieren Sie das ADB Helper Add-on in Firefox Desktop.
      5. +
    5. Verbinden Sie ihr Gerät über ein USB-Kabel mit dem Computer.
      6. +
    6. Der Name des Geräts sollte nun in der unteren Leiste des App Managers erscheinen. Klicken Sie den Namen an.
      7. +
    +
    5. +
  5. Die untere Leiste sollte anzeigen "Connected to: xxx".
    6. +
  6. Klicken Sie auf das Apps-Panel und fügen Sie eine App hinzu (paketiert oder gehostet).
    7. +
  7. Der Refresh-Button validiert Ihre App und installiert sie auf dem Simulator/Gerät.
    8. +
  8. Der Debug-Button verbindet die Entwickler-Tools mit der laufenden App.
    9. +
+ +

Geräte- und System-Konfiguration

+ +

Bei der Benutzung des App Manager sollte man zuerst sicherstellen, dass System und Gerät korrekt konfiguriert sind. Dieser Abschnitt beschreibt alle dafür nötigen Schritte.

+ +

Firefox 1.2+ wird benötigt

+ +

Stellen Sie sicher, dass auf Ihrem Gerät Firefox OS 1.2/Boot2Gecko 1.2 oder höher läuft. Die Versionsnummer von Firefox OS wird unter Settings > Device Information > Software angezeigt.

+ +

Falls die installierte Version nicht hoch genug ist, muss je nachdem welches Gerät Sie verwenden, eine der verfügbaren Nightly-Builds von Firefox 1.2+ installiert oder eine Version selbst kompiliert werden.

+ +

Verfügbare Builds:

+ + + +
+

Hinweis: Für die Erstellung eines eigenen Builds von Firefox OS 1.2+, folgen Sie den Anweisungen unter Building and installing Firefox OS und starten Sie mit Firefox OS build prerequisites.

+
+ +

Remote-Debugging

+ +

Als nächstes muss Remote Debugging in Firefox OS aktiviert werden. Navigieren Sie zu Settings > Device information > More information > Developer und aktivieren Sie die Checkbox bei Remote Debugging.

+ +

ADB oder ADB Helper

+ +

Über die Android Debug Bridge (ADB) wird die Verbindung und Kommunikation zwischen Gerät und Computer geregelt. Es gibt zwei Möglichkeiten ADB einzusetzen:

+ + + +
+

Achtung: Es ist nicht nötig diesen Befehl auszuführen, wenn Sie das ADB Helper Add-on installiert haben.

+
+ +

Verbinden des Geräts mit dem App Manager

+ +

Nachdem alles konfiguriert wurde, ist es nun an der Zeit, das Gerät mit dem Computer zu verbinden und den App Manager zu starten:

+ +
    +
  1. Verbinden Sie das Gerät via USB mit dem Computer.
    2. +
  2. Deaktivieren Sie Screen lock auf dem Gerät, indem Sie zu Settings > Screen Lock navigieren und die Checkbox bei Lock Screen deaktivieren. Dieses Vorgehen ist sehr ratsam, da die Verbindung abbricht, sobald sich die Bildschirmsperre aktiviert.
    3. +
  3. Starten Sie den App Manager — klicken Sie in der Menüleiste von Firefox Desktop Extras > Web-Entwickler > App Manager an oder tippen Sie about:app-manager in die URL-Leiste.
    4. +
  4. An der Unterseite des App Manager Tabs sehen Sie nun eine Anzeige für den Verbindungsstatus (siehe Screenshot unten). Es sollte nun möglich sein das Gerät durch einen Klick auf den "Connect to localhost:6000" Button zu verbinden.
    5. +
  5. Falls die Verbindung erfolgreich hergestellt wurde, erscheint eine Frage auf dem Gerät: "An incoming request to permit remote debugging connection was detected. Allow connection?". Bestätigen Sie mit dem OK-Button (evtl. müssen Sie den Power-Button am Gerät betätigen, damit Sie die Frage sehen können). Der Verbindungsstatus in der Leiste sollte dann "Connected to B2G" und einen Disconnect-Button zum Abbruch der Verbindung anzeigen.
    6. +
+ +

+ +
+

Die anderen Bedienelemente in der Verbindungstatus-Leiste ermöglichen die Verbindung eines Simulators mit dem App Manager. Dies wird im nächsten Abschnitt behandelt, wobei der Port für die Verbindung geändert wird. Wenn der Port gewechselt wird, muss auch Portweiterleitung für diesen Port aktiviert werden, wie unter {{anch("Enable port forwarding")}} beschrieben.

+
+ +

Firefox OS Simulator Add-on

+ +

Steht kein echtes Gerät zur Verfügung, das mit dem App Manager benutzt werden kann, kann es dennoch zusammen einem Firefox OS Simulator Add-on ausprobiert werden. Installieren Sie hierzu einen Simulator, passend für Ihr Betriebssystem (mehrere Versionen verfügbar, es ist ratsam alle zu installieren, für maximale Flexibilität):

+ +

Simulator installieren

+ + +

Nach der Installation des Simulators/der Simulatoren gehen Sie auf about:app-manager und klicken Sie in der Verbindungsstatus-Leiste unten den "Start Simulator"-Button. Daraufhin erscheinen drei weitere Buttons:

+ + + +

Apps-Panel

+ +

Da nun alles soweit funktionert, wird nun die Funktionalität des App Managers beschrieben, beginnend mit dem Apps Panel. Von hier aus können Sie eine bereits existierende App importieren, auf Ihr Gerät übertragen und debuggen:

+ + + +

Ist dieser Schritt gelungen, sollten auf der rechten Seite des Fensters Informationen über die App angezeigt werden:

+ +

+ +

Manifest Editor

+ +

Mit Firefox 28 und später findet sich im Apps Panel ein Editor für das App-Manifest:

+ +

+ +

Debugging

+ +

Ein Klick auf "Update" überträgt (installiert) die App auf das Gerät. Mit einem Klick auf "Debug"  wird eine Toolbox mit der App verbunden, womit die App getestet werden kann:

+ +

+ +
+

Anmerkung: Es wird Ihnen gefallen mit der Toolbox herumzuspielen - ändern Sie den DOM, CSS etc. und Sie werden sehen, dass die Änderung in Echtzeit auf dem Gerät ablaufen. Die Änderungen werden im Code der installierten App gespeichert und beim nächsten Öffnen der App auf dem Gerät wieder angezeigt.

+
+ +

Before Firefox 28, the tools are launched in a separate window. From Firefox 28 onwards, the tools are launched in a separate tab in the App Manager itself, alongside the Apps and Device tabs. The tab is given your app's icon so it's easy to find:

+ +

+ +

Fehler

+ +

Falls eine App nicht erfolgreich hinzugefügt werden konnte - zum Beispiel weil die angegebene URL nicht korrekt ist oder ein gepackter App-Ordner ausgewählt wurde - wird dennoch ein Eintrag für die App hinzugefügt, dieser enthält jedoch Fehlermeldungen.

+ +

+ +

Bei dieser Ansicht ist es auch möglich, eine installierte App zu deinstallieren. Halten Sie hierfür den Mauszeiger über den Namen oder die Beschreibung der jeweiligen App auf der linken Seite und klicken Sie den X-Button an. Die App wird dadurch jedoch nicht vom Gerät entfernt. Um dies zu tun, muss das Gerät selbst benutzt werden.

+ +

Device-Panel

+ +

Im Tab unter Device werden Informationen zum verbundenen Gerät angezeigt. Von dem Fenster "Installed Apps" aus können die Apps auf dem Gerät gestartet und gedebuggt werden.

+ +

+ +
+

Anmerkung: Zertifizierte Apps werden standardmäßig nicht aufgelistet. Weitere Informationen zum Debuggen von zertifizierten Apps.

+
+ +

Das Fenster "Permissions" zeigt die benötigten Rechte für verschiedene Web-APIs des Geräts:

+ +

+ +

Abschließend können Sie einen Screenshot mit dem Bildschirminhalt des Geräts erstellen, indem Sie den Screenshot-Button anklicken. Der Screenshot wird dann in einem neuen Tab in Firefox geöffnet und kann von dort aus gespeichert oder verworfen werden.

+ +

Debuggen von zertifizierten Apps

+ +

Bis dato können nur Geräte, welche mit einem Development-Build von Firefox OS 1.2 laufen, für das Debuggen von zertifizierten Apps benutzt werden. Falls auf ihrem Gerät ein Development-Build installiert ist, können Sie das Debuggen von zertifzierten Apps erlauben, indem Sie die Einstellung devtools.debugger.forbid-certified-apps in ihrem Firefox-Profil auf false setzen. Gehen sie hierfür wie folgt vor:

+ +
    +
  1. +

    Geben Sie auf ihrem Computer den folgenden Befehl in ein Terminal/Konsole ein, um über die Shell auf das Dateisystem des Geräts zuzugreifen:

    + + 
    adb shell
    + +

    Daraufhin sollte sich der Prompt zu root@android ändern.

    +
    2. +
  2. +

    Als nächstes stoppen sie B2G mit dem Befehl:

    + + 
    stop b2g
    +
    3. +
  3. +

    Wechseln Sie mit folgenden Befehl zum Profilordner:

    + + 
    cd /data/b2g/mozilla/*.default/
    +
    4. +
  4. +

    Und fügen Sie mit folgendem Befehl eine Zeile für die Einstellung in die Datei prefs.js ein:

    + + 
    echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js
    +
    5. +
  5. +

    Nachdem die Datei bearbeitet und gespeichert wurde, starten Sie B2G erneut:

    + + 
    start b2g
    +
    6. +
  6. +

    Verlassen Sie das Android-Dateisystem mit der Eingabe des Befehls exit. Damit kehren Sie zum normalen Terminal-Prompt zurück.

    +
    7. +
  7. +

    Stellen Sie nun eine Verbindung mit dem App Manger her. Die zertifizierten Apps sollten nun angezeigt werden.

    +
    8. +
+ +
+

Anmerkung: Falls Sie diese Einstellung ihrem Gaia build hinzufügen möchten, sodass sie aktiv ist auch wenn ihr Telefon zurückgesetzt wird, fügen Sie die Einstellung in der Datei build/custom-prefs.js hinzu und führen Sie make reset-gaia aus.

+
+ +

Running custom builds in the App Manager

+ +

You can run custom B2G Desktop and Gaia builds in the App Manager via the simulator. Read Running custom Firefox OS/Gaia builds in the App Manager for more details.

+ +

Fehlerbehandlung

+ +

Falls das Gerät nicht gefunden wird:

+ + + +

Die Verbindung des Geräts mit dem App Manager funktioniert nicht oder der Simulator kann nicht gestartet werden? Lassen Sie es uns wissen oder schreiben Sie einen Bugreport.

diff --git a/files/de/archive/b2g_os/building/index.html b/files/de/archive/b2g_os/building/index.html new file mode 100644 index 0000000000..3b0c91142b --- /dev/null +++ b/files/de/archive/b2g_os/building/index.html @@ -0,0 +1,268 @@ +--- +title: Building Firefox OS +slug: Archive/B2G_OS/Building +translation_of: Archive/B2G_OS/Building +--- +
+
+
+

Once you've set up your build system and performed your initial pull and configure of the code, you can build Boot to Gecko. This guide explains how.

+
+

Updating your code

+

If this isn't your very first time building B2G, you might want to pull the latest code before you start to build. To do that, you should update both the B2G tools and the dependencies, using the following two commands:

+
git pull
+./repo sync -d
+
+

The -d option switches the various projects HEAD back to their Android manifest revision (i.e the default mainstream repository version). It is helpful if you made modifications to the repos (and have associated source changes) but you want to revert back to the master version temporarily. It will indeed leave your staged or working directory changes untouched (see the following SO question for the full explanation). If you did not touch the source code, you can use the normal command:

+
git pull
+./repo sync
+

You can update a specific make target's repository by specifying its name:

+
./repo sync gaia
+
+

The repo command has other options available that might be interesting; repo help will give you a lot of information.

+

Building

+
+

Note: Before building, you may want to set up a .userconfig file to customize the build. See Customization with the .userconfig file for details.

+
+

To build Boot to Gecko, simply use the build.sh tool:

+
cd B2G
+./build.sh
+
+

Time for another coffee break, or possibly a nap (especially if this is your first build, it takes about 30 min on a Core i7 with 8GB of RAM). As in the configure step on the previous page, if you are using a directory of previously-extracted Android system files, you should set ANDROIDFS_DIR before running build.sh.

+
+

Note: For more instructions on flashing your new build to a phone, read Installing Firefox OS on a mobile device.

+
+

Building specific modules

+

If you want to build just a particular module, such as Gecko, you can specify it by name:

+
./build.sh gecko
+
+

In order to refresh only one application, you can build only gaia module by using the BUILD_APP_NAME environment variable:

+
BUILD_APP_NAME=calendar ./build.sh gaia
+

To get a list of the modules you can build, you can do:

+
./build.sh modules
+
+

Setting the number of processor cores to use

+

By default, the B2G build scripts use the number of cores your system has plus two as the number of parallel tasks to run. You can change this by specifying the -j parameter when running build.sh. This can be handy if you're using your system for other things while building in the background and need to reduce CPU load a bit. It's also handy when you're having build problems, as it can make reading error output from the build process easier if you have just one task going at a time!

+

For example, to build using just two parallel tasks:

+
./build.sh -j2
+
+

The most common use case for this, however, is to prevent builds from running in parallel at all. This makes the output of the process much easier to read, making it easier to sort out build problems. To do this:

+
./build.sh -j1
+
+

Building multilocale

+

To create a multilocale build, do the following:

+

Gaia

+
    +
  1. Determine which Gaia languages file to use. We're currently using locales/languages_dev.json and locales/languages_all.json as our Gaia languages files.
    2. +
  2. Clone the appropriate locales from http://hg.mozilla.org/gaia-l10n into a directory; we use gaia-l10n/. You could use the locales/ directory . You'll need to clone a repo for each locale listed in the languages file.
    3. +
  3. In your environment, set LOCALE_BASEDIR to the absolute path of the directory in step 2. Set LOCALES_FILE to the absolute path of the file in step 1.
    4. +
  4. Also, you can set a GAIA_DEFAULT_LOCALE if you want to set a default locale.
    5. +
+
cd gaia/locales/
+hg clone https://hg.mozilla.org/releases/gaia-l10n/v1_2/es
+
+ Set your environment variables:
+
+  
+
export LOCALE_BASEDIR=$PWD/locales
+export LOCALES_FILE=$PWD/locales/languages_dev.json
+export GAIA_DEFAULT_LOCALE=es
+
+

And the languages-dev.json could be replaced by your own languages-own.json path, which could formed like this. You would need to add an entry per each repo cloned in your locales directory.:

+
{
+  "en-US"     : "English (US)",
+  "es"        : "Español"
+}
+
+
+

Since bug 884752 landed (November 2013), to add keyboard layouts (if available in Gaia), you can use parameter GAIA_KEYBOARD_LAYOUTS. 

+

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=884752

+

Layouts: https://github.com/mozilla-b2g/gaia/tree/v1.2/keyboard/layouts

+

For example, to add Spanish and Italian keyboard layout, run the previous command adding

+ 
  GAIA_KEYBOARD_LAYOUTS=en,es,it
+

At this point you're ready to flash Gaia to the phone for the first time. Connect the phone and make sure Remote Debugging is checked in Settings > Device Information > More Information > Developer.  You only need to do this once, for your own build of Gaia will have that pref turned on thanks to REMOTE_DEBUGGER=1:

+ 
 make clean && make production LOCALES_FILE=locales/languages-own.json
+
+

If you want to clone and/or update all supported locales for a particular branch, you can use this script

+
+

Gecko

+
    +
  1. Determine which Gecko languages file to use. We're currently using b2g/locales/all-locales as our Gecko languages file.
    2. +
  2. Clone the appropriate locales into a directory; this can be gecko-l10n/ . + +
    3. +
  3. Clone compare-locales.
    4. +
  4. +

    In your environment, set L10NBASEDIR to the absolute path of the directory in step 2. Set MOZ_CHROME_MULTILOCALE to a string of space-delimited locales from step 1.

    +

    Add the compare-locales/scripts dir to your PATH, and compare-locales/lib to your PYTHONPATH.

    + For instance, + 
    export L10NBASEDIR=$PWD/gecko-l10n
+export MOZ_CHROME_MULTILOCALE="ja zh-TW"
+export PATH="$PATH:$PWD/compare-locales/scripts"
+export PYTHONPATH="$PWD/compare-locales/lib"
+
    +

    Once you have the above set up, you can run build.sh.

    +

    You can use .userconfig as well:

    + 
    ## Gaia
+export GAIA_DEFAULT_LOCALE=es
+export LOCALE_BASEDIR=/b2g/gaia-l10n-transifex-v1.2/
+export LOCALES_FILE=/b2g/languages_propio.json
+
+## Gecko
+export L10NBASEDIR='/b2g/gecko-l10n-v1.2'
+export MOZ_CHROME_MULTILOCALE="es-ES eu ca gl pt-BR"
+export PATH="$PATH:/b2g/compare-locales/scripts"
+export PYTHONPATH="/b2g/compare-locales/lib"
+
    +
    5. +
+
+

There are some mappings between Gaia languages and Gecko ones. For example, in Gaia, Spanish is "es", but on Gecko is tranlated to "Spanish of Spain" (es-ES)

+
+

These instructions may change as we smooth things out.

+

Known errors

+

"Build failed!"

+

If you get a general "Build failed" message, you should always try reconnecting your phone to your computer; sometimes the phone can become unmounted for a variety of reasons.

+
+

Note that configuring and building B2G for Keon DOESN'T WORK on Mac. You'll need to use Linux to build for this device.

+
+

Mountain Lion-specific build errors

+
+

1. If you are building on OS X 10.8 "Mountain Lion" (Xcode 4.4.1 or later) and encounter the following error:

+ 
external/qemu/android/skin/trackball.c:130:25: error: 'M_PI' undeclared (first use in this function)
+ Edit the file: B2G/external/qemu/Makefile.android and add in line 78:
+ 
MY_CFLAGS += -DM_PI=3.14159265358979323846264338327950288   #/* B2G_fix: not finding M_PI constant */
+
+
+
+ 2. If you are on Mountain Lion and you receive an error during ./build.sh like:
+
+ 
/System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h:797:9: error: too many #pragma options align=reset
+

Replace all instances of '#pragma options align=reset' with '#pragma pack()' inside /System/Library/Frameworks/IOKit.framework/Headers/usb/USB.h

+
+

Undefined symbols "_sqlite3_androidopt_handle_pragma" and "_sqlite3_androidopt_open"

+

This error appears if you are building on OS X 10.7 or newer with Xcode 4.5 or newer. To fix this, apply the patch at https://groups.google.com/forum/#!msg/android-building/yAfPyUqCsiQ/7zvICk4GWjYJ to the external/sqlite/dist/Android.mk file.

+

KeyedVector.h:193:31: error: indexOfKey was not declared in this scope

+

This error appears when your gcc version is too recent. Install gcc/g++/g++-multilib 4.6.x versions. See Customizing with the .userconfig file for more information.

+
+

Community Note: It is possible to use gcc 4.7.x with slight modifications to the B2G code (gcc will guide you) but you won't get any help! Neither with modifying the code nor with bugs you encounter.

+
+

arm-linux-androideabi-g++: Internal error: Killed (program cc1plus)

+

If you see this message, it most likely means that free memory is lacking. Ensure there is enough free memory before running ./build.sh. It should run fine if your system has 4GB of RAM.

+

"...is referenced by DSO" error

+

While building the emulator, if you get /usr/bin/ld: out/host/linux-x86/obj/EXECUTABLES/triangleCM_intermediates/triangleCM: hidden symbol `_XGetRequest' in out/host/linux-x86/obj/STATIC_LIBRARIES/libSDL_intermediates/libSDL.a(SDL_x11dyn.o) is referenced by DSO.

+

You can get this with some versions in binutils. If you run Debian Stable, you can use the gold linker by installing the package binutils-gold. Note that the gold linker is already installed by binutils, but it's not used by default; binutils-gold does just that.

+

If you get build errors while the build system is running tests

+

Sometimes (especially after build tool or operating system updates) you'll get weird errors like this when the build system runs its post-build tests:

+ 
Generating permissions.sqlite...
+test -d profile || mkdir -p profile
+run-js-command  permissions
+WARNING: permission unknown:offline-app
+WARNING: permission unknown:indexedDB-unlimited
+build/permissions.js:122: NS_ERROR_UNEXPECTED: Component returned failure code: 0x8000ffff (NS_ERROR_UNEXPECTED) [nsIPermissionManager.add]
+make[1]: *** [permissions] Error 3
+make: *** [gaia/profile.tar.gz] Error 2
+

In this situation, try deleting the gaia/xulrunner-sdk directory and re-pulling the code:

+ 
rm -r gaia/xulrunner-sdk
+
+

This deletes the downloaded, precompiled copy of XULRunner that the build system retrieves automatically; on your next build, a new copy of XULRunner will be automatically retrieved.

+

Cannot fetch platform/libcore

+

If you tried to configure your B2G build for Nexus S (./config.sh nexus-s) and got an error related to libcore, it is because of a problem with the linaro git that feeds into this. To fix this, checkout the B2G manifest like so:

+ 
git clone https://github.com/mozilla-b2g/b2g-manifest.git
+

Edit the nexus-s.xml file in this repo, replacing the linaro git entry with a reference to the aosp entry, which should read like so:

+ 
<default revision="refs/tags/android-4.0.4_r1.2"
+              remote="aosp"
+              sync-j="4" />
+

Commit these changes (git commit -a) and then change the config.sh file in the master branch of the main B2G repo that you checked out to point to your modified local manifest instead of the Mozilla one:

+ 
GITREPO=${GITREPO:-"file:///home/path/to/my/b2g-manifest"}
+

clang errors when building with Xcode 5 on Mac

+

If you are building on Mac OS X 10.8 with Xcode 5, you will likely see errors like the following:

+ 
clang: error: argument unused during compilation: '-include system/core/include/arch/darwin-x86/AndroidConfig.h'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-U DEBUG'
+clang: error: argument unused during compilation: '-MF out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.d'
+make: *** [out/host/darwin-x86/obj/EXECUTABLES/obbtool_intermediates/Main.o] Error 1
+

This is because Xcode 5 changes the g++ compiler in /usr/bin, which breaks the build process if you try to use it to compile. In order to work around the problem, edit the following line in build/core/combo/HOST_darwin-x86.mk:

+ 
HOST_CXX := g++
+

to

+ 
HOST_CXX := g++-4.6
+ifeq (,$(wildcard /usr/local/bin/g++-4.6))
+ HOST_CXX := g++
+endif
+

Next, you'll want to uninstall gcc, using brew (this assumes you've run the Mac OS bootstrap script — if not, you'll need to complete that step before continuing):

+ 
brew uninstall gcc-4.6
+

Now reinstall gcc with multilib and c++ support:

+ 
brew install --enable-cxx https://gist.github.com/artlogic/6988658/raw/aeb9d1ea098274ad3f3fe2637b9df7f308a8a120/gcc-4.6.rb
+

Make sure /usr/local/bin is on your PATH. You can do this temporarily by typing the following into the command prompt:

+ 
export PATH=/usr/local/bin:$PATH
+

You can make the above change permanent by adding it to the .bash_profile file in your home directory.

+

After you've set your PATH, make sure you can run both of the following commands:

+ 
gcc-4.6 -v
+
+g++-4.6 -v
+

If either of these commands fail, you may need to relink your gcc using brew with the following command:

+ 
brew link --overwrite gcc-4.6
+

It's also possible that /usr/bin/c++ is not pointing at clang++ as it should be with Xcode 5 installed. You can determine if it is by typing the following:

+ 
ls -l /usr/bin/c++
+

It should return something that looks like this:

+ 
lrwxr-xr-x 1 root admin 7 Sep 19 11:40 /usr/bin/c++ -> clang++
+
+

If c++ is pointing at something other than clang++, update it with the following commands:

+ 
sudo rm /usr/bin/c++
+
+sudo ln -s /usr/bin/clang++ /usr/bin/c++
+

Cannot pull files from backup directory

+

This could happen when the USB connection is broken while the script pulls data from device to computer.

+

When you run the script again, you'll probably get the following (the example is for the Peak device):

+ 
Pulling files from ../../../backup-peak
+cat: ../../../backup-peak/system/build.prop: No such file or directory
+Found firmware with build ID
+Pulling "libaudioeq.so"
+cp: cannot stat `../../../backup-peak/system/lib/libaudioeq.so': No such file or directory
+Failed to pull libaudioeq.so. Giving up.
+
+> Build failed! <
+
+Build with |./build.sh -j1| for better messages
+If all else fails, use |rm -rf objdir-gecko| to clobber gecko and |rm -rf out| to clobber everything else.
+

To solve this, it is not necessary to remove the whole objdir-gecko or out directories. Just remove the backup directory, like this (for the example above):

+ 
$rm -rf backup-peak
+

Emulator build issues

+

If you are making an emulator build, you need to pay attention to these issues:

+
+

First, note that you shouldn't use the x86 emulator — it is hard to install and not well supported.

+
+

Next, the build-system for the emulator builds both 32bit and 64bit versions of the emulator. As the emulator depends on OpenGL, this means that you need to have both 32bit and 64bit versions of OpenGL libraries installed on your system. See the discussion in bug 897727.

+

There are two ways that you can solve this problem:

+ +

If your linux distro has multilib packages for OpenGL libraries, you can attempt installing them. You might then have to manually create some symlinks.

+

For example, here is the situation on Ubuntu 12.04 LTS x86-64. On this distribution, the libgl1-mesa-dev package cannot be installed simultaneously in x86-64 and i386 versions, but you can have the following combination of packages simultaneously installed:

+ 
sudo apt-get install libgl1-mesa-dev libglapi-mesa:i386 libgl1-mesa-glx:i386
+

After having run this command, you will still have to manually create some symlinks for the emulator build to succeed:

+ 
sudo ln -s /usr/lib/i386-linux-gnu/libX11.so.6 /usr/lib/i386-linux-gnu/libX11.so
+sudo ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1 /usr/lib/i386-linux-gnu/libGL.so
+

Solution #2: just patch the emulator so it only builds 64bit

+

Just apply this patch to the sdk/ git repository under the B2G repo. This will cause the B2G emulator to only attempt to build the 64bit emulator if you're on a 64bit system, thus avoiding any multilib issues. The 32bit emulator is unused anyway on a 64bit system. This is the simplest solution, until this patch eventually bit-rots.

+

Next steps

+

After building, your next step depends on whether you built Boot to Gecko for the emulator or for a real mobile device; see the following articles for details:

+ +
+

Submitting bugs on B2G/Firefox OS/Gaia

+

Once you've got a B2G/Firefox OS build running, you'll probably want to start to file bugs against this specific version, so the Firefox OS community can improve things as effectively as possible. You'll want to file the bug on Bugzilla, under the "Firefox OS" project, but you should include version specifics:

+
    +
  1. To start with, tell us the major version number, e.g. 1.4.0.0-prerelease. This can be found on the device under Settings > Device Information.
    2. +
  2. You can provide more specific version identifiers by  returning the current hashes from the gaia and gecko repositories. This can be done like so: + 
    #!/bin/bash
+(cd gaia;  echo "gaia  $(git rev-parse HEAD)")
+(cd gecko; echo "gecko $(git rev-parse HEAD)")
    +
    3. +
diff --git a/files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html b/files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html new file mode 100644 index 0000000000..ea95805479 --- /dev/null +++ b/files/de/archive/b2g_os/building_and_installing_firefox_os/compatible_devices/index.html @@ -0,0 +1,357 @@ +--- +title: Kompatible Geräte +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Compatible_Devices +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/Compatible_Devices +--- +
+

Install B2G OS in you device easily with B2G installer - a Firefox Add-on.

+
+ +
+

Note: All devices have the recommended build target below its name (see nickname or codenames). For example to build for Nexus 6 do ./build.sh nexus-6-l. Device codenames where given directly by manufacturers. You can find it in build.prop file of a stock ROM.

+
+ +

Development Devices

+ +

These devices are official reference devices for developing B2G OS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Image
Name
+ (Android version)		Z3 Compact (Kitkat)
+ Sony Shinano platform		Z3 (Kitkat)
+ Sony Shinano platform		Flame (Kitkat)
Nicknamearies-kkleo-kkflame-kk
Build and installation informationhttps://discourse.mozilla-community.org/t/building-b2g-os-for-aries-z3c/8082 https://discourse.mozilla-community.org/t/flame-builds/8548
Available in B2G InstallerYesNoYes
+ +

Community Supported Devices

+ +

Those devices are supported by community efforts. Feel free to help them !

+ +
+

Builds distribution frequency may vary depending of maintainers number and time available.

+
+ +

Working devices

+ +

These devices have builds available running B2G OS :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Image
Name
+ (Android version)		ZTE Open CNexus 5WileyFox SwiftFairphone 2
Nicknameopenc-fr / openc-ebay                         
Build and installation informationhttps://discourse.mozilla-community.org/t/zte-open-c/8402/ +

https://discourse.mozilla-community.org/t/test-b2gos-on-nexus-5/9405/1

+ 		  +

https://discourse.mozilla-community.org/t/fairphone-2-build/8641/
+ https://discourse.mozilla-community.org/t/fairphone-2-support-for-b2g-installer-landed/8334

+
Available in B2G Installer +

No

+ +

(but a buildbot is available)

+ 		YesYesNot yet, but almost done. Blobfull build working.
+ +

Work in progress

+ +

Work is going on to support these devices :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Image 
Name
+ (Android version)		E3
+ Sony Yukon platform		Z1 Compact (Lollipop)
+ Sony Rhine platform		Xiaomi Redmi 1S
Nicknameflamingo-lamami-larmani
Build and installation informationhttps://discourse.mozilla-community.org/t/b2g-os-flamingo-sony-xperia-e3-builds/8361https://discourse.mozilla-community.org/t/support-for-amami-xperia-z1c-building-debugging-providing-builds/8348https://discourse.mozilla-community.org/t/wip-xiaomi-redmi-1s-hongmi-1s/10273
Support statusBlocked, problem with flashing toolsEarly building testsEarly building tests
+ +

Devices with porting possibilities

+ +

This is a (non-exhaustive) list of devices with porting potential, thanks to available AOSP or Cyanogen Mod version, or because they supported Firefox OS until version 2.6.

+ +
+

Note: There aren't currently any ports for these phones, but it is possible to build B2G OS. See how to build section for more info. You are welcome to maintain these builds.

+
+ +

Nexus Devices

+ +

These devices are (almost) automatically supported by B2G OS because they are Google's reference devices for AOSP.

+ + + + + + + + + + + + + + + + +
Nexus 6Nexus 4
  
+ +

Sony Devices

+ +

These devices use Sony Mobile's Open Devices initiative, which aims to support all modern Xperia devices in AOSP.

+ +

These devices are built on a Lollipop AOSP base.

+ +
+

Right now most of the Sony devices are missing camera support. This depends on work in progress by Sony developers.
+ Also, we need contributors to maintain these ports.

+
+ +

Devices where support for B2G OS is ongoing are not listed here.

+ +

Sony Shinano Platform

+ + + + + + + + + + + + + + + + + + + + + + +
 
Z3 Z3 Tablet CompactZ2
leo-l scorpion-lsirius-l
+ +
+
+ +

Sony Rhine Platform

+ +
+

Rhine devices use a legacy NFC chip so this feature is currently missing. See bug 1226720 We need contributors to maintain these ports.

+
+ + + + + + + + + + + + + +
Z1
honami-l
+ +

Sony Yukon Platform

+ + + + + + + + + + + + + + + + + + + +
T2 UltraT3M2
tianchi-lseagull-leagle-l
+ +

CyanogenMod Supported Devices

+ +

Here be dragons! (To be completed)

+ +

Legacy Devices

+ +

Some old devices are no longer maintained by the community, but it is still possible for volunteers to keep them alive (Yay Open-Source!). Feel free to contact the team previously working on these devices to get some help.

+ +

No device here right now.

+ +

Obsolete Devices

+ +
+

Forget about these device's support if you have one.

+
+ +

Several old devices are no longer maintained for B2G OS , and we do not have a community to keep them alive. The current status of these devices is unknown, which probably means they cannot be built on B2G OS master branches.

+ + + + + + + + + + + + + + + + + + + + + + +
Geeksphone PeakGeeksphone KeonZTE OpenTCL Fire
peakkeoninarihamachi
+ + + + + + + + + + + + + + + + + + + + + + +
Samsung Galaxy S2Galaxy NexusNexus SNexus S 4G
galaxy-s2galaxy-nexusnexus-snexus-s-4g
+ + + + + + + + + + + + + + + + + + + + + + +
Foxconn InFocusVia VixenPandaboardRaspberry Pi
flatfishvixenpandaboardrpi
diff --git a/files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html b/files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html new file mode 100644 index 0000000000..56422c4cf6 --- /dev/null +++ b/files/de/archive/b2g_os/building_and_installing_firefox_os/firefox_os_build_overview/index.html @@ -0,0 +1,155 @@ +--- +title: 'Firefox OS Build Prozess: Übersicht' +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS/Firefox_OS_build_overview +tags: + - Firefox OS + - build + - install +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS/B2G_OS_build_process_summary +--- +
+

Firefox OS zu kompilieren und zu installieren erfordert eine erhebliche Menge Zeit, Netzwerkbandbreite und Rechenleistung. Leider können auch Dinge schiefgehen. Dieser Artikel beschreibt die Ziele und Schritte des Build-Prozesses, um Benutzern während der Firefox OS Installation zu helfen. Details der einzelnen Schritte werden in den verlinkten Seiten erläutert.

+
+ +
+

Anmerkung: Der Firefox OS Build Prozess ist voll von Bezügen zu 'B2G' oder 'Boot2Gecko'. 'Boot2Gecko' war der ursprüngliche Codename des Firefox OS Projekts.

+
+ +

Das Ziel: vier 'image'-Dateien

+ +

Der grundsätzliche Zweck des Build Prozesses ist es vier Dateien zu erzeugen, die auf das Firefox OS-Gerät kopiert werden können.

+ + + + + + + + + + + + + + + + + + + + +
boot.imgDer Linux-Kernel und ein Image des root-Dateisystems, wobei letzteres ein Set von grundlegenden UNIX-Tools zur Verfügung stellt.
system.imgDer Kern von Firefox OS inklusive einiger Teile von Gonk, der Portierung von Gecko, und dem ausführbaren Programm b2g.
userdata.imgDas Gecko-Profil des Benutzers und die Gaia Web-Anwendungen für das Gerät.
recovery.imgEin Linux-Kernel und ein Image des root-Dateisystems zusammen mit einem einfachen Werkzeug, um eine defekte Installation zu reparieren.
+ + +

Wenn diese 4 Images erzeugt wurden, können sie auf das Gerät übertragen werden.

+ +

Firefox OS setzt auf dem Android Open Source Project (AOSP) auf. Die AOSP-Werkzeuge adb und fastboot bieten Möglichkeiten auf ein Gerät zuzugreifen und es zu verändern. Insbesondere kann das Kommando adb reboot-bootloader ein angeschlossenes Gerät dazu bringen, neu zu starten und in einem frühen Bootloaderstadium zu pausieren, während das Kommando fastboot flash $partition $image dazu benutzt werden kann, ein Image auf das Gerät zu kopieren.

+ +

Das Boot-Image

+ +

Das Boot-Image (boot.img) ist eine Kombination aus dem Linux-Kernel und einer initialen root Partition, die die grundlegenden Werkzeuge und Initialisierungs-Skripte bereit stellt. Letzteres wird für eine effektive Nutzung durch das Gerät in den Gerätespeicher kopiert und wird deshalb als "ramdisk" (RAM-Disk) bezeichnet. Das Boot-Image wird in die boot Partition des Gerätes kopiert und die Inhalte der RAM-Disk erscheinen unter dem root-Verzeichnis, wenn zur Laufzeit auf das Geräte-Dateisystem zugegriffen wird; zum Beispiel beim Ausführen von adb shell.

+ +

Das Boot-Image richtet auch die Berechtigungen des root-Benutzers in der Datei default.prop im root-Verzeichnis ein.

+ +

Es ist auch möglich vorhandene Boot-Images zu verändern, indem man die Datei untersucht, sie in Kernel und RAM-Disk trennt, die Inhalte der RAM-Disk extrahiert, diese ändert, das RAM-Disk-Image neu zusammenstetzt und daraus eine funktionierende boot.img-Datei erzeugt. Ein Beispiel findet man auf der Alcatel One Touch Fire Hacking (Mini) Guide-Seite.

+ +

Boot-Images können vor der Installation getestet werden, indem man sie dem Gerät "unterschiebt" (sideload). Der Geräte-Start kann im Bootloader angehalten werden. Im Bootloader-Modus kann man dann mit fastboot von einem eigenen Boot-Image booten, indem man das Kommando fastboot boot /some/path/to/boot.img verwendet.

+ +

Das System-Image

+ +

Das System-image (system.img) stellt die Grundfunktionen von Firefox OS bereit:

+ + + +
+

Siehe Firefox OS platform guide für nähere Informationen zur System-Architektur.

+
+ +

Das System-Image wird in die system Partition des Geräts kopiert und ist im laufenden Betrieb im Verzeichnis /system/ zu sehen wenn das Dateisystem gemountet wurde.

+ +
+

Hinweis: Das System-Image stellt zudem vom Gerät genutze Binär-Programme zur Verfügung, insbesondere den RIL (Radio Interface Layer) für die Funk-Verbindungen.

+
+ +

Das User Data Image

+ +

Das User Data Image (userdata.img) enthält die Gaia Apps des Anwenders.

+ +

Das User Data Image wird in die userdata Partition des Gerätes kopiert. Der Inhalt ist im laufenden Betrieb im Verzeichnis /data/ zu sehen wenn das Dateisystem gemountet wurde. Das Verzeichnis /data/b2g/ enthält das Mozilla Gecko Profil des Anwenders, das Verzeichnis /data/local/webapps/ enthält die verfügbaren Apps.

+ +

Das Recovery Image

+ +

Das Recovery Image (recovery.img) enthält denselben Kernel und eine vergleichbare RAM-Disk wie die Boot Image Partition. Das Recovery Image verwendet allerdings ein anderes Initialisierungs-Skript, welches dem Anwender verschiedene Recovery-Funktionen zur Verfügung stellt die mit den Tasten des Gerätes bedient werden können.

+ +

Das Recovery Image wird in die recovery Partition des Gerätes kopiert, welche im Normalbetrieb nicht ins Dateisystem gemountet wird.

+ +

Der Build Prozess: setup, configure, build, install

+ +

Build Prozess und Installation von Firefox OS  bestehen aus 4 Schritten:

+ + + + + + + + + + + + + + + + + + + + +
SetupBereitstellen aller für den Build Prozess benötigten Programme wie z.B. Compiler und Bibliotheken.
ConfigureDownload des Quellcodes und Erzeugen einer configure Datei welche Umgebungsvariablen definiert in denen die benötigten Pfade und Parameter gespeichert werden.
BuildErzeugen des Gecko Anwender-Profils und der Gaia Anwendungen des Gerätes.
InstallInstallieren der Dateien auf dem Gerät.
+ + +

 

+ +

Setup

+ +

Die Setup-Phase ist notwendig um sicher zu stellen dass sämtliche für den Build Prozess benötigte Software zur Verfügung steht, z.B. Compiler und Build Tools.

+ +

Dieser Schritt kann manuell oder per Skript durchgeführt werden. Details hierzu findest Du auf Firefox OS build prerequisites.

+ +
+

Hinweis: Auf UNIX und UNIX-artigen Computern kann man mit dem Kommando which prüfen, ob ein für den Build Prozess benötigtes Programm vorhanden ist. Als Parameter erwartet which den Namen des benötigten Programms.

+
+ +

Configuration

+ +

Der eigentliche Build Prozess startet mit dem Erstellen einer Kopie der Firefox OS (bzw. B2G) Software, gewöhnlich wird ein Git Clone des B2G Projekts erstellt. Der Schritt Configuration kopiert den gesamten benötigten Quellcode und erzeugt eine config Datei, welche die benötigten Installations-Parameter enthält.

+ +

Ausgeführt wird dieser Schritt mit dem config.sh Skript. Details findest Du auf der Preparing for your first B2G build Seite.

+ +

Das Configure Skript benötigt einen Parameter mit dem der Gerätetyp spezifiziert wird. Diese sogenannten Code Names fliessen in den Build Namen ein und stehen für eine bestimmte CPU Architektur und nicht für ein spezielles Gerät. Momentan kann man also nicht anhand des Build Names bestimmen ob ein Build auf einem bestimmten Gerät lauffähig ist.  Eine Liste der verfügbaren Code Names findest Du hier.

+ +

Der Schritt Configure nutzt repo, ein Tool des Android Open Source Projekts, für den Download der für den Build benötigten Software. Die Software wird gespeichert im Verzeichnis repo/projects. Aufgrund der herunter zu ladenden Datenmenge und der durchzuführenden Schritte kann der Schritt Configure länger dauern.

+ +

Build

+ +

Im Schritt Build wird der Quellcode kompiliert und die Image-Dateien werden erzeugt.

+ +

Hierzu wurd das build.sh Skript ausgeführt. Details hierzu findest Du in Building Firefox OS.

+ +

Das Skript versucht alle Quellcodes in einem Schritt zu kompilieren: Die Android Open Source Project Tools, den Linux Kernel und die Gaia Web Anwendungen. Wenn dieser Schritt fehl schlägt ist nicht immer klar, an welcher Stelle der Build ein Problem hatte.

+ +

Es ist möglich, nur einzelne Komponenten des Gesamtpakets zu kompilieren. Z.B. kann Gecko einzeln kompiliert werden, indem das Build Skript mit dem gecko Parameter aufgerufen wird. Das gleiche gilt für Gaia, wo das Build Skript mit dem  gaia Parameter gestartet wird. Diese Pakete können einzeln installiert werden,wie im folgenden beschrieben Abschnitt wird.

+ +

Ebenso ist es möglich die oben beschriebenen Image-Dateien zu erzeugen. Z.B. kann man das System-Image mit ./build.sh out/platform/$target/system.img erzeugen, wobei der Parameter $target derselbe ist wie im Schritt Configuration.

+ +

Install

+ +

Im Schritt Install wird der neu kompilierte Code auf das Gerät kopiert. Hierzu wird das Skript flash.sh ausgeführt.

+ +

Es können auch gezielt einzelne Komponenten des neu erstellten Build-Pakets installiert werden, indem das Flash Skript mit den entsprechenden Parametern gestartet wird . Zum Beispiel können die Gaia Web Anwendungen durch ./flash.sh gaia installiert werden.

diff --git a/files/de/archive/b2g_os/building_and_installing_firefox_os/index.html b/files/de/archive/b2g_os/building_and_installing_firefox_os/index.html new file mode 100644 index 0000000000..51b1e0f6d4 --- /dev/null +++ b/files/de/archive/b2g_os/building_and_installing_firefox_os/index.html @@ -0,0 +1,45 @@ +--- +title: Erstellen und Installieren von Firefox OS +slug: Archive/B2G_OS/Building_and_installing_Firefox_OS +translation_of: Archive/B2G_OS/Building_and_installing_B2G_OS +--- +

B2GOS befindet sich derzeit in aktiver Entwicklung und ist daher im Status einer Vorveröffentlichung. Um sicher die aktuellste Version zu benutzen empfiehlt es sich B2GOS selbst zu erstellen und zu installieren. Die Artikel auf dieser Seite führen dich durch die Prozesse um B2GOS für den Emulator, ein kompatibles Endgerät, oder das Gaia Benutzer Interface im Firefox Browser, zu erstellen.

+ + + + + + + + +
+

Beschaffen und Erstellen von B2GOS

+ +
+
Voraussetzungen zum Erstellen von B2GOS
+
Was du vor der Ersterstellung von B2GOS brauchst und tun musst.
+
Vorbereitungen zum Erstellen von B2GOS
+
Um B2GOS zu erstellen müssen zuerst die Quelldaten heruntergeladen werden. Was du dazu tun musst und wie es funktioniert wird in diesem Artikel erklärt. 
+
Erstellen von B2GOS
+
Erstellen von B2GOS für die Zielplattform.
+
+ +

View All...

+ 		+

Installieren von B2GOS und/oder Gaia

+ +
+
Möglichkeiten B2GOS zu testen
+
Hier wird erklärt welche verschiedenen Möglichkeiten es gibt B2GOS zu testen. Ob direkt im Browser mittels Gaia, auf dem Mobiltelefon oder im Emulator? Hier kannst du dir einen Überblick über die Möglichkeiten verschaffen.
+
Gaia im Browser
+
Wie man Gaia im Webbrowser testet.
+
B2GOS als Desktop Anwendung
+
Firefox OS kannst du in einer Desktop Anwendung die die Gaia Umgebung simuliert testen. Damit erzielst du bessere Ergebnisse als im Browser, es ist aber noch nicht so akkurat wie im Emulator.
+
B2GOS im Emulator
+
Eine Anleitung zur Benutzung von B2GOS im Emulator, und eine Einführung in die Auswahl des richtigen Emulators zur entsprechenden Aufgabe.
+
B2GOS auf deinem Gerät
+
Anleitung zur Installation von B2GOS auf Mobiltelefonen.
+
+
+ +

 

diff --git a/files/de/archive/b2g_os/debugging/developer_settings/index.html b/files/de/archive/b2g_os/debugging/developer_settings/index.html new file mode 100644 index 0000000000..1a614927b3 --- /dev/null +++ b/files/de/archive/b2g_os/debugging/developer_settings/index.html @@ -0,0 +1,197 @@ +--- +title: Developer settings for Firefox OS +slug: Archive/B2G_OS/Debugging/Developer_settings +translation_of: Archive/B2G_OS/Debugging/Developer_settings +--- +
+

Die Entwicklereistellungen befinden sich in den Firefox OS Einstellungen. Dieses Panel bietet eine Vielzahl an Optionen, die das Debugging deiner Open Web Anwendung für Firefox OS erleichtern. Dieser Artikel beschreibt die verfügbaren Optionen und erklärt wie diese benutzt werden können.

+
+

Der Einstellungsbereich für die Entwickler-Optionen wurde bewusst in einem Untermenüpunkt versteckt, um ein versehentliches Aktivieren durch unerfahrene Benutzer zu vermeiden, was eine Beeinträchtigung der Performance oder Auswirkungen auf die visuelle Darstellung von Firefox haben kann. Das Entwicklermenü sieht ähnlich aus wie auf der folgenden Darstellung gezeigt (dieses Bild wurde mit einem Geeksphone Keon mit einer im April 2014 erzeugten Version von Firefox OS 2.0 erstellt):

+

+

Das Entwicklermenü kann folgendermaßen erreicht werden:

+ +

Im folgenden Abschnitt werden alle Optionen einzeln vorgestellt und erklärt wie diese verwendet werden können.

+
+

Wichtig: Diese Tools sind hilfreich, aber können Probleme im normalen Gebrauch des Telefons versursachen. Einstellungen, die dafür bekannt sind, dass sie Probleme verursachen können, sind per default abgeschaltet. Falls du Probleme mit den Funktionen feststellen solltes, versuche die entsprechenden Funktionen wieder zu deaktivieren.

+
+

Einstellungen der Developer Tools

+

Debugging via USB

+

Die "Remote debugging" Option aktiviert das ferngesteuerte debugging deines Firefox OS Gerätes. Außerdem wird die ADB Kommando-Eingabe aktiviert. In Firefox < 1.4 gibt es dafür nur ein aktivierbares Kontrollkästchen; ab Firefox 1.4 sind es drei Optionen:

+ +

Developer HUD

+

Ab Firefox OS 1.4, öffnet ein Berühren des Menüeintrages Developer HUD folgendes Auswahlmenü:

+

+

Die beiden ersten Kontrollboxen (immer aktiv) sind:

+ +

Anschließend folgt ein Slider, mit dem weitere Entwickler-Optionen ('Developer Tools') aktiviert werden können , auch weitere Checkboxen sind verfügbar:

+ +

Frames per second

+

Enabling this option reports three numbers in the top left of the Firefox OS display; the values reported are an average of recent results within a sliding window, meant to be "instantaneous" but fairly accurate. As such, all numbers are "guesses":

+ +

A screenshot of Firefox OS, showing three numbers in the top left hand corner that are measurements of app framerate.

+

Time to load

+

Firefox OS also has a tool that can help measure startup time, specifically the "first paint" time. The value shown by the tool — in the top right of the Firefox OS display — is the elapsed time between when the most recent application was launched, and an estimate of the first time that application painted its UI, in milliseconds. This number only approximates the real "first paint" time, and in particular underestimates it. However, lowering this number almost always correlates to improvements in real startup time, so it can be useful to quickly measure optimization ideas.

+

A screenshot of Firefox OS, showing a number in the top right hand corner that is a measurement of the current app startup time, in milliseconds.

+

App memory

+

Displays information on how much memory the app is using, and allows you to enable or disable the different items that use memory to show much each one is using in the current app. For example, the screen shot below only has App memory and JS objects checked, and the indicator on the bottom right is showing that the Settings app is using 414.77KB for JS objects.

+

+

Pseudo-localization

+

When enabled, pseudo-languages like Accented English and Mirrored English are available for selection in Settings > Languages.  With pseudo-localizations, you can test the localizability of your code in regular Gaia builds without having to add real language resources nor having to speak a foreign language.  For instance, you can make sure the layout scales well with longer strings, you can preview the app in a fake RTL language, or spot HTML elements wihout the data-l10n-id attribute (they will be displayed in regular English).

+

Screenshot of pseudolocales

+

You can turn pseudo-localizations on by default when you build Gaia by adding the following line into gaia/build/config/common-settings.json:

+
 "devtools.qps.enabled": true
+

Note: Pseudo-localizations are generated completely dynamically, each time an app is launched.  The performance and memory characteristics may be different than those of regular localizations.  If you specifically want to test performance of non-English languages, build multilocale Gaia with real locales.

+

Graphics settings

+

Flash repainted area

+

In this mode, every time a region of the screen is painted by Gecko, Gecko blits a random translucent color over the painted region. Ideally, only parts of the screen that visually change between frames will "flash" with a new color. But sometimes more area than is needed is repainted, causing large areas to "flash". This symptom may indicate that application code is forcing too much of its scene to update. It may also indicate bugs in Gecko itself.

+

A screenshot of Firefox OS with a number of transparent overlays, showing the parts of the screen repainted with each new animation frame.

+

Enable APZ for all content (Async Pan/Zoom)

+

When enabled, the Async Pan/Zoom module allows panning and zooming to be performed on asynchronously, on another thread, with some noticeable differences to rendering behaviour. To find out more, read the MozillaWiki APZ article.

+

Overscrolling

+

This enables and disables the behaviour in Firefox 2.1+ where the display stretches in an elastic manner when you scroll past the end of a page, then shrinks back again when you stop dragging the display. The behaviour's full name is elastic overscroll.

+

Tiling (was Layers: Enable tiles)

+

Introduced in Firefox OS 1.4, this feature enables the painting of content to the screen in smaller chunks ("tiles") rather than painting the whole screen at once. This is mainly useful for platform QA work involving reducing checkerboarding and finding regression windows.

+

Simple tiling (was Layers: Simple tiles)

+

This flips between the two different content painting implementations described in the section above.

+

Low-precision painting

+

Enabling this option makes Gecko paint a low-precision (blurry) version of the content when scrolling really fast. This is useful because it's quicker to paint, and so helps us avoid displaying blank areas (i.e. checkerboarding) while scrolling quickly. It should only be visible to the user temporarily; once the user stops scrolling we fill in the low-precision areas with high-precision content.

+

Low-precision transparency

+

This is an additional flag for low-precision painting, which makes the low-precision content half transparent. This makes it a little more subtle and less jarring for the user.

+

Hardware composer (was Enable hardware compositing)

+

When enabled, this setting causes the device to use its Hardware Composer to composite visual elements (surfaces) to the screen.

+

Draw tile borders (was Layers: Draw tile borders)

+

This is very similar to the {{ anch("Draw layer borders") }} option, the difference being that it also draws the borders for individual tiles as well as the borders around layers.

+

Draw layer borders

+

When this setting is enabled, a brightly colored border is added around all the different layers painted to the display — great for diagnosing layout issues.

+

A screenshot from Firefox OS showing an opened select form with the draw layers borders option enabled, resulting in colored borders being drawn on all the different rendered layers.

+

Dump layers tree

+

This option enables layers.dump, which causes a copy of the compositor's layer tree to be dumped to logcat on every frame composited to the screen; this is mainly useful for platform graphics performance work, rather than regular web development.

+

Cards View: Screenshots

+

When enabled, this specifies that app screenshots will be taken when the open apps are displayed in card view. If disabled, app icons are shown in the center of blank cards for the card view instead.

+

Window management settings

+

Software home button

+

Enabling this option creates a software home button that can provide the same functionality as the equivalent hardware button if it is not available. This is intended for future use on devices that are likely to not have hardware home buttons, like tablets.

+

Home gesture

+

Enabling this option allows you to swipe upwards towards the center from outside the screen to bring up the homescreen. Again, this can provide the same functionality as the equivalent hardware button if it is not available, and is intended for future use on devices that are likely to not have hardware home buttons, like tablets.

+

Continuous transition

+

This setting allows you to decide whether app keyboards open immediately or continuously (with a  transition). Disabling such transition effects are useful on low end devices, when they cause performance to suffer.

+

App transition

+

Turn this on and then off again and you will disable all app closing/opening transitions: all apps will now just show immediately, without the smooth animation, and keyboards will also open/close without animation. Like "Continuous transition enabled", this is meant for improving performance on low end devices, but it has more of an effect.

+

App suspending

+

If enabled, this specifies that when an app is killed in the background, it will be kept in history and reopened when you open it from homescreen/card view. If disabled, such apps are not kept in history/card view.

+

Debug settings

+

Log slow animations

+

This tool tries to help developers understand why animations are not offloaded to the compositor to be run efficiently as possible. It reports "bugs" like trying to animate elements that are too large, or trying to animate CSS properties that can't be offloaded. The messages you'll get on the device will look like the following:

+
I/Gecko   ( 5644): Performance warning: Async animation disabled because frame size (1280, 410) is bigger than the viewport (360, 518) [div with id 'views']
+
+

Geolocation output in ADB

+

Enables logging of geolocation data to adb logcat. This helps with debugging both the GPS stack (namely we get NMEA callback) and MLS use.

+

Wi-Fi output in adb

+

Enabling this option adds information about Wi-Fi to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Bluetooth output in adb

+

Enabling this option adds information about Bluetooth to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Console enabled

+

When enabled, this option lets you use the Web Console in Firefox to remotely access the console output on the device; without this option enabled, the {{domxref("console.log()")}} function does nothing.

+

Gaia debug traces

+

Enabling this directly enables DEBUG traces in Gaia; see {{ bug("881672") }} for more details.

+
+

Note: Unfortunately, not every app supports this mechanism to print their debug log. Instead, they control a "DEBUG" flag in code directly, so enabling this flag does NOT ensure that you'll see all debug logs.

+
+

Show accessibility settings

+

This enables the accessibility settings menu, subsequently found at Settings > Accessibility. The options contained within the accessibility settings are as follows:

+

Screen reader

+

Enabling this option turns on Firefox OS's screen reader. This is technology that allows a blind person to use a Firefox OS device. Currently at a very early stage, it changes the way the standard touch events work. When the screen reader is on, you must interact with the screen as follows:

+ +
+

Note: If you have turned the screen reader on and wish to disable it again, you must navigate back to the setting via these new gestures and double-tap the checkbox once it is highlighted to turn it off again. That will restore the touch screen functionality to its default behaviour.

+
+

Note: In Firefox 1.4 and above, there is a quick toggle for the screen reader. Press volume up, then down, three times (up, down, up, down, up, down). The screen reader will instruct you to perform this same action again (volume up, down, up, down, up, down) to turn it on if it is not running, or to turn it off if it is already running. If you do not want to change the current toggle state, simply do something else. That way, you can turn it on and off at will to test your web application for accessibility without having to navigate the accessibility settings menu each time.

+

Speech volume

+

A slider that controls how loud the speech is delivered.

+

Speech rate

+

A slider that controls how fast the speech is delivered.

+

Use Marketplace reviewer certs

+

TBD

+

Shake to save system log

+

TBD

+

Verbose app permissions

+
+

Note: Introduced with Firefox 2.1

+
+

When this is enabled, developers (and privacy enthusiasts) may modify all permissions granted to installed privileged apps, using The "App Permission" pane in the Settings app. The app sub-pages under here are updated upon enabling the setting to provide a list of each API permission is requested for in the app's manifest file, along with choices to set that permission to. For example, "Schedule Alarms" appears with choices of Ask, Deny and Grant. Note that some apps may be unable to deal with changed permissions. If you experience any odd behavior, consider resetting the permission or re-installing the app.

+

Launch first time use

+

The "Launch first time use" button runs the "First-Time Use" (FTU) program; this lets you go through the initial setup and tutorial process, and is useful when trying to debug that process, or if you want to re-configure your device from scratch.

+

Software updates

+

Update channel

+

Enables you to specify different update channels to get software updates from when your device receives OTA updates. Options are nightly, aurora ... (others?)

+

Update URL

+

Enables you to specify different URLs from which to receive your updates.

+

Obsolete settings

+

This section lists settings that are no longer provided, or no longer exist in the same state, but might still be interesting if you are running an older version of Firefox OS.

+

Accessibility

+

In versions of Firefox earlier than newer 1.4 versions, this controls the accessibility settings, as explained in the {{ anch("Show_accessibility_settings") }} section above.

+

Grid

+

The "Grid" option, when enabled, causes the Firefox OS display to be overlaid with a grid pattern to help you gauge positioning and alignment of items. For example, below we see the Browser app running with the Grid option enabled:

+

+

The grid's heavier lines are 32 pixels apart, both horizontally and vertically.

+

Show frames per second

+

In Firefox OS versions older than newer 1.4, enabling this displays frames per second, as explained in the {{ anch("Frames_per_second") }} section above.

+

Show time to load

+

In Firefox OS versions older than newer 1.4, enabling this displays time to load information, as explained in the {{ anch("Time_to_load") }} section above.

+

Rocketbar enabled

+

In Firefox OS versions older than newer 1.4, this option enables the new Firefox Rocketbar on your device, which provides a useful new way to switch between apps, search, and more. When enabled, you'll find a search icon at the top left of the device, and the RocketBar can be brought up by swiping from the top left of the device towards the bottom left.

+
+

Note: In newer versions of Firefox OS, Rocketbar is enabled automatically and cannot be turned off.

+
+

Contacts debugging output in adb

+

Enabling this option adds debugging information about contacts to the adb logs (error logs from the console can be accessed using adb logcat | grep "Error" in the Terminal.)

+

Progressive paint (was Layers: Progressive paint)

+

This was introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation. Now APZ implementation is complete, this option is deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).

+

Displayport Heuristics

+ +

These options were introduced to help with debugging of the Async Panning/Zoom module (APZ) during its implementation, specifically to allow QA to experiment with different repainting heuristics to see which resulted in the least amount of checkboarding.. Now APZ implementation is complete, these options are deprecated, and will be removed from future versions (see {{ Bug("1003228") }}).

+

Edges gesture

+

Enabling this option allows you to swipe left and right from outside the screen towards the center, to navigate to the next and previous sheets (either web pages in the browser, or views inside another app.) This basically works like the browser navigator bar in Firefox, but is enabled by default in Firefox 2.1+.

+

Keyboard layouts

+

In addition to the developer-specific options listed above, Firefox OS < 1.4's developer settings featured keyboard layout options. These let you toggle on and off the then-experimental Chinese input methods:

+

+

As of Firefox 1.4, these options have been removed. This is because the Chinese keyboard layout implementations (zhuyin and pinyin) have now been completed.

+
+

Note: For other keyboard layouts still under development, such as Japanese, we now have a build-time config to opt them in.

+
+

 

diff --git a/files/de/archive/b2g_os/debugging/index.html b/files/de/archive/b2g_os/debugging/index.html new file mode 100644 index 0000000000..a83bb6ae67 --- /dev/null +++ b/files/de/archive/b2g_os/debugging/index.html @@ -0,0 +1,80 @@ +--- +title: Debugging on Firefox OS +slug: Archive/B2G_OS/Debugging +tags: + - B2G + - Debugging + - Firefox OS + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Archive/B2G_OS/Debugging +--- +
+

There are two main types of debugging you'll want to with Firefox OS: debugging apps, and debugging other aspects of the system. This section of the site provides articles covering the different tools at your disposal to debug your Firefox OS code.

+
+

Debugging apps

+

When debugging your web apps, the best tool at your disposal is Mozilla's powerful App Manager, which allows you to run your apps directly on a real device or simulator, update any changes instantly, and debug them directly on the device using Mozilla's excellent developer tools. This should be your first choice, especially for app/Gaia debugging.

+
+
+ Using the App Manager
+
+ The App Manager is a new tool available in Firefox for Desktop, which provides a number of useful tools to help you test, deploy and debug HTML5 web apps on Firefox OS phones and the Firefox OS Simulator, directly from your browser.
+
+ Debugging out of memory errors on Firefox OS
+
+ This article describes how B2G's multiprocess architecture affects what the phone does when we run out of memory, and how to understand and debug OOM crashes.
+
+

Debugging Gaia/B2G

+

If you want to debug code from the Gaia apps suite or B2G itself, the following tools will be of use to you.

+
+
+ Debugging using the desktop B2G client
+
+ You can use the dedicated B2G desktop application (and associated tools) to debug multiple aspects of B2G and Gaia.
+
+ Quickstart guide to Gaia development
+
+ This guide provides a very quick easy guide to developing and debugging Gaia apps, including running Gaia inside desktop Firefox, and debugging Gaia with App Manager.
+
+ Debugging B2G using gdb
+
+ The popular gdb debugger can be used to debug Firefox OS and web apps running on a device, or on an emulator. This guide will show you how it's done.
+
+ Debugging B2G using Valgrind
+
+ Valgrind gives developers access to information about memory allocations, threads, and other information important to performance. This guide shows how to run Valgrind either on desktop B2G or select phone hardware.
+
+ Getting NSPR logs in B2G
+
+ You can use NSPR logs to record HTTP and other networking.
+
+ Debugging OpenGL
+
+ How to debug OpenGL code on Firefox OS.
+
+

General setup and information

+

The following articles provide information on individual aspects of setup for Firefox OS development. The chances are that you won't need these, especially if you are just debugging apps using the App Manager. But we have made them available here in case you do.

+
+
+ Developer settings for Firefox OS
+
+ There are a number of settings options available for developers on Firefox OS. This guide explains what they do and how to take advantage of them.
+
+ Installing and using ADB
+
+ Many aspects of Firefox OS development require installation of adb, the Android Debug Bridge. This article explains how to do that, and shares some common useful ADB commands.
+
+ On-device console logging
+
+ How to log to console on a Firefox OS device, and how to access the resulting logs for review on your computer.
+
+ Connecting a Firefox OS device to the desktop
+
+ This short guide explains how to set up your Firefox OS device and your desktop so that the desktop can communicate with the device over USB.
+
+ Setting up to debug Firefox OS code
+
+ Before you can begin using most of the tools integrated into Firefox for debugging code running under Firefox OS, you need to do a little configuration work. This article explains what you need to do.
+
diff --git a/files/de/archive/b2g_os/debugging/installing_adb/index.html b/files/de/archive/b2g_os/debugging/installing_adb/index.html new file mode 100644 index 0000000000..9e49cc786b --- /dev/null +++ b/files/de/archive/b2g_os/debugging/installing_adb/index.html @@ -0,0 +1,70 @@ +--- +title: ADB installieren und benutzen +slug: Archive/B2G_OS/Debugging/Installing_ADB +tags: + - ADB + - B2G + - Debugging + - Firefox OS + - Installation + - mobil +translation_of: Archive/B2G_OS/Debugging/Installing_ADB +--- +
+

Viele Aspekte der Firefox OS Entwicklung erfordern die Installation von ADB, der Android Debug Bridge. Dieser Artikel erklärt, wie das geht und zeigt einige häufig verwendete und nützliche ADB Befehle.

+
+

ADB Installieren

+

ADB kann als Bestandteil des Android SDK Pakets für Mac, Linux oder Windows heruntergeladen und installiert werden - besuchen Sie dazu die Get the Android SDK Seite.

+

Bei neueren Linux Distributionen ist adb bereits in den Repositories verfügbar. Für Ubuntu 12.10 und neuere, führen Sie folgenden Befehl aus:

+
sudo apt-get install android-tools-adb
+

Oder für Fedora 18/19:

+
sudo yum install android-tools
+

Oder auf OSX mit Homebrew:

+
brew install android-platform-tools
+

Falls ihre Distribution kein Paket für adb zur Verfügung stellt (z.B. Ubuntu 12.04 oder Fedora 17), müssen Sie das Android SDK starter package für ihre Plattform installieren (wählen Sie die Option ADT Bundle, nicht SDK Tools Only). Führen Sie dann deren Paketmanager, $SDK_HOME/tools/android aus und nutzen Sie dann die GUI zum Installieren von "Android SDK Platform-tools".

+

Finden Sie heraus, wo adb installiert wurde (üblicherweise in usr/bin, unter Umständen zusätzlich in adt/platform-tools, je nach Installationsart). Stellen Sie sicher, dieses Verzeichnis zu ihrem PATH hinzuzufügen. Dies erreichen Sie durch Hinzufügen  der Zeile

+
PATH=$SDK_HOME:$PATH
+

in der Sie $SDK_HOME durch den Pfad ihres android sdk  ersetzen, zu ihrer ~/.bashrc oder vergleichbarem.

+

Fehlerbehebung

+

Wenn Sie eine 64-bit Installation verwenden, und Sie den Fehler "File not found" bei der Ausführung von 'adb' bekommen, obwohl diese Datei vorhanden ist, müssen Sie 32-bit Kompatibilitätsbibliotheken installieren. Um das mit apt zu tun:

+
sudo apt-get install ia32-libs
+

Häufig verwendete ADB Befehle

+

Der folgende Abschnitt erklärt einige häufig verwendete, nützliche adb Befehle.

+

Den b2g Prozess neu starten

+

b2g ist das Äquivalent einer XULRunner Anwendung die auf einem Smartphone auf einem Android-basierten Kernel ausgeführt wird. Manchmal kann ein Neustart dieser Anwendung nützlich sein; so können Sie die Anwendungsumgebung zurücksetzen ohne das Gerät neu zu starten. Sie können dies tun indem Sie folgendes in ihr Terminal eingeben, während ihr Gerät mit ihrem Computer verbunden ist (oder während der Ausführung des Debuggers):

+
adb shell killall b2g
+

Portweiterleitung zum Debuggen aktivieren

+

Um einfach eine Portweiterleitung zu aktivieren (zum Beispiel wenn Sie den App Manager nutzen um Apps auf ihrem Firefox OS Gerät zu debuggen), geben Sie folgenden Befehl in Ihrem Terminal ein:

+
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+

Dies müssen Sie jedesmal beim neu Starten oder Aus- und wieder Einstecken des Smartphones tun. Sie können die Socket Nummer ändern, wenn gewünscht.

+

Portweiterleitung zu einem lokalen Rechner

+

Um Ports zu einem lokalen Rechner weiterzuleiten, müssen Sie die netcat and ssh binaries herunterladen und folgende Befehle ausführen:

+
# this is an awful hack but does in fact work...
+host$ adb forward tcp:7979 tcp:6969
+
+# make some named pipes so that we can make a bidirectional netcat
+phone$ mknod readback p
+host$ mknod readback p
+
+# this sets up a one time use connection to back to the host
+# listen on ports 6969 and 5959 and forward all the information between them
+phone$ ./netcat -l -p 6969 < readback | ./netcat -l -p 5959 > readback
+# connect to port 7979 (port 6969 on the device) and the local ssh server and forward all information between them
+host$ ./netcat localhost 7979 < readback | ./netcat localhost 22 > readback
+
+# now when we connect to port 5959 on the phone it will be like connecting to ssh server on the host
+
+# use the netcat reversal to set up an ssh connection back to the host and forward port 9999 on the device to 'localhost:8000' (this could be anything like 'google.com:80')
+phone$ ./ssh localhost -p 5959 -L 9999:localhost:8000
+

Das wird Port 9999 auf dem Gerät zu Port 8000 des Hosts weiterleiten.

+

Alternativ können Sie einen SSH-Server (dropbear und host_key) mit folgenden Befehlen direkt auf dem Gerät verwenden:

+
phone$ DROPBEAR_PASSWORD=root ./dropbear -p 9000 -F -v -a -r host_key ./dropbear
+host$ adb forward tcp:8888 tcp:9000
+# public key authentication has been hard coded to succeed (make sure you have a public key for ssh to use)
+host$ ssh -vvv root@localhost -p 8888 -R 9999:people.mozilla.org:80
+
+

Weitere Anleitungen:

+ diff --git "a/files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_ger\303\244ts_mit_dem_rechner/index.html" "b/files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_ger\303\244ts_mit_dem_rechner/index.html" new file mode 100644 index 0000000000..d82f69789d --- /dev/null +++ "b/files/de/archive/b2g_os/debugging/verbinden_eines_firefox_os_ger\303\244ts_mit_dem_rechner/index.html" @@ -0,0 +1,41 @@ +--- +title: Connecting a Firefox OS device to the desktop +slug: Archive/B2G_OS/Debugging/Verbinden_eines_Firefox_OS_Geräts_mit_dem_Rechner +tags: + - ADB + - Firefox OS +translation_of: Archive/B2G_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop +--- +
+

Diese Anleitung erklärt, wie man ein Firefox OS  Gerät mit dem Rechner über USB verbindet.

+
+
+

Achtung: Um Apps auf einem Firefox OS Gerät zu debuggen und wenn auf dem Gerät Firefox 1.2+ läuft, ist der beste Weg den App Manager zu benutzen. Details können unter Benutzung des App Mangers nachgelesen werden. Wird eine Version von Firefox OS kleiner 1.2 benutzt, kann man unter Einrichtung des Firefox OS Debugging Modus unter Verwendung der Entwickler Tools mehr über das Standard Remote Debugging  erfahren.

+
+

Einrichtung des Geräts

+

Auf deinem Firefox OS Gerät (see the layout):

+
    +
  1. öffnen der App Einstellungen, dann Geräteinformationen > Weitere Informationen > Entwickler.
    2. +
  2. Im Entwickler Menü  "Debugging über USB" aktivieren.
    3. +
+

Einrichtung des Rechners

+

Um ein Gerät mit dem Rechner zu verbinden muss die Android Debug Bridge (adb) installiert sein. Beachte dass das Firefox OS Simulator add-on eine adb mitbringt.

+

Instructions for setting up your desktop are specific to your operating system and are detailed in point 3 of "Setting up a Device for Development" on the Android developer site. We've listed some additional instructions below.

+

Spezielle Anweisungen für Mac OS X

+

If you're running Mac OS X, you have downloaded a package which has a name along adt-bundle-mac-x86_64-20130522. Put that folder into the Applications folder, so that you get /Applications/adt-bundle-mac-x86_64-20130522/ which contains two directories: eclipse and sdk. Then you can edit your ~/.bashrc and add

+
export PATH="/Applications/adt-bundle-mac-x86_64-20130522/sdk/platform-tools:$PATH"
+

(It will be ready for the next time you start your shell). You can now type on the CLI of the shell:

+
adb devices
+
+

and it will return a list of connected devices such as:

+
List of devices attached
+AA:BB:A5:B5:AA:BB    device
+

Spezielle Anweisungen für Linux

+

If you're running Linux, the vendor ID to use for Firefox OS Geeksphone devices is 05c6, so your /etc/udev/rules.d/51-android.rules file should contain an entry similar to:

+
SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", MODE="0666", GROUP="plugdev"
+

Spezielle Anweisungen für Windows

+

You can download Windows drivers for the Geeksphone from the Geeksphone website.

+

Windows 8 by default will not let you install unsigned drivers. See this tutorial on "How to install an unsigned driver on Windows 8".

+

Since Windows XP Home Edition doesn't include tasklist.exe, Simulator won't detect the device. This can be solved downloading that file from ComputerHope website and putting it in Windows\System32 folder.

+

Einrichtung überprüfen

+

Once you've followed these instructions, attach the device to the desktop using a USB cable, open a command prompt and type "adb devices" (ensuring that adb is in your path). You should see your Firefox OS device listed in the output.

diff --git a/files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html b/files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html new file mode 100644 index 0000000000..6a269b17bc --- /dev/null +++ b/files/de/archive/b2g_os/developing_firefox_os/filing_bugs_against_firefox_os/index.html @@ -0,0 +1,183 @@ +--- +title: Firefox OS Fehler melden +slug: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +tags: + - Abbruch + - Bugs + - Bugzilla + - Fehler + - Firefox OS +translation_of: Archive/B2G_OS/Developing_Firefox_OS/Filing_bugs_against_Firefox_OS +--- +
+

Dieser Artikel enthält eine Anleitung zum Melden von Fehlern zum Firefox OS Projekt, zu Gaia und zu B2G (Boot to Gecko).

+
+ +

Bugzilla

+ +

Wie die meisten Mozilla-Projekte nutzen wir Bugzilla für die Fehler- und Problemverfolgung. Du kannst Fehler an Bugzilla melden, wenn Du Fehler entdeckt hast — wir haben eine eigene Bugzilla Kategorie (Product) für Firefox OS mit Unter-Kategorien (Components) für Gaia, Gonk und Gecko. Du solltest diese Kategorien verwenden, um Fehler und Probleme bezüglich Firefox OS, Gaia etc. zu melden.

+ +

Fehler melden

+ +

Zum effektiven Melden von Fehlern und Problemen kannst Du dieses Bugzilla Template verwenden. Hinweise zum Ausfüllen des Templates findest Du weiter unten.

+ +

Pflichtfelder und optionale Felder

+ +

Die folgenden Felder in Bugzilla sind immer auszufüllen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeldBeschreibung
ComponentKategorie, in die der Fehler gehört. Wenn der Fehler in keine der vorhandenen Kategorien passt kannst Du "General" verwenden.
SummaryZusammenfassung, die den Fehler kurz und treffend beschreibt.
DescriptionAussagefähige Beschreibung des Fehlers. Eine gute Fehlermeldung sollte die Schritte zum Reproduzieren (steps to reproduce, STR) des Fehlers, die erwarteten und die tatsächlichen Ergebnisse enthalten. Bitte gib auch an, wie oft dieser Fehler auftritt (z.B. wenn Du die Schritte öfter wiederholst).
Build InformationGehe zu Einstellungen > Geräteinformationen > Weitere Informationen und füge folgende Informationen in die Fehlermeldung ein: Betriebssystemversion, Plattform-Version, Build-ID, Updatekanal und die Informationen zum Commit auf Git. Falls Du einen Mac oder Linux Computer mit adb hast und dort git installiert ist, dann kannst Du dieses Skript ausführen und dessen Ergebnis in die Meldung kopieren.
ScreenshotsBitte füge Bildschirmfotos ein. Das kann uns helfen, den Fehler zu analysieren. Auf dem Flame Smartphone drückst Du dafür 2 Sekunden lang gleichzeitig den Ein-/Aus Schalter und die "Lautstärke runter/leiser" Taste bis auf dem Display eine Bestätigung des Bildschirmfotos angezeigt wird. Anschließend überträgst Du dieses Foto via USB auf Deinen Computer.
VideoFalls sich Dein Fehler auf ungewöhnliche Veränderungen des Displays bezieht die mit einem Bildschirmfoto nicht dargestellt werden können, dann mach bitte ein Video davon. Dieses Video kannst Du dann als Anhang zur Fehlermeldung hinzufügen. Du kannst das Video auch nach YouTube hochladen und die URL in die Fehlermeldung einfügen.
ADB logsFalls adb auf Deinem Computer installiert ist: Schließe bitte Dein Smartphone an den Computer an und führe das Kommando |adb logcat| aus. Bitte füge das Ergebnis dieses Kommandos in eine Text-Datei ein und füge diese als Anhang zur Fehlermeldung hinzu.
+ +

Die folgenden Felder sind optional:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeldBeschreibung
Depends/BlockZeige uns Abhängigkeiten zu anderen Fehlermeldungen.
KeywordsSchlüsselwörter für Bugzilla. Bestimmte Support-Abteilungen nutzen diese zur Statusverfolgung von Fehlern.
WhiteboardBeinhaltet Tags. Füge beliebige Tags zur Statusverfolgung hinzu. Du solltest keine vorhandenen Tags ohne Erlaubnis löschen.
See AlsoHin und wieder haben Fehler Bezug zu einem anderen Fehler. Das kannst Du hier angeben.
FlagsKennzeichen für die Statusverfolgung; das am häufigsten verwendete Kennzeichen in Firefox OS Fehlern ist blocking-b2g. Wenn eine Meldung als blocking-b2g gekennzeichnet ist, dann kann der Fehler die Veröffentlichung eines Releases gefährden und ist somit besonders zu beachten.
SecurityWenn ein Fehler die Sicherheit der persönlichen Daten gefährdet, monetäre Verluste oder ähnliches verursacht, dann solltest Du dieses Feld ankreuzen. Somit ist die Fehlermeldung nur noch für ausgewählte Mitarbeiter sichtbar.
+ +

Nähere Informationen zu den Bugzilla-Feldern findest Du auf Bugzilla Fields.

+ +

Lokalisierungs-Probleme melden

+ +

Wenn Du eine nicht übersetzte Zeichenkette siehst, dann kann das zwei Gründe haben:

+ + + +

Wie Lokalisierungs-Probleme (l12y) gemeldet werden

+ +
    +
  1. Lege eine Meldung in Bugzilla an, als "Product" wählst Du 'Firefox OS'. Wähle unter "Component" die Firefox OS Komponente, in der das Lokalisierungsproblem auftritt. Trage bitte 'l12y' als Schlüsselwort in das Feld "Keyword" ein.
    2. +
  2. Fülle alle anderen Pflichtfelder aus.
    3. +
+ +

Besondere Schlüsselwörter (Keywords)

+ +

Die folgende Tabelle enthält Informationen zu speziellen Schlüsselwörten, die Du in Firefox OX Fehlermeldungen häufiger finden wirst.

+ +


+ Du solltest immer die Kombination Build-Version/Betriebssystem/Plattform, unter der der Fehler behoben ist, ins Kommentarfeld der Fehlermeldung eintragen bevor Du den Status auf Verified setzt. Wenn der Fehler auf allen Plattformen gemeldet ist und Du die Behebung des Fehlers nur auf einer bestimmten Plattform verifizieren kannst, dann gebe dies bitte in der Fehlermeldung an. Bitte setze den Status der Meldung in einem solchen Fall nicht auf Verified. Es müssen erst alle Plattformen erfolgreich getestet worden sein, bevor der Status auf Verified gesetzt wird.
+
+ Zu guter Letzt: Falls andere Meldungen als Duplikat Deiner Meldung markiert wurden und Du Deine Meldung auf Verified setzt, dann prüfe diese Duplikate bitte ebenfalls und kommentiere diese Meldungen entsprechend. Oftmals markieren Entwickler eine Meldung als Duplikat obwohl der Fehler nur ähnlich, aber nicht identisch ist. Solche Fehlermeldungen können übersehen werden, wenn der Status ungeprüft auf Verified gesetzt wird.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KeywordBeschreibung
metaZeigt an, dass eine Meldung nur zur Statusverfolgung genutzt wird. Mozilla benutz dies, um die Stati mehrerer Meldungen einer komplexeren Entwicklung in einer einzigen Meldung zu verfolgen. Meldungen mit diesem Keyword sollten von Entwicklern nicht in die Patch-Planung einbezogen werden. Bitte denk daran, dass Projektleiter und Tester dieses Keyword für die Statusverfolgung nutzen.
qablockerDieses Keyword wird benutzt, wenn eine Meldung das Testen in der Qualitätssicherung blockiert (manueller oder automatisierter Test eine neuen Entwicklung) und der Fehler daher im nächsten Projekt-Meilenstein der Beta-Phase bzw. Release-Veröffentlichung behoben sein muss.
qawantedNutze dieses Keyword für Meldungen die mehr Informationen, mehr Testfälle oder weitere Informationen zur Reproduzierbarkeit benötigen oder als Duplikat gekennzeichnet sind, ohne dass Du die duplizierte Original-Meldung finden kannst. Der über dieses Keyword angeforderte Qualitätssicherungs-Prozess wird im sogenannten Whiteboard aufgezeichnet. Wenn die Qualitätssicherung ihre Arbeit erledigt hat, sollte dieses Keyword entfernt werden.
regressionDieses Keyword bedeutet, dass das Problem gelöst war und wieder aufgetreten ist (regressed). Um dieses Wiederauftreten des Problems zu verfolgen wird eine neue Meldung mit Keyword "regression" angelegt. Es wird ebenso für Fehler verwendet, die in früheren Releases behoben waren und im aktuellen Release wieder auftreten. Das Nachverfolgen dieser Probleme hilft uns fehleranfällige und instabile Bereiche zu identifizieren, die beim Testen besonders beachtet werden sollten.
regressionwindow-wantedKennzeichnet eine Meldung als "regression" Meldung bei der es sehr hilfreich wäre zu wissen, wann genau der Fehler aufgetreten ist (Zeitpunkt oder Zeitraum).
steps-wantedBei Meldungen mit diesem Keyword wäre es sehr hilfreich zu wissen, wie der Fehler reproduziert werden kann.
verifymeSo gekennzeichnete Probleme sollten von einem Dritten zusätzlich verifiziert werden, auch wenn der Fehler für den Melder und die Qualitätssicherung behoben zu sein scheint.  Die Meldung enthält dann spezielle Angaben zur Hardware und zur Konfiguration, für die die Lösung zusätzlich noch verifiziert werden soll. Du solltest versuchen, diesen Fehler zu reproduzieren. Wenn Du dann bestätigen kannst, dass der Fehler bei Dir ebenfalls behoben ist, dann kann der Status von Fixed auf Verified geändert werden.
+  
crashNutze dieses Keyword, wenn Du Abbrüche in Firefox OS bekommst.
+ +
+

Hinweis: Weitere Informationen erhälst Du auf der Seite Bug writing guidelines. Das Mozilla B2G QA Wiki enthält zudem nützliche Informationen zum Melden von Firefox OS Fehlern; die hilfreichsten Seiten sind Bugzilla Usage und Incoming bug triage for Firefox OS.

+
+ +
+

Hinweis: Nähere Informationen zum Umgang mit Fehlern in der Gaia-Entwicklung findes Du auf  Submitting a Gaia patch.

+
+ +

 

diff --git a/files/de/archive/b2g_os/developing_firefox_os/index.html b/files/de/archive/b2g_os/developing_firefox_os/index.html new file mode 100644 index 0000000000..29f0a9c290 --- /dev/null +++ b/files/de/archive/b2g_os/developing_firefox_os/index.html @@ -0,0 +1,26 @@ +--- +title: Hacking Firefox OS +slug: Archive/B2G_OS/Developing_Firefox_OS +translation_of: Archive/B2G_OS/Developing_Firefox_OS +--- +
+

This section provides some useful articles covering different ways in which the Firefox OS experience can be modified/customized during the build or app writing process.

+
+
+
+ Modifying the hosts file
+
+ A guide to what can be achieved by modifying the Firefox OS hosts file.
+
+ Customization with the .userconfig file
+
+ How to customize the build and execution of Firefox OS by changing the .userconfig file.
+
+ Localizing Firefox OS
+
+ A guide to localising the Firefox OS platform, making it available in your preferred languages.
+
+ Customizing the keyboard in Firefox OS apps
+
+ This guide shows how to customize the keyboard in your Firefox OS apps.
+
diff --git a/files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html b/files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html new file mode 100644 index 0000000000..0c2f90d39c --- /dev/null +++ b/files/de/archive/b2g_os/firefox_os_build_prerequisites/index.html @@ -0,0 +1,446 @@ +--- +title: Firefox OS build prerequisites +slug: Archive/B2G_OS/Firefox_OS_build_prerequisites +translation_of: Archive/B2G_OS/B2G_OS_build_prerequisites +--- +

Vor dem Holen des Codes zum Bauen von Firefox OS benötigt man ein geeignet konfiguriertes Build-System. Im folgenden wird dieser Vorgang beschrieben. Zur Zeit eignen sich 64-bit-Linux-Distributionen und Mac OS X.

+
+

Anmerkung: Wenn man Firefox OS auf ein Telefon installieren will, beginnt man, ohne das Telefon an den Computer angeschlossen zu haben. Im Text wird dann später erklärt, wann man das Telefon anschließen muß.

+
+

Kompatibles Gerät oder Emulator besorgen

+

Das System kann nur für ein kompatibles Gerät (i.a. ein Smartphone) oder einen Emulator gebaut werden. Obwohl wir diverse Geräte unterstützen, gibt es für einige von diesen unterschiedliche Ausführungen. Von diesen Ausführungen unterstützen wir zur Zeit nur bestimmte, und außerdem werden einige Geräte besser unterstützt als andere.

+
+

Anmerkung: Mozillas B2G-Quellcode ist die Referenzimplementation von B2G, aber Telefonherstellern ist es freigestellt, Fehlerkorrekturen ("Patches") hinzuzufügen oder andere Änderungen vorzunehmen. Wenn man zum Beispiel ein Alcatel One Touch kauft, läuft darauf eine herstellerspezifische Version. Das ist für die installierten Apps irrelevant, aber unter Umständen kann es auf  Plattform-Ebene Unterschiede geben. Die Version für das  Nexus-4 ("Nexus 4 Port") wird direkt von Mozilla gepflegt, also ist es viel wahrscheinlicher, dass dieses Telefon mit unserer Gecko-Version auf Anhieb funktioniert, als zum Beispiel bei Rang-3-Geräten.

+
+

Rang 1 (Tier 1)

+

Tier-1-Geräte werden bei der Entwicklung bevorzugt und sind typischerweise die ersten, die Fehlerkorrekturen ("bugfixes") und Erweiterungen ("feature updates") erhalten.

+
+
+ Keon
+
+ Keon ist ein Gerät der FIrma Geeksphone und eines der ersten Entwicklertelefone. Beachte, dass Binärpakete ("builds") für diese Geräte von Geeksphone bereitgestellt werden.
+
+ Inari
+
+ Inari ist ein weiteres Testgerät. Benutze diese Konfiguration, um FirefoxOS für die ZTE-Open-Geräte zu bauen. Warnung: Neuere Firefox-OS-Builds könnten auf ZTE Open Probleme beim Booten von der Standard-Boot-Partition machen.
+
+ Flame
+
+ Flame is Mozillas neues Standard-Referenztelefon für Firefox OS. Die Konfiguration für Flame sollte auch verwendet werden, wenn man für das Gerät ZTE Open C baut, weil beide Geräte auf der Android-Jellybean-Basis aufbauen.
+
+  
+
+ Emulatoren (ARM und x86)
+
+ Zur Zeit gibt es zwei Emulatoren, einen für die Emulation eines ARM-Prozessors und einen für die Emulation eines x86-Prozessors. Hier erfährt man mehr über die Installation und die Verwendung der Emulatoren.
+
+ Achtung: Der x86-Emulator ist derzeit nicht praxistauglich, sowohl was die Installation angeht als auch die Unterstützung.
+
+  
+
+ Desktop
+
+ Man kann auch eine Version von Firefox OS für Desktop-Rechner bauen; diese führt Gecko in einer XULRunner-Anwendung aus und darin Benutzerumgebung Gaia.
+
+ Flatfish
+
+ Flatfish ist das erste für Firefox OS entwickelte Tablet, auf dem jedoch einige Telefoniefunktionen fehlen. Es werden ein paar spezielle Einstellungen benötigt, um den Code zu bauen.
+
+

Natürlich kann man den Desktop-Client und die Emulatoren auch bauen, ohne ein Telefon zu benutzen.

+

Rang 2 (Tier 2)

+

Bei den Tier-2-Geräten ist die Grundfunktionalität gegeben, und viele Entwickler, insbesondere App-Entwickler, arbeiten damit, daher sind es üblicherweise die nächsten Geräte (nach Tier-1), für die Änderungen bereitgestellt werden.

+
+
+ Samsung Nexus S
+
+ Die einzigen Varianten dieses Smartphones, von denen bekannt ist, daß sie mit Firefox OS funktionieren, sind GT-I9020A (mit Amoled-Bildschirm) and GT-I9023 (Billigmodell mit LCD). Möglicherweise funktionieren aber auch weitere.
+
+ Samsung Nexus S 4G
+
+ The SPH-D720 is supported as a tier 2 device.
+
+

Rang 3 (Tier 3)

+

Man kann Firefox OS für diese Geräte bauen, aber die Hauptentwickler verwenden sie nicht regelmäßig. Bezüglich Stabilität, Zuverlässigkeit und Funktionsvielfalt stehen sie daher den Tier-1- und Tier-2- Geräten möglicherweise nach.

+
+
+ Samsung Galaxy S2
+
+ Nur die Variante i9100 funktioniert, keine andere, zumindest nicht offiziell (i9100P könnte auch funktionieren, da sie sie sich nur durch einen zusätzlichen NFC-Baustein unterscheidet.)
+
+ Samsung Galaxy Nexus
+
+ Zur Zeit ist keine Variante bekannt, die nicht funktioniert.
+
+ Nexus 4
+
+ Einige Anwender haben laut IRC dieses Gerät mit Erfolg getestet. Möglicherweise muß man für den Fall, daß man Android 4.4 installiert hat, vorher auf 4.3 zurückgehen (Android- Betriebssystem-Images sind bei Google erhältlich)
+
+ Nexus 5
+
+ Einige Anwender haben laut IRC dieses Gerät mit Erfolg getestet.
+
+ Tara
+
+ Tara ist ebenfalls ein Testgerät. Das "Manifest" für Tara existiert nur im "master branch". Um den Tara-Code zu erhalten, ruft man folgendes Script auf: "BRANCH=master ./config.sh tara".
+
+ Unagi
+
+ Unagi ist ein Telefon, das als Test- und Entwicklungsplattform für einfache bis Mittelklasse- Smartphones verwendet wird. Viele Core-Firefox-OS-Entwickler arbeiten auf Unagi.
+
+ Pandaboard
+
+ Das Pandaboard ist eine Entwicklungsplatine ("Board"), die auf der OMAP-4-Architektur basiert, und wird verwendet, um auf mobilen Plattformen zu entwickeln.
+
+
+ Wichtig: Nur solche Geräte werden unterstützt, auf denen mindestens Android 4 (alias Ice Cream Sandwich) lauffähig ist. Für den Fall, daß ein Gerät oben aufgeführt ist, aber ein älteres Android-System installiert ist, muß man erst eine neuere Android-Version installieren.
+
+

Bemerkung: Tier-2 und Tier-3-Geräte haben einen virtuellen, d.h durch Software dargestellten, Home-Button anstelle eines physikalischen.

+

Alle Tier-1-Geräte haben  dagegen einen physikalischen "Home"-Button, mit dem man bei Betätigen stets auf den Startbildschirm zurückkehrt. Die meisten Android-Geräte für Version 4 oder später haben einen auf dem Bildschirm dargestellten "Home"-Button. Auch Firefox OS kann solch eine Schaltfläche darstellen; sie wird automatisch bei entsprechenden Geräten aktiviert. Wenn dies versagen sollte, muß man die Einstellungen öffnen und zu den Geräteinformationen navigieren, dort dann "Weitere Informationen" öffnen und "Entwicklermenü" einschalten (falls noch nicht geschehen). Dann wieder zurück zu den Einstellungen navigieren und das Entwickler-Menü öffnen, dort "Software-Startschaltfläche" einschalten.

+
+

Anforderungen für Linux

+

Um auf Linux bauen zu können, benötigt man:

+ +

Das ist zwar etwas mehr, als tatsächlich benötigt wird, aber mitunter kommt es vor, daß der Erstellungsprozeß gerade deswegen fehlschlägt, weil ein wenig Speicher fehlt.

+

Außerdem werden folgende Dienstprogramme benötigt und müssen ggf. nachinstalliert werden:

+ +

Installation im Falle eines 64-Bit-Linux

+

Im folgenden werden die Kommandos aufgeführt, mit denen man die notwendigen Programmpakete für das Bauen von Firefox OS installieren kann.

+

Ubuntu 12.04 / Linux Mint 13 / Debian 6

+

Diese Kommandos in einem Terminal-Fenster ausführen:

+
sudo apt-get update
+sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

Für den Fall, daß Firefox OS für das Referenzgerät "Flame" oder Nexus 5 gebaut wird, diese Kommandos auführen:

+

sudo apt-get install libxml2-utils

+

Ein Java-Entwicklungspaket ("JDK") kann von dieser Paketquelle (ppa)  installiert werden.

+

Bitte auch die obigen Anmerkungen berücksichtigen, die die Probleme beschreiben, die auftreten, wenn man für einen Emulator baut!

+

Ubuntu 12.10 / Debian 7

+

Das folgende Kommando im Terminal-Fenster ausführen:

+
$ sudo apt-get install autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev libgl1-mesa-dev libx11-dev make zip
+

Zusätzlich zu den oben erwähnte Schwierigkeiten beim Bauen für einen Emlator tritt hier noch das Problem auf, daß standardmäßig der Compiler in der Version gcc-4.7 verwendet wird, welcher den Compiliervorgang mit folgender Fehlermeldung abbricht:

+

"KeyedVector.h:193:31: error: indexOfKey was not declared in this scope, and no declarations were found by argument-dependent lookup at the point of instantiation"

+

Um diesen Fehler zu beheben, muß man auf die ältere Version gcc-4.6 als Standard-Compiler zurückgehen, und zwar am besten unmittelbar, nachdem man die Quellen für B2G heruntergeladen hat. Der Vorgang wird in der Anleitung "Changing the default host compiler" (engl.) beschrieben.

+

Bei einer unveränderten Ubuntu-12.10-Version gibt es eine Fehlermeldung wegen nicht erfüllter Abhängigkeiten der Systembibliotheken "ia32-libs". Dies wird mit diesen Befehlen behoben:

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+sudo apt-get install ia32-libs
+

Ubuntu 13.04

+

Die folgenden Kommandos sind im Terminal-Fenster auszuführen:

+
$ sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git ia32-libs lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip
+

Auch hier muß von gcc-4.7 auf gcc-4.6 zurückgegangen werden, wie oben für Ubuntu 12.10 beschrieben.

+

Ubuntu 13.10

+

With Ubuntu 13.10, multi-arch packages are now the main way to support multiple architectures (e.g. 32-bit on a 64-bit install).  You must tell your Ubuntu system that you want to support 32-bit packages as well:
+  

+
sudo dpkg --add-architecture i386
+sudo apt-get update
+

Once you've completed that, then you can install the necessary packages:

+
sudo apt-get install --no-install-recommends autoconf2.13 bison bzip2 ccache curl flex gawk gcc g++ g++-multilib gcc-4.6 g++-4.6 g++-4.6-multilib git lib32ncurses5-dev lib32z1-dev zlib1g:amd64 zlib1g-dev:amd64 zlib1g:i386 zlib1g-dev:i386 libgl1-mesa-dev libx11-dev make zip libxml2-utils
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.6 1
+
+sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 2
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.6 1
+
+sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 2
+
+sudo update-alternatives --set gcc "/usr/bin/gcc-4.6"
+
+sudo update-alternatives --set g++ "/usr/bin/g++-4.6"
+

you can install the jdk via this ppa.

+

Ubuntu 14.04

+

Follow the instructions given for Ubuntu 13.10.

+

Fedora 19/20

+

Run the following command in Terminal:

+
sudo yum install autoconf213 bison bzip2 ccache curl flex gawk gcc-c++ git glibc-devel glibc-static libstdc++-static libX11-devel make mesa-libGL-devel ncurses-devel patch zlib-devel ncurses-devel.i686 readline-devel.i686 zlib-devel.i686 libX11-devel.i686 mesa-libGL-devel.i686 glibc-devel.i686 libstdc++.i686 libXrandr.i686 zip perl-Digest-SHA wget
+

The project should build correctly using the default compiler shipped with Fedora but if you encounter compilation errors you might need to install GCC 4.6.x:

+ +

Download the tarball then install it to /opt, with the following command on Fedora 19/20:

+
curl -O http://people.mozilla.org/~gsvelto/gcc-4.6.4-fc19.tar.xz
+sudo tar -x -a -C /opt -f gcc-4.6.4-fc19.tar.xz
+

To use GCC 4.6.x as the default host compiler you will have to set it explicitly after having retrieved the B2G sources: read Changing the default host compiler to find out how to do it.

+

Arch Linux

+

Run the following command in Terminal:

+
sudo pacman -S --needed alsa-lib autoconf2.13 bison ccache curl firefox flex gcc-multilib git gperf libnotify libxt libx11 mesa multilib-devel wget wireless_tools yasm zip lib32-mesa lib32-mesa-libgl lib32-ncurses lib32-readline lib32-zlib
+

To install the lib32-* packages you need to have the multilib repository enabled.

+

B2G can only be compiled with gcc4.6.4, and because Arch Linux always has bleeding edge software you will need to install gcc46-multilib from AUR. Note that you will have to edit the PKGBUILD and add staticlibs to the options array, or gcc will be unable to compile B2G and give you a cannot find -lgcc error when compiling. You will also need to add the following to your .userconfig file:

+
export CC=gcc-4.6.4
+export CXX=g++-4.6.4
+

By default, Arch Linux uses Python3. You'll have to force it to use the old python2. You can do that by linking the python2 executable to python but this is discouraged and considered error-prone. This will also break python 3 if it is installed on your system. A better way is to use virtualenv/virtualenvwrapper:

+
sudo pacman -S python-virtualenvwrapper
+source /usr/bin/virtualenvwrapper.sh
+mkvirtualenv -p `which python2` firefoxos
+workon firefoxos
+

Android will complain that you need make 3.81 or make 3.82 instead of 4.0. You can download make 3.81 from AUR.  This will install the make-3.81 binary on your path, you need to create a symlink named make to a location earlier in the PATH variable for the build to use the correct version.

+
mkdir -p ~/bin
+ln -s `which make-3.81` ~/bin/make
+export PATH=~/bin:$PATH
+

Android also needs the Java6 SDK and Arch only has Java7.  Unfortunately the aur build is broken, but you can still download the Java 6 SDK and install it manually.  You will then need to put it in your path.

+
cp ~/Downloads/jdk-6u45-linux-x64.bin /opt
+su
+cd /opt
+chmod +x jdk-6u45-linux-x64.bin
+./jdk-6u45-linux-x64.bin
+exit
+ln -s /opt/jdk1.6.0_45/bin/java ~/bin/java
+

Gentoo Linux

+
Installing ccache
+

You will need to install ccache, a tool for caching partial builds.

+
# emerge -av ccache
+

Because ccache is known to frequently cause support issues, Gentoo encourages you to use it explicitly and sparingly.

+

To enable the required use of ccache, on the subsequent step of this guide where the ./build.sh script is called, Gentoo users should instead run the command with an explicitly extended path, ie.

+
PATH=/usr/lib64/ccache/bin:$PATH ./build.sh
+
Generating Partition Images
+

If you are building B2G for actual physical hardware, then you may at some point also wish to generate some partition images for upload to your device. (For example, to restore backed up files to the device via the fastboot utility)

+

The filesystem image format used in this case is YAFFS2 (Yet Another Filesystem 2). Gentoo has support for the very latest (ie. git HEAD) yaffs2-utils userland package in portage. (Note: You will also need kernel patches if you want to mount YAFFS2 images, but this is not really required since you can deconstruct and rebuild them instead.)

+
# emerge --autounmask-write yaffs2-utils; etc-update; emerge -av yaffs2-utils
+

In order to generate such an image, simply change to the parent directory of the partition filesystem tree you wish to package, and issue a command like this:

+
mkyaffs2image system/ system.img
+

 

+

Anforderungen für Mac OS X

+

Um Firefox OS unter Mac OS X zu bauen, benötigt man etwas Vorarbeit, die unten detailiert beschrieben ist.  Außerdem werden typische Irrtümer und Fehler und ihre Lösungen erläutert.

+
+

Anmerkung: Das Bauen (und Konfigurieren der Quellen) von B2G für das Gerät Keon funktioniert nicht auf einem Mac OS-Rechner. Stattdessen muß man unter Linux bauen, ggf. auf demselben Rechner, auf dem auch Mac OS läuft.

+
+

Passende XCode-Versionen für Mac OS 10.9

+

XCode 4.2 oder älter sind nicht kompatibel mit OS X 10.9 ("Mavericks") und fallen daher ganz aus. Ansonsten gilt, daß man den ICS-Emulator nicht mit OS X 10.9 oder neuer bauen kann, und für das Gerät "flatfish" scheitert das Bauen mit allen Entwicklungsumgebungen der Versionen XCode 5.x.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Version compatibility of OS X 10.9.x
 emulator (ICS)flatfish/vixen (JB-4.2)emulator-jb (JB-4.3)emulator-kk (KitKat-4.4)
XCode 4.3.3XXXX
XCode 4.4.1XO[1]OO
XCode 4.5.2XO[1]OO
XCode 4.6.3XO[1]OO
XCode 5.0.2XXOO
XCode 5.1.1XXOO
XCode 6.0.1XXXX
XCode 6.1beta2XXXX
+
    +
  1. You must have environment variable BUILD_MAC_SDK_EXPERIMENTAL=1 exported to build flatfish/vixen.
    2. +
+

Install XCode Command Line Utilities

+

You need to install Xcode's Command Line Utilities. You can download just the Command Line Utilities from Apple's developer downloads page for your particular version of OS X, however if you would like the entire Xcode suite of applications, you can install Xcode through the Mac App Store. 

+

Xcode 4.3.1 (OS X 10.7 "Lion") and other newer versions such as 4.4.1+ (that is, Mac OS X10.8 "Mountain Lion"), won't necessarily include the required Command Line Utilities. When you install Xcode, make sure to go into Preferences, then the Downloads panel, and install the Command Line Utilities. In addition, make sure you have at least 20 GB of free disk space.

+

Screenshot of Xcode Downloads Command Line Tools

+
+ Note: The Firefox OS emulator requires a Core 2 Duo processor or later; that is, a system that is compatible with Mac OS X 10.7 "Lion." You do not actually have to be running Lion, you just have to be compatible with it. You can, however, build any Firefox OS build on many older Macs.
+

Run Firefox OS Mac Bootstrap

+

Next, open a terminal and run the following command:

+
curl -fsSL https://raw.github.com/mozilla-b2g/B2G/master/scripts/bootstrap-mac.sh | bash
+

This will pull and run a bootstrap script that makes sure you have all the prerequisites met to build the emulator. It will also prompt you for permission to install anything you're missing, and provide warnings and suggested fixes to problems. The script will check for and install the following items:

+ +

Xcode wrangling

+

If you have already upgraded to Xcode 4.4+ and get the message that Xcode is outdated, check the Xcode path with:

+
xcode-select -print-path
+

If it still points to /Developer you can update the path with:

+
sudo xcode-select -switch /Applications/Xcode.app
+

Making the Mac OS X 10.6 SDK available

+

You also need to have the Mac OS X 10.6 SDK available. The SDK needs to be available at

+
/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+

If it cannot be found there you will need to extract and copy it from Xcode 4.3. To do this:

+
    +
  1. Download the XCode 4.3 .dmg file from the Apple Developer portal (you'll need an Apple Developer account).
    2. +
  2. Download the utility Pacifist and use it to extract the 10.6 SDK from the XCode 4.3 .dmg file. Click on the "Extract Package" button, find the SDK by searching for 10.6 in the search box, then Ctrl + click on the MacOSX10.6.sdk directory and Extract it to a suitable location.
    3. +
  3. Add a symlink from the 10.6 SDK location to the /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/ directory. For example, if you put the 10.6 SDK on your desktop, the comment would be
    4. +
+
ln -s /Users/<yourusername>/Desktop/MacOSX10.6.sdk /Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/
+
+

Note: We can drop the 10.6 SDK requirement after bug 784227 has been fixed, and our version of platform_build has been updated.

+
+

Be aware of Mac file system case sensitivity

+

By default, Mac OS X ships with a case-insensitive file system.  This is problematic because the Linux kernel has a number of files with the same name, but different case.  For example, see the header files xt_CONNMARK.h and xt_connmark.h.  This results in a number of files appearing to be modified in /kernel after a fresh ./config.sh.

+

In many cases you can run the build just fine; for some platforms, however, you may encounter the following error:

+
ERROR: You have uncommited changes in kernel
+You may force overwriting these changes
+with |source build/envsetup.sh force|
+
+ERROR: Patching of kernel/ failed.
+

Please see bug 867259 for more discussion and possible fixes for this problem.

+

Alternatively, it will always be safest to build on a case sensitive file system.  The easiest way to do this is to create a separate, mountable disk image with case-sensitivity enabled.  You can do this using Apple's Disk Utility application or from the command line:

+
hdiutil create -volname 'firefoxos' -type SPARSE -fs 'Case-sensitive Journaled HFS+' -size 40g ~/firefoxos.sparseimage
+

Mount the drive with:

+
open ~/firefoxos.sparseimage
+

Change into the mounted drive with:

+
cd /Volumes/firefoxos/
+

You can then check out the code and compile from this location without worrying about case-sensitivity problems.

+

Mountain Lion homebrew gotcha

+
+
+ If you are on Mountain Lion and you receive an error during the installation of the dependencies via homebrew, such as:
+
+
+ 
clang: error: unable to execute command: Segmentation fault: 11
+ ... try reinstalling the dependency manually adding the --use-gcc flag, for example: + 
brew install mpfr --use-gcc
+
+

Follow Samsung Galaxy S2 extra steps

+

If you plan to build for the Samsung Galaxy S2, you will also need to install heimdall. See {{ anch("Installing heimdall") }} for details. This is not done for you by the bootstrap script!

+
+ Note: If you have installed the Samsung Kies tool, which is used to manage the contents of many Samsung phones, you will have to remove it before you can flash Firefox OS onto your device. You can use the standard application removal process on Windows; on Mac, the Kies install disk image has a utility to fully remove Kies from your system. Flashing will not work if you have Kies installed. If you forget to remove Kies, the build system will detect it and remind you to uninstall it. Note also that the uninstall tool does not correctly remove the folder ~/Library/Application Support/.FUS, and leaves a reference to a utility there in your user startup items list. You will want to remove these manually.
+

Fix libmpc dependency if broken

+

gcc 4.6 was built with libmpc 0.9; if you then use homebrew to update packages, libmpc gets updated to version 1.0, but homebrew doesn't rebuild gcc 4.6 after the library version changes. So you need to create a symlink to make things work again, like this:

+
cd /usr/local/lib/
+ln -s libmpc.3.dylib libmpc.2.dylib
+

Optional: Install HAX

+

Intel provides a special driver that lets the B2G emulator run its code natively on your Mac instead of being emulated, when you're using the x86 emulator. If you wish to use this, you can download and install it. It's not required, but it can improve emulation performance and stability.  

+

Before you install HAX you will need to install the Android SDK.

+

Install adb

+

The build process needs to pull binary blobs from the Android installation on the phone before building B2G (unless you're building the emulator, of course).  For this, you will need adb, the Android Debug Bridge.

+

You can download and install adb as part of the Android SDK package, for Mac, Linux or Windows - visit the Get the Android SDK page.

+

Newer Linux distributions have adb already in their repositories. For Ubuntu 12.10 and later, run the following command:

+
sudo apt-get install android-tools-adb
+

Or for Fedora 18/19:

+
sudo yum install android-tools
+

If your distribution does not have packages for adb available (i.e. Ubuntu 12.04 or Fedora 17), you'll need to install the Android SDK starter package for your platform (you'll want the ADT Bundle, not the SDK Tools Only option). Then run their package manager, $SDK_HOME/tools/android, and use the GUI to install "Android SDK Platform-tools".

+

Find out where adb is installed (usually in usr/bin, possibly additionally inside adt/platform-tools, depending on how you installed it). Be sure to add this directory to your PATH. This can be done by adding the line

+
PATH=$SDK_HOME:$PATH
+

replacing $SDK_HOME with the location of the android sdk, to your ~/.bashrc or equivalent.

+

Install heimdall

+

Heimdall is a utility for flashing the Samsung Galaxy S2. It's used by the Boot to Gecko flash utility to replace the contents of the phone with Firefox OS, as well as to flash updated versions of B2G and Gaia onto the device. You'll need it if you want to install Firefox OS on a Galaxy S2; it is not needed for any other device. For other devices, we build and use the fastboot utility instead.

+
+ Note: Again, it's important to note that this is only required for installing Firefox OS on the Samsung Galaxy S2.
+

There are two ways to install heimdall:

+ +

Configure ccache

+

The B2G build process uses ccache. The default cache size for ccache is 1GB, but the B2G build easily saturates this; around 3GB is recommended. You can configure your cache by running the following command inside terminal:

+
$ ccache --max-size 3GB
+

For Linux: configure the udev rule for your phone

+
+

Note: This section is specific to Linux; Mac OSX has the necessary device permissions set up already.

+
+

Next, you need to confingure the udev rule for your phone,

+

You can get the USB vendor ID by running lsusb with your phone plugged in, but typically it's Google 18d1, Samsung 04e8, ZTE 19d2, Geeksphone/Qualcomm 05c6. Add this line in your /etc/udev/rules.d/android.rules file (replacing XXXX with the ID for your device):

+
SUBSYSTEM=="usb", ATTR{idVendor}=="XXXX", MODE="0666", GROUP="plugdev"
+

Take ZTE for example, the content in android.rules will be

+
SUBSYSTEM=="usb", ATTR{idVendor}=="19d2", MODE="0666", GROUP="plugdev"
+
+

If the file doesn't exist, create it. The rules.d directory is usually read only by default, so you may have to use chmod to make the directory writeable, or the file, or both.

+
+

Once you've saved the file, and closed it,  make the file readable:

+
$ sudo chmod a+r /etc/udev/rules.d/android.rules
+
+

Now that the udev rules have been updated, restart the udev daemon. For ubuntu:

+
sudo service udev restart
+

Finally, unplug and the USB cable but don't replug it in because we need to enable remote debugging on the phone first.

+

Enable remote debugging

+

Before you plug your phone back into your USB port, put it USB developer mode. This allows you to debug and flash the phone. To enable developer mode, on your phone select Settings app -> Device information -> More Information -> Developer -> Remote debugging (this was called Developer mode on older versions.) Once the option is checked, remote debugging is enabled, and you are ready to go.

+

At this point, connect your phone to your computer via a USB cable (if you created the udev rule before, this will trigger udev to detect the phone and create the device node with the right permissions). Now you can check if you can list your device via the adb devices command. If everything has worked ok, you should see an output similar to this (the following is for a Geeksphone Keon):

+
$ adb devices
+List of devices attached
+full_keon       device
+

If the device did not list as expect, check the file name and the script are all correct (see previous section), then restart the computer and retype the command again. Note also that if your device uses fastboot, the bootloader may identify itself with a different vendor ID than the one you see when the device boots normally.

+

Backup the phone system partition

+
+

Note: You have to do this before you build your device if you do not have existing system backup. Because some libraries will be referenced in build time. These library might be proprietary so we can't provide in our code base.

+
+

It is recommended to back up the entire Android system partition on your phone.

+

You can use this copy of the binary blobs for Android in case you later delete your B2G tree. To do this, run:

+
adb pull /system <backup target dir>/system
+
+

 Depending on the phone, you may also need to pull the /data and/or /vendor directories:

+
adb pull /data <backup target dir>/data
+adb pull /vendor <backup target dir>/vendor
+
+

If the pull commands fail with "insufficient permission" message, try the following:

+ +

On to the next step

+
At this point, you should be ready to fetch the Firefox OS code!
diff --git a/files/de/archive/b2g_os/firefox_os_faq/index.html b/files/de/archive/b2g_os/firefox_os_faq/index.html new file mode 100644 index 0000000000..0cc309dbfe --- /dev/null +++ b/files/de/archive/b2g_os/firefox_os_faq/index.html @@ -0,0 +1,41 @@ +--- +title: Firefox OS FAQ DE +slug: Archive/B2G_OS/Firefox_OS_FAQ +translation_of: Archive/B2G_OS/Introduction +--- +
+
+ Wie bekomme ich ein Developer Preview Telefon?
+
+ Weitere Informationen werden bald auf der Geeksphone Website zur Verfügung stehen.
+
+ Wenn ich kein Entwickler-Telefon kaufen möchte, kann ich trotzdem eine App für Firefox OS entwickeln?
+
+ Selbstverständlich! Sie können die App über Android testen, oder auf dem Computer mit dem (using Marketplace for Firefox)  Firefox OS simulator.
+
+ Wann wird das "fertige" Telefon verfügbar sein?
+
+ Wir werden mit mehreren Partnern gemeinsam das Telefon auf den Markt bringen, jedoch besprechen wir uns diesbezüglich zu einem späteren Zeitpunkt nochmal.
+
+ Wo kann ich mir Firefox OS auf mein Handy laden?
+
+ https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Building_and_installing_Firefox_OS
+
+ Wie kann ich meine Firefox OS App testen?
+
+ Auf Android oder über unseren OS Simulator.
+
+ Was ist Firefox OS?
+
+ Es ist ein neues Handy-Betriebssystem, dass komplett auf offenen  Web-Standards basieren wird. Es ermöglicht für jede Geräte-Funktion (Telefonie, Messaging, Browsen usw.) eine eigenenständige auf dem HTML5-Standard basierende Applikation zu entwickeln, die grundsätzlich (theoretisch) auf jedem anderen Gerät (nur verfügbar in systemeigene Anwendungen) funktionieren würde.
+
+ Wie ist die Liste der vollständigen Web APIs; Werden diese standardisiert werden?
+
+ Eine große Anzahl von WebAPIs wird in die erste Implementierung des Firefox-OS aufgenommen werden. Eine vollständige Liste finden Sie auf
+
+ https://wiki.mozilla.orghttps://wiki.mozilla.org/WebAPI#APIs.
+
+ Sind die Web-APIs für den plattformübergreifenden Einsatz standardisiert?
+
+ Ja, die APIs sind das Ergebnis von Arbeiten mit mehreren Partnern, die bereits auch für andere Plattformen entwickelt haben. Das Umsetzen stellt in Bezug auf die unterschiedlichen Hardware-Anforderungen der Benutzer ein Problem dar, das nicht nur Mozilla beschäftigt. Unsere Anwendungen sind ein guter Anhalts&Ausgangspunkt für weitere zukünftige Plattformen und Entwicklungen.
+
diff --git a/files/de/archive/b2g_os/gaia/gaia_apps/index.html b/files/de/archive/b2g_os/gaia/gaia_apps/index.html new file mode 100644 index 0000000000..e4f64963a0 --- /dev/null +++ b/files/de/archive/b2g_os/gaia/gaia_apps/index.html @@ -0,0 +1,86 @@ +--- +title: Gaia apps +slug: Archive/B2G_OS/Gaia/Gaia_apps +translation_of: Archive/B2G_OS/Platform/Gaia/Gaia_apps +--- +
+

Gaia is the front-end of Firefox OS, which contains system administration functionality and the built-in suite of apps shipped with Firefox OS devices. All the Gaia source code — even the system, and keyboard IMEs — is fully implemented with HTML5 (HTML + CSS + JavaScript) & Open WebAPIs. This set of documents contains information on how each of the default apps available in the Gaia family works.

+
+ +

Gaia functionality categories

+ +

The different apps inside Gaia can be roughly categorized into the groups listed below.

+ +
+

Note: Many of the pages linked to for more explanation of how the individual apps work are README pages inside the Gaia Github repo. This is because many of the apps are on rapid development cycles and therefore subject to rapid (often daily) change, so it would make little sense to try to keep MDN pages updated with these changes. The engineer-maintained README pages are currently the most accurate source of information.

+
+ +

Platform

+ +

Including the System, Settings, Lockscreen, build scripts, and Bluetooth apps.

+ +

+ +

Platform apps: further explanation

+ +
+
System
+
The System app is the first web app loaded by Gecko during the Firefox OS bootup procedure, and it handles numerous responsibilities that are required generally for the running of the system, and are therefore not scoped per individual web app.
+
Browser
+
The Browser app (which is now part of System) provides browser-like functionality where it is needed — including page navigation, search and bookmarks.
+
Window Management
+
Firefox OS's window management functionality — including app life cycle and interaction, notifications, animations and much more — is handled by a specific part of the System app. This article looks at Firefox OS Window Management in detail.
+
Settings
+
The Settings app allows Firefox OS users to configure device settings, and responds to incoming activities (Web activities with a name of configure), which allows other apps to jump to different panels inside the Settings app to handle configuration as required (for example showing the wifi settings panel if no data connection is available.)
+
+ +

Communication

+ +

Including the Dialer, Contact, SMS apps and FTU apps.

+ +

+ +

Communication apps: further explanation

+ +

TBD

+ +

Productivity

+ +

Including the Email, Calendar, and Clock apps.

+ +

+ +

Productivity apps: further explanation

+ +
+
Calendar
+
The Firefox OS built-in calendar app.
+
Clock
+
Firefox OS's default Clock app, which includes alarm, timer and stopwatch functionality.
+
Email
+
The Gaia e-mail app.
+
+ +

Media

+ +

Including the Camera, Gallery, Music, and Video apps, and some media related functions such as forward lock DRM and wallpapers.

+ +

+ +

Media apps: further explanation

+ +
+
Video
+
Video is a simple video player app that will play videos present on your Firefox OS device's storage media.
+
Camera
+
Camera allows Firefox OS users to capture and manage videos and photos from the device camera(s), and responding the Web activities of type pick from other apps that want to grab media using Camera's functionality.
+
+ +

Other Gaia features

+ +

Besides these functions, there are several other major features such as browser, homescreen, marketplace, test framework, PDF viewer, and app manager, which are developed closely alongside Gaia.

+ +
+
pdf.js
+
pdf.js is an HTML5-based PDF viewer, used inside Gaia for viewing PDFs. Note that the codebase for pdf.js is maintained in a separate repo, outside Gaia.
+
diff --git a/files/de/archive/b2g_os/gaia/hacking/index.html b/files/de/archive/b2g_os/gaia/hacking/index.html new file mode 100644 index 0000000000..64b9be9f79 --- /dev/null +++ b/files/de/archive/b2g_os/gaia/hacking/index.html @@ -0,0 +1,181 @@ +--- +title: Hacking Gaia +slug: Archive/B2G_OS/Gaia/Hacking +translation_of: Firefox_OS/Developing_Gaia +--- +

Gaia ist die Sammlung von Webapps, die das Front-End des Firefox OS (Codename Boot to Gecko) bilden.

+

Alles was Sie auf dem Bildschirm von Firefox OS sehen, inklusive dem Homescreen, wurde nur mit Hilfe von freien Web-Technologien erstellt, 

+

 

+

Quellcode besorgen

+

To get the source code for Gaia, fork us on GitHub and then clone your fork using git.

+
$ git clone https://github.com/username/gaia.git
+

Gaia starten

+

Sie können Gaia entweder auf Ihrem Desktop nutzen oder mit einem kompatiblem mobilen Gerät.

+

 

+

B2G Desktop

+

B2G Desktop is a desktop build of the app runtime used on Firefox OS devices which you can use to run Gaia on your desktop computer.

+

You can download a nightly build of B2G Desktop from here. Currently we recommend installing the latest beta build for your platform. There are builds for Linux (32 bit and 64 bit), OS X and Windows.

+

Nightly builds come packaged with a recent version of gaia. Once you've downloaded the archive, all your need to do is extract it to a folder and run the b2g binary from the extracted folder.

+

Note: 64 bit Linux builds do not currently work on some distributions, this is bug 812484. If you have problems try a 32-bit build instead.

+
$ cd b2g
+$ ./b2g
+

To run B2G with your own version of Gaia for development purposes you first need build a profile from your clone:

+
$ cd /path/to/gaia
+$ DEBUG=1 make
+

This will generate a directory in your gaia directory called "profile". The DEBUG part runs Gaia as hosted apps on a built-in web server, rather than the default packaged apps which have to be re-packaged after every change.

+

Note: Debug builds are currently broken on B2G Desktop, so until bug 816957 is fixed you need to run "make" without the "DEBUG=1" part, then re-run make every time you make a change to Gaia.

+

 

+

You can then run B2G Desktop with your generated profile like so:

+
$ /path/to/b2g/b2g-bin -profile /path/to/gaia/profile
+

If you want to you can build your own B2G Desktop from source.

+

B2G Device

+

 

+

If you have a compatible mobile device you can also run Gaia by flashing it with Firefox OS. Please see documentation here.

+

There is also documentation here about testing changes on your device.

+

Unit Tests

+

 

+

See here for information about writing and running unit tests for Gaia.

+

Filing Bugs

+

 

+

Bugs are filed on Bugzilla under Boot2Gecko > Gaia.

+

File a new bug under the Gaia component (or one of the sub-components) here.

+

Contributing Code

+

 

+

Mozilla depends on contributions from the open source community to help develop Gaia apps and we'd love you to get involved.

+

Some great places to find some bugs to start hacking on:

+ +

Coding Style

+

 

+ + + + + + + + +

Bad:

+
if (expression) doSomething();
+
+

Correct:

+
if (expression)
+  doSomething();
+

 

+

If you're working on the system app, check out the guidance listed here.

+

Before submitting a patch we recommend you run gjslint on it to check for any style errors:

+

 

+
gjslint --nojsdoc my_file.js
+

 

+

Submitting a Patch

+

First file or assign a bug to yourself on Bugzilla, you'll need a Bugzilla account.

+

Then create a branch on your fork of Gaia:

+
$ git branch branchname
+$ git checkout branchname
+

Commit your changes:

+
$ git add /file/to/add
+$ git commit -m "commit message including bug number"
+

Push your branch:

+
$ git push origin branchname
+

Send a pull request by navigating to the branch in your fork on GitHub and finding the pull request button.

+

To request a review of your patch, add an attachment to the bug in Bugzilla referencing the URL of the pull request and set the review ("r") flag to "?" and enter the bugzilla ID of one of the module owners and peers listed here.

+

The reviewer may ask you to make some changes. Once they're is happy with your patch, they will merge it into the master branch for you. Before they do this they would prefer it if you could squash all your changes into a single commit and add "r=reviewername" to the end of the commit message.

+

Contacting the Team

+

 

+ +

Tips

+

Linux B2G Desktop support

+

 

+

The homescreen is empty

+

Currently, under Linux, OOP frame aren't rendered properly. The homescreen isn't actually rendered here...

+

If you just want to happily hack on pure UI (css and JS) you can safely run with OOP disabled and avoid those issues. Change the line in build/settings.py

+
 "debug.oop.disabled": False,
+
+

to

+
 "debug.oop.disabled": True,
+
+

To the profile/user.js in your gaia directory.

+

Port Forwarding

+

 

+

To forward the socket on the phone to the desktop (for desktop development), you first need to get rilproxy to expose it as such, rather than exposing it to Gecko. In the gaia directory:

+
 $ make forward
+
+

This runs the commands:

+
$ adb shell touch /data/local/rilproxyd
+$ adb shell killall rilproxy
+$ adb forward tcp:6200 localreserved:rilproxyd
+
+

The file located at /data/local/rilproxyd will be deleted once the rilproxy daemon will start again. As a consequence you have to do this manipulation every time your device restarts.

+

Restarting B2G on a device from the desktop

+

 

+
adb shell killall b2g
+
+

B2G Desktop JavaScript Console

+

 

+

You can run B2G Desktop with the JavaScript console by using the -jsconsole flag

+
$ /path/to/b2g-bin -jsconsole
+
+

Launching an app directly

+

 

+

A "--runapp" option has been added to the B2G Desktop command-line to automatically start an application. The system app is loaded and everything happens like normal; this is not like the old trick where we loaded your app instead of the system app.

+

"--runapp" takes an argument that it normalizes by lower-casing and removing dashes and spaces, and then checks the argument against the similarly normalized app names from app manifests. For example, the name of the e-mail app is currently "E-Mail", but "--runapp email" will run it. Partial matching is not supported right now, but you can enhance b2g/chrome/content/runapp.js if your app name is unwieldy.

+

If you invoke "--runapp" without an argument (or an empty argument), the command will print out a list of all the apps it knows about as well as a brief usage message.

+

One important note is that this command disables the lock-screen as part of its magic and does not re-enable it. The assumption is that you won't use this command on a profile where you are testing the lock screen, or will turn it back on manually. Feel free to enhance the command to behave better if this is a problem for you.

+

In summary:

+
./b2g -profile /path/to/your/gaia/profile --runapp email
+
+

runs the e-mail app.

+

reset-gaia and install-gaia make targets

+

 

+

The reset-gaia and install-gaia make targets can be used interchangeably. reset-gaia will purge all the existing profiles, database before push Gaia from your working directory (new setting database will also be initialized); install-gaia will just push updates of Gaia.

+

Blank screen when B2G Desktop starts

+

 

+

When you start b2g using b2g -profile $GAIA/profile a blank screen shows up and you see an error Cannot reach app://system.gaiamobile.org. To fix this there are a couple of things you can check

+ +

Diagnosing OOM problems

+

 

+

From Cjones:

+

Another way to diagnose possible OOMs is to open a terminal and run

+

$ watch -n 1 'adb shell b2g-procrank'

+

If you see the "USS" of one of the app processes go up near 100MB and then that process disappear from the process list (accompanied by some sort of visual crash in gaia), then you've almost certainly seen an OOM kill.

+

 

+

 

+

 

+

 

+

 

+

 

diff --git a/files/de/archive/b2g_os/gaia/index.html b/files/de/archive/b2g_os/gaia/index.html new file mode 100644 index 0000000000..1405dd58c9 --- /dev/null +++ b/files/de/archive/b2g_os/gaia/index.html @@ -0,0 +1,56 @@ +--- +title: Gaia +slug: Archive/B2G_OS/Gaia +tags: + - B2G + - Gaia + - Mobile +translation_of: Archive/B2G_OS/Platform/Gaia +--- +

Gaia ist die Benutzeroberfläche von Firefox OS. Alles was auf dem Bildschirm nach dem Start von Firefox OS erscheint, wird von Gaia gemalt. Einschließlich des Sperrbildschirmes, Homescreen, Dialer und anderen Programmen. Gaia ist komplett in HTML, CSS, und JavaScript geschrieben. Seine einzige Schnittstelle zu dem zugrunde liegenden Betriebssystem und Hardware wird über Standart Web APIs ermöglicht, welche von Gecko implementiert werden.

+

Wegen diesem Aufbaus kann Gaia nicht nur auf Firefox OS Geräten, sondern auch auf anderen Betriebssystemen und Webbrowsern (wenn auch, je nach Fähigkeiten des Browsers, möglicherweise Eingeschränkt) betrieben werden.

+

Anwendungen von Drittanbietern, welchen neben Gaia installiert wurden, können von Gaia gestartet werden.

+ + + + + + + +
+

Dokumentationen über Gaia

+
+
+ Einführungen zu Gaia
+
+ Gaia ist die Benutzeroberfläche für Firefox OS Geräte; Es ist eine Internetapplikation welche auf der Firefox OS Applikationsumgebung läuft. Dieses Handbuch bietete eine Einführung zu Gaia auf einem hohen Niveau.
+
+ Gaia hacking guide
+
+ Ein Leitfaden für Hacking und Modifizierung der Gaia-Schnittstelle.
+
+

View All...

+ 		+

Hilfe von der Community

+

Wenn du mit Gaia, oder an Gaia Anwendungen arbeitest, könnten dir diese Community-Ressourcen helfen!

+
    +
  • Besuche das Boot to Gecko Projekt Forum: {{ DiscussionList("dev-gaia", "mozilla.dev.gaia") }}
    • +
+
    +
  • Stelle deine Fragen im Mozilla's Gaia IRC channel: #gaia
    • +
+

Don't forget about the netiquette...

+
+ + +

Ressourcen

+ +
+

 

diff --git a/files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html b/files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html new file mode 100644 index 0000000000..2b121e8274 --- /dev/null +++ b/files/de/archive/b2g_os/gaia/introduction_to_gaia/index.html @@ -0,0 +1,35 @@ +--- +title: Introduction to Gaia +slug: Archive/B2G_OS/Gaia/Introduction_to_Gaia +translation_of: Archive/B2G_OS/Platform/Gaia/Introduction_to_Gaia +--- +
+

Gaia is the user interface for Boot to Gecko (B2G); it's a set of Web applications that runs locally on a B2G device, emulator, desktop build, or Firefox build. All you need to know in order to add apps or make changes to Gaia are Web technologies like JavaScript, HTML, and CSS.

+
+ +

The Gaia lock screen

+ +

The lock screen shows the network carrier, current time and date, and a slidebar allowing the user to unlock the phone or go straight to the camera to take a picture. If the user has got a passcode lock set, the lock screen will also show a passcode entry interface.

+ +

+ +

Note that on some devices the passcode is enabled by default; in these cases the default PIN to unlock the device is "0000". This most likely will change over time as this feature is fleshed out.

+ +

The default Gaia interface

+ +

The default interface in Gaia, as seen here, is similar to what you see on most typical smartphones.

+ +

+ +

This image is obviously of a prerelease version of the operating system, with placeholder icons (and some test applications). The status bar at the top indicates the network on which the phone is operating (or "No SIM card" for a device without any network), the network strength, WiFi signal strength, battery level, and current time.

+ +

The middle area of the display shows icons for the applications; swiping left and right pages through screens of icons. You can find more about the default suite of apps that comes with Gaia on our Gaia apps page.

+ +

At the bottom of the screen is a dock with room for up to seven of your most commonly used applications. You can drag and drop apps to the dock from the middle area.

+ +

See also

+ + diff --git a/files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html b/files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html new file mode 100644 index 0000000000..8f6f0c7379 --- /dev/null +++ b/files/de/archive/b2g_os/gaia_entwickeln/build_system_primer/index.html @@ -0,0 +1,190 @@ +--- +title: 'Gaia Build System: Grundlagen' +slug: Archive/B2G_OS/Gaia_Entwickeln/Build_System_Primer +tags: + - Building + - Firefox OS + - Gaia Grundlagen + - Gaia build +translation_of: Archive/B2G_OS/Developing_Gaia/Build_System_Primer +--- +
+

Dieser Artikel beschreibt die grundlegende Funktionsweise des Gaia Build Systems inklusive make-Datei, Build-Prozess, Umgebungsvariablen und Anpassungsmöglichkeiten.

+
+ +

Die wichtigen Schritte eines Builds werden größtenteils von den im Gaia-Unterverzeichnis build/ liegenden Skripten erledigt. Augerufen werden diese mit make, node.js und XPCShell (auch bekannt als JS Shell), einer Laufzeitumgebung von XULRunner. Das Gaia Build System enthält viele Werkzeuge zum Installieren, Testen und Lokalisieren von Apps und um diese als Paket auf ein Gerät zu bringen. Zudem können Entwickler das Gaia-Paket anpassen, z.B. können Hintergrundbilder, Klingeltöne, Apps und Einstellungen geändert werden.

+ +
+

Hinweis: XPCShell ist ähnlich wie node.js, bietet aber zusätzlich die Möglichkeit zum Ausführen von Mozilla-spezifischen javascripts. Zudem können Gaia-Skripte mit Hilfe von XPCShell in einer Firefox Erweiterung laufen.

+
+ +

Die make-Datei

+ +

Die make-Datei enthält eine Menge nützlicher Funktionen. Dieses Kapitel bechreibt die nützlichsten davon.

+ +

install-gaia

+ +

Gestartet mit dieser Option installiert make alle Apps auf Deinem Gerät. Wenn Du nur eine bestimmte App installieren möchtest, dann starte make wie folgt mit der APP Option:

+ +
APP=calendar make install-gaia
+ +

Dieses Verzeichnis muss im Gaia-Verzeichnisbaum existieren (z.B. apps).

+ +

reset-gaia

+ +

Funktioniert genauso wie install-gaia mit dem Unterschied, dass zuerst alle Apps deinstalliert und anschließend wieder mit den Standard-Zugriffsrechten installiert werden. Die Apps befinden sich in /data/local wie bei den Entwickler-Builds. Test- und Debugging-Apps werden hier ebenfalls installiert.

+ +
+

Vorsicht: Wenn beim Aufruf von make mit der Option reset-gaia die Umgebungsvariable APP gesetzt ist, dann wird dies Dein Gerät in einen unbrauchbaren Zustand versetzen (das kann allerdings behoben werden durch Aufruf von make mit der Option reset-gaia ohne die APP Umgebungsvariable). Also mach das bitte nicht.

+
+ +

production

+ +

Genauso wie reset-gaia, aber der Quellcode wird optimiert. Das ermöglicht grundsätzlich die Emulation von User Builds (stabilen Builds). Mit dieser Option werden dieselben Apps installiert wie bei User Builds.

+ +
+

Vorsicht: Wenn beim Aufruf von make mit der Option production die Umgebungsvariable APP gesetzt ist, dann wird dies Dein Gerät in einen unbrauchbaren Zustand versetzen (das kann allerdings behoben werden durch Aufruf von make mit der Option production ohne die APP Umgebungsvariable). Also mach das bitte nicht.

+
+ +

reference workloads

+ +

Diese Option installiert unterschiedlich große Pakete für Laufzeittests auf dem Gerät, um eventuell auftretende Geschwindigkeits- und Skalierungsprobleme debuggen und beheben zu können. Diese Option akzeptiert die APP Umgebungsvariable und auch die APPS Umgebungsvariable mit mehreren durch Leerzeichen voneinander getrennten App-Namen, z.B.:

+ +
APP=sms make reference-workload-light
+APPS="sms communications/contacts" make reference-workload-heavy
+
+ +
+

Hinweis: Weitere Informationen findest Du auf Hacking Gaia: Reference workloads.

+
+ +

Umgebungsvariablen

+ +

Mit einigen Umgebungsvariablen kannst Du den Build und die Installation auf dem Gerät steuern, z.B.:

+ +

P=1

+ +

Das ermöglicht parallele Build-Erzeugungen auf Multikern CPU Architekturen und verkürzt die Laufzeit von Build-Erzeugungen, der Standardwert ist 0.

+ +
+

Vorsicht: Parallele Build-Erzeugung ist noch in der Test-Phase und somit vielleicht nicht stabil.

+
+ +

GAIA_OPTIMIZE=1

+ +

Hiermit wird eine Optimierung der JavaScript Dateien angestossen. Diese Umgebungsvariable wird automatisch beim Ausführen von make production gesetzt. Die Variable kann für install-gaia und reset-gaia verwendet werden.

+ +

PRODUCTION=1

+ +

Das ist im Grunde ein Alias für make production.

+ +

DEBUG=1

+ +

Mit dieser Umgebungsvariablen wird eine Debugging-Umgebung aufgebaut, die Du für Gaia unit tests oder für die Entwicklung eigener Apps in Firefox OS nutzen kannst. Du musst ein bereits bestehendes Debugging-Profilverzeichnis löschen, bevor Du ein neues generieren kannst.

+ +

DEVICE_DEBUG=1

+ +

Deaktiviert die Bildschirmsperre auf dem Gerät.

+ +

GAIA_DEVICE_TYPE=phone

+ +

Diese Umgebungsvariable ermöglicht eine individuelle Installation mit mehreren 'app.list' Dateien. Alle 'app.list' Dateien müssen in /build/config/$(GAIA_DEVICE_TYPE)/  Verzeichnissen liegen.

+ +

Der Standardwert von GAIA_DEVICE_TYPE ist phone.

+ +
+

Hinweis: Weitere Details und optionen findest Du auf Hacking Gaia make options.

+
+ +

Build-Prozess

+ +

Das Ablaufdiagramm, wie ein Build für Gaia erzeugt wird:

+ +

+ +

pre-app.js, app.js & post-app.js werden von make gestartet und die meisten Build-Schritte werden in den xpcshell Skripten ausgeführt, make ermittelt das Betriebssystem und lädt den b2g-desktop herunter. Wir planen, mehr Build-Schritte von make in die xpcshell Skripte zu migrieren.

+ +

Vielleicht fragst Du Dich, warum wir pre-app, app and post-app nutzen. Das liegt daran, dass wir immer mehr Abhängigkeiten von make in die xpcshell Skripte verlagern. Deshalb entwickelten wir pre-app.js und post-app.js basierend auf  bug 1021051, um den Großteil der Abhängigkeiten in die xpcshell Skripte zu verlagern. Am Ende werden dann app.js, pre-app.js und post-app.js auf Basis von  bug 1053703 migriert.

+ +

Wir haben drei Typen von Verzeichnissen in einem Gaia Build System:

+ +
    +
  1. Source-Verzeichnisse: apps, dev_apps, gemeinsame Verzeichnisse
    2. +
  2. Stage-Verzeichnis: build_stage (stage = Plattform)
    3. +
  3. Profil-Verzeichnisse: profile, profile-debug oder profile-test
    4. +
+ +

Unser Ziel ist es, keine Dateien in die Source-Verzeichnisse hinein zu generieren. Leider haben wir immer noch ein paar Stellen, an denen Dateien in die Source-Verzeichnisse generiert werden. Wir planen, diese Probleme zu beheben. Die folgende Tabelle listet auf, von welchen Modulen Dateien ins Source-, ins Stage- und in die Profil-Verzeichnisse generiert werden.

+ +

+ +

Der Build-Prozess führt bei Aufruf von make im Gaia-Verzeichnis die folgenden Schritte in der angegebenen Reihenfolge aus:

+ +
    +
  1. b2g_sdk: b2g-desktop startet die xpcshell Skripte in GAIA_DIR/build/.
    2. +
  2. svoperapps: Download der Apps und Generieren der Konfigurations-Dateien der App-Installation pro SIM-Karten-Anbieter und Land.
    3. +
  3. webapp-manifests: Generieren der Metadaten der Web-Apps für den Build.
    4. +
  4. keyboard-layouts: Generieren der Layout-Konfiguration der Standard-Tastatur.
    5. +
  5. settings.json (settings.js): Dieses JavaScript generiert die Standard-Einstellungen für Firefox OS, die von Gaia gelesen werden.
    6. +
  6. webapp-shared: Kopieren der von den Apps benötigten Dateien vom gemeinsamen Source-Verzeichnis ins Stage-Verzeichnis.
    7. +
  7. preferences: Generiert die Standard-Umgebung für Firefox OS; generiert die Datei user.js und kopiert diese auf das Gerät, wo sie von Gecko gelesen wird. Bitte beachte, dass die Standard-Umgebung abhängig von den Umgebungsvariablen (wie z.B. DEBUG=1) variieren kann.
    8. +
  8. app.js: make-Dateien in den jeweiligen app Verzeichnissen: Sie werden ausgeführt, wenn sie existieren. Für jede App ohne eigene make-Datei kopiert die Gaia make-Datei das App-Verzeichnis ins Stage-Verzeichnis build_stage und führt [app-directory]/build/build.js aus, falls vorhanden. Siehe {{ anch("Build script for apps") }} für weitere Details.
    9. +
  9. test-agent-bootstrap & test-agent-config: Einrichten der zwei make Regeln test-agent-config & test-agent-bootstrap-apps, welche für den Aufbau von Test-Umgebungen pro App benötigt werden.
    10. +
  10. webapp-optimize: Dieses Skript enthält verschiedene Optimierungs-Prozeduren inklusive JavaScript Minimierung, Zusammenfügen von Lokalisierungs-Dateien in die JSON-Dateien und Generieren von HTML-Dateien für die Standard-Sprache, falls nötig.
    11. +
  11. webapp-zip: Hier wird jede App in eine eigene zip-Datei komprimiert und diese im Verzeichnis profile/ abgelegt.
    12. +
  12. optimize-clean: optimize-clean bereinigt die HTML-Dateien für die Standard-Sprache.
    13. +
  13. contacts: Kopiert eine vorgefertigte Kontakte-Datei in Dein Profil in GAIA_DISTRIBUTION_DIR, falls vorhanden.
    14. +
  14. extensions: Kopiert die in GAIA_DIR/tools/extensions liegenden Erweiterungen in Dein Profil-Verzeichnis; verschiedene Konfigurationen ermöglichen das Kopieren verschiedener Erweiterungen.
    15. +
  15. installed-extensions.json (additional-extensions.js): Zu guter Letzt: Dieses Skript kopiert per Download verschiedene zusätzliche Erweiterungen in Dein Profil-Verzeichnis.
    16. +
+ +

Build-Skript für Apps

+ +

Standardmäßig wird als App Build Skript [app directory]/build/build.js von  app.js ausgeführt, falls vorhanden. Wenn $APP/build/build.js nicht vorhanden ist, dann kopiert app.js die App ins Stage-Verzeichnis build_stage.

+ +

Die Dateien im App-Verzeichnis sollten vom App Build-Skript ins Stage-Verzeichnis build_stage kopiert werden; denn app.js kopiert sie nicht, wenn ein App Build-Skript existiert. Beispiel: Die App "Kalender" hat ein Skript build/build.js und utils.copyToStage() sollte in build.js für die "Kalender" App aufgerufen werden.

+ +
+

Hinweis: Sourcen, die nicht zu Deiner App gehören (wie in shared/) kannst Du in der index.html in den <head> Bereich einfügen, damit sie von shared/ in Deine App kopiert werden.

+
+ +

Build-Skripte für Apps benötigen möglicherweise alle Build Module im Verzeichnis  $GAIA_DIR/build; speziell das utils Modul, ein sehr nützliches Modul für den Build von Apps, kannst Du require('utils') verwenden um das Modul einzubinden.

+ +

+ +

Anpassen der Voreinstellungen

+ +

Wenn Du eine eigene Konfiguration mit Einstellungen und Apps immer wieder beim Flashen Deines Gerätes benötigst, dann kannst Du eine Datei namens custom-prefs.js mit all Deinen Präferenzen im Verzeichnis build/config ablegen. Dort ist sie vor Überschreiben geschützt und unterliegt nicht der Source-Steuerung.

+ +

Hier sind einige sinnvolle Voreinstellungen:

+ +
// Aktivieren von marionette für Performance-Tests
+// siehe https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform/Testing/Gaia_performance_tests
+user_pref("marionette.defaultPrefs.enabled", true);
+
+// Setzen des Ports für remote Debugging Deiner Anwendung auf Deinem Gerät
+user_pref("devtools.debugger.remote-port", 60000);
+
+// Aktivieren des remote Debuggers
+user_pref("devtools.debugger.remote-enabled", true);
+
+// Ausgeben der Debug-Meldungen über den Radio Interface Layer in logcat
+user_pref("ril.debugging.enabled", true);
+
+ +

Diese Datei wird immer gelesen, wenn Du ein Profil generierst. Der sicherste Weg sicherzustellen, dass alles generiert wurde ist das vorherige Löschen des vorhandenen Profils:

+ +
rm -rf profile && make profile
+ +

Anschließend kannst Du beruhigt die install-gaia Option von make verwenden.

+ +

FAQ

+ +

Das Display bleibt Schwarz nach einem flash

+ +

Das kann manchmal passieren, wenn das Gerät im Ruhemodus geflasht wird. Um das Problem zu beheben starte B2G einfach durch das folgende Kommando neu:

+ +
adb shell stop b2g && adb shell start b2g
+ +


+  

diff --git a/files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html b/files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html new file mode 100644 index 0000000000..928799c864 --- /dev/null +++ b/files/de/archive/b2g_os/gaia_entwickeln/customizing_build-time_apps/index.html @@ -0,0 +1,117 @@ +--- +title: 'Gaia-Apps: Build anpassen' +slug: Archive/B2G_OS/Gaia_Entwickeln/Customizing_build-time_apps +tags: + - Anpassung + - Apps + - Firefox OS + - Gaia + - build +translation_of: Archive/B2G_OS/Developing_Gaia/Customizing_build-time_apps +--- +
+

Entwickler und Geräte-Hersteller wollen die App-Pakete oftmals beim Erzeuen eines Builds aus verschiedenen Gründen anpassen. Dieser Artikel erklärt die unterschiedlichen Mechanismen dafür.

+
+ +

Pfade für App-Dateien in Gaia

+ +

Alle Firefox OS Apps befinden sich in einem der folgenden Pfade im Gaia Verzeichnisbaum:

+ + + +

Falls Du in Deinem Gaia/B2G Build Apps herauslassen oder hinzufügen möchtest, dann kannst Du das auf verschiedene Weise tun. Details dazu werden nachfolgend erläutert.

+ +

Die harte Methode

+ +

Bei der harten Methode werden einfach die Apps gelöscht, die man nicht in den Build mit einbeziehen will.

+ +

Anpassen der Konfigurations-Dateien

+ +

Die etwas elegantere Methode ist das Anpassen der apps-*.list Dateien (zu finden in den verschiedenen gerätespezifischen Verzeichnissen, die in gaia/build/config/ aufgelistet sind, z.B. phone/ und tablet/), um die für den Build gewünschten Apps zu konfigurieren. Zum Beispiel könnte die Konfigurations-Datei gaia/build/config/phone/apps-production.list wie folgt aussehen:

+ +
apps/bluetooth
+apps/bookmark
+apps/browser
+apps/calendar
+apps/callscreen
+etc.
+ +

Du kannst hier auch alle Apps eines Verzeichnisses einbinden, und zwar so:

+ +
apps/*
+ +

Welche apps-*.list Dateien wiederum für den Build verwendet werden um die verfügbaren Apps zu ermitteln ist in der Datei gaia/Makefile hinterlegt, die etwa so aussieht:

+ +
GAIA_DEVICE_TYPE?=phone
+  ...
+GAIA_APP_TARGET?=engineering
+  ...
+ifeq ($(MAKECMDGOALS), demo)
+GAIA_DOMAIN=thisdomaindoesnotexist.org
+GAIA_APP_TARGET=demo
+else ifeq ($(MAKECMDGOALS), dogfood)
+DOGFOOD=1
+else ifeq ($(MAKECMDGOALS), production)
+PRODUCTION=1
+endif
+  ...
+ifeq ($(PRODUCTION), 1)
+GAIA_OPTIMIZE=1
+GAIA_APP_TARGET=production
+endif
+
+ifeq ($(DOGFOOD), 1)
+GAIA_APP_TARGET=dogfood
+endif
+  ...
+ifndef GAIA_APP_CONFIG
+GAIA_APP_CONFIG=build$(SEP)config$(SEP)apps-$(GAIA_APP_TARGET).list
+endif
+ +

Standardmaßig ist die Variable GAIA_APP_TARGET auf engineering gesetzt und die Variable GAIA_DEVICE_TYPE auf phone, so dass beim Build von Gaia per Default die Datei gaia/config/phone/app-engineering.list verwendet wird (die alle Apps enthält, u.a. auch Test- und Demo-Apps).

+ +

Um andere apps-*.list Dateien zu verwenden musst Du entsprechende Parameter beim Aufruf des make Kommandos mitgeben. Um z.B. den Build mit gaia/build/config/phone/apps-production.list zu starten müsstest Du das hier verwenden:

+ +
PRODUCTION=1 make
+ +

Wenn Du den Build mit DEMO=1 startest, dann wird die Datei apps-demo.list verwendet. Und wenn Du den Build mit DOGFOOD=1 startest, dann wird die Datei apps-dogfood.list verwendet.

+ +

Du kannst dieses Verhalten komplett übersteuern, indem Du die Variable GAIA_APP_CONFIG in der Datei gaia/Makefile änderst und dort eine eigene apps-*.list Datei einträgst.

+ +

gaia/Android.mk enthält diese Zeilen:

+ +
ifneq ($(filter user userdebug, $(TARGET_BUILD_VARIANT)),)
+GAIA_MAKE_FLAGS += PRODUCTION=1
+B2G_SYSTEM_APPS := 1
+endif
+ +

Wenn Du den Build mit VARIANT=user oder VARIANT=userdebug startest (dieses Übersteuern spiegelt sich auch in der Variable TARGET_BUILD_VARIANT wieder), dann wird PRODUCTION=1 automatisch gesetzt.

+ +
+

Hinweis: Weitere Optionen für make findest Du in der make options reference.

+
+ +

Verwenden eigener Distributionen

+ +

Die dritte und eleganteste (allerdings auch komplexeste) Methode ist das Verwenden eigener Distributionen. Dies ermöglicht das Einbinden eigener Konfigurationen und Pakete ohne das Gaia Paket selbst zu ändern. Du kannst für Deine angepassten Konfigurationen und Pakete eigene Verzeichnisse oder die mit Gaia ausgelieferten Verzeichnisse verwenden.

+ +

Du kannst Deine Distribution durch Setzen der Umgebungsvariable GAIA_DISTRIBUTION_DIR in den Build einbinden, zum Beispiel so:

+ +
GAIA_DISTRIBUTION_DIR=<DISTRIBUTION_PATH> make production
+ +

Mehr Informationen zum Erstellen individueller Distributionen findest Du auf https://github.com/mozilla-b2g/gaia/tree/master/customization.

+ +

Dieses komplexe Thema hat eine komplett eigene Dokumentation. Mehr zum Thema erfährst Du unter Market Customizations guide.

+ +
+

Hinweis: Wenn Du Apps von Drittanbietern in Deinen Gaia Build einbinden willst, dann müssen diese auf spezielle Art erzeugt werden bevor sie im Verzeichnis gaia/dev-apps/ abgelegt werden. Nähere Informationen findest Du auf Building Prebundled web apps.

+
+ +
+

Wichtig: Wenn Sie als Geräte-Hersteller einen angepassten B2G/Gaia Build für Ihre Distribution verwenden möchten, dann müssen Sie bestimmte Voraussetzungen erfüllen bevor Sie Firefox OS Marketplace Apps auf Ihrem Smartphone, Tablet etc. anbieten dürfen. Bitte kontaktieren Sie in einem solchen Fall Mozilla für nähere Informationen.

+
+ +

 

diff --git a/files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html b/files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html new file mode 100644 index 0000000000..eef4cb0c8e --- /dev/null +++ b/files/de/archive/b2g_os/gaia_entwickeln/durchfuehrung_der_gaia_codebase/index.html @@ -0,0 +1,71 @@ +--- +title: Durchführung der Gaia codebase +slug: Archive/B2G_OS/Gaia_Entwickeln/Durchfuehrung_der_Gaia_codebase +tags: + - B2G + - Firefox + - Firefox OS + - Firefox OS lokal ausführen + - Gaia + - beitragen + - 'l10n:priority' +translation_of: Archive/B2G_OS/Developing_Gaia/Running_the_Gaia_codebase +--- +
+

Dieser Artikel beschreibt im Detail die lokale Durchführung der Gaia Codebase und welche Werkzeuge in diesem Setup verfügbar sind.

+
+ +

Zuerst sei erwähnt, dass Du NICHT Gecko oder B2G erstellen musst, um zu Gaia beizutragen. Du musst lediglich den Gaia Quellcode herunterladen und die Möglichkeit haben, diesen auszuführen und zu editieren.
+
+ Es gibt verschiedene Möglichkeiten, Gaia auszuführen:

+ + + +

Du findest auf der Different ways to run Gaia Seite kurzgefasste Informationen über jede der genannten Möglichkeiten, zusammen mit Links zu detailierten Beschreibungen - je nach Bedarf. Generell sind diese nach Komplexität geordnet, absteigend von der komplexesten zur einfachsten (aber unwahrscheinlichsten) Methode.

+ +

In diesem Artikel konzentrieren wir uns auf das Ausführen von Gaia innerhalb von Firefox Mulet oder in WebIDE. Für die meisten Änderungen, die Du in der Gaia Codebase machen möchtest, bietet dies den schnellsten Mechanismus, Updates zu testen aber offensichtlich gibt es einige Funktionen (z. B. das Testen von Geräte-APIs oder Interaktion mit der Smartphone Hardware ), für die ein physisches Gerät benötigt wird.

+ +
+

Info: Um weitere Hilfe zu Gaia zu bekommen, der beste Platz ist der #gaia IRC Channel (siehe auch Mozilla IRC für weitere Informationen hierzu) und die dev-gaia mailing list.

+
+ +

Ausführen der eigenen Gaia Version

+ +
    +
  1. Erstelle zuerst eine Verzweigung von der Gaia repo on Github.
    2. +
  2. Als nächstes, klone Deine Verzweigung lokal: + 
    git clone https://github.com/your-username/gaia.git
    +
    3. +
  3. Füge den Upstream wie folgt hinzu: + 
    cd gaia
+git remote add upstream https://github.com/mozilla-b2g/gaia
    +
    4. +
  4. Nun musst Du ein Gaia Profil anlegen. Führe make innerhalb Deines repo Ordners aus, um ein Profil in der profile Directory anzulegen, die für optimales Debugging konfiguriert ist. Dies erzeugt ungepackte (hosted) Versionen der Gaia Apps, welche dazu fungieren, gebündelt und direkt über den lokalen HTTPD Server -zusammen als Erweiterung für Firefox Desktop- übertragen zu werden. Wenn Du Änderungen gemacht hast, musst Du nur Dein Browser Fenster aktualisieren, um das Ergebnis zu sehen (wie Du es später sehen wirst), statt Dein Profil erneuern zu müssen, erneut auf das Gerät übertragen u.s.w..
    + Dies ist sehr gut für schnelles CSS/JS/HTML Hacking.
    5. +
  5. Mit Deinem angelegten Debug Profil, führe es in Mulet or WebIDE aus, mithilfe der Anleitungen hinter den Links.
    6. +
+ +

Troubleshooting und bekannte Probleme

+ +

Error: Python executable "python3" is v3.x, which is not supported by gyp.

+ +

In manchen Linux Versionen (eg: Archlinux), ist python3 der Standard python. Dadurch scheitert npm beim Ausführen mancher Befehle (z B. beim Testen). Um dies permanent zu beheben, führe folgenden Befehl aus:

+ +
npm config set python python2
+ +

Weiter Lösungen findest Du auch auf dieser Seite: Stack Overflow page.

+ +

Danach solltest Du Deine node_modules Directory löschen und den gescheiterten Befehl erneut ausführen.

+ +

Please Install NodeJS -- (use aptitude on linux or homebrew on osx)

+ +

Nun bekommst Du diesen Fehler obwohl Du NodeJS installiert hast. Möglicherweise benutzt Du Debian oder andere Debian-basierende Versionen wie zum Beispiel Ubuntu. Bei diesen Versionen ist NodeJS im nodejs Paket und Du kannst das nodejs-legacy Paket folgendermaßen installieren, um alles korrekt aufzusetzen:

+ +
sudo aptitude install nodejs-legacy
+ +

Solltest Du bei der Installation des Paketes Probleme haben, benutzt Du eventuell Chris Lea's PPA for Node; bitte entferne diese bevor Du weitermachst.

diff --git a/files/de/archive/b2g_os/gaia_entwickeln/index.html b/files/de/archive/b2g_os/gaia_entwickeln/index.html new file mode 100644 index 0000000000..d6f1d582d6 --- /dev/null +++ b/files/de/archive/b2g_os/gaia_entwickeln/index.html @@ -0,0 +1,52 @@ +--- +title: Gaia entwickeln +slug: Archive/B2G_OS/Gaia_Entwickeln +tags: + - B2G + - Bugs + - Firefox OS + - Gaia + - Mozilla + - beitragen +translation_of: Archive/B2G_OS/Developing_Gaia +--- +
+

Gaia ist das User Interface von Firefox OS, sowie eine Suite für die Standard-Apps. Gaia beinhaltet den Sperr- und Startbildschirm, die Telefonie-App und weitere Apps. Im Grunde ist Gaia eine Menge an Web-Apps, welche auf Firefox OS laufen. Diese Artikel behandelt alles, was zur Mitentwicklung an Gaia wissenswert ist.

+
+ +

In diesem Guide zeigen wir dir einen produktiven Workflow, um an Gaia mitzuarbeiten - und damit meinen wir, neue Features zu Gaia hinzuzufügen und an Bugs im Gaia Projekt zu arbeiten. Die ersten paar Artikel können in gegebener Reihenfolge durchgearbeitet werden oder du überspringst sie und gehst direkt zum relevanten Abschnitt, wenn du dein Wissen über ein bestimmtes Thema auffrischen möchtest.

+ +

Danach stellen wir Referenzmaterialien und Informationen zu weiteren Themen zur Verfügung.

+ +

+ +

Die Grundlagen

+ +
    +
  1. Die Gaia Codebase zum Laufen bringen
    2. +
  2. Die Gaia Codebase verstehen
    3. +
  3. Änderungen am Gaia Code machen
    4. +
  4. Änderungen am Gaia Code testen
    5. +
  5. Einen Gaia Patch einreichen
    6. +
+ +

Gaia Build Referenzen

+ + + +

Siehe auch

+ + diff --git a/files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html b/files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html new file mode 100644 index 0000000000..18a2a01cf5 --- /dev/null +++ b/files/de/archive/b2g_os/gaia_entwickeln/making_gaia_code_changes/index.html @@ -0,0 +1,85 @@ +--- +title: Gaia Coding ändern +slug: Archive/B2G_OS/Gaia_Entwickeln/Making_Gaia_code_changes +tags: + - Anleitung + - Code + - Firefox OS + - Gaia + - Änderungen +translation_of: Archive/B2G_OS/Developing_Gaia/Making_Gaia_code_changes +--- +
+

Jetzt, wo Gaia auf Deinem Desktop läuft und Du zu einem gewissen Grad die Arbeitweise der Codebase verstehst, solltest Du in der Lage sein Änderungen am Gaia Code durchzuführen. Dieser Artikel beschreibt, wie Änderungen durchgeführt werden und wie man Fehler findet um sie zu beheben.

+
+ +

Git Best Practices

+ +
    +
  1. Vor dem Ändern von Gaia solltest Du zuerst den master Zweig (branch) aktualisieren: + 
    cd path/to/gaia
+git checkout master
+git pull upstream master
    +
    2. +
  2. Als nächstes  brauchst Du einen eigenen Zweig für Deine Änderungen: + 
    git checkout -b my-code-fix
    +
    3. +
  3. Anschließend gehst Du ins Verzeichnis gaia/apps und führst Deine Änderungen an den App-Dateien durch.
    4. +
+ +

Beispiel einer einfachen Code-Änderung

+ +

Um Code-Änderungen anzuzeigen:

+ +
    +
  1. Führe die gewünschten  Änderungen an der Gaia Codebase durch und speichere die Änderungen.
    2. +
  2. Beende Firefox Mulet oder den WebIDE Simulator.
    3. +
  3. Erneuere Dein Gaia Profil mit make.
    4. +
  4. Starte Firefox Mulet oder den WebIDE Simulator erneut.
    5. +
+ +

Lass uns etwas Einfaches ändern wie die Textfarbe der Uhr auf dem Sperrbildschirm:

+ +

Gaia lockscreen showing the clock display in white text

+ +
    +
  1. Der beste Weg um herauszufinden wo dieser Stil geändert wird ist über die Entwickler-Werkzeuge. Verwende hier Strg/rechte Maustaste + Klick auf die Uhr im Firefox Desktop und wähle im Kontext-Menü Element untersuchen.
    2. +
  2. Nun kannst Du die zu ändernde CSS Datei suchen — in diesem Fall  gaia/apps/system/lockscreen/style/lockscreen.css — und die Änderungen an den CSS Styles auf der rechten Seite des Displays nach Deinen Vorstellungen vornehmen.
    3. +
  3. Wenn Du mit Deinen Änderungen zufrieden bist, dann öffne die Datei und mache dort Deine Änderungen direkt.
    4. +
  4. Als nächstes führst Du die oben aufgeführten Schritte durch, um Dir Deine Änderungen anzusehen.
    5. +
+ +

Gaia lockscreen showing the clock display modified from white to red text
+
+
+ Einschränkungen im Gaia Firefox Mulet Rendering:

+ + + +

Wo man zu bearbeitende Fehler findet

+ +

Am besten nutzt Du Josh Matthews' Bugs Ahoy app um Fehler zu finden, die Du bearbeiten kannst — diese Seite liest die vorhandenen Bugs direkt aus Mozilla's Bugzilla und stellt sie im Browser inklusive Suchfunktion dar. Wenn Du einen Fehler gefunden hast den Du bearbeiten willst, dann gehe zu dessen Bugzilla-Seite, trage Dich als Bearbeiter im Feld "assigned to" ein und beginne mit der Arbeit wie oben beschrieben.

+ +

Nützliche Tipps

+ + + +

https://bugzilla.mozilla.org/buglist.cgi?columnlist=product%2Ccf_blocking_b2g%2Cbug_status%2Cresolution%2Cshort_desc&resolution=---&query_based_on=CLOCK&query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=Gaia%3A%3AClock&product=Boot2Gecko&known_name=CLOCK&list_id=9776392

+ +

Siehe auch

+ + diff --git a/files/de/archive/b2g_os/index.html b/files/de/archive/b2g_os/index.html new file mode 100644 index 0000000000..4447e3c024 --- /dev/null +++ b/files/de/archive/b2g_os/index.html @@ -0,0 +1,163 @@ +--- +title: B2GOS +slug: Archive/B2G_OS +tags: + - Anfangen + - Anfänger + - B2G OS + - Basic + - Firefox OS + - Gaia + - Gecko + - Gonk + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS +--- +
+

B2G OS ist ein vollständiges, selbstständig arbeitendes Betriebssystem für das offene Web. Es ist ein von der Mozilla-Community entwickeltes Open-Source-Projekt und bildet die Grundlage der Firefox OS-Produkte.

+
+ +

B2G OS ist ein von der Community gepflegtes Open-Source-Betriebssystem für Smartphones, Tablets, Smart TVs und andere internetfähige Geräte. Das Projekt startete ursprünglich 2011 und basiert auf dem Linux-Kernel und der Rendering-Engine Gecko. Die komplette Nutzeroberfläche ist mit Web-Technologien geschrieben und kann zum Starten und Benutzen von Web-Anwendungen benutzt werden. Nachdem die Mozilla Corporation ihr kommerzielles Firefox OS Smartphone-Programm eingestellt hat, wird das Projekt für Smartphones von Mozillas Community weiterentwickelt und als B2G OS geführt.

+ +

+ +
+

Hinweis: Aufruf zur Mitarbeit & Aufruf zur Appanpassung um mehr Personen zu beteiligen. Hilf uns und teile ihn!

+
+ +
+
+

Mithelfen

+ +
    +
  • Melde & behebe Fehler (Meta-Bug ist Bug 1252143)
    • +
  • Hilf uns, fehlschlagende Tests zu reparieren
    • +
  • Portiere eine Gaia Smartphone-App: +
      +
    1. in eine Web-App (oder)
      2. +
    2. in eine chrome://-Anwendung (warum?) und berichte darüber
      3. +
    +
    • +
  • Portiere B2G OS für dein Smartphone und hilf uns, den Port zu pflegen
    • +
  • Hilf uns, diese Dokumentation und das Wiki zu verbessern und zu übersetzen
    • +
  • Schlage neue Smartphone-Funktionen vor und implementiere sie
    • +
+
+ +
+

Mitreden

+ + +
+ +
+

Geräte

+ +

Informationen zu unterstützten Geräten, auf denen B2G OS laufen kann:

+ + + +

Mehr Informationen finden sich hier.

+ +

Dein Gerät ist nicht dabei? Probier die Mulet-Desktopanwendung aus.

+
+
+ +
+

Hinweis: Einige Seiten wurden in das MDN-Archiv verschoben. Lass es uns wissen, wenn du Schwierigkeiten hast, etwas zu finden oder ein Abschnitt aus dem Archiv hierher zurückgeholt werden sollte.

+
+ +

 

+ + + +
    +
  1. B2G OS Architecture + +
      +
    1. B2G OS Architecture
      2. +
    2. B2G OS APIs
      3. +
    +
    2. +
  2. Gaia +
      +
    1. Gaia overview
      2. +
    2. Different ways to run Gaia
      3. +
    3. Running the Gaia codebase
      4. +
    4. Developing Gaia +
        +
      1. Understanding the Gaia codebase
        2. +
      2. Making Gaia code changes
        3. +
      3. Testing Gaia code changes
        4. +
      4. Submitting a Gaia patch
        5. +
      5. Gaia build system primer
        6. +
      6. Make options reference
        7. +
      7. Gaia tools reference
        8. +
      +
      5. +
    +
    3. +
  3. Build B2G OS +
      +
    1. Build overview
      2. +
    2. B2G OS build process summary
      3. +
    3. Build prerequisites
      4. +
    4. Preparing for your first build
      5. +
    5. Building B2G OS +
        +
      1. Building B2G OS
        2. +
      2. Building B2G OS for Flame on Mac OS X
        3. +
      3. Building for Fairphone
        4. +
      4. B2G build variables reference sheet
        5. +
      +
      6. +
    +
    4. +
  4. Run B2G OS on Desktop +
      +
    1. Choosing how to run Gaia or B2G OS
      2. +
    2. Run B2G OS on desktop using Mulet
      3. +
    +
    5. +
  5. Install B2G OS on mobile +
      +
    1. Installing B2G OS on a mobile device
      2. +
    2. B2G installer add-on
      3. +
    +
    6. +
  6. Compatible Devices
    7. +
  7. Create updates for B2G OS +
      +
    1. Creating and applying B2G OS update packages
      2. +
    2. Building and installing FOTA community build
      3. +
    +
    8. +
  8. Porting B2G OS +
      +
    1. Porting overview
      2. +
    2. Porting basics
      3. +
    3. Porting on CyanogenMod
      4. +
    +
    9. +
diff --git a/files/de/archive/b2g_os/installing_on_a_mobile_device/index.html b/files/de/archive/b2g_os/installing_on_a_mobile_device/index.html new file mode 100644 index 0000000000..96a469353c --- /dev/null +++ b/files/de/archive/b2g_os/installing_on_a_mobile_device/index.html @@ -0,0 +1,81 @@ +--- +title: Installing Firefox OS on a mobile device +slug: Archive/B2G_OS/Installing_on_a_mobile_device +translation_of: Archive/B2G_OS/Installing_on_a_mobile_device +--- +
+

Once you've built Boot to Gecko for a supported mobile device, you can install it. This article will guide you through the process.

+
+
+ Note: The first time you flash your phone, it must have Android 4 (Ice Cream Sandwich) installed. The process will not work correctly otherwise. Once you've done your first install of B2G, however, you can simply update on top of it.
+

Installing ADB

+

On OSX

+

If you have homebrew on OSX:

+
brew install android-platform-tools
+

Otherwise, download the Android Developer Tools and add the binaries to your PATH.

+

On Ubuntu

+
sudo apt-get install android-tools-adb
+

Flashing your phone

+

To flash everything to your phone, simply connect your phone and type:

+
./flash.sh
+
+

That's it. The B2G you've currently got built will flash onto your device.

+

Note that If you are updating across revisions with significant Gaia changes, you might need also do:

+
cd gaia
+make reset-gaia
+

This will wipe all of your data stored in Gaia, but also clear out obsolete Gaia settings and prefs so that you'll boot into a "clean" Gaia. In theory ./flash.sh should do this already, but for some devices (e.g. hamachi) ./flash.sh only flashes a subset of modules (./flash.sh -f will force flash everything.)

+

Configuring the udev rule for your device

+

On Linux, if you get this,

+
< waiting for device >
+

that probably means that you haven't added a udev rule for the fastboot device, which is not the same as the one for adb. (Though it also might just mean you need to run ./flash.sh with sudo) You can get the USB vendor ID by running lsusb now, but typically it's Google's: 18d1, so adding this line in your /etc/udev/rules.d/51-android.rules would work:

+
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", MODE="0666", GROUP="plugdev"
+
+ Note: If you get a very helpful libusb error "-3" on Linux, it means you need to be root to have the needed access to the USB device. Run the script again using sudo.
+
+ Note 2: If you have an Unagi or a Geeksphone Keon phone, you need two lines like this - one for the original phone vendor's ID, and one for Google's.
+

Special notes for Hamachi, Helix, and Leo devices

+

If your phone is a hamachi, helix or leo device, the ./flash.sh script will now default to flashing only gecko and gaia.  It is recommended that you flash with the OEM as a base build to get the firmware and the gonk layers and then flash the gecko and gaia on top.  If you want to flash using the images, there is an override flash where you can ./flash.sh -f and it will use the image files to flash your device.

+

Special notes for the Samsung Galaxy S2

+

If your phone is a Galaxy S2 and you are using heimdall 1.3.2 (the latest version; use heimdall version to check), you may see an alarming error "FACTORYFS upload failed!" followed by "Heimdall flashing failed" and some additional information. This is actually a success condition, and you can ignore the advice.

+

To get rid of this strange behavior, grab a source copy of heimdall, downgrading to the 1.3.1 release ("git checkout fbbed42c1e5719cc7a4dceeba098981f19f37c06"), then compile it  according to the README, then install that to make the error go away. However, this isn't strictly necessary.

+

All versions of heimdall are unable to flash a system.img larger than 100MB. Do:

+
ls -l ./out/target/product/galaxys2/system.img
+
+

to see how big yours is. If it's too large, ask in IRC for advice; there are ways to do it in two stages.

+

Added step for the Samsung Galaxy S2

+

If you're flashing onto the Galaxy S2, there is an additional step to follow. Gaia does not get flashed automatically by the flash.sh script; you'll need to also do:

+
./flash.sh gaia
+
+

Flashing specific partitions to fastboot phones

+

You can flash specific partitions to fastboot phones (that is, any phone other than the Samsung Galaxy S2). For example:

+
./flash.sh system
+./flash.sh boot
+./flash.sh user
+
+

WARNING: flashing user (at least) may delete your user-specific data (contacts, etc.).

+

Updating specific modules

+

You can update specific components of B2G by specifying their names when flashing. For example:

+
./flash.sh gaia
+./flash.sh gecko
+
+

In order to update only one application you can use BUILD_APP_NAME environment variable:

+
BUILD_APP_NAME=calendar ./flash.sh gaia
+

If your phone is not for developer (you aren't interested on test apps and/or require optimization), you can update gaia using:

+
VARIANT=user ./flash.sh gaia
+

Next steps

+

At this point, your phone should be running Boot to Gecko! It's time to experiment, write some code, test, or do some debugging!

+
+ Note: A helpful usage tip: if your build of B2G starts up with the lock screen requesting a pass code to unlock the phone, the default code is 0000.
+

Troubleshooting

+

Here are a some tips for what to do if your device doesn't work right after installing B2G, or updating it to a new version

+

If the UI doesn't start up

+

If you update your phone and the user interface doesn't start up, you can reset it to clear out out-of-date configuration and the like. This may bring it back to life, but note that it may also delete your user-specific data (contacts, etc.). Here's how:

+
cd gaia
+make reset-gaia
+
+

If you want change from developer to production mode

+
cd gaia
+make reset-gaia PRODUCTION=1
+

WARNING: reset-gaia may delete your user-specific data (contacts, etc.).

+

"image is too large" error message on ./flash.sh execution

+

It might mean that you phone needs to be rooted first before flashing it. As b2g needs to be written on root partition, your phone needs to be rooted in order to install it.

diff --git a/files/de/archive/b2g_os/introduction/index.html b/files/de/archive/b2g_os/introduction/index.html new file mode 100644 index 0000000000..606b63f0e7 --- /dev/null +++ b/files/de/archive/b2g_os/introduction/index.html @@ -0,0 +1,84 @@ +--- +title: Einführung in Firefox OS +slug: Archive/B2G_OS/Introduction +translation_of: Archive/B2G_OS/Introduction +--- +

Firefox OS (auch unter seinem Codenamen "Boot to Gecko" oder "B2G" bekannt) ist Mozillas Open Source Betriebssystem für mobile Endgeräte, das auf Linux und Mozillas Gecko-Technologie basiert. Firefox OS ist ein mobiles Betriebssystem, das ohne proprietäre Technologie auskommt und dennoch Anwendungsentwicklern eine leistungsstarke Plattform bietet, um hervorragende Produkte zu erstellen. Darüber hinaus ist es flexibel und leistungsfähig genug, um auch den Endprodukt-Nutzer glücklich zu machen.

+

Für Web-Entwickler ist es am Wichtigsten zu verstehen, dass die gesamte Benutzeroberfläche eine Web-Anwendung ist, von der aus sich andere Web-Anwendungen anzeigen und ausführen lassen. Jede deiner Veränderungen an der Benutzeroberfläche und jegliche Anwendung, die du für den Betrieb unter Firefox OS erstellst, sind Webseiten. Allerdings: Mit erweitertem Zugriff auf Hardware und Dienste des mobilen Endgeräts.

+

Wie man Firefox OS installiert, kannst du unserer Handy-Anleitung entnehmen.

+

Hardware-Voraussetzungen

+

Die Portierung von Firefox OS sollte für die meisten aktuellen Mobilgeräte mit ARM-Chips gelingen. Der vorliegende Abschnitt beschreibt die grundlegenden Hardware-Anforderungen sowie empfohlene Eigenschaften der Hardware.

+

 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KomponenteMinimumEmpfohlen
CPUARMv6Cortex A5 class oder besser
+ ARMv7a mit NEON
GPU—Adreno 200 class oder besser
Verbindungen—WiFi
+ 3G
Sensoren—Accelerometer
+ Proximity
+ Ambient light
+ A-GPS
+

Es wird außerdem empfohlen, dass die Geräte ein einheitliches Farbprofil anbieten sollen (was über den Treiber der Grafikeinheit zu implementieren wäre). Ebenso sollen sie das Stummstellen und die Wiedergabe-Funktion via Kopfhörer-Fernbedienung unterstützen. Beides sind gängige Fähigkeiten moderner Smartphones.

+

Hinweise zur Benutzung

+

Dieser Abschnitt bietet dir einige Hinweise zur Verwendung von Firfox OS. Dabei handelt es sich um eine Art Platzhalter, bis wir eine echte Benutzer-Dokumentation zur Verfügung haben.

+

Entsperren des Telefons

+

Falls dein aus dem Quellcode erstelltes Firefox OS mit der Frage nach einem Entsperr-Code hochfährt, so lautet dieser standardmäßig 0000. Das liegt daran, dass wir bei diesen Code-Versionen mit der Entwicklung und dem Testen des Sperr-Bildschirms (Lock-Screen) beschäftigt sind.

+

Erstellen eines Screenshots

+

Ein Screenshot lässt sich ganz einfach durch gleichzeitiges Drücken von Power- und Home-Taste erzeugen. Das entsprechende Bild wird unter /sdcard/screenshots auf deinem Gerät abgelegt. Du kannst darauf auch mit Hilfe der Galerie-App deines Telefons zugreifen.

+

Sollte das aus irgendeinem Grund nicht funktionieren, kannst du auch jederzeit über ein Terminal des Linux- oder MacOSX-Computers, auf dem ein Firefox OS installiert ist, darauf zugreifen.

+
    +
  1. Stell sicher, dass bei dir ffmpeg installiert ist. +
      +
    1. Wenn Du MacPorts verwendest, kannst du das auf dem Mac mit sudo port install ffmpeg nachholen. Mit homebrew verwende brew install ffmpeg.
      2. +
    2. Unter Linux (Ubuntu/Debian) verwende sudo apt-get install ffmpeg.
      3. +
    +
    2. +
  2. Schließe dein Telefon mit einem USB-Kabel an deinen Rechner an.
    3. +
  3. Erzeuge auf deinem Telefon die Situation, von der Du einen Screenshot willst.
    4. +
  4. Wechsle mit cd ins B2G/gaia Verzeichnis.
    5. +
  5. make screenshot
    6. +
  6. Du hast einen Screenshot namens screenshot.png erstellt.
    7. +
+

Tasten und Bedienelemente

+

Ein typisches Firefox OS-Gerät verfügt hardwareseitig nur über eine geringe Zahl physischer Bedienelemente:

+
+
+ Home-Taste
+
+ Diese Taste befindet sich im Allgemeinen mittig unterhalb des Bildschirms. Bei Tastendruck wird man zum App-Launcher zurückgeführt. Bei Halten der Taste wird die Ansicht zum Umschalten der Karten geöffnet: Hochwischen auf einer App entfernt diese.
+
+ Lautstärken-Wippe
+
+ Entlang der linken Seite befindet sich die Lautstärken-Wippe. Druck auf die obere Hälfte erhöht die Lautstärke, Druck auf die untere senkt sie.
+
+ Power-Taste
+
+ Die Power-Taste befindet sich an der oberen rechten Ecke des Geräts.
+
diff --git a/files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html b/files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html new file mode 100644 index 0000000000..4ba54a945b --- /dev/null +++ b/files/de/archive/b2g_os/phone_guide/alcatel_one_touch_fire/index.html @@ -0,0 +1,102 @@ +--- +title: Alcatel One Touch Fire +slug: Archive/B2G_OS/Phone_guide/Alcatel_One_Touch_Fire +tags: + - Alcatel One Touch Fire + - Firefox OS +translation_of: Archive/B2G_OS/Phone_guide/Alcatel_One_Touch_Fire +--- +
+
+ +
+

Das Alcatel One Touch Fire Smartphone mit Firefox OS verfügt über einen 1 GHz Prozessor und einer rückseitigen 3.2 Megapixel Kamera. Es wird von einer großen Vielzahl von Mobilfunkanbietern in verschiedenen Teilen der Welt angeboten.

+ +

Besorge dir ein Gerät

+ +

Das Alcatel One Touch Fire ist im allgemeinen Handel erhältlich.

+ +

Verfügbare Länder

+ +
+
+
    +
  • Brasilien
    • +
  • Chile
    • +
  • Kolumbien
    • +
  • Deutschland
    • +
  • Griechenland
    • +
  • Ungarn
    • +
  • Italien
    • +
+
+ +
+
    +
  • Mexico
    • +
  • Montenegro
    • +
  • Peru
    • +
  • Polen
    • +
  • Serbien
    • +
  • Venezuela
    • +
+
+
+ +

Mobilfunkanbieter

+ +
+
+
    +
  • Congstar
    • +
  • Cosmote
    • +
  • Movistar
    • +
  • T-Mobile
    • +
+
+ +
+
    +
  • Telcel
    • +
  • Telenor
    • +
  • TIM
    • +
  • Vivo
    • +
+
+
+
+
+ +

Software - Updates & Upgrades

+ +

Das Systemabbild des Gerätes ist durch den Mobilfunkanbieter gesperrt. Aus diesem Grund kann ein Update der Software nur durchgeführt werden wenn der Netzbetreiber ein OTA Update veröffentlicht.

+ +

Geräteeigenschaften

+ +

Mehr Geräteeigenschaften sind auf der Alcatel Website unter dem Reiter "Specification" aufgelistet.

+ + + +

Verfügbare Farben

+ + + +

Weitere Informationen

+ + diff --git a/files/de/archive/b2g_os/phone_guide/flame/index.html b/files/de/archive/b2g_os/phone_guide/flame/index.html new file mode 100644 index 0000000000..b8e75bb09a --- /dev/null +++ b/files/de/archive/b2g_os/phone_guide/flame/index.html @@ -0,0 +1,39 @@ +--- +title: Flame +slug: Archive/B2G_OS/Phone_guide/Flame +translation_of: Archive/B2G_OS/Phone_guide/Flame +--- +
+

A picture of the Flame device, showing the Firefox OS homescreen containing several app icons.Coming soon

+

The Flame developer reference phone is a milestone in Firefox OS device releases. The Flame hardware offers a representative set of specs — including FWVGA display and dual-core processor (see Phone and device specs for full specs) — to help developers build great content and experiences. A single hardware platform is also good for testers, making it easier to test and address specific software issues without having to worry about device model-specific bugs, etc.

+
+

If you have your phone in hand and want to start playing with it, developing and distributing apps, or contributing to the Firefox platform, the following links will get you where you need to go:

+ +

If you’d like to purchase a phone or find out more about using it, you’ll find the information you need below.

+

Purchasing a device

+

Our device manufacturer partner is making the device available for purchase in the latter part of Q2, 2014, retailing at approximately US$170, global shipping included. Available for pre-order soon!

+

Emergency download mode

+

When flashing a new build to your phone fails to work, your phone becomes unresponsive, and the phone cannot enter fastboot mode, you can use emergency download mode for recovery.

+

A USB cable and the Emergency Download Tool are required to enter emergency download mode. (Tool download coming soon.)

+

Recovery mode

+

You can enter recovery mode to clear your phone data or manually update the firmware. There are two ways to enter this mode:

+ +

When in recovery mode, press the Volume up/down keys to move the selection highlight, and the Power key to select. Make sure you have your phone data (Contacts, SMS, etc.) backed up before clearing data, and your upgrade packages downloaded before updating.

+

RAM adjustment

+

You can adjust the available RAM capacity to see how apps perform on Firefox OS phones with lower memory footprints.

+

This is accomplished by entering fastboot mode (install fastboot first, which is available in the same SDK page as ADB) and typing:

+
fastboot oem mem [0|256-1024]
+

“0” is the memory automatically detected and “256-1024” is the number of megabytes. For example, if you want to adjust device RAM capacity to 512M, enter fastboot oem mem 512.

+

You'll need to then reboot your device for the settings to take effect. This can be done using:

+
fastboot reboot
+

The current memory size can be returned by entering fastboot mode and typing:

+
fastboot getvar mem
+
diff --git a/files/de/archive/b2g_os/phone_guide/geeksphone/index.html b/files/de/archive/b2g_os/phone_guide/geeksphone/index.html new file mode 100644 index 0000000000..b9bc2572df --- /dev/null +++ b/files/de/archive/b2g_os/phone_guide/geeksphone/index.html @@ -0,0 +1,202 @@ +--- +title: Geeksphone +slug: Archive/B2G_OS/Phone_guide/Geeksphone +translation_of: Archive/B2G_OS/Phone_guide/Geeksphone +--- +
+

Developer Preview editions of the Firefox OS phone are now becoming widely available to the community, mainly through Geeksphone. Since these are for developers, naturally we want to encourage you to tinker and play with them as much as possible! In this article we cover some basic tips on how to keep your phone up to date and how to tweak the system Gaia applications.

+
+ +
+

Bitte beachten: Diese Anleitungen sind für die älteren Modelle Keon und Peak gedacht und nicht für das aktuellste Geeksphone Revolution.

+
+ +

Geeksphone auf das letzte Abbild upgraden

+ +

Firefox OS Updates können über die Settings App heruntergeladen werden. Die Funktionalität befindet sich unter Device Informationen. Das Smartphone kann so eingestellt werden, dass es auf neue Updates täglich, wöchentlich oder monatlich prüft. Zusätzlich besteht die Möglichkeit über den "check now" Button eine Aktualisierung durchzuführen. Sobald ein neues Update verfügbar ist wird dies angezeigt und der Download und die Installation der aktuellen Version kann beginnen.

+ +

The screen for checking updates on the Firefox OS settings app

+ +

Das Telefon flashen

+ +

Das Team von Geeksphone stellt die "latest stable" und die "nightly builds" als eigenständige Downloads zum selbstständigen flashen zur Verfügung.

+ +

Telefon und Computer vorbereiten

+ +

Bevor man mit dem flashen des Smartphone beginnen sollte, sollte man die Anleitung im Abschnitt  “Setting Up the Geeksphone Device” in Pushing Firefox OS Apps to the Geeksphone beachten und die dort beschriebenen Voraussetzungen schaffen. Diese stellt sicher, dass man Daten an das Telefon übertragen kann. Ebenfalls sollte man, die im gleichen Abschnitt beschriebene  Anleitung zur Installation der korrekten USB-Treiber beachten.

+ +
+

Bitte beachten: Es ist besonders wichtig, dass auf Windows Computer die korrekten Treiber installiert sind.

+
+ +

Die aktuellen Build befinden sich auf der Geeksphone Download-Seite. Auf dieser Seite erhält man nun die Option das korrekte Gerät und den gewünschten Build auszuwählen.

+ +

Two phone images side by side, the Geeksphone Keon and Peak, with different software download options below each one.

+ +

Lade nun den zu deinem Gerät passenden Build herunten und entpacke die Archive-Datei auf deine Festplatte. Das Archive beinhaltet das Abbild und die benötigten Befehle um das Gerät zu aktualisieren. Dabei stehen Befehle für Windows, Mac OS oder Linux zur Verfügung. Um das Gerät nun zu aktualisieren muss "Remote debugging" unter Einstellungen aktiviert sein.

+ +

Settings -> Device information -> More information -> Developer tab.

+ +
+

Bitte beachten: Stelle sicher dass dein Handy eine Akkuladung von mit 50% aufweist. Um die System-Dateien zu verändern Bedarf es mehrere Restarts, welche im Falle von fehlender Akkuleistung zu einer Beschädigung führen kann.

+
+ +

Enabling remote debugging on the Firefox OS Settings app

+ +
+

Bitte beachten: Sollte dein Gerät, obwohl es angesteckt ist, von den mitgelieferten Skripten in den ersten Schritten nicht erkannt werden, musst ggf. das Handy entsperren und warten bis das USB-Zeichen im System-Tray auftaucht.

+
+ +
+

Bitte beachten: Das Flashen des Smartphone wird all deine Daten vom Telefon entfernen. Wenn du deine Daten zuvor sichern möchtest, solltest du die folgende Anleitung befolgen: Back up the phone system partition.

+
+ +

Windows

+ +
+

Bitte Beachten: Es müssten möglicherweise USB-Treiber für Windows installiert werden. Eine Anleitung befindet sich in der folgenden Anleitung “Setting Up the Geeksphone Device” in Pushing Firefox OS Apps to the Geeksphone.

+
+ +

Öffne zuerst eine Konsole (Start > Tippe cmd in der Suchfeld > Enter drücken, Unter Windows 7, Windows Taste + X > Wähle Command Prompt unter Windows 8) und wechsel in das Verzeichnis wo sich die entpackten Daten befinden. Führe den folgenden Befehlt aus:

+ +
flash.bat
+
+ +

Dieser Befehl sollte nun das neue Abbild auf das Telefon flashen. Das Telefon muss nun nochmals erneut aufgesetzt werden, da ja wie zuvor beschrieben alle Daten gelöscht wurden.

+ +

Mac OS

+ +

Öffnen eines Terminals(Cmd + space -> type terminal -> enter) Fensters und wechsle mit cd in das Verzeichnis wo sich die entpackten Daten befinden. Führe den folgenden Befehlt aus:

+ +
./flash_mac.sh
+
+ +

Dieser Befehl sollte nun das neue Abbild auf das Telefon flashen. Das Telefon muss nun nochmals erneut aufgesetzt werden, da ja wie zuvor beschrieben alle Daten gelöscht wurden.

+ +

Linux

+ +

Um ein Keon unter Ubuntu zu fläschen müssten die folgenden Regeln in  /etc/udev/rules.d/51-android.rules hinzugefügt werden:

+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="05c6", ATTR{idProduct}=="8013", MODE="0666"
+ +
SUBSYSTEM=="usb", ATTR{idVendor}=="18d1", ATTR{idProduct}=="d00d", MODE="0666"
+ +
 
+ +

Öffne nun ein Terminal (control-alt-t unter Ubuntu) Fehnster und welche in das Verzeichnis wo sich die entapckten Daten befinden. Führe den folgenden Befehl aus:

+ +
./flash.sh
+
+ +

Dieser Befehl sollte nun das neue Abbild auf das Telefon flashen. Das Telefon muss nun nochmals erneut aufgesetzt werden, da ja wie zuvor beschrieben alle Daten gelöscht wurden.

+ +
+

Ein anderer Weg das Keon unter Ubuntu zu aktualisieren ist der folgende:-

+
+ +

Schritt 1: Das Gerät verbinden

+ +

Schritt 2: Ein Terminal öffnen

+ +

Schritt 3: Den Befehl  sudo nautilus eintippen und das Root-Passwort eingeben um den Root-Ordner zu öffnen

+ +
sudo nautilus
+ +
sudo nautilus "root password"
+ +

Schritt 4: Kopiere den Download des Firefox O.S Geeks Phone Builds in das Root-Verzeichnis

+ +

Schritt 5: Klicke auf die Datei mit dem Namen "flash.sh"

+ +
./flash.sh
+ +

 

+ +

If you have an 'unagi' or developer preview phone that is not a Geeksphone

+ +

If you have a developer phone that is not a Geeksphone such as an 'unagi' or a previously Android-based device, you may need to perform the following steps. If this is not you, please skip to the next section.

+ +

You will need to install adb and fastboot. These utilities can be found in the Android Developer Toolkit.

+ +

It is not necessary to install the entire toolkit. Download the toolkit from here and extract the contents. adb and fastboot are found in the /platform-tools/ folder. They can be copied to the /usr/bin of your Linux or Mac OS machine, or copied to another folder as long as that folder is added to your $PATH.

+ +

If you are attempting to flash your device and have another device plugged in via USB, your phone may not be detected by these utilities correctly. Only have your phone plugged in while trying to flash it.

+ +

Tweaking Gaia

+ +

If you are the industrious sort, you may want to tweak the default applications in Gaia — the UI in Firefox OS. In this section we will cover some of the basics for cloning Gaia and making changes to the default system apps. Bear in mind these tips are “at your own risk” and may involve you later referring to the section “Ok, I bricked my phone”. Before proceeding make sure that you have adb and fastboot installed on your system. To verify if these are installed open a terminal and type adb devices with your phone connected. You should see your phone listed under the attached devices.

+ +

You should also be able to run fastboot from the terminal. If you run fastboot, a set of parameter options should be displayed. If you do not have adb or fastboot installed, a quick Google search with your operating system will return several quick starts on how to install them. In addition to adb and fastboot you will need Git. If you do not currently have Git installed, have a look at this setup guide. Finally make sure your phone is set up for remote debugging as described in the previous section.

+ +

Once you have the prerequisites you can open a terminal and cd to the directory you would like to clone the Gaia source code to. Type the following commands:

+ +
git clone git://github.com/mozilla-b2g/gaia.git gaia
+cd gaia
+
+ +

This will clone the current Gaia code to your system.

+ +
+

If you plan on submitting changes back to the Gaia source, be sure to fork the source before cloning as described in Hacking Gaia.

+
+ +

Currently the Geeksphone Keon uses the v1.0.1 branch of Gaia code, so set the proper branch using the following command before you do anything else:

+ +
git checkout -b v1.0.1 origin/v1.0.1
+
+ +

Most of the system apps are located in the apps subdirectory of gaia. You can now make any changes to these Firefox OS apps you wish. Once you have made changes, make sure your device is mounted properly by first running:

+ +
adb remount
+ +

Next, run the following command to push the modified apps to your phone. This will by default push all the system apps to the phone:

+ +
B2G_SYSTEM_APPS=1 make install-gaia
+
+ +

If you only changed one of the apps you can specify the particular app using similar syntax. In this example only the calendar app will be pushed to the phone:

+ +
APP=calendar B2G_SYSTEM_APPS=1 make install-gaia
+
+ +

If you have issues while making the changes, you can reset the phone to default values using either of the following commands:

+ +
make production
+make reset-gaia
+
+ +
+

Note: Bear in mind that either of the above commands will clear any data or apps that you have pushed to the phone. If you want to back up your data and restore afterwards, you can follow the instructions at Back up the phone system partition.

+
+ +

"Ok, I bricked my phone"

+ +

If you are in the process of modifying your phone and it becomes “unresponsive” you should be able to recover it using fastboot with a simple procedure. The following illustrates resetting the Keon but other phones should have a similar process. You will also need to verify that you have fastboot and ADB installed (try typing fastboot and adb in the command line if you are not sure).

+ +
    +
  1. Remove the USB cable and then remove the battery from the phone for 30 seconds.
    2. +
  2. Reinsert the battery and hold down the volume up and power buttons at the same time, for a few seconds, until the system recovery menu appears.
    3. +
  3. Reconnect the USB cable
    4. +
  4. Type in the command run adb reboot bootloader.
    5. +
  5. When the phone reboots and starts to show the Geeskphone logo, you are now in fastboot mode; run the following commands from a terminal window in the directory that contains the latest img files described in the first section of this post:
    6. +
+ +
fastboot flash recovery recovery.img
+fastboot flash boot boot.img
+fastboot flash userdata userdata.img
+fastboot flash system system.img
+fastboot reboot
+
+ +

This process should recover your phone. If it doesn't seem to work, you may have to try it a second time.

+ +

Go play!

+ +

We hope these instructions are useful to you, and naturally we want you to be as happy about Firefox OS and the possibilities as we are! Feel free to play around with updating your devices, make changes/updates to Gaia apps, and also be inspired to build you own open web apps.

+ +

See also

+ + diff --git a/files/de/archive/b2g_os/phone_guide/index.html b/files/de/archive/b2g_os/phone_guide/index.html new file mode 100644 index 0000000000..472fcd195f --- /dev/null +++ b/files/de/archive/b2g_os/phone_guide/index.html @@ -0,0 +1,44 @@ +--- +title: Firefox OS developer phone guide +slug: Archive/B2G_OS/Phone_guide +tags: + - B2G + - Firefox OS + - NeedsTranslation + - Phones + - TopicStub +translation_of: Archive/B2G_OS/Phone_guide +--- +
+

This section contains developer information relevant to specific phones that run Firefox OS. We have general information available on Building and installing Firefox OS and Hacking Firefox OS, so please go there for information about building and installing the platform from scratch. Developers with specific phones in their possession may however find the following articles useful.

+
+

Specific device information

+
+
+ Firefox OS phone data
+
+ In this article we list the various available Firefox OS phones along with information such as their code names, availability, and specific hardware features.
+
+ Geeksphone
+
+ In this article we cover some basic tips on how to keep your Geeksphone up-to-date and how to tweak the system Gaia applications.
+
+ The Firefox OS ZTE OPEN
+
+ This article exists to share the information we have available on the ZTE OPEN Firefox OS device.
+
+

General Firefox OS information

+
+
+ General device features
+
+ This page lists typical Firefox OS hardware features and minimum hardware requirements.
+
+ Troubleshooting
+
+ This article provides tips for resolving common problems you may have while using Firefox OS.
+
+ Best practices for open reference devices
+
+ A set of best practices that we believe should come highly recommended for any widely available open reference devices. All of the recent Firefox OS reference devices have followed these practices.
+
diff --git a/files/de/archive/b2g_os/phone_guide/phone_specs/index.html b/files/de/archive/b2g_os/phone_guide/phone_specs/index.html new file mode 100644 index 0000000000..8cf863e090 --- /dev/null +++ b/files/de/archive/b2g_os/phone_guide/phone_specs/index.html @@ -0,0 +1,800 @@ +--- +title: Firefox OS Geräte und Spezifikationen +slug: Archive/B2G_OS/Phone_guide/Phone_specs +tags: + - Firefox OS + - Gerät + - Handy + - Smartphone +translation_of: Archive/B2G_OS/Phone_guide/Phone_specs +--- +
+

Dieser Artikel enthält Informationen über Firefox OS Geräte und deren Spezifikationen, Code-Namen, standardmäßig installierten FIrefox OS Versionen und mehr.

+
+ +

Verfügbare Firefox OS Smartphones

+ +

Die folgende Tabelle enthält Informationen zu den verfügbaren und ehemals verfügbaren Firefox OS Smartphones.

+ +
+

Hinweis: Nähere Informationen zu den verfügbaren Firefox OS Smartphones und die Länder, in denen sie verfügbar sind, findest Du auf Firefox OS devices.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Name / Code-Name

+ 		+

Datum der Veröffentlichung

+ 		FxOS
+ version		VerfügbarkeitWeitere Informationen
+

Alcatel One Touch Fire

+ +

hamachi, buri

+ 		12. Juli 20131.0.1Zur Zeit verfügbarVerfügbar in Brasilien, Uruguay, Italien, Deutschland, Griechenland, Serbien, Ungarn und Polen.
+ Erhältlich auf eBay.
Alcatel One Touch Fire E18. Juli 20141.3.0Zur Zeit verfügbarVerfügbar in Tschechien, Deutschland, Ungarn, Polen, Russland.
otoro, unagi, inari   nicht erhältliche ZTE Entwicklermodelle, Vorgänger des ZTE Open.
+

ZTE Open

+ +

ikura

+ 		2. Juli 20131.0.1Zur Zeit verfügbarBaugleich mit inari, erhältlich auf eBay.
+

LG Fireweb

+ +

leo

+ 		24. Oktober 20131.1Zur Zeit verfügbarVerfügbar in Brasilien.
+

Geeksphone Keon

+ +

keon

+ 		24. April 20131.0.1 +

Zur Zeit nicht verfügbar

+ 		Nur für Entwickler
+

Geeksphone Peak

+ +

peak

+ 		24. April 20131.0.1Zur Zeit nicht verfügbarehemaliger Code-Name "twist", nur für Entwickler
Geeksphone Peak+---gestoppt
Geeksphone Revolution4. März 20141.3preZur Zeit verfügbarOnline erhältlich
+

LG Google Nexus 4

+ +

nexus-4

+ 		   Test-Gerät. Weder von LG noch von Google unterstützt. Nicht mehr unterstützte Hardware.
+

Flame

+ +

Mozillas Referenz-Gerät

+ 		April 20141.3  +

Auf Vorbestellung erhältlich

+ +

Ausverkauft seit Dezember 2014

+
+

Spreadtrum

+ +

tarako

+ 		Ende Q2 2014? Demnächst verfügbar 
ZTE Open C13. Mai 20141.3Zur Zeit verfügbarOnline erhältlich
Symphony GoFox F1516. September 20141.4Zur Zeit verfügbarNur in Bangladesch erhältlich bei Grameenphone Vertriebspartnern
Intex Cloud Fx 1.3 Nicht mehr verfügbar 
Spice Fire One (Mi-FX1) 1.3 Nicht mehr verfügbar 
Alcatel OneTouch Fire C 4020D1. Oktober 20141.3 Nicht mehr verfügbar 
Zen U105 Fire16. Oktober 20141.3 Zur Zeit verfügbarErhältlich auf Homeshop18, Indien
Cherry Mobile AceNovember 20141.3TZur Zeit verfügbarErhältlich auf den Philippinen.
Fx0Dezember 20142.0Zur Zeit verfügbarErhältlich in Japan (KDDI.)
Orange Klif20152.0Zur Zeit verfügbarErhältlich in vielen afrikanischen Ländern.
ZTE Open C220152.1Zur Zeit verfügbarOnline erhältlich
+ +

Firefox OS Versionen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Version +

Feature Complete (FC) Datum

+ 		Release To Partner
+ (RTP) Datum		CodenameGecko VersionEnthaltene Security FixesRelease Infos
1.022. Dezember 201221. Februar 2013TEFGecko 18Gecko 18 
1.0.115. Januar 20136. September 2013ShiraGecko 18Gecko 20Entwickler
+ Anwender
1.129. März 20139. Oktober 2013LeoGecko 18+ (new APIs)Gecko 23Entwickler
+ Anwender
1.1.1 TBDHDWie 1.1.0 mit WVGAGecko 23 
1.215. September 20139. Dezember 2013KoiGecko 26[39]Gecko 26Entwickler
+ Anwender
1.39. December 2013TBD Gecko 28Gecko 28Entwickler
+ Anwender
1.417. März 2014TBD Gecko 30Gecko 30Entwickler
+ Anwender (TBD)
2.0TBDTBD Gecko 32Gecko 32Entwickler
+ Anwender (TBD)
2.1Januar 2015?TBD Gecko 34Gecko 34Entwickler
2.2Juni 2015TBD Gecko 37Gecko 37Entwickler
2.5November 2015TBD TBDTBD 
+ +

Geräte-Spezifikationen

+ +

Bitte beachte, dass wir in einigen Fällen bereits vor öffentlicher Verfügbarkeit eines angekündigten Gerätes dessen Code-Namen und einige seiner Eigenschaften hier veröffentlichen. Bitte FÜGE KEINE zusätzlichen Informationen zu diesen Geräten hinzu bevor Andreas Gal oder jemand vergleichbares diese Informationen veröffentlicht hat. Im Zweifelsfall wende Dich bitte an den Firefox OS Program Manager.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameVersionenAuflösungDisplay (Inches)CPUKamera(s), MpxRAMROMSpeicherBatterie (mAh)
+

Alcatel One Touch Fire

+ +

hamachi, buri

+ 		v1.0.1/v1.1 +

320 x 480
+ PX=1

+ 		3.5Qualcomm Snapdragon S1 MSM7227A 1 GHzRückseite: 3.2256MB512MB/data: wahrscheinlich identisch mit inari; laut Hersteller 160MB Speicher für Anwendungen;
+ Wahrscheinlich kein interner DeviceStorage, MicroSD Karte (max. 32GB) benötigt
+  		1400
Alcatel One Touch Fire Ev1.3.0540 x 9604.5Qualcomm Snapdragon 200
+ MSM8210
+ 1.2 GHz
+ dual-core		Rückseite: 5.0512MB   
+

ZTE Open / variants

+ +

ikura

+ 		v1.0.1 (as shipped)320 x 480
+ PX=1		3.5Qualcomm Snapdragon S1 MSM7225A 800 MHzRückseite: 3.2256MB512MB +

/data: 152M
+ Kein interner DeviceStorage, MicroSD Karte benötigt

+ 		1200
+

LG Fireweb

+ +

leo

+ 		v1.1320 x 480
+ PX=1		4Qualcomm  Snapdragon S1 MSM7227A 1 GHzRückseite: 5.0512MB4GB +

/data: 1007.90M
+ interner DeviceStorage: ja, Größe ungewiss, möglicherweise 3.7G, könnte aber auch eine falsche Berechnung sein. Der Wert von /sys/devices/platform/msm_sdcc.3/mmc_host/mmc0/mmc0:0001/block/mmcblk0/block ist 7733248, bei einer angenommenen Blockgröße von 512 byte kommen wir auf 3.7G.

+ 		1540
+

Geeksphone Keon

+ +

keon

+ 		+

v1.0.1 - nightly
+ downloads here

+ 		320 x 480
+ PX=1		3.5Qualcomm Snapdragon S1 7225AB 1 GHzRückseite: 3.0512MB4GB +

/data: 1.5G
+ interner DeviceStorage: 1023.4M

+ 		1580
+

Geeksphone Peak

+ +

peak

+ 		v1.0.1 - nightly
+ downloads here		540 x 960
+ PX=1.5		4.3Qualcomm Snapdragon S4 8225 1.2 GHz dual-core +

Frontseite: 2.0
+ Rückseite: 8.0

+ 		512MB4GB/data: 1.5G
+ interner DeviceStorage: 1023.4M		1800
Geeksphone Revolutionv1.3pre (as shipped)540 x 960 PX=1.54.7Dual-core Intel® Atom™ processor Z2560 with up to 1.6GHz +

Frontseite: 1.3 Rückseite: 8.0

+ 		1GB4GB +

/data: 2G
+ interner DeviceStorage: 2.5GB

+ 		2000
+

Nexus 4

+ +

nexus-4

+ 		v1.3 - nightly768 x 1280
+ 720p		4.7 +

Qualcomm
+ Snapdragon S4 Pro
+ 1.5 GHz quad-core

+ 		Rückseite: 8.02GB8 or 16GBHier wird alles in einem ziemlich undurchsichtigen Bereich gespeichert, es gibt keinen externen Speicher (MicroSD).  Die Größe des Bereichs variiert je nach dem, welches Nexus 4 Modell Du hast.2100
+

Foxconn InFocus

+ +

flatfish

+ 		 1280 x 80010Allwinner A31, Cortex A7 Quad-Core 1.0 GHz +

Frontseite: 2.0
+ Rückseite: 5.0

+ 		2GB16GB 7000
+

some phone thing

+ +

fugu

+ 		v1.2f (branch) per320 x 480   256MB   
+

Spreadtrum SC6821

+ +

tarako

+ 		v1.3 perHVGA
+ 320 x 480		3.5Spreadtrum SC6821, Cortex A5 1GHz0.3 (nur Rückseite?)128MB (zram)2GB NAND flash (external) + 1GB LPDDR1 (embedded)32GB micro SD card1100
+

VIA Vixen

+ +

community-driven customization of flatfish?

+ 		 1024 x 6007Cortex-A9 Dual Core 1.2 GHz +

Frontseite: 0.3 Rückseite: 2.0

+ 		1GB8GB  
+

Flame

+ +

Mozillas Referenz-Gerät

+ 		v1.3 +

FWVGA
+ 854 × 480
+ PX=1.5
+  

+ 		4.5 capacitive touch +

Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processor

+ 		+

Frontseite: 2.0
+ Rückseite: 5.0 Auto-Fokus und Blitz
+  

+ 		256MB–1GB (adjustable by developer)8GB32GB micro SD card (USB 2.0)1800
ZTE Open Cv1.3800 x 4804Qualcomm Snapdragon 200 MSM8210, 1.2GHZ Dual core processorRückseite: 3.0512MB4GB +

/data: 1G

+ 		1400
Symphony GoFox F15v1.4320 x 480
+ PX=?		3.5Spreadtrum 1 GHz Single Core ProcessorFrontseite: 0.3
+ Rückseite: 3.2 mit Blitz		512MB512MB 1450
Intex Cloud FxV 1.3320 x 4803.5Spreadtrum 1 GHzRückseite: 2.0 ohne Blitz128 MB256MB +

Data : 2G

+ +

Interner Speicher: 46 MB (User Memory)

+ +

Externer Speicher (Micro SD Card): max. 4GB

+ 		1250
Spice Fire One (Mi-FX1)V 1.3320 x 4803.5Spreadtrum 1 GHz +

Frontseite: VGA

+ +

Rückseite: 1.3

+ 		128 MB512MB +

Data : 2G

+ +

Interner Speicher: 67.9 MB (User Memory)

+ +

Externer Speicher (Micro SD Card): max. 4GB

+ 		1400
Alcatel OneTouch Fire C 4020DV 1.3320 x 4803.5Spreadtrum 1 GHz 128 MB256MB +

Data : 2G

+ +

Interner Speicher : 65 MB (User Memory)

+ +

Externer Speicher (Micro SD Card): max. 32GB

+ 		1000
Zen U105 FireV 1.3320 x 4803.5Spreadtrum 1 GHz +

Frontseite: VGA

+ Rückseite: 2.0		128 MB256MB +

Data : 2G

+ +

Externer Speicher (Micro SD Card): max. 16GB

+ 		1200
Fx0V 2.01280 x 7204.7Qualcomm Snapdragon S4 MSM8926 1.2GHz quad-core +

Frontseite: 8.0

+ +

Rückseite: 2.1

+ 		1.5 GB16GBmicroSDXC Karte: max. 64GB2370
Orange KlifV 2.0480 x 3203.5MediaTek dual-core 1Ghz MT6572MRückseite: 2.0256MB512MBTBC1300
ZTE Open C 2V 2.1WVGA4.0Spreadturn  SC7715 1GBRückseite: 2.0512MB4GBExterner Speicher (Micro SD Card): max. 32GB1400
+ +

Anmerkungen zu den Spalten:

+ + diff --git a/files/de/archive/b2g_os/phone_guide/zte_open_c/index.html b/files/de/archive/b2g_os/phone_guide/zte_open_c/index.html new file mode 100644 index 0000000000..7b74fddbf2 --- /dev/null +++ b/files/de/archive/b2g_os/phone_guide/zte_open_c/index.html @@ -0,0 +1,82 @@ +--- +title: ZTE OPEN C +slug: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +tags: + - Update + - Upgrade + - ZTE Open C + - reagiert nicht mehr +translation_of: Archive/B2G_OS/Phone_guide/ZTE_OPEN_C +--- +
+

Das ZTE Open C Firefox OS Handy ist ein fortgeschrittenes Firefox OS Gerät von ZTE das über bessere Hardware verfügt, die unter anderem eine 3MP Kamera und einen 4-inch WVGA Display umfasst und bei dem Firefox OS 1.3 vorinstalliert ist. Dieser Artikel enthält Informationen über das Gerät, darunter Anleitungen zum Updaten und zur Fehlerbeseitigung.

+
+
+

Bitte Beachten: Diese Anleitungen sind nicht für das ZTE Open. Wenn Sie ein ZTE Open haben, sollten Sie stattdessen zu unterer ZTE Open Seite gehen.

+
+
+

Bitte beachten: Das Upgrade-Programm welches Sie benötigen, um das Handy zu entsprechen (s.u.) ist derzeit nur für Windows erhältlich. Kaufen Sie das Handy nicht, wenn Sie nicht über ein Windows-System verfügen und trotzdem selbst Ihre eigenen Versionen von Firefox OS installieren wollen.

+
+

Das ZTE Open C ist das erste Handy mit dem jüngsten update für Firefox OS. Es bietet viele neue Funktionen, darunter den Direktzugriff auf den Musikplayer vom Sperrbildschirm oder dem Benachrichtigungsfeld aus und Bluetooth sharing, mit dem dem Sie mehrere Dateien gleichzeitig übertragen können. Nutzer können jetzt schneller durch die Menüs navigieren mithilfe von intelligenten Ordnern, die automatisch Apps oder die Suche nach Apps nach Kategorien ordnen mit verbesserter Geschwindigkeit beim Scrollen und einem schnelleren Start von Systen-Apps wie Kalender, Addressbuch und Kamera.

+

Der Kauf eines Geräts

+

Das Gerät kostet US$99.99, es ist bei eBay erhältlich:

+ +
+

Bitte beachten: Sie erhalten das Gerät ohne dass irgendwelche Netzwerk-spezifischen Apps oder Dienste installert wären. Es handelt sich um eine entsperrte, global erhältliche Variante, die für early Adopters gedacht ist.

+
+

Einzelheiten zum Handy

+

Siehe Phone and device specs.

+

Wie Sie Firefox OS upgraden

+

Der einfachste Weg, um die Software Ihres Open C upzugraden ist es, die Dateien von der ZTE-Webseite zu verwenden. Um die richtige Datei zu finden, gehen Sie zu ZTE's Software support page, wählen Sie Ihre Region aus der Liste auf der linken Seite, wählen Sie Smart Phones in der mittleren Liste und Open C(European Standard) bzw. Open C(American Standard), je nachdem, wo Sie das Gerät gekauft haben. Klicken Sie dann auf Selected um zu Ihrer Download-Seite zu gelangen.

+

Sobald Ihr Download beendet ist, finden Sie ein PDF in der ZIP-Datei, das Ihnen erklärt, wie das Upgrade zu installieren ist.

+

"Manuelle" Updates

+

Wenn Sie selbst Gecko oder Gaia updaten wollen, ist der Vorgang etwas verzwickter, weil das Handy standardmäßig gesperrt ist und Sie keinen Root-Zugang haben. Um das Gerät zu entsperren, können Sie folgendes Programm von comebuy.com benutzen:Open_C_upgrade_Tool. Durch die Installation dieses Programms wird die Fimware Ihres Geräts so verändert, dass der Root-Zugang Fastboot aktiviert werden und Sie die Möglichkeit haben, Ihr Telefon mit neuen Softwarekomponenten zu flashen.

+
+

Bitte beachten: Dieses Upgrade-Programm ist derzeit nur für Windows verfügbar.

+
+

Gecko und Gaia upgraden

+

Sobald Sie Fastboot aktiviert haben, können Sie neue Firefox OS/B2G Gecko und Gaia Komponenten erstellen und installieren: build and install new Firefox OS/B2G.

+
    +
  1. Beginnen Sie mit folgender Anleitung: build prerequisite, wobei Sie das Open C zum Zwecke der Konfiguration wie ein Flame behandeln: Beide, Flame und Open C basieren auf dem Android Jellybean Basissystem.
    2. +
  2. Während der Konfiguration müssen Sie ein sog. "Custom Manifest File" für das Open C referenzieren. Laden Sie den Anhang zur Fehlermeldung auf folgender Seite herunter: Download the attachment on this bug und speichern Sie ihn an einem Ort auf ihrem Computer, den Sie leicht wiederfinden unter dem Dateinamen openc.xml.
    3. +
  3. Räumen Sie das B2G Verzeichnis auf und löschen Sie nicht benötigte Unterverzeichnisse:
    + 
    rm -rf objdir-gecko/ out/ backup-flame/
    +
    4. +
  4. Konfigurieren Sie jetzt Firefox OS mit dem nachfolgenden Befehl:
    + 
    ./config.sh flame /PATH/TO/openc.xml
    +
    5. +
  5. Sie können jetzt die Gecko Komponenten mit den nachfolgenden Befehlen bauen und auf Ihr Gerät flashen: + 
    ./build.sh gecko
+./flash.sh gecko
    +
    6. +
  6. Jetzt sollten Sie auch Gaia upgraden, damit die upgegradete Version von Gecko mit der Gaia-Version auf Ihrem Gerät zusammenarbeietet: + 
    cd gaia
+make reset-gaia
    +
    7. +
+
+

Achtung: Der Versuch, ein Image für das Flame auf Ihr Gerät zu flashen würde dieses unbrauchbar machen, weswegen hiervon abgeraten wird.

+
+

Gaia upgraden

+

Wenn Sie nur ein Update von Gaia und nicht auch von Gecko durchführen wollen, müssen Sie zunächst das Gaia Repo auf Github forken und klonen und das Ergebnis auf Ihr Gerät flashen.

+
    +
  1. Stellen Sie sicher dass ADB installiert ist.
    2. +
  2. Gehen Sie zu https://github.com/mozilla-b2g/gaia, klicken Sie dann auf den "fork" button in der oben rechten Ecke um in Ihr eigenes Repo zu forken.
    3. +
  3. Klonen Sie den Code von ihrem geforkten Repo auf Ihren eigenen Rechner, indem Sie folgenden Befehl ausführen: + 
    git clone https://github.com/your-github-username/gaia.git
    +
    4. +
  4. Wechseln Sie in das hierdurch erstellte Verzeichnis.
    5. +
  5. Schalten Sie auf ihrem Gerät remote debugging ein (wählen Sie die ADB und Devtools option).
    6. +
  6. Verbinden Sie jetzt Ihr Handy per USB mit Ihrem Computer, stellen Sie sicher, dass das Gerät erkannt wird, indem Sie den Befehl adb devices im terminal eingeben.
    7. +
  7. Führen Sie folgenden Befehl aus, um Ihr Handy neu zu starten und es mit dem neuesten Gaia Sourcecode upzudaten + 
    make reset-gaia
    +
    8. +
+

Mein Handy reagiert nicht mehr

+

Wenn Ihr Gerät nicht mehr reagiert, ist es unter Umständen möglich, es mit der unter  ZTE Open C user manual auf der Webseite von ZTE verfügbaren Anleitung und der  Anleitung auf dieser Seite wieder zum  Leben zu erwecken.

+

Weitere Informationen sind unter Umständen hier: reference this support entry verfügbar.

diff --git a/files/de/archive/b2g_os/platform/app_architektur/index.html b/files/de/archive/b2g_os/platform/app_architektur/index.html new file mode 100644 index 0000000000..315efb5b4e --- /dev/null +++ b/files/de/archive/b2g_os/platform/app_architektur/index.html @@ -0,0 +1,29 @@ +--- +title: Firefox OS App-Architektur +slug: Archive/B2G_OS/Platform/App_Architektur +tags: + - Anleitung + - Apps + - B2G + - Firefox OS +translation_of: Archive/B2G_OS/Platform/Apps_architecture +--- +
+

Dieser Artikel beschreibt die Details, wie Apps in Firefox OS gestartet und verwaltet werden. Diese Informationen sind hilfreich sowohl für Firefox OS-Plattformentwickler als auch für Gruppen, die das Betriebssystem auf neue Hardware portieren. Als App-Entwickler benötigt man diesen Artikel nicht unbedingt, aber er könnte trotzdem interessant sein.

+
+

Der App-Startprozess

+

Wenn der Nutzer eine App, die er starten möchte, auswählt oder eine App auf andere Weise gestartet werden soll, startet die  Home-Screen-App, indem sie sich eine App-Referenz von der {{domxref("App")}}-API holt  und dann die Methode {{domxref("App.launch()")}} aufruft, um die App zu starten.

+

Gecko empfängt diese Anforderung und sendet das {{domxref("mozChromeEvent")}} mit den App-Details zur System-App. Die System-App verarbeitet dieses Ereignis, indem sie ein neues {{HTMLElement("iframe")}}-Element in den DOM-Baum einfügt und die App in dieses neue {{HTMLElement("iframe")}}-Element lädt. Dieser Rahmen ist dann die Heimat der App, bis sie beendet wird.

+

Jede App benötigt ein Manifest, das sie beschreibt, und hat eine spezielle Dateihierarchie im Paket. Details stehen im Artikel App manifest.

+

Kommunikation mit Gecko

+

Die Kommunikation zwischen Gecko und Gaia's System-App passiert über {{domxref("mozChromeEvent")}} und {{domxref("mozContentEvent")}}. mozChromeEvents werden von Chrome zum Inhalt und mozContentEvents vom Inhalt zu Chrome gesendet. Diese Kommunikation wird benutzt, um die Erzeugung und das Schließen der vertrauten Benutzeroberfläche zu steuern und die benötigten Funktionen für Benachrichtigungen und andere Aufgaben bereitzustellen, dazu gehört auch, der System-App mitzuteilen, dass eine App gestartet werden soll.

+
+

Anmerkung: Mehr dazu, wie diese Ereignisse funktionieren, findet man in der System-App-Dokumentation. Eine andere Quelle, wie man die Ereignisse benutzt, findet man im Quellcode in {{source("b2g/chrome/content/shell.js")}}.

+
+

See also

+ diff --git a/files/de/archive/b2g_os/platform/architektur/index.html b/files/de/archive/b2g_os/platform/architektur/index.html new file mode 100644 index 0000000000..c438e89c9f --- /dev/null +++ b/files/de/archive/b2g_os/platform/architektur/index.html @@ -0,0 +1,740 @@ +--- +title: Firefox OS Architektur +slug: Archive/B2G_OS/Platform/Architektur +translation_of: Archive/B2G_OS/Architecture +--- +
+

Dieser Artikel gibt eine Übersicht über die Architektur der Firefox OS Plattform und beschreibt die grundlegenden Konzepte und wie die einzelnen Komponenten prinzipiell zusammen arbeiten.

+
+ +
+

Hinweis: Bitte denke daran, dass Firefox OS noch nicht veröffentlicht ist. Die hier beschriebene Architektur ist möglicherweise noch nicht endgültig und es können sich noch ein paar Dinge ändern.

+
+ +

Firefox OS Begriffserklärungen

+ +

Einige Begriffe solltest Du kennen, bevor Du die Dokumentation von Firefox OS liest.

+ +
+
B2G
+
Kurzform von "Boot to Gecko"
+
Boot to Gecko
+
Der interne Code-Name für das Firefox OS Betriebssystem. Du wirst diesen Begriff häufig als Synonym für Firefox OX finden, weil dieser Code-Name schon lange genutzt wurde bevor das Projekt einen offiziellen Namen hatte.
+
Firefox OS
+
Firefox OS stellt im Grunde das Mozilla Branding (und das von OEM Partnern) und verschiedene Support-Programme über der Boot to Gecko Ebene bereit, um aus den einzelnen Komponenten ein marktfähiges Produkt zu machen.
+
Gaia
+
Das ist die Benutzeroberfläche (User Interface) der Firefox OS Plattform. Alles, was nach dem Start von Firefox OS auf dem Bildschirm zu sehen ist wird von der Gaia Schicht erzeugt. Gaia implementiert den Sperrbildschirm, die Startseite und alle Apps, die man von einem modernen Smartphone erwartet. Die Gaia Schicht wurde vollständig in HTML, CSS und JavaScript geschrieben. Gaia kommuniziert mit dem darunter liegenden Betriebssystem ausschließlich über offene Web APIs, die durch Gecko bereit gestellt werden. Anwendungen von Drittanbietern können neben Gaia installiert werden.
+
Gecko
+
Gecko ist die Laufzeitumgebung von Firefox OS. Diese Schicht stellt alles zur Verfügung, was für die drei offenen Standards HTML, CSS und JavaScript benötigt wird. Gecko stellt sicher, dass diese APIs auf jedem von Gecko unterstützten Betriebssystem gut funktionieren. Zu diesem Zweck beinhaltet Gecko unter anderem Netzwerk-, Grafik- und Layoutstacks sowie eine Virtuelle Maschine für JavaScript und Schichten für die Portierung.
+
Gonk
+
Gonk ist eine tiefer liegende Schicht des Firefox OS Betriebsystems, bestehend aus dem Linux Kernel (basierend auf dem Android Open Source Project (AOSP)) und der Hardware-Abstraktionsschicht (hardware abstraction layer, HAL). Der Linux Kernel und einige der Anwendungs-Bibliotheken sind allgemeine Open Source Projekte: Linux, libusb, bluez und andere. Einige Pakete des HAL sind Gemeinschafts-Projekte mit AOSP: GPS, Kamera und andere. Man könnte sagen, Gonk ist eine sehr einfache Linux Distribution. Gonk ist ein Port von Gecko. Das heißt, es gibt einen Port von Gecko zu Gonk, so wie es Ports von Gecko zu Mac OS X, Windows und Android gibt. Seit das Firefox OS Projekt die alleinige Kontrolle über Gonk hat können wir Schnittstellen zu Gecko entwickeln, die auf anderen Betriebssystemen nicht möglich sind. Zum Beispiel hat Gecko auf Gonk direkten Zugriff zur gesamten Telefonie-Einheit und zum Display Frame Buffer. Auf anderen Betriebssystemen ist dies nicht möglich.
+
Jank
+
Dieser im Bereich der mobilen Web Apps häufig genutzte Begriff bezeichnet den Effekt von langsamem und ineffizientem Code in einer App, wodurch die Aktualisierung der Benutzeroberfläche blockiert wird und diese nur noch langsam oder überhaupt nicht mehr reagiert. Unsere Gaia Entwickler nutzen verschiedene Optimierungs-Techniken, um diese Probleme unter allen Umständen zu verhindern.
+
+ +

Overall architecture

+ +

The following figure compares architectures between proprietary platforms and Firefox OS.

+ +

on the left is a native mobile architecture stack, on the right is the Firefox OS architecture. they are similarm except that the native stack is all proprietary device functionality, and the Firefox OS stack is all done with open source and web technologies.

+ +

Firefox OS eliminates the native API layer between the operating system and application layers. This integrated design reduces platform overhead and simplifies security without sacrificing performance or a rich user smart phone experience.

+ +
    +
  1. Gaia is the core web apps of the device, and user interface layer, all written in HTML5, CSS and JavaScript, with a number of exposed APIs to allow the UI code to interact with the phone hardware and Gecko functionality.
    2. +
  2. Gecko is the web engine and presentation layer in Firefox OS that connects hardware to HTML by serving as the interface between web content and the underlying device. Gecko provides an HTML5 parsing and rendering engine, programmatic access to hardware functionality via secure web APIs, a comprehensive security framework, update management, and other core services.
    3. +
  3. Gonk is the kernel-level component in the Firefox OS stack that serves as the interface between Gecko and the underlying hardware. Gonk controls the underlying hardware and exposes hardware capabilities to Web APIs implemented in Gecko. Gonk can be seen as the “black box” that does all the complex, detailed work behind the scenes to control the mobile device by enacting requests at the hardware level.
    4. +
  4. The mobile device is the mobile phone hardware running Firefox OS. The OEM (Original Equipment Manifacturer) is responsible for providing the mobile device.
    5. +
+ +

Specific Firefox OS architecture

+ +

Firefox OS Architecture

+ +

Firefox OS bootup procedure

+ +

This section describes the process by which Firefox OS devices boot, what parts are involved, and where. As a quick reference, the general system bootup flow goes from bootloaders in the Kernel space, to init in the native code, to B2G and then Gecko in the user space, and then finally to the system app, window manager, then homescreen app inside Gecko. This is what all other apps are executed on top of.

+ +

+ +

The bootstrapping process

+ +

When a Firefox OS device is first turned on, execution begins in the primary bootloader. From there, the process of loading the main operating system proceeds in the typical way; a succession of increasingly higher-level bootloaders bootstrap the next loader in the chain. At the end of the process, execution is handed off to the Linux kernel.

+ +

There are a few points worth noting about the boot process:

+ + + +

The Linux kernel

+ +

The Linux kernel(s) used by Gonk is very similar to the upstream Linux from which it's derived (based on the Android Open Source Project). There are a few changes made by the AOSP that have not yet been upstreamed. In addition, vendors sometimes modify the kernel and upstream those changes on their own schedule. In general, though, the Linux kernel is close to stock.

+ +

The startup process for Linux is well-documented elsewhere on the Internet, so this article won't cover that.

+ +

The Linux Kernel will bring up devices and run essential processes. It will execute processes defined in init.rc and the successor init.b2g.rc to boot essential process such as b2g (FirefoxOS basic process, containing Gecko) and rild (telephony related process that might proprietary by different chipsets) — see below for more details. At the end of the process, a userspace init process is launched, as it is in most UNIX-like operating systems.

+ +

Once the init process is launched, the Linux kernel handles system calls from userspace, and interrupts and the like from hardware devices. Many hardware features are exposed to userspace through sysfs. For example, here's a code snippet that reads the battery state in Gecko:

+ +
FILE *capacityFile = fopen("/sys/class/power_supply/battery/capacity", "r");
+double capacity = dom::battery::kDefaultLevel * 100;
+if (capacityFile) {
+  fscanf(capacityFile, "%lf", &capacity);
+  fclose(capacityFile);
+}
+ +

More on the init process

+ +

The init process in Gonk handles mounting the required file systems and spawns system services. After that, it stays around to serve as a process manager. This is quite similar to init on other UNIX-like operating systems. It interprets scripts (that is, the init*.rc files) that consist of commands describing what should be done to start various services. The Firefox OS init.rc is typically the stock Android init.rc for that device patched to include the things required to kick-start Firefox OS, and varies from device to device.

+ +

One key task the init process handles is starting up the b2g process; this is the core of the Firefox OS operating system.

+ +

The code in init.rc that starts this up looks like this:

+ +
service b2g /system/bin/b2g.sh
+  class main
+  onrestart restart media
+ +
+

Note: Exactly how much init.rc differs from the Android version varies from device to device; sometimes, init.b2g.rc is simply appended, and sometimes the patches are more significant.

+
+ +

The userspace process architecture

+ +

Now it's useful to take a high-level look at how the various components of Firefox OS fit together and interact with one another. This diagram shows the primary userspace processes in Firefox OS.

+ +

Userspace diagram

+ +
+

Note: Keep in mind that since Firefox OS is under active development, this diagram is subject to change, and may not be entirely accurate.

+
+ +

The b2g process is the primary system process. It runs with high privileges; it has access to most hardware devices. b2g communicates with the modem, draws to the display framebuffer, and talks to GPS, cameras, and other hardware features. Internally, b2g runs the Gecko layer (implemented by libxul.so). See Gecko for details on how the Gecko layer works, and how b2g communicates with it.

+ +

b2g

+ +

The b2g process may, in turn, spawn a number of low-rights content processes. These processes are where web applications and other web content are loaded. These processes communicate with the main Gecko server process through IPDL, a message-passing system.

+ +

The b2g process runs libxul, which references b2g/app/b2g.js to get default preferences. From the preferences it will open the described HTML file b2g/chrome/content/shell.html, which is compiled within the omni.ja file. shell.html includes b2g/chrome/content/shell.js file, which triggers the Gaia system app.

+ +

rild

+ +

The rild process is the interface to the modem processor. rild is the daemon that implements the Radio Interface Layer (RIL). It's a proprietary piece of code that's implemented by the hardware vendor to talk to their modem hardware. rild makes it possible for client code to connect to a UNIX-domain socket to which it binds. It's started up by code like this in the init script:

+ +
service ril-daemon /system/bin/rild
+  socket rild stream 660 root radio
+ +

rilproxy

+ +

In Firefox OS, the rild client is the rilproxy process. This acts as a dumb forwarding proxy between rild and b2g. This proxy is needed as an implementation detail; suffice it to say, it is indeed necessary. The rilproxy code can be found on GitHub.

+ +

mediaserver

+ +

The mediaserver process controls audio and video playback. Gecko talks to it through an Android Remote Procedure Call (RPC) mechanism. Some of the media that Gecko can play (OGG Vorbis audio, OGG Theora video, and WebM video) are decoded by Gecko and sent directly to the mediaserver process. Other media files are decoded by libstagefright, which is capable of accessing proprietary codecs and hardware encoders.

+ +
+

Note: The mediaserver process is a "temporary" component of Firefox OS; it's there to aid in our initial development work, but is expected to go away eventually. This will most likely not happen until Firefox OS 2.0 at the earliest, however.

+
+ +

netd

+ +

The netd process is used to configure network interfaces.

+ +

wpa_supplicant

+ +

The wpa_supplicant process is the standard UNIX-style daemon that handles connectivity with WiFi access points.

+ +

dbus-daemon

+ +

The dbus-daemon implements D-Bus, a message bus system that Firefox OS uses for Bluetooth communication.

+ +

Gecko

+ +

Gecko, as previously mentioned, is the implementation of web standards (HTML, CSS, and JavaScript) that is used to implement everything the user sees on Firefox OS, and control interactions with the phone hardware. Web apps connect HTML5 to hardware via controlled, secure Web APIs, implemented in Gecko. The Web APIs provide programmatic access to features in the underlying mobile device hardware (such as the battery or vibration), along with data that is stored on, or available to, a device (such as the calendar or contacts). Web content invokes the accessible Web APIs within HTML5.

+ +

An app consists of a collection of related HTML5 web content. To build web apps that run on Firefox OS mobile devices, developers simply assemble, package, and distribute this web content. At run time, this web content is interpreted, compiled, and rendered in a web browser. For more information on Apps, see the App Center.

+ +
+

Note: To search the Gecko codebase, you could use http://dxr.mozilla.org. It’s more fancy and provides good reference features, but with limited repositories. Or you could try the traditional http://mxr.mozilla.org, which contains more Mozilla projects.

+
+ +

Gecko architecture diagram

+ +

+ + + + + +

b2g/

+ +

The b2g folder contains mainly Firefox OS-related functions.

+ +
b2g/chrome/content
+ +

Contains Javascript files run above the system app.

+ +
b2g/chrome/content/shell.html
+ +

The entry point into Gaia — the HTML for the system app. shell.html pulls in settings.js and shell.js:

+ +
<script type="application/javascript;version=1.8" src="chrome://browser/content/settings.js"> </script>
+<script type="application/javascript;version=1.8" src="chrome://browser/content/shell.js"> </script>
+ +

settings.js contains system default setting parameters.

+ +
b2g/chrome/content/shell.js
+ +

shell.js is the first script to load in the Gaia system app.

+ +

shell.js imports all required modules, registers key listeners, defines sendCustomEvent and sendChromeEvent to communicate with Gaia, and provides webapp install helpers: indexedDB quota, RemoteDebugger, keyboard helper, and screenshot tool.

+ +

But the most important function of shell.js is to launch the Gaia system app, then hand over the overall systems related management work to the Gaia system app.

+ +
let systemAppFrame =
+  document.createElementNS('http://www.w3.org/1999/xhtml', 'html:iframe');
+    ...
+  container.appendChild(systemAppFrame);
+ +
b2g/app/b2g.js
+ +

This script contains predefined settings, like about:config in browser, and the same as Gaia's pref.js. These settings can be changed from the Settings app, and can be overwritten with Gaia’s user.js in the Gaia build script.

+ +

dom/{API}

+ +

New API implementations (post-b2g) will be located in dom/. Older APIs will be located in dom/base, for example Navigator.cpp.

+ +
dom/apps
+ +

.jsm will be loaded — .js API implementations such as webapp.js install, getSelf, etc.

+ +
dom/apps/PermissionsTable.jsm
+ +

All permissions are defined in PermissionsTable.jsm

+ +

dom/webidl

+ +

WebIDL is the language used to define web APIs. For supported attributes, read WebIDL_bindings.

+ +

hal/gonk

+ +

This directory contains files related to the gonk port layer.

+ +

Generated files

+ +
module/libpref/src/init/all.js
+ +

Contains all config files.

+ +
/system/b2g/ omni.ja and omni.js
+ +

Contains the pack of styles for resources in the device.

+ +

Processing input events

+ +

Most action inside Gecko is triggered by user actions. These actions are represented by input events (such as button presses, touches to a touch screen device, and so forth). These events enter Gecko through the Gonk implementation of nsIAppShell, a Gecko interface that is used to represent the primary entrance points for a Gecko application; that is, the input device driver calls methods on the nsAppShell object that represents the Gecko subsystem in order to send events to the user interface.

+ +

For example:

+ +
void GeckoInputDispatcher::notifyKey(nsecs_t eventTime,
+                                     int32_t deviceId,
+                                     int32_t source,
+                                     uint32_t policyFlags,
+                                     int32_t action,
+                                     int32_t flags,
+                                     int32_t keyCode,
+                                     int32_t scanCode,
+                                     int32_t metaState,
+                                     nsecs_t downTime) {
+  UserInputData data;
+  data.timeMs = nanosecsToMillisecs(eventTime);
+  data.type = UserInputData::KEY_DATA;
+  data.action = action;
+  data.flags = flags;
+  data.metaState = metaState;
+  data.key.keyCode = keyCode;
+  data.key.scanCode = scanCode;
+  {
+    MutexAutoLock lock(mQueueLock);
+    mEventQueue.push(data);
+  }
+  gAppShell->NotifyNativeEvent();
+}
+ +

These events come from the standard Linux input_event system. Firefox OS uses a light abstraction layer over that; this provides some nice features like event filtering. You can see the code that creates input events in the EventHub::getEvents() method in widget/gonk/libui/EventHub.cpp.

+ +

Once the events are received by Gecko, they're dispatched into the DOM by nsAppShell:

+ +
static nsEventStatus sendKeyEventWithMsg(uint32_t keyCode,
+                                         uint32_t msg,
+                                         uint64_t timeMs,
+                                         uint32_t flags) {
+    nsKeyEvent event(true, msg, NULL);
+    event.keyCode = keyCode;
+    event.location = nsIDOMKeyEvent::DOM_KEY_LOCATION_MOBILE;
+    event.time = timeMs;
+    event.flags |= flags;
+    return nsWindow::DispatchInputEvent(event);
+}
+ +

After that, the events are either consumed by Gecko itself or are dispatched to Web applications as DOM events for further processing.

+ +

Graphics

+ +

At the very lowest level, Gecko uses OpenGL ES 2.0 to draw to a GL context that wraps the hardware frame buffers. This is done in the Gonk implementation of nsWindow by code similar to this:

+ +
gNativeWindow = new android::FramebufferNativeWindow();
+sGLContext = GLContextProvider::CreateForWindow(this);
+ +

The FramebufferNativeWindow class is brought in directly from Android; see FramebufferNativeWindow.cpp. This uses the gralloc API to access the graphics driver in order to map buffers from the framebuffer device into memory.

+ +

Gecko uses its Layers system to composite drawn content to the screen. In summary, what happens is this:

+ +
    +
  1. Gecko draws separate regions of pages into memory buffers. Sometimes these buffers are in system memory; other times, they're textures mapped into Gecko's address space, which means that Gecko is drawing directly into video memory. This is typically done in the method BasicThebesLayer::PaintThebes().
    2. +
  2. Gecko then composites all of these textures to the screen using OpenGL commands. This composition occurs in ThebesLayerOGL::RenderTo().
    3. +
+ +

The details of how Gecko handles the rendering of web content is outside the scope of this document.

+ +

Hardware Abstraction Layer (HAL)

+ +

The Gecko hardware abstraction layer is one of the porting layers of Gecko. It handles low-level access to system interfaces across multiple platforms using a C++ API that's accessible to the higher levels of Gecko. These APIs are implemented on a per-platform basis inside the Gecko HAL itself. This hardware abstraction layer is not exposed directly to JavaScript code in Gecko — this part of the interaction is handled by the Web APIs.

+ +

Let's look at the process form a high level. When a user makes a request to use a phone feature (such as dialing a number, accessing a local wifi network, or connecting via Bluetooth), all layers in the Firefox OS technology stack are involved in carrying out the request. Apps and web content in the Gaia layer submits requests to access the underlying device via Web API calls (invoked from within HTML5 functions), which are implemented in Gecko. Gecko in turn submits the request to Gonk. A single request from Gecko can trigger a complex series of operations, initiated and managed by Gonk, in the mobile phone.

+ +

How the HAL works

+ +

Let's consider the Vibration API as an example. The Gecko HAL for this API is defined in hal/Hal.h. In essence (simplifying the method signature for clarity's sake), you have this function:

+ +
void Vibrate(const nsTArray<uint32> &pattern);
+ +

This is the function called by Gecko code to turn on vibration of the device according to the specified pattern; a corresponding function exists to cancel any ongoing vibration. The Gonk implementation of this method is in hal/gonk/GonkHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+  EnsureVibratorThreadInitialized();
+  sVibratorRunnable->Vibrate(pattern);
+}
+ +

This code sends the request to start vibrating the device to another thread, which is implemented in VibratorRunnable::Run(). This thread's main loop looks like this:

+ +
while (!mShuttingDown) {
+  if (mIndex < mPattern.Length()) {
+    uint32_t duration = mPattern[mIndex];
+    if (mIndex % 2 == 0) {
+      vibrator_on(duration);
+    }
+    mIndex++;
+    mMonitor.Wait(PR_MillisecondsToInterval(duration));
+  }
+  else {
+    mMonitor.Wait();
+  }
+}
+ +

vibrator_on() is the Gonk HAL API that turns on the vibrator motor. Internally, this method sends a message to the kernel driver by writing a value to a kernel object using sysfs.

+ +

Fallback HAL API implementations

+ +

The Gecko HAL APIs are supported across all platforms. When Gecko is built for a platform that doesn't expose an interface to vibration motors (such as a desktop computer), then a fallback implementation of the HAL API is used. For vibration, this is implemented in hal/fallback/FallbackVibration.cpp.

+ +
void Vibrate(const nsTArray<uint32_t> &pattern) {
+}
+ +

Sandbox implementations

+ +

Because most web content runs in content processes with low privileges, we can't assume those processes have the privileges needed to be able to (for example), turn on and off the vibration motor. In addition, we want to have a central location for handling potential race conditions. In the Gecko HAL, this is done through a "sandbox" implementation of the HAL. This sandbox implementation simply proxies requests made by content processes and forwards them to the "Gecko server" process. The proxy requests are sent using IPDL.

+ +

For vibration, this is handled by the Vibrate() function implemented in hal/sandbox/SandboxHal.cpp:

+ +
void Vibrate(const nsTArray<uint32_t>& pattern, const WindowIdentifier &id) {
+  AutoInfallibleTArray<uint32_t, 8> p(pattern);
+
+  WindowIdentifier newID(id);
+  newID.AppendProcessID();
+  Hal()->SendVibrate(p, newID.AsArray(), GetTabChildFrom(newID.GetWindow()));
+}
+ +

This sends a message defined by the PHal interface, described by IPDL in hal/sandbox/PHal.ipdl. This method is described more or less as follows:

+ +
Vibrate(uint32_t[] pattern);
+ +

The receiver of this message is the HalParent::RecvVibrate() method in hal/sandbox/SandboxHal.cpp, which looks like this:

+ +
virtual bool RecvVibrate(const InfallibleTArray<unsigned int>& pattern,
+            const InfallibleTArray<uint64_t> &id,
+            PBrowserParent *browserParent) MOZ_OVERRIDE {
+
+  hal::Vibrate(pattern, newID);
+  return true;
+}
+ +

This omits some details that aren't relevant to this discussion; however, it shows how the message progresses from a content process through Gecko to Gonk, then to the Gonk HAL implementation of Vibrate(), and eventually to the Vibration driver.

+ +

DOM APIs

+ +

DOM interfaces are, in essence, how web content communicates with Gecko. There's more involved than that, and if you're interested in added details, you can read about the DOM. DOM interfaces are defined using IDL, which comprises both a foreign function interface (FFI) and object model (OM) between JavaScript and C++.

+ +

The vibration API is exposed to web content through an IDL interface, which is provided in nsIDOMNavigator.idl:

+ +
[implicit_jscontext] void mozVibrate(in jsval aPattern);
+ +

The jsval argument indicates that mozVibrate() (which is our vendor-prefixed implementation of this non-finalized vibration specification) accepts as input any JavaScript value. The IDL compiler, xpidl, generates a C++ interface that's then implemented by the Navigator class in Navigator.cpp.

+ +
NS_IMETHODIMP Navigator::MozVibrate(const jsval& aPattern, JSContext* cx) {
+  // ...
+  hal::Vibrate(pattern);
+  return NS_OK;
+}
+ +

There's a lot more code in this method than what you see here, but it's not important for the purposes of this discussion. The point is that the call to hal::Vibrate() transfers control from the DOM to the Gecko HAL. From there, we enter the HAL implementation discussed in the previous section and work our way down toward the driver. On top of that, the DOM implementation doesn't care at all what platform it's running on (Gonk, Windows, OS X, or anything else). It also doesn't care whether the code is running in a content process or in the Gecko server process. Those details are all left to lower levels of the system to deal with.

+ +

The vibration API is a very simple API, which makes it a good example. The SMS API is an example of a more complex API which uses its own "remoting" layer connecting content processes to the server.

+ +

Radio Interface Layer (RIL)

+ +

The RIL was mentioned in the section The userspace process architecture. This section will examine how the various pieces of this layer interact in a bit more detail.

+ +

The main components involved in the RIL are:

+ +
+
rild
+
The daemon that talks to the proprietary modem firmware.
+
rilproxy
+
The daemon that proxies messages between rild and Gecko (which is implemented in the b2g process). This overcomes the permission problem that arises when trying to talk to rild directly, since rild can only be communicated with from within the radio group.
+
b2g
+
This process, also known as the chrome process, implements Gecko. The portions of it that relate to the Radio Interface Layer are dom/system/gonk/ril_worker.js, which implements a worker thread that talks to rild through rilproxy and implements the radio state machine; and the nsIRadioInterfaceLayer interface, which is the main thread's XPCOM service that acts primarily as a message exchange between the ril_worker.js thread and various other Gecko components, including the Gecko content process.
+
Gecko's content process
+
Within Gecko's content process, the nsIRILContentHelper interface provides an XPCOM service that lets code implementing parts of the DOM, such as the Telephony and SMS APIs talk to the radio interface, which is in the chrome process.
+
+ +

Example: Communicating from rild to the DOM

+ +

Let's take a look at an example of how the lower level parts of the system communicate with DOM code. When the modem receives an incoming call, it notifies rild using a proprietary mechanism. rild then prepares a message for its client according to the "open" protocol, which is described in ril.h. In the case of an incoming call, a RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message is generated and sent by rild to rilproxy.

+ +

rilproxy, implemented in rilproxy.c, receives this message in its main loop, which polls its connection to rild using code like this:

+ +
ret = read(rilproxy_rw, data, 1024);
+
+if(ret > 0) {
+  writeToSocket(rild_rw, data, ret);
+}
+ +

Once the message is received from rild, it's then forwarded along to Gecko on the socket that connects rilproxy to Gecko. Gecko receives the forwarded message on its IPC thread:

+ +
int ret = read(fd, mIncoming->Data, 1024);
+// ... handle errors ...
+mIncoming->mSize = ret;
+sConsumer->MessageReceived(mIncoming.forget());
+ +

The consumer of these messages is SystemWorkerManager, which repackages the messages and dispatches them to the ril_worker.js thread that implements the RIL state machine; this is done in the RILReceiver::MessageReceived() method:

+ +
virtual void MessageReceived(RilRawData *aMessage) {
+  nsRefPtr<DispatchRILEvent> dre(new DispatchRILEvent(aMessage));
+  mDispatcher->PostTask(dre);
+}
+ +

The task posted to that thread in turn calls the onRILMessage() function, which is implemented in JavaScript. This is done using the JavaScript API function JS_CallFunctionName():

+ +
return JS_CallFunctionName(aCx, obj, "onRILMessage", NS_ARRAY_LENGTH(argv),
+                           argv, argv);
+ +

onRILMessage() is implemented in dom/system/gonk/ril_worker.js, which processes the message bytes and chops them into parcels. Each complete parcel is then dispatched to individual handler methods as appropriate:

+ +
handleParcel: function handleParcel(request_type, length) {
+  let method = this[request_type];
+  if (typeof method == "function") {
+    if (DEBUG) debug("Handling parcel as " + method.name);
+    method.call(this, length);
+  }
+}
+ +

This code works by getting the request type from the object, making sure it's defined as a function in the JavaScript code, then calling the method. Since ril_worker.js implements each request type in a method given the same name as the request type, this is very simple.

+ +

In our example, RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED, the following handler is called:

+ +
RIL[UNSOLICITED_RESPONSE_CALL_STATE_CHANGED] = function UNSOLICITED_RESPONSE_CALL_STATE_CHANGED() {
+  this.getCurrentCalls();
+};
+ +

As you see in the code above, when notification is received that the call state has changed, the state machine simply fetches the current call state by calling the getCurrentCall() method:

+ +
getCurrentCalls: function getCurrentCalls() {
+  Buf.simpleRequest(REQUEST_GET_CURRENT_CALLS);
+}
+ +

This sends a request back to rild to request the state of all currently active calls. The request flows back along a similar path the RIL_UNSOL_RESPONSE_CALL_STATE_CHANGED message followed, but in the opposite direction (that is, from ril_worker.js to SystemWorkerManager to Ril.cpp, then rilproxy and finally to the rild socket). rild then responds in kind, back along the same path, eventually arriving in ril_worker.js's handler for the REQUEST_GET_CURRENT_CALLS message. And thus bidirectional communication occurs.

+ +

The call state is then processed and compared to the previous state; if there's a change of state, ril_worker.js notifies the nsIRadioInterfaceLayer service on the main thread:

+ +
_handleChangedCallState: function _handleChangedCallState(changedCall) {
+  let message = {type: "callStateChange",
+                 call: changedCall};
+  this.sendDOMMessage(message);
+}
+ +

nsIRadioInterfaceLayer is implemented in dom/system/gonk/RadioInterfaceLayer.js; the message is received by its onmessage() method:

+ +
onmessage: function onmessage(event) {
+   let message = event.data;
+   debug("Received message from worker: " + JSON.stringify(message));
+   switch (message.type) {
+     case "callStateChange":
+       // This one will handle its own notifications.
+       this.handleCallStateChange(message.call);
+       break;
+   ...
+ +

All this really does is dispatch the message to the content process using the Parent Process Message Manager (PPMM):

+ +
handleCallStateChange: function handleCallStateChange(call) {
+  [some internal state updating]
+  ppmm.sendAsyncMessage("RIL:CallStateChanged", call);
+}
+ +

In the content process, the message is received by receiveMessage() method in the nsIRILContentHelper service, from the Child Process Message Manager (CPMM):

+ +
receiveMessage: function receiveMessage(msg) {
+  let request;
+  debug("Received message '" + msg.name + "': " + JSON.stringify(msg.json));
+  switch (msg.name) {
+    case "RIL:CallStateChanged":
+      this._deliverTelephonyCallback("callStateChanged",
+                                     [msg.json.callIndex, msg.json.state,
+                                     msg.json.number, msg.json.isActive]);
+      break;
+ +

This, in turn, calls the nsIRILTelephonyCallback.callStateChanged() methods on every registered telephony callback object. Every web application that accesses the window.navigator.mozTelephony API has registered one such callback object that dispatches events to the JavaScript code in the web application, either as a state change of an existing call object or a new incoming call event.

+ +
NS_IMETHODIMP Telephony::CallStateChanged(PRUint32 aCallIndex, PRUint16 aCallState,
+                                          const nsAString& aNumber, bool aIsActive) {
+  [...]
+
+  if (modifiedCall) {
+    // Change state.
+    modifiedCall->ChangeState(aCallState);
+
+    // See if this should replace our current active call.
+    if (aIsActive) {
+      mActiveCall = modifiedCall;
+    }
+
+    return NS_OK;
+  }
+
+  nsRefPtr<TelephonyCall> call =
+          TelephonyCall::Create(this, aNumber, aCallState, aCallIndex);
+  nsRefPtr<CallEvent> event = CallEvent::Create(call);
+  nsresult rv = event->Dispatch(ToIDOMEventTarget(), NS_LITERAL_STRING("incoming"));
+  NS_ENSURE_SUCCESS(rv, rv);
+  return NS_OK;
+}
+ +

Applications can receive these events and update their user interface and so forth:

+ +
handleEvent: function fm_handleEvent(evt) {
+  switch (evt.call.state) {
+    case 'connected':
+      this.connected();
+      break;
+    case 'disconnected':
+      this.disconnected();
+      break;
+    default:
+      break;
+  }
+}
+ +

Take a look at the implementation of handleEvent() in the Dialer application as an extended example.

+ +

3G data

+ +

There is a RIL message that initiates a "data call" to the cellular service; this enables data transfer mode in the modem. This data call ends up creating and activating a Point-to-Point Protocol (PPP) interface device in the Linux kernel that can be configured using the usual interfaces.

+ +
+

Note: This section needs to be written.

+
+ + + +

This section lists DOM APIs that are related to RIL communications:

+ + + +

WiFi

+ +

The WiFi backend for Firefox OS simply uses wpa_supplicant to do most of the work. That means that the backend's primary job is to simply manage the supplicant, and to do some auxiliary tasks such as loading the WiFi driver and enabling or disabling the network interface. In essence, this means that the backend is a state machine, with the states following the state of the supplicant.

+ +
+

Note: Much of the interesting stuff that happens in WiFi depends deeply on possible state changes in the wpa_supplicant process.

+
+ +

The implementation of the WiFi component is broken up into two files:

+ +
+
dom/wifi/DOMWifiManager.js
+
Implements the API that's exposed to web content, as defined in nsIWifi.idl.
+
dom/wifi/WifiWorker.js
+
Implements the state machine and the code that drives the supplicant.
+
+ +

These two files communicate with one another using the message manager. The backend listens for messages requesting certain actions, such as "associate", and responds with a message when the requested action has been completed.

+ +

The DOM side listens for the response methods as well as several event messages that indicate state changes and information updates.

+ +
+

Note: Any synchromous DOM APIs are implemented by caching data on that side of the pipe. Synchronous messages are avoided whenever possible.

+
+ +

WifiWorker.js

+ +

This file implements the main logic behind the WiFi interface. It runs in the chrome process (in multi-process builds) and is instantiated by the SystemWorkerManager. The file is generally broken into two sections: a giant anonymous function and WifiWorker (and its prototype). The anonymous function ends up being the WifiManager by providing a local API, including notifications for events such as connection to the supplicant and scan results being available. In general, it contains little logic and lets its sole consumer control its actions while it simply responds with the requested information and controls the details of the connection with the supplicant.

+ +

The WifiWorker object sits between the WifiManager and the DOM. It reacts to events and forwards them to the DOM; in turn, it receives requests from the DOM and performs the appropriate actions on the supplicant. It also maintains state information about the supplicant and what it needs to do next.

+ +

DOMWifiManager.js

+ +

This implements the DOM API, transmitting messages back and forth between callers and the actual WiFi worker. There's very little logic involved.

+ +
+

Note: In order to avoid synchronous messages to the chrome process, the WiFi Manager does need to cache the state based on the received event.

+
+ +

There's a single synchronous message, which is sent at the time the DOM API is instantiated, in order to get the current state of the supplicant.

+ +

DHCP

+ +

DHCP and DNS are handled by dhcpcd, the standard Linux DHCP client. However, it's not able to react when the network connection is lost. Because of this, Firefox OS kills and restarts dhcpcd each time it connects to a given wireless network.

+ +

dhcpcd is also responsible for setting the default route; we call into the network manager to tell the kernel about DNS servers.

+ +

Network Manager

+ +

The Network Manager configures network interfaces opened by the 3G data and WiFi components.

+ +
+

Note: This needs to be written.

+
+ +

Processes and threads

+ +

Firefox OS uses POSIX threads to implement all application threads — this includes the main thread of each application as well as web workers and helper threads. Control groups are used to prioritize process and thread execution thus relying on the Linux kernel's completely fair scheduler. Depending on the status of a process we assign it to different control group. We've currently got 6 priority levels corresponding to 5 control groups:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Process priority levels
PriorityControl groupUsed for
MASTER Main b2g process
FOREGROUND_HIGHapps/criticalCritical applications holding the cpu or highpriority wakelock; this is currently reserved for the clock and communications applications
FOREGROUNDappsForeground applications
FOREGROUND_KEYBOARDappsKeyboard application
BACKGROUND_PERCEIVABLEapps/bg_perceivableBackground applications playing audio or holding the holding the cpu or highpriority wakelock and having at least a system message handler registered
BACKGROUNDapps/bg_non_interactiveAll other applications running in the background
+ +

Some levels share the same control group, that's because those levels currently differ in the way they're treated by the out of memory killer. All priorities can be adjusted at build time via preferences; the relevant entries can be found in the b2g/app/b2g.js file.

+ +

The following control groups are currently used:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Control groups
PathCPU allocationDescription
 50% of total CPU timeRoot control group reserved for the main b2g process and system daemons
apps50% of total CPU timeRegular applications
apps/critical95% of appsCritical applications
apps/bg_perceivable10% of appsPerceivable background applications
apps/bg_non_interactive5% of appsBackground applications
+ +
+

Note: for more information on the out-of-memory killer, and how Firefox OS manages low memory situations, read Out of memory management on Firefox OS.

+
+ +

Within a process the main thread inherits the "nice value" of the process whilst web worker threads are given a "nice value" that is one point higher than the main thread thus running at lower priority. This is done in order to prevent CPU-intensive workers from excessively slowing down the main thread. All threads of an application are currently assigned to the same control group. Process priorities are changed whenever a major event happens such as an application being sent into the background or foreground, a new application starting up or an existing application grabbing a CPU wakelock.

+ +
+

Note: cgroups support on ICS devices is currently broken due to a kernel bug.

+
diff --git a/files/de/archive/b2g_os/platform/index.html b/files/de/archive/b2g_os/platform/index.html new file mode 100644 index 0000000000..db8c4e9960 --- /dev/null +++ b/files/de/archive/b2g_os/platform/index.html @@ -0,0 +1,81 @@ +--- +title: Firefox OS Plattform +slug: Archive/B2G_OS/Platform +tags: + - Architektur + - Firefox OS + - Plattform + - Übersicht +translation_of: Archive/B2G_OS/Platform +--- +

Die Firefox OS Plattform besteht aus vielen Komponenten. Du musst seine Architektur nicht verstehen, um Apps für Firefox OS zu entwickeln. Falls Du aber an der Plattform selbst oder an ihrer Portierung mitentwickelst oder einfach nur neugierig bist, dann könnte diese Dokumentation interessant für Dich sein.

+ + + + + + + + +
+

Dokumentationen zur Firefox OS Plattform

+ +
+
Firefox OS Architektur: Überblick
+
Ein Überblick über die interne Struktur von Firefox OS; vor allem für diejenigen interessant, die an der Plattform oder ihrer Portierung mitentwickeln.
+
Firefox OS Architektur: Apps
+
Ein Überblick über das Anwendungs-Modell von Firefox OS.
+
Gaia
+
Dokumentation über Gaia, die Benutzeroberfläche von Firefox OS Geräten. Gaia ist eine Web-Anwendung, die auf der Firefox OS Betriebssystem-Schicht läuft.
+
Gonk
+
Dokumentation über Gonk, die Betriebssystem-Schicht unterhalb von Gaia. Gonk besteht aus einem Linux Kernel und einer Hardware-Abstraktionsschicht, mit der Gecko kommuniziert.
+
Gecko
+
Gecko ist die Ebene im Firefox OS, die dieselben offenen Web Standard-Implementierungen bereit stellt wie sie auch von Firefox, Thunderbird und vielen anderen Anwendungen genutzt werden.
+
 Sicherheit
+
Dokumentation über die Sicherheit in Firefox OS; dies beinhaltet alle Themen rund um die Sicherheit von Firefox OS Geräten: für die App-Entwicklung, für die Integration von Geräten in Netzwerke und so weiter.
+
Speicherengpässe in Firefox OS
+
Dieser Artikel erläutert wie Firefox OS mit Hilfe des "low memory killers" und der "low memory notifications" mit Speicherengpässen umgeht.
+
Feature Liste
+
Eine Liste mit den verfügbaren Features pro Firefox OS Release.
+
Firefox OS Einstellungen
+
Eine Liste allgemeiner Einstellungen, die mit dem Settings API vorgenommen werden können.
+
+ +

Alle anzeigen...

+ 		+

Wir helfen Dir

+ +

Wenn Du mit Firefox OS arbeitest oder Apps für Firefox OS Geräte entwickelst, dann kann Dir unsere große MDN-Geimeinschaft bei Fragen und Problemen helfen!

+ +
    +
  • Besuche das Boot to Gecko Projekt Forum: {{ DiscussionList("dev-b2g", "mozilla.dev.b2g") }}
    • +
+ +
    +
  • Stell Deine Fragen in Mozilla's Boot to Gecko IRC Channel: #b2g
    • +
+ +

Bitte vergiss nicht die netiquette...

+ +

 

+ + + + + + +

Quellen

+ + +
+ +

 

diff --git a/files/de/archive/b2g_os/quickstart/deine_erste_app/index.html b/files/de/archive/b2g_os/quickstart/deine_erste_app/index.html new file mode 100644 index 0000000000..abd858245b --- /dev/null +++ b/files/de/archive/b2g_os/quickstart/deine_erste_app/index.html @@ -0,0 +1,339 @@ +--- +title: Deine erste App +slug: Archive/B2G_OS/Quickstart/deine_erste_app +tags: + - Anfänger + - Apps + - FirefoxOS + - Guide +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +
+

Hinweis: Das Quickstart-Abschnitt wurde mit einem neuen, fokussierter Quick Artikel, der alle bisherigen Artikel ersetzt aktualisiert. Wir hoffen, dass Sie diese nützlicher finden, und eine schnellere Lernerfahrung als die älteren Artikel haben.

+
+
+
+

Offene Web-Anwendungen (Web-Entwickler) geben, was sie seit Jahren gewünscht haben: ein Cross-Plattform-Umgebung, um installierbare Apps mit nur HTML, CSS und JavaScript erstellen gewidmet - mit Firefox OS, der erste dedizierte Open Web App-Plattform.

+
+
+ Dieser Leitfaden soll Sie unternehmungslustig schnell mit einer grundlegenden Architektur und Anweisungen zu bauen inspirieren, so dass Sie die nächste große app erstellen können!
+
+
+

Wenn Sie dieser Anleitung folgen möchten, können Sie unsere Schnellstart-app-Vorlage herunterladen. Finden Sie mehr heraus was unser Apps-Vorlage-Guide enthält.

+
+

App-Struktur

+

 

+
+
+

Verpackt vs. gehostete Anwendungen

+
+

Es gibt zwei Arten der offenen Web-apps :  verpackt und gehostet. Verpackte apps sind im Wesentlichen die Zip-Dateien, alle Anwendung Anlagewerten: HTML, CSS, JavaScript, Bilder, Manifest, etc.. Gehostete Anwendungen laufen von einem Server in einer bestimmten Domain, genau wie eine standard-Website. Beide app-Arten benötigen ein gültiges Manifest. Wenn Ihre app auf dem Firefox-Marktplatz kommt, wird Ihre Anwendung als  Zip-Datei hochladen oder geben Sie die URL an, wo Ihre gehostete Anwendung  ist.

+
+

+
+

In Partnerschaft mit Treehouse erstellt : Zu die Treehouse Seite

+
+
+

Für die Zwecke dieses Leitfadens erstellen Sie eine gehostete app die werden dann an Ihre Adresse "localhost" geschickt. Sobald Ihre app bereit ist um auf die Liste des Firefox-Marktplatz zukommen, können Sie die Entscheidung, als verpackte app oder als gehostete Anwendung zu starten.

+

Manifeste App

+

Alle Firefox-app erfordern eine manifest.webapp -Datei im Stammverzeichnis der app.  Die manifest.webapp -Datei enthält wichtige Informationen über die app wie Version, Name, Beschreibung, Symbolspeicherort, Locale Zeichenfolgen, Domains, wo die app aus, installiert werden kann, und vieles mehr. Nur der Name und die Beschreibung sind erforderlich. Das einfache Manifest innerhalb der app-Vorlage enthalten ist, die der folgenden ähnelt:

+ 
{
+  "version": "0.1",
+  "name": "Open Web App",
+  "description": "Die eeindruckende Open Web App",
+  "launch_path": "/app-template/index.html",
+  "icons": {
+    "16": "/app-template/app-icons/icon-16.png",
+    "48": "/app-template/app-icons/icon-48.png",
+    "128": "/app-template/app-icons/icon-128.png"
+  },
+  "developer": {
+    "name": "Ihr Name",
+    "url": "http://ihrebeeindruckendeapp.eu"
+  },
+  "locales": {
+    "es": {
+      "description": "Su nueva aplicación impresionante Open Web",
+      "developer": {
+        "url": "http://ihrebeeindruckendeapp.eu"
+      }
+    },
+    "it": {
+      "description": "La tua nuova fantastica Open Web App",
+      "developer": {
+        "url": "http://ihrebeeindruckendeapp.eu"
+      }
+    }
+  },
+  "default_locale": "de"
+}
+
+

+
+

In Partnerschaft mit Treehouse erstellt : Zu die Treehouse Seite

+
+
+

 

+

Eine grundlegende Manifest ist alles, was Sie brauchen um loszulegen. Lesen Sie mehr über Manifeste Apps.

+

App Layout & Design

+

Das Design ist zunehmend wichtig, da die Bildschirmauflösungen standard auf verschiedenen Geräten geworden ist. Selbst wenn das Hauptziel Ihrer App mobile Plattformen wie Firefox-OS ist, haben andere Geräte wahrscheinlich auch darauf zugriff.  Mit CSS Media Queries können Sie das Layout des Gerät anpassen, wie in diesem CSS-Beispiel gezeigt:

+
+
+  
+
+ 
+/* Im folgenden Text werden Beispiele von Verschiedenen CSS Media Queries gezeigt */
+
+  /* Grundlegende Desktop/Bildschirm breite */
+@media only screen and (min-width : 1224px) {
+  /* style */
+}
+
+/* iPhone breite */
+@media
+  only screen and (-webkit-min-device-pixel-ratio : 1.5),
+  only screen and (min-device-pixel-ratio : 1.5) {
+  /* styles */
+}
+
+/* Geräteeinstellungen auf verschiedenen Ausrichtungen */
+@media screen and (orientation:portrait) {
+  /* styles */
+}
+@media screen and (orientation:landscape) {
+  /* styles */
+}
+

Es gibt viele JavaScript und CSS-Frameworks für responsive Design und mobile app Entwicklung (Bootstrap, etc.) Wählen Sie die Framework(s), die am besten zu Ihrer app-Entwicklung passen.

+

Web APIs

+

JavaScript-APIs werden erstellt und so schnell wie Geräte erweitert. Mozillas WebAPI Aufwand bringt Dutzende von mobilen Standardfunktionen von JavaScript-APIs. Eine Liste der Geräte-Support und Status steht auf der Seite des WebAPI zur Verfügung. JavaScript-Feature-Erkennung ist immer noch die beste Praxis, wie im folgenden Beispiel gezeigt:// Wenn dieses Gerät das Vibrieren API unterstützt

+ 
// Wenn dieses Gerät Vibration API unterstützt ...
+
+if('vibrate' in navigator) {
+    // ... Vibration in Sekunden
+    navigator.vibrate(1000);
+}
+

Im folgenden Beispiel wird das Anzeigeformat von einer <div> basierend auf die Änderungen in der Ladezustand des Geräts geändert :

+ 
// Erstellen Sie die Batterie Indiktator Hörer
+(function() {
+  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
+      indicator, indicatorPercentage;
+
+  if(battery) {
+    indicator = document.getElementById('indicator'),
+    indicatorPercentage = document.getElementById('indicator-percentage');
+
+    // Zuhörer für Änderung
+    battery.addEventListener('chargingchange', updateBattery);
+    battery.addEventListener('levelchange', updateBattery);
+
+    // Aktualisiert sofort
+    updateBattery();
+  }
+
+  function updateBattery() {
+    // Prozent aktualisieren Breite und Text
+    var level = (battery.level * 100) + '%';
+    indicatorPercentage.style.width = level;
+    indicatorPercentage.innerHTML = 'Battery: ' + level;
+    // Ladestatus Updaten
+    indicator.className = battery.charging ? 'charging' : '';
+  }
+})();
+

Im Beispiel oben sobald Sie bestätigen, dass die Batterie-API unterstützt wird, können Sie Ereignis-Listener für Chargingchange und Levelchange um das Element Anzeige aktualisieren hinzufügen. Versuchen Sie, die folgenden auf die Quickstart-Vorlage, und sehen Sie, wenn Sie es funktioniert.

+
+
+ Überprüfen Sie die WebAPI-Seite regelmäßig, um sich mit Gerät API Status aktuell zu halten.
+
+  
+
+
+

API-Funktionen installieren

+
+  
+
+

In unserem Quickstart-app Beispielvorlage, haben wir eine installierungs-Schaltfläche, die Sie anklicken können, wenn Sie die app als standard website haben möchten ,
+ und diese Website auf Firefox-OS als app zu installieren. Das Knopf-Markup ist nichts Besonderes:

+ 
<button id="install-btn">App Installieren</button>
+
+
+ Diese Tastenfunktionen wird mithilfe der installieren-API implementiert (siehe install.js):
+
+  
+
+ 
var mainifest_url = location.href + 'manifest.webapp';
+
+function install(ev) {
+  ev.preventDefault();
+//Manifest URL Definieren
+// App Installieren
+  var installLocFind = navigator.mozApps.install(manifest_url);
+  installLocFind.onsuccess = function(data) {
+    // Wenn die App Installiert ist
+  };
+  installLocFind.onerror = function() {
+    // App ist nicht Installiert
+    // installapp.error.name
+    alert(installLocFind.error.name);
+  };
+};
+
+// Eine Verweis auf die Schaltfläche und rufen Sie install() auf Klick wenn die App nicht Installiert ist. Wenn sie installiert ist ist die Schaltfläche ausgeblendet.
+var button = document.getElementById('install-btn');
+
+var installCheck = navigator.mozApps.checkInstalled(manifest_url);
+
+installCheck.onsuccess = function() {
+  if(installCheck.result) {
+    button.style.display = "none";
+  } else {
+    button.addEventListener('click', install, false);
+  };
+};
+
+

Gehen Sie kurz alles durch was vor sich geht :

+
    +
  1. +
    + Wir erhalten einen Verweis auf die Schaltfläche "installieren" und speichern Sie sie in die Schaltfläche "Variablen".
    +
    2. +
  2. Wir verwenden navigator.mozApps.checkInstalled um zu prüfen, ob die App definiert durch das Manifest im http://people.mozilla.com/~cmills/location-finder/manifest.webapp bereits auf dem Gerät installiert ist. Dieser Text wird als Variable installCheck gespeichert.
    3. +
  3. Wenn der Test erfolgreich durchgeführt wird, dann wird sein Success Ereignis ausgelöst, daher wird installCheck.onsuccess = function() { ... } ausgeführt.
    4. +
  4. Wenn die App bereits Installiert ist wird die Schaltfläche ausgeblendet.
    5. +
  5. +
    +
    +
    +
    + Wenn die app nicht installiert ist, fügen wir einen Click-Ereignis-Listener zur Schaltfläche, so dass die Funktion install() ausgeführt wird, wenn die Schaltfläche geklickt wird.
    +
    +
    +
    +
    6. +
  6. Wenn die Schaltfläche angeklickt wird, und die Funktion install() ausgeführt wird, wird die Betriebsstätte für die manifest-Datei in eine Variable namens manifest_url und installieren dann die app unter Verwendung navigator.mozApps.install(manifest_url), einen Verweis auf die Installation in der InstallLocFind-Variablen zu speichern. Sie werden bemerken, dass diese Installation auch Erfolg und Fehler-Ereignisse auslöst, damit Sie Aktionen abhängig ausführen können, ob die Installation erfolgreich oder nicht passiert ist.
    7. +
+

Vielleicht möchten Sie den Umsetzung Stand der API prüfen, wenn dann aber zuerst nach installierbare Webanwendungen.

+
+
+
+ Hinweis: Installierbare offene Web-Anwendungen haben eine Sicherheitsrichtlinie "einzelne app pro Herkunft"; Grundsätzlich können Sie nicht mehr als eine installierbare app pro Herkunft hosten. Dies vereinfacht das Testen ein wenig komplizierter, aber es gibt noch Wege, um dieses, wie das Erstellen von verschiedenen Subdomains für apps, testen sie mit der Firefox-OS-Simulator, oder testen die Install-Funktionalität auf Firefox Aurora/nächtliche, welches Ihnen erlaubt zu installierbare Webanwendungen auf dem Desktop zu installieren. Siehe FAQs über apps Manifeste für weitere Informationen zur Herkunft.
+
+
+
+

WebRT APIs (APIs auf der Grundlage von Berechtigungen)

+
+
+
+ Es gibt eine Reihe von WebAPIs, aber die benötigen spezielle Berechtigungen für dieses Feature aktiviert werden. Apps können registrieren Berechtigungsanforderungen innerhalb der manifest.webapp-Datei wie folgt:
+
+  
+
+ 
// Neuer Key im Manifest : "permissions"
+// Anforderung der Zugriffe auf eine belibige Anzahl von APIs
+// Hier bitten wir um die berechtigung für die SystemXHR API
+"permissions": {
+    "systemXHR": {}
+}
+
+
+ Die drei Stufen der Berechtigung sind wie folgt:
+
+  
+
+ +
+
+ Weitere Informationen zu app-Berechtigungsstufen, Arten von verpackten apps lesen. Sie finden weitere Informationen über Berechtigungen welche APIs erfordern , und welche Berechtigungen sind erforderlich, um App-Berechtigungen.
+
+  
+
+
+
+
+ Es ist wichtig zu beachten, dass nicht alle Web-APIs in der Firefox-OS-Simulator umgesetzt werden.
+
+
+

Tools & Testen

+
+
+ Testen ist unglaublich wichtig, wenn mobile Geräte unterstützt. Es gibt viele Optionen zum Testen von installierbaren open-Web-apps.
+
+  
+
+

Firefox OS Simulator

+
+
+ Installation und Verwendung der Firefox-OS-Simulator ist der einfachste Weg zum aufstehen und laufen mit Ihrer app. Nach der Installation des Simulators ist es aus dem Tools-> Web Developer-> Firefox-OS-Simulator-Menü zugänglich. Der Simulator startet mit einer JavaScript-Konsole, damit Sie Ihre Anwendung in den Simulator Debuggen können.
+
+  
+
+

App Manager

+
+
+ Das neue Kind auf den Block im Hinblick auf die Testtools nennt man den App-Manager. Mit diesem Tool können Sie Verbindung mit einem kompatiblen Gerät über USB (oder ein Firefox-OS-Simulator) desktop Firefox, apps direkt auf das Gerät schieben, apps zu validieren und Debuggen sie, wie sie auf dem Gerät ausgeführt.
+
+  
+
+

Unit Tests

+
+
+ Unit-Tests sind sehr wertvoll, wenn Sie auf verschiedenen Geräten zu testen und baut. jQuery's QUnit ist eine beliebte Client-seitige Dienstprogramm zum Testen, aber können Sie einen beliebigen Satz von Testtools, die Sie möchten.
+
+  
+
+
+

Firefox OS auf einem Gerät installieren

+
+
+
+ Da Firefox-OS ein open-Source-Plattform ist sind Code und Tools Erstellen und installieren Firefox-OS auf Ihrem eigenen Gerät verfügbar. Build sowie Installationsanweisungen und Anmerkungen zu welchen Geräten es auf, installiert werden kann finden Sie auf MDN.
+
+  
+
+
+
+ Spezielle Firefox-OS Entwickler Vorschau Geräte stehen zur Verfügung: Lesen Sie unsere Entwickler-Vorschau-Telefon-Seite für weitere Informationen.
+
+  
+
+  
+
+
+

App-einreichen und Verteilung

+
+

Wenn Ihre app abgeschlossen ist, können Sie es selbst hosten wie eine standard-Website oder app (Lesen Sie self-publishing-Anwendungen für weitere Informationen), oder es kann eingereicht werden, auf den Firefox-Markt. Ihre Anwendung Manifest überprüft werden können Sie wählen, welche Geräte Ihr app unterstützt (z.B. Firefox OS, Desktop, Firefox, Firefox Mobile, Firefox Tablet). Sobald validiert, können die app Liste innerhalb der Marktplatz Sie fügen Sie zusätzliche Informationen über Ihre app (Screenshots, Beschreibungen, Preise, etc.) und offiziell einreichen. Sobald die App genehmigt ist, ist Ihre app der Welt für die Beschaffung und Installation zur Verfügung.

+
+

Marktplatz & Mehr Angaben

+
+
    +
  1. Senden Sie eine App auf den Firefox-OS-Marktz
    2. +
  2. Marktplatz-Prüfkriterien
    3. +
  3. + +
    4. +
+

 

+

 

+

Übersetzung bei Enes E.

+
diff --git a/files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html b/files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html new file mode 100644 index 0000000000..b262d5f208 --- /dev/null +++ b/files/de/archive/b2g_os/quickstart/einfuerung_zu_firefox_os/index.html @@ -0,0 +1,13 @@ +--- +title: Einführung zu Firefox OS +slug: Archive/B2G_OS/Quickstart/Einfuerung_zu_Firefox_OS +translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +--- +
+

Firefox OS ist ein neues Mobilbetriebssystem, entwickelt von Mozillas Boot to Gecko (B2G) Projekt. Es besteht aus einem Linux Kernel und bootet als eine auf Gecko basierende Laufzeitumgebung, die es Nutzern ermöglicht Anwendungen, geschrieben in HTML, JavaScript, und mit anderen offenen APIs für Webanwendungen, auszuführen.

+
+

Firefox OS (also referred to by its codename "Boot to Gecko" or "B2G") is Mozilla's open source mobile operating system, based a Linux kernel, which boots into a Gecko-based runtime engine that lets users run applications developed entirely using HTML, CSS, JavaScript, and open web application APIs. Firefox OS is a mobile operating system that's free from proprietary technology while still a powerful platform that provides application developers an opportunity to create excellent products. In addition, it's flexible and capable enough to make the end user happy.

+

+

Firefox OS comes with a suite of pre-installed applications called Gaia, which handle the fundamental functions of the phone such as settings, calls, SMS, taking and storing photos, etc.

+

For Web developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS are Web pages, albeit with enhanced access to the mobile device's hardware and services.

+

Firefox OS is currently under heavy development; we are constantly working on ways to make it easier for you to use and hack on Gaia and create apps. However, you need knowledge about systems in order to do things like build the entire Firefox OS stack, or flash a phone with a build of Firefox OS. To find such information, and lots more besides, head on over to our Firefox OS content zone.

diff --git a/files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html b/files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html new file mode 100644 index 0000000000..e4a00e9335 --- /dev/null +++ b/files/de/archive/b2g_os/quickstart/for_mobile_developers/index.html @@ -0,0 +1,40 @@ +--- +title: App development for mobile developers +slug: Archive/B2G_OS/Quickstart/For_mobile_developers +translation_of: Archive/B2G_OS/Quickstart/For_mobile_developers +--- +
+

If you are a native mobile platform developer, why should you look into developer open web apps? This article talks you through open web app advantages, and the basic steps required to create one.

+
+

Advantages

+

For mobile application developers, the open web apps project offers these advantages:

+ +

Steps to developing a Web app

+
+
+ 1. Develop your app using open Web technologies.
+
+ You probably already know at least a bit about HTML, CSS, and JavaScript. The Learn section of this website has resources to help you ramp up even more. As a mobile app developer, you already have a Mobile First approach to Web design.
+
+ 2. Add an app manifest.
+
+ All that inherently separates a Web app from a normal website is a single, JSON-format text file.
+
+ 3. Publish the app, either on your own site or in an app store (or both).
+
+ Publishing it yourself requires adding some code to your site to manage installing and updating the app in users' browsers.
+
+

Optional features

+

{{ page("/en-US/docs/Web/Apps/For_Web_developers", "Optional_features") }}

+

Useful technologies

+

See Useful technologies.

+

See also

+ diff --git a/files/de/archive/b2g_os/quickstart/index.html b/files/de/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..ebe1f7c220 --- /dev/null +++ b/files/de/archive/b2g_os/quickstart/index.html @@ -0,0 +1,49 @@ +--- +title: Build +slug: Archive/B2G_OS/Quickstart +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +
+

Quickstart information on coding open web apps.

+
+
+
+ Introduction to open web apps
+
+ What are open web apps? How they differ from regular web pages? Why is this significant? This article aims to answer these questions and more.
+
+ Your first app
+
+ This article takes you through the basic steps and additional knowledge on top of regular web development required to create installable open web apps.
+
+ Introduction to Firefox OS
+
+ An introduction to Firefox OS, Mozilla's new open web app-based mobile platform.
+
+ Introduction to manifests
+
+ An FAQ designed to answer any questions you may have about manifests, hosting apps, origins, and other such topics.
+
+ App development for web developers
+
+ If you're a web developer, how do open web apps differ from what you're used to? This article explains all.
+
+ App development for mobile developers
+
+ If you're a native mobile application developer, what advantages can open web apps bring to you, and how do they differ from what you are used to? Here are some ideas.
+
+ Developing app functionality
+
+ This page talks about the kinds of different functionality that you might want to build into your apps, with links to further information.
+
+ Payments
+
+ How do you build functionality to make people pay for installing your open web apps? Here is the lowdown.
+
+ App tools
+
+ Last for this section, we provide some links to more information on the tools available to help you develop great open web apps.
+
diff --git a/files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html b/files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html new file mode 100644 index 0000000000..f0767b57ed --- /dev/null +++ b/files/de/archive/b2g_os/quickstart/open_web_apps_and_web_standards/index.html @@ -0,0 +1,38 @@ +--- +title: Offene Web Apps und Web Standards +slug: Archive/B2G_OS/Quickstart/Open_Web_apps_and_Web_standards +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +

Multi devices

+

Das Web ist die Plattform

+

Open Web Apps are a great opportunity for those who need to develop applications that work on the largest number of devices, and for those who cannot afford to develop an app for every vendor platform (such as Android, iOS, and "classical" desktop web browsers). The difference between an app and a website is that you can install an app and more thoroughly integrate it into your device. It’s not a bookmark — it’s part of a system. Open Web Apps hold that great promise. They are an opportunity that we should not miss, otherwise the Web might become fragmented once more.

+

With this in mind it should be clear that Open Web Apps (OWA in short) are intended to be standardized and to become part of "the Web". If successful, OWA should eventually work on all browsers, operating systems anddevices.

+

At Mozilla we are working hard to create this apps platform that is backed entirely by the open Web. It’s not intended to be a “Mozilla platform” or a “Firefox platform”. The Web is the platform. We’re creating a set of open APIs and implementations to show how portable apps can exist on the Web without vendor lock-in. Other groups like Facebook and Google Chrome are also working on apps platforms backed by the Web. Facebook apps are meant to hook into Facebook and Chrome apps are designed for Chrome OS devices and Google servers. Chrome apps are the most similar to Open Web Apps. We continue to collaborate with the Google Chrome team as app standards evolve and we definitely share a lot of the same vision. There is tremendous potential for all Web based app platforms to converge and we invite all vendors to help us build the right Open Web App APIs.

+

Even though currently you must have a Mozilla Firefox-based engine ("Web runtime") to use Open Web Apps, it is not intended that this always will be the case. Many parts of the Open Web Apps project are still being worked out and it isn't possible to implement everything in all browsers at once. Although many parts of Open Web Apps are already standardized, many other parts are still in flux. It is intended and hoped that Open Web Apps will be a standard capability that is available in all major browsers.

+

Therefore, when you read the MDN pages that deal with Open Web Apps, please keep in mind that even though much of the information is specific to Firefox right now, it will hopefully enable you to develop Open Web Apps for all browsers in the future.

+

Web standards

+

OWA technology is not a single piece, it is an umbrella that groups many different technologies and some of them are very young. At the moment, parts of OWA are standardized (HTML5, CSS, JavaScript, IndexedDB, etc.). Other parts are not yet standardized and the Mozilla implementation is thus specific to Firefox or to some other Mozilla technology. As the Mozilla mission is to share and to empower everyone, this situation is only temporary. That's why in the OWA docs we will try to clearly identify the parts of OWA that are not yet standardized.

+

Please also note that there may be some OWA-related proposals and potential standards that are not used by Mozilla.

+

Intended eventual standards

+

So here are the parts not standardized yet across the different Web platforms and that still are Firefox-only for the moment:

+ +

Marketplace

+

Buy Once, Run Everywhere

+

From the ground up Mozilla has been building an apps system that lets users buy an app once and run it on all of their HTML5 devices. Very soon Mozilla will launch the first Firefox OS phone but that will be just one device on which to run your apps. When you purchase an app through the Firefox Marketplace, the system installs a receipt on your device. The receipt is a JSON Web Token with metadata that links to the Marketplace’s public key and its verification service URL. When an app starts up it can verify the receipt but the receipt on the device is not tied to the Firefox Marketplace. The receipt is just a cryptographically verifiable proof of purchase. Anyone can sell open Web apps if they follow the receipt specs. When you buy an app, it is intended to be portable across any device that supports the Open Web Apps system.

+

Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. Firefox for Android will let you install and run apps (you can try it today on the nightly build). Installed app icons go to your home screen just like regular Android apps. You can also install and run Web apps on your Windows, Mac, or Linux desktop using Firefox (this currently works in the nightly build). Currently some version of Firefox is required, but it is intended that the Open Web Apps system will eventually be supported by all major browsers as a set of standards. From day one Mozilla has included all major HTML5 compliant browsers in its proof of concepts; you can take a look at this hosted JavaScript shim for ideas on how to support the apps platform on a non-Firefox browser.

+

In the future the Open Web Apps system will support syncing your installed apps across devices. Since receipts are portable you could just sync them yourself if you wanted to. In case it’s not obvious, you can always run a free open Web app in any browser because it is no different than a website. It might, however, use new mobile specific web APIs which are not implemented on all platforms.

+

WebPayment API

+

Commerce For Apps

+

Part of the success of mobile app platforms like iOS and Android is that they make it very easy to try out new business models through mobile payments. Those models are still evolving but commerce is no doubt something that, at the moment, is awkward on the desktop Web and more natural on mobile. Specifically, it’s very convenient to charge something to your phone bill when you’re already accessing it from your phone anyway. With the launch of Firefox OS, the apps ecosystem will support app purchases and in-app payments through the WebPayment API. Supporting commerce is crucial for the growth of an apps platform. The use of the proposed payment API is completely optional. Mozilla won’t prevent any app from using its own in-app payment system.

+

See also

+ diff --git a/files/de/archive/b2g_os/releases/1.4/index.html b/files/de/archive/b2g_os/releases/1.4/index.html new file mode 100644 index 0000000000..47b18c0fbc --- /dev/null +++ b/files/de/archive/b2g_os/releases/1.4/index.html @@ -0,0 +1,71 @@ +--- +title: Firefox OS 1.4 for developers +slug: Archive/B2G_OS/Releases/1.4 +translation_of: Archive/B2G_OS/Releases/1.4 +--- +
+

Firefox OS 1.4 ist derzeit noch eien Vorabversion. Die Gecko Komponenten basieren auf Firefox 30 (dazu:Firefox 30 release notes for developers). Diese Seite beschreibt die neu hinzugefügten Entwicklerfunktionen in Firefox OS 1.4.

+
+

CSS

+

Gecko allgemein:

+ +

JavaScript

+

SpiderMonkey general:

+ +

Interfaces/APIs/DOM

+

Firefox OS specific:

+ +

Gecko general:

+ +

SVG

+

Gecko general:

+ +

Manifest

+ +

See also

+ +

Older versions

+

+ +

+

diff --git a/files/de/archive/b2g_os/releases/2.0/index.html b/files/de/archive/b2g_os/releases/2.0/index.html new file mode 100644 index 0000000000..175d141e00 --- /dev/null +++ b/files/de/archive/b2g_os/releases/2.0/index.html @@ -0,0 +1,112 @@ +--- +title: Firefox OS 2.0 for developers +slug: Archive/B2G_OS/Releases/2.0 +translation_of: Archive/B2G_OS/Releases/2.0 +--- +
+

This page details the developer features newly implemented in Gecko that are specific to Firefox OS 2.0.

+
+ +
+

Firefox OS 2.0's Gecko component is based on Firefox 31/32.

+
+ +

New product features

+ +

This section provides a summary of the new features available in Firefox OS 2.0. For more details on specific platform changes (API additions, etc.), see the Platform additions in detail section.

+ +
+
NFC
+
This release includes support for device-to-device content sharing support with NFC (Near Field Communication). You can pair your device with another, then swipe to share your contacts, media, or favorite URLs with others.
+
Telephony
+
Firefox OS now supports both IPv4 and IPv6 addresses in the network manager.
+
Find My Device
+
If you’ve lost your Firefox OS smartphone, Find My Device can help you find it (see the http://find.firefox.com website). You can see it on a map, make it play a sound and have it display a message. You can also remotely lock it or delete your personal info. To get started, create a Firefox Account (Settings > Firefox Accounts on your device) and enable Find My Device (Settings > Find My Device).
+
Media
+
You can now create your own ringtones using your own music collection, or songs you download from the Web.
+
Camera
+
The Camera app now supports various focus modes: Touch, Continuous Auto and Face tracking.
+
Productivity
+
We've done a visual refresh of the Email, Calender, and Clock apps.
+
Homescreen
+
Firefox OS 2.0 introduces a simpler vertical-scrolling homescreen with larger icons.
+
Edge-gesture app switching
+
Edge gestures are now available for switching between apps (swipe your thumb from the left edge of the screen to the right and vice versa, to switch between multiple open apps.)
+
+ +

New partner features

+ +
+
E.ME integration
+
E.ME integration provides direct access to web apps while configurable search providers can search the web at the same time.
+
+ +

New DevTools features

+ +

The Firefox Developer Tools have had a large number of features added in Firefox versions 31 and 32; these aren't Firefox OS-specific, but you can take advantage of them when debugging your Firefox OS apps through WebIDE. To find out more, read:

+ + + +

Platform additions in detail

+ +
+

Note: Our list here includes features most important to Firefox OS. For an expanded list of general Gecko feature additions (which are generally also present in Firefox OS 2.0), consult the Firefox 31 release notes for developers and Firefox 32 release notes for developers.

+
+ +

Web API

+ + + +

CSS

+ + + +

Technology support improvements

+ + + +

Older versions

+ +

+ +

diff --git a/files/de/archive/b2g_os/releases/index.html b/files/de/archive/b2g_os/releases/index.html new file mode 100644 index 0000000000..3edbcd4c75 --- /dev/null +++ b/files/de/archive/b2g_os/releases/index.html @@ -0,0 +1,24 @@ +--- +title: Firefox OS developer release notes +slug: Archive/B2G_OS/Releases +tags: + - Firefox OS + - NeedsTranslation + - TopicStub +translation_of: Archive/B2G_OS/Releases +--- +

Firefox OS release notes by version

+

This section provides articles covering each new release of Gaia and Gecko for Firefox OS, explaining what features were added and bugs eliminated in each update. There is also a linked summary table showing what APIs are supported by each version of Firefox OS.

+
+ {{ListSubpages("",1,0,1)}}
+

Other supporting information

+
+
+ Firefox OS API support table
+
+ Lists the different APIs available, and what versions of Firefox have support for them.
+
+ App permissions
+
+ Lists hosted, privileged and certified APIs, along with information on the permissions they need to have set in the App Manifest of your installable apps, such as the manifest permission name, app type required, description, access property, and default permission.
+
diff --git a/files/de/archive/b2g_os/simulator/index.html b/files/de/archive/b2g_os/simulator/index.html new file mode 100644 index 0000000000..5fa8770578 --- /dev/null +++ b/files/de/archive/b2g_os/simulator/index.html @@ -0,0 +1,86 @@ +--- +title: Firefox-OS-Simulator +slug: Archive/B2G_OS/Simulator +translation_of: Archive/B2G_OS/Simulator +--- +
+

Diese Seite beschreibt den Firefox-OS-Simulator für Entwickler für Firefox OS 1.2 oder neuer. Wenn Sie Apps für Firefox OS 1.1 entwickeln, sollten Sie sich stattdessen die Dokumentation für Firefox-OS-1.1-Simulator ansehen.

+
+ +

Der Firefox-OS-Simulator ist eine Version der höheren Schichten von Firefox OS, die ein Firefox-OS-Gerät simuliert, aber auf dem Desktop läuft. Dies bedeutet, dass Sie in vielen Fällen kein echtes Gerät benötigen, um Ihre App zu testen und zu debuggen. Er läuft in einem Fenster mit der selben Größe wie ein Firefox-OS-Gerät, enthält die Benutzeroberfläche sowie die integrierten Apps von FirefoxOS und simuliert viele der APIs eines Firefox-OS-Geräts.

+ +

Der Simulator wird als Firefox-Add-on gepackt und verteilt. Sobald Sie ihn heruntergeladen und in Firefox installiert haben, können Sie ihn ausführen, Apps darauf laden und mit dem App-Manager Entwicklerwerkzeuge einsetzen.

+ +

Installation

+ +

Um den Simulator zu installieren, klicken Sie auf die folgende Schaltfläche. (Es stehen mehrere Versionen zur Verfügung und zwecks maximaler Flexibilität sollten Sie alle installieren):

+ +

Simulator installieren

+ +

Um den Simulator zu starten, lesen sie die Anweisungen in der Dokumentation des App-Managers. Sobald der Simulator läuft, können Sie Apps darauf laden und dann mit dem App-Manager debuggen, genau wie mit einem echten Gerät. Ich habe unter Windows 7, Firefox 37.0.1 und mit Firefox OS Simulator die Erfahrung gemacht, dass erster Start in der WebIDE klappt nicht, dafür funktioniert 2. oder 3. Start. Auch dann, wenn eine Meldung: "Zeitüberschreitung bei der operation: connecting to runtime Firefox OS 2.0" in der WebIDE angezeigt wird.

+ +

Die Simulator-Oberfläche

+ +

Der Simulator erscheint als eigenes Fenster, so dass der simulierte Bildschirm 320×480 Pixel groß ist. Um Berührereignisse zu simulieren, können Sie mit der Maustaste klicken und die Maus bei gedrückter Taste ziehen. Durch Klicken und Ziehen von rechts nach links vom Startbildschirm aus sehen Sie also die integrierten Apps, sowie solche, die Sie hinzugefügt haben:

+ +

+ +

Der Simulator verfügt am unteren Rand über deine Symbolleiste mit zwei Schaltflächen:

+ + + +

Einschränkungen des Simulators

+ +

Beachten Sie, dass der Firefox-OS-Simulator keine perfekte Simulation ist.

+ +

Hardware-Einschränkungen

+ +

Abgesehen von der Bildschirmgröße simuliert der Simulator keine hardwareseitigen Einschränkungen eines Firefox-OS-Geräts, wie den verfügbaren Speicher oder die CPU-Geschwindigkeit.

+ +

Audio-/Video-Codecs

+ +

Die folgenden Codecs hängen von hardwarebeschleunigter Dekodierung ab und werden daher noch nicht unterstützt:

+ + + +

Dies bedeutet, dass es nicht möglich ist,  mit dem Simulator die Wiedergabe von Videos in Apps und Websites wie YouTube zu testen, die diese Codecs benötigen.

+ +

Nicht unterstützte APIs

+ +

Bestimmte APIs, die auf dem Gerät funktionieren, funktionieren nicht im Simulator, was meist daran liegt, weil die unterstützende Hardware auf dem Desktop nicht verfügbar ist. Wir haben Simulationen für bestimmte APIs, wie Geolokation, eingebaut und fügen in zukünftigen Versionen vermutlich weitere hinzu. Derzeug werden die folgenden APIs allerdings nicht unterstützt. Deren Verwendung kann zu Fehlermeldungen oder einfach falschen Ergebnissen führen:

+ + + +

Hilfe erhalten

+ +

Wenn Sie eine Frage haben, versuchen Sie, uns auf der Mailingliste dev-developer-tools oder in #devtools auf irc.mozilla.org zu erreichen.

+ +

Ausführliche Protokollierung aktivieren

+ +

In der Web-Konsole, die Sie über den App-Manager mit Ihrer App verknüpfen können, werden Nachrichten, von Ihrer App aufgezeichnet. Wenn Sie Nachrichten frühzeitig erfassen möchten, die während des Starts erscheinen, bevor die Konsole verbunden wird und funktioniert, können Sie im Simulator die ausführliche Protokollierung aktivieren.

+ +

Öffnen Sie about:config und erstellen Sie ein neue Einstellung. Der Name der Einstellung hängt von der Version des Simulators ab:

+ + + +

Setzen Sie den String-Wert auf „all“ und deaktivieren und reaktivieren Sie das Add-on im Add-ons-Manager. Jetzt erscheinen zusätzliche Nachrichten über die Ausführung des Simulators in der Browser-Konsole.

diff --git a/files/de/archive/b2g_os/troubleshooting/index.html b/files/de/archive/b2g_os/troubleshooting/index.html new file mode 100644 index 0000000000..a83cc46042 --- /dev/null +++ b/files/de/archive/b2g_os/troubleshooting/index.html @@ -0,0 +1,44 @@ +--- +title: Troubleshooting Firefox OS +slug: Archive/B2G_OS/Troubleshooting +translation_of: Archive/B2G_OS/Troubleshooting +--- +
+

This article provides tips for resolving common problems you may have while using Firefox OS. Please feel free to add more content to this page!

+
+ +

Networking problems

+ +

If you are having trouble connecting to Wi-Fi networks, it may be helpful to delete the Wi-Fi configuration file:

+ +
adb shell rm /data/misc/wifi/wpa_supplicant.conf
+adb reboot
+
+ +
+

Note: These instructions assume you have configured the udev settings for your device.

+
+ +

Bricked Phone

+ +

If you happen to brick the phone, by, for example, trying to flash wrong images on it,  try rebooting into the bootloader (fastboot or heimdal depending on your phone). The exact sequence varies depending on the phone. Try removing the usb cable, removing and then re-inserting the battery. For the Unagi and Otoro, press and hold volume up and power for several seconds until you see the splash screen. Verify that the phone is in bootloader mode by using fastboot devices (or heimdall devices for some Samsung phones). Once you can see your phone using fastboot devices, you can use ./flash.sh to flash your image for Unagi.

+ +

Flashing Red LED (otoro/unagi)

+ +

This means that the battery is too low to boot the phone. You can let it charge for a while (until the red LED stops flashing and a little bit longer), or you can unplug the USB cable, remove the battery, insert the USB cable, and re-insert the battery.

+ +

Failure to receive SMS after switching over from iPhone

+ +

If you have switched your SIM card over from an iPhone to a Firefox OS (or another different platform) device, you may run into a problem whereby you can no longer receive text messages from iPhone users. This is because iPhone to iPhone SMS messages are sent using iMessage, which works by routing iPhone-to-iPhone messages through Apple's servers instead of sending them as actual text messages, saving iPhone users money. Unfortunately when you leave iPhone, iMessage has no way of knowing you've left and SMS from other iPhone users will still go through iMessage, meaning that you won't receive them.

+ +

To fix this you have to turn off iMessage for your SIM; there is a guide on how to do this at imore.com — read Here's how to turn off iMessage.

+ +

Device not appearing to ADB on OSX

+ +

When running adb devices in OSX, some devices may simply not appear in the device list, for a variety of reasons. This can be fixed by adding your device's vendor ID to your ~/.android/adb_usb.ini file, to provide a hint to ADB for finding your device.

+ +
+

Note: See this stackoverflow post for a lot more detail, including how to find the vendor ID of the attached device, and how to add it into adb_usb.ini.

+
+ +

 

diff --git a/files/de/archive/css3/index.html b/files/de/archive/css3/index.html new file mode 100644 index 0000000000..51f6b689bb --- /dev/null +++ b/files/de/archive/css3/index.html @@ -0,0 +1,976 @@ +--- +title: CSS3 +slug: Archive/CSS3 +tags: + - CSS + - CSS Bezüge + - Fortgeschritten +translation_of: Archive/CSS3 +--- +

CSS3 ist die neuste Version der Cascading Style Sheets Sprache und erweitert damit CSS2.1. Sie bringt langerwartete Neuheiten, wie abgerundete Ecken, Schatten, Verläufe, Übergänge und Animationen, sowie neue Layouts wie z.B. multi-columns, flexible box oder grid layouts. Experimentelle Teile sind vendor-prefixed und sollten entweder in Productionsumgebungen vermieden oder mit großer Vorsicht verwendet werden, da sich sowohl Syntax, als auch Semantik in Zukunft noch ändern könnten.

+ +

Module und der Standardisierungsprozess

+ +

CSS2 brauchte 9 Jahre, von August 2002 bis Juni 2011, um als empfohlen angesehen zu werden. Was daran lag, dass ein paar zweitrangige Funktionen alle Vorschriften zurückhielten. Um die Standardisierung der fehlerfreien Funktionen zu beschleunigen, hat die CSS Working Group der W3C in der  Beijing-Doktrin beschlossen die CSS Sprache in mehrere Bausteine, Module genannt, zu zerlegen. Jedes Modul ist jetzt ein eigenständiger Teil der Sprache und bewegt sich mit eigener Geschwindigkeit zur Standardisierung zu. Während manche Module bereits von der W3C empfohlen werden, sind andere noch im frühen Entwicklungsstadium. Neue Module werden hinzugefügt, wenn neue Funktionen gebraucht werden.

+ +

CSS Modules and Snapshots as defined since CSS3 Formal gibt es kein CSS3 Standard. Da jedes Modul für sich standardisiert wird, besteht das Standard-CSS aus einem CSS2.1, dass verbessert und durch vollständige Module, die nicht zwingend auf dem selben Stand sind, erweitert wurde. Zu jeder Zeit kann eine Schattenkopie des CSS Standard definiert werden, indem man CSS2.1 und die ausgereiften Module betrachtet.

+ +

Das W3 Konsortium veröffentlicht regelmäßig solche Schattenkopien, wie in 2007, 2010 und 2015.

+ +

Obwohl momentan kein Modul über dem Level 3 standardisiert wurde, wird sich das in Zukunft ändern. Manche Module, wie Selectors 4 oder CSS Borders und Backgrounds Level 4 sind bereits im Editor's Draft, obwohl sie noch nicht den First Published Working Draft Status erreicht haben.

+ +

CSS Modulstatus

+ +

Stabile Module

+ +

Ein paar CSS Module sind bereits ziemlich stabil und haben bereits eines der drei Empfehlungslevel der CSSWG erreicht: Empfehlungskandidat, vorgeschlagene Empfehlung der Empfohlen. Diese können ohne Prefixe benutzt werden und sind weitesgehend stabil, obwohl ein paar Funktionen noch auf den Empfehlungskandidat-Status herabgesetzt werden können.

+ +

These modules extend and amend the CSS2.1 specification which build the core of the specification. Together with it, they are the current snapshot of the CSS specification.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Colors", "", "") }}{{ Spec2("CSS3 Colors") }} since June 7th, 2011
+

Adds the {{ cssxref("opacity") }} property, and the hsl(), hsla(), rgba() and rgb() functions to create {{cssxref("<color>")}} values. It also defines the currentColor keyword as a valid color.

+ +

The transparent color is now a real color (thanks to the support for the alpha channel) and is a now an alias for rgba(0,0,0,0.0) .

+ +

It deprecates the system-color keywords that shouldn't be used in a production environment anymore.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Selectors", "", "") }}{{ Spec2("CSS3 Selectors") }} since September 29th, 2011
+

Adds:

+ +
    +
  • Substring matching attribute selectors, E[attribute^="value"], E[attribute$="value"], E[attribute*="value"] .
    • +
  • New pseudo-classes: {{ cssxref(":target") }}, {{ cssxref(":enabled") }} and {{ cssxref(":disabled") }}, {{ cssxref(":checked") }}, {{ cssxref(":indeterminate") }}, {{ cssxref(":root") }}, {{ cssxref(":nth-child") }} and {{ cssxref(":nth-last-child") }}, {{ cssxref(":nth-of-type") }} and {{ cssxref(":nth-last-of-type") }}, {{ cssxref(":last-child") }}, {{ cssxref(":first-of-type") }} and {{ cssxref(":last-of-type") }}, {{ cssxref(":only-child") }} and {{ cssxref(":only-of-type") }},{{ cssxref(":empty") }}, and {{ cssxref(":not") }}.
    • +
  • Pseudo-elements are now characterized by two colons rather than one: :after becomes {{ cssxref("::after") }}, :before becomes {{ cssxref("::before") }}, :first-letter becomes {{ cssxref("::first-letter") }}, and :first-line becomes {{ cssxref("::first-line") }}.
    • +
  • The new general sibling combinator ( h1~pre ).
    • +
+
+ +

The next iteration of the Selectors specification is already in progress, though it still hasn't reached the First Public Working Draft stage.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Namespaces", "", "") }}{{ Spec2("CSS3 Namespaces") }} since September 29th, 2011
+

Adds the support for the XML Namespaces by defining the notion of CSS qualified name, using the ' | ' syntax and adding the {{ cssxref("@namespace") }} CSS at-rule.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Media Queries", "", "") }}{{ Spec2("CSS3 Media Queries") }} since June 19th, 2012
+

Extends the former media type ( print, screen, … ) to a full language allowing queries on the device media capabilities like only screen and (color) .

+ +

Media queries are not only used in CSS document but also in some attributes of HTML Elements, like the {{ htmlattrxref("media","link") }} attribute of the {{ HTMLElement("link") }} element.

+
+ +

The next iteration of this specification is in the work, allowing to tailor a Web site regarding the input methods available on the user agent, with new media features like hover or pointer. Detection of EcmaScript support, using the script media features is also proposed.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Style", "", "") }}{{ Spec2("CSS3 Style") }} since November 7th, 2013
Formally defines the syntax of the content of the HTML style global attribute.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Backgrounds", "", "") }}{{ Spec2("CSS3 Backgrounds") }}
+

Adds:

+ +
    +
  • Support, on backgrounds, for any type of {{cssxref("<image>")}}, and not only for uri() defined ones.
    • +
  • Support for multiple background images.
    • +
  • The {{ cssxref("background-repeat") }} space and round values, and for the 2-value syntax of this CSS property.
    • +
  • The {{ cssxref("background-attachment") }} local value.
    • +
  • The CSS {{ cssxref("background-origin") }}, {{ cssxref("background-size") }}, and {{ cssxref("background-clip") }} properties.
    • +
  • Support for curved border corners, with the CSS {{ cssxref("border-radius") }}, {{ cssxref("border-top-left-radius") }}, {{ cssxref("border-top-right-radius") }}, {{ cssxref("border-bottom-left-radius") }}, and {{ cssxref("border-bottom-right-radius") }} properties.
    • +
  • Support for the use of an {{cssxref("<image>")}} as the border with the CSS {{ cssxref("border-image") }}, {{ cssxref("border-image-source") }}, {{ cssxref("border-image-slice") }}, {{ cssxref("border-image-width") }}, {{ cssxref("border-image-outset") }}, and {{ cssxref("border-image-repeat") }} properties.
    • +
  • Support for shadows of the element with the CSS {{ cssxref("box-shadow") }} property.
    • +
+
+ +

The CSS4 iteration of the Backgrounds and Borders specification is already in progress, though it still hasn't reached the First Public Working Draft stage, it plans to add the ability to clip a border (with the CSS {{ cssxref("border-clip") }}, {{ cssxref("border-clip-top") }}, {{ cssxref("border-clip-right") }}, {{ cssxref("border-clip-bottom") }}, and {{ cssxref("border-clip-left") }} properties) or to control the shape of the border in a corner (using the CSS {{ cssxref("border-corner-shape") }} property).

+ + + + + + + + + + + +
{{ SpecName("CSS3 Multicol", "", "") }}{{ Spec2("CSS3 Multicol") }}
Adds support for easy multi-column layouts using the CSS {{ cssxref("columns") }}, {{ 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("break-after") }}, {{ cssxref("break-before") }}, and {{ cssxref("break-inside") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Speech", "", "") }}{{ Spec2("CSS3 Speech") }}
Defines the speech media type, an aural formatting model and numerous properties specific for speech-rendering user agents.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Images", "", "") }}{{ Spec2("CSS3 Images") }}
+

Defines the {{cssxref("<image>")}} data type.

+ +

Extends the url() syntax to support image slices using media fragments.

+ +

Adds:

+ +
    +
  • The dppx unit to the {{cssxref("<resolution>")}} data type.
    • +
  • The image() function as a more flexible alternative to url() to define an image from an url.
    + At risk : due to insufficient browser support, standardization of the image() function may be postponed to the next iteration of this module .
    • +
  • Support for linear-gradient(), repeating-linear-gradient(), radial-gradient() and repeating-radial-gradient().
    • +
  • The ability to define how a replaced element should fit in its element, using the CSS {{ cssxref("object-fit") }} property.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("object-fit") }} and property may be postponed to the next iteration of this module .
    • +
  • The ability to override the resolution and orientation of an external image using the CSS {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties.
    + At risk : due to insufficient browser support, standardization of the {{ cssxref("image-resolution") }} and {{ cssxref("image-orientation") }} properties may be postponed to the next iteration of this module .
    • +
+
+ +

The CSS Image Values and Replaced Content Level 4 which will supersede CSS Image Level 3 is in development and is a {{Spec2("CSS4 Images")}}.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Values", "", "") }}{{ Spec2("CSS3 Values") }}
+

Makes initial and inherit keywords usable on any CSS property.

+ +

Formally defines the CSS data types of CSS 2.1, that were implicitely defined by their grammar token and some textual precisions.

+ +

Adds:

+ +
    +
  • Definition for new font-relative length units: rem and ch .
    • +
  • Definition for viewport-relative length units: vw, vh, vmax, and vmin .
    • +
  • Precision about the real size of the absolute length units, which are not really absolute, but defined in relation with the reference pixel .
    • +
  • Definition for {{ cssxref("<angle>") }}, {{cssxref("<time>")}}, {{cssxref("<frequency>")}}, {{cssxref("<resolution>")}}.
    • +
  • Normative value to the definition of {{cssxref("<color>")}}, {{cssxref("<image>")}}, and {{cssxref("<position>")}}.
    • +
  • Definition for the {{ cssxref("calc", "calc()") }}, {{ cssxref("attr", "attr()")}}, and toggle() functional notations.
    + At risk: due to insufficient browser support, standardization of the calc(), attr(), and toggle() functional notations may be postponed to the next iteration of this module.
    • +
+
+ +

Several types definition, like <ident> and <custom-ident>, have been deferred to CSS Values and Units Module Level 4.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Flexbox", "", "") }}{{ Spec2("CSS3 Flexbox") }}
Add a flexbox layout to the CSS {{ cssxref("display") }} property and several new CSS properties to control it: {{ cssxref("flex") }}, {{ cssxref("flex-align") }}, {{ cssxref("flex-direction") }}, {{ cssxref("flex-flow") }}, {{ cssxref("flex-item-align") }}, {{ cssxref("flex-line-pack") }}, {{ cssxref("flex-order") }}, {{ cssxref("flex-pack") }}, and {{ cssxref("flex-wrap") }}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Conditional", "", "") }}{{ Spec2("CSS3 Conditional") }}
Adds features for conditional processing of parts of style sheets, conditioned on capabilities of the browser or the document the style sheet is being applied to. It consists mainly in allowing nested at-rules inside {{ cssxref("@media") }} and the adding of a new CSS at-rule, {{ cssxref("@supports") }}, and a new DOM method {{domxref("CSS.supports()")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text Decoration", "", "") }}{{ Spec2("CSS3 Text Decoration") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-decoration") }} property by making it a shorthand for the CSS {{ cssxref("text-decoration-line") }}, {{ cssxref("text-decoration-color") }}, and {{ cssxref("text-decoration-style") }} properties. And adds the {{ cssxref("text-decoration-skip") }}, and {{ cssxref("text-underline-position") }} properties.
    • +
+ +

Adds:

+ +
    +
  • Support for East-Asian-script emphasis marks with the CSS {{ cssxref("text-emphasis") }}, {{ cssxref("text-emphasis-style") }}, {{ cssxref("text-emphasis-color") }}, and {{ cssxref("text-emphasis-position") }} properties.
    • +
  • Support for script shadows with the CSS {{ cssxref("text-shadow") }} property.
    • +
+ +

Clarifies:

+ +
    +
  • The paint order of the decorations.
    • +
+ +

At risk: due to insufficient browser support, standardization of the text-decoration-skip, line positioning rules and the ability to place both emphasis marks and ruby above the same base text may be postponed to the next iteration of this module.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fonts", "", "") }}{{ Spec2("CSS3 Fonts") }}
+

Amends the CSS2.1 Font matching algorithm to be closer to what is really implemented.

+ +

Adds:

+ +
    +
  • Support for downloadable fonts via the CSS {{ cssxref("@font-face") }} at-rule.
    • +
  • The control of the contextual inter-glyph spacing via the CSS {{ cssxref("font-kerning") }} property.
    • +
  • The choice of language-specific glyphs via the CSS {{ cssxref("font-language-override") }} property.
    • +
  • The choice of glyphs with specific OpenType features via the CSS {{ cssxref("font-feature-settings") }} property.
    • +
  • The control of the aspect ratio to use when fallback fonts are selected via the CSS {{ cssxref("font-size-adjust") }} property.
    • +
  • The choice of alternative font faces using the CSS {{ cssxref("font-stretch") }}, {{ cssxref("font-variant-alternates") }}, {{ cssxref("font-variant-caps") }}, {{ cssxref("font-variant-east-asian") }}, {{ cssxref("font-variant-ligatures") }}, {{ cssxref("font-variant-numeric") }}, and {{ cssxref("font-variant-position") }} properties. It also extends the related CSS {{ cssxref("font-variant") }} shorthand property and introduces the {{ cssxref("@font-feature-values") }} at-rule.
    • +
  • The control of the automatic generation of an oblique or bold face when none are found via the CSS {{ cssxref("font-synthesis") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Cascade", "", "") }}{{ Spec2("CSS3 Cascade") }}
+

Adds:

+ +
    +
  • The initial, unset values for properties.
    • +
  • The CSS {{ cssxref("all") }} property.
    • +
  • The scoping mechanism.
    • +
+ +

Clarifies:

+ +
    +
  • Interaction of media-dependent @import statements and style sheet loading requirements.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Writing Modes", "", "") }}{{ Spec2("CSS3 Writing Modes") }}
Defines the writing modes of both horizontal and vertical scripts and clarifies how the CSS {{ cssxref("direction") }} and {{ cssxref("unicode-bidi") }} properties interact with the new CSS {{ cssxref("text-orientation") }} property, and extends them where needed.
+ + + + + + + + + + + +
{{ SpecName("CSS Shapes", "", "") }}{{ Spec2("CSS Shapes") }}
Defines geometric shapes, which can be applied to floats. These shapes describe areas, around which inline content wraps instead of wrapping around the bounding box.
+ + + + + + + + + + + +
{{ SpecName("CSS Masks", "", "") }}{{ Spec2("CSS Masks") }}
Defines a way for partially or fully hiding portions of visual elements. It describes how to use another graphical element or image as a luminance or alpha mask.
+ +

Modules in the refining phase

+ +

Specifications that are deemed to be in the refining phase are already fairly stable. Though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases.

+ + + + + + + + + + + +
{{ SpecName("Web Animations", "", "") }}{{ Spec2("Web Animations") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Counter Styles", "", "") }}{{ Spec2("CSS3 Counter Styles") }}
 
+ + + + + + + + + + + +
{{ SpecName("Compositing", "", "") }}{{ Spec2("Compositing") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Syntax", "", "") }}{{ Spec2("CSS3 Syntax") }}
Clarifies how charsets are determined; minor changes in parsing and tokenization algorithms.
+ + + + + + + + + + + +
{{ SpecName("CSS Will Change", "", "") }}{{ Spec2("CSS Will Change") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transitions", "", "") }}{{ Spec2("CSS3 Transitions") }}
Allows the definition of transitions effects between two properties values by adding the CSS {{ cssxref("transition") }}, {{ cssxref("transition-delay") }}, {{ cssxref("transition-duration") }}, {{ cssxref("transition-property") }}, and {{ cssxref("transition-timing-function") }} properties.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Animations", "", "") }}{{ Spec2("CSS3 Animations") }}
Allows the definition of animations effects by adding the CSS {{ cssxref("animation") }}, {{ cssxref("animation-delay") }},{{ cssxref("animation-direction") }}, {{ cssxref("animation-duration") }}, {{ cssxref("animation-fill-mode") }}, {{ cssxref("animation-iteration-count") }}, {{ cssxref("animation-name") }}, {{ cssxref("animation-play-state") }}, and {{ cssxref("animation-timing-function") }} properties, as well as the {{ cssxref("@keyframes") }} at-rule.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Transforms", "", "") }}{{ Spec2("CSS3 Transforms") }}
+

Adds:

+ +
    +
  • the support of bi-dimensional transforms to be applied to any element using the CSS {{ cssxref("transform") }} and {{ cssxref("transform-origin") }} properties. The supported transforms are: matrix(), translate(), translateX(), translateY(), scale(), scaleX(), scaleY(), rotate(), skewX(), and skewY().
    • +
  • the support of tri-dimensional transforms to be applied to any element by adding the CSS {{ cssxref("transform-style") }}, {{ cssxref("perspective") }}, {{ cssxref("perspective-origin") }}, and {{ cssxref("backface-visibility") }} properties and extended the {{ cssxref("transform") }} property with the following transforms are: matrix 3d(), translate3d(), translateZ(),  scale3d(), scaleZ(), rotate3d(), rotateX(), rotateY(), rotateZ(), and perspective().
    • +
+ +

Note: this specification is a merge of CSS 2D-Transforms, CSS 3D-Transforms and SVG transforms.

+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Fragmentation", "", "") }}{{ Spec2("CSS3 Fragmentation") }}
Defines how partitions of a Web page should happen, that is page, column breaks, and widows and orphans handling. +

Adds:

+ +
    +
  • Support for defining the behavior of decorations, that is borders and background colors or images, when a box is breaked (at a page, column or line-break) with the CSS {{ cssxref("box-decoration-break") }} property.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Text", "", "") }}{{ Spec2("CSS3 Text") }}
+

Extends:

+ +
    +
  • the CSS {{ cssxref("text-transform") }} property with the value full-width.
    • +
  • the CSS {{ cssxref("text-align") }} property with the value start, end, start end, and match-parent for a better support of documents with multiple directionalities of text.
    • +
  • the CSS {{ cssxref("text-align") }} property with a {{cssxref("<string>")}} value to align on that character. This is useful to align number on the decimal point.
    • +
  • the CSS {{ cssxref("word-spacing") }} and {{ cssxref("letter-spacing") }} properties with range constraints to control flexibility in justification.
    • +
+ +

Adds:

+ +
    +
  • Control on how whitespaces are displayed using the CSS {{ cssxref("text-space-collapse") }} and {{ cssxref("tab-size") }} properties.
    • +
  • Control on line breaks and word boundaries using the CSS {{ cssxref("line-break") }}, {{ cssxref("word-break") }}, {{ cssxref("hyphens") }}, {{ cssxref("text-wrap") }}, {{ cssxref("overflow-wrap") }}, and {{ cssxref("text-align-last") }} properties.
    • +
  • Control on how justification is happening, in order to support more type of scripts, using the CSS {{ cssxref("text-justify") }} property.
    • +
  • Control on edge effect using the CSS {{ cssxref("text-indent") }} and {{ cssxref("hanging-punctuation") }} properties.
    • +
+
+ +

A few features present in early CSS Text Level 3 draft have being postponed to the next iteration of this module .

+ + + + + + + + + + + +
{{ SpecName("CSS3 Variables", "", "") }}{{ Spec2("CSS3 Variables") }}
Defines a mechanism allowing to define variables in CSS.
+ + + + + + + + + + + +
{{ SpecName("Compositing", "", "") }}{{ Spec2("Compositing") }}
 
+ +

Modules in the revising phase

+ +

Modules that are in the revising phase are much less stable than those in the refining phase. Often the syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Basic UI", "", "") }}{{ Spec2("CSS3 Basic UI") }}
+

Adds:

+ +
    +
  • The ability to tweak the box model using the CSS {{ cssxref("box-sizing") }} property.
    + At risk: due to insufficient browser support, standardization of the padding-box value may be postponed to the next iteration of this module .
    • +
  • Allow the styling of forms according their content using the CSS {{ cssxref(":indeterminate") }}, {{ cssxref(":default") }}, {{ cssxref(":valid") }}, {{ cssxref(":invalid") }}, {{ cssxref(":in-range") }}, {{ cssxref(":out-of-range") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}, {{ cssxref(":read-only") }}, and {{ cssxref(":read-write") }} pseudo-classes and the {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} pseudo-elements.
    + At risk: due to insufficient browser support, standardization of the pseudo-elements {{ cssxref("::value") }}, {{ cssxref("::choices") }}, {{ cssxref("::repeat-item") }}, and {{ cssxref("::repeat-index") }} may be postponed to the next iteration of this module .
    • +
  • Support for icons, defined by the CSS {{ cssxref("icon") }} property simultaneously with the new icon value of the CSS {{ cssxref("content") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("icon") }} property and the icon value may be postponed to CSS4.
    • +
  • Support for the CSS {{ cssxref("outline-offset") }} property giving more control on the position of the outline.
    • +
  • Support for the CSS {{ cssxref("resize") }} property allowing Web authors to control if and how elements should be resized.
    • +
  • Support for the CSS {{ cssxref("text-overflow") }} property defining how text overflows, if needed.
    + At risk: due to insufficient browser support, the 2-value syntax of this property as well as the support for {{cssxref("<string>")}} values may be postponed to the next iteration of this module .
    • +
  • The ability to define the hotspot of a cursor as well as the new none, context-menu, cell, vertical-text, alias, copy, no-drop, not-allowed, nesw-resize, nwse-resize, col-resize, row-resize, all-scroll, zoom-in, zoom-out, extending the {{ cssxref("cursor") }} property.
    • +
  • The ability to specify the sequential navigation order (that is the tabbing order ) using the CSS {{ cssxref("nav-index") }}, {{ cssxref("nav-up") }}, {{ cssxref("nav-right") }}, {{ cssxref("nav-left") }}, {{ cssxref("nav-down") }} properties.
    + At risk: due to insufficient browser support, standardization of the navigation properties may be postponed to the next iteration of this module .
    • +
  • The ability to control the usage of an IME editor, using the CSS {{ cssxref("ime-mode") }} property.
    + At risk: due to insufficient browser support, standardization of the {{ cssxref("ime-mode") }} property may be postponed to the next iteration of this module .
    • +
+
+ +

An early list of what could be in the next iteration of the CSS Basic User Interface Module is available.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Grid", "", "") }}{{ Spec2("CSS3 Grid") }}
Add a grid layout to the CSS display property and several new CSS properties to control it: {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-flow")}}, {{cssxref("grid-auto-position")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-column")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, {{cssxref("grid-row")}}, {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-template")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-template-rows")}}, and {{cssxref("grid-template-columns")}}.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Box Alignment", "", "") }}{{ Spec2("CSS3 Box Alignment") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Paged Media", "", "") }}{{ Spec2("CSS3 Paged Media") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSSOM View", "", "") }}{{ Spec2("CSSOM View") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS4 Selectors", "", "") }}{{ Spec2("CSS4 Selectors") }}
 
+ +

Modules in the exploring phase

+ + + + + + + + + + + +
{{ SpecName("CSS4 Images", "", "") }}{{ Spec2("CSS4 Images") }}
+

Extends:

+ +
    +
  • the image() functional notation to describe the directionality of the image (rtl or ltr), allowing for bidi-sensitive images.
    • +
  • the {{ cssxref("image-orientation") }} property by adding the keyword from-image, allowing to follow EXIF data stored into images to be considered.
    • +
+ +

Adds:

+ +
    +
  • the image-set() functional notation to allow the definition to equivalent images at different resolution allowing for resolution-negotiated selection of images.
    • +
  • the element() functional notation allowing the use of part of the page as image.
    • +
  • the cross-fade() functional notation allowing to refer to intermediate images when transitioning between two images and defines the interpolation between two images.
    • +
  • the conic-gradient() and repeating-conic-gradient() functional notation describing a new type of gradient.
    • +
  • the {{cssxref("image-rendering")}} property that allow to define how resize of the object should be handled.
    • +
+
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("CSS3 GCPM", "", "") }}{{ Spec2("CSS3 GCPM") }}
Adds the ability to tailor printed version of a document by allowing to control header, footer but also references tables like indexes or tables of content.
+ + + + + + + + + + + +
{{ SpecName("CSS Exclusions", "", "") }}{{ Spec2("CSS Exclusions") }}
Extends the floats mechanism to define exclusion regions in any positioning scheme. Adds the notion of shapes, in which content must flows.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Lists", "", "") }}{{ Spec2("CSS3 Lists") }}
Extends the list counter mechanism so that list markers can be styled and Web developers can define new list counter schemes.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Regions", "", "") }}{{ Spec2("CSS3 Regions") }}
Defines a new mechanism allowing content to flow across, eventually non-contiguous, multiple areas called regions.
+ + + + + + + + + + + +
{{ SpecName("CSS3 Device", "", "") }}{{ Spec2("CSS3 Device") }}
Adds a new at-rule, {{ cssxref("@viewport") }}, allowing to specify the size, zoom factor, and orientation of the viewport that is used as the base for the initial containing block.
+ + + + + + + + + + + +
{{ SpecName("Filters 1.0", "", "") }}{{ Spec2("Filters 1.0") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Template", "", "") }}{{ Spec2("CSS3 Template") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Sizing", "", "") }}{{ Spec2("CSS3 Sizing") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Line Grid", "", "") }}{{ Spec2("CSS Line Grid") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Positioning", "", "") }}{{ Spec2("CSS3 Positioning") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Ruby", "", "") }}{{ Spec2("CSS3 Ruby") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSSOM", "", "") }}{{ Spec2("CSSOM") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Overflow", "", "") }}{{ Spec2("CSS3 Overflow") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Font Loading", "", "") }}{{ Spec2("CSS3 Font Loading") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Display", "", "") }}{{ Spec2("CSS3 Display") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Scope", "", "") }}{{ Spec2("CSS Scope") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS4 Media Queries", "", "") }}{{ Spec2("CSS4 Media Queries") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS Non-element Selectors", "", "") }}{{ Spec2("CSS Non-element Selectors") }}
 
+ + + + + + + + + + + +
{{ SpecName("Geometry Interfaces", "", "") }}{{ Spec2("Geometry Interfaces") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Inline", "", "") }}{{ Spec2("CSS3 Inline") }}
 
+ +

Modules in the rewriting phase

+ +

Modules that are in the rewriting phase are outdated and require to be rewritten. The syntax is still under scrutiny and may evolve a lot, in a non-compatible way. Alternative syntaxes are tested and often implemented.

+ + + + + + + + + + + +
{{ SpecName("CSS3 Box", "", "") }}{{ Spec2("CSS3 Box") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Content", "", "") }}{{ Spec2("CSS3 Content") }}
 
+ + + + + + + + + + + +
{{ SpecName("CSS3 Inline Layout", "", "") }}{{ Spec2("CSS3 Inline Layout") }}
 
+ +

 

diff --git a/files/de/archive/index.html b/files/de/archive/index.html new file mode 100644 index 0000000000..4f4a70c023 --- /dev/null +++ b/files/de/archive/index.html @@ -0,0 +1,21 @@ +--- +title: Archive of obsolete content +slug: Archive +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive +--- +

Here at MDN, we try to avoid outright deleting content that might be useful to people targeting legacy platforms, operating systems, and browsers. Perhaps your target audience is people that are using older hardware, for example, and can't upgrade to the latest and greatest browsers. Or for "reasons," your company is required to use very old software and you need to build Web content that runs on that software. Or perhaps you're just curious about the history of an obsolete feature or API, and how it worked.

+ +

There are many reasons older documentation can be useful. So, we've established this area into which we can archive older documentation. Material in this Archived content zone should not be used for building new Web sites or apps for modern browsers. It's here for historical reference only.

+ +
+

Note to writers: We need to try to keep the subpages here organized instead of all dumped into one large folder. Try to create subtrees for categories of material. Also, only move pages here that are extremely obsolete. If anyone might realistically need the information in a living product, it may not be appropriate to move it here. In general, it may be best to discuss it in the MDN Web Docs chat room before moving content here.

+
+ +

{{SubpagesWithSummaries}}

+ + + +

{{ListSubpages("/en-US/docs/Archive", 2, 0, 1)}}

diff --git a/files/de/archive/mdn/index.html b/files/de/archive/mdn/index.html new file mode 100644 index 0000000000..9e550840e3 --- /dev/null +++ b/files/de/archive/mdn/index.html @@ -0,0 +1,20 @@ +--- +title: MDN Archive +slug: Archive/MDN +tags: + - Archive + - MDN + - NeedsTranslation + - TopicStub +translation_of: Archive/MDN +--- +

{{MDNSidebar}}

+ +
+

Obsolete
+ This documentation is obsolete.

+
+ +

The documentation listed below is archived, obsolete material about MDN itself.

+ +

{{LandingPageListSubpages}}

diff --git a/files/de/archive/mozilla/index.html b/files/de/archive/mozilla/index.html new file mode 100644 index 0000000000..0acec76e6d --- /dev/null +++ b/files/de/archive/mozilla/index.html @@ -0,0 +1,10 @@ +--- +title: Archived Mozilla and build documentation +slug: Archive/Mozilla +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla +--- +

These articles are archived, obsolete documents about Mozilla, Gecko, and the process of building Mozilla projects.

+

{{SubpagesWithSummaries}}

diff --git a/files/de/archive/mozilla/marketplace/apis/index.html b/files/de/archive/mozilla/marketplace/apis/index.html new file mode 100644 index 0000000000..ca60d38982 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/apis/index.html @@ -0,0 +1,46 @@ +--- +title: Zusatz Bibiliotheken and APIs +slug: Archive/Mozilla/Marketplace/APIs +tags: + - Anfänger + - Anwendungen + - Firefox OS + - Marketplace + - Marktplatz +translation_of: Archive/Mozilla/Marketplace/APIs +--- +
+

Wenn es um das Programmieren in Ihrer App oder Web-Seite für den Firefox Marketplace geht, werden Sie Marketplace Zusatz Bibliotheken, Web APIs und Marketplace APIs verwenden. Diese Seite erklärt Ihnen, wie und wann Sie diese Optionen verwenden können und stellt Ihnen weitere Links zu noch mehr Informationen bereit.

+
+ +

Marketplace Zusatz Bibiliotheken

+ +
+
Die Marketplace Zusatz Bibliotheken sollen Ihr tägliches Programmieren einfacher machen. Es gibt zurzeit eine solche Bibliothek, es können aber mehr entstehen, sobald es noch mehr Funktionen für den Marketplace geben wird.
+ +
 
+
+ + + +

Web APIs

+ +

Ihre App für den Marketplace benötigt zur Verwendung von Web APIs bestimmte Funktionen:

+ + + +

Marketplace APIs

+ +

Für die üblichen Anwendungen brauchen Sie die Marketplace APIs nicht, doch manche Projekte, wie das Erstellen von eigenen Shops, benötigen diese. Wenn Sie also bestimmte Funktionen in diesem Bereich brauchen, bietet es sich an, die Marketplace APIs zu nutzen. 

+ +

Die Dokumentation der Marketplace APIs finden sie hier, auf readthedocs.org. Bitte treten Sie der Entwickler-Marketplace Mailing Liste bei, wenn Sie noch weitere Informationen zum Marketplace API brauchen.

+ +
+

Diese Marketplace API Dokumentation beschreibt den Einsatz in der Entwicklung von Apps für den Firefox Marketplace. Das heißt, dass dieser Artikel Informationen über APIs enthalten kann, die im öffentlichen Marketplace nicht zugänglich sind.

+
+ +

 

diff --git a/files/de/archive/mozilla/marketplace/faq/index.html b/files/de/archive/mozilla/marketplace/faq/index.html new file mode 100644 index 0000000000..6b6def2d3a --- /dev/null +++ b/files/de/archive/mozilla/marketplace/faq/index.html @@ -0,0 +1,30 @@ +--- +title: Firefox Marketplace FAQs +slug: Archive/Mozilla/Marketplace/FAQ +translation_of: Archive/Mozilla/Marketplace/FAQ +--- +
+
+ Wie kann ich eine neue App hochladen?
+
+ Schaue dir dazu diesen Artikel an: Veröffentlichen einer App
+ +
+ Was ist der Genehmigungsprozess?
+
+ Für die Entwickler-Preview werden alle Apps mit einer gültigen manifest-Datei automatisch zugelassen.
+
+ Müssen meine Apps den Content-Richtlinien entsprechen?
+
+ Die primären inhaltlichen Einschränkungen im "Firefox Marketplace" verhindern, dass bösartige oder illegale Aktivitäten zu stande kommen. Die Richtlinien sind die Gleichen, wie die Content-Richtlinien für den Firefox. Die Richtlinien werden vor dem benutzersichtbaren Betastart vom "Marketplace" fertig sein.
+
+ Wie verkauft der "Firefox Marketplace" meine App?
+
+
+ Notiz: Kauf-Apps und In-App-Käufe sind der Zeit im "Firefox Marketplace" deaktiviert (August 2012). Es wird erwartet, dass diese Funktionen im Oktober 2012 wieder aktiviert werden.
+
+
+ Wer hosted die App?
+
+ Du hostest alle Dateien deiner App auf deinem eigenden Server. Wenn du eine App in den "Firefox Marketplace" einträgst, gibst du die URL von der manifest-Datei deiner App an, welches der "Marketplace" einliest und überprüft. Du kannst Icons, Screenshots, usw. hochladen, um deine App im "Firefox Marketplace" zu promoten.
+
diff --git a/files/de/archive/mozilla/marketplace/index.html b/files/de/archive/mozilla/marketplace/index.html new file mode 100644 index 0000000000..10b84af67e --- /dev/null +++ b/files/de/archive/mozilla/marketplace/index.html @@ -0,0 +1,126 @@ +--- +title: Firefox Marketplace +slug: Archive/Mozilla/Marketplace +tags: + - Anfänger + - Apps + - Beginner + - Firefox OS + - Intro + - Landing + - Marketplace +translation_of: Archive/Mozilla/Marketplace +--- +
Der Firefox-Marktplatz ist ein offener und nicht-proprietärer Online-Marktplatz für Web-Anwendungen mit HTML5.
+ +

Der Firefox-Marketplace ermöglicht Entwicklern, plattformübergreifende open web Anwendungen mittels standardisierter Web-Technologien, Sprachen und Tools zu veröffentlichen. Mozilla bringt seine innersten Werte — Offenheit, Freiheit, Auswahl durch den Benutzer – in die Welt der Apps.

+ +
+
+

Ihre Apps veröffentlichen

+ +
+
App Veröffentlichungsoptionen
+
+
+
Nachdem Sie eine offene Web-App erstellt haben, stehen Ihnen verschiedene Optionen für die Veröffentlichung zur Verfügung. Dieser Artikel erklärt, was zur Auswahl steht.
+
+
+
Übermitteln einer App in den Firefox Marketplace
+
+
+
Ein ausführlicher Leitfaden für diejenigen, die eine App auf dem Firefox-Marketplace veröffentlichen wollen um Sie der ganzen Welt zur Verfügung zu stellen..
+
+
+
Allgemeines zur App-Veröffentlichung
+
+
+
Allgemeine Informationen und nützliche Tipps über die Veröffentlichung von Web-Apps.
+
+
+
Firefox Marketplace APIs
+
+
+
Links zu den wichtigsten Referenzhandbüchern für Mozillas Firefox Marketplace APIs, mit denen Sie Zahlungskonten und das automatische Hochladen der App (und der Updates) kontrollieren können.
+
+
+
+
+ +
+

Monetarisierung

+ +
+
Profitieren von Ihrer App
+
+
+
Sie haben viel Arbeit und Liebe in ihre App gesteckt und wollen nun auch etwas von der App haben? Dieser Artikel befasst sich mit kostenpflichtigen Apps und In-App-Käufen. Alles Wege, damit Sie Geld an ihrem Werk verdienen.
+
+
+
+ +

Werkzeuge für App Entwickler

+ + + +

Erstellen Sie Ihren eigenen Marketplace

+ +
+
Erstellen eines Marktplatzes
+
+
+
Sie müssen nicht den Firefox-Marktplatz verwenden, um Ihre Anwendung zu verteilen. Sie können auch ihren eigenen internen Marktplatz erstellen. Nützlich zum Beispiel für Firmennetzwerke.
+
+
+
+
+
+ + + +
    +
  1. Eine App veröffentlichen und überprüfen + +
      +
    1. Veröffentlichen einer App im Firefox Marketplace
      2. +
    2. Eine App bewerten
      3. +
    3. Überprüfungskriterien für Marketplace
      4. +
    4. Marketplace: screenshot Kriterien
      5. +
    5. Leitfaden für die Datenschutzerklärungen
      6. +
    6. Das Testen und Verbessern ihrer Apps.
      7. +
    +
    2. +
  2. Veröffentlichung +
      +
    1. Möglichkeiten der Veröffentlichung
      2. +
    2. Verpacken der Apps
      3. +
    3. Apps aktualisieren.
      4. +
    4. Open-Web-Apps für Android
      5. +
    5. Einen "Subdomain" zur App hinzufügen.
      6. +
    6. Ihren eigenen Marktplatz erstellen.
      7. +
    +
    3. +
  3. Monetization +
      +
    1. Verdiehen Sie mit ihrer App Geld.
      2. +
    2. Richtlinien zur Bezahlung
      3. +
    3. In-App Käufe
      4. +
    4. Überprüfung
      5. +
    5. App-Preise
      6. +
    6. Bezahlungsstatus
      7. +
    +
    4. +
  4. Marketplace APIs +
      +
    1. Marketplace utility library
      2. +
    2. Submission API
      3. +
    3. Payment API
      4. +
    4. Marketplace API
      5. +
    +
    5. +
  5. Firefox Marketplace FAQs
    6. +
diff --git a/files/de/archive/mozilla/marketplace/index/index.html b/files/de/archive/mozilla/marketplace/index/index.html new file mode 100644 index 0000000000..6c4402ac0e --- /dev/null +++ b/files/de/archive/mozilla/marketplace/index/index.html @@ -0,0 +1,107 @@ +--- +title: Index +slug: Archive/Mozilla/Marketplace/Index +translation_of: Archive/Mozilla/Marketplace/Index +--- + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SeiteMarkierungen und Zusammenfassung
Firefox Marketplace +
+
+ Apps, Anfänger, Firefox-OS, Intro, Marktplatz, l10n Priorität
+
+
+
+
+ In dieser Zone finden Sie alle Informationen die Sie für die Vorbereitung benötigen um apps auf dem Firefox-Marktplatz zu veröffentlichen. Anleitung wie man apps erfolgreich zustellt, Zustelloptionen, Monetarisierung, Veröffentlichung , Aktualisierung der apps,  die Bibliotheken und APIs Finde Marktplatz-Funktionen zu verwenden.
+
+
Firefox Marketplace APIsAPI, Apps, Marketplace
+
+
+ Links zu den wichtigsten Referenzen für Mozillas Firefox Marktplatz APIs, mit denen Sie app-Einreichungen behandeln können. Konfigurieren Sie ein Abrechnungskonto für eine app und vieles mehr.
+
+
Firefox Marketplace FAQApp Zahlungen, Apps, B2G, FAQ, Firefox OS, Mobile, Marketplace
+
+
+ Dieser Artikel beantwortet eine Vielzahl von häufig gestellte Fragen mit Bezug zur Veröffentlichung auf dem Firefox Marketplace.
+
+
IndexIndex
7 Seiten gefunden:
Publishing on the Firefox MarketplaceApps, Marketplace
+
+
+ Dokumentation für das Veröffentlichen einer app auf dem Firefox Marketplace.
+
+
VorlageAnlegen
Marketplace Vorlagen
Zusatz Bibiliotheken und APIsApps, Anfänger, Firefox OS, Anleitung, Marketplace
+
+
+ Wenn es darum geht, die Funktionen für den Firefox-Marktplatz in Ihre apps und Webseiten zu codieren. Machen nutzen Sie die Marktplatz Zusatz Bibliothek, Web-APIs und Markt-APIs. Diese Seite führt diese Optionen, wenn Sie möglicherweise Links einsetzen und  zu weiteren Dokumentation beschreiben.
+
+
+

 

diff --git a/files/de/archive/mozilla/marketplace/marktplatz_apis/index.html b/files/de/archive/mozilla/marketplace/marktplatz_apis/index.html new file mode 100644 index 0000000000..41c61d5451 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/marktplatz_apis/index.html @@ -0,0 +1,109 @@ +--- +title: Firefox Marktplatz APIs +slug: Archive/Mozilla/Marketplace/Marktplatz_APIs +translation_of: Archive/Mozilla/Marketplace/Marketplace_APIs +--- +
+
+
+
+ Links zu den wichtigsten Referenzen für Mozillas Firefox Marktplatz APIs, mit denen Sie, App-Einreichungen behandeln können und Sie ein Abrechnungskonto für eine App konfigurieren können und vieles mehr.
+
+
+
+
+
+
+
+ Marktplatz unitity Bibliothek
+
+
+
+ Damit Sie mit dem Firefox-Markt arbeiten können, bieten wir zu erleichterung eine JavaScript-Bibliothek an um eine ihnen Anwendungen einfach handhaben in-app-Zahlungen und Zahlungseingänge überprüfen zu können.
+
+
+
+ Überprüfungs API
+
+
+
+ Mit der API-Vorlage können Sie Ihre app überprüfen, aktualisieren Ihre app und holen Informationen über die apps verfügbar installiert werden.
+
+
+
+ Zahlungs API
+
+
+
+ Mit  API-Zahlung können Sie Informationen zu in-app Einkäufe machen und erhalten Informationen über die Preisgestaltung Stufen für verschiedene Länder.
+
+
+
+ Andere Marktplatz APIs
+
+
+
+ Die vollständige Dokumentation für die Firefox-Marktplatz-APIs.
+
+
+
+
+
+
+
+ Tools für app-Entwickler
+
+ +
+
+ Technologie-Referenzdokumentation
+
+
+ +
+
+
+ Hilfe von der Gemeinschaft
+
+
+
+ Wenn Sie noch nicht sicher sind was zu tun ist, was Sie erledigen wollen, zögern Sie nicht zu der Unterhaltung!
+
+  
+
+ +

Vergessen Sie nicht über die netiquette...

+

 

+
+
+

 

diff --git a/files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html b/files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html new file mode 100644 index 0000000000..76a5dc98c8 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/options/open_web_apps_for_android/index.html @@ -0,0 +1,142 @@ +--- +title: Open Web Apps for Android +slug: Archive/Mozilla/Marketplace/Options/Open_web_apps_for_android +translation_of: Archive/Marketplace/Options/Open_web_apps_for_android +--- +
+

Users of Firefox for Android install Marketplace apps as 'normal' Android apps, gaining the benefit of powerful open web features. This ability is enabled by the creation of APKs by the APK Factory. Installed apps are run by the Web Runtime for Android, which is included in Firefox for Android. By making your apps accessible to Firefox for Android users, you gain an additional distribution opportunity, expanding the potential audience for your work.

+
+

What is Open Web Apps for Android?

+

Open Web Apps for Android enables free Marketplace apps to be packaged into an APK (Android installation package), which is then installed and run in the same way as any other Android app. The APK package consists of web content (in the case of packaged apps) or a pointer to web content (in the case of hosted apps). This content is then enclosed in a thin Java/Android wrapper, which provides the integration with the Android OS. Once installed on an Android device the app is executed by Web Runtime for Android, a component of Firefox for Android.

+

These packages are created by the APK Factory Service, which is run as a web service by Marketplace. The APK Factory Service makes use of the APK Factory Library to create the actual package and the APK Signer to digitally sign the APK. This service is available to your own Marketplace, should you choose to create one.

+

You don't need any knowledge of Android development, or to take any extra development steps, to use Open Web Apps for Android: you simply select the option for distribution to Firefox Mobile or Firefox Tablet when submitting your apps to the Firefox Marketplace.

+
+

Note: Open Web Apps for Android provides support for hosted apps in Firefox for Android xx or later, packaged apps are supported in Firefox for Android 29 or later. Only free apps are available for Android from the Firefox Marketplace at this time.

+
+

Web Runtime for Android supports 12 APIs to access device capabilities, such as vibration, geolocation and battery status. You can see a complete list of supported APIs here: APIs showing "A" under "Availability" are those APIs available on Android, with green cells indicating that the API is available in full. You can also mouseover individual cells to get tooltips containing more information.

+

Web Runtime for Android will continue to add support for other APIs in future releases. Some of the APIs planned are:

+ +
+

Note: Android users may be using devices with higher resolutions, greater pixel densities (DPI) and larger screen sizes than those found on Firefox OS devices. Apps that haven't used responsive design may therefore provide a poor experience, and you may want to design your apps with this in mind. For more information on responsive design see the Design section of the App Center.

+
+

Using Open Web Apps for Android from Firefox Marketplace

+

This section provides details on how you make use of Open Web Apps for Android from Firefox Marketplace, how they affect the Marketplace experience, and information on app updates.

+

Submitting an app

+

When you submit an app to the Firefox Marketplace, you choose the option of making your app available for Firefox Mobile or Firefox Tablet. Choosing either or both of these options will automatically deliver your app as an APK on Android devices.

+

Approving an app

+

When your app is reviewed, the reviewer installs your app from the reviewer section in Firefox Marketplace. When they do this from an Android device, the "review" instance of the APK Factory service is invoked to create an APK signed in Android debug mode. This version of the APK is then installed on the app reviewer's device and they complete the review process.

+

If the app is approved, the "release" instance of the APK Factory service is invoked to generate and sign the APK with a unique APK Signing Key. The resulting signed APK is then cached for delivery when a user chooses to install the app.

+

Installing an app

+

When a user selects your app in the Marketplace on their Android device, installation works as follows:

+
    +
  1. Firefox Marketplace displays the app's details and Free install button as normal.
    2. +
  2. When the user taps Free, {{ domxref("Apps.install") }} or {{ domxref("Apps.installPackage") }} is invoked as usual (depending on whether it's a hosted or packaged app) and a call is made to the APK Factory service to request the APK.
    3. +
  3. The APK is downloaded to the Android device and the standard Android app installation process invoked.
    4. +
  4. If the user hasn't enabled the Security setting Unknown sources, Android will alert the user and give them the option to cancel the installation or open Settings.
    5. +
  5. Once Unknown sources is enabled, the user is shown an install confirmation dialog. The dialog lists the permissions requested by privileged apps.
    6. +
  6. If the user taps Install the app is installed.
    7. +
  7. Once the app has been installed, the user is given the option to Open the app and in Firefox Marketplace the Free button is replaced with a Launch button.
    8. +
+

Subsequently the user will find the application in their Apps screen. In addition, the process to use and remove the app is the same as they'd expect for other Android apps. Firefox for Android provides a list of installed apps under Apps on the Tools menu as well.

+

Keeping apps up to date

+

Firefox for Android provides a mechanism installing update apps.

+

If your app is hosted, whenever you make a change on its server, users will pick up changes the next time they run your app.

+

For all other changes, you need to add a new version to the Firefox Marketplace:

+ +

Firefox for Android makes a daily check on the version number in the app’s manifest and if it has changed silently applies the update.

+

Using Open Web Apps for Android from your own Marketplace

+

You're able to create your own Marketplace. Such a Marketplace consists of either a directory of apps in Firefox Marketplace or your own hosted content (app descriptions with the main manifest of hosted apps or the mini manifest with app zip archive in the case of packaged apps).

+

Your Marketplace will pass the URL of the manifest to be installed to {{ domxref("Apps.install") }} / {{ domxref("Apps.installPackage") }} that then invokes APK Factory, meaning you don't have to do anything to enable Open Web Apps for Android in your Marketplace. You do however need to ensure that your Marketplace only serves apps that include APIs supported by the Web Runtime for Android.

+

How the APK Factory works

+

This section describes how the APK Factory works.

+ +

The following diagrams offer an alternative representation of the workflow of the APK Factory:

+

Web Sequence diagram showing the operation of the APK factory

+

Package naming and APK signing keys

+

On installation of an APK the Android device checks the Java package name and signature. It verifies the signature the first time an app is installed (there is no central authority it checks with). Future updates must then have the same package name and signature. If the package name and signature aren't the same the Android device won't update the installation.

+

Package naming

+

The package name for an APK consists of the hosting site and a unique serial number, for example:

+ +

APK signing keys

+

Each APK needs to be identified by an APK signing key before it can be installed on an Android device. APK signing keys are created and owned by the APK Signer service. These signing keys are sensitive, and stored securely in the APK Signer.

+

This service creates a unique key for each app, applying it to the original release and subsequent updates. The reuse of the key on updated app APKs is important, as without a match in the package name and key Android won't install an update over an earlier version of the app. If you create your own Marketplace the APK will retain the same name and keys, so that either version will be able to update the other.

+
+

Note: Mozilla assumes no responsibility for the credibility of the APK signing keys. That is, the keys provide no information about the authenticity of the app or developer beyond the fact that they have been approved for release in Marketplace, if the app is hosted there. The service is not tied to Google or any other central authority.

+
+

FAQ

+

Here are answers to some frequently asked questions about APKs for Open Web Apps for Android.

+

What about re-installation of apps installed as bookmarks?

+

When a user updates to Firefox for Android version 29 or later, their bookmark-style apps will continue to work, and Firefox will prompt users to update apps to their Open Web Apps for Android version.

+

How will in-app purchases work?

+

The APK is given access to the trusted UI, mozPay, and all payment processes for in-app purchases, so in-app payments will function as normal.

+

How do I download a copy of my app's APK?

+

You can download a copy of your app from the APK Factory service by retrieving a URL in the format:

+

https://controller.apk.firefox.com/application.apk?manifestUrl=ESCAPED_URL_TO_MANIFEST

+

where ESCAPED_URL_TO_MANIFEST is an escaped URL to the app's manifest or mini-manifest. That URL causes the APK Factory to return the cached copy of the APK, or create a new one if the app hasn't been submitted to Marketplace.

+

Examples

+

For a hosted app:

+

> wget https://controller.apk.firefox.com/application.apk?manifestUrl=http%3A%2F%2Fmykzilla.org%2Fapp%2Fmanifest.webapp -O mykzilla.apk

+

For a packaged app:

+

> wget https://controller.apk.firefox.com/application.apk?manifestUrl=https%3A%2F%2Fmarketplace.firefox.com%2Fapp%2Fa22e0277-35bc-434d-9371-1568c75fc726%2Fmanifest.webapp -O cuttherope.apk
+  

+

Can I generate an APK manually from a different URL?

+

Yes, by providing the URL to any location for your manifest or mini-manifest files. However, be aware that because the APK is generated from a different URL the package name will differ from that created when you submit the app to Firefox Marketplace, so the Firefox Marketplace version will be installed as a separate app.

+

If I setup my own copy of the APK Factory can I use the APKs it generates?

+

You can, but be aware that the signing keys will differ from those assigned to the APKs generated by Firefox Marketplace. As a result Android will refuse to install whichever version the user tries to install second. (See If I also have an Android native version of my app, can both be installed on an Android device? for more information.)

+

Can I submit an APK created by the APK Factory to Google Play or other Android store?

+

You can submit an APK generated by APK Factory to Google Play or an alternative Android store. However, it's your responsibility to:

+ +

Can I use my Android signing keys to sign the APK and choose the package name?

+

At present you cannot use your own signing keys to sign an APK generated by APK Factory or choose the package name. This is an option being considered. If this is of interest to you, join the discussion on the dev-marketplace mailing list, or the Marketplace IRC channel.

+

If I also have an Android native version of my app, can both be installed on an Android device?

+

Unless you choose to use the APK package name created by APK Factory for your native Android app, both can be installed on an Android device. If you choose to use the same package name for your native Android app (which you'll sign with your own key) Android will refuse to install whichever version the user tries to install second. This is because the package names are the same but the signing keys are different, so Android considers the apps to be the same, but from different sources. Therefore Android will refuse to update one app with the other, since that would allow one developer to override another's app. The user will end up with the first version installed on their device.

+
+

Because of the issues it may cause for users, it's highly recommended that you don't reuse the package name the APK Factory assigns to your app for a native Android version of your app.

+
+

How can I test/debug APKs?

+

We're working on a toolchain for testing and debugging an app on an Android device. The initial version will include a Node-based command-line tool for generating an APK you can install on the device and debug using Firefox's Remote Developer Tools.

+

Also see

+ diff --git a/files/de/archive/mozilla/marketplace/publishing/index.html b/files/de/archive/mozilla/marketplace/publishing/index.html new file mode 100644 index 0000000000..d219377947 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/publishing/index.html @@ -0,0 +1,6 @@ +--- +title: Publishing +slug: Archive/Mozilla/Marketplace/Publishing +translation_of: Archive/Mozilla/Marketplace/Publishing/Introduction +--- +

Marketplace publishing

diff --git a/files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html b/files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html new file mode 100644 index 0000000000..3ba4548eba --- /dev/null +++ b/files/de/archive/mozilla/marketplace/publishing/packaged_apps/index.html @@ -0,0 +1,184 @@ +--- +title: Gepackte Apps +slug: Archive/Mozilla/Marketplace/Publishing/Packaged_apps +translation_of: Archive/Mozilla/Marketplace/Options/Packaged_apps +--- +

Eine gepackte App ist eine Offene Web App die all ihre Ressourcen (HTML, CSS, JavaScript, app mainfest und so weiter) komprimiert in einer zip Datei hat, anstatt die Dateien auf einem Webserver zu hosten. EIne gepackte App ist einfach einezip Datei, welche die App Mainfest in dem Hauptverzeichniss trägt. Die App Mainfest muss den Namen manifest.webapp tragen.

+

Einer der unterschiede zu einer gehosteten App ist, dass eine gepackte App den launch_path in der Mainfest eingetragen haben muss. Dennoch ist es optional den Pfad auch in einer gehosteten App einzutragen.

+
+

Anmerkung: Der Firefox Marktplatz unterstützt momentan nur gepackte App´s für Firefox OS.

+
+

Zweck einer gepackten App

+

Der Zweck einer gepackten App ist, das man einen verarbeitbaren Weg hat, um Zugriff auf die sensitiven API´s der Geräte zu haben. Die App muss von dem Store (Wie der Firefox Marktplatz), von dem die App´s verteilt werden geprüft werden. Der Store prüft die App, sobald diese für akzeptabel befunden wird, wird die App kryptographisch mit einem privatem Schlüssel versehen. Das gebit den Verbrauchern der App mehr Sicherheit, dass die App sorgsam auf Sicherheit, Datenschutz und Leistungsfähigkeit geprüft wurde.

+

 

+

Typen einer gepackten App

+

Es gibt 3 Typen einer gepackten App:

+
+
+ Privilegierte App
+
+ Eine privilegierte App wurde durch ein spezielles Verfahren von dem Firefox Marktplatz genehmigt. Dadurch soll mehr Sicherheit für den Benutzer gewährleistet werden, wenn eine App spezielle sensitiven APIs des Gerätes benutzen möchte. Es ist mit nativen Apps auf Plattformen wie iOS oder Android zu vergleichen. Um eine App als privilegierte App zu kennzeichnen muss das type Feld in der der Datei manifest.webapp auf privileged gesetzt werden.
+
+ Eine priviligierte App hat folgende Eigenschaften: +
    +
  • Freigegeben durch einen App Store nach einem Code Review oder einer vergleichbraen Prüfung.
    • +
  • Alle resourcen einer App's werden durch den App Store signiert.
    • +
  • Zugriff auf spezielle, sensible Web APIs, auf die nicht vertrauenswürdiger Inhalt nicht zugreifen darf.
    • +
  • Erzwingt eine sogenannte Content Security Policy (CSP). Eine privilegierte App benutz folgende CSP: + 
    "default-src *; script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline'"
    +
    • +
  • Implementiert weitere Anforderungen an die Sicherheit. Siehe Security für mehr Informationen.
    • +
+
+
+ Zertifizierte App
+
+ Ein zertifiziertes App ist für einen kritischen Systemfunktion wie die Standard Dialer oder die Systemeinstellungen App auf einem Smartphone gedacht. Diese Art von App könnte für kritische Funktionen auf einem Firefox OS Phone verwendet werden . Es ist nicht für Anwendungen von Drittanbietern vorgesehen, so dass die meisten App nich mit anderen Apps funktionieren . Ein zertifiziertes App ist eine verpackte App, die ähnlich einer privilegierten App ist, mit der Ausnahme, dass alle Geräteberechtigungen implizit sind, das heißt, sie ist ohne ausdrückliche Genehmigung durch den Benutzer aktiviert sind. Ein zertifiziertes App muss für ein Gerät genehmigen vom OEM oder Träger, um diese implizite Zustimmung zu kritischen APIs verwenden zu können . Um anzugeben, dass dies eine zertifizierter App ist, fügen Sie den Feldtyp type auf seine manifest.webapp -Datei und legen Sie es auf zertifiziert.
+
+ Das folgende ist die CSP für eine zertifizierte App, die geringfügig von der CSP für eine privilegierte App abweicht: + 
"default-src *; script-src 'self'; object-src 'none'; style-src 'self'"
+ Dies hat den Effekt von etwas lockerere Regeln für die Inline-CSP für privilegierte Apps im Vergleich zu zertifizierten Apps. Wenn Sie mehr von der Überlegung dahinter möchten, finden Sie unter Standard Default CSP policy und Bug 768029.
+
+ Plain packaged app
+
+ You can also make a regular app that is simply packaged in a zip file. The Marketplace signs it, but does not perform the special authentication process used for privileged or certified apps. This plain packaged app cannot use certain sensitive Web APIs. It is not subject to the CSPs described for privileged and certified apps. This type of app could be useful if you want all of your app's resources available on the device when the user first uses it, with no downloading. This type of packaged app does not require the type field in its manifest.webapp file, because the default value for type (web) is correct.
+
+

Using sensitive Web APIs

+

There are Web APIs that could be used maliciously, so access to them must be controlled. For every sensitive API you want your app to access, you must add an entry to the permissions field in the app's manifest.

+

Some sensitive APIs can be accessed by normal hosted apps, but other APIs require that you use a packaged app (privileged or certified). See App permissions for a table that describes the requirements.

+

Packaged apps and the Firefox Marketplace

+

The Firefox Marketplace handles packaged apps differently from hosted apps. When you submit your packaged app, its zip file is stored on the Marketplace servers, and the Marketplace generates a new manifest called the "mini-manifest" that is based on the app manifest in your packaged app's zip file. When a user installs your app, the mini-manifest is passed to the installPackage() function to install the app. The mini-manifest exists for installation and update purposes and is not used when your app runs.

+

Testing packaged app installation

+

To install a packaged app on a Firefox OS device using the Simulator for testing purposes, see the section on "Push to Device" in the Simulator guide. To test a packaged app without the Simulator, you can install it on a device from a regular web server by following the steps below, in the Self-publishing packaged apps section.

+

Self-publishing packaged apps

+

You can self-publish a packaged app by hosting it on a server along with a mini-manifest in the same directory that identifies the app and is used in the install process. This section covers how to do this detail.

+

Note that you can also host a packaged app locally and test it on a real device. The Web server and the phone must be on the same network, and the server must be able to serve requests from the local network. You just need to include the absolute path to the referenced files, in the same way as the absolute paths are included normally (see below.) Remember to include the port information if you are using a non-standard port, for example http://10.10.12.1:8080/package.zip.

+

Steps

+
    +
  1. +

    Zip up your app's contents and give it the name package.zip. This file should contain all the app's resource files, including the manifest.

    +
    +

    Caution: You must be also careful to zip the contents you wish to appear in the packaged app, and not the directory they are contained in. If you zip up the parent directory, the manifest will end up in the wrong place, and the packaged app will be invalid.

    +
    +
    2. +
  2. Create a file called package.manifest and give it the contents below. This is a mini-manifest used for packaged app installation purposes. It is not the main manifest of your app that is inside the zip file. See Mini-manifest fields if you want more detailed information about mini-manifests. + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/my-app.zip",
+    "version": "1",
+    "developer": {
+        "name": "Chris Mills",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. Create a file named index.html with the following contents. This contains sample JavaScript that calls the packaged app (installPackage()) and callbacks for success and failure notification. + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. Copy package.zip, package.manifest, and index.html into your app root directory (my-app-directory in my examples).
    5. +
  5. Using a compatible device (such as a Firefox OS phone), navigate to the location on your server where you put the example files and confirm the prompt to install the app. The script will give an indication of installation success or failure.
    6. +
+
+

Note: You can not install privileged or certified apps with installations from hosted packages, as they need to be signed. Use the Simulator to test privileged apps.

+
+

Mini-manifest fields

+

Here is a more in-depth example of a mini-manifest:

+
{
+  "name": "My app",
+  "package_path": "http://thisdomaindoesnotexist.org/myapp.zip",
+  "version": "1.0",
+  "size": 172496,
+  "release_notes": "First release",
+  "developer": {
+    "name": "Developer Name",
+    "url": "http://thisdomaindoesnotexist.org/"
+  },
+  "locales": {
+    "fr-FR": {
+      "name": "Mon application"
+    },
+    "se-SE": {
+      "name": "Min balla app"
+    }
+  },
+  "icons": {
+    "16": "/icons/16.png",
+    "32": "/icons/32.png",
+    "256": "/icons/256.png"
+  }
+}
+
+

When the Firefox Marketplace generates a mini-manifest for your app, it pulls information from your app's manifest for some of the fields. You can find documentation for these fields at App manifest. The fields unique to the mini-manifest are package_path, release_notes, and size. The name, version, developer, and locales fields in your app manifest must be exactly the same as in your mini-manifest.

+

Here is information on the mini-manifest that relates to using it locally for your own testing:

+
+
+ name
+
+ (required) The app's name. Maximum length is 128 characters.
+
+ package_path
+
+ (required) The URL where the app's zip file can be found. You need to make sure the package_path is absolute to where the ZIP file is located.
+
+ version
+
+ The version of the app.
+
+ size
+
+ The size of the app's zip file in bytes. This is not necessary for local testing, but provide it to get a progressbar during installation.
+
+ release_notes
+
+ Information about this release of the app. On the Marketplace this information comes from a Web page that is part of the submission process.
+
+ developer
+
+ Information about the developer, contains the name and url fields. The developer info needs to match between the mini-manifest and the main manifest file in the ZIP.
+
+ locales
+
+ Localization information. Keys should be in xx-YY format.
+
+ icons
+
+ Icons for use by the app.
+
+
+

Note: Values in package and webapp.manifest need to be the same, otherwise installation will fail. The safest way is to copy manifest.webapp into package.manifest and just add the package_path.

+
+

Differences from hosted apps

+

Packaged apps have the same capabilites as normal website-style Open Web Apps ("hosted" apps), but packaged apps have a few differences:

+ +

The packaged app can still do things like access a database on a Web server, like a regular hosted app.

+

Updating packaged apps

+

For information on updating apps, see Updating apps.

+

Packaged app example

+

Firefox OS Boilerplate App

diff --git a/files/de/archive/mozilla/marketplace/publishing/publish_options/index.html b/files/de/archive/mozilla/marketplace/publishing/publish_options/index.html new file mode 100644 index 0000000000..63d97f6016 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/publishing/publish_options/index.html @@ -0,0 +1,67 @@ +--- +title: Veröffentlichungsoptionen Ihrer App +slug: Archive/Mozilla/Marketplace/Publishing/Publish_options +translation_of: Archive/Mozilla/Marketplace/Options/Self_publishing +--- +
+

Once you have finished your app, you need to deploy it and publish it. This involves making it available for users to consume (whether they are going to just navigate to it in a browser and use it like a regular web page, or download it and install it on a device like a Firefox OS phone.), letting people know it is available, and providing supporting information such as usage instructions and help resources. This article looks briefly at the options available to you.

+
+

Publishing on the Firefox Marketplace

+

The Firefox Marketplace is our own dedicated app store for distributing free and paid apps. Submitting an app to the Firefox Marketplace is a simple process, involving uploading the app itself plus surrounding information, and waiting for it to go through our thorough review process to make sure it is high quality and not malicious. Submitting to the Firefox Marketplace also confers other advantages such as increased publicity, no need to implement special APIs on your own web site, and the possibility of publishing paid apps more easily. You can submit both hosted apps and packaged apps to the Firefox Marketplace.

+

Hosted apps

+

A hosted app is basically an app hosted on a web server just like a regular web page. If you want to let people install a hosted app straight from the site, you must implement some JavaScript code on your Web site to manage installing and updating your app into users' browsers, and make sure your app code includes a valid manifest file. Please see our writeups of manifest files and Install API functionality for how simple these steps are to implement.

+

Where you host the app is really up to you, but the two options listed below are probably the most common and easiest.

+

GitHub

+

If the Web app is purely static (HTML/CSS/JavaScript, but no server-side processing), GitHub Pages is a solid hosting option. It will serve your manifest with the correct MIME type if you give it a .webapp extension.

+

Generic hosting solutions

+

For dynamic websites, use a generic hosting option (like a Web server you may already own or have access to) with the right capabilities or a hosting provider specifically tailored to the needs of your app, like Heroku or Google App Engine.

+
+

Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allow installable web apps to install on the desktop. See FAQs about apps manifests for more information on origins.

+
+

Packaged apps

+

A packaged app is an Open Web App that has all of its resources (HTML, CSS, JavaScript, app manifest, and so on) contained in a zip file, instead of having its resources on a Web server. A packaged app is simply a zip file with the app manifest in its root directory. The manifest must be named manifest.webapp.

+

One difference from a hosted app is that a packaged app must specify a launch_path in the manifest, whereas it's an optional manifest field for a hosted app. For more information, check out our Packaged Apps article.

+

Self-publishing apps

+

You can also choose to self-publish apps. For hosted apps, this just involves putting them up on web hosting, as detailed above.

+

You can self-publish a packaged app by hosting it on a server along with a mini-manifest in the same directory that identifies the app and is used in the install process. Let's run through this process:

+
    +
  1. Have your packaged app's zip file available and give it the name package.zip. This file contains all the app's resource files, including the manifest.
    2. +
  2. Create a file called package.manifest and give it the contents below. This is a mini-manifest used for packaged app installation purposes. It is not the main manifest of your app that is inside the zip file.
    + 
    {
+    "name": "My sample app",
+    "package_path" : "http://my-server.com/my-app-directory/my-app.zip",
+    "version": "1",
+    "developer": {
+        "name": "Chris Mills",
+        "url": "http://my-server.com"
+    }
+}
    +
    3. +
  3. Create a file named index.html with the following contents. This contains sample JavaScript that calls the packaged app (installPackage()) and callbacks for success and failure notification. + 
    <html>
+  <body>
+    <p>Packaged app installation page</p>
+    <script>
+      // This URL must be a full url.
+      var manifestUrl = 'http://my-server.com/my-app-directory/package.manifest';
+      var req = navigator.mozApps.installPackage(manifestUrl);
+      req.onsuccess = function() {
+        alert(this.result.origin);
+      };
+      req.onerror = function() {
+        alert(this.error.name);
+      };
+    </script>
+  </body>
+</html>
    +
    4. +
  4. Copy package.zip, package.manifest, and index.html into your app root directory (my-app-directory in my examples).
    5. +
  5. Using a compatible device (such as a Firefox OS phone), navigate to the location on your server where you put the example files and confirm the prompt to install the app. The script will give an indication of installation success or failure.
    6. +
+
+

Note: You can't install privileged or certified apps from self-hosted packages, as they need to be signed via the Firefox Marketplace submission process.

+
+
+

Note: You can even create your own apps store, which has a number of options available to it.

+
+

 

diff --git a/files/de/archive/mozilla/marketplace/publishing/submit/index.html b/files/de/archive/mozilla/marketplace/publishing/submit/index.html new file mode 100644 index 0000000000..a6e3468169 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/publishing/submit/index.html @@ -0,0 +1,10 @@ +--- +title: Submit +slug: Archive/Mozilla/Marketplace/Publishing/Submit +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Publishing/Submit +--- +

This section describes the process for submitting an app to Firefox Marketplace

+

Residual details: https://developer.mozilla.org/en-US/Marketplace/Publishing/Submit/Submitting_an_app

diff --git a/files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html b/files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html new file mode 100644 index 0000000000..5fc08ff26a --- /dev/null +++ b/files/de/archive/mozilla/marketplace/publishing/updating_apps/index.html @@ -0,0 +1,27 @@ +--- +title: Updating apps +slug: Archive/Mozilla/Marketplace/Publishing/Updating_apps +translation_of: Archive/Mozilla/Marketplace/Publishing/Updating_apps +--- +
+

Dieser Artikel beschreibt den Prozess, mit dem Sie apps aktualisieren können, die bereits, Selbstveröffentlicht oder veröffentlicht auf dem   Firefox Marketplace  wurden.

+
+
+

Hinweis: Wenn Sie den Namen Ihrer Anwendung ändern, wenn es Marketplace genehmigt hat, müssen Sie Ihre app zur Genemigung erneut senden.

+
+

Gehostete apps zu aktualisieren

+

An app respects the normal rules for Web caching, and may optionally use advanced mechanisms for improved start-up, like the HTML5 AppCache. Given this, there are no special considerations for updating the normal resources that an app uses.

+

Open Web Apps are different, however, in the handling of the manifest. Some changes to a manifest may require user approval. Depending on the implementation of the Web runtime, it may be unclear whether an update has occurred.

+

As a clean way to deal with this issue, you can provide a version field in the app manifest. You can later check the version by inspecting the return value of the navigator.mozApps.getInstalled() function. If the user's installed version is not up-to-date, you can trigger an update using navigator.mozApps.install().

+

The value of version is not used by the Web runtime, so you can use whatever versioning scheme you want.

+

Also note that changes to a manifest that introduce errors or other breakage will be detected if the manifest has been submitted to Firefox Marketplace. Serious errors will cause the app's listing to be disabled. Less serious errors may automatically flag the app for re-review.

+

Updating packaged apps

+

Packaged apps have a different update process than hosted apps. To update a packaged app, you upload a new version of the app's zip file to the Firefox Marketplace. Then the updated app gets reviewed and published to the Marketplace. This triggers an update on the Firefox OS phone. The phone user can also request an update using the Settings app.

+

If you want more detail on the packaged app update process, see below.

+

More details on packaged app update

+

Here are more details on the update process for packaged apps. You might want to know these things if you are implementing an app marketplace.

+ diff --git a/files/de/archive/mozilla/marketplace/submission/index.html b/files/de/archive/mozilla/marketplace/submission/index.html new file mode 100644 index 0000000000..5f1479f109 --- /dev/null +++ b/files/de/archive/mozilla/marketplace/submission/index.html @@ -0,0 +1,9 @@ +--- +title: Submission +slug: Archive/Mozilla/Marketplace/Submission +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Mozilla/Marketplace/Submission +--- +

Marketplace Vorlage

diff --git a/files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html b/files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html new file mode 100644 index 0000000000..8582aaccbc --- /dev/null +++ b/files/de/archive/mozilla/marketplace/submission/marketplace_review_criteria/index.html @@ -0,0 +1,79 @@ +--- +title: Überprüfungskriterien für Marketplace +slug: Archive/Mozilla/Marketplace/Submission/Marketplace_review_criteria +translation_of: Archive/Mozilla/Marketplace/Publishing/Marketplace_review_criteria +--- +
+

Dieser Artikel beschreibt die Anforderungen, die eine App erfüllen muss, um über den Firefox Marketplace verteilt zu werden. Diese Anforderungen sind dazu da, ein Gleichgewicht zwischen den Bedürfnissen der Entwickler und der Anwender von Apps aus dem Firefox Marketplace herzustellen. Entwickler möchten faire, einheitliche, nicht übermäßig strenge Anforderungen, auf denen sie verlässlich ihre Arbeit aufbauen können. Andererseits möchten Anwender die Gewissheit, dass Apps sicher sind, auf ihren Geräten funktionieren und tun, was sie zu tun angeben. Die folgenden App-Anforderungen versuchen, auf dem schmalen Grat zwischen diesen Anforderungen zu gehen.

+
+

Dies sind Mozillas Erwartungen daran, was eine App-Überprüfung ist und nicht ist:

+ +

Sicherheit

+

Die Einzelheiten der Sicherheitsarchitektur für Apps finden Sie hier: https://wiki.mozilla.org/Apps/Security

+ +

Datenschutz

+ +

Inhalt

+ +

Richtlinien für Inhalte

+

Diese Liste beschreibt Typen von Inhalten, die nicht in den Firefox Marketplace passen. Diese Liste ist beispielhaft, nicht abschließend und kann aktualisiert werden. Wenn eine App diese Richtlinien verletzt, darf Mozilla die App umgehend aus dem Firefox Marketplace entfernen.

+ +

Funktionalität

+ +

Bedienerfreundlichkeit

+ +

Sperrlisten-Richtlinie

+

Wir hoffen, diese Funktion niemals nutzen zu müssen, aber wir behalten uns vor, freigegebene Apps zu entfernen („blocklist“) bei denen wir im Laufe der Zeit feststellen, dass sie eine der Sicherheits-, Datenschutz- oder Inhalts-Richtlinien verletzt sowie Apps, die die System- oder Netzwerkleistung stark einschränken. Entwickler werden informiert, bevor die Sperre in Kraft tritt. Solange wir keine Beweise für das Gegenteil haben, gehen wir davon aus, dass Entwickler anständig sind und sie erhalten Unterstützung des Überprüfer-Teams zur Aufklärung und Behebung des Problems. Konkrete Beispiele, für Situationen, in denen wir uns eine Sperre vorbehalten, beinhalten:

+ diff --git "a/files/de/archive/mozilla/marketplace/ver\303\266ffentlichen/index.html" "b/files/de/archive/mozilla/marketplace/ver\303\266ffentlichen/index.html" new file mode 100644 index 0000000000..3c94ca1182 --- /dev/null +++ "b/files/de/archive/mozilla/marketplace/ver\303\266ffentlichen/index.html" @@ -0,0 +1,106 @@ +--- +title: Veröffentlichen auf dem Firefox Marketplace +slug: Archive/Mozilla/Marketplace/Veröffentlichen +translation_of: Archive/Mozilla/Marketplace/Publish +--- +
+

Dokumentation für das Veröffentlichen einer app auf dem Firefox Marketplace.

+
+
+
+
+
+ App testen und Problembehandlung
+
+
+
+ Ein leichtes Handbuch zur überprüfung und Problembehandlung , bevor Sie Ihre app auf den Firefox-Marktplace einreichen.
+
+
+
+ Senden einer app auf dem Firefox Marketplace
+
+
+
+ Dieser Leitfaden hilft Ihnen erfolgreich Ihre Anwendung auf den Firefox-Marktplace einzureichen.
+
+
+
+ Marketplace Prüfkriterien
+
+
+
+ Eine Erläuterung der Kriterien die eine app erfüllen muss um auf dem Firefox-Marktplatz veröffentlicht zu werden; Befolgen Sie die Richtlinien wie in diesem Artikel dargelegt.
+
+
+
+ Marketplace screenshot Kriterien
+
+
+
+ Richtlinien für die Screenshots um mit Ihrer app die Auswirkungen und die Qualität auf dem Markt zu maximieren.
+
+
+
+
+
+
+
+
+ Tools für app-Entwickler
+
+ +
+
+ Technologie-Referenzdokumentation
+
+
+ +
+
+
+ Hilfe von der Gemeinschaft
+
+
+
+ Wenn Sie noch nicht sicher sind was zu tun ist, was Sie erledigen wollen, zögern Sie nicht zu der Unterhaltung!
+
+  
+
+ +

Vergessen Sie nicht über die netiquette...

+

 

+
+
+
+

 

diff --git a/files/de/archive/mozilla/xul/action/index.html b/files/de/archive/mozilla/xul/action/index.html new file mode 100644 index 0000000000..5492305611 --- /dev/null +++ b/files/de/archive/mozilla/xul/action/index.html @@ -0,0 +1,86 @@ +--- +title: action +slug: Archive/Mozilla/XUL/action +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/action +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Das action Element wird verwendet, um den Inhalt festzulegen, welcher für jedes zutreffende Ergebnis einer Abfrage passt. Dieses Element sollte in den Elementen query oder rule enthalten sein.

+

Für weitere Informationen, siehe Aktionen.

+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
diff --git a/files/de/archive/mozilla/xul/arrowscrollbox/index.html b/files/de/archive/mozilla/xul/arrowscrollbox/index.html new file mode 100644 index 0000000000..d1785f82b6 --- /dev/null +++ b/files/de/archive/mozilla/xul/arrowscrollbox/index.html @@ -0,0 +1,134 @@ +--- +title: arrowscrollbox +slug: Archive/Mozilla/XUL/Arrowscrollbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/arrowscrollbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine Box, die entlang den Kanten Scrollpfeile bereitstellt, um die Box zu scrollen. Der Benutzer muss die Maus dazu nur über die Pfeile bewegen. Dieses Element wird typischerweise bei langen Popup-Menüs verwendet.

+

Wenn die Maus über einen (aktiven) Pfeil bewegt wird, wird ein Scroll-Event ausgelöst.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
disabled, smoothscroll, tabindex
+
+
Eigenschaften
disabled, scrollBoxObject, scrollIncrement, smoothScroll, tabIndex
+
+
Methoden
ensureElementIsVisible, scrollByIndex, scrollByPixels
+
+

Beispiele

+
Image:menuscroll1.jpg
+
<arrowscrollbox orient="vertical" flex="1">
+  <button label="Red"/>
+  <button label="Blue"/>
+  <button label="Green"/>
+  <button label="Yellow"/>
+  <button label="Orange"/>
+  <button label="Silver"/>
+  <button label="Lavender"/>
+  <button label="Gold"/>
+  <button label="Turquoise"/>
+  <button label="Peach"/>
+  <button label="Maroon"/>
+  <button label="Black"/>
+</arrowscrollbox>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ +
+
+ smoothscroll
+
+ Type: boolean
+
+ true initially enables smooth scrolling for the corresponding arrowscrollbox, false disables it. Currently, smooth scrolling supports horizontal arrowscrollboxes only.
+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+

+

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+ +

TBD

diff --git a/files/de/archive/mozilla/xul/assign/index.html b/files/de/archive/mozilla/xul/assign/index.html new file mode 100644 index 0000000000..a08496f06a --- /dev/null +++ b/files/de/archive/mozilla/xul/assign/index.html @@ -0,0 +1,115 @@ +--- +title: assign +slug: Archive/Mozilla/XUL/Assign +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/assign +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Erstellt eine zusätzliche Variable für XML Templates, deren Wert mittels XPath bestimmt werden kann.

+
Weitere Informationen sind unter XML_Assignments verfügbar.
+
Attribute

expr, var

+
+

Beispiele

+
<vbox datasources="people.xml" ref="*" querytype="xml">
+  <template>
+    <query expr="person">
+      <assign var="?namelength" expr="string-length(@name)"/>
+      <assign var="?siblings" expr="count(../*) - 1"/>
+    </query>
+    <action>
+      <hbox uri="?" align="center">
+        <button label="?name"/>
+        <label value="?gender"/>
+        <label value="?namelength"/>
+        <label value="?siblings"/>
+      </hbox>
+    </action>
+  </template>
+</vbox>
+
+

Attribute

+
+ +
expr
Typ: string
Ein XPath Ausdruck für XML Abfragen, der Ergebnisse zurückliefert. Innerhalb des Ausdrucks kann jeder Namespace Präfix verwendet werden, der für ein Element deklariert wurde.
+
+ +
+ +
var
Typ: string
Dient der Variablenzuweisung innerhalb assign Tags; ansonsten wird es als Referenz zu einer Template Variable wie beispielsweise "?name" verwendet.
+
+ + +
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
diff --git a/files/de/archive/mozilla/xul/attribute/accesskey/index.html b/files/de/archive/mozilla/xul/attribute/accesskey/index.html new file mode 100644 index 0000000000..5f223df6c4 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/accesskey/index.html @@ -0,0 +1,24 @@ +--- +title: accesskey +slug: Archive/Mozilla/XUL/Attribute/accesskey +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/accesskey +--- +
« XUL-Referenz Startseite
+
accesskey
Attribut von: button, checkbox, caption, description, label, listitem, menu, menuitem, menulist, tab, radio, toolbarbutton, textbox (Firefox autocomplete)
Typ: character
Dem Attribut wird der Buchstabe zugewiesen, der als Tastenkürzel für das Element dienen soll. Dieser Buchstabe sollte sinnvollerweise innerhalb des Textes des Attributs label des Elements vorkommen.
Typischerweise wird dieser Buchstabe visuell durch Unterstreichung hervorgehoben. Dies ist jedoch plattform- und themenspezifisch. Betätigt der Benutzer gleichzeitig die Alt-Taste (oder eine ähnliche Taste; variiert je nach Betriebssystem) und die durch dieses Attribut angegebene Taste, wird das Element im Fenster von überall aus aktiviert. Auch wenn Groß-/Kleinschreibung des Wertes irrelevant ist, wird die dem Attribut accesskey entsprechende Variante benutzt, sollten beide Schreibweisen innerhalb der Beschriftung vorkommen.
+
+
+

Beispiel

+
<vbox>
+  <label value="Namen eingeben" accesskey="e" control="myName"/>
+  <textbox id="myName"/>
+  <button label="Abbrechen" accesskey="b"/>
+  <button label="Ok" accesskey="O"/>
+</vbox>
+
+

Siehe auch

+

Attribut label, Attribut acceltext

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html b/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html new file mode 100644 index 0000000000..95f6be0346 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/activetitlebarcolor/index.html @@ -0,0 +1,14 @@ +--- +title: Activetitlebarcolor +slug: Archive/Mozilla/XUL/Attribute/Activetitlebarcolor +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/activetitlebarcolor +--- +
« XUL-Referenz Startseite
+
activetitlebarcolor
Typ: color string
Bestimmt die Hintergrundfarbe der Titelleiste eines Fensters, wenn es aktiv ist (Vordergrund). Außerdem versteckt dies die Trennlinie zwischen Titelleiste und Fensterinhalt. Dies trifft nur auf Mac OS Systeme zu.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/align/index.html b/files/de/archive/mozilla/xul/attribute/align/index.html new file mode 100644 index 0000000000..fe97a3c6c4 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/align/index.html @@ -0,0 +1,37 @@ +--- +title: align +slug: Archive/Mozilla/XUL/Attribute/align +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/align +--- +
+ « XUL-Referenz Startseite
+
+
+ align
+
+
+
+ Typ: einer der unten angegebenen Werte
+
+
+
+ Das Attribut align gibt die Ausrichtung der Kindelemente des Kastens (Box) an, wenn die Größe des Kastens größer als die Gesamtgröße seiner Kindelemente ist. Für Kästen horizontaler Orientierung gibt es die vertikale Ausrichtung der Kindelemente an. Im Falle vertikaler Orientierung legt es entsprechend die horizontale Ausrichtung der Kindelemente fest. Das Attribut pack bezieht sich auf die Ausrichtung, wird jedoch zur Angabe der Position in entgegengesetzter Richtung benutzt. Der Wert von align kann auch mittels der Stileigenschaft -moz-box-align angeben werden.
+
+ +
+

Siehe auch

+

Attribut pack

+ +
+

 

diff --git a/files/de/archive/mozilla/xul/attribute/allowevents/index.html b/files/de/archive/mozilla/xul/attribute/allowevents/index.html new file mode 100644 index 0000000000..63dc160f9e --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/allowevents/index.html @@ -0,0 +1,17 @@ +--- +title: allowevents +slug: Archive/Mozilla/XUL/Attribute/allowevents +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/allowevents +--- +
« XUL-Referenz Startseite
+
allowevents
Typ: boolean
Falls true, werden Ereignisse an die Kindelemente des Elements weitergereicht. Anderenfalls erhält nur das Element Ereignisse.
+
+
+

Bei listitem und titlebar Elementen werden Maus-Ereignisse normalerweise nicht an deren Kindelemente gesendet. Stattdessen werden sie zurück auf das listitem und titlebar Element selbst geschickt. Das bedeutet, dass Elemente innerhalb eines listitem Elements nicht auf auf Ereignisse reagieren und stattdessen nur ein Item in der Liste ausgewählt wird. Wird das allowevents Attribut auf true gesetzt, wird dieses spezielle Verhalten deaktiviert und Ereignisse werden wie bei anderen Elementen behandelt.

+

Bei menu, menuseparator, menuitem und treecol Elementen, sowie Menü-Buttons, und beim datepicker Popup werden Maus-Ereignisse ebenfalls auf das Element selbst gerichtet. Das allowevents Attribut wird jedoch in einer anderen Art verwendet. Das Attribut allowevents kann hier im Kindelement auf true gesetzt werden. Das hat die gleichen Auswirkungen, wie bei normal gerichteten Ereignissen, erlaubt aber unterschiedliche Einstellungen für jedes Kindelement.
+Dieses Verhalten wird für Menüs verwendet, um zum Beispiel einem Menü-Button zu erlauben sich so zu verhalten wie das Menü, wenn man darauf klickt.

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html b/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html new file mode 100644 index 0000000000..83634ca471 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/allownegativeassertions/index.html @@ -0,0 +1,11 @@ +--- +title: allownegativeassertions +slug: Archive/Mozilla/XUL/Attribute/allownegativeassertions +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/allownegativeassertions +--- +
« XUL-Referenz Startseite
+
allownegativeassertions
Typ: boolean
Gültig für jedes Element mit einem Attribut datasources. Werden mehrere Datenquellen benutzt, wird die Aussage eventuell von einer anderen überschrieben. Wenn dieses Attribut true ist (was die Vorgabe ist), kann eine Datenquelle eine frühere Aussage negieren.
+
diff --git a/files/de/archive/mozilla/xul/attribute/color/index.html b/files/de/archive/mozilla/xul/attribute/color/index.html new file mode 100644 index 0000000000..50902e7afe --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/color/index.html @@ -0,0 +1,14 @@ +--- +title: color +slug: Archive/Mozilla/XUL/Attribute/Color +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/color +--- +
« XUL-Referenz Startseite
+
color
Typ: color string
Die aktuell ausgewählte Farbe. Diese wird geändert, sobald der Anwender eine Farbe auswählt. Man kann einen String in der Form #RRGGBB der Eigenschaft zuweisen, um die gewählte Farbe zu ändern.
+
+
+

 

+
diff --git a/files/de/archive/mozilla/xul/attribute/cols/index.html b/files/de/archive/mozilla/xul/attribute/cols/index.html new file mode 100644 index 0000000000..1f2ea0a4d6 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/cols/index.html @@ -0,0 +1,14 @@ +--- +title: cols +slug: Archive/Mozilla/XUL/Attribute/Cols +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/cols +--- +
« XUL-Referenz Startseite
+
cols
Typ: integer
Stellt die Anzahl an Spalten für mehrzeilige Textboxen dar.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html b/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html new file mode 100644 index 0000000000..bea62c69a2 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/decimalplaces/index.html @@ -0,0 +1,14 @@ +--- +title: decimalplaces +slug: Archive/Mozilla/XUL/Attribute/Decimalplaces +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/decimalplaces +--- +
« XUL-Referenz Startseite
+
decimalplaces
Typ: integer
Die Anzahl an Dezimalstellen, die angezeigt werden sollen. Der Standardwert ist 0, was bedeutet, dass keine Dezimalstellen angezeigt werden. Der Wert infinity kann dazu verwendet werden, keine Begrenzung der Dezimalstellen bei Zahlen anzuzeigen. Hinweis: Dezimalzahlen werden als Floats gespeichert.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/disabled/index.html b/files/de/archive/mozilla/xul/attribute/disabled/index.html new file mode 100644 index 0000000000..0b296a38ea --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/disabled/index.html @@ -0,0 +1,28 @@ +--- +title: Disabled +slug: Archive/Mozilla/XUL/Attribute/Disabled +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/disabled +--- +
« XUL-Referenz Startseite
+
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+
+
// Deaktiviere ein Element.
+document.getElementById('buttRemove').setAttribute("disabled", "true");
+
+// Reaktiviere ein Element, während das "disabled" Attribute beibehalten wird.
+document.getElementById('buttRemove').setAttribute("disabled", "");
+
+// Reaktiviere ein Element, in dem das "disabled" Attribut entfernt wird.
+document.getElementById('buttRemove').removeAttribute("disabled");
+
+
+

Hinweis zu Firefox 3.5

+

Seit Firefox 3.5 wird dieses Attribut für Keyset Elemente unterstützt.

+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/empty/index.html b/files/de/archive/mozilla/xul/attribute/empty/index.html new file mode 100644 index 0000000000..f1a3d0071b --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/empty/index.html @@ -0,0 +1,14 @@ +--- +title: empty +slug: Archive/Mozilla/XUL/Attribute/Empty +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/textbox.empty +--- +
« XUL-Referenz Startseite
+
empty
Typ: boolean
Gibt an, ob emptyText angezeigt werden soll. Kann zur Gestaltung des Elements verwendet werden.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/emptytext/index.html b/files/de/archive/mozilla/xul/attribute/emptytext/index.html new file mode 100644 index 0000000000..9631bea08c --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/emptytext/index.html @@ -0,0 +1,14 @@ +--- +title: emptytext +slug: Archive/Mozilla/XUL/Attribute/Emptytext +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/emptytext +--- +
« XUL-Referenz Startseite
+
emptytext Unerwünscht Gecko 2
Typ: string
Ein String, der in der Textbox angezeigt wird, falls diese keinen Wert besitzt. Dieses Attribut wurde vom placeholder Attribut in Gecko 2 ersetzt. Der alte Name bleibt zur Kompatibilität bestehen, aber Sie sollten Ihren Code aktualisieren.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/expr/index.html b/files/de/archive/mozilla/xul/attribute/expr/index.html new file mode 100644 index 0000000000..1448277f5c --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/expr/index.html @@ -0,0 +1,14 @@ +--- +title: Expr +slug: Archive/Mozilla/XUL/Attribute/Expr +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/expr +--- +
« XUL-Referenz Startseite
+
expr
Typ: string
Ein XPath Ausdruck für XML Abfragen, der Ergebnisse zurückliefert. Innerhalb des Ausdrucks kann jeder Namespace Präfix verwendet werden, der für ein Element deklariert wurde.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html b/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html new file mode 100644 index 0000000000..37b86f1f3f --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/hidespinbuttons/index.html @@ -0,0 +1,10 @@ +--- +title: hidespinbuttons +slug: Archive/Mozilla/XUL/Attribute/Hidespinbuttons +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/hidespinbuttons +--- +
« XUL-Referenz Startseite
+
hidespinbuttons
Typ: boolean
Falls der Wert auf true gesetzt wird, werden keine Buttons mit Pfeilen angezeigt, um den Wert des Feldes anzupassen. Der Wert kann dann ausschließlich per Tastatur eingegeben werden. Standardmäßig ist der Wert false.
diff --git a/files/de/archive/mozilla/xul/attribute/index.html b/files/de/archive/mozilla/xul/attribute/index.html new file mode 100644 index 0000000000..2bc9d70f0d --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/index.html @@ -0,0 +1,11 @@ +--- +title: Attribute +slug: Archive/Mozilla/XUL/Attribute +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute +--- +

« XUL-Referenz Startseite

+ diff --git a/files/de/archive/mozilla/xul/attribute/label/index.html b/files/de/archive/mozilla/xul/attribute/label/index.html new file mode 100644 index 0000000000..d1bde8c8b8 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/label/index.html @@ -0,0 +1,32 @@ +--- +title: label +slug: Archive/Mozilla/XUL/Attribute/label +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/label +--- +
« XUL-Referenz Startseite
+
label
Typ: string
Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.
+
+
+

Siehe auch

+ +

Beispiele in JavaScript

+
<label value="Whaw" id="the-big-label" command="the-big-button"/>
+<button id="the-big-button" label="Klick mich"
+	oncommand="alert(document.getElementById('the-big-label').value)"/>
+
+<label id="myLabel" value="Meine Beschriftung"/>
+<button label="Klick mich"
+	oncommand="document.getElementById('myLabel').setAttribute('value','Wert geändert');" />
+
+<checkbox label="my Checkbox" id="myCheckboX"/>
+<button label="Weiterer Klick"
+	oncommand="document.getElementById('myCheckboX').setAttribute('label','Noch nicht angekreuzt');"/>
+<button label="Beschriftung des Ankreuzfeldes"
+	oncommand="alert( document.getElementById('myCheckboX').getAttribute('label') )"/>
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/onchange/index.html b/files/de/archive/mozilla/xul/attribute/onchange/index.html new file mode 100644 index 0000000000..ef1f0e8bd8 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/onchange/index.html @@ -0,0 +1,14 @@ +--- +title: onchange +slug: Archive/Mozilla/XUL/Attribute/Onchange +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/onchange +--- +
« XUL-Referenz Startseite
+
onchange
Typ: script code
Der Code im onchange Attribut wird aufgerufen, wenn sich der Wert des Elements geändert hat.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html b/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html new file mode 100644 index 0000000000..14c934c98f --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/prefpane.src/index.html @@ -0,0 +1,25 @@ +--- +title: prefpane.src +slug: Archive/Mozilla/XUL/Attribute/prefpane.src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/prefpane.src +--- +
+ « XUL-Referenz Startseite
+
+
+ src
+
+ Typ: Überlagerungs-URL
+
+ Die URL des Inhalts des prefpane. Sofern nicht angegeben, wird der Inhalt des prefpane Elements dargestellt.
+
+ +
+

Siehe auch

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/src/index.html b/files/de/archive/mozilla/xul/attribute/src/index.html new file mode 100644 index 0000000000..875fa55f2d --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/src/index.html @@ -0,0 +1,34 @@ +--- +title: src +slug: Archive/Mozilla/XUL/Attribute/src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/src +--- +
+ « XUL-Referenz Startseite
+
+
+ src
+
+ Typ: URL
+
+ Die URL des im Element anzuzeigenden Inhalts.
+
+
+

Beispiele

+ 
<iframe id="content-body" src="http://www.mozilla.org/"/>
+<browser src="http://www.mozilla.org" flex="1"/>
+<image src='Firefoxlogo.png' width='135' height='130'/>
+
+

Siehe auch

+ +
diff --git a/files/de/archive/mozilla/xul/attribute/treecell.src/index.html b/files/de/archive/mozilla/xul/attribute/treecell.src/index.html new file mode 100644 index 0000000000..0c1a44cd34 --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/treecell.src/index.html @@ -0,0 +1,17 @@ +--- +title: treecell.src +slug: Archive/Mozilla/XUL/Attribute/treecell.src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/treecell.src +--- +
« XUL-Referenz Startseite
+
src
Typ: Bild-URL
URL des Bildes, welches in der Zelle des Baums angezeigt werden soll. Sofern nicht angegeben, erscheint auch kein Bild. In der Zelle können sowohl Bild als auch Beschriftung angezeigt werden.
+
+
+

Siehe auch

+ + +
diff --git a/files/de/archive/mozilla/xul/attribute/treecol.src/index.html b/files/de/archive/mozilla/xul/attribute/treecol.src/index.html new file mode 100644 index 0000000000..e94d0f7cbb --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/treecol.src/index.html @@ -0,0 +1,17 @@ +--- +title: treecol.src +slug: Archive/Mozilla/XUL/Attribute/treecol.src +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/treecol.src +--- +
« XUL-Referenz Startseite
+
src
Typ: Bild-URL
Um für das treecol Element ein Bild für den Kopf, statt eines label Attribut zu benutzen, kann dieses Attribut gesetzt werden. Im Kopf können nicht gleichzeitig Bild und Beschriftung angezeigt werden. Die URL eines Bildes, das als Spaltenkopf des Baums angezeigt wird, kann mit diesem Attribut festgelegt werden. Wird das Attribut nicht angegeben, erscheint kein Bild und es wird stattdessen die Beschriftung angezeigt. Damit das Bild erscheint, muss die Klasse treecol-image für das treecol Element gesetzt werden. Ein label sollte dennoch für die Benutzung im Spaltenwähler angegeben werden, falls ignoreincolumnpicker nicht true ist und hidecolumnpicker für den tree ebenfalls nicht true ist .
+
+
+

Siehe auch

+ + +
diff --git a/files/de/archive/mozilla/xul/attribute/var/index.html b/files/de/archive/mozilla/xul/attribute/var/index.html new file mode 100644 index 0000000000..1ed49683ea --- /dev/null +++ b/files/de/archive/mozilla/xul/attribute/var/index.html @@ -0,0 +1,14 @@ +--- +title: var +slug: Archive/Mozilla/XUL/Attribute/Var +tags: + - XUL Attribute + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Attribute/var +--- +
« XUL-Referenz Startseite
+
var
Typ: string
Dient der Variablenzuweisung innerhalb assign Tags; ansonsten wird es als Referenz zu einer Template Variable wie beispielsweise "?name" verwendet.
+
+
+ +
diff --git a/files/de/archive/mozilla/xul/bbox/index.html b/files/de/archive/mozilla/xul/bbox/index.html new file mode 100644 index 0000000000..35dc11a250 --- /dev/null +++ b/files/de/archive/mozilla/xul/bbox/index.html @@ -0,0 +1,87 @@ +--- +title: Bbox +slug: Archive/Mozilla/XUL/Bbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/bbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine horizontale Box, die an der Grundlinie ausgerichtet ist. Gleichwertig zum hbox Element mit einem align Attribut mit dem Wert baseline.

+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+

TBD

diff --git a/files/de/archive/mozilla/xul/binding/index.html b/files/de/archive/mozilla/xul/binding/index.html new file mode 100644 index 0000000000..bc3dbe2daf --- /dev/null +++ b/files/de/archive/mozilla/xul/binding/index.html @@ -0,0 +1,89 @@ +--- +title: binding +slug: Archive/Mozilla/XUL/Binding +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/binding +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Sollte in einem bindings Element enthalten sein. Ein binding wird benutzt, um eine Variable an einen Node zu binden. Ähnlich zum Syntax des triple Elements, können die Eigenschaften eines entsprechenden Nodes an einen Variablennamen gebunden werden. Dieser Name kann innerhalb einer Aktion einer Regel benutzt werden.

+
Eigenschaften
object, predicate, subject
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+
+

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+

TBD

diff --git a/files/de/archive/mozilla/xul/box/index.html b/files/de/archive/mozilla/xul/box/index.html new file mode 100644 index 0000000000..b479153f5c --- /dev/null +++ b/files/de/archive/mozilla/xul/box/index.html @@ -0,0 +1,101 @@ +--- +title: box +slug: Archive/Mozilla/XUL/Box +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/box +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Containerelement, welches eine beliebige Anzahl an Kindelementen enthalten kann. Falls das box Element ein orient Attribut besitzt, das auf horizontal gesetzt ist, werden die Kindelemente von links nach rechts, in der Reihenfolge, in der sie in im box Element erscheinen, angelegt. Falls orient auf vertical gesetzt ist, werden die Kindelemente von oben nach unten angelegt. Kindelemente überlappen sich dabei nicht. Die standardmäßige Ausrichtung ist horizontal.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+

Beispiele

+
Image:XUL_ref_box.png
+
<box orient="horizontal">
+  <label value="Zero"/>
+  <box orient="vertical">
+    <label value="One"/>
+    <label value="Two"/>
+  </box>
+  <box orient="horizontal">
+    <label value="Three"/>
+    <label value="Four"/>
+  </box>
+</box>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+ +
Elemente
vbox, hbox
+
diff --git a/files/de/archive/mozilla/xul/colorpicker/index.html b/files/de/archive/mozilla/xul/colorpicker/index.html new file mode 100644 index 0000000000..fa6c6bf533 --- /dev/null +++ b/files/de/archive/mozilla/xul/colorpicker/index.html @@ -0,0 +1,77 @@ +--- +title: colorpicker +slug: Archive/Mozilla/XUL/Colorpicker +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/colorpicker +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine Farbpalette aus der ein Anwender durch Anklicken auf eine der Gitterzellen wählen kann.

+
Attribute
disabled, color, onchange, preference, tabindex, type
+
+
Eigenschaften
accessibleType, color, disabled, open, tabIndex
+
+

Beispiele

+

Image:XUL_REF_rgb.gif

+
<colorpicker/>
+
+

Attribute

+

+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ +
color
Typ: color string
Die aktuell ausgewählte Farbe. Diese wird geändert, sobald der Anwender eine Farbe auswählt. Man kann einen String in der Form #RRGGBB der Eigenschaft zuweisen, um die gewählte Farbe zu ändern.
+
+ +
+ +
onchange
Typ: script code
Der Code im onchange Attribut wird aufgerufen, wenn sich der Wert des Elements geändert hat.
+
+ +
+ + +
+
preference
+
Type: id
+
Connects the element to a corresponding preference. This attribute only has any effect when used inside a prefwindow. More information is available in the Preferences System article.
+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
type
+
Type: string
+
If this attribute is not present, the colorpicker is displayed inside the window. If this is set to the text button, the colorpicker is displayed as a button. When the user clicks the button, a popup appears for the user to select a color.
+
+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
Schnittstellen
nsIDOMXULControlElement
+
+

Bugs

+

Das onchange Event funktioniert nur, wenn das type Attribut auf "button" festgelegt wurde. Die Verwendung von onclick bietet sich daher an, wenn mit mit dem losen Colorpicker gearbeitet wird und die gerade ausgewählte Farbe benötigt wird, um z.B. in einer <textbox> angezeigt zu werden.

diff --git a/files/de/archive/mozilla/xul/eigenschaften/index.html b/files/de/archive/mozilla/xul/eigenschaften/index.html new file mode 100644 index 0000000000..f152ae7489 --- /dev/null +++ b/files/de/archive/mozilla/xul/eigenschaften/index.html @@ -0,0 +1,14 @@ +--- +title: Eigenschaften +slug: Archive/Mozilla/XUL/Eigenschaften +tags: + - XUL Eigenschaften + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Property +--- +

« XUL-Referenz Startseite

+ +

Verwandte DOM Elementeigenschaften

+ diff --git a/files/de/archive/mozilla/xul/events/index.html b/files/de/archive/mozilla/xul/events/index.html new file mode 100644 index 0000000000..346a893f9a --- /dev/null +++ b/files/de/archive/mozilla/xul/events/index.html @@ -0,0 +1,464 @@ +--- +title: Ereignisse +slug: Archive/Mozilla/XUL/Events +tags: + - XUL-Ereignisse +translation_of: Archive/Mozilla/XUL/Events +--- +

 

+ +

« Startseite XUL Referenz

+ +

 

+ +

Die folgenden Tabellen beschreiben die Ereignisbehandlungsroutinen, welche die meisten XUL-Elemente betreffen. Die Ereignisse können mit dem Element über »Lauscher« (Listener) verknüpft werden. Der addEventListener fügt ein Ereignis hinzu, der removeEventListener hebt diese Verknüpfung wieder auf.

+ +

Für einige Ereignisse kann die Verknüpfung auch über Attribute erfolgen. Hierbei muss jedoch berücksichtigt werden, dass nur ein Listener gleichzeitig verknüpft werden kann. Eventuell bereits bestehende Verknüpfungen mit Lauschern werden aufgelöst. Der Name des Attributs entspricht dem Namen des Ereignisses mit einem vorangestellten 'on'.

+ +

Geerbte DOM Ereignisse

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

blur

+ 		+

Das Gegenteil des focus-Ereignisses; das blur-Ereignis tritt auf, nachdem ein Element den Eingabefokus verloren hat.
+ Attribut: onblur

+
+

change

+ 		+

Dieses Ereignis wird gesendet, wenn der Wert eines Textfelds geändert wird, aber erst wenn der Eingabefokus auf ein anderes Element übergeht.
+ Attribut: onchange

+
+

click

+ 		+

Dieses Ereignis wird gesendet, wenn eine Maustaste gedrückt und wieder losgelassen wurde. Über die button Eigenschaft des Ereignisobjekts kann ermittelt werden, welche Maustaste gedrückt wurde. Dieses Ereignis wird auch gesendet, wenn der Benutzer einen Doppelklick ausführt. Über die detail Eigenschaft kann festgelegt werden, wie viele Klicks auftreten sollen. So kann auch auf dreifach-Klicks getestet werden. Dieses Ereignis sollte in XUL nicht verwendet werden, um auf Benutzeraktionen zu reagieren. Stattdessen sollte das command Ereignis benutzt werden.
+ Attribut: onclick

+
+

dblclick

+ 		+

Dieses Ereignis verhält sich wie das click Ereignis, allerdings wird es nur gesendet, wenn der Benutzer einen Doppelklick ausführt. Das Ereignis kann als eine Alternative zur detail Eigenschaft im click Ereignis verwendet werden.
+ Attribut: ondblclick

+
+

DOMMouseScroll

+ 		+

Dieses Ereignis wird gesendet, wenn das Mausrad bewegt wird, egal, ob der Inhalt gescrollt wird oder nicht.
+ Ziel dieses Ereignisses ist das Element, welches sich unter dem Mauszeiger befindet, wenn das Mausrad bewegt wird.

+
+

focus

+ 		+

Das focus Ereignis wird gesendet, wenn ein Element den Fokus erhält. Wenn das Element fokussiert ist, werden Tastaturereignisse zu diesem Element gesendet. Der Fokus kann geändert werden, indem auf eine anderes Element geklickt wird, die TAB Taste gedrückt wird, um zum nächsten Element zu wechseln, oder die »Zurück TAB« Taste gedrückt wird, um zum vorherigen Element zu wechseln.
+ Attribut: onfocus

+
+

keydown

+ 		+

Dieses Ereignis wird zu einem Element gesendet, das den Eingabefokus hat, während eine Taste gedrückt, aber nicht losgelassen wird.
+ Attribut: onkeydown

+
+

keypress

+ 		+

Das keypress Ereignis wird zu einem Element gesendet, das den Eingabefokus hat und eine Taste gedrückt und losgelassen wurde. Wenn der Benutzer eine Taste drückt, wird zuerst das keydown Ereignis gesendet, gefolgt vom keypress Ereignis und schließlich dem keyup Ereignis. In einem Textfeld kann der Benutzer normalerweise eine Taste gedrückt halten, um ein Zeichen wiederholt zu senden. In diesem Fall werden mehrere Ereignispaare gesendet, als ob der Benutzer die gleiche Taste sehr schnell hintereinander drücken würde.
+ Attribut: onkeypress

+
+

keyup

+ 		+

Das keyup Ereignis wird einem Element gesendet, das den Eingabefokus hat, wenn eine Taste losgelassen wird.
+ Attribut: onkeyup

+
+

load

+ 		+

Dieses Element wird zum Fenster gesendet, nachdem es vollständig geladen wurde. Die Behandlungsroutine sollte dem window Element zugewiesen werden. Dieses Ereignis kann auch bei Bildelementen oder einem Element, das Bildattribute akzeptiert verwendet werden und wird dann gesendet, wenn das Bild vollständig geladen wurde. Bei Bildern wird dieses Element nicht im Elementenbaum auftauchen, sodass es nicht mit dem load Ereignis des Fensters in Konflikt gerät.
+ Attribut: onload

+
+

mousedown

+ 		+

Dieses Ereignis wird gesendet, wenn die Maustaste über einem Element gedrückt, aber nicht losgelassen wird.
+ Attribut: onmousedown

+
+

mousemove

+ 		+

Dieses Ereignis wird wiederholt gesendet, während der Mauszeiger über einem Element bewegt wird.
+ Attribut: onmousemove

+
+

mouseout

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn der Benutzer den Mauszeiger aus dem Bereich des Elements bewegt. Es ist das Gegenstück zum mouseover Ereignis.
+ Attribut: onmouseout

+
+

mouseover

+ 		+

Dieses Element wird einem Element gesendet, wenn sich die Maus erstmals über einem Element befindet. Es kann dazu verwendet werden dem Benutzer Rückmeldungen bereitzustellen.
+ Attribut: onmouseover

+
+

mouseup

+ 		+

Dieses Ereignis wird gesendet, wenn die Maustaste über einem Element losgelassen wird.
+ Attribut: onmouseup

+
+

select

+ 		+

Dieses Ereignis wird einer Listbox bzw. einem Tree bei Auswahl eines Eintrags gesendet.
+ Attribut: onselect

+
+

unload

+ 		+

Dieses Ereignis wird einem Fenster gesendet, wenn das Fenster geschlossen wurde. Das erfolgt nach dem close Ereignis. Die Behandlungsroutine für dieses Ereignis sollte dem window Element zugewiesen werden.
+ Attribut: onunload

+
+ +

Ereignisse zu Veränderungen am DOM

+ + + + + + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

DOMAttrModified

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn eines der Attribute verändert wird. In der Behandlungsroutine kann das Attribut, welches verändert wurde, über die attrName Eigenschaft ermittelt werden. Neue und alte Werte des Attributs können über die prevValue und newValue Eigenschaften abgerufen werden.

+
+

DOMNodeInserted

+ 		+

Dieses Ereignis wird gesendet, wenn ein Kontenelement (als ein Kindelement) einem Element hinzugefügt wird. Wenn dieses Element auf dem Dokumentenlevel erfasst wird, können Hinweise zu Dokumentenveränderung auftreten.

+
+

DOMNodeRemoved

+ 		+

Dieses Ereignis wird gesendet, wenn ein Kontenelement aus einem Element entfernt wird. Wenn dieses Element auf dem Dokumentenlevel erfasst wird, können Hinweise zu Dokumentenveränderung auftreten.

+
+ +

Es sollte darauf hingewiesen werden, dass die Anwesenheit von Behandlungsroutinen zur Veränderungen am DOM die Performance von nachfolgenden DOM Operationen in dem Dokument stark beeinträchtigt. Das kann bedeuten, dass eine DOM Operation 1,5 bis 7 mal so lange braucht als es ohne einen Eventhandler brauchen würde.

+ +

Gebräuchliche XUL Ereignisse

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

broadcast

+ 		+

Dieses Ereignis sollte einem Beobachter zugewiesen werden. Das broadcast Ereignis wird gesendet, wenn die Attribute eines Elements verändert oder beobachtet werden.
+ Attribut: onbroadcast

+
+

close

+ 		+

Dieses Ereignis wird gesendet, wenn eine Anfrage durch den Benutzer getätigt wurde, die das Fenster schließen lassen soll (z.B durch Klick auf den Schließen Button). Wird eine Behandlungsroutine auf das window Element gesetzt, kann das Schließen des Fensters verhindert werden. Wird false vom Close-handler zurückgeliefert, wird das Fenster nicht geschlossen. Eine Rückgabe von true schließt das Fenster normal. Dieses Ereignis wird nur gesendet, wenn der Benutzer den Schließen Button in der Titelleiste anklickt. Das unload Ereignis erfasst alle Versuche das Fenster zu schließen.
+ Attribut: onclose

+
+

command

+ 		+

Dieses Ereignis wird gesendet, wenn ein Element aktiv ist. Wie es aktiviert wird, variiert von Element zu Element und in vielen Fällen gibt es mehrere Wege, um eine Element zu aktivieren. Zum Beispiel kann eine Schaltfläche, wenn sie fokussiert ist, durch ein Klick mit der Maus oder durch das Drücken der ENTER Taste aktivert werden. Menüs können durch das Auswählen mit der Maus oder durch das Drücken einer Schnelltaste aktiviert werden. Es sollte immer das command Ereignis, anstatt des click Ereignisses verwendet werden, weil in allen nötigen Fällen aufgerufen wird.
+ Attribut: oncommand

+
+

commandupdate

+ 		+

Dieses Ereignis tritt auf, wenn eine Befehlsaktualisierung beim <commandset> Element statt findet. Es wird verwendet, um die ausgeschalteten Befehle zu aktualisieren.
+ Attribut: oncommandupdate

+
+

contextmenu

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn der Benutzer eine Anfrage stellt, die ein Kontextmenü öffnen soll. Die Aktion variiert von Betriebssystem zu Betriebssystem, wird aber typischerweise durch einen Rechtsklick ausgelöst. Diese Behandlungsroutine wird normalerweise verwendet, um dynamische Befehle auszuführen, wenn der Benutzer die Anfrage stellt, das Menü anzuzeigen oder es wird ein Ereignis benutzt, welches ein Popup-Fenster anzeigt. Wird false von diesem Eventhandler zurückgegeben, wird verhindert, dass das Popup-Fenster angezeigt wird.
+ Attribut: oncontextmenu

+
+

drag {{ Fx_minversion_inline(3) }}

+ 		+

Das drag Ereignis wird zum Quellknoten (der Knoten, der gezogen wurde) mehrmals pro Sekunde gesendet, während ein Objekt gezogen wird.
+ Attribut: ondrag

+
+

dragdrop

+ 		+

Dieses Ereignis wird ausgelöst, wenn der Benutzer die Maustaste los lässt, um ein Objekt abzulegen, welches gezogen wurde. Das Element, wenn es das Ablegen akzeptiert, sollte in irgendeiner Weise reagieren (z.B. durch das Hineinlegen des gezogenen Objekten in das Element selbst).
+ Attribut: ondragdrop

+
+

dragend {{ Fx_minversion_inline(3) }}

+ 		+

Das dragend Ereignis wird zum Quellknoten (der Konten, der gezogen wurde) gesendet, wenn das Objekt nicht mehr gezogen wird.
+ Attribut: ondragend

+
+

dragenter

+ 		+

Das dragenter Ereignis wird gesendet, wenn sich der Mauszeiger erstmals über ein Element befindet in welches ein Objekt gezogen werden soll. Es ist ähnlich zum mouseover Ereignis, tritt aber nur beim Hineinlegen von Objekten auf.
+ Attribut: ondragenter

+
+

dragexit

+ 		+

Dieses Ereignis wird gesendet, wenn sich der Mauszeiger aus dem Element entfernt, in welches ein Objekten gezogen werden soll. Es wird auch aufgerufen, wenn ein Objekt in ein Element gezogen wurde. Es ist ähnlich zum mouseout Ereignis, tritt aber nur beim Hineinlegen von Objekten auf.
+ Attribut: ondragexit

+
+

draggesture

+ 		+

Dieses Ereignis wird gesendet, wenn der Benutzer beginnt ein Element zu ziehen, normalerweise in dem die Maustaste gedrückt und bewegt wird.
+ Attribut: ondraggesture

+
+

dragover

+ 		+

Ähnlich zum mousemove Ereignis wird dieses Ereignis gesendet, während etwas über ein Element gezogen wird. Die Behandlungsroutine sollte angeben, ob das Objekt gezogen wird oder abgelegt werden kann.
+ Attribut: ondragover

+
+

input

+ 		+

Dieses Ereignis wird gesendet, wenn der Benutzer einen Text in ein Textfeld eingibt. Das Ereignis wird nur dann aufgerufen, wenn der angezeigte Text verändert wird, daher wird es nicht aufgerufen, wenn der Benutzer Tasten drückt, die nicht in einem Textfeld dargestellt werden.
+ Attribut: oninput

+
+

overflow

+ 		+

Dieses Ereignis wird nur zu einer Box oder einem anderen Layoutelement gesendet, wenn die CSS overflow Eigenschaft auf einen anderen Wert als 'visible' festgelegt wird. Falls nicht genug Platz vorhanden ist, um den Inhalt des Elements vollständig anzuzeigen, wird das overflow Ereignis gesendet. Abhängig vom Wert der overflow Eigenschaft treten eventuell Scrollbalken auf. Wenn zum Beispiel eine Box eine maximale Größe von 100 Pixeln besitzt und nur genug Platz für 80 Pixel verfügbar ist, wird das overflow Ereignis zur Box gesendet. Wenn sich die Größe verändert, zum Beispiel durch den Benutzer, der die Fenstergröße ändert, wird das underflow Ereignis gesendet, wenn genug Platz frei wird.
+ Attribut: onoverflow

+
+

popuphidden

+ 		+

Dieses Ereignis wird einem Popup gesendet, nachdem er versteckt wurde.
+ Attribut: onpopuphidden

+
+

popuphiding

+ 		+

Dieses Ereignis wird einem Popup gesendet, wenn es versteckt wird.
+ Attribut: onpopuphiding

+
+

popupshowing

+ 		+

Dieses Ereignis wird einem Popup gesendet, bevor dieser angezeigt wird. Diese Behandlungsroutine wird normalerweise verwendet, um Inhalte dynamisch festzulegen, wenn der Benutzer eine Anfrage stellt diese anzuzeigen. Wird false vom Eventhandler zurückgegeben, wird die Anzeige des Popups verhindert.
+ Attribut: onpopupshowing

+
+

popupshown

+ 		+

Dieses Ereignis wird einem Popup gesendet, nachdem er geöffnet wurde, sehr ähnlich zum onload Ereignis, welches gesendet wird, wenn ein Fenster geöffnet wurde.
+ Attribut: onpopupshown

+
+

syncfrompreference

+ 		+

Dieses Ereignis wird gesendet, wenn das Element verändert wurde, weil eine Einstellung geändert wurde oder wenn ein Element von einer Einstellung initialisiert wurde. Dieses Ereignis wird nur an Elemente gesendet, die mit einer Einstellung verbunden sind und in prefwindow vorhanden sind. Das ist kein wirkliches Ereignis, es ist ein Funktionsaufruf und muss die Attributschreibweise verwenden. Das Skript kann einen Wert zurück liefern, um dem Element auf einen spezifischen Wert zu geben, als den Wert der Einstellung. Dieses Ereignis wird normalerweise verwendet, um einen Wert einzustellen, sodass es passender für die Anzeige in der Benutzeroberfläche gemacht werden kann.
+ Attribut: onsyncfrompreference

+
+

synctopreference

+ 		+

Dieses Ereignis wird gesendet, wenn ein Element, das mit einer Einstellung verbunden ist, verändert wurde. ieses Ereignis wird nur an Elemente gesendet, die mit einer Einstellung verbunden sind und in prefwindow vorhanden sind. Das ist kein wirkliches Ereignis, es ist ein Funktionsaufruf und muss die Attributschreibweise verwenden. Das Skript kann einen Wert zurück liefern, um dem Element auf einen spezifischen Wert zu geben, als den Wert der Einstellung.
+ Attribut: onsynctopreference

+
+

underflow

+ 		+

Dieses Ereignis wird einem Element gesendet, wenn genug Platz vorhanden ist, um es vollständig anzuzeigen. Das betrifft Boxen und andere Layoutelement mit der CSS overflow Eigenschaft, die einen anderen Wert als 'visible' besitzen. Das underflow Ereignis kann verwendet werden, um zu ermitteln, dass ein Scrollmechanismus nicht länger benötigt wird.
+ Attribut: onunderflow

+
+

DOMMenuItemActive

+ 		+

Dieses Ereignis wird gesendet, wenn ein Menü oder Menüitem hervorgehoben wird oder die Maus darüber schwebt.

+
+

DOMMenuItemInactive

+ 		+

Dieses Ereignis wird gesendet, wenn ein Menü oder Menüitem nicht länger hervorgehoben wird oder die Maus nicht länger darüber schwebt.

+
+ +

Ereignisse zur Zugänglichkeit (Accessibility)

+ +

Mit diesen Ereignissen wird das Zugänglichkeitssystem über Veränderungen an einem Element benachrichtigt. Sie würden diese normalerweise nicht selbst verwenden.

+ + + + + + + + + + + + + + + + +
EreignisBeschreibung
+

CheckboxStateChange

+ 		+

Dieses Ereignis wird gesendet, wenn eine checkbox angekreuzt oder nicht angekreuzt wird, entweder vom Benutzer oder von einem Skript. Normalerweise würde ein command Ereignis zur Abfrage der checkbox Veränderungen verwendetet werden, das command Ereignis wird aber nur gesendet, wenn der Benutzer den Wert verändert, während das CheckboxStateChange Ereignis auch gesendet wird, wenn ein Skript die checked Eigenschaft einer checkbox verändert. Bei Änderungen vom Benutzer wird das CheckboxStateChange Ereignis vor dem command Ereignis gesendet.

+
+

RadioStateChange

+ 		+

Dieses Ereignis wird gesendet, wenn ein Radiobutton ausgewählt wird, entweder vom Benutzer oder von einem Skript. Normalerweise würde ein command Ereignis zur Abfage der Veränderungen am Radiobutton verwendet werden, das command Ereignis wird aber nur gesendet, wenn der Benutzer den ausgewählten Radiobutton verändert, während das RadioStateChange Ereignis auch gesendet wird, wenn ein Skript die Auswahl verändert. Bei Änderungen vom Benutzer wird das RadioStateChange Ereignis vor dem command Ereignis gesendet.

+
+ +

{{ languages( { "en": "en/XUL/Events", "es": "es/XUL/Events", "ja": "ja/XUL/Events", "pl": "pl/XUL/Zdarzenia" } ) }}

diff --git a/files/de/archive/mozilla/xul/grippy/index.html b/files/de/archive/mozilla/xul/grippy/index.html new file mode 100644 index 0000000000..73061bf15a --- /dev/null +++ b/files/de/archive/mozilla/xul/grippy/index.html @@ -0,0 +1,88 @@ +--- +title: grippy +slug: Archive/Mozilla/XUL/grippy +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/grippy +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Element, das in einem splitter-Element verwendet werden kann. Es ermöglicht das Zusammenklappen eines Geschwisterelements des Trenners.

+

Weitere Informationen im XUL Tutorial.

+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandt

+

TBD

diff --git a/files/de/archive/mozilla/xul/iframe/index.html b/files/de/archive/mozilla/xul/iframe/index.html new file mode 100644 index 0000000000..7d5fa181af --- /dev/null +++ b/files/de/archive/mozilla/xul/iframe/index.html @@ -0,0 +1,161 @@ +--- +title: iframe +slug: Archive/Mozilla/XUL/iframe +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/iframe +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein innerer Frame, der in etwa wie das iframe-Element von HTML funktioniert. Das Attribut src gibt den Inhalt des Frames an. Dieser Inhalt befindet sich in einem separaten Dokument. Jegliche Kindelemente des iframe Elements werden ignoriert.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
showcaret, src, type, transparent
Eigenschaften
accessibleType, contentDocument, contentWindow, docShell, webNavigation
+
+

Beispiele

+
<iframe src="table.php" flex="2" id="browserTable" name="table_frame"/>
+
+

Einen URL aus einem Menü auswählen

+
<menulist oncommand="doNav(this);">
+  <menupopup>
+    <menuitem label="Mozilla" value="http://mozilla.org" />
+    <menuitem label="Slashdot" value="http://slashdot.org"/>
+    <menuitem label="Sourceforge" value="http://sf.net" />
+    <menuitem label="Freshmeat" value="http://freshmeat.net"/>
+  </menupopup>
+</menulist>
+
+
+<iframe id="myFrame" flex="1"/>
+
+<script>
+function doNav(obj){
+  var url = obj.selectedItem.value;
+  // note the firstChild is the menupopup element
+  document.getElementById('myFrame').setAttribute('src', url);
+}
+</script>
+
+

Attribute

+
+ + +
+
showcaret
+
Type: boolean
+
Whether or not to cause a typing caret to be visible in the content area. Default is false.
+
+ + +
+ +
+
+ src
+
+ Typ: URL
+
+ Die URL des im Element anzuzeigenden Inhalts.
+
+ +
+ + +
+
type
+
Type: one of the values below.
+
The type of browser, which can be used to set access of the document loaded inside the browser. If this is not set, the loaded document has the same access as the window containing the browser. More precisely: The document loaded into a chrome window is always of chrome type. Subdocuments of chrome documents are of chrome type, unless the container element (one of iframe, browser or editor) has one of the special type attribute values (the common ones are content, content-targetable and content-primary) indicating that the subdocument is of content type. This boundary has a number of special effects, such as making window.top == window (unless the browser is added to a chrome document), and preventing documents from inheriting the principal of the parent document. The type attribute on all frames in content documents is ignored; subdocuments of content documents are always content documents.
+
+
Warning: The type attribute must be set before the element is inserted into the document.
+
+
+
+
content
+
A browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it.
+
content-primary
+
The primary browser for content. The content that is loaded inside the browser is not allowed to access the chrome above it. For instance, in a web browser, this would be the element that displays the web page. The window for the primary content can be retrieved more conveniently using window.content.
+
content-targetable
+
One browser among many for content. The content that is loaded inside the browser is not allowed to access the chrome above it. This is the preferred value for any browser element in an application, which will use multiple browsers of equal privileges, and is unselected at the moment.
+
chrome
+
(default behaviour): A browser, intended to be used for loading privileged content using a chrome:// URI. Don't use for content from web, as this may cause serious security problems!
+
+
+
+ + +
+
transparent
Type: one of the values below
Set the background of an iframe as transparent.
transparent
This results in the iframe's background being transparent. This can be used to workaround things like bug 540911
+
+
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
Schnittstellen
nsIAccessibleProvider
+
diff --git a/files/de/archive/mozilla/xul/index.html b/files/de/archive/mozilla/xul/index.html new file mode 100644 index 0000000000..d275bb0520 --- /dev/null +++ b/files/de/archive/mozilla/xul/index.html @@ -0,0 +1,83 @@ +--- +title: XUL +slug: Archive/Mozilla/XUL +tags: + - XUL +translation_of: Archive/Mozilla/XUL +--- +
XUL Tutorial
+Ein geführter Leitfaden für einen schnellen Einstieg in XUL, ursprünglich von XULPlanet.
+ +
XUL (XML User Interface Language) ist Mozillas XML-basierte Beschreibungssprache, die plattformübergreifende Anwendungen ermöglicht, die unabhängig von einer bestehenden Internetverbindung ausgeführt werden können. Diese Anwendungen können leicht (z.B. sprachlich) mittels alternativen Texten oder Layouts und alternativer Grafik angepasst werden. Web-Entwickler, die bereits mit dynamischen HTML (DHTML) vertraut sind, finden sich schnell in XUL zurecht und können direkt mit dem Bauen von Anwendungen beginnen. Das XUL Periodensystem zeigt in Firefox oder einem anderen Gecko-basierten Browser einige XUL-Demos, die einen guten Überblick liefern.
+ + + + + + + + +
+

Dokumentation

+ +
+
XUL Referenz
+
XUL Elemente, Attribute, Eigenschaften, Methoden, und Eventhandler.
+
XUL Bedienelemente
+
Eine kurze Liste aller verfügbaren XUL Bedienelemente.
+
XUL School
+
Eine sehr ausführliche Tutorial-Reihe über die Entwicklung von Add-ons in Mozilla.
+
XUL Überblick
+
Beschreibung der wichtigsten Eigenschaften und Komponenten von XUL.
+
Menüs und Popups
+
Ein Leitfaden zur Verwendung von Menüs und Popup-Panels.
+
Leitfaden für Vorlagen
+
Ein detaillierter Leitfaden für XUL Vorlagen (Templates), einem Mittel zur Erzeugung von Inhalt aus Datenquellen.
+
Drag und Drop
+
Wie man Drag und Drop Operationen ausführen kann.
+
XUL Anwendungen für Firefox 3 anpassen
+
Eine Liste von Änderungen in Firefox 3.0, die XUL-Entwickler betreffen.
+
XUL Anwendungen für Firefox 2 anpassen
+
Eine Liste von Änderungen in Firefox 2.0, die XUL-Entwickler betreffen.
+
XUL Anwendungen für Firefox 1.5 anpassen
+
Eine Liste von Änderungen in Firefox 1.5, die XUL-Entwickler betreffen.
+
+ +

Alle anzeigen...

+ +
+
+ 		+

Community

+ +
    +
  • Mozillas XUL Foren:
    • +
+ +

{{ DiscussionList("dev-tech-xul", "mozilla.dev.tech.xul") }}

+ + + +

Tools

+ + + +

Verwandte Themen

+ +
+
JavaScript, XBL, CSS, RDF, Erweiterungen, XULRunner
+
+
+ +

{{ languages( { "en": "en/XUL", "es": "es/XUL", "fr": "fr/XUL", "it": "it/XUL", "ja": "ja/XUL", "ko": "ko/XUL", "pl": "pl/XUL", "pt": "pt/XUL", "ru": "ru/XUL", "zh-cn": "cn/XUL", "zh-tw": "zh_tw/XUL" } ) }}

diff --git a/files/de/archive/mozilla/xul/method/geticon/index.html b/files/de/archive/mozilla/xul/method/geticon/index.html new file mode 100644 index 0000000000..cb0dd30447 --- /dev/null +++ b/files/de/archive/mozilla/xul/method/geticon/index.html @@ -0,0 +1,15 @@ +--- +title: getIcon +slug: Archive/Mozilla/XUL/Method/getIcon +translation_of: Archive/Mozilla/XUL/Method/getIcon +--- +
+ « XUL-Referenz Startseite
+
+
+ getIcon( aTab )
+
+ Return type: string
+
+ Returns the URL of the specified tab's favicon. If aTab is null, the current tab's icon is returned. See setIcon to set the icon.
+
diff --git a/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html b/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html new file mode 100644 index 0000000000..bc48db12b9 --- /dev/null +++ b/files/de/archive/mozilla/xul/method/gettabforbrowser/index.html @@ -0,0 +1,15 @@ +--- +title: getTabForBrowser +slug: Archive/Mozilla/XUL/Method/getTabForBrowser +translation_of: Archive/Mozilla/XUL/Method/getTabForBrowser +--- +
+ « XUL-Referenz Startseite
+
+
+ getTabForBrowser( browser )
+
+ Return type: tab
+
+ Returns the XUL tab which contains the specified browser.
+
diff --git a/files/de/archive/mozilla/xul/method/index.html b/files/de/archive/mozilla/xul/method/index.html new file mode 100644 index 0000000000..934c525318 --- /dev/null +++ b/files/de/archive/mozilla/xul/method/index.html @@ -0,0 +1,14 @@ +--- +title: Methoden +slug: Archive/Mozilla/XUL/Method +tags: + - XUL Methoden + - XUL Referenz +translation_of: Archive/Mozilla/XUL/Method +--- +

« XUL-Referenz Startseite

+ +

Verwandte DOM-Element Methoden

+ diff --git a/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html b/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html new file mode 100644 index 0000000000..e48c15eade --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/adding_menus_and_submenus/index.html @@ -0,0 +1,99 @@ +--- +title: Adding menus and submenus +slug: Archive/Mozilla/XUL/School_tutorial/Adding_menus_and_submenus +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Adding_menus_and_submenus +--- +

{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}

+

The Hello World example in the previous sections shows the two most common ways to add menus. In this section we'll look into more specialized menus and what you can do with them.

+

Adding a New Menu

+

We already saw how to add menus in overlays and, as you may have imagined, you can nest submenus as deep as you want. You should avoid having deep menus or too many options, since they are confusing for most users.

+

If your extension requires custom XUL windows, you may also need to have menus on those windows. You can do this with a menubar. The menubar element should be a child of a toolbox element because it is treated like another toolbar on systems other than Mac OS X.

+
+

Mac OS X treats menus in a very different way than other systems. If your extension involves menus in any way, you should test it on Mac OS X to make sure everything works adequately.

+
+

The toolbox should be positioned near the top of the XUL document, and the code should be similar to this:

+
<toolbox>
+  <menubar id="xulschoolhello-menubar">
+    <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;">
+      <menupopup>
+        <menuitem label="&xulschoolhello.greet.short.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" />
+        <menuitem label="&xulschoolhello.greet.medium.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" />
+        <menuitem label="&xulschoolhello.greet.long.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" />
+        <menuseparator />
+        <menuitem label="&xulschoolhello.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" />
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+

This code displays a simple menu with options for 3 different types of greetings, a menuseparator, and finally an option to show a custom greeting. The separator is usually displayed as a horizontal line that creates a logical division between different types of menuitem elements, keeping everything more organized.

+

A menubar can hold one or more menu elements. Menus require a menupopup element as a container for its children, which are usually menuitem elements, but can also be menuseparator, or menu in order to have multiple nesting levels:

+
<toolbox>
+ <menubar id="xulschoolhello-menubar">
+    <menu id="xulschoolhello-greeting-menu" label="&xulschoolhello.greeting.label;">
+      <menupopup>
+        <menu id="xulschoolhello-greeting-sizes-menu" label="&xulschoolhello.greetingSizes.label;">
+          <menupopup>
+            <menuitem label="&xulschoolhello.greet.short.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingShort(event);" />
+            <menuitem label="&xulschoolhello.greet.medium.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingMedium(event);" />
+            <menuitem label="&xulschoolhello.greet.long.label;"
+              oncommand="XULSchoolChrome.GreetingDialog.greetingLong(event);" />
+          </menupopup>
+        </menu>
+        <menuitem label="&xulschoolhello.greet.custom.label;"
+          oncommand="XULSchoolChrome.GreetingDialog.greetingCustom(event);" />
+      </menupopup>
+    </menu>
+  </menubar>
+</toolbox>
+

In this case we grouped the 3 greeting items into a submenu. It doesn't make much sense to do that in this case because we end up with only two menu items, one of them being a menu with 3 child items.

+

You can also have menus that are filled dynamically. Instead of setting the menupopup directly in the XUL, you can use the onpopupshowing event to fill the children when the popup is about to be displayed. DOM functions like createElement and appendChild can be used to accomplish this.

+
+

If you have nothing to show on a menu, you should follow the standard used in Firefox: show a single disabled item with an "(Empty)" label.

+

If filling your menu takes a noticeable amount of time, you should not make Firefox (and your users) wait for it to fill up before displaying anything. It's best to show an item with a throbber image (see chrome://global/skin/icons/loading_16.png) so the user knows there's something going on, and asynchronously fill its contents. We'll look into some asynchronous techniques further ahead in the tutorial.

+
+

Adding Elements to Existing Menus

+

Just as explained in the previous sections, the best place to overlay your extension menu is inside the Tools menu. That is, unless there's a place inside the menu structure where your extension menus make more sense. If you're overlaying the Tools menu, your overlay code should have something like this:

+
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="javascriptConsole,devToolsSeparator">
+    <menupopup>
+      <!-- Your menuitem goes here. -->
+    </menupopup>
+  </menu>
+</menupopup>
+

Now let's look at some specialized types of menu items.

+ +

Checkbox Menu Items

+

You can make a menuitem "checkable" to allow the user to enable/disable options using the menu. We use two attributes for this: type and checked. The type attribute must be set to "checkbox". You can set the checked attribute to "true" to check it by default.

+

The item's checked state changes when the user clicks on it. An example of one such item is the View > Status Bar item in the main Firefox menu.

+

Radio Menu Items

+

If you need to have a set of menuitem elements where only one of them has to be checked at any given moment, you should set the type to "radio". The name attribute is used to identify the items that belong to the radio group.

+
<menupopup oncommand="XULSchoolChrome.HW.GreetingDialog.greeting(event);">
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.short.label;" checked="true" />
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.medium.label;" />
+  <menuitem type="radio" name="xulschoolhello-greeting-radio"
+    label="&xulschoolhello.greet.long.label;" />
+</menupopup>
+

This is a modified version of the 3 greeting menus. It is now implemented as a radio menu where you pick one of the 3 available choices. The first one is checked by default. The oncommand attribute is set on the menupopup to avoid code duplication, since now the 3 items call the same function.

+

Another example of a menu like this is the View > Sidebars menu. Only one sidebar is visible at any given moment, and you can pick from several.

+ +

To add an icon to a menu or menuitem, set its class to "menu-iconic" or "menuitem-iconic" respectively, and set the image attribute or the list-style-image CSS property. Menu icons are typically 16px by 16px.

+ +

As mentioned earlier, menus are very different on Mac OS X. This is because menus on Mac are located in a single menu bar which is controlled by the operating system, as opposed to menus in other systems, which are entirely controlled by Firefox. Mac OS X also has menu standards, such as the positioning of certain items that are not used in other systems. Here's a list of the known issues we've run into when handling menus on Mac:

+ +

{{ PreviousNext("XUL_School/Setting_Up_a_Development_Environment", "XUL_School/Adding_Toolbars_and_Toolbar_Buttons") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html b/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html new file mode 100644 index 0000000000..cda64ab5a8 --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/die_grundlagen_einer_erweiterung/index.html @@ -0,0 +1,454 @@ +--- +title: Die Grundlagen einer Erweiterung +slug: Archive/Mozilla/XUL/School_tutorial/Die_Grundlagen_einer_Erweiterung +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/The_Essentials_of_an_Extension +--- +

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

+ +

Die install.rdf Datei

+ +

In der letzten Lektion haben wir uns den Inhalt der Hello World Erweiterung angesehen.Jetzt werfen wir einen Blick in diese Dateien und den Code, beginnen wir mit der install.rdf Datei. Sie können diese mit jedem Texteditor öffnen.

+ +

Die Datei ist in einem speziellen Dialekt von XML, RDF genannt formatiert. RDF wird eingesetzt als ein zentraler Speichermechanismus für Forefox, aber es ist jetzt durch ein einfacheres Datenbanksystem ersetzt worden. Wir werden später in diesem Tutorial beide Speichersystem besprechen.

+ +

Nehmen wir jetzt einen genaueren Blick auf die wichtigen Teile der Datei.

+ +
+
+
<em:id>helloworld@xulschool.com</em:id>
+
+
+ +

Dies ist der eindeutige Bezeichner für die Erweiterung. Firefox benötigt diesen für die Unterscheidung eurer Erweiterung von anderen Erweiterungen, aufgrunddessen ist es erforderlich das Sie eine ID haben die eindeutig ist.

+ +

Es gibt zwei akzeptierte Standards für Add-on ID`s. Eine ist das E-Mail ähnliche Format in dem Hello World Beispiel, dieses sollte folgendermaßen aufgebaut sein <project-name>@<yourdomain>. Die andere standard Vorgehensweise ist die Verwendung eines erzeugten UUID-Strings, welcher sehr unwahrscheinlich duppliziert ist. UNIX-basierte Systeme haben ein Kommandozeilenprogramm mit dem Namen uuidgen das diese UUID`S erzeugt. Auch gibt es herunterladbare Anwendungen für alle Plattformen die diese gnerieren. Die umschließenden Klammern sind nur ein Teil der Notation und hierbei handelt es sich nur um die gängige Praxis. Solange Ihre ID etwas eindeutiges hat, ist es OK diese in irgendeiner Form zu verwenden.

+ +
+
+
<em:name>XUL School Hello World</em:name>
+<em:description>Welcome to XUL School!</em:description>
+<em:version>0.1</em:version>
+<em:creator>Appcoast</em:creator>
+<em:homepageURL>https://developer.mozilla.org/en-US/docs/XUL_School</em:homepageURL>
+ +

Dies sind die Informationen die angezeigt werden bevor und nachdem die Erweiterung installiert ist, die Sie im Add-on Manager sehen können. Es können viele weitere Tags für Beteiligte und Übersetzer hinzugefügt werden. Die vollständige Spezifikation der install.rdf Datei beinhaltet alle Details.

+ +

Seit Erweiterungen in mehrere Sprachen übersetzt werden können, ist es oft notwendig die Erweiterungsbeschreibung zu übersetzen, oder sogar deren Namen. Eine lokal begrenzte Beschreibung und Name kann mit dem folgenden Code hinzugefügt werden.

+
+
+ +
+
+
<em:localized>
+  <Description>
+    <em:locale>es-ES</em:locale>
+    <em:name>XUL School Hola Mundo</em:name>
+    <em:description>Bienvenido a XUL School!</em:description>
+  </Description>
+</em:localized>
+
+
+ +

Der es-Es lokale String bedeutet das dies die spanische (es) lokalisierung für Spanien (ES) ist. Sie können soviele <em:localized> Sektionen hinzufügen wie Sie benötigen. Für Friefox 2, ist die lokaliesierungs Datei etwas komplizierter. Wir werden im weiteren die lokalisierung in diesem Kapitel besprechen.

+ +
+
+
<em:type>2</em:type>
+
+
+ +

Dies bestimmt, dass das Add-on als eine Erweiterung installiert wird. Sie können die verschieden möglichen Typen in der install.rdf Spezifikation nachlesen.

+ +
+
+
<em:targetApplication>
+  <Description>
+    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+    <em:minVersion>4.0</em:minVersion>
+    <em:maxVersion>10.*</em:maxVersion>
+  </Description>
+</em:targetApplication>
+
+
+
+ +

Dieser Knoten spezifiziert die Zielanwendung und die Zielversion für die Erweiterung, in der Regel Firefox von Version 4 bis zu Version 10. Die UUID ist die eindeutige ID von Firefox. Ander Mozilla und Mozillabasierte Anwendenungen wie z.B. Thunderbirf und Seamonkey besitzen ihre eigene. Es ist möglich eine Erweiterung zu besitzen die auf mehreren Anwendungen und Versionen arbeitet. Als Beispiel , wenn Sie eine Firefox-Erweiterung entwickeln, wird es in der Regel wenig Aufwand erfordern diese zu SeaMonkey zu portieren, welches ähnliche Features und Benutzeroberflächen besitzt.

+ +

Die min und max Version Angabe spezifiziert den Versionbereich in dem die Erweiterung installiert werden kann. Hier gibt es mehr Informationen über das Versionsformat. Wenn die Anwendung nicht mit dem Versionsbereich übereinstimmt, wird es Ihnen nicht erlaubt sein die Anwendung zu installieren, oder die Erweiterung wird mit einem gesetzten deaktiviert Status installiert. Benutzer können Versionsüberprüfungen über die Einstellungen deaktivieren, oder durch die Installation von Add-on`s wie den Add-on Compatibility Reporter. Mit Anfang des Firefox 11, werden Add-on`s standardmäßig als kompatiel betrachtet und Firefox wird den Versionsbereich weitesgehend ignorieren. Das Testen Ihrer Add-on`s auf allen Firefoxversionen ist immer empfehlenswert.

+ +

Diese Informationen werden von Firefox und anderen Mozillaanwendungen benötigt um ein Add-on zu installieren. Jeder Fehler oder fehlende Informationen werden den Installationsprozess zum Scheitern bringen, oder die Erweiterung wird mit einem gesetzten deaktvitiert Status installiert.

+ +

The chrome.manifest File

+ +
+

Chrome is the set of user interface elements of the application window that are outside of a window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.

+
+ +

Auszug aus der Chrome Registration.

+ +

Mit anderen Worten, Chrome ist alles was Sie im Firefox sehen. Alle Firefoxfenster können betrachtet werden als Zusammensetzung zweier Teilbereiche: (1) Chrome und (2) ein möglicher Inhaltsbereich, wie das das in Firefox die Anzeige von Webseiten übernimmt. Fenster wie das Downloadfenster sind ausschließlich Chrome. Der Großteil des Programmcodes einer Erweiterung liegt im Chromeordner, wie bei dem Hello World Beispiel.

+ +

Wie wir in der Ordnerstruktur der entpackten Erweiterung gesehen haben, Chrome ist zusammengesetzt aus drei Teilbereichen: content, locale und skin. Diese drei sind notwendig für die meisten Erweiterungen. Wenn wir die chrome.manifest-Datei erneut öffnen (nochmals jeder Texteditor kann hierfür verwendet werden), werden wir diese drei angesprochenen Teilbereiche erkennen können.

+ +
+
+
content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/
+locale    xulschoolhello  en-US       locale/en-US/
+
+
+
+ +

Die chrome.manifest Datei lässt Firefox wissen, wo es nach den Chromedateien zu suchen hat. Der Text ist formatiert so das er dem Aussehen einer Tabelle gleicht, aber dies ist nicht notwendig. Der Parser ignoriert aufeinanderfolgende Leerzeichen.

+ +

Das erste Wort in einer Zeile teilt Firefox mit, was angegeben ist (content, skin, locale, oder weiter Angaben, die später erwähnt werden). Das zweite ist der Paketname, was wir demnächst erklären werden.

+ +

Darstellungs und lokale Packete besitzen einen dritten Wert, um zu spezifizieren welche lokale oder welche Darstellung sie erweitern. Es können mehrere Darstellungs und lokale Einträge für unterschiedliche Darstellung und lokalisierungs Variablen eingetragen werden. Der häufigste Fall ist es einen Darstellungeintrag für die gloabe Darstellung zu haben , classic/1.0, und mehrere lokale Einträge, einen für jede Übersetzung. Am Ende wird eine Ortsvariable spezifizerit.

+ +

Es gibt einige zusätzliche Optionen, die in die Einträge der chrome.manifest Datei eingefügt werden können. Diese sind auf der Chrome Registration Seite dokumentiert. Beachtenswert ist, wir können Einträge erstellen, die Betriebssystem spezifisch sind. Dies ist wichtig, weil das Aussehen des Browsers ist sehr unterschiedlich für jedes Betriebssystem. Wenn es notwendig ist, dass Ihre Erweiterung auf verschieden Systemen unterschiedlich aussieht, könnten wir das Manifest so anpassen, dass es aussieht wie hier:

+ +
+
+
content   xulschoolhello              content/
+skin      xulschoolhello  classic/1.0 skin/unix/
+skin      xulschoolhello  classic/1.0 skin/mac/ os=Darwin
+skin      xulschoolhello  classic/1.0 skin/win/ os=WinNT
+locale    xulschoolhello  en-US       locale/en-US/
+
+
+
+ +

Über diesen Weg können wir unterschiedliche Darstellungen für Windows, Mac OS X und Linux (plus anderer unix-ähnlichen Systemen) haben, die jede von ihnen in einer seperaten Ordnerstruktur definiert ist. Seit die meisten anderen System Unix-basiert sind, ist die "unix" Darstellung der Standard ohne weitere Marker.

+ +

Chrome

+ +

Wie zuvor angesprochen Chrome besteht aus 3 Teilbereichen: content, locale und skin. Der content-Bereich ist der wichtigste Bereich, beinhaltet die Benutzerschnittstelle (XUL) und Skriptdateien (JA). Der Darstellungsbereich beinhaltet die Dateien die das Meiste des Aussehen und Verhalten der UI (mit Einsatz von CSS und Bildern, wie bei Webseiten) definieren. Abschließend enthält der locale Bereich den gesamten in der Erweiterung verwendeten Text, in DTD und die Einstellungsdateien. Diese Aufteilung erlaubt es anderenen Entwicklern Themes zu entwickeln die die Darstellung ersetzen und Übersetzer für andere Sprachen, all das ohne das eine Änderung der Erweiterung oder des Programmcodes notwendig wäre. Dies gibt Firefox Erweiterungen eine großartige Flexibiltät.

+ +

Chrome Dateien werden über das Chrome-Protokoll zugewiesen. So sieht eine chrome URI aus:

+ +
+
+
chrome://packagename/section/path/to/file
+ +

Wenn ich beispielsweise Zugriff auf die Datei browserOverlay.xul haben möchte, wäre die Chrome URI chrome://xulschoolhello/content/browserOverlay.xul.

+
+
+ +

Wenn Sie zu viele Dateien im content Bereich habe und Sie diese in Subordner organisieren wollen, gibt es nichts was Sie im chrome.manifest ändern müssen, alles was Sie benötigen ist den richtigen Pfad nach content in die URI hinzuzufügen.

+ +

Darstellungs- und Regions-Dateien arbeiten in der selben Art und Weise, und Sie müssen keine Darstellungs- oder Regions -Namen festleggen. Also um auf die DTD-Datei in der Hello Wolrd Erweiterung zuzugreifen, ist der Chromepfad chrome://xulschoolhello/locale/browserOverlay.dtd. Firefox was anschließend nach welcher Region es abrufen muss.

+ +

Hier ist ein interesantes Experiment. Öffne ein neues Firefox Tab, tippe chrome://mozapps/content/downloads/downloads.xul in deine Adressleiste und drücke Enter. Überrascht? Sie haben soeben das Downloadfenster in einem Firefoxtab geöffnet! Sie können auf jede Chromedatei zugreifen indem Sie die URI in die Addressleite eintippen. Dies kann nützlich werden, wenn du Skriptdatei untersuchen möchtest, die ein Teil von Firefox, anderen Erweiterungen oder deine eigene sind. Die meisten dieser Dateien werden als Textdatei geöffnet, mit der Ausnahme von XUL-Dateien, diese werden ausgeführt und so dargestellt wie Sie diese normalerweise in einem Fenster sehen würden.

+ +

Content

+ +

Es gibt 2 Dateien im content Verzeichnis. Sehen wir uns zuerst die XUL-Datei an.

+ +

Bei XUL-Dateien handelt es sich um XML-Dateien, die Benutzeroberflächenelemente in Firefox und Firefoxerweiterungen definieren. XUL wurde von HTML inspiriert, von daher werden Sie viele Ähnlichkeiten zwischen den beiden feststellen. Wie auch immer, XUL ist auch eine Verbesserung gegenüber HTML, die aus vielen Fehlern gelernt hat, die bei der Entwickliung von HTML gemacht wurden. XUL erlaubt Ihnen reichere und interaktivere Oberflächen zu erstellen, als mit HTML, oder zumindest macht XUL es einfacher.

+ +

XUL-Dateien defineren in der Regel eine von zwei Dingen: Fenster oder Overlays. Die Datei die Sie zuvor geöffnet haben, downloads.xul, beinhaltet den Programmcode der das Downloadfenster definiert. Die XUL-Datei die in der Hello World Erweiterung eingeschlossen ist, ist eine Overlay. Ein Overlay erweitert ein vorhandes Fenster, fügt diesem neue Elemente hinzu oder ersetzt einige der Elemente in ihm. Die Zeile die wir in der chrome.manifest Datei übersprungen haben gibt an das es sich bei dieser XUL-Datei um ein Overlay für das Browserhauptfenster handelt:

+ +
+
+
overlay chrome://browser/content/browser.xul  chrome://xulschoolhello/content/browserOverlay.xul
+ +

Durch diese Zeile weiß Firefox, dass es die Inhalte aus browserOverlay.xul verwenden muss und diese über das Browserhauptfenster, browser.xul legen muss. Sie können für jedes Fenster oder Dialog in Firefox ein Overlay festlegen, aber ein Overlay über das Browserhauptfenster zu legen ist der mit Abstand häufigste Fall.

+ +

Jetzt nehme wir einen Blick auf unsere XUL-Datei. Wir werden die ersten paar Zeilen überspringen, weil diese sich auf die Darstellung und die Region beziehen, diese werden wir im späteren behandeln.

+
+
+ +
+
+
<overlay id="xulschoolhello-browser-overlay"  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+
+ +

Das Wurzelelement in dieser Datei ist ein Overlay. Andere XUL-Dokumente nutzen den window oder dialog Tag. Das Element besitzt einie eindeutige ID, welche Sie bei den meisten Element in Ihrer XUL vergeben sollten. Das zweite Attribut ist der Namensraum, diesen sollten Sie immer in Ihrem XUL-Wurzelelment definieren. Es sagt aus, dass dieser Knoten und alle Kindknotten XUL-Element sind. Sie brauchen nur änderungen an der Namensraum deklaration vornehmen, wenn Sie verschiedene Arten eines Inhalts in dem gleichen Dokument kombinieren, wie z.B. XUL mit HTML oder SVG.

+ +
+
+
You may have noticed the naming we use on several places, such as the id xulschoolhello-browser-overlay. This is the namespacing standard that we use to avoid conflicts with Firefox and other extensions, as well as making some development tasks easier. We namespace all ids and style classes in overlay elements because they will be mixed with other elements in the main browser window. If we used generic ids like container or input, they will likely conflict with ids used within Firefox, or with ids from other extension overlays. Using namespaces minimizes compatibility problems with other extensions. We use camel casing for file names, and all lower case with dashes for element ids and CSS style class names, but you're free to use your own system.
+
+
+ +
+
+
<script type="application/x-javascript"   src="chrome://xulschoolhello/content/browserOverlay.js" />
+
+
+ +

Wie in HTML, wird hierdurch eine JavaScript-Datei eingebunden. Sie können soviele Skriptelement in ein XUL-Dokumente einbinden wie Sie benötigen. Wir werden uns diesen Programmcode später noch ansehen.

+ +
+
+
You also probably noticed how we format our code, and wonder about the rules we follow. Our general rule on line length is not having lines longer than 80 characters. This feels very restrictive, specially with XML files, but the number was chosen to allow pretty much any text editor to handle these files easily. Even old command line editors work well with files that cut their lines at 80 characters. The tabulation is very straightforward: 2 blank space indents. We never use actual tab characters, with the exception of Makefiles, which will be covered later on. Most of our coding standards are based on Mozilla's or other known and used standards.
+
+
+ +

Wir werden etwas Programmcode übersprinder, der im Regionsbereich behandelt wird, um mit dem wichtigsten Bereich von content fortzufahren.

+ +
+
+
<menubar id="main-menubar">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="helpMenu">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menubar>
+
+<vbox id="appmenuSecondaryPane">
+  <menu id="xulschoolhello-hello-menu-2" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertafter="appmenu_addons">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item-2"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</vbox>
+
+
+
+ +

Das ist der Code, der das Hello World-Menü dem Browserfenster hinzufügt.

+ +

Darin enthalten sind zwei ähnliche Codeblöcke, dass ist dadurch begründet das in modernen Versionen von Firefox, insbesondere unter Windows, ein einzelner Firefox Menübutton mit vereinfachten Menüoptionen, anstatt einer umfangreichen Menübar dargestellt wird. Der zweite Codeblock bezieht sich auf alle üblichen Buttonprozesse; der erste Codeblock bezieht sich auf alle anderen Prozesse. Setze den Hacken Menüleiste unter dem Optionsmenü im Menübutton, um die Anzeige des klassischen Menüs unter Windows und einigen Linuxdistributionen zu aktivieren.

+ +

Um diesen Code zu schreiben, benötigen wir etwas Wissen über den XUL-Code in browser.xul. Wir müssen wissen, dass die ID des rechten Fläche in dem undefinierten Menü appmenuSecondaryPane ist. Wir werden ein eigenes Menü hinzufügen und Firefox mitteilen dieses rechts nachdem Add-on-Element in die Fläche hinzuzufügen. Dies ist die Festlegung des Attributes:

+ +
+
+
insertafter="appmenu_addons"
+
+
+
+ +

appmenu_addons ist die ID des Menüelements, dass mit dem Add-on-Menü im Hauptmenü in verbindung steht. Wir werden später sehen wir die Dinge wie die ID von Browserelementen ermitteln können, aber jetzt sehen wir uns die Elemente aus denen sich das Hello World-Menü zusammensetzt.

+ +

Für das klassische Menü, fügen wir das Hello World-Menü rechts in das "Wurzelverzeichnis" der Menüs hinzu, so dass es sehr einfach zu finden ist, aber in der Praxis ist es nicht notwendig. Stellen Sie sich vor was passieren würde, wenn alle Erweiterungen ein Menü im oberen Menü hinzufügen würden; ein paar Erweiterungen zu haben würde es dann außen lassen wie die Kontrollanzeige eines Flugzeuges, voller Knöpfe und Schalter. Im Falle des zusammengesetzen Menüs, sind die Dinge aufgrund von zu wenigen Optionen etwas mehr kompliziert. Wenn dein Menüitem in den Webentwicklerbereich passt empfiehlt es sich es dort zu platzieren. Andererweise ist das Wurzelmenü möglicherweise der einzige sinnvolle Ort.

+ +

Ein empfehlenswerter Ort für Menüs in dem Klassikmenü ist unter dem Extrasmenü, von daher sollte der Code in etwa so aussehen:

+ +
+
+
<menupopup id="menu_ToolsPopup">
+  <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;"
+    accesskey="&xulschoolhello.helloMenu.accesskey;"
+    insertbefore="devToolsEndSeparator">
+    <menupopup>
+      <menuitem id="xulschoolhello-hello-menu-item"
+        label="&xulschoolhello.hello.label;"
+        accesskey="&xulschoolhello.helloItem.accesskey;"
+        oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" />
+    </menupopup>
+  </menu>
+</menupopup>
+
+
+
+ +

Wir legen das Menü über das tieferlegende in dem XUL-Baum, aber das spielt keine Rolle weil alles was wir benötigen ist die ID des Elements das wir Überblenden wollen. In diesem Fall ist dies das Menüpopup-Element das sich innerhalb des Extras. Dasinsertbefore Attribut teilt Firefox mit das Menü im unteren Bereich des Entwicklerextrasbereich hinzuzufügen, über den abschließenden Seperatoren. Wir werden im späteren des Tutorials über Menüs sprechen.

+ +

Nehmen wir jetzt einen Blick auf den  eigentlichen Code:

+ +
+
+
oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);"
+
+
+
+ +

Dieses Attribute beschreibt einen Eventhandler. . Das command event ist das am meisten genutzte in Firefox, da es mit den Hauptaktionen der meisten UI-Elemente kommuniziert. Der Nutzen der Attribute ist der JacaScript-Code der eine Funktion aufruft. Diese Funktion ist in er der JS-Datei definiert, das mit Skript-Tag eingebunden wird. Die JS-Funktion wird aufgerufen wenn der Benutzer auf einen Menüeintrag im Hello World-Menü aufruft. Alle Eventhandler definieren ein spezielles Objekt namens event, welches normalerweise ausreicht um ein Argument an die Funktion zu übergeben. Eventhandler werden im späteren genauer definiert.

+ +

Nun werfen wir einen Blick in die JavaScript-Datei und und sehen uns an wenn das Event ausgeführt wird.

+ +
+
+
/**
+ * XULSchoolChrome namespace.
+ */
+if ("undefined" == typeof(XULSchoolChrome)) {
+  var XULSchoolChrome = {};
+};
+
+
+ +

Der XULSchoolChrome Namensraum ist definiert. Alle Objekte und Variablen die wir i JavaScript definieren sind global, das bedeutet das Skripte in Firefox und andere Erweiterungen können diese sehen und mit Ihnen interagieren. Dies bedeudet also dass wenn wir ein Objekt MenuHandler definieren oder einige generische Namen, ist es wahrscheinlich das es mit einem extierenden Objekt in Konflikt steht. Was wir hier machen ist ein einzelnes globales Objekt zu definieren: XULSchoolChrome. Nun wissen dass alle unsere Objekte sind innerhalb dieses Objekts, welches unwahrscheinlich duplliziert oder überschrieben wird von anderen Erweiterungen.

+ +

Sie können hier mehr über den typeof operator erfahren. Wenn Sie nicht mit JavaScript oder der besonderen Syntax, ein Objekt mit {} zu intialisieren ist identisch mit es mit new Object() zu intialisieren.

+ +
+
+
/**
+ * Controls the browser overlay for the Hello World extension.
+ */
+XULSchoolChrome.BrowserOverlay = {
+
+
+ +

Sclussendlich ist BrowserOverlay unser Objekt. Ein Objekt in solcher langen und ausführlichen Art und Weise zu benennen und refernzieren kann sich am Anfang unkomfirtabel anfühlen, aber es ist den Aufwand wert.

+ +
+
+
We use Javadoc style comments on all namespaces, objects and object members. This is a similar standard to the one used in Mozilla code, and some tools can generate documentation automatically from Javadoc.
+
+
+ +
+
+
sayHello : function(aEvent) {
+  let stringBundle = document.getElementById("xulschoolhello-string-bundle");
+  let message = stringBundle.getString("xulschoolhello.greeting.label");
+
+  window.alert(message);
+}
+
+
+ +

Und Schlussendlich ist dass unsere Funktionsdeklaration. Drei Zeilen sind alles was wir benötigen. Die erste Zeile in dem Body der Funktion deklariert eine Variable die das stringbundle-Element beinhaltet, das im Overlay definiert ist. Die Variable ist deklariert durch die Verwendung von let, dass var ähnlich ist aber einen enger begrenzten Bereich besitzt. Hier können Sie mehr über die let deklaration nachlesen.

+ +

WIe auch im regulären JS, können wir das DOM (Document Object Model) nutzen um dass XUL-Dokument zu manipulieren.Als erstes bekommen wir eine referenze auf das stringbundle-Element  in dem Dokument. Dies ist ein spezielles Element das es uns erlaubt beschränkte Strings dynamisch zu erhalten, nur durch die bereitstellung eines "key`s" der Den String identifiziert. Das macht die zweite Zeile. Wir rufen die getString Methode des bundle-Elements udn bekommen die begrenzte Meldung angeziegt. Anschließende rufen wir die window.alert-Funktion auf, wie wir das auch in einem HTML-Dokument machen würden.

+ +

Locale

+ +

Es gibt zwei Arten von locale-Dateien: DTD und Einstellungen, und in diesem Beispiel werden wir beide benutzen. DTD ist der effizenteste Weg um Text in XUL anzuzeigen, von daher sollten Sie es benutzen wann immer es möglich ist. Es ist etwas unflexibel, so kann es nicht für dynamisch erzeugten Text verwendet werden, folglich gibt es eine Notwendigkeit um auf regionale Strings zuzugreifen.

+ +

Werfen wir einen Blick zurück auf den Menücode, dort haben Sie unter Umständen einge Attribute wie diese bemerkt:

+ +
+
+
label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;"
+
+
+ +

Diese Attribute definieren den Text den Sie in den Menüs sehen,  es sind String-keys die in unserer DTD-Datei definiert sind, browserOverlay.dtd. Die DTD-Datei wurd mit folgendem Code in die XUL-Datei eingefügt:

+ +
+
+
<!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd" >
+
+
+ +

Und in der DTD-Datei können Sie die Zuordnung von Keys und regionalen Strings sehen:

+ +
+
+
<!ENTITY xulschoolhello.hello.label            "Hello World!">
+<!ENTITY xulschoolhello.helloMenu.accesskey    "l">
+<!ENTITY xulschoolhello.helloItem.accesskey    "H">
+
+
+ +

Beachte das Sie in den XUL-Dateien den String mit & und ; umschließen, wohingegen sie in eriner DTD-Datei nur den Key spezifizieren. Sie erhalten womöglich sonderbare Fehlermeldungen oder Zuordnungen wenn Sie dass nicht beachten.

+ +

Zugangs Key`s sind Shortcuts die es Ihnen erlauben, nur mit der Tastatur schnell durch ein Menü zu navigieren. Sie sind auch der einzige Weg durch die Menüs zu navigieren für Menschen die eine Barrierefreiheit benötigen, durch teilweise oder vollkommene Blindheit oder durch körperliche Eingeschränktheit die, dass nutzen einer Maus sehr schwierig oder unmöglich machen. Sie können die Zugangs-Key`s unter Windows leicht erkennen, weil der Buchstabe der mit dem Zugangs-Key in Verbindung steht unterstrichen ist, wie in der folgenden Abbildung.

+ +
+

+
+ +

DIe meisten Benutzeroberflächen Schaltflächen besitzen ein accesskey Atribut, und Sie sollten es benutzen. Der Wert eines Zugangs-Key`s ist lokal beschränkt, weil er einem Buchstaben im Labeltext entsprechen soll. Sie sollten darauf achten es zu vermeiden Zugangs-Key´s zu wiederholen. Als Beispiel, innerhalb eines Menüs oder Untermenüs sollten Zugangs-Key`s nicht wiederholt werden. In einem Fenster müssen Sie noch vorsichtiger sein bei der Auswahl von Zugang-Key`s weil es dort normalerweise eine größere Anzahl an Schaltflächen gibt. Besonders vorsichtig müssen Sie sein wenn Sie Zugangs-Key`s für eine Overlay auswahlen. In unserem Fall, können wir den Buchstaben "H" nicht als einen Zugangs-Key im Hauptmenü verwenden, weil dieser sich mit dem Zugangs-Key den Hilfemenüs überschneiden würde. Das selbe gilt für das "W" und das Fenstermenü unter Mac OS. Von daher haben wir den Buchstaben "l" zugewiesen.

+ +

DTD-Strings werden aufgelöst und gesetzt wenn das Dokument lädt. Wenn Sie den label-Attribute Wert für das Hello World-Menü mit hilfe von DOM abfragen, erhalten Sie den begrenzten String und nicht den String-Key. Sie können nicht dynamischen den Wert von Attributen mit einem neuen DTD-Schlüssel ändern, Sie müssen den neuen Wert direkt setzen.

+ +
+
+
let helloItem = document.getElementById("xulschoolhello-hello-menu-item");
+
+// The alert will say "Hello World!"
+alert(helloItem.getAttribute("label"));
+// Wrong
+helloItem.setAttribute("label", "&xulschoolhello.hello2.label;");
+// Better
+helloItem.setAttribute("label", "Alternate message");
+// Right!
+helloItem.setAttribute("label", someStringBundle.getString("xulschoolhello.hello2.label"));
+
+
+ +

Das ist der Grund warum DTD-String keine Lösung für alle beschränkten Fälle sind, and der Grund warum wir oft Stringpakete in XUL-Dateien einbinden müssen.

+ +
+
+
<stringbundleset id="stringbundleset">
+  <stringbundle id="xulschoolhello-string-bundle"
+    src="chrome://xulschoolhello/locale/browserOverlay.properties" />
+</stringbundleset>
+
+
+ +

Das stringbundleset-Element ist nur ein Container für stringbundle-Elemente. Hiervon sollte eines pro Dokument geben, dies ist auch der Grund warum wir das stringbundleset in der browser.xul überschreiben, daher die sehr generische ID.  Wir fügen keine insertbefore oder insertafter Attribute ein weil die Reihenfolge der Stringpakete keine Rolle spielt. Das Element ist vollständig unsichtbar. Wenn Sie keine Ordnungsattribute in ein Overlay-Element einfügen, wird Firefox Ihr Element als letztes Kindelement des Elternelements betrachten.

+ +

Alles was Sie für das Stringpaket benötigen ist eine ID (um später auf das Element zugreifen zu können und den Chrome-Pfad der Einstellungsdatei. Und natürlich die Einstellungsdatei:

+ +
xulshoolhello.greeting.label = Hi! How are you?
+ +

Die Leerzeichen vor und nach dem Gleichheitszeichen werden ignoriert. Genauso wie in der install.rdf, Kommentare können durch das "#" Zeichen am Anfang einer zeile hinzugefügt werden. Leere Zeilen werden ebenso ignoriert.

+ +

Sei werden oft einen dynamischen Inhalt als Teil eines begrenzten Strings einbinden wollen, wie wenn Sie den Nutzer über den Status der Erweiterung informieren wollen. Als Beispiel: "Es wurden 5 der Suchanfrage entprechende Wörter gefunden". Ihre erste Idee ist möglicherweise einfach Strings zu verketten und eine "Found" Eigenschaft und eine weitere "words matching..." Eigenschaft zu verwenden. Dies ist keine Gute Idee. Sie behindert nur in einem großen Maße die Arbeit von Übersetzern und Grammatikregeln der verschieden Sprachen ändern möglicherweise den Aufbau des Satzes. Aus diesem Grund ist es besser Parameter in den Eienschaften zu verwenden.

+ +
+
+
xulshoolhello.search.label = Found %S words matching the search query!
+
+
+ +

Wenn Sie den getFormattedString anstatt des getString verwenden um auf den begrenzten String zuzugreifen. Glücklicherweise müssen wir durch dass nicht mehrere Eigenschaften anlegen, hierdurch wird das Leben für Übersetzer einfacher. Sie können mehr über das in dem Text Formatting Bereich des XUL Tutorial nachlesen. Werfen Sie auch einen Blick auf die Plurals and Localization Artikel, die die Lokalisierungsfunktionen behandeln und es Ihnen weiterhin erlauben das letzte Beispiel zu verbessern, um verschiedene Arten von Pluralformen zu verarbeiten die auch Sprachabhängig sind.

+ +

Skin

+ +

XUL zu gestalten ist dem gestalten von HTML sehr ähnlich. Wir werden uns einige Unterschiede ansehen wenn wir das XUL-Box-Modell und andere fortgeschritten Themen. Es gibt nicht viel was Sie in bei einem minimalen Menü und einer einfachen Warnmeldung gestalten können, da die Hello World ERweiterung nur eine leere CSS-Datei und eine vorgeschriebene globale Skin-Datei beinhaltet:

+ +
+
+
<?xml-stylesheet type="text/css" href="chrome://global/skin/"  ?>
+<?xml-stylesheet type="text/css"
+  href="chrome://xulschoolhello/skin/browserOverlay.css"  ?>
+
+
+ +

Die globale Skin-CSS-Datei enthält alle standard Styles für alle XUL-Elmente und Fenster. Wenn Sie vergessen diese Datei in ein XUL-Fensterer einzubinden, führt das normalerweise zu intersanten und oft ungewohlten Ergebnissen. In unserem Fall müssen wir diese nicht einbinden, seit wir die Hauptbrowser-XUL-Datei überblenden und diese bindet bereits diese globale CSS-Datei ein. Auf jeden Fall ist es besser sie immer einzubinden. Auf diesem Weg ist es schwieriger Fehler durch ein nicht einbinden zu vermeiden. Sie können den Chrome-Pfad in der Adressleiste eingeben und überprüfen wenn Sie sich unsicher sind.

+ +

Dies behandelt alle Dateien der Hello World-Erweiterung. Nun sollten Sie eine Idee haben welche in die Erweiterungsentwicklung involviert sind, nun steigen wir direkt ein und stzen eine Eintwicklungumgebung auf. Aber als erstes eine kleine Übung.

+ +

This covers all of the files in the Hello World extension. Now you should have an idea of the basics involved in extension development, so now we'll jump right in and set up a development environment. But first, a little exercise.

+ +

Übung

+ +

Mache die folgenden Änderungen in der Beispielerweiterung:

+ + + +

Packe die XPI neu. Führe unter Linux oder Mac OS X folgendes Kommando innerhalb des Wurzelverzeichnisses der Erweiterung aus:

+ +
zip -r ../xulschoolhello2.xpi *
+
+ +

Verwende unter Windows ein ZIP-Tool um alle Datei und Unterverzeichnisse innerhalb des Wurzelverzeichnisses der Erweiterung zu packen und setze die Dateierweiterung der Datei auf .xpi.

+ +

Installiere die XPI neu. Sie können hierzu die XPI-Datei hierzu einfach in den Browser ziehen und diese wird lokal installiert.

+ +

Teste es und überprüfe ob die Änderungen funktionieren. Wenn Sie auf Probleme während der Installation stoßen, ist es wahrscheinlich, dass Sie die XPI-Struktur nicht korrekt nachgebildet haben, möglicherweise durch das hinzufügen unnötiger Ordner.

+ +
Note: Packaging an extension is really just creating a ZIP archive of the contents of the main folder, then changing the filename extension to .XPI. Do not zip the containing folder, just its contents. The content folder, chrome.manifest, install.rdf, and other files and directories should be at the root level of your archive. If you zip the containing folder, your extension will not load.
+ +

Beachte, dass das Extramenü standardmäßig in Firefox 4und höher, unter Windows und einige Linuxdistributionen versteckt ist. Setze einen Hacken im Optionsmenü unter dem Firefoxmenüknopf um es zu aktivieren.

+ +

Nachdem Sie fertig sind, können Sie sich diese Refernzlösung ansehen: Hello World 2.

+ +

+ +

{{ PreviousNext("XUL_School/Getting_Started_with_Firefox_Extensions", "XUL_School/Setting_Up_a_Development_Environment") }}

+ +

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html b/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html new file mode 100644 index 0000000000..1f4ea0ffbb --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/eine_entwicklungsumgebung_einrichten_environment/index.html @@ -0,0 +1,161 @@ +--- +title: Eine Entwicklungsumgebung einrichten +slug: >- + Archive/Mozilla/XUL/School_tutorial/Eine_Entwicklungsumgebung_einrichten_Environment +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Setting_Up_a_Development_Environment +--- +

{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}

+

Eine Entwicklungsumgebung einrichten

+

Es gibt 3 Tools von denen wir denken das diese essentiell für eine effektive Add-on-Entwicklung sind (oder ehrlich gesagt für jede Art von Entwicklung): ein Quellcodeeditor, ein Versionskontrollsystem und eine Entwicklungsumgebung.

+

Im Bezug auf das Codeediting, es gibt keine offizelle Mozilla IDE. Mit anderen Worten, Erweiterungen benutzen die selben (oder ähnlichen) Sprachen die auch für die Webentwicklung genutzt werden, von daher könnnen die meisten Texteditoren und IDE`s eingesetzt werden. Die meisten XUL-Tools und Plugin`s die Sie Online finden werden sind lediglich Templates die die Ordnerstruktur füre das Projekt erzeugen, und das ist nicht viel Hilfe.

+

WIe empfehlen Komodo Edit. Es ist kostenlos, OpenSource und Cross-Platform-Unabhängig. Es basiert auf der Mozilla XULRunner Platform, von daher unterstützt einige der Besonderheiten in der Firefoxerweiterungsentwicklung. Komodo Edit bietet eine Autovercollständigung für XUL-Tags und Attribute und es unterstützt Mozilla`s CSS-Erweiterungen (CSS-Werte und Einstellungen beginnen mit "-moz"). Es besitzt ein Add-on System ähnlich dem im Firefox, und es gibt einige Komodo-Erweiterungen die zusätzliche Hilfe bei der Erweiterungsentwicklung bieten. Das ist mehr als die meisten andern Editoren bieten, von daher empfehlen wir Ihnen ihm eine Chance zu geben. Alle unsere Beispiel wurden mit Komodo Edit erstellt, also wenn Sie eine .kpf oder .komodoproject fi Datei in einem Beispieldownload sehen ist das eine Komodoprojektdatei.

+

+

Wir empfehlen Git und GitHub für die Versionskontrolle, aber jedes anständige Software-Configuration-Management System kann hier eingesetzt werden.

+

Um XPI-Dateien zu packen, nutzen wir make. Wir haben make gewählt weil dieses System von Mozilla genutzt wird um Firefox zu bauen und es ist für alle Betriebssysteme verfügbar. make ist das Standard Tool in den meisten UNIX-basierten Systemen. Es kann unter Mac OS X als Teil von des XCode Tool-Paketes installiert werden und unter Windows mit cygwin. In einer cygwin-Installation werden Sie explizit die make und zip utilities aus der langen Liste der Pakete auswählen müssen um diese herunterzuladen und installieren.

+

Sorgen Sie des weiteren dafür das make sich im ausführbaren Systempfad befindet. Nach der Einrichtung von make, sollten Sie in der Lage sein ein Kommandozeildenfenster zu öffnen, führen Sie "make-ver" aus, und Sie bekommen die installierte Version von make als Ausgabe.

+

Wir empfehlen Ihnen make auf Ihrem System einzurichten, da unsere Beispiele beinhalten alle notwendigen Dateien um die daraus entstehende XPI mit diesem Toolzu bauen und installieren. Es wird Ihnen einiges an Zeit für das packen ersparen. Oder Sie können ein vergleichbares System unter der Verwendung von Batch aufsetzen, machen Sie es wie auch immer Sie bevorzugen. Letztlich können Sie auch einfach jeden Zip oder Archivierungs Tool verwenden um den Inhalt des src Verzeichnisses zu komprimieren um ein identisches Ergebniss zu ereichen.

+

Build system

+

Beginnen wir mit dem Herunterladen des Projekts mit dem die zweite Version von Hello World aufgebaut wurde, aus der Übung der letzten Lektion

+

Hello World 2 Project.

+

Entpacken die Datei wohin Sie wollen. Innerhalb des HelloWorld2 Verzeichnisses weden Sie zwei Verzeichnisse sehen: bin und src. Das bin Verzeichnis sollte leer sein. Dort werden alle enstehenden build-Dateien erstellt und dort werden Sie die Erweiterungs XPI-Datei finden wenn sie erstellt wurde.

+

Öffnen Sie die Projektdatei (HelloWorld2.komodoproject) in the src Verzeichnis in Komodo Edit. In dem Projektreiter sollten Sie nun in der Lage sein die Verzeichnisstruktur innerhalbt des src-Verzeichnises sehen. Dies Struktur solle ihnen vertraut sein, da Sie beinahe identisch mit der ungepackten XPI von der vorherigen Lektion ist.

+

Die einzige bemwerkswerte Änderung ist eine Datei mit der Bezeichnung Makefile unter src. Das ist die Datei die make nutzt  um die XPI zu erstellen. Sie sollten sich etwas Zeit nehmen um diese zu lesen und zu verstehen., oder zumindest die Teile untersuchen die Sie ändern müssen um Ihr projekt zu beginnen. Die GNU Make Manual ist eine sehr gute Refernz um sich mit make und der Makefile-Datei vertraut zu machen.

+

In den meisten Fällen müssen Sie nur ein paar der ersten Zeilen in der Makefile-Datei ändern. Diese definieren den Erweiterungsnamen, die Erweiterungs ID (wie in install.rdf festgelegt) und der Name des profile-Verzeichnisses wohin die Erweiterung während der Entwicklung und des testens installiert wird. Mehr über das später.

+

Versuchen wir zuerst die XPI über die Kommandozeile zu erstellen. Öffnen Sie das Kommandozeilenprogramm in Ihrem System und naviergien Sie zum src Verzeichnis in Ihrem Projekt. Führen Sie folgenden Befehl aus:

+
+
+ 
make
+
+
+

Das ist es. Wenn alles gut läuft sollten Sie eine Ausgabe wie diese sehen:

+
+
+ 
Creating XPI file.
+  adding: install.rdf (deflated 50%)
+  adding: chrome.manifest (deflated 50%)
+  adding: content/browserOverlay.js (deflated 42%)
+  adding: content/browserOverlay.xul (deflated 69%)
+  adding: skin/browserOverlay.css (stored 0%)
+  adding: locale/en-US/browserOverlay.dtd (deflated 52%)
+  adding: locale/en-US/browserOverlay.properties (stored 0%)
+Creating XPI file. Done!
+
+Build finished successfully.
+
+
+
+

Wenn Sie das bin Verzeichnis untersuchen, sollten Sie die xulschoolhello2.xpi Datei sehen.

+

Wenn Sie make ausführen, werden Sie die letzte Zeilde des Erstellungsprozesses sehen. Das ist so weil make mitteilt das die Datei im bin Verzeichnis aktuell ist und es nichts zu machen gibt. Änderungen an der Quelldatei werden make dazu bringen die notwendigen Schritte erneut auszuführen um XPI erneut zu erstellen.

+

Sie können das bin Verzeichnis aufräumen indem Sie einfach den folgenden Befehl ausführen (nochmal, innerhalb des src Verzeichnises)
+  

+
+
+ 
make clean
+
+
+

Sie können diese Befehle auch in Komodo ausführen. Klicken Sie auf Tools > Befehl ausführen... In das "Ausführen" Textfeld sollten Sie das eingeben:

+
+
+ 
bash -c "make"
+
+
+

+

Oder ersetzen Sie "make" mit "make clean" für das aufräumen. Der "basc -c" Teil zwingt Komodo bash zu nutzen, welches aus einigen Gründen nicht als das Standard Kommandozeile gesetzt werden kann. Es ist nicht notwendig dies zu tun, aber es ist besser so das mit dem make-Befehl übereinstimmt den wir als nächstes sehen werden.

+

In em "Start in" Textfeld sollten Sie %p wählen (Verzeichnispfad des aktiven Projektes. Wenn Sie dieses Textfeld nicht sehen können dann klicken Sie auf den "More" Schalter. Sie besitzen auch die Möglichkeit den Befehl zu speichern, durch einen Klick auf das "Add to Toolbox" Auswahlfeld. Um die Toolbox zu sehen, klicke auf View > Tabs > Toolbox, über das Hauptmenü. Damit sollten Sie einen sehr einfachen Weg haben um Ihre XPI zu erstellen, indem Sie nur den Erstellungsbefehl Doppelklicken.

+

Wir können es sogar noch besser machen. Wenn Sie einmal Ihren Code testen und debuggen, werden Sie feststellen, dass das ständige erstellen und installieren einer XPI sehr ermüdend sein kann. Das ist der Gründ warum wir "make install" eingeführt haben. Dies funktioniert nur wenn die Erweiterung bereits in einem Firefoxprofil installiert ist. Wie in den vorgestellten Projekt, benötigen Sie die Add-on-ID und die gesetzte Profillokation die in der Makefile-Datei. Wir nutzen diese Informationen um den Installationspfad  von der Erweiterung  und überschreiben die installierten Dateien. Wenn Firefox geöffnet ist können Sie den "make install"-Befehl ausführen, Sie müssen Firefox neustarten um die Änderungen zu sehen. Es ist immernoch besser als die XPI andauernd neu zu installieren.

+

Möglicherweise möchten Sie die Profillokation in Ihrem Makefile-Datei ändern. . Um die Profilloaktion auf den richtigen Wert zu setzen, sollten Sie den Artikel support article on profiles auf der Mozilla Support Seite lesen. Auch werden wir später tiefer in dieses Thema eintauchen.

+

Um "make install" auf nicht WIndowssystemen einzusetzen, benötigen Sie einen extra Schritt. Der Installationsprozess benötigt eine Umgebungsvariable mit dem Namen OSTYPE, welche nicht exportiert wird. Lange Geschichte kurzer Sinn, über Kommandozeile müssen Sie folgendes ausführen:

+
+
+ 
export OSTYPE; make install
+
+
+

Und in Komodo sollten Sie fogenden Befehl eingeben:

+
+
+ 
bash -c "export OSTYPE; make install"
+
+
+

Der export-Befehl wird nicht korrekt funktionieren wenn Sie nicht "bach-c" verwenden.

+
+ The file Makefile specifies which profile folder the add-on will be reinstalled to. This is set in the profile_dir variable (set to "xulschool-dev" in this case). When creating a development profile for your add-on, make sure you choose an easy name for the profile folder, and set it in your Makefile in order to take advantage of the install command.
+

Building IDL files

+

Einige Erweiterungen setzen die Entwicklung von XPCOM-Komponeten voraus um gewisse fortgeschritten Funktionen hinzuzufügen. Es gibt eine Lektion die für XPCOM in diesem Tutorial vorgesehen ist, aber wie gehen kaum auf den Einflussdie es auf die Entwicklung von Erweiterungen hat ein. Sie können diesen Teil überspringen und es als Refernenz zu nutzen wenn Sie XPCOM in Ihrem Projekt benötigen.

+

XPCOM Schnittstellen werden mit IDL-Dateien definiert. Das sind Textdateien die Attribute definieren und Methoden in einem oder mehren Schnittstellen. Diese IDL-Dateien werden in Binarydateien kompiliert und werden in die Erweiterung als XPT-Dateien eingebunden.

+

Um eine IDL-Dateizu XPT zu komplieren, benötigen Sie ein Kommandozeilen Tool, xpidl. Dieses Tool ist im Mozilla Gecko SDK enthalen. Wenn Sie IDL`s kompilieren möchten, gehen Sie zur SDK-Seite und laden Sie eine kompilierte Version für Ihr System herunter. Beachte auch mögliche Anforderungen. Wenn Ihr System nicht bei den unterstützen Systemen aufgelistet ist, müssen Sie das SDK selbständig aus dem Mozilla Quellcode erstellen. Viel Glück damit.

+

Sie sollten auch Ihre Umgebung so aufbauen das die xpidl.exe (oder nur xpidl in anderen Systemen) dich in dem standardmäßige auführbaren Pfad befindet und fügen Sie auch eine Variable mit der Bennung Gecko_SDK hinzu, die auf Ihren SDK-Build verweist:

+
+
+ 
export GECKO_SDK=/path/to/your/sdk
+
+
+

Ihr Buildsystem sollte dort darauf zugreifen. Um es in Komodo unter UNIX-basierten Systemen einsetzen zu können, fügen wir den Befehl in die .bash_login-Datei im Homeverzeichnis hinzu und wir passen den Befehl folgendermasen an.

+
+
+ 
bash -c ". ~/.bash_login; make"
+
+
+

Ein Beispiel Projekt mit XPCOM-Komponeten ist in der XPCOM-Lektion enthalten. Dort wird auch XPCOM Erstellung mit C++ angesprochen, was sehr viel schwieriger ist.

+

Signing

+

Um zusätzliche Sicherheit für Ihre Nutzer bereitzustellen, können Sie sich entscheiden eine Signature zu Ihrer Erweiterung hinzuzufügen. Die Signatur verfiziert das Sie der Autor dieser Erweiterung sind und das kann nur gemacht werden wenn Sie ein gültiges Zertifikat einer vertrauswürdigen Zertifizierungsstelle besitzen.

+

Der einzige wahrnehmbare Unterschied für den Benutzer ist das der XPI-Installationsdialog mitteilen wird das die Erweiterung von Ihnen erstellt wurde, was den Dialog vertrauswürdiger macht. Es is nicht üblich Erweiterungen zu signieren weil die meisten Anwender der offizellen Add-on-Seite (AMO) vertrauen anstatt sich auf die Erweiterungssignaturen zu verlassen. Auf der anderen Seite, ist es gängie Praxis für große Unternehmen ihre Erweiterungen zu signieren.

+

Sie werden einige libraries herunterladen müssen damit Sie in der Lage sind Ihre Erweiterungen zu signieren. Folgen Sie dieser Anleitung und fügen etwas ähnliches wie das der Makefile-Datei hinzu:

+
+
+ 
# The directory where the signature sources are located.
+signature_dir := signature
+
+# The signing key /certificate file.
+signature_extra_files := $(build_dir)/META-INF/manifest.mf \
+                         $(build_dir)/META-INF/zigbert.sf
+# The signing key /certificate file.
+signature_rsa_file = $(build_dir)/META-INF/zigbert.rsa# The signing key /certificate file.
+signature_files := $(signature_extra_files) \
+                   $(signature_rsa_file)
+
+$(signature_files): $(build_dir) $(xpi_built)
+  @signtool -d $(signature_dir) -k $(cert_name) \
+  -p $(cert_password) $(build_dir)
+
+
+

Behalten Sie im Hinterkopf ds Ihr Passwort sollte nicht in Ihren Makefile-Dateien enthalten sein und Sie müssen sehr vorsichtig mit den Zertifkatsinformationen sein. Idealerweise sollte das von einer Person erledigt werden und nur Kurz vor Abschluss des Releaseprozess erledigt werden. Sie sollten auch einen abweichenden make-Befehl hierfür haben, wie z.B. make signed um die signierten und unsignierten Entwicklungs builds unterscheiden zu können.

+

Firefox profile management

+

Es ist gute Entwicklungspraxis die Testumgebung von allem anderen zu seperieren. Sie wollen bestimmt nicht das unstabilen Erweiterungen Ihr Firefoxprofil zu schädigen und einen Datenverlust zu riskieren. Es ist viel Besser eine weitere Firefox-"Version" für die Tests zu haben. Hierfür gibt es de Firefoxprofile.

+

Sie können in dem Mozillasupport-Artikeln Managing Profiles lernen wie man mehrere Firefoxprofile aufsetzt. Sie können soviele Profile anlegen wie Sie möchten. Sie können diese auch mit mehreren Firefoxinstallationen mischen. Als Beispiel, Sie möchten möglicherweise Ihre Erweiterungen in Firefox 3.5 und Firefox 3.6 oder in unterschiedlichen regionalen Versionen von Firefox testen. Sie können soviele Firefoxversionen installieren wie Sie möchten und die Profile und Versionen mischen.

+

Unter Windows und Linux ist es einfach Verknüpfungen für jedes angeleget Profil zu erstellen, unter der Verwendung der Befehle beschrieben in http://kb.mozillazine.org/Command_line_arguments ..

+

Für Mac OS X Entwickler, gibt es auch eine Möglichkeit "Verknüpfungen" zu erstellen. Sie können dies erledigen, indem Sie eine Automator-Anwendung öffnen, indem Sie Run Shell Script auswählen und anschließend das Profillade-Skript in das Textfeld eingeben:

+
+
+ 
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -p MyProfile > /dev/null &
+
+
+

Sie können "/dev/null" auf einen Dateispeicherort ändern, in dem Fall das Sie eine dump-Ausgabe in Firefox sehen möchten oder ander Erweiterungen. last & prevents hindert Automator daran auf das beenden Ihrer Firefoxsitzung zu warten. Speicher Sie das als eine Anwendung nicht als einen Workflow. Un möglicherweise wollen Sie diese auf Ihrem Desktop oder Dock, für einen einfachen Zugriff.

+

Es sollten auch noch Konfigurationsänderungen in Ihrem Testprofil vorgenommen werden, sodass Sie im falls etwas schief geht detailierte Informationen erhalten. Die Firefox Error Console (Extras > Error Console) zeigt normalerweise JavaScripte Fehler an die auf der Webseite auftretten, aber mit etwas Optimierung können Sie Fehlerinformationen aus Ihrer Erweiterungen erhalten. Lesen hierfür Sie diesen Beitrag über Development preferences.

+

Developer extensions

+

Es gibt ein große Bandbreite an Firefoxerweiterungen die die Web- und Add-on-Entwicklung untersützen. Ein guter Ort um danach zu suchen ist die Mozilla Add-ons Seite auch gibt es hier ein gute Entwicklungserweiterungsliste. Sie sollten sich etwas Zeit nehmen und mit den Webentwicklungstools die in Firefox enthalten sind herumspielen. Einige von diesen können sehr hilfreich für die Add-on-Entwicklung sein und überschneiden sich mit den aufgeführen Add-on`s. in dieser Lektion werden wir ein paar wenige ansprechen die wir als sehr hilfreich empfunden haben.

+

DOM Inspector

+

Der DOM Inspector war früher ein Teil von Firefox als eine Installationsoption, aber seit Firefox 3 ist von Firefox abgetrennt als ein weiteres Add-on Sie können es hinzufügen und entfernen. Es ist ein sehr nützliches Tool für Untersuchungen das Sie in das DOM von HTML und XUL-Dokumenten sehen lässt, genauso wie eingesetzte CSS-Regeln und zugehörige JavaScript Objekte. Introduction to DOM Inspector ist eine gute Einführung um mit der Verwendung zu beginnen.

+

Der DOM Inspector ist besonders hilfreich um heruauszufinden wie Sie ein Fenster überblenden, und wie Sie standard CSS-Style-Regeln ersetzen. Sie können die Namen der beteiligten Dateien sehen, was Ihnen einen guten Startpunkt gibt wenn Sie in die Mozilla source sehen. Sie können sogar Styles, Attribute ändern und JavaScript Code ausführen, obwohl dies nicht vollständig zuverlässig ist.

+

JavaScript Debugger

+

Der Name sagt alles. Der Venkman JavaScript Debugger ist ein größartiger Weg um die Ausführung von JavaScript zu verfolgen.

+

Um Erweiterungen und Browsercod zu debuggen, klicken Sie mit der rechten Maustaste auf die geladene Scriptkonsole und entfernen Sie die Auswahl von Exclude Browser Files. Die Liste der geladenen Skripte wird anwachsen um alle Skripte in Firefox zu beinhalten. Unsere Dateinamenkonventionen erweisen sich hierbei als sehr hilfreich. Sie können Unterbrechngspunkte setzen, aus und in Methoden springen und sogar Profilinformationen aus der JavaScriptausführung erhlaten. Sie können Variablen untersuchen, Überwachungsausdrücke verfolgen, und nach Ermessen JS an jedem Punkt der Ausführung auswerten.

+

Diese Erweiterungen ist seit einiger Zeit nicht mehr gewartet werden, daher ist sie sehr buggy. Es ist besonders unzuverlässig wenn es Code in XPCOM und XBL-Dateien debuggen soll. Dennoch, ist ein wertvolles Tool wenn man versucht herauszufinden warum sich eine bestimmte Funktion ungewünscht verhält.

+

Tamper Data

+

Tamper Data fängt HTTP-Anfragen und ihren -Antworten ab. Dies erlaubt Ihnen diese zu unterbrechen und sogar die Payload-Daten zu ersetzten bevor diese gesendet werden. Es gibt einige ähnliche Erweiterungen, wie z.B. Live HTTP Headers, aber Tamper Data ist das eine das wir am meisten einsetzen. Wir werden mehr über HTTP debugging später erfahren.

+

Firebug

+

Die Firebug Erweiterung enthält fast alle Tools die bisher angesprochen wurden, aber sie ist hauptsächlich auf die Webentwicklung ausgerichtet. Die Chromebug Erweiterung hilft Firebug nützlicher im Bezug auf die Erweiterungsentwicklung, aber sie ist möglicherweise nicht stark genug um alle alle angesprochen Add-ons zu ersetzen.

+

Auf der anderen Seite, bietet Firebug eine sehr benutzerfreundliches integriertes Oberfläche und wirdurch stärker weiterentwickelt als seine Gegenstücke. Es ist definitiv einen Versuch wert.

+

Leak Monitor

+

Memoryleaks sind immer ein großer Kritikpunkt an Firefox gewesen. mozilla hat über die Zeit bewiesen das es die Arbeitsspeicher nutzung ernst nimmt, durch die Verbesserung der Performance an besonders kritischen Bereichen und durch das entfernen aller Memoryleaks.

+

Wie auch immer, Erweiterung können auch die Ursache von Memoryleaks sein. Wenn Sie Ihre Erweiterung in die Mozilla Add-on Seite aufgenommen haben möchten, sollten Sie besser keine Memoryleaks haben. In Using XPCOM in JavaScript sind einige Richtlinien erfastt die Sie befolgen sollten um diese zu vermeiden. Einer der häufigsten Fehler die Entwicklern machen, ist einen JS event listener oder observer zu registrieren und diesen niemals zu entfernen. Die einfache Praxis immer Code für das Entfernen für alles was Sie hinzuzufügen anzufügen macht einen großen Unterschied.

+

Um sicher zugehen das Ihre Erweiterungen keine Leaks beinhaltet, Sie sollten die Leak Monitor Erweiterung verwenden wenn Sie das testen. Testen Sie immer öffnende und schließende Fenster. Gewöhnlicherweise tretten diese Leaks bei diesem Vorgang auf.

+

Exercise

+ +

Jetzt das Sie wissen wie man schnell Ihr Projekt und Test-Änderungen überprüft, werden wir lernen wie man neue UI-Elemente zu Firefox durch Overlays und neuer Fenster hinzufügt.

+

{{ PreviousNext("XUL_School/The_Essentials_of_an_Extension", "XUL_School/Adding_menus_and_submenus") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html b/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html new file mode 100644 index 0000000000..d31a97b230 --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/einleitung/index.html @@ -0,0 +1,44 @@ +--- +title: Einleitung +slug: Archive/Mozilla/XUL/School_tutorial/Einleitung +tags: + - Add On + - Benutzeroberfläche + - Extension + - Gecko + - Mozilla + - XUL + - XULRunner +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School/Introduction +--- +
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+

Willkommen beim XUL School Tutorial!

+

Dieses Tutorial soll der entscheidene Schritt sein, welcher Sie in einen Firefox Extension Developer (Erweiterungsentwickler) verwandelt. Wir haben Jahre an Erfahrung mit XUL und während dieser Zeit alle Probleme kennengelernt, auf die Entwickler stoßen.

+

XUL School wurde erschaffen von Appcoast (ehemals Glaxstar), eine der wenigen Firmen, welche sich der Addon Entwicklung von Firefox verschrieben hat. Ein Team von über einem Dutzend XUL Entwickler entwickelten Glaxstar während dieses Tutorial geschrieben wurde. Sie sammelten jahrelang Erfahrung und diese reflektieren Sie hier.

+

In diesem Tutorial erfahren Sie, wie Sie Firefox-Erweiterungen entwickeln. Sie werden lernen, wie man schnell die häufigsten Aufgaben in der Extension-Entwicklung löst und vergleichen verschiedene Ansätze, sie zu lösen. In den meisten Fällen bieten wir Codebeispiele, die Sie leicht kopieren und an Ihre Bedürfnisse anpassen können, sowie einige funktionierende Beispiele von Erweiterungen. Das Tutorial soll so kurz wie möglich sein. Oft hilft das Zurückgreifen auf die Mozilla-Dokumentation für weitere Informationen. Sie können es als praktischen Reiseführer mit Infos durch die wachsende Welt, die die Mozilla-Plattform ist, nutzen. Die meisten Links in dieser Dokumentation sollten angeklickt und gelesen werden.

+

Wir starten mit einer Einführung in die Hauptkonzepte, falls Sie nicht mit Mozilla und Firefox vertraut sind.

+

Mozilla and Firefox

+

Der Term Mozilla wird benutzt, um folgende Konzepte zu beschreiben: das Mozilla Projekt, die Mozilla Foundation, die Mozilla Corporation und den alten Mozilla browser. Auch Firefox wird manchmal "Mozilla" genannt. Falls Ihnen die Begriffe nicht geläufig sind, ist es von Vorteil, sich etwas Zeit zu nehemen und mehr über Mozilla zu lernen. Dies hilft die Kultur und das Umfeld von Mozilla zu verstehen.

+

Mozilla hat mehrere Produkte und Projekte hervorgebracht. Das bemerkenswerteste ist der Mozilla Firefox Web-Browser. Firefox ist eines der erfolgreichsten Open-Source-Projekte in der Geschichte. Es kombiniert Offenheit, die Einhaltung von Standards und Raffinesse von Open Source mit dem Fokus auf Benutzerfreundlichkeit und leistungsstarke Vielseitigkeit, wie man es in weniger offenen Unternehmen nur selten sieht.
+
+ Version 1.0 von Firefox wurde im November 2004, Version 2.0 im Oktober 2006 und Version 3.0 im Juni 2008 veröffentlicht. Dieses Tutorial wurde geschrieben, nachdem Firefox 3 veröffentlicht wurde, und ist mit der Zeit aktualisiert worden. Obwohl noch für die Erstellung von Erweiterungen in Firefox 3 (und auch Firefox 2) gearbeitet wird, ist es dringend zu empfehlen, dass Sie moderne Firefox-Versionen unterstützen, um Nutzer zu motivieren, mit Sicherheitsupdates auf dem laufenden zu bleiben. Eine Version, die vor mehr als 6 Monaten veröffentlicht wurde, ist wahrscheinlich anfällig für Sicherheitslücken.
+
+ Firefox und andere Mozilla-Anwendungen kann man als zusammengesetzt ansehen aus zwei verschiedenen Teilen: eine Benutzeroberflächen-Schicht, die für jedes Projekt verschieden ist, und eine gemeinsame Plattform, worauf die Benutzeroberflächen-Schicht angesiedelt ist. Die Benutzeroberfläche ist mit der Technologie XUL entwickelt und die Plattform wird als XULRunner bezeichnet.

+

 

+

XUL

+

XUL (ausgesprochen "zool") ist eine von vielen Technologien für die Erstellung von Mozilla-basierten Produkten und wird auch für Erweiterungen verwendet. Sie ist nur ein Teil der Entwicklungslandschaft, aber da sie praktisch exklusiv für Mozilla ist, neigt man dazu, sie zu verwenden, um Mozilla-bezogene Entwicklungen zu identifizieren. Sie lesen manchmal Begriffe wie "XUL-Anwendungen" und "XUL-Erweiterungen", aber nur selten werden sie für Projekte benutzt, die ausschließlich mit XUL gebaut sind. Es bedeutet in der Regel, dass die Projekte mit Mozilla-Technologien gebaut wurden. Auch dieses Projekt, genannt XUL Schule, erstreckt sich über mehrere andere Technologien wie JavaScript, CSS, XBL und XPCOM.

+

XULRunner

+

XULRunner umfasst die Gecko-Rendering-Engine, die Necko Netzwerk-Bibliothek, und einige andere Komponenten, die unter anderem OS-unabhängiges Datei-Management, Zugänglichkeit und Lokalisierung bieten. Es ist eine sehr leistungsfähige Plattform, die ein solch schnelles Wachstum der Entwickler-Community rund um Mozilla und Firefox erlaubt hat.

+

XULRunner ist in binärer Form auf der XULRunner Seite verfügbar und sie ist die Basis für mehrere Projekte, wie zum Beispiel Songbird, Miro und Eudora. Es gibt eine sehr umfassende Liste von Anwendungen in der XULRunner Hall of Fame.

+

Gecko

+

Die Gecko-Engine ist der Teil von Firefox, der verwendet wird, um Web-Seiten und eine eigene Benutzeroberfläche zu gestalten. Sie erkennen den Grad der Kompatibilität von Web-Standards in Gecko-basierten Browsern, indem Sie sich ihren User Agent String ansehen, der die Gecko-Version enthalten sollte. Gecko-Versionen sind etwas unabhängig von Firefox-Versionen. Sie können eine Zuordnung von Firefox-Versionen und Gecko-Versionen auf der Gecko-Seite sehen. Der User Agent String für Firefox zum Zeitpunkt des Schreibens dieses Artikels (in US-Englisch, Mac OS X) ist:

+

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.7; rv:7.0.1) Gecko/20100101 Firefox/7.0.1

+

Der markierte Abschnitt ist die Gecko-Version: 7.0.1. Sie können den  User-Agent-String lesen und kopieren in jedem beliebiegen Firefox-Fenster. Dazu wählen Sie "Hilfe> Informationen zur Fehlerbehebung" aus dem Hauptmenü.

+

Weiter im Tutorial

+

Mit den grundlegenden Konzepten können wir jetzt in die Entwicklung von Erweiterungen einsteigen. Sie werden sich wahrscheinlich immer noch fragen, was genau ist eine Erweiterung, was kann sie leisten und wie kann man sie erstellen. Nun, dieses ganze Tutorial verfolgt das Ziel, Ihnen das zu erklären.
+
+ Willkommen in der Welt der Extension-Entwicklung. Jetzt wollen wir uns dem zuwenden.

+
+ {{Next("XUL_School/Getting_Started_with_Firefox_Extensions")}}
+

This tutorial translation was kindly donated to Mozilla by Sinn - IT mit Emotion

diff --git a/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html b/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html new file mode 100644 index 0000000000..bfb1d41e7a --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/getting_started_with_firefox_extensions/index.html @@ -0,0 +1,75 @@ +--- +title: Mit Firefox Erweiterungen beginnen +slug: Archive/Mozilla/XUL/School_tutorial/Getting_Started_with_Firefox_Extensions +tags: + - Erweiterungen +translation_of: >- + Archive/Add-ons/Overlay_Extensions/XUL_School/Getting_Started_with_Firefox_Extensions +--- +

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

Was ist eine Firefox Erweiterung?

+
+

Extensions add new functionality to Mozilla applications such as Firefox and Thunderbird. They can add anything from a toolbar button to a completely new feature. They allow the application to be customized to fit the personal needs of each user if they need additional features, while keeping the applications small to download.

+
+

Auszug aus der Erweiterungs-Seite.

+

Wie es das Zitat beschreibt, ist eine Erweiterung eine kleine Anwendung, die etwas Neues zu einer oder mehreren Mozilla-Anwendungen hinzufügt. Dieses Tutorial konzentriert sich auf Erweiterungen für Firefox. Dieselben (oder sehr ähnliche) Prinzipien gelten auch für die Entwicklung von Erweiterungen zu anderen Anwendungen wie Thunderbird, Seamonkey oder Flock.

+

Bitte beachten Sie, dass es es einen Unterschied zwischen der Definiton einer Erweiterung und einem Add-on gibt. Alle Erweiterungen sind Add-ons, aber ein Add-on kann auch eine Theme, ein Plug-in oder ein Sprachpaket sein. Der Inhalt dieses Tutorials behandelt die Entwicklung von Erweiterungen. Themes und Sprachpakete werden in einer sehr ähnlichen Art und Weise entwickelt. Plug-ins sind gänzlich anders und sie werden in diesem Tutorial nicht behandelt. Sie können mehr über Plug-ins und deren Entwicklung auf der Plug-in-Seite erfahren.

+

Firefox bietet eine sehr reiche und flexible Architektur. Diese erlaubt es den Entwicklern von Erweiterungen fortgeschrittene Funktionalitäten hinzuzufügen, sich der Benutzererfahrung anzupassen und Teile des Browsers vollständig zu ersetzen oder zu entfernen.

+

Das Mozilla Add-on Repository (AMO) beinhaltet eine umfassende Anzahl von Erweiterungen mit einer großen Bandbreite an Funktionen: Inhaltsfilterung (AdBlock Plus, NoScript), Interaktion mit Webanwendungen (Delicious Bookmarks, eBay Companion) und Webentwicklung (DOM Inspector, Firebug). Dabei handelt es sich um sehr fortgeschrittene und komplexe Erweiterungen. Sie werden in diesem Tutorial das meiste erlernen, was benötigt wird, um derartige Erweiterungen zu erzeugen (genau genommen basiert Glaxstar auf drei von den hier aufgezählten).

+

Erweiterungen gibt es im Moment in drei verschiedenen Ausprägungen: Add-ons SDK extensions (auch bekannt als Jetpacks), bootstrapped-Erweiterungen und traditionelle Erweiterungen. Wenn Sie gerade beginnen, Add-ons zu entwickeln, bietet das Add-on SDK einen fantastischen Weg, um schnell Erweiterungen zu entwickeln und auf diesen aufzubauen. Dieses Tutorial konzentriert sich auf traditionelle Erweiterungen, welche auf eine andere Art entwickelt werden. Bootstrapped-Erweiterungen sind eine Stufe komplexer, als die traditionellen. Von daher sollten Sie zuerst dieses Tutorial durchgehen, bevor Sie sich diese ansehen.

+

Wir werden dieses Tutorial mit der Analyse einer sehr einfachen Erweiterung beginnen.

+

Die Hallo Welt Erweiterung

+

Unsere Beispielerweiterung und dieses Tutorial im Allgemeinen sind ausgelegt für moderne Versionen des Firefox, aber die meisten von ihnen funktionieren auch auf älteren Versionen.

+

Wir werden nun mit einer einfachen "Hallo Welt"-Erweiterung beginnen. WIr beginnen mit seiner Installation. Dafür klicken Sie auf den folgenden Link.

+

Install Hello World

+

Hierbei wird entweder eine Installation oder ein Datei-Download angestoßen, abhängig von dem Inhaltstyp, der auf dem Webserver abgelegt ist. Der entsprechende Inhaltstyp, um eine Installation zu veranlassen, ist application/x-xpinstall. Im Fall dieses Wiki`s, ist der Inhaltstyp entsprechend gesetzt und ein Installationsfenster sollte erscheinen.

+

Wenn der Inhaltstyp richtig gesetzt ist, werden Sie ordnungsgemäß gewarnt, dass es dieser Seite nicht erlaubt ist Add-ons zu installieren. Hierbei handelt es sich um eine Sicherheitsbarriere, die Seiten daran hindert, Erweiterungen ohne Benutzerzustimmung zu installieren. Dies ist vonnöten, weil bösartige Erweiterungen den gleichen Schaden verursachen können, wie jedes anderes Schadprogramm: Datenklau, das Löschen oder das Austauschen von Daten oder sonstiges unerwünschtes Verhalten. AMO ist die einzige Seite mit einer generellen Erlaubnis. Dies liegt daran, dass die auf AMO veröffentlichten Add-ons einem Überprüfungsprozess unterzogen werden, der Sicherheitsüberprüfungen beinhaltet.

+

Nach dem Herunterladen der Datei, können Sie diese, per Drag and Drop in den Firefox Inhaltsbereich ziehen und die Installation sollte beginnen.

+

Sie werden ein Fenster sehen, welches Ihnen mitteilt, dass sie dabei sind eine Erweiterung zu installieren. In diesem sind einige zusätzliche Informationen enthalten, wie unter anderem der Name des Authors. Sie werden benachrichtigt, dass der Author nicht verfiziert werden kann. Nur Erweiterungen, die mit einem digitalen Zertifkat signiert sind, können die Autorschaft verifizieren. Signierte Erweiterungen sind selten, aber wir werden das Signieren von Erweiterungen später behandeln.

+

Klicken Sie auf die "Jetzt Installieren"-Schaltfläche. Nach der Installation der Erweiterung, werden Sie gefragt ob Sie Firefox neu starten wollen. Installation, Deinstallation, Aktivierung und Deaktiverung von Add-ons erfordern einen Neustart für die Ausführung (außer von NPAPI-Plug-ins, Add-on SDK Erweiterungen und Bootstrapped Erweiterungen). Dies ist ein wichtiger Punkt, den Sie im Hinterkopf behalten sollten, wenn Sie Erweiterungen entwickeln, die andere Erweiterungen oder Themes manipulieren.

+

Sehen Sie nach der Installation in das Firefox Hauptfenster und schauen Sie, ob Sie eine Veränderung feststellen können.

+

Haben Sie es gesehen? Dort ist ein neues Menü im Hauptmenü, bezeichnet "Hello World!".

+

+

Wenn Sie dieses Menü öffnen und den darunter liegenden Menüpunkt, werden Sie eine nette Mitteilung sehen ("nett" im weitesten Sinne). Klicken Sie auf die OK-Schaltfläche um die Mitteilung zu schließen.

+

+

Das ist alles was die Erweiterung macht. Sehen wir uns das jetzt mal genauer an.

+

Erweiterungsinhalte

+

Sie werden vielleicht bemerkt haben, dass die von Ihnen installierte Erweiterungsdatei mit xulschoolhello1.xpi benannt ist. XPI (ausgesprochen "zippy") steht für Cross-Plattform Installer. Diese Installationsdatei funktioniert auf allen Plattformen, die Firefox unterstützen. XPIs sind einfache ZIP-Dateien, aber Firefox erkennt die XPI-Erweiterung und veranlasst den Installationprozess, wenn die XPI-Datei geladen wird.

+

Um in die XPI-Datei zu sehen, müssen Sie diese zuerst herunterladen, ohne sie zu installieren. Anstatt eine Installation durch einen Klick auf einen Link oder eine Schaltfläche auszulösen, führen sie einen Rechtsklick darauf aus und wählen Sie die Ziel speichern unter... Option.

+

Entpacken Sie die XPI-Datei an einen gewünschten Ort. Unter Linux oder Mac OS X führen Sie den folgenden Befehl aus, um die Datei  zu entpacken:

+
unzip xulschoolhello1.xpi -d xulschoolhello1
+
+

Unter Windows können Sie die Dateierweiterung von xpi zu zip ändern oder die Datei direkt öffnen und anschließend mit einem ZIP-Tool entpacken.

+

Sie sollten die folgendene Dateistruktur sehen:

+ +

Das ist eine große Anzahl an Dateien, für etwas so einfaches! In der nächsten Lektion werden wir die Dateien und was sie machen genauer analysieren .

+

{{ PreviousNext("XUL_School/Introduction", "XUL_School/The_Essentials_of_an_Extension") }}

+

This tutorial was kindly donated to Mozilla by Appcoast.

diff --git a/files/de/archive/mozilla/xul/school_tutorial/index.html b/files/de/archive/mozilla/xul/school_tutorial/index.html new file mode 100644 index 0000000000..c11982d447 --- /dev/null +++ b/files/de/archive/mozilla/xul/school_tutorial/index.html @@ -0,0 +1,70 @@ +--- +title: XUL School Tutorial +slug: Archive/Mozilla/XUL/School_tutorial +translation_of: Archive/Add-ons/Overlay_Extensions/XUL_School +--- +

XUL School ist ein umfassendes Tutorial zur Entwicklung von Addons, das sich auf die Erstellung von Firefox-Erweiterungen konzentriert. Wir empfehlen Dir, dieses Dokument mindestens einmal vollständig zu lesen. Obwohl sich Firefox sehr schnell weiterentwickelt, sollte der Inhalt dieses Tutorials aktuell und korrekt sein.

+
+
+ Einführung
+
+ +
+
+ Grundlegende Techniken
+
+ +
+
+ Fortgeschrittene Techniken
+
+ +
+
+ Weiterführende Themen
+
+ +
+
+ Anhänge
+
+ +
+
+

Das XUL School Projekt wurde von Appcoast (ehemals Glaxstar) entwickelt. Das Projekt wird hier unter deren Lizenzen veröffentlicht. Die originalen Inhalte wurden wo nötig angepasst.

+
+

{{ languages( { "ja": "ja/XUL_School", "fr": "fr/Vulgarisation_XUL", "es": "es/Escuela_XUL", "de": "de/XUL_School" } ) }}

+
+

 

diff --git a/files/de/archive/mozilla/xul/separator/index.html b/files/de/archive/mozilla/xul/separator/index.html new file mode 100644 index 0000000000..d01d1d589c --- /dev/null +++ b/files/de/archive/mozilla/xul/separator/index.html @@ -0,0 +1,123 @@ +--- +title: separator +slug: Archive/Mozilla/XUL/separator +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/separator +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Erstellt eine trennende Lücke zwischen Elementen. Dieser Typ ist dazu gedacht unterschiedliche Teile eines Dialogs aufzuteilen. Es wird kein sichtbarer Trennbalken dargestellt, aber ein kleiner Leerraum frei gelassen. Die Funktionsweise ist identisch zum spacer Element außer, dass standardmäßig eine kleine Größe eingestellt ist (normalerweise 1.5 em).

+
Attribute
orient
+
+
Styleklassen
groove, groove-thin, thin
+
+

Beispiele

+
<separator class="groove-thin"/>
+
+

Attribute

+
+ + +
+
orient
+
Type: one of the values below
+
Used to specify whether the separator is a horizontal or vertical separator. Note that the values are the reverse of what seems more likely.
+
+
+
horizontal
+
The separator separates vertically placed elements.
+
vertical
+
The separator separates horizontally placed elements.
+
+
+
+ + +
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Styleklassen

+

Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.

+
+
groove
+
A grooved separator.
+
+
groove-thin
+
A thin grooved separator.
+
+
thin
+
A thinner separator, which is usually 0.5 ems.
+
+

Verwandte Themen

+
Elemente
spacer, splitter, menuseparator, toolbarseparator, treeseparator.
+
diff --git a/files/de/archive/mozilla/xul/spacer/index.html b/files/de/archive/mozilla/xul/spacer/index.html new file mode 100644 index 0000000000..f566611098 --- /dev/null +++ b/files/de/archive/mozilla/xul/spacer/index.html @@ -0,0 +1,94 @@ +--- +title: spacer +slug: Archive/Mozilla/XUL/spacer +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/spacer +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Element, das Platz einnimmt, aber nichts anzeigt. Gewöhnlich benutzt, um Freiraum in einem Behälter zu platzieren. Wenn der Platzhalter nicht als flexibel und für ihn keine Größe angegeben ist, nimmt der Platzhalter keinen Raum ein. Ist eine kleine Lücke gewünscht, ist der Einsatz des Elements separator sinnvoller.

+

Weitere Informationen im XUL Tutorial.

+

Beispiele

+
<box>
+  <button label="Links"/>
+  <spacer flex="1"/>
+  <button label="Rechts"/>
+</box>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandt

+
Elemente
separator, splitter
+
diff --git a/files/de/archive/mozilla/xul/splitter/index.html b/files/de/archive/mozilla/xul/splitter/index.html new file mode 100644 index 0000000000..6c89456da3 --- /dev/null +++ b/files/de/archive/mozilla/xul/splitter/index.html @@ -0,0 +1,173 @@ +--- +title: splitter +slug: Archive/Mozilla/XUL/splitter +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/splitter +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Element, das vor oder nach einem Element innerhalb eines Containers auftauchen sollte. Das Ziehen des Trenners ändert die Größe der Geschwisterelemente des Trenners. Platziert man ein 'Griffchen' (grippy) innerhalb eines Trenners, so wird ein Geschwisterelement des Trenners beim Anklicken des 'Griffchens' zugeklappt.

+

Weitere Information sind im XUL Tutorial verfügbar.

+
Attribute
collapse, resizeafter, resizebefore, state, substate
+
+
Styleklassen
tree-splitter
+
+

Beispiele

+

 splitter_arrow.png

+

<splitter tooltiptext="Größe der Suchbox verändern" oncommand="alert('Der Splitter wurde gezogen!')">
+   <vbox id="Beispiel_vbox" />
+</splitter>

+

Attribute

+

+ + +
+
collapse
+
Type: one of the values below
+
Determines which side of the splitter is collapsed when its grippy is clicked. If this attribute is not specified, the splitter will not cause a collapse. You should put a grippy element inside the splitter when it is used for collapsing.
+
+
+
none
+
No collapsing occurs.
+
before
+
When the grippy is clicked, the element immediately before the splitter in the same parent is collapsed so that its width or height is 0.
+
after
+
When the grippy is clicked, the element immediately after the splitter in the same parent is collapsed so that its width or height is 0.
+
both
+
Either the element immediately before the splitter, or the element immediately after the splitter can be collapsed, if the size of that element would fall below the minimum size due to the position of the splitter.
+
+
+
+
+ + +
+
resizeafter
+
Type: one of the values below
+
This attribute indicates which element to the right or below the splitter should be resized when the splitter is repositioned.
+
+
+
closest
+
The element immediately to the right or below the splitter resizes.
+
farthest
+
The element that is the farthest away from the splitter to the right or below the splitter resizes.
+
grow
+
The elements to the right or below the splitter do not change size (unless they are flexible) when the splitter is dragged, but instead the entire container changes size.
+
flex
+
The closest flexible element resizes.
+
+
+
+ + +
+ + +
+
resizebefore
+
Type: one of the values below
+
This attribute indicates which element to the left or above the splitter should be resized when the splitter is repositioned.
+
+
+
closest
+
The element immediately to the left or above the splitter resizes.
+
farthest
+
The element that is the farthest away from the splitter to the left or above the splitter resizes.
+
flex
+
The closest flexible element resizes.
+
+
+
+
+ + +
+
state
+
Type: one of the values below
+
Indicates whether the splitter has collapsed content or not. This attribute will be updated automatically as the splitter is moved, and is generally used in a stylesheet to apply a different appearance for each state.
+
+
+
open
+
The content either before or after the splitter, depending on the value of the collapsed attribute, is currently displayed.
+
collapsed
+
The content either before or after the splitter is collapsed and is not visible.
+
dragging
+
The user is current adjusting the position of the splitter, typically by dragging it with the mouse.
+
+
+
+ + +
+ + +
+
substate
+
Type: one of the values below
+
On splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. Since collapse="both" is a Gecko 1.9+ feature, this will have no effect on earlier versions.
+
+
+
before
+
The element immediately before the splitter is collapsed.
+
after
+
The element immediately after the splitter is collapsed.
+
+
+
+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Styleklassen

+

Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.

+
+
tree-splitter
+
This splitter is intended to be used in tree columns (in-between treecol elements). The splitter will be drawn with no width so that it isn't visible, however, the columns may still be resized.
+
+
	<tree id="tree1" flex="1" height="300" enableColumnDrag="true">
+	  <treecols>
+    	    <treecol id="name" label="Name" flex="1"/>
+	    <splitter class="tree-splitter"/>
+    	    <treecol id="id" label="ID" flex="1"/>
+	    <splitter class="tree-splitter"/>
+    	    <treecol id="date" label="Date" flex="1"/>
+	    <splitter class="tree-splitter"/>
+	  </treecols>
+	  <treechildren/>
+	</tree>
+
+ +

Das Maß, welches die Größe der Box verändert und was während der Größenveränderung passiert nachdem das Limit erreicht wurde, hängt von der festgelegten Höhe (oder Breite) der Box, welche über ein Attribut, über eine CSS Anweisung (min-height [oder min-width]) oder die wirkliche Höhe der Boxinhalte bestimmt werden kann, und von der An- oder Abwesenheit des eines collapse Attributs des Splitters ab.

+

Bei:

+
<vbox></vbox>
+<splitter/>
+<vbox></vbox>
+

...wird sich der Splitter nicht bewegen, da kein collapse Attribute für den Splitter festgeleget wurde, was dazu führt das der Splitter zusammenfällt, sobald er gezogen wird.

+

Bei:

+
<vbox></vbox>
+<splitter/>
+<vbox height="500"><vbox height="100"/></vbox>
+

...kann der Splitter bis auf eine Höhe von 100px der unteren Box gezogen werden, wo er nicht weiter gezogen werden kann (oder zusammenfällt, wenn der Splitter über ein collapse Attribut verfügt).

+

Bei:

+
<vbox></vbox>
+<splitter/>
+<vbox height="500" minheight="200"><vbox height="100"/></vbox>
+

...kann der Splitter bis auf eine Mindesthöhe von 200px gezogen werden, wo er stoppen wird oder zusammenfällt.

+

Bei:

+
<vbox></vbox>
+<splitter>
+<vbox height="500" style="min-height: 50"><vbox height="100"/></vbox>
+

...kann der Splitter bis unter einer Höhe von 100px der unteren Box gezogen werden, wodurch das Kindelement überläuft, wenn die Mindesthöhe erreicht wird. Dort stoppt oder fällt der Splitter zusammen. Das sollte auch mit einem minheight Attribut, das kleiner als die wirkliche Höhe ist, möglich sein. (Jedoch funktioniert der Überlauf tatsächlich wegen Bug 513597  nur beim Festlegen von minheight und minwidth Attributen oder bei einer Angabe von min-height oder min-width über CSS).

+

Verwandte Themen

+

TBD

diff --git a/files/de/archive/mozilla/xul/style/index.html b/files/de/archive/mozilla/xul/style/index.html new file mode 100644 index 0000000000..74732b6e00 --- /dev/null +++ b/files/de/archive/mozilla/xul/style/index.html @@ -0,0 +1,11 @@ +--- +title: Style Klassen +slug: Archive/Mozilla/XUL/Style +tags: + - XUL Referenz + - XUL Style +translation_of: Archive/Mozilla/XUL/Style +--- +

« Startseite XUL Referenz

+ diff --git a/files/de/archive/mozilla/xul/style/treecol-image/index.html b/files/de/archive/mozilla/xul/style/treecol-image/index.html new file mode 100644 index 0000000000..d7be7f7df7 --- /dev/null +++ b/files/de/archive/mozilla/xul/style/treecol-image/index.html @@ -0,0 +1,13 @@ +--- +title: treecol-image +slug: Archive/Mozilla/XUL/Style/treecol-image +tags: + - XUL Referenz + - XUL Style +translation_of: Archive/Mozilla/XUL/Style/treecol-image +--- +
« Startseite XUL Referenz
+
treecol-image
Um ein Bild als Kopf der Baumspalte anzuzeigen, wird diese Klasse benutzt. Das Bild selbst wird über das Attribut src angegeben.
+
+
+
diff --git a/files/de/archive/mozilla/xul/tab/index.html b/files/de/archive/mozilla/xul/tab/index.html new file mode 100644 index 0000000000..6c0f5831d0 --- /dev/null +++ b/files/de/archive/mozilla/xul/tab/index.html @@ -0,0 +1,195 @@ +--- +title: tab +slug: Archive/Mozilla/XUL/tab +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tab +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Steht für einen einzelnen Reiter innerhalb eines tabs-Elements. Der Benutzer kann den Reiter klicken, um die Seite in den Vordergrund zu holen, die zu der tabbox gehört.

+

Weitere Informationen im XUL Tutorial.

+
Attribute
accesskey, afterselected, beforeselected, command, crop, disabled, first-tab, image, label, last-tab, linkedpanel, oncommand, pinned, selected, tabindex, validate, value
+
+
Eigenschaften
accessKey, accessibleType, command, control, crop, disabled, image, label, linkedPanel, selected, tabIndex, value
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+

+ +
accesskey
Typ: character
Dem Attribut wird der Buchstabe zugewiesen, der als Tastenkürzel für das Element dienen soll. Dieser Buchstabe sollte sinnvollerweise innerhalb des Textes des Attributs label des Elements vorkommen.
+
+ +
+ + +
+
afterselected
+
Type: boolean
+
This is set to true if the tab is immediately after the currently selected tab. This is automatically set when needed and you shouldn't adjust it manually. This is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
+
+
+ + +
+
beforeselected
+
Type: boolean
+
This is set to true if the tab is immediately before the currently selected tab. This is set automatically set when needed and you shouldn't adjust it manually. This is primarily useful for themes so that they can adjust the appearance of the area around the selected tab.
+
+
+ +
+
+ crop
+
+ Type: one of the values below
+
+ If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.
+
+
+
+ start
+
+ The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
+
+ end
+
+ The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.
+
+ left
+
+ The text will be cropped on its left side.
+
+ right
+
+ The text will be cropped on its right side.
+
+ center
+
+ The text will be cropped in the middle, showing both the start and end of the text normally.
+
+ none
+
+ The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.
+
+
+
+ Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value none:
+
+ 
menupopup > menuitem, menupopup > menu { max-width: none; }
+
+
+
+
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ + +
+
first-tab
+
Type: boolean
+
This attribute will be set to true for the first tab. This attribute should not be set manually, but is useful in a theme if the first tab should be styled differently.
+
+
+ +
+
image
+
Type: URI
+
The URI of the image to appear on the element. If this attribute is empty or left out, no image appears. The position of the image is determined by the dir and orient attributes.
+
+ + + +
+ +
label
Typ: string
Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.
+
+ +
+ + +
+
last-tab
+
Type: boolean
+
This attribute will be set to true for the last tab. This attribute should not be set manually, but is useful in a theme if the last tab should be styled differently.
+
+
+ + +
+
linkedpanel
+
Type: id
+
The id of the linked tabpanel element that will be displayed when the tab is selected. If this attribute is not used, the tab will be connected to the panel at the corresponding index in the tabpanels element that the tab is in its tabs container. However, if this attribute is used, this behavior is overridden, and the tab will always be linked to a specific panel. This might be used to avoid duplication by linking several tabs to one panel with slight differences to the content adjusted in the select event.
+
+
+ + +
+
oncommand
+
Type: script code
+
This event handler is called when the command is activated. This occurs when a user selects a menu item or presses a keyboard shortcut attached to the command.
+
+ + +
+ +
pinned
Type: boolean
This attribute is set to true if the tab has been pinned (that is, if it's an app tab). The tabbrowser element's pinTab and unpinTab methods handle pinning and unpinning tabs.
+
+
+ + +
+
selected
+
Type: boolean
+
This attribute is set to true if the tab is selected by default.
+
+ + +
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
validate
+
Type: one of the values below
+
This attribute indicates whether to load the image from the cache or not. This would be useful if the images are stored remotely or you plan on swapping the image frequently. The following values are accepted, or leave out the attribute entirely for default handling:
+
+
+
always
+
The image is always checked to see whether it should be reloaded.
+
never
+
The image will be loaded from the cache if possible.
+
+
+
+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Probleme

+

In Versionen vor Gecko 1.9 (Firefox 3.0) ist es nicht möglich, einen Reiter außer Kraft zu setzen. Der Reiter wird zwar "grau" dargestellt, akzeptiert jedoch Ereignisse. Dieses Verhalten wurde in Firefox 3 behoben.

+

Des weiteren führt ein Wiederanzeigen eines Reiters nach dem Verstecken zu einer unvorhersehbaren Anordnung der Reiter. Siehe Bug 307088 und Bug 261826. (Es empfiehlt sich collapsed statt hidden zu verwenden)

+

Verwandte Themen

+
Elemente
tabbox, tabs, tabpanels, tabpanel.
Schnittstellen
nsIAccessibleProvider, nsIDOMXULSelectControlItemElement
+
diff --git a/files/de/archive/mozilla/xul/tabbox/index.html b/files/de/archive/mozilla/xul/tabbox/index.html new file mode 100644 index 0000000000..29c5cf9dab --- /dev/null +++ b/files/de/archive/mozilla/xul/tabbox/index.html @@ -0,0 +1,77 @@ +--- +title: tabbox +slug: Archive/Mozilla/XUL/tabbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tabbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Behälter für die Anzeige von Seiten mit Karteikarten/-reitern. Das Element tabbox sollte zwei Kindelemente enthalten. Als erstes ein tabs Element, welches je Reiter ein tab Element enthält und als zweites ein tabpanels Element, welches den Inhalt der Seiten aufnimmt.

+

Weitere Informationen im XUL Tutorial.

+
Attribute
eventnode, handleCtrlPageUpDown, handleCtrlTab
+
+
Eigenschaften
accessibleType, eventNode, handleCtrlPageUpDown, handleCtrlTab, selectedIndex, selectedPanel, selectedTab, tabs, tabpanels
+
+

Beispiele

+
<tabbox id="myTabList" selectedIndex="2">
+  <tabs>
+    <tab label="Erster Reiter"/>
+    <tab label="Zweiter Reiter"/>
+    <tab label="Weiterer Reiter"/>
+    <tab label="Letzter Reiter"/>
+  </tabs>
+  <tabpanels>
+    <tabpanel><!-- tabpanel Erste Elemente hierher --></tabpanel>
+    <tabpanel><!-- tabpanel Zweite Elemente hierher --></tabpanel>
+    <tabpanel><button label="Klick mich"/></tabpanel>
+    <tabpanel><!-- tabpanel Vierte Elemente hierher --></tabpanel>
+  </tabpanels>
+</tabbox>
+
+

Image:XUL_REF_tabboxes.gif

+

Attribute

+

+ + +
+
eventnode
+
Type: one of the values below
+
Indicates where keyboard navigation events are listened to. If this attribute is not specified, events are listened to from the tabbox. Thus, if this attribute is not used, the tabbox or an element inside it must have the focus for the keyboard navigation to apply.
+
+
+
parent
+
Keyboard navigation is captured at the parent of the tabbox.
+
window
+
Keyboard navigation is captured at the window level. Tab navigation will occur as long as any element in the window is focused.
+
document
+
Keyboard navigation is captured at the document level. Tab navigation will occur as long as any element in the document is focused.
+
+
+
+
+ +
+ + +
+
handleCtrlTab
+
Type: boolean
+
If set to true or omitted, the tabbox will switch to the next tab when the Control and Tab keys are pressed. If the Shift key is also held down, the previous tab will be displayed. If this attribute is set to false, these keys do not navigate between tabs.
+
+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandt

+
Elemente
tabs, tab, tabpanels, tabpanel.
+
diff --git a/files/de/archive/mozilla/xul/tabpanels/index.html b/files/de/archive/mozilla/xul/tabpanels/index.html new file mode 100644 index 0000000000..8c58b9b082 --- /dev/null +++ b/files/de/archive/mozilla/xul/tabpanels/index.html @@ -0,0 +1,100 @@ +--- +title: tabpanels +slug: Archive/Mozilla/XUL/tabpanels +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tabpanels +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Container, der Seiten in Form von tabbox Elementen enthält. Das tabpanels Element sollte in einer tabbox platziert sein, es muss aber nicht unbedingt ein direktes Kindelement sein. Die Kindelemente des tabpanels Elements werden zu Panels des tabbox Elements. In den meisten Fällen würde ein vbox Element benutzt werden, aber es kann jedes Element verwendet werden, wobei die meisten Autoren am Liebsten das tabpanel Element gebrauchen. Wenn auf den ersten Tag geklickt wird, wird dieser angezeigt. Wenn auf den zweiten Tab geklickt wird, wird dieser angezeigt und so weiter. Es sollte die selbe Anzahl an Panels vorhanden sein wie Tabs. Panels sollten niemals versteckt sein, denn das bedeutet, dass das Panel unzugänglich ist.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
selectedIndex
+
+
Eigenschaften
selectedIndex, selectedPanel
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+
+ + +
+
selectedIndex
+
Type: integer
+
Gets and sets the index of the currently selected panel. The first item is at index 0.
+
+
+ + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+

+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
Elemente
tabbox, tabs, tab, tabpanel.
+
diff --git a/files/de/archive/mozilla/xul/tabs/index.html b/files/de/archive/mozilla/xul/tabs/index.html new file mode 100644 index 0000000000..21f0853e04 --- /dev/null +++ b/files/de/archive/mozilla/xul/tabs/index.html @@ -0,0 +1,123 @@ +--- +title: tabs +slug: Archive/Mozilla/XUL/tabs +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/tabs +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Behälter für einzelne Reiter. Ein tabs-Element kann innerhalb einer tabbox benutzt werden und nimmt selbst tab-Elemente auf.

+

Mehr Information im XUL Tutorial.

+
Attribute
closebutton, disableclose, disabled, onclosetab, onnewtab, onselect, setfocus, tabbox, tabindex, tooltiptextnew, value,
+
+
Eigenschaften
accessibleType, disabled, itemCount, selectedIndex, selectedItem, tabIndex, value,
+
+
Methoden
advanceSelectedTab, appendItem, getIndexOfItem, getItemAtIndex, insertItemAt, removeItemAt
+
+

Beispiele

+

(Beispiel benötigt)

+

Attribute

+

+ +
+
+ closebutton Obsolete since Gecko 1.9.2
+
+ Type: boolean
+
+ If this attribute is set to true, the tabs row will have a "new tab" button and "close" button on the ends. This feature is used by the tabbrowser to provide the facilities for adding and closing tabs. You can set an image to the "new tab" and "close" buttons by applying them to the tabs-newbutton and tabs-closebutton classes respectively.
+
+
+ + +
+
disableclose
+
Type: boolean
+
If this attribute is true the close button will be disabled.
+
+
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ + +
+
onclosetab
+
Type: script code
+
This script will be called when the close tab button is clicked.
+
+
+ + +
+
onnewtab
+
Not in Firefox
+
Type: script code
+
This script will be called when the new tab button is clicked.
+
+
+ + +
+
onselect
+
Type: script code
+
This event is sent to the tabs element when this tab is changed.
+
+ + +
+ + +
+
setfocus
+
Type: boolean
+
If true or omitted, the focus will be given to the first element in the corresponding tabpanel when the tabs are navigated via the keyboard. If this attribute is false, the focus does not change during navigation.
+
+ + +
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
tooltiptextnew
+
Not in Firefox
+
Type: string
+
Used to set the text which appears in the tooltip when the user moves the mouse over the new button in the tab row.
+
+
+

Eigenschaften

+

+

Methoden

+ + + + + + +
+

Geerbte Methoden
+element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()

+ +
+

Verwandte Themen

+
Elemente
tabbox, tab, tabpanels, tabpanel.
Schnittstellen
nsIAccessibleProvider, nsIDOMXULSelectControlElement
+
diff --git a/files/de/archive/mozilla/xul/textbox/index.html b/files/de/archive/mozilla/xul/textbox/index.html new file mode 100644 index 0000000000..a96f2673d5 --- /dev/null +++ b/files/de/archive/mozilla/xul/textbox/index.html @@ -0,0 +1,334 @@ +--- +title: textbox +slug: Archive/Mozilla/XUL/Textbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/textbox +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Eingabefeld, in dem der Benutzer einen Text eingeben kann. Die textbox ist ähnlich wie das HTML input Element. Nur eine Textzeile wird im Standardverhalten angezeigt. Das multiline Attribut kann das Feld auch mit mehreren Zeilen ausstatten.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
cols, decimalplaces, disabled, emptytext, hidespinbuttons, increment, label, max, maxlength, min, multiline, newlines, onchange, oninput, placeholder, preference, readonly, rows, searchbutton, size, spellcheck, tabindex, timeout, type, value, wrap, wraparound
+
+
Eigenschaften
accessibleType, clickSelectsAll, decimalPlaces, decimalSymbol, defaultValue, disabled, editor, emptyText, increment, inputField, label, max, maxLength, min, placeholder, readOnly, searchButton, selectionEnd, selectionStart, size, spinButtons, tabIndex, textLength, timeout, type, value, valueNumber, wrapAround
+
+
Methoden
decrease, increase, reset, select, setSelectionRange
+
+
Styleklassen
plain
+
+

Besipiele

+
Image:XUL_ref_textbox.png
+
<vbox>
+<label control="your-name" value="Enter your name:"/>
+<textbox id="your-name" value="John"/>
+</vbox>
+
+

Attribute

+

+ +
cols
Typ: integer
Stellt die Anzahl an Spalten für mehrzeilige Textboxen dar.
+
+ +
+ +
decimalplaces
Typ: integer
Die Anzahl an Dezimalstellen, die angezeigt werden sollen. Der Standardwert ist 0, was bedeutet, dass keine Dezimalstellen angezeigt werden. Der Wert infinity kann dazu verwendet werden, keine Begrenzung der Dezimalstellen bei Zahlen anzuzeigen. Hinweis: Dezimalzahlen werden als Floats gespeichert.
+
+ +
+ +
disabled
Typ: boolean
Kennzeichnet, ob ein Element deaktiviert ist oder nicht. Wenn das Element auf  true gesetzt ist, ist das Element deaktiviert. Deaktivierte Elemente sind gewöhnlich mit einem grauen Text dargestellt. Wenn ein Element deaktiviert ist, wird es auf Anwenderaktionen nicht reagieren, es kann den Fokus nicht erlangen und das command Ereignis wird nicht ausgelöst. Das Element wird allerdings noch auf Mausereignisse antworten. Um das Element zu aktivieren, ist es besser das Attribut zu entfernen als es auf den Wert false zu setzen. Um den Wert dieses Attributs mittels JavaScript zu setzen oder abzurufen, sollte besser die disabled Eigenschaft verwendet werden.
+
+ + +
+ +
emptytext Unerwünscht Gecko 2
Typ: string
Ein String, der in der Textbox angezeigt wird, falls diese keinen Wert besitzt. Dieses Attribut wurde vom placeholder Attribut in Gecko 2 ersetzt. Der alte Name bleibt zur Kompatibilität bestehen, aber Sie sollten Ihren Code aktualisieren.
+
+ +
+ +
hidespinbuttons
Typ: boolean
Falls der Wert auf true gesetzt wird, werden keine Buttons mit Pfeilen angezeigt, um den Wert des Feldes anzupassen. Der Wert kann dann ausschließlich per Tastatur eingegeben werden. Standardmäßig ist der Wert false.
+
+ +
+
+ increment
+
+ Type: integer
+
+ The amount by which the curpos (for scroll bars) or value (for number boxes and scale) attribute changes when the arrows are clicked(or scales are dragged). The default value is 1.
+
+
+ + +
+
label
+
Type: string
+
If present and not empty, this will be exposed to screen readers through the label property.
+
+
+ +
+
+ Type: integer
+
+ The maximum value that the scale or number box may be set to. The default value is 100 for scales and Infinity for number boxes.
+
+ +

 

+
+ + +
+
maxlength
+
Type: integer
+
The maximum number of characters that the textbox allows to be entered.
+
+
+ +
+
+ min
+
+ Type: integer
+
+ The minimum value the control's value may take. The default value is 0.
+
+

 

+
+ + +
+
multiline
+
Type: boolean
+
If true, the textbox displays multiple lines. If the user presses Enter, a new line is started. If false, the textbox only allows entry of one line.
+
+
+ + +
+
newlines
+
Type: one of the values below
+
How the text box handles pastes with newlines in them.
+
Possible values: +
+
pasteintact
+
Paste newlines unchanged
+
pastetofirst
+
Paste text up to the first newline, dropping the rest of the text
+
replacewithcommas
+
Pastes the text with the newlines replaced with commas
+
replacewithspaces
+
Pastes the text with newlines replaced with spaces
+
strip
+
Pastes the text with the newlines removed
+
stripsurroundingwhitespace
+
Pastes the text with newlines and adjacent whitespace removed
+
+
+
+
+ + +
+
onchange
+
Type: script code
+
This event is sent when the value of the textbox is changed. The event is not sent until the focus is moved to another element.
+
+ + +
+ + +
+
oninput
+
Type: script code
+
This event is sent when a user enters text in a textbox. This event is only called when the text displayed would change, thus it is not called when the user presses non-displayable keys.
+
+ + +
+ + +
+
preference
+
Type: id
+
Connects the element to a corresponding preference. This attribute only has any effect when used inside a prefwindow. More information is available in the Preferences System article.
+
+
+ + +
+
readonly
+
Type: boolean
+
If set to true, then the user cannot change the value of the element. However, the value may still be modified by a script.
+
+
+ +
+
+ rows
+
+ Type: integer
+
+ The number of rows to display in the element. If the element contains more than this number of rows, a scrollbar will appear which the user can use to scroll to the other rows. To get the actual number of rows in the element, use the getRowCount method.
+
+
+ + +
+
searchbutton
+
Type: boolean
+
If true, the search field will only fire a command event when the user presses the search button or presses the Enter key. Otherwise, the command event is fired whenever the user modifies the value. This attribute only applies to textboxes with the type search.
+
+
+ + +
+
size
+
Type: integer
+
The number of characters that can be displayed in the textbox.
+
+
+ + +
+
spellcheck
+
Type: boolean
+
If true, spell checking is enabled by default for the text box; if false, spell checking is disabled by default.
+
If not specified, this defaults to false
+
+ +

The HTML

+ +
+

The spellcheck attribute uses values of true or false (you cannot simply add the spellcheck attribute to a given element):

+ +
<!-- spellcheck everything! -->
+<input type="text" spellcheck="true" /><br />
+<textarea spellcheck="true"></textarea>
+<div contenteditable="true" spellcheck="true">I am some content</div>
+
+<!-- spellcheck nothing! -->
+<input type="text" spellcheck="false" /><br />
+<textarea spellcheck="false"></textarea>
+<div contenteditable="true" spellcheck="false">I am some content</div>
+ +

You can use spellcheck on INPUT, TEXTAREA, and contenteditable elements.  Thespellcheck attribute works well paired with the autocomplete, autocapitalize, and autocorrect attributes too!

+ +

Added from David Walsh's article on Spell Check.

+
+
+ + +
+
tabindex
+
Type: integer
+
The tab order of the element. The tab order is the order in which the focus is moved when the user presses the "tab" key. Elements with a higher tabindex are later in the tab sequence.
+
+
+ + +
+
timeout
+
Type: integer
+
For autocomplete textboxes, the number of milliseconds before the textbox starts searching for completions. The default is 50 milliseconds. For search textboxes, the number of milliseconds before the timer fires a command event. The default is 500 milliseconds. For timed textboxes, the number of milliseconds before the timer fires a command event. There is no default. The timer starts after the user types a character. If the user types another character, the timer resets.
+
+
+ + +
+
type
+
Type: one of the values below
+
You can set the type attribute to one of the values below for a more specialized type of textbox. Don't set the type if you wish to use a regular textbox.
+
+
+
autocomplete
+
A textbox that supports autocomplete. For more information about autocomplete textboxes, see the autocomplete documentation (XPFE [Thunderbird/SeaMonkey]) (Firefox)
+
number
+
 A textbox that only allows the user to enter numbers. In addition, arrow buttons appear next to the textbox to let the user step through values. There are several attributes that allow the number textbox to be configured, including decimalplaces, min, max, increment, wraparound, hidespinbuttons, and textbox.value.
+
password
+
A textbox that hides what is typed, used for entering passwords.
+
search
+
 A textbox intended for searching. The command event will fire as the user modifies the value. A listener for the command event should update search results. If the searchbutton attribute is set to true, the command event is only fired if the user presses the search button or presses the Enter key. You may specify grey text to appear when the search box is empty using the emptytext attribute, and a timeout may be set for the command event using the timeout attribute (defaults to 500).
+
timed
+
This textbox will fire a command event after the user types characters and a certain time has passed. The delay is set with the timeout attribute. The command event will fire if the user presses the Enter key. The timed type is deprecated in Gecko 1.9.1 and the search textbox may be used instead.
+
+
+
+ + +
+ + +
+
value
+
Type: string
+
The default value entered in a textbox. The attribute only holds the default value and is never modified when the user enters text. To get the updated value, use the value property. For number boxes, the default is 0 or the minimum value returned by the min property, whichever is higher.
+
+ + +
+ + +
+
wrap
+
Type: string
+
Set this attribute to the value off to disable word wrapping in the textbox. If this attribute is not specified, word wrapping is enabled.
+
+
+ + +
+
wraparound
+
Type: boolean
+
If true, the value of the number box will wrap around when the maximum or minimum value is exceeded. The minimum and maximum values must both not be infinity.
+
+
+

Eigenschaften

+

+ + +
+
placeholder
+
Type: string
+
A string that appears in the textbox when it has no value.
+
+
+

Methoden

+

+

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Styleklassen

+

Folgende Klassen können benutzt werden, um den Stil des Elements zu bestimmen. Statt den Stil des Elements direkt zu ändern, sollten diese Klassen zu Hilfe genommen werden, da sie sich natürlicher in das vom Benutzer gewählte Theme der Benutzeroberfläche einfügen.

+
+
plain
+
This class causes the element to be displayed with no border or margin.
+
+

Hinweise

+

Das maxlength Attribut funktioniert nicht, wenn man im Mehrzeilenmodus ist. Ein Workaround mittels JavaScript und dem onkeypress Eventhandler stellt eine Lösung dar.

+

Das XUL script:

+
<textbox id="pnNote" multiline="true" rows="2" cols="70" onkeypress="return pnCountNoteChars(event);"/>
+
+

Das Javascript:

+
function pnCountNoteChars(evt) {
+    //Erlaube Tasten, die keine Zeichen sind (Entfernen, Backspace etc.)
+    if ((evt.charCode == 0) && (evt.keyCode != 13))
+      return true;
+
+    if(evt.target.value.length < 10) {
+        return true;
+    } else {
+        return false;
+    }
+}
+

Verwandte Themen

+
Schnittstellen
nsIAccessibleProvider, nsIDOMXULTextboxElement
+
diff --git a/files/de/archive/mozilla/xul/treecol/index.html b/files/de/archive/mozilla/xul/treecol/index.html new file mode 100644 index 0000000000..dbfeb1c995 --- /dev/null +++ b/files/de/archive/mozilla/xul/treecol/index.html @@ -0,0 +1,262 @@ +--- +title: treecol +slug: Archive/Mozilla/XUL/treecol +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/treecol +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Eine Spalte eines tree Elementes. Dieses Element zeigt einen Spaltenkopf an und beinhaltet Informationen über Größe und andere Eingenschaften über die Spalte. Außerdem können splitter Elemente zwischen den einzelnen Spalten gesetzt werden, um Veränderungen an der Spaltengröße zu erlauben. Es sollte immer ein id Attribut für ein treecol Element festgelegt werden, um sicher zu gehen, dass die Spaltenpositionierung richtig angewendet wird.

+

Weitere Informationen finden sich im XUL Tutorial.

+
Attribute
crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortActive, sortDirection, src, type, width
+
+
Eigenschaften
accessibleType
+
+
Style Klassen
treecol-image
+
+

Beispiele

+
Image:Xul_tree_col_checked.png
+

Dieses Beispiel zeigt eine Checkbox in der ersten Spalte.

+
<tree flex="1" editable="true">
+
+  <treecols>
+    <treecol label="Active" type="checkbox" editable="true"/>
+    <treecol label="Name" flex="1" />
+  </treecols>
+
+  <treechildren>
+    <treeitem>
+      <treerow>
+      	<treecell value="true"/>
+        <treecell label="Alice"/>
+      </treerow>
+    </treeitem>
+    <treeitem>
+      <treerow>
+        <treecell value="false"/>
+        <treecell label="Bob"/>
+      </treerow>
+    </treeitem>
+  </treechildren>
+
+</tree>
+
+

Um die Checkbox auf einigen Plattformen sichtbar zu machen, müssen die folgenden Angaben zum Stylesheet hinzugefügt werden (siehe treecol.type). Bei Firefox 2.x und 3.x, benutzen alle Betriebssysteme außer Mac OS X diese Angaben bereits als Standard. Um Firefox für Mac OS X mit einzubeziehen, sollten diese Angaben auf jeden Fall notiert werden und ein eigenes Checkbox-Bild verwendet werden. Für SeaMonkey auf Mac OS X ist das Bild chrome://global/skin/checkbox/cbox-check.gif jedoch verfügbar.

+
treechildren::-moz-tree-checkbox {
+  /* nicht angewählte Baumzellen. Dieser Deklaration MUSS vor treechildren::-moz-tree-checkbox(checked) erfolgen, sonst führt es zu keinem Effekt.  */
+  list-style-image: none;
+}
+
+treechildren::-moz-tree-checkbox(checked){
+  /* css für angewählte Zellen. cbox-check.gif ist in Firefox 1, 2, und 3 auf Mac OS X nicht verfügbar, es sollte also eine URL auf ein Bild in der Erweiterung oder woanders festgelegt werden. */
+  list-style-image: url("chrome://global/skin/checkbox/cbox-check.gif");
+}
+
+

Attribute

+

+ +
+
+ crop
+
+ Type: one of the values below
+
+ If the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. An ellipsis will be used in place of the cropped text. If the box direction is reversed, the cropping is reversed.
+
+
+
+ start
+
+ The text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales.
+
+ end
+
+ The text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales.
+
+ left
+
+ The text will be cropped on its left side.
+
+ right
+
+ The text will be cropped on its right side.
+
+ center
+
+ The text will be cropped in the middle, showing both the start and end of the text normally.
+
+ none
+
+ The text will be not be cropped using an ellipsis. However, the text will simply be cut off if it is too large. The side depends on the CSS text alignment.
+
+
+
+ Depending on the platform and theme being used, some elements will have set a maximum width so they will always appear cropped. If you wish to use the value none and the displayed text is larger than this maximum width, you may be able to use the max-width CSS property (or the maxwidth attribute) to override this size. For example, for a menuitem in a menu you can add the following CSS rule when you want to use the value none:
+
+ 
menupopup > menuitem, menupopup > menu { max-width: none; }
+
+
+
+
+ + +
+
cycler
+
Type: boolean
+
If true, then the column is a cycler column. In the case, clicking on a cell in the column will alternate its state between on and off. This is used, for example, in a mail window, for a column that indicates that the message is read or unread with a small mark in the cell. If the cycler attribute is not set, the cell is a regular text cell.
+
+
+ + +
+
dragging
+
Type: boolean
+
This attribute will be set to true if the column is being dragged. This attribute is set automatically; you shouldn't adjust it yourself.
+
+
+ + +
+
editable
+
Type: boolean
+
Allows the contents of cells in the column to be changed, especially useful when type="checkbox". When the user double-clicks an editable cell, a text field appears in which the user can edit the contents of the cell.
+
+ +
+
The tree must also be marked as editable in order for this to work. Individual treecell elements in the column may be marked editable="false" in order to disable editing.
+
+
+ + +
+
fixed
+
Type: boolean
+
If true, the size of the column in the tree cannot be adjusted by the user. Any splitter to either side will resize those columns while keeping the fixed column at a constant size. If false or not specified, the user can adjust the size of the column, typically by dragging the column header with the mouse.
+
+
+ + +
+
hidden
+
Type: boolean
+
If set to true, the element is not displayed. This is similar to setting the CSS display property to 'none'.
+
+ + +
+ + +
+
hideheader
+
Type: boolean
+
Set this to true to indicate that the tree column header should be displayed without any column header styling. If you don't set a label for that column either, the header is not displayed at all.
+
+
+ + +
+
ignoreincolumnpicker
+
Type: boolean
+
If true, the column does not appear in the column picker.
+
+
+ +
label
Typ: string
Die Beschriftung für das Element. Wird das Attribut nicht angegeben, so erscheint auch kein Beschriftungstext.
+
+ +
+ + +
+
primary
+
Type: boolean
+
If set to true, the treecol will have indentation and twisties drawn to the left of it to indicate the hierarchy level of the rows. If no column has the primary attribute set to true, the tree may still contain nested rows, although no indication will be given to the user.  The attribute also controls whether the column picker allows the user to deselect this column.
+
+
+ + +
+
sort
+
Type: URI or XML attribute
+
Set this to a RDF property or XML attribute to have the data in the column sorted based on that property. The property will usually be the same as that of the cell label.
+
+
+ + +
+
sortActive
+
Type: boolean
+
This should be set to true for the column which should be sorted by default.
+
+
+ + +
+
sortDirection
+
Type: one of the values below
+
Set this attribute to set the direction that template-generated content is sorted. Use the sortResource attribute to specify the sort key. +
+
ascending
+
The data is sorted in ascending order.
+
descending
+
The data is sorted in descending order.
+
natural
+
The data is sorted in natural order, which means the order that it is stored in.
+
+
+
+
+ +
src
Typ: Bild-URL
Um für das treecol Element ein Bild für den Kopf, statt eines label Attribut zu benutzen, kann dieses Attribut gesetzt werden. Im Kopf können nicht gleichzeitig Bild und Beschriftung angezeigt werden. Die URL eines Bildes, das als Spaltenkopf des Baums angezeigt wird, kann mit diesem Attribut festgelegt werden. Wird das Attribut nicht angegeben, erscheint kein Bild und es wird stattdessen die Beschriftung angezeigt. Damit das Bild erscheint, muss die Klasse treecol-image für das treecol Element gesetzt werden. Ein label sollte dennoch für die Benutzung im Spaltenwähler angegeben werden, falls ignoreincolumnpicker nicht true ist und hidecolumnpicker für den tree ebenfalls nicht true ist .
+
+ +
+ + +
+
type
+
Type: one of the values below
+
The type of tree column. The default is a text column that displays the content as text.
+
+
+
checkbox
+
The content of the columns are checkboxes.
+
progressmeter
+
The content of the columns are a progress meters. This is used in Mozilla's download manager window.
+
text
+
The content of the columns is text.
+
+
+
+ + +
+ + +
+
width
+
Type: string (representing an integer)
+
The preferred width of the tree column. The value should not include a unit as all values are in pixels. Specifying widths for your columns causes Gecko to allow the tree to be scrolled horizontally if it is wider than the available space.
+
+
+

Eigenschaften

+
+

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Style Klassen

+

Die folgenden Style Klassen können verwendet werden, um das Aussehen des Elementes zu verändern. Diese Klasse sollte verwendet werden, anstatt das Aussehen des Elementes direkt zu verändern, damit es dann besser mit dem, vom Benutzer gewählten, Theme zusammenarbeiten kann.

+
treecol-image
Um ein Bild als Kopf der Baumspalte anzuzeigen, wird diese Klasse benutzt. Das Bild selbst wird über das Attribut src angegeben.
+
+

Verwandte Themen

+
Elemente
tree, treecols, treechildren, treeitem, treerow, treecell und treeseparator.
Schnittstellen
nsIAccessibleProvider
+
diff --git a/files/de/archive/mozilla/xul/vbox/index.html b/files/de/archive/mozilla/xul/vbox/index.html new file mode 100644 index 0000000000..d45736c02a --- /dev/null +++ b/files/de/archive/mozilla/xul/vbox/index.html @@ -0,0 +1,100 @@ +--- +title: vbox +slug: Archive/Mozilla/XUL/vbox +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/vbox +--- +
+ + « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Ein Behälterelement, das eine gewünschte Anzahl von Kindelementen enthalten kann. Gleichwertig zum Element box, mit dem Unterschied, dass die Ausrichtung per Vorgabe vertikal ist.

+

Mehr Information im XUL Tutorial.

+

Beispiel

+
<!-- Zwei Beschriftungen am unteren Rand -->
+<vbox>
+  <spacer flex="1"/>
+  <label value="Eins"/>
+  <label value="Zwei"/>
+</vbox>
+
+

Attribute

+ + + + + + +

Geerbt von XUL-Element
+align, +allowevents, +allownegativeassertions, +class, +coalesceduplicatearcs, +collapsed, +container, +containment, +context, +contextmenu, +datasources, +dir, +empty, +equalsize, +flags, +flex, +height, +hidden, +id, +insertafter, +insertbefore, +left, +maxheight, +maxwidth, +menu, +minheight, +minwidth, +mousethrough, +observes, +ordinal, +orient, +pack, +persist, +popup, +position, +preference-editable, +querytype, +ref, +removeelement, +sortDirection, +sortResource, +sortResource2, +statustext, +style, +template, +tooltip, +tooltiptext, +top, +uri, +wait-cursor, +width

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Verwandte Themen

+
+
+ Elemente
+
+ box, hbox
+
diff --git a/files/de/archive/mozilla/xul/window/index.html b/files/de/archive/mozilla/xul/window/index.html new file mode 100644 index 0000000000..8dfd0cb192 --- /dev/null +++ b/files/de/archive/mozilla/xul/window/index.html @@ -0,0 +1,209 @@ +--- +title: window +slug: Archive/Mozilla/XUL/Window +tags: + - XUL Elemente + - XUL Referenz +translation_of: Archive/Mozilla/XUL/window +--- +
+ « XUL Referenz Startseite [ + Beispiele | + Attribute | + Eigenschaften | + Methoden | + Verwandte Themen ] +
+

Beschreibt die Struktur eines Fensters. Dieses Element ist der Wurzelknoten eines XUL Dokuments. Das Fenster ist standardmäßig eine horizontal ausgerichtete Box und daher können alle box Attribute verwendet werden. Per Voreinstellung liegt um das Fenster ein plattform-spezifischer Rahmen.

+

Um ein Icon für das Fenster festzulegen, muss eine plattform-spezifische Icon-Datei <windowid>.ico und/oder <windowid>.xpm erstellt und in das <mozilla-verzeichnis>/chrome/icons/default/ Verzeichnis platziert oder installiert werden. Die <windowid> ist der Wert des id Attributs des Fensters. Dadurch wird für jedes Fenster ein unterschiedliches Icon ermöglicht.

+

Ohne die CSS Datei unter "chrome://global/skin/" einzubinden, wird das Fenster nicht durch CSS formatiert, unsichtbar und funktioniert nicht einwandfrei, wenn es als Dialog geöffnet wird.

+

Weitere Informationen sind im XUL Tutorial verfügbar.

+
Attribute
accelerated, drawintitlebar, height, hidechrome, id, lightweightthemes, lightweightthemesfooter, screenX, screenY, sizemode, title, width, windowtype
+
+

Beispiele

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<!-- Extremely recommended to keep this css include!! -->
+<window id="rootWnd" title="Register Online!"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <vbox>
+    <hbox>
+      <image src="application_form.png"/>
+      <description>Register Online!</description>
+    </hbox>
+    <groupbox align="start">
+      <caption label="Your Information"/>
+      <radiogroup>
+        <vbox>
+          <hbox>
+            <label control="your-fname" value="Enter first name:"/>
+            <textbox id="your-fname" value="Johan"/>
+          </hbox>
+          <hbox>
+            <label control="your-lname" value="Enter last name:"/>
+            <textbox id="your-lname" value="Hernandez"/>
+          </hbox>
+          <hbox>
+            <button oncommand="alert('save!')">
+              <description>Save</description>
+            </button>
+          </hbox>
+        </vbox>
+      </radiogroup>
+    </groupbox>
+  </vbox>
+</window>
+
+

Attribute

+

+
accelerated
Type: boolean
Set this attribute to true to allow hardware layer managers to accelerate the window.
+
+ +
activetitlebarcolor
Typ: color string
Bestimmt die Hintergrundfarbe der Titelleiste eines Fensters, wenn es aktiv ist (Vordergrund). Außerdem versteckt dies die Trennlinie zwischen Titelleiste und Fensterinhalt. Dies trifft nur auf Mac OS Systeme zu.
+
+ +
+ +
drawintitlebar
Type: boolean
If this attribute is true, the top of the window's content area will begin at the top edge of the title bar, instead of below the title bar. This allows the window to draw in the title bar. This is supported only from window elements, and is ignored on platforms that don't support drawing into the title bar.
+
+
+ + +
+
height
+
Type: string (representing an integer)
+
The preferred height of the element in pixels. The actual displayed height may be different if the element or its contents have a minimum or maximum height. The CSS height property may also be used.
+
+
+ + +
+
hidechrome
+
Type: boolean
+
Set this attribute to true to have the chrome including the titlebar hidden.
+
+
+ + +
+
id
+
Type: unique id
+
A unique identifier so that you can identify the element with. You can use this as a parameter to getElementById() and other DOM functions and to reference the element in style sheets.
+
+ + +
+ + +
+
inactivetitlebarcolor
+
Type: color string
+
Specify background color of the window's titlebar when it is inactive (background). Moreover this hides separator between titlebar and window contents. This affects only on Mac OS X.
+
+
+ +
lightweightthemes
Type: boolean
true if the window supports lightweight themes, otherwise false.
+
+
+ +
lightweightthemesfooter
Type: id
Specifies the ID of an element to which a lightweight theme's footer image will be applied.
+
+
+ + +
+
screenX
+
Type: integer
+
The horizontal position at which the window appears on the screen.
+
+
+ + +
+
screenY
+
Type: integer
+
The vertical position at which the window appears on the screen.
+
+
+ + +
+
sizemode
+
Type: one of the values below
+
The state of the window. It can have one of the following values:
+
+
+
maximized
+
The window is maximized, and occupies the full size of the screen.
+
normal
+
The window appears in a normal state at the desired size.
+
+
+
+ +

This attribute is used to save and restore the state of a window (together with the persist attribute) and for CSS styles (e.g. to hide the resizer grippy on maximized windows).

+ +
Note: When a window is minimized, the sizemode attribute is not updated. This is done so that if a window is closed while minimized, its persisted sizemode attribute wouldn't be minimized.
+ +

Setting this attribute does not change the window state. Use window.maximize(), window.restore(), or window.minimize() to change the window state.

+ +

To get the window state from JavaScript code, use window.windowState. Listen to the sizemodechange event dispatched to the DOM window to get notified when the window state changes.

+ + +
+ + +
+
title
+
Type: string
+
The text to appear in the title bar of the window.
+
+
+ + +
+
width
+
Type: string (representing an integer)
+
The preferred width of the element. The value should not include a unit as all values are in pixels. The actual displayed width may be different if the element or its contents have a minimum or maximum width, or the size is adjusted by the flexibility or alignment of its parent. The CSS width property may also be used.
+
+ + +
+ +
+
+ windowtype
+
+ Type: string
+
+ Set to a string which can be used to identify the type of window. This might be used, for example, to distinguish between a browser window and an editor window. Some of Mozilla's window handling functions use this attribute to group windows of the same type together.
+
+
+

Values for window type as found on MXR: http://mxr.mozilla.org/mozilla-release/search?string=windowtype

+

navigator:browser - Looks like if window has gBrowser it has this window type

+

devtools:scratchpad - Scratchpad windows

+

navigator:view-source - The view source windows

+
+ +

 

+
+

Eigenschaften

+ +

Geerbte Eigenschaften
align, , allowEvents, , boxObject, builder, , , , className, , , , , collapsed, contextMenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxHeight, maxWidth, menu, minHeight, minWidth, , , , , , , observes, ordinal, orient, , pack, , persist, , , , ref, resource, , , , , statusText, style, ,, tooltip, tooltipText, top, width
+

Methoden

+ +

Geerbte Methoden
element.addEventListener(), node.appendChild(), blur, click, node.cloneNode(), node.compareDocumentPosition(), element.dispatchEvent(), doCommand, focus, element.getAttribute(), element.getAttributeNode(), element.getAttributeNodeNS(), element.getAttributeNS(), element.getBoundingClientRect(), element.getClientRects(), getElementsByAttribute, getElementsByAttributeNS, element.getElementsByClassName(), element.getElementsByTagName(), element.getElementsByTagNameNS(), node.getFeature(), node.getUserData(), element.hasAttribute(), element.hasAttributeNS(), nodes.hasAttributes(), nodes.hasChildNodes(), node.insertBefore(), node.isDefaultNamespace(), node.isEqualNode(), node.isSameNode(), node.isSupported(), node.lookupNamespaceURI(), node.lookupPrefix(), node.normalize(), element.querySelector(), element.querySelectorAll(), element.removeAttribute(), element.removeAttributeNode(), element.removeAttributeNS(), node.removeChild(), element.removeEventListener(), node.replaceChild(), element.setAttribute(), element.setAttributeNode(), element.setAttributeNodeNS(), element.setAttributeNS(), node.setUserData()
+

Hinweise

+

Die Fehlermeldung "XML Parsing Error: undefined entity...<window" kann durch eine fehlende oder nicht erreichbare DTD Datei, die in der XUL Datei angegeben wurde, verursacht werden. Ein Dateiname mit einem SYSTEM Schlüsselwort in einer DOCTYPE Deklaration kann unter Umständen auch nicht geladen werden, ohne dass eine solche Fehlermeldung ausgegeben wird. In diesem Fall kann die Fehlermeldung ein nicht definierter Entity Fehler am nächsten XUL Element sein.

+

Verwandte Themen

+
Elemente
prefwindow, dialog, dialogheader
+
+
Fenster in Chrome

Benutzerhinweise

Um das Icon der Fenstertitelleiste zu ändern siehe: Fenster Icons.

Um ein Favicon zur Adressleiste und zum Tab hinzufügen, kann der folgende Codeschnipsel verwendet werden.

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml">
+
+<!-- Icon from chrome -->
+<html:link rel="icon" href="chrome://myExtension/content/path/to/favicon.png"/>
+
+<!-- From a remote site -->
+<html:link rel="icon" href="http://www.mozilla.org/favicon.ico"/>
+
diff --git a/files/de/archive/mozilla/xul/xul_referenz/index.html b/files/de/archive/mozilla/xul/xul_referenz/index.html new file mode 100644 index 0000000000..b92aa1361e --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_referenz/index.html @@ -0,0 +1,15 @@ +--- +title: XUL Referenz +slug: Archive/Mozilla/XUL/XUL_Referenz +tags: + - XUL + - XUL Referenz +translation_of: Archive/Mozilla/XUL/XUL_Reference +--- +

« XUL Referenz «

+

Alphabetische Liste aller XUL Elemente

+
  1. action
  2. arrowscrollbox
  3. assign
  4. bbox
  5. binding
  6. bindings
  7. box
  8. broadcaster
  9. broadcasterset
  10. button
  11. browser
  12. checkbox
  13. caption
  14. colorpicker
  15. column
  16. columns
  17. commandset
  18. command
  19. conditions
  20. content
  21. datepicker
  22. deck
  23. description
  24. dialog
  25. dialogheader
  26. dropmarker
  27. editor
  28. grid
  29. grippy
  30. groupbox
  31. hbox
  32. iframe
  33. image
  34. key
  35. keyset
  36. label
  37. listbox
  38. listcell
  39. listcol
  40. listcols
  41. listhead
  42. listheader
  43. listitem
  44. member
  45. menu
  46. menubar
  47. menuitem
  48. menulist
  49. menupopup
  50. menuseparator
  51. notification
  52. notificationbox
  53. observes
  54. overlay
  55. page
  56. panel
  57. param
  58. popupset
  59. preference
  60. preferences
  61. prefpane
  62. prefwindow
  63. progressmeter
  64. query
  65. queryset
  66. radio
  67. radiogroup
  68. resizer
  69. richlistbox
  70. richlistitem
  71. row
  72. rows
  73. rule
  74. scale
  75. script
  76. scrollbar
  77. scrollbox
  78. scrollcorner
  79. separator
  80. spacer
  81. spinbuttons
  82. splitter
  83. stack
  84. statusbar
  85. statusbarpanel
  86. stringbundle
  87. stringbundleset
  88. tab
  89. tabbrowser (Firefox-only ab Firefox 3/Gecko 1.9)
  90. tabbox
  91. tabpanel
  92. tabpanels
  93. tabs
  94. template
  95. textnode
  96. textbox
  97. textbox (Firefox autocomplete)
  98. textbox (Mozilla autocomplete)
  99. timepicker
  100. titlebar
  101. toolbar
  102. toolbarbutton
  103. toolbargrippy
  104. toolbaritem
  105. toolbarpalette
  106. toolbarseparator
  107. toolbarset
  108. toolbarspacer
  109. toolbarspring
  110. toolbox
  111. tooltip
  112. tree
  113. treecell
  114. treechildren
  115. treecol
  116. treecols
  117. treeitem
  118. treerow
  119. treeseparator
  120. triple
  121. vbox
  122. where
  123. window
  124. wizard
  125. wizardpage
    126. +
+

Kategorische Liste aller XUL Elemente

+

« XUL Referenz «

+

    Fenster

    1. dialog
    2. overlay
    3. page
    4. window
    5. wizard
    6. wizardpage
    7. preference
    8. preferences
    9. prefpane
    10. prefwindow

    Fensterstrukturen

    1. browser
    2. tabbrowser
    3. editor
    4. iframe
    5. titlebar
    6. resizer
    7. statusbar
    8. statusbarpanel
    9. dialogheader
    10. notification
    11. notificationbox

    Menüs und Popups

    1. menubar
    2. menu
    3. menuitem
    4. menuseparator
    5. menupopup
    6. panel
    7. tooltip
    8. popupset

    Toolbars

    1. toolbar
    2. toolbarbutton
    3. toolbargrippy
    4. toolbaritem
    5. toolbarpalette
    6. toolbarseparator
    7. toolbarset
    8. toolbarspacer
    9. toolbarspring
    10. toolbox

    Tabs und Gruppierungen

    1. tabbox
    2. tabs
    3. tab
    4. tabpanels
    5. tabpanel
    6. groupbox
    7. caption
    8. separator
    9. spacer

    Kontrollelemente

    1. button
    2. checkbox
    3. colorpicker
    4. datepicker
    5. menulist
    6. progressmeter
    7. radio
    8. radiogroup
    9. scale
    10. splitter
    11. textbox
    12. textbox (Firefox autocomplete)
    13. textbox (Mozilla autocomplete)
    14. timepicker

    Text und Bilder

    1. description
    2. label
    3. image

    Listen

    1. listbox
    2. listitem
    3. listcell
    4. listcol
    5. listcols
    6. listhead
    7. listheader
    8. richlistbox
    9. richlistitem

    Trees

    1. tree
    2. treecell
    3. treechildren
    4. treecol
    5. treecols
    6. treeitem
    7. treerow
    8. treeseparator

    Layout

    1. box
    2. hbox
    3. vbox
    4. bbox
    5. deck
    6. stack
    7. grid
    8. columns
    9. column
    10. rows
    11. row
    12. scrollbox

    Templates

    1. action
    2. assign
    3. binding
    4. bindings
    5. conditions
    6. content
    7. member
    8. param
    9. query
    10. queryset
    11. rule
    12. template
    13. textnode
    14. triple
    15. where

    Scripting

    1. script
    2. commandset
    3. command
    4. broadcaster
    5. broadcasterset
    6. observes
    7. key
    8. keyset
    9. stringbundle
    10. stringbundleset

    Hilfselemente

    1. arrowscrollbox
    2. dropmarker
    3. grippy
    4. scrollbar
    5. scrollcorner
    6. spinbuttons

    Andere XUL Listen

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html b/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html new file mode 100644 index 0000000000..e742e6f280 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/die_chrome_url/index.html @@ -0,0 +1,39 @@ +--- +title: Die Chrome URL +slug: Archive/Mozilla/XUL/XUL_Tutorial/Die_Chrome_URL +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/The_Chrome_URL +--- +

{{ PreviousNext("XUL_Tutorial/XUL_Struktur", "XUL_Tutorial/Manifest_Dateien") }}

+

Der folgende Abschnitt beschreibt wie man Bezug zu weiteren XUL-Dokumenten und Chrome-Dateien herstellen kann.

+

Die Chrome-URL

+

XUL-Dateien können über eine reguläre HTTP-URL (oder jeder andere Typ einer URL) genau wie HTML-Dateien aufgerufen werden. Pakete, die jedoch in Mozillas chrome-System gespeichert sind, können mit speziellen chrome-URLs aufgerufen werden. Die Pakete, die in Mozilla vorhanden sind, sind bereits installiert und Sie können zudem Ihre eigenen registrieren.

+

Installierte Pakete haben den Vorteil, dass sie über keine Sicherheitsbeschränkungen verfügen, welche für viele Anwendungen von Bedeutung sind. Ein weitere Vorteil gegenüber anderen URL-Typen ist, dass sie automatisch mehrere Themes und Orte handhaben. Eine chrome-URL kann sich auf eine Theme-Datei beziehen, ohne zu wissen, welches Theme überhaupt installiert ist. Da die Dateinamen in allen Themes die gleichen sind, können Sie einfach eine Datei beziehen, die über die chrome-URL angegeben wird. Mozilla bestimmt dann wo die Datei zu finden ist und gibt dann die richtige Datei zurück. Das bedeutet auch, dass es egal ist wo das Paket installiert ist. Die chrome-URLs sind unabhängig davon wo die Dateien tatsächlich liegen. Das vereinfacht es ungemein Anwendungen zu schreiben, die eine Vielzahl von Dateien verwendet und Sie sich keine Gedanken machen brauchen, wo Sie die Dateien speichern.

+

Die grundlegende Schreibweise einer chrome-URL ist die folgende:

+
chrome://<package name>/<part>/<file.xul>
+
+

Der Platzhalter <package name> ist der Paketname, wie z.B. messenger oder editor. Alle Paketnamen sind case-insensitiv, aber Kleinbuchstaben werden bevorzugt. <part> ist entweder 'content', 'skin' oder 'locale', abhängig davon, welchen Teil sie möchten. <file.xul> ist einfach der Dateiname.

+

Beispiel: chrome://messenger/content/messenger.xul

+

Das Beispiel hier bezieht sich auf das Messenger-Fenster. Sie könnten sich auch auf eine Datei beziehen, die Teil eines Skins ist, indem Sie 'content' durch 'skin' ersetzen und den Dateinamen entsprechend ändern. Genauso könnten Sie 'locale' statt 'content' angeben.

+

Wenn Sie eine chrome-URL öffnen, schaut Mozilla durch die Liste der installierten Pakete und versucht eine JAR-Datei oder ein Verzeichnis zu finden, das auf den angeben Paketnamen und <part> zutrifft. Die Zuordnung von chrome-URLs und JAR-Dateien sind in den Manifest-Dateien festgelegt, welche sich im chrome-Verzeichnis befinden. Wenn Sie die messenger.jar-Datei verschieben und die Manifest-Datei entsprechend ändern wird Thunderbird weiterhin funktionieren, denn es ist nicht von einem bestimmten Installationsort abhängig. Indem wir chrome-URLs verwenden lassen wir solche Details Mozilla machen. Auch wenn der Benutzer das verwendete Theme ändert, wird der 'skin'-Teil der chrome-URL in ein anderes Verzeichnis übersetzt und XUL-Dateien und Skripte brauchen nicht geändert zu werden.

+

Hier sind noch ein paar Beispiele. Beachten Sie, dass keine URL ein Theme oder eine Lokalisierung festlegen.

+
chrome://messenger/content/messenger.xul
+chrome://messenger/content/attach.js
+chrome://messenger/skin/icons/folder-inbox.gif
+chrome://messenger/locale/messenger.dtd
+
+

Um auf Unterverzeichnisse zuzugreifen, können Sie diese einfach am Ende der chrome-URL hinzufügen. Die folgenden URLs beziehen sich auf das Lesezeichenfenster, für Mozilla-Suite und Firefox, da der Paketname unterschiedlich ist:

+
chrome://communicator/content/bookma...rksManager.xul (Mozilla)
+chrome://browser/content/bookmarks/b...rksManager.xul (Firefox)
+
+

Sie können chrome-URLs überall verwenden, wo auch normale URLs verwendet werden können. Sie können sie sogar in die Adresszeile des Mozilla Browsers eingeben. Wenn Sie eine der oben genannten URLs eingeben, sollten Sie sehen, dass ein Fenster wie eine Webseite geöffnet wird und so funktioniert wie ein separates Fenster. Einige Dialogboxen funktionieren vielleicht nicht richtig, weil sie eventuelle Argumente erwarten, die ihnen beim Aufrufen nicht übergeben worden sind.

+

Es kommen außerdem auch chrome-URLs ohne Dateinamen vor, zum Beispiel:

+
chrome://browser/content/
+
+

In diesem Fall wurde nur der Paketname und der Teilabschnitt angegeben. Dieser Referenztyp wird automatisch eine passende Datei aus diesem Verzeichnis auswählen. Für content wird eine Datei mit dem selben Namen des Pakets und XUL-Erweiterung ausgewählt. Im obigen Beispiel wird die Datei browser.xul ausgewählt. Für messenger würde messenger.xul ausgewählt werden. Wenn Sie Ihre eigene Anwendung erstellen, möchten Sie vielleicht eine Datei für Ihr Hauptfenster, mit dem selben Namen wie das Paket, erstellen. Dann kann ein Bezug in dieser verkürzten Form hergestellt werden.

+

Bei einem Skin wird die Datei <package name>.css ausgewählt; für eine Lokalisierung wird die Datei <package name>.dtd ausgewählt.

+

Denken Sie daran, dass die chrome-URL sich nicht auf den physikalischen Pfad auf der Festplatte bezieht. Die ersten beiden Stücke der chrome-URL sind der Paketname und der Teilabschnitt (entweder content, skin oder locale).

+

Im nächsten Abschnitt schauen wir uns an, wie wir .manifest-Dateien und Pakete erstellen können.

+

{{ PreviousNext("XUL_Tutorial/XUL_Struktur", "XUL_Tutorial/Manifest_Dateien") }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html b/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html new file mode 100644 index 0000000000..54c31683a0 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/ein_fenster_erzeugen/index.html @@ -0,0 +1,111 @@ +--- +title: Ein Fenster erzeugen +slug: Archive/Mozilla/XUL/XUL_Tutorial/Ein_Fenster_erzeugen +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Creating_a_Window +--- +

{{ PreviousNext("XUL_Tutorial/Manifest_Dateien", "XUL_Tutorial/Buttons_hinzufügen") }}

+ +

Zunächst wollen wir uns mit der Syntax einer XUL-Datei beschäftigen.

+ +

Eine XUL Datei erstellen

+ +

Der Name einer XUL Datei kann frei gewählt werden, es sollte jedoch darauf geachtet werden, dass die Endung .xul verwendet wird. Die einfachste XUL Datei hat folgende Struktur:

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window
+    id="findfile-window"
+    title="Find Files"
+    orient="horizontal"
+    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+<!-- Other elements go here -->
+</window>
+
+ +

Dieses Fenster wird keine Funktion haben, da es keine weitere UI-Elemete enthält. Diese werden im nächsten Abschnitt hinzugefügt. Der Code wird im folgenden Zeile für Zeile erklärt:

+ +
    +
  1. <?xml version="1.0"?>
    + Diese Zeile zeigt, dass dies eine XML Datei ist. Diese Zeile sollte in jeder XUL Datei als erstes stehen.
    2. +
  2. <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
    + Diese Zeile wird gebraucht um festzulegen, welches Style Sheet für diese Datei verwendet wird. Dies ist die Syntax wie XML Dateien Style Sheets importieren. In diesem Fall importieren wir ein Style Sheet welches sich im globalen Teil eines Skins befindet. Wir legen keine spezifische Datei fest, so dass Mozilla selbst entscheidet, welche Datei verwendet werden soll. In diesem Fall wird die Datei global.css verwendet. Diese Datei enthält alle Standard-Deklarationen für jedes XUL Element. Weil XML selbst nicht weiß wie die Elemente dargestellt werden sollten, brauch es diese Datei, welche dies festlegt. Normalerweise wird diese Zeile ebenfalls an den Anfang einer jeden XUL Datei geschrieben. Es können auch andere Style Sheets mit der selben Syntax importiert werden. Das globale Style Sheet wird normalerweise aus dem eigenen Style Sheet importiert.
    3. +
  3. <window
    + Diese Zeile gibt an, dass ein {{ XULElem("window") }} beschrieben wird. Jedes User Interface wird in einer eigenen Datei beschrieben. Dieser Tag ist wie ein HTML Tag welcher ein gesamtes HTML Dokument umfasst, mit dem Unterschied dass hier ein User Interface beschrieben wird. Einige Attribute können im {{ XULElem("window") }} Tag platziert werden, hier sind es vier. In diesem Beispiel wird jedes Attribut in einer eigenen Zeile beschrieben, dies ist jedoch nicht zwingend.
    4. +
  4. id="findfile-window"
    + Das {{ XULAttr("id") }} Attribut wird zur Identifizierung gebraucht, damit später auf das Fenster per Skript zugegriffen werden kann. Im Normalfall sollte ein id Attribut bei allen Elementen vorhanden sein. Der Name kann frei gewählt werden, er sollte jedoch sinnvoll sein.
    5. +
  5. title="Find Files"
    + Das {{ XULAttr("title") }} Attribut beschreibt den Text, welcher in der Titelzeile des Fensters erscheinen soll. In unserem Fall wird es 'Find Files' sein.
    6. +
  6. orient="horizontal"
    + Das {{ XULAttr("orient") }} Attribut beschreibt die Anordnung der Elemente in diesem Fenster. Der Wert horizontal zeigt, dass die Elemente horizontal über dem Fenster verteilt werden. Es kann auch der Wert vertical verwendet werden, welcher meint, dass die Elemente in einer Spalte verteilt werden. Dies ist der Standardwert, das heißt, dass man dieses Attribut weglassen kann, wenn man eine vertikale Ausrichtung möchte.
    7. +
  7. xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> Diese Zeile deklariert den Namensraum für XUL, welcher im Fenster deklariert sein sollte um festzulegen, dass alle Nachfolger XUL sind. Diese URL wird niemals heruntergeladen. Mozilla wird diese URL intern verarbeiten.
    8. +
  8. <!-- Other elements go here -->
    + Ersetze diesen Kommentar Block durch andere Elemente (Buttons, Menüs und andere User Interface Komponenten), welche im Fenster angezeigt werden sollten. Wir werden ein paar von ihnen zu einem späteren Zeitpunkt hinzufügen.
    9. +
  9. </window>
    + Zum Schluss brauchen wir das {{ XULElem("window") }} Tag, um das Ende der Datei anzuzeigen.
    10. +
+ +

Ein Fenster öffnen

+ +

Um ein XUL Fenster zu öffnen gibt es verschiedene Methoden. Wenn Sie sich nur in der Entwicklungsphase befinden, können Sie einfach die URL ("chrome:", "file:" oder weitere) in die Adresszeile des Browserfensters eingeben. Sie können auch einfach auf einen Doppelklick auf die Datei ausführen, wenn XUL Dateien mit Mozilla verknüpft sind. Das XUL Fenster erscheint im Browserfenster als neues Fenster, aber das ist meistens ungenügend während der Entwicklung.

+ +

Der korrekte Weg ist natürlich ein Fenster über JavaScript zu öffnen. Es ist kein neuer Syntax dazu notwendig, denn die window.open() Funktion kann genau wie für HTML Dokumente dazu verwendet werden. Es ist jedoch ein zusätzlicher Parameter "flag" nötig. In diesem Fall muss 'chrome' angeben werden, damit klar ist, dass ein chrome Dokument geöffnet werden soll. Dieses Stück Code wird dafür sorgen, dass ein Fenster ohne Toolbars und Menüs geöffnet wird:

+ +
window.open(url,windowname,flags);
+ +

wobei "flags" das Schlüsselwort "chrome" wie in diesem Beispiel enthält:

+ +
window.open("chrome://navigator/content/navigator.xul", "bmarks", "chrome,width=600,height=300");
+
+ +
+

Wenn Sie Firefox verwenden:

+ +
window.open("chrome://browser/content/places/places.xul", "bmarks", "chrome,width=600,height=300");
+
+ +

Diese Zeile kann auch in der Fehlerkonsole getestet werden. Wählen Sie Extras -> Fehlerkonsole, tippen Sie die Zeile JavaScript ein und drücken Sie auf Evaluieren oder benutzen Sie die Enter-Taste.

+ +
Das findfile.xul Beispiel
+ +

Fangen wir an die Basisdatei für den Dateisuche-Dialog zu schreiben. Erstellen Sie die Datei findfile.xul und packen Sie diese in das content Verzeichnis, welches von der finndfile.manifest Datei festgelegt wurde (haben wir im vorherigen Abschnitt festgelegt). Fügen Sie die XUL Vorlage von oben zu dieser Datei hinzu und speichern Sie diese ab.

+
+ +

Sie können den Kommandozeilenparameter '-chrome' verwenden, um die XUL Datei mit Mozilla zu starten. Wird dies nicht festgelegt, wird das Standardfenster geöffnet (normalerweise das Browserfenster). Wir können zum Beispiel den Dateisuche-Dialog mit einem der folgenden Zeilen öffnen:

+ +
mozilla -chrome chrome://findfile/content/findfile.xul
+
+mozilla -chrome resource:/chrome/findfile/content/findfile.xul
+
+ +

Wenn Sie einen dieser Kommandos in einer Eingabeaufforderung (angenommen Sie verfügen übere eine auf Ihrem System) eingeben, wird der Dateisuche-Dialog standardmäßig geöffnet, anstatt des normalen Mozilla Browserfensters. Da wir allerdings noch keine UI-Elemente in das Fenster gepackt haben, sehen Sie zunächst nichts. Im nächsten Abschnitt werden wir Elemente hinzufügen.

+ +

Um den Effekt dennoch zu beobachten, können Sie mit der folgenden Zeile das Lesezeichenfenster öffnen:

+ +
mozilla -chrome chrome://communicator/content/bookmarks/bookmarksManager.xul
+ +

Wenn Sie Firefox benutzen:

+ +
firefox -chrome chrome://browser/content/places/places.xul
+ +

Das '-chrome' Argument gibt der Datei keine gesonderten Rechte. Stattdessen kann es dadurch als Top-level Fenster in jedem Browser angezeigt werden, ohne Adressleiste oder Menüs. Nur chrome: URLs haben diese zusätzlichen Rechte.

+ +
Die Erweiterungsentwickler Erweiterung enthält einen XUL Editor, der den eingegebenen XUL-Code in Echtzeit wiedergibt!
+ +

Problemlösung

+ + + +
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+ +

Im nächsten Abschnitt werden wir ein paar Buttons zum Fenster hinzufügen.

+ +

{{ PreviousNext("XUL_Tutorial/Manifest_Dateien", "XUL_Tutorial/Buttons_hinzufügen") }}

+ +

{{ languages( { "en": "en/XUL_Tutorial/Creating_a_Window", "fr": "fr/Tutoriel_XUL/Cr\u00e9er_une_fen\u00eatre", "ja": "ja/XUL_Tutorial/Creating_a_Window", "pl": "pl/Kurs_XUL/Tworzenie_okna", "es": "es/Tutorial_de_XUL/Creando_una_ventana" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html b/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html new file mode 100644 index 0000000000..93aa98324a --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/einfuehrung/index.html @@ -0,0 +1,33 @@ +--- +title: Einführung +slug: Archive/Mozilla/XUL/XUL_Tutorial/Einfuehrung +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Introduction +--- +

{{ Next("XUL_Tutorial/XUL_Struktur") }}

+

Dieses Tutorial ist eine Anleitung für das Erlernen von XUL (XML User Interface Language). XUL ist eine plattformübergreifende Sprache, um die Benutzer-Schnittstellen (z.B. GUI) einer Anwendung zu beschreiben.

+

Dieses Tutorial demonstriert die Erstellung eines einfachen "Datei suchen"-Dialogs, in der Art des "Sherlock" auf dem Macintosh oder des "Suchen"-Dialogs von Windows. Bitte beachten Sie, dass nur das Fenster (GUI) erstellt wird. Dieses beinhaltet sehr eingeschränkte Funktionalität. Das tatsächliche Auffinden von Dateien ist nicht implementiert. An den Stellen, wo der "Datei suchen"-Dialog bearbeitet wird, ist am linken Rand eine blaue Linie gemalt. Sie können der Entwicklung des Dialogs einfach folgen, indem Sie die so markierten Stellen lesen.

+

Was ist XUL und warum wurde es entwickelt?

+

XUL (ausgesprochen "zuul" und reimt sich auf "cool") wurde entwickelt, um die Entwicklung des Mozilla-Browsers zu vereinfachen und zu beschleunigen. Es ist eine XML-Sprache und somit gelten alle Eigenschaften von XML auch für XUL.

+

Die meisten Anwendungen benötigen bei ihrer Entwicklung plattform-spezifische Abhängigkeiten und Eigenschaften - die Entwicklung von plattform-unabhängiger Software ist zeitraubend und teuer. In den letzten Jahren wurde eine Vielzahl von plattform-übergreifenden Anwendungen entwickelt. Die Programmiersprache Java hat zum Beispiel die Plattformunabhängigkeit als herausragende Eigenschaft. XUL ist eine Sprache, die speziell für plattform-übergreifende Benutzerschnittstellen (GUIs) entwickelt wurde. Es dauert lange, um eine Anwendung zu entwickeln - selbst für eine Plattform. Die Zeit des Kompilierens und Debuggens kann sich sehr strecken. Mit XUL kann die Benutzerschnittstelle schnell und einfach implementiert und geändert werden.

+

XUL hat alle Vorteile von anderen XML-Sprachen. Es können zum Beispiel XHTML oder andere XML-Sprachen, wie MathML oder SVG eingebunden werden. Zudem ist angezeigter Text in XUL einfach an den Standort des Anwenders anzupassen. Das heißt er kann mit wenig Aufwand in andere Sprachen übersetzt werden.

+

Welche Art von Benutzerschnittstellen können mit XUL erstellt werden?

+

XUL bietet die Möglichkeit die meisten Elemente zu erstellen, die in modernen Benutzeroberflächen vorkommen. Einige dieser Elemente sind:

+ +

Der angezeigte Inhalt kann mit dem Inhalt aus XUL-Dateien oder aus Datenquellen erstellt werden. In Mozilla schließen solche Datenquellen die Mailbox eines Anwenders, seine Lesezeichen und Suchergebnisse ein. Die Inhalte von Menüs, Bäumen und anderen Elementen können mit diesen Daten befüllt werden oder mit Ihren eigenen Daten, die in RDF-Dateien bereitgestellt werden.

+

Es gibt verschieden Arten, um XUL zu nutzen:

+ +

Die ersten drei Arten benötigen alle die Ausführung einer Installation auf dem Computer des Anwenders. Diese Arten haben dadurch keine Sicherheitsbeschränkungen, sodass sie, zum Beispiel, das lokale Dateisystem lesen und schreiben können. Für eine Erweiterung werden die XUL-Dateien und zugehörige Skripte und Bilddateien der Anwendung in einer einzigen Datei zusammengepackt, die vom Anwender heruntergeladen und installiert wird. Mozilla-Anwendungen, wie der Firefox, bieten einen Erweiterungsmanager an, der es erlaubt, Installationen zusammenzustellen, ohne viel komplizierten Code schreiben zu müssen.

+

Es ist auch möglich XUL-Dateien direkt aus dem Dateisystem oder von einer Webseite zu starten. Diese sind aber in ihren Möglichkeiten eingeschränkt und einige Aspekte von XUL können nicht ausgeführt werden. Wenn Sie XUL-Inhalte von einer entfernten Webseite laden möchten, muss der Webserver so eingestellt sein, dass er XUL-Dateien mit dem Content-Type "application/vnd.mozilla.xul+xml" senden kann. XUL-Code wird normalerweise in Dateien mit der Endung ".xul" gespeichert. Sie können XUL-Dateien in Mozilla wie jede andere Datei (z.B. HTML) öffnen, indem Sie die "Öffnen mit..."-Option im Datei-Explorer für eine solche Datei auswählen oder den Ort der Datei direkt in die Adressleiste des Mozilla Browsers eingegeben.

+

Welches Vorwissen brauche ich für dieses Tutorial?

+

Sie sollten eine Vorstellung von HTML und zumindest grundsätzliches Verständnis von XML und CSS haben. Hier sind einige Richtlinien:

+ +

XUL wird in Mozilla-Browsern unterstützt, die auf der Gecko-Engine basieren, z.B. Netscape 6 oder höher und Mozilla Firefox. Trotz diverser Änderungen in der XUL-Syntax, sollten die aktuellen Versionen der Beispiele korrekt ablaufen. Die meisten Beispiele sollten unter Mozilla 1.0 oder höher laufen. XUL ist ziemlich ähnlich in Firefox und anderen Browsern, obwohl es kleine Unterschiede gibt, wie zum Beispiel die Unterstützung für anpassbare Werkzeugleisten.

+

Dieses Tutorial versucht viel von der XUL-Funktionalität abzudecken, aber es können nicht alle Themen behandelt werden. Wenn Sie einmal vertraut mit XUL sind, können Sie die XUL-Referenz benutzen, um mehr über Eigenschaften von bestimmten Elementen herauszufinden.

+

{{ Next("XUL_Tutorial/XUL_Struktur") }}

+

{{ languages( { "en": "en/XUL_Tutorial/Introduction", "es": "es/Tutorial_de_XUL/Introducci\u00f3n", "fr": "fr/Tutoriel_XUL/Introduction", "ja": "ja/XUL_Tutorial/Introduction", "ko": "ko/XUL_Tutorial/Introduction", "pl": "pl/Kurs_XUL/Wprowadzenie", "zh-cn": "cn/XUL_\u6559\u7a0b/\u5f15\u8a00", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL/\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/index.html b/files/de/archive/mozilla/xul/xul_tutorial/index.html new file mode 100644 index 0000000000..5cf8ecb42d --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/index.html @@ -0,0 +1,57 @@ +--- +title: XUL Tutorial +slug: Archive/Mozilla/XUL/XUL_Tutorial +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial +--- +

Dieses Tutorial beschreibt XUL, die »XML User-Interface Language«. Diese Sprache wurde für die Anwendung Mozilla entwickelt und wird verwendet, um die Nutzerschnittstelle (GUI) für die Anwendung zu beschreiben.

+
Einführung
+ +
Einfache Elemente
+ +
Das Box-Modell
+ +
Weitere Layout-Elemente
+ +
Toolbars und Menüs
+ +
Ereignisse und Scripte
+ +
Das DOM (Document Object Model)
+ +
Bäume
+ +
RDF und Vorlagen
+ +
Skins und Locales
+ +
Bindings
+ +
Spezielle Fenster-Typen
+ +
Installation
+ +
+

Dieses XUL-Tutorial wurde ursprünglich von Neil Deakin geschrieben. Er hat die Erlaubnis gegeben, es als Teil des MDC zu nutzen.

+
+
+
Informationen zum Originaldokument
+ +
+

{{ languages( { "zh-cn": "cn/XUL_\u6559\u7a0b", "en": "en/XUL_Tutorial", "es": "es/Tutorial_de_XUL", "fr": "fr/Tutoriel_XUL", "ja": "ja/XUL_Tutorial", "ko": "ko/XUL_Tutorial", "pl": "pl/Kurs_XUL", "ru": "ru/\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e_\u043f\u043e_XUL" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html b/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html new file mode 100644 index 0000000000..cf11ed3b11 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/installations-skripte/index.html @@ -0,0 +1,96 @@ +--- +title: Installations-Skripte +slug: Archive/Mozilla/XUL/XUL_Tutorial/Installations-Skripte +translation_of: Archive/Mozilla/XUL/Tutorial/Install_Scripts +--- +
+

« zurückweiter »

+
+

Dieser Abschnitt beschreibt das Installationsskript.

+

Erstellen eines Installationsskripts

+
+ Hinweis: Für Firefox Erweiterungen, werden install.js Dateien nicht weiter verwendet. Es sollte ein install.rdf stattdessen erstellt werden.
+

In der Regel möchten Sie den Installationsprozess steuern können. Zum Beispiel möchten Sie vielleicht Datei-Versionen überprüfen und nur aktualisierte Dateien installieren oder Sie möchten Fehler in existierenden Dateien beheben. Das Installationsskript ist flexibel genug, um sogar Dateien zu deinstallieren. Aus diesen Gründen sollten Installationen ein Installationsskript an Board haben, um den Installationsprozess zu regeln.

+

Das Installationsskript muss "install.js" genannt werden und muss im Wurzelverzeichnis des Installationsverzeichnisses platziert werden. Das Skript wird JavaScript Code enthalten, welcher eine Reihe von Installationsfunktionen aufruft.

+

In einem HTML Dokument oder einem XUL Dokument ist das "window" Objekt das Wurzelobjekt. Das bedeutet, dass Sie die Methoden des window-Objekts ohne einem Qualifier davor aufrufen können, zum Beipiel kann statt window.open() einfach open() geschrieben werden. In einem Installationsskript gibt es kein Fenster, jedoch ist das globale Objekt das Install Objekt, welches eine Reihe von Funktionen zur Anpassung des Installationsprozess mit sich bringt. Einige der Install-Ojekt Funktionen werden weiter unter beschrieben.

+

Das Installationsskript sollte die folgenden Schritte ausführen:

+
    +
  1. Initialisiere die Installation in dem festgelegt wird, welche Version und Paket installiert werden soll.
    2. +
  2. Benutze die Installationsfunktionen, um zu bestimmen, welche Dateien und Verzeichnisse installiert werden müssen. Sie können außerdem Dateien festlegen, die gelöscht oder verschoben werden sollen.
    3. +
  3. Starte den Installationsprozess der nötigen Dateien.
    4. +
+

Es ist wichtig zu beachten, dass während Schritt zwei, nur angegeben wird, welche Dateien installiert werden sollen und welche weiteren Operationen ausgeführt werden sollen. Es werden keine Dateien bis zum dritten Schritt kopiert. Sie können daher sehr einfach eine Reihe von Dateien festlegen, die installiert werden sollen, stolpern eventuell über einen Fehler und können den Prozess abbrechen, ohne dass das System des Benutzers verändert wird.

+

Die Komponentenregistrierung

+

Mozilla verfügt über eine Registrierungsdatei, welche alle Komponenten enthält, die momentan installiert sind. Komponenten sind Chrome Pakete, Skins und Plugins. Wird eine neue Komponente installiert, wird die Registrierungsdatei aktualisiert. Die Registrierung speichert auch Dateisets und Versionsinformationen über die installierten Komponenten. Daher ist es sehr einfach die Versionen Ihrer Komponente zu prüfen und zu ermitteln, ob die Komponente bereits verfügbar ist und eventuell aktualisiert werden muss.

+

Die Komponentenregistrierung arbeit ähnlich wie die Windows Registrierung. Sie besteht aus der hierarchischen Anordnung von Schlüsseln und Werten. Dabei müssen Sie nicht viel darüber wissen, um XUL Anwendungen zu erstellen, es sei denn Sie wollen eigene XPCOM Komponenten erstellen.

+

Was Sie für eine Installation wissen müssen, ist, dass die Registrierung eine Reihe von Informationen über Ihre Anwendung speichert, zum Beispiel eine Liste der Dateien und Versionen. Die gesamten Informationen werden in einem Schlüssel gespeichert (und in Unter-Schlüsseln), welche Sie im Installationsskript angeben (in Schritt eins oben genannt).

+

Dieser Schlüssel ist wie in Verzeichnissen in der folgenden Form strukturiert:

+
/Autor/Paketname
+
+

Ersetzen Sie das Wort "Author" mit Ihrem Name und "Paketname" mit dem Namen Ihres Pakets, welches Sie installieren möchten. Zum Beispiel:

+
/Xulplanet/Find Files
+
+/Netscape/Personal Security Manager
+
+

Das erste Beispiel werden wir für den Dateisuche-Dialog verwenden. Das zweite Beispiel wird vom Personal Security Manager benutzt.

+

Initialisierung der Installation

+

Das Install Objekt hat eine Funktion, initInstall(), welche zur Initialisierung der Installation gebraucht wird. Es sollte am Anfang des Installationsskript aufgerufen werden. Die Syntax dieser Funktion ist die folgende:

+
initInstall( ''packageName'' , ''regPackage'' , ''version'' );
+

Ein Beispiel

+
initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+ +

Als nächstes müssen wir das Verzeichnis festlegen, wo die Dateien installiert werden sollen. Es gibt zwei Möglichkeiten.

+ +

Die Funktion setPackageFolder() legt ein Installationsverzeichnis fest. Für den Dateisuche-Dialog werden wir die Dateien in das Chrome-Verzeichnis installieren. (Wir könnten sie überall speichern). Die Funktion setPackageFolder() nimmt ein Argument an, das Installationsverzeichnis. Für maximale Portabilität kann kein String-Name für das Verzeichnis festgelegt werden. Stattdessen wird ein Identifier eines bekannten Verzeichnis verwendet und dann werden dort Unterverzeichnisse erstellt. Falls Ihre Anwendung Systembibliotheken installieren muss, brauchen Sie den Pfad dieser Verzeichnisse nicht zu wissen.

+

Die Verzeichnis-Identifiers sind in der XULPlanet Referenz aufgelistet. Für das Chrome-Verzeichnis ist der Identifier 'Chrome'. Die getFolder() Funktion kann verwendet werden, um eine der speziellen Verzeichnisse zu bekommen. Diese Funktion nimmt zwei Argumente, das erste ist der Identifier und das zweite ist ein Unterverzeichnis. Zum Beispiel:

+
findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+

Hier bekommen wir das "findfile" Verzeichnis im Chrome-Ordner und reichen dies an die setPackageFolder() Funktion weiter. Das zweite Argument für getFolder() ist das Unterverzeichnis in dem wir installieren werden, was nicht bedeutet, dass es existieren muss. Dieses Argument kann weggelassen werden, wenn Sie kein Unterverzeichnis benötigen.

+

Installationsdateien festlegen

+

Als nächstes müssen die Dateien festgelegt werden, die installiert werden sollen. Das erfordert die Verwendung der Funktionen addDirectory() und addFile(). Die addDirectory() Funktion teilt dem Instller mit, dass ein Verzeichnis aus dem XPI Archiv (und alle Inhalte darin) in ein bestimmtes Verzeichnis installiert werden soll. Die Funktion addFile() ist ähnlich, aber für eine einzelne Datei.

+

Beide Funktionen addDirectory() und addFile() haben unterschiedliche Formen. Die einfachste Form nimmt nur ein Argument: Das Verzeichnis, welches von der Installation erstellt werden soll.

+
addDirectory ( dir );
+addFile ( dir );
+
+Beispiel:
+
+addDirectory("findfile");
+
+

Das obige Beispiel legt ein Verzeichnis "findfile" für die Installation fest. Diese Funktionen können mehrmals aufgerufen werden, um mehrere Verzeichnisse und Dateien zu installieren.

+

Als nächstes wollen wir die Dateien im Chrome System registrieren, sodass diese mit einer Chrome-URL verwendet werden können. Das kann mit der registerChrome() Funktion erledigt werden. Die Funktion nimmt zwei Argumente an, als erstes den Chrome-Typ, der registriert werden soll (content, skin oder locale). Ein zweites Argument ist das Verzeichnis, welches die contents.rdf Datei enthält. Weil der Dateisuche-Dialog content, eine Skin-Datei und eine locale-Datei enthält, muss registerChrome() dreimal aufgerufen werden.

+
registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+

 DELAYED_CHROME wird verwendet, um anzuzeigen, dass es beim nächsten Mozilla-Start installiert werden soll.

+

Abschluss der Installation

+

Die addDirectory() und addFile() Funktions kopieren keine Dateien. Sie geben nur an, welche Dateien installiert werden sollen. Ebenfalls gibt registerChrome() nur an, dass diese im chrome-System registriert werden sollen. Um den Prozess zu vervollständigen und Dateien zu kopieren, muss die performInstall() Funktion aufgerufen werden. Diese Funktionen erwartet keine Argumente.

+

Das finale Skript zur Installation der "Dateisuche"-Komponente ist unten aufgeführt:

+
+

Datei

+ 
initInstall("Find Files","/Xulplanet/Find Files","0.5.0.0");
+
+findDir = getFolder("Chrome","findfile");
+setPackageFolder(findDir);
+
+addDirectory("findfile");
+
+registerChrome(Install.CONTENT | Install.DELAYED_CHROME, getFolder(findDir, "content"));
+registerChrome(Install.SKIN | Install.DELAYED_CHROME, getFolder(findDir, "skin"));
+registerChrome(Install.LOCALE | Install.DELAYED_CHROME, getFolder(findDir, "locale"));
+
+performInstall();
+
+
+

Als nächstes schauen wir uns zusätzliche Installationsfunktionen an.

+
+

« zurückweiter »

+
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html b/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html new file mode 100644 index 0000000000..7f6f44a00e --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/lokalisierung/index.html @@ -0,0 +1,270 @@ +--- +title: Lokalisierung +slug: Archive/Mozilla/XUL/XUL_Tutorial/Lokalisierung +tags: + - Lokalisierung + - XUL + - XUL_Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Localization +--- +

{{ PreviousNext("XUL_Tutorial/Eine_eigene_Skin_erstellen", "XUL_Tutorial/Property-Dateien") }}

+

XUL und XML stellen Entities als komfortablen Weg bereit, um Lokalisierungen zu ermöglichen.

+

Entities

+

Viele Anwendungen sind so gebaut, dass das Interface so einfach wie möglich in verschiedene Sprachen zu übersetzten ist. Üblicherweise wird eine Tabelle aus Strings für jede Sprache erstellt. Anstelle von den Text direkt in die Applikation zu programmieren, stellt jede Textstelle nur eine Referenz zur Stringtabelle dar. XML stellt Entities zur Verfügung, welche für den gleichen Zweck verwendet werden können.

+

Man sollte mit Entities bereits vertraut sein, wenn man schon Erfahrungen mit HTML sammeln konnte. Der Code &lt; und &gt; sind Beispiele von Entities, welche anstelle von „Größer-als-“ und „Kleiner-als-Zeichen“ im Text verwendet werden können. XML besitzt einen Syntax, welcher dir das deklarieren eigener Entities erlaubt. Du kannst diese so verwenden, dass das Entity durch seinen Wert ersetzt wird, welcher ein Textstring ist. Entities können immer wenn Text auftritt verwendet werden, inklusive den Attributwerten. Das Beispiel unten demonstriert die Verwendung eines Entity in einem Button.

+
<button label="&findLabel;"/>
+
+

Der Text der als Label erscheinen wird, wird den Wert des Entity &findLabel; sein. Eine Datei welche die Entity-Deklaration enthält wird für jede unterstützte Sprache erstellt. Für Englisch wird das &findLabel; Entity wahrscheinlich mit dem Text »Find« deklariert sein.

+

DTD-Dateien

+

Entities sind in Document Type Declaration (DTD) Dateien deklariert. Dateien dieses Typs werden normalerweise verwendet um den Syntax und die Semantik einer bestimmten XML-Datei zu deklarieren, aber es können auch Entities deklariert werden. Im Mozilla Chrome-System sind die DTD Dateien im locales Unterordner zu finden. Normalerweise existiert eine DTD Datei (mit der Endung .dtd) pro XUL-Datei.

+

Wenn man im Chrome-Ordner nachschaut, sollte man ein Archiv für die jeweilige Sprache (de-De.jar ist normalerweise Deutsch) finden. Es ist möglich lokale Dateien in verschiedenen Sprachen, z.B. Deutsch (de-DE) und Englisch (en-US) zu haben. Innerhalb dieser Archive sind die Dateien zu finden, welche den lokalisierten Text für jedes Fenster enthalten. Die Struktur der Archive ist sehr ähnlich derjenigen, die für Skins verwendet wird.

+

Im Innern der Archive würde man die DTD-Dateien platzieren in welchen die Entities deklariert werden sollen. Normalerweise wird für jede XUL-Datei eine DTD-Datei mit dem gleichen Namen erstellt mit allerdings einer .dtd Endung. Daher werden wir für den Dateisuchdialog eine Datei namens findfile.dtd benötigen.

+

Für nicht installierte chrome Dateien kann einfach die DTD-Datei ins selbe Verzeichnis wie die XUL-Datei ablegt werden.

+
Anmerkung: Die DTD-Dateien sollten für nicht ASCII Zeichen als UTF-8 kodiert werden. Deswegen sollten die Dateien im UTF-8 Format gespeichert werden. (ohne BOM). Für mehr Informationen, siehe Mozilla Sprachpakete.
+

Sobald eine DTD-Datei für das XUL erstellt worden ist, muss eine Zeile in die XUL-Datei einfügt werden, welche angibt, dass die DTD-Datei verwendet werden soll. Andernfalls werden Fehler auftreten, weil die Entities nicht gefunden werden. Um dies zu tun, muss die folgende Zeile irgendwo im oberen Bereich der XUL-Datei eingefügt werden:

+
<!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd">
+
+

Diese Zeile legt fest, dass die URL auf eine DTD-Datei verweist. In diesem Fall wurde deklariert, dass die findfile.dtd DTD-Datei verwendet werden soll. Diese Zeile ist typischerweise gerade vor dem window Element platziert.

+

Entities deklarieren

+

Die Entities werden mit einem einfachen Syntax deklariert:

+
<!ENTITY findLabel "Find">
+
+

Dieses Beispiel erstellt ein Entity mit dem Namen findLabel und dem Wert »Find«. Dies bedeutet, dass überall wo der Text „&findLabel;“ in der XUL-Datei auftritt es durch den Text »Find« ersetzt wird. Es sollte beachtet werden, dass die Deklaration kein Slash am Ende besitzt. In der DTD-Datei einer anderen Sprache wird der Text stattdessen in dieser Sprache geschrieben.

+
für Japanisch:
+<!ENTITY findLabel "検索">
+
+

Zum Beispiel der folgende Text:

+
<description value="&findLabel;"/>
+
+

wird übersetzt als:

+
Englische Version:
+<description value="Find"/>
+
+Japanische Version:
+<description value="検索"/>
+
+

Es wird ein Entity für jede Beschriftung und Textstelle vorhanden sein, die dem Interface verwendet wird. Es sollte kein direkt angezeigter Text in den XUL-Dateien existieren.

+

Zusätzlich zu der Verwendung in Beschriftungen, sollten Entities für jeden Wert verwendet werden, welcher in einer anderen Sprache abweichen könnte. Access-Keys und Tastatur-Shortcuts zum Beispiel.

+
 XUL
+ <menuitem label="&undo.label;" accesskey="&undo.key;"/>
+ DTD
+ <!ENTITY undo.label "Undo">
+ <!ENTITY undo.key "u">
+
+

Das Beispiel oben verwendet zwei Entities, eines für die Beschriftung des Menüpunktes und ein zweiter für den Access-Key.

+

 

+
+

Änderung des Dateisuche Beispiels

+

Werfen wir jetzt einen Blick darauf, wie wir das alles zusammenfügen können, indem wir den Dateisuche-Dialog so modifizieren, so dass eine DTD-Datei für alle seine Textstellen verwendet wird. Die gesamte XUL-Datei mit allen Änderungen in Rot ist unterhalb gezeigt.

+
<?xml version="1.0"?>
+
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<?xml-stylesheet href="findfile.css" type="text/css"?>
+
+<!DOCTYPE window SYSTEM "chrome://findfile/locale/findfile.dtd">
+
+<window
+  id="findfile-window"
+  title="&findWindow.title;"
+  persist="screenX screenY width height"
+  orient="horizontal"
+  onload="initSearchList()"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<script src="findfile.js"/>
+
+<popupset>
+   <popup id="editpopup">
+     <menuitem label="Cut" accesskey="&cutCmd.accesskey;"/>
+     <menuitem label="Copy" accesskey="&copyCmd.accesskey;"/>
+     <menuitem label="Paste" accesskey="&pasteCmd.accesskey;" disabled="true"/>
+   </popup>
+</popupset>
+
+<keyset>
+   <key id="cut_cmd" modifiers="accel" key="&cutCmd.commandkey;"/>
+   <key id="copy_cmd" modifiers="accel" key="&copyCmd.commandkey;"/>
+   <key id="paste_cmd" modifiers="accel" key="&pasteCmd.commandkey;"/>
+   <key id="close_cmd" keycode="VK_ESCAPE" oncommand="window.close();"/>
+</keyset>
+
+<vbox flex="1">
+
+ <toolbox>
+
+  <menubar id="findfiles-menubar">
+    <menu id="file-menu" label="&fileMenu.label;"
+        accesskey="&fileMenu.accesskey;">
+      <menupopup id="file-popup">
+        <menuitem label="&openCmd.label;"
+                  accesskey="&openCmd.accesskey;"/>
+        <menuitem label="&saveCmd.label;"
+                  accesskey="&saveCmd.accesskey;"/>
+        <menuseparator/>
+        <menuitem label="&closeCmd.label;"
+                  accesskey="&closeCmd.accesskey;" key="close_cmd" oncommand="window.close();"/>
+      </menupopup>
+    </menu>
+    <menu id="edit-menu" label="&editMenu.label;"
+          accesskey="&editMenu.accesskey;">
+      <menupopup id="edit-popup">
+        <menuitem label="&cutCmd.label;"
+                  accesskey="&cutCmd.accesskey;" key="cut_cmd"/>
+        <menuitem label="&copyCmd.label;"
+                  accesskey="&copyCmd.accesskey;" key="copy_cmd"/>
+        <menuitem label="&pasteCmd.label;"
+                  accesskey="&pasteCmd.accesskey;" key="paste_cmd" disabled="true"/>
+      </menupopup>
+    </menu>
+  </menubar>
+
+  <toolbar id="findfiles-toolbar">
+    <toolbarbutton id="opensearch" label="&openCmdToolbar.label;"/>
+    <toolbarbutton id="savesearch" label="&saveCmdToolbar.label;"/>
+  </toolbar>
+ </toolbox>
+
+ <tabbox>
+  <tabs>
+    <tab label="&searchTab;" selected="true"/>
+    <tab label="&optionsTab;"/>
+  </tabs>
+
+  <tabpanels>
+
+   <tabpanel id="searchpanel" orient="vertical" context="editpopup">
+
+   <description>
+     &findDescription;
+   </description>
+
+   <spacer class="titlespace"/>
+
+   <groupbox orient="horizontal">
+     <caption label="&findCriteria;"/>
+
+     <menulist id="searchtype">
+       <menupopup>
+         <menuitem label="&type.name;"/>
+         <menuitem label="&type.size;"/>
+         <menuitem label="&type.date;"/>
+       </menupopup>
+     </menulist>
+   <spacer class="springspace"/>
+     <menulist id="searchmode">
+       <menupopup>
+         <menuitem label="&mode.is;"/>
+         <menuitem label="&mode.isnot;"/>
+       </menupopup>
+     </menulist>
+   <spacer class="springspace"/>
+
+   <menulist id="find-text" flex="1"
+             editable="true"
+             datasources="file:///mozilla/recents.rdf"
+             ref="http://www.xulplanet.com/rdf/recent/all">
+     <template>
+       <menupopup>
+         <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#Label" uri="rdf:*"/>
+       </menupopup>
+     </template>
+   </menulist>
+
+   </groupbox>
+
+  </tabpanel>
+
+  <tabpanel id="optionspanel" orient="vertical">
+     <checkbox id="casecheck" label="&casesensitive;"/>
+     <checkbox id="wordscheck" label="&matchfilename;"/>
+    </tabpanel>
+
+  </tabpanels>
+ </tabbox>
+
+ <tree id="results" style="display: none;" flex="1">
+   <treecols>
+     <treecol id="name" label="&results.filename;" flex="1"/>
+     <treecol id="location" label="&results.location;" flex="2"/>
+     <treecol id="size" label="&results.size;" flex="1"/>
+   </treecols>
+
+   <treechildren>
+     <treeitem>
+       <treerow>
+         <treecell label="mozilla"/>
+         <treecell label="/usr/local"/>
+         <treecell label="&bytes.before;2520&bytes.after;"/>
+       </treerow>
+     </treeitem>
+   </treechildren>
+ </tree>
+
+ <splitter id="splitbar" resizeafter="grow" style="display: none;"/>
+
+ <spacer class="titlespace"/>
+
+ <hbox>
+   <progressmeter id="progmeter" value="50%" style="display: none;"/>
+   <spacer flex="1"/>
+   <button id="find-button" label="&button.find;"
+           oncommand="doFind()"/>
+   <button id="cancel-button" label="&button.cancel;"
+           oncommand="window.close();"/>
+ </hbox>
+</vbox>
+
+</window>
+
+

Jede Textstelle wurde durch eine Entity ersetzt. Eine DTD-Datei wurde nahe am Anfang eingefügt. Jede Entity welche eingefügt wurde, sollte in der DTD-Datei deklariert sein. Das Fenster wird nicht angezeigt, wenn eine Entity in der XUL-Datei gefunden wird, welche nicht deklariert wurde.

+

Es sollte beachtet werden, dass der Name der Entity nicht wichtig ist. Im Beispiel oben wurden die Wörter der Entities mit Bindestrichen getrennt. Dies ist keine Vorgabe. Die Entity-Namen folgen den selben Konventionen wie der Rest des Mozilla Codes.

+

Es ist vielleicht aufgefallen, dass der Text '2520 bytes' durch zwei Entities ersetzt wurde. Das kommt daher, weil die Struktur in anderen Sprachen variieren kann. Es könnte z.B. nötig sein, dass die Einheit vor der Zahl steht.

+

Die Access-Keys und Tastatur-Shortcuts wurden auch in Entities übersetzt, weil sie in anderen Sprachen abweichen können.

+

Nun die DTD-Datei - findfile.dtd:

+
<!ENTITY findWindow.title "Find Files">
+<!ENTITY fileMenu.label "File">
+<!ENTITY editMenu.label "Edit">
+<!ENTITY fileMenu.accesskey "f">
+<!ENTITY editMenu.accesskey "e">
+<!ENTITY openCmd.label "Open Search...">
+<!ENTITY saveCmd.label "Save Search...">
+<!ENTITY closeCmd.label "Close">
+<!ENTITY openCmd.accesskey "o">
+<!ENTITY saveCmd.accesskey "s">
+<!ENTITY closeCmd.accesskey "c">
+<!ENTITY cutCmd.label "Cut">
+<!ENTITY copyCmd.label "Copy">
+<!ENTITY pasteCmd.label "Paste">
+<!ENTITY cutCmd.accesskey "t">
+<!ENTITY copyCmd.accesskey "c">
+<!ENTITY pasteCmd.accesskey "p">
+<!ENTITY cutCmd.commandkey "X">
+<!ENTITY copyCmd.commandkey "C">
+<!ENTITY pasteCmd.commandkey "V">
+<!ENTITY openCmdToolbar.label "Open">
+<!ENTITY saveCmdToolbar.label "Save">
+<!ENTITY searchTab "Search">
+<!ENTITY optionsTab "Options">
+<!ENTITY findDescription "Enter your search criteria below and select the Find button to begin the search.">
+<!ENTITY findCriteria "Search Criteria">
+<!ENTITY type.name "Name">
+<!ENTITY type.size "Size">
+<!ENTITY type.date "Date Modified">
+<!ENTITY mode.is "Is">
+<!ENTITY mode.isnot "Is Not">
+<!ENTITY casesensitive "Case Sensitive Search">
+<!ENTITY matchfilename "Match Entire Filename">
+<!ENTITY results.filename "Filename">
+<!ENTITY results.location "Location">
+<!ENTITY results.size "Size">
+<!ENTITY bytes.before "">
+<!ENTITY bytes.after "bytes">
+<!ENTITY button.find "Find">
+<!ENTITY button.cancel "Cancel">
+
+

Um den Text in einer neuen Sprache hinzuzufügen, genügt es eine weitere DTD-Datei zu erstellen. Durch die Verwendung des Chrome Systems, um die DTD-Datei einer anderen Sprache hinzuzufügen, kann die selbe XUL-Datei für jede Sprache verwendet werden.

+

Das Dateisuche Beispiel so weit: Quellcode

+
+

Als nächstes werden wir einen Blick auf Property Dateien werfen.

+

{{ PreviousNext("XUL_Tutorial/Eine_eigene_Skin_erstellen", "XUL_Tutorial/Property-Dateien") }}

+

{{ languages( { "en": "en/XUL_Tutorial/Localization", "fr": "fr/Tutoriel_XUL/Localisation", "ja": "ja/XUL_Tutorial/Localization", "pl": "pl/Kurs_XUL/Lokalizacja" } ) }}

diff --git a/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html b/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html new file mode 100644 index 0000000000..756e025aaa --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/positionierung_von_elementen/index.html @@ -0,0 +1,259 @@ +--- +title: Positionierung von Elementen +slug: Archive/Mozilla/XUL/XUL_Tutorial/Positionierung_von_Elementen +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/Element_Positioning +--- +
+

« zurückweiter »

+
+ +

Schauen wir uns die Steuerung von Positionen und Größen von XUL Elementen an.

+ +

Positionierung in Boxen

+ +

Bis jetzt wissen wir, dass Elemente entweder horizontal oder vertikal innerhalb einer Box positioniert werden können. Meistens brauchen wir aber weitere Steuerungsmöglichkeiten zur Position und Größe von Elementen in der Box. Dazu müssen wir uns zunächst anschauen wie eine Box arbeitet.

+ +

Die Position eines Elementes wird vom Layout des Containers bestimmt. Zum Beispiel ist die Position einer Schaltfläche in einer horizontalen Box rechts von der vorherigen Schaltfläche, sofern diese existiert. Die Größe eines Elements wird von zwei Faktoren beeinflusst: Die Größe, die das Element an Größe braucht und die Größe, die Sie festlegen. Die Größe, die das Element braucht, hängt vom dem ab, was sich innerhalb des Elements befindet. Zum Beispiel wird die Breite einer Schaltfläche anhand des Textes, welcher sich darauf befindet, berechnet.

+ +

Ein Element wird generell so groß wie es Inhalt vorschreibt und nicht größer. Einige Elemente verfügen über eine Standardgröße (z.B. Textboxen), welche verwendet wird. Eine horizontale Box mit drei Schaltflächen darin, wird so groß wie die drei Schaltflächen plus einem kleinen zusätzlichen Abstand.

+ +
Image:boxstyle1n.png
+ +

Im Bild wurde den ersten beiden Schaltflächen eine passende Größe vorgeschrieben, um den Text anzuzeigen. Die dritte Schaltfläche ist größer, weil sie mehr Inhalt enthält. Die Breite der umschließenden Box ist die Summe der Breite der drei Schaltflächen plus einem zusätzlichen Abstand zwischen ihnen. Die Höhe der Schaltflächen ist passend zur Textgröße berechnet worden.

+ +

Width und height Attribute

+ +

Sie möchten sicher mehr Einfluss auf die Größe eines Elements in einem Fenster nehmen können. Es gibt eine Reihe von Features, die Ihnen erlauben die Größe eines Elementes festzulegen. Der schnellste Weg ist, einfach die width und height Attribute festzulegen, genauso wie Sie es vielleicht von HTML kennen. Ein Beispiel dazu:

+ +

Beispiel 1: Datei Ansehen

+ +
<button label="OK" width="100" height="40"/>
+
+ +

Es ist jedoch nicht empfohlen, das so zu machen. Es ist passt nicht in einige Themes und ist umständlicher anpassbar. Ein besserer Weg ist, CSS Eigenschaften zu verwenden, welche wie in HTML arbeiten. Die folgenden CSS Eigenschaften können dazu verwendet werden:

+ +
+
width
+
Legt die Breite eines Elementes fest.
+
height
+
Legt die Höhe eines Elementes fest.
+
+ +

Werden beide Eigenschaften festgelegt, wird das Element mit dieser Breite und Höhe erstellt. Wird nur eines der beiden angegeben, wird die andere Eigenschaft nach dem benötigten Platz berechnet. Die Größe sollte als Zahl gefolgt von einer Einheit angegeben werden.

+ +

Flexible Elemente

+ +

Die Größen der Elemente sind ziemlich einfach zu berechnen für nicht-flexible Elemente. Sie folgen einfach der festgelegten Breiten und Höhen und sobald eine Größe nicht festgelegt wurde, wird das Element so groß wie es für den Inhalt erforderlich ist. Für flexible Elemente ist die Berechnung allerdings nicht ganz so einfach.

+ +

Flexible Elemente sind solche, die über ein flex Attribut verfügen und einen Wert größer als 0 haben. Flexible Elemente passen sich an den verfügbaren Freiraum an. Die Standardgröße wird trotzdem genauso berechnet wie für nicht-flexible Elemente. Das folgende Beispiel soll dies verdeutlichen:

+ +

Beispiel 2 : Datei Ansehen

+ +
<window orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+<hbox>
+  <button label="Yes" flex="1"/>
+  <button label="No"/>
+  <button label="I really don't know one way or the other"/>
+</hbox>
+
+</window>
+
+ +

Das Fenster wird zunächst so erscheinen wie im vorherigen Bild. Die ersten beiden Schaltflächen werden auf eine passende Breite und die dritte Schaltfläche auf längere Breite skaliert, weil diese über eine längere Aufschrift verfügt. Die erste Schaltfläche ist flexibel und alle Elemente wurde in eine Box getan. Die Breite dieser Box wird auf die Startgröße aller drei Schaltflächen gesetzt (ca. 430 Pixel in dem Bild).

+ +

Wenn Sie nun das Fenster vergrößern, wird überprüft, ob Elemente flexibel sind, um den entstehenden Freiraum zu füllen, der entstehen würde. Da die erste Schaltfläche das einzig flexible Element ist, sollte es größer werden. Das geschieht in diesem Fall jedoch nicht, da die Box in dem sich die Schaltfläche befindet nicht flexibel ist. Ein unflexibles Element kann niemals seine Größe ändern, wenn der Platz verfügbar ist. Die Schaltfläche kann also nicht größer werden.

+ +

Die Lösung ist, die Box ebenfalls flexibel zu machen. Wird dann das Fenster größer gemacht, ist zusätzlicher Raum verfügbar und die Box wird diesen Raum füllen. Weil die Box größer ist, ist auch mehr Platz innerhalb verfügbar und die flexible Schaltfläche kann diesen Platz einnehmen. Dieser Prozess wird für jede Verschachtelung wiederholt.

+ +

Minimale und maximale Größen festlegen

+ +

Vielleicht möchten Sie, dass ein Element eine bestimmte Größe besitzt, aber dennoch flexibel ist. Es können Größen festgelegt werden, die auch flexible Elemente nicht über- oder unterschreiten sollen. Diese Einstellung erreicht man mit diesen vier Attributen:

+ +
+
minwidth
+
Legt die minimale Breite eines Elements fest.
+
minheight
+
Legt die minimale Höhe eines Elements fest.
+
maxwidth
+
Legt die maximale Breite eines Elements fest.
+
maxheight
+
Legt die maximale Höhe eines Elements fest.
+
+ +

Die Werten werden immer in Pixeln angegeben. Es können auch die zugehörigen CSS Eigenschaften angegeben werden: min-width, min-height, max-width und max-height.

+ +

Diese Eigenschaften sind nur für flexible Elemente sinnvoll. Wird zum Beispiel eine maximale Höhe festgelegt, wird eine Schaltfläche nur bis zu einer bestimmten Größe skaliert. Sie können das Fenster weiterhin vergrößern, die Schaltfläche wird jedoch nicht weiter vergrößert werden. Die Box, in der sich die Schaltfläche befindet wird sich weiterhin anpassen, wenn Sie keine maximale Höhe festgelegt haben.

+ +

Wenn zwei Schaltflächen flexibel sind, werden sich normalerweise beide den freien Platz gleichermaßen teilen. Falls eine Schaltfläche eine maximale Breite hat, wird die zweite Schaltfläche den restlichen Freiraum mit einnehmen.

+ +

Wenn eine Box über eine maximale Breite oder Höhe verfügt, können die darin enthaltenen Kindelemente nicht größer als die festgelegte Größe der Box werden. Wenn eine minimale Breite oder Höhe vorliegt, können die Kindelemente ebenfalls nicht kleiner werden.

+ +
Beispiele zur Festlegung von Breiten und Höhen
+ +
<button label="1" style="width: 100px;"/>
+<button label="2" style="width: 100em; height: 10px;"/>
+<button label="3" flex="1" style="min-width: 50px;"/>
+<button label="4" flex="1" style="min-height: 2ex; max-width: 100px"/>
+<textbox flex="1" style="max-width: 10em;"/>
+<description style="max-width: 50px">This is some boring but simple
+wrapping text.</description>
+
+ +
+
Beispiel 1 
+
Die erste Schaltfläche wird mit einer Breite von 100 Pixeln (px bedeutet Pixel) angezeigt. Die Einheit muss angegeben werden, sonst wird die Breite ignoriert.
+
Beispiel 2 
+
Die zweite Schaltfläche wird mit einer Höhe von 10 Pixeln und einer Breite von 100em (ein em ist die Größe eines Zeichens der aktuellen Schrift) angezeigt.
+
Beispiel 3 
+
Die dritte Schaltfläche ist flexibel, sie wird also auf Basis der Größe Box der angezeigt. Die Schaltfläche wird jedoch niemals kleiner als 50 Pixel breit. Andere flexible Komponenten wie z.B. Spacer werden den verbleibenden Platz einnehmen.
+
Beispiel 4 
+
Die vierte Schaltfläche is flexibel und wird niemals eine Höhe haben, die kleiner als 2 ex ist (ein ex ist normalerweise die Höhe des Buchstaben x der aktuellen Schrift) oder größer als 100 Pixel ist.
+
Beispiel 5 
+
Das Texteingabefeld ist flexibel, wird aber niemals größer als 10em werden. Sie werden vermehrt em verwenden wollen, da Sie Größen für Elemente festlegen, die Text enthalten. Diese Einheit ist hilfreich für Textboxen, da die Schrift geändert werden kann und die Textbox immer eine passende Größe hat, auch wenn der Text mal ganz groß werden sollte.
+
Beispiel 6 
+
Das description Element wird gezwungen eine maximale Breite von 50 Pixeln zu besitzen. Der Text innerhalb wird in eine neue Zeile verschoben, wenn die 50 Pixel erreicht sind.
+
+ +
+
Unser Dateisuche-Dialog
+ +

Fügen wir einige dieser Möglichkeiten zu unserem Dateisuche-Dialog hinzu. Wir werden es so machen, dass die Textbox auf das gesamte Fenster ausgestreckt wird.

+ +
<textbox id="find-text" flex="1" style="min-width: 15em;"/>
+
+ +
Image:boxstyle1.png
+ +

Hier wurde das Texteingabefeld flexibel gemacht. Demnach wird es sich anpassen, wenn der Benutzer die Fenstergröße ändert. Das ist sehr hilfreich, wenn der Benutzer einen langen Text einfügen möchte. Außerdem wurde eine minimale Breite von 15em festgelegt, damit immer zumindest 15 Zeichen zu sehen sind. Verkleinert der Benutzer den Dialog sehr stark, wird das Texteingabefeld nur bis 15em verkleinert. Es wird so gezeichnet werden, als wenn es sich auch außerhalb des Fensters ausbreitet. Beachten Sie, dass das Bild ein Texteingabefeld zeigt, welches auf die maximale Fenstergröße ausgebreitet wurde.

+
+ +

Anordnung in Boxen

+ +

Wenn Sie eine Box mit zwei Kindelementen haben, beide nicht flexibel, die Box ist aber flexibel. Zum Beispiel:

+ +

Beispiel 3: Datei Ansehen

+ +
<box flex="1">
+  <button label="Happy"/>
+  <button label="Sad"/>
+</box>
+
+ +

Wenn Sie nun das Fenster vergrößern, wird die Box auf die Fenstergröße ausgedehnt. Die Schaltflächen sind nicht flexibel, sie werden also nicht ihre Breiten ändern. Das Ergebnis ist zusätzlicher Platz, der auf der rechten Seite der Fensters (innerhalb der Box) erscheint. Sie möchten aber unter Umständen, dass dieser freie Platz auf der linken Seite erscheint, sodass die Schaltflächen auf der rechten Seite des Fensters ausgerichtet werden.

+ +

Sie könnten das lösen, in dem Sie ein spacer Element innerhalb der Box platzieren, aber das wird umständlich, wenn Sie es für eine Vielzahl von Elementen machen müssen. Ein besserer Weg ist, ein zusätzliches Attribut pack dem box Element hinzuzufügen. Dieses Attribut gibt an, wie die Kindelemente innerhalb der Box angeordnet werden sollen. Für horizontal orientierte Boxen wird die horizontale Position der Kindelemente gesteuert. Für vertikal orientierte Boxen wird die die vertikale Position der Kindelemente gesteuert. Es können die folgenden Werte verwendet werden:

+ +
+
start
+
Positioniert Elemente an der linken Seite für horizontale Boxen und an der oberen Seite für vertikale Boxen. Dies ist der Standardwert.
+
center
+
Zentriert Kindelemente in der Box.
+
end
+
Positioniert Elemente an der rechten Seite für horizontale Boxen und an der unteren Seite für vertikale Boxen.
+
+ +

Das pack Attribut wird in der Box festgelegt, die die auszurichteten Elemente enthält, nicht in den Elementen selbst.

+ +

Wir können das vorherige Beispiel ändern, sodass die Elemente wie folgt zentriert werden:

+ +

Beispiel 4: Datei Ansehen

+ +
<box flex="1" pack="center">
+  <button label="Happy"/>
+  <button label="Sad"/>
+</box>
+
+ +

Jetzt, wenn das Fenster verändert wurde, werden die Schaltflächen horizontal zentriert. Vergleichen Sie das Verhalten zum vorherigen Beispiel.

+ +

Box Ausrichtung

+ +

Wenn das Fenster im Happy-Sad Beispiel oben horizontal verändern, wird die Box in der Breite wachsen. Wenn Sie das Fenster vertikal verändern, werden jedoch die Schaltflächen in ihrer Höhe mitwachsen. Das kommt daher weil, die Flexibilität standardmäßig für die vertikale Richtung aktiviert ist.

+ +

Dieses Verhalten kann mit dem align Attribut gesteuert werden. Für horizontale Boxen werden die vertikalen Positionen der kindelemente gesteuert. Für vertikale Boxen werden die horizontalen Positionen der Kindelemente gesteuert. Die möglichen Werte sind ähnlich zu denen des {{XULAttr("pack")}} Attributs.

+ +
+
start
+
Richtet Elemente an der oberen Seite für horizontal Boxen und an der linken Seite für vertikale Boxen aus.
+
center
+
Zentriert Kindelemente in der Box.
+
end
+
Richtet Elemente an der unteren Seite für horizontale Boxen und an der rechten Seite für vertikale Boxen aus.
+
baseline
+
Richtet Elemente an der Textlinie aus. Nur für horizontale Boxen sinnvoll.
+
stretch
+
Standardwert. Sorgt dafür, dass die Elemente auf die Größe der Box ausgedehnt werden, wie ein flexibles Element nur in die andere Richtung.
+
+ +

Im Gegensatz zum pack Attribut, wird das align Attribut auf die beinhalteten Elemente der Box angewendet, nicht auf das Element selbst.

+ +

Zum Beispiel, die erste Box unten wird die Kindelemente ausdehnen, weil das die Standardeinstellung ist. Die zweite Box hat ein align Attribut, seine Kindelemente werden also zentriert platziert.

+ +

Beispiel 5: Datei Ansehen

+ +
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+
+<window id="yesno" title="Question" orient="horizontal"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <hbox>
+    <button label="Yes"/>
+    <button label="No"/>
+  </hbox>
+  <hbox align="center">
+    <button label="Maybe"/>
+    <button label="Perhaps"/>
+  </hbox>
+
+</window>
+
+ +
Image:boxstyle2-b.png
+ +

Es können auch die CSS Eigenschaften: -moz-box-pack und -moz-box-align anstatt von Attributen verwendet werden.

+ +
Vielleicht finden Sie auch das Ausrichtungsbeispiel hilfreich, um die verschiedenen Eigenschaften auszuprobieren.
+ +

Text und Schaltflächen abschneiden

+ +

Sie können eine Schaltfläche erstellen, die eine Beschriftung hat, die länger als die maximale Breite der Schaltfläche ist. Eine Lösung wäre sicher die Breite zu erhöhen, jedoch verfügen Schaltflächen (und andere Elemente mit einer Beschriftung) über ein spezielles Attribut. Das Attribut "crop" erlaubt Ihnen wie ein Text abgeschnitten wird, wenn dieser zu lang ist.

+ +

Wenn der Text abgeschnitten wird, wird ein Auslassungszeichen (...) dort eingefügt, wo der Text ausgeschnitten wurde. Vier mögliche Werte sind dazu gültig:

+ +
+
left
+
Der Text wird auf der linken Seite abgeschnitten.
+
right
+
Der Text wird auf der rechten Seite abgeschnitten.
+
center
+
Der Text wird in der Mitte abgeschnitten.
+
none
+
Der Text wird nicht abgeschnitten. Das ist das Standardverhalten.
+
+ +

Dieses Attribut ist wirklich nur dann sinnvoll, wenn ein Dialog so entworfen wurde, dass er verwendbar in jeder Große sein soll. Das crop Attribut kann auch bei anderen Elementen verwendet werden, die ein label Attribut für Beschriftungen verwenden. Das folgende Beispiel zeigt das Attribut in Aktion:

+ +

Beispiel 6: Datei Ansehen

+ +
Image:boxstyle2.png
+ +
<button label="Push Me Please!" crop="right" flex="1"/>
+
+ +

Beachten Sie, wie der Text der Schaltfläche auf der rechten Seiten abgeschnitten wird, wenn das Fenster verkleinert wird.

+ +
+

Aktueller Dateisuche-Dialog: Datei Ansehen

+
+ +

Als nächstes eine Zusammenfassung und einige zusätzliche Details zum Box-Modell.

+ +
+

« zurückweiter »

+
diff --git a/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html b/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html new file mode 100644 index 0000000000..2469697a21 --- /dev/null +++ b/files/de/archive/mozilla/xul/xul_tutorial/xul_struktur/index.html @@ -0,0 +1,154 @@ +--- +title: XUL Struktur +slug: Archive/Mozilla/XUL/XUL_Tutorial/XUL_Struktur +tags: + - XUL + - XUL Tutorial +translation_of: Archive/Mozilla/XUL/Tutorial/XUL_Structure +--- +

{{ PreviousNext("XUL_Tutorial/Einfuehrung", "XUL_Tutorial/Die_Chrome_URL") }}

+ +

Wir werden mit einem Blick auf die Handhabung von XUL in Mozilla starten.

+ +

Wie wird XUL behandelt

+ +

In Mozilla wird XUL genauso behandelt wie HTML oder anderer Inhalt. Wenn man die URL einer HTML-Seite in das Adressfeld des Browsers eingibt, ortet der Browser die Webseite und lädt den Inhalt herunter. Die Mozilla Rendering-Engine übersetzt den HTML-Quelltext in ein Dokumentbaum mit DOM. Anschließend wird der Baum in ein Satz Objekte konvertiert, die am Bildschirm angezeigt werden können. CSS, Bilder und andere Technologien werden verwendet, um die Anzeige zu kontrollieren. XUL funktioniert größtenteils auf die selbe Art und Weise.

+ +

In der Tat werden alle Dokumenttypen, egal ob HTML, XUL oder sogar SVG, durch den selben zugrunde liegenden Code behandelt. Das bedeutet, dass die selben CSS-Eigenschaften benutzt werden können, um sowohl HTML und XUL zu manipulieren. Daher können viele Funktionen von beiden genutzt werden. Doch gibt es einige Funktionen, welche nur von HTML verwendet werden können, wie z.B. Formulare, und andere, welche nur von XUL verwendet werden können, so wie Overlays. Da XUL und HTML auf die selbe Art und Weise behandelt werden, kann man beide, sowohl vom lokalen Dateisystem, von einer Webseite oder von einer Erweiterung oder einer selbständigen XULRunner-Anwendung laden.

+ +

Inhalte aus entfernten Quellen z.B. http://localhost/~username/ sind (egal ob HTML, XUL oder ein anderer Dokumententyp) aus Sicherheitsgründen in ihrem Handlungsspielraum beschränkt. Deshalb stellt Mozilla die Methode zur Verfügung, Inhalte lokal zu installieren und registriert die installierten Dateien in sein chrome-System. Dies ermöglicht, dass eine spezielle URL-Form genutzt werden kann, die chrome:// URL genannt wird. Durch den Zugriff auf eine Datei mittels einer Chrome-URL erhält die Datei höhere Rechte, um auf lokale Dateien, Eigenschaften und Bookmarks zuzugreifen und andere privilegierte Operationen auszuführen. Webseiten erhalten diese Privilegien nicht, es sei denn sie sind mit einem digitalen Zertifikat signiert, und der Benutzer hat den Zugriff auf diese Operationen gewährt.

+ +

Die chrome-Paketregistrierung ist der Weg, um es Firefox-Erweiterungen zu ermöglichen, Funktionen zum Browser hinzuzufügen. Erweiterungen sind kleine Pakete mit XUL-Dateien, JavaScript, Stylesheets und Bildern, die in einer einzigen Datei verpackt sind. Eine solche Datei kann mit einem ZIP-Programm erstellt werden. Wenn der Benutzer diese Datei herunterlädt, wird die Erweiterung auf seiner Maschine installiert. Sie hängt sich in den Browser ein, indem sie eine XUL-Eigenschaft benutzt, die man Overlay nennt. Sie erlaubt es, das XUL der Erweiterung mit dem XUL des Browsers zu kombinieren. Für den Benutzer scheint es, als ob die Erweiterung den Browser verändert hat, aber in Wirklichkeit ist der Quelltext separat und die Erweiterung kann leicht entfernt werden. Registrierte Pakete müssen natürlich nicht unbedingt Overlays benutzen. Wenn sie keinen Gebrauch von Overlays machen, ist die Erweiterung nicht von der Browser-Oberfläche aus erreichbar, aber man kann sie über die Chrome-URL erreichen, sofern das erwünscht ist.

+ +

Eigenständige XUL-Anwendungen können XUL-Code auf ähnliche Weise enthalten, er wird aber natürlich als Teil der Installation eingebunden, anstatt separat als Erweiterung eingebettet zu werden. Dennoch wird der XUL-Code im chrome-System registriert, sodass die Applikation die Benutzeroberfläche darstellen kann.

+ +

Der Mozilla Browser selbst ist ebenfalls nichts weiter als eine Sammlung von Paketen, die XUL-Dateien, JavaScript und Stylesheets enthalten. Diese Dateien können über die chrome URL erreicht werden, haben erweiterte Privilegien und verhalten sich auch sonst wie andere Pakete. Natürlich ist der Browser weitaus größer und komplexer als die meisten Erweiterungen. Firefox und Thunderbird und einige andere Komponenten sind alle in XUL geschrieben und erreichbar über chrome-URLs. Sie können diese Pakete erkunden, indem Sie die Dateien in dem chrome-Verzeichnis ansehen, wo Firefox oder die anderen XUL-Anwendungen installiert sind.

+ +

Die chrome-URL beginnt immer mit 'chrome://'. Ähnlich wie eine 'http://'-URL immer eine entfernte Website per HTTP adressiert und die 'file://'-URL immer lokale Dateien, referenziert die 'chrome://'-URL immer installierte Pakete und Erweiterungen. Wir werden uns die chrome-Syntax im nächsten Kapitel genauer ansehen. Es ist wichtig zu wissen, dass der Zugriff über eine chrome-URL erweiterte Privilegien gegenüber den anderen Arten von URLs erlangt. Beispielsweise hat eine HTTP-URL keine besonderen Rechte und es wird ein Fehler ausgegeben, wenn eine Website versucht, zum Beispiel lokale Dateien zu lesen. Wird hingegen eine Datei von einer chrome-URL aus geladen, hat sie das Recht, lokale Dateien ohne Einschränkungen zu lesen.

+ +

Diese Unterscheidung ist wichtig. Es bedeutet, dass Websites bestimmte Dinge nicht tun können, wie zum Beispiel die Lesezeichen des Benutzers zu lesen. Diese Unterscheidung basiert nicht auf dem Inhalt, sondern nur auf der URL, die benutzt wird. Sowohl HTML als auch XUL auf einer Website haben keine erweiterten Rechte, wohingegen XUL und HTML, die mit einer chrome-URL geladen wurden, erweiterte Privilegien haben.

+ +

Wenn Sie XUL auf einer Website benutzen möchten, müssen Sie nur die XUL-Dateien auf die Website stellen, genau so, wie Sie es auch mit HTML-Dateien tun. Laden Sie dann die URL in den Browser: http://localhost/xul.php. Vergewissern Sie sich, dass Ihr Webserver so konfiguriert ist, dass er XUL-Dateien mit dem passenden Content-Type application/vnd.mozilla.xul+xml ausliefert. (zum Beispiel mittels PHP: header('content-type: application/vnd.mozilla.xul+xml');). Der Content-Type stellt sicher, dass Mozilla HTML und XUL unterscheiden kann. Mozilla nutzt die Dateierweiterung nur, solange die Datei vom Dateisystem gelesen wird. Sie sollten trotzdem die .xul-Dateiendung für all Ihre XUL-Dateien benutzen. Sie können XUL-Dateien in Ihren Browser laden, indem Sie sie mit dem Browser öffnen oder im Datei-Manager die Datei doppelklicken.

+ +
Denken Sie daran, dass entfernte XUL-Dateien bedeutende Einschränkungen haben.
+ +

 

+ +

Dokumenttypen: HTML XML XUL CSS

+ +

Mozilla verwendet deutlich unterschiedliche Arten des Dokumentenobjektmodells (DOM) für HTML und XUL, obwohl viele der Funktionen gemeinsam verwendet werden. Es gibt drei hauptsächliche Dokumententypen in Mozilla: HTML, XML und XUL. Natürlich wird HTML für HTML-Dokumente genutzt, XUL für XUL-Dokumente und XML für andere XML-Dokumenttypen. Da XUL ebenfalls XML ist, ist das XUL-Dokument als eine Unterart des XML-Dokumentes zu verstehen. Es gibt feine Unterschiede in der Funktionsweise. Zum Beispiel sind die Formularsteuerungen auf einer HTML-Seite über die document.forms-Eigenschaft erreichbar, während diese nicht für XUL-Dokumente verfügbar ist, weil XUL keine Formulare im Sinne von HTML haben. Andererseits sind spezielle XUL-Funktionen (wie Overlays und Templates) nur in XUL-Dokumenten verfügbar.

+ +

Diese Unterscheidung zwischen den Dokumenten ist wichtig. Es ist möglich viele XUL-Funktionen in HTML oder XML-Dokumenten zu verwenden, sofern sie nicht spezifisch für den jeweiligen Dokumententyp sind. Andere Funktionen erfordern jedoch den richtigen Dokumententyp. Daher können Sie zum Beispiel XUL-Layouts in anderen Dokumenten verwenden, da diese nicht vom XUL-Dokumententyp abhängig sind.

+ +

Um die oben genannten Punkte zusammenfassen:

+ + + +

Die nächsten Abschnitte beschreiben die grundlegende Struktur eines Chrome-Pakets, welches in Mozilla installiert werden kann. Wenn Sie jedoch beginnen wollen eine einfache Anwendung zu schreiben, sollten Sie zu "Ein Fenster erzeugen" springen und zu diesem Abschnitt später zurück kommen.

+ +

Paketorganisation

+ +

Mozilla ist so organisiert, sodass Sie so viele Komponenten wie Sie möchten, vorinstallieren können. Jede Erweiterung ist eine eigenständige Komponente mit einer separaten Chrome-URL. Mozilla verfügt außerdem über je eine Komponente für jedes installierte Theme und Sprachpaket. Jedes dieser Komponenten oder Pakete besteht aus einer Reihe von Dateien, welche die Benutzeroberfläche dafür beschreiben. Die Messenger-Komponente besitzt z.B. Beschreibungen für Fenster von Mailnachrichten oder Adressbuchdialogen.

+ +

Die Pakete, die mit Mozilla ausgeliefert werden, befinden sich im Chrome-Verzeichnis, welches das Verzeichnis ist, wo Sie Mozilla installiert haben. Das Chrome-Verzeichnis ist das, wo Sie alle Dateien, die die Benutzeroberfläche beschreiben, finden. Normalerweise packen Sie alle XUL-Dateien für eine Anwendung in dieses Verzeichnis, obwohl Erweiterungen in das Erweiterungsverzeichnis für einen bestimmten Benutzer installiert werden. Das einfache Kopieren einer XUL-Datei in das chrome-Verzeichnis gibt der Datei noch keine erweiterten Rechte und außerdem kann sie nicht über eine chrome-URL aufgerufen werden. Um diese zusätzlichen Privilegien zu bekommen, müssen Sie eine Manifestdatei erstellen und diese in das Chrome-Verzeichnis packen. Diese Datei ist sehr einfach zu erstellen und ist normalerweise nur ein paar Zeilen lang. Diese Datei wird verwendet, um chrome-URLs auf eine Datei oder einen Verzeichnispfad zu binden, wo sich die XUL-Dateien befinden. Details zur Erstellung dieser Datei werden in einem späteren Abschnitt genauer betrachtet.

+ +

Der einzige Weg Inhalte zu erstellen, die über eine Chrome-Url erreichbar sind, ist, ein Paket wie in nächsten Abschnitten beschrieben, zu erstellen. Das Verzeichnis wird 'chrome' genannt, weil es ein geeigneter Name zur Aufbewahrung von Chrome-Paketen ist, welche in Mozilla enthalten sind.

+ +

Um die Verwirrung noch weiter zu treiben, gibt es noch zwei weitere Orte, wo das Wort "chrome" auftreten könnte. Das ist einmal das -chrome-Kommandozeilenargument und zum anderen der chrome-Modifier der window.open()-Funktion. Keine dieser Funktionen verteilen zusätzliche Privilegien, stattdessen werden sie verwendet, um ein neues Top-Level-Fenster ohne das Browser UI (Toolbars, Menü) zu erstellen. Sie werden diese Funktion sicher noch in komplexeren XUL Anwendungen verwenden, wenn Sie nicht das Browser UI um Ihre Dialogboxen herum haben wollen.

+ +

Dateien eines Pakets werden normalerweise in einzelne JAR-Dateien zusammengefügt. Eine JAR-Datei kann mit einem ZIP-Tool erstellt werden. Beispielsweise können Sie JAR-Dateien in Mozilla's chrome-Verzeichnis öffnen, um die grundlegende Struktur des Pakets zu sehen. Obwohl es normal so ist, dass die Dateien in einer JAR-Datei gepackt sind, können Pakete genauso von einem normalen Verzeichnis erreicht werden. Obwohl Pakete normalerweise nicht auf diese Art ausgeliefert werden, ist es dennoch während der Entwicklung handlicher, die Dateien vorerst nicht zu packen, da Sie diese dann besser bearbeiten können ohne die Dateien jedes Mal neu zu packen zu müssen.

+ +

Standardmäßig parsen Mozilla-Applikationen XUL-Dateien und Skripte und speichern eine vor-kompilierte Version im Speicher im Laufe der Anwendungssitzung. Das verbessert die Leistung. Dadurch wird XUL allerdings nicht neu geladen, auch nicht, wenn die Quelldateien sich geändert haben. Um diesen Mechanismus zu deaktivieren, ist es notwendig die Einstellung nglayout.debug.disable_xul_cache festzulegen. In Firefox muss diese Einstellung unter Umständen hinzugefügt werden, indem "about:config" in die Adresszeile eingegeben wird und dieser Wert auf "true" gesetzt wird. Oder Sie verändern die user.js-Einstellungsdatei manuell und fügen die folgende Zeile hinzu:

+ +
pref("nglayout.debug.disable_xul_cache", true);
+
+ +

Es gibt normalerweise drei verschiedene Teile eines chrome-Pakets, auch wenn sie alle optional sind. Jeder Teil wird in einem anderen Verzeichnis gespeichert. Diese drei Sets sind content, skin und locale, welche unten näher beschrieben sind. Ein bestimmtes Paket kann ein oder mehrere Skins und Sprachen bereitstellen und der Benutzer kann diese mit den eigenen ersetzen. Zusätzlich kann das Paket mehrere unterschiedliche Anwendungen enthalten, jedes davon über eine andere chrome-URL erreichbar. Das Paketsystem ist flexibel genug, um separate Downloads von anderen Teilen wie zum Beispiel andere Sprachen, handzuhaben.

+ +

Die drei Typen der Chrome-Pakete sind:

+ + + +

Content Pakete

+ +

Der Name der JAR-Datei kann beschreiben, was sich darin befindet, aber Sie können nur sicher gehen, wenn Sie sich die Inhalte wirklich anschauen. Verwenden wir das Browserpaket, welches in Firefox enthalten ist als Beispiel. Wenn Sie Dateien in browser.jar entpacken, werden Sie die folgende Verzeichnisstruktur auffinden:

+ +
content
+   browser
+      browser.xul
+      browser.js
+      -- weitere XUL und JS-Dateien --
+      bookmarks
+         -- Bookmarks-Dateien --
+      preferences
+         -- Einstellungsdateien --
+.
+.
+.
+
+ +

Das lässt einfach als ein 'content'-Paket identifizieren, weil das oberste Verzeichnis "content" genannt wurde. Für Skins wird dieses Verzeichnis normalerweise "skin" und für Sprachen wird es normalerweise "locale" genannt. Dieses Benennungsschema ist nicht notwendig, aber es ist eine gute Konvention, um die Teile des Pakets klar trennen zu können. Einige Pakete können unter Umstand ein Abschnitt für content, skin sowie locale besitzen. In diesem Fall werden Sie ein Unterverzeichnis für jeden Typ finden. Chatzilla wird zum Beispiel auf diesem Weg ausgeliefert.

+ +

Das "content/browser"-Verzeichnis enthält eine Vielzahl an Dateien mit der Endung .xul und .js. Die XUL-Dateien sind die mit der .xul-Endung. Die Dateien mit der .js-Endung sind JavaScript-Dateien, welche Skripte enthalten, die die Funktionen eines Fenstern steuern. Viele XUL-Dateien haben eine zugehörige JavaScript-Datei und einige haben sogar mehr als eine.

+ +

In der Verzeichnisauflistung oben werden zwei Dateien genannt. Es gibt natürlich noch weitere, aber zur Einfachheit wurde diese ausgelassen. Die Datei browser.xul ist die XUL-Datei, die das Hauptfenster beschreibt. Das Hauptfenster für ein "content"-Paket sollte den selben Namen wie das Paket haben, mit der Endung .xul. In diesem Fall ist der Paketname "browser" also erwarten wir die Datei browser.xul. Einige der anderen XUL-Dateien beschreiben weitere Fenster. Die Datei pageInfo.xul beschreibt zum Beispiel den Seiteninformationsdialog.

+ +

Viele Pakete werden eine contents.rdf Datei enthalten, welches das Paket beschreibt, den Autor und die Overlays, die verwendet werden. Diese Datei ist jedoch veraltet und wurde durch ein einfacheres Verfahren ersetzt. Die neue Methode ist die sogenannte Manifestdatei, die bereits erwähnt wurde. Diese Dateien finden Sie mit der Endung .manifest im Chrome-Verzeichnis. Die Datei browser.manifest beschreibt beispielsweise das Browser-Paket.

+ +

Mehrere Unterverzeichnisse wie "bookmarks" und "preferences" sind zusätzliche Bereiche der Browser-Komponente. Sie werden nur in unterschiedlichen Ordnern aufbewahrt, um die Dateien besser organisieren zu können.

+ +

Skins oder Themes

+ +

Obwohl der zugrunde liegende Code für Mozilla sie Skins nennt und die Benutzeroberfläche den Ausdruck "Themes" gebraucht, meinen beide die gleiche Sache. Die classic.jar-Datei beschreibt das Standard-Theme von Firefox. Die Struktur ist ähnlich zum content-Paket. Zum Beispiel classic.jar:

+ +
skin
+   classic
+      browser
+         browser.css
+         -- weitere browser Skin-Dateien --
+      global
+         -- globale Skin-Dateien --
+.
+.
+.
+
+ +

Auch hier ist die Verzeichnisstruktur nicht notwendig und wird zur besseren Organisation verwendet. Sie können sogar alle Dateien in ein Verzeichnis packen. Für große Anwendungen werden Unterverzeichnisse verwendet, um verschiedene Komponenten zu trennen. Im obigen Beispiel existiert ein Verzeichnis für Theme-bezogene Dateien des Browsers und ein Ordner für globale Theme-bezogene Dateien. Das "global"-Verzeichnis enthält Skin-Dateien, die allgemein für alle Pakete zu gebrauchen sind. Die Dateien sind für alle Komponenten angelegt und werden mit ihrer eigenständigen Anwendung eingebunden. Der globale Teil definiert den Teil der gemeinsamen XUL-Widgets, wohingegen die anderen Verzeichnisse Dateien enthalten, die speziell für die entsprechenden Anwendungen sind. Firefox bindet beide, die globalen und die Browser Theme-Dateien in einem Archiv ein, aber sie können auch einzeln eingebunden werden.

+ +

Ein Skin besteht aus CSS-Dateien und einer Reihe von Bildern, die das Aussehen des Interface definieren. Die Datei browser.css wird von browser.xul verwendet und enthält Styles, welche das Aussehen unterschiedlicher Teile der Anwendung beschreiben. Beachten Sie hier wieder, dass die Datei browser.css den gleichen Dateinamen wie das Paket besitzt. Beim Verändern von CSS-Dateien, stellen Sie das Aussehen eines Fensters ein, ohne dabei die Funktionen zu beeinflussen. Auf diese Weise können Sie ein neues Theme erstellen. Der XUL-Teil bleibt der Gleiche, aber der Skin-Teil wird unabhängig verändert.

+ +

Lokalisierung

+ +

Die Datei "en-US.jar" beschreibt die Sprachinformationen für jede Komponente, in diesem Fall für US-Englisch. Wie bei den Skins, enthält jede Sprachdatei Dateien, welche den Text für das Paket in der jeweiligen Sprache festlegen. Die Struktur von "locale" ist ähnlich zu den anderen, wir werden das hier nicht noch einmal auflisten.

+ +

Der lokalisierte Text wird in zwei verschiedenen Dateitypen gespeichert: DTD-Dateien und properties-Dateien. Die DTD Dateien haben die Endung .dtd und enthalten Entity-Deklarationen, eine für jeden Textstring, welcher in einem Fenster verwendet wird. Die Datei browser.dtd enthält zum Beispiel Entity-Deklarationen für jedes Menü-Kommando. Zusätzlich werden Tastaturkürzel für jedes Kommando definiert, weil Sie eventuell unterschiedlich in verschiedenen Sprachen sein können. DTD-Dateien werden von XUL Dateien benutzt, meist werden Sie eine Datei pro XUL Datei finden. Der "locale" Teil beinhaltet auch "properties" Dateien, welche ähnlich sind, aber von Skriptdateien verwendet werden. Die Datei browser.properties enthält einige solcher lokalisierter Strings.

+ +

Diese Struktur erlaubt Ihnen Mozilla oder eine Komponente in verschiedene Sprachen zu übersetzen, in dem einfach ein neues "locale"-Verzeichnis hinzugefügt wird. Sie müssen den XUL-Code gar nicht verändern. Weiter kann eine andere Person ein anderes Paket hinzufügen, welches Unterstützung für eine neue Sprache bietet, ohne dass Ihr Originalpaket verändert wird.

+ +

Weitere Pakete

+ +

Es gibt ein spezielles Paket, welches "Toolkit" (oder "global") genannt wird. Wir haben uns das "global"-Verzeichnis für Skins angeschaut. Die Datei toolkit.jar enthält den zugehörigen "content"-Teil dazu. Es sind einige globale Dialoge und Definitionen darunter. Es wird auch das Standardaussehen und die Standardfunktionen der XUL-Widgets, wie Textboxen und Schaltflächen festgelegt. Diese Datei im globalen Teil eines Skin-Verzeichnisses enthalten das Standardaussehen für alle XUL Interface-Elemente. Das Toolkit-Paket wird von allen XUL-Applikationen verwendet.

+ +

Ein Paket hinzufügen

+ +

Mozilla platziert die Pakete, die mit der Installation eingebunden werden, in das Chrome-Verzeichnis. Diese Dateien müssen dort jedoch nicht platziert werden. Wenn ein anderes Paket installiert wird, können Sie dies überall auf der Festplatte platzieren, so lange eine Manifestdatei darauf zielt. Es ergibt Sinn Pakete in das Chrome-Verzeichnis zu packen, einfach weil es bequemer ist. Jedoch funktionieren die Pakete genauso gut, wenn sie woanders liegen. Sie können die Dateien jedoch nicht auf einer entfernten Seite speichern, da die entfernte Seite nicht durch das lokale Dateisystem gemountet ist.

+ +

Es gibt zwei chrome-Verzeichnisse für XUL-Applikationen: Eine ist dort installiert, wo auch die Anwendung installiert wurde, während die andere Teil des Benutzerprofils ist. Das erste Verzeichnis erlaubt Paketen über alle Benutzer zu agieren, während das zweite Verzeichnis nur für den jeweiligen Benutzer erstellt worden ist. Erweiterungen werden in einem separaten  Erweiterungsverzeichnis installiert und sind außerdem Benutzer-spezifisch. Jede Manifestdatei in einem der Chrome-Verzeichnissen wird geprüft, um zu sehen, welche Pakete installiert sind.

+ +

Im nächsten Abschnitt werden wir einen Blick darauf werfen, wie man die Chrome-URL verwendet, um sich auf Chrome-Pakete zu beziehen.

+ +

{{ PreviousNext("XUL_Tutorial/Einfuehrung", "XUL_Tutorial/Die_Chrome_URL") }}

+ +

{{ languages( { "en": "en/XUL_Tutorial/XUL_Structure", "es": "es/Tutorial_de_XUL/Estructura_XUL", "ja": "ja/XUL_Tutorial/XUL_Structure", "pl": "pl/Kurs_XUL/Struktura_XUL","fr": "fr/Tutoriel_XUL/La_structure_XUL" } ) }}

diff --git "a/files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" "b/files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" new file mode 100644 index 0000000000..685c091888 --- /dev/null +++ "b/files/de/archive/mozilla/xul/\303\244nderungen_an_xul_f\303\274r_firefox_1.5/index.html" @@ -0,0 +1,44 @@ +--- +title: Änderungen an XUL für Firefox 1.5 +slug: Archive/Mozilla/XUL/Änderungen_an_XUL_für_Firefox_1.5 +tags: + - Firefox 1.5 + - XUL +translation_of: Archive/Mozilla/XUL/XUL_Changes_for_Firefox_1.5 +--- +

Diese Seite liefert eine Übersicht über die wichtigsten Änderungen an XUL in Firefox 1.5 (Gecko 1.8). Weitere Änderungen, von denen man wissen sollte, beschreibt die Seite XUL Anwendungen für Firefox 1.5 anpassen.

+

<scrollcorner>

+

Es wurde das Element <scrollcorner> hinzugefügt, welche für den kleinen Kasten an der Überkreuzung von horizontalen und vertikalen Scrollbalken benutzt wird.

+

<richlistbox> und <richlistitem>

+

Die Elemente <richlistbox> und <richlistitem> werden zur Darstellung von Listen beliebigen Inhalts benutzt. Das erst genannte funktioniert ähnlich wie <listbox>, welches vorwiegend für Listen mit Texteinträgen entworfen wurde. Die <richlistbox> hat größtenteils die gleiche API wie <listbox> und einzelne Einträge, die mithilfe von <richlistitem> erzeugt wurden, können ausgewählt werden. Siehe Richlistbox für weiterführende Information.

+

System für Voreinstellungen

+

Einige Elemente wurden hinzugefügt, mit denen Voreinstellungsfenster erzeugt werden können. Diese Fenster sind spezielle Typen von Dialogfenstern, die mehrere Panels unterstützen, welche jeweils zusammen in der gleichen Datei oder in einer eigenen Datei gespeichert werden können. Ein Satz von Icons wird am oberen Rand des Dialogfensters angezeigt und erlaubt dem Benutzer das Umschalten zwischen den Panels. Zusammen mit den neuen Elementen und einigen zusätzlichen Attributen für bestehende Elemente ermöglichen sie auf einfache Weise das Setzen von Voreinstellungen, ohne dafür Code benutzen zu müssen. Für weiterführende Information, siehe Preferences System.

+

bfcache

+

Mozilla speichert nun das DOM der Seite zwischen. Daher führt das Navigieren vor und zurück nicht zu einem Neuladen der Seite, was die Navigation sehr viel effizienter macht. Die Ereignisse pageshow und pagehide treten beim Umschalten von einer Seite im Zwischenspeicher auf, wohingegen die Ereignisse load und unload nur beim Laden und Entladen einer Seite auftreten.

+

Für weiterführende Information siehe: Benutzen des Zwischenspeichers in Firefox 1.5.

+

tabIndex

+

Die Eigenschaft tabIndex wird nun auf die meisten Elemente angewendet.

+

<radiogroup>

+

Das Setzen der value Eigenschaft eines <radiogroup> Elements führt zur Auswahl des <radio> Elements in der Gruppe mit dem entsprechenden Wert.

+

Dialog: defaultButton Eigenschaft

+

Die Bindung des <dialog> Elements besitzt nun die Eigenschaft defaultButton. Das Setzen dieser Eigenschaft ändert die Standardschaltfäche des Dialogfensters. Die eine Möglichkeit ist die Angabe einer der Schaltflächen der <dialog>-Bindung (anhand des Namens); die andere ist none, dann ist keine Schaltfläche die Standardschaltfläche.

+

Schaltfläche: icon Eigenschaft

+

Die icon Eigenschaft einer Schaltfläche ermöglicht die Verwendung vordefinierter Icons als Bild der Schaltfläche. Beispielsweise erzeugt <button icon="help"> eine Schaltfläche mit einem Hilfe-Icon. Dies wird typischerweise auf Systemen mit GNOME eingesetzt, die möglichen Werte sind hier: accept, cancel, help, open, save, find, clear, yes, no, apply, close, print, add, remove, refresh, go-forward, go-back, properties, select-font, select-color, network.

+

<menulist>

+

Einträge in einer <menulist> können ein description Attribut haben, um zusätzlich beschreibenden Text neben dem Namen eines Eintrags anzuzeigen. Die Änderungsmethoden appendItem und insertItemAt von menulist verlangen ein zusätzliches description Argument, wenn Einträge auf diese Weise erzeugt werden.

+

<listbox>

+

Die Methode removeItemAt war augrund eines Fehlers ({{ Bug(236068) }}) manchmal nicht nullbasiert. Dies wurde in Firefox 1.5 behoben und Code, der sich auf dieses nicht nullbasierte Verhalten verlässt, sollte entsprechend geändert werden.

+

<stringbundle>

+

Das <stringbundle> Element hat eine Eigenschaft strings dazu bekommen, die eine Aufzählung aller im Bündel enthaltenen Zeichenketten ermöglicht.

+

Ziehbare Reiter

+

Von jetzt an erlaubt der Tab-Browser ein Neuanordnen der Reiter durch einfaches Ziehen.

+

<tabbox>

+

Das <tabbox> Element besitzt nun ein Attribut selectedIndex zur Angabe desjenigen Reiters, der standardmäßig gewählt sein soll.

+

Überlagerungen dynamisch laden

+

XUL untersützt nun das dynamische Laden von Überlagerungen mithilfe der Funktion document.loadOverlay.

+
+

Information zum Originaldokument

+ +
+

{{ languages( { "en": "en/XUL_Changes_for_Firefox_1.5", "fr": "fr/Modifications_XUL_pour_Firefox_1.5", "ja": "ja/XUL_Changes_for_Firefox_1.5", "pl": "pl/Zmiany_w_XUL-u_w_Firefoksie_1.5" } ) }}

diff --git a/files/de/archive/mozilla/xulrunner/index.html b/files/de/archive/mozilla/xulrunner/index.html new file mode 100644 index 0000000000..f4f7b708d4 --- /dev/null +++ b/files/de/archive/mozilla/xulrunner/index.html @@ -0,0 +1,81 @@ +--- +title: XULRunner +slug: Archive/Mozilla/XULRunner +tags: + - XUL + - XULRunner +translation_of: Archive/Mozilla/XULRunner +--- +
XULRunner Einführung
+Eine kurzes Tutorial zu XULRunner.
+ +
XULRunner ist ein Mozilla-Laufzeitpaket, welches genutzt werden kann, um XUL+XPCOM-Anwendungen auszuführen. Es stellt Mechanismen zur Installation, Aktualisierung und Deinstallation solcher Anwendungen bereit. XULRunner stellt weiterhin libxul bereit, eine Lösung, welche es erlaubt Mozilla-Technologien in andere Projekte und Produkte einzubetten.
+ + + + + + + + +
+

Veröffentlichungen

+ +
+

XULRunner 1.9.2 wurde veröffentlicht und kann unter ftp.mozilla.org heruntergeladen werden. Siehe auch: Versionsinformationen zur Installation, Deinstallation, und für weitere Informationen zu dieser Version.

+ +

Firefox 3 und höher sind mit einem XULRunner Paket ausgestattet, welches jede kompatible XULRunner Anwendung über den -app Parameter benutzen kann.

+ +

Ältere Versionen sind auch verfügbar.

+
+ +

Überblick

+ + + +

Dokumentation

+ +
+
XULRunner Einführung
+
Eine kurze Einführung in XULRunner.
+
XULRunner Tipps
+
Eine Sammlung von Tipps zum Arbeiten mit XULrunner.
+
XULRunner 1.8 verwenden
+
Dieser Artikel beschreibt, wie man XULRunner 1.8 als eigenständige Anwendung verwendet.
+
XULRunner Hall of Fame
+
Auflistung aller verfügbaren Anwendungen, die auf XULRunner basieren.
+
Build Dokumentation
+
Wie man den Quelltext bekommt und kompiliert.
+
Debug Dokumentation
+
Schritte, die man benötigt, um Venkman zum Debuggen zu konfigurieren.
+
+ +

Alles anzeigen...

+ 		+

Community

+ +
    +
  • Mozillas Plattform Foren:
    • +
+ +

{{ DiscussionList("dev-platform", "mozilla.dev.platform") }}

+ + + +

Verwandte Themen

+ +
+
XUL
+
+
+ +

 

diff --git a/files/de/archive/rss/index.html b/files/de/archive/rss/index.html new file mode 100644 index 0000000000..e160b25010 --- /dev/null +++ b/files/de/archive/rss/index.html @@ -0,0 +1,13 @@ +--- +title: RSS +slug: Archive/RSS +tags: + - RSS +translation_of: Archive/RSS +--- +
Einführung
+Dieses Tutorial soll Anfängern den Einstieg in RSS erleichtern.
+
Really Simple Syndication (RSS) ist ein weit verbreitetes HTML-ähnliches und XML-basierendes Datenformat, welches zum Austausch von Inhalten benutzt wird. RSS hat eine schäbige Geschichte und eine Vielzahl an unterschiedlichen inkompatiblen RSS Versionen (einige sind auf RDF basiert, aber die meisten sind auf XML basiert). Nichtsdestotrotz ist RSS ein extrem populäres Format, das für den Austausch von Nachrichten, Blogposts, IPradio, IPTV und vielem mehr bestens geeignet ist und enorm an Fahrt gewonnen hat.
+ +

Dokumentation

Why RSS Slash is Popular - Counting Your Comments (en)
Ein Artikel von Charles Iliya Krempeaux über das RSS Slash Modul, warum es so populär ist und wie es man schafft einen Zähler für seine Kommentare bereit zu stellen.
Why Well-Formed Web RSS Module is Popular - Syndicating Your Comments (en)
Ein Artikel von Charles Iliya Krempeaux über das RSS Well-Formed Web Modul, warum es so populär ist und wie man damit Kommentare verlinkt.
The Myth of RSS Compatibility (en)
Mark Pilgrim schildert die schäbige Geschichte von RSS und Details zur Inkompatibilität zwischen jeder Version.
Atomic RSS (en)
Tim Bray schildert die Benutzung von Atom 1.0 als Mikroformat und erweiterndes Modul für RSS 2.0 sowie das Beibehalten von RSS 2.0 als Austauschformat, allerdings mit integrierten, ausgewählten Atom 1.0 Elementen.

Alle ansehen...

Community

  • Mozillas XML-Foren:

{{ DiscussionList("dev-tech-xml", "mozilla.dev.tech.xml") }}

RDF, XML
+

{{ languages( { "en": "en/RSS","es": "es/RSS", "fr": "fr/RSS", "it": "it/RSS", "ja": "ja/RSS", "pl": "pl/RSS", "pt": "pt/RSS", "ko": "ko/RSS" } ) }}

diff --git a/files/de/archive/themes/index.html b/files/de/archive/themes/index.html new file mode 100644 index 0000000000..a440be2e7a --- /dev/null +++ b/files/de/archive/themes/index.html @@ -0,0 +1,11 @@ +--- +title: Themes +slug: Archive/Themes +tags: + - NeedsTranslation + - TopicStub +translation_of: Archive/Themes +--- +

Archived theme documentation.

+ +

{{Listsubpages("/en-US/docs/Archive/Themes", 10)}}

diff --git a/files/de/archive/web-standards/index.html b/files/de/archive/web-standards/index.html new file mode 100644 index 0000000000..6b29b8e71c --- /dev/null +++ b/files/de/archive/web-standards/index.html @@ -0,0 +1,69 @@ +--- +title: Webstandards +slug: Archive/Web-Standards +tags: + - Webstandards +translation_of: Archive/Web_Standards +--- +
+ Webstandards wurden sorgfältig entworfen, um für die größtmögliche Zahl von Internet-Nutzern den größtmöglichen Nutzen zu erzielen und gleichzeitig die Langlebigkeit von im Internet veröffentlichten Dokumenten sicherzustellen. Wer sich beim Entwerfen und Erstellen von Websites an diese Standards hält, vereinfacht die Produktion und senkt die Kosten, während gleichzeitig Websites entstehen, die für mehr Menschen und mehr webfähige Endgeräte zugänglich sind. Websites, die gemäß dieser Richtlinien entwickelt wurden, bleiben auch dann voll funktionsfähig, wenn sich herkömmliche Desktop-Browser verändern und neue internetfähige Endgeräte auf den Markt kommen.{{ Ref(1) }}
+ + + + + + + +
+

Dokumentation

+
+
+ Anwendungen vom Internet Explorer zu Mozilla migrieren
+
+ Jemals Probleme mit Internet Explorer-spezifischen Webanwendungen unter Mozilla gehabt? In diesem Artikel werden geläufige Probleme bei der Verwendung von IE-Anwendungen unter Mozilla-basierenden Browsern erläutert.
+
+ Verwendung von Webstandards
+
+ Dieser Artikel liefert einen Überblick über die Einhaltung von W3C Webstandards für die Inhalte der eigenen Webseite.
+
+ Wahl von Webstandards gegenüber proprietären Praktiken
+
+ In der Welt der (Web-)Entwicklung gibt es einen Bedarf an Standards, weil Anwendungen für für mehrere Entwicklergruppen entworfen werden.
+
+ Vorteile von Webstandards
+
+ Wie das Festhalten an Webstandards sowie die Verminderung von proprietären Markup und Technologien dazu beitragen kann, geschäftliche Ziele zu erreichen.
+
+ 		+

Community

+

Mozillas Webstandardsforen

+
+ {{ DiscussionList("dev-web-development", "mozilla.dev.web-development") }}
+ +

Tools

+ +

Beispiele

+ +

Verwandte Themen

+
+
+ CSS, DHTML, HTML, Webentwicklung, XHTML, XML
+
+
+

{{ endnote("1") }} - The Web Standards Project

diff --git a/files/de/archive/web-standards/rdf_in_mozilla_faq/index.html b/files/de/archive/web-standards/rdf_in_mozilla_faq/index.html new file mode 100644 index 0000000000..cbd3c1194b --- /dev/null +++ b/files/de/archive/web-standards/rdf_in_mozilla_faq/index.html @@ -0,0 +1,264 @@ +--- +title: RDF in Mozilla FAQ +slug: Archive/Web-Standards/RDF_in_Mozilla_FAQ +tags: + - RDF +translation_of: Archive/Web_Standards/RDF_in_Mozilla_FAQ +--- +

Allgemeines

+

Wo fange ich an?

+

RDF dient zwei primären Zielen in Mozilla. Erstens ist es eine einfache, plattformübergreifende Datenbank für kleinere Datenmengen und zweitens - und das ist der Hauptgrund - wird das RDF-Modell zusammen mit XUL Templates als eine abstrakte "API" zur Anzeige von Informationen benutzt. RDF in fünfzig Worten oder weniger ist eine kurze Beschreibung auf hohem Niveau, was RDF in Mozilla macht. Die RDF Back-End Architektur beschreibt die RDF Implementierung in Mozilla detaillierter und gibt eine kurze Übersicht der beteiligten Schnittstellen.

+

Wo finde ich Informationen über Open Directory ("dmoz")?

+

Detaillierte Informationen zu Open Directory gibt es auf www.dmoz.org. Das Open Directory Datenset ist als (riesiger) RDF/XML Dump verfügbar. Es beschreibt tausende von Webseiten, die eine Mischung aus dem Dublin Core Metadaten-Vokabular und der DMoz Klassifizierung benutzen. Für mehr Informationen zu diesem Thema lesen Sie bitte die DMoz RDF Seiten oder odp-rdf-announce für Änderungen an dessen genauem Datenformat. Die Seite ChefMoz (gemeinnütziger Restaurantführer) ist auch als RDF verfügbar.

+

Wenn Sie Probleme mit den Daten von DMoz bzw. ChefMoz haben, ist es das Beste, die Leute hinter diesen Projekten direkt zu kontaktieren. Aber wenn Sie etwas Interessantes mit diesem Inhalt machen (z.B. ihn in Mozilla benutzen, um beispielsweise Teile davon in das XUL UI von einer entfernten Seite zu laden), vergessen Sie bitte nicht, es mozilla-rdf und die RDF Interest Group wissen zu lassen. Diese Gruppen sind wahrscheinlich auch an Tools interessiert, die die DMoz Daten säubern, umgestalten oder speichern. Besuchen Sie die Seiten, die ODP Daten benutzen, um einige Verzeichnisse zu sehen, die auf den ODP RDF Dumps basieren.

+

Was ist eine Datenquelle?

+

RDF kann für gewöhnlich auf zwei verschiedene Arten angezeigt werden: Entweder als Datenmenge mit Knoten und Bogen oder als Gruppierung logischer Aussagen. Eine Datenquelle ist eine Teilmenge (oder eine Ansammlung von Aussagen, abhängig von Ihrem Standpunkt), die aus bestimmten Gründen zusammengefasst werden. Einige Beispiele für bereits existierende Datenquellen sind Browser Lesezeichen, Browser Verlauf, IMAP E-Mail Accounts, NNTP News Server und RDF/XML Dateien.

+

In Mozilla können Datenquellen mit Hilfe der Composite Data Source zusammengefasst werden. Dies entspricht dem Überlagern von Datenmengen oder dem Zusammenfassen von Gruppen von Aussagen. Aussagen über die selbe RDF Ressource können dann gemischt werden: Zum Beispiel das Datum des letzten Besuchs einer bestimmten Webseite kommt aus dem globalen Browser-Verlauf und die Tastenkombination zum Erreichen der Webseite per Tastatur kann aus der Datenquelle für die Browser-Lesezeichen stammen. Beide Datenquellen gehören zur Webseite, die über die URL angesprochen wird: Das ist der Schlüssel, der es erlaubt, die Datenquellen korrekt zu verbinden.

+

Für eine detailliertere Beschreibung, wie man Datenquellen schreibt, lesen Sie sich bitte das RDF Datenquellen Tutorial durch.

+

Wie verwaltet Mozilla Datenquellen?

+

Der RDF Service verwaltet eine Tabelle aller geladenen Datenquellen. Die Tabelle ist mit der URI der Datenquelle verbunden, welche entweder die URL einer RDF/XML Datei oder eine spezielle URI mit "rdf:" am Anfang ist, welche auf eine eingebaute Datenquelle zielt.

+

Datenquellen können über den RDF Service unter Verwendung der GetDataSource() Methode bezogen werden. Wenn sich das URI Argument auf eine URL einer RDF/XML Datei bezieht, wird der RDF Service eine RDF/XML Datenquelle erstellen und diese asynchron parsen. Die Datenquelle bleibt im Cache bis die letzte Referenz der Datenquelle ausgegeben wurde.

+

Wenn sich das URI-Argument auf eine eingebaute Datenquelle bezieht, wird der RDF Service den XPCOM Component Manager verwenden, um eine Komponente zu laden, deren ContractID über eine spezielle URI geladen wurde: prefix@mozilla.org/rdf/datasource;1?name=.

+

Zum Beispiel,

+
rdf:foo
+
+

Würde folgendes laden::

+
@mozilla.org/rdf/datasource;1?name=foo
+
+

Wie bei RDF/XML Datenquellen, wird eine Datenquelle über diesen Weg solange im Cache bleiben die letzte Referenz ausgegeben wurde.

+

Wie erstelle ich eine Datenquelle aus einer RDF/XML Datei?

+

Sie können entweder eine RDF/XML Datenquelle über die RDF Service GetDataSource() Methode erstellen:

+
// Get the RDF service
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// ...and from it, get the datasource. Make sure that your web server
// dishes it up as text/xml (recommended) or text/rdf!
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// Note that ds will load asynchronously, so assertions will not
// be immediately available
+
+

Alternativ können Sie eine direkt erstellen, indem Sie den XPCOM Component Manager nutzen, so wie im folgendem Codeausschnitt dargestellt:

+
// Create an RDF/XML datasource using the XPCOM Component Manager
+var ds =
+  Components
+  .classes["@mozilla.org/rdf/datasource;1?name=xml-datasource"]
+  .createInstance(Components.interfaces.nsIRDFDataSource);
+// The nsIRDFRemoteDataSource interface has the interfaces
// that we need to setup the datasource.
+var remote =
+   ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+// Be sure that your web server will deliver this as text/xml (recommended) or text/rdf!
+remote.Init("http://www.mozilla.org/some-rdf-file.rdf");
+// Make it load! Note that this will happen asynchronously. By setting
// aBlocking to true, we could force it to be synchronous, but this
// is generally a bad idea, because your UI will completely lock up!
+remote.Refresh(false);
+// Note that ds will load asynchronously, so assertions will not
// be immediately available
+
+

Sie können sich auch dafür entscheiden, die RDF/XML Datenquelle "manuell" zu erstellen, wenn Sie diese synchron statt asynchron laden wollen.

+

Wie lade ich eine RDF/XML Datenquelle neu?

+

Sie können eine RDF/XML Datenquelle (oder jede andere Datenquelle, die nsIRDFRemoteDataSource unterstützen) neu laden, indem Sie die Refresh() Methode von nsIRDFRemoteDataSource nutzen. Refresh() nimmt einen Parameter an, welcher angibt, ob Sie die Operation synchron ("blocking") oder asynchron ("non-blocking") ausführen möchten. Sie sollten niemals einen synchronen Ladevorgang durchführen, wenn Sie nicht wirklich wissen, was Sie tun: Das wird die Benutzeroberfläche zum Einfrieren bringen bis der Ladevorgang abgeschlossen ist!

+

Wie kann ich feststellen, ob eine RDF/XML Datenquelle geladen wurde?

+

Über die nsIRDFRemoteDataSource Schnittstelle ist es möglich die Eigenschaft "loaded" zu befragen, um zu bestimmen, ob die Datenquelle geladen wurde oder nicht:

+
// Get the RDF service
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// Get the datasource.
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// Now see if it's loaded or not...
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+}
+
+

Sagen wir mal, dass die Datenquelle nicht geladen wurde und sie asynchron geladen werden wird. Über diese API und über JavaScript setTimeout() können wird eine Schleife erstellen, die kontinuierlich die "loaded" Eigenschaft prüft. Das ist sehr zusammengeschustert und schlecht, da kein fehlgeschlagener Ladevorgang erkannt wird, beispielsweise, wenn gar keine Daten in der URL vorhanden waren!

+

Aus diesem Grund gibt es ein Observer Interface, welche Ihnen erlaubt den Fortschritt der Datenquelle zu beobachten. Der folgende Code zeigt die Verwendung:

+
// This is the object that will observe the RDF/XML load's progress
+var Observer = {
+  onBeginLoad: function(aSink)
+    {},
+
+  onInterrupt: function(aSink)
+    {},
+
+  onResume: function(aSink)
+    {},
+
+  onEndLoad: function(aSink)
+    {
+      aSink.removeXMLSinkObserver(this);
+      alert("done!");
+    },
+
+  onError: function(aSink, aStatus, aErrorMsg)
+    { alert("error! " + aErrorMsg); }
+};
+// Get the RDF service
+var RDF =
+  Components
+  .classes["@mozilla.org/rdf/rdf-service;1"]
+  .getService(Components.interfaces.nsIRDFService);
+// Get the datasource.
+var ds = RDF.GetDataSource("http://www.mozilla.org/some-rdf-file.rdf");
+// Now see if it's loaded or not...
+var remote =
+  ds.QueryInterface(Components.interfaces.nsIRDFRemoteDataSource);
+
+if (remote.loaded) {
+  alert("the datasource was already loaded!");
+}
+else {
+  alert("the datasource wasn't loaded, but it's loading now!");
+  // RDF/XML Datasources are all nsIRDFXMLSinks
+  var sink =
+    ds.QueryInterface(Components.interfaces.nsIRDFXMLSink);
+  // Attach the observer to the datasource-as-sink
+  sink.addXMLSinkObserver(Observer);
+  // Now Observer's methods will be called-back as
  // the load progresses.
+}
+
+

Beachten Sie, dass der Observer an der RDF/XML Datenquelle angehängt bleibt, bis removeXMLSinkObserver aufgerufen wurde.

+

Wie bekomme ich Zugang zu den Informationen in einer Datenquelle?

+

Das nsIRDFDataSource Interface ist ein Hilfsmittel mit dem Sie die Assertions der Datenquelle erreichen und verändern können.

+ +

Sie können außerdem RDF Container Schnittstellen verwenden, um Zugang zu Informationen der RDF Container zu erhalten.

+

Wie kann ich Informationen in der Datenquelle ändern?

+

Um 'Assert' verwenden zu können, um eine Assertion hinzuzufügen und 'Unassert' zu verwenden, um eine zu entfernen, lesen Sie Mozilla RDF Back end Architecture (engl.).

+
ds.Assert(homepage, FV_quality, value, true);
+ds.Unassert(homepage, FV_quality, value, true);
+
+

Wie mache ich Änderungen an einer RDF/XML Datenquelle rückgängig?

+

Eine RDF/XML Datenquelle kann über QueryInterface() der nsIRDFRemoteDataSource Schnittstelle gesteuert werden. Dieses Interface hat eine Flush() Methode, welche versuchen wird, die Inhalte der Datenquelle zurück zur URL, von der Sie kommen, wiederherzustellen. Das geschieht über ein speziellen Protokollmechanismus (z.B., schreibt eine "file:" URL nur die Datei; eine "http:" URL kann einen HTTP-POST ausführen). Flush() schreibt nur zur Datenquelle, wenn sich die Inhalte geändert haben.

+

Wie füge ich zwei oder mehr Datenquellen zusammen, um sie als eine zu sehen?

+

Verwenden Sie nsIRDFCompositeDataSource. Dieses Interface ist von nsIRDFDataSource abgeleitet. Eine Implementierung dieser Schnittstelle kombiniert typischerweise die Aussagen mehrerer Datenquellen zusammen als eine Sammlung. Weil das nsIRDFCompositeDataSource Interface von nsIRDFDataSource abgeleitet ist, kann es genau so abgefragt und verändert werden wie eine individuelle Datenquelle.

+

Wie bekomme ich Zugang zu "eingebauten" Datenquellen?

+

Eine eingebaute Datenquelle ist eine lokal installierte Komponente, die nsIRDFDataSource implementiert. Zum Beispiel den Bookmarks Service. Prüfen Sie zunächst hier, um sicher zu gehen, dass sie Zugang zu einer eingebauten Datenquelle haben. Es gibt mehrere Sicherheitsbeschränkungen für den Zugang zu eingebauten Datenquellen von "unsicherem" XUL und JS.

+

Da eine eingebaute Datenquelle nur eine XPCOM Komponente ist, können Sie diese direkt über den XPConnect Component Manager instanzieren.

+
// Use the component manager to get the bookmarks service
+var bookmarks =
  Components.
  classes["@mozilla.org/rdf/datasource;1?name=bookmarks"].
  getService(Components.interfaces.nsIRDFDataSource);
+
+// Now do something interesting with it...
+if (bookmarks.HasAssertion(
+     RDF.GetResource("http://home.netscape.com/NC-rdf#BookmarksRoot"),
+     RDF.GetResource("http://home.netscape.com/NC-rdf#child"),
+     RDF.GetResource("http://home.netscape.com/NC-rdf#PersonalToolbarFolder"),
+     true) {
+  // ...
+}
+
+

Alternativ haben einige Datenquellen "spezielle" RDF-freundliche ContractIDs, die es einfach machen, die Datenquelle über die nsIRDFSerivce GetDataSource() Method zu instantiieren oder die Datenquellenattribute auf einem XUL Template. Diese ContractIDs haben die Form

+
@mozilla.org/rdf/datasource;1?name=name
+
+

und sind über GetDataSource() und die Datenquellenattribute über den Kürzel "rdf:name" erreichbar. Beispielsweise zeigt der folgende Codeausschnitt, wie man den Bookmark Service als eine Datenquelle in ein XUL Template hinzufügt.

+
<tree datasources="rdf:bookmarks">
+  ...
+</tree>
+
+

Wie manipuliere ich RDF "container"?

+

Um einen RDF "container" (ein <rdf:Seq>, zum Beispiel) zu manipulieren, können Sie nsIRDFContainerUtils verwenden, welche als Service mit der folgenden ContractID instantiiert werden kann:

+
@mozilla.org/rdf/container-utils;1
+
+

Sie können diesen Service verwenden, um zu ermitteln, ob etwas ein RDF Container ist, indem Sie IsSeq(), IsBag() und IsAlt() benutzen. Sie können eine Quelle in einen Container machen, wenn das nicht schon der Fall ist, in dem Sie MakeSeq(), MakeBag() oder MakeAlt() verwenden. Diese Methoden geben einen nsIRDFContainer zurück, welcher Ihnen erlaubt Container-ähnliche Operationen auszuführen und das Sie sich Ihre Hände schmutzig machen.

+

Alternativ, wenn Ihre Datenquelle bereits ein Objekt hat, welches ein RDF Container ist, können Sie ein nsIRDFContainer Objekt mit der folgenden Zeile instantiieren:

+
@mozilla.org/rdf/container;1
+
+

Mit der ContractID und Init() mit der Datenquelle und der Ressource als Parameter. Beachten Sie, dass dies fehlschlagen wird, wenn die Ressource nicht bereits ein Container ist.

+

XUL Templates

+

XUL Templates werden durch die Angabe eines Datenquellenattributs für ein Element in einem XUL Dokument festgelegt.

+

Es gibt zwei Arten von XUL Templates. Die einfache Art, welche aktuell die meist genutzte im Mozilla Code ist, und die erweiterte Art, welche anspruchsvolle Muster im RDF Graphen bietet. Siehe Vorlagen Tutotrial.

+

Was ich mit einem XUL Template machen?

+

Sie können jede Art von Inhalt mit einem XUL Template verarbeiten. Sie können jede Art von Tags in dem <action> Bereich des <rule> Tags verwenden (auch HTML oder beliebiges XML).

+

Wann sollte ich ein XUL Template verwenden?

+

Eine Alternative zur Verwendung von RDF und XUL Templates ist die Verwendung von W3C DOM APIs, um XUL (oder HTML) Inhaltsmodelle zu verändern. Es kann jedoch sein, dass es dann etwas umständlich werden kann:

+
  1. Es gibt mehrere "views" der Daten. Zum Beispiel erkennen Mozilla mail/news die Verzeichnisstruktur in der Toolbar, das "folder pane", in mehreren Menüs und in einigen Dialogen. Um nicht drei Stücke JS (oder C++) Code zum Aufbau der DOM Trees für <menubutton>, <menu> and <tree> Inhaltsmodell zu erstellen, schreiben Sie einfach drei kompakte Regeln für jedes Inhaltsmodell.
  2. Die Daten können sich verändern. Zum Beispiel kann ein mail/news Benutzer IMAP Ordner löschen oder hinzufügen. (Beachten Sie wie diese Aufgabe das Inhaltsmodell verkompliziert). Der XUL Template Builder verwendet Regeln, um automatisch alle Inhaltsmodelle synchron zu halten.
    3. +
+

Um die Vorteile dieser Funktionen zu nutzen, müssen Sie natürlich in der Lage sein, Ihre Informationen nach der RDF datasource API auszudrücken, entweder durch die Verwendung des eingebauten Datenquellenspeichers, durch RDF/XML zum Speichern Ihrer Informationen oder durch das Schreiben Ihrer eigenen Implementierung (möglicherweise in JavaScript) der nsIRDFDataSource Schnittstelle.

+

Was wird geladen, wenn ich "datasources=" festlege?

+

Das "datasources" Attribut in der Wurzel eines Templates legt eine Leerzeichen-getrennte Liste von Datenquellen URIs zum Laden fest. Aber was ist eine "Datenquellen URI"? Entweder:

+ +

In beiden Fällen wird die Datenquelle über die GetDataSource() Methode der nsIRDFService Schnittstelle geladen, daher wird es ähnlich verwaltet wie alle anderen Datenquellen, die auf diesem Weg geladen werden.

+

Was ist das Sicherheitsmodell für RDF/XML in XUL?

+

XUL wird von einer "vertrauten" URL geladen. Jede "chrome:" URL kann jede Datenquellen-URI über das Datenquellenattribut des XUL Templates festlegen.

+

XUL, welches von einer "unvertrauten" URL geladen wurde, kann nur ein RDF/XML Dokument aus der gleichen Codebase (im Sinne von Java) festlegen. Keine speziellen (z.B., rdf:) Datenquellen können von unsicherem XUL geladen werden.

+

Wie füge ich eine Datenquelle zu einem XUL Template hinzu?

+

Obwohl es möglich ist ein XUL Template mit einem eingeschlossenen Set von Datenquellen durch das Datenquellenattribut auszustatten, gibt es oft Situationen bei denen Sie nicht wissen, welche Datenquelle geladen werden soll, bis das XUL geladen wurde. Beispielsweise muss Ihr XUL die Datenquellen erst berechnen, daher brauchen Sie eine onload Routine. Oder es muss eine Datenquelle auf Basis der Benutzeraktionen hinzugefügt werden.

+

Hier ist ein einfaches Beispiel, welches zeigt wie man dies machen kann. fangen wir mit dem folgendem XUL an.

+
<window xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+  ...
+  <tree id="my-tree" datasources="rdf:null">
    ...
  </tree>
+  ...
+</window>
+
+

Nehmen wir an, dass wir die Datenquelle irgendwie erhalten haben. Der folgende Beispielcode zeigt, wie man eine Datenquelle zu einem Template hinzufügtund dann das Template auffordert, sich selbst auf Basis der neuen Daten neu zu laden.

+
var ds = /* assume we got this somehow! */;
+// Get the DOM element for 'my-tree'
+var tree = document.getElementById('my-tree');
+// Add our datasource to it
+tree.database.AddDataSource(ds);
+// Force the tree to rebuild *now*. You have to do this "manually"!
+tree.builder.rebuild();
+
+

Jedes XUL Element mit einem "datasources" Attribut wird eine Datenbank- und eine Builder-Eigenschaft erhalten. Die Datenbankeigenschaft bezieht sich auf ein nsIRDFCompositeDataSource Objekt, welches die Datenquellen aus denen ein Template erstellt wird, enthält.

+

Der Builder-Eigenschaft bezieht sich auf ein nsIXULTemplateBuilder Objekt, welches ein "builder" ist, der den Status der Template-Inhalte verwaltet.

+

Hinweis zur rdf:null Datenquelle: Das ist eine spezielle Datenquelle, die sagt, "Hey, Ich habe noch keine Datenquelle für dich, aber ich werde später eine hinzufügen, also mach dich bereit!" Die database und builder Eigenschaften werdn eingerichtet, aber lassen die Datenbank der Datenquellen leer: Sie müssen diese selbst hinzufügen!

+

Kann ich ein XUL Template über DOM APIs manipulieren?

+

Ja: Sie können Regeln hinzufügen und Regeln entfernen, eine Abfrage ändern und den Inhalt, der durch eine Regel erzeugt wird, ändern. Sie können sogar alles über die W3C DOM APIs verändern.

+

Die einzige Einschränkung ist, dass Sie rebuild() aufrufen müssen, bevor die Änderungen sichtbar werden (so als wenn Sie eine Datenquelle zu einem XUL Template hinzufügen).

+

Wie füge ich Plaintext aus einem Template hinzu?

+

Um Plaintext in ein Template hinzuzufügen, verwenden Sie das <text> Element.

+
<template>
+  <rule>
+    <query>...</query>
+    <binding>...</binding>
+    <action>
+      <text value="?some-variable" />
+    </action>
+  </rule>
+</template>
+
+

Das obige Template wird ein Inhaltsmodell erstellen, dass eine Reihe von Textknoten zusammen ausführt.

+

Problemlösungen

+

Tipps und Tricks.

+

Meine RDF/XML Datei wird nicht geladen.

+

Der häufigste Grund dafür, dass RDF/XML nicht von einem Webserver geladen werden kann, ist ein falscher MIME Type. Stellen Sie sicher, dass Ihr Server die Datei als text/xml (empfohlen) oder als text/rdf ausliefert.

+

Beachten Sie, dass die W3C RDF Core WG application/rdf+xml registriert hat, aber dies noch nicht von Mozilla verstanden wird.

+

Ein weiteres, mögliches Problem: Für fern-geladenes XUL und RDF müssen Mozillas Sicherheitsbeschränkungen richtig eingestellt werden (siehe unten für Beispielcode). Wenn XUL nicht in Ihr RDF geladen wurde und der Mimetype OK ist, könnte dies Ihr Problem sein.

+

Sie können die rdfcat und rdfpoll Tools verwenden, um sicherzustellen, dass das RDF/XML valide ist. Beide Programme werden unter Windows geladen, wenn Sie configure --enable-tests festgelegt haben.

+ +

Beide Programme sind zu langsam zum Laden und zum Laufen (aber sie werden laufen, letztendlich). Sie initialisieren XPCOM und bringen Necko dazu, die URLs zu laden und auszuführen, so wie es Mozilla tut.

+

Es passiert nichts nachdem ich AddDataSource aufgerufen habe.

+

Beachten Sie, dass der Template-Builder die Inhalte eines Templates nicht automatisch neu aufbaut nachdem AddDataSource oder RemoveDataSource aufgerufen wurden. Um die Inhalte des Templates zu erneuern, müssen Siel elt.builder.rebuild() selbst aufrufen.

+

Warum? Das kommt daher, weil man mehrere Rebuilds verhindern möchte, wenn mehr als eine Datenquelle zur Datenbank hinzugefügt wird.

+

Beispiele

+

Wo kann ich einige (funktionierende) Beispiele finden?

+

Einige Beispiele kann man hier finden. Einige sind in signierten Skripts enthalten und sind über HTTP direkt ausführbar.

+

Siehe auch duplicates.rdf (Live RDF Feed von Mozilla) und duplicates.xul. Beachten Sie, dass sie Mozillas Sicherheitsmodell einhalten müssen. Um das zu tun, fügen Sie die folgende Zeile in Ihre Preferences Datei hinzu. (Schließen Sie Mozilla erst, da sonst die Datei überschrieben wird, wenn Sie Mozilla beenden.)

+
user_pref("signed.applets.codebase_principal_support", true);
+
+

Mozilla wird Sie fragen, ob Sie den Skripten in duplicates.xul Rechte zum Zugang zu XPConnect geben wollen; stimmen Sie dem zu.

+

Aktuell erlaubt Mozilla kein unprivilegierten Zugang zu RDF Schnittstellen und Services; Siehe Bug 122846 für Details.

+

Bitte schicken Sie danbri, mozilla-rdf oder waterson eine Mail mit URLs, wenn Sie weitere Beispiele haben, die wir hier hinzufügen können!

+

Hinweise

+
  1. Siehe auch W3C RDF und Semantic Web für weitere Informationen über RDF und verwandte Technologien.
    2. +
+

Mitwirkende

+ +

Autor: Chris Waterson

+
+

Informationen zum Originaldokument

+ +
+

{{ languages( { "en": "en/RDF_in_Mozilla_FAQ", "es": "es/Preguntas_frecuentes_sobre_RDF_en_Mozilla", "ja": "ja/RDF_in_Mozilla_FAQ", "ko": "ko/RDF_in_Mozilla_FAQ" } ) }}

diff --git a/files/de/archive/web/index.html b/files/de/archive/web/index.html new file mode 100644 index 0000000000..6f60d315ff --- /dev/null +++ b/files/de/archive/web/index.html @@ -0,0 +1,12 @@ +--- +title: Archived open Web documentation +slug: Archive/Web +tags: + - Archived + - NeedsTranslation + - TopicStub + - Web +translation_of: Archive/Web +--- +

The documentation listed below is archived, obsolete material about open Web topics.

+

{{SubpagesWithSummaries}}

diff --git a/files/de/archive/web/javascript/arguments.caller/index.html b/files/de/archive/web/javascript/arguments.caller/index.html new file mode 100644 index 0000000000..f2d9dd90ad --- /dev/null +++ b/files/de/archive/web/javascript/arguments.caller/index.html @@ -0,0 +1,55 @@ +--- +title: arguments.caller +slug: Archive/Web/JavaScript/arguments.caller +tags: + - Functions + - JavaScript + - Obsolete + - Property + - arguments +translation_of: Archive/Web/JavaScript/arguments.caller +--- +
{{jsSidebar("Functions")}}
+ +

{{obsolete_header}}

+ +

Die veraltete Eigenschaft arguments.caller wird genutzt, um die Funktion, die die aktuelle Funktion ausführt, zu ermittelt. Die Eigenschaft wurde entfernt und kann nicht mehr genutzt werden.

+ +

Beschreibung

+ +

Die Eigenschaft ist nicht mehr verfügbar, aber man kann {{jsxref("Function.caller")}} benutzen.

+ +
function whoCalled() {
+   if (whoCalled.caller == null)
+      console.log('I was called from the global scope.');
+   else
+      console.log(whoCalled.caller + ' called me!');
+}
+ +

Beispiele

+ +

Der folgende Quelltext wurde eingesetzt, um den Wert der Eigenschaft arguments.caller zu prüfen, jedoch funktioniert dieses nicht mehr.

+ +
function whoCalled() {
+   if (arguments.caller == null)
+      console.log('I was called from the global scope.');
+   else
+      console.log(arguments.caller + ' called me!');
+}
+
+ +

Spezifikationen

+ +

Wurde in keinem Standard spezifiziert. Wurde in JavaScript 1.1 implementiert und wegen {{bug(7224)}} und potenziellen Sicherheitsrisiken wieder entfernt.

+ +

Browserkompatibilität

+ + + +

{{Compat("javascript.functions.arguments.caller")}}

+ +

Siehe auch

+ + diff --git a/files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html b/files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html new file mode 100644 index 0000000000..302b230c09 --- /dev/null +++ b/files/de/archive/web/javascript/ecmascript_7_support_in_mozilla/index.html @@ -0,0 +1,68 @@ +--- +title: ECMAScript 7 Unterstützung in Mozilla +slug: Archive/Web/JavaScript/ECMAScript_7_support_in_Mozilla +translation_of: Archive/Web/JavaScript/ECMAScript_Next_support_in_Mozilla +--- +
{{jsSidebar("New_in_JS")}}
+ +

ECMAScript 2016 ist die nächste Erweiterung des ECMA-262 Standards. Neue Sprachfeatures sind bereits im Entwurf der 6. Edition vorgeschlagen und nähern sich der Vollendung. Die aktuellen Vorschläge lassen sich unter dem folgenden GitHub Repository ansehen tc39/ecma262.
+ Aktuelle Probleme mit dem Spezifikationsprozess sollen durch die Einführung von Stages und Champions gelöst werden. Außerdem ist ein zweijähriger Release-Zyklus von dem Standard vorgeschlagen.
+
+  Link für weitere Informationen über den post-ES6 Spezifikationsprozess.

+ +

Mailing-Liste zur Diskussion von ECMAScript standards: es-discuss

+ +

Experimentale Features

+ +

Die folgenden Features sind bereits implementiert, jedoch nur zugänglich in Firefox Nightly channel:

+ +

Zusätze zu dem Array Objekt

+ + + +

Zusätze zu dem ArrayBuffer Objekt

+ + + +

Neue TypedObject Objekte

+ + + +

Neue SIMD Objekte

+ + + +

Features mit zunehmender Stabilität

+ +

The following features are supported beyond the Nightly channel, but ongoing specification and implementation work is happening. Features which were originally in the ECMAScript 6 draft and got postponed to ECMAScript 2016 are likely to appear here.

+ +

Ausdrücke

+ + + +

Noch nicht unterstütze Features

+ +

The following features are not yet implemented, but targeted for ECMAScript 2016.

+ + + +

Weiterführend

+ + diff --git a/files/de/archive/web/javascript/index.html b/files/de/archive/web/javascript/index.html new file mode 100644 index 0000000000..4687b7bf23 --- /dev/null +++ b/files/de/archive/web/javascript/index.html @@ -0,0 +1,12 @@ +--- +title: JavaScript +slug: Archive/Web/JavaScript +translation_of: Archive/Web/JavaScript +--- + + +

{{Obsolete_Header}}

+ +

Obsolete JavaScript features and unmaintained docs

+ +

{{SubpagesWithSummaries}}

diff --git a/files/de/archive/web/javascript/legacy_generator_function/index.html b/files/de/archive/web/javascript/legacy_generator_function/index.html new file mode 100644 index 0000000000..8e05b218bd --- /dev/null +++ b/files/de/archive/web/javascript/legacy_generator_function/index.html @@ -0,0 +1,56 @@ +--- +title: Alter Generatorfunktionsausdruck +slug: Archive/Web/JavaScript/Legacy_generator_function +tags: + - JavaScript + - Legacy Iterator + - Reference +translation_of: Archive/Web/JavaScript/Legacy_generator_function +--- +
Der alte Generatorfunktionsausdruck war eine SpiderMonkey spezifische Funktion, welche in Firefox 58+ entfernt wurde. Für zukünftige Verwendung sollte der {{jsxref("Operators/function*", "function* Ausdruck")}} genutzt werden.
+ +
{{jsSidebar("Operators")}}
+ +

Das function Schlüsselwort kann benutzt werden, um eine alte Generatorfunktion in einem Ausdruck zu definieren. Um eine Funktion einen alten Generator zu machen, muss der Funktionskörper mindestens einen {{jsxref("Operators/yield", "yield")}} Ausdruck enthalten.

+ +

Syntax

+ +
function [name]([param1[, param2[, ..., paramN]]]) {
+   statements
+}
+ +

Parameter

+ +
+
name
+
Der Funktionsname. Kann in fällen einer anonymen Funktion weggelassen werden. Der Name ist nur lokal im Funktionskörper verfügbar.
+
paramN
+
Der Name eines Argumentes, welches der Funktion übergeben wird. Eine Funktion kann bis zu 255 Argumente haben.
+
statements
+
Die Statements, welche den Funktionskörper bilden. Diese müssen mindestens ein {{jsxref("Operators/yield", "yield")}} Ausdruck enthalten.
+
+ +

Beschreibung

+ +

Ein Überblick über den Einsatz ist auf der Iteratoren und Generatoren Seite verfügbar.

+ +

Browserkompatibilität

+ +

Kein Support.

+ +

Siehe auch

+ + diff --git a/files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html b/files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html new file mode 100644 index 0000000000..cac83f31ce --- /dev/null +++ b/files/de/benutzen_des_zwischenspeichers_in_firefox_1.5_(caching)/index.html @@ -0,0 +1,205 @@ +--- +title: Benutzen des Zwischenspeichers in Firefox 1.5 (caching) +slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) +tags: + - Caching + - Firefox 1.5 + - JavaScript +translation_of: Mozilla/Firefox/Releases/1.5/Using_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 sogenannte bfcache Funktion verändert das Ladeverhalten von Webseiten ungemein. Webentwickler möchten daher unter Umständen:

+ + + +

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:

+ + + +

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 diesem Beispiel:

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

+ +

{{ languages( { "en": "en/Using_Firefox_1.5_caching", "it": "it/Usare_il_caching_di_Firefox_1.5", "fr": "fr/Utilisation_du_cache_de_Firefox_1.5", "ja": "ja/Using_Firefox_1.5_caching" } ) }}

diff --git a/files/de/bugzilla/index.html b/files/de/bugzilla/index.html new file mode 100644 index 0000000000..4a16805ef8 --- /dev/null +++ b/files/de/bugzilla/index.html @@ -0,0 +1,27 @@ +--- +title: Bugzilla +slug: Bugzilla +tags: + - Qualitätssicherung + - Tools +translation_of: Mozilla/Bugzilla +--- +

bugzilla.mozilla.org (häufig als b.m.o. abgekürzt) ist das von Mozilla entwickelte Bug-tracking System, eine Datenbank, die Bugs und Verbesserungsanträge für Firefox, Thunderbird, SeaMonkey, Camino, und andere mozilla.org Projekte aufzeichnet.

+ +

Bugzilla verwenden

+ +

Die Seite »Was man mit Bugzilla macht und was nicht« und die Bugzilla Etiquette zeigen ein paar Regeln auf, was man beim Gebrauch von Bugzilla beachten sollte.

+ +

Unter Qualitätssicherung kann man mehr erfahren und die Artikel »Herausfinden, ob ein Bug schon gemeldet wurde« oder die Richtlinien zum Schreiben eines Bugreports geben weiterführende Informationen, wie man einen neuen Bug meldet.

+ +

Um zu Erfahren, wie man Code zu Firefox oder anderen Projekten beitragen kann, gibt es unter Einreichen eines Patches weitere Informationen.

+ +

Siehe auch

+ + diff --git a/files/de/bundles/index.html b/files/de/bundles/index.html new file mode 100644 index 0000000000..fa67b9d739 --- /dev/null +++ b/files/de/bundles/index.html @@ -0,0 +1,81 @@ +--- +title: Struktur eines installierbaren Bündels +slug: Bundles +tags: + - Toolkit API +translation_of: Archive/Mozilla/Bundles +--- +

XULRunner Anwendungen, Erweiterungen, und Themes teilen sich eine gemeinsame Verzeichnisstruktur, und in einigen Fällen kann das gleiche Bündel als eigenständige XULRunner-Anwendung und als eine installierbare Anwendungserweiterung genutzt werden. Die Grundstruktur von Bündeln kann einige der folgenden Dateien beinhalten:

+
/install.rdf                        Erweiterung/Theme Installationsmanifest
+/application.ini                    Anwendungsstartmanifest
+/components/*                       Komponenten und XPT Dateien    (>=1.7)
+/defaults/preferences/*.js          Voreinstellungen               (>=1.7)
+/plugins/*                          NPAPI Plugins                  (>=1.8)
+/chrome.manifest                    Chrome-Registrierungsmanifest  (>=1.8)
+/chrome/icons/default/*             Fenstersymbole                 (>=1.8)
+
+

Natürlich benötigt eine Erweiterung nicht all diese Verzeichnisse. Themes sind aus Sicherheitsgründen eingeschränkt, und können normalerweise nur ein chrome.manifest zur Registrierung und eine JAR-Datei mitliefern.

+

 

+

Plattformspezifische Unterverzeichnisse in Gecko 1.9.2 und früher

+
+
+Hinweis zu Gecko 2.0 +
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
+
+

Plattformspezifische Unterverzeichnisse wurden mit Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) entfernt. Siehe Plattform-spezifische Dateien für weitere Informationen.

+
+

In einigen Fällen kann eine Erweiterung oder Anwendung es erforderlich machen, eine binäre Komponente oder Plugins für verschiedene Plattformen bereitzustellen, oder Theme-Autoren können mehrere plattformspezifische JAR-Dateien bündeln. Um das zu bewerkstelligen, nutzt der Erweiterungslader besondere Unterverzeichnisse für plattformspezifische Dateien (angefangen ab Toolkit/Gecko 1.8, Firefox/Thunderbird 1.5). Die Plattform-Zeichenkette wird während des Toolkit Build Vorgangs auf einen eindeutigen Wert festgelegt - eine Kombination aus Betriebssystem, Prozessorarchitektur und Compiler. Das Format der Plattform-Zeichenkette ist:

+
{OS_TARGET}_{TARGET_XPCOM_ABI}
+
+

Jede der Dateien, welche vom Erweiterungshauptverzeichnis geladen werden nun vom Unterverzeichnis geladen, wenn es existiert:

+
/platform/{Plattform Zeichenkette}
+
+

Wenn zum Beispiel ein Dritt-Anbieter ein Plugin für Computer unter Linux, Macintosh und Windows bereitstellen möchte, wären folgende Dateien nötig:

+
/platform/Linux_x86-gcc3/plugins/libMyPlugin.so
+/platform/WINNT_x86-msvc/plugins/MyPlugin.dll
+/platform/Darwin_ppc-gcc3/plugins/libMyPlugin.dylib
+
+

Weil XPT-Dateien nicht plattformspezifisch sind, landen zugehörige XPT-Dateien in einem generischen Komponentenverzeichnis:

+
/components/MyPlugin.xpt
+
+

Wenn eine Erweiterung nicht-binären, plattformspezifischen Code (z.B. zur Eintragung in die Windows-Registrierung) beinhaltet, kann einfach der Betriebssystem-Bezeichner als Plattform-Unterverzeichnis dienen:

+
/platform/WINNT/components/registerDoctype.js
+
+

Wenn plattformspezifische JAR-Dateien genutzt werden, sollte jedes Plattformverzeichnis eine eigene chrome.manifest Datei enthalten:

+
chrome.manifest
+chrome/mytheme-base.jar
+platform/Darwin/chrome.manifest
+platform/Darwin/chrome/mytheme-mac.jar
+platform/WINNT/chrome.manifest
+platform/WINNT/chrome/mytheme-win.jar
+
+

Der Ladevorgang verarbeitet zuerst das Basisverzeichnis, gefolgt durch die jeweiligen Plattformverzeichnisse (zuerst /{OS_TARGET}/, dann /{OS_TARGET}_{TARGET_XPCOM_ABI}/). Wenn Voreinstellungen in unterschiedlichen Verzeichnissen gesetzt werden, wird das zuletzt geladene das vorherige überschreiben.

+

Plattform-spezifische Dateien

+

Mit Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) wurde die Unterstützung für Plattform-spezifische Unterverzeichnisse entfernt. Stattdessen müssen nun Manifest-Flags, wie zum Beispiel OS und ABI Flags, im Chrome-Manifest verwendet werden, um Komponenten festzulegen, die von bestimmten Plattformen geladen werden sollen.

+

Zum Beispiel:

+
binary-component components/windows/mycomponent.dll ABI=WINNT_x86-msvc
+binary-component components/mac/mycomponent.dylib ABI=Darwin_x86-gcc3
+binary-component components/mac/mycomponent64.dylib ABI=Darwin_x86-64-gcc3
+binary-component components/linux/mycomponent.so ABI=Linux_x86-gcc3
+
+

Anwendungsspezifische Erweiterungsdateien

+

Zusätzlich zu den oben aufgeführten Erweiterungsdateien, können Anwendungen weitere Dateien aus den Erweiterungen lesen. Firefox 1.5 oder höher liest zum Beispiel Sherlock Suchplugins aus.

+
/searchplugins/*.src
+
+

Firefox 2 und höher werden auch MozSearch und OpenSearch Plugins aus

+
/searchplugins/*.xml
+
+

und Myspell-Wörterbücher aus

+
/dictionaries/*.{aff|dic}
+
+

lesen können.

+

Offizielle Toolkit API Referenzen

+

+

diff --git a/files/de/codeschnipsel/cookies/index.html b/files/de/codeschnipsel/cookies/index.html new file mode 100644 index 0000000000..555505f616 --- /dev/null +++ b/files/de/codeschnipsel/cookies/index.html @@ -0,0 +1,45 @@ +--- +title: Cookies +slug: Codeschnipsel/Cookies +tags: + - Add-ons + - Codeschnipsel + - Cookies + - Erweiterungen +translation_of: Archive/Add-ons/Code_snippets/Cookies +--- +

Existierende Cookies lesen

+ +

Cookies für einen gegebenen Host, repräsentiert als nsICookie2 Objekte, können so nummeriert werden:

+ +
let enum = Services.cookies.getCookiesFromHost("example.com");
+while (enum.hasMoreElements()) {
+  var cookie = e.getNext().QueryInterface(Ci.nsICookie2);
+  dump(cookie.host + ";" + cookie.name + "=" + cookie.value + "\n");
+}
+
+ +

Alle Cookies, regardless vom Host, kann man mit Services.cookies.enumerator rather than getCookiesFromHost().

+ +

nummerieren.

+ + + +

Der folgende Code zeigt, wie man in Firefox ein Cookie einstellt.

+ +
Services.cookies.add(".host.example.com", "/cookie-path", "cookie_name", "cookie_value", is_secure, is_http_only, is_session, expiry_date);
+
+ +

Siehe auch

+ + + +

{{ languages( { "fr": "fr/Extraits_de_code/Cookies", "ja": "ja/Code_snippets/Cookies", "pl": "pl/Fragmenty_kodu/Ciasteczka" } ) }}

diff --git a/files/de/codeschnipsel/index.html b/files/de/codeschnipsel/index.html new file mode 100644 index 0000000000..31c6bc8bf3 --- /dev/null +++ b/files/de/codeschnipsel/index.html @@ -0,0 +1,28 @@ +--- +title: Codeschnipsel +slug: Codeschnipsel +tags: + - Add-ons + - Erweiterungen +translation_of: Archive/Add-ons/Code_snippets +--- +

Dies ist eine Liste mit nützlichen Codeschnipseln (kleine Code-Beispiele) für Entwickler von Erweiterungen für verschiedene Mozilla Anwendungen. Viele dieser Beispiele können sowohl in XULRunner als auch im aktuellen Mozilla-Code benutzt werden.

+

Diese Beispiele zeigen, wie grundlegende Aufgaben bewältigt werden können, deren Lösung nicht offensichtlich ist.

+

Allgemein

+
Windows
Fenster öffnen und bearbeiten.
Toolbar
Code im Bezug zur Toolbar.
Sidebar
Code im Bezug zur Sidebar.
XML
Beispielcode, um XML zu parsen, zu schreiben und zu verändern.
File I/O
Beispielcode, um Dateien zu lesen und zu schreiben.
Drag & Drop
Beispielcode, um "Drag und Drop" Ereignisse zu verwalten
Dialoge
Beispielcode, um Dialogboxen und Eingabeaufforderungen anzuzeigen.
Warnungen und Meldungen
Modale und nicht-modale Wege den Benutzer zu benachrichtigen.
Einstellungen
Beispielcode, um Einstellungen zu lesen, zu schreiben und zu verändern.
JS XPCOM
Beispielcode, um XPCOM Komponenten in JavaScript aufzurufen
Anwendungen starten
Beispielcode, um andere Anwendungen zu starten.
<canvas>
Auf Canvas bezogener Code.
Signierung einer XPI
Wie eine XPI mit PKI signiert wird.
Threads
Hintergrundoperationen ausführen und die Ausführung verzögern, während Hintergrundoperationen beendet werden.
Diverses
Diverse nützliche Codefragmente.
HTML zu DOM
Verwendung eines versteckten Browserelements, um HTML zu DOM zu parsen.
+
+

Browser-orientierter Code

+
Tabbed Browser (Firefox/SeaMonkey)
Grundlegende Operationen, wie das Laden von Seiten mit dem Tabbed Browser, welche das Herz von Mozilla's Browser Anwendungen darstellen.
Cookies
Lesen, Schreiben, Verändern und Entfernen von Cookies.
Seitenaufbau
Beispielcode, um Seiten zu laden und neu zu laden.
Interaktion zwischen priviligierten und nicht-priviligierten Seiten
Wie man zwischen Erweiterungen und Webseiten kommuniziert.
Dateien herunterladen
Beispielcode, um Dateien und Bilder herunter zu laden und den Downloadfortschritt zu überwachen.
Passwort Manager
Beispielcode, um Passwörter aus/zum integriertem Passwortmanager zu speichern oder auszulesen.
Lesezeichen
Beispielcode, um Lesezeichen auszulesen und zu speichern.
JavaScript Debugger Service
Interaktionen mit dem JavaScript Debugger Service
+
+

SVG

+
Allgemein
Allgemeine Informationen und Werkzeuge.
SVG Animation
Animiertes SVG über JavaScript und SMIL
Interaktives SVG mit JavaScript
Verwendung von JavaScript und DOM Ereignissen, um interaktives SVG zu erstellen.
SVG in HTML und XUL einbetten
Verwendung von SVG, um HTML oder XUL Markup aufzuwerten.
+
+

XUL Widgets

+
HTML Tooltips in XUL
Dynamische Einbettung von HTML in ein XUL Element, um einen Tooltip mit Markup zu versehen.
Beschriftungen und Beschreibungen
Spezielle Verwendungen und Beispiele zu Zeilenumbrüchen.
Tree
Erstellung und Veränderung von Trees mit XUL und JS.
Scrollbar
Das Aussehen der Scrollbar vom Browser sowie Iframes verändern.
Autovervollständigung
Beispielcode, um Autovervollständigung im Browser zu aktivieren.
Boxen
Tipps und Tricks zur Verwendung von Boxen als Container.
Tabbox
Entfernen und Verändern von Tabs in Tabboxen.
+
+

Windows-spezifisch

+
Window Handler (HWND) auffinden (Firefox)
Wie man die Windows API aufruft, um Mozilla Window Handler zu finden. Window Handler können für IPC und Zugänglichkeit gebraucht werden.
Zugang zur Windows Registrierung über XPCOM
Wie man Registrierungschlüssel und -werte auslesen, schreiben, verändern, löschen, aufzählen, und beobachten kann.
+
+ +

Die Inhalte auf MozillaZine Example Code werden nach und nach auf diese Seite umgezogen, aber es gibt dort noch einige nützliche Beispiele.

+

{{ languages( { "en": "en/Code_snippets", "fr": "fr/Extraits_de_code", "ja": "ja/Code_snippets", "ko": "ko/Code_snippets", "pl": "pl/Fragmenty_kodu" } ) }}

diff --git a/files/de/codeschnipsel/on_page_load/index.html b/files/de/codeschnipsel/on_page_load/index.html new file mode 100644 index 0000000000..ffc64be436 --- /dev/null +++ b/files/de/codeschnipsel/on_page_load/index.html @@ -0,0 +1,124 @@ +--- +title: On page load +slug: Codeschnipsel/On_page_load +translation_of: Archive/Add-ons/Code_snippets/On_page_load +--- +

Dieser Artikel ist für XUL / JavaScript-Entwickler, die benutzerdefinierte Code haben wollen jedes Mal eine neue Seite wird im Browser / Mail geladen ausgeführt. Wenn Sie genauere Kontrolle über benutzerdefinierte Code-Ausführung, zum Beispiel benötigen, wie Dokumente Laden oder wenn Registerkarten schalteten sehen Fortschritt Hörer.

+ +

Fortschritte Zuhörern ermöglichen Erweiterungen der Ereignisse mit Dokumenten Laden in den Browser und mit Tab Umschalten Ereignissen benachrichtigt werden. Fortschritte Zuhörer Umsetzung der nsIWebProgressListener Schnittstelle.

+ +

Erstellen eines Overlays

+ +

Zuerst müssen Sie einen erstellen, Überlagerung, um eine (oder mehrere, je nachdem, welche Anwendungen Sie zielen) der folgenden XUL-Dokumente:

+ + + + + + + + + + + + + + + + + + + + +
AnwendungURI zu überlagern
Firefoxchrome: //browser/content/browser.xul
Thunderbirdchrome: //messenger/content/messenger.xul
Navigator von SeaMonkeychrome: //navigator/content/navigator.xul
+ +

Anbringen eines Skripts

+ +

Bringen Sie ein Skript, um Ihre einblenden (siehe "Anbringen eines Skripts zum Erstellen einer Overlay"), die eine fügt Last Ereignis-Listener APPCONTENT Element (Browser) oder messagepane (mail):

+ +
window.addEventListener("load", function load(event) {
+    window.removeEventListener("load", load, false); // Listener entfernen, da nicht mehr benötigt
+    myExtension.init();  
+}, false);
+
+var myextension = {
+  init: function() {
+    var APPCONTENT = document.getElementById("APPCONTENT"); // Browser
+    if (APPCONTENT) {
+      appcontent.addEventListener("DOMContentLoaded", myExtension.onPageLoad, true);
+    }
+    var messagepane = document.getElementById("messagepane"); // Mail
+    if (messagepane) {
+      messagepane.addEventListener("load", function(event) { myExtension.onPageLoad(event); }, true);
+    }
+  }
+
+  onPageLoad: function(aEvent) {
+    var doc = aEvent.originalTarget; // doc ist das Dokument, das den "onload" Event ausgelöst hat
+    // Tu etwas mit der geladenen Seite.
+    // doc.location ist ein Location-Objekt (siehe Link unten).
+    // Man kann es verwenden, um Code nur auf bestimmten Seiten auszuführen.
+    if (doc.location.href.search ("forum")> -1)
+      alert("Eine Forum-Seite, wird geladen");
+    
+    // Füge Ereignis-Listener für page "unload" hinzu
+    aEvent.originalTarget.defaultView.addEventListener ("unload", function(event) { myExtension.onPageUnload (event); }, true);
+  }
+
+  onPageUnload: function(Aevent) {
+    // Tu etwas
+  }
+};
+
+ +

Aktuelle Firefox Stamm Night die onPageLoad Funktion nicht nur für Dokumente, Feuer, aber xul: Bilder (Favicons in Tabbrowser). Wenn Sie nur wollen, Dokumente zu verarbeiten, zu gewährleisten aEvent.originalTarget.nodeName == "#document".

+ +

Wenn Sie mit Code auf einer Seite zu laden, ist es wahrscheinlich, würden Sie wollen, um etwas Bereinigungscode auf Seite Entladen laufen. Um in das Unload-Ereignis im obigen Beispiel können Sie den "pagehide" Veranstaltung wie diese verwenden zu befestigen:

+ +
appcontent.addEventListener ("pagehide", myExtension.onPageUnload, false);
+
+ +

für APPCONTENT und ähnlich für messagepane

+ +
messagepane.addEventListener ("pagehide", myExtension.onPageUnload, false);
+ +

und fügen Sie den Code zur onPageUnload Methode.

+ +

 

+ +

 

+ +

Basis onPageLoad für ein Browser-Fenster

+ +
var myextension = {
+    init: function () {
+        // Das Ereignis kann DOMContentLoaded werden, pageshow, pagehide, laden oder entladen.
+        if (gBrowser) gBrowser.addEventListener ("DOMContentLoaded", this.onPageLoad, false);
+    }
+    onPageLoad: function (Aevent) {
+        var doc = aEvent.originalTarget; // Doc ist Dokument, das das Ereignis ausgelöst hat
+        var win = doc.defaultView; // Sieg ist das Fenster für den doc
+        // Test gewünschten Bedingungen und etwas tun,
+        // If (doc.nodeName = "#document"!) Return; // Nur Dokumente
+        // If (Sieg = win.top!) Return; // nur Top-Fenster.
+        // If (win.frameElement) return; // Überspringen iframes / Rahmen
+        alert ("Seite geladen wird \ n" + doc.location.href);
+    }
+}
+window.addEventListener ("load", Funktion load (event) {
+    window.removeEventListener ("load", Last, false); // Listener zu entfernen, nicht mehr benötigt
+    myExtension.init ();  
+},falsch);
+
+ +

Referenzen

+ + + +

Sehe auch

+ + diff --git a/files/de/codeschnipsel/scrollbar/index.html b/files/de/codeschnipsel/scrollbar/index.html new file mode 100644 index 0000000000..3fa77ebaf7 --- /dev/null +++ b/files/de/codeschnipsel/scrollbar/index.html @@ -0,0 +1,32 @@ +--- +title: Scrollbar +slug: Codeschnipsel/Scrollbar +translation_of: Archive/Add-ons/Code_snippets/Scrollbar +--- +

Dieses Beispiel zeigt, wie die Scrollbars in einer XUL-Applikation verändert werden können.  Scrollbars im Browser werden auch gestylt.
+(Auf Windows XP getestet)

+

Das Beispiel setzt die folgende Struktur voraus:

+
app/chrome/chrome.manifest
+app/chrome/skin/global/
+
+

Kopieren Sie die scrollbars.css von xulrunner/chrome/classic.jar/skin/classic/global nach app/chrome/skin/global/scrollbars.css

+

Öffnen Sie app/chrome/chrome.manifest und fügen Sie folgende Zeilen hinzu:

+
skin app-global standard/1.0 skin/global/
+override chrome://global/skin/xulscrollbars.css chrome://app-global/skin/scrollbars.css
+
+

xulscrollbars.css wird für Windows XP benutzt, nativescrollbars.css auf OSX. Für OSX, fügen Sie noch folgendes an:

+
override chrome://global/skin/nativescrollbars.css chrome://app-global/skin/scrollbars.css
+
+

Ändern Sie nun ein paar Farbwerte in app/chrome/skin/global/scrollbars.css um zu testen, ob das CSS benutzt wird.

+

Beispielfenster in XUL:

+
<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
+<window id="sampleWindow" width="320" height="240"
+   xmlns="http://www.mozilla.org/keymaster/gat...re.is.only.xul">
+<hbox flex="1">
+   <browser type="content" src="http://mozilla.org" flex="1"/>
+   <scrollbar orient="vertical"/>
+</hbox>
+</window>
+
+

{{ languages( { "en": "en/Code_snippets/Scrollbar" } ) }}

diff --git a/files/de/codeschnipsel/tabbed_browser/index.html b/files/de/codeschnipsel/tabbed_browser/index.html new file mode 100644 index 0000000000..f08d80a7d4 --- /dev/null +++ b/files/de/codeschnipsel/tabbed_browser/index.html @@ -0,0 +1,517 @@ +--- +title: Tabbed browser +slug: Codeschnipsel/Tabbed_browser +translation_of: Archive/Add-ons/Tabbed_browser +--- +

Here you should find a set of useful code snippets to help you work with Firefox's tabbed browser. The comments normally mark where you should be inserting your own code.

+

Each snippet normally includes some code to run at initialization, these are best run using a load listener. These snippets assume they are run in the context of a browser window. If you need to work with tabs from a non-browser window, you need to obtain a reference to one first, see Working with windows in chrome code for details.

+

Multiple meanings for the word 'browser'

+

The word 'browser' is used several ways. Of course the entire application Firefox is called "a browser". Within the Firefox browser are tabs and inside each tab is a browser, both in the common sense of a web page browser and the XUL sense of a {{ XULElem("browser") }} element. Furthermore another meaning of 'browser' in this document and in some Firefox source is "the tabbrowser element" in a Firefox XUL window.

+

Getting access to the browser

+

From main window

+

Code running in Firefox's global ChromeWindow, common for extensions that overlay into browser.xul, can access the {{ XULElem("tabbrowser") }} element using the global variable gBrowser.

+
// gBrowser is only accessible from the scope of
+// the browser window (browser.xul)
+gBrowser.addTab(...);
+
+

If gBrowser isn't defined your code is either not running in the scope of the browser window or running too early. You can access gBrowser only after the browser window is fully loaded. If you need to do something with gBrowser right after the window is opened, listen for the load event and use gBrowser in the event listener.

+

If your code does not have access to the main window because it is run in a sidebar or dialog, you first need to get access to the browser window you need before you can use gBrowser. You can find more information on getting access to the browser window in Working with windows in chrome code.

+

From a sidebar

+

Basically, if your extension code is a sidebar you can use:

+
var mainWindow = window.QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                       .getInterface(Components.interfaces.nsIWebNavigation)
+                       .QueryInterface(Components.interfaces.nsIDocShellTreeItem)
+                       .rootTreeItem
+                       .QueryInterface(Components.interfaces.nsIInterfaceRequestor)
+                       .getInterface(Components.interfaces.nsIDOMWindow);
+
+mainWindow.gBrowser.addTab(...);
+
+

From a dialog

+

If your code is running in a dialog opened directly by a browser window, you can use:

+
window.opener.gBrowser.addTab(...);
+
+

If window.opener doesn't work, you can get the most recent browser window using this code:

+
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var mainWindow = wm.getMostRecentWindow("navigator:browser");
+mainWindow.gBrowser.addTab(...);
+
+

Opening a URL in a new tab

+
// Add tab
+gBrowser.addTab("http://www.google.com/");
+
+// Add tab, then make active
+gBrowser.selectedTab = gBrowser.addTab("http://www.google.com/");
+
+

Manipulating content of a new tab

+

If you want to work on the content of the newly opened tab, you'll need to wait until the content has finished loading.

+
// WRONG WAY (the page hasn't finished loading yet)
+var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
+alert(newTabBrowser.contentDocument.body.innerHTML);
+
+// BETTER WAY
+var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.addTab("http://www.google.com/"));
+newTabBrowser.addEventListener("load", function () {
+  newTabBrowser.contentDocument.body.innerHTML = "<div>hello world</div>";
+}, true);
+
+

(The event target in the onLoad handler will be a 'tab' XUL element). See tabbrowser for getBrowserForTab(). Note that the code above does not work inside of the Electrolysis (e10s) enabled tabs.

+

Opening a URL in the correct window/tab

+

There are methods available in chrome://browser/content/utilityOverlay.js that make it easy to open URL in tabs such as openUILinkIn and openUILink.

+
+
+ openUILinkIn( url, where, allowThirdPartyFixup, postData, referrerUrl )
+
+ where: +
    +
  • "current" current tab (if there aren't any browser windows, then in a new window instead)
    • +
  • "tab" new tab (if there aren't any browser windows, then in a new window instead)
    • +
  • "tabshifted" same as "tab" but in background if default is to select new tabs, and vice versa
    • +
  • "window" new window
    • +
  • "save" save to disk (with no filename hint!)
    • +
+
+
+ openUILink( url, e, ignoreButton, ignoreAlt, allowKeywordFixup, postData, referrerUrl )
+
+  
+
+

The following code will open a URL in a new tab, an existing tab, or an existing window based on which mouse button was pressed and which hotkeys (ex: Ctrl) are being held. The code given is for a {{ XULElem("menuitem") }}, but will work equally well for other XUL elements. This will only work in an overlay of browser.xul.

+

XUL:

+
<menuitem oncommand="myExtension.foo(event)" onclick="checkForMiddleClick(this, event)" label="Click me"/>
+
+

JS:

+
var myExtension = {
+  foo: function(event) {
+    openUILink("http://www.example.com", event, false, true);
+  }
+}
+

Opening a URL in an on demand tab

+
var gSessionStore = Cc["@mozilla.org/browser/sessionstore;1"].getService(Ci.nsISessionStore);
+
+// Create new tab, but don't load the content.
+var url = "https://developer.mozilla.org";
+var tab = gBrowser.addTab(null);
+gSessionStore.setTabState(tab, JSON.stringify({
+  entries: [
+    { url: url, title: url }
+  ],
+  lastAccessed: 0,
+  index: 1,
+  hidden: false,
+  attributes: {},
+  image: null
+}));
+
+

Reusing tabs

+

Rather than open a new browser or new tab each and every time one is needed, it is good practice to try to re-use an existing tab which already displays the desired URL--if one is already open. Following this practice minimizes the proliferation of tabs and browsers created by your extension.

+
Reusing by URL/URI
+

A common feature found in many extensions is to point the user to chrome:// URIs in a browser window (for example, help or about information) or external (on-line http(s)://) HTML documents when the user clicks an extension's button or link. The following code demonstrates how to re-use an existing tab that already displays the desired URL/URI. If no such tab exists, a new one is opened with the specified URL/URI.

+
function openAndReuseOneTabPerURL(url) {
+  var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                     .getService(Components.interfaces.nsIWindowMediator);
+  var browserEnumerator = wm.getEnumerator("navigator:browser");
+
+  // Check each browser instance for our URL
+  var found = false;
+  while (!found && browserEnumerator.hasMoreElements()) {
+    var browserWin = browserEnumerator.getNext();
+    var tabbrowser = browserWin.gBrowser;
+
+    // Check each tab of this browser instance
+    var numTabs = tabbrowser.browsers.length;
+    for (var index = 0; index < numTabs; index++) {
+      var currentBrowser = tabbrowser.getBrowserAtIndex(index);
+      if (url == currentBrowser.currentURI.spec) {
+
+        // The URL is already opened. Select this tab.
+        tabbrowser.selectedTab = tabbrowser.tabContainer.childNodes[index];
+
+        // Focus *this* browser-window
+        browserWin.focus();
+
+        found = true;
+        break;
+      }
+    }
+  }
+
+  // Our URL isn't open. Open it now.
+  if (!found) {
+    var recentWindow = wm.getMostRecentWindow("navigator:browser");
+    if (recentWindow) {
+      // Use an existing browser window
+      recentWindow.delayedOpenTab(url, null, null, null, null);
+    }
+    else {
+      // No browser windows are open, so open a new one.
+      window.open(url);
+    }
+  }
+}
+
+
Reusing by other criteria
+

Sometimes you want to reuse a previously-opened tab regardless of which URL/URI it displays. This assumes the tab is opened by your extension, not by some other browser component. We can do re-use an arbitrary tab by attaching a custom attribute to it when we first open it. Later, when we want to re-use that tab, we iterate over all open tabs looking for one which has our custom attribute. If such a tab exists, we change its URL/URI and focus/select it. If no such tab exists (perhaps the user closed it or we never opened it in the first place), we create a new tab with our custom attribute.

+
function openAndReuseOneTabPerAttribute(attrName, url) {
+  var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                     .getService(Components.interfaces.nsIWindowMediator);
+  for (var found = false, index = 0, tabbrowser = wm.getEnumerator('navigator:browser').getNext().gBrowser;
+       index < tabbrowser.tabContainer.childNodes.length && !found;
+       index++) {
+
+    // Get the next tab
+    var currentTab = tabbrowser.tabContainer.childNodes[index];
+
+    // Does this tab contain our custom attribute?
+    if (currentTab.hasAttribute(attrName)) {
+
+      // Yes--select and focus it.
+      tabbrowser.selectedTab = currentTab;
+
+      // Focus *this* browser window in case another one is currently focused
+      tabbrowser.ownerDocument.defaultView.focus();
+      found = true;
+    }
+  }
+
+  if (!found) {
+    // Our tab isn't open. Open it now.
+    var browserEnumerator = wm.getEnumerator("navigator:browser");
+    var tabbrowser = browserEnumerator.getNext().gBrowser;
+
+    // Create tab
+    var newTab = tabbrowser.addTab(url);
+    newTab.setAttribute(attrName, "xyz");
+
+    // Focus tab
+    tabbrowser.selectedTab = newTab;
+
+    // Focus *this* browser window in case another one is currently focused
+    tabbrowser.ownerDocument.defaultView.focus();
+  }
+}
+
+

The function can be called like so:

+
openAndReuseOneTabPerAttribute("myextension-myattribute", "http://developer.mozilla.org/").
+
+

Closing a tab

+

This example closes the currently selected tab.

+
gBrowser.removeCurrentTab();
+
+

There is also a more generic removeTab method, which accepts a XUL {{ XULElem("tab") }} element as its single parameter.

+

Changing active tab

+

This moves one tab forward (to the right).

+
gBrowser.tabContainer.advanceSelectedTab(1, true);
+
+

This moves one tab to the left.

+
gBrowser.tabContainer.advanceSelectedTab(-1, true);
+
+

Detecting page load

+

See also Code snippets:On page load

+
function examplePageLoad(event) {
+  if (event.originalTarget instanceof Components.interfaces.nsIDOMHTMLDocument) {
+    var win = event.originalTarget.defaultView;
+    if (win.frameElement) {
+      // Frame within a tab was loaded. win should be the top window of
+      // the frameset. If you don't want do anything when frames/iframes
+      // are loaded in this web page, uncomment the following line:
+      // return;
+      // Find the root document:
+      win = win.top;
+    }
+  }
+}
+
+// do not try to add a callback until the browser window has
+// been initialised. We add a callback to the tabbed browser
+// when the browser's window gets loaded.
+window.addEventListener("load", function () {
+  // Add a callback to be run every time a document loads.
+  // note that this includes frames/iframes within the document
+  gBrowser.addEventListener("load", examplePageLoad, true);
+}, false);
+
+...
+// When no longer needed
+gBrowser.removeEventListener("load", examplePageLoad, true);
+...
+
+

Notification when a tab is added or removed

+
function exampleTabAdded(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been added
+}
+
+function exampleTabMoved(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been moved
+}
+
+function exampleTabRemoved(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been removed
+}
+
+// During initialization
+var container = gBrowser.tabContainer;
+container.addEventListener("TabOpen", exampleTabAdded, false);
+container.addEventListener("TabMove", exampleTabMoved, false);
+container.addEventListener("TabClose", exampleTabRemoved, false);
+
+// When no longer needed
+container.removeEventListener("TabOpen", exampleTabAdded, false);
+container.removeEventListener("TabMove", exampleTabMoved, false);
+container.removeEventListener("TabClose", exampleTabRemoved, false);
+
+
+

Note: Starting in {{Gecko("1.9.1") }}, there's an easy way to listen on progress events on all tabs.

+
+

{{ h2_gecko_minversion("Notification when a tab's attributes change", "2.0") }}

+

Starting in Gecko 2.0, you can detect when a tab's attributes change by listening for the TabAttrModified event. The attributes to which changes result in this event being sent are:

+ +
function exampleTabAttrModified(event) {
+  var tab = event.target;
+  // Now you can check what's changed on the tab
+}
+
+// During initialization
+var container = gBrowser.tabContainer;
+container.addEventListener("TabAttrModified", exampleTabAttrModified, false);
+
+// When no longer needed
+container.removeEventListener("TabAttrModified", exampleTabAttrModified, false);
+
+

{{ h2_gecko_minversion("Notification when a tab is pinned or unpinned", "2.0") }}

+

Starting in Gecko 2.0, tabs can be "pinned"; that is, they become special application tabs ("app tabs"), which are pinned to the beginning of the tab bar, and show only the favicon. You can detect when a tab becomes pinned or unpinned by watching for the TabPinned and TabUnpinned events.

+
function exampleTabPinned(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been pinned
+}
+
+function exampleTabUnpinned(event) {
+  var browser = gBrowser.getBrowserForTab(event.target);
+  // browser is the XUL element of the browser that's been pinned
+}
+
+// Initialization
+
+var container = gBrowser.tabContainer;
+container.addEventListener("TabPinned", exampleTabPinned, false);
+container.addEventListener("TabUnpinned", exampleTabUnpinned, false);
+
+// When no longer needed
+
+container.removeEventListener("TabPinned", exampleTabPinned, false);
+container.removeEventListener("TabUnpinned", exampleTabUnpinned, false);
+
+

Detecting tab selection

+

The following code allows you to detect when a new tab is selected in the browser:

+
function exampleTabSelected(event) {
+  var browser = gBrowser.selectedBrowser;
+  // browser is the XUL element of the browser that's just been selected
+}
+
+// During initialisation
+var container = gBrowser.tabContainer;
+container.addEventListener("TabSelect", exampleTabSelected, false);
+
+// When no longer needed
+container.removeEventListener("TabSelect", exampleTabSelected, false);
+
+

Getting document of currently selected tab

+

The following code allows you to retrieve the document that is in the selected tab. This code will work in the scope of the browser window (e.g. you're working from an overlay to the browser window).

+
gBrowser.contentDocument;
+
+

or

+
content.document
+
+

If you're working from a window or dialog that was opened by the browser window, you can use this code to get the document displayed in the selected tab in the browser window that opened the new window or dialog.

+
window.opener.content.document
+
+

From windows or dialogs not opened by the browser window, you can use {{ interface("nsIWindowMediator") }} to get the document displayed in the selected tab of the most recently used browser window.

+
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                   .getService(Components.interfaces.nsIWindowMediator);
+var recentWindow = wm.getMostRecentWindow("navigator:browser");
+return recentWindow ? recentWindow.content.document.location : null;
+
+

See also Working with windows in chrome code.

+

Enumerating browsers

+

To go through all browser in a tabbrowser, first get a reference to a browser's window. If your code is executed from a Firefox browser.xul overlay (for example, it is a toolbar button or menu click handler), you can access the current window with the window pre-defined variable. However, if your code is executed from its own window (for example, a settings/options dialog), you can use {{ interface("nsIWindowMediator") }} to get a browser's window.

+

Next, get the <tabbrowser/> element. You can get it with win.gBrowser, where win is the browser's window from the previous step. You can use simply gBrowser instead of window.gBrowser if running in the context of a browser.xul overlay.

+

Finally, use gBrowser.browsers.length to get the number of browsers and gBrowser.getBrowserAtIndex() to get a <browser/> element. For example:

+
var num = gBrowser.browsers.length;
+for (var i = 0; i < num; i++) {
+  var b = gBrowser.getBrowserAtIndex(i);
+  try {
+    dump(b.currentURI.spec); // dump URLs of all open tabs to console
+  } catch(e) {
+    Components.utils.reportError(e);
+  }
+}
+

To learn what methods are available for <browser/> and <tabbrowser/> elements, use DOM Inspector or look in {{ source("toolkit/content/widgets/browser.xml","browser.xml") }} for corresponding XBL bindings (or just look at the current reference pages on {{ XULElem("browser") }} and {{ XULElem("tabbrowser") }}.

+

Getting the browser that fires the http-on-modify-request notification

+

See the Observer notifications page for information on http-on-* notifications.

+

Note that some HTTP requests aren't associated with a tab; for example, RSS feed updates, extension manager requests, XHR requests from XPCOM components, etc. In those cases, the following code returns null.

+
+ Warning: This code should be updated to use {{interface("nsILoadContext")}} instead of getInterface(Components.interfaces.nsIDOMWindow), see this example..UPDATED EXAMPLE IS IN SECTION BELOW THIS
+
observe: function (subject, topic, data) {
+  if (topic == "http-on-modify-request") {
+    subject.QueryInterface(Components.interfaces.nsIHttpChannel);
+    var url = subject.URI.spec; /* url being requested. you might want this for something else */
+    var browser = this.getBrowserFromChannel(subject);
+    if (browser != null) {
+      /* do something */
+    }
+  }
+},
+
+getBrowserFromChannel: function (aChannel) {
+  try {
+    var notificationCallbacks =
+      aChannel.notificationCallbacks ? aChannel.notificationCallbacks : aChannel.loadGroup.notificationCallbacks;
+
+    if (!notificationCallbacks)
+      return null;
+
+    var domWin = notificationCallbacks.getInterface(Components.interfaces.nsIDOMWindow);
+    return gBrowser.getBrowserForDocument(domWin.top.document);
+  }
+  catch (e) {
+    dump(e + "\n");
+    return null;
+  }
+}
+
+

Getting the browser that fires the http-on-modify-request notification (example code updated for loadContext)

+

Here an example of the previous section is shown. The previous section was left intact so people can see the old way of doing things.

+
Components.utils.import('resource://gre/modules/Services.jsm');
+Services.obs.addObserver(httpObs, 'http-on-modify-request', false);
+//Services.obs.removeObserver(httpObs, 'http-on-modify-request'); //uncomment this line, or run this line when you want to remove the observer
+
+var httpObs = {
+    observe: function (aSubject, aTopic, aData) {
+        if (aTopic == 'http-on-modify-request') {
+            /*start - do not edit here*/
+            var oHttp = aSubject.QueryInterface(Components.interfaces.nsIHttpChannel); //i used nsIHttpChannel but i guess you can use nsIChannel, im not sure why though
+            var interfaceRequestor = oHttp.notificationCallbacks.QueryInterface(Components.interfaces.nsIInterfaceRequestor);
+            //var DOMWindow = interfaceRequestor.getInterface(Components.interfaces.nsIDOMWindow); //not to be done anymore because: https://developer.mozilla.org/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request //instead do the loadContext stuff below
+            var loadContext;
+            try {
+                loadContext = interfaceRequestor.getInterface(Components.interfaces.nsILoadContext);
+            } catch (ex) {
+                try {
+                    loadContext = aSubject.loadGroup.notificationCallbacks.getInterface(Components.interfaces.nsILoadContext);
+                    //in ff26 aSubject.loadGroup.notificationCallbacks was null for me, i couldnt find a situation where it wasnt null, but whenever this was null, and i knew a loadContext is supposed to be there, i found that "interfaceRequestor.getInterface(Components.interfaces.nsILoadContext);" worked fine, so im thinking in ff26 it doesnt use aSubject.loadGroup.notificationCallbacks anymore, but im not sure
+                } catch (ex2) {
+                    loadContext = null;
+                    //this is a problem i dont know why it would get here
+                }
+            }
+            /*end do not edit here*/
+            /*start - do all your edits below here*/
+            var url = oHttp.URI.spec; //can get url without needing loadContext
+            if (loadContext) {
+                var contentWindow = loadContext.associatedWindow; //this is the HTML window of the page that just loaded
+                //aDOMWindow this is the firefox window holding the tab
+                var aDOMWindow = contentWindow.top.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIWebNavigation).QueryInterface(Ci.nsIDocShellTreeItem).rootTreeItem.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindow);
+                var gBrowser = aDOMWindow.gBrowser; //this is the gBrowser object of the firefox window this tab is in
+                var aTab = gBrowser._getTabForContentWindow(contentWindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, aTab.linkedBrowser is same as browser var above //can stylize tab like aTab.style.backgroundColor = 'blue'; //can stylize the tab like aTab.style.fontColor = 'red';
+                var browser = aTab.linkedBrowser; //this is the browser within the tab //this is what the example in the previous section gives
+                //end getting other useful stuff
+            } else {
+                Components.utils.reportError('EXCEPTION: Load Context Not Found!!');
+                //this is likely no big deal as the channel proably has no associated window, ie: the channel was loading some resource. but if its an ajax call you may end up here
+            }
+        }
+    }
+};
+
+

Here's a cleaner example of the same thing:

+
Cu.import('resource://gre/modules/Services.jsm');
+
+var httpRequestObserver = {
+    observe: function (subject, topic, data) {
+        var httpChannel, requestURL;
+
+        if (topic == "http-on-modify-request") {
+            httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);
+            requestURL = httpChannel.URI.spec;
+
+            var newRequestURL, i;
+
+            if (/someurl/.test(requestURL)) {
+                var goodies = loadContextGoodies(httpChannel);
+                if (goodies) {
+                    httpChannel.cancel(Cr.NS_BINDING_ABORTED);
+                    goodies.contentWindow.location = self.data.url('pages/test.html');
+                } else {
+                    //dont do anything as there is no contentWindow associated with the httpChannel, liekly a google ad is loading or some ajax call or something, so this is not an error
+                }
+            }
+
+            return;
+        }
+    }
+};
+Services.obs.addObserver(httpRequestObserver, "http-on-modify-request", false);
+
+
+
+
+
+//this function gets the contentWindow and other good stuff from loadContext of httpChannel
+function loadContextGoodies(httpChannel) {
+    //httpChannel must be the subject of http-on-modify-request QI'ed to nsiHTTPChannel as is done on line 8 "httpChannel = subject.QueryInterface(Ci.nsIHttpChannel);"
+    //start loadContext stuff
+    var loadContext;
+    try {
+        var interfaceRequestor = httpChannel.notificationCallbacks.QueryInterface(Ci.nsIInterfaceRequestor);
+        //var DOMWindow = interfaceRequestor.getInterface(Components.interfaces.nsIDOMWindow); //not to be done anymore because: https://developer.mozilla.org/en-US/docs/Updating_extensions_for_Firefox_3.5#Getting_a_load_context_from_a_request //instead do the loadContext stuff below
+        try {
+            loadContext = interfaceRequestor.getInterface(Ci.nsILoadContext);
+        } catch (ex) {
+            try {
+                loadContext = subject.loadGroup.notificationCallbacks.getInterface(Ci.nsILoadContext);
+            } catch (ex2) {}
+        }
+    } catch (ex0) {}
+
+    if (!loadContext) {
+        //no load context so dont do anything although you can run this, which is your old code
+        //this probably means that its loading an ajax call or like a google ad thing
+        return null;
+    } else {
+        var contentWindow = loadContext.associatedWindow;
+        if (!contentWindow) {
+            //this channel does not have a window, its probably loading a resource
+            //this probably means that its loading an ajax call or like a google ad thing
+            return null;
+        } else {
+            var aDOMWindow = contentWindow.top.QueryInterface(Ci.nsIInterfaceRequestor)
+                .getInterface(Ci.nsIWebNavigation)
+                .QueryInterface(Ci.nsIDocShellTreeItem)
+                .rootTreeItem
+                .QueryInterface(Ci.nsIInterfaceRequestor)
+                .getInterface(Ci.nsIDOMWindow);
+            var gBrowser = aDOMWindow.gBrowser;
+            var aTab = gBrowser._getTabForContentWindow(contentWindow.top); //this is the clickable tab xul element, the one found in the tab strip of the firefox window, aTab.linkedBrowser is same as browser var above //can stylize tab like aTab.style.backgroundColor = 'blue'; //can stylize the tab like aTab.style.fontColor = 'red';
+            var browser = aTab.linkedBrowser; //this is the browser within the tab //this is where the example in the previous section ends
+            return {
+                aDOMWindow: aDOMWindow,
+                gBrowser: gBrowser,
+                aTab: aTab,
+                browser: browser,
+                contentWindow: contentWindow
+            };
+        }
+    }
+    //end loadContext stuff
+}
+

{{ languages( { "fr": "fr/Extraits_de_code/Onglets_de_navigation", "ja": "ja/Code_snippets/Tabbed_browser", "pl": "pl/Fragmenty_kodu/Przegl\u0105danie_w_kartach" } ) }}

diff --git a/files/de/codeschnipsel/tree/index.html b/files/de/codeschnipsel/tree/index.html new file mode 100644 index 0000000000..95ae8ed107 --- /dev/null +++ b/files/de/codeschnipsel/tree/index.html @@ -0,0 +1,69 @@ +--- +title: Tree +slug: Codeschnipsel/Tree +translation_of: Archive/Add-ons/Code_snippets/Tree +--- +

Aufklappen/Zuklappen aller Baumknoten

+

Um alle Baumknoten aufzuklappen:

+
 var treeView = tree.treeBoxObject.view;
+ for (var i = 0; i < treeView.rowCount; i++) {
+   if (treeView.isContainer(i) && !treeView.isContainerOpen(i))
+     treeView.toggleOpenState(i);
+ }
+
+

Um alle Baumknoten zu zuklappen, wird die Bedingung einfach umgekehrt:

+
 var treeView = tree.treeBoxObject.view;
+ for (var i = 0; i < treeView.rowCount; i++) {
+   if (treeView.isContainer(i) && treeView.isContainerOpen(i))
+     treeView.toggleOpenState(i);
+ }
+
+

Text der ausgewählten Zeile abrufen

+

Ausgehend von gegebenem Baum:

+
 <tree id="my-tree" seltype="single" onselect="onTreeSelected()">
+
+

Wird das folgende JavaScript verwendet:

+
 function onTreeSelected(){
+   var tree = document.getElementById("my-tree");
+   var cellIndex = 0;
+   var cellText = tree.view.getCellText(tree.currentIndex, tree.columns.getColumnAt(cellIndex));
+   alert(cellText);
+ }
+
+

Das Baum-Item einer fokussierten Zeile abrufen

+

Ausgehend von <tree id="my-tree">, kann der folgende Codeausschnitt verwendet werden, um das tree item abzurufen:

+
var view = document.getElementById("my-tree").view;
+var sel = view.selection.currentIndex; //returns -1 if the tree is not focused
+var treeItem = view.getItemAtIndex(sel);
+
+

Zu beachten ist, dass der aktuelle Index unter Umständen nicht ausgewählt sein (z.B. in einem Baum mit mehrfach-Auswahl).

+

Einen treecell von einem Mausklick abrufen

+

Die erste Wahl ist <treecell onclick="yourfunc();"/> oder etwas ähnliches auszuprobieren. das funktioniert nicht. Es können keine Event-Handler zum <treecell> Element hinzugefügt werden. Stattdessen kann ein Event-Handler zum <tree> Element hinzugefügt werden. Dann können event- und andere Methoden benutzt werden, um das <treecell> Element zu finden. Zum Beispiel, ausgehend von:

+
<tree id="my-tree" onclick="onTreeClicked(event)">
+
+

Wird das folgende JavaScript verwendet:

+
function onTreeClicked(event){
+  var tree = document.getElementById("my-tree");
+  var tbo = tree.treeBoxObject;
+
+  // get the row, col and child element at the point
+  var row = { }, col = { }, child = { };
+  tbo.getCellAt(event.clientX, event.clientY, row, col, child);
+
+  var cellText = tree.view.getCellText(row.value, col.value);
+  alert(cellText);
+}
+
+

Ausgewählte Indizes eines mehrfach ausgewählten Baumes abrufen

+
  var start = {}, end = {}, numRanges = tree.view.selection.getRangeCount(), selectedIndices = [];
+
+  for (var t = 0; t < numRanges; t++){
+    tree.view.selection.getRangeAt(t, start, end);
+    for (var v = start.value; v <= end.value; v++)
+      selectedIndices.push(v);
+  }
+
+

Weitere Ressourcen

+ +

{{ languages( { "fr": "fr/Extraits_de_code/Tree", "en": "en/Code_snippets/Tree" } ) }}

diff --git a/files/de/codeschnipsel/windows/index.html b/files/de/codeschnipsel/windows/index.html new file mode 100644 index 0000000000..6da2289604 --- /dev/null +++ b/files/de/codeschnipsel/windows/index.html @@ -0,0 +1,60 @@ +--- +title: Windows +slug: Codeschnipsel/Windows +tags: + - Add-ons + - Erweiterungen +translation_of: Archive/Add-ons/Code_snippets/Windows +--- +

Diese Seite zeigt einige interessante Codebeispiele.

+

Neue Browser-Fenster öffnen

+

Um ein neues Browser-Fenster zu öffnen, wird einfach window.open() benutzt. Jedoch gibt window.open() ein Window Objekt für den Inhalt zurück, nicht für das Browser-Fenster selbst, deshalb sollte man sich das Chrome Window zuerst holen. Der einfachste Weg das zu machen, ist nsIWindowMediator zu benutzen.

+

Beispiel

+
window.open();
+var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"]
+                            .getService(Components.interfaces.nsIWindowMediator);
+var newWindow = wm.getMostRecentWindow("navigator:browser");
+var b = newWindow.getBrowser();
+// why did we do this? we never do anything with |b|
+
+

Ziehbare Fenster

+

Um ein Fenster durch das Klicken auf die Fensterinhalte ziehbar zu machen, können die mousedown und mousemove Ereignisse verwendet werden. Der folgende Code berücksichtigt nicht, welches Element angeklickt wurde, sondern reagiert auf alle mousedown Ereignisse gleich. Dieser Code kann verbessert werden, indem das  Zielelements des Ereignisses überprüft wird und startPos nur festgelegt wird, wenn das Element den Kriterien entspricht.

+

Beispiel

+
var startPos=0;
+var mouseDown = function(event) {
+  startPos = [ event.clientX, event.clientY];
+}
+var mouseMove = function(event) {
+  if (startPos != 0) {
+    var newX = event.screenX-startPos[0];
+    var newY = event.screenY-startPos[1];
+    window.moveTo(newX,newY);
+  }
+}
+var mouseUp = function(event) {
+  startPos=0;
+}
+
+window.addEventListener("mousedown",mouseDown, false);
+window.addEventListener("mouseup",mouseUp, false);
+window.addEventListener("mousemove",mouseMove, false);
+
+

XUL Titelleistenelement

+

XUL Anwendungen können Vorteile aus dem Titlebar Element ziehen, um ein ähnliche Ergebnisse ohne extra JavaScript Code zu erzielen.

+

Wiederbenutzung und Fokussierung von benannten Fenstern

+

Dieser Abschnitt ist inkorrekt und muss neu geschrieben werden. Siehe nsIWindowMediator für eine korrekte Dokumentation.

+
+

Während eine Festlegung des name Parameters bei window.open oder window.openDialog verhindert, dass mehrere Fenster geöffnet werden, wird jeder Aufruf das Fenster Wiederinitialisieren und daher geht alles, was der Benutzer in diesem Fenster gerade getan hat, verloren. Zusätzlich wird es nicht im Vordergrund angezeigt, wenn das Fenster im Hintergrund ist. Dieser Code prüft, ob ein Fenster mit dem gegebenen Namen existiert. Wird eines gefunden, wird es fokussiert. Wenn nicht, wird ein Neues geöffnet.

+
var windowName = "yourWindowName";
+var windowsMediator = Components.classes["@mozilla.org/appshell/window-mediator;1"].getService(Components.interfaces.nsIWindowMediator);
+var win = windowsMediator.getMostRecentWindow(windowName);
+if (win)
+  win.focus();
+else
+  window.open("chrome://to/your/window.xul", windowName, "features");
+
+
+

Siehe auch

+ +

{{ languages( {"en": "en/Code_snippets/Windows", "fr": "fr/Extraits_de_code/Fen\u00eatres", "ja": "ja/Code_snippets/Windows", "pl": "pl/Fragmenty_kodu/Okna" } ) }}

diff --git a/files/de/css3_columns/index.html b/files/de/css3_columns/index.html new file mode 100644 index 0000000000..8ca450b7c2 --- /dev/null +++ b/files/de/css3_columns/index.html @@ -0,0 +1,63 @@ +--- +title: CSS3 Spalten +slug: CSS3_Columns +tags: + - CSS + - CSS3 +translation_of: Web/CSS/CSS_Columns/Using_multi-column_layouts +--- +

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

+ +

{{ HTML5ArticleTOC() }}

+

{{ languages( { "en": "en/CSS/CSS3_Columns", "es": "es/Columnas_con_CSS-3", "fr": "fr/Colonnes_CSS3", "it": "it/Le_Colonne_nei_CSS3", "ja": "ja/CSS3_Columns", "ko": "ko/CSS3_Columns", "pl": "pl/Kolumny_CSS3" } ) }}

diff --git a/files/de/dom/index.html b/files/de/dom/index.html new file mode 100644 index 0000000000..cdaeb8ca8a --- /dev/null +++ b/files/de/dom/index.html @@ -0,0 +1,65 @@ +--- +title: DOM +slug: DOM +tags: + - DOM +translation_of: Web/API/Document_Object_Model +--- +
Verwendung des W3C DOM Level 1
+Einführung in das W3C 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.
+
+ +

Alle zeigen...

+ 		+

Community

+ +
    +
  • Mozillas DOM Foren:{{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+ +

Tools

+ + + + + + +
+ +

 

diff --git a/files/de/dom/ueber_das_document_object_model/index.html b/files/de/dom/ueber_das_document_object_model/index.html new file mode 100644 index 0000000000..8f3a9b0bb8 --- /dev/null +++ b/files/de/dom/ueber_das_document_object_model/index.html @@ -0,0 +1,22 @@ +--- +title: Über das Document Object Model +slug: DOM/Ueber_das_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +--- +

Was ist das DOM?

+ +

Das Document Object Model ist eine API für HTML- und XML-Dokumente. Es bildet die strukturelle Repräsentation des Dokumentes und ermöglicht dir, dessen Inhalt und visuelle Darstellung zu verändern. Im Wesentlichen verbindet es Webseiten mit Scripts oder Programmiersprachen.

+ +

Alle Eigenschaften, Methoden und Events, die dem Webentwickler zum Manipulieren und Erstellen von Webseiten zur Verfügung stehen, sind organisiert in Objekten (z. B. dem Document-Objekt, welches das Dokument selbst repräsentiert, dem Table-Objekt, welches HTML table-Elemente repräsentiert, usw.). Auf solche Objekte kann in modernen Webbrowsern mit Scriptsprachen zugegriffen werden.

+ +

Das DOM wird meistens in Verbindung mit JavaScript verwendet. Das bedeutet, dass der Code in JavaScript geschrieben ist und das DOM benutzt, um auf die Webseite und dessen Elemente zuzugreifen. Nichtsdestotrotz wurde das DOM entwickelt, unabhängig von einer bestimmten Programmiersprache zu sein, was die strukturelle Repräsentation des Dokumentes von einer einzelnen, konsistenten API zugänglich macht. Auch wenn der Fokus dieser Seite durchgehend auf JavaScript liegt, sind Realisierungen in jeder Sprache möglich.

+ +

Das World Wide Web Consortium hat einen Standard für das DOM eingeführt, namens W3C DOM. Es ermöglicht – da es mittlerweile von den meisten Browsern korrekt umgesetzt wird – mächtige Cross-Browser-Anwendungen.

+ +

Warum ist die DOM-Unterstützung in Mozilla wichtig?

+ +

„Dynamic HTML“ (DHTML) ist ein Begriff, der von manchen benutzt wird, um die Kombination aus HTML, Stylesheets und Scripts, die es ermöglichen, Dokumente zu animieren, zu beschreiben. Die W3C DOM Gruppe arbeitet hart daran, sicherzustellen, dass für die Zusammenarbeit geeignete und Sprach-unabhängige Lösungen vereinbart werden (siehe auch W3C FAQ). Da Mozilla den Titel „Web Application Platform“ beansprucht, ist die Unterstützung des DOM eines der am häufigsten angefragten Features und zugleich ein notwendiges, wenn Mozilla eine tragfähige Alternative zu den anderen Browsern sein will.

+ +

Noch wichtiger ist die Tatsache, dass das User Interface von Mozilla (sowie Firefox und Thunderbird) in XUL aufgebaut ist – einer XML-User Interface-Sprache. Somit benutzt Mozilla den DOM um das eigene UI zu manipulieren.

diff --git a/files/de/dom_inspector/index.html b/files/de/dom_inspector/index.html new file mode 100644 index 0000000000..20c3654c81 --- /dev/null +++ b/files/de/dom_inspector/index.html @@ -0,0 +1,89 @@ +--- +title: DOM Inspector +slug: DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector +--- +
{{ToolsSidebar}}

Der DOM Inspector (auch bekannt als DOMi) ist ein Entwicklertool, das zum Besichtigen, Durchsuchen und Editieren des Document Object Model von Dokumenten benutzt wird  - normalerweise Websiten oder XUL Fenster. Die DOM Hierarchie kann mit Hilfe eines zweigeteilten Fensters navigiert werden, welches die Vielfalt von verschiedenen Ansichten auf das Dokument und alle darin enthaltenen Nodes erlaubt.

+ + + + + + + + +
+

Dokumentation

+ +
+
Einführung in den DOM Inspector
+
Ein geführtes Tutorials, welches beim Einstieg in den DOM Inspector hilft.
+
+ +
+
DOM Inspector FAQ
+
Antworten zu den verbreitesten Fragen bezüglich des DOM Inspectors.
+
+ +
+
DOM Inspector Seite auf MozillaZine
+
Mehr Informationen zum DOM Inspector.
+
+ +

Erhalte DOM Inspector

+ +
+
Firefox & Thunderbird
+
Der DOM Inspector muss von der AMO Website gedownloadet  und installiert werden. (Thunderbird Benutzer, welche die AMO Website in Firefox öffnen sollten den Installationslink speichern, oder die DOM Inspector für Thunderbird Seite besuchen.)
+
+ +
+
Thunderbird 2
+
DOM Inspector für Thunderbird 2 ist auf Thunderbird Add-ons verfügbar. Oder, konstruiere deinen Thunderbird selbst mit den folgenden Optionen:
+
+ + 
+ac_add_options --enable-extensions="default inspector"
+ac_add_options --enable-inspector-apis
+
+ +
+
Mozilla Suite and SeaMonkey
+
Wähle Extras > Web-Entwickler > DOM Inspector. Du kannst die Sidebar mit Bearbeiten > Bevorzugung > Erweitert > DOM Inspector installieren, danach einfach das Inspector Panel öffnen und eine Website besuchen.
+
+ 		+

Gemeinschaft

+ +
    +
  • View Mozilla forums...
    • +
  • {{ DiscussionList("dev-apps-dom-inspector", "mozilla.dev.apps.dom-inspector") }}
    • +
+ +

Melde einen Fehler im DOM Inspector

+ +

Benutze die passend benannte "DOM Inspector" Komponente in Bugzilla.

+ +

Um herauszufinden, wer den DOM Inspector Code kennt und wo es lebt, siehe die DOM Inspector Module Auflistung.

+ +

Siehe auch

+ +

Firebug ist ein funktionalere und einfachere Erweiterung von den Ersteller des DOM Inspectors.

+ + + +
+
DOM, HTML, XUL, Web Entwicklung
+
+
+ +
+

Original Document Information

+ + +
+ +

{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}

diff --git a/files/de/dragdrop/index.html b/files/de/dragdrop/index.html new file mode 100644 index 0000000000..50bf61f9e2 --- /dev/null +++ b/files/de/dragdrop/index.html @@ -0,0 +1,10 @@ +--- +title: DragDrop +slug: DragDrop +tags: + - NeedsTranslation + - TopicStub +translation_of: Web/API/HTML_Drag_and_Drop_API +--- +

 

+

See https://developer.mozilla.org/en-US/docs/DragDrop/Drag_and_Drop

diff --git a/files/de/e4x/index.html b/files/de/e4x/index.html new file mode 100644 index 0000000000..ad71bd2778 --- /dev/null +++ b/files/de/e4x/index.html @@ -0,0 +1,57 @@ +--- +title: E4X +slug: E4X +tags: + - E4X + - JXON + - JavaScript + - NeedsEditorialReview + - NeedsTechnicalReview + - NeedsTranslation + - TopicStub + - XML +translation_of: Archive/Web/E4X +--- +
+ {{obsolete_header()}}
+
+  
+
+ {{ Warning("E4X is obsolete. It has been disabled by default for webpages (content) in Firefox 17, disabled by default for chrome in Firefox 20, and has been removed in Firefox 21. Use DOMParser/DOMSerializer or a non-native JXON algorithm instead.") }}
+

ECMAScript for XML (E4X) is a programming language extension that adds native XML support to JavaScript. It does this by providing access to the XML document in a form that feels natural for ECMAScript programmers. The goal is to provide an alternative, simpler syntax for accessing XML documents than via DOM interfaces. A valid alternative to E4X is a non-native JXON algorithm.

+

E4X is standardized by Ecma International in ECMA-357 standard (currently in its second edition, December 2005).

+

E4X is implemented (at least partially) in SpiderMonkey (Gecko's JavaScript engine) and in Rhino (JavaScript engine written in Java).

+

 

+
+ Note: In Gecko 1.8 based browsers such as Firefox 1.5, E4X is already partially enabled for web page authors. To fully enable E4X, the <script> element needs to have the MIME type "text/javascript;e4x=1" (i.e. have an attribute of the form type="text/javascript;e4x=1"). The difference between the two modes is that without the "e4x=1" MIME type, any statement-level XML/HTML comment literals (<!--...-->) are ignored for backwards compatibility with the comment hiding trick, and CDATA sections (<![CDATA{{ mediawiki.external('...') }}]>) are not parsed as CDATA literals (which leads to a JS syntax error in HTML since HTML's <script> element produces an implicit CDATA section, and therefore cannot contain explicit CDATA sections). +

someone verify the above

+
+

Known bugs and limitations

+ +

Workaround:

+
var response = xmlhttprequest.responseText; // bug 270553
+response = response.replace(/^<\?xml\s+version\s*=\s*(["'])[^\1]+\1[^?]*\?>/, ""); // bug 336551
+var e4x = new XML(response);
+
+

Resources

+ +

See also

+ +

{{ languages( { "es": "es/E4X", "fr": "fr/E4X", "it": "it/E4X", "ja": "ja/E4X", "ko": "ko/E4X", "pl": "pl/E4X" } ) }}

diff --git a/files/de/e4x/processing_xml_with_e4x/index.html b/files/de/e4x/processing_xml_with_e4x/index.html new file mode 100644 index 0000000000..d9fb98a785 --- /dev/null +++ b/files/de/e4x/processing_xml_with_e4x/index.html @@ -0,0 +1,256 @@ +--- +title: XML verarbeiten mit E4X +slug: E4X/Processing_XML_with_E4X +translation_of: Archive/Web/E4X/Processing_XML_with_E4X +--- +

{{ Warning("E4X ist veraltet. Es wurde in Firefox 17 standardmäßig abgeschaltet und aus Firefox 21 schließlich vollständig entfernt.  Benutzen Sie statt dessen DOMParser/DOMSerializer oder ein anderes JXON Verfahren.") }}

+

E4X erweitert JavaScript ab Version 1.6 um ein natives XML Objekt und eine Syntax, mit der XML Dokumente direkt in JavaScript Code eingebettet werden können.

+

Eine vollständige Definition von E4X findet sich in der ECMA-357 Spezifikation. Dieses Kapitel liefert einen praxisbezogenen Überblick und ist nicht als Referenz gedacht.

+

Kompatibilitätsaspekte

+

Als das  <script> Element noch nicht von allen Browsern unterstützt wurde, war es üblich, auf einer HTML Seite eingebettetes JavaScript in HTML Kommentare einzuschließen, um so die Anzeige des JavaScript Code durch ungeeignete Browser zu verhindern.  Diese Vorgehensweise ist inzwischen unnötig, aber es existieren noch viele solche HTML-Seiten.  Deshalb ignoriert E4X standardmäßig Kommentare und CDATA Abschnitte.  Sie können jedoch e4x=1 im <script> Element verwenden, wenn Sie diese Einschränkung aufheben wollen:

+
<script type="text/javascript;e4x=1">
+...
+</script>
+
+

Ein XML Objekt erzeugen

+

E4X bietet im Wesentlichen zwei Wege zum Erzeugen eines XML Objekts an.  Beim ersten wird dem XML Konstructor ein String übergeben:

+
var languages = new XML('<languages type="dynamic">
+    <lang>JavaScript</lang>
+    <lang>Python</lang>
+  </languages>');
+
+

Beim zweiten Weg wird der XML Code als Literal direkt im Skript eingetragen:

+
var languages = <languages type="dynamic">
+    <lang>JavaScript</lang>
+    <lang>Python</lang>
+  </languages>;
+
+

In beiden Fällen erhält man ein E4X XML Objekt mit Methoden für den bequemen Zugriff auf seine gekapselten Daten.

+

While the XML object looks and behaves in a similar way to a regular JavaScript object, the two are not the same thing. E4X introduces new syntax that only works with E4X XML objects. The syntax is designed to be familiar to JavaScript programmers, but E4X does not provide a direct mapping from XML to native JavaScript objects; just the illusion of one.

+

It is possible to interpolate variables into an XML literal to create an element name (or to create content).

+
var h = 'html';
+var text = "Here's some text";
+var doc = <{h}><body>{text}</body></{h}>;
+alert(doc.toXMLString());
+// Gives
+<html>
+  <body>Here's some text</body>
+</html>
+
+

Working with attributes

+

XML literal syntax has a significant advantage over the XML constructor when you need to create markup dynamically. With E4X it is easy to embed dynamic values in markup. Variables and expressions can be used to create attribute values by simply wrapping them with braces ({}) and omitting quotation marks that would normally go around an attribute value, as the following example illustrates:

+
 var a = 2;
+ var b = <foo bar={a}>"hi"</foo>;
+
+

Upon execution the variable is evaluated and quotes are automatically added where appropriate. The preceding example would result in an XML object which looks like this: <foo bar="2">"hi"</foo>.

+

In attribute substitution, quotation marks are escaped as &quot; while apostrophes are handled normally.

+
var b = 'He said "Don\'t go there."';
+var el = <foo a={b}/>;
+alert(el.toXMLString());
+// Gives: <foo a="He said &quot;Don't go there.&quot;"/>
+
+

Less than and ampersand signs are escaped into their entity equivalents. Since a greater than sign is not escaped, it is possible to get an XML error if the CDATA closing sequence (]]>) is included.

+

It is not possible to directly interpolate variables amidst other literal (or variable) attribute content, however (e.g., bar="a{var1}{var2}"). One must instead either calculate the variable with a JavaScript expression (e.g., bar={'a'+var1+var2}), define a new variable before the element literal which includes the full interpolation and then include that variable or retrieve the attribute after the literal to alter it (see below).

+

While one can interpolate attribute names as well as attribute values:

+
var a = 'att';
+var b = <b {a}='value'/>;
+alert(b);
+// Gives:
+<b att="value"/>
+
+

...one cannot interpolate a whole expression at once (e.g., <b {a}>.)

+

After executing the above example, the variable languages references an XML object corresponding to the <languages> node in the XML document. This node has one attribute, type, which can be accessed and updated in a number of ways:

+
 alert(languages.@type); // Alerts "dynamic"
+ languages.@type = "agile";
+ alert(languages.@type); // Alerts "agile"
+
+
 alert(languages.toString());
+ /* Alerts:
+   <languages type="agile"><lang>JavaScript</lang><lang>Python</lang></languages>
+ */
+
+

Note that if one wishes to make comparisons of retrieved attributes with other strings, it is necessary to convert the attribute first, even though the attribute may be converted to a string when used in other contexts (such as insertion into a textbox).

+
if (languages.@type.toString() === 'agile') {
+...
+}
+

or, simply:

+
if (languages.@type == 'agile') {
+...
+}
+
+

Working with XML objects

+

XML objects provide a number of methods for inspecting and updating their contents. They support JavaScript's regular dot and [] notation, but instead of accessing object properties E4X overloads these operators to access the element's children:

+
var person = <person>
+  <name>Bob Smith</name>
+  <likes>
+    <os>Linux</os>
+    <browser>Firefox</browser>
+    <language>JavaScript</language>
+    <language>Python</language>
+  </likes>
+</person>;
+
+alert(person.name); // Bob Smith
+alert(person['name']); // Bob Smith
+alert(person.likes.browser); // Firefox
+alert(person['likes'].browser); // Firefox
+
+

If you access something with more than one matching element, you get back an XMLList:

+
alert(person.likes.language.length()); // 2
+
+

As with the DOM, * can be used to access all child nodes:

+
alert(person.likes.*.length()); // 4
+
+

While the . operator accesses direct children of the given node, the .. operator accesses all children no matter how deeply nested:

+
alert(person..*.length()); // 11
+
+

The length() method here returns 11 because both elements and text nodes are included in the resulting XMLList.

+

Objects representing XML elements provide a number of useful methods, some of which are illustrated below: TODO: Add all of the methods to the JavaScript reference, link from here

+
alert(person.name.text()) // Bob Smith
+
+var xml = person.name.toXMLString(); // A string containing XML
+
+var personCopy = person.copy(); // A deep copy of the XML object
+
+var child = person.child(1); // The second child node; in this case the <likes> element
+
+

Working with XMLLists

+

In addition to the XML object, E4X introduces an XMLList object. XMLList is used to represent an ordered collection of XML objects; for example, a list of elements. Continuing the above example, we can access an XMLList of the <lang> elements in the page as follows:

+
 var langs = languages.lang;
+
+

XMLList provides a length() method which can be used to find the number of contained elements:

+
 alert(languages.lang.length());
+
+

Note that unlike JavaScript arrays length is a method, not a property, and must be called using length().

+

We can iterate through the matching elements like so:

+
 for (var i = 0; i < languages.lang.length(); i++) {
+     alert(languages.lang[i].toString());
+ }
+
+

Here we are using identical syntax to that used to access numbered items in an array. Despite these similarities to regular arrays, XMLList does not support Array methods such as forEach, and Array generics such as Array.forEach() are not compatible with XMLList objects.

+

We can also use the for each...in statement introduced in JavaScript 1.6 as part of JavaScript's E4X support:

+
 for each (var lang in languages.lang) {
+     alert(lang);
+ }
+
+

for each...in can also be used with regular JavaScript objects to iterate over the values (as opposed to the keys) contained in the object. As with for...in, using it with arrays is strongly discouraged.

+

It is possible to create an XMLList using XML literal syntax without needing to create a well-formed XML document, using the following syntax:

+
 var xmllist = <>
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </>;
+
+

The += operator can be used to append new elements to an XMLList within a document:

+
 languages.lang += <lang>Ruby</lang>;
+
+

Note that unlike node lists returned by regular DOM methods, XMLLists are static and are not automatically updated to reflect changes in the DOM. If you create an XMLList as a subset of an existing XML object and then modify the original XML object, the XMLList will not reflect those changes; you will need to re-create it to get the most recent updates:

+
 var languages = <languages>
+   <lang>JavaScript</lang>
+   <lang>Python</lang>
+ </languages>;
+
+ var lang = languages.lang;
+ alert(lang.length()); // Alerts 2
+
+ languages.lang += <lang>Ruby</lang>;
+ alert(lang.length()); // Still alerts 2
+
+ lang = languages.lang; // Re-create the XMLList
+ alert(lang.length()); // Alerts 3
+
+

Searching and filtering

+

E4X provides special operators for selecting nodes within a document that match specific criteria. These filter operations are specified using an expression contained in parentheses:

+
var html = <html>
+  <p id="p1">First paragraph</p>
+  <p id="p2">Second paragraph</p>
+</html>;
+
+alert(html.p.(@id == "p1")); // Alerts "First paragraph"
+
+

Nodes matching the path before the expression (in this case the paragraph elements) are added to the scope chain before the expression is evaluated, as if they had been specified using the with statement.

+

Consequently, filters can also run against the value of a single node contained within the current element:

+
var people = <people>
+  <person>
+    <name>Bob</name>
+    <age>32</age>
+  </person>
+  <person>
+    <name>Joe</name>
+    <age>46</age>
+  </person>
+</people>;
+
+alert(people.person.(name == "Joe").age); // Alerts 46
+
+

Filter expressions can even use JavaScript functions:

+
function over40(i) {
+    return i > 40;
+}
+
+alert(people.person.(over40(parseInt(age))).name); // Alerts Joe
+
+

Handling namespaces

+

E4X is fully namespace aware. Any XML object that represents a node or attribute provides a name() method which returns a QName object, allowing easy inspection of namespaced elements.

+

Default

+
default xml namespace = "http://www.w3.org/1999/xhtml";
+// No need now to specify a namespace in the html tag
+var xhtml = <html><head><title></title></head><body>
+            <p>text</p></body></html>;
+alert(xhtml.head); // No need to specify a namespace on subelements here either
+

Non-default

+
var xhtml = <html xmlns="http://www.w3.org/1999/xhtml">
+	<head>
+		<title>Embedded SVG demo</title>
+	</head>
+	<body>
+		<h1>Embedded SVG demo</h1>
+		<svg xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 100 100">
+			<circle cx="50"
+				cy="50"
+				r="20"
+				stroke="orange"
+				stroke-width="2px"
+				fill="yellow" />
+		</svg>
+	</body>
+</html>;
+
+alert(xhtml.name().localName); // Alerts "html"
+alert(xhtml.name().uri); // Alerts "http://www.w3.org/1999/xhtml"
+
+

To access elements that are within a non-default namespace, first create a Namespace object encapsulating the URI for that namespace:

+
var svgns = new Namespace('http://www.w3.org/2000/svg');
+
+

This can now be used in E4X queries by using namespace::localName in place of a normal element specifier:

+
var svg = xhtml..svgns::svg;
+alert(svg); // Shows the <svg> portion of the document
+
+

Using Generators/Iterators with E4X

+

As of JavaScript 1.7, it is possible to use generators and iterators, giving more options for traversing E4X.

+

In a manner akin to DOM tree walkers, we can define our own walkers for E4X. While the following is already achievable by iterating an E4X object with for each...in, it demonstrates how a more customized one could be created.

+
function xmlChildWalker (xml) {
+    var i = 0;
+    var child = xml.*[0];
+    while (child != undefined) {
+        yield child;
+        child = xml.*[++i];
+    }
+    yield false;
+}
+
+var a = <a><b/><c/></a>;
+var xcw = xmlChildWalker(a);
+
+var child;
+while ((child = xcw.next()) !== false) {
+    alert(child.toXMLString()); // "<b/>" then "<c/>"
+}
+
+
+

See also

+ +

{{ languages( { "zh-cn": "cn/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X", "zh-tw": "zh_tw/E4X/使用_E4X_處理_XML", "fr": "fr/Guide_JavaScript_1.5/Traitement_de_XML_avec_E4X", "ja": "ja/Core_JavaScript_1.5_Guide/Processing_XML_with_E4X" } ) }}

diff --git "a/files/de/einrichten_einer_entwicklungsumgebung_f\303\274r_erweiterungen/index.html" "b/files/de/einrichten_einer_entwicklungsumgebung_f\303\274r_erweiterungen/index.html" new file mode 100644 index 0000000000..fec703c13a --- /dev/null +++ "b/files/de/einrichten_einer_entwicklungsumgebung_f\303\274r_erweiterungen/index.html" @@ -0,0 +1,102 @@ +--- +title: Einrichten einer Entwicklungsumgebung für Erweiterungen +slug: Einrichten_einer_Entwicklungsumgebung_für_Erweiterungen +tags: + - Erweiterungen +translation_of: Archive/Add-ons/Setting_up_extension_development_environment +--- +

Dieser Artikel soll Anregungen geben wie Sie ihre Mozilla-Anwendung zur Entwicklung von Erweiterungen einrichten können. Dieser Artikel bezieht sich sowohl auf Firefox als auch auf Thunderbird und SeaMonkey in der Version 2.0 und höher.

+

Überblick

+ +

Entwicklerprofil

+

Um die Geschwindigkeitseinbußen durch Einstellungen und Erweiterungen zu Entwicklung sowie den Verlust persönlicher Daten zu vermeiden, sollten Sie ein gesondertes Entwicklerprofil einrichten.

+

Sie können zwei Firefox-Instanzen mit unterschiedlichen Profilen nutzen, wenn Sie den Browser mit dem -no-remote Parameter starten. Beispielsweise können Sie mit dem folgenden Befehl Ihr Entwicklerprofil, von dem wir annehmen, dass es "dev" heißt, unabhängig davon starten, ob bereits eine "normale" Instanz von Firefox läuft oder nicht:

+

Unter Ubuntu (und vielen anderen Linux Distributionen):

+
/usr/bin/firefox -no-remote -P dev
+

Unter einigen anderen Distributionen von Linux/Unix:

+
/usr/local/bin/firefox -no-remote -P dev
+
+

Unter Mac:

+
/Applications/Firefox.app/Contents/MacOS/firefox-bin -no-remote -P dev &
+
+

Unter Windows:

+
Start -> Ausführen "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+
+

Unter Windows 64 bit:

+
Start -> Run "%ProgramFiles(x86)%\Mozilla Firefox\firefox.exe" -no-remote -P dev
+

Um Thunderbird oder SeaMonkey zu starten, muss "Firefox" in den Beispielen entsprechend ersetzt werden.

+

Wenn das Profil noch nicht besteht wird es automatisch erstellt. Um Firefox wie gewöhnlich zu starten, kann einfach "firefox" oder "firefox -P default" verwendet werden.

+

Außerdem können gleichzeitig verschiedene Versionen des Firefox installiert werden, um die Kompatibilität der Erweiterung zu testen. Es können sogar stabile Versionen sowie die aktuelle Entwicklerversion auf einem System installiert werden.

+

Siehe auch: Installing Firefox 3 or Minefield while keeping Firefox 2 (englisch)

+

Um mehrere Restarts zu vereinfachen, kann ein Profil für den regulären Gebrauch und ein zweites Für das Testen von Erweiterungen verwendet werden. Durch das "no-remote" Kommando können beide Profile gleichzeitig ausgeführt werden. Eine Beschreibung findet sich unter http://kb.mozillazine.org/Command_line_arguments. Diese beiden Verknüpfungen für Windows sind dazu sehr hilfreich:

+

...firefox.exe -no-remote -p "profile1"

+

...firefox.exe -no-remote -p "profile2"

+
+ Diese Zeilen sind Windows-spezifisch. Wenn Sie die gleichen Anweisungen für Linux / Mac OS / etc haben, fügen Sie diese doch hier hinzu.
+

Ersetzen Sie "..." mit einem regulären Pfad. Erstellen Sie beide Verknüpfungen und schon ist es sehr einfach beide Profile gleichzeitig zu verwenden.

+

Entwicklungseinstellungen

+

Diese Einstellungen erleichtern das Debuggen auf Kosten sinkender Geschwindigkeit.

+

Unter Editing Configuration Files und About:config Einstellungen finden sich weitere Informationen wie Einstellungen vorgenommen werden können. Beachten Sie, dass nicht alle relevanten Einstellungen defaultmäßig unter about:config angezeigt werden. Daher müssen für diese Einstellungen neue Einträge (boolean) angelegt werden.

+

Diese Änderungen sollten nur in einem gesondert angelegtem Entwicklerprofil gemacht werden.

+ +
+

{{ gecko_callout_heading("2.0") }}

+

Die Fehlerkonsole ist ab Firefox 4 standardmäßig deaktiviert. Sie können sie wieder aktivieren, indem Sie devtools.errorconsole.enabled auf true setzen und den Browser neu starten. Damit wird außerdem standardmäßig javascript.options.showInConsole auf true gesetzt.

+
+

Erweiterungen für Entwickler

+

Diese Erweiterungen könnten bei der Entwicklung helfen:

+ +

Erweiterung in benutzerdefiniertem Verzeichnis

+

Anstatt nach jeder Änderung die Erweiterung neu zu installieren und als Schutz vor versehentlichem Löschen, wenn die Anwendung deinstalliert wird, können Sie ein Verzeichnis außerhalb des Profils an einem beliebigen Ort einrichten.

+
    +
  1. Suchen Sie in der in der Erweiterung enthaltenen install.rdf die ID der Erweiterung
    2. +
  2. Erstellen Sie eine leere Datei in dem das_profil_verzeichnis/extensions/ mit der ID als Dateiname. (z.B. 'das_profil_verzeichnis/extensions/i...r@mozilla.org') Wo finde ich meinen Profilordner?
    3. +
  3. In dieser Datei wird dann einfach der vollständige Pfad zur install.rdf gespeichert. +

    z.B. Linux:

    + 
    /full/path/to/yourExtension
+
    +

    Oder Windows:

    + 
    C:\sam\workspace\toolbar\helloWorldtoolbar\
+
    +
    4. +
  4. Platzieren Sie die Datei in den Erweiterungsordner und starten Sie die Anwendung
    5. +
+

Verzeichnisse statt JAR-Archiven benutzen

+

Unabhängig davon, ob Sie Erweiterungsdateien in ein JAR-Archiv oder Verzeichnisse packen, ist es einfacher in einem Verzeichnis zu entwickeln. Auch wenn Sie sich für ein JAR-Archiv für die Veröffentlichung entscheiden, können Sie trotzdem in einem Verzeichnis entwickeln, indem Sie Ihr chrome.manifest ändern.

+

JAR-Archiv:

+
content	myExtension	jar:chrome/myExtension.jar!/content/
+
+

Verzeichnis:

+
content	myExtension	chrome/content/
+
diff --git a/files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html b/files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html new file mode 100644 index 0000000000..da13f8f840 --- /dev/null +++ b/files/de/erstellen_von_firefox_erweiterungen_mit_dem_mozilla_build_system/index.html @@ -0,0 +1,469 @@ +--- +title: Erstellen von Firefox Erweiterungen mit dem Mozilla Build System +slug: Erstellen_von_Firefox_Erweiterungen_mit_dem_Mozilla_Build_System +tags: + - Add-ons + - Erweiterungen + - Mozilla entwickeln + - XPCOM +translation_of: >- + Archive/Add-ons/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System +--- +
+ Hinweis: Alle Anweisungen in diesem Artikel gelten nur für Mozilla 1.8 (Firefox 1.5). Wir werden versuchen, die Änderungen aus neueren Versionen zu aktualisieren, aber Sie sollten nicht erwarten, dass dies mit Mozilla 1.7 (Firefox 1.0) oder älter funktioniert.
+

Es gibt sehr viel Informationsmaterial zur Erstellung von Erweiterungen für Firefox. Diese Artikel nehmen jedoch an, dass Sie Ihre Erweiterungen nur mit XUL und JavaScript entwickeln. Für komplexe Erweiterungen ist es unter Umständen nötig, Komponenten in C++ zu erstellen, die erweiterte Funktionen bereitstellten. Gründe für C++ Komponenten in Ihrer Erweiterung:

+ +

Dieser Artikel beschreibt, wie Sie eine Entwicklungsumgebung für eine große und komplexe Firefox Erweiterung mit den oben genannten Anforderungen einrichten können. Das Auffinden von Informationen zu diesem Thema war sehr schwierig, da bisher kaum Informationen darüber veröffentlicht wurden, aber viele Mitwirkende aus der Mozilla Community haben dazu beigetragen, etliche Fragen von Neulingen zu beantworten. Ich kann nicht genug darauf hinweisen, dass ich noch weit entfernt von einem Mozilla Experten bin, obwohl ich Fortschritte mache. Es könnten daher Informationen in diesem Dokument vorhanden sein, die nicht komplett, nicht den richtige Weg aufzeigen oder einfach falsch sind. Wenn Sie mehr über dieses Thema wissen, sind Sie angehalten diesen Artikel zu verbessern.

+

Ich sollte auch betonen, dass Sie Mozilla nicht kompilieren müssen oder das Mozilla Build System verwenden müssen, wenn Sie C++ Komponenten für Mozilla erstellen wollen. Wenn Sie nur ein oder zwei XPCOM Komponenten erstellen wollen, ist dieser Weg vielleicht zu übertrieben Sie können stattdessen einen Blick auf diese Anleitung werfen. Wenn Sie auf der anderen Seite ein erfahrener Entwickler sind und wissen, dass Sie eine große komplizierte Erweiterung erstellen wollen, finden Sie in diesem Artikel nützliche Hinweise.

+

Ein letzter Hinweis: Die folgenden Techniken wurden nur mit Firefox getestet, allerdings werden Sie mit wenigen Änderungen auch in anderen Gecko-basierten Anwendungen wie Thunderbird oder Seamonkey funktionieren. Fall das jemand bestätigen kann und Informationen zur Anpassung hat, wäre ein kleiner Abschnitt in diesem Artikel dazu sehr hilfreich.

+

Bambi trifft Mozilla

+

Das ist nichts für schwache Nerven. Die ersten Schritte erfordern unter anderem das Kompilieren von Mozilla, was ein großen - nein gigantisches - Unterfangen ist. Viele schlaue Entwickler standen schon am Rande der Verzweiflung als Sie zum ersten mal versucht haben Mozilla zu kompilieren. Falls Sie kein erfahrener C++ Entwickler sind, würde ich es gar nicht erst versuchen. Bleiben Sie bei JavaScript.

+

Unter Windows Plattformen

+

Als ich das erste Mal Mozilla kompiliert habe, verwendete ich diese Anleitung. Ich weiß nicht mehr warum, aber ich bin an verschiedenen Stellen hängen geblieben und die ganze Sache hat länger gedauert als ich erwartet hatte. Viele Möbel wurden zerstört, viele Haare waren danach nicht mehr auf dem Kopf. Hier ist eine ausführliche Anleitung(engl.), welche gute Rezensionen erhalten hat. Folgen Sie jedem Schritt genau und vielleicht passt am Ende alles. Denken Sie daran, dass wenn Sie das Build einmal erfolgreich hin bekommen haben, es danach umso einfacher ist. Vielleicht.

+

Unter anderen Plattformen

+

Auf anderen Systemen, Linux und MacOS, ist der Prozess um einiges einfacher. Alle Tools zum Kompilieren sind eingebaut und daher können Sie mit einigen Befehlen im Terminal sehr einfach ein Build erstellen. Sie können die vollständigen Anweisungen für fast jedes Betriebssystem hier finden.

+

Strukturierung des Projekts

+

Mozilla enthält eine Reihe von komplexen Erweiterungen, die im Build-Prozess integriert sind. Das ist nötig, um alle Probleme bei der Erstellung und Registrierung von XPCOM Komponenten, der Kompilierung von JAR Dateien und Manifesten, der Installation des Firefox extensions/ Verzeichnisses und so weiter zu lösen. Wir werden diese Infrastruktur nutzen, um unsere Erweiterung zu erstellen.

+

Zunächst denken Sie sich einen schönen Namen für Ihre Erweiterung aus und erstellen ein Verzeichnis unter /mozilla/extensions/. Verwenden Sie nur Kleinbuchstaben. Sie sollten eine Reihe weitere Verzeichnisse (inspector/, reporter/ und so weiter) im gleichen Verzeichnis sehen.

+

Beachten Sie, dass bevor Sie irgendetwas kompilieren, ein Konfigurationsprozess für das Mozilla Build System erforderlich ist, welcher die Datei Makefile.in für das Build erstellt. Die makefile sollte ähnlich oder identisch zur Vorlage sein, aber die zusätzliche Flexibilität durch die dynamische Generierung ist eines der Dinge, welche das Mozilla Build System so mächtig machen.

+

Anatomie einer einfachen C++ Erweiterung

+

Wir nehmen an, dass Sie C++ verwenden, um XPCOM Komponenten zu schreiben, die entweder von anderen C++ Komponenten oder von JavaScript verwendet werden. Der Prozess der Erstellung eines Komponents ist eigentlich relativ unkompliziert, wenn das Mozilla Build System verwendet wird.

+

Im einfachsten Fall besteht eine Komponente aus einem Hauptverzeichnis mit zwei Unterverzeichnissen public/ und src/. Das Hauptverzeichnis und jedes Unterverzeichnis muss eine Makefile.in Datei enthalten (von jetzt beziehe ich mich auf diese Datei als makefile, obwohl wir wissen, dass diese nur verwendet werden, um die wirkliche makefile zu generieren). Diese makefile sagt zwei Sachen. Zuerst werden die Unterverzeichnisse aufgelistet aus denen die Erweiterung besteht, sodass das Build-System weiß, wo nach zusätzlichen makefiles gesucht werden muss. Als Zweites weist diese das Build-System an, eine neue Erweiterung zu installieren, als die Komponenten direkt in das binäre Verzeichnis von Firefox zu kopieren. Der größte Vorteil der Verwendung einer Erweiterung ist das einfache Packen und das installieren auf anderen Rechnern.

+

Hier ist also unsere Grundlage (Makefile.in im Hauptverzeichnis der Erweiterung):

+
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= public src
+
+XPI_NAME		= myextension
+INSTALL_EXTENSION_ID	= myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+

Eine detaillierte Beschreibung des Prozesses und eine Beschreibung der Schlüsselfunktionen dieser makefile, kann hier gefunden werden. MODULE und XPI_NAME sind beides die Namen Ihrer Erweiterung; Sie sollten in allen Projekt-makefiles wiederholt werden, sodass alle Dateien in dem selben Ort des XPIs landen (siehe unten). INSTALL_EXTENSION_ID ist die einzigartige ID Ihrer Erweiterung. Das kann eine GUID sein, aber das obige Format ist schöner und besser zu behalten. Sie müssen kein XPI_PKGNAME angeben, aber wenn Sie eine XPI Datei erstellen, die zur Auslieferung geeignet sein soll, wird diese automatisch im Wurzelverzeichnis des XPIs erstellt (/mozilla/$(MOZ_OBJDIR)/dist/xpi-stage/).

+

Jede Erweiterung muss eine install.rdf Datei enthalten, die Firefox mitteilt wie die Erweiterung installiert werden soll. Diese Datei sollte im Hauptverzeichnis platziert werden und ungefähr so aussehen:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>myextension@mycompany.com</em:id>
+    <em:version>0.1</em:version>
+
+    <em:targetApplication>
+      <!-- Firefox -->
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.0+</em:minVersion>
+        <em:maxVersion>1.0+</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- front-end metadata -->
+    <em:name>My First Extension</em:name>
+    <em:description>Just an example.</em:description>
+    <em:creator>allpeers.com</em:creator>
+    <em:homepageURL>http://www.allpeers.com/blog/</em:homepageURL>
+  </Description>
+</RDF>
+
+

Es gibt eine detaillierte Beschreibung des Formats der install.rdf Datei. Verwenden Sie die Variable DIST_FILES in der makefile, um anzugeben, dass eine Kopie der Datei in das Erweiterungsverzeichnis und (optional) der XPI Datei erstellt wird.

+

Öffentliche Schnittstellen

+

Das public/ Verzeichnis enthält alle Schnittstellen, auf die andere Module zugreifen wollen. Das können IDL Dateien für XPCOM Schnittstellen sein, welche verwendet werden, um normale C++ header Dateien in Ihre Quelldateien einzubinden. Es können auch normale C++ header Dateien sein, die direkt von anderen Modulen verwendet werden. Der einfachste Weg um das zu letzt genannte zu machen, ist Implemenierungen für alle Methode innerhalb vorzunehmen, sodass Sie keine zusätzlichen Verweisabhängigkeiten beachten müssen. Sonst müssen Sie statische Links auf Ihr Modul setzen, wenn Sie diese öffentlichen header in andern Modulen verwenden. Ich persönlich würde diese Praxis vermeiden (neben anderen Dingen, heißt statisches Verlinken, dass der gleiche Code mehrmals geladen wird und der Code nicht von JavaScript oder andern nicht-C++ Sprachen verfügbar ist) und immer wenn es möglich ist auf XPCOM zurückgreifen.

+

Die makefile Datei im public/ Verzeichnis sollte so aussehen:

+
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= myextension
+XPIDL_MODULE	= myextension
+
+XPI_NAME = myextension
+
+EXPORTS = \
+		myHeader.h \
+		$(NULL)
+
+XPIDLSRCS	= \
+		myIFirstComponent.idl \
+		myISecondComponent.idl \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+

XPIDL_MODULE ist der Name der generierten XPT Datei, welche Informationen über Ihre IDL Schnittstellen enthält. Wenn Sie mehrere Module haben, stellen Sie absolut sicher, dass Sie einen anderen Wert für jedes XPIDL_MODULE verwenden. Sonst wird die erste XPT Datei von der zweiten Überschrieben und Sie erhalten NS_ERROR_XPC_BAD_IID Fehler, wenn Sie versuchen die IDL Schnittstellen über Ihren Code zu erreichen. Die Dateien unter EXPORTS werden direkt nach /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/ kopiert und sind daher für andere Module erreichbar (der Wert von MOZ_OBJDIR ist in /mozilla/.mozconfig definiert). XPIDLSRCS läuft durch den IDL Prozessor, und die generierten C++ header werden in das gleiche Verzeichnis kopiert. Außerdem wird eine XPT Datei generiert und im components/ Unterverzeichnis Ihrer Erweiterung abgelegt.

+

Quelldateien

+

Jetzt ist es an der Zeit, die makefile und Quelldateien im src/ Unterverzeichnis zu erstellen. Wenn Sie Schnittstellen implementieren, die Sie über IDL  beschrieben haben, ist der einfachste Weg das src/ Verzeichnis leer zu lassen und nur make im public/ Verzeichnis auszuführen; das wird kurz erklärt.

+

Dann öffnen Sie die generierte header Datei für Ihre Schnittstelle von /mozilla/$(MOZ_OBJDIR)/dist/include/myextension/. Es sind Stücke der Komponenten Dateien .H und .CPP enthalten, die Sie einfach mittels Kopieren und Einfügen in Ihre Implementierungsdateien hinzufügen können. Was Sie tun müssen, ist die Implementierungsstückchen in der C++ Datei zu füllen und Sie sind auf einem guten Weg.

+

Hier ist ein Beispiel der makefile, die Sie in Ihr src Verzeichnis packen müssen:

+
DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME =  myExtension
+USE_STATIC_LIBS = 1
+
+XPI_NAME = myextension
+
+REQUIRES	= xpcom \
+		  string \
+		  $(NULL)
+
+CPPSRCS		= \
+		  myFirstComponent.cpp \
+		  mySecondComponent.cpp \
+		  myExtension.cpp \
+		  $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+EXTRA_DSO_LDOPTS += \
+  $(XPCOM_GLUE_LDOPTS) \
+  $(NSPR_LIBS) \
+  $(NULL)
+
+# NOTE: If you are coding against the 1.8.0 branch (not 1.8 branch or trunk), the
+# above line won't work, due to linker flag issues. Use the following
+# variables instead:
+#
+# EXTRA_DSO_LDOPTS += \
+#   $(MOZ_COMPONENT_LIBS) \
+#   $(NULL)
+#
+# Unfortunately, using MOZ_COMPONENT_LIBS links against xpcom_core, which means
+# your components will not work in future versions of Firefox.
+
+

Der Abschnitt REQUIRES teilt make mit, welche Module Ihre Komponente nutzt. Das bringt die Unterverzeichnisse von /mozilla/$(MOZ_OBJDIR)/dist/include/ dazu zum C++ Compiler Pfad hinzugefügt zu werden. Wenn Sie Mozilla header einfügen und der Compiler diese nicht findet, kann es bedeuten, dass Sie nicht alle nötigen Module hier aufgelistet haben. CPPSRCS listet die Quelledateien auf, die kompiliert werden sollen.

+

In diesem Beispiel enthalten die ersten beiden Dateien die Implementierung der zwei Erweiterungskomponenten. Die letzte Datei, myExtension.cpp, enthält den nötigen Code zur Registrierung der Komponenten, wie im nächsten Abschnitt beschrieben.

+

Komponenten registrieren

+

Um Ihre Komponenten in anderen C++ Modulen und JavaScript zu verwenden, müssen Sie diese registrieren. Um das zu machen, muss Ihre Erweiterung eine Klasse implementieren, welches die nsIModule Schnittstelle ausstellt, welche Methoden zum Zugang der Komponenten hat. Glücklicherweise kann dies durch einige einfache Makros erreicht werden, sodass Sie sich nicht um die unwichtigen Details kümmern müssen, was unter der Haube geschieht.

+

Der erste Schritt ist eine CID, contract ID und einen Klassennamen für jede Ihrer Komponenten zu definieren. Platzieren Sie den folgenden Code (mit den entsprechenden #defines) im header jeder Komponente, die Sie über den Komponentenmnager initialisieren möchten:

+
// {00000000-0000-0000-0000-000000000000}
+#define MYFIRSTCOMPONENT_CID \
+	{ 0x00000000, 0x0000, 0x0000, \
+	{ 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00 } }
+
+#define MYFIRSTCOMPONENT_CONTRACTID	"@mycompany.com/myfirst;1"
+#define MYFIRSTCOMPONENT_CLASSNAME	"My First Component"
+
+

Natürlich müssen Sie die CID mit einer echten GUID ersetzen. Unter Windows kann dies über die guidgen.exe geschehen. Unix Anwender können "uuidgen" verwenden (wird mit den meisten Distributionen ausgeliefert).

+

Jetzt erstellen Sie die myExtension.cpp Datei wie folgt:

+
#include "nsXPCOM.h"
+
+#include "nsIGenericFactory.h"
+
+/**
+ * Components to be registered
+ */
+#include "myFirstComponent.h"
+#include "mySecondComponent.h"
+
+NS_GENERIC_FACTORY_CONSTRUCTOR(myFirstComponent)
+NS_GENERIC_FACTORY_CONSTRUCTOR(mySecondComponent)
+
+//----------------------------------------------------------
+
+static const nsModuleComponentInfo components[] =
+{
+	{
+		MYFIRSTCOMPONENT_CLASSNAME,
+		MYFIRSTCOMPONENT_CID,
+		MYFIRSTCOMPONENT_CONTRACTID,
+		myFirstComponentConstructor
+	},
+	{
+		MYSECONDCOMPONENT_CLASSNAME,
+		MYSECONDCOMPONENT_CID,
+		MYSECONDCOMPONENT_CONTRACTID,
+		mySecondComponentConstructor
+	},
+};
+
+NS_IMPL_NSGETMODULE(MyExtension, components)
+
+

Das NS_IMPL_NSGETMODULE Makro erstellt das passenden Modulobjekt, welches Zugang zu allen Komponenten bereitstellt, die im nsModuleComponentInfo Array aufgelistet sind.

+

Kompilieren

+

Wie oben genannt, möchten Sie Ihre Erweiterung wahrscheinlich direkt nach der Erstellung der IDL Dateien kompilieren, um die C++ stubs für Ihre Komponenten-Implementierung zu generieren. Ich nehme an, dass Sie Firefox bereits erfolgreich kompiliert haben. Wenn nicht gehen Sie sofort zum Anfang dieses Artikels zurück und kommen Sie nicht wieder bis Sie eine funktionierende firefox.exe haben. Gehen Sie nicht weiter. Sammeln Sie keine $200 ein.

+

Immer noch da? Gut, jetzt müssen wir Ihre .mozconfig (im /mozilla/ Verzeichnis) ändern, sodass Ihre Erweiterung mit Mozilla zusammen kompiliert wird. Fügen Sie die folgende Zeile am Ende der Datei an:

+
ac_add_options --enable-extensions=default,myextension
+
+

Starten Sie make vom Mozilla Root:

+
make -f client.mk build
+
+

Selbst wenn Sie ein aktuelles Firefox Build haben, müssen Sie warten bis make durch den kompletten Mozilla Quelltext gegangen ist und nach neuem Code gesucht hat (auf meinem Computer, welcher sehr schnell ist, hat dies gut 10-15 Minuten gedauert). Schließlich wird Ihre Erweiterung erreicht und eine Reihe von Dingen werden unter /mozilla/$(MOZ_OBJDIR)/ erstellt:

+ +

Ein Großteil dieser Sachen wird nicht erstellt, wenn make das erste Mal ausgeführt wird, es werden nicht alle Quelldateien Ihrer Komponenten gefunden. Kümmern Sie sich nicht darum. Alles was Sie brauchen, sind die genierten header Dateien, die die C++ Implementierungs-Stubs enthalten. Gehen Sie zurück und arbeiten Sie Ihre C++ Implementierung Ihrer Komponenten aus, sodass das Build beim nächsten Mal komplett ist. Denken Sie dran, niemals die generierten Dateien zu verändern. Ändern Sie immer die Dateien, die verwendet werden, um sie zu generieren und führen Sie make aus. Es können Ausnahmen dieser Regel existieren, aber wenn Sie die generierten Dateien direkt ändern, machen Sie wahrscheinlich irgendetwas falsch.

+

Der Vorgang, der das komplette Mozilla Verzeichnis durchgeht, dauert eine lange Zeit. Wenn Sie bereits ein Mozilla Build haben, können Sie dies vermeiden, indem Sie eine makefile für Ihre Erweiterung direkt erstellen. Gehen Sie zum Wurzelverzeichnis von $(MOZ_OBJDIR) und fügen Sie in eine Eingabeaufforderung folgendes ein:

+
../build/autoconf/make-makefile extensions/myextension
+
+

Wenn sich Ihr $(MOZ_OBJDIR) außerhalb von $(TOPSRCDIR) befindet, müssen Sie folgendes schreiben:

+
$(TOPSRCDIR)/build/autoconf/make-makefile -t $(TOPSRCDIR) extensions/myextension
+
+

Sodass das Skript weiß, wo sich Ihre Quelldateien befinden.

+

Das wird eine eigene makefile für Ihre Erweiterung erstellen. Egal, ob Sie Mozilla komplett kompilieren oder diese Abkürzung verwenden, Sie können nun zu /mozilla/$(MOZ_OBJDIR)/extensions/myextension/ wechseln, "make" in die Kommandozeile tippen und Ihr Build wird erstellt. Es sollte Ihre Komponente ungeachtet vom Rest kompiliert werden. Wenn alles funktioniert, werden Sie Ihre XPI sehen. Außerdem ist eine "exploded" Version des XPIs (das ungezippte Verzeichnis) unter /mozilla/$(MOZ_OBJDIR)/dist/bin/extensions zu finden.

+

Um sicher zu gehen, dass das Build wirklich fertig ist, starten Sie Firefox und überprüfen Sie, ob Ihre Erweiterung unter Extras/Erweiterungen angezeigt wird. Wenn Sie Firefox als Ihren normalen Browser verwenden (und wenn nicht, warum nicht?), nervt es Sie vielleicht, dass Sie Firefox öfters schließen müssen bevor Sie Ihre Version starten. Setzen Sie die MOZ_NO_REMOTE Umgebungsvariable auf "1" bevor Sie die Entwicklungsversion von Firefox starten. Sie müssen außerdem ein anderes Profil für Ihre Entwicklerversion verwenden:

+
firefox -P development
+
+

Wobei development der Name des zusätzlichen Profils ist. Dies erlaubt Ihnen nun beide Versionen gleichzeitig laufen zu lassen.

+

Kein Ort wie Chrome

+

Yippee-yay! Jetzt haben Sie eine Erweiterung, die absolut nichts kann. Es ist Zeit etwas mit den Komponenten zu machen, die Sie implementiert und registriert haben. Am einfachsten geht das über einfachen JavaScript und XUL Code. Jetzt wäre es hilfreich, wenn Sie bereits Erfahrung im Schreiben von "regulären" Erweiterungen (ohne C++ Komponenten) haben. Wenn Sie das noch nie getan haben, ist empfohlen dies zuerst zu tun. Zeigen Sie doch einfach mal ein neues Menü-Item an, welches eine "Hello, World!" Dialogbox öffnet. Dadurch lernen Sie die benötigten Grundlagen kennen.

+

Wenn Sie wissen wie man XUL/JavaScript Erweiterungen schreibt, wissen Sie auch, dass die wichtigste Teil im chrome/ Verzeichnis der Erweiterung liegt. Die Tatsache, dass Sie C++ Komponenten verwenden, ändert daran nichts. Also müssen Sie nun die Ordner content/, locale/ und skin/ erstellen, in welchen Sie Ihre Chrome-Dateien packen.

+

Sobald Sie die notwendigen Chrome-Dateien erstellt haben (zum Beispiel ein Overlay, welches einen Button hinzufügt, der Ihre Komponente aktiviert), müssen sie diese als Teil Ihrer Erweiterung packen. Das wird durch ein JAR Manifest erreicht. Für unser einfaches Beispiel, kann diese Datei in etwa so aussehen:

+
myextension.jar:
+%  content myextension %content/
+%  locale myextension en-US %locale/en-US/
+%  skin myextension classic/1.0 %skin/classic/
+%  overlay chrome://browser/content/browser.xul chrome://myextension/content/MyExtensionOverlay.xul
+	content/MyExtensionOverlay.js		(content/MyExtensionOverlay.js)
+	content/MyExtensionOverlay.xul		(content/MyExtensionOverlay.xul)
+	locale/en-US/MyExtension.dtd		(locale/en-US/MyExtension.dtd)
+	locale/en-US/MyExtension.properties	(locale/en-US/MyExtension.properties)
+	skin/classic/MyExtension.css		(skin/classic/MyExtension.css)
+
+

Packen Sie diesen Code in eine Datei namens jar.mn in das Wurzelverzeichnis Ihrer Erweiterung und stellen Sie sicher, dass die Pfade in den Klammern wirklich auf die entsprechenden Dateien zeigen (relativ zum Wurzelverzeichnis). Sie müssen zudem eine kleine Änderung an der makefile im gleichen Verzeichnis vornehmen: Fügen Sie folgende Zeile hinzu:

+
USE_EXTENSION_MANIFEST = 1
+
+

Das teilt make mit eine einzelne Manifestdatei chrome.manifest zu erstellen, anstatt separate Manifestdateien für jedes Paket zu erstellen.

+

Nun führen Sie make noch einmal aus  und Sie sollten ein chrome Unterverzeichnis sehen (/mozilla/$(MOZ_OBJDIR)/dist/bin/extensions/myextension@mycompany.com/). Beachten Sie, dass das chrome Verzeichnis ein JAR (ZIP) Datei mit allen Chrome-Dateien, die in jar.mn aufgelistet sind und auch die komplette Verzeichnisstruktur der jar Datei, enthält. Die Verzeichnisstruktur ist jedoch leer. Warum? Ich weiß es nicht. Kümmern Sie sich nicht darum, denn die Dateien im JAR sind die, die gebraucht werden.

+

Komplizierte Erweiterungen strukturieren

+

Wenn Sie eine komplexere Erweiterung mit vielen XPCOM Komponenten entwickeln, möchten Sie Ihren Code womöglich in kleinere Module aufteilen.

+
Etwas komplexere Erweiterungen
+

Für mäßig komplexe Erweiterungen ist es wahrscheinlich ausreichend den Code einfach in einzelne Module aufzuteilen. Nehmen wir an, Sie haben ein base/ Modul, welches eine Reihe grundlegender XPCOM Komponenten bereitstellt und ein advanced/ Modul, welches einige Chrome und andere Module bereitstellt. Ihre komplette Verzeichnisstruktur könnte so aussehen:

+ +

Sonst ändert sich nicht wirklich etwas. Die makefiles in den base/ und advanced/ Verzeichnissen sollten mehr oder weniger genau so wie die originalen makefiles aussehen. Denken Sie daran die DEPTH Variable zu ändern, falls die Dateien ein Level weiter weg von dem Mozilla Verzeichnis verschoben wurden. Sie müssen außerdem die DIST_FILES Variable entfernen, weil das in der top-level makefile vorhanden sein wird. Jede makefile, die irgendetwas generiert, sollte die XPI_NAME Variable definieren, um sicher zu gehen, dass generierte Dateien in Ihre Erweiterung kommen und nicht in das globale components/ Verzeichnis. Definieren Sie das einfach in jeder makefile, um sicher zu gehen. Sie können das gleiche MODULE in beiden base/ und advanced/ Verzeichnissen verwenden, sodass die generierten Dateien in das gleiche Verzeichnis wandern, aber stellen Sie sicher, dass Sie nicht die gleichen für XPIDL_MODULE in den zwei public/ Verzeichnissen definieren oder eine in einen der Komponenten Bibliotheken (XPT Dateien), sonst wird das andere überschrieben und alles wird kaputt gehen.

+

Jedes Modul muss auch einen unterschiedlichen Wert für die LIBRARY_NAME Variable besitzen. Das ist der Name der generierten dynamischen Bibliothek, wenn wir also die Bibliotheken "myBase" und "myAdvanced" aufrufen, wird eine myBase.dll und myAdvanced.dll (unter Windows zumindest) erstellt. Jedes dieser Module hat eine einzelne C++ Datei zur Registrierung von Komponenten. Es wird also zwei Dateien, die wie myExtension.cpp aussehen, in diesem Beispiel Base.cpp und Advanced.cpp. Schließlich wird jedes Modul ein eigenes jar.mn haben, sodass sie auf die gleichen JAR und Paket Dateinamen zurückgreifen. Die einzige Datei, die so bleibt ist install.rdf, welche immer noch nur einmal in dem Wurzelverzeichnis der Erweiterung steht.

+

Vom top-level der makefile, sieht es nun so aus:

+
DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+
+DIRS		= base advanced
+
+XPI_NAME               = myextension
+INSTALL_EXTENSION_ID   = myextension@mycompany.com
+XPI_PKGNAME		= myextension
+
+DIST_FILES = install.rdf
+
+include $(topsrcdir)/config/rules.mk
+
+
Wirklich komplexe Erweiterungen
+

Wenn ein einzelnes Modul sehr groß wird, wollen Sie dieses sicher in weitere Untermodule aufteilen. Der Unterschied zu einzelnen Modulen und einzelnen Untermodulen, ist, dass die Untermodule alle die gleiche Datei zur Registrierung von Komponenten haben (die berühmte myExtension.cpp Datei) und wenn kompiliert wurde, werden sie als einzelne Bibliothek erstellt. Die Entscheidung zur Unterteilung in Untermodulen liegt nur in der Organisation des Codes und betrifft das Endprodukt nicht wirklich.

+

Um ein Modul in Untermodule aufzuteilen, erstellen Sie zunächst einen Unterordner für jedes Untermodul. Dann erstellen Sie ein zusätzliches Verzeichnis, das build/ genannt wird. Jedes Untermodul wird so konfiguriert, dass eine statische Bibliothek erstellt wird und das build/ Verzeichnis wird diese Bibliotheken zusammenfügen, um eine einzige Komponentenbibliothek zu erstellen. Verwirrt? Hier ist ein Beispiel, welches das advanced/ Unterverzeichnis des myextension/ Verzeichnisses zeigt:

+ +

Wie Sie sehen, haben wir advanced/ in zwei Untermodule geteilt: intricate/ und multifarious/ und wir haben einen zusätzlichen Ordner build/ hinzugefügt. Wir haben die Chrome-Verzeichnisse direkt unter advanced/ belassen, das sie nicht an irgendwelche Untermodule gebunden sind. Das bedeutet, dass das jar.mn am gleichen Platz verweilt.

+

Die intricate/ und multifarious/ makefiles werden so wie die originale advanced/ makefile aussehen, aber wir müssen ein paar kleiner Anpassungen vornehmen. Wie immer müssen wir die DEPTH Variable anpassen, da sich die makefiles tiefer in der Verzeichnisstruktur befinden. Wir sollten außerdem die LIBRARY_NAMEs ändern, um anzugeben, das wir statische Bibliotheken für jedes Untermodul anlegen. Das "_s" Suffix ist für diesen Zweck geeignet. Wir nennen sie also "myIntricate_s" und "myMultifarious_s". Schließlich definieren wir FORCE_STATIC_LIB, was eine makefile ergibt, die ungefähr so aussieht:

+
DEPTH		= ../../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE = myextension
+LIBRARY_NAME = myIntricate_s
+FORCE_STATIC_LIB = 1
+USE_STATIC_LIBS = 1
+
+XPI_NAME = myextension
+
+...more stuff here...
+
+

Build makefile fügt die statischen Bibliotheken zusammen, die von jedem Untermodul generiert worden sind und erstellt eine einzelne (dynamische) Komponentenbibiliothek:

+
DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+IS_COMPONENT = 1
+MODULE = myextension
+LIBRARY_NAME = myAdvanced
+USE_STATIC_LIBS = 1
+
+XPI_NAME = myextension
+
+DEFINES += XPCOM_GLUE
+
+SHARED_LIBRARY_LIBS = \
+		$(DIST)/lib/$(LIB_PREFIX)myIntricate_s.$(LIB_SUFFIX) \
+		$(DIST)/lib/$(LIB_PREFIX)myMultifarious_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcomglue_s.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)xpcom.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)nspr4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plds4.$(LIB_SUFFIX) \
+                $(DIST)/lib/$(LIB_PREFIX)plc4.$(LIB_SUFFIX) \
+		$(NULL)
+
+REQUIRES	= \
+		xpcom \
+		string \
+		$(NULL)
+
+CPPSRCS		= \
+		Advanced.cpp \
+		$(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+LOCAL_INCLUDES += \
+        -I$(srcdir)/../intricate/src \
+        -I$(srcdir)/../multifarious/src \
+        $(NULL)
+
+

Die makefile im advanced/ Verzeichnis sollte die intricate/, multifarious/ und build/ Verzeichnisse in der DIRS Variable auflisten. Stellen Sie sicher, dass  build/ als letztes genannt wird, da die Komponentenbibliothek nicht erstellt werden kann, solange die makefiles nicht komplett sind.

+

Weitere Themen

+

Data Dateien zur Erweiterung hinzufügen

+

In einigen Fällen möchten Sie vielleicht zusätzliche Dateien zu Ihrer Erweiterung hinzufügen, die nicht in das chrome/ Unterverzeichnis gehören. Beispiele sind Datenbankdateien oder XML-Schemata. Das erreicht werden, indem ein zusätzlicher Schritt zur makefile hinzugefügt wird, welcher diese Dateien in das Erweiterungsverzeichnis kopiert.

+
Data Dateien in ein Zielverzeichnis kopieren
+

Nehmen wir an, dass Sie einige Dateien mit statistischen Daten haben, die Sie in Ihre Erweiterung einfügen wollen und für Komponenten verfügbar machen wollen. Sie haben diese Datei mit der Endung .TXT in ein stats/ Unterverzeichnis getan. Die folgende makefile Regel kann verwendet werden, um die Dateien zu kopieren:

+
export::
+	if test ! -d $(FINAL_TARGET)/stats; then \
+		$(NSINSTALL) -D $(FINAL_TARGET)/stats; \
+	fi
+	$(INSTALL) $(srcdir)/*.txt $(FINAL_TARGET)/stats
+
+
Auf Data Dateien über Komponenten zugreifen
+

Der Trick, welcher Ihre Daten zugänglich macht, ist herauszufinden, wo Ihr Hauptverzeichnis Ihrer Erweiterung ist. Um das möglich zu machen, wird die  nsIExtensionManager Schnittstelle später benötigt. In der Zwischenzeit gibt es einen Hack, der das auf einfache Art und Weise ermöglicht. In der Implementierung von jeder JavaScript XPCOM Komponente gibt es ein spezielles __LOCATION__ (zwei führenden und zwei schließende Unterstriche) Symbol, welches auf die Komponentenimplementierungsdatei zeigt. Sie können also eine einfache Komponente schreiben, die auf das Wurzelverzeichnis Ihrer Erweiterung rückschließt.

+

Dieser Artikel(engl.) erklärt wie man eine XPCOM Komponente in JavaScript erstellt. Sie brauchen dazu eine IDL Datei für eine Schnittstelle, die ungefähr so aussieht:

+
interface myILocation : nsISupports
+{
+    readonly attribute nsIFile locationFile;
+};
+
+

Legen Sie die IDL Datei in public/ Verzeichnis Ihres Projekts ab. Im src/ Verzeichnis platzieren Sie die JavaScript Datei, die die Komponente implementiert. Die Komponentenimplementierung enthält Methoden, die den Pfad zum Hauptverzeichnis der Erweiterung abrufen können:

+
myLocation.prototype =
+{
+  QueryInterface: function(iid)
+  {
+    if (iid.equals(nsISupports))
+      return this;
+    if (iid.equals(myILocation))
+      return this;
+
+    Components.returnCode = Components.results.NS_ERROR_NO_INTERFACE;
+    return null;
+  },
+
+  get locationFile()
+  {
+     return __LOCATION__.parent.parent;
+  }
+}
+
+

Es wird angenommen, dass sich die Komponente in einem Unterverzeichnis des Erweiterungsverzeichnis befindet (das Verzeichnis wird components/ genannt). Die Eigenschaft von __LOCATION__ gibt das components/ und das überliegende Verzeichnis, also das Hauptverzeichnis, zurück.

+

Der letzte Schritt ist die makfile anzupassen, sodass die JavaScript Datei an die richtige Stelle kopiert wird:

+
export::
+	$(INSTALL) $(srcdir)/*.js $(FINAL_TARGET)/components
+
+

Jetzt können Sie eine Instanz dieser Komponente starten und die locationFile Eigenschaft verwenden, um eine nsIFile Schnittstelle, welche auf Ihr Hauptverzeichnis zeigt, zu bekommen.

+

Drittanbieter Bibliotheken verwenden

+

Für anspruchsvollere Erweiterungen möchten Sie Drittanbieter Bibliotheken einbinden, die Ihnen spezialisierte Funktionen bieten, zum Beispiel für Datenbankverbindungen, Bildprozesse, Netzwerkoperationen und vielem mehr. Wenn Sie möchten, dass Ihre Erweiterungen unter Firefox auf allen Plattformen läuft, müssen Sie den Quelltext für die entsprechenden Bibliotheken haben.

+

Der Beste Ansatz ist, eine makefile im Mozilla-style für diese Bibliothek zu erstellen. Das funktioniert gut für Bibliotheken, die keine intensive Konfiguration erfordern. Ein gutes Beispiel ist die SQLite Bibliothek im Mozilla Build Tree unter db/sqlite. Wenn die makefile so angepasst wird, wird die Bibliothek als des Standard Mozilla Build Prozesses erstellt, welches zusätzliches Schritte unnötig macht. Der Nachteil ist, dass Sie jedes Mal die geänderte makefile aktualisieren müssen, wenn eine neue Version der Bibliothek ausgeliefert wird.

+

Bei Bibliotheken mit komplexen Konfigurationen, die keine Standard-Compiler verwenden oder andere speziellen Charakteristiken haben, kann es numgänglich sein, eine Mozilla-kompatible makefile zu erstellen. In diesem Fall würde ich empfehlen, dass Sie die komplette Bibliothek innerhalb des Projekts platzieren. Wenn die Bibliothek acmelib innerhalb des multifarious/ Unterprojekts verwendet wird, würde diese als Unterverzeichnis unter diesem Unterprojekt auftauchen (auf dem gleichen Level wie public/ und src/).

+

Natürlich bedeutet das, dass Sie die Bibliothek acmelib manuell kompilieren müssen, bevor Sie das Mozilla Build starten. Aber immerhin können Sie sich auf die Dateien beziehen und Bibliotheken importieren, indem Sie relative Pfade verwenden.

+

Kompilierung für mehrere Plattformen

+

TODO

+
+

Informationen zum Originaldokument

+ +
+

 

diff --git a/files/de/erweiterung_erstellen/index.html b/files/de/erweiterung_erstellen/index.html new file mode 100644 index 0000000000..0dffbcec99 --- /dev/null +++ b/files/de/erweiterung_erstellen/index.html @@ -0,0 +1,249 @@ +--- +title: Erweiterung erstellen +slug: Erweiterung_erstellen +tags: + - Erweiterungen +translation_of: Mozilla/Add-ons +--- +

Schnellstart

+
+

Sie können die Add-on-Fabrik aus der Add-on Entwicklerecke verwenden, um eine einfache Erweiterung als Grundlage für Ihre Arbeit zu erhalten. 

+

Eine ähnliche Hello World Erweiterung können Sie auch in einem weiteren Tutorial der MozillaZine Knowledge Base(engl.) erstellen.

+
+

Einführung

+

Dieses Tutorial führt Sie durch die erforderlichen Schritte, um eine sehr einfache Erweiterung zu erstellen:
+ Es wird der Statuszeile des Firefox ein Panel mit dem Text "Hallo, Welt!" hinzugefügt.

+
+

Hinweis: Dieses Tutorial behandelt die Erstellung von Erweiterungen für Firefox 1.5 und später.  Weitere Tutorials existieren, falls Sie eine Erweiterung für eine frühere Version erstellen möchten.

+

Ein Tutorial zur Erstellung einer Erweiterung für Thunderbird findet sich unter "Eine Erweiterung für Thunderbird erstellen".

+
+

Eine Entwicklungsumgebung einrichten

+

Erweiterungen werden in ZIP Dateien mit der Endung ".xpi" (“zippy” ausgesprochen) oder in Bundles verpackt und ausgeliefert.

+

Ein Beispiel zum Aufbau einer typischen XPI Datein:

+
exampleExt.xpi:
+              /install.rdf
+              /components/*
+              /components/cmdline.js
+              /defaults/
+              /defaults/preferences/*.js
+              /plugins/*
+              /chrome.manifest
+              /chrome/icons/default/*
+              /chrome/
+              /chrome/content/
+
+

Wir werden eine ähnliche Verzeichnisstruktur in diesem Tutorial verwenden. Fangen wir also damit an, einen Ordner für unsere Erweiterung zu erstellen. Das kann überall auf der Festplatte geschehen (z.B. C:\erweiterungen\meine_erweiterung\ oder ~/erweiterungen/meine_erweiterung/). In Ihrem neuem Erweiterungsordner erstellen Sie einen neuen Ordner, welcher "chrome" genannt wird und innerhalb dieses Verzeichnisses wiederum erstellen Sie einen Ordner der "content" genannt wird.

+

Im Wurzelverzeichnis Ihres Erweiterungsverzeichnis erstellen Sie zwei leere Textdateien, genannt chrome.manifest und install.rdf.
+ Im chrome/content Verzeichnis erstellen Sie eine neue Textdatei, die Sie sample.xul nennen.

+

Sie sollten nun diese Verzeichnisstruktur erstellt haben:

+
<Erweiterungspfad>\
+          install.rdf
+          chrome.manifest
+          chrome\
+             content\
+                sample.xul
+
+

Bitte lesen Sie die zusätzlichen Informationen zum Einrichten einer Entwicklungsumgebung für Erweiterungen.

+

{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach ein Icon, welches icon.png heißt, in Wurzelverzeichnis des Add-ons packen. Dies erlaubt Ihnen die Anzeige Ihres Add-on Icons sogar wenn das Add-on deaktiviert ist oder wenn im Manifest kein Eintrag zur iconURL vorhanden ist.") }}

+

Das Installationsmanifest erstellen

+

Öffnen Sie die Datei install.rdf, welche Sie am Anfang erstellt haben und schreiben Sie folgendes hinein:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>sample@example.net</em:id>
+    <em:version>1.0</em:version>
+    <em:type>2</em:type>
+
+    <!-- Angaben zu unterstützten Anwendungsversionen -->
+    <em:targetApplication>
+      <Description>
+        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+        <em:minVersion>1.5</em:minVersion>
+        <em:maxVersion>3.6.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+    <!-- Sichtbare Daten -->
+    <em:name>sample</em:name>
+    <em:description>A test extension</em:description>
+    <em:creator>Your Name Here</em:creator>
+    <em:homepageURL>http://www.example.com/</em:homepageURL>
+  </Description>
+</RDF>
+
+ +

(Wenn Sie eine Nachricht erhalten, dass Ihre install.rdf nicht korrekt formatiert ist, kann es hilfreich sein, die Datei über Datei->Öffnen zu öffnen, sodass XML Fehler angezeigt werden. In meinem Fall, hatte ich ein Leerzeichen vor "<?xml"...

+

Erweiterungen, die mit Firefox 2.0.0.x funktionieren sollen, sollten die maximale Versione auf "2.0.0.*" setzen. Erweiterungen, die mit Firefox 1.5.0.x funktionieren sollten eine maximale Version von "1.5.0.*" festlegen.

+

Siehe Installationsmanifest für eine komplette Liste von erforderlichen und optionalen Eigenschaften.

+

Speichern Sie die Datei ab.

+

Den Browser durch XUL erweitern

+

Die Benutzeroberfläche von Firefox ist in XUL und JavaScript geschrieben. XUL ist XML, welches Benutzeroberflächen-Widgets wie Schaltflächen, Menüs, Toolbars, etc. bereitstellt. Benutzeraktionen werden über JavaScript gesteuert.

+

Um den Browser zu erweitern, werden wir Teile der Benutzeroberfläche des Browser ändern und Teile hinzufügen. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Browserfenster einbauen und diese verändern, indem Skripte die neuen Abläufe steuern.

+

Der Browser wurde in einer XUL Datei namens browser.xul implementiert. ($FIREFOX_INSTALLATIONSVERZEICHNIS/chrome/browser.jar enthält content/browser/browser.xul).  In browser.xul können wir die Statusleiste finden, welche ungefähr so aussieht.:

+
<statusbar id="status-bar">
+ ... <statusbarpanel>s ...
+</statusbar>
+
+

<statusbar id="status-bar"> ist ein "merge point" für ein XUL Overlay.

+
XUL Overlays
+

XUL Overlays bieten eine Möglichkeit an, weitere UI Widgets an einem XUL Dokument anzuhängen, während das Programm läuft. Ein XUL Overlay ist eine .xul Datei, welche XUL Fragmente festlegt, um bestimmte "merge points" in einem "master" Dokument einzufügen. Diese Fragmente können Widgets festlegen, die eingefügt, entfernt oder verändert werden sollen.

+

Beispiel XUL Overlay Dokument

+
<?xml version="1.0"?>
+<overlay id="sample"
+         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Hello, World"  />
+ </statusbar>
+</overlay>
+
+

Die <statusbar> genannt status-bar legt den "merge point" im Browserfenster fest, die wir anhängen wollen.

+

Das <statusbarpanel> Kindelement ist ein neues Widget, welches wir in den "merge point" einfügen wollen.

+

Nehmen Sie diesen Beispielcode und speichern Sie ihn in eine Datei sample.xul in dem Verzeichnis chrome/content, welches Sie erstellt haben.

+

Für weitere Informationen über das zusammenfügen von Widgets und der Veränderung an der Benutzeroberfläche mit Overlays, siehe weiter unten.

+

Chrome URIs

+

XUL-Dateien sind Teil von „Chrome-Paketen“, Bündeln von Komponenten der Benutzeroberfläche, die über chrome:// URIs geladen werden. Diese URIs zu XUL-Inhalten wurden von den Mozilla-Entwicklern entworfen, um dem Problem zu entgehen, dass file:// URIs von Plattform zu Plattform und von System zu System variieren. Die installierte Anwendung weiß auf diese Weise stets, wo sich mit chrome:// angesprochene Dateien relativ zum Installationspfad befinden.

+

Das Browser-Fenster ist: chrome://browser/content/browser.xul Versuchen Sie, diese URL in die Adressleiste von Firefox zu tippen! oder: chrome://predatorIndex/$34#2/browser.xvp

+

Chrome URIs bestehen aus verschiedenen Komponenten:

+ +

Somit lädt chrome://foo/skin/bar.png die Datei bar.png aus  dem "foo" Theme-Abschnitt skin.

+

Wenn Sie Inhalt über eine Chrome URI laden, benutzt Firefox die Chrome Registry, um diese URIs in die tatsächlichen Quelldateien (oder in .jar-Pakete) zu übertragen.

+

Ein Chrome-Manifest erstellen

+

Für weitere Informationen über Chrome Manifestdateien und die Eigenschaften, die diese unterstützen, siehe Chrome Manifest.

+

Öffnen Sie die Datei chrome.manifest, welche Sie im Wurzelverzeichnis Ihrer Erweiterung erstellt haben.

+

Fügen Sie den folgenden Code hinzu:

+
content     sample    chrome/content/
+
+

(Achten Sie darauf den Trailing-Slash, "/" anzugeben! Ohne diesen wird das Paket nicht registriert.)

+

Diese Zeile legt fest:

+
    +
  1. Typ des Materials innerhalb des Chrome-Pakets.
    2. +
  2. Name des Chrome-Pakets (stellen Sie sicher, dass Sie nur klein geschriebene Zeichen für den Paketnamen verwenden ("sample"), da Firefox/Thunderbird keine gemischten Zeichen in Version 2 und früher erkennen - {{ Bug(132183) }})
    3. +
  3. Ort der Dateien des Chrome-Pakets
    4. +
+

Diese Zeile sagt also, dass wir für das Chrome-Paket sample, die content Dateien unter chrome/content finden können.

+

Beachten Sie, dass content, locale und skin Dateien in den Ordnern content, locale und skin in einemchrome Unterverzeichnis aufbewahrt werden müssen.

+

Speichern Sie die Datei ab. Wenn Sie Firefox mit Ihrer Erweiterung starten (später in diesem Tutorial), wird dies das Chrome-Paket registrieren.

+

Overlay registrieren

+

Firefox muss Ihr Overlay mit dem Browserfenster zusammenfügen, wenn eines angezeigt wird. Fügen Sie daher die folgende Zeile in Ihre chrome.manifest Datei:

+
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul
+
+

Das teilt Firefox mit, sample.xul mit browser.xul zusammenzufügen, wenn browser.xul geladen wird.

+

Testen

+

Zunächst müssen wir Firefox von Ihrer Erweiterung erzählen. Während der Entwicklungsphase für Firefox 2.0 und höher, können Sie Firefox das Verzeichnis mitteilen, in welchem Sie Ihre Erweiterung entwickeln, sodass diese jedes Mal, wenn Sie Firefox neu starten, geladen wird.

+
    +
  1. Wechseln Sie zum Profilordner und darunter in das Profil, in welchem Sie arbeiten möchten (z.B. Firefox/Profiles/<profile_id>.default/).
    2. +
  2. Öffnen Sie das Verzeichnis "extensions/" oder erstellen Sie dieses, wenn es erforderlich ist.
    3. +
  3. Erstellen Sie eine neue Textdatei und schreiben Sie den kompletten Pfad zu Ihrem Entwicklungsverzeichnis hinein (z.B. C:\extensions\my_extension\ oder ~/extensions/my_extension/). Windows Benutzer sollten auf die Slash-Richtung achten und jedersollte daran denken einen schließenden Slash anzuhängen und jedes Leerzeichen zu entfernen.
    4. +
  4. Speichen Sie die Datei mit der ID Ihrer Erweiterung als Namen ab (z.B. sample@example.net). Keine Dateiendung.
    5. +
+

Jetzt sollten Sie soweit sein, um einen ersten Test Ihrer Erweiterung durchführen zu können!

+

Starten Sie Firefox. Firefox wird den Textlink zu Ihrer Erweiterung erkennen und die Erweiterung installieren. Wenn das Browserfenster angezeigt wird, sollten Sie den Text "Hello, World!" auf der rechten Seite der Statusleiste sehen.

+

Nun können Sie zurück zur .xul Datei gehen, Änderungen vornehmen, Firefox schließen und neu starten und Ihre Änderungen betrachten.

+

Packen

+

Jetzt, wo die Erweiterung funktioniert, können Sie diese zur Installation und Verwendung packen.

+

Zippen Sie die Inhalte Ihres Erweiterungsverzeichnis (nicht den Ordner Ihrer Erweiterung selbst) und benennen Sie die .zip Datei in eine .xpi Datei um. Unter Windows XP können Sie einfach alle Dateien und Unterordner im Ordner markieren, Rechts-Klick drücken und "Senden an -> Komprimierter Ordner" wählen. Eine .zip Datei wird für Sie erstellt. Jetzt müssen Sie diese nur noch umbenennen und Sie sind fertig!

+

Unter Mac OS X, können Sie mit einem Rechts-Klick auf die Inhalte Ihres Erweiterungsordners klicken und "Erstelle Archiv von..." wählen, um die .zip Datei zu erstellen. Mac OS X fügt jedoch versteckte Dateien in Ordnern hinzu, sodass Sie das Terminal verwenden sollten, um die versteckten Dateien zu löschen (solche die mit einem Punkt beginnen) und dann den zip Befehl verwenden, um die .zip Datei zu erstellen.

+

Unter Linux verwenden Sie womöglich auch das Kommandozeilen ZIP-Tool.

+

Falls Sie die 'Extension Builder' Erweiterung installiert haben, kann diese die .xpi Datei für Sie kompilieren (Tools -> Extension Developer -> Extension Builder). Wechseln Sie einfach zum Verzeichnis, wo sich Ihre Erweiterung befindet (install.rdf etc.) und drücken Sie auf die Schaltfläche 'Build Extension'. Diese Erweiterung verfügt über eine Menge weiterer Tools, die die Entwicklung vereinfacht.

+

Laden Sie nun die .xpi Datei auf Ihren Server uns stellen Sie sicher, dass diese als application/x-xpinstall ausgeliefert wird. Sie können darauf verweisen und anderen erlauben die Erweiterung herunterzuladen und zu installieren. Zu Testzwecken können wir die Datei einfach in das Erweiterungsfenster über "Tools -> Erweiterungen in Firefox 1.5.0.x" oder "Tools -> Add-ons in späteren Versionen" hineinziehen.

+
Installation von einer Webseite
+

Es gibt unterschiedliche Wege, die es ermöglichen eine Erweiterung von Webseiten zu installieren, darunter das direkte Verweisen auf die XPI Dateien und die Benutzung des InstallTrigger Objekts. Erweiterungs- und Webautoren werden dazu aufgefordert die InstallTrigger Methode zu verwenden, um XPIs zu installieren, weil es für Benutzer am Besten ist.

+
Verwendung von addons.mozilla.org
+

Mozilla Add-ons ist eine Vertriebsseite auf der Sie Ihre Erweiterungen kostenlos bereitstellen können. Ihre Erweiterung wird auf Mozillas Mirror-Netzwerk gehostet, um sicherzustellen, dass Ihr Download verfügbar ist, selbst wenn Ihre Erweiterung sehr beliebt ist. Mozillas Add-on-Seite ermöglicht außerdem eine einfachere Installation und stellt Benutzern automatisch neuere Versionen bereit, wenn Sie Ihre Erweiterung aktualisieren. Zusätzlich erlauben Mozilla Add-ons Benutzern Kommentare und Feedback zu Ihrer Erweiterung zu hinterlassen. Es wird empfohlen, dass Sie Ihre Erweiterung über addons.mozilla.org vertreiben!

+

Besuchen Sie http://addons.mozilla.org/de/developers/, um einen Account zu erstellen und Ihre Erweiterung dort zu vertreiben!

+

Hinweis: Ihre Erweiterung wird weiter verbreitet und mehr heruntergeladen, wenn Sie eine gute Beschreibung angeben und einige Screenshot von der Erweiterung in Aktion bereitstellen.

+
Erweiterungen über einen separaten Installer installieren
+

Es ist möglich, eine Erweiterung in einem speziellem Verzeichnis zu installieren, sodass diese automatisch beim nächsten Start installiert wird. Die Erweiterung ist dann für jedes Profil verfügbar. Siehe Erweiterungen installieren für weitere Informationen.

+

Unter Windows, können Informationen über Erweiterungen der Registrierung hinzugefügt werden und die Erweiterung wird automatisch beim nächsten Start der Anwendung installiert. Das erlaubt Anwendungsinstallationen einfach Erweiterungen mit zu installieren. Siehe Erweiterungen über die Windows Registrierung hinzufügen für weitere Informationen.

+

Weiteres zu XUL Overlays

+

Zusätzlich zu UI Widgets können Sie XUL Fragmente innerhalb von Overlays benutzen um:

+ +
<statusbarpanel position="1" ...  />
+
+<statusbarpanel insertbefore="other-id" ...  />
+
+<statusbarpanel insertafter="other-id" ...  />
+
+

Neue Elemente zur Benutzeroberfläche hinzufügen

+

Sie können eigene Fenster und Dialogboxen als separate .xul Dateien erstellen, Funktionen über Aktionen in .js Dateien implementieren und DOM Methoden verwenden, um UI Widgets zu verändern. Sie können Style Regeln .css Dateien verwenden, um Bilder anzuhängen und Farben festzulegen etc.

+

Schauen Sie in die XUL Dokumentation für weitere Ressourcen für XUL Entwickler.

+

Default-Dateien

+

Default-Dataien, welche Sie in ein Benutzerprofil platzieren, sollten in dem Verzeichnis defaults/ unter dem Wurzelverzeichnis der Erweiterung abgelegt werden. Standard preferences .js Dateien sollten in defaults/preferences/ gespeichert werden - wenn Sie diese dort platzieren, werden Sie automatisch von Firefox geladen, sodass Sie Zugang über Preferences API haben.

+

Eine Beispiel für eine default preference Datei:

+
pref("extensions.sample.username", "Joe"); //a string pref
+pref("extensions.sample.sort", 2); //an int pref
+pref("extensions.sample.showAdvanced", true); //a boolean pref
+
+

XPCOM Komponenten

+

Firefox unterstützt XPCOM Komponenten für Erweiterungen. Sie können Ihre eigenen Komponenten in JavaScript oder in C++ erstellen (unter Verwendung der Gecko SDK).

+

Platzieren Sie alle .js oder .dll Dateien in das Verzeichnis "components/" - die Komponenten werden automatisch registriert, wenn Firefox das erste Mal nach der Installation Ihrer Anwendung gestartet wird.

+

Für weitere Informationen siehe XPCOM Komponenten in JavaScript, Eine binäre XPCOM Komponente über Visual Studio erstellen und XPCOM Komponenten erstellen.

+
Kommandozeile der Anwendung
+

Eine der möglichen Verwendungsmöglichkeiten von XPCOM Komponenten, ist das Hinzufügen von einem Kommandozeilen-Handler für Firefox oder Thunderbird. Sie können diese Technik verwenden, um Ihre Erweiterung als eine Anwendung laufen zu lassen:

+
 firefox.exe -myapp
+
+

Siehe Chrome: Command Line und diese Forendiskussion für Details.

+

Lokalisierung

+

Um mehr als eine Sprache zu unterstützen, sollten Sie Strings aus Ihrem Inhalt über Entities und String Bundles aufteilen. Es ist viel einfacher, dies schon während der Entwicklung der Erweiterung zu tun, als es später mühsam zu ändern!

+

Informationen zur Lokalisierung wird im "locale" Verzeichnis der Erweiterung gespeichert. Um zum Beispiel eine Sprache zu unserer Beispiel-Erweiterung hinzuzufügen, erstellen Sie ein Verzeichnis "locale" im Chrome-Ordner (wo sich das "content" Verzeichnis befindet) und fügen die folgende Zeile in Ihre chrome.manifest Datei hinzu:

+
locale sample en-US chrome/locale/en-US/
+
+

Um lokalisierbare Attributwerte in XUL zu erstellen, speichern Sie die Werte in eine .dtd Datei, welche in den "locale" Ordner kommt und so aussieht:

+
<!ENTITY  button.label     "Click Me!">
+<!ENTITY  button.accesskey "C">
+
+

Fügen diese Sie dann am Anfang Ihres XUL Dokument (aber unter dem "<?xml version"1.0"?>") so hinzu:

+
<!DOCTYPE window SYSTEM "chrome://packagename/locale/filename.dtd">
+
+

wobei window der Wert von localName des Wurzelements der XUL Dokuments ist und der Wert der SYSTEM Eigenschaft die Chrome-URI zur Entity-Datei darstellt. Für unsere Beispiel-Erweiterung ist das Wurzelelement das overlay.

+

Um die Entities zu verwenden, ändern Sie Ihr XUL wie folgt:

+
<button label="&button.label;" accesskey="&button.accesskey;"  />
+
+

Die Chrome Registrierung wird sicher stellen, dass die Entity-Datei vom Lokalisierungs-Bundle passend zur ausgewählten Sprache geladen wird.

+

Für Strings, die Sie in Skripten verwenden, erstellen Sie eine .properties Datei, eine Textdatei, die einen String pro Zeile in diesem Format bereitstellt:

+
key=value
+
+

und dann verwenden Sie nsIStringBundleService/nsIStringBundle oder den <stringbundle> Tag, um die Werte im Skript zu laden.

+

Den Browser verstehen

+

Verwenden Sie den DOM Inspector um das Browserfenster oder ein anderes XUL Fenster, welches Sie erweitern, zu betrachten.

+

Hinweis: DOM Inspector ist nicht Teil der Standard Firefox installation. Seit Firefox 3 Beta 4 ist der DOM Inspector auf Firefox Add-ons als eine eigenständige Erweiterung verfügbar. Für frühere Versionen müssen Sie mit einem benutzerdefinierten Pfad neu installieren und DOM Inspector (oder Developer Tools in Firefox 1.5) wählen, wenn kein "DOM Inspector" in Ihrem Tools-Menüs verfügbar ist.

+

Erweiterungen debuggen

+

Analytische Tools zum Debugging

+ +

printf Debugging

+ +

Fortgeschrittenes Debugging

+ +

Weitere Informationen

+ diff --git a/files/de/erweiterungen/index.html b/files/de/erweiterungen/index.html new file mode 100644 index 0000000000..2973c54641 --- /dev/null +++ b/files/de/erweiterungen/index.html @@ -0,0 +1,94 @@ +--- +title: Erweiterungen +slug: Erweiterungen +tags: + - Erweiterungen +translation_of: Mozilla/Add-ons +--- +
+ Erweiterung erstellen
+ Erklärt Schritt für Schritt, wie eine Firefox Erweiterung erstellt wird.
+
+

Erweiterungen fügen Mozilla Applikationen wie Firefox und Thunderbird neue Funktionalitäten hinzu. Von einem einzelnen Button für die Symbolleiste, bis zu einem komplett neuem Feature können unterschiedlichste Funktionen hinzugefügt werden. Erweiterungen erlauben es, die Anwendung den benutzerspezifischen Anforderungen anzupassen während die Downloadgröße klein gehalten wird.

+

Erweiterungen unterscheiden sich von Plugins, welche dem Browser helfen, bestimmte Inhalte wie beispielweise Multimedia Dateien anzuzeigen. Erweiterungen unterscheiden sich außerdem auch von Suchplugins, welche zusätzliche Suchmaschinen zur Suchleiste hinzufügen.

+
+ + + + + + + +
+

Dokumentation

+
+
+ Einrichten einer Entwicklungsumgebung für Erweiterungen
+
+ Ein paar grundlegende Tipps für die Einrichtung, die die Entwicklung von Erweiterungen vereinfachen.
+
+ Bootstrapped Extensions {{ gecko_minversion_inline("2.0") }}
+
+ Wie man Erweiterungen erstellt, die installiert, deinstalliert und aktualisiert werden können ohne, dass ein Neustart der Anwendung erforderlich ist.
+
+ XUL School Tutorial
+
+ Ein umfassendes Tutorial zur Entwicklung von Erweiterungen.
+
+ Erweiterung erstellen
+
+ Dies soll eine kleine Einführung darstellen, wie man einfachste Erweiterungen für den Firefox erstellt.
+
+ Sicherheit von Erweiterungen
+
+ Leitfaden, um die Sicherheit von Erweiterungen zu gewährleisten.
+
+ Performance von Erweiterungen
+
+ Wie Erweiterungen erstellt werden, die schnell sind und nicht die Performance der Anwendung beeinträchtigen.
+
+ Packen von Erweiterungen
+
+ Beschreibung, wie die Firefox Erweiterung für Download und Installation gepackt wird.
+
+ Erweiterungen installieren
+
+ Wie Erweiterungen programmgesteuert installiert werden können.
+
+ Ein Add-On auf AMO anbieten
+
+ Wie man ein Add-On auf AMO veröffentlichen kann.
+
+ Häufig gestellte Fragen zu Erweiterungen
+
+ Häufige Fragen und Antworten über die Entwicklung von Erweiterungen
+
+

Firefox

+

Thunderbird

+

SeaMonkey (Unterstützung von Erweiterungen in SeaMonkey 2)

+

Fennec (Mobiler Browser)

+

alles anzeigen...

+ 		+

Community

+ +

Tools

+ + + +
diff --git a/files/de/erweiterungen_faq/index.html b/files/de/erweiterungen_faq/index.html new file mode 100644 index 0000000000..7b158c3814 --- /dev/null +++ b/files/de/erweiterungen_faq/index.html @@ -0,0 +1,57 @@ +--- +title: Erweiterungen FAQ +slug: Erweiterungen_FAQ +tags: + - Erweiterungen +translation_of: Archive/Mozilla/Extension_Frequently_Asked_Questions +--- +

Dies ist eine Sammlung mit häufig gestellten Fragen zur Entwicklung von Erweiterungen. Die meisten werden derzeit wohl für den Firefox geschrieben. Viele, wenn nicht sogar alle, sollten relativ einfach an SeaMonkey, Thunderbird oder jede andere Anwendung angepasst werden können. Für Thunderbird gibt es außerdem HowTos sowie weitere FAQs.

+

Falls Sie sich fragen, wo Sie am besten beginnen sollten, versuchen Sie es mit unserem Tutorial Erweiterung_erstellen oder dem Getting started Tutorial auf MozillaZine . Sie können den Extension Wizard benutzen, um ein Template für den ersten Start zu erstellen.

+

Richten Sie sich außerdem eine Entwicklungsumgebung ein.

+

Debuggen

+

Sie sollten eine Entwicklungsumgebung einrichten bevor Sie versuchen eine Erweiterung zu debuggen.

+

Der Venkman JavaScript Debugger sollte in schwierigen Fällen nützlich sein. Vergessen Sie dabei nicht die "Debug -> Exclude Browser Files" Option zu deaktivieren, wenn Sie an einer Erweiterung arbeiten.

+

Wie finde ich Fehler in meinem Code?

+

Wenn die Option javascript.options.showInConsole auf true eingestellt ist werden alle Fehler in der Fehlerkonsole gemeldet. Wenn alle JavaScriptfehler in der Konsole geloggt werden, ist es einfacher die Bugs im Code zu verfolgen.

+

Wie kann ich den Ablauf meiner Erweiterung verfolgen?

+

Sie können alert(), dump() oder Components.utils.reportError() benutzen. Mithilfe von {{ Interface("nsIConsoleService") }} können ebenfalls variable Daten sowie Debuggingtexte an die Fehlerkonsole gesendet werden. Alternativ kann die Venkman JavaScript Debugger Erweiterung benutzt werden.

+

Warum läuft mein Skript nicht wie erwartet?

+

Falls sich ihr Script nicht wie erwartet verhält, sollten Sie zu erst die Fehlerkonsole auf Fehler prüfen (sie oben).

+

Häufig wird versucht auf das DOM eines Fensters zuzugreifen noch bevor dieses vollständig geladen wurde. Das passiert, wenn der Initialisierungscode am Anfang des Skriptes eingebunden wird (u.a. außerhalb einer Funktion). Durch die Nutzung eines Loadevent-Listeners kann dieses Problem gelöst werden, da der Code erst ausgeführt wird wenn die Seite vollständig geladen wurde:

+
function exampleBrowserStartup(event)
+{
+  // Packen Sie hier Ihren Code hinein
+}
+window.addEventListener("load", exampleBrowserStartup, false);
+
+

Falls Sie einen ähnlichen Fehler wie etwa »JavaScript error: chrome://myextension/content/overlay.js, line 47: missing ; before statement« sehen, verwenden Sie möglicherweise Funktionen oder Schreibweisen aus JavaScript 1.7, während Ihre Erweiterung unter einer früheren Version betrieben wird.  Um sicherzustellen, dass Ihr Code unter JavaScript 1.7 läuft, schreiben Sie einfach:

+
<script type="application/x-javascript" src="overlay.js;version=1.7"/>
+
+

Warum kann ich auf die angezeigte Webseite nicht zugreifen?

+

Um auf die angezeigte Webseite von einem browser.xul overlay zuzugreifen, müssen Sie content.document statt document benutzen, da dieses das Browserfenster selbst repräsentiert. Weitere Details finden Sie unter Mit Fenstern im Chrome Code arbeiten

+

Außerdem verhindert der XPCNativeWrapper standardmäßig den Zugriff auf Script-definierte Objekte der Webseite und einige andere Dinge.

+

Warum kann ich kein XMLHttpRequest in meiner Erweiterung verwenden?

+

Wenn Sie versuchen Informationen einer Erweiterung über XMLHttpRequest zu senden oder zu empfangen, werden Sie möglicherweise Domain-übergreifend arbeiten. Normalerweise kann dies ein Problem darstellen, aber so lange Sie die Anfrage aus einem Chrome Fenster senden, befinden Sie sich innerhalb des Sicherheitsspielraum und können damit arbeiten.

+

Sie müssen sicherstellen, dass Sie das Domain-übergreifende XMLHttpRequest von einem JavaScript Code ausführen, der von einem XUL Fenster referenziert wird. Wenn Sie versuchen, die Anfrage in Beziehung zum Browser-Inhalt aufzurufen (als "document" des XUL Fenster) werden Sie einen »Zugang Verweigert« Fehler erhalten.

+

Ich bekomme einen XML-Parser-Fehler, aber die Datei sieht einwandfrei aus!

+

Eine häufiger Grund für Parser-Fehler (roter text mit einem -------------^ darunter) ist ein „&“ oder „<“ Zeichen im Script oder ein Attributwert mit einer speziellen Bedeutung in XML. Zum Beispiel:

+
<button oncommand="window.open('http://example.com/q?param1=value&param2=val2')"/>
+
+

oder

+
<script>function lesser(a,b) { return a < b ? a : b; }</script>
+

Das Problem kann auf folgende Arten gelöst werden:

+
  1. Ersetze Sie das Zeichen mit seiner XML-konformen Repräsentation. (z.B.: „&“ wird zu „&amp;“ und „<“ wird zu „&lt;“)
  2. Falls es sich um einen Textknoten wie z.B. ein Script handelt, platzieren Sie diesen in CDATA Tags:
    3. <script><![CDATA[
+   function lesser(a,b) {
+     return a < b ? a : b;
+   }
+ ]]></script>
+
  3. Verschiebe Sie das Script in eine externe Datei und binden Sie diese ein:
    4. <script type="application/x-javascript" src="our.js"/>
    +
+

Beispiel Code

+

Der einfachste Weg ist es wohl eine passende Erweiterung (oder Teile von Mozilla selbst) zu finden, die genau das tut was man benötigt und dort in den Code schaut. (Die XPI und JAR Dateien sind im ZIP-Format komprimiert).

+

Außerdem gibt noch weitere Dokumentationen. Zu finden sind diese in der Liste relevanter Artikel auf MDC, Codeschnipsel und Beispielcode auf MozillaZine.

+

Wo finde ich weitere Hilfe?

+

Unter Erweiterungen/Andere Ressourcen und Erweiterungen/Community.

+

Bevor Sie nach Hilfe fragen, kontrollieren Sie Ihre Entwicklungsumgebung und überprüfen Sie die Fehlerkonsole auf relevante Einträge. Außerdem sollten Sie zumindest eine einfache Suche durchgeführt haben und diese FAQs gelesen haben.

+

{{ languages( { "en": "en/Extension_Frequently_Asked_Questions", "es": "es/Preguntas_frecuentes_sobre_Extensiones", "fr": "fr/Foire_aux_questions_sur_les_extensions", "it": "it/Domande_frequenti_sulle_Estensioni", "ja": "ja/Extension_Frequently_Asked_Questions", "pl": "pl/Cz\u0119sto_zadawane_pytania_dotycz\u0105ce_rozszerze\u0144", "ru": "ru/FAQ_\u043f\u043e_\u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f\u043c" } ) }}

diff --git "a/files/de/erweiterungen_f\303\274r_firefox_3_aktualisieren/index.html" "b/files/de/erweiterungen_f\303\274r_firefox_3_aktualisieren/index.html" new file mode 100644 index 0000000000..409fc00546 --- /dev/null +++ "b/files/de/erweiterungen_f\303\274r_firefox_3_aktualisieren/index.html" @@ -0,0 +1,232 @@ +--- +title: Erweiterungen für Firefox 3 aktualisieren +slug: Erweiterungen_für_Firefox_3_aktualisieren +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +--- +
+ +

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.

+ + + +

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

+ + + +

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:

+ + + +

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!

+ + diff --git "a/files/de/farbverl\303\244ufe_in_css/index.html" "b/files/de/farbverl\303\244ufe_in_css/index.html" new file mode 100644 index 0000000000..e5ed267991 --- /dev/null +++ "b/files/de/farbverl\303\244ufe_in_css/index.html" @@ -0,0 +1,408 @@ +--- +title: Verwendung von CSS Farbverläufen +slug: Farbverläufe_in_CSS +tags: + - Beispiel + - CSS + - CSS Bild + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web + - erweitert +translation_of: Web/CSS/CSS_Images/Using_CSS_gradients +--- +

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

+ + diff --git "a/files/de/firefox_1.5_f\303\274r_entwickler/changing_the_priority_of_http_requests/index.html" "b/files/de/firefox_1.5_f\303\274r_entwickler/changing_the_priority_of_http_requests/index.html" new file mode 100644 index 0000000000..3bb91c8f5a --- /dev/null +++ "b/files/de/firefox_1.5_f\303\274r_entwickler/changing_the_priority_of_http_requests/index.html" @@ -0,0 +1,66 @@ +--- +title: Die Priorität von HTTP-Anfragen ändern +slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests +tags: + - HTTP +translation_of: Mozilla/Firefox/Releases/1.5/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/firefox_1.5_f\303\274r_entwickler/index.html" "b/files/de/firefox_1.5_f\303\274r_entwickler/index.html" new file mode 100644 index 0000000000..087bc441aa --- /dev/null +++ "b/files/de/firefox_1.5_f\303\274r_entwickler/index.html" @@ -0,0 +1,123 @@ +--- +title: Firefox_1.5_für_Entwickler +slug: Firefox_1.5_für_Entwickler +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 +--- +
{{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:

+ + + +

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

Neue Möglichkeiten für den Endbenutzer

+ +

User Experience

+ + + +

Sicherheit und Privatsphäre

+ + + +

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

+ +

{{ languages( { "en": "en/Firefox_1.5_for_developers", "es": "es/Firefox_1.5_para_Desarrolladores", "fr": "fr/Firefox_1.5_pour_les_d\u00e9veloppeurs", "it": "it/Firefox_1.5_per_Sviluppatori", "ja": "ja/Firefox_1.5_for_developers", "nl": "nl/Firefox_1.5_voor_ontwikkelaars", "pl": "pl/Firefox_1.5_dla_programist\u00f3w", "pt": "pt/Firefox_1.5_para_Desenvolvedores" } ) }}

diff --git "a/files/de/firefox_3.5_f\303\274r_entwickler/index.html" "b/files/de/firefox_3.5_f\303\274r_entwickler/index.html" new file mode 100644 index 0000000000..33e6a0c728 --- /dev/null +++ "b/files/de/firefox_3.5_f\303\274r_entwickler/index.html" @@ -0,0 +1,241 @@ +--- +title: Firefox_3.5_für_Entwickler +slug: Firefox_3.5_für_Entwickler +tags: + - Firefox 3.5 + - Gecko 1.9.1 +translation_of: Mozilla/Firefox/Releases/3.5 +--- +
{{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 {{ interface("nsIFile") }} bezieht.
    • +
  • Die gDownloadLastDirPath-Variable wurde umbenannt zu: gDownloadLastDirFile, da es sich nun auf eine {{ interface("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

+ + + +

{{ languages( {"en":"en/Firefox_3.5_for_developers", "es":"es/Firefox_3.5_para_desarrolladores", "ja":"Ja/Firefox_3.5_for_developers", "fr": "fr/Firefox_3.5_pour_les_développeurs", "pl": "pl/Firefox_3.5_dla_programistów", "pt": "pt/Firefox_3.5_para_desenvolvedores", "ru": "ru/Firefox_3.5_для_разработчика", "zh-tw": "Zh_tw/Firefox_3.1_技術文件"} ) }}

+
+
diff --git "a/files/de/firefox_3_f\303\274r_entwickler/index.html" "b/files/de/firefox_3_f\303\274r_entwickler/index.html" new file mode 100644 index 0000000000..3db4c6f4e3 --- /dev/null +++ "b/files/de/firefox_3_f\303\274r_entwickler/index.html" @@ -0,0 +1,173 @@ +--- +title: Firefox 3 für Entwickler +slug: Firefox_3_für_Entwickler +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3 +--- +
{{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 {{ Interface("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 {{ Interface("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 {{ Interface("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 {{ Interface("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.

+ + + +

Sicherheit und Privatsphäre

+ + + +

Performance

+ + + +

Siehe auch

+ + + +

{{ languages( { "en": "en/Firefox_3_for_developers", "es": "es/Firefox_3_para_desarrolladores", "fr": "fr/Firefox_3_pour_les_d\u00e9veloppeurs", "ja": "ja/Firefox_3_for_developers", "ko": "ko/Firefox_3_for_developers", "pl": "pl/Firefox_3_dla_programist\u00f3w", "pt": "pt/Firefox_3_para_desenvolvedores" } ) }}

diff --git a/files/de/firefox_addons_developer_guide/index.html b/files/de/firefox_addons_developer_guide/index.html new file mode 100644 index 0000000000..8dbc807d9b --- /dev/null +++ b/files/de/firefox_addons_developer_guide/index.html @@ -0,0 +1,15 @@ +--- +title: Firefox addons developer guide +slug: Firefox_addons_developer_guide +translation_of: Archive/Add-ons/Overlay_Extensions/Firefox_addons_developer_guide +--- +

Kapitel 1: Einführung in Erweiterungen

+

Kapitel 2: Technologien die in den Erweiterungen verwendet werden

+

Kapitel 3: Einführung zu XUL - Wie man eine erweiterte Benutzeroberfläche erstellt

+

Kapitel 4: Verwendung von XPCOM - Umsetzung von fortgeschrittenen Prozessen

+

Kapitel 5: Bauen wir eine Firefox Erweiterung

+

Lizenz und Autoren

+ + + +
{{ Next("/de/docs/Firefox_addons_developer_guide/Einführung_in_Erweiterungen")}}
diff --git a/files/de/games/index.html b/files/de/games/index.html new file mode 100644 index 0000000000..d22501e177 --- /dev/null +++ b/files/de/games/index.html @@ -0,0 +1,74 @@ +--- +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/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html b/files/de/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html new file mode 100644 index 0000000000..c093fff63b --- /dev/null +++ b/files/de/gecko-dom-referenz/dom_elemente_mittels_selektoren_ermitteln/index.html @@ -0,0 +1,46 @@ +--- +title: DOM Elemente mittels Selektoren ermitteln +slug: Gecko-DOM-Referenz/DOM_Elemente_mittels_Selektoren_ermitteln +translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_selectors +--- +

Die Selektoren-API stellt Methoden zur Verfügung, mit der man schnell und einfach {{domxref("Element")}}-Knoten im DOM abrufen kann, indem sie mit einer Menge an Selektoren abgeblichen werden. Dies ist viel schneller als bisherige Techniken, bei denen es zum Beispiel notwendig war, eine Schleife im JavaScript-Code zu verwenden, um die spezifischen Elemente zu finden, die Sie suchen.

+ +

Die NodeSelector Schnittstelle

+ +

Diese Spezifikation fügt zwei neue Methoden zu jedem Objekt hinzu, welches die {{domxref("Document")}}, {{domxref("DocumentFragment")}} oder {{domxref("Element")}} Schnittstelle implementiert:

+ +
+
querySelector
+
Gibt den ersten übereinstimmenden {{domxref("Element")}}-Knoten innerhalb der Teilstruktur des Knotens zurück. Wenn kein übereinstimmender Knoten gefunden wird, wird null zurückgegeben.
+
querySelectorAll
+
Gibt eine {{domxref("NodeList")}} zurück, die alle übereinstimmenden Element-Knoten in der Teilstruktur des Knotens enthält oder eine leere NodeList, wenn keine Übereinstimmungen gefunden werden.
+
+ +
Hinweis: Die {{domxref("NodeList")}}, die von {{domxref("Element.querySelectorAll()", "querySelectorAll()")}} zurückgegeben wird, ist nicht live, was bedeutet, dass Änderungen im DOM sich nicht auf die Sammlung auswirken. Dies unterscheidet sich von anderen DOM-Abfragemethoden, die Live-Knotenlisten zurückgeben.
+ +

Beispiele und Details finden Sie in der Dokumentation zu den Methoden {{domxref("Element.querySelector()")}} und {{domxref("Element.querySelectorAll()")}} sowie im Artikel Code-Ausschnitte für querySelector.

+ +

Selektoren

+ +

Die Selektormethoden akzeptieren einen oder mehrere durch Kommas getrennte Selektoren, um zu bestimmen, welches Element bzw. welche Elemente zurückgegeben werden sollen. Um beispielsweise alle Absatz-Elemente (p) in einem Dokument auszuwählen, deren CSS-Klasse entweder eine warning oder ein note ist, können Sie folgendes schreiben:

+ +
var special = document.querySelectorAll( "p.warning, p.note" );
+ +

Sie können auch die ID abfragen. Zum Beispiel:

+ +
var el = document.querySelector( "#main, #basic, #exclamation" );
+ +

Nachdem der obige Code ausgeführt wurde, enthält el das erste Element im Dokument, dessen ID main, basic oder exclamation ist.

+ +

Sie können jegliche CSS Selektoren mit den Methoden querySelector() und querySelectorAll() verwenden.

+ +

Siehe auch

+ + diff --git "a/files/de/gecko-dom-referenz/einf\303\274hrung/index.html" "b/files/de/gecko-dom-referenz/einf\303\274hrung/index.html" new file mode 100644 index 0000000000..20cddb4d1c --- /dev/null +++ "b/files/de/gecko-dom-referenz/einf\303\274hrung/index.html" @@ -0,0 +1,239 @@ +--- +title: Einführung +slug: Gecko-DOM-Referenz/Einführung +tags: + - DOM +translation_of: Web/API/Document_Object_Model/Introduction +--- +

Diese Sektion bietet eine kurze, konzeptuelle Einführung in das DOM: was es ist, wie es Struktur für HTML und XML Dokumente bietet, wie man darauf zugreifen kann, und wie diese API die Referenz-Information und Beispiele präsentiert. 

+ +

Was ist das DOM?

+ +

Das Document Object Model (DOM) ist eine Programmier-Schnittstelle für HTML und XML Dokumente. Es liefert eine strukturierte Repräsentation von dem Dokument und bietet Möglichkeiten die Struktur von einem Programm anzusprechen, sodass die Dokument-Struktur, Stil und Inhalt von diesem verändert werden kann. Das DOM bietet die Repräsentation des Dokuments als strukturierte Gruppe von Knoten (nodes) und Objekten, welche Eigenschaften und Methoden haben. Essentiell ist, dass es eine Verbindung von Webseiten mit den Skripte oder Programmiersprachen bietet.

+ +

Eine Webseite ist ein Dokument. Diese kann entweder im Browser-Fenster angzeigt werden, oder dessen HTML-Quellcode. In beiden Fällen ist es das gleiche Dokument. Das Dokument Objekt Modul (DOM) bietet einen anderen Weg zum Represäntieren, Lagern und Manipulieren von diesem Dokument. Das DOM ist eine vollkommen objekt-orientierte Repräsentation einer Webseite und kann mit Skript-Sprachen wie JavaScript modifiziert werden.

+ +

Der W3C DOM Standard formte die Basis für die Implementierung des DOM in den meisten modernen Browsern. Viele Browser bieten Erweiterung außerhalb vom W3C-Standard an, sodass Obacht beim Benutzen dieser im Web geboten werden sollte, da Dokumente vielleicht von verschiedenen Browsern unterschiedliche DOMs haben.

+ +

Als Beispiel definiert das W3D DOM die getElementsByTagName Methode und dessen Ausgabewert als eine Liste aller <p>-Elemente in dem Dokument:

+ +
var paragraphs = document.getElementsByTagName("P");
+// paragraphs[0] is the first <p> element
+// paragraphs[1] is the second <p> element, etc.
+alert(paragraphs[0].nodeName);
+
+ +

Alle diese Eigenschaften, Methoden und Events werden als organisierte Objekte vom DOM zur Verfügung gestellt und dienen der Manipulation und dem Erstellen von Webseiten. Als Beispiel: das document Objekt, welches sich selbst repräsentiert, das table Objekt, welches die spezielle HTMLTableElement DOM-Eingabemaske für den Zugriff von HTML-Tabellen bietet, usw). Diese Dokumentation bietet eine von Objekt-zu-Objekt Referenz der DOM implementierten und Gecko-basiertem Browsern (z.B. Firefox).

+ +

DOM und JavaScript

+ +

Das kurze Beispiel oberhalb, wie nahezu alle Beispiele in dieser Referenz, ist JavaScript. Das heißt es ist in JavaScript geschrieben, aber es nutzt das DOM um Zugriff auf das Dokument und seine Elemente zu erhalten. Das DOM ist keine Programmiersprache, aber ohne dieses würde JavaScript überhaupt kein Model oder Darstellung der Web-Seite, XML-Seite und dessen Elemente haben, um welche es sich normalerweise kümmert. Jedes Element in einem Dokument - das Dokuement als Ganzes, der Kopf, Tabellen innerhalb des Dokuments, Tabellen-Köpfe, Text innerhalb der Tabellen-Zellen - sind Teile des Dokument-Objekt-Moduls für das Dokument. Also können diese alle über das DOM und einer Skriptsprache wie JavaScript angesprochen und manipuliert werden.

+ +

Am Anfang war JavaScript und das DOM stark verflochten, aber schließlich haben sich in eigenständiges Dasein entwickelt. Der Seiteninhalt wird im DOM gelagert und kann via JavaScript angesprochen und manipuliert werden, sodass wir diese ungefähre Gleichung schreiben können:

+ +

API (web or XML page) = DOM + JS (scripting language)

+ +

Das DOM wurde kreiert ohne eine Abhängigkeit von irgendeine spezielle Programmiersprache zu haben, welche die Struktur eines Dokuments repräsentiert und diese als eine einzelne, konsistente API (Programmierschnittstelle) zur Verfügung stellt. Obwohl wir uns in dieser Dokumentation speziell auf JavaScript konzentrieren, können die Inhalte des  DOM von jeder Programmiersprache, wie z.B. Python, genutzt werden - was dieses Beispiel demonstriert:

+ +
# Python DOM example
+import xml.dom.minidom as m
+doc = m.parse("C:\\Projects\\Py\\chap1.xml");
+doc.nodeName # DOM property of document object;
+p_list = doc.getElementsByTagName("para");
+
+ +

Für weitere Informationen darüber, welche Technologien in das Schreiben von JavaScript im Web involviert sind, siehe JavaScript Technologie Übersicht.

+ +

 

+ +

Wie greife ich auf das DOM zu?

+ +

Du brauchst nichts besonderes machen um das DOM zu nutzen. Verschiedene Browser haben unterschiedliche Ausführungen vom DOM, und diese Ausführungen  weisen unterschiedliche Konformitätsgrade des eigentlichen DOM Standards auf - ein Thema, welches wir in dieser Dokumentation vermeiden zu versuchen. Aber jeder Browser benutzt ein Dokument-Objekt-Modl um eine Webseite für Skripte zugänglich zu machen.

+ +

Wenn du ein Skript erstellst - ob in-line im <script>-Element oder eingebunden in der Webseite, das bedeutet von einer Anweisung, welches ein Skript lädt, - kannst du die API sofort nutzen um die document oder window Elemente des Dokuments selbst zu manipulieren oder zu dessen Kind-Elemente zu gelangen, welche eine Vielzahl an Elementen in einer Webseite sind. Deine DOM-Programmierung könnte vielleicht so simpel sein wie das Folgende, welches eine Aufruf-Nachricht (alert message) beim Ausführen der alert() Funktion von dem window Objekt ist. Oder du nutzt anspruchsvollere DOM-Methoden um neue Inhalte zu erstellen, wie im folgenden Beispiel unterhalb.

+ +
<body onload="window.alert('welcome to my home page!');">
+
+ +

Neben dem <script> Element, in welchem das JavaScript definiert ist, setzt dieses JavaScript eine Funktion in Gange, wenn das Dokument geladen ist (und wenn das ganze DOM zum Gebrauch erreichbar ist).

+ +

Diese Funktion erstellt ein neues H1 Element, fügt Text zum Element, und dann fügt es die H1 in den Baum des Dokuments hinein:

+ +
<html>
+  <head>
+    <script>
+       // Diese Funktion ausführen, wenn das Dokument geladen ist.
+       window.onload = function() {
+
+       // Erstellen Sie ein paar Elemente in einer ansonsten leeren HTML-Seite
+       var heading = document.createElement("h1");
+       var heading_text = document.createTextNode("Big Head!");
+       heading.appendChild(heading_text);
+       document.body.appendChild(heading);
+      }
+    </script>
+  </head>
+  <body>
+  </body>
+</html>
+
+ +

Wichtige Daten-Typen

+ +

Diese Dokumenation versucht eine vielzahl an Objekten und Typen so leicht wie möglich zu erklären. Aber es gibt eine Anzahl verschiedener Daten-Typen, welche sich rund um die API behandelt werden - also achte darauf. Einfachheitshalber sind die Syntax-Beispiele in dieser API-Referenz referenzieren typischerweise an nodes (Knoten) als Elemente, an Arrays von nodes als nodeLists (oder einfach elements), und an Attribut-Knoten (attribute nodes), einfach als attributes.

+ +

Die folgende Tabelle beschreibt kurz diese Daten-Typen:

+ + + + + + + + + + + + + + + + + + + + + + + + +
document +

Wenn ein Mitglied ein Objekt des Typs document wiedergibt (z.B. die ownerDocument Eigenschaft eines Elements gibt das document wieder, zu welchem es gehört), ist diese Objekt das oberste document Objekt selbst. Das Kapitel DOM document Referenz  beschreibt  das document Objekt.

+
element +

element gehört zu einem Element oder einer node des Typs element, wiedergegeben von einem Mitglied der DOM API. Anstatt zu sagen, dass die document.createElement() Methode ein Objekt wiedergibt, welches zu einer node referenziert wird, sagen wir dass die Methode ein element wiedergibt, dass gerade in dem DOM erstellt wurde. Element Objekte implementieren das DOM Element-Interface und ebenso das einfachere Node-Interface, welche diese Referenz beide beinhaltet.

+
nodeList +

Eine nodeList ist eine Ansammlung von Elementen, ähnlich wie diese von der Methode document.getElementsByTagName() zurückgegeben werden. Inhalte in einer nodeList werden könne auf zwei Wegen anhand des Indexes angesprochen werden. Diese beiden sind gleichwertig:

+ +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ +

Im Ersten item() ist die einzelne Methode auf das nodeList Objekt. Das Zeichen nutzt die typische Array-Syntax um den zweiten Inhalt in der Liste abzuholen.

+
attributeWhen an attribute is returned by a member (e.g., by the createAttribute() method), it is an object reference that exposes a special (albeit small) interface for attributes. Attributes are nodes in the DOM just like elements are, though you may rarely use them as such.
namedNodeMap +

Eine namedNodeMap ist wie ein Array. Aber die Inhalte werden beim Namen oder Index angesprochen. Obwohl dieser letztere Fall nur eine Bequemlichkeit für die Aufzählung ist, da sie in keiner bestimmten Reihenfolge in der Liste sind. Eine namedNodeMap hat eine item() Methode für diesen Fall - du kannst ebenfalls Inhalte zu einer namedNodeMap hinzufügen oder entfernen.

+
+ +

DOM Schnittstellen

+ +

This guide is about the objects and the actual things you can use to manipulate the DOM hierarchy. It's often a matter of indifference that the object representing the HTML FORM element gets its name property from the HTMLFormElement interface but its className property from the HTMLElement interface proper. In both cases, the property you want is simply in the form object.

+ +

But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.

+ +

Schnittstellen und Objekte

+ +

Many objects borrow from several different interfaces. The table object, for example, implements a specialized HTML Table Element Interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for a web page or an XML page, the table element also implements the more basic Node interface, from which Element derives.

+ +

When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.

+ +
var table = document.getElementById("table");
+var tableAttrs = table.attributes; // Node/Element interface
+for (var i = 0; i < tableAttrs.length; i++) {
+  // HTMLTableElement interface: border attribute
+  if(tableAttrs[i].nodeName.toLowerCase() == "border")
+    table.border = "1";
+}
+// HTMLTableElement interface: summary attribute
+table.summary = "note: increased border";
+
+ +

Interne Schnittstellen des DOM

+ +

This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM. These common APIs are used in the longer examples in the DOM Examples chapter at the end of this book.

+ +

Document and window objects are the objects whose interfaces you generally use most often in DOM programming. In simple terms, the window object represents something like the browser, and the document object is the root of the document itself. Element inherits from the generic Node interface, and together these two interfaces provide many of the methods and properties you use on individual elements. These elements may also have specific interfaces for dealing with the kind of data those elements hold, as in the table object example in the previous section.

+ +

The following is a brief list of common APIs in web and XML page scripting using the DOM.

+ + + +

Das DOM API testen

+ +

This document provides samples for every interface that you can use in your own web development. In some cases, the samples are complete HTML pages, with the DOM access in a <script> element, the interface (e.g, buttons) necessary to fire up the script in a form, and the HTML elements upon which the DOM operates listed as well. When this is the case, you can cut and paste the example into a new HTML document, save it, and run the example from the browser.

+ +

There are some cases, however, when the examples are more concise. To run examples that only demonstrate the basic relationship of the interface to the HTML elements, you may want to set up a test page in which interfaces can be easily accessed from scripts. The following very simple web page provides a <script> element in the header in which you can place functions that test the interface, a few HTML elements with attributes that you can retrieve, set, or otherwise manipulate, and the web user interface necessary to call those functions from the browser.

+ +

You can use this test page or create a similar one to test the DOM interfaces you are interested in and see how they work on the browser platform. You can update the contents of the test() function as needed, create more buttons, or add elements as necessary.

+ +
<html>
+  <head>
+    <title>DOM Tests</title>
+    <script type="application/javascript">
+    function setBodyAttr(attr,value){
+      if (document.body) eval('document.body.'+attr+'="'+value+'"');
+      else notSupported();
+    }
+    </script>
+  </head>
+  <body>
+    <div style="margin: .5in; height: 400;">
+      <p><b><tt>text</tt>color</b></p>
+      <form>
+        <select onChange="setBodyAttr('text',
+        this.options[this.selectedIndex].value);">
+          <option value="black">black
+          <option value="darkblue">darkblue
+        </select>
+        <p><b><tt>bgColor</tt></b></p>
+        <select onChange="setBodyAttr('bgColor',
+        this.options[this.selectedIndex].value);">
+          <option value="white">white
+          <option value="lightgrey">gray
+        </select>
+        <p><b><tt>link</tt></b></p>
+        <select onChange="setBodyAttr('link',
+        this.options[this.selectedIndex].value);">
+          <option value="blue">blue
+          <option value="green">green
+        </select>  <small>
+        <a href="http://www.brownhen.com/dom_api_top.html" id="sample">
+        (sample link)</a></small><br>
+      </form>
+      <form>
+        <input type="button" value="version" onclick="ver()" />
+      </form>
+    </div>
+  </body>
+</html>
+
+ +

To test a lot of interfaces in a single page-for example, a "suite" of properties that affect the colors of a web page-you can create a similar test page with a whole console of buttons, textfields, and other HTML elements. The following screenshot gives you some idea of how interfaces can be grouped together for testing.

+ +
+
Bild 0.1 Beispiel DOM Test Seite
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

In this example, the dropdown menus dynamically update such DOM-accessible aspects of the web page as its background color (bgColor), the color of the hyperlinks (aLink), and color of the text (text). However you design your test pages, testing the interfaces as you read about them is an important part of learning how to use the DOM effectively.

+ + + + diff --git a/files/de/gecko-dom-referenz/index.html b/files/de/gecko-dom-referenz/index.html new file mode 100644 index 0000000000..d8498ba791 --- /dev/null +++ b/files/de/gecko-dom-referenz/index.html @@ -0,0 +1,65 @@ +--- +title: Gecko DOM Referenz +slug: Gecko-DOM-Referenz +tags: + - DOM + - Gecko + - Gecko-DOM-Referenz +translation_of: Web/API/Document_Object_Model +--- +

Dies ist die Übersichtsseite der Gecko DOM Referenz.

+
Diese Referenz ist im Moment noch sehr unvollständig. Hilf mit: registriere dich und schreib mit!
+
Diese Referenz trennt zwischen Methoden und Eigenschaften die für Webinhalte verfügbar oder nur für Entwickler von Erweiterungen verfügbar sind. Erweiterungsentwickler halten sich bitte an die englische Funktionsreferenz im Mozilla Developer Center.
+

Einleitung (englisch)

+ +

Einführung (englisch)

+ +

DOM Objekt Referenzen

+

DOM window Referenz

+ +

DOM document Referenz

+ +

DOM element Referenz

+ +

DOM event Referenz

+

(mit den Unterobjekten UIEvent, KeyEvent, MouseEvent)

+ +

DOM range Referenz

+ +

DOM selection Referenz

+ +

Plugin

+

DOM style Referenz

+ +

DOM - Andere Objekte

+ +

HTML Schnittstellen

+

HTMLDocument (Siehe auch document)

+

HTML Elementschnittstellen

+ +

Canvas-Schnittstelle

+ +

Medien-bezogene Schnittstellen

+

Diese Schnittstellen werden für Aufgaben im Bereich von Audio und Video verwendet.

+
HTMLAudioElement
Repräsentiert das HTML5 {{ HTMLElement("audio") }} Element.
HTMLVideoElement
Repräsentiert das HTML5 {{ HTMLElement("video") }} Element.
NotifyAudioAvailableEvent
Beschreibt ein Ereignis, welches ausgelöst wird, wenn Skripten Zugang zu Audiostream-Daten erlaubt wurde.
+
+

Collection Schnittstellen

+

HTMLCollection, HTMLAllCollection, HTMLFormControlsCollection, HTMLOptionsCollection, HTMLPropertiesCollection

+

Andere HTML Schnittstellen

+

DOMTokenList, DOMSettableTokenList, DOMStringMap, RadioNodeList

+

DOM Beispiele (englisch)

+ +

{{ languages( { "en" : "en/Gecko_DOM_Reference", "es": "es/Referencia_DOM_de_Gecko", "fr": "fr/R\u00e9f\u00e9rence_du_DOM_Gecko", "it": "it/Reference_del_DOM_di_Gecko", "ja": "ja/Gecko_DOM_Reference", "ko": "ko/Gecko_DOM_Reference", "pl": "pl/Dokumentacja_Gecko_DOM", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003" } ) }}

diff --git a/files/de/gecko_user_agent_string_referenz/index.html b/files/de/gecko_user_agent_string_referenz/index.html new file mode 100644 index 0000000000..6af733f131 --- /dev/null +++ b/files/de/gecko_user_agent_string_referenz/index.html @@ -0,0 +1,230 @@ +--- +title: Referenz der User-Agent-Strings für Gecko +slug: Gecko_user_agent_string_referenz +translation_of: Web/HTTP/Headers/User-Agent/Firefox +--- +

{{ gecko_minversion_header("2.0") }}

+

Dieses Dokument beschreibt den User-Agent-String (Browsertyp-Indefitizierungstext), der seit Firefox 4 und in Gecko 2.0 (oder höher) -basierenden Programmen verwendet wird. Bezüglich des Verlaufs der Änderungen auf dem Text in Gecko 2.0, konsultiern Sie den Blog-Post Final User Agent string for Firefox 4. Schauen Sie auch in unserer Dokumentation zu user agent sniffing (Erkennen von Browsertypen) und den Blog-Post über die Hacks.

+

Allgemeine Form

+

AU-String von Firefox besteht aus vier Teilen:

+

Mozilla/5.0 (Platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion

+ +
+ Note: The recommended way of sniffing for Gecko-based browsers (if you have to sniff for the browser engine instead of using feature detection) is by the presence of the "Gecko" and "rv:" strings, since some other browsers include a "like Gecko" token.
+

For other products based on Gecko, the string can take one of two forms, where the tokens have the same meaning except those noted below:

+

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail appname/appversion
+ Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion appname/appversion

+ +

{{ h2_gecko_minversion("Mobile and Tablet indicators", "11.0") }}

+

The platform part of the UA string indicates if Firefox is running on a phone-sized or tablet device. When Firefox runs on a device that has the phone form factor, there is a Mobile; token in the platform part of the UA string. When Firefox runs on a tablet device, there is a Tablet; token in the platform part of the UA string instead. For example:

+

Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0

+

Mozilla/5.0 (Android; Tablet; rv:13.0) Gecko/13.0 Firefox/13.0

+

The preferred way to target content to a device form factor is to use CSS Media Queries. However, if you use UA sniffing to target content to a device form factor, please look for Mobi (to include Opera Mobile, which uses "Mobi") for the phone form factor and do not assume any correlation between "Android" and the device form factor. This way, your code will work if/when Firefox ships on other phone/tablet operating systems or Android is used for laptops. Also, please use touch detection to find touch devices rather than looking for "Mobi" or "Tablet" - there may be touch devices which are not tablets.

+
+ Note: Firefox OS devices identify themselves without any operating system indication; for example: "Mozilla/5.0 (Mobile; rv:15.0) Gecko/15.0 Firefox/15.0". The web is the platform.
+

Windows

+

Windows user agents have the following variations, where x.y is the Windows NT version (for instance, Windows NT 6.1).

+ + + + + + + + + + + + + + + + + + + + + +
Windows versionGecko user agent string
Windows NT on x86Mozilla/5.0 (Windows NT x.y; rv:10.0) Gecko/20100101 Firefox/10.0
Windows NT, Win64 on x64Mozilla/5.0 (Windows NT x.y; Win64; x64; rv:10.0) Gecko/20100101 Firefox/10.0
Windows NT, WOW64Mozilla/5.0 (Windows NT x.y; WOW64; rv:10.0) Gecko/20100101 Firefox/10.0
+

Macintosh

+

Here, x.y is the version of Mac OS X (for instance, Mac OS X 10.6).

+ + + + + + + + + + + + + + + + + +
Mac OS X versionGecko user agent string
Mac OS X on Intel x86 or x86_64Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0
Mac OS X on PowerPCMozilla/5.0 (Macintosh; PPC Mac OS X x.y; rv:10.0) Gecko/20100101 Firefox/10.0
+

Linux

+

Linux is a more diverse platform. A few common examples are given below.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Linux versionGecko user agent string
Linux desktop, i686Mozilla/5.0 (X11; Linux i686; rv:10.0) Gecko/20100101 Firefox/10.0
Linux desktop, x86_64Mozilla/5.0 (X11; Linux x86_64; rv:10.0) Gecko/20100101 Firefox/10.0
Linux desktop, i686 running on x86_64Mozilla/5.0 (X11; Linux i686 on x86_64; rv:10.0) Gecko/20100101 Firefox/10.0
Nokia N900 Linux mobile, on the Fennec browserMozilla/5.0 (Maemo; Linux armv7l; rv:10.0) Gecko/20100101 Firefox/10.0 Fennec/10.0
+

Android

+ + + + + + + + + + + + + + + + + + + +
Form factorGecko user agent string
PhoneMozilla/5.0 (Android; Mobile; rv:26.0) Gecko/26.0 Firefox/26.0
TabletMozilla/5.0 (Android; Tablet; rv:26.0) Gecko/26.0 Firefox/26.0
+

Firefox OS

+ + + + + + + + + + + + + + + + + + + +
Form factorGecko user agent string
PhoneMozilla/5.0 (Mobile; rv:26.0) Gecko/26.0 Firefox/26.0
TabletMozilla/5.0 (Tablet; rv:26.0) Gecko/26.0 Firefox/26.0
Device-specifcMozilla/5.0 (Mobile; nnnn; rv:26.0) Gecko/26.0 Firefox/26.0
+

Device-specific user agent strings

+

Although it is discouraged by Mozilla, some handset manufacturers include a token in their device's UA string that represents their device id. If this is the case, the Firefox OS UA string will look like the device-specific string in the table above, where nnnn; is the manufacturer's code for the device. This code could be something like NexusOne; or ZTEOpen;. We provide this information to assist with your UA detection logic, but Mozilla discourages the detection of a device id in UA strings.

+

Here is a JavaScript regular expression that will detect all mobile devices, including devices with a device id in their UA string:

+
/mobi/i
+

The i makes it case-insensitive, and mobi matches all mobile browsers.

+

Firefox OS version number

+

While the version number for Firefox OS is not included in the UA string, it is possible to infer version information from the Gecko version number present in the UA string. Beginning with Firefox OS 1.2, each minor version should correspond to two major Gecko revisions.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Firefox OS version numberGecko version number
1.0.118.0
1.118.1
1.226.0
1.328.0
+

Firefox OS has a 4 digit version number: X.X.X.Y. The first 2 digits are owned by the Mozilla product team and will denote versions with new features (eg: v1.1, 1.2, etc). The third digit will be incremented with regular version tags (~every 6 weeks) for security updates, and the fourth will be OEM owned.

+

Other Gecko-based browsers

+

These are some sample UA strings from other Gecko-based browsers on various platforms. Note that many of these have not yet been released on Gecko 2.0!

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserGecko user agent string
Firefox for Maemo (Nokia N900)Mozilla/5.0 (Maemo; Linux armv7l; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 Fennec/10.0.1
Camino on MacMozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:2.0.1) Gecko/20100101 Firefox/4.0.1 Camino/2.2.1
SeaMonkey on WindowsMozilla/5.0 (Windows NT 5.2; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 SeaMonkey/2.7.1
SeaMonkey on MacMozilla/5.0 (Macintosh; Intel Mac OS X 10.5; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 SeaMonkey/2.7.1
SeaMonkey on LinuxMozilla/5.0 (X11; Linux i686; rv:10.0.1) Gecko/20100101 Firefox/10.0.1 SeaMonkey/2.7.1
+

Implementation notes for applications, vendors, and extensions

+

Prior to Firefox 4 and Gecko 2.0, it was possible for extensions to add user agent parts through the general.useragent.extra.identifier preferences, (see the obsolete User Agent Strings Reference). But that has not been possible since {{ Bug(581008) }}.

+

In the past, specific plug-ins, add-ons or extensions added user agent parts to notify sites they were installed. The recommended way to do this, if it's absolutely necessary (remember that it slows down every request) is to set a custom HTTP header.

+

See Also

+ +
+

Comments to mozilla.dev.platform

+

{{ languages( { "ja": "ja/Gecko_user_agent_string_reference"} ) }}

diff --git a/files/de/glossary/404/index.html b/files/de/glossary/404/index.html new file mode 100644 index 0000000000..08c1dd4252 --- /dev/null +++ b/files/de/glossary/404/index.html @@ -0,0 +1,20 @@ +--- +title: '404' +slug: Glossary/404 +tags: + - Fehlercodes + - Glossar + - HTTP Fehler + - HTTP Fehlercodes + - Infrastruktur + - Navigation +translation_of: Glossary/404 +--- +

404 ist ein Standard-Antwort-Code, der bedeutet, dass der {{Glossary("Server", "Server")}} die angeforderte Ressource nicht finden kann.

+ +

Siehe auch

+ + diff --git a/files/de/glossary/502/index.html b/files/de/glossary/502/index.html new file mode 100644 index 0000000000..0fce814c57 --- /dev/null +++ b/files/de/glossary/502/index.html @@ -0,0 +1,23 @@ +--- +title: '502' +slug: Glossary/502 +tags: + - '502' + - Glossar + - HTTP Fehler + - HTTP Fehlercodes + - Infrastruktur + - Navigation +translation_of: Glossary/502 +--- +

502 ist ein {{Glossary("HTTP")}}-Fehlercode, der "Bad Gateway", fehlerhaftes Gateway, bedeutet.

+ +

Ein {{Glossary("Server")}} kann als Gateway oder Proxy (Vermittler) zwischen einem Client (wie Ihrem Web-Browser) und einem Upstreamserver fungieren. Wenn Sie eine {{Glossary("URL")}} aufrufen, kann der Gateway-Server Ihre Anfrage an den Upstreamserver weiterleiten. "502" bedeutet, dass der Upstreamserver eine ungültige Antwort ausgegeben hat.

+ +

Normalerweise ist der Upstreamserver funktionstüchtig (d.h. er übermittelt keine Antwort an das Gateway/der Proxy), verwendet aber nicht das gleiche Protokoll wie das Gateway/der Proxy. Internetprotokolle sind ({{Glossary("Protocol", "protocols")}}) recht genau, deshalb bedeutet 502 häufig, dass einer oder beide Geräte falsch oder unvollständig programmiert worden.

+ +

Erfahren Sie mehr

+ + diff --git a/files/de/glossary/abstraktion/index.html b/files/de/glossary/abstraktion/index.html new file mode 100644 index 0000000000..29f75adb98 --- /dev/null +++ b/files/de/glossary/abstraktion/index.html @@ -0,0 +1,19 @@ +--- +title: Abstraktion +slug: Glossary/Abstraktion +tags: + - Abstraktion + - Glossar + - Programmieren + - Programmiersprache +translation_of: Glossary/Abstraction +--- +

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:

+ + diff --git a/files/de/glossary/accessibility/index.html b/files/de/glossary/accessibility/index.html new file mode 100644 index 0000000000..9c8b6c067c --- /dev/null +++ b/files/de/glossary/accessibility/index.html @@ -0,0 +1,33 @@ +--- +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 new file mode 100644 index 0000000000..3033a6d64f --- /dev/null +++ b/files/de/glossary/adobe_flash/index.html @@ -0,0 +1,16 @@ +--- +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 new file mode 100644 index 0000000000..6eb90e7e33 --- /dev/null +++ b/files/de/glossary/ajax/index.html @@ -0,0 +1,33 @@ +--- +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/algorithmus/index.html b/files/de/glossary/algorithmus/index.html new file mode 100644 index 0000000000..0c7109ae1e --- /dev/null +++ b/files/de/glossary/algorithmus/index.html @@ -0,0 +1,11 @@ +--- +title: Algorithmus +slug: Glossary/Algorithmus +tags: + - Algorithmus + - Glossary +translation_of: Glossary/Algorithm +--- +

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/anweisung/index.html b/files/de/glossary/anweisung/index.html new file mode 100644 index 0000000000..4913ac8f29 --- /dev/null +++ b/files/de/glossary/anweisung/index.html @@ -0,0 +1,29 @@ +--- +title: Anweisung +slug: Glossary/Anweisung +tags: + - Anweisung + - Glossar + - Glossary + - JavaScript + - befehl +translation_of: Glossary/Statement +--- +

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

+ + + +

Technische Referenz

+ + + + diff --git a/files/de/glossary/api/index.html b/files/de/glossary/api/index.html new file mode 100644 index 0000000000..8a095302a8 --- /dev/null +++ b/files/de/glossary/api/index.html @@ -0,0 +1,34 @@ +--- +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:

+ + + +

Mehr erfahren

+ +

Allgemeinwissen

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/apple_safari/index.html b/files/de/glossary/apple_safari/index.html new file mode 100644 index 0000000000..137a3e0007 --- /dev/null +++ b/files/de/glossary/apple_safari/index.html @@ -0,0 +1,23 @@ +--- +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 new file mode 100644 index 0000000000..62700352f5 --- /dev/null +++ b/files/de/glossary/argument/index.html @@ -0,0 +1,20 @@ +--- +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

+ + + +

Technische Refferenz

+ + diff --git a/files/de/glossary/aria/index.html b/files/de/glossary/aria/index.html new file mode 100644 index 0000000000..ab02af073f --- /dev/null +++ b/files/de/glossary/aria/index.html @@ -0,0 +1,14 @@ +--- +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 new file mode 100644 index 0000000000..da0b7d85b0 --- /dev/null +++ b/files/de/glossary/arpa/index.html @@ -0,0 +1,15 @@ +--- +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 new file mode 100644 index 0000000000..23a984a8e0 --- /dev/null +++ b/files/de/glossary/array/index.html @@ -0,0 +1,37 @@ +--- +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

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/ascii/index.html b/files/de/glossary/ascii/index.html new file mode 100644 index 0000000000..7eee61ffe6 --- /dev/null +++ b/files/de/glossary/ascii/index.html @@ -0,0 +1,15 @@ +--- +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/asynchron/index.html b/files/de/glossary/asynchron/index.html new file mode 100644 index 0000000000..57f052e94f --- /dev/null +++ b/files/de/glossary/asynchron/index.html @@ -0,0 +1,34 @@ +--- +title: Asynchron +slug: Glossary/Asynchron +translation_of: Glossary/Asynchronous +--- +

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 new file mode 100644 index 0000000000..b5efec0255 --- /dev/null +++ b/files/de/glossary/atag/index.html @@ -0,0 +1,25 @@ +--- +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 new file mode 100644 index 0000000000..74f1603da5 --- /dev/null +++ b/files/de/glossary/attribute/index.html @@ -0,0 +1,20 @@ +--- +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/bandbreite/index.html b/files/de/glossary/bandbreite/index.html new file mode 100644 index 0000000000..b1c856463b --- /dev/null +++ b/files/de/glossary/bandbreite/index.html @@ -0,0 +1,17 @@ +--- +title: Bandbreite +slug: Glossary/Bandbreite +tags: + - Glossar + - Infrastruktur +translation_of: Glossary/Bandwidth +--- +

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:

+ + diff --git a/files/de/glossary/block/css/index.html b/files/de/glossary/block/css/index.html new file mode 100644 index 0000000000..5484f88553 --- /dev/null +++ b/files/de/glossary/block/css/index.html @@ -0,0 +1,22 @@ +--- +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 new file mode 100644 index 0000000000..9b29b4e509 --- /dev/null +++ b/files/de/glossary/block/index.html @@ -0,0 +1,11 @@ +--- +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 new file mode 100644 index 0000000000..93fa69e24c --- /dev/null +++ b/files/de/glossary/block/scripting/index.html @@ -0,0 +1,20 @@ +--- +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 new file mode 100644 index 0000000000..24ba696154 --- /dev/null +++ b/files/de/glossary/boolean/index.html @@ -0,0 +1,50 @@ +--- +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

+ + + +

Technik

+ + diff --git a/files/de/glossary/bootstrap/index.html b/files/de/glossary/bootstrap/index.html new file mode 100644 index 0000000000..d53c89b773 --- /dev/null +++ b/files/de/glossary/bootstrap/index.html @@ -0,0 +1,29 @@ +--- +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

+ + + +

Technical reference

+ + diff --git a/files/de/glossary/browser/index.html b/files/de/glossary/browser/index.html new file mode 100644 index 0000000000..e7bafc32ca --- /dev/null +++ b/files/de/glossary/browser/index.html @@ -0,0 +1,27 @@ +--- +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 new file mode 100644 index 0000000000..ae067c247e --- /dev/null +++ b/files/de/glossary/buffer/index.html @@ -0,0 +1,18 @@ +--- +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 new file mode 100644 index 0000000000..243f665d1c --- /dev/null +++ b/files/de/glossary/cache/index.html @@ -0,0 +1,17 @@ +--- +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

+ + diff --git a/files/de/glossary/caldav/index.html b/files/de/glossary/caldav/index.html new file mode 100644 index 0000000000..b83fc735db --- /dev/null +++ b/files/de/glossary/caldav/index.html @@ -0,0 +1,24 @@ +--- +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

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/canvas/index.html b/files/de/glossary/canvas/index.html new file mode 100644 index 0000000000..fcec40ae8a --- /dev/null +++ b/files/de/glossary/canvas/index.html @@ -0,0 +1,31 @@ +--- +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

+ + + +

Lerninhalte

+ + + +

Technische Informationen

+ + +
diff --git a/files/de/glossary/card_sorting/index.html b/files/de/glossary/card_sorting/index.html new file mode 100644 index 0000000000..14fb31e629 --- /dev/null +++ b/files/de/glossary/card_sorting/index.html @@ -0,0 +1,20 @@ +--- +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

+ + diff --git a/files/de/glossary/cdn/index.html b/files/de/glossary/cdn/index.html new file mode 100644 index 0000000000..5d6b5fd940 --- /dev/null +++ b/files/de/glossary/cdn/index.html @@ -0,0 +1,17 @@ +--- +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:

+ + diff --git a/files/de/glossary/character/index.html b/files/de/glossary/character/index.html new file mode 100644 index 0000000000..c4eb900ca9 --- /dev/null +++ b/files/de/glossary/character/index.html @@ -0,0 +1,22 @@ +--- +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

+ + diff --git a/files/de/glossary/chrome/index.html b/files/de/glossary/chrome/index.html new file mode 100644 index 0000000000..aec09f2a06 --- /dev/null +++ b/files/de/glossary/chrome/index.html @@ -0,0 +1,12 @@ +--- +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/cms/index.html b/files/de/glossary/cms/index.html new file mode 100644 index 0000000000..d65fcfdfdb --- /dev/null +++ b/files/de/glossary/cms/index.html @@ -0,0 +1,18 @@ +--- +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

+ + diff --git a/files/de/glossary/codec/index.html b/files/de/glossary/codec/index.html new file mode 100644 index 0000000000..1c21d4fe16 --- /dev/null +++ b/files/de/glossary/codec/index.html @@ -0,0 +1,23 @@ +--- +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

+ + + +

Technische Informationen

+ + diff --git a/files/de/glossary/compile_time/index.html b/files/de/glossary/compile_time/index.html new file mode 100644 index 0000000000..342360fe9f --- /dev/null +++ b/files/de/glossary/compile_time/index.html @@ -0,0 +1,18 @@ +--- +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

+ + diff --git a/files/de/glossary/cookie/index.html b/files/de/glossary/cookie/index.html new file mode 100644 index 0000000000..9abf5f865f --- /dev/null +++ b/files/de/glossary/cookie/index.html @@ -0,0 +1,20 @@ +--- +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-zugelassener-anfrage-header/index.html b/files/de/glossary/cors-zugelassener-anfrage-header/index.html new file mode 100644 index 0000000000..97db753e07 --- /dev/null +++ b/files/de/glossary/cors-zugelassener-anfrage-header/index.html @@ -0,0 +1,38 @@ +--- +title: CORS-zugelassene Anfrage-Header +slug: Glossary/CORS-zugelassener-anfrage-header +tags: + - CORS +translation_of: Glossary/CORS-safelisted_request_header +--- +

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

+ + + +

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:

+ + + +

Mehr erfahren

+ + diff --git a/files/de/glossary/cors/index.html b/files/de/glossary/cors/index.html new file mode 100644 index 0000000000..90a7006ab0 --- /dev/null +++ b/files/de/glossary/cors/index.html @@ -0,0 +1,48 @@ +--- +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 new file mode 100644 index 0000000000..df3fd9db4b --- /dev/null +++ b/files/de/glossary/crawler/index.html @@ -0,0 +1,23 @@ +--- +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

+ + + + diff --git a/files/de/glossary/crlf/index.html b/files/de/glossary/crlf/index.html new file mode 100644 index 0000000000..5bb1e1012e --- /dev/null +++ b/files/de/glossary/crlf/index.html @@ -0,0 +1,30 @@ +--- +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.

+ + + +

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 dazuEdit

+ +

Allgemeinwissen

+ + diff --git a/files/de/glossary/css/index.html b/files/de/glossary/css/index.html new file mode 100644 index 0000000000..ccf0fc7a11 --- /dev/null +++ b/files/de/glossary/css/index.html @@ -0,0 +1,48 @@ +--- +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

+ + + +

Technische Referenz

+ + + +

Lerne CSS kennen

+ + diff --git a/files/de/glossary/css_praeprozessor/index.html b/files/de/glossary/css_praeprozessor/index.html new file mode 100644 index 0000000000..43cd580206 --- /dev/null +++ b/files/de/glossary/css_praeprozessor/index.html @@ -0,0 +1,23 @@ +--- +title: CSS-Präprozessor +slug: Glossary/CSS_Praeprozessor +tags: + - CSS +translation_of: Glossary/CSS_preprocessor +--- +

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 new file mode 100644 index 0000000000..d4e944c46e --- /dev/null +++ b/files/de/glossary/data_structure/index.html @@ -0,0 +1,17 @@ +--- +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 erfahrenEdit

+ +

Allgemeinweissen

+ + diff --git a/files/de/glossary/datenkapselung/index.html b/files/de/glossary/datenkapselung/index.html new file mode 100644 index 0000000000..98e06ad291 --- /dev/null +++ b/files/de/glossary/datenkapselung/index.html @@ -0,0 +1,14 @@ +--- +title: Datenkapselung +slug: Glossary/Datenkapselung +tags: + - Datenkapselung +translation_of: Glossary/Encapsulation +--- +

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/denial_of_service/index.html b/files/de/glossary/denial_of_service/index.html new file mode 100644 index 0000000000..c2dcc40c5c --- /dev/null +++ b/files/de/glossary/denial_of_service/index.html @@ -0,0 +1,9 @@ +--- +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 new file mode 100644 index 0000000000..4cb14350d3 --- /dev/null +++ b/files/de/glossary/dhtml/index.html @@ -0,0 +1,18 @@ +--- +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

+ + diff --git a/files/de/glossary/dns/index.html b/files/de/glossary/dns/index.html new file mode 100644 index 0000000000..dd542da701 --- /dev/null +++ b/files/de/glossary/dns/index.html @@ -0,0 +1,15 @@ +--- +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 new file mode 100644 index 0000000000..68310abcc2 --- /dev/null +++ b/files/de/glossary/doctype/index.html @@ -0,0 +1,21 @@ +--- +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

+ + diff --git a/files/de/glossary/dom/index.html b/files/de/glossary/dom/index.html new file mode 100644 index 0000000000..e4a788dc28 --- /dev/null +++ b/files/de/glossary/dom/index.html @@ -0,0 +1,29 @@ +--- +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

+ + + +

Technische Informationen

+ + diff --git a/files/de/glossary/domain_name/index.html b/files/de/glossary/domain_name/index.html new file mode 100644 index 0000000000..cedc53fd2b --- /dev/null +++ b/files/de/glossary/domain_name/index.html @@ -0,0 +1,20 @@ +--- +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 new file mode 100644 index 0000000000..de5c126a63 --- /dev/null +++ b/files/de/glossary/dos_attack/index.html @@ -0,0 +1,33 @@ +--- +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:

+ + + +

Erfahren Sie mehr...

+ + diff --git a/files/de/glossary/dtd/index.html b/files/de/glossary/dtd/index.html new file mode 100644 index 0000000000..e2f9c51e33 --- /dev/null +++ b/files/de/glossary/dtd/index.html @@ -0,0 +1,11 @@ +--- +title: DTD +slug: Glossary/DTD +tags: + - CodingScripting + - Document + - Glossary + - HTML +translation_of: Glossary/Doctype +--- +

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

diff --git a/files/de/glossary/ecma/index.html b/files/de/glossary/ecma/index.html new file mode 100644 index 0000000000..1221870ff7 --- /dev/null +++ b/files/de/glossary/ecma/index.html @@ -0,0 +1,19 @@ +--- +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 new file mode 100644 index 0000000000..49849dbca5 --- /dev/null +++ b/files/de/glossary/ecmascript/index.html @@ -0,0 +1,22 @@ +--- +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

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/einfache_datenelemente/index.html b/files/de/glossary/einfache_datenelemente/index.html new file mode 100644 index 0000000000..021ca95488 --- /dev/null +++ b/files/de/glossary/einfache_datenelemente/index.html @@ -0,0 +1,48 @@ +--- +title: Skalare Daten +slug: Glossary/einfache_datenelemente +tags: + - Glossary + - einfache Datentypen + - primitive Datentypen + - skalare Datentypen +translation_of: Glossary/Primitive +--- +

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:

+ + + +

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

+ + + +

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/element/index.html b/files/de/glossary/element/index.html new file mode 100644 index 0000000000..49afdf4299 --- /dev/null +++ b/files/de/glossary/element/index.html @@ -0,0 +1,21 @@ +--- +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/falsy/index.html b/files/de/glossary/falsy/index.html new file mode 100644 index 0000000000..231a35dbfb --- /dev/null +++ b/files/de/glossary/falsy/index.html @@ -0,0 +1,111 @@ +--- +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

+ + + +

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

diff --git a/files/de/glossary/firefox_os/index.html b/files/de/glossary/firefox_os/index.html new file mode 100644 index 0000000000..a1dfa3e467 --- /dev/null +++ b/files/de/glossary/firefox_os/index.html @@ -0,0 +1,27 @@ +--- +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

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/firewall/index.html b/files/de/glossary/firewall/index.html new file mode 100644 index 0000000000..c31ebf6f11 --- /dev/null +++ b/files/de/glossary/firewall/index.html @@ -0,0 +1,22 @@ +--- +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

+ + diff --git a/files/de/glossary/flex/index.html b/files/de/glossary/flex/index.html new file mode 100644 index 0000000000..80c6cf3ea7 --- /dev/null +++ b/files/de/glossary/flex/index.html @@ -0,0 +1,44 @@ +--- +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

+ +
+ +
+ +

Weiterführende Lektüre

+ + diff --git a/files/de/glossary/flexbox/index.html b/files/de/glossary/flexbox/index.html new file mode 100644 index 0000000000..1065338721 --- /dev/null +++ b/files/de/glossary/flexbox/index.html @@ -0,0 +1,77 @@ +--- +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

+ +
+ +
+ +

Further reading

+ + + + diff --git a/files/de/glossary/ftp/index.html b/files/de/glossary/ftp/index.html new file mode 100644 index 0000000000..b18b385713 --- /dev/null +++ b/files/de/glossary/ftp/index.html @@ -0,0 +1,19 @@ +--- +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/funktion_erster-klasse/index.html b/files/de/glossary/funktion_erster-klasse/index.html new file mode 100644 index 0000000000..05ac712188 --- /dev/null +++ b/files/de/glossary/funktion_erster-klasse/index.html @@ -0,0 +1,101 @@ +--- +title: Funktion erster Klasse +slug: Glossary/Funktion_erster-Klasse +translation_of: Glossary/First-class_Function +--- +

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

+ + diff --git a/files/de/glossary/gif/index.html b/files/de/glossary/gif/index.html new file mode 100644 index 0000000000..65257a451c --- /dev/null +++ b/files/de/glossary/gif/index.html @@ -0,0 +1,17 @@ +--- +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

+ + diff --git a/files/de/glossary/git/index.html b/files/de/glossary/git/index.html new file mode 100644 index 0000000000..8745e92857 --- /dev/null +++ b/files/de/glossary/git/index.html @@ -0,0 +1,15 @@ +--- +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 new file mode 100644 index 0000000000..cec1af4270 --- /dev/null +++ b/files/de/glossary/gpu/index.html @@ -0,0 +1,9 @@ +--- +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 new file mode 100644 index 0000000000..9116aa8bfb --- /dev/null +++ b/files/de/glossary/graceful_degradation/index.html @@ -0,0 +1,36 @@ +--- +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

+ + + + diff --git a/files/de/glossary/grid/index.html b/files/de/glossary/grid/index.html new file mode 100644 index 0000000000..f14ad90c98 --- /dev/null +++ b/files/de/glossary/grid/index.html @@ -0,0 +1,71 @@ +--- +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

+ + + +

Further reading

+ + +
diff --git a/files/de/glossary/gutters/index.html b/files/de/glossary/gutters/index.html new file mode 100644 index 0000000000..062ae66c1e --- /dev/null +++ b/files/de/glossary/gutters/index.html @@ -0,0 +1,72 @@ +--- +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

+ + + +

Weiterführende Informationen

+ + diff --git a/files/de/glossary/gzip_compression/index.html b/files/de/glossary/gzip_compression/index.html new file mode 100644 index 0000000000..406b66c303 --- /dev/null +++ b/files/de/glossary/gzip_compression/index.html @@ -0,0 +1,26 @@ +--- +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/herstellerpr\303\244fix/index.html" "b/files/de/glossary/herstellerpr\303\244fix/index.html" new file mode 100644 index 0000000000..a97254fc6e --- /dev/null +++ "b/files/de/glossary/herstellerpr\303\244fix/index.html" @@ -0,0 +1,69 @@ +--- +title: Herstellerpräfix +slug: Glossary/Herstellerpräfix +tags: + - '-moz-' + - '-ms-' + - '-o-' + - '-webkit-' + - CSS + - Glossar + - Herstellerpräfix + - JavaScript + - Kodieren + - Präfix + - scripten +translation_of: Glossary/Vendor_Prefix +--- +

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:

+ + + +

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: 

+ + + +

Präfixe für Methoden und Eigenschaften

+ +

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

+ + + +

Mehr erfahren

+ +

Allgemeinwissen

+ + diff --git a/files/de/glossary/hoisting/index.html b/files/de/glossary/hoisting/index.html new file mode 100644 index 0000000000..f53dcb6647 --- /dev/null +++ b/files/de/glossary/hoisting/index.html @@ -0,0 +1,90 @@ +--- +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 new file mode 100644 index 0000000000..fdd97759df --- /dev/null +++ b/files/de/glossary/html/index.html @@ -0,0 +1,48 @@ +--- +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 lernen

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/html5/index.html b/files/de/glossary/html5/index.html new file mode 100644 index 0000000000..76a30142f3 --- /dev/null +++ b/files/de/glossary/html5/index.html @@ -0,0 +1,17 @@ +--- +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 new file mode 100644 index 0000000000..1251d9c5ce --- /dev/null +++ b/files/de/glossary/http/index.html @@ -0,0 +1,22 @@ +--- +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

+ + +
+ +

 

diff --git a/files/de/glossary/https/index.html b/files/de/glossary/https/index.html new file mode 100644 index 0000000000..3f936fd4c3 --- /dev/null +++ b/files/de/glossary/https/index.html @@ -0,0 +1,19 @@ +--- +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

+ + diff --git a/files/de/glossary/hyperlink/index.html b/files/de/glossary/hyperlink/index.html new file mode 100644 index 0000000000..27486be20a --- /dev/null +++ b/files/de/glossary/hyperlink/index.html @@ -0,0 +1,34 @@ +--- +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

+ + + +

Technische Referenz

+ + + +

Learn about it

+ + diff --git a/files/de/glossary/ide/index.html b/files/de/glossary/ide/index.html new file mode 100644 index 0000000000..0a418c3914 --- /dev/null +++ b/files/de/glossary/ide/index.html @@ -0,0 +1,19 @@ +--- +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

+ + diff --git a/files/de/glossary/identifier/index.html b/files/de/glossary/identifier/index.html new file mode 100644 index 0000000000..c02f326f7d --- /dev/null +++ b/files/de/glossary/identifier/index.html @@ -0,0 +1,20 @@ +--- +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

+ + diff --git a/files/de/glossary/ietf/index.html b/files/de/glossary/ietf/index.html new file mode 100644 index 0000000000..914f1ec48f --- /dev/null +++ b/files/de/glossary/ietf/index.html @@ -0,0 +1,19 @@ +--- +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 new file mode 100644 index 0000000000..22ca4b8818 --- /dev/null +++ b/files/de/glossary/iife/index.html @@ -0,0 +1,58 @@ +--- +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 new file mode 100644 index 0000000000..cb1f2ecdb9 --- /dev/null +++ b/files/de/glossary/imap/index.html @@ -0,0 +1,18 @@ +--- +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

+ + diff --git a/files/de/glossary/index.html b/files/de/glossary/index.html new file mode 100644 index 0000000000..8694f9c294 --- /dev/null +++ b/files/de/glossary/index.html @@ -0,0 +1,27 @@ +--- +title: Glossar +slug: Glossary +tags: + - Beginner + - Glossary + - NeedsTranslation + - TopicStub +translation_of: Glossary +--- +
{{LearnBox({"title":"Lerne einen neuen Begriff:"})}}
+ +

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 new file mode 100644 index 0000000000..41a5d3eff2 --- /dev/null +++ b/files/de/glossary/indexeddb/index.html @@ -0,0 +1,20 @@ +--- +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/informationsarchitektur/index.html b/files/de/glossary/informationsarchitektur/index.html new file mode 100644 index 0000000000..33e6cbc130 --- /dev/null +++ b/files/de/glossary/informationsarchitektur/index.html @@ -0,0 +1,19 @@ +--- +title: Informationsarchitektur +slug: Glossary/Informationsarchitektur +tags: + - Design + - Glossary + - User experience +translation_of: Glossary/Information_architecture +--- +

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 new file mode 100644 index 0000000000..37dc344aa9 --- /dev/null +++ b/files/de/glossary/internet/index.html @@ -0,0 +1,22 @@ +--- +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 new file mode 100644 index 0000000000..f0c6fe506f --- /dev/null +++ b/files/de/glossary/iso/index.html @@ -0,0 +1,21 @@ +--- +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 new file mode 100644 index 0000000000..2932148a2c --- /dev/null +++ b/files/de/glossary/jank/index.html @@ -0,0 +1,10 @@ +--- +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 new file mode 100644 index 0000000000..3d6c97645f --- /dev/null +++ b/files/de/glossary/javascript/index.html @@ -0,0 +1,44 @@ +--- +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

+ + + +

JavaScript lernen

+ + + +

Technisches

+ + diff --git a/files/de/glossary/jpeg/index.html b/files/de/glossary/jpeg/index.html new file mode 100644 index 0000000000..fa83b75a31 --- /dev/null +++ b/files/de/glossary/jpeg/index.html @@ -0,0 +1,17 @@ +--- +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

+ + diff --git a/files/de/glossary/json/index.html b/files/de/glossary/json/index.html new file mode 100644 index 0000000000..ef8c66fd00 --- /dev/null +++ b/files/de/glossary/json/index.html @@ -0,0 +1,28 @@ +--- +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

+ + + +

Technisches

+ + diff --git a/files/de/glossary/klasse/index.html b/files/de/glossary/klasse/index.html new file mode 100644 index 0000000000..0148e61387 --- /dev/null +++ b/files/de/glossary/klasse/index.html @@ -0,0 +1,20 @@ +--- +title: Klasse +slug: Glossary/Klasse +tags: + - CodingScripting + - Glossary +translation_of: Glossary/Class +--- +

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/konstruktor/index.html b/files/de/glossary/konstruktor/index.html new file mode 100644 index 0000000000..7c719b55ea --- /dev/null +++ b/files/de/glossary/konstruktor/index.html @@ -0,0 +1,47 @@ +--- +title: Konstruktor +slug: Glossary/Konstruktor +translation_of: Glossary/Constructor +--- +

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

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/leeres_element/index.html b/files/de/glossary/leeres_element/index.html new file mode 100644 index 0000000000..fd95ef05a6 --- /dev/null +++ b/files/de/glossary/leeres_element/index.html @@ -0,0 +1,34 @@ +--- +title: Leeres Element +slug: Glossary/Leeres_Element +tags: + - CodingScripting + - Fortgeschritten + - Glossar +translation_of: Glossary/Empty_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:

+ + diff --git a/files/de/glossary/local_scope/index.html b/files/de/glossary/local_scope/index.html new file mode 100644 index 0000000000..16a2fa8249 --- /dev/null +++ b/files/de/glossary/local_scope/index.html @@ -0,0 +1,19 @@ +--- +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

+ + diff --git a/files/de/glossary/local_variable/index.html b/files/de/glossary/local_variable/index.html new file mode 100644 index 0000000000..d0fcecb97b --- /dev/null +++ b/files/de/glossary/local_variable/index.html @@ -0,0 +1,29 @@ +--- +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/middleware/index.html b/files/de/glossary/middleware/index.html new file mode 100644 index 0000000000..10ca888536 --- /dev/null +++ b/files/de/glossary/middleware/index.html @@ -0,0 +1,16 @@ +--- +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

+ + diff --git a/files/de/glossary/mime_type/index.html b/files/de/glossary/mime_type/index.html new file mode 100644 index 0000000000..bba33994f8 --- /dev/null +++ b/files/de/glossary/mime_type/index.html @@ -0,0 +1,27 @@ +--- +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

+ + + +

Technische Referenzen

+ + diff --git a/files/de/glossary/mixin/index.html b/files/de/glossary/mixin/index.html new file mode 100644 index 0000000000..44c89a9f24 --- /dev/null +++ b/files/de/glossary/mixin/index.html @@ -0,0 +1,21 @@ +--- +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 new file mode 100644 index 0000000000..17090d5dd4 --- /dev/null +++ b/files/de/glossary/mozilla_firefox/index.html @@ -0,0 +1,29 @@ +--- +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 new file mode 100644 index 0000000000..218600b1ad --- /dev/null +++ b/files/de/glossary/namespace/index.html @@ -0,0 +1,18 @@ +--- +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

+ + diff --git a/files/de/glossary/node.js/index.html b/files/de/glossary/node.js/index.html new file mode 100644 index 0000000000..8d9676d534 --- /dev/null +++ b/files/de/glossary/node.js/index.html @@ -0,0 +1,29 @@ +--- +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 new file mode 100644 index 0000000000..625c61d2f5 --- /dev/null +++ b/files/de/glossary/null/index.html @@ -0,0 +1,23 @@ +--- +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

+ + + +

Technical reference

+ + diff --git a/files/de/glossary/number/index.html b/files/de/glossary/number/index.html new file mode 100644 index 0000000000..732029c79b --- /dev/null +++ b/files/de/glossary/number/index.html @@ -0,0 +1,23 @@ +--- +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

+ + + +

Technical reference

+ + diff --git a/files/de/glossary/objekt/index.html b/files/de/glossary/objekt/index.html new file mode 100644 index 0000000000..19b2f9f3d9 --- /dev/null +++ b/files/de/glossary/objekt/index.html @@ -0,0 +1,20 @@ +--- +title: Objekt +slug: Glossary/Objekt +tags: + - Einführung + - Objekt + - Objektorientierte Programmierung +translation_of: Glossary/Object +--- +

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 new file mode 100644 index 0000000000..8360565450 --- /dev/null +++ b/files/de/glossary/oop/index.html @@ -0,0 +1,21 @@ +--- +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 new file mode 100644 index 0000000000..4340c67e3b --- /dev/null +++ b/files/de/glossary/operand/index.html @@ -0,0 +1,14 @@ +--- +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

+ + diff --git a/files/de/glossary/operator/index.html b/files/de/glossary/operator/index.html new file mode 100644 index 0000000000..16758b5526 --- /dev/null +++ b/files/de/glossary/operator/index.html @@ -0,0 +1,22 @@ +--- +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

+ + + +

Technical reference

+ + diff --git a/files/de/glossary/php/index.html b/files/de/glossary/php/index.html new file mode 100644 index 0000000000..8ad2e03fbd --- /dev/null +++ b/files/de/glossary/php/index.html @@ -0,0 +1,15 @@ +--- +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 new file mode 100644 index 0000000000..69852d31e8 --- /dev/null +++ b/files/de/glossary/png/index.html @@ -0,0 +1,17 @@ +--- +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

+ + diff --git a/files/de/glossary/polyfill/index.html b/files/de/glossary/polyfill/index.html new file mode 100644 index 0000000000..838443fbdf --- /dev/null +++ b/files/de/glossary/polyfill/index.html @@ -0,0 +1,30 @@ +--- +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.

+ + + +

nachbilden.

+ +

Mehr erfahren

+ +

Allgemeinwissen

+ + diff --git a/files/de/glossary/progressive_enhancement/index.html b/files/de/glossary/progressive_enhancement/index.html new file mode 100644 index 0000000000..624a77649c --- /dev/null +++ b/files/de/glossary/progressive_enhancement/index.html @@ -0,0 +1,36 @@ +--- +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

+ + + + diff --git a/files/de/glossary/protokoll/index.html b/files/de/glossary/protokoll/index.html new file mode 100644 index 0000000000..eb631a6a81 --- /dev/null +++ b/files/de/glossary/protokoll/index.html @@ -0,0 +1,21 @@ +--- +title: Protokoll +slug: Glossary/Protokoll +tags: + - Glossary + - Infrastructure + - Protocols +translation_of: Glossary/Protocol +--- +

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 new file mode 100644 index 0000000000..1c249a0991 --- /dev/null +++ b/files/de/glossary/prototype-based_programming/index.html @@ -0,0 +1,20 @@ +--- +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

+ + diff --git a/files/de/glossary/prototype/index.html b/files/de/glossary/prototype/index.html new file mode 100644 index 0000000000..745f56fcab --- /dev/null +++ b/files/de/glossary/prototype/index.html @@ -0,0 +1,20 @@ +--- +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

+ + diff --git a/files/de/glossary/regular_expression/index.html b/files/de/glossary/regular_expression/index.html new file mode 100644 index 0000000000..91df208d05 --- /dev/null +++ b/files/de/glossary/regular_expression/index.html @@ -0,0 +1,27 @@ +--- +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 new file mode 100644 index 0000000000..1672a3e2a5 --- /dev/null +++ b/files/de/glossary/repo/index.html @@ -0,0 +1,14 @@ +--- +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 new file mode 100644 index 0000000000..c7af32abea --- /dev/null +++ b/files/de/glossary/responsive_web_design/index.html @@ -0,0 +1,19 @@ +--- +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 new file mode 100644 index 0000000000..3beb4427a8 --- /dev/null +++ b/files/de/glossary/rest/index.html @@ -0,0 +1,28 @@ +--- +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

+ + diff --git a/files/de/glossary/rgb/index.html b/files/de/glossary/rgb/index.html new file mode 100644 index 0000000000..f94c26226a --- /dev/null +++ b/files/de/glossary/rgb/index.html @@ -0,0 +1,22 @@ +--- +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/robots.txt/index.html b/files/de/glossary/robots.txt/index.html new file mode 100644 index 0000000000..918341a08b --- /dev/null +++ b/files/de/glossary/robots.txt/index.html @@ -0,0 +1,50 @@ +--- +title: Robots.txt +slug: Glossary/Robots.txt +translation_of: Glossary/Robots.txt +--- +

<p> {{HTMLSidebar ("Global_attributes")}} </ p>

+ +

  <p> <span class = "seoSummary"> Das <strong> translate </ strong> <a href="/en-US/docs/Web/HTML/Global_attributes"> globale Attribut </a> ist ein aufgezähltes Attribut, das  wird verwendet, um anzugeben, ob die <em> übersetzbaren Attributwerte </ em> eines Elements und die untergeordneten Knoten {{domxref ("Text")}} beim Lokalisieren der Seite übersetzt werden sollen oder ob sie unverändert bleiben sollen. </ span  > Es kann folgende Werte annehmen: </ p>

+ +

  <ul>
+  <li> leere Zeichenfolge oder <code> "yes" </ code>, die angibt, dass das Element übersetzt werden soll, wenn die Seite lokalisiert wird. </ li>
+  <li> <code> "no" </ code> gibt an, dass das Element nicht übersetzt werden darf. </ li>
+   </ ul>

+ +

  <p> Obwohl nicht alle Browser dieses Attribut erkennen, wird es von automatischen Übersetzungssystemen wie Google Translate und möglicherweise auch von Tools, die von menschlichen Übersetzern verwendet werden, respektiert.  Aus diesem Grund ist es wichtig, dass Webautoren dieses Attribut verwenden, um Inhalte zu markieren, die nicht übersetzt werden sollen. </ P>

+ +

  <h2 id = "Specifications"> Spezifikationen </ h2>

+ +

  <table class = "standard-table">
+  <tbody>
+  <tr>
+  <th scope = "col"> Spezifikation </ th>
+  <th scope = "col"> Status </ th>
+  <th scope = "col"> Kommentar </ th>
+  </ tr>
+  <tr>
+  <td> {{SpecName ('HTML WHATWG', "dom.html # attr-translate", "translate")}} </ td>
+  <td> {{Spec2 ('HTML WHATWG')}} </ td>
+  <td> Keine Änderung gegenüber dem letzten Snapshot {{SpecName ('HTML5.1')}} </ td>
+  </ tr>
+  <tr>
+  <td> {{SpecName ('HTML5.1', ​​"dom.html # the-translate-attribute", "translate")}} </ td>
+  <td> {{Spec2 ('HTML5.1')}} </ td>
+  <td> Momentaufnahme von {{SpecName ('HTML WHATWG')}}, ursprüngliche Definition </ td>
+  </ tr>
+  </ tbody>
+   </ table>

+ +

  <h2 id = "Browser_compatibility"> Browserkompatibilität </ h2>

+ +

  <div class = "hidden"> Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert.  Wenn Sie zu den Daten beitragen möchten, lesen Sie <a href="https://github.com/mdn/browser-compat-data"> https://github.com/mdn/browser-compat-  Daten </a> und senden Sie uns eine Pull-Anfrage. </ div>

+ +

  <p> {{Compat ("html.global_attributes.translate")}} </ p>

+ +

  <h2 id = "See_also"> Siehe auch </ h2>

+ +

  <ul>
+  <li> Alle <a href="/en-US/docs/Web/HTML/Global_attributes"> globalen Attribute </a>. </ li>
+  <li> Die Eigenschaft {{domxref ("HTMLElement.translate")}}, die dieses Attribut widerspiegelt. </ li>
+  <li> <a href="https://www.w3.org/International/questions/qa-translate-flag"> Verwenden des HTML-Übersetzungsattributs </a>. </ li>

diff --git a/files/de/glossary/rss/index.html b/files/de/glossary/rss/index.html new file mode 100644 index 0000000000..1a0d544c7b --- /dev/null +++ b/files/de/glossary/rss/index.html @@ -0,0 +1,24 @@ +--- +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

+ + + +

Technical reference

+ + diff --git a/files/de/glossary/scope/index.html b/files/de/glossary/scope/index.html new file mode 100644 index 0000000000..b8e42dee07 --- /dev/null +++ b/files/de/glossary/scope/index.html @@ -0,0 +1,38 @@ +--- +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

+ + diff --git a/files/de/glossary/server/index.html b/files/de/glossary/server/index.html new file mode 100644 index 0000000000..697baf1ac8 --- /dev/null +++ b/files/de/glossary/server/index.html @@ -0,0 +1,24 @@ +--- +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

+ + diff --git a/files/de/glossary/sloppy_mode/index.html b/files/de/glossary/sloppy_mode/index.html new file mode 100644 index 0000000000..51077019a3 --- /dev/null +++ b/files/de/glossary/sloppy_mode/index.html @@ -0,0 +1,16 @@ +--- +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

+ + diff --git a/files/de/glossary/slug/index.html b/files/de/glossary/slug/index.html new file mode 100644 index 0000000000..329557883b --- /dev/null +++ b/files/de/glossary/slug/index.html @@ -0,0 +1,10 @@ +--- +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 new file mode 100644 index 0000000000..f4bd10de94 --- /dev/null +++ b/files/de/glossary/specification/index.html @@ -0,0 +1,23 @@ +--- +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

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/sql/index.html b/files/de/glossary/sql/index.html new file mode 100644 index 0000000000..677a49ff3d --- /dev/null +++ b/files/de/glossary/sql/index.html @@ -0,0 +1,26 @@ +--- +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

+ + + +

SQL lernen

+ + diff --git a/files/de/glossary/string/index.html b/files/de/glossary/string/index.html new file mode 100644 index 0000000000..6d3a8c7cc4 --- /dev/null +++ b/files/de/glossary/string/index.html @@ -0,0 +1,22 @@ +--- +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 new file mode 100644 index 0000000000..36a5c92cfe --- /dev/null +++ b/files/de/glossary/svg/index.html @@ -0,0 +1,33 @@ +--- +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

+ + + +

SVG lernen

+ + + +

Technische Informationen

+ + diff --git a/files/de/glossary/symbol/index.html b/files/de/glossary/symbol/index.html new file mode 100644 index 0000000000..1f3a67271e --- /dev/null +++ b/files/de/glossary/symbol/index.html @@ -0,0 +1,27 @@ +--- +title: Symbol +slug: Glossary/Symbol +tags: + - Datentyp + - Glossar + - JavaScript +translation_of: Glossary/Symbol +--- +

Ein Symbol ist ein primitiver Datentyp, dessen Instanzen eindeutig und unveränderbar sind. In manchen Programmiersprachen kennt man diesen Datentyp auch als atom.

+ +

In {{Glossary("JavaScript")}} ist Symbol einer der primitiven Typen und das {{jsxref("Symbol")}} Objekt ist ein Wrapper für den primitiven Symbol Typ.

+ +

Ein Symbol kann eine optionale Beschreibung enthalten, diese dient jedoch nur dem Debugging (Fehlersuche).

+ +

Symbole in JavaScript sind mit der ECMAScript Edition 6 eingeführt worden.  In EcmaScript 5 gibt es kein Äquivalent für Symbol.

+ +

Mehr dazu

+ +

Generelles Wissen

+ + diff --git a/files/de/glossary/tag/index.html b/files/de/glossary/tag/index.html new file mode 100644 index 0000000000..3182ae7521 --- /dev/null +++ b/files/de/glossary/tag/index.html @@ -0,0 +1,24 @@ +--- +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

+ + + +

Technical reference

+ + diff --git a/files/de/glossary/tcp/index.html b/files/de/glossary/tcp/index.html new file mode 100644 index 0000000000..48c6e0be4c --- /dev/null +++ b/files/de/glossary/tcp/index.html @@ -0,0 +1,23 @@ +--- +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

+ + diff --git a/files/de/glossary/tls/index.html b/files/de/glossary/tls/index.html new file mode 100644 index 0000000000..7d145fdac3 --- /dev/null +++ b/files/de/glossary/tls/index.html @@ -0,0 +1,27 @@ +--- +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

+ + diff --git a/files/de/glossary/truthy/index.html b/files/de/glossary/truthy/index.html new file mode 100644 index 0000000000..c45968bb32 --- /dev/null +++ b/files/de/glossary/truthy/index.html @@ -0,0 +1,33 @@ +--- +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

+ + diff --git a/files/de/glossary/typ/index.html b/files/de/glossary/typ/index.html new file mode 100644 index 0000000000..890c06d118 --- /dev/null +++ b/files/de/glossary/typ/index.html @@ -0,0 +1,21 @@ +--- +title: Typ +slug: Glossary/Typ +tags: + - CodingScripting + - Glossary + - JavaScript +translation_of: Glossary/Type +--- +

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 new file mode 100644 index 0000000000..39202e3f1d --- /dev/null +++ b/files/de/glossary/type_conversion/index.html @@ -0,0 +1,41 @@ +--- +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 new file mode 100644 index 0000000000..7ead5b5252 --- /dev/null +++ b/files/de/glossary/ui/index.html @@ -0,0 +1,22 @@ +--- +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

+ + diff --git a/files/de/glossary/undefined/index.html b/files/de/glossary/undefined/index.html new file mode 100644 index 0000000000..0fd7a44ec6 --- /dev/null +++ b/files/de/glossary/undefined/index.html @@ -0,0 +1,23 @@ +--- +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

+ + + +

Technische Referenzen

+ + diff --git a/files/de/glossary/uri/index.html b/files/de/glossary/uri/index.html new file mode 100644 index 0000000000..16f6001f30 --- /dev/null +++ b/files/de/glossary/uri/index.html @@ -0,0 +1,22 @@ +--- +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 new file mode 100644 index 0000000000..ad6f5a3a5b --- /dev/null +++ b/files/de/glossary/url/index.html @@ -0,0 +1,33 @@ +--- +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

+ + + +

Zum Lernen

+ + + +

Spezialisierung

+ + diff --git a/files/de/glossary/user_agent/index.html b/files/de/glossary/user_agent/index.html new file mode 100644 index 0000000000..bcf4374e8a --- /dev/null +++ b/files/de/glossary/user_agent/index.html @@ -0,0 +1,51 @@ +--- +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

+ + + +

Technische Referenzen

+ + + + diff --git a/files/de/glossary/ux/index.html b/files/de/glossary/ux/index.html new file mode 100644 index 0000000000..076f215b5d --- /dev/null +++ b/files/de/glossary/ux/index.html @@ -0,0 +1,20 @@ +--- +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

+ + diff --git a/files/de/glossary/validator/index.html b/files/de/glossary/validator/index.html new file mode 100644 index 0000000000..2c5f41a176 --- /dev/null +++ b/files/de/glossary/validator/index.html @@ -0,0 +1,19 @@ +--- +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 new file mode 100644 index 0000000000..f82e1e438f --- /dev/null +++ b/files/de/glossary/value/index.html @@ -0,0 +1,14 @@ +--- +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

+ + diff --git a/files/de/glossary/variable/index.html b/files/de/glossary/variable/index.html new file mode 100644 index 0000000000..c8ddc3b30c --- /dev/null +++ b/files/de/glossary/variable/index.html @@ -0,0 +1,25 @@ +--- +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

+ + + +

Rechnische Referenzen

+ + diff --git a/files/de/glossary/verbotener_header_name/index.html b/files/de/glossary/verbotener_header_name/index.html new file mode 100644 index 0000000000..23bbba81ca --- /dev/null +++ b/files/de/glossary/verbotener_header_name/index.html @@ -0,0 +1,49 @@ +--- +title: Verbotener Header-Name +slug: Glossary/verbotener_header_name +tags: + - Fetch + - Glossar + - Glossary + - HTTP + - Headers + - Verboten + - Wörterverzeichnis +translation_of: Glossary/Forbidden_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:

+ + + +
+

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/viewport/index.html b/files/de/glossary/viewport/index.html new file mode 100644 index 0000000000..b68d40ddd4 --- /dev/null +++ b/files/de/glossary/viewport/index.html @@ -0,0 +1,24 @@ +--- +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 new file mode 100644 index 0000000000..0a31701b5a --- /dev/null +++ b/files/de/glossary/visual_viewport/index.html @@ -0,0 +1,19 @@ +--- +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 new file mode 100644 index 0000000000..ed3aef5875 --- /dev/null +++ b/files/de/glossary/voip/index.html @@ -0,0 +1,20 @@ +--- +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

+ + diff --git a/files/de/glossary/w3c/index.html b/files/de/glossary/w3c/index.html new file mode 100644 index 0000000000..aaa1b8a0f0 --- /dev/null +++ b/files/de/glossary/w3c/index.html @@ -0,0 +1,26 @@ +--- +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

+ + diff --git a/files/de/glossary/wai/index.html b/files/de/glossary/wai/index.html new file mode 100644 index 0000000000..3a33809800 --- /dev/null +++ b/files/de/glossary/wai/index.html @@ -0,0 +1,18 @@ +--- +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

+ + diff --git a/files/de/glossary/webdav/index.html b/files/de/glossary/webdav/index.html new file mode 100644 index 0000000000..3caf3300ac --- /dev/null +++ b/files/de/glossary/webdav/index.html @@ -0,0 +1,40 @@ +--- +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

+ + + +
+
+ +

Mehr erfahren

+ +

Allgemeinwissen

+ + + +

Technische Referenz

+ + diff --git a/files/de/glossary/webm/index.html b/files/de/glossary/webm/index.html new file mode 100644 index 0000000000..4da68d24c7 --- /dev/null +++ b/files/de/glossary/webm/index.html @@ -0,0 +1,28 @@ +--- +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

+ + + + diff --git a/files/de/glossary/webp/index.html b/files/de/glossary/webp/index.html new file mode 100644 index 0000000000..852e6ca068 --- /dev/null +++ b/files/de/glossary/webp/index.html @@ -0,0 +1,31 @@ +--- +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

+ + + + diff --git a/files/de/glossary/webrtc/index.html b/files/de/glossary/webrtc/index.html new file mode 100644 index 0000000000..cd7d0f861e --- /dev/null +++ b/files/de/glossary/webrtc/index.html @@ -0,0 +1,26 @@ +--- +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 new file mode 100644 index 0000000000..c7f446ea8a --- /dev/null +++ b/files/de/glossary/websockets/index.html @@ -0,0 +1,41 @@ +--- +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 new file mode 100644 index 0000000000..2dfd58a2c3 --- /dev/null +++ b/files/de/glossary/wrapper/index.html @@ -0,0 +1,30 @@ +--- +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 new file mode 100644 index 0000000000..4c91829a12 --- /dev/null +++ b/files/de/glossary/xml/index.html @@ -0,0 +1,18 @@ +--- +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/installationsmanifest/index.html b/files/de/installationsmanifest/index.html new file mode 100644 index 0000000000..b0ce828915 --- /dev/null +++ b/files/de/installationsmanifest/index.html @@ -0,0 +1,328 @@ +--- +title: Installationsmanifest +slug: Installationsmanifest +tags: + - Add-ons + - Erweiterungen + - Toolkit API +translation_of: Archive/Add-ons/Install_Manifests +--- +

Einführung

+

Ein Installationsmanifest ist eine Datei, die von einer XUL-Anwendung mit einem Add-on Manager benutzt wird, um Information über das zu installierende Add-on zu erhalten. Es enthält Metadaten zur Identifikation des Add-ons und gibt Auskunft darüber, wer es erstellt hat, wo weiterführende Informationen zu finden sind, welche Versionen mit welcher Anwendung kompatibel ist, wie das Add-on zu aktualisieren ist, usw.

+

Das Format eines Installationsmanifests ist RDF/XML.

+

Die Datei muss den Namen install.rdf haben und sich auf der obersten Verzeichnisebene in der XPI-Datei eines Add-ons befinden.

+

Aufbau

+

Der grundlegende Aufbau eines Installationsmanifests sieht folgendermaßen aus:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <!-- Eigenschaften -->
+  </Description>
+</RDF>
+
+

Einige Eigenschaften sind erforderlich, andere sind optional. Einige sind einfache Zeichenketten, während andere komplexe Ressourcen sind.

+

Referenz erforderlicher Eigenschaften

+

Diese Eigenschaften müssen in Ihrem Installationsmanifest korrekt angegeben werden, andernfalls wird Ihr Add-on eventuell nicht installiert.

+

id

+

Die ID der Erweiterung, nämlich entweder eine:

+ +

Letztere Form ist deutlich einfacher zu erzeugen und zu verändern. Firefox 1.5 ist in der Lage sicherzustellen, dass Ihre ID dem einen oder anderen Format entspricht und wird die Installation eines Add-ons verweigern, sollte die ID nicht wohlgeformt sein.

+

Beispiele

+
<em:id>myextension@mysite.com</em:id>
+
+<em:id>{daf44bf7-a45e-4450-979c-91cf07434c3d}</em:id>
+
+

version

+

Eine Zeichenkette, welche die Version des vorliegendenAdd-ons angibt.

+

Für Firefox/Thunderbird 1.0 muss das Format den Regeln genügen, die in "Versionen, Aktualisierung und Kompatibilität von Add-ons" beschrieben sind.
+ Für Firefox/Thunderbird 1.5, siehe Toolkit Versionsformate.

+

Beispiele

+
<em:version>2.0</em:version>
+
+<em:version>1.0.2</em:version>
+
+<em:version>0.4.1.2005090112</em:version>
+
+
+

Firefox 1.5 / XULRunner 1.8 - Add-ons mit einem ungültigen Versionsformat werden nicht installiert. Das Format unterscheidet sich vom 1.0er, ist jedoch dazu abwärtskompatibel.

+

Für auf addons.mozilla.org bereitgestellte Add-ons - Mozillas Aktualisierungswebseite verpackt Ihr Add-on möglicherweise neu und berichtigt Versionszeichenketten oder weist sie zurück.

+

type

+

Ein ganzzahliger Wert, der für den Typ des Add-ons steht.

+ + + + + + + + + + + + + + + + + + + +
2Erweiterungen
4Theme
8Lokalisierung
32Multiple Item Package
+

Beispiele

+
<em:type>2</em:type>
+
+

{{ Fx_minversion_inline(1.5) }} Diese Eigenschaft wurde in Firefox 1.5 hinzugefügt und ist nur erforderlich für Add-on Typen, die keine Erweiterungen und Themen sind.

+

{{ Fx_minversion_inline(3) }} Firefox 2 und früher unterstützen einen Wert von "16", welcher Plug-ins repräsentierte. In Firefox 3 wurde dies entfernt.

+

targetApplication

+

Ein Objekt, welches eine Ziel-Applikation des Add-ons festlegt. Das bedeutet, dass das Add-on mit der Anwendung arbeitet, welche mit der ID Eigenschaft (<em:id>) festgelegt wurde (eine Liste von Anwendungs-IDs und gültigen min/maxVersions für diese, siehe Valid application versions for add-on developers[engl.]) und welche der minimalen Version (<em:minVersion>) bis und einschließlich der maximalen Version (<em:maxVersion>) entspricht. Diese Versionsangaben sind in der gleichen Weise formatiert, wie auch die version Eigenschaft und wird mit der Anwendungsversion verglichen. Das erlaubt dem Erweiterungsautor, festzulegen, welche Version von Firefox getestet wurde.

+
+ Erweiterungen, die kompatibel mit Firefox 3.5 sind, sollten eine maxVersion von 3.5.* festlegen, sodass sie automatisch kompatibel mit Sicherheitsupdates sind. Für Firefox 3.0 sollte eine maxVersion von 3.0.* verwendet werden. Erweiterungen, die nur mit Firefox oder Thunderbird 2 kompatibel sind, sollten eine maxVersion von 2.0.0.* festlegen.
+

Das Installationsmanifest muss wenigsten eine dieser Objekte festlegen und kann weitere festlegen, wenn das Add-on auf mehrere Anwendungen zielt, die der Add-on Manager unterstützt (z.B. Firefox and Thunderbird).

+

Beispiele

+
<em:targetApplication>
+ <Description>
+  <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> Firefox
+  <em:minVersion>1.5</em:minVersion>
+  <em:maxVersion>3.0.*</em:maxVersion>
+ </Description>
+</em:targetApplication>
+
+

{{ Fx_minversion_inline(3) }} Auf Gecko 1.9 basierte Anwendungen erlauben Ihnen eine spezielle targetApplication ID toolkit@mozilla.org zu verwenden, um auszudrücken, dass das Add-on kompatibel mit jeder Toolkit-Anwendung ist, die auf die minVersion und maxVersion passt.

+

name

+

Der Name des Add-ons - vorgesehen für die Anzeige auf der Benutzeroberfläche.

+

Beispiele

+
<em:name>Meine Erweiterung</em:name>
+
+

Referenz optionaler Eigenschaften

+

Abhängig von den Fähigkeiten Ihres Add-ons müssen diese Eigenschaften gegebenenfalls angegeben werden.

+

bootstrap

+

{{ Fx_minversion_inline(4) }} Ein boolescher Wert, welcher der Anwendung mitteilt, ob die Erweiterung ohne Neustart installiert, deinstalliert oder aktualisiert werden kann. Das funktioniert zur Zeit nur für Add-ons mit em:type="2". Der Standardwert ist false. Für weitere Informationen, siehe Bootstrapped Extensions.

+

unpack

+

{{ Fx_minversion_inline(4) }} Ein boolescher Wert, welcher angibt, ob die Erweiterung es erfordert, dass die ihre Dateien in ein Verzeichnis entpackt werden müssen, damit diese funktioniert oder ob die Erweiterung direkt vom XPI geladen werden kann. In Versionen vor Gecko 2.0 werden alle Erweiterungen entpackt, in Gecko 2.0 und später wird standardmäßig nicht entpackt. Falls eine Erweiterung folgendes enthält, muss diese entpackt werden:

+ +

localized

+

{{ Fx_minversion_inline(3) }} Den Namen, die Beschreibung, die Namen von Mitwirkenden und weitere Metadaten können Sie hiermit sprachlich anpassen. Mindestens ein em:locale muss von der angepassten Beschreibung spezifiziert werden, um anzuzeigen für welche Sprachregionen die Information genutzt werden soll.

+

Beispiele

+

Dies legt ein Reihe von Add-on Metadaten fest, die angezeigt werden, wenn die Anwendung im de-DE Sprachpaket läuft.

+
<em:localized>
+  <Description>
+    <em:locale>de-DE</em:locale>
+    <em:name>Tab Sidebar</em:name>
+    <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
+  </Description>
+</em:localized>
+
+

Die folgenden Eigenschaften, die auch auf dieser Seite genannt werden, können in die Eigenschaft "localized" eingefügt werden:

+ +

Weitere Dokumentation lässt sich unter Lokalisierung von Erweiterungsbeschreibungen finden.

+

description

+

Eine Kurzbeschreibung des Add-ons - vorgesehen für die Anzeige auf der Benutzeroberfläche. Die Beschreibung sollte in einer kurzen Textzeile Platz finden.

+

Beispiele

+
MegaInternetPhoneCall;em:description>Fortgeschrittene foo-Werkzeuge.</em:description>
+
+

creator

+

Der Name des Erstellers/Hauptentwicklers - vorgesehen für die Anzeige auf der Benutzeroberfläche.

+

Beispiele

+
<em:creator>John Doe</em:creator>
+
+

oder

+
<em:creator>CoolExtension Team</em:creator>
+
+

developer

+

{{ Fx_minversion_inline(2) }} Entwicklername(n). Sie können diesen Wert mehrfach angeben, um die Namen mehrerer Entwickler anzugeben.

+

Beispiele

+
<em:developer>Jane Doe</em:developer>
+<em:developer>Koos van der Merwe</em:developer>
+
+

translator

+

{{ Fx_minversion_inline(2) }} Übersetzername(n). Sie können diesen Wert mehrfach angeben, um die Namen mehrerer Übersetzer anzugeben.

+

Beispiele

+
<em:translator>Janez Novak</em:translator>
+<em:translator>Kari Nordmann</em:translator>
+
+

contributor

+

Name(n) zusätzliche(r) Mitwirkende(r). Sie können diesen Wert mehrfach angeben, um die Namen mehrerer Mitwirkender anzugeben.

+

Beispiele

+
<em:contributor>John Doe</em:contributor>
+
+<em:contributor>John Doe</em:contributor>
+<em:contributor>Jane Doe</em:contributor>
+<em:contributor>Elvis Presley</em:contributor>
+
+

homepageURL

+

Eine Verknüpfung zur Seite des Zusatzes - vorgesehen für die Anzeige auf der Benutzeroberfläche.

+

Beispiele

+
<em:homepageURL>http://www.foo.com/</em:homepageURL>
+
+

updateURL

+

Ein Link zu einer Aktualisierungsdatei des Manifests, welches verfügbare Updates für das Add-on festlegt. Das Format ist unten beschrieben. Wenn aktiviert, überprüft der Add-on Manager regelmäßig diese Manifestdatei, um festzustellen, ob neuere Versionen verfügbar sind.

+
+ Hinweis: Es wird stark empfohlen, dass die updateURL ein HTTPS (sicherer) Link ist. Nicht sicherere Aktualisierungs-URLs können von Malware infiziert werden und führen dazu, dass Malware auf den Computer des Benutzers geschleust wird. Alternativ können Sie Ihre Erweiterung auf AMO bereitstellen und updateURL komplett weglassen. Sicherheitsupdates werden automatisch bereitgestellt.
+

{{ Fx_minversion_inline(3) }} Aus Sicherheitsgründen erfordern Gecko 1.9 Anwendungen, dass Sie eine HTTPS updateURL oder einen updateKeyangeben müssen.

+

Ihr Server muss diese Datei als text/rdf, text/xml oder application/xml+rdf ausliefern, sonst funktioniert der Update-Checker nicht.

+

Der Add-on Manager wird die folgenden Werte in der URLersetzen, falls Sie das RDF dynamisch generieren wollen, z.B. mit PHP oder CGI:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
%REQ_VERSION%Die Version der Anfrage. Aktuell 1
%ITEM_ID%Die id des Add-ons, welches aktualisiert werden soll
%ITEM_VERSION%Die version des Add-ons, welches aktualisiert werden soll
%ITEM_MAXAPPVERSION%Die maxVersion des targetApplication Objekts, im Bezug zur aktuellen Anwendung für das zu aktualisierende Add-on.
%ITEM_STATUS%{{ Fx_minversion_inline(2) }} Komma-getrennte Liste der Add-on Status in der Applikation. Enthält mindestens entweder userEnabled oder userDisabled plus eine Nummer von incompatible, blockslisted oder needsDependencies.
%APP_ID%Die id der aktuellen Anwendung
%APP_VERSION%Die Version der Anwendung, um auf Updates zu prüfen
%CURRENT_APP_VERSION%{{ Fx_minversion_inline(3.5) }} Die Version der aktuellen Anwendung
%APP_OS%{{ Fx_minversion_inline(1.5) }} Der Wert von OS_TARGET aus dem Firefox Build-System, welcher das verwendete Betriebssystem identifiziert.
%APP_ABI%{{ Fx_minversion_inline(1.5) }} Der Wert von TARGET_XPCOM_ABI aus dem Firefox Build-System, welcher die Architektur zur Kompilierung der aktuellen Anwendung enthält.
%APP_LOCALE%{{ Fx_minversion_inline(3) }} Die aktuelle Sprache der Anwendung.
+

Beispiele

+
<em:updateURL>http://www.foo.com/update.cgi?id=%ITEM_ID%&amp;version=%ITEM_VERSION%</em:updateURL>
+<em:updateURL>http://www.foo.com/extension/windows.rdf</em:updateURL>
+
+

Für Add-ons, die auf addons.mozilla.org bereitgestellt werden: Sie müssen keine updateURL Eigenschaft angeben. Standardmäßig werden Mozilla Applikationen über den Addon Manager (wie Firefox und Thunderbird) automatisch Anfragen an addons.mozilla.org senden. Jedes Mal, wenn Sie eine neue Version Ihres Add-ons hochladen oder die Kompatibilitätsparameter ändern, wird Ihr Update-Manifest automatisch generiert. Add-ons, die aktuell als experimental markiert sind, werden aus Gründen der Sicherheit nicht aktualisiert.

+

Format des Update-Manifests: Das Update-Manifest ist eine RDF/XML Datenquelle. Beispiele eines Update-Manifests, siehe Versionen, Aktualisierung und Kompatibilität von Add-ons.

+

updateKey

+

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

+

Um die Sicherheit eines Updates von RDF Daten zu gewährleisten, welches über HTTP empfangen wird, müssen Sie eine digitale Signatur, um die Inhalte der Daten zu verifizieren, hinzufügen. Um dies zu machen, müssen Sie den öffentlichen Teil des kryptographischen Schlüssel in einem updateKey in der install.rdf Datei des Add-ons notieren. Dieser kann über ein Tool generiert werden: McCoy. Zeilenumbrüche und Leerzeichen werden ignoriert.

+

Beispiele

+
 <em:updateKey>MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK426erD/H3XtsjvaB5+PJqbhj
+               Zc9EDI5OCJS8R3FIObJ9ZHJK1TXeaE7JWqt9WUmBWTEFvwS+FI9vWu8058N9CHhD
+               NyeP6i4LuUYjTURnn7Yw/IgzyIJ2oKsYa32RuxAyteqAWqPT/J63wBixIeCxmysf
+               awB/zH4KaPiY3vnrzQIDAQAB</em:updateKey>
+
+

optionsURL

+

Die chrome:// URL des Dialogfensters für die Optionen der Erweiterung. Nur für Erweiterungen von Nutzen. Sofern diese Eigenschaft angegeben ist, wird bei Auswahl dieser Erweiterung in der Erweiterungsliste die Schaltfläche "Einstellungen" auswählbar, welche auf Klick hin dieses Dialogfenster anzeigt.

+

Beispiele

+
<em:optionsURL>chrome://myext/content/options.xul</em:optionsURL>
+
+

aboutURL

+

Die chrome://-URL des Dialogfensters für Information über die Erweiterung. Nur für Erweiterungen von Nutzen. Sofern diese Eigenschaft angegeben ist, wird bei Auswahl dieser Erweiterung in der Erweiterungsliste ein entsprechender Eintrag im Kontextmenü der Erweiterung verfügbar, welcher auf Auswahl hin dieses Dialogfenster statt einer vorgegebenen Variante anzeigt.

+

Beispiele

+
<em:aboutURL>chrome://myext/content/about.xul</em:aboutURL>
+
+

iconURL

+

Eine chrome:// URL zu einem 32x32 Icon, welches in der Add-on List angezeigt wird. Wird diese Eigenschaft nicht angegeben, wird das Standardicon verwendet.

+
<em:iconURL>chrome://myext/skin/icon.png</em:iconURL>
+
+ Hinweis: Damit das obige Beispiel funktioniert, müssen Sie auch ein skin Paket in Ihre chrome.manifest Datei hinzufügen. Siehe Chrome Registrierung#skin. Alternativ können Sie Ihr Icon in das Verzeichnis packen, welches Sie in Ihrem content Paket festgelegt haben.
+

{{ gecko_minversion_note("1.9.2", "Ab Gecko 1.9.2 (Firefox 3.6) können Sie auch einfach Ihr Icon icon.png nennen und es in das Basisverzeichnis des Add-ons platzieren. Das erlaubt Ihnen Ihr Add-on Icon sogar anzuzeigen, wenn Ihr Add-on deaktiviert ist oder im Manifest kein iconURL Eintrag vorhanden ist.") }}

+

targetPlatform

+

{{ Fx_minversion_inline(1.5) }} Eine Zeichenkette, welche die Plattform angibt, die vom Add-on unterstützt wird. Enthält entweder den Wert von OS_TARGET allein oder in Kombination mit TARGET_XPCOM_ABI, getrennt durch einen Unterstrich (_).

+

Sie können die Eigenschaft targetPlatform je Manifest mehrfach angeben. Passt einer der Werte zu den Parametern, mit denen die Anwendung gebaut wurde, wird das Add-on installiert; anderenfalls erhält der Benutzer eine entsprechende Fehlermeldung.

+

Beispiele

+
<em:targetPlatform>WINNT_x86-msvc</em:targetPlatform>
+
+<em:targetPlatform>Linux</em:targetPlatform>
+
+<em:targetPlatform>Darwin_ppc-gcc3</em:targetPlatform>
+
+<em:targetPlatform>SunOS_sparc-sunc</em:targetPlatform>
+
+

Normalerweise verwenden Sie nur den OS Teil für Themes und Erweiterungen, die nicht komplett System-übergreifend sind. Für Erweiterungen mit binären (kompilierten) Komponenten sollten sie aber niemals das OSalleine sonder mit ABI (s) angeben, mit welchen Sie die Komponenten kompiliert haben. Wenn Sie mehrere Versionen der Komponenten einbinden wollen, sollten Sie Plattform-spezifische Unterverzeichnisse verwenden.

+

Hinweise

+ + +

Diese Eigenschaft wurde für Firefox/Thunderbird 1.5 hinzugefügt. Vorherige Versionen dieser Anwendungen werden die Einschränkungen ignorieren und das Add-on ungeachtet der Plattform installieren.

+

requires

+

{{ Fx_minversion_inline(2) }} Dieses Tag hat ein ähnliches Syntax wie das <em:targetApplication> Tag. Wenn das Add-on ,von dem <em:id> Tag festgelegt, nicht installiert ist oder eine nicht kompatible Version hat, wird der Erweiterungsmanager die Erweiterung deaktivieren und die Nachricht anzeigen "Erfordert zusätzliche Funktionen". Sie können so viele <em:requires> Tags wie Sie möchten hinzufügen. Ihre Erweiterung wird deaktiviert, wenn eines der festlegten Anforderungen fehlschlägt.

+

Beispiele

+
<em:requires>
+   <Description>
+     <!-- Lightning -->
+     <em:id>{e2fda1a4-762b-4020-b5ad-a41df1933103}</em:id>
+     <em:minVersion>0.5pre</em:minVersion>
+     <em:maxVersion>0.5pre</em:maxVersion>
+   </Description>
+ </em:requires>
+
+

Hinweise

+ +

Diese Eigenschaft wurde in Firefox/Thunderbird 2 hinzugefügt. Vorherige Versionen dieser Anwendungen werden diese Einschränkungen ignorieren und das Add-on unabhängig von den Anforderungen installieren.

+

Referenz veralteter Eigenschaften

+

Diese Eigenschaften waren in alten Versionen des Add-on Managers vorhanden, wurden aber mittlerweile durch neuere und bessere Mechanismen ersetzt.

+

file

+

Firefox 1.0 Diese Eigenschaft verwies auf eine chrome .jar Datei, die Chrome-Pakete enthielt, die eine Registrierung mit der Chrome-Registry erforderten.

+

Die <em:file> Eigenschaft hat einen komplexen Objektwert. Die uri des Wertes ist urn:mozilla:extension:file:jarFile.jar wobei jarFile.jar derName der jar Datei ist, welche die Dateien des Chrome-Pakets enthält. Das könnte auch der Name eines Verzeichnisses sein, welches die Dateien des Chrome-Pakets enthält, un-jarred (z.B. urn:mozilla:extension:file:directory). In beiden Fällen müssen die Chrome Paketdatei(en) in dem chrome Unterverzeichnis des XPI Archivs platziert werden.

+

Dieses Objekt hat eine package Eigenschaft (mit einem Pfad in der jar Datei oder Verzeichnis, welches zum Ort der contents.rdf Datei führt, um die das Paket zu registrieren), eine locale Eigenschaft (genauso, registriert aber die Sprache) und eine skin Eigenschaft (genauso, aber registriert das Theme-Material).

+

Bei Erweiterungen für Firefox 1.5, ist diese Eigenschaft nicht länger notwendig: Das chrome.manifest im XPI wird verwendet um die Registrierungsareit zu verrichten. Wenn kein chrome.manifest vorhanden ist, wird diese Eigenschaft vom Addon Manager gelesen und ein chrome.manifest wird generiert.

+

Beispiele

+
<em:file>
+ <Description about="urn:mozilla:extension:file:myext.jar">
+  <em:package>content/myext/</em:package>
+  <em:locale>locale/en-US/myext/</em:locale>
+  <em:skin>skin/classic/myext/<em:skin>
+ </Description>
+</em:file>
+
+

Ein Installationsmanifest kann mehrere file Eigenschaften festlegen, eine für jede jar Datei oder Unterverzeichnis, welches Chrome zum registrieren enthält.

+

hidden

+

Firefox 1.0 - 3.5 Ein boolscher Wert, falls true wird das Add-on nicht in der Add-on Liste angezeigt, vorausgesetzt, dass das Add-on in einer {{ Anch("Restricted access area") }} installiert ist. (sodass es nicht für installierte Add-ons im Profil arbeitet).

+
+ Hinweis: Diese Eigenschaft wird nicht mehr von Gecko 1.9.2 (Firefox 3.6)oder später unterstützt, um zu verhindern, dass Erweiterungen installiert werden, von denen der Benutzer nichts mitbekommt.
+

Beispieie

+
<em:hidden>true</em:hidden>
+
+

Glossar

+

Restricted access area

+

Ein restricted access area ist ein Installationort, welcher durch einen restricted-access Account eingeschränkt werden kann, unabhängig ob der Ort mit den aktuellen Benutzerrechten eingeschränkt ist oder nicht (siehe {{ Source("toolkit/mozapps/extensions/public/nsIExtensionManager.idl#80", "nsIInstallLocation::restricted") }}). Zur Zeit sind die ($APPDIR)/extensions Ordner und die Registry Installationsorte unter HKEY_LOCAL_MACHINE (siehe Erweiterungen über die Windows Registrierung hinzufügen für Details) eingeschränkt

+

Die ($PROFILE)/extensions und HKEY_CURRENT_USER Installationsorte sind hingegen nicht beschränkt.

diff --git a/files/de/installing_mercurial/index.html b/files/de/installing_mercurial/index.html new file mode 100644 index 0000000000..823cf02406 --- /dev/null +++ b/files/de/installing_mercurial/index.html @@ -0,0 +1,165 @@ +--- +title: Installing Mercurial +slug: Installing_Mercurial +translation_of: Mozilla/Mercurial/Installing_Mercurial +--- +

{{ Note('If you have not yet read the Mercurial basics do so now, or see Mercurial for other resources.') }}

+

Installing

+

We recommend running a Mercurial no older than version 2.8. Version 2.9 or greater is highly recommended, as there are numerous bug fixes and performance enhancements.

+
+
+ On Windows:
+
+ Mercurial comes with MozillaBuild, in the folder 'hg'.  See also wikimo:Mercurial on Windows.
+
+ Firefox build bootstrapper
+
+ Try running the one-line system bootstrapper described here. This will help ensure a modern version of Mercurial is installed.
+
+ Using a package manager:
+
+ If you use apt-get, emerge, port, yast, or yum to install software, just do the usual. If this gives you an old version (pre-1.5 -- check with hg version), you can update it using easy_install as follows: +
    +
  • Using apt-get: + 
    sudo apt-get install python-setuptools python-dev build-essential
+sudo easy_install -U mercurial
    +
    • +
  • Using yum: + 
    sudo yum install python-setuptools python-devel.i686
+sudo easy_install -U mercurial
    +
    • +
+
+
+
+
+ Other systems
+
+ Otherwise, the Mercurial binary packages are for you.
+
+

Basic configuration

+

You should configure Mercurial before submitting patches to Mozilla.

+

If you will be pulling the Firefox source code or one of the derived repositories, the easiest way to configure Mercurial is to run the mercurial-setup mach command:

+
./mach mercurial-setup
+

This command starts an interactive wizard that will help ensure your Mercurial is configured with the latest recommended settings. This command will not change any files on your machine without your consent.

+

If you don't have the Firefox source code available, you should edit your Mercurial configuration file to look like the following:

+
[ui]
+username = Your Real Name <user@example.com>
+merge = your-merge-program (or internal:merge)
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8
+
+[defaults]
+commit = -v
+
+

On Windows, these settings can be added to $HOME\.hgrc or $HOME\Mercurial.ini, or, if you'd like global settings, C:\mozilla-build\hg\Mercurial.ini or C:\Program Files\Mercurial\Mercurial.ini. On UNIX-like systems, they should be in your $HOME/.hgrc file.

+

You can configure the editor to use for commit messages using the editor option in the [ui] section or by setting the EDITOR environment variable.

+

If you are trying to access the repository through a proxy server, see these instructions.

+

Other configuration tips

+

Merge program

+

After installing, choose a merge program. Seriously. Do it now. If you don't, Mercurial will choose one for you and spring it on you when you least expect it.

+

A reasonable thing to do is to set ui.merge=internal:merge in the Mercurial configuration file (see below), which makes Mercurial try to merge changes and add the conflict markers (a la CVS) to the files that couldn't be merged.

+

Under Ubuntu, you can install meld package, then in in the Mercurial configuration file (see below) set ui.merge=meld

+

You can see the list of merge conflicts by looking for "merging ... failed!" in the update output.

+

Configuring kdiff3 as a merge tool

+

If you're on Linux and you have kdiff3 installed, you probably want to configure kdiff3 as a merge tool.  (It's better than meld because it will actually resolve a bunch of the conflicts without prompting you, generally quite accurately.)  You can do this by adding the following lines (which come from contrib/mergetools.hgrc in the Mercurial distribution):

+
[merge-tools]
+kdiff3.args=--auto -L1 base --L2 local --L3 other $base $local $other -o $output
+kdiff3.regkey=Software\KDiff3
+kdiff3.regappend=\kdiff3.exe
+kdiff3.fixeol=True
+kdiff3.gui=True
+
+
+

Extensions

+

There's a number of extensions you can enable. See http://mercurial.selenic.com/wiki/UsingExtensions. Almost everyone should probably enable the following:

+ +

These can all be turned on by just adding this to your .hgrc file:

+
[extensions]
+color =
+rebase =
+histedit =
+progress =
+transplant =
+pager =
+mq =
+
+[defaults]
+qnew = -U
+
+[mq]
+plain = True
+

In addition, there are some 3rd party extensions that are incredibly useful for basic development:

+
+
+ mozext
+
+ Mozilla-specific functionality to aid in developing Firefox/Gecko.
+
+ qcrecord
+
+ Provides a nice easy gui for splitting up patches into chunks. For a given patch you can type: + 
hg qcrefresh
+
+
+
+ mqext
+
+ Overrides qrefresh, qnew, qrename, qdelete, qimport, and qfinish to commit to your versioned patch queue automatically. This can be done through arguments to the commands, or automatically if you edit your .hgrc to include: + 
  [mqext]
+  mqcommit = auto
+
+ It also includes commands to suggest reviewers (reviewers) and a bug component (components) for your patch, to find bugs touching the files you are modifying (bugs), to show a patch (qshow), and to show what files the current patch touches (qtouched).
+
+ trychooser
+
+ Automatically creates a try commit message and then pushes changes to Mozilla's Try infrastructure. Just run: + 
hg trychooser
+
+
+ qimportbz
+
+ Import patches from Bugzilla. Creates a filename and commit message for you based on the bug's metadata. + 
hg qimport bz://1234567
+
+
+
+ bzexport
+
+ Export patches to Bugzilla. There are quite a few optional arguments here to create new or update existing bugs with the attment, as well as auto matically request reviews. Type hg help bzexport for a full list but the basic syntax is: + 
hg bzexport -i 1234567
+
+
+

Installing these is fairly easy. You'll just need to find a place on your system to store the extensions, and clone the extension repos into it:

+
hg clone https://bitbucket.org/edgimar/crecord
+hg clone https://bitbucket.org/sfink/mqext
+hg clone https://hg.mozilla.org/users/robarnold_cmu.edu/qimportbz
+git clone https://github.com/pbiggar/trychooser
+
+

And then add then to your .hgrc file

+
[extensions]
+qcrecord =  /path/to/crecord/crecord
+mqext =  path/to/mqext
+qimportbz =  path/to/qimportbz
+trychooser = path/to/trychooser/trychooser
+
+

Configuring the try repository

+

If you have access to the try server you may want to configure Mercurial so you can refer to it simply as "try", since it can be useful from all your trees.  This can be done by adding this to your ~/.hgrc (or Mercurial.ini):

+

 

+
[paths]
+try = ssh://hg.mozilla.org/try/
+
+

You can also configure short names like this that are specific to a particular repository by adding a [paths] section to the .hg/hgrc file within a repository.  There are two magic names, "default" and "default-push", which are used as the default push/pull targets.  (If "default" is specified and "default-push" is not, "default" is used for both.)

+

Alternatively, you can install the trychooser extension (older version).

+

{{ languages( { "fr": "fr/Installation_de_Mercurial" } ) }}

diff --git a/files/de/learn/accessibility/accessibility_troubleshooting/index.html b/files/de/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..5a427df730 --- /dev/null +++ b/files/de/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,111 @@ +--- +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 new file mode 100644 index 0000000000..ee1a19552e --- /dev/null +++ b/files/de/learn/accessibility/index.html @@ -0,0 +1,62 @@ +--- +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 new file mode 100644 index 0000000000..4aafae4a32 --- /dev/null +++ b/files/de/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +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 new file mode 100644 index 0000000000..39e775db98 --- /dev/null +++ b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,170 @@ +--- +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:

+ + +
+ +

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:

+ + + +

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

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:

+ + diff --git a/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html new file mode 100644 index 0000000000..f780dac8a7 --- /dev/null +++ b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html @@ -0,0 +1,95 @@ +--- +title: Wie das Internet funktioniert +slug: Learn/Common_questions/Wie_das_Internet_funktioniert +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
{{LearnSidebar}}
+ +
+

Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert

+
+ + + + + + + + + + + + +
Voraussetzungen:Keine, aber wir empfehlen dir den Artikel setting project goals zuerst zu lesen.
Ziel:You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.
+ +

Summary

+ +

Das Internet ist das Rückgrat des Webs, die technische Infrastruktur die das Web möglich macht. Grundlegend ist das Internet ein riesiges Netzwerk von Computern, welche untereinander kommunizieren.

+ +

The history of the Internet is somewhat obscure. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.

+ +

Active Learning

+ + + +

Deeper dive

+ +

A simple network

+ +

When two computers need to communicate, you have to link them, either physically (usually with an Ethernet cable) or wirelessly (for example with WiFi or Bluetooth systems). All modern computers can sustain any of those connections.

+ +
+

Note: For the rest of this article, we will only talk about physical cables, but wireless networks work the same.

+
+ +

Two computers linked together

+ +

Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!

+ +

Ten computers all together

+ +

To solve this problem, each computer on a network is connected to a special tiny computer called a router. This router has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.

+ +

Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.

+ +

Ten computers with a router

+ +

A network of networks

+ +

So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single router can't scale that far, but, if you read carefully, we said that a router is a computer like any other, so what keeps us from connecting two routers together? Nothing, so let's do that.

+ +

Two routers linked together

+ +

By connecting computers to routers, then routers to routers, we are able to scale infinitely.

+ +

Routers linked to routers

+ +

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

+ +

A router linked to a modem

+ +

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

+ +

Full Internet stack

+ +

Finding computers

+ +

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

+ +

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet and the web

+ +

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.

+ +

Next steps

+ + diff --git a/files/de/learn/css/building_blocks/index.html b/files/de/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..0924df55f5 --- /dev/null +++ b/files/de/learn/css/building_blocks/index.html @@ -0,0 +1,87 @@ +--- +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 new file mode 100644 index 0000000000..43362d1617 --- /dev/null +++ b/files/de/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,374 @@ +--- +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:

+ + + +

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/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html new file mode 100644 index 0000000000..8c45b5ba69 --- /dev/null +++ b/files/de/learn/css/building_blocks/werten_einheiten/index.html @@ -0,0 +1,394 @@ +--- +title: Werte und Einheiten in CSS +slug: Learn/CSS/Building_blocks/Werten_Einheiten +tags: + - CSS + - Einheiten + - Farbe + - Lernen + - Werte +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn about the different types of values and units used in CSS properties.
+ +

What is a CSS value?

+ +

In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. When you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.

+ +
+

Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

+
+ +
+

Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

+
+ +

In the following example we have set the color of our heading using a keyword, and the background using the rgb() function:

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc. You can use any available <color> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them.

+ +

Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.

+ +

Numbers, lengths, and percentages

+ +

There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Data typeDescription
<integer>An <integer> is a whole number such as 1024 or -55.
<number>A <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2.
<dimension>A <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types.
<percentage>A <percentage> represents a fraction of some other value, for example 50%. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.
+ +

Lengths

+ +

The numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

+ +

Absolute length units

+ +

The following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

Most of these values are more useful when used for print, rather than screen output. For example we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

+ +

Relative length units

+ +

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitRelative to
emFont size of the element.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
+ +

Exploring an example

+ +

In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.

+ +

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

+ +

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

+ +

After following the instructions above, try playing with the values in other ways, to see what you get.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems and rems

+ +

Die relativen Maßeneinheiten, em und rem,die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten  when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

+ +

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

+ +

To start with, we set 16px as the font size on the <html> element.

+ +

To recap, the em unit means "my parent element's font-size". The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

+ +

To recap, the rem unit means "The root element's font-size". (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

+ +

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentages

+ +

In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

+ +

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

+ +

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

+ +

Try changing the width of the wrapper or the percentage value to see how this works.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

+ +

Numbers

+ +

Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

+ +

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

+
+ +

Color

+ +

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

+ +

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

+ +
+

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

+
+ +

Color keywords

+ +

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value.

+ +

Try playing with different color values in the live examples below, to get more of an idea how they work.

+ +

Hexadecimal RGB values

+ +

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

+ +

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Again, try changing the values to see how the colors vary.

+ +

RGB and RGBA values

+ +

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

+ +

Let's rewrite our last example to use RGB colors:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

+ +
+

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

+
+ +

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

In this example, try changing the alpha channel values to see how it affects the color output.

+ +
+

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

+
+ +

HSL and HSLA values

+ +

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

+ + + +

We can update the RGB example to use HSL colors like this:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

+ +

Images

+ +

The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

+ +

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

+
+ +

Position

+ +

The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

+ +

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

+ +

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Play around with these values to see how you can push the image around.

+ +

Strings and identifiers

+ +

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

+ +

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Functions

+ +

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

+ +

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

+ +

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Summary

+ +

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

+ +

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

+ +

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_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/css_layout/flexbox/index.html b/files/de/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..499a21cc4f --- /dev/null +++ b/files/de/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,352 @@ +--- +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:

+ + + +

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

+ + + +

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:

+ + + +

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.

+ + + +

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.

+ + + +

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:

+ + + +

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 new file mode 100644 index 0000000000..4351951f84 --- /dev/null +++ b/files/de/learn/css/css_layout/index.html @@ -0,0 +1,88 @@ +--- +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/index.html b/files/de/learn/css/first_steps/index.html new file mode 100644 index 0000000000..a43d3b473b --- /dev/null +++ b/files/de/learn/css/first_steps/index.html @@ -0,0 +1,54 @@ +--- +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 new file mode 100644 index 0000000000..973569c85e --- /dev/null +++ b/files/de/learn/css/index.html @@ -0,0 +1,59 @@ +--- +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:

+ + + +

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/index.html b/files/de/learn/css/styling_text/index.html new file mode 100644 index 0000000000..0e5279bda2 --- /dev/null +++ b/files/de/learn/css/styling_text/index.html @@ -0,0 +1,65 @@ +--- +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/getting_started_with_the_web/css_basics/index.html b/files/de/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..42d968d9b2 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,282 @@ +--- +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:

+ + + +

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:

+ + + +

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:

+ + + +

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:

+ + + +

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:

+ + + +

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/dateien_nutzen/index.html b/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html new file mode 100644 index 0000000000..2eaa20a9ea --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html @@ -0,0 +1,106 @@ +--- +title: Dateien nutzen +slug: Learn/Getting_started_with_the_web/dateien_nutzen +tags: + - Anfänger + - Datei + - Dateien + - HTML + - Pfad + - Webseite +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{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:

+ + + +

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/html_basics/index.html b/files/de/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..ca417d1b4d --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,226 @@ +--- +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:

+ + + +

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 new file mode 100644 index 0000000000..7989c4c59a --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/index.html @@ -0,0 +1,66 @@ +--- +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

+ + + +

{{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 new file mode 100644 index 0000000000..3800d481c2 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,61 @@ +--- +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?

+ + + +

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_basis/index.html b/files/de/learn/getting_started_with_the_web/javascript_basis/index.html new file mode 100644 index 0000000000..65a31710d3 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/javascript_basis/index.html @@ -0,0 +1,407 @@ +--- +title: JavaScript-Grundlagen +slug: Learn/Getting_started_with_the_web/JavaScript_basis +tags: + - Anfänger + - JavaScript + - Lernen + - Web + - Webdesign +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{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:

+ + + +

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 new file mode 100644 index 0000000000..897af0bb0f --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,111 @@ +--- +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:

+ + + +

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

+ + + +

Mit GitHub oder Google App Engine

+ +

Es gibt Tools mit denen Sie Webseiten veröffentlichen können:

+ + + +

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 new file mode 100644 index 0000000000..065000788d --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,119 @@ +--- +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 "" 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/getting_started_with_the_web/wie_das_internet_funktioniert/index.html b/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html new file mode 100644 index 0000000000..7b5dfbc541 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html @@ -0,0 +1,100 @@ +--- +title: Wie das Internet funktioniert +slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert +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 +--- +
{{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:

+ +

+ + + +

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:

+ + + +

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/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" new file mode 100644 index 0000000000..f775774535 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" @@ -0,0 +1,268 @@ +--- +title: Was gehört in den Kopf der HTML-Datei? +slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_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 +--- +
{{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!

+ + + +

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:

+ + + +

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.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.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.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.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:

+ + + +

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.

+ + + +
+

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/einf\303\274hrung_in_html/document_and_website_structure/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" new file mode 100644 index 0000000000..7b9ce1bae8 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" @@ -0,0 +1,292 @@ +--- +title: Struktur in die Webseite bringen +slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure +tags: + - Beginner + - Guide + - HTML + - Layout + - Planung + - Sitemap + - Struktur +translation_of: Learn/HTML/Introduction_to_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:

+ + + +

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.

+ + + +

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/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" new file mode 100644 index 0000000000..dad40a05a9 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" @@ -0,0 +1,643 @@ +--- +title: Einfache Textformatierung in HTML +slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML +tags: + - Beginner + - Einführung in HTML + - HTML + - Lernen + - Listen + - Semantik + - Text + - Text formatieren + - Überschriften +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{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:

+ + + +

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:

+ + + +

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.

+ + + +
+

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/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" new file mode 100644 index 0000000000..d27bf253a4 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" @@ -0,0 +1,317 @@ +--- +title: Erstellen von Hyperlinks +slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks +tags: + - Beginner + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relativ + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_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)

+ + + + + +

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.

+ + + +
+

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:

+ + + +

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:

+ + + + + +

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.

+ + + +

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:

+ + + +

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/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" new file mode 100644 index 0000000000..3e3223016e --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" @@ -0,0 +1,197 @@ +--- +title: Fehlersuche in HTML +slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML +tags: + - Anfänger + - Beginner + - Debugging + - Guide + - HTML + - Validation + - validator +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_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:

+ + + +

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.

+ + + +

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/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" new file mode 100644 index 0000000000..1075d63f66 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" @@ -0,0 +1,466 @@ +--- +title: Fortgeschrittene Textformatierung +slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung +tags: + - Abkürzungen + - Beginner + - Beschreibungslisten + - Guide + - HTML + - Lernen + - Textformatierung + - Zitate +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{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:

+ +
+

Das HTML <blockquote> Element (oder HTML Block Quotation Element) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.

+
+ +

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

+ + + +

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:

+ + + +

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/einf\303\274hrung_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/index.html" new file mode 100644 index 0000000000..73f46a2614 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/index.html" @@ -0,0 +1,65 @@ +--- +title: Einführung in HTML +slug: Learn/HTML/Einführung_in_HTML +tags: + - Einführung in HTML + - HTML + - Kopf + - LandingPage + - Lernen + - Links + - Struktur + - Textformatierung + - head +translation_of: Learn/HTML/Introduction_to_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/einf\303\274hrung_in_html/lerne_html_kennen/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" new file mode 100644 index 0000000000..0f5354d5d2 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" @@ -0,0 +1,571 @@ +--- +title: Lerne HTML kennen +slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen +tags: + - Anfänger + - Attribut + - Beginner + - Charakter-Referenz + - Element + - Guide + - HTML + - Kommentar + - Leerraum + - Modul + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{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.

+ + + +

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:

+ + + +

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:

+ + + +

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:

+ + + +

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/einf\303\274hrung_in_html/marking_up_a_letter/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" new file mode 100644 index 0000000000..e2d3e9d636 --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" @@ -0,0 +1,102 @@ +--- +title: Marking up a letter +slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter +tags: + - Anfänger + - Brief + - HTML + - Links + - Text + - head +translation_of: Learn/HTML/Introduction_to_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:

+ + + +

Semantik innerhalb des Textes:

+ + + +

Der Kopf (head) des Dokumentes:

+ + + +

Hinweise und Tipps

+ + + +

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/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" new file mode 100644 index 0000000000..fc439ad60b --- /dev/null +++ "b/files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" @@ -0,0 +1,99 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_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:

+ + + +

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:

+ + + +

Sie müssen einen passenden Wrapper hinzufügen für:

+ + + +

Sie sollten außerdem:

+ + + +

Hinweise und Tipps

+ + + +

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/forms/index.html b/files/de/learn/html/forms/index.html new file mode 100644 index 0000000000..b0d1e8eb58 --- /dev/null +++ b/files/de/learn/html/forms/index.html @@ -0,0 +1,90 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Anleitung + - Beginner + - Formular + - HTML + - Lernen + - Web +translation_of: Learn/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/html/index.html b/files/de/learn/html/index.html new file mode 100644 index 0000000000..f3e5139c40 --- /dev/null +++ b/files/de/learn/html/index.html @@ -0,0 +1,75 @@ +--- +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:

+ + + +

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/multimedia_and_embedding/index.html b/files/de/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..80ad15ca25 --- /dev/null +++ b/files/de/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,77 @@ +--- +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 new file mode 100644 index 0000000000..5be24777e1 --- /dev/null +++ b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,126 @@ +--- +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:

+ + + +

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/grund_tabelle_html/index.html b/files/de/learn/html/tables/grund_tabelle_html/index.html new file mode 100644 index 0000000000..a10e286570 --- /dev/null +++ b/files/de/learn/html/tables/grund_tabelle_html/index.html @@ -0,0 +1,555 @@ +--- +title: Grundtabellen in HTML +slug: Learn/HTML/Tables/Grund_tabelle_HTML +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Wir beginnen hier mit Grundlagen von Tabellen durch HTML Markierungen. Die Topiken in diesem Artikel steigen Zellen, Zeilen, Spalten, Überschriften, Gliederung, Unterteilungen und auch Stile ein.

+ + + + + + + + + + + + +
Vorwissen:HTML Grundlagen (siehe Einführung in HTML).
Ziel:To gain basic familiarity with HTML tables.
+ +

What is a table ?

+ +

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.

+ +

How does a table work?

+ +

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
NameMass (1024kg)Diameter (km)Density (kg/m3)Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (°C)Number of moonsNotes
Terrestial planetsMercury0.3304,87954273.74222.657.91670Closest to the Sun
Venus4.8712,10452438.92802.0108.24640
Earth5.9712,75655149.824.0149.6151Our world
Mars0.6426,79239333.724.7227.9-652The red planet
Jovian planetsGas giantsJupiter1898142,984132623.19.9778.6-11067The largest planet
Saturn568120,5366879.010.71433.5-14062
Ice giantsUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Dwarf planetsPluto0.01462,37020950.7153.35906.4-2255Declassified as a planet in 2006, but this remains controversial.
+ +

When done correctly, even blind people can interpret tabular data in an HTML table — a successful HTML table should enhance the experience of sighted and visually impaired users alike.

+ +

Table styling

+ +

You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.

+ +

Be under no illusion; for tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

+ +

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here, and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

+ +

When should you NOT use HTML tables?

+ +

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

+ +

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

+ +
    +
  1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.
    2. +
  2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
    3. +
  3. Tables are not automatically responsive: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
    4. +
+ +

Active learning: Creating your first table

+ +

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

+ +
    +
  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
    2. +
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
    3. +
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags: + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so: + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

+ +

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

+ +
    +
  1. Place the four cells you've already created inside <tr> tags, like so: + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.
    3. +
+ +

This should result in a table that looks something like the following:

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

Note: You can also find this on GitHub as simple-table.html (see it live also).

+
+ +

Adding headers with <th> elements

+ +

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

Now the actual rendered table:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

+ +

Active learning: table headers

+ +

Let's have a go at improving this table.

+ +
    +
  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
    2. +
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td> elements surrounding the table headers into <th> elements.
    3. +
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.
    4. +
+ +
+

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also).

+
+ +

Why are headers useful?

+ +

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

+ +
+

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

+
+ +

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.

+ +

Allowing cells to span multiple rows and columns

+ +

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

+ +

The initial markup looks like this:

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

But the output doesn't give us quite what we want:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenHen
Rooster
+ +

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

+ +

Let's use colspan and rowspan to improve this table.

+ +
    +
  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
    2. +
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
    3. +
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
    4. +
  4. Save and open your code in a browser to see the improvement.
    5. +
+ +
+

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also).

+
+ + +
+ +

Providing common styling to columns

+ +

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

+ +

Take the following simple example:

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Which gives us the following result:

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <col> element. <col> elements are  specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col> element — if we didn't, the styling would just be applied to the first column also.

+ +

If we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.

+ +

Active learning: colgroup and col

+ +

Now it's time to have a go yourself.

+ +

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recreate the table by following the steps below.

+ +
    +
  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
    2. +
  2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below).
    3. +
  3. The first two columns need to be left unstyled.
    4. +
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
    5. +
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
    6. +
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
    7. +
  7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your style attribute are background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;
    9. +
+ +

See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).

+ +

Summary

+ +

That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +
+

In this module

+ + +
diff --git a/files/de/learn/html/tables/index.html b/files/de/learn/html/tables/index.html new file mode 100644 index 0000000000..b9f1b0274f --- /dev/null +++ b/files/de/learn/html/tables/index.html @@ -0,0 +1,45 @@ +--- +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 new file mode 100644 index 0000000000..d6607b71e5 --- /dev/null +++ b/files/de/learn/index.html @@ -0,0 +1,108 @@ +--- +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 {{anch("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?

+ + + +
+

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.

+
+ +

{{LearnBox({"title":"Schnell lernen: Vokabular"})}}

+ +

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/bausteine/ereignisse/index.html b/files/de/learn/javascript/bausteine/ereignisse/index.html new file mode 100644 index 0000000000..c07922c124 --- /dev/null +++ b/files/de/learn/javascript/bausteine/ereignisse/index.html @@ -0,0 +1,587 @@ +--- +title: Einleitung der Ereignissen +slug: Learn/JavaScript/Bausteine/Ereignisse +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Events oder auch Ereignisse sind Vorfälle die im System ausgelöst werden können. Auf diese Events wird vom System aufmerksam gemacht und es ust  möglich, in irgendeiner Art und Weise darauf zu reagieren.
+ Ein Beispiel: Ein Benutzer klickt einen Knopf auf der Website, woraufhin eine Box mit Infromationen eingeblendet wird.
+ In diesem Artikel besprechen wir einige wichtige Konzepte rund um  die Events und deren Funktionsweise im Browser. Wir werden hierbei nicht auf jedes Detail eingehen und nur das bis zum jetzigen Wissensstandpunkt nötigste abdecken.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, JavaScript first steps.
Objective:To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.
+ +

A series of fortunate events

+ +

As mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and also provides a mechanism by which some kind of action can be automatically taken (that is, some code running) when the event occurs. For example in an airport when the runway is clear for a plane to take off, a signal is communicated to the pilot, and as a result, they commence piloting the plane.

+ +

+ +

In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are a lot of different types of events that can occur, for example:

+ + + +

You can gather from this (and from glancing at the MDN Event reference) that there are a lot of events that can be responded to.

+ +

Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires. When such a block of code is defined to be run in response to an event firing, we say we are registering an event handler. Note that event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.

+ +
+

Note: Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.

+
+ +

A simple example

+ +

Let's look at a simple example to explain what we mean here. You've already seen events and event handlers used in many of the examples in this course already, but let's recap just to cement our knowledge. In the following example, we have a single {{htmlelement("button")}}, which when pressed, makes the background change to a random color:

+ +
<button>Change color</button>
+ + + +

The JavaScript looks like so:

+ +
const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

In this code, we store a reference to the button inside a constant called btn, using the {{domxref("Document.querySelector()")}} function. We also define a function that returns a random number. The third part of the code is the event handler. The btn constant points to a <button> element, and this type of object has a number of events that can fire on it, and therefore, event handlers available. We are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random RGB color and sets the <body> background-color equal to it.

+ +

This code is run whenever the click event fires on the <button> element, that is, whenever a user clicks on it.

+ +

The example output is as follows:

+ +

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+ +

It's not just web pages

+ +

Another thing worth mentioning at this point is that events are not unique to JavaScript — most programming languages have some kind of event model, and the way the model works often differs from JavaScript's way. In fact, the event model in JavaScript for web pages differs from the event model for JavaScript as it is used in other environments.

+ +

For example, Node.js is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The Node.js event model relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once. The HTTP connect event docs provide a good example of use.

+ +

As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called WebExtensions. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as onMessage rather than onmessage), and need to be combined with the addListener function. See the runtime.onMessage page for an example.

+ +

You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.

+ +

Ways of using web events

+ +

There are a number of ways in which you can add event listener code to web pages so that it will be run when the associated event fires. In this section, we review the various mechanisms and discuss which ones you should use.

+ +

Event handler properties

+ +

These are the properties that exist to contain event handler code that we have seen most frequently during the course. Returning to the above example:

+ +
const btn = document.querySelector('button');
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

The onclick property is the event handler property being used in this situation. It is essentially a property like any other available on the button (e.g. btn.textContent, or btn.style), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button.

+ +

You could also set the handler property to be equal to a named function name (like we saw in Build your own function). The following would work just the same:

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

There are many different event handler properties available. Let's do an experiment.

+ +

First of all, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing btn.onclick to the following different values in turn, and observing the results in the example:

+ + + +

Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as {{htmlelement("video")}}).

+ +

Inline event handlers — don't use these

+ +

You might also see a pattern like this in your code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

The earliest method of registering event handlers found on the Web involved event handler HTML attributes (or inline event handlers) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

+ +

For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.

+ +

Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:

+ +
const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +

Note that another option here would be to use the forEach() built-in method available on NodeList objects:

+ +
buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});
+ +
+

Note: Separating your programming logic from your content also makes your site more friendly to search engines.

+
+ +

addEventListener() and removeEventListener()

+ +

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() function, in an anonymous function, like this:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, removeEventListener(), which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:

+ +
btn.removeEventListener('click', bgChange);
+ +

This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you have to do is add or remove event handlers as appropriate.

+ +

Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

The second line overwrites the value of onclick set by the first line. This would work, however:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Both functions would now run when the element is clicked.

+ +

In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the addEventListener() and removeEventListener() reference pages.

+ +

What mechanism should I use?

+ +

Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.

+ +

The other two are relatively interchangeable, at least for simple uses:

+ + + +

The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener(), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example jQuery) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.

+
+ +

Other event concepts

+ +

In this section, we briefly cover some advanced concepts that are relevant to events. It is not important to understand these concepts fully at this point, but they might serve to explain some code patterns you'll likely come across from time to time.

+ +

Event objects

+ +

Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:

+ +
function bgChange(e) {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Here you can see that we are including an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.

+ +
+

Note: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. e/evt/event are most commonly used by developers because they are short and easy to remember. It's always good to be consistent — with yourself, and with others if possible.

+
+ +

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. In the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when clicked:

+ +
const divs = document.querySelectorAll('div');
+
+for (let i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

The output is as follows (try clicking around on it — have fun):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object; see the {{domxref("Event")}} object reference for a full list. Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The Media Recorder API, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding ondataavailable handler's event object has a data property available containing the recorded audio or video data to allow you to access it and do something with it.

+ +

Preventing default behavior

+ +

Sometimes, you'll come across a situation where you want to prevent an event from doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behavior is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)

+ +

The trouble comes when the user has not submitted the data correctly — as a developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.

+ +

First, a simple HTML form that requires you to enter your first and last name:

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

Now some JavaScript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the preventDefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:

+ +
const form = document.querySelector('form');
+const fname = document.getElementById('fname');
+const lname = document.getElementById('lname');
+const para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is OK for example purposes. The output is as follows:

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

+
+ +

Event bubbling and capture

+ +

The final subject to cover here is something that you won't come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) It is also available live below:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

We then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>. The idea is that when the area of the <div> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

But there's a problem — currently, when you click the video it starts to play, but it causes the <div> to also be hidden at the same time. This is because the video is inside the <div> — it is part of it — so clicking on the video actually runs both the above event handlers.

+ +

Bubbling and capturing explained

+ +

When an event is fired on an element that has parent elements (in this case, the {{htmlelement("video")}} has the {{htmlelement("div")}} as a parent), modern browsers run two different phases — the capturing phase and the bubbling phase.

+ +

In the capturing phase:

+ + + +

In the bubbling phase, the exact opposite occurs:

+ + + +

+ +

(Click on image for bigger diagram)

+ +

In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <video> element outwards to the <html> element. Along the way:

+ + + +
+

Note: In cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase.

+
+ +

Fixing the problem with stopPropagation()

+ +

This is annoying behavior, but there is a way to fix it! The standard Event object has a function available on it called stopPropagation() which, when invoked on a handler's event object, makes it so that first handler is run but the event doesn't bubble any further up the chain, so no more handlers will be run.

+ +

We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

You can try making a local copy of the show-video-box.html source code and fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

+ +
+

Note: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

+
+ +
+

Note: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using addEventListener(), and setting the optional third property to true.

+
+ +

Event delegation

+ +

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?

+ +

A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul>, and events will bubble from the list items to the <ul>.

+ +

This concept is explained further on David Walsh's blog, with multiple examples — see How JavaScript Event Delegation Works.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Events.

+ +

Conclusion

+ +

You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.

+ +

Also, it is important to understand that the different contexts in which JavaScript is used have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/bausteine/index.html b/files/de/learn/javascript/bausteine/index.html new file mode 100644 index 0000000000..1c6fb8fc46 --- /dev/null +++ b/files/de/learn/javascript/bausteine/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript Bausteine +slug: Learn/JavaScript/Bausteine +translation_of: Learn/JavaScript/Building_blocks +--- +
{{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/erster_blick/index.html b/files/de/learn/javascript/first_steps/erster_blick/index.html new file mode 100644 index 0000000000..e772147cae --- /dev/null +++ b/files/de/learn/javascript/first_steps/erster_blick/index.html @@ -0,0 +1,597 @@ +--- +title: Ein erster Eindruck von JavaScript +slug: Learn/JavaScript/First_steps/Erster_Blick +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{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:

+ + + +
+

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 {{anch("Conditionals", "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.

+ + + +

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

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:

+ + + +

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 new file mode 100644 index 0000000000..092a419e14 --- /dev/null +++ b/files/de/learn/javascript/first_steps/index.html @@ -0,0 +1,67 @@ +--- +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/lustige_geschichten_generator/index.html b/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html new file mode 100644 index 0000000000..1703f9b6a7 --- /dev/null +++ b/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html @@ -0,0 +1,139 @@ +--- +title: Der Lustige Geschichten Generator +slug: Learn/JavaScript/First_steps/lustige_geschichten_generator +translation_of: Learn/JavaScript/First_steps/Silly_story_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::

+ + + +
+

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:

+ + + +

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

+ + + +

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/useful_string_methods/index.html b/files/de/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..e0df907ade --- /dev/null +++ b/files/de/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,656 @@ +--- +title: Useful string methods +slug: Learn/JavaScript/First_steps/Useful_string_methods +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

Jetzt, da wir die Basics kennengelernt haben, gehen wir einen Schritt weiter und sehen uns hilfreiche Methoden an, die wir im Umgang mit Strings anwenden können. Dazu zählt zum Beispiel die Länge eines Textes, hinzufügen oder splitten von Strings, das Austauschen eines Buchstaben in einem Text-String und mehr...

+ + + + + + + + + + + + +
Voraussetzungen:Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, ein Verständnis dafür, was JavaScript ist.
Ziel:Zu verstehen, dass Zeichenketten Objekte sind, und zu lernen, wie man einige der grundlegenden Methoden, die auf diesen Objekten verfügbar sind, verwendet, um Zeichenketten zu manipulieren.
+ +

Zeichenketten als Objekte

+ +

Die meisten Dinge in JavaScript sind Objekte. Wenn Sie einen String erstellen, zum Beispiel durch die Verwendung von

+ +
let string = 'This is my string';
+ +

wird Ihre Variable zu einer String-Objektinstanz und hat als Ergebnis eine große Anzahl von Eigenschaften und Methoden zur Verfügung. Sie können dies sehen, wenn Sie auf die {{jsxref("String")}} Objektseite gehen und die Liste auf der Seite nach unten scrollen!

+ +

Sooo, bevor Du jetzt Kopfschmerzen bekommst: Die meisten der Methoden must du jetzt am Anfang noch nicht wirklich kennen. Allerdings gibt es da ein paar, die Du am Anfang und später ziemlich oft nutzen wirst. Werfen wir also einen Blick darauf:

+ +

Starten wir mit ein paar Beispielen in der browser developer console.

+ +

Länge einer Zeichenkette

+ +

Das ist einfach. Nutze einfach {{jsxref("String.prototype.length", "length")}} . Probiere einfach mal folgenden Code:

+ +
let browserType = 'mozilla';
+browserType.length;
+ +

Das sollte Dir eine "7" zurückgeben, denn "mozilla" ist 7 Zeichen lang. Das kann man für verschiedene Dinge nutzen; Zum Beispiel: Du möchtest die Zeichenlänge einer Reihe von Namen herausfinden, um diese in der Reihenfolge ihrer Länge auszugeben. Oder lasse einen Nutzer wissen, das seine gerade getätigte Eingabe des Usernamens viel zu lang ist und nicht den Vorgaben entspricht.

+ +

Retrieving a specific string character

+ +

On a related note, you can return any character inside a string by using square bracket notation — this means you include square brackets ([]) on the end of your variable name. Inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this:

+ +
browserType[0];
+ +

Remember: computers count from 0, not 1! You could use this to, for example, find the first letter of a series of strings and order them alphabetically.

+ +

To retrieve the last character of any string, we could use the following line, combining this technique with the length property we looked at above:

+ +
browserType[browserType.length-1];
+ +

The length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using  length-1 gets us the last character.

+ +

Finding a substring inside a string and extracting it

+ +
    +
  1. Sometimes you'll want to find if a smaller string is present inside a larger one (we generally say if a substring is present inside a string). This can be done using the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, which takes a single {{glossary("parameter")}} — the substring you want to search for. Try this: + + 
    browserType.indexOf('zilla');
    + This gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2  — so 3 characters in) inside "mozilla". Such code could be used to filter strings. For example, we may have a list of web addresses and only want to print out the ones that contain "mozilla".
    2. +
+ +
    +
  1. This can be done in another way, which is possibly even more effective. Try the following: + 
    browserType.indexOf('vanilla');
    + This should give you a result of -1 — this is returned when the substring, in this case 'vanilla', is not found in the main string.
    +
    + You could use this to find all instances of strings that don't contain the substring 'mozilla', or do, if you use the negation operator, as shown below. You could do something like this: + + 
    if(browserType.indexOf('mozilla') !== -1) {
+  // do stuff with the string
+}
    +
    2. +
  2. When you know where a substring starts inside a string, and you know at which character you want it to end, {{jsxref("String.prototype.slice()", "slice()")}} can be used to extract it. Try the following: + 
    browserType.slice(0,3);
    + This returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted. So the slice happens from the first position, up to, but not including, the last position. In this example, since the starting index is 0, the second parameter is equal to the length of the string being returned.
    +  
    3. +
  3. Also, if you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter! Instead, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following: + 
    browserType.slice(2);
    + This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string. 
    4. +
+ +
+

Note: The second parameter of slice() is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.

+
+ +

Changing case

+ +

The string methods {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} and {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} take a string and convert all the characters to lower- or uppercase, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.

+ +

Let's try entering the following lines to see what happens:

+ +
let radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+ +

Updating parts of a string

+ +

You can replace one substring inside a string with another substring using the {{jsxref("String.prototype.replace()", "replace()")}} method. This works very simply at a basic level, although there are some advanced things you can do with it that we won't go into yet.

+ +

It takes two parameters — the string you want to replace, and the string you want to replace it with. Try this example:

+ +
browserType.replace('moz','van');
+ +

This returns "vanilla" in the console. But if you check the value of browserType, it is still "mozilla'. To actually update the value of the browserType variable in a real program, you'd have to set the variable value to be the result of the operation; it doesn't just update the substring value automatically. So you'd have to actually write this: browserType = browserType.replace('moz','van');

+ +

Active learning examples

+ +

In this section we'll get you to try your hand at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.

+ +

Each example comes with a "Reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "Show solution" button you can press to see a potential answer if you get really stuck.

+ +

Filtering greeting messages

+ +

In the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the if( ... ) structure, to test each string and only print it in the list if it is a Christmas message.

+ +
    +
  1. First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?
    2. +
  2. You'll then need to write a conditional test of the form operand1 operator operand2. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?
    3. +
  3. Hint: In this case it is probably more useful to test whether the method call isn't equal to a certain result.
    4. +
+ + + +

{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}

+ +

Fixing capitalization

+ +

In this exercise we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lower case, except for a capital first letter. A good way to do this is to:

+ +
    +
  1. Convert the whole of the string contained in the input variable to lower case and store it in a new variable.
    2. +
  2. Grab the first letter of the string in this new variable and store it in another variable.
    3. +
  3. Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.
    4. +
  4. Change the value of the result variable to equal to the final result, not the input.
    5. +
+ +
+

Note: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.

+
+ + + +

{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}

+ +

Making new strings from old parts

+ +

In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:

+ +
MAN675847583748sjt567654;Manchester Piccadilly
+ +

We want to extract the station code and name, and put them together in a string with the following structure:

+ +
MAN: Manchester Piccadilly
+ +

We'd recommend doing it like this:

+ +
    +
  1. Extract the three-letter station code and store it in a new variable.
    2. +
  2. Find the character index number of the semicolon.
    3. +
  3. Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.
    4. +
  4. Concatenate the two new variables and a string literal to make the final string.
    5. +
  5. Change the value of the result variable to equal to the final string, not the input.
    6. +
+ + + +

{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}

+ +

Conclusion

+ +

You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/first_steps/variables/index.html b/files/de/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..d8906f7d02 --- /dev/null +++ b/files/de/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,386 @@ +--- +title: Speichern der benötigten Informationen — Variablen +slug: Learn/JavaScript/First_steps/Variables +translation_of: Learn/JavaScript/First_steps/Variables +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}
+ +

After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.
Objective:To gain familiarity with the basics of JavaScript variables.
+ +

Tools you need

+ +

Throughout this article, you'll be asked to type in lines of code to test your understanding of the content. If you are using a desktop browser, the best place to type your sample code is your browser's JavaScript console (see What are browser developer tools for more information on how to access this tool).

+ +

However, we have also provided a simple JavaScript console embedded in the page below for you to enter this code into, in case you are not using a browser with a JavaScript console easily available, or find an in-page console more comfortable.

+ +

Was ist eine Variable?

+ +

Eine Variable ist ein Behälter für einen Wert, wie z.B. eine Zahl, welche wir vielleicht für eine Summe benötigen, oder eine Zeichenkette die wir für einen Teil eines Satzes brauchen. Eine Besonderheit von Variablen ist, dass ihr Wert verändert werden kann. Hier ein Beispiel:

+ +
<button>Press me</button>
+ +
var button = document.querySelector('button');
+
+button.onclick = function() {
+  var name = prompt('Wie heißt du?');
+  alert('Hallo ' + name + ', schön dich zu sehen!');
+}
+ +

{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}

+ +

In diesem Beispiel werden beim Drücken des Buttons einige Zeilen Code ausgeführt. Die erste Zeile zeigt eine Box an, welche den Leser nach seinem Namen fragt und den Wert anschließend in einer Variable abspeichert. Die zweite Zeile zeigt eine Willkommensnachricht, die den Namen enthält, welcher dem Wert der Variable entnommen wird.

+ +

Um zu verstehen, warum das so nützlich ist, überlegen wir mal, wie wir das Beispiel ohne eine Variable schreiben würden. Es würde etwa so aussehen:

+ +
var name = prompt('Wie heißt du?');
+
+if (name === 'Adam') {
+  alert('Hallo Adam, schön dich zu sehen!');
+} else if (name === 'Alan') {
+  alert('Hallo Alan, schön dich zu sehen!');
+} else if (name === 'Bella') {
+  alert('Hallo Bella, schön dich zu sehen!');
+} else if (name === 'Bianca') {
+  alert('Hallo Bianca, schön dich zu sehen!');
+} else if (name === 'Chris') {
+  alert('Hallo Chris, schön dich zu sehen!');
+}
+
+// ... und so weiter ...
+ +

You may not fully understand the syntax we are using (yet!), but you should be able to get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the entered name was, and then display the appropriate message for that name. This is obviously really inefficient (the code is a lot bigger, even for only five choices), and it just wouldn't work — you couldn't possibly store all possible choices.

+ +

Variables just make sense, and as you learn more about JavaScript they will start to become second nature.

+ +

Another special thing about variables is that they can contain just about anything — not just strings and numbers. Variables can also contain complex data and even entire functions to do amazing things. You'll learn more about this as you go along.

+ +

Note that we say variables contain values. This is an important distinction to make. Variables aren't the values themselves; they are containers for values. You can think of them being like little cardboard boxes that you can store things in.

+ +

+ +

Eine Variable deklarieren

+ +

To use a variable you've first got to create it — more accurately, we call this declaring the variable. To do this, we type the keyword var followed by the name you want to call your variable:

+ +
var myName;
+var myAge;
+ +

Here we're creating two variables called myName and myAge. Try typing these lines in now in your web browser's console, or in the below console (You can open this console in a separate tab or window if you'd prefer that). After that, try creating a variable (or two) with your own name choices.

+ + + +

{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: In JavaScript, all code instructions should end with a semi-colon (;) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. Try to get into the habit of including it.

+
+ +

You can test whether these values now exist in the execution environment by typing just the variable's name, e.g.

+ +
myName;
+myAge;
+ +

They currently have no value; they are empty containers. When you enter the variable names, you should get a value of undefined returned. If they don't exist, you'll get an error message — try typing in

+ +
scoobyDoo;
+ +
+

Note: Don't confuse a variable that exists but has no value defined with a variable that doesn't exist at all — they are very different things. In the box analogy you saw above, not existing would mean there's no box (variable) for a value to go in. No value defined would mean that there IS a box, but it has no value inside it.

+
+ +

Eine Variable initialisieren

+ +

Once you've declared a variable, you can initialize it with a value. You do this by typing the variable name, followed by an equals sign (=), followed by the value you want to give it. For example:

+ +
myName = 'Chris';
+myAge = 37;
+ +

Try going back to the console now and typing in these lines. You should see the value you've assigned to the variable returned in the console to confirm it, in each case. Again, you can return your variable values by simply typing their name into the console — try these again:

+ +
myName;
+myAge;
+ +

You can declare and initialize a variable at the same time, like this:

+ +
var myName = 'Chris';
+ +

This is probably what you'll do most of the time, as it is quicker than doing the two actions on two separate lines.

+ +
+

Note: If you write a multiline JavaScript program that declares and initializes a variable, you can actually declare it after you initialize it and it will still work. This is because variable declarations are generally done first before the rest of the code is executed. This is called hoisting — read var hoisting for more detail on the subject.

+
+ +

Eine Variable aktualisieren

+ +

Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:

+ +
myName = 'Bob';
+myAge = 40;
+ +

An aside on variable naming rules

+ +

You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.

+ + + +
+

Note: You can find a fairly complete list of reserved keywords to avoid at Lexical grammar — keywords.

+
+ +

Good name examples:

+ +
age
+myAge
+init
+initialColor
+finalOutputValue
+audio1
+audio2
+ +

Bad name examples:

+ +
1
+a
+_12
+myage
+MYAGE
+var
+Document
+skjfndskjfnbdskjfb
+thisisareallylongstupidvariablenameman
+ +

Error-prone name examples:

+ +
var
+Document
+
+ +

Try creating a few more variables now, with the above guidance in mind.

+ +

Typen von Variablen

+ +

There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.

+ +

So far we've looked at the first two, but there are others.

+ +

Numbers

+ +

You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:

+ +
var myAge = 17;
+ +

Strings

+ +

Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.

+ +
var dolphinGoodbye = 'So long and thanks for all the fish';
+ +

Booleans

+ +

Booleans are true/false values — they can have two values, true or false. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:

+ +
var iAmAlive = true;
+ +

Whereas in reality it would be used more like this:

+ +
var test = 6 < 3;
+ +

This is using the "less than" operator (<) to test whether 6 is less than 3. As you might expect, it will return false, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.

+ +

Arrays

+ +

An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:

+ +
var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];
+ +

Once these arrays are defined, you can access each value by their location within the array. Try these lines:

+ +
myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+ +

The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.

+ +

You'll learn a lot more about arrays in a future article.

+ +

Objects

+ +

In programming, an object is a structure of the code that models a real-life object. You can have a simple object that represents a car park and contains information about its width and length, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.

+ +

Try entering the following line into your console:

+ +
var dog = { name : 'Spot', breed : 'Dalmatian' };
+ +

To retrieve the information stored in the object, you can use the following syntax:

+ +
dog.name
+ +

We won't be looking at objects any more for now — you can learn more about those in a future module.

+ +

Dynamic typing

+ +

JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (e.g. numbers, strings, arrays, etc).

+ +

For example, if you declare a variable and give it a value encapsulated in quotes, the browser will treat the variable as a string:

+ +
var myString = 'Hello';
+ +

It will still be a string, even if it contains numbers, so be careful:

+ +
var myNumber = '500'; // oops, this is still a string
+typeof myNumber;
+myNumber = 500; // much better — now this is a number
+typeof myNumber;
+ +

Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called typeof — this returns the data type of the variable you pass into it. The first time it is called, it should return string, as at that point the myNumber variable contains a string, '500'. Have a look and see what it returns the second time you call it.

+ +

Zusammenfassung

+ +

By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/first_steps/was_ist_javascript/index.html b/files/de/learn/javascript/first_steps/was_ist_javascript/index.html new file mode 100644 index 0000000000..247b4744c5 --- /dev/null +++ b/files/de/learn/javascript/first_steps/was_ist_javascript/index.html @@ -0,0 +1,339 @@ +--- +title: Was ist JavaScript? +slug: Learn/JavaScript/First_steps/Was_ist_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_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:

+ + + +

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.

+ +

+ + + +

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:

+ + + +

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:

+ + + +
+

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

+ + + +
+

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:

+ + + +

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 new file mode 100644 index 0000000000..78991e9102 --- /dev/null +++ b/files/de/learn/javascript/index.html @@ -0,0 +1,47 @@ +--- +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:

+ +
JavaScript Referenz
+ +
+
In unserer Referenz findet ihr Details zu jedem Aspekt von JavaScript: Event Handler, Operatoren, Statements und Funktionen.
+
+
+
+ +

 

diff --git a/files/de/learn/javascript/objects/basics/index.html b/files/de/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..403f869034 --- /dev/null +++ b/files/de/learn/javascript/objects/basics/index.html @@ -0,0 +1,258 @@ +--- +title: JavaScript object basics +slug: Learn/JavaScript/Objects/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "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-oriented_JS", "Learn/JavaScript/Objects")}}

+ +

In diesem Modul

+ + diff --git a/files/de/learn/javascript/objects/index.html b/files/de/learn/javascript/objects/index.html new file mode 100644 index 0000000000..9178a14f6d --- /dev/null +++ b/files/de/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +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/inheritance/index.html b/files/de/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..827dda17f6 --- /dev/null +++ b/files/de/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,440 @@ +--- +title: Inheritance in JavaScript +slug: Learn/JavaScript/Objects/Inheritance +translation_of: Learn/JavaScript/Objects/Inheritance +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
+ +

Nachdem nun die schmutzigen Details des OOJS erklärt sind, beschäftigt sich dieser Artikel damit, wie "Kinder"-Objektklassen (Konstruktoren) Features von ihren "Eltern"-Klassen vererbt bekommen. Zusätzlich stellen wir Hinweise dazu bereit, wann und wo Du OOJS am besten anwendest und wie mit Klassen im modern ECMAScript Syntax umgegangen wird.

+ + + + + + + + + + + + +
Voraussetzungen:Grundsätzliche EDV-Kenntnisse, ein grundlegendes Verständnis für HTML und CSS, mit JavaScript Grundlagen vertraut sein (siehe Erste Schritte und Building blocks) und Grundlagen zu OOJS (sieheIntroduction to objects).
Lernziel:Zu verstehen, wie es in JavaScript möglich ist, Vererbung zu implementieren.
+ +

Prototypal inheritance

+ +

So far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. But mostly this has involved built-in browser functions. How do we create an object in JavaScript that inherits from another object?

+ +

Let's explore how to do this with a concrete example.

+ +

Getting started

+ +

First of all, make yourself a local copy of our oojs-class-inheritance-start.html file (see it running live also). Inside here you'll find the same Person() constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor:

+ +
function Person(first, last, age, gender, interests) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+};
+ +

The methods are all defined on the constructor's prototype. For example:

+ +
Person.prototype.greeting = function() {
+  alert('Hi! I\'m ' + this.name.first + '.');
+};
+ +
+

Note: In the source code, you'll also see bio() and farewell() methods defined. Later you'll see how these can be inherited by other constructors.

+
+ +

Say we wanted to create a Teacher class, like the one we described in our initial object-oriented definition, which inherits all the members from Person, but also includes:

+ +
    +
  1. A new property, subject — this will contain the subject the teacher teaches.
    2. +
  2. An updated greeting() method, which sounds a bit more formal than the standard greeting() method — more suitable for a teacher addressing some students at school.
    3. +
+ +

Defining a Teacher() constructor function

+ +

The first thing we need to do is create a Teacher() constructor — add the following below the existing code:

+ +
function Teacher(first, last, age, gender, interests, subject) {
+  Person.call(this, first, last, age, gender, interests);
+
+  this.subject = subject;
+}
+ +

This looks similar to the Person constructor in many ways, but there is something strange here that we've not seen before — the call() function. This function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of this that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.

+ +

We want the Teacher() constructor to take the same parameters as the Person() constructor it is inheriting from, so we specify them all as parameters in the call() invocation.

+ +

The last line inside the constructor simply defines the new subject property that teachers are going to have, which generic people don't have.

+ +

As a note, we could have simply done this:

+ +
function Teacher(first, last, age, gender, interests, subject) {
+  this.name = {
+    first,
+    last
+  };
+  this.age = age;
+  this.gender = gender;
+  this.interests = interests;
+  this.subject = subject;
+}
+ +

But this is just redefining the properties anew, not inheriting them from Person(), so it defeats the point of what we are trying to do. It also takes more lines of code.

+ +

Inheriting from a constructor with no parameters

+ +

Note that if the constructor you are inheriting from doesn't take its property values from parameters, you don't need to specify them as additional arguments in call(). So, for example, if you had something really simple like this:

+ +
function Brick() {
+  this.width = 10;
+  this.height = 20;
+}
+ +

You could inherit the width and height properties by doing this (as well as the other steps described below, of course):

+ +
function BlueGlassBrick() {
+  Brick.call(this);
+
+  this.opacity = 0.5;
+  this.color = 'blue';
+}
+ +

Note that we've only specified this inside call() — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.

+ +

Setting Teacher()'s prototype and constructor reference

+ +

All is good so far, but we have a problem. We have defined a new constructor, and it has a prototype property, which by default just contains an object with a reference to the constructor function itself. It does not contain the methods of the Person constructor's prototype property. To see this, enter Object.getOwnPropertyNames(Teacher.prototype) into either the text input field or your JavaScript console. Then enter it again, replacing Teacher with Person. Nor does the new constructor inherit those methods. To see this, compare the outputs of Person.prototype.greeting and Teacher.prototype.greeting. We need to get Teacher() to inherit the methods defined on Person()'s prototype. So how do we do that?

+ +
    +
  1. Add the following line below your previous addition: + 
    Teacher.prototype = Object.create(Person.prototype);
    + Here our friend create() comes to the rescue again. In this case we are using it to create a new object and make it the value of Teacher.prototype. The new object has Person.prototype as its prototype and will therefore inherit, if and when needed, all the methods available on Person.prototype.
    2. +
  2. We need to do one more thing before we move on. After adding the last line, Teacher.prototype's constructor property is now equal to Person(), because we just set Teacher.prototype to reference an object that inherits its properties from Person.prototype! Try saving your code, loading the page in a browser, and entering Teacher.prototype.constructor into the console to verify.
    3. +
  3. This can become a problem, so we need to set this right. You can do so by going back to your source code and adding the following line at the bottom: + 
    Object.defineProperty(Teacher.prototype, 'constructor', {
+    value: Teacher,
+    enumerable: false, // so that it does not appear in 'for in' loop
+    writable: true });
    +
    4. +
  4. Now if you save and refresh, entering Teacher.prototype.constructor should return Teacher(), as desired, plus we are now inheriting from Person()!
    5. +
+ +

Giving Teacher() a new greeting() function

+ +

To finish off our code, we need to define a new greeting() function on the Teacher() constructor.

+ +

The easiest way to do this is to define it on Teacher()'s prototype — add the following at the bottom of your code:

+ +
Teacher.prototype.greeting = function() {
+  let prefix;
+
+  if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
+    prefix = 'Mr.';
+  } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') {
+    prefix = 'Ms.';
+  } else {
+    prefix = 'Mx.';
+  }
+
+  alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
+};
+ +

This alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.

+ +

Trying the example out

+ +

Now that you've entered all the code, try creating an object instance from Teacher() by putting the following at the bottom of your JavaScript (or something similar of your choosing):

+ +
let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+ +

Now save and refresh, and try accessing the properties and methods of your new teacher1 object, for example:

+ +
teacher1.name.first;
+teacher1.interests[0];
+teacher1.bio();
+teacher1.subject;
+teacher1.greeting();
+teacher1.farewell();
+ +

These should all work just fine. The queries on lines 1, 2, 3, and 6 access members inherited from the generic Person() constructor (class). The query on line 4 accesses a member that is available only on the more specialized Teacher() constructor (class). The query on line 5 would have accessed a member inherited from Person(), except for the fact that Teacher() has its own member with the same name, so the query accesses that member.

+ +
+

Note: If you have trouble getting this to work, compare your code to our finished version (see it running live also).

+
+ +

The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.

+ +

You might also be interested in checking out some of the new {{glossary("ECMAScript")}} features that allow us to do inheritance more cleanly in JavaScript (see Classes). We didn't cover those here, as they are not yet supported very widely across browsers. All the other code constructs we discussed in this set of articles are supported as far back as IE9 or earlier, and there are ways to achieve earlier support than that.

+ +

A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. CoffeeScript for example provides class, extends, etc.

+ +

A further exercise

+ +

In our OOP theory section, we also included a Student class as a concept, which inherits all the features of Person, and also has a different greeting() method from Person that is much more informal than the Teacher's greeting. Have a look at what the student's greeting looks like in that section, and try implementing your own Student() constructor that inherits all the features of Person(), and implements the different greeting() function.

+ +
+

Note: If you have trouble getting this to work, have a look at our finished version (see it running live also).

+
+ +

Object member summary

+ +

To summarize, you've got four types of property/method to worry about:

+ +
    +
  1. Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the this.x = x type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the new keyword, e.g. let myInstance = new myConstructor()).
    2. +
  2. Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, not an instance. For example, Object.keys(). These are also known as static properties/methods.
    3. +
  3. Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's prototype property, e.g. myConstructor.prototype.x().
    4. +
  4. Those available on an object instance, which can either be an object created when a constructor is instantiated like we saw above (so for example var teacher1 = new Teacher( name = 'Chris' ); and then teacher1.name), or an object literal (let teacher1 = { name = 'Chris' } and then teacher1.name).
    5. +
+ +

If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.

+ +

ECMAScript 2015 Classes

+ +

ECMAScript 2015 introduces class syntax to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.

+ +
+

Note: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).

+
+ +

Let's look at a rewritten version of the Person example, class-style:

+ +
class Person {
+  constructor(first, last, age, gender, interests) {
+    this.name = {
+      first,
+      last
+    };
+    this.age = age;
+    this.gender = gender;
+    this.interests = interests;
+  }
+
+  greeting() {
+    console.log(`Hi! I'm ${this.name.first}`);
+  };
+
+  farewell() {
+    console.log(`${this.name.first} has left the building. Bye for now!`);
+  };
+}
+
+ +

The class statement indicates that we are creating a new class. Inside this block, we define all the features of the class:

+ + + +

We can now instantiate object instances using the new operator, in just the same way as we did before:

+ +
let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+han.greeting();
+// Hi! I'm Han
+
+let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']);
+leia.farewell();
+// Leia has left the building. Bye for now
+
+ +
+

Note: Under the hood, your classes are being converted into Prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.

+
+ +

Inheritance with class syntax

+ +

Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized Teacher class, making it inherit from Person using modern class syntax. This is called creating a subclass or subclassing.

+ +

To create a subclass we use the extends keyword to tell JavaScript the class we want to base our class on,

+ +
class Teacher extends Person {
+  constructor(subject, grade) {
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+ +

but there's a little catch.

+ +

Unlike old-school constructor functions where the new operator does the initialization of this to a newly-allocated object, this isn't automatically initialized for a class defined by the extends keyword, i.e the sub-classes.

+ +

Therefore running the above code will give an error:

+ +
Uncaught ReferenceError: Must call super constructor in derived class before
+accessing 'this' or returning from derived constructor
+ +

For sub-classes, the this intialization to a newly allocated object is always dependant on the parent class constructor, i.e the constructor function of the class from which you're extending.

+ +

Here we are extending the Person class — the Teacher sub-class is an extension of the Person class. So for Teacher, the this initialization is done by the Person constructor.

+ +

To call the parent constructor we have to use the super() operator, like so:

+ +
class Teacher extends Person {
+  constructor(subject, grade) {
+    super(); // Now 'this' is initialized by calling the parent constructor.
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+ +

There is no point having a sub-class if it doesn't inherit properties from the parent class.
+ It is good then, that the super() operator also accepts arguments for the parent constructor.

+ +

Looking back to our Person constructor, we can see it has the following block of code in its constructor method:

+ +
 constructor(first, last, age, gender, interests) {
+   this.name = {
+     first,
+     last
+   };
+   this.age = age;
+   this.gender = gender;
+   this.interests = interests;
+}
+ +

Since the super() operator is actually the parent class constructor, passing it the necessary arguments of the Parent class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+
+    // subject and grade are specific to Teacher
+    this.subject = subject;
+    this.grade = grade;
+  }
+}
+
+ +

Now when we instantiate Teacher object instances, we can call methods and properties defined on both Teacherand Person as we'd expect:

+ +
let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5);
+snape.greeting(); // Hi! I'm Severus.
+snape.farewell(); // Severus has left the building. Bye for now.
+snape.age // 58
+snape.subject; // Dark arts
+
+ +

Like we did with Teachers, we could create other subclasses of Person to make them more specialized without modifying the base class.

+ +
+

Note: You can find this example on GitHub as es2015-class-inheritance.html (see it live also).

+
+ +

Getters and Setters

+ +

There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the Teacher example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.

+ +

We can handle such situations with getters and setters.

+ +

Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.

+ +

Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.

+ +

The modified Teacher class looks like this:

+ +
class Teacher extends Person {
+  constructor(first, last, age, gender, interests, subject, grade) {
+    super(first, last, age, gender, interests);
+    // subject and grade are specific to Teacher
+    this._subject = subject;
+    this.grade = grade;
+  }
+
+  get subject() {
+    return this._subject;
+  }
+
+  set subject(newSubject) {
+    this._subject = newSubject;
+  }
+}
+
+ +

In our class above we have a getter and setter for the subject property. We use _ to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:

+ + + +

The example below shows the two features in action:

+ +
// Check the default value
+console.log(snape.subject) // Returns "Dark arts"
+
+// Change the value
+snape.subject = "Balloon animals" // Sets _subject to "Balloon animals"
+
+// Check it again and see if it matches the new value
+console.log(snape.subject) // Returns "Balloon animals"
+
+ +
+

Note: You can find this example on GitHub as es2015-getters-setters.html (see it live also).

+
+ +
+

Note: Getters and setters can be very useful at times, for example when you want to run some code every time a property is requested or set. For simple cases, however, plain property access without a getter or setter will do just fine.

+
+ +

When would you use inheritance in JavaScript?

+ +

Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.

+ +

In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.

+ +

In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.

+ +
+

Note: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called delegation. Specialized objects delegate functionality to a generic object type.

+
+ +

When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.

+ +

Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.

+ +

Alternatives for extending the prototype chain

+ +

In JavaScript, there are several different ways to extend the prototype of an object aside from what we've shown above. To find out more about the other ways, visit our Inheritance and the prototype chain article.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Object-oriented JavaScript.

+ +

Summary

+ +

This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes.

+ +

In the next article we'll have a look at how to work with JavaScript Object Notation (JSON), a common data exchange format written using JavaScript objects.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/objects/json/index.html b/files/de/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..7b01bfbf52 --- /dev/null +++ b/files/de/learn/javascript/objects/json/index.html @@ -0,0 +1,345 @@ +--- +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

+ + + +

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:

+ + + +

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-oriented_js/index.html b/files/de/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..b4229a8058 --- /dev/null +++ b/files/de/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,290 @@ +--- +title: Objektorientiertes JavaScript für Beginner +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Anfänger + - Artikel + - Erstellen + - Erzeugen + - Instanzen + - JavaScript + - Konstruktor + - Lernen + - OOJS + - OOP + - Objekt + - Objektorientiert + - codescripting +translation_of: 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/object_prototypes/index.html b/files/de/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..010c5986e9 --- /dev/null +++ b/files/de/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,288 @@ +--- +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:

+ + + +
+

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/mitarbeiten/index.html b/files/de/learn/mitarbeiten/index.html new file mode 100644 index 0000000000..02405b9280 --- /dev/null +++ b/files/de/learn/mitarbeiten/index.html @@ -0,0 +1,82 @@ +--- +title: Zum MDN Lern-Bereich beitragen +slug: Learn/Mitarbeiten +tags: + - Anfänger + - Anleitung + - Dokumentation + - Lernen + - MDN Meta + - Mitmachen +translation_of: Learn/How_to_contribute +--- +

{{LearnSidebar}}

+ +

Falls Du zum ersten Mal oder nach langer Suche hier gelandet bist liegt das vermutlich daran, dass Du etwas zum MDN Lern-Bereich beitragen möchtest. Herzlich Willkommen!

+ +

Auf dieser Seite findest Du alles was Du benötigst um den Lern-Bereich im MDN zu verbessern. Du hast zahlreiche Möglichkeiten hier mitzuwirken: Als Anfänger, Webentwickler oder Lehrer - je nachdem, wie viel Zeit und Erfahrung Du hast.

+ +
+

Hinweis: Falls Du bereits im MDN mitwirkst prüfe am besten noch einmal die documentation status page. Dort kannst Du sehen was bereits gemacht wurde und was als nächstes in Angriff genommen werden sollte.

+
+ +
+

Hinweis: Mitwirkende verwenden ein Trello board um ihre Aufgaben zu organisieren. Falls Du das auch tun willst erstelle einen Trello account und schreibe Jeremie an, damit er Dir Schreibrechte für das Board gewährt.

+
+ +

Ich bin Anfänger

+ +

Grossartig! Anfänger sind sehr wichtig für das Erstellen und das Bewerten der Lernmaterialien. Für sie sind die Artikel geschrieben und ihre einzigartige Sicht auf die Artikel kann sie zu wertvollen Mitarbeitern unseres Teams machen. Falls Du einen unserer Artikel zum Lernen verwendest und nicht weiter kommst oder ihn verwirrend findest kannst Du ihn entweder selbst verbessern oder uns Dein Problem melden. Wir kümmern uns darum.

+ +

Diese Form der Mitarbeit während des Lernens kann auch Spass machen. Falls Du Dich irgendwo nicht zurechtfindest oder Fragen hast kannst Du uns über unsere Mailingliste oder in unserem IRC channel (mehr Informationen am Ende dieser Seite) erreichen.

+ +

Hier ein paar Vorschläge wie Du mithelfen kannst:

+ +
+
Füge Tags zu unseren Artikeln hinzu (5 min)
+
Eine einfache Möglichkeit unser Projekt zu unterstützten ist das Taggen von MDN-Inhalten. Da viele unserer Artikel Tags verwenden um Informationen im Kontext aufzubereiten, ist das Taggen eine große Hilfe für uns. Um loszulegen schau Dir die Listen von glossary entries und learning articles ohne Tags an.
+
Lese und bewerte einen Glossar-Eintrag (15 min)
+
Als Anfänger schaut man unvoreingenommen auf Inhalte. Wenn Du der Meinung bist, dass ein Glossar-Eintrag schwer zu verstehen ist, dann bedeutet das, dass er verbessert werden muss. Du kannst gleich loslegen und das ändern, was Deiner Meinung nach geändert werden muss. Falls Du es nicht selbst machen willst gib uns über unsere mailing list Bescheid.
+
Schreibe einen neuen Glossar-Eintrag (1 Stunde)
+
Einen eigenen Glossar-Eintrag zu schreiben ist die effektivste Methode, um etwas Neues zu lernen. Such Dir einfach irgendetwas aus, das Du verstehen möchtest. Während Du Dich damit beschäftigst kannst Du dazu einen Glossar-Eintrag verfassen. Anderen Menschen etwas zu erklären hilft Dir dabei das Wissen darüber zu festigen.
+
Lese und bewerte einen Lern-Artikel (2 Stunden)
+
Das Lesen und Bewerten eines Lern-Artikels ist ziemlich genau dasselbe wie das Bewerten eines Glossar-Eintrags (siehe oben); es dauert allerdings deutlich länger, da diese Artikel in der Regel einen größeren Umfang haben.
+
+ +

Ich bin Webentwickler

+ +

Fantastisch! Deine technischen Fähigkeiten sind genau das, was wir brauchen, um technisch verständliche und korrekte Inhalte für Anfänger bereitzustellen. Da dieser Bereich von MDN dazu da ist, das Web zu verstehen, gilt es, deine Erklärungen so einfach wie möglich zu halten. Sie sollten aber auch nicht so einfach sein, dass sie den Benutzern nicht weiterhelfen. Schreibe lieber verständlich als übergenau.

+ +
+
Lies und bewerte einen Glossar-Eintrag (15 min)
+
Wir müssen darauf achten, dass unsere Inhalte technisch korrekt und dabei nicht übergenau sind. Du kannst gleich loslegen und das ändern, was deiner Meinung nach geändert werden muss. Falls du davor mit uns deine Änderungen besprechen möchtest, erreichst du uns über die Mailing Liste oder den IRC channel.
+
Schreibe einen neuen Glossar-Eintrag (1 Stunde)
+
Technischen Jargon zu entfernen ist eine gute Möglichkeit zu lernen. Außerdem hilft es dabei, sowohl technisch genau als auch einfach zu schreiben. Anfänger werden es dir danken. Wir haben many undefined terms, die der Klärung bedürfen. Wähle einen davon aus und fang einfach an.
+
Lies und bewerte einen Lern-Artikel (2 Stunden)
+
Das Lesen und Bewerten eines Lern-Artikels ist ziemlich genau dasselbe wie das Bewerten eines Glossar-Eintrags (siehe obene); es dauert allerdings deutlich länger, da diese Artikel in der Regel einen größeren Umfang haben.
+
Schreibe einen neuen Lern-Artikel (4 Stunden)
+
MDN möchte nicht einfach nur neue Artikel über Web-Technologien (HTML, CSS, JavaScript, etc) veröffentlichen. Wir haben auch eine Menge Artikel im MDN, die geprüft und überarbeitet werden müssen. Gib alles, was Du kannst um Web-Technolgien auch für Anfänger zugänglich zu machen.
+
Füge Übungen, Code-Beispiele oder interaktive Lernmittel hinzu (? hours)
+
Alle unsere Lern-Artikel sollten "aktive Lernmittel" (wir wir es nennen) unterstüzen, denn Menschen lernen am besten durch praktisches Ausprobieren. Solche Lernmittel sind z.B. Übungen oder interaktiver Content, den die Lernenden ausführen und dessen Konzepte sie im Detail ändern können. Es gibt mehrere Wege zum Erzeugen von interaktivem Content, vom Anlegen von Code-Beispielen mit JSFiddle oder ähnlichen Tools bis hin zum Aufbau komplett änderbaren interaktiven Contents mit Thimble. Entfessele Deine Kreativität!
+
+ +

Ich bin Lehrer

+ +

MDN hat eine lange Geschichte technischer Exzellenz, aber wir haben ein paar Defizite in der Art und Weise wie wir Konzepte an Neu-Einsteiger vermitteln. Hier brauchen wir Dich als Lehrer und Pädagoge. Du kannst uns helfen sicherzustellen, dass unsere Lehrmaterialien einen hohen praktischen Nutzen für unsere Leser haben.

+ +
+
Lese und überprüfe einen Glossar-Eintrag (15 min)
+
Prüfe einen Glossar-Eintrag und scheue Dich nicht, aus Deiner Sicht notwendige Änderungen durchzuführen. Wenn Du den Inhalt vor dem Ändern diskutieren möchtest, dann informiere uns über unsere Mailing-Liste oder unseren IRC channel.
+
Schreibe einen neuen Glossar-Eintrag (1 hour)
+
Klare, einfache Begriffs-Definitonen und Übersichtsbilder von Konzepten im Glossar sind kritisch im Hinblick auf die Bedürfnisse von Anfängern. Deine Erfahrung als Pädagoge kann uns helfen, exzellente Glossar-Einträge zu pflegen; wir haben viele undefinierte Begriffe, die Deine Aufmerksamkeit benötigen. Such Dir einen heraus und los geht's.
+
Füge Illustrationen und/oder Schemata zu Artikel hinzu (1 hour)
+
Wie Du vielleicht weißt sind Illustrationen von unschätzbarem Wert für jedes Lehrmittel. Hier haben wir im MDN oftmals Defizite und Deine Fähigkeiten können in diesem Bereich den Unterschied machen. Prüfe die Artikel mit zu wenig Illustrationen und suche Dir einen heraus, für den Du eine Illustration anlegen möchtest.
+
Lese und überprüfe einen Lern-Artikel (2 hours)
+
Das ist so ähnlich wie das Überprüfen von Glossar-Einträgen (siehe oben). Aber es erfordert mehr Zeit, da die Artikel in der Regel umfangreicher sind.
+
Schreibe einen neuen Lern-Artikel (4 hours)
+
Wir brauchen einfache, zielführende Artikel über das Web im allgemeinen und die im Web verwendeten Technologien und Funktionen. Da diese Artikel etwas vermitteln und nicht alles Mögliche literarisch aufbereiten sollen ist Deine Erfahrung gefragt, um die relevanten Themen zu finden und diese zielgruppengerecht aufzubereiten.
+
Füge Übungen, Ratespiele oder interaktive Lernmittel hinzu (? hours)
+
Alle unsere Lern-Artikel benötigen "aktive Lernmittel". Solche Lernmittel sind z.B. Übungen oder interaktiver Content, mit dessen Hilfe die Lernenden den vermittelten Lernstoff anwenden und weiterentwickeln können. Es gibt eine Menge Dinge die Du hier tun kannst, von Ratespielen bis hin zum Aufbau komplett änderbaren interaktiven Contents mit Thimble. Entfessele Deine Kreativität!
+
Füge Lern-Pfade hinzu (? hours)
+
Um fortschrittliche und nachvollziehbare Tutorials anzubieten müssen wir unsere Inhalte wie Lern-Pfade gestalten. Ein möglicher Weg ist, bestehende Artikel darauf zu prüfen was diesen Artikeln zu einem Lern-Artikel fehlt.
+
diff --git a/files/de/learn/server-side/erste_schritte/index.html b/files/de/learn/server-side/erste_schritte/index.html new file mode 100644 index 0000000000..d2a3cc75ca --- /dev/null +++ b/files/de/learn/server-side/erste_schritte/index.html @@ -0,0 +1,49 @@ +--- +title: Erste Schritte in serverseitiger Webseiten-Programmierung +slug: Learn/Server-side/Erste_Schritte +tags: + - Anfänger + - Einführung + - Lernen + - Serverseitige Programmierung +translation_of: Learn/Server-side/First_steps +--- +

{{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/erste_schritte/introduction/index.html b/files/de/learn/server-side/erste_schritte/introduction/index.html new file mode 100644 index 0000000000..2924655941 --- /dev/null +++ b/files/de/learn/server-side/erste_schritte/introduction/index.html @@ -0,0 +1,230 @@ +--- +title: Einführung auf der Serverseite +slug: Learn/Server-side/Erste_Schritte/Introduction +tags: + - Anfänger + - Einführung +translation_of: Learn/Server-side/First_steps/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

Willkommen zum Einsteigerkurs für serverseitige Programmierung! In diesem ersten Artikel schauen wir uns die serverseitige Programmierung im Überblick an, antworten auf Fragen wie "Was ist das?", "Wie unterscheidet es sich von der Client-Seitigen Programmierung?" und "Warum ist es so nützlich?" Nachdem Du diesen Artikel gelesen hast wirst Du den Einfluss verstehen, den Websites durch die serverseitige Programmierung erhalten.

+ + + + + + + + + + + + +
Vorraussetzungen:Grundlegende Computerkenntnisse. Ein grundlegendes Verständnis davon, was ein Webserver ist.
Ziel:Sich damit vertraut machen, was serverseitige Programmierung ist, was sie kann und wie sie sich von der clientseitigen Programmierung unterscheidet.
+ +

Die meisten großen Websites verwenden serverseitigen Code, um bei Bedarf verschiedene Daten dynamisch anzuzeigen, die im Allgemeinen aus einer auf einem Server gespeicherten Datenbank gezogen und an den Client gesendet werden, um über einen bestimmten Code (z.B. HTML und JavaScript) angezeigt zu werden.

+ +

Der wahrscheinlich größte Vorteil von serverseitigem Code liegt darin, dass man den Inhalt individuell für jeden Benutzer anpassen kann. Dadurch können zum Beispiel bestimmte Details oder Angebote einer Website für bestimmte User hervorgehoben werden. Des weiteren kann serverseitiger Code die Website benutzerfreundlicher machen, indem zum Beispiel Kreditkarteninformationen oder die Versandadresse für weitere Bestellungen gespeichert werden.

+ +

Serverseitiger Code wird auch benötigt, um Interaktionen des Benutzers zu ermöglichen. Hierdurch können z.B. Benachrichtigungen oder Updates per E-Mail oder andere Kanäle versendet werden. All diese Vorteile bringen eine bessere Verknüpfung zwischen Benutzer und Website.

+ +

In der heutigen Zeit des Webdevelopments wird es deshalb empfohlen sich auch mit der serverseitigen Programmierung von Websites auseinanderzusetzen.

+ +

What is server-side website programming?

+ +

Web browsers communicate with web servers using the HyperText Transfer Protocol ({{glossary("HTTP")}}). When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server.

+ +

The request includes a URL identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in URL parameters (the field-value pairs sent via a query string), as POST data (data sent by the HTTP POST method), or in associated {{glossary("Cookie", "cookies")}}.

+ +

Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success). 

+ +

The body of a successful response to a request would contain the requested resource (e.g. a new HTML page, or an image, etc...), which could then be displayed by the web browser.

+ +

Static sites

+ +

The diagram below shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL.

+ +

The server retrieves the requested document from its file system and returns an HTTP response containing the document and a success status (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see client error responses and server error responses).

+ +

A simplified diagram of a static web server.

+ +

Dynamic sites

+ +

A dynamic website is one where some of the response content is generated dynamically only when needed. On a dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites). 

+ +

A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications).

+ +

Most of the code to support a dynamic website must run on the server. Creating this code is known as "server-side programming" (or sometimes "back-end scripting").

+ +

The diagram below shows a simple architecture for a dynamic website. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.

+ +

Requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: CSS, JavaScript, Images, pre-created PDF files etc). 

+ +

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

+ +

Requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a Web Application). For "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with HTML templates (4), and sends back a response containing the generated HTML (5,6). 

+ +
+

Are server-side and client-side programming the same?

+
+ +

Let's now turn our attention to the code involved in server-side and client-side programming. In each case, the code is significantly different:

+ + + +

Code running in the browser is known as client-side code and is primarily concerned with improving the appearance and behavior of a rendered web page. This includes selecting and styling UI components, creating layouts, navigation, form validation, etc. By contrast, server-side website programming mostly involves choosing which content is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required.

+ +

Client-side code is written using HTML, CSS, and JavaScript — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system).

+ +

Web developers can't control what browser every user might be using to view a website  — browsers provide inconsistent levels of compatibility with client-side code features, and part of the challenge of client-side programming is handling differences in browser support gracefully.

+ +

Server-side code can be written in any number of programming languages — examples of popular server-side web languages include PHP, Python, Ruby, C#, and NodeJS(JavaScript). The server-side code has full access to the server operating system and the developer can choose what programming language (and specific version) they wish to use.

+ +

Developers typically write their code using web frameworks. Web frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular domain.

+ +

Again, while both client and server-side code use frameworks, the domains are very different, and hence so are the frameworks. Client-side web frameworks simplify layout and presentation tasks while server-side web frameworks provide a lot of “common” web server functionality that you might otherwise have to implement yourself (e.g. support for sessions, support for users and authentication, easy database access, templating libraries, etc.).

+ +
+

Note: Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.

+ +

In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.

+
+ +
+

What can you do on the server-side?

+ +

Server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience.

+
+ +

Companies like Amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc.

+ +

Banks use server-side programming to store account information and allow only authorized users to view and make transactions. Other services like Facebook, Twitter, Instagram, and Wikipedia use server-side programming to highlight, share, and control access to interesting content.

+ +

Some of the common uses and benefits of server-side programming are listed below. You'll note that there is some overlap!

+ +

Efficient storage and delivery of information

+ +

Imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Creating a separate static page for each product or post would be completely impractical.

+ +

Server-side programming allows us to instead store the information in a database and dynamically construct and return HTML and other types of files (e.g. PDFs, images, etc.). It is also possible to simply return data ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent).

+ +

The server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services. The content can even be targeted for the type of client device that is receiving it.

+ +

Because the information is in a database, it can also more easily be shared and updated with other business systems (for example, when products are sold either online or in a shop, the shop might update its database of inventory).

+ +
+

Note: Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:

+ +
    +
  1. Go to Amazon or some other e-commerce site.
    2. +
  2. Search for a number of keywords and note how the page structure doesn't change, even though the results do. 
    3. +
  3. Open two or three different products. Note again how they have a common structure and layout, but the content for different products has been pulled from the database.
    4. +
+ +

For a common search term ("fish", say) you can see literally millions of returned values. Using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place.

+
+ +

Customised user experience

+ +

Servers can store and use information about clients to provide a convenient and tailored user experience. For example, many sites store credit cards so that details don't have to be entered again. Sites like Google Maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results.

+ +

A deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look at on a map.

+ +
+

Note: Google Maps saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.

+ +

Google search results are optimized based on previous searches.

+ +
    +
  1.  Go to Google search.
    2. +
  2.  Search for "football".
    3. +
  3.  Now try typing "favourite" in the search box and observe the autocomplete search predictions.
    4. +
+ +

Coincidence? Nada!

+
+ +

Controlled access to content

+ +

Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see.

+ +

Real world examples include:

+ + + +
+

Note: Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?

+
+ +

Store session/state information

+ +

Server-side programming allows developers to make use of sessions — basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information.

+ +

This allows, for example, a site to know that a user has previously logged in and display links to their emails or order history, or perhaps save the state of a simple game so that the user can go to a site again and carry on where they left it.

+ +
+

Note: Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. The Age). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.

+
+ +

Notifications and communication

+ +

Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services.

+ +

A few examples include:

+ + + +
+

Note: The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.

+
+ +

Data analysis

+ +

A website may collect a lot of data about users: what they search for, what they buy, what they recommend, how long they stay on each page. Server-side programming can be used to refine responses based on analysis of this data.

+ +

For example, Amazon and Google both advertise products based on previous searches (and purchases).

+ +
+

Note: If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.

+ +

Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!

+
+ +

Summary

+ +

Congratulations, you've reached the end of the first article about server-side programming. 

+ +

You've now learned that server-side code is run on a web server and that its main role is to control what information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).

+ +

You should also understand that it is useful because it allows us to create websites that efficiently deliver information tailored for individual users and have a good idea of some of the things you might be able to do when you're a server-side programmer.

+ +

Lastly, you should understand that server-side code can be written in a number of programming languages and that you should use a web framework to make the whole process easier. 

+ +

In a future article we'll help you choose the best web framework for your first site; Next, though we'll take you through the main client-server interactions in just a little more detail.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/de/learn/server-side/express_nodejs/index.html b/files/de/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..7462f8c23f --- /dev/null +++ b/files/de/learn/server-side/express_nodejs/index.html @@ -0,0 +1,65 @@ +--- +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:

+ + + +

And of course, it would be excellent to have an assessment task!

+
diff --git a/files/de/learn/server-side/express_nodejs/mongoose/index.html b/files/de/learn/server-side/express_nodejs/mongoose/index.html new file mode 100644 index 0000000000..525764221c --- /dev/null +++ b/files/de/learn/server-side/express_nodejs/mongoose/index.html @@ -0,0 +1,843 @@ +--- +title: 'Express Tutorial Part 3: Nutzung einer Datenbank (Mit Mongoose)' +slug: Learn/Server-side/Express_Nodejs/mongoose +translation_of: Learn/Server-side/Express_Nodejs/mongoose +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
+ +

This article briefly introduces databases, and how to use them with Node/Express apps. 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 in which you can access model data.

+ + + + + + + + + + + + +
Prerequisites:Express Tutorial Part 2: Creating a skeleton website
Objective:To be able to design and create your own models using Mongoose.
+ +

Overview

+ +

Library staff will use the Local Library website to store information about books and borrowers, while library members will use it to browse and search for books, find out whether there are any copies available, and then reserve or borrow them. In order to store and retrieve information efficiently, we will store it in a database.

+ +

Express apps can use many different databases, and there are several approaches you can use for performing Create, Read, Update and Delete (CRUD) operations. This tutorial provides a brief overview of some of the available options and then goes on to show in detail the particular mechanisms selected.

+ +

What databases can I use?

+ +

Express apps can use any database supported by Node (Express itself doesn't define any specific additional behavior/requirements for database management). There are many popular options, including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.

+ +

When choosing a database, you should consider things like time-to-productivity/learning curve, performance, ease of replication/backup, cost, community support, etc. While there is no single "best" database, almost any of the popular solutions should be more than acceptable for a small-to-medium-sized site like our Local Library.

+ +

For more information on the options see Database integration (Express docs).

+ +

What is the best way to interact with a database?

+ +

There are two common approaches for interacting with a database: 

+ + + +

The very best performance can be gained by using SQL, or whatever query language is supported by the database. ODM's are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the ODM supports different database backends, and must make greater compromises in terms of what database features are supported).

+ +

The benefit of using an ORM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform data validation.

+ +
+

Tip:  Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM.

+
+ +

What ORM/ODM should I use?

+ +

There are many ODM/ORM solutions available on the NPM package manager site (check out the odm and orm tags for a subset!).

+ +

A few solutions that were popular at the time of writing are:

+ + + +

As a general rule, you should consider both the features provided and the "community activity" (downloads, contributions, bug reports, quality of documentation, etc.) when selecting a solution. At the time of writing Mongoose is by far the most popular ODM, and is a reasonable choice if you're using MongoDB for your database.

+ +

Using Mongoose and MongoDb for the LocalLibrary

+ +

For the Local Library example (and the rest of this topic) we're going to use the Mongoose ODM to access our library data. Mongoose acts as a front end to MongoDB, an open source NoSQL database that uses a document-oriented data model. A “collection” of “documents” in a MongoDB database is analogous to a “table” of “rows” in a relational database.

+ +

This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.

+ +
+

Tip: You don't need to know MongoDB in order to use Mongoose, although parts of the Mongoose documentation are easier to use and understand if you are already familiar with MongoDB.

+
+ +

The rest of this tutorial shows how to define and access the Mongoose schema and models for the LocalLibrary website example.

+ +

Designing the LocalLibrary models

+ +

Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.

+ +

We know that we need to store information about books (title, summary, author, genre, ISBN) and that we might have multiple copies available (with globally unique ids, availability statuses, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on the book title, author, genre, and category.

+ +

When designing your models it makes sense to have separate models for every "object" (a group of related information). In this case some obvious candidates for these models are books, book instances, and authors.

+ +

You might also want to use models to represent selection-list options (e.g. like a drop-down list of choices), rather than hard-coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. A good example is a genre (e.g. fantasy, science fiction, etc.).

+ +

Once we've decided on our models and fields, we need to think about the relationships between them.

+ +

With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes). As discussed above, we've created models for the book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for the genre so that values can be created dynamically. We've decided not to have a model for the BookInstance:status — we will hard code the acceptable values because we don't expect these to change. Within each of the boxes, you can see the model name, the field names and types, and also the methods and their return types.

+ +

The diagram also shows the relationships between the models, including their multiplicities. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that Book and a Genre are related. The numbers close to the Book model show that a Genre must have zero or more Books (as many as you like), while the numbers on the other end of the line next to the Genre show that a book can have zero or more associated Genres.

+ +
+

Note: As discussed in our Mongoose primer below it is often better to have the field that defines the relationship between the documents/models in just one model (you can still find the reverse relationship by searching for the associated _id in the other model). Below we have chosen to define the relationship between Book/Genre and Book/Author in the Book schema, and the relationship between the Book/BookInstance in the BookInstance Schema. This choice was somewhat arbitrary — we could equally well have had the field in the other schema.

+
+ +

Mongoose Library Model with correct cardinality

+ +
+

Note: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.

+
+ +

Mongoose primer

+ +

This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. 

+ +
+

Note: This primer is heavily influenced by the Mongoose quick start on npm and the official documentation.

+
+ +

Installing Mongoose and MongoDB

+ +

Mongoose is installed in your project (package.json) like any other dependency — using NPM. To install it, use the following command inside your project folder:

+ +
npm install mongoose
+
+ +

Installing Mongoose adds all its dependencies, including the MongoDB database driver, but it does not install MongoDB itself. If you want to install a MongoDB server then you can download installers from here for various operating systems and install it locally. You can also use cloud-based MongoDB instances.

+ +
+

Note: For this tutorial, we'll be using the MongoDB Atlas cloud-based database as a service free tier to provide the database. This is suitable for development and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might use for your production database).

+
+ +

Connecting to MongoDB

+ +

Mongoose requires a connection to a MongoDB database. You can require() and connect to a locally hosted database with mongoose.connect(), as shown below.

+ +
//Import the mongoose module
+var mongoose = require('mongoose');
+
+//Set up default mongoose connection
+var mongoDB = 'mongodb://127.0.0.1/my_database';
+mongoose.connect(mongoDB, { useNewUrlParser: true });
+
+//Get the default connection
+var db = mongoose.connection;
+
+//Bind connection to error event (to get notification of connection errors)
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+ +

You can get the default Connection object with mongoose.connection. Once connected, the open event is fired on the Connection instance.

+ +
+

Tip: If you need to create additional connections you can use mongoose.createConnection(). This takes the same form of database URI (with host, database, port, options etc.) as connect() and returns a Connection object).

+
+ +

Defining and creating models

+ +

Models are defined using the Schema interface. The Schema allows you to define the fields stored in each document along with their validation requirements and default values. In addition, you can define static and instance helper methods to make it easier to work with your data types, and also virtual properties that you can use like any other field, but which aren't actually stored in the database (we'll discuss a bit further below).

+ +

Schemas are then "compiled" into models using the mongoose.model() method. Once you have a model you can use it to find, create, update, and delete objects of the given type.

+ +
+

Note: Each model maps to a collection of documents in the MongoDB database. The documents will contain the fields/schema types defined in the model Schema.

+
+ +

Defining schemas

+ +

The code fragment below shows how you might define a simple schema. First you require() mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.

+ +
//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string: String,
+  a_date: Date
+});
+
+ +

In the case above we just have two fields, a string and a date. In the next sections, we will show some of the other field types, validation, and other methods.

+ +

Creating a model

+ +

Models are created from schemas using the mongoose.model() method:

+ +
// Define schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string: String,
+  a_date: Date
+});
+
+// Compile model from schema
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
+ +

The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model SomeModel above), and the second argument is the schema you want to use in creating the model.

+ +
+

Note: Once you've defined your model classes you can use them to create, update, or delete records, and run queries to get all records or particular subsets of records. We'll show you how to do this in the Using models section, and when we create our views.

+
+ +

Schema types (fields)

+ +

A schema can have an arbitrary number of fields — each one represents a field in the documents stored in MongoDB. An example schema showing many of the common field types and how they are declared is shown below.

+ +
var schema = new Schema(
+{
+  name: String,
+  binary: Buffer,
+  living: Boolean,
+  updated: { type: Date, default: Date.now() },
+  age: { type: Number, min: 18, max: 65, required: true },
+  mixed: Schema.Types.Mixed,
+  _someId: Schema.Types.ObjectId,
+  array: [],
+  ofString: [String], // You can also have an array of each of the other types too.
+  nested: { stuff: { type: String, lowercase: true, trim: true } }
+})
+ +

Most of the SchemaTypes (the descriptors after “type:” or after field names) are self-explanatory. The exceptions are:

+ + + +

The code also shows both ways of declaring a field:

+ + + +

For more information about options see SchemaTypes (Mongoose docs).

+ +

Validation

+ +

Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range of values and the error message for validation failure in all cases.

+ +

The built-in validators include:

+ + + +

The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:

+ +
var breakfastSchema = new Schema({
+  eggs: {
+    type: Number,
+    min: [6, 'Too few eggs'],
+    max: 12,
+    required: [true, 'Why no eggs?']
+  },
+  drink: {
+    type: String,
+    enum: ['Coffee', 'Tea', 'Water',]
+  }
+});
+
+ +

For complete information on field validation see Validation (Mongoose docs).

+ +

Virtual properties

+ +

Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.

+ +
+

Note: We will use a virtual property in the library to define a unique URL for each model record using a path and the record's _id value.

+
+ +

For more information see Virtuals (Mongoose documentation).

+ +

Methods and query helpers

+ +

A schema can also have instance methods, static methods, and query helpers. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's chainable query builder API (for example, allowing you to add a query "byName" in addition to the find(), findOne() and findById() methods).

+ +

Using models

+ +

Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.

+ +

We provide a brief overview below. For more information see: Models (Mongoose docs).

+ +

Creating and modifying documents

+ +

To create a record you can define an instance of the model and then call save(). The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.

+ +
// Create an instance of model SomeModel
+var awesome_instance = new SomeModel({ name: 'awesome' });
+
+// Save the new model instance, passing a callback
+awesome_instance.save(function (err) {
+  if (err) return handleError(err);
+  // saved!
+});
+
+ +

Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.

+ +

You can also use create() to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.

+ +
SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+  if (err) return handleError(err);
+  // saved!
+});
+ +

Every model has an associated connection (this will be the default connection when you use mongoose.model()). You create a new connection and call .model() on it to create the documents on a different database.

+ +

You can access the fields in this new record using the dot syntax, and change the values. You have to call save() or update() to store modified values back to the database.

+ +
// Access model field values using dot notation
+console.log(awesome_instance.name); //should log 'also_awesome'
+
+// Change record by modifying the fields, then calling save().
+awesome_instance.name="New cool name";
+awesome_instance.save(function (err) {
+   if (err) return handleError(err); // saved!
+});
+
+ +

Searching for records

+ +

You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete name and age. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.

+ +
var Athlete = mongoose.model('Athlete', yourSchema);
+
+// find all athletes who play tennis, selecting the 'name' and 'age' fields
+Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
+  if (err) return handleError(err);
+  // 'athletes' contains the list of athletes that match the criteria.
+})
+ +

If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.

+ +
+

Note: All callbacks in Mongoose use the pattern callback(error, result). If an error occurs executing the query, the error parameter will contain an error document and result will be null. If the query is successful, the error parameter will be null, and the result will be populated with the results of the query.

+
+ +
+

Note: It is important to remember that not finding any results is not an error for a search —but it may be a fail-case in the context of your application. If your application expects a search to find a value you can either check the result in the callback (results==null) or daisy chain the orFail() method on the query. 

+
+ +

If you don't specify a callback then the API will return a variable of type Query. You can use this query object to build up your query and then execute it (with a callback) later using the exec() method.

+ +
// find all athletes that play tennis
+var query = Athlete.find({ 'sport': 'Tennis' });
+
+// selecting the 'name' and 'age' fields
+query.select('name age');
+
+// limit our results to 5 items
+query.limit(5);
+
+// sort by age
+query.sort({ age: -1 });
+
+// execute the query at a later time
+query.exec(function (err, athletes) {
+  if (err) return handleError(err);
+  // athletes contains an ordered list of 5 athletes who play Tennis
+})
+ +

Above we've defined the query conditions in the find() method. We can also do this using a where() function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.

+ +
Athlete.
+  find().
+  where('sport').equals('Tennis').
+  where('age').gt(17).lt(50).  //Additional where query
+  limit(5).
+  sort({ age: -1 }).
+  select('name age').
+  exec(callback); // where callback is the name of our callback function.
+ +

The find() method gets all matching records, but often you just want to get one match. The following methods query for a single record:

+ + + +
+

Note: There is also a count() method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.

+
+ +

There is a lot more you can do with queries. For more information see: Queries (Mongoose docs).

+ + + +

You can create references from one document/model instance to another using the ObjectId schema field, or from one document to many using an array of ObjectIds. The field stores the id of the related model. If you need the actual content of the associated document, you can use the populate() method in a query to replace the id with the actual data.

+ +

For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of ObjectId. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.

+ +
var mongoose = require('mongoose')
+  , Schema = mongoose.Schema
+
+var authorSchema = Schema({
+  name    : String,
+  stories : [{ type: Schema.Types.ObjectId, ref: 'Story' }]
+});
+
+var storySchema = Schema({
+  author : { type: Schema.Types.ObjectId, ref: 'Author' },
+  title    : String
+});
+
+var Story  = mongoose.model('Story', storySchema);
+var Author = mongoose.model('Author', authorSchema);
+ +

We can save our references to the related document by assigning the _id value. Below we create an author, then a story, and assign the author id to our story's author field.

+ +
var bob = new Author({ name: 'Bob Smith' });
+
+bob.save(function (err) {
+  if (err) return handleError(err);
+
+  //Bob now exists, so lets create a story
+  var story = new Story({
+    title: "Bob goes sledding",
+    author: bob._id    // assign the _id from the our author Bob. This ID is created by default!
+  });
+
+  story.save(function (err) {
+    if (err) return handleError(err);
+    // Bob now has his story
+  });
+});
+ +

Our story document now has an author referenced by the author document's ID. In order to get the author information in the story results we use populate(), as shown below.

+ +
Story
+.findOne({ title: 'Bob goes sledding' })
+.populate('author') //This populates the author id with actual author information!
+.exec(function (err, story) {
+  if (err) return handleError(err);
+  console.log('The author is %s', story.author.name);
+  // prints "The author is Bob Smith"
+});
+ +
+

Note: Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's stories array. How then can we get all stories by a particular author? One way would be to add our story to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.

+ +

A better way is to get the _id of our author, then use find() to search for this in the author field across all stories.

+ +
Story
+.find({ author : bob._id })
+.exec(function (err, stories) {
+  if (err) return handleError(err);
+  // returns all stories that have Bob's id as their author.
+});
+
+
+ +

This is almost everything you need to know about working with related items for this tutorial. For more detailed information see Population (Mongoose docs).

+ +

One schema/model per file

+ +

While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), then exporting the method to create the model. This is shown below:

+ +
// File: ./models/somemodel.js
+
+//Require Mongoose
+var mongoose = require('mongoose');
+
+//Define a schema
+var Schema = mongoose.Schema;
+
+var SomeModelSchema = new Schema({
+  a_string          : String,
+  a_date            : Date,
+});
+
+//Export function to create "SomeModel" model class
+module.exports = mongoose.model('SomeModel', SomeModelSchema );
+ +

You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.

+ +
//Create a SomeModel model just by requiring the module
+var SomeModel = require('../models/somemodel')
+
+// Use the SomeModel object (model) to find all SomeModel records
+SomeModel.find(callback_function);
+ +

Setting up the MongoDB database

+ +

Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the LocalLibrary website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.

+ +

For this tutorial, we're going to use the MongoDB Atlas free cloud-hosted sandbox database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular database as a service vendor that you might reasonably choose for your production database (other popular choices at the time of writing include Compose, ScaleGrid and ObjectRocket).

+ +
+

Note: If you prefer you can set up a MongoDb database locally by downloading and installing the appropriate binaries for your system. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting. Note, however, that the Express Tutorial Part 7: Deploying to Production tutorial requires some form of remote database, since the free tier of the Heroku service does not provide persistent storage. It is therefore highly recommended to use MongoDB Atlas.

+
+ +

You will first need to create an account with MongoDB Atlas (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). 

+ +

After logging in, you'll be taken to the home screen:

+ +
    +
  1. Click Build a Cluster button in the Clusters Overview section.
    + Create a cluster on MongoDB Atlas.
    2. +
  2. This will open the Create New Cluster screen.
    + Choose a cloud provider when using MongoDB Atlas. +
      +
    • Select any provider from the Cloud Provider & Region section. Different providers offer different regions.
      • +
    • Select any region marked "FREE TIER AVAILABLE".
      • +
    • Click the Create Cluster button (creation of the cluster will take some minutes).
      • +
    +
    3. +
  3. +

    You will return to the Cluster Overview screen.
    + Setup a collection on MongoDB Atlas.

    + +
      +
    • +

      Click the Collections button.

      +
      • +
    +
    4. +
  4. This will open the Collections section.
    + Create a database on MongoDB Atlas. +
      +
    • Click the Add My Own Data button.
      • +
    +
    5. +
  5. This will open the Create Database screen.
    + Details during database creation on MongoDB Atlas. +
      +
    • Enter the name for the new database as local_library.
      • +
    • Enter the name of the collection as Collection0.
      • +
    • Click the Create button to create the database.
      • +
    +
    6. +
  6. You will return to the Collection screen with your database created.
    + Database creation confirmation on MongoDB Atlas. +
      +
    • Click the Overview tab to return the cluster overview.
      • +
    +
    7. +
  7. From the Cluster0 Overview screen click the Connect button.
    + Configure a connection when after setting up a cluster in MongoDB Atlas.
    8. +
  8. This will open the Connect to Cluster screen.
    + Setup a connection when using MongoDB Atlas. +
      +
    • Click the Add a Different IP Address button, enter 0.0.0.0/0 for the IP Address and click Add IP Address button. +
      +

      Note: It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.

      +
      +
      • +
    • Enter a username and password and click Create MongoDB User button. +
      +

      Note: Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.

      +
      +
      • +
    • If you have completed the 2 previous steps, the button Choose a connection method will turn green.
      • +
    • Click the Choose a connection method button.
      • +
    +
    9. +
  9. You should now be able to access the Choose a connection method tab.
    + Choose a connection type when connecting with MongoDB Atlas. +
      +
    • Click the Connect Your Application option.
      • +
    +
    10. +
  10. This will open the Connect screen.
    + Choose the Short SRV connection when settinup a connection on MongoDB Atalas. +
      +
    • Click the Copy button to copy the connection string.
      • +
    • Save this string somewhere safe.
      • +
    • Update the password with your users password.
      • +
    • Replace test with local_library.
      • +
    +
    11. +
+ +

You have now created the database, and have a URL (with username and password) that can be used to access it. This will look something like: mongodb+srv://your_user_name:your_password@cluster0-mbdj7.mongodb.net/local_library?retryWrites=true

+ +

Install Mongoose

+ +

Open a command prompt and navigate to the directory where you created your skeleton Local Library website. Enter the following command to install Mongoose (and its dependencies) and add it to your package.json file, unless you have already done so when reading the Mongoose Primer above.

+ +
npm install mongoose
+
+ +

Connect to MongoDB

+ +

Open /app.js (in the root of your project) and copy the following text below where you declare the Express application object (after the line var app = express();). Replace the database url string ('insert_your_database_url_here') with the location URL representing your own database (i.e. using the information from mongoDB Atlas).

+ +
//Set up mongoose connection
+var mongoose = require('mongoose');
+var mongoDB = 'insert_your_database_url_here';
+mongoose.connect(mongoDB, { useNewUrlParser: true });
+var db = mongoose.connection;
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+ +

As discussed in the Mongoose primer above, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). 

+ +

Defining the LocalLibrary Schema

+ +

We will define a separate module for each model, as discussed above. Start by creating a folder for our models in the project root (/models) and then create separate files for each of the models:

+ +
/express-locallibrary-tutorial  //the project root
+  /models
+    author.js
+    book.js
+    bookinstance.js
+    genre.js
+
+ +

Author model

+ +

Copy the Author schema code shown below and paste it into your ./models/author.js file. The schema defines an author as having String SchemaTypes for the first and family names (required, with a maximum of 100 characters), and Date fields for the dates of birth and death.

+ +
var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var AuthorSchema = new Schema(
+  {
+    first_name: {type: String, required: true, max: 100},
+    family_name: {type: String, required: true, max: 100},
+    date_of_birth: {type: Date},
+    date_of_death: {type: Date},
+  }
+);
+
+// Virtual for author's full name
+AuthorSchema
+.virtual('name')
+.get(function () {
+
+// To avoid errors in cases where an author does not have either a family name or first name
+// We want to make sure we handle the exception by returning an empty string for that case
+
+  var fullname = '';
+  if (this.first_name && this.family_name) {
+    fullname = this.family_name + ', ' + this.first_name
+  }
+  if (!this.first_name || !this.family_name) {
+    fullname = '';
+  }
+
+  return fullname;
+});
+
+// Virtual for author's lifespan
+AuthorSchema
+.virtual('lifespan')
+.get(function () {
+  return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString();
+});
+
+// Virtual for author's URL
+AuthorSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/author/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Author', AuthorSchema);
+
+
+ +

We've also declared a virtual for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.

+ +
+

Note: Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.
+ At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!

+
+ +

At the end of the module, we export the model.

+ +

Book model

+ +

Copy the Book schema code shown below and paste it into your ./models/book.js file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.

+ +
var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookSchema = new Schema(
+  {
+    title: {type: String, required: true},
+    author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},
+    summary: {type: String, required: true},
+    isbn: {type: String, required: true},
+    genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]
+  }
+);
+
+// Virtual for book's URL
+BookSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/book/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('Book', BookSchema);
+
+ +

The main difference here is that we've created two references to other models:

+ + + +

BookInstance model

+ +

Finally, copy the BookInstance schema code shown below and paste it into your ./models/bookinstance.js file. The BookInstance represents a specific copy of a book that someone might borrow and includes information about whether the copy is available, on what date it is expected back, and "imprint" (or version) details.

+ +
var mongoose = require('mongoose');
+
+var Schema = mongoose.Schema;
+
+var BookInstanceSchema = new Schema(
+  {
+    book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book
+    imprint: {type: String, required: true},
+    status: {type: String, required: true, enum: ['Available', 'Maintenance', 'Loaned', 'Reserved'], default: 'Maintenance'},
+    due_back: {type: Date, default: Date.now}
+  }
+);
+
+// Virtual for bookinstance's URL
+BookInstanceSchema
+.virtual('url')
+.get(function () {
+  return '/catalog/bookinstance/' + this._id;
+});
+
+//Export model
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);
+ +

The new things we show here are the field options:

+ + + +

Everything else should be familiar from our previous schema.

+ +

Genre model - challenge!

+ +

Open your ./models/genre.js file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).

+ +

The definition will be very similar to the other models:

+ + + +

Testing — create some items

+ +

That's it. We now have all models for the site set up!

+ +

In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an independent script to create items of each type:

+ +
    +
  1. Download (or otherwise create) the file populatedb.js inside your express-locallibrary-tutorial directory (in the same level as package.json). + +
    +

    Note: You don't need to know how populatedb.js works; it just adds sample data into the database.

    +
    +
    2. +
  2. Enter the following commands in the project root to install the async module that is required by the script (we'll discuss this in later tutorials, ) + 
    npm install async
    +
    3. +
  3. Run the script using node in your command prompt, passing in the URL of your MongoDB database (the same one you replaced the insert_your_database_url_here placeholder with, inside app.js earlier): Be sure to pass it  as  a string by wrapping it with ''. + 
    node populatedb <your mongodb url>​​​​
    +
    4. +
  4. +
    +

    Note for Windows operating system users: If the above command results in the error DeprecationWarning: current URL string parser is deprecated, change the mongoose.connect(mongoDB); line in populatedb.js file with mongoose.connect(mongoDB, { useNewUrlParser:true });

    + +

    Also, if you encounter problem with your MongoDb connection(e.g. MongoDb connection error: TypeError: Cannot read property 'split' of null) you should try the command above, only WITHOUT wrapping mongodb url as a string with ' ';

    +
    +
    5. +
  5. The script should run through to completion, displaying items as it creates them in the terminal.
    6. +
+ +
+

Tip: Go to your database on mongoDB Atlas (in the Collections tab). You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.

+
+ +

Summary

+ +

In this article, we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement Book, BookInstance, Author and Genre models for the LocalLibrary website.

+ +

Last of all, we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}

+ +

In this module

+ + diff --git a/files/de/learn/server-side/index.html b/files/de/learn/server-side/index.html new file mode 100644 index 0000000000..49ab06f262 --- /dev/null +++ b/files/de/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +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/cross_browser_testing/index.html b/files/de/learn/tools_and_testing/cross_browser_testing/index.html new file mode 100644 index 0000000000..c92e094d0a --- /dev/null +++ b/files/de/learn/tools_and_testing/cross_browser_testing/index.html @@ -0,0 +1,49 @@ +--- +title: Cross browser testing +slug: Learn/Tools_and_testing/Cross_browser_testing +tags: + - Accessibility + - Automation + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - Testing + - Tools + - TopicStub + - cross browser +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +
{{LearnSidebar}}
+ +

This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.

+ +

Prerequisites

+ +

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use the tools detailed here.

+ +

Guides

+ +
+
Introduction to cross browser testing
+
This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"
+
Strategies for carrying out testing
+
Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), low fi testing strategies (get yourself a range of devices and some virtual machines and do adhoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.
+
Handling common HTML and CSS problems
+
With the scene set, we'll now look specifically at the common cross browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
+
Handling common JavaScript problems
+
Now we'll look at common cross browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.
+
Handling common accessibility problems
+
Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.
+
Implementing feature detection
+
Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as @supports.
+
Introduction to automated testing
+
Manually running tests on several browsers and devices, several times per day, can get tedious and time consuming. To handle this efficiently, you should become familiar with automation tools. In this article we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.
+
Setting up your own test automation environment
+
In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.
+
diff --git a/files/de/learn/tools_and_testing/index.html b/files/de/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..0099fb70c6 --- /dev/null +++ b/files/de/learn/tools_and_testing/index.html @@ -0,0 +1,46 @@ +--- +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/list_of_mozilla-based_applications/index.html b/files/de/list_of_mozilla-based_applications/index.html new file mode 100644 index 0000000000..ebf63ce2c5 --- /dev/null +++ b/files/de/list_of_mozilla-based_applications/index.html @@ -0,0 +1,1265 @@ +--- +title: List of Mozilla-Based Applications +slug: List_of_Mozilla-Based_Applications +translation_of: Archive/List_of_Mozilla-Based_Applications +--- +

The following is a list of all known active applications that are built using Mozilla technologies. This list is likely to be incomplete since we think there are many dark matter projects that we don't know about. If you have information about a new project or extra information about an existing project, please feel free to update this page.

+

A list of former Mozilla-based applications is also available.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescriptionAdditional Information
389 Directory ServerLDAP serverUses NSS
A380 seatback entertainment systemmedia softwareThis blog post mentions a reference to Mozilla being used but I couldn't find more information about it.
Abstractaccounting tool 
Adobe Acrobat and Adobe ReaderPortable Document Format (PDF) softwareUses Mozilla SpiderMonkey
Adobe Flash Playerpopular browser plug-inUses NSS in Linux version
AdWatchcontent management systemUses XUL and XPCOM
AICPCU/IIA exam appexam delivery software 
Aliwal Geocodergeocoding & data on a map 
Amarok XUL remoteremote control for AmaroK music player 
Ample SDKJavascript GUI-framework 
AOL Instant MessengerIM clientUses NSS
Apacheweb serverDoesn't use NSS by default, but can be configured to use NSS with mod_nss SSL module
ApicaWatchsite performance monitoring toolUses Firefox as part of its monitoring package
Astyle CSS editorediting tool 
Atmailwebmail client 
Aviva for Javamainframe connectivity productUses Mozilla Rhino
BabelgumInternet TV service 
BatikJava-based toolkitUses Mozilla Rhino
BitBoxsecurity focused browserSeemingly based on Firefox
Blackbirdbrowser for African American community 
BlueGriffonwysiwyg editorNext generation version of Composer
BuzzbirdTwitter clientBuilt on XULRunner
Caminobrowser2.5m downloads and ~400,000 active users ... 
Celtxmedia tool 
Cenzic Hailstormvulnerability assessment and management toolUses Gecko
ChatZillaIRC clientStandalone version (XULRunner)
Chromium and Google Chromeweb browserUses Mozilla NSS and NPAPI libraries 
Chromelessbrowser with HTML-based interface 
ClassillaMozilla browser for Mac OS 9 
Clinesa clone of Color Lines (game)Standalone version
Cloudweb operating system 
Cloud BrowseiPhone/iPad/iPod Touch browserSeems to be Firefox running remotely on servers that people access through device
Conkerorkeyboard-oriented browser 
Convertigo Enterprise Mashup Serverserver tool for transactional web scraping and for web clipping 
CometBirdanother Firefox modModified version of Firefox
Correoemail 
Couac (fr)web-based email and jabber app 
CouchDBdocument-oriented databaseUses Spidermonkey
Courtanet Benefit (fr)underwriting software for French insurance brokers 
Crosscheckbrowserless testing frameworkUses Mozilla Rhino
Crowbarserver tool 
Cycloctopusscreen scraping console 
Cyclone3content management system 
Dangermobile platformUses Gecko on the server side -- no longer active?
Desktop 2internal browser and portal clientExpeditors International of Washington, Inc.
Dogtagcertificate systemUses NSS
DojoJavaScript toolkitUses Mozilla Rhino in ShrinkSafe
Eclipse platformopen development platformThe AJAX Toolkit Framework, Standard Widget Toolkit and EclipseMozilla projects make use of Mozilla
Elixon WCMS/XULWeb Content Management SystemFully remote XUL WCMS (no need to install extensions).
Entelechychat botUses XULRunner
Epic Browserweb browser for India 
eMusic Download Managermusic downloader for emusic 
eMusic Remotemusic manager 
Enlis Genome Personalgenome browser 
ESXXJavaScript application server +

Uses Mozilla Rhino

+
EtnaXML wysiwyg editor 
Eudoramail and news applicationThe upcoming version 8 will be based on Thunderbird
Evergreenlibrary automation system 
Evolutionemail clientUses NSS
eXeeLearning XHTML editorSeems to be using XUL for some of their webui
Facebook Open PlatformFacebook Open PlatformThe FBML parser used in the platform is based on Mozilla code
FennecBrowser for mobilesAs Mark notes: Fennec is not Firefox, it’s a completely different application
FindThatFont!font management tool 
Firecastdigital signage and interactive kiosk toolsAlso used in Firecast EasyStart
Mozilla Firefoxweb browserWeb Browser usage stats from Global Stats
FossaMailemail client for Windows platform, based on Mozilla ThunderbirdDeveloped by Moonchild Productions, creator of the Pale Moon web browser
Flickr Uploadrimage upload toolsee Flickr Uploadr: Open Source and Powered by XULRunner
Foxkeh Clockclock 
FrizioneJavaScript development, testing and deployment environmentUses Mozilla Rhino
GeckoFXembeddable Gecko 
GjsJavascript bindings for GNOME 
GlobalMojobrowser that raises money for your favorite causes 
GLUEscripta JavaScript engine which can be used as a general purpose languageUses Mozilla SpiderMonkey and formerly called wxJavaScript
Gnomeoperating systemGnome 3 will use SpiderMonkey through Gjs
Google AdWords Editoreditor 
Google Gadgets for LinuxGoogle’s Desktop Widget engineUses XULRunner according to the Build Instructions
GraniGrain sizing assessment toolAccording to this wiki page Grani is based on XUL and XPCOM Daim
gwt-mosaic-xulXUL builder for Google Web Tools 
Hachette's Multimedia Encyclopediaelectronic encyclopediaThis product was using Mozilla in 2004 but I’m not sure if new version still does
HacketyHacklittle coders 
Helmaweb application frameworkUses Mozilla Rhino
Holt McDougal CD-ROMseducational CD-ROMsActivity Generator and Lab Generator are both based on custom Firefox distributions
Houdini3d animation toolsUses Gecko in embedded help viewer
HttpUnitautomated testing frameworkUses Mozilla Rhino
HtmlUnitbrowser for Java programsUses Mozilla Rhino
HyperInfoWeb Application plat formUses GoeckoFX
IBM WebSphere Lombardi Editionbusiness process management systemUses Mozilla Rhino and Mozilla XPCOM Eclipse plug-in. (Product was formerly known as Lombardi Teamworks)
IceDragonfast, secure and feature-rich Internet browserBased on Firefox
IDAe-Learning authoring systemAbout 200 users
IMVU3d chat client 
Incredimailmail clientSeems to use XULRunner
InstantbirdIM clientXULRunner application
ItsNatJava AJAX Component based Web Framework 
Javasoftware platformUses Mozilla Rhino
JavaLikeScriptJavaScript extensible tooling frameworkUses NSPR and SpiderMonkey
JaxerAjax server 
jslibsJavaScript development runtime environmentUses SpiderMonkey (Note: this is separate from the Javascript library jsLib)
JoyBiddereBay auction toolStandalone version uses XULRunner
jUST (fr)audioA tool for setting temporal tags in audio documents
JsDoc Toolkitdocumentation toolUses Mozilla Rhino
K-MeleonGecko-based web browser for WindowsEmbeds Gecko in MFC
KaiRo.at Mandelbrotcreates images of Mandelbrot setsXULRUnner application
KazehakaseGecko-based web browser for Unix 
Kirix Stratadata browser 
Kiwixoffline version of Wikipedia 
Kneemailprayer, praise, and journal application 
Komodo and Komodo Edit and Open Komododevelopment toolsMozilla-based application (pre-XULRunner style), XUL UI
KompoZerwysiwyg HTML editorunofficial bug-fix release of NVu
Kylovideo browserUses Gecko
BioFortis Labmatrixweb-accessible software application used for information management and integration of patient clinical, specimen, genetic and molecular assay dataBased on XUL
Liaison Groupwareclient for Novell’s email and collaboration serverPreviously called MozNGW
Linbox Kiosk Browser (fr)web browserDedicated browser for french prefecture and town hall
litlInternet computer for homeUses SpiderMonkey and Gecko
LiziLayersGIS application3Liz also creates some GIS Firefox add-ons
Logitech Harmony Remote Softwaresoftware for remote control deviceUses GRE or XULrunner
Longman Dictionary of Contemporary EnglishCD-ROM 
Lotus Notes / SametimegroupwareThe latest version of IBM Lotus Notes and Sametime can embed XUL applications
Lucidore-book reader 
Lx-Officeaccounting toolLooks like it makes at least some use of XUL
Maavissimple UI & communications for accessibilityFramework designed for elderly people with dementia but other applications
Mac OS Xoperating systemMakes use of some MPL files such as libsecurity_asn1
Maemo Browserbrowser for Maemo Internet tabletDevelopment name is MicroB
MagooClientbusiness process management toolUses Mozilla Rhino
Mantrasecurity tool 
McCoysecure update tool for add-onsXULRunner application
MediaCodermedia converterTranscoder for video, audio, and even devices such as Zen, Zune, PocketPCs, iPods, and PSPs
MekhalabrowserPart of the KhmerOS Linux distro
midbrowsermobile web browser 
Mockerymockup creation toolBuilt on XULRunner
mongoDBdatabase projectUses SpiderMonkey
Moyuraemail clientPart of the KhmerOS Linux distro
+

MozCards, JoliStopwatch, JoliTimer

+ 		simple apps for MaemoUses XULRunner
MozNet .NET Controlembeddable Gecko for .NET applicationsWraps XulRunner for use in .NET applications
My Internet Browserlocalized browserUses Gecko
Myna Application ServerJavaScript application server for JavaUses Mozilla Rhino
NextCMS (fr)CMS 
Nightingalemusic playerCommunity run effort to continue Songbird support for Linux
OLPC Web Browserbrowser 
OneTeamJabber client 
OpenDocument Viewerviewer 
OpenGate's toolsCD burner, file browser, and hardware diagnostic softwaresOpenGate is the OpenSource side of the EasyNeuf project, “A Free Software Computer, Easy and Preinstalled”
Open Mashupsdevelopment tool 
OpenOffice.orgoffice suiteUses NSS
Openswanimplementation of IPsec for LinuxUses NSS
Orca Browserweb browserGecko-based version of Avant browser
Pale Moonweb browserCustom-built and optimized Firefox browser for GNU/Linux & Windows platforms
Palo SuiteExcel extensionUses Prism
PartyGamingonline gaming productUses Gecko
Penciltool for making diagrams and GUI prototypingAvailable as a firefox extension or a standalone app
Pentaho BI Suitecommercial open source business intelligenceUses XUL and Mozilla Rhino
Perseveretools for persistence and distributed computingUses Mozilla Rhino
Phlonemepublishing tool for Vocab Collab 
PhpEDPHP EditorEmbedded Mozilla browser in product
PidginIM clientUses NSS
Plain Old Webserverextension and standalone webserver5,000 users and 30,000 downloads
POE::XULframework for remote XUL application in POE 
Postboxemail clientStarted as a fork of Thunderbird
Printgroove JT Suiteprint process softwareUses XULRunner and Spidermonkey
Prism (was WebRunner)single-site browserXULRunner application
Pro/ENGINEER WildfireCADCAM product 
PsycRunnerChat, Messenger, Multicast toolkitAbout 1,000 users – XULRunner version of PsycZilla extension
Pyjamas-Desktopa Python Web Widget toolkitUses XULrunner DOM to implement the widgets and event handling. python-hulahop is required
Python-Hulahopa Python GTK WidgetUses embedded XULrunner, providing full access to nsI DOM and all other XULrunner interfaces, in a GTK window. It's possible to create your own python web browser with hulahop, and much much more besides.
QSOS XUL Editortool for the QSOS methodQSOS stands for Qualification and Selection of Opensource Software
Qtraxmusic clientBased on Songbird
QuickSTAFGUI client for Software Testing Automation FrameworkUses XULRunner
QuteComphone softwarePreviously named OpenWengo
Redcartext editorSeems to use XULRunner
Red Hat Directory Serverserver productUses NSS
Red Hat Certificate Systemserver productUses NSS
Regex Renamertool to rename files 
SamePlaceIM client 
Scenari Platformapplication suite for designing publishing chains 
Script ItAndroid development platformUses Mozilla Rhino, develop directly on your Android device
SeaMonkeysuiteA volunteer community legally backed by Mozilla Foundation with 2.5 million downloads
Secure Browserbrowser that uses virtualizationCreated by Dell
SEPTCMS for LeMonde.fr web siteMore information here (in English) and here (in French)
Skyfiremobile browser 
SipearIM client 
SmartReport Supervision Appliancenetwork monitoring and performance managementSmartReport is an appliance created by Acipia (France). XUL and the Mozilla Framework are heavily used in the GUI
SnapstickInternet on TVArticle that talks about Snapstick using Firefox
SOGogroupwareFront-end uses Thunderbird code
SongbirdmusicXULRunner application
Spicebirdcollaboration suite 
SpiderApeembedding toolUses Mozilla SpiderMonkey
Splashtop Web BrowserbrowserPart of instant-on operating system
sqlite-managerdatabase managerStandalone version of add-on
StealthSurfersecure Internet tools on USB keyUses Firefox and Thunderbird
StreamBasecomplex event processing platformSeems to use XULRunner
Stylizer CSS EditorCSS editorCSS Editor with built-in Firebug-like diagnostics and Gecko 1.8 preview
Sun Java Enterprise Systemserver productsUses NSS
Sundialbrowser with advanced domain name technologyBased on Firefox
SurfEasyprivate and secure web browsing 
Sweet16Apple II computer emulatorUses SpiderMonkey as a scriptable debugger for software running in the emulator
Mozilla Sunbird/Mozilla Lightningcalendar 
TabPressauthoring tool 
Talend Open Studodata integration softwareSeems to use XULRunner
Talking Clipboardtext to speech softwareRead ePub books, web pages, CHM, PDF, MS Word, RTF, RSS feeds
TaskPoolproductivity 
Telasocialkiosk appUses XULRunner
TeleKastteleprompter 
TenFourFoxbrowser for PowerPC-based Macs 
Timberwolfbrowser for Amiga OS4Based on Firefox - Project Page
Mozilla Thunderbirdemail47 million DL
TomTom HOME 2PC application to manage TomTom GPS devicesReview article from GPS Magazine; over 2.4m users
TopStyleHTML, XHTML and CSS editorSeems to have optional Gecko embedding but doesn't use it by default
ToxToxMedia Browser for TV5000 downloads
TrixulGUI toolkitUses Mozilla SpiderMonkey
TrustedBirdemail clientThunderbird bundled with a set of extensions (formerly known as Milimail)
TuneUpmusic collection organizerListed on XULRunner Hall of Fame but haven't seen information elsewhere
TuxGuitartabulature editorUses XULRunner
TwitFactorystandalone twitter/identi.ca client 
UISUniversity Information SystemIntranet application, 1000 users, Thin client based on FF3
Unison Desktopenterprise emailI think it's using mailnews code but don't have any information to link to. Feel free to supply references.
UOX3Ultima Online server-emulatorUses Mozilla SpiderMonkey
VerbosioXML EditorNo releases available
VerseMinderBible passage app 
Virgin Media Securitysecurity toolsSeems to use XULRunner
VirtualBoxvirtualization toolUse XPCOM as its component model on Linux
Waterfox64-bit variant of FirefoxBased on Firefox
Webissimoweb browserBased on XULRunner
Websecurifyweb Application Security Testing Environment 
Wesabemoney management toolAutomatic Uploader is a XULRunner application that runs headless in Xvfb
WikipediaOnDVD and Wikimedia by moulinoffline versions of WikipediaBlog post about projects
Wineimplementation of the Windows APIUses Mozilla SpiderMonkey and the Gecko ActiveX control
worksmart.netsuite of web-based workplace appsUses Prism
wxWebConnectWeb Browser Control Library 
Wyzobrowser 
xB Browseranonymous web browser 
Xbusinesscreate and send branded invoices, quotes or estimates 
XDFbilling and quotes software 
XiphosBible study software 
xmlDBEditordatabase editor 
xPUDLinux desktopxPUD: Linux with an XUL Interface, 10 Second Boot Time
XRapXulRunner Application Packager 
XUL Daimimage tool 
XUL Explorerdevelopment toolXULRunner application
XULJetJavaScript frameworkUses XULRunner
XULminegameStandalone version
Yahoo! Widgetsdesktop widgetsUses Mozilla SpiderMonkey
Yoono Desktopsocial networking appStandalone version of Yoono Firefox add-on
ZapSIP clientstatus update from August 2008
Zimbra Desktopemail and calendar applicationUses Prism
Zincvideo browserAccording to FAQ the standalone version is based on Firefox
ZKweb application frameworkMakes use of XUL
Zoteroreference managerFirefox extension and XULRunner application
+

Note: this page was previously hosted on mozpad.org and the history for that page can be found on that site.

+

Other places to find Mozilla applications include:

+ diff --git a/files/de/lokalisierbaren_code_schreiben/index.html b/files/de/lokalisierbaren_code_schreiben/index.html new file mode 100644 index 0000000000..9d8f8172aa --- /dev/null +++ b/files/de/lokalisierbaren_code_schreiben/index.html @@ -0,0 +1,22 @@ +--- +title: Lokalisierbaren Code schreiben +slug: Lokalisierbaren_Code_schreiben +tags: + - Lokalisierung +translation_of: Mozilla/Localization/Writing_localizable_code +--- +

Diese Seite beschreibt Richtlinien im Umgang mit dem Code der Benutzeroberfläche unter Berücksichtigung der Lokalisierung. Diese Seite ist für Entwickler von Mozilla und Erweiterungen gedacht.

+

Für weitere technische Details finden sich im XUL Tutorial weitere Informationen.

+

Über Lokalisierer

+

Einige Anmerkungen für Entwickler, die nur selten mit Übersetzer zu tun haben:

+ +

Richtlinien

+

Es existieren einige Richtlinien, an die sich Entwickler halten sollten, um ihren Code besser lokalisierbar zu machen.

+
Gute Schlüsselnamen „key names“ wählen 
Der gewählte Name für einen Schlüssel (egal ob es eine DTD oder eine properties-Datei ist) sollte selbstbeschreibend sein. Wenn Sie die Semantik eines lokalisierten Strings ändern, so ändern Sie auch den zugehörigen Schlüssel. Dies wird den String besser beschreiben und Übersetzungstools helfen zu erkennen, dass die Veränderung nicht lediglich die Korrektur eines Sprachfehlers ist.
Zusammengesetzten Strings keine Grammatik untermischen 
Das unachtsame Aufsplitten von Sätzen induziert eine Grammatik und Satzstruktur, die meistens schwierig zu übersetzen ist und eventuell auf andere Sprachen nicht zutrifft. Vermeiden Sie daher wenn möglich das Aufsplitten von Sätzen; wenn es allerdings unvermeidbar sein sollte, dann lassen Sie dem Übersetzer einen Freiraum. Ein Beispiel für einen bedacht zusammengesetzten String ist Firefox's Einstellungsfeld für besuchte Seiten: Der Übersetzer kann ohne weiteres die Position des Textfeldes verändern.
Keine „preprocessor macros“ verwenden 
Wir bitten darum weder #if, #else, #endif noch #expand zu verwenden. Es gibt einige Einwände gegen diese Vorgehensweise, aber hauptsächlich geht es darum, dass die lokalisierte Datei mit Standards harmonieren solte und nicht erst durch Compilierer umgewandelt werden muss. Wenn Ihre lokalisierten Dateien mit kompiliert werden müssen, so kontaktieren Sie vorher bitte l10n@. In den meisten Fällen kann der zu kompilierende Code einfach in den Code des Inhalts eingesetzt und unterschiedliche Übersetzungsschlüssel (key-value-pairs) referenziert werden.
Eine gute „source directory“ Struktur verwenden 
Legen Sie die lokalisierbaren Dateien am richtigen Ort ab. Das Hinzufügen neuer Toplevel-Verzeichnisse ist ein Kompromiss zwischen Modulbesitz im cvsroot repository und der Einfachheit der Lokalisierung.
Eine gute „chrome directory“ Struktur verwenden
Für ein bestimmtes Modul mod, wurde der Zielpfad jar:ab-CD.jar!/locale/ab-CD/mod/foo.dtd getestet und hat sich als ein guter Ort für Dateien, die in chrome://mod/locale/foo.dtd verlinkt werden, herausgestellt. Wird diese Verzeichnisstruktur verwendet, wird der Lokalisierungsprozess ohne den Quellcode vereinfacht und wird vor allem  Autoren von Erweiterungen empfohlen. Ein JAR Manifest kann das noch vereinfachen.
+
+

l10n impact

+

Bei geschlossenen Trees, gibt es die Regel keine l10n-impact Veränderungen einzureichen. Was bedeutet das? l10n-impact ist

+ +

{{ languages( { "en": "en/Writing_localizable_code", "es": "es/Escribir_código_localizable" ,"fr": "fr/\u00c9criture_de_code_localisable" } ) }}

diff --git a/files/de/lokalisierung/index.html b/files/de/lokalisierung/index.html new file mode 100644 index 0000000000..91b5063380 --- /dev/null +++ b/files/de/lokalisierung/index.html @@ -0,0 +1,55 @@ +--- +title: Lokalisierung +slug: Lokalisierung +tags: + - Lokalisierung +translation_of: Glossary/Localization +--- +

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

Alle anzeigen...

+ 		+

Community

+ +

Verwandte Themen

+
+
+ Erweiterungen, XUL
+
+

alle anzeigen...

+
+

 

diff --git a/files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html b/files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html new file mode 100644 index 0000000000..7c5e17ddfc --- /dev/null +++ b/files/de/lokalisierung_von_erweiterungsbeschreibungen/index.html @@ -0,0 +1,88 @@ +--- +title: Lokalisierung von Erweiterungsbeschreibungen +slug: Lokalisierung_von_Erweiterungsbeschreibungen +tags: + - Erweiterungen + - Lokalisierung +translation_of: Mozilla/Localization/Localizing_extension_descriptions +--- +

Lokalisierung in Gecko 1.9

+

{{ Gecko_minversion_header(1.9) }} {{ Fx_minversion_header(3) }}

+

Gecko 1.9 beinhaltet eine neue, verbesserte Methode, um Add-on Beschreibungen und andere Metadaten zu lokalisieren. Die verschiedenen Beschreibungen können jetzt in der install.rdf Datei durch die em:localized Eigenschaften angegeben werden, wovon jede mindestens eine em:locale Eigenschaft besitzt, die die Sprache angibt. Zusätzlich können noch Name und Beschreibung der Erweiterung angegeben werden. Das folgende Beispiel demonstriert dies (die anderen Manifest-Eigenschaften wurden der Einfachheit halber weggelassen):

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>TabSidebar@blueprintit.co.uk</em:id>
+    <em:localized>
+      <Description>
+        <em:locale>de-DE</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Zeigt in einer Sidebar Vorschaubilder der Inhalte aller offenen Tabs an.</em:description>
+      </Description>
+    </em:localized>
+    <em:localized>
+      <Description>
+        <em:locale>es-ES</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Muestra una vista previa de sus pestañas en su panel lateral.</em:description>
+      </Description>
+    </em:localized>
+    <em:localized>
+      <Description>
+        <em:locale>nl-NL</em:locale>
+        <em:name>Tab Sidebar</em:name>
+        <em:description>Laat voorbeeldweergaven van uw tabbladen in de zijbalk zien.</em:description>
+      </Description>
+    </em:localized>
+    <em:name>Tab Sidebar</em:name>
+    <em:description>Displays previews of your tabs in your sidebar.</em:description>
+  </Description>
+</RDF>
+
+

Alle unten erwähnten Metadaten können auf diese Weise lokalisiert werden. Die Informationen zur Lokalisierung, die durch die em:localized Eigenschaft gegeben sind, können durch ein Set an lokalisierten Einstellungen überschrieben werden. Mehr dazu weiter unten.

+

Das Verfahren zur Auswahl der em:localized Eigenschaft einer speziellen Sprache lautet wie folgt:

+
    +
  1. Wenn eine Eigenschaft mit einem em:locale existiert, die zu der eingestellten Sprache passt, dann wird diese verwendet.
    2. +
  2. Wenn es ungenaue Treffer gibt, dann wird derjenige verwendet, der die meisten Teiltreffer aufweist, sprich Teile, die durch einen Bindestrich getrennt sind (z. B. würde »es« einen Treffer für »es-ES« ergeben und umgekehrt).
    3. +
  3. Falls es mehr als eine Sprachumgebung mit der gleichen Anzahl an Teiltreffern gibt, dann wird die allgemeinste verwendet (z. B. wird »en« gegenüber »en-GB« bevorzugt, falls nach »en-US« gesucht wird).
    4. +
+

Zunächst wird nach einer Übersetzung in der aktuellen Anwendungssprache gesucht. Falls keine Übersetzung existiert, wird nach »en-US« gesucht.

+

Falls weder eine Einstellung gesetzt ist, noch eine passende em:localized Eigenschaft für die aktuelle Spracheinstellung oder en-US existiert, dann werden direkt die Eigenschaften aus dem Installationsmanifest verwendet, da diese für Gecko 1.9 immer verwendet wurden.

+

Lokalisierung vor Gecko 1.9

+

Vor Gecko 1.9 mussten Add-on Entwickler ein spezielles Verfahren beachten, um lokalisierte Beschreibungen für Add-on unterstützende sowie Toolkit basierte Anwendungen (wie Firefox oder Thunderbird) zu definieren.

+ +

Lokalisierbare Zeichenketten

+

Die folgenden Add-on Metadaten können auf diese Weise übersetzt werden:

+ +

Lokalisierbare Listen

+

In Fällen, in denen mehrere Werte existieren können, wird ein numerischer Index an das Ende des Namens der Eigenschaft angehängt:

+
extensions.ERWEITERUNGS_ID.contributor.1=LOKALISIERTER_NAME_DES_ERSTEN_MITWIRKENDEN
+extensions.ERWEITERUNGS_ID.contributor.2=LOKALISIERTER_NAME_DES_ZWEITEN_MITWIRKENDEN
+extensions.ERWEITERUNGS_ID.contributor.3=LOKALISIERTER_NAME_DES_DRITTEN_MITWIRKENDEN
+
+pref("extensions.ERWEITERUNGS_ID.contributor.1", "PFAD_ZUR_LOKALISATIONS_DATEI");
+pref("extensions.ERWEITERUNGS_ID.contributor.2", "PFAD_ZUR_LOKALISATIONS_DATEI");
+pref("extensions.ERWEITERUNGS_ID.contributor.3", "PFAD_ZUR_LOKALISATIONS_DATEI");
+
+

Die folgenden Add-on Metadaten können auf diese Weise übersetzt werden:

+ diff --git a/files/de/making_sure_your_theme_works_with_rtl_locales/index.html b/files/de/making_sure_your_theme_works_with_rtl_locales/index.html new file mode 100644 index 0000000000..0852b2e1f5 --- /dev/null +++ b/files/de/making_sure_your_theme_works_with_rtl_locales/index.html @@ -0,0 +1,79 @@ +--- +title: Making sure your theme works with RTL locales +slug: Making_Sure_Your_Theme_Works_with_RTL_Locales +translation_of: Archive/Themes/Making_sure_your_theme_works_with_RTL_locales +--- +

Some languages are written from right to left. Of the languages Firefox and Thunderbird are shipped in, that includes Arabic and Hebrew, with Persian available as beta, for a total population in excess of 100 million potential users. The important thing to understand about these locales, is that the entire interface is mirrored right-to-left. That means that text that had a left margin will have a right margin instead (or -moz-margin-start), arrows that pointed right will have to point left and vice versa, and so on.

+
+ A screenshot of Firefox 2 in Hebrew
+ A screenshot of Firefox 2 in Hebrew
+

What you need to do

+

At this stage you might ask yourself, "How would I know what language is my theme installed on? Should I make a special theme for these locales?" Don't despair: making a theme RTL-compatible is fairly easy!

+

Gecko 1.9.2 and later

+

Gecko 1.9.2 introduced the :-moz-locale-dir CSS pseudoclass, which matches based on whether the user interface is being rendered left-to-right or right-to-left:

+ +

Example

+
toolbar[iconsize="large"][mode="icons"] #back-button {
+  -moz-image-region: rect(0px 396px 34px 360px);
+}
+
+toolbar[iconsize="large"][mode="icons"] #back-button:-moz-locale-dir(rtl) {
+  -moz-image-region: rect(0px 516px 34px 480px);
+}
+
+

This specifies the default, left-to-right version of the button, then offers an override if the user's interface is being rendered in right-to-left mode.

+

Gecko 1.9.1 (Firefox 3.5) and earlier

+

The chromedir attribute

+

Firefox, Thunderbird and SeaMonkey expose an attribute named chromedir on certain elements. All you have to do is add CSS rules to your theme that test for the value of this attribute, and use that to apply any RTL-specific rules that you may have. That's how the default theme works, so you can use it as an example.

+
toolbar[iconsize="large"][mode="icons"] #back-button {
+  -moz-image-region: rect(0px 398px 34px 360px);
+}
+
+toolbar[iconsize="large"][mode="icons"] #back-button[chromedir="rtl"] {
+  -moz-image-region: rect(0px 516px 34px 478px);
+}
+
+

This way, if chromedir is "rtl", the second rule will override the first, and the theme will work in RTL.

+

Note that not all elements will have the chromedir attribute, so you may need to refer to an ancestor element that does. For example:

+
/* We want to apply a RTL rule to #c; neither it nor its
+ * parent element #b has a chromedir attribute, but its
+ * grandparent element #a does.
+ */
+
+#a > #b > #c {
+  /* normal rules */
+}
+
+#a[chromedir="rtl"] > #b > #c {
+  /* RTL rules */
+}
+
+

Tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images. Instead, just use the opposite arrow when in RTL context.

+

Using start/end rules instead of left/right rules

+

Directions are mirrored in RTL mode, so left becomes right and right becomes left. As a result, you almost never want to use left/right rules for paddings, borders, and margins. Instead, you should use the following start/end rules instead to ensure RTL compatibility:

+ +
#urlbar-search-splitter {
+  min-width: 8px;
+  -moz-margin-start: -4px;
+  border: none;
+  background: transparent;
+}
+

Testing your theme

+

Testing your theme for RTL compatibility is easy, and you do not even have to go through the hassle of downloading a RTL locale. The Force RTL extension enables you to switch the interface of Firefox from LTR to RTL and the other way around dynamically by toggling a menu item.

+

{{ languages( { "ja": "ja/Making_Sure_Your_Theme_Works_with_RTL_Locales" } ) }}

diff --git a/files/de/mdn/community/bleibe_auf_dem_laufenden/index.html b/files/de/mdn/community/bleibe_auf_dem_laufenden/index.html new file mode 100644 index 0000000000..cd5c500e41 --- /dev/null +++ b/files/de/mdn/community/bleibe_auf_dem_laufenden/index.html @@ -0,0 +1,42 @@ +--- +title: Bleibe auf dem Laufenden +slug: MDN/Community/Bleibe_auf_dem_Laufenden +tags: + - Anfänger + - Community + - Guide + - MDN-Meta +translation_of: MDN/Community/Whats_happening +--- +
{{MDNSidebar}}

MDN wird von der Mozilla Developer Network Community (englisch) erstellt. Hier sind ein paar Kanäle, über die wir Informationen darüber teilen, an was wir arbeiten.

+ +

Blogs

+ +
+
Mozilla Hacks (englisch)
+
Neuigkeiten und ausführliche Berichte zu Web- und Mozilla-Technologien und -Features.
+
Entwickler einbinden (englisch)
+
Förderung der Aktivitäten und Diskussionen zwischen der an MDN beteiligten Community bei Mozilla.
+
+ +

Streams

+ + + +

Statusboards und Dashboards

+ +

Das MDN-Dokumentationsteam unterhält ein Trello board (englisch), auf dem unsere Projekte verwaltet werden. Dieses Board ist nur lesbar, erlaubt es dir jedoch, zu sehen, an was gearbeitet wird und was wir hoffen, bald angehen zu können, und ermöglicht es dir, herauszufinden, wo du helfen kannst. Dieser Artikel erklärt, wie dieses Board verwendet wird.

+ +

Außerdem solltest du einen Blick auf die Dokumentationsstatus-Seiten werfen, um zu sehen, was aktuell in Bezug zu allen MDN-Inhalten passiert. Du kannst sehen, welche Artikel geschrieben oder aktualisiert werden müssen, welche Themen die meiste Hilfe benötigen und viel, viel mehr.

+ +

MDN-Meetings

+ +

Es gibt einige regelmäßige Meetings, um den Fortschritt verschiedener MDN-Projekte und -Prozesse zu verfolgen und zu teilen. Diese sind auf der MDN-Meetings-Wikiseite (englisch) beschrieben.

+ +

Um einen allgemeinen Sinn dafür zu bekommen, was aktuell passiert, sollte man am MDN-Community-Meeting teilnehmen, welches alle zwei Wochen mittwochs, 10:00 US-Pazifikzeit (UTC-0800 Oktober-März, UTC-0700 März-Oktober) im #mdn IRC-Kanal stattfindet. Siehe die MDN-Community-Meetings-Wikiseite für Termine und Notizen zu vergangenen Meetings.

+ +

Der Kalender für öffentliche MDN-Events (englisch) beinhaltet MDN-Community-Meetings, Docsprints und andere MDN-bezogene Ereignisse. Falls du ein Meeting siehst, das im "mdn"-Kanal unseres Vidyo-Videokonferenzsystems stattfindet, kannst du an der Konversation im Web teilnehmen (englisch).

diff --git a/files/de/mdn/community/index.html b/files/de/mdn/community/index.html new file mode 100644 index 0000000000..f8df9274e7 --- /dev/null +++ b/files/de/mdn/community/index.html @@ -0,0 +1,80 @@ +--- +title: Tritt der MDN-Gemeinschaft bei +slug: MDN/Community +tags: + - Community + - Guide + - Landing + - MDN Meta + - Meeting +translation_of: MDN/Community +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-de/docs/MDN")}}
+ +

MDN ist mehr als ein Wiki: Es ist eine Gemeinschaft von Entwicklern, die zusammenarbeiten um MDN zu einer eigenständigen Ressource für Entwickler, die openWeb-Technologien nutzen, zu machen. Die "Arbeit" wird auf der  MDN-Seite gemacht, aber die "Community" funktioniert auch (asynchron) durch Diskussionen und (synchron) durch Online-Chats.

+ +

Wir würden uns freuen, wenn Du beim MDN mitmachen würdest, aber noch mehr, wenn Du bei der MDN-Community mitmachen würdest. Hierunter kannst Du lesen, wie man sich in wenigen Schritten anmeldet:

+ +
    +
  1. Erstelle ein MDN-Konto.
    2. +
  2. Abonniere die dev-mdc Verteilerliste.
    3. +
  3. Gehe zu IRC.
    4. +
+ +

Erstelle ein MDN-Konto

+ +

{{page("/en-US/docs/Project:MDN/Contributing/Getting_started", "Creating an account") }}

+ +

Unseren Verteiler-Listen beitreten

+ +

Zum Informationsaustausch und für Diskussionen hat Mozilla mehrere nützliche Mailinglisten. Insbesondere für MDN sind das:

+ +
+
dev-mdc
+
In dieser Liste diskutieren wir über die Dokumentation auf MDN. Wir sprechen über Änderungen und Verbesserungen die wir gemacht haben und wir klären, wer welche Inhalte bearbeiten möchte. Wir empfehlen dringend, dass Du dieser Liste beitrittst, wenn Du Dich ernsthaft für die Dokumentation auf MDN interessierst!
+
dev-mdn
+
In dieser Liste führen wir Diskussionen über die Entwicklung der MDN zugrunde liegenden Plattform Kuma. Wenn Du neugierig auf die Entwicklung und Arbeit hinter den Kulissen bist und am Entscheidungsprozess über die Plattform beteiligt sein möchtest, oder an Verbesserungen für die Plattform arbeiten willst, solltest Du Dich auf jeden Fall in dieser Liste engagieren.
+
mdn-drivers
+
Diese Mailingliste wird verwendet, um über die Prioritäten für die MDN-Entwicklung zu entscheiden. Es dient in der Regel dazu zu diskutieren, was weitergehend bearbeitet werden soll und gehen wir das Entwicklungsteam Aufmerksamkeit zu erregen, wenn ein ernstes Problem muss behoben werden, nachdem wir einen Bug für das Thema eingereicht haben.
+
+ +

Es gibt auch ein paar Listen speziell für MDN Lokalisierung Gemeinschaften. Wenn Ihre Gemeinde sehr groß und aktiv ist, erhalten Sie wahrscheinlich eine Liste erstellt für Ihre Gemeinde; Fragen Sie uns und wir schauen hinein. Derzeit haben diese Sprachen Listen : Spanish, Japanese, und Portuguese.

+ +

Warum "Dev-Mdc"? In der Vergangenheit wurde dies als "Mozilla Developer Center" oder MDC bezeichnet. Die Mailing-Liste stammt aus jener Zeit, so ist es Dev-Mdc. Es gibt auch eine Dev-Mdn Mailing-Liste für die Diskussion ist über die Entwicklung der Kuma-Plattform, die MDN läuft auf. Du bist herzlich eingeladen, die auch, aber es ist nicht notwendig, wenn Sie nur in MDN Inhalt interessiert.

+ +

In den IRC gehen

+ +

Der Internet Relay Chat (IRC) ist unserer bevorzugter Weg um uns täglich abzusprechen und in Echtzeit Diskussionen unter Community-Mitgliedern zu führen. Wir nutzen verschiedene Kanäle um Diskussionen zu führen, die mit dem MDN zu tun haben.

+ +
+
#devmo
+
Internet Relay Chat (IRC) ist unsere bevorzugte Methode für die täglichen Chat und Diskussionen unter den Community-Mitgliedern in Echtzeit. Wir verwenden ein paar Kanäle für Diskussionen im Zusammenhang mit MDN.
+
#mdn
+
MDN ist mehr als nur die Dokumentation, und aus diesem Grund haben wir einen Kanal für das Gespräch über die größeren MDN-Projekts. Das ist #mdn.
+
#mdndev
+
dieses Kanals ist unsere primäre Kanal für die Erörterung des Dokumentation Inhalts selbst. Wir sprechen über das Schreiben, Organisation von Inhalten, und so weiter. Wir haben auch "Wasser-Kühler" Gespräche hier – es ist ein Weg, unsere Community in Kontakt zu bleiben und einfach nur rumhängen kann.
+
+ +

Diese Kanäle sind am ehesten in Nordamerika unter der Woche aktiv sein.

+ +

Erfahre mehr über IRC, wenn Du damit nicht vertraut bist. ChatZilla ist ein IRC-Client implementiert als Firefox Add-on, das macht es schnell und einfach zu installieren und starten Sie mit it.

+ +

Nimm an unseren zweiwöchentlichen Besprechungen (und anderen Veranstaltungen) teil

+ +

Jede zweite Woche, hält die MDN Gemeinschaft ein IRC-basierten Live Meeting Notizen austauschen, reden, was wir getan haben und klären wir für die nächsten zwei Wochen zu tun möchten. Wir sprechen auch über Entwicklungspläne für die MDN-Plattform selbst und oft Updates über neue und kommende Features der Website erhalten. Dies sind lockere, lustige treffen, und jeder ist herzlich willkommen.
+
+ Auf der Seite MDN Gemeindeversammlungen auf der Mozilla-Wiki für Details über den Zeitplan sowie die Tagesordnungen und Notizen für vergangene und geplante Veranstaltungen.

+ +

Auf der Seite MDN Community Meetings auf der Mozilla-Wiki für Details über den Zeitplan sowie die Tagesordnungen und Notizen für vergangene und geplante Veranstaltungen.

+ +

Die MDN Events calendar für diese und andere Meetings, Doc Sprints und anderen Veranstaltungen zu sehen.

+ +

Nächste Schritte

+ + diff --git a/files/de/mdn/contribute/feedback/index.html b/files/de/mdn/contribute/feedback/index.html new file mode 100644 index 0000000000..fcc2560b5d --- /dev/null +++ b/files/de/mdn/contribute/feedback/index.html @@ -0,0 +1,51 @@ +--- +title: Feedback zu MDN senden +slug: MDN/Contribute/Feedback +tags: + - Dokumentation + - Guide + - MDN + - MDN-Meta +translation_of: 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/getting_started/index.html b/files/de/mdn/contribute/getting_started/index.html new file mode 100644 index 0000000000..a1f27d9d62 --- /dev/null +++ b/files/de/mdn/contribute/getting_started/index.html @@ -0,0 +1,125 @@ +--- +title: Erste Schritte auf MDN +slug: MDN/Contribute/Getting_started +tags: + - Documentation + - Getting Started + - Guide + - MDN + - MDN Project + - New Contributors +translation_of: 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/contribute/howto/convert_code_samples_to_be_live/index.html b/files/de/mdn/contribute/howto/convert_code_samples_to_be_live/index.html new file mode 100644 index 0000000000..4c4a0a283e --- /dev/null +++ b/files/de/mdn/contribute/howto/convert_code_samples_to_be_live/index.html @@ -0,0 +1,28 @@ +--- +title: How to convert code samples to be "live" +slug: MDN/Contribute/Howto/Convert_code_samples_to_be_live +translation_of: 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.

+ + + +
    +
  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/contribute/howto/do_a_technical_review/index.html b/files/de/mdn/contribute/howto/do_a_technical_review/index.html new file mode 100644 index 0000000000..0f52932293 --- /dev/null +++ b/files/de/mdn/contribute/howto/do_a_technical_review/index.html @@ -0,0 +1,54 @@ +--- +title: Wie eine technische Überprüfung gemacht wird +slug: MDN/Contribute/Howto/Do_a_technical_review +translation_of: MDN/Contribute/Howto/Do_a_technical_review +--- +
{{MDNSidebar}}

Technische Überprüfungen beinhalten die Prüfung der technischen Genauigkeit und Vollständigkeit eines Artikels und gegebenenfalls dessen Korrektur. Falls ein Autor eines Artikels will, dass jemand anderes den technischen Inhalt eines Artikels überprüft, so kann er das Kontrollkästchen "Technisch – Quelltext-Ausschnitte, APIs oder Technologien" während der Bearbeitung anhaken. Oftmals kontaktiert der Autor eine bestimmte Person, damit diese die technische Überprüfung durchführt, jedoch kann jeder mit technischer Expertise im jeweiligen Bereich diese durchführen.

+ +

Dieser Artikel beschreibt, wie man bei einer technischen Überprüfung vorgeht, und hilft somit, sicherzustellen, dass die Inhalte auf MDN korrekt sind.

+ + + + + + + + + + + + + + + + + + + + +
Was ist die Aufgabe?Überprüfen und korrigieren von Artikeln auf technische Genauigkeit und Vollständigkeit
Wo muss sie gemacht werden?Innerhalb bestimmter Artikel, die markiert wurden, dass sie eine technische Überprüfung benötigen.
Was muss ich wissen, um die Aufgabe zu erledigen? +
    +
  • Expertenwissen im Bereich, den der Artikel, den du überprüfst, umfasst.
    • +
  • Fähigkeit, einen Wikiartikel auf MDN zu bearbeiten.
    • +
+
Was sind die auszuführenden Schritte? +
    +
  1. Wähle einen Artikel zur Überprüfung: +
      +
    1. Schau dir die Liste der Artikel, die technische Überprüfung benötigen, an. Diese listet alle Seiten auf, für die eine redaktionelle Überprüfung angefordert wurde.
      2. +
    2. Wähle eine Seite, mit dessen Thema du dich auskennst.
      3. +
    3. Klicke auf den Artikellink, um die Seite zu laden.
      4. +
    +
    2. +
  2. Sobald die Seite geladen ist, klicke auf die BEARBEITEN Schaltfläche oben auf der Seite; dies startet den MDN Editor. Zögere nicht, zu einer anderen Seite zu wechseln, falls dir die erste nicht zusagt.
    3. +
  3. Während des Lesens des Artikels korrigiere alle technischen Informationen, die fehlerhaft sind, und füge wichtige Informationen hinzu, die fehlen.
    4. +
  4. Gib einen Kommentar zur Version des Artikels ein, der beschreibt, was du getan hast; beispielsweise 'Technische Überprüfung durchgeführt.' Falls du Informationen korrigiert hast, füge dies deinem Kommetar hinzu, beispielsweise 'Technische Überprüfung: Parameterbeschreibungen korrigiert.'
    5. +
  5. Klicke auf die ÄNDERUNGEN SPEICHERN Schaltfläche.
    6. +
  6. Sobald der korrigierte Artikel auf dem Bildschirm erscheint nachdem der Editor geschlossen wurde, setze einen Haken bei Technisch (unterhalb Die folgenden Überprüfungen wurden angefordert) und klicke auf ÜBERPRÜFUNG ABSENDEN.
    7. +
  7. +

    Fertig!

    +
    8. +
+
+ +

 

diff --git a/files/de/mdn/contribute/howto/do_an_editorial_review/index.html b/files/de/mdn/contribute/howto/do_an_editorial_review/index.html new file mode 100644 index 0000000000..2c8df95aa6 --- /dev/null +++ b/files/de/mdn/contribute/howto/do_an_editorial_review/index.html @@ -0,0 +1,49 @@ +--- +title: Wie eine redaktionelle Überprüfung gemacht wird +slug: MDN/Contribute/Howto/Do_an_editorial_review +translation_of: MDN/Contribute/Howto/Do_an_editorial_review +--- +
{{MDNSidebar}}

Redaktionelle Überprüfungen beinhalten die Korrigierung von Tipp-, Rechtschreib-, Grammatik- oder Benutzungsfehlern - also ausdrücklich keine inhaltliche Zensur - in einem Artikel. Nicht alle Mitwirkenden sind Sprachexperten, haben jedoch durch ihr Wissen äußerst nützliche Artikel beigetragen, welche korrekturgelesen werden müssen. Dies findet in der redaktionellen Überprüfung statt.

+ +

Dieser Artikel beschreibt, wie man bei einer redaktionellen Überprüfung vorgeht, und hilft somit, sicherzustellen, dass die Inhalte auf MDN korrekt sind.

+ + + + + + + + + + + + + + + + + + + + +
Was ist die Aufgabe?Korrekturlesen von Artikeln, die markiert wurden, dass sie eine redaktionelle Überprüfung benötigen.
Wo muss sie gemacht werden?Innerhalb bestimmter Artikel, die markiert wurden, dass sie eine redaktionelle Überprüfung benötigen.
Was muss ich wissen, um die Aufgabe zu erledigen?Du benötigst gute Grammatik- und Rechtschreibkenntnisse in Deutsch.
Was sind die auszuführenden Schritte? +
    +
  1. Wähle einen Artikel zur Überprüfung: +
      +
    1. Schau dir die Liste der Artikel, die redaktionelle Überprüfung benötigen, an. Diese listet alle Seiten auf, für die eine redaktionelle Überprüfung angefordert wurde.
      2. +
    2. Wähle eine Seite, die eine englische Überschrift hat und deren Pfad nicht mit Template: beginnt.
      3. +
    3. Klicke auf den Artikellink, um die Seite zu laden.
      4. +
    +
    2. +
  2. Sobald die Seite geladen ist, klicke auf die BEARBEITEN Schaltfläche oben auf der Seite; dies startet den MDN Editor. Zögere nicht, zu einer anderen Seite zu wechseln, falls dir die erste nicht zusagt.
    3. +
  3. Korrigiere alle Tipp-, Rechtschreib- und Grammatik- oder Benutzungsfehler, die du siehst.
    4. +
  4. Gib einen Kommentar zur Version des Artikels ein; beispielsweise 'Redaktionelle Überprüfung: Tipp-, Grammatik- und Rechtschreibfehler korrigiert.'
    5. +
  5. Klicke auf die ÄNDERUNGEN SPEICHERN Schaltfläche.
    6. +
  6. Sobald der korrigierte Artikel auf dem Bildschirm erscheint nachdem der Editor geschlossen wurde, setze einen Haken bei Redaktionell (unterhalb Die folgenden Überprüfungen wurden angefordert) und klicke auf ÜBERPRÜFUNG ABSENDEN.
    7. +
  7. +

    Fertig!

    +
    8. +
+
+ +

 

diff --git a/files/de/mdn/contribute/howto/document_a_css_property/index.html b/files/de/mdn/contribute/howto/document_a_css_property/index.html new file mode 100644 index 0000000000..3270d75064 --- /dev/null +++ b/files/de/mdn/contribute/howto/document_a_css_property/index.html @@ -0,0 +1,89 @@ +--- +title: How to document a CSS property +slug: MDN/Contribute/Howto/Document_a_CSS_property +tags: + - CSS + - Guide + - Howto + - MDN Meta + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Howto/Document_a_CSS_property +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

As the CSS standards evolve, new properties are always being added. The MDN CSS Reference needs to be kept up to date with these developments. This document gives step-by-step instructions for creating a CSS property reference page.

+ +

Each CSS property reference page follows the same structure. This helps readers find information more easily, especially once they are familiar with the standard reference page format.

+ +

Step 1 — Decide which property to document

+ +

First, you will need to decide which property to document. The CSS Documentation status page lists properties that need to be documented. For details about the CSS property you will need to find a relevant specification for it (e.g., a W3C specification, a Mozilla Wiki page, or a bug report for a non-standard property used in rendering engines like Gecko or Blink).

+ +
+

Pro tips:

+ + +
+ +

Step 2 — Check the database of CSS properties

+ +

Several characteristics of a CSS property, such as its syntax or if it can be animated, are mentioned in several pages and are therefore stored in an ad-hoc database. Macros that you'll use on the page need information about the property that is stored there, so start by checking that this information is there.

+ +

If not, contact an admin or a power user, either in the MDN Web Docs (Matrix) chat room, or, if nobody is available, by filing a bug.

+ +

Step 3 — Creating the CSS property page

+ +

Preparations finished! Now we can add the actual CSS property page. The easiest way to create a new CSS property page is to copy the content of an existing page and to edit it. We will go through the different steps now.

+ +
+

Cloning a page is currently broken on MDN. That's why we need to go through these somewhat more complex steps. Please vote for ({{bug(870691)}}).

+
+ +
    +
  1. Clone the following page, set the title to your-property (without capitals) and the slug to Web/CSS/your-property.
    2. +
  2. Change the summary to fit, but keep it starting the same way : "The your-property CSS property…". Explain briefly what this property is for.
    3. +
  3. If the property is not experimental, remove the \{{SeeCompatTable}} macro. The purpose of this macro is to alert developers to the possibility that the feature may not yet have consistent support across browsers, and may change in the future as its specificaton evolves. Deciding whether a feature is experimental is a matter of judgement, and should include factors like: +
      +
    • Is the feature supported by several browsers?
      • +
    • Is the feature prefixed or behind a preference?
      • +
    • Is there any reason to think that the implementation of the feature will change in the future?
      • +
    +
    4. +
  4. Replace the parameter of the \{{cssinfo("animation-name")}} macro by the name of the CSS property you are documenting. This will allow you to build the summary box using the data you entered in step 2.
    5. +
  5. Replace the example of the syntax by relevant ones. Keep them very simple and don't forget that a lot of people don't understand a formal syntax so it needs to be simple and exhaustive. Keep the inherit, initial, and unset keywords examples at the end. It reminds users that these are valid values, too.
    6. +
  6. Under the chapter Values, put the meaning of each value. If it is a keyword, don't forget to mark it as code (select it and press CTRL-O). Each description should start by "Is a" followed by the type of the value, or indicating it is a keyword.
    7. +
  7. Clear the Examples chapter, we will add them at the end!
    8. +
  8. Update the specification table. For information about how to do it, read this tutorial.
    9. +
  9. Update the compatibility information. For information about how to do it, read this tutorial.
    10. +
  10. Update the See also section with relevant links. Do not link to specs here and usually link to internal documents. External documents are welcome, but only if they bring really good information. There are spam or SEO links often, so don't worry if external links are removed sometimes. Just start the discussion if you still find it useful and want to see it back.
    11. +
  11. Add the relevant tags: you need to add CSS, CSS Property, and Reference. You also need to add Experimental or Non-standard if this is the case. Finally you also need to add a CSS XYZ tag, where XYZ stands for the group of CSS properties it belongs to. It is often the spec short name. All these tags are used to generate quicklinks and other niceties.
    12. +
+ +

At any point, you can save by hitting the SAVE button. You can continue to edit right along. If you haven't saved your page until now, please do so! :-)

+ +

The last step is to add Examples. To do that follow this tutorial about live samples. Don't forget that we are in a document explaining one single property: you need to add examples that show how this property is working in isolation, not how the whole specification is used. That means, examples for list-style-type will show what the different values generate, but not how to combine it with other property, pseudo-classes or pseudo-elements to generate nice effects; tutorials and guide can be written to show more.

+ +

Step 4 — Getting a review

+ +

You have documented your CSS property! Congratulations!

+ +

In order to have a good quality and consistency throughout the MDN CSS reference, it is good practice to request a review. Just click on the checkbox at the bottom of the article (in edit mode), and, optional, if you want to have a more personal review helping you to improve editorial skills, ask for it on the MDN forum.

+ +

Step 5 — Integrating the new page in the MDN

+ +

Now that your page is created, you want it to be found by the readers. Adding tags helped about this already as it allowed it to appear in the quicklinks to related CSS pages. Also you want it to appear on the CSS index page. If the newly documented property is on the standard track and at least one major browser is implementing it, it deserves to be listed this. Only administrator can add it there, so contact the CSS driver on IRC (currently at #mdn ping teoli) or file a documentation bug requesting it.

+ +

Also, if the property is implemented by Firefox, you need to check that it is listed, and linked! in the correct Firefox for developers MDN page. The new CSS property is likely already listed in the HTML section, just be sure that its name links back to your newly created page.

+ +

Contact us

+ + diff --git a/files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html b/files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html new file mode 100644 index 0000000000..d0f017a0f1 --- /dev/null +++ b/files/de/mdn/contribute/howto/erstellung_eines_mdn_profils/index.html @@ -0,0 +1,50 @@ +--- +title: Anleitung zur Erstellung eines MDN Profils +slug: MDN/Contribute/Howto/ERstellung_eines_MDN_Profils +tags: + - Anfänger + - Einführung +translation_of: MDN/Contribute/Howto/Create_an_MDN_account +--- +
{{MDNSidebar}}

Um Änderungen an den Inhalten von MDN vornehmen zu können, brauchst du ein MDN - Profil (egal ob du Seiten ändern oder eine Demo hinzufügen willst). Aber keine Angst, du brauchst kein Profil wenn du in MDN lesen oder suchen  willst.

+ +

Diese kleine Anleitung wird dir helfen, dein MDN Profil selbst zu erstellen:

+ +

Warum braucht MDN deine eMail adresse ?   Die eMail Adresse wird verwendet um den Account wieder herzustellen

+ +
Warum braucht MDN deine E-Mail-Adresse ?
+
+Die E-Mail-Adresse wird verwendet, um den Account wiederherzustellen.                                                                                                                          Zusätzlich hast du die Möglichkeit, Benachrichtigungen zu erhalten (wie z.B. wenn sich bestimmte Seiten ändern). Wenn Du z.B. die Option "Teilnehmen am Beta Test Team" gewählt hast, erhälst du E-Mails über neue Funktionen, die getestet werden können.
+
+Deine E-Mail-Adresse wird in MDN nie und ausschließlich in Übereinstimmung mit unserer Datenschutzrichtlinie benutzt.
+ +
    +
  1. In der rechten oberen Ecke jeder Seite befindet sich die Schaltfläche Anmelden mit. Gehe mit Deinem Mausezeiger dorthin und du bekommst eine Liste von Anmeldediensten für MDN angezeigt.
    2. +
  2. Wähle einen Dienst z.B. Anmelden mit Persona. Es öffnet sich ein neues Fenster mit dem Persona Login.
    3. +
  3. Gib Deine E-Mail-Adresse ein, die Du für Dein neues Profil benutzen willst und drücke auf Weiter.
    4. +
  4. Der nächste Punkt ist anhängig davon, ob Du E-Mail-Adresse bereits für Persona benutzt. +
      +
    • Falls Sie bereits Persona nutzen, wird nach Ihrem existierenden Passwort gefragt. Geben Sie es ein und klicken Sie auf Fertig.
      • +
    • Falls dies nicht der Fall ist, wird Persona Sie darum bitten, ein neues Password zu erstellen. +
        +
      1. Geben Sie ihr Passwort zweimal ein und drücken Sie auf Fertig.
        2. +
      2. Überprüfen Sie ihren E-Mail Nachrichtenkorb auf eine Nachricht von no-reply@persona.org; Falls Sie die Nachricht nicht erhalten, kontrollieren Sie bitte ihren Spam-Filter.
        3. +
      3. Bestätigen Sie den Registrationslink in der Nachricht . Ihr Persona Profil wurde erstellt.
        4. +
      4. Wechseln Sie wieder zu dem Tab, oder Fenster, indem Sie mit der Registrierung bei MDN begannen.
        5. +
      +
      • +
    +
    5. +
  5. Sobald Sie sich bei Persona authentifiziert haben. öffnet sich die Neues Profil Seite von MDN.
    6. +
  6. Geben Sie einen Nutzernamen ein, um sich mit Ihren Profil zu verknüpfen und drücken Sie auf Neues Profil erstellen.
    7. +
+ +

Das war's! Sie haben jetzt einen MDN Account und könne sofort Seiten bearbeiten oder mit Tags versehen, oder Demos einreichen!

+ +

Auf jeder MDN Seite können Sie auf Ihren Namen klicken um ihr öffentliches Profil zu sehen. Dort können Sie auf "Bearbeiten" klicken um Ihr Profil zu ändern oder zu erweitern. Auch können Sie etwas über Ihre Intressen teilen, einen Twitter Account oder Blog hinzufügen, und so weiter.

+ +
+

Hinweis: Nutzernamen können keine Leerzeichen oder das "@" Symbol beinhalten. Bedenken Sie bitte, dass ihr Nutzername für die Öffentlichkeit sichtbar ist, um festzustellen, was sie schon alles geleistet haben!

+
+ +

 

diff --git a/files/de/mdn/contribute/howto/index.html b/files/de/mdn/contribute/howto/index.html new file mode 100644 index 0000000000..9b2c82cf9f --- /dev/null +++ b/files/de/mdn/contribute/howto/index.html @@ -0,0 +1,13 @@ +--- +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/howto/schlagw\303\266rter_f\303\274r_javascript_seiten/index.html" "b/files/de/mdn/contribute/howto/schlagw\303\266rter_f\303\274r_javascript_seiten/index.html" new file mode 100644 index 0000000000..42a1d25435 --- /dev/null +++ "b/files/de/mdn/contribute/howto/schlagw\303\266rter_f\303\274r_javascript_seiten/index.html" @@ -0,0 +1,81 @@ +--- +title: Wie man JavaScript bezogene Seiten mit Schlagworten versieht +slug: MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten +translation_of: MDN/Contribute/Howto/Tag_JavaScript_pages +--- +
{{MDNSidebar}}

Schlagwörter sind Metadaten, welche helfen den Inhalt einer Seite zusammenzufassen um unteranderem die Suche zu verbessern.

+ + + + + + + + + + + + + + + + +
Wo muss es gemacht werden?Auf bestimmten JavaScript bezogenen Seiten, welche keine Schlagwörter haben
Was muss du wissen um die Aufgabe zu erledigen? +
    +
  • JavaScript Grundkenntnisse, z.B. was eine Methode oder ein Attribut ist.
    • +
+
Welche Schritte müssen gemacht werden? +
    +
  1. Such dir eine Seite aus, welche du auf der oben verlinkten Liste findest.
    2. +
  2. Klicke auf den Artikel-Link um die Seite zu öffnen.
    3. +
  3. Sobald die Seite geladen ist kannst du auf den BEARBEITEN-Button oben rechts klicken, welcher den MDN-Editor öffnet.
    4. +
  4. Es sollte mindestens das Schlagwort JavaScript eingefügt werden. Folgend findest du weitere mögliche Schlagwörter die hinzugefügt werden können: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    SchlagwortWann es verwendet werden sollte
    MethodMethoden
    PropertyAttribute
    prototypePrototypen
    Objekttypen NameMethoden eines Objektes z.B.: String.fromCharCode sollte das Schlagwort "String" haben
    ECMAScript6 and ExperimentalFunktionen welche in einer neuen ECMAScript Version hinzugefügt wurden
    DeprecatedVeraltete Funktionen (Deren Verwendung nicht mehr empfohlen wird, dennoch noch möglich ist)
    ObsoleteObsolete Funktionen (Welche nicht mehr von neueren Browsern unterstützt werden)
    othersSiehe MDN Leitfaden zur sachgemäßen Seitenkennzeichnung für andere mögliche Schlagwörter
    +
    5. +
  5. Speichere mit einem kurzen Kommentar.
    6. +
  6. Du bist fertig!
    7. +
+
+ +

 

diff --git a/files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html b/files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html new file mode 100644 index 0000000000..8c30eb2dcb --- /dev/null +++ b/files/de/mdn/contribute/howto/set_the_summary_for_a_page/index.html @@ -0,0 +1,54 @@ +--- +title: Wie erstelle ich eine Zusammenfassung für eine Seite +slug: MDN/Contribute/Howto/Set_the_summary_for_a_page +tags: + - Beginner + - Guide +translation_of: MDN/Contribute/Howto/Set_the_summary_for_a_page +--- +
{{MDNSidebar}}

Sie können die Zusammenfassung einer Seite am MDN definieren, diese wird in verschiedenen Arten verwendet, einschließlich in Suchmaschinenergebnissen, auf anderen MDN Seiten wie als Themeneinführung, und in Tooltipps. Es sollte ein Text sein, welcher in Zusammenhang mit der Seite, als auch alleine Sinn macht.

+ +

Eine Zusammenfassung kann explizit für eine Seite definiert werden. Wenn sie nicht explizit definiert wird, so wird oft der erste Satz oder ähnliche benutzt, welche nicht immer die besten für diese Verwendung sind.

+ + + + + + + + + + + + + + + + + + + + +
Was ist die Aufgabe?Markieren Sie den Text in einer Seite, welcher als Zusammenfassung, auch in anderen Zusammenhängen,  verwendet werden soll; diese Aufgabe kann das Schreiben eines entsprechenden Texts beinhalten.
Wo muss es gemacht werden?Auf Seiten, welche keine oder keine gute Zusammenfassung haben.
Was müssen Sie wissen, um die Aufgabe zu erledigen?Fähigkeit den MDN Editor zu benutzen; gute Schreibkompetenz in Deutsch; genug Vertrautheit mit der Seite um eine gute Zusammenfassung schreiben zu können.
Welche Schritte sind zu unternehmen? +
    +
  1. Wählen Sie eine Seite aus, für welche die Zusammenfassung erstellt werden soll: +
      +
    1. Wählen Sie auf der MDN Dokumentationsstatus Seite unter der Kategorie Sections ein Thema über welches Sie etwas wissen (zum Beispiel: HTML).
      2. +
    2. Klicken Sie Pages auf der Dokumentationsstatus Seite, um eine Übersicht über alle Seiten in diesem Abschnitt zu bekommen; in der linken Spalte sehen Sie Links zu den Seiten, und in der Rechten Spalte sehen Sie die Schlüsselwörter und die Zusammenfassung.
      3. +
    3. Wählen Sie eine Seite aus, welche keine oder nur eine schlechte Zusammenfassung besitzt.
      4. +
    4. Klicken Sie auf den Link um auf die Seite zu gelangen.
      5. +
    +
    2. +
  2. Klicken Sie auf Edit um die Seite im MDN Editor zu öffnen.
    3. +
  3. Suchen Sie einen oder zwei Sätze, welche auch außerhalb der Seite als Zusammenfassung funktionieren. Wenn benötigt, bearbeiten Sie den existierenden Inhalt indem sie Sätze erzeugen, oder so verändern, dass sie eine gute Zusammenfassung ergeben.
    4. +
  4. Wählen Sie den Text der Zusammenfassung aus.
    5. +
  5. Wählen Sie im Styles Widget in der Editor Toolbar SEO Summary aus. (Im Seitenquelltext erzeugt das ein {{HTMLElement("span")}} Element mit class="seoSummary" um den ausgewählten Text.)
    6. +
  6. Speichern Sie Ihre Änderungen mit einem Revision Comment wie "Seitenzusammenfassung erstellt."
    7. +
+
+ +

 

+ +

 

+ +

 

diff --git a/files/de/mdn/contribute/howto/tag/index.html b/files/de/mdn/contribute/howto/tag/index.html new file mode 100644 index 0000000000..7fd597e80f --- /dev/null +++ b/files/de/mdn/contribute/howto/tag/index.html @@ -0,0 +1,429 @@ +--- +title: Leitfaden zum Setzen von Schlagwörtern +slug: MDN/Contribute/Howto/Tag +tags: + - Beginner + - Contribute + - Guide + - Howto + - Intro + - MDN Meta + - Tutorial +translation_of: 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:

+ +
+
{{Tag("Intro")}}
+
Der Artikel stellt Einführungs-Material zu einem Thema zur Verfügung. Theoretisch sollte jeder Technologie-Bereich nur ein "Intro" haben.
+
{{Tag("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).
+
{{Tag("Reference")}}
+
Der Artikel enthält Referenz-Material über ein API, ein Element, ein Attribut, ein Merkmal oder ähnliches.
+
{{Tag("Landing")}}
+
Diese Seite ist eine Einstiegsseite.
+
{{Tag("Guide")}}
+
Dieser Artikel ist eine Schritt-für-Schritt Anleitung oder ein Leitfaden.
+
{{Tag("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:

+ + + +

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:

+ + + +

API-Identifikation

+ +

In der API-Referenz sollte aus jedem Artikel hervorgehen, welchen Teil der API er abdeckt:

+ +
+
{{Tag("Interface")}}
+
Der Hauptartikel für ein Interface sollte dieses Schlagwort verwenden. Zum Beispiel: RTCPeerConnection.
+
{{Tag("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().
+
{{Tag("Property")}}
+
Jeder Artikel, der eine Eigenschaft von einem Interface beschreibt, benötigt dieses Schlagwort. Siehe zum Beispiel: RTCPeerConnection.connectionState().
+
{{Tag("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:

+ +
+
{{Tag("Read-only")}}
+
Nutzen Sie dieses Schlagwort für Referenzseiten, die eine Eigenschaft oder ein Attribut beschreiben, das einen Nur-Lese-Status hat.
+
{{Tag("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.
+
{{Tag("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.
+
{{Tag("Obsolete")}}
+
Die Technologie oder API gilt als veraltet und wurde aus allen, bzw. den meisten aktuellen Browsern entfernt (oder sie wird gerade aktiv entfernt).
+
{{Tag("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.
+
{{Tag("Needs Privileges")}}
+
Die API benötigt privilegierten Zugriff zu dem Gerät, auf dem der Code läuft.
+
{{Tag("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:

+ +
+
{{Tag("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.
+
{{Tag("Intermediate")}}
+
Artikel für Anwender, die zwar schon begonnen haben, die Technologie zu benutzen, jedoch keine Experten sind.
+
{{Tag("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:

+ +
+
{{Tag("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.
+
{{Tag("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).
+
{{Tag("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.
+
{{Tag("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.
+
{{Tag("NeedsExample")}}
+
Der Artikel benötigt ein oder mehrere Beispiele, um den Inhalt zu illustrieren. Solche Beispiele sollten das live sample system benutzen.
+
{{Tag("NeedsLiveSamples")}}
+
In diesem Artikel bit es ein oder mehrere Beispiele, die mittels live sample system erneuert werden müssen.
+
{{Tag("NeedsSpecTable")}}
+
Der Artikel benötigt eine Tabelle, welche das bzw. die Dokument/-e enthält, in dem/denen das Feature definiert wurde.
+
{{Tag("NeedsUpdate")}}
+
Der Inhalt ist veraltet und muss aktualisiert werden.
+
{{Tag("l10n:exclude")}}
+
Der Inhalt ist es nicht wirklich wert, übersetzt zu werden und wird nicht auf Übersetzungs-Status-Seiten erscheinen.
+
{{Tag("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:

+ +
+
{{Tag("Navigation")}}
+
Der Beitrag liefert Informationen darüber wie man das Web durchsuchen kann.
+
{{Tag("WebMechanics")}}
+
Der Beitrag liefert Informationen darüber wie das Web organisiert ist und wie es funktioniert.
+
{{Tag("Search")}}
+
Der Beitrag zeigt die Möglichkeiten auf, wo Informationen, Personen und Resourcen mittels des des Webs zu finden sind.
+
{{Tag("Credibility")}}
+
Der Artikel liefert Informationen darüber wie kritisch zu bewertende Informationen sind, die auf dem Web gefunden wurden.
+
{{Tag("Security")}}
+
Der Artikel liefert Informationen wie man Systeme, Identitäten und Inhalt sicher aufbewahrt.
+
{{Tag("Composing")}}
+
Der Artikel liefert Informationen wie Inhalt für das Web kreiert und sichert.
+
{{Tag("Remixing")}}
+
Der Artikel liefert Informationen wie man existierende Web-Resourcen nutzt, um neue Inhalte zu erstellen.
+
{{Tag("DesignAccessibility")}}
+
Der Artikel liefert Informationen darüber, wie eine effektive und universelle Kommunikation mittels Nutzung der Web-Resourcen zustande gebracht werden kann.
+
{{Tag("CodingScripting")}}
+
Der Artikel liefert Informationen wie interaktive Kodierung und/oderErfahrungen auf dem Web erstellt werden können.
+
{{Tag("infrastructure")}}
+
Der Artikel liefert Informationen, die das Verständnis der Internet-Technik aufzeigen.
+
{{Tag("Sharing")}}
+
Der Artikel zeigt auf, wie man zusammen mit anderen Teilnehmern Resourcen kreiert.
+
{{Tag("Collaborating")}}
+
Der Artikel liefert Informationen wie man mit an deren zusammenarbeiten kann.
+
{{Tag("Community")}}
+
Der Artikel liefert Informationen wie man in Web-Communities eingebunden werden kann und zeigt deren Praktiken auf.
+
{{Tag("Privacy")}}
+
Der Artikel liefert Informationen über Konsequenzen, wenn Daten online ausgetauscht werden.
+
{{Tag("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:
+
{{Tag("WebGL")}}, {{Tag("Graphics")}}, {{Tag("Guide")}}, {{Tag("Beginner")}}
+
Referenz-Seite für das {{HTMLElement("canvas")}} Element
+
{{Tag("Canvas")}}, {{Tag("HTML")}}, {{Tag("Element")}}, {{Tag("Graphics")}}, {{Tag("Reference")}}
+
Seite für Firefox OS Entwickler-Werkzeuge
+
{{Tag("Tools")}}, {{Tag("Firefox OS")}}, {{Tag("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 Apps{{Tag("Apps")}}
HTML{{Tag("HTML")}}
CSS{{Tag("CSS")}}
JavaScript{{Tag("JavaScript")}}
APIs and DOM{{Tag("API")}}
Canvas{{Tag("Canvas")}}
SVG{{Tag("SVG")}}
MathML{{Tag("MathML")}}
WebGL{{Tag("WebGL")}}
XUL{{Tag("XUL")}}
Marketplace{{Tag("Marketplace")}}
Firefox{{Tag("Firefox")}}
Firefox for Android{{Tag("Firefox Mobile")}}
Firefox for Desktop{{Tag("Firefox Desktop")}}
Firefox OS{{Tag("Firefox OS")}}
Mobile{{Tag("Mobile")}}
Web Development{{Tag("Web Development")}}
Add-ons & Extensions{{Tag("Add-ons ")}}|| {{Tag("Extensions")}} || {{Tag("Plugins")}} || {{Tag("Themes")}}
Games{{Tag("Games")}}
Skill levelI'm an Expert{{Tag("Advanced")}}
Intermediate{{Tag("Intermediate")}}
I'm Learning{{Tag("Beginner")}}
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.
Tools{{Tag("Tools")}}
Code Samples{{Tag("Example")}}
How-To & Tutorial{{Tag("Guide")}}
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/contribute/index.html b/files/de/mdn/contribute/index.html new file mode 100644 index 0000000000..9859a888b0 --- /dev/null +++ b/files/de/mdn/contribute/index.html @@ -0,0 +1,91 @@ +--- +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/contribute/localize/index.html b/files/de/mdn/contribute/localize/index.html new file mode 100644 index 0000000000..dcb1fcc13e --- /dev/null +++ b/files/de/mdn/contribute/localize/index.html @@ -0,0 +1,29 @@ +--- +title: Lokalisieren von MDN +slug: MDN/Contribute/Localize +tags: + - Documentation + - Localization + - MDN + - NeedsTranslation + - TopicStub +translation_of: MDN/Contribute/Localize +--- +
{{MDNSidebar}}

MDN wird von Menschen auf der ganzen Welt als Referenz und Anleitung für Web Technologien, wie auch für Internas von Firefox selbst, genutzt. Unsere Lokalisierungsgemeinschaften sind ein wichtiger Teil des Mozilla Projekts. Ihre Übersetzungs- und Lokalisierungsarbeit hilft Menschen auf der ganzen Welt, um für das offene Web zu entwickeln. Wenn Sie mehr über unsere Lokalisierungsteams erfahren möchten, einem Team beitreten oder sogar eine neue Lokalisierung beginnen möchten, ist dies der Ort, um damit zu beginnen.

+

{{LandingPageListSubpages}}

+

Lokalisierungstools

+

Es gibt einige nützliche Tools, die Sie bei Ihrer Übersetzungsarbeit nutzen werden:

+
+
+ Verbatim
+
+ Wird für die Übersetzung von Zeichenketten über verschiedene Mozilla Projekte hinweg genutzt, einschließlich der MDN Benutzeroberfläche (sowie der Firefox Benutzeroberfläche).
+
+ Transvision
+
+ Ein Werkzeug von Mozilla France, das Sie nach einer englischen Zeichenkette suchen lässt und als Ergebnis die verschiedenen Übersetzungen einer Sprache dazu liefert, die im gesamten Mozilla Code verwendet werden. Dieses Werkzeug eignet sich, um die bevorzugte Übersetzung eines Wortes oder eines Satzes zu finden.
+
+

Siehe

+ diff --git a/files/de/mdn/contribute/localize/translating_pages/index.html b/files/de/mdn/contribute/localize/translating_pages/index.html new file mode 100644 index 0000000000..796212f0ac --- /dev/null +++ b/files/de/mdn/contribute/localize/translating_pages/index.html @@ -0,0 +1,58 @@ +--- +title: MDN Seiten übersetzen +slug: MDN/Contribute/Localize/Translating_pages +tags: + - Anfänger + - Beginner + - Guide + - Lokalisation + - MDN + - Seite Übersetzen + - Übersetzung + - übersetzen +translation_of: MDN/Contribute/Localize/Translating_pages +--- +
{{MDNSidebar}}
+ +

Dieser Artikel ist eine grundlegende Anleitung für die Übersetzung von Inhalten auf MDN. Er beinhaltet sowohl die Grundlagen für Übersetzungsarbeit als auch Tipps für den richtigen Umgang mit den verschiedenen Arten von Inhalten.

+ +

Eine neue Übersetzung einer Seite starten

+ +

Befolgen Sie diese Schritte, wenn Sie eine Seite in Ihre Sprache übersetzen möchten:

+ +
    +
  1. Klicken Sie auf das Sprachen-Symbol ({{FontAwesomeIcon("icon-language")}}), um das Sprachen-Menü zu öffnen und wählen Sie Übersetzung hinzufügen. Daraufhin erscheint die Auswahlseite der verfügbaren Sprachen.
    2. +
  2. Wählen Sie die Sprache, in die Sie die Seite übersetzen möchten. Anschließend öffnet sich ein Editor, auf dessen linker Hälfte die originale Seite, auf der rechten die Vorschau der übersetzten Seite zu sehen ist.
    3. +
  3. Unter Beschreibung übersetzen können Sie den Titel und optional den Adressnamen (Slug) in die Zielsprache übersetzen. Der Adressname ist der letzte Teil der URL einer Seite (zum Beispiel: "Translating_pages" für diesen Artikel.) Manche Sprachcommunities übersetzen den Adressnamen nicht und übernehmen den Englischen. Vergleichen Sie dazu am besten andere Artikel in Ihrer Sprache, um die gängige Praxis zu ermitteln. Um mehr Platz für den Abschnitt Übersetzung in Deutsch zu erhalten, können Sie auf das Minus-Zeichen neben dem Abschnitt Beschreibung übersetzen klicken und ihn so ausblenden.
    4. +
  4. Übersetzen Sie den Inhalt der Seite unter Übersetzung in Deutsch.
    5. +
  5. Tragen Sie mindestens ein Schlagwort für die Seite ein.
    6. +
  6. Drücken Sie Änderungen speichern wenn Sie fertig sind.
    7. +
+ +
Hinweis: Die Benutzeroberfläche der "Artikel übersetzen"-Ansicht wird anfangs in Englisch angezeigt. Bei nachfolgenden Bearbeitungen eines bestimmten Artikels im Editor wird die Benutzeroberfläche in der jeweils passenden Sprache angezeigt, falls eine Lokalisierung für MDN in dieser Sprache verfügbar ist. Die MDN Benutzeroberfläche kann mit Pontoon lokalisiert werden. Konsultieren Sie dazu Lokalisierung mit Pontoon für Details zu dessen Benutzung.
+ +

Eine übersetzte Seite bearbeiten

+ + + +

Wenn die englische Version seit der letzten Aktualisierung der Übersetzung verändert wurde, wird in der Artikel-Übersetzen-Ansicht die Quellebene "diff" mit den Änderungen der englischen Version angezeigt. Dies hilft Ihnen, Aktualisierungen schneller durchzuführen.

+ +

Schlagwort-Übersetzungen

+ +

Es ist wichtig, dass jede Seite mit mindestens einem Schlagwort getaggt wird, auch wenn es sich um eine Übersetzung handelt.

+ +

Manche Tags werden von Suchfiltern oder als Konventionen zwischen Beitragserstellern benutzt. Diese Schlagwörter sollten nicht übersetzt werden. Lesen Sie hierzu die Tagging Standards, um diese Schlagwörter zu erkennen.
+ Sie dürfen gern übersetzte Schlagwörter erstellen, um Inhalte zu gruppieren, wenn sie nicht von einem Standard-Schlagwort abgedeckt werden.

+ +

Tipps für neue Übersetzer

+ +

Sie sind neu bei der Lokalisierung auf MDN? Dann sind hier ein paar Ratschläge:

+ + diff --git a/files/de/mdn/contribute/zu_tun_im_mdn/index.html b/files/de/mdn/contribute/zu_tun_im_mdn/index.html new file mode 100644 index 0000000000..9eeff3ffd6 --- /dev/null +++ b/files/de/mdn/contribute/zu_tun_im_mdn/index.html @@ -0,0 +1,27 @@ +--- +title: Was alles im MDN zu tun ist +slug: MDN/Contribute/zu_tun_im_MDN +tags: + - Anleitung + - Guide + - MDN +translation_of: MDN/Contribute/Getting_started +--- +
{{MDNSidebar}}

Du willst das MDN besser machen? Es gibt viele Wege, wie du helfen kannst: du kannst Tippfehler verbessern, neue Inhalte verfassen, du kannst sogar die Kuma Plattform verbessern, auf welcher diese Seite aufbaut. Der Artikel "Beitragen zu MDN" deckt alle Möglichkeiten ab, wobei und wie du uns helfen könntest. Unten findest du eine etwas spezifischere Liste an Aufgaben die erledigt werden müssen.

+ +

Es gibt viele Möglichkeiten für dich zu helfen. Hier ist eine Liste mit den verschiedenen Dingen, die noch getan werden müssen:

+ + + +

Für mehr Ideen wie du helfen kannst, sieh dir unsere How-to Leitfäden an. Du kannst auf dieser Seite kategorisierte Listen von Seiten finden, die deine Hilfe benötigen.

+ +

Zusätzlich kannst du eine Liste mit großen Projekten die demnächst gestartet werden auf dem Trello Board vom MDN Team finden. Dieses Board zeigt dir sowohl woran die MDN Autoren gerade arbeiten, als auch Projekte an denen vermutlich demnächst angefangen wird zu arbeiten. Dieser Artikel zeigt dir wie du dieses Board nutzen kannst.

diff --git a/files/de/mdn/guidelines/index.html b/files/de/mdn/guidelines/index.html new file mode 100644 index 0000000000..cbf0c6aa77 --- /dev/null +++ b/files/de/mdn/guidelines/index.html @@ -0,0 +1,14 @@ +--- +title: MDN content and style guides +slug: MDN/Guidelines +tags: + - Guidelines + - Landing + - MDN Meta +translation_of: MDN/Guidelines +--- +
{{MDNSidebar}}
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

These guides provide details on how MDN documentation should be written and formatted, as well as how our code samples and other content should be presented. By following these guides, you can ensure that the material you produce is clean and easy to use.

+ +

{{LandingPageListSubpages}}

diff --git a/files/de/mdn/guidelines/style_guide/index.html b/files/de/mdn/guidelines/style_guide/index.html new file mode 100644 index 0000000000..274d9d4f8c --- /dev/null +++ b/files/de/mdn/guidelines/style_guide/index.html @@ -0,0 +1,560 @@ +--- +title: MDN style guide +slug: MDN/Guidelines/Style_guide +translation_of: MDN/Guidelines/Writing_style_guide +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/de-DE/docs/MDN")}}
+ +

Um die Dokumentation in einer organisierten, standardisierten und leicht verständlichen Weise darzustellen, beschreibt der MDN Web Docs Style Guide, wie dieser Text organisiert, geschrieben, formatiert und gestaltet werden sollte. Das sind eher Richtlinien als strenge Regeln. Wir sind mehr an Inhalten als an der Formatierung interessiert, also fühlen Sie sich nicht verpflichtet, den Style Guide zu lernen, bevor Sie einen Beitrag leisten. Seien Sie jedoch nicht verärgert oder überrascht, wenn ein fleißiger Freiwilliger Ihre Arbeit später bearbeitet, um sie an diesen Leitfaden anzupassen.

+ +

Wenn Sie nach Spezifikationen suchen, wie eine bestimmte Art von Seite strukturiert sein sollte, lesen Sie den MDN page layout guide.

+ +

Die sprachlichen Aspekte dieses Leitfadens gelten in erster Linie für die englischsprachige Dokumentation. Andere Sprachen haben möglicherweise ihre eigenen Styleguides (und können diese gerne erstellen). Diese sollten als Unterseiten auf der Seite des Lokalisierungsteams veröffentlicht werden.

+ +

Stilstandards, die für Inhalte gelten, die für andere Sites als MDN geschrieben wurden, finden Sie im One Mozilla style guide.

+ +

Basics

+ +

The best place to start in any major publishing style guide is with some very basic text standards to help keep documentation consistent. The following sections outline some of these basics to help you.

+ +

Page titles

+ +

Page titles are used in search results and also used to structure the page hierarchy in the breadcrumb list at the top of the page. The page title (which is displayed at the top of the page and in the search results) can be different from the page "slug," which is the portion of the page's URL following "<locale>/docs/".

+ +

Title and heading capitalization

+ +

Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:

+ + + +

We have many older pages that were written before this style rule was established. Feel free to update them as needed if you like. We're gradually getting to them.

+ +

Choosing titles and slugs

+ +

Page slugs should be kept short; when creating a new level of hierarchy, the new level's component in the slug should generally just be a word or two.

+ +

Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.

+ +

Creating new subtrees

+ +

When you need to add a number of articles about a topic or topic area, you will typically do so by creating a landing page, then adding subpages for each of the individual articles. The landing page should open with a paragraph or two describing the topic or technology, then provide a list of the subpages with descriptions of each page. You can automate the insertion of pages into the list using a number of macros we've created.

+ +

For example, consider the JavaScript guide, which is structured as follows:

+ + + +

Try to avoid putting your article at the top of the hierarchy, which slows the site down and makes search and site navigation less effective.

+ +

Sections, paragraphs, and newlines

+ +

Use heading levels in decreasing order: {{HTMLElement("h2")}} then {{HTMLElement("h3")}} then {{HTMLElement("h4")}}, without skipping levels. H2 is the highest level allowed because H1 is reserved for the page title. If you need more than three or four levels of headers you should consider breaking up the article into several smaller articles with a landing page, linking them together using the {{TemplateLink("Next")}}, {{TemplateLink("Previous")}}, and {{TemplateLink("PreviousNext")}} macros.

+ +

The Enter (or Return) key on your keyboard starts a new paragraph. To insert a newline without a space, hold down the Shift key while pressing Enter.

+ +

Don't create single subsections -- you don't subdivide a topic into one. It's either two subheadings or more or none at all. 

+ +

Don't have bumping heads, which are headings followed immediately by headings. Aside from looking horrible, it's helpful to readers if every heading has at least a brief intro after it to introduce the subsections beneath.

+ +

Text formatting and styles

+ +

Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.

+ +
Note: The "Note" style is used to call out important notes, like this one.
+ +
Warning: Similarly, the "Warning" style creates warning boxes like this.
+ +

Unless specifically instructed to do so, do not use the HTML style attribute to manually style content. If you can't do it using a predefined class, drop into {{IRCLink("mdn")}} and ask for help.

+ +

Code sample style and formatting

+ +

Tabs and line breaks

+ +

Use two spaces per tab in all code samples. Code should be indented cleanly, with open-brace ("{") characters on the same line as the statement that opens the block. For example:

+ +
if (condition) {
+  /* handle the condition */
+} else {
+  /* handle the "else" case */
+}
+
+ +

Long lines shouldn't be allowed to stretch off horizontally to the extent that they require horizontal scrolling to read. Instead, break at natural breaking points. Some examples follow:

+ +
if (class.CONDITION || class.OTHER_CONDITION || class.SOME_OTHER_CONDITION
+       || class.YET_ANOTHER_CONDITION ) {
+  /* something */
+}
+
+var toolkitProfileService = Components.classes["@mozilla.org/toolkit/profile-service;1"]
+                           .createInstance(Components.interfaces.nsIToolkitProfileService);
+
+ +

Inline code formatting

+ +

Use the "Code" button (labeled with two angle brackets "<>") to apply inline code-style formatting to function names, variable names, and method names (this uses the {{HTMLElement("code")}} element). For example, "the frenchText() function".

+ +

Method names should be followed by a pair of parentheses: doSomethingUseful(). This helps to differentiate methods from other code terms.

+ +

Syntax highlighting

+ +

Screenshot of the "syntax highlighting" menu.Entire lines (or multiple lines) of code should be formatted using syntax highlighting rather than the {{HTMLElement("code")}} element. Click the "pre" button in the toolbar to create the preformatted content box in which you'll then write your code. Then, with the text entry cursor inside the code box, select the appropriate language from the language list button to the right of the "pre" button, as seen in the screenshot to the right. The following example shows text with JavaScript formatting:

+ +
+
for (var i = 0, j = 9; i <= 9; i++, j--)
+  document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);
+
+ +

If no appropriate transformation is available, use the pre tag without specifying a language ("No Highlight" in the language menu).

+ +
x = 42;
+ +

Styling HTML element references

+ +

There are various specific rules to follow when writing about HTML elements, in order to consistently describe the various components of elements, and to ensure that they're properly linked to detailed documentation.

+ +
+
Element names
+
Use the {{TemplateLink("HTMLElement")}} macro, which creates a link to the page for that element. For example, writing \{{HTMLElement("title")}} produces "{{HTMLElement("title")}}". If you don't want to create a link, enclose the name in angle brackets and use "Code (inline)" style (e.g., <title>).
+
Attribute names
+
Use bold face.
+
Attribute definitions
+
Use the {{TemplateLink("htmlattrdef")}} macro (e.g., \{{htmlattrdef("type")}}) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., \{{htmlattrxref("attr","element")}}) to reference attribute definitions.
+
Attribute values
+
Use "Code (inline)" style, and do not use quotation marks around strings, unless needed by the syntax of a code sample. E.g.: When the type attribute of an <input> element is set to email or tel ...
+
Labeling attributes
+
Use labels like {{HTMLVersionInline(5)}} thoughtfully. For example, use them next to the bold attribute name but not for every occurrence in your body text.
+
+ +

Latin abbreviations

+ +

In notes and parentheses

+ + + +

In running text

+ + + +

Meanings and English equivalents of Latin abbreviations

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AbbrevLatinEnglish
cf.confercompare
e.g.exempli gratiafor example
et al.et aliiand others
etc.et ceteraand so forth, and so on
i.e.id estthat is, in other words
N.B.nota benenote well
P.S.post scriptumpostscript
+ +
+

Note: Always consider whether it's truly beneficial to use a Latin abbreviation. Some of these are used so rarely that many readers won't understand the meaning, and others are often confused with one another. And be sure that you use them correctly, if you choose to do so. For example, be careful not to confuse "e.g." with "i.e.", which is a common error.

+
+ +

Acronyms and abbreviations

+ +

Capitalization and periods

+ +

Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".

+ + + +

Expansion

+ +

On the first mention of a term on a page, expand acronyms likely to be unfamiliar to users. When in doubt, expand it, or, better, link it to the article or glossary entry describing the technology.

+ + + +

Plurals of acronyms and abbreviations

+ +

For plurals of acronyms or abbreviations, add s. Don't use an apostrophe. Ever. Please.

+ + + +

Capitalization

+ +

Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".

+ +

Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."

+ +

Contractions

+ +

Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!

+ +

Pluralization

+ +

Use English-style plurals, not the Latin- or Greek-influenced forms.

+ + + +

Hyphenation

+ +

Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.

+ + + +

Gender-neutral language

+ +

It is a good idea to use gender-neutral language in any kind of writing where gender is irrelevant to the subject matter, to make the text as inclusive as possible. So for example, if you are talking about the actions of a specific man, usage of he/his would be fine, but if the subject is a person of either gender, he/his isn't really appropriate.
+
+ Let's take the following example:

+ +
+

A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.

+
+ +
+

A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.

+
+ +

Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:

+ +
+

A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.

+
+ +
+

Note: MDN allows the use of this very common syntax (which is controversial among usage authorities), in order to make up for the lack of a neutral gender in English. The use of the third-person plural as a neutral gender pronoun (that is, using "they," them", "their," and "theirs") is an accepted practice, commonly known as "singular 'they.'"

+
+ +

You can use both genders:

+ +
+

A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.

+
+ +

making the users plural:

+ +
+

A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.

+
+ +

The best solution, of course, is to rewrite and eliminate the pronouns completely:

+ +
+

A confirmation dialog appears, requesting the user's permission for web cam access.

+
+ +
+

A confirmation dialog box appears, which asks the user for permission to use the web cam.

+
+ +

The last way of dealing with the problem is arguably better, as it is not only grammatically more correct but removes some of the complexity associated with dealing with genders across different languages that may have wildly varying gender rules. This can make translation easier, both for readers reading English, then translating it into their own language as they read, and for localizers translating articles into their own language.

+ +

Numbers and numerals

+ +

Dates

+ +

For dates (not including dates in code samples) use the format "January 1, 1990".

+ + + +

Alternately, you can use the YYYY/MM/DD format.

+ + + +

Decades

+ +

For decades, use the format "1990s". Don't use an apostrophe.

+ + + +

Plurals of numerals

+ +

For plurals of numerals add "s". Don't use an apostrophe.

+ + + +

Commas

+ +

In running text, use commas only in five-digit and larger numbers.

+ + + +

Punctuation

+ +

Serial comma

+ +

Use the serial comma. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.

+ + + +
+

Note: This is in contrast to the One Mozilla style guide, which specifies that the serial comma is not to be used. MDN is an exception to this rule.

+
+ +

Spelling

+ +

For words with variant spellings, always use the first entry at Answers.com. Do not use variant spellings.

+ + + +

Terminology

+ +

Obsolete vs. deprecated

+ +

It's important to be clear on the difference between the terms obsolete and deprecated.

+ +
+
Obsolete:
+
On MDN, the term obsolete marks an API or technology that is not only no longer recommended, but also no longer implemented in the browser. For Mozilla-specific technologies, the API is no longer implemented in Mozilla code; for Web standard technology, the API or feature is no longer supported by current, commonly-used browsers.
+
Deprecated:
+
On MDN, the term deprecated marks an API or technology that is no longer recommended, but is still implemented and may still work. These technologies will in theory eventually become obsolete and be removed, so you should stop using them. For Mozilla-specific technologies, the API is still supported in Mozilla code; for Web standard technology, the API or feature has been removed or replaced in a recent version of the defining standard.
+
+ +

HTML elements

+ +

Use "elements" to refer to HTML and XML elements, rather than "tags". In addition, they should almost always be wrapped in "<>", and should be in the {{HTMLElement("code")}} style. Also, at least the first time you reference a given element in a section should use the {{TemplateLink("HTMLElement")}} macro, to create a link to the documentation for the element (unless you're writing within that element's reference document page).

+ + + +

User interface actions

+ +

In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.

+ + + +

Voice

+ +

While the active voice is generally preferred, the passive voice is also acceptable, given the informal feel of our content. Try to be consistent, though.

+ +

Wiki markup and usage

+ + + +

To automatically create a link to a Bugzilla bug, use this template:

+ +
\{{Bug(322603)}}
+
+ +

This results in:

+ +

{{Bug(322603)}}

+ +

For WebKit bugs, you can use this template:

+ +
\{{Webkitbug("322603")}}
+
+ +

This results in:

+ +

{{Webkitbug("322603")}}

+ +

Page tags

+ +

Tags provide meta information about a page and/or indicate that a page has specific improvements needed to its content. Every page in the wiki should have tags. You can find details on tagging in our How to properly tag pages guide.

+ +

The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:

+ +

Screenshot of the UX for adding and removing tags on MDN

+ +

To add a tag, click in the edit box at the end of the tag list and type the tag name you wish to add. Tags will autocomplete as you type. Press enter (or return) to submit the new tag. Each article may have as many tags as needed. For example, an article about using JavaScript in AJAX programming might have both "JavaScript" and "AJAX" as tags.

+ +

To remove a tag, simply click the little "X" icon in the tag.

+ +

Tagging pages that need work

+ +

In addition to using tags to track information about the documentation's quality and content, we also use them to mark articles as needing specific types of work.

+ +

Tagging obsolete pages

+ +

Use the following tags for pages that are not current:

+ + + +

SEO summary

+ +

The SEO summary is a very short summary of the page. It will be reported as a summary of the article to robots crawling the site, and will then appear in search results for the page. It is also used by macros that automate the construction of landing pages inside MDN itself.

+ +

By default, the first pagragraph of the page is used as the SEO summary. However you can override this behavior by marking a section with the "SEO summary" style in the WYSIWYG editor.

+ +

Landing pages

+ +

Landing pages are pages at the root of a topic area of the site, such as the main CSS or HTML pages. They have a standard format that consists of three areas:

+ +
    +
  1. A brief (typically one paragraph) overview of what the technology is and what it's used for. See {{anch("Writing a landing page overview")}} for tips.
    2. +
  2. A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.
    3. +
  3. An optional "Browser compatibility" section at the bottom of the page.
    4. +
+ +

Creating a page link list

+ +

The link list section of an MDN landing page consists of two columns. These are created using the following HTML:

+ +
<div class="row topicpage-table">
+  <div class="section">
+    ... left column contents ...
+  </div>
+  <div class="section">
+    ... right column contents ...
+  </div>
+</div>
+ +

The left column should be a list of articles, with an <h2> header at the top of the left column explaining that it's a list of articles about the topic (for example "Documentation and tutorials about foo"); this header should use the CSS class "Documentation". Below that is a <dl> list of articles with each article's link in a <dt> block and a brief one-or-two sentence summary of the article in the corresponding <dd> block.

+ +

The right column should contain one or more of the following sections, in order:

+ +
+
Getting help from the community
+
This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".
+
Tools
+
A list of tools the user can look at to help with the use of the technology described in this section of MDN. The heading should use the class "Tools".
+
Related topics
+
A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".
+
+ +

<<<finish this once we finalize the landing page standards>>>

+ +

Using, inserting images

+ +

It's sometimes helpful to provide an image in an article you create or modify, especially if the article is very technical. To include an image:

+ +
    +
  1. Attach the desired image file to the article (at the bottom of every article in edit mode)
    2. +
  2. Create an image in the WYSIWYG editor
    3. +
  3. In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image
    4. +
  4. Press OK.
    5. +
+ +

Other References

+ +

Preferred style guides

+ +

If you have questions about usage and style not covered here, we recommend referring to the Economist style guide or, failing that, the Chicago Manual of Style.

+ +

Preferred dictionary

+ +

For questions of spelling, please refer to Answers.com. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use honor rather than honour).

+ +

We will be expanding the guide over time, so if you have specific questions that aren't covered in this document, please send them to the MDC mailing list or project lead so we know what should be added.

+ +

MDN-specific

+ + + +

Language, grammar, spelling

+ +

If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.

+ + diff --git a/files/de/mdn/index.html b/files/de/mdn/index.html new file mode 100644 index 0000000000..0c8645cb03 --- /dev/null +++ b/files/de/mdn/index.html @@ -0,0 +1,33 @@ +--- +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.

+ + + + diff --git a/files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html b/files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html new file mode 100644 index 0000000000..0255388aa1 --- /dev/null +++ b/files/de/mdn/kuma/beheben_von_kumascript_fehlern/index.html @@ -0,0 +1,63 @@ +--- +title: Beheben von KumaScript Fehlern +slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern +translation_of: MDN/Tools/KumaScript/Troubleshooting +--- +
{{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. \{\{anch("top", "Back to top")}}.
+
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.
+
Der Aufruf der Template Seite zeigt die richtigen Namen der Makros. Die URLs für Template Seiten erhält man durch Anheften des Template Namen ans Ende der URL https://developer.mozilla.org/en-US/docs/Template: z.B. ist die Template Seite für \{\{anch("top", "Back to top")}}: https://developer.mozilla.org/en-US/docs/Template:anch.
+
+ 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/kuma/index.html b/files/de/mdn/kuma/index.html new file mode 100644 index 0000000000..06e83f21ee --- /dev/null +++ b/files/de/mdn/kuma/index.html @@ -0,0 +1,28 @@ +--- +title: 'Kuma: MDN''s wiki platform' +slug: MDN/Kuma +tags: + - Einstieg bei Mozilla + - Helfen + - Kuma + - MDN Meta + - Mitarbeiten +translation_of: 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/mdn/nutzer_leitfaden/index.html b/files/de/mdn/nutzer_leitfaden/index.html new file mode 100644 index 0000000000..da9a177a1b --- /dev/null +++ b/files/de/mdn/nutzer_leitfaden/index.html @@ -0,0 +1,8 @@ +--- +title: MDN Benutzerhandbuch +slug: MDN/nutzer_leitfaden +translation_of: MDN/Tools +--- +
{{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/structures/index.html b/files/de/mdn/structures/index.html new file mode 100644 index 0000000000..f8ea007204 --- /dev/null +++ b/files/de/mdn/structures/index.html @@ -0,0 +1,10 @@ +--- +title: Document structures +slug: MDN/Structures +translation_of: 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/structures/kompatibilitaets_tabellen/index.html b/files/de/mdn/structures/kompatibilitaets_tabellen/index.html new file mode 100644 index 0000000000..758d450e7c --- /dev/null +++ b/files/de/mdn/structures/kompatibilitaets_tabellen/index.html @@ -0,0 +1,500 @@ +--- +title: Kompatibilitäts Tabellen +slug: MDN/Structures/Kompatibilitaets_Tabellen +tags: + - Browser Kompatibilität +translation_of: MDN/Structures/Compatibility_tables +--- +
{{MDNSidebar}}
+ +
{{IncludeSubnav("/en-US/docs/MDN")}}
+ +

MDN hat ein Standard Format für Kompatibilitätstabellen für unsere Offenes Web Dokumentation; Das beeinhaltet die Dokumentation von Technologien, wie zum Beispiel, DOM, HTML, CSS, JavaScript, SVG und viele weitere, welche in jedem Browsern verwendet werden. Dieser Artikel bearbeitet, wie unsere Features verwendet werden sollen um Kompatibilitätsdaten zu den MDN Seiten hinzuzufügen.

+ +
+

Wichtig: Die Art, wie die Daten generiert werden, wurde geändert. Früher wurden unsere Tabellen in die Seite eingefügt und die Daten wurden manuell befüllt. Dies ist Ineffizient, macht die Pflege der Daten schwierig und sorgt für unflexible Daten. Deswegen verschieben wir den Speicher unserer Browserkompatibilitätsdaten in ein Daten Repository (siehe https://github.com/mdn/browser-compat-data) und generieren die Tabellen mit einem Programm.
+
+ In dieser Anleitung dokumentieren wir die neue Art Kompatibilitätsdaten zu MDN hinzuzufügen, aber wir haben die Dokumentation der alten Art immer noch behalten, weil du manuelle Tabellen noch länger auf MDN sehen wirst. Wenn du die alte Dokumentation sehen musst, kannst du unseren Alten Kompatibiltätstabellen Artikel besuchen.

+
+ +
+

Notiz: Wenn du Hilfe zu einem der Schritte dieser Anleitung brauchst, würden wir uns freuen, wenn du uns im MDN Diskussionsforum kontaktierst.

+
+ +

Wie ist das Repository erreichbar?

+ +

Die Daten sind in einem GitHub Repository gespeichert — siehe https://github.com/mdn/browser-compat-data. Um darauf zugreifen zu können, musst du einen GitHub Benutzer erstellen,das browser-compat-data Repository in deinen Account forken, und deinen Fork auf deinen Rechner clonen.

+ +

Wähle ein Feature für das du Daten hinzufügen willst

+ +

Such dir zuerst ein Feature aus, zu dem du Browser-Kompatibilitäts-Daten hinzufügen willst. Das könnte, zum Beispiel ein HTML-Element, eine CSS-Eigenschaft, ein JS-Sprachen-Feature oder ein JS-API-Schnittstelle sein. Wir würden uns wünschen, dass du an API Features arbeitest, da wir bereits Leute haben, die an HTML, JS und CSS arbeiten. Du findest den Status eines Features, für das noch Daten auf das Repository hinzugefügt werden müssen, auf unserer Browser-Kompatibilitäts-Daten Verschiebungstabelle.

+ +

Der Ablauf für das Hinzufügen von Browser-Kompatibilitäts-Daten lautet:

+ +
    +
  1. Öffne die Tabelle und wähle ein Feature an dem nicht schon gearbeitet wird oder bereits übertragen wurde. Schreibe deinen Namen in die "Who" Spalte, wir bevorzugen deinen MDN Nutzernamen, damit wir dich, falls notwendig, über deine E-Mail-Adresse kontaktieren können.
    2. +
  2. Falls das Feature, an dem du Arbeiten willst noch nicht in der Tabelle ist, füge eine Zeile unter Verwendung mit dem gleichen Format und Bennenung ein (z.B. Getrennte Zeilen für unterschiedliche HTML-Elemente, CSS-Eigenschaften, CSS-Selectoren, JS-Objekt und Schnittstellen einer API).
    3. +
  3. Sobald du an einem Feature arbeitest, ändere den Status auf "In progress".
    4. +
  4. Sobald du daten hinzugefügt hast und einen Pull Request zum Main Repo gestellt hast, setze den Status auf "PR done".
    5. +
  5. Wenn deine Daten in das Repo gemerged und zum npm Package hinzugefügt wurden, ändere den Status dementsprechend.
    6. +
  6. Sobald du die Dokumentations-Seite(n) das neue Makro angegeben hast, damit die aktualisierten Tabellen generiert werden, setze den Status auf "Article updated". Damit ist deine Arbeit abgeschlossen.
    7. +
+ +

Preparing to add the data

+ +

Before adding some new data, you should make sure that your fork is up-to-date with the main repo (it contains the same content), create a new branch inside your fork to contain your additions, then pull that branch into your local clone so you can start working inside it:

+ +

Let's look at a simple way to make sure your fork is to-to-date is as follows:

+ +

Adding the main browser-compat-data repo as a remote

+ +

Go to your local clone of your fork in your terminal/command line, and add a remote pointing to the main (upstream) repo like so (you only need to do this once):

+ +
git remote add upstream https://github.com/mdn/browser-compat-data.git
+ +

If you are unsure whether you've done this, you can check what remotes your repo has using

+ +
git remote -v
+ +

Updating your fork with the remote's content

+ +

Now, whenever you want to update your fork, you can do so by:

+ +
    +
  1. +

    Making sure you are in the master branch:

    + + 
    git checkout master
    +
    2. +
  2. +

    fetching the up-to-date repo contents using the following:

    + + 
    git fetch upstream
    +
    3. +
  3. +

    rebasing the contents of your master with the main repo's contents:

    + + 
    git rebase upstream/master
    +
    4. +
  4. +

    pushing these updates back to your remote fork using this:

    + + 
    git push -f
    +
    5. +
+ +

Creating a new branch to do your work in

+ +

Next, go to your remote fork (it will be at https://github.com/your-username/browser-compat-data) and create a new branch to store your changes for this data addition. This can be done by:

+ +
    +
  1. Clicking on the "Branch: Master" button.
    2. +
  2. Entering a new branch name into the "Find or create a branch..." text field.
    3. +
  3. Pressing the resulting "Create branch name-of-branch from Master" button.
    4. +
+ +

For example, if you were wanting to add data for the WebVR API, you'd create a branch called something like "webvr".

+ +

Switching to the new branch

+ +

At this point, go back to your terminal/command line, and update your fork's local clone to include your new branch using the following command:

+ +
git pull
+ +

Now switch to your new branch using this:

+ +
git checkout name-of-branch
+ +

You should now be ready to start adding your data!

+ +

Adding the data

+ +

To add the data, you need to create a new file or files to store your compat data in. The files you need to create differ, depending on what technology you are working on:

+ + + +
+

Note: You'll notice that the repo also contains data for Browser Extensions and HTTP. These data sets are basically finished as they stand, but more features may need to be added in the future.

+
+ +

Each file you create has to follow the pattern defined in the schema contained within our repo; you can see the detailed schema description here.

+ +

Basic compat data structure

+ +

Let's look at an example. CSS property JSON files for example need the following basic structure:

+ +
{
+  "css": {
+    "properties": {
+      "border-width": {
+        "__compat": {
+          ...
+        }
+      }
+    }
+  }
+}
+ +

You have the css object, inside of which is a properties object. Inside the properties object, you need one member for each of the specific features you want to define the compat data for. Each of these members has a __compat member, inside of which the actual data goes.

+ +

The above data is found in the border-width.json file — compare this to the rendered border-width support table on MDN.

+ +

Other types of features work in the same way, but with different object names:

+ + + +
+

In HTML, CSS, and JS pages, you'll normally only need one feature. API interfaces work slightly differently — they always have multiple sub-features (see {{anch("Sub-features")}}, below).

+ +

Basic structure inside a feature

+ +

Inside a feature __compat member, you need to include the following members:

+ + + +

The names of the browser members are defined in the schema (see Browser identifiers). You should use the full list of currently defined identifiers. If you wish to add another browser, talk to us first, as this could have a wide-ranging impact and should not be done without careful thought.

+ +

In a basic browser compat data file, you'll only need to include "version_added" inside the browser identifier members (we'll cover {{anch("Advanced cases")}} later on). The different values you might want to include are as follows:

+ + + +

Inside the status member, you'll include three submembers:

+ + + +

The feature data for border-width (also see border-width.json) is shown below as an example:

+ +
"__compat": {
+  "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/border-width",
+  "support": {
+    "chrome": {
+      "version_added": "1"
+    },
+    "webview_android": {
+      "version_added": "2"
+    },
+    "edge": {
+      "version_added": true
+    },
+    "edge_mobile": {
+      "version_added": true
+    },
+    "firefox": {
+      "version_added": "1"
+    },
+    "firefox_android": {
+      "version_added": "1"
+    },
+    "ie": {
+      "version_added": "4"
+    },
+    "ie_mobile": {
+      "version_added": "6"
+    },
+    "opera": {
+      "version_added": "3.5"
+    },
+    "opera_android": {
+      "version_added": "11"
+    },
+    "safari": {
+      "version_added": "1"
+    },
+    "safari_ios": {
+      "version_added": "3"
+    }
+  },
+  "status": {
+    "experimental": false,
+    "standard_track": true,
+    "deprecated": false
+  }
+}
+ +

Adding a description

+ +

There is a fourth, optional, member that can go inside the __compat member — description. This can be used to include a human-readable description of the feature. You should only include this if it is hard to see what the feature is from glancing at the data. For example, it might not be that obvious what a constructor is from looking at the data structure, so you can include a description like so:

+ +
{
+  "api": {
+    "AbortController": {
+      "__compat": {
+        ...
+      },
+      "AbortController": {
+        "__compat": {
+          "mdn_url": "https://developer.mozilla.org/docs/Web/API/AbortController/AbortController",
+          "description": "<code>AbortController()</code> constructor",
+          "support": {
+            ...
+          }
+        }
+      }
+
+      ... etc.
+    }
+  }
+}
+ +

Sub-features

+ +

In a page where the compat table has more than one row, you'll need multiple subfeatures inside each feature to define the information for each row. This can happen, for example, when you've got the basic support for a feature stored in one row, but then the feature also has a new property or value type that was addded much later in the specification's life and is only supported in a couple of browsers.

+ +

As an example, see the compat data and corresponding MDN page for the background-color property. The basic support exists inside the __compat object as explained above, then you have an additional row for browsers' support for "alpha channel for hex values", which contains its own __compat object.

+ +
{
+  "css": {
+    "properties": {
+      "background-color": {
+        "__compat": {
+          ...
+        },
+        "alpha_ch_for_hex": {
+          "__compat": {
+            ...
+          },
+        }
+      }
+    }
+  }
+}
+ +

For an API, you've got the top two levels defined as api.name-of-the-interface, then a top-level __compat section to define the overall browser compatibility of the interface, then a sub-feature for each of the methods, properties, and constructors contained inside the interface. The basic structure looks like this:

+ +
{
+  "api": {
+    "VRDisplay": {
+      "__compat": {
+        ...
+      },
+      "cancelAnimationFrame": {
+        "__compat": {
+          ...
+        }
+      },
+      "capabilities": {
+        "__compat": {
+          ...
+        }
+      },
+
+      ... etc.
+
+    }
+  }
+}
+ +

See VRDisplay.json for a full example.

+
+ +

Adding data: Advanced cases

+ +

There are some advanced features that you'll want to include in browser compat data. The aim of this section is to list the most common ones, providing an example of each to show how you can implement them in your own compat data.

+ +

Including a footnote

+ +

Often compat tables will include footnotes related to certain entries that explain useful details or strange behavior that developers will find useful. As an example, the Chrome Android entry for {{domxref("VRDisplay.capabilities")}} (see also VRDisplay.json)  (at the time of writing) had a footnote "Currently supported only by Google Daydream." To include this in the capabilities data, we added a "notes" submember inside the relevant "chrome_android" submember; it would look like this:

+ +
"chrome_android": {
+  "version_added": true,
+  "notes": "Currently supported only by Google Daydream."
+}
+ +

Including a vendor prefix

+ +

If a feature is supported behind a vendor prefix in one or more browsers, you'll want to make that clear in the browser compat data. imagine you had a feature that was supported with a -moz- prefix in Firefox. To specify this in the compat data, you'd need to add a "prefix" submember inside the relevant "firefox" submember. It would look something like this:

+ +
"firefox": {
+  "version_added": true,
+  "prefix": "-moz-"
+}
+ +

Including browser preferences or flags

+ +

Some features may be supported in a browser, but they are experimental and turned off by default. If a user wants to play with this feature they need to turn it on using a preference/flag.

+ +

To represent this in the compat data, you need to add the "flags" submember inside the relevant browser identifier submember. The value of "flags" is an array of objects each of which contains of three members:

+ + + +

So to add a preference/flag to the Chrome support for a feature, you'd do something like this:

+ +
"chrome": {
+  "version_added": "50",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "Enable Experimental Web Platform Features",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

If a feature is behind two or more flags, you can add additional objects to the "flags" array, like in this case, for example:

+ +
"firefox": {
+  "version_added": "57",
+  "flags": [
+    {
+      "type": "preference",
+      "name": "dom.streams.enabled",
+      "value_to_set": "true"
+    },
+    {
+      "type": "preference",
+      "name": "javascript.options.streams",
+      "value_to_set": "true"
+    }
+  ]
+},
+ +

Including a version where support was removed

+ +

Sometimes a feature will be added in a certain browser version, but then removed again as the feature is deprecated. This can be easily represented using the "version_removed" submember, which takes as its value a string representing the version number it was removed on. For example:

+ +
"firefox": {
+  "version_added": "35",
+  "version_removed": "47",
+},
+ +

Including multiple support points for the same browser entry

+ +

Sometimes you'll want to add multiple support data points for the same browser inside the same feature.

+ +

As an example, the {{cssxref("text-align-last")}} property (see also text-align-last.json) was added to Chrome in version 35, supported behind a pref.

+ +

The support mentioned above was then removed in version 47; also in version 47, support was added for text-align-last enabled by default.

+ +

To include both of these data points, you can make the value of the "chrome" submember an array containing two support information objects, rather than just a single support information object:

+ +
"chrome": [
+  {
+    "version_added": "47"
+  },
+  {
+    "version_added": "35",
+    "version_removed": "47",
+    "flags": [
+      {
+        "type": "preference",
+        "name": "Enable Experimental Web Platform Features",
+        "value_to_set": "true"
+      }
+    ]
+  }
+],
+ +
+

Note: You should put the most current or important support point first in the array — this makes the data easier to read for people who just want to scan it for the latest info.

+
+ +

Including an alternative name

+ +

Occasionally browsers will support a feature under a different name to the name defined in its specification. This might be for example because a browser added experimental support for a feature early, and then the name changed before the spec stabilized.

+ +

To include such a case in the browser compat data, you can include a support information point that specifies the alternative name inside an "alternative_name" member.

+ +
+

Note: The alternative name might not be an exact alias — it might have differing behaviour to the standard version.

+
+ +

Let's look at an example. The {{cssxref("border-top-right-radius")}} property (see also border-top-right-radius.json) was supported in Firefox:

+ + + +

To represent this in the data, we used the following JSON:

+ +
"firefox": [
+  {
+    "version_added": "4",
+    "notes": "Prior to Firefox 50.0, border styles of rounded corners were always rendered as if <code>border-style</code> was solid. This has been fixed in Firefox 50.0."
+  },
+  {
+    "prefix": "-webkit-",
+    "version_added": "49",
+    "notes": "From Firefox 44 to 48, the <code>-webkit-</code> prefix was available with the <code>layout.css.prefixes.webkit</code> preference. Starting with Firefox 49, the preference defaults to <code>true</code>."
+  },
+  {
+    "alternative_name": "-moz-border-radius-topright",
+    "version_added": "1",
+    "version_removed": "12"
+  }
+],
+ +

Pushing a change back to the main repo

+ +

Once you are finished with adding your compat data, you should first test it using the following commands:

+ + + +

If it is looking OK, you then need to commit it and push it back up to your remote fork on GitHub. You can do this easily with terminal commands like this:

+ +
git add .
+git commit -m 'adding compat data for name-of-feature'
+git push
+ +

Now go to your remote fork (i.e. https://github.com/your-username/browser-compat-data) and you should see information about your push at the top of the files list (under "Your recently pushed branches"). You can create a pull request (starting the process of pushing this to the main repo) by pressing the "Compare & pull request" button, then following the simple prompts on the subsequent screen.

+ +

At this point, you just need to wait. A reviewer will review your pull request, and merge it with the main repo, OR request that you make changes. If changes are needed, make the changes and submit again until the PR is accepted.

+ +

Inserting the data into MDN pages

+ +

Once your new data has been included in the main repo, you can start dynamically generating browser compat tables based on that data on MDN pages using the \{{Compat}} macro. This takes a single parameter, the dot notation required to walk down the JSON data and find the object representing the feature you want to generate the compat table for.

+ +

Above the macro call, to help other contributors finding their way, you should add a hidden text that is only visible in MDN contributors in edit mode:

+ +
<div class="hidden">
+<p>The compatibility table on this page is generated from structured data.
+If you'd like to contribute to the data, please check out
+<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>
+and send us a pull request.</p>
+</div>
+ +

As an example, on the {{httpheader("Accept-Charset")}} HTTP header page, the macro call looks like this: \{{Compat("http.headers.Accept-Charset")}}. If you look at the accept-charset.json file in the repo, you'll see how this is reflected in the JSON data.

+ +

As another example, The compat table for the {{domxref("VRDisplay.capabilities")}} property is generated using \{{Compat("api.VRDisplay.capabilities")}}. The macro call generates the following table (and corresponding set of notes):

+ +
+ + +

{{Compat("api.VRDisplay.capabilities")}}

+ +
+

Note: The filenames often match the labels given to the interfaces inside the JSON structures, but it is not always the case. When the macro calls generate the tables, they walk through all the files until they find the relevant JSON to use, so the filenames are not critical. Saying that, you should always name them as intuitively as possible.

+
diff --git "a/files/de/mdn/\303\274ber/index.html" "b/files/de/mdn/\303\274ber/index.html" new file mode 100644 index 0000000000..745152be79 --- /dev/null +++ "b/files/de/mdn/\303\274ber/index.html" @@ -0,0 +1,99 @@ +--- +title: Über MDN +slug: MDN/Über +translation_of: 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/\303\274ber/link_zu_mdn/index.html" "b/files/de/mdn/\303\274ber/link_zu_mdn/index.html" new file mode 100644 index 0000000000..47411ecf30 --- /dev/null +++ "b/files/de/mdn/\303\274ber/link_zu_mdn/index.html" @@ -0,0 +1,82 @@ +--- +title: Verknüpfung zu MDN +slug: MDN/Über/Link_zu_MDN +tags: + - Anleitung + - MDN Meta + - Richtlinien +translation_of: MDN/About/Linking_to_MDN +--- +
{{MDNSidebar}}

Wir bekommen regelmässige Anfragen von Benutzern, wie Verknüpfungen (Link) zu MDN erstellt werden können, und ob dies überhaupt erlaubt ist. Die kurze Antwort ist: Ja! Wie das am besten zu bewerkstelligen ist, wird im folgenden Abschnitt erklärt, bitte weiterlesen!

+ +

Darf ich zu MDN verknüpfen?

+ +

Ja! Absolut! Nicht nur ist der Link die Essenz des Webs, es ist gleichzeitig ein Weg den Benutzer auf glaubwürdige Quellen zu verweisen, sondern auch um die Arbeit zu zeigen, die die Community macht.

+ +

Also, ja, wir bitten dich definitiv auf den Inhalt von MDN zu verknüpfen. Bitte nicht zögern: verknüpfe zur MDN Hauptseite, oder, besser, verknüpfe tiefer zu einer spezifischen Seite in MDN, so wie angebracht. Für eine genaue Beschreibung zu welchen Seiten verknüpft werden kann, ist weiter unten nachzulesen.

+ +

Zu welcher Seite sollte ich verknüpfen?

+ +

Es gibt keine spezifische Seite zu der man sich verknüpfen kann. Was wichtig ist, ist wie relevant die Seite für eure Leser ist.

+ + + +

Aber, wirklich, es sollte zur am besten passenden Seite für die Benutzer verknüpft werden. Bitte nicht vergessen, das wichtigste ist der Leser, nicht die Verknüpfung oder wir.

+ +

Wie wird eine gute Verknüpfung erstellt?

+ +

Eine Verknüpfung zu erstellen ist einfach, aber eine gute Verknüpfung zu erstellen ist umso schwieriger. Es gibt verschiedene Möglichkeiten:

+ +

Verknüpfen im Text

+ +

Dies ist wohl die hilfreichste Art der Verknüpfung: der Sinn besteht darin, den Benutzer zu weiteren Informationen zu einem bestimmten Konzept zu leiten. Die meiste Zeit, führen diese Verknüpfungen zu Seiten, die bestimmte Informationen zu einem Thema enthalten und nicht zu einer generellen Heimseite eines Webauftritts (es gibt bestimmt auch Ausnahmen).

+ +
+

… durch die Benutzung der IndexedDB-API, können Informationen in einer lokalen Datenbank gespeichert werden…

+
+ +

Solche Verknüpfungen sind nicht nur für den Benutzer wertvoll, welcher alle relevanten Informationen mit einem Klick finden kann, sondern auch für MDN, weil dieser präzise Kontext womöglich Leser dazu bringt, den Inhalt von MDN zu mögen. Unsere Mission besteht darin, dem Leser zu helfen, alle wichtigen Informationen zu einem Thema schnellstmöglich zu finden.

+ +

Was zu vermeiden ist, wenn Verknüpfungen im Text erstellt werden

+ +

Verknüpfungen im Text sind gut und hilfreich, aber es sollten einige Dinge beachtet werden:

+ + + +

Ein Banner oder ein Bild zur Site hinzufügen

+ +

Ein anderer Weg um zu MDN zu verknüpfen ist das Hinzufügen einer Bildverknüpfung ausserhalb des Textes, zum Beispiel in der Seitenleiste. Dies hat eine andere Bedeutung: so wie die Verknüpfung innerhalb des Textes zusätzliche Informationen für den Benutzer zugängig macht, ist das Hinzufügen von Bildverknüpfungen in der Seitenleiste mehr ein Weg um die Unterstützung vom MDN-Projekt hervorzuheben, oder ein Weg um MDN bekannter zu machen. Es ist ein Weg um MDN als globale Quelle von Informationen anzubieten.

+ +

Bitte nicht zögern um uns ihre Unterstützung zu zeigen: besuchen Sie Promote MDN und bauen Sie eine Schaltfläche (Button), welche auf Ihre Webseite zugeschnitten ist. Sie sind selbstverständlich frei zu anderen Seiten zu verknüpfen, wie zum Beispiel zu einer der Landungsseiten.

+ +

Automatische Verknüpfung zu MDN aus WordPress

+ +

Wir haben ein WordPress plugin erstellt, welches automatisch aus den Blogs heraus, Verknüpfungen zu den entsprechenden MDN-Seiten erstellt. Es verfolgt die oben gezeigten Richtlinien, und bildet so eine grosse Hilfe für Blogger, die über Webinhalte schreiben. Geben Sie ein schönes Aussehen und installieren Sie es wo es hilfreich sein kann.

+ +

Vielen Dank für die Unterstützung!

+ +

Cross-Origin Ressourcenfreigabe

+ +

Unsere Absicht ist CORS auf allen frei zugänglichen Informationen auf MDN anzubieten, wo es ungefährlich ist. Sollten Sie etwas finden was nicht erreicht werden kann mit cross-origin Anfragen, ist dies ein Fehler der behoben werden sollte!

diff --git a/files/de/mdn_at_ten/history_of_mdn/index.html b/files/de/mdn_at_ten/history_of_mdn/index.html new file mode 100644 index 0000000000..3e33c984f3 --- /dev/null +++ b/files/de/mdn_at_ten/history_of_mdn/index.html @@ -0,0 +1,228 @@ +--- +title: MDNs Geschichte +slug: MDN_at_ten/History_of_MDN +tags: + - MDN +translation_of: 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.

+ +
+ +
+ +
+
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 new file mode 100644 index 0000000000..91495de944 --- /dev/null +++ b/files/de/mdn_at_ten/index.html @@ -0,0 +1,40 @@ +--- +title: 10 Jahre MDN +slug: MDN_at_ten +tags: + - MDN + - TopicStub +translation_of: MDN_at_ten +--- + + +
+
+

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_at_ten/zum_mdn_beitragen/index.html b/files/de/mdn_at_ten/zum_mdn_beitragen/index.html new file mode 100644 index 0000000000..7fc3bce3fa --- /dev/null +++ b/files/de/mdn_at_ten/zum_mdn_beitragen/index.html @@ -0,0 +1,93 @@ +--- +title: Zum MDN beitragen +slug: MDN_at_ten/Zum_MDN_beitragen +tags: + - MDN Meta + - Mitmachen +translation_of: MDN_at_ten/Contributing_to_MDN +--- +
+
+

Wie Du helfen kannst

+ +

Das ist sehr einfach. Es gibt zwei Wege: Siehst Du etwas was man auf einer Seite verbessern kann, z.B. Tippfehler korrigieren, neue Informationen hinzufügen oder inhaltliche Fehler korrigieren? Dann klicke auf die grosse blaue "Bearbeiten" Schaltfläche ganz oben auf der Seite. Weisst Du etwas worüber es noch keinen Artikel im MDN gibt? Dann lege eine neue Seite an; unsere Gemeinschaft von erstklassigen Redakteuren und Textern wird sicherstellen, dass Deine Seite unseren Design-Richtlinien entspricht und sich am richtigen Platz auf der MDN-Homepage befindet. Du brauchst keine Angst vor Fehlern haben. Jeder kann helfen, das Web zu verbessern.

+
+ +
+
+
+

Mach mit!

+ +

Hilf uns der Welt zu zeigen wie man für ein offenes Internet entwickelt!

+ +

Mitmachen

+
+
+
+
+ +
+
+

Einige Mitwirkende

+ +

Das MDN besteht aus einer grossen Gemeinschaft von Helfern. Wir können hier nicht die Profile aller Mitwirkenden präsentieren (das würde sehr lange dauern!). Aber wir möchten Dir einige Menschen vorstellen, die einen wesentlichen Beitrag zum MDN geleistet haben und immer noch leisten und die Leute, die Dir sehr wahrscheinlich im Falle von Fragen oder Problemen im MDN Web Docs helfen können.

+ +
+
+

Chris Blizzard
+ Früherer Director of Evangelism, Mozilla

+ +

Blizzard beaufsichtigte und leitete den Wandel des Mozilla Developer Centers (MDC) weg von einer auf Mozilla-Themen fokussierten Quelle hin zu einem community-basierten Netzwerk für viele verschiedene Web-Entwickler.

+ +

Nickolay Ponomarev
+ Volunteer

+ +

Nickolay war einer der ersten Mitwirkenden und half bei der initialen Bereinigung des Systems beim Wechsel vom MDC zum MDN. Er hat seitdem in vielen Bereichen geholfen, sowohl bei Web Standards als auch bei Mozilla-Produkten.

+ +

Andrew Overholt
+ Engineering Manager

+ +

Andrew leitet ein Entwickler-Team im Bereich Web API. Ein Teil seiner Arbeit ist es, alle DOM und API Entwickler zu ermutigen eine exzellente Dokumentation zu ermöglichen indem sie den Texter-Teams alle benötigten Informationen liefern, die erstellten Dokumentationen überprüfen und Beispielcode bereit stellen. Dieses Beispiel macht das MDN Team sehr, sehr glücklich.

+ +

Jérémie Patonnier
+ Project Manager

+ +

Jérémie begann im Jahr 2011 das MDN durch das Dokumentieren von SVG Eigenschaften zu unterstützen, denn er brauchte diese Informationen für seine eigene Arbeit. Jérémie wurde zur Führungsperson in der französischen MDN community und veranstaltet regelmäßig "Mercredi Docs" (Wednesday Docs) Tagungen in der Pariser Niederlassung von Mozilla . Momentan leitet er die Projekte zum Aufbau des Schulungsbereichs und zum Verbessern und Vereinheitlichen von Browser Kompatibilitätsdaten im MDN.

+ +

Julien (Sphinx)
+ Volunteer

+ +

Julien steuerte den Löwenanteil zum Übersetzen des gesamten JavaScript Bereichs ins Französische bei. Viele andere halfen dabei mit, aber Julien verbrachte viele Monate lang viele Nächte und Wochenenden damit die JavaScript Artikel zu übersetzen.

+ +

Jeff Walden
+ Software Engineer, JavaScript Engine

+ +

Jeff Walden ist jetzt im SpiderMonkey Team, welches am MDN von Anfang an mitgewirkt hat und das in vielen Themenbereichen, z.B. XPCOM, Mozilla build and test, JavaScript, CSS, und anderen.

+
+ +
+

Priyanka Nag
+ Volunteer

+ +

Priyanka Nag trat im Jahr 2012 dem MDN bei. Aktiv wurde sie in der MDN community aber erst nach dem Mozilla Summit 2013, wo sie mit Luke Crouch und David Walsh vom MDN Entwickler-Team zusammen arbeitete. Das war ihre größte Inspiration um im MDN aktiv zu werden. Priyanka kümmert sich am liebsten um die Verbreitung des MDN, veranstaltet MDN Events und gewinnt neue MDN-Mitwirkende, zudem pflegt sie das Wiki von Zeit zu Zeit. Momentan arbeitet sie als Technische Texterin bei Red Hat und voller Stolz erzählt sie dass ihr Interesse am technischen Schreiben durch die Mitarbeit im MDN geweckt wurde, was letzlich auch ihre Entscheidung hinsichtlich ihres beruflichen Wegs massgeblich und positiv beeinflusst hat.

+ +

Saurabh Nair
+ Volunteer

+ +

Saurabh wirkt seit 2011 im MDN mit und wurde im letzten Jahr aktiver. Er ist im  “spam watch” Team, welches nach Spam-Seiten Ausschau hält, diese löscht und die Spammer verbannt sobald sie auftauchen. Da er in Indien lebt kann er diese Arbeit machen während die MDN-Mitarbeiter in Europa und Nord-Amerika schlafen.

+ +

Eric Shepherd (Sheppy)
+ Senior Technical Writer

+ +

{{UserLink("Sheppy")}} war der erste bei Mozilla angestellte Vollzeit-Texter ausschliesslich für Entwickler-Dokumentation, begonnen hat er am 3. April 2006. Er schreibt über alles was dokumentiert werden muss; einschliesslich der Sachen, mit denen sonst niemand etwas zu tun haben will. Über die Jahre hat er ausführlich über alles Mögliche geschrieben von Add-ons bis XUL.

+ +

Sebastian Zartner
+ Volunteer

+ +

Sebastians erste Arbeiten waren im Jahr 2007 im Bereich deutschsprachiger Übersetzungen, aber er begann schnell die englischsprachigen Artikel zu bearbeiten. Er hat sowohl zum Content als auch zur Struktur der CSS Referenz viel beigetragen, einschliesslich der Erstellung eines JSON API für CSS Seiten und Makros die dieses API verwenden.

+
+
+
+ +
{{TenthCampaignQuote(7)}} {{TenthCampaignQuote(5)}}
+
diff --git a/files/de/mercurial/index.html b/files/de/mercurial/index.html new file mode 100644 index 0000000000..35b8843732 --- /dev/null +++ b/files/de/mercurial/index.html @@ -0,0 +1,36 @@ +--- +title: Mercurial +slug: Mercurial +translation_of: Mozilla/Mercurial +--- +

Mercurial (also known as "hg"), is the distributed version control software used for the development of Firefox, Thunderbird, and the shared Gecko core. It replaced CVS after Mozilla 1.9 was branched.

+ +

hg is the Mercurial command-line tool, Hg being the chemical symbol for the element mercury.

+ +

Installation, configuration, and getting the source

+ +

See Installing Mercurial for installation and configuration tips.

+ +

See Getting Mozilla Source Code Using Mercurial for getting a tree to build.

+ +

Learning to use Mercurial

+ +

If you are new to Mercurial, you should start with the official guide.

+ +

Then, move on to Mercurial basics and Mercurial FAQ and the version control tool docs for Mozilla-centric Mercurial information.

+ +

Further reading

+ +

See Mercurial Queues for managing queues of patches, and how to integrate Mercurial with Bugzilla.

+ +

The Mercurial tag lists the Mercurial-related articles on MDN.

+ +

And on wiki.mozilla.org, these helpful pages:

+ + + +

{{ languages( { "es": "es/Mercurial", "fr": "fr/Mercurial", "ja": "ja/Mercurial" } ) }}

diff --git a/files/de/midas/index.html b/files/de/midas/index.html new file mode 100644 index 0000000000..547ad3f550 --- /dev/null +++ b/files/de/midas/index.html @@ -0,0 +1,328 @@ +--- +title: Midas +slug: Midas +tags: + - DOM + - Midas + - NeedsContent + - NeedsHelp + - NeedsTechnicalReview + - NeedsTranslation + - TopicStub + - needsattention +translation_of: Mozilla/Projects/Midas +--- +

Introduction

+ +

Midas is the code name for Gecko's built-in rich text editor. Midas can be enabled via JavaScript on an HTML document. When Midas is enabled, the document becomes editable by the user. Scripting for Midas is based on the DHTML commands supported by Internet Explorer. Internet Explorer supports the ability to make an entire document editable by setting the designMode property of the {{domxref("document")}} object; this is how Midas is invoked in Gecko. Internet Explorer also supports the ability to edit specific elements using the contentEditable attribute; Starting with Firefox 3, Gecko also supports contentEditable. Once Midas is invoked, a few more methods of the document object become available.

+ +

Properties

+ +
+
document.designMode
+
By setting this property to "on", the document becomes editable.
+
+ +

Notes

+ +

Since an entire document becomes editable, authors often load the editable document into an IFRAME and do the bulk of the scripting in the parent document. According to standards, The IFRAME element has the contentDocument property that refers to the document in the inline frame. It also has a property called contentWindow that refers to the window object inside the inline frame. This also avoids problems with {{bug(198155)}}.

+ +

In addition to the built-in commands, advanced editing can be done by manipulating the {{domxref("Selection")}} and {{domxref("range")}} objects. It is beneficial to be familiar with these objects when working with an editable document.

+ +

Examples

+ +

This example shows the basic structure described in the Notes section :

+ +
<html>
+	<head>
+		<title>Simple Edit Box</title>
+	</head>
+	<body>
+		<iframe
+			id="MidasForm"
+			src="about:blank"
+			onload="this.contentDocument.designMode='on';"
+		></iframe>
+	</body>
+</html>
+
+ +

Methods

+ +
+
{{domxref("Document.execCommand")}}
+
Executes the given command.
+
{{domxref("Document.queryCommandEnabled")}}
+
Determines whether the given command can be executed on the document in its current state.
+
{{domxref("Document.queryCommandIndeterm")}}
+
Determines whether the current selection is in an indetermined state.
+
{{domxref("Document.queryCommandState")}}
+
Determines whether the given command has been executed on the current selection.
+
{{domxref("Document.queryCommandValue")}}
+
Determines the current value of the document, range, or current selection for the given command.
+
+ +

Supported Commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandValueDescription
backcolorA color code.This command will set the background color of the document.
bold If there is no selection, the insertion point will set bold for subsequently typed characters. +

If there is a selection and all of the characters are already bold, the bold will be removed. Otherwise, all selected characters will become bold.

+
contentReadOnly This command will make the editor readonly(true)or editable(false). Anticipated usage is for temporarily disabling input while something else is occurring elsewhere in the web page.
copy If there is a selection, this command will copy the selection to the clipboard. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-C) with or without the signed JS or any code on the page to handle it.

+
createlinkA URI.This command will not do anything if no selection is made. If there is a selection, a link will be inserted around the selection with the url parameter as the href of the link.
cut If there is a selection, this command will copy the selection to the clipboard and remove the selection from the edit control. If there isn't a selection, nothing will happen. +

note: this command won't work without setting a pref or using signed JS. See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-X) with or without the signed JS or any code on the page to handle it.

+
decreasefontsize This command will add a <small> tag around selection or at insertion point.
delete This command will delete all text and objects that are selected. If no text is selected it deletes one character to the right. This is similar to the Delete button on the keyboard.
fontnameA font nameThis command will set the font face for a selection or at the insertion point if there is no selection. +

The given string is such as would be used in the "face" attribute of the font tag, i.e., a comma-separated list of font names.

+
fontsizeA numberThis command will set the fontsize for a selection or at the insertion point if there is no selection. +

The given number is such as would be used in the "size" attribute of the font tag.

+
forecolorA color codeThis command will set the text color of the selection or at the insertion point.
formatblockH1, H2, H3, H4, H5, H6, P, DIV, ADDRESS, BLOCKQUOTE (more?)The selection surrounded by the given block element.
headingH1, H2, H3, H4, H5, H6Selected block will be formatted as the given type of heading.
hilitecolorA color codeThis command will set the hilite color of the selection or at the insertion point. It only works with styleWithCSS enabled.
increasefontsize This command will add a <big> tag around selection or at insertion point.
indent Indent the block where the caret is located. If the caret is inside a list, that item becomes a sub-item one level deeper.
insertbronreturntrue/falseSelects whether pressing return inside a paragraph creates another paragraph or just inserts a <br> tag.
inserthorizontalrulenull/string (when string is the Line's id)This command will insert a horizontal rule (line) at the insertion point. +

Does it delete the selection? Yes!

+
inserthtmlA string.This command will insert the given html into the <body> in place of the current selection or at the caret location. +

The given string is the HTML to insert.

+
insertimageA URI.This command will insert an image (referenced by the given url) at the insertion point.
insertorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and an OL. If the caret is inside a bulleted item, the bulleted item becomes a numbered item.
insertunorderedlist Depends on the selection. If the caret is not inside a non-LI block, that block becomes the first LI and UL. If the caret is inside a numbered item, the numbered item becomes a bulleted item.
insertparagraph Inserts a new paragraph.
italic If there is no selection, the insertion point will set italic for subsequently typed characters. +

If there is a selection and all of the characters are already italic, the italic will be removed. Otherwise, all selected characters will become italic.

+
justifycenter Center-aligns the current block.
justifyfull Fully-justifies the current block.
justifyleft Left-aligns the current block.
justifyright Right aligns the current block.
outdent Outdent the block where the caret is located. If the block is not indented prior to calling outdent, nothing will happen. +

If the caret is in a list item, the item will bump up a level in the list or break out of the list entirely.

+
paste This command will paste the contents of the clipboard at the location of the caret. If there is a selection, it will be deleted prior to the insertion of the clipboard's contents. +

note: this command won't work without setting a pref or using signed JS. user_pref("capability.policy.policynames", "allowclipboard"); user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess"); See: more about security preferences

+ +

note: the shortcut key will automatically trigger this command (typically accel-V) with or without the signed JS or any code on the page to handle it.

+
redo This command will redo the previous undo action. If undo was not the most recent action, this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-shift-Z)

+
removeformat Removes inline formatting from the current selection.
selectall This command will select all of the contents within the editable area. +

note: the shortcut key will automatically trigger this command (typically accel-A)

+
strikethrough If there is no selection, the insertion point will set strikethrough for subsequently typed characters. +

If there is a selection and all of the characters are already striked, the strikethrough will be removed. Otherwise, all selected characters will have a line drawn through them.

+
styleWithCSS This command is used for toggling the format of generated content. By default (at least today), this is true. An example of the differences is that the "bold" command will generate <b> if the styleWithCSS command is false and generate css style attribute if the styleWithCSS command is true.
subscript If there is no selection, the insertion point will set subscript for subsequently typed characters. +

If there is a selection and all of the characters are already subscripted, the subscript will be removed. Otherwise, all selected characters will be drawn slightly lower than normal text.

+
superscript If there is no selection, the insertion point will set superscript for subsequently typed characters. +

If there is a selection and all of the characters are already superscripted, the superscript will be removed. Otherwise, all selected characters will be drawn slightly higher than normal text.

+
underline If there is no selection, the insertion point will set underline for subsequently typed characters. +

If there is a selection and all of the characters are already underlined, the underline will be removed. Otherwise, all selected characters will become underlined.

+
undo This command will undo the previous action. If no action has occurred in the document, then this command will have no effect. +

note: the shortcut key will automatically trigger this command (typically accel-Z)

+
unlink If the insertion point is within a link or if the current selection contains a link, the link will be removed and the text will remain.
{{Deprecated_header}}
readonly This command has been replaced with contentReadOnly. It takes the same values as contentReadOnly, but the meaning of true and false are inversed.
useCSS This command has been replaced with styleWithCSS. It takes the same values as styleWithCSS, but the meaning of true and false are inversed.
diff --git a/files/de/midas/sicherheitseinstellungen/index.html b/files/de/midas/sicherheitseinstellungen/index.html new file mode 100644 index 0000000000..acd8aaa5ad --- /dev/null +++ b/files/de/midas/sicherheitseinstellungen/index.html @@ -0,0 +1,73 @@ +--- +title: Sicherheitseinstellungen +slug: Midas/Sicherheitseinstellungen +tags: + - Security preferences + - Sicherheitseinstellungen + - einfügen + - kopieren +translation_of: Mozilla/Projects/Midas/Security_preferences +--- +
+
Um private Informationen der Benutzer zu schützen, können nicht privilegierte Skripten die Befehle Ausschneiden, kopieren und Einfügen in den Mozilla-rich-Text-Editor aufrufen, damit die entsprechenden Tasten auf der Mozilla-Rich-Text-Editing Demo-Seite nicht funktionieren. Um diese Funktionen zu Zwecken der Demo zu aktivieren, müssen Sie Ihre Browsereinstellungen ändern.
+
+ +

Ändern Sie die Einstellungen in Firefox

+ +
    +
  1. +
    +
    Beenden Sie Firefox. Wenn Sie Schnellstartleiste ausgeführt haben (Dies ist unter Windows ein Symbol in der Symbolleiste), die zu beenden.
    +
    +
    2. +
  2. Finden Sie Ihr Firefox-Profil-Verzeichnis.
    3. +
  3. +
    Öffnen Sie die Datei user.js, aus diesem Verzeichnis in einem Texteditor. Wenn keine Datei user.js vorhanden ist, erstellen.
    +
    4. +
  4. +
    Fügen Sie diese Zeilen in user.js:
    + + 
    user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
    +
    5. +
  5. +
    +
    Ändern Sie die Url https://www.mozilla.org auf die Site ab, wofür Sie diese Funktion aktivieren möchten.
    +
    +
    6. +
  6. +
    +
    Speichern Sie die Datei und starten Sie Firefox neu. Die Zwischenablage-Tasten sollten jetzt funktionieren.
    +
    +
    7. +
+ +
+
+
Hinweis: Die Einstellung ist Website sowie spezifische Protokoll. Zum Beispiel:
+
+ +
user_pref("capability.policy.allowclipboard.sites", "http://www.mozilla.org")
+ +

ist nicht dasselbe wie:

+ +
user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org")
+ +

Dies ist da die erste HTTP verwendet, während die zweite HTTPS verwendet.

+
+ +
+
Wenn Sie mehreren URLs die Einfügeoperation Zugriff zulassen möchten, trennen Sie die URLs mit einem Leerzeichen. Zum Beispiel:
+
+ +
user_pref("capability.policy.allowclipboard.sites",
+
+ "https://www.mozilla.org https://developer.mozilla.org")
+
+ +

See also

+ +

Lesen Sie weitere Informationen zu den Sicherheitsrichtlinien hier:
+ Configurable Security Policies.

diff --git a/files/de/mozilla/add-ons/add-on_guidelines/index.html b/files/de/mozilla/add-ons/add-on_guidelines/index.html new file mode 100644 index 0000000000..e781073547 --- /dev/null +++ b/files/de/mozilla/add-ons/add-on_guidelines/index.html @@ -0,0 +1,124 @@ +--- +title: Add-on guidelines +slug: Mozilla/Add-ons/Add-on_guidelines +tags: + - Zusatzgerä +translation_of: 'https://extensionworkshop.com/documentation/publish/add-on-policies/' +--- +

These add-on guidelines were created to foster an open and diverse add-on developer community while ensuring an excellent user experience. They apply to all add-ons and add-on updates regardless of where they are hosted, and also apply to customizations performed by installers that configure Firefox without using an add-on. Add-ons hosted on AMO are subject to additional policies.

+ +

Be Transparent

+ + + +

Be Respectful to Users

+ + + +

Be Safe

+ + + +

Be Stable

+ + + +

Exceptions

+ + + +

Other exceptions may apply.

+ +

Enforcement

+ +

Add-ons that do not follow these guidelines may qualify for blocklisting, depending on the extent of the violations. Guidelines qualified with the wordmust are especially important, and violations thereof will most likely result in a blocklisting nomination.

+ +

The Add-ons Team will do their best to contact the add-on's developers and provide a reasonable time frame for the problems to be corrected before a block is put in place. If an add-on is considered malicious or its developers have proven unreachable or unresponsive, or in case of repeat violations, blocklisting may be immediate.

+ +

Guideline violations should be reported via Bugzilla, under Tech Evangelism > Add-ons. Questions can be posted in the #addons IRC channel.

+ +

These guidelines may change in the future. All updates will be announced in the Add-ons Blog.

diff --git a/files/de/mozilla/add-ons/amo/index.html b/files/de/mozilla/add-ons/amo/index.html new file mode 100644 index 0000000000..5867afab50 --- /dev/null +++ b/files/de/mozilla/add-ons/amo/index.html @@ -0,0 +1,9 @@ +--- +title: AMO +slug: Mozilla/Add-ons/AMO +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/AMO +--- +

Seiten, die addons.mozilla.org dokumentieren:

diff --git a/files/de/mozilla/add-ons/amo/policy/index.html b/files/de/mozilla/add-ons/amo/policy/index.html new file mode 100644 index 0000000000..45bdc8ac09 --- /dev/null +++ b/files/de/mozilla/add-ons/amo/policy/index.html @@ -0,0 +1,19 @@ +--- +title: AMO Policies +slug: Mozilla/Add-ons/AMO/Policy +translation_of: Mozilla/Add-ons/AMO/Policy +--- +

{{AddonSidebar}}

+ +

Mozilla ist bestrebt, unseren Nutzern und Entwicklern eine großartige Add-On-Erfahrung zu bieten. Bitte lesen Sie die folgenden Richtlinien, bevor Sie Ihr Add-on abschicken.

+ + +
+
Developer Agreement
+
Effective January 5, 2016
Review Process
+
Add-ons extend the core capabilities of Firefox, allowing users to modify and personalize their Web experience. A healthy add-on ecosystem, built on trust, is vital for developers to be successful and users to feel safe making Firefox their own. For these reasons, Mozilla requires all add-ons to comply with the following set of policies on acceptable practices. The below is not intended to serve as legal advice, nor is it intended to serve as a comprehensive list of terms to include in your add-on’s privacy policy.
Featured Add-ons
+
How up-and-coming add-ons become featured and what's involved in the process.
Contacting us + +

Wie Sie uns bezüglich dieser Richtlinien oder Ihres Add-ons kontaktieren können.

+ +
diff --git a/files/de/mozilla/add-ons/bootstrapped_extensions/index.html b/files/de/mozilla/add-ons/bootstrapped_extensions/index.html new file mode 100644 index 0000000000..582b48c775 --- /dev/null +++ b/files/de/mozilla/add-ons/bootstrapped_extensions/index.html @@ -0,0 +1,243 @@ +--- +title: Bootstrapped extensions +slug: Mozilla/Add-ons/Bootstrapped_extensions +translation_of: Archive/Add-ons/Bootstrapped_extensions +--- +

{{ gecko_minversion_header("2.0") }}

+
+

Note: All extensions created using the Add-on SDK are bootstrapped! All the bootstrapping code is generated for you, so you don't really need to think about it. Not using the Add-on SDK? Read on...

+
+

Traditional extensions include overlays, wherein the application can load up XUL from the extension's package and automatically apply it atop its own UI. While this makes creating extensions that add to the application's user interface relatively easy, it means that updating, installing, or disabling an extension requires an application restart.

+

Gecko 2.0 {{ geckoRelease("2.0") }} introduces bootstrapped extensions. These are special extensions that, instead of using overlays to apply their user interface to the application, programmatically insert themselves into the application. This is done using a special script file that's included in the extension that contains functions the browser calls to command the extension to install, uninstall, start up, and shut down.

+

All the application does is call into this script file; the extension is responsible for adding and removing its user interface and handling any other setup and shutdown tasks it requires.

+

This article discusses how bootstrapped extensions work. See this tutorial on converting from an overlay extension to restartless for a practical step by step guide to migrating.

+

The startup and shutdown process

+

A key feature of bootstrapped extensions is that they must be able to be started up and shut down on demand by the application. When the extension's startup() function is called, it must manually inject its user interface and other behavior into the application. Similarly, when its shutdown() function is called, it must remove anything it's added to the application, as well as all references to any of its objects.

+

There are several scenarios in which the startup() function may be called; for example:

+ +

Some examples of when the shutdown() function may be called:

+ +

Notes on modifying the application user interface

+

chrome.manifest in bootstrapped add-ons

+

You can use a chrome.manifest file in bootstrapped add-ons to:

+
    +
  1. make your add-on's content available via a chrome:// URL (using the content, locale, and skin instructions in the manifest);
    2. +
  2. replace existing chrome:// URIs with your content (using the override instruction).
    3. +
+

Not all chrome.manifest instructions are supported in bootstrapped add-ons, for example you still cannot register XUL Overlays from a bootstrapped add-on. See the chrome.manifest documentation for details.

+

In Firefox 10 and later the chrome.manifest file located in the root of the add-on's XPI (i.e. a sibling of the install.rdf) is loaded automatically. In Firefox 8 and 9 you had to load/unload the manifest manually using {{ ifmethod("nsIComponentManager", "addBootstrappedManifestLocation") }} and {{ ifmethod("nsIComponentManager", "removeBootstrappedManifestLocation") }}. This feature was unavailable in Firefox versions before 8.

+

Adding user interface manually

+

If you decide to go ahead and try to develop a bootstrapped extension that modifies the application's user interface, here are a few suggestions to get you started.

+

You need to look up the relevant application UI elements by their ID by calling {{ domxref("document.getElementById()") }}, then manipulate them to inject your UI. For example, you can get access to the menu bar in Firefox with document.getElementById("main-menubar").

+

Be sure that at shutdown time, you remove any user interface you've added.

+

Creating a bootstrapped extension

+

To mark an extension as bootstrappable, you need to add the following element to its install manifest:

+
<em:bootstrap>true</em:bootstrap>
+

Then you need to add a bootstrap.js file that contains the required functions; this should be alongside the install.rdf file in the extension's package.

+

Backward compatibility

+

Because older versions of Firefox don't know about the bootstrap property or bootstrap.js file, it's not overly difficult to create an XPI that will work on both as a bootstrappable extension and as a traditional extension. Create your extension as a bootstrappable extension, then add the traditional overlays as well. Newer versions of Firefox will use the bootstrap.js script, ignoring the components and overlays, while older versions will use the overlays.

+

Bootstrap entry points

+

The bootstrap.js script should contain several specific functions, which are called by the browser to manage the extension. The script gets executed in a privileged sandbox, which is cached until the extension is shut down.

+

startup

+

Called when the extension needs to start itself up. This happens at application launch time or when the extension is enabled after being disabled (or after it has been shut down in order to install an update. As such, this can be called many times during the lifetime of the application.

+

This is when your add-on should inject its UI, start up any tasks it may need running, and so forth.

+
void startup(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being started up. This will be one of APP_STARTUP, ADDON_ENABLE, ADDON_INSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

shutdown

+

Called when the extension needs to shut itself down, such as when the application is quitting or when the extension is about to be upgraded or disabled. Any user interface that has been injected must be removed, tasks shut down, and objects disposed of.

+
void shutdown(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being shut down. This will be one of APP_SHUTDOWN, ADDON_DISABLE, ADDON_UNINSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

install

+

Your bootstrap script must include an install() function, which the application calls before the first call to startup() after the extension is installed, upgraded, or downgraded.

+
+ Note: This method is never called if the extension has never been started; for example, if an extension is installed but isn't compatible with the current version of the application, install() never gets called if it is uninstalled before becoming compatible. However, if the extension gets upgraded to a version that's compatible with the application, its install() function will be called at that time, before the first startup() call.
+
void install(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being installed. This will be one of ADDON_INSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

uninstall

+

This function is called after the last call to shutdown() before a particular version of an extension is uninstalled. This will not be called if install() was never called.

+
+ Note: It's important to keep in mind that uninstall() can be called even on extensions that are currently disabled, or are not compatible with the current application. Because of this, it's crucial that the function be implemented to gracefully handle APIs that may not be present in the application. This function will also not be called if a third-party application removes the extension while Firefox isn't running. Simply having code function install() {} IS NOT ENOUGH, if you have code in uninstall it will not run, you MUST run some code in the install function, at the least you must set arguments on the install function so like: function install(aData, aReason) {} then uninstall WILL WORK.
+
+ Note: If you open addon manager and then click "Remove" on addon, it will not call uninstall function right away. Because it was soft uninstalled, as the "Undo" button is there. If you close addon manager or something to make that "Undo" button to go away then the hard uninstall takes place.
+
+ Note: The uninstall function fires on downgrade and upgrade as well so you should make sure it is an uninstall by doing this:
+ function uninstall(aData, aReason) {
+      if (aReason == ADDON_UNINSTALL) {
+           console.log('really uninstalling');
+      } else {
+           console.log('not a permanent uninstall, likely an upgrade or downgrade');
+      }
+ }
+
void uninstall(
+  data,
+  reason
+);
+
+
Parameters
+
+
+ data
+
+ A bootstrap data structure.
+
+ reason
+
+ One of the reason constants, indicating why the extension is being uninstalled. This will be one of ADDON_UNINSTALL, ADDON_UPGRADE, or ADDON_DOWNGRADE.
+
+

Reason constants

+

The bootstrap functions accept a reason parameter, which explains to the extension why it's being called. The reason constants are:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
APP_STARTUP1The application is starting up.
APP_SHUTDOWN2The application is shutting down.
ADDON_ENABLE3The add-on is being enabled.
ADDON_DISABLE4The add-on is being disabled. (Also sent during uninstallation)
ADDON_INSTALL5The add-on is being installed.
ADDON_UNINSTALL6The add-on is being uninstalled.
ADDON_UPGRADE7The add-on is being upgraded.
ADDON_DOWNGRADE8The add-on is being downgraded.
+

Bootstrap data

+

Each of the entry points is passed a simple data structure containing some useful information about the add-on being bootstrapped. More information about the add-on can be obtained by calling AddonManager.getAddonByID(). The data is a simple JavaScript object with the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
idstringThe ID of the add-on being bootstrapped.
versionstringThe version of the add-on being bootstrapped.
installPathnsIFileThe installation location of the add-on being bootstrapped. This may be a directory or an XPI file depending on whether the add-on is installed unpacked or not.
resourceURInsIURIA URI pointing at the root of the add-ons files, this may be a jar: or file: URI depending on whether the add-on is installed unpacked or not. {{ gecko_minversion_inline("7.0") }}
oldVersionstringThe previously installed version, if the reason is ADDON_UPGRADE or ADDON_DOWNGRADE, and the method is install or startup. {{ gecko_minversion_inline("22.0") }}
newVersionstringThe version to be installed, if the reason is ADDON_UPGRADE or ADDON_DOWNGRADE, and the method is shutdown or uninstall. {{ gecko_minversion_inline("22.0") }}
+
+

Note: An add-on may be upgraded/downgraded at application startup, in this case the startup method reason is APP_STARTUP, and the oldVersion property is not set. Also be aware that in some circumstances an add-on upgrade/downgrade may occur without the uninstall method being called.

+
+

Add-on debugger

+

From Firefox 31 onwards, you can use the Add-on Debugger to debug bootstrapped add-ons.

+

Further reading

+ diff --git a/files/de/mozilla/add-ons/index.html b/files/de/mozilla/add-ons/index.html new file mode 100644 index 0000000000..298aba8754 --- /dev/null +++ b/files/de/mozilla/add-ons/index.html @@ -0,0 +1,198 @@ +--- +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.
+ +
+
+ + + +
+
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/performance_best_practices_in_extensions/index.html b/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html new file mode 100644 index 0000000000..5a1c7e8052 --- /dev/null +++ b/files/de/mozilla/add-ons/performance_best_practices_in_extensions/index.html @@ -0,0 +1,156 @@ +--- +title: Best Practice für Performance in Erweiterungen +slug: Mozilla/Add-ons/Performance_best_practices_in_extensions +tags: + - Add-ons + - Best Practice + - Erweiterungen + - Leitfaden + - Performanz +translation_of: Archive/Add-ons/Performance_best_practices_in_extensions +--- +

Einer der größten Vorteile von Firefox ist seine Erweiterbarkeit. Erweiterungen können beinahe jede beliebige Funktion erfüllen. Doch dieses Konzept hat einen Nachteil: Eine schlecht geschriebene Erweiterung kann sich stark negativ auf das Nutzungserlebnis auswirken, und auch zu allgemeinen Leistungseinbußen in Firefox führen. Der folgende Artikel soll eine Reihe von Vorschlägen liefern, um die Leistung und Geschwindigkeit Deiner Erweiterung zu erhöhen, und dadurch auch von Firefox selbst.

+ +

Die Startup Leistung Verbessern

+ +

Erweiterungen werden immer dann geladen und gestartet, wenn eine neues Browser Fenster geöffnet wird. Im Umkehrschluss bedeutet das aber, dass Deine Erweiterung einen direkten Einfluss darauf hat, wie lange ein Benutzer beim Laden einer neuen Seite warten muss. Es gibt mehrere Möglichkeiten, die Startzeit Deiner Erweiterung zu optimieren und somit die Verzögerung für den Endbenutzer zu minimieren.

+ +

Lade nur, was nötig ist

+ +

Lade keine Ressourcen beim Startup, die nicht direkt benötigt werden. Das sind Daten, die erst nach einer Benutzerinteraktion, etwa ein Klick auf einen Button, benötigt werden, oder Daten die nur bei bestimmten Einstellungen zum Tragen kommen. Auch wenn Deine Erweiterung Features anbietet, die nur funktionieren wenn der Benutzer sich in ein Service eingeloggt hat, lade die Ressourcen für diese Features erst beim tatsächlichen Login.

+ +

Nutze JavaScript Code Module

+ +

Du kannst Teile deiner Erweiterung in JavaScript code modules kapseln. Diese Module können zur Laufzeit bei Bedarf geladen werden und reduzieren somit den Ladeaufwand zum Programmstart.

+ +

Die JavaScript Code Module bieten hier einen Vorteil gegenüber XPCOM Modulen, die immer zu Beginn geladen werden.

+ +

Natürlich hängt es von der Komplexität der Erweiterung ab, ob eine Modularisierung des Codes sinnvoll ist.

+ +

Verschiebe alles, was verschoben werden kann

+ +

Die meisten Erweiterungen fangen das load event eines Fensters ab, um ihren Startup Code auszuführen. Hier sollte so wenig wie möglich getan werden. Das Browser Fenster wird so lange blockiert, bis der load Handler deiner Erweiterung abgeschlossen ist. Das bedeutet, je länger die Erweiterung dafür braucht, desto langsamer wirkt Firefox für den Benutzer.

+ +

Jede Operation, die nicht sofort ausgeführt werden muss, kann mittels einem {{ interface("nsITimer") }} oder mit der {{ domxref("window.setTimeout()") }} Funktion für einen späteren Zeitpunkt geplant werden. Sogar kurze Verzögerungen in diesem Programmbereich können eine große Auswirkung auf die Ladegeschwindigkeit haben.

+ +

General Performance Tips

+ +

Vermeide Speicherlecks

+ +

Speicherlecks können die Leistung deiner Erweiterung stark reduzieren, weil sie dafür sorgen, dass der Garbage Collector und der Cycle Collector mehr Arbeit haben.

+ +

Sogenannte Zombiebereiche sind eine Form von Speicherlecks, die Du selbst sehr einfach entdecken und verhindern kannst. Lies dazu den Artikel zu Zombie compartments, speziell die Sektion Proactive checking of add-ons.

+ +

Im Artikel Common causes of memory leaks in extensions werden weitere Möglichkeiten, wie Du Zombiebereiche und andere Formen von Speicherlecks verhindern kannst, besprochen.

+ +

Neben der direkten Suche nach den oben genannten Lecks solltest Du auch allgemein ein Auge auf die Speichernutzung deines Addons haben und regelmäßig unter about:memory überprüfen. Als Beispiel sei bug 719601 genannt, bei dem ein "System Principal" JavaScript Bereich auf mehrere 100 MB an Speicher anwuchs, was sehr viel größer ist als im Regelfall.

+ +

Nutze JavaScript Module

+ +

JavaScript Module verhalten sich wie jeder andere JavaScript Code, mit dem feinen Unterschied, dass sie als Singletons agieren und daher von Firefox in den Cache abgelegt werden können. Dadurch können sie beim nächsten Start sehr viel effizienter geladen werden. Wann immer deine Erweiterung JavaScript Code von einem {{ HTMLElement("script") }} Element lädt, solltest du überlegen, stattdessen ein JavaScript Modul zu nutzen. Weitere Information über JavaScript Module und ihre Verwendung werden im Artikel Using JavaScript Code Modules besprochen.

+ +

Vermeide Langsamen CSS Code

+ + + +

Vermeide DOM Mutation Event Listeners

+ +

Durch das Hinzufügen eines DOM Mutation Listeners in einem Dokument werden die meisten DOM Mutation Optimierungen deaktiviert und die Performanz von weiteren Änderungen der DOM-Struktur des Dokuments wird stark herabgesetzt. Des weiteren kann dieser Effekt durch das Deaktivieren eines Mutation Listeners nicht wieder rückgängig gemacht werden. Die folgenden Events sollten daher strikt vermieden werden: DOMAttrModified, DOMAttributeNameChanged, DOMCharacterDataModified, DOMElementNameChanged, DOMNodeInserted, DOMNodeInsertedIntoDocument, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMSubtreeModified

+ +

Weitere Information zu diesen veralteten Events findest Du im Artikel Mutation events. Stattdessen sollten Mutation Observers benutzt werden.

+ +

Benutze Lazy Load für Services

+ +

Das JavaScript Modul XPCOMUtils bietet zwei Möglichkeiten für Lazy Loading:

+ + + +

Seit Firefox 4.0 werden viele übliche Services bereits in Services.jsm gecached.

+ +

Reduziere File I/O

+ +

TODO: Hier fehlen Beispiele, wie etwa Links zu Code, Bugs, oder Docs.

+ + + +

Benutze die Richtige Kompressionsstufe für JAR und XPI Dateien

+ +

Daten von komprimierten Archiven zu lesen ist zeitaufwändig. Je stärker ein Archiv komprimiert ist, desto mehr Aufwand muss auch für das Lesen der darin befindlichen Daten erbracht werden. Daher sollten alle JAR Dateien in deiner Erweiterung mit Kompressionslevel 0 (keine Kompression) gepackt werden. Es mag kontraproduktiv klingen, aber dadurch wird zwar die Dateigröße der JAR Datei erhöht, die Größe der XPI Datei aber reduziert, weil dadurch die Möglichkeit gegeben ist, dass beim Komprimiered der XPI Datei Kompressionen der einzelnen im JAR enthaltenen Dateien stattfinden können. (Das kann als eine Art progressive Kompression bezeichnet werden).

+ +

Wenn deine Erweiterung nicht explizit em:unpack verwendet, wird das XPI file ab Firefox 4 nicht entpackt, sondern direkt genutzt. Aus diesem Grund ist eine niedrige Kompressionsstufe zu bevorzugen, wobei wir zu Kompressionslevel 1 raten. Selbst im Vergleich mit maximaler Kompression wird dadurch die Größe des Downloads nur geringfügig angehoben.

+ +

Benutze asynchrone I/O

+ +

Diese Regel kann nicht oft genug wiederholt werden: Benutze niemals synchrone I/O in einem GUI Thread.

+ + + +

Unnötige Verwendung von onreadystatechange in XHR

+ +

Für die meisten Anwendungsfälle sind addEventListener(load/error) und/oder xhr.onload/.onerror völlig ausreichend und bieten den Vorteil, dass sie nur einmal aufgerufen werden, im Gegensatz zu onreadystatechange. In vielen Fällen wird onreadystatechange aus Kompatibilitätsgründen verwendet, wenn XHR in einer Webseite verwendet wird. Das ist oft auchreichend, um Ressourcen zu laden oder Fehler zu behandeln. Allerdings werden load/error Event Listener viel seltener aufgerufen als onreadystatechange, genauer gesagt nur einmal, und es ist nicht notwendig jedes mal den readyState  zu überprüfen oder herauszufinden, ob es sich um ein error Event handelt. onreadystatechange sollte nur benutzt werden, wenn es notwendig ist, eine Antwort noch während ihrem Einlangen zu behandeln.

+ +

Entferne Event Listeners

+ +

Entferne Event Listener, wenn sie nicht mehr benötigt werden. Es ist viel effizienter, Event Listener zu entfernen, als sie etwa durch Flags zu deaktivieren; denn bei zweiterem Ansatz muss bei jedem auftretenden Event die Flag abgefragt werden. Konstrukte wie function onMouseOver(evt) { if (is_active) { /* doSomeThing */ } } sollten also vermieden werden. Auch "Einmal-Events" sollten danach wieder deaktiviert werden:

+ +
 function init() {
+   var largeArray;
+   addEventListener('load', function onLoad() {
+        removeEventListener('load', onLoad, true);
+        largeArray.forEach();
+ }, true);
+
+ +

Andernfalls kann es vorkommen, dass Closure Objekte des Listeners weiter referenziert werden (in obigem Beispiel die Variable largeArray). Der Listener wird dadurch weit über seine nötige Lebensdauer im Speicher gehalten.

+ +

Befülle Menüs nach Bedarf

+ +

Befülle Kontextmenüs (page, tabs, tools) nur nach Bedarf und reduziere Berechnungen auf ein Minimum, um die Reaktionsgeschwindigkeit der UI zu erhalten. Es ist nicht notwendig, bei jeder Änderung das gesamte Menü neu zu befüllen. Diese Aufgabe kann warten, bis der Benutzer das Menü tatsächlich verwenden will. Füge einen Listener für das "popupshowing" Event hinzu und erstelle/befülle das Kontextmenü dort.

+ +

Vermeide Maus-Bewegungs-Events

+ +

Vermeide die Verwendung von Mausbewegungsevents (enter, over, exit) oder minimiere zumindest die Berechnungen, die beim Auslösen eines solchen Events durchgeführt werden auf ein Minimum. Solche Events, besonders das mouseover Event, treten überlichweise sehr häufig auf. Es wird geraten, im Eventhandler nur neue Information zu speichern und die Berechnung erst dann auszuführen, wenn der Benutzer sie benötigt (zum Beispiel bei einem popupshowing Event). Vergiss auch nicht darauf, nicht mehr benötigte Event Listener auszuschalten (siehe oben).

+ +

Vermeide Polling

+ +

Benutze die {{ interface("nsIObserverService") }} Funktion stattdessen. Jede Erweiterung darf via {{ interface("nsIObserverService") }} eigene Benachrichtigungen versenden, aber die wenigsten benutzen diese Funktionalität. Auch viele andere Services bieten Funktionalität zur Beobachtung, etwa nslPrefBranch2.

+ +

aPNG/aGIF sind oft nicht zu Empfehlen

+ +

Animationen benötigen viel Ladezeit, weil eine große Anzahl an Bildern dekodiert werden muss (die Frames der Animation). Animierte Bilder werden häufig aus dem Cache entfernt, was dazu führt, dass sie immer wieder neu geladen werden müssen. Besonders anfällig dafür ist {{ interface("nsITree") }} / {{ XULElem("tree") }}, das unter manchen Umständen gar kein Caching betreibt.

+ +

base64/md5/sha1 Implementierungen

+ +

Verwende keine eigenen base64/md5/sha1 Implementierungen. Die eingebauten Funktionen für base64 atob/btoa sind völlig ausreichend und können in overlay Scripts sowie in JavaScript Modulen verwendet werden. Hashes können mit {{ interface("nsICryptoHash") }}, berechnet werden, das entweder einen String oder {{ interface("nsIInputStream") }} akzeptiert.

+ +

Image sprites

+ +

Mehrere Bilder können in ein Sprite kombiniert werden. Siehe {{ cssxref("-moz-image-region") }}. Die meisten XUL Widgets, die zum Anzeigen von Bildern verwendet werden können (inklusive {{ XULElem("button") }} und {{ XULElem("toolbarbutton") }}) erlauben auch die Verwendung von {{ cssxref("list-style-image") }}. Vermeide die Benutzung der imagesrc/src Attribute für die einbettung von Bildern.

+ +

Verwende Chrome Workers

+ +

Für lange andauernde Berechnungen oder Datenverarbeitung kann {{ domxref("ChromeWorker") }} verwendet werden.

+ + + + diff --git a/files/de/mozilla/add-ons/sdk/builder/index.html b/files/de/mozilla/add-ons/sdk/builder/index.html new file mode 100644 index 0000000000..d243acec45 --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/builder/index.html @@ -0,0 +1,16 @@ +--- +title: Builder +slug: Mozilla/Add-ons/SDK/Builder +tags: + - builder +translation_of: Archive/Add-ons/Add-on_SDK/Builder +--- +

Der Add-on Builder war ein web-basiertes Entwicklungssystem welches Entwicklern erlaubt hat, mit den SDK APIs Addons zu erstellen ohne das cfx Kommando-Zeilen-Tool verwenden zu müssen. Es wurde am 1. April 2014 eingestellt und jetzt leitet es auf die builder.addons.mozilla.org-Seite weiter.
+
+ Falls sie bisher das SDK nur über den Builder verwendet haben, wissen sie bereits das meiste, das sie benötigen um direkt mit dem SDK arbeiten zu können. Die high-level und low-level APIs, die für Builder Addons verwendet wurden sind jeweils die gleichen. Mit folgenden Schritten können sie zum SDK wechseln:

+ + diff --git a/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html b/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html new file mode 100644 index 0000000000..a94176f2cb --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/guides/content_scripts/index.html @@ -0,0 +1,484 @@ +--- +title: Content Scripts +slug: Mozilla/Add-ons/SDK/Guides/Content_Scripts +translation_of: Archive/Add-ons/Add-on_SDK/Guides/Content_Scripts +--- +
+

Viele Add-ons müssen den Inhalt von Webseiten modifizieren oder auf diesen zugreifen können. Der Grundcode des Add-on  bekommt aber keinen direkten Zugriff auf Webinhalte. Stattdessen müssen SDK Add-ons den Code,  der Zugriff auf Webinhalte erhält in seperate Skripte auslagern, die sogenannten "Content Scripts". Diese Seite beschreibt wie man Content Scripts entwickelt und diese implementiert.

+ +

Content Scripts sind einer der verwirrenderen Aspekte beim Arbeiten mit der SDK, aber Sie werden mit Sicherheit mit ihnen arbeiten müssen. Es gibt fünf grundlegende Prinzipien:

+ + + +

Dieses komplette Add-on zeigt alle diese Prinzipien. Die "main.js" hängt ein Content Skript an den aktuellen Tab, mittels den tabs Modules, an. In diesem Fall wird der Content Skript in Form eines Strings übergeben. Das Content Skript ersetzt einfach nur den Inhalt der Seite:

+ +
// main.js
+var tabs = require("sdk/tabs");
+var contentScriptString = 'document.body.innerHTML = "<h1>Diese Seite wurde aufgegessen</h1>";'
+
+tabs.activeTab.attach({
+  contentScript: contentScriptString
+});
+ +

Die folgenden high-level SDK Module können Content Skripts benutzen, um Webseiten zu bearbeiten:

+ + + +

Zusätzlich sind manche SDK Benutzeroberflächen Komponenten - Panel, Sidebar, frames - darauf ausgelegt HTML zu benutzen und haben deshalb seperate Skripte um mit ihrem Inhalt zu interagieren. In vielen Punkten sind diese Skripte wie Content Skripte, aber dies ist nicht Teil dieses Artikels. Um mehr über die Interaktion des Inhalts eines Benutzeroberflächenmoduls zu erfahren, schauen Sie sich die modulspezifischen Dokumentationen: panel, sidebar, frame an.

+ +

Fast alle diese Beispiele, die in dieser Anleitung präsentiert werden, sind als komplette, aber minimalistische, Add-ons in der addon-sdk-content-scripts repository auf Github vorhanden.

+ +

Content Skripts laden

+ +
+

Sie können ein einzelnes Skript laden, indem Sie einen String an die contentScript oder die contentScriptFile Option übergeben. Die contentScript Option behandelt den übergebenen String wie ein eigenes Skript:

+ +
// main.js
+
+var pageMod = require("sdk/page-mod");
+var contentScriptValue = 'document.body.innerHTML = ' +
+                         ' "<h1>Page matches ruleset</h1>";';
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScript: contentScriptValue
+});
+ +

Die contentScriptFile Option behandelt den String wie eine resource:// URL, die auf ein Skript zeigt, dass in ihrem Add-on Verzeichnis "data" gespeichert ist. jpm erstellt standardmäßig keinen "data" Ordner, also muss dieser erst erstellt werden, wenn Sie ihre Content Scripts verwenden wollen.

+ +

Das Add-on liefert eine URL, die auf die Datei "content-script.js" zeigt, welche im data Unterordner des Add-on Stammverzeichnisses enthalten ist:

+ +
// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: data.url("content-script.js")
+});
+ +
// content-script.js
+
+document.body.innerHTML = "<h1>Seite erfüllt die Regeln.</h1>";
+ +
+

Ab Firefox 34 , kann "./content-script.js" als Alias für self.data.url("content-script.js") verwendet werden. Die main.js kann also auch folgendermaßen geschrieben werden:

+ +
var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: "./content-script.js"
+});
+
+
+ +
+

Wenn ihr Content Skript nicht sehr simpel ist oder aus einem statischen String besteht, sollten Sie contentScript:  nicht benutzen. Wenn Sie es doch tun, könnten Sie Probleme haben Ihr Add.on auf AMO verifiziert zu bekommmen.

+ +

Stattdessen sollten Sie ihr Skript in einer seperaten Datei schreiben und mit contentScriptFile laden. Das macht ihren Code übersichtlicher und er ist einfacher zu Warten, sichern und debuggen.

+
+ +

Sie können auch mehrere Skripte in contentScript oder contentScriptFile laden, indem Sie ein Array von Strings übergeben:

+ +
// main.js
+
+var tabs = require("sdk/tabs");
+
+tabs.on('ready', function(tab) {
+  tab.attach({
+      contentScript: ['document.body.style.border = "5px solid red";', 'window.alert("hi");']
+  });
+});
+
+ +
// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScriptFile: [data.url("jquery.min.js"), data.url("my-content-script.js")]
+});
+ +

Wenn Sie das tuen, können die Skripte direkt miteinander kommunizieren, als wären es Skripte der gleichen Webseite.

+ +

Sie können auch contentScript und contentScriptFile zusammen benutzen. Wenn Sie das tun, werden die Skripte, die sie in contentScriptFile spezifizieren vor denen in contentScript geladen. Das ermöglicht es Ihnen javaScript Bibliotheken, wie JQuery über eine URL zu laden und dann ein simples Skript inline zu verwenden, dass diese Bibliothek benutzt:

+ +
// main.js
+
+var data = require("sdk/self").data;
+var pageMod = require("sdk/page-mod");
+
+var contentScriptString = '$("body").html("<h1>Page matches ruleset</h1>");';
+
+pageMod.PageMod({
+  include: "*.mozilla.org",
+  contentScript: contentScriptString,
+  contentScriptFile: data.url("jquery.js")
+});
+ +
+

Wenn ihr Content Skript nicht sehr simpel ist oder aus einem statischen String besteht, sollten Sie contentScript:  nicht benutzen. Wenn Sie es doch tun, könnten Sie Probleme haben Ihr Add.on auf AMO verifiziert zu bekommmen.

+ +

Stattdessen sollten Sie ihr Skript in einer seperaten Datei schreiben und mit contentScriptFile laden. Das macht ihren Code übersichtlicher und er ist einfacher zu Warten, sichern und debuggen.

+
+ +

Kontrollieren, wann das Skript angehängt werden soll.

+ +

Die contentScriptWhen Option spezifiziert, wann das/die Content Skript/e geladen werden sollen. Diese brauch eine dieser Parameter:

+ +
    +
  • "start": Läd das Skript sofort, nach dem das Dokumentelement der Seite in den DOM eingefügt wird. ZU diesem Zeitpunkt wurde der DOM Inhalt noch nicht geladen,, deshalb kann das Skript nicht damit interagieren.
    • +
  • "ready": Läd das Skript nachdem der DOM der Seite geladen wurde: Dies ist der Fall, wenn das DOMContentLoaded Event  abgefeuert wird. Ab diesem Zeitpunkt können Content Skripts mit dem DOM interagieren, aber extern referenzierte Stylesheets und Bilder könnten noch nicht geladen sein.
    • +
  • "end": Läd das Skript nachdem der komplette Inhalt (DOM, JS, CSS, images) der Seute geladen wurde. Zu diesem Zeitpunkt wird das window.onload event abgefeuert.
    • +
+ +

Der Standardwert ist "end".

+ +

Die Funktion tab.attach() akzepiert contentScriptWhen nicht, da es generell aufgerufen wird wenn die Seite geladen wurde.

+ +

Übergabe von Konfigurationsoptionen

+ +

Das contentScriptOptions Objekt ist ein JSON Objekt, das den Content Skripts als "read-only" Wert als self.options Eigenschaft übergeben wird:

+ +
// main.js
+
+var tabs = require("sdk/tabs");
+
+tabs.on('ready', function(tab) {
+  tab.attach({
+      contentScript: 'window.alert(self.options.message);',
+      contentScriptOptions: {"message" : "hello world"}
+  });
+});
+ +

Jeder Wert (Objekt, Feld, String, etc), dass in JSON dargestellt werden kann, kann hier benutzt werden.

+ +

Zugriff auf den DOM

+ +

Content Skripts können natürlich wie jedes andere Skript, dass die Seite geladen hat ( Page Skripts) auf den DOM zugreifen. Content Skripts und Page Skripts sind wie folgt von einander isoliert:

+ +
    +
  • Content Skripts sehen keine JavaScript Objekte, die der Seite über Page Skripts hinzugefügt wurden.
    • +
  • Auch wenn ein Page Skript das Verhalten eines DOM Objekts verändert hat, sieht das Content Skript nur das Originalverhalten.
    • +
+ +

Das gleiche gilt auch umgekehrt: Page Skripts sehen keine JavaScript Objekte, die von Content Skripts hinzugefügt wurden.

+ +

Stellen Sie sich eine Seite vor, die zum Beispiel eine Variable foo über ein Page Skript zum window Objekt hinzufügt:

+ +
<!DOCTYPE html">
+<html>
+  <head>
+    <script>
+    window.foo = "hello from page script"
+    </script>
+  </head>
+</html>
+ +

Ein anderes Skript, dass nach diesem Skript in die Seite geladen wird, kann auf foo zugreifen. Ein Content Skript kann dies nicht:

+ +
// main.js
+
+var tabs = require("sdk/tabs");
+var mod = require("sdk/page-mod");
+var self = require("sdk/self");
+
+var pageUrl = self.data.url("page.html")
+
+var pageMod = mod.PageMod({
+  include: pageUrl,
+  contentScript: "console.log(window.foo);"
+})
+
+tabs.open(pageUrl);
+ +
console.log: my-addon: null
+
+ +

Es gibt gute Gründe für diese Isolation. Erstens können Content Skripts so keine Objekte an Webseiten übermitteln und somit Sicherheitslücken schaffen. Zweitens können Content Skripts so Objekte erzeugen, ohne sich Sorgen machen zu müssen, dass diese mit Objekten kollidieren, die in Page Skripts erzeugt wurden.

+ +

Die Isulation bedeutet, dass wenn zum Beispiel eine Webseite die JQuery Bibliothek läd, das Content Skript nicht in der Lage ist dieses zu sehen, aber eine eigene JQuery Bibliothek laden kann ohne das es ein Problem mit der Version gibt, die über das Page Skript hinzugefügt wurde.

+ +

Interaktion mit Page Skripts

+ +

Normalerweise möchte man Content Skripts und Page Skripts voneinander isolieren. Wenn dies nicht der Fall ist, da Sie zum Beispiel Objekte zwischen beiden Skripten austauschen wollen, oder Nachrichten zwischen ihnen schicken wollen können Sie mehr zum Thema unter  Interaktion mit Page Skripts finden.

+ +

Event Listeners

+ +

Man kann in Content Skripts genau wie in einem Page Skript auf DOM Events warten. Es gibt nur zwei wichtige Unterschieden:

+ +

Erstens: Falls Sie einen Event Listener als String an setAttribute() übergeben, wird der Listener im Seitenkontext ausgeführt und hat somit keinen Zugriff auf Variablen, die im Content Skript definiert wurden.

+ +

Zum Beispiel, wird dieses Content Skript mit der Fehlermeldung "theMessage is not defined" ausgeben:

+ +
var theMessage = "Hello from content script!";
+anElement.setAttribute("onclick", "alert(theMessage);");
+ +

Zweitens: Falls Sie einen Event Listener per direkter Zuweisung einem globalen Event Handler  wie onclick zuweisen, könnten Zuweisungen, die die Seite vornimmt überschrieben werden. Zur Veranschaulichung ist hier ein Add-on, das versucht einen click Handler per Zuweisung an window.onclick anzufügen:

+ +
var myScript = "window.onclick = function() {" +
+               "  console.log('unsafewindow.onclick: ' + window.document.title);" +
+               "}";
+
+require("sdk/page-mod").PageMod({
+  include: "*",
+  contentScript: myScript,
+  contentScriptWhen: "start"
+});
+ +

Das wird auf den meisten Seiten funktionieren, bis auf denen, die ebenfalls ein onclick zuweisen:

+ +
<html>
+  <head>
+  </head>
+  <body>
+    <script>
+    window.onclick = function() {
+      window.alert("it's my click now!");
+    }
+    </script>
+  </body>
+</html>
+ +

Aus diesen Gründen ist es besser Event Listeners per addEventListener() hinzuzufügen. So definieren Sie einen Listener als Funktion:

+ +
var theMessage = "Hello from content script!";
+
+anElement.onclick = function() {
+  alert(theMessage);
+};
+
+anotherElement.addEventListener("click", function() {
+  alert(theMessage);
+});
+ +

Kommunikation mit dem Add-on

+ +

Damit Add-On Sktipts und Content Skripts miteinander kommunizieren können, haben beide Seiten der Konversation Zugriff auf ein port Objekt.

+ +
    +
  • Um eine Nachricht von einer Seite zur anderen zu schicken nutzen Sie port.emit()
    • +
  • Um eine Nachricht von der anderen Seite zu empfangen nutzen port.on()
    • +
+ +

Nachrichten sind asyncron, was bedeutet, dass der Sender nicht wartet, bis er eine Antwort des Empfängers erhält, sondern die Nachricht schickt und das weiter arbeitet.

+ +

Hier ist ein simples Beispieladd-on, das eine Nachricht an ein Content Skript per port schickt:

+ +
// main.js
+
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+tabs.on("ready", function(tab) {
+  worker = tab.attach({
+    contentScriptFile: self.data.url("content-script.js")
+  });
+  worker.port.emit("alert", "Message from the add-on");
+});
+
+tabs.open("http://www.mozilla.org");
+ +
// content-script.js
+
+self.port.on("alert", function(message) {
+  window.alert(message);
+});
+ +
+

Das context-menu Modul benutzt das Kommunikationsmodul, das hier beschrieben wird nicht. Um etwas über die Kommunikation mit geladenen Content Skripts im context-menu zu erfahren, schauen Sie in die context-menu Dokumentation.

+
+ +

Zugriff auf port im Content Skript

+ +

Im Content Skript ist das port Objekt als Eigenschaft im globalen Objekt self verfügbar. So versenden Sie eine Nachricht vom Content Skript:

+ +
self.port.emit("myContentScriptMessage", myContentScriptMessagePayload);
+ +

Um eine Nachricht vom Add-on Code zu bekommen:

+ +
self.port.on("myAddonMessage", function(myAddonMessagePayload) {
+  // Handle the message
+});
+ +
+

Das globale self Objekt ist etwas komplett anderes als das self Modul, das einer API in einem Add-on die Möglichkeit bietet auf Daten und die ID des Add-ons zuzugreifen.

+
+ +

Zugriff auf port im Add-on Skript

+ +

Im Add-on Code ist das Bindeglied zur Kommunikation zwischen Add-on und einem spezifischen Content Skript das  worker Objekt. Das port Objekt ist also eine Eigenschaft des  worker Objekts.

+ +

Der worker wird aber im Add-on Code nicht von allen Modulen gleich verwendet.

+ +

Vom page-worker

+ +

Das page-worker Objekt integriert die worker API direkt. Um also eine Nachricht von einem Content Skript zu erhalten, das mit dem page-worker assoziiert wird benutzt man pageWorker.port.on():

+ +
// main.js
+
+var pageWorkers = require("sdk/page-worker");
+var self = require("sdk/self");
+
+var pageWorker = require("sdk/page-worker").Page({
+  contentScriptFile: self.data.url("content-script.js"),
+  contentURL: "http://en.wikipedia.org/wiki/Internet"
+});
+
+pageWorker.port.on("first-para", function(firstPara) {
+  console.log(firstPara);
+});
+ +

Um eine benutzerdefinierte Nachricht vom Add-on zu schicken, nutz man pageWorker.port.emit():

+ +
// main.js
+
+var pageWorkers = require("sdk/page-worker");
+var self = require("sdk/self");
+
+pageWorker = require("sdk/page-worker").Page({
+  contentScriptFile: self.data.url("content-script.js"),
+  contentURL: "http://en.wikipedia.org/wiki/Internet"
+});
+
+pageWorker.port.on("first-para", function(firstPara) {
+  console.log(firstPara);
+});
+
+pageWorker.port.emit("get-first-para");
+ +
// content-script.js
+
+self.port.on("get-first-para", getFirstPara);
+
+function getFirstPara() {
+  var paras = document.getElementsByTagName("p");
+  if (paras.length > 0) {
+    var firstPara = paras[0].textContent;
+    self.port.emit("first-para", firstPara);
+  }
+}
+ +

Vom page-mod

+ +

Ein einziges  page-mod Objekt kann ein Skript an mehrere Seiten anhängen. Jede dieser Seiten hat ihren eigenen Context, in dem sie dieses Skript aufrufen. Daher benötigt es seperate Kanäle(worker) für jede Seite.

+ +

page-mod integriert also die worker API nicht direkt, sondern es wird jedes Mal wenn ein Content Skript an eine Seite angehängt wird das attach Event aufgerufen,  dessen listener einen worker für den Kontext übergeben bekommt. Durch das bereit stellen eines listeners bei attach kann man das port Objekt für das Content Skript, dass dieser Seite angefügt wurde über diesen page-mod verwenden:

+ +
// main.js
+
+var pageMods = require("sdk/page-mod");
+var self = require("sdk/self");
+
+var pageMod = pageMods.PageMod({
+  include: ['*'],
+  contentScriptFile: self.data.url("content-script.js"),
+  onAttach: startListening
+});
+
+function startListening(worker) {
+  worker.port.on('click', function(html) {
+    worker.port.emit('warning', 'Do not click this again');
+  });
+}
+ +
// content-script.js
+
+window.addEventListener('click', function(event) {
+  self.port.emit('click', event.target.toString());
+  event.stopPropagation();
+  event.preventDefault();
+}, false);
+
+self.port.on('warning', function(message) {
+  window.alert(message);
+});
+
+ +

Im oben gezeigten Add-on gibt es zwei Nachrichten:

+ +
    +
  • click wird vom page-mod an das Add-on geschickt, wenn der Nutzer auf ein Element auf der Seite klickt
    • +
  • warning schickt einen String zurück an den page-mod
    • +
+ +

Von Tab.attach()

+ +

Die Tab.attach() methode liefert einen worker zurück, den man zur Kommunikation mit dem/den Content Skript/Content Skripts, die angehängt wurden, verwenden kann.

+ +

Das Add-on fügt einen Button zu Firefox hinzu: Wenn der Benutzer den Button drückt, fügt das Add-on ein Content Skript an den aktuellen Tab an. Das Skript sendet eine Nachricht namens "my-addon-message" und wartet auf eine Antwort namens "my-script-response":

+ +
//main.js
+
+var tabs = require("sdk/tabs");
+var buttons = require("sdk/ui/button/action");
+var self = require("sdk/self");
+
+buttons.ActionButton({
+  id: "attach-script",
+  label: "Attach the script",
+  icon: "./icon-16.png",
+  onClick: attachScript
+});
+
+function attachScript() {
+  var worker = tabs.activeTab.attach({
+    contentScriptFile: self.data.url("content-script.js")
+  });
+  worker.port.on("my-script-response", function(response) {
+    console.log(response);
+  });
+  worker.port.emit("my-addon-message", "Message from the add-on");
+}
+
+ +
// content-script.js
+
+self.port.on("my-addon-message", handleMessage);
+
+function handleMessage(message) {
+  alert(message);
+  self.port.emit("my-script-response", "Response from content script");
+}
+ +

Die port API

+ +

Schaue unter der Referenzseite für das port Objekt.

+
+ +

Die postMessage API

+ +

bevor das port Objekt hinzugefügt wurde, kommunizierten Add-on Code und Content Skripts über eine andere API:

+ + + +

Die API ist immer noch verfügbar und dokumentiert, aber es gibt keinen Grund sie statt der port API zu verwenden, die hier beschrieben wird. Die Ausnahme bildet das context-menu Modul, welches immer noch postMessage verwendet.

+ +

Content Skript zu Content Skript

+ +

Content Skripts können nur direkt miteinander kommunizieren, wenn diese im gleichen Kontext geladen wurden. Beispiel: Wenn ein einziger Aufruf von  Tab.attach()  zwei Content Skripts anhängt, können diese sich gegenseitig sehen. Wenn aber Tab.attach() zweimal aufgerufen wird, und die Content Skripts einzeln anhängt,können die Content Skripte nicht miteinander kommunizieren. Dann müssen die Nachrichten über die  port API über den Add-on code gesendet werden.

+ +

Cross-domain Content Skripts

+ +

Grundsätzlich hat ein Content Skript keine cross-domain Privilegien. Sie können also keinen Inhalt eines iframes auslesen, wenn dieser Inhalt von einer anderen Domain stammt, oder XMLHttpRequests an eine andere Domain schicken.

+ +

Um dieses Feature für spezielle Domains hinzuzufügen fügen Sie dem package.json ihres Add-ons den Schlüssel "cross-domain-content" unter dem "permissions" Schlüssel hinzu. Siehe dafür den Artikel  cross-domain content scripts.

+
diff --git a/files/de/mozilla/add-ons/sdk/guides/index.html b/files/de/mozilla/add-ons/sdk/guides/index.html new file mode 100644 index 0000000000..fbb8311866 --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/guides/index.html @@ -0,0 +1,154 @@ +--- +title: Leitfäden +slug: Mozilla/Add-ons/SDK/Guides +translation_of: Archive/Add-ons/Add-on_SDK/Guides +--- +

Auf dieser Seite sind theoretische und detailliertere Artikel über das SDK auffindbar.

+
+

Für Mitwirkende

+
+
+
+
+ Erste Schritte
+
+ Erfahre, wie du zu dem SDK beitragen kannst: den Quellcode erhalten, Bugs melden und beheben, Patches einreichen, Überprüfungen und Hilfe erhalten.
+
+ Module
+
+ Erfahre mehr über das vom SDK verwendete Modulsystem (basierend auf der CommonJS-Spezifikation), wie Sandboxes und Compartments zum Erhöhen der Sicherheit verwendet werden können, und über den im SDK enthaltenen Modul-Loader Cuddlefish.
+
+ Klassen und Vererbung
+
+ Erfahre, wie Klassen und Vererbungen in JavaScript implementiert werden können, unter Verwendung von Konstruktoren und Prototypen, und über die Helper-Funktion des SDKs zum Vereinfachen dieser Prozesse.
+
+
+
+
+
+ Private Eigenschaften
+
+ Erfahre, wie private Eigenschaften in JavaScript unter Verwendung von Prefixes, Closures und WeakMaps implementiert werden können und wie das SDK private Eigenschaften durch das Verwenden von Namespaces (eine Verallgemeinerung von WeakMaps) unterstützt.
+
+ Prozesse
+
+ Das SDK wurde dafür entwickelt, in einer Umgebung zu arbeiten, in welcher Code zum Manipulieren von Web-Inhalten in unterschiedlichen Prozessen wie der Haupt-Code des Add-ons ausgeführt wird. Dieser Artikel erklärt die wichtigsten Vorteile dieses Konzepts.
+
+
+
+
+

SDK-Infrastruktur

+
+
+
+
+ Modulstruktur des SDKs
+
+ Das SDK selbst sowie die dafür konzipierten Add-ons bestehen aus wiederverwendbaren JavaScript-Modulen. Dieser Artikel erklärt, worum es sich bei diesen Modulen handelt, wie sie geladen werden können und wie die Modul-Baumstruktur des SDKs aufgebaut ist.
+
+ SDK-API-Lebenszyklus
+
+  Einführung in den Lebenszyklus der SDK-APIs, beinhaltet Stabilitätsbewertungen für APIs.
+
+
+
+
+
+ Programm-ID
+
+ Die Programm-ID ist ein eindeutiger Bezeichner für ein Add-on. Dieser Leitfaden zeigt, wie sie erstellt wird, und wozu sie dient.
+
+ Firefox-Kompatibilität
+
+ Lerne, mit welchen Firefox-versionen eine SDK-Version kompatibel ist und wie Kompatibilitätsprobleme behandelt werden können.
+
+
+
+
+

SDK-Spracheigenschaften

+
+
+
+
+ Arbeiten mit Events
+
+ Erstelle Event-basierten Code mit Hilfe des SDK-Eventausgabe-Frameworks.
+
+
+
+
+
+ Zwei Arten von Scripts
+
+ Dieser Artikel erklärt die Unterschiede zwischen den vom Haupt-Code des Add-ons verwendbaren APIs und von denen, die von einem Content-Script verwendet werden können.
+
+
+
+
+

Content-Scripts

+
+
+
+
+ Einführung in Content-Scripts
+
+ Eine Übersicht über Content-Scripts.
+
+ Laden von Content-Scripts
+
+ Laden von Content-Scripts in Webseiten, Einbindung entweder von Strings oder von eigenen Dateien und Festlegen des Ausführungszeitpunktes.
+
+ Auf das DOM zugreifen
+
+ Informationen über den Zugriff von Content-Scripts auf das DOM (Document Object Model).
+
+ Kommunikation mit anderen Scripts
+
+ Erfahre, wie ein Content-Script mit der main.js-Datei, mit anderen Content-Scripts und von der Webseite selbst geladenen Scripts kommunizieren kann.
+
+
+
+
+
+ Verwendung von "port"
+
+ Kommunikation zwischen einem Content-Script und den anderen Bestandteilen des Add-ons über das port-Objekt.
+
+ Verwendung von "postMessage()"
+
+ Kommunikation zwischen einem Content-Script und den anderen Bestandteilen des Add-ons über die postMessage()-API und ein Vergleich dieser Technik mit dem port-Objekt.
+
+ Domainübergreifende Content-Scripts
+
+ Lerne, wie man Content-Scripts dazu befähigt, mit Inhalten von anderen Domains zu interagieren.
+
+ Reddit-Beispiel
+
+ Ein einfaches Add-on mit Content-Scripts.
+
+
+
+
+

XUL-Portierung

+
+
+
+
+ XUL Portierungsleitfaden
+
+ Techniken zum Portieren eines XUL Add-ons auf das SDK.
+
+ XUL versus SDK
+
+ Ein Vergleich der Stärken und Schwächen des SDK's mit denen der traditionellen XUL-basierten Add-ons.
+
+
+
+
+
+ Portierungs-Beispiel
+
+ Ein Walkthrough durch das Portieren eines relativ einfachen XUL-basierten Add-ons auf das SDK.
+
+
+
diff --git a/files/de/mozilla/add-ons/sdk/index.html b/files/de/mozilla/add-ons/sdk/index.html new file mode 100644 index 0000000000..4a73b5fbeb --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/index.html @@ -0,0 +1,83 @@ +--- +title: Add-on SDK +slug: Mozilla/Add-ons/SDK +translation_of: Archive/Add-ons/Add-on_SDK +--- +

Das Add-on SDK ermöglicht es, Add-ons für Firefox unter Verwendung der Standard-Webtechnologien zu entwickeln: JavaScript, HTML und CSS. Das SDK beinhaltet JavaScript APIs zum Erstellen, Ausführen, Testen und Packen von Add-ons.

+ +
+

Tutorials

+ +
+
+
+
Erste Schritte
+
Anleitungen zum Installieren des SDKs sowie zur Verwendung des cfx-Tools zum Entwickeln, Testen und Packen von Add-ons.
+
 
+
Interagieren mit dem Browser
+
Webseiten öffnen, auf das Laden von Webseiten reagieren und geöffnete Webseiten auflisten.
+
Das Laden von Webseiten reagieren und geöffnete Webseiten auflisten.
+
Entwicklungstechnologien
+
Lerne Entwicklungstechnologien wie das Testen der Add-on-Elemente, Loggen, Erstellen von wiederverwendbaren Modulen, die Lokalisierung und das Entwickeln für mobile Endgeräte kennen.
+
+
+ +
+
+
Benutzeroberflächen
+
Erstelle Benutzeroberflächenkomponenten wie Toolbar-Buttons, Kontextmenüs, Menüeinträge oder Dialoge.
+
Inhalte von Webseiten bearbeiten
+
Inhalte von Seiten über ein spezifisches URL-Muster oder dynamisch einen bestimmten Tab bearbeiten.
+
Zusammenfassung
+
Walk-through durch das Beispiel-Add-on "Annotator".
+
+
+
+ +
+

Leitfäden

+ +
+
+
+
Zum SDK beitragen
+
Trage zum SDK bei und lerne die wichtigsten im SDK-Quelltext verwendeten Objekte wie Module, Klassen und Vererbung, private Eigenschaften und Inhaltsabläufe kennen.
+
SDK-Aufbau
+
Verstehe die Technologien, die dem SDK zugrunde liegen: Modulstruktur, Programm-ID und die Regeln, die die Firefox-Kompatibilität definieren.
+
Content-Scripts
+
Eine detaillierte Anleitung zum Arbeiten mit Content-Scripts. Erklärt wird das Laden von Content-Scripts, auf welche Objekte ein Content-Script zugreifen kann und wie man zwischen einem Content-Script und dem Rest des Add-ons kommunizieren kann.
+
+
+ +
+
+
SDK-Spracheigenschaften
+
Das  SDK-Event-Framework und die Unterscheidung zwischen Add-on-Scripts und Content-Scripts.
+
XUL-Migration
+
Anleitung zum Portieren von XUL-Add-ons auf das SDK. Diese Anleitung beinhaltet einen Vergleich der beiden Umgebungen und ein Beispiel des Portierens eines XUL-Add-ons.
+
+
+
+ +
+

Referenzen

+ +
+
+
+
High-Level-APIs
+
Dokumentation der High-Level-SDK-APIs.
+
Tools-Referenz
+
Dokumentation des cfx-Tools zum Entwickeln, Testen und Packen von Add-ons, der Konsole, die global zum Loggen verwendet wird und der package.json-Datei.
+
+
+ +
+
+
Low-Level-APIs
+
Dokumentation der Low-Level-SDK-APIs.
+
+
+
+ +

 

diff --git a/files/de/mozilla/add-ons/sdk/tools/index.html b/files/de/mozilla/add-ons/sdk/tools/index.html new file mode 100644 index 0000000000..8c67b4644e --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tools/index.html @@ -0,0 +1,14 @@ +--- +title: Tools +slug: Mozilla/Add-ons/SDK/Tools +tags: + - Add-on SDK + - CFX + - JPM + - NeedsTranslation + - TopicStub +translation_of: Archive/Add-ons/Add-on_SDK/Tools +--- +

Articles listed here provide a reference for the SDK's tools:

+ +

{{ LandingPageListSubpages ("/en-US/Add-ons/SDK/Tools", 7) }}

diff --git a/files/de/mozilla/add-ons/sdk/tools/jpm/index.html b/files/de/mozilla/add-ons/sdk/tools/jpm/index.html new file mode 100644 index 0000000000..86e6a82aa3 --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tools/jpm/index.html @@ -0,0 +1,497 @@ +--- +title: jpm +slug: Mozilla/Add-ons/SDK/Tools/jpm +translation_of: Archive/Add-ons/Add-on_SDK/Tools/jpm +--- +
+

Sie können jpm ab Firefox 38 verwenden.

+ +

Dieser Artikel bezieht sich auf jpm.

+
+ +

Der Node-basierte Ersatz für cfx, erlaubt das Testen, Starten und Paketieren von Add-Ons.

+ +

Schauen Sie sich das jpm-Tutorial als Einführung an.

+ +

jpm wird folgendermaßen verwendet:

+ +
jpm [command] [options]
+
+ +

jpm unterstützt die folgenden globalen Optionen:

+ +
-h, --help        - Zeigt eine Hilfsnachricht
+-V, --version     - Anzeigen der JPM Versionsnummer
+
+ +

Installation

+ +

jpm wird über den Node Package Manager (npm) installiert. npm ist im Installer von Node.js enthalten, welchen Sie auf nodejs.org finden.

+ +

Nachdem Sie npm installiert haben, können Sie jpm wie jedes andere npm-Paket installieren:

+ +
npm install jpm -g
+ +

Abhängig von ihren Einstellungen müssen Sie den Befehl möglicherweise mit Adminrechten ausführen:

+ +
sudo npm install jpm -g
+ +

Tippen Sie folgendes in die Eingabeaufforderung:

+ +
jpm
+ +

Es sollte sich eine Zusammenfassung der jpm-Kommandos öffnen. Im Gegensatz zu cfx ist jpm in jeder Eingabeaufforderung verwendbar, solange Sie es mit der Option -g installiert haben.

+ +

Probleme?

+ +

Falls Sie die Zusammenfassung nicht verstehen, fragen Sie nach Hilfe. SDK-Nutzer und Teammitglieder des Projekts diskutieren über Probleme und Vorschläge in der  Projekt- Mailingliste. Andere könnten das selbe Problem wie Sie gehabt haben, also suchen Sie bitte zuerst im Listenarchiv. Sie können mit anderen SDK-Nutzern im Kanal #jetpack in Mozillas IRC-Netzwerk chatten.

+ +

Command reference

+ +

There are six jpm commands:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
jpm initCreate a skeleton add-on as a starting point for your own add-on.
jpm runLaunch an instance of Firefox with your add-on installed.
jpm testRuns your add-on's unit tests.
jpm xpiPackage your add-on as an XPI file, which is the install file format for Firefox add-ons.
jpm postPackage your add-on as an XPI file, then post it to some url.
jpm watchpostPackage your add-on as an XPI file whenever there is a file changed, and post that to some url.
+ +

jpm init

+ +

This command initializes a new add-on from scratch.

+ +

Create a new directory, change into it, and run jpm init.

+ +
mkdir my-addon
+cd my-addon
+jpm init
+ +

You'll then be asked to supply some information about your add-on: this will be used to create your add-on's package.json file.

+ + + +

Most of these fields have a default, which is shown in brackets after the question. If you just press Enter, your add-on will get the default value.

+ +

Once you've supplied a value or accepted the default for these properties, you'll be shown the complete contents of "package.json" and asked to accept it.

+ +

Then jpm will create an skeleton add-on, as a starting point for your own add-on development, with the following file structure:

+ + + +

jpm run

+ +

This command runs a new instance of Firefox with the add-on installed:

+ +
jpm run
+ +

jpm run accepts the following options:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-b --binary BINARY +

Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.

+ + 
+jpm run -b /path/to/Firefox/Nightly
+ See Selecting a browser version.
--binary-args CMDARGS +

Pass extra arguments to Firefox.

+ +

For example, to pass the -jsconsole argument to Firefox, which will launch the Browser Console, try the following:

+ + 
+jpm run --binary-args -jsconsole
+ +

To pass multiple arguments, or arguments containing spaces, quote them:

+ + 
+jpm run --binary-args '-url mzl.la -jsconsole'
+
--debugRun the add-on debugger attached to the add-on.
-o --overload PATH +

Rather than use the SDK modules built into Firefox, use the modules found at PATH. If -o is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.

+ +

See Overloading the built-in modules for more information.

+
-p --profile= PROFILE +

By default, jpm uses a clean temporary Firefox profile each time you call jpm run. Use the --profile option to instruct jpm to launch Firefox with an existing profile.

+ +

The PROFILE value may be a profile name or the path to the profile.

+ +

See Using profiles for more information.

+
-v --verboseVerbose operation.
--no-copy +
Use with caution because jpm run|test changes many preferences, never use with your main profile.
+ +
This only applies when --profile is used.
+ Disables the copying of the profile used, which allows one to reuse a profile.		 
+ +

jpm test

+ +

Use this command to run an add-on's unit tests. It will:

+ + + +
jpm test
+
+ +

See the tutorial on unit testing and the reference documentation for the assert module for more details on this.

+ +

jpm test accepts the following options:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-b --binary BINARY +

Use the version of Firefox specified in BINARY. BINARY may be specified as a full path or as a path relative to the current directory.

+ + 
+jpm test -b /path/to/Firefox/Nightly
+ +

See Selecting a browser version.

+
--binary-args CMDARGS +

Pass extra arguments to Firefox.

+ +

For example, to pass the -jsconsole argument to Firefox, which will launch the Browser Console, try the following:

+ + 
+jpm test --binary-args -jsconsole
+ +

To pass multiple arguments, or arguments containing spaces, quote them:

+ + 
+jpm test --binary-args '-url mzl.la -jsconsole'
+
--debugRun the add-on debugger attached to the add-on.
-f --filter FILE[:TEST] +

Only run tests whose filenames match FILE and optionally match TEST, both regexps.

+ + 
+jpm test --filter base64:btoa
+ +

The above command only runs tests in files whose names contain "base64", and in those files only runs tests whose names contain "btoa".

+
-o --overload PATH +

Rather than use the SDK modules built into Firefox, use the modules found at PATH. If -o is specified and PATH is omitted, jpm will look for the JETPACK_ROOT environment variable and use its value as the path.

+ +

See Overloading the built-in modules for more information.

+
-p --profile PROFILE +

By default, jpm uses a clean temporary Firefox profile each time you call jpm run. Use the --profile option to instruct jpm to launch Firefox with an existing profile.

+ +

The PROFILE value may be a profile name or the path to the profile.

+ +

See Using profiles for more information.

+
--stop-on-error +

By default jpm test keeps running tests even after tests fail. Specify --stop-on-error to stop running tests after the first failure:

+ + 
+jpm test --stop-on-error
+
--tbplPrint test output in Treeherder format
--times NUMBER +

Run tests NUMBER of times:

+ + 
+jpm test --times 2
+
-v --verboseVerbose operation.
--no-copy +
Use with caution because jpm run|test changes many preferences, never use with your main profile.
+ +
This only applies when --profile is used.
+ Disables the copying of the profile used, which allows one to reuse a profile.
+ +

jpm xpi

+ +

This command packages the add-on as an XPI file, which is the install file format for Mozilla add-ons.

+ +
jpm xpi
+ +

It looks for a file called package.json in the current directory and creates the corresponding XPI file. It ignores any ZIPs or XPIs in the add-on's root, and any test files.

+ +

Once you have built an XPI file you can distribute your add-on by submitting it to addons.mozilla.org.

+ +

jpm xpi accepts the following option:

+ + + + + + + + +
-v --verbose +

Verbose operation:

+ + 
+jpm xpi -v
+
+ +

jpm post

+ +

This command packages the add-on as an XPI file, the posts it to some url.

+ +
jpm post
+ +

It looks for a file called package.json in the current directory and creates a XPI file with which to post to the --post-url.

+ +

jpm post accepts the following options:

+ + + + + + + + + + + + +
--post-url URL +

The url to post the extension to after creating a XPI.

+ + 
+jpm post --post-url http://localhost:8888/
+ +

See Using Post and Watchpost for more information.

+
-v --verbose +

Verbose operation:

+ + 
+jpm post --post-url http://localhost:8888/ -v
+
+ +

jpm watchpost

+ +

This command packages the add-on as an XPI file, the posts it to some url whenever a file in the current working directory changes.

+ +
jpm watchpost
+ +

Creates a XPI whenever a file in the current working directory changes and posts that to the --post-url.

+ +

jpm watchpost accepts the following options:

+ + + + + + + + + + + + +
--post-url URL +

The url to post the extension to after creating a XPI.

+ + 
+jpm watchpost --post-url http://localhost:8888/
+ +

See Using Post and Watchpost for more information.

+
-v --verbose +

Verbose operation:

+ + 
+jpm watchpost --post-url http://localhost:8888/ -v
+
+ +

Techniques

+ +

Selecting a browser version

+ +

By default, jpm run and jpm test will run the release version of Firefox. You can instruct jpm to use a different version in one of two ways:

+ + + +

Using .jpmignore to ignore files

+ +

Using .jpmignore is similar to using .gitignore with git, .hgignore with Mercurial, or .npmignore with npm. By using this file you can let jpm know which files you would like it to ignore when building a .xpi file with jpm xpi.

+ +

Here is an example:

+ +
# Ignore .DS_Store files created by mac
+.DS_Store
+
+# Ignore any zip or xpi files
+*.zip
+*.xpi
+
+ +

A .jpmignore file with the above contents would ignore all zip files and .DS_Store files from the xpi generated by jpm xpi.

+ +

Using profiles

+ +

By default, jpm run uses a new profile each time it is executed. This means that any profile-specific data entered from one run of jpm will not, by default, be available in the next run.

+ +

This includes, for example, any extra add-ons you installed, or your history, or any data stored using the simple-storage API.

+ +

To make jpm use a specific profile, pass the --profile option, specifying the name of the profile you wish to use, or the path to the profile.

+ +
jpm run --profile boogaloo
+
+ +
jpm run --profile path/to/boogaloo
+ +

If you supply --profile but its argument is not the name of or path to an existing profile, jpm will open the profile manager,  enabling you to select and existing profile or create a new one:

+ +
jpm run --profile i-dont-exist
+ +

Developing without browser restarts

+ +

Because jpm run restarts the browser each time you invoke it, it can be a little cumbersome if you are making very frequent changes to an add-on. An alternative development model is to use the Extension Auto-Installer add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:

+ + + +

You could even automate this workflow with a simple script. For example:

+ +
jpm watchpost --post-url http://localhost:8888/
+
+ +

Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using jpm run. This means that if you want to see output from console.log() messages, you'll have to tweak a setting. See the documentation on logging levels for the details on this.

+ +

Overloading the built-in modules

+ +

The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using jpm run or jpm xpi, the add-on will use the versions of the modules in the version of Firefox that hosts it.

+ +

As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case you need to:

+ + + +
jpm run -o
+
+ +

This instructs jpm to use the local copies of the SDK modules, not the ones in Firefox. If you don't want to set the JETPACK_ROOT environment variable, you can pass the location of your copy of the SDK modules along with -o:

+ +
jpm run -o "/path/to/SDK/"
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html b/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html new file mode 100644 index 0000000000..c5f41a2baf --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tutorials/adding_a_button_to_the_toolbar/index.html @@ -0,0 +1,100 @@ +--- +title: Einen Button zur Toolbar hinzufügen +slug: Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Adding_a_Button_to_the_Toolbar +--- +
+ Für dieses Tutorial wird die erfolgreiche Installation des SDK und erlernte Vorkenntnisse von cfx vorrausgesetzt.
+
+

Dieses Widget wird ab Firefox 29 nicht mehr verwendet/funktionieren. Um Buttons in Firefox 29 (+) hinzuzufügen, benutze bitte die UI Module, besonders die Action-Buttons oder Toogle-Buttons APIs.

+
+

Um einen Button zur Toolbar hinzuzufügen, verwende das widget-Module.

+

Erstelle ein neues Verzeichnis, navigiere mit der Eingabeaufforderung in dieses Verzeichnis, und gib cfx init ein. Dann öffne die Datei "main.js" im "lib"-Verzeichnis und gib folgenden Code ein:

+
var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: "http://www.mozilla.org/favicon.ico",
+  onClick: function() {
+    tabs.open("http://www.mozilla.org/");
+  }
+});
+

Das Widget wird wird zur AddOn-Leiste (unten am Fensterrand) hinzugefügt:

+

Du kannst leider nicht die Standart-Position des Icons ändern, aber der User kann den Standort jederzeit verändern. Das id-Attribut ist zwingend erforderlich. Es speichert die Position des Icons und sollte nicht verändert weren, da sonst wieder der Standart wiederhergestellt wird.

+

Beim Aktivieren wird dieser Link geöffnet: http://www.mozilla.org.

+
+  
+

Das Icon angeben (URL)

+

Wenn Du dieses Widget verwendest, kannst Du das Icon via contentURL: anzeigen. Das kann eine lokale, aber auch eine externe Datei sein. Allerdings lässt es sich nicht empfehlen Icons im Internet zu verwenden, da bei einem Serverausfall die Grafik nicht geladen werden kann. Das Beispiel verwendet eine Grafik namens "my-icon.png" aus dem AddOn-Verzeichnis (data):

+
+ 
var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: self.data.url("my-icon.png"),
+  onClick: function() {
+    tabs.open("http://www.mozilla.org/");
+  }
+});
+
+

Du kannst das Icon immer mit contentURL ändern!

+

Responding To the User

+

You can listen for click, mouseover, and mouseout events by passing handler functions as the corresponding constructor options. The widget example above assigns a listener to the click event using the onClick option, and there are similar onMouseover and onMouseout options.

+

To handle user interaction in more detail, you can attach a content script to the widget. Your add-on script and the content script can't directly access each other's variables or call each other's functions, but they can send each other messages.

+

Here's an example. The widget's built-in onClick property does not distinguish between left and right mouse clicks, so to do this we need to use a content script. The script looks like this:

+
window.addEventListener('click', function(event) {
+  if(event.button == 0 && event.shiftKey == false)
+    self.port.emit('left-click');
+  if(event.button == 2 || (event.button == 0 && event.shiftKey == true))
+    self.port.emit('right-click');
+    event.preventDefault();
+}, true);
+

It uses the standard DOM addEventListener() function to listen for click events, and handles them by sending the corresponding message to the main add-on code. Note that the messages "left-click" and "right-click" are not defined in the widget API itself, they're custom events defined by the add-on author.

+

Save this script in your data directory as "click-listener.js".

+

Next, modify main.js to:

+ +
var widgets = require("sdk/widget");
+var tabs = require("sdk/tabs");
+var self = require("sdk/self");
+
+var widget = widgets.Widget({
+  id: "mozilla-link",
+  label: "Mozilla website",
+  contentURL: "http://www.mozilla.org/favicon.ico",
+  contentScriptFile: self.data.url("click-listener.js")
+});
+widget.port.on("left-click", function(){
+  console.log("left-click");
+});
+widget.port.on("right-click", function(){
+  console.log("right-click");
+});
+

Now execute cfx run again, and try right- and left-clicking on the button. You should see the corresponding string written to the command shell.

+

Attaching a Panel

+ +

+

If you supply a panel object to the widget's constructor, then the panel will be shown when the user clicks the widget:

+
var data = require("sdk/self").data;
+var clockPanel = require("sdk/panel").Panel({
+  width:215,
+  height:160,
+  contentURL: data.url("clock.html")
+});
+require("sdk/widget").Widget({
+  id: "open-clock-btn",
+  label: "Clock",
+  contentURL: data.url("History.png"),
+  panel: clockPanel
+});
+

To learn more about working with panels, see the tutorial on displaying a popup.

+

Learning More

+

To learn more about the widget module, see its API reference documentation.

+

To learn more about content scripts, see the content scripts guide.

diff --git a/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html b/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html new file mode 100644 index 0000000000..dbafb57553 --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tutorials/getting_started/index.html @@ -0,0 +1,214 @@ +--- +title: Getting started +slug: Mozilla/Add-ons/SDK/Tutorials/Getting_started +translation_of: Mozilla/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29 +--- +

This tutorial walks through creating a simple add-on using the SDK.

+ +

Prerequisites

+ +

To create add-ons for Firefox using the SDK, you'll first need to follow the instructions to install and activate the SDK. Once you've done that, you'll be looking at a command prompt.

+ +

Initializing an empty add-on

+ +

In the command prompt, create a new directory. The directory doesn't have to be under the SDK root: you can create it anywhere you like. Navigate to it, type cfx init, and hit enter:

+ +
mkdir my-addon
+cd my-addon
+cfx init
+
+ +

You'll see some output like this:

+ +
* lib directory created
+* data directory created
+* test directory created
+* doc directory created
+* README.md written
+* package.json written
+* test/test-main.js written
+* lib/main.js written
+* doc/main.md written
+Your sample add-on is now ready for testing:
+try "cfx test" and then "cfx run". Have fun!"
+
+ +

Implementing the add-on

+ +

Now you can write the add-on's code, which goes in the "main.js" file in your "lib" directory. This file was created for you in the previous step. Open it and add the following code:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://www.mozilla.org/");
+}
+
+ +

Save the file.

+ +

Next, save these three icon files to the "data" directory:

+ + + + + + + + + + + + + + + + +
icon-16.png
icon-32.png
icon-64.png
+ +

Back at the command prompt, type:

+ +
cfx run
+
+ +

This is the SDK command to run a new instance of Firefox with your add-on installed. When Firefox launches, in the top-right corner of the browser you'll see an icon with the Firefox logo. Click the icon, and a new tab will open with https://www.mozilla.org/ loaded into it.

+ +
+

You might see an error message like this when you type cfx run:

+ +
A given cfx option has an inappropriate value:
+  ZIP does not support timestamps before 1980
+ +

If so, you've run into bug 1005412, meaning that the icon files you downloaded are given a timestamp of 1970. Until this bug is fixed, the workaround is to use the touch command to update the timestamps:

+ +
touch icon-16.png
+
+ +

That's all this add-on does. It uses two SDK modules: the action button module, which enables you to add buttons to the browser, and the tabs module, which enables you to perform basic operations with tabs. In this case, we've created a button whose icon is the Firefox icon, and added a click handler that loads the Mozilla home page in a new tab.

+ +

Try editing this file. For example, we could change the page that gets loaded:

+ +
var buttons = require('sdk/ui/button/action');
+var tabs = require("sdk/tabs");
+
+var button = buttons.ActionButton({
+  id: "mozilla-link",
+  label: "Visit Mozilla",
+  icon: {
+    "16": "./icon-16.png",
+    "32": "./icon-32.png",
+    "64": "./icon-64.png"
+  },
+  onClick: handleClick
+});
+
+function handleClick(state) {
+  tabs.open("https://developer.mozilla.org/");
+}
+ +

At the command prompt, execute cfx run again. This time clicking it takes you to https://developer.mozilla.org/.

+ +

Packaging the add-on

+ +

When you've finished the add-on and are ready to distribute it, you'll need to package it as an XPI file. This is the installable file format for Firefox add-ons. You can distribute XPI files yourself or publish them to https://addons.mozilla.org so other users can download and install them.

+ +

To build an XPI, just execute the command cfx xpi from the add-on's directory:

+ +
cfx xpi
+
+ +

You should see a message like:

+ +
Exporting extension to my-addon.xpi.
+
+ +

To test that this worked, try installing the XPI file in your own Firefox installation. You can do this by pressing the Ctrl+O key combination (Cmd+O on Mac) from within Firefox, or selecting the "Open" item from Firefox's "File" menu. This will bring up a file selection dialog; navigate to the "my-addon.xpi" file, open it and follow the prompts to install the add-on.

+ +

Summary

+ +

In this tutorial we've built and packaged an add-on using three commands:

+ + + +

These are the three main commands you'll use when developing SDK add-ons. There's comprehensive reference documentation covering all the commands you can use and all the options they take.

+ +

The add-on code itself uses two SDK modules, action button and tabs. There's reference documentation for all the high-level and low-level APIs in the SDK.

+ +

What's next?

+ +

To get a feel for some of the things you can do with the SDK APIs, try working through some of the tutorials.

+ +

Advanced techniques

+ +

Overriding the built-in modules

+ +

The SDK modules you use to implement your add-on are built into Firefox. When you run or package an add-on using cfx run or cfx xpi, the add-on will use the versions of the modules in the version of Firefox that hosts it.

+ +

As an add-on developer, this is usually what you want. But if you're developing the SDK modules themselves, of course, it isn't. In this case it's assumed that you have checked out the SDK from its GitHub repo and will have run the bin/activate script from the root of your checkout.

+ +

Then when you invoke cfx run or cfx xpi, you pass the "-o" option:

+ +
cfx run -o
+
+ +

This instructs cfx to use the local copies of the SDK modules, not the ones in Firefox.

+ +

Developing without cfx run

+ +

Because cfx run restarts the browser each time you invoke it, it can be a little cumbersome if you are making frequent changes to an add-on. An alternative development model is to use the Extension Auto-Installer add-on: this listens for new XPI files on a specified port and installs them automatically. That way you can test new changes without needing to restart the browser:

+ + + +

You could even automate this workflow with a simple script. For example:

+ +
while true ; do cfx xpi ; wget --post-file=codesy.xpi http://localhost:8888/ ; sleep 5 ; done
+
+ +

Note that the logging level defined for the console is different when you use this method, compared to the logging level used when an add-on is run using cfx run. This means that if you want to see output from console.log() messages, you'll have to tweak a setting. See the documentation on logging levels for the details on this.

+ +

Another example using grunt and grunt-shell:

+ +
module.exports = function(grunt) {
+  'use strict';
+  require('matchdep').filterDev('grunt-!(cli)').forEach(grunt.loadNpmTasks);
+  grunt.initConfig({
+    shell: {
+      xpi: {
+        command: [
+          'cd pluginpath',
+          'cfx xpi',
+          'wget --post-file=pluginname.xpi http://localhost:8888/ || echo>/dev/null'
+        ].join('&&')
+      }
+    },
+    watch: {
+      xpi: {
+        files: ['pluginpath/**'],
+        tasks: ['shell:xpi']
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-shell');
+  grunt.registerTask('default', ['watch']);
+};
diff --git a/files/de/mozilla/add-ons/sdk/tutorials/index.html b/files/de/mozilla/add-ons/sdk/tutorials/index.html new file mode 100644 index 0000000000..6eb7e95b49 --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tutorials/index.html @@ -0,0 +1,165 @@ +--- +title: Tutorials +slug: Mozilla/Add-ons/SDK/Tutorials +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials +--- +

Auf dieser Seite wird gezeigt, wie man spezifische praktische Aufgaben unter Verwendung des SDKs bewältigen kann.

+
+

Erste Schritte

+
+
+
+
+ Installation
+
+ Download, Installation und Einrichtung des SDKs unter Windows, OS X und Linux.
+
+
+
+ Fehlerbehebung
+
+ Lösungsansätze zum Beheben klassischer Probleme und Möglichkeiten zum Erhalten weiterer Hilfe.
+
+
+
+
+
+ Erste Schritte mit cfx
+
+ Die elementaren cfx-Befehle zum Erstellen von Add-ons.
+
+
+
+
+

Benutzeroberflächen erstellen

+
+
+
+
+ Toolbar-Button hinzufügen
+
+ Einen Button zur Firefox-Toolbar hinzufügen.
+
+ Hauptmenü erweitern
+
+ Items den Hauptmenüs von Firefox hinzufügen.
+
+
+
+
+
+ Popups anzeigen
+
+ Einen Popup-Dialog unter Verwendung von HTML und JavaScript anzeigen.
+
+ Kontextmenü erweitern
+
+ Items dem Kontextmenü von Firefox hinzufügen.
+
+
+
+
+

Interagieren mit dem Browser

+
+
+
+
+ Webseiten öffnen
+
+ Mit Hilfe des tabs-Moduls eine Seite in einem neuen Tab oder einem neuen Fenster öffnen und auf deren Inhalt zugreifen.
+
+ Auf das Laden von Webseiten reagieren
+
+ Mit dem tabs-Modul erkennen, wenn neue Webseiten geladen werden und auf deren Inhalte zugreifen.
+
+
+
+
+
+ Geöffnete Tabs auflisten
+
+ Mit dem tabs-Modul geöffnete Tabs auflisten und auf ihre Inhalte zugreifen.
+
+
+
+
+

Inhalte von Webseiten bearbeiten

+
+
+
+
+ Webseiten basierend auf deren URL bearbeiten
+
+ URL-Filter für Webseiten erstellen und ein Script darin ausführen, sobald eine Seite geladen wird, deren URL mit einer URL im Filter übereinstimmt.
+
+
+
+
+
+ Aktive Webseite bearbeiten
+
+ Ein Script dynamisch in der aktuell aktiven Website ausführen.
+
+
+
+
+

Entwicklungstechnologien

+
+
+
+
+ Loggen
+
+ Nachrichten auf der Konsole für Diagnosezwecke ausgeben.
+
+ Wiederverwendbare Module erstellen
+
+ Gliedere dein Add-on in einzelne Module und erleichtere somit das Entwickeln, Debuggen und Erhalten des Add-ons. Erstelle wiederverwendbare Pakete, die deine Module enthalten, damit auch andere Add-on-Entwickler diese verwenden können.
+
+ Testen der Bestandteile
+
+ Erstellen und Ausführen von Tests mit dem SDK-test-Framework.
+
+ Chrome-Autorität
+
+ Erhalte Zugriff auf das Components-Objekt und erlaube deinem Add-on XPCOM-Objekte zu laden und zu verwenden.
+
+ Erstellen von benutzerdefinierten Events
+
+ Erlaube deinen erstellten Objekten, eigene Events auszugeben.
+
+
+
+
+
+ Auf das Starten und Beenden des Add-ons reagieren
+
+ Werde benachrichtigt, wenn ein Add-on von Firefox gestartet oder beendet wird und übergebe Argumente an das Add-on über die Kommandozeile.
+
+ Module von Drittanbietern verwenden
+
+ Installation und Verwendung von zusätzlichen Modulen, die nicht im SDK enthalten sind.
+
+ Lokalisierung
+
+ Entwicklung lokalisierbarer Add-ons.
+
+ Entwicklung für mobile Endgeräte
+
+ Entwicklung von Add-ons für Firefox Mobile für Android.
+
+
+
+
+

Zusammenfassung

+
+
+
+
+ Add-on "Annotator"
+
+ Walk-through durch das Beispiel-Add-on "Annotator".
+
+
+
+

 

diff --git a/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html b/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html new file mode 100644 index 0000000000..28e899226e --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tutorials/installation/index.html @@ -0,0 +1,134 @@ +--- +title: Installation +slug: Mozilla/Add-ons/SDK/Tutorials/Installation +translation_of: Mozilla/Add-ons/SDK/Tools/jpm#Installation +--- +
+

Die cfx Installation ist veraltet. Sie sollten stattdessen  jpm benutzen.

+ +

Mehr Informationen finden Sie unter JPM replaces CFX for Firefox 38.

+
+ +

Vorraussetzungen

+ +

Um mit dem Add-on SDK zu entwickeln, brauchen Sie:

+ + + +

Installation

+ +

Installation auf FreeBSD/ OS X / Linux

+ +

Entpacken Sie die Dateien an einen beliebigen Ort und navigieren Sie mit einer Kommandozeile/Shell in das Stammverzeichnis der SDK. Zum Beispiel so:

+ +
tar -xf addon-sdk.tar.gz
+cd addon-sdk
+
+ +

Danach aktivieren Sie so die SDK, wenn Sie ein Bash Benutzer sind (was die meisten sind):

+ +
source bin/activate
+
+ +

Als nicht-Bash Benutzer, müssen Sie folgenden Befehl verwenden:

+ +
bash bin/activate
+
+ +

In Ihrer Eingabeaufforderung sollten Sie jetzt einen neuen Prefix haben, der den Namen des SDK's root Verzeichniss hat:

+ +
(addon-sdk)~/mozilla/addon-sdk >
+
+ +

Installation auf Mac mit Homebrew

+ +

Falls Sie ein Mac Benutzer sind, können Sie die SDK auch mithilfe von Homebrew und dem folgenden Befehl installieren:

+ +
brew install mozilla-addon-sdk
+ +

Sobald die Installation erfolgreich abgeschlossen wurde, können Sie das cfx Programm jederzeit in der Kommandozeile verwenden und benötigen keine vorherige Aktivierung.

+ +

Installation auf Windows

+ +

Entpacken Sie die Dateien an einen beliebigen Ort und navigieren Sie mit einer Kommandozeile/Shell in das Stammverzeichnis der SDK. Zum Beispiel so:

+ +
7z.exe x addon-sdk.zip
+cd addon-sdk
+
+ +

Dann führen Sie folgenden Befehl aus:

+ +
bin\activate
+
+ +

In Ihrer Eingabeaufforderung sollten Sie jetzt einen neuen Prefix haben, der den Namen des SDK's root Verzeichniss hat:

+ +
(C:\Users\mozilla\sdk\addon-sdk) C:\Users\Work\sdk\addon-sdk>
+
+ +

Plausibilitätsprüfung

+ +

Rufen Sie diesen Befehl in einer Kommandozeile auf:

+ +
cfx
+
+ +

Es sollte eine Meldung produzieren, die in etwa so aussieht, gefolgt von einer Auflistung der Benutzungsoptionen:

+ +
Usage: cfx [options] [command]
+
+ +

Das ist das cfx Kommandozeilen Programm. Es ist ihr primäres Interface für das Add-on SDK. Damit können Sie Firefox starten und ihr Add-on testen, ihr Add-on zur Veröffentlichung verpacken, sich Dokumentationen ansehen und Unit tests durchführen.

+ +

Nächste Schritte

+ +

Schauen Sie sich als nächstes das Tutorial  Getting Started With cfx an, das erklärt, wie man ein Add-on mit dem CFX Tool erstellt.

+ +

Fortgeschrittene Themen

+ +

Das SDK von Git verwenden

+ +

Die SDK wurde in GitHub entwickelt. Statt das verpackte Release zu verwenden, können Sie von GitHub repository den letzten Entwicklungsstand, statt dem offiziellen Release verwenden.

+ +

Wenn Sie den letzten Entwicklungsstand verwenden, benötigen Sie eine Nightly Version von Firefox und Sie können keine Add-ons bei addons.mozilla.org (AMO) einreichen, da AMP den offiziellen Release vorraussetzt.

+ +

Erweiterungen für AMO von Git Quellen entwickeln

+ +

Zum Einreichein bei AMO können nur der neuste git release tag für die Add-On SDK Quelldateien benutzt werden.

+ +

Der Gitarchivbefehl wird benötigt um ein Paar  Git Atrributplatzhalter im Git Klonverzeichnis zu erweitern.

+ +

git checkout 1.16

+ +

git archive 1.16 python-lib/cuddlefish/_version.py | tar -xvf -

+ +

Permanente Aktivierung

+ +

Sie können die Aktivierung permanent machen, in dem Sie die Variablen in ihrer Umgebung permanent setzen, so dass jede Eingabeaufforderung sie lesen kann. In diesem Fall müssen nicht jedesmal den activate Befehl verwenden, sobald Sie eine neue Eingabeaufforderung öffnen.

+ +

Da sich die Anzahl der zu setzenden Variable mit jeder neuen Version des SDK ändern kann, ist es am Besten sich nach den jeweiligen Aktivierungsskripten zu richten um Festzustellen welche Variablen verwendet werden. Die Aktivierung benutzt verschieden Skripte für Bashumgebungen (Linux und OS X) und Windowsumgebungen.

+ +

Windows

+ +

Bei Windows, benutzt bin\activate die activate.bat Datei. Sie können die Aktivierung permanent machen, indem Sie in der Kommandozeile das setx tool verwenden.

+ +

Linux / OS X

+ +

Auf Linux und OS X benutz source bin/activate das activate bash Skript. Die Aktivierung kann per ~/.bashrc (Linux) oder ~/.bashprofile (OS X) Permanent gemacht werden.

+ +

Eine Alternative ist das Erstellen eines symbolischen Links im Ordner ~/bin, der auf das cfx Programm verweist:

+ +
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
+
+ +

Falls Sie Homebrew zur Installation des SDKs verwenden, werden die Umgebungsvariablen bereits permanent für Sie gesetzt.

+ +

activate

+ +

Der activate Befehl setzt Umgebungsvariablen, die zur Nutzung der SDK nötig sind. Er setzt die Variablen nur für die aktuelle Kommandozeile. Das heisst, wenn Sie eine neue Kommandozeile öffnen, müssen Sie den Befehl erneut ausführen, bevor Sie die SDK wieder benutzen können.

+ +

Das bedeutet, dass Sie mehrere Kopien der SDK an verschiedenen Orten ihrer Festplatte haben können und zwischen diesen wechseln können, oder sogar gleichzeitig in verschiedenen Eingabeaufforderungen aktiviert haben können.

diff --git a/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html new file mode 100644 index 0000000000..9d33162519 --- /dev/null +++ b/files/de/mozilla/add-ons/sdk/tutorials/mobile_development/index.html @@ -0,0 +1,476 @@ +--- +title: Developing for Firefox Mobile +slug: Mozilla/Add-ons/SDK/Tutorials/Mobile_development +translation_of: Archive/Add-ons/Add-on_SDK/Tutorials/Mobile_development +--- +
+

Developing add-ons for Firefox Mobile is still an experimental feature of the SDK. Although the SDK modules used are stable, the setup instructions and cfx commands are likely to change.

+
+
+

To follow this tutorial you'll need to have installed the SDK and learned the basics of cfx.

+
+

Firefox for Android implements its UI using native Android widgets instead of XUL. With the add-on SDK you can develop add-ons that run on this new version of Firefox Mobile as well as on the desktop version of Firefox.

+

You can use the same code to target both desktop Firefox and Firefox Mobile, and just specify some extra options to cfx run, cfx test, and cfx xpi when targeting Firefox Mobile.

+

Right now not all modules are fully functional, but we're working on adding support for more modules. The tables at the end of this guide list the modules that are currently supported on Firefox Mobile.

+

This tutorial explains how to run SDK add-ons on an Android device connected via USB to your development machine. We'll use the Android Debug Bridge (adb) to communicate between the Add-on SDK and the device.

+

+

It's possible to use the Android emulator to develop add-ons for Android without access to a device, but it's slow, so for the time being it's much easier to use the technique described below.

+

Setting up the Environment

+

First you'll need an Android device capable of running the native version of Firefox Mobile. Then:

+ +

On the development machine:

+ +

Next, attach the device to the development machine via USB.

+

Now open up a command shell. Android Platform Tools will have installed adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path. Then type:

+
adb devices
+
+

You should see some output like:

+
List of devices attached
+51800F220F01564 device
+
+

(The long hex string will be different.)

+

If you do, then adb has found your device and you can get started.

+

Running Add-ons on Android

+

You can develop your add-on as normal, as long as you restrict yourself to the supported modules.

+

When you need to run the add-on, first ensure that Firefox is not running on the device. Then execute cfx run with some extra options:

+
cfx run -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
+
+

See "cfx Options for Mobile Development" for the details of this command.

+

In the command shell, you should see something like:

+
Launching mobile application with intent name org.mozilla.fennec
+Pushing the addon to your device
+Starting: Intent { act=android.activity.MAIN cmp=org.mozilla.fennec/.App (has extras) }
+--------- beginning of /dev/log/main
+--------- beginning of /dev/log/system
+Could not read chrome manifest 'file:///data/data/org.mozilla.fennec/chrome.manifest'.
+info: starting
+info: starting
+zerdatime 1329258528988 - browser chrome startup finished.
+
+

This will be followed by lots of debug output.

+

On the device, you should see Firefox launch with your add-on installed.

+

console.log() output from your add-on is written to the command shell, just as it is in desktop development. However, because there's a lot of other debug output in the shell, it's not easy to follow. The command adb logcat prints adb's log, so you can filter the debug output after running the add-on. For example, on Mac OS X or Linux you can use a command like the below to filter only the lines of console output:

+
adb logcat | grep console
+
+

You can experiment with different filter strings on adb logcat to focus in on the lines relevant to you.

+

Running cfx test is identical:

+
cfx test -a fennec-on-device -b /path/to/adb --mobile-app fennec --force-mobile
+
+

cfx Options for Mobile Development

+

As you see in the quote above, cfx run and cfx test need four options to work on Android devices.

+ + + + + + + + + + + + + + + + + + + + + + + +
-a fennec-on-deviceThis tells the Add-on SDK which application will host the add-on, and should be set to "fennec-on-device" when running an add-on on Firefox Mobile on a device.
-b /path/to/adb +

As we've seen, cfx uses the Android Debug Bridge (adb) to communicate with the Android device. This tells cfx where to find the adb executable.

+

You need to supply the full path to the adb executable.

+
--mobile-app +

This is the name of the Android intent. Its value depends on the version of Firefox Mobile that you're running on the device:

+
    +
  • fennec: if you're running Nightly
    • +
  • fennec_aurora: if you're running Aurora
    • +
  • firefox_beta: if you're running Beta
    • +
  • firefox: if you're running Release
    • +
+

If you're not sure, run a command like this (on OS X/Linux, or the equivalent on Windows):

+ 
+adb shell pm list packages | grep mozilla
+

You should see "package" followed by "org.mozilla." followed by a string. The final string is the name you need to use. For example, if you see:

+ 
+package:org.mozilla.fennec
+

...then you need to specify:

+ 
+--mobile-app fennec
+

This option is not required if you have only one Firefox application installed on the device.

+
--force-mobile +

This is used to force compatibility with Firefox Mobile, and should always be used when running on Firefox Mobile.

+
+

Packaging Mobile Add-ons

+

To package a mobile add-on as an XPI, use the command:

+
cfx xpi --force-mobile
+
+

Actually installing the XPI on the device is a little tricky. The easiest way is probably to copy the XPI somewhere on the device:

+
adb push my-addon.xpi /mnt/sdcard/
+
+

Then open Firefox Mobile and type this into the address bar:

+
file:///mnt/sdcard/my-addon.xpi
+
+

The browser should open the XPI and ask if you want to install it.

+

Afterwards you can delete it using adb as follows:

+
adb shell
+cd /mnt/sdcard
+rm my-addon.xpi
+
+

+

Module Compatibility

+

Modules not supported in Firefox Mobile are marked in the tables below.

+

High-Level APIs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
addon-pageNot supported
base64Supported
clipboardNot supported
context-menuNot supported
hotkeysSupported
indexed-dbSupported
l10nSupported
notificationsSupported
page-modSupported
page-workerSupported
panelNot supported
passwordsSupported
private-browsingNot supported
querystringSupported
requestSupported
selectionNot supported
selfSupported
simple-prefsSupported
simple-storageSupported
systemSupported
tabsSupported
timersSupported
uiNot supported
urlSupported
widgetNot supported
windowsSupported
+

Low-Level APIs

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
loaderSupported
chromeSupported
console/plain-textSupported
console/tracebackSupported
content/contentSupported
content/loaderSupported
content/modSupported
content/workerSupported
core/heritageSupported
core/namespaceSupported
core/promiseSupported
event/coreSupported
event/targetSupported
frame/hidden-frameSupported
frame/utilsSupported
io/byte-streamsSupported
io/fileSupported
io/text-streamsSupported
lang/functionalSupported
lang/typeSupported
loader/cuddlefishSupported
loader/sandboxSupported
net/urlSupported
net/xhrSupported
places/bookmarksNot supported
places/faviconNot supported
places/historyNot supported
platform/xpcomSupported
preferences/serviceSupported
stylesheet/styleSupported
stylesheet/utilsSupported
system/environmentSupported
system/eventsSupported
system/globalsSupported
system/runtimeSupported
system/unloadSupported
system/xul-appSupported
tabs/utilsSupported
test/assertSupported
test/harnessSupported
test/httpdSupported
test/runnerSupported
test/utilsSupported
ui/button/actionNot supported
ui/button/toggleNot supported
ui/frameNot supported
ui/idSupported
ui/sidebarNot supported
ui/toolbarNot supported
util/arraySupported
util/collectionSupported
util/deprecateSupported
util/listSupported
util/match-patternSupported
util/objectSupported
util/uuidSupported
window/utilsSupported
+

 

diff --git a/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html b/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html new file mode 100644 index 0000000000..689a9b9679 --- /dev/null +++ b/files/de/mozilla/add-ons/security_best_practices_in_extensions/index.html @@ -0,0 +1,80 @@ +--- +title: Sicherheitsleitfaden bei Erweiterungen +slug: Mozilla/Add-ons/Security_best_practices_in_extensions +tags: + - Add-ons + - Anleitung + - Erweiterungen + - Leitfaden + - Sicherheit +translation_of: Archive/Add-ons/Security_best_practices_in_extensions +--- +

{{ draft() }}

+ +

Dieses Dokument ist dazu gedacht, für Entwickler als Leitfaden zu bestmöglichen Vorgensweisen bei der Absicherung ihrer Erweiterung zu dienen. Dein Ziel ist es, deine Nutzer zu schützen. Einige Einträge sind strikte Richtlinien, was Bedeutet, dass wenn Du diesen nicht folgst, dein Add-On im Gegenzug auf Mozilla Add-Ons nicht akzeptiert wird. Andere Einträge sind Empfehlungen. Der Unterschied wird klar gekennzeichnet.

+ +

Es ist aus der Perspektive einer Firefox Erweiterung geschrieben, aber die meisten Einträge beziehen sich auf Erweiterungen für andere Mozilla-basierte Applikationen wie Thunderbird oder SeaMonkey.

+ +

Handhabung von Webinhalten

+ +

Im Allgemeinen ist der beste Weg sicherzustellen, dass der Browser beim Laden von Inhalten nicht kompromittiert wird, dafür zu sorgen, dass diese keine entsprechenden Rechte haben. Eine detailliertere Erklärung dieses Prozesses findet sich unter Webinhalte ohne Sicherheitsprobleme in einer Erweiterung anzeigen.

+ +

Die Rechte, die ein Dokument bekommt, hängen auch davon ab, wo es herkommt.  Zum Beispiel: Wenn Du eine chrome URL lädst, bedeutet es, dass der Inhalt in Firefox registriert wurde und vollen Zugriff hat. Inhalt von einer Domain (wie http://example.com) kann nur auf die gleiche Domain zugreifen. Über das File Protocol geladene Dateien können auf solche zugreifen, die auf der Festplatte und anderen lokalen Datenträgern liegen. Es gibt Wege, die content/chrome Sicherheitsbarriere zu umgehen, falls Du zum Beispiel möchtest, dass eine Webseite eine Notifikation an ein Add-On sendet (oder umgekehrt). Ein Weg das zu tun ist es, eigene DOM Events zu nutzen; siehe Interaktionen zwischen priviligierten und nicht-priviligierten Seiten.

+ +

Unabhängig davon, wo das Dokument herkommt, kannst du weiter Beschränken, was es kann, indem du Eigenschaften zum Dokumentenhalter - auch bekannt als docshell - zuweist.

+ +

frame.docShell.allowImages = false;
+ frame.docShell.allowJavascript = false;
+ frame.docShell.allowPlugins = false;

+ +

Es gibt mehr Beispiele in dem oben gelisteten Dokument. Unter gewissen Umständen möchte man Code in der Erweiterung ausführen, allerdings solltest du ihm eingeschränkte Rechte geben. Einer der besten Wege das zu tun ist Components.utils.evalInSandbox() zu nutzen. Beachte, dass Objekte, die an die Sandbox weitergegeben werden, eingeschränkt sind, aber solche, die wieder herauskommen es nicht sind. Nimm Bezug auf den Artikel, um herauszufinden, wie du solche Tücken vermeidest. Für weitere Informationen, siehe den Abschnitt evalInSandbox.

+ +

Die Sidebar: Ein Anwendungsfall

+ +

Die Sidebar in Firefox ist dafür gestaltet, sowohl chrome (priviligierte) Inhalte, als auch Web (nichtpriviligierte) Inhalte zu beinhalten - letzteres in Form von Webseiten. Diese Webseiten können von einem Server oder von lokalen HTML Dateien, die mit der Erweiterung gekommen sind, stammen. Für Seiten, die vom Server kommen, musst du Schritte vornehmen, um zu sicherzustellen, dass die Inhalte nicht in den Browser rückrufen und Schadcode ausführen. Hauptsächlich wird dies bewerkstelligt, indem man ein Iframe- oder Browserelement in der Sidebar erstellt und dort die Inhalte lädt. Gebe dem Inhalt ein type="content" Attribut, welches den Code im Wesentlichen sandboxed und alle Rückrufe direkt nach chrome blockiert.

+ +

eval() in einer Erweiterung nutzen

+ +

Das Nutzen der eingebauten JavaScript Funktion {{jsxref("eval")}} ist im Kontext von Erweiterungen verpönt. Während es einige Fälle gibt, in denen die Nutzung legitim ist, gibt es meist sicherere Alternativen. Dieser Blogeintrag bietet einige exzellente Beispiele, warum man eval() nicht nutzen sollte.

+ +

Gesandboxte HTTP Verbindungen

+ +

Der Hauptzweck von gesandboxten HTTP Verbindungen ist es, mit einem Webdienst zu kommunizieren, ohne mit im Browser zu der Website/dem Service gesetzten Cookies zu interferieren. Wenn Du zum Beispiel Fotos oder andere Daten von einer photo sharing Seite lädst, kannst du die Verbindungen sandboxen, sodass normales Surfen des Nutzers auf der Webseite nicht beeinflusst wird. Für einen echten Anwendungsfall, siehe diesen Blogeintrag.

+ +

Umgang mit Logins und Passwörtern

+ +

Es gibt viele Möglichkeiten, Daten in Firefox zu speichern, aber für Logins und Passwörter, solltest Du den Login Manager nutzen. Das ist der gleiche Speicher, welcher Logins von Webseiten beinhaltet und Passwörter können nur abgerufen werden, indem die Kombination von Seite/Username dem Author bekannt sind. Die Gepflogenheit für Erweiterungen ist es, eine chrome URL als den Seitenidentifikator zu nutzen, um Konflikte mit Logins für Seiten zu verhindern. Es könnte der Fall sein, dass deine Erweiterung ein anderes Werkzeug oder andere Werkzeuge für Dienste auf deiner Seite anbietet.

+ +

Diese Herangehensweise ist vorzuziehen, da es den Nutzern eine gewohnte Oberfläche für die Interaktion mit Logins über den Firefox Passwort Manager bietet. Wenn Nutzer Logins über die "Neueste Chronik löschen" Option säubern, wird das die Daten deiner Erweiterung miteinbeziehen.

+ +

APIs und Umgang mit anderen Daten

+ +

Web Inhalte sind mehr als nur Seiten, und mehr und mehr Add-Ons interagieren über das Application Programming Interfae (API) mit Webdiensten.

+ + + +

Remote Javascript und -Inhalte

+ +

Es gibt eine Zahl von Arten, wie Remotescripte in Erweiterungen genutzt werden können. Sie können in Inhalten eingebettet oder in Intervallen heruntergeladen werden.

+ +

Nicht-chrome URLs in chrome XUL oder HTML, so wie im folgenden Beispiel sind nicht erlaubt:

+ +

<script type="text/javascript" src="http://mysite.greatsite.com/js/wow-content.js" />

+ +

Im Allgemeinen sind Skripte von Remotequellen, die im Kontext von chrome laufen, nicht akzeptabel, da die Quelle der Skripte nie zu 100% garantiert werden kann und sie für Man-In-The-Middle Attacken empfindlich sind. Die einzig legitime Umgebung für Remoteskripte ist es, in einer Sandbox zu laufen. Für mehr Informationen, siehe die Sektion evalInSandbox().

+ +

evalInSandbox

+ +

Das evalInSandbox Dokument erklärt die Funktion ziemlich gut, also wird es hier keine Wiederholung geben. Die Nützlichkeit und Kraft der Funktionsweise wird von der beliebten Erweiterung Greasemonkey veranschaulich, welche unter der Prämisse arbeitet, dass Skripte heruntergeladen und gespeichert werden, um im Kontext von Webinhalten via der Sandbox injiziert zu werden. Viele Erweiterungen nutzen den Greasemonkey compiler, um die Funktion aus Bequemlichkeit in ihrer Erweiterung zu bündeln. Wenn Du dich entscheidest das zu tun, sei vorsichtig beim Editieren von gebündelten Dateien, insofern als, gut durchdachte Sicherheitsarchitekturen nicht zu verletzen.

+ +

Drittanbieter JavaScript

+ +

Im Kontext von Webseiten, ist das Nutzen von JavaScripten, welche von anderen geschrieben wurden sehr geläufig. Auch in Add-Ons ist es nicht unbekannt und kann einen nützlichen Weg darstellen, um Codewiederholungen zu vermeiden und die Entwicklung zu beschleunigen. Dieser Artikel ist über Webseiten, aber liefert einige Einsichten in generelle Risiken. Wenn Du andere Skripte einbettest, gibt es eine Reihe von Dingen, die du tun kannst, um ihre Integrität und Sicherheit für Nutzer zu gewährleisten. Als erstes, es immer von einer glaubwürdigen Quelle zu beziehen. Eine andere Sache, die du tun solltest, ist das Namespacen, nur für den Fall, dass andere Add-Ons es inkludieren. Zum Beispiel, wenn Du jQuery nutzt, gibt es da jQuery.noConflict().

+ +

Fazit

+ +

Sicherheit kann nicht als selbstverständlich angesehen werden und jede Veröffentlichung deines Add-Ons, sollte es eine neue Sicherheitsprüfung geben. Ein guter Ort, um mit Mozillas Sicherheitsmeldungen und Sicherheitsdiskussionen mitzuhalten, ist im  Mozilla Security Blog.

diff --git a/files/de/mozilla/add-ons/themes/obsolete/index.html b/files/de/mozilla/add-ons/themes/obsolete/index.html new file mode 100644 index 0000000000..d420b6ebf0 --- /dev/null +++ b/files/de/mozilla/add-ons/themes/obsolete/index.html @@ -0,0 +1,10 @@ +--- +title: Obsolete +slug: Mozilla/Add-ons/Themes/Obsolete +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Add-ons/Themes/Obsolete +--- +

This page collects theme docs that we don't expect will ever be updated, but which we're keeping for the time being as potential source material for updated docs.

+

{{ ListSubPages ("/en-US/Add-ons/Themes/Obsolete", 5) }}

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 new file mode 100644 index 0000000000..04bd9d08b5 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.html @@ -0,0 +1,133 @@ +--- +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:

+ + + +

+ +

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:

+ + + +

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:

+ + + +

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/browseraction/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html new file mode 100644 index 0000000000..184dccf3d6 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/browseraction/index.html @@ -0,0 +1,135 @@ +--- +title: browserAction +slug: Mozilla/Add-ons/WebExtensions/API/browserAction +tags: + - API + - Add-ons + - Extensions + - Interface + - NeedsTranslation + - Non-standard + - Reference + - TopicStub + - WebExtensions + - browserAction +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction +--- +
{{AddonSidebar}}
+ +

Adds a button to the browser's toolbar.

+ +

A browser action is a button in the browser's toolbar.

+ +

You can associate a popup with the button. The popup is specified using HTML, CSS and JavaScript, just like a normal web page. JavaScript running in the popup gets access to all the same WebExtension APIs as your background scripts, but its global context is the popup, not the current page displayed in the browser. To affect web pages you need to communicate with them via messages.

+ +

If you specify a popup, it will be shown — and the content will be loaded — when the user clicks the icon. If you do not specify a popup, then when the user clicks the icon an event is dispatched to your extension.

+ +

You can define most of a browser action's properties declaratively using the browser_action key in the manifest.json.

+ +

With the browserAction API, you can:

+ + + +

Types

+ +
+
{{WebExtAPIRef("browserAction.ColorArray")}}
+
An array of four integers in the range 0-255 defining an RGBA color.
+
{{WebExtAPIRef("browserAction.ImageDataType")}}
+
Pixel data for an image. Must be an ImageData object (for example, from a {{htmlelement("canvas")}} element).
+
+ +

Functions

+ +
+
{{WebExtAPIRef("browserAction.setTitle()")}}
+
Sets the browser action's title. This will be displayed in a tooltip.
+
{{WebExtAPIRef("browserAction.getTitle()")}}
+
Gets the browser action's title.
+
{{WebExtAPIRef("browserAction.setIcon()")}}
+
Sets the browser action's icon.
+
{{WebExtAPIRef("browserAction.setPopup()")}}
+
Sets the HTML document to be opened as a popup when the user clicks on the browser action's icon.
+
{{WebExtAPIRef("browserAction.getPopup()")}}
+
Gets the HTML document set as the browser action's popup.
+
{{WebExtAPIRef("browserAction.openPopup()")}}
+
Open the browser action's popup.
+
{{WebExtAPIRef("browserAction.setBadgeText()")}}
+
Sets the browser action's badge text. The badge is displayed on top of the icon.
+
{{WebExtAPIRef("browserAction.getBadgeText()")}}
+
Gets the browser action's badge text.
+
{{WebExtAPIRef("browserAction.setBadgeBackgroundColor()")}}
+
Sets the badge's background color.
+
{{WebExtAPIRef("browserAction.getBadgeBackgroundColor()")}}
+
Gets the badge's background color.
+
{{WebExtAPIRef("browserAction.setBadgeTextColor()")}}
+
Sets the badge's text color.
+
{{WebExtAPIRef("browserAction.getBadgeTextColor()")}}
+
Gets the badge's text color.
+
{{WebExtAPIRef("browserAction.enable()")}}
+
Enables the browser action for a tab. By default, browser actions are enabled for all tabs.
+
{{WebExtAPIRef("browserAction.disable()")}}
+
Disables the browser action for a tab, meaning that it cannot be clicked when that tab is active.
+
{{WebExtAPIRef("browserAction.isEnabled()")}}
+
Checks whether the browser action is enabled or not.
+
+ +

Events

+ +
+
{{WebExtAPIRef("browserAction.onClicked")}}
+
Fired when a browser action icon is clicked. This event will not fire if the browser action has a popup.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.browserAction")}}

+ + + +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.browserAction API. This documentation is derived from browser_action.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/browseraction/setpopup/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html new file mode 100644 index 0000000000..2a4a40e794 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html @@ -0,0 +1,136 @@ +--- +title: browserAction.setPopup() +slug: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup +translation_of: Mozilla/Add-ons/WebExtensions/API/browserAction/setPopup +--- +
{{AddonSidebar()}}
+ +

Sets the HTML document that will be opened as a popup when the user clicks on the browser action's icon. Tabs without a specific popup will inherit the global popup, which defaults to the default_popup specified in the manifest.

+ +

Syntax

+ +
browser.browserAction.setPopup(
+  details // object
+)
+
+ +

Parameters

+ +
+
details
+
object.
+
+
+
tabId{{optional_inline}}
+
integer. Sets the popup only for a specific tab. The popup is reset when the user navigates this tab to a new page.
+
windowId{{optional_inline}}
+
integer. Sets the popup only for the specified window.
+
+ +
+
popup
+
+

string or null. The HTML file to show in a popup, specified as a URL.

+ +

This can point to a file packaged within the extension (for example, created using {{WebExtAPIRef("extension.getURL")}}), or a remote document (e.g. https://example.org/).

+ +

If an empty string ("") is passed here, the popup is disabled, and the extension will receive {{WebExtAPIRef("browserAction.onClicked")}} events.

+ +

If popup is null:

+ +

If tabId is specified, removes the tab-specific popup so that the tab inherits the global popup.

+ +

If windowId is specified, removes the window-specific popup so that the window inherits the global popup.

+ +

Otherwise it reverts the global popup to the default value.

+
+
+
+
+ + + +

Browser compatibility

+ + + +

{{Compat("webextensions.api.browserAction.setPopup",2)}}

+ +

Examples

+ +

This code adds a pair of context menu items that you can use to switch between two popups. Note that you'll need the "contextMenus" permission set in the extension's manifest to create context menu items.

+ +
function onCreated() {
+  if (browser.runtime.lastError) {
+    console.log("error creating item:" + browser.runtime.lastError);
+  } else {
+    console.log("item created successfully");
+  }
+}
+
+browser.contextMenus.create({
+  id: "popup-1",
+  type: "radio",
+  title: "Popup 1",
+  contexts: ["all"],
+  checked: true
+}, onCreated);
+
+browser.contextMenus.create({
+  id: "popup-2",
+  type: "radio",
+  title: "Popup 2",
+  contexts: ["all"],
+  checked: false
+}, onCreated);
+
+browser.contextMenus.onClicked.addListener(function(info, tab) {
+  if (info.menuItemId == "popup-1") {
+    browser.browserAction.setPopup({popup: "/popup/popup1.html"})
+  } else if (info.menuItemId == "popup-2") {
+    browser.browserAction.setPopup({popup: "/popup/popup2.html"})
+  }
+});
+ +

{{WebExtExamples}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.browserAction API. This documentation is derived from browser_action.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 new file mode 100644 index 0000000000..af45cea002 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/commands/index.html @@ -0,0 +1,83 @@ +--- +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/downloads/index.html b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html new file mode 100644 index 0000000000..7363cde811 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html @@ -0,0 +1,123 @@ +--- +title: downloads +slug: Mozilla/Add-ons/WebExtensions/API/downloads +translation_of: Mozilla/Add-ons/WebExtensions/API/downloads +--- +
0ü
+ +

Enables extensions to interact with the browser's download manager. You can use this API module to download files, cancel, pause, resume downloads, and show downloaded files in the file manager.

+ +

To use this API you need to have the "downloads" API permission specified in your manifest.json file.

+ +

Types

+ +
+
{{WebExtAPIRef("downloads.FilenameConflictAction")}}
+
Defines options for what to do if the name of a downloaded file conflicts with an existing file.
+
{{WebExtAPIRef("downloads.InterruptReason")}}
+
Defines a set of possible reasons why a download was interrupted.
+
{{WebExtAPIRef("downloads.DangerType")}}
+
Defines a set of common warnings of possible dangers associated with downloadable files.
+
{{WebExtAPIRef("downloads.State")}}
+
Defines different states that a current download can be in.
+
{{WebExtAPIRef("downloads.DownloadItem")}}
+
Represents a downloaded file.
+
{{WebExtAPIRef("downloads.StringDelta")}}
+
Represents the difference between two strings.
+
{{WebExtAPIRef("downloads.DoubleDelta")}}
+
Represents the difference between two doubles.
+
{{WebExtAPIRef("downloads.BooleanDelta")}}
+
Represents the difference between two booleans.
+
{{WebExtAPIRef("downloads.DownloadTime")}}
+
Represents the time a download took to complete.
+
{{WebExtAPIRef("downloads.DownloadQuery")}}
+
Defines a set of parameters that can be used to search the downloads manager for a specific set of downloads.
+
+ +

Functions

+ +
+
{{WebExtAPIRef("downloads.download()")}}
+
Downloads a file, given its URL and other optional preferences.
+
{{WebExtAPIRef("downloads.search()")}}
+
Queries the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} available in the browser's downloads manager, and returns those that match the specified search criteria.
+
{{WebExtAPIRef("downloads.pause()")}}
+
Pauses a download.
+
{{WebExtAPIRef("downloads.resume()")}}
+
Resumes a paused download.
+
{{WebExtAPIRef("downloads.cancel()")}}
+
Cancels a download.
+
{{WebExtAPIRef("downloads.getFileIcon()")}}
+
Retrieves an icon for the specified download.
+
{{WebExtAPIRef("downloads.open()")}}
+
Opens the downloaded file with its associated application.
+
{{WebExtAPIRef("downloads.show()")}}
+
Opens the platform's file manager application to show the downloaded file in its containing folder.
+
{{WebExtAPIRef("downloads.showDefaultFolder()")}}
+
Opens the platform's file manager application to show the default downloads folder.
+
{{WebExtAPIRef("downloads.erase()")}}
+
Erases matching {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} from the browser's download history, without deleting the downloaded files from disk.
+
{{WebExtAPIRef("downloads.removeFile()")}}
+
Removes a downloaded file from disk, but not from the browser's download history.
+
{{WebExtAPIRef("downloads.acceptDanger()")}}
+
Prompts the user to accept or cancel a dangerous download.
+
{{WebExtAPIRef("downloads.drag()")}}
+
Initiates dragging the downloaded file to another application.
+
{{WebExtAPIRef("downloads.setShelfEnabled()")}}
+
Enables or disables the gray shelf at the bottom of every window associated with the current browser profile. The shelf will be disabled as long as at least one extension has disabled it.
+
+ +

Events

+ +
+
{{WebExtAPIRef("downloads.onCreated")}}
+
Fires with the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} object when a download begins.
+
{{WebExtAPIRef("downloads.onErased")}}
+
Fires with the downloadId when a download is erased from history.
+
{{WebExtAPIRef("downloads.onChanged")}}
+
When any of a {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}}'s properties except bytesReceived changes, this event fires with the downloadId and an object containing the properties that changed.
+
+ +

Browser compatibility

+ +

{{Compat("webextensions.api.downloads")}}

+ +

{{WebExtExamples("h2")}}

+ +
Acknowledgements + +

This API is based on Chromium's chrome.downloads API.

+ +

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/index.html b/files/de/mozilla/add-ons/webextensions/api/index.html new file mode 100644 index 0000000000..1a500cdc0c --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/index.html @@ -0,0 +1,51 @@ +--- +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/api/lesezeich/index.html b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html new file mode 100644 index 0000000000..7c43bda2af --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/api/lesezeich/index.html @@ -0,0 +1,121 @@ +--- +title: Lesezeichen +slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich. +translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks +--- +
{{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/arbeiten_mit_taps_api/index.html b/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html new file mode 100644 index 0000000000..39498fa606 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/arbeiten_mit_taps_api/index.html @@ -0,0 +1,608 @@ +--- +title: Arbeiten mit Taps API +slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API +tags: + - tabs +translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_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:

+ + + +

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:

+ + + +

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

+ + +
+ +

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

+ +

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:

+ + + +
+

notiz:

+ +

Diese Funktionen erfordern alle die ID (oder IDs) der Registerkarte, die sie manipulieren:

+ + + +

Während die folgenden Funktionen auf dem aktiven Tab (sofern keine Tab-ID zur Verfügung gestellt wird) wirken:

+ + +
+ +

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:

+ + + +

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 — neue CSS zu einem Tab hinzufügen ({{WebExtAPIRef ("tabu Die [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] der [[Datei]] ist (" tabs.removeCSS ")).

+ +

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:

+ + + +

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:

+ + + +

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:

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

+ + + +

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/beispiele/index.html b/files/de/mozilla/add-ons/webextensions/beispiele/index.html new file mode 100644 index 0000000000..627dbe559d --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/beispiele/index.html @@ -0,0 +1,22 @@ +--- +title: Beispiele für Erweiterungen +slug: Mozilla/Add-ons/WebExtensions/Beispiele +tags: + - WebExtensions +translation_of: Mozilla/Add-ons/WebExtensions/Examples +--- +
{{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/browser_support_for_javascript_apis/index.html b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html new file mode 100644 index 0000000000..1dffe19399 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/browser_support_for_javascript_apis/index.html @@ -0,0 +1,15 @@ +--- +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/deine_erste_weberweiterung/index.html b/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html new file mode 100644 index 0000000000..b48b805b98 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/deine_erste_weberweiterung/index.html @@ -0,0 +1,155 @@ +--- +title: Deine erste Erweiterung +slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung +tags: + - Anleitung + - Erweiterung + - Weberweiterung +translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +--- +
{{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"]
+    }
+  ]
+
+}
+ + + +

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/deine_zweite_erweiterung/index.html b/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html new file mode 100644 index 0000000000..cc002d0b24 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/deine_zweite_erweiterung/index.html @@ -0,0 +1,357 @@ +--- +title: Deine zweite Erweiterung +slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung +translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +--- +

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

+ + + +

Man kann die Struktur der Erweiterung wie folgt darstellen:

+ +

+ +

Es ist eine einfache Erweiterung, aber es zeigt viele der Grundkonzepte der WebExtensions API:

+ + + +

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

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

+ +

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:

+ + + +

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/add-ons/webextensions/extending_the_developer_tools/index.html b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html new file mode 100644 index 0000000000..688d48f544 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/extending_the_developer_tools/index.html @@ -0,0 +1,143 @@ +--- +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.

+
+ + + +

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:

+ +
+ +
+ +
+
+

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.

+ + + +

 

diff --git a/files/de/mozilla/add-ons/webextensions/index.html b/files/de/mozilla/add-ons/webextensions/index.html new file mode 100644 index 0000000000..bb1b68b2de --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/index.html @@ -0,0 +1,86 @@ +--- +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 new file mode 100644 index 0000000000..6222b35145 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/manifest.json/commands/index.html @@ -0,0 +1,184 @@ +--- +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:

+ + + +

Die Eigenschaft suggested_key ist selbst ein Objekt, das folgende Eigenschaften haben kann, die alle Zeichenketten sind:

+ + + +

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:

+ + + +

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:

+ + + +

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:

+ + + +

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:

+ + + +

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/devtools_page/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html new file mode 100644 index 0000000000..1b4afb1cfa --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html @@ -0,0 +1,42 @@ +--- +title: devtools_page +slug: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/devtools_page +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeString
MandatoryNo
Example + 
+"devtools_page": "devtools/my-page.html"
+
+ +

Use this key to enable your extension to extend the browser's built-in devtools.

+ +

This key is defined as a URL to an HTML file. The HTML file must be bundled with the extension, and the URL is relative to the extension's root.

+ +

See Extending the developer tools to learn more.

+ +

Example

+ +
"devtools_page": "devtools/my-page.html"
+ +

Browser compatibility

+ + + +

{{Compat("webextensions.manifest.devtools_page")}}

diff --git a/files/de/mozilla/add-ons/webextensions/manifest.json/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html new file mode 100644 index 0000000000..10a4fd8597 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/manifest.json/index.html @@ -0,0 +1,105 @@ +--- +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/manifest.json/theme/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html new file mode 100644 index 0000000000..30825db592 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html @@ -0,0 +1,1361 @@ +--- +title: theme +slug: Mozilla/Add-ons/WebExtensions/manifest.json/theme +translation_of: Mozilla/Add-ons/WebExtensions/manifest.json/theme +--- +
{{AddonSidebar}}
+ + + + + + + + + + + + + + + + +
TypeObject
MandatoryNo
Example + 
+"theme": {
+  "images": {
+    "theme_frame": "images/sun.jpg"
+  },
+  "colors": {
+    "frame": "#CF723F",
+    "tab_background_text": "#000"
+  }
+}
+
+ +

Use the theme key to define a static theme to apply to Firefox.

+ +
+

Note: If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.

+
+ +
+

Note: Since May 2019, themes need to be signed to be installed ({{bug(1545109)}}).  See Signing and distributing your add-on for more details.

+
+ +
+

Theme support in Firefox for Android: A new version of Firefox for Android, based on GeckoView, is under development. A pre-release version is available. The pre-release version does not support themes.

+
+ +

Image formats

+ +

The following image formats are supported in all theme image properties:

+ + + +

Syntax

+ +

The theme key is an object that takes the following properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
imagesObject +

Optional as of Firefox 60. Mandatory before Firefox 60.

+ +

A JSON object whose properties represent the images to display in various parts of the browser. See images for details on the properties that this object can contain.

+
colorsObject +

Mandatory.

+ +

A JSON object whose properties represent the colors of various parts of the browser. See colors for details on the properties that this object can contain.

+
propertiesObject +

Optional

+ +

This object has two properties that affect how the "additional_backgrounds" images are displayed. See properties for details on the properties that this object can contain.

+ +
    +
  • "additional_backgrounds_alignment": an array of enumeration values defining the alignment of the corresponding "additional_backgrounds": array item.
    + The alignment options include: "bottom", "center", "left", "right", "top", "center bottom", "center center", "center top", "left bottom", "left center", "left top", "right bottom", "right center", and "right top". If not specified, defaults to "right top".
    + Optional
    • +
  • "additional_backgrounds_tiling": an array of enumeration values defining how the corresponding "additional_backgrounds": array item repeats, with support for "no-repeat", "repeat", "repeat-x", and "repeat-y". If not specified, defaults to "no-repeat".
    + Optional
    • +
+
+ +

images

+ +

All URLs are relative to the manifest.json file and cannot reference an external URL.

+ +

Images should be 200 pixels high to ensure they always fill the header space vertically.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
headerURL {{Deprecated_Inline}}String +
+

headerURL has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use theme_frame instead.

+
+ +

The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.

+ +

Optional in desktop Firefox from Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60. Note also that in Firefox 60 onwards, any {{cssxref("text-shadow")}} applied to the header text is removed if no headerURL is specified (see {{bug(1404688)}}).

+ +

In Firefox for Android, headerURL or theme_frame  must be specified.

+
theme_frameString +

The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.

+ +
+

Chrome anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.

+
+ +

Optional in desktop Firefox 60 onwards. One of theme_frame or headerURL had to be specified before Firefox 60.

+ +

In Firefox for Android, headerURL or theme_frame  must be specified.

+
additional_backgroundsArray of String +
+

The additional_backgrounds property is experimental. It is currently accepted in release versions of Firefox, but its behavior is subject to change. It is not supported in Firefox for Android.

+
+ +

An array of URLs for additional background images to be added to the header area and displayed behind the "theme_frame": image. These images layer the first image in the array on top, the last image in the array at the bottom.

+ +

Optional.

+ +

By default all images are anchored to the upper right corner of the header area, but their alignment and repeat behavior can be controlled by properties of "properties":.

+
+ +

colors

+ +

These properties define the colors used for different parts of the browser. They are all optional (but note that "accentcolor" and "textcolor" were mandatory in Firefox before version 63).  How these properties affect the Firefox UI  is shown here:

+ + + + + + + +
+

Overview of the color properties and how they apply to Firefox UI components

+
+ +
+

Where a component is affected by multiple color properties, the properties are listed in order of precedence.

+
+ +

All these properties can be specified as either a string containing any valid CSS color string (including hexadecimal), or an RGB array, such as "tab_background_text": [ 107 , 99 , 23 ].

+ +
+

In Chrome, colors may only be specified as RGB arrays.

+ +

In Firefox for Android colors can be specified using:

+ + + +

Colors for Firefox for Android themes cannot be specified using color names.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameDescription
+

accentcolor {{Deprecated_Inline}}

+ 		+
+

accentcolor has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use the frame property instead.

+
+ +

The color of the header area background, displayed in the part of the header not covered or visible through the images specified in "headerURL" and "additional_backgrounds".

+ +
See example + + 
+"theme": {
+  "colors": {
+     "accentcolor": "red",
+     "tab_background_text": "white"
+  }
+}
+
+ +

+
bookmark_text +

The color of text and icons in the bookmark and find bars. Also, if tab_text isn't defined it sets the color of the active tab text and if icons isn't defined the color of the toolbar icons. Provided as Chrome compatible alias for toolbar_text.

+ +
+

Ensure any color used contrasts well with those used in frame and frame_inactive or toolbar if you're using that property.

+ +

Where icons isn't defined, also ensure good contrast with button_background_active and button_background_hover.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "tab_text": "white",
+    "toolbar": "black",
+    "bookmark_text": "red"
+  }
+}
+
+ +

Example use of the bookmark_text color property

+
button_background_active +

The color of the background of the pressed toolbar buttons.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "button_background_active": "red"
+  }
+}
+
+ +

+
button_background_hover +

The color of the background of the toolbar buttons on hover.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "button_background_hover": "red"
+  }
+}
+
+ +

+
icons +

The color of toolbar icons, excluding those in the find toolbar.

+ +
+

Ensure the color used contrasts well with those used in frame,  frame_inactive, button_background_active, and button_background_hover.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "icons": "red"
+  }
+}
+
+ +

+
icons_attention +

The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.

+ +
+

Ensure the color used contrasts well with those used in frame,  frame_inactive, button_background_active, and button_background_hover.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "icons_attention": "red"
+  }
+}
+
+ +

+
frame +

The color of the header area background, displayed in the part of the header not covered or visible through the images specified in "theme_frame" and "additional_backgrounds".

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "red",
+     "tab_background_text": "white"
+  }
+}
+
+ +

+
frame_inactive +

The color of the header area background when the browser window is inactive, displayed in the part of the header not covered or visible through the images specified in "theme_frame" and "additional_backgrounds".

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "red",
+     "frame_inactive": "gray",
+     "tab_text": "white"
+  }
+}
+
+ +

Example use of the frame_inactive color property

+
ntp_background +

The new tab page background color.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "ntp_background": "red",
+     "ntp_text": "white"
+  }
+}
+
+ +

+
ntp_text +

The new tab page text color.

+ +
+

Ensure the color used contrasts well with that used in ntp_background.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "ntp_background": "red",
+     "ntp_text": "white"
+  }
+}
+
+ +

+
popup +

The background color of popups (such as the url bar dropdown and the arrow panels).

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "red"
+  }
+}
+
+ +

+
popup_border +

The border color of popups.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "black",
+     "popup_text": "white",
+     "popup_border": "red"
+  }
+}
+
+ +

+
popup_highlight +

The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).

+ +
+

It's recommended to define popup_highlight_text to override the browser default text color on various platforms.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup_highlight": "red",
+     "popup_highlight_text": "white"
+  }
+}
+
+ +

+
popup_highlight_text +

The text color of items highlighted inside popups.

+ +
+

Ensure the color used contrasts well with that used in popup_highlight.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup_highlight": "black",
+     "popup_highlight_text": "red"
+  }
+}
+
+ +

+
popup_text +

The text color of popups.

+ +
+

Ensure the color used contrasts well with that used in popup.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "popup": "black",
+     "popup_text": "red"
+  }
+}
+
+ +

+
sidebar +

The background color of the sidebar.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "sidebar": "red",
+     "sidebar_highlight": "white",
+     "sidebar_highlight_text": "green",
+     "sidebar_text": "white"
+  }
+}
+
+ +

+
sidebar_border +

The border and splitter color of the browser sidebar

+ +
See example + + 
+"theme": {
+  "colors": {
+     "sidebar_border": "red"
+  }
+}
+
+ +

+
sidebar_highlight +

The background color of highlighted rows in built-in sidebars

+ +
See example + + 
+"theme": {
+  "colors": {
+     "sidebar_highlight": "red",
+     "sidebar_highlight_text": "white"
+  }
+}
+
+ +

+
sidebar_highlight_text +

The text color of highlighted rows in sidebars.

+ +
+

Ensure the color used contrasts well with that used in sidebar_highlight.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "sidebar_highlight": "pink",
+    "sidebar_highlight_text": "red",
+  }
+}
+
+ +

+
sidebar_text +

The text color of sidebars.

+ +
+

Ensure the color used contrasts well with that used in sidebar.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+     "sidebar": "red",
+     "sidebar_highlight": "white",
+     "sidebar_highlight_text": "green",
+     "sidebar_text": "white"
+  }
+}
+
+ +

+
tab_background_separator +

The color of the vertical separator of the background tabs.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_background_separator": "red"
+  }
+}
+
+ +

A closeup of browser tabs to highlight the separator.

+
tab_background_text +

The color of the text displayed in the inactive page tabs. If tab_text or bookmark_text isn't specified, applies to the active tab text.

+ +
+

Ensure the color used contrasts well with those used in tab_selected or frame and  frame_inactive.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "white",
+    "tab_background_text": "red"
+  }
+}
+
+ +

+
tab_line +

The color of the selected tab line.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_line": "red"
+  }
+}
+
+ +

+
tab_loading +

The color of the tab loading indicator and the tab loading burst.

+ +
See example + + 
+"theme": {
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_loading": "red"
+  }
+}
+
+ +

+
tab_selected +

The background color of the selected tab. When not in use selected tab color is set by frame and the frame_inactive.

+ +
See example + + 
+"theme": {
+  "images": {
+  "theme_frame": "weta.png"
+},
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_selected": "red"
+  }
+}
+
+ +

+
tab_text +

From Firefox 59, it represents the text color for the selected tab. If tab_line isn't specified, it also defines the color of the selected tab line.

+ +
+

Ensure the color used contrasts well with those used in tab_selected or frame and  frame_inactive.

+
+ +

From Firefox 55 to 58, it is incorrectly implemented as alias for "textcolor"

+ +
See example + + 
+"theme": {
+  "images": {
+  "theme_frame": "weta.png"
+},
+  "colors": {
+     "frame": "black",
+     "tab_background_text": "white",
+     "tab_selected": "white",
+     "tab_text": "red"
+  }
+}
+
+ +

+
textcolor {{Deprecated_Inline}} +
+

textcolor has been removed in Firefox 70. You will begin to get warnings in Firefox 65 and later if you load a theme that uses this property. Use tab_background_text instead.

+
+ +

The color of the text displayed in the header area.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "white",
+    "textcolor": "red"
+  }
+}
+
+ +

+
toolbar +

The background color for the navigation bar, the bookmarks bar, and the selected tab.

+ +

This also sets the background color of the "Find" bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "red",
+    "tab_background_text": "white"
+  }
+}
+
+ +

+
toolbar_bottom_separator +

The color of the line separating the bottom of the toolbar from the region below.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar_bottom_separator": "red"
+  }
+}
+
+ +

+
toolbar_field +

The background color for fields in the toolbar, such as the URL bar.

+ +

This also sets the background color of the Find in page field.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "red"
+  }
+}
+
+ +

+
toolbar_field_border +

The border color for fields in the toolbar.

+ +

This also sets the border color of the Find in page field.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border": "red"
+  }
+}
+
+ +

+
toolbar_field_border_focus +

The focused border color for fields in the toolbar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_border_focus": "red"
+  }
+}
+
+ +

+
toolbar_field_focus +

The focused background color for fields in the toolbar, such as the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_focus": "red"
+  }
+}
+
+ +

+
toolbar_field_highlightThe background color used to indicate the current selection of text in the URL bar (and the search bar, if it's configured to be separate). +
See example + 
+"theme": {
+  "colors": {
+    "toolbar_field": "rgba(255, 255, 255, 0.91)",
+    "toolbar_field_text": "rgb(0, 100, 0)",
+    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
+    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+  }
+}
+
+ +

Example showing customized text and highlight colors in the URL bar

+ +

Here, the toolbar_field_highlight field specifies that the highlight color is a light green, while the text is set to a dark-to-medium green using toolbar_field_highlight_text.

+
toolbar_field_highlight_text +

The color used to draw text that's currently selected in the URL bar (and the search bar, if it's configured to be separate box).

+ +
+

Ensure the color used contrasts well with those used in toolbar_field_highlight.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "toolbar_field": "rgba(255, 255, 255, 0.91)",
+    "toolbar_field_text": "rgb(0, 100, 0)",
+    "toolbar_field_highlight": "rgb(180, 240, 180, 0.9)",
+    "toolbar_field_highlight_text": "rgb(0, 80, 0)"
+  }
+}
+
+ +

Example showing customized text and highlight colors in the URL bar

+ +

Here, the toolbar_field_highlight_text field is used to set the text color to a dark medium-dark green, while the highlight color is  a light green.

+
toolbar_field_separator +

The color of separators inside the URL bar. In Firefox 58 this was implemented as toolbar_vertical_separator.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field_separator": "red"
+  }
+}
+
+ +

+ +

In this screenshot, "toolbar_vertical_separator" is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.

+
toolbar_field_text +

The color of text in fields in the toolbar, such as the URL bar. This also sets the color of text in the Find in page field.

+ +
+

Ensure the color used contrasts well with those used in toolbar_field.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "red"
+  }
+}
+
+ +

+
toolbar_field_text_focus +

The color of text in focused fields in the toolbar, such as the URL bar.

+ +
+

Ensure the color used contrasts well with those used in toolbar_field_focus.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "toolbar": "black",
+    "tab_background_text": "white",
+    "toolbar_field": "black",
+    "toolbar_field_text": "white",
+    "toolbar_field_text_focus": "red"
+  }
+}
+
+ +

+
toolbar_text +

The color of toolbar text. This also sets the color of  text in the "Find" bar.

+ +
+

For compatibility with Chrome, use the alias bookmark_text.

+
+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_text": "red"
+  }
+}
+
+ +

+
toolbar_top_separator +

The color of the line separating the top of the toolbar from the region above.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_top_separator": "red"
+  }
+}
+
+ +

+
toolbar_vertical_separator +

The color of the separator next to the application menu icon. In Firefox 58, it corresponds to the color of separators inside the URL bar.

+ +
See example + + 
+"theme": {
+  "colors": {
+    "frame": "black",
+    "tab_background_text": "white",
+    "toolbar": "black",
+    "toolbar_vertical_separator": "red"
+  }
+}
+
+ +

+
+ +

Aliases

+ +

Additionally, this key accepts various properties that are aliases for one of the properties above. These are provided for compatibility with Chrome. If an alias is given, and the non-alias version is also given, then the value will be taken from the non-alias version.

+ +
+

Beginning Firefox 70, the following properties are removed: accentcolor and textcolor. Use frame and tab_background_text instead. Using these values in themes loaded into Firefox 65 or later will raise warnings.

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
NameAlias for
bookmark_texttoolbar_text
frameaccentcolor {{Deprecated_Inline}}
frame_inactiveaccentcolor {{Deprecated_Inline}}
tab_background_texttextcolor {{Deprecated_Inline}}
+ +

properties

+ + + + + + + + + + + + + + + + + + + + + +
NameTypeDescription
additional_backgrounds_alignment +

Array of String

+ 		+

Optional.

+ +

An array of enumeration values defining the alignment of the corresponding "additional_backgrounds": array item.
+ The alignment options include:

+ +
    +
  • "bottom"
    • +
  • "center"
    • +
  • "left"
    • +
  • "right"
    • +
  • "top"
    • +
  • "center bottom"
    • +
  • "center center"
    • +
  • "center top"
    • +
  • "left bottom"
    • +
  • "left center"
    • +
  • "left top"
    • +
  • "right bottom"
    • +
  • "right center"
    • +
  • "right top".
    • +
+ +

If not specified, defaults to "right top".

+
additional_backgrounds_tiling +

Array of String

+ 		+

Optional.

+ +

An array of enumeration values defining how the corresponding "additional_backgrounds": array item repeats. Options include:

+ +
    +
  • "no-repeat"
    • +
  • "repeat"
    • +
  • "repeat-x"
    • +
  • "repeat-y"
    • +
+ +

If not specified, defaults to "no-repeat".

+
+ +

Examples

+ +

A basic theme must define an image to add to the header, the accent color to use in the header, and the color of text used in the header:

+ +
 "theme": {
+   "images": {
+     "theme_frame": "images/sun.jpg"
+   },
+   "colors": {
+     "frame": "#CF723F",
+     "tab_background_text": "#000"
+   }
+ }
+ +

Multiple images can be used to fill the header. Before Firefox version 60, use a blank or transparent header image to gain control over the placement of each additional image:

+ +
 "theme": {
+   "images": {
+     "additional_backgrounds": [ "images/left.png" , "images/middle.png", "images/right.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "left top" , "top", "right top"]
+   },
+   "colors": {
+     "frame": "blue",
+     "tab_background_text": "#ffffff"
+   }
+ }
+ +

You can also fill the header with a repeated image, or images, in this case a single image anchored in the middle top of the header and repeated across the rest of the header:

+ +
 "theme": {
+   "images": {
+     "additional_backgrounds": [ "images/logo.png"]
+   },
+   "properties": {
+     "additional_backgrounds_alignment": [ "top" ],
+     "additional_backgrounds_tiling": [ "repeat"  ]
+   },
+   "colors": {
+     "frame": "green",
+     "tab_background_text": "#000"
+   }
+ }
+ +

The following example uses most of the different values for theme.colors:

+ +
  "theme": {
+    "images": {
+      "theme_frame": "weta.png"
+    },
+
+    "colors": {
+       "frame": "darkgreen",
+       "tab_background_text": "white",
+       "toolbar": "blue",
+       "bookmark_text": "cyan",
+       "toolbar_field": "orange",
+       "toolbar_field_border": "white",
+       "toolbar_field_text": "green",
+       "toolbar_top_separator": "red",
+       "toolbar_bottom_separator": "white",
+       "toolbar_vertical_separator": "white"
+    }
+  }
+ +

It will give you a browser that looks like this:

+ +

+ +

In this screenshot, "toolbar_vertical_separator" is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.

+ +

Browser compatibility

+ + + +

{{Compat("webextensions.manifest.theme")}}

+ +

Colors

+ +

{{Compat("webextensions.manifest.theme.colors", 10)}}

+ +

Images

+ +

{{Compat("webextensions.manifest.theme.images", 10)}}

+ +

Properties

+ +

{{Compat("webextensions.manifest.theme.properties", 10)}}

+ +

Chrome compatibility

+ +

In Chrome:

+ + diff --git a/files/de/mozilla/add-ons/webextensions/match_patterns/index.html b/files/de/mozilla/add-ons/webextensions/match_patterns/index.html new file mode 100644 index 0000000000..6c4694c922 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/match_patterns/index.html @@ -0,0 +1,430 @@ +--- +title: Match patterns in extension manifests +slug: Mozilla/Add-ons/WebExtensions/Match_patterns +translation_of: Mozilla/Add-ons/WebExtensions/Match_patterns +--- +
{{AddonSidebar}}
+ +

Match patterns are a way to specify groups of URLs: a match pattern matches a specific set of URLs. They are used in WebExtensions APIs in a few places, most notably to specify which documents to load content scripts into, and to specify which URLs to add webRequest listeners to.

+ +

APIs that use match patterns usually accept a list of match patterns, and will perform the appropriate action if the URL matches any of the patterns. See, for example, the content_scripts key in manifest.json.

+ +

Match pattern structure

+ +
+

Note: Some browsers don’t support certain schemes.
+ Check the Browser compatibility table for details.

+
+ +

All match patterns are specified as strings. Apart from the special <all_urls> pattern, match patterns consist of three parts: scheme, host, and path. The scheme and host are separated by ://.

+ +
<scheme>://<host><path>
+ +

scheme

+ +

The scheme component may take one of two forms:

+ + + + + + + + + + + + + + + + + + +
FormMatches
*Only "http" and "https" and in some browsers also "ws" and "wss".
One of http, https, ws, wss, ftp, ftps, data or file.Only the given scheme.
+ +

host

+ +

The host component may take one of three forms:

+ + + + + + + + + + + + + + + + + + + + + + +
FormMatches
*Any host.
*. followed by part of the hostname.The given host and any of its subdomains.
A complete hostname, without wildcards.Only the given host.
+ +

host must not include a port number.

+ +

host is optional only if the scheme is "file".

+ +

Note that the wildcard may only appear at the start.

+ +

path

+ +

The path component must begin with a /.

+ +

After that, it may subsequently contain any combination of the * wildcard and any of the characters that are allowed in URL paths or query strings. Unlike host, the path component may contain the * wildcard in the middle or at the end, and the * wildcard may appear more than once.

+ +

The value for the path matches against the string which is the URL path plus the URL query string. This includes the ? between the two, if the query string is present in the URL. For example, if you want to match URLs on any domain where the URL path ends with foo.bar, then you need to use an array of Match Patterns like ['*://*/*foo.bar', '*://*/*foo.bar?*']. The ?* is needed, rather than just bar*, in order to anchor the ending * as applying to the URL query string and not some portion of the URL path.

+ +

Neither the URL fragment identifier, nor the # which precedes it, are considered as part of the path.

+ +
+

Note: The path pattern string should not include a port number. Adding a port, as in: "http://localhost:1234/*" causes the match pattern to be ignored. However, "http://localhost:1234" will match with "http://localhost/*"

+
+ +

<all_urls>

+ +

The special value <all_urls> matches all URLs under any of the supported schemes: that is "http", "https", "ws", "wss", "ftp", "data", and "file".

+ +

Examples

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PatternExample matchesExample non-matches
+

<all_urls>

+ +

Match all URLs.

+ 		+

http://example.org/

+ +

https://a.org/some/path/

+ +

ws://sockets.somewhere.org/

+ +

wss://ws.example.com/stuff/

+ +

ftp://files.somewhere.org/

+ +

ftps://files.somewhere.org/

+ 		+

resource://a/b/c/
+ (unsupported scheme)

+
+

*://*/*

+ +

Match all HTTP, HTTPS and WebSocket URLs.

+ 		+

http://example.org/

+ +

https://a.org/some/path/

+ +

ws://sockets.somewhere.org/

+ +

wss://ws.example.com/stuff/

+ 		+

ftp://ftp.example.org/
+ (unmatched scheme)

+ +

ftps://ftp.example.org/
+ (unmatched scheme)

+ +

file:///a/
+ (unmatched scheme)

+
+

*://*.mozilla.org/*

+ +

Match all HTTP, HTTPS and WebSocket URLs that are hosted at "mozilla.org" or one of its subdomains.

+ 		+

http://mozilla.org/

+ +

https://mozilla.org/

+ +

http://a.mozilla.org/

+ +

http://a.b.mozilla.org/

+ +

https://b.mozilla.org/path/

+ +

ws://ws.mozilla.org/

+ +

wss://secure.mozilla.org/something

+ 		+

ftp://mozilla.org/
+ (unmatched scheme)

+ +

http://mozilla.com/
+ (unmatched host)

+ +

http://firefox.org/
+ (unmatched host)

+
+

*://mozilla.org/

+ +

Match all HTTP, HTTPS and WebSocket URLs that are hosted at exactly "mozilla.org/".

+ 		+

http://mozilla.org/

+ +

https://mozilla.org/

+ +

ws://mozilla.org/

+ +

wss://mozilla.org/

+ 		+

ftp://mozilla.org/
+ (unmatched scheme)

+ +

http://a.mozilla.org/
+ (unmatched host)

+ +

http://mozilla.org/a
+ (unmatched path)

+
+

ftp://mozilla.org/

+ +

Match only "ftp://mozilla.org/".

+ 		ftp://mozilla.org +

http://mozilla.org/
+ (unmatched scheme)

+ +

ftp://sub.mozilla.org/
+ (unmatched host)

+ +

ftp://mozilla.org/path
+ (unmatched path)

+
+

https://*/path

+ +

Match HTTPS URLs on any host, whose path is "path".

+ 		+

https://mozilla.org/path

+ +

https://a.mozilla.org/path

+ +

https://something.com/path

+ 		+

http://mozilla.org/path
+ (unmatched scheme)

+ +

https://mozilla.org/path/
+ (unmatched path)

+ +

https://mozilla.org/a
+ (unmatched path)

+ +

https://mozilla.org/
+ (unmatched path)

+ +

https://mozilla.org/path?foo=1
+ (unmatched path due to URL query string)

+
+

https://*/path/

+ +

Match HTTPS URLs on any host, whose path is "path/" and which has no URL query string.

+ 		+

https://mozilla.org/path/

+ +

https://a.mozilla.org/path/

+ +

https://something.com/path/

+ 		+

http://mozilla.org/path/
+ (unmatched scheme)

+ +

https://mozilla.org/path
+ (unmatched path)

+ +

https://mozilla.org/a
+ (unmatched path)

+ +

https://mozilla.org/
+ (unmatched path)

+ +

https://mozilla.org/path/?foo=1
+ (unmatched path due to URL query string)

+
+

https://mozilla.org/*

+ +

Match HTTPS URLs only at "mozilla.org", with any URL path and URL query string.

+ 		+

https://mozilla.org/

+ +

https://mozilla.org/path

+ +

https://mozilla.org/another

+ +

https://mozilla.org/path/to/doc

+ +

https://mozilla.org/path/to/doc?foo=1

+ 		+

http://mozilla.org/path
+ (unmatched scheme)

+ +

https://mozilla.com/path
+ (unmatched host)

+
+

https://mozilla.org/a/b/c/

+ +

Match only this URL, or this URL with any URL fragment.

+ 		+

https://mozilla.org/a/b/c/

+ +

https://mozilla.org/a/b/c/#section1

+ 		Anything else.
+

https://mozilla.org/*/b/*/

+ +

Match HTTPS URLs hosted on "mozilla.org", whose path contains a component "b" somewhere in the middle. Will match URLs with query strings, if the string ends in a /.

+ 		+

https://mozilla.org/a/b/c/

+ +

https://mozilla.org/d/b/f/

+ +

https://mozilla.org/a/b/c/d/

+ +

https://mozilla.org/a/b/c/d/#section1

+ +

https://mozilla.org/a/b/c/d/?foo=/

+ +

https://mozilla.org/a?foo=21314&bar=/b/&extra=c/

+ 		+

https://mozilla.org/b/*/
+ (unmatched path)

+ +

https://mozilla.org/a/b/
+ (unmatched path)

+ +

https://mozilla.org/a/b/c/d/?foo=bar
+ (unmatched path due to URL query string)

+
+

file:///blah/*

+ +

Match any FILE URL whose path begins with "blah".

+ 		+

file:///blah/

+ +

file:///blah/bleh

+ 		file:///bleh/
+ (unmatched path)
+ +

Invalid match patterns

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Invalid patternReason
resource://path/Unsupported scheme.
https://mozilla.orgNo path.
https://mozilla.*.org/"*" in host must be at the start.
https://*zilla.org/"*" in host must be the only character or be followed by ".".
http*://mozilla.org/"*" in scheme must be the only character.
https://mozilla.org:80/Host must not include a port number.
*://*Empty path: this should be "*://*/*".
file://*Empty path: this should be "file:///*".
+ +

Browser compatibility

+ +

scheme

+ + + +

{{Compat("webextensions.match_patterns.scheme",10)}}

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 new file mode 100644 index 0000000000..85498e8b30 --- /dev/null +++ b/files/de/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,24 @@ +--- +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/\303\274berliegende_erweiterungen/index.html" "b/files/de/mozilla/add-ons/\303\274berliegende_erweiterungen/index.html" new file mode 100644 index 0000000000..0214de4021 --- /dev/null +++ "b/files/de/mozilla/add-ons/\303\274berliegende_erweiterungen/index.html" @@ -0,0 +1,54 @@ +--- +title: Legacy-Erweiterungen +slug: Mozilla/Add-ons/überliegende_Erweiterungen +tags: + - Add-ons + - Erweiterungen +translation_of: Archive/Add-ons/Overlay_Extensions +--- +

Diese Seite enthält Links zu der Dokumentation für die approach für Entwickeln von Erweiterungen für Gecko-basierte Applikationen welche benutzen:

+ + + +

Priorität zu Firefox 4, und der Gecko-2- Engine welche es ermöglicht, dies war die einzige Möglichkeit Erweiterungen zu entwickeln. Diese Methode wurde sehr übertroffen von Neustartlosen Erweiterungen, und der Add-on SDK, welche an ihrer Spitze gebaut ist. Die privilegierten JavaScript APIs, welche hier beschrieben wurden, können in diesen neueren Typen von Add-ons immer noch benutzt werden.

+ +

XUL-Schule

+ +

XUL-Schule ist ein verständliches Addonentwicklungstutorial, fokussierend auf die Entwicklung von Firefoxerweiterungen, aber ist meistens übertragbar auf andere Gecko-basierte Applikationen.

+ +

Mehr Ressourcen

+ +
+
+
+
Setting up your environment
+
Setting up the application for extension development.
+
XUL
+
Tutorials and reference for the user interface language used by XUL extensions.
+
Code snippets
+
Sample code for many of the things you'll want to do.
+
Installing extensions
+
How to install an extension by copying the extension files into the application's install directory.
+
Firefox add-ons developer guide
+
A guide to developing overlay extensions.
+
+
+ +
+
+
JavaScript code modules
+
JavaScript modules available to extension developers.
+
Extension preferences
+
How to specify the preferences for your extension that will appear in the Add-ons Manager.
+
Extension packaging
+
How extensions are packaged and installed.
+
Binary Firefox extensions
+
Creating binary extensions for Firefox.
+
+
+
+ +

 

diff --git a/files/de/mozilla/chrome_registration/index.html b/files/de/mozilla/chrome_registration/index.html new file mode 100644 index 0000000000..44fb60e26f --- /dev/null +++ b/files/de/mozilla/chrome_registration/index.html @@ -0,0 +1,48 @@ +--- +title: Chrome registration +slug: Mozilla/Chrome_Registration +translation_of: Mozilla/Chrome_Registration +--- +

Was ist chrome?

+ +

Chrome ist eine Gruppe von Benutzeroberflächenelementen des Anwendungsfensters, die sich außerhalb des Inhaltsbereichs des Fensters befinden. Symbolleisten, Menüleisten, Fortschrittsleisten und Fenstertitelleisten sind Beispiele für Elemente, die normalerweise zum Chrom gehören.

+ +

Mozilla sucht und liest die root-Datei chrome.manifest nach Erweiterungen und Designs.

+ +
+

Note: With {{Gecko("1.9.2")}} and older, Mozilla reads chrome/*.manifest files from applications. Starting with {{Gecko("2.0")}}, the root chrome.manifest is the only manifest used; you can add manifest commands to that file to load secondary manifests.

+
+ +

Chrome Anbieter

+ +

Ein Anbieter von Chrom für einen bestimmten Fenstertyp (z. B. für das Browserfenster) wird als Chromanbieter bezeichnet. Die Anbieter arbeiten zusammen, um einen vollständigen Chromsatz für ein bestimmtes Fenster bereitzustellen, von den Bildern auf den Symbolleistenschaltflächen bis zu den Dateien, die den Text, den Inhalt und das Erscheinungsbild des Fensters selbst beschreiben.
+
+ Es gibt drei grundlegende Arten von Chromanbietern:
+
+ Inhalt
+     Die Hauptquelldatei für eine Fensterbeschreibung stammt vom Inhaltsanbieter und kann von jedem Dateityp sein, der in Mozilla angezeigt werden kann. Normalerweise handelt es sich um eine XUL-Datei, da XUL zur Beschreibung des Inhalts von Fenstern und Dialogen gedacht ist. Die JavaScript-Dateien, die die Benutzeroberfläche definieren, sind auch in den Inhaltspaketen sowie in den meisten {{Glossary ("XBL")}} - Bindungsdateien enthalten.

+ +

Gebietsschema
+     Lokalisierbare Anwendungen speichern alle lokalisierten Informationen in Gebietsschemaanbietern. Dadurch können Übersetzer ein anderes Chrome-Paket zum Übersetzen einer Anwendung einstecken, ohne den Rest des Quellcodes zu ändern. Die zwei Haupttypen von lokalisierbaren Dateien sind {{Glossary ("DTD")}} - Dateien und Java-Eigenschaftendateien.

+ +

Skin
+     Ein Skin-Anbieter ist dafür verantwortlich, einen vollständigen Satz von Dateien bereitzustellen, der das optische Erscheinungsbild des Chroms beschreibt. Normalerweise stellt ein Skin-Provider Dateien und Bilder {{Glossary ("CSS")}} bereit.

+ +

 

+ +
+

Hinweis: Aus Skin-Paketen geladene Skripts ( einschließlich der in XBL gefundenen) werden nicht ausgeführt.

+
+ +

 

diff --git a/files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html b/files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html new file mode 100644 index 0000000000..6fea30e835 --- /dev/null +++ b/files/de/mozilla/creating_a_spell_check_dictionary_add-on/index.html @@ -0,0 +1,105 @@ +--- +title: >- + Auf dieser Seite wird beschrieben, wie Sie ein Wörterbuch für die + Rechtschreibprüfung von Hunspell als Firefox-Add-On +slug: Mozilla/Creating_a_spell_check_dictionary_add-on +tags: + - Deutsch + - German Translation + - Lesen Sie die Tagging-Anleitung. + - Übersetzung +translation_of: Mozilla/Creating_a_spell_check_dictionary_add-on +--- +
+

This paDieserge describes how to package a Hunspell spell check dictionary as a Firefox add-on, or how to update your existing add-on, so that it can be installed, uninstalled and updated without a restart.

+
+ +

Parts neededdictionary add-on, you first need two things:

+ + + +

If you are creating a new dictionary, as opposed to updating an existing one, please make sure that there is not already a dictionary available for your locale. If there already is one, try contacting the author to get it updated, or contact AMO editors if the author does not respond.

+ +

Packaging

+ +

A Firefox add-on is a ZIP file renamed to use an .xpi file extension instead of the normal .zip file extension. To create a dictionary add-on, simply create a ZIP file which contains the following files and folders:

+ +

my-dictionary.xpi

+ + + +

The .dic and .aff files must be placed in a subfolder named dictionaries within the ZIP file. Both files must have the locale code as their file name. You also have to add a file named install.rdf to the root of the ZIP file. This file contains information about your add-on such as name and version number (see below). In addition to these required files, you may add optional files, for example to give your add-on an icon or to describe the license of the dictionary.

+ +

Here is an example of the install.rdf file. You can create and edit it with a plain text editor such as Notepad.

+ +

<?xml version="1.0"?>
+ <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+      xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+   <Description about="urn:mozilla:install-manifest">
+     <em:id>locale-code@dictionaries.addons.mozilla.org</em:id>
+     <em:version>version number</em:version>
+     <em:type>64</em:type>
+     <em:unpack>true</em:unpack>
+     <em:name>Name</em:name>
+     <!--
+       Other install.rdf metadata such as em:localized, em:description, em:creator,
+       em:developer, em:translator, em:contributor or em:homepageURL
+     -->
+
+     <!-- Firefox -->
+     <em:targetApplication>
+       <Description>
+         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+         <em:minVersion>18.0a1</em:minVersion>
+         <em:maxVersion>46.0</em:maxVersion>
+       </Description>
+     </em:targetApplication>
+
+     <!-- Thunderbird -->
+     <em:targetApplication>
+       <Description>
+         <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
+         <em:minVersion>18.0a1</em:minVersion>
+         <em:maxVersion>22.0</em:maxVersion>
+       </Description>
+     </em:targetApplication>
+
+     <!-- SeaMonkey -->
+     <em:targetApplication>
+       <Description>
+         <em:id>{92650c4d-4b8e-4d2a-b7eb-24ecf4f6b63a}</em:id>
+         <em:minVersion>2.15a1</em:minVersion>
+         <em:maxVersion>2.49</em:maxVersion>
+       </Description>
+     </em:targetApplication>
+   </Description>
+ </RDF>

+ +

There are some rules about how you should adapt the install.rdf file:

+ + + +

Once you have added these files to your ZIP file and renamed the file to have the .xpi extension, you can install your add-on in Firefox and test it. After a successful test, you can upload your add-on to addons.mozilla.org and ask for it to be included in the Dictionaries & Language Packs page.

+ +

Reference

+ + diff --git a/files/de/mozilla/css/index.html b/files/de/mozilla/css/index.html new file mode 100644 index 0000000000..52ff0c90d6 --- /dev/null +++ b/files/de/mozilla/css/index.html @@ -0,0 +1,11 @@ +--- +title: Mozilla internal-only CSS +slug: Mozilla/CSS +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Gecko/Chrome/CSS +--- +

This set of pages details CSS features that are only available internally in the Firefox browser — i.e. only inside the US stylesheet.

+ +

{{SubpagesWithSummaries}}

diff --git a/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html b/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html new file mode 100644 index 0000000000..1734710732 --- /dev/null +++ b/files/de/mozilla/developer_guide/firefox_erfolgreich_erstellt/index.html @@ -0,0 +1,14 @@ +--- +title: 'So, Du hast Firefox erfolgreich erstellt' +slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt +translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +--- +

Ein Link zu dieser Seite wird nach dem erfolgreichen Erstellen von Firefox angezeigt. Diese Seite sollte nützliche nächste Schritte enthalten, wie Links wie man Test laufen lassen kann, Build packen kann, etc. Der Inhalt hier sollte kurz gehalten werden, genauere Informationen sollten in den verlinkten Seiten hinzugefügt werden. Die Zielgruppe sind Besucher, die gerade Firefox zum ersten mal gebaut haben.

+ +

Ein paar interessante Links:

+ +

Tests laufen lassen

+ +

Debuggen

+ +

Fehler melden

diff --git a/files/de/mozilla/developer_guide/index.html b/files/de/mozilla/developer_guide/index.html new file mode 100644 index 0000000000..82603e44bc --- /dev/null +++ b/files/de/mozilla/developer_guide/index.html @@ -0,0 +1,108 @@ +--- +title: Entwicklerhandbuch +slug: Mozilla/Developer_guide +tags: + - Entwicklerhandbuch +translation_of: Mozilla/Developer_guide +--- +

Egal, ob Sie ein alter Hase sind oder gerade erst anfangen, von dieser Seite aus finden Sie Artikel, die Ihnen während der Entwicklung von Mozilla Hilfestellung bieten können.

+

Zum ersten Mal hier?

+
+
+ Getting Started (auf Englisch)
+
+ Eine Schritt-für-Schritt-Anleitung für Anfänger darüber, wie man sich an Mozilla beteiligen kann.
+
+
+
+

Dokumentation

+
+
+ Mit dem Mozilla-Quellcode arbeiten
+
+ Ein Überblick über den Code, wie man den Code bekommt und der Code-Stilführer.
+
+ Build-Anweisungen
+
+ Wie man Firefox, Thunderbird, SeaMonkey, oder andere Mozilla-Applikationen kompiliert.
+
+ Überblick über den Entwicklungsprozess
+
+ Ein Überblick über den kompletten Entwicklungsprozess von Mozilla
+
+ Automatisiertes Testen
+
+ Wie man Mozillas automatisierte Tests ausführt und wie neue Tests hinzugefügt werden können.
+
+ Wie Sie Ihren Patch einreichen können
+
+ Wenn Sie Ihren Patch geschrieben haben, muss dieser im Tree eingereicht werden. Dieser Artikel erklärt den Review-Prozess und wie Sie es schaffen, dass Ihr Patch angenommen wird.
+
+ Mozilla-Module und "Eigentum" an Modulen
+
+ Dieser Artikel enthält Informationen über Mozillas Module, was die Rolle eines Modul-Eigentümers ist und wie Modul-Eigentümer ausgewählt werden.
+
+ Arbeit an der Firefox-Benutzeroberfläche
+
+ Wie man in die Entwicklung der Firefox Benutzerschnittstelle und Front-End-Software beteiligt werden kann.
+
+ Codeschnipsel
+
+ Nützliche Code-Beispiele für weit gestreute Anwendungsgebiete.
+
+ Mozilla Entwicklungsstrategien
+
+ Tipps wie man das meiste aus seiner Arbeit am Mozilla Projekt herausholen kann.
+
+ Debugging
+
+ Hilfsreiche Tipps und Anleitungen für das Debugging von Mozilla Code.
+
+ Die Mozilla Plattform
+
+ Informationen über die Arbeit mit der Mozilla Plattform.
+
+ Interface Kompatibilität
+
+ Hinweise zu Änderungen an skriptbaren und binären APIs in Mozilla
+
+
+
+

Tools

+
+
+ Bugzilla
+
+ Die Bugzilla-Datenbank wird verwendet, um Fehler in Mozilla-Produkten aufzuzeichnen.
+
+ MXR
+
+ Durchsuchen des Mozilla-Quellcodes im Web.
+
+ Bonsai
+
+ Mit dem Bonsai Tool lässt sich heraus finden, wer wann welche Datei verändert hat.
+
+ Mercurial
+
+ Das Versions-Kontrollsystem, das Mozillas Quellcode verwaltet.
+
+ Tinderbox
+
+ Tinderbox zeigt den Status des Trees (ob aktuell erfolgreich kompliliert werden kann oder nicht). Überprüfen Sie den Status bevor Sie Code einreichen, um sicher zu gehen, dass Sie nicht an einem arbeiten Tree arbeiten.
+
+ Crash tracking
+
+ Informationen über die Socorro und Talkback Crash Report Systeme.
+
+ Performance Aufzeichnung
+
+ Siehe Performance Informationen für Mozilla Projekte.
+
+ Entwicklerforen
+
+ Eine Themen-spezifische Liste von Forendiskussionen, in denen Sie sich über die Entwicklung von Mozilla austauschen können.
+
+
+
+

{{ languages( { "en": "en/Developer_Guide", "zh-cn": "Cn/Developer_Guide", "ja": "ja/Developer_Guide" } ) }}

diff --git a/files/de/mozilla/developer_guide/quelltexte/index.html b/files/de/mozilla/developer_guide/quelltexte/index.html new file mode 100644 index 0000000000..b5cc6c79bb --- /dev/null +++ b/files/de/mozilla/developer_guide/quelltexte/index.html @@ -0,0 +1,46 @@ +--- +title: Mit Mozilla Quellcode arbeiten +slug: Mozilla/Developer_guide/Quelltexte +translation_of: Mozilla/Developer_guide/Source_Code +--- +

Die unten aufgeführten Artikel helfen Ihnen dabei mit dem Mozilla Quelltext umgehen zu können, zu lernen wie man durch den Code navigiert und wie Änderungen in Projekte einfließen können.

+ + + + + + + + + + + +
+

Dokumentation

+
+
+
Code aus der Mercurial Repository erhalten
+
Falls Sie vorhaben sich am Mozilla Projekt zu beteiligen, bietet es sich an den Quelltext über die Mercurial Repository zu erhalten. Lesen Sie hier wie Sie das am Besten machen.
+
Mozilla Quelltexte herunterladen
+
Wenn Sie den Quelltext für eine bestimmte Version eines Mozilla Produkts suchen, können Sie ein Archiv herunterladen.
+
Mozilla Quelltexte online durchsuchen
+
Lernen Sie wie man MXR, Mozillas online Code-Suchwerkzeug, bedient.  Das ist kein guter Weg um Code herunterzuladen, aber um ihn zu durchsuchen.
+
Mozilla Verzeichnisstrukturen für Quelltexte
+
Lernen Sie mehr über die unterschiedlichen Verzeichnisse in Mozillas Verzeichnisstrukturen und finden Sie schnell das, was Sie suchen.
+
Anfänger Bugs
+
Wenn Sie neu dabei sind und an etwas arbeiten möchten, schauen Sie sich mal diese Bugs an.
+
+ 		+
+
Mozilla Coding Style
+
Dieser Code Style Guide liefert Information über das korrekte Format der Quelltexte, damit Reviewers Sie nicht direkt verspotten, wenn Sie Ihren Code einreichen.
+
Try Servers
+
Mozilla Produkte werden auf mindestens drei Plattformen kompiliert. Wenn Sie nicht Zugang zu allen haben, können Sie diese Testserver nutzen, um zu überprüfen, ob Ihr Patch auf allen Plattformen funktioniert.
+
Einen Patch erstellen
+
Sobald Sie den Mozilla Code verändert haben und sicher sind, dass alles funktioniert, erstellen Sie einen Patch und reichen diesen zur Überprüfung ein.
+
Commit Zugang zum Quelltext erhalten
+
Sind Sie bereit den wenigen Committers beizutreten? Finden Sie heraus, wie Sie Check-in Zugang zum Mozilla Code erhalten.
+
Ältere Mozilla Codes über CVS erhalten
+
Ältere Versionen des Mozilla Quelltexts und auch Versionen von NSS und NSPR werden in einer CVS Repository aufbewahrt. Lernen Sie hier mehr darüber.
+
+
diff --git a/files/de/mozilla/firefox/developer_edition/index.html b/files/de/mozilla/firefox/developer_edition/index.html new file mode 100644 index 0000000000..41bacac01d --- /dev/null +++ b/files/de/mozilla/firefox/developer_edition/index.html @@ -0,0 +1,57 @@ +--- +title: Developer Edition +slug: Mozilla/Firefox/Developer_Edition +translation_of: Mozilla/Firefox/Developer_Edition +--- +
{{FirefoxSidebar}}

+ +

Eine Version von Firefox, maßgeschneidert für Webentwickler.

+ +

Firefox Developer Edition herunterladen

+ +
+
+
+

Die neuesten Firefox-Features

+ +

Firefox Developer Edition ersetzt den Aurora-Kanal im Firefox Release-Prozess. Wie bei Aurora werden Features alle sechs Wochen in die Developer Edition einfließen, nachdem sie in den Nightly-Builds stabilisiert wurden.

+ +

Indem Sie die Developer Edition nutzen, erhalten Sie Zugriff auf Tools und Plattform-Features mindestens 12 Wochen, bevor sie den Firefox Release-Kanal erreichen.

+ +

Finden Sie heraus, was neu in der Developer Edition ist.

+
+ +
+

Experimentelle Entwickler-Tools

+ +

Wir binden experimentelle Tools ein, die noch nicht für eine allgemeine Veröffentlichung bereit sind.

+ +

Zum Beispiel enthält die Developer Edition den Firefox Tools-Adapter, mit dem Sie die Firefox Tools für Webentwickler mit anderen Browsern verbinden können, wie Chrome auf Android und Safari auf iOS.

+
+
+ +
+
+

Ein unabhängiges Profil

+ +

Firefox Developer Edition benutzt ein eigenes Profil, unabhängig von anderen Firefox-Versionen auf Ihrem Gerät. Das bedeutet, dass Sie die Developer Edition leicht neben Ihrer Release- oder Beta-Version von Firefox verwenden können.

+
+ +
+

Für Webentwickler eingestellt

+ +

Wir haben die Standard-Einstellungswerte für Webentwickler zugeschnitten. Zum Beispiel sind Chrome- und Remote-Debugging standardmäßig aktiviert.

+
+
+ +
+
+

Ein eigenständiges Theme

+ +

Dies beinhaltet schnelleren Zugriff auf die Entwicklertools.

+
+ +
 
+
+ +

 

diff --git "a/files/de/mozilla/firefox/developer_edition/zur\303\274ckkehren/index.html" "b/files/de/mozilla/firefox/developer_edition/zur\303\274ckkehren/index.html" new file mode 100644 index 0000000000..7e5b838c6c --- /dev/null +++ "b/files/de/mozilla/firefox/developer_edition/zur\303\274ckkehren/index.html" @@ -0,0 +1,25 @@ +--- +title: Zurückkehren +slug: Mozilla/Firefox/Developer_Edition/Zurückkehren +translation_of: Mozilla/Firefox/Developer_Edition/Reverting +--- +
{{FirefoxSidebar}}

Vom Developer Edition Theme zurück wechseln

+ +


+ Wenn Sie die Developer Edition nutzen wollen, aber das 'Australis'-Aussehen von Firefox und Firefox Beta bevorzugen, können Sie auf das normale Firefox Design umschalten: Öffnen Sie dazu lediglich das "Anpassen"-Feld und klicken sie die Schaltfläche "Use Firefox Developer Edition Theme" an.

+ +

{{EmbedYouTube("OvJwofTjsNg")}}

+ +

Bitte beachten Sie, dass das Developer Edition Design noch nicht mit minimalistischen Designs kompatibel ist. Wenn Sie also ein minimalistisches Theme verwenden wollen, so werden Sie zum Australis-Design zurück wechseln müssen.

+ +

Zurückkehren zu Firefox Aurora

+ +


+ Wenn Sie alle vor-Beta Funktionen in Firefox Developer Edition nutzen wollen, aber keine der anderen Änderungen, dann können Sie zu einer Art Firefox Aurora zurückkehren. Das ist ein Prozess in zwei Schritten, es ist wichtig, dass Sie die Reihenfolge der Anweisungen befolgen:

+ +
    +
  1. Öffnen Sie die Einstellungen der Developer Edition und entfernen Sie den Haken bei "Allow Firefox Developer Edition and Firefox to run at the same time". Sie werden aufgefordert, den Browser neu zu starten.
    2. +
  2. Nach dem Neustart können Sie vom Developer Edition Design zurückkehren, indem Sie das "Anpassen"-Feld öffnen und die Schaltfläche "Use Firefox Developer Edition Theme" anklicken.
    3. +
+ +

{{EmbedYouTube("0Ofq-vlw8Qw")}}

diff --git a/files/de/mozilla/firefox/headless-mode/index.html b/files/de/mozilla/firefox/headless-mode/index.html new file mode 100644 index 0000000000..a2c3c424ee --- /dev/null +++ b/files/de/mozilla/firefox/headless-mode/index.html @@ -0,0 +1,237 @@ +--- +title: Headless mode +slug: Mozilla/Firefox/Headless-Mode +tags: + - Automaisierung + - Firefox + - Flag + - Flagge + - Headless Modus + - Kopflos + - Mozilla + - QA + - Testautomatisierung + - Testen + - headless + - headless mode + - node.js +translation_of: Mozilla/Firefox/Headless_mode +--- +
{{FirefoxSidebar}}
+ +

Der Headless-Mode ist eine sehr nützliche Weise auf dem der Firefox betrieben werden kann —  dabei funktioniert Firefox normal, nur dass die Oberfläche nicht sichtbar ist. Das erscheint nicht besonder sinnvoll, wenn man im Web surfen möchte, aber es ist sehr nützlich für automatisierte Tests. Dieser Artikel gibt dir alle Infos, die du brauchst um Firefox im Headless-Mode laufen zu lassen.

+ +

Den Headless-Mode verwenden

+ +

Dieser Bereich bietet eine grunsätzliche Anleitung wie man den Headless-Mode verwendet.

+ +

Grundsätzliche Verwendung

+ +

Auf der Komandozeile kannst du Firefox im Headless-Mode starten indem du das -headless Flag anhängst. Zum Beispiel:

+ +
/path/to/firefox -headless
+ +

Screenshots aufnehmen

+ +

Seit Firefox 57 ermöglicht es das -screenshot Flag auf Webseiten im Headless-Mode Screenshots aufzunehmen. Grundsätzlich sieht das dann so aus:

+ +
/path/to/firefox -headless -screenshot https://developer.mozilla.org/
+ +

Das erzeugt einen Screenshot in voller Höhe von https://developer.mozilla.com in das aktuelle Verzeichnis mit dem Dateinamen screenshot.png, mit einer Viewport-Breite von 800px.

+ +

Beachte, dass du -headless  weg lassen kannst, wenn du -screenshot angibst— es ist implizit enthalten.

+ +
/path/to/firefox -screenshot https://developer.mozilla.org/
+ +

Um die Default-Werte, die oben angegeben sind, zu überschreiben,kannst du folgende Flags/Features verwenden:

+ + + +

Zum Beispiel erzeugt der folgende Befehl einen Screenshot von https://developer.mozilla.com im aktuellen Verzeichnis mit Dateinamen test.jpg, mit einer Breite von 800px und einer Höhe von 1000px:

+ +
/path/to/firefox -screenshot test.jpg https://developer.mozilla.org/ --window-size=480,1000
+ +

Browser support

+ +

Headless Firefox works on Fx55+ on Linux, and 56+ on Windows/Mac.

+ +

Automated testing with headless mode

+ +

The most useful way to use headless Firefox is to run automated tests with it, meaning that you can make your testing process much more efficient.

+ +

Selenium in Node.js

+ +

Here we'll create a Selenium test using Node.js and the selenium-webdriver package. For this guide we'll assume that you already have basic familiarity with Selenium, Webdriver, and Node, and that you already have a testing environment set up. If you don't, work through our Setting up Selenium in Node guide first, then come back.

+ +

First, of all, make sure you've got Node installed on your system, and the selenium-webdriver package installed, then create a new file called selenium-test.js and follow the steps below to populate it with test code.

+ +
+

Note: Alternatively, you could clone our headless-examples repo; this also includes a package file so you can just use npm install to install necessary dependencies.

+
+ +
    +
  1. +

    Let's add some code. Inside this file, start by importing the main selenium-webdriver module, and the firefox submodule:

    + + 
    var webdriver = require('selenium-webdriver'),
+    By = webdriver.By,
+    until = webdriver.until;
+
+var firefox = require('selenium-webdriver/firefox');
    +
    2. +
  2. +

    Next, we will create a new binary object representing Firefox Nightly, and add the -headless argument to it so that it will be run in headless mode:

    + + 
    var binary = new firefox.Binary(firefox.Channel.NIGHTLY);
+binary.addArguments("-headless");
    +
    3. +
  3. +

    Now let's create a new driver instance for Firefox, and use setFirefoxOptions() to include an options object that specifies that we want to run the test using the binary we created above (this step will be unnecessary on Linux, and after headless mode lands in the release channel on Windows/Mac, but it is still useful if you want to test a Nightly-specific feature):

    + + 
    var driver = new webdriver.Builder()
+    .forBrowser('firefox')
+    .setFirefoxOptions(new firefox.Options().setBinary(binary))
+    .build();
    +
    4. +
  4. +

    Finally, add the following code, which performs a simple test on the Google search homepage:

    + + 
    driver.get('https://www.google.com');
+driver.findElement(By.name('q')).sendKeys('webdriver');
+
+driver.sleep(1000).then(function() {
+  driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB);
+});
+
+driver.findElement(By.name('btnK')).click();
+
+driver.sleep(2000).then(function() {
+  driver.getTitle().then(function(title) {
+    if(title === 'webdriver - Google Search') {
+      console.log('Test passed');
+    } else {
+      console.log('Test failed');
+    }
+  });
+});
+
+driver.quit();
    +
    5. +
  5. +

    Finally, run your test with following command:

    + + 
    node selenium-test
    +
    6. +
+ +

That's it! After a few seconds, you should see the message "Test passed" returned in the console.

+ +

Headless Firefox in Node.js with selenium-webdriver by Myk Melez contains additional useful tips and tricks for running Node.js Selenium tests with headless mode.

+ +

Selenium in Java

+ +
+

Note: Thanks a lot to nicholasdipiazza for writing these instructions!

+
+ +

This guide assumes that you already have Geckodriver on your machine, as explained in our Setting up Selenium in Node guide, and that you have an IDE set up that supports Gradle projects.

+ +
    +
  1. +

    Download our headlessfirefox-gradle.zip archive (see the source here), extract it, and import the headlessfirefox folder into your IDE as a gradle project.

    +
    2. +
  2. +

    Edit the build.gradle file to set selenium to a later version if needed. At the time of writing, we used 3.5.3.

    + + 
    group 'com.mozilla'
+version '1.0'
+
+apply plugin: 'java'
+
+sourceCompatibility = 1.8
+
+repositories {
+   mavenCentral()
+}
+
+dependencies {
+   compile('org.seleniumhq.selenium:selenium-api:3.5.3')
+   compile('org.seleniumhq.selenium:selenium-remote-driver:3.5.3')
+   compile('org.seleniumhq.selenium:selenium-server:3.5.3')
+
+   testCompile group: 'junit', name: 'junit', version: '4.12'
+}
    +
    3. +
  3. +

    Edit the webdriver.gecko.driver property in the HeadlessFirefoxSeleniumExample.java file to equal the path where you installed geckodriver (see line 15 below).

    + + 
    package com.mozilla.example;
+
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.firefox.FirefoxBinary;
+import org.openqa.selenium.firefox.FirefoxDriver;
+import org.openqa.selenium.firefox.FirefoxOptions;
+
+import java.util.concurrent.TimeUnit;
+
+public class HeadlessFirefoxSeleniumExample {
+ public static void main(String [] args) {
+   FirefoxBinary firefoxBinary = new FirefoxBinary();
+   firefoxBinary.addCommandLineOptions("--headless");
+   System.setProperty("webdriver.gecko.driver", "/opt/geckodriver");
+   FirefoxOptions firefoxOptions = new FirefoxOptions();
+   firefoxOptions.setBinary(firefoxBinary);
+   FirefoxDriver driver = new FirefoxDriver(firefoxOptions);
+   try {
+     driver.get("http://www.google.com");
+     driver.manage().timeouts().implicitlyWait(4,
+         TimeUnit.SECONDS);
+     WebElement queryBox = driver.findElement(By.name("q"));
+     queryBox.sendKeys("headless firefox");
+     WebElement searchBtn = driver.findElement(By.name("btnK"));
+     searchBtn.click();
+     WebElement iresDiv = driver.findElement(By.id("ires"));
+     iresDiv.findElements(By.tagName("a")).get(0).click();
+     System.out.println(driver.getPageSource());
+   } finally {
+     driver.quit();
+   }
+ }
+}
    +
    4. +
  4. +

    Run the java class and you should see the HTML content of this page printed in your console/terminal.

    +
    5. +
+ +

Other testing solutions

+ + + +

In addition, you will be able to use headless Firefox to run automated tests written in most other popular testing apps, as long as they allow you to set environment variables.

+ +

Troubleshooting and further help

+ +

If you are having trouble getting headless mode to work, then do not worry — we are here to help. This section is designed to be added to as more questions arise and answers are found.

+ + + +

If you want to ask the engineers a question, the best place to go is the #headless channel on Mozilla IRC. If you are pretty sure you've found a bug, file it on Mozilla Bugzilla.

+ +

See also

+ + diff --git a/files/de/mozilla/firefox/index.html b/files/de/mozilla/firefox/index.html new file mode 100644 index 0000000000..57b51632bf --- /dev/null +++ b/files/de/mozilla/firefox/index.html @@ -0,0 +1,60 @@ +--- +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.

+
+ + + +

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/multiprocess_firefox/index.html b/files/de/mozilla/firefox/multiprocess_firefox/index.html new file mode 100644 index 0000000000..b21a7228c1 --- /dev/null +++ b/files/de/mozilla/firefox/multiprocess_firefox/index.html @@ -0,0 +1,80 @@ +--- +title: Multiprozess-Firefox +slug: Mozilla/Firefox/Multiprocess_Firefox +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Multiprocess_Firefox +--- +
{{FirefoxSidebar}}

In den aktuellen Desktop-Versionen des Firefox läuft der gesamte Browser in einem einzigen Betriebssystem-Prozess. Insbesondere läuft der JavaScript-Code, welcher die Browser-Benutzeroberfläche (auch "chrome code" bekannt) ausführt, im selben Prozess wie der Code von Webseiten (auch  "Content" oder "Web Content" genannt).

+ +

Zukünftige Versionen von Firefox werden die Browser-Benutzeroberfläche in einem vom Web Content separaten Prozess ausführen. In der ersten Iteration dieser Architektur werden alle Browser-Tabs im selben Prozess laufen, getrennt vom Prozess, in dem die Browser-Benutzeroberfläche ausgeführt wird. In zukünftigen Iterationen wollen wir mehr als einen Prozess verwenden, um die Inhalte von Webseiten darzustellen. Das Projekt, welches den Multiprozess-Firefox abliefern soll, nennt sich Electrolysis (manchmal abgekürzt als e10s).

+ +

Normale Webseiten bleiben vom Multiprozess-Firefox unberührt. Die Menschen, die an Firefox selbst arbeiten sowie die Add-On-Entwickler werden von der Änderung nur beeinflusst sein, wenn ihr Code auf der Fähigkeit basiert, direkt auf Web Content zuzugreifen.

+ +

Anstatt direkt auf Content zuzugreifen, muss das chrome JavaScript den message manager nutzen, um auf Content zuzugreifen. Um den Übergang zu erleichtern, haben wir Cross Process Object Wrappers implementiert und einige Kompabilitäts-Shims für Add-On-Entwickler zur Verfügung gestellt. Falls du ein Add-On-Entwickler bist und dich fragst, ob du davon betroffen bist, siehe auch den Guide zur Arbeit mit dem Multiprozess-Firefox.

+ +

Multiprozess-Firefox ist momentan in der Developer Edition standardmäßig aktiviert.

+ +
+
+
+
+
Technische Übersicht
+
Ein sehr abstrakter Überbllick über die Implementierung des Multiprozess-Firefox.
+
Web Content Kompatibilitätsanleitung
+
Leitlinien und details zu potentiellen Web-Seiten-Kompatibilitätsproblemen, die durch den Übergang entstehen könnten. Tip: Es gibt nicht sehr viele!
+
Glossar
+
Ein Nachschlagewerk für den Jargon, der in Multiprozess-Firefox benutzt wird.
+
Message manager
+
Vollständiger Guide zu den Objekten, die für die Kommunikation zwischen Chrome (Benutzeroberfläche) und Content (Webseiten Code) benutzt werden.
+
SDK basierte Add-ons
+
Wie Add-ons, die mit dem Add-on SDK entwickelt wurden, migriert werden können.
+
Welche URIs laden wo
+
Eine schnelle Einführung darüber, welche URIs (chrome:, about:, file:, resource:), in welchem prozess laden.
+
+
+ +
+
+
Motivation
+
Die Gründe, wieso wir den Multiprozess-Firefox implementieren: Performanz, Sicherheit und Stabilität.
+
Add-on migrations Anleitung
+
Wenn du ein Add-on-Entwickler bist, finde heraus, ob du betroffen bist und wie du deinen Code aktuallisieren kannst.
+
Cross Process Object Wrappers
+
Cross Process Object Wrappers sind eine Migrationshilfe, die Chrome Code synchronen zugriff auf Content erlaubt.
+
Debugging von Content-Prozessen
+
Wie Code, der im Content-Prozess läuft (einschließlich Frame- und Prozessskripte), debugt werden kann.
+
Tab auswahl in Multiprozess-Firefox
+
Wie Tab-Wechsel funktioniert in Multiprozess-Firefox.
+
+
+
+ +
+
+
+
+
Einschränkungen von Chrome-Skripten
+
Praktiken, die in Chrome-Code nicht mehr funktionieren und wie man dies behebt.
+
+
+ +
+
+
Einschränkungen von Frame-Skripten
+
Praktiken, die innerhalb von Frame-Skripten nicht funktionieren werden und was stattdessen zutun ist.
+
+
+
+ +
+

Kontaktiere uns

+ +

Finde mehr über das Projekt heraus, mach mit oder frag uns etwas.

+ + diff --git a/files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html b/files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html new file mode 100644 index 0000000000..f0de7c5457 --- /dev/null +++ b/files/de/mozilla/firefox/multiprocess_firefox/technical_overview/index.html @@ -0,0 +1,164 @@ +--- +title: Technical overview +slug: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Technical_overview +--- +
{{FirefoxSidebar}}
+

Diese Seite ist ein bearbeiteter Auszug aus Bill McCloskey's Blogbeitrag Multiprozess Firefox:(engl) http://billmccloskey.wordpress.com/2013/12/05/multiprocess-firefox/

+
+ +

Auf einer sehr hohen Ebene arbeitet Multiprozess Firefox wie folgt. Der Prozess, der beginnt, wenn Firefox startet wird übergeordneter Prozess genannt. Zunächst arbeitet dieses Verfahren ähnlich wie Einzelprozess. Es wird ein Firefox Fenster geöffnet, das alle wichtigen Elemente der Benutzeroberfläche für Firefox enthält ( browser.xul). Firefox hat eine flexibles GUI-Toolkit namens XUL, das GUI-Elemente deklarativ beschreibt, ähnlich wie bei Web-Content. Genau wie Web-Inhalte, hat das Firefox-UI ein Fenster-Objekt, das eine Dokumenteigenschaft hat, und dieses Dokument enthält alle XML-Elemente aus der browser.xul. Alle Firefox Menüs, Symbolleisten, Seitenleisten und Tabs sind XML-Elemente in diesem Dokument. Jedes Register enthält ein <browser> -Element um Web-Inhalte anzuzeigen.
+
+ Die erste Stelle, an der Multiprozess Firefox von Single-Prozess Firefox abweicht ist, dass jedes <browser> Element ein remote = "true" -Attribut besitzt. Wenn ein solches Browser Element in das Dokument eingefügt wird, wird ein neuer Inhaltsprozess gestartet. Dieser Prozess wird als ein untergeordneter Prozess bezeichnet. Ein IPC-Kanal erstellt, der die Eltern-Kind-Prozesse verknüpft. Anfangs zeigt das Kind about: blank, aber die Eltern können dem Kind einen Befehl senden, um an anderer Stelle zu navigieren.

+ +

Zeichnen

+ +

Somehow, displayed web content needs to get from the child process to the parent and then to the screen. Multiprocess Firefox depends on a new Firefox feature called off main thread compositing (OMTC). In brief, each Firefox window is broken into a series of layers, somewhat similar to layers in Photoshop. Each time Firefox draws, these layers are submitted to a compositor thread that clips and translates the layers and combines them together into a single image that is then drawn.

+ +

Layers are structured as a tree. The root layer of the tree is responsible for the entire Firefox window. This layer contains other layers, some of which are responsible for drawing the menus and tabs. One subtree displays all the web content. Web content itself may be broken into multiple layers, but they’re all rooted at a single “content” layer.

+ +

In multiprocess Firefox, the content layer subtree is actually a shim. Most of the time, it contains a placeholder node that simply keeps a reference to the IPC link with the child process. The content process retains the actual layer tree for web content. It builds and draws to this layer tree. When it’s done, it sends the structure of its layer tree to the parent process via IPC. Backing buffers are shared with the parent either through shared memory or GPU memory. References to this memory are sent as part of the layer tree. When the parent receives the layer tree, it removes its placeholder content node and replaces it with the actual tree from content. Then it composites and draws as normal. When it’s done, it puts the placeholder back.

+ +

The basic architecture of how OMTC works with multiple processes has existed for some time, since it is needed for Firefox OS. However, Matt Woodrow and David Anderson have done a lot of work to get everything working properly on Windows, Mac, and Linux. One of the big challenges for multiprocess Firefox will be getting OMTC enabled on all platforms. Right now, only Macs use it by default.

+ +

User input

+ +

Events in Firefox work the same way as they do on the web. Namely, there is a DOM tree for the entire window, and events are threaded through this tree in capture and bubbling phases. Imagine that the user clicks on a button on a web page. In single-process Firefox, the root DOM node of the Firefox window gets the first chance to process the event. Then, nodes lower down in the DOM tree get a chance. The event handling proceeds down through to the XUL <browser> element. At this point, nodes in the web page’s DOM tree are given a chance to handle the event, all the way down to the button. The bubble phase follows, running in the opposite order, all the way back up to the root node of the Firefox window.

+ +

With multiple processes, event handling works the same way until the <browser> element is hit. At that point, if the event hasn’t been handled yet, it gets sent to the child process by IPC, where handling starts at the root of the content DOM tree. The parent process then waits to run its bubbling phase until the content process has finished handling the event.

+ +

Inter-process communication

+ +

All IPC happens using the Chromium IPC libraries. Each child process has its own separate IPC link with the parent. Children cannot communicate directly with each other. To prevent deadlocks and to ensure responsiveness, the parent process is not allowed to sit around waiting for messages from the child. However, the child is allowed to block on messages from the parent.

+ +

Rather than directly sending packets of data over IPC as one might expect, we use code generation to make the process much nicer. The IPC protocol is defined in IPDL, which sort of stands for “inter-* protocol definition language”. A typical IPDL file is PNecko.ipdl. It defines a set messages and their parameters. Parameters are serialized and included in the message. To send a message M, C++ code just needs to call the method SendM. To receive the message, it implements the method RecvM.

+ +

IPDL is used in all the low-level C++ parts of Gecko where IPC is required. In many cases, IPC is just used to forward actions from the child to the parent. This is a common pattern in Gecko:

+ +
void AddHistoryEntry(param) {
+  if (XRE_GetProcessType() == GeckoProcessType_Content) {
+    // If we're in the child, ask the parent to do this for us.
+    SendAddHistoryEntry(param);
+    return;
+  }
+
+  // Actually add the history entry...
+}
+
+bool RecvAddHistoryEntry(param) {
+  // Got a message from the child. Do the work for it.
+  AddHistoryEntry(param);
+  return true;
+}
+
+ +

When AddHistoryEntry is called in the child, we detect that we’re inside the child process and send an IPC message to the parent. When the parent receives that message, it calls AddHistoryEntry on its side.

+ +

For a more realistic illustration, consider the Places database, which stores visited URLs for populating the awesome bar. Whenever the user visits a URL in the content process, we call this code. Notice the content process check followed by the SendVisitURI call and an immediate return. The message is received here; this code just calls VisitURI in the parent.

+ +

The code for IndexedDB, the places database, and HTTP connections all runs in the parent process, and they all use roughly the same proxying mechanism in the child.

+ +

Frame scripts

+ +

IPDL takes care of passing messages in C++, but much of Firefox is actually written in JavaScript. Instead of using IPDL directly, JavaScript code relies on the message manager to communicate between processes. To use the message manager in JS, you need to get hold of a message manager object. There is a global message manager, message managers for each Firefox window, and message managers for each <browser> element. A message manager can be used to load JS code into the child process and to exchange messages with it.

+ +

As a simple example, imagine that we want to be informed every time a load event triggers in web content. We’re not interested in any particular browser or window, so we use the global message manager. The basic process is as follows:

+ +
// Get the global message manager.
+let mm = Cc["@mozilla.org/globalmessagemanager;1"].
+         getService(Ci.nsIMessageListenerManager);
+
+// Wait for load event.
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  dump("Received load event: " + msg.data.url + "\n");
+});
+
+// Load code into the child process to listen for the event.
+mm.loadFrameScript("chrome://content/content-script.js", true);
+
+ +

For this to work, we also need to have a file content-script.js:

+ +
// Listen for the load event.
+addEventListener("load", function (e) {
+  // Inform the parent process.
+  let docURL = content.document.documentURI;
+  sendAsyncMessage("GotLoadEvent", {url: docURL});
+}, false);
+
+ +

This file is called a frame script. When the loadFrameScript function call runs, the code for the script is run once for each <browser> element. This includes both remote browsers and regular ones. If we had used a per-window message manager, the code would only be run for the browser elements in that window. Any time a new browser element is added, the script is run automatically (this is the purpose of the true parameter to loadFrameScript). Since the script is run once per browser, it can access the browser’s window object and docshell via the content and docShell globals.

+ +

The great thing about frame scripts is that they work in both single-process and multiprocess Firefox. To learn more about the message manager, see the message manager guide.

+ +

Cross-process APIs

+ +

There are a lot of APIs in Firefox that cross between the parent and child processes. An example is the webNavigation property of XUL <browser> elements. The webNavigation property is an object that provides methods like loadURI, goBack, and goForward. These methods are called in the parent process, but the actions need to happen in the child. First I’ll cover how these methods work in single-process Firefox, and then I’ll describe how we adapted them for multiple processes.

+ +

The webNavigation property is defined using the XML Binding Language (XBL). XBL is a declarative language for customizing how XML elements work. Its syntax is a combination of XML and JavaScript. Firefox uses XBL extensively to customize XUL elements like <browser> and <tabbrowser>. The <browser> customizations reside in browser.xml. Here is how browser.webNavigation is defined:

+ +
<field name="_webNavigation">null</field>
+
+<property name="webNavigation" readonly="true">
+   <getter>
+   <![CDATA[
+     if (!this._webNavigation)
+       this._webNavigation = this.docShell.QueryInterface(Components.interfaces.nsIWebNavigation);
+     return this._webNavigation;
+   ]]>
+   </getter>
+</property>
+
+ +

This code is invoked whenever JavaScript code in Firefox accesses browser.webNavigation, where browser is some <browser> element. It checks if the result has already been cached in the browser._webNavigation field. If it hasn’t been cached, then it fetches the navigation object based off the browser’s docshell. The docshell is a Firefox-specific object that encapsulates a lot of functionality for loading new pages, navigating back and forth, and saving page history. In multiprocess Firefox, the docshell lives in the child process. Since the webNavigation accessor runs in the parent process, this.docShell above will just return null. As a consequence, this code will fail completely.

+ +

One way to fix this problem would be to create a fake docshell in C++ that could be returned. It would operate by sending IPDL messages to the real docshell in the child to get work done. We may eventually take this route in the future. We decided to do the message passing in JavaScript instead, since it’s easier and faster to prototype things there. Rather than change every docshell-using accessor to test if we’re using multiprocess browsing, we decided to create a new XBL binding that applies only to remote <browser> elements. It is called remote-browser.xml, and it extends the existing browser.xml binding.

+ +

The remote-browser.xml binding returns a JavaScript shim object whenever anyone uses browser.webNavigation or other similar objects. The shim object is implemented in its own JavaScript module. It uses the message manager to send messages like "WebNavigation:LoadURI" to a content script loaded by remote-browser.xml. The content script performs the actual action.

+ +

The shims we provide emulate their real counterparts imperfectly. They offer enough functionality to make Firefox work, but add-ons that use them may find them insufficient. I’ll discuss strategies for making add-ons work in more detail later.

+ +

Cross-process object wrappers

+ +

The message manager API does not allow the parent process to call sendSyncMessage; that is, the parent is not allowed to wait for a response from the child. It’s detrimental for the parent to wait on the child, since we don’t want the browser UI to be unresponsive because of slow content. However, converting Firefox code to be asynchronous (i.e., to use sendAsyncMessage instead) can sometimes be onerous. As an expedient, we’ve introduced a new primitive that allows code in the parent process to access objects in the child process synchronously.

+ +

These objects are called cross-process object wrappers, frequently abbreviated to CPOWs. They’re created using the message manager. Consider this example content script:

+ +
addEventListener("load", function (e) {
+  let doc = content.document;
+  sendAsyncMessage("GotLoadEvent", {}, {document: doc});
+}, false);
+
+ +

In this code, we want to be able to send a reference to the document to the parent process. We can’t use the second parameter to sendAsyncMessage to do this: that argument is converted to JSON before it is sent up. The optional third parameter allows us to send object references. Each property of this argument becomes accessible in the parent process as a CPOW. Here’s what the parent code might look like:

+ +
let mm = Cc["@mozilla.org/globalmessagemanager;1"].
+         getService(Ci.nsIMessageListenerManager);
+
+mm.addMessageListener("GotLoadEvent", function (msg) {
+  let uri = msg.objects.document.documentURI;
+  dump("Received load event: " + uri + "\n");
+});
+mm.loadFrameScript("chrome://content/content-script.js", true);
+
+ +

It’s important to realize that we’re send object references. The msg.objects.document object is only a wrapper. The access to its documentURI property sends a synchronous message down to the child asking for the value. The dump statement only happens after a reply has come back from the child.

+ +

Because every property access sends a message, CPOWs can be slow to use. There is no caching, so 1,000 accesses to the same property will send 1,000 messages.

+ +

Another problem with CPOWs is that they violate some assumptions people might have about message ordering. Consider this code:

+ +
mm.addMessageListener("GotLoadEvent", function (msg) {
+  mm.sendAsyncMessage("ChangeDocumentURI", {newURI: "hello.com"});
+  let uri = msg.objects.document.documentURI;
+  dump("Received load event: " + uri + "\n");
+});
+
+ +

This code sends a message asking the child to change the current document URI. Then it accesses the current document URI via a CPOW. You might expect the value of uri to come back as "hello.com". But it might not. In order to avoid deadlocks, CPOW messages can bypass normal messages and be processed first. It’s possible that the request for the documentURI property will be processed before the "ChangeDocumentURI" message, in which case uri will have some other value.

+ +

For this reason, it’s best not to mix CPOWs with normal message manager messages. It’s also a bad idea to use CPOWs for anything security-related, since you may not get results that are consistent with surrounding code that might use the message manager.

+ +

Despite these problems, we’ve found CPOWs to be useful for converting certain parts of Firefox to be multiprocess-compatible. It’s best to use them in cases where users are less likely to notice poor responsiveness. As an example, we use CPOWs to implement the context menu that pops up when users right-click on content elements. Whether this code is asynchronous or synchronous, the menu cannot be displayed until content has responded with data about the element that has been clicked. The user is unlikely to notice if, for example, tab animations don’t run while waiting for the menu to pop up. Their only concern is for the menu to come up as quickly as possible, which is entirely gated on the response time of the content process. For this reason, we chose to use CPOWs, since they’re easier than converting the code to be asynchronous.

+ +

It’s possible that CPOWs will be phased out in the future. Asynchronous messaging using the message manager gives a user experience that is at least as good as, and often strictly better than, CPOWs. We strongly recommend that people use the message manager over CPOWs when possible. Nevertheless, CPOWs are sometimes useful.

diff --git a/files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html b/files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html new file mode 100644 index 0000000000..1a25906f9e --- /dev/null +++ b/files/de/mozilla/firefox/multiprocess_firefox/web_content_compatibility/index.html @@ -0,0 +1,32 @@ +--- +title: Web content compatibility +slug: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility +tags: + - Electrolysis + - Firefox + - Guide + - Multiprocess + - e10s +translation_of: Mozilla/Firefox/Multiprocess_Firefox/Web_content_compatibility +--- +
{{FirefoxSidebar}}

While the introduction of multi-process capabilities to Firefox should be seamless and invisible to Web content, there are some exceptions and subtle changes from past behavior. This article discusses the known differences you may encounter.

+ +

Events

+ +

Here you'll find information about events whose behaviors have changed due to multiprocess Firefox's implementation.

+ +

No bubbling of events from <option> to <select>

+ +

Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent {{HTMLElement("select")}} element. This doesn't happen in Chrome, however, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. This behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1.

+ +

Rather than watching <option> elements for events, you should watch for {event("change")}} events on {{HTMLElement("select")}}. See {{bug(1090602)}} for details.

+ +

See also

+ + diff --git a/files/de/mozilla/firefox/nutzung_in_unternehmen/index.html b/files/de/mozilla/firefox/nutzung_in_unternehmen/index.html new file mode 100644 index 0000000000..bb01035bad --- /dev/null +++ b/files/de/mozilla/firefox/nutzung_in_unternehmen/index.html @@ -0,0 +1,142 @@ +--- +title: Firefox in einem Unternehmen nutzen +slug: Mozilla/Firefox/Nutzung_in_Unternehmen +tags: + - Administratoren + - Anleitung + - Bereitstellung + - Firefox + - Unternehmen +translation_of: Mozilla/Firefox/Enterprise_deployment_before_60 +--- +
{{FirefoxSidebar}}
+ +

Diese Seite versucht zu dokumentieren, wie Mozilla Firefox für Windows und Mac in einem Unternehmen genutzt werden kann. Falls Sie Fragen haben, kontaktieren Sie bitte enterprise@mozilla.org.

+ +

Die richtige Variante

+ +

RR (Rapid Release)

+ +

Mozilla veröffentlicht alle sechs Wochen (und, je nach Bedarf, weitere Sicherheitsupdates dazwischen) neue Versionen mit höheren Versionsnummern, neuen Features und Fehlerbehebungen. Am Tag, an dem ein großes Update veröffentlicht wird, wird Mozilla in den meisten Fällen (Ausnahme, siehe unten) die Veröffentlichung von Fehlerbehebungen für die vorherige Version einstellen.

+ +

Die geplanten Veröffentlichungen finden Sie in der Spalte "release date" in der  Future branch dates tabelle in der Mozilla wiki (Englisch).

+ +

ESR (Extended Support Release)

+ +

Jede siebte veröffentlichte Hauptversion von Firefox ist ein Extended Support Release. Diese Versionen werden für 54 Wochen (neun der sechswöchigen Veröffentlichungszyklen) sehr stark auf Probleme hin überprüft. Es überlappen sich 12 Wochen (zwei Veröffentlichungszyklen)  zwischen zwei aufeinanderfolgenden ESR-Veröffentlichungen, in denen beide ESR-Versionen gleichzeitig überprüft werden.

+ +

Die ESR-Veröffentlichungen waren bisher die Versionen 10, 17, 24, und 31. 

+ +

Viele Unternehmen und Organisationen mit zentral organisierten Netzwerksystemen bevorzugen die ESR-Version von Firefox, weil sie dann nicht alle 6 Wochen sondern nur noch alle 42 Wochen die Kompatibilität prüfen müssen. Desweiteren haben sie 12 Wochen mehr Zeit (der Überlappungszeitraum zwischen zwei ESR-Veröffentlichungen) eine Lösung für Probleme zu finden (zusätzlich zu den 6 Wochen die sie bekommen indem sie die Betaversion testen), falls Probleme auftreten.

+ +

Nehmen Sie zur Kenntnis, dass unerwünschte Nebeneffekte auftreten können wenn Sie von einer RR-Version zu einer früheren ESR-Version wechseln, wie zum Beispiel von Version 26-RR zurück zu Version 24.2-ESR, selbst wenn sie am gleichen Tag veröffentlicht wurden. Der Grund dafür ist, dass oft neue Features in die RR-Versionen eingebaut werden, auch wenn sie noch unvollendet und deshalb deaktiviert sind. Schlussendlich entscheidet Mozilla die Features in einer bestimmten Version zu aktivieren. Wenn Sie dann auf eine vorherige, ältere Version wechseln, behalten alle Nutzer ihre letzten Einstellungen in ihren Profilordnern. So bleibt die Option nun angestellt, obwohl das Feature noch nicht komplett fehlerfrei läuft. Wenn Sie also von RR auf ESR wechsel wollen, sollten Sie auf eine neue ESR-Version warten.

+ +

Installation

+ +
    +
  1. Den kompletten, weiterverteilbaren Installer bekommen Sie von  http://www.mozilla.org/firefox/all/ (RR) oder https://www.mozilla.org/firefox/organizations/all.html (ESR).
    2. +
  2. Installieren Sie ihre Version, in dem Sie die Softwareverteilungsmethode ihrer Wahl nutzen. Die Kommand-Zeile für eine stille Installation ist -ms. 
    3. +
  3. Optional können Sie eine INI-Datei spezifizieren, um beispielsweise die Nutzung von Tastenkürzeln und die Installation vom MaintenanceService zu verhindern. Nutzen Sie dafür Installer Command Line Arguments.
    4. +
+ +

Konfiguration

+ +
    +
  1. Finden Sie den Firefox Programmverzeichnis in dem Firefox' ausführende Datei liegt. In Windows7x64 ist er meist C:\Program Files (x86)\Mozilla Firefox; in OSX 10.8 zumeist /Applications/Firefox.app/Contents/MacOS. Unterordner die unten genannt werden sind abhängig von diesem Pfad. 
    2. +
  2. Erstellen Sie eine Javascript Datei in defaults/pref (für gewöhlich, autoconfig.js - andere Dateinamen funktionieren gleicherweise, doch um beste Resultate zu erzielen sollte es am Anfang des Alphabets stehen.) Der Inhalt dieser Datei zeigt Firefox, wo die konfigurierende Datei zu finden ist (siehe auch Customizing Firefox default preference files/). +

    Die zwei Zeilen die Sie brauchen sind:

    + + 
    pref("general.config.obscure_value", 0);
+pref("general.config.filename", "mozilla.cfg");
    +
    3. +
  3. Erstellen Sie eine .cfg Datei (für gewöhlich, mozilla.cfg — es kann wirklich jeder Name sein; es muss nur zu dem passen, was in  general.config.filename zuvor spezifiziert wurde) im Programmverzeichnis. Überspringen Sie die erste Zeile oder kommentieren Sie sie aus und fangen Sie an ihre Einstellungen vorzunehmen. Um herauszufinden welche Einstellungen Sie nutzen müssen, nutzen Sie about:config in einer Kopie von Firefox, die Sie korrekt eingestellt haben und suchen Sie alle Einstellungen die vom Nutzer eingestellt sind, oder sehen Sie sich das folgende Beispiel an. Jede Einstellung die in about:config auftaucht (und noch einige andere) können mit eine der folgenden Funktionen eingestellt werden: +
    +
    pref
    +
    nimmt eine Einstellung vor, als hätte der Benutzer sie eingestellt, jedes Mal wenn der Browser gestartet wird. Nutzer können zwar Änderungen an den Einstellungen vornehmen, jedoch werden diese beim nächsten Start überschrieben. Wenn Sie auf diese Weise Einstellungen vornehmen, wird die Einstellung in about:config als "vom Benutzer eingestellt" angezeigt.
    +
    defaultPref
    +
    wird gebraucht um die Standardeinstellung zu ändern, jedoch kann jeder Nutzer die Einstellungen ändern. Die Einstellungen werden zwischen Sitzungen gespeichert. Sollten alle Werte auf ihren Ursprung zurückgesetzt werden, werden die so geänderten Einstellungen auf den von Ihnen gesetzten Wert geändert. Taucht in about:config als "standard" auf.
    +
    lockPref
    +
    wird genutzt um Einstellungen zu blockieren, sodass sie nicht mehr vom Nutzer umgestellt werden können, weder über die Einstellungen, noch über about:config. Das Fenster mit den Einstellungen wird sich ändern um dies zu reflektieren, indem es nicht verstellbare Optionen weglässt oder grau färbt.Taucht in about:config auf als "blockiert". Manche Einstellungen benötigen lockPref um geändert zu werden, wie beispielsweise app.update.enabled. Es funktioniert nicht, wenn es nur mit pref geändert wird.
    +
    clearPref
    +
    kann benutzt werden um einige Einstellungen auszublenden. Dies kann nützlich sein, um einige Funktionen zu deaktivieren, die darauf basieren Versionsnummern zu vergleichen.
    +
    +
    4. +
+ +

Sehen Sie sich auch Firefox' autoconfig-Dateien ändern und Firefox' autoconfig-Dateien ändern (Fortführung) an, um mehr zu erfahren. Für tiefergehende Einstellungen, wie beispielsweise das Ausschalten bestimmter Elemente der graphischen Benutzeroberfläche, können Sie die CCK2-Extension nutzen.

+ +

Beispiel für eine config-Datei

+ +

Ihnen mag der Bezug auf "komplexe Einstellungen" auffallen, die in einer anderen Art und Weise eingestellt werden müssen; seit FF31 scheinen alle Einstellungen auf normalem Wege änderbar zu sein, ähnlich wie im folgenden Beispiel.  Für genauere Informationen zu individuellen Einstellungen, durchsuchen Sie die Wissensdatenbank.

+ +
// Deaktiviert den Updater
+lockPref("app.update.enabled", false);
+// Stellt sicher dass er tatsächlich abgestellt ist
+lockPref("app.update.auto", false);
+lockPref("app.update.mode", 0);
+lockPref("app.update.service.enabled", false);
+
+// Deaktiviert die Kompatbilitätsprüfung der Add-ons
+clearPref("extensions.lastAppVersion");
+
+// Deaktiviert 'Kenne deine Rechte' beim ersten Start
+pref("browser.rights.3.shown", true);
+
+// Versteckt 'Was ist neu?' beim ersten Start nach jedem Update
+pref("browser.startup.homepage_override.mstone","ignore");
+
+// Stellt eine Standard-Homepage ein - Nutzer können sie ändern
+defaultPref("browser.startup.homepage", "http://home.example.com");
+
+// Deaktiviert den internen PDF-Viewer
+pref("pdfjs.disabled", true);
+
+// Deaktiviert den Flash zu JavaScript Converter
+pref("shumway.disabled", true);
+
+// Verhindert die Frage nach der Installation des Flash Plugins
+pref("plugins.notifyMissingFlash", false);
+
+//Deaktiviert das 'plugin checking'
+lockPref("plugins.hide_infobar_for_outdated_plugin", true);
+clearPref("plugins.update.url");
+
+// Deaktiviert den 'health reporter'
+lockPref("datareporting.healthreport.service.enabled", false);
+
+// Disable all data upload (Telemetry and FHR)
+lockPref("datareporting.policy.dataSubmissionEnabled", false);
+
+// Deaktiviert den 'crash reporter'
+lockPref("toolkit.crashreporter.enabled", false);
+Components.classes["@mozilla.org/toolkit/crash-reporter;1"].getService(Components.interfaces.nsICrashReporter).submitReports = false; 
+
+ +

Packaging Extensions

+ +
    +
  1. Installieren Sie die Erweiterung auf einem Rechner zu Testzwecken. Sehen Sie in about:support unter Extensions nach um die GUID zu fnden. 
    2. +
  2. Sehen Sie im Profilverzeichnis (z.B.: %APPDATA%\Mozilla\Firefox\Profiles auf Win7; um diesen zu finden, klicken Sie auf Ordner anzeigen in about:support), dann unter "extensions" nach dem Add-On dass Sie suchen. Beachten Sie dass es entweder eine einzelne .xpi Datei (wie eine zip Datei) oder extrahiert zu einem Ordner mit mehreren Dateien.
    3. +
  3. Entscheiden Sie wie Sie sie nutzen wollen. Die einfachste Methode ist, die .xpi Datei oder den Ordner in Programmverzeichnis/distribution/extensions zu legen, jedoch funktioniert dies nur für Profile die Installiert wurden nachdem die Erweiterung installiert wurde. Außerdem, wenn Sie Firefox manuell updaten indem Sie das Programm erneut installieren, wird dieser Programmverzeichnis gelöscht. Vergewissern SIe sich dann, ob Sie die Erweiterung ebenfalls manuell erneut installiert haben. Sehen Sie sich auch Integrating add-ons into Firefox/ (Englisch) an, um alternative Methoden zu lernen.
    4. +
+ +

Beachten Sie auch: Add-on scopes redux/ (Englisch)

+ +

Änderungen mit der Zeit

+ +

Änderungen in der Verzeichnisstruktur

+ +

Die Verzeichnisstruktur des Programmpfades wurde zweimal geändert. Sollten Sie einer Anleitung für eine Firefox-Version vor Version 21 folgen, dann müssen Sie vermutlich diese Änderungen beachten:

+ + + +

Die Einstellungen preferences general.config.filename und general.config.obscure_value zur AutoConfiguration können immer noch in defaults/pref vorgenommen werden, jedoch sollte der Dateiname mit dem Buchstaben 'a' beginnen, wie zum Beispiel autoconfig.js.

+ +

Sollte es in defaults/pref in einer zuünftigen Version von Firefox nicht mehr funktionieren, probieren Sie browser/defaults/preferences als den wahrscheinlichsten Platz für die Datei.

+ +

Änderungen in ESR 24.x mit Adobe PDF Files

+ +

Firefox RR 19.x änderte den Standard-Viewer für Adobe PDF Dateien zu dem internen PDF Viewer. Diese Änderung betrifft nun die ESR Versionen seit 24.x, und wird (auf Windows) angewandt, wenn von 17.x auf eine höhere Version geupgradet wird, selbst wenn ein externer Viewer bereits eingestellt wurde. Der Name des Dateitypes wurde von Adobe Acrobat Document zu Portable Document Format (PDF) geändert, was die Lokalisierung durch die Tools-, Options- oder Applications-Tabs erschwert. Um dies abzustellen, ändern Sie pdfjs.disabled zu true wie auch im oben genannten Beispiel.

diff --git a/files/de/mozilla/firefox/privacy/index.html b/files/de/mozilla/firefox/privacy/index.html new file mode 100644 index 0000000000..c6a9e69b09 --- /dev/null +++ b/files/de/mozilla/firefox/privacy/index.html @@ -0,0 +1,9 @@ +--- +title: Privacy +slug: Mozilla/Firefox/Privacy +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Firefox/Privacy +--- +
{{FirefoxSidebar}}

{{ ListSubpages () }}

diff --git a/files/de/mozilla/firefox/privacy/tracking_protection/index.html b/files/de/mozilla/firefox/privacy/tracking_protection/index.html new file mode 100644 index 0000000000..7ebf5f19da --- /dev/null +++ b/files/de/mozilla/firefox/privacy/tracking_protection/index.html @@ -0,0 +1,88 @@ +--- +title: Verfolgungsschutz +slug: Mozilla/Firefox/Privacy/Tracking_Protection +tags: + - Privacy + - Privat + - Private browsing + - Privates Surfen + - blocking + - tracker + - tracking +translation_of: Mozilla/Firefox/Privacy/Tracking_Protection +--- +
{{FirefoxSidebar}}
+ +

Was ist Verfolgungsschutz?

+ +

Beginnend mit Version 42 beinhalten Firefox Desktop und Firefox für Android einen eingebauten Schutz gegen Verfolgung. In privaten Browserfenstern (Tabs, in Firefox für Android) wird Firefox Inhalte, die von Domains geladen werden, die Nutzer über Seiten verfolgen, blockieren.

+ +

Einige dieser blockierten Inhalte sind Teil des Seitenlayouts, weswegen Nutzer Probleme mit diesem haben können. Ist das Seitenraster so angepasst, dass andere Elemente die Lücken der blockierten Inhalte füllen, merken Nutzer keinen Unterschied.

+ +

Wenn Firefox Inhalte blockiert, wird die folgende Nachricht ausgegeben:

+ +
Die Ressource auf "https://some/url" wurde blockiert, weil das Blockieren von Seitenelementen aktiviert ist.
+ +
+

Die Ausgaben auf der Konsole in Firefox für Android können über den Remote Debugger angezeigt werden.

+
+ +

Das Firefox Benutzerinterface zeigt Nutzern an wenn Inhalte blockiert wurden und ermöglicht es ihnen diese für die Dauer der Sitzung zu entblocken. Nutzer können sich auch entscheiden, den Trackingschutz auch dauerthaft abzuschalten.

+ +

Wie entscheidet Firefox was blockiert wird?

+ +

Inhalte werden auf Basis der Domain blockiert, von der sie geladen werden.

+ +

Firefox kommt mit einer Liste von Seiten, die Nutzer über Seiten hinweg verfolgen. Wenn der Verfolgungschutz aktiv ist, wird Firefox Inhalte von Seiten auf dieser Liste blockieren

+ +

Seiten die User tracken sind hauptsächlich externe Werbe- und Analyseseiten

+ +

Was bedeutet das für deine Webseite?

+ +

Zuerst einmal bedeutet das offensichtlich, dass wenn der Trackingschutz aktiviert ist:

+ + + +

Weniger offensichtlich, falls Teile deiner Seite davon abhänging sind, dass Tracker geladen werden, werden diese Teile nicht funktionieren, wenn der Trackingschutz aktiv is. Beinhaltet deine Seite beispielsweise einen Callback, der ausgeführt wird, wenn Inhalte von einer Trackingseite geladen wurde, so wird dieser Callback nicht ausgeführt.

+ +

Zum Beispiel solltest du Google Analytics nicht so verwenden:

+ +
<a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a>
+<script>
+function trackLink(url,event) {
+    event.preventDefault();
+    ga('send', 'event', 'outbound', 'click', url, {
+     'transport': 'beacon',
+     'hitCallback': function() {
+       document.location = url;
+     }
+   });
+}
+</script>
+ +

Stattdessen solltest  du den Fall berücksichtigen, dass Google Analytics fehlt, in dem du überprüftst ob das ga Objekt initialisiert wurde.

+ +
<a href="http://www.example.com" onclick="trackLink('http://www.example.com', event);">Visit example.com</a>
+<script>
+function trackLink(url,event) {
+    event.preventDefault();
+    if (window.ga && ga.loaded) {
+         ga('send', 'event', 'outbound', 'click', url, {
+         'transport': 'beacon',
+         'hitCallback': function() { document.location = url; }
+       });
+    } else {
+        document.location = url;
+    }
+}
+</script>
+
+ +

Mehr Informationen zu dieser Technik ist verfügbar auf Google Analytics, Privacy, and Event Tracking.

+ +
+

Sich auf externe Services zu verlassen ist so oder so kein guter Stil: Es bedeutet deine Seite funktioniert nicht, wenn der Service langsam oder nicht verfügbar ist oder der Tracker von einem Addon blockiert wird.

+
diff --git a/files/de/mozilla/firefox/releases/16/index.html b/files/de/mozilla/firefox/releases/16/index.html new file mode 100644 index 0000000000..1f341acc1e --- /dev/null +++ b/files/de/mozilla/firefox/releases/16/index.html @@ -0,0 +1,104 @@ +--- +title: Firefox 16 für Entwickler +slug: Mozilla/Firefox/Releases/16 +tags: + - Firefox + - Firefox 16 +translation_of: Mozilla/Firefox/Releases/16 +--- +
{{FirefoxSidebar}}

Firefox 16 erschien am 9. Oktober 2012. Dieser Artikel listet die hauptsächlichen Änderungen auf, welche nicht nur für Web-Entwickler gedacht sind, aber auch Firefox- , Gecko- und AddOn-Entwickler.

+ +

Möchten Sie helfen Firefox 16 zu dokumentieren? Schauen Sie auf die Liste von Bugs, über die geschrieben werden sollte und schreibe Sie dazu.

+ +

Änderungen für Web-Entwickler

+ +

HTML

+ + + +

CSS

+ + + +

DOM

+ + + +

JavaScript

+ + + +

WebGL

+ +

SVG

+ +

MathML

+ + + +

Network

+ +

Developer tools

+ + + +

Changes for Open Web App developers

+ + + +

Changes for add-on and Mozilla developers

+ +

Interface changes

+ +

{{interface("nsIPrivateDOMEvent")}} has been merged into {{interface("nsIDOMEvent")}}. ({{bug("761613")}})

+ +

New interfaces

+ +

Removed interfaces

+ +

The following interfaces have been removed.

+ +

See also

+ +
{{Firefox_for_developers('15')}}
diff --git a/files/de/mozilla/firefox/releases/27/index.html b/files/de/mozilla/firefox/releases/27/index.html new file mode 100644 index 0000000000..cb671b3b3c --- /dev/null +++ b/files/de/mozilla/firefox/releases/27/index.html @@ -0,0 +1,56 @@ +--- +title: Firefox 27 für Entwickler +slug: Mozilla/Firefox/Releases/27 +tags: + - Firefox +translation_of: Mozilla/Firefox/Releases/27 +--- +
{{FirefoxSidebar}}
Diese Seite ist noch nicht fertig. +
Firefox 27 ist noch keine vollständige Version. Neue Features werden demnächst hinzugefügt.
+
+ +

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

+ + + +

JavaScript

+ +

EcmaScript 6 (Harmony) Implementierung wird fortgeführt!

+ + + +

Interfaces/APIs/DOM

+ +

Keine Änderung.

+ +

MathML

+ +

Keine Änderung.

+ +

SVG

+ +

Keine Änderung.

+ +

Veränderungen für AddOn- und Mozilla-Entwickler

+ + + +

Ältere Versionen

+ +

{{Firefox_for_developers('26')}}

diff --git a/files/de/mozilla/firefox/releases/28/index.html b/files/de/mozilla/firefox/releases/28/index.html new file mode 100644 index 0000000000..64f7d7796e --- /dev/null +++ b/files/de/mozilla/firefox/releases/28/index.html @@ -0,0 +1,116 @@ +--- +title: Firefox 28 for developers +slug: Mozilla/Firefox/Releases/28 +translation_of: Mozilla/Firefox/Releases/28 +--- +
{{FirefoxSidebar}}
+ +

Firefox 28 wurde am 18. März 2014 veröffentlicht. Dieser Artikel listet wichtige Änderungen, die sowohl für Webentwickler, als auch für Firefox-, Gecko- und AddOn-Entwickler nützlich sind.

+ +

Änderungen für Web-Entwickler

+ +

Developer Tools

+ + + +

Mehr Einzelheiten in diesem Beitrag.

+ +

CSS

+ + + +

HTML

+ + + +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ + + +

MathML

+ + + +

SVG

+ +

No change.

+ +

Audio/Video

+ + + +

Network

+ + + +

Changes for addon and Mozilla developers

+ + + +

Security

+ + + +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers('27')}}

diff --git a/files/de/mozilla/firefox/releases/3.6/index.html b/files/de/mozilla/firefox/releases/3.6/index.html new file mode 100644 index 0000000000..dcd0edcee8 --- /dev/null +++ b/files/de/mozilla/firefox/releases/3.6/index.html @@ -0,0 +1,301 @@ +--- +title: Firefox 3.6 for developers +slug: Mozilla/Firefox/Releases/3.6 +translation_of: Mozilla/Firefox/Releases/3.6 +--- +

Firefox 3.6 offers support for new and developing web standards, increased performance, and an overall better experience for web users and developers. This page provides links to articles covering the new capabilities of Firefox 3.6.

+ +

For web site and application developers

+ +

CSS

+ +
+
Using gradients
+
Firefox 3.6 adds support for the proposed -moz-linear-gradient and -moz-radial-gradient properties for background.
+
Multiple backgrounds
+
The background property (as well as background-color, background-image, background-position, background-repeat, and background-attachment) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.
+
Mozilla-specific media features
+
Media features have been added for Mozilla-specific system metrics, so that media queries can be used to more safely check on the availability of features such as touch support.
+
Scaling background images
+
The background-size property from the CSS 3 Backgrounds and Borders draft is now supported under the name -moz-background-size.
+
WOFF font support
+
@font-face now supports the WOFF downloadable font file format.
+
Pointer events
+
The pointer-events property lets content specify whether or not an element may be the target of mouse pointer events.
+
+ +

Miscellaneous CSS changes

+ + + +

HTML

+ +
+
Using files from web applications
+
Support for the new HTML5 File API has been added to Gecko, making it possible for web applications to access local files selected by the user. This includes support for selecting multiple files using the input type="file" HTML element's new multiple attribute.
+
HTML5 video supports poster frames
+
The poster attribute is now supported for the video element, allowing content to specify a poster frame to be displayed until the video begins to play.
+
Checkboxes and radio buttons support the indeterminate property
+
HTML input elements of types checkbox and radio now support the indeterminate property, which allows a third, "indeterminate" state.
+
Canvas image smoothing can be controlled
+
The new mozImageSmoothingEnabled property can be used to turn on and off image smoothing when scaling in canvas elements.
+
Asynchronous script execution
+
By setting the async attribute on a script element, the script will not block loading or display of the rest of the page. Instead the script executes as soon as it is downloaded.
+
+ +

JavaScript

+ +

Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the ECMAScript 5 standard:

+ + + +
+
+ +

DOM

+ +
+
Web workers can now self-terminate
+
Workers now support the nsIWorkerScope.close() method, which allows them to terminate themselves.
+
Drag and drop now supports files
+
The DataTransfer object provided to drag listeners now includes a list of files that were dragged.
+
Checking to see if an element matches a specified CSS selector
+
The new element.mozMatchesSelector method lets you determine whether or not an element matches a specified CSS selector. See Bug 518003.
+
Detecting device orientation
+
Content can now detect the orientation of the device if it has a supported accelerometer, using the MozOrientation event. Firefox 3.6 supports the accelerometer in Mac laptops.
+
Detecting document width and height changes
+
The new MozScrollAreaChanged event is dispatched whenever the document's scrollWidth and/or scrollHeight properties change.
+
+ +

Miscellaneous DOM changes

+ + + +

XPath

+ +
+
The choose() XPath method is now supported
+
The choose() method is now supported by our implementation of XPath.
+
+ +

For XUL and add-on developers

+ +

If you're an extension developer, you should start by reading Updating extensions for Firefox 3.6, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read Updating plug-ins for Firefox 3.6.

+ +

New features

+ +
+
Detecting device orientation
+
Content can now detect the orientation of the device if it has a supported accelerometer, using the MozOrientation event. Firefox 3.6 supports the accelerometer in Mac laptops.
+
Monitoring HTTP activity
+
You can now monitor HTTP transactions to observe requests and responses in real time.
+
Working with the Windows taskbar
+
It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. This has been disabled by default in Firefox 3.6.
+
+ +

Places

+ + + +

Storage

+ +
+
Locale-aware collation of data is now supported by the Storage API
+
Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.
+
Properties on a statement can now be enumerated
+
You can now use a for..in enumeration to enumerate all the properties on a statement.
+
mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.
+
See Bug 528166 for details.
+
Asynchronously bind multiple sets of parameters and execute a statement.
+
See Bug 490085 for details. Documentation coming soon.
+
+ +

Preferences

+ + + +

Themes

+ +

See Updating themes for Firefox 3.6 for a list of changes related to themes.

+ +
+
Lightweight themes
+
Firefox 3.6 supports lightweight themes; these are easy-to-create themes that simply apply a background to the top (URL bar and button bar) and bottom (status bar) of browser windows. This is an integration of the existing Personas theme architecture into Firefox.
+
+ +

Miscellaneous

+ + + +

For Firefox/Gecko developers

+ +

Certain changes are only really interesting if you work on the internals of Firefox itself.

+ +

Interfaces merged

+ +

The following interfaces have been combined together:

+ + + +

Interfaces removed

+ +

The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:

+ + + +

Interfaces moved

+ +

The following interfaces have been relocated from their previous IDL files into new ones:

+ + + +

A large number of interfaces have been moved. See Interfaces moved in Firefox 3.6 for a complete list.

+ +

Other interface changes

+ +

The following assorted changes have been made:

+ + + +

Changes in accessibility code

+ + + +

See also

+ +
+ +
diff --git a/files/de/mozilla/firefox/releases/34/index.html b/files/de/mozilla/firefox/releases/34/index.html new file mode 100644 index 0000000000..b0fcd927ab --- /dev/null +++ b/files/de/mozilla/firefox/releases/34/index.html @@ -0,0 +1,107 @@ +--- +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

+ + + +

HTML

+ +

Keine Veränderungen.

+ +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ + + +

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/47/index.html b/files/de/mozilla/firefox/releases/47/index.html new file mode 100644 index 0000000000..cf76445536 --- /dev/null +++ b/files/de/mozilla/firefox/releases/47/index.html @@ -0,0 +1,174 @@ +--- +title: Firefox 47 for developers +slug: Mozilla/Firefox/Releases/47 +translation_of: Mozilla/Firefox/Releases/47 +--- +
{{FirefoxSidebar}}

 

+ +

To test the latest developer features of Firefox,
+ install Firefox Developer EditionFirefox 47 was released on June 6, 2016. This article lists key changes that are useful not only for web developers, but also Firefox and Gecko developers as well as add-on developers.

+ +

Changes for Web developers

+ +

Developer Tools

+ + + +

HTML

+ +

No change.

+ +

CSS

+ + + +

JavaScript

+ + + +

Interfaces/APIs/DOM

+ +

DOM & HTML DOM

+ + + +

WebGL

+ +

No change.

+ +

IndexedDB

+ + + + + + + +

WebRTC

+ + + +

New APIs

+ +

No change.

+ +

Others

+ + + +

Audio/Video

+ + + +

HTTP

+ +

No change.

+ +

Networking

+ +

No change.

+ +

Security

+ + + +

Changes for add-on and Mozilla developers

+ +

Interfaces

+ + + +

FUEL

+ +

The FUEL JavaScript library, introduced back in Firefox 3, has been removed. This library was designed to aid in add-on development and with the introduction of the Add-on SDK and, now, by WebExtensions support, is no longer useful. ({{bug(1090880)}})

+ +

XUL

+ +

No change.

+ +

JavaScript code modules

+ +

No change.

+ +

XPCOM

+ +

No change.

+ +

Other

+ +

No change.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(46)}}

diff --git a/files/de/mozilla/firefox/releases/5/index.html b/files/de/mozilla/firefox/releases/5/index.html new file mode 100644 index 0000000000..febb262599 --- /dev/null +++ b/files/de/mozilla/firefox/releases/5/index.html @@ -0,0 +1,169 @@ +--- +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

+ + + +

Canvas improvements

+ + + +

CSS

+ +
+
CSS animations
+
Support for CSS animations has been added, using the -moz- prefix for now.
+
+ +

DOM

+ + + +

JavaScript

+ + + +

SVG

+ + + +

HTTP

+ + + +

MathML

+ + + +

Developer tools

+ + + +

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

+ + + +

NetUtil.jsm

+ + + +

Interface changes

+ + + +

New interfaces

+ + + +

Removed interfaces

+ +

The following interfaces were implementation details that are no longer needed:

+ + + +

Debugging aids

+ + + +

JavaScript API (SpiderMonkey)

+ + + +

Build system changes

+ + + +

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 new file mode 100644 index 0000000000..0158450bdc --- /dev/null +++ b/files/de/mozilla/firefox/releases/56/index.html @@ -0,0 +1,122 @@ +--- +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.

+ +

Siehe auch

+ + +
+ + + +

Ä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 new file mode 100644 index 0000000000..dccbe85dea --- /dev/null +++ b/files/de/mozilla/firefox/releases/57/index.html @@ -0,0 +1,99 @@ +--- +title: Firefox 57 für Entwickler +slug: Mozilla/Firefox/Releases/57 +translation_of: Mozilla/Firefox/Releases/57 +--- +
{{FirefoxSidebar}}
{{draft}}
+ +

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.

+ +

Siehe auch

+ + +
+ + + +

Ä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 new file mode 100644 index 0000000000..ba03bbbc43 --- /dev/null +++ b/files/de/mozilla/firefox/releases/58/index.html @@ -0,0 +1,186 @@ +--- +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.

+ +

Siehe auch

+ + +
+ + + +

Ältere Versionen

+ +

{{Firefox_for_developers(57)}}

+
diff --git a/files/de/mozilla/firefox/releases/60/index.html b/files/de/mozilla/firefox/releases/60/index.html new file mode 100644 index 0000000000..2d75e69ac2 --- /dev/null +++ b/files/de/mozilla/firefox/releases/60/index.html @@ -0,0 +1,146 @@ +--- +title: Firefox 60 for developers +slug: Mozilla/Firefox/Releases/60 +translation_of: Mozilla/Firefox/Releases/60 +--- +
{{FirefoxSidebar}}
{{draft}}
+ +

This article provides information about the changes in Firefox 60 that will affect developers. Firefox 60 is the current Nightly version of Firefox, and will ship on May 8, 2018.

+ +

Stylo comes to Firefox for Android in 60

+ +

Firefox's new parallel CSS engine — also known as Quantum CSS or Stylo, which was first enabled by default in Firefox 57 for desktop, has now been enabled in Firefox for Android.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

HTML

+ +

Pressing the Enter key in designMode and contenteditable now inserts <div> elements when the caret is in an inline element or text node which is a child of a block level editing host — instead of inserting <br> elements like it used to. If you want to use the old behavior on your app, you can do it with document.execCommand(). See Differences in markup generation for more details.

+ +

CSS

+ + + +

SVG

+ +

No changes.

+ +

JavaScript

+ +

The {{jsxref("Array.prototype.values()")}} method has been added again ({{bug(1420101)}}). It was disabled due to compatibilty issues in earlier versions. Make sure your code doesn't have any custom implementation of this method.

+ +

APIs

+ +

New APIs

+ +

No changes.

+ +

DOM

+ + + +

DOM events

+ +

No changes.

+ +

Service workers

+ +

No changes.

+ +

Media and WebRTC

+ + + +

Canvas and WebGL

+ +

No changes.

+ +

CSSOM

+ +

No changes.

+ +

HTTP

+ +

No changes.

+ +

Security

+ +

No changes.

+ +

Plugins

+ +

No changes.

+ +

Other

+ +

No changes.

+ +

Removals from the web platform

+ +

HTML

+ +

No changes.

+ +

CSS

+ + + +

JavaScript

+ +

The non-standard expression closure syntax has been removed ({{bug(1426519)}}).

+ +

APIs

+ +

No changes.

+ +

SVG

+ +

No changes.

+ +

Other

+ +

No changes.

+ +

Changes for add-on and Mozilla developers

+ +

WebExtensions

+ +

No changes.

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(58)}}

+ +

 

diff --git a/files/de/mozilla/firefox/releases/68/index.html b/files/de/mozilla/firefox/releases/68/index.html new file mode 100644 index 0000000000..8a5c4fa572 --- /dev/null +++ b/files/de/mozilla/firefox/releases/68/index.html @@ -0,0 +1,162 @@ +--- +title: Firefox 68 für Entwickler +slug: Mozilla/Firefox/Releases/68 +translation_of: Mozilla/Firefox/Releases/68 +--- +

{{FirefoxSidebar}}{{Draft}}

+ +

This article provides information about the changes in Firefox 68 that will affect developers. Firefox 68 is the current Beta version of Firefox, and will ship on July 9, 2019.

+ +

Changes for web developers

+ +

Developer tools

+ + + +

Removals

+ +

HTML

+ +

No changes.

+ +

 Removals

+ +

CSS

+ + + +

Removals

+ + + +

SVG

+ +

No changes.

+ +

Removals

+ +

JavaScript

+ +

No changes.

+ +

Removals

+ +

APIs

+ +

No changes.

+ +

New APIs

+ + + +

DOM

+ + + +

DOM events

+ +

Service workers

+ +

Media, Web Audio, and WebRTC

+ + + +

Canvas and WebGL

+ +

Removals

+ + + +

Security

+ +

No changes.

+ +

Removals

+ +

Plugins

+ +

No changes.

+ +

Removals

+ +

Other

+ +

No changes.

+ +

Removals

+ +

Changes for add-on developers

+ +

API changes

+ + + +

Removals

+ +

Manifest changes

+ +

No changes.

+ +

Removals

+ +

See also

+ + + +

Older versions

+ +

{{Firefox_for_developers(67)}}

diff --git a/files/de/mozilla/firefox/releases/index.html b/files/de/mozilla/firefox/releases/index.html new file mode 100644 index 0000000000..e5af49da21 --- /dev/null +++ b/files/de/mozilla/firefox/releases/index.html @@ -0,0 +1,12 @@ +--- +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,0,1)}}
diff --git a/files/de/mozilla/firefox/the_about_protocol/index.html b/files/de/mozilla/firefox/the_about_protocol/index.html new file mode 100644 index 0000000000..5225af8915 --- /dev/null +++ b/files/de/mozilla/firefox/the_about_protocol/index.html @@ -0,0 +1,190 @@ +--- +title: Firefox und das "about"-Protokoll +slug: Mozilla/Firefox/The_about_protocol +tags: + - Einstellungen + - Firefox + - Guide + - Protokolle + - Referenz + - 'about:' +translation_of: Mozilla/Firefox/The_about_protocol +--- +
{{FirefoxSidebar}}
+ +
Es gibt eine Menge wichtiger Informationen über Firefox, die sich hinter dem about: URL-Protokoll verbergen. Am wichtigsten ist die URL about:config, die Einstellungen anzeigt, die sich dort betrachten und ändern lassen. Hier ist eine komplette Liste mit allen URLs  des about:-Pseudo-Protokolls::
+ +
 
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
about: SeiteBeschriebung
about:Zeigt die Versionsnummer, Buildinformationen, Links zu den Beitragenden, Lizenzinformationen und Einstellungen zur Build-Konfiguration an.
about:aboutZeigt einen Überblick über alle about:-Seiten an.
about:accountsZeigt Informationen zur Sync-Funktion an.
about:addonsÖffnet den Add-ons-Manager
about:app-managerÖffnet den App-Manager
about:buildconfigZeigt die für die Version von Firefox verwendete Konfiguration und Plattform an.
about:cacheZeigt Informationen zum Speicher, Speichermedium und Arbeitsspeicher an.
about:compartments +
+

Seit Firefox 26 können diese Informationen unter "Other Measurements" in about:memory gefunden werden.

+
+ +

Zeigt Informationen zu einzelnen "Compartments".

+
about:configBietet eine Möglichkeit, Einstellungen in Firefox zu untersuchen und zu ändern.
about:crashesListet alle Abstürze, die während der gesamten Lebenszeit von Firefox passierten, auf.
about:creditsListet alle Ünterstützer und Mitwirkenden des Firefox-Projektes auf.
about:customizingWechselt zur Anpassungsseite, die Anpassungen der Benutzeroberfläche von Firefox erlaubt.
about:downloadsListet alle Downloads von Firefox aus auf.
about:healthreportZeigt Leistungsinformationen von Firefox an (nur wenn der Nutzer dies aktiviert hat).
about:homeÖffnet die Startseite, die beim Öffnen eines neuen Fensters erscheint.
about:licenseZeigt Lizenzinformationen an.
about:logoZeigt das Firefox-Logo an.
about:memoryBietet eine Möglichkeit, die Speicherverwendung anzuzeigen, als Bericht zu speichern oder GC und CC auszuführen.
about:mozillaDiese Sonderseite zeigt eine Nachricht aus dem "The Book of Mozilla".
about:networkingZeigt Netzwerk-Informationen an.
about:newtabÖffnet die Startseite für einen neuen Tab.
about:permissions +
+

Wurde mit Firefox 45 entfernt. ({{bug(933917)}})

+
+ +

Bietet eine Möglichkeit, Berechtigungen anzuzeigen und verwalten zu lassen.

+
about:pluginsZeigt Informationen zu installierten Plugins an.
about:preferencesÖffnet die Einstellungen zu Firefox (auch erreichbar über das Firefox-Menü > Optionen)
about:privatebrowsingÖffnet die Startseite, die beim Öffnen eines privaten Tabs angezeigt wird.
about:profilesZeigt und verwaltet Firefox-Profile.
about:rightsZeigt rechtliche Informationen an.
about:robotsDiese Sonderseite zeigt Informationen zu Robots an.
about:serviceworkersZeigt aktuell laufende Service Workers an.
about:sessionrestoreÖffnet die Sitzungswiederherstellungsseite (wird nach einem Absturz angezeigt).
about:supportÖffnet die Fehlerbehebungsseite (auch erreichbar über das Firefox-Menü > ? (Fragezeichen) > Informationen zur Fehlerbehebung)
about:sync-logZeigt ein Synchronisations-Protokoll bezogen auf die Sync-Funktion an.
about:sync-progressZeigt die Seite, die nach der Einrichtung der Sync-Funktion aufgerufen wird.
about:sync-tabsZeigt synchronisierbare Tabs an (für die Sync-Funktion).
about:telemetryZeigt die von Firefox gesammelten und an Mozilla gesendeten telemetrischen Daten an (nur wenn der Nutzer Telemetrie aktiviert hat).
about:webrtcZeigt Informationen zur Verwendung von WebRTC an.
about:welcomebackZeigt die Seite, die nach einer Zurücksetzung aufgerufen wird.
+ +

Diese URLs wurden in {{source("docshell/base/nsAboutRedirector.cpp")}} innerhalb des kRedirMap-Arrays definiert. Der Array zeigt die meisten der URLs, wie config in URLs im chrome:-Pseudo-Protokoll, wie chrome://global/content/config.xul an.  Der Ort der about:-Informationen wurde aus {{source("docshell/build/nsDocShellModule.cpp")}} kopiert..

diff --git a/files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html b/files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html new file mode 100644 index 0000000000..f57ae8a1fc --- /dev/null +++ b/files/de/mozilla/firefox/updating_add-ons_for_firefox_5/index.html @@ -0,0 +1,69 @@ +--- +title: Updating add-ons for Firefox 5 +slug: Mozilla/Firefox/Updating_add-ons_for_Firefox_5 +translation_of: Mozilla/Firefox/Releases/5/Updating_add-ons +--- +
{{FirefoxSidebar}}

This article provides an overview of the changes you may need to make to your add-ons in order for them to work properly in Firefox 5. You can find a complete list of developer-related changes in Firefox 5 in Firefox 5 for developers.

+ +

Do you need to do anything at all?

+ +

If your add-on is distributed on addons.mozilla.org (AMO), it's been checked by an automated compatibility verification tool. Add-ons that don't use APIs that changed in Firefox 5, and have no binary components (which need to be recompiled for every major Firefox release), have automatically been updated on AMO to indicate that they work in Firefox 5.

+ +

So you should start by visiting AMO and looking to see if your add-on needs any work done at all.

+ +
Note: You should still test your add-on on Firefox 5, even if it's been automatically upgraded. There are edge cases that may not be automatically detected.
+ +

Once you've confirmed that you need to make changes, come on back to this page and read on.

+ + + +

Due to the short development cycle (even for our rapid release cycle; Firefox 5 was on an extra-short schedule for timing reasons), there are very few UI related changes in Firefox 5.

+ +

Determining the UI language

+ +

In the past, the {{ domxref("window.navigator.language") }} DOM property reflected the language of Firefox's user interface. This is no longer the case; instead, it reflects the value of the Accept-Language header for the current document. If you need to detect the UI language, you should instead look at the value of the general.useragent.locale preference.

+ +

DOM changes

+ +

The behaviors of {{ domxref("window.setTimeout()") }} and {{ domxref("window.setInterval()") }} have changed; the minimum allowed time has changed, and varies depending on the situation. In addition, timeouts and intervals are clamped to one per second in inactive tabs (that is, tabs the user isn't currently looking at).

+ +

JavaScript changes

+ +

The following keywords are now reserved in JavaScript, even when you're not in strict mode:

+ + + +

Don't use those keywords anywhere in your code, even as object property names.

+ +
Note: This is one of those things that AMO's automatically upgrade tool may not always catch, so check your code for these if your add-on was automatically upgraded but is still not working properly.
+ +

Interface changes

+ +

Instantiating certain services, including the {{ interface("nsICertOverrideService") }}, at startup can make Firefox unusable ({{ bug(650858) }}. This happens only if you try to instantiate a service before the load event is fired.

+ +

To fix this, simply move your instantiation of these services into your load event handler:

+ +
var MyObject = {
+  comp : null,
+  init: function() {
+    this.comp = Components.classes[...].getService(...);
+  },
+  ...
+}
+window.addEventListener("load", function() { MyObject.init(); }, false);
+
+ +

An even better solution, of course, is to follow performance best practices and to not instantiate services until you need to use them.

+ +

See also

+ + diff --git a/files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html b/files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html new file mode 100644 index 0000000000..e8c5b26907 --- /dev/null +++ b/files/de/mozilla/firefox_fuer_android/compatibility_testing/index.html @@ -0,0 +1,103 @@ +--- +title: Site Compatibility Testing for Firefox for Android +slug: Mozilla/Firefox_fuer_Android/Compatibility_Testing +translation_of: Mozilla/Firefox_for_Android/Compatibility_Testing +--- +

Overview

+

Our goal, is to open up the Web to all mobile browsers via promotion of standards and best practices.

+

However, some websites serve content either that doesn't function well or that is different than that served to some specific popular mobile browsers of the moment. This content may be:

+ +

We refer to this category of issues as Web compatibility issues. Web compatibility issues (for Firefox for Android, Firefox OS and other browsers with limited market share in one or more regions) typically result from one or more of several causes:

+
+
+ User-agent sniffing
+
+ Identifying the browser by its user-agent string and sending different content.
+
+ Use of non standard (typically Webkit) CSS properties
+
+ Using non standard CSS properties that the browser does not recognize, causing layout or style issues
+
+ Use of non standard (typically Webkit) DOM properties
+
+ Using non standard DOM properties in JavaScript that the browser does not recognize, causing functional issues
+
+ Browser limitations
+
+ Using standard CSS and DOM properties that the browser does not currently implement or that have functional or performance issues
+
+

For Firefox specifically, we need your help to identify sites that do not work well by reporting the specific issues that you find in your investigation. Other browsers vendors have bug reporting systems, where you can report the issues as well for their specific browser.

+

Outlined below are steps that you can follow to identify and report site issues.

+

Setup

+

To start, let's set up your hardware and software for compatibility testing.

+
    +
  1. An Android phone is a prerequisite for testing Firefox for Android. See our list of supported devices for Firefox for Android to ensure that your phone is supported.
    2. +
  2. Install Firefox for Android from Google Play.
    3. +
  3. Install the Phony Add-on for Firefox on Android. This add-on lets Firefox for Android pretend to be another browser by changing the user-agent string that is sent with each HTTP request.
    4. +
  4. Set up an account on bugzilla so that you can report issues.
    5. +
+

Optional steps:

+ +
+

Note: See the article Browser detection using the user agent for an in-depth explanation about browser user-agents.

+
+

Compatibility Testing

+

The following steps walk you through the method that Mozilla QA uses for compatibility testing:

+
    +
  1. Select a site to test. +
      +
    • This may be a site that you already visited and saw that something is wrong in your daily browser usage.
      • +
    • Alternatively, you can select one of the top sites listed on the Are We Compatible Yet report. Sites that have not yet been investigated are shown in white.
      • +
    +
    2. +
  2. Open the site that you selected in Firefox for Android. Test the functionality of the site by exploring different areas of the site. For example, if the site displays articles, pictures, and videos, you should explore all three areas of the site. Click on links, use forms, create accounts, sign in, and question: +
      +
    1. Is the site a desktop site? If so, skip to #3 and #4 to determine if Safari on iPhone and the Android browser are served the same desktop content.
      2. +
    2. Does the site have obvious layout problems? Are elements positioned on top of one another? Is there missing content? Do menus display correctly? Are header background colors correct? Are areas of the page shown correctly? Does the site simply look bad?
      +  
      3. +
    +
    3. +
  3. Visit the same website using your device’s Android browser, using the same exploration methods in #2, and question: +
      +
    1. Is the site a desktop site? Does the content greatly differ than what you saw on Firefox for Android? If so, how is it different? Is it a mobile optimized site?
      2. +
    2. Are there any similar layout issues as seen in Firefox for Android? If so, what problems do you see with Firefox for Android that you do not see in the Android browser?
      +  
      3. +
    +
    4. +
  4. Make Firefox for Android appear to the site as though it is Safari on iPhone by clicking Menu->Phony and selecting iPhone. After selecting iPhone click Menu->Reload. Visit the same site again and continue with the same exploration methods in #2 and question: +
      +
    1. Is the site a desktop site? Does the content greatly differ than what you previously saw in Firefox for Android? If so, how is it different? Is it a mobile optimized site?
      2. +
    2. Does the site have any layout problems? If so, what are those problems?
      3. +
    +
    5. +
+

Reporting Results

+

For any site that looks or functions differently in Firefox for Android, the Android browser, or Safari on iPhone you should report each issue in Bugzilla. To report an issue, file a bug in the Firefox for Android Evangelism component and provide as much information about the issue as you can. Here are some pieces of information that are typically helpful to submit with your report:

+
+
+
+
+ Summary
+
+ Summarize the issue that you have identified with the site. It is helpful to include the domain name, such as mozilla.org, in the summary.
+
+ Description
+
+ Describe the issue as best as you can. Include details such as how the content differs between Firefox for Android, Android browser, and Safari on iPhone, the specific places (titles, article list, options menu) where the site does not look correct, and what parts of the site (articles are unreadable, videos don't play, can't click on links) that do not function as you expected that they would.
+
+ If you have some knowledge of HTML, CSS, and JavaScript, it is also very helpful to have references to the lines of code that are the root cause of the issue.
+
+ Attachments
+
+ It is also valuable to attach a screen capture that shows the problem in Firefox for Android. How to take a screenshot on Android differs based on your version of the operating system.
+
+

Contact Information

+

If you have any questions about compatibility testing or want to become involved in Mozilla’s mobile web compatibility effort, please sign up for the compatibility@lists.mozilla.org mailing list.

diff --git a/files/de/mozilla/firefox_fuer_android/index.html b/files/de/mozilla/firefox_fuer_android/index.html new file mode 100644 index 0000000000..1df1e939c9 --- /dev/null +++ b/files/de/mozilla/firefox_fuer_android/index.html @@ -0,0 +1,64 @@ +--- +title: Firefox für Android +slug: Mozilla/Firefox_fuer_Android +translation_of: Mozilla/Firefox_for_Android +--- +

Für mehr und mehr Menschen sind Mobilgeräte der Hauptweg, oder sogar der einzige Weg, Zugang zum Web zu erlangen. Firefox für Android (Codename Fennec) ist ein offener, hackbarer, auf Standards basierender Browser, genau wie Firefox für den Desktop.

+ +

Firefox für Android erzeugt seine Benutzeroberfläche aus systemeigenen Android Widgets anstatt aus XUL: dies verbessert die Performanz außerordentlich, insbesondere die Zeit des Startvorgangs, und den Speicherbedarf.

+ +

Zu Firefox für Android beitragen

+ +

Die Hauptbezugsquelle für Informationen über das Firefox für Android Projekt selbst ist die Wikiseite des Projekts.

+ +

Sie können uns helfen Firefox für Android zu gestalten und zu verbessern:

+ + + +

Entwickeln für das mobile Web

+ +

Wir haben begonnen eine Anleitung zum Gestalten von Websites für Mobilgeräte zusammenzuschreiben.

+ +

Mit Firefox für Android erhalten Sie Zugang zu einer Reihe von APIs, die das unterliegende Leistungsvermögen des Gerätes zum Vorschein bringen und somit die Lücke zwischen Web und systemeigenen Anwendungen schließen:

+ + + +

Um Ihre Website auf Firefox für Android zu testen, können Sie ihn auf Ihrem Android Gerät installieren oder ihn auf ihrem Desktop mithilfe des Android Emulators laufen lassen.

+ +

Erstellen mobiler Add-ons

+ +

Firefox für Android unterstützt Add-ons durch genau das gleiche Erweiterungssystem, das auch alle anderen Gecko-basierten Anwendungen verwenden. Wir haben kein neues Add-on-System erfunden. Das bedeutet, dass beim Erstellen eines Add-ons für Firefox für Android der gleiche Prozess verwendet wird wie für den Desktop Firefox. Add-ons, die im Desktop Firefox laufen, laufen nicht automatisch im Firefox auf Android. Die Benutzeroberflächen sind einfach zu unterschiedlich.

+ +
Firefox auf Android hat eine eindeutige Anwendungskennung, die in install.rdf angegeben werden muss. Die Kennung ist {aa3c5121-dab2-40e2-81ca-7ea25febc110}
+ +

Sowohl die klassischen Add-on-Herangehensweisen, die einen Neustart erfordern, als auch die neueren Add-on-Herangehensweisen, die ohne Neustart auskommen, werden unterstützt. Die Herangehensweise, die ohne Neustart auskommt, ist wann immer möglich die bevorzugte, weil gegenüber dem erzwungenen Anwendungsneustart beim Installieren und Entfernen von Add-ons das Nutzererlebnis hier weitaus besser ist.

+ +

Kurzer Überblick

+ + + +

Erhalten Sie Hilfe zu Firefox für Android

+ +

Dokumentationen und Tutoriale zur Verwendung und Fehlerbehebung von Firefox für Android sind auf der Mozilla Support Website verfügbar.

diff --git a/files/de/mozilla/index.html b/files/de/mozilla/index.html new file mode 100644 index 0000000000..64886b45c6 --- /dev/null +++ b/files/de/mozilla/index.html @@ -0,0 +1,12 @@ +--- +title: Mozilla +slug: Mozilla +tags: + - TopicStub +translation_of: Mozilla +--- +
+ {{draft}}
+

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/mozilla/javascript_code_modules/deutsch/index.html b/files/de/mozilla/javascript_code_modules/deutsch/index.html new file mode 100644 index 0000000000..361b8eaa94 --- /dev/null +++ b/files/de/mozilla/javascript_code_modules/deutsch/index.html @@ -0,0 +1,197 @@ +--- +title: Benutzung von JavaScript Code Modulen +slug: Mozilla/JavaScript_code_modules/Deutsch +tags: + - Anleitung + - Erweiterungen + - JavaScript + - XPCOM +translation_of: Mozilla/JavaScript_code_modules/Using +--- +
{{gecko_minversion_header("1.9")}}
+ +

Das Konzept von JavaScript Code Modulen wurde in {{Gecko("1.9")}} eingeführt und dient der gemeinsamen Verwendung von Code in unterschiedlichen Anwendungsbereichen. Module können außerdem dazu genutzt werden, globale JavaScript Singletons anzulegen, wofür früher JavaScript XPCOM Objekte nötig waren. Ein javaScript Code Modul ist nichts weiter als eine Sammlung von JavaScript code, der an einem bestimmten Ort abgelegt ist. Solch ein Modul wird mit Components.utils.import() oder Components.utils["import"]() in einen bestimmten JavaScript Anwendungsbereich geladen, etwa ein XUL oder JavaScript XPCOM Script.

+ +

Erstellen eines JavaScript Code Moduls

+ +

Ein sehr einfaches JavaScript Modul sieht so aus:

+ +
var EXPORTED_SYMBOLS = ["foo", "bar"];
+
+function foo() {
+  return "foo";
+}
+
+var bar = {
+  name : "bar",
+  size : 3
+};
+
+var dummy = "dummy";
+
+ +

Wie zu sehen ist, verwendet das Modul reguläres JavaScript, um Funktionen, Objekte, Konstanten und jeden anderen JavaScript Datentyp anzulegen. Das Modul definiert außerdem eine spezielle Variable namens EXPORTED_SYMBOLS. Alle JavaScript Objekte, die in EXPORTED_SYMBOLS angeführt sind, werden aus dem Modul exportiert und in den Anwendungsbereich geladen, der das Modul einbindet. Ein Beispiel:

+ +
Components.utils.import("resource://app/my_module.jsm");
+
+alert(foo());         // displays "foo"
+alert(bar.size + 3);  // displays "6"
+alert(dummy);         // displays "dummy is not defined" because 'dummy' was not exported from the module
+
+ +
Hinweis: Wenn Änderungen an einem Modul getestet werden sollen, muss immer darauf geachtet werden, die Versionsnummer der Anwendung zu erhöhen. Andernfalls kann es passieren, dass die vorherige Version des Moduls verwendet wird.
+ +

Die URL eines Code Moduls

+ +

Wie im obigen Beispiel ersichtlich ist, benötigt man für den Import eines Code Moduls eine URL. (Die URL im Beispielcode ist "resource://app/my_module.jsm".)

+ +

Code Module können nur mit einer chrome: ({{gecko_minversion_inline("2")}}), resource:, oder file: URL geladen werden.

+ + + +

Gemeinsame Verwendung von Objekten

+ +

Eine besonders wichtige Eigenschaft von Components.utils.import() ist es, dass Module beim erstmaligen Importieren im Zwischenspeicher abgelegt werden und alle weiteren Importvorgänge diese gespeicherte Version verwenden anstatt das Modul neu zu laden. Das bedeutet, dass das Modul von allen Anwendungsbereichen die es importiert haben, gemeinsam verwendet wird. Alle Änderungen von Daten, Objekten oder Funktionen sind in jeden Anwendungsbereich, der das Modul benutzt, sichtbar. Wenn wir beispielsweise unser einfaches Modul in zwei JavaScript Bereichen importieren, können Änderungen aus einem Bereich auch im anderen Bereich beobachtet werden.

+ +

Bereich 1:

+ +
Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar.size + 3);  // displays "6"
+
+bar.size = 10;
+
+ +

Bereich 2:

+ +
Components.utils.import("resource://app/my_module.jsm");
+
+alert(foo());         // displays "foo"
+alert(bar.size + 3);  // displays "13"
+
+ +

Durch diese Eigenschaft können Module als Singleton Objekte verwendet werden um Daten zwischen verschiedenen Fenstern, oder auch zwischen XUL Scripten und XPCOM Objekten, auszutauschen.

+ +

{{Note("Jeder Bereich, der ein Modul importiert, erhält eine Kopie (by-value) aller exportierten Symbole des Moduls. Änderungen der Werte in dieser Kopie werden nicht an andere Bereiche weitergeleitet (allerdings werden Objekteigenschaften per Referenz manipuliert).")}}

+ +

Bereich 1:

+ +
Components.utils.import("resource://app/my_module.jsm");
+
+bar = "foo";
+alert(bar);         // displays "foo"
+
+ +

Bereich 2:

+ +
Components.utils.import("resource://app/my_module.jsm");
+
+alert(bar);         // displays "[object Object]"
+
+ +

Der Haupteffekt dieser by-value Kopie besteht darin, dass globale Variablen eines einfachen Typs nicht in allen Bereichen geteilt werden. Variablen sollten daher immer in eine Wrapper Klasse gehüllt werden (siehe bar im obigen Beispiel).

+ +

{{h2_gecko_minversion("Code Module Entladen", "7.0")}}

+ +

Mit Components.utils.unload() kann ein zuvor importiertes Modul wieder entladen werden. Nach dem Aufruf dieser Funktion sind zwar alte Referenzen auf das Modul weiterhin gültig, aber ein nachträgliches Importieren wird das Modul neu laden und ihm auch eine neue Referenz zuweisen.

+ +

Beispiele

+ + + +

Erweiterung von resource: URLs

+ +

Vor der Einführung von {{Gecko("2.0")}} war der übliche Weg, ein Modul einzubinden, die resource: URL. Die grundlegende Syntax sieht wie folgt aus:

+ +
resource://<alias>/<relative-path>/<file.js|jsm>
+
+ +

<alias> bezeichnet einen Ort, üblicherweise einen physikalischen Ort relativ zur Anwendung oder der XUL Laufzeitumgebung. Die XUL Laufzeitumgebung bietet verschiedene vordefinierte Aliase:

+ + + +

Der Pfad in <relative-path> kann beliebig tief sein und ist immer relativ zum in <alias> angegbenen Ort. Der übliche relative Pfad, der auch von XUL Runner und Firefox verwendet wird, ist "modules". Code Module sind einfache JavaScript Dateien mit einer .js oder .jsm Dateiendung.

+ +

Das verwendete <alias> muss für jede Erweiterung einzigartig sein, da alle definierten Alias Werte aller Anwendungen und Erweiterungen in einem gemeinsamen Namespace gespeichert werden.

+ +

Mittels chrome.manifest

+ +

Die einfachste Möglichkeit, ein neues Alias für eine Erweiterung oder XUL Anwendung anzulegen, besteht darin, eine Zeile wie die Folgende in chrome manifest einzufügen:

+ +
resource aliasname uri/to/files/
+
+ +

Wenn zum Beispiel die XPI deiner foo Erweiterung einen top-level Ordner namens modules/ besitzt, in dem sich das bar.js Modul befindet (das beudeutet, der modules/ Ordner liegt neben chrome.manifest und install.rdf), kann ein Alias etwa so angelegt werden:

+ +
resource foo modules/
+
+ +

(Beachte den Schrägstrich am Ende!) Danach kannst du das Modul wie folgt in deinen JavaScript Code importieren:

+ +
Components.utils.import("resource://foo/bar.js");
+
+ +

Programmatisches Hinzufügen eines Alias

+ +

Aliase auf Pfade, die als {{interface("nsILocalFile")}} dargestellt werden können, können auch programmatisch angelegt werden. Zum Beispiel:

+ +
// Import Services.jsm unless in a scope where it's already been imported
+Components.utils.import("resource://gre/modules/Services.jsm");
+
+var resProt = Services.io.getProtocolHandler("resource")
+                      .QueryInterface(Components.interfaces.nsIResProtocolHandler);
+
+var aliasFile = Components.classes["@mozilla.org/file/local;1"]
+                          .createInstance(Components.interfaces.nsILocalFile);
+aliasFile.initWithPath("/some/absolute/path");
+
+var aliasURI = Services.io.newFileURI(aliasFile);
+resProt.setSubstitution("myalias", aliasURI);
+
+// assuming the code modules are in the alias folder itself
+
+ +

Anmerkungen

+ +

Eigene Module und XPCOM Komponenten

+ +

In früheren Versionen als {{Gecko("2.0")}} werden JavaScript XPCOM Komponenten bereits vor der Chrome Registrierung geladen. Das bedeutet, dass Components.utils.import() nicht mit einer eigenen URL in einer Komponente verwendet werden kann. Eine mögliche Lösung des Problems besteht darin, den Aufruf von Components.utils.import() in den Konstruktor der XPCOM Komponente zu legen (Diskussion).

+ +

Packaging Anmerkungen

+ +

Unter normalen Umständen gibt es keinen guten Grund JavaScript Code Module in einer JAR Datei zu verpacken. Von Firefox 3.6 wird diese Form der Distribution gar nicht unterstützt. Nur in einem Anwendungsfall kann es sinnvoll sein, Module in JAR zu packen: In einer Erweiterung, die nur Firefox 4 unterstützt, und die ungepackt installiert werden muss. In allen anderen Fällen wird dadurch nur unnötigerweise die Kompatibilität zerstört.

+ +

CommonJS Module Importieren

+ +

Die hier beschriebenen JavaScript Code Module sind nicht zu verwechseln mit CommonJS modules, aber auch CommonJS Module können in jeden Bereich importiert werden, der Components.utils.import unterstützt. Der folgende Aufruf wird require() in deinen Anwendungsbereich importieren:

+ +
const { require } = Cu.import("resource://gre/modules/commonjs/toolkit/require.js", {})
+ +

Damit können danach andere CommonJS Module importiert werden. Auch Add-on SDK Module können auf die selbe Art importiert werden, wie aus einem SDK Add-on:

+ +
// import the SDK's base64 module
+
+var base64 = require("sdk/base64");
+base64.encode("hello"); // "aGVsbG8="
+ +

Auch andere CommonJS Module können importiert werden, solange der Pfad bekannt ist:

+ +
// import my module
+
+var myModule = require("resource://path/to/my/module.js");
+ +

In diesem Fall kann es aber ratsam sein, einen eigenen Loader zu entwickeln, damit das paths Attribut selbst gewählt werden kann.

+ +

Weiterführende Links

+ + diff --git a/files/de/mozilla/javascript_code_modules/index.html b/files/de/mozilla/javascript_code_modules/index.html new file mode 100644 index 0000000000..1a977f72f2 --- /dev/null +++ b/files/de/mozilla/javascript_code_modules/index.html @@ -0,0 +1,102 @@ +--- +title: JavaScript code modules +slug: Mozilla/JavaScript_code_modules +tags: + - Add-ons + - Extensions + - JavaScript + - Landing + - Modules + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/JavaScript_code_modules +--- +

JavaScript code modules let multiple privileged JavaScript scopes share code. For example, a module could be used by Firefox itself as well as by extensions, in order to avoid code duplication.

+ +

General topics

+ +
+
Using JavaScript code modules
+
An introduction to how to use JavaScript code modules.
+
Components.utils.import
+
How to import a JavaScript code module.
+
Components.utils.unload
+
How to unload a JavaScript code module.
+
Code snippets: Modules
+
Examples of how to use code modules.
+
Mozilla Labs JS Modules
+
This page features a list of JS modules, along with download links and documentation, that extension developers can use in their code.
+
+ +
+
+ +

Standard code modules

+ +
+
AddonManager.jsm
+
Interface to install, manage, and uninstall add-ons.
+
AddonRepository.jsm
+
Allows searching of the add-ons repository.
+
Assert.jsm
+
Implements the CommonJS Unit Testing specification version 1.1, which provides a basic, standardized interface for performing in-code logical assertions with optional, customizable error reporting.
+
BookmarkHTMLUtils.jsm
+
Provides utility functions for importing and exporting bookmarks from the old-school "bookmarks.html" style bookmark files.
+
ctypes.jsm
+
Provides an interface that allows JavaScript code to call native libraries without requiring the development of an XPCOM component.
+
CustomizableUI.jsm
+
Allows you to interact with customizable buttons and items in Firefox's main window UI.
+
DeferredTask.jsm
+
Run a task after a delay.
+
Dict.jsm
+
Provides an API for key/value pair dictionaries.
+
DownloadLastDir.jsm
+
Provides the path to the directory into which the last download occurred.
+
Downloads.jsm
+
Provides a single entry point to interact with the downloading capabilities of the platform.
+
FileUtils.jsm
+
Provides helpers for dealing with files.
+
Geometry.jsm
+
Provides routines for performing basic geometric operations on points and rectangles.
+
HTTP.jsm
+
A wrapper for XMLHttpRequest that provides convenient and simplified API for dealing with HTTP requests.
+
JNI.jsm
+
Abstracts the js-ctypes to provide an interface that allows JavaScript code to call code running in native JVMs.
+
ISO8601DateUtils.jsm
+
Provides routines to convert between JavaScript Date objects and ISO 8601 date strings.
+
Log.jsm (formerly log4moz)
+
Provides a log4j style API for logging log messages to various endpoints, such as the Browser Console or a file on disk. This module was formerly
+
NetUtil.jsm
+
Provides helpful networking utility functions, including the ability to easily copy data from an input stream to an output stream asynchronously.
+
openLocationLastURL.jsm
+
Provides access to the last URL opened using the "Open Location" option in the File menu.
+
OSFile.jsm
+
Provides routines to access files. Read, write, rename, create directories, ...
+
PerfMeasurement.jsm
+
Provides access to low-level hardware and OS performance measurement tools.
+
PluralForm.jsm
+
Provides an easy way to get the correct plural forms for the current locale, as well as ways to localize to a specific plural rule.
+
PopupNotifications.jsm
+
Provides an easy way to present non-modal notifications to users.
+
Promise.jsm
+
Implements the Promises/A+ proposal as known in April 2013.
+
PromiseWorker.jsm
+
A version of {{domxref("ChromeWorker")}} which uses promises to return the worker's result instead of using an event to do so.
+
Services.jsm
+
Provides getters for conveniently obtaining access to commonly-used services.
+
source-editor.jsm
+
The Source Editor is used by developer tools such as the Style Editor; this interface implements the editor and lets you interact with it.
+
Sqlite.jsm
+
A Promise-based API to mozIStorage/SQLite.
+
Task.jsm
+
Implements a subset of Task.js to make sequential, asynchronous operations simple, using the power of JavaScript's yield operator.
+
Timer.jsm
+
A pure JS implementation of window.setTimeout.
+
Webapps.jsm
+
Provides an interface to manager Open Web Apps.
+
WebRequest.jsm
+
Provides an API to add event listeners for the various stages of making an HTTP request. The event listener receives detailed information about the request, and can modify or cancel the request.
+
XPCOMUtils.jsm
+
Contains utilities for JavaScript components loaded by the JS component loader.
+
diff --git a/files/de/mozilla/localization/index.html b/files/de/mozilla/localization/index.html new file mode 100644 index 0000000000..54d427c2de --- /dev/null +++ b/files/de/mozilla/localization/index.html @@ -0,0 +1,25 @@ +--- +title: Lokalisation bei Mozilla +slug: Mozilla/Localization +tags: + - Landing + - Localization + - Mozilla + - NeedsTranslation + - TopicStub + - Translation + - l10n +translation_of: Mozilla/Localization +--- +

Localization (L10n) ist die Übersetzung der Benutzeroberfläche von einer Sprache in die andere, um diese so einer anderen Sprache und Kultur anzupassen. Diese Quellen stehen jedem zur Verfügung, der sich für die technischen Aspekte der L10n interessiert - Entwicklern und Helfern

+ +

Siehe auch

+ +
+
Lokalisieren von MDN
+
Diese Ressource beinhaltet die Lokalization der Dokumentation hier bei MDN.
+
App localization
+
Diese Sammlung von Dokumenten bezieht sich genauer auf das Lokalisieren von Apps, inklusive Firefox OS apps.
+
L10n
+
Referenzdokumente für die L10n API, die Mozilla für das Lokalisieren von Firefox OS nutzt.
+
diff --git a/files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html b/files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html new file mode 100644 index 0000000000..46b60bbf1f --- /dev/null +++ b/files/de/mozilla/localization/kodierung_fuer_lokalisierungs-dateien/index.html @@ -0,0 +1,137 @@ +--- +title: Kodierungen für Lokalisierungsdateien +slug: Mozilla/Localization/Kodierung_fuer_Lokalisierungs-Dateien +tags: + - Internationalisierung + - Lokalisierung +translation_of: Mozilla/Localization/Encodings_for_localization_files +--- +

Beim Erstellen einer Lokalisierung für Mozilla Produkte ist es wichtig die Kodierung der Dateien zu beachten, die man generiert.

+ +

Im Allgemeinen sind Dateien im Mozilla Repository UTF-8 kodiert. Es gibt allerdings einige wenige Ausnahmen.

+ +

Installer

+ +

Der Windows Installer unterstützt UTF-8 nicht, sondern nur die von Windows vorgegebenen Zeichensatztabellen. Die Einbindung in den Erstellungsprozess ist kompliziert, daher hier einige Hinweise:  

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
DateiKodierungHinweise
toolkit/installer/windows/charset.mkASCIIDie Variable WIN_INSTALLER_CHARSET muss eine Kodierung haben, die mit dem Parameter CHARSET= aus toolkit/installer/windows/install.it übereinstimmt. Geeignete Werte siehe in der Tabelle unten. 
toolkit/installer/windows/install.it +

Eine Zeichensatztabelle von Windows. Der Parameter CHARSET= in dieser Datei und der Parameter WIN_INSTALLER_CHARSET in der Datei charset.mk müssen mit dem Zeichensatz übereinstimmen.

+ 		Die Parameter FONTNAME/FONTSIZE/CHARSET in dieser Datei müssen geeigete Werte haben. Für die meisten westlichen Zeichensätze sind die Werte "MS Sans Serif" und "8" sinnvolle Standardwerte. Für östliche Schriftsätze müssen geeignete Schriftarten aus dem Lieferumfang von Windows ausgewählt werden. Geeignete Werte für den Parameter CHARSET= siehe in der Tabelle unten.
browser/installer/installer.incUTF-8 
toolkit/installer/unix/install.itUTF-8{{ Deprecated_inline() }}
+ +

Native Windows-Kodierungen

+ +

Die nachfolgende Tabelle beinhaltet native Windows-Kodierungen und die jeweiligen Werte für WIN_INSTALLER_CHARSET und CHARSET=:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KodierungsbezeichnungWIN_INSTALLER_CHARSET (charset.mk)CHARSET= (windows/install.it)
ANSI_CHARSETCP12520
BALTIC_CHARSETCP1257186
CHINESEBIG5_CHARSETCP950136
EASTEUROPE_CHARSETCP1250238
GB2312_CHARSETCP936134
GREEK_CHARSETCP1253161
HANGUL_CHARSETCP949129
RUSSIAN_CHARSETCP1251204
SHIFTJIS_CHARSETCP932128
TURKISH_CHARSETCP1254162
VIETNAMESE_CHARSETCP1258163
Windows Sprachversionen Middle East:
ARABIC_CHARSETCP1256178
HEBREW_CHARSETCP1255177
Windows Sprachversionen Thai:
THAI_CHARSETCP874222
diff --git a/files/de/mozilla/localization/localization_content_best_practices/index.html b/files/de/mozilla/localization/localization_content_best_practices/index.html new file mode 100644 index 0000000000..d5b4c70dfc --- /dev/null +++ b/files/de/mozilla/localization/localization_content_best_practices/index.html @@ -0,0 +1,324 @@ +--- +title: Localization content best practices +slug: Mozilla/Localization/Localization_content_best_practices +translation_of: Mozilla/Localization/Localization_content_best_practices +--- +
+

 

+ +

Dieses Dokument stellt Entwicklern bewährte Methoden zum Erstellen von standortabhängigem Code bereit und beschreibt wie man häufige Fehler, bei der Lokalisierbarkeit verhindert.

+
+ +
+

Note: If you're a localizer and you want to contribute to the localization of Mozilla products, you might want to read our Localization quick start guide for information on localizing Mozilla code.

+
+ +

Note on localizers

+ +

Mozilla localizers a volunteers with very diverse technical skills: some of them rely exclusively on translation tools, others prefer to work directly with text editors and don't have problems working with VCS systems.

+ +

It's important to consider this when adding strings, and especially localization comments for strings that contain references, or obscure technical details.

+ +

Localization files

+ +

Choose good key IDs

+ +

The IDs (names) chosen for your keys, regardless of the file format, should always be descriptive of the string, and its role in the interface (button label, title, etc.). Think of them as long variable names. When you have to change a key ID, adding a progressive number to the existing key should always be used as a last resort. For example, suppose this string needs to be changed from "Event" to "Add New Event":

+ +
new-event-header = Event
+ +

add-new-event-header is definitely a better choice for the new string than new-event-header1.

+ +

If a string is tied to an accesskey or a tooltip, use string IDs that highlight this relation:

+ +
neweventbtn.label = Add event
+neweventbtn.accesskey = A
+neweventbtn.tooltip = Add a new event
+
+ +

Don't duplicate IDs

+ +

If you're adding new strings, check that you're not duplicating an existing ID. Depending on the parser logic, one of these two translations will be ignored.

+ +

Add localization notes

+ +

Localizers usually work on the localizable files without the context of the source files including the localized strings; it is important to add comments to the localizable files themselves, too. These comments are generally referred to as localization notes.

+ +

Don't forget to add a localization note when:

+ + + +

There is an established format for localization comments: it's important to follow the format as closely as possible, since there are a number of automated tools that parse these comments for easier access and use by localizers.

+ +

DTD files

+ +
<!-- LOCALIZATION NOTE (entity name): \{{privacy}} will be replaced at run-time by an
+     active link. the string 'privacy-link' will be used as text for this link. -->
+
+ +

Properties files

+ +
# LOCALIZATION NOTE(privacy-text): \{{privacy}} will be replaced at run-time by an
+# active link. the string 'privacy-link' will be used as text for this link.
+privacy-text = By proceeding you accept the \{{privacy}}.
+privacy-link = Privacy Terms
+
+ +

File-wide comments should use the same format, they should be at the top of the file (after the license header) and just drop the (entity name/key) reference.

+ +

Land good quality strings

+ + + +

Use Unicode characters over their ASCII counterparts when possible

+ +

Strings should use directional quotation marks when possible.

+ + + +

Non-directional single, and double, quotation marks should be used in reference to HTML code, or other languages where ASCII character usage is required, such as HTML. HTML does not prefer one over the other, and our codebase uses them interchangeably as of March 2016.

+ + + +

U+2026 (\u2026) is the horizontal ellipsis character. This character should be used in place of three consecutive periods.

+ +

Create localizable strings

+ +

Don't assume grammar structures

+ +

You need to consider the need for different grammar structures in different locales, and add switching mechanisms to present them appropriately. You shouldn't make assumptions as to what those structures will be: instead, let locales/localizers decide. When in doubt, ask the localizers.

+ +

Date and time formats

+ +

For example, you shouldn't hard code date formats into applications:

+ +
%A, %b %e
+// resulting in Wednesday, May 20
+ +

This is fine in English, but in Italian results in "Mercoledì, Mag 20", which sounds unnatural. Every time you use this kind of structure, you should have a localizable string behind it, and let localizers decide the best order for their language.

+ +

Units

+ +

Another example is localizing percentages or units. Some locales use a space between the number and the % symbol, some don't, some use a non-breaking space.

+ +

Splitting

+ +

Splitting sentences into several keys often inadvertently presumes a grammar, a sentence structure, and such composite strings are often very difficult to translate. When a composite string is needed, try to give the translators "room to move".

+ +

Word Order

+ +

If a string will contain a placeholder, always add the placeholder to the string to allow the localizer to change the word order if necessary. For example, it might seem ok in English to present the strings [username] says: to localizers simply as says: but this will cause serious issues in many other languages as the agent of an action often will not come in front of the verb, but some other position. For example in Irish/Gaelic the correct order is be [username] at saying:. If a placeholder is present, this can be correctly localized as Tá %s ag rádh: but not without.

+ +

Similarly, if the UI string is Flash Version, do not simply present the translator with Version for translation. Present the whole string or, if there is a significant need for a placeholder, use a placeholder. the word Version may have to go before or after Flash and one or both may need to be inflected.

+ +

Idiom

+ +

Idiom, in a loose sense, also has an impact on localization if it leads to strings being prepared in a way that renders them unlocalizable. For example, in English all the following begin with the same clause: The URL of this feed is invalid; The URL of this feed cannot be reached; The URL of this feed cannot be parsed. It might be tempting to 'save time' by presenting this as The URL of this feed %s and then is invalid; cannot be reached and cannot be parsed. However, linguistically these are different types of sentences and will be handled differently in other languages. This is usually not a case of translator choice but obligatory in the language. For example, in Gaelic these sentences must be translated as Tha URL an inbhir seo mì-dhligheach;Cha ruig sinn URL an inbhir seo and Cha ghabh URL an inbhir seo a pharsadh.

+ +
+

Unless there are significant savings of translation volume involved, it is usually easier and quicker for translators to handle these as fixed strings rather than composed strings, especially considering the time needed for locating, checking and potentially fixing composed strings.

+
+ +

Case and inflections

+ +

(Also see section on Placeholders)

+ +

Many languages have features like noun classes (i.e. nouns belonging to different categories and are treated differently by the grammar), case and inflections (changes are made to a word to indicate differences in meaning or use) and so on. In modern English, such features are rare and are mainly restricted to plural -s and verb forms (e.g. go > went is a form of inflection). Examples from other languages:

+ + + +
+

Implication: Using placeholders for something like 'the text' or 'the file' works well in English but is likely to cause severe headaches for localizers if the placeholders cannot be inflected.

+
+ +

Use proper plural forms

+ +

Firefox supports proper plural forms. As a native English speaker, you might find it natural to use

+ +
delete-cookie = Delete cookie
+delete-cookies = Delete cookies
+
+ +

In Firefox this should be

+ +
# LOCALIZATION NOTE (delete-cookies): Semi-colon list of plural forms.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# #1 is the number of cookies to delete
+# example:
+delete-cookies = Delete #1 cookie;Delete #1 cookies
+ +
+

Important: always include the localization note with this format if you use a plural form in Firefox. This comment is used by tools to identify strings with plural forms.

+
+ +

One last advice: never use plural form as a replacement for single/multiple conditional. See {{ Bug("658191") }} for more details.

+ +

Use ordered variables in string with multiple variables

+ +

Consider this string from /browser:

+ +
generalSiteIdentity=This website is owned by %S\nThis has been verified by %S
+ +

First thing: always add a localization comment explaining what these variables mean, even if it seems obvious. Using multiple %S give the impression that the order of variables if fixed, which is actually not.

+ +
# LOCALIZATION NOTE(generalSiteIdentity): %1$S is the owner of the current website,
+# %2$S is the name of the Certification Authority signing the certificate.
+generalSiteIdentity=This website is owned by %1$S\nThis has been verified by %2$S
+ +

Avoid concatenations, use placeholders instead

+ +

Consider this string:

+ +
tos-text = By proceeding you accept the
+tos-link = Terms of Services
+
+ +

Most developers would consider this a good solution and display the concatenation of tos-text+tos-link, with an active link on the second part. Unfortunately, this won't work at all: you need at least a third string to place after the link, without that some languages won't be able to create a natural sounding sentence.
+
+ A much more flexible solution would be:

+ +
# LOCALIZATION NOTE(tos-text): \{{link}} will be replaced at run-time
+# by an active link. String with ID 'tos-link' will be used as text
+# for this link.
+tos-text = By proceeding you accept the \{{link}}
+tos-link = Terms of Services
+ +

And then replace \{{link}} at run-time with the second string. Note also the localization comments and make sure it is clear to the localizer which placeholder string will appear in lieu of the placeholder as this may affect translation and/or inflection. For example, By proceeding you accept the \{{Terms of Service}} will result in the Gaelic translation Ma leanas tu air adhart, bidh tu a' gabhail ri \{{teirmichean na seirbheise}}. But in another grammatical context, \{{Terms of Service}} may require a different inflection, for example \{{theirmichean na seirbheise}}. So if the localizer is left unsure as to which string goes into which placeholder, this may lead to bad translations.

+ +

Don't reuse strings in different contexts

+ +

This is particularly important for mobile, where different context often means different font and available space for the string. For example, if you're adding a new menu item in Settings on Android, don't use the same string for the menu item and the following screen header.

+ +

Another example, some locales use nouns for titles, and verbs for actions (for example button labels). Sometimes they coincide with English, but they rarely do in other languages. Take Bookmark: it can be both a noun and a verb in English. A developer could be tempted to reuse the same string "Bookmark" in the button to add a bookmark, and in the header for the next dialog. This won't work in some languages.

+ +

Avoid unnecessary complexity in strings

+ +

Consider this string:

+ +
privacy-link = <p>By proceeding you accept the <a href="https://www.mozilla.org/privacy" class="external">Privacy Terms</a>.</p>
+ +

In this case, you shouldn't put the URL inside the localization string, unless you need it to be localizable. If you change the URL, you're going to need a new string ID; the same goes for the anchor's attributes, or the paragraph markup. Instead, you should use the following strings

+ +
# LOCALIZATION NOTE(privacy-text): \{{link}} will be replaced at run-time
+# by an active link. String with ID 'privacy-link' will be used as text
+# for this link.
+privacy-text = By proceeding you accept the \{{link}}.
+privacy-link = Privacy Terms
+ +

And then replace {{link}} at run-time with the link.

+ +

Don't hardcode characters

+ +

Typically white spaces, commas, or other separators (":", "|").

+ +

If you need a trailing white space in a string, use the Unicode character \u0020 (that's usually a bad sign, you're concatenating it to another string). At some point, someone will accidentally trim that whitespace.

+ +

Remove unused strings

+ +

If you're removing features, don't leave around unused strings in the .properties file.

+ +

Tooltips

+ +

If a string is used as a tooltip, it should not end in a period (in English). Tooltips are never written in imperative mood but infinitive mood instead. Hence the proper absence of periods to indicate this isn't just a matter of consistency for en-US, as it is also vital info for localizers.

+ + + +

The labels on controls and menu titles, menu option strings, and so forth should not end in periods (in English). These are generally not complete sentences, but instead, phrases that convey the idea of a concept or action. Therefore, for both correctness and consistency within en-US, please leave out the trailing periods for these items. This also helps with localization.

+ +

Developer tools key shortcuts

+ +

When translating Firefox strings from /devtools/ folder, you may see some keys like this:

+ +
inspector.searchHTML.key=CmdOrCtrl+F
+ +

The first part of the string `CmdOrCtrl` should not be translated. You may only translate the letter to better match your locale. This key shortcut definition matches the Electron key shortcut definition.

+ +

Create localizable UI

+ +

CSS issues

+ +

Some CSS text/font properties may cause problems with text legibility when applied to certain language texts.

+ + + +

Design for +50%

+ +

Bear in mind that English strings will likely be a lot shorter than their international equivalents, so you need to leave some space in your UI to allow for this. Some examples:

+ + + +

Another good example is Yes/No. There are two types of languages, those that have Yes/No as a single word, and those that don't and work on mirroring the verb. For example, a Do you want to open the page? > Yes/No dialog works in English, but in Gaelic/Irish/Welsh and several other languages the equivalent answer is Want/Not want.

+ +

W3C has a good guide on the length ratios a developer should be prepared for.

+ +

Test localizability

+ +

As a developer, you should always test your patches not just for code errors, but also for localizability issues in case they involve string or UI changes.

+ +

Gecko and mozilla-central

+ +

First, make sure that there are no hard-coded strings, and all strings are available in localization files (.dtd, .properties). One possible way to test a patch for localizability issues is to alter the en-US localization files, adding extraneous characters to the original strings: this can help to identify both hard-coded strings and "flexibility issues" in the UI.

+ +

Changing existing strings

+ +

Updating Entity Names

+ +

If you are changing a string such that its meaning has changed, you must update the entity or property name for the string to match the new meaning. If your changes are relevant only for English — for example, to correct a typographical error or to make letter case consistent — then there is generally no need to update the entity name.

+ +

Changing the string ID will invalidate the existing translation, the new string will be reported as missing in all tools, and localizers will have to retranslate it. Given the diversity of tools used by localization teams, this is the only reliable method to ensure that localizers update existing localizations.

+ +

If you change the entity or property name of a string, you must also update all instances where that entity or property name is used in the source code, including localization comments.

+ +

If you change the entity or property name of a string, and the string has an accompanying access key, command key, or tooltip, you should update their names as well for consistency. This change is fundamental for access keys, since many localization tools use the entity name to connect an access key to its label. For example, to check if it's using a character not available in the original string, given entities "useBookmark.label" and "useBookmark.accesskey", if you change to "chooseBookmark.label" due to a string change, change the access key entity to "chooseBookmark.accesskey" to match it.

+ +

String freeze

+ +

Some repositories are considered to be string-frozen. This means that string changes are not allowed to land, and each case must be evaluated before landing. As a general rule, it's recommended to fix strings on the trunk/master repository, and create ad-hoc patches for string frozen repositories that don't involve string changes. Note that even removing strings is considered a breakage.

+ +

In the case of Firefox and Thunderbird, string frozen repositories are: mozilla-aurora, mozilla-beta, mozilla-release.

+ +

Bugzilla and l10n

+ +

Do I need l10n feedback?

+ +

Feedback from l10n-drivers is not necessary for each landing involving strings, as long as you're following the basic rules described in this document. If you have doubts about the localizability of some text or structure (not about the text itself, that would need copywriters), it's definitely good to ask feedback.

+ +

Keywords: l12y, late-l10n

+ +

Two keywords are generally used on Bugzilla:

+ + + +

Alias :l10n

+ +

The :l10n alias on Bugzilla (community@localization.bugs) is followed by some localizers and it could be CC'd to gather opinions from the wider l10n community (no point in opening NEEDINFO or requiring actions from this alias). There is also a dev-l10n mailing list and a #l10n channel on IRC, they might be a good place to ask questions.

diff --git a/files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html b/files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html new file mode 100644 index 0000000000..6f7835ed1b --- /dev/null +++ b/files/de/mozilla/localization/lokalisierung_mit_mercurial/index.html @@ -0,0 +1,252 @@ +--- +title: Lokalisierung mit Mercurial +slug: Mozilla/Localization/Lokalisierung_mit_Mercurial +translation_of: Mozilla/Localization/Localizing_with_Mercurial +--- +

Für Mozillla verwenden wir das Versionskontrollsystem von Mercurial (Hg) zur Verwaltung des Quellcodes und der Lokalisierungen. Mit Mercurial können Lokalisierer lokal arbeiten (auf dem eigenen Rechner) und dann die Änderungen an ein Remote-Repository hochladen (push), das überlicherweise auf den Mozilla-Servern (hg.mozilla.org) gehostet wird. Für die Lokalisierung aktueller Versionen von Firefox, Thunderbird und SeaMonkey wird Mercurial verwendet. Falls die Dokumentation unvollständig ist oder du Fragen hast, schau bitte bei den #l10n- oder #hg-Kanälen oder auf irc.mozilla.org vorbei. Es lohnt sich auch die Mercurial FAQ zu lesen, falls du auf ein Problem stoßen solltest.

+ +

Für die Motivierten und Schnellen unter euch folgen hier Anweisungen zur Installation und Konfiguration von Mercurial, eine Anleitung dazu, wie man Hochlade-Rechte für seinen Hg-Account erhält und einige Aufgaben, die ohne Account-Rechte erfüllt werden können.

+ +

Mercurial installieren

+ +

Befolge die nachfolgenden Anweisungen um Mercurial auf deinem System zu installieren. Sobald du mit der Installation von Mercurial fertig bist, zeigen wir dir Schritt für Schritt wie man Mercurial konfiguriert.

+ +

Mercurial unter Linux

+ +

Mit einem der folgenden Befehle ist es ganz einfach möglich Mercurial aus der Befehlszeile  heraus zu installieren. Wähle den zu deiner Distribution passenden Befehl aus und stelle sicher, dass das Terminal als root läuft.

+ +
# Debian/ubuntu
+$ apt-get install mercurial
+
+# Fedora
+$ yum install mercurial
+
+# Gentoo
+$ emerge mercurial
+
+# Arch Linux
+$ pacman -S mercurial
+
+# OpenSolaris
+$ pkg install SUNWmercurial
+
+ +

Wenn du eine grafische Oberfläche bevorzugst kannst du MercurialEclipe hier herunterladen und istallieren.

+ +

Hat es funktioniert?

+ +

Öffne ein Terminalfenster und gib folgenden Befehl ein: hg --version. Wenn eine Meldung mit der Version von Mercurial erscheint (z. B. Mercurial Distributed SCM (version 1.3.1)), war die Installation von Mercurial erfolgreich.

+ +

Weitere Details

+ +

Weitere Details zur Installation von Hg auf Linus-Systemen findest in den Anweisungen auf der Download-Seite von Mercurial. 

+ +

Mercurial unter Windows

+ +

Unter Windows gibt es zwei Möglichkeiten zur Installation:

+ + + +

Mercurial Installer.pngBei derr Befehlszeileninstallation von Hg unter Windows ist es wichtig sicherzustellen, dass sich die ausführbare Datei von hg in der Variable %PATH% des Systems befindet (für TortoiseHg is dieser Schritt nicht nötig). Verwende das Hilfsprogramm add_path.exe, das unter C:\mozilla-build\hg zu finden ist, um diesen Schritt auszuführen.

+ +
PS C:\Users\your_id> cd C:\mozilla-build\hg
+PS C:\mozilla-build\hg> .\add_path.exe /result .
+
+ +

Beachte, dass der Punkt (".") am Ende des zweiten Befehl für das aktuelle Verzeichnis steht. Wenn das Hilfsprogramm %PATH% erfolgreich modifiziert hat, öffnet sich ein Dialog mit der Meldung "%PATH% wurde korrekt aktualisiert".

+ +

Alternativ kann die Variable %PATH% auch manuell bearbeitet werden. Klicke hierfür mit der rechten Maustaste auf den Eintrag Computer im Startmenü, gehe zu Eigenschafte > Erweitert > Umgebungsvariablen, wähle PATH und klicke auf Bearbeiten. Wenn xx in der Auswahl nicht angezeigt wird, musst du auf Hinzufügen klicken und die Bearbeitung innerhalb des Dialogs Hinzufügen vornehmen (Beispiel siehe Screenshot).
+ PATH.jpg

+ +

Hat es funktioniert?

+ +
    +
  1. Gehe zu Start > Ausführen...
    2. +
  2. Gib cmd.exe ein und klicke auf OK. Ein neues Shell-Fenster sollte erscheinen.
    3. +
  3. Gib im neuen Shell-Fenster hg --version ein. Wenn eine Meldung mit der Version von Mercurial erscheint (z. B. Mercurial Distributed SCM (version 1.3.1)), war die Installation von Mercurial erfolgreich.
    4. +
+ +

Weitere Details

+ +

Weitere Details zur Installation von Hg unter Windows findest in den Anweisungen auf der Download-Seite von Mercurial.

+ +

Mercurial unter Mac OSX

+ +

Die Installation von Hg unter Mac OSX ist sehr einfach. Mit Hilfe von MacPorts kann Mercurial über das Terminal mit folgendem Befehl installiert werden:

+ +

$ sudo port install mercurial

+ +

Es ist außerdem möglich Mercurial über die dmg-Datei von der Hg Download-Seite zu installieren. Hier wird man über einen Installations-Dialog Schritt für Schritt durch den Prozess geleitet.

+ +

Wenn du eine grafische Oberfläche bevorzugst, kannst du MercurialEclipse hier herunterladen und installieren.

+ +

Hat es funktioniert?

+ +

Öffne ein Terminal-Fenster und gib folgenden Befehl ein: hg --version. Wenn eine Meldung mit der Version von Mercurial erscheint (z. B. Mercurial Distributed SCM (version 1.3.1)), war die Installation von Mercurial erfolgreich.

+ +

Weitere Details

+ +

Weitere Details zur Installation von Hg unter Mac OSX findest in den Anweisungen auf der Download-Seite von Mercurial.

+ +

Mercurial konfigurieren

+ +

Sobald Mercurial installiert wurde, muss es konfiguriert werden, um genutzt werden zu können.

+ +

Die Mercurial-Konfiguration befindet sich in einer config-Datei, die du selbst erstellen musst. Je nach Betriebssystem heißt die config-Datei entweder ~/.hgrc (UNIX-Systeme) oder Mercurial.ini (Windows).

+ +

Die config-Datei sollte die folgenden Einstellungen haben:

+ +
[ui]
+username = Your Real Name <user@example.com>
+merge = internal:merge
+
+[defaults]
+commit = -v
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8
+ +

Befolge folgende Schritte für die Konfiguration von Hg: 

+ +
    +
  1. Erstelle eine neue Datei in einem Texteditor deiner Wahl. 
    2. +
  2. Kopiere die Einstellungen oben und füge sie in diese neue Datei ein. 
    3. +
  3. Speichere die Datei entweder unter dem Namen .hgrc (UNIX-Systeme) oder Mercurial.ini (Windows) und lege Sie in unter $HOME/ oder C:\mozilla-build\hg\ or C:\Program Files\Mercurial\ ab.
    4. +
+ +

Wenn die Installation und Konfiguration von Hg abgeschlossen ist, gibt es einige Aufgaben die ohne Upload-Rechte für Hg ausgeführt werden können. 

+ +

Repositorys klonen und aktualisieren

+ +

Es gibt ein paar Repositorys mit  en-US Quelldateien, die für die meisten Localea relevant sind:

+ + + +
+

Wenn man das comm-central Repository erstellt, beinhaltet dieses auch das mozilla-central repository. Es ist also möglich, das für die Entwicklung von Firefox, SeaMonkey und Thunderbird konfigurierte Repository zu verwenden, ohne mozilla-central ein weiteres Mal anlegen zu müssen. 

+
+ +

So erstellt (oder klont) man die en-US Quelldateien beim ersten Mal:

+ + + +
hg clone https://hg.mozilla.org/mozilla-central/
+
+ +

So wird das mozilla-central Repository ins Verzeichnis mozilla-central geklont.

+ + + +
hg clone https://hg.mozilla.org/comm-central/
+cd comm-central
+python client.py checkout
+
+ +

Der erste Befehl erstellt einen Klon des comm-central Repositorys. Der zweite Befehl führt dich zu diesem Verzeichnis. Der dritte Befehl erstellt einen Klon von mozilla-central und legt einige weitere hg-Repositorys an. Die anderen Verzeichnisse werden für SeaMonkey und Thunderbird benötigt.

+ + + +
hg clone https://hg.mozilla.org/l10n-central/ab-CD/
+ +

Lokale Repositorys aktualisieren

+ + + +
hg pull -u
+
+ +

Dieser Befehl ruft neue Changesets von mozilla-central ab und wendet diese Änderungen auf deine Arbeitskopie an.

+ + + +
python client.py checkout
+ +

Dieser Befehl ruft neue Changesets von comm-central, mozilla-central und anderen passenden Repositorys ab und wendet diese Änderungen auf deine Arbeitskopie an.

+ + + +
hg pull -u
+ +

L10n-Patches erstellen

+ +

Another thing you can do with Hg without needing account priviledges is creating L10n patches of your work for someone else to commit to your remote L10n repo on the Mozilla servers. Doing this ensures that your dashboards are always accurate, as they look at your remote repo.

+ +

Here's how to create a L10n patch with Hg and the Mq extension:

+ +
    +
  1. Enable Mq by adding hg.ext =  to your Mercurial config file (~/.hgrc on Unix-like systems or Mercurial.ini on Windows) under the [extensions] section.
    2. +
  2. Open your command line tool and navigate to your L10n directory.
    3. +
  3. Inside your L10n directory, init your repo with Mq by running hg init --mq.
    4. +
  4. To create a new patch, run hg qnew -m "Your commit message" patch-name.patch. The commit message should take the form of "Bug 123456 - Change this thing to work better by doing something; r=reviewers" if you are to fix a bug.
    5. +
  5. Make your change.
    6. +
  6. Once you finish making your change, run hg qrefresh to commit your changes to the patch.
    7. +
  7. Navigate to your <repository>/.hg/patches to find your .patch.
    8. +
  8. You may repeat from step 4 to create another patch. Your patches will be incremental, i.e. new patches are created based on old patches. If you want to commit all the patches to the repository and cleanup the patch queue, run hg qfinish.
    9. +
+ +

Please refer to MqTutorial and Mq documentation for further uses of Mq extension to manage patches.

+ +

Mercurial account priviledges

+ +

Eventually, you or your team leader will need Hg account priviledges. Let's face it, it's just more convenient to commit and push your work to the remote repo yourself, rather than creating patches and asking someone else to push them for you.

+ +

To get write access to the l10n hg repositories on the Mozilla server, there's a bit of paper work to be done. The localization team owner needs to file a bug requesting an hg account. This bug will request level 1 L10n priviledges. You need to follow the instructions regarding the contributor form. Write access to the hg repositories requires a ''voucher'', which, for the owner, will be done based on the review by Mozilla. For peers of a localization, the owner can vouch (once she or he is registered).

+ +

Sending changes to Mozilla

+ +

Now that you have Hg account privileges, you can send your work to Mozilla all by yourself. Here are the steps to send your L10n work using Mercurial:

+ +
    +
  1. Since your L10n work takes place in your own local repository, you should ensure that there are no changes made to the remote repository before committing your work. To do this, update your locale, as per the section above.
    2. +
  2. After finishing a change or set of changes and checking you have updated to the latest, you should commit by entering this command:
    3. +
+ +
hg commit -m "your message identifying the change (bug 555)"
+ +

Committing won’t send your changes to Mozilla’s repository, but prepares them for it. The next step will send your changes to your remote repo via push.

+ +
    +
  1. To push to mozilla-hosted repositories, you have to have committer access, and you must edit the file (your-local-hg-root AKA the directory you pulled your locale into)/.hg/hgrc (note, this is NOT your ~/.hgrc) to add these lines (replacing ab-CD with your locale code):
    2. +
+ +
[paths]
+default = https://hg.mozilla.org/l10n-central/ab-CD/
+default-push = ssh://hg.mozilla.org/l10n-central/ab-CD/
+
+ +
    +
  1. You’ll also need to tell ssh which account to use for your pushes, too, by editing ~/.ssh/config and adding these lines, where user@host.domain is your account:
    2. +
+ +
Host hg.mozilla.org
+User user@host.domain
+
+ +
    +
  1. Now you can push your work to the repository (and check the result on the dashboard) by entering this command from your local directory:
    2. +
+ +
hg push
+ +

And tah dah! You're done! Congratulations on finishing the tutorial. Take a break and grab a snack, you deserve it

diff --git a/files/de/mozilla/localization/lokalisierung_von_pontoon/index.html b/files/de/mozilla/localization/lokalisierung_von_pontoon/index.html new file mode 100644 index 0000000000..edd35eb17e --- /dev/null +++ b/files/de/mozilla/localization/lokalisierung_von_pontoon/index.html @@ -0,0 +1,135 @@ +--- +title: Lokalisierung von Pontoon +slug: Mozilla/Localization/Lokalisierung_von_Pontoon +translation_of: Mozilla/Localization/Localizing_with_Pontoon +--- +

Lokalisierung von Pontoon is a web-based, What-You-See-Is-What-You-Get (WYSIWYG), localization (l10n) tool. At Mozilla, we use Pontoon to localize all Mozilla products and websites, ranging from Firefox to Mozilla.org. Pontoon is a very simple and intuitive tool that requires little to no technical skill to use in the l10n workflow. Here we'll discuss how to use Pontoon to localize projects, from first sign-in to finalizing your contributions. Along the way, we'll point out some sweet features that will make you more efficient and make your l10n contributions easier.

+ +
+

Are you a developer? Read about implementing Pontoon in your project or learn how to get involved on GitHub.

+
+ +

First steps

+ +

Pontoon's home page is very easy to use. To begin localizing the project, click on the Persona icon and sign in. Next, simply select the project you want to work on and your locale from the dropdown menus. Pontoon will automatically open that locale's project for you to get started. Note that for our purposes here, we'll be using Firefox Affiliates website to demo Pontoon's functionality and workflow. And there it is, opened inside Pontoon:

+ +

Browser app and workspace

+ +

Main toolbar

+ +

As you can see, most of the interface is taken by the website being translated. Only the toolbar on top belongs to Pontoon, containing the following items (from left to right):

+ +

Main toolbar

+ +

List of strings

+ +

Opens a sidebar with a list of all strings to localize.

+ +

Project selector (Affiliates)

+ +

Switches between projects to localize.

+ +

Resource selector (Homepage)

+ +

Switches between project resources to localize, like subpages or localization files. Hidden if no resources available for project.

+ +

+ +
+
+ +

Locale selector (Slovenian)

+ +

Switches between languages to localize.

+ +

Go

+ +

Opens project-resource-locale selection.

+ +

Progress indicator

+ +

Displays your progress on the resource being localized. More details are available in the popup.

+ +
+
+ +

User menu

+ +

Allows for user-specific tasks, like commiting to repository, downloading files and signing out.

+ +

Info menu

+ +

Gives important information, like the anticipated project timeline and a list of keyboard shortcuts.

+ +
+
+ +

Alright, how about we do some translating now?

+ +
+
+ +

Translate strings

+ +

When using Pontoon for localization, you have a couple of options to translate your strings. You can translate in-context, out-of-context, or a combination of the two. We'll start with looking at in-context translation.

+ +

In-context

+ +

Pontoon's in-context translation mode is what puts it above others. It opens a web page (or web app) and enables real-time editing of that page. Here's how you translate your first string:

+ +

In-context localization

+ +
    +
  1. Hover over the text you want to translate with your mouse.
    2. +
  2. An edit button appears over that text. Click on it to enable the translate mode.
    3. +
  3. Replace the original text with its translation into your language.
    4. +
  4. Click the save button to save your translation.
    5. +
+ +
+

Out-of-context

+ +

Some strings are impossible to translate in-context, e.g. the contents of the <title> tag in websites and strings with placeables or different plural forms. By clicking on the hamburger icon in the main toolbar, a list of all strings and available translations will open in the sidebar. You can also use the sidebar for out-of-context localization:

+ +

Out-of-context localization: list Out-of-context localization: translate

+ +
    +
  1. Click on the string you'd like to translate.
    2. +
  2. Translation panel with original string and its details (e.g. comments) opens.
    3. +
  3. Translate the string in the translation area below.
    4. +
  4. Click the save button to save your translation.
    5. +
+ +

As you translate strings out-of-context, translations will also appear in website, if they could also be translated in-context.

+ +

Translation helpers

+
+ +

As you can see, suggestions from history, translation memory, machine translation and other locales are also available in the out-of-context translation panel. We call all of these translation helpers and here's how each of them will help you as you translate strings:

+ +

Translation helpers: History Translation helpers: Machinery Translation helpers: Other locales Translation helpers: Search

+ +

History

+ +

Displays previously suggested translations, including from other users.

+ +

Machinery

+ +

Displays matches from various services: internal translation memory, Mozilla Transvision, open source translation memory, Microsoft terminology and machine translation.

+ +

Other locales

+ +

Displays matching translations from other locales.

+ + + +

Almost like machinery, but takes provided keyword as input parameter instead of the original string.

+ +

By clicking a suggestion, it gets copied into translation area.

+ +
+
+ +

Publishing your localization

+ +

Suppose you now want to publish your l10n work by committing it to a repo. Pontoon lets you do that too! Actually, it does that for you by automatically syncing with repositories on hourly basis. You can now pat yourself on the back, do a little dance, go to sleep or do something else to celebrate your work!

diff --git a/files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html b/files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html new file mode 100644 index 0000000000..b11efae69b --- /dev/null +++ b/files/de/mozilla/localization/lokalisierung_von_xliff-dateien/index.html @@ -0,0 +1,59 @@ +--- +title: Lokalisierung von XLIFF-Dateien für iOS +slug: Mozilla/Localization/Lokalisierung_von_XLIFF-Dateien +translation_of: Mozilla/Localization/Localizing_XLIFF_files +--- +

Firefox für iOS verwendet das XML-basierte Dateiformat XLIFF zur Speicherung und Weitergabe von Lokalisierungsdaten. XLIFF (eXtensible Localisation Interchange File Format) ist ein Lokaliserungsstandard, der von der Normungsorganisation OASIS verwaltet wird. Ziel dieses Standards ist ein XML-basiertes Dateiformat, das ohne das Risiko von Datenverlust oder -beschädigung zum Austausch von Lokaliserungsdaten zwischen verschiedenen Tools verwendet werden kann. Die meisten Übersetzungstools unterstützen den XLIFF-Standard, sodass die Lokalisierung von XLIFF-Dateien für Firefox für iOS einfach mit diesen Tools erfolgen kann. Die direkte Bearbeitung einer XLIFF-Datei ist recht simpel, besonders wenn man sich mit XML auskennt. Dieses Tutorial wird Schritt für Schritt zeigen wie Strings in einer XLIFF-Datei übersetzt werden. 

+ +

String-Repository für Firefox auf iOS

+ +

Die Datei firefox-ios.xliff befindet sich im SVN.

+ +
    +
  1. Entscheiden Sie, wo auf Ihrem lokalen Computer Sie die Kopie aus dem github-Repository speichern möchten und navigieren Sie im Terminal dorthin.
    2. +
  2. Geben Sie folgenden Befehl ein: git clone https://github.com/mozilla-l10n/firefoxios-l10n/your-locale-code/
    3. +
  3. Das Projekt firefox-os sollte sich nun zusammen mit der Datei firefox-ios.xliff in dem von Ihnen gewählten Ordner befinden.
    4. +
+ +

Übersetzen der XLIFF-Datei

+ +
    +
  1. Öffnen Sie die Datei firefox-ios.xliff in einem Texteditor Ihrer Wahl.
    2. +
  2. Fügen Sie im <file>-Tag das Attribut target-language mit dem Code Ihrer Locale als Wert hinzu (z. B. target-language="xx-XX"). Beachten Sie, dass es innerhalb eines XLIFF-Dokuments viele <file>-Tags geben kann. Jedes <file>-Tag muss das Attribut target-language mit dem Code Ihrer Locale als Wert enthalten (z. B. target-language="xx-XX").
    3. +
  3. Strings befinden sich zwischen <trans-unit>-Tags. Englische Quell-Strings befinden sich zwischen den Child-Tags <source>. Nachfolgend ein Beispiel einer solchen <trans-unit>. + 
    <trans-unit id="Add to Bookmarks">
+    <source>Add to Bookmarks</source>
+</trans-unit>
    +
    4. +
  4. Ihre Übersetzung muss sich zwischen den Child-Tags <target> befinden. Gehen Sie die gesamte XLIFF-Datei durch und fügen Sie unter jedem <source>-Tag das Tagpaar <target></target> hinzu. Dies wird Ihnen helfen, die Strings auszumachen, die übersetzt werden müssen. Das Tagpaar <source> darf nicht gelöscht werden. + 
    <trans-unit id="Add to Bookmarks">
+    <source>Add to Bookmarks</source>
+    <target>YOUR_TRANSLATION_HERE</target>
+</trans-unit>
+
    +
    5. +
  5. Fügen Sie die Übersetzungen der Strings zwischen den <source>-Tags zwischen die <target>-Tags darunter ein. Bitte beachten Sie, dass folgende Zeichenfolgen nicht übersetzt werden dürfen. +
      +
    1. $(SOME_TEXT_HERE) ein Variablenformat,
      2. +
    2. %1$@ ist ein weiteres Variablenformat.
      3. +
    3. <note>-Tags beinhalten Hinweise der Entwickler zur Lokalisierung und sollten nicht übersetzt werden. 
      4. +
    + + 
    <trans-unit id="Add to Bookmarks">
+    <source>Add to Bookmarks</source>
+    <target>Agregar a marcadores</target>
+    <note>No comment provided by engineer.</note>
+</trans-unit>
+
    +
    6. +
  6. Speichern Sie Ihre Übersetzungen regelmäßig.
    7. +
  7. Wenn Sie mit Ihrer Übersetzung fertig sind, ist es wichtig sicherzustellen, dass der XML-Code in der XLIFF-Datei valide ist (z. B. keine beschädigten Tagpaare enthält). Öffnen Sie die Datei in Firefoy, um eine Validitätsprüfung auszuführen und verbessern Sie alle Fehler, die gemeldet werden. 
    8. +
+ +

Hochladen der XLIFF-Datei

+ +
    +
  1. Laden Sie mit dem folgenden Befehl die übersetzte XLIFF-Datei in das Verzeichnis Ihrer Locale hoch: git commit -m "Commit message here" .
    2. +
  2. Speichern Sie Ihre Version im github-Repository: git push
    3. +
  3. Legen Sie die Füße hoch, gönnen Sie sich ein Bier (oder eine Limo) und seien Sie stolz darauf etwas Neues, Anderes und Aufregendes gemacht zu haben! 
    4. +
diff --git "a/files/de/mozilla/localization/programm\303\274bersetungen_mit_mercurial/index.html" "b/files/de/mozilla/localization/programm\303\274bersetungen_mit_mercurial/index.html" new file mode 100644 index 0000000000..f2dd7ac06d --- /dev/null +++ "b/files/de/mozilla/localization/programm\303\274bersetungen_mit_mercurial/index.html" @@ -0,0 +1,284 @@ +--- +title: Programmübersetzungen mit Mercurial +slug: Mozilla/Localization/Programmübersetungen_mit_Mercurial +translation_of: Mozilla/Localization/Application_Translation_with_Mercurial +--- +

{{draft}}

+ +

Herausfinden, wo Übersetzungen fehlen

+ +
    +
  1. Herausfinden, für welche Ableger der Mozilla-Familie noch Übersetzungen fehlen. Dazu sollte die Übersetzungsseite des verantwortlichen Sprachteams gelesen werden (dazu hier den richtigen Sprachcode - z. B. "de" für Deutsch - anklicken). Das Lokalisationstem kennt die Ableger. Der Standard-Lokalisationsableger ist aurora.
    2. +
  2. Als nächstes muss überprüft werden, was noch unübersetzt ist, dazu zur Lokalisations-Statusseite gehen und die Seite der Zielsprache aufrufen.
    3. +
  3. Im Abschnitt "Applications & Sign-offs" befinden sich verschiedene Produkte und deren Ableger, die noch nicht fertig übersetzt sind. +
      +
    • gaia-* bezeichnet Ableger von Firefox OS, dem Betriebssystem für Mobilgeräte.
      • +
    • Firefox und fx-* beueichnen Ableger vom Desktop-Firefox, dem Browser für PCs und Laptops auf Windows, Mac OS oder Linux.
      • +
    • Fennec und fennec-* bezeichnen Ableger vom mobilen Firefox, dem Firefoxbrowser für Android.
      • +
    • Thunderbird und tb-* bezeichen Ableger von Thunderbird, dem E-Mail-Programm, Newsgroup- und Feedreader und Chatprogramm. Die Lokalisation des Lightning Kalendar Add-Ons findet auch hier statt.
      • +
    • SeaMonkey und sea-* bezeichnen Ableger von SeaMonkey, der All-in-One Internetsuite, die Browser, E-Mail- und Chatprogramm und mehr enthält.
      • +
    • Lightning und cal-* bezeichnen Ableger von Lightning, dem Kalender Add-On für Thunderbird. Die Lokalisation von Lightning findet inzwischen in Thunderbirds tb-*-Teil statt, der cal-*-Bereich wird nicht länger verwendet.
      • +
    +
    4. +
  4. In diesem Beispiel soll der Aurora-Ableger des Desktop-Firefox übersetzt werden. Deshalb zu fx_aurora scrollen.
    5. +
  5. Der Text daneben zeigt den Übersetzungsstatus an. +
      +
    • Wenn dort 'Translated' steht, ist der Ableger schon fertig übersetzt. Nun können Sie entweder ein anderes Produkt übersetzen oder jemanden von der Lokalisationsseite (siehe oben) kontaktieren, damit er Sie informieren kann, wenn neue unübersetzte Texte vorhanden sind.
      • +
    • Wenn es ein roter Text ist, der aus einer Nummer und dem Wort 'missing' besteht, sind unübersetzte Texte vorhanden und die Anleitung kann weiter ausgeführt werden.
      +  
      • +
    +
    6. +
+ +

Required Tools

+ +

Build pre-requisites

+ +

First, get the required programs to compile Mozilla applications like Firefox and Thunderbird from Build Instructions. This is only necessary once.

+ +
+

Install MozillaBuild 1.9.0pre from https://groups.google.com/forum/#!topic/mozilla.dev.platform/aIFUKRrb3IY

+
+ +
+

MozillaBuild must be installed into an absolute file path without whitespaces, else it will break.

+
+ +

File comparison program

+ +

For the translation, it is recommend to use file comparison program to compare the English file (containing the new texts) with the file of your locale (which is still missing the new strings). This example uses WinMerge: Download and install it. A comparison of alternatives (e.g. for Linux and Mac OS) is available on Wikipedia.

+ +

File and text editor

+ +

For editing individual files a text editor can be a better choice than a file comparion program, e.g. because the file is new and everything has to be translated, the file is too customized to compare it to the English one, or special functionality is required (e.g. bookmarking untranslated lines). Use a text editor you are comfortable with. This example uses Notepad++.

+ +

Progress tracking tool

+ +

To track which strings and files already have been translated and later also to see which new strings have already been tested in the product as being a good translation for the functionality behind the translated strings and that the translated texts fit into the available, the translation progress should be tracked. This can be done in a text editor or word processor or any other tool in which you can attach different kind of states to the individual texts to translate. The Firefox extension Scrapbook is used in this guide. Install it into your default Firefox profile (you will have more than one profile when following this guide).

+ +

Getting the current Texts in English and your Locale

+ +

Obtaining the English texts with the source code

+ +

Get the source code by downloading the following file:

+ + + +

In the next step, we will unpack the source code:

+ +
    +
  1. Open an input shell, e.g. by pressing the Windows key and R on the keyboard Screenshot of Windows key + R key or by calling the "Run..." command from the Windows "Start" button, and then typing cmd and pressing the Enter key.
    2. +
  2. Launch the installed MozillaBuild toolset by launching it with its path, e.g. C:\Mozilla\Coding\Buildtools\MozillaBuild\start-shell-msvc2010.bat You can autocomplete the file path after typing a few characters and then pressing the Tabulator key.
    + If you launch the start-shell-l10n.bat, compiling features will be disabled. You can create translation patches, but creating language packs for the application, binary repacks of the application (changing the localization of the program), and compiling the application likely won't work.
    3. +
  3. You are now in the Mozilla development environment which emulates a Linux environment. Now go to the directory where you want to put the source code. It's highly recommended to put it onto the fastest hard drive in the device. File paths here work starting with a slash (/) followed by the drive letter, and then the directory structure like on Windows, but using slashes (/) instead of backslashes (\). So let's go to C:\Mozilla by typing
    + cd /c/Mozilla/
    4. +
  4. Create a new directory for the source code:
    + mkdir mozilla-aurora
    5. +
  5. Initialize the new directory as new repository:
    + hg init mozilla-aurora
    6. +
  6. Go into the new directory:
    + cd mozilla-aurora
    7. +
  7. Unpack the source code:
    + hg unbundle /path/to/the/downloaded/mozilla-aurora.hg
    + This can take some time, mostly depending on the performance of the hard drive.
    8. +
+ +

Obtaining the texts of your localization

+ +
    +
  1. Go back to the parent folder of mozilla-aurora:
    + cd ..
    2. +
  2. Find the localization repository for your branch and language on http://hg.mozilla.org/ E.g. for aurora and German (language code 'de'), it is http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ Copy that url to the clipboard.
    3. +
  3. Copy the repository to your computer by running the following command:
    + hg clone http://hg.mozilla.org/releases/l10n/mozilla-aurora/de/ de-mozilla-aurora
    + This should proceed pretty fast.
    + On Windows, you can paste the url by calling the Paste command from the window menu in the upper left corner of the window.
    4. +
+ +

Configuring your Mercurial user settings

+ +

Still in the command prompt, go to your home directory in the file system, e.g. for a Windows user, it looks like C:\Users\MyName , depending on your Windows version:

+ +

cd /c/Users/MyName

+ +

Now list all the files here:

+ +

ls -l

+ +

If there is no file called .hgrc , create it with

+ +

> .hgrc

+ +

This file stores your general Mercurial settings (Mercurial is the tool which manages the source code and its history of changes).

+ +

Now go in the file system to the file and open it in your favorite text editor. Windows users can use e.g. Notepad++.

+ +

Paste the following content into the file:

+ +
[ui]
+username = Firstname Lastname <mynick@example.com>
+merge = internal:merge
+
+[alias]
+qexport = export -g -r qtip
+qexportall = diff -r qparent
+
+[defaults]
+commit = -v
+diff = -p -U 8
+qdiff = -p -U 8
+qnew = -U
+
+[diff]
+git = 1
+showfunc = 1
+unified = 8
+
+[extensions]
+hgext.mq =
+progress =
+
+[hooks]
+
+
+ +

Put in your name and email address which later will be public on the internet after your translation patch got accepted and uploaded. Save the file and close it.

+ +

Enabling Mercurial queues (revertable patches)

+ +

Some time will pass between the moment in which you start the localization, finish it, test it, improve it, upload it for review and get review (maybe not approved on first try). Other localizers will likely have done changes to the translation, either adding new texts, removing obsolete ones or improving the current texts. This can cause conflicts between the changes you created and theirs. For this reason, updating patches kann be necessary so Mercurial is still able to find the lines in the files which it has to replace or where it has to add them. Mercurial queues allow to revert changes and also pull changes and reapply your local changes.

+ +

Go back to the localization directory:

+ +

cd /c/Mozilla/de-mozilla-aurora

+ +

Initiate Mercurial queues:

+ +

hg qinit

+ +

Get to know the translation style

+ +

For having good chances that the translation suggestions get accepted, they should match the translation style of the texts in the application already translated. In general, the labels in the applications should have the same style like the operating system, e.g. use the same order of subject, verb and objects; decline verbs or not like the operating system does.

+ +

The following resources can help figuring out the translation style and translate according to them:

+ + + +

Choosing what to translate

+ +

Go to the Localization status page and click on the '<number> missing' label of the Firefox branch on which you want to translate, e.g. fx_aurora. The page which opens has a bar holding information about how many texts (strings) have already been translated, how many there are in English and your locale and have the same text, and how many are missing in your local. The interesting part follows below as list of missing texts.

+ +

unchanged localization report

+ +

The first line shows the locale for which the texts are bing translated (in this example: de - German). With the second line start the file paths of the files which require changes. The file paths follow the directory structure of the locale repository downloaded for translation. In this example, the file aboutDialog can be found in the folder browser/chrome/browser/. The text striked through are texts which have been removed in the English version and can also be removed from the locale being worked on. In this example we will translate the one new text with the id privatebrowsingpage.howToStart4 in the file aboutPrivateBrowsing.dtd.

+ +

Tips for finding files with usually easily translateable texts:

+ + + +

Tracking the translation progress

+ +

If you translate more than a few strings, you usually want to keep track of what has already been translated (and later if the text has been tested in the product as fitting into the available area and suiting the functionality it describes). This guide achieves this with the Firefox extension Scrapbook.

+ +
    +
  1. You installed Scrapbook earlier, now open it in Firefox either by calling it from the Firefox menu bar (press the Alt key to show it if necessary) using "View" > "Sidebar" > "Scrapbook" or by clicking its toolbar button which you likely have to add by toolbar customization if you didn't do this before.
    2. +
  2. Drag the tab with the localization error showing missing and obsolete strings to the sidebar.
    3. +
  3. After Scrapbook has saved the web page to your local disk, click with the right mouse button on the page in the sidebar and choose "Properties" from the context menu which gets opened. Rename it something meaningful, e.g. "Firefox <version number> translation".
    4. +
  4. After you saved the dialog, click with the left mouse button on the page in the sidebar to open the locally saved copy.
    5. +
+ +

Opening English files and the target locale side-by-side

+ +

The localization report shows the IDs of added or removed texts, but the English text itself is still unknown. We get this by comparing the English version of the file with the one of the locale we are translating in. To do so,

+ +
    +
  1. Launch WinMerge.
    2. +
  2. From its "File" menu, choose "Save project".
    3. +
  3. For the file path of the left directory, go to the downloaded mozilla-aurora source code and then into its browser/locales/en-US/ folder. In this example, the absolute file path is C:\Mozilla\mozilla-aurora\browser\locales\en-US.
    4. +
  4. Enable read-only mode for the left directory.
    5. +
  5. For the file path of the right directory, go to the downloaded translation directory de-mozilla-aurora and then into its browser folder. In this example, the absolute file path is C:\Mozilla\de-mozilla-aurora\browser.
    6. +
  6. Save this comparison as project so you can easily relaunch this comparision without selecting the directories again. A good name is e.g. translation-mozilla-aurora-browser.winmerge
    7. +
  7. Open the comparison you just saved.
    8. +
+ +

The translation

+ +
    +
  1. +

    Bring the console with Mercurial to the front.

    +
    2. +
  2. +

    Start tracking changes you make against the localization repository by telling it that with the qnew subcommand to save these changes as patch in a mercurial queue. This patch needs a name, choose something meaning full like "Firefox-<version number>-more-details". In this example, Firefox-29-aboutPrivateBrowsing will be used.
    + hg qnew Firefox-29-aboutPrivateBrowsing

    +
    3. +
  3. Switch back to WinMerge and navigate to browser/chrome/browser/ and open the aboutPrivateBrowsing.dtd file. You will see something like this:
    + single file comparision in WinMerge without changes by the user
    + On the left, you see an overview of the comparison of the English and the non-English file. Gray parts indicate blocks of texts which can't be found in that file, dark yellow represents changed lines and light yellow the parts of text in it which is different.
    4. +
  4. Below the license header which should never changed, the texts are organized in the following format:
    + <!ENTITY stringid "Text which will be shown in Firefox">
    5. +
  5. As you can see there is a bigger block of text not recognized. This is due to the texts which have in the English versionmoved from below the string with the id privatebrowsingpage.howToStart3 to a position above it. Cut and paste these strings in the localized file so their position corresponds to the on in the English file.
    6. +
  6. Press the F5 key or click the reload button in WinMerge's toolbar to re-compare the files.
    7. +
  7. Now copy the empty lines below privatebrowsingpage.learnMore and the line <!-- TO BE REMOVED POST-AUSTRALIS --> to the localized file. This text is a comment (which in .dtd files always can be found between <!-- and -->). There is no need to translate this text.
    8. +
  8. Now we copy the two missing lines from the English file and insert them in the localized file:
    + <!-- LOCALIZATION NOTE (privatebrowsingpage.howToStart4): please leave &newPrivateWindow.label; intact in the translation -->
    + <!ENTITY privatebrowsingpage.howToStart4               "To start Private Browsing, you can also select &newPrivateWindow.label; from the menu.">
    + The first line is a comment providing information on the localization of the text in the following line. &newPrivateWindow.label; has to be left unchanged so it can be replaced with the text of the string id &newPrivateWindow.label; whis is stored elsewhere.
    9. +
  9. Translation time: Translate the text. Afterwars, the line should look somehow like this:
    + <!ENTITY privatebrowsingpage.howToStart4               "Der private Modus kann auch über den Menü-Eintrag &newPrivateWindow.label; gestartet werden.">
    10. +
  10. Save the file.
    11. +
+ +

Exporting the changes as patch

+ +

A patch is a file containing recorded changes to a repository. It can be used to apply these changes to a copy of the repository yet without these changes.

+ +
    +
  1. Tell Mercurial to store the changes in the Mercurial queue with the qref command. We also create a commit message which will describe the changes in the patch and later get used when the patched gets checked in ('added') to the official repository with the localized files. For the commit message, we have to use the -m command line flag,
    + hg qref -m "Firefox 29: Localize missing string in aboutPrivateBrowsing.dtd"
    + You can change the commit message in the Mercurial queue every time by calling hg qref again.
    2. +
  2. Now export the patch to the file system using the qexport command which is defined in the .hgrc file (see above):
    + hg qexport > ../firefox-29-aboutPrivateBrowsing-v1.patch
    + This creates a patch file called firefox-29-aboutPrivateBrowsing-v1.patch containing the changes in the parent directory of de-mozilla-aurora (in this example: C:\Mozilla\).
    3. +
+ +

Proof-reading and altering the patch

+ +

Now proof-read the patch. This detects often more than 90 percent of the possible reasons for the reviewer to not accept the patch. If you find that changes have to be done, edit the real aboutPrivateBrowsing.dtd file from the localization repository, save it and follow the steps from Exporting the changes as patch (see above).

+ +

Validating the translation in the product

+ +

This guide hasn't yet a section about the validation of the translation. Please follow the instructions from the QA phase section of the Localization quick start guide.

+ +

Submitting the patch for review

+ +

Now the patch has to be shared so the people currently trusted to change the official translation can review the suggested changes.

+ +
    +
  1. File a bug ("ticket") in the Mozilla Localization product and choose as component the localization for which you have translated.
    2. +
  2. Choose a meaningful bug summary which will be shown for searches etc. like in this example "Firefox 29: aboutPrivateBrowsing.dtd"
    3. +
  3. Fill any important and additional information into the description field.
    4. +
  4. Click the 'Add attachment' button.
    5. +
  5. Select the exported patch file with the file picker. The checkbox for 'patch' should get automatically checked.
    6. +
  6. Add a meaningful name for the attachment, e.g. aboutPrivateBrowsing.dtd, patch, v1
    7. +
  7. Go to the review 'Flags' category and set the one for review to ?, meaning that you request review for the patch.
    8. +
  8. In the text field next to it, add the mail address of the person leading the translation of the locale. This information can be found on the page of the localization team.
    9. +
  9. Submit the bug report.
    10. +
  10. Now you have to wait for the review of that person. This can happen on the same day, on the next weekend or later, but should happen in the timeframe given for the localization of aurora. If the person requests changes, follow the instructions under Proof-reading and altering the patch. If the reviewer accepts the changes, the patch will get uploaded and your translation will officially be added to Firefox.
    11. +
diff --git a/files/de/mozilla/mathml_project/index.html b/files/de/mozilla/mathml_project/index.html new file mode 100644 index 0000000000..b1f0bf57d0 --- /dev/null +++ b/files/de/mozilla/mathml_project/index.html @@ -0,0 +1,72 @@ +--- +title: Mozilla MathML Project +slug: Mozilla/MathML_Project +tags: + - MathML + - MathML Project + - TopicStub +translation_of: Mozilla/MathML_Project +--- +

Das Mozilla MathML Project ist Mozillas Projekt, um MathML-Unterstützung mit Firefox und anderen Mozilla-basierten Applikationen zu erstellen und zu verbessern. Für einen schnellen Überblick, sehen Sie die Aufgaben für die Entwickler bei Mozilla Summit 2013.

+ +

Updates

+ +

Mathzilla

+ + + +

Community

+ + + + + + + +

Beispiel-MathML-Dokumente

+ + + +

MathML Dokumente erstellen

+ + + +
+

Original Document Information

+ + +
diff --git a/files/de/mozilla/mathml_project/mathml_torture_test/index.html b/files/de/mozilla/mathml_project/mathml_torture_test/index.html new file mode 100644 index 0000000000..f48515f89d --- /dev/null +++ b/files/de/mozilla/mathml_project/mathml_torture_test/index.html @@ -0,0 +1,1323 @@ +--- +title: MathML Härtetest +slug: Mozilla/MathML_Project/MathML_Torture_Test +tags: + - Beispiel + - Intermediate + - MathML +translation_of: Mozilla/MathML_Project/MathML_Torture_Test +--- +

MathML Härtetest

+ +
+

HTML Content

+ +
<p>
+  Render mathematics with:
+  <select name="MathFont" id="MathFont">
+    <option value="Default" selected="selected">Default fonts</option>
+    <option value="Asana">Asana</option>
+    <option value="Cambria">Cambria</option>
+    <option value="LatinModern">Latin Modern</option>
+    <option value="LucidaBright">Lucida Bright</option>
+    <option value="Minion">Minion</option>
+    <option value="STIX">STIX</option>
+    <option value="TeXGyreBonum">TeX Gyre Bonum</option>
+    <option value="TeXGyrePagella">TeX Gyre Pagella</option>
+    <option value="TeXGyreSchola">TeX Gyre Schola</option>
+    <option value="TeXGyreTermes">TeX Gyre Termes</option>
+    <option value="XITS">XITS</option>
+    <option value="XITSRTL">XITS RTL</option>
+  </select> <br/>
+</p>
+
+<table>
+
+<tr>
+<td></td>
+<th scope="col">As rendered by TeX</th>
+<th scope="col">As rendered by your browser</th></tr>
+
+<tr>
+<td>1</td>
+
+<td><img src="https://developer.mozilla.org/@api/deki/files/4578/=ex1.png" width="38" height="22"
+alt="TeXbook, 16.2-16.3" /></td>
+<td>
+<math display="block">
+<mrow>
+  <msup>
+    <mi>x</mi>
+    <mn>2</mn>
+  </msup>
+  <msup>
+    <mi>y</mi>
+
+    <mn>2</mn>
+  </msup>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>2</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4579/=ex2.png" width="30" height="17" alt="TeXbook, 16.2-16.3" /></td>
+<td>
+<math display="block">
+<!--
+<mrow>
+  <msub><mi></mi><mn>2</mn></msub>
+  <msub><mi>F</mi><mn>3</mn></msub>
+</mrow>
+-->
+<mrow>
+
+  <mmultiscripts>
+    <mi>F</mi>
+    <mn>3</mn><none/>
+    <mprescripts/>
+    <mn>2</mn><none/>
+  </mmultiscripts>
+</mrow>
+</math>
+
+</td></tr>
+
+<tr>
+<td>3</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4586/=ex21.png" width="58" height="47" alt="TeXbook, 17-17.1" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mfrac>
+    <mrow>
+      <mi>x</mi>
+      <mo>+</mo>
+
+      <msup>
+        <mi>y</mi>
+        <mn>2</mn>
+      </msup>
+    </mrow>
+    <mrow>
+      <mi>k</mi>
+
+      <mo>+</mo>
+      <mn>1</mn>
+    </mrow>
+  </mfrac>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>4</td>
+
+<td><img src="https://developer.mozilla.org/@api/deki/files/4587/=ex22.png" width="76" height="25" alt="TeXbook, 17-17.1" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mi>x</mi>
+  <mo>+</mo>
+  <msup>
+    <mi>y</mi>
+    <mfrac>
+
+      <mn>2</mn>
+      <mrow>
+        <mi>k</mi>
+        <mo>+</mo>
+        <mn>1</mn>
+      </mrow>
+    </mfrac>
+
+  </msup>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>5</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4588/=ex23.png" width="30" height="42" alt="TeXbook, 17-17.1" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mfrac>
+    <mi>a</mi>
+
+    <mrow>
+      <mi>b</mi>
+      <mo>/</mo>
+      <mn>2</mn>
+    </mrow>
+  </mfrac>
+</mrow>
+</math>
+
+</td></tr>
+
+<tr>
+<td>6</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4589/=ex24.png" width="220" height="138" alt="TeXbook, 17.5-17.6" /></td>
+<td>
+<math display="block">
+<mrow>
+  <msub>
+    <mi>a</mi>
+    <mn>0</mn>
+
+  </msub>
+  <mo>+</mo>
+  <mfrac>
+    <mn>1</mn>
+    <mstyle displaystyle="true" scriptlevel="0">
+      <msub>
+        <mi>a</mi>
+
+        <mn>1</mn>
+      </msub>
+      <mo>+</mo>
+      <mfrac>
+        <mn>1</mn>
+        <mstyle displaystyle="true" scriptlevel="0">
+          <msub>
+
+            <mi>a</mi>
+            <mn>2</mn>
+          </msub>
+          <mo>+</mo>
+          <mfrac>
+            <mn>1</mn>
+            <mstyle displaystyle="true" scriptlevel="0">
+
+              <msub>
+                <mi>a</mi>
+                <mn>3</mn>
+              </msub>
+              <mo>+</mo>
+              <mfrac>
+                <mn>1</mn>
+
+                <mstyle displaystyle="true" scriptlevel="0">
+                  <msub>
+                    <mi>a</mi>
+                    <mn>4</mn>
+                  </msub>
+                </mstyle>
+              </mfrac>
+            </mstyle>
+          </mfrac>
+
+        </mstyle>
+      </mfrac>
+    </mstyle>
+  </mfrac>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>7</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4590/=ex25.png" width="200" height="85" alt="TeXbook, 17.5-17.6" /></td>
+<td>
+
+<math>
+<mrow>
+  <msub>
+    <mi>a</mi>
+    <mn>0</mn>
+  </msub>
+  <mo>+</mo>
+  <mfrac>
+
+    <mn>1</mn>
+    <mrow>
+      <msub>
+        <mi>a</mi>
+        <mn>1</mn>
+      </msub>
+      <mo>+</mo>
+
+      <mfrac>
+        <mn>1</mn>
+        <mrow>
+          <msub>
+            <mi>a</mi>
+            <mn>2</mn>
+          </msub>
+
+          <mo>+</mo>
+          <mfrac>
+            <mn>1</mn>
+            <mrow>
+              <msub>
+                <mi>a</mi>
+                <mn>3</mn>
+
+              </msub>
+              <mo>+</mo>
+              <mfrac>
+                <mn>1</mn>
+                <mrow>
+                  <msub>
+                    <mi>a</mi>
+
+                    <mn>4</mn>
+                  </msub>
+                </mrow>
+              </mfrac>
+            </mrow>
+          </mfrac>
+        </mrow>
+      </mfrac>
+
+    </mrow>
+  </mfrac>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>8</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4591/=ex26.png" width="54" height="50" alt="TeXbook, 17.5-17.6" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mo>(</mo>
+
+  <mfrac linethickness="0px">
+    <mi>n</mi>
+    <mrow>
+      <mi>k</mi>
+      <mo>/</mo>
+      <mn>2</mn>
+    </mrow>
+
+  </mfrac>
+  <mo>)</mo>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>9</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4592/=ex27.png" width="237" height="50" alt="TeXbook, 17.7" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mrow>
+
+
+    <mo>(</mo>
+    <mfrac linethickness="0px">
+      <mi>p</mi>
+      <mn>2</mn>
+    </mfrac>
+    <mo>)</mo>
+  </mrow>
+
+  <msup>
+    <mi>x</mi>
+    <mn>2</mn>
+  </msup>
+  <msup>
+    <mi>y</mi>
+    <mrow>
+
+      <mi>p</mi>
+      <mo>-</mo>
+      <mn>2</mn>
+    </mrow>
+  </msup>
+  <mo>-</mo>
+  <mfrac>
+
+    <mn>1</mn>
+    <mrow>
+      <mn>1</mn>
+      <mo>-</mo>
+      <mi>x</mi>
+    </mrow>
+  </mfrac>
+
+  <mfrac>
+    <mn>1</mn>
+    <mrow>
+      <mn>1</mn>
+      <mo>-</mo>
+      <msup>
+        <mi>x</mi>
+
+        <mn>2</mn>
+      </msup>
+    </mrow>
+  </mfrac>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>10</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4593/=ex29.png" width="116" height="63" alt="TeXbook, 17.7-17.8" /></td>
+
+<td>
+<math display="block">
+<mrow>
+  <munder>
+    <mo>&sum;</mo>
+    <mrow>
+      <mfrac linethickness="0px">
+        <mrow>
+          <mn>0</mn>
+          <mo>&leq;</mo>
+
+          <mi>i</mi>
+          <mo>&leq;</mo>
+          <mi>m</mi>
+        </mrow>
+        <mrow>
+          <mn>0</mn>
+          <mo>&lt;</mo>
+
+          <mi>j</mi>
+          <mo>&lt;</mo>
+          <mi>n</mi>
+        </mrow>
+      </mfrac>
+    </mrow>
+  </munder>
+  <mi>P</mi>
+
+  <mo stretchy="false">(</mo>
+  <mi>i</mi>
+  <mo>,</mo>
+  <mi>j</mi>
+  <mo stretchy="false">)</mo>
+</mrow>
+</math>
+
+</td></tr>
+
+<tr>
+<td>11</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4580/=ex3.png" width="27" height="18" alt="TeXbook, 16.2-16.3" /></td>
+<td>
+<math display="block">
+<mrow>
+<msup>
+  <mi>x</mi>
+  <mrow>
+    <mn>2</mn>
+
+    <mi>y</mi>
+  </mrow>
+</msup>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>12</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4594/=ex30.png" width="175" height="61" alt="TeXbook, 17.8" /></td>
+<td>
+<math display="block">
+<mrow>
+
+  <munderover>
+    <mo>&sum;</mo>
+    <mrow>
+      <mi>i</mi>
+      <mo>=</mo>
+      <mn>1</mn>
+    </mrow>
+
+    <mi>p</mi>
+  </munderover>
+  <munderover>
+    <mo>&sum;</mo>
+    <mrow>
+      <mi>j</mi>
+      <mo>=</mo>
+
+      <mn>1</mn>
+    </mrow>
+    <mi>q</mi>
+  </munderover>
+  <munderover>
+    <mo>&sum;</mo>
+    <mrow>
+      <mi>k</mi>
+
+      <mo>=</mo>
+      <mn>1</mn>
+    </mrow>
+    <mi>r</mi>
+  </munderover>
+  <msub>
+    <mi>a</mi>
+
+    <mrow>
+      <mi>i</mi>
+      <mi>j</mi>
+    </mrow>
+  </msub>
+  <msub>
+    <mi>b</mi>
+
+    <mrow>
+      <mi>j</mi>
+      <mi>k</mi>
+    </mrow>
+  </msub>
+  <msub>
+    <mi>c</mi>
+
+    <mrow>
+      <mi>k</mi>
+      <mi>i</mi>
+    </mrow>
+  </msub>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+
+<td>13</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4595/=ex31.png" width="405" height="100" alt="TeXbook, 17.9-17.10" /></td>
+<td>
+<math display="block">
+<mrow>
+  <msqrt>
+    <mn>1</mn>
+    <mo>+</mo>
+    <msqrt>
+      <mn>1</mn>
+
+      <mo>+</mo>
+      <msqrt>
+        <mn>1</mn>
+        <mo>+</mo>
+        <msqrt>
+          <mn>1</mn>
+          <mo>+</mo>
+
+          <msqrt>
+            <mn>1</mn>
+            <mo>+</mo>
+            <msqrt>
+              <mn>1</mn>
+              <mo>+</mo>
+              <msqrt>
+
+                <mn>1</mn>
+                <mo>+</mo>
+                <mi>x</mi>
+              </msqrt>
+            </msqrt>
+          </msqrt>
+        </msqrt>
+
+      </msqrt>
+    </msqrt>
+  </msqrt>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>14</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4596/=ex34.png" width="272" height="50" alt="TeXbook, 17.10" /></td>
+<td>
+<math display="block">
+<mrow>
+
+  <mrow>
+    <mo>(</mo>
+    <mfrac>
+      <msup>
+        <mo>&part;</mo>
+        <mn>2</mn>
+      </msup>
+      <mrow>
+
+        <mo>&part;</mo>
+        <msup>
+          <mi>x</mi>
+          <mn>2</mn>
+        </msup>
+      </mrow>
+    </mfrac>
+    <mo>+</mo>
+
+    <mfrac>
+      <msup>
+        <mo>&part;</mo>
+        <mn>2</mn>
+      </msup>
+      <mrow>
+        <mo>&part;</mo>
+        <msup>
+
+          <mi>y</mi>
+          <mn>2</mn>
+        </msup>
+      </mrow>
+    </mfrac>
+    <mo>)</mo>
+  </mrow>
+
+  <msup>
+    <mrow>
+      <mo minsize="150%">|</mo>
+      <mi>&#x3C6; <!-- \varphi --></mi>
+      <mo stretchy="false">(</mo>
+      <mi>x</mi>
+      <mo>+</mo>
+
+      <mi mathvariant="normal">i</mi>
+      <mi>y</mi>
+      <mo stretchy="false">)</mo>
+      <mo minsize="150%">|</mo>
+    </mrow>
+    <mn>2</mn>
+
+  </msup>
+  <mo>=</mo>
+  <mn>0</mn>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>15</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4581/=ex4.png" width="31" height="22" alt="TeXbook, 16.2-16.3" /></td>
+<td>
+
+<math display="block">
+<mrow>
+  <msup>
+    <mn>2</mn>
+    <msup>
+      <mn>2</mn>
+      <msup>
+        <mn>2</mn>
+
+        <mi>x</mi>
+      </msup>
+    </msup>
+  </msup>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>16</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4597/=ex40.png" width="55" height="49" alt="TeXbook, 18.10-18.11" /></td>
+
+<td>
+<math display="block">
+<mrow>
+  <msubsup>
+    <mo stretchy="false">&int;</mo>
+    <mn>1</mn>
+    <mi>x</mi>
+ </msubsup>
+ <mfrac>
+
+   <mrow><mi>d</mi><mi>t</mi></mrow>
+   <mi>t</mi>
+ </mfrac>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>17</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4599/=ex41.png" width="91" height="47" alt="TeXbook, 18.12-18.13" /></td>
+<td>
+
+<math display="block">
+<mrow>
+  <msub>
+    <mo>&#x222C; <!-- \iint --></mo>
+    <mi>D</mi>
+  </msub>
+  <mi>d</mi><mi>x</mi>
+  <mspace width="thinmathspace"/>
+
+  <mi>d</mi><mi>y</mi>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>18</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4600/=ex43.png" width="250" height="66" alt="TeXbook, 18.23" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mi>f</mi>
+
+  <mo stretchy="false">(</mo>
+  <mi>x</mi>
+  <mo stretchy="false">)</mo>
+  <mo>=</mo>
+  <mrow>
+    <mo>{</mo>
+
+    <mtable>
+      <mtr>
+        <mtd columnalign="center">
+          <mrow>
+            <mn>1</mn>
+            <mo>/</mo>
+            <mn>3</mn>
+
+          </mrow>
+        </mtd>
+        <mtd columnalign="left">
+          <mrow>
+            <mtext>if&nbsp;</mtext>
+            <mn>0</mn>
+            <mo>&leq;</mo>
+            <mi>x</mi>
+
+            <mo>&leq;</mo>
+            <mn>1</mn>
+            <mo>;</mo>
+          </mrow>
+        </mtd>
+      </mtr>
+      <mtr>
+        <mtd columnalign="center">
+
+          <mrow>
+            <mn>2</mn>
+            <mo>/</mo>
+            <mn>3</mn>
+          </mrow>
+        </mtd>
+        <mtd columnalign="center">
+
+          <mrow>
+            <mtext>if&nbsp;</mtext>
+            <mn>3</mn>
+            <mo>&leq;</mo>
+            <mi>x</mi>
+            <mo>&leq;</mo>
+            <mn>4</mn>
+
+            <mo>;</mo>
+          </mrow>
+        </mtd>
+      </mtr>
+      <mtr>
+        <mtd columnalign="center">
+          <mn>0</mn>
+        </mtd>
+
+        <mtd columnalign="left">
+          <mtext>elsewhere.</mtext>
+        </mtd>
+      </mtr>
+    </mtable>
+  </mrow>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>19</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4601/=ex44.png" width="101" height="44" alt="TeXbook, 18.23-18.24" /></td>
+<td>
+<math display="block">
+<mover>
+  <mrow>
+    <mi>x</mi>
+    <mo>+</mo>
+    <mo>...</mo>
+
+    <mo>+</mo>
+    <mi>x</mi>
+  </mrow>
+  <mover>
+    <mo>&OverBrace;</mo>
+    <mrow><mi>k</mi> <mspace width="thinmathspace"/> <mtext>times</mtext></mrow>
+  </mover>
+
+</mover>
+</math>
+</td></tr>
+
+<tr>
+<td>20</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4582/=ex5.png" width="25" height="13" alt="TeXbook, 16.2-16.3" /></td>
+<td>
+<math display="block">
+<mrow>
+  <msub>
+    <mi>y</mi>
+    <msup>
+
+      <mi>x</mi>
+      <mn>2</mn>
+    </msup>
+  </msub>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>21</td>
+
+<td><img src="https://developer.mozilla.org/@api/deki/files/4602/=ex51.png" width="253" height="56" alt="TeXbook, 18.40" /></td>
+<td>
+<math display="block">
+<mrow>
+  <munder>
+    <mo>&sum;</mo>
+    <mrow>
+      <mi>p</mi>
+      <mtext>&nbsp;prime</mtext>
+    </mrow>
+
+  </munder>
+  <mi>f</mi>
+  <mo stretchy="false">(</mo>
+  <mi>p</mi>
+  <mo stretchy="false">)</mo>
+  <mo>=</mo>
+
+  <msub>
+    <mo stretchy="false">&int;</mo>
+    <mrow>
+      <mi>t</mi>
+      <mo>&gt;</mo>
+      <mn>1</mn>
+    </mrow>
+  </msub>
+
+  <mi>f</mi>
+  <mo stretchy="false">(</mo>
+  <mi>t</mi>
+  <mo stretchy="false">)</mo>
+  <mspace width="thinmathspace"/>
+  <mi>d</mi>
+  <mi>&pi;</mi>
+  <mo stretchy="false">(</mo>
+  <mi>t</mi>
+  <mo stretchy="false">)</mo>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>22</td>
+
+<td><img src="https://developer.mozilla.org/@api/deki/files/4603/=ex52.png" width="159" height="81" alt="TeXbook, 18.41" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mo stretchy="false">{</mo>
+  <munder>
+    <mrow>
+      <mover>
+        <mrow>
+          <mpadded width="0em"><mphantom><mo>(</mo></mphantom></mpadded>
+          <mi>a</mi>
+          <mo>,</mo>
+          <mo>...</mo>
+          <mo>,</mo>
+          <mi>a</mi>
+        </mrow>
+
+        <mover>
+          <mo>&OverBrace;</mo>
+          <mrow>
+            <mi>k</mi>
+            <mtext>&nbsp;</mtext>
+            <mi>a</mi>
+            <mtext>'s</mtext>
+
+          </mrow>
+        </mover>
+      </mover>
+      <mo>,</mo>
+      <mover>
+        <mrow>
+          <mpadded width="0em"><mphantom><mo>(</mo></mphantom></mpadded>
+          <mi>b</mi>
+          <mo>,</mo>
+          <mo>...</mo>
+          <mo>,</mo>
+          <mi>b</mi>
+        </mrow>
+
+        <mover>
+          <mo>&OverBrace;</mo>
+          <mrow>
+            <mi>&ell;</mi>
+            <mtext>&nbsp;</mtext>
+            <mi>b</mi>
+            <mtext>'s</mtext>
+          </mrow>
+
+        </mover>
+      </mover>
+    </mrow>
+    <munder>
+      <mo>&UnderBrace;</mo>
+      <mrow>
+        <mi>k</mi>
+        <mo>+</mo>
+
+        <mi>&ell;</mi>
+        <mtext>&nbsp;elements</mtext>
+      </mrow>
+    </munder>
+  </munder>
+  <mo stretchy="false">}</mo>
+</mrow>
+</math>
+</td></tr>
+
+<tr>
+<td>23</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4604/=ex53.png" width="213" height="108" alt="TeXbook, 18.42" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mo>(</mo>
+  <mtable>
+    <mtr>
+      <mtd columnalign="center">
+
+        <mrow>
+          <mo>(</mo>
+          <mtable>
+            <mtr>
+              <mtd columnalign="center">
+                <mi>a</mi>
+              </mtd>
+              <mtd columnalign="center">
+
+                <mi>b</mi>
+              </mtd>
+            </mtr>
+            <mtr>
+              <mtd columnalign="center">
+                <mi>c</mi>
+              </mtd>
+              <mtd columnalign="center">
+
+                <mi>d</mi>
+              </mtd>
+            </mtr>
+          </mtable>
+          <mo>)</mo>
+        </mrow>
+      </mtd>
+      <mtd columnalign="center">
+
+        <mrow>
+          <mo>(</mo>
+          <mtable>
+            <mtr>
+              <mtd columnalign="center">
+                <mi>e</mi>
+              </mtd>
+              <mtd columnalign="center">
+
+                <mi>f</mi>
+              </mtd>
+            </mtr>
+            <mtr>
+              <mtd columnalign="center">
+                <mi>g</mi>
+              </mtd>
+              <mtd columnalign="center">
+
+                <mi>h</mi>
+              </mtd>
+            </mtr>
+          </mtable>
+          <mo>)</mo>
+        </mrow>
+      </mtd>
+    </mtr>
+
+    <mtr>
+      <mtd columnalign="center">
+        <mn>0</mn>
+      </mtd>
+      <mtd columnalign="center">
+        <mrow>
+          <mo>(</mo>
+          <mtable>
+
+            <mtr>
+              <mtd columnalign="center">
+                <mi>i</mi>
+              </mtd>
+              <mtd columnalign="center">
+                <mi>j</mi>
+              </mtd>
+            </mtr>
+
+            <mtr>
+              <mtd columnalign="center">
+                <mi>k</mi>
+              </mtd>
+              <mtd columnalign="center">
+                <mi>l</mi>
+              </mtd>
+            </mtr>
+
+          </mtable>
+          <mo>)</mo>
+        </mrow>
+      </mtd>
+    </mtr>
+  </mtable>
+  <mo>)</mo>
+</mrow>
+
+</math>
+</td></tr>
+
+<tr>
+<td>24</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4605/=ex54.png" width="344" height="130" alt="TeXbook, 18.43" /></td>
+<td>
+<math display="block">
+<mrow>
+  <mi>det</mi>
+  <mo>|</mo>
+  <mtable>
+
+    <mtr>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mn>0</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+
+        <msub>
+          <mi>c</mi>
+          <mn>1</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+
+          <mn>2</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&mldr;</mo>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+
+          <mi>c</mi>
+          <mi>n</mi>
+        </msub>
+      </mtd>
+    </mtr>
+    <mtr>
+      <mtd columnalign="center">
+        <msub>
+
+          <mi>c</mi>
+          <mn>1</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+
+          <mn>2</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mn>3</mn>
+
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&mldr;</mo>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+
+          <mrow>
+            <mi>n</mi>
+            <mo>+</mo>
+            <mn>1</mn>
+          </mrow>
+        </msub>
+      </mtd>
+
+    </mtr>
+    <mtr>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mn>2</mn>
+        </msub>
+      </mtd>
+
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mn>3</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+
+          <mi>c</mi>
+          <mn>4</mn>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&mldr;</mo>
+      </mtd>
+      <mtd columnalign="center">
+
+        <msub>
+          <mi>c</mi>
+          <mrow>
+            <mi>n</mi>
+            <mo>+</mo>
+            <mn>2</mn>
+          </mrow>
+
+        </msub>
+      </mtd>
+    </mtr>
+    <mtr>
+      <mtd columnalign="center">
+        <mo>&#x22EE;</mo>
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&#x22EE;</mo>
+
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&#x22EE;</mo>
+      </mtd>
+      <mtd columnalign="center">
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&#x22EE;</mo>
+      </mtd>
+
+    </mtr>
+    <mtr>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mi>n</mi>
+        </msub>
+      </mtd>
+
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mrow>
+            <mi>n</mi>
+            <mo>+</mo>
+            <mn>1</mn>
+
+          </mrow>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mrow>
+            <mi>n</mi>
+
+            <mo>+</mo>
+            <mn>2</mn>
+          </mrow>
+        </msub>
+      </mtd>
+      <mtd columnalign="center">
+        <mo>&mldr;</mo>
+      </mtd>
+
+      <mtd columnalign="center">
+        <msub>
+          <mi>c</mi>
+          <mrow>
+            <mn>2</mn>
+            <mi>n</mi>
+          </mrow>
+
+        </msub>
+      </mtd>
+    </mtr>
+  </mtable>
+  <mo>|</mo>
+  <mo>&gt;</mo>
+  <mn>0</mn>
+</mrow>
+
+</math>
+</td></tr>
+
+<tr>
+<td>25</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4598/=ex6.png" width="25" height="14" alt="TeXbook, 16.2-16.3" /></td>
+<td>
+<math display="block">
+<msub>
+  <mi>y</mi>
+  <msub>
+    <mi>x</mi>
+
+    <mn>2</mn>
+  </msub>
+</msub>
+</math>
+</td></tr>
+
+<tr>
+<td>26</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4583/=ex7.png" width="90" height="23" alt="TeXbook, 16.4-16.5" /></td>
+<td>
+<math display="block">
+<mrow>
+  <msubsup>
+
+    <mi>x</mi>
+    <mn>92</mn>
+    <mn>31415</mn>
+  </msubsup>
+  <mo>+</mo>
+  <mi>&pi;</mi>
+</mrow>
+
+</math>
+</td></tr>
+
+<tr>
+<td>27</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4584/=ex8.png" width="27" height="36" alt="TeXbook, 16.4-16.5" /></td>
+<td>
+<math display="block">
+<msubsup>
+  <mi>x</mi>
+  <msubsup>
+    <mi>y</mi>
+
+    <mi>b</mi>
+    <mi>a</mi>
+  </msubsup>
+  <msubsup>
+    <mi>z</mi>
+    <mi>c</mi>
+    <mi>d</mi>
+
+  </msubsup>
+</msubsup>
+</math>
+</td></tr>
+
+<tr>
+<td>28</td>
+<td><img src="https://developer.mozilla.org/@api/deki/files/4585/=ex9.png" width="24" height="22" alt="TeXbook, 16.4-16.5" /></td>
+<td>
+<math display="block">
+<msubsup>
+  <mi>y</mi>
+  <mn>3</mn>
+  <mo>&#x2034;</mo>
+</msubsup>
+</math>
+
+</td></tr>
+</table>
+ +

CSS Content

+ +
  /* Table style */
+
+  body {
+   text-align: center;
+  }
+
+  table
+  {
+  border: solid thin;
+  border-collapse: collapse;
+  margin-left: auto;
+  margin-right: auto;
+  }
+
+  th
+  {
+  background-color: #ddf;
+  border: solid thin;
+  color: black;
+  padding: 5px;
+  }
+
+  td
+  {
+  border: solid thin;
+  padding: 5px;
+  text-align: center;
+  }
+
+  .Asana math { font-family: Asana Math; }
+  .Cambria math { font-family: Cambria Math; }
+  .LatinModern math { font-family: Latin Modern Math; }
+  .LucidaBright math { font-family: Lucida Bright Math; }
+  .Minion math { font-family: Minion Math; }
+  .STIX math { font-family: STIX Math; }
+  .TeXGyreBonum math { font-family: TeX Gyre Bonum Math; }
+  .TeXGyrePagella math { font-family: TeX Gyre Pagella Math; }
+  .TeXGyreSchola math { font-family: TeX Gyre Schola Math; }
+  .TeXGyreTermes math { font-family: TeX Gyre Termes Math; }
+  .XITS math { font-family: XITS Math; }
+  .XITSRTL math { font-family: XITS Math; direction: rtl; }
+
+ +

JavaScript Content

+ +
  function updateMathFont()
+  {
+  var mathFont = document.getElementById("MathFont").value;
+  if (mathFont == "Default") {
+    document.body.removeAttribute("class");
+  } else {
+    document.body.setAttribute("class", mathFont);
+  }
+  }
+
+  function load()
+  {
+  document.getElementById("MathFont").
+  addEventListener("change", updateMathFont, false)
+  }
+
+  window.addEventListener("load", load, false);
+
+
+
+ +

Der folgende Test enthält TeX-Beispielformeln aus Knuths TeX book und vergleichbare MathML-Repräsentationen. Es vergleicht das Rendering von der XeTeX - Engine, die das standarte Latin Modern Font benutzt, und das MathML-Rendering von Ihrem Browser, welcher das standarte Math Font oder ein alternatives OpenType MATH Font benutzt. Um das beste Rendering zu erhalten, stellen Sie sicher, dass sie diese Mathematischen Fonts auf Ihrem Betriebssystem installiert haben und einen Browser mit OpenType Math - Support, wie Gecko 31.0 {{GeckoRelease("31.0")}} oder höher, benutzen. Sie können sich auch diese Seite für Tests von Mathematischen OpenType Fonts, welche stattdessen auf Web Fonts basiert. Zuletzt können Sie sich diese Tabelle anschauen wollen, die vergleicht, wie die Tests von verschiedenen Screen Readern für Mozilla-Browser gelesen werden.

+ +

{{ EmbedLiveSample('MathML_Torture_Test', '100%', '2500px') }}

+ +
 
diff --git a/files/de/mozilla/mathml_project/start/index.html b/files/de/mozilla/mathml_project/start/index.html new file mode 100644 index 0000000000..69d5538254 --- /dev/null +++ b/files/de/mozilla/mathml_project/start/index.html @@ -0,0 +1,95 @@ +--- +title: MathML in Aktion +slug: Mozilla/MathML_Project/Start +translation_of: Mozilla/MathML_Project/Start +--- +

MathML in Aktion

+ +

Sehen Sie schlaue Formeln auf dieser Seite? Nicht? Zu schlecht. Hier ist ein Screenshot von dem, was Sie verpassen. Downloaden Sie einen Mozilla-Browser, der MathML untestützt, um diese traurige Situation zu ändern.

+ +

You already have a MathML-enabled build but what you see on the screenshot is not what you get? In that case you are probably missing some crucial MathML fonts.

+ +

Now that you are well-equipped, you should be able to see this inline equation with varying accents: x ^ + x⁢y ^ + x⁢y⁢z ^ . Next to it is this tiny formula, det | a c b d | = a d - b c , which can also be typeset in displaystyle as det | a b c d | = a d - b c .

+ +

Mathematical typesetting is picky. MathML in Mozilla aims at complying with the MathML specification so thatWhat You See Is What You Markup, or to put it another wayWhat You See Is What You Made, or in short "WYSIWYM". The difference between these two is in the markup! ( ... ( ( a 0 + a 1 ) n 1 + a 2 ) n 2 + ... + a p ) n p ( ... ( ( a 0 + a 1 ) n 1 + a 2 ) n 2 + ... + a p ) n p

+ +

The roots of this bold equation y 3 + p y + q = 0 are also bold y = - q 2 + q 2 4 + p 3 27 2 3 + - q 2 - q 2 4 + p 3 27 2 3 .

+ +

As for the roots of the equation a x 2 + b x + c = 0 , click anywhere in the yellow area to zoom-in/zoom-out:

+ +
+

Zoomable Math

+ +

HTML Content

+ +
    <p>
+      <math display="block">
+        <mstyle id="zoomableMath" mathbackground="yellow">
+          <mrow>
+            <mi>x</mi>
+            <mo>=</mo>
+            <mfrac>
+              <mrow>
+                <mrow>
+                  <mo>-</mo>
+                  <mi>b</mi>
+                </mrow>
+                <mo>&#xB1;</mo>
+                <msqrt>
+                  <mrow>
+                    <msup>
+                      <mi>b</mi>
+                      <mn>2</mn>
+                    </msup>
+                    <mo>-</mo>
+                    <mrow>
+                      <mn>4</mn>
+                      <mi>a</mi>
+                      <mi>c</mi>
+                    </mrow>
+                  </mrow>
+                </msqrt>
+              </mrow>
+              <mrow>
+                <mn>2</mn>
+                <mi>a</mi>
+              </mrow>
+            </mfrac>
+          </mrow>
+        </mstyle>
+      </math>
+    </p>
+
+
+ +

JavaScript Content

+ +
      function zoomToggle()
+      {
+      if (this.hasAttribute("mathsize")) {
+      this.removeAttribute("mathsize");
+      } else {
+      this.setAttribute("mathsize", "200%");
+      }
+      }
+
+      function load()
+      {
+      document.getElementById("zoomableMath").
+      addEventListener("click", zoomToggle, false);
+      }
+
+      window.addEventListener("load", load, false);
+
+ +

{{ EmbedLiveSample('Zoomable_Math') }}

+ +

Consider an interesting markup like this { u t + f ( u ) x = 0 u ( 0 , x ) = { u - if  x < 0 u + if  x > 0 or other complex markups like these Ell ^ Y ( Z ; z , τ ) := ∫ Y ( ∏ l ( y l 2 π i ) θ ( y l 2 π i - z ) θ ′ ( 0 ) θ ( - z ) θ ( y l 2 π i ) ) × ( ∏ k θ ( e k 2 π i - ( α k + 1 ) z ) θ ( - z ) θ ( e k 2 π i - z ) θ ( - ( α k + 1 ) z ) ) π ( n ) = ∑ m = 2 n ⌊ ( ∑ k = 1 m - 1 ⌊ ( m / k ) / ⌈ m / k ⌉ ⌋ ) - 1 ⌋ ‖ ϕ ‖ W s k ( Ω g ) ≝ ( ∑ | α | ≦ k ∂ α ϕ ∂ ξ α L s ( Ω g ) s ) 1 / s

+ +

For more examples, refer to links on the MathML Project page, and if you are building your own Mozilla binary, see the directorymozilla/layout/mathml/tests.

+ +

Now, what next? As you try out MathML in Mozilla, what to do with those few things that appear to you not to work as per the MathML spec? Or what about those things that just seem itchy, and that you wish could be done just a little better? Or what about those things that were working before and are not working anymore (a.k.a. regressions)? In either case, head over to Bugzilla to report the discrepancies. Bugzilla has a big memory for these things, and besides, how would your problems be fixed if they are not reported?!

+ +

Getting involved is part of your contribution towards enriching Gecko with an elegant standards-compliant MathML renderer. Your feedback can be manifested by putting MathML content on the web, reporting bugs in Bugzilla, and, if you can help with code, inspecting/improving the current code, and/or picking up an item in the ToDo list.

+ +
 
diff --git a/files/de/mozilla/mobile/index.html b/files/de/mozilla/mobile/index.html new file mode 100644 index 0000000000..b3a3dc1803 --- /dev/null +++ b/files/de/mozilla/mobile/index.html @@ -0,0 +1,25 @@ +--- +title: Mobil +slug: Mozilla/Mobile +tags: + - Mozilla + - mobil +translation_of: Mozilla/Mobile +--- +

Firefox OS

+ +

Firefox OS ist ein Open Source Betriebssystem, welches Linux und Mozilla's Gecko Rendering Engine verwendet um eine Benutzeroberfläche und viele Anwendungen bereit zu stellen, die komplett in HTML, CSS und JavaScript geschrieben sind.

+ +

Informiere Dich darüber wie Firefox OS installiert wird und wie Apps für Firefox OS entwickelt werden.

+ +

Firefox für Android

+ +

Firefox für Android ist Mozilla's Web Browser für Android-Geräte. Firefox für Android wurde vor kurzem komplett überarbeitet um Android's natives User Interface zu nutzen und um es schneller, schlanker und besser anpassbar zu machen. Es unterstützt hardware-nahe APIs um z.B. auf die Kamera und die Telefonfunktionen zugreifen zu können.

+ +

Informiere Dich darüber wie Du beim Aufbau von Firefox für Android helfen kannst, wie die APIs benutzt werden und wie mobile Add Ons entwickelt werden.

+ +

Mobile Web Entwicklung

+ +

Mobile Geräte haben deutlich andere Hardware-Voraussetzungen als PCs oder Laptops und viele der genutzen APIs sind noch nicht standardisiert.

+ +

Informiere Dich darüber wie Web-Seiten entwickelt werden, die auf Mobil-Geräten gut aussehen und erfahre mehr über die neuen Möglichkeiten dieser Technologien. Lerne wie Du sicherstellen kannst, dass Deine Web-Seiten auf verschiedenen Browsern gut funktionieren.

diff --git a/files/de/mozilla/mobile/viewport_meta_tag/index.html b/files/de/mozilla/mobile/viewport_meta_tag/index.html new file mode 100644 index 0000000000..c17554471a --- /dev/null +++ b/files/de/mozilla/mobile/viewport_meta_tag/index.html @@ -0,0 +1,86 @@ +--- +title: Using the viewport meta tag to control layout on mobile browsers +slug: Mozilla/Mobile/Viewport_meta_tag +translation_of: Mozilla/Mobile/Viewport_meta_tag +--- +

Hintergrund

+ +

 

+ +

Der {{glossary("viewport")}} des Browsers ist der Bereich des Fensters, in dem Webinhalte zu sehen sind. Dies ist oft nicht die gleiche Größe wie die komplette gerenderte Seite. In diesem Fall stellt der Browser Scrollbars zur Verfügung, mit denen der Benutzer umherscrollen und auf alle Inhalte zugreifen kann.

+ +

Geräte mit schmalem Display (z.B. Handys) rendern Seiten in einem virtuellen Fenster oder Ansichtsfenster, das normalerweise breiter als der Bildschirm ist, und verkleinern dann das gerenderte Ergebnis, so dass es auf einmal zu sehen ist. Die Benutzer können dann schwenken und zoomen, um verschiedene Bereiche der Seite zu sehen. Wenn beispielsweise ein mobiler Bildschirm eine Breite von 640px hat, können Seiten mit einem virtuellen Ansichtsfenster von 980px gerendert und dann verkleinert werden, um in den 640px-Bereich zu passen.

+ +

Dies geschieht, weil viele Seiten nicht mobil optimiert sind und bei einer kleinen Ansichtsfensterbreite brechen (oder zumindest schlecht aussehen). Dieses virtuelle Ansichtsfenster ist eine Möglichkeit, nicht-mobile optimierte Seiten auf schmalen Bildschirmen besser aussehen zu lassen.

+ +

Enter viewport meta tag

+ +

However, this mechanism is not so good for pages that are optimized for narrow screens using media queries — if the virtual viewport is 980px for example, media queries that kick in at 640px or 480px or less will never be used, limiting the effectiveness of such responsive design techniques.

+ +

To mitigate this problem, Apple introduced the "viewport meta tag" in Safari iOS to let web developers control the viewport's size and scale. Many other mobile browsers now support this tag, although it is not part of any web standard. Apple's documentation does a good job explaining how web developers can use this tag, but we had to do some detective work to figure out exactly how to implement it in Fennec. For example, Safari's documentation says the content is a "comma-delimited list," but existing browsers and web pages use any mix of commas, semicolons, and spaces as separators.

+ +

Learn more about viewports in different mobile browsers in A Tale of Two Viewports at quirksmode.org.

+ +

Viewport basics

+ +

A typical mobile-optimized site contains something like the following:

+ +
<meta name="viewport" content="width=device-width, initial-scale=1">
+ +

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

+ +

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

+ +

A pixel is not a pixel

+ +

In recent years, screen resolutions have risen to the size that individual pixels are hard to distinguish with the human eye. For example, recent smartphones generally have a 5-inch screens with resolutions upwards of 1920—1080 pixels (~400 dpi). Because of this, many browsers can display their pages in a smaller physical size by translating multiple hardware pixels for each CSS "pixel". Initially this caused usability and readability problems on many touch-optimized web sites. Peter-Paul Koch wrote about this problem in A pixel is not a pixel.

+ +

On high dpi screens, pages with initial-scale=1 will effectively be zoomed by browsers. Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution. To get sharper images on these screens, web developers may want to design images – or whole layouts – at a higher scale than their final size and then scale them down using CSS or viewport properties. This is consistent with the CSS 2.1 specification, which says:

+ +
+

If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length.

+
+ +

For web developers, this means that the size of a page is much smaller than the actual pixel count and browsers may size their layouts and images accordingly. But remember that not all mobile devices are the same width; you should make sure that your pages work well in a large variation of screen sizes and orientations.

+ +

The default pixel ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.

+ +

Viewport width and screen width

+ +

Sites can set their viewport to a specific size. For example, the definition "width=320, initial-scale=1" can be used to fit precisely onto a small phone display in portrait mode. This can cause problems when the browser doesn't render a page at a larger size. To fix this, browsers will expand the viewport width if necessary to fill the screen at the requested scale. This is especially useful on large-screen devices like the iPad. (Allen Pike's Choosing a viewport for iPad sites has a good explanation for web developers.)

+ +

For pages that set an initial or maximum scale, this means the width property actually translates into a minimum viewport width. For example, if your layout needs at least 500 pixels of width then you can use the following markup. When the screen is more than 500 pixels wide, the browser will expand the viewport (rather than zoom in) to fit the screen:

+ +
<meta name="viewport" content="width=500, initial-scale=1">
+ +

Other attributes that are available are minimum-scale, maximum-scale, and user-scalable. These properties affect the initial scale and width, as well as limiting changes in zoom level.

+ +

Not all mobile browsers handle orientation changes in the same way. For example, Mobile Safari often just zooms the page when changing from portrait to landscape, instead of laying out the page as it would if originally loaded in landscape. If web developers want their scale settings to remain consistent when switching orientations on the iPhone, they must add a maximum-scale value to prevent this zooming, which has the sometimes-unwanted side effect of preventing users from zooming in:

+ +
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
+
+ +

Common viewport sizes for mobile and tablet devices

+ +

If you want to know what mobile and tablet devices have which viewport widths, there is a comprehensive list of mobile and tablet viewport sizes here. This gives information such as viewport width on portrait and landscape orientation as well as physical screen size, operating system and the pixel density of the device.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Device', '#viewport-meta', '<meta name="viewport">')}}{{Spec2('CSS3 Device')}}Non-normatively describes the Viewport META element
+ +

There is clearly demand for the viewport meta tag, since it is supported by most popular mobile browsers and used by thousands of web sites. It would be good to have a true standard for web pages to control viewport properties. As the standardization process proceeds, we at Mozilla will work to keep up to date with any changes.

diff --git a/files/de/mozilla/performance/index.html b/files/de/mozilla/performance/index.html new file mode 100644 index 0000000000..1127358db7 --- /dev/null +++ b/files/de/mozilla/performance/index.html @@ -0,0 +1,145 @@ +--- +title: Performance +slug: Mozilla/Performance +tags: + - Add-ons + - Debugging + - Development + - Mozilla + - NeedsTranslation + - Performance + - TopicStub +translation_of: Mozilla/Performance +--- +

The articles linked to from here will help you improve performance, whether you're developing core Mozilla code or an add-on.

+ + + + + + + + +
+

Documentation

+ +
+
Reporting a Performance Problem
+
A user friendly guide to reporting a performance problem. A development environment is not required.
+
Benchmarking
+
Tips on generating valid performance metrics.
+
Performance best practices in extensions
+
A performance "best practices" guide for extension developers.
+
Measuring Add-on Startup Performance
+
A guide for add-on developers on how to set up a performance testing environment.
+
XUL School: Add-on Performance
+
Tips for add-on developers to help them avoid impairing application performance.
+
GPU performance
+
Tips for profiling and improving performance when using a GPU.
+
Scroll-Linked Effects
+
Information on scroll-linked effects, their effect on performance, related tools, and possible mitigation techniques.
+
Automated Performance Testing and Sheriffing
+
Information on automated performance testing and sheriffing at Mozilla.
+
Best practices for Front-end Engineers
+
Tips for reducing impacts on browser performance in front-end code.
+
+ +

View all pages tagged with "Performance"...

+ +

Memory profiling and leak detection tools

+ +
+
The Developer Tools "Memory" panel
+
The memory panel in the devtools supports taking heap snapshots, diffing them, computing dominator trees to surface "heavy retainers", and recording allocation stacks.
+
+ +
+
about:memory
+
about:memory is the easiest-to-use tool for measuring memory usage in Mozilla code, and is the best place to start. It also lets you do other memory-related operations like trigger GC and CC, dump GC & CC logs, and dump DMD reports. about:memory is built on top of Firefox's memory reporting infrastructure.
+
DMD
+
DMD is a tool that identifies shortcomings in about:memory's measurements, and can also do multiple kinds of general heap profiling.
+
Are We Slim Yet
+
areweslimyet.com (a.k.a. AWSY) is a memory usage and regression tracker.
+
BloatView
+
BloatView prints per-class statistics on allocations and refcounts, and provides gross numbers on the amount of memory being leaked broken down by class. It is used as part of Mozilla's continuous integration testing.
+
Refcount tracing and balancing
+
Refcount tracing and balancing are ways to track down leaks caused by incorrect uses of reference counting. They are slow and not particular easy to use, and thus most suitable for use by expert developers.
+
GC and CC logs
+
GC and CC logs can be generated and analyzed to in various ways. In particular, they can help you understand why a particular object is being kept alive.
+
Valgrind
+
Valgrind is a tool that detects various memory-related problems at runtime, including leaks. Valgrind is used as part of Mozilla's continuous integration testing, though the coverage is limited because Valgrind is slow.
+
LeakSanitizer
+
LeakSanitizer (a.k.a. LSAN) is similar to Valgrind, but it runs faster because it uses static source code instrumentation. LSAN is part of Mozilla's continuous integration testing, with most tests running through it as part of the AddressSanitizer (a.k.a. ASAN) test jobs.
+
Apple tools
+
Apple provides some tools for Mac OS X that report similar problems to those reported by LSAN and Valgrind. The "leaks" tool is not recommended for use with SpiderMonkey or Firefox, because it gets confused by tagged pointers and thinks objects have leaked when they have not (see bug 390944).
+
Leak Gauge
+
Leak Gauge is a tool that can be used to detect certain kinds of leaks in Gecko, including those involving documents, window objects, and docshells.
+
LogAlloc
+
LogAlloc is a tool that dumps a log of memory allocations in Gecko. That log can then be replayed against Firefox's default memory allocator independently or through another replace-malloc library, allowing the testing of other allocators under the exact same workload.
+
Memory Profiler
+
The memory profiler samples allocation events and provides different views to analyze the allocation characteristic.
+
+ +

See also the documentation on Leak-hunting strategies and tips.

+ 		+

Profiling and performance tools

+ +
+
Profiling with the Developer Tools Profiler
+
The profiler built into the developer tools has a high-level waterfall, detailed call tree, allocations and GC profiling, and flame graphs. It is available on all platforms and release channels, and also supports remote profiling b2g and Fennec.
+
+ +
+
Profiling with the Gecko Profiler {{ gecko_minversion_inline("16.0") }}
+
The Gecko Profiler is a good tool to start with, particularly for understanding where time is spent within C++ code in Firefox.
+
Profiling with Instruments
+
How to use Apple's Instruments tool to profile Mozilla code.
+
Profiling with Xperf
+
How to use Microsoft's Xperf tool to profile Mozilla code.
+
Profiling with Concurrency Visualizer
+
How to use Visual Studio's Concurrency Visualizer tool to profile Mozilla code.
+
Profiling with Zoom
+
Zoom is a profiler for Linux done by the people who made Shark
+
Measuring performance using the PerfMeasurement.jsm code module {{ gecko_minversion_inline("2.0") }}
+
Using PerfMeasurement.jsm to measure performance data in your JavaScript code.
+
Adding a new Telemetry probe
+
Information on how to add a new measurement to the Telemetry performance-reporting system
+
Profiling JavaScript with Shark (obsolete - replaced by Instruments)
+
How to use the Mac OS X Shark profiler to profile JavaScript code in Firefox 3.5 or later.
+
Profiling with Shark (obsolete - replaced by Instruments)
+
How to use Apple's Shark tool to profile Mozilla code.
+
Investigating CSS Performance
+
How to figure out why restyle is taking so long
+
+ +

Power profiling

+ +
+
Power profiling overview
+
This page provides an overview of relevant information, including details about hardware, what can be measured, and recommended approaches. It should be the starting point for anybody new to power profiling.
+
tools/power/rapl (Mac, Linux)
+
tools/power/rapl is a command-line utility in the Mozilla codebase that uses the Intel RAPL interface to gather direct power estimates for the package, cores, GPU and memory.
+
powermetrics (Mac-only)
+
powermetrics is a command-line utility that gathers and displays a wide range of global and per-process measurements, including CPU usage, GPU usage, and various wakeups frequencies.
+
TimerFirings logging (All platforms)
+
TimerFirings logging is a built-in logging mechanism that prints data on every time fired.
+
Activity Monitor, Battery Status Menu and top (Mac-only)
+
The battery status menu, Activity Monitor and top are three related Mac tools that have major flaws but often consulted by users, and so are worth understanding.
+
Intel Power Gadget (Windows, Mac, Linux)
+
Intel Power Gadget provides real-time graphs for package and processor RAPL estimates. It also provides an API through which those estimates can be obtained.
+
perf (Linux-only)
+
perf is a powerful command-line utility that can measure many different things, including energy estimates and high-context measurements of things such as wakeups.
+
turbostat (Linux-only)
+
turbostat is a command-line utility that gathers and displays various power-related measurements, with a focus on per-CPU measurements such as frequencies and C-states.
+
powertop (Linux-only)
+
powertop is an interactive command-line utility that gathers and displays various power-related measurements.
+
+ + + +
+
JavaScript, XPCOM, Developing Mozilla, Extensions, Addons
+
+
+ +

 

diff --git a/files/de/mozilla/persona/bootstrapping_persona/index.html b/files/de/mozilla/persona/bootstrapping_persona/index.html new file mode 100644 index 0000000000..f4405da59f --- /dev/null +++ b/files/de/mozilla/persona/bootstrapping_persona/index.html @@ -0,0 +1,31 @@ +--- +title: Bootstrapping Persona +slug: Mozilla/Persona/Bootstrapping_Persona +tags: + - ich kann nur deutsch +translation_of: Archive/Mozilla/Persona/Bootstrapping_Persona +--- +

To be truly successful and decentralized, Persona needs support from three different groups:

+ +

This creates a chicken-and-egg problem: none of these groups would significantly benefit unless there was a critical mass of users, but a distributed system can't get a critical mass of users without support from the above groups.

+

To solve this problem, https://login.persona.org hosts three resources:

+
    +
  1. A fallback Identity Provider, which vouches for users whose email providers don't support Persona.
    2. +
  2. A cross-browser, JavaScript implementation of the navigator.id APIs for browsers without native support.
    3. +
  3. A hosted verification API to make it easy for sites to verify user credentials.
    4. +
+

Together, this allows web sites to offer Persona to users regardless of browser and without email providers needing to get involved.

+

These services are temporary, and the Persona system is designed such that they transparently and automatically drop away as native support gets added to browsers and email providers. Thus, they will become less relevant as Persona matures, and may eventually be removed all together. At that point, https://login.persona.org won't feature at all in the Persona system.

+

Fallback Identity Provider

+

Any domain can become an Identity Provider as long as relying parties are willing to trust the certificates issued by that domain. We expect email providers to act as an IdPs for the addresses they administer, making the user experience of Persona seamless for those users.  It allows the user to leverage their existing relationship with the email provider when authenticating at other sites.

+

However, email providers won't become IdPs until there is significant demand from their users. In the meantime, Mozilla operates a fallback IdP at https://login.persona.org. This fallback allows users to sign into sites with their existing email address, regardless of whether or not the email provider supports Persona. The fallback IdP will certify email addresses from any domain using its own authentication flow and its own password, so long as the user is able to prove control of an address by clicking a link in a verification email.

+

Once an email provider supports Persona natively, its users will transparently begin use it instead of the fallback IdP.

+

Cross-browser API Library

+

For Persona to work, the user's browser must support the navigator.id API. Eventually, browsers will add native support for these APIs, but until then a cross-browser implementation is available at https://login.persona.org/include.js. By including this file, web sites can already begin using Persona. Once native implementations of the API are available, the library will automatically defer to those.

+

Remote verification service

+

At https://login.persona.org Mozilla hosts a remote verification service that web sites can use to verify identity assertions sent from users. This makes it simpler for web sites to support Persona as it takes care of parsing the assertion and cryptographically verifying user identities.

+

Once the Persona data formats stabilize, verification will most likely be done locally on each site's server. This transition is especially important for user privacy, since it will make it impossible for the fallback IdP to track its users. Even with remote verification, users of native IdPs can't be tracked by that IdP.

diff --git a/files/de/mozilla/persona/branding/index.html b/files/de/mozilla/persona/branding/index.html new file mode 100644 index 0000000000..f35f03575c --- /dev/null +++ b/files/de/mozilla/persona/branding/index.html @@ -0,0 +1,42 @@ +--- +title: Branding resources +slug: Mozilla/Persona/branding +translation_of: Archive/Mozilla/Persona/User_interface_guidelines +--- +

Einloggen mit Persona Buttons

+

Bilder

+

Der "Einloggen" Button ist in drei Versionen und drei Farben erhältlich:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Einloggen mit EmailadresseEinloggen mit PersonaEinloggen
Schwarz
Blau
Rot
+

CSS-Basis

+

Sawyer Hollenshead erzeugte ein Set exzellenter CSS-basierter Buttons. Download (.zip)

+

Mehr Info

+

Mehr Informationen über Persona's visuelles Design bei Sean Martell's style primer.

diff --git a/files/de/mozilla/persona/browser_compatibility/index.html b/files/de/mozilla/persona/browser_compatibility/index.html new file mode 100644 index 0000000000..716b5c3c46 --- /dev/null +++ b/files/de/mozilla/persona/browser_compatibility/index.html @@ -0,0 +1,84 @@ +--- +title: Browser Kompatibilität +slug: Mozilla/Persona/Browser_compatibility +translation_of: Archive/Mozilla/Persona/Browser_compatibility +--- +

Unterstützte Browser

+

Persona wird mit den folgenden Browsern entwickelt und getestet. Dank Personas plattformübergreifender JavaScript Bibliothek benötigen Nutzer keine Add-Ons, um Persona zu nutzen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Desktop Browser
Internet Explorer8.0*, 9.0†, 10.0** (siehe Kompatibilitätsmodus)
FirefoxAktuelle Version, Beta, Aurora, Nightly, und Extended Support Versionen, vorige stabile Version
ChromeLetzte stabile Version
SafariLetzte stabile Version
OperaLetzte stabile Version‡
iOS Browser
Mobile SafariiOS 5.x — 6.x
Android Browser
Standardbrowser2.2 — 4.x
FirefoxAktuelle Version, Beta, Aurora, Nightly, und Extended Support Versionen, vorige stabile Version
ChromeLetzte stabile Version
+

*: für Windows XP. †: für Windows Vista und Windows 7. **Windows 8.  ‡: As time allows.

+

Nicht unterstützte Browser

+ +

Internet Explorer Kompatibilitätsmodus

+

Ab Version 8.0 unterstützt der Internet Explorer eine Funktion namens Kompatibilitätsmodus, die zur Emulation älterer Internet Explorer Versionen beim Rendern einer Seite dient. Die Funktion kann über drei verschiedene Wege kontrolliert werden:

+
    +
  1. Als lokale Einstellung im Browser
    2. +
  2. Basierend auf der Präsenz und dem Inhalt der DOCTYPE Deklaration auf der Seite.
    3. +
  3. Als "X-UA-Compatible" header anstatt eines HTTP headers oder als <meta> tag auf einer Seite. Diese Mehtode überschreibt die beiden ersten.
    4. +
+

Weil nur Internet Explorer 8.0 und neuer von Persona unterstützt werden, werden Internet Explorer, die eine ältere Version emulieren, nicht mit Persona funktionieren. Dies ist typisch für einen der folgenden Gründe:

+ +

Für weitere Informationen siehe "Understanding Compatibility Modes in Internet Explorer 8" und "IE8 and IE9 Complications".

+

Andere Browser

+

Obwohl nicht explizit unterstützt, jeder Browser der {{ domxref("window.postMessage()") }} und {{ domxref("Storage", "localStorage") }} unterstützt sollte funktionieren. Diese APIs werden seit März 2010 von allen bekannten Browsern untertützt.

+

Bekannte Fehler

+ diff --git a/files/de/mozilla/persona/index.html b/files/de/mozilla/persona/index.html new file mode 100644 index 0000000000..0a8aa84850 --- /dev/null +++ b/files/de/mozilla/persona/index.html @@ -0,0 +1,133 @@ +--- +title: Persona +slug: Mozilla/Persona +tags: + - Persona +translation_of: Archive/Mozilla/Persona +--- +
+

Bleibe informiert oder bekomme Hilfe!

+ +

Verfolge unseren Blog, trete unserer Mailingliste bei oder finde uns in #identity in IRC.

+
+ +

Mozilla Persona ist ein browserunabhängiges Login-System für das Web, das einfach zu verwenden und einfach einzusetzen ist. Es funktioniert mit allen wichtigen Browsern und du kannst noch heute beginnen.

+ +

Warum solltest du Persona auf deiner Seite verwenden?

+ +
    +
  1. Persona löst Webseiten-spezifische Passwörter vollständig ab, wodurch es Benutzer und Websites von der Last der Erstellung, Verwaltung und sicheren Speicherung von Passwörtern befreit.
    2. +
  2. Persona ist einfach zu bedienen. Mit nur zwei Klicks kann sich ein Persona-Benutzer bei einer neuen Website wie Voost registrieren und dabei alle Probleme bei der Account-Erstellung umgehen.
    3. +
  3. Persona ist einfach zu implementieren. Entwickler können Persona zu einer Website in einem einzigen Nachmittag hinzufügen.
    4. +
  4. Das Beste von allem, es gibt kein Lock-in. Entwickler erhalten eine verifizierte E-Mail-Adresse für alle ihre Benutzer und Benutzer können eine beliebige E-Mail-Adresse mit Persona verwenden.
    5. +
+ +

Und Persona wird stetig besser: Es basiert auf einem offenen, dezentralisierten Protokoll, das dafür ausgelegt ist, eine direkte Integration in Browser und native Unterstützung von E-Mail-Providern zu erlauben. Webseiten die Persona heute implementieren werden diese Verbesserungen automatisch in Erfahrung bringen, ohne irgendeinen Code ändern zu müssen.

+ +
Hinweis: Persona befindet sich in aktiver Entwicklung. Verfolge unseren Blog um von neuen Funktionen zu erfahren oder trete unserer Mailingliste bei und gib uns dein Feedback!
+ +

Verwenden von Persona auf Ihrer Webseite

+ + + + + + + + + + + + +
+

Der Einstieg

+ +
+
Warum Persona?
+
+ +

Sehen Sie, wieso Persona entwickelt wurde und warum es so toll ist! Und auch den Vergleich mit anderen Diensten scheuen wir uns nicht.

+ +
+
Schnellstart
+
Ein Schnellrundgang zeigt Ihnen, wie Sie Persona auf Ihrer Webseite integrieren können.
+
+ 		+

Persona API Referenz

+ +
+
Die navigator.id API-Referenz
+
Referenz für das navigator.id Objekt, welches Webentwickler nutzen können, um Persona in Webseiten einzubinden.
+
Verifikations-API-Referenz
+
Die Referenz für die remote verification API finden Sie auf https://verifier.login.persona.org/verify.
+
+
+

Leitfaden

+ +
+
Sicherheitsaspekte
+
Praktiken und Techniken um sicherzustellen, dass Ihre Persona-Einbindung sicher ist.
+
Browserkompatiblität
+
Erfahre ganau, welche Browser Persona unterstützen.
+
Internationalisierung
+
Erfahre, wie Persona mit unterschiedlichen Sprachen umgeht.
+
Leitfaden für Website-Entwickler
+
Tipps von Web-Seiten, die eine Unterstützung für PERSONA bereits anbieten
+
+ 		+

Ressourcen

+ +
+
Libraries und Plugins
+
Finde eine drop-in Bibliothek für deine bevorzugte Programmiersprache, Web-Framework, Blog oder Content-Management-System.
+
Das Persona Kochbuch
+
Beispiel Sourcecode für Persona-Seiten. Beinhaltet Schnipsel in PHP, Node.JS und mehr.
+
Branding resources
+
Anmelde-Buttons und andere Grafiken, die dabei helfen Persona Ihren Nutzern zu präsentieren.
+
+
+ +

 

+ + + + + + + + +
+

Informationen für Identitäts-Provider

+ +

Wenn du ein E-Mail Betreiber oder ein Idäntitäts-Provider bist, dann schau dir die folgenden Links an in denen man ein Persona Idäntitäts-Provider werden kann.

+ +
+
IdP Überblick
+
Ein hoher Rang von Persona Idäntitäts-Providern.
+
Implementieren eines IdP
+
Ein detaillierter Leitfaden zu den technischen Details, wie man ein IdP wird.
+
.well-known/browserid
+
Ein Überblick über die Struktur und den Zweck der .well-known/browserid Datei, welche IdPs benutzen, um auf deren Unterstützung für das Protokoll hinzuweisen.
+
+ 		+

Das Persona Projekt

+ +
+
Glossary
+
Die BrowserID und Persona Fachsprache.
+
FAQ
+
Antworten zu gängigen Fragen.
+
Überblick des Protokolls
+
Gewinnen Sie einen Überblick über das verwendete BrowserID-Protokoll.
+
Kryptographie
+
Ein Blick auf die kryptographischen Konzepte und Sicherheitsfunktionen hinter Persona und BrowserID.
+
Die Spezifikation
+
Tiefe technische Details gibt es hier.
+
Die Persona Webseite
+
Damit Persona perfekt funktionieren kann verwenden wir drei Dienste auf: https://login.persona.org: Eine Rückfall-System für die Anmeldun, eine browser- und systemunabhängige Implementierung der {{ domxref("navigator.id") }} APIs und natürlich einen Verifizierungs-Dienst.
+
Der Persona Quellcode
+
Der Code hinter der Persona-Webseite liegt in einem Repository bei GitHub. Helfer sind immer ❤ Willkommen!
+
+
+ +

 

diff --git a/files/de/mozilla/persona/protocol_overview/index.html b/files/de/mozilla/persona/protocol_overview/index.html new file mode 100644 index 0000000000..44c6eab3da --- /dev/null +++ b/files/de/mozilla/persona/protocol_overview/index.html @@ -0,0 +1,61 @@ +--- +title: Protokoll Überblick +slug: Mozilla/Persona/Protocol_Overview +translation_of: Archive/Mozilla/Persona/Protocol_Overview +--- +

Persona baut auf dem BrowserID Protokoll auf. Diese Seite beschreibt das BrowserID Protokoll auf hohem Niveau.

+

Akteure

+

Das Protokoll umfasst drei Akteure:

+ +

Persona und das BrowserID Protokoll benutzen E-mail Adressen als Identität, daher ist es üblich, dass der E-mail Provider die Rolle des IdPs einnimmt.

+

Mozilla betreibt einen "fallback IdP", so dass Benutzer jede E-mail Adresse für Persona benutzen können, sogar wenn eine Domain keinen IdP Status besitzt.

+

Protocol Steps

+

There are three distinct steps in the protocol:

+
    +
  1. User Certificate Provisioning
    2. +
  2. Assertion Generation
    3. +
  3. Assertion Verification
    4. +
+

As a prerequisite, the user should have an active identity (email address) that they wish to use when logging in to websites. The protocol does not require that IdP-backed identities are SMTP-routable, but it does require that identities follow the user@domain format.

+

User Certificate Provisioning

+

In order to sign into an RP, a user must be able to prove ownership of their preferred email address. The foundation of this proof is a cryptographically signed certificate from an IdP certifying the connection between a browser's user and a given identity within the IdP's domain.

+

Because Persona uses standard public key cryptography techniques, the user certificate is signed by the IdP's private key and contains:

+ +

The user's browser generates a different keypair for each of the user's email addresses, and these keypairs are not shared across browsers. Thus, a user must obtain a fresh certificate whenever one expires, or whenever using a new browser or computer. Certificates must expire within 24 hours of being issued.

+

When a user selects an identity to use when signing into an RP, the browser checks to see if it has a fresh user certificate for that address. If it does, this step is complete and the browser continues with the assertion generation step below. If the browser does not have a fresh certificate, it attempts to obtain one from the domain associated with the chosen identity.

+
    +
  1. The browser fetches the /.well-known/browserid support document over SSL from the identity's domain.
    2. +
  2. Using information from the support document, the browser passes the user's email address and associated public key to the IdP and requests a signed certificate.
    3. +
  3. If necessary, the user is asked to sign into the IdP before provisioning proceeds.
    4. +
  4. The IdP creates, signs, and gives a user certificate to the user's browser.
    5. +
+

With the certificate in hand, the browser can continue with generating an identity assertion and signing into an RP.

+

user-certificate-provisioning.png

+

Assertion Generation

+

The user certificate establishes a verifiable link between an email address and a public key. However, this is alone not enough to log into a website: the user still has to show their connection to the certificate by proving ownership of the private key.

+

In order to prove ownership of a private key, the user's browser creates and signs a new document called an "identity assertion." It contains:

+ +

The browser then presents both the user certificate and the identity assertion to the RP for verification.

+

Assertion Verification

+

The combination of user certificate and identity assertion is sufficient to confirm a user's identity.

+

First, the RP checks the domain and expiration time in the assertion. If the assertion is expired or intended for a different domain, it's rejected. This prevents malicious re-use of assertions.

+

Second, the RP validates the signature on the assertion with the public key inside the user certificate. If the key and signature match, the RP is assured that the current user really does possess the key associated with the certificate.

+

Last, the RP fetches the IdP's public key from its /.well-known/browserid document and verifies that it matches the signature on the user certificate. If it does, then the RP can be certain that the certificate really was issued by the domain in question.

+

Once verifying that this is a current login attempt for the proper RP, that the user certificate matches the current user, and that the user certificate is legitimate, the RP is done and can authenticate the user as the identity contained in the certificate.

+

assertion-generation-and-verify.png

+

The Persona Fallback IdP

+

What if a user's email provider doesn't support Persona? In that case, the provisioning step would fail. By convention, the user's browser handles this by asking a trusted third party, https://login.persona.org/, to certify the user's identity on behalf of the unsupported domain. After demonstrating ownership of the address, the user would then receive a certificate issued by the fallback IdP, login.persona.org, rather than the identity's domain.

+

RPs follow a similar process when validating the assertion: the RP would ultimately request the fallback IdP's public key in order to verify the certificate.

diff --git a/files/de/mozilla/persona/schnellstart/index.html b/files/de/mozilla/persona/schnellstart/index.html new file mode 100644 index 0000000000..31a45b7553 --- /dev/null +++ b/files/de/mozilla/persona/schnellstart/index.html @@ -0,0 +1,201 @@ +--- +title: Schnellstart +slug: Mozilla/Persona/Schnellstart +translation_of: Archive/Mozilla/Persona/Quick_Setup +--- +

Sie benötigen nur 5 Schritte um Persona ihrer Webseite hinzuzufügen:

+
    +
  1. Binden Sie die Persona JavaScript Bibliothek in ihre Webseite ein.
    2. +
  2. Fügen Sie jeweils einen "Login" und "Logout" Button hinzu.
    3. +
  3. Achten Sie auf die Aktionen der Nutzer.
    4. +
  4. Überprüfen Sie die Informationen des Nutzers.
    5. +
  5. Beachten Sie die Informationen für Sicheres Einbinden.
    6. +
+

Sie sollten in der Lage sein, Persona an einem einzigen Nachmittag zu implementieren. Zuvor sollten Sie sich allerdings in den Persona notices Newsletter eintragen. Der Newsletter versendet nur sicherheitsrelevante E-Mails.

+

Schritt 1: Einbinden der Persona Bibliothek

+

Persona ist Browser-neutral programmiert und unterstützt alle großen Desktop- und Mobilbrowser.

+

Wir erwarten für die Zukunft, dass die Browser Persona direkt und ohne externe Bibliothek unterstützten. Solange dies nicht der Fall ist, stellen wir eine JavaScript Bibliothek bereit, die die Benutzeroberfläche und den Client-seitigen Teil des Persona-Protokolls übernimmt. Durch die Einbindung dieser Bibliothek kann sich jeder Nutzer anmelden, egal, ob sein Browser Persona direkt unterstützt, oder nicht.

+

Sobald die Bibliothek in der Seite geladen ist, sind die Persona Funktionen ({{ domxref("navigator.id.watch()", "watch()") }}, {{ domxref("navigator.id.request()", "request()") }}, und {{ domxref("navigator.id.logout()", "logout()") }}) im globalen navigator.id Knoten vorhanden.

+

Um die Persona JavaScript Bibliothek einzubinden plazieren Sie diesen script Tag am Ende der HTML-Seite:

+
<script src="https://login.persona.org/include.js"></script>
+
+

Sie müssen dies am Ende jeder Seite einfügen, die {{ domxref("navigator.id") }}  benutzen soll. Da sich Persona immer noch in der Entwicklung befindet, sollten Sie die Persona include.js Datei nicht selber bereitstellen.

+

Unterdrückung des Kompatibilitätsmodus

+

Damit Persona auch im Internet Explorer funktioniert, sollten Sie dessen Kompatibilitätsmodus unterdrücken. Dies kann auf zwei Wegen geschehen:

+ +

Für weitere Informationen schauen Sie bitte bei IE Compatibility Mode und "IE8 and IE9 Complications" vorbei.

+

Schritt 2: Hinzufügen der Login und Logout Buttons

+

Da Persona als Bestandteil der DOM API entwickelt wurde, müssen Sie Funktionen ausführen, sobald ein Nutzer auf einen der beiden Button klickt. Um den Anmelden Dialog auszuführen, sollten sie {{ domxref("navigator.id.request()") }} aufrufen. Für den Logout starten Sie bitte {{ domxref("navigator.id.logout()") }}. Notiz: Der Aufruf von {{ domxref("navigator.id.logout()", "logout()") }} muss in dem Click-Handler des Logout-Buttons ausgeführt werden.

+

Als Beispiel:

+
var signinLink = document.getElementById('signin');
+if (signinLink) {
+  signinLink.onclick = function() { navigator.id.request(); };
+}
+
+var signoutLink = document.getElementById('signout');
+if (signoutLink) {
+  signoutLink.onclick = function() { navigator.id.logout(); };
+}
+
+

Wie sollten diese Buttons aussehen? Betrachte unsere Branding Resources Seite für vorgefertigte Persona-Bilder und CSS-basierte Buttons.

+

Schritt 3: Warte auf Login und Logout Aktionen

+

Damit Persona funktioniert, musst du ihm mitteilen, wenn sich ein Nutzer an- bzw. abmeldet. Dies geschieht durch Übergabe dreier Parameter an die Funktion {{ domxref("navigator.id.watch()") }}. Die drei Parameter sind:

+
    +
  1. +

    Die E-Mail Adresse des momentan angemeldeten Nutzers, oder aber, wenn niemand angemeldet ist null Beispielsweise kannst du den Cookie auslesen, um herauszufinden, wer angemeldet ist.

    +
    2. +
  2. +

    Eine Funktion für den Fall, dass onlogin ausgelöst wird. This function is passed a single parameter, an “identity assertion,” which must be verified.

    +
    3. +
  3. +

    Eine Funktion, die aufzurufen ist, wenn onlogout ausgelöst wird. Dieser Funktion werden keine Parameter mitgegeben.

    +
    4. +
+
+
+

Beachte: Sie müssen immer beide, onlogin und onlogout übergeben, wenn Sie {{ domxref("navigator.id.watch()") }} aufrufen.

+
+
+

Wenn beispielsweise Bob angemeldet ist, müssen Sie folgendes tun:

+
var currentUser = 'bob@example.com';
+
+navigator.id.watch({
+  loggedInUser: currentUser,
+  onlogin: function(assertion) {
+    // Ein Nutzer hat sich angemeldete. Hier müssen Sie:
+    // 1. Send the assertion to your backend for verification and to create a session.
+    // 2. Aktualisiere die Oberfläche
+    $.ajax({ /* <-- This example uses jQuery, but you can use whatever you'd like */
+      type: 'POST',
+      url: '/auth/login', // This is a URL on your website.
+      data: {assertion: assertion},
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) {
+        navigator.id.logout();
+        alert("Login failure: " + err);
+      }
+    });
+  },
+  onlogout: function() {
+    // A user has logged out! Here you need to:
+    // Tear down the user's session by redirecting the user or making a call to your backend.
+    // Also, make sure loggedInUser will get set to null on the next page load.
+    // (That's a literal JavaScript null. Not false, 0, or undefined. null.)
+    $.ajax({
+      type: 'POST',
+      url: '/auth/logout', // This is a URL on your website.
+      success: function(res, status, xhr) { window.location.reload(); },
+      error: function(xhr, status, err) { alert("Logout failure: " + err); }
+    });
+  }
+});
+
+

In this example, both onlogin and onlogout are implemented by making an asynchronous POST request to your site’s backend. The backend then logs the user in or out, usually by setting or deleting information in a session cookie. Then, if everything checks out, the page reloads to take into account the new login state.

+

Note that if the identity assertion can't be verified, you should call {{ domxref("navigator.id.logout()") }}: this has the effect of telling Persona that none is currently logged in. If you don't do this, then Persona may immediately call onlogin again with the same assertion, and this can lead to an endless loop of failed logins.

+

You can, of course, use AJAX to implement this without reloading or redirecting, but that’s beyond the scope of this tutorial.

+

Here is another example, this time not using jQuery.

+
function simpleXhrSentinel(xhr) {
+    return function() {
+        if (xhr.readyState == 4) {
+            if (xhr.status == 200){
+                // reload page to reflect new login state
+                window.location.reload();
+              }
+            else {
+                navigator.id.logout();
+                alert("XMLHttpRequest error: " + xhr.status);
+              }
+            }
+          }
+        }
+
+function verifyAssertion(assertion) {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // verification of user's email address and it must arrange for the binding
+    // of currentUser to said address when the page is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/xhr/sign-in", true);
+    // see http://www.openjs.com/articles/ajax_xmlhttp_using_post.php
+    var param = "assertion="+assertion;
+    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+    xhr.setRequestHeader("Content-length", param.length);
+    xhr.setRequestHeader("Connection", "close");
+    xhr.send(param); // for verification by your backend
+
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+function signoutUser() {
+    // Your backend must return HTTP status code 200 to indicate successful
+    // sign out (usually the resetting of one or more session variables) and
+    // it must arrange for the binding of currentUser to 'null' when the page
+    // is reloaded
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/xhr/sign-out", true);
+    xhr.send(null);
+    xhr.onreadystatechange = simpleXhrSentinel(xhr); }
+
+// Go!
+navigator.id.watch( {
+    loggedInUser: currentUser,
+         onlogin: verifyAssertion,
+        onlogout: signoutUser } );
+
+

You must call navigator.id.watch() on every page with a login or logout button. To support Persona enhancements like automatic login and global logout for your users, you should call this function on every page of your site.

+

Persona will compare the email address you've passed into loggedInUser with its own knowledge of whether a user is currently logged in, and who they are. If these don't match, it may automatically invoke onlogin or onlogout on page load.

+

 

+

Step 4: Verify the user’s credentials

+

Instead of passwords, Persona uses “identity assertions,” which are kind of like single-use, single-site passwords combined with the user’s email address. When a user wants to log in, your onlogin callback will be invoked with an assertion from that user. Before you can log them in, you must verify that the assertion is valid.

+

It’s extremely important that you verify the assertion on your server, and not in JavaScript running on the user’s browser, since that would be easy to forge. The example above handed off the assertion to the site’s backend by using jQuery’s $.ajax() helper to POST it to /auth/login.

+

Once your server has an assertion, how do you verify it? The easiest way is to use a helper service provided by Mozilla. Simply POST the assertion to https://verifier.login.persona.org/verify with two parameters:

+
    +
  1. assertion: The identity assertion provided by the user.
    2. +
  2. audience: The hostname and port of your website. You must hardcode this value in your backend; do not derive it from any data supplied by the user.
    3. +
+

For example, if you’re example.com, you can use the command line to test an assertion with:

+
$ curl -d "assertion=<ASSERTION>&audience=https://example.com:443" "https://verifier.login.persona.org/verify"
+
+

If it’s valid, you’ll get a JSON response like this:

+
{
+  "status": "okay",
+  "email": "bob@eyedee.me",
+  "audience": "https://example.com:443",
+  "expires": 1308859352261,
+  "issuer": "eyedee.me"
+}
+
+

You can learn more about the verification service by reading The Verification Service API. An example /auth/login implementation, using Python, the Flask web framework, and the Requests HTTP library might look like this:

+
@app.route('/auth/login', methods=['POST'])
+def login():
+    # The request has to have an assertion for us to verify
+    if 'assertion' not in request.form:
+        abort(400)
+
+    # Send the assertion to Mozilla's verifier service.
+    data = {'assertion': request.form['assertion'], 'audience': 'https://example.com:443'}
+    resp = requests.post('https://verifier.login.persona.org/verify', data=data, verify=True)
+
+    # Did the verifier respond?
+    if resp.ok:
+        # Parse the response
+        verification_data = json.loads(resp.content)
+
+        # Check if the assertion was valid
+        if verification_data['status'] == 'okay':
+            # Log the user in by setting a secure session cookie
+            session.update({'email': verification_data['email']})
+            return 'You are logged in'
+
+    # Oops, something failed. Abort.
+    abort(500)
+
+

For examples of how to use Persona in other languages, have a look at the cookbook.

+

The session management is probably very similar to your existing login system. The first big change is in verifying the user’s identity by checking an assertion instead of checking a password. The other big change is ensuring that the user’s email address is available for use as the loggedInUser parameter to {{ domxref("navigator.id.watch()") }}.

+

Logout is simple: you just need to remove the user’s session cookie.

+

Step 5: Review best practices

+

Once everything works and you’ve successfully logged into and out of your site, you should take a moment to review best practices for using Persona safely and securely.

+

If you're making a production site, have a look at the implementor's guide, where we've collected tips for adding the kind of features often needed in real-world login systems.

+

Lastly, don’t forget to sign up for the Persona notices mailing list so you’re notified of any security issues or backwards incompatible changes to the Persona API. The list is extremely low traffic: it’s only used to announce changes which may adversely impact your site.

+

 

diff --git a/files/de/mozilla/persona/warum_persona/index.html b/files/de/mozilla/persona/warum_persona/index.html new file mode 100644 index 0000000000..337a84a544 --- /dev/null +++ b/files/de/mozilla/persona/warum_persona/index.html @@ -0,0 +1,31 @@ +--- +title: Warum Persona? +slug: Mozilla/Persona/Warum_Persona +translation_of: Archive/Mozilla/Persona/Why_Persona +--- +

 

+

Das existierende System von Benutzernamen und Paswörtern ist inakzeptabel: Von den Nutzern wird erwartet, dass sie ein neues, komplexes Passwort für jede Site und jeden Dienst erstellen und sich an dieses erinnern. Und jede Site muss das Passwort sicher speichern. Allerdings zeigen Hacker-Angriffe gerade in letzter Zeit, dass sogar namhafte Unternehmen Lücken in der Passwortsicherheit haben und die Daten ihrer Nutzer damit in Gefahr bringen.

+

Persona ist ein offenes, verteiltes, webweites Identitätssystem, das die Passworteingabe für jede Site ersetzt.  Es orientiert sich an der Benutzerfreundlichkeit und begegnet den Datenschutzmängeln von Systemen wie OpenID, ohne dabei auf die zentrale Infrastruktur zurückzugreifen wie sie beispielsweise Facebook Connect nutzt.

+

Persona macht Passwörter für jede Site überflüssig

+

Anstatt eines Passworts für jede einzelne Site, erlaubt Persona die Anmeldung mit nur zwei Klicks, nach Abschluß eines einfachen, einmaligen Vorgangs für jede Identität.  Das ist sicher, geschützt und basiert auf einem öffentlichen Schlüssel modernster Kryptografie. Statt eines Passworts erzeugt der Browser des Nuzers eine kryptografische "Idenditätserklärung", die nach wenigen Minuten abläuft und nur für eine einzelne Site gültig ist. Weil es keine seitenspezifischen Passwörter gibt, brauchen sich Websites, die Persona nutzen, nicht um die sichere Speicherung oder den potentiellen Verlust der Passwortdatenbank kümmern.

+

Der schnelle Registriervorgang reduziert außerdem den "Nutzerwiderstand" beim Besuch neuer Sites.

+

Persona Identitäten sind Email-Addressen

+

Anstatt eines freien Usernamens verwendet Persona Email-Addressen als Identitäten. Dies hat zahlreiche Vorteile sowohl für den Nutzer als auch den Entwickler:

+

Nutzervorteile bei Verwendung von Email-Adressen

+ +

Vorteile für Entwickler bei Verwendung von Email-Addressen

+ +

Ganz zu schweigen davon, dass Email ein bereits bestehendes, ausgereiftes System mit Milliarden von Konten unzähliger Anbieter darstellt.

+

Worin unterscheidet sich Persona von anderen Einmal-Zugangsanbietern?

+

Persona ist sicher, geschützt und einfach. Es schützt die Privatspähre, die Kontrolle und die Wahlfreiheit der Nutzer in einer Art, wie es andere Anbieter nicht tun oder nicht können.

+

Viele soziale Netzwerke wie Facebook and Google+ benötigen Nutzer die ihren realen Namen verwenden und schränken die Nutzer auf ein einziges Konto ein. Dadurch, dass Persona auf Email-Adressen beruht, erlaubt es den Nutzern ihre verschiedenen Arbeits-, Heim-, Schul- und andere Identitäten zu trennen.

+

Persona ist offen und dezentral: Jeder mit einer Email-Adresse kann sich bei Sites anmelden, die Persona verwenden. Zudem kann jeder seine eigene Identität hosten oder delegieren - eben genau wie Emails. Dies steht im Gegensatz zu Zugangsdiensten sozialer Netzwerke, die ein einziges, zentrales Konto benötigen.

+

Persona bietet außerdem einen neuen Ansatz um die Privatspähre der Nutzer zu schützen, indem es den Browser des Nutzers in den Mittelpunkt des Authentifzierungsprozesses stellt: Der Browser erhält Anmeldeinformationen vom Email-Anbieter des Nutzers und stellt diese Informationen der Website zur Verfügung. Der Email-Anbieter kann den Nutzer nicht nachverfolgen ("tracken"), aber Websiten können dennoch durch die kryptografisches Verifikation der Anmeldeinformationen der Identität des Nutzers vertrauen. Die meisten anderen Systeme, selbst dezentrale wie OpenID, verlangen, dass die Site "nach Hause telefoniert" bevor sie dem Nutzer die Anmeldung gestatten.

diff --git a/files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html b/files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html new file mode 100644 index 0000000000..ac734def51 --- /dev/null +++ b/files/de/mozilla/preferences/eine_kurze_anleitung_zu_mozilla_einstellungen/index.html @@ -0,0 +1,10 @@ +--- +title: Eine kurze Anleitung zur Mozilla- Einstellungen +slug: Mozilla/Preferences/Eine_kurze_Anleitung_zu_Mozilla_Einstellungen +tags: + - Favoriten +translation_of: Mozilla/Preferences/A_brief_guide_to_Mozilla_preferences +--- +

Dieser Artikel ist für Mozilla viel Nutzer und Systemadministratoren, das darauf abzielt einen allgemeinen Überblick in den Mozilla- Einstellungen zu gewährleisten.
+ Insbesondere über das speichern

+

Datei-für-Datei so wie das Bearbeiten der Ladesequenz dieser

diff --git a/files/de/mozilla/preferences/index.html b/files/de/mozilla/preferences/index.html new file mode 100644 index 0000000000..1169ecabf1 --- /dev/null +++ b/files/de/mozilla/preferences/index.html @@ -0,0 +1,48 @@ +--- +title: Preferences +slug: Mozilla/Preferences +tags: + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Preferences +--- +

The preference system makes it possible to store data for Mozilla applications using a key/value pairing system. These articles provide information about how to use the preference system.

+ + + + + + + +
+

Documentation

+
+
Preferences system
+
An introduction to using the preference system in Mozilla.
+
XUL School: Handling preferences
+
The XUL School tutorial chapter on preferences.
+
Mozilla preference reference
+
A reference guide to all Mozilla preferences; currently a work in progress.
+
A brief guide to Mozilla preferences
+
An introductory guide to where preferences are stored and other useful information about the core preference system.
+
Using preferences from application code {{gecko_minversion_inline("6.0")}}
+
Firefox 6 introduced static functions for accessing preferences efficiently from within application code. This API is not available for add-ons, but if you're working on a Gecko application, this API is the preferred way to access preferences.
+
Mozilla networking preferences
+
A guide to key networking-related preferences.
+
Mozilla preferences for uber-geeks
+
A guide to preferences that only truly elite geeks should play with.
+
+

View all pages tagged with "Preferences"...

+ 		+

Examples

+
+
Code snippets
+
Preference-related code snippets.
+
Adding preferences to an extension
+
How to add preferences to an existing extension.
+
+ + +
diff --git a/files/de/mozilla/projects/deutsch/index.html b/files/de/mozilla/projects/deutsch/index.html new file mode 100644 index 0000000000..e422dcde65 --- /dev/null +++ b/files/de/mozilla/projects/deutsch/index.html @@ -0,0 +1,35 @@ +--- +title: Emscripten +slug: Mozilla/Projects/Deutsch +translation_of: Mozilla/Projects/Emscripten +--- +
+

Emscripten is an LLVM to JavaScript compiler. It takes LLVM bytecode (e.g. generated from C/C++ using Clang, or from another language) and compiles that into JavaScript, which can be run on the Web.

+
+
+

The resources here provide you with all you need to know to get up and running with Emscripten at a basic level, allowing you to take your first steps with Emscripten, and discover how Emscripten can be leveraged to produce more powerful web apps. For a more detailed set of documentation, you should consult the official Emscripten Wiki.

+

Using Emscripten, you can

+ +

If you are new to Emscripten you start off by installing Emscripten on your system, and working through our Introducing Emscripten section.

+
+

Note: the current release version of Emscripten is 1.7.8.

+
+
+ +
    +
  1. Introducing Emscripten +
      +
    1. Emscripten beginner's tutorial
      2. +
    2. What is Emscripten and how does it work?
      3. +
    3. The nature of Emscripten-compiled JavaScript
      4. +
    4. Putting Emscripten in your toolchain
      5. +
    +
    2. +
  2. Web abilities and limitations
    3. +
  3. Download and install
    4. +
  4. Workflow and tools
    5. +
  5. Emscripten Techniques
    6. +
diff --git a/files/de/mozilla/projects/index.html b/files/de/mozilla/projects/index.html new file mode 100644 index 0000000000..6291137b31 --- /dev/null +++ b/files/de/mozilla/projects/index.html @@ -0,0 +1,14 @@ +--- +title: Projects +slug: Mozilla/Projects +tags: + - Mozilla + - NeedsContent + - NeedsTranslation + - Projects + - TopicStub +translation_of: Mozilla/Projects +--- +

{{ draft() }}

+

This page needs to become a pretty index to Mozilla projects whose documentation is located under it.

+

{{ LandingPageListSubpages() }}

diff --git a/files/de/mozilla/projects/nss/index.html b/files/de/mozilla/projects/nss/index.html new file mode 100644 index 0000000000..f69cd1dab7 --- /dev/null +++ b/files/de/mozilla/projects/nss/index.html @@ -0,0 +1,186 @@ +--- +title: Network Security Services +slug: Mozilla/Projects/NSS +tags: + - JSS + - NSS + - NeedsMigration + - NeedsTranslation + - TopicStub +translation_of: Mozilla/Projects/NSS +--- +

Network Security Services (NSS) is a set of libraries designed to support cross-platform development of security-enabled client and server applications. Applications built with NSS can support SSL v3, TLS, PKCS #5, PKCS #7, PKCS #11, PKCS #12, S/MIME, X.509 v3 certificates, and other security standards.

+ +

For detailed information on standards supported, see Overview of NSS. For a list of frequently asked questions, see the FAQ.

+ +

NSS is available under the Mozilla Public License. For information on downloading NSS releases as tar files, see Download PKI Source.

+ +

If you're a developer and would like to contribute to NSS, you might want to read the documents highlevel overview of internal details of NSS and getting started with NSS.

+ + + + + + + + +
+

Documentation

+ +

Background Information

+ +
+
Overview of NSS
+
Provides a brief summary of NSS and its capabilities.
+
NSS FAQ
+
Answers basic questions about NSS.
+
Introduction to Public-Key Cryptography
+
Explains the basic concepts of public-key cryptography that underlie NSS.
+
Introduction to SSL
+
Introduces the SSL protocol, including information about cryptographic ciphers supported by SSL and the steps involved in the SSL handshake.
+
+ +

Getting Started

+ +
+
NSS Releases
+
This page contains information about the current and past releases of NSS.
+
Get the source code and Build it
+
Instructions on how to build NSS on the different supported platforms.
+
Get Mozilla Source Code Using Mercurial
+
Information about with working with Mercurial.
+
Get Mozilla Source Code Using CVS (deprecated)
+
Old deprecated CVS documentation.
+
+ +

NSS APIs

+ +
+
Introduction to Network Security Services
+
Provides an overview of the NSS libraries and what you need to know to use them.
+
NSS Public Functions
+
Summarizes the APIs exported by the NSS shared libraries.
+
NSS Reference
+
API used to invoke SSL operations.
+
NSS API Guidelines
+
Explains how the libraries and code are organized, and guidelines for developing code (naming conventions, error handling, thread safety, etc.)
+
NSS Technical Notes
+
Links to NSS technical notes, which provide latest information about new NSS features and supplementary documentation for advanced topics in programming with NSS.
+
+ +

Tools, testing, and other technical details

+ +
+
Build Instructions for NSS
+
Describe how to check out and build NSS releases.
+
+ +
+
NSS Developer Tutorial
+
How to make changes in NSS. Coding style, maintaining ABI compatibility.
+
+ +
+
NSS Tools
+
Tools for developing, debugging, and managing applications that use NSS.
+
Sample Code
+
Demonstrates how NSS can be used for cryptographic operations, certificate handling, SSL, etc.
+
NSS 3.2 Test Suite
+
Archived version. Describes how to run the standard NSS tests.
+
NSS Performance Reports
+
Archived version. Links to performance reports for NSS 3.2 and later releases.
+
Encryption Technologies Available in NSS 3.11
+
Archived version. Lists the cryptographic algorithms used by NSS 3.11.
+
NSS 3.1 Loadable Root Certificates
+
Archived version. Describes the scheme for loading root CA certificates.
+
cert7.db
+
Archived version. General format of the cert7.db database.
+
+ +

PKCS #11 information

+ + + +
+
+ +

CA certificates pre-loaded into NSS

+ + + +
+
+ +

NSS is built on top of Netscape Portable Runtime (NSPR)

+ +
+
Netscape Portable Runtime
+
NSPR project page.
+
NSPR Reference
+
NSPR API documentation.
+
+ +

Additional Information

+ + + +

Testing

+ + + +

Planning

+ +

Information on NSS planning can be found at wiki.mozilla.org, including:

+ + + 		+

Community

+ +
    +
  • View Mozilla Security forums...
    • +
+ +

{{ DiscussionList("dev-security", "mozilla.dev.security") }}

+ +
    +
  • View Mozilla Cryptography forums...
    • +
+ +

{{ DiscussionList("dev-tech-crypto", "mozilla.dev.tech.crypto") }}

+ + + + +
+ +

 

diff --git a/files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html b/files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html new file mode 100644 index 0000000000..6bcaf94043 --- /dev/null +++ b/files/de/mozilla/projects/nss/nss_3.33_release_notes/index.html @@ -0,0 +1,78 @@ +--- +title: NSS 3.33 release notes +slug: Mozilla/Projects/NSS/NSS_3.33_release_notes +translation_of: Mozilla/Projects/NSS/NSS_3.33_release_notes +--- +

Einführung

+ +

Das Network Security Services (NSS) Team hat NSS 3.33 veröffentlicht, was eine Nebenversion darstellt.

+ +

Distribution information

+ +

The hg tag is NSS_3_33_RTM. NSS 3.33 requires Netscape Portable Runtime (NSPR) 4.17 or newer.

+ +

NSS 3.33 source distributions are available on ftp.mozilla.org for secure HTTPS download:

+ + + +

Bedeutende Änderungen in NSS 3.33

+ + + +

Neu in NSS 3.33

+ +

Neue Funktionalität

+ + + +

Neue Funktionen

+ + + +

Fehler behoben in NSS 3.33

+ +

This Bugzilla query returns all the bugs fixed in NSS 3.33:

+ +

https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Components&query_format=advanced&product=NSS&target_milestone=3.33

+ +

Kompatibilität

+ +

NSS 3.33 shared libraries are backward compatible with all older NSS 3.x shared libraries. A program linked with older NSS 3.x shared libraries will work with NSS 3.33 shared libraries without recompiling or relinking. Furthermore, applications that restrict their use of NSS APIs to the functions listed in NSS Public Functions will remain compatible with future versions of the NSS shared libraries.

+ +

Rückmeldung

+ +

Entdeckte Fehler sollten durch das Ausfüllen eines Fehlerberichts mithilfe von bugzilla.mozilla.org gemeldet werden (Produkt NSS).

diff --git a/files/de/mozilla/projects/nss/nss_sample_code/index.html b/files/de/mozilla/projects/nss/nss_sample_code/index.html new file mode 100644 index 0000000000..a765114f0b --- /dev/null +++ b/files/de/mozilla/projects/nss/nss_sample_code/index.html @@ -0,0 +1,25 @@ +--- +title: NSS Beispielcode +slug: Mozilla/Projects/NSS/NSS_Sample_Code +translation_of: Mozilla/Projects/NSS/NSS_Sample_Code +--- +

NSS Beispielcode

+ +

Die Sammlung an Beispielcode demonstriert wie NSS für Kryptographische Operationen, Zertifikat Handhabung, SSL, etc. verwendet werden kann. Außerdem werden einige "best practices" in der Anwendung von Kryptographie demonstriert.

+ +
    +
  1. Beispielcode 1: Schlüsselgenerierung und Transport zwischen Servern
    2. +
  2. Beispielcode 2: Symmetrische Verschlüsselung
    3. +
  3. Beispielcode 3: Hashing, MAC
    4. +
  4. Beispielcode 4: PKI Verschlüsselung
    5. +
  5. Beispielcode 5: PKI Verschlüsselung mit rohem öffentlichem & privatem Schlüssel im DER Format
    6. +
  6. Beispielcode 6: Konstante Symmetrische Schlüssel in der NSS Datenbank
    7. +
+ +


+ Dies sind sehr alte Code Beispiele die ersetzt werden müssen. Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=490238

+ +

Die Beispiele können wie folgt heruntergeladen werden:

+ +
hg clone https://hg.mozilla.org/projects/nss; cd nss; hg update SAMPLES_BRANCH
+
diff --git a/files/de/mozilla/projects/nss/pkcs11/index.html b/files/de/mozilla/projects/nss/pkcs11/index.html new file mode 100644 index 0000000000..1bb5996d30 --- /dev/null +++ b/files/de/mozilla/projects/nss/pkcs11/index.html @@ -0,0 +1,20 @@ +--- +title: PKCS11 +slug: Mozilla/Projects/NSS/PKCS11 +tags: + - NSS + - NeedsTranslation + - Security + - TopicStub +translation_of: Mozilla/Projects/NSS/PKCS11 +--- +

 

+ +

PKCS #11 information for implementors of cryptographic modules:

+ + diff --git a/files/de/mozilla/projects/nss/pkcs11/module_installation/index.html b/files/de/mozilla/projects/nss/pkcs11/module_installation/index.html new file mode 100644 index 0000000000..158c1944b0 --- /dev/null +++ b/files/de/mozilla/projects/nss/pkcs11/module_installation/index.html @@ -0,0 +1,32 @@ +--- +title: Installation des PKCS11-Moduls +slug: Mozilla/Projects/NSS/PKCS11/Module_Installation +translation_of: Mozilla/Projects/NSS/PKCS11/Module_Installation +--- +

PKCS #11 Module sind externe Module, die Firefox-Unterstützung für Smartcard-Lesegeräte, biometrische Sicherheitsgeräte und externe Zertifikatspeicher ergänzen. Dieser Artikel behandelt die beiden Methoden zum Installieren von PKCS-#11 Modulen in Firefox. Benutzer können das Einstellungsdialogfeld verwenden, um PKCS #11-Modul zu installieren oder zu entfernen. Erweiterungen können PKCS-#11 Module nsIPKCS11 programmgesteuert verwalten.

+ +
Hinweis: Die Informationen in diesem Artikel sind spezifisch für Firefox 3.5 und neuer. Ältere Versionen von Firefox unterstützen möglicherweise die window.pkcs11-Eigenschaft für die Installation von PKCS #11 Modulen.
+ +

Verwenden der Firefox-Einstellungen zum Installieren von PKCS-#11 Modulen

+ +
    +
  1. Speichern des PKCS-#11-Moduls an einem dauerhaften Speicherort auf Ihrem lokalen Computer
    2. +
  2. Öffnen Sie das Dialogfeld Firefox-Einstellungen. Wählen Sie "Erweitert" > "Verschlüsselung" > "Sicherheitsgeräte"
    3. +
  3. Wählen Sie "Load"
    4. +
  4. Geben Sie einen Namen für das Sicherheitsmodul ein, z. B. "Meine Clientdatenbank". HINWEIS: Es gibt derzeit einen Fehler in Firefox, bei dem internationale Zeichen Probleme verursachen können.
    5. +
  5. Wählen Sie "Durchsuchen..." , um den Speicherort des PKCS-#11-Moduls auf Ihrem lokalen Computer zu finden, und wählen Sie "OK", wenn Sie fertig sind.
    6. +
+ +

Bereitstellen von PKCS-#11-Modulen mithilfe der pkcs11-API

+ +

Ab Firefox 58 können Erweiterungen die Browsererweiterungs-API verwenden, um PKCS-#11 Module aufzuzählen und sie dem Browser als Schlüssel- und Zertifikatquellen zugänglich zu machen.pkcs11

+ +

Siehe auch

+ + diff --git a/files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html b/files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html new file mode 100644 index 0000000000..5b4c9e60d8 --- /dev/null +++ b/files/de/mozilla/projects/thunderbird/thunderbird_lokalisation/index.html @@ -0,0 +1,98 @@ +--- +title: Thunderbird Lokalisation +slug: Mozilla/Projects/Thunderbird/Thunderbird_Lokalisation +tags: + - Lokalisation + - thunderbird +translation_of: Mozilla/Projects/Thunderbird/Thunderbird_Localization +--- +

Diese Seite richtet sich an aktuelle und zukünftige Lokalisierer Thunderbirds, Mozilla Messagings E-Mail- und Usenet- Client. Sie deckt viele Aspekts ab, die ein Lokalisierer Thunderbirds kennen sollte, wie, notwendige Werkzeuge und wie man Informationen über lokalisationsrelevante Veranstaltungen und verschiedene andere interessante Angelegenheiten bekommt.

+ +

Erstellen einer Thunderbird-Lokalisation

+ +

Eine neue Lokalisation erstellen (Mercurial) - Dieser Artikel beschreibt, wie du eine neue Lokalisation Thunderbirds erstellen kannst.

+ +

Über Repostorien und Entwicklungszweige

+ +

Es gibt 3 aktive Repositorien für die Thunderbird-Entwicklung. Der Entwicklungsfortschritt Thunderbirds wird von einem Zweig zum nächsten alle sechs Wochen zusammengeführt.

+ + + +

Most locales will being working on comm-aurora. This repository/branch is stable with respect to strings for each six week period. Completing work here means it is ready for the first beta, and you won't need to work on beta branch. Your work will also automatically be carried forward.

+ +

Lokalisationsanforderungen

+ +

There are not significant restrictions on what locales can change. However, we need to work together on providing search engines for Thunderbird users to use to get the right balance of search engines and the correct options set. For further information see this page.

+ +

Lokalisationsübersicht

+ +

Die Lokalisations-Übersicht für Thunderbird gibt Lokalisierern eine präzise Übersicht über den aktuellen Zustand ihrer Lokalisationen. Weitere Informationen gibt es auf der  L10n Übersichts-Seite.

+ +

A localization will added to the l10n dashboard on request when it has reached a high-level of completion (> 80%) as shown by the compare-locales output. To request the addition of your locale to the dashboard, file a bug in the Thunderbird product/Build Config component.

+ +

L10n-relevante Informationen erhalten

+ +

Nachrichtengruppen & E-Mail-Verteiler

+ +

Localizers of Thunderbird should read the localization newsgroups (mozilla.dev.l10n.announce mozilla.dev.l10n) to stay informed of Thunderbird-specific and general l10n-related items of interest to them. They are further encouraged to read the Thunderbird development newsgroup (mozilla.dev.apps.thunderbird) to stay informed of recent Thunderbird-related developments.

+ +

These newsgroups can also be accessed via the dev-l10n-announce@lists.mozilla.org, dev-l10n@lists.mozilla.org (localization mailinglist) or dev-apps-thunderbird@lists.mozilla.org (Thunderbird development mailinglist) mailinglists, which mirror the newsgroups mentioned above. You can subscribe to or unsubscribe from these mailinglists via the web interface at lists.mozilla.org.

+ +

Bugzilla

+ +

Localizers should watch the thunderbird@localization.bugs mail address (or its alias :tb-l10n) to stay current on bugs that might affect Thunderbird localizers. This can be done by adding this mail address to the "User Watching" section of your Email preferences in bugzilla.

+ + + + + +

Sprachumgebungsschichten

+ +

Locale tiers reflect locales that we need to have in a good state for release. There are 10 locales in tier 1, which are the most important for Thunderbird, because of their number of Thunderbird users or potential for growth.

+ +

These locales are being treated as first-class citizens, as important as en-US, which is to say that any Tier 1 locale that does not meet the requirements may block a final release of Thunderbird.

+ +

Schicht 1

+ +

The following are P1 (Priorität 1) locales in order of priority:

+ +
* de             -  Deutsch
+* fr             -  Französisch
+* ja, ja-JP-mac  -  Japanisch
+* en-GB          -  Britisches Englisch
+* es-ES          -  Spanisch (kontinentaleuropäisch)
+* it             -  Italienisch
+* pl             -  Polnisch
+* ru             -  Russisch
+* nl             -  Niederländisch
+* pt-BR          -  Brasilianisches Portugiesisch
+
+ +

Schicht 2

+ +

Alle anderen unterstützten Sprachumgebungen befinden sich in der Schicht 2.

diff --git a/files/de/mozilla/qa/index.html b/files/de/mozilla/qa/index.html new file mode 100644 index 0000000000..b6efbed387 --- /dev/null +++ b/files/de/mozilla/qa/index.html @@ -0,0 +1,70 @@ +--- +title: 'QA: Quality assurance at Mozilla' +slug: Mozilla/QA +tags: + - NeedsTranslation + - QA + - Testing + - TopicStub +translation_of: Mozilla/QA +--- +

Es gibt viele Dinge, die im Bereich der Qualitätssicherung erledigt werden müssen und dabei muss man nicht zwingend programmieren können. Einige Aufgaben erfordern nicht mal Kenntnisse in HTML oder andren Webtechnologien. Wenn Sie interessiert sind uns beim Testen von Anwendungen oder anderen Aufgaben der Qualitätssicherung zu unterstützen, können Sie zunächst einmal auf den Seiten von quality.mozilla.org vorbei schauen.

+ + + + + + + + + + +
+

Dokumentation

+ +
+
Richtlinien zum Schreiben eines Bugreports
+
Je besser ein Bug gemeldet worden ist, umso besser wird ein Entwickler ihn sofort beseitigen. Wenn Sie diesen Leitfaden befolgen, können Sie helfen, dass ihre Bugs an oberster Stelle der Entwicklerliste stehen, und sie umso schneller beseitigt werden können.
+
Unbestätigte Bugs bestätigen
+
Nützliche Fehlermeldungen identifizieren und restliche Meldungen schließen.
+
Doppelte Fehlermeldungen aussortieren
+
Helfen Sie uns Fehler schneller zu beseitigen, indem Sie vermeiden doppelte Fehlermeldungen zu senden oder doppelte Einträge auszusortieren.
+
Reduzierte Testfällen
+
Verbessern Sie ihre Fehlermeldungen in dem Sie fehlerhafte Webseiten auf einfache Testseiten reduzieren, welche Entwicklern schnell helfen den Fehler zu verstehen und außerdem für automatisierte Tests verwendet werden können.
+
Tests entwickeln
+
Tests sichern, dass zukünftige Veränderungen an Mozilla nichts kaputt machen, was vorher korrekt funktioniert hat.
+
+ +

Alles anzeigen...

+ 		+

Community

+ + + + + + + +

Tools

+ + + +

Verwandte Themen

+ +
+
Mozilla entwickeln
+
+
diff --git a/files/de/mozilla/tech/index.html b/files/de/mozilla/tech/index.html new file mode 100644 index 0000000000..f9682e62e1 --- /dev/null +++ b/files/de/mozilla/tech/index.html @@ -0,0 +1,14 @@ +--- +title: Mozilla technologies +slug: Mozilla/Tech +tags: + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XUL +translation_of: Mozilla/Tech +--- +

Mozilla has several technologies used as components of its projects. These are documented here. (flesh out this text).

+

{{LandingPageListSubpages}}

diff --git a/files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html b/files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html new file mode 100644 index 0000000000..a81f28519f --- /dev/null +++ b/files/de/mozilla/tech/xpcom/guide/empfang_von_benachrichtigungen_zum_startprozess/index.html @@ -0,0 +1,56 @@ +--- +title: Empfang von Benachrichtigungen zum Startprozeß +slug: Mozilla/Tech/XPCOM/Guide/empfang_von_benachrichtigungen_zum_startprozess +translation_of: Mozilla/Tech/XPCOM/Guide/Receiving_startup_notifications +--- +

Manchmal brauchen XPCOM Komponenten Benachrichtigungen über den Fortschritt beim Hochfahren der Anwendung, zum Beispiel um neue Dienste zur passenden Zeit starten können

+

Empfang von Benachrichtigungen zum Startprozeß ab Gecko 2.0 (Firefox 4)

+

Der XPCOM Startprozeß wurde verändert um die zum Hochfahren benötigte Zeit zu verbessern. Siehe Der Startprozeß für Details über die Funktionsweise, wenn dich die Einzelheiten interessieren.

+

Die entscheidende Änderung ist, daß man jetzt entsprechende Zeilen zum chrome.manifest hinzufügt damit die Anwendung sich darum kümmert, anstelle die Registrierung programmatisch mit dem Category Manager durchzuführen wie früher. Zum Beispiel:

+
category profile-after-change MyComponent @foobar/mycomponent;1
+
+ Wichtig: Bisher begann die Contract ID des Kategorie-EIntrags mit "service," wenn die Komponente als Dienst (Service) implementiert war. Das ist nicht länger der Fall, dieses muß bei der Codemigration entfernt werden..
+

Hinzu kommt, daß die früheste Benachrichtigung beim Startprozeß, die man erhalten kann, jetzt  profile-after-change ist. Dein Add-On wird keine xpcom-startup oder app-startup Benachrichtigungen mehr erhalten.

+

Der Startprozeß

+

Während des Startprozesses wird aus dem Manifest der Anwendung die Liste der Komponenten ausgelesen, die registriert werden müssen, und diese Komponenten werden dann gestartet. Damit sind dann XPCOM und die Anwendung soweit hochgefahren, daß der Erweiterungs-Manager geladen werden kann, um sich um Installation, Deinstallation und Aktualisierung von Erweiterungen zu kümmern.

+

Sobald dieser Prozess abgeschlossen ist, können Erweiterungen einfach dadurch geladen werden, daß ihr Manifest gelesen, ihre Komponenten geladen und der Anwendungsstart fortgesetzt wird, ohne den Browser neu starten zu müssen.

+

Empfang von Benachrichtigungen zum Startprozeß vor Gecko 2.0 (Firefox 4)

+

Um Benachrichtigungen zum Startprozeß zu empfangen muß man {{ interface("nsICategoryManager") }} benutzen um sich für die "app-startup" Kategorie zu registrieren. Damit wird die Komponente dann unter anderem folgende Benachrichtigungen zum Anwendungsstart erhalten:

+
+
+ xpcom-startup
+
+ Wird gesendet, wenn XPCOM fertig mit dem Hochfahren ist. Die meisten Anwendungsdienste sind dann noch nicht verfügbar, aber XPCOM selbst steht bereit.
+
+ app-startup
+
+ Wird gesendet, wenn die Anwendung mit dem Startprozess fertig ist.
+
+ final-ui-startup
+
+ Wird gesendet eben bevor das erste Anwendungsfenster dargestellt wird.
+
+

Registrierung am Kategorien-Manager

+

Um sich beim Kategorien-Manager anzumelden, muß man nur dessen Methode {{ ifmethod("nsICategoryManager", "AddCategoryEntry") }} aufrufen:

+
categoryManager->AddCategoryEntry(APPSTARTUP_CATEGORY,
+                                  "mycomponentname",
+                                  "contract-id",
+                                  PR_TRUE, PR_TRUE,
+                                  getter_Copies(previous));
+
+

Das bewirkt, daß die Komponente mit {{ ifmethod("nsIComponentManager","createInstance") }} instanziiert wird.

+

Wenn die Komponente als Dienst (Service) laufen soll, laß die Contract ID mit "service," beginnen:

+
categoryManager->AddCategoryEntry(APPSTARTUP_CATEGORY,
+                                  "mycomponentname",
+                                  "service,contract-id",
+                                  PR_TRUE, PR_TRUE,
+                                  getter_Copies(previous));
+

Wenn "service," angegeben ist, wird die Komponente mit {{ ifmethod("nsIComponentManager","getService") }} instanziiert.

+

In beiden Fällen braucht man keine weitere Registrierung für die Benachrichtigungen zum Startprozeß, die Registrierung am Kategorien-Manager reicht dazu aus.

+

Wie es weitergeht

+

Nachdem die Registrierung am Kategorien-Manager erfolgt ist, wird zum Zeitpunkt des Starts von Mozilla (oder wenn bei einer eingebetteten Anwendung die Funktion NS_InitEmbedding() aufgerufen wurde) die AppStartupNotifier Komponente instanziiert und ihre Observe() Methode aufgerufen; Diese wiederum läuft über alle Komponenten in der app-startup Kategorie und sendet ihnen die passenden Benachrichtigungen.

+

Siehe auch

+ diff --git a/files/de/mozilla/tech/xpcom/guide/index.html b/files/de/mozilla/tech/xpcom/guide/index.html new file mode 100644 index 0000000000..781a596b2e --- /dev/null +++ b/files/de/mozilla/tech/xpcom/guide/index.html @@ -0,0 +1,13 @@ +--- +title: XPCOM guide +slug: Mozilla/Tech/XPCOM/Guide +tags: + - Landing + - Mozilla + - NeedsTranslation + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Guide +--- +

These articles provide tutorials and usage documentation for XPCOM, including how to use it in your own projects and how to build XPCOM components for your Firefox add-ons and the like.

+

{{LandingPageListSubpages}}

diff --git a/files/de/mozilla/tech/xpcom/reference/index.html b/files/de/mozilla/tech/xpcom/reference/index.html new file mode 100644 index 0000000000..29d07953d6 --- /dev/null +++ b/files/de/mozilla/tech/xpcom/reference/index.html @@ -0,0 +1,27 @@ +--- +title: XPCOM reference +slug: Mozilla/Tech/XPCOM/Reference +tags: + - Add-ons + - Extensions + - Landing + - Mozilla + - NeedsTranslation + - Reference + - TopicStub + - XPCOM +translation_of: Mozilla/Tech/XPCOM/Reference +--- +

This reference describes the interfaces and functions provided by the XPCOM library. In addition, it details the various helper classes and functions, as well as the components, provided by the XPCOM glue library. The contents herein are oriented primarily toward extension developers and people embedding XPCOM in other projects.

+ +
+

WebExtensions are becoming the new standard for creating add-ons. Eventually support for XPCOM add-ons will be deprecated, so you should begin to investigate porting your add-ons to use the WebExtensions API, and report any missing functionality so we can be sure to address your concerns. Work is ongoing on WebExtension capabilities, so your input will help prioritize and plan the work. To learn more about the kinds of changes that will be needed, see Comparison with XUL/XPCOM extensions. In addition, any binaries you use will then need to be converted for use with the WebExtensions native messaging API, or compiled using WebAssembly or Emscripten.

+
+ +
+

If you're working on a module in the Mozilla codebase that's compiled with the MOZILLA_INTERNAL_API flag set, some of these APIs -- the string functions and classes in particular -- are not the ones you should be using. See the XPCOM internal string guide for documentation of the internal string API used within the Mozilla codebase.

+
+ +

{{LandingPageListSubpages}}

+ +

Many XPCOM pages return an nsresult. Prior to Gecko 19 {{geckoRelease(19)}}, this was an integer that simply returned an error code. It is now a strongly typed enum when XPCOM is built using a C++11 compiler. This causes compile-time errors to occur when improper values are returned as nsresult values, thereby making it easier to catch many bugs.

diff --git a/files/de/mozilla/tech/xpcom/reference/interface/index.html b/files/de/mozilla/tech/xpcom/reference/interface/index.html new file mode 100644 index 0000000000..d098cf8402 --- /dev/null +++ b/files/de/mozilla/tech/xpcom/reference/interface/index.html @@ -0,0 +1,19 @@ +--- +title: XPCOM Interface Reference +slug: Mozilla/Tech/XPCOM/Reference/Interface +tags: + - NeedsTranslation + - TopicStub + - XPCOM + - XPCOM Interface Reference +translation_of: Mozilla/Tech/XPCOM/Reference/Interface +--- +

This is a reference to the XPCOM interfaces provided by the Mozilla platform.

+ +
{{tree('','1')}}
+ +

See also

+ + diff --git a/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html new file mode 100644 index 0000000000..2c354b2b2b --- /dev/null +++ b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/index.html @@ -0,0 +1,420 @@ +--- +title: nsILoginManager +slug: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager +tags: + - Firefox 3 + - Interfaces + - 'Interfaces:Scriptable' + - Login Manager + - NeedsTranslation + - Thunderbird 3 + - TopicStub + - XPCOM + - XPCOM API Reference + - thunderbird +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager +--- +

+
toolkit/components/passwordmgr/public/nsILoginManager.idlScriptable
+ + +Used to interface with the built-in Password Manager + + +
+ +
1.0
+ +
66
+ +
+ +
+ +
Introduced
+
Gecko 1.9
+ +
+ +
+ +
+Inherits from: nsISupports +Last changed in Gecko 1.9.2 (Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)
+

+ +

Replaces nsIPasswordManager which was used in older versions of Gecko.

+ +

Implemented by: @mozilla.org/login-manager;1. To create an instance, use:

+ +
var loginManager = Components.classes["@mozilla.org/login-manager;1"]
+                   .getService(Components.interfaces.nsILoginManager);
+
+ +

Method overview

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
void addLogin(in nsILoginInfo aLogin);
nsIAutoCompleteResult autoCompleteSearch(in AString aSearchString, in nsIAutoCompleteResult aPreviousResult, in nsIDOMHTMLInputElement aElement);
unsigned long countLogins(in AString aHostname, in AString aActionURL, in AString aHttpRealm);
boolean fillForm(in nsIDOMHTMLFormElement aForm);
void findLogins(out unsigned long count, in AString aHostname, in AString aActionURL, in AString aHttpRealm, [retval, array, size_is(count)] out nsILoginInfo logins);
void getAllDisabledHosts([optional] out unsigned long count, [retval, array, size_is(count)] out wstring hostnames);
void getAllLogins([optional] out unsigned long count, [retval, array, size_is(count)] out nsILoginInfo logins);
boolean getLoginSavingEnabled(in AString aHost);
void modifyLogin(in nsILoginInfo oldLogin, in nsISupports newLoginData);
void removeAllLogins();
void removeLogin(in nsILoginInfo aLogin);
void searchLogins(out unsigned long count, in nsIPropertyBag matchData, [retval, array, size_is(count)] out nsILoginInfo logins);
void setLoginSavingEnabled(in AString aHost, in boolean isEnabled);
+ +

Methods

+ +

addLogin()

+ +

Stores a new login in the Login Manager.

+ +

Hinweis: Default values for the nsILoginMetaInfo properties are created if the specified login doesn't explicitly specify them.

+ +
void addLogin(
+  in nsILoginInfo aLogin
+);
+
+ +
Parameters
+ +
+
aLogin
+
The login to store.
+
+ +
Exceptions thrown
+ +
+
 
+
An exception is thrown if the login information is already stored in the Login Manager. To change a login, you have to use modifyLogin().
+
+ +

autoCompleteSearch()

+ +

Generates results for a user field autocomplete menu.

+ +

Hinweis: This method is provided for use only by the FormFillController, which calls it directly. It should not be used for any other purpose.

+ +
nsIAutoCompleteResult autoCompleteSearch(
+  in AString aSearchString,
+  in nsIAutoCompleteResult aPreviousResult,
+  in nsIDOMHTMLInputElement aElement
+);
+
+ +
Parameters
+ +
+
aSearchString
+
Missing Description
+
aPreviousResult
+
Missing Description
+
aElement
+
Missing Description
+
+ +
Return value
+ +

Missing Description

+ +

countLogins()

+ +

Returns the number of logins matching the specified criteria. Called when only the number of logins is needed, and not the actual logins (which avoids prompting the user for a Master Password, as the logins don't need to be decrypted).

+ +
unsigned long countLogins(
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm
+);
+
+ +
Parameters
+ +
+
aHostname
+
The hostname to which to restrict searches, formatted as a URL. For example, "http://www.bar.com". To match all hostnames, specify "" (empty string). A value of null will cause countLogins() to not match any logins.
+
aActionURL
+
For form logins, this parameter should specify the URL to which the form will be submitted. To match any form login, specify "" (empty string). To not match any form logins (For example when interested in protocol logins only), specify null.
+
aHttpRealm
+
For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see RFC 2617). To match any protocol login, specify "" (empty string). To not match any protocol logins (For example when interested in form logins only), specify null.
+
+ +
Return value
+ +

The number of logins matching the parameters passed.

+ +

fillForm()

+ +

Fills out a form with login information, if appropriate information is available.

+ +

Hinweis: This method will attempt to fill out the form regardless of the setting of the signon.autofillForms preference.

+ +
boolean fillForm(
+  in nsIDOMHTMLFormElement aForm
+);
+
+ +
Parameters
+ +
+
aForm
+
The HTMLform to attempt to fill out.
+
+ +
Return value
+ +

true if the form was successfully filled out; otherwise false.

+ +

findLogins()

+ +

Searches for logins matching the specified criteria. Called when looking for logins that might be applicable to a given form or authentication request.

+ +
void findLogins(
+  out unsigned long count,
+  in AString aHostname,
+  in AString aActionURL,
+  in AString aHttpRealm,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+
+ +
Parameters
+ +
+
count
+
The number of elements in the returned array. JavaScript callers can simply use the array's length property and supply a dummy argument for this parameter.
+
aHostname
+
The hostname to restrict searches to, formatted as a URL. For example, "http://www.bar.com".
+
aActionURL
+
For form logins, this parameter should specify the URL to which the form will be submitted. For protocol logins, specify null. An empty string ("") will match any value (except null).
+
aHttpRealm
+
For protocol logins, specify the HTTP Realm for which the login applies; this is obtained from the WWW-Authenticate header (see RFC 2617). For form logins, this parameter should be null. An empty string ("") will match any value (except null).
+
logins
+
An array of nsILoginInfo objects.
+
+ +
Example
+ +

This method can be called from JavaScript like this:

+ +
 var logins = myLoginMgr.findLogins({}, 'https://bugzilla.mozilla.org', '', '', {});
+
+ +

getAllDisabledHosts()

+ +

Returns a list of all hosts for which login saving is disabled.

+ +
void getAllDisabledHosts(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out wstring hostnames
+);
+
+ +
Parameters
+ +
+
count
+
The number of elements in the returned array. JavaScript callers can simply use the array's length property and supply a dummy argument for this parameter.
+
hostnames
+
An array of hostname strings in URL format without a pathname. For example: "https://www.site.com".
+
+ +
Example
+ +

You can call this method from JavaScript like this:

+ +
 var disabledHosts = myLoginMgr.getAllDisabledHosts({});
+
+ +

getAllLogins()

+ +

Returns an array containing all logins recorded by the Login Manager.

+ +

If you just want to see if any logins are stored, use countLogins() instead. It's more efficient, and avoids the possibility of the user being prompted for their master password.

+ +
void getAllLogins(
+  [optional] out unsigned long count,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+
+ +
Parameters
+ +
+
count
+
The number of elements in the returned array. JavaScript callers can simply use the array's length property and supply a dummy argument for this parameter.
+
logins
+
An array of nsILoginInfo objects containing all the logins the Login Manager has on record.
+
+ +
Example
+ +

You can call this method from JavaScript like this:

+ +
 var logins = myLoginMgr.getAllLogins({});
+
+ +

getLoginSavingEnabled()

+ +

Reports whether or not saving login information is enabled for a host.

+ +
boolean getLoginSavingEnabled(
+  in AString aHost
+);
+
+ +
Parameters
+ +
+
aHost
+
The hostname to check. This argument should be in the origin URL format, with no pathname. For example: "https://www.site.com".
+
+ +
Return value
+ +

true if login saving is enabled for the host, otherwise false.

+ +

modifyLogin()

+ +

Modifies an existing login by replacing it with a new one.

+ +

If newLoginData is a nsILoginInfo, all of the old login's nsILoginInfo properties are changed to the values from newLoginData (but the old login's nsILoginMetaInfo properties are unmodified).

+ +

If newLoginData is a nsIPropertyBag, only the specified properties will be changed. The nsILoginMetaInfo properties of oldLogin can be changed in this manner.

+ +

If the propertybag contains an item named "timesUsedIncrement", the login's timesUsed property will be incremented by the item's value.

+ +
void modifyLogin(
+  in nsILoginInfo oldLogin,
+  in nsISupports newLoginData
+);
+
+ +
Parameters
+ +
+
oldLogin
+
The login to be modified.
+
newLoginData
+
The login information to replace the oldLogin with. This may be specified as either an nsILoginInfo or an nsIPropertyBag2 object.
+
+ +

removeAllLogins()

+ +

Removes all logins known by the Login Manager. This works without a need for the master password, if one is set.

+ +
void removeAllLogins();
+
+ +
Parameters
+ +

None.

+ +

removeLogin()

+ +

Removes a login from the Login Manager.

+ +

Hinweis: The specified login must exactly match a stored login. However, the values of any nsILoginMetaInfo properties are ignored.

+ +
void removeLogin(
+  in nsILoginInfo aLogin
+);
+
+ +
Parameters
+ +
+
aLogin
+
The login to remove from the Login Manager. Only a login that is an exact match is deleted.
+
+ +

searchLogins()

+ +

Searches for logins in the login manager's data store, returning an array of matching logins. If there are no matching logins, an empty array is returned.

+ +
void searchLogins(
+  out unsigned long count,
+  in nsIPropertyBag matchData,
+  [retval, array, size_is(count)] out nsILoginInfo logins
+);
+
+ +
Parameters
+ +
+
count
+
The number of elements in the returned array.
+
matchData
+
The data used for the search. This does not follow the same requirements as findLogins() for those fields; wildcard matches are not specified.
+
logins
+
An array of matching nsILoginInfo objects.
+
+ +
Example
+ +

This method can be called from JavaScript like this:

+ +
 var logins = myLoginMgr.searchLogins({}, matchData);
+ var numLogins = logins.length;
+
+ +

setLoginSavingEnabled()

+ +

Enables or disables storing logins for a specified host. When login storing is disabled, the Login Manager won't prompt the user to store logins for that host. Existing logins are not affected.

+ +
void setLoginSavingEnabled(
+  in AString aHost,
+  in boolean isEnabled
+);
+
+ +
Parameters
+ +
+
aHost
+
The hostname to adjust the setting for. This argument should be in the origin URL format, with no pathname. For example: "https://www.site.com".
+
isEnabled
+
If true, login saving is enabled for the specified host. If false, login saving is disabled.
+
+ +

See also

+ + diff --git a/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html new file mode 100644 index 0000000000..2cc68a291f --- /dev/null +++ b/files/de/mozilla/tech/xpcom/reference/interface/nsiloginmanager/using_nsiloginmanager/index.html @@ -0,0 +1,212 @@ +--- +title: Using nsILoginManager +slug: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsILoginManager/Using_nsILoginManager +--- +
{{ Gecko_minversion_header("1.9") }}
+ +

Den Login-Manager verwenden

+ +

Extensions speichern oftmals - auch wenn es eigentlich gar nicht wirklich nötig wäre - Paßwörter zu Webseiten, web-apps und so weiter. To do so securely, they can use nsILoginManager, which provides for secure storage of sensitive password information and nsILoginInfo, which provides a way of storing login information.

+ +

Getting nsILoginManager

+ +

To get a component implementing nsILoginManager, use the following:

+ +
+
var passwordManager = Components.classes["@mozilla.org/login-manager;1"].getService(
+	Components.interfaces.nsILoginManager
+);
+
+ +

Most Login Manager functions take an nsILoginInfo object as a parameter. An nsILoginInfo object contains the following attributes: hostname, form submit URL, HTTP realm, username, username field, password, and password field. The hostname, username and password attributes are mandatory, while the other fields are set based on whether the login is for a web page form or an HTTP/FTP authentication site login. See the nsILoginInfo attribute definitions for more details. Defining an nsILoginInfo object is simple:

+ +
+
var nsLoginInfo = new Components.Constructor(
+	"@mozilla.org/login-manager/loginInfo;1",
+	Components.interfaces.nsILoginInfo,
+	"init"
+);
+
+var loginInfo = new nsLoginInfo(
+	hostname, formSubmitURL, httprealm, username, password, usernameField, passwordField
+);
+
+
+ +

Examples

+ +

Creating a login for a web page

+ +
var formLoginInfo = new nsLoginInfo(
+	'http://www.example.com',
+	'http://login.example.com',
+	null,
+	'joe',
+	'SeCrEt123',
+	'uname',
+	'pword'
+);
+ +

This login would correspond to a HTML form such as:

+ +
<form action="http://login.example.com/foo/authenticate.cgi">
+	<div>Please log in.</div>
+	<label>Username:</label> <input type="text" name="uname">
+	<label>Password:</label> <input type="password" name="pword">
+</form>
+
+ +

Creating a site authentication login

+ +
var authLoginInfo = new nsLoginInfo(
+	'http://www.example.com',
+	null,
+	'ExampleCo Login',
+	'alice',
+	'SeCrEt321',
+	"",
+	""
+);
+
+ +

This would correspond to a login on http://www.example.com when the server sends a reply such as:

+ +
 HTTP/1.0 401 Authorization Required
+ Server: Apache/1.3.27
+ WWW-Authenticate: Basic realm="ExampleCo Login"
+
+
+ +

Creating a local extension login

+ +
var extLoginInfo = new nsLoginInfo(
+	'chrome://firefoo',
+	null,
+	'User Registration',
+	'bob',
+	'123sEcReT',
+	"",
+	""
+);
+ +

From a component creating a new info block is done slightly differently:

+ +
var nsLoginInfo = new Components.Constructor("@mozilla.org/login-manager/loginInfo;1", Ci.nsILoginInfo, "init");
+var extLoginInfo = new nsLoginInfo('chrome://firefoo', null, 'User Registration', 'bob', '123sEcReT', '', '');
+//var extLoginInfo = new nsLoginInfo(aHostname, aFormSubmitURL, aHttpRealm, aUsername, aPassword, aUsernameField, aPasswordField)
+
+ +

The Login Manager treats this as if it was a web site login. You should use your extension's chrome:// URL to prevent conflicts with other extensions, and a realm string which briefly denotes the login's purpose.

+ +

Storing a password

+ +

To store a password in the Login Manager, you first need to create an nsILoginInfo object as defined above. Then you simply need to call the nsILoginManager method addLogin().

+ +
myLoginManager.addLogin(loginInfo);
+
+ +

{{ Note("This will throw an exception if both the httprealm and formSubmitURL parameters are NULL. One must be specified when storing a password. The hostname, username and password parameters are also mandatory.") }}

+ +

Retrieving a password

+ +

Retrieving a password from the Login Manager is slightly more difficult. In order to locate a password, the hostname, formSubmitURL and httprealm must match exactly what is stored for the password to be found. The only exception is that if the stored formSubmitURL is blank, in which case the formSubmitURL parameter is ignored. Note that the hostname and formSubmitURL arguments should not include the path from the full URL. The example below should serve as a starting point for matching form logins:

+ +
var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';  // not http://www.example.com/foo/auth.cgi
+var httprealm = null;
+var username = 'user';
+var password;
+
+try {
+	// Get Login Manager
+	var myLoginManager = Components.classes["@mozilla.org/login-manager;1"].
+		getService(Components.interfaces.nsILoginManager);
+
+	// Find users for the given parameters
+	var logins = myLoginManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+	// Find user from returned array of nsILoginInfo objects
+	for (var i = 0; i < logins.length; i++) {
+		if (logins[i].username == username) {
+			password = logins[i].password;
+			break;
+		}
+	}
+}
+
+catch(ex) {
+	// This will only happen if there is no nsILoginManager component class
+}
+ +

Note that the user will be prompted for their master password if they have chosen to set one to secure their passwords.

+ +

Removing a password

+ +

Removing a password is simple:

+ +
myLoginManager.removeLogin(loginInfo);
+
+ +

When removing a password the specified nsILoginInfo object must exactly match what was stored or an exception will be thrown. This includes the password attribute. Here's an example on how to remove the password without actually knowing what the password is:

+ +
// example values
+var hostname = 'http://www.example.com';
+var formSubmitURL = 'http://www.example.com';
+var httprealm = null;
+var username = 'user';
+
+try {
+	// Get Login Manager
+	var passwordManager = Components.classes["@mozilla.org/login-manager;1"].
+		getService(Components.interfaces.nsILoginManager);
+
+	// Find users for this extension
+	var logins = passwordManager.findLogins({}, hostname, formSubmitURL, httprealm);
+
+	for (var i = 0; i < logins.length; i++) {
+		if (logins[i].username == username) {
+			passwordManager.removeLogin(logins[i]);
+			break;
+		}
+	}
+}
+catch(ex) {
+	// This will only happen if there is no nsILoginManager component class
+}
+ +

Changing stored login information

+ +

Changing a password is rather simple. Since all this does is make a removeLogin() call followed by an addLogin() call, it has the same caveats as both of them: namely that the oldLogin must match an existing login exactly (see above) and that the newLogin attributes must be set correctly.:

+ +
myLoginManager.modifyLogin(oldLogin, newLogin);
+ +

Login Manager notifications

+ +

{{ fx_minversion_note("3.5", "The Login Manager notifications were added in Firefox 3.5.") }}

+ +

Firefox 3.5 and later send assorted notifications when various Login Manager related events occur, including when form autofill does not occur for various reasons, as well as when changes are made to the Login Manager's database. See the Login Manager section of the article on observer notifications for details.

+ +

Debugging

+ +

The login manager implementation has the ability to send debug messages to the Error Console, which can provide some visibility into what it's doing. To enable the debug logging, see http://wiki.mozilla.org/Firefox:Pass...ager_Debugging.

+ +

Supporting older versions of Gecko

+ +

If you want your extension to support both Gecko 1.9 (Firefox 3, Thunderbird 3, SeaMonkey 2) and older versions it will need to implement both the nsILoginManager and nsIPasswordManager components. A simple method to do this is as follows:

+ +
if ("@mozilla.org/passwordmanager;1" in Components.classes) {
+	// Password Manager exists so this is not Firefox 3 (could be Firefox 2, Netscape, SeaMonkey, etc).
+	// Password Manager code
+} else if ("@mozilla.org/login-manager;1" in Components.classes) {
+	// Login Manager exists so this is Firefox 3
+	// Login Manager code
+}
+ +

See also

+ + diff --git a/files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html b/files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html new file mode 100644 index 0000000000..3907d126bd --- /dev/null +++ b/files/de/mozilla/tech/xpcom/reference/interface/nsixmlhttprequest/index.html @@ -0,0 +1,89 @@ +--- +title: nsIXMLHttpRequest +slug: Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest +translation_of: Mozilla/Tech/XPCOM/Reference/Interface/nsIXMLHttpRequest +--- +
+

Obsolete since Gecko 60 (Firefox 60 / Thunderbird 60 / SeaMonkey 2.57)
+ This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

+
+ + + +

nsIXMLHttpRequest along with nsIJSXMLHttpRequest and nsIXMLHttpRequestEventTarget are Mozilla's implementation details of the DOM XMLHttpRequest object.

+ +
Note: If you're a web developer or a Mozilla add-on developer, please refer to the XMLHttpRequest documentation instead.
+ +

This page contains documentation, specific to Mozilla application and add-on developers.

+ +

The interface definition: https://dxr.mozilla.org/mozilla-central/source/dom/xhr/nsIXMLHttpRequest.idl

+ +

Elevated Privileges

+ +

As mentioned in the "Non-Standard Properties" the property of channel was read-only. When using the XPCOM interface, as seen below in Example 2, we can get access to this. The most obvious benefit is that we can set nsiRequest - Constants in the xhr.channel.loadFlags. For instance, as done in Example 2, the flag of LOAD_ANONYMOUS is added, this strips all user data (cookies, tokens, etc).

+ +

Using event handlers from native code

+ +

(Not sure if it's up-to-date)

+ +

From native code, the way to set up onload and onerror handlers is a bit different. Here is a comment from Johnny Stenback <jst@netscape.com>:

+ +
The mozilla implementation of nsIXMLHttpRequest implements the interface nsIDOMEventTarget and that's how you're supported to add event listeners. Try something like this: nsCOMPtr<nsIDOMEventTarget> target(do_QueryInterface(myxmlhttpreq)); target->AddEventListener(NS_LITERAL_STRING("load"), mylistener, PR_FALSE) where mylistener is your event listener object that implements the interface nsIDOMEventListener. The 'onload', 'onerror', and 'onreadystatechange' attributes moved to nsIJSXMLHttpRequest, but if you're coding in C++ you should avoid using those.
+ +

Though actually, if you use addEventListener from C++ weird things will happen too, since the result will depend on what JS happens to be on the stack when you do it....

+ +

Conclusion: Do not use event listeners on XMLHttpRequest from C++, unless you're aware of all the security implications. And then think twice about it.

+ +

Example code

+ +

This is a simple example code for opening a simple HTTP request from a xul application (like a Mozilla extension) without using observers:

+ +
 var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance();
+ req.open('POST', "http://www.foo.bar:8080/nietzsche.do", true);
+ req.send('your=data&and=more&stuff=here');
+
+ +

Example 2

+ +
var {Cu: utils, Cc: classes, Ci: instances} = Components;
+Cu.import('resource://gre/modules/Services.jsm');
+function xhr(url, cb) {
+    let xhr = Cc["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance(Ci.nsIXMLHttpRequest);
+
+    let handler = ev => {
+        evf(m => xhr.removeEventListener(m, handler, !1));
+        switch (ev.type) {
+            case 'load':
+                if (xhr.status == 200) {
+                    cb(xhr.response);
+                    break;
+                }
+            default:
+                Services.prompt.alert(null, 'XHR Error', 'Error Fetching Package: ' + xhr.statusText + ' [' + ev.type + ':' + xhr.status + ']');
+                break;
+        }
+    };
+
+    let evf = f => ['load', 'error', 'abort'].forEach(f);
+    evf(m => xhr.addEventListener(m, handler, false));
+
+    xhr.mozBackgroundRequest = true;
+    xhr.open('GET', url, true);
+    xhr.channel.loadFlags |= Ci.nsIRequest.LOAD_ANONYMOUS | Ci.nsIRequest.LOAD_BYPASS_CACHE | Ci.nsIRequest.INHIBIT_PERSISTENT_CACHING;
+    xhr.responseType = "arraybuffer"; //dont set it, so it returns string, you dont want arraybuffer. you only want this if your url is to a zip file or some file you want to download and make a nsIArrayBufferInputStream out of it or something
+    xhr.send(null);
+}
+
+xhr('https://www.gravatar.com/avatar/eb9895ade1bd6627e054429d1e18b576?s=24&d=identicon&r=PG&f=1', data => {
+    Services.prompt.alert(null, 'XHR Success', data);
+    var file = OS.Path.join(OS.Constants.Path.desktopDir, "test.png");
+    var promised = OS.File.writeAtomic(file, new UInt8Array(data));
+    promised.then(
+        function() {
+            alert('succesfully saved image to desktop')
+        },
+        function(ex) {
+             alert('FAILED in saving image to desktop')
+        }
+    );
+});
diff --git a/files/de/mozilla/thunderbird/autokonfiguration/index.html b/files/de/mozilla/thunderbird/autokonfiguration/index.html new file mode 100644 index 0000000000..300c47d686 --- /dev/null +++ b/files/de/mozilla/thunderbird/autokonfiguration/index.html @@ -0,0 +1,146 @@ +--- +title: Automatische Konfiguration in Thunderbird +slug: Mozilla/Thunderbird/Autokonfiguration +tags: + - Administration + - enterprise +translation_of: Mozilla/Thunderbird/Autoconfiguration +--- +

Author: Ben Bucksch
+ Bitte nehmen Sie keine Änderungen an diesem Dokument vor ohne den Autor zu kontaktieren

+ +

Thunderbird 3.1 und neuer (sowie 3.0 zu einem gewissen Grad) beinhalten eine Funktion zur automatischen Konfiguration des E-Mail Kontos. Das Ziel der Autokonfiguration ist es, den Nutzern die Herstellung einer Verbindung zwischen Thunderbird und den Mail-Servern zu erleichtern. In den meisten Fällen sollten Nutzer in der Lage sein Thunderbird herunterzuladen und zu installieren sowie anschließend ihren Namen, E-Mail Adresse und Passwort in dem Einrichtungsassistenten einzugeben, wodurch sie einen voll funktionsfähigen E-Mail Client erhalten und ihre Mails so sicher wie möglich verschicken können. 

+ +

Siehe auch:

+ + + +

Dieses Dokument beschreibt wie die automatische Konfiguration in Thunderbird funktioniert und wie man E-Mail Servern die Autokonfiguration ermöglicht.

+ +

Mechanismen

+ +

Thunderbird erhält die Server-Einstellungen über verschiedene Wege, wovon jeder für einen bestimmten Fall geeignet ist:

+ + + +

All the lookup mechanisms use the email address domain as base for the lookup. For example, for the email address fred@example.com , the lookup is performed as (in this order):

+ +
    +
  1. tb-install-dir/isp/example.com.xml on the harddisk
    2. +
  2. check for autoconfig.example.com
    3. +
  3. look up of "example.com" in the ISPDB
    4. +
  4. look up "MX example.com" in DNS, and for mx1.mail.hoster.com, look up "hoster.com" in the ISPDB
    5. +
  5. try to guess (imap.example.com, smtp.example.com etc.)
    6. +
+ +

We may in the future add DNS SRV records as supported mechanism in the future, but we currently do not.

+ +

How to add support for your domain

+ +

Classification

+ +

If you are a big ISP (> 100,000 users) providing email addresses solely under a few domains like "example.com" and "example.de", you may either submit the configuration to the ISPDB or set up a configuration server.
+
+ If you support email aliases and the user's login name is not part of the email address (for example, users may have "hero@example.com" as email address, but the IMAP/POP/SMTP login name is neither "hero" nor "hero@example.com", but "u67578"), you need to set up a configuration server, which does the email address -> login name lookup.
+
+ If you host customer domains, i.e. you are "hoster.com", but your customers have "fred@flintstone.com" and "louis@kent.com" as domains, with only a few users per domain, you need to set up a configuration server (or rely on DNS MX).
+
+ If you are a small company installing Thunderbird on your employees' desktops, you can place a configuration file in the Thunderbird installation folder.

+ +

ISPDB

+ +

Database URL is <https://live.mozillamessaging.com/autoconfig/v1.1/>, append domain name, e.g. <https://live.mozillamessaging.com/autoconfig/v1.1/freenet.de>.
+
+ Current process: File a bug in Bugzilla, Product "Webtools", Component "ISPDB Database Entries", with a configuration file that matches the requirements described below.  The component is actively watched for new bugs (as of November 2015) so there is no need to request review on the file.

+ +

Configuration server at ISP

+ +

Given the email address "fred@example.com", Thunderbird first checks <http://autoconfig.example.com/mail/config-v1.1.xml?emailaddress=fred@example.com> and then <http://example.com/.well-known/autoconfig/mail/config-v1.1.xml>.

+ +

Small company

+ +

If you are a small company, you can put the XML configuration file on your web server, at URL <http://example.com/.well-known/autoconfig/mail/config-v1.1.xml>. (This is not yet finalized and subject to change.)

+ +

Domain hoster

+ +

If you are an ISP that hosts domains for your customers - for example, you are hoster.com and your customer registers fancy.com or example.com, and your servers accept and serve the mail for example.com -, you should set up an autoconfig server.

+ +

DNS

+ +

For each customer domain, you add a DNS record (in addition to the existing MX, A www etc. DNS records):
+ autoconfig IN A 10.2.3.4
+ or
+ autoconfig IN CNAME autoconfig.hoster.com.
+ ... where 10.2.3.4 and autoconfig.hoster.com are IP addresses / hostnames you own.
+ This allows Thunderbird to find you as hoster.

+ +

To make the Version without an autoconfig DNS Entry work you have to make sure that example.com points to the Webserver you will place the config-v1.1.xml on.

+ +

Example: example.com A 10.2.3.4

+ +

Web server

+ +

You set up a web server bound to a physical IP address. This may be on the same machine as other web servers, but the web server must be configured to the content to any requested domain.
+
+ You must use an virtual host that match all autoconfig.* domains of your customers. In Apache terms, you can use a "ip-based virtual host". In the Apache configuration files, that means something like: Listen 10.2.3.4:80 (of course, you use a public IP address that you own)

+ +
<VirtualHost 10.2.3.4:80> #Must be the first and only virtual host with this ip!
+    DocumentRoot /var/www/autoconfig/
+    ServerName autoconfig.hoster.com
+    <Directory /var/www/autoconfig>
+	Order allow,deny
+	allow from all
+    </Directory>
+</VirtualHost>
+ +

Place the configuration file at the URL /mail/config-v1.1.xml on that host.

+ +

All config files must be served as Content-Type: text/xml (or application/xml), otherwise the file will be ignored. Also, they must use charset UTF-8 (esp. if there are any non-ASCII-characters).

+ +

If you like to use name-based virtual hosts. You probably don't want to setup the autoconfig subdomain for every domain of your customers.
+ You can add a Rewriterule in the default virtual host (on debian /etc/apache2/sites-enabled/000-default)  to match all autoconfig.* subdomains:

+ +
<VirtualHost *:80> #Must be the first Virtual host
+	ServerAdmin webmaster@hoster.com
+	ServerName www
+	DocumentRoot /var/www
+	RewriteEngine On
+	RewriteCond %{HTTP_HOST} ^autoconfig\. [NC]
+	RewriteRule ^/(.*)	http://autoconfig.hoster.com/$1 [L,R=301,NE]
+        #...
+</VirtualHost>
+<VirtualHost *:80>
+    DocumentRoot /var/www/autoconfig/
+    ServerName autoconfig.hoster.com
+    <Directory /var/www/autoconfig>
+ 	Order allow,deny
+	allow from all
+    </Directory>
+</VirtualHost>
+
+ + + + + +

Configuration file

+ +

This is described at How to create a configuration file and defined on the sub-pages.

+ +

{{ languages( { "ja": "ja/Thunderbird/Autoconfiguration" } ) }}

diff --git a/files/de/mozilla/thunderbird/index.html b/files/de/mozilla/thunderbird/index.html new file mode 100644 index 0000000000..7bf0a47087 --- /dev/null +++ b/files/de/mozilla/thunderbird/index.html @@ -0,0 +1,75 @@ +--- +title: Thunderbird +slug: Mozilla/Thunderbird +translation_of: Mozilla/Thunderbird +--- +

Thunderbird ist Mozillas Mail- und Nachrichtenprogramm. Diese Seiten dokumentieren Thunderbird und bieten außerdem Links zu Dokumentationen über das MailNews-Backend, welches in weiteren Projekten wie Eudora/Penelope, Seamonkey und Correo genutzt wird.

+

Thunderbird ist das Geschwisterkind von Firefox und auf der gleichen technischen Platform aufgebaut wie der Web-Browser. Nach vielen Jahren der Entwicklung ist Thunderbird einer der meist genutzen, quelloffenen Mail-Clients und wird von Millionen von Menschen weltweilt genutzt, um alle ihre Mail-Accounts, Newsgroups und Nachrichtenfeeds in einer bekannten, hochproduktiven Umgebung zusammenzubringen. (Von Anfang 2007 bis Anfang 2011 wurde Thunderbird von Mozilla Messaging entwickelt, einer Tochtergesellschaft von Mozilla.)

+ + + + + + + +
+

Dokumentation

+
+
+ Thunderbird erstellen
+
+ Informationen über das Erstellen von Thunderbird-Builds mit dem comm-central Repository. Es gibt außerdem Infos darüber,  wie comm-central arbeitet, wie der Bewertungsprozess läuft  und wie der Mozilla Symbol-Server Hilfe zum Debuggen anbietet.
+
+ MailNews Protokolle
+
+ Eine - eher ungenaue - Dokumentation über Mailprotokolle...
+
+ Datenbankzugriffe
+
+ Informationen über das Backend von {{ Interface("nsIMsgDBView") }} und verwandten Schnittstellen...
+
+ Thunderbird API-Dokumentation
+
+ Die Dokumentation über Thunderbirds Programmierschnittstellen (APIs)
+
+ Dokumentationen von Erweiterungen
+
+ Einführungen und Tipps zum Erstellen von Erweiterungen für Thunderbird
+
+ Automatisiertes Testen
+
+ Details über automatisiertes Testen von Thunderbird
+
+ Thunderbird in Firmen
+
+ Hilfe beim Entwickeln von Thunderbird für große Organisationen
+
+

Alle anzeigen...

+ 		+

Community

+ +

Tools

+ + + +
+

 

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html new file mode 100644 index 0000000000..d6209dea6a --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension/index.html @@ -0,0 +1,57 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 1: Einleitung' +slug: Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension +tags: + - Addons + - Erweiterungen + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension +--- +

{{AddonSidebar}}

+ +

Thunderbird ist eine von der community gemanagete Open-Source Emailanwendung. Sie verwendet viele der Technologien, die auch Mozilla Firefox verwendet, einschließlich  JavaScript, der Gecko Layout Engine, der XUL XML User Interface Language und dem XPCOM plattformübergreifenden Komponentenobjektmodell . Ähnlich wie bei Firefox kann die Funktionalität von Thunderbird durch Erweiterungen erweitert und angepasst werden.

+ +

Hinweis: Diese Dokumentationsserie ist noch nicht für die Firefox Version 60 aktualisiert.  Thunderbird 60, das im Sommer 2018 veröffentlicht wurde, führt Veränderungen bei Erweiterung ein, die im Thunderbird 57-60 add-ons guide dokumentiert sind.

+ +

Dieses Tutorial dient der Einführung in die Komponenten einer Thunderbird-Erweiterung und es wird gezeigt, wie man seine eigene Erweiterung entwickelt. Das Tutorial setzt sich aus folgenden Seiten zusammen:

+ +
    +
  1. Einleitung (Diese Seite)
    2. +
  2. Das Erweiterungsdateisystem (das lokale System vorbereiten und aufsetzen)
    3. +
  3. Installation des manifests (Die install.rdf Datei. Sie beinhaltet die Metainformationen der Erweiterung)
    4. +
  4. Chrome Manifest (Eine Liste von Packages und Overlays)
    5. +
  5. XUL (Die XML User Interface Language, die eingesetzt wird, um die Benutzeroberfläche von Thunderbird zu verändern)
    6. +
  6. Hinzufügen von JavaScript (beschreibt wie man seiner Thunderbird-Erweiterung simplen JavaScriptcode hinzufügen kann)
    7. +
  7. Lokale Installation (Aktivieren der Erweiterung in der lokalen Thunderbirdinstanz)
    8. +
  8. Packaging (Erstellen eines Distributionspakets, das die Erweiterung beinhaltet)
    9. +
  9. Veröffentlichung (auf der eigenen Website oder auf https://addons.mozilla.org/)
    10. +
+ +

Dieses Tutorial ist kompatibel mit den Thunderbirdversionen 2, 3 und 5. Alle Thunderbird Builds sind auf dieser FTP-Seite verfügbar.

+ +

Verweise und Ressourcen

+ +

Tools und Hilfserweiterungen

+ +

Es gibt viele Tools, die dabei helfen Thunderbird-Erweiterungen zu entwickeln. Das Mindeste, was benötigt wird:

+ + + +

Darüber hinaus gibt es eine große Zahl von Erweiterungen und Anwendungen, die nützlich sind zum Testen und Debuggen von Thunderbird-Erweiterungen, wie z. B. JavaScript-Konsolen und XPCOM Inspektoren. Diese werden auf der Seite "Aufsetzen einer Erweiterungs-Entwicklungsumgebung" beschrieben.

+ +

Dokumentation

+ + + +

Community

+ +

Die Thunderbird-Development-Community hat eine Mailing-Liste mit einem umfangreichen und durchsuchbaren Archiv. Es lässt sich auch mit der Community sprechen über den #maildev IRC channel.

+ +

{{ Next("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_2:_Erweiterungs-Dateisystem") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html new file mode 100644 index 0000000000..69c95d4d01 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_3_colon__install_manifest/index.html @@ -0,0 +1,61 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 3: Manifest installieren' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest +tags: + - Addons + - Erweiterungen + - thunderbird +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest +--- +

{{AddonSidebar}}

+ +

Die install.rdf Datei ist eine XML-Datei, die allgemeine Informationen zur Erweiterung enthält.

+ +

Öffne die Datei namens install.rdf, die du oben in der Erweiterungsverzeichnishierarchie erstellt haben, und füge den folgenden Text in die Datei ein:

+ +
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+    <em:id>myfirstext@jen.zed</em:id>
+    <em:name>My First Extension</em:name>
+    <em:version>1.0</em:version>
+    <em:creator>jenzed</em:creator>
+
+    <em:targetApplication>
+      <Description>
+        <em:id>{3550f703-e582-4d05-9a08-453d09bdfdc6}</em:id>
+        <em:minVersion>1.5</em:minVersion>
+        <em:maxVersion>5.0.*</em:maxVersion>
+      </Description>
+    </em:targetApplication>
+
+  </Description>
+</RDF>
+
+ +

 Die folgende Elemente (Fett markiert) sollten für deine Erweiterung verändert werden:

+ + + +

Es gibt weitere optionale Elemente, die in install.rdf angegeben werden können. Diese werden auf der Seite Installationsmanifeste beschrieben. Beachte, dass Elemente in beliebiger Reihenfolge angegeben werden können, solange sie dem Knoten <Description> untergeordnet sind.

+ +

{{ Previous("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_2:_Erweiterungs-Dateisystem") }}

+ +

{{ Next("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_4:_Chrome_Manifest") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html new file mode 100644 index 0000000000..4448e0b311 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_7_colon__installation/index.html @@ -0,0 +1,58 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 7: Installation' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation +--- +

{{AddonSidebar}}

+ +

Während du die Erweiterung entwickelst, gibt es zwei Möglichkeiten, wie du Thunderbird die Erweiterung laden lässt, um sie zu testen. Du kannst den Ordner mit den Erweiterungsdateien entweder direkt im Erweiterungsordner von Thunderbird ablegen oder eine Datei dort ablegen, die Thunderbird mitteilt, wo sich deine Erweiterung befindet. (In Schritt 8 erfährst Du, wie Du eine .xpi-Datei für die Veröffentlichung und Installation erstellst.)

+ +

Um den Erweiterungsordner von Thunderbird zu finden, navigiere zum Profilverzeichnis von Thunderbird und öffne den Ordner extensions /. Je nach Betriebssystem befindet es sich an einem der folgenden Speicherorte:

+ + + +
Um sicherzustellen, dass deine aktuellen E-Mails und Einstellungen während des Tests nicht durcheinander geraten, ist es sicherer, bei der Entwicklung von Erweiterungen ein Testprofil anstelle deines Standardprofils zu verwenden. In diesem Artikel der Mozilla-Knowledgedatenbank erfahren Sie, wie Sie mehrere Profile einrichten.
+ +
Wenn das Verzeichnis extensions/ noch nicht existiert, musst du es erstellen.
+ +

Verwenden einer Textdatei zum Verweisen auf deine Erweiterungsdateien (empfohlen):

+ +
    +
  1. Wenn Du deine Erweiterung in einem anderen Ordner entwickelst (z.B. "...\Dokumente\Code\Thunderbird Erweiterungen\myfirstext@jen.zed\"), kannst Du eine Textdatei im Ordner extensions/ erstellen, die auf deine Erweiterung verweist. Der Name der Textdatei muss genau dem Wert von <em:id> aus install.rdf entsprechen. In unserem Fall erhält die Datei den Namen myfirstext@jen.zed.
    2. +
  2. Die Datei muss eine einzige Zeile mit dem absoluten Pfad der Erweiterung enthalten. +
    +
    Der Ordner, auf den verwiesen wird, muss mit dem Wert von <em: id> von install.rdf identisch sein.
    + +
    .C:\Users\<Nutzername>\Documents\Code\Thunderbird Erweiterungen\myfirsttext@jen.zed\
    +
    +
    3. +
+ +

Die Erweiterungsdatei direkt in den Erweiterungsordner einfügen (Alternativ):

+ +
    +
  1. Nachdem du den Ordner extensions/ geöffnet hast, erstelle einen Unterordner mit dem Namen deiner Erweiterung. Dieser Name muss genau der ID des Feldes <em:id> in der Datei install.rdf entsprechen. In unserem Fall heißt der Ordner: myfirstext@jen.zed/. Je nach Format Ihrer ID kann der Ordnername auch eine GUID sein.
    2. +
+ +

Jetzt können Sie Thunderbird starten. Thunderbird wird die Erweiterung erkennen und versuchen, sie zu laden.

+ +

Informationen zum Einrichten eines Entwicklerprofils und zum Aktivieren von Debugging-Funktionen findest Du unter Setting up extension development environment.

+ +

Du kannst jetzt zurückgehen und Änderungen an der .xul-Datei vornehmen. Wenn Du Thunderbird schließst und neu startest, sollten sie angezeigt werden.

+ + + +
+
+
Es besteht auch die Möglichkeit, Thunderbird mit dem Firefox-Debugger zu Remote-debuggen. In diesem Artikel der Mozilla-Knowledgedatenbank erfährst du, wie du das Remote-Debugging einrichtest.
+
+
+ +

{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_6:_Javascript_hinzufuegen", "Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html new file mode 100644 index 0000000000..d33997f94e --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_8_colon__packaging/index.html @@ -0,0 +1,24 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 8: Packaging' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging +--- +

{{AddonSidebar}}

+ +

Wenn Du mit den Funktionen deiner Erweiterung zufrieden bist, packe sie für die Bereitstellung und Installation.

+ +

Zipe den Inhalt des Erweiterungsordners (nicht den Erweiterungsordner selbst) und benenne die ZIP-Datei um, so dass sie die Endung .xpi hat. In Windows 7 wähle alle Dateien und Unterordner im Erweiterungsordner aus, klicke mit der rechten Maustaste und wähle "Senden an -> Komprimierter (gezippter) Ordner". Eine ZIP-Datei wird erstellt. Umbenennen und fertig!

+ +

Unter Mac OS X kannst Du mit der rechten Maustaste auf den Inhalt des Erweiterungsordners klicken und "Archiv erstellen ..." wählen, um die ZIP-Datei zu erstellen. Seit Mac OS X zum Verfolgen von Dateimetadaten ausgeblendete Dateien in Ordner hinzufügte, solltest Du stattdessen das Terminal verwenden, die versteckten Dateien löschen (deren Namen mit einem Punkt beginnen) und dann den Befehl zip in der Befehlszeile zum Erstellen der Zip-Datei verwenden. Die Dateien haben normalerweise den Namen .DS_Store.

+ +

Unter Linux solltest Du ebenfalls das Befehlszeilen-Zip-Tool verwenden.

+ +
 cd ~/Erweiterungen/Meine_Erweiterungen
+ zip -r ../sample.xpi *
+
+ +

Wenn er in das Verzeichnis (Benutzerprofil)/extension eingefügt wird, öffnet Thunderbird die xpi-Datei, überprüft die ID in der Datei install.rdf und erstellt dieses Verzeichnis für Ihr Package. Es wird dann in dieses Verzeichnis kopiert und die Dateien werden entpackt, wodurch eine Kopie deiner ~/Erweiterung/Meine_Erweiterungen-Verzeichnisstruktur und -Dateien erstellt wird.

+ +

{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation", "Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_9:_distributing") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html new file mode 100644 index 0000000000..8177b45f65 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/building_a_thunderbird_extension_9_colon__distributing/index.html @@ -0,0 +1,24 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 9: Verbreitung' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_9:_distributing +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_9:_distributing +--- +

{{AddonSidebar}}

+ +

Verwenden von addons.mozilla.org

+ +

Die Website addons.mozilla.org ist eine Veröffentlichungssite, auf der Du deine Erweiterung kostenlos hosten kannst. Deine Erweiterung wird im Mirror-Netzwerk von Mozilla gehostet werden. Die Mozilla-Site bietet Benutzern eine einfachere Installation und stellt Benutzern deiner älteren Versionen automatisch neue Versionen zur Verfügung, wenn Du sie hochlädst. Darüber hinaus können Benutzer mit Mozilla Update deine Erweiterung kommentieren und Feedback geben.Es ist empfohlen, AMO zu verwenden.

+ +

Besuche http://addons.mozilla.org/developers/, um ein Konto zu erstellen und mit dem Veröffentlichen deiner Erweiterungen zu beginnen. Beachte, dass deine Erweiterung schneller genehmigt und häufiger heruntergeladen wird, wenn Du eine gute Beschreibung und Screenshots der Erweiterung in Aktion hast.

+ +

Installation von einer Webseite

+ +

Es gibt verschiedene Möglichkeiten, Erweiterungen von Webseiten zu installieren, einschließlich der direkten Verknüpfung mit den XPI-Dateien und der Verwendung des InstallTrigger-Objekts. Erweiterungs- und Web-Autoren sollten die InstallTrigger-Methode zum Installieren von XPIs verwenden, da sie den Benutzern die beste Benutzererfahrung bietet.

+ +

Registrieren von Erweiterungen in der Windows-Registry

+ +

Unter Windows können der Registry Informationen zu Erweiterungen hinzugefügt werden. Die Erweiterungen werden beim nächsten Start der Anwendung automatisch abgerufen. Auf diese Weise können Anwendungsinstallationsprogramme Integrations-Hooks als Erweiterungen hinzufügen. Weitere Informationen finden Sie unter Adding Extensions using the Windows Registry.

+ +

{{ Previous("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_8:_packaging") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html new file mode 100644 index 0000000000..4f227fe3d1 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/ein_thunderbird_addon_programmieren_5_colon__xul/index.html @@ -0,0 +1,43 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 5: XUL' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Ein_Thunderbird_Addon_programmieren_5:_XUL +tags: + - Addons + - Erweiterung + - thunderbird +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_5:_XUL +--- +

{{AddonSidebar}}

+ +

Thunderbirds Nutzerinterface ist in XUL und JavaScript geschrieben. XUL ist eine XML Art, die Nutzerinterfacewidgets wie Knöpfe, Menüs, Toolbars, Trees etc. bietet. Wir fügen Widgets hinzu, indem wir neue XUL DOM Elemente in das Programmfenster hinzufügen und sie mit Scripts und angehängten Event Handlern modifizieren. Während XUL die Elemente des Nutzerinterfaces bietet, sind die Aktionen in JavaScript geschrieben.

+ +

Bei unserer erster Erweiterung fügen wir Text in die Thunderbird Statusbar ein. Die Statusbar ist ist in einer XUL Datei namens messenger.xul implementiert, die sich im chrome/messenger/content/messenger  Ordner innerhalb des omni.ja Archives befindet. Um diese XUL Datei lesen zu können, nutze die DOM Inspector Erweiterung (Nicht mehr ünterstützt) oder schau in das omni.ja Archiv, welches sich im Thunderbird Programmordner befindet. omni.ja kann ganz einfach durchsucht werden, indem man die Datei an einen anderen Speicherplatz kopiert und sie in omni.zip umbenennt. Solltest du mit einem Zip Manager Probleme haben (wie 7Zip), nutze einen anderen (wie WinRAR). In messenger.xul finden wir die Statusbar, welche ungefähr so ausschaut:

+ +
<statusbar id="status-bar" ...>
+ ... <statusbarpanel>s ...
+</statusbar>
+
+ +

<statusbar id="status-bar"> ist ein "Zusammenführungspunkt" für ein XUL Overlay. XUL Overlays sind eine Methode, andere UI Widgets zu einem XUL Dokument anzuhängen, sobald die Erweiterung startet. Ein XUL Overlay ist eine .xul Datei die XUL-Fragmente spezifiziet, um sie bei bestimmten Zussamenführungspunkten innerhalb eines "Haupt"-Dokuments" einzufügen. Diese Fragmente können Widgets zum Einfügen, Entfernen oder Bearbeiten spezifizieren. In diesem Beispiel fügst du eine Linie der Statusbar hinzu. Deshalb wird es zu einem Element mit der ID "Statusleiste". Das zeigt, wie die Thunderbirdarchitektur Erweiterungen erlaubt, die Nutzererfahrung zu ändern, ohne dabei die Installationsdateien zu ändern. Das erlaubt auch Versionsunabhängigkeit zwischen Thunderbird und Thunderbird-Erweiterungen.

+ +

Beispiel XUL Overlay Dokument

+ +

Erstelle eine neue Datei namens myhelloworld.xul innerhalb des content Ordners, den du vorhin erstellt hast, mit folgendem Inhalt:

+ +
<?xml version="1.0"?>
+<overlay id="sample"
+xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+ <script type="application/javascript" src="chrome://myfirstext/content/overlay.js"/><!-- A reference to your JavaScript file -->
+ <statusbar id="status-bar">
+  <statusbarpanel id="my-panel" label="Date"/>
+ </statusbar>
+</overlay>
+
+ +

Das <statusbar> Widget names status-bar spezifiziert den Zusammenführungspunkt innerhalb des Programmfensters, das wir anhängen wollen. Wenn unsere Overlay Datei geparsed wird, nimmt die XUL Engine alle Unterelemente des <statusbar> Tags und führt die mit dem orginalen XUL Dokuments <statusbar> Tag zusammen. In dem Bespiel überhalb haben wir ein neues <statusbarpanel> Element definiert (Das als my-panel bezeichnet wird), das eine neue Instanz dieses Widgettyps erstellt und am Ende der Statusbar hinbaut. In Thunderbird erscheint es als Label auf der rechten Seite der Statusbar von Thunderbird und zeigt "Date" an.  Wir haben auch einen <script> Tag geschrieben, der eine Refezenz zur JavaScript Datei overlay.js beinhaltet. In der nächsten Sektion wirst du lernen, wie du JavaScript nutzt um dein Label so zu modifizieren, dass es das momentane Datum anzeigt.

+ +
Die overlay.js Datei wird in einer späteren Sektion erstellt. Deine Erweiterung wird auch ohne diese Datei funktionieren. Momentan kannst du diese Linie ignorieren, aber erinnere dich daran, dass das hier ist, wie du auf eine JavaScript Datei verweist.
+ +

{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_4:_Chrome_Manifest", "Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_6:_Javascript_hinzufuegen") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html new file mode 100644 index 0000000000..f023c7b8c8 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_2_colon__erweiterungs-dateisystem/index.html @@ -0,0 +1,31 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 2: Erweiterungs-Dateisystem' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_2:_Erweiterungs-Dateisystem +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_2:_extension_filesystem +--- +

{{AddonSidebar}}

+ +

Erweiterungen sind in Archiv-Dateien (Auch Bundles genannt) mit der XPI ( “zippy” ausgesprochen)-Dateiendung gepackt und verteilt. Sie enthalten mindestens eine install.rdf, ein chrome.manifest und einen "chrome/ Ordner. Ein content/ Ordner enthält manchmal die eigentlichen Kontentdateien. Diese Dateien enthalten den Code, der deine Erweiterung etwas machen lässt. Wenn dieses Tutorial fertig ist, wird unsere Erweiterung so ausschauen:

+ +
myfirstext.xpi:                                //Erstellt in Schritt 8
+              /install.rdf                     //Erstellt in Schritt 3
+              /chrome.manifest                 //Erstellt in Schritt 4
+              /chrome/
+              /content/
+              /content/myhelloworld.xul        //Erstellt in Schritt 5
+              /content/overlay.js              //Erstellt in Schritt 6
+              /chrome/locale/*                 //Erstellen einer Erweiterungslokalisierung
+              /chrome/skin/
+              /defaults/preferences/           // Erstellen von Erweiterungs-Standarddateien
+
+ +

Die folgende Tutorialseiten werden erklären, wie man jede dieser Dateien schreibt (Außer locale/ und defaults/) und sie in eine XPI (zippy) Datei packt. Du kannst Informationen über die locale/ und defaults/ Ordner in der allgemeineren "Building an Extension" Dokumentation.

+ +

Um mit dem Tutorial zu starten, erstelle manuell die anfängliche Verzeichnisstruktur für die Erweiterung, wie sie oben in einem Ordner namens myfirstext@jen.zed dargestellt ist. Dieses Verzeichnis kann an einem beliebigen Ort im Dateisystem erstellt werden.

+ +


+ {{ Previous("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension") }}

+ +

{{ Next("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html new file mode 100644 index 0000000000..639204a1ef --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_4_colon__chrome_manifest/index.html @@ -0,0 +1,44 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 4: Chrome Manifest' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_4:_Chrome_Manifest +tags: + - Addons + - Extensions + - thunderbird +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_4:_chrome_manifest +--- +

{{AddonSidebar}}

+ +

Die Datei namens chrome.manifest teilt Thunderbird mit, welche Packages und Overlays von der Erweiterung bereitgestellt werden. Öffne die von dir erstellte Datei chrome.manifest und füge diesen Code hinzu:

+ +
content     myfirstext    content/
+
+ + + +

Diese Zeile besagt, dass wir für ein Chrome-Package myfirstext die Kontentdateien im Verzeichnis content/ finden können (das ist ein Pfad relativ zum Speicherort von chrome.manifest).

+ +

Um die Thunderbird-Benutzeroberfläche so zu ändern, dass sie die Erweiterung unterstützt, erstelle ein Overlay und führe es mit dem Standard Thunderbird-Interface zusammen. Im weiteren Verlauf des Tutorials werden wir eine XUL-Overlay-Datei erstellen, die mit der Standarddatei messenger.xul zusammengeführt wird. An dieser Stelle legen wir in chrome.manifest die Existenz des Overlays fest (das wir später erstellen werden).

+ +
+
 
+
+ +

Füge diese Zeile am Ende von chrome.manifest hinzu:

+ +
+
overlay chrome://messenger/content/messenger.xul chrome://myfirstext/content/myhelloworld.xul
+
+ +

Dies sagt Thunderbird, dass myhelloworld.xul beim Laden von messenger.xul mit messenger.xul zusammengeführt wird. Weitere Informationen zu Chrome-Manifesten und den unterstützten Eigenschaften findest du in der Chrome-Manifestreferenz.

+
+ +
Es kann hilfreich sein, eine Erweiterung wie den DOM Inspector zu installieren, um das Layout der vorhandenen XUL-Dateien besser zu verstehen und eigene Overlays zu debuggen. (nicht unterstützt ab Thunderbird 60)
+ +

{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_3:_install_manifest", "Mozilla/Thunderbird/Thunderbird_extensions/Ein_Thunderbird_Addon_programmieren_5:_XUL") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html new file mode 100644 index 0000000000..959e9dc753 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/eine_thunderbird-erweiterung_programmieren_6_colon__javascript_hinzufuegen/index.html @@ -0,0 +1,53 @@ +--- +title: 'Eine Thunderbird-Erweiterung programmieren 6: JavaScript hinzufügen' +slug: >- + Mozilla/Thunderbird/Thunderbird_extensions/Eine_Thunderbird-Erweiterung_programmieren_6:_Javascript_hinzufuegen +translation_of: >- + Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_6:_Adding_Javascript +--- +

{{AddonSidebar}}

+ +

In diesem Schritt erstellen wir ein kleines Stück JavaScript-Code, der das aktuelle Datum ins Statusleisten-Widget einfügt. Die Statusleiste wird normalerweise am unteren Rand des Thunderbird-Fensters angezeigt. Je nach installiertem Theme sieht das Ergebnis etwa so aus:

+ +

current_date.png

+ +

XUL Elemente mit JavaScript modifizieren

+ +
+
Speichere den folgenden JavaScript-Code im content/ Ordner neben der Datei myhelloworld.xul und nenne ihn overlay.js.
+
+ +
window.addEventListener("load", function(e) {
+	startup();
+}, false);
+
+window.setInterval(
+	function() {
+		startup();
+	}, 60000); //Aktualisiert das Datum jede Minute
+
+function startup() {
+	var myPanel = document.getElementById("my-panel");
+	var date = new Date();
+	var day = date.getDay();
+	var dateString = date.getFullYear() + "." + (date.getMonth()+1) + "." + date.getDate();
+	myPanel.label = "Date: " + dateString;
+}
+ +

Der erste Teil registriert einen neuen Ereignis-Listener, der beim Laden von Thunderbird automatisch ausgeführt wird. Der Ereignis-Listener ruft dann die Startup-Funktion auf, die unser <statusbarpanel> -Element mit der ID my-panel aus dem DOM-Tree des Dokuments erhält.Dann verwendet es die Date-Klasse von JavaScript, um das aktuelle Datum abzurufen, das in eine String konvertiert wird, der das Format YYYY.MM.DD hat.Da der Monat nullbasiert ist, müssen wir beim Monat eins addieren. Schließlich wird das Label unseres Panels auf "Date:" gesetzt und mit der Datums-String verkettet, die das formatierte Datum enthält.

+ +

Wir verwenden die Funktion window.setInterval, um das Datum zu aktualisieren, falls Thunderbird länger als einen Tag läuft.. Dadurch können wir die Startup-Funktion wiederholt mit einem Intervall von 60000 ms (jede Minute) aufrufen.

+ +

Weitere Dokumentation

+ +

Weitere Funktionen für die DOM-Objekte findest du unter:

+ + + +

Das Javascript Cheat Sheet kann auch sehr nützlich sein.

+ +

{{ PreviousNext("Mozilla/Thunderbird/Thunderbird_extensions/Ein_Thunderbird_Addon_programmieren_5:_XUL", "Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension_7:_Installation") }}

diff --git a/files/de/mozilla/thunderbird/thunderbird_extensions/index.html b/files/de/mozilla/thunderbird/thunderbird_extensions/index.html new file mode 100644 index 0000000000..8dba5ff294 --- /dev/null +++ b/files/de/mozilla/thunderbird/thunderbird_extensions/index.html @@ -0,0 +1,138 @@ +--- +title: Thunderbird extensions +slug: Mozilla/Thunderbird/Thunderbird_extensions +tags: + - Add-ons + - Extensions + - NeedsTranslation + - TopicStub + - thunderbird +translation_of: Mozilla/Thunderbird/Thunderbird_extensions +--- +
Entwickeln einer Thunderbird Erweiterung
+Schritt-für-Schritt Anleitung zur Erstellung einer Erweiterung für Thunderbird.
+ +
+

{{AddonSidebar}}

+Die nachfolgende Dokumentation dient als Hilfestellung zur Entwicklung von Erweiterungen für den Thunderbird email client. Ähnlichkeiten zu den Firefox extensions sind vorhanden, jedoch ebenso Unterschiede die den zukünftigen Thunderbird Entwickler verwirren können. Diese Dokumentenreihe beschäftigt sich mit Thunderbird.
+ +

+Sie benötigen Hilfe zu einem spezifischen Thema? Fragen Sie die Community / Communications.
+ +
+ +
Bitte helfen Sie! Sie können ein how-to (eine Frage, eine Antwort, ein Codeschnipsel), eine relevante newsgroup Diksussion zusammenfassen und verlinken oder ein Tutorial verfassen.
+ +
+ + + + + + + + +
+

Dokumentation

+ +

Erste Schritte mit Thunderbird

+ +

Ein mutiger, junger Entwickler möchte eine eine Erweiterung für Thunderbird entwickeln. Nachfolgende Links helfen ihm auf dieser Reise.  Hinweis: Diese Dokumentation wurde noch nicht für Version 60 aktualisiert.

+ +
    +
  • Beginnen Sie mit dem Studium des Tutorials und lernen Sie, wie Sie eine Thunderbird Erweiterung erstellen können.  Beachten Sie auch den Thunderbird 57-60 add-ons guide für mit Thunderbird 60 eingeführte Änderungen.
    • +
  • Erfahren Sie mehr über die Hauptfenster und lernen Sie die « thread pane », « preview pane », und « folder pane » kennen.
    • +
  • Spielen Sie mit einem demo add-on welches erweiterte Thunderbird-spezifische features bietet.
    • +
  • Sie möchten mehr tun?  Erfinden Sie nicht das Rad neu: bedienen Sie sich bei dem thunderbird-stdlib Projekt (Doku hier). Funktionen zum Umgang mit Nachrichten (löschen, archivieren, tags ändern, etc.) sind hier enthalten. MailUtils.js.
    • +
  • Nicht das gefunden, was Sie benötigen? Lesen Sie die Thunderbird how-tos; sie enthalten viele Vorgehensweisen für Dinge, die Erweiterungen tun möchten.
    • +
  • Sie hängen fest?  Fragen Sie in einem Kommunikationskanal (auf der rechten Seite) nach.
    • +
  • Richtig mutig? Lesen Sie den source in einer ausgefallenen Oberfläche fancy interface (der Link ist tot); Sie können oftmals Tests finden, die zeigen was Sie versuchen zu erreichen.
    • +
+ +

Die Gloda Datenbank

+ +

Thunderbird verfügt über ein subsystem Namens Gloda. Gloda steht für « Global Database », und erzeugt Thunderbird-weite Beziehungen zwischen Objekten. Gloda stellt Konzepte wie Unterhaltungen, Nachrichten, Identitäten, Kontakte zur Verfügung. Alles diese Konzepte sind verbunden: Eine Unterhaltung enthält Nachrichten, die mit Identitäten verknüpft sind (from Feld, to Feld), die widerum selbst Teil eines Kontaktes sind. Tatsächlich: ein Kontakt hat mehrere Identitäten.

+ +

Typischer Anwendungsfall für Gloda: Finde alle Nachrichten deren Betreff übereinstimmt [Suchbegriff], finde alle Nachrichten von [Person], finde alle Nachrichten im gleichen Thread wie [eine vorgegebene Nachricht], finde alle Nachrichten mit [Person] etc. etc.

+ +

Gloda ist extrem mächtig und wird sehr stark von add-ons wie z. B. Thunderbird Conversations genutzt.
+ Erfahren Sie mehr über Gloda:

+ + + + + +

Manche Links können veraltet sein, jedoch stellten sie immer noch wertvolle Informationen zur codebase zur Verfügung.

+ + + + + + + 		+

Community / Communications

+ +

Thunderbird spezifisch :

+ + + +

Mehr allgemein :

+ + + +

Tools

+ + + +

... weitere Tools ...

+ +

Alle anzeigen...

+ + + +
+
XUL, JavaScript, XPCOM, Themes, Developing Mozilla
+
+
+ +

Categori

diff --git a/files/de/mozilla/verbinden/index.html b/files/de/mozilla/verbinden/index.html new file mode 100644 index 0000000000..a103f9d5f9 --- /dev/null +++ b/files/de/mozilla/verbinden/index.html @@ -0,0 +1,94 @@ +--- +title: Mit Mozilla verbinden +slug: Mozilla/Verbinden +tags: + - Landung +translation_of: Mozilla/Connect +--- +
+

Ermöglichen, inspirieren und zusammenarbeiten damit das Internet die primäre Plattform wird um auf allen verbundenen Endgeräten Erlebnisse zu erschaffen.

+
+ + +
+
+
+
+

Hacks blog

+ +

Eine wichtige Quelle für Menschen die für das offene Internet entwickeln. Der Mozilla Hacks blog bietet Neuigkeiten und Diskussionen zu den neusten Web Technolgien und Browser Eigenschaften.

+ +
jetzt lesen
+
+
+ +
+
+

Hilfe Q&A

+ +

Treten Sie der Diskussion über das Web und Web apps auf Stack Overflow bei, dort können Sie Ideen mit anderen Webentwicklern austauschen.
+ {{anch("Developer discussions", "Search the Q&A below")}}

+ +
Mozilla Q&A auf Stack Overflow
+
+
+ +
+
+

MDN beitreten

+ +

Melden Sie sich bei MDN an! Sie werden in der Lage sein Dokumentationen zu bearbeiten, können unseren Newsletter abonnieren und bekommen Zugriff auf neue Features sobald wir diese veröffentlichen.

+ +
Beitreten oder einloggen
+
+
+
+ +
+

Mit Mozilla verbinden

+Entwickler erschaffen die Zukunft indem Sie Dienste und Apps für Menschen auf der ganzen Welt aufbauen. Das Ziel der Mozilla Entwickler Beziehung ist es Entwickler dabei zu unterstützen offene und standardisierte Web Technologien zu verwenden um damit erfolgreich Ihre Ziele zu erreichen. Zusätzlich zu der Dokumentation hier auf MDN bieten wir auf verschiedenen anderen Kanälen Hilfe und Ressourcen an um dieses Ziel zu erreichen. Wir laden Sie ein sich zu beteiligen, zu lernen und Ihr eigenes Wissen zu teilen.
+Um spezielle technische Fragen und Herausforderungen zu beantworten, bieten wir Hilfe über Q&A auf Stack Overflow. Unser Newsletter hält Sie über die neusten Ereignisse in der Webszene rund um Web Apps und andere Themen auf dem Laufenden.
+Wir haben viele Pläne und Ideen um unsere Entwickler Beziehungen iterativ auszubauen, wir möchten dich beteiligen genau wie wir es sind.  Folgen Sie den Tags auf Stack Overflow, Abonnieren Sie den Hacks blog, und Melden Sie sich für einen Account an!
+ +
+
+

Q&A auf Stack Overflow Ansicht aller Q&A...

+ +

Wir haben ein Q&A um Herausforderungen und Fragen beim Entwickeln zu diskutieren. Insbesondere für Firefox OS und open Web auf Handys. Zu finden auf Stack Overflow unter der einfachen URL http://stackoverflow.com/r/mozilla.

+ + +
Stack Formular
+ +

Neuste Q&A Themen

+
+ +
 
+
+ +

Developers at a Firefox OS workshop in Madrid.

+ +
+
+

Wo ist Mozilla? Sehen Sie Teilnehmer und Einzelheiten auf unserer Veranstaltungseite...

+ +

Hier ist eine Liste von Mozilla Repräsentanten die auf einer Veranstaltung in Ihrer Nähe sprechen. Sprechen Sie mit Ihnen!

+
+ +
+

weitere Ressourcen

+ + +
+
+
+ +

 

diff --git "a/files/de/mozilla/\303\274ber_colon_omni.ja_(ehemals_omni.jar)/index.html" "b/files/de/mozilla/\303\274ber_colon_omni.ja_(ehemals_omni.jar)/index.html" new file mode 100644 index 0000000000..381dc0e052 --- /dev/null +++ "b/files/de/mozilla/\303\274ber_colon_omni.ja_(ehemals_omni.jar)/index.html" @@ -0,0 +1,62 @@ +--- +title: Über omni.ja (ehemals omni.jar) +slug: 'Mozilla/Über:omni.ja_(ehemals_omni.jar)' +tags: + - Firefox + - Gecko + - Guide + - Mozilla +translation_of: Mozilla/About_omni.ja_(formerly_omni.jar) +--- +

{{ gecko_minversion_header("2.0") }}

+ +

Firefox und Thunderbird erreichen Verbesserungen der Performance, indem sie viele ihrer internen Teile, bestehend aus einzelnen Dateien oder mehreren  JAR-Dateien in eine einzige JAR-Datei,  omni.ja genannt, auslagern; dies reduziert die I/O-Menge, die benötigt wird, um die Anwendung zu laden. Seit Firefox und Thunderbird 10 wird die Dateierweiterung .ja genutzt, weil die Windows Systemwiederherstellung Dateien mit der .jar Erweiterung nicht sichert,  .ja Dateien dagegen schon.

+ +

omni.ja inspizieren

+ +
Hinweis: Während der Extrahierung von omni.ja könnten Fehlmeldungen einiger Antivirenprogramme auftreten.
+ +

Einige Kompressionsprogramme und Archive ( jede Version von 7-Zip mit einbezogen) können omni.ja aufgrund der Optimierungen, die in der Datei angewendet wurden, zurzeit nicht lesen. Windows 7 Nutzern wird empfohlen die Datei zu entpacken, indem sie in omni.zip umbenannt wird und sie mit Windows Explorer zu extrahieren. Nutzer älterer Versionen von Windows können das InfoZip's UnZip tool verwenden, um Dateien zu entpacken - fertigen sie eine Kopie von omni.ja an und bewegen sie es per Drag n' Drop auf unzip.exe.

+ +

omni.ja ist auch aus der anderen Richtung mit Zip-Dateien inkompatibel; das Bearbeiten extrahierter Dateien wird Firefox nicht beeinflussen und wieder zurückgepackte editierte Dateien könnten Firefox zum Absturz bringen, wenn sie während des Packens nicht die richtigen Einstellungen nutzen. Der korrekte Befehl, um Dateien in omni.ja zu packen, ist:

+ +
zip -qr9XD omni.ja *
+ +
Hinweis: Vor dem Erscheinen von Firefox 10 und Thunderbird 10, wurde die omni.ja  noch omni.jar genannt.
+ +

Die Inhalte von omni.ja

+ +

omni.ja enthält ausgewählte Programmressourcen:

+ +
+
chrome.manifest
+
Das chrome Manifest.
+
/chrome/
+
UI-Dateien der Anwendung
+
/chrome/localized.manifest
+
Manifest für lokalisierten Inhalt; bezieht sich auf das chrome Manifest.
+
/chrome/nonlocalized.manifest
+
Manifest für nicht lokalisierten Inhalt; bezieht sich auf das chrome Manifest.
+
/components/
+
XPCOM-Komponenten, auf die sich die Anwendung stützt.
+
/defaults/
+
Standarddateien.
+
/modules
+
JavaScript Codemodule.
+
/res/
+
Verschiedene Ressourcen.
+
+ +

Siehe auch

+ + + +
+

{{ languages( { "ja": "ja/About_omni.jar" } ) }}

+
diff --git "a/files/de/neue_kompatibilit\303\244tstabellen_in_beta/index.html" "b/files/de/neue_kompatibilit\303\244tstabellen_in_beta/index.html" new file mode 100644 index 0000000000..a353880b4b --- /dev/null +++ "b/files/de/neue_kompatibilit\303\244tstabellen_in_beta/index.html" @@ -0,0 +1,24 @@ +--- +title: Neue Kompatibilitätstabellen in Beta +slug: Neue_Kompatibilitätstabellen_in_Beta +translation_of: Archive/MDN/New_Compatibility_Tables_Beta +--- +

Sie sind wahrscheinlich hier, weil sie einem Beta-Hinweis von einer unserer neuen Kompatibilitäts-Tabellen gefolgt sind. (Nein? Wollen Sie die neuen Tabellen sehen? Beta-Tester werden (auf Englisch).)

+ +

Danke, dass Sie uns helfen, diese Kompatibilitäts-Tabellen zu testen. Sie sind Teil eines größeren Projekts. Wir ändern alle unsere Browser-Kompatibilitätsdaten zu strukturiertem JSON.

+ +

Die neuen Tabellen werden nach und nach auf den Seiten auftauchen, je nachdem wie die Daten kovertiert werden.

+ +

Bearbeitung

+ +

Unsere Kompatibilitäts-Daten wurden zu JSON-Dateien im "browser-compat-data" GitHub-Repository geändert.

+ +

Um Kompatibilitäts-Daten beizutragen, können Sie jetzt einen Pull Request starten oder einen neuen Issue erstellen.

+ +

Wie kann ich helfen?

+ +

Wenn Sie ein Problem mit den Daten feststellen, dann erstellen Sie bitte einen Issue im GitHub-Repository.

+ +

Wenn die Tabelle nicht richig dargestellt wird oder nicht richtig funktioniert, nutzen Sie bitte den "report an error"-Knopf im Drop-Down-Menü über der Tabelle.

+ +

Wenn sie einen Moment Zeit haben, würden wir uns freuen, wenn Sie  an unserer Umfrage teilnehmen (auf Englisch).

diff --git "a/files/de/opensearch_plugin_f\303\274r_firefox_erstellen/index.html" "b/files/de/opensearch_plugin_f\303\274r_firefox_erstellen/index.html" new file mode 100644 index 0000000000..154f66b01c --- /dev/null +++ "b/files/de/opensearch_plugin_f\303\274r_firefox_erstellen/index.html" @@ -0,0 +1,161 @@ +--- +title: OpenSearch Plugin für Firefox erstellen +slug: OpenSearch_Plugin_für_Firefox_erstellen +tags: + - Add-ons + - OpenSearch +translation_of: Web/OpenSearch +--- +

OpenSearch

+

{{ fx_minversion_header(2) }}

+

Firefox 2 unterstützt das OpenSearch(engl.) Beschreibungsformat für Such-Plugins. Plugins, die OpenSearch description syntax(engl.) verwenden, sind kompatibel mit IE 7 und Firefox. Daher sind sie das empfohlene Format für das Web.

+

Firefox unterstützt zudem zusätzliche Suchoptionen, die nicht im OpenSearch description syntax(engl.) genannt werden, wie zum Beispiel Suchvorschläge und das SearchForm Element. Dieser Artikel bezieht sich auf die Erstellung von OpenSearch-kompatiblen Such-Plugins, die die zusätzlichen Firefox-spezifischen Funktionen unterstützen.

+

OpenSearch Beschreibungsdateien können auch automatisch erkannt und von Webseiten installiert werden.

+

OpenSearch Beschreibungsdatei

+

Die XML Datei, die eine Suchmaschine beschreibt, ist sehr einfach aufgebaut. Eine Vorlage findet sich unterhalb. Die fett markierten Abschnitte müssen angepasst werden, je nach dem was auf Ihre Suchmaschine zutrifft.

+
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
+                       xmlns:moz="http://www.mozilla.org/2006/browser/search/">
+<ShortName>engineName</ShortName>
+<Description>engineDescription</Description>
+<InputEncoding>inputEncoding</InputEncoding>
+<Image width="16" height="16" type="image/x-icon">data:image/x-icon;base64,imageData</Image>
+<Url type="text/html" method="method" template="searchURL">
+  <Param name="paramName1" value="paramValue1"/>
+  ...
+  <Param name="paramNameN" value="paramValueN"/>
+</Url>
+<Url type="application/x-suggestions+json" template="suggestionURL"/>
+<moz:SearchForm>searchFormURL</moz:SearchForm>
+</OpenSearchDescription>
+
+
+
+ ShortName
+
+ Ein kurzer Name für Ihre Suchmaschine.
+
+ Einschränkungen: Der Wert muss 16 oder weniger Zeichen enthalten und darf kein HTML oder sonstiges Markup enthalten.
+
+
+
+ Description
+
+ Eine kurze Beschreibung der Suchmaschine.
+
+ Einschränkungen: Der Wert muss 1024 oder weniger Zeichen enthalten und darf kein HTML oder sonstiges Markup enthalten.
+
+
+
+ InputEncoding
+
+ Das Encoding, welches für die eingegeben Daten verwendet werden soll. Beispiel: <InputEncoding>UTF-8</InputEncoding>.
+
+
+
+ Image
+
+ URI zu einem Icon, welches die Suchmaschine repräsentiert. Nach Möglichkeit sollten Suchmaschinen ein 16x16 großes Bild des Typs "image/x-icon" und ein 64x64 großes Bild des Typs "image/jpeg" oder "image/png" bereitstellten. Der Link kann auch das data: URI scheme verwenden. Ein hilfreiches Tool zum Erstellen der data URIs lässt sich hier finden: The data: URI kitchen. + 
<Image height="16" width="16" type="image/x-icon">http://example.com/favicon.ico</Image>
+  Oder
+<Image height="16" width="16">data:image/x-icon;base64,AAABAAEAEBAAA ... DAAA=</Image>
+
+ Firefox speichert das Icon als eine base64 data: URI im Cache (Such-Plugins werden im "searchplugins" Ordner im Profil gespeichert). http: URIs werden auf data: URIs umgewandelt, wenn diese vorhanden sind.
+
+
+
+ Url
+
+ Gibt die URL oder die URLs an, die zur Suche verwendet werden sollen. Das method Attribut gibt an, ob eine GET oder POST Anfrage verwendet wird. Das template Attribut gibt die Basis-URL für die Suchanfrage an.
+
+
+ Hinweis: Der Internet Explorer 7 unterstützt keine POST Anfragen.
+
+
+
+
+ Es gibt zwei URL-Typen, die Firefox unterstützt:
+
+ +
+
+ Für jeden URL-Typ können Sie {searchTerms} einsetzen, um dort den Suchausdruck des Benutzers einzufügen. Andere unterstützte dynamische Suchparameter sind unter OpenSearch 1.1 parameters beschrieben.
+
+
+
+ Für Suchvorschläge wird die festgelegte Vorlage verwendet, um eine Liste im JavaScript Object Notation (JSON) Format zu erhalten. Für weitere Details zur Implementierung von Suchvorschlägen, siehe Suchvorschläge in Such-Plugins unterstützen.
+
+

Image:SearchSuggestionSample.png

+
+
+ Param
+
+ Die Parameter, die durch die Suchanfrage laufen müssen, als Schlüssel/Wert Paare. Wenn Werte festgelegt werden, können Sie {searchTerms} verwenden, um den Suchausdruck vom Benutzer in der Suchleiste einzufügen.
+
+
+ Hinweis: Der Internet Explorer 7 unterstützt dieses Element nicht.
+
+
+
+
+ SearchForm
+
+ Die URL zur der Suchseite auf der Seite, für die das Plugin erstellt wurde. Das bietet einen Weg für den Benutzer an, die Seite direkt zu besuchen, auf der er suchen möchte.
+
+
+ Hinweis: Da dieses Element Firefox-spezifisch ist und nicht Teil der OpenSearch Spezifikation ist, verwenden wir das "moz:" XML Namespace Präfix im Beispiel oben, um sicher zu stellen, dass andere Browser dieses Element ignorieren.
+
+
+

Automatische Erkennung von Such-Plugins

+

Eine Webseite, die ein Such-Plugin anbietet, kann dieses bemerkbar machen, sodass Firefox Benutzer dieses einfach herunterladen und installieren können.

+

Um die automatisch Erkennung zu unterstützen, müssen Sie einfach einen Link im <head> Ihrer Webseite hinzufügen:

+
<link rel="search" type="application/opensearchdescription+xml" title="searchTitle" href="pluginURL">
+
+

Ersetzen Sie die kursiven Einträge, wie unten erklärt:

+
+
+ searchTitle
+
+ Der Name der Suche, etwa "MDC Suche" oder "Yahoo! Suche". Dieser Wert sollte mit dem ShortName Ihres Plugins übereinstimmen.
+
+
+
+ pluginURL
+
+ Die URL zum XML Such-Plugin, von welchem der Browser das Plugin herunterladen kann.
+
+

Wenn Ihre Seite mehrere Such-Plugins anbietet, können Sie diese Zeile für Zeile angeben. Zum Beispiel:

+
<link rel="search" type="application/opensearchdescription+xml" title="MySite: By Author" href="http://www.mysite.com/mysiteauthor.xml">
+<link rel="search" type="application/opensearchdescription+xml" title="MySite: By Title" href="http://www.mysite.com/mysitetitle.xml">
+
+

Dadurch bietet Ihre Seite sowohl die Such nach Autor und nach Titel als separate Möglichkeiten an.

+

Automatische Aktualisierungen für OpenSearch Plugins bereitstellen

+

{{ fx_minversion_note(3.5, "Dieser Abschnitt beschreibt Funktionen, die in Firefox 3.5 eingeführt wurden.") }}

+

Ab Firefox 3.5 können OpenSearch Plugins automatsch aktualisiert werden. Um dies zu unterstützen, muss ein zusätzliches Url Element des Typs "application/opensearchdescription+xml" eingefügt werden. Das rel Attribut muss "self" lauten und das template Attribut muss die URL des OpenSearch Dokuments sein, welches automatisch aktualisiert werden muss.

+

Zum Beispiel:

+
<Url type="application/opensearchdescription+xml"
+     rel="self"
+     template="http://www.foo.com/mysearchdescription.xml" />
+
+

Tipps zur Problemlösung

+

Falls sich ein Fehler in Ihr Such-Plugin XML eingeschlichen hat, können Fehler beim Hinzufügen von Such-Plugin auftreten. Die Fehlermeldungen sind meist nicht sehr hilfreich, die folgenden Tipps können Ihnen aber vielleicht helfen das Problem zu finden.

+ +

Zusätzlich bietet das Such-Plugin einen Log-Mechanismus, der von Plugin Entwicklern verwendet werden kann. Verwenden Sie about:config um die Einstellung 'browser.search.log' auf true zu setzen. Logging Informationen werden in Firefox's Fehlerkonsole (Extras->Fehlerkonsole) erscheinen, wenn Such-Plugins hinzugefügt werden.

+

Referenzmaterial

+ +

{{ languages( { "en": "en/Creating_OpenSearch_plugins_for_Firefox", "ca": "ca/Creaci\u00f3_de_connectors_OpenSearch_per_al_Firefox", "fr": "fr/Cr\u00e9ation_de_plugins_OpenSearch_pour_Firefox", "ja": "ja/Creating_OpenSearch_plugins_for_Firefox", "pl": "pl/Tworzenie_wtyczek_OpenSearch_dla_Firefoksa", "pt": "pt/Criando_plugins_OpenSearch_para_o_Firefox" } ) }}

diff --git a/files/de/packen_von_erweiterungen/index.html b/files/de/packen_von_erweiterungen/index.html new file mode 100644 index 0000000000..5b824abfb4 --- /dev/null +++ b/files/de/packen_von_erweiterungen/index.html @@ -0,0 +1,42 @@ +--- +title: Packen von Erweiterungen +slug: Packen_von_Erweiterungen +tags: + - Erweiterungen + - Toolkit API +translation_of: Archive/Add-ons/Extension_Packaging +--- +

Erweiterungen sind eine Art installierbare Pakete, welche vom Benutzer heruntergeladen und direkt in der Anwendung installiert werden können. Außerdem können Erweiterungen bereits mit der Anwendung mitgeliefert oder von einem anderen Programm eingebunden werden. Erweiterungen benutzen eine Verzeichnisstruktur, die Platz für Chromedateien, Komponenten und andere Daten bietet, um die Funktionalität der XUL-Anwendung zu erweitern.

+

Jede Erweiterung benötigt eine install.rdf Datei mit beschreibenden Informationen über die Erweiterung, wie eine einmalige ID, Version, Urheber oder Informationen zur Kompatibilität.

+

Nachdem die Erweiterung sowie die install.rdf vorbereitet wurden, gibt es verschiedene Wege, um diese zu installieren. Das Erweiterungsverzeichnis kann als Installationspaket (xpinstall) gepackt, direkt in das Anwendungs- oder Profilverzeichnis kopiert oder in der Windows Registry eingetragen werden.

+
+
+Hinweis zu Gecko 2.0 +
(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)
+
+

Ab Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) werden XPI Dateien nicht mehr entpackt, wenn Erweiterungen installiert werden. Stattdessen wird die XPI-Datei in das Erweiterungsverzeichnis kopiert und die Dateien werden direkt aus dem Paket geladen. Siehe Erweiterungen für Firefox 4 aktualisieren für weitere Details.

+
+

Erweiterung als Installationspaket

+

Eine XPI-Datei (XPInstall) ist eine einfache Zip-Datei, die die Erweiterung sowie die install.rdf im Wurzelverzeichnis des Archivs enthält. Benutzer können ein Installationspaket sowohl von einer Webseite als auch als lokale Datei installieren. Dazu muss das Paket lediglich geöffnet oder in den Addon-Manager per Drag & Drop gezogen werden.

+

Der, vom Firefox so erkannte, MIME-Typ einer XPI-Datei ist application/x-xpinstall. Da die meisten HTTP-Server defaultmäßig nicht konfiguriert sind diesen MIME-Typ für das .xpi Endung zurückzugeben, werden Sie vermutlich die Konfiguration Ihres HTTP-Servers anpassen müssen. Beim Apache HTTP-Server kann dies ganz einfach gemacht werden, indem folgende Anweisung in der Konfiguration oder .htaccess-Datei hinzugefügt wird:

+
AddType application/x-xpinstall .xpi
+
+

Eine Erweiterung direkt installieren

+

Wenn Sie den Pfad der Anwendung kennen, weil Sie z.B. die Erweiterung zusammen mit der Anwendung installieren, können Sie die Erweiterung direkt nach <appdir>/extensions/<extensionID> installieren. Die Erweiterung wird vom Addon-Manager automatisch gefunden sobald die Anwendung das nächste mal gestartet wird.

+

Wenn Sie diese Methode wählen, müssen Sie sichergehen, dass die Zugriffsrechte für die Verzeichnisse und Dateien richtig gesetzt sind. Ansonsten kann der Addon-Manager unter Umständen nicht richtig mit der Erweiterung funktionieren.

+

Add-ons in eine benutzerdefinierte Anwendung einfügen

+

Eine benutzerdefinierte Anwendung kann Add-ons einbinden (auch Erweiterungen und Themes), indem diese in das <appdir>/distribution/bundles Verzeichnis gepackt werden.

+

Eine Erweiterung in der Windows Registry registrieren

+

Externe Installationsroutinen, wie z.B. die Java Laufzeitumgebung, können eine Anwendung als Erweiterung integrieren, obwohl diese noch nicht installiert ist. Die Installation wird dann mit Hilfe der Windows Registry beendet.

+

Multi-Item Extension XPIs

+

Manchmal werden mit einer einzelnen XPI-Datei mehrere Erweiterungen/Themes installiert. Ein spezieller Typ Gruppen Paket zeigt wie dieser Typ gepackt wird. (Firefox 1.5/XULRunner 1.8 wird benötigt.)

+

Offizielle Toolkit API Referenzen

+

+

diff --git "a/files/de/plugins/beispiele_und_testf\303\244lle/index.html" "b/files/de/plugins/beispiele_und_testf\303\244lle/index.html" new file mode 100644 index 0000000000..484eef64f4 --- /dev/null +++ "b/files/de/plugins/beispiele_und_testf\303\244lle/index.html" @@ -0,0 +1,19 @@ +--- +title: Beispiele und Testfälle +slug: Plugins/Beispiele_und_Testfälle +tags: + - Add-ons + - Plugins +translation_of: Archive/Plugins/Samples_and_Test_Cases +--- +

NPAPI Plugin Beispiele

+

Einige NPAPI Plugin-Beispiele finden sich im Mozilla Quellcode unter /modules/plugin/sdk/samples.

+

Die Beispiele können unter Umständen nicht mehr auf allen Plattformen kompiliert werden. Es gibt Pläne die Beispiel-Plugins zu erneuern - bessere Organisation, aktualisierte Build-Systeme sowie Builds auf allen Plattformen. Auch wenn ein Beispiel nicht kompiliert werden kann, sind sie als Code-Referenz immer noch sehr wertvoll.

+

Es gibt eine Anleitung zur Kompilierung des npruntime Beispiels in Visual Studio.

+

Zusätzlich zu diesen Beispielen gibt es zwei weitere Plugins, die hilfreich sein könnnten.

+ +

NPAPI Plugin Testfälle

+ +

{{ languages( { "en": "en/Plugins/Samples_and_Test_Cases" } ) }}

diff --git a/files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html b/files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html new file mode 100644 index 0000000000..a9f1244e75 --- /dev/null +++ b/files/de/plugins/flash-aktivierung_colon__browser-vergleich/index.html @@ -0,0 +1,139 @@ +--- +title: 'Aktivierung von Flash: Vergleich verschiedener Browser' +slug: 'Plugins/Flash-Aktivierung:_Browser-Vergleich' +translation_of: 'Plugins/Flash_Activation:_Browser_Comparison' +--- +

Alle wichtigen Browser haben inzwischen eine Funktion implementiert, durch welche Inhalte von Adobe Flash standardmäßig nicht ausgeführt werden, aber in jedem dieser Browser gibt es Unterschiede in Implementierung und Benutzeroberfläche. Diese Anleitung zeigt sowohl die Gemeinsamkeiten als auch die Unterschiede der Browser, damit Webentwickler dem Endnutzer die bestmögliche Erfahrung bieten können. Eine weitere Anleitung unterstützt die Website-Autoren bei der Migration weg von Flash.

+ +

Die Entscheidung zur Aktivierung von Flash wird in jedem Browser vom Nutzer für jede Website einzeln getroffen. Wenn eine Website versucht, Flash zu verwenden, sieht der Nutzer im Browser eine Anfrage, ob Flash für diese Website aktiviert werden soll. Es sind also keine Erweiterungen zum Blockieren von Flash mehr erforderlich, da diese Funktionalität nun in den Browser integriert ist.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
 Mozilla FirefoxGoogle ChromeMicrosoft Edge
Name der EinstellungNachfragen, ob aktiviert werden sollstandardmäßig HTML5Click-to-run
Standardwert für 'application/x-shockwave-flash' in navigator.mimeTypes, sollte Flash inaktiv seinjaneinnein
Wert für 'application/x-shockwave-flash' in navigator.mimeTypes, sollte der Nutzer Flash erlaubt habenjajaja
<object> mit Ersatzinhalt löst UI ausja, mit Ausnahmenneinja
kleines/verstecktes Flash löst erweiterte UI ausjaneinnein
Durch Erlauben von Flash wird die Seite automatisch neu geladenneinjaja
Andere Funktionen im Zusammenhang mit FlashDomain BlockingPlugin Power SaverPeripheral Content Pause
+ +

Jeder Browseranbieter hat eine Strategie über die zukünftige Unterstützung von Flash und die Interaktionen der Nutzer mit Flash erstellt. Der Plan von Firefox für Flash beinhaltet auch Links zu den Plänen und Informationen anderer Anbieter.

+ +

Vergleich der Benutzeroberflächen

+ +

Mozilla Firefox

+ +

Wenn eine Seite versucht, Flash zu nutzen, wird innerhalb dieser Seite eine Aufforderung zur Aktivierung eingeblendet. Außerdem erscheint ein Symbol an der linken Seite der Adressleiste. Der Nutzer kann entweder auf das Flash-Element in der Seite oder auf das Symbol in der Adressleiste klicken, um Flash zu aktivieren.

+ +

+ +

Der Nutzer hat die Wahl, ob er Flash nur für die aktuelle Sitzung erlauben möchte, oder ob die Entscheidung für kommende Sitzungen beibehalten werden soll:

+ +

+ +

Google Chrome

+ +

Die Anzeige wird innerhalb der Seite eingeblendet, wenn diese versucht, Flash zu nutzen. Es wird kein alternativer Inhalt angezeigt.

+ +

+ +

Nachdem der Nutzer auf das Plugin-Element geklickt hat, öffnet sich ein Fenster, in dem Flash erlaubt werden kann.

+ +

+ +

Sollte die Seite einen alternativen Inhalt für ein object-Element bereitstellen, so zeigt Chrome diesen Inhalt an und fragt nicht, ob Flash aktiviert werden soll. Wenn ein Flash-Element für den Nutzer unsichtbar ist, erhält der Nutzer auch keine sichtbare Aufforderung. Der Nutzer kann aber auf jeder Seite auf das Informationssymbol auf der linken Seite der Adresszeile klicken, um die Seiteninformationen zu öffnen und dort Flash zu erlauben.

+ +

+ +

Microsoft Edge

+ +

Die Aufforderung wird innerhalb der Seite angezeigt, wenn diese versucht, Flash zu nutzen. Zusätzlich erscheint ein Symbol auf der rechten Seite der Adressleiste. Der Nutzer kann auf das Flash-Element klicken, um die Aktivierungsoptionen zu sehen.

+ +

+ +

Der Nutzer hat die Wahl, Flash nur für diese oder für alle weiteren Sitzungen auf dieser Website zu aktivieren:

+ +

+ +

Tipps für Seitenautoren

+ +

Wenn Flash-Elemente sehr klein, versteckt oder von anderen Inhalten überdeckt sind, werden Nutzer nicht bemerken, dass Flash für diese Seite benötigt wird und werden verwirrt sein. Sogar wenn das Plugin-Element eigentlich versteckt ist, sollte die Seite es sichtbar darstellen und die Größe erst dann ändern bzw. es verstecken, wenn der Nutzer das Plugin aktiviert hat. Dies kann mithilfe einer JavaScript-Funktion ermöglicht werden, welche beim Aktivieren des Plugins aufgerufen wird.

+ +
function pluginCreated() {
+  // We don't need to see the plugin, so hide it by resizing
+  var plugin = document.getElementById('myPlugin');
+  plugin.height = 0;
+  plugin.width = 0;
+  plugin.callPluginMethod();
+}
+ +

Der HTML-Code spezifiziert standardmäßig die Größe eines Flash-Objekts, wodurch es sichtbar wird. Dies kann beispielsweise so realisiert werden:

+ +
<!-- Give the plugin an initial size so it is visible -->
+<object type="application/x-shockwave-flash" data="myapp.swf"
+      id="myPlugin" width="300" height="300">
+  <param name="callback" value="pluginCreated()">
+</object>
+ +

Der in HTML definierte callback Parameter kann in Flash unter Nutzung seiner flash.external.ExternalInterface API aufgerufen werden.

+ +

Verwenden eines Skript-Callbacks, um festzustellen, ob ein Plugin aktiviert ist

+ +

Ebenso sollte das Skript einer Site nicht versuchen, ein Plugin sofort nach der Erstellung zu skripten. Stattdessen sollte das Plugin-Objekt über eine JavaScript-Funktion aufgerufen werden. Diese Funktion kann nun in der Gewissheit, dass alles eingerichtet und fertig ist, den Aufruf in das Plugin erstellen

+ +

Richten Sie zuerst Ihr HTML mit einem Callback ein, welcher die JavaScript-Funktion pluginCreated() aufruft, beispielsweise so:

+ +
<object type="application/x-my-plugin" data="somedata.mytype" id="myPlugin">
+  <param name="callback" value="pluginCreated()">
+</object>
+ +

Die Funktion pluginCreated() ist dann für das Einrichten Ihres Skripts und für jeden Aufruf zurück in das Plugin verantwortlich:

+ +
function pluginCreated() {
+  document.getElementById('myPlugin').callPluginMethod();
+}
diff --git a/files/de/plugins/index.html b/files/de/plugins/index.html new file mode 100644 index 0000000000..6ee5358256 --- /dev/null +++ b/files/de/plugins/index.html @@ -0,0 +1,88 @@ +--- +title: Plugins +slug: Plugins +tags: + - Add-ons + - Plugins +translation_of: Archive/Plugins +--- +
+

Plugins (oder Plug-ins) sind Softwaremodule zur Darstellung von speziellen Inhalten im Browserfenster, die der Browser selbst nicht interpretieren und darstellen kann. Ein bekanntes Beispiel ist das Adobe Reader Plugin, mit dem der Anwender PDF-Dateien direkt im Browserfenster öffnen kann. Mit dem Quicktime und Realplayer Plugin können Videos in verschiedenen Formaten und mit unterschiedlichen Transportprotokollen auf einer Webseite abgespielt werden.

+

Plugins können für Anwendungen nützlich sein, die das Mozilla Framework verwenden. Zum Beispiel benutzt {{ interwiki('wikipedia', 'ActiveState_Komodo', 'ActiveState Komodo') }} Plugins, um den {{ interwiki('wikipedia', 'Scintilla_(editing_component)', 'Scintilla Editor') }} in seine XUL-basierte Benutzeroberfläche einzubetten.

+

Plugins werden mit der NPAPI erstellt, der browserübergreifenden API für Plugins. Die NPAPI ist in der Gecko Plugin API Referenz dokumentiert. Um ein Plugin scriptingfähig zu machen, kann die npruntime verwendet werden. Die älteren, XPCOM- und LiveConnect- basierten APIs für Plugins sollten nicht mehr benutzt werden. Die in diesen APIs verwendeten Technologien werden weiterhin benutzt, jedoch nicht mehr für Plugins.

+

Für eine einfachere Erstellung von scriptgesteuerten Grafik- und Animationskomponenten können SVG und Canvas benutzt werden.

+

Plugins unterscheiden sich von Erweiterungen, welche die Funktionalität des Browsers selbst verändern oder erweitern. Weiterhin unterscheiden sich Plugins von OpenSearch Plugins, die zusätzliche Suchmaschinen in der Suchleiste implementieren.

+
+ + + + + + + +
+

Dokumentation

+
+
+ Gecko Plugin API Referenz (NPAPI)
+
+ Dieses Dokument beschreibt die Schnittstellen für Anwendungsprogramme zur Erstellung von NPAPI Plugins.
+
+ Scripting plugins (npruntime)
+
+ Dieses Dokument beschreibt die neuen browserübergreifenden NPAPI-Erweiterungen, mit denen scriptingfähige Plugins erstellt werden können, die auch auf Scriptobjekte im Browser zugreifen können.
+
+ Gecko Plugin SDK
+
+ Das Gecko plugin SDK enthält alle Werkzeuge und Headerdateien die benötigt werden, um scriptingfähige Plugins für Gecko erstellen zu können. Enthalten sind auch der XPIDL Compiler/Linker und die neueste Version der npapi.h.
+
+ Out-of-process Plugins
+
+ Firefox 3.6.4 führt sogenannte „out-of-process“ Plugins ein, welche in einzelnen Threads ausgeführt werden, sodass der Crash eines Plugins nicht mehr den kompletten Browser betrifft.
+
+ Verwendung von XPInstall zur Installation von Plugins
+
+ XPInstall ermöglicht eine einfache Installation von Plugins durch den Anwender innerhalb der Browseroberfläche, ohne dass ein separates Installationsprogramm gestartet werden muss.
+
+ Plugins finden
+
+ "Da es offensichtlich Situationen gibt, in denen es sinnvoll ist, Plugins zu benutzten, stellt sich die Frage, wie zu verfahren ist, wenn das erforderliche Plugin nicht installiert ist."
+
+ Scripting Plugins: Macromedia Flash
+
+ Dieser Artikel erklärt, wie JavaScript benutzt werden kann, um auf Methoden des Flash-Plugins zuzugreifen und wie man FSCommands verwendet, um auf JavaScript-Funktionen aus der Flash-Animation heraus aufzurufen.
+
+ Plugins: Das Erstinstallationsproblem
+
+ Das Erstinstallationsproblem tritt auf, wenn ein Plugin oder integrierbare Softwarekomponenten sich auf einem System installieren, bevor irgendein Gecko-basierter Browser vorhanden ist.
+
+ ActiveX Control zur Integration von Netscape Plug-ins im IE
+
+ Microsoft hat die Unterstützung für Netscape-Plugins aus seinem Browser IE 5.5 SP2 (und höher) entfernt. Für Plugin-Autoren dürfte dieses Projekt eine große Arbeitserleichterung sein!
+
+ Plugins: Beispiele und Testfälle
+
+ NPAPI Plugin Beispiele und Testfälle.
+
+ Externe Seiten zur Plugin-Erstellung
+
+ Externe Projekte, Frameworks und Blogeinträge, die zur Erstellung von Plugins nützlich sein können.
+
+ XEmbed Erweiterung für Mozilla Plugins
+
+ Neuere Versionen von Mozilla enthalten eine Erweiterung zum Erstellen von Plugins, die XEmbed verwendet, anstatt der alten Xt-basierten Hauptschleife, die von den meisten Plugins seit der Zeit von Netscape 3.x benutzt wird.
+
+

Alles ansehen...

+ 		+

Community

+
    +
  • Mozillas Plugin Foren:
    • +
+

{{ DiscussionList("dev-tech-plugins", "mozilla.dev.tech.plugins") }}

+

Verwandte Themen

+
+
+ Erweiterungen, SVG, Canvas
+
+
+

{{ languages( { "en": "en/Plugins", "es": "es/Plugins", "fr": "fr/Plugins", "ja": "ja/Plugins", "pl": "pl/Wtyczki", "pt": "pt/Plugins", "ko": "ko/Plugins" } ) }}

diff --git a/files/de/preferences_system/index.html b/files/de/preferences_system/index.html new file mode 100644 index 0000000000..882de5958a --- /dev/null +++ b/files/de/preferences_system/index.html @@ -0,0 +1,36 @@ +--- +title: Preferences System +slug: Preferences_System +tags: + - XUL +translation_of: Mozilla/Preferences/Preferences_system +--- +

Dieses Dokument beschreibt das neue Aviary Toolkit Einstellungssystem. Mit der Verwendung dieses Systems ist es möglich Einstellungsfenster zu erstellen, die auf verschiedenen Plattformen (Windows, MacOS X und GNOME) angezeigt und ausgeführt werden können.

+

Hinweis: Das Einstellungssystem ist erst ab Firefox/Thunderbird 1.5 (und deren alpha und beta Releases) verfügbar. Es kann nicht in Firefox 1.0-basierenden Anwendungen und Erweiterungen benutzt werden.

+

Das neue System ist durch einige XUL Elemente und Attribute implementiert. Referenzinformationen über diese sind unter den folgenden Links verfügbar:

+

Einstellungssystemdokumentation:

+

Verwendung

+

Der Code für ein typisches Einstellungsfenster könnte in etwa so aussehen:

+
<prefwindow id="appPreferences"
+            xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <prefpane id="pane1" label="&pane1.title;">
+    <preferences>
+      <preference id="pref1" name="pref.name" type="bool"/>
+    </preferences>
+
+   .. UI elements that refer to the preferences above, e.g.:
+    <checkbox id="check1" preference="pref1"
+              label="&check1.label;" accesskey="&check1.accesskey;"/>
+  </prefpane>
+
+  <prefpane id="pane2" label="&pane2.title;" src="chrome://uri/to/pane.xul"/>
+</prefwindow>
+
+

Die pane Inhalte können inline festgelegt werden oder eine externe chrome URI sorgt für die Inhalte über ein dynamisches Overlay. Die HIGs sollten für die angestrebten Plattformen gründlich gelesen werden und der XUL Präprozessor sollte, wenn nötig, verwendet werden, um unterschiedlich passende Fenstertitel festzulegen. Außerdem sollte man vorsichtig sein, wenn man die Breite des Fensters (in em) angibt, genau wie die Höhe des Fenster (in em), denn bei einigen Plattformen verändert sich die Fenstergröße nicht so wie das ausgewählte Panel verändert wird (z.B. Windows).

+

Verwendung in XULRunner Anwendungen

+

Wird openDialog() aufgerufen, um einen Einstellungsdialog zu öffnen, sollte "toolbar" im features String enthalten sein. Beispiel:

+
var features = "chrome,titlebar,toolbar,centerscreen,modal";
+window.openDialog(url, "Preferences", features);
+
+

Bugzilla

+

Die Komponente für Bugs in den „Preferences bindings“ (aber nicht in den Options UIs von Firefox/Thunderbird) ist »Toolkit:Preferences« (Fehler melden Offene Bugs auflisten).

diff --git a/files/de/profile_manager/index.html b/files/de/profile_manager/index.html new file mode 100644 index 0000000000..06b118354e --- /dev/null +++ b/files/de/profile_manager/index.html @@ -0,0 +1,173 @@ +--- +title: Profilmanager +slug: Profile_Manager +translation_of: Mozilla/Profile_Manager +--- +

Firefox und andere XULRunner Anwendungen speichern Benutzereinstellungen und -daten in speziellen Ordnern, den sogenannten Profilen. Firefox stellt ein eingebautes Hilfsprogramm zum Verwalten dieser Profile bereit, allerdings könnte dieser zukünftig entfernt werden (siehe bug 214675), weshalb eine neue, eigenständige Profilmanager-Anwendung entwickelt wurde die mit jeder XULRunner-Anwendung funktioniert und etliche Funktionen enthält, die in der in Firefox eingebauten Version nicht zu finden waren.

+ +

Herunterladen

+ +

Binaries

+ +

Du kannst die Profilmanager-Builds unter ftp://ftp.mozilla.org/pub/mozilla.org/utilities/profilemanager/1.0/ herunterladen. Es gibt kein Installationsprogramm; entpacke einfach die Dateien aus dem Archiv.

+ +

Systemanforderungen:

+ + + +

Quelltext

+ +

You can download the source as well:

+ +

hg clone http://hg.mozilla.org/automation/profilemanager/

+ +

Instructions for building can be found in BUILD.txt.

+ +

Fehler melden

+ +

Fehler im Profilmanager sollten in Bugzilla unter Testing -> ProfileManager berichtet werden.

+ +

Profilmanager starten

+ +

Starte einfach die profilemanager.exe (unter Windows) oder profilemanager-bin (unter Linux und Mac). Standardmäßig verwaltet der Profilmanager Firefox-Profile, aber du kannst ihn auch für Profile anderer Xulrunner-Anwendungen wie Thunderbird oder SeaMonkey verwenden. Um den Profilmanager mit einer anderen Anwendung als Firefox zu verwenden, musst du ihn mit dem Namen der gewünschten Anwendung als Argument starten, z.B.:

+ +

+

profilemanager-bin seamonkey

+

+ +

Profile und Programmversionen

+ +

Der Profilmanager verwaltet zwei verschiedene Listen: eine mit Benutzerprofilen und die andere mit den Anwendungsversionen, die mit den Profilen benutzt werden kann. Standardmäßig heißt das, er beobachtet eine Liste der Firefox-Installationen auf deinem System sowie eine Liste der Profile, die von Firefox genutzt werden.

+ +

Ein Profil kann jeweils mit einer bestimmten Firefox-Installation verknüpft werden, sodass diese Version von Firefox startet, wenn das betreffende Profil gewählt wird. Z.B. könnte Profil A mit einer Installation von Firefox 3.6.10 verknüpft sein, Profil B mit einer Installation von Firefox 3.5.3.

+ +

Nach dem Start sucht der Profilmanager in einigen Standard-Pfaden nach installierten Versionen von Firefox bzw. anderen Anwendungen, für die du den Profilmanager verwendest. Außerdem kannst du Firefox-Versionen manuell hinzufügen, indem du die Schaltfläche "Firefox-Versionen verwalten..." anklickst:

+ +

 

+ +

Jede Firefox-Version in der Liste hat die folgenden Eigenschaften: Pfad, Version und Standard. Die Eigenschaft "Standard" gibt an, dass diese Firefox-Version mit Profilen verwendet wird, mit denen keine bestimmte Anwendung verknüpft ist.

+ +

 

+ +

+

Ein Profil erstellen

+

+ +

To create a new profile, just click the New button from Profile Manager's toolbar.  A dialog will appear that allows you to specify the profile's name, and optionally the profile's path, and the version of Firefox (or other application) that will be used with this profile:

+ +

+ +

+ +

 

+ +

Firefox mit einem Profil starten

+ +

To launch Firefox with a specific profile, select the profile in the main window, and hit the "Start Firefox" button:  Firefox will be launched with that profile, and Profile Manager will terminate.  The version of Firefox which will be launched is indicated in the "Firefox version" dropdown in the Launch Options box:

+ +

+ +

+ +

Für Firefox sind mehrere zusätzliche Startparameter verfügbar. Diese führen dazu, dass Firefox mit unterschiedlichen Kommanodzeilenargumenten gestartet wird.  Auf der Seite Command Line Options erhältst du eine Beschreibung dieser Parameter.

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
StartoptionKommandozeilenparameter
Führe Firefox im Offline-Modus aus-offline
Führe Firefox im Safe-Mode aus-safe-mode
Starte Firefox mit einer Konsole-console
Starte eine neue Instanz-no-remote
+ +

Hinweis: Es ist nicht möglich eine zweite Firefox-Instanz zu starten ohne den Parameter -no-remote anzugeben. Aus diesem Grund wird für dich, unabhängig davon ob diese Startoption gesetzt wurde, automatisch der Parameter -no-remote hinzugefügt, falls du versuchst den Profilmanager zu nutzen und erkannt wird, dass bereits eine Instanz von Firefox läuft.

+ +

 

+ +

Gesperrte Profile

+ +

Some profiles may be shown as locked in the main window.   Such profiles are currently being used by an instance of Firefox.  If you attempt to perform any operation on a locked profile, you'll get a warning; if you choose to continue despite the warning, you may encounter errors or corrupt a profile.

+ +

+ +

It's strongly recommended to avoid operations on locked profiles.  If you need to do something with a locked profile, close the instance of Firefox which is using the profile first.

+ +

 

+ +

Sichern und Wiederherstellen von Profilen

+ +

Der Profilmanager bietet zwei unterschiedliche Mechanismen an um Profile zu sichern und wiederherzustellen.

+ +

+ +

Backup folder

+ +

Profile Manager has a local backup folder where it can manage profile backups.  This is the easiest way to backup and restore profiles. 

+ +

To backup a profile:  select the profile you want to backup, and choose "backup to->backup folder" from the toolbar's Backup menu.  The profile will be backed up, and the backup will appear under the backups column in the main display:

+ +

+ +

Wiederherstellen eines Profils: select the backup in the main display, open the context menu, and choose "restore".  When you restore a profile, the backup is retained, so you can restore from the same backup at a later date.

+ +

Löschen einer Sicherung:  select the backup in the main display, open the context menu, and choose "delete".

+ +

Profilarchive

+ +

Profile Manager can also backup to and restore from .zip archives.  Profile Manager does not track these backups in the UI, but using profile archives is an easy way to move profiles between machines.

+ +

To backup a profile to an archive:  select the profile you want to backup, and choose "backup to->archive" from the toolbar's backup menu.  You'll be prompted for a name and location for the archive.

+ +

To create a profile from a profile archive:  Select "restore from->archive" from the toolbar's backup menu.  You'll be prompted for the location of the archive, and then for the name of the profile you'd like to create from the archive.

+ +

 

+ +

Andere Operationen

+ +

Ein rechtsklick auf ein Profil in der Profilliste öffnet ein Optionsmenü mit den folgenden Befehlen:

+ + + +

 

+ +

Zukünftige Erweiterungen

+ + + +

 

+ +

{{ languages( {"es" : "es/Administrador_de_perfiles" ,"zh-cn" : "zh-cn/Profile_Manager" } ) }}

diff --git "a/files/de/qualit\303\244tssicherung/stress_testing/index.html" "b/files/de/qualit\303\244tssicherung/stress_testing/index.html" new file mode 100644 index 0000000000..0678872b51 --- /dev/null +++ "b/files/de/qualit\303\244tssicherung/stress_testing/index.html" @@ -0,0 +1,12 @@ +--- +title: Qualitätssicherung/Stress_Testing +slug: Qualitätssicherung/Stress_Testing +tags: + - QA + - 'QA:Tools' + - Tools +translation_of: Archive/Mozilla/Stress_testing +--- +

Werkzeuge für Microsoft Windows

+

Consume.exe aus den Windows Server 2003 Resource Kit Toolskann verschiedene Ressourcen verwenden: physikalischer Speicher, CPU-Zeit, Speicherplatz und auch Kernel Pool. Obwohl es für  Win2003 gedacht ist, sollte es problemlos auf WinXP installiert werden können (Win2000-Kompatibilität ist unbekannt). Die einzige Schattenseite ist, dass Sie nicht angeben können, wie viel Rechenleistung prozentual gebraucht werden darf, sondern nur absolut. Also seine Sie gewarnt: Gebrauchen sie sich immer die "-time" Option oder Sie werden den Reset-Button früher drücken müssen als Sie wollen!

+

{{ languages( { "en": "en/QA/Stress_Testing", "fr": "fr/Assurance_qualit\u00e9/Tests_en_charge" } ) }}

diff --git a/files/de/quickstart_lokalisierung/index.html b/files/de/quickstart_lokalisierung/index.html new file mode 100644 index 0000000000..5b9f007bff --- /dev/null +++ b/files/de/quickstart_lokalisierung/index.html @@ -0,0 +1,43 @@ +--- +title: 'Lokalisierung: Kurz-Anleitung' +slug: Quickstart_Lokalisierung +tags: + - Anleitung + - Lokalisierung + - l10n + - Übersetzung +translation_of: Mozilla/Localization/Quick_start_guide +--- +

Willkommen bei der Mozilla Lokalisierung (kurz l10n)!

+ +

Ob Du Deine eigene Lokalisierungs-Community für Deine Sprache im Mozilla-Projekt gründen oder einer bereits vorhandenen beitreten möchtest - hier bist Du richtig. Hier erfährst Du alles Wesentliche über die technischen Grundlagen des Mozilla l10n-Programms. Wir erklären Dir alle notwendigen Schritte, vom Aufsetzen einer entsprechenden Umgebung bis hin zum Testen und Veröffentlichen Deiner eigenen Lokalisierung. Dabei lernst Du alles über die verschiedenen Projekte, zu denen Du beitragen kannst und über die dafür benötigten Werkzeuge.

+ +

Wir nehmen unsere Beispiele gerne aus dem Firefox-Projekt, weil dessen Lokalisierung vom gesamten Mozilla-Projekt am weitesten fortgeschritten ist. Kurz vor Ende dieser Anleitung solltest Du in der Lage sein, etwas an Deiner lokalen Firefox-Installation zu ändern und diese Änderung anschließend in der Oberfläche zu sehen. Am Ende wirst Du alle notwendigen Werkzeuge haben um mit dem Lokalisieren zu beginnen!

+ +

Bitte denke daran, dass diese Anleitung nur eine Einweisung in die technischen Aspekte der Mozilla-Lokalisierung ist. Auf der Seite l10n-Prozess erfährst Du alles über den Gesamtprozess.

+ +
+

Vorbereiten

+Technische Vorbereitungen vor der Lokalisierung.
+ +
+

Übersetzen

+L10n Anleitungen zu Übersetzungs-Werkzeugen.
+ +
+

Testen

+L10n Anleitungen zum Testen von Lokalisierungen.
+ +
+

Freigeben

+Schritte zum Veröffentlichen Deiner Lokalisierung.
+ +
Das sind die vier technischen Phasen des l10n Prozesses, für Details klicke auf die jeweiligen Links. Um einen Gesamtüberblick zu bekommen solltest Du die Anleitungen aller Phasen lesen.
+ +

 

+ +
Hinweis: Diese Anleitung wurde für zwei Gruppen von Mitwirkenden geschrieben: Für diejenigen, die eine neue Lokalisierungs-Community gründen möchten und für diejenigen, die einer vorhandenen Community beitreten möchten. Es ist wichtig zu wissen, welche Information zu welcher dieser beiden Vorhaben gehört. Um Dir zu helfen die wichtigsten Informationen herauszufiltern haben wir alle ausschließlich zum Gründen einer neuen Lokalisierungs-Community gehörenden Informationen in orange dargestellt. Alle Informationen die ausschließlich das Beitreten zu einer bestehenden Lokalisierungs-Community betreffen sind blauer Schrift dargestellt.
+ +

 

+ +

{{ Next("Localization_Quick_Start_Guide/Initial_setup") }}

diff --git a/files/de/quickstart_lokalisierung/initial_setup/index.html b/files/de/quickstart_lokalisierung/initial_setup/index.html new file mode 100644 index 0000000000..42cbc9f7d7 --- /dev/null +++ b/files/de/quickstart_lokalisierung/initial_setup/index.html @@ -0,0 +1,84 @@ +--- +title: 'Lokalisierung: Vorbereitung' +slug: Quickstart_Lokalisierung/Initial_setup +tags: + - Lokalisierung + - Vorbereiten +translation_of: Mozilla/Localization/Quick_start_guide/Initial_setup +--- +

Eine Voraussetzung zum Lokalisieren ist der Zugriff auf Code und Werkzeuge und eine entsprechend konfigurierte lokale Arbeitsumgebung (d.h., auf Deinem Computer). Zudem musst Du herausfinden, ob für Deine Sprache bereits eine Lokalisierungs-Community existiert. An dieser Stelle beschäftigen wir uns mit den benötigten Benutzer-Konten sowie den verwendeten Werkzeugen und deren Konfigurationen, die für das Lokalisieren benötigt werden.

+ +

Neu oder bereits vorhanden

+ +

Als Erstes musst Du wissen, ob Du eine neue Lokalisierungs-Community gründen oder einer bereits vorhandenen beitreten möchtest. Davon hängt ab, welche Informationen in dieser Anleitung für Dich nützlich sind.

+ +

Das hast Du zu tun:

+ +

Prüfe im Localization Community Directory, ob zu Deiner Sprache bereits eine Community existiert.

+ +
    +
  1. Wenn bereits eine Community existiert: Melde Dich dort und frag wie Du helfen kannst.
    2. +
  2. Wenn noch keine Community existiert: Sende eine e-Mail an die new-locales newsgroup für weitere Unterstützung.
    3. +
+ +

Benutzer-Konten

+ +

Es gibt eine Handvoll Benutzer-Konten, die Du zu Beginn Deiner Lokalisierungs-Arbeit kennen solltest. Sie sind nicht notwendig, um an der Lokalisierung mitzuwirken. Aber sie werden notwendig, wenn Du Deine Arbeiten veröffentlichen möchtest. Momentan sollst Du nur wissen, dass sie für Deine Arbeit wichtig sein werden. Unter diesen Benutzer-Konten werden Dein Code und Deine anderen Tätigkeiten gespeichert und sie werden Dir bei der Veröffentlichung Deiner Lokalisierungs-Arbeiten helfen.

+ +
+
hg (Mercurial)
+
Mercurial ist eine Umgebung zum Verwalten von Software-Versionen und besteht hauptsächlich aus Mozilla Quellcode, es enthält aber auch lokalisierten Code für jede offizielle Mozilla Lokalisation. Du wirst es brauchen, um Mozilla Anwendungen zu lokalisieren. Eine Berechtigung zum Speichern ist zu Beginn Deiner Arbeit nicht notwendig in hg. Wenn Du etwas Erfahrung mit hg gesammelt hast, dann wirst Du vielleicht eine Speicher-Berechtigung haben wollen. Dazu besuchst Du bitte die Mozilla Commiter Page und folgst dem dort beschriebenen Prozess. Hier ist eine Beispiel-Meldung, die den Prozess verdeutlicht. Nutze diese Vorlage zum Ausfüllen Deiner hg Registrierungs-Anfrage. Lege eine Meldung zu Deinem neuen Lokalisierungs-Projekt in der new locales newsgroup an.
+
SVN
+
SVN ist eine Umgebung zum Verwalten von Software-Versionen, die Mozilla zum Betreiben seiner eigenen Quellcode-Webseiten und deren offiziellen Lokalisierungen verwendet. Auf dieser Wiki-Seite ist der Registrierungs-Prozess von SVN beschrieben. Die Anleitung für SVN Lokalisierer hilft Dir beim Lernen der wichtigsten SVN Kommandos für l10n. Lege eine Meldung zu Deinem neuen Lokalisierungs-Projekt in der new locales newsgroup an.
+
+ +
+
Web-basierte L10n Werkzeuge
+
Darüber werden wir später ein paar Worte verlieren. Für den Moment reicht es zu wissen, dass Du zum Nutzen dieser Werkzeuge einen eigenen Benutzer-Zugang benötigst.
+
Mozilla LDAP
+
Du wirst einen LDAP Benutzer brauchen, wenn Du Deine Lokalisierung im Lokalisierungs-Verzeichnis von Mozilla registrieren möchtest. Lege eine Meldung zu Deinem neuen LDAP Zugang in der new locales newsgroup an.
+
Lokalisierungsspezifische Bugzilla Kompenente
+
Eine eigene Bugzilla "Component" für Deine Lokalisierung hilft uns beim Nachverfolgen Deines Lokalisierungs-Prozesses von den ersten Schritten bis zur Veröffentlichung. Zudem werden wir so informiert falls Du Probleme hast, die eindeutig Deiner Lokalisierungs-Arbeit zuzuordnen sind. Lege eine Meldung zu Deiner neuen Bugzilla Component in der new locales newsgroup an.
+
+ +

Lokale Werkzeuge

+ +

Ähnlich wie bei den Benutzer-Konten gibt es auch einige lokale Werkzeuge, die auf Deinem Computer installiert werden sollten. Diese Werkzeuge dienen dem Speichern Deiner Arbeit, dem Erzeugen von Mozilla Anwendungen, dem Erzeugen von Sprachpaketen und dem Testen.

+ +
+
Hg (Mercurial)
+
Wie oben erwähnt nutzen wir Mercurial zum Pflegen von Mozilla Quellcode und lokalisiertem Code. Du wirst nicht nur ein Lokalisierungs-Repository zum Speichern Deiner Objekte brauchen, sondern es muss auch auf Deinem Rechner installiert und konfiguriert sein. Hier findest Du alles, was Du zum Installieren und Konfigurieren von Mercurial wissen musst.
+
+ +
+
compare-locales
+
compare-locales ist ein Python Skript zum Prüfen Deiner Arbeit, ohne dass Firefox oder eine andere Anwendung laufen muss. Installationsanweisungen findest Du hier.
+
L10n checks
+
L10n checks ist ein weiteres Python Skript zum Prüfen Deiner Arbeit, ohne dass Firefox oder eine andere Anwendung laufen muss. Installationsanweisungen findest Du hier.
+
autoconf 2.13
+
autoconf ist ein Hilfsmittel zum manuellen Erzeugen von Mozilla Anwendungs-Builds und Sprachpaketen. Wir verwenden Version 2.13 und höher für diese Builds. Installationsdateien und -anleitungen findest Du hier.
+
wget
+
wget ist ein Kommandozeilen-Werkzeug zum Laden von Dateien über Internet-Protokolle. Wir nutzen es zum Laden von Dateien aus Repositories. Installationsdateien und -anleitungen findest Du hier.
+
Perl
+
Perl ist eine Programmiersprache, mit der Du Mozilla Anwendungs-Builds und Sprachpakete erstellen kannst. Installationsdateien und -anleitungen findest Du hier.
+
Python
+
Python ist eine Programmiersprache, in der viele unserer L10n Test-Skripte geschrieben sind. Installationsdateien und -anleitungen findest Du hier.
+
Locale Switcher oder Quick Locale Switcher
+
Sowohl Locale Switcher als auch Quick Locale Switcher sind Add-Ons für Mozilla Anwendungen. Eines von beiden brauchst Du zum Anzeigen Deiner Lokalisierungen in einer Mozilla Anwendung. Du kannst sie über den Add-On Manager im Firefox Browser installieren oder über diese Links.
+
Einen guten, unicode-basierten Text-Editor
+
Hier einige Empfehlungen: + +
+
GNU make
+
Make ist ein Werkzeug zur Versions-Verwaltung von ausführbaren Dateien. Du findest die Version 3.79.1 oder höher hier. Andere Varianten von make funktionieren leider nicht.
+
+ +

Ende der Vorbereitungen

+ +

Nun, nachdem alle Vorbereitungen getroffen sind, ist es Zeit für den schönsten Teil: Übersetzen!

+ +

{{ PreviousNext("Localization_Quick_Start_Guide", "Localization_Quick_Start_Guide/Translation_phase") }}

diff --git a/files/de/quickstart_lokalisierung/translation_phase/index.html b/files/de/quickstart_lokalisierung/translation_phase/index.html new file mode 100644 index 0000000000..e1bddf447d --- /dev/null +++ b/files/de/quickstart_lokalisierung/translation_phase/index.html @@ -0,0 +1,122 @@ +--- +title: 'Lokalisierung: Übersetzung' +slug: Quickstart_Lokalisierung/Translation_phase +tags: + - Lokalisation + - Werkzeuge + - Übersetzung +translation_of: Mozilla/Localization/Quick_start_guide/Translation_phase +--- +

Glückwunsch zur erfolgreichen Vorbereitung Deiner Lokalisierung! Als Belohnung für Deine Mühen kommen wir nun zum eigentlichen Grund Deiner Mitarbeit: Mozilla Projekte lokalisieren. "Wo ist da die Belohnung?" fragst Du Dich natürlich!

+ +

Ab hier unterteilt sich der technische Part des Prozesses. Bei Mozilla lokalisieren wir viele verschiedene Projekte, die in drei Gruppen unterteilt werden können. Jede dieser Gruppen benötigt einen anderen Typ l10n Werkzeug zum, Du ahnst es, Lokalisieren des Projekts. Die l10n Werkzeuge sollen Dir helfen, den lokalisierten Inhalt von Version zu Version zu pflegen und bereits lokalisierte Objekte beim Lokalisieren neuer Inhalte zu beeinflussen.

+ +

Wir identifizieren hier diese Gruppen von Projekten und die mit ihnen verbundenen l10n Werkzeuge. Auf diesem Weg werden wir Dich auf die technischen Grundlagen-Tutorien zum Lokalisieren der jeweiligen Projekt-Gruppe hinweisen. Es ist an Dir und Deiner Lokalisierungs-Community herauszufinden, welche l10n Werkzeuge am besten Euren Bedürfnissen entsprechen. Mit zunehmender Erfahrung möchtest Du vielleicht unabhängig von den von Mozilla entwickelten l10n Werkzeugen lokalisieren, auch das werden wir hier behandeln.

+ +

Projekte

+ +

Die Mozilla-Projekte und ihre l10n Abläufe werden in diese Gruppen unterteilt: Mozilla Anwendungen, Mozilla Webseiten und Add-Ons. Weiter unten findest Du eine Liste mit Mozilla-Projekten, ihren zugeordneten l10n Werkzeugen und Links zu Tutorien mit Beschreibungen zu den jeweiligen Abläufen.

+ +

Mozilla Anwendungen

+ +

Du bist also am Lokalisieren von Mozilla Anwendungen interessiert. Jedes l10n Werkzeug folgt einem anderen Ablauf zum Lokalisieren von Mozilla Anwendungs-Projekten. Zu jedem unten angegebenen l10n Werkzeug haben wir einen Link zu einem Einweisungs-Tutorial eingefügt. Folge den Tutorien und entscheide selbst, welches l10n Werkzeug Deinen speziellen Bedürfnissen entspricht.

+ +

Das sind die l10n Werkzeuge, die wir zum Lokalisieren von Mozilla Anwendungen nutzen:

+ +
+
Pootle
+
Ein benutzerfreundliches Web-Portal basierend auf dem Translate Toolkit API. Diese Anwendung enthält Arbeitsbereiche zum Übersetzen und Überprüfen von Strings und Projekt-Dashboards. Siehe Beispiel für die Lokalisierung von Mozilla Anwendungen mit Pootle.
+
+ +
+
Koala
+
Ein l10n Add-On für den nicht netzwerkfähigen Komodo Edit Text-Editor.
+
Mozilla Translator
+
Ein nicht netzwerkfähiges, Java-basiertes l10n Werkzeug zum Übersetzen, welches die eigenen Repositories integriert. Schaue auf der Mozilla Translator (MT) Download Seite zum Herunterladen eines MT Clients. Version 5.26 ist die aktuelle Version.
+
Virtaal
+
Eine nicht netzwerkfähige Version von Pootle, ebenfalls auf dem Translate Toolkit API basierend.
+
+ +

Die folgenden Mozilla Anwendungen wurden mit den oben vorgestellten l10n Werkzeugen lokalisiert:

+ +
+
Firefox
+
Der preisgekrönte Firefox® Web Browser ist sicher, schnell und hat neue Features, die Deine Art der Web-Nutzung verändern werden. Siehe diese Liste der kritischsten zu lokalisierenden Strings in Firefox und ebenso die Beschreibung um zu verstehen, wie diese organisiert sind.
+
Thunderbird
+
Geniesse sicheres, schnelles und einfaches Mailen nach Art von Mozilla. Der Thunderbird® E-Mail Client enthält intelligente Spam-Filter, leistungsfähige Suchmöglichkeiten und individuell anpassbare Ansichten.
+
Seamonkey
+
SeaMonkey® ist die Alles-in-Einem Anwendung, früher bekannt als die "Mozilla Application Suite", mit einem Web Browser, einem E-Mail und einem Newsgroups Client, einem HTML-Editor, Werkzeugen für Web-Entwickler und einem IRC Chat Client.
+
Firefox Mobile
+
Durch das Hinzufügen von Firefox® zu Deinem Smartphone hast Du Zugriff auf unzählige Web-Inhalte und Du kannst Deine bevorzugten Firefox Features überall geniessen.
+
Lightning
+
Lightning ist eine beliebte Erweiterung für Kalender-, Terminverwaltungs- und Aufgabenplanungs-Anwendungen.
+
+ +

Falls für Deine Sprache ein hg Repository im Mozilla-Netzwerk existiert, kannst Du Deine aktuellen Lokalisierungsarbeiten in den l10n Dashboards verfolgen.

+ +
+

Hinweis: Wenn Du eine neue Lokalisierung startest und Dich für ein Offline-Werkzeug zum Lokalisieren von Mozilla Anwendungen entscheidest, dann solltest Du Dich mit der Bedienung von Mercurial (hg) vertraut machen. Lese hierfür das hg Anwender-Tutorial.

+
+ +

Mozilla Webseiten

+ +

Du bist also am Lokalisieren von Mozilla Webseiten interessiert. Jedes l10n Werkzeug folgt einem anderen Ablauf zum Lokalisieren von Mozilla Webprojekten. Zu jedem unten angegebenen l10n Werkzeug haben wir einen Link zu einem Einweisungs-Tutorial eingefügt. Folge den Tutorien und entscheide selbst, welches l10n Werkzeug Deinen speziellen Bedürfnissen entspricht.

+ +

Das sind die l10n Werkzeuge, die wir zum Lokalisieren von Mozilla Webprojekten nutzen:

+ +
+
Verbatim
+
Eine angepasste, von Mozilla betriebene Pootle-Version zum Lokalisieren von Mozilla Webseiten, speziell von Mozilla Mitmach-Kampagnen. Zudem beinhaltet es Funktionen zur Projektverwaltung, um den Projekt-Fortschritt zu kontrollieren. Besuche Verbatim hier.
+
Pontoon
+
Ein Web-basiertes What-You-See-Is-What-You-Get (WYSIWYG) l10n Werkzeug zum Lokalisieren von Mozilla Webseiten innerhalb der Seite selbst. Besuche Pontoon hier. Bitte beachte, dass Pontoon zur Zeit noch nicht für alle Webprojekte verfügbar ist.
+
+ +

Die folgenden Mozilla Webprojekte wurden mit den oben vorgestellten l10n Werkzeugen lokalisiert:

+ +
+
mozilla.org
+
Der Einstieg für alle.
+
addons.mozilla.org (AMO)
+
Ein Portal für alle, die Add-Ons für ihre Mozilla Anwendungen finden wollen. Lese die Anleitungen zum Lokalisieren von AMO direkt vom AMO Team.
+
developer.mozilla.org (MDN)
+
Wo Du gerade bist! Helfe beim Lokalisieren der MDN Benutzeroberfläche für alle in Deiner Region.
+
support.mozilla.com (SUMO)
+
Ein Portal für alle, die technische Unterstützung für ihre Mozilla Anwendungen brauchen. Helfe beim Lokalisieren der SUMO Benutzeroberfläche für alle in Deiner Region.
+
Mozilla Mitmach-Kampagnen
+
Individuelle Mozilla Kampagnen zum Gewinnen neuer Mitwirkender.
+
hacks.mozilla.org
+
Für alle, die an den technisch tiefer gehenden Sachen interessiert sind, die die Anwender mit Mozilla Firefox und dem Open Web so machen.
+
In-product Seiten
+
Eine Sammlung von Seiten zum Kommunizieren mit den Anwendern und zum Informieren der Anwender bei deren Einstieg in Mozilla Anwendungen.
+
+ +

Wenn Du Deine eigene Lokalisation anlegst, dann gibt es eine Fülle von Mozilla Webseiten die lokalisiert werden müssen bevor Deine Arbeit eine offiziell freigegebene Lokalisation wird. Siehe Liste der lokalisierten Mozilla Webseiten.

+ +

Ausserdem solltest Du mehr Informationen über das Lokalisieren von Mozilla Webprojekten lesen.

+ +
+
 
+
+ +

Add-Ons

+ +

l10n für Add-Ons wird von mindestens zwei weiteren Organisationen/Teams namens Babelzilla und Adofex durchgeführt. Beide haben umfangreiche Projekte und l10n Werkzeuge aufgebaut, zum Lokalisieren aller eigenen Add-ons und aller Add-Ons von Drittanbietern für Mozilla Anwendungen. Besuche ihre Webseiten um zu sehen, wie Du Dich einbringen kannst.

+ + + +

Werkzeug-unabhängige Lokalisation

+ +

Du bist ein Meister der Kommandozeilen? Du bevorzugst Unicode Text-Editoren vor allen anderen Anwendungen auf diesem Planeten? Dein Liebling ist ein CAT (computer-assisted translation) Werkzeug wie OmegaT? Dann bist Du vielleicht nicht interessiert daran, eines der oben vorgestellten Werkzeuge für Deine Lokalisierungen zu benutzen. Wenn das der Fall ist,  dann ist dieser Abschnitt für Dich!

+ +

Für Lokalisierer, die das Lokalisieren ohne spezielle Werkzeuge bevorzugen ist der Ablauf zum Lokalisieren von Mozilla Anwendungen und Mozilla Webseiten grundsätzlich gleich. Dieses Tutorial sollte Dich mit allen benötigten technischen Informationen zum Erhalt und zur Pflege Deiner Unabhängigkeit versorgen.

+ +

Produktisierung

+ +

Produktisierung ist ein unverzichtbarer Teil beim Lokalisieren von Mozilla Produkten. In diesem Schritt implementierst Du die zu verwendenden Plug-Ins für die Suche, die Content- und Protokoll-Steuerung, Lesezeichen und die Links zu den empfohlenen Stellen in den in-product Seiten, die die Anwender in Deiner Sprache zu den jeweiligen Mozilla Produkten benötigen.

+ +

Dieses Tutorial geht mit Dir die einzelen Produktisierungs-Schritte durch, also durch das Anlegen von Produktisierungs-Patches und deren Weiterleitung an die Qualitätssicherung.

+ +

{{ PreviousNext("Localization_Quick_Start_Guide/Initial_setup", "Localization_Quick_Start_Guide/QA_phase") }}

diff --git a/files/de/rdf/index.html b/files/de/rdf/index.html new file mode 100644 index 0000000000..d110399eae --- /dev/null +++ b/files/de/rdf/index.html @@ -0,0 +1,12 @@ +--- +title: RDF +slug: RDF +tags: + - RDF +translation_of: Archive/Web/RDF +--- +

Resource Description Framework (RDF) ist eine Familie von Spezifikationen für ein Metadaten-Modell, das meist als XML-Anwendung implementiert ist. Die verschiedenen RDF Spezifikationen werden durch das World Wide Web Consortium (W3C) gewartet.

+

Das RDF-Metadaten-Modell basiert auf der Idee, Aussagen über Ressourcen in der Form eines Subjekt-Prädikat-Objekt-Ausdrucks zu machen, welchen man in der RDF-Terminologie als Triple bezeichnet. Das Subjekt ist die Ressource, das zu beschreibende "Ding". Das Prädikat ist ein Merkmal oder Aspekt dieser Ressource, und meist Ausdruck einer Beziehung zwischen dem Subjekt und dem Objekt. Das Objekt ist das Objekt der Beziehung oder der Wert dieses Merkmals.

+ +

Dokumentation

Entwicklungen der Mozilla RDF Engine (en)
Diese Präsentation zeigt neue Entwicklungen in Mozillas RDF Engine. Es gibt Pläne die RDF-API als öffentlichen Webinhalt freizugeben, sowie Performance und Genauigkeit zu verbessern .
Was ist RDF
Tim Brays Einführung in das Resource Description Framework auf XML.com.
RDF in Mozilla FAQ
Häufig gestellte Fragen zum Resource Description Framework in Mozilla.
RDF in fünfzig Worten oder weniger
Eine schnelle Einführung in das Resource Description Framework.
RDF Datenquellen Tutorial
Ein Artikel, der die Zutaten für eine systemeigene und clientseitige Datenquelle liefert, die mit Mozillas RDF Implementierung zusammenarbeitet.
Füllen der In-Memory Datenquelle
Benutzen von XPCOM Aggregation mit der In-Memory-Datenquelle.

Alle anzeigen...

Community

  • Mozillas RDF Foren:

{{ DiscussionList("dev-tech-rdf", "mozilla.dev.tech.rdf") }}

Tools

Verwandte Themen

XML
+

{{ languages( { "en": "en/RDF", "es": "es/RDF", "fr": "fr/RDF", "it": "it/RDF", "ja": "ja/RDF", "ko": "ko/RDF", "pl": "pl/RDF", "pt": "pt/RDF", "ru": "ru/RDF" } ) }}

diff --git a/files/de/rhino/index.html b/files/de/rhino/index.html new file mode 100644 index 0000000000..2505563c91 --- /dev/null +++ b/files/de/rhino/index.html @@ -0,0 +1,14 @@ +--- +title: Rhino +slug: Rhino +translation_of: Mozilla/Projects/Rhino +--- +

Image:rhino.jpg

+

Rhino ist eine Open-Source-Implementierung von JavaScript, die vollständig in Java entwickelt wurde. Sie wird typischerweise in Java-Anwendungen eingebettet, um Endanwendern Skripting zu ermöglichen. In J2SE 6 wird Rhino als Standard-Scripting-Engine mitgeliefert.

+

Rhino Downloads

+

Wie man an Sourcen und Binaries kommt. 

+

Rhino Dokumentation

+

Informationen zu Rhino für das Schreiben von Skripten und das Einbetten in Applikationen.

+

Rhino Hilfe

+

Ein paar Resourcen, für den Fall, dass man nicht mehr weiter kommt.

+

{{ languages( { "ja": "ja/Rhino" } ) }}

diff --git a/files/de/rhino_documentation/index.html b/files/de/rhino_documentation/index.html new file mode 100644 index 0000000000..c664463d0d --- /dev/null +++ b/files/de/rhino_documentation/index.html @@ -0,0 +1,115 @@ +--- +title: Rhino Dokumentation +slug: Rhino_documentation +translation_of: Mozilla/Projects/Rhino/Documentation +--- +

Information zu Rhino für das Schreiben von Skripten und das Einbetten in Appliketionen.

+

Allgemein

+
+
+ Überblick
+
+ Ein Überblick über die Sprache JavaScript und Rhino.
+
+ Lizenz
+
+ Rhino Lizenzinformationen.
+
+ Vorraussetzungen und Einschränkungen
+
+ Was man braucht, um Rhino zu nutzen; was Rhino nicht kann.
+
+ Downloadarchiv
+
+ Ältere Versionen von Rhino mit ihren Releasenotes
+
+ Optimierungen
+
+ Details zu den verschiedenen Optimierungsstufen.
+
+ FAQ
+
+ Antworten zu häufig über Rhino gestellten Fragen.
+
+ Rhino Historie
+
+ Historie des Tiers.
+
+

Schreiben von Skripten

+
+
+ Scripting Java
+
+ How to use Rhino to script Java classes.
+
+ Scripting Java
+
+ How to use Rhino to script Java classes (an older treatment).
+
+ Performance Hints
+
+ Some tips on writing faster JavaScript code.
+
+

JavaScript Tools

+
+
+ Rhino Shell
+
+ Interactive or batch execution of scripts.
+
+ JavaScript Debugger
+
+ Debugging scripts running in Rhino.
+
+ JavaScript Compiler
+
+ Compiling scripts into Java class files.
+
+ Running the Rhino tests
+
+ Running the JavaScript test suite with Rhino.
+
+

Embedding Rhino

+
+
+ Embedding tutorial
+
+ A short tutorial on how to embed Rhino into your application.
+
+ API javadoc Reference (Link broken?  Try this at Jarvana.)
+
+ An annotated outline of the programming interface to Rhino (tip only).
+
+ Scopes and Contexts
+
+ Describes how to use scopes and contexts for the best performance and flexibility, with an eye toward multithreaded environments.
+
+ Serialization
+
+ How to serialize JavaScript objects and functions in Rhino.
+
+ Runtime
+
+ A brief description of the JavaScript runtime.
+
+ Small Footprint
+
+ Hints for those interested in small-footprint embeddings.
+
+ Examples
+
+ A set of examples showing how to control the JavaScript engine and build JavaScript host objects.
+
+ Using Rhino with Bean Scripting Framework (BSF)
+
+ How to use Rhino with apps that support BSF (Bean Scripting Framework) from the Apache Jakarta project.
+
+

External references

+
+
+ Scripting Languages for Java
+
+ An article comparing and contrasting Rhino and Jython.
+
+

Rhino contributors

+

Interested in contributing to Rhino? Check out the Rhino Wish List.

diff --git a/files/de/richtlinien_zum_schreiben_eines_bugreports/index.html b/files/de/richtlinien_zum_schreiben_eines_bugreports/index.html new file mode 100644 index 0000000000..a62c84c82c --- /dev/null +++ b/files/de/richtlinien_zum_schreiben_eines_bugreports/index.html @@ -0,0 +1,147 @@ +--- +title: Richtlinien zum Schreiben eines Bugreports +slug: Richtlinien_zum_Schreiben_eines_Bugreports +tags: + - QA + - Qualitätssicherung +translation_of: Mozilla/QA/Bug_writing_guidelines +--- +
Wenn Sie Hilfe mit Mozilla-Software benötigen (zum Beispiel Firefox oder Thunderbird), nutzen Sie bitte die Supportseiten. Ändern Sie diese Seite nicht. + +

Wenn Sie noch nie einen Bugreport verfasst haben, möchten Sie vielleicht Hilfe von erfahrenen Mitarbeitern erhalten. Schauen Sie dazu auf die Community-Links auf der Seite zur Qualitätssicherung. Wenn Sie einen Firefox-Bug melden wollen, können Sie auch im #firefox.de IRC-Channel Hilfe suchen.

+
+ +

Grundsätze

+ +

Genau beschriebene Fehlermeldungen werden schneller behoben. Dieser Leitfaden erklärt, wie Sie solche Berichte schreiben sollten.

+ + + +

Vorbereitungen

+ +
    +
  1. Reproduzieren Sie Ihren Bug, indem Sie die neueste Version der Software benutzen, um zu sehen, ob der Bug schon behoben wurde.
    2. +
  2. Suchen Sie in Bugzilla, um zu sehen, ob Ihr Bug schon gemeldet wurde.
    3. +
+ +

Einen neuen Bug melden

+ +

Wenn Sie den Bug in einer neuen Version reproduziert haben und noch niemand den Bug gemeldet hat, dann:

+ +
    +
  1. Wählen Sie "Einen neuen Bug melden"
    2. +
  2. Falls Sie noch keinen Bugzilla-Account haben, erstellen Sie hier einen
    3. +
  3. Loggen Sie sich ein
    4. +
  4. Wählen Sie das Produkt, in welchem Sie den Bug gefunden haben
    5. +
  5. Füllen Sie das Formular aus. Hier ist eine kleine Hilfe, um die Einzelheiten zu verstehen:
    6. +
+ +

Component: In welchem Teil der Software besteht der Bug?

+ +

Dieses Feld wird benötigt. Klicken Sie auf "Component" um eine Beschreibung aller Komponenten zu sehen. Falls keins angebracht scheint, suchen Sie nach einer "General" Komponente.

+ +

Version: Das Feld zeigt die früheste Version, mit der der Bug nachgewiesen wurde. Entwickler benötigen diese Information, um die Code-Änderung, die das Problem verursacht, aufzuspüren. Außderdem dient die Versions-Information der Unterscheidung von Bugs mit unterschiedlichen Ursachen, aber ähnlchen oder gar gleichen Symptomen: Bugs, die defenitiv mit unterschiedlichen Produkt-Versionen auftraten, haben mit großer Sicherheit tatsächlich unterschiedliche Ursachen und sind keine DUPLICATEs.

+ +

OS: Auf welchem Betriebssystem haben Sie den Bug gefunden? (z.B. Linux, Windows XP, Mac OS X)

+ +

Wenn Sie wissen, dass der Bug auf mehreren Betriebssystemen besteht, klicken Sie "All". Wenn ihr Betriebssystem nicht aufgelistet ist, klicken Sie auf "Other".

+ +

Summary: Wie würden Sie den Bug beschreiben, möglichst in 60 oder weniger Buchstaben?

+ +

Eine gute Kurzfassung sollte eine Bug-Meldung schnell und unverwechselbar beschreiben. Sie sollte das Problem erklären, nicht Ihre vorgeschlagene Lösung.

+ + + +

Description: Die Details ihrer Bug-Meldung, einschließlich:

+ +

Overview: Detailliertere Beschreibung der Zusammenfassung.

+ +
Drag-selecting any page crashes Mac builds in the NSGetFactory function.
+ +

Steps to Reproduce: Kleine, einfache Schritte, um den Bug nachzumachen. Mit Hinweisen zum Setup.

+ +
1) View any web page. (I used the default sample page,
+resource:/res/samples/test0.html)
+
+2) Drag-select the page. (Specifically, while holding down
+the mouse button, drag the mouse pointer downwards from any
+point in the browser's content region to the bottom of the
+browser's content region.)
+
+ +

Actual Results: Was die Applikation macht, nachdem Sie die oben aufgeführten Schritte durchgeführt haben.

+ +
The application crashed.
+ +

Expected Results: Was die Applikation hätte tun sollen, wenn der Bug nicht da wäre.

+ +
The window should scroll downwards. Scrolled content should be selected.
+(Or, at least, the application should not crash.)
+
+ +

Build Date & Platform: Datum und Betriebssystem auf dem die Applikation lief, als sie den Bug zum ersten Mal gesehen haben.

+ +
Build 2006-08-10 on Mac OS 10.4.3
+ +

Additional Builds and Platforms: Falls Sie wissen, dass der Bug auch in anderen Betriebssystemen (oder Browsern) auftritt (oder nicht), schreiben Sie dies dazu.

+ +
Doesn't Occur On Build 2006-08-10 on Windows XP Home (Service Pack 2)
+ +

Additional Information: Andere wichtige Informationen.

+ +

Für Bugs, die den Browser abstürzen lassen:

+ + + +
Date/Time:      2006-12-26 12:15:20.089 -0500
+OS Version:     10.4.8 (Build 8L2127)
+Report Version: 4
+
+Command: firefox-bin
+Path:    /Applications/Firefox.app/Contents/MacOS/firefox-bin
+Parent:  WindowServer [71]
+
+Version: 2.0.0.1 (2.0.0.1)
+
+PID:    114
+Thread: 0
+
+Exception:  EXC_BAD_ACCESS (0x0001)
+Codes:      KERN_PROTECTION_FAILURE (0x0002) at 0x000000ca
+
+Thread 0 Crashed:
+0   libxpcom_core.dylib 	0x0186329b AppendUTF8toUTF16(char const*, nsAString_internal&) + 31
+1   libxpcom_core.dylib 	0x01822916 nsTextFormatter::smprintf_free(unsigned short*) + 3248
+... (many many more lines like this) ...
+ +

Add an attachment: Sie können relevante Dateien an ihre Bug-Meldung anfügen. Debugging-Informationen, die länger als 20 Zeilen sind, sollten auf diesem Weg geliefert werden. Sollten Sie eine HTML-Datei haben, die diesen Bug beschreibt, sollten Sie sie anfügen. Sie können anfänglich nur eine Datei anfügen. Sollte ihre Meldung mehr Dateien angehängt haben, besuchen Sie den neu hinzugefügten Bug später noch einmal, um das zu tun. Hängen Sie zuerst untergeordnete Dateien an (z.B. Bilder) und ändern Sie anschließend die HTML-Datei, sodass die Demo unabhängig ist. Fragen Sie, bevor Sie mehr als 5 Dateien anhängen.

+ +

Prüfen Sie Ihren Report zweimal auf Fehler und drücken Sie dann "Commit". Ihre Bug-Meldung wird nun in die Bugzilla-Datenbank kommen.

+ +
+

Informationen zum Originaldokument

+ + +
+ +

 

diff --git a/files/de/sandbox/index.html b/files/de/sandbox/index.html new file mode 100644 index 0000000000..2f88f3ca0f --- /dev/null +++ b/files/de/sandbox/index.html @@ -0,0 +1,69 @@ +--- +title: Junk +slug: Sandbox +translation_of: Sandbox +--- +

Hallo Welt1

+ +

HTML Inhalt1

+ +

Hallo Welt!

+ +

<p>Das ist ein <i>unglaublicher1</i>Paragraph</p>

+ +

 

+ +

Dies ist eine exmperimentelle Seite für Leute, die als MDN Beiträger starten.

+ +
+

CSS Inhalt1

+
+ +
+
+
+
1  h1{
+2  color: yellow;
+3  }
+4
+5  p{
+6  font-size: low;
+7  }
+
+
+
+ +

 

+ +

Testvorlage

+ +

HTML Inhalt

+ +
1  <canvas id='the_canvas'></canvas>
+ + +

mathvariant-Examples

+ +

HTML-Inhalt

+ +
normal (Standardwert) ; Beispiel
+bold ; Beispiel
+italic ; Beispiel
+bold-italic ; Beispiel
+double-struck ; Beispiel
+bold-fraktur ; Beispiel
+script ; Beispiel
+bold-script ; Beispiel
+fraktur ; Beispiel
+sans-serif ; Beispiel
+bold-sans-serif ; Beispiel
+sans-serif-italic ; Beispiel
+sans-serif-bold-italic ; Beispiel
+monospace ; Beispiel
+initial ; مثال
+tailed ; مثال
+looped ; مثال
+stretched ; مثال
+
+ +

{{ EmbedLiveSample('mathvariant-Examples') }}

diff --git a/files/de/social_api/index.html b/files/de/social_api/index.html new file mode 100644 index 0000000000..38ad560b63 --- /dev/null +++ b/files/de/social_api/index.html @@ -0,0 +1,69 @@ +--- +title: Social API +slug: Social_API +translation_of: Archive/Social_API +--- +

Die Social API macht es einfacher für Webentwickler, soziale Dienste in den Webbrowser zu integrieren. Ist ein Dienstanbieter einmal für Firefox implementiert, so kann der Browser benutzerdefinierte Steuerelemente und Informationen zu einem konkreten Dienst anzuzeigen. Die folgenden Artikel erklären, wie man einen solchen Anbieter implementiert.  

+
+

Anmerkung:  Viele der Inhalte der hier aufgeführten Unterseiten wurden entworfen, aber noch nicht in diesen Baum migriert; Temporär sind diese hier aufzufinden.

+
+
+
+

Social API Dokumentation

+
+
+ Social API Glossar
+
+ Stellt Definitionen der wichtigsten Begriffe bereit, die du wissen musst, um die Social API zu benutzen.
+
+ Social API und Anleitung für soziale Dienste
+
+ Vorstellung und Einführung in die Social API und zugehörige Dienste.
+
+ Manifest sozialer Dienste
+
+ Eine Beschreibung des (TBD: und Anleitung für die Erstellung) Manifests notwendig
+
+ Worker API sozialer Dienste
+
+ Eine Referenz zur Worker API sozialer Dienste.
+
+ Social service content API: MozSocial
+
+ Eine Referenz für die social service content API, die vom 
+
+ {{domxref("navigator.MozSocial")}} Objekt bereitgestellt wird. 
+
+
+
+
+ Social service widgets
+
+ Eine Anleitung für Widgets, die von sozialen Diensten bereitgestellt werden.
+
+ Implementieren von Chatfunktionalität
+
+ Eine Anleitung für die Implementiereung von Chatfunktionalitäten mit der Social API.
+
+

Alle anzeigen...

+
+
+

Hilfe von der Community erhalten

+

Du brauchst Hilfe bei einem Problem, dass die Social API betrifft und kannst keine Lösung in der Dokumentation finden?

+
    +
  • Stelle deine Frage im Mozilla IRC channel: #socialdev
    • +
+

Vergiss die netiquette nicht...

+

 

+

Tools und Demos

+ +

Alle anzeigen...

+ + +
+
+

 

diff --git a/files/de/spidermonkey/build_documentation/index.html b/files/de/spidermonkey/build_documentation/index.html new file mode 100644 index 0000000000..9502dcd4be --- /dev/null +++ b/files/de/spidermonkey/build_documentation/index.html @@ -0,0 +1,239 @@ +--- +title: SpiderMonkey Build Documentation +slug: SpiderMonkey/Build_Documentation +tags: + - Build Dokumentation + - Guide + - Linux Build + - SpiderMonkey + - Windows Build +translation_of: Mozilla/Projects/SpiderMonkey/Build_Documentation +--- +
{{SpiderMonkeySidebar("General")}}
+ +

SpiderMonkey erstellen

+ +

Befolgen Sie diese Schritte um den aktuellsten SpiderMonkey Build zu erstellen.

+ +

Bevor Sie jedoch beginnen, stellen Sie sicher, dass sich die richtigen Build Werkzeuge auf Ihrem Computer befinden: Linux, Windows, Mac, others. Sollten Sie eine ältere Version als 28 erstellen wollen, benötigen Sie zusätzlich NSPR.

+ +

Selbstverständlich benötigen Sie auch den SpiderMonkey Quellcode.

+ +

Non-developer (optimierter) Build

+ +

Befolgen Sie diese Schritte wenn Sie SpiderMonkey einfach nur installieren oder es als Bibliothek nutzen wollen. (Wenn Sie SpiderMonkey an sich verbessern wollen, sollten Sie zusätzlich einen Developer/Debug-Build wie unten beschrieben erstellen.)

+ +
cd js/src
+autoconf-2.13
+
+# This name should end with "_OPT.OBJ" to make the version control system ignore it.
+mkdir build_OPT.OBJ
+cd build_OPT.OBJ
+../configure
+# Use "mozmake" on Windows
+make
+
+ +

Beachten Sie, dass autoconf version 2.13 benötigt wird. Keine ältere Version wird funktionieren. Das MozillaBuild Paket für Windows beeinhaltet autoconf 2.13.

+ +
+

Hinweis: Sollten Sie einen Mac nutzen und eine ähnliche Fehlermeldung wie folgendes erhalten:

+ +

"checking whether the C compiler (gcc-4.2  ) works... no
+ configure: error: installation or configuration problem: C compiler cannot create executables."

+ +

Dann können Sie versuchen es so zu konfigurieren :

+ +
CC=clang CXX=clang++  ../configure
+
+ +

Dies erstellt eine ausfühbare Datei mit Namen js im Verzeichnis build-release/dist/bin. Sie können es mit dist/bin/js --help testen,  welches eine Hilfeseite anzeigt. An diesem Punkt sind Sie bereit die Shell auszuführen und zu testen.

+ +

Auf Mac, Linux, oder UNIX können Sie SpiderMonkey auf Ihrem System mit dem zusätzlichen Befehl make install installieren. Dies installiert die geteilte Bibliothek nach /usr/local/lib, die C-Header-Dateien nach /usr/local/include, und die ausführbare js  nach /usr/local/bin.

+ +

Developer (debug) Build

+ +

Um SpiderMonkey zu debuggen und zu verbessern ist es das Beste beide, einen Debug-Build  (für alltägliches debugging) und einen optimierten Build (zum Testen der Performance), in separaten Build Verzeichnissen zu haben. Daher sollten Sie zusätzlich zu den oben genannten Schritten auch einen Debug-Build mit den folgenden Schritten erstellen:

+ +
cd js/src
+autoconf-2.13
+
+# This name should end with "_DBG.OBJ" to make the version control system ignore it.
+mkdir build_DBG.OBJ
+cd build_DBG.OBJ
+../configure --enable-debug --disable-optimize
+# Use "mozmake" on Windows
+make
+
+ +

Sie können auch Debug-Builds von SpiderMonkey mit der Option JS_GC_ZEAL  erstellen, die SpiderMonkey eine neue integrierte Funktion hinzufügt, mit der Sie eine eifrige Garbage Collection konfigurieren können. Dies ist nützlich um Speicherlecks und andere speicherbezogene Probleme zu beheben. Siehe JS_SetGCZeal() für weitere Details.

+ +

Für eine Liste anderer verfügbarer Build-Optionen geben Sie Folgendes ein (vorausgesetzt, das aktuelle Arbeitsverzeichnis ist eines der oben erstellten Build-Verzeichnisse):

+ +
../configure --help
+
+ +

Windows Builds

+ +
+

Seit Version 28, sind threadsafe Builds Standard und sollten auf allen POSIX-Plattformen sofort einsatzbereit sein. Daher sollten die folgenden Anweisungen nur relevant sein, wenn Sie unter Windows arbeiten oder eine ältere Version von SpiderMonkey kompilieren.

+
+ +

Die MozillaBuild-Batch-Datei, die Sie zum Öffnen Ihrer Shell verwendet haben (z. B. start-shell-msvc2013.bat oder start-shell-msvc2013-x64.bat), bestimmt, ob die Compiler-Toolchain auf 32-Bit- oder 64-Bit-Builds abzielt. Um einen 64-Bit-Build zu erstellen beachten Sie, dass Sie mit --target=x86_64-pc-mingw32 --host=x86_64-pc-mingw32 konfigurieren müssen. 

+ +

Da die POSIX NSPR-Emulation für Windows nicht verfügbar ist, muss eine funktionierende Version von NSPR für Ihren Build verfügbar sein. Die einfachste Option ist die Konfiguration mit --enable-nspr-build. Diese Konfigurationsoption erstellt die In-Tree-Version von NSPR, die Sie wahrscheinlich verwenden möchten. Da SpiderMonkey neuere NSPR-Symbole verwendet, funktioniert der mit Ihrem Betriebssystem ausgelieferte NSPR wahrscheinlich nicht.

+ +

Wenn --enable-nspr-build nicht funktioniert, teilen Sie configure explizit mit, wo es NSPR findet, indem Sie die Konfigurationsoptionen -with-nspr-cflags und --with-nspr-libs verwenden. Angenommen, Ihr lokaler NSPR wurde in C:/mozilla-build/msys/local installiert:

+ +
./configure --with-nspr-cflags="-IC:/mozilla-build/msys/local/include" \
+            --with-nspr-libs="C:/mozilla-build/msys/local/lib/libnspr4.a \
+                              C:/mozilla-build/msys/local/lib/libplds4.a \
+                              C:/mozilla-build/msys/local/lib/libplc4.a"
+
+ +

Sollten Sie beim Laden von Symbolen oder der dynamischen Bibliothek Fehler erhalten, können Sie erzwingen den korrekten NSPR mit:

+ +
PATH="$PATH;C:/mozilla-build/msys/local/lib/" ./js
+ +

zu laden.

+ +

Angeben der Installationsverzeichnisse

+ +

make install legt Dateien standardmäßig in den folgenden Verzeichnissen ab. Sie können dies überschreiben, indem Sie Optionen an das configure-Skript übergeben:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Was es istWo es abgelegt wirdconfigure Option
ausführbare Dateien, Shell-Skripte/usr/local/bin--bindir
Bibliotheken, Daten/usr/local/lib--libdir
architekturunabhängige Daten/usr/local/share--sharedir
C-Header-Dateien/usr/local/include--includedir
+ +

Der Einfachhalt halber können Sie dem configure Script (Konfigurationsskript) eine Option der Form --prefix=<PREFIXDIR> übergeben, die <PREFIXDIR> für /usr/local in allen obigen Einstellungen in einem Schritt ersetzt. Dies ist normalerweise die am wenigsten problematische Sache, da es die typische Anordnung von lib, bin und dem Rest beibehält. 

+ +
Hinweis: Alle Verzeichnisse, die Sie zur configure übergeben, werden im generierten makefile aufgezeichnet, sodass Sie sie erst erneut angeben müssen, wenn Sie configure erneut ausführen.
+ +

SpiderMonkey als statische Bibliothek erstellen

+ +

Standardmäßig wird SpiderMonkey als gemeinsam genutzte Bibliothek erstellt. Sie können SpiderMonkey jedoch als statische Bibliothek erstellen, indem Sie beim Ausführen von configure das Flag --disable-shared-js angeben. 

+ +

Angeben der Compiler und Compiler Flags

+ +

Wenn Sie einen anderen Compiler verwenden möchten als den, den das configure -Skript standardmäßig für Sie auswählt, können Sie die CXX-Variable in der Umgebung festlegen, wenn Sie configure ausführen. Dadurch werden die Werte gespeichert, die Sie im generierten Makefile angegeben haben. Wenn Sie diese Makefile einmal festgelegt haben, müssen Sie dies erst wieder tun, wenn Sie configure rneut ausführen.

+ +

Wenn Sie bestimmte Flags an den Compiler übergeben möchten, können Sie die CXXFLAGS -Umgebungsvariable beim Ausführen von configure festlegen. Wenn Sie beispielsweise die GNU-Toolchain verwenden, wird im Folgenden das Flag -g3 an den Compiler übergeben, wodurch Debug-Informationen zu Makros ausgegeben werden. Dann können Sie diese Makros in gdb -Befehlen verwenden:

+ +
$ CXXFLAGS=-g3 $SRC/configure
+...
+checking whether the C++ compiler (c++ -g3 ) works... yes
+...
+$
+
+ +

Um eine 32-Bit Version auf einem 64-Bit Linux System zu erstellen können Sie Folgendes verwenden:

+ +
PKG_CONFIG_LIBDIR=/usr/lib/pkgconfig CC="gcc -m32" CXX="g++ -m32" AR=ar $SRC/configure --target=i686-pc-linux
+
+ +

Um eine 64-Bit Version auf einem 32-Bit Mac System (bspw. Mac OS X 10.5) zu erstellen können Sie Folgendes verwenden:

+ +
AR=ar CC="gcc -m64" CXX="g++ -m64" ../configure --target=x86_64-apple-darwin10.0.0
+
+ +

Um eine 64-Bit Version für Windows zu erstellen können Sie Folgendes verwenden:

+ +
$SRC/configure --host=x86_64-pc-mingw32 --target=x86_64-pc-mingw32
+
+ +
Hinweis: Sie müssen Ihre MozillaBuild Shell mit dem korrekten -x64.bat Skript gestartet haben, damit sich die 64-Bit Compiler in Ihrem PATH befinden.
+ +

Die Compiler und Flags, die Sie configure (Konfiguration) übergeben, werden in der generierten Makefile aufgezeichnet. Sie müssen diese daher erst wieder angeben, wenn Sie configure erneut ausführen.

+ +

Erstellung Ihrer Anwendung

+ +

Während "Wie können Sie eine komplette Anwendung erstellen" für dieses Dokument eindeutig nicht möglich ist, hier ein paar Tipps, die Ihnen dabei helfen werden:

+ + + +

Using the js-config script

+ +

In addition to the SpiderMonkey libraries, header files, and shell, the SpiderMonkey build also produces a shell script named js-config which other build systems can use to find out how to compile code using the SpiderMonkey APIs, and how to link with the SpiderMonkey libraries.

+ +
Note: In SpiderMonkey 1.8.5, the js-config script is not generated properly on many platforms. If the instructions below do not work, you can try this workaround.
+ +

When invoked with the --cflags option, js-config prints the flags that you should pass to the C compiler when compiling files that use the SpiderMonkey API. These flags ensure the compiler will find the SpiderMonkey header files.

+ +
$ ./js-config --cflags # Example output: -I/usr/local/include/js -I/usr/include/nspr
+
+ +

When invoked with the --libs option, js-config prints the flags that you should pass to the C compiler when linking an executable or shared library that uses SpiderMonkey. These flags ensure the compiler will find the SpiderMonkey libraries, along with any libraries that SpiderMonkey itself depends upon (like NSPR).

+ +
$ ./js-config --libs # Example output: -L/usr/local/lib -lmozjs -L/usr/lib -lplds4 -lplc4 -lnspr4 -lpthread -ldl -ldl -lm  -lm -ldl
+ +

Testing SpiderMonkey

+ + + +

Building SpiderMonkey 1.8 or earlier

+ +

Use these instructions to build SpiderMonkey from an official source release or from the old CVS repository. To build the latest SpiderMonkey sources from Mercurial, see Building SpiderMonkey above.

+ +

SpiderMonkey is easy to build from source if you have the usual Mozilla build prerequisites installed. Before you begin, make sure you have right build tools for your computer: Linux, Windows, Mac, others.

+ +

First, download a SpiderMonkey source distribution, such as SpiderMonkey 1.8 Release Candidate 1.

+ +

To build, use these commands:

+ +
tar xvzf js-1.8.0-rc1.tar.gz
+cd js/src
+make -f Makefile.ref
+
+ +

This builds a debug version of SpiderMonkey. All build files are created in a subdirectory named depending on your system (for example,Linux_All_DBG.OBJ if you are on Linux). To install this build on your system, see SpiderMonkey installation instructions.

+ +

To build an optimized (non-debug) version of SpiderMonkey:

+ +
make BUILD_OPT=1 -f Makefile.ref
+ +

To build a thread-safe version of SpiderMonkey:

+ +
make JS_DIST=/full/path/to/directory/containing/nspr JS_THREADSAFE=1 -f Makefile.ref
+
diff --git a/files/de/spidermonkey/index.html b/files/de/spidermonkey/index.html new file mode 100644 index 0000000000..59667350fa --- /dev/null +++ b/files/de/spidermonkey/index.html @@ -0,0 +1,106 @@ +--- +title: SpiderMonkey +slug: SpiderMonkey +tags: + - JavaScript + - SpiderMonkey +translation_of: Mozilla/Projects/SpiderMonkey +--- +

   

+ +

SpiderMonkey ist die in C geschriebene JavaScript Engine für Gecko. SpiderMonkey wird in verschiedenen Mozilla Produkten (auch Firefox) verwendet und ist unter der MPL/GPL/LGPL Lizenz verfügbar.

+ +
Hinweis: Das FOSS Wiki enthält Links zu einigen anderen Bibliotheken und Programmen, die einem das Leben vereinfachen, wenn man Spidermonkey und JSAPI verwendet.
+ + + + + + + + +
+

Dokumentation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Allgemein

+
SpiderMonkey Build DokumentationWie man die SpiderMonkey Source erhält, kompiliert und Testläufe durchführt.
Einführung in die JavaScript Shell +

Wie man die JavaScript Shell bekommt, kompiliert und verwendet.

+
Automatisierte JavaScript TestläufeWie automatisierte JavaScript Tests durchgeführt werden können.
Erstellen von JavaScript TestsEinen Test zu den JavaScript Testsuites hinzufügen.
+

JSAPI

+
JSAPI HandbuchDieser Wegweiser bietet einen Überblick über SpiderMonkey und beschreibt wie man die Engine in die eigene Anwendung einbettet, um sie JavaScript-fähig zu machen.
JSAPI SprachführerZeigt die JSAPI Übersetzung einiger gemeinsam genutzter JavaScript Ausdrücke und Aussagen.
JSAPI ReferenzSpiderMonkey API Referenz.
JSDBGAPI ReferenzSpiderMonkey Debugging API Referenz.
+

Tipps, Tricks und Philosophie

+
Einbetten der JavaScript EngineEin Tutorial über das Einbetten von SpiderMonkey.
SpiderMonkey Garbage Collection TippsTipps, die die Fallen des Garbage Collectors vermeiden sollen.
SpiderMonkey InternalsEin Überblick über die Dateien und den Aufbau von SpiderMonkey
SpiderMonkey Internals: Thread SafetyWie SpiderMonkey's Anfragenmodell arbeitet.
+ 		+

Verwandte Themen

+ + + + +

Community

+ +

Fragen? Frag im IRC!

+
diff --git a/files/de/theme_erstellen/contents.rdf/index.html b/files/de/theme_erstellen/contents.rdf/index.html new file mode 100644 index 0000000000..589b4825c1 --- /dev/null +++ b/files/de/theme_erstellen/contents.rdf/index.html @@ -0,0 +1,47 @@ +--- +title: contents.rdf +slug: Theme_erstellen/contents.rdf +tags: + - Themes +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/contents.rdf +--- +

Kopieren Sie den folgenden Text in ein neues Textdokument und speichern Sie es unter dem Namen »contents.rdf«:

+
<?xml version="1.0"?>
+
+<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
+
+  <!-- List all the skins being supplied by this theme -->
+  <RDF:Seq about="urn:mozilla:skin:root">
+    <RDF:li resource="urn:mozilla:skin:My_Theme"/>
+  </RDF:Seq>
+
+  <RDF:Description about="urn:mozilla:skin:My_Theme"
+        chrome:displayName="My Theme"
+        chrome:accessKey="N"
+        chrome:author="Name des Autors"
+        chrome:authorURL="Webseite des Autors"
+        chrome:description="Beschreibung"
+        chrome:name="My_Theme"
+        chrome:image="vorschaubild.png">
+   <chrome:packages>
+      <RDF:Seq about="urn:mozilla:skin:My_Theme:packages">
+        <RDF:li resource="urn:mozilla:skin:My_Theme:browser"/>
+        <RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
+        <RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
+        <RDF:li resource="urn:mozilla:skin:My_Theme:mozapps"/>
+        <RDF:li resource="urn:mozilla:skin:My_Theme:help"/>
+      </RDF:Seq>
+    </chrome:packages>
+  </RDF:Description>
+
+  <!-- Version Information. State that we work only with major version 1 of this package. -->
+  <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:browser"/>
+  <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:communicator"/>
+  <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:global"/>
+  <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:mozapps"/>
+  <RDF:Description chrome:skinVersion="1.5" about="urn:mozilla:skin:My_Theme:help"/>
+</RDF:RDF>
+
+
+

{{ languages( { "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/contents.rdf", "ja": "ja/Creating_a_Skin_for_Firefox/contents.rdf", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/contents.rdf", "pt": "pt/Criando_um_visual_para_o_Firefox/contents.rdf", "en": "en/Creating_a_Skin_for_Firefox/contents.rdf", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/contents.rdf" } ) }}

diff --git "a/files/de/theme_erstellen/einf\303\274hrung/index.html" "b/files/de/theme_erstellen/einf\303\274hrung/index.html" new file mode 100644 index 0000000000..ebc2d3232c --- /dev/null +++ "b/files/de/theme_erstellen/einf\303\274hrung/index.html" @@ -0,0 +1,83 @@ +--- +title: Theme_erstellen/Einführung +slug: Theme_erstellen/Einführung +tags: + - Add-ons + - Themes +translation_of: Archive/Mozilla/Creating_a_sking_for_Firefox_Getting_Started +--- +

Laden Sie die neueste Version von Firefox herunter und installieren Sie diese. Stellen Sie sicher, dass Sie auch den DOM Inspector installieren.

+

Theme entpacken

+

Theoretisch kann man jedes bereits für Firefox erstellte Theme als Grundlage verwenden, der Einheitlichkeit halber wird in diesem Beipiel das Standard Firefox Theme "Winstripe" verwendet. Dieses befindet sich in der Datei classic.jar, die im Firefox Installationsverzeichnis zu finden ist. Eine JAR-Datei ist in Wirklichkeit ein umbenanntes ZIP-Archiv. Wenn JAR-Dateien in einem Archivierungstool geöffnet werden, sollte es automatisch als solches erkannt werden. Falls Ihr Programm classic.jar nicht als ZIP-Archiv erkennen sollte, benennen Sie die Datei einfach in classic.zip um und fahren mit dem Entpacken fort.

+

Standard classic.jar Verzeichnisse

+

Linux: /usr/lib/MozillaFirefox/chrome/classic.jar oder /usr/lib/firefox-*.*.*/chrome/classic.jar

+

Windows: \Programme\Mozilla Firefox\chrome\classic.jar

+

Mac OS X:

+ +

Kopieren Sie classic.jar in ein anderes, einfach zu erreichendes Verzeichnis - Classic wird empfohlen - und entpacken Sie die Inhalte der Datei in diesen Ordner. Achten Sie dabei darauf, dass die Ordnerstruktur beibehalten wird.

+

Verzeichnisse

+

Innerhalb classic.jar gibt es einen Ordner skin, sowie zwei Dateien, preview.png und icon.png.

+
skin
skin enthält ausschließlich den Ordner classic
skin/classic
classic enthält die folgenden Verzeichnisse:
skin/classic/browser
browser enthält alle Symbolleisten Icons sowie die Icons des Lesezeichen-Managers und des Einstellungen-Fensters.
skin/classic/communicator
Macht nicht allzu viel und kann deshalb normalerweise außen vor gelassen werden.
skin/classic/global
global enthält fast alle wichtigen CSS-Dateien, die die Darstellung des Browsers definieren. Dieser Ordner stellt den wichtigsten Bereich bei der Erstellung eines Themes dar.
skin/classic/help
help enthält alle Dateien zur Darstellung des Hilfe-Dialogs.
skin/classic/mozapps
mozapps enthält alle Styles und Icons der Dialoge innerhalb des Browsers, wie z. B. für die Add-ons und den Update-Assistenten.
+
+

Installation des neuen Themes

+

Bevor Sie die Änderungen sehen können, die Sie an einem Firefox Theme gemacht haben, müssen Sie zunächst verstehen, wie man das classic Theme wieder packt, um es installierbar zu machen. Zur Einfachheit nennen wir das Theme einfach "My_Theme". Sie können ihm jedoch einen beliebigen Namen geben.

+

Kopieren der erforderlichen Dateien

+

Im ersten Schritt werden alle Dateien in die richtige Verzeichnisstruktur verschoben. Erstellen Sie hierzu einen neuen Ordner My_Theme. In dieses Verzeichnis verschieben Sie anschließend die Ordner browser, global, communicator, help und mozapps aus dem classic Theme von Firefox zusammen mit den Dateien icon.png und preview. Die Struktur von "My_Theme" und classic.jar unterscheidet sich dabei leicht.

+

Erstellen der Installationsdateien

+
contents.rdf
+

Machen Sie eine Kopie von contents.rdf und platzieren Sie die Datei innerhalb von \My_Theme. Diese Datei stellt eine XML-Datei dar, die zur Beschreibung des Skins verwendet wird.

+

Öffnen Sie die Datei in einem Texteditor. Ersetzen Sie alle Vorkommen von "My_Theme" innerhalb des Codes durch den Namen ihres Themes.

+

Der "packages"-Bereich listet die Komponenten des Browsers auf, die verändert werden. Falls wir zusätzliche Skins für Chatzilla hätten, müssten wir eine weitere Zeile hinzufügen ähnlich den anderen und sie so verändern, dass die auf Chatzilla verweist.

+
<RDF:li resource="urn:mozilla:skin:My_Theme:communicator"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:editor"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:global"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:messenger"/>
+<RDF:li resource="urn:mozilla:skin:My_Theme:navigator"/>
+
+

Speichern Sie die Datei und beenden Sie den Texteditor.

+
install.rdf
+

Erstellen Sie eine Kopie von install.rdf und platzieren Sie die Datei innerhalb von \My_Theme. Diese Datei stellt eine XML-Datei dar, die zur Beschreibung des Skins verwendet wird.

+
  <Description about="urn:mozilla:install-manifest">
+  <em:id>{Themes_UUID}</em:id>
+  <em:version>Themes_Version</em:version>
+
+

Die erste Sektion benötigt eine UUID und eine Versionsnummer für ihr Theme.

+

Sie müssen zudem die Minimal- und Maximalversion von Firefox angeben, zu der ihr Theme kompatibel ist:

+
  <em:targetApplication>
+    <Description>
+      <!-- Firefox's UUID -->
+      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+      <em:minVersion>Min_FF_Version</em:minVersion>
+      <em:maxVersion>Max_FF_Version</em:maxVersion>
+    </Description>
+  </em:targetApplication>
+
+

Die Angabe der Minimal- und Maximalversion vermeidet Konflikte mit Versionen von Firefox, für die Ihr Theme nicht erstellt wurde - oder nicht getestet wurde.

+

CSS-Dateien

+

Die CSS-Dateien in den Verzeichnissen beschreiben dem Browser, wie er Buttons und andere Kontrollelemente darstellen soll, wo Bilder angezeigt werden sollen, welche Ränder und Abstände er um sie legen soll usw.

+

Als Beispiel ändern wir den Standard Button.

+

Wechseln sie in das global Verzeichnis und öffnen sie die Datei button.css in einem Texteditor. Scrollen Sie bis zu der Zeile mit button. Dieser Style definiert die Darstellung des Stardard Buttons in seinem Ausgangszustand (ohne Mouse-Over-Effekt, der Button ist nicht deaktiviert und nicht ausgewählt).

+

Ändern Sie background-color: zu DarkBlue und color: zu White und speichern die Datei ab.

+

Wieder zu JAR-Datei packen

+

Alles was Sie jetzt noch tun müssen, ist die folgende Verzeichnisstruktur wieder in eine JAR-Datei zu packen:

+
/browser/*
+/communicator/*
+/global/*
+/help/*
+/mozapps/*
+/contents.rdf
+/install.rdf
+/icon.png
+/preview.png
+
+

Stellen Sie sicher, dass Sie nicht nur das Hauptverzeichnis My_Theme packen, sonst schlägt die Drag & Drop Installation fehl.

+

Installation aus einer Webseite heraus

+

Um das Theme direkt aus dem Internet zu installieren, müssen Sie JavaScript bemühen:

+
 <a href='javascript:InstallTrigger.installChrome(InstallTrigger.SKIN,
+  "myskin.jar", "Meinen Skin installieren")'>Meinen Skin installieren</a>
+
+

Installation von der Festplatte

+

Wenn Sie JAR-Dateien mit Themes auf Ihrer Festplatte haben und installieren wollen, benutzen Sie dieses Formular.

+

Sie können auf einfach die JAR-Datei per Drag & Drop in den Themes-Dialog innerhalb Firefox ziehen.

+

{{ languages( { "en": "en/Creating_a_Skin_for_Firefox//Getting_Started", "es": "es/Creando_un_skin_para_Firefox/Como_empezar", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/Premiers_pas", "ja": "ja/Creating_a_Skin_for_Firefox/Getting_Started", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/Zaczynamy", "pt": "pt/Criando_um_visual_para_o_Firefox/Iniciando" } ) }}

diff --git a/files/de/theme_erstellen/index.html b/files/de/theme_erstellen/index.html new file mode 100644 index 0000000000..b96e8b4351 --- /dev/null +++ b/files/de/theme_erstellen/index.html @@ -0,0 +1,26 @@ +--- +title: Theme erstellen +slug: Theme_erstellen +tags: + - Skin + - Themes +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox +--- +

Vorwort

+

Um einen Skin für Firefox zu erstellen, müssen Sie drei Dinge wissen: Wie man Bilder bearbeitet, wie man ZIP-Dateien extrahiert und wie man CSS bearbeitet. Firefox benutzt normale GIF, PNG und JPEG Bilder für die Buttons und CSS, um alles andere der Benutzeroberfläche darzustellen.

+

Was ist ein Skin?

+

Ein Skin ändert nicht die komplette Benutzeroberfläche; stattdessen definiert er, wie die Oberfläche dargestellt wird. Sie können nicht die Verhaltensweise des Programms ändern, wie beispielsweise die Aktion nach einem Rechtsklick auf ein Bild, aber Sie können das Aussehen des Kontextmenüs ändern. Wenn Sie jedoch nicht das Aussehen von Firefox, sondern dessen Funktionsweise verändern wollen, können Sie hierfür eine Erweiterung erstellen.

+

Inhalt

+ +
+

Informationen zum Originaldokument

+ +
+

{{ languages( { "en": "en/Creating_a_Skin_for_Firefox", "es": "es/Creando_un_tema_para_Firefox", "fr": "fr/Cr%c3%a9er_un_th%c3%a8me_pour_Firefox", "pl": "pl/Tworzenie_sk%c3%b3rek_dla_Firefoksa", "ja": "ja/Creating_a_Skin_for_Firefox" } ) }}

diff --git a/files/de/theme_erstellen/install.rdf/index.html b/files/de/theme_erstellen/install.rdf/index.html new file mode 100644 index 0000000000..66871db2c2 --- /dev/null +++ b/files/de/theme_erstellen/install.rdf/index.html @@ -0,0 +1,46 @@ +--- +title: install.rdf +slug: Theme_erstellen/install.rdf +tags: + - Themes +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/install.rdf +--- +

Kopieren Sie den folgenden Text und fügen sie ihn in eine Textdatei ein, speichern Sie die Datei anschließend als »install.rdf«:

+
<?xml version="1.0"?>
+
+<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:em="http://www.mozilla.org/2004/em-rdf#">
+
+  <Description about="urn:mozilla:install-manifest">
+  <em:id>{Themes_UUID}</em:id>
+    <em:version>Themes_Version</em:version>
+
+<!-- Target Application this extension can install into,
+         with minimum and maximum supported versions. -->
+
+<em:targetApplication>
+    <Description>
+      <!-- Firefox's UUID -->
+      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
+      <em:minVersion>Min_FF_Version</em:minVersion>
+      <em:maxVersion>Max_FF_Version</em:maxVersion>
+    </Description>
+  </em:targetApplication>
+
+  <!-- Front End MetaData -->
+  <!-- My_Theme -->
+  <em:name>My_Theme</em:name>
+  <em:description>My_Theme</em:description>
+  <em:creator>Your_Name</em:creator>
+  <em:contributor>Contributors_Names</em:contributor>
+  <em:homepageURL>Themes_HomePage</em:homepageURL>
+  <em:updateURL> Url_of_Update_Location </em:updateURL>
+  <em:aboutURL> Url_of_About_Page </em:aboutURL>
+
+  <!-- Front End Integration Hooks (used by Theme Manager)-->
+    <em:internalName>My_Theme</em:internalName>
+  </Description>
+
+</RDF>
+
+

{{ languages( { "en": "en/Creating_a_Skin_for_Firefox/install.rdf", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/install.rdf", "ja": "ja/Creating_a_Skin_for_Firefox/install.rdf", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/install.rdf", "pt": "pt/Criando_um_visual_para_o_Firefox/install.rdf", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/install.rdf" } ) }}

diff --git a/files/de/theme_erstellen/uuid/index.html b/files/de/theme_erstellen/uuid/index.html new file mode 100644 index 0000000000..7ce4b2eb92 --- /dev/null +++ b/files/de/theme_erstellen/uuid/index.html @@ -0,0 +1,12 @@ +--- +title: UUID +slug: Theme_erstellen/UUID +tags: + - Themes +translation_of: Archive/Themes/Creating_a_Skin_for_Firefox/UUID +--- +

UUID: Universal Unique Identifier

+

Eine UUID kann man unter http://www.famkruithof.net/uuid/uuidgen erhalten oder indem man »firebot: uuid?« auf irc.mozilla.org eingibt.

+

Siehe auch

+

GUIDs generieren

+

{{ languages( { "en": "en/Creating_a_Skin_for_Firefox/UUID", "es": "es/Creando_un_skin_para_Firefox/UUID", "fr": "fr/Cr\u00e9er_un_th\u00e8me_pour_Firefox/UUID", "ja": "ja/Creating_a_Skin_for_Firefox/UUID", "pl": "pl/Tworzenie_sk\u00f3rek_dla_Firefoksa/UUID", "pt": "pt/Criando_um_visual_para_o_Firefox/UUID", "zh-tw": "zh_tw/\u88fd\u4f5c_Firefox_\u4f48\u666f\u4e3b\u984c/UUID" } ) }}

diff --git a/files/de/themes/hintergrund/index.html b/files/de/themes/hintergrund/index.html new file mode 100644 index 0000000000..a9df6faa4b --- /dev/null +++ b/files/de/themes/hintergrund/index.html @@ -0,0 +1,98 @@ +--- +title: Hintergrund Themes +slug: Themes/Hintergrund +translation_of: Mozilla/Add-ons/Themes/Lightweight_themes +--- +

Gestalten Sie Ihr eigenes Hintergrundbild Thema

+ +
+

Themen werden mit einem Grafikprogamm gestaltet und als Bilddatei hochgeladen. Als Hintergrundbild ergänzen sie die standardmäßig einfarbige Kopfleiste der Firefox-Benutzeroberfläche.

+ +

Sie haben ein passendes Bild? Sie können es hier hochladen!

+ +

Ein Bild als Kopfleisten-Thema gestalten

+ +

Das Kopfleisten-Hintergrundbild wird oberhalb der Benutzeroberfläche angezeigt, eingebettet hinter Symbolleisten, Addressleiste, Suchleiste und den Tabs. Ankerpunkt ist die obere rechten Ecke der Browser-Kopfleiste.

+ +

+ + + +

Erforderliche Bilddaten

+ + + +

Tipps

+ + + +

Online Bildbearbeitung

+ + + +

Ein Fußleisten-Thema erstellen

+ +

Ältere Firefoxversionen beziehungsweise neuere Versionen mit bestimmten Add-ons, blenden ein Fußleisten-Themenbild hinter die Add-on und Suchleiste, am unteren Rand des Browser-Fensters ein. Das Fußleisten-Thema wird an der unteren linken Ecke des Browserfensters verankert. Fußleisten-Hintergrundbilder sind optional.

+ +

+ + + +

Erforderliche Bilddaten

+ + + +

Tipps

+ + + +

Hintergrundthemen einsenden

+ +

Um Ihre Themenbilder einzusenden, gehen Sie auf die Seite "Theme Submission":

+ +
    +
  1. Benennen Sie Ihr Themenbild — wählen Sie einen einen einmaligen Namen für Ihr Hintergrundthema. Die mehrfache Vergabe des selben Namens ist nicht gestattet, so dass Sie eventuell einige Versuche brauchen, um einen passenden Namen zu finden.
    2. +
  2. Wählen Sie eine Kategorie und Schlagworte — wählen Sie eine Kategorie und geben Sie einige Tags (Schlagworte) ein, die Ihr Hintergrundthema am besten beschreiben. Denken Sie daran, dass ein Prüfer (Reviewer) Ihr Thema ablehnen kann, wenn Kategorie oder Schlagworte offensichtlich nicht zum Thema passen.
    3. +
  3. Beschreiben Sie Ihr Hintergrundthema — geben Sie eine kurze Erläuterung Ihres Themas. Denken Sie daran, dass ein Prüfer (Reviewer) Ihr Hintergrundthema ablehnen kann, wenn die Beschreibung nicht genau Ihrem Thema entspricht.
    4. +
  4. Wählen Sie eine Lizenz für Ihr Themenbild — entscheiden Sie sich, unter welchen Bedingungen Sie Ihr Werk verbreiten möchten. Lesen Sie mehr über die verschiedenen Creative Commons Lizenzen. +
      +
    • Wichtig: Stellen Sie sicher, dass Sie allein die Bildrechte für Ihr Hintergrundthema besitzen!
      • +
    +
    5. +
  5. Laden Sie Ihre Bilder hoch  — stellen Sie sicher, dass Sie unter 300 KB groß sind und im JPG oder PNG Format!
    6. +
  6. Wählen Sie die Farben für Text und Tabs — Sie können die Hintergrundfarbe (für Tabs) und die Vordergrundfarbe (für Text) auswählen, die am besten zu Ihrem Bild passen.
    7. +
  7. Prüfen Sie Ihr Themenbild mit der Vorschau  — es ist jetzt soweit! Bewegen Sie einfach den Mauszeiger über die "Submit"-Schaltfläche, und Sie sehen das Ergebnis sofort.
    8. +
  8. Senden Sie Ihr Themenbild ein — wenn alles richtig aussieht, klicken Sie auf die "Submit"-Schaltfläche. Das war alles! Auf Ihrer Profilseite können Sie sämtliche Hintergrundthemen sehen, die Sie erstellt haben. +
      +
    • Tipp: um sicherzustellen, dass Ihr Thema für die Gallerie zugelassen wird, müssen die inhaltlichen Richtlinien (rewiew guidelines) und die Nutzungbedingungen (terms of service) erfüllt sein!
      • +
    +
    9. +
+ +

+ +

Submit Your Theme Now

+
diff --git a/files/de/themes/index.html b/files/de/themes/index.html new file mode 100644 index 0000000000..d94b7d2de4 --- /dev/null +++ b/files/de/themes/index.html @@ -0,0 +1,13 @@ +--- +title: Themes +slug: Themes +tags: + - Themes +translation_of: Mozilla/Add-ons/Themes +--- +
Theme erstellen
+Eine Einführung in die Erstellung von Themes für Firefox
+
Themes ermöglichen Veränderungen am Aussehen der verschiedenen Mozilla-Programmen. Das Aussehen und Verhalten beim Benutzen der Programme kann so auf eigene Bedürfnissen angepasst werden. Ein Theme kann einfach nur eine Farbe oder das ganze Aussehen im kleinsten Detail verändern.
+ +

Dokumentation

Ein Theme erstellen
Wie man ein einfaches Theme für Firefox 3.0 oder neuer erstellt.
Lightweight Themes
Erstellen von »leicht-gewichtigen« Themes (Personas) ab Firefox 3.6 oder Firefox 3 mit dem Personas Add-on.
Skins für Firefox erstellen
Eine Einleitung zum Erstellen von Themes für ältere Versionen von Firefox (vor 3.0)
Skins für SeaMonkey 2.x erstellen
Eine Einleitung zum Erstellen von neuen Themes für SeaMonkey 2.
Sprachen mit Schreibrichtungen von rechts nach links
Wie man sicherstellt, dass das Theme in Sprachen wie Hebräisch, Arabisch, Persisch und Urdu korrekt dargestellt wird.
Themes packen
Wie man Themes für Firefox und Thunderbird packt
Theme Änderungen zwischen Firefox 3.0 und 3.5
Eine Auflistung aller Theme Änderungen zwischen Version 3.0 und 3.5 von Firefox
Theme Änderungen zwischen Firefox 2.0 und 3.0
Eine Auflistung aller Theme Änderungen zwischen Version 2.0 und 3.0 von Firefox
Theme Änderungen zwischen Firefox 1.5 und 2.0
Eine Auflistung aller Theme Änderungen zwischen Version 1.5 und 2.0 von Firefox
Theme Änderungen zwischen Firefox 1.0 to 1.5 (Forumspost)
Ein Forumspost bei MozillaZine, der die grundlegenden Theme bezogenen Änderungen zwischen Firefox 1.0 und 1.5 beschreibt.
Erste Schritte bei der Theme Erstellung
Ein relativ alter Artikel, der die Theme Erstellung unter Firefox beschreibt.
Thunderbird Personas
Neu in Thunderbird 3

Alles anzeigen...

Community

  • Mozillas Theme Foren:

{{ DiscussionList("dev-themes", "mozilla.dev.themes") }}

Tool

Verwandte Themen

CSS
+

{{ languages( { "en": "en/Themes", "es": "es/Temas", "fr": "fr/Th\u00e8mes", "ja": "ja/Themes", "pl": "pl/Motywy", "zh-cn": "cn/\u4e3b\u9898", "zh-tw": "zh_tw/\u4f48\u666f\u4e3b\u984c" } ) }}

diff --git a/files/de/toolkit_api/index.html b/files/de/toolkit_api/index.html new file mode 100644 index 0000000000..76011f32bf --- /dev/null +++ b/files/de/toolkit_api/index.html @@ -0,0 +1,36 @@ +--- +title: Toolkit API +slug: Toolkit_API +tags: + - Toolkit API +translation_of: Mozilla/Tech/Toolkit_API +--- +

Das Mozilla Toolkit (deutsch »Mozilla Werkzeugsatz«) ist eine Zusammenstellung von Schnittstellen (APIs), die auf Gecko basieren und fortgeschrittene Services für XUL-Applikationen bereitstellen. Dazu zählen:

+ + + +

Offizielle Hinweise

+ +

+

+ + +

Weitere Informationen

+ +

Die folgenden Entwicklerseiten enthalten Beispiele und Diskussionen rund um spezielle Themen:

+ +

XUL; XUL Overlays; Erweiterungen entwickeln; XULRunner; Themes entwickeln; DOM; RDF; Speicherung; Hilfe-Dokumentation erstellen; FUEL / STEEL / SMILE;

diff --git a/files/de/tools/3d_untersuchung/index.html b/files/de/tools/3d_untersuchung/index.html new file mode 100644 index 0000000000..061ce4f11b --- /dev/null +++ b/files/de/tools/3d_untersuchung/index.html @@ -0,0 +1,99 @@ +--- +title: 3D-Untersuchung +slug: Tools/3D_untersuchung +translation_of: Tools/3D_View +--- +
{{ToolsSidebar}}
+
+

Seit Firefox 47 ist die 3D-Ansicht nicht mehr verfügbar.

+ +

Es gibt ein Add-on, das diese Funktionalität erhält: Tilt 3D. Beachten Sie allerdings, dass auch dieses nicht mit dem Multiprocess-Firefox kompatibel ist.

+
+ +

Mit einem Klick auf die 3D-Untersuchung Schaltfläche gelangst du in in den 3D-Untersuchungsmodus. In diesem Modus werden die HTML Elemente als dreidimensionale Blöcke dargestellt. Die Verschachtelung der Inhalte wird so auf eine eindrückliche Art und Weise virtualisiert, was einem das Studieren des Aufbaus der Seite erleichtert.

+ +

+ +

Durch Klicken uns Ziehen mit der Maus, kann man die Ansicht in alle Richtungen drehen und so die DOM Struktur von verschiedenen Winkeln aus betrachten. Auch Elemente ausserhalb des Bildschirmrands und solche, die versteckt sind, werden in dieser Ansicht sichtbar. Mit einem Klick auf ein Element, sieht man den entsprächenden Code im HTML panel bzw. dem Style panel. Umgekehrt kann man auch ein Element im Code auswählen, damit es im 3D-Untersuchungsmodus hervorgehoben wird.

+ +

Falls der 3D-Untersuchung Schaltfläche nicht angezeigt wird, ist es möglich, dass du deinen Grafik-Treiber aktualisieren musst. Siehe Liste blockierter Grafik-Treiber für weitere Informationen.

+ +

Steuerung der 3D-Ansicht

+ +

Die Ansicht im 3D-Untersuchungsmodus kann mit der Maus und der Tastatur gesteuert werden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionTastaturMaus
Vergrössern/Verkleinern+ / -Scroll wheel up/down
Nach links/rechts drehena / dMaus nach links/rechtsziehen
Nach oben/unten kippenw / sMaus nach oben/unten ziehen
Ansicht nach links/rechts verschieben← / →-
Ansicht nach oben/unten verschieben↑ / ↓-
Vergrösserung/Verkleinerung zurücksetzten0-
Ausgewähles Element fokusieren {{ fx_minversion_inline("13.0") }}f-
Ansicht (Grösse und Sichtswinkel) zurücksetzten {{ fx_minversion_inline("12.0") }}r-
Ausgewähltes Element ausblenden  {{ fx_minversion_inline("12.0") }}x-
+ +

Anwendungsbeispiele

+ +

Die 3D-Untersuchung ist in vielen Hinsichten hilfreich:

+ + + +

Siehe auch

+ + + +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/de/tools/about_colon_debugging/index.html b/files/de/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..a342b78ee8 --- /dev/null +++ b/files/de/tools/about_colon_debugging/index.html @@ -0,0 +1,252 @@ +--- +title: 'about:debugging' +slug: 'Tools/about:debugging' +translation_of: 'Tools/about:debugging' +--- +

{{ToolsSidebar}}

+ +

The about:debugging page provides a single place from which you can attach the Firefox Developer Tools to a number of debugging targets. At the moment it supports three main sorts of targets: restartless add-ons, tabs, and workers.

+ +

Opening the about:debugging page

+ +

There are two ways to open about:debugging:

+ + + +

When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:

+ +
+
Setup
+
Use the Setup tab to configure the connection to your remote device.
+
This Firefox
+
Provides information about temporary extensions you have loaded for debugging, extensions that are installed in Firefox, the tabs that you currently have open, and service workers running on Firefox.
+
+ +

+ +

If your about:debugging page is different from the one displayed here, go to about:config, find and set the option devtools.aboutdebugging.new-enabled to true.

+ +

Setup tab

+ +

Connecting to a remote device

+ +

Firefox supports debugging over USB with Android devices, using the about:debugging page.

+ +

Before you connect:

+ +
    +
  1. Enable Developer settings on your Android device.
    2. +
  2. Enable USB debugging in the Android Developer settings.
    3. +
  3. Enable Remote Debugging via USB in the Advanced Settings in Firefox on the Android device.
    4. +
  4. Connect the Android device to your computer using a USB cable.
    5. +
+ +

If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the Refresh devices button.

+ +

If it still doesn't appear, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed Android Debug Bridge from Android Tools on your computer in order for it to be able to connect to your device. Next, disable every debugging setting already activated and repeat the steps described before. Your device should show a popup to authorize your computer to connect to it — accept this and then click the Refresh devices button again. The device should appear.

+ +
+

Note: You do not need to install the full Android Studio SDK. Only adb is needed.

+
+ +

To start a debugging session, first open the page that you wish to debug and then click Connect next to the device name to open a connection to it. If the connection was successful, you can now click the name of the device to switch to a tab with information about the device.

+ +

Screenshot of the debugging page for an Android device

+ +

The information on this page is the same as the information on the This Firefox tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a Tabs section with an entry for each of the tabs open on the remote device.

+ +

Note: If the version of Firefox on your remote device is more than one major version older than the version running on your computer, you may see a message like the following:

+ +

The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser.

+ +

In Firefox 76 and above, the message can look like the following:

+ +

This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

+ +

See Connection for Firefox for Android 68 for more information.

+ +

In the image above, there are three tabs open: Network or cache Recipe, Nightly Home, and About Nightly. To debug the contents of one of these tabs, click the Inspect button next to its title. When you do, the Developer Tools open in a new tab.

+ +

Screenshot showing the remote debugging window, with the editable URL bar

+ +

Above the usual list of tools, you can see information about the device you are connected to, including the fact that you are connected (in this example) via USB, to Firefox Preview, on a Pixel 2, as well as the title of the page that you are debugging, and the address of the page.

+ +

Starting in Firefox 78, the URL bar is editable, so that you can change the URL used by the browser on the remote device, by typing in Firefox for Desktop. You can also reload the page by clicking the Reload button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the Back and Forward buttons.

+ +

Connecting over the Network

+ +

You can connect to a Firefox Debug server on your network, or on your debugging machine using the Network Location settings of the about:debugging page.

+ +

+ +

Enter the location and port on which the debugger server is running. When you do, it is added to the Network locations list along with the devices, as shown below:

+ +

+ +

This Firefox

+ +

The This Firefox tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:

+ +
+
Temporary Extensions
+
Displays a list of the extensions that you have loaded using the Load Temporary Add-on button.
+
Extensions
+
This section lists information about the extensions that you have installed on your system.
+
Service Workers, Shared Workers, and Other Workers
+
There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.
+
+ +

+ +

Whether internal extensions appear in the list on this page depends on the setting of the devtools.aboutdebugging.showHiddenAddons preference. If you need to see these extensions, navigate to about:config and make sure that the preference is set to true.

+ +

Extensions

+ +

Loading a temporary extension

+ +

With the Load Temporary Add-on button you can temporarily load a web extension from a directory on disk. Click the button, navigate to the directory containing the add-on and select its manifest file. The temporary extension is then displayed under the Temporary Extensions header.

+ +

You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.

+ +

The major advantages of this method, compared with installing an add-on from an XPI, are:

+ + + +

Once you have loaded a temporary extension, you can see information about it and perform operations on it.

+ +

Screenshot of the debugging information panel for a temporary extension

+ +

You can use the following buttons:

+ +
+
Inspect
+
Loads the extension in the debugger.
+
Reload
+
Reloads the temporary extension. This is handy when you have made changes to the extension.
+
Remove
+
Unloads the temporary extension.
+
+ +

Other information about the extension is displayed:

+ +
+
Location
+
The location of the extension's source code on your local system.
+
Extension ID
+
The temporary ID assigned to the extension.
+
Internal UUID
+
The internal UUID assigned to the extension.
+
Manifest URL
+
If you click the link, the manifest for this extension is loaded in a new tab.
+
+ +

Updating a temporary extension

+ +

If you install an extension in this way, what happens when you update the extension?

+ + + +

Installed Extensions

+ +

The permanently installed extensions are listed in the next section, Extensions. For each one, you see something like the following:

+ +

Screenshot of the debugging information panel for an installed extension

+ +

The Inspect button, and the Extension ID and Internal UUID fields are the same as for temporary extensions.

+ +

Just as it does with temporarily loaded extensions, the link next to Manifest URL opens the loaded manifest in a new tab.

+ +
+

Note: It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See Debugging WebExtensions for all the details.

+
+ +

The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled Inspect.

+ +
+

Note: This list may include add-ons that came preinstalled with Firefox.

+
+ +

If you click Inspect, the Add-on Debugger will start in a new tab.

+ +

{{EmbedYouTube("efCpDNuNg_c")}}

+ +

See the page on the Add-on Debugger for all the things you can do with this tool.

+ +

Workers

+ +

The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:

+ + + +

You can connect the developer tools to each worker, and send push notifications to service workers.

+ +

+ +

Service worker state

+ +

The list of service workers shows the state of the service worker in its lifecycle. Three states are possible:

+ + + +

Screenshot of the debugging panel for a service worker that is in the Running state

+ +

This section uses a simple ServiceWorker demo, hosted at https://serviceworke.rs/push-simple/.

+ +
+

Note: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools Application panel.

+
+ +

Unregistering service workers

+ +

Click the Unregister button to unregister the service worker.

+ +

Sending push events to service workers

+ +

To debug push notifications, you can set a breakpoint in the push event listener. However, you can also debug push notifications locally, without needing the server. Click the Push button to send a push event to the service worker.

+ +

Service workers not compatible

+ +
+

A warning message is displayed at the top of the This Firefox tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.

+ +

+
+ +

Service workers can be unavailable if the dom.serviceWorkers.enable preference is set to false in about:config.

+ +

Connection to Firefox for Android 68

+ +

Releases of Firefox for Android that are based on version 68 cannot be debugged from desktop Firefox versions 69 or later, because of the difference in release versions. Until such time as Firefox for Android is updated to a newer major release, in synch with desktop Firefox, you should use one of the following Firefox for Android versions:

+ + + +

If you prefer to test with the main release of Firefox for Android (i.e., based on release 68), you can do so with the desktop Firefox Extended Support Release (ESR), which is also based on version 68.

+ +

Note that about:debugging is not enabled by default in Firefox ESR.  To enable it, open the Configuration Editor (about:config) and set devtools.aboutdebugging.new-enabled to true.

+ +

If you used a higher version of Firefox prior to installing Firefox ESR, you will be prompted to create a new user profile, in order to protect your user data. For more information, see What happens to my profile if I downgrade to a previous version of Firefox?

diff --git a/files/de/tools/add-ons/index.html b/files/de/tools/add-ons/index.html new file mode 100644 index 0000000000..24ffbe79e9 --- /dev/null +++ b/files/de/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Add-ons +--- +
{{ToolsSidebar}}

Developer tools that are not built into Firefox, but ship as separate add-ons.

+ +
+
WebSocket Monitor
+
Examine the data exchanged in a WebSocket connection.
+
 
+
diff --git a/files/de/tools/barrierefreiheits_inspektor/index.html b/files/de/tools/barrierefreiheits_inspektor/index.html new file mode 100644 index 0000000000..24195cabad --- /dev/null +++ b/files/de/tools/barrierefreiheits_inspektor/index.html @@ -0,0 +1,136 @@ +--- +title: Barrierefreiheitsinspektor +slug: Tools/Barrierefreiheits_inspektor +translation_of: Tools/Accessibility_inspector +--- +

{{ToolsSidebar}}

+ +

Der Barrierefreiheitsinspektor bietet Zugriff auf wichtige Informationen, die auf der aktuellen Seite über die barrierefreie Strukturansicht den Hilfstechnologien zur Verfügung gestellt werden. So können Sie überprüfen, was fehlt oder ob Sie anderweitig darauf achten müssen. Dieser Artikel führt Sie durch die Hauptfunktionen des Barrierefreiheitsinspektor und dessen Verwendung.

+ +

Ein (sehr) kurzer Leitfaden zur Barrierefreiheit

+ +

Barrierefreiheit ist die Praxis, Ihre Websites für möglichst viele Menschen nutzbar zu machen. Dies bedeutet, dass Sie alles versuchen sollten, um Personen nicht daran zu hindern, auf Informationen zuzugreifen, weil sie eine Behinderung haben oder andere persönliche Umstände sie einschränken wie das von ihnen verwendete Gerät, die Geschwindigkeit ihrer Netzwerkverbindung oder ihre geografische Position oder ihr Gebietsschema.

+ +

Hier geht es vor allem darum, Informationen für Menschen mit Sehbehinderungen zu anzuzeigen - dies geschieht über die in Webbrowsern verfügbaren Zugänglichkeits-APIs, die Informationen darüber liefern, welche Rollen die verschiedenen Elemente auf Ihrer Seite spielen (z.B. bestehen sie nur aus Text oder sind es Buttons, Links, Formularelemente, etc.?).

+ +

Semantischen DOM-Elementen sind standardmäßig Rollen zugewiesen, die auf ihren Zweck hindeuten. Manchmal müssen Sie jedoch ein nicht-semantisches Markup (z. B. {{htmlelement ("div")}} s) verwenden, um ein komplexes benutzerdefiniertes Steuerelement zu erstellen, und das Steuerelement hat keine Standardrolle, die seinen Zweck widerspiegelt. In solch einer Situation können Sie WAI-ARIA-Rollenattribute verwenden, um Ihre eigenen Rollen bereitzustellen.

+ +

Rollen und andere Informationen, die von Browser-APIs zur Verfügung gestellt werden, werden in einer hierarchischen Struktur namens Zugänglichkeitsbaum dargestellt. Ähnlich wie der DOM-Baum, außer dass er eine begrenzte Anzahl von Elementen und etwas andere Informationen über sie enthält.

+ +

Hilfstechnologien wie Screenreader nutzen diese Informationen, um herauszufinden, was auf einer Webseite vorhanden ist, lesen ihren Benutzern vor, was dort ist, und ermöglichen ihnen, mit der Seite zu interagieren. Der Zugänglichkeitsinspektor verwendet diese Informationen auch, um wertvolle Debugging-Funktionen für die Barrierefreiheit in den DevTools bereitzustellen.

+ +

Auf den Barrierefreiheitsinspektor zugreifen

+ +

Der Barrierefreiheitsinspektor (verfügbar seit Firefox 61) wird in den DevTools standardmäßig nicht angezeigt. Um ihn einzuschalten, müssen Sie zu den DevTools-Einstellungen gehen (drücken Sie F1 , oder gehen Sie zum "Drei Punkte" -Menü und wählen Sie Einstellungen) und aktivieren Sie das Kontrollkästchen Barrierefreiheit unter der Überschrift Standard-Entwicklungswerkzeuge. Die Registerkarte Barrierefreiheit im DevTools-Fenster wird angezeigt, auf die man klicken kann, um den Barrierefreiheitsinspektor anzuzeigen:

+ +

Barrierefreiheitsregister in Firefox DevTools, deaktiviert, mit einem Button, der die Beschriftung trägt "Barrierefreiheitsfunktionen aktivieren"ures

+ +

Anfangs sind die DevTools-Barrierefreiheitsfunktionen deaktiviert. (Es sei denn, Sie haben sie bereits in einer anderen Browser-Registerkarte aktiviert oder die Firefox-Barrierefreiheit-Engine wurde bereits gestartet, z. B. könnten Sie ein Screenreader-Benutzer oder -Tester sein). Dies liegt daran, dass die Eingabehilfen-Engine im Hintergrund ausgeführt wird, wenn die Barrierefreiheitsfunktionen aktiviert sind. Während sie ausgeführt wird, verlangsamt sie Leistung und Arbeitsspeicher; Daher stört es die Messwerte anderer Panels wie Speicher und Leistung sowie die allgemeine Browserleistung. Aus diesem Grund sollten Sie die Barrierefreiheitsfunktionen ausschalten, wenn Sie sie nicht verwenden.

+ +

Sie können die Funktionen mithilfe der Schaltfläche Barrierefreiheitsfunktionen aktivieren einschalten.

+ +

Sobald der Inhalt des Bedienfelds geladen ist, können Sie ihn mithilfe der Schaltfläche Barrierefreiheitsfunktionen deaktivieren in der oberen linken Ecke wieder deaktivieren, es sei denn, die Barrierefreiheitsengine wurde zuvor zum Ausführen eines Bildschirmlesers ausgeführt. In diesem Fall wird diese Schaltfläche deaktiviert.

+ +
+

Hinweis: Wenn Sie die Eingabehilfen auf mehreren Registerkarten verwenden, werden sie auf allen Registerkarten deaktiviert.

+
+ +

Features of the Accessibility panel

+ +

The enabled accessibility panel looks like so:

+ +

Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features

+ +

On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:

+ + + +

On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:

+ + + +
+

Note: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.

+
+ +

Keyboard controls

+ +

The Accessibility tab is fully keyboard-accessible:

+ + + + + +

When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:

+ +

Context menu options

+ +

An extra context menu option is added, both for the general context menu on the web page when right/Ctrl + clicking a UI feature, and the HTML pane of the page inspector when right/Ctrl + clicking a DOM element:

+ +

context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties

+ +

context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties

+ +

When you choose the Inspect Accessibility Properties/Show Accessibility Properties context menu options, the Accessibility tab is immediately opened to show the corresponding accessibility tree item and its properties.

+ +
+

Note: Some DOM elements do not have accessibility properties — in such a case, the Inspect Accessibility Properties/Show Accessibility Properties context menu item is grayed out.

+
+ +

Highlighting of UI items

+ +

In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.

+ +

Accessibility picker

+ +

In a similar way to the Page Inspector HTML pane picker, when the Accessibility tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.

+ +

The accessibility tab picker differs in look slightly from the Page Inspector HTML pane picker, as shown below:

+ +

highlighted dom inspector picker button, with a tooltip saying Pick an element from the page

+ +

highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page

+ +

When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the Shift key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the Shift key.

+ +

When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the Esc key.

+ +

Typical use cases

+ +

The accessibility inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without alt text and form elements without proper labels have a name property of null, for example.

+ +

A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null

+ +

It is also very handy for verifying semantics — you can use the Inspect Accessibility Properties context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or whether a link is really a link).

+ +

A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null

+ +

See also

+ + diff --git a/files/de/tools/bildschirmgroessen-testen/index.html b/files/de/tools/bildschirmgroessen-testen/index.html new file mode 100644 index 0000000000..08921cb77d --- /dev/null +++ b/files/de/tools/bildschirmgroessen-testen/index.html @@ -0,0 +1,81 @@ +--- +title: Bildschirmgrößen testen +slug: Tools/bildschirmgroessen-testen +translation_of: Tools/Responsive_Design_Mode +--- +
{{ToolsSidebar}}

Responsive Designs passen sich an verschiedene Bildschirmgrößen an um auf verschiedenen Arten von Geräten, wie zum Beispiel Mobilgeräte oder Tablets, angemessen dargestellt zu werden. Die Ansicht "Bildschirmgrößen testen" macht es einfach zu sehen, wie Ihre Webseite oder Web-App auf verschiedenen Bildschirmgrößen aussehen wird.

+ +

Im folgenden Bildschirmfoto wird eine Seite der mobilen Version von Wikipedia auf einer 320 mal 480 Pixel großen Fläche dargestellt.

+ +

Die Ansicht "Bildschirmgrößen testen" ist leicht zu bedienen, da sie schnell und präzise die Größe der Darstellungsfläche ändern können.

+ +

Natürlich könnten Sie einfach die größe Ihres Browser-Fensters ändern: aber wenn Sie dies tun, werden dann auch alle anderen Registerkarten im Registerkartenreiter verkleinert, was die Bedienung der Benutzeroberfläche des Browsers viel schwerer macht.

+ +

Während die Ansicht "Bildschirmgrößen testen" aktiviert ist, können sie weiterhin wie gewohnt im skalierten Inhaltsbereich navigieren.

+ +

Aktivieren und deaktivieren

+ +

Es gibt zwei Möglichkeiten um Bildschirmgrößen zu testen:

+ + + +

Es gibt drei Möglichkeiten, um die Ansicht wieder zu deaktivieren:

+ + + +

Skalieren

+ +

Sie können die Inhaltsfläche auf eine von zwei Arten ändern:

+ + + +

Wenn Sie mit der zweiten Methode die Ansicht skalieren, können Sie die Funktionstaste (Steuertaste auf Mac OS X) gedrückt halten um die Größe beim Skalieren zu verfeinern. Dies macht das Auswählen der Größe viel präziser.

+ +
+

Bedienelemente der Ansicht

+ +

Auf der Oberseite des Fensters, in dem die Bildschirmgrößen getestet werden, gibt es fünf Bedienelemente:

+ + + + + + + + + + + + + + + + + + + + + + + + +
SchließenSchließen Sie die Ansicht "Bildschirmgrößen testen" und kehren Sie zur normalen Ansicht zurück
Größe auswählenWählen Sie aus mehreren vorgegebenen Breiten x Höhen-Kombinationen oder geben Sie Ihre eigenen ein.
DrehenDrehen Sie die die Ansicht und wechseln Sie so zwischen horizontaler und vertikaler Ansicht.
+

Berührungsereignisse simulieren

+ 		+

"Berührungsereignisse simulieren" aktivieren/deaktivieren: falls aktiviert, werden Mausereignisse in Berührungsereignisse umgewandelt.

+
+

Bildschirmfoto erstellen

+ 		Bildschirmfoto der Inhaltsansicht erstellen. Bildschirmfotos werden im standardmäßigen Download-Ordner abgespeichert.
+
+ +

 

diff --git a/files/de/tools/browser_console/index.html b/files/de/tools/browser_console/index.html new file mode 100644 index 0000000000..39d8c889ec --- /dev/null +++ b/files/de/tools/browser_console/index.html @@ -0,0 +1,157 @@ +--- +title: Browser Console +slug: Tools/Browser_Console +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}

The Browser Console is like the Web Console, but applied to the whole browser rather than a single content tab.

+ +

So it logs the same sorts of information as the Web Console - network requests, JavaScript, CSS, and security errors and warnings, and messages explicitly logged by JavaScript code. However, rather than logging this information for a single content tab, it logs information for all content tabs, for add-ons, and for the browser's own code.

+ +

Similarly, you can execute JavaScript expressions using the Browser Console. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the gBrowser global, and even with the XUL used to specify the browser's user interface.

+ +

To open the Browser Console, select "Browser Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X).

+ +

From Firefox 27 onwards, you can also start the Browser Console by launching Firefox from the command line and passing the -jsconsole argument:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

The Browser Console looks like this:

+ +

+ +

You can see that the Browser Console looks and behaves very much like the Web Console:

+ + + +

Browser Console logging

+ +

The Browser console logs the same sorts of messages as the Web Console:

+ + + +

However, it displays such messages from:

+ + + +

Messages from add-ons

+ +

The Browser Console displays messages logged by all Firefox add-ons.

+ +

Console.jsm

+ +

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

+ +

One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.

+ +
const Cu = Components.utils;
+const consoleJSM =
+Cu.import("resource://gre/modules/devtools/Console.jsm", {});
+let console = consoleJSM.console; //access exported symbol of "console" from the Console.jsm
+
+console.log("Hello from Firefox code"); //output messages to the console
+ +

 

+ +

The full module with other functionality is found here on Mozilla Cross-Reference.

+ +

For more methods of the console exported attribute of the Console.jsm see this article: Console

+ +

HUDService

+ +

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla Cross-Reference. We see we can not only access the Browser Console but also Web Console.

+ +

Here is an example on how to clear the contents of the Browser console:

+ +
var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

+ +
var devtools = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools;
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Bonus Features Available

+ +

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

+ +

Click the icon. You'll see output like this in the Browser Console:

+ +

+ +

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

+ +

Browser Console command line

+ +

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

+ +

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

+ +

+ +

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

+ +

Controlling the browser

+ +

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

+ +

Modifying the browser UI

+ +

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

On OS X, this similar code will add a new item to the "Tools" menu:

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git a/files/de/tools/browser_werkzeuge/index.html b/files/de/tools/browser_werkzeuge/index.html new file mode 100644 index 0000000000..63c820a218 --- /dev/null +++ b/files/de/tools/browser_werkzeuge/index.html @@ -0,0 +1,42 @@ +--- +title: Browser_Werkzeuge +slug: Tools/Browser_Werkzeuge +tags: + - Developer + - Fehlerbehebung + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +
{{ToolsSidebar}}

Die Browser-Werkzeuge sind wie die normale Webkonsole, aber funktionieren mit dem ganzen Browser und nicht nur mit einem einzelnen Tab. Es erlaubt Ihnen die normalen Entwicklertools für den Browser an sich zu benutzen, statt nur für eine Seite. Dies erlaubt Ihnen dann auch das debuggen von Addons und vom browsereigenen JavaScript Code und nicht nur von Internetseiten.

+ +

Öffnen der Browser-Werkzeuge

+ +

Die Browser-Werkzeuge sind nicht standardmäßig aktiviert. Um dies zu tun, müssen Sie diese Schritte befolgen:

+ + + +

Jetzt sollten sie einen neuen Menüpunkt mit dem Namen "Browser-Werkzeuge" sehen.

+ +

Nach dem Klick auf Browser Toolbox wird Ihnen eine Meldung wie folgt angezeigt:

+ +

Bestätigen Sie diese mit OK und die Browser Toolbox wird in einem seperatem Fenster geöffnet:

+ +

Sie sehen alle JavaScript Dateien, die vom Browser und den laufenen Add-Ons, geladen wurden und können diese debuggen. Außerdem haben Sie Zugriff auf folgende Entwickler Werkzeuge (developer tools):

+ + + +

 

+ +

 

diff --git a/files/de/tools/debugger/how_to/index.html b/files/de/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..084f1717e5 --- /dev/null +++ b/files/de/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +
{{ToolsSidebar}}

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/de/tools/debugger/how_to/open_the_debugger/index.html b/files/de/tools/debugger/how_to/open_the_debugger/index.html new file mode 100644 index 0000000000..1fe2d0fb8b --- /dev/null +++ b/files/de/tools/debugger/how_to/open_the_debugger/index.html @@ -0,0 +1,22 @@ +--- +title: Öffne den Debugger +slug: Tools/Debugger/How_to/Open_the_debugger +translation_of: Tools/Debugger/How_to/Open_the_debugger +--- +
{{ToolsSidebar}}
+ +

Es gibt drei Möglichkeiten den Debugger zu öffnen:

+ + + +

{{EmbedYouTube("yI5SlVQiZtI")}}

+ +

 

diff --git a/files/de/tools/debugger/how_to/use_a_source_map/index.html b/files/de/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..db733cd8f2 --- /dev/null +++ b/files/de/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,32 @@ +--- +title: Use a source map +slug: Tools/Debugger/How_to/Use_a_source_map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:

+ + + +

In these situations, it's much easier to debug the original source, rather than the source in the transformed state that the browser has downloaded. A source map is a file that maps from the transformed source to the original source, enabling the browser to reconstruct the original source and present the reconstructed original in the debugger.

+ +

To enable the debugger to work with a source map, you must:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

In the video above we load https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. This page loads a source called "main.js" that was originally written in CoffeeScript and compiled to JavaScript. The compiled source contains a comment like this, that points to a source map:

+ +
//# sourceMappingURL=main.js.map
+ +

In the Debugger's source list pane, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.

diff --git a/files/de/tools/debugger/index.html b/files/de/tools/debugger/index.html new file mode 100644 index 0000000000..e105ba65b5 --- /dev/null +++ b/files/de/tools/debugger/index.html @@ -0,0 +1,369 @@ +--- +title: Debugger +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +
{{ToolsSidebar}}
+ +

Der JavaScript Debugger ermöglicht es dir, schrittweise durch den JavaScript Code zu gehen und dabei seinen Zustand zu sehen und zu verändern, um Fehler im Code einfacher zu finden.

+ +

Man kann ihn benutzen, um Code lokal in Firefox zu debuggen, oder remote - zum Beispiel auf einem Firefox-OS-Gerät oder einem Firefox auf Android. In dieser Anleitung wird davon ausgegangen, dass du lokalen Code bearbeitest, aber das meiste trifft auch für das Remote-Debugging zu. Zu den Unterschieden siehe die Anleitung zum Remote-Debugging.

+ +

Um den Debugger zu öffnen, wählt man einfach "Debugger" aus dem Webentwickler-Untermenü von Firefox (oder im Werkzeuge-Menü, wenn die Menüleiste benutzt wird oder du auf Mac OS X arbeitest), oder indem man die Tastenkombination (das "Shortcut") Control-Shift-S (Command-Option-S auf Mac) auf der Tastatur drückt.

+ +

Die Toolbox erscheint am unteren Rand des Browserfensters. Als Standardeinstellung ist der Debugger aktiviert. So sieht sie aus, wenn sie zum ersten mal geöffnet wird:

+ +

+ +

Und das ist die Ansicht während des Debugging-Prozesses:

+ +

In dieser Anleitung werden wir uns zunächst kurz die Benutzeroberfläche des Debuggers ansehen und dann beschreiben, wie man einige häufig vorkommende Debuggingaufgaben durchführt.

+ +

Die Benutzeroberfläche des Debuggers

+ +

Die Benutzeroberfläche ("User Interface", UI) ist in vier Bereiche aufgeteilt, die wir uns nacheinander ansehen werden:

+ + + +

+ +

Die Quellcode-Dateiliste

+ +

Auf der linken Seite siehst du eine Liste mit allen JS-Quelldateien, die von der aktuellen Seite geladen wurden. Man kann jede davon auswählen, um sie zu debuggen.

+ +

Die Quelldateien sind unter Überschriften eingeordnet, die angeben, von wo sie geladen wurden. Hier ein Beispiel für eine Quellcode-Dateiliste, wenn eine Seite von developer.mozilla.org geladen ist:

+ +

+ +

Die Dateinamen und Domains stimmen überein mit den folgenden script-Tags im Quellcode der Seite:

+ +
<script src="/en-US/jsi18n/build:8987063"></script>
+<script src="https://login.persona.org/include.js" type="text/javascript"></script>
+<script src="//mozorg.cdn.mozilla.net/en-US/libs/jquery-1.7.1.min.js" type="text/javascript"></script>
+<script src="//mozorg.cdn.mozilla.net/en-US/tabzilla/tabzilla.js" async></script>
+ +

In der Quellcode-Dateiliste kann man einfach eine der Dateien anklicken, um sie im Quellcodebereich anzeigen und untersuchen zu können.

+ +

Haltepunkte ("Breakpoints"), die man durch Klick neben eine Codezeile gesetzt hat, erscheinen unter dem Dateinamen.Mit der Checkbox kann man Breakpoints an- und ausschalten. Durch Rechts-Klick auf einen Brakepoint-Eintrag in der Liste kann man ein Kontextmenü anzeigen lassen, mit dem man

+ + + +

Durch Klick auf den "Augapfel" kann man das Verdecken ("black boxing") für eine bestimmte Quelle an- und abschalten (z.B. Sprünge in JavaScript-Bibliotheken verhindern). Mehr Informationen dazu findest du unter "Black box a source".

+ +

Quellcodebereich

+ +

Hier wird die aktuell geladene JavaScript-Datei angezeigt. Haltepunkte ("Breakpoints", im Bild "Breakpoint Set") sind die blauen Kreise neben den Zeilennummern, während Haltepunkte, an der die Code-Ausführung aktuell gestoppt wurde, einen grünen Pfeil innerhalb des Kreises haben ("Breakpoint Hit"):

+ +

Im Quellcodebereich kann man über das Kontextmenü folgende Aufgaben erledigen:

+ + + +

Werkzeugleiste

+ +

Die Werkzeugleiste ("toolbar") besteht aus vier Teilen:

+ + + +

+ +

Die vier Buttons auf der linken Seite haben folgende Funktionen:

+ + + +

Die visuelle Darstellung des "Call stack" (Liste der Code-Unterbrechungen, an denen  eine Ebene tiefer in eine neue Funktion gesprungen wurde) zeigt die Liste aller Code-Stellen an denen Funktionsaufrufe zum aktuellen Breakpoint geführt haben. Über diese Liste kann man herausfinden, wie das Programm "an die aktuelle Stelle gekommen ist".

+ +

Durch Klick auf die Einträge wird im Quellcodebereich die Absprungstelle angezeigt und man kann nachvollziehen, von wo gesprungen wurde. Gleichzeitig werden in der Variablenliste die Variablenwerte zum Zeitpunkt des jeweiligen Funktionsaufrufs anzeigt. Oft lässt sich dadurch herausfinden, ob und warum Parameter falsch übergeben wurden und wo der eigentliche Fehler aufgetreten ist. Auch wenn Funktionen von verschiedenen Stellen im Code aufgerufen werden, lässt sich über den Stack herausfinden, um welchen Fall es sich handelt.

+ +

Skriptsuche

+ +

Mit der Skriptsuche ("script filter") kann man alle drei Debugger-Bereiche durchsuchen. Man kann dem Suchbegriff eines der folgenden Sonderzeichen voranstellen, um verschiedene Sonderfunktionen zu nutzen.

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PrefixFunction
NichtsSkripte durchsuchen, die in der Quellcodeliste angezeigt werden.
!In sämtlichen Dateien nach dem Suchbegriff suchen.
@Nur nach Funktions-Definitionen in allen Dateien suchen, die den Begriff enthalten.
#Nur in der Datei, die aktuell im Quellcodebereich angezeigt wird, nach dem Begriff suchen.
:Zu einer Zeilennummer springen (in der aktuell im Quellcodebereich angezeigten Datei).
*Variablen durchsuchen, die in der Variablenliste angezeigt werden.
+ +

Diese Optionen werden in einem Popup angezeigt, wenn du in das Suchfeld klickst, und sie sind außerdem über das Kontextmenü im Quellcodebereich erreichbar. Die Sonderzeichen können auch kombiniert werden, um präzisere Suchen machen: "file.js:12" öffnet zum Beispiel file.js und springt in Zeile 12. "mod#onLoad" sucht in allen Dateien, die "mod" im Namen enthalten nach dem Begriff "onLoad". Mit der Return-/Enter-Taste kann von einem zum nächsten Ergebnis gesprungen werden.

+ +

Debugger-Einstellungen

+ +

Am rechten Ende der Werkzeugleiste befinden sich zwei weitere Buttons. Der erste schaltet zwischen Ein- und Ausblenden der Variablenliste hin und her. Mit dem zweiten kann man zwischen verschiedenen Debugger-Einstellungen umschalten:

+ +

With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Auto Prettify Minified Sources

+ 		Ist diese Option eingeschaltet, findet der Debugger automatisch minimierte JavaScript-Dateien und stellt sie in lesbarer Form dar.
+

Pause bei Exceptions

+ 		Skriptausführung automatisch unterbrechen, wenn eine JavaScript-Exception geworfen wird.
Ignore caught exceptions +

Wenn diese Einstellung gesetzt ist (Voreinstellung) und "Pause bei Exceptions" aktiviert ist, wird nur noch bei Fehlern unterbrochen, die nicht mit try-catch abgefangen werden. Diese Einstellung ist Standard, weil man davon ausgehen kann, dass abgefangene Exceptions im Programm ordnungsgemäß behandelt werden.

+ +
+

Neue Option in Firefox 26.

+
+
Show panes on startupWenn diese Option aktiviert ist, wird die Variablenliste des Debuggers angezeigt, sobald der Debugger zum ersten mal aktiviert wird.
Show only enumerable propertiesEnabling this option adds a "Filter variables" search box to the variables panel, so that you can filter the displayed list of variables.
Show variables filter boxDo not display non-enumerable JavaScript properties
Show original sourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.
+ +
+
+ +

Variablenliste

+ +

In der Variablenliste kann man sehen, welche Werte die Variablen an einer bestimmten Stelle im Programm gerade haben - und man kann sie sogar für Versuche manuell verändern und das Skript dann weiterlaufen lassen:

+ +

+ +

Variablenwerte beobachten

+ +

Die Variablen sind nach Geltungsbereich ("scope") gruppiert: im Funktions-Scope sieht man die (standardmäßig vorhandenen) Werte von arguments und this und lokale Variablen, die in der Funktion definiert wurden (im Beispiel: user und greeting).

+ +

Ähnlich verhält es sich mit globalen Variablen, die auf der obersten Ebene des JavaScript-Files (also nicht in Funktionen) definiert wurden - im Bild etwa greetme, aber auch standardmäßig vorhandene Variablen wie localStorage und console.

+ +

Objekte können mit dem kleinen Pfeil links von ihnen auf- und zugeklappt werden. Dadurch werden ihre Eigenschaften (und Funktionen) und deren Werte sichtbar.

+ +

Wenn man mit dem Cursor über die Variablen fährt, wird ein Tooltip mit weiteren Informationen angezeigt - bei Rollover über das greeting-Objekt wird zum Beispiel "configurable enumerable writable" angezeigt. Weitere Details zur Bedeutung dieser Eigenschaften unter Object.defineProperty().

+ +

Die angezeigten Variablen lassen sich filtern - entweder durch Nutzung des "*"-Modifiers in the Skriptsuche, oder durch Text-Eingabe des Filters (#,!,...) vor dem Suchbegriff im Suchfeld, wenn diese Option in den Debugger-Einstellungen aktiviert wurde.

+ +

Variablenwerte verändern

+ +

Variablenwerte können einfach manuell verändert werden, indem man auf die Werte klickt und einen anderen Wert eingibt. Wenn man etwa auf "Hi, Dr. Nick!" klickt, den Variablenwert von greeting, kann man die Begrüßung ändern und das Programm mit diesem Wert weiter arbeiten lassen.

+ +

Überwachungsausdrücke

+ +

Überwachungsausdrücke sind Ausdrücke, die jedesmal ausgewertet werden, wenn die Code-Ausführung gestoppt wird. Mit Hilfe von Überwachungsausdrücken kann man sich einen Überblick über Werte verschaffen, die nicht direkt in der Variablenliste angezeigt werden - wie etwa bestimmte Eigenschaften eines Objekts, die für das Verständnis des Codeablaufs gerade erforderlich sind (siehe Beispiel user.value im Bild). Oder Variablen im Code, die nicht mit var deklariert wurden und daher vom Debugger nicht in der Liste angezeigt werden - oder Werte, die nur mit einer getter-Methode ausgelesen werden können (wie etwa user.getValue("something")) oder jQuery-Ausdrücke wie $("div.myclass>table").

+ +

Einfach auf "Überwachungsausdruck hinzufügen" über der Variablenliste klicken ("Add watch expression") und einen Ausdruck genauso eingeben, wie man es im Code an der aktuellen Stelle machen würde, um einen Wert zu erhalten. Dieser Wert wird dann, während man durch den Code geht, bei jedem Programm-Stop berechnet und wie die Werte der Variablen in der Liste angezeigt.Auf diese Weise kann man beim Durchlaufen des Programmes dabei zusehen, wie bestimmte Werte sich ändern. In dem Moment, wo eine Veränderung stattfindet, wird der Überwachungsausdruck kurz gelb hinterlegt, so dass man die Änderungen auch aus dem Augenwinkel mitbekommt, während man den Programmcode liest.

+ +

Selbstverständlich kann man auch mehrere Ausdrücke gleichzeitig in der Liste überwachen. Um einen Ausdruck wieder zu entfernen, klickt man einfach auf das kleine "x", das rechts neben dem Überwachungsausdruck erscheint, wenn man mit dem Cursor darüber fährt.

+ +

Wie kann ich...?

+ +

den Debugger öffnen

+ +

Einfach im Webentwickler-Submenü "Debugger" auswählen (oder in der Firefox-Menüleiste unter "Werkzeuge > Webentwickler > Debugger" klicken, falls du Mac OS X nutzt oder die Menüleiste eingeblendet hast). Alternativ auch mit Control-Shift-S (bzw. Command-Option-S auf Mac).

+ +

eine Quelldatei finden

+ +

Quelldateien ("source files") sind leicht zu finden: Wenn der Debugger geöffnet ist, werden alle JavaScript Quelldateien ("source files") links in der Quellcodeliste aufgelistet. Wenn die Liste zu lang ist, ist es of einfacher, die Skriptsuche oben rechts zu benutzen.

+ +

Codestellen in einer Datei finden

+ +

Um eine Funktion zu finden, nach einem Stichwort zu suchen oder in eine bestimmte Zeile im Code zu sprichen, der im Quellcodebereich geöffnet ist, kann man die Spezialfilter der Skriptsuche verwenden.

+ +

Breakpoint setzen

+ +

Um einen Haltepunkt ("breakpoint") in einer Datei zu setzen, die im Quellcodebereich geöffnet ist:

+ + + +

Jeder Breakpoint wird an drei Stellen im Debugger angezeigt:

+ + + +

In dem Screenshot unten siehst du Breakpoints in den Zeilen 7 und 65 der JavaScript-Datei:

+ +

+ +

Einen bedingten Breakpoint setzen

+ +

Um einen bedingten Haltepunkt  ("conditional breakpoint") zu setzen, an dem nur in bestimmten Fällen unterbrochen werden soll, öffnet man in der betreffenden Zeile das Kontextmenü und wählt "Bedingten Haltepunkt hinzufügen" ("Add conditional breakpoint"). In dem Textfeld, das sich daraufhin öffnet, kann einfach ein Boolscher Ausdruck eingesetzt werden. Die Syntax ist genau die gleiche wie in der Klammer einer if-Anweisung:

+ +

Um die Haltebedingung ("condition") zu verändern oder einem "normalen" Breakpoint nachträglich eine Bedingung hinzuzufügen, kann einfach das Kontextmenü auf dem Breakpoint geöffnet werden und "Haltebedingung  hinzufügen" ("Configure conditional breakpoint") gewählt werden:

+ +

+ +

Breakpoint deaktivieren

+ +

Um einen Brakepoint außer Kraft zu setzen ("disable a breakpoint") ohne ihn zu löschen:

+ + + +

Dem Programmablauf folgen

+ +

Wenn die Ausführung des Codes an einem Breakpoint gestoppt wird, kannst du Schritt für Schritt die Abarbeitung Programmzeilen und einzelner Befehle folgen. Dazu verwendet man die vier Buttons (Pause/Weiter, Hineinspringen, Verlassen, Ausführen) oben links in der Werkzeugleiste ("toolbar"):

+ +

Die vier Buttons auf der linken Seite haben folgende Funktionen:

+ + + +

Source Maps

+ +

JavaScript-Quellcode wird oft aus mehreren Dateien zusammengefasst und das Ergebnis wird "minified" (komprimiert), um Serverbelastung und Ladezeiten zu optimieren. Immer häufiger ist das geladene JavaScript auch Maschinen-generiert, zum Beispiel aus Sprachen wie CoffeeScript.

+ +

Durch die Nutzung von source maps, kann der Debugger den gerade ausgeführten Code auf JS-Dateien "mappen", die für Menschen bequemer lesbar sind - also die entsprechenden Stellen in den Menschen-lesbaren Dateien anzeigen, was das Debuggen sehr erleichtert.

+ +

Dazu muss man dem Debugger mitteilen, dass es solche Source maps zum verwendeten Code gibt, indem man in den Debugger-Einstellungen (Zahnrad-Icon oben rechts) auf "Originalquellen anzeigen" klickt ("Show original sources"):Damit das funktioniert, muss man in der Quelldatei eine Mapping-URL in einem Kommentar angegeben haben, der dem Debugger sagt, wo sich die alternativen Dateien befinden. Ein solcher Kommentar in der JavaScript-Datei sollte folgendermaßen aussehen:

+ +

//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map

+ +

Variablenwerte prüfen

+ +

Wenn der Debugger an einem Haltepunkt ("breakpoint") die Programm-Ausführung unterbricht, kann man sich die aktuellen Werte der Variablen an dieser Stelle im Code ansehen. Sie werden rechts in der Variablenliste angezeigt:

+ +

Rechts befindet sich die Variablenliste. Die Variablen werden in Blöcken nach Geltungsbereichen ("scopes") gefiltert angezeigt. Obje können ausgeklappt werden, wenn man einzelne Eigenschaften sehen möchte (siehe Variablenwerte oben). Auch über ein "*" am Beginn des Skriptsuche-Eingabefelds ("filter expression") kann die Anzeige der Variablen gefiltert werden:

+ +

+ +

Variablen andere Werte zuweisen

+ +

Wenn die Ausführung des Codes an einem Breakpoint ("Haltepunkt") unterbrochen wurde, können die Werte in der Variablenanzeige des Debuggers verändert werden. Einfach auf den aktuellen Variablenwert klicken - der Wert wird zu einem Eingabefeld und kann sofort geändert werden:

+ +

Einen Ausdruck beobachten

+ +

Sie können den Wert eines Javascript-Ausdrucks mit der Funktion "Ausdruck beobachten" in der Variablenleiste beobachten.

+ +

Mobile Geräte debuggen

+ +

Das debuggen von mobilen Geräten wird in remote debugging behandelt.

+ +

Verstecken von Quelldateien ("Black boxing")

+ +

Viele Webseiten und Programme nutzen heute Frameworks wie jQuery, Ember oder Angular und zu 99% kann man einfach davon ausgehen, dass deren Code funktioniert. Die Interna dieser Bibliotheken wollen wir beim Debuggen meistens nicht sehen - wir verstecken sie und behandeln sie als Black box. Durch Black boxing entfällt das leidige Eintauchen in Bibliothek-Dateien (zum Beispiel bei each-Schleifen oder dem Auslösen von Events) und wir können uns auf unseren eigentlichen Code konzentrieren.

+ +
+
How to blackbox a source
+
+ +

Black boxing kann auch man für einzelne Dateien ein- und ausschalten, indem man auf das Breakpoint-Symbol ("eyeball": Augapfel) links neben der Quelldatei in der Liste klickt. Viele Quellen können auch versteckt werden, indem man in der Entwickler-Toolbar (Shift + F2) den blackbox-Befehl benutzt:

+ +

Wenn eine Code-Datei versteckt ist:

+ + + +

Browser-Add-Ons debuggen

+ +

Im Chrome Umfeld gibt es die folgenden Debug-Möglichkeiten:

+ +

chrome://browser/content/debugger.xul oder

+ +

in Version 23 beta, chrome://browser/content/devtools/debugger.xul:

+ + + +

Zugehörige Dateien:

+ + + +

Unglücklicherweise gibt es bis jetzt noch keine API um Ausdrücke im Debug-Bereich auszuwerten oder um Seitenelemente zu markieren die durch Variablen im Debug-Bereich referenziert werden. (Ist im Moment in Arbeit, siehe auch Bug-Meldung 653545.)

+ +

Siehe auch:

+ + diff --git a/files/de/tools/debugger/settings/index.html b/files/de/tools/debugger/settings/index.html new file mode 100644 index 0000000000..972e98ff9a --- /dev/null +++ b/files/de/tools/debugger/settings/index.html @@ -0,0 +1,57 @@ +--- +title: Settings +slug: Tools/Debugger/Settings +translation_of: Archive/Tools/Debugger_settings +--- +
{{ToolsSidebar}}

The Debugger has its own settings menu, which you can access from an icon in the toolbar:

+ +

Each setting is a simple on/off switch:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Auto Prettify Minified SourcesWith this option enabled, the debugger will automatically detect minified JS files and pretty-print them.
Pause on ExceptionsWhen this option is enabled, execution of the script will automatically pause whenever a JavaScript exception is thrown.
Ignore Caught Exceptions +

If this option is set (it is set by default) and "Pause on exceptions" is set, then execution will pause on an exception only if that exception is not caught.

+ +

This is usually the behavior you want. You don't generally want to pause execution when an exception that is thrown is caught, since that generally indicates that your program is handling it properly.

+
Show Panes on StartupWhen this option is enabled, the debugger's variables pane is visible when you first start the debugger.
Show Only Enumerable PropertiesDo not display non-enumerable JavaScript properties.
Show Variables Filter BoxEnabling this option adds a "Filter variables" search box to the variables pane, so that you can filter the displayed list of variables.
Show Original SourcesEnabling this option will make the debugger use source maps, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript. Defaults to true.
Automatically Black Box Minified Sources +
+

New in Firefox 33.

+
+ +

Automatically black box sources whose URL ends with ".min.js". Defaults to true.

+
+ +

 

diff --git a/files/de/tools/debugger/source_map_errors/index.html b/files/de/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..b5c88af661 --- /dev/null +++ b/files/de/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Debugger + - Debugging + - Dev Tools + - Reference + - Source maps + - Tools +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Source maps sind JSON files, die einen Weg bieten, transformierte Quellen, so wie sie vom Browser gesehen werden, mit Original Sourcen, so wie sie von einem Entwickler geschrieben wurden, in Einklang zu bringen. Manchmal erhält man Fehler, wenn man mit source maps arbeitet. Diese Seite erklärt die Probleme, die am häufigsten auftreten und wie man diese Probleme beheben kann.

+ +
+

Anmerkung: Wenn Sie mehr über das Thema source maps erfahren möchten, klicken Sie hier: How to use a source map.

+
+ +

Allgemeines source map error reporting

+ +

Wenn Sie ein Problem sehen, erscheint eine Meldung in der Webconsole. Diese Meldung enthält eine Fehlermeldung, die URL der Ressource und die URL der source map:

+ +

Error from invalid JSON

+ +

Hier wird uns mitgeteilt, dass bundle.js eine source map voraussetzt und die URL der source map sagt uns, wo die source-map-Daten zu finden sind (in diesem Fall relativ zur Ressoucre). Der Fehler teilt uns mit, dass die source map nicht im JSON-Format vorliegt - wir bieten also die falsche Datei an.

+ +

Source maps können in ein paar allgemeinen Fällen fehlerhaft sein; die folgenden Abschnitte beschrieben diese Fälle.

+ +

Source map nicht vorhanden oder nicht zugreifbar

+ +

Auf die source map Ressource kann nicht zugegriffen werden oder sie ist nicht vorhanden.

+ +

Source map file is missing

+ +

Die Lösung ist hier, sicherzustellen, dass auf die Datei zugegriffen werden kann.

+ +

Ungültige source map

+ +

Die Source Map Daten können ungültig sein — entweder, es ist überhaupt kein JSON file, oder es hat eine ungültige Struktur. Typische Fehlermeldungen sind hier:

+ + + +

Error: "version" is a required argument

+ +

Originale Quelle fehlt

+ +

Es kann sein, dass eine originale Quelle fehlt. Sie werden dies eventuell feststellen, wenn Sie versuchen, eine der Original Sourcen im Debugger zu öffnen. Die Meldung sieht in diesem Fall ein bisschen anders aus:

+ +

Debugger source tab showing the error

+ +

In diesem Fall wird die Meldung auch im Source Tab im Debugger angezeigt:

+ +

Debugger source tab showing the error

+ +

Netzwerkfehler beim Zugriff auf die Ressource

+ +

Ein Fehler in Firefox verhindert, dass die Source map für web extensions geladen wird.

+ +

Details dazu finden Sie hier: Bug 1437937: WebExtensions Doesn't Find Source Maps.

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

Der einzige Weg, dies zu umgehen, besteht darin, die URL manuell auf eine öffentliche Adresse (http://localhost:1234/file.map.js) zu ändern und einen lokalen Webserver auf diesem Port zu starten.

diff --git a/files/de/tools/firefox_os_1.1_simulator/index.html b/files/de/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..ec2bafe6ee --- /dev/null +++ b/files/de/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,352 @@ +--- +title: Firefox OS 1.1 Simulator +slug: Tools/Firefox_OS_1.1_Simulator +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +
{{ToolsSidebar}}
+
+
+

Diese Seite beschreibt den "alten" Firefox OS Simulator. Dieser sollte nur verwendet werden, falls man Apps für Firefox 1.1 entwickelt und er kann daher auch nur auf Firefox 24 oder Firefox 25 installiert werden.

+ +

Wenn man Apps für Firefox OS 1.2 oder später entwickelt, muß stattdessen der App Manager verwendet werden.

+ +

Falls Hilfe benötigt wird, kann man in der dev-developer-tools mailing list oder bei #devtools auf irc.mozilla.org nachfragen.

+
+ +

Die Firefox OS Simulator-Erweiterung ist ein Werkzeug, welches es ermöglicht, eigene Firefox OS Apps auf dem Desktop zu testen und zu debuggen. Der Code-Test-Debug-Zyklus ist sehr viel schneller mit dem Simulator als mit dem echten Gerät und dieses braucht man dafür natürlich dann auch nicht.

+ +

Im Wesentlichen enthält die Simulator-Erweiterung:

+ +
    +
  • den Simulator: dieser beinhaltet den Firefox OS Desktop Client, welcher eine Version der höheren Schichten des Firefox OS ist, das auf dem Desktop läuft. Der Simulator enthält auch einige zusätzliche Features in der Emulation, die in den Standard Firefox OS Desktop Builds nicht enthalten sind.
    • +
  • das Dashboard: ein Werkzeug, welches durch den Firefox-Browser gehostet wird und Start und Stop des Simulators ermöglicht, sowie das Installieren, Deinstallieren und Debuggen von Apps, die darin laufen. Das Dashboard hilft ebenfalls, die Apps auf ein reales Gerät zu übetragen und überprüft die App-Manifests auf die geläufigsten Probleme.
    • +
+ +

Der Screenshot im Folgenden zeigt eine Debugging-Sitzung unter Verwendung des Simulators.

+ +

Das Dashboard ist oben rechts innerhalb eines Firefox-Tabs. Wir haben eine App hinzugefügt, eine "Packaged App", die wir "Wo bin ich? (Where am I?)" genannt haben. Links oben läuft die App im Simulator. Wir haben ebenfalls die Debugger-Werkzeuge eingebunden, die im Panel weiter unten sind. Man kann sehen, daß das Konsolenfeld Meldungen über die App anzeigt.

+ +

+ +

Dieses Handbuch behandelt folgende Themen:

+ + + +
For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the Simulator Walkthrough page.
+ +

Die Simulator-Erweiterung installieren

+ +

Der Simulator kommt als Firefox Erweiterung. So wird er insatlliert:

+ +
    +
  1. Besuche mit Firefox die folgende Seite: Simulator's page on addons.mozilla.org.
    2. +
  2. Klicke "Add to Firefox".
    3. +
  3. Nach dem Download wirst Du aufgefordert, es zu installieren: Klicke "Install Now".
    4. +
+ +

Aufgrund der Größe der Erweiertung kann Firefox für einige Sekunden einfrieren. Falls ein Dialog mit der Warnung: "Unresponsive script" erscheint, klicke "Continue" um die Installation vollständig auszuführen. Das sollte aber nicht mit Firefox ab Version 27 passieren.
+
+ Firefox wird nach der Installation regelmäßig nach Aktualisierungen des Simulators suchen und diese automatisch installieren.

+ +

Das Dashboard des Simulators öffnet sich bei der Insatllation automatisch, und Du kannst es jederzeit erneut öffnen im "Firefox" Menü (oder dem "Extras" Menü unter OS X und Linux), dann "Web-Entwickler", dann "Firefox OS Simulator":

+ +


+ Das Dashboard ist das Werkzeug, mit dem Du Deine App dem Simularot hinzufügst und laufen lässt. So sieht es aus:

+ +

Adding, removing and refreshing apps

+ +

Adding apps

+ +

To add a packaged app to the Simulator, open the Dashboard, click "Add Directory" and select the manifest file for your app.
+
+ To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.
+
+ When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.

+ +

The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.

+ +

Managing apps

+ +

Once you have added an app, it will appear in the Manager's list of installed apps:
+
+ Each entry gives us the following information about the app:

+ +
    +
  • its name, taken from the manifest
    • +
  • its type, which will be one of "Packaged", "Hosted", or "Generated"
    • +
  • a link to its manifest file
    • +
  • the result of manifest validation
    • +
+ +

It also gives us four commands:

+ +
    +
  • "Refresh": use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.
    • +
  • "Connect": use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.
    • +
  • "Remove" ("X"): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
    • +
  • "Receipt": use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
    • +
+ +
+

Refresh App from the Simulator window: you can update and reload an app directly from the Simulator window using the menubar action or its associated shortcut while the app is running.

+
+ +

Manifest validation

+ +

When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:

+ +
    +
  • manifest errors: problems that will prevent your app from installing or running
    • +
  • manifest warnings: problems that may prevent your app from working properly
    • +
  • simulator-specific warnings: features your app is using that the Simulator doesn't yet support
    • +
+ +

It summarises the problems encountered in the entry for the app: clicking on the summary provides more details.

+ +

Manifest errors

+ +

The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:

+ +
    +
  • the manifest does not include the mandatory "name" field
    • +
  • the manifest is not valid JSON
    • +
  • the app is a hosted app, but the type field in its manifest is "privileged" or "certified", which are only available to packaged apps
    • +
  • common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)
    • +
+ +

Here's the result of trying to add a manifest file with a missing "name":
+

+ +

Manifest warnings

+ +

The Dashboard will report the following manifest issues as warnings:

+ +
    +
  • missing icons
    • +
  • the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square
    • +
  • the type field is unrecognized
    • +
  • the manifest requests a permission that is unrecognized
    • +
  • the manifest requests a permission which will be denied
    • +
  • the manifest requests a permission for which access could not be determined
    • +
+ +

Simulator-specific warnings

+ +

Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:

+ +
    +
  • the type field is "certified", but the Simulator does not yet fully support certified apps
    • +
  • the manifest requests a permission to use an API that is not yet supported by the Simulator
    • +
+ +

Running the Simulator

+ +

There are two different ways the Simulator may be started:

+ +
    +
  • if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator
    • +
  • if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app
    • +
+ +

Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.
+
+ The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a toolbar at the bottom and a menubar at the top that contains some extra features:

+ +

+ +

To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:

+ +

+ +

Simulator toolbar

+ +

In the bottom toolbar, from left to right, these are the Home button, the Screen Rotation button, and the Geolocation button.

+ +
    +
  • the Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)
    • +
  • the Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
    • +
  • the Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the Geolocation API.
    • +
+ +

+ +

Simulator menubar

+ +

In the top menubar, you can access some useful commands to make development more efficient:

+ +

+ +
    +
  • File -> Quit (Ctrl/Cmd - Q): shut down the Simulator
    • +
  • App -> Refresh (Ctrl/Cmd - R): refresh the running app
    • +
+ +

The keyboard shortcut for the "App Refresh" command makes it possible to iteratively develop an app much like a web page:

+ +
    +
  • make a change to the code (and rerun your build tool if needed, e.g. volo / yeoman / grunt)
    • +
  • type the keyboard shortcut to refresh the app running in the Simulator
    • +
+ +
+

"Refresh App and Clear Data" hidden shortcut: sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, Shift - Ctrl/Cmd - R, that will refresh the running app while clearing the following data:

+ +
    +
  • +

    localStorage / sessionStorage

    +
    • +
  • +

    cookies

    +
    • +
  • +

    indexedDB

    +
    • +
  • +

    appCache

    +
    • +
+
+ +

Attaching developer tools

+ +

You can attach developer tools to the Simulator, to help debug your app. At the moment you can only attach the JavaScript Debugger, the Web Console, the Style Editor, the Profiler and the Network Monitor, but we're working on adding support for more developer tools.

+ +
+

Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.

+
+ +

To attach developer tools to the Simulator, click the "Connect" button for an app:

+ +

+ +

The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:

+ +

+ +

Web Console

+ +

The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (Learn more about the Web Console.)

+ +

Debugger

+ +

Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (Learn more about the Debugger.)

+ +

Style Editor

+ +

You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (Learn more about the Style Editor.)

+ +

Profiler

+ +

Using the Profiler tool connected to the app, you can to find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (Learn more about the Profiler.)

+ +

Network Monitor

+ +

Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface. (Learn more about the Network Monitor.)

+ +

Receipts

+ +

If you are developing a paid app, you should test your receipt validation code (e.g. the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.

+ +

Thanks to the "Receipts" menu in each app entry on the Simulator Dashboard, you can install an app with a "Valid", "Invalid", or "Refunded" test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:

+ +

+ +

Push to device

+ +

If you have a Firefox OS device you can connect it to the Simulator, and can then push apps from the Dashboard to the device.

+ +

Connecting a device

+ +

To connect the device, follow the instructions in the guide to connecting a Firefox OS device to the desktop. Note that you don't have to install ADB, as the Simulator add-on includes it already.

+ +

Pushing apps to the device

+ +

Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note "Device connected" appear on the left of the Dashboard, and a new command appear in the entry for each app labeled "Push":

+ +

+ +

Click "Push", and the app will be installed on the Firefox OS device.

+ +
+

Manual Steps:

+ +
    +
  • +

    Once you’ve pushed the app to the device, you need to manually close and restart it again, to get updated content

    +
    • +
  • +

    If you update anything in the manifest (e.g. app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect

    +
    • +
+
+ +

Firefox OS Device Connection Confirmation

+ +

On every device reboot, the first "Push" request needs to be confirmed on the device:

+ +

+ +

Troubleshooting on Linux

+ +

If you are unable to connect your device after creating udev rules, please see this bug.

+ +

Limitations of the Simulator

+ +

Note that the Firefox OS Simulator isn't a perfect simulation.

+ +

Hardware limitations

+ +

Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.

+ +

Audio/video codecs

+ +

The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:

+ +
    +
  • MP3
    • +
  • AAC
    • +
  • H.264 (MP4)
    • +
  • WebM
    • +
+ +

This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.

+ +

Unsupported APIs

+ +

Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:

+ + + +

Getting help

+ +

If you have a question, try asking us on the dev-developer-tools mailing list or on #devtools on irc.mozilla.org.

+ +

How to enable verbose logging

+ +

Use about:config to create the preference extensions.r2d2b2g@mozilla.org.sdk.console.logLevel, set it to the integer value 0, and disable/reenable the addon. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).

+
+
+ +
+

 

+
+ +

 

diff --git a/files/de/tools/index.html b/files/de/tools/index.html new file mode 100644 index 0000000000..4daa07374a --- /dev/null +++ b/files/de/tools/index.html @@ -0,0 +1,149 @@ +--- +title: Firefox Tools für Webentwickler +slug: Tools +tags: + - Entwickler + - Tools + - Webentwicklung +translation_of: Tools +--- +
{{ToolsSidebar}}
+ +
Untersuchen, bearbeiten und debuggen von HTML, CSS und JavaScript für Desktop- und Mobilseiten
+ +
+
+

Falls Sie auf der Suche nach Informationen sind, wie man die Developer Tools von Firefox verwendet, sind Sie hier richtig – diese Seite stellt Links zu detaillierten Informationen über alle Kern-Werkzeuge und zusätzlichen Werkzeuge bereit, sowie zu weiteren Informationen, zum Beispiel wie man sich mit Firefox für Android verbindet und es debugged, wie man die Developer Tools erweitert, und wie man den Browser als Ganzes debugged.

+ +

Bitte erkunden Sie die Links in der Seitenleiste und weiter unten auf der Seite. Falls Sie Feedback oder Fragen zu den Developer Tools haben, schicken Sie uns Nachrichten auf unserer Mailingliste oder unserem IRC-Kanal (siehe die Community-Links am unteren Ende der Seite). Falls Sie hingegen Feedback oder Fragen zur Dokumentation haben, ist die MDN Discourse-Seite ein guter Ort dafür.

+ +

Entwerfen

+ +

Werkzeuge zum Erstellen von Webseiten und Web Apps.

+ +
+
JavaScript-Umgebung
+
Ein Texteditor innerhalb Firefox zum Schreiben und Ausführen von JavaScript.
+
Stilbearbeitung
+
Betrachten und bearbeiten von CSS-Styles der aktuellen Seite.
+
Shader Bearbeitung
+
Ansehen und bearbeiten der WebGL Vertex/Fragment Shaders.
+
+
+ +
+

Untersuchen und Debuggen

+ +

Untersuchen, optimieren, entdecken und debuggen von Webseiten und Web Apps.

+ +
+
Web-Konsole
+
Log-Nachrichten einer Webseite anschauen und mittels JavaScript mit der Seite interagieren.
+
Inspektor
+
HTML und CSS einer Seite anschauen und verändern.
+
JavaScript Debugger
+
JavaScript einer Seite stoppen, schrittweise laufen lassen, untersuchen und verändern.
+
Netzwerkanalyse
+
Netzwerkanfragen beim Laden der Seite untersuchen.
+
Developer Toolbar
+
Eine Kommandozeile für die Entwickler-Werkzeuge.
+
3D-Untersuchung
+
3D-Visualisierung der Seite und deren Aufbau. Ganz einfach und übersichtlich.
+
+
+
+ +
+
+
+

Mobilgeräte

+ +

Hilfreiche und leistungsstarke Werkzeuge für die Entwicklung mit Mobilgeräten.

+ +
+
App-Manager
+
Designen und entwickeln von großartigen Apps für Firefox OS.
+
Firefox OS Simulator
+
Starten und debuggen Sie Ihre Firefox OS App auf dem Desktop, ohne ein echtes Firefox OS Handy zu benötigen. Dies spart Ihnen viel Zeit beim Entwickeln.
+
Reaktives Design
+
Sehen Sie sich an, wie Ihre Webseite oder App in verschiedenen Browser-Größen dargestellt wird, ohne dass Sie die Größe Ihres Browser-Fensters verändern müssen.
+
Firefox auf Android debuggen
+
Verbinden Sie die Entwickler-Werkzeuge mit Firefox auf dem Android-Handy.
+
+
+ +
+

Performance

+ +

Finden und beheben von Geschwindigkeitsproblemen.

+ +
+
JavaScript Profiler
+
Finden Sie heraus, wo JavaScript Zeit benötigt, um den Code auszuführen. Optimieren Sie so Ihre Scripte.
+
Paint Flashing Tool
+
Hebt die neu gezeichneten Flächen einer Seite hervor.
+
Reflow Event Logging
+
Untersuchen von Reflow-Ereignissen in der Web-Konsole.
+
Laufzeitanalyse
+
Untersuchen, wie lange Teile der Seite zum Laden brauchen.
+
+
+
+ +
+
+
+

Den Browser debuggen

+ +

Normalerweise werden die Entwickler-Werkzeuge für Webseiten oder Web Apps verwendet. Es gibt aber auch die Möglichkeit, den Browser als Ganzes zu untersuchen und zu debuggen. Das kann zum Beispiel für die Entwicklung des Browsers selbst oder von Add-ons nützlich sein.

+ +
+
Browser Konsole
+
Sehen Sie sich die Log-Nachrichten des Browsers selbst und von Add-ons an und führen Sie JavaScript-Code im Kontext des Browsers aus.
+
Browser Toolbox
+
Verbinden der Entwickler-Werkzeuge mit dem Browser.
+
+
+ +
+

Die Entwickler-Werkzeuge erweitern

+ +

Die Entwickler-Werkzeuge sind so gebaut, dass es möglich ist, diese zu erweitern. Firefox Add-ons haben Zugriff auf die Entwickler-Werkzeuge und auf Komponenten zum Ausbau bestehender Tools sowie zum Hinzufügen neuer Tools. Mit dem Remote Debugging Protokoll ist es möglich, eigene Debugging-Clients und -Server zu entwickeln, um somit Webseiten mit den eigenen Tools zu debuggen.

+ +
+
Remote Debugging Protokoll
+
Protokoll zur Verbindung der Entwickler-Werkzeuge mit einem Debugging-Ziel, wie zum Beispiel einer Instanz von Firefox oder einem Firefox OS.
+
Source Editor
+
Ein eingebauter Code-Editor in Firefox, welcher in Ihr Add-on eingebunden werden kann.
+
+
+
+ +
+

Siehe auch

+ +

Dieser Bereich stellt einige Ressourcen bereit, die nicht vom Mozilla Developer Tools Team zur Verfügung gestellt, von Webentwicklern jedoch viel genutzt werden. Es sind nur einige Firefox-Add-ons aufgelistet, eine komplette Liste befindet sich in der Kategorie "Webentwicklung" auf addons.mozilla.org.

+ +
+
+
+
Firebug
+
Ein sehr bekanntes und mächtiges Werkzeug für Webentwickler mit einem JavaScript-Debugger, HTML und CSS Inspektor und Editor sowie einer Netzwerkanalyse.
+
DOM Inspector
+
Untersuchen und bearbeiten des DOM von Webseiten oder XUL-Fenstern.
+
Web Developer
+
Fügt ein Menü und eine Symbolleiste mit verschiedenen Entwickler-Werkzeugen zum Browser hinzu.
+
+
+ +
+
+
Webmaker Tools
+
Eine Reihe von Tools für Anfänger im Bereich der Webentwicklung.
+
W3C Validators
+
Das W3C stellt einige Tools zur Überprüfung des Webseitencodes bereit. Zum Beispiel Gültigkeitsprüfungen für HTML und CSS.
+
JSHint
+
Analysiert JavaScript-Code.
+
+
+
diff --git a/files/de/tools/index/index.html b/files/de/tools/index/index.html new file mode 100644 index 0000000000..7505b123b1 --- /dev/null +++ b/files/de/tools/index/index.html @@ -0,0 +1,9 @@ +--- +title: Index +slug: Tools/Index +tags: + - Index + - Tools +translation_of: Tools/Index +--- +
{{ToolsSidebar}}

{{Index("/de/docs/Tools")}}

diff --git a/files/de/tools/json_viewer/index.html b/files/de/tools/json_viewer/index.html new file mode 100644 index 0000000000..ed3cda58c2 --- /dev/null +++ b/files/de/tools/json_viewer/index.html @@ -0,0 +1,26 @@ +--- +title: JSON Viewer +slug: Tools/JSON_viewer +tags: + - Tools +translation_of: Tools/JSON_viewer +--- +
{{ToolsSidebar}}
+ +
+

Der JSON-Viewer is neu in Firefox 44.

+ +

Vor Firefox 53 ist der JSON-Viewer standardmäßig nur in der Firefox Developer Edition und Firefox Nightly aktiviert. Um diese Funktion in anderen Release-Kanälen zu aktivieren, setzen Sie die Einstellung  devtools.jsonview.enabled auf true.

+ +

Ab Firefox 53 ist der JSON-Viewer auch in der Beta und der normalen Release-Version von Firefox standardmäßig aktiviert.

+
+ +

Firefox enthält einen JSON-Viewer. Wenn Sie eine JSON-Datei im Browser öffnen, oder eine Remote-URL mit dem Content-Type application/json aufrufen, wird sie analysiert und die Syntax hervorgehoben. Arrays und Objekte können über das Pfeilsymbol erweitert oder reduziert werden.

+ +

{{EmbedYouTube("ktFcevMwYXw")}}

+ +

Der JSON-Viewer bietet ein Suchfeld, mit dem Sie den Inhalt der JSON-Ausgabe filtern können.

+ +

Sie können auch die Rohdaten der JSON-Antwort anzeigen lassen und diese einheitlich formatieren.

+ +

Wenn das Dokument das Ergebnis einer Netzwerkanforderung war, zeigt der Viewer außerdem die Anforderungs- und Antwortheader an.

diff --git a/files/de/tools/keyboard_shortcuts/index.html b/files/de/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..fb9fd61b10 --- /dev/null +++ b/files/de/tools/keyboard_shortcuts/index.html @@ -0,0 +1,847 @@ +--- +title: Tastaturkürzel +slug: Tools/Keyboard_shortcuts +tags: + - Tools +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Auf dieser Seite sind alle Tastaturkürzel der in Firefox integrierten Entwicklerwerkzeuge aufgeführt.

+ +

Im ersten Abschnitt befinden sich die Tastaturkürzel, mit denen die einzelnen Werkzeuge geöffnet werden. Im zweiten Abschnitt befinden sich die Tastaturkützel, die im Werkzeugkasten Verwendung finden. Anschließend folgt je ein Abschnitt pro Werkzeug, der die Tastaturkürzel auflistet, die im jeweiligen Werkzeug verwendet werden können.

+ +

Da Access-Keys von der Sprachversion abhängen, werden sie auf dieser Seite nicht dokumentiert.

+ +

Öffnen und Schließen von Werkzeugen

+ +

Diese Tastaturkürzel funktionieren im Browser-Hauptfenster und öffnen das entsprechende Werkzeug. Bei Werkzeugen im Werkzeugkasten schließen sie das Werkzeug, wenn es aktiv ist. Bei Werkzeugen wie der Browser-Konsole, die ein neues Fenster öffnen, müssen Sie das Fenster schließen, um das Werkzeug zu schließen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Öffne Werkzeugkasten (öffnet sich mit zuletzt aktiviertem Werkzeug)Strg + Umschalt + IBefehlstaste + Wahltaste + IStrg + Umschalt + I
Öffne Web-Konsole1Strg + Umschalt + KBefehlstaste + Wahltaste + KStrg + Umschalt + K
Schalte Inspektor ein oder ausStrg + Umschalt + CBefehlstaste + Wahltaste + CStrg + Umschalt + C
Öffne DebuggerStrg + Umschalt + SBefehlstaste + Wahltaste + SStrg + Umschalt + S
Öffne StilbearbeitungUmschalt + F7Umschalt + F51Umschalt + F5
Öffne LaufzeitanalyseUmschalt + F5Umschalt + F51Umschalt + F5
Öffne NetzwerkanalyseStrg + Umschalt + EBefehlstaste + Wahltaste + EStrg + Umschalt + E
Entwickler-Symbolleiste (an- und ausschalten)Umschalt + F2Umschalt + F21Umschalt + F2
Bildschirmgrößen testen (an- und ausschalten)Strg + Umschalt + MBefehlstaste + Wahltaste + MStrg + Umschalt + M
Öffne Browser-Konsole2Strg + Umschalt + JBefehlstaste + Umschalt + JStrg + Umschalt + J
Öffne Browser-Werkzeugkasten (neu in Firefox 39)Strg + Alt + Umschalt + IBefehlstaste + Opt + Umschalt + IStrg + Alt + Umschalt + I
Öffne JavaScript-UmgebungUmschalt + F4Umschalt + F4Umschalt + F4
Öffne Entwickler-Umgebung (WebIDE)Umschalt + F8Umschalt + F8Umschalt + F8
Öffne Speicher-Inspektor3Umschalt + F9Umschalt + F9Umschalt + F9
+ +

1. Im Gegensatz zu den anderen Werkzeugen im Werkzeugkasten, kann dieses Kürzel nicht auch zum Schliessen der Web-Konsole verwendet werden. Das Kürzel fokussiert die Kommandozeile innerhalb der Web-Konsole. Um die Web-Konsole zu schliessen, verwenden Sie das globale Werkzeugkasten-Tastaturkürzel Strg + Umschalt + I (Befehlstaste + Wahltaste + I auf Mac)

+ +

2. Vor Firefox 38 wird die Browser Konsole von dieser Tasten-Kombination geschlossen, wenn sie von einem Firefox Fenster verdeckt ist. Beginnend mit Firefox 38 wird eine verdeckte Browser Konsole in den Vordergrund gebracht und fokussiert.

+ +

3. Das Werkzeug ist in der Voreinstellung nicht freigeschaltet. Die Tasten-Kombination funktioniert also erst, sobald es unter Einstellungen angewählt wird.

+ +

Werkzeugkasten

+ +
+

Diese Tastaturkürzel funktionieren immer wenn der Werkzeugkasten geöffnet ist, egal welches Werkzeug aktiv ist.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Von links nach rechts durch die Werkzeuge blätternStrg + ]Befehlstaste + ]Strg + ]
Von rechts nach links durch die Werkzeuge blätternStrg + [Befehlstaste + [Strg + [
Einstellungen der Entwicklerwerkzeuge anzeigenStrg + Umschalt + OBefehlstaste + Umschalt + OStrg + Umschalt + O
+
+ +
+

Diese Tastaturkürzel funktionieren bei allen Werkzeugen, die sich im Werkzeugkasten befinden.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Schrift vergrößernStrg + +Befehlstaste + +Strg + +
Schrift verkleinernStrg + -Befehlstaste + -Strg + -
Schriftgröße zurücksetzenStrg + 0Befehlstaste + 0Strg + 0
+
+ +

Quelltext-Editor

+ +
+

In dieser Tabelle befinden sich die Standardtastaturkürzel für den Quelltext-Editor.

+ +

Ab Firefox 29 können stattdessen Vim- oder Emacs-Tastaturkürzel verwendet werden. Um diese auszuwählen, öffnen Sie about:config, wählen Sie die Einstellung devtools.editor.keymap und weisen Sie ihr den Wert „vim“ oder „emacs“ zu. Wenn Sie dies tun, werden die ausgewählten Tastaturkürzel für alle Entwicklerwerkzeuge verwendet, die den Quelltext-Editor nutzen.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Zu Zeile springenStrg + JBefehlstaste + JStrg + J
In Datei suchenStrg + FBefehlstaste + FStrg + F
WeitersuchenStrg + GBefehlstaste + GStrg + G
Alle auswählenStrg + ABefehlstaste + AStrg + A
AusschneidenStrg + XBefehlstaste + XStrg + X
KopierenStrg + CBefehlstaste + CStrg + C
EinfügenStrg + VBefehlstaste + VStrg + V
RückgängigStrg + ZBefehlstaste + ZStrg + Z
WiederholenStrg + Umschalt + Z / Strg + YBefehlstaste + Umschalt + Z / Befehlstaste + YStrg + Umschalt + Z / Strg + Y
EinrückenTabTabTab
Einrücken rückgängig machenUmschalt + TabUmschalt + TabUmschalt + Tab
Zeile(n) nach oben verschiebenAlt + Pfeil obenAlt + Pfeil obenAlt + Pfeil oben
Zeile(n) nach unten verschiebenAlt + Pfeil untenAlt + Pfeil untenAlt + Pfeil unten
Zeile(n) auskommentieren/nicht mehr auskommenrierenStrg + /Befehlstaste + /Strg + /
+
+ +

Seiteninspektor

+ +
+ + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Inspektor öffnenStrg + Umschalt + CBefehlstaste + Wahltaste + CStrg + Umschalt + C
+ +

HTML-Bereich

+ +

Diese Tastaturkürzel funktionieren im HTML-Bereich des Inspektors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Ausgewählten Knoten löschenLöschenLöschenLöschen
Löschen eines Knotens rückgängig machenStrg + ZBefehlstaste + ZStrg + Z
Löschen eines Knotens wiederholenStrg + Umschalt + Z / Strg + YBefehlstaste + Umschalt + Z / Befehlstaste + YStrg + Umschalt + Z / Strg + Y
Zum nächsten Knoten springen (nur aufgeklappte Knoten)Pfeil untenPfeil untenPfeil unten
Zum vorherigen Knoten springenPfeil obenPfeil obenPfeil oben
Aktuellen Knoten aufklappenPfeil rechtsPfeil rechtsPfeil rechts
Aktuellen Knoten einklappenPfeil linksPfeil linksPfeil links
Durch Attribute eines Knotens nach vorne blätternTabTabTab
Durch Attribute eines Knotens nach hinten blätternUmschalt + TabUmschalt + TabUmschalt + Tab
Ausgewähltes Attribut bearbeitenEingabetasteEingabetasteEingabetaste
Ausgewählten Knoten ein-/ausblendenHHH
Suchleiste im HTML-Bereich auswählenStrg + FBefehlstaste + FStrg + F
Als HTML bearbeitenF2F2F2
+ +

CSS-Bereich

+ +

Diese Tastaturkürzel funktionieren im CSS-Bereich des Inspektors.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Durch Eigenschaften und Werte nach vorne blätternTabTabTab
Durch Eigenschaften und Werte nach hinten blätternUmschalt + TabUmschalt + TabUmschalt + Tab
Ausgewählten Wert um eins erhöhenPfeil obenPfeil obenPfeil oben
Ausgewählten Wert um eins vermindernPfeil untenPfeil untenPfeil unten
Ausgewählten Wert um 10 erhöhenUmschalt + Pfeil obenUmschalt + Pfeil obenUmschalt + Pfeil oben
Ausgewählten Wert um 10 vermindernUmschalt + Pfeil untenUmschalt + Pfeil untenUmschalt + Pfeil unten
Ausgewählten Wert um 0,1 erhöhenAlt + Pfeil obenWahltaste + Pfeil obenAlt + Pfeil oben
Ausgewählten Wert um 0,1 vermindernAlt + Pfeil untenWahltaste + Pfeil untenAlt + Pfeil unten
+
+ +

Debugger

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Debugger öffnenStrg + Umschalt + SBefehlstaste + Wahltaste + SStrg + Umschalt + S
Mit dem Skriptfilter im aktuellen Quelltext suchenStrg + FBefehlstaste + FStrg + F
Im aktuellen Quelltext weitersuchenEingabetaste / Pfeil obenEingabetaste / Pfeil obenEingabetaste / Pfeil oben
Im aktuellen Quelltext rückwärts suchenUmschalt + Enter / Pfeil untenUmschalt + Enter / Pfeil untenUmschalt + Enter / Pfeil unten
Mit dem Skriptfilter in allen Quelltexten suchenStrg + Alt + FBefehlstaste + Wahltaste + FStrg + Alt + F
Nach Skripten nach Namen suchenStrg + P / Strg + OBefehlstaste + P / Strg + OStrg + P / Strg + O
Nach Funktionsdefinitionen suchenStrg + DBefehlstaste + DStrg + D
Variablen filtern, wenn Ausführung pausiert istStrg + Alt + VBefehlstaste + Wahltaste + VStrg + Alt + V
Ausführung nach Erreichen eines Haltepunkts fortsetzenF8F81F8
Schritt darüberF10F101F10
Schritt hineinF11F111F11
Schritt herausUmschalt + F11Umschalt + F111Umschalt + F11
Haltepunkt an der aktuellen Zeile an-/ausschaltenStrg + BBefehlstaste + BStrg + B
Bedingten Haltepunkt an der aktuellen Zeile an-/ausschaltenStrg + Umschalt + BBefehlstaste + Umschalt + BStrg + Umschalt + B
Auswahl als zu beobachtenten Ausdruck hinzufügenStrg + Umschalt + EBefehlstaste + Umschalt + EStrg + Umschalt + E
Mit dem Skriptfilter zu Zeile springenStrg + LBefehlstaste + LStrg + L
Mit dem Skriptfilter suchenStrg + OBefehlstaste + OStrg + O
+ +

1. Standardmäßig wird den Funktionstasten auf einigen Macs eine besondere Funktion zugewiesen, beispielsweise die Änderung der Bildschirmhelligkeit. Informationen finden Sie in diesem Leitfaden zur Verwendung dieser Tasten als Standard-Funktionstasten. Um eine anders zugewiesene Taste als Standard-Funktionstaste zu verwenden, drücken Sie gleichzeitig die Fn-Taste (um die Laufzeitanalsyse zu öffnen drücken Sie also Umschalt + Fn + F5).

+
+ +

Web-Konsole

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Web-Konsole öffnenStrg + Umschalt + KBefehlstaste + Wahltaste + KStrg + Umschalt + K
Im Nachrichtenfenster suchenStrg + FBefehlstaste + FStrg + F
Bereich „Objektinspektor“ leerenEscapeEscapeEscape
Fokus auf die Kommandozeile setzenStrg + Umschalt + KBefehlstaste + Wahltaste + KStrg + Umschalt + K
+ +

Kommandozeile

+ +

Diese Tastaturkürzel funktionieren in der Kommandozeile.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Rückwärts durch die Ausgabe blätternBild AufBild AufBild Auf
Vorwärts durch die Ausgabe blätternBild AbBild AbBild Ab
Rückwärts durch die bereits ausgeführten Befehle blätternPfeil obenPfeil obenPfeil oben
Vorwärts durch die bereits ausgeführten Befehle blätternPfeil untenPfeil untenPfeil unten
Zum Zeilenanfang springenPos1Befehlstaste + AStrg + A
Zum Zeilenende sprintenEndeBefehlstaste + EStrg + E
Den aktuellen Ausdruck ausführenEingabetasteEingabetasteEingabetaste
Zeilenumbruch für mehrzeilige Ausdrücke einfügenUmschalt + EingabetasteUmschalt + EingabetasteUmschalt + Eingabetaste
+ +

Autovervollständigung Anzeige

+ +

Diese Tastaturkürzel funktionieren, wenn die Autovervollständigung Anzeige geöffnet ist.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Auswählen des aktuellen Vorschlags der AutovervollständigungTabTabTab
Anzeige der Autovervollständigung schließenEscapeEscapeEscape
Bei geöffneter Anzeige den vorherigen Vorschlag der Autovervollständigung auswählenPfeil obenPfeil obenPfeil oben
Bei geöffneter Anzeige den nächsten Vorschlag der Autovervollständigung auswählenPfeil untenPfeil untenPfeil unten
Rückwärts durch die Autovervollständigung-Vorschläge blätternBild AufBild AufBild Auf
Vorwärts durch die Autovervollständigung-Vorschläge blätternBild AbBild AbBild Ab
+
+ +
+

Stilbearbeitung

+ + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
Stilbearbeitung öffnenUmschalt + F7Umschalt + F7Umschalt + F7
Anzeige der Autovervollständigung öffnenStrg + LeertasteBefehlstaste + LeertasteStrg + Leertaste
+ +

JavaScript-Umgebung

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BefehlWindowsMac OS XLinux
JavaScript-Umgebung öffnenUmschalt + F4Umschalt + F4Umschalt + F4
Quelltext in der JavaScript-Umgebung ausführenStrg + RBefehlstaste + RStrg + R
Quelltext in der JavaScript-Umgebung ausführen und das Ergebnis im Objektinspektor anzeigenStrg + IBefehlstaste + IStrg + I
Quelltext in der JavaScript-Umgebung ausführen und Ergebnis als Kommentar einfügenStrg + LBefehlstaste + LStrg + L
Aktuelle Funktion neu auswertenStrg + EBefehlstaste + EBefehlstaste + E
Aktuelle Seite neu laden, dann den Quelltext in der JavaScript-Umgebung ausführenStrg + Umschalt + RBefehlstaste + Umschalt + RStrg + Umschalt + R
Inhalt der JavaScript-Umgebung speichernStrg + SBefehlstaste + SStrg + S
Existierende JavaScript-Umgebung öffnenStrg + OBefehlstaste + OStrg + O
Neue JavaScript-Umgebung erstellenStrg + NBefehlstaste + NStrg + N
JavaScript-Umgebung schließenStrg + WBefehlstaste + WStrg + W
Quelltext in der JavaScript-Umgebung einheitlich formatierenStrg + PBefehlstaste + PStrg + P
+
+ +

 

diff --git a/files/de/tools/netzwerkanalyse/index.html b/files/de/tools/netzwerkanalyse/index.html new file mode 100644 index 0000000000..1eed8449f5 --- /dev/null +++ b/files/de/tools/netzwerkanalyse/index.html @@ -0,0 +1,126 @@ +--- +title: Netzwerkanalyse +slug: Tools/netzwerkanalyse +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}

Die Netzwerkanalyse zeigt Ihnen alle Netzwerkanfragen in Firefox  (z. B. wenn er eine Seite lädt oder über XMLHttpRequests), wie lange jede Anfrage gedauert hat und Details dazu. Um die Analyseansicht zu öffnen, wählen Sie „Netzwerkanalyse“ im Menü „Web-Entwickler“ (welches ein Untermenü von „Extras“ unter Mac und Linux ist) oder öffnen Sie die Entwickler-Symbolleiste und wechseln Sie zum Reiter „Netzwerk“.

+ +

Die Netzwerkanalyse erscheint am unteren Browserrand. Laden Sie die Seite neu, um die Anfrage zu sehen:

+ +

+ +

Liste der Netzwerkanfragen

+ +

Per Voreinstellung zeigt die Netzwerkanalyse eine Liste aller Netzwerkanfragen, die während des Ladens der Seite gemacht wurden. Jede Anfage steht in einer eigenen Zeile:
+

+ +

Felder der Netzwerkanfragen

+ +

Jede Zeile zeigt folgendes:

+ + + +

Die Symbolleiste oberhalb benennt diese Spalten und das Klicken auf eine Benennung sortiert die Anfragen nach dieser Spalte.

+ +

Ab Firefox 30 wird ein Vorschaubild der Grafik angezeigt, wenn es sich bei der Datei und eine Grafik handelt, und beim Drüberfahren mit dem Mauszeiger wird ein Vorschaubild angezeigt:

+ +

+ +

Zeitverlauf

+ +

Die Anfrageliste zeigt ebenfalls einen Zeitverlauf für die verschiedenen Teilen jeder Anfrage. Jeder Zeitverlauf erhält eine horizontale Position in seiner Reihe relativ zu den anderen Netzwerkanfragen. Damit können Sie sehen, wie lange die Seite insgesamt zum Laden benötigt hat.

+ +

Nach Content-Typen filtern

+ +

Am Ende jeder Seite können Sie über die Schaltflächen Filter für die Anfragen erstellen, abhängig vom Content-Typ der Anfrage:

+ +
+

Das Leeren der Liste der Netzwerkanfragen ist neu seit Firefox 28.

+
+ +

Ab Firefox 28 gibt es ganz rechts in der Zeile die Schaltfläche „Leeren“: Wie Sie sicher ahnen, können Sie damit die Liste der Netzwerkanfragen löschen.

+ +

Details zu den Netzwerkanfragen

+ +

Durch einen Klick auf eine Zeile wird eine neue Ansicht im rechten Teil des Netzwerkanalyse-Fensters angezeigt, das Ihnen detaillierte Informationen über die Anfrage bietet.

+ +

Mithilfe der Reiter ganz oben in dieser Ansicht können Sie zwischen verschiedenen Seiten wechseln:

+ + + +

Ab Firefox 30 gibt es eine sechste Seite namens Vorschau, die nur angezeigt wird, wenn der Content-Typ HTML ist.

+ +

Durch Klicken auf das Symbol links von den Reitern schließt diese Ansicht und bringt Sie zurück zur Listenansicht.

+ +

Kopfzeilen

+ +

Dieser Reiter listet Basisinformationen über die Anfragen auf und enthält die URL, den Status-Code, die HTTP-Anfrage und die Antwortkopfzeilen, die gesendet wurden:

+ +

Sie können zu den angezeigten Kopfzeilen Filter setzen:

+ +

Cookies

+ +

Dieser Reiter zeigt alle Details zu jedem Cookie, das mit einer Anfrage oder einer Antwort gesendet wurde:

+ +

So wie bei den Kopfzeilen können Sie auch die angezeigten Cookies filtern.

+ +

Parameter

+ +

Dieser Reiter zeigt die GET-Parameter und POST-Daten einer Anfrage:

+ +

Antwort

+ +

Der vollständige Inhalt einer Antwort wird in diesem Reiter angezeigt. Wenn die Antwort HTML, JS oder CSS ist, wird es als Text dargestellt:

+ +

Wenn die Antwort JSON ist, wird es als untersuchbares Objekt dargestellt:

+ +

Wenn die Anfrage eine Grafik ist, wird im Reiter eine Vorschau dargestellt:

+ +

Zeitverlauf

+ +

Im Reiter Zeitverlauf wird eine detailliertere und kommentierte Ansicht der Zeitverlaufsleiste dieser Anfrage angezeigt und stellt die Gesamtwartezeit in seinen verschiedenen Abschnitten dar:

+ +

Vorschau

+ +
+

Diese Funktion ist neu ab Firefox 30.

+
+ +

Ab Firefox 30 wird der Reiter „Vorschau“ als sechstes Element angezeigt, wenn der Dateityp HTML ist. Es zeigt den HTML-Inhalt:

+ +

+ +

Netzwerkanalyse starten

+ +
+

Das Werkzeug zum Starten der Netzwerkanalyse ist neu ab Firefox 29.

+
+ +

Ab Firefox 29 enthält die Netzwerkanalyse ein Werkzeug zum Starten derselben. Das hilft Ihnen zu zeigen, wie lange der Browser braucht, um die verschiedenen Teile Ihrer Website zu laden.

+ +

Klicken Sie zum Starten der Netzwerkanalyse auf das Symbol mit der Stoppuhr in der Symbolleiste am unteren Rand der Anzeige:

+ +

(Alternativ dazu und wenn Sie gerade erst die Netzwerkanalyse geöffnet haben und es noch keine Daten enthält, erhalten Sie ein Stoppuhr-Symbol im Hauptfenster.)

+ +

Die Website wird dann zweimal geladen: einmal mit einem leeren Browser-Cache und einmal mit einem gefüllten Cache. Dies simuliert den erstmaligen sowie darauffolgende Besuche eines Nutzers auf ihrer Seite.

+ +

Die Ergebnisse werden für jeden Testdurchlauf nebeneinander dargestellt – oder vertikal angeordnet, wenn das Fenster schmaler ist:

+ +

Das Ergebnis jedes Testdurchlaufes wird mittels einer Tabelle und einer Tortengrafik zusammengefasst. Die Tabelle gruppiert die Ressourcen nach ihrem Typ und zeigt die einzelnen Gesamtgrößen und den Gesamtzeitverlauf, den das Laden benötigt, an. Die dazugehörige Tortengrafik zeigt die relativen Größen jeder Ressource an.

+ +

Um zur Liste der Netzwerkanfragen zurückzukehreren, klicken Sie auf die Schaltfläche „Zurück“ auf der linken Seite.

+ +

Wenn Sie auf einen Ausschnitt in der Tortengrafik klicken, werden Sie zum entsprechenden Testdurchlauf weitergeleitet und Filter wird nur dieser Ressoure-Typ dargestellt.

diff --git a/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html new file mode 100644 index 0000000000..ac8aca1c8a --- /dev/null +++ b/files/de/tools/page_inspector/how_to/event_listener_untersuchen/index.html @@ -0,0 +1,27 @@ +--- +title: Event Listener untersuchen +slug: Tools/Page_Inspector/How_to/Event_Listener_untersuchen +tags: + - Guide + - Inspector + - Werkzeuge +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +
{{ToolsSidebar}}

Seit Firefox 33 wird ein "ev" Symbol im HTML Panel neben Elementen angezeigt, an die Event Listener gebunden sind:

+ +

+ +

Wird auf das Symbol geklickt, wird ein Popup angezeigt, das alle Event Listener anzeigt, die an dieses Element gebunden sind:

+ +

Jede Zeile beinhaltet:

+ + + +

Beachte, dass auch jQuery Events untersucht werden können, nicht nur DOM Events.

+ +

 

diff --git a/files/de/tools/page_inspector/how_to/index.html b/files/de/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..54b596910d --- /dev/null +++ b/files/de/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: Wie handeln (How to) +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +
{{ToolsSidebar}}
+ +

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

diff --git a/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html new file mode 100644 index 0000000000..0318a735a4 --- /dev/null +++ b/files/de/tools/page_inspector/how_to/raster_layout_untersuchen/index.html @@ -0,0 +1,23 @@ +--- +title: 'CSS Raster Inspektor: Raster-Layout untersuchen' +slug: Tools/Page_Inspector/How_to/Raster_Layout_untersuchen +tags: + - Anleitung + - Inspektor + - Raster + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +
Neu in Firefox 52
+ +

Seit den Firefox 52 Entwickler-Tools ist es möglich, sich zur Untersuchung eines CSS-Rasters die Spalten und Zeilen eines Rasters anzeigen zu lassen.

+ +

Wenn ein Element mit display: grid als Raster-Layout definiert wird, wird ein kleines Rastersymbol sichtbar: . Klicke auf das Icon, um die Struktur des Rasters zu visualisieren:

+ +

Die Rasterlinien werden auch dann noch angezeigt, wenn andere Elemente ausgewählt werden. Auswirkung von Änderungen anderer Elemente auf das Raster können so leicht nachverfolgt werden.

+ +

{{EmbedYouTube("lzjIe-8WhiQ")}}

+ +

Besuche labs.jensimmons.com (Englisch) für viele interessante Raster-Ideen.

diff --git a/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html new file mode 100644 index 0000000000..0106b4d282 --- /dev/null +++ b/files/de/tools/page_inspector/how_to/schriftarten_bearbeitung/index.html @@ -0,0 +1,231 @@ +--- +title: Schriftarten Bearbeitung +slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +
{{ToolsSidebar}}
+ +
 Dieser Artikel bietet einen Überblick über die in den Firefox DevTools verfügbaren Schriftarten-Tools. Dieses Tool enthält mehrere nützliche Funktionen zum Anzeigen und Bearbeiten von Schriftarten, die auf ein im Browser geladenes Dokument angewendet werden, einschließlich der Überprüfung aller auf die Seite angewendeten Schriftarten und der präzisen Anpassung der Werte variabler Schriftachsen.{
+ +
{ToolsSidebar}}
+ +

This article provides a tour of the Font tools available in the Firefox DevTools. This tool contains several useful features for viewing and manipulating fonts applied to any document loaded in the browser including inspection of all fonts applied to the page, and precise adjustment of variable font axis values.

+ +
+

Note: The updated Font tools as shown in this article are available in Firefox 63 onwards; if you are using an older version of Firefox the tools will not look or behave quite the same, but they will be similar (most notably the Font Editor will not be available).

+
+ +

The Fonts tab

+ +

The Fonts tab is located on the right-hand side of the Page Inspector when it is docked to the bottom of the screen. When it is docked to the right or left sides of the screen, the Fonts tab appears beneath the HTML pane. To access it:

+ +
    +
  1. Open the Page Inspector.
    2. +
  2. Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.
    3. +
+ +

+ +

The Fonts tab has three major sections:

+ + + +

Fonts used

+ +

The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.

+ +

+ +

Fonts are considered "used" when there is text content in the inspected element that has the font applied to it. Empty elements will not have any fonts used and will display the message "No fonts were found for the current element."

+ +

Fonts will be included in this section for one of the following reasons:

+ + + +

Fonts Editor

+ +

Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.

+ +

+ +

For standard (static) fonts, you will be able to change the settings listed below

+ +

Size

+ +

The {{cssxref("font-size")}} for the inspected element.

+ +

+ +

This can be set using em, rem, %, px, vh, or vw units. You can select values using the slider or enter a numeric value directly into the text box.

+ +
+

Note: If you want to use a different unit such as pt for font-size or line-height, you can set the property value applied to the currently inspected element to use that unit via the rules view, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.

+
+ +

Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.

+ +

Example: If 1rem is equivalent to 10 pixels, when you change the unit of measurement from rem to px, 2rem becomes 20px.

+ +

Line height

+ +

The {{cssxref("line-height")}} of the inspected element.

+ +

+ +

This can be set using unitless, em, %, or px units. You can select values using the slider or enter a numeric value directly into the text box.

+ +

Changing the unit of measure changes the value relative to the font-size setting.

+ +

Example: If the font is 20 pixels high and the line-height is 1.5em, when you change the unit of measure from em to px, the value will become 30px.

+ +

Weight

+ +

The {{cssxref("font-weight")}} for the inspected element.

+ +

Font weight setting

+ +

You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100.

+ +
+

Note: For variable fonts (see below) that define a wght variation axis, this range is custom.

+
+ +

Italic

+ +

The {{cssxref("font-style")}} for the inspected element.

+ +

+ +

This setting toggles between italic and normal values for the font-style CSS property.

+ +
+

Note: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.

+
+ +

All fonts on page

+ +

The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.

+ +

+ +

The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.

+ +

Each font listed in this section shows you:

+ + + +

Variable font support in Firefox Developer Tools

+ +

Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.

+ +

What are variable fonts?

+ +

Variable Fonts, or OpenType Font Variations, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary.

+ +

Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by axes of variation (see Introducing the 'variation axis' for more information). For example, {{cssxref("font-weight")}} can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range).

+ +

There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer does implement a registered axis, its behavior must follow the defined behavior.

+ +

All variable font axes have a four-character axis tag. The CSS {{cssxref("font-variation-settings")}} property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using font-variation-settings, you could do something like this:

+ +
font-variation-settings: "wght" 350;
+ +

However, you should only use font-variation-settings as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).

+ +
+

Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade.

+
+ +

Here are the registered axes along with their corresponding CSS properties:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Axis TagCSS Property
"wght"{{cssxref("font-weight")}}
"wdth"{{cssxref("font-stretch")}}
"slnt" (slant){{cssxref("font-style")}}: oblique + angle
"ital"{{cssxref("font-style")}}: italic
"opsz" +

{{cssxref("font-optical-sizing")}}

+
+ +

Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer.

+ +
+

Note: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

+
+ +
+

Warning: In order to use variable fonts, you need to make sure that your operating system is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

+
+ +

Working with Variable fonts in the Font Editor

+ +

If the inspected element uses a variable font, the Fonts tab shows the axes that have been implemented for that particular font, providing control to alter the value of each one. This is very useful for quickly finding out what axes are available in a particular font — they can vary quite dramatically as font designers can implement basically anything they like.

+ +

+ +

You can adjust the axes individually or, if the font designer has included defined instances, you can select one from the "Instance" drop-down list and view the updates live on your page.

+ +

Here are a couple of examples of fonts with different axes defined:

+ +

+ +

In the following example, you can see that the font "Cheee Variable" includes settings for Yeast and Gravity. These are custom axes defined by the font designer.

+ +

+ +

The first image shows the font as it is used on the page with default settings. The second image shows the same font after selecting the "Hi Yeast Hi Gravity" variation.

+ +

+ + + +

Tips

+ +

Finally, here are a few tips for making effective use of the Fonts tab:

+ + diff --git a/files/de/tools/paint_flashing_tool/index.html b/files/de/tools/paint_flashing_tool/index.html new file mode 100644 index 0000000000..7fca9a3167 --- /dev/null +++ b/files/de/tools/paint_flashing_tool/index.html @@ -0,0 +1,94 @@ +--- +title: Paint Flashing Tool +slug: Tools/Paint_Flashing_Tool +translation_of: Tools/Paint_Flashing_Tool +--- +
{{ToolsSidebar}}

The paint flashing tool, when activated, highlights the part of a page that the browser needs to repaint in response to some input: for example, the user moving the mouse or scrolling. With the help of this tool you can figure out whether your website is causing the browser to repaint more than it needs to. Because repaints can be performance-intensive operations, eliminating unnecessary repaints can improve your website's responsiveness.

+ +

Repaints and responsiveness

+ +

When the browser renders a web page it parses the HTML and CSS, determines how to lay it out, and then paints it to actually display the content on the screen. Whenever an event happens that might change a visible part of the web page then the browser must repaint some portion of the page. For example, a repaint will be needed if the user scrolls the page or moves the mouse pointer over an element with a :hover pseudo-class that changes the element's style.

+ +

Repainting can be an expensive operation, so the browser tries to minimise the amount of repainting that it needs to do. It tries to work out which parts of the screen are "damaged" and repaint only those. The browser also splits its model of the page into layers that it expects will be updated independently of each other. Layers are painted independently and then composited, so a change in the appearance of one layer does not trigger a repaint in any other layers, and when only the relation of two layers changes (in an animation, for example) no repaints are required at all.

+ +

The choices made by a web developer can hinder the browser here, causing it to trigger more repaints, and for more of the screen, than necessary. This can then cause a site to be slow responding to user input (also known as "janky"). That's where the paint flashing tool helps: by showing you the areas that the browser repaints in response to an event, you can see whether it is repainting more than it needs to.

+ +

Using the paint flashing tool

+ +

There are two ways to switch on paint flashing:

+ + + +

+ + + +

+ +

Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:

+ +

In this example, there are two main sources of repaints:

+ + + +

To deactivate paint flashing, click the "Highlight painted area" icon in the Toolbox again, or type "paintflashing off" into the Developer Toolbar and press Enter.

+ +

Example: CSS transitions

+ +

One area where implementation choices can affect repaint efficiency is in CSS transitions. The example below shows two different ways to move an element using a CSS transition. The first way applies the transition to the element's margin-left, while the second way moves the element using the transform property.

+ +
<body>
+    <div id="container">
+      <div class="moving-box" id="moving-box-left-margin">Transition using margin-left</div>
+      <div class="moving-box" id="moving-box-transform">Transition using transform</div>
+    </div>
+</body>
+
+
+ +
#container {
+  border: 1px solid;
+}
+
+.moving-box {
+  height: 20%;
+  width:20%;
+  margin: 2%;
+  padding: 2%;
+  background-color: blue;
+  color: white;
+  font-size: 24px;
+}
+
+#moving-box-left-margin {
+  transition: margin-left 4s;
+}
+
+#moving-box-transform {
+  transition: transform 4s;
+}
+
+body:hover #moving-box-left-margin{
+  margin-left: 74%;
+}
+
+body:hover #moving-box-transform {
+  transform: translate(300%);
+}
+ +

To see the transition, move the mouse into the space below:

+ +

{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}

+ +

Now switch paint flashing on, and try it again. You should see that the margin-left version triggers a series of repaints as the element moves, while the transform version only causes repaints in the start and end positions.

+ +

Why? Well, when you use transform, the browser creates a separate layer for the element. So when the element is moved, all that's changed is the relation of the two layers to each other, which is handled in composition: neither layer needs a repaint.

+ +

In this case, with a simple style, the extra repaints don't make much of a difference. But if the style were computationally expensive to paint, they might. It's difficult to know what optimizations the browser will make to minimize repaints, and they are subject to change from one version to the next. So testing your website with the paint flashing tool helps ensure that it's still performing optimally.

diff --git a/files/de/tools/performance/index.html b/files/de/tools/performance/index.html new file mode 100644 index 0000000000..21a61a4805 --- /dev/null +++ b/files/de/tools/performance/index.html @@ -0,0 +1,96 @@ +--- +title: Performance +slug: Tools/Performance +translation_of: Tools/Performance +--- +
{{ToolsSidebar}}
+ +

Mit dem Leistungstool erhalten Sie Einblick in die allgemeine Reaktionsfähigkeit, JavaScript und Layoutleistung Ihrer Website. Mit dem Leistungstool erstellen Sie über einen bestimmten Zeitraum eine Aufnahme oder ein Profil Ihrer Website. Das Tool zeigt Ihnen dann einen Überblick über die Aktivitäten des Browsers zum Rendern Ihrer Website über das Profil und eine Grafik der Bildrate über dem Profil.

+ +

Sie erhalten vier Unterwerkzeuge, mit denen Sie Aspekte des Profils genauer untersuchen können:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Erste Schritte

+ +
+
+
+
UI Tour
+
+

Um sich im Performance-Tool zurechtzufinden, finden Sie hier eine kurze Einführung in die Benutzeroberfläche.

+
+
+
+ +
+
+
How to
+
Grundlagen: Öffnen Sie das Tool, erstellen, speichern, laden und konfigurieren Sie Aufnahmen
+
+
+
+ +
+

Komponenten des Performance-Tools

+ +
+
+
+
Bildrate
+
Understand your site's overall responsiveness.
+
Aufruf-Baum
+
Find bottlenecks in your site's JavaScript.
+
Allokationen
+
See the allocations made by your code over the course of the recording.
+
+
+ +
+
+
Wasserfall
+
Understand the work the browser's doing as the user interacts with your site.
+
Flammendiagramm
+
See which JavaScript functions are executing, and when, over the course of the recording.
+
 
+
+
+
+ +
+

Scenarios

+ +
+
+
+
Animieren von CSS-Eigenschaften
+
Uses the Waterfall to understand how the browser updates a page, and how animating different CSS properties can affect performance.
+
 
+
+
+ +
+
+
Intensives JavaScript
+
Uses the frame rate and Waterfall tools to highlight performance problems caused by long-running JavaScript, and how using workers can help in this situation.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..0b90f7db95 --- /dev/null +++ b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,38 @@ +--- +title: Debugging Firefox Desktop +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +

{{draft}}

+ +

{{ToolsSidebar}}

+ +

This guide explains how you can use the Firefox Developer Tools to debug a different instance of desktop Firefox running on the same machine. In this guide, the instance of Firefox being debugged is called the debuggee, and the instance of Firefox doing the debugging is called the debugger.

+ +

Enable remote debugging

+ +

First, you'll need to ensure that both debugger and debuggee have the "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" settings checked in the Developer Tools Settings. If you're using Firefox Developer Edition, they are checked by default.

+ +

+ +

You only need to do this once: the setting values persist across restarts.

+ +

Start the debugger server

+ +

Next, you need to start the debugger server in the debuggee.

+ +

Run the debuggee from the command line, passing it the --start-debugger-server option:

+ +
/path/to/firefox --start-debugger-server
+ +

Passed with no arguments, --start-debugger-server makes the debugger server listen on port 6000. To use a different port, pass the desired port number:

+ +
/path/to/firefox --start-debugger-server 1234
+ +

Note: in Windows, the start-debugger-server call will only have one dash:

+ +
firefox.exe -start-debugger-server 1234
+ +
+

Note: By default, and for security reasons, the devtools.debugger.force-local option is set. If you want to debug a Firefox instance from an external machine, you can change this option, but only do this on a trusted network or set a strong firewall rule to lock down which machines can access it.

+
diff --git a/files/de/tools/remote_debugging/firefox_for_android/index.html b/files/de/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..f21c00f2e2 --- /dev/null +++ b/files/de/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,136 @@ +--- +title: Externes Debugging mit Firefox for Android +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +
{{ToolsSidebar}}

Diese Anleitung erklärt, wie man remote debugging verwendet, um Code unter Firefox for Android über USB zu inspizieren und zu debuggen.

+ +

+ +

Diese Anleitung ist in zwei Teile aufgeteilt: im ersten Teil, "Voraussetzungen", werden die Voraussetzungen erklärt, welche aber nur einmal durchgeführt werden müssen. Im zweiten Teil, "Verbinden", wird erklärt, wie man zum Gerät verbindet. Dieser zweite Teil muss immer wieder durchgeführt werden.

+ +

Voraussetzungen

+ +

Um zu beginnen, benötigen Sie folgendes:

+ + + +

ADB Installation

+ +

Als nächstes müssen Sie das Mobilgerät und den Computer so einrichten, dass die beiden miteinander kommunizieren können. Dafür wird das adb Kommandozeilen-Programm verwendet.

+ +

Auf dem Android-Mobilgerät

+ + + +

Auf dem Computer/Laptop

+ + + +

Um dies zu testen, können Sie folgenden Befehl in  der Kommandozeile eingeben:

+ +
adb devices
+ +

Nun sehen Sie eine Ausgabe analog zu folgender:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(Die lange Hex-Zeichenkette wird verschieden sein.)

+ +

Wenn diese Ausgabe korrekt ist, wurde ADB korrekt installiert und ADB konnte das Mobilgerät korrekt erkennen.

+ +

Falls unter OSX die Zeile unterhalb von "List of devices attached" leer sein sollte, könnte es an EasyTether liegen:

+ +
+

ADB on Mac OS X stops recognizing the attached device after installing EasyTether driver. Use kextload/kextunload to unload from memory the EasyTetherUSBEthernet.kext kernel extension manually. It is in /System/Library/Extensions/

+ +

(Aus der Webseite von EasyTether)

+
+ +

Remote Debugging aktivieren

+ +

Als nächstes muss "Remote Debugging" auf dem Mobilgerät und dem Computer aktiviert werden.

+ +

Firefox for Android 24 und früher

+ +

Um "Remote Debugging" auf dem Mobilgerät zu aktivieren, muss der Wert der devtools.debugger.remote-enabled Einstellung auf true gesetzt werden.

+ +

Gehen Sie nach about:config in Firefox for Android, tippen Sie "devtools" ins Suchfeld und drücken Sie auf den Suchen-Button. Nun sehen Sie alle devtools-Einstellungen. Setzen Sie nun die devtools Einstellung debugger.remote-enabled auf true, indem Sie auf "Umschalten" klicken.

+ +

+ +

Firefox for Android 25 und später

+ +

Bei Firefox for Android 24 und später gibt es einen Menü-Eintrag, um "Remote Debugging" zu aktivieren. Öffnen Sie das Menü, wählen Sie "Einstellungen", dann "Entwicklerwerkzeuge" (auf einigen Android-Geräten müssen Sie auf "Mehr" klicken, um den Einstellungen-Eintrag zu sehen). Aktivieren Sie das Kontrollkästchen bei "Remote debugging":

+ +

+ +

Der Browser zeigt nun eine Notifikation an, dass die Portweiterleitung noch aktiviert werden muss. Dies werden wir später machen.

+ +

Auf dem Computer

+ +

Auf dem Computer wird "Remote debugging" über die Entwicklerwerkzeuge aktiviert. Öffnen Sie die Entwicklerwerkzeuge, klicken Sie auf die "Einstellungen" Schaltfläche in der Symbolleiste und aktivieren Sie das Kontrollkästchen neben "Externes Debugging aktivieren":

+ +

+ +
Wenn Sie Firefox 26 oder älter verwenden, müssen Sie danach Firefox neu starten. Nach diesem Schritt sehen Sie im "Web-Entwickler" Menü einen neuen Eintrag "Verbinden...":
+ +
 
+ +

+ +

Verbinden

+ +

Da Sie nun alles eingerichtet haben, können Sie den Computer über den "Verbinden..." Menü-Eintrag mit Ihrem Firefox for Android verbinden. Dazu verbinden Sie zuerst Ihr Mobilgerät mit Ihrem Computer, falls Sie dies nicht bereits gemacht haben.

+ +

Auf dem Computer

+ +

Öffnen Sie ein Kommandozeilen-Fenster und tippen Sie:

+ +
adb forward tcp:6000 tcp:6000
+ +

(Falls Sie den zu verwendeten Port auf dem Android-Mobilgerät geändert haben, müssen Sie hier den geänderten Wert eintragen.)

+ +

Für Firefox OS, tippen Sie:

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

Diesen Befehl müssen Sie immer ausführen, wenn das Mobilgerät über USB-Kabel an den Computer angeschlossen wird.

+ +

Gehen Sie nun ins "Web-Entwickler" Menü und wählen Sie "Verbinden...". Sie werden folgende Seite sehen:

+ +

Sofern Sie den Android-Port nicht geändert haben, wählen Sie hier 6000 und drücken auf "Verbinden".

+ +

Auf dem Android-Mobilgerät

+ +

Nun sehen Sie auf Ihrem Mobilgerät folgende Meldung, da sich nun Firefox mit Ihrem Mobilgerät verbinden möchte.

+ +

Drücken Sie auf "OK". Firefox auf Ihrem Computer wartet einige Sekunden, damit Sie genug Zeit haben, auf dem Mobilgerät die Meldung zu quittieren. Wenn die Zeit nicht ausreicht, können Sie nochmals auf "Verbinden" klicken.

+ +

Auf dem Computer

+ +

Als nächsten sehen Sie auf Ihrem Computer folgende Anzeige:

+ +

Nun werden Sie gefragt, ob Sie den Code in einem Browser Tab oder den Browser selbst debuggen möchten.

+ + + +

Wir entscheiden uns für das Anfügen des Debuggers an die mozilla.org Webseite. Die Entwicklerwerkzeuge werden in einem eigenen Fenster geöffnet und werden an die Webseite innerhalb von Firefox for Android angehängt:

+ +

Die Entwicklerwerkzeuge unterscheiden nicht zwischen lokalem Inhalt und Inhalt auf anderen Geräten. Sie funktionieren in beiden Fällen identisch.

diff --git a/files/de/tools/remote_debugging/index.html b/files/de/tools/remote_debugging/index.html new file mode 100644 index 0000000000..5253b47cff --- /dev/null +++ b/files/de/tools/remote_debugging/index.html @@ -0,0 +1,44 @@ +--- +title: Remote Debugging +slug: Tools/Remote_Debugging +tags: + - Debugging + - Tools +translation_of: Tools/Remote_Debugging +--- +
{{ToolsSidebar}}

Du kannst die Firefox Developer Tools dazu nutzen Websites und Webapps zu debuggen, die in anderen Browsern oder Umgebungen laufen. Andere Browser können auf dem selben Gerät sein oder auf einem anderen Gerät, wie zum Beispiel auf einem via USB verbundenen Gerät.

+ +

Die detaillierten Verbindungsanleitungen sind umgebungsspezifisch, d.h. je nach Gerät und Umgebung ist eine andere Anleitung verfügbar.

+ +

Gecko-basierte Umgebungen

+ +

In erster Linie kannst du die Developer Tools mit gecko-basierten Umgebungen, wie zum Beispiel Firefox Desktop, Firefox für Android, Firefox OS oder Thunderbird, verbinden.

+ + + +

Andere Umgebungen

+ +

Das experimentelle Valence-AddOn kann helfen Websites anderer, nicht gecko-basierter, Umgebungen zu verbinden, dazu gehören beispielsweise Google Chrome Desktop, Chrome für Android oder Safari für iOS.

+ +

Valence ist standardmäßig in die Firefox Developer Edition integriert.

+ + diff --git a/files/de/tools/scratchpad/index.html b/files/de/tools/scratchpad/index.html new file mode 100644 index 0000000000..c17554d944 --- /dev/null +++ b/files/de/tools/scratchpad/index.html @@ -0,0 +1,85 @@ +--- +title: JavaScript-Umgebung +slug: Tools/Scratchpad +tags: + - Tools +translation_of: Archive/Tools/Scratchpad +--- +
{{ToolsSidebar}}
+ +

Das Werkzeug „JavaScript-Umgebung“ bietet eine Umgebung zum Experimentieren mit JavaScript-Quelltext. Sie können Quelltext schreiben und testen, der mit den Inhalten der Webseite interagiert und dann zu Ihren gewohnten Entwicklungwerkzeugen wechseln, wo Sie Ihre Arbeit verfeinern und fertigstellen.

+ +

Anders als die Web-Konsole, die nur eine Zeile Quelltext auf einmal interpretieren soll, können Sie mit der JavaScript-Umgebung größere Blöcke JavaScript-Quelltext bearbeiten und diese dann auf vielfältige Weise ausführen, je nachdem, wie Sie das Ergebnis verwenden möchten.

+ +

{{EmbedYouTube("lvQf2u3rmkw")}}

+ +

Verwenden der JavaScript-Umgebung

+ +

Um ein Fenster der JavaScript-Umgebung zu öffnen, drücken Sie Umschalt+F4 oder öffnen Sie das Menü „Web-Entwickler“ (dieses ist unter Mac OS X und Linux ein Untermenü des Menüs „Extras“) und wählen Sie „JavaScript-Umgebung“. Dies öffnet ein Editorfenster der JavaScript-Umgebung mit einem Kommentar, der einige kurze Hinweise zur Verwendung der JavaScript-Umgebung liefert. Von dort aus können Sie direkt JavaScript-Quelltext eingeben und ausprobieren.

+ +

Das Fenster der JavaScript-Umgebung sieht ungefähr so aus (unter Mac OS X ist die Menüleiste am oberen Bildschirmrand):

+ +

German Scratchpad screenshot

+ +

Unter Verwenden des Quelltext-Editors finden Sie eine Dokumentation zum Editor selbst, einschließlich nützlicher Tastaturkürzel.

+ +

Im Datei-Menü finden Sie Optionen zum Speichern und Laden von Ausschnitten von JavaScript-Quelltext, so dass Sie Quelltext bei Gefallen später wiederverwenden können.

+ +

Ausführen Ihres Quelltexts

+ +

Sobald Sie Ihren Quelltext geschrieben haben, wählen Sie den Quelltext aus, den Sie ausführen möchten. Wenn Sie nichts auswählen, wird der gesamte Quelltext im Fenster ausgeführt. Klicken Sie dann mit der rechten Maustaste (oder verwenden Sie das Menü „Ausführen“ in der Menüleiste) und wählen Sie, wie Ihr Quelltext ausgewählt werden soll. Es gibt vier Möglichkeiten zur Ausführung.

+ +

Ausführen

+ +

Wenn Sie die Option „Ausführen“ wählen, wird der gewählte Quelltext ausgeführt. Dies können Sie verwenden, wenn Sie eine Funktion oder Quelltext ausführen möchten, der den Inhalt Ihrer Seite verändert, ohne dass Sie das Ergebnis sehen müssen.

+ +

Untersuchen

+ +

Mit der Option „Untersuchen“ wird der Quelltext ebenso ausgeführt wie bei der Option „Ausführen“; anschließend wird allerdings ein Objektinspektor geöffnet, mit dem Sie den Ergebniswert untersuchen können.

+ +

Wenn Sie beispielsweise diesen Quelltext eingeben:

+ +
window
+
+ +

und dann „Untersuchen“ wählen, öffnet sich der Objektinspektor und zeigt in etwa folgendes :

+ +

German Scratchpad inspection screenshot

+ +

 

+ +

Anzeigen

+ +

Die Option „Anzeigen“ führt den gewählen Quelltext aus und fügt das Ergebnis direkt als Kommentar in das Editor-Fenster Ihrer JavaScript-Umgebung ein. Dies ist ein bequemer Weg, um während Ihrer Arbeit ein fortlaufendes Protokoll Ihrer Testergebnisse zu erstellen. Zur Not können Sie dies auch als Taschenrechner verwenden, aber wenn Sie schon keinen Taschenrechnerprogramm haben, haben Sie vielleicht größere Probleme.

+ +

Neu laden und ausführen

+ +

Die Option „Neu laden und ausführen“ lädt erst die Seite neu und fürt dann den Quelltext aus, wenn das „load“-Ereignis der Seite ausgelöst wird. Dies ist hilfreich, wenn der Quelltext in einer sauberen Umgebung ausgeführt werden soll.

+ +

Wann ist es sinnvoll, Scratchpad zu benutzen?

+ +

Es gibt viele Möglichkeiten, die JavaScript-Umgebung sinnvoll einzusetzen. In diesem Abschnitt finden Sie einige davon.

+ +

Testen von neuem Quelltext

+ +

Die JavaScript-Umgebung ist besonders nützlich, um neuen Quelltext in einer laufenden Browser-Umgebung zu testen; Sie können den Quelltext, den Sie debuggen, in die JavaScript-Umgebung kopieren, ihn ausführen und dann anpassen, bis er funktioniert. Sobald er funktioniert, kopieren Sie ihn wieder in die Hauptdatei Ihres Quelltexts und schon sind Sie fertig. Oftmals können Sie Ihren Quelltext schreiben, debuggen und testen, ohne jemals die Seite laden zu müssen.

+ +

Wiederverwendbare Quelltext-Ausschnitte

+ +

Die Menüleiste der JavaScript-Umgebung bietet Befehle zum Speichern und Laden von JavaScript-Quelltext. Dies kann genutzt werden, um Teile von JavaScript-Quelltext aufzubewahren, den Sie häufig verwenden. Wenn Sie beispielsweise an einer Website arbeiten, die Daten mit AJAX-Anfragen lädt, können Sie Ausschnitte aufbewahren, die diese Ladeoperationen ausführen, um die Daten zu testen oder zu verifizieren. Ebenso können Sie hilfreiche allgemeine Debugging-Funktionen aufbewahren, wie solche, die bestimmte Arten von Informationen über das DOM liefern.

+ +

Umgebung der JavaScript-Umgebung

+ +

Quelltext, den Sie in der JavaScript-Umgebung ausführen, wird in der globalen Umgebung des zum Zeitpunkt der Ausführung gewählten Tabs ausgeführt. Variablen, die Sie außerhalb einer Funktion deklarieren, werden dem globalen Objekt für diesen Tab hinzugefügt.

+ +

Verwenden der JavaScript-Umgebung zum Zugriff auf Firefox-interne Funktionen

+ +

Wenn Sie an Firefox selbst arbeiten oder Add-ons entwickeln, finden Sie es möglicherweise hilfreich, über die JavaScript-Umgebung auf alle internen Funktionen des Browsers zuzugreifen. Um dies zu tun, müssen Sie in about:config die Einstellung devtools.chrome.enabled auf true setzen. Sobald dies geschehen ist, hat das Menü der Umgebung eine Option „Browser“; sobald Sie diese aktiviert haben, ist Ihre Umgebung nicht mehr nur der Inhalt der Seite, sondern der gesamte Browser.

+ +

Tastaturkürzel

+ +

{{ Page ("de/docs/tools/Keyboard_shortcuts", "scratchpad") }}

+ +

Tastaturkürzel des Quelltext-Editors

+ +

{{ Page ("de/docs/tools/Keyboard_shortcuts", "source-editor") }}

diff --git a/files/de/tools/seiten_inspektor/index.html b/files/de/tools/seiten_inspektor/index.html new file mode 100644 index 0000000000..f44fe105ce --- /dev/null +++ b/files/de/tools/seiten_inspektor/index.html @@ -0,0 +1,109 @@ +--- +title: Seiteninspektor +slug: Tools/Seiten_Inspektor +translation_of: Tools/Page_Inspector +--- +
{{ToolsSidebar}}

{{ fx_minversion_header("10") }}

+ +

Der Seiteninspektor ist ein handliches Werkzeug zur Untersuchung von Stuktur und Gestaltung einer Seite.

+ +

Den Inspektor öffnen

+ +

Es gibt verschiedene Wege, den Inspektor zu öffnen:

+ + + +

Der Inspektor erscheint in der Werkzeuge-Box am unteren Rand des Browser-Fensters.

+ +

Wenn Sie den Inspektor durch "Element untersuchen" aufgerufen haben, ist das gewählte Element bereits im Inspektor ausgewählt und er verhält sich, wie im Abschnitt "Ein Element auswählen" beschrieben.

+ +

Andernfalls wird das Element unter Ihrem Mauszeiger mit einem gestrichelten Rahmen und einer Notiz mit dem Namen des HTML-Elements angezeigt. Wenn Sie die Maus über die Webseite bewegen, ändert sich das hervorgehobene Element. Gleichzeitig wird seine HTML-Defintion im Kontext der Seite linken Bereich des Inspektors angezeigt. Ab Firefox 30 werden ebenfalls Rasterlinien für das Element und sein Box-Modell dargestellt.

+ +

Wenn Sie auf ein Element klicken, wird es ausgewählt und der Inspektor verhält sich, wie im Abschnitt "Ein Element auswählen" beschrieben.

+ +

Ein Element auswählen

+ +

Wenn ein Element ausgewählt ist, wird seine HTML-Definition im HTML-Abschntt im linken Teil und die Stil-Information im rechten CSS-Abschnitt des Inspektors angezeigt.Das Verhalten beim Auswählen von Elementen hat sich in Firefox 29 grundlegend geändert. Ab Firefox 30 zeigt der Inspektor das Box-Modell von Elementen in der Webseite.

+ +

Vor Firefox 29

+ +

Sobald Sie ein Element durch Klicken auf der Webseite auswählen, wird die Anzeige im Inspektor auf dieses Element fest gelegt, das heißt, Sie können die Maus über die Seite bewegen ohne dass der Inspektor zu einem anderen Element wechselt.

+ +

In der Notiz des Elements erscheint auf der linken und der rechten Seite eine Schaltfläche. Die Schaltfläche auf der linken Seite hebt die Festlegung auf das Element auf, so dass Sie neue Elemente auswählen können. Die Schaltfläche auf der rechten Seite öffnet ein Kontextmenü für das Element.

+ +

+ +

Firefox 29

+ +

In Firefox 29 wird der gestrichelte Rahmen um ein Element in der Seite sowie die Notiz nicht mehr angezeigt, wenn ein Element ausgewählt wird. Der Inspektor ist auch nicht mehr auf das ausgewählte Element festelegt: Wenn Sie die Maus im HTML-Teil des Inspektors bewegen, wird das entsprechende Element auf der Webseite hervorgehoben. Um ein anderes Element auf der Webseite auszuwählen, klicken Sie auf die Schaltfläche "Ein Element der Seite auswählen" in der Werkzeugleiste der Werkzeuge-Box:

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

Firefox 30 und neuer

+ +

In Firefox 30 und neueren Version ist das Verhalten identisch zu Firefox 29, zusätzlich zeigt der Inspektor das Box-Modell und Rastlinien für das ausgewählte Element auf der Webseite.

+ +

{{EmbedYouTube("X1aGlwmUF94")}}

+ +

Das Element-Kontext-Menü

+ +

Sie können eine Reihe von üblichen Aufgaben mit Hilfe des Kontext-Menüs erledigen. Um das Kontext-Menü zu öffnen, klicken Sie mit der rechten Maustaste auf ein Element im <HTML-Bereich> des Inspektors.

+ +

+ +

Das Kontext-Menü bietet Ihnen folgende Möglichkeiten:

+ + + +

Grafik als Data-URI kopieren

+ +
+

Diese Funktion ist neu in Firefox 29.

+
+ +

In Firefox 29 und neuer enthält das Kontext-Menü einen Eintrag, der das ausgewählte Bild als Data-URI in die Zwischenablage kopiert.

+ +

+ +

HTML bearbeiten

+ +

Um das äußere HTML eines Elements zu bearbeiten, klicken Sie im Kontext-Menü auf "HTML bearbeiten". Es erscheint ein Textfeld im HTML-Bereich:

+ +

+ +

Sie können hier HTML beliebig bearbeiten: Ändern des Element-Elements, Ändern von Element-Eigenschaften oder Hinzufügen von neuen. Sobald sie außerhalb des Textfeldes klicken werden die Änderungen wirksam.

+ +

HTML-Bereich

+ +

+ +

Der HTML-Bereich zeigt das HTML der Webseite als Baum mit zusammenklappbaren Knoten. Das ausgewählte Element wird durch einen grauen Hintergrund hervorgehoben.

+ +

Sie können das HTML – Elemente, Attribute und Inhalt – in diesem Bereich direkt editieren: Klicken Sie doppelt auf das Element, nehmen Sie die gewünschten Änderungen vor und drücken Sie anschließend "Enter", um die Änderungen sofort anzuwenden.

+ +

Wenn Sie mit der rechten Maustaste auf ein Element klicken, erscheint das Element-Kontext-Menü.

+ +

HTML-Bereich Werkzeugleiste

+ +

Über dem HTML-Bereich befindet sich eine Werkzeugleiste, bestehend aus drei Teilen:

+ +
+

In Firefox 29 und neuer wurde die Schaltfläche "Ein Element der Seite auswählen" in die Werkzeuge-Box verschoben.

+
+ +

Ein Element der Seite auswählen: Wenn Sie diese Schaltfläche anklicken können Sie ein Element auf der Webseite auswählen.
+ HTML-Brotkrümelnavigation: Sie zeigt die komplette Hierarchie im aktuellen Zweig des ausgewählten Elements. Klicken und halten Sie auf ein Element in dieser Leiste, um ein Kontextmenü zu öffnen, in dem sie ein Geschwisterelement des ausgewählten Eintrags auswählen können. Klicken sie auf die Pfeile am Anfang und Ende der Leiste, um seitlich zu scrollen, falls sie größer als der zur Verfügung stehende Platz sein sollte.
+ HTML-Element-Suche:

+ +

 

diff --git a/files/de/tools/seiten_inspektor/tastenkombinationen/index.html b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html new file mode 100644 index 0000000000..a77ee75e45 --- /dev/null +++ b/files/de/tools/seiten_inspektor/tastenkombinationen/index.html @@ -0,0 +1,12 @@ +--- +title: Tastenkombinationen +slug: Tools/Seiten_Inspektor/Tastenkombinationen +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Global shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/de/tools/shader-editor/index.html b/files/de/tools/shader-editor/index.html new file mode 100644 index 0000000000..baf56c7597 --- /dev/null +++ b/files/de/tools/shader-editor/index.html @@ -0,0 +1,57 @@ +--- +title: Shader Editor +slug: Tools/Shader-Editor +translation_of: Tools/Shader_Editor +--- +
{{ToolsSidebar}}

Der Shader Editor ermöglicht es, Vertex- and Fragment-Shader unter Verwendung von WebGL zu editieren.

+ +

{{EmbedYouTube("-pEZXNuFFWI")}}

+ +

WebGL ist eine JavaScript API um 3D und 2D Grafiken ohne zusätzliche PlugIns im Browser zu rendern. WebGL verfügt 2 Programme ("shader") auf der betreffenden Ebene der OpenGL rendering pipeline arbeiten:  ein vertex shader, der die Koordinaten für jeden Vertex liefert und den fragment shader, der Farbwerte jedes einzelnen pixels liefert, der gezeichnet werden soll.
+
+ Diese Programme ("Shader") wurden in der OpenGL Shading Language, or GLSL geschrieben. WebGL kann auf unterschiedliche Arten in Webseiten eingebunden werden: als hardcodierter Text in einem Java Skript Quellcode , als externe Quelldatei über das <script>-Tag oder als Klartext direkt vom Server abgerufen werden.Der auf der Webseite enthaltene Java Script code wird mittels einer WebGL API direkt auf der GPU des jeweiligen Gerät (Device) ausgeführt.

+ +

Mit dem Shader-Editor kann der Quellcode von Vertex- und Fragment-Shadern untersucht und bearbeiten werden.

+ +

Hier ein weiterer Screencast, der zeigt wie der Schader-Editor für complexe Applikationen genutzt werden kann (in diesem Fall, der Unreal Engine Demo):

+ +

{{EmbedYouTube("YBErisxQkPQ")}}

+ +

Öffnen des Shader-Editors

+ +

Standartmäßig ist der Shader-Editor deaktiviert. Dieser kann in den Toolbox settings unter "Default Firefox Developer Tools" aktiviert werden.  Der Shader Editor ist nun in der Toolbar verfügbar und kann mittels Mausklick auf Shader-Editor geöffnet werden.
+
+ Zunächst erscheint ein leeres Fenster mit einem RELOAD-Button um die Seite neu zu laden:

+ +

+ +

Der RELOAD der Seite erzeugt einen WebGL Kontext der das Programm lädt.
+ Der folgende Screenshot zeigt eine Demo der Unreal Engine.

+ +

Das Fenster ist in drei Bereiche unterteilt: links eine Auflistung der GLSL Programme, in der Mitte der Vertex-Shader mit dem aktuell selektierten Programm und der Fragment-Shader des aktuell selektierten Programms im rechten Fenster.

+ +

+ +

Programme verwalten

+ +

Im linken Fenster werden die aktuellen Programme des WebGL-Kontext aufgelistet. Fährt man mit dem Cursor über einen der Listeneinträge, wird die betreffende Geometrie in rot hervor gehoben:

+ +

Mit einen Mausklick auf das Auge-Icon links der Programmeinträge, wird das betreffende Programm deaktiviert. Das ist praktisch bei Fokussierung eines bestimmten Shaders oder zum auffinden überlappender Geometrien:

+ +

Durch Anklicken eines Programmeintrags erscheint dessen Vertex- und Fragment Shader in den beiden angrenzenden Fenstern und kann bearbeitet werden.

+ +

Shader bearbeiten

+ +

Das mittlere und rechte Fenster zeigen den Vertex- und den Fragment-Shader des aktuell ausgewählten Programms.
+
+ Sie können die Programme bearbeiten und die Ergebnisse ansehen nachdem der WebGL Kontext neu gezeichnet hat (beispielsweise im nächsten Animations-Frame). Zum Beispiel nach dem modifizieren der Farbwerte:

+ +

Der Editor markiert ("highlighted") Fehler im Quellcode:

+ +

Wenn Sie die X-Icons neben den Zeilen mit der Maus überfahren ("hovern") werden Ihnen detailierte Informationen zum jeweiligen Problem angezeigt:

+ +

+ +

 

+ +

 

diff --git a/files/de/tools/storage_inspector/cache_storage/index.html b/files/de/tools/storage_inspector/cache_storage/index.html new file mode 100644 index 0000000000..b8411a08dd --- /dev/null +++ b/files/de/tools/storage_inspector/cache_storage/index.html @@ -0,0 +1,15 @@ +--- +title: Cache Storage +slug: Tools/Storage_Inspector/Cache_Storage +translation_of: Tools/Storage_Inspector/Cache_Storage +--- +
{{ToolsSidebar}}
+ +

Under the Cache Storage type within the Storage Inspector you can see the contents of any DOM caches created using the Cache API. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:

+ + + +

diff --git a/files/de/tools/storage_inspector/cookies/index.html b/files/de/tools/storage_inspector/cookies/index.html new file mode 100644 index 0000000000..9ed14c7fd6 --- /dev/null +++ b/files/de/tools/storage_inspector/cookies/index.html @@ -0,0 +1,43 @@ +--- +title: Cookies +slug: Tools/Storage_Inspector/Cookies +translation_of: Tools/Storage_Inspector/Cookies +--- +

{{ToolsSidebar}}

+ +

Wenn Sie im Speicherbaum eine Herkunft innerhalb des Cookie-Speichertyps auswählen, werden alle für diese Herkunft vorhandenen Cookies in einer Tabelle aufgelistet. Die Cookie-Tabelle enthält die folgenden Spalten:

+ + + +
+

Hinweis: Einige der Spalten werden standardmäßig nicht angezeigt. Um die Spaltenanzeige zu ändern, klicken Sie mit der rechten Maustaste auf die vorhandenen Tabellenüberschriften und verwenden Sie das resultierende Kontextmenü, um die Spalten anzuzeigen / auszublenden.

+
+ +

Sie können Cookies bearbeiten, indem Sie auf Zellen im Tabellen-Widget doppelklicken und die darin enthaltenen Werte bearbeiten. Fügen Sie neue Cookies hinzu, indem Sie auf die Schaltfläche "Plus" (+) klicken und dann die resultierende neue Zeile auf den gewünschten Wert bearbeiten.

+ +

Kontextmenü

+ +

Das Kontextmenü für jeden Cookie beinhaltet die folgenden Befehle:

+ + + +

diff --git a/files/de/tools/storage_inspector/index.html b/files/de/tools/storage_inspector/index.html new file mode 100644 index 0000000000..475f4c28d2 --- /dev/null +++ b/files/de/tools/storage_inspector/index.html @@ -0,0 +1,200 @@ +--- +title: Storage Inspector +slug: Tools/Storage_Inspector +tags: + - Entwicklerwerkzeug + - Sessionspeicher + - Speicher + - Werkzeuge + - lokaler Speicher +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

Der Web-Speicher-Inspektor ermöglicht dir die Einsicht der verschiedenen Speicher-Typen, welche Websites zur Nutzung zur verfügung stehen. Zur Zeit besteht die Möglichkeit des auslesens folgender Speicher-Typen:

+ + + +

Vorerst ermöglicht der Web-Speicher-Inspektor nur Lesezugriff auf die einzelnen Speicher-Typen. Aber wir arbeiten daran in einer zukünftigen Version auch den Schreibzugriff zu ermöglichen, damit es möglich wird, die einzelnen Speicher Inhalte auch zu verändern.

+ +

Den Web-Speicher-Inspektor öffnen

+ +

Du kannst den Web-Speicher-Inspektor durch Auswählen von "Web-Speicher-Inspektor" im Entwickler-Untermenü im Firefox Hauptmenü (oder im Web-Entwickler-Menü, wenn die Menü-Zeile angezeigt wird oder bei Mac OS X) oder durch Drücken von Shift + F9 auf der Tastatur.

+ +

Die Entwickler-Box wird am Fuß des Browser-Fensters erscheinen, mit dem Web-Speicher-Inspektor aktiviert. In der Box heißt er nur "Web-Speicher".

+ +

+ +

Web-Speicher-Inspektor Benutzeroberfläche

+ +

Die Web-Speicher-Inspektor-Benutzeroberfläche ist in drei Hauptkomponenten unterteilt:

+ + + +

+ +

Speicherbaum

+ +

Der Speicherbaum zeigt alle Speichertypen, die der Web-Speicher-Inspektor anzeigen kann:

+ +

+ +

Unter jedem Type werden die Objekte nach ihrer Herkunft organisiert. Bei Cookies unterscheidet das Protokoll nicht die Herkunft. Für Indexed DB oder lokalen Speicher ist die Herkunft eine Kombination aus Protokoll und Hostnamen. Zum Beisiel sind "http://mozilla.org" und "https://mozilla.org" zwei verschiedene Herkünfte, somit kann lokaler speicher nicht zwischen ihnen ausgetauscht werden.

+ +

Unter "Cache-Speicher" sind die Objekte erst nach Herkunft und dann nach Name des Caches gespeichert:

+ +

+ +

IndexedDB sind nach Herkunft, dann nach Datenbank-Name und dann nach Objekt-Speicher-Name abgelegt:

+ +

+ +

Bei Cookies, lokalem Speicher und Sitzungs-Speicher gibt es nur eine Hierarchie-Ebene also sind die Objekte direkt unter der Herkunft aufgelistet:

+ +

+ +

Du kannst auf jeden Eintrag klicken, um die Untereinträge auf- oder zuzuklappen.

+ +

Klicken auf einen Untereintrag stellt detaillierte Informationen in der tabellarischen Ansicht rechts davon dar.Zum Beispiel führt das Klicken auf einen Eintrag im Cookies-Abschnitt dazu, dass alle Cookies von der ausgewählten Domain gezeigt werden.

+ +

Tabellarische Übersicht

+ +

Die tabellarische Übersicht ist der Platz, wo alle Einträge entsprechend zu dem gewählten Eintrag aufgelistet werden (egal ob Herkunft oder Datenbank).

+ +

Alle Spalten in der tabellarischen Übersicht sind skalierbar. Du kannst Spalten zeigen oder verstecken durch Klicken auf den Tabellenkopf und Auswählen welche Spalten du sehen möchtest:

+ +

+ +

Suche

+ +

Es gibt eine Suchzeile am Kopf der tabellarischen Übersicht:

+ +

+ +

Diese filtert die Tabelle damit nur noch Einträge die den Suchbegriff enthalten angezeigt werden. Einträge passen zum Suchbegriff, wenn in einem beliebigen Feld (auch den ausgeblendeten) der Begriff enthalten ist.

+ +

Ab Firefox 50 aufwärts kann man  Strg + F (Cmd + F beim Mac) drücken, um in die Suchbox zu springen.

+ +

Hinzufügen und aktualisieren des Speichers

+ +

Bei neueren Versionen des Firefox hast du Knöpfe verfügbar, um die aktuelle Ansicht des betrachteten Speichers zu aktualisieren und wo möglich einen eigenen Eintrag hinzuzufügen (du kannst bei IndexedDB oder Cache keine eigenen Einträge vornehmen):

+ +

+ + + +

Wenn du eine Reihe in der Tabelle auswählst, werden in der Sidebar Details über diese Zeile angezeigt. Wenn ein Cookie ausgewählt wird, werden alle Details dieses Cookies angezeigt.

+ +

Die Sidebar kann den Wert eines Cookies, lokalen Speicherobjekts oder eines Indexed DB Eintrags parsen und in einen aussagekräftiges Objekt erzeugen anstatt nur eines Strings. Zum Beispiel:

+ + + +

Die gezeigten Werte können mit Hilfe des Suchfeldes im Kopf der Sidebar gefiltert werden.

+ +

Cache Speicher

+ +

Unter dem Eintrag "Cache Storage" kannst du den Inhalt jedes DOM Caches sehen, der unter Verwendung von Cache API erzeugt wurde. Wenn du einen Cache auswählst, siehst du eine Liste der Einträge die er enthält. Für jeden Eintrag siehst du:

+ + + +

+ +

Cookies (Kekse ;-)

+ +

Wenn du eine Herkunft aus dem "Cookie Storage" Eintrag im Speicherbaum auswählst, werden alle Cookies die für diese Herkunft gespeichert sind im Tabellen-Fenster angezeigt. Die Cookies-Tabelle hat folgende Spalten:

+ + + +
+

Bitte beachten: Einige Spalten werden standardmäßig nicht gezeigt — um die Spaltendarstellung zu ändern, Rechts/Ctrl-Klick auf den angezeigten Tabellenkopf und das erscheinende Menü benutzen, um die Spalten ein- und auszuschalten.

+
+ +

Du kann die Cookies editieren, wenn du in der Tabellen-Ansicht doppelklickst und die angezeigten Werte veränderst. Neue Cookies können mit dem "Plus" (+) Knopf und dem Editieren der erscheinenden neuen Zeile erstellt werden.

+ +

Du kannst außerdem Cookies löschen, indem du das Menü in jeder Zeile benutzt:

+ +

+ +

Local storage / Session storage

+ +

Wenn ein Eintrag aus dem local Storage oder dem session storage ausgewählt wird, zeigt die Tabelle alle Einträge, die mit der entsprechenden Session und local oder session storage zu tun haben.

+ +

Du kannst die Einträge im local und session storage bearbeiten, wenn du in die entsprechende Zelle im Tabellen-Widget doppelklickst und die Werte editierst:

+ +

{{EmbedYouTube("UKLgBBUi11c")}}

+ +

Außerdem kannst die local und session storage Einträge mit Hilfe des Kontext-Menüs löschen:

+ +

+ +

Schließlich kannst du auch Einträge durch drücken des "Plus" (+) Knopfes hinzufügen und dann die erzeugte Zeile mit Wunschwerten füllen.

+ +

IndexedDB

+ +

Wenn du einen Ursprung innerhalb des Speichertyps IndexedDB in der Speicherstruktur auswählst, werden in der Tabelle die Details aller für diesen Ursprung vorhandenen Datenbanken aufgelistet.

+ +
+

Hinweis: Die in einer IndexedDB-Datenbank angezeigten Daten sind eine Momentaufnahme der Daten, wie sie beim Öffnen des Web-Speicher-Werkzeugs vorhanden waren.

+
+ +

Datenbanken haben folgende Details:

+ + + +

Wenn eine IndexedDB-Datenbank in der Speicherstruktur ausgewählt ist, werden Details zu allen Objektspeichern in der Tabelle aufgelistet. Jeder Objektspeicher enthält die folgenden Details:

+ + + +

+ +

Wenn ein Objektspeicher in der Speicherstruktur ausgewählt wird, werden alle Einträge in dem Objektspeicher in der Tabelle aufgelistet.

+ +

Du kannst eine Indexed DB Datenbank löschen, indem du den Eintrag aus dem Kontextmenü in der Speicherstruktur benutzt:

+ +

+ +

Wenn eine Datenbank nicht gelöscht werden kann (meistens, weil es noch aktive Verbindungen zur Datenbank gibt), wird eine Warnmeldung im Speicher-Inspektor angezeigt:

+ +

Du kannst das Kontext-Menü im Tabellen-Editor benutzen, um alle Einträge in einem Objektspeicher zu löschen oder nur einzelne:

+ +

diff --git a/files/de/tools/storage_inspector/indexeddb/index.html b/files/de/tools/storage_inspector/indexeddb/index.html new file mode 100644 index 0000000000..2ede236480 --- /dev/null +++ b/files/de/tools/storage_inspector/indexeddb/index.html @@ -0,0 +1,45 @@ +--- +title: IndexedDB +slug: Tools/Storage_Inspector/IndexedDB +translation_of: Tools/Storage_Inspector/IndexedDB +--- +
{{ToolsSidebar}}
+ +

When you select an origin inside the Indexed DB storage type in the storage tree of the Storage Inspector, a table lists the details of all the databases present for that origin.

+ +
+

Note: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.

+
+ +

Databases have the following details:

+ + + +

When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:

+ + + +

+ +

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

+ +

You can delete an IndexedDB database using the context menu in the storage tree:

+ +

+ +

If the database cannot be deleted (most commonly because there are still active connections to the database), a warning message will be displayed in the Storage Inspector:

+ +

You can use the context menu in the table widget to delete all items in an object store, or a particular item:

+ +

diff --git a/files/de/tools/storage_inspector/local_storage_session_storage/index.html b/files/de/tools/storage_inspector/local_storage_session_storage/index.html new file mode 100644 index 0000000000..464345892a --- /dev/null +++ b/files/de/tools/storage_inspector/local_storage_session_storage/index.html @@ -0,0 +1,20 @@ +--- +title: Local Storage / Session Storage +slug: Tools/Storage_Inspector/Local_Storage_Session_Storage +translation_of: Tools/Storage_Inspector/Local_Storage_Session_Storage +--- +
{{ToolsSidebar}}
+ +

When an origin corresponding to local storage or session storage is selected within the Storage Inspector, the names and values of all the items corresponding to local storage or session storage will be listed in a table.

+ +

You can edit local and session storage items by double-clicking inside cells in the Table Widget and editing the values they contain:

+ +

{{EmbedYouTube("UKLgBBUi11c")}}

+ +

You can delete local storage and session storage entries using the context menu:

+ +

+ +

You can also delete local and session storage entries by selecting an item and pressing the Delete or Backspace key.

+ +

Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

diff --git a/files/de/tools/style_editor/index.html b/files/de/tools/style_editor/index.html new file mode 100644 index 0000000000..bb39d8f812 --- /dev/null +++ b/files/de/tools/style_editor/index.html @@ -0,0 +1,54 @@ +--- +title: Style Editor +slug: Tools/Style_Editor +translation_of: Tools/Style_Editor +--- +
{{ToolsSidebar}}
+ +

Die Stilbearbeitung ermöglicht:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ + + +

Um die Stilbearbeitung zu öffnen, wählen Sie die Option "Stilbearbeitung" aus dem Menü "Webentwickler" (ein Untermenü im Menü "Werkzeuge" auf dem Mac). Die Toolbox erscheint am unteren Rand des Browser-Fensters, wobei die Stilbearbeitung aktiviert ist:

+ +

+ +

Links (oder oben, wenn Ihr Fenster sehr schmal ist) befindet sich eine Liste aller vom Dokument verwendeten Stylesheets, und rechts (oder unten, wenn Ihr Fenster sehr schmal ist) ist die Quelle für das Stylesheet, das Sie gerade in diesem Stylesheet-Fenster ausgewählt haben.

+ +

Die Stylesheet-Ansicht

+ +

Die Ansicht der Stylesheets auf der linken Seite listet alle Stylesheets auf, die vom aktuellen Dokument verwendet werden. Sie können die Verwendung eines bestimmten Stylesheets schnell ein- und ausschalten, indem Sie auf das Augesymbol links neben dem Stylsheetnamen klicken. Sie können alle Änderungen, die Sie am Stylesheet vorgenommen haben, auf Ihrem lokalen Computer speichern, indem Sie auf die Schaltfläche "Speichern" in der rechten unteren Ecke jedes Eintrags in der Liste klicken.

+ +

Das Bearbeitungsfenster

+ +

Auf der rechten Seite befindet sich das Bearbeitungsfenster. Hier steht Ihnen die Quelle für das ausgewählte Stylesheet zum Lesen und Bearbeiten zur Verfügung. Alle Änderungen, die Sie vornehmen, werden in Echtzeit auf die Seite angewendet. Dadurch ist es wirklich einfach, mit dem Aussehen Ihrer Seite zu experimentieren, sie zu überarbeiten und zu testen. Wenn Sie mit Ihren Änderungen zufrieden sind, können Sie eine Kopie lokal speichern, indem Sie auf die Schaltfläche Speichern am Eintrag des Blattes im Blattfenster klicken.

+ +

Der Editor bietet Zeilennummern und Syntaxhervorhebung, um das Lesen Ihres CSS zu erleichtern. Siehe Verwendung des Quelltexteditors für die Dokumentation über den Editor selbst, einschließlich nützlicher Tastaturkürzel.

+ +

Eine besonders praktische Funktion der Stilbearbeitung: Sie minimiert automatisch die von ihr erkannten Stilvorlagen, ohne das Original zu beeinflussen. Dies erleichtert die Arbeit auf optimierten Seiten erheblich.

+ +

Erstellen und Importieren von Stylesheets

+ +

Sie können ein neues Stylesheet erstellen, indem Sie auf die Schaltfläche Neu in der Symbolleiste klicken. Dann können Sie einfach mit der Eingabe von CSS in den neuen Editor beginnen und beobachten, wie die neuen Stile in Echtzeit angewendet werden, genau wie die Änderungen in den anderen Sheets.

+ +

Sie können ein Stylesheet von der Festplatte laden und auf die Seite anwenden, indem Sie auf die Schaltfläche Importieren klicken.

+ +

Siehe auch

+ + + +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/de/tools/web_konsole/hilfe/index.html b/files/de/tools/web_konsole/hilfe/index.html new file mode 100644 index 0000000000..d8dd2b0241 --- /dev/null +++ b/files/de/tools/web_konsole/hilfe/index.html @@ -0,0 +1,65 @@ +--- +title: Konsole Bild +slug: Tools/Web_Konsole/Hilfe +tags: + - Anfänger + - Befehle + - Beispiele + - Debugging + - Deutsch + - Firefox + - Konsole + - Maxi + - Übersetzung +translation_of: Tools/Web_Console/Helpers +--- +
{{ToolsSidebar}}

Die Befehle

+ +

Die von der Web Console bereitgestellt JavaScript Kommandozeile bietet ein paar eingebauten Hilfsfunktionen, bestimmte Aufgaben zu erleichtern.
+
+ $ ()
+      Sucht nach einer CSS-Selektor-String, der Rückkehr auf das erste Element, das passt. Entspricht {{domxref ("document.querySelector ()")}} oder ruft die $ -Funktion in der Seite, wenn es vorhanden ist.
+ $$ ()
+      Sucht nach einer CSS-Selektor-String, der Rückkehr eine Liste von DOM-Knoten zusammenpasst. Dies ist eine Abkürzung für {{domxref ("document.querySelectorAll ()")}}.
+ $ 0
+      Das aktuell geprüft Element in der Seite.
+ $ x ()
+      Wertet einen XPath-Ausdruck und gibt ein Array von passenden Knoten.
+ keys ()
+      Für ein gegebenes Objekt wird eine Liste der Schlüsseln (oder Eigenschaftsnamen) für das Objekt angezeigt. Dies ist eine Abkürzung für Object.keys.
+ values ()
+      Für ein gegebenes Objekt wird eine Liste der Werte für das Objekt zurückgegeben; dient als Ergänzung zu keys ().
+ clear ()
+      Löscht den Ausgabebereich der Konsole.
+ inspect ()
+      Da ein Objekt öffnet den Objektinspektor für das Objekt.
+ pprint ()
+      Formatiert den angegebenen Wert in lesbarer Weise; Dies ist nützlich für die Dumping den Inhalt der Objekte und Arrays.
+ help()
+      Zeigt Hilfetext . Eigentlich in einem schönen Beispiel für Rekursion, es wird Sie zu dieser Seite zu bringen.
+ cd ()
+      Schalten Sie JavaScript Auswertung Kontext in einen anderen iframe auf der Seite. Siehe Arbeiten mit eingebetteten Frames anzeigen.
+ Bitte beachten Sie die Konsole API für weitere Informationen über die Anmeldung von Inhalten.
+
+ Beispiele
+ Beispiel: Eine Sicht auf den Inhalt einer DOM-Knoten
+
+ Angenommen, Sie haben einen DOM-Knoten mit der ID "Titel" zu haben. In der Tat, diese Seite, die Sie gerade lesen muss man, so können Sie öffnen Sie die Web-Konsole und versuchen Sie diese jetzt.
+
+ Werfen wir einen Blick auf den Inhalt dieses Knotens mit der $ () und prüfen () Funktionen:

+ +
inspect($("#Titel"))
+ +


+
+ Es öffnet sich automatisch das Objekt-Inspektor und zeigt Ihnen den Inhalt des DOM-Knoten, der die CSS-Selektor "#title", was natürlich ist das Element mit der ID "Titel" entspricht.
+ Beispiel: Dumping den Inhalt eines DOM-Knoten
+
+ Das ist schön und gut, wenn Sie geschehen, im Browser zu sitzen ein Problem aufweisen, aber lassen Sie uns sagen Sie remote Debugging für einen Benutzer, und müssen Sie einen Blick auf den Inhalt eines Knotens. Sie können Ihre Benutzer öffnen Sie die Web-Konsole und Dump den Inhalt der Knoten in das Protokoll, dann kopieren und fügen Sie ihn in eine E-Mail an Sie, mit Hilfe der pprint () -Funktion:
+  

+ +
pprint($("#Titel"))
+ +

 

+ +

This spews out the contents of the node so you can take a look. Of course, this may be more useful with other objects than a DOM node, but you get the idea.

diff --git a/files/de/tools/web_konsole/index.html b/files/de/tools/web_konsole/index.html new file mode 100644 index 0000000000..1616e7c9a7 --- /dev/null +++ b/files/de/tools/web_konsole/index.html @@ -0,0 +1,582 @@ +--- +title: Web-Konsole +slug: Tools/Web_Konsole +translation_of: Tools/Web_Console +--- +
{{ToolsSidebar}}
+ +

Die Web-Konsole

+ +
    +
  1. zeichnet Informationen auf, die mit einer Webseite verknüpft sind: alle Netzwerkanfragen, JavaScript, CSS und Sicherheitsfehler, sowie Fehler-, Warn- und Informationsmeldungen, die speziell von JavaScript-Code auf einer Seite verursacht werden
    2. +
  2. erlaubt es Ihnen, mit einer Webseite zu interagieren, indem Sie JavaScript-Befehle auf einer Seite ausführen
    3. +
+ +

Es ist ein Ersatz für die alte Fehlerkonsole, die in Firefox eingebaut war: sie hat Fehler, Warnungen und Nachrichten von allen Internetseiten, vom Browser-Code und Add-ons angezeigt. Das machte es viel schwerer zu sehen, welche Nachrichten zu welcher Internetseite gehören. Die Web-Konsole ist immer mit einer spezifischen Internetseite verknüpft und zeigt Informationen an, die mit dieser Seite zusammenhängen.

+ +

Der andere Teil der Fehlerkonsole ist die Browserkonsole, die Fehler, Warnungen und Meldungen vom Browser-Code und von Add-ons anzeigt.

+ +

{{EmbedYouTube("AlYMRAQnkX8")}}

+ +

Die Web-Konsole öffnen

+ +

Um die Web-Konsole zu öffnen, wählen Sie "Web-Konsole" vom Web-Entwickler Untermenü im Firefox-Menü (oder Extras-Menü, wenn Sie die Menüleiste aktiviert haben oder Mac OS X benutzen) aus, oder halten Sie die Tasten Steuerung-Umschalt-K (Befehl-Wahl-K auf einem Mac) gedrückt.

+ +

https://developer.mozilla.org/de/docs/Tools/Web_Konsole$edit

+ +

Die Browser-Werkzeuge werden zusammen mit der Web-Konsole (sie wird in der DevTools Werkzeugleiste nur "Konsole" genannt) am unteren Teil des Browser-Fensters angezeigt:

+ +

+ +

Unter der Symbolleiste der Entwicklerwerkzeuge ist die Oberfläche der Web-Konsole in drei Abschnitte eingeteilt:

+ + + +

Meldungsansicht

+ +

Der Großteil der Web-Konsole wird von der Meldungsansicht genutzt:

+ +

+ +

Die Meldungsanzeige zeigt folgende Meldungen an:

+ + + +

Jede Nachricht wird in einer neuen Zeile angezeigt:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ZeitDie Zeit, zu der die Meldung aufgezeichnet wurde. Ab Firefox 28 wird sie standardmäßig nicht angezeigt, jedoch können Sie Zeitstempel mit einer Einstellung in der Werkzeugleiste anzeigen lassen.
Kategorie +

Kategorie: zeigt an, um welche Art von Meldung es sich handelt:

+ +
    +
  • Schwarz: HTTP-Anfrage
    • +
  • Blau: CSS-Warnung/Fehler/Meldung
    • +
  • Orange: JavaScript-Warnung/Fehler
    • +
  • Grün: Sicherheitswarnung/-fehler
    • +
  • Hellgrau: Meldungen, die explizit durch von der console-API ausgeführtem JavaScript-Code stammen
    • +
  • Dunkelgrau: Eingaben/Ausgaben von der interaktiven Kommandozeile
    • +
+
TypFür alle Meldungen außer HTTP-Anfragen und interaktiven Eingaben/Ausgaben, ein Symbol das anzeigt, ob es sich um ein Fehler(X), eine Warnung(!) oder eine Meldung (i) handelt.
MeldungDie Meldung an sich.
Anzahl der MeldungenWenn eine Zeile, die eine Warnung oder ein Fehler erzeugt, mehrmals ausgeführt wird, wird sie nur einmal aufgezeichnet und der Zähler zeigt die Anzahl an Meldungen an.
Dateiname und ZeilennummerJavaScript-, CSS- und console API-Meldungen können zu einer spezifischen Codezeile zurückverfolgt werden. Die Konsole gibt den Dateinamen und Zeilennummer des Codeabschnitts an, das die Meldung erzeugt hat.
+ +

HTTP-Anfragen

+ +

HTTP-Anfragen werden in einer Zeile dargestellt, die folgendermaßen aussieht:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
ZeitDie Zeit, zu der die Meldung aufgezeichnet wurde.
KategorieZeigt an, dass die Meldung eine HTTP-Anfrage ist.
MethodeDie Methode der HTTP-Anfrage
URIDie Ziel-URI
ZusammenfassungDie HTTP-Version, Status-Code und Laufzeit.
+ +

Wenn Sie auf eine Meldung klicken, sehen Sie so ein Fenster mit mehr Informationen über die Anfrage und Antwort:

+ +

Durch Herunterscrollen sehen Sie die Antwort-Zeilen. Standardmäßig werden Anfrage- und Antwort-Inhalte nicht aufgezeichnet: um dies zu tun, wählen Sie im Auswahlmenü der Web-Konsole "Anfrage- und Antwort-Inhalte aufzeichnen" aus, laden Sie die Seite neu und öffnen Sie das Fenster "Netzwerk-Request untersuchen".

+ +

Nur das erste Megabyte an Daten wird für alle Anfrage- und Antwort-Inhalte aufgezeichnet, weshalb sehr große Anfragen und Antworten gekürzt werden.

+ +
+

Ab Firefox 30 werden Netzwerk-Meldungen standardmäßig nicht angezeigt.

+
+ +

JavaScript-Fehler und Warnungen

+ +

JavaScript-Meldungen sehen folgendermaßen aus:

+ +

+ +
+

Ab Firefox 30 werden JavaScript-Warnungen standardmäßig nicht angezeigt.

+
+ +

CSS-Fehler, -Warnungen und DOM-Neuberechnungen

+ +

CSS-Meldungen sehen folgendermaßen aus:

+ +

+ +

Standardmäßig werden CSS-Warnungen und Meldungen nicht angezeigt.

+ +

DOM-Neuberechnungen

+ +

Die Web-Konsole zeichnet auch DOM-Neuberechnungen unter der CSS-Kategorie auf. Eine Neuberechnung bezeichnet der Vorgang, bei dem der Browser das Layout von der ganzen Seite oder von Teilen berechnet. Neuberechnungen treten auf, wenn Änderungen auf einer Seite aufgetreten sind, von denen der Browser denkt, dass das Layout der Seite beeinflusst wurde. Viele Ereignisse können Neuberechnungen auslösen, inklusive: Skalieren des Browser-Fensters, Aktivieren von Pseudoklassen wie :hover oder Manipulieren des DOM in JavaScript.

+ +

Da Neuberechnungen manchmal Rechenaufwendig sind und die Benutzeroberfläche direkt beeinflussen, können sie einen großen Einfluss auf die responsiveness einer Webseite oder Web-App haben. Indem Neuberechnungen in der Web-Konsole aufgezeichnet werden, können Sie sehen, wann Neuberechnungen erzwungen werden, wie lange es dauert, sie auszuführen, ob die Neuberechnungen synchrone Neuberechnungen sind und von welchem JavaScript-Code sie erzwungen werden.

+ +

Neuberechnungen werden als "Logbuch"-Meldungen angezeigt, im Gegensatz zu CSS-Fehlern oder Warnungen. Standardmäßig sind sie deaktiviert. Sie können sie aktivieren, indem Sie auf die "CSS"-Schaltfläche in der Symbolleiste klicken und "Logbuch" auswählen.

+ +

Jede Meldung wird mit "reflow" markiert und zeigt die Zeit an, die für die Neuberechnung gebraucht wurde:

+ +

Wenn die Neuberechnung synchron ist und von JavaScript-Code erzwungen wurde, wird auch ein Link zur Codezeile angezeigt, die die Neuberechnung erzwungen hat.

+ +

Klicken Sie auf den Link um die Datei im Debugger zu öffnen.

+ +

Synchrone and asynchrone Neuberechnungen

+ +

Wenn eine Änderung das aktuelle Layout ungültig macht - zum Beispiel, wenn der Browser-Fenster skaliert wird oder JavaScript-Code das CSS eines Elements ändert - wird das Layout nicht augenblicklich neu berechnet. Stattdessen geschieht die Neuberechnung asynchron, sobald der Browser entscheidet, dass es notwendig ist (üblicherweise, wenn das Aussehen des Browser-Fensters neu gezeichnet wird). So kann der Browser mehrere ungültig machende Änderungen sammeln und alle auf einmal neuberechnen.

+ +

Wenn ein JavaScript-Code jedoch CSS ausliest, das geändert wurde, muss der Browser eine synchrone Neuberechnung durchführen um das berechnete Aussehen zurückzugeben. Folgender Code-Beispiel löst beim Aufruf von window.getComputedStyle(thing).height sofort eine synchrone Neuberechnung aus:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Deshalb ist es eine gute Idee, Verschachtelungen von Schreib- und Leseanfragen zu vermeiden, da bei jedem Lesen eines durch eine vorangegangene Schreibanfrage ungültig gemachten Stils eine synchrone Neuberechnung erzwungen wird.

+ +

Sicherheitswarnungen und -fehler

+ +

Sicherheitswarnungen und -fehler sehen folgendermaßen aus:

+ +

Die Sicherheitsmeldungen in der Web-Konsole helfen Ihnen dabei, (potentielle) Sicherheitslücken in Ihren Seiten zu finden. Außerdem helfen diese Meldungen Entwickler dabei, zu lernen, da sie mit einem Link "Weitere Informationen" enden, womit Sie zu einer Seite mit Hintergrundinformationen und Hilfestellungen zur Problemlösung geführt werden.

+ +

Die folgende Liste führt alle Sicherheitsmeldungen auf:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MeldungDetails
Laden von gemischten aktiven Inhalten wurde blockiert.Die Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte für mehr Details.
Laden von gemischten Ansichtsinhalten wurde blockiert.Die Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt blockiert. Siehe Gemischte Inhalte für mehr Details.
Lade gemischte (unsichere) aktive Inhalte auf einer sicheren SeiteDie Seite besitzt gemischte aktive Inhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "aktive Inhalte" wie Skripte über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte für mehr Details.
Lade gemischte (unsichere) anzeige-Inhalte auf einer sicheren SeiteDie Seite besitzt gemischte Ansichtsinhalte: die Hauptseite wurde über HTTPS bereitgestellt, hat den Browser aber gebeten, "Ansichtsinhalte" wie Bilder über HTTP zu laden. Der Browser hat diesen aktiven Inhalt geladen. Siehe Gemischte Inhalte für mehr Details.
Diese Website hat Kopfzeilen sowohl mit X-Content-Security-Policy/Report-Only als auch Content-Security-Policy/Report-Only angegeben. Jene mit X-Content-Security-Policy/Report-Only werden ignoriert.Siehe Content Security Policy für mehr Details.
Die Kopfzeilen X-Content-Security-Policy und X-Content-Security-Report-Only werden in Zukunft nicht mehr unterstützt. Verwenden Sie bitte stattdessen die Kopfzeilen Content-Security-Policy und Content-Security-Report-Only mit CSP-Spezifikations-kompatibler Syntax.Siehe Content Security Policy für mehr Details.
Passwort-Felder sind auf einer unsicheren (http://) Seite vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.Seiten mit Anmeldeformularen müssen über HTTPS, nicht HTTP, bereitgestellt werden.
Passwort-Felder sind in einem Formular mit einer unsicheren (http://) Formular-aktion vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.Formulare mit Passwortfeldern müssen diese über HTTPS, nicht HTTP, absenden.
Passwort-Felder sind in einem unsicheren (http://) Iframe vorhanden. Dies ist ein Sicherheitsrisiko, durch das Zugangsdaten gestohlen werden können.iframes, die Anmeldeformulare beinhalten, müssen über HTTPS, nicht HTTP, bereitgestellt werden.
Diese Website hat eine ungültige Strict-Transport-Security-Kopfzeile angegeben.Siehe HTTP Strict Transport Security für mehr Details.
+ +

Bug 863874 ist ein Problembericht um für Sicherheit relevante Meldungen in der Web-Konsole zu sammeln. Wenn Sie mehr Ideen für nützliche Funktionen wie diese haben, oder einfach nur mitmachen wollen, schauen Sie sich den Fehlerbericht und die davon abhängigen an.

+ +

console API-Meldungen

+ +


+

+ +

Dieser Abschnitt beschreibt die Ausgaben der Web-Konsole für die console API-Aufrufe, die Ausgaben erzeugen. Für mehr oberflächliche Informationen über die console API, siehe folgende Dokumentationsseite.

+ +

Fehlermeldungen

+ + + + + + + + + + + + + + + + + + + + + + +
APIMeldungsinhalt
error() +

Argument für error().

+ + 
+console.error("an error");
+
exception()Alias für error().
assert() +
+

Neu in Firefox 29.

+
+ +

Wenn die Aussage erfolgreich ist, nichts. Wenn die Aussage fehlschlägt, Argument:

+ + 
+console.assert(false, "My assertion always fails");
+
+ +

Warnmeldungen

+ + + + + + + + + + + + + + +
APIMeldungsinhalt
warn() +

Argument für warn().

+ + 
+console.warn("a warning");
+
+ +

Informationsmeldungen

+ + + + + + + + + + + + + + +
APIMeldungsinhalt
info() +

Argument für info().

+ + 
+console.info("some info");
+
+ +

Meldungen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
APIMeldungsinhalt
count() +
+

Diese Meldung ist neu in Firefox 30.

+
+ +

Diese Beschreibung gibt an, ob und wie oft  count() aufgerufen wurde mit der gegebenen Beschriftung:

+ + 
+console.count(user.value);
+ +

+
log() +

Argument für log().

+ + 
+console.log("logged");
+
trace() +

Stack-Trace:

+ + 
+console.trace();
+
dir() +

Auflisten der Objekteigenschaften:

+ + 
+var user = document.getElementById('user');
+console.dir(user);
+
time() +

Benachrichtigung, dass der spezifische Timer gestartet wurde.

+ + 
+console.time("t");
+
timeEnd() +

Dauer für den spezifischen Timer.

+ + 
+console.timeEnd("t");
+
+ +

Gruppieren von Meldungen

+ +

Sie können console.group() benutzen um eingerückte Gruppen in der Konsolenausgabe zu erstellen. Siehe Gruppen in der Konsole benutzen für mehr Informationen.

+ +

Eingabe-/Ausgabemeldungen

+ +

Befehle, die dem Browser über die Kommandozeile der Web-Konsole geschickt wurden und die dazugehörigen Antworten werden mit Zeilen wie diese aufgezeichnet:

+ +

Die dunkelgraue Leiste gibt an, dass es sich um Eingabe-/Ausgabemeldungen handelt, während die Richtung, in die die Pfeile zeigen, zwischen Eingabe und Ausgabe unterscheidet.

+ +

Filtern und suchen

+ +

Sie können die Symbolleiste oben benutzen, um die angezeigten Ergebnisse zu verfeinern.

+ +

Sie können nur bestimmte Meldungen oder Meldungen, die einen bestimmten String enthalten, anzeigen lassen.

+ +

Zuletzt können Sie diese Symbolleiste benutzen um die Aufzeichnungen zu löschen.

+ +
+
+ +

Der Kommandozeileninterpreter

+ +

Sie können JavaScript-Ausdrücke mit der von der Web-Konsole bereitgestellten Kommandozeile in Echtzeit interpretieren.

+ +

+ +

Ausdrücke eingeben

+ +

Um Ausdrücke einzugeben, tippen Sie sie in die Kommandozeile ein und drücken Sie die Eingabetaste.

+ +

Die Eingabe, die Sie eintippen, wird in der Meldungsansicht zusammen mit dem Ergebnis angezeigt:

+ +

+ +

Auf Variablen zugreifen

+ +

Sie können auf Variablen, die auf der Seite definiert werden, zugreifen, egal ob eingebaute Variablen wie window oder Variablen, die von JavaScript-Code erstellt wurden, wie jQuery:

+ +

+ +

Automatische Vervollständigung

+ +

Die Kommandozeile hat eine automatische Vervollständigung: geben Sie die ersten Buchstaben ein und ein Dialogfenster mit möglichen Vervollständigungen erscheint:

+ +

Drücken Sie die Eingabe- oder Tabulatortaste um den Vorschlag zu übernehmen, benutzen Sie die Pfeiltasten um zu einem anderen Vorschlag zu gelangen, oder tippen Sie einfach weiter, wenn Ihnen keines der Vorschläge gefällt.

+ +

Die Konsole schlägt Vervollständigungen im Umfang des momentan ausgeführten Stack-Frames vor. Das heißt, wenn Sie ein Haltepunkt erreichen, bekommen Sie Vervollständigungen für für die Funktion lokale Objekte.

+ +

Ab Firefox 30 können auch Array-Elemente automatisch vervöllständigt werden:

+ +

+ +

Elemente untersuchen

+ +

Falls das Ergebnis ein Objekt ist, wird es kursiv dargestellt. Beim Anklicken erscheint eine Ansicht mit weiteren Informationen zum Objekt:

+ +

Um diese Ansicht zu schließen, drücken Sie die Escape-Taste.

+ +
+

Vor Firefox 30 erscheinen untersuchbare Objekte in eckigen Klammern und sind unterstrichen, wie [Objekt Funktion].

+
+ +

Variablen festlegen

+ +

Sie können Ihre eigenen Variablen festlegen und auf diese zugreifen:

+ +

+ +

Knoten hervorheben und untersuchen

+ +
+

Diese Funktion ist neu in Firefox 30.

+
+ +

Wenn Sie mit dem Mauszeiger über ein DOM-Element in der Konsolenausgabe fahren, wird es auf der Seite hervorgehoben:

+ +

In dem oberen Bildschirmfoto können Sie auch ein "Ziel"-Symbol in blau neben dem Knoten in der Konsolenausgabe sehen: klicken Sie darauf um den Knoten zu untersuchen.

+ +

Befehlsverlauf

+ +

Die Kommandozeile merkt sich Ihre eingegebenen Befehle: um durch den Verlauf zu navigieren, benutzen Sie die Pfeiltasten.

+ +

Mit iframes arbeiten

+ +
+

Diese Funktion ist neu in Firefox 30.

+
+ +

Wenn eine Seite über eingebettete iframes verfügt, können Sie den cd()-Befehl benutzen um den Umfang der Konsole auf einen spezifischen iframe zu setzen und Funktionen, die im iframe-Dokument definiert werden, auszuführen. Es gibt drei Wege um ein iframe mit cd() auszuwählen:

+ +

Sie können das iframe DOM-Element übergeben:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Sie können einen CSS-Selektor übergeben, der zum iframe gehört:

+ +
cd("#frame1");
+ +

Sie können den globalen Fensterobjekt des iframes übergeben:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

Um zum übergeordneten Fenster zu wechseln, rufen Sie cd() ohne Argumente auf:

+ +
cd();
+ +

Nehmen wir beispielsweise an, wir haben ein Dokument, das ein iframe einbettet:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

Der iframe definiert eine neue Funktion:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "I'm frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

So können Sie den Umfang zum iframe wechseln:

+ +
cd("#frame1");
+ +

Nun werden Sie sehen, dass das Dokument des globalen Fensters der iframe ist:

+ +

Sie können auch die Funktion, die in dem iframe definiert wird, aufrufen:

+ +

+ +

Hilfsbefehle

+ +

{{ page("/en/Using_the_Web_Console/Helpers", "Die Befehle") }}

+ +

Die geteilte Konsole

+ +
+

Die geteilte Konsole ist neu in Firefox 28.

+
+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Ab Firefox 28 können Sie die Konsole zusammen mit anderen Werkzeugen benutzen. Während Sie in einem anderen Werkzeug in der Werkzeugkiste sind, drücken Sie die Escape-Taste oder die Schaltfläche "Erzwingen der Anzeige der Konsole umschalten, gegebenenfalls zusätzlich zum aktuellen Entwicklerwerkzeug" in der Werkzeugleiste. Die Werkzeugkiste wird nun geteilt dargestellt, mit dem ursprünglichen Werkzeug über der Web-Konsole.

+ +

Wie üblich funktioniert $0 als Abkürzung für das in der Ansicht "Element unterschen" ausgewählte Element:

+ +

Wenn Sie die geteilte Konsole zusammen mit dem Debugger benutzen, wird der Umfang der Konsole auf den momentan ausgeführten Stack-Frame beschränkt. Wenn Sie einen Haltepunkt einer Funktion erreichen, wird der Umfang auf diese Funktion beschränkt. Sie können in der Funktion definierte Objekte automatisch vervollständigen und spontan ändern:

+ +

+ +

Tastenkürzel

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "web-console") }}

+ +

Allgemeine Tastenkürzel

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

diff --git a/files/de/tools/webide/index.html b/files/de/tools/webide/index.html new file mode 100644 index 0000000000..def42cbac3 --- /dev/null +++ b/files/de/tools/webide/index.html @@ -0,0 +1,280 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
{{ToolsSidebar}}
+

Die WebIDE ist verfügbar in Firexfox 34 und neuer

+ +

Du kannst sie aber auch schon in Firefox 33 aktivieren in dem du die Einstellungen veränderst: Besuche about:config, finde die Einstellung devtools.webide.enabled und stelle sie auf true um.

+
+ +
+

Die WebIDE ist der Ersatz des App Managers. Genauso wie der App Manager, kannst du mit der WebIDE Firefox OS Apps ausführen und debuggen mit dem Firefox OS Simulator oder einem richtigen Firefox OS Gerät

+ +

Darüber hinaus ist sie dir eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps.  WebIDE bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sichern aller Dateien deiner App.  Für den leichten Einstieg helfen dir zwei App Templates.

+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

Mit der WebIDE, musst du zuerst eine oder mehr Laufzeiten erstellen. Eine Laufzeit ist eine Umgebung, in der du deine App ausführst und debuggst. Eine Laufzeit kann ein Gerät mit Firefox OS sein, welches per USB verbunden ist oder auch der Firefox OS Simulator.

+ +

Als Nächstes öffnest oder erstellst du eine App. Falls du eine neue App erstellst, beginnst du mit einer Vorlage, die die Verzeichnisstruktur und die minimalen Textbausteine enthält, die du zu Anfang benötigst. Du kannst auch mit einer umfangreicheren Vorlage anfangen, die zeigt, wie du eine privilegierte API benutzt. Die WebIDE zeigt deine App-Dateien in einer Baumansicht und du kannst sie mit dem eingebauten Quelleditor bearbeiten und speichern. Natürlich kannst du deine Apps auch mit deinen bevorzugten Werkzeugen entwickeln und die WebIDE nur zur Fehlersuche benutzen.

+ +

Finally, you can install the app in one of the runtimes and run it. You can then open the usual suite of developer tools - the Inspector, Console, JavaScript Debugger and so on - to examine and modify the running app.

+ +

System requirements

+ +

To develop and debug apps using the WebIDE, all you need is Firefox version 33 or later. To test on a real Firefox OS device, you need a device running Firefox OS 1.2 or later, and a USB cable.

+ +

You can only use the WebIDE if you're targeting Firefox OS 1.2 or later.

+ +

Opening the WebIDE

+ +

In the Web Developer menu, click on the WebIDE entry and the WebIDE opens. You can also use the keybinding Shift-F8:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward.

+ +

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

The WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Debugging certified apps

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git "a/files/de/tools/webide/probleml\303\266sung/index.html" "b/files/de/tools/webide/probleml\303\266sung/index.html" new file mode 100644 index 0000000000..1e15175d33 --- /dev/null +++ "b/files/de/tools/webide/probleml\303\266sung/index.html" @@ -0,0 +1,165 @@ +--- +title: WebIDE Problemlösung +slug: Tools/WebIDE/Problemlösung +translation_of: Archive/WebIDE/Troubleshooting +--- +
{{ToolsSidebar}}

Mit einem Firefox-OS-Gerät verbinden

+ +

Wenn du mit dem WebIDE eine Verbindung zu deinem Firefox-OS-Gerät herstellen möchtest, das Gerät aber nicht angezeigt wird, prüfe folgendes:

+ + + +

Über Wi-Fi mit Firefox OS verbinden

+ + + +

Über USB mit Firefox für Android verbinden

+ +

Wenn du versucht dich mit einer laufenden Firefox Anwendung auf deinem Android-Gerät zu verbinden und dieses nicht angezeigt wird, versuche folgendes:

+ + + +

Über Wi-Fi mit Firefox für Android verbinden

+ + + +

Verbindung zu anderen Browsern herstellen (Chrome, Safari, iOS)

+ +

WebIDE nutzt Valence (Firefox Tools Adapter), um sich mit anderen Browsern, wie Chrome, Safari oder iOS, zu verbinden.

+ +

Wenn du Probleme bei der Verbindung mit anderen Browsern hast, überprüfe die Installationsschritte und andere Hinweise für diese Browser auf der Valence-Seite.

+ +

Manche Apps sind nicht debuggbar

+ +

Wenn du der Meinung bist, dass zertifizierte Apps, eingebaute Apps oder bereits auf einem echten Gerät installierte Apps nicht debuggbar sind, dann kann dies durch die Restricted Privileges Security Policies des WebIDE (dt.: Sicherheitsrichtlinien für beschränkte Berechtigungen) ausgelöst werden. Für mehr Informationen sieh dir Unrestricted app debugging (including certified apps, main process, etc.) (dt.: Unbeschränktes App-Debugging) an.

+ +

Die Projekt-Liste kann nicht geladen werden

+ +

Wenn du das WebIDE in einer Firefox-Version öffnest und dann zu einer früheren Version von Firefox mit dem selben Profil wechselst, kann es passieren, dass der Fehler "Die Projekt-Liste kann nicht geladen werden" beim Öffnen des WebIDE mit der früheren Version auftritt.

+ +

Dieser Fehler tritt auf, da das vom WebIDE genutzte Speicherungssystem in neuere Versionen die Daten verschiebt und restrukturiert. Somit wird die Projekt-Liste unbenutzbar für frühere Versionen

+ +

Die Daten gehen dabei nicht verloren, aber du wirst die neueste Version von Firefox nutzen müssen, um deine Projekt-Liste nutzen zu können.

+ +

Wenn du wirklich eine ältere Version von Firefox benutzen willst, kannst du versuchen einfach die Projekt-Liste zu löschen, dieser Weg wird jedoch nicht empfohlen und wird nicht unterstützt. Es können Probleme auftreten und Daten verloren gehen.

+ +

Anleitung:

+ +
    +
  1. Schließe Firefox.
    2. +
  2. Öffne den Firefox-Profil-Ordner.
    3. +
  3. Öffne den darin enthaltenen storage-Ordner.
    4. +
  4. An manchen Stellen des Dateibaums sollten Dateien oder Ordner mit folgendem Namen beginnen: 4268914080AsptpcPerjo  (gehashter Name der Datenbank). +
      +
    • Beispielsweise kann solch eine Datei im Ordner /storage/permanent/indexeddb+++fx-devtools/idb sein.
      • +
    +
    5. +
  5. Lösche alle so aussehenden Dateien und Ordner.
    6. +
  6. Starte Firefox und WebIDE neu.
    7. +
+ +

Logging aktivieren

+ +

Du kannst auch die ausführliche Protokollierung aktivieren, um eine genauere Diagnose zu erhalten:

+ +
    +
  1. Öffne about:config.
    2. +
  2. Erstelle eine neue Einstellung, die extensions.adbhelper@mozilla.org.sdk.console.logLevel heißt. und den String-Inhalt all enthält.
    3. +
  3. Setze den Wert von extensions.adbhelper@mozilla.org.debug auf true.
    4. +
  4. Öffne den AddOns-Manager, deaktivere und reaktiviere das ADB Helper-AddOn.
    5. +
  5. Öffne die Browser-Konsole, dort kannst du nun Eintragungen mit dem Präfix adb sehen. Wenn dir diese Eintragungen nichts sagen, dann frage bitte nach Hilfe.
    6. +
+ +

Hilfe bekommen

+ +

Gehe in den #devtools room on IRC und es wird versucht dir zu helfen (Vorwiegend englischer IRChat).

diff --git a/files/de/tools/webide_clone/index.html b/files/de/tools/webide_clone/index.html new file mode 100644 index 0000000000..c0be23b241 --- /dev/null +++ b/files/de/tools/webide_clone/index.html @@ -0,0 +1,279 @@ +--- +title: WebIDE +slug: Tools/WebIDE_clone +--- +
{{ToolsSidebar}}
+

Die WebIDE ist in Firexfox 34 und neuer verfügbar

+ +

Du kannst sie bereits in Firefox 33 aktivieren. Besuche hierzu about:config, gehe zur Einstellung devtools.webide.enabled und setzte den Wert auf true.

+
+ +
+

Die WebIDE ersetzt den App Manager. Genau wie im App Manager kannst du mit der WebIDE Firefox OS Apps mithilfe des Firefox OS Simulator oder einem richtigen Firefox OS Gerät ausführen und debuggen.

+ +

Darüber hinaus ist es eine vollwertige Entwicklungsumgebung zur Erstellung und Bearbeitung deiner Firefox OS Apps. Sie bietet eine Baumansicht zur strukturierten Anzeige, Bearbeitung und Sicherung aller Dateien deiner App. Für die Erleichterung deines Einstiegs helfen dir zwei App Templates.

+
+ +

{{EmbedYouTube("2xmj4W8O3E4")}}

+ +

In der WebIDE, musst du zuerst ein oder mehrere Laufzeiten erstellen. Eine Laufzeit ist eine Umgebung, in der du deine Apps ausführst und debuggst. Sie ist entweder ein Firefox OS Gerät, welches per USB verbunden ist oder der Firefox OS Simulator.

+ +

Als nächstes kannst du eine App erstellen oder öffnen. Wenn du eine neue App öffnest beginnst du mit einem Template, welches bereits das mindeste an Ordnerstrucktur und Code enthält, was du für den Start benötigst. Du kannst auch mit einem umfangreicheren Code Template anfangen, welcher dir Zeigt, wie man mit privilegierte APIs umgeht. Deine App Dateien werden in einer Baumansicht dargestellt und mithilfe des eingebauten Quelleditors kannst du sie jederzeit komfortabel ändern und speichern. Natürlich kannst du auch mit deinem Quelleditor deiner Wahl arbeiten und die WebIDE nur zum debuggen verwenden.

+ +

Zum Schluss kannst du deine App in eine der Laufzeiten installieren und ausführen. Ab dann kannst du auch zu den üblichen Entwickler Tools, wie Inspector, Console, JavaScript Debugger und mehr zurückgreifen, um deine laufende App zu prüfen und modifizieren.

+ +

Systemanforderungen

+ +

Alles was du zum Entwickeln und Debugging mit der WebIDE benötigst ist Firefox Version 33 oder höher. Zum Test deiner App auf einem echten Firefox OS Gerät benötigst du ein Gerät mit min. Firefox OS 1.2 und einem USB Kabel.

+ +

Du kannst die WebIDE nur nutzen, wenn du dich auf Firefox OS 1.2 oder höher ausrichtest.

+ +

Öffnen der WebIDE

+ +

Klick hierzu im Web Entwickler Menü auf den WebIDE Eintrag. Die WebIDE sollte sich öffnen. Alternativ kannst du auch die Tastenkombination Shift-F8 nutzen:The dropdown on the left labeled "Open App" lets you open existing apps or create new ones. The dropdown on the right labeled "Select Runtime" lets you select a runtime or set up a new runtime.

+ +

The buttons in the middle run, stop, and debug the app: they are only enabled when you have opened an app and selected a runtime.

+ +

Setting up runtimes

+ +

Under the "Select Runtime" dropdown, runtimes are grouped into three types:

+ + + +

The first time you click the dropdown, you might not see any runtimes here:

+ +

The rest of this section describes how you can add some runtimes.

+ +

Connecting a Firefox OS device

+ +

Before you can connect a Firefox OS device, there's some setup you have to go through:

+ + + +
+

Linux only:

+ + +
+ +
+

Windows only:

+ + +
+ +

If there are any other Android devices connected to your computer, disconnect them. Now connect the device to the computer using USB. You should see the device appear under "USB DEVICES":

+ +

+ +

If you don't see your device, see the Troubleshooting page.

+ +

Adding a Simulator

+ +

The Firefox OS Simulator is a version of the higher layers of Firefox OS that simulates a Firefox OS device, but runs on the desktop. It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.

+ +

This means that in many cases, you don't need a real device to test and debug your app.

+ +

The Simulator is big, so it doesn't ship inside Firefox but as a Firefox add-on. If you click "Install Simulator" in the Runtimes dropdown menu, you will go to a page from which you can install Simulators for various versions of Firefox OS.

+ +

You can install as many as you like. Be patient, though: the Simulator is large and may take a few minutes to download. Once you've installed some Simulators you can close this "Extra Components" window, and the Simulators you've installed appear as options in the Runtimes dropdown menu:

+ +

To learn more about the Simulator, see its documentation page.

+ +

Custom runtimes

+ +

With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.

+ +

Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or ADB. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.

+ +

This is convenient in most cases, but sometimes you might want to use ADB outside of the WebIDE: for example, you might be running ADB directly from the command line. In that case you'll connect to the device by specifying a host and port using the adb forward command.
+
+ If you then want to use WebIDE to connect as well, you should disable the ADB Helper add-on and connect WebIDE using the Custom runtime option, entering the host and port that you passed to adb forward.

+ +

Also, the ADB Helper does not yet support connecting to Firefox for Android, so if you want to connect WebIDE to Firefox for Android, you'll need to set up your own port forwarding and use a custom runtime. See more about connecting to Firefox for Android using ADB.

+ +

Selecting a runtime

+ +

Once you've set up a runtime you can select it using the "Select Runtime" menu.

+ + + +

Now the "play" button in the center of the WebIDE toolbar is enabled: click it to install and run the app in the selected runtime.

+ +

Runtime actions

+ +

When a runtime is selected, the Runtimes dropdown menu has three extra items:

+ + + +

+ +

+ +

Creating and opening apps

+ +

Under the "Open App" menu you get three options: create a new app, open a packaged app, and open a hosted app:

+ +

+ +

Create a new app

+ +

Select "New App..." to create a new app. You'll see a dialog offering you a choice between two templates, "Privileged Empty App" and "Privileged App".

+ +

+ +

Both templates are from Mozilla's app template collection, and provide you with the basic structure you need to get started. The "Privileged App" shows how an app can use permissions to load cross-origin content.

+ +

Once you've selected a template you'll be asked to name the app and select a directory to store the files, and then the new app is opened in the project editor.

+ +

Open a packaged app

+ +

Select "Open Packaged App..." to open a packaged app. You'll be asked to select a directory containing the app's manifest, and the app will be opened in the project editor.

+ +

Open a hosted app

+ +

Select "Open Hosted App..." to open a hosted app. You'll be asked to enter a URL pointing to the app's manifest, and the app will be opened in the project editor.

+ +

Editing apps

+ +

The project editor provides an environment for editing apps. There's a tree view on the left of all the files in the app: you can add and delete files here using a context menu. There's an editor pane on the right.

+ +

The app summary page

+ +

When you first open or create an app, the editor pane is occupied by the app summary page, which is shown below:

+ +

+ +

You can always get back to the app summary page by clicking on the root of the tree on the left.

+ +

Manifest validation

+ +

The WebIDE automatically checks the manifest for certain common problems. If it finds a problem it indicates that the app is invalid and describes the problem in the app's summary:

+ +

+ +

Of course, you can edit the manifest.webapp file right in the project editor as well.

+ +

The source editor

+ +

The WebIDE uses the CodeMirror source editor.

+ +

Source editor shortcuts

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

Code completion

+ +

When editing CSS and JavaScript, the editor provides autocomplete suggestions. CSS autocompletion is always enabled:

+ +

To display autocomplete suggestions in JavaScript press Control + Space:

+ +

+ +

Inline documentation

+ +

The editor also shows inline documentation for JavaScript. Press Shift + Space to see a popup containing documentation for the symbol your cursor is on:

+ +

+ +

Clicking the [docs] link in the popup will take you to the MDN page for the symbol.

+ +

Saving files

+ +

For changes to your files to take effect you need to save them. Files with unsaved changes get an asterisk next to their name in the tree view, and you can save files using the menu or Control+S (Command+S on Mac OS X).

+ +

Removing projects

+ +

To remove an app from the WebIDE, go to the app summary page and click "Remove Project".

+ +

Running and debugging apps

+ +

When you're ready to run the app, you need to select a runtime from the "Select Runtime" dropdown menu. If you don't have any available runtimes here, find out how to add some in Setting up runtimes.

+ +

The "play" button in the center of the WebIDE toolbar is now enabled: click it to install and run the app in the selected runtime:

+ +

To debug the app, click the "Pause" button and the Developer Tools Toolbox appears, connected to your app:

+ +

Exactly which tools you'll have available depends on the runtime, but you will at least have the basics: the Inspector, Console, JavaScript Debugger, Style Editor, Profiler and Scratchpad. Just as in a web page, any changes you make in the tools are visible immediately in the app, but are not persistent. Conversely, any changes you make in the editor pane can be saved straight back to disk, but are not visible without restarting the app.

+ +

Debugging certified apps

+ +

With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including certified apps:

+ +

+ +


+ However, to debug certified apps on a real device:

+ + + +

To enable certified app debugging, connect to the runtime, and then, in the menu, go to Runtime > Runtime Info. From here, if you see "DevTools restricted privileges: yes", that means certified apps can't be debugged. The path then differs depending on what you are debugging against:

+ + + +

Now (or after a restart of the B2G desktop client) in the WebIDE you should see all the certified apps on the device.

+ +

Monitoring performance

+ +

If you're interested in the performance of your apps, there are a few ways to measure their impact on the runtime in WebIDE:

+ + + +

Troubleshooting

+ +

If you have any problems working with the WebIDE, see the Troubleshooting page.

+ +

 

+ +

 

diff --git "a/files/de/unterst\303\274tzung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html" "b/files/de/unterst\303\274tzung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html" new file mode 100644 index 0000000000..3716f356e7 --- /dev/null +++ "b/files/de/unterst\303\274tzung_von_internationalized_domain_names_(idn)_in_mozilla_browsern/index.html" @@ -0,0 +1,95 @@ +--- +title: Unterstützung von Internationalized Domain Names (IDN) in Mozilla Browsern +slug: Unterstützung_von_Internationalized_Domain_Names_(IDN)_in_Mozilla_Browsern +tags: + - MDC Archiv +translation_of: Mozilla/Internationalized_domain_names_support_in_Mozilla +--- +

Einführung

+ +

Netscape 7.1 ist der erste kommerzielle Browser, der eine eingebaute Unterstützung für Internationalized Domain Name nach dem neuen IETF RFC von 2003 hat.

+ +

Ein Internationalized Domain Name (IDN) ist eine Domain oder ein host name, der andere Buchstaben als nur die in ASCII definierten nutzt. Bis vor kurzem erlaubten Domainnamen nur eine Teilmenge von Buchstaben (der 7-bit ASCII Charset). Durch die Verbreitung des Internet in weitere Länder der Erde, in denen kein Englisch gesprochen wird, wurde es immer mehr klar, dass die Beschränkung der Nutzung von Domainnamen auf eine Teilmenge des Latin alphabet nicht ideal ist.

+ +

Viele der europäischen Sprachen benutzen das lateinische Alphabet mit zusätzlichen akzentuierten Buchstaben zum Schreiben, konnten diese aber nicht in Domainnamen benutzen. Sprecher dieser Sprachen war es nicht möglich bekannte Namen in ihrer jeweiligen Sprache als Teil eines Domainnames zu verwenden.

+ +

In den letzten paar Jahren gab es eine Menge an IETF Aktivitäten um die Protokolle, die beim Handling von nicht-ASCII Buchstaben in Domainnamen beteiligt sind zu standardisieren. Im März 2003 wurden drei wichtige RfCs dazu vom IETF akzeptiert (3490, 3491, 3492). Diese drei neuen RfCs machen es nun für DNS Server möglich, dass diese nicht-ASCII Domains registrieren und ermöglichen es für Hersteller von Anwendungen, dass diese standardisierten Support für die Behandlung von nicht-ASCII Buchstaben in Domainnamen einbauen.

+ +

Wie IDN funktioniert

+ +

Wenn ein Webbrowser einen host name wie http://developer.mozilla.org sieht, gibt er eine Anfrage an den DNS Resolver Service (ist meistens im Betriebssystem eingebaut) weiter, welcher wiederum eine Anfrage zum nächsten DNS Server sendet, der eine IP Adresse zurück liefert, die zum Hostnamen passt. Diese IP Adresse wird dann dazu benutzt um zum fraglichen Webserver zu verbinden.

+ +

IDN erlaubt Host- und Domainnamen mit nicht-ASCII Zeichen als Usereingabe in die Adressleiste eines Browsers oder für URLs, die einer Website eingebunden sind. Auf der Netzwerkprotokoll-Ebene ergibt sich keine Änderung an der Einschränkung, dass nur eine Teilmenge des ASCII-Zeichensatzes verwendet werden kann. Wenn die Eingabe des Benutzers nicht-ASCII Zeichen als Teil eines Domainnamens enthält oder eine Website einen Link enthält, der nicht-ASCII Zeichen verwendet muss die Anwendung dies in eine spezielles Format umwandeln welches nur die übliche Teilmenge des ASCII Zeichensatzes verwendet. RFC 3490 (Internationalizing Domain Names in Applications (IDNA)) definiert die Zeichen die in IDN benutzt werden. Auch definiert dieser wie eine Anwendung nicht-ASCII Zeichen auf so eine Weise verarbeiten soll, dass diese im Einklang steht mit bestehenden Restriktionen in Hinblick auf host names.

+ +

Wie die Mozilla Browser nicht-ASCII Domainnamen behandeln

+ +

Unicode und Nameprep

+ +

Wenn Mozilla von einem Benutzer eine IDN Eingabe über die Adressleiste empfängt oder eine Anfrage nicht-ASCII host name links zu verarbeiten vorliegt, wandelt es zuerst diese Eingabe in Unicode um. Anschließend normalisiert und validiert es diese Eingabe um diese konform zu den Anforderungen an einen URI zu machen.

+ +

Der Prozess wandelt Großbuchstaben in Kleinbuchstaben um, vereinheitlicht Zeichen mit mehreren Darstellungsweisen, z.B. die Umwandlung von Kana Zeichen halber Breite im Japanischen in Zeichen mit voller Breite, entfernt verbotene Zeichen (z.B. Leerzeichen), eliminiert Zweideutigkeiten in bidirektionalem Text (z.B. Arabisch und Hebräisch) und prüft ob nicht zugewiesene Zeichen aus dem Unicode Zeichenraum verwendet werden - diese werden für "query strings" erlaubt, sind aber bei "stored strings" wie z.B. bei der Dateneingabe für eine Domainregistrierung verboten.

+ +

Dieser Prozess wird "Nameprep" genannt und wird nach dem RFC 3491 (en) (Nameprep: A Stringprep Profile for Internationalized Domain Names (IDN)) und dem RFC 3454 (en) (Preparation of Internationalized Strings ("stringprep")) ausgeführt.

+ +

ASCII-kompatible Kodierung (ACE)

+ +

Der nächste Schritt ist die Umwandlung der 8-Bit Zeichen in Unicode zu 7-Bit Zeichen, die nur bestimmte ASCII Zeichen verwenden dürfen. Während der Diskussionsphase von der Entwicklung des IDN Protokolls gab es ein paar konkurrierende, ASCII-kompatible Kodierungsschema (aka ASCII-compatible encoding (ACE)), aber man konnte sich schließlich darauf einigen einen Typ von ACE, der "Punnycode" genannt wird, zu standardisieren. Dieser ist definiert im RFC 3492 (en) (Punycode: A Bootstring encoding of Unicode for Internationalized Domain Names in Applications (IDNA)).

+ +

Der Punnycode Vorschlag nutzt nur eine beschränkte Anzahl von ASCII Zeichen und Nummern (a-z0-0) und den Bindestrich (-). Er wurde als sprachunabhängig, überlegen in der Kompression, kompakt in Hinsicht auf die Codegröße, round-trip safe und überlegen in Hinsicht auf die Kodierung von chinesischen/japanischen/koreanischen Zeichen dargestellt.

+ +

Der letzte Schritt des Prozesses ist es, dass ACE Präfix der Ausgabe der Nameprep/stringprep und Punnycode Verarbeitung voranzustellen. Da Punnycode nur ASCII Zeichen enthält, ist es möglich, dass sich diese Ausgabe, wenn auch unwahrscheinlich, mit einem existierenden Domainnamen deckt. Um so eine Kollision zu vermeiden definiert RFC 3490 ein spezielles Präfix, nämlich "xn--", für die Ausgabe des ACE (Punnycode). Andere Kodierungen benutzen andere Präfixe, z.B. "bq--" bei RACE, aber all diese außer dem Standard Präfix "xn--" für ACE sind jetzt in IDN verboten.

+ +

Domainnamen-Registrierung

+ +

Nachdem die technischen Standards vom IETF eingeführt wurden, war das letzte noch verbleibende Problem, dass sich die Registrare auf eine internationale Richtlinie zur Verwendung von IDN Zeichen einigen müssen. Dies wurde mit der Veröffentlichung der ICANN Richtlinie für IDN (en) im Juni 2003 bewerkstelligt. Diese Richtlinie erlaubt es Domainnamen Registraren in jedem Land die Nutzung von bestimmten Zeichen in Domainnamen zu beschränken. Da das Unicode Repertoire Zeichen enthält, die in keiner lebenden Sprache mehr verwendet werden und es auch Zeichen gibt, die in den meisten Sprachen nicht für die Erstellung von URIs/URLs geeignet sind, erlaubt die ICANN Richtlinie dem governing body den Registraren jedes Landes angemessene Beschränkungen für die Benutzung solcher Zeichen zu setzen.

+ +

Da dieses letzte Hindernis für eine Standardisierung nun aus dem Weg geräumt wurde, wird erwartet, dass die Registrare schnell voranschreiten um diese neuen RFCs für existierende und kommende IDN Registrierungen einzuführen.

+ +

Der JPRS (Japan Registry Service (en)) hat sich dazu entschieden die neue RFC Implementierung (en) am 10. Juli 2003, nur ein paar Wochen nachdem die Richtlinie des ICANN veröffentlich wurde, einzuführen. Dies macht es für Netscape 7.1/Mozilla 1.4 User möglich japanische Domainnamen unter der Topleveldomain .jp ohne weitere Änderungen nur mit der eingebauten IDN-Funktionalität aufzurufen.

+ +

 

+ +

Beispiele aus der Wirklichkeit

+ +

Punycode

+ +

Es gibt einige Beispiele von IDN, die Sie mit Netscape 7.1 testen können, welcher Punycode als standardmäßiges IDN Encoding nutzt. Zum Beispiel können die meisten Beispiellinks auf den folgenden Testseiten ohne weitere Einstellungen benutzt werden:

+ + + +

Seit July 10, 2003 und danach, kann man eine Vielzahl von japanischen Domain name Seiten unter der .jp Toplevel-Domain ohne weitere Einstellungen in Netscape 7.1/Mozilla 1.4 erreichen:

+ + + +

RACE (Row-based ASCII Compatible Encoding)

+ +

Fast alle IDN Registrierungsdaten werden zu Punycode bis zum Ende 2003 verändert. Einige Länder werden schnell dabei sein, z.B. Japan wie oben genannt, aber andere wie .com und .net Toplevel-Domains werden länger brauchen.

+ +

Die meisten der existierenden Seiten nutzen das ASCII-kompatible Encoding, welches als RACE oder "Row-based ASCII Compatible Encoding" bekannt ist, welches allerdings  kein akzeptierter Standard von IETF. Wenn Sie IDN Testseiten unter .com und .net Toplevel-Domains finden und wenn Sie nicht auf diese Seiten zugreifen können, sollten Sie den folgenden Workaround nutzen, bis Punycode komplett vorhanden ist:

+ +

Netscape 7.1 oder Mozilla 1.4:

+ +
    +
  1. Tippen Sie about:config in die Adressleiste. Es werden alle Präferenzen für Ihr System angezeigt. Diese Einstellungen können geändert werden oder neue können erstellt werden ohne, dass der Browser beendet werden muss.
    2. +
  2. Erstellen Sie einen neuen Eintrag über Neu > String über einen rechts-Klick. Der Name lautet: network.IDN_prefix. Der Wert sollte "bq--" lauten. Das wird von Puncycode auf RACE umschalten.
    3. +
  3. Als nächstes erstellen Sie einen weiteren Eintrag über rechts-Klick Neu > Boolean. Der Name lautet: network.IDN_testbed. Der Wert sollte "true" lauten.
    4. +
  4. Jetzt wechseln Sie auf eine IDN Seite unter .com und .net Toplevel-Domain. Sie sollten erfolgreich auf eine dieser Beispielseiten landen.
    5. +
  5. Vergessen Sie nicht den Wert dieser Einstellungen auf "default" zu setzen, wenn Sie mit dem Testen fertig sind!
    6. +
+ +

Vorbehalte und Rückschlüsse

+ +

Netscape 7.1/Mozilla 1.4 verfügt über eine gute Unterstützung von Internationalized Domain Names und ist der erste Browser mit eingebautem Support für neue RFC's für IDN vom IETF. Das bedeutet, dass es nicht länger notwendig ist, dass ein Plug-in für nicht-ASCII Domain names installiert werden muss.

+ +

Netscape/Mozillas Unterstützung für IDN ist nicht ohne Fehler. Ein bemerkenswerter Fehler ist, dass nicht-ASCII names nicht immer richtig in allen UI Bereichen angezeigt werden. Nicht-ASCII names werden nicht immer in der Adresszeile dargestellt, da ACE zu Unicode Umwandlung noch nicht implementiert ist.

+ +

IDN ist ein globaler Trend und wird von einer Großzahl von Seiten angenommen und machen es für durchschnittliche Internetuser außerdem einfacher Webseiten zu finden. Viele Webseiten rund um die Welt sind werden ihre host names mit der entsprechenden Domain name Registrierung für ihre Toplevel-Domains einrichten. Netscape 7.1 und Mozilla 1.4 spielen dabei eine signifikante Rolle, damit IDN weiter entwickelt wird.

+ +

Original author: Katsuhiko Momoi

+ +

 

diff --git a/files/de/updating_web_applications_for_firefox_3/index.html b/files/de/updating_web_applications_for_firefox_3/index.html new file mode 100644 index 0000000000..c727ef5df2 --- /dev/null +++ b/files/de/updating_web_applications_for_firefox_3/index.html @@ -0,0 +1,97 @@ +--- +title: Webanwendungen für Firefox 3 aktualisieren +slug: Updating_web_applications_for_Firefox_3 +tags: + - Firefox 3 +translation_of: Mozilla/Firefox/Releases/3/Updating_web_applications +--- +
{{FirefoxSidebar}}
+ +

{{ Fx_minversion_header(3) }} 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

+ + + +

{{ languages( {"en": "en/Updating_web_applications_for_Firefox_3", "es": "es/Actualizar_aplicaciones_web_para_Firefox_3", "fr": "fr/Mise_\u00e0_jour_des_applications_Web_pour_Firefox_3", "ja": "ja/Updating_web_applications_for_Firefox_3", "pl": "pl/Aktualizacja_aplikacji_internetowych_dla_Firefoksa_3" } ) }}

diff --git a/files/de/web/accessibility/understanding_wcag/index.html b/files/de/web/accessibility/understanding_wcag/index.html new file mode 100644 index 0000000000..fe71b20ebc --- /dev/null +++ b/files/de/web/accessibility/understanding_wcag/index.html @@ -0,0 +1,59 @@ +--- +title: Understanding the Web Content Accessibility Guidelines +slug: Web/Accessibility/Understanding_WCAG +tags: + - NeedsTranslation + - TopicStub + - WCAG + - Web Content Accessibility Guidelines +translation_of: Web/Accessibility/Understanding_WCAG +--- +

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

+ +

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

+ +

The four principles

+ +

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

+ +

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

+ + + +

Should I use WCAG 2.0 or 2.1?

+ +

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

+ +

What is WCAG 2.1?

+ +

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

+ +

WCAG 2.1 includes:

+ + + + + +

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

+ +

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

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

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

+ +
+

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

+
+ +

Guideline 1.1 — Providing text alternatives for non-text content

+ +

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

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

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

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

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

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

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

+ +

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

+
+ +
+

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

+
+ +

Guideline 1.2 — Providing text alternatives for time-based media

+ +

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

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

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

+
+ +

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

+ +

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

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

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

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

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

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

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

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

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

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

Understanding Orientation 

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

 

+ +

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

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

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

+
+ +

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

+ +

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

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

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

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

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

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

This follows, and builds on, criterion 1.4.3.

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

For text content presentation, the following should be true:

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

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

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

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

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

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

+
+ +

 

+ +

See Also

+ + + +

 

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

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

+ +

Eigenschaften

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

Beispiele

+ +

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

+ +

Spezifikationen

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

Browser Kompatibilität

+ +

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

+ +

Siehe auch

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

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

+ +

The AnimationEvent interface represents events providing information related to animations.

+ +

{{InheritanceDiagram}}

+ +

Properties

+ +

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

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

Constructor

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

Methods

+ +

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

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

Specifications

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

1.0 {{ property_prefix("webkit") }}

+ +

{{CompatChrome(43.0)}}

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

{{CompatChrome(43.0)}}

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

See also

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

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

+ +
+

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

+
+ +

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

+ +

Syntax

+ +

Alte Callbacksyntax:

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

Neue Promise basierte Syntax:

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

Beispiel

+ +

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

+ +

Ältere Callbacksyntax

+ +

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

+ +

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

+ +
+

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

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

Neue Promise basierte Syntax

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

Parameter

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

Rückgabewerte

+ +

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

+ +

Spezifikationen

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

Browserunterstützung

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

Siehe auch

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

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

+ +
+

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

+
+ +

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

+ +

Eigenschaften

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

Event handlers

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

Methoden

+ +

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

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

Obsolete Methoden

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

Beispiele

+ +

Grundsätzliche Deklarierung eines Audio Kontextes:

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

Browserunabhängige Variante:

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

Spezifikationen

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

Browserkompatibilität

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

Siehe auch

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

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

+ +
+

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

+
+ +

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

+ +

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

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

Eigenschaften

+ +

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

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

Methoden

+ +

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

+ +

Beispiel

+ +

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

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

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

+ +

Spezifikationen

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

Browser Kompatibilität

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

See also

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

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

+ +

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

+ +

AudioNodes participating in an AudioContext create a audio routing graph.

+ +

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

+ +

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

+ +
+

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

+
+ +

Properties

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

Methods

+ +

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

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

Example

+ +

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

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

Specifications

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

Browser compatibility

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

See also

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

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

+ +

Eigenschaften

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

Usage notes

+ +

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

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

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

+ +

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

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

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

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

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

+ +

Example

+ +

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

+ +

Specifications

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

Browser compatibility

+ + + +

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

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

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

+ +

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

+ +

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

+ +

Beispiel

+ +

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

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

Siehe auch die Beispiel in der Spezifikation.

+ +

Spezifikationen

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

Browser Kompatibilität

+ + + +

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

+ +

Siehe auch

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

{{ APIRef("File API") }}

+ +

Übersicht

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +
+

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

+
+ +

Konstruktor

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

Eigenschaften

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

Methoden

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

Beispiele:

+ +

Beispielanwendung des Blob-Konstruktors

+ +

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

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

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

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

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

+ +

Beispiel-Code:

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

Daten aus einem Blob lesen

+ +

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

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

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

+ +

Spezifikationen

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

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

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

Anmerkung zur slice()-Implementierung

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Anmerkungen zu Gecko

+ +

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

+ +

Chrome Code - Scope

+ +

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

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

Blobs sind auch in Worker-Scopes verfügbar.

+ +

Siehe auch

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

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

+ +

Syntax

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

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

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

+ +

Beispiel

+ +

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

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

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

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

Syntax

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

Parameter

+ +

Keine.

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

Rückgabewert

+ +

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

+ +

Beispiel

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

Syntax

+ +
var stream = responseInstance.body;
+ +

Wert

+ +

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

+ +

Beispiel

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

Syntax

+ +
var myBodyUsed = response.bodyUsed;
+ +

Wert

+ +

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

+ +

Beispiel

+ +

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

+ +

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

+ +

HTML Inhalt

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

JavaScript Inhalt

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

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

+ +

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +
+

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

+
+ +

Syntax

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

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

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

+ +

Beispiel

+ +

Wird nachgereicht.

+ +

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

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

+ +

Properties

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

Methods

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

Examples

+ +

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

+ +

HTML Content

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

JS Content

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

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

+ +

Specifications

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

Browser compatibility

+ + + +

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

+ +

See also

+ + + +

 

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

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

+ +

Syntax

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

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

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

+ +

Beispiel

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

Syntax

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

Parameter

+ +

Keine.

+ +

Rückgabewert

+ +

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

+ +

Beispiel

+ +

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

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

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

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

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

+ +
+

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

+
+ +

Syntax

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

Parameter

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

Rückgabewert

+ +

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

+ +

Exceptions

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

Das URL-Schema nicht http oder https ist.

+ +

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

+
+ +

Beispiele

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ +
+ + +

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

+
+ +

Weiterlesen

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

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

+ +

Zusammenfassung

+ +

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

+ +
+

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

+
+ +
+

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

+
+ +
+

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

+
+ +

Syntax

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

Argumente

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

Rückgabewert

+ +

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

+ +

Ausnahmen

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

Das URL Schama ist nicht http oder https.

+ +

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

+
+ +

Beispiele

+ +

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

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

Spezifikationen

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

Browserunterstützung

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

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

+ +

Siehe auch

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

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

+ +

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

+ +

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

+ +

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

+ +
+

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

+
+ +
+

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

+
+ +
+

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

+
+ +
+

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

+
+ +
+

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

+
+ +

Methods

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

Examples

+ +

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

+ +

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

+ +

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

+ +

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

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

Specifications

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

Browser compatibility

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

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

+ +

See also

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

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

+ +

Syntax

+ +
ctx.canvas;
+ +

Beispiele

+ +

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

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

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

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

Spezifikationen

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

Browser-Kompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

Syntax

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

Parameter

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

Beispiele

+ +

Benutzung der Methode fillRect

+ +

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

+ +

HTML

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

JavaScript

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

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

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

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

+ +

Spezifikationen

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

Browserkompatibilität

+ +

{{CompatibilityTable}}

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

Siehe auch

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

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

+ +

Syntax

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

Parameters

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

Rückgabewerte

+ +

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

+ +

Fehlertypen

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

Beispiele

+ +

Benutzung der getImageData Funktion

+ +

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

+ +

HTML

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

JavaScript

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

Specifications

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

Browser Kompatibilität

+ +

{{ CompatibilityTable}}

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

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

+ +

Sehen Sie auch

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

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

+ +

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

+ +

Ein einfaches Beispiel

+ +

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

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

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

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

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

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

Die enstandene Zeichnung sieht so aus:

+ +

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

+ +

Referenz

+ +

Rechtecke zeichnen

+ +

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

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

Text darstellen

+ +

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

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

Linienstile

+ +

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

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

Textstile

+ +

Die folgenden Eigenschaften bestimmen, wie Text dargestellt wird.

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

Füll- und Linienfarbe

+ +

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

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

Farbverläufe und Muster

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

Schatten

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

Pfade

+ +

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

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

Pfade zeichnen

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

Transformationen

+ +

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

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

Compositing

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

Bilder zeichnen

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

Pixelmanipulation

+ +

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

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

Bildglättung

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

Der Leinwand-Zustand

+ +

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

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

Trefferregionen

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

Filter

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

Unstandardisierte APIs

+ + + +

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

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

WebKit only

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

Gecko only

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

Prefixed APIs

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

Internal APIs (chrome-context only)

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

Internet Explorer

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

Specifications

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

Browser compatibility

+ +
+ + +

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

+
+ + + +

See also

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

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

+ +

Syntax

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

Parameter

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

Rückgabewert

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

Beispiele

+ +

Benutzung der Methode isPointInPath

+ +

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

+ +

HTML

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

JavaScript

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

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

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

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

+ +

Specifications

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

Browser compatibility

+ +

{{ CompatibilityTable() }}

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

Compatibility notes

+ + + +

See also

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

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

+ +

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

+ +

Syntax

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

Parameter

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

Beispiele

+ +

Die Methode scale verwenden

+ +

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

+ +

HTML

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

JavaScript

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

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

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

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

+ +

scale verwenden, um horizontal oder vertikal zu spiegeln

+ +

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

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

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

+ +

Spezifikationen

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

Browserkompabilität

+ +

{{ CompatibilityTable() }}

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

Siehe auch

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

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

+ +

Syntax

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

Parameters

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

Examples

+ +

Using the setLineDash method

+ +

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

+ +

HTML

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

JavaScript

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

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

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

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

+ +

Specifications

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

Gecko-specific notes

+ + + +

WebKit-specific notes

+ + + +

See also

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

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

+ +

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

+ +

Syntax

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

Optionen

+ +

Mögliche Werte:

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

Der Standardwert ist start.

+ +

Beispiele

+ +

Benutzung der textAlign Eigenschaft

+ +

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

+ +

HTML

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

JavaScript

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

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

+ + + +

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

+ +

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

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

+ +

Properties

+ +

There are neither inherited, nor specific properties.

+ +

Methods

+ +

There are no inherited methods.

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

Specifications

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

Polyfill

+ +

External on github: childNode.js

+ +

Browser compatibility

+ +

{{ CompatibilityTable }}

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

See also

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

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

+ +

Syntax

+ +
node.remove();
+
+ +

Beispiel

+ +

Benutzung von remove()

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

ChildNode.remove() kann nicht gescopet werden

+ +

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

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

Polyfill

+ +

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

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

Specifikationen

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

Browser compatibility

+ +
+ + +

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

+
+ +

Siehe auch

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

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

+ +

{{AvailableInWorkers}}

+ +

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

+ +

Syntax

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

Parameter

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

Beispiele

+ +

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

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

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

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

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

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

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

+ +

Spezifikationen

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

Browserkompatibilität

+ +

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

+ +

Siehe auch

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

Leert die Konsole.

+ +

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

+ +

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

+ +

Syntax

+ +
console.clear();
+
+ +

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

{{AvailableInWorkers}}

+ +

Syntax

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

Parameter

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

Beispiele

+ +

Nehmen wir folgenden Code als Beispiel:

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

Sieht die Ausgabe in der Konsole in etwa so aus:

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

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

+ +

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

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

Sieht die Ausgabe so aus:

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

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

+ +
+
+ +

Spezifikation

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

Browserkompatibilität

+ + + +

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

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

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

+ +

{{AvailableInWorkers}}

+ +

Syntax

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

Parameter

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

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

+ +

Spezifikationen

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

Browserkompatibilität

+ +
+ + +

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

+
+ +

Siehe auch

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

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

+ +

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

+ +

{{AvailableInWorkers}}

+ +

console-dir.png

+ +

Syntax

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

Parameter

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

Spezifikationen

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

Browserkompatibilität

+ +

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

+ +

Siehe auch

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

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

+ +

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

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

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

+ +

{{AvailableInWorkers}}

+ +

Methoden

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

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

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

Benutzung

+ +

Text auf der Konsole ausgeben

+ +

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

+ +

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

+ +

Ein einzelnes Objekt ausgeben

+ +

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

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

Die Ausgabe sieht ungefähr so aus:

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

Mehrere Objekte ausgeben

+ +

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

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

Diese Ausgabe sieht folgendermaßen aus:

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

String-Ersetzungen verwenden

+ +

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

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

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

+
%sGibt einen String aus.
%f +

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

+
+ +
+

Hinweis: Die Präzisionsformatierung funktioniert in Chrome nicht

+
+ +

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

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

Die Ausgabe sieht folgendermaßen aus:

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

Konsolenausgaben stylen

+ +

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

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

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

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

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

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

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

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

Die Ausgabe sieht folgendermaßen aus:

+ +

nesting.png

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

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

+ +

Zum Beispiel mit diesem Code:

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

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

+ +

timerresult.png

+ +

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

+ +
+

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

+
+ +

Stapelverfolgung (Strack Traces)

+ +

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

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

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

+ +

+ +

Spezifikationen

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

Browserkompatibilität

+ + + +

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

+ +

Hinweise

+ + + +

Siehe auch

+ + + +

Andere Implementierungen

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

Gibt eine Nachricht auf der Web-Konsole aus.

+ +

{{AvailableInWorkers}}

+ +

Syntax

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

Parameter

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

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

+ +

Spezifikationen

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

Browser Kompatibilität

+ +

{{CompatibilityTable}}

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

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

+ +

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

+ +

Unterschied zu console.dir()

+ +

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

+ +

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

+ +

+ +

Bemerkung:

+ + + +

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

+ +

Mehr Informationen dazu finden Sie unter Chrome Console API reference.

+ +

Siehe auch

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

Zeigt tabellarische Daten als Tabelle im Log an.

+ +

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

+ +

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

+ +

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

+ +

{{AvailableInWorkers}}

+ +

Sammlungen (Collections) mit primitiven Datentypen

+ +

Der data Parameter kann ein Array oder ein Objekt sein.

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

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

+ +

Sammlungen (Collections) mit zusammengesetzen Typen

+ +

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

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

Table displaying array of arrays

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

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

+ +

Table displaying array of objects

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

Table displaying object of objects

+ +

Auswahl der anzuzeigenden Spalten

+ +

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

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

Table displaying array of objects with filtered output

+ +

Tabelle sortieren

+ +

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

+ +

Syntax

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

Parameter

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

Spezifikationen

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

Browserkompatibilität

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

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

+ +

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

+ +

{{AvailableInWorkers}}

+ +

Syntax

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

Parameter

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

Spezifikationen

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

Browser compatibility

+ + + +

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

+ +

See also

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

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

+ +

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

+ +

{{AvailableInWorkers}}

+ +

Syntax

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

Parameter

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

Specifications

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

Browser compatibility

+ +
+ + +

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

+
+ +

See also

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

Ausgabe einer Warnmeldung in der Web-Konsole.

+ +

{{AvailableInWorkers}}

+ +

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

+ +

Syntax

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

Parameter

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

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

+ +

Spekifikationen

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

Browser Kompatibilität

+ +

{{CompatibilityTable}}

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

Siehe auch

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

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

+ +

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

+ +

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

+ +

Eigenschaften

+ +

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

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

Methoden

+ +

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

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

Spezifikationen

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

Browser-Kompatibilität

+ +
+ + +

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

+
+ +

Siehe auch

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

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

+ +

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

+ +

Syntax

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

Parameter

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

Beispiele

+ +

Grundlegende Ergebnisse

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

Verwendung im Kontext

+ +

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

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

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

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

Spezifikation

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

Browserkompatibilität

+ + + +

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

+ +

Siehe auch

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

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

+ +

Properties

+ +

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

+ +

Static properties

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

Methods

+ +

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

+ +

Static methods

+ +

No inherited static methods.

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

Specifications

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

Browser compatibility

+ + + +

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

+ +

See Also

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

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

+ +

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

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

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

+ +

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

+ +

CSS paint worklet

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Das paint worklet verwenden

+ +

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

+ +

Das worklet anmelden

+ +

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

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

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

+ +

In unserem Beispiel ist das worklet auf GitHub gespeichert.

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

Auf das paint worklet in CSS verweisen

+ +

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

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

Alles zusammensetzen

+ +

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

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

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

+
+ +

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

+ +

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

+ +

PaintSize

+ +

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

+ +

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

+ +

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

+ +

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

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

Der Code unterscheidet sich an zwei Stellen vom ersten Beispiel:

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

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

+ + + +

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

+ +

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

+ +

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

+ +

Properties anpassen

+ +

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

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

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

+ +

Example

+ +
+

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

+ +

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

+ +

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

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

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

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

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

+ +

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

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

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

+ +

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

+ +

Komplexität hinzufügen

+ +

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

+ +

Werfen wir einen Blick auf ein komplexeres Beispiel.

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

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

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

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

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

Und wir melden das worklet an:

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

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

+ +

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

+ +

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

+
+ +

Parameter übergeben

+ +

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

+ +

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

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

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

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

Und wenn wir darauf zugreifen wollen:

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

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

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

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

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

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

+ +

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

+ +

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

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

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

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

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

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

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

+ +

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

+ +

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

+ +

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

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

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

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

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

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

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

+ +

Siehe auch

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

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

+ +

Concepts and usage

+ +

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

+ +

For example:

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

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

+ +

Interfaces

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

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

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

Dictionaries

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

Examples

+ +

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

+ +

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

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

We then include the paintWorklet:

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

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

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

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

+ +

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

+ +

Specifications

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

Browser compatibility

+ +

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

+ +

See Also

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

{{ APIRef("CSSOM") }}

+ +

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

+ +

Syntax

+ +

Die Syntax wird mittels der WebIDL definiert.

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

Eigenschaften

+ +

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

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

Methoden

+ +

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

+ +

Spezifikationen

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

Browser Kompatibilität 

+ +

{{ CompatibilityTable() }}

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

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

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

{{ APIRef("CSSOM") }}

+ +

Übersicht

+ +

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

+ +

Syntax

+ +

Die Syntax wird im WebIDL Format beschrieben.

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

Eigenschaften

+ +

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

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

Methoden

+ +

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

+ +

Spezifikationen

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

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

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

Übersicht

+

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

+

Syntax

+
string = cssRule.cssText
+
+

Beispiel

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

Spezifikation

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

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

+ +

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

+ +

Syntax

+ +

The syntax is described using the WebIDL format.

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

Properties common to all CSSRule instances

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

Constants

+ +

Type constants

+ +

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

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

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

+ +

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

+ +

Specifications

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

Browser compatibility

+ +

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

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

See also

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

{{APIRef("CustomElementRegistry")}}

+ +

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

+ +

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

+ + + +

Syntax

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

Parameter

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

Return value

+ +

Void.

+ +

Ausnahmebehandlung

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

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

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

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

+
+ +

Beispiele

+ +

Autonomes benutzerdefiniertes Element

+ +

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

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

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

+
+ +

Benutzerdefiniertes integriertes Element

+ +

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

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

Spezifikationen

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

Browserkompatibilität

+ +
+ + +

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

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

{{DefaultAPISidebar("Web Components")}}

+ +

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

+ +

Methods

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

Examples

+ +

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

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

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

+
+ +

Specifications

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

Browser compatibility

+ +

 

+ + + +

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

+ +

 

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

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

+ +

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

+ +

Eigenschaften

+ +

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

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

Von WorkerGlobal Scope geerbte Eigenschaften

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

Eventhandler

+ +

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

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

Methoden

+ +

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

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

Geerbt vom WorkerGlobalScope

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

Aus verschiedenen Orten implementiert

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

Spezifikationen

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

Browser Kompatibilität

+ +
+ + +

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

+
+ +

Siehe auch

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

Das messageEreignis wird auf ein DedicatedWorkerGlobalScopeObjekt ausgelöst, wenn der Worker eine Nachricht von seinem übergeordneten Objekt empfängt (dh wenn der übergeordnete Benutzer eine Nachricht sendet mit Worker.postMessage()).

+ + + + + + + + + + + + + + + + + + + + +
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler propertyonmessage
+ +

Examples

+ +

Dieser Code erstellt einen neuen Worker und sendet ihm eine Nachricht mit Worker.postMessage():

+ +
const worker = new Worker("static/scripts/worker.js");
+
+worker.addEventListener('message', (event) => {
+    console.log(`Received message from worker: ${event.data}`)
+});
+ +

Der Worker kann auf diese Nachricht warten, indem er addEventListener() verwendet:

+ +
// inside static/scripts/worker.js
+
+self.addEventListener('message', (event) => {
+    console.log(`Received message from parent: ${event.data}`);
+});
+ +

Alternativ könnte er es mit der onmessage Event-Handler-Eigenschaft abhören:

+ +
// static/scripts/worker.js
+
+self.onmessage = (event) => {
+    console.log(`Received message from parent: ${event.data}`);
+};
+ +

Specifications

+ + + + + + + + + + + + +
SpecificationStatus
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ + + +

{{Compat("api.DedicatedWorkerGlobalScope.message_event")}}

+ +

See also

+ + diff --git a/files/de/web/api/document/adoptnode/index.html b/files/de/web/api/document/adoptnode/index.html new file mode 100644 index 0000000000..c996e689c5 --- /dev/null +++ b/files/de/web/api/document/adoptnode/index.html @@ -0,0 +1,53 @@ +--- +title: Document.adoptNode() +slug: Web/API/Document/adoptNode +translation_of: Web/API/Document/adoptNode +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +

Überträgt einen Knoten. Der Knoten und sein Unterbaum werden aus dem Dokument, in dem sie sich befinden entfernt (so vorhanden), und sein ownerDocument wird zu dem aktuellen Dokument geändert. Der Knoten kann dann in das aktuelle Dokument eingefügt werden.

+ +

Unterstützt seit Gecko 1.9 (Firefox 3)

+ +

Syntax

+ +
knoten = document.adoptNode(externerKnoten);
+
+ +
+
   knoten
+
Ist der übertragene Knoten, welcher nun dieses Dokument als sein ownerDocument hat.  Der Elternknoten (parentNode) is null, da er noch nicht in den Dokumentenbaum eingefügt wurde. Zu beachten ist, dass knoten und externerKnoten nach dem Funktionsaufruf das gleiche Objekt sind.  
+
externerKnoten
+
Ist der Knoten eines anderes Dokumentes, der übertragen werden soll.
+
+ +

Beispiel

+ +

{{todo}}

+ +

Anmerkungen

+ +

Es kann oassieren, dass der Aufruf von adoptNode fehlschlägt, wenn der Ursprungsknoten von einer anderen Implementierung kommt, was aber bei Browser-Implementierungen kein Problem darstellen sollte.

+ + +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they + can be inserted into the current document. For more on the Node.ownerDocument issues, see the + W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many + sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for + improved future compatibility.

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/alinkcolor/index.html b/files/de/web/api/document/alinkcolor/index.html new file mode 100644 index 0000000000..0c656de5cc --- /dev/null +++ b/files/de/web/api/document/alinkcolor/index.html @@ -0,0 +1,30 @@ +--- +title: Document.alinkColor +slug: Web/API/Document/alinkColor +translation_of: Web/API/Document/alinkColor +--- +

{{APIRef("DOM")}} {{ Deprecated_header() }}

+ +

Gibt das Farbattribut eines aktiven Links im Dokumenten body wieder oder setzt es. Ein Link wird in der Zeit eines mousedown und mouseup Events als "aktiv" bezeichnet .

+ +

Syntax

+ +
color = document.alinkColor
+document.alinkColor =color
+
+ +

color ist ein String der den Namen der Farbe (z.B., "blue", "darkblue", etc.) oder  den Hexadezimalwert der Farbe(z.B., #0000FF) enthält. Die Farben samt zugehöriger Hexadezimalcodes können zum Teil hier oder auf ähnlichen Seiten eingesehen werden: https://html-color-codes.info/

+ +

Anmerkungen

+ +

Der Default Wert dieser Eigenschaft in Mozilla Firefox ist rot (#ee0000 in hexadezimal).

+ +

document.alinkColor ist laut DOM Level 2 HTML veraltet. Eine Alternative wäre der CSS Selektor {{ Cssxref(":active") }}.

+ +

Eine weitere Alternative ist document.body.aLink, obwohl diese laut HTML 4.01 ebenfalls veraltet ist und der CSS Selektor präferiert wird.

+ +

Gecko unterstützt sowohl alinkColor/:active als auch{{ Cssxref(":focus") }}. Der Internet Explorer 6 und 7 unterstützen lediglich alinkColor/:active für HTML anchor (<a>) links und verhält sich ähnlich wie :focus bei Gecko. :focus wird im IE nicht unterstützt.

+ +

Browser compatibility

+ +

{{Compat("api.Document.alinkColor")}}

diff --git a/files/de/web/api/document/body/index.html b/files/de/web/api/document/body/index.html new file mode 100644 index 0000000000..cc546cb0ae --- /dev/null +++ b/files/de/web/api/document/body/index.html @@ -0,0 +1,140 @@ +--- +title: Document.body +slug: Web/API/Document/body +translation_of: Web/API/Document/body +--- +
{{APIRef("DOM")}}
+ +

Gibt den {{HTMLElement("body")}} oder {{HTMLElement("frameset")}} Knoten des aktuellen Dokuments wieder, oder null falls keines dieser Elemente existiert.

+ +

Syntax

+ +
var objRef = document.body;
+document.body = objRef;
+ +

Beispiel

+ +
// in HTML: <body id="oldBodyElement"></body>
+alert(document.body.id); // "oldBodyElement"
+
+var aNewBodyElement = document.createElement("body");
+
+aNewBodyElement.id = "newBodyElement";
+document.body = aNewBodyElement;
+alert(document.body.id); // "newBodyElement"
+
+ +

Anmerkungen

+ +

document.body ist das Element, welches den Inhalt eines Dokuments enthält. In Dokumenten mit <body> Inhalt, gibt das <body> Element den Inhalt aus, in Frameset Dokumenten wiederum, wird das äußerste <frameset> Element ausgegeben.

+ +

Da body setzbar ist, wird das Setzen eines neuen Body Elements alle aktuellen Elemente des existierenden <body> Elements entfernen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-body','Document.body')}}{{Spec2('HTML5 W3C')}} 
{{SpecName('DOM2 HTML','html.html#ID-56360201','Document.body')}}{{Spec2('DOM2 HTML')}} 
{{SpecName('DOM1','level-one-html.html#attribute-body','Document.body')}}{{Spec2('DOM1')}}Initiale Definition.
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1{{CompatVersionUnknown}}269.6 (möglicherweise früher)4 (möglicherweise früher)
+
+ +
+

 

+ +
+
    +
  1. +

    Obwohl document.body eine sehr gute Methode ist, um das <body> Element in HTML anzusprechen, wird es von Firefox nicht unterstützt, wenn der Content-Type nicht text/html oder application/xhtml+xml ist. Eine sicherere Methode um das <body> Element anzusprechen ist es, document.getElementsByTagName("body") zu verwenden, welches einen Array mit einem einzigen Item ausgibt. Das ist übertragbar auf HTML und XHTML. Bei denen ist der Content-Type nicht im HTTP response header angegeben.

    +
    2. +
+
+ +

 

+ + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}5 (probably earlier)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/createattribute/index.html b/files/de/web/api/document/createattribute/index.html new file mode 100644 index 0000000000..009c6c898d --- /dev/null +++ b/files/de/web/api/document/createattribute/index.html @@ -0,0 +1,76 @@ +--- +title: Document.createAttribute() +slug: Web/API/Document/createAttribute +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/createAttribute +--- +
{{ ApiRef("DOM") }}
+ +

createAttribute erstellt einen neuen Attributsknoten und gibt ihn zurück.

+ +

Syntax

+ +
attribute = document.createAttribute(name)
+
+ +

Parameter

+ + + +

Beispiel

+ +
<html>
+
+<head>
+<title> create/set/get Attribut Beispiel</title>
+
+<script type="text/javascript">
+
+function doAttrib() {
+  var node = document.getElementById("div1");
+  var a = document.createAttribute("my_attrib");
+  a.value = "newVal";
+  node.setAttributeNode(a);
+  alert(node.getAttribute("my_attrib")); // "newVal"
+}
+
+// Alternative form ohne die Verwendung von createAttribute
+//function doAttrib() {
+//  var node = document.getElementById("div1");
+//  node.setAttribute("my_attrib", "newVal");
+//  alert(node.getAttribute("my_attrib")); // "newVal"
+//}
+
+</script>
+</head>
+
+<body onload="doAttrib();">
+<div id="div1">
+<p>Some content here</p>
+</div>
+</body>
+</html>
+
+ +

Bemerkungen

+ +

Der Rückgabewert ist ein Knoten des Typs attribute. Sobald man diesen wie im vorangegangenen Beispiel hat, kann man ihren Wert festlegen, indem man der nodeValue property einen String zuweist, oder in der alternativen Form durch Benutzung der setAttribute() Methode. Der DOM beschränkt auf diese Art nicht, welche Arten von Attributen an das jeweilige Element zugewiesen werden dürfen.

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/createdocumentfragment/index.html b/files/de/web/api/document/createdocumentfragment/index.html new file mode 100644 index 0000000000..e7ba848e49 --- /dev/null +++ b/files/de/web/api/document/createdocumentfragment/index.html @@ -0,0 +1,137 @@ +--- +title: Document.createDocumentFragment() +slug: Web/API/Document/createDocumentFragment +tags: + - API + - DOM + - Document + - DocumentFragment + - Method + - Reference +translation_of: Web/API/Document/createDocumentFragment +--- +
{{ApiRef("DOM")}}
+ +

Erzeugt ein neues {{domxref("DocumentFragment")}} Objekt.

+ +

Syntax

+ +
var fragment = document.createDocumentFragment();
+
+ +

fragment ist hierbei eine Referenz zu einem neu erstellten, leeren {{domxref("DocumentFragment")}} Objekt.

+ +

Beschreibung

+ +

DocumentFragments sind DOM Knoten (DOM Nodes). Sie sind nicht Teil des Haupt- oder Seiten-DOM-Baums. Üblicherweise werden sie verwendet, um einen Teilbaum mit Objekten und Unterobjekten zu erstellen und das Ergebnis anschließend in den Seiten-DOM-Baum einzufügen. In dem DOM-Baum wird das document fragment dann ersetzt mit allen Kindelementen.

+ +

Da das gesamte DocumentFragment nur im Speicher vorliegt ("in memory") und nicht Teil des Seiten-DOM-Baums ist, führen Veränderungen in dem DocumentFragment, wie etwa das Hinzufügen von Elementen, nicht zu einem page reflow (die Berechnung der Element Positionen und Geometrie). Dementsprechend führt die Nutzung von DocumentFragments zu einer besseren Performance.

+ +

Beispiel

+ +

Dieses Beispiel erzeugt eine Liste gängiger Browser.

+ +

HTML

+ +
<ul id="ul">
+</ul>
+ +

JavaScript

+ +
var element  = document.getElementById('ul'); // assuming ul exists
+var fragment = document.createDocumentFragment();
+var browsers = ['Firefox', 'Chrome', 'Opera',
+    'Safari', 'Internet Explorer'];
+
+browsers.forEach(function(browser) {
+    var li = document.createElement('li');
+    li.textContent = browser;
+    fragment.appendChild(li);
+});
+
+element.appendChild(fragment);
+
+ +

Resultat

+ +

{{EmbedLiveSample("Example", 600, 140)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusAnmerkungen
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}{{Spec2('DOM WHATWG')}}Initiale Definition in der DOM 1 Spezifikation
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/document/createelement/index.html b/files/de/web/api/document/createelement/index.html new file mode 100644 index 0000000000..8b053c1379 --- /dev/null +++ b/files/de/web/api/document/createelement/index.html @@ -0,0 +1,153 @@ +--- +title: Document.createElement() +slug: Web/API/Document/createElement +tags: + - API + - DOM + - Document + - Method + - Méthode +translation_of: Web/API/Document/createElement +--- +
{{APIRef("DOM")}}
+ + + +

In einem HTML Dokument erstellt die Document.createElement() Methode ein spezifiziertes HTML Element oder ein {{domxref("HTMLUnknownElement")}} wenn der gegebene Elementname ein unbekannter ist.

+ +

Syntax

+ +
var element = document.createElement(tagName, [optionen]);
+
+ +

Parameter

+ +
+
tagName
+
Ein String der den Typ des zu erstellenden Elements spezifiziert. Der/Die/Das {{domxref("Node.nodeName", "nodeName")}} des erstellten Elements ist mit dem Wert von tagName initialisiert. Benutze keine qualifizierten Namen (wie "html:a") mit dieser Methode.
+
optionen {{optional_inline}}
+
Ein optionales ElementCreationOptions-Objekt, welches eine einzige Eigenschaft namens is besitzt, deren Wert der Name des Tags für ein benutzerdefiniertes Element ist. Dieses benutzerdefinierte Element muss vorher mit customElements.define() definiert werden. Für mehr Informationen siehe {{anch("Web component example")}}.
+
+ +

Rückgabewert

+ +

Das neue Element.

+ +

Beispiele

+ +

Grundlegendes Beispiel

+ +

Dies erstellt ein neues <div> und fügt es vor dem Element mit der ID div1 ein.

+ +
+

HTML

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>||Arbeiten mit Elementen||</title>
+</head>
+<body>
+  <div id="div1">Der obere Text wurde dynamisch erstellt.</div>
+</body>
+</html>
+
+ +

JavaScript

+ +
document.body.onload = addElement;
+
+function addElement () {
+  // erstelle ein neues div Element
+  // und gib ihm etwas Inhalt
+  var newDiv = document.createElement("div");
+  var newContent = document.createTextNode("Hi there and greetings!");
+  newDiv.appendChild(newContent); // füge den Textknoten zum neu erstellten div hinzu.
+
+  // füge das neu erstellte Element und seinen Inhalt ins DOM ein
+  var currentDiv = document.getElementById("div1");
+  document.body.insertBefore(newDiv, currentDiv);
+}
+
+ +

{{EmbedLiveSample("Basic_example", 500, 50)}}

+ +

Web-Komponentenbeispiel 

+ +

Das folgende Beispiel wurde aus dem Beispiel expanding-list-web-component entnommen (Siehe es live). In diesem Fall erweitert unser Custom-Element die {{domxref("HTMLUListElement")}}, welche das {{htmlelement("ul")}}  Element repräsentiert. 

+ +
// Erstelle eine Klasse für das Element
+class ExpandingList extends HTMLUListElement {
+  constructor() {
+    // Rufe immer super() in einem Konstruktor auf.
+    super();
+
+    // Konstruktordefinition wurde der kürze halber weggelassen
+    ...
+  }
+}
+
+// Definiere das neue Element
+customElements.define('expanding-list', ExpandingList, { extends: "ul" });
+ +

Würden wir eine Instanz dieses Elements programmatisch erstellen wollen, so würden wir einen Aufruf über den folgenden Ausschnitt machen: 

+ +
let expandingList = document.createElement('ul', { is : 'expanding-list' })
+ +

Dem neuen Element wird ein is Attribut hinzugefügt, dessen Wert das Custom-Element's Tag-Name ist. 

+ +
+

Notiz: Für Backwards-Kompatiblität mit früheren Versionen der Spezifikationen des Custom-Elements, erlauben einige Browser einen String, statt einem Objekt, als Parameter zu übergeben, wobei der Wert des Strings der Tag-Name des Custom-Elements ist. 

+
+ +

Notizen

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', "#dom-document-createelement", "Document.createElement")}}{{Spec2('DOM WHATWG')}}
+ + + +

Browser-Kompatibiltät

+ +

{{Compat("api.Document.createElement")}}

+ +

Siehe auch

+ + + + diff --git a/files/de/web/api/document/createelementns/index.html b/files/de/web/api/document/createelementns/index.html new file mode 100644 index 0000000000..3f310fdb49 --- /dev/null +++ b/files/de/web/api/document/createelementns/index.html @@ -0,0 +1,175 @@ +--- +title: Document.createElementNS() +slug: Web/API/Document/createElementNS +translation_of: Web/API/Document/createElementNS +--- +
{{ApiRef("DOM")}}
+ +
Erzeugt ein Element mit der angegebenen Namespace-URL und einem Namen.
+ +
 
+ +
Um ein Element zu definieren, ohne eine Namespace-URL anzugeben, verwenden Sie die Methode createElement.
+ +

Syntax

+ +
var element = document.createElementNS(namespaceURI, qualifiedName[, options]);
+
+ +

Parameter

+ +
+
namespaceURI
+
Ein String, der die mit dem Element verknüpfte Namespace-URL angibt. Die Eigenschaft namespaceURI des neu erstellten Elements wird mit dem Wert von namespaceURI initialisiert (siehe Gültige Namespace-URLs).
+
qualifiedName
+
Ein String, der den Namen des Elements angibt. Die Eigenschaft nodeName des neu erstellten Elements wird mit dem Wert von qualifiedName initialisiert.
+
optionsOptional
+
Das optionale Objekt ElementCreationOptions enthält eine einzelne Eigenschaft mit Namen  is, dessen Wert der Tag-Name eines zuvor mit customElements.define() definierten angepassten Elements ist. Aus Gründen der Abwärtskompatibilität erlauben einige Browser hier auch die Übergabe eines Strings mit dem Taf-Namen (s. Custom Elements specification). Siehe Extending native HTML elements für weitere Informationen zur Verwendung dieses Parameters.
+
Das neue Element erhält ein Attribut mit Namen is dessen Wert den Tag-Namen des Elements enthält. Angepasste Elemente sind ein experimentelles Feature, das nich in allen Browsern verfügbar ist.
+
+ +

Rückgabewert

+ +

Das neu erstelle Element.

+ +

Gültige Namespace-URLs

+ + + +

Beispiel

+ +

Dies erstellt ein neues Element vom Typ <div> im XHTML-Namespace und fügt es dem vbox-Element hinzu. Obwohl dies kein besonders sinnvolles XUL-Document ist, demonstriert es die Verwendung von Elementen verschiedener Namespaces innerhalb eines Dokuments:

+ +
<?xml version="1.0"?>
+<page xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+      xmlns:html="http://www.w3.org/1999/xhtml"
+      title="||Working with elements||"
+      onload="init()">
+
+<script type="text/javascript"><![CDATA[
+ var container;
+ var newdiv;
+ var txtnode;
+
+ function init(){
+   container = document.getElementById("ContainerBox");
+   newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","div");
+   txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
+   newdiv.appendChild(txtnode);
+   container.appendChild(newdiv);
+ }
+
+]]></script>
+
+ <vbox id='ContainerBox' flex='1'>
+  <html:div>
+   The script on this page will add dynamic content below:
+  </html:div>
+ </vbox>
+
+</page>
+
+ +
+

Das obige Beispiel verwendet ein Inline-Skript, was für XHTML-Dokumente nicht empfohlen wird. Dieses Beispiel ist eigentlich ein XUL-Dokument mit eingebettetem XHTML. Nichts desto trotz bleibt die Empfehlung bestehen.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezigikationStatusKpmmentar
{{SpecName('DOM WHATWG', "#dom-document-createelementns", "Document.createElement")}}{{Spec2('DOM WHATWG')}} 
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
options argument{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatGeckoDesktop(50)}}[2][3]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In vorangegangenen Versionen dieser Spezifikation war dieses Argument ein einfacher String, dessen Wert der Tag-Name eines angepassten Elements ist. Aus Gründen der Abwärtskompatibilität akzeptiert Chrome hier beide Formate

+ +

[2] Siehe [1] oben: Wie Chrome, akzeptiert hier auch Firefox einen String anstelle eines Objekts. Allerdings erst ab Version 51 aufwärts. In Version 50 muss  options ein Objekt sein.

+ +

[3] Um in Firefox mit angepassten Elementen zu experimentieren müssen die Einstellungen  dom.webcomponents.enabled und dom.webcomponents.customelements.enabled auf true gesetzt werden.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/createtextnode/index.html b/files/de/web/api/document/createtextnode/index.html new file mode 100644 index 0000000000..53fae2cc1c --- /dev/null +++ b/files/de/web/api/document/createtextnode/index.html @@ -0,0 +1,131 @@ +--- +title: Document.createTextNode() +slug: Web/API/Document/createTextNode +tags: + - API + - DOM + - Méthode + - Referenz + - Textknoten + - Textnode +translation_of: Web/API/Document/createTextNode +--- +
{{APIRef("DOM")}}
+ +

Erzeugt einen Textknoten.

+ +

Syntax

+ +
var text = document.createTextNode(data);
+
+ + + +

Example

+ +
<!DOCTYPE html>
+<html lang="en">
+<head>
+<title>createTextNode example</title>
+<script>
+function addTextNode(text) {
+  var newtext = document.createTextNode(text),
+      p1 = document.getElementById("p1");
+
+  p1.appendChild(newtext);
+}
+</script>
+</head>
+
+<body>
+  <button onclick="addTextNode('JA! ');">JA!</button>
+  <button onclick="addTextNode('NEIN! ');">NEIN!</button>
+  <button onclick="addTextNode('WIR SCHAFFEN DAS! ');">WIR SCHAFFEN DAS!</button>
+
+  <hr />
+
+  <p id="p1">Erste Zeile des Absatzes.</p>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName("DOM3 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM3 Core")}}Keine Änderung
{{SpecName("DOM2 Core", "core.html#ID-1975348127", "Document.createTextNode()")}}{{Spec2("DOM2 Core")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/de/web/api/document/createtreewalker/index.html b/files/de/web/api/document/createtreewalker/index.html new file mode 100644 index 0000000000..61e526b92c --- /dev/null +++ b/files/de/web/api/document/createtreewalker/index.html @@ -0,0 +1,241 @@ +--- +title: Document.createTreeWalker() +slug: Web/API/Document/createTreeWalker +tags: + - API + - DOM + - DOM-Referenz + - Document + - Dokument + - Méthode +translation_of: Web/API/Document/createTreeWalker +--- +
{{ApiRef("Document")}}
+ +

Die Methode Document.createTreeWalker() erzeugt ein neues {{domxref("TreeWalker")}} Objekt und gibt dieses zurück.

+ +

Syntax

+ +
treeWalker = document.createTreeWalker(wurzel, anzeigeFilter, filter, entityReferenceExpansion);
+
+ +

Parameter

+ +
+
wurzel
+
Ist der Ursprungs- oder Wurzelknoten {{domxref("Node")}} des {{domxref("TreeWalker")}}-Durchlaufens. Normalerweise ist dies ein Element, das zum Dokument gehört.
+ +
anzeigeFilter {{optional_inline}}
+
Optionale unsigned longBitmaske, erstellt durch bitweise ODER-Verknüpfung der Konstanten von NodeFilter. Erlaubt eine bequeme Filterung auf bestimmte Knotentypen. Der Standardwert ist 0xFFFFFFFF, auch repräsentiert durch die SHOW_ALL-Konstante. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Konstantenumerischer WertBeschreibung
NodeFilter.SHOW_ALL-1 (Maximalwert von unsigned long)Zeigt alle Knoten.
NodeFilter.SHOW_ATTRIBUTE {{deprecated_inline}}2Zeigt Attribut-Knoten {{domxref("Attr")}}. Das ist nur sinnvoll, wenn der {{domxref("TreeWalker")}} mit einem {{domxref("Attr")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der Attribut-Knoten an der ersten Position bei der Durchquerung. Da Attribute nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.
NodeFilter.SHOW_CDATA_SECTION {{deprecated_inline}}8Zeigt {{domxref("CDATASection")}}-Knoten.
NodeFilter.SHOW_COMMENT128Zeigt {{domxref("Comment")}}-Knoten.
NodeFilter.SHOW_DOCUMENT256Zeigt {{domxref("Document")}}-Knoten.
NodeFilter.SHOW_DOCUMENT_FRAGMENT1024Zeigt {{domxref("DocumentFragment")}}-Knoten.
NodeFilter.SHOW_DOCUMENT_TYPE512Zeigt {{domxref("DocumentType")}}-Knoten.
NodeFilter.SHOW_ELEMENT1Zeigt {{domxref("Element")}}-Knoten.
NodeFilter.SHOW_ENTITY {{deprecated_inline}}32Zeigt {{domxref("Entity")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Entity")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Entity")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.
NodeFilter.SHOW_ENTITY_REFERENCE {{deprecated_inline}}16Shows {{domxref("EntityReference")}} nodes.
NodeFilter.SHOW_NOTATION {{deprecated_inline}}2048Zeigt {{domxref("Notation")}}-Knoten. Dies ist nur sinnvoll, wenn ein {{domxref("TreeWalker")}} mit einem {{domxref("Notation")}}-Knoten als Wurzel erzeugt wird. In diesem Fall erscheint der {{domxref("Notation")}}-Knoten an der ersten Position bei der Durchquerung. Da Entity-Knoten nie Kind-Knoten anderer Knoten sind, erscheinen sie nicht, wenn der Dokumentenbaum durchlaufen wird.
NodeFilter.SHOW_PROCESSING_INSTRUCTION64Zeigt {{domxref("ProcessingInstruction")}}-Knoten.
NodeFilter.SHOW_TEXT4Zeigt {{domxref("Text")}}-Knoten.
+
+ +
filter {{optional_inline}}
+
Ein optionaler {{domxref("NodeFilter")}}. Muss ein ein Objekt mit einer Methode namens acceptNode sein, die vom {{domxref("TreeWalker")}} aufgerufen wird. Diese Methode entscheidet, ob ein übergebener Knoten, der schon von anzeigeFilter durchgelassen wurde, ausgegeben wird oder nicht.
+ +
entityReferenceExpansion {{optional_inline}} {{obsolete_inline}}
+
Optionaler {{domxref("Boolean")}}-Schalter. Entscheidet, ob der Teilbaum unter einer {{domxref("EntityReference")}} ausgelassen werden soll, wenn das Element ausgelassen wird.
+
+ +

Beispiel

+ +

Das folgende Beispiel läuft über alle Knoten im body, filtert die Menge auf Elementknoten und gibt im filter jeden Knoten als durchlässig an (die Filterung auf die Elementknoten hätte auch in der acceptNode()-Methode erfolgen können). +Mithilfe des treeWalker werden alle durchgelassenen Knoten in ein Array gesammelt.

+ +
var treeWalker = document.createTreeWalker(
+  document.body,
+  NodeFilter.SHOW_ELEMENT,
+  { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },
+  false
+);
+
+var nodeList = [];
+
+while(treeWalker.nextNode()) nodeList.push(treeWalker.currentNode);
+
+ +

Spezfikationen

+ + + + + + + + + + + + + + + + + + + +
SpezfikationStatusBemerkung
{{SpecName('DOM WHATWG', '#dom-document-createtreewalker', 'Document.createTreeWalker')}}{{Spec2('DOM WHATWG')}}expandEntityReferences-Parameter wurde entfernt. whatToShow- und filter-Parameter wurden als optional markiert.
{{SpecName('DOM2 Traversal_Range', 'traversal.html#NodeIteratorFactory-createTreeWalker', 'Document.createTreeWalker')}}{{Spec2('DOM2 Traversal_Range')}}Initiale Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
grundsätzliche Unterstützung1.0{{CompatGeckoDesktop("1.8.1")}}9.09.03.0
whatToShow und filter optional1.0{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences1.0{{CompatGeckoDesktop("1.8.1")}}
+ In {{CompatGeckoDesktop("12")}} entfernt.		9.09.03.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatGeckoMobile("1.8.1")}}{{CompatVersionUnknown}}9.03.0
whatToShow und filter optional{{CompatVersionUnknown}}{{CompatGeckoDesktop("12")}}{{CompatNo}}{{CompatVersionUnknown}}3.0
expandEntityReferences{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8.1")}}
+ In {{CompatGeckoDesktop("12")}} entfernt		{{CompatVersionUnknown}}9.03.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/dir/index.html b/files/de/web/api/document/dir/index.html new file mode 100644 index 0000000000..532837e9dd --- /dev/null +++ b/files/de/web/api/document/dir/index.html @@ -0,0 +1,95 @@ +--- +title: Document.dir +slug: Web/API/Document/dir +translation_of: Web/API/Document/dir +--- +

{{ApiRef("")}}

+ +

Die Document.dir Eigenschaft ist ein {{domxref("DOMString")}}, welcher die direktionaler Bedeutung von einem Text eines Dokuments repräsentiert. Entweder von links nach rechts (Standard) oder rechts nach links. Mögliche Werte sind 'rtl' rechts nach links, und 'ltr', links nach rechts.

+ +

Syntax

+ +
dirStr = document.dir;
+document.dir = dirStr;
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("HTML WHATWG", "dom.html#the-dir-attribute:dom-dir", "Document.dir")}}{{Spec2("HTML WHATWG")}}Initiale Spezifikation
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basis Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basis Unterstützung{{ CompatUnknown() }}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Vor Firefox 23, hat die Document.dir Eigenschaft "ltr" wiedergegeben. unabhängig der Einstellung von dem dir-Attribut im Haupt-Element (root) {{htmlelement("html")}}. Und wenn eine Richtung im <html> gesetzt war, hatte die Veränderung der Sichtbarkeit keinen Effekt (obwohl der spätere Abruf des Document.dir wird behaupten, dass die Direktionalität geändert wurde). Wenn ein solches Attribut nicht im <html> gesetzt ist und die Eigenschaft geändert wurde, werden beide sichtbaren direktionale geändert und die document.dir  Eigenschaft wird die Änderung korrekt wiedergeben.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/document/index.html b/files/de/web/api/document/document/index.html new file mode 100644 index 0000000000..ce3bddf174 --- /dev/null +++ b/files/de/web/api/document/document/index.html @@ -0,0 +1,45 @@ +--- +title: Document() +slug: Web/API/Document/Document +tags: + - API + - DOM + - Document + - Dokument + - Méthode + - Reference +translation_of: Web/API/Document/Document +--- +
{{APIRef}}
+ +

Die Document Methode erstellt ein neues {{domxref("Document")}} Objekt das als Webseite im Browser geladen werden kann und bietet Möglichkeiten auf diese Inhalte zuzugreifen.

+ +

Konstruktor

+ +
new Document();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#dom-document-document','Document')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser-Kompatibilität

+ + + +
{{Compat("api.Document.Document")}}
diff --git a/files/de/web/api/document/documentelement/index.html b/files/de/web/api/document/documentelement/index.html new file mode 100644 index 0000000000..aac46ae3ea --- /dev/null +++ b/files/de/web/api/document/documentelement/index.html @@ -0,0 +1,42 @@ +--- +title: document.documentElement +slug: Web/API/Document/documentElement +translation_of: Web/API/Document/documentElement +--- +

{{ApiRef}}

+ +

Zusammenfassung

+ +

Lesbar, nicht schreibbar

+ +

Gibt das Element zurück, das die Wurzel des document ist (zum Beispiel, das <html> Element für HTML Dokumente).

+ +

Syntax

+ +
var element = document.documentElement;
+
+ +

Beispiel

+ +
var rootElement = document.documentElement;
+var firstTier = rootElement.childNodes;
+
+// firstTier ist die NodeList von direkten Kindern des Wurzel-Elementes
+for (var i = 0; i < firstTier.length; i++) {
+   // hier irgendwas mit den direkten Kindern des Wurzel-Elementes mit Hilfe
+   // von firstTier[i] erledigen
+}
+ +

Beobachtungen

+ +

Dieses Objekt ist lesbar aber nicht schreibbar. Es ist praktisch um auf die Wurzel eines beliebigen Dokumentes zuzugreifen.

+ +

HTML Dokumente enthalten typischerweise ein einziges Tochter-Element, <html>, manchmal mit einem DOCTYPE. XML-Doumente enthalten oft mehrere Tochter-Elemente, einen DOCTYPE und Verarbeitungshinweise.

+ +

Deswegen sollte document.documentElement statt {{Domxref("document.firstElementChild")}} benutzt werden, um auf das Wurzel-Element zuzugreifen.

+ +

Spezifikation

+ + diff --git a/files/de/web/api/document/fullscreenchange_event/index.html b/files/de/web/api/document/fullscreenchange_event/index.html new file mode 100644 index 0000000000..7c8026858c --- /dev/null +++ b/files/de/web/api/document/fullscreenchange_event/index.html @@ -0,0 +1,87 @@ +--- +title: fullscreenchange +slug: Web/API/Document/fullscreenchange_event +translation_of: Web/API/Document/fullscreenchange_event +--- +

Das onfullscreenchange Event wird gesendet, wenn der Browser den Vollbildmodus startet oder beendet.

+ +

Allgemeine Information

+ +
+
Speifikation
+
Fullscreen
+
Schnittstelle
+
Event
+
Blubbert
+
Ja
+
Abbrechbar
+
Nein
+
Ziel
+
Dokument
+
Standardaktion
+
Keine
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
+ +

Beispiel

+ +
// Diese API hat noch immer Vendor Prefixe in den Browsern, die sie implementieren
+document.addEventListener("fullscreenchange", function( event ) {
+
+    // Das Event selber hat keine Informationen über darüber, ob sich der Browser
+    // im Vollbildmodus befindet, aber man kann diesen über die Fullscreen API
+    // erhalten
+    if ( document.fullscreen ) {
+
+        // Das Ziel des Events ist immer das Dokument,
+        // aber man kann das eigentliche Element im Vollbildmodus über die API
+        // abrufen
+        document.fullscreenElement;
+    }
+
+});
+ +

Verwandte Events

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/getelementbyid/index.html b/files/de/web/api/document/getelementbyid/index.html new file mode 100644 index 0000000000..dfb6cc0d36 --- /dev/null +++ b/files/de/web/api/document/getelementbyid/index.html @@ -0,0 +1,131 @@ +--- +title: Document.getElementById() +slug: Web/API/Document/getElementById +tags: + - API + - DOM + - Méthode + - Referenz +translation_of: Web/API/Document/getElementById +--- +
{{ ApiRef("DOM") }}
+ +
 
+ +
Gibt eine Referenz zu einem Element anhand seiner ID zurück.
+ +
 
+ +

Syntax

+ +
element = document.getElementById(id);
+
+ +

Parameter

+ + + +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>getElementById Beispiel</title>
+  <script>
+  function changeColor(newColor) {
+    var elem = document.getElementById("para1");
+    elem.style.color = newColor;
+  }
+  </script>
+</head>
+<body>
+  <p id="para1">Irgendein Text</p>
+  <button onclick="changeColor('blue');">Blau</button>
+  <button onclick="changeColor('red');">Rot</button>
+</body>
+</html>
+
+ +

Anmerkungen

+ +

Neue Benutzer sollten beachten, dass die Groß- und Kleinschreibung bei "Id" im Namen der Methode korrekt sein muss, damit der Code funktioniert - 'getElementByID' funktioniert nicht, auch wenn es richtig zu sein scheint.

+ +

Wenn kein Element mit der angegebenen id existiert, gibt die Funktion null zurück. Beachte, dass der ID-Parameter auf Groß- und Kleinschreibung achtet. Daraus folgt, dass document.getElementById("Main") anstatt des Elements <div id="main"> null zurückgibt, weil "M" und "m" für den Zweck der Methode unterschiedlich sind.

+ +

Elemente die sich nicht im Dokument befinden werden nicht von getElementById gesucht. Wenn man ein Element erstellt und ihm eine ID zuweist, so muss man das Element mit insertBefore oder einer ähnlichen Methode in den Dokumentenbaum einfügen, bevor man darauf mit getElementById zugreifen kann.

+ +
var element = document.createElement("div");
+element.id = 'testqq';
+var el = document.getElementById('testqq'); // el wird null!
+
+ +

Nicht-HTML-Dokumente. Die DOM-Implementierung muss eine Information enthalten, welche angibt, welches Attribut vom Typ ID ist. Attribute mit dem Namen "id" sind solange nicht vom Typ ID bis sie in der Dokumenttypdefinition als solche definiert werden. Das id-Attribut ist in gebräuchlichen Fällen wie bei XHTML, XUL und anderen als ID-Typ definiert. Implementierungen, die nicht wissen, ob ein Attribut vom Typ ID ist oder nicht geben erwartungsgemäß null zurück.

+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{ CompatGeckoDesktop(1.0) }}5.57.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{ CompatGeckoMobile(1.0) }}6.06.01.0
+
+ +

Spezifikation

+ +

getElementById wurde in DOM Level 1 für HTML Dokumente eingeführt und in DOM Level 2 zu allen Dokumenten verschoben. 

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/getelementsbyclassname/index.html b/files/de/web/api/document/getelementsbyclassname/index.html new file mode 100644 index 0000000000..182fef2f42 --- /dev/null +++ b/files/de/web/api/document/getelementsbyclassname/index.html @@ -0,0 +1,105 @@ +--- +title: Document.getElementsByClassName() +slug: Web/API/Document/getElementsByClassName +tags: + - API + - DOM + - DOM Element Methoden + - Gecko + - Gecko DOM Referenz + - HTML5 + - Méthode + - Referenz +translation_of: Web/API/Document/getElementsByClassName +--- +

{{APIRef("DOM")}}

+ +

Gibt ein Array-ähnliches Objekt von allen Kindelementen welche den gegebenen Klassennamen besitzen. Wenn dies auf das document-Objekt ausgeführt wird, wird das gesamte Dokument durchsucht, inklusive des root-Knoten. Man kann ebenfalls {{domxref("Element.getElementsByClassName", "getElementsByClassName()")}} mit jedem Element aufrufen; es werden nur Nachfolgende Elemente des gegebenenen root-Element zurückgegeben.

+ +

Syntax

+ +
var elements = document.getElementsByClassName(names); // oder:
+var elements = rootElement.getElementsByClassName(names);
+ + + +

Beispiele

+ +

Alle Elemente der Klasse 'test' holen:

+ +
document.getElementsByClassName('test');
+ +

Alle Elemente die sowohl die Klassen 'red' und 'test' verwenden selektieren:

+ +
document.getElementsByClassName('red test');
+ +

Alle Elemente der Klasse 'test' die innerhalb eines Elements mit der ID 'main' selektieren:

+ +
document.getElementById('main').getElementsByClassName('test');
+ +

Man kann auch Methoden von Array.prototype auf {{ domxref("HTMLCollection") }} anwenden, in dem die HTMLCollection  in dem sie an die this Werte der Methoden übergeben wird. Hier finden wir alle div-Elemente der Klasse 'test':

+ +
var testElements = document.getElementsByClassName('test');
+var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+    return testElement.nodeName === 'DIV';
+});
+ +

Browserkompabilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}3.09.0{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Spezifikation

+ + diff --git a/files/de/web/api/document/head/index.html b/files/de/web/api/document/head/index.html new file mode 100644 index 0000000000..63b389112d --- /dev/null +++ b/files/de/web/api/document/head/index.html @@ -0,0 +1,73 @@ +--- +title: Document.head +slug: Web/API/Document/head +tags: + - Referenz +translation_of: Web/API/Document/head +--- +

{{APIRef("DOM")}}

+ +

Gibt das {{HTMLElement("head")}} Element des aktuellen Dokuments aus. Ist mehr als ein <head>  Element vorhanden, wird das erste Element ausgegeben.

+ +

Syntax

+ +
var objRef = document.head;
+
+ +

Beispiel

+ +
// in HTML: <head id="my-document-head">
+var aHead = document.head;
+
+alert(aHead.id); // "my-document-head";
+
+alert( document.head === document.querySelector("head") ); // true
+
+ +

Anmerkungen

+ +

document.head ist nur lesbar. Der Versuch dieser Eigenschaft einen Wert zu zuweisen, wird ohne Ausgabe einer Fehlermeldung fehlschlagen, oder, bei verwendetem
+ ECMAScript Strict Mode in einem Gecko Browser, mit einem TypeError quittiert.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML WHATWG')}}Initiale Definition.
{{SpecName('HTML5.1','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C','dom.html#dom-document-head','Document.head')}}{{Spec2('HTML5 W3C')}} 
+ +

Browser Kompatibilität

+ +

 

+ + + +

{{Compat("api.Document.head")}}

+ +

 

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/importnode/index.html b/files/de/web/api/document/importnode/index.html new file mode 100644 index 0000000000..8420b6f794 --- /dev/null +++ b/files/de/web/api/document/importnode/index.html @@ -0,0 +1,93 @@ +--- +title: Document.importNode() +slug: Web/API/Document/importNode +tags: + - API + - DOM + - Dokument + - Knoten + - Kopie + - Méthode + - Referenz + - importNode +translation_of: Web/API/Document/importNode +--- +
{{APIRef("DOM")}}
+ +

Die {{domxref("Document")}}-Methode importNode() erzeugt eine neue Kopie eines konkreten Knotens ({{domxref("Node")}}) oder Dokumenten-Fragments ({{domxref("DocumentFragment")}}) eines anderen Dokuments, so dass diese dann in das aktuelle Dokument eingefügt werden kann.  An dieser Stelle ist es noch nicht im Dokumentenbaum eingefügt, um das zu erreichen, muss eine Methode wie {{domxref("Node.appendChild", "appendChild()")}} oder {{domxref("Node.insertBefore", "insertBefore()")}} aufgerufen werden.

+ +

Syntax

+ +
var knoten = document.importNode(externerKnoten, deep);
+
+ +
+
externerKnoten
+
Der neue Knoten oder das neue Dokumenten-Fragment, welches in das aktuelle Dokument importiert werden soll. Nach dem Import ist der Elternknoten null, da der neue Knoten noch nicht in den Dokumentenbaum eingefügt wurde.
+
deep
+
Ein boolscher Wert der anzeigt, ob der komplette Unterbaum vonexternalNode importiert werden soll. Ist dieser Parameter true, werden externalNode so wie all seine Nachfahren kopiert; Ist er false, wird nur der einzelne Knoten, externalNode, importiert.
+
+ +
+

In der DOM4-Spezifikation, ist deep als optionales Argument angeführt. Wird es weggelassen, verhält sich die Methode als ob der Wert von deeptrue wäre, was zu standardmäßigen tiefen Kopieren führt. Um flach zu kopieren, muss deep explizit auf false gesetzt werden.

+ +

Dieses Verhalten wurde in der letzten Spezifikation geändert, der Wert von deep wird bei Weglassen auf false gesetzt. Obwohl es immer noch optional ist, empfehlen wir für Vorwärts- und Rückwärtskompatibilität das deep-Argument immer explizit anzugeben. Seit Gecko 28.0 {{geckoRelease(28)}} ist eine Konsolenwarnung implementiert, wenn das Argument weggelassen wird. Seit Gecko 29.0 {{geckoRelease(29)}}) ist flaches Kopieren das Standardverhalten.

+
+ +

Beispiel

+ +
var iframe = document.getElementsByTagName("iframe")[0];
+var oldNode = iframe.contentWindow.document.getElementById("myNode");
+var newNode = document.importNode(oldNode, true);
+document.getElementById("container").appendChild(newNode);
+
+ +

Anmerkungen

+ +

Der Originalknoten wird nicht aus dem Ursprungsdokument entfernt. Der importierte Knoten ist des Weiteren eine Kopie des ursprünglichen.

+ +

 

+ +

Nodes from external documents should be cloned using document.importNode() (or adopted using document.adoptNode()) before they can be inserted into the current document. For more on the Node.ownerDocument issues, see the W3C DOM FAQ.

+ +

Firefox doesn't currently enforce this rule (it did for a while during the development of Firefox 3, but too many sites break when this rule is enforced). We encourage Web developers to fix their code to follow this rule for improved future compatibility.

+ +

 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("DOM WHATWG", "#dom-document-importnode", "document.importNode()")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM2 Core", "core.html#Core-Document-importNode", "document.importNode()")}}{{Spec2("DOM2 Core")}}Ursprüngliche Definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Document.importNode")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/index.html b/files/de/web/api/document/index.html new file mode 100644 index 0000000000..f9b00cacfc --- /dev/null +++ b/files/de/web/api/document/index.html @@ -0,0 +1,405 @@ +--- +title: Document +slug: Web/API/Document +tags: + - DOM + - Gecko + - Gecko DOM Referenz +translation_of: Web/API/Document +--- +
{{ ApiRef("DOM") }}
+ +
+ +

Zusammenfassung

+ +

Jede im Browswer geladene Webseite hat ihr eigenen document Objekt.  Das Document Interface dient als Einstiegspunkt in den Inhalt der Webseite (der DOM tree, beinhaltet Elemente wie {{HTMLElement("body")}} und {{HTMLElement("table")}}) und unterstützt Funktionen, die global für das Dokument gelten(z.B. das Aufrufen der URL der Seite und das Erstellen neuer Elemente im Dokument).

+ +

Ein Dokument-Objekt kann von verschiedenen APIs bezogen werden:

+ + + +

Depending on the kind of the document (e.g. HTML or XML), different APIs may be available on the document object.

+ + + +

In der Zukunft, alle diese Interfaces werden zusammengefasst zum Document Interface.

+ +

Eigenschaften

+ +
+

Hinweis: Das Document Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.

+
+ +
+
{{domxref("Document.all")}} {{Deprecated_inline}} {{non-standard_inline}}
+
Provides access to all elements with an id. This is a legacy non-standard interface, you should use the {{domxref("Document.getElementById()")}} method instead.
+
{{domxref("Document.async")}} {{Deprecated_inline}}
+
Used with {{domxref("document.load")}} to indicate an asynchronous request.
+
{{domxref("Document.characterSet")}} {{experimental_inline}}
+
Returns the character set being used by the document.
+
{{domxref("Document.compatMode")}} {{experimental_inline}}
+
Indicates whether the document is rendered in Quirks or Strict mode.
+
{{domxref("Document.contentType")}} {{experimental_inline}}
+
Returns the Content-Type from the MIME Header of the current document.
+
{{domxref("Document.doctype")}}
+
Returns the Document Type Definition (DTD) of the current document.
+
{{domxref("Document.documentElement")}}
+
Returns the Element that is a direct child of the document. For HTML documents, this is normally the HTML element.
+
{{domxref("Document.documentURI")}}
+
Returns the document URL.
+
{{domxref("Document.domConfig")}} {{Deprecated_inline}}
+
Should return a {{domxref("DOMConfiguration")}} object.
+
{{domxref("Document.implementation")}}
+
Returns the DOM implementation associated with the current document.
+
{{domxref("Document.inputEncoding")}} {{Deprecated_inline}}
+
Returns the encoding used when the document was parsed.
+
{{domxref("Document.lastStyleSheetSet")}}
+
Returns the name of the style sheet set that was last enabled. Has the value null until the style sheet is changed by setting the value of {{domxref("Document.selectedStyleSheetSet","selectedStyleSheetSet")}}.
+
{{domxref("Document.mozSyntheticDocument")}} {{non-standard_inline}} {{gecko_minversion_inline("8.0")}}
+
true if this document is synthetic, such as a standalone image, video, audio file, or the like.
+
{{domxref("Document.mozFullScreen")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true when the document is in {{domxref("Using_full-screen_mode","full-screen mode")}}.
+
{{domxref("Document.mozFullScreenElement")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
The element that's currently in full screen mode for this document.
+
{{domxref("Document.mozFullScreenEnabled")}} {{non-standard_inline}} {{gecko_minversion_inline("9.0")}}
+
true if calling {{domxref("element.mozRequestFullscreen()")}} would succeed in the curent document.
+
{{domxref("Document.pointerLockElement")}} {{experimental_inline}}
+
Returns the element set as the target for mouse events while the pointer is locked. null if lock is pending, pointer is unlocked, or if the target is in another document.
+
{{domxref("Document.preferredStyleSheetSet")}}
+
Returns the preferred style sheet set as specified by the page author.
+
{{domxref("Document.selectedStyleSheetSet")}}
+
Returns which style sheet set is currently in use.
+
{{domxref("Document.styleSheets")}}
+
Returns a list of the style sheet objects on the current document.
+
{{domxref("Document.styleSheetSets")}}
+
Returns a list of the style sheet sets available on the document.
+
{{domxref("Document.xmlEncoding")}} {{Deprecated_inline}}
+
Returns the encoding as determined by the XML declaration.
+
{{domxref("Document.xmlStandalone")}} {{obsolete_inline("10.0")}}
+
Returns true if the XML declaration specifies the document to be standalone (e.g., An external part of the DTD affects the document's content), else false.
+
{{domxref("Document.xmlVersion")}} {{obsolete_inline("10.0")}}
+
Returns the version number as specified in the XML declaration or "1.0" if the declaration is absent.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +

{{page("/en-US/docs/Web/API/ParentNode","Properties")}}

+ +

Erweiterung für HTML Dokumente

+ +

Das Document Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder, ist seit HTML5 erweitert für solche Dokumente:

+ +
+
{{domxref("Document.activeElement")}}
+
Returns the currently focused element.
+
{{domxref("Document.alinkColor")}} {{Deprecated_inline}}
+
Returns or sets the color of active links in the document body.
+
{{domxref("Document.anchors")}}
+
Returns a list of all of the anchors in the document.
+
{{domxref("Document.applets")}} {{Deprecated_inline}}
+
Returns an ordered list of the applets within a document.
+
{{domxref("Document.bgColor")}} {{Deprecated_inline}}
+
Gets/sets the background color of the current document.
+
{{domxref("Document.body")}}
+
Returns the {{HTMLElement("body")}} element of the current document.
+
{{domxref("Document.cookie")}}
+
Returns a semicolon-separated list of the cookies for that document or sets a single cookie.
+
{{domxref("Document.defaultView")}}
+
Returns a reference to the window object.
+
{{domxref("Document.designMode")}}
+
Gets/sets the ability to edit the whole document.
+
{{domxref("Document.dir")}}
+
Gets/sets directionality (rtl/ltr) of the document.
+
{{domxref("Document.domain")}}
+
Returns the domain of the current document.
+
{{domxref("Document.embeds")}}
+
Returns a list of the embedded {{HTMLElement('embed')}} elements within the current document.
+
{{domxref("Document.fgColor")}} {{Deprecated_inline}}
+
Gets/sets the foreground color, or text color, of the current document.
+
{{domxref("Document.forms")}}
+
Returns a list of the {{HTMLElement("form")}} elements within the current document.
+
{{domxref("Document.head")}}
+
Returns the {{HTMLElement("head")}} element of the current document.
+
{{domxref("Document.height")}} {{non-standard_inline}} {{obsolete_inline}}
+
Gets/sets the height of the current document.
+
{{domxref("Document.images")}}
+
Returns a list of the images in the current document.
+
{{domxref("Document.lastModified")}}
+
Returns the date on which the document was last modified.
+
{{domxref("Document.linkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of hyperlinks in the document.
+
{{domxref("Document.links")}}
+
Returns a list of all the hyperlinks in the document.
+
{{domxref("Document.location")}}
+
Returns the URI of the current document.
+
{{domxref("Document.plugins")}}
+
Returns a list of the available plugins.
+
{{domxref("Document.readyState")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns loading status of the document.
+
{{domxref("Document.referrer")}}
+
Returns the URI of the page that linked to this page.
+
{{domxref("Document.scripts")}}
+
Returns all the {{HTMLElement("script")}} elements on the document.
+
{{domxref("Document.title")}}
+
Returns the title of the current document.
+
{{domxref("Document.URL")}}
+
Returns a string containing the URL of the current document.
+
{{domxref("Document.vlinkColor")}} {{Deprecated_inline}}
+
Gets/sets the color of visited hyperlinks.
+
{{domxref("Document.width")}} {{non-standard_inline}} {{obsolete_inline}}
+
Returns the width of the current document.
+
+ +

Event handlers

+ +
+
{{domxref("Document.onpointerlockchange")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockchange")}} event.
+
{{domxref("Document.onpointerlockerror")}} {{experimental_inline}}
+
Returns the event handling code for the {{event("pointerlockerror")}} event.
+
{{domxref("Document.onreadystatechange")}} {{gecko_minversion_inline("1.9.2")}}
+
Returns the event handling code for the readystatechange event.
+
+ +

Methoden

+ +
+

Hinweis: Das Document Interface erbt auch vom {{domxref("Node")}} und {{domxref("EventTarget")}} Interface.

+
+ +
+
{{domxref("Document.adoptNode","Document.adoptNode(Node node)")}}
+
Adopt node from an external document.
+
{{domxref("Document.captureEvents","Document.captureEvents(String eventName)")}} {{Deprecated_inline}}
+
See {{domxref("window.captureEvents")}}.
+
{{domxref("Document.caretPositionFromPoint","Document.caretPositionFromPoint(Number x, Number y)")}}
+
Gets a {{domxref("CaretPosition")}} based on two coordinates.
+
{{domxref("Document.createAttribute","Document.createAttribute(String name)")}}
+
Creates a new {{domxref("Attr")}} object and returns it.
+
{{domxref("Document.createAttributeNS","Document.createAttributeNS(String namespace, String name)")}}
+
Creates a new attribute node in a given namespace and returns it.
+
{{domxref("Document.createCDATASection","Document.createCDATASection(String data)")}}
+
Creates a new CDATA node and returns it.
+
{{domxref("Document.createComment","Document.createComment(String comment)")}}
+
Creates a new comment node and returns it.
+
{{domxref("Document.createDocumentFragment()")}}
+
Creates a new document fragment.
+
{{domxref("Document.createElement","Document.createElement(String name)")}}
+
Creates a new element with the given tag name.
+
{{domxref("Document.createElementNS","Document.createElementNS(String namespace, String name)")}}
+
Creates a new element with the given tag name and namespace URI.
+
{{domxref("Document.createEntityReference","Document.createEntityReference(String name)")}} {{obsolete_inline}}
+
Creates a new entity reference object and returns it.
+
{{domxref("Document.createEvent","Document.createEvent(String interface)")}}
+
Creates an event object.
+
{{domxref("Document.createNodeIterator","Document.createNodeIterator(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("NodeIterator")}} object.
+
{{domxref("Document.createProcessingInstruction","Document.createProcessingInstruction(String target, String data)")}}
+
Creates a new {{domxref("ProcessingInstruction")}} object.
+
{{domxref("Document.createRange()")}}
+
Creates a {{domxref("Range")}} object.
+
{{domxref("Document.createTextNode","Document.createTextNode(String text)")}}
+
Creates a text node.
+
{{domxref("Document.createTreeWalker","Document.createTreeWalker(Node root[, Number whatToShow[, NodeFilter filter]])")}}
+
Creates a {{domxref("TreeWalker")}} object.
+
{{domxref("Document.elementFromPoint","Document.elementFromPoint(Number x, Number y)")}}
+
Returns the element visible at the specified coordinates.
+
{{domxref("Document.enableStyleSheetsForSet","Document.enableStyleSheetsForSet(String name)")}}
+
Enables the style sheets for the specified style sheet set.
+
{{domxref("Document.exitPointerLock()")}} {{experimental_inline}}
+
Release the pointer lock.
+
{{domxref("Document.getElementsByClassName","Document.getElementsByClassName(String className)")}}
+
Returns a list of elements with the given class name.
+
{{domxref("Document.getElementsByTagName","Document.getElementsByTagName(String tagName)")}}
+
Returns a list of elements with the given tag name.
+
{{domxref("Document.getElementsByTagNameNS","Document.getElementsByTagNameNS(String namespace, String tagName)")}}
+
Returns a list of elements with the given tag name and namespace.
+
{{domxref("Document.importNode","Document.importNode(Node node, Boolean deep)")}}
+
Returns a clone of a node from an external document.
+
{{domxref("document.mozSetImageElement")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Allows you to change the element being used as the background image for a specified element ID.
+
{{domxref("Document.normalizeDocument()")}} {{obsolete_inline}}
+
Replaces entities, normalizes text nodes, etc.
+
{{domxref("Document.releaseCapture()")}} {{non-standard_inline}} {{gecko_minversion_inline("2.0")}}
+
Releases the current mouse capture if it's on an element in this document.
+
{{domxref("Document.releaseEvents")}} {{non-standard_inline}} {{Deprecated_inline}}
+
See {{domxref("window.releaseEvents")}}.
+
{{domxref("document.routeEvent")}} {{non-standard_inline}} {{obsolete_inline(24)}}
+
See {{domxref("window.routeEvent")}}.
+
+ +

The Document interface is extended with the {{domxref("ParentNode")}} interface:

+ +
+
{{domxref("Document.getElementById","Document.getElementById(String id)")}}
+
Returns an object reference to the identified element.
+
{{domxref("Document.querySelector","Document.querySelector(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns the first Element node within the document, in document order, that matches the specified selectors.
+
{{domxref("Document.querySelectorAll","Document.querySelectorAll(String selector)")}} {{gecko_minversion_inline("1.9.1")}}
+
Returns a list of all the Element nodes within the document that match the specified selectors.
+
+ +

The Document interface is extended with the {{domxref("XPathEvaluator")}} interface:

+ +
+
{{domxref("Document.createExpression","Document.createExpression(String expression, XPathNSResolver resolver)")}}
+
Compiles an XPathExpression which can then be used for (repeated) evaluations.
+
{{domxref("Document.createNSResolver","Document.createNSResolver(Node resolver)")}}
+
Creates an {{domxref("XPathNSResolver")}} object.
+
{{domxref("Document.evaluate","Document.evaluate(String expression, Node contextNode, XPathNSResolver resolver, Number type, Object result)")}}
+
Evaluates an XPath expression.
+
+ +

Erweiterung für HTML Dokumente

+ +

Das Document Interface für HTML Dokumente erbt vom {{domxref("HTMLDocument")}} Interface oder ist seit HTML5 erweitert für solche Dokumente:

+ +
+
{{domxref("Document.clear()")}} {{non-standard_inline}} {{Deprecated_inline}}
+
In majority of modern browsers, including recent versions of Firefox and Internet Explorer, this method does nothing.
+
{{domxref("Document.close()")}}
+
Closes a document stream for writing.
+
{{domxref("Document.execCommand","Document.execCommand(String command[, Boolean showUI[, String value]])")}}
+
On an editable document, executes a formating command.
+
{{domxref("Document.getElementsByName","Document.getElementsByName(String name)")}}
+
Returns a list of elements with the given name.
+
{{domxref("Document.getSelection()")}}
+
Returns a {{domxref("Selection")}} object related to text selected in the document.
+
{{domxref("Document.hasFocus()")}}
+
Returns true if the focus is currently located anywhere inside the specified document.
+
{{domxref("Document.open()")}}
+
Opens a document stream for writing.
+
{{domxref("Document.queryCommandEnabled","Document.queryCommandEnabled(String command)")}}
+
Returns true if the formating command can be executed on the current range.
+
{{domxref("Document.queryCommandIndeterm","Document.queryCommandIndeterm(String command)")}}
+
Returns true if the formating command is in an indeterminate state on the current range.
+
{{domxref("Document.queryCommandState","Document.queryCommandState(String command)")}}
+
Returns true if the formating command has been executed on the current range.
+
{{domxref("Document.queryCommandSupported","Document.queryCommandSupported(String command)")}}
+
Returns true if the formating command is supported on the current range.
+
{{domxref("Document.queryCommandValue","Document.queryCommandValue(String command)")}}
+
Returns the current value of the current range for a formatting command.
+
{{domxref("Document.registerElement","Document.registerElement(String tagname[, Object options])")}}
+
Registers a new custom element in the browser and returns a constructor for the new element.
+
{{domxref("Document.write","Document.write(String text)")}}
+
Writes text in a document.
+
{{domxref("Document.writeln","Document.writeln(String text)")}}
+
Writes a line of text in a document.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM1','#i-Document','Document')}}{{Spec2('DOM1')}}Initial definition for the interface
{{SpecName('DOM2 Core','#i-Document','Document')}}{{Spec2('DOM2 Core')}}Supersede DOM 1
{{SpecName('DOM3 Core','#i-Document','Document')}}{{Spec2('DOM3 Core')}}Supersede DOM 2
{{SpecName('DOM WHATWG','#interface-document','Document')}}{{Spec2('DOM WHATWG')}}Intend to supersede DOM 3
{{SpecName('HTML WHATWG','dom.html#the-document-object','Document')}}{{Spec2('HTML WHATWG')}}Turn the {{domxref("HTMLDocument")}} interface into a Document extension.
{{SpecName('DOM3 XPath','xpath.html#XPathEvaluator','XPathEvaluator')}}{{Spec2('DOM3 XPath')}}Define the {{domxref("XPathEvaluator")}} interface which extend Document.
{{SpecName('HTML Editing','#dom-document-getselection','Document')}}{{Spec2('HTML Editing')}}Extend the Document interface
{{SpecName('CSSOM View','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM View')}}Extend the Document interface
{{SpecName('CSSOM','#extensions-to-the-document-interface','Document')}}{{Spec2('CSSOM')}}Extend the Document interface
{{SpecName('Pointer Lock','#extensions-to-the-document-interface','Document')}}{{Spec2('Pointer Lock')}}Extend the Document interface
+ +

Browser Kompatibilität

+ +

Firefox Hinweise

+ +

Mozilla defines a set of non-standard properties made only for XUL content:

+ +
+
{{domxref("document.currentScript")}} {{gecko_minversion_inline("2.0")}}
+
Returns the {{HTMLElement("script")}} element that is currently executing.
+
{{domxref("document.documentURIObject")}} {{gecko_minversion_inline("1.9")}}
+
(Mozilla add-ons only!) Returns the {{Interface("nsIURI")}} object representing the URI of the document. This property only has special meaning in privileged JavaScript code (with UniversalXPConnect privileges).
+
{{domxref("document.popupNode")}}
+
Returns the node upon which a popup was invoked.
+
{{domxref("document.tooltipNode")}}
+
Returns the node which is the target of the current tooltip.
+
+ +

Mozilla also define some non-standard methods:

+ +
+
{{domxref("Document.execCommandShowHelp")}} {{obsolete_inline("14.0")}}
+
This method never did anything and always threw an exception, so it was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
{{domxref("Document.getBoxObjectFor")}} {{obsolete_inline}}
+
Use the {{domxref("Element.getBoundingClientRect()")}} method instead.
+
{{domxref("Document.loadOverlay")}} {{Fx_minversion_inline("1.5")}}
+
Loads a XUL overlay dynamically. This only works in XUL documents.
+
{{domxref("document.queryCommandText")}} {{obsolete_inline("14.0")}}
+
This method never did anything but throw an exception, and was removed in Gecko 14.0 {{geckoRelease("14.0")}}.
+
+ +

Internet Explorer Hinweise

+ +

Microsoft defines some non-standard properties:

+ +
+
{{domxref("document.fileSize")}}* {{non-standard_inline}} {{obsolete_inline}}
+
Returns size in bytes of the document. Starting with Internet Explorer 11, that property is no longer supported. See MSDN.
+
Internet Explorer does not support all methods from the Node interface in the Document interface:
+
+ +
+
{{domxref("document.contains")}}
+
As a work-around, document.body.contains() can be used.
+
diff --git a/files/de/web/api/document/queryselector/index.html b/files/de/web/api/document/queryselector/index.html new file mode 100644 index 0000000000..7fadcd87ce --- /dev/null +++ b/files/de/web/api/document/queryselector/index.html @@ -0,0 +1,129 @@ +--- +title: Document.querySelector() +slug: Web/API/Document/querySelector +tags: + - API + - DOM + - Funktion + - Methode(2) + - Méthode + - Referenz + - Selektor + - Selektoren +translation_of: Web/API/Document/querySelector +--- +
{{ApiRef("DOM")}}
+ +

Die Methode querySelector() von {{domxref("Document")}} gibt das erste {{domxref("Element")}} innerhalb eines Dokuments zurück, welches dem angegebenen Selektor bzw. Selektoren entspricht. Wurden keine Übereinstimmungen gefunden wird null zurückgegeben.

+ +
+

Hinweis: Der Abgleich erfolgt indem sämtliche Knoten des Dokuments und deren Unterknoten der Reihe nach mittels Tiefensuche in Hauptreihenfolge (depth-first pre-order) durchlaufen werden.

+
+ +

Syntax

+ +
element = document.querySelector(selectors);
+
+ +

Parameter

+ +
+
selectors
+
Ein {{domxref("DOMString")}} mit einem oder mehreren Selektoren die abgeblichen werden sollen. Dieser String muss ein gültiger CSS-Selektor-String sein. Ist dies nicht der Fall, wird eine SYNTAX_ERR Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln.
+
+ +
+

Hinweis: Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.

+
+ +

Rückgabewert

+ +

Ein {{domxref("Element")}}-Objekt, das das erste Element des Dokuments darstellt, das der angegebenen Gruppe von CSS-Selektoren entspricht, oder null, wenn keine Übereinstimmungen vorhanden sind.

+ +

Wenn Sie eine Liste aller Elemente benötigen, die mit den angegebenen Selektoren übereinstimmen, verwenden Sie stattdessen {{domxref("document.querySelectorAll()", "querySelectorAll()")}}.

+ +

Exceptions

+ +
+
SYNTAX_ERR
+
Die Syntax der angegebenen Selektoren ist ungültig.
+
+ +

Nutzungshinweise

+ +

Wenn der angegebene Selektor mit einer ID übereinstimmt, die im Dokument fälschlicherweise mehrmals vorkommt, wird das erste Element mit dieser ID zurückgegeben.

+ +

CSS-Pseudoelemente geben niemals Elemente zurück, wie in der Selektoren-API angegeben.

+ +

Sonderzeichen maskieren

+ +

Um mit einer ID oder Selektoren abzugleichen, die nicht der Standard-CSS-Syntax entsprechen (z. B. durch einen unzulässigen Doppelpunkt oder Leerzeichen), müssen Sie das Zeichen mit einem Backslash ("\") maskieren. Da der Backslash selbst ebenfalls ein Maskierungszeichen in JavaScript ist, müssen Sie ihn bei der Eingabe eines Stringliterals zweimal maskieren (einmal für den JavaScript String und einmal für querySelector()):

+ +
<div id="foo\bar"></div>
+<div id="foo:bar"></div>
+
+<script>
+  console.log('#foo\bar');               // "#fooar" (\b is the backspace control character)
+  document.querySelector('#foo\bar');    // Does not match anything
+
+  console.log('#foo\\bar');              // "#foo\bar"
+  console.log('#foo\\\\bar');            // "#foo\\bar"
+  document.querySelector('#foo\\bar'); // Match the first div
+
+  document.querySelector('#foo:bar');    // Does not match anything
+  document.querySelector('#foo\\:bar');  // Match the second div
+</script>
+ +

Beispiele

+ +

Erstes Element ermitteln, das mit einer Klasse übereinstimmt

+ +

In diesem Beispiel wird das erste Element im Dokument mit der Klasse "myclass" zurückgegeben:

+ +
var el = document.querySelector(".myclass");
+
+ +

Ein komplexerer Selektor

+ +

Selektoren können auch sehr mächtig sein, wie das folgende Beispiel zeigt. Hier wird das erste {{HTMLElement("input")}}-Element mit dem Namen "login" (<input name="login"/>) innerhalb eines {{HTMLElement("div")}}, dessen Klasse "user-panel main" ist (<div class="user-panel main">), im Dokument zurückgegeben:

+ +
var el = document.querySelector("div.user-panel.main input[name='login']");
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selectors API Level 2", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 2")}} 
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Initiale Definition
+ +

Browserkompatibilität

+ + + +
{{Compat("api.Document.querySelector")}}
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/queryselectorall/index.html b/files/de/web/api/document/queryselectorall/index.html new file mode 100644 index 0000000000..80ab2a83c2 --- /dev/null +++ b/files/de/web/api/document/queryselectorall/index.html @@ -0,0 +1,172 @@ +--- +title: Document.querySelectorAll() +slug: Web/API/Document/querySelectorAll +tags: + - API + - Document + - querySelectorAll +translation_of: Web/API/Document/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Die Methode querySelectorAll() von {{domxref("Document")}} gibt eine statische (nicht live) {{domxref("NodeList")}} zurück, die eine Liste der Elemente des Dokuments darstellt, die mit der angegebenen Selektorgruppe übereinstimmen.

+ +
+

Hinweis: Diese Methode wird basierend auf dem Mixin der Methode {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} von {{domxref("ParentNode")}} implementiert.

+
+ +

Syntax

+ +
elementList = parentNode.querySelectorAll(selectors);
+
+ +

Parameter

+ +
+
selectors
+
Ein {{domxref("DOMString")}} der einen oder mehrere Selektoren zum Abgleich enthält. Dieser String muss ein valider CSS-Selektor-String sein, andernfalls wird eine SyntaxError Exception ausgelöst. Weitere Informationen zu Selektoren und deren Verwaltung finden Sie unter DOM Elemente mittels Selektoren ermitteln. Es können mehrere durch Kommata getrennte Selektoren angegeben werden.
+
+ +
+

Hinweis: Zeichen, die nicht zur Standard-CSS-Syntax gehören, müssen mit einem Backslash-Zeichen maskiert werden. Da JavaScript auch Backslash-Escape-Anweisungen verwendet, müssen Sie beim Schreiben von String-Literalen mit diesen Zeichen besonders vorsichtig sein. Weitere Informationen finden Sie unter {{anch("Sonderzeichen maskieren")}}.

+
+ +

Rückgabewert

+ +

Eine statische (nicht-live) {{domxref("NodeList")}} mit je einem {{domxref("Element")}}-Objekt für jedes Element das mind. einem der angegebenen Selektoren entspricht oder eine leere {{domxref("NodeList")}} im Falle keiner Übereinstimmungen.

+ +
+

Hinweis: Wenn selectors ein CSS Pseudo-Element enthält ist die zurückgegebene Liste immer leer.

+
+ +

Exceptions

+ +
+
SyntaxError
+
Die Syntax des selectors-String ist ungültig.
+
+ +

Beispiele

+ +

Eine Liste von Übereinstimmungen erhalten

+ +

Um eine {{domxref("NodeList")}} aller {{HTMLElement("p")}}-Elemente des Dokuments zu erhalten:

+ +
var matches = document.querySelectorAll("p");
+ +

Das folgende Beispiel gibt eine Liste aller {{HTMLElement("div")}}-Elemente innerhalb des Dokuments zurück, deren Klasse entweder "note" oder "alert" ist:

+ +
var matches = document.querySelectorAll("div.note, div.alert");
+
+ +

Hier erhalten wir eine Liste von <p>-Elementen, deren unmittelbares übergeordnetes Element ein {{HTMLElement("div")}} mit der Klasse "highlighted" ist und die sich in einem Container befinden, dessen ID "test" ist.

+ +
var container = document.querySelector("#test");
+var matches = container.querySelectorAll("div.highlighted > p");
+ +

Das folgende Beispiel nutzt einen Attribut-Selektor, um eine Liste von {{HTMLElement("iframe")}}-Elementen im Dokument zurückzugeben, die ein "data-src" Attribut besitzen:

+ +
var matches = document.querySelectorAll("iframe[data-src]");
+ +

Hier wird ein Attribut-Selektor verwendet, um eine Aufzählung der Listenelemente zurückzugeben, die in einer Liste mit der ID "userlist" enthalten sind und deren Attribut "data-active" den Wert "1" hat:

+ +
var container = document.querySelector("#userlist");
+var matches = container.querySelectorAll("li[data-active='1']");
+ +

Auf Übereinstimmungen zugreifen

+ +

Sobald die {{domxref("NodeList")}} der übereinstimmenden Elemente zurückgegeben wird, können Sie sie wie jedes Array untersuchen. Wenn das Array leer ist (d. h. die Eigenschaft length 0 ist), wurden keine Übereinstimmungen gefunden.

+ +

Ansonsten können Sie einfach die Standard-Array-Notation verwenden, um auf den Inhalt der Liste zuzugreifen. Sie können jede allgemeine Schleifenanweisung verwenden, wie etwa:

+ +
var highlightedItems = userList.querySelectorAll(".highlighted");
+
+highlightedItems.forEach(function(userItem) {
+  deleteUser(userItem);
+});
+ +

Benutzerhinweise

+ +

querySelectorAll() verhält sich anders als die meisten JavaScript-DOM-Bibliotheken, was zu unerwarteten Ergebnissen führen kann.

+ +

HTML

+ +

Betrachten Sie dieses HTML mit seinen drei geschachtelten {{HTMLElement("div")}} Blöcken.

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +

JavaScript

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

Wenn Sie in diesem Beispiel ".outer .inner" im Kontext des <div> mit der Klasse "select" auswählen, wird das Element mit der Klasse ".inner" immer noch gefunden, obwohl .outer kein Nachkomme des Basis-Elements ist, auf dem die Suche durchgeführt wird (".select"). Standardmäßig überprüft querySelectorAll() nur, ob sich das letzte Element im Selektor im Suchbereich befindet.

+ +

Die {{cssxref(":scope")}} Pseudo-Klasse stellt das erwartete Verhalten wieder her, bei dem Selektoren nur mit Nachkommen des Basis-Elements übereinstimmen:

+ +
var select = document.querySelector('.select');
+var inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM WHATWG")}}Lebender Standard
{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("Selectors API Level 2")}}Keine Änderung
{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}{{Spec2("DOM4")}}Initiale Definition
{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}{{Spec2("Selectors API Level 1")}}Originale Definition
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.Document.querySelectorAll")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/readystate/index.html b/files/de/web/api/document/readystate/index.html new file mode 100644 index 0000000000..da2593e9c7 --- /dev/null +++ b/files/de/web/api/document/readystate/index.html @@ -0,0 +1,111 @@ +--- +title: Document.readyState +slug: Web/API/Document/readyState +tags: + - API + - HTML DOM + - Property + - Referenz +translation_of: Web/API/Document/readyState +--- +
{{APIRef("DOM")}} {{ gecko_minversion_header("1.9.2") }}
+ +

Zusammenfassung

+ +

Die Eigenschaft Document.readyState eines {{ domxref("document") }}-Objektes beschreibt dessen Ladezustand.

+ +

Werte

+ +

Die Eigenschaft readyState kann folgende Werte haben:

+ +
+
loading
+
Das Dokument wird noch geladen.
+
interactive
+
Das Dokument selbst wurde vollständig eingelesen und verarbeitet, aber das Laden weiterer Bestandteile wie Bilder, Stylesheets und Frames ist noch nicht abgeschlossen.
+ Dieser Status zeigt an, dass das Ereignis {{event("DOMContentLoaded")}} ausgelöst wurde.
+
complete
+
Das Dokument und seine Bestandteile wurden geladen.
+ Dieser Status zeigt an, dass das Ereignis {{event("load")}} ausgelöst wurde.
+
+ +

Ändert sich der Wert dieser Eigenschaft, wird das Ereignis {{event("readystatechange")}} des zugehörigen {{domxref("document") }}-Objekts augelöst.

+ +

Syntax

+ +
var string = document.readyState;
+
+ +

Beispiele

+ +

Verschiedene Ladezustände

+ +
switch (document.readyState) {
+  case "loading":
+    // Das Dokument wird noch geladen.
+    break;
+  case "interactive":
+    // Das Dokument wurde geladen. Wir können nun die DOM-Elemente ansprechen.
+    var span = document.createElement("span");
+    span.textContent = "A <span> element.";
+    document.body.appendChild(span);
+    break;
+  case "complete":
+    // Die Seite ist komplett geladen.
+    console.log("The first CSS rule is: " + document.styleSheets[0].cssRules[0].cssText);
+    break;
+}
+
+ +

readystatechange als eine Alternative zum Ereignis DOMContentLoaded

+ +
// Alternative zum Ereignis DOMContentLoaded
+document.onreadystatechange = function () {
+  if (document.readyState == "interactive") {
+    initApplication();
+  }
+}
+ +

readystatechange als eine Alternative zum Ereignis load

+ +
// Alternative zum Ereignis load
+document.onreadystatechange = function () {
+  if (document.readyState == "complete") {
+    initApplication();
+  }
+}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML WHATWG')}} 
{{SpecName("HTML5.1", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#current-document-readiness", "Document readiness")}}{{Spec2('HTML5 W3C')}}Initiale Spezifikation.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/referrer/index.html b/files/de/web/api/document/referrer/index.html new file mode 100644 index 0000000000..8c1cd8d888 --- /dev/null +++ b/files/de/web/api/document/referrer/index.html @@ -0,0 +1,46 @@ +--- +title: Document.referrer +slug: Web/API/Document/referrer +tags: + - Referenz +translation_of: Web/API/Document/referrer +--- +
{{APIRef("DOM")}}
+ +

Gibt den URI der Seite aus, von der die aktuelle Seite aufgerufen wurde.

+ +

Syntax

+ +
var string = document.referrer;
+
+ +

Wert

+ +

Der Wert ist eine leere Zeichenkette, wenn der Benutzer direkt auf die Seite navigiert ist (nicht über einen Link, sondern z.B. über ein Lesezeichen). Da es sich bei dieser Eigenschaft lediglich um einen String handelt, ist der Zugriff auf das DOM der referenzierenden Seite nicht möglich.

+ +

Innerhalb eines {{HTMLElement("iframe")}}, wird der Document.referrer anfänglich auf den identischen Wert wie {{domxref("HTMLHyperlinkElementUtils/href", "href")}} der {{domxref("Window/location", "Window.location")}} des übergeordneten Fensters gesetzt.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-document-referrer-dev', 'document.referrer')}}{{Spec2('HTML WHATWG')}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Document.referrer")}}

diff --git a/files/de/web/api/document/registerelement/index.html b/files/de/web/api/document/registerelement/index.html new file mode 100644 index 0000000000..f563250e8e --- /dev/null +++ b/files/de/web/api/document/registerelement/index.html @@ -0,0 +1,113 @@ +--- +title: Document.registerElement() +slug: Web/API/Document/registerElement +tags: + - API + - DOM + - Veraltet + - Web Components +translation_of: Web/API/Document/registerElement +--- +

{{APIRef("DOM")}}

+ +
+

Warnung: document.registerElement() läuft zu Gunsten von customElements.define() aus.

+
+ +

{{draft}}

+ +

Die document.registerElement()-Methode registriert ein neues benutzerdefiniertes Element im Browser und gibt einen Konstruktor für das neue Element zurück.

+ +
+

Hinweis: Dies ist eine experimentelle Technologie. Der Browser, der sie benutzen soll, muss Web Components unterstützen. Siehe Web Components in Firefox erlauben.

+
+ +

Syntax

+ +
var constructor = document.registerElement(tag-name, options);
+ +

Parameter

+ +
+
tag-name
+
Der Name des benutzerdefinierten Elements. Der Name muss einen Bindestrich (-) enthalten, zum Beispiel my-tag.
+
options {{optional_inline}}
+
+

Ein Objekt mit den Eigenschaften prototype, auf dem das benutzerdefinierte Element basieren soll, und extends, einem bestehenden Tag, der erweitert werden soll. Beide sind optional.

+
+
+ +

Beispiel

+ +

Hier ist ein einfaches Beispiel:

+ +
var Mytag = document.registerElement('my-tag');
+
+ +

Der Tag ist num im Browser registriert. Die Mytag-Variable enthält einen Konstruktor, der benutzt werden kann, um ein my-tag-Element wie folgt im Dokument zu erzeugen:

+ +
document.body.appendChild(new Mytag());
+ +

Das fügt ein leeres my-tag-Element ein, dass sichtbar wird, wenn die Entwicklerwerkzeuge des Browsers benutzt werden aber nicht, wenn mit Hilfe des Brwoser der Quellcode betrachtet wird. So lange dem Tag kein Inhalt beigefügt wird, wird es auch in der normalen Browser-Ansicht nicht sichtbar sein. Inhalt kann beispielsweise folgendermaßen hinzugefügt werden:

+ +
var mytag = document.getElementsByTagName("my-tag")[0];
+mytag.textContent = "I am a my-tag element.";
+
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung3531[1]{{CompatNo}}25{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4.4.431[1]{{CompatNo}}25{{CompatNo}}
+
+ +

[1] Diese API ist hinter einer Einstellung versteckt.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/title/index.html b/files/de/web/api/document/title/index.html new file mode 100644 index 0000000000..9c54e274a6 --- /dev/null +++ b/files/de/web/api/document/title/index.html @@ -0,0 +1,70 @@ +--- +title: Document.title +slug: Web/API/Document/title +translation_of: Web/API/Document/title +--- +
{{APIRef("DOM")}}
+ +

Die Eigenschaft document.title holt oder setzt den aktuellen Titel des Dokuments.

+ +

Syntax

+ +
var docTitle = document.title;
+
+ +

docTitle ist eine Zeichenfolge, die den Titel des Dokuments enthält. Wenn der Titel durch das Setzen von document.title überschrieben wurde, enthält er diesen Wert. Andernfalls enthält er den im Markup angegebenen Titel (siehe {{Anch("Anmerkungen")}} unten).

+ +
document.title = newTitle;
+
+ +

newTitle ist der neue Titel des Dokuments. Die Zuweisung beeinflusst den Rückgabewert von document.title, den für das Dokument angezeigten Titel (z.B. in der Titelleiste des Fensters oder Tabs), und sie beeinflusst auch das DOM des Dokuments (z.B. den Inhalt des Elements <title> in einem HTML-Dokument).

+ +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Hallo Welt!</title>
+</head>
+<body>
+
+  <script>
+    alert(document.title); // zeigt "Hallo Welt!"
+    document.title = "Tschüss Welt!";
+    alert(document.title); // zeigt "Tschüss Welt!"
+  </script>
+
+</body>
+</html>
+
+ +

Anmerkungen

+ +

Diese Eigenschaft gilt für HTML-, SVG-, XUL- und andere Dokumente in Gecko.

+ +

Bei HTML-Dokumenten ist der Anfangswert von document.title der Textinhalt des Elements <title>. Bei XUL ist es der Wert des {{XULAttr("title")}} Attributs des {{XULElem("window")}} oder eines anderen XUL-Elements der obersten Ebene.

+ +

In XUL hat der Zugriff auf document.title, bevor das Dokument vollständig geladen ist, ein undefiniertes Verhalten: document.title gibt möglicherweise eine leere Zeichenfolge zurück, und das Setzen von document.title hat möglicherweise keine Wirkung.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','#document.title','document.title')}}{{Spec2('HTML WHATWG')}}
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.Document.title")}}

diff --git a/files/de/web/api/document/url/index.html b/files/de/web/api/document/url/index.html new file mode 100644 index 0000000000..29770925ee --- /dev/null +++ b/files/de/web/api/document/url/index.html @@ -0,0 +1,19 @@ +--- +title: Document.URL +slug: Web/API/Document/URL +translation_of: Web/API/Document/URL +--- +
{{APIRef("DOM")}}
+ +

Die schreibgeschützte Eigenschaft URL des {{domxref("Document")}} interface gibt den Ort des Dokuments als String zurück.

+ +

Syntax

+ +
var string = document.URL
+
+ +

Spezifikation

+ + diff --git a/files/de/web/api/document/width/index.html b/files/de/web/api/document/width/index.html new file mode 100644 index 0000000000..5fc3e1c80a --- /dev/null +++ b/files/de/web/api/document/width/index.html @@ -0,0 +1,45 @@ +--- +title: Document.width +slug: Web/API/Document/width +translation_of: Web/API/Document/width +--- +
{{APIRef("DOM")}} {{Obsolete_header}}
+ +
+

Note: Starting in {{Gecko("6.0")}}, document.width is no longer supported. Instead, use document.body.clientWidth. See {{domxref("element.clientWidth")}}.

+
+ +

Gibt die Breite des {{HTMLElement("body")}} Elements des aktuellen Dokuments in Pixeln zurück.

+ +

Wird nicht vom Internet Explorer unterstützt.

+ +

Syntax

+ +
pixels = document.width;
+
+ +

Beispiel

+ +
function init() {
+    alert("Die Breite des Dokuments beträgt " + document.width + " Pixel.");
+}
+
+ +

Alternativen

+ +
document.body.clientWidth              /* Breite des <body> */
+document.documentElement.clientWidth   /* Breite des <html> */
+window.innerWidth                      /* Breite des Browserfensters */
+
+ +

Spezifikation

+ +

HTML5

+ +

Siehe auch

+ + diff --git a/files/de/web/api/document/write/index.html b/files/de/web/api/document/write/index.html new file mode 100644 index 0000000000..3b25f6b658 --- /dev/null +++ b/files/de/web/api/document/write/index.html @@ -0,0 +1,85 @@ +--- +title: Document.write() +slug: Web/API/Document/write +tags: + - API + - DOM + - Document + - Méthode + - Referenz +translation_of: Web/API/Document/write +--- +
{{ ApiRef("DOM") }}
+ +

Schreibt eine Zeichenfolge in einen Dokument-Stream, der zuvor mittels document.open() geöffnet wurde.

+ +
Hinweis: da document.write in einen Dokument-Stream schreibt, wird beim Aufruf von document.write auf ein geschlossenes (fertig geladenes) Dokument dieses automatisch wieder mittels document.open geöffnet, wodurch das Dokument geleert wird.
+ +

Syntax

+ +
document.write(markup);
+
+ +

Parameter

+ +
+
markup
+
Ein String, der in das Dokument geschrieben wird.
+
+ +

Beispiel

+ +
<html>
+
+<head>
+  <title>write example</title>
+
+  <script>
+    function newContent() {
+      alert("load new content");
+      document.open();
+      document.write("<h1>Raus mit dem Alten - rein mit dem Neuen!</h1>");
+      document.close();
+    }
+  </script>
+</head>
+
+<body onload="newContent();">
+  <p>originaler Dokumenten-Inhalt</p>
+</body>
+
+</html>
+
+ +

Hinweise

+ +

Wird die Ausgabe auf ein Dokument angewendet, das zuvor nicht mittels document.open() geöffnet wurde, löst dies ein implizites document.open aus. Sobald Sie den Schreibvorgang beendet haben, empfiehlt es sich document.close() aufzurufen, um dem Browser mitzuteilen, dass das Dokument vollständig geladen werden kann. Der geschriebene Text wird in das Strukturmodell des Dokuments eingelesen. Im vorherigen Beispiel wird das h1-Element automatisch in einen Knoten im Dokument umgewandelt.

+ +

Wird der document.write() Aufruf in ein im HTML eingeschlossenes <script> Tag eingebunden, wird document.open() nicht aufgerufen. Zum Beispiel:

+ +
<script>
+  document.write("<h1>Main title</h1>")
+</script>
+
+ +
Hinweis: document.write und document.writeln funktionieren nicht in XHTML Documenten (Sie erhalten einen "Operation is not supported" [NS_ERROR_DOM_NOT_SUPPORTED_ERR] Fehler in der Fehlerkonsole). Dies tritt auf, sobald Sie eine lokale Datei mit der Erweiterung .xhtml laden oder eine Datei öffnen, die mit dem application/xhtml+xml-MIME-Typ vom Server gesendet wurde. Weitere Informationen erhalten Sie in der W3C XHTML FAQ.
+ +
Hinweis: document.write in verzögert geladenen oder asynchronen Scripten wird ignoriert und Sie erhalten eine Nachricht ähnlich dieser in der Fehlerkonsole: "A call to document.write() from an asynchronously-loaded external script was ignored".
+ +
Hinweis (Nur Microsoft Edge): ein wiederholter Aufruf vondocument.write in einem <iframe> erzeugt den Fehler "SCRIPT70: Permission denied".
+ +
Hinweis (Chrome Version 55+): per document.write() injizierte <script>-Elemente werden bei einer 2G Verbindung nach einem HTTP Cache Miss nicht ausgeführt.
+ +

Spezifikationen

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/document/writeln/index.html b/files/de/web/api/document/writeln/index.html new file mode 100644 index 0000000000..6581924105 --- /dev/null +++ b/files/de/web/api/document/writeln/index.html @@ -0,0 +1,60 @@ +--- +title: Document.writeln() +slug: Web/API/Document/writeln +translation_of: Web/API/Document/writeln +--- +

{{ ApiRef("DOM") }}

+ +

Schreibt eine Textfolge, gefolgt von einem Zeilenumbruchzeichen, in ein Dokument.

+ +

Syntax

+ +
document.writeln(line);
+
+ +

Parameters

+ + + +

Beispiel

+ +
document.writeln("<p>enter password:</p>");
+
+ +

Notes

+ +

document.writeln ist dasselbe wie {{domxref("document.write")}} aber fügt einen Zeilenumbruch hinzu.

+ +
Note: document.writeln (like document.write) does not work in XHTML documents (you'll get a "Operation is not supported" (NS_ERROR_DOM_NOT_SUPPORTED_ERR) error on the error console). This is the case if opening a local file with a .xhtml file extension or for any document served with an application/xhtml+xml MIME type. More information is available in the W3C XHTML FAQ.
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName("HTML WHATWG", "#dom-document-writeln", "document.writeln()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-35318390", "document.writeln()")}}{{Spec2("DOM2 HTML")}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Document.writeln")}}

diff --git a/files/de/web/api/documentfragment/index.html b/files/de/web/api/documentfragment/index.html new file mode 100644 index 0000000000..8dc6abcceb --- /dev/null +++ b/files/de/web/api/documentfragment/index.html @@ -0,0 +1,258 @@ +--- +title: DocumentFragment +slug: Web/API/DocumentFragment +tags: + - API + - DOM + - DocumentFragment + - Documents + - Interface + - Reference + - Web Components +translation_of: Web/API/DocumentFragment +--- +
{{ APIRef("DOM") }}
+ +

Das DocumentFragment interface stellt ein einfaches Objekt dar, welches ohne Bezug zu einem parent erstellt und verwendet werden kann. Es kann somit verstanden werden als eine leichtgewichtige Variante des {{domxref("Document")}}, die einen Ausschnitt einer Dokumentstruktur aus Element-Knoten abbildet. Der zentrale Unterschied dabei ist jedoch, dass das Fragment nicht Bestandteil der aktiven Seitenstruktur und des DOM-Baums ist. Dadurch haben Änderungen an dem Fragment keine Auswirkungen auf das aktive Dokument, wodurch unerwünschte Seiteneffekte von DOM-Änderungen wie {{Glossary("reflow")}} oder Performanceeinbußen verhindert werden können.

+ +

Üblicherweise wird das DocumentFragment dazu verwendet, um einen neuen DOM-Teilbaum für eine Seite zu erzeugen und darin beliebig Fragmente und Knoten vorbereiten zu können, diese über das {{domxref("Node")}} interface mittels Methoden wie {{domxref("Node.appendChild", "appendChild()")}} und {{domxref("Node.insertBefore", "insertBefore()")}} hinzuzufügen. Wenn das Frament schließlich in die aktive Dokumentstruktur und deren DOM eingefügt wird, bleibt ein leeres DocumentFragment zurück. Da alle Knoten auf einmal in das aktive Dokument hinzugefügt werden, wird lediglich ein einzelner reflow und render Prozess ausgelöst, anstelle von potentiell unzähligen für jeden einzelnen, separat eingefügten Knoten.

+ +

Das interface wird ebenso bei Web components verwendet: {{HTMLElement("template")}}-Elemente beinhalten ein DocumentFragment in ihrer {{domxref("HTMLTemplateElement.content")}} Eigenschaft.

+ +

Ein leeres DocumentFragment kann jederzeit erzeugt werden über {{domxref("document.createDocumentFragment()")}} oder über den constructor.

+ +

{{InheritanceDiagram}}

+ +

Eigenschaften

+ +

Das interface hat keine spezifischen Eigenschaften, erhält jedoch über Vererbung die des übergeordneten {{domxref("Node")}} und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.

+ +
+
{{ domxref("ParentNode.children") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt eine aktuelle {{domxref("HTMLCollection")}} bereit mit allen {{domxref("Element")}} Objekten, die dem DocumentFragment angehören.
+
{{ domxref("ParentNode.firstElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt das {{domxref("Element")}} bereit, welches aktuell das erste Kind des DocumentFragment ist. null falls es keines gibt.
+
{{ domxref("ParentNode.lastElementChild") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt das {{domxref("Element")}} bereit, welches aktuell das letzte Kind des DocumentFragment ist. null falls es keines gibt.
+
{{ domxref("ParentNode.childElementCount") }} {{readonlyInline}}{{experimental_inline}}
+
Stellt als unsigned long die Anzahl der Kindelemente des DocumentFragment bereit.
+
+ +

Constructor

+ +
+
{{ domxref("DocumentFragment.DocumentFragment()", "DocumentFragment()") }} {{experimental_inline}}
+
Erzeugt ein neues, leeres DocumentFragment Objekt.
+
+ +

Methoden

+ +

Das interface erbt die Methoden von {{domxref("Node")}}, und implementiert darüber hinaus jene des {{domxref("ParentNode")}} interfaces zusätzlich.

+ +
+
{{domxref("DocumentFragment.find()")}} {{experimental_inline}}
+
Liefert das erste zutreffende {{domxref("Element")}} innerhalb des Baums des DocumentFragment.
+
{{domxref("DocumentFragment.findAll()")}} {{experimental_inline}}
+
Liefert eine {{domxref("NodeList")}} mit allen zutreffenden {{domxref("Element")}} innerhalb des Baums des DocumentFragment.
+
{{domxref("DocumentFragment.querySelector()")}}
+
Liefert den {{domxref("Element")}} Knoten im DocumentFragment, der in der Reihenfolge im document als erstes zu dem Selektor passt.
+
{{domxref("DocumentFragment.querySelectorAll()")}}
+
Liefert eine {{domxref("NodeList")}} mit allen {{domxref("Element")}} Knoden im DocumentFragment, die zu dem angegebenen Selektor passen.
+
+ +
+
{{domxref("DocumentFragment.getElementById()")}}
+
Liefert den ersten {{domxref("Element")}} Knoten im DocumentFragment, dem in der document Reihenfolge zuerst die angegebene ID zugeordnet ist.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkungen
{{SpecName('DOM WHATWG', '#interface-documentfragment', 'DocumentFragment')}}{{Spec2('DOM WHATWG')}}Added the constructor and the implementation of {{domxref("ParentNode")}}.
{{SpecName('Selectors API Level 2', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 2')}}Added the find() and findAll() methods.
{{SpecName('Selectors API Level 1', '#the-apis', 'DocumentFragment')}}{{Spec2('Selectors API Level 1')}}Added the querySelector() and querySelectorAll() methods.
{{SpecName('DOM3 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM3 Core')}}No change from {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM2 Core')}}No change from {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-B63ED1A3', 'DocumentFragment')}}{{Spec2('DOM1')}}Initial definition
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector() and querySelectorAll()1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
findAll() and find() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
DocumentFragment() constructor {{experimental_inline}}28.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatNo}}
ParentNode properties {{experimental_inline}}28.0{{CompatNo}}{{CompatGeckoDesktop("25.0")}}{{CompatNo}}15.0{{CompatNo}}
ParentNode methods {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector() and querySelectorAll()2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}8.010.03.2 (525.3)
findAll() and find() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
DocumentFragment() constructor {{experimental_inline}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
ParentNode properties {{experimental_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}5.0{{CompatNo}}
ParentNode methods {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/de/web/api/domerror/index.html b/files/de/web/api/domerror/index.html new file mode 100644 index 0000000000..1251609ed3 --- /dev/null +++ b/files/de/web/api/domerror/index.html @@ -0,0 +1,189 @@ +--- +title: DOMError +slug: Web/API/DOMError +tags: + - API + - DOM + - Fehler + - Interface + - Referenz +translation_of: Web/API/DOMError +--- +

{{ APIRef("DOM") }}

+ +

Das DOMError-Interface beschreibt ein Fehler-Objekt, welches ein Fehlername enthält.

+ +

Eigenschaften

+ +
+
{{domxref("DOMError.name")}} {{readOnlyInline}}
+
Gibt ein {{ domxref("DOMString") }} zurück, welcher einer der folgenden Fehlertypnamen repäsentiert (siehe unten).
+
+ +

Fehlertypen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TypBeschreibung
IndexSizeErrorDer Index ist ausserhalb des gültigen Bereichs (z. B. bei einem {{ domxref("range") }}-Objekt).
HierarchyRequestErrorDie  Knoten-Baum-Hierarchie ist nicht korrekt.
WrongDocumentErrorDas Objekt ist im falschen {{ domxref("document") }}.
InvalidCharacterErrorDer String beeinhaltet unglütige Charakter.
NoModificationAllowedErrorDas Objekt kann nicht modifiziert werden.
NotFoundErrorDas Objekt kann nicht gefunden werden.
NotSupportedErrorDie Operation wird nicht unterstützt
InvalidStateErrorDas Objekt hat einen ungültigen Status.
SyntaxErrorDer String entspricht nicht den erwarteten Muster.
InvalidModificationErrorDas Objekt kann nicht in dieser Art modifiziert werden.
NamespaceErrorDie Operation ist nicht erlaubt in XML-Namespaces.
InvalidAccessErrorDas Objekt unterstützt diese Operation oder dieses Argument nicht.
TypeMismatchErrorDer Typ des Objekts entspricht nicht dem erwarteten Typ.
SecurityErrorDiese Operation ist unsicher.
NetworkErrorEin Netzwerkfehler ist aufgetreten.
AbortErrorDie Operation wurde abgebrochen.
URLMismatchErrorDie angegebene URL entspricht nicht einer anderen URL.
QuotaExceededErrorDas Kontingent wurde überschritten.
TimeoutErrorTimeout bei der Operation.
InvalidNodeTypeErrorDer Knoten ist nicht korrekt oder hat falsche Vorfahren für die Operation.
DataCloneErrorDas Objekt kann nicht geklont werden.
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM4', '#interface-domerror', 'DOMError')}}{{Spec2('DOM4')}}Initial definition.
+ +

Browser-Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basissupport{{CompatUnknown}}12.0{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basissupport{{CompatUnknown}}12.0{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/domparser/index.html b/files/de/web/api/domparser/index.html new file mode 100644 index 0000000000..8082197658 --- /dev/null +++ b/files/de/web/api/domparser/index.html @@ -0,0 +1,181 @@ +--- +title: DOMParser +slug: Web/API/DOMParser +translation_of: Web/API/DOMParser +--- +

{{APIRef("DOM")}}{{SeeCompatTable}}

+ +

Der DOMParser kann XML oder HTML aus einem String in ein DOM-Document parsen. Der DOMParser ist spezifiziert in DOM Parsing and Serialization.

+ +

XMLHttpRequest unterstützt das parsen von XML- und HTML-Dokumenten auf die über eine URL zugegriffen wird.

+ +

DOMParser erzeugen

+ +

Um einen neuen DOMParser zu erzeugen benutze einfach new DOMParser().

+ +

Für mehr Informationen über das Erstellen von einem DOMParser in einer Firefox-Erweiterung, konsultiere die nsIDOMParser-Dokumentation.

+ +

XML parsen

+ +

Nachdem du einmal ein Parser-Objekt erzeugt hast, kannst du XML-Strings mit der parseFromString-Methode parsen.

+ +
const parser = new DOMParser();
+const doc = parser.parseFromString(stringContainingXMLSource, "application/xml");
+
+ +

Fehlerbehandlung

+ +

Beachte dass derzeit keine Exception ausgelöst wird, wenn es beim Ausführen des Parser-Prozesses zu einem Fehler kommen sollte. Stattdessen wird ein Fehler-Dokument  (s.a. {{Bug(45566)}}) ausgelöst:

+ +
<parsererror xmlns="http://www.mozilla.org/newlayout/xml/parsererror.xml">
+(error description)
+<sourcetext>(a snippet of the source XML)</sourcetext>
+</parsererror>
+
+ +

Die Parsing-Fehler werden auch in der Error-Console, zusammen mit dem Dokument-URl als Fehlerquelle ausgegeben (s.u.).

+ +

Ein SVG- oder HTML-Dokument parsen

+ +

Der DOMParser beherrscht auch SVG {{geckoRelease("10.0")}} und HTML {{geckoRelease("12.0")}}. Es gibt drei mögliche Ergebnisse, die mit der Übergabe eines MIME-Typen ausgewählt werden können. Ist der MIME-Typ text/xml, ist das resultierende Dokument ein XMLDocument, ist er image/svg+xml, wird ein SVGDocument zurückgegeben und für text/html erhält man ein HTMLDocument.

+ +
const xmlDoc = new DOMParser().parseFromString(stringContainingXMLSource, "application/xml");
+// returns a Document, but not a SVGDocument nor a HTMLDocument
+
+const svgDoc = new DOMParser().parseFromString(stringContainingXMLSource, "image/svg+xml");
+// returns a SVGDocument, which also is a Document.
+
+const htmlDoc = new DOMParser().parseFromString(stringContainingHTMLSource, "text/html");
+// returns a HTMLDocument, which also is a Document.
+
+ +

DOMParser HTML-Erweiterung für andere Browser

+ +
/* inspiriert von https://gist.github.com/1129031 */
+/*global document, DOMParser*/
+
+(function(DOMParser) {
+    "use strict";
+
+    const proto = DOMParser.prototype;
+    const nativeParse = proto.parseFromString;
+
+    // Firefox/Opera/IE werfen bei unbekannten Typen Fehler
+    try {
+        // WebKit gibt bei bei unbekannten Typen `null` zurück
+        if (new DOMParser().parseFromString("", "text/html")) {
+            // text/html wird unterstützt
+            return;
+        }
+    } catch (ex) {}
+
+    proto.parseFromString = function(markup, type) {
+        if (/^\s*text\/html\s*(?:;|$)/i.test(type)) {
+            const doc = document.implementation.createHTMLDocument("");
+            if (markup.toLowerCase().includes('<!doctype')) {
+                doc.documentElement.innerHTML = markup;
+            } else {
+                doc.body.innerHTML = markup;
+            }
+            return doc;
+        } else {
+            return nativeParse.apply(this, arguments);
+        }
+    };
+}(DOMParser));
+
+ +

Den DOMParser im Chrome/JSM/XPCOM/Privileged-Scope aufrufen

+ +

Siehe nsIDOMParser

+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
XML support{{CompatChrome(1)}}{{CompatGeckoDesktop(1)}}{{CompatIE(9)}}{{CompatOpera(8)}}{{CompatSafari(3.2)}}
SVG support{{CompatChrome(4)}}{{CompatGeckoDesktop(10.0)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(3.2)}}
HTML support{{CompatChrome(30)}}{{CompatGeckoDesktop(12.0)}}{{CompatIE(10)}}{{CompatOpera(17)}}{{CompatSafari(7.1)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
XML support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
SVG support{{CompatUnknown}}{{CompatGeckoMobile(10.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
HTML support{{CompatUnknown}}{{CompatGeckoMobile(12.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/domstring/index.html b/files/de/web/api/domstring/index.html new file mode 100644 index 0000000000..e6b148275c --- /dev/null +++ b/files/de/web/api/domstring/index.html @@ -0,0 +1,57 @@ +--- +title: DOMString +slug: Web/API/DOMString +tags: + - API + - DOM + - DOM Referenz + - DOMString + - Referenz + - String +translation_of: Web/API/DOMString +--- +

{{APIRef("DOM")}}

+ +

DOMString ist ein UTF-16 String. Obwohl JavaScript bereits solche Strings nutzt wird DOMString direkt zu einem {{jsxref("String")}} gemappt.

+ +

Wird null in einem Parameter oder einer Methode übergeben, so wandelt DOMString dies in den String "null" um.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebIDL', '#idl-DOMString', 'DOMString')}}{{Spec2('WebIDL')}}Anpassung der Definition um
{{SpecName('DOM3 Core', 'core.html#DOMString', 'DOMString')}}{{Spec2('DOM3 Core')}}Keine Änderung von {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM2 Core')}}Keine Änderung von {{SpecName('DOM1')}}
{{SpecName('DOM1', 'level-one-core.html#ID-C74D1578', 'DOMString')}}{{Spec2('DOM1')}}Ursprüngliche Definition.
+ +

See also

+ + diff --git a/files/de/web/api/domtokenlist/add/index.html b/files/de/web/api/domtokenlist/add/index.html new file mode 100644 index 0000000000..2e1b6728c2 --- /dev/null +++ b/files/de/web/api/domtokenlist/add/index.html @@ -0,0 +1,73 @@ +--- +title: DOMTokenList.add() +slug: Web/API/DOMTokenList/add +translation_of: Web/API/DOMTokenList/add +--- +

{{APIRef("DOM")}}

+ +

Die add() Methode des {{domxref("DOMTokenList")}} Interfaces, fügt ein token der Liste an.

+ +

Syntax

+ +
tokenList.add(token1[, token2[, ...]]);
+ +

Parameter

+ +
+
token
+
Ein {{domxref("DOMString")}} ,welches das token repräsentiert, welches an die Liste angefügt werden soll.
+
+ +

Rückgabewert

+ +

undefined

+ +

Beispiele

+ +

Im folgenden Beispiel erhalten wir die Liste der Klassen eines {{htmlelement("span")}} Elementes als DOMTokenList  , mit Hilfe von {{domxref("Element.classList")}}. Wir fügen der Liste dann ein neues token an und schreiben die Liste als inhalt in das <span>.

+ +

Das HTML:

+ +
<span class="a b c"></span>
+ +

Nun das JavaScript:

+ +
var span = document.querySelector("span");
+var classes = span.classList;
+classes.add("d");
+span.textContent = classes;
+
+ +

Die Ausgabe:

+ +

{{ EmbedLiveSample('Examples', '100%', 60) }}

+ +

Man kann auch mehrere tokens auf einmal hinzufügen:

+ +
span.classList.add("d", "e", "f");
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG','#dom-domtokenlist-add','add()')}}{{Spec2('DOM WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ +
+ + +

{{Compat("api.DOMTokenList.add")}}

+
diff --git a/files/de/web/api/domtokenlist/index.html b/files/de/web/api/domtokenlist/index.html new file mode 100644 index 0000000000..c963c053e0 --- /dev/null +++ b/files/de/web/api/domtokenlist/index.html @@ -0,0 +1,125 @@ +--- +title: DOMTokenList +slug: Web/API/DOMTokenList +translation_of: Web/API/DOMTokenList +--- +

{{APIRef("DOM")}}{{gecko_minversion_header("1.9.2")}}

+ +

Die DOMTokenList Schnittstelle repräsentiert eine Sammlung von durch Leerzeichen getrennte Zeichen/ Merkmale (Tokens). Solch eine Ansammlung wird wiedergegben von {{domxref("Element.classList")}}, {{domxref("HTMLLinkElement.relList")}}, {{domxref("HTMLAnchorElement.relList")}} oder {{domxref("HTMLAreaElement.relList")}}. Deren Index beginnt bei 0 wie bei JavaScript {{jsxref("Array")}} Objekten. DOMTokenList achten immer auf die Groß- und Kleinschreibung.

+ +

Eigenschaften

+ +

Die Schnittstelle erbt keine Eigenschaften.

+ +
+
{{domxref("DOMTokenList.length")}} {{ReadOnlyInline}}
+
Ist eine Ganzzahl, die die Anzahl der im Objekt gespeicherten Objekte darstellt.
+
+ +

Methoden

+ +

Diese Schnittstelle erbt keine Methode.

+ +
+
{{domxref("DOMTokenList.item()")}}
+
Returns an item in the list by its index (or undefined if the number is greater than or equal to the length of the list, prior to {{gecko("7.0")}} returned null)
+
{{domxref("DOMTokenList.contains()")}}
+
Returns true if the underlying string contains token, otherwise false
+
{{domxref("DOMTokenList.add()")}}
+
Fügt token der Liste hinzu.
+
{{domxref("DOMTokenList.remove()")}}
+
Removes token from the underlying string
+
{{domxref("DOMTokenList.replace()")}}
+
Replaces an existing token with a new token.
+
{{domxref("DOMTokenList.supports()")}}
+
Returns true if a given token is in the associated attribute's supported tokens.
+
{{domxref("DOMTokenList.toggle()")}}
+
Removes token from string and returns false. If token doesn't exist it's added and the function returns true
+
{{domxref("DOMTokenList.entries()")}}
+
Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.
+
{{domxref("DOMTokenList.forEach()")}}
+
Executes a provided function once per DOMTokenList element.
+
{{domxref("DOMTokenList.keys()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all keys of the key/value pairs contained in this object.
+
{{domxref("DOMTokenList.values()")}}
+
Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing to go through all values of the key/value pairs contained in this object.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM WHATWG", "#interface-domtokenlist", "DOMTokenList")}}{{Spec2("DOM WHATWG")}}Initial definition
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/dragevent/index.html b/files/de/web/api/dragevent/index.html new file mode 100644 index 0000000000..4f6ec7b562 --- /dev/null +++ b/files/de/web/api/dragevent/index.html @@ -0,0 +1,239 @@ +--- +title: DragEvent +slug: Web/API/DragEvent +translation_of: Web/API/DragEvent +--- +
{{APIRef("HTML DOM")}}
+ +

Das drag Event wird ausgelöst, wenn ein Element oder ein Text "gezogen" wird (alle paar hundert Millisekunden).

+ +

Allgemeine Informationen

+ +
+
Spezifikation
+
HTML5
+
Interface
+
DragEvent
+
Steigt auf
+
Ja
+
Abbrechbar
+
Ja
+
Ziel
+
Document, Element
+
Standard-Aktion
+
Mit der drag & drop Operation fortfahren.
+
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}EventTargetThe element that was underneath the element being dragged.
type {{readonlyInline}}DOMStringThe type of event.
bubbles {{readonlyInline}}BooleanWhether the event normally bubbles or not
cancelable {{readonlyInline}}BooleanWhether the event is cancellable or not?
view {{readonlyInline}}WindowProxydocument.defaultView (window of the document)
detail {{readonlyInline}}long (float)0.
dataTransferDataTransferThe data that underlies a drag-and-drop operation, known as the drag data store. Protected mode.
currentTarget {{readonlyInline}}EventTargetThe node that had the event listener attached.
relatedTarget {{readonlyInline}}EventTargetFor mouseover, mouseout, mouseenter and mouseleave events: the target of the complementary event (the mouseleave target in the case of a mouseenter event). null otherwise.
screenX {{readonlyInline}}longThe X coordinate of the mouse pointer in global (screen) coordinates.
screenY {{readonlyInline}}longThe Y coordinate of the mouse pointer in global (screen) coordinates.
clientX {{readonlyInline}}longThe X coordinate of the mouse pointer in local (DOM content) coordinates.
clientY {{readonlyInline}}longThe Y coordinate of the mouse pointer in local (DOM content) coordinates.
button {{readonlyInline}}unsigned shortThe button number that was pressed when the mouse event was fired: Left button=0, middle button=1 (if present), right button=2. For mice configured for left handed use in which the button actions are reversed the values are instead read from right to left.
buttons {{readonlyInline}}unsigned shortThe buttons being pressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are pressed, returns the logical sum of the values. E.g., if Left button and Right button are pressed, returns 3 (=1 | 2). More info.
mozPressure {{readonlyInline}}floatThe amount of pressure applied to a touch or tabdevice when generating the event; this value ranges between 0.0 (minimum pressure) and 1.0 (maximum pressure).
ctrlKey {{readonlyInline}}booleantrue if the control key was down when the event was fired. false otherwise.
shiftKey {{readonlyInline}}booleantrue if the shift key was down when the event was fired. false otherwise.
altKey {{readonlyInline}}booleantrue if the alt key was down when the event was fired. false otherwise.
metaKey {{readonlyInline}}booleantrue if the meta key was down when the event was fired. false otherwise.
+ +

Beispiel

+ +
<div class="dropzone">
+    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
+        This div is draggable
+    </div>
+</div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+<div class="dropzone"></div>
+
+<style>
+  #draggable {
+    width: 200px;
+    height: 20px;
+    text-align: center;
+    background: white;
+  }
+
+  .dropzone {
+    width: 200px;
+    height: 20px;
+    background: blueviolet;
+    margin-bottom: 10px;
+    padding: 10px;
+  }
+</style>
+
+<script>
+  var dragged;
+
+  /* Event wird vom ge-drag-ten Element ausgelöst */
+  document.addEventListener("drag", function( event ) {
+
+  }, false);
+
+  document.addEventListener("dragstart", function( event ) {
+      // Speichern einer ref auf das drag-bare Element
+      dragged = event.target;
+      // Element halb-transparent machen
+      event.target.style.opacity = .5;
+  }, false);
+
+  document.addEventListener("dragend", function( event ) {
+      // Transparenz zurücksetzen
+      event.target.style.opacity = "";
+  }, false);
+
+  /* events fired on the drop targets */
+  document.addEventListener("dragover", function( event ) {
+      // Standard-Aktion verhindern um das drop-Event zu erlauben
+      event.preventDefault();
+  }, false);
+
+  document.addEventListener("dragenter", function( event ) {
+      // Hintergrund des möglichen Drop-Zeils anfärben, wenn das drag-bare Element auf das Ziel gezogen wird
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "purple";
+      }
+
+  }, false);
+
+  document.addEventListener("dragleave", function( event ) {
+      // Hintergrund des möglichen Drop-Ziels, wenn das drag-bare Element vom Ziel wieder weggezogen wird / verlässt
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+      }
+  }, false);
+
+  document.addEventListener("drop", function( event ) {
+      // Standard-Aktion verhindern (Bei einigen Elementen wäre das das Öffnen als Link)
+      event.preventDefault();
+      // move dragged elem to the selected drop target
+      if ( event.target.className == "dropzone" ) {
+          event.target.style.background = "";
+          dragged.parentNode.removeChild( dragged );
+          event.target.appendChild( dragged );
+      }
+
+  }, false);
+</script>
+
+ +

Verwandte Events

+ +

 

+ + + +

 

diff --git a/files/de/web/api/element/classlist/index.html b/files/de/web/api/element/classlist/index.html new file mode 100644 index 0000000000..4e1f9b25df --- /dev/null +++ b/files/de/web/api/element/classlist/index.html @@ -0,0 +1,300 @@ +--- +title: Element.classList +slug: Web/API/Element/classList +translation_of: Web/API/Element/classList +--- +
{{APIRef("DOM")}}
+ +

Das Element.classList ist eine read-only Eigenschaft, welche die aktuelle {{domxref("DOMTokenList")}} Sammlung der Klassen-Attribute des Elements zurückgibt.

+ +

Die Benutzung von classList ist eine angenehme Alternative zum Ansprechen der Klassen eines Elements als die leerzeichengetrennte Zeichenfolge via {{domxref("element.className")}}. 

+ +

Syntax

+ +
const elementClasses = elementNodeReference.classList;
+
+ +

elementClasses ist eine DOMTokenList, welche die Klassen-Attribute der elementNodeReference repräsentiert. Wenn das Klassen-Attribut nicht gesetzt wurde oder elementClasses.length leer ist, wird 0 zurückgegeben. Element.classList selbst ist nur lesbar (read-only), obgleich es modifiziert werden kann, indem die Methoden add() und remove() angewendet werden.

+ +

Methoden

+ +
+
add( String [, String [, ...]] )
+
Fügt angegebene Klassenwerte hinzu. Wenn diese Klassen bereits im Attribut des Elements vorhanden sind, werden sie ignoriert.
+
remove( String [, String [, ...]] )
+
Ausgewählte Klassenwerte entfernen.
+ Bemerkung: Entfernen eines nicht vorhandenen Klassenwertes wirft keinen Fehler.
+
item ( Number )
+
Rückgabewert nach Index in der Sammlung.
+
toggle ( String [, force] )
+
Wenn nur ein Argument vorhanden ist: Klassenwert umschalten; d.h. wenn die Klasse existiert, dann entfernt es diese und gibt false zurück, wenn nicht, dann fügt es diese hinzu und gibt true zurück.
+
Wenn ein zweites Argument vorhanden ist: Wenn das zweite Argument auf true basiert, fügt es den angegebenen Klassenwert hinzu. Wenn es false auswertet, entfernt es ihn.
+
contains( String )
+
Überprüft, ob der angegebene Klassenwert im Klassenattribut des Elements vorhanden ist.
+
replace( oldClass, newClass )
+
Ersetzt einen vorhandenen Klassenwert.
+
+ +

Beispiele

+ +
const div = document.createElement('div');
+div.className = 'foo';
+
+// Status zum Beginn: <div class="foo"></div>
+console.log(div.outerHTML);
+
+// classList-API zum Entfernen und Ergänzen von Klassen nutzen
+div.classList.remove("foo");
+div.classList.add("anotherclass");
+
+// <div class="anotherclass"></div>
+console.log(div.outerHTML);
+
+// Wenn visible gesetzt ist entferne es, sonst füge es hinzu
+div.classList.toggle("visible");
+
+// Hinzufügen/Enfernen von visible, abhängig von der Bedingung, ob i kleiner 10 ist
+div.classList.toggle("visible", i < 10 );
+
+console.log(div.classList.contains("foo"));
+
+// Mehrere Klassen hinzufügen / entfernen
+div.classList.add("foo", "bar", "baz");
+div.classList.remove("foo", "bar", "baz");
+
+// Mehrere Klassen mittels Spread-Syntax hinzufügen / entfernen
+const cls = ["foo", "bar"];
+div.classList.add(...cls);
+div.classList.remove(...cls);
+
+// Klasse "foo" durch "bar" ersetzen
+div.classList.replace("foo", "bar");
+ +
+

Firefox-Versionen vor 26 setzen nicht die Nutzung die Nutzung von mehreren Argumenten in den Methoden add/remove/toggle um. Siehe https://bugzilla.mozilla.org/show_bug.cgi?id=814014

+
+ +

Polyfill

+ +
// Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
+/**
+ * Element.prototype.classList for IE8/9, Safari.
+ * @author    Kerem Güneş <k-gun@mail.com>
+ * @copyright Released under the MIT License <https://opensource.org/licenses/MIT>
+ * @version   1.2
+ * @see       https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
+ */
+;(function() {
+    // Helpers.
+    var trim = function(s) {
+            return s.replace(/^\s+|\s+$/g, '');
+        },
+        regExp = function(name) {
+            return new RegExp('(^|\\s+)'+ name +'(\\s+|$)');
+        },
+        forEach = function(list, fn, scope) {
+            for (var i = 0; i < list.length; i++) {
+                fn.call(scope, list[i]);
+            }
+        };
+
+    // Class list object with basic methods.
+    function ClassList(element) {
+        this.element = element;
+    }
+
+    ClassList.prototype = {
+        add: function() {
+            forEach(arguments, function(name) {
+                if (!this.contains(name)) {
+                    this.element.className = trim(this.element.className +' '+ name);
+                }
+            }, this);
+        },
+        remove: function() {
+            forEach(arguments, function(name) {
+                this.element.className = trim(this.element.className.replace(regExp(name), ' '));
+            }, this);
+        },
+        toggle: function(name) {
+            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
+        },
+        contains: function(name) {
+            return regExp(name).test(this.element.className);
+        },
+        item: function(i) {
+            return this.element.className.split(/\s+/)[i] || null;
+        },
+        // bonus
+        replace: function(oldName, newName) {
+            this.remove(oldName), this.add(newName);
+        }
+    };
+
+    // IE8/9, Safari
+    // Remove this if statements to override native classList.
+    if (!('classList' in Element.prototype)) {
+    // Use this if statement to override native classList that does not have for example replace() method.
+    // See browser compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#Browser_compatibility.
+    // if (!('classList' in Element.prototype) ||
+    //     !('classList' in Element.prototype && Element.prototype.classList.replace)) {
+        Object.defineProperty(Element.prototype, 'classList', {
+            get: function() {
+                return new ClassList(this);
+            }
+        });
+    }
+
+    // For others replace() support.
+    if (window.DOMTokenList && !DOMTokenList.prototype.replace) {
+        DOMTokenList.prototype.replace = ClassList.prototype.replace;
+    }
+})();
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "dom.html#dom-classlist", "Element.classList")}}{{Spec2("HTML WHATWG")}}Note within the HTML specification related to the {{htmlattrxref("class")}} attribute.
{{SpecName("DOM WHATWG", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM WHATWG")}}Initial definition
{{SpecName("DOM4", "#dom-element-classlist", "Element.classList")}}{{Spec2("DOM4")}}
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support812{{CompatGeckoDesktop(1.9.2)}}10[1]11.505.1
toggle() method's second argument2412{{CompatGeckoDesktop(24)}}{{CompatNo}}[2]157
Multiple arguments for add() & remove()2812{{CompatGeckoDesktop(26)}}{{CompatNo}}157
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.012{{CompatGeckoMobile(1.9.2)}}10[1]11.105.0
toggle method's second argument4.412{{CompatGeckoMobile(24)}}{{CompatNo}}[2]{{CompatUnknown}}7.0
multiple arguments for add() & remove()4.412{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}7.0
replace(){{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("49")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Not supported for SVG elements.  See a report at Microsoft about that.
+ [2] Internet Explorer never implemented this. See a report at Microsoft about that.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/classname/index.html b/files/de/web/api/element/classname/index.html new file mode 100644 index 0000000000..1af7c129f0 --- /dev/null +++ b/files/de/web/api/element/classname/index.html @@ -0,0 +1,128 @@ +--- +title: Element.className +slug: Web/API/Element/className +translation_of: Web/API/Element/className +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

className holt und setzt den Wert des Attributs class eines bestimmten Elements.

+ +

Syntax

+ +
var cName = elementNodeReference.className;
+elementNodeReference.className = cName;
+ + + +

Beispiel

+ +
let elm = document.getElementById('item');
+
+if(elm.className === 'active'){
+    elm.className = 'inactive';
+} else {
+    elm.className = 'active';
+}
+ +

Anmerkungen

+ +

Der Name className wird für diese Eigenschaft anstelle von class benutzt, um Komplikationen mit dem Schlüsselwort "class", welches in vielen Sprachen verwendet wird um das DOM zu verändern, zu vermeiden.

+ +

className kann auch eine Instanz von {{domxref("SVGAnimatedString")}} wenn das element ein {{domxref("SVGElement")}} ist. Es ist besser das Attribut className eines Elements zu ändern, in dem {{domxref("Element.getAttribute")}} verwendet beziehungsweise {{domxref("Element.setAttribute")}}, wenn man mit SVG Elementen arbeitet.

+ +
elm.setAttribute('class', elm.getAttribute('class'))
+ +

 

+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-element-classname", "element.className")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}{{Spec2("DOM2 HTML")}}Ursprüngliche Definition
+ +

Browserkompabilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FunktionalitätChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FunktionalitätAndroid webviewChrome für AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/element/getboundingclientrect/index.html b/files/de/web/api/element/getboundingclientrect/index.html new file mode 100644 index 0000000000..736314305d --- /dev/null +++ b/files/de/web/api/element/getboundingclientrect/index.html @@ -0,0 +1,62 @@ +--- +title: Element.getBoundingClientRect() +slug: Web/API/Element/getBoundingClientRect +translation_of: Web/API/Element/getBoundingClientRect +--- +
{{APIRef("DOM")}}
+ +

Die Methode Element.getBoundingClientRect()  gibt die Größe eines Elementes und dessen relative Position zum Viewport zurück.

+ +

Syntax

+ +
var domRect = element.getBoundingClientRect();
+
+ +

Rückgabe

+ +

Der zurückgegebene Wert ist ein DOMRect Objekt, welches die Vereinigungsmenge aller von getClientRects() zurückgegebenen Rechtecken eines Elementes darstellt, das heißt, der CSS border-boxes, die mit dem Element verknüpft sind.

+ +

Der Rückgabewert ist das kleinste Rechteck welches das komplette Element beinhaltet. Es enthält die read-only-Eigenschaften left, top, right ,bottom, x, y, width und height, welche die border-box in Pixeln beschreibt. Alle Eigenschaften, abgesehen von width und height, sind realtiv zur linken oberen Ecke des Viewports.

+ +
+

Merke: {{Gecko("1.9.1")}} fügt die Eigenschaften Breite und Höhe zu dem DOMRect Objekt hinzu.

+
+ +

Leere Borderboxen werden vollständig ignoriert. Sind sämtliche Borderboxen eines Elements leer, oder entsprechen die top und left Angaben der Borderbox der ersten CSS-Box (in der Reihenfolge des Inhalts), so wird Null (zero) für top und left zurückgegeben.

+ +

Ein Rechteck mit Breiten- und Höhenwerten von Null wird stattdessen zurückgegeben, und wo top und left den top-left Werten der Border-Box der ersten CSS-Box (in Reihenfolge des Inhaltes) entsprechen.

+ +

Bei der Berechnung des Rechtecks werden sowohl scrollbare Elemente sowie Scrolling an sich (wie viel bereits gescrollt wurde) einbezogen. Das bedeutet, dass die top und left Eigenschaften ihre Werte verändern, sobald sich deren Scrollposition verändert (d.h. ihre Werte sind relativ zum Viewport und nicht absolut).

+ +

Will man die Position des  Rechtecks in Bezug auf die Linke/Obere Ecke des Dokumentes haben, was der absoluten Position des Rechteckes entspricht, muss man zu den top und left Positionen, die Werte von window.scrollX und window.scrollY, addieren.

+ +

Um Browserkompabilität zu gewährleisten, nutzen Sie window.pageXOffset und window.pageYOffset statt window.scrollY und window.scrollX. Sollten window.pageXOffset, window.pageYOffset, window.scrollX and window.scrollY undefined sein, nutzen Sie (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollLeft == 'number' ? t : document.body).ScrollLeft and (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.ScrollTop == 'number' ? t : document.body).ScrollTop.

+ +

Beispiel

+ +
// rect is a DOMRect object with four properties: left, top, right, bottom
+var rect = obj.getBoundingClientRect();
+
+ +

Browser compatibility

+ +
{{Compat("api.Element.getBoundingClientRect")}}
+ +

Specification

+ + + +

Notes

+ +

getBoundingClientRect() wurde erstmals im DHTML Objektmodell von MS IE implementiert.

+ +

Der Rückgabewert von getBoundingClientRect() ist konstant, es können keine weiteren Eigenschaften hinzugefügt werden.

+ +

See also

+ + diff --git a/files/de/web/api/element/hasattribute/index.html b/files/de/web/api/element/hasattribute/index.html new file mode 100644 index 0000000000..991e9b9dcc --- /dev/null +++ b/files/de/web/api/element/hasattribute/index.html @@ -0,0 +1,129 @@ +--- +title: Element.hasAttribute() +slug: Web/API/Element/hasAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/hasAttribute +--- +
{{APIRef("DOM")}}
+ +

Die Methode Element.hasAttribute() nimmt einen String als Argument und gibt einen Boolean zurück. Der als Argument übergebene String spezifiziert das gemeinte Attribut und der Rückabe Wert gibt an, ob dieses Attribut in dem jeweiligen Element vorkommt . 

+ +

Syntax

+ +
var result = element.hasAttribute(name);
+
+ +
+
result
+
Rückgabewert, wahr oder falsch.
+
name
+
Ein String, der das jeweilige Attribut spezifiziert.
+
+ +

Beispiel

+ +
var foo = document.getElementById("foo");
+if (foo.hasAttribute("bar")) {
+    // do something
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasAttribute = prototype.hasAttribute || function(name) {
+        return !!(this.attributes[name] &&
+                  this.attributes[name].specified);
+    }
+})(Element.prototype);
+
+ +

Notizen

+ +
{{DOMAttributeMethods}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-element-hasattribute', 'Element.hasAttribute()')}}{{Spec2('DOM WHATWG')}}Von {{SpecName('DOM3 Core')}}, verlegt von {{domxref("Node")}} nach {{domxref("Element")}}
{{SpecName('DOM3 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM3 Core')}}Keine Veränderungen zu {{SpecName('DOM2 Core')}}
{{SpecName('DOM2 Core', 'core.html#ID-ElHasAttr', 'Element.hasAttribute()')}}{{Spec2('DOM2 Core')}}Initiale Definition.
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}8.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
diff --git a/files/de/web/api/element/index.html b/files/de/web/api/element/index.html new file mode 100644 index 0000000000..71975f163b --- /dev/null +++ b/files/de/web/api/element/index.html @@ -0,0 +1,522 @@ +--- +title: Element +slug: Web/API/Element +tags: + - DOM + - Interface +translation_of: Web/API/Element +--- +

{{ APIRef("DOM") }}

+ +

The Element interface represents an object of a {{domxref("Document")}}. This interface describes methods and properties common to all kinds of elements. Specific behaviors are described in interfaces which inherit from Element but add additional functionality. For example, the {{domxref("HTMLElement")}} interface is the base interface for HTML elements, while the {{domxref("SVGElement")}} interface is the basis for all SVG elements.

+ +

Languages outside the realm of the Web platform, like XUL through the XULElement interface, also implement it.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("Element.attributes") }} {{readOnlyInline}}
+
Returns a {{ domxref("NamedNodeMap") }} that lists all attributes associated with the element.
+
{{ domxref("ParentNode.childElementCount") }}
+
Is a {{jsxref("Number")}} representing the number of child nodes that are elements.
+
{{ domxref("ParentNode.children") }}
+
Is a live {{ domxref("HTMLCollection") }} containing all child elements of the element, as a collection.
+
{{ domxref("Element.classList") }} {{readOnlyInline}}
+
Returns a {{ domxref("DOMTokenList") }} containing the list of class attributes.
+
{{ domxref("Element.className") }}
+
Is a {{domxref("DOMString")}} representing the class of the element.
+
{{ domxref("Element.clientHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner height of the element.
+
{{ domxref("Element.clientLeft") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the left border of the element.
+
{{ domxref("Element.clientTop") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the width of the top border of the element.
+
{{ domxref("Element.clientWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the inner width of the element.
+
{{ domxref("ParentNode.firstElementChild") }}
+
Is a {{ domxref("Element") }}, the first direct child element of an element, or null if the element has no child elements.
+
{{ domxref("Element.id") }}
+
Is a {{domxref("DOMString")}} representing the id of the element.
+
{{ domxref("Element.innerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element's content.
+
{{ domxref("ParentNode.lastElementChild") }}
+
Is a {{ domxref("Element") }}, the last direct child element of an element, or null if the element has no child elements.
+
{{ domxref("NonDocumentTypeChildNode.nextElementSibling") }}
+
Is a {{ domxref("Element") }}, the element immediately following the given one in the tree, or null if there's no sibling node.
+
{{ domxref("Element.outerHTML") }} {{experimental_inline}}
+
Is a {{domxref("DOMString")}} representing the markup of the element including its content. When used as a setter, replaces the element with nodes parsed from the given string.
+
{{ domxref("NonDocumentTypeChildNode.previousElementSibling") }}
+
Is a {{ domxref("Element") }}, the element immediately preceding the given one in the tree, or null if there is no sibling element.
+
{{ domxref("Element.scrollHeight") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view height of an element.
+
{{ domxref("Element.scrollLeft") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the left scroll offset of the element.
+
{{ domxref("Element.scrollLeftMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the maximum left scroll offset possible for the element.
+
{{ domxref("Element.scrollTop") }} {{experimental_inline}}
+
Is a {{jsxref("Number")}} representing the top scroll offset the an element.
+
{{ domxref("Element.scrollTopMax") }} {{non-standard_inline}} {{readOnlyInline}}
+
Returns a{{jsxref("Number")}} representing the maximum top scroll offset possible for the element.
+
{{ domxref("Element.scrollWidth") }} {{experimental_inline}} {{readOnlyInline}}
+
Returns a {{jsxref("Number")}} representing the scroll view width of the element.
+
{{domxref("Element.shadowRoot") }} {{experimental_inline}} {{readOnlyInline}}
+
...
+
{{ domxref("Element.tagName") }} {{readOnlyInline}}
+
Returns a {{domxref("String")}} with the name of the tag for the given element.
+
{{ domxref("Element.undoManager")}} {{experimental_inline}} {{readOnlyInline}}
+
Returns the {{domxref("UndoManager")}} associated with the element.
+
{{ domxref("Element.undoScope")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}} indicating if the element is an undo scope host, or not.
+
+ +

Event handlers

+ +
+
{{ domxref("Element.ongotpointercapture") }}
+
…
+
{{ domxref("Element.onlostpointercapture") }}
+
…
+
{{ domxref("Element.onwheel") }} {{ non-standard_inline() }}
+
Returns the event handling code for the wheel event.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("Node")}}, and its own parent, {{domxref("EventTarget")}}, and implements those of {{domxref("ParentNode")}}, {{domxref("ChildNode")}}, {{domxref("NonDocumentTypeChildNode")}}, and {{domxref("Animatable")}}.

+ +
+
{{ domxref("EventTarget.addEventListener()") }}
+
Registers an event handler to a specific event type on the element.
+
{{ domxref("Element.closest()")}} {{experimental_inline}}
+
Returns the {{domxref("Element")}}, descendant of this element (or this element itself), that is the closest ancestor of the elements selected by the selectors given in parameter.
+
{{ domxref("Element.createShadowRoot()")}} {{experimental_inline}}
+
…
+
{{ domxref("EventTarget.dispatchEvent()") }}
+
Dispatches an event to this node in the DOM and returns a {{jsxref("Boolean")}} that indicates that at least one handler has not canceled it.
+
{{domxref("Element.find()")}}{{experimental_inline}}
+
...
+
{{domxref("Element.findAll()")}}{{experimental_inline}}
+
...
+
{{domxref("Animatable.getAnimationPlayers()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getAttribute()") }}
+
Retrieves the value of the named attribute from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNS()") }}
+
Retrieves the value of the attribute with the specified name and namespace, from the current node and returns it as an {{jsxref("Object")}}.
+
{{ domxref("Element.getAttributeNode()") }} {{obsolete_inline}}
+
Retrievse the node representation of the named attribute from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getAttributeNodeNS()") }} {{obsolete_inline}}
+
Retrieves the node representation of the attribute with the specified name and namespace, from the current node and returns it as an {{ domxref("Attr") }}.
+
{{ domxref("Element.getBoundingClientRect()") }} {{experimental_inline}}
+
...
+
{{ domxref("Element.getClientRects()") }} {{experimental_inline}} TYPE of returnvalue????
+
Returns a collection of rectangles that indicate the bounding rectangles for each line of text in a client.
+
{{domxref("Element.getDestinationInsertionPoints()")}} {{experimental_inline}}
+
…
+
{{ domxref("Element.getElementsByClassName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} that contains all descendant of the current element that posses the list of classes given in parameter.
+
{{ domxref("Element.getElementsByTagName()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name, from the current element.
+
{{ domxref("Element.getElementsByTagNameNS()") }}
+
Returns a live {{ domxref("HTMLCollection") }} containing all descendant elements, of a particular tag name and namespace, from the current element.
+
{{ domxref("Element.hasAttribute()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute or not.
+
{{ domxref("Element.hasAttributeNS()") }}
+
Returns a {{jsxref("Boolean")}} indicating if the element has the specified attribute, in the specified namespace, or not.
+
{{ domxref("Element.insertAdjacentHTML") }} {{experimental_inline}}
+
Parses the text as HTML or XML and inserts the resulting nodes into the tree in the position given.
+
{{ domxref("Element.matches()") }} {{experimental_inline}}
+
Returns a {{jsxref("Boolean")}} indicating whether or not the element would be selected by the specified selector string.
+
{{ domxref("Element.querySelector()") }}
+
Returns {{ domxref("Node") }}...
+
{{ domxref("Element.querySelectorAll") }}
+
Returns a {{ domxref("NodeList") }}...
+
{{ domxref("Element.releasePointerCapture")}} {{experimental_inline}}
+
…
+
{{domxref("ChildNode.remove()")}}
+
Removes the element from the children list of its parent.
+
{{ domxref("Element.removeAttribute()") }}
+
Removes the named attribute from the current node.
+
{{ domxref("Element.removeAttributeNS()") }}
+
Removes the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.removeAttributeNode()") }} {{obsolete_inline}}
+
Removes the node representation of the named attribute from the current node.
+
{{ domxref("EventTarget.removeEventListener()") }}
+
Removes an event listener from the element.
+
{{ domxref("Element.requestFullscreen()") }} {{experimental_inline}}
+
Asynchronously asks the browser to make the element full-screen.
+
{{ domxref("Element.requestPointerLock()")}} {{experimental_inline}}
+
Allows to asynchronously ask for the pointer to be locked on the given element.
+
+ +
+
{{ domxref("Element.scrollIntoView()") }} {{experimental_inline}}
+
Scrolls the page until the element gets into the view.
+
{{ domxref("Element.setAttribute()") }}
+
Sets the value of a named attribute of the current node.
+
{{ domxref("Element.setAttributeNS()") }}
+
Sets the value of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setAttributeNode()") }} {{obsolete_inline}}
+
Sets the node representation of the named attribute from the current node.
+
{{ domxref("Element.setAttributeNodeNS()") }} {{obsolete_inline}}
+
Setw the node representation of the attribute with the specified name and namespace, from the current node.
+
{{ domxref("Element.setCapture()") }} {{non-standard_inline}}
+
Sets up mouse event capture, redirecting all mouse events to this element.
+
{{domxref("Element.setPointerCapture()")}}
+
…
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Web Animations", '', '')}}{{Spec2("Web Animations")}}Added the getAnimationPlayers() method.
{{SpecName('Undo Manager', '', 'Element')}}{{Spec2('Undo Manager')}}Added the undoScope and undoManager properties.
{{SpecName('Pointer Events', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('Pointer Events')}}Added the following event handlers: ongotpointercapture and onlostpointercapture.
+ Added the following methods: setPointerCapture() and releasePointerCapture().
{{SpecName('Selectors API Level 2', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 2')}}Added the following methods: matches() (implemented as mozMatchesSelector()), find(), findAll().
{{SpecName('Selectors API Level 1', '#interface-definitions', 'Element')}}{{Spec2('Selectors API Level 1')}}Added the following methods: querySelector() and querySelectorAll().
{{SpecName('Pointer Lock', 'index.html#element-interface', 'Element')}}{{Spec2('Pointer Lock')}}Added the requestPointerLock() method.
{{SpecName('Fullscreen', '#api', 'Element')}}{{Spec2('Fullscreen')}}Added the requestFullscreen() method.
{{SpecName('DOM Parsing', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('DOM Parsing')}}Added the following properties: innerHTML, and outerHTML.
+ Added the following method: insertAdjacentHTML().
{{SpecName('CSSOM View', '#extensions-to-the-element-interface', 'Element')}}{{Spec2('CSSOM View')}}Added the following properties: scrollTop, scrollLeft, scrollWidth, scrollHeight, clientTop, clientLeft, clientWidth, and clientHeight.
+ Added the following methods: getClientRects(), getBoundingClientRect(), and scrollIntoView().
{{SpecName('Element Traversal', '#ecmascript-bindings', 'Element')}}{{Spec2('Element Traversal')}}Added inheritance of the {{domxref("ElementTraversal")}} interface.
{{SpecName('DOM WHATWG', '#interface-element', 'Element')}}{{Spec2('DOM WHATWG')}}Removed the following methods: closest(), setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode().
+ Removed the schemaTypeInfo property.
+ Modified the return value of getElementsByTag() and getElementsByTagNS().
+ Moved hasAttributes() form the Node interface to this one.
{{SpecName('DOM3 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM3 Core')}}Added the following methods: setIdAttribute(), setIdAttributeNS(), and setIdAttributeNode(). These methods were never implemented and have been removed in later specifications.
+ Added the schemaTypeInfo property. This property was never implemented and has been removed in later specifications.
{{SpecName('DOM2 Core', 'core.html#ID-745549614', 'Element')}}{{Spec2('DOM2 Core')}}The normalize() method has been moved to {{domxref("Node")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-745549614', 'Element')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
children{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}7.0 with a significant bug [1]
+ 9.0 according to the spec		{{CompatVersionUnknown}}{{CompatNo}}
childElementCount, nextElementSibling, previousElementSibling{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
firstElementChild, lastElementChild{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}9.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
classList{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}} {{CompatVersionUnknown}}{{CompatVersionUnknown}}
outerHTML {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
clientLeft, clientTop {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getBoundingClientRect(), getClientRects() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
querySelector(), querySelectorAll()1.0{{CompatGeckoDesktop("1.9.1")}}8.010.03.2 (525.3)
insertAdjacentHTML() {{experimental_inline}}1.0{{CompatGeckoDesktop("8")}}4.07.04.0 (527)
setCapture() {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
oncopy, oncut, onpaste {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatVersionUnknown}} {{CompatNo}}
onwheel {{non-standard_inline}}{{CompatNo}}{{CompatGeckoDesktop("17")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ongotpointercapture, onlostpointercapture, setPointerCapture(), and releasePointerCapture(){{CompatNo}}{{CompatNo}}10.0 {{property_prefix("MS")}}{{CompatNo}}{{CompatNo}}
matches() {{experimental_inline}}{{CompatVersionUnknown}} with the non-standard name webkitMatchesSelector{{CompatGeckoDesktop("1.9.2")}} with the non-standard name mozMatchesSelector
+ {{CompatGeckoDesktop("34")}} with the standard name		9.0 with the non-standard name msMatchesSelector11.5 with the non-standard name oMatchesSelector
+ 15.0 with the non-standard name webkitMatchesSelector		5.0 with the non-standard name webkitMatchesSelector
find() and findAll(){{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestPointerLock()16.0 {{property_prefix("webkit")}}, behind an about:flags
+ 22.0 {{property_prefix("webkit")}} (with special cases, progressively lifted see [2])		{{CompatGeckoDesktop("14")}}{{property_prefix("moz")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
requestFullscreen()14.0 {{property_prefix("webkit")}}{{CompatGeckoDesktop("10")}} {{property_prefix("moz")}}11.0 {{property_prefix("ms")}}12.10
+ 15.0 {{property_prefix("webkit")}}		5.1 {{property_prefix("webkit")}}
undoManager and undoScope{{CompatNo}}{{CompatVersionUnknown}} (behind the dom.undo_manager.enabled pref){{CompatNo}}{{CompatNo}}{{CompatNo}}
attributes{{CompatUnknown}}{{CompatGeckoDesktop("22")}}
+ Before this it was available via the {{domxref("Node")}} interface that any element inherits.		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoDesktop("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoDesktop("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoDesktop("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0
scrollTopMax() and scrollLeftMax(){{CompatNo}}{{CompatGeckoMobile("16")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
closest(){{CompatUnknown}}{{CompatGeckoMobile("35")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
hasAttributes(){{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} (on the {{domxref("Node")}} interface)
+ {{CompatGeckoMobile("35")}} (on this interface		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Internet Explorer 7 and 8 incorrectly return the comments as part of the children of an Element. This is fixed in Internet Explorer 9 and later.

+ +

[2] Chrome 16 allowed webkitRequestPointerLock() only in fullscreen; Chrome 21 for trusted web site (permission asked); Chrome 22 allowed it by default for all same-origin document; Chrome 23 allowed it in sandboxed {{HTMLElement("iframe")}} if the non-standard value webkit-allow-pointer-lock is set to the {{htmlattrxref("sandbox", "iframe")}} attribute.

diff --git a/files/de/web/api/element/innerhtml/index.html b/files/de/web/api/element/innerhtml/index.html new file mode 100644 index 0000000000..a5d3d3011d --- /dev/null +++ b/files/de/web/api/element/innerhtml/index.html @@ -0,0 +1,204 @@ +--- +title: Element.innerHTML +slug: Web/API/Element/innerHTML +translation_of: Web/API/Element/innerHTML +--- +
{{APIRef("DOM")}}
+ +

Die {{domxref("Element")}} Eigenschaft innerHTML ruft das im Element enthaltene HTML-oder XML-Markup ab oder legt dieses fest.

+ +
Hinweis: Wenn ein {{HTMLElement("div")}}, {{HTMLElement("span")}} oder {{HTMLElement("noembed")}}-Knoten einen untergeordneten Textknoten mit den Zeichen &, < oder > enthält, gibt innerHTML diese Zeichen als ihre entsprechende HTML-Entitäten "&amp;", "&lt;" bzw. "&gt;" zurück. Verwenden Sie {{domxref("Node.textContent")}}, um eine reine Kopie des Inhalts dieser Textknoten zu erhalten.
+ +

Verwenden Sie die Methode {{domxref("Element.insertAdjacentHTML", "insertAdjacentHTML()")}}, um den HTML-Code in das Dokument einzufügen, anstatt den Inhalt eines Elements zu ersetzen.

+ +

Syntax

+ +
const content = element.innerHTML;
+
+element.innerHTML = htmlString;
+
+ +

Wert

+ +

Ein {{domxref("DOMString")}}, das die HTML-Serialisierung der Nachkommen des Elements enthält. Wenn Sie den Wert von innerHTML festlegen, werden alle Nachkommen des Elements entfernt und durch Knoten ersetzt, die durch Analysieren des in htmlString angegebenen HTML-Codes erstellt werden.

+ +

Exceptions

+ +
+
SyntaxError
+
Es wurde versucht, den Wert von innerHTML mit einem nicht ordnungsgemäß formatierten HTML-String festzulegen.
+
NoModificationAllowedError
+
Es wurde versucht, den HTML-Code in einen Knoten einzufügen, dessen übergeordnetes Element {{domxref("Document")}} ist.
+
+ +

Nutzungshinweise

+ +

Die innerHTML-Eigenschaft kann verwendet werden, um den aktuellen HTML-Quellcode der Seite einschließlich aller Änderungen zu überprüfen, die seit dem erstmaligen Laden der Seite vorgenommen wurden.

+ +

HTML-Inhalte eines Elements auslesen

+ +

Das Lesen von innerHTML bewirkt, dass der Benutzer-Agent das HTML- oder XML-Fragment serialisiert, das aus den Nachkommen des Elements besteht. Der resultierende String wird zurückgegeben.

+ +
let contents = myElement.innerHTML;
+ +

Auf diese Weise können Sie das HTML-Markup der Inhaltsknoten des Elements anzeigen.

+ +
+

Hinweis: Das zurückgegebene HTML- oder XML-Fragment wird basierend auf dem aktuellen Inhalt des Elements generiert, sodass das Markup und Formatierung des zurückgegebenen Fragments wahrscheinlich nicht mit dem ursprünglichen Seiten-Markup übereinstimmt.

+
+ +

Inhalte eines Element ersetzen

+ +

Durch das Festlegen des Wertes von innerHTML können Sie den vorhandenen Inhalt eines Elements problemlos durch neuen Inhalt ersetzen.

+ +

Beispielsweise können Sie den gesamten Inhalt eines Dokuments löschen, indem Sie den Inhalt des Attributs {{domxref("Document.body", "body")}} löschen:

+ +
document.body.innerHTML = "";
+ +

In diesem Beispiel wird das aktuelle HTML-Markup des Dokuments abgerufen und die Zeichen "<" durch die HTML-Entität "&lt;" ersetzt, wodurch der HTML-Code im Wesentlichen in unformatierten Text umgewandelt wird. Dieses wird dann in ein Element {{HTMLElement("pre")}} eingeschlossen. Dann wird der Wert von innerHTML in diesen neuen String geändert. Als Ergebnis wird der Dokumentinhalt durch eine Anzeige des gesamten Quellcodes der Seite ersetzt.

+ +
document.documentElement.innerHTML = "<pre>" +
+         document.documentElement.innerHTML.replace(/</g,"&lt;") +
+            "</pre>";
+ +

Unter der Haube

+ +

Was passiert genau, wenn Sie den Wert von innerHTML festlegen? Der Benutzer-Agent führt dabei die folgenden Schritte aus:

+ +
    +
  1. Der angegebene Wert wird als HTML oder XML analysiert (basierend auf dem Dokumenttyp), sodass ein {{domxref("DocumentFragment")}}-Objekt den neuen Satz von DOM-Knoten für die neuen Elemente darstellt.
    2. +
  2. Wenn das Element, dessen Inhalt ersetzt wird, ein {{HTMLElement("template")}}-Element ist, wird das Attribut {{domxref("HTMLTemplateElement.content", "content")}} des Elements <template> durch das neue DocumentFragment ersetzt, welches in Schritt 1 erstellt wurde.
    3. +
  3. Bei allen anderen Elementen wird der Inhalt des Elements durch die Knoten im neuen DocumentFragment ersetzt.
    4. +
+ +

Sicherheitsüberlegungen

+ +

Es ist nicht ungewöhnlich, dass innerHTML zum Einfügen von Text in eine Webseite verwendet wird. Es besteht jedoch die Möglichkeit, dass dies zu einem Angriffsvektor auf einer Website wird, wodurch ein potenzielles Sicherheitsrisiko entsteht.

+ +
const name = "John";
+// angenommen 'el' ist ein HTML DOM Element
+el.innerHTML = name; // in diesem Fall harmlos
+
+// ...
+
+name = "<script>alert('Ich bin John in einem störenden Alert!')</script>";
+el.innerHTML = name; // in diesem Fall harmlos
+ +

Obwohl dies wie ein {{interwiki("wikipedia", "cross-site scripting")}}-Angriff aussieht, ist das Ergebnis harmlos. HTML5 schreibt vor, dass ein mit innerHTML eingefügtes {{HTMLElement("script")}}-Tag nicht ausgeführt werden soll.

+ +

Es gibt jedoch Möglichkeiten, JavaScript auszuführen, ohne {{HTMLElement("script")}}-Elemente zu verwenden. Daher besteht immer ein Sicherheitsrisiko, wenn Sie innerHTML verwenden, um Strings festzulegen, über die Sie keine Kontrolle haben. Zum Beispiel:

+ +
const name = "<img src='x' onerror='alert(1)'>";
+el.innerHTML = name; // zeigt den alert
+ +

Aus diesem Grund wird empfohlen, innerHTML nicht zum Einfügen von reinem Text zu verwenden. Verwenden Sie stattdessen {{domxref("Node.textContent", "textContent")}}. Der übergebene Inhalt wird nicht als HTML-Code analysiert, sondern als reiner Text eingefügt.

+ +
+

Warnung: Wenn Ihr Projekt einer Sicherheitsüberprüfung unterzogen wird, führt die Verwendung von innerHTML höchstwahrscheinlich dazu, dass Ihr Code abgelehnt wird. Wenn Sie beispielsweise innerHTML in einer Browsererweiterung verwenden und die Erweiterung bei addons.mozilla.org einreichen, wird sie den automatisierten Überprüfungsprozess nicht bestehen.

+
+ +

Beispiel

+ +

In diesem Beispiel wird mit innerHTML ein Mechanismus zum Protokollieren von Nachrichten in einem Feld auf einer Webseite erstellt.

+ +

JavaScript

+ +
function log(msg) {
+  var logElem = document.querySelector(".log");
+
+  var time = new Date();
+  var timeStr = time.toLocaleTimeString();
+  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
+}
+
+log("Logging mouse events inside this container...");
+
+ +

Die Funktion log() erstellt die Protokollausgabe, indem sie mithilfe von {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}} die aktuelle Uhrzeit aus einem {{jsxref("Date")}}-Objekt abruft und einen String aus dem Zeitstempel und dem Nachrichtentext erstellt. Dann wird die Nachricht an die Box mit der Klasse "log" angehängt.

+ +

Wir fügen eine zweite Methode hinzu, die Informationen zu auf {{domxref("MouseEvent")}} basierenden Ereignissen protokolliert (z. B. {{event("mousedown")}}, {{event("click")}} und {{event("mouseenter")}}):

+ +
function logEvent(event) {
+  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
+            event.clientX + ", " + event.clientY + "</em>";
+  log(msg);
+}
+ +

Dann verwenden wir dies als Ereignishandler für eine Reihe von Mausereignissen in der Box, die unser Protokoll enthält:

+ +
var boxElem = document.querySelector(".box");
+
+boxElem.addEventListener("mousedown", logEvent);
+boxElem.addEventListener("mouseup", logEvent);
+boxElem.addEventListener("click", logEvent);
+boxElem.addEventListener("mouseenter", logEvent);
+boxElem.addEventListener("mouseleave", logEvent);
+ +

HTML

+ +

Das HTML für unser Beispiel ist denkbar einfach.

+ +
<div class="box">
+  <div><strong>Log:</strong></div>
+  <div class="log"></div>
+</div>
+ +

Das {{HTMLElement("div")}} mit der Klasse "box" ist nur ein Container für Layoutzwecke, der den Inhalt mit einem Rahmen darstellt. Der <div>, dessen Klasse "log" ist, ist der Container für den Protokolltext.

+ +

CSS

+ +

Das folgende CSS formatiert unseren Beispielinhalt.

+ +
.box {
+  width: 600px;
+  height: 300px;
+  border: 1px solid black;
+  padding: 2px 4px;
+  overflow-y: scroll;
+  overflow-x: auto;
+}
+
+.log {
+  margin-top: 8px;
+  font-family: monospace;
+}
+ +

Ergebnis

+ +

Der resultierende Inhalt sieht so aus. Sie können die Ausgabe im Protokoll anzeigen, indem Sie die Maus in das Feld hinein- und herausbewegen, darauf klicken und so weiter.

+ +

{{EmbedLiveSample("Example", 640, 350)}}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}{{Spec2('DOM Parsing')}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Element.innerHTML")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/insertadjacenthtml/index.html b/files/de/web/api/element/insertadjacenthtml/index.html new file mode 100644 index 0000000000..14f05ca474 --- /dev/null +++ b/files/de/web/api/element/insertadjacenthtml/index.html @@ -0,0 +1,144 @@ +--- +title: Element.insertAdjacentHTML() +slug: Web/API/Element/insertAdjacentHTML +tags: + - .textContent() + - Geschwindigkeitsvorteil + - HTML einfügen + - Méthode + - Referenz +translation_of: Web/API/Element/insertAdjacentHTML +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

insertAdjacentHTML() interpretiert den angegebenen Text als HTML oder XML und fügt resultierende Knoten an angegebener Position ins DOM ein. Das Zielobjekt wird nicht erneut interpretiert, wodurch darin enthaltene, bereits existierende Elemente nicht beeinträchtigt werden.
+ Eine zusätzlich erforderliche Serialisierung wird vermieden, was einen deutlichen Geschwindigkeitsvorteil gegenüber einer innerHTML Manipulation ergibt.

+ +

Syntax

+ +
element.insertAdjacentHTML(position, text);
+ +

position beschreibt den Einfügepunkt relativ zu einem Element und muss einem der folgenden Schlüsselbegriffe entsprechen:

+ +
+
'beforebegin'
+
Vor dem element selbst.
+
'afterbegin'
+
Innerhalb des element, direkt vor dessen erstem Kind-Objekt. 
+
'beforeend'
+
Innerhalb des element, direkt nach dessen letztem Kind-Objekt.
+
'afterend'
+
Nach dem element selbst.
+
+ +

text ist die Zeichenfolge, die als HTML oder XML interpretiert und in den DOM-Baum eingesetzt wird.

+ +

Verdeutlichung der position Bezeichner

+ +
<!-- beforebegin -->
+<p>
+  <!-- afterbegin -->
+  foo
+  <!-- beforeend -->
+</p>
+<!-- afterend -->
+ +
Hinweis: Die beforebegin und afterend Positionierungen wirken nur, wenn der Knoten innerhalb des DOM-Baums steht und ein Eltern-Element hat. 
+ +

Beispiel

+ +
// <div id="one">one</div>
+var d1 = document.getElementById('one');
+d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
+
+// Danach sieht die neue Struktur so aus:
+// <div id="one">one</div><div id="two">two</div>
+ +

Anmerkungen

+ +

Sicherheitsaspekte

+ +

Beim Einfügen von HTML in eine Seite sollten keinesfalls unbehandelte Benutzereingaben genutzt werden (siehe 'Escaping'). 

+ +

Für das Einfügen reinen Texts sollte statt insertAdjacentHTML besser node.textContent benutzt werden. Diese Methode interpretiert Parameter nicht als HTML, sondern fügt puren Text ein.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
BeschreibungStatusKommentar
{{SpecName('DOM Parsing', '#widl-Element-insertAdjacentHTML-void-DOMString-position-DOMString-text', 'Element.insertAdjacentHTML()')}}{{ Spec2('DOM Parsing') }} 
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
grundsätzlich
+ unterstützt		1.0{{ CompatGeckoDesktop("8.0") }}4.07.04.0 (527)
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
grundsätzlich
+ unterstützt		{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/queryselector/index.html b/files/de/web/api/element/queryselector/index.html new file mode 100644 index 0000000000..a3cf7d9d89 --- /dev/null +++ b/files/de/web/api/element/queryselector/index.html @@ -0,0 +1,89 @@ +--- +title: Element.querySelector() +slug: Web/API/Element/querySelector +translation_of: Web/API/Element/querySelector +--- +
{{APIRef}}
+ +

Gibt das erste Unterelement des Elements, von dem es aufgerufen wird, zurück, auf das die angegebenen Selektoren zutreffen.

+ +

Syntax

+ +
element = baseElement.querySelector(selectors);
+
+ + + +

Beispiel

+ +

In diesem Beispiel wird das erste style Element aus dem body Element zurückgegeben, das den type text/css oder keinen type hat.

+ +
var el = document.body.querySelector("style[type='text/css'], style:not([type])");
+
+ +

Bemerkungen

+ +

Gibt null zurück, wenn keine Elemente gefunden werden, andernfalls das Element.

+ +

Eine SYNTAX_ERR Ausnahme tritt auf, wenn die angegebenen Selektoren ungültig sind.

+ +

querySelector() wurde in der WebApps API eingeführt.

+ +

Das Argument querySelector muss der CSS Syntax folgen. Siehe {{domxref("document.querySelector")}} für konkrete Beispiele.

+ +

Browserkompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
BrowserSupportAnmerkungen
Internet Explorer8Nur CSS 2.1 Selektoren (IE8)
Firefox (Gecko)3.5 (1.9.1) 
Opera10 
Chrome1 
Safari (webkit)3.2 (525.3)webk.it/16587
+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/element/queryselectorall/index.html b/files/de/web/api/element/queryselectorall/index.html new file mode 100644 index 0000000000..009a105b89 --- /dev/null +++ b/files/de/web/api/element/queryselectorall/index.html @@ -0,0 +1,206 @@ +--- +title: Element.querySelectorAll() +slug: Web/API/Element/querySelectorAll +tags: + - Méthode + - Referenz +translation_of: Web/API/Element/querySelectorAll +--- +
{{APIRef("DOM")}}
+ +

Summary

+ +

Gibt eine statische NodeList aller Elemente absteigend des Elements, auf welchem querySelectorAll ausgeführt wird, die mit den angegebenen CSS Selektoren übereinstimmen.

+ +

Syntax

+ +
elementList = baseElement.querySelectorAll(selectors);
+
+ +

wobei:

+ +
+
elementList
+
ist statische Node Liste [ NodeList[elements] ] mit element Objekten.
+
baseElement
+
ist ein element Objekt.
+
selectors
+
ist eine Gruppe von Selektoren die mit dem Element im DOM übereinstimmen soll. 
+
+ +

Beispiele

+ +

Dieses Beispiel gibt eine Liste der p Elementen im HTML body zurück:

+ +
let matches = document.body.querySelectorAll('p');
+
+ +

Dieses Beispiel gibt eine Liste der p Unter-Elementen eines Containers, dessen Überobjekt ein div mit der Klasse 'highlighted' ist:

+ +
let el = document.querySelector('#test');    //return an element with id='test'
+let matches = el.querySelectorAll('div.highlighted > p'); // return a NodeList of p wrapped in a div with attribute class "highlighted"
+
+ +

Dieses Beispiel gibt eine Liste der iframe Elementen die ein data Attribut 'src' besitzen:

+ +
let matches = el.querySelectorAll('iframe[data-src]');
+
+ +

Bemerkungen

+ +

If the specified "selectors" are not found inside the DOM of the page, the method queryselectorAll returns an empty NodeList as specified below:

+ +
> let x = document.body.querySelectorAll('.highlighted'); //case: if the class highlighted doesn't exist in any attribute "class" of the DOM the result is
+> [] //empty NodeList
+ +

querySelectorAll() was introduced in the WebApps API.

+ +

The string argument pass to querySelectorAll must follow the CSS syntax. See {{domxref("document.querySelector")}} for a concrete example.

+ +

We could access a single item inside the NodeList in the following way:

+ +
let x = document.body.querySelectorAll('.highlighted');
+x.length; //return the size of x
+x[i_item]; //where i_item has a value between 0 and x.length-1. The operator "[]" return as in an array the element at index "i_item"
+
+ +

We could iterate inside a NodeList with the construct for(....) {...} as in the following code:

+ +
 let x = document.body.querySelectorAll('.highlighted');
+ let index = 0;
+ for( index=0; index < x.length; index++ ) {
+       console.log(x[index]);
+ }
+ +

So in the above way, it is possible to manage and modify the behaviour of the page.

+ +

Quirks

+ +

querySelectorAll() behaves differently than most common JavaScript DOM libraries, which might lead to unexpected results:

+ +
<div class="outer">
+  <div class="select">
+    <div class="inner">
+    </div>
+  </div>
+</div>
+ +
let select = document.querySelector('.select');
+let inner = select.querySelectorAll('.outer .inner');
+inner.length; // 1, not 0!
+
+ +

In this example, when selecting .outer .inner in the context of .select, .inner is still found, even though .outer is not a descendant of the baseElement (.select).
+ querySelectorAll() only verifies that the last element in the selector is within the baseElement.

+ +

The :scope pseudo-class restores the expected behavior, only matching selectors on descendants of the baseElement:

+ +
let select = document.querySelector('.select');
+let inner = select.querySelectorAll(':scope .outer .inner');
+inner.length; // 0
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM4','#dom-parentnode-queryselectorallselectors','querySelectorAll')}}{{Spec2('DOM4')}} 
{{SpecName('Selectors API Level 2','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 2')}} 
{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}{{Spec2('Selectors API Level 1')}} 
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1{{CompatGeckoDesktop("1.9.1")}}8103.2 (525.3)
:scope pseudo-class{{ CompatVersionUnknown }}32{{CompatNo}}15[1]7.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.9.1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
:scope pseudo-class{{ CompatUnknown }}32{{CompatNo}}{{CompatNo}}7.0
+
+ +

[1] Supported in Opera 15+ by enabling the "Enable <style scoped>" or "Enable experimental Web Platform features" flag in chrome://flags.

+ +

See also

+ + diff --git a/files/de/web/api/element/removeattribute/index.html b/files/de/web/api/element/removeattribute/index.html new file mode 100644 index 0000000000..91be13b037 --- /dev/null +++ b/files/de/web/api/element/removeattribute/index.html @@ -0,0 +1,42 @@ +--- +title: Element.removeAttribute() +slug: Web/API/Element/removeAttribute +tags: + - API + - Attribut + - DOM + - Element + - Méthode +translation_of: Web/API/Element/removeAttribute +--- +

{{ APIRef("DOM") }}

+ +

removeAttribute entfernt ein Attribut vom gegebenen Element.

+ +

Syntax

+ +
element.removeAttribute(attrName);
+
+ + + +

Beispiel

+ +
// <div id="div1" align="left" width="200px">
+document.getElementById("div1").removeAttribute("align");
+// now: <div id="div1" width="200px">
+
+ +

Anmerkungen

+ +

Man sollte removeAttribute verwenden, statt den Attributswert auf null zu setzen (mit setAttribute).

+ +

Der Versuch, ein nicht vorhandenes Attribut zu entfernen, wirft keine Exception.

+ +

{{ DOMAttributeMethods() }}

+ +

Spezifikation

+ +

DOM Level 2 Core: removeAttribute (eingeführt in DOM Level 1 Core)

diff --git a/files/de/web/api/element/requestfullscreen/index.html b/files/de/web/api/element/requestfullscreen/index.html new file mode 100644 index 0000000000..01e207e00a --- /dev/null +++ b/files/de/web/api/element/requestfullscreen/index.html @@ -0,0 +1,118 @@ +--- +title: Element.requestFullscreen() +slug: Web/API/Element/requestFullScreen +translation_of: Web/API/Element/requestFullScreen +--- +
{{APIRef("Fullscreen API")}}
+ +

Die Funktion Element.requestFullscreen() sendet eine asynchrone Anfrage, um das Element in Vollbild darzustellen.

+ +

Es ist nicht garantiert, dass das Element in Vollbild angezeigt werden wird. Wenn die Berechtigung dazu erteilt wird, erhält das Dokument ein {{event("fullscreenchange")}} Event, um es wissen zu lassen, dass nun etwas in Vollbild angezeigt wird. Wird die Berechtigung jedoch verweigert, erhält das Dokument ein {{event('fullscreenerror')}} Event.

+ +
+

Nur Elemente im HTML Namespace (Standard HTML Elemente), plus die {{HTMLElement("svg")}} und {{HTMLElement("math")}} Elemente, welche sich im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut befinden, können im Vollbildmodus angezeigt werden. Das bedeutet, dass ein {{HTMLElement('frame')}} oder ein {{HTMLElement('object')}} dies nicht kann.

+
+ +

Syntax

+ +
Element.requestFullscreen();
+
+ +

Beispiel

+ +

Bevor requestFullScreen() aufgerufen wird, sollte man Eventhandler für die {{event("fullscreenchange")}} und {{event("fullscreenerror")}} Events erstellen, damit man erfährt, wenn das Dokument in den Vollbildmodus wechselt (oder die entsprechende Berechtigung dazu fehlt).

+ +

tbd

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Fullscreen", "#dom-element-requestfullscreen", "Element.requestFullScreen()")}}{{Spec2("Fullscreen")}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefoxInternet ExplorerEdgeOperaSafari
Grundlegene Unterstütung{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatGeckoDesktop("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoDesktop("47.0")}} (behind full-screen-api.unprefix.enabled		11{{property_prefix("ms")}}[3]{{CompatVersionUnknown}}[3]{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChrome AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegene Unterstütung{{CompatVersionUnknown}}{{property_prefix("webkit")}}[1]{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}} as mozRequestFullScreen[2]
+ {{CompatGeckoMobile("47.0")}} (behind full-screen-api.unprefix.enabled		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Auch implementiert als webkitRequestFullScreen.

+ +

[2] Implementiert als mozRequestFullScreen (man beachte das große S für Screen). Vor Firefox 44 erlaubte Gecko Elementen innerhalb eines {{HTMLElement('frame')}} oder {{HTMLElement('object')}} fälschlicherweise in den Vollbildmodus zu wechseln. Ab Firefox 44 wurde dieses Verhalten behoben: nur Elemente im Top-Level Dokument oder in einem {{HTMLElement('iframe')}} mit dem {{htmlattrxref("allowfullscreen", "iframe")}} Attribut können in den Vollbildmodus wechseln.

+ +

[3] Siehe Dokumentation auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/scrollintoview/index.html b/files/de/web/api/element/scrollintoview/index.html new file mode 100644 index 0000000000..ccbcc3e6ea --- /dev/null +++ b/files/de/web/api/element/scrollintoview/index.html @@ -0,0 +1,85 @@ +--- +title: Element.scrollIntoView() +slug: Web/API/Element/scrollIntoView +tags: + - API + - CSSOM Views + - Experimentell + - Methode(2) + - Reference +translation_of: Web/API/Element/scrollIntoView +--- +
{{ APIRef("DOM")}}{{SeeCompatTable}}
+ +

Die Methode Element.scrollIntoView() scrolled das Element in den sichtbaren Bereich des Browsers.

+ +

Syntax

+ +
element.scrollIntoView(); // Gleich mit element.scrollIntoView(true)
+element.scrollIntoView(alignToTop); // Boolean Argument
+element.scrollIntoView(scrollIntoViewOptions); // Object Argument
+
+ +

Parameter

+ +
+
alignToTop
+
Dies ist ein {{jsxref("Boolean")}} Wert: +
    +
  • Bei true wird der obere Rand des Elements an den oberen Rand des sichtbaren Bereichs im Browser gescrolled.
    • +
  • Bei false wird der untere Rand des Elements an den unteren Rand des sichtbaren Bereichs im Browser gescrolled.
    • +
+
+
scrollIntoViewOptions
+
Ein Boolean oder Objekt mit den folgenden Optionen:
+
+ 
{
+    behavior: "auto"  | "smooth",
+    block:    "start" | "end",
+}
+
+
Wenn der Wert ein Boolean, enspricht true {block: "start"} und false {block: "end"}.
+
+ +

Beispiel

+ +
var element = document.getElementById("box");
+
+element.scrollIntoView();
+element.scrollIntoView(false);
+element.scrollIntoView({block: "end"});
+element.scrollIntoView({block: "end", behavior: "smooth"});
+
+ +

Notizen

+ +

Das Element wird eventuell nicht ganz nach oben oder unten gescrolled. Je nach Layout der anderen Elemente.

+ +

Technische Daten

+ + + + + + + + + + + + + + +
SpecificationStatusKommentar
{{SpecName("CSSOM View", "#dom-element-scrollintoview", "Element.scrollIntoView()")}}{{Spec2("CSSOM View")}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Element.scrollIntoView")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/scrollleft/index.html b/files/de/web/api/element/scrollleft/index.html new file mode 100644 index 0000000000..90c28a203e --- /dev/null +++ b/files/de/web/api/element/scrollleft/index.html @@ -0,0 +1,83 @@ +--- +title: Element.scrollLeft +slug: Web/API/Element/scrollLeft +translation_of: Web/API/Element/scrollLeft +--- +

{{ APIRef("DOM") }}

+ +

Die Element.scrollLeft Eigenschaft setzt die Anzahl an Pixel, die der Inhalt eines Elements nach links gescrollt wird, oder liefert diese zurück.

+ +

Beachten Sie:  Wenn die Eigenschaft {{cssxref("direction")}} des Elements den Wert rtl (right-to-left) aufweist,  ist scrollLeft 0, falls der Scrollbalken ganz rechts ist (am Anfang des gescrollten Inhalts),  und nimmt zunehmend negative Werte an, wenn man gegen Ende des Inhalts scrollt.

+ +

Syntax

+ +
// Liefert die Anzahl der gescrollten Pixel
+var sLeft = element.scrollLeft;
+
+ +

sLeft ist ein Integer-Wert, der die Anzahl der Pixel repräsentiert, die element nach links gescrollt ist.

+ +
// Set the number of pixels scrolled
+element.scrollLeft = 10;
+
+ +

scrollLeft kann als Integerwert gesetzt werden. Dabei gilt:

+ + + +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <style>
+        #container {
+            border: 1px solid #ccc; height: 100px; overflow: scroll; width: 100px;
+        }
+        #content {
+            background-color: #ccc; width: 250px;
+        }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            var button = document.getElementById('slide');
+            button.onclick = function () {
+                document.getElementById('container').scrollLeft += 20;
+            };
+        }, false);
+    </script>
+</head>
+<body>
+    <div id="container">
+        <div id="content">Lorem ipsum dolor sit amet.</div>
+    </div>
+    <button id="slide" type="button">Slide</button>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSSOM View', '#dom-element-scrollleft', 'scrollLeft')}}{{Spec2("CSSOM View")}} 
+ +

Browserkompatibilität

+ +

{{Compat("api.Element.scrollLeft")}}

diff --git a/files/de/web/api/element/scrollwidth/index.html b/files/de/web/api/element/scrollwidth/index.html new file mode 100644 index 0000000000..2968c3ea64 --- /dev/null +++ b/files/de/web/api/element/scrollwidth/index.html @@ -0,0 +1,49 @@ +--- +title: Element.scrollWidth +slug: Web/API/Element/scrollWidth +tags: + - Eigenschaft + - Referenz +translation_of: Web/API/Element/scrollWidth +--- +
{{ APIRef("DOM") }}
+ +

Die schreibgeschützte Eigenschaft Element.scrollWidth liefert entweder die Breite (in Pixeln) des Inhaltes eines Elements oder die Breite des Elementes selbst, je nachdem, welche von beiden größer ist. Ist der Inhalt eines Elementes breiter als sein Inhaltsbereich (z.B. wenn Bildlaufleisten mit eingeblendet werden), dann ist die scrollWidth des Elementes größer als seine clientWidth.

+ +
+

Diese Eigenschaft rundet den Wert zu einem Integer (Ganzzahl). Sollte ein Wert mit Nachkommastellen benötigt werden, verwenden Sie {{ domxref("element.getBoundingClientRect()") }}.

+
+ +

Syntax

+ +
var xScrollWidth = element.scrollWidth;
+ +

xScrollWidth ist die Breite des Inhaltes des Elementes element in Pixeln.

+ +

Beispiel

+ +
<div id="aDiv" style="width: 100px; height: 200px; overflow: auto;">
+  FooBar-FooBar-FooBar
+</div>
+<br>
+<input
+  type="button"
+  value="Show scrollWidth"
+  onclick="alert(document.getElementById('aDiv').scrollWidth);"
+>
+ +

Spezifikation

+ +

Die Eigenschaft scrollWidth ist im CSSOM View Module definiert.

+ +

Referenzen

+ +

{{Compat("api.Element.scrollWidth")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/element/setattribute/index.html b/files/de/web/api/element/setattribute/index.html new file mode 100644 index 0000000000..292dd24a6f --- /dev/null +++ b/files/de/web/api/element/setattribute/index.html @@ -0,0 +1,48 @@ +--- +title: Element.setAttribute() +slug: Web/API/Element/setAttribute +tags: + - Attribut + - Methode(2) + - Méthode +translation_of: Web/API/Element/setAttribute +--- +
{{APIRef("DOM")}}
+ +

Fügt dem angegebenen Element ein Attribut hinzu oder ändert den Wert eines vorhandenen Attributs.

+ +

Syntax

+ +
element.setAttribute(name, value);
+
+ + + +

Beispiel

+ +
var d = document.getElementById("d1");
+
+d.setAttribute("align", "center");
+
+ +

Anmerkungen

+ +

Wenn setAttribute auf einem HTML-Element in einem HTML-Dokument aufgerufen wird, wird der Name des Attributes in Kleinbuchstaben umgewandelt.

+ +

Wenn das angegebene Attribut bereits existiert, ersetzt setAttribute den alten Wert. Falls das Attribut nicht existiert, wird es erzeugt.

+ +

Obwohl getAttribute() für fehlende Attribute null liefert, sollte man removeAttribute() statt elt.setAttribute(attr, null) verwenden um ein Attribut zu entfernen.

+ +

setAttribute() zu benutzen, um einige XUL-Attribute (vor allem value) zu ändern, verhält sich inkonsistent, da das Attribut nur den Standardwert spezifiziert. Um den aktuellen Wert zu ändern sollte man die Eigenschaften direkt verwenden. Zum Beispiel elt.value statt elt.setAttribute('value', val).

+ +
{{DOMAttributeMethods}}
+ +

Spezifikation

+ + diff --git a/files/de/web/api/event/bubbles/index.html b/files/de/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..286bac6a23 --- /dev/null +++ b/files/de/web/api/event/bubbles/index.html @@ -0,0 +1,59 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +translation_of: Web/API/Event/bubbles +--- +

{{ ApiRef("DOM") }}

+ +

Zusammenfassung

+ +

Gibt an, ob ein Event in der DOM-Hierarchie nach oben propagiert wird oder nicht.

+ +

Syntax

+ +
event.bubbles
+ +

Wert

+ +

Ein {{domxref("Boolean")}}, welches true ist, falls das Event durch die DOM-Hierarchie nach oben propagiert wird.

+ +

Beispiel

+ +
 function goInput(e) {
+  // checks bubbles and
+  if (!e.bubbles) {
+     // passes event along if it's not
+     passItOn(e);
+  }
+  // already bubbling
+  doOutput(e)
+}
+
+ +
+

Hinweis: Nur bestimmte Events können weiter nach oben propagiert werden. Die Events, die dazu in der Lage sind, haben den Wert true,  für die hier beschriebene Eigenschaft.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM WHATWG') }} 
{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}{{ Spec2('DOM2 Events') }}Initial definition.
diff --git a/files/de/web/api/event/event/index.html b/files/de/web/api/event/event/index.html new file mode 100644 index 0000000000..ee30a2064c --- /dev/null +++ b/files/de/web/api/event/event/index.html @@ -0,0 +1,72 @@ +--- +title: Event() +slug: Web/API/Event/Event +translation_of: Web/API/Event/Event +--- +

{{APIRef("DOM")}}

+ +

Der Konstruktor: Event()  erstellt ein neues {{domxref("Event")}}.

+ +

Syntax

+ +
 event = new Event(typeArg, eventInit);
+ +

Values

+ +
+
typeArg
+
ist ein {{domxref("DOMString")}} und bestimmt den Namen des Events.
+
eventInit {{optional_inline}}
+
+ +
+
ist ein {{jsxref("Object")}} und beinhaltet folgende Felder: +
    +
  • "bubbles": (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event gebubbled werden soll. Der Standardwert ist false.
    • +
  • "cancelable": (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event abgebrochen werden kann. Der Standardwert false.
    • +
  • "composed": (Optional) Ein {{jsxref("Boolean")}}, welcher angibt, ob das Event auch außerhalb eines Shadow-Root-Elements empfangen werden kann. Der Standardwert ist false. 
    • +
+
+
+ +

Example

+ +
// create a look event that bubbles up and cannot be canceled
+
+var evt = new Event("look", {"bubbles":true, "cancelable":false});
+document.dispatchEvent(evt);
+
+// event can be dispached from any elmement, not only the document
+myDiv.dispatchEvent(evt);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG','#interface-event','Event()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.Event.Event")}}

+ +

See also

+ + diff --git a/files/de/web/api/event/index.html b/files/de/web/api/event/index.html new file mode 100644 index 0000000000..0962ba6de2 --- /dev/null +++ b/files/de/web/api/event/index.html @@ -0,0 +1,253 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - NeedsTranslation + - Reference + - TopicStub + - UI +translation_of: Web/API/Event +--- +

{{APIRef("DOM")}}

+ +

Das Event Interface repräsentiert jegliches Ereignis, das im DOM auftritt.

+ +

Ein Ereignis kann durch Benutzerinteraktion ausgelöst werden, z.B das Klicken einer Maustaste oder Eingaben der Tastatur, oder durch eine API generiert werden um den Fortschritt eines asynchronen Prozesses zu repräsentieren. Es kann auch durch ein Programm ausgelöst werden, beispielsweise indem die HTMLElement.click() Method eines Elements aufgerufen wird, oder indem ein Ereignis definiert wird und es danach mithilfe von EventTarget.dispatchEvent() an ein Ziel versandt wird.

+ +

Es gibt eine Vielzahl verschiedener Typen von Ereignissen, von denen manche erweiterte Schnittstellen basieren auf dem zentralen Event Interface benutzen. Event beinhaltet alle Attribute und Methoden, die allen Ereignissen gemein sind.

+ +

Viele DOM-Element können für das Empfangen dieser Events konfiguriert werden und rufen Code auf, um sie zu behandeln. Event-Handler werden normalerweise mit unterschiedlichen HTML-Elementen (so wie <button>, <div>, <span>, etc.) verbunden, durch den Aufruf von EventTarget.addEventListener(). Dies ersetzt größtenteils die alten HTML Event Handler Attribute. Die neueren Event-Handler können außerdem nötigenfalls mithilfe von removeEventListener() wieder entfernt werden.

+ +
+

Note: Ein Element kann mehrere solcher Handler besitzen, sogar für das selbe Ereignis—so können sie verschiedene, unabhängige Code-Module angebracht werden, jeweils für deren unabhängige Zwecke. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodel, die beide Videowiedergabe überwachen.)

+
+ +

Gitb es viele verschachtelte Element, jedes mit eigenen Event-Handlern, kann das Verarbeiten von Ereignissen siehr schnell komplex werden—im Speziellen wenn ein Elternelement die selben Ereignissen wie sein Kindelement empfängt, weil sie sich überlappen und so Ereignisse technisch gesehen in beiden geschehen. Die Behandlungsreihenfolge solcher Ereignisse hängen von Event bubbling and capture Konfigurationen jedes ausgelösten Event-Handlers ab.

+ +

Interfaces based on Event

+ +

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference. Note that all event interfaces have names which end in "Event".

+ +
+ +
+ +

Constructor

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Creates an Event object, returning it to the caller.
+
+ +

Properties

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
A Boolean indicating whether the event bubbles up through the DOM or not.
+
{{domxref("Event.cancelBubble")}}
+
A historical alias to {{domxref("Event.stopPropagation()")}}. Setting its value to true before returning from an event handler prevents propagation of the event.
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
A Boolean indicating whether the event is cancelable.
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent; it's possible this has been changed along the way through retargeting.
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
An {{jsxref("Array")}} of DOM {{domxref("Node")}}s through which the event has bubbled.
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
Indicates whether or not {{domxref("event.preventDefault()")}} has been called on the event.
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
Indicates which phase of the event flow is being processed.
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The explicit original target of the event (Mozilla-specific).
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
The original target of the event, before any retargetings (Mozilla-specific).
+
{{domxref("Event.returnValue")}} {{non-standard_inline}}
+
A non-standard alternative (from old versions of Microsoft Internet Explorer) to {{domxref("Event.preventDefault()")}} and {{domxref("Event.defaultPrevented")}}.
+
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
+
A {{jsxref("Boolean")}} indicating whether the given event will bubble across through the shadow root into the standard DOM. This property has been renamed to {{domxref("Event.composed", "composed")}}.
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
A non-standard alias (from old versions of Microsoft Internet Explorer) for {{domxref("Event.target")}}.
+
{{domxref("Event.target")}} {{readonlyinline}}
+
A reference to the target to which the event was originally dispatched.
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
The time at which the event was created, in milliseconds. By specification, this value is time since epoch, but in reality browsers' definitions vary; in addition, work is underway to change this to be a {{domxref("DOMHighResTimeStamp")}} instead.
+
{{domxref("Event.type")}} {{readonlyinline}}
+
The name of the event (case-insensitive).
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
Indicates whether or not the event was initiated by the browser (after a user click for instance) or by a script (using an event creation method, like event.initEvent)
+
+ +

Methods

+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
Initializes the value of an Event created. If the event has already being dispatched, this method does nothing.
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Prevents the event from bubbling. Obsolete, use {{domxref("event.stopPropagation")}} instead.
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
Obsolete, use {{domxref("event.stopPropagation")}} instead.
+
{{domxref("Event.preventDefault()")}}
+
Cancels the event (if it is cancelable).
+
{{domxref("Event.stopImmediatePropagation()")}}
+
For this particular event, no other listener will be called. Neither those attached on the same element, nor those attached on elements which will be traversed later (in capture phase, for instance)
+
{{domxref("Event.stopPropagation()")}}
+
Stops the propagation of events further along in the DOM.
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
Non-standard. Returns the value of {{domxref("Event.defaultPrevented")}}. Use {{domxref("Event.defaultPrevented")}} instead.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}}
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
cancelBubble defined on Event{{CompatUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
cancelBubble defined on Event{{CompatUnknown}}{{CompatGeckoMobile(53)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Previous to Firefox 52, this property was defined on the {{domxref("UIEvent")}} interface. See {{bug(1298970)}} for more details.

+ +

See also

+ + diff --git a/files/de/web/api/eventlistener/index.html b/files/de/web/api/eventlistener/index.html new file mode 100644 index 0000000000..c7eb012670 --- /dev/null +++ b/files/de/web/api/eventlistener/index.html @@ -0,0 +1,48 @@ +--- +title: EventListener +slug: Web/API/EventListener +tags: + - API + - DOM + - DOM Events +translation_of: Web/API/EventListener +--- +

{{APIRef("DOM Events")}}

+ +

Methodenübersicht

+ + + + + + + +
void handleEvent (in Event event);
+ +

Methoden

+ +

handleEvent()

+ +

Diese Methode wird immer aufgerufen, wenn ein Event auftritt, welche im EventListener Interface registriert wurden.

+ +
void handleEvent(
+  in Event event
+);
+
+ +
Parameter
+ +
+
event
+
Das DOM-{{ domxref("Event") }} das zu registrieren ist.
+
+ +

Anmerkungen

+ +

Da das Interface mit dem [function] Flag gekennzeichnet ist, implementieren alle JavaScript-Funktionen dieses automatisch. Das Aufrufen von {{ manch("handleEvent") }} einer solchen Implementierung ruft automatisch diese Funktion auf.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/eventsource/index.html b/files/de/web/api/eventsource/index.html new file mode 100644 index 0000000000..7942b2df95 --- /dev/null +++ b/files/de/web/api/eventsource/index.html @@ -0,0 +1,126 @@ +--- +title: EventSource +slug: Web/API/EventSource +tags: + - API + - Interface + - Referenz + - Server-sent events +translation_of: Web/API/EventSource +--- +

{{APIRef("Websockets API")}}

+ +

Das EventSource-Interface erlaubt das Empfangen von Server-Sent Events. Es erlaubt den Zugriff auf Events im text/event-stream Format über eine persistente HTTP-Verbindung.

+ +
+
+ +

Properties

+ +

Diese Interface erbt weitere Properties von seinem Parent-Object {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.onerror")}}
+
Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird aufgerufen, wenn ein Fehler auftritt und das {{event("error")}}-Event auf diesem Object ausgelöst wird.
+
{{domxref("EventSource.onmessage")}}
+
Ist eine {{domxref("EventHandler")}}-Instanz. Diese wir aufgerufen, wenn ein {{event("message")}}-event empfangen wird. Dies ist immer dann der Fall, wenn die Event-Quelle eine neue Nachricht erzeugt hat.
+
{{domxref("EventSource.onopen")}}
+
Ist eine {{domxref("EventHandler")}}-Instanz. Diese wird immer dann aufgerufen, wenn die Verbindung geöffnet wurde, also ein {{event("open")}}-Event empfangen wurde.
+
{{domxref("EventSource.readyState")}} {{readonlyinline}}
+
Ein unsigned short, welcher den aktuellen Status der Verbindung repräsentiert. Gültige werte sind CONNECTING (0), OPEN (1), or CLOSED (2).
+
{{domxref("EventSource.url")}} {{readonlyinline}}
+
Ein {{domxref("DOMString")}}, welcher die URL der Event-Quelle beinhaltet.
+
+ +

Methods

+ +

Diese Interface erbt weitere Methoden von seinem Parent-Object {{domxref("EventTarget")}}.

+ +
+
{{domxref("EventSource.close()")}}
+
Schließt die Verbindung, soweit geöffnet, und setzt den Status (readyState) auf CLOSED. Auf bereits geschlossenen Verbindungen hat diese Methode keinen Effekt.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "comms.html#the-eventsource-interface", "EventSource")}}{{Spec2('HTML WHATWG')}}
+ + + +

Browser Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis-Support9{{ CompatGeckoDesktop("6.0") }}{{CompatUnknown}}115
CORS-Support26{{ CompatGeckoDesktop("11.0") }}{{CompatUnknown}}12{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis-Support{{ CompatAndroid("4.4") }}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/eventtarget/index.html b/files/de/web/api/eventtarget/index.html new file mode 100644 index 0000000000..3ed264119e --- /dev/null +++ b/files/de/web/api/eventtarget/index.html @@ -0,0 +1,174 @@ +--- +title: EventTarget +slug: Web/API/EventTarget +tags: + - API + - DOM + - DOM Events + - Interface + - NeedsTranslation + - TopicStub +translation_of: Web/API/EventTarget +--- +

{{ApiRef("DOM Events")}}

+ +

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

+ +

{{domxref("Element")}}, {{domxref("document")}}, and {{domxref("window")}} are the most common event targets, but other objects can be event targets too, for example {{domxref("XMLHttpRequest")}}, {{domxref("AudioNode")}}, {{domxref("AudioContext")}}, and others.

+ +

Many event targets (including elements, documents, and windows) also support setting event handlers via on... properties and attributes.

+ +

Methods

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler of a specific event type on the EventTarget.
+
{{domxref("EventTarget.removeEventListener()")}}
+
Removes an event listener from the EventTarget.
+
{{domxref("EventTarget.dispatchEvent()")}}
+
Dispatch an event to this EventTarget.
+
+ +

Additional methods for Mozilla chrome code

+ +

Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also WebIDL bindings.

+ + + +

Example:

+ +

Simple implementation of EventTarget

+ +
var EventTarget = function() {
+  this.listeners = {};
+};
+
+EventTarget.prototype.listeners = null;
+EventTarget.prototype.addEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    this.listeners[type] = [];
+  }
+  this.listeners[type].push(callback);
+};
+
+EventTarget.prototype.removeEventListener = function(type, callback) {
+  if (!(type in this.listeners)) {
+    return;
+  }
+  var stack = this.listeners[type];
+  for (var i = 0, l = stack.length; i < l; i++) {
+    if (stack[i] === callback){
+      stack.splice(i, 1);
+      return;
+    }
+  }
+};
+
+EventTarget.prototype.dispatchEvent = function(event) {
+  if (!(event.type in this.listeners)) {
+    return true;
+  }
+  var stack = this.listeners[event.type];
+  event.target = this;
+  for (var i = 0, l = stack.length; i < l; i++) {
+    stack[i].call(this, event);
+  }
+  return !event.defaultPrevented;
+};
+
+ +

{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}{{Spec2('DOM WHATWG')}}No change.
{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}{{Spec2('DOM3 Events')}}A few parameters are now optional (listener), or accepts the null value (useCapture).
{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1")}}9.071.0[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoMobile("1")}}9.06.01.0
+
+ +

[1] window.EventTarget does not exist.

+ +

See Also

+ + diff --git a/files/de/web/api/federatedcredential/index.html b/files/de/web/api/federatedcredential/index.html new file mode 100644 index 0000000000..1d7569e449 --- /dev/null +++ b/files/de/web/api/federatedcredential/index.html @@ -0,0 +1,125 @@ +--- +title: FederatedCredential +slug: Web/API/FederatedCredential +tags: + - API + - Föderierte Zugangsdaten + - Schnittstelle + - Zugangsdaten +translation_of: Web/API/FederatedCredential +--- +

{{SeeCompatTable}}{{APIRef("Credential Management API")}}

+ +

Die FederatedCredential Schnittstelle der Credential Management API stellt Informationen über Zugangsdaten eines Anbieters föderierter Identitäten bereit. Ein Anbieter föderierter Identitäten ist ein Gebilde, dem eine Webseite vertraut, eine Nutzerin korrekt zu identifizieren und eine API für diesen Zweck bereit stellt. OpenID Connect ist ein Beispiel für ein Framework für Anbieter föderierter Identitäten.

+ +

In Brwosern, die dies unterstützen, kann eine Instanz dieser Schnittstelle in der credential Funktions des init Objekt für globales {{domxref('fetch')}} mitgegeben werden.

+ +
+
{{domxref("FederatedCredential.FederatedCredential()","FederatedCredential()")}}
+
Erstellt ein neues FederatedCredential Objekt.
+
+ +

Eigenschaften

+ +

Erbt Eigenschaften von seinem Vorfahren, {{domxref("Credential")}}.

+ +
+
{{domxref("FederatedCredential.provider")}} {{readonlyInline}}
+
Gibt einen {{domxref("USVString")}} zurück, der den Anbieter föderierter Identitäten eines Satzes von Zugangsdaten enthält.
+
+ +

Event-Handler

+ +

Keine.

+ +

Methoden

+ +

Keine.

+ +

Beispiele

+ +
var cred = new FederatedCredential({
+  id: id,
+  name: name,
+  provider: 'https://account.google.com',
+  iconURL: iconUrl
+});
+
+// Store it
+navigator.credentials.store(cred)
+  .then(function() {
+  // Mach etwas anderes.
+});
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Credential Management')}}{{Spec2('Credential Management')}}Initiale Definition.
+ +

Browserkompabilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung +

{{CompatChrome(51.0)}}

+ 		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatChrome(51.0)}}{{CompatChrome(51.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
diff --git a/files/de/web/api/fetch_api/index.html b/files/de/web/api/fetch_api/index.html new file mode 100644 index 0000000000..d45285bcd1 --- /dev/null +++ b/files/de/web/api/fetch_api/index.html @@ -0,0 +1,84 @@ +--- +title: Fetch API +slug: Web/API/Fetch_API +translation_of: Web/API/Fetch_API +--- +
{{DefaultAPISidebar("Fetch API")}}
+ +

Die Fetch API bietet eine Schnittstelle zum Abrufen von Ressourcen (auch über das Netzwerk). Wer schon einmal mit {{DOMxRef("XMLHttpRequest")}} gearbeitet hat wird Ähnlichkeiten erkennen. Die neue API bietet jedoch einen ganzen Satz leistungsfähigerer und flexiblerer Funktionen.

+ +

Konzepte und Verwendung

+ +

Fetch bietet eine generische Definition von {{DOMxRef("Request")}} und {{DOMxRef("Response")}} Objekten (und anderen Dingen, die mit Anfragen über ein Netzwerk zu tun haben). Dadurch können sie überall dort eingesetzt werden, wo sie in Zukunft benötigt werden, sei es für Service Worker, die Cache-API und andere ähnliche Dinge, mit denen Anfragen und Antworten abgewickelt oder geändert werden, oder in jedem Anwendungsfall, für den Sie möglicherweise eigene Antworten programmatisch erstellen müssen.

+ +

Sie enthält auch eine Definition für verwandte Konzepte wie CORS und die HTTP-Origin-Semantik, die ihre separaten Definitionen an anderer Stelle ersetzen.

+ +

Verwenden Sie zum Erstellen einer Anfrage und zum Abrufen einer Ressource die Methode {{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}. Es ist in mehreren Schnittstellen implementiert, insbesondere {{DOMxRef("Window")}} und {{DOMxRef("WorkerGlobalScope")}}. Dadurch ist es in nahezu jedem Kontext verfügbar, in dem Sie Ressourcen abrufen möchten.

+ +

Die Methode fetch() nimmt ein obligatorisches Argument entgegen, den Pfad zu der Ressource, die Sie abrufen möchten. Sie gibt ein {{DOMxRef("Promise")}} zurück, das in die {{DOMxRef("Response")}} dieser Anfrage aufgelöst wird, unabhängig davon, ob sie erfolgreich ist oder nicht. Sie können optional auch ein init Objekt mit Optionen als zweites Argument übergeben (siehe {{DOMxRef("Request")}}).

+ +

Nachdem eine {{DOMxRef("Response")}} abgerufen wurde, stehen eine Reihe von Methoden zur Verfügung, mit denen der Antwort-Inhalt (Body) definiert werden kann und wie er verarbeitet werden soll (siehe {{DOMxRef("Body")}}).

+ +

Sie können eine Anfrage und Antwort direkt erstellen, indem Sie die Konstruktoren {{DOMxRef("Request.Request", "Request()")}} und {{DOMxRef("Response.Response", "Response()")}} verwenden, was Sie aber wahrscheinlich in den seltensten Fällen tun werden. Stattdessen werden diese eher als Ergebnis anderer API-Aktionen erstellt (z. B. durch {{DOMxRef("FetchEvent.respondWith()")}} von Service Workern).

+ +
+

Hinweis: Erfahren Sie mehr über die Verwendung der Funktionen der Fetch API in der Verwendung von Fetch und lernen Sie die Grundkonzepte von Fetch.

+
+ +

Einen Abruf abbrechen

+ +

Browser haben begonnen, experimentelle Unterstützung für die Schnittstellen {{DOMxRef("AbortController")}} und {{DOMxRef("AbortSignal")}} hinzuzufügen (auch Abort API genannt), die den Abbruch von Operationen durch Fetch und XHR ermöglichen, sofern diese noch nicht abgeschlossen sind. Weitere Informationen finden Sie auf den Schnittstellenseiten.

+ +

Fetch Interfaces

+ +
+
{{DOMxRef("WindowOrWorkerGlobalScope.fetch()")}}
+
Die fetch() Methode zum Abrufen einer Ressource.
+
{{DOMxRef("Headers")}}
+
Stellt die Antwort-/Anfrageheader dar, damit Sie sie abfragen und je nach Ergebnis unterschiedliche Aktionen ausführen können.
+
{{DOMxRef("Request")}}
+
Stellt eine Ressourcenanfrage dar.
+
{{DOMxRef("Response")}}
+
Stellt die Antwort auf eine Anfrage dar.
+
+ +

Fetch mixin

+ +
+
{{DOMxRef("Body")}}
+
Stellt Methoden bereit, die sich auf den Hauptteil (Body) der Antwort/Anfrage beziehen, sodass Sie den Inhaltstyp angeben können und wie dieser behandelt werden soll.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fetch")}}{{Spec2("Fetch")}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.WindowOrWorkerGlobalScope.fetch")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/filename/index.html b/files/de/web/api/file/filename/index.html new file mode 100644 index 0000000000..7dbf4f7559 --- /dev/null +++ b/files/de/web/api/file/filename/index.html @@ -0,0 +1,35 @@ +--- +title: File.fileName +slug: Web/API/File/fileName +tags: + - DOM + - Files +translation_of: Web/API/File/fileName +--- +

{{APIRef("File API")}}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

Returns the name of the file. For security reasons the path is excluded from this property.

+ +
This property is deprecated. Use {{domxref("File.name")}} instead.
+ +

Syntax

+ +
var name = instanceOfFile.fileName
+ +

Value

+ +

A string

+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/file/filesize/index.html b/files/de/web/api/file/filesize/index.html new file mode 100644 index 0000000000..0c91c5f739 --- /dev/null +++ b/files/de/web/api/file/filesize/index.html @@ -0,0 +1,36 @@ +--- +title: File.fileSize +slug: Web/API/File/fileSize +tags: + - DOM + - Files + - Property +translation_of: Web/API/File/fileSize +--- +

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

Returns the size of a file in bytes.

+ +
This property is deprecated. Use {{domxref("Blob.size")}} instead.
+ +

Syntaxe

+ +
var size = instanceOfFile.fileSize
+ +

Value

+ +

A number

+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/file/getastext/index.html b/files/de/web/api/file/getastext/index.html new file mode 100644 index 0000000000..fefda6647a --- /dev/null +++ b/files/de/web/api/file/getastext/index.html @@ -0,0 +1,78 @@ +--- +title: File.getAsText() +slug: Web/API/File/getAsText +tags: + - DOM + - Files +translation_of: Web/API/File/getAsText +--- +

{{APIRef("File API") }}{{non-standard_header}}

+ +

{{deprecated_header(7.0)}}

+ +

Summary

+ +

The getAsText method provides the file's data interpreted as text using a given encoding.

+ +
+

Note: This method is obsolete; you should use the {{domxref("FileReader")}} method {{domxref("FileReader.readAsText()","readAsText()")}} instead.

+
+ +

Syntaxe

+ +
var str = instanceOfFile.getAsText(encoding);
+ +

Parameters

+ +
+
encoding
+
A string indicating the encoding to use for the returned data. If this string is empty, UTF-8 is assumed.
+
+ +

Returns

+ +

A string containing the file's data interpreted as text in the specified encoding.

+ +

Example

+ +
// fileInput is a HTMLInputElement: 
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (similar to NodeList)
+var files = fileInput.files;
+
+// object for allowed media types
+var accept = {
+  binary : ["image/png", "image/jpeg"],
+  text   : ["text/plain", "text/css", "application/xml", "text/html"]
+};
+
+var file;
+
+for (var i = 0; i < files.length; i++) {
+  file = files[i];
+
+  // if file type could be detected
+  if (file !== null) {
+    if (accept.text.indexOf(file.mediaType) > -1) {
+      // file is of type text, which we accept
+      // make sure it's encoded as utf-8
+      var data = file.getAsText("utf-8");
+      // modify data with string methods
+
+    } else if (accept.binary.indexOf(file.mediaType) > -1) {
+      // binary
+    }
+  }
+}
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/file/index.html b/files/de/web/api/file/index.html new file mode 100644 index 0000000000..17fe3b3ff7 --- /dev/null +++ b/files/de/web/api/file/index.html @@ -0,0 +1,146 @@ +--- +title: File +slug: Web/API/File +tags: + - API + - DOM + - Files +translation_of: Web/API/File +--- +
{{APIRef }}
+ +

DasFile Interface stellt Informationen über Dateien bereit und erlaubt den Zugriff auf deren Inhalt.

+ +

File werden generell von einem {{domxref("FileList")}} Objekt als das Ergebnis einer Benutzerauswahl von Dateien über ein {{ HTMLElement("input") }} Element, von einem DataTransfer Objekt eines Drag-and-Drop-Vorgangs, oder von der mozGetAsFile() API eines {{ domxref("HTMLCanvasElement") }} zurückgegeben. In Gecko ist es von privilegiertem Code aus möglich, den Konstruktor direkt mit einem String Pfad oder einem {{interface("nsIFile")}} aufzurufen. Siehe Using the DOM File API in chrome code für weitere Details.

+ +

Die Dateireferenz kann nach der Formularübermittlung gespeichert werden, während der Benutzer über keine Internetverbindung verfügt. Somit können die Daten empfangen und hochgeladen werden, sobald die Internetverbindung wiederhergestellt ist.

+ +

Properties

+ +

DasFile Interface erbt ebenso von dem {{domxref("Blob")}} Interface.

+ +
+
{{domxref("File.lastModifiedDate")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
Das Date der letzten Veränderung der Datei, referenziert durch das File Objekt.
+
{{domxref("File.name")}} {{readonlyinline}} {{gecko_minversion_inline("1.9.2")}}
+
Der Name der Datei, referenziert durch das File Objekt.
+
{{domxref("File.fileName")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}
+
Der Name der Datei, referenziert durch das File Objekt.
+
{{domxref("File.fileSize")}} {{non-standard_inline}} {{readonlyinline}} {{obsolete_inline("7.0")}}
+
Die Größe der Datei in Bytes.
+
+ +

Methods

+ +

The File interface also inherits methods from the {{domxref("Blob")}} interface.

+ +
+
{{domxref("File.getAsBinary()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}
+
Returns a string containing the file's data in raw binary format.
+
{{domxref("File.getAsDataURL()")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}
+
A string containing the file's data encoded as a data: URL.
+
{{domxref("File.getAsText()","File.getAsText(string encoding)")}} {{non-standard_inline}} {{obsolete_inline("7.0")}}
+
Returns the file's contents as a string in which the file's data is interpreted as text using a given encoding.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API')}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{CompatGeckoDesktop("1.9")}} (non standard)
+ {{CompatGeckoDesktop("7")}} (standard)		10.011.56.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
basic support{{CompatNo}}25{{CompatNo}}11.16.0
+
+ +

Implementation notes

+ +

Gecko notes

+ + + +

Chrome Code - Scope Availability

+ +

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['File']);
+
+ +

URL is available in Worker scopes.

+ +

See also

+ + diff --git a/files/de/web/api/file/name/index.html b/files/de/web/api/file/name/index.html new file mode 100644 index 0000000000..ffdb12db0f --- /dev/null +++ b/files/de/web/api/file/name/index.html @@ -0,0 +1,104 @@ +--- +title: File.name +slug: Web/API/File/name +tags: + - DOM + - Files +translation_of: Web/API/File/name +--- +

{{APIRef("File API")}}

+ +

Gibt den Namen der File zurück. Aus Sicherheitsgründen wird der Pfad der Datei nicht mit zurückgegeben.

+ +

Syntax

+ +
var name = instanceOfFile.name
+ +

Value

+ +

Ein string, der den Namen der File ohne Pfad beinhaltet, bspw. "My Resume.rtf".

+ +

Beispiel

+ +
// fileInput is a HTMLInputElement: 
+var fileInput = document.getElementById("myfileinput");
+
+// files is a FileList object (simliar to NodeList)
+var files = fileInput.files;
+
+for (var i = 0; i < files.length; i++) {
+  alert("Filename " + files[i].name);
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#file-attrs', 'name')}}{{Spec2('File API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
File.name13.0{{CompatGeckoDesktop("1.9.2")}}10.016.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
File.name{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/typ/index.html b/files/de/web/api/file/typ/index.html new file mode 100644 index 0000000000..28c57a4cb1 --- /dev/null +++ b/files/de/web/api/file/typ/index.html @@ -0,0 +1,65 @@ +--- +title: File.type +slug: Web/API/File/Typ +translation_of: Web/API/File/type +--- +
{{APIRef("File API")}}
+ +

Gibt den Internet Media Typ (MIME) einer Datei zurück, welche durch ein {{domxref("File")}} Objekt dargestellt wird.

+ +

Syntax

+ +
var name = file.type;
+ +

Wert

+ +

Eine Zeichenkette, welche den Internet Media Typ (MIME) enthält und den Typ der Datei angibt, zum Beispiel "image/png" für ein PNG Bild

+ +

Beispiel

+ +
<input type="file" multiple onchange="showType(this)">
+
+ +
function showType(fileInput) {
+  var files = fileInput.files;
+
+  for (var i = 0; i < files.length; i++) {
+    var name = files[i].name;
+    var type = files[i].type;
+    alert("Filename: " + name + " , Type: " + type);
+  }
+}
+ +

Hinweis: Basierend auf der aktuellen Implementierung, lesen Browser nicht wirklich den Bytestrom einer Datei, um ihren Medientyp zu bestimmen. Es wird aufgrund der Dateiendung angenommen; eine PNG-Bilddatei, die in .txt umbenannt wird, würde "text/plain" und nicht "image/png" ergeben. Darüber hinaus ist file.type im Allgemeinen nur für gängige Dateitypen wie Bilder, HTML-Dokumente, Audio und Video zuverlässig. Seltene Dateierweiterungen würden eine leere Zeichenkette zurückgeben. Die Client-Konfiguration (z.B. die Windows-Registrierung) kann auch bei gängigen Typen zu unerwarteten Werten führen. Entwicklern wird empfohlen, sich nicht auf diese Eigenschaft als einziges Validierungsschema zu verlassen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('File API', '#dfn-type', 'type')}}{{Spec2('File API')}}Initiale Definition.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.File.type")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html new file mode 100644 index 0000000000..c44ac4b9df --- /dev/null +++ b/files/de/web/api/file/zugriff_auf_dateien_von_webapplikationen/index.html @@ -0,0 +1,512 @@ +--- +title: Zugriff auf Dateien von Webapplikationen +slug: Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen +translation_of: Web/API/File/Using_files_from_web_applications +--- +

Mithilfe der File API, welche mit HTML5 zum DOM hinzugefügt wurde, ist es nun für Webinhalte möglich den Benutzer lokale Dateien auswählen zu lassen und den Inhalt dieser Dateien auszulesen. Die Auswahl kann entweder durch das HTML Element {{ HTMLElement("input") }} oder durch Drag and Drop erfolgen.

+ +

Es ist auch möglich die DOM File API von Erweiterungen oder anderem Chrome Code zu benutzen. In diesem Fall müssen einige zusätzliche Dinge beachtet werden, die im Abschnitt Using the DOM File API in chrome code näher erläutert werden.

+ +

Auf ausgewählte Dateien zugreifen

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="input">
+ +

Die File API erlaubt den Zugriff auf eine {{ domxref("FileList") }} mit {{ domxref("File") }} Objekten, die die vom Benutzer ausgewählten Dateien repräsentieren.

+ +

Wenn der Benutzer nur eine Datei auswählt, dann muss nur die erste Datei in der Liste betrachtet werden.

+ +

Eine ausgewählte Datei erhält man über den üblichen DOM Selektor:

+ +
var selectedFile = document.getElementById('input').files[0];
+ +

Oder mit einem jQuery Selektor:

+ +
var selectedFile = $('#input').get(0).files[0];
+
+var selectedFile = $('#input')[0].files[0];
+ +
+

Tritt der Fehler "files is undefined" auf:
+ Es wurde das falsche HTML element ausgewählt. Es ist zu beachten, dass ein jQuery Selektor eine Liste von zutreffenden DOM Elementen zurückliefert. Das richtige DOM Element muss ausgewählt werden, um "files" darauf anzuwenden.

+
+ +

Zugriff auf ausgewählte Dateien über den Change Event

+ +

Es ist auch möglich (aber nicht unbedingt erforderlich), auf die {{ domxref("FileList") }} über das change event zuzugreifen:

+ +
<input type="file" id="input" onchange="handleFiles(this.files)">
+ +

Wenn der Benutzer eine Datei auswählt, wird die Funktion handleFiles() aufgerufen. Als Parameter wird die {{ domxref("FileList") }} übergeben. Sie enthält die {{ domxref("File") }} Objekte, die die vom Benutzer ausgewählten Dateien repräsentieren.

+ +

Soll der Benutzer mehrere Dateien auswählen können, dann kann einfach das Attribut multiple auf das input Element angewendet werden:

+ +
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
+ +

In diesem Fall enthält die Dateiliste, die an die handleFiles() Funktion übergeben wird, ein {{ domxref("File") }} für jede Datei, die der Benutzer ausgewählt hat.

+ +

Dynamisch einen Change Listener hinzufügen

+ +

Wurde das input Feld mit einer JavaScript Bibliothek wie jQuery erzeugt, dann muss der event Listener mit {{ domxref("element.addEventListener()") }} hinzugefügt werden:

+ +
var inputElement = document.getElementById("input");
+inputElement.addEventListener("change", handleFiles, false);
+function handleFiles() {
+  var fileList = this.files; /* Jetzt kann die Dateiliste verarbeitet werden */
+}
+ +

In diesem Fall ist die handleFiles() Funktion selbst der Event Handler, anders als in den vorigen Beispielen, wo sie von einem Event Handler aufgerufen wurde.

+ +

Informationen über die ausgewählte(n) Datei(en)

+ +

Das {{ domxref("FileList") }} Objekt, das vom DOM geliefert wurde, enthält eine Liste aller Dateien, die vom Benutzer ausgewählt wurden. Jede der Dateien wird durch ein {{ domxref("File") }} Objekt repräsentiert. Die Anzahl der ausgewälten Dateien kann über das length Attribut der Liste ermittelt werden:

+ +
var numFiles = files.length;
+ +

Die einzelnen {{ domxref("File") }} Objekte erhält man, indem das {{ domxref("FileList") }} Objekt einfach wie ein Array behandelt wird:

+ +
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
+  var file = files[i];
+  ..
+}
+
+ +

Diese Schleife iteriert über alle Dateien in der Liste.

+ +

Im {{ domxref("File") }} Objekt liefern drei Attribute hilfreiche Informationen über die Datei:

+ +
+
name
+
Der Dateiname als read-only String. Es ist nur der Dateiname enthalten, keine Pfadinformationen.
+
size
+
Die Dateigröße in Bytes als read-only 64-Bit Integer.
+
type
+
Der MIME type der Datei als read-only String oder "", wenn der Typ nicht ermittelt werden konnte.
+
+ +

Beispiel: Dateigröße anzeigen

+ +

Das folgende Beispiel zeigt eine mögliche Verwendung des size Attributs:

+ +
<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>File(s) size</title>
+<script>
+function updateSize() {
+  var nBytes = 0,
+      oFiles = document.getElementById("uploadInput").files,
+      nFiles = oFiles.length;
+  for (var nFileId = 0; nFileId < nFiles; nFileId++) {
+    nBytes += oFiles[nFileId].size;
+  }
+  var sOutput = nBytes + " bytes";
+  // optional code for multiples approximation
+  for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
+    sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
+  }
+  // end of optional code
+  document.getElementById("fileNum").innerHTML = nFiles;
+  document.getElementById("fileSize").innerHTML = sOutput;
+}
+</script>
+</head>
+
+<body onload="updateSize();">
+<form name="uploadForm">
+<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
+<p><input type="submit" value="Send file"></p>
+</form>
+</body>
+</html>
+
+ +

Verstecktes input Element mit click() Methode

+ +

Ab Gecko 2.0 {{ geckoRelease("2.0") }}, kann das zugegebenermaßen hässliche Datei-{{ HTMLElement("input") }} Element versteckt und durch eigene Oberflächenelemente zum Zugriff auf den Datei-Öffnen-Dialog ersetzt werden. Dazu wird das input Element mit dem CSS Stil display:none versehen und mit der Methode {{ domxref("element.click","click()") }} aufgerufen.

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
+
+
+ +

Der Code, der auf den click Event reagiert, kann wie folgt aussehen:

+ +
var fileSelect = document.getElementById("fileSelect"),
+  fileElem = document.getElementById("fileElem");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+ +

Das neue Oberflächenelement zum Zugriff auf den Datei-Öffnen-Dialog kann nun beliebig gestaltet werden.

+ +

label Element zum Auslösen eines versteckten input Elements

+ +

Wird statt eines Links ({{ HTMLElement("a") }} Element) ein {{ HTMLElement("label") }} Element verwendet, dann kann das versteckte input Element auch ohne JavaScript ausgelöst werden. Dabei darf das input-Element aber weder mit display: none noch mit visibility: hidden versteckt werden, weil es in diesen Fällen nicht mit der Tastatur bedienbar wäre. Es darf nur visuell versteckt werden.

+ +

Gehen wir von folgendem HTML-Code aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" class="visually-hidden">
+<label for="fileElem">Bitte Dateien auswählen</label>
+
+ +

und folgendem CSS:

+ +
.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+input.visually-hidden:focus + label {
+  outline: thin dotted;
+}
+
+ +

Bei einem Klick auf das label Element wird der Datei-Öffnen-Dialog angezeigt.

+ +

Das label Element kann per CSS beliebig gestaltet werden. Man muss aber das Label des versteckten Eingabefelds hervorheben, wenn dieses den Fokus hat, d.h. per Tab-Taste angewählt wurde – sei es durch outline wie im obigen Beispiel oder background-color oder box-shadow. (Gegenwärtig stellt Firefox das Label von fokussierten <input type="file">-Elementen nicht hervorgehoben dar.)

+ +

Dateien per Drag and Drop auswählen

+ +

Es ist auch möglich, per Drag and Drop Dateien an die Webanwendung zu übergeben.

+ +

Zuerst muss eine Drop Zone eingerichtet werden. Welcher Teil der Oberfläche Drops entgegen nimmt, ist vom Design der Anwendung abhängig. Generell ist das Empfangen von Drop Events aber einfach:

+ +
var dropbox;
+
+dropbox = document.getElementById("dropbox");
+dropbox.addEventListener("dragenter", dragenter, false);
+dropbox.addEventListener("dragover", dragover, false);
+dropbox.addEventListener("drop", drop, false);
+
+ +

In diesem Beispiel wird das Element mit der ID dropbox als Drop Zone verwendet. Das wird durch Registrieren der Listener für {{event('dragenter')}}, {{event('dragover')}} und {{event('drop')}} Events erreicht.

+ +

dragenter und dragover benötigen wir in unserem Fall eigentlich nicht. Wir verhindern lediglich eine weitere Behandlung der Events durch Aufruf von e.stopPropagation() und e.preventDefault():

+ +
function dragenter(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+function dragover(e) {
+  e.stopPropagation();
+  e.preventDefault();
+}
+
+ +

Das Wesentliche geschieht in der Behandlung des drop Events:

+ +
function drop(e) {
+  e.stopPropagation();
+  e.preventDefault();
+
+  var dt = e.dataTransfer;
+  var files = dt.files;
+
+  handleFiles(files);
+}
+
+ +

Hier ermitteln wir das dataTransfer Feld aus dem Event, entnehmen ihm die Dateiliste und übergeben diese an handleFiles(). Von da an ist die Weiterverarbeitung die gleiche wie bei Verwendung des input Elements.

+ +

Beispiel: Thumbnails von ausgewählten Bildern anzeigen

+ +

Gehen wir davon aus, dass auf einer Foto-Webseite mit HTML5 eine Thumbnail Vorschau von Bildern angezeigt werden soll, bevor sie hochgeladen werden. Das input Element oder die Drop Zone kann wie oben beschrieben eingerichtet werden. Diese rufen die folgende handleFiles() Funktion auf:

+ +
function handleFiles(files) {
+  for (var i = 0; i < files.length; i++) {
+    var file = files[i];
+    var imageType = /^image\//;
+
+    if (!imageType.test(file.type)) {
+      continue;
+    }
+
+    var img = document.createElement("img");
+    img.classList.add("obj");
+    img.file = file;
+    preview.appendChild(img); // Gehen wird davon aus, dass "preview" das div-Element ist, in dem der Inhalt angezeigt wird.
+
+    var reader = new FileReader();
+    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
+    reader.readAsDataURL(file);
+  }
+}
+
+ +

Mit der Schleife wird über die ausgewählten Dateien iteriert. Bei jeder Datei wird mit Hilfe des type Attributs (indem der Reguläre Ausdruck "^image\/" darauf angewendet wird) geprüft, ob es sich um eine Bild Datei handelt. Liegt eine Bild Datei vor, dann wird ein neues img Element erzeugt. Mit CSS können z.B. hübsche Ränder oder Schatten erzeugt und die Größe des Bildes festgelegt werden, das muss also nicht hier im Code erfolgen.

+ +

Jedem Bild wird die CSS Klasse obj zugewiesen, so dass es einfach ist, es im DOM Baum zu finden. Außerdem wird jedem Bild im file Attribut das {{ domxref("File") }} Objekt für das Bild zugewiesen; das benötigen wir später für den tatsächlichen Upload der Datei. Mit {{ domxref("Node.appendChild()") }} wird das neue Thumbnail dem preview Bereich unserer Anwendung hinzugefügt.

+ +

Dann erstellen wir einen {{ domxref("FileReader") }}, um das Bild asynchron zu laden und es dem img Element hinzuzufügen. Nach dem Erstellen des FileReader Objektes definieren wir die onload Funktion und rufen readAsDataURL() auf, um die Leseoperation im Hintergrund zu starten. Ist der komplette Inhalt der Bilddatei geladen, dann wird er in eine data: URL umgewandelt, die an den onload Callback übergeben wird. Unsere Implementation dieser Routine setzt das src Attribut des img Elements auf das geladene Bild, was dazu führt, dass das Bild im Thumbnail auf dem Bildschirm des Benutzers erscheint.

+ +

Verwendung von Objekt URLs

+ +

Mit Gecko 2.0 {{ geckoRelease("2.0") }} wurde die Unterstützung für die DOM Methoden {{ domxref("window.URL.createObjectURL()") }} und {{ domxref("window.URL.revokeObjectURL()") }} eingeführt. Mit ihnen lassen sich einfache URL Strings erzeugen, die beliebige Daten referenzieren, auf die per DOM {{ domxref("File") }} Objekte zugegriffen werden kann; einschließlich lokale Dateien auf dem Computer des Anwenders.

+ +

Wenn man aus HTML mit einer URL auf ein {{ domxref("File") }} Objekt verweisen möchte, dann kann man dafür eine Objekt URL erzeugen:

+ +
var objectURL = window.URL.createObjectURL(fileObj);
+ +

Die Objekt URL ist ein String, der das {{ domxref("File") }} Objekt identifiziert. Jedes Mal, wenn {{ domxref("window.URL.createObjectURL()") }} aufgerufen wird, wird eine eindeutige Objekt URL erzeugt, auch wenn vorher bereits eine Objekt URL für diese Datei erzeugt wurde. Jede von ihnen muss wieder freigegeben werden. Sie werden automatisch freigegeben, wenn das Dokument entladen wird. Wenn ihre Anwendung die Objekt URLs dynamisch verwendet, dann sollten Sie sie auch explizit durch Aufruf von {{ domxref("window.URL.revokeObjectURL()") }} freigeben:

+ +
window.URL.revokeObjectURL(objectURL);
+ +

Beispiel: Mit Objekt URLs Bilder anzeigen

+ +

Dieses Beispiel verwendet Objekt URLs, um Thumbnails von Bildern anzuzeigen. Darüber hinaus werden weitere Dateiinformationen einschließlich Name und Größe angezeigt. Live Ansicht des Beispiels.

+ +

Das HTML für die Oberfläche sieht folgendermaßen aus:

+ +
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
+<a href="#" id="fileSelect">Bitte Dateien auswählen</a>
+<div id="fileList">
+  <p>Keine Dateien ausgewählt!</p>
+</div>
+
+ +

Das erstellt ein Datei {{ HTMLElement("input") }} Element, zusammen mit einem Link, der den Datei-Öffnen-Dialog anzeigt (so kann das Datei input Element versteckt werden, da es nicht so attraktiv aussieht). Das wird oben im Abschnitt {{ anch("Verstecktes input Element mit click() Methode") }} näher beschrieben.

+ +

Die handleFiles() Methode sieht folgendermaßen aus:

+ +
window.URL = window.URL || window.webkitURL;
+
+var fileSelect = document.getElementById("fileSelect"),
+    fileElem = document.getElementById("fileElem"),
+    fileList = document.getElementById("fileList");
+
+fileSelect.addEventListener("click", function (e) {
+  if (fileElem) {
+    fileElem.click();
+  }
+  e.preventDefault(); // prevent navigation to "#"
+}, false);
+
+function handleFiles(files) {
+  if (!files.length) {
+    fileList.innerHTML = "<p>No files selected!</p>";
+  } else {
+    var list = document.createElement("ul");
+    for (var i = 0; i < files.length; i++) {
+      var li = document.createElement("li");
+      list.appendChild(li);
+
+      var img = document.createElement("img");
+      img.src = window.URL.createObjectURL(files[i]);
+      img.height = 60;
+      img.onload = function() {
+        window.URL.revokeObjectURL(this.src);
+      }
+      li.appendChild(img);
+      var info = document.createElement("span");
+      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
+      li.appendChild(info);
+    }
+  }
+}
+
+ +

Das {{ HTMLElement("div") }} Element mit der ID fileList wird ermittelt. Das ist der Block, in den wir später unsere Dateiliste einschließlich Thumbnails einfügen.

+ +

Ist das {{ domxref("FileList") }} Objekt, das an handleFiles() übergeben wird, null, dann wird einfach "No files selected!" ausgegeben. Ansonsten bauen wir unsere Dateiliste wie folgt:

+ +
    +
  1. Ein neues ({{ HTMLElement("ul") }}) Element wird erzeugt.
    2. +
  2. Das neue Listenelement wird dem {{ HTMLElement("div") }} Block hinzugefügt durch Aufruf der {{ domxref("element.appendChild()") }} Methode.
    3. +
  3. Für jedes {{ domxref("File") }} in der {{ domxref("FileList") }}, die durch files repräsentiert wird: +
      +
    1. Erzeuge ein neues Listenelement ({{ HTMLElement("li") }}) und füge es der Liste hinzu.
      2. +
    2. Erzeuge ein neues Bildelement ({{ HTMLElement("img") }}).
      3. +
    3. Setze das src Attribut des Bildes auf die neue Objekt URL, die die Datei repräsentiert, wobei die Objekt URL mit {{ domxref("window.URL.createObjectURL()") }} erzeugt wird.
      4. +
    4. Setze die Bildgröße auf 60 Pixel.
      5. +
    5. Richte den onload Event Handler ein, um die Objekt URL wieder freizugeben, da sie nach dem Laden des Bildes nicht mehr benötigt wird. Das wird durch Aufruf der Methode {{ domxref("window.URL.revokeObjectURL()") }} und Übergabe des Objekt URL Strings aus img.src gemacht.
      6. +
    6. Füge das neue Bildelement dem Listenelement hinzu.
      7. +
    +
    4. +
+ +

Example: Uploading a user-selected file

+ +

Another thing you might want to do is let the user upload the selected file or files (such as the images selected using the previous example) to a server. This can be done asynchronously very easily.

+ +

Creating the upload tasks

+ +

Continuing with the code that built the thumbnails in the previous example, recall that every thumbnail image is in the CSS class obj with the corresponding {{ domxref("File") }} attached in a file attribute. This allows us to select all of the images the user has chosen for uploading using {{ domxref("Document.querySelectorAll()") }}, like this:

+ +
function sendFiles() {
+  var imgs = document.querySelectorAll(".obj");
+
+  for (var i = 0; i < imgs.length; i++) {
+    new FileUpload(imgs[i], imgs[i].file);
+  }
+}
+
+ +

Line 2 fetches a {{ domxref("NodeList") }}, called imgs, of all the elements in the document with the CSS class obj. In our case, these will be all of the image thumbnails. Once we have that list, it's trivial to go through it and create a new FileUpload instance for each. Each of these handles uploading the corresponding file.

+ +

Handling the upload process for a file

+ +

The FileUpload function accepts two inputs: an image element and a file from which to read the image data.

+ +
function FileUpload(img, file) {
+  var reader = new FileReader();
+  this.ctrl = createThrobber(img);
+  var xhr = new XMLHttpRequest();
+  this.xhr = xhr;
+
+  var self = this;
+  this.xhr.upload.addEventListener("progress", function(e) {
+        if (e.lengthComputable) {
+          var percentage = Math.round((e.loaded * 100) / e.total);
+          self.ctrl.update(percentage);
+        }
+      }, false);
+
+  xhr.upload.addEventListener("load", function(e){
+          self.ctrl.update(100);
+          var canvas = self.ctrl.ctx.canvas;
+          canvas.parentNode.removeChild(canvas);
+      }, false);
+  xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
+  xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
+  reader.onload = function(evt) {
+    xhr.sendAsBinary(evt.target.result);
+  };
+  reader.readAsBinaryString(file);
+}
+
+ +

The FileUpload() function shown above creates a throbber, which is used to display progress information, and then creates an {{ domxref("XMLHttpRequest") }} to handle uploading the data.

+ +

Before actually transferring the data, several preparatory steps are taken:

+ +
    +
  1. The XMLHttpRequest's upload progress listener is set to update the throbber with new percentage information so that as the upload progresses the throbber will be updated based on the latest information.
    2. +
  2. The XMLHttpRequest's upload load event handler is set to update the throbber progress information to 100% to ensure the progress indicator actually reaches 100% (in case of granularity quirks during the process). It then removes the throbber since it's no longer needed. This causes the throbber to disappear once the upload is complete.
    3. +
  3. The request to upload the image file is opened by calling XMLHttpRequest's open() method to start generating a POST request.
    4. +
  4. The MIME type for the upload is set by calling the XMLHttpRequest function overrideMimeType(). In this case, we're using a generic MIME type; you may or may not need to set the MIME type at all depending on your use case.
    5. +
  5. The FileReader object is used to convert the file to a binary string.
    6. +
  6. Finally, when the content is loaded the XMLHttpRequest function sendAsBinary() is called to upload the file's content.
    7. +
+ +
Note: The non-standard sendAsBinary method in the example above is considered deprecated as of Gecko 31 {{ geckoRelease(31) }} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Handling the upload process for a file, asynchronously

+ +
<?php
+if (isset($_FILES['myFile'])) {
+    // Example:
+    move_uploaded_file($_FILES['myFile']['tmp_name'], "uploads/" . $_FILES['myFile']['name']);
+    exit;
+}
+?><!DOCTYPE html>
+<html>
+<head>
+    <title>dnd binary upload</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <script type="text/javascript">
+        function sendFile(file) {
+            var uri = "/index.php";
+            var xhr = new XMLHttpRequest();
+            var fd = new FormData();
+
+            xhr.open("POST", uri, true);
+            xhr.onreadystatechange = function() {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    // Handle response.
+                    alert(xhr.responseText); // handle response.
+                }
+            };
+            fd.append('myFile', file);
+            // Initiate a multipart/form-data upload
+            xhr.send(fd);
+        }
+
+        window.onload = function() {
+            var dropzone = document.getElementById("dropzone");
+            dropzone.ondragover = dropzone.ondragenter = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
+
+            dropzone.ondrop = function(event) {
+                event.stopPropagation();
+                event.preventDefault();
+
+                var filesArray = event.dataTransfer.files;
+                for (var i=0; i<filesArray.length; i++) {
+                    sendFile(filesArray[i]);
+                }
+            }
+        }
+    </script>
+</head>
+<body>
+    <div>
+        <div id="dropzone" style="margin:30px; width:500px; height:300px; border:1px dotted grey;">Drag & drop your file here...</div>
+    </div>
+</body>
+</html>
+
+ +

Example: Using object URLs to display PDF

+ +

Object URLs can be used for other things than just images! They can be used to display embedded PDF files or any other resources that can be displayed by the browser.

+ +

In Firefox, to have the PDF appear embedded in the iframe (rather than proposed as a downloaded file), the preference pdfjs.disabled must be set to false {{non-standard_inline()}}.

+ +
<iframe id="viewer">
+
+ +

And here is the change of the src attribute:

+ +
var obj_url = window.URL.createObjectURL(blob);
+var iframe = document.getElementById('viewer');
+iframe.setAttribute('src', obj_url);
+window.URL.revokeObjectURL(obj_url);
+ +

Example: Using object URLs with other file types

+ +

You can manipulate files of other formats the same way. Here is how to preview uploaded video:

+ +
var video = document.getElementById('video');
+var obj_url = window.URL.createObjectURL(blob);
+video.src = obj_url;
+video.play()
+window.URL.revokeObjectURL(obj_url);
+ +

Specifications

+ + + +

See also

+ + + +

{{ HTML5ArticleTOC() }}

+ +

{{ languages( { "zh-cn": "zh-cn/Using_files_from_web_applications", "ja": "ja/Using_files_from_web_applications" } ) }}

diff --git a/files/de/web/api/filereader/index.html b/files/de/web/api/filereader/index.html new file mode 100644 index 0000000000..b7c8668c3a --- /dev/null +++ b/files/de/web/api/filereader/index.html @@ -0,0 +1,153 @@ +--- +title: FileReader +slug: Web/API/FileReader +translation_of: Web/API/FileReader +--- +
{{APIRef("File API")}}
+ +

Mit dem FileReader-Objekt können Webapplikationen den Inhalt von auf dem Computer des Benutzers gespeicherten Dateien (oder Rohdaten-Buffer) asynchron lesen. Mit {{domxref("File")}} oder {{domxref("Blob")}}-Objekten wird die zu lesende Datei oder die zu lesenden Daten spezifiziert.

+ +

File Objekte können über ein {{domxref("FileList")}} Objekt erhalten werden, welches als Ergebnis einer Dateiauswahl durch einen Benutzer über das {{HTMLElement("input")}} Element zurückgegeben wird. Weitere mögliche Quellen sind drag and drop Ereignisse über ein DataTransfer Objekt oder über die mozGetAsFile() API des {{domxref("HTMLCanvasElement")}}.

+ +

Konstruktor

+ +
FileReader FileReader();
+ +

Im Kapitel Zugriff auf Dateien von Webapplikationen finden sich weitere Details und Beispiele.

+ +

Eigenschaften

+ +
+
{{domxref("FileReader.error")}} {{readonlyinline}}
+
Ein {{domxref("DOMError")}}, der den Fehler angibt, welcher beim Lesen der Datei entstanden ist.
+
{{domxref("FileReader.readyState")}} {{readonlyinline}}
+
Eine Zahl, welche den Status des FileReader angibt. Möglich ist eine der {{anch("Status-Konstanten")}}.
+
{{domxref("FileReader.result")}} {{readonlyinline}}
+
Der Inhalt der Datei. Diese Eigenschaft ist nur gültig, nachdem der Lesevorgang abgeschlossen ist. Das Format der Daten hängt davon ab, welche der Methoden zum Starten des Lesevorgangs benutzt wurde.
+
+ +

Event-Handler

+ +
+
{{domxref("FileReader.onabort")}}
+
Ein Handler für das {{event("abort")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang abgebrochen wird.
+
{{domxref("FileReader.onerror")}}
+
Ein Handler für das {{event("error")}}-Event. Dieser Event wird gefeuert, wenn beim Lesevorgang ein Fehler ensteht.
+
{{domxref("FileReader.onload")}}
+
Ein Handler für das {{event("load")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang erfolgreich beendet wird.
+
{{domxref("FileReader.onloadstart")}}
+
Ein Handler für das {{event("loadstart")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang gestartet wird.
+
{{domxref("FileReader.onloadend")}}
+
Ein Handler für das {{event("loadend")}}-Event. Dieser Event wird gefeuert, wenn der Lesevorgang beendet wird (entweder erfolgreich oder fehlerhaft).
+
{{domxref("FileReader.onprogress")}}
+
Ein Handler für das {{event("progress")}}-Event. Dieser Event wird gefeuert, während ein {{domxref("Blob")}}-Inhalt gelesen wird.
+
+ +
+

Hinweis: DaFileReader von {{domxref("EventTarget")}} erbt, kann auf alle diese Events auch mit der {{domxref("EventTarget.addEventListener()","addEventListener")}} Methode gehört werden.

+
+ +

Status-Konstanten

+ + + +

Methoden

+ +
+
{{domxref("FileReader.abort()")}}
+
Bricht den Lesevorgang ab. Nach dem Return wird der readyState zu DONE.
+
{{domxref("FileReader.readAsArrayBuffer()")}} {{gecko_minversion_inline("7.0")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält result ein {{domxref("ArrayBuffer")}} mit den Daten.
+
{{domxref("FileReader.readAsBinaryString()")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält result die rohen Binär-Daten als String.
+
{{domxref("FileReader.readAsDataURL()")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und, wenn der Lesevorgang abgeschlossen ist, enthält result die Daten als Data-URL.
+
{{domxref("FileReader.readAsText()")}}
+
Startet den Lesevorgang und liest den spezifierten {{domxref("Blob")}} und , wenn der Lesevorgang abgeschlossen ist, enthält result die Daten als Text-String.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("File API", "#FileReader-interface", "FileReader")}}{{Spec2("File API")}}Initial definition
+ +

Browser-Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basissupport{{CompatGeckoDesktop("1.9.2")}}[1]710[2]12.02[3]6.0.2
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basissupport3231011.56.1
+
+ +

[1] Vor Gecko 2.0 beta 7 (Firefox 4.0 beta 7), waren alle {{domxref("Blob")}} parameters stattdessen {{domxref("File")}} Parameter; Das wurde aktualisiert um die Spezifikation zu erfüllen. Vor Gecko 13.0 {{geckoRelease("13.0")}} gab die FileReader.error Eigenschaft ein  {{domxref("FileError")}} Objekt zurück. Dieses Interface wurde wurde entfernt und FileReader.error gibt nun einen {{domxref("DOMError")}} Objekt zurück, wie in dem aktuellen FileAPI Entwurf vorgesehen.

+ +

[2] IE9 hat ein File API Lab.

+ +

[3] Opera hat partiellen Support in 11.1.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/filereader/onload/index.html b/files/de/web/api/filereader/onload/index.html new file mode 100644 index 0000000000..95dda3e59f --- /dev/null +++ b/files/de/web/api/filereader/onload/index.html @@ -0,0 +1,24 @@ +--- +title: onload +slug: Web/API/FileReader/onload +tags: + - Dateien + - Lesen +translation_of: Web/API/FileReader/onload +--- +

Das onload Event wird ausgelöst, wenn der Inhalt von readAsArrayBuffer, readAsBinaryString, readAsDataURL or readAsText verfügbar ist.

+ +

Beispiel

+ +
// Callback von einem <input type="file" onchange="onChange(event)">
+function onChange(event) {
+  var file = event.target.files[0];
+  var reader = new FileReader();
+  reader.onload = function(event) {
+    // Hier wird der Text der Datei ausgegeben
+    console.log(event.target.result)
+  };
+
+  reader.readAsText(file);
+}
+
diff --git a/files/de/web/api/formdata/formdata/index.html b/files/de/web/api/formdata/formdata/index.html new file mode 100644 index 0000000000..40ce36053f --- /dev/null +++ b/files/de/web/api/formdata/formdata/index.html @@ -0,0 +1,184 @@ +--- +title: FormData() +slug: Web/API/FormData/FormData +translation_of: Web/API/FormData/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Der FormData() Konstruktor erzeugt ein neues {{domxref("FormData")}}-Objekt.

+ +
+

Anmerkung: Dieses Feature is verfügbar auf Web Workers.

+
+ +

Syntax

+ +
var formData = new FormData(form)
+ +

Parameter

+ +
+
form {{optional_inline}}
+
Ein HTML {{HTMLElement("form")}}-Element — wenn angegeben, wird  das neue {{domxref("FormData")}}-Objekt mit den aktuellen Schlüssel/Wert-Paaren des form's gefüllt, wobei "name" der Schlüssel und "value" der Wert. Mitgeschickte Dateien werden ebenfalls codiert.
+
+ +

Example

+ +

So erzeugt man ein neues FormData-Objekt:

+ +
var formData = new FormData(); // leer
+ +

Nun kann man ein Schlüssel/Wert-Paar hinzufügen mit {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+
+ +

Oder man gibt das optionale form Argument an, um es direkt mit dessen Werten zu füllen:

+ +
<form id="myForm" name="myForm">
+  <div>
+    <label for="username">Enter name:</label>
+    <input type="text" id="username" name="username">
+  </div>
+  <div>
+    <label for="useracc">Enter account number:</label>
+    <input type="text" id="useracc" name="useracc">
+  </div>
+  <div>
+    <label for="userfile">Upload file:</label>
+    <input type="file" id="userfile" name="userfile">
+  </div>
+<input type="submit" value="Submit!">
+</form>
+
+ +
+

Anmerkung: Alle input-Elemente haben das 'name'-Attribut. Das ist notwendig um die Werte auszuwerten.

+
+ +
var myForm = document.getElementById('myForm');
+formData = new FormData(myForm);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest','#dom-formdata','FormData()')}}{{Spec2('XMLHttpRequest')}}Initial definition
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support7{{CompatGeckoDesktop("2.0")}}10125
append with filename{{CompatVersionUnknown}}{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
available in web workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("39.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support3.0{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}} +

12

+ 		{{CompatUnknown}}
append with filename{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("22.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
Available in web workers{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("39.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+ +

 

+ +
+

Note: XHR in Android 4.0 sends empty content for FormData with blob.

+
+ +

Gecko notes

+ +

Prior to Gecko 7.0 {{geckoRelease("7.0")}}, if you specified a {{domxref("Blob")}} as the data to append to the object, the filename reported in the "Content-Disposition" HTTP header was an empty string; this resulted in errors being reported by some servers. Starting in Gecko 7.0, the filename "blob" is sent.

+ +

See also

+ + +
diff --git a/files/de/web/api/formdata/get/index.html b/files/de/web/api/formdata/get/index.html new file mode 100644 index 0000000000..1bcd503006 --- /dev/null +++ b/files/de/web/api/formdata/get/index.html @@ -0,0 +1,145 @@ +--- +title: FormData.get() +slug: Web/API/FormData/get +translation_of: Web/API/FormData/get +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Die get() Methode der {{domxref("FormData")}} Schnittstelle gibt die den ersten Wert, der dem gegebenen Schlüssel zugeordnet ist, aus dem FormData Objekt zurück. Wenn mehrere Werte zu erwarten sind und diese alle verwendet werden sollen, sollte stattdeessen die Methode {{domxref("FormData.getAll()","getAll()")}} verwendet werden.

+ +
+

Hinweis: Diese Methode ist in Web Workers verfügbar.

+
+ +

Syntax

+ +
formData.get(name);
+ +

Parameter

+ +
+
name
+
Ein {{domxref("USVString")}}, der den Namen des abzurufenden Schlüssels repräsentiert.
+
+ +

Rückgabewert

+ +

Ein {{domxref("FormDataEntryValue")}}, der den Wert enthält.

+ +

Example

+ +

Die folgende Zeile erzeugt ein leeres FormData Objekt:

+ +
var formData = new FormData();
+ +

Wenn man zwei Werte als benutzername mit {{domxref("FormData.append")}} hinzufügt:

+ +
formData.append('benutzername', 'Chris');
+formData.append('benutzername', 'Bob');
+ +

Der folgende Aufruf der get() Funktion liefert dann nur den zuerst hinzugefügten Wert für benutzername:

+ +
formData.get('benutzername'); // Gibt "Chris" zurück
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('XMLHttpRequest','#dom-formdata-get','get()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatChrome(50.0)}}{{CompatGeckoDesktop('39.0')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
Verfügbar in web workers{{CompatChrome(50.0)}}{{CompatGeckoDesktop('39.0')}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OS (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}} +

{{CompatVersionUnknown}}

+ 		{{CompatNo}}{{CompatChrome(50.0)}}
Verfügbar in web workers{{CompatNo}}{{CompatChrome(50.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatChrome(50.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/formdata/getall/index.html b/files/de/web/api/formdata/getall/index.html new file mode 100644 index 0000000000..09cdc69036 --- /dev/null +++ b/files/de/web/api/formdata/getall/index.html @@ -0,0 +1,74 @@ +--- +title: FormData.getAll() +slug: Web/API/FormData/getAll +translation_of: Web/API/FormData/getAll +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Die getAll() Methode der  {{domxref("FormData")}} Schnittstelle gibt alle Werte zurück, die innerhalb eines FormData Objekts mit einem gegebenen Schlüssel assoziiert sind.

+ +
+

Hinweis: Diese Methode ist in Web Workers verfügbar.

+
+ +

Syntax

+ +
formData.getAll(name);
+ +

Parameter

+ +
+
name
+
Ein {{domxref("USVString")}}, der den Namen des Schlüssels darstellt, der abgerufen werden soll.
+
+ +

Rückgabewerte

+ +

Ein Array von {{domxref("FormDataEntryValue")}}s.

+ +

Beispiel

+ +

Die folgende Zeile erstellt ein leeres FormData Objekt:

+ +
var formData = new FormData();
+ +

Hinzufügen von zwei username Werten mit Hilfe von {{domxref("FormData.append")}}:

+ +
formData.append('username', 'Chris');
+formData.append('username', 'Bob');
+ +

Der darauffolgende Aufruf der getAll() Funktion gibt beide username Werte in einem Array zurück.:

+ +
formData.getAll('username'); // gibt ["Chris", "Bob"] zurück
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('XMLHttpRequest','#dom-formdata-getall','getAll()')}}{{Spec2('XMLHttpRequest')}} 
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.FormData.getAll")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/formdata/index.html b/files/de/web/api/formdata/index.html new file mode 100644 index 0000000000..3ff1becbcf --- /dev/null +++ b/files/de/web/api/formdata/index.html @@ -0,0 +1,80 @@ +--- +title: FormData +slug: Web/API/FormData +tags: + - API + - FomData + - Interface + - Referenz + - XMLHttpRequest +translation_of: Web/API/FormData +--- +

{{APIRef("XMLHttpRequest")}}

+ +

Das FormData-Interface ermöglicht das einfache Erstellen eines Objektes bestehend aus Schlüssel/Werte-Paaren, welche Formular-Felder und ihre Werte repräsentieren. Dieses Objekt kann leicht durch das Aufrufen der {{domxref("XMLHttpRequest.send()")}} Methode abgeschickt werden. Es verwendet das gleiche Format wie ein HTML-Formular, dessen Kodierung auf "multipart/form-data" gesetzt wurde.

+ +

Ein Objekt, dass FormData implementiert, kann direkt in den {{jsxref("Statements/for...of", "for...of")}} Strukturen benutzt werden, statt {{domxref('FormData.entries()', 'entries()')}} zu verwenden: for (var p of myFormData) ist identisch zu for (var p of myFormData.entries()).

+ +
+

Hinweis: Dieses Feature ist in  Web Workers verfügbar.

+
+ +

Konstruktor

+ +
+
{{domxref("FormData.FormData","FormData()")}}
+
Erzeugt ein neues FormData-Objekt.
+
+ +

Methoden

+ +
+
{{domxref("FormData.append()")}}
+
Fügt den Wert an den Wert eines bestehenden Schlüssel/Wert-Paares in einem FormData-Objekt an, oder fügt den Schlüssel mit dem Wert hinzu hinzu, falls dieser nicht vorhanden ist.
+
{{domxref("FormData.delete()")}}
+
Löscht ein Schlüssel/Wert-Paar aus einem FormData-Objekt.
+
{{domxref("FormData.entries()")}}
+
Gibt einen {{jsxref("Iteration_protocols","iterator")}} zurück, welcher das Iterieren über alle Schlüssel/Wert-Paare ermöglicht.
+
{{domxref("FormData.get()")}}
+
Gibt den ersten Wert zurück, welcher dem gegebenen Schlüssel in dem FormData-Objekt zugeordnet ist.
+
{{domxref("FormData.getAll()")}}
+
Erstellt ein Array, welches alle dem gegebenen Schlüssel zugeordneten Werte enthält.
+
{{domxref("FormData.has()")}}
+
Gibt einen boolean zurück, welcher Auskunft über das Vorhandenseins des gegeben Schlüssels im FormData-Objekt gibt.
+
{{domxref("FormData.keys()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Schlüssel der Schlüssel/Wert-Paare ermöglicht.
+
{{domxref("FormData.set()")}}
+
Ersetzt den Wert für einen bestimmten Schlüssel im FormData-Objekt, oder legt das Schlüssel/Wert-Paar an, sollte der Schlüssel noch nicht existieren.
+
{{domxref("FormData.values()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "iterator")}} zurück, welcher das Iterieren über alle Werte der Schlüsselpaare ermöglicht.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('XMLHttpRequest','#interface-formdata','FormData')}}{{Spec2('XMLHttpRequest')}}FormData definiert in XHR Spezifikation
+ +

Browserkompatibilität

+ +

{{Compat("api.FormData")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/fullscreenoptions/index.html b/files/de/web/api/fullscreenoptions/index.html new file mode 100644 index 0000000000..a4e76273e3 --- /dev/null +++ b/files/de/web/api/fullscreenoptions/index.html @@ -0,0 +1,43 @@ +--- +title: FullscreenOptions +slug: Web/API/FullscreenOptions +tags: + - API + - Aufbau + - Bildschirm + - Einstellungen + - Full-screen + - Fullscreen API + - FullscreenOptionen + - Navigation + - Optionen + - Referenz + - UI + - Wörterbuch + - fullscreen +translation_of: Web/API/FullscreenOptions +--- +

{{APIRef("Fullscreen API")}}

+ +

Das FullscreenOptions-Wörterbuch wird verwendet, um Konfigurationsoptionen bereitzustellen, wenn {{DOMxRef ("Element.requestFullscreen", "requestFullscreen ()")}} für ein Element aufgerufen wird, um dieses Element in den Vollbildmodus zu versetzen.

+ +

Eigenschaften

+ +
+
{{DOMxRef("FullscreenOptions.navigationUI", "navigationUI")}}{{Optional_Inline}}
+
Eine Zeichenfolge, mit der gesteuert wird, ob die Elemente der Browser-Benutzeroberfläche im Vollbildmodus angezeigt werden sollen. Mit der Standardeinstellung "auto" kann der Browser diese Entscheidung treffen.
+
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.FullscreenOptions")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/gainnode/index.html b/files/de/web/api/gainnode/index.html new file mode 100644 index 0000000000..fb5adeb75e --- /dev/null +++ b/files/de/web/api/gainnode/index.html @@ -0,0 +1,134 @@ +--- +title: GainNode +slug: Web/API/GainNode +translation_of: Web/API/GainNode +--- +

{{ APIRef("Web Audio API") }}

+ +
+

Die GainNode Schnittstelle ermöglicht eine Verstärkung (engl. gain) eines Signals, was als veränderte Lautstärke wahrgenommen wird. Es handelt sich um ein {{domxref("AudioNode")}} audio-verarbeitendes Modul, das ein Eingabesignal mit einer gewissen Verstärkung (die auch negativ sein kann) versieht, und es an den Ausgang weiterleitet. Ein GainNode hat immer genau einen Eingang und einen Ausgang, beide mit derselben Anzahl an Kanälen.

+
+ +

Verstärkung ist ein Wert ohne Einheit, der sich über die Zeit ändert. Er wird mit allen zeitlich korrespondierenden Samples aller Eingangskanäle multipliziert, um das Signal zu verändern.  Ändert sich der Wert, wird der neue Wert durch einen "de-zippering" Algorithmus angewendet, um unästhetisches Klick-Artifakte im Signal zu vermeiden.

+ +

The GainNode is increasing the gain of the output.

+ + + + + + + + + + + + + + + + + + + + + + + + +
Anzahl der Eingänge1
Anzahl der Ausgänge1
Kanalzählmethode"max"
Anzahl Kanäle2 (not used in the default count mode)
Kanalinterpretation"speakers"
+ +

Eigenschaften

+ +

Inherits properties from its parent, {{domxref("AudioNode")}}.

+ +
+
{{domxref("GainNode.gain")}} {{readonlyinline}}
+
Ist ein a-rate {{domxref("AudioParam")}} der das Ausmaß der Verstärkung angibt.
+
+ +

Methoden

+ +

Keine spezifischen Methoden; erbt die Methoden der Elternklasse , {{domxref("AudioNode")}}.

+ +

Beispiel

+ +

{{page("/en-US/docs/Web/API/AudioContext.createGain","Example")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Audio API', '#the-gainnode-interface', 'GainNode')}}{{Spec2('Web Audio API')}} 
+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(10.0)}}{{property_prefix("webkit")}}{{CompatGeckoDesktop(25.0)}} {{CompatNo}}15.0{{property_prefix("webkit")}}
+ 22		6.0{{property_prefix("webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}26.01.2{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}33.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/gamepad_api/index.html b/files/de/web/api/gamepad_api/index.html new file mode 100644 index 0000000000..d72bf51274 --- /dev/null +++ b/files/de/web/api/gamepad_api/index.html @@ -0,0 +1,95 @@ +--- +title: Gamepad API +slug: Web/API/Gamepad_API +tags: + - API + - Experimentel + - Spiele + - Übersicht +translation_of: Web/API/Gamepad_API +--- +
{{DefaultAPISidebar("Gamepad API")}}
+ +

Die Gamepad API ist ein Weg für  Entwickler auf Eingaben eines Gamepads und anderen Spielsteuergeräte in einer einfachen und konsequenten Weise zuzugreifen und darauf zu reagieren. Es enthält drei Schnittstellen, zwei Ereignisse und eine Spezialfunktion, welche verwendet wird, um auf verbindende und trennende Gamepads zu reagieren, um auf andere Informationen des Gamepads selbst zuzugreifen und welche Knöpfe und andere Kontrollelemente gerade gedrückt werden.

+ +

Schnittstellen

+ +
+
Gamepad
+
Repräsentiert ein Gamepad/Spielsteuergerät, dass mit dem Computer verbunden ist.
+
GamepadButton
+
Repräsentiert einen Knopf auf einem verbundenen Gamepad.
+
GamepadEvent
+
Das Ereignisobjekt, dass Ereignisse auf dem zusammenhängenden Gamepad repräsentativ auslöst.
+
+ +

Experimentelle Gamepad Erweiterungen

+ +
+
GamepadHapticActuator
+
Repräsentiert Hardware im Steuergeräte welche zur Verfügungstellung von haptischen Feedback für den Nutzer (Falls vefügbar) konzipiert worden ist, meistens handelt es sich um Vibrationsmotoren.
+
GamepadPose
+
Repräsentiert die Stellung des Steuergeräts (z.B. Position und Orientierung im dreidimensionalen Raum) im Falle eines WebVR-Steuergeräts.
+
+ +

Siehe unter Experimentelle Erweiterungen der Gamepad Schnittstelle nach Schnittstellen, die den Zugriff auf die oben erwähnten experimentellen Erweiterungen ermöglichen.

+ +

Erweiterungen für anderen Schnittstellen

+ + + +
+
{{domxref("Navigator.getGamepads()")}}
+
Eine Erweiterung für das {{domxref("Navigator")}} Objekt, das ein Array von {{domxref("Gamepad")}} Objeketen zurückschickt, jeweils eines für jedes verbundene Gamepad.
+
+ +

Window Ereignisse

+ +
+
{{domxref("Window.ongamepadconnected")}}
+
Repräsentiert einen Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad verbunden wird (Wenn das {{event('gamepadconnected')}} Ereignis auslöst).
+
{{domxref("Window.ongamepaddisconnected")}}
+
Repräsentiert einen  Ereignisabwickler, der ausgeführt wird, wenn ein Gamepad getrennt wird (Wenn das {{event('gamepaddisconnected')}} Ereignis auslöst).
+
+ +

Einführung und Leitfäden

+ + + +

Spezifikation

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("GamepadExtensions")}}{{Spec2("GamepadExtensions")}}Definiert die {{anch("Experimental Gamepad extensions")}}.
{{SpecName("Gamepad", "", "The Gamepad API specification")}}{{Spec2("Gamepad")}}Anfängliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Gamepad")}}

+ +

Siehe weiters

+ + diff --git a/files/de/web/api/geolocation/getcurrentposition/index.html b/files/de/web/api/geolocation/getcurrentposition/index.html new file mode 100644 index 0000000000..52fd968a6b --- /dev/null +++ b/files/de/web/api/geolocation/getcurrentposition/index.html @@ -0,0 +1,88 @@ +--- +title: Geolocation.getCurrentPosition() +slug: Web/API/Geolocation/getCurrentPosition +translation_of: Web/API/Geolocation/getCurrentPosition +--- +
{{securecontext_header}}{{ APIRef("Geolocation API") }}
+ +

Mit der Methode Geolocation.getCurrentPosition() kann die Position des Gerätes bestimmt werden.

+ +

Syntax

+ +
navigator.geolocation.getCurrentPosition(success[, error[, [options]])
+ +

Parameter

+ +
+
success
+
Eine Funktion, die nach erfolgreicher Positionsbestimmung aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPosition")}} als Parameter.
+
error {{optional_inline}}
+
Eine Funktion, die im Fehlerfall aufgerufen wird. Sie erhält ein Objekt vom Typ {{domxref("GeolocationPositionError")}} als Parameter.
+
options {{optional_inline}}
+
Ein Objekt vom Typ {{domxref("PositionOptions")}}. Es enthält: +
    +
  • maximumAge: Die Positionsbestimmung darf höchstens diese Zeit in Millisekunden zurückliegen. Falls 0, muss ein aktueller Wert ermittelt werden, falls Infinity, sollte kein aktueller Wert ermittelt werden.
    + Vorgabe: 0.
    • +
  • timeout: Wartezeit in Millisekunden, bis die Positionsbestimmung abgebrochen und, so gegeben, die Funktion error aufgerufen wird. Bei Infinity keine Begrenzung.
    + Vorgabe: Infinity.
    • +
  • enableHighAccuracy: true, um eine genauere Position zu ermitteln, jedoch möglicherweise zu Lasten von Wartezeit und Energieverbrauch.
    + Vorgabe: false.
    • +
+
+
+ +

Beispiel

+ +
var options = {
+  enableHighAccuracy: true,
+  timeout: 5000,
+  maximumAge: 0
+};
+
+function success(pos) {
+  var crd = pos.coords;
+
+  console.log('Your current position is:');
+  console.log(`Latitude : ${crd.latitude}`);
+  console.log(`Longitude: ${crd.longitude}`);
+  console.log(`More or less ${crd.accuracy} meters.`);
+}
+
+function error(err) {
+  console.warn(`ERROR(${err.code}): ${err.message}`);
+}
+
+navigator.geolocation.getCurrentPosition(success, error, options);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Geolocation')}}{{Spec2('Geolocation')}}Erste Spezifikation.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Geolocation.getCurrentPosition")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/geolocation/index.html b/files/de/web/api/geolocation/index.html new file mode 100644 index 0000000000..33c5695d42 --- /dev/null +++ b/files/de/web/api/geolocation/index.html @@ -0,0 +1,71 @@ +--- +title: Geolocation +slug: Web/API/Geolocation +tags: + - API + - Advanced + - Geolocation API + - Interface + - NeedsTranslation + - Reference + - Secure context + - TopicStub +translation_of: Web/API/Geolocation +--- +
{{securecontext_header}}{{APIRef("Geolocation API")}}
+ +

The Geolocation interface represents an object able to programmatically obtain the position of the device. It gives Web content access to the location of the device. This allows a Web site or app to offer customized results based on the user's location.

+ +

An object with this interface is obtained using the {{domxref("navigator.geolocation")}} property implemented by the {{domxref("Navigator")}} object.

+ +
+

Note: For security reasons, when a web page tries to access location information, the user is notified and asked to grant permission. Be aware that each browser has its own policies and methods for requesting this permission.

+
+ +

Properties

+ +

The Geolocation interface neither implements, nor inherits any property.

+ +

Methods

+ +

The Geolocation interface doesn't inherit any method.

+ +
+
{{domxref("Geolocation.getCurrentPosition()")}} {{securecontext_inline}}
+
Determines the device's current location and gives back a {{domxref("GeolocationPosition")}} object with the data.
+
{{domxref("Geolocation.watchPosition()")}} {{securecontext_inline}}
+
Returns a long value representing the newly established callback function to be invoked whenever the device location changes.
+
{{domxref("Geolocation.clearWatch()")}} {{securecontext_inline}}
+
Removes the particular handler previously installed using watchPosition().
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Geolocation', '#geolocation_interface')}}{{Spec2('Geolocation')}}Initial specification.
+ +

Browser compatibility

+ + + +

{{Compat("api.Geolocation")}}

+ +

See also

+ + diff --git a/files/de/web/api/globaleventhandlers/index.html b/files/de/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..db5dd7178f --- /dev/null +++ b/files/de/web/api/globaleventhandlers/index.html @@ -0,0 +1,540 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - HTML-DOM + - Mixin + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +
Der GlobalEventHandlers Mixin beschreibt die Ereignisbehandler, die mehreren Interfaces gemeinsam sind, wie z.B. {{domxref("HTMLElement")}}, {{domxref("Document")}}, oder {{domxref("Window")}}. Jedes dieser Interfaces kann weitere Ereignisbehandler implementieren.
+ +

GlobalEventHandlers ist ein Mixin und kein Interface und es kann kein Objekt dieses Typs angelegt werden.

+ +

Eigenschaften

+ +

Die Ereignis-Eigenschaften der Form onXYZ werden auf dem {{domxref("GlobalEventHandlers")}}} definiert und durch {{domxref("HTMLElement")}}}, {{domxref("Document")}}, {{domxref("Window")}} und {{domxref("WorkerGlobalScope")}}} für Webworker implementiert.

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("abort")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("blur")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onerror")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("focus")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cancel")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplay")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("canplaythrough")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("change")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("click")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("close")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("contextmenu")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Ist ein {{domxref("EventHandler")}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("cuechange")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Ist ein {{domxref("EventHandler")}}}, der den aufzurufenden Code repräsentiert, wenn das Ereignis {{event("dblclick")}} ausgelöst wird.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("selectionchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchcancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchcancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchmove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchmove")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontouchstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("touchstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}Adds onselectionchange.
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML5 W3C")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}30.05.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}}[1]{{CompatVersionUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatUnknown}}{{CompatUnknown}}
onselectionchange{{CompatGeckoDesktop(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoMobile(10)}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave{{CompatVersionUnknown}}[3]{{CompatNo}}10{{CompatNo}}{{CompatNo}}
onselectionchange{{CompatGeckoMobile(43)}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ontouchend, ontouchcancel, ontouchmove, ontouchstart{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] In Gecko this is implemented as onmozpointerlockchange, onmozpointerlockerror.

+ +

[2] In Blink this is implemented as onwebkitpointerlockchange, onwebkitpointerlockerror.

+ +

[3] This is implemented behind the dom.w3c_pointer_events.enabled preference, defaulting to false.

+ +

[4] This is implemented behind the dom.select_events.enabled preference, that default to false, except on Nightly.

+ +

See also

+ + diff --git a/files/de/web/api/globaleventhandlers/onclick/index.html b/files/de/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..7b71eebd3a --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,88 @@ +--- +title: Globaler Eventhandler onclick +slug: Web/API/GlobalEventHandlers/onclick +tags: + - API + - HTML DOM + - Méthode + - Referencen +translation_of: Web/API/GlobalEventHandlers/onclick +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +
 
+ +

Die onclick Methode gibt den click-Eventhandler des Elementes zurück.

+ +
Note: Wenn man das click-Event zum auslösen einer Aktion benutzt, kann man auch in Erwägung ziehen das man die selbe Aktion auf das keydown-Event legt, das erlaubt den Nutzern ohne Maus oder Touchscreen die Aktion trotzdem auszuführen.
+ +

Syntax

+ +
element.onclick = function;
+
+ +

Anstelle von function wird der Methodenname eingetragen, der meistens etwas mit der Funktion der Methode zu tun hat. Siehe "JavaScript Guide:Functions".

+ +

Das Eventobject besteht aus der spezielen Eventhandlermethode die ein {{domxref("MouseEvent")}} ist.

+ +

Beispiel

+ +
<!DOCTYPE html>
+<html lang="de">
+<head>
+<meta charset="UTF-8" />
+<title>onclick Event Beispiel</title>
+<script>
+function initElement() {
+  var p = document.getElementById("foo");
+  // BEACHTE: showAlert(); oder showAlert(param); wird NICHT funktionieren.
+  // Es muss ein Methodenname und NICHT ein Methodenaufruf sein.
+  p.onclick = showAlert;
+};
+
+function showAlert() {
+  alert("onclick Event erkannt!")
+}
+</script>
+<style>
+#foo {
+  border: solid blue 2px;
+}
+</style>
+</head>
+<body onload="initElement();">
+<span id="foo">Mein Eventelement</span>
+<p>Klicke auf das obenstehende Element</p>
+</body>
+</html>
+
+ +

Oder man benutzt eine anonyme Methode, wie hier:

+ +
p.onclick = function() { alert("onclick Event erkannt!"); };
+
+ +

Bemerkungen

+ +

Dieses Event wird ausgefürt wenn der Benutzer auf das Element klickt. Dieses Event wird nach dem Mousedown- und dem Mouseupevent ausgefürt.

+ +

Nur ein Klickhandler kann zu einem Objekt hinzugefügt werden in dieser Variable gespeichert werden. Man kann auch die {{domxref("EventTarget.addEventListener()")}} Methode benutzen, seit es flexibel ist und teil der DOM Evente Spezifikation.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}---
diff --git a/files/de/web/api/globaleventhandlers/onload/index.html b/files/de/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..87f61085dd --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,150 @@ +--- +title: GlobalEventHandlers.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +
{{ApiRef()}}
+ +
Die onload-Eigenschaft der {{domxref("GlobalEventHandlers")}} ist ein Ereignis-Handler für das load-Ereignis eines {{domxref("Window")}}s, {{domxref("XMLHttpRequest")}}s, {{htmlelement("img")}}-Elements, etc., der aufgerufen wird, wenn die Ressource fertig geladen hat.
+ +

Syntax

+ +
window.onload = funcRef;
+
+ +

Value

+ +

funcRef ist die Handler-Funktion, die aufgerufen wird, wenn das load-Ereignis des Windows eintritt.

+ +

Beispiele

+ +
window.onload = function() {
+  init();
+  etwasAnderesTun();
+};
+
+ +
<!doctype html>
+<html>
+  <head>
+    <title>onload-Test</title>
+    // ES5
+    <script>
+      function load() {
+        console.log("load-Ereignis festgestellt!");
+      }
+      window.onload = load;
+    </script>
+    // ES2015
+    <script>
+      const load = () => {
+        console.log("load-Ereignis festgestellt!");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>Das load-Ereignis tritt ein, wenn das Dokument fertig geladen ist!</p>
+  </body>
+</html>
+
+ +

Anmerkungen

+ +

Das load-Ereignis tritt am Ende des Dokumentladeprozesses ein. An diesem Punkt befinden sich alle Objekte des Dokuments im DOM und alle Grafiken, Skripte, Links und Sub-Frames sind vollständig geladen.

+ +

Es gibt zudem Gecko-spezifische DOM-Ereignisse wie DOMContentLoaded und DOMFrameContentLoaded (welches mit {{domxref("EventTarget.addEventListener()")}} gehandhabt werden kann), die eintreten, nachdem sich der DOM der Seite aufgebaut hat, aber nicht darauf warten, dass andere Ressourcen fertig geladen wurden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML WHATWG", "webappapis.html#handler-onload", "onload")}}{{Spec2("HTML WHATWG")}}Anfängliche Definition
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/globaleventhandlers/onresize/index.html b/files/de/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..b9866678c3 --- /dev/null +++ b/files/de/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,77 @@ +--- +title: GlobalEventHandlers.onresize +slug: Web/API/GlobalEventHandlers/onresize +tags: + - API + - DOM + - Property +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

Die GlobalEventHandlers.onresize Property enthält einen {{domxref("EventHandler")}}, der ausgelöst wird, sobald ein {{event("resize")}}-Event empfangen wird.

+ +

Syntax

+ +
window.onresize = funcRef;
+
+ +

Parameter

+ + + +

Beispiel

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize Test</title>
+
+</head>
+
+<body>
+<p>Verändere die Größe des Browser Fensters, um den resize-Event auszulösen.</p>
+
+<p>Window height: <span id="height"></span></p>
+<p>Window width: <span id="width"></span></p>
+
+<script type="text/javascript">
+  var heightOutput = document.querySelector('#height');
+  var widthOutput = document.querySelector('#width');
+
+  function resize() {
+    heightOutput.textContent = window.innerHeight;
+    widthOutput.textContent = window.innerWidth;
+  }
+
+  window.onresize = resize;
+</script>
+</body>
+</html>
+
+ +

Anmerkung

+ +

Das resize-Event wird ausgelöst nachdem die Größe des Fensters verändert wurde.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/de/web/api/htmlcanvaselement/index.html b/files/de/web/api/htmlcanvaselement/index.html new file mode 100644 index 0000000000..3083824dc8 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/index.html @@ -0,0 +1,242 @@ +--- +title: HTMLCanvasElement +slug: Web/API/HTMLCanvasElement +tags: + - API + - Canvas + - Graphiken + - WebGL +translation_of: Web/API/HTMLCanvasElement +--- +
+
{{APIRef("Canvas API")}}
+
+ +

Das HTMLCanvasElement interface bietet Eigenschaften und Methoden zum Manipulieren des Layouts und der Darstellung des <canvas>-Elements. Das HTMLCanvasElement interface erbt außerdem Eigenschaften und Methoden des {{domxref("HTMLElement")}} interface.

+ +

Eigenschaften

+ +

Erbt Eigenschaften von seinem Elternelement, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.height")}}
+
Ein positiver integer, der das {{htmlattrxref("height", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln repräsentiert. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 150 verwendet.
+
{{domxref("HTMLCanvasElement.mozOpaque")}} {{non-standard_inline}}
+
Ein {{jsxref("Boolean")}}, der das {{htmlattrxref("moz-opaque", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements repräsentiert. Es sagt dem canvas, ob auf Transparenz verzichtet werden soll. Falls true, kann das Zeichnen auf dem canvas beschleunigt werden.
+
{{domxref("HTMLCanvasElement.width")}}
+
Ein positiver integer, der das {{htmlattrxref("width", "canvas")}} HTML-Attribut des {{HTMLElement("canvas")}} Elements in CSS-Pixeln anzeigt. Wenn nicht definiert oder wenn es auf einen nicht erlaubten Wert (z.B. einen negativen Wert) gesetzt wird, wird der Standardwert 300 verwendet.
+
+ +

Methoden

+ +

Erbt Eigenschaften von seinem Elternelement, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLCanvasElement.captureStream()")}} {{experimental_inline}}
+
Gibt ein {{domxref("CanvasCaptureMediaStream")}} zurück, dieses ist ein Echtzeit-Video der Oberfläche des canvas.
+
{{domxref("HTMLCanvasElement.getContext()")}}
+
Gibt einen context des canvas zurück oder null, falls die context-ID nicht unterstützt wird. Ein context ermöglicht es, auf dem canvas zu zeichnen. Der Aufruf dieser Methode mit "2d" gibt ein {{domxref("CanvasRenderingContext2D")}} Objekt zurück, während er mit "experimental-webgl" oder "webgl" ein {{domxref("WebGLRenderingContext")}} Objekt zurückgibt. Dieser context ist nur bei Browsern möglich, die WebGL unterstützen.
+
{{domxref("HTMLCanvasElement.toDataURL()")}}
+
Returns a data-URL containing a representation of the image in the format specified by the type parameter (defaults to png). The returned image is in a resolution of 96dpi.
+
{{domxref("HTMLCanvasElement.toBlob()")}}
+
Creates a {{domxref("Blob")}} object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
+
{{domxref("HTMLCanvasElement.transferControlToOffscreen()")}} {{experimental_inline}}
+
Transfers control to an {{domxref("OffscreenCanvas")}} object, either on the main thread or on a worker.
+
{{domxref("HTMLCanvasElement.mozGetAsFile()")}} {{non-standard_inline}} {{deprecated_inline}}
+
Returns a {{domxref("File")}} object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Media Capture DOM Elements', '#html-media-element-media-capture-extensions', 'HTMLCanvasElement')}}{{Spec2('Media Capture DOM Elements')}}Adds the method captureStream().
{{SpecName('HTML WHATWG', "#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML WHATWG')}}The method getContext() now returns a {{domxref("RenderingContext")}} rather than an opaque object.
+ The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
{{SpecName('HTML5.1', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#the-canvas-element", "HTMLCanvasElement")}}{{Spec2('HTML5 W3C')}}Initial definition.
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (2D context)4.0{{CompatGeckoDesktop('1.9.2')}}9.09.0 [1]3.1
toBlob(){{CompatNo}} (bug 67587){{CompatGeckoDesktop('19')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatGeckoDesktop('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (2D context)2.1{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}10.0 [1]3.2
webgl context{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} as experimental-webgl{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
toBlob(){{CompatNo}} (bug 67587){{CompatNo}} (bug 67587){{CompatGeckoMobile('18')}} [2]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}} (bug 71270)
probablySupportsContext(),
+ setContext(),
+ transferControlToProxy() {{experimental_inline}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
mozGetAsFile() {{non-standard_inline}} {{deprecated_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('2')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
captureStream() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile('41')}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
transferControlToOffscreen() {{experimental_inline}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Opera Mini 5.0 and later has partial support.

+ +

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

+ +

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcanvaselement/todataurl/index.html b/files/de/web/api/htmlcanvaselement/todataurl/index.html new file mode 100644 index 0000000000..c0a0a900d4 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/todataurl/index.html @@ -0,0 +1,206 @@ +--- +title: HTMLCanvasElement.toDataURL() +slug: Web/API/HTMLCanvasElement/toDataURL +tags: + - API + - Canvas + - DataURI erstellen + - HTMLCanvasElement + - Method + - Methode(2) + - Referenz +translation_of: Web/API/HTMLCanvasElement/toDataURL +--- +
+
+
{{APIRef("Canvas API")}}
+
+
+ +

Die HTMLCanvasElement.toDataURL()-Methode gibt eine Repräsentation des Bildes als data URI zurück. Das gewünschte Format wird mit den angegebenen Parametern definiert (standardmäßig PNG). Das zurückgegebene Bild besitzt eine Auflösung von 96 dpi.

+ + + +

Syntax

+ +
canvas.toDataURL(type, encoderOptions);
+
+ +

Parameter

+ +
+
type {{optional_inline}}
+
Ein Parameter vom Typ {{domxref("DOMString")}} bestimmt das Bild-Format. Der Standard type ist image/png.
+
encoderOptions {{optional_inline}}
+
Ein Parameter vom Typ {{jsxref("Number")}} zwischen 0 und 1 gibt die Bildqualität an, wenn der Anfragetyp image/jpeg oder image/webp ist.
+ Wenn das Argument irgend etwas anderes enthält, wird der Standardwert für die Bildqualität verwendet. Der Standardwert liegt bei 0.92. Andere Argumente werden ignoriert.
+
+ +

Rückgabewerte

+ +

Ein Rückgabewert vom Typ {{domxref("DOMString")}} beinhaltet die angefragte data URI.

+ +

Beispiele

+ +

Es ist folgendes {{HTMLElement("canvas")}} Element gegeben:

+ +
<canvas id="canvas" width="5" height="5"></canvas>
+
+ +

Mit den folgenden Zeilen erhalten Sie die data-URL des Canvas:

+ +
var canvas = document.getElementById("canvas");
+var dataURL = canvas.toDataURL();
+console.log(dataURL);
+// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
+// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"
+
+ +

Die Bildqualität für jpegs einstellen

+ +
var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
+// data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z"
+var mediumQuality = canvas.toDataURL("image/jpeg", 0.5);
+var lowQuality = canvas.toDataURL("image/jpeg", 0.1);
+
+ +

Beispiel: Dynamisches Ändern von Bildern

+ +

Sie können diese Technik in Verbindung mit Maus-Events nutzen, um dynamisch Bilder abzuändern (in diesem Beispiel schwarz-weiß und farbig):

+ +

HTML

+ +
<img class="schwarz-weiss" src="myPicture.png" alt="Beschreibung meines Bildes" />
+ +

JavaScript

+ +
window.addEventListener("load", removeColors);
+
+function showColorImg() {
+  this.style.display = "none";
+  this.nextSibling.style.display = "inline";
+}
+
+function showGrayImg() {
+  this.previousSibling.style.display = "inline";
+  this.style.display = "none";
+}
+
+function removeColors() {
+  var aImages = document.getElementsByClassName("schwarz-weiss"),
+      nImgsLen = aImages.length,
+      oCanvas = document.createElement("canvas"),
+      oCtx = oCanvas.getContext("2d");
+  for (var nWidth, nHeight, oImgData, oGrayImg, nPixel, aPix, nPixLen, nImgId = 0; nImgId < nImgsLen; nImgId++) {
+    oColorImg = aImages[nImgId];
+    nWidth = oColorImg.offsetWidth;
+    nHeight = oColorImg.offsetHeight;
+    oCanvas.width = nWidth;
+    oCanvas.height = nHeight;
+    oCtx.drawImage(oColorImg, 0, 0);
+    oImgData = oCtx.getImageData(0, 0, nWidth, nHeight);
+    aPix = oImgData.data;
+    nPixLen = aPix.length;
+    for (nPixel = 0; nPixel < nPixLen; nPixel += 4) {
+      aPix[nPixel + 2] = aPix[nPixel + 1] = aPix[nPixel] = (aPix[nPixel] + aPix[nPixel + 1] + aPix[nPixel + 2]) / 3;
+    }
+    oCtx.putImageData(oImgData, 0, 0);
+    oGrayImg = new Image();
+    oGrayImg.src = oCanvas.toDataURL();
+    oGrayImg.onmouseover = showColorImg;
+    oColorImg.onmouseout = showGrayImg;
+    oCtx.clearRect(0, 0, nWidth, nHeight);
+    oColorImg.style.display = "none";
+    oColorImg.parentNode.insertBefore(oGrayImg, oColorImg);
+  }
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentare
{{SpecName('HTML WHATWG', "scripting.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML WHATWG')}}Keine Änderungen seit letztem Schnappschuss, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5.1')}} 
{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-todataurl", "HTMLCanvasElement.toDataURL")}}{{Spec2('HTML5 W3C')}}Schnappschuss von {{SpecName('HTML WHATWG')}} beinhaltet ursprüngliche Definition.
+ +

Browser-Kompatiblität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome(4) }}{{ CompatGeckoDesktop("1.9.2") }}{{ CompatIE(9) }}{{ CompatOpera(9) }}{{ CompatSafari(4.0) }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatAndroid(3.2) }}{{ CompatAndroid(18) }}{{ CompatGeckoMobile("1.9.2") }}{{ CompatVersionUnknown() }}{{ CompatOpera(19) }}{{ CompatSafari(3.0) }}
+
+ +

Schauen Sie auch unter

+ + diff --git a/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html new file mode 100644 index 0000000000..244bbcc76e --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextcreationerror_event/index.html @@ -0,0 +1,132 @@ +--- +title: webglcontextcreationerror +slug: Web/API/HTMLCanvasElement/webglcontextcreationerror_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextcreationerror_event +--- +
{{APIRef}}
+ +
+

Das webglcontextcreationerror Event der WebGL API wird ausgelöst, wenn der User-Agent nicht in der Lage ist einen {{domxref("WebGLRenderingContext")}} zu erzeugen.

+ +

Das Event hat die Eigenschaft {{domxref("WebGLContextEvent.statusMessage")}}, die einen plattformabhängigen String mit weiteren Informationen über den Fehler enthält.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesJa
CancelableJa
Zielobjekt{{domxref("HTMLCanvasElement")}}
Interface{{domxref("WebGLContextEvent")}}
+ +

Beispiel

+ +
var canvas = document.getElementById("canvas");
+
+canvas.addEventListener("webglcontextcreationerror", function(e) {
+  console.log(e.statusMessage || "Unknown error");
+}, false);
+
+var gl = canvas.getContext("webgl");
+// logs statusMessage or "Unknown error" if unable to create WebGL context
+
+ +

Vererbung

+ +

Das webglcontextcreationerror Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.

+ +

{{InheritanceDiagram('','','', 'WebGLContextEvent')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL', '#5.15.4', 'webglcontextcreationerror')}}{{Spec2('WebGL')}}Grundlegende Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop(49)}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile(49)}}{{CompatUnknown}}128
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html new file mode 100644 index 0000000000..786d9e49b9 --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextlost_event/index.html @@ -0,0 +1,133 @@ +--- +title: webglcontextlost +slug: Web/API/HTMLCanvasElement/webglcontextlost_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextlost_event +--- +
{{APIRef}}
+ +
+

Das webglcontextlost Event der WebGL API wird ausgelöst, wenn der User-Agent feststellt, dass der mit dem {{domxref("WebGLRenderingContext")}}-Objekt verknüpften Drawing Buffer verloren gegangen ist.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesJa
CancelableJa
Zielobjekt{{domxref("HTMLCanvasElement")}}
Interface{{domxref("WebGLContextEvent")}}
+ +

Beispiel

+ +

Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das webglcontextlost Event simuliert werden:

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+
+canvas.addEventListener("webglcontextlost", function(e) {
+  console.log(e);
+}, false);
+
+gl.getExtension('WEBGL_lose_context').loseContext();
+
+// "webglcontextlost" event is logged.
+ +

Vererbung

+ +

Das webglcontextlost Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.

+ +

{{InheritanceDiagram('','','', 'WebGLContextEvent')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL', '#5.15.2', 'webglcontextlost')}}{{Spec2('WebGL')}}Grundlegende Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}128.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html new file mode 100644 index 0000000000..fc616cccdd --- /dev/null +++ b/files/de/web/api/htmlcanvaselement/webglcontextrestored_event/index.html @@ -0,0 +1,135 @@ +--- +title: webglcontextrestored +slug: Web/API/HTMLCanvasElement/webglcontextrestored_event +tags: + - Event + - WebGL + - WebGLContextEvent +translation_of: Web/API/HTMLCanvasElement/webglcontextrestored_event +--- +
{{APIRef}}
+ +
+

Das webglcontextrestored Event der WebGL API wird ausgelöst, wenn der User-Agent den Drawing Buffer das  {{domxref("WebGLRenderingContext")}}-Objekts wiederhergestellt hat.

+ +

Wenn der Context wiederhergestellt wurde, sind alle zuvor erzeugten WebGL-Ressourcen wie Texturen und Buffer nicht mehr gültig. Die WebGL-Applikation muss dann neu initalisiert und alle Ressourcen neu erstellt werden.

+
+ + + + + + + + + + + + + + + + + + + + +
BubblesYes
CancelableYes
Zielobjekt{{domxref("HTMLCanvasElement")}}
Interface{{domxref("WebGLContextEvent")}}
+ +

Beispiel

+ +

Mit der Hilfe der {{domxref("WEBGL_lose_context")}} Extension kann das webglcontextrestored Event simuliert werden:

+ +
var canvas = document.getElementById("canvas");
+var gl = canvas.getContext("webgl");
+
+canvas.addEventListener("webglcontextrestored", function(e) {
+  console.log(e);
+}, false);
+
+gl.getExtension('WEBGL_lose_context').restoreContext();
+
+// "webglcontextrestored" event is logged.
+ +

Vererbung

+ +

Das webglcontextrestored Event implementiert das {{domxref("WebGLContextEvent")}} Interface, welches die Eigenschaften und Methoden von {{domxref("Event")}} erbt.

+ +

{{InheritanceDiagram('','','', 'WebGLContextEvent')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL', '#5.15.3', 'webglcontextrestored')}}{{Spec2('WebGL')}}Grundlegende Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}128.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlcollection/index.html b/files/de/web/api/htmlcollection/index.html new file mode 100644 index 0000000000..b09998b7d4 --- /dev/null +++ b/files/de/web/api/htmlcollection/index.html @@ -0,0 +1,70 @@ +--- +title: HTMLCollection +slug: Web/API/HTMLCollection +translation_of: Web/API/HTMLCollection +--- +

{{APIRef("HTML DOM")}}

+ +

Die HTMLCollection repräsentiert eine generische Sammlung (Array-ähnliches Objekt) an Elementen (in Dokumentreihenfolge) und bietet Methoden und Eigenschaften zur Auswahl dieser aus einer Liste an.

+ +
Notiz: Diese Schnittstelle wird aus historischen Gründen HTMLCollection genannt (vor DOM4 konnten Sammlungen, die diese Schnittstelle implementierten, nur HTML-Elemente als Einträge haben).
+ +

Eine HTMLCollection in der HTML DOM ist live; sie wird automatisch aktualisiert, wenn das zugrundeliegende Dokument verändert wird.

+ +

Eigenschaften

+ +
+
{{domxref("HTMLCollection.length")}} {{readonlyInline}}
+
Gibt die Anzahl der Elemente in der Auflistung zurück.
+
+ +

Methoden

+ +
+
{{domxref("HTMLCollection.item()")}}
+
Gibt den spezifischen Knoten am angegebenen nullbasierten index in die Liste zurück.
+ Gibt null zurück, wenn der index außerhalb des Bereichs ist.
+
{{domxref("HTMLCollection.namedItem()")}}
+
Gibt den spezifischen Knoten, dessen ID oder alternativ dessen Name auf die Zeichenkette (spezifiziert durch name) passt, zurück. Die Übereinstimmung des Namens wird nur als letzte Möglichkeit, nur in HTML, und nur, wenn das referenzierte Element das name Attribut unterstützt, durchgeführt.
+ Gibt null zurück, wenn kein Code des angegebenen Namens existiert.
+
+ +

Verwendung in JavaScript

+ +

HTMLCollection setzt auch seine Member direkt als Eigenschaften von name und index. HTML IDs können Doppelpunkte und Punkte als gültige Zeichen beinhalten, was das Verwenden von Klammern für den Zugriff auf Eigenschaften erfordert. Derzeit erkennt HTMLCollections rein numerische IDs nicht, da sie einen Konflikt mit dem Array-ähnlichen Zugriff verursachen würden, obwohl HTML5 dies erlaubt.

+ +

Zum Beispiel, unter der Annahme, dass es ein <form> Element im Dokument und die id "myForm" ist:

+ +
var elem1, elem2;
+
+// document.forms ist eine HTMLCollection
+
+elem1 = document.forms[0];
+elem2 = document.forms.item(0);
+
+alert(elem1 === elem2); // zeigt: "true"
+
+elem1 = document.forms.myForm;
+elem2 = document.forms.namedItem("myForm");
+
+alert(elem1 === elem2); // zeigt: "true"
+
+elem1 = document.forms["bennantes.Element.mit.Punkten"];
+ +

Browser Kompatibilität

+ +

Verschiedene Browser verhalten sich unterschiedlich, wenn es mehr als ein Element gibt, das auf die Zeichenkette passt, die als ein index (oder namedItems Argument) verwendet wird. Firefox 8 verhält sich wie in DOM 2 and DOM4 angegeben, und gibt das erste passende Element zurück. WebKit Browser und Internet Explorer geben in diesem Fall eine andere HTMLCollection und Opera eine {{domxref("NodeList")}} aller passenden Elemente zurück.

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/htmlformelement/elements/index.html b/files/de/web/api/htmlformelement/elements/index.html new file mode 100644 index 0000000000..e5be5603ac --- /dev/null +++ b/files/de/web/api/htmlformelement/elements/index.html @@ -0,0 +1,46 @@ +--- +title: HTMLFormElement.elements +slug: Web/API/HTMLFormElement/elements +translation_of: Web/API/HTMLFormElement/elements +--- +
+
APIRef("HTML DOM")
+
+ +

Die HTMLFormElement.elements Eigenschaft gibt eine domxref("HTMLFormControlsCollection") ( HTMLVersionInline(4) HTMLCollection) aller im FORM element enthaltenen Formularsteuerelemente zurück, mit Ausnahme von input , die ein type attribute haben von image.

+ +

Sie können auf ein bestimmtes Element zugreifen, indem Sie entweder einen Index oder den Elementnamen oder die ID verwenden.

+ +

Syntax

+ +
nodeList = HTMLFormElement.elements
+
+ +

Beschreibung

+ +
let inputs = document.getElementById("form1").elements;
+let inputByIndex = inputs[2];
+let inputByName = inputs["login"];
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
SpecName('HTML WHATWG', '#dom-form-elements', 'HTMLFormElement.elements') Spec2('HTML WHATWG')
SpecName("DOM2 HTML", "html.html#ID-76728479", "HTMLFormElement.elements")Spec2("DOM2 HTML")Initial definition
diff --git a/files/de/web/api/htmlformelement/index.html b/files/de/web/api/htmlformelement/index.html new file mode 100644 index 0000000000..45fbc2e027 --- /dev/null +++ b/files/de/web/api/htmlformelement/index.html @@ -0,0 +1,260 @@ +--- +title: HTMLFormElement +slug: Web/API/HTMLFormElement +tags: + - API + - DOM + - HTML + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLFormElement +--- +
{{APIRef("HTML DOM")}}
+ +

The HTMLFormElement interface provides methods to create and modify {{HTMLElement("form")}} elements.

+ + + +

{{InheritanceDiagram(600,120)}}

+ +

Properties

+ +

This interface also inherits properties from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}
+
A {{domxref("HTMLFormControlsCollection")}} holding all form controls belonging to this form element.
+
{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}
+
A long reflecting  the number of controls in the form.
+
{{domxref("HTMLFormElement.name")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("name", "form") }} HTML attribute, containing the name of the form.
+
{{domxref("HTMLFormElement.method")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("method", "form") }} HTML attribute, indicating the HTTP method used to submit the form. Only specified values can be set.
+
{{domxref("HTMLFormElement.target")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("target", "form") }} HTML attribute, indicating where to display the results received from submitting the form.
+
{{domxref("HTMLFormElement.action")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("action", "form") }} HTML attribute, containing the URI of a program that processes the information submitted by the form.
+
{{domxref("HTMLFormElement.encoding")}} or {{domxref("HTMLFormElement.enctype")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("enctype", "form") }} HTML attribute, indicating the type of content that is used to transmit the form to the server. Only specified values can be set. The two methods are synonyms.
+
{{domxref("HTMLFormElement.acceptCharset")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("accept-charset", "form") }} HTML attribute, representing the character encoding that the server accepts.
+
{{domxref("HTMLFormElement.autocomplete")}}
+
A {{domxref("DOMString")}} reflecting the value of the form's {{ htmlattrxref("autocomplete", "form") }} HTML attribute, indicating whether the controls in this form can have their values automatically populated by the browser.
+
{{domxref("HTMLFormElement.noValidate")}}
+
A {{jsxref("Boolean")}} reflecting the value of the form's  {{ htmlattrxref("novalidate", "form") }} HTML attribute, indicating whether the form should not be validated.
+
+ +

Named inputs are added to their owner form instance as properties, and can overwrite native properties if they share the same name (eg a form with an input named action will have its action property return that input instead of the form's {{ htmlattrxref("action", "form") }} HTML attribute).

+ +

Methods

+ +

This interface also inherits methods from its parent, {{domxref("HTMLElement")}}.

+ +
+
{{domxref("HTMLFormElement.submit()")}}
+
Submits the form to the server.
+
{{domxref("HTMLFormElement.reset()")}}
+
Resets the form to its initial state.
+
{{domxref("HTMLFormElement.checkValidity()")}}
+
Returns true if the element's child controls are subject to constraint validation and satisfy those contraints; returns false if some controls do not satisfy their constraints. Fires an event named {{event("invalid")}} at any control that does not satisfy its constraints; such controls are considered invalid if the event is not canceled. It is up to the programmer to decide how to respond to false.
+
{{domxref("HTMLFormElement.reportValidity()")}}
+
Returns true if the element's child controls satisfy their validation constraints. When false is returned, cancelable {{Event("invalid")}} events are fired for each invalid child and validation problems are reported to the user.
+
{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}
+
Triggers a native browser interface to assist the user in completing the fields which have an autofill field name value that is not off or on. The form will receive an event once the user has finished with the interface, the event will either be {{event("autocomplete")}} when the fields have been filled or {{event("autocompleteerror")}} when there was a problem. This method has been removed from Chrome and Firefox — see {{bug(1270740)}} for background information on why.
+
+ +

Examples

+ +

Create a new form element, modify its attributes and submit it:

+ +
var f = document.createElement("form");// Create a form
+document.body.appendChild(f);          // Add it to the document body
+f.action = "/cgi-bin/some.cgi";        // Add action and method attributes
+f.method = "POST"
+f.submit();                            // Call the form's submit method
+
+ +

Extract information from a form element and set some of its attributes:

+ +
<form name="formA" id="formA" action="/cgi-bin/test" method="POST">
+ <p>Click "Info" for form details; "Set" to change settings.</p>
+ <p>
+  <input type="button" value="info" onclick="getFormInfo();">
+  <input type="button" value="set"  onclick="setFormInfo(this.form);">
+  <input type="reset" value="reset"><br>
+  <textarea id="tex" style="height:15em; width:20em"></textarea>
+ </p>
+</form>
+
+<script type="text/javascript">
+  function getFormInfo(){
+    var info;
+    var f = document.forms["formA"]; //Get a reference to the form via id.
+    info = "elements: " + f.elements     + "\n"
+         + "length: "   + f.length       + "\n"
+         + "name: "     + f.name         + "\n"
+         + "charset: "  + f.acceptCharset+ "\n"
+         + "action: "   + f.action       + "\n"
+         + "enctype: "  + f.enctype      + "\n"
+         + "encoding: " + f.encoding     + "\n"
+         + "method: "   + f.method       + "\n"
+         + "target: "   + f.target;
+    document.forms["formA"].elements['tex'].value = info;
+  }
+  function setFormInfo(f){ //Argument is a reference to the form.
+    f.method = "GET";
+    f.action = "/cgi-bin/evil_executable.cgi";
+    f.name   = "totally_new";
+  }
+</script>
+
+ +

Submit a form in a popup window:

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>MDN Example</title>
+<script type="text/javascript">
+function popupSend (oFormElement) {
+  if (oFormElement.method && oFormElement.method.toLowerCase() !== "get") {
+    console.error("This script supports the GET method only.");
+    return;
+  }
+  var oField, sFieldType, nFile, sSearch = "";
+  for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+    oField = oFormElement.elements[nItem];
+    if (!oField.hasAttribute("name")) { continue; }
+    sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+    if (sFieldType === "FILE") {
+      for (nFile = 0; nFile < oField.files.length; sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+    } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+      sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+    }
+  }
+  open(oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), "submit-" + (oFormElement.name || Math.floor(Math.random() * 1e6)), "resizable=yes,scrollbars=yes,status=yes");
+}
+</script>
+
+</head>
+
+<body>
+
+<form name="yourForm" action="test.php" method="get" onsubmit="popupSend(this); return false;">
+  <p>First name: <input type="text" name="firstname" /><br />
+  Last name: <input type="text" name="lastname" /><br />
+  Password: <input type="password" name="pwd" /><br />
+  <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female</p>
+  <p><input type="checkbox" name="vehicle" value="Bike" />I have a bike<br />
+  <input type="checkbox" name="vehicle" value="Car" />I have a car</p>
+  <p><input type="submit" value="Submit" /></p>
+</form>
+
+</body>
+</html>
+ +

Submitting forms and uploading files using XMLHttpRequest

+ +

If you want to know how to serialize and submit a form using the {{domxref("XMLHttpRequest")}} API, please read this paragraph.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML WHATWG')}}The following method has been added: requestAutocomplete().
{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}{{Spec2('HTML5 W3C')}}The elements properties returns an {{domxref("HTMLFormControlsCollection")}} instead of a raw {{domxref("HTMLCollection")}}. This is mainly a technical change. The following method has been added: checkValidity(). The following properties have been added: autocomplete, noValidate, and encoding.
{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM2 HTML')}}No change
{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}{{Spec2('DOM1')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(1.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] In Firefox 56, the implementation has been updated so that the action property returns the correct form submission URL, as per spec ({{bug(1366361)}}).

+ +

See also

+ + diff --git a/files/de/web/api/htmlformelement/submit_event/index.html b/files/de/web/api/htmlformelement/submit_event/index.html new file mode 100644 index 0000000000..722fba4d46 --- /dev/null +++ b/files/de/web/api/htmlformelement/submit_event/index.html @@ -0,0 +1,76 @@ +--- +title: submit +slug: Web/API/HTMLFormElement/submit_event +tags: + - Event + - submit +translation_of: Web/API/HTMLFormElement/submit_event +--- +

Das submit Event tritt ein, wenn ein Formular (<form ...></form>) abgeschickt wird.

+ +

Es gilt zu beachten, dass das submit Event nur auf dem Formularelement ausgelöst wird. Der auslösende <button> oder <input type="submit" ... /> erhalten das Event nicht (Es wird das Formular abgeschickt, nicht der Button).

+ +

Allgemein

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationHTML5
Interface{{domxref("Event")}}
Propagiert ("Bubbles")Ja (obwohl eigentlich einfach Event ohne Propagation)
CancelableJa
ZielElement
StandardaktionAbhängig von Implementierung (schickt Inhalt des Formulars zum Server)
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
diff --git a/files/de/web/api/htmlinputelement/index.html b/files/de/web/api/htmlinputelement/index.html new file mode 100644 index 0000000000..284d3cc770 --- /dev/null +++ b/files/de/web/api/htmlinputelement/index.html @@ -0,0 +1,435 @@ +--- +title: HTMLInputElement +slug: Web/API/HTMLInputElement +tags: + - API + - HTML DOM + - HTMLInputElement + - Input + - Interface + - NeedsContent + - NeedsMarkupWork + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLInputElement +--- +
{{ APIRef("HTML DOM") }}
+ +

The HTMLInputElement interface provides special properties and methods for manipulating the options, layout, and presentation of {{HtmlElement("input")}} elements.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties related to the parent form
form {{readonlyInline}}{{domxref("HTMLFormElement")}} object: Returns a reference to the parent {{HtmlElement("form")}} element.
formActionstring: Returns / Sets the element's {{ htmlattrxref("formaction", "input") }} attribute, containing the URI of a program that processes information submitted by the element. This overrides the {{ htmlattrxref("action", "form") }} attribute of the parent form.
formEncTypestring: Returns / Sets the element's {{ htmlattrxref("formenctype", "input") }} attribute, containing the type of content that is used to submit the form to the server. This overrides the {{ htmlattrxref("enctype", "form") }} attribute of the parent form.
formMethodstring: Returns / Sets the element's {{ htmlattrxref("formmethod", "input") }} attribute, containing the HTTP method that the browser uses to submit the form. This overrides the {{ htmlattrxref("method", "form") }} attribute of the parent form.
formNoValidate{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("formnovalidate", "input") }} attribute, indicating that the form is not to be validated when it is submitted. This overrides the {{ htmlattrxref("novalidate", "form") }} attribute of the parent form.
formTargetstring: Returns / Sets the element's {{ htmlattrxref("formtarget", "input") }} attribute, containing a name or keyword indicating where to display the response that is received after submitting the form. This overrides the {{ htmlattrxref("target", "form") }} attribute of the parent form.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply to any type of input element that is not hidden
namestring: Returns / Sets the element's {{ htmlattrxref("name", "input") }} attribute, containing a name that identifies the element when submitting the form.
typestring: Returns / Sets the element's {{ htmlattrxref("type", "input") }} attribute, indicating the type of control to display. See {{ htmlattrxref("type", "input") }} attribute of {{ HTMLElement("input") }} for possible values.
disabled{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("disabled", "input") }} attribute, indicating that the control is not available for interaction. The input values will not be submitted with the form. See also {{ htmlattrxref("readOnly", "input") }}
autofocus{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("autofocus", "input") }} attribute, which specifies that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the {{htmlattrxref("autofocus","input")}} attribute. It cannot be applied if the {{htmlattrxref("type","input")}} attribute is set to hidden (that is, you cannot automatically set focus to a hidden control).
required{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("required", "input") }} attribute, indicating that the user must fill in a value before submitting a form.
valuestring: Returns / Sets the current value of the control. +

Note: If the user enters a value different from the value expected, this may return an empty string.

+
validity {{readonlyInline}}{{domxref("ValidityState")}} object: Returns the element's current validity state.
validationMessage {{readonlyInline}}string: Returns a localized message that describes the validation constraints that the control does not satisfy (if any). This is the empty string if the control is not a candidate for constraint validation ({{htmlattrxref("willValidate","input")}} is false), or it satisfies its constraints. This value can be set by the setCustomValidity method.
willValidate {{readonlyInline}}{{jsxref("Boolean")}}: Returns whether the element is a candidate for constraint validation. It is false if any conditions bar it from constraint validation, including: its type is hidden, reset, or button; it has a datalist ancestor; its disabled property is true.
+ + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type checkbox or radio
checked{{jsxref("Boolean")}}: Returns / Sets the current state of the element when {{htmlattrxref("type","input")}} is checkbox or radio.
defaultChecked{{jsxref("Boolean")}}: Returns / Sets the default state of a radio button or checkbox as originally specified in HTML that created this object.
indeterminate{{jsxref("Boolean")}}: Returns whether the checkbox or radio button is in indeterminate state. For checkboxes, the effect is that the appearance of the checkbox is obscured/greyed in some way as to indicate its state is indeterminate (not checked but not unchecked). Does not affect the value of the checked attribute, and clicking the checkbox will set the value to false.
+ + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type image
altstring: Returns / Sets the element's {{ htmlattrxref("alt", "input") }} attribute, containing alternative text to use when {{htmlattrxref("type","input")}} is image.
heightstring: Returns / Sets the element's {{ htmlattrxref("height", "input") }} attribute, which defines the height of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
srcstring: Returns / Sets the element's {{ htmlattrxref("src", "input") }} attribute, which specifies a URI for the location of an image to display on the graphical submit button, if the value of {{htmlattrxref("type","input")}} is image; otherwise it is ignored.
widthstring: Returns / Sets the document's {{ htmlattrxref("width", "input") }} attribute, which defines the width of the image displayed for the button, if the value of {{htmlattrxref("type","input")}} is image.
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to elements of type file
acceptstring: Returns / Sets the element's {{ htmlattrxref("accept", "input") }} attribute, containing comma-separated list of file types accepted by the server when {{htmlattrxref("type","input")}} is file.
allowdirs {{non-standard_inline}}{{jsxref("Boolean")}}: Part of the non-standard Directory Upload API; indicates whether or not to allow directories and files both to be selected in the file list. Implemented only in Firefox and is hidden behind a preference.
filesReturns/accepts a {{domxref("FileList")}} object, which contains a list of {{domxref("File")}} objects representing the files selected for upload.
{{domxref("HTMLInputElement.webkitdirectory", "webkitdirectory")}} {{Non-standard_inline}}{{jsxref("Boolean")}}: Returns the {{htmlattrxref("webkitdirectory", "input")}} attribute; if true, the file system picker interface only accepts directories instead of files.
{{domxref("HTMLInputElement.webkitEntries", "webkitEntries")}} {{Non-standard_inline}}Array of {{domxref("FileSystemEntry")}} objects: Describes the currently selected files or directories.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties that apply only to text/number-containing or elements
autocompletestring: Returns / Sets the element's {{htmlattrxref("autocomplete", "input")}} attribute, indicating whether the value of the control can be automatically completed by the browser. Ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, checkbox, radio, file, or a button type (button, submit, reset, image). Possible values are:
+ on: the browser can autocomplete the value using previously stored value
+ off: the user must explicity enter a value
maxstring: Returns / Sets the element's {{ htmlattrxref("max", "input") }} attribute, containing the maximum (numeric or date-time) value for this item, which must not be less than its minimum ({{htmlattrxref("min","input")}} attribute) value.
maxLengthlong: Returns / Sets the element's {{ htmlattrxref("maxlength", "input") }} attribute, containing the maximum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
minstring: Returns / Sets the element's {{ htmlattrxref("min", "input") }} attribute, containing the minimum (numeric or date-time) value for this item, which must not be greater than its maximum ({{htmlattrxref("max","input")}} attribute) value.
minLengthlong: Returns / Sets the element's {{ htmlattrxref("minlength", "input") }} attribute, containing the minimum number of characters (in Unicode code points) that the value can have. (If you set this to a negative number, an exception will be thrown.)
patternstring: Returns / Sets the element's {{ htmlattrxref("pattern", "input") }} attribute, containing a regular expression that the control's value is checked against. Use the {{htmlattrxref("title","input")}} attribute to describe the pattern to help the user. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
placeholderstring: Returns / Sets the element's {{ htmlattrxref("placeholder", "input") }} attribute, containing a hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds. This attribute applies when the value of the {{htmlattrxref("type","input")}} attribute is text, search, tel, url or email; otherwise it is ignored.
readOnlyboolean: Returns / Sets the element's {{ htmlattrxref("readonly", "input") }} attribute, indicating that the user cannot modify the value of the control.
+ {{HTMLVersionInline(5)}}This is ignored if the value of the {{htmlattrxref("type","input")}} attribute is hidden, range, color, checkbox, radio, file, or a button type.
sizeunsigned long: Returns / Sets the element's {{ htmlattrxref("size", "input") }} attribute, which contains the visual size of the control. This value is in pixels unless the value of {{htmlattrxref("type","input")}} is text or password, in which case, it is an integer number of characters. Applies only when {{htmlattrxref("type","input")}} is set to text, search, tel, url, email, or password; otherwise it is ignored.
+ + + + + + + + + + + + + + + + + +
Properties that apply only to elements with type text/password/search/tel/url/week/month
selectionStartunsigned long: Returns / Sets the beginning index of the selected text. When nothing is selected, this returns the position of the text input cursor (caret) inside of the {{HTMLElement("input")}} element.
selectionEndunsigned long: Returns / Sets the end index of the selected text. When there's no selection, this returns the offset of the character immediately following the current text input cursor position.
selectionDirectionstring: Returns / Sets the direction in which selection occurred. Possible values are:
+ forward if selection was performed in the start-to-end direction of the current locale
+ backward for the opposite direction
+ none if the direction is unknown
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Properties not yet categorized
defaultValuestring: Returns / Sets the default value as originally specified in the HTML that created this object.
dirNamestring: Returns / Sets the directionality of the element.
accessKeystring: Returns a string containing a single character that switches input focus to the control when pressed.
list {{readonlyInline}}{{domxref("HTMLElement")}} object: Returns the element pointed by the {{ htmlattrxref("list", "input") }} attribute. The property may be null if no HTML element found in the same tree.
multiple{{jsxref("Boolean")}}: Returns / Sets the element's {{ htmlattrxref("multiple", "input") }} attribute, indicating whether more than one value is possible (e.g., multiple files).
files{{domxref("FileList")}} array: Returns the list of selected files.
{{domxref("HTMLInputElement.labels")}} {{readonlyInline}}{{domxref("NodeList")}} array: Returns a list of {{ HTMLElement("label") }} elements that are labels for this element.
stepstring: Returns / Sets the element's {{ htmlattrxref("step", "input") }} attribute, which works with {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
valueAsDate{{jsxref("Date")}} object: Returns / Sets the value of the element, interpreted as a date, or null if conversion is not possible.
valueAsNumberdouble: Returns the value of the element, interpreted as one of the following, in order: +
    +
  • A time value
    • +
  • A number
    • +
  • NaN if conversion is impossible
    • +
+
autocapitalize {{experimental_inline}}string: Defines the capitalization behavior for user input. Valid values are none, off, characters, words, or sentences.
inputmodeProvides a hint to browsers as to the type of virtual keyboard configuration to use when editing this element or its contents.
+ +
+
{{domxref("HTMLInputElement.align")}} {{obsolete_inline}}
+
string: Represents the alignment of the element. Use CSS instead.
+
{{domxref("HTMLInputElement.useMap")}} {{ obsolete_inline }}
+
string: Represents a client-side image map.
+
+ +

Methods

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{domxref("HTMLElement.blur()", "blur()")}}Removes focus from the input element; keystrokes will subsequently go nowhere.
{{domxref("HTMLElement.click()", "click()")}}Simulates a click on the input element.
{{domxref("HTMLElement.focus()", "focus()")}}Focuses on the input element; keystrokes will subsequently go to this element.
{{domxref("HTMLInputElement.select()", "select()")}}Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
{{domxref("HTMLInputElement.setSelectionRange()", "setSelectionRange()")}}Selects a range of text in the input element (but does not focus it).
{{domxref("HTMLInputElement.setRangeText()", "setRangeText()")}}Replaces a range of text in the input element with new text.
setCustomValidity()Sets a custom validity message for the element. If this message is not the empty string, then the element is suffering from a custom validity error, and does not validate.
checkValidity()Returns a {{jsxref("Boolean")}} that is false if the element is a candidate for constraint validation, and it does not satisfy its constraints. In this case, it also fires an {{event("invalid")}} event at the element. It returns true if the element is not a candidate for constraint validation, or if it satisfies its constraints.
reportValidity()Runs the checkValidity() method, and if it returns false (for an invalid input or no pattern attribute provided), then it reports to the user that the input is invalid in the same manner as if you submitted a form.
+ +
+
{{domxref("HTMLInputElement.stepDown()")}}
+
Decrements the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
{{domxref("HTMLInputElement.stepUp()")}}
+
Increments the {{htmlattrxref("value","input")}} by ({{htmlattrxref("step","input")}} * n), where n defaults to 1 if not specified. Throws an INVALID_STATE_ERR exception: +
    +
  • if the method is not applicable to for the current {{htmlattrxref("type","input")}} value.,
    • +
  • if the element has no {{htmlattrxref("step","input")}} value,
    • +
  • if the {{htmlattrxref("value","input")}} cannot be converted to a number,
    • +
  • if the resulting value is above the {{htmlattrxref("max","input")}} or below the {{htmlattrxref("min","input")}}.
    • +
+
+
{{domxref("HTMLInputElement.mozSetFileArray()")}} {{non-standard_inline}}
+
Sets the files selected on the input to the given array of {{domxref("File")}} objects. This is an alternative to mozSetFileNameArray() which can be used in frame scripts: a chrome script can open files as File objects and send them via message manager.
+
{{domxref("HTMLInputElement.mozGetFileNameArray()")}} {{non-standard_inline}}
+
Returns an array of all the file names from the input.
+
{{domxref("HTMLInputElement.mozSetFileNameArray()")}} {{non-standard_inline}}
+
Sets the filenames for the files selected on the input. Not for use in frame scripts, because it accesses the file system.
+
+ +

Events

+ +

Listen to these events using addEventListener() or by assigning an event listener to the oneventname property of this interface:

+ +
+
input
+
Fires when the value of an {{HTMLElement("input")}}, {{HTMLElement("select")}}, or {{HTMLElement("textarea")}} element has been changed. Note that this is actually fired on the {{domxref("HTMLElement")}} interface and also applies to contenteditable elements, but we've listed it here because it is most commonly used with form input elements.
+ Also available via the oninput event handler property.
+
invalid
+
Fired when an element does not satisfy its constraints during constraint validation.
+ Also available via the oninvalid event handler property.
+
search
+
Fired when a search is initiated on an {{HTMLElement("input")}} of type="search".
+ Also available via the onsearch event handler property.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmlinputelement", "HTMLInputElement")}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "forms.html#the-input-element", "HTMLInputElement")}}{{Spec2('HTML5 W3C')}}Technically, the tabindex and accesskey properties, as well as the blur(), click(), and focus() methods, are now defined on {{domxref("HTMLElement")}}.
+ The following properties are now obsolete: align and useMap.
+ The following properties have been added: autocomplete, autofocus, dirName, files, formAction, formEncType, formMethod, formNoValidate, formTarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectionDirection, selectionEnd, selectionStart, step, validationMessage, validity, valueAsDate, valueAsNumber, width, and willValidate.
+ The following methods have been added: checkValidity(), setCustomValidity(), setSelectionRange(), stepUp(), and stepDown().
{{SpecName('DOM2 HTML', 'html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM2 HTML')}}The size property is now an unsigned long. The type property must be entirely given in lowercase characters.
{{SpecName('DOM1', 'level-one-html.html#ID-6043025', 'HTMLInputElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.HTMLInputElement")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/htmlinputelement/select/index.html b/files/de/web/api/htmlinputelement/select/index.html new file mode 100644 index 0000000000..14354e31dc --- /dev/null +++ b/files/de/web/api/htmlinputelement/select/index.html @@ -0,0 +1,84 @@ +--- +title: HTMLInputElement.select() +slug: Web/API/HTMLInputElement/select +tags: + - Auswählen + - HTML + - JavaScript + - Méthode +translation_of: Web/API/HTMLInputElement/select +--- +
{{ APIRef("HTML DOM") }}
+ +

Die HTMLInputElement.select() Methode selektiert den gesamten Text innerhalb eines {{HTMLElement("textarea")}} oder innerhalb eines {{HTMLElement("input")}} Elements welches ein Textfeld enthält.

+ +

Syntax

+ +
element.select();
+ +

Beispiel

+ +

Klick in diesem Beispiel auf den Button um den gesamten Text innerhalb des <input> Elements zu selektieren.

+ +

HTML

+ +
<input type="text" id="text-box" size="20" value="Hallo Welt!">
+<button onclick="selectText()">Text auswählen</button>
+
+ +

JavaScript

+ +
function selectText() {
+  const input = document.getElementById('text-box');
+  input.focus();
+  input.select();
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Anmerkungen

+ +

Die Methode element.select() fokussiert den Input nicht zwingend, weshalb es oft zusammen mit {{domxref("HTMLElement.focus()")}} verwendet wird.

+ +

In Browsern in denen es nicht unterstützt wird ist es möglich es mit HTMLInputElement.setSelectionRange() (mit den Parametern 0 und der Länge des Werts des Inputs) zu ersetzen.

+ +
<input onClick="this.select();" value="Beispieltext" />
+<!-- gleichbedeutend mit -->
+<input onClick="this.setSelectionRange(0, this.value.length);" value="Beispieltext" />
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'forms.html#dom-textarea/input-select', 'select')}}{{Spec2('HTML WHATWG')}}
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.HTMLInputElement.select")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/htmlslotelement/assignednodes/index.html b/files/de/web/api/htmlslotelement/assignednodes/index.html new file mode 100644 index 0000000000..77ab2aef3d --- /dev/null +++ b/files/de/web/api/htmlslotelement/assignednodes/index.html @@ -0,0 +1,66 @@ +--- +title: HTMLSlotElement.assignedNodes() +slug: Web/API/HTMLSlotElement/assignedNodes +translation_of: Web/API/HTMLSlotElement/assignedNodes +--- +

{{APIRef("Shadow DOM API")}}

+ +

Die Eigenschaft assignedNodes() der Schnittstelle {{domxref("HTMLSlotElement")}} gibt die Reihenfolge der diesem Slot zugewiesenen Elemente oder alternativ den Fallback-Inhalt des Slots zurück.

+ +

Syntax

+ +
var assignedNodes[] = HTMLSlotElement.assignedNodes([options])
+ +

Parameter

+ +
+
options {{optional_inline}}
+
Ein Objekt, das Optionen für die zurückzugebenden Knoten festlegt. Die verfügbaren Optionen sind: +
    +
  • flatten: Ein {{jsxref('Boolean')}}, das angibt, ob die dem Slot zugewiesenen Elemente zurückgegeben werden sollen (wenn dieser Wert false ist) oder der Fallback-Inhalt des Slots (wenn dieser Wert true ist). Die Vorgabe ist false.
    • +
+
+
+ +

Rückgabewerte

+ +

Ein Array von Knoten.

+ +

Beispiele

+ +

Das folgende Schnippsel ist unserem Slotchange-Beispiel entnommen (siehe auch live).

+ +
let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});
+ +

Hier nehmen wir Verweise auf alle Slots und fügen dann einen Slotchange Event Listener zum zweiten Slot in der Vorlage hinzu - derjenige, dessen Inhalt im Beispiel geändert wird.

+ +

Jedes Mal, wenn sich das in den Slot eingefügte Element ändert, protokollieren wir einen Bericht an die Konsole, aus dem hervorgeht, welcher Slot sich geändert hat und was der neue Knoten im Slot ist.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','scripting.html#dom-slot-assignednodes','assignedNodes')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser Kompatibilität

+ +
+ + +

{{Compat("api.HTMLSlotElement.assignedNodes")}}

+
diff --git a/files/de/web/api/htmlslotelement/index.html b/files/de/web/api/htmlslotelement/index.html new file mode 100644 index 0000000000..2644171f01 --- /dev/null +++ b/files/de/web/api/htmlslotelement/index.html @@ -0,0 +1,67 @@ +--- +title: HTMLSlotElement +slug: Web/API/HTMLSlotElement +tags: + - API + - HTMLSlotElement + - Interface + - NeedsTranslation + - Reference + - TopicStub + - shadow dom +translation_of: Web/API/HTMLSlotElement +--- +

{{APIRef('Web Components')}}

+ +

The HTMLSlotElement interface of the Shadow DOM API enables access to the name and assigned nodes of an HTML {{HTMLElement("slot")}} element.

+ +

Properties

+ +
+
{{domxref('HTMLSlotElement.name')}}
+
{{domxref("DOMString")}}: Can be used to get and set the slot's name.
+
+ +

Methods

+ +
+
{{domxref('HTMLSlotElement.assignedNodes()')}}
+
Returns the sequence of elements assigned to this slot, or alternatively the slot's fallback content.
+
+ +

Examples

+ +

The following snippet is taken from our slotchange example (see it live also).

+ +
let slots = this.shadowRoot.querySelectorAll('slot');
+slots[1].addEventListener('slotchange', function(e) {
+  let nodes = slots[1].assignedNodes();
+  console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".');
+});
+ +

Here we grab references to all the slots, then add a slotchange event listener to the 2nd slot in the template — which is the one that keeps having its contents changed in the example.

+ +

Every time the element inserted in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','scripting.html#htmlslotelement','HTMLSlotElement')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLSlotElement")}}

diff --git a/files/de/web/api/htmltableelement/createcaption/index.html b/files/de/web/api/htmltableelement/createcaption/index.html new file mode 100644 index 0000000000..fb27bd6480 --- /dev/null +++ b/files/de/web/api/htmltableelement/createcaption/index.html @@ -0,0 +1,75 @@ +--- +title: HTMLTableElement.createCaption() +slug: Web/API/HTMLTableElement/createCaption +tags: + - API + - DOM + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/createCaption +--- +
{{APIRef("HTML DOM")}}
+ +

Die HTMLTableElement.createCaption() Methode gibt das {{HtmlElement("caption")}} Element zurück, das einer {{HtmlElement("table")}} zugeordnet ist. Wenn in der Tabelle noch kein <caption> Element existiert, wird es durch diese Methode erzeugt und dann zurückgegeben..

+ +
+

Anmerkung: Wenn noch keine Überschrift vorhanden ist, fügt createCaption() sie direkt in die Tabelle ein. Die Überschrift muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <caption> Element mittels {{domxref("Document.createElement()")}} erzeugt hätte.

+
+ +

Syntax

+ +
HTMLTableCaptionElement = table.createCaption();
+ +

Rückgabewert

+ +

{{domxref("HTMLTableCaptionElement")}}

+ +

Beispiel

+ +

Dieses Beispiel verwendet JavaScript, um eine Tabelle um eine Überschrift zu erweitern.

+ +

HTML

+ +
<table>
+  <tr><td>Cell 1.1</td><td>Cell 1.2</td><td>Cell 1.3</td></tr>
+  <tr><td>Cell 2.1</td><td>Cell 2.2</td><td>Cell 2.3</td></tr>
+</table>
+ +

JavaScript

+ +
let table = document.querySelector('table');
+let caption = table.createCaption();
+caption.textContent = 'Diese Überschrift wurde mit JavaScript erzeugt!';
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-table-createcaption', 'HTMLTableElement: createCaption')}}{{Spec2('HTML WHATWG')}}
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.HTMLTableElement.createCaption")}}

+
diff --git a/files/de/web/api/htmltableelement/index.html b/files/de/web/api/htmltableelement/index.html new file mode 100644 index 0000000000..696556f62f --- /dev/null +++ b/files/de/web/api/htmltableelement/index.html @@ -0,0 +1,132 @@ +--- +title: HTMLTableElement +slug: Web/API/HTMLTableElement +tags: + - API + - HTML DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/HTMLTableElement +--- +

{{APIRef("HTML DOM")}}

+ +

The HTMLTableElement interface provides special properties and methods (beyond the regular {{DOMxRef("HTMLElement")}} object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Properties

+ +

Inherits properties from its parent, {{DOMxRef("HTMLElement")}}.

+ +
+
{{DOMxRef("HTMLTableElement.caption")}}
+
Is a {{DOMxRef("HTMLTableCaptionElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <caption>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree as the first child of this element and the first <caption> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.tHead")}}
+
Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <thead>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element, and the first <thead> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.tFoot")}}
+
Is a {{DOMxRef("HTMLTableSectionElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element, or null if none is found. When set, if the object doesn't represent a <tfoot>, a {{DOMxRef("DOMException")}} with the HierarchyRequestError name is thrown. If a correct object is given, it is inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element, and the first <tfoot> that is a child of this element is removed from the tree, if any.
+
{{DOMxRef("HTMLTableElement.rows")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all the rows of the element, that is all {{HTMLElement("tr")}} that are a child of the element, or a child of one of its {{HTMLElement("thead")}}, {{HTMLElement("tbody")}} and {{HTMLElement("tfoot")}} children. The rows members of a <thead> appear first, in tree order, and those members of a <tbody> last, also in tree order. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
+
{{DOMxRef("HTMLTableElement.tBodies")}}{{ReadOnlyInline}}
+
Returns a live {{DOMxRef("HTMLCollection")}} containing all the {{HTMLElement("tbody")}} of the element. The HTMLCollection is live and is automatically updated when the HTMLTableElement changes.
+
+ +

Obsolete Properties

+ +
+

Warning: The following properties are obsolete.  You should avoid using them.

+
+ +
+
+
{{DOMxRef("HTMLTableElement.align")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing an enumerated value reflecting the {{HTMLAttrxRef("align", "table")}} attribute. It indicates the alignment of the element's contents with respect to the surrounding context. The possible values are "left", "right", and "center".
+
{{DOMxRef("HTMLTableElement.bgColor")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the background color of the cells. It reflects the obsolete {{HTMLAttrxRef("bgColor", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.border")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the border of the table. It reflects the obsolete {{HTMLAttrxRef("border", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.cellPadding")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical sapce between cell content and cell borders. It reflects the obsolete {{HTMLAttrxRef("cellpadding", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.cellSpacing")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the width in pixels of the horizontal and vertical separation between cells. It reflects the obsolete {{HTMLAttrxRef("cellspacing", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.frame")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the type of the external borders of the table. It reflects the obsolete {{HTMLAttrxRef("frame", "table")}} attribute and can take one of the following values: "void", "above", "below", "hsides", "vsides", "lhs", "rhs", "box", or "border".
+
{{DOMxRef("HTMLTableElement.rules")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the type of the internal borders of the table. It reflects the obsolete {{HTMLAttrxRef("rules", "table")}} attribute and can take one of the following values: "none", "groups", "rows", "cols", or "all".
+
{{DOMxRef("HTMLTableElement.summary")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing a description of the purpose or the structure of the table. It reflects the obsolete {{HTMLAttrxRef("summary", "table")}} attribute.
+
{{DOMxRef("HTMLTableElement.width")}} {{Obsolete_Inline}}
+
Is a {{DOMxRef("DOMString")}} containing the length in pixels or in percentage of the desired width fo the entire table. It reflects the obsolete {{HTMLAttrxRef("width", "table")}} attribute.
+
+
+ +

Methods

+ +

Inherits methods from its parent, {{DOMxRef("HTMLElement")}}.

+ +
+
{{DOMxRef("HTMLTableElement.createTHead()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("thead")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, nor a {{HTMLElement("colgroup")}}, or as the last child if there is no such element.
+
{{DOMxRef("HTMLTableElement.deleteTHead()")}}
+
Removes the first {{HTMLElement("thead")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.createTFoot()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("tfoot")}} that is a child of the element. If none is found, a new one is created and inserted in the tree immediately before the first element that is neither a {{HTMLElement("caption")}}, a {{HTMLElement("colgroup")}}, nor a {{HTMLElement("thead")}}, or as the last child if there is no such element.
+
{{DOMxRef("HTMLTableElement.deleteTFoot()")}}
+
Removes the first {{HTMLElement("tfoot")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.createCaption()")}}
+
Returns an {{DOMxRef("HTMLElement")}} representing the first {{HTMLElement("caption")}} that is a child of the element. If none is found, a new one is created and inserted in the tree as the first child of the {{HTMLElement("table")}} element.
+
{{DOMxRef("HTMLTableElement.deleteCaption()")}}
+
Removes the first {{HTMLElement("caption")}} that is a child of the element.
+
{{DOMxRef("HTMLTableElement.insertRow()")}}
+
Returns an {{DOMxRef("HTMLTableRowElement")}} representing a new row of the table. It inserts it in the rows collection immediately before the {{HTMLElement("tr")}} element at the given index position. If necessary a {{HTMLElement("tbody")}} is created. If the index is -1, the new row is appended to the collection. If the index is smaller than -1 or greater than the number of rows in the collection, a {{DOMxRef("DOMException")}} with the value IndexSizeError is raised.
+
{{DOMxRef("HTMLTableElement.deleteRow()")}}
+
Removes the row corresponding to the index given in parameter. If the index value is -1 the last row is removed; if it smaller than -1 or greater than the amount of rows in the collection, a {{DOMxRef("DOMException")}} with the value IndexSizeError is raised.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#htmltableelement", "HTMLTableElement")}}{{Spec2('HTML WHATWG')}}Added the sortable property and the stopSorting() method.
{{SpecName('HTML5 W3C', "tabular-data.html#the-table-element", "HTMLTableElement")}}{{Spec2('HTML5 W3C')}}Added the createTBody() method.
{{SpecName('DOM2 HTML', 'html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM2 HTML')}}Defined when caption, tHead, tFoot, insertRow(), and deleteRow() raise exceptions.
{{SpecName('DOM1', 'level-one-html.html#ID-64060425', 'HTMLTableElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browser compatibility

+ + + +

{{Compat("api.HTMLTableElement")}}

+ +

See also

+ + diff --git a/files/de/web/api/htmltableelement/insertrow/index.html b/files/de/web/api/htmltableelement/insertrow/index.html new file mode 100644 index 0000000000..869d185b98 --- /dev/null +++ b/files/de/web/api/htmltableelement/insertrow/index.html @@ -0,0 +1,122 @@ +--- +title: HTMLTableElement.insertRow() +slug: Web/API/HTMLTableElement/insertRow +tags: + - API + - HTML DOM + - HTMLTableElement + - Method + - Reference +translation_of: Web/API/HTMLTableElement/insertRow +--- +
{{APIRef("HTML DOM")}}
+ +

Die Methode HTMLTableElement.insertRow() fügt einer vorhandenen {{HtmlElement("table")}} eine neue Zeile ({{HtmlElement("tr")}}) hinzu und gibt eine Referenz auf die neue Zeile zurück.

+ +

Wenn eine Tabelle mehrere {{HtmlElement("tbody")}} Elemente besitzt, wird die neue Zeile standardmäßig dem letzten <tbody> hinzugefügt. Um sie einem bestimmten <tbody> Element hinzuzufügen, beschaffen Sie sich eine Referenz auf das gewünschte <tbody> Element und rufen Sie insertRow() auf diesem Element auf:

+ +
let bestimmter_tbody = document.getElementById(tbody_id);
+let zeile = bestimmter_tbody.insertRow(index)
+ + + +
+

Anmerkung: insertRow() fügt die Zeile direkt in die Tabelle ein. Die Zeile muss nicht eigens hinzugefügt werden, wie man es tun müsste, wenn man das <tr> Element mittels Document.createElement() erzeugt hätte.

+
+ +

Syntax

+ +
var neueZeile = HTMLTableElement.insertRow(index);
+ +

{{domxref("HTMLTableElement")}} ist eine Referenz auf ein HTML {{HtmlElement("table")}} Element.

+ +

Parameters

+ +
+
index {{optional_inline}}
+
Der Zeilenindex der neuen Zeile. Ist der Index -1 or gleich der Anzahl der vorhandenen Zeilen, wird die Zeile als letzte Zeile angefügt. Wenn index größer als die Anzahl vorhandener Zeilen ist, führt dies zi einer IndexSizeError Exception. Wird index weggelassen, ist der Standardwert -1.
+
+ +

Rückgabewert

+ +

neueZeile ist ein {{domxref("HTMLTableRowElement")}}, das die neue Zeile referenziert.

+ +

Beispiel

+ +

Dieses Beispiel verwendet insertRow(-1), um an eine Tabelle eine neue Zeile anzufügen.

+ +

Wir verwenden daraufhin {{domxref("HTMLTableRowElement.insertCell()")}}, um der neuen Zeile noch eine Zelle hinzufügen. (Um gültiges HTML zu sein, muss ein <tr> mindestens ein <td> Element enthalten.) Schließlich fügen wir der Zelle mittels {{domxref("Document.createTextNode()")}} und {{domxref("Node.appendChild()")}} Text hinzu.

+ +

HTML

+ +
<table id="my-table">
+  <tr><td>Row 1</td></tr>
+  <tr><td>Row 2</td></tr>
+  <tr><td>Row 3</td></tr>
+</table>
+ +

JavaScript

+ +
function addRow(tableID) {
+  // Beschaffe eine Referenz auf die Tabelle
+  let tableRef = document.getElementById(tableID);
+
+  // Füge am Ende der Tabelle eine neue Zeile an
+  let newRow = tableRef.insertRow(-1);
+
+  // Erstelle in der Zeile eine Zelle am Index 0
+  let newCell = newRow.insertCell(0);
+
+  // Füge der Zelle einen textnode hinzu
+  let newText = document.createTextNode('Neue letzte Zeile');
+  newCell.appendChild(newText);
+}
+
+// Rufe addRow() mit der ID der Tabelle auf
+addRow('my-table');
+ +

Result

+ +

{{EmbedLiveSample("Beispiel")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "tables.html#dom-table-insertrow", "HTMLTableElement.insertRow()")}}{{Spec2("HTML WHATWG")}}
{{SpecName("DOM2 HTML", "html.html#ID-93995626", "HTMLTableElement.insertRow()")}}{{Spec2("DOM2 HTML")}}Spezifiziert genauer, wo die Zeile eingefügt wird.
{{SpecName("DOM1", "level-one-html.html#ID-39872903", "HTMLTableElement.insertRow()")}}{{Spec2("DOM1")}}Initiale Definition
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.HTMLTableElement.insertRow")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/htmlunknownelement/index.html b/files/de/web/api/htmlunknownelement/index.html new file mode 100644 index 0000000000..d1f6107473 --- /dev/null +++ b/files/de/web/api/htmlunknownelement/index.html @@ -0,0 +1,56 @@ +--- +title: HTMLUnknownElement +slug: Web/API/HTMLUnknownElement +translation_of: Web/API/HTMLUnknownElement +--- +

{{APIRef("HTML DOM")}}

+ +

Die Schnittstelle HTMLUnknownElement stellt ein ungültiges HTML-Element dar und leitet sich von der Schnittstelle {{DOMxRef("HTMLElement")}} ab, ohne jedoch zusätzliche Eigenschaften oder Methoden zu implementieren.

+ +

{{InheritanceDiagram(600, 120)}}

+ +

Eigenschaften

+ +

Keine spezifische Eigenschaft; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.

+ +

Methoden

+ +

Keine spezifische Methode; erbt Eigenschaften von seinem übergeordneten Element, {{DOMxRef("HTMLElement")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName("HTML WHATWG", "elements.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML WHATWG")}}Keine Änderung von {{SpecName("HTML5 W3C")}}.
{{SpecName("HTML5 W3C", "dom.html#htmlunknownelement", "HTMLUnknownElement")}}{{Spec2("HTML5 W3C")}}Erstdefinition.
+ +
+

Browser-Kompatibilität

+
+ + + +

{{Compat("api.HTMLUnknownElement")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/index.html b/files/de/web/api/index.html new file mode 100644 index 0000000000..3173fac5cf --- /dev/null +++ b/files/de/web/api/index.html @@ -0,0 +1,14 @@ +--- +title: Web API Referenz +slug: Web/API +tags: + - API + - DOM + - JavaScript + - Reference + - Web +translation_of: Web/API +--- +

Javascript bietet eine große Auswahl an hervorragenden Schnittstellen (APIs). Nachfolgend findet sich eine Liste aller APIs auf die Du zurückgreifen kannst, um deine Webapp oder Webseite zu programmieren.

+ +
{{APIListAlpha}}
diff --git a/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html new file mode 100644 index 0000000000..436886fe21 --- /dev/null +++ b/files/de/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -0,0 +1,131 @@ +--- +title: Browser storage limits and eviction criteria +slug: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +tags: + - Datenbank + - Datenlöschung + - IndexDB + - Speicher + - Speicherung + - client-seitig +translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +

Es gibt eine Reihe von Web-Technologien, die Daten auf die eine oder andere Art und Weise client-seitig speichern (bspw. auf der lokalen Festplatte). Der Prozess, durch welchen der Browser bestimmt, wieviel Speicherplatz er der Webdatenspeicherung zur Verfügung stellen soll, und was gelöscht werden soll, wenn dieses Limit erreicht wurde, ist nicht einfach und unterscheidet sich zwischen verschiedenen Browsern. Dieser Artikel versucht zu erklären, wie dies funktioniert.

+ +
+

Info: Die untenstehenden Informationen sollten für die meisten modernen Browser zutreffen. Wo bekannt, werden browserspezifische Eigenheiten benannt. Opera und Chrome sollten sich in allen Fällen gleich verhalten. Opera Mini (noch presto-basiert, serverseitiges Rendering) speichert kein Daten lokal auf dem Client.

+
+ +

Welche Technologien nutzen Browser zur lokalen Datenspeicherung?

+ +

In Firefox werden die folgenden Technologien eingesetzt, um Daten lokal bei Bedarf zu sichern. Wir bezeichnen sie in diesem Zusammenhang als "Quota Clients" :

+ + + +
+

Info: In Firefox, Web Storage wird bald die gleichen Speichermanagement Tools wie in diesem Dokument beschrieben einsetzen.

+
+ +
+

Info: Im privaten Browsermodus werden die meisten Speichermethoden nicht unterstützt. Local storage Daten und Cookies werden zwar noch immer gespeichert, aber sie sind flüchtig — sie werden gelöscht, wenn das letzte private Browserfenster geschlossen wurde.

+
+ +

Die "letzte Zugriffszeit" der Quelle wird aufdatiert wenn irgendeine von ihnen aktiviert oder deaktiviert wird — die Löschung der Quelle löscht die Daten für alle diese "Quota Clients".

+ +

In Chrome/Opera kümmert sich die Quota Management API um das Quota Management für den AppCache, die IndexedDB, WebSQL und die File System API.

+ +

Unterschiedliche Typen der Datenspeicherung

+ +

Sogar wenn man die gleiche Speichermethode im gleichen Browser verwendet, muss man unterschiedliche Klassen der Datenspeicherung verstehen. Dieser Abschnitt behandelt die Unterschiede in verschiedenen Browsern.

+ +

Speicherung kann auf zwei Arten vorkommen:

+ + + +

Sobald persistente Daten gespeichert werden sollen, bekommt ein Benutzer in Firefox eine Popup-Warnung, um darauf hinzuweisen, dass die Daten dauerhaft gespeichert werden sollen und fragt gleichzeitig ab, ob er damit einverstanden ist. Temporäre Datenspeicherung löst nicht eine solche Warnung aus.

+ +

Datenspeicherung ist standardmäßig temporär. Entwickler können die Nutzung persistenten Speichers durch Aufruf der Methode {{domxref("StorageManager.persist()")}} aus der Storage API erreichen.

+ +

Wo werden die Daten gespeichert?

+ +

Jeder Speichertyp nutzt ein eigenes Repository. Hier ist ein konkretes Mapping auf die Verzeichnisse im Profil eines Firefox Benutzers (andere Browser können hiervon leicht abweichen):

+ + + +
+
+

Info: Nach Einführung der Storage API kann das "permanent" Verzeichnis als obsolet bestrachtet werden. Das "permanent" Verzeichnis beinhaltet nur noch persistente IndexedDB Datenbasen. Es macht keinen Unterschied, ob der box mode "best-effort" oder "persistent" ist — die Daten werden unter <profile>/storage/default abgelegt.

+
+
+ +
+

Info: In Firefox kann man sein Profilverzeichnis aufrufen, indem man about:support in die URL Adresszeile eingibt und den Ordner öffnen Knopf in der Zeile Profilordner drückt.

+
+ +
+

Info: Wenn man im Profilordner in den Datenspeicherordnern sucht, findet man noch einen vierten Ordner namens persistent. Der persistent Ordner wurde ursprünglich vor einer Weile in permanent umbenannt, um Upgrades und Migrationen zu vereinfachen.

+
+ +
+

Info: Benuter sollten unter dem Verzeichnis <profile>/storage keine eigenen dateien oder Verzeichnisse anlegen. Dies führt dazu, dass die Speicherinitialisierung fehlschlägt; zum Beispiel führt dann {{domxref("IDBFactory.open()", "open()")}} zu einem Fehlerevent.

+
+ +

Speichergrenzen

+ +

Der maximale Speicherplatz des Browsers ist dynamisch — er basiert auf der Größe der Festplatte. Das globale Limit berechnet sich als 50% des freien Plattenspeichers. In Firefox überwacht ein internes Tool namensQuota Manager wieviel Speicher jede Quelle nutzt und löscht gegebenenfalls Daten.

+ +

Wenn die Festplatte 500 GB freien Speicher aufweist, ist die maximale Größe des Speichers 250 GB. Wenn diese Größe überschritten wird, kommt ein Prozess namens origin eviction ins Spiel, welcher die kompletten Daten einzelner Quellen löscht, bis diese Größe wieder unterschritten wurde. Es werden nie Teile von Quellen gelöscht, da teilweise Daten einer Quelle zu Inkonsistenzen führen können.

+ +

Zudem gibt es eine weitere Begrenzung namens Gruppenlimit — dieses ist definiert als 20% des globalen Limits, aber hat ein Minimum von 10 MB und ein Maximum von 2 GB. Jede Quelle ist Teil einer Gruppe (Gruppe von Quellen). Es gibt eine Gruppe für jede eTLD+1 Domain. Zum Beispiel:

+ + + +

Innerhalb dieser Gruppe, mozilla.org, www.mozilla.org, und joe.blogs.mozilla.org können zusammen ein Maximum von 20% des globalen Limits nutzen. firefox.com hat als weitere Gruppe ein separates Maximum von 20%.

+ +

Beide Limits haben unterschiedliche Auswirkungen, wenn sie erreicht werden:

+ + + +
+

Info: Das Gruppenlimit kann nie mehr als das globale Limit sein. Bei extrem niedrigen Speicherstand von beispielsweisen 8MB globalen Limit, ist das Gruppenlimit ebenfalls nur 8MB.

+
+ +
+

Note: Wenn das Gruppenlimit überschritten wird oder eine ausgelöste automatische Datenlöschung nicht genug Speicher freiräumen kann, wirft der Browser einen QuotaExceededError.

+
+ +

LRU Policy

+ +

Wenn der verfügbare Speicherplatz aufgebnraucht wurde, startet das Quota Management eine Datenlöschung nach der LRU (Least Recently Used) Policy — die Daten der am längsten nicht benutzten Quellen werden zuerst gelöscht, dann die zweitältesten usw., bis der Browser wieder unter das Speicherlimit fällt.

+ +

Die letzte Zugriffszeit für jede Quelle wird im temporären Speicher vorgehalten. Sobald das globale Limit für temporären Speicher erreicht wurde,  (mehr dazu später), werden alle derzeit ungenutzten Quellen identifiziert (z.Bsp., ohne offene Tabs oder Apps, die aktuell auf den Datenspeicher zugreifen). Diese werden dann nach der letzten Zugriffszeit sortiert. Die am längsten ungenutzten Daten werden dann zuerst gelöscht, bis genug Speicher frei wird, dass die Operation ausgeführt werden kann, die zur Auslösung der Datenlöschung verantwortlich war.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html new file mode 100644 index 0000000000..6ae6f33dd7 --- /dev/null +++ b/files/de/web/api/indexeddb_api/grundkonzepte_hinter_indexeddb/index.html @@ -0,0 +1,194 @@ +--- +title: Grundkonzepte +slug: Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB +translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +--- +

IndexedDB ermöglicht es Ihnen Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Weil es Sie Webanwendungen mit funktionsreichen Abfragemöglichkeiten erstellen lässt, können diese Anwendungen sowohl online als auch offline funktionieren. IndexedDB ist geeignet für Anwendungen, die eine große Menge an Daten speichern (z.B. ein Katalog von DVDs in einer Videothek) und Anwendungen, die keine durchgehende Internetverbindung benötigen um zu funktionieren (z.B. E-Mail-Clients, To-Do-Listen oder Notizen).

+

Über dieses Dokument

+

Diese Einführung bespricht wesentliche Konzepte und Fachbegriffe in IndexedDB. Sie liefert Ihnen einen Gesamtüberblick und führt Sie in die Schlüsselkonzepte ein. Um mehr über die Begrifflichkeiten von IndexedDB zu erfahren, lesen Sie den Abschnitt Definitionen.

+

Eine Anleitung zur Verwendung der API finden Sie im Artikel Using IndexedDB. Eine Referenzdokumentierung der IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Objekttypen dokumentiert, die von IndexedDB verwendet werden, ebenso wie die Methoden von synchronen wie asynchronen APIs.

+

Überblick über IndexedDB

+

Mit IndexedDB lassen sich indizierte Objekte mit „Schlüsseln“ ablegen und abrufen. Alle Änderungen an der Datenbank geschehen innerhalb von Transaktionen. Wie die meisten Webspeicher-Lösungen folgt IndexedDB einer Same-Origin-Policy. Während also auf Daten, die innerhalb einer Domain gespeichert wurden, zugegriffen werden kann, kann nicht domainübergreifend auf Daten zugegriffen werden.

+

Die API umfasst sowohl eine asynchrone API als auch eine synchrone API. Die asynchrone API kann für die meisten Fälle verwendet werden, auch für WebWorkers, während die synchrone API nur für den Gebrauch durch WebWorkers gedacht ist. Momentan wird die synchrone API von keinem der großen Browser unterstützt. Aber selbst wenn synchrone APIs unterstützt wären, würden Sie eher die asynchrone API verwenden, wenn Sie mit IndexedDB arbeiten.

+

IndexedDB ist eine Alternative zur WebSQL-Datenbank, welche vom W3C am 18. November 2010 als veraltet erklärt wurde. Während sowohl IndexedDB als auch WebSQL Lösungen zur Speicherung von Daten bieten, bieten sie nicht dieselben Funktionalitäten. WebSQL-Datenbank ist ein relationales Datenbankanfragesystem, IndexedDB hingegen ist ein indiziertes Tabellensystem.

+

Wichtige Konzepte

+

Wenn Sie die Arbeit mit anderen Datenbanksystemen gewohnt sind kann die Arbeit mit IndexedDB am Anfang ungewohnt erscheinen. Behalten Sie deshalb folgende wichtige Konzepte im Hinterkopf:

+ +

Definitionen

+

Dieser Abschitt definiert und erklärt Begriffe, die in der IndexedDB-API verwendet werden.

+

Datenbank

+
+
+ Datenbank
+
+ Ein Aufbewahrungsort für Informationen, typischerweise bestehend aus einem oder mehreren Objektspeichern. Jede Datenbank muss folgende Angaben enthalten: +
    +
  • Name. Er identifiziert die Datenbank innerhalb einer konkreten Herkunft und verändert sich nicht innerhalb seiner Lebenszeit. Der Name kann aus einem beliebigen String-Wert bestehen (einschließlich dem leeren String).
    • +
  • +

    Aktuelle Version. Wenn eine Datenbank zum ersten Mal erstellt wird, nimmt ihre Version den integer-Wert 1 an, wenn nichts anderes angegeben wird. Jede Datenbank kann zu einem Zeitpunkt nur eine Version haben.

    +
    • +
+
+
+ Objektspeicher
+
+

Das Instrument, mit welchem Daten in einer Datenbank gespeichert werden. Der Objektspeicher hält Eintragungen aus Schlüssel-Wert-Paaren permanent. Eintragungen innerhalb eines Objektspeichers werden entsprechend der Schlüssel in aufsteigender Reihenfolge sortiert.

+

Jeder Objektspeicher muss einen Namen haben, der innerhalb seiner Datenbank einzigartig ist. Der Objektspeicher kann optional einen Schlüsselerzeuger und einen Schlüsselpfad besitzen. Wenn der Objektspeicher einen Schlüsselpfad hat, verwendet er in-line keys; ansonsten out-of-line keys.

+

Eine Referenzdokumentation zu Objektspeichern finden Sie unter IDBObjectStore oder IDBObjectStoreSync.

+
+
+ Version
+
+ Wenn eine Datenbank zum ersten Mal erstellt wird, ist ihre Versionsnummer die integer-Zahl 1. Jede Datenbank hat zu jedem Zeitpunkt genau eine Versionsnummer; eine Datenbank kann nicht in verschiedenen Versionen gleichzeitig existieren. Die Versionsnummer kann nur geändert werden, indem die Datenbank mit einer größeren Versionsnummer geöffnet wird als mit der aktuellen. Das wird die Transaktion versionchange starten und ein upgradeneeded Ereignis auslösen. Die einzige Stelle, an der das Schema der Datenbank geupdatet werden kann, ist innerhalb des Handlers dieses Ereignisses.
+  
+
+ Anmerkung: Diese Definition beschreibt die aktuellsten Spezifikationen, welche nur in Browsern auf dem neuesten Stand implementiert sind. In alten Browsern ist die mittlerweile veraltete und entfernte Methode IDBDatabase.setVersion() implementiert.
+
+ Datenbankverbindung
+
+ Eine Operation, die beim Öffnen einer Datenbank erstellt wird. Eine vorgegebene Datenbank kann mehrere Verbindungen gleichzeitig haben.
+
+ Transaktion
+
+

Eine nicht teilbare und dauerhafte Menge an Datenzugriffs- und Datenmodifikationsoperationen auf einer bestimmten Datenbank. Durch Transaktionen können Sie auf die Daten einer Datenbank zugreifen. Tatsächlich muss jeder Lese- oder Schreibvorgang von Daten in einer Transaktion stattfinden.
+
+ Eine Datenbankverbindung kann mit mehreren aktiven Transaktionen gleichzeitig verknüpft sein, so lange schreibende Transaktionen keine überlappenden scopes haben. The scope of transactions, which is defined at creation, determines which object stores the transaction can interact with and remains constant for the lifetime of the transaction. So, for example, if a database connection already has a writing transaction with a scope that just covers the flyingMonkey object store, you can start a second transaction with a scope of the unicornCentaur and unicornPegasus object stores. As for reading transactions, you can have several of them—even overlapping ones.

+

Transactions are expected to be short-lived, so the browser can terminate a transaction that takes too long, in order to free up storage resources that the long-running transaction has locked. You can abort the transaction, which rolls back the changes made to the database in the transaction. And you don't even have to wait for the transaction to start or be active to abort it.

+

The three modes of transactions are: readwrite, readonly, and versionchange. The only way to create and delete object stores and indexes is by using a versionchange transaction. To learn more about transaction types, see the reference article for IndexedDB.

+

Because everything happens within a transaction, it is a very important concept in IndexedDB. To learn more about transactions, especially on how they relate to versioning, see IDBTransaction, which also has reference documentation. For the documentation on the synchronous API, see IDBTransactionSync.

+
+
+ Anfrage
+
+ Die Operation, mit der Lese- und Schreibvorgänge auf einer Datenbank ausgeführt werden. Jede Anfrage repräsentiert eine Lese- oder Schreiboperation.
+
+ Index
+
+

Ein Spezialobjektspeicher zum Nachschlagen von Einträgen eines anderen Objektspeichers, bezeichnet als referenzierter Objektspeicher. Der Index ist ein persistenter Schlüssel-Wert-Speicher, wobei der Wert seiner Einträge dem Schlüssel eines Eintrages im referenzierten Objektspeicher entspricht. Die Einträge in einem Index werden automatisch eingepflegt, sobald Einträge im referenzierten Objekt eingefügt, aktualisiert oder entfernt werden. Jeder Eintrag in einem Index kann auf nur einen Eintrag in seinem referenzierten Objektspeicher zeigen, aber mehrere Indizes können auf denselben Objektspeicher verweisen. Wenn der Objektspeicher sich ändert, werden alle Indizes, die auf ihn verweisen, automatisch aktualisiert.

+

Alternativ können Einträge eines Objektspeichers mithilfe eines Schlüssels nachgeschlagen werden.

+

Um mehr über die Verwendung von Indizes zu erfahren, lesen Sie Using IndexedDB. Die Referenzdokumentation zu Indizes finden Sie unter IDBKeyRange.

+
+
+

Schlüssel und Wert

+
+
+ Schlüssel
+
+

Ein Datenwert über welchen abgelegte Werte aus dem Objektspeicher sortiert und ausgelesen werden können. Der Objektspeicher kann den Schlüssel aus einer dieser drei Quellen erlangen: Einem Schlüsselgenerator, einem Schlüsselpfad und einem explizit angegebem Wert. Der Schlüssel muss aus einem Datentyp bestehen, der eine Nummer hat, die größer ist als die des Schlüssel vor ihm. Jeder Eintrag in einem Objektspeicher muss einen innerhalb des gleichen Objektspeichers einzigartigen Schlüssel haben, deshalb können nicht mehrere Einträge mit demselben Schlüssel in einem vorgegebenem Objektspeicher vorliegen.
+
+ Ein Schlüssel kann einen der folgenden Typen haben: string, date, float und array. Bei Arrays kann der Schlüssel zwischen einem leeren Wert und unendlich liegen. Arrays können wiederum Arrays beinhalten. Es gibt keine Vorschrift nur Schlüssel der Typen string oder integer zu verwenden {{ fx_minversion_inline("11") }}.

+

Alternativ können Sie Einträge eines Objektspeichers auch mithilfe eines Index nachschlagen.

+
+
+ Schlüsselgenerator
+
+ Ein Mechanismus um neue Schlüssel in einer angeordneten Reihenfolge zu erzeugen. Wenn ein Objektspeicher über keinen Schlüsselgenerator verfügt, muss die Anwendung Schlüssel für zu speichernde Einträge zur Verfügung stellen. Generatoren werden nicht zwischen Speichern geteilt. Dies ist mehr ein Detail von Browserimplementierungen, da in der Webentwicklung nicht wirklich Schlüsselgeneratoren erzeugt oder auf sie zugegriffen wird.
+
+ in-line key
+
+ A key that is stored as part of the stored value. It is found using a key path. An in-line key can be generated using a generator. After the key has been generated, it can then be stored in the value using the key path or it can also be used as a key.
+
+ out-of-line key
+
+ A key that is stored separately from the value being stored.
+
+ key path
+
+ Defines where the browser should extract the key from a value in the object store or index. A valid key path can include one of the following: an empty string, a JavaScript identifier, or multiple JavaScript identifiers separated by periods. It cannot include spaces.
+
+ value
+
+

Each record has a value, which could include anything that can be expressed in JavaScript, including: boolean, number, string, date, object, array, regexp, undefined, and null.

+

When an object or array is stored, the properties and values in that object or array can also be anything that is a valid value.

+

Blobs and files can be stored, cf. specification {{ fx_minversion_inline("11") }}.

+
+
+

Range and scope

+
+
+ scope
+
+ The set of object stores and indexes to which a transaction applies. The scopes of read-only transactions can overlap and execute at the same time. On the other hand, the scopes of writing transactions cannot overlap. You can still start several transactions with the same scope at the same time, but they just queue up and execute one after another.
+
+ cursor
+
+ A mechanism for iterating over multiple records with a key range. The cursor has a source that indicates which index or object store it is iterating. It has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. For the reference documentation on cursors, see IDBCursor or IDBCursorSync.
+
+ key range
+
+

A continuous interval over some data type used for keys. Records can be retrieved from object stores and indexes using keys or a range of keys. You can limit or filter the range using lower and upper bounds. For example, you can iterate over all values of a key between x and y.

+

For the reference documentation on key range, see IDBKeyRange.

+
+
+

Limitations

+

IndexedDB is designed to cover most cases that need client-side storage. However, it is not designed for a few cases like the following:

+ +

In addition, be aware that browsers can wipe out the database, such as in the following conditions:

+ +

The exact circumstances and browser capabilities change over time, but the general philosophy of the browser vendors is to make the best effort to keep the data when possible.

+
+

Warning: At the moment due to bugs or on purpose it's impossible to open an IndexedDB database from a Web App. This needs more investigation and then be documented.

+
+

Next step

+

OK, so, now with these big concepts under our belts, we can get to more concrete stuff. For a tutorial on how to use the API, see Using IndexedDB.

+

See also

+

Specification

+ +

Reference

+ +

Tutorials

+ +

Related article

+ diff --git a/files/de/web/api/indexeddb_api/index.html b/files/de/web/api/indexeddb_api/index.html new file mode 100644 index 0000000000..171ca8a4c5 --- /dev/null +++ b/files/de/web/api/indexeddb_api/index.html @@ -0,0 +1,252 @@ +--- +title: IndexedDB +slug: Web/API/IndexedDB_API +tags: + - API + - Datenbank + - Einstieg + - IndexedDB + - NeedsTranslation + - Referenz + - Speicher + - TopicStub + - speichern +translation_of: Web/API/IndexedDB_API +--- +
{{DefaultAPISidebar("IndexedDB")}}
+ +

IndexedDB ist eine low-level API für die clientseitige Speicherung großer Mengen strukturierter Daten einschließlich Dateien. Sie erlaubt auch Hochleistungssuchen dieser Daten durch die Verwendung von Indizes. Während der DOM Speicher nützlich zur Speicherung kleiner Datenmengen ist, ist er für größere Mengen strukturierte Daten wenig hilfreich. IndexedDB stellt hierfür eine Lösung bereit. Dies ist die Einstiegsseite der IndexedDB Referenz von MDN — hier stellen wir Links zur vollständigen API Referenz, Gebrauchsanleitungen, Unterstützungsdetails der Browser und einige Erklärungen des Schlüsselkonzepts zur Verfügung.

+ +

{{AvailableInWorkers}}

+ +
+

Anmerkung: Die IndexedDB API ist leistungsfähig, kann aber für einfache Anwendungen zu kompliziert erscheinen. Wenn Du eine einfachere API bevorzugst, versuche Sammlungen wie localForage und dexie.js. Diese machen IndexedDB benutzerfreundlicher.

+
+ +
+

Anmerkung: Manche älteren Browser unterstützen IndexedDB nicht aber sie unterstützen WebSQL. Eine Möglichkeit dieses Problem zu umgehen ist es, mittels polyfill auf WebSQL oder auch auf localStorage für nicht unterstützende Browser zurückzugreifen. Das beste erhältiche polyfill ist derzeit localForage.

+
+ +

Schlüsselkonzepte und Gebrauch

+ +

IndexedDB ist ein direktes Datenbank System, wie ein SQL-basiertes RDMS; während allerdings das Letztere Tabellen mit fixen Spalten benutzt, ist IndexedDB eine JavaScript-basierte objekt-orientierte Datenbank. IndexedDB läßt dich Objekte, die mit einem Schlüssel indiziert sind, speichern und wiederfinden. Jedes Objekt, das von einem strukturierten Klon Algorithmus unterstützt wird, kann gespeichert werden. Du brauchst zum Beschreiben des Datenbankschemas eine offene Verbindung zu deiner Datenbank, dann kannst du Daten mit einer Reihe von Tranaktionen wiederfinden und aktualisieren.

+ + + +
+

Anmerkung: wie die meisten Web Speicher Lösungen folgt IndexedDB einem gleicher-Ursprung Grundsatz. Deshalb ist es nicht möglich auf Daten anderer Domänen zuzugreifen, während man auf gespeicherte Daten innerhalb einer Domäne zugreift.

+
+ +

Synchron und asynchron

+ +

Operationen unter Verwendung von IndexedDB werden asynchron durchgeführt, um Anwendungen nicht zu blockieren. IndexedDB beinhaltete ursprünglich eine asynchrone und eine synchrone API; die synchrone API war nur für den Gebrauch von Web Workers gedacht. Die synchrone Version wurde aus der Spezifikation entfernt, weil ihre Notwendigkeit fraglich war, aber sie kann in Zukunft wieder eingeführt werden, wenn es genug Nachfrage von Web Entwicklern gibt.

+ +

Speichergrenzen und Löschkriterien

+ +

Es gibt mehrere Webtechnologien, um Daten auf die eine oder andere Art auf der Client Seite zu speichern (d. h. auf deiner lokalen Festplatte), über IndexedDB wird dabei am häufigsten geredet. Der Prozess mit dem der Browser herausfindet, wieviel Speicherplatz Webdaten zur Verfügung gestellt werden soll und was gelöscht werden soll, wenn die Grenze erreicht ist, ist nicht einfach und unterscheidet sich zwischen den Browsern. Browser Speichergrenzen und Löschkriterien versuchen zu erklären, wie das geschieht - zumindest im Fall von Firefox.

+ +

IndexedDB Schnittstellen

+ +

Um Zugang zu einer Datenbank zu erhalten, benutze open() von den indexedDB Attributen eines window Objekts. Diese Methode gibt ein {{domxref("IDBRequest")}} Objekt zurück; asynchrone Operationen kommunizieren mit der aufrufenden Anwendung durch feuern von Events von {{domxref("IDBRequest")}} Objekten.

+ +

Mit einer Datenbank verbinden

+ +
+
{{domxref("IDBEnvironment")}}
+
Stellt den Zugang zur IndexedDB Funktionalität zur Verfügung. Es ist implementiert durch die {{domxref("window")}} und {{domxref("worker")}} Objekte.
+
{{domxref("IDBFactory")}}
+
Stellt den Zugang zu einer Datenbank bereit. Dies ist die durch das globale Objekt indexedDB bereitgestellte Schnittstelle und dadurch der Eingangspunkt für die API.
+
{{domxref("IDBOpenDBRequest")}}
+
Stellt eine Anfrage zum Öffnen einer Datenbank dar.
+
{{domxref("IDBDatabase")}}
+
Repräsentiert eine Verbindung zu einer Datenbank. Es ist der einzige Weg eine Transaktion in der Datenbank zu erreichen.
+
+ +
+
{{domxref("IDBRequest")}}
+
Eine allgemeine Schnittstelle, die Datenbankabfragen behandelt und den Zugang zu Ergebnissen bereitstellt.
+
+ +

Abrufen und modifizieren von Daten

+ +
+
{{domxref("IDBTransaction")}}
+
Stellt eine Transaktion dar. Du erstellst eine Transaktion zu einer Datenbank, beschreibst den Geltungsbereich (beispielsweise auf welchen Objekt Speicher du zugreifen willst), und bestimmst die Art des Zugriffs (nur lesen oder lesen und schreiben), den du willst.
+
{{domxref("IDBObjectStore")}}
+
Steht für einen Objektspeicher, der Zugriff auf einen Datensatz in einer IndexedDB Datenbank erlaubt via Primärschlüsselsuche.
+
{{domxref("IDBIndex")}}
+
Gestattet ebenfalls Zugriff auf eine Teilmenge von Daten in einer IndexedDB Datenbank. Nutzt allerdings einen Index anstelle eines Primärschlüssels um an Einträge zu gelangen. Dies kann schneller sein als die Verwendung von {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBCursor")}}
+
Iterates over object stores and indexes.
+
{{domxref("IDBCursorWithValue")}}
+
Iterates over object stores and indexes and returns the cursor's current value.
+
{{domxref("IDBKeyRange")}}
+
Defines a key range that can be used to retrieve data from a database in a certain range.
+
{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}
+
Defines a key range that can be used to retrieve data from a database in a certain range, sorted acording to the rules of the locale specified for a certain index (see createIndex()'s optionalParameters.).
+
+ +

Custom event interfaces

+ +

This specification fires events with the following custom interface:

+ +
+
{{domxref("IDBVersionChangeEvent")}}
+
The IDBVersionChangeEvent interface indicates that the version of the database has changed, as the result of an {{domxref("IDBOpenDBRequest.onupgradeneeded")}} event handler function.
+
+ +

Obsolete interfaces

+ +

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

+ +
+
{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}
+
Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling {{domxref("IDBFactory.open")}} without also calling {{domxref("IDBDatabase.setVersion")}}), and the interface {{domxref("IDBOpenDBRequest")}} now has the functionality of the removed {{domxref("IDBVersionChangeRequest")}}.
+
{{domxref("IDBDatabaseException")}} {{obsolete_inline}}
+
Represents exception conditions that can be encountered while performing database operations.
+
{{domxref("IDBTransactionSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBTransaction")}}.
+
{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBObjectStore")}}.
+
{{domxref("IDBIndexSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBIndex")}}.
+
{{domxref("IDBFactorySync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBFactory")}}.
+
{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBEnvironment")}}.
+
{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBDatabase")}}.
+
{{domxref("IDBCursorSync")}} {{obsolete_inline}}
+
Sync version of {{domxref("IDBCursor")}}.
+
+ +

Examples

+ + + +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('IndexedDB', '#idl-def-IDBEnvironment', 'IDBEnvironment')}}{{Spec2('IndexedDB')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support +

23.0 {{property_prefix("webkit")}}
+ 24

+ 		{{CompatGeckoDesktop("10.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}}		10, partial157.1
Available in workers{{CompatVersionUnknown}}{{CompatGeckoDesktop("37.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatGeckoDesktop("43.0")}}[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support4.4{{CompatGeckoMobile("22.0")}}1.0.110228
Available in workers{{CompatVersionUnknown}}{{CompatGeckoMobile("37.0")}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
IDBLocaleAwareKeyRange{{CompatNo}}{{CompatGeckoMobile("43.0")}}[2]2.5[2]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ + + +

See also

+ + diff --git a/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html new file mode 100644 index 0000000000..3d6d61cf3f --- /dev/null +++ b/files/de/web/api/indexeddb_api/indexeddb_verwenden/index.html @@ -0,0 +1,1180 @@ +--- +title: Verwendung von IndexedDB +slug: Web/API/IndexedDB_API/IndexedDB_verwenden +translation_of: Web/API/IndexedDB_API/Using_IndexedDB +--- +

Mit IndexedDB lassen sich Daten innerhalb des Browsers eines Benutzers permanent abzulegen. Es können so Webanwendungen mit funktionsreichen Abfragemöglichkeiten in Anwendungen erstellt werden, die sowohl online als auch offline funktionieren können, da keine Netzwerkfunktionalitäten benötigt werden.

+ +

Über dieses Dokument

+ +

Dieses Tutorial bespricht die Verwendung der asynchronen API von IndexedDB. Wenn Sie nicht mit IndexedDB vertraut sind, sollten Sie zuerst den Artikel Grundkonzepte lesen.

+ +

Eine Referenzdokumentation zur IndexedDB-API finden Sie im Artikel IndexedDB und dessen Unterseiten, welche die Typen und Objekten dokumentieren, die von IndexedDB verwendet werden, ebenso wie die Methoden von sowohl synchronen als auch asynchronen APIs.

+ +

Grundschema

+ +

Das von IndexedDB unterstützte Grundschema sieht folgendermaßen aus:

+ +
    +
  1. Öffne eine Datenbank und starte eine Transaktion.
    2. +
  2. Erzeuge einen Objektspeicher.
    3. +
  3. Fordere die Ausführung von Datenbankoperationen an, wie das Hinzufügen und Auslesen von Daten.
    4. +
  4. Warte auf die richtige Art von DOM-Ereignis, das auftritt, wenn die Operation beendet ist.
    5. +
  5. Verarbeite die Ergebnisse? (, welche im Anforderungsobjekt gefunden werden können).
    6. +
+ +

Mit dem Wissen über diese Grundkonzepte können wir uns nun konkreteren Dingen zuwenden.

+ +

Erzeugung und Strukturierung des Speichers

+ +

Weil sich die Spezifizierung noch in der Entwicklung befindet, verstecken sich aktuelle Implementierungen von IndexedDB unter Browserpräfixen. Bis sich die Spezifizierung verfestigt, könne Browserhersteller unterschiedliche Implementierungen der Standard-IndexedDB-API haben. Aber sobald Konsens auf dem Standard herrscht, implementieren die Hersteller ihn ohne Markierung durch Präfixe. Tatsächlich ist in manchen Implementierungen der Präfix entfernt: Internet Explorer 10, Firefox 16, Chrome 24. Wenn auf Gecko basierende Browser einen Präfix verwenden, dann verwenden sie den Präfix moz, während auf WebKit basierende Browser den Präfix webkit verwenden.

+ +

Verwendung einer experimentellen Version von IndexedDB

+ +

Für den Fall, dass Sie Ihren Code in Browsern verwenden wollen, die noch Präfixe verwenden, können Sie folgenden Code benutzen:

+ +
// In der folgenden Zeile sollten Sie die Präfixe einfügen, die Sie testen wollen.
+window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
+// Verwenden Sie "var indexedDB = ..." NICHT außerhalb einer Funktion.
+// Ferner benötigen Sie evtl. Referenzen zu einigen window.IDB* Objekten:
+window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
+window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
+// (Mozilla hat diese Objekte nie mit Präfixen versehen, also brauchen wir kein window.mozIDB*)
+ +

Beachten Sie, dass Implementierungen, die Präfixe verwenden, fehlerhaft oder unvollständig sein können oder einer alten Version der Spezifizierung folgen können. Deshalb ist es nicht empfohlen, sie im Produktivsystem zu verwenden. In manchen Fällen kann es sinnvoll sein, lieber einen Browser nicht zu unterstützen als zu behaupten, er würde unterstützt, und dann Fehler einzubüßen:

+ +
if (!window.indexedDB) {
+    window.alert("Ihr Browser unterstützt keine stabile Version von IndexedDB. Dieses und jenes Feature wird Ihnen nicht zur Verfügung stehen.");
+}
+
+ +

Öffnen einer Datenbank

+ +

Wir starten den ganzen Prozess folgendermaßen:

+ +
// Öffnen unserer Datenbank
+var request = window.indexedDB.open("MeineTestdatenbank", 3);
+
+ +

Sie sehen, das Öffnen einer Datenbank funktioniert wie jede andere Operation – Sie müssen sie „anfordern“.

+ +

Die Anforderung zum Öffnen öffnet nicht sofort die Datenbank und startet auch die Transaktion nicht gleich. Der Aufruf zur open() Funktion gibt ein IDBOpenDBRequest-Objekt mit Ergebniswert (Erfolg) oder Fehlerwert zurück, die Sie als Ereignis verarbeiten. Die meisten anderen asynchronen Funktionen in IndexedDB machen das gleiche – sie geben ein IDBRequest-Objekt mit Ergebnis oder Fehler zurück. Das Ergebnis für die open-Funktion ist eine Instanz einer IDBDatabase.

+ +

Der zweite Parameter der open-Methode ist die Version der Datenbank. Die Version der Datenbank bestimmt das Datenbankschema – den Objektspeichern und ihrer Strukturen. Wenn die angeforderte Version nicht existiert (weil die Datenbank neu ist, oder weil die Version aktualisiert wurde), wird das Ereignis onupgradeneeded ausgelöst, und es lässt sich eine neue Version der Datenbank im Handler für dieses Ereignis erzeugen. Mehr dazu später im Abschnitt Aktualisieren der Version der Datenbank.

+ +

Erzeugen von Handlern

+ +

Das erste, was Sie mit fast allen Anforderungen machen wollen, die Sie erzeugen, ist das Hinzufügen von Handlern für Erfolge und Fehler:

+ +
request.onerror = function(event) {
+  // Machen Sie etwas mit request.errorCode!
+};
+request.onsuccess = function(event) {
+  // Machen Sie etwas mit request.result!
+};
+ +

Welche der beiden Funktionen, onsuccess() oder onerror(), wird aufgerufen? Wenn alles fehlerfrei ablief, wird ein Erfolgsereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "success" gesetzt ist) mit request als target ausgelöst. Sobald es ausgelöst wurde, wird die Funktion onsuccess() auf request ausgelöst mit dem Erfolgsereignis als Argument. Wenn nicht alles fehlerfrei ablief, wird ein Fehlerereignis (d.h. ein DOM-Ereignis, dessen type Eigenschaft auf "error" gesetzt ist) auf request ausgelöst. Dies löst die Funktion onerror() aus mit dem Fehlerereignis als Argument.

+ +

Die IndexedDB-API ist so entworfen, dass sie die Notwendigkeit zur Fehlerbehandlung minimiert, also werden Sie wahrscheinlich nicht viele Fehlerereignisse sehen (zumindest nicht nachdem Sie sich an die API gewöhnt haben!). Beim Öffnen von Datenbanken jedoch gibt es ein paar typische Zustände, die Fehlerereignisse erzeugen. Das wahrscheinlichste Problem ist, dass der Benutzer festgelegt hat, den Webapps das Erzeugen von Datenbanken nicht zu erlauben. Eines der Hauptentwurfsziele von IndexedDB ist es, das Speichern von großen Datenmengen zur Offline-Verwendung zu erlauben. (Um mehr darüber zu erfahren, wieviel Speicher jedem Browser zur Verfügung steht, lesen Sie Storage limits).

+ +

Offensichtlich wollen Browser nicht irgendeinem Werbenetzwerk oder einer böswilligen Website erlauben, Ihren Computer zu verschmutzen, deshalb warnen Browser den Benutzer, wenn eine Webapp zum ersten Mal versucht einen IndexedDB-Speicher zu öffnen. Der Benutzer kann wählen, ob er den Zugriff erlaubt oder verbietet. Außerdem ist IndexedDB komplett deaktiviert im Privaten Modus der Browser (Privater Modus für Firefox und Incognito Modus für Chrome). Der Hauptzweck vom Surfen im Privaten Modus ist es, keine Spuren zu hinterlassen, daher schlägt der Versuch fehl, eine Datenbank in diesem Modus zu öffnen.

+ +

Nun nehmen wir an, dass der Benutzer Ihren Anfragen erlaubt hat, eine Datenbank zu erstellen, und Sie haben ein Erfolgsereignis erhalten, um den Erfolgs-Callback auszulösen; was kommt als nächstes? Die Anfrage wurde hier mit einem Aufruf von indexedDB.open() erzeugt, also ist request.result eine Instanz von IDBDatabase, und Sie wollen diese auf jeden Fall für später speichern. Ihr Code könnte etwa so aussehen:

+ +
var db;
+var request = indexedDB.open("MeineTestdatenbank");
+request.onerror = function(event) {
+  alert("Warum haben Sie meiner Webapp nicht erlaubt IndexedDB zu verwenden?!");
+};
+request.onsuccess = function(event) {
+  db = request.result;
+};
+
+ +

Fehlerbehandlung

+ +

Wie bereits oben erwähnt, werden Error events bei entsprechenden Fehlern ausgelöst und in der Objekthierarachie weiter nach oben gereicht. Solche Fehlerereignisse  werden zunächst in der entsprechende Anfrage ausgelöst, die den Fehler verursacht hat. Anschließend werden sie zur Transaktion weitergereicht und schließlich zum Datenbankobjekt.  Wenn man nicht für jede Anfrage einen Error-Handler schreiben möchte, kann man der Datenbank einen einzigen Error-Handler hinzufügen:

+ +
db.onerror = function(event) {
+  // Allgemeine Fehlerbehandlung, die für alle Anfragen an die Datenbank gilt.
+  alert("Datenbankfehler: " + event.target.errorCode);
+};
+
+ +

Einer der häufigsten Fehler, die beim Öffnen der Datenbank auftreten, ist  VER_ERR.  Er zeigt an, dass die Versionsnummer der lokal gespeicherten Datenbank  größer  als die Versionsnummer ist,  die man zu öffnen versucht. Ein solcher Fehler muss immer durch eine Fehlerbehandlung berücksichtigt werden.

+ +

Erstellen oder Updaten der Datenbank

+ +

Wenn eine neue Version der Datenbank erstellt wird, wird das onupgradeneeded Event ausgelöst. In der Handler-Funktion dieses Events musst du für die Erstellung der Datenbankspeicher, welche für diese Version benötigt wird, sorgen:

+ +
// Dieses Event ist lediglich in modernen Browsern verfügbar
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Erstelle ein ObjectStore für diese Datenbank
+  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
+};
+ +

The Versionsnummer der Datenbank ist vom Typ unsigned long long, so dass sie eine sehr große Ganzzahl sein kann.

+ +
+

Das Bedeutet auch, dass sie nicht vom Typ float sein darf,  ansonsten wird sie zur nächstkleineren Ganzzahl abgerundet, so dass die Transaktion weder starten kann noch ein  upgradeneeded ausgelöst wird. Beispielsweise sollte man nicht 2.4 als Versionsnummer verwenden:

+ +
var request = indexedDB.open("MeineTestdatenbank", 2.4); // don't do this, as the version will be rounded to 2
+
+ +

Wenn man die Versionsnummer der Datenbank erhöht, wird ein  onupgradeneeded -Ereignis ausgelöst. In diesem Fall übernimmt die neue Datenbank automatisch die Objectstores von der Vorgängerversion der Datenbank, so dass man diese nicht erneut erzeugen muss. Lediglich neue Objectsores müssen angelegt oder nicht mehr gebrauchte der Vorgängerversion gelöscht werden. Wenn man einen bereits existierenden Objectstore ändern will (beispielsweise den keyPath veränden), ist es allerdings notwendig, den alten Objectstore zu löschen und einen neuen anzulegen. (Beachten Sie, dass dies die im Objectstore gespeicherten Informationen löscht, so dass man sie vorher auslesen und an anderer Stelle sichern sollte, bevor man ein Datenbankupgrade durchführt.)

+ +

WebKit unterstützt die aktuelle Version dieser Spezifikation, wie sie in Chrome 23+ ausgeliefert wird, ebenso Opera 17+ und IE10+. Andere und ältere Implementierungen unterstützen nicht die aktuelle Version dieser Spezifikation und stellen damit auch noch nicht die Möglichkeit bereit, auf die Methodensignatur indexedDB.open(name, version).onupgradeneeded zugreifen zu könenn. Um ältere Versionen einer Datenbank auf neuer Versionen zu aktualisieren, siehe IDBDatabase reference article.

+ +

Strukturierung der Datenbank

+ +

Im Folgenden wird gezeigt, wie man eine die Daten  strukturiert. IndexedDB verwendet Objectstores anstatt Tabellen, wobei eine einzelne Datenbank viele verschiedene Objectsores enthalten kann. Jeglicher Wert im Objectstore ist einem bestimmten Schlüssel (key) zugeordnet. Es werden dabei unterschiedliche Arten von Schlüsseln verarbeitet, abhängig davon, ob der Objectstore  einen key path oder einen key generator benutzt.

+ +

Die folgende Tabelle gibt eine Übersicht über die bereitgestellten Arten von Schlüssseln.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Key PathKey GeneratorBeschreibung
NeinNeinDieser Objectstore kann Daten beliebigen Typs speichern, inklusive primitiven Typen wie Zahlen und Zeichenketten (Strings). Beim Hinzufügen von Werten muss ein separater Schlüssel angegeben werden.
JaNeinDieser Objectstore kann nur JavaScript-Objekte speichern. Die Objekte müssen ein Attribut haben, dass wie der key path benannt ist.
NeinJaDieser Objectstore kann Daten beliebigen Typs speichern. Beim Hinzufügen von Werten kann ein separater Schlüssel angegeben werden. Fehlt der Schlüssel, so wird er generiert.
JaJaDieser Objectstore kann nur JavaScript-Objekte speichern. In der Regel wird der Schlüssel automatisch generiert und als gleichnamiges Attribut im Objekt gespeichert. Falls es jedoch bereits ein Attribut mit dem Namen gibt, so wird der Schlüssel nicht generiert, sondern der Wert des Attributes wird verwendet.
+ +

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

+ +

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

+ +

That may sound confusing, but this simple example should illustrate the concepts:

+ +
// This is what our customer data looks like.
+const customerData = [
+  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
+  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
+];
+const dbName = "the_name";
+
+var request = indexedDB.open(dbName, 2);
+
+request.onerror = function(event) {
+  // Handle errors.
+};
+request.onupgradeneeded = function(event) {
+  var db = event.target.result;
+
+  // Create an objectStore to hold information about our customers. We're
+  // going to use "ssn" as our key path because it's guaranteed to be
+  // unique.
+  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
+
+  // Create an index to search customers by name. We may have duplicates
+  // so we can't use a unique index.
+  objectStore.createIndex("name", "name", { unique: false });
+
+  // Create an index to search customers by email. We want to ensure that
+  // no two customers have the same email, so use a unique index.
+  objectStore.createIndex("email", "email", { unique: true });
+
+  // Store values in the newly created objectStore.
+  for (var i in customerData) {
+    objectStore.add(customerData[i]);
+  }
+};
+
+ +

As mentioned previously, onupgradeneeded is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

+ +
Object stores are created with a single call to createObjectStore(). The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.
+ +

We've also asked for an index named "name" that looks at the name property of the stored objects. As with createObjectStore(), createIndex() takes an optional options object that refines the type of index that you want to create. Adding objects that don't have a name property still succeeds, but the object won't appear in the "name" index.

+ +

We can now retrieve the stored customer objects using their ssn from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

+ +

Hinzufügen und löschen von Daten

+ +

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it. Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

+ +

Daten zur Datenbank hinzufügen

+ +

If you've just created a database, then you probably want to write to it. Here's what that looks like:

+ +
var transaction = db.transaction(["customers"], "readwrite");
+// Note: Older experimental implementations use the deprecated constant IDBTransaction.READ_WRITE instead of "readwrite".
+// In case you want to support such an implementation, you can just write:
+// var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);
+ +

The transaction() function takes two arguments (though one is optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores, but don't do it because the spec says an empty array should generate an InvalidAccessError. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the "readwrite" flag.

+ +

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

+ +

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling preventDefault() on the error event, the entire transaction is rolled back. This design forces you to think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

+ +

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

+ +
// Do something when all the data is added to the database.
+transaction.oncomplete = function(event) {
+  alert("All done!");
+};
+
+transaction.onerror = function(event) {
+  // Don't forget to handle errors!
+};
+
+var objectStore = transaction.objectStore("customers");
+for (var i in customerData) {
+  var request = objectStore.add(customerData[i]);
+  request.onsuccess = function(event) {
+    // event.target.result == customerData[i].ssn;
+  };
+}
+ +

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the put() function.

+ +

Daten aus der Datenbank löschen

+ +

Löschen von Daten ist recht ähnlich:

+ +
var request = db.transaction(["customers"], "readwrite")
+                .objectStore("customers")
+                .delete("444-44-4444");
+request.onsuccess = function(event) {
+  // It's gone!
+};
+ +

Daten aus der Datenbank auslesen

+ +

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

+ +
var transaction = db.transaction(["customers"]);
+var objectStore = transaction.objectStore("customers");
+var request = objectStore.get("444-44-4444");
+request.onerror = function(event) {
+  // Handle errors!
+};
+request.onsuccess = function(event) {
+  // Do something with the request.result!
+  alert("Name for SSN 444-44-4444 is " + request.result.name);
+};
+ +

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

+ +
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
+  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
+};
+ +

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a "readwrite" transaction. Calling transaction() with no mode specified gives you a "readonly" transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property. Easy, right?!

+ +

Benutzung eines Cursors

+ +

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

+ +
var objectStore = db.transaction("customers").objectStore("customers");
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
+    cursor.continue();
+  }
+  else {
+    alert("No more entries!");
+  }
+};
+ +

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

+ +

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

+ +
var customers = [];
+
+objectStore.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    customers.push(cursor.value);
+    cursor.continue();
+  }
+  else {
+    alert("Got all customers: " + customers);
+  }
+};
+ +
Warnung: Die folgende Funktion ist nicht Teil des IndexedDB Standards.
+ +

Mozilla has also implemented getAll() to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

+ +
objectStore.getAll().onsuccess = function(event) {
+  alert("Got all customers: " + event.target.result);
+};
+ +

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll(), Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

+ +

Benutzung eines Index

+ +

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

+ +
var index = objectStore.index("name");
+index.get("Donna").onsuccess = function(event) {
+  alert("Donna's SSN is " + event.target.result.ssn);
+};
+ +

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

+ +

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

+ +
index.openCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
+    cursor.continue();
+  }
+};
+
+index.openKeyCursor().onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
+    // No way to directly get the rest of the stored object.
+    alert("Name: " + cursor.key + ", SSN: " + cursor.value);
+    cursor.continue();
+  }
+};
+ +

Specifying the range and direction of cursors

+ +

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

+ +
// Only match "Donna"
+var singleKeyRange = IDBKeyRange.only("Donna");
+
+// Match anything past "Bill", including "Bill"
+var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
+
+// Match anything past "Bill", but don't include "Bill"
+var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
+
+// Match anything up to, but not including, "Donna"
+var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
+
+//Match anything between "Bill" and "Donna", but not including "Donna"
+var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);
+
+index.openCursor(boundKeyRange).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the matches.
+    cursor.continue();
+  }
+};
+ +

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function:

+ +
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

+ +
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
+  var cursor = event.target.result;
+  if (cursor) {
+    // Do something with the entries.
+    cursor.continue();
+  }
+};
+ +

Versionsänderung während eine Webapplikation in einem anderen Tab geöffnet ist

+ +

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

+ +
var openReq = mozIndexedDB.open("MyTestDatabase", 2);
+
+openReq.onblocked = function(event) {
+  // If some other tab is loaded with the database, then it needs to be closed
+  // before we can proceed.
+  alert("Please close all other tabs with this site open!");
+};
+
+openReq.onupgradeneeded = function(event) {
+  // All other databases have been closed. Set everything up.
+  db.createObjectStore(/* ... */);
+  useDatabase(db);
+}
+
+openReq.onsuccess = function(event) {
+  var db = event.target.result;
+  useDatabase(db);
+  return;
+}
+
+function useDatabase(db) {
+  // Make sure to add a handler to be notified if another page requests a version
+  // change. We must close the database. This allows the other page to upgrade the database.
+  // If you don't do this then the upgrade won't happen until the user close the tab.
+  db.onversionchange = function(event) {
+    db.close();
+    alert("A new version of this page is ready. Please reload!");
+  };
+
+  // Do stuff with the database.
+}
+
+ +

Sicherheit

+ +

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

+ +

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.

+ +

Warnung über die Schließung des Browsers

+ +

When the browser shuts down (e.g., when the user selects Exit or clicks the Close button), any pending IndexedDB transactions are (silently) aborted -- they will not complete, and they will not trigger the error handler. Since the user can exit the browser at any time, this means that you cannot rely upon any particular transaction to complete or to know that it did not complete. There are several implications of this behavior.

+ +

First, you should take care to always leave your database in a consistent state at the end of every transaction. For example, suppose that you are using IndexedDB to store a list of items that you allow the user to edit. You save the list after the edit by clearing the object store and then writing out the new list. If you clear the object store in one transaction and write the new list in another transaction, there is a danger that the browser will close after the clear but before the write, leaving you with an empty database. To avoid this, you should combine the clear and the write into a single transaction.

+ +

Second, you should never tie database transactions to unload events. If the unload event is triggered by the browser closing, any transactions created in the unload event handler will never complete. An intuitive approach to maintaining some information across browser sessions is to read it from the database when the browser (or a particular page) is opened, update it as the user interacts with the browser, and then save it to the database when the browser (or page) closes. However, this will not work. The database transactions will be created in the unload event handler, but because they are asynchronous they will be aborted before they can execute.

+ +

In fact, there is no way to guarantee that IndexedDB transactions will complete, even with normal browser shutdown. See {{ bug(870645) }}.

+ +

Vollständiges IndexedDB Beispiel

+ +

HTML Content

+ +
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+
+    <h1>IndexedDB Demo: storing blobs, e-publication example</h1>
+    <div class="note">
+      <p>
+        Works and tested with:
+      </p>
+      <div id="compat">
+      </div>
+    </div>
+
+    <div id="msg">
+    </div>
+
+    <form id="register-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-title" class="required">
+                Title:
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-title" name="pub-title" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-biblioid" class="required">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid" name="pub-biblioid"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-year">
+                Year:
+              </label>
+            </td>
+            <td>
+              <input type="number" id="pub-year" name="pub-year" />
+            </td>
+          </tr>
+        </tbody>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-file">
+                File image:
+              </label>
+            </td>
+            <td>
+              <input type="file" id="pub-file"/>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="pub-file-url">
+                Online-file image URL:<br/>
+                <span class="note">(same origin URL)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-file-url" name="pub-file-url"/>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div class="button-pane">
+        <input type="button" id="add-button" value="Add Publication" />
+        <input type="reset" id="register-form-reset"/>
+      </div>
+    </form>
+
+    <form id="delete-form">
+      <table>
+        <tbody>
+          <tr>
+            <td>
+              <label for="pub-biblioid-to-delete">
+                Bibliographic ID:<br/>
+                <span class="note">(ISBN, ISSN, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="pub-biblioid-to-delete"
+                     name="pub-biblioid-to-delete" />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label for="key-to-delete">
+                Key:<br/>
+                <span class="note">(for example 1, 2, 3, etc.)</span>
+              </label>
+            </td>
+            <td>
+              <input type="text" id="key-to-delete"
+                     name="key-to-delete" />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="button-pane">
+        <input type="button" id="delete-button" value="Delete Publication" />
+        <input type="button" id="clear-store-button"
+               value="Clear the whole store" class="destructive" />
+      </div>
+    </form>
+
+    <form id="search-form">
+      <div class="button-pane">
+        <input type="button" id="search-list-button"
+               value="List database content" />
+      </div>
+    </form>
+
+    <div>
+      <div id="pub-msg">
+      </div>
+      <div id="pub-viewer">
+      </div>
+      <ul id="pub-list">
+      </ul>
+    </div>
+
+ +

CSS Content

+ +
body {
+  font-size: 0.8em;
+  font-family: Sans-Serif;
+}
+
+form {
+  background-color: #cccccc;
+  border-radius: 0.3em;
+  display: inline-block;
+  margin-bottom: 0.5em;
+  padding: 1em;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+input {
+  padding: 0.3em;
+  border-color: #cccccc;
+  border-radius: 0.3em;
+}
+
+.required:after {
+  content: "*";
+  color: red;
+}
+
+.button-pane {
+  margin-top: 1em;
+}
+
+#pub-viewer {
+  float: right;
+  width: 48%;
+  height: 20em;
+  border: solid #d092ff 0.1em;
+}
+#pub-viewer iframe {
+  width: 100%;
+  height: 100%;
+}
+
+#pub-list {
+  width: 46%;
+  background-color: #eeeeee;
+  border-radius: 0.3em;
+}
+#pub-list li {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
+}
+
+#msg {
+  margin-bottom: 1em;
+}
+
+.action-success {
+  padding: 0.5em;
+  color: #00d21e;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.action-failure {
+  padding: 0.5em;
+  color: #ff1408;
+  background-color: #eeeeee;
+  border-radius: 0.2em;
+}
+
+.note {
+  font-size: smaller;
+}
+
+.destructive {
+  background-color: orange;
+}
+.destructive:hover {
+  background-color: #ff8000;
+}
+.destructive:active {
+  background-color: red;
+}
+
+ +

 

+ +

JavaScript Content

+ +
(function () {
+  var COMPAT_ENVS = [
+    ['Firefox', ">= 16.0"],
+    ['Google Chrome',
+     ">= 24.0 (you may need to get Google Chrome Canary), NO Blob storage support"]
+  ];
+  var compat = $('#compat');
+  compat.empty();
+  compat.append('<ul id="compat-list"></ul>');
+  COMPAT_ENVS.forEach(function(val, idx, array) {
+    $('#compat-list').append('<li>' + val[0] + ': ' + val[1] + '</li>');
+  });
+
+  const DB_NAME = 'mdn-demo-indexeddb-epublications';
+  const DB_VERSION = 1; // Use a long long for this value (don't use a float)
+  const DB_STORE_NAME = 'publications';
+
+  var db;
+
+  // Used to keep track of which view is displayed to avoid to uselessly reload it
+  var current_view_pub_key;
+
+  function openDb() {
+    console.log("openDb ...");
+    var req = indexedDB.open(DB_NAME, DB_VERSION);
+    req.onsuccess = function (evt) {
+      // Better use "this" than "req" to get the result to avoid problems with
+      // garbage collection.
+      // db = req.result;
+      db = this.result;
+      console.log("openDb DONE");
+    };
+    req.onerror = function (evt) {
+      console.error("openDb:", evt.target.errorCode);
+    };
+
+    req.onupgradeneeded = function (evt) {
+      console.log("openDb.onupgradeneeded");
+      var store = evt.currentTarget.result.createObjectStore(
+        DB_STORE_NAME, { keyPath: 'id', autoIncrement: true });
+
+      store.createIndex('biblioid', 'biblioid', { unique: true });
+      store.createIndex('title', 'title', { unique: false });
+      store.createIndex('year', 'year', { unique: false });
+    };
+  }
+
+  /**
+   * @param {string} store_name
+   * @param {string} mode either "readonly" or "readwrite"
+   */
+  function getObjectStore(store_name, mode) {
+    var tx = db.transaction(store_name, mode);
+    return tx.objectStore(store_name);
+  }
+
+  function clearObjectStore(store_name) {
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.clear();
+    req.onsuccess = function(evt) {
+      displayActionSuccess("Store cleared");
+      displayPubList(store);
+    };
+    req.onerror = function (evt) {
+      console.error("clearObjectStore:", evt.target.errorCode);
+      displayActionFailure(this.error);
+    };
+  }
+
+  function getBlob(key, store, success_callback) {
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var value = evt.target.result;
+      if (value)
+        success_callback(value.blob);
+    };
+  }
+
+  /**
+   * @param {IDBObjectStore=} store
+   */
+  function displayPubList(store) {
+    console.log("displayPubList");
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readonly');
+
+    var pub_msg = $('#pub-msg');
+    pub_msg.empty();
+    var pub_list = $('#pub-list');
+    pub_list.empty();
+    // Reseting the iframe so that it doesn't display previous content
+    newViewerFrame();
+
+    var req;
+    req = store.count();
+    // Requests are executed in the order in which they were made against the
+    // transaction, and their results are returned in the same order.
+    // Thus the count text below will be displayed before the actual pub list
+    // (not that it is algorithmically important in this case).
+    req.onsuccess = function(evt) {
+      pub_msg.append('<p>There are <strong>' + evt.target.result +
+                     '</strong> record(s) in the object store.</p>');
+    };
+    req.onerror = function(evt) {
+      console.error("add error", this.error);
+      displayActionFailure(this.error);
+    };
+
+    var i = 0;
+    req = store.openCursor();
+    req.onsuccess = function(evt) {
+      var cursor = evt.target.result;
+
+      // If the cursor is pointing at something, ask for the data
+      if (cursor) {
+        console.log("displayPubList cursor:", cursor);
+        req = store.get(cursor.key);
+        req.onsuccess = function (evt) {
+          var value = evt.target.result;
+          var list_item = $('<li>' +
+                            '[' + cursor.key + '] ' +
+                            '(biblioid: ' + value.biblioid + ') ' +
+                            value.title +
+                            '</li>');
+          if (value.year != null)
+            list_item.append(' - ' + value.year);
+
+          if (value.hasOwnProperty('blob') &&
+              typeof value.blob != 'undefined') {
+            var link = $('<a href="' + cursor.key + '">File</a>');
+            link.on('click', function() { return false; });
+            link.on('mouseenter', function(evt) {
+                      setInViewer(evt.target.getAttribute('href')); });
+            list_item.append(' / ');
+            list_item.append(link);
+          } else {
+            list_item.append(" / No attached file");
+          }
+          pub_list.append(list_item);
+        };
+
+        // Move on to the next object in store
+        cursor.continue();
+
+        // This counter serves only to create distinct ids
+        i++;
+      } else {
+        console.log("No more entries");
+      }
+    };
+  }
+
+  function newViewerFrame() {
+    var viewer = $('#pub-viewer');
+    viewer.empty();
+    var iframe = $('<iframe />');
+    viewer.append(iframe);
+    return iframe;
+  }
+
+  function setInViewer(key) {
+    console.log("setInViewer:", arguments);
+    key = Number(key);
+    if (key == current_view_pub_key)
+      return;
+
+    current_view_pub_key = key;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readonly');
+    getBlob(key, store, function(blob) {
+      console.log("setInViewer blob:", blob);
+      var iframe = newViewerFrame();
+
+      // It is not possible to set a direct link to the
+      // blob to provide a mean to directly download it.
+      if (blob.type == 'text/html') {
+        var reader = new FileReader();
+        reader.onload = (function(evt) {
+          var html = evt.target.result;
+          iframe.load(function() {
+            $(this).contents().find('html').html(html);
+          });
+        });
+        reader.readAsText(blob);
+      } else if (blob.type.indexOf('image/') == 0) {
+        iframe.load(function() {
+          var img_id = 'image-' + key;
+          var img = $('<img id="' + img_id + '"/>');
+          $(this).contents().find('body').html(img);
+          var obj_url = window.URL.createObjectURL(blob);
+          $(this).contents().find('#' + img_id).attr('src', obj_url);
+          window.URL.revokeObjectURL(obj_url);
+        });
+      } else if (blob.type == 'application/pdf') {
+        $('*').css('cursor', 'wait');
+        var obj_url = window.URL.createObjectURL(blob);
+        iframe.load(function() {
+          $('*').css('cursor', 'auto');
+        });
+        iframe.attr('src', obj_url);
+        window.URL.revokeObjectURL(obj_url);
+      } else {
+        iframe.load(function() {
+          $(this).contents().find('body').html("No view available");
+        });
+      }
+
+    });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {string} url the URL of the image to download and store in the local
+   *   IndexedDB database. The resource behind this URL is subjected to the
+   *   "Same origin policy", thus for this method to work, the URL must come from
+   *   the same origin than the web site/app this code is deployed on.
+   */
+  function addPublicationFromUrl(biblioid, title, year, url) {
+    console.log("addPublicationFromUrl:", arguments);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open('GET', url, true);
+    // Setting the wanted responseType to "blob"
+    // http://www.w3.org/TR/XMLHttpRequest2/#the-response-attribute
+    xhr.responseType = 'blob';
+    xhr.onload = function (evt) {
+                           if (xhr.status == 200) {
+                             console.log("Blob retrieved");
+                             var blob = xhr.response;
+                             console.log("Blob:", blob);
+                             addPublication(biblioid, title, year, blob);
+                           } else {
+                             console.error("addPublicationFromUrl error:",
+                                           xhr.responseText, xhr.status);
+                           }
+                         };
+    xhr.send();
+
+    // We can't use jQuery here because as of jQuery 1.8.3 the new "blob"
+    // responseType is not handled.
+    // http://bugs.jquery.com/ticket/11461
+    // http://bugs.jquery.com/ticket/7248
+    // $.ajax({
+    //   url: url,
+    //   type: 'GET',
+    //   xhrFields: { responseType: 'blob' },
+    //   success: function(data, textStatus, jqXHR) {
+    //     console.log("Blob retrieved");
+    //     console.log("Blob:", data);
+    //     // addPublication(biblioid, title, year, data);
+    //   },
+    //   error: function(jqXHR, textStatus, errorThrown) {
+    //     console.error(errorThrown);
+    //     displayActionFailure("Error during blob retrieval");
+    //   }
+    // });
+  }
+
+  /**
+   * @param {string} biblioid
+   * @param {string} title
+   * @param {number} year
+   * @param {Blob=} blob
+   */
+  function addPublication(biblioid, title, year, blob) {
+    console.log("addPublication arguments:", arguments);
+    var obj = { biblioid: biblioid, title: title, year: year };
+    if (typeof blob != 'undefined')
+      obj.blob = blob;
+
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req;
+    try {
+      req = store.add(obj);
+    } catch (e) {
+      if (e.name == 'DataCloneError')
+        displayActionFailure("This engine doesn't know how to clone a Blob, " +
+                             "use Firefox");
+      throw e;
+    }
+    req.onsuccess = function (evt) {
+      console.log("Insertion in DB successful");
+      displayActionSuccess();
+      displayPubList(store);
+    };
+    req.onerror = function() {
+      console.error("addPublication error", this.error);
+      displayActionFailure(this.error);
+    };
+  }
+
+  /**
+   * @param {string} biblioid
+   */
+  function deletePublicationFromBib(biblioid) {
+    console.log("deletePublication:", arguments);
+    var store = getObjectStore(DB_STORE_NAME, 'readwrite');
+    var req = store.index('biblioid');
+    req.get(biblioid).onsuccess = function(evt) {
+      if (typeof evt.target.result == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      deletePublication(evt.target.result.id, store);
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublicationFromBib:", evt.target.errorCode);
+    };
+  }
+
+  /**
+   * @param {number} key
+   * @param {IDBObjectStore=} store
+   */
+  function deletePublication(key, store) {
+    console.log("deletePublication:", arguments);
+
+    if (typeof store == 'undefined')
+      store = getObjectStore(DB_STORE_NAME, 'readwrite');
+
+    // As per spec http://www.w3.org/TR/IndexedDB/#object-store-deletion-operation
+    // the result of the Object Store Deletion Operation algorithm is
+    // undefined, so it's not possible to know if some records were actually
+    // deleted by looking at the request result.
+    var req = store.get(key);
+    req.onsuccess = function(evt) {
+      var record = evt.target.result;
+      console.log("record:", record);
+      if (typeof record == 'undefined') {
+        displayActionFailure("No matching record found");
+        return;
+      }
+      // Warning: The exact same key used for creation needs to be passed for
+      // the deletion. If the key was a Number for creation, then it needs to
+      // be a Number for deletion.
+      req = store.delete(key);
+      req.onsuccess = function(evt) {
+        console.log("evt:", evt);
+        console.log("evt.target:", evt.target);
+        console.log("evt.target.result:", evt.target.result);
+        console.log("delete successful");
+        displayActionSuccess("Deletion successful");
+        displayPubList(store);
+      };
+      req.onerror = function (evt) {
+        console.error("deletePublication:", evt.target.errorCode);
+      };
+    };
+    req.onerror = function (evt) {
+      console.error("deletePublication:", evt.target.errorCode);
+      };
+  }
+
+  function displayActionSuccess(msg) {
+    msg = typeof msg != 'undefined' ? "Success: " + msg : "Success";
+    $('#msg').html('<span class="action-success">' + msg + '</span>');
+  }
+  function displayActionFailure(msg) {
+    msg = typeof msg != 'undefined' ? "Failure: " + msg : "Failure";
+    $('#msg').html('<span class="action-failure">' + msg + '</span>');
+  }
+  function resetActionStatus() {
+    console.log("resetActionStatus ...");
+    $('#msg').empty();
+    console.log("resetActionStatus DONE");
+  }
+
+  function addEventListeners() {
+    console.log("addEventListeners");
+
+    $('#register-form-reset').click(function(evt) {
+      resetActionStatus();
+    });
+
+    $('#add-button').click(function(evt) {
+      console.log("add ...");
+      var title = $('#pub-title').val();
+      var biblioid = $('#pub-biblioid').val();
+      if (!title || !biblioid) {
+        displayActionFailure("Required field(s) missing");
+        return;
+      }
+      var year = $('#pub-year').val();
+      if (year != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (isNaN(year))  {
+          displayActionFailure("Invalid year");
+          return;
+        }
+        year = Number(year);
+      } else {
+        year = null;
+      }
+
+      var file_input = $('#pub-file');
+      var selected_file = file_input.get(0).files[0];
+      console.log("selected_file:", selected_file);
+      // Keeping a reference on how to reset the file input in the UI once we
+      // have its value, but instead of doing that we rather use a "reset" type
+      // input in the HTML form.
+      //file_input.val(null);
+      var file_url = $('#pub-file-url').val();
+      if (selected_file) {
+        addPublication(biblioid, title, year, selected_file);
+      } else if (file_url) {
+        addPublicationFromUrl(biblioid, title, year, file_url);
+      } else {
+        addPublication(biblioid, title, year);
+      }
+
+    });
+
+    $('#delete-button').click(function(evt) {
+      console.log("delete ...");
+      var biblioid = $('#pub-biblioid-to-delete').val();
+      var key = $('#key-to-delete').val();
+
+      if (biblioid != '') {
+        deletePublicationFromBib(biblioid);
+      } else if (key != '') {
+        // Better use Number.isInteger if the engine has EcmaScript 6
+        if (key == '' || isNaN(key))  {
+          displayActionFailure("Invalid key");
+          return;
+        }
+        key = Number(key);
+        deletePublication(key);
+      }
+    });
+
+    $('#clear-store-button').click(function(evt) {
+      clearObjectStore();
+    });
+
+    var search_button = $('#search-list-button');
+    search_button.click(function(evt) {
+      displayPubList();
+    });
+
+  }
+
+  openDb();
+  addEventListeners();
+
+})(); // Immediately-Invoked Function Expression (IIFE)
+
+ +

{{ LiveSampleLink('Full_IndexedDB_example', "Test the online live demo") }}

+ +

Nächster Schritt

+ +

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

+ +

Siehe auch

+ +

Reference

+ + + +

Tutorials

+ + + +

Related articles

+ + + +

Firefox

+ + diff --git a/files/de/web/api/keyboardevent/altkey/index.html b/files/de/web/api/keyboardevent/altkey/index.html new file mode 100644 index 0000000000..3f16f6d710 --- /dev/null +++ b/files/de/web/api/keyboardevent/altkey/index.html @@ -0,0 +1,118 @@ +--- +title: KeyboardEvent.altKey +slug: Web/API/KeyboardEvent/altKey +translation_of: Web/API/KeyboardEvent/altKey +--- +

{{APIRef("DOM Events")}}

+ +

Der Konstruktor KeyboardEvent.altKey hat die Eigenschaft {{jsxref("Boolean")}} und zeigt an ob alt Taste (Option oder ⌥ in OS X) gedrückt wurde (true) oder (false) nicht gerdrückt wurde, wenn das Ereignis eintritt.

+ +

Syntax

+ +
var altKeyPressed = instanceOfKeyboardEvent.altKey
+
+ +

Examples

+ +
<html>
+<head>
+<title>altKey example</title>
+
+<script type="text/javascript">
+
+function showChar(e){
+  alert(
+    "Key Pressed: " + String.fromCharCode(e.charCode) + "\n"
+    + "charCode: " + e.charCode + "\n"
+    + "ALT key pressed: " + e.altKey + "\n"
+  );
+}
+
+</script>
+</head>
+
+<body onkeypress="showChar(event);">
+<p>
+Press any character key,
+with or without holding down the ALT key.<br />
+You can also use the SHIFT key together with the ALT key.
+</p>
+</body>
+</html>
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-KeyboardEvent-altKey','KeyboardEvent.altkey')}}{{Spec2('DOM3 Events')}}Initial definition.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

See also

+ + diff --git a/files/de/web/api/keyboardevent/getmodifierstate/index.html b/files/de/web/api/keyboardevent/getmodifierstate/index.html new file mode 100644 index 0000000000..75b1c5e36d --- /dev/null +++ b/files/de/web/api/keyboardevent/getmodifierstate/index.html @@ -0,0 +1,247 @@ +--- +title: KeyboardEvent.getModifierState() +slug: Web/API/KeyboardEvent/getModifierState +translation_of: Web/API/KeyboardEvent/getModifierState +--- +

{{APIRef("DOM Events")}}

+ +

Die Methode KeyboardEvent.getModifierState() gibt den aktuellen Zustand des angegebenen Modifikators zurück: true, wenn der Modifikator aktiv ist (d.h. die Modifikationstasten gedrückt oder gesperrt ist), ansonsten false.

+ +

Syntax

+ +
var active = event.getModifierState(keyArg);
+ +

Rückgabe 

+ +

Einen {{jsxref("Boolean")}}

+ +

Parameter

+ +
+
keyArg
+
Ein Modifikatorschlüsselwert. Der Wert muss einer der {{domxref("KeyboardEvent.key")}} Werte sein, die Modifikatorschlüssel darstellen, oder die Zeichenkette "Accel" {{deprecated_inline}}. Dabei wird zwischen Groß- und Kleinschreibung unterschieden.
+
+ +

Modifikationstasten im Internet Explorer

+ +

IE9 verwendet "Scroll" für "ScrollLock" und "Win" für "OS".

+ +

Modifikationstasten in Gecko

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Wann gibt getModifierState() bei Gecko true zurück?
 WindowsLinux (GTK)MacAndroid 2.3Android 3.0 und später
"Alt"Entweder die Alt oder AltGr -Taste gedrückt wirdAlt -Taste gedrückt wird⌥ Option -Taste gedrückt wirdAlt  oder  option -Taste gedrückt wird
"AltGraph" +

Sowohl die Alt als auch die Strg  werden gedrückt, oder die AltGr Taste wird gedrückt

+ 		Level 3 Shift Taste (or Level 5 Shift Taste {{gecko_minversion_inline("20.0")}}) wird gedrückt⌥ Option Taste wird gedrücktNicht unterstützt
"CapsLock"Während die LED für ⇪ Caps Lock leuchtetNicht unterstütztSolange ⇪ Caps Lock gesperrt ist {{gecko_minversion_inline("29.0")}}
"Control"Entweder die Strg  oder AltGr -Taste wird gedrücktStrg Taste wird gedrücktcontrol Taste wird gedrücktmenu Taste wird gedrückt.Strg, control  oder menu Taste wird gedrückt.
"Fn"Nicht unterstütztDie Function wird gedrückt, aber wir sind nicht sicher, welche Taste den Modifikatorstatus aktiv setzt. Die Fn-Taste auf der Mac-Tastatur bewirkt dies nicht.
+ {{gecko_minversion_inline("29.0")}}
"FnLock"Nicht unterstützt
"Hyper"Nicht unterstützt
"Meta"Nicht unterstütztMeta Taste wird gedrückt {{gecko_minversion_inline("17.0")}}⌘ Command Taste wird gedrücktNicht unterstützt⊞ Windows Logo  or command Taste gedrückt wird
"NumLock"Während die LED für Num Lock leuchtetEine Taste auf dem Nummerblock gedrückt wirdNicht unterstütztSolange NumLock gesperrt ist {{gecko_minversion_inline("29.0")}}
"OS"⊞ Windows Logo Taste wird gedrücktSuper or Hyper Taste wird gedrückt (normalerweise auf der ⊞ Windows Logo Taste zugeordnet)Nicht unterstützt
"ScrollLock"Während die LED für ScrollLock leuchtetWährend die LED für ScrollLock leuchtet, aber normalerweise wird dies von der Plattform nicht unterstützt Nicht unterstütztSolange ScrollLock gesperrt {{gecko_minversion_inline("29.0")}}
"Shift"⇧ Shift Taste wird gedrückt
"Super"Nicht unterstützt
"Symbol"Nicht unterstützt
"SymbolLock"Nicht unterstützt
+ + + +

"Accel" virtueller Modifikator

+ +
Notiz: Der virtuelle Modifikator "Accel" ist in den aktuellen Entwürfen der DOM3 Events-Spezifikation praktisch veraltet.
+ +

getModifierState() also accepts a deprecated virtual modifier named "Accel". event.getModifierState("Accel") returns true when at least one of {{domxref("KeyboardEvent.ctrlKey")}} or {{domxref("KeyboardEvent.metaKey")}} is true.

+ +

In old implementations and outdated specifications, it returned true when a modifier which is the typical modifier key for the shortcut key is pressed. For example, on Windows, pressing Ctrl key may make it return true. However, on Mac, pressing ⌘ Command key may make it return true. Note that which modifier key makes it return true depends on platforms, browsers, and user settings. For example, Firefox users can customize this with a pref, "ui.key.accelKey".

+ +

Beispiel

+ +
// Ignorieren, wenn folgender Modifikator aktiv ist.
+if (event.getModifierState("Fn") ||
+    event.getModifierState("Hyper") ||
+    event.getModifierState("OS") ||
+    event.getModifierState("Super") ||
+    event.getModifierState("Win") /* hack for IE */) {
+  return;
+}
+
+// auch ignorieren, wenn zwei oder mehr Modifikatoren außer Shift aktiv sind.
+if (event.getModifierState("Control") +
+    event.getModifierState("Alt") +
+    event.getModifierState("Meta") > 1) {
+  return;
+}
+
+// Tastaturkürzel mit Standardmodifikator
+if (event.getModifierState("Accel")) {
+  switch (event.key.toLowerCase()) {
+    case "c":
+      if (event.getModifierState("Shift")) {
+        // Handle Accel + Shift + C
+        event.preventDefault(); // consume the key event
+      }
+      break;
+    case "k":
+      if (!event.getModifierState("Shift")) {
+        // Handle Accel + K
+        event.preventDefault(); // consume the key event
+      }
+      break;
+  }
+  return;
+}
+
+// Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+if ((event.getModifierState("ScrollLock") ||
+       event.getModifierState("Scroll") /* hack for IE */) &&
+    !event.getModifierState("Control") &&
+    !event.getModifierState("Alt") &&
+    !event.getModifierState("Meta")) {
+  switch (event.key) {
+    case "ArrowDown":
+    case "Down": // Hack für IE und älteren Gecko
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowLeft":
+    case "Left": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowRight":
+    case "Right": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+    case "ArrowUp":
+    case "Up": // Hack für IE und älteren Gecko
+      // Mach etwas anderes für die Pfeiltasten, wenn ScrollLock gesperrt ist.
+      event.preventDefault(); // Schlüsselereignis verwenden
+      break;
+  }
+}
+
+ +
+

Obwohl dieses Beispiel .getModifierState() mit "Alt", "Control", "Meta" und "Shift" verwendet, ist es vielleicht besser, altKey, ctrlKey, metaKey und shiftKey zu verwenden, da sie kürzer und vielleicht schneller sind.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM3 Events', '#widl-KeyboardEvent-getModifierState', 'getModifierState()')}}{{Spec2('DOM3 Events')}}Initiale Definition (Modifier Keys spec)
+ +

Browser-Kompatibilität

+ + + +

{{Compat("api.KeyboardEvent.getModifierState")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/keyboardevent/index.html b/files/de/web/api/keyboardevent/index.html new file mode 100644 index 0000000000..6f76b0b13f --- /dev/null +++ b/files/de/web/api/keyboardevent/index.html @@ -0,0 +1,458 @@ +--- +title: KeyboardEvent +slug: Web/API/KeyboardEvent +translation_of: Web/API/KeyboardEvent +--- +
{{APIRef("DOM Events")}}
+ +

KeyboardEvent Objekte beschreiben eine Benutzerinteraktion mit dem Keyboard. Jedes Event beschreibt eine Taste. Der Eventtyp (keydown, keypress, oder keyup) identifiziert welche Art von Aktivität ausgeführt wurde.

+ +
Anmerkung: Das KeyboardEvent deutet nur an was mit einer Taste passiert. Wenn Sie Texteingaben behandeln müssen, verwenden sie stattdessen das HTML5 input Event. Beispiel: Wenn ein Benutzer Text über ein Handschriftsystem - wie auf einem Tablet - eingibt, werden Tastenevents möglicherweise nicht ausgelöst.
+ +

Konstruktor

+ +
+
{{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}
+
Erzeugt ein KeyboardEvent Objekt.
+
+ +

Methoden

+ +

Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.getModifierState()")}}
+
Liefert einen {{jsxref("Boolean")}} Wert welcher angibt ob eine Hilfstaste wie Alt, Shift, Ctrl, oder Meta gedrückt war als das Event erzeugt wurde.
+
{{domxref("KeyboardEvent.initKeyEvent()")}}{{deprecated_inline}}
+
Initialisiert ein KeyboardEvent Objekt. Dies wurde nur durch Gecko implementiert (andere verwendeten {{domxref("KeyboardEvent.initKeyboardEvent()")}}) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstrutor zu verwenden.
+
{{domxref("KeyboardEvent.initKeyboardEvent()")}}{{deprecated_inline}}
+
Initialisiert ein KeyboardEvent Objekt. Dies wurde nie von Gecko implementiert (da stattdessen {{domxref("KeyboardEvent.initKeyEvent()")}} verwendet wurde) und sollte nicht mehr benutzt werden. Der moderne Standardweg ist, den {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}} Konstruktor zu verwenden.
+
+ +

Eigenschaften

+ +

Diese Schnittstelle erbt auch Methoden seiner Eltern {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("KeyboardEvent.altKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist falls die Alt ( Option oder ⌥ unter OS X) Taste aktiv war, als das Tastenevent erzeugt wurde.
+
{{domxref("KeyboardEvent.char")}} {{Non-standard_inline}}{{Deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} der das Zeichen der Taste repräsentiert. Wenn die Taste einem druckbaren Zeichen entspricht, ist dieser Wert eine nicht-leere Unicode-Zeichenkette die dieses Zeichen enthält. Fall die Taste keine druckbare Darstellung besitzt, ist der Wert eine leere Zeichenkette. +
Anmerkung: Falls die Taste als Makro verwendet wird, das mehrere Zeichen einfügt, ist der Wert dieses Attributs die gesamte Zeichenkette, nicht nur das erste Zeichen.
+ +
Warnung: Dies wurde aus den DOM Level 3 Events entfernt. Es wird nur von IE9+ und Microsoft Edge unterstützt.
+
+
{{domxref("KeyboardEvent.charCode")}} {{Deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der die Unicode-Kennziffer der Taste repräsentiert; dieses Attribut wird nur vom keypress Event verwendet. Für Tasten deren char Attribut mehrere Zeichen enthält ist der Wert dieses Attributs der Unicode-Wert des ersten Zeichens . In Firefox 26 liefert dies Codes für druckbare Zeichen. +
Warnung: Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.
+
+
{{domxref("KeyboardEvent.code")}} {{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} mit dem Codewert der Taste, welche durch das Event repräsentiert wird.
+
{{domxref("KeyboardEvent.ctrlKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Ctrl Taste aktiv war als  das Key-Event erzeugt wurde.
+
{{domxref("KeyboardEvent.isComposing")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist falls das Event nach compositionstart und vor compositionend ausgelöst wird.
+
{{domxref("KeyboardEvent.key")}} {{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} der den Wert der Taste darstellt die durch das Event repräsentiert wird.
+
{{domxref("KeyboardEvent.keyCode")}} {{deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert. +
Warnung: Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.
+
+
{{domxref("KeyboardEvent.keyIdentifier")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Diese Eigenschaft ist nicht standardisiert und veraltet. Es sollte stattdessen {{domxref("KeyboardEvent.key")}} verwendet werden. Sie war Teil einer alten Version von DOM Level 3 Events.
+
{{domxref("KeyboardEvent.keyLocation")}} {{Non-standard_inline}}{{deprecated_inline}}{{Readonlyinline}}
+
Dies ist ein nicht-standardisierter Alias für {{domxref("KeyboardEvent.location")}}. Sie war Teil einer alten Version von DOM Level 3 Events.
+
{{domxref("KeyboardEvent.locale")}} {{Readonlyinline}}
+
Liefert einen {{domxref("DOMString")}} der das Gebietsschema identifiziert für die das Keyboard konfiguriert ist. Diese Zeichenkette kann leer sein, wenn der Browser oder das Gerät das Gebietsschema des Keyboards nicht kennt. +
Anmerkung: Dies beschreibt nicht das Gebietsschema der eingegebenen Daten. Ein Benutzer könnte ein Tastaturlayout nutzen während er Text in einer anderen Sprache eingibt.
+
+
{{domxref("KeyboardEvent.location")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der die Lage der Taste auf der Tastatur oder einem anderen Eingabegerät repräsentiert.
+
{{domxref("KeyboardEvent.metaKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Meta Taste (auf Mac-Tastaturen, die ⌘ Command Taste; auf Windows-Tastaturen, die Windows -Taste (⊞)) aktiv war, als das Key-Event erzeugt wurde.
+
{{domxref("KeyboardEvent.repeat")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Taste gedrückt gehalten wird, so dass sie sich automatisch wiederholt.
+
{{domxref("KeyboardEvent.shiftKey")}} {{Readonlyinline}}
+
Liefert einen {{jsxref("Boolean")}} Wert der true ist, falls die Shift Taste aktiv war, als das Key-Event erzeugt wurde.
+
{{domxref("KeyboardEvent.which")}} {{deprecated_inline}}{{Readonlyinline}}
+
Liefert einen {{jsxref("Number")}} Wert der einen system- und implementationsabhängigen Zahlencode darstellt, der den unmodifizierten Wert der gedrückten Taste repräsentiert; das ist gewöhnlich das Gleiche wie keyCode. +
Warnung: Dieses Attribut ist veraltet; Sie sollten stattdessen - wenn vorhanden - {{domxref("KeyboardEvent.key")}} verwenden.
+
+
+ +

Anmerkungen

+ +

Es gibt keydown, keypress, and keyup Events. Für die meisten Tasten versendet Gecko eine Sequenz von Key-Events wie folgt:

+ +
    +
  1. Wenn die Taste gedrückt wird, wird ein keydown Event gesendet.
    2. +
  2. Falls die Taste keine Hilfstaste ist, wird das keypress Event gesendet.
    3. +
  3. Wenn der Nutzer die Taste loslässt, wird das keyup Event gesendet.
    4. +
+ +

Sonderfälle

+ +

Einige Taste schalten den Status einer Kontrollleuchte um; dazu gehören Caps Lock, Num Lock, und Scroll Lock. Unter Windows und Linux senden diese Tasten nur keydown and keyup Events.

+ +
+

Unter Linux versendet Firefox 12 und eher das keypress Event auch für diese Tasten.

+
+ +

Jedoch sorgen die Einschränkungen des Mac OS X Event-Modells dafür, dass  Caps Lock nur das keydown Event versendet. Num Lock wurde auf einigen älteren Laptop-Modellen (Modelle 2007 und älter) unterstützt, aber seitdem hat Mac OS X  Num Lock nicht mehr untertstützt - nicht einmal auf externen Tastaturen. Auf älteren MacBooks mit einer Num Lock Taste, erzeugt diese Taste überhaupt keine KeyEvents. Gecko unterstützt die Scroll Lock Taste, falls eine externe Tastatur, die eine F14 Taste besitzt, angeschlossen ist. In bestimmten älteren Firefox-Versionen erzeugt diese Taste ein keypress Event; dieses inkonsistente Verhalten war {{bug(602812)}}.

+ +

Behandlung von Auto-repeat

+ +

Wenn eine Taste gedrückt und gehalten wird, beginnt sie die automatische Wiederholung (sog. auto-repeat). Das Resultat ist das Versenden einer Reihe von Events ähnlich der folgenden:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keydown
    4. +
  4. keypress
    5. +
  5. <<wiederholt sich bis der Nutzer die Taste loslässt>>
    6. +
  6. keyup
    7. +
+ +

Das sollte laut DOM Level 3 Spezifikation passieren. Allerdings gibt es einige Ausnahmen, wie unten beschrieben.

+ +

Auto-repeat in einigen GTK-Umgebungen wie Ubuntu 9.4

+ +

In einigen GTK-basierten Umgebungen versendet auto-repeat automatisch ein natives Key-Up Event während der automatischen Wiederholung und es ist für Gecko deshalb nicht möglich zwischen wiederholten Tastendrücken und einem auto-repeat unterscheiden zu können. Auf diesen Platformen wird eine Auto-Repeat Taste also die folgende Reihe von Events erzeugen:

+ +
    +
  1. keydown
    2. +
  2. keypress
    3. +
  3. keyup
    4. +
  4. keydown
    5. +
  5. keypress
    6. +
  6. keyup
    7. +
  7. <<wiederholt sich bis der Nutzer die Taste loslässt>>
    8. +
  8. keyup
    9. +
+ +

Innerhalb dieser Umgebungen gibt es leider keine Möglichkeit für Webinhalte den Unterschied zwischen selbst-wiederholenden Tasten und Tasten die wiederholt gedrückt werden herauszufinden.

+ +

Behandlung von auto-repeat vor Gecko 5.0

+ +

Vor Gecko 5.0 {{geckoRelease('5.0')}} war platformübergreifendes Tastatur-Handling weniger einheitlich.

+ +
+
Windows
+
Das Auto-Repeat-Verhalten ist das Gleiche wie in Gecko 4.0 und später.
+
Mac
+
Nach dem initialen keydown Event werden nur keypress Events gesendet bis das keyup Event auftritt; die dazwischendliegenden keydown Events werden nicht gesendet.
+
Linux
+
Das Event-Verhalten hängt von der spezifischen Platform ab. Es wird sich entweder so verhalten wie Windows oder Mac, abhängig davon was das native Event-Modell macht.
+
+ +

Anmerkung: manuelles Auslösen eines Events erzeugt nicht die mit dem Event verbundene Standard-Aktion. Zum Beispiel: manuelles Auslösen eines KeyEvent führt nicht dazu, dass der Buchstabe in einem fokussierten Eingabefeld auftaucht. Im Fall von UI-Events ist dies aus Sicherheitsgründen wichtig, da es verhindert, dass Skripte Benutzeraktionen simulieren, die mit dem Browser selbst interagieren.

+ +

Beispiel

+ +
<!DOCTYPE html>
+<html>
+<head>
+<script>
+'use strict';
+
+document.addEventListener('keydown', (event) => {
+  const keyName = event.key;
+
+  if (keyName === 'Control') {
+    // not alert when only Control key is pressed.
+    return;
+  }
+
+  if (event.ctrlKey) {
+    // Even though event.key is not 'Control' (i.e. 'a' is pressed),
+    // event.ctrlKey may be true if Ctrl key is pressed at the time.
+    alert(`Combination of ctrlKey + ${keyName}`);
+  } else {
+    alert(`Key pressed ${keyName}`);
+  }
+}, false);
+
+document.addEventListener('keyup', (event) => {
+  const keyName = event.key;
+
+  // As the user release the Ctrl key, the key is no longer active.
+  // So event.ctrlKey is false.
+  if (keyName === 'Control') {
+    alert('Control key was released');
+  }
+}, false);
+
+</script>
+</head>
+
+<body>
+</body>
+</html>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events', '#interface-keyboardevent', 'KeyboardEvent')}}{{Spec2('DOM3 Events')}}Initiale Definition
+ +

Die KeyboardEvent Schnittstelle lief durch eine Vielzahl von Entwurfsversionen, erst unter DOM Events Level 2, wo sie verworfen wurde als kein Konsens entstand, danach unter DOM Events Level 3. Dies führte zu einer Implementation von nicht standardisierten Initialisationsmethoden, der frühen DOM Events Level 2 Version {{domxref("KeyboardEvent.initKeyEvent()")}} durch Gecko Browser und die frühe DOM Events Level 3 Version, {{domxref("KeyboardEvent.initKeyboardEvent()")}} durch Andere. Beide wurden durch den modernen Einsatz eines Konstruktors ersetzt: {{domxref("KeyboardEvent.KeyboardEvent", "KeyboardEvent()")}}.

+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
constructor{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
.char{{CompatNo}}{{CompatUnknown}}{{CompatNo}}9{{CompatNo}}{{CompatNo}}
.charCode{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
.keyCode{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.locale{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.location{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("15.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.repeat{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("28.0")}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
.which{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
.initKeyboardEvent(){{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatNo}}[2]{{CompatIE("9.0")}}[3]{{CompatUnknown}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
constructor{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.char{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.charCode{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.isComposing{{CompatNo}}{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
.keyCode{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.locale{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.location{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("15.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.repeat{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("28.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.which{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
.initKeyboardEvent(){{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Die Argumente von initKeyboardEvent() von WebKit and Blink weichen von der Definition in DOM Level 3 Events ab. Die Methode ist: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyIdentifierArg, in number locationArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in boolean altGraphKeyArg)

+ +

[2] Gecko wird initKeyboardEvent() nicht unterstützen, weil es die Feature-Erkennung von Web-Apllikationen komplett zerstört. Siehe {{Bug(999645)}}.

+ +

[3] Das Argument von initKeyboardEvent() von IE weicht von der Definition in DOM Level 3 Events ab. Die Methode ist: initKeyboardEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in views::AbstractView viewArg, in DOMString keyArg, in number locationArg, in DOMString modifierListArg, in boolean repeatArt, in DOMString locationArg). Siehe document of initKeyboardEvent() in MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/keyboardevent/keycode/index.html b/files/de/web/api/keyboardevent/keycode/index.html new file mode 100644 index 0000000000..98375fe4b9 --- /dev/null +++ b/files/de/web/api/keyboardevent/keycode/index.html @@ -0,0 +1,3185 @@ +--- +title: KeyboardEvent.keyCode +slug: Web/API/KeyboardEvent/keyCode +translation_of: Web/API/KeyboardEvent/keyCode +--- +

{{APIRef("DOM Events")}}{{deprecated_header()}}

+ +

Die schreibgeschütze Eigenschaft KeyboardEvent.keyCode  stellt den den unveränderten,  System- und Implementationsabhängigen numerischen Bezeichner der gedrückten Taste dar. Normalerweise ist das der zugehörige  ASCII {{RFC(20)}}) oder Windows 1252 Code der Taste. Bei einer unerkannten Taste ist das der Wert 0.

+ +

Der Wert des keypress Ereignis unterscheided sich von Browser zu Browser. IE und Google Chrome setzen den {{domxref("KeyboardEvent.charCode")}}  Wert. Gecko setzt 0 wenn die gedrückte Taste ein druckbares Zeichen darstellt, andernfalls ist es der selbe Wert wie beim keydown und keyup Ereignis.

+ +

Von der Verwendung dieser Eigenschaft sollte nach Möglichkeit abgesehen werden, da siebereits seit einiger Zeit veraltet ist. Statdessen sollte {domxref("KeyboardEvent.code")}} verwendet werden, so es implementiert ist. Leider gibt es noch immer einige Browser ohne Unterstützung dafür. Google und Safari implementieren {{domxref("KeyboardEvent.keyIdentifier")}}, der bisher in der Entwurfs-Spezifikation enthalten ist,  nicht jedoch in der finalen Version.

+ +
+

Entwickler sollten von der Verwendung von keyCode Eigenschaft  für druckbare Zeichen bei keydown und keyup Ereignissen absehen. Wie zuvor beschrieben , ist die keyCode Eigenschaft für druckbare Zeichen nicht zu gebrauchen, vor allem wenn Shift oder Alt dabei gedrückt sind. Bei der Implementation von Kürzeln, ist das {{event("keypress")}} Ereignis meist eher angebracht (zumindest bei der Verwendung der Gecko Engine). Näheres siehe Gecko Keypress Event .

+
+ +

Beispiel

+ +
window.addEventListener("keydown", function (event) {
+  if (event.defaultPrevented) {
+    return; // Should do nothing if the default action has been cancelled
+  }
+
+  var handled = false;
+  if (event.key !== undefined) {
+    // Handle the event with KeyboardEvent.key and set handled true.
+  } else if (event.keyIdentifier !== undefined) {
+    // Handle the event with KeyboardEvent.keyIdentifier and set handled true.
+  } else if (event.keyCode !== undefined) {
+    // Handle the event with KeyboardEvent.keyCode and set handled true.
+  }
+
+  if (handled) {
+    // Suppress "double action" if event handled
+    event.preventDefault();
+  }
+}, true);
+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM3 Events','#widl-KeyboardEvent-keyCode','KeyboardEvent.keyCode')}}{{Spec2('DOM3 Events')}}Initiale Definition; als veraltet gekennzeichnet
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.KeyboardEvent.keyCode")}}

+ +

Werte von keyCode

+ +

druckbare Tasten in der Standard-Position

+ +

The value of key events which are caused by pressing or releasing printable keys in standard position is not compatible between browsers.

+ +

IE just exposes the native virtual keycode value as KeyboardEvent.keyCode.

+ +

Google Chrome, Chromium and Safari must decide the value from the input character. If the inputting character can be inputted with the US keyboard layout, they use the keyCode value on the US keyboard layout.

+ +

Starting in Firefox 15 {{geckoRelease("15.0")}}, Gecko gets keyCode values from ASCII characters inputtable by the key — even with shift modifiers or an ASCII capable keyboard layout. See the following rules for details:

+ +
    +
  1. If the system is Windows and the native keycode of the pressed key indicates that the key is a-z or 0-9, use a keycode for it.
    2. +
  2. If the system is Mac and the native keycode of the pressed key indicates that the key is 0-9, use a keycode for it.
    3. +
  3. If the pressed key inputs an ASCII alphabetic or numeric character with no modifier key, use a keycode for it.
    4. +
  4. If the pressed key inputs an ASCII alphabetic or numeric character with a Shift key modifier, use a keycode for it.
    5. +
  5. If the pressed key inputs a different ASCII character with no modifier key, use a keycode for it.
    6. +
  6. If the pressed key inputs a different ASCII character with a Shift key modifier, use a keycode for it.
    7. +
  7. Otherwise, i.e., pressed key inputs a unicode character: +
      +
    1. If the keyboard layout is ASCII-capable (i.e., can input ASCII alphabets), use 0 or compute with the following additional rules.
      2. +
    2. Otherwise, i.e., the keyboard layout isn't ASCII capable, use the ASCII capable keyboard layout installed on the environment with the highest priority: +
        +
      1. If the pressed key on the alternative keyboard layout inputs an ASCII alphabetic or numeric character, use a keycode for it.
        2. +
      2. Otherwise, use 0 or compute with the following additional rules.
        3. +
      +
      3. +
    +
    8. +
+ +

Starting in Firefox 60 {{geckoRelease("60.0")}}, Gecko sets keyCode values of punctuation keys as far as possible (when points 7.1 or 7.2 in the above list are reached) with the following rules:

+ +
+

The purpose of these new additional rules is for making users whose keyboard layouts map unicode characters to punctuation keys in a US keyboard layout can use web applications which support Firefox only with ASCII-capable keyboard layouts or just with a US keyboard layout. Otherwise, the newly mapped keyCode values may be conflict with other keys. For example, if the active keyboard layout is Russian, the keyCode value of both the "Period" key and "Slash" key are 190 (KeyEvent.DOM_VK_PERIOD). If you need to distinguish those keys but you don't want to support all keyboard layouts in the world by yourself, you should probably use {{domxref("KeyboardEvent.code")}}.

+
+ +
    +
  1. If running macOS or Linux: +
      +
    1. If the active keyboard layout is not ASCII-capable and an alternative ASCII-capable keyboard layout is available. +
        +
      1. If the alternative ASCII-capable keyboard layout produces an ASCII character via just the unmodified key, use a keyCode for the character.
        2. +
      2. If the alternative ASCII-capable keyboard layout produces an ASCII character with a Shift key modifier, use a keyCode for the shifted character.
        3. +
      3. Otherwise, use a keyCode for an ASCII character produced by the key when the US keyboard layout is active.
        4. +
      +
      2. +
    2. Otherwise, use a keyCode for an ASCII character produced by the key when the US keyboard layout is active.
      3. +
    +
    2. +
  2. If running on Windows: +
      +
    1. Use a keyCode value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when the US keyboard layout is active.
      2. +
    +
    3. +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by printable keys in standard position
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
{{domxref("KeyboardEvent.code")}}USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"Digit1"0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)0x31 (49)
"Digit2"0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)0x32 (50)
"Digit3"0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)0x33 (51)
"Digit4"0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)0x34 (52)
"Digit5"0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)0x35 (53)
"Digit6"0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)0x36 (54)
"Digit7"0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)0x37 (55)
"Digit8"0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)0x38 (56)
"Digit9"0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)0x39 (57)
"Digit0"0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)0x30 (48)
"KeyA"0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)0x41 (65)
"KeyB"0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)0x42 (66)
"KeyC"0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)0x43 (67)
"KeyD"0x44 (68)0x44 (68)0x44 (68) 0x44 (68)0x44 (68)0x44 (68)0x44 (68)0x44 (68)
"KeyE"0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)0x45 (69)
"KeyF"0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)0x46 (70)
"KeyG"0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)0x47 (71)
"KeyH"0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)0x48 (72)
"KeyI"0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)0x49 (73)
"KeyJ"0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)0x4A (74)
"KeyK"0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)0x4B (75)
"KeyL"0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)0x4C (76)
"KeyM"0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)0x4D (77)
"KeyN"0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)0x4E (78)
"KeyO"0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)0x4F (79)
"KeyP"0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)0x50 (80)
"KeyQ"0x51 (81)0x51 (81)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0xBA (186)0x51 (81)0x51 (81)0x51 (81)0xBA (186)0x51 (81)
"KeyR"0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)0x52 (82)
"KeyS"0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)0x53 (83)
"KeyT"0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)0x54 (84)
"KeyU"0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)0x55 (85)
"KeyV"0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)0x56 (86)
"KeyW"0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)0x57 (87)
"KeyX"0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)0x58 (88)
"KeyY"0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)0x59 (89)
"KeyZ"0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)0x5A (90)
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by printable keys in standard position (punctuations in US layout):
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)Windows (10.9)Mac (10.9)Linux (Ubuntu 14.04)
USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
{{domxref("KeyboardEvent.code")}}USJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreekUSJapaneseGreek
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"Comma"0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)0xBC (188)
"Comma" with Shift
"Period"0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)0xBE (190)
"Period" with Shift
"Semicolon"0xBA (186)0xBB (187)0xBA (186)0xBA (186)0xBB (187)0xBA (186)0xBA (186)0xBA (186) *10xE5 (229) *20xBA (186)0xBA (186)0xE5 (229) *30xBA (186)0xBA (186) *10xE5 (229) *20x3B (59)0x3B (59)0x00 (0)0x3B (59)0x3B (59) *10x00 (0)0x3B (59)0x3B (59)0x00 (0)
"Semicolon" with Shift0xBB (187) *10xBB (187)0xBB (187) *1
"Quote"0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186) *10xDE (222)0xDE (222)0xBA (186)0xDE (222)0xDE (222)0xBA (186)  *10xDE (222)0xDE (222)0x3A (58)0xDE (222)0xDE (222)0x3A (58) *10xDE (222)0xDE (222)0x3A (58)0xDE (222)
"Quote" with Shift0xDE (222) *10x38 (56)0xDE (222) *1
"BracketLeft"0xDB (219)0xC0(192)0xDB (219)0xDB (219)0xC0(192)0xDB (219)0xDB (219)0xDB (219) *10xDB (219)0xDB (219)0x32 (50)0xDB (219)0xDB (219)0xDB (219) *1 0xDB (219)0xDB (219)0x40 (64)0xDB (219)0xDB (219)0x40 (64) *10xDB (219)0xDB (219)0x40 (64)0xDB (219)
"BracketLeft" with Shift0xC0 (192) *10xC0 (192)0xC0 (192) *1
"BracketRight"0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)0xDD (221)0xDB (219) *10xDD (221)0xDD (221)0xDB (219)0xDD (221)
"BracketRight" with Shift
"Backquote"0xC0 (192)N/A0xC0 (192)0xC0 (192)N/A0xC0 (192)0xC0 (192)0xC0 (192)0xF4 (244)0xC0 (192)0xC0 (192)0xC0 (192)N/A0xC0 (192)0xC0 (192)0xC0 (192)0x00 (0)0xC0 (192)
"Backquote" with Shift
"Backslash"0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)0xDC (220)0xDC (220)0xDD (221)0xDC (220)
"Backslash" with Shift
"Minus"0xBD (189)0xBD (189)0xBD (189)0xBD (189) *10xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189)0xBD (189) *10xBD (189)0xAD (173)0xAD (173)0xAD (173) *10xAD (173)0xAD (173)
"Minus" with Shift0xBB (187) *10xBB (187)0xBD (189)0xBB (187) *10xBD (189)
"Equal"0xBB (187)0xDE (222)0xBB (187)0xBB (187)0xDE (222)0xBB (187)0xBB (187)0xBB (187) *10xBB (187)0xBB (187)0x36 (54)0xBB (187)0xBB (187)0xBB (187) *10xBB (187)0x3D (61)0xA0 (160)0x3D (61)0x3D (61)0xA0 (160) *10x3D (61)0x3D (61)0xA0 (160)0x3D (61)
"Equal" with Shift0xC0 (192) *10xC0 (192)0xBB (187)0xC0 (192) *10xBB (187)
"IntlRo"0xC1 (193)0xE2 (226)0xC1 (193)0xC1 (193)0xE2 (226)0xC1 (193)0xBD (189)0xBD (189)0x00 (0)*40xDC (220)
+  		*40xBD (189)0xBD (189)0xE5 (229) *50x00 (0)0xDC (220)0x00 (0)0xA7 (167)0xA7 (167)0x00 (0)0x00 (0)0xDC (220)0x00 (0)
"IntlRo" with Shift
"IntlYen"0xFF (255)0xDC (220)0xFF (255)0xFF (255)0xDC (220)0xFF (255)0x00 (0)0x00 (0)0x00 (0)*40xDC (220)*40x00 (0)0x00 (0)0xE5 (229) *50x00 (0)0xDC (220)0x00 (0)0xDC (220)0xDC (220)0x00 (0)0x00 (0)0xDC (220)0x00 (0)
"IntlYen" with Shift0xDC (220)0xDC (220)0xBD (189)0xDC (220)0xDC (220)
+ +

*1 The value is input from JIS keyboard. When you use ANSI keyboard, the keyCode value and inputted character are what you select from the US keyboard layout.

+ +

*2 The key is a dead key. The value of keyup event is 0xBA (186).

+ +

*3 The key is a dead key. The value of keyup event is 0x10 (16).

+ +

*4 No key events are fired.

+ +

*5 The key isn't available with Greek keyboard layout (does not input any character). The value of keyup event is 0x00 (0).

+ +

Non-printable keys (function keys)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by modifier keys:
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"AltLeft"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
"AltRight"0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)0x12 (18)
"AltRight" when it's "AltGraph" key*1*1N/A0xE1 (225)N/A*1N/A0xE1 (225)
"CapsLock"0x14 (20) *20x14 (20) *20x14 (20)0x14 (20)0x14 (20)0x14 (20) *20x14 (20)0x14 (20) *3
"ControlLeft"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
"ControlRight"0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)0x11 (17)
"OSLeft"0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0x5B (91)0xE0 (224)0x5B (91)
"OSRight"0x5C (92)0x5C (92)0x5D (93)0x5C (92)0x5D (93)0x5B (91)0xE0 (224)0x5B (91)
"ShiftLeft"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
"ShiftRight"0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)0x10 (16)
+ +

*1 On Windows, "AltGraph" key causes "ControlLeft" key event and "AltRight" key event.

+ +

*2 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0xF0 (240). The key works as "Alphanumeric" key whose label is "英数".

+ +

*3 When Japanese keyboard layout is active, "CapsLock" key without Shift causes 0x00 (0). The key works as "Alphanumeric" key whose label is "英数".

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by non-printable keys:
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"ContextMenu"0x5D (93)0x5D (93)0x00 (0) *10x5D (93)0x00 (0) *10x5D (93)0x5D (93)0x5D (93)
"Enter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
"Space"0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)0x20 (32)
"Tab"0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)0x09 (9)
"Delete"0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
"End"0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
"Help"N/AN/A0x2D (45) *20x2F (47) *30x2D (45) *2N/A0x2D (45) *20x06 (6) *3
"Home"0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
"Insert"0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
"PageDown"0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
"PageUp"0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
"ArrowDown"0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
"ArrowLeft"0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
"ArrowRight"0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
"ArrowUp"0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
"Escape"0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)0x1B (27)
"PrintScreen"0x2C (44) *40x2C (44) *40x7C (124)*50x2A (42)0x7C (124)*50x2C (44) *40x2C (44)0x2A (42)
"ScrollLock"0x91 (145)0x91 (145)0x7D (125)*50x91 (145)0x7D (125)*50x91 (145)0x91 (145)0x91 (145)
"Pause"0x13 (19) *60x13 (19) *60x7E (126)*50x13 (19)0x7E (126)*50x13 (19) *60x13 (19)0x13 (19)
+ +

*1 keypress event is fired whose keyCode and charCode are 0x10 (16) but text isn't inputted into editor.

+ +

*2 On Mac, "Help" key is mapped to "Insert" key of PC keyboard. These keyCode values are the same as the "Insert" key's keyCode value.

+ +

*3 Tested on Fedora 20.

+ +

*4 Only keyup event is fired.

+ +

*5 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Chrome and Safari map same keyCode values with Mac's keys.

+ +

*6 "Pause" key with Control causes 0x03 (3).

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by function keys:
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"F1"0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)0x70 (112)
"F2"0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)0x71 (113)
"F3"0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)0x72 (114)
"F4"0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)0x73 (115)
"F5"0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)0x74 (116)
"F6"0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)0x75 (117)
"F7"0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)0x76 (118)
"F8"0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)0x77 (119)
"F9"0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)0x78 (120)
"F10"0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)0x79 (121)
"F11"0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)0x7A (122)
"F12"0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)0x7B (123)
"F13"0x7C (124)0x7C (124)0x7C (124)0x7C (124) *10x7C (124)0x7C (124)0x2C (44) *20x00 (0) *3
"F14"0x7D (125)0x7D (125)0x7D (125)0x7D (125) *10x7D (125)0x7D (125)0x91 (145) *20x00 (0) *3
"F15"0x7E (126)0x7E (126)0x7E (126)0x7E (126) *10x7E (126)0x7E (126)0x13 (19) *20x00 (0) *3
"F16"0x7F (127)0x7F (127)0x7F (127)0x7F (127) *10x7F (127)0x7F (127)0x7F (127)0x00 (0) *3
"F17"0x80 (128)0x80 (128)0x80 (128)0x80 (128) *10x80 (128)0x80 (128)0x80 (128)0x00 (0) *3
"F18"0x81 (129)0x81 (129)0x81 (129)0x81 (129) *10x81 (129)0x81 (129)0x81 (129)0x00 (0) *3
"F19"0x82 (130)0x82 (130)0x82 (130)N/A *40x82 (130)0x82 (130)0x82 (130)0x00 (0) *3
"F20"0x83 (131)0x83 (131)0x83 (131)N/A *40xE5 (229) *50x83 (131)0x00 (0)N/A *6
"F21"0x84 (132)0x84 (132)0x00 (0) *7N/A *40x00 (0) *70x84 (132)N/A *8N/A *6
"F22"0x85 (133)0x85 (133)0x00 (0) *7N/A *40x00 (0) *70x85 (133)N/A *8N/A *6
"F23"0x86 (134)0x86 (134)0x00 (0) *7N/A *40x00 (0) *70x86 (134)N/A *8N/A *6
"F24"0x87 (135)0x87 (135)0x00 (0) *7N/A *40x00 (0) *70x87 (135)N/A *80x00 (0) *3
+ +

*1 Tested on Fedora 20.

+ +

*2 PC's "PrintScreen", "ScrollLock" and "Pause" are mapped to Mac's "F13", "F14" and "F15". Firefox maps same keyCode values with PC's keys.

+ +

*3 Tested on Fedora 20. The keys don't cause GDK_Fxx keysyms. If the keys cause proper keysyms, these values must be same as IE.

+ +

*4 Tested on Fedora 20. The keys don't cause DOM key events on Chromium.

+ +

*5 keyUp event's keyCode value is 0x83 (131).

+ +

*6 Tested on Fedora 20. The keys don't cause DOM key events on Firefox.

+ +

*7 Only keydown event is fired.

+ +

*8 No DOM key events are fired on Firefox.

+ +

Numpad keys

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by keys in numpad in NumLock state
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsMac (10.9)Linux (Ubuntu 14.04)Mac (10.9)WindowsMac (10.9)Linux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Safari 7Gecko 29
"NumLock"0x90 (144)0x90 (144)0x0C (12) *10x90 (144)0x0C (12) *10x90 (144)0x0C (12) *10x90 (144)
"Numpad0"0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)0x60 (96)
"Numpad1"0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)0x61 (97)
"Numpad2"0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)0x62 (98)
"Numpad3"0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)0x63 (99)
"Numpad4"0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)0x64 (100)
"Numpad5"0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)0x65 (101)
"Numpad6"0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)0x66 (102)
"Numpad7"0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)0x67 (103)
"Numpad8"0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)0x68 (104)
"Numpad9"0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)0x69 (105)
"NumpadAdd"0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)0x6B (107)
"NumpadComma" inputting ","0xC2 (194)0xC2 (194)0xBC (188)Always inputs "."0xBC (188)0xC2 (194)0x6C (108)Always inputs "."
"NumpadComma" inputting "." or empty string0xC2 (194)0xC2 (194)0xBE (190)0x6E (110)0xBE (190)0xC2 (194)0x6C (108)0x6E (110)
"NumpadDecimal" inputting "."0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)0x6E (110)
"NumpadDecimal" inputting ","0x6E (110)0x6E (110)0x6E (110)0x6C (108)0x6E (110)0x6E (110)0x6E (110)0x6C (108)
"NumpadDivide"0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)0x6F (111)
"NumpadEnter"0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)0x0D (13)
"NumpadEqual"0x0C (12)0x0C (12)0xBB (187)0xBB (187)0xBB (187)0x0C (12)0x3D (61)0x3D (61)
"NumpadMultiply"0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)0x6A (106)
"NumpadSubtract"0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)0x6D (109)
+ +

*1 "NumLock" key works as "Clear" key on Mac.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
keyCode values of each browser's keydown event caused by keys in numpad without NumLock state
{{domxref("KeyboardEvent.code")}}Internet Explorer 11Google Chrome 34Chromium 34Gecko 29
WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
{{domxref("KeyboardEvent.code")}}WindowsWindowsLinux (Ubuntu 14.04)WindowsLinux (Ubuntu 14.04)
Internet Explorer 11Google Chrome 34Chromium 34Gecko 29
"Numpad0" ("Insert")0x2D (45)0x2D (45)0x2D (45)0x2D (45)0x2D (45)
"Numpad1" ("End")0x23 (35)0x23 (35)0x23 (35)0x23 (35)0x23 (35)
"Numpad2" ("ArrowDown")0x28 (40)0x28 (40)0x28 (40)0x28 (40)0x28 (40)
"Numpad3" ("PageDown")0x22 (34)0x22 (34)0x22 (34)0x22 (34)0x22 (34)
"Numpad4" ("ArrowLeft")0x25 (37)0x25 (37)0x25 (37)0x25 (37)0x25 (37)
"Numpad5"0x0C (12)0x0C (12)0x0C (12)0x0C (12)0x0C (12)
"Numpad6" ("ArrowRight")0x27 (39)0x27 (39)0x27 (39)0x27 (39)0x27 (39)
"Numpad7" ("Home")0x24 (36)0x24 (36)0x24 (36)0x24 (36)0x24 (36)
"Numpad8" ("ArrowUp")0x26 (38)0x26 (38)0x26 (38)0x26 (38)0x26 (38)
"Numpad9" ("PageUp")0x21 (33)0x21 (33)0x21 (33)0x21 (33)0x21 (33)
"NumpadDecimal" ("Delete")0x2E (46)0x2E (46)0x2E (46)0x2E (46)0x2E (46)
+ +

* Recent Mac doesn't have "NumLock" key and state. Therefore, unlocked state isn't available.

+ +

Constants for keyCode value

+ +

Gecko defines a lot of keyCode values in KeyboardEvent for making the mapping table explicitly. These values are useful for add-on developers of Firefox, but not so useful in public web pages.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ConstantValueDescription
DOM_VK_CANCEL0x03 (3)Cancel key.
DOM_VK_HELP0x06 (6)Help key.
DOM_VK_BACK_SPACE0x08 (8)Backspace key.
DOM_VK_TAB0x09 (9)Tab key.
DOM_VK_CLEAR0x0C (12)"5" key on Numpad when NumLock is unlocked. Or on Mac, clear key which is positioned at NumLock key.
DOM_VK_RETURN0x0D (13)Return/enter key on the main keyboard.
DOM_VK_ENTER0x0E (14)Reserved, but not used. {{obsolete_inline(30)}} (Dropped, see {{bug(969247)}}.)
DOM_VK_SHIFT0x10 (16)Shift key.
DOM_VK_CONTROL0x11 (17)Control key.
DOM_VK_ALT0x12 (18)Alt (Option on Mac) key.
DOM_VK_PAUSE0x13 (19)Pause key.
DOM_VK_CAPS_LOCK0x14 (20)Caps lock.
DOM_VK_KANA0x15 (21)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_HANGUL0x15 (21)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_EISU0x 16 (22)"英数" key on Japanese Mac keyboard. {{gecko_minversion_inline("15.0")}}
DOM_VK_JUNJA0x17 (23)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_FINAL0x18 (24)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_HANJA0x19 (25)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_KANJI0x19 (25)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_ESCAPE0x1B (27)Escape key.
DOM_VK_CONVERT0x1C (28)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_NONCONVERT0x1D (29)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_ACCEPT0x1E (30)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_MODECHANGE0x1F (31)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_SPACE0x20 (32)Space bar.
DOM_VK_PAGE_UP0x21 (33)Page Up key.
DOM_VK_PAGE_DOWN0x22 (34)Page Down key.
DOM_VK_END0x23 (35)End key.
DOM_VK_HOME0x24 (36)Home key.
DOM_VK_LEFT0x25 (37)Left arrow.
DOM_VK_UP0x26 (38)Up arrow.
DOM_VK_RIGHT0x27 (39)Right arrow.
DOM_VK_DOWN0x28 (40)Down arrow.
DOM_VK_SELECT0x29 (41)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_PRINT0x2A (42)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_EXECUTE0x2B (43)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_PRINTSCREEN0x2C (44)Print Screen key.
DOM_VK_INSERT0x2D (45)Ins(ert) key.
DOM_VK_DELETE0x2E (46)Del(ete) key.
DOM_VK_00x30 (48)"0" key in standard key location.
DOM_VK_10x31 (49)"1" key in standard key location.
DOM_VK_20x32 (50)"2" key in standard key location.
DOM_VK_30x33 (51)"3" key in standard key location.
DOM_VK_40x34 (52)"4" key in standard key location.
DOM_VK_50x35 (53)"5" key in standard key location.
DOM_VK_60x36 (54)"6" key in standard key location.
DOM_VK_70x37 (55)"7" key in standard key location.
DOM_VK_80x38 (56)"8" key in standard key location.
DOM_VK_90x39 (57)"9" key in standard key location.
DOM_VK_COLON0x3A (58)Colon (":") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_SEMICOLON0x3B (59)Semicolon (";") key.
DOM_VK_LESS_THAN0x3C (60)Less-than ("<") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_EQUALS0x3D (61)Equals ("=") key.
DOM_VK_GREATER_THAN0x3E (62)Greater-than (">") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_QUESTION_MARK0x3F (63)Question mark ("?") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_AT0x40 (64)Atmark ("@") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_A0x41 (65)"A" key.
DOM_VK_B0x42 (66)"B" key.
DOM_VK_C0x43 (67)"C" key.
DOM_VK_D0x44 (68)"D" key.
DOM_VK_E0x45 (69)"E" key.
DOM_VK_F0x46 (70)"F" key.
DOM_VK_G0x47 (71)"G" key.
DOM_VK_H0x48 (72)"H" key.
DOM_VK_I0x49 (73)"I" key.
DOM_VK_J0x4A (74)"J" key.
DOM_VK_K0x4B (75)"K" key.
DOM_VK_L0x4C (76)"L" key.
DOM_VK_M0x4D (77)"M" key.
DOM_VK_N0x4E (78)"N" key.
DOM_VK_O0x4F (79)"O" key.
DOM_VK_P0x50 (80)"P" key.
DOM_VK_Q0x51 (81)"Q" key.
DOM_VK_R0x52 (82)"R" key.
DOM_VK_S0x53 (83)"S" key.
DOM_VK_T0x54 (84)"T" key.
DOM_VK_U0x55 (85)"U" key.
DOM_VK_V0x56 (86)"V" key.
DOM_VK_W0x57 (87)"W" key.
DOM_VK_X0x58 (88)"X" key.
DOM_VK_Y0x59 (89)"Y" key.
DOM_VK_Z0x5A (90)"Z" key.
DOM_VK_WIN0x5B (91)Windows logo key on Windows. Or Super or Hyper key on Linux. {{gecko_minversion_inline("15.0")}}
DOM_VK_CONTEXT_MENU0x5D (93)Opening context menu key.
DOM_VK_SLEEP0x5F (95)Linux support for this keycode was added in Gecko 4.0.
DOM_VK_NUMPAD00x60 (96)"0" on the numeric keypad.
DOM_VK_NUMPAD10x61 (97)"1" on the numeric keypad.
DOM_VK_NUMPAD20x62 (98)"2" on the numeric keypad.
DOM_VK_NUMPAD30x63 (99)"3" on the numeric keypad.
DOM_VK_NUMPAD40x64 (100)"4" on the numeric keypad.
DOM_VK_NUMPAD50x65 (101)"5" on the numeric keypad.
DOM_VK_NUMPAD60x66 (102)"6" on the numeric keypad.
DOM_VK_NUMPAD70x67 (103)"7" on the numeric keypad.
DOM_VK_NUMPAD80x68 (104)"8" on the numeric keypad.
DOM_VK_NUMPAD90x69 (105)"9" on the numeric keypad.
DOM_VK_MULTIPLY0x6A (106)"*" on the numeric keypad.
DOM_VK_ADD0x6B (107)"+" on the numeric keypad.
DOM_VK_SEPARATOR0x6C (108) 
DOM_VK_SUBTRACT0x6D (109)"-" on the numeric keypad.
DOM_VK_DECIMAL0x6E (110)Decimal point on the numeric keypad.
DOM_VK_DIVIDE0x6F (111)"/" on the numeric keypad.
DOM_VK_F10x70 (112)F1 key.
DOM_VK_F20x71 (113)F2 key.
DOM_VK_F30x72 (114)F3 key.
DOM_VK_F40x73 (115)F4 key.
DOM_VK_F50x74 (116)F5 key.
DOM_VK_F60x75 (117)F6 key.
DOM_VK_F70x76 (118)F7 key.
DOM_VK_F80x77 (119)F8 key.
DOM_VK_F90x78 (120)F9 key.
DOM_VK_F100x79 (121)F10 key.
DOM_VK_F110x7A (122)F11 key.
DOM_VK_F120x7B (123)F12 key.
DOM_VK_F130x7C (124)F13 key.
DOM_VK_F140x7D (125)F14 key.
DOM_VK_F150x7E (126)F15 key.
DOM_VK_F160x7F (127)F16 key.
DOM_VK_F170x80 (128)F17 key.
DOM_VK_F180x81 (129)F18 key.
DOM_VK_F190x82 (130)F19 key.
DOM_VK_F200x83 (131)F20 key.
DOM_VK_F210x84 (132)F21 key.
DOM_VK_F220x85 (133)F22 key.
DOM_VK_F230x86 (134)F23 key.
DOM_VK_F240x87 (135)F24 key.
DOM_VK_NUM_LOCK0x90 (144)Num Lock key.
DOM_VK_SCROLL_LOCK0x91 (145)Scroll Lock key.
DOM_VK_WIN_OEM_FJ_JISHO0x92 (146)An OEM specific key on Windows. This was used for "Dictionary" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_MASSHOU0x93 (147)An OEM specific key on Windows. This was used for "Unregister word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_TOUROKU0x94 (148)An OEM specific key on Windows. This was used for "Register word" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_LOYA0x95 (149)An OEM specific key on Windows. This was used for "Left OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FJ_ROYA0x96 (150)An OEM specific key on Windows. This was used for "Right OYAYUBI" key on Fujitsu OASYS. {{gecko_minversion_inline("21.0")}}
DOM_VK_CIRCUMFLEX0xA0 (160)Circumflex ("^") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_EXCLAMATION0xA1 (161)Exclamation ("!") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_DOUBLE_QUOTE0xA3 (162)Double quote (""") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_HASH0xA3 (163)Hash ("#") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_DOLLAR0xA4 (164)Dollar sign ("$") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_PERCENT0xA5 (165)Percent ("%") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_AMPERSAND0xA6 (166)Ampersand ("&") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_UNDERSCORE0xA7 (167)Underscore ("_") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_OPEN_PAREN0xA8 (168)Open parenthesis ("(") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_CLOSE_PAREN0xA9 (169)Close parenthesis (")") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_ASTERISK0xAA (170)Asterisk ("*") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_PLUS0xAB (171)Plus ("+") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_PIPE0xAC (172)Pipe ("|") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_HYPHEN_MINUS0xAD (173)Hyphen-US/docs/Minus ("-") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_OPEN_CURLY_BRACKET0xAE (174)Open curly bracket ("{") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_CLOSE_CURLY_BRACKET0xAF (175)Close curly bracket ("}") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_TILDE0xB0 (176)Tilde ("~") key. {{gecko_minversion_inline("15.0")}}
DOM_VK_VOLUME_MUTE0xB5 (181)Audio mute key. {{gecko_minversion_inline("21.0")}}
DOM_VK_VOLUME_DOWN0xB6 (182)Audio volume down key {{gecko_minversion_inline("21.0")}}
DOM_VK_VOLUME_UP0xB7 (183)Audio volume up key {{gecko_minversion_inline("21.0")}}
DOM_VK_COMMA0xBC (188)Comma (",") key.
DOM_VK_PERIOD0xBE (190)Period (".") key.
DOM_VK_SLASH0xBF (191)Slash ("/") key.
DOM_VK_BACK_QUOTE0xC0 (192)Back tick ("`") key.
DOM_VK_OPEN_BRACKET0xDB (219)Open square bracket ("[") key.
DOM_VK_BACK_SLASH0xDC (220)Back slash ("\") key.
DOM_VK_CLOSE_BRACKET0xDD (221)Close square bracket ("]") key.
DOM_VK_QUOTE0xDE (222)Quote (''') key.
DOM_VK_META0xE0 (224)Meta key on Linux, Command key on Mac.
DOM_VK_ALTGR0xE1 (225)AltGr key (Level 3 Shift key or Level 5 Shift key) on Linux. {{gecko_minversion_inline("15.0")}}
DOM_VK_WIN_ICO_HELP0xE3 (227)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_ICO_000xE4 (228)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_ICO_CLEAR0xE6 (230)An OEM specific key on Windows. This is (was?) used for Olivetti ICO keyboard.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_RESET0xE9 (233)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_JUMP0xEA (234)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_PA10xEB (235)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_PA20xEC (236)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_PA30xED (237)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_WSCTRL0xEE (238)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_CUSEL0xEF (239)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_ATTN0xF0 (240)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_FINISH0xF1 (241)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_COPY0xF2 (242)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_AUTO0xF3 (243)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_ENLW0xF4 (244)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_BACKTAB0xF5 (245)An OEM specific key on Windows. This was used for Nokia/Ericsson's device.{{gecko_minversion_inline("21.0")}}
DOM_VK_ATTN0xF6 (246)Attn (Attention) key of IBM midrange computers, e.g., AS/400. {{gecko_minversion_inline("21.0")}}
DOM_VK_CRSEL0xF7 (247)CrSel (Cursor Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_EXSEL0xF8 (248)ExSel (Extend Selection) key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_EREOF0xF9 (249)Erase EOF key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_PLAY0xFA (250)Play key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_ZOOM0xFB (251)Zoom key. {{gecko_minversion_inline("21.0")}}
DOM_VK_PA10xFD (253)PA1 key of IBM 3270 keyboard layout. {{gecko_minversion_inline("21.0")}}
DOM_VK_WIN_OEM_CLEAR0xFE (254)Clear key, but we're not sure the meaning difference from DOM_VK_CLEAR. {{gecko_minversion_inline("21.0")}}
+ +

OEM specific keys on Windows

+ +

On Windows, some values of virtual keycode are defined (reserved) for OEM specific key. They are available for special keys on non-standard keyboard. In other words, some values are used for different meaning by two or more vendors (or hardware).

+ +

Starting Gecko 21 (and older than 15), OEM specific key values are available on the keyCode attribute only on Windows. So they are not useful for usual web applications. They are useful only for intranet applications or in similar situations.

+ +

See "Manufacturer-specific Virtual-Key Codes (Windows CE 5.0)" in MSDN for the detail.

+ +
 
diff --git a/files/de/web/api/l10n.language.direction/index.html b/files/de/web/api/l10n.language.direction/index.html new file mode 100644 index 0000000000..c469794d54 --- /dev/null +++ b/files/de/web/api/l10n.language.direction/index.html @@ -0,0 +1,63 @@ +--- +title: L10n.language.direction +slug: Web/API/L10n.language.direction +translation_of: Archive/B2G_OS/API/L10n/language/direction +--- +
{{ non-standard_header() }}
+ +
 
+ +
+

The language.direction property returns the direction (ltr or rtl) of the currently active language.

+
+ +

Syntax

+ +
var languageCode = navigator.mozL10n.language.direction;
+ +

Value

+ +

Returns the direction of the currently active language (ltr or rtl).

+ +

Example

+ +
navigator.mozL10n.ready(function() {
+  console.log('The current language's direction is ' + navigator.mozL10n.language.direction);
+});
+
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + + + diff --git a/files/de/web/api/linkstyle/index.html b/files/de/web/api/linkstyle/index.html new file mode 100644 index 0000000000..1cc73d12ac --- /dev/null +++ b/files/de/web/api/linkstyle/index.html @@ -0,0 +1,56 @@ +--- +title: LinkStyle +slug: Web/API/LinkStyle +tags: + - API + - CSSOM + - Referenz + - Schnittstelle +translation_of: Web/API/LinkStyle +--- +

{{APIRef("CSSOM")}}

+ +

Übersicht

+ +

Die LinkStyle Schnittstelle erlaubt es, das zu einem Knoten zugehöriges CSS Stylesheet anzusprechen.

+ +

LinkStyle ist eine abstrakte Schnittstelle und es kann kein Objekt dieses Typs erstellt werden; Sie wird von {{domxref("HTMLLinkElement")}} und {{domxref("HTMLStyleElement")}} Objekten implementiert.

+ +

Eigenschaften

+ +

Es gibt keine vererbte Eigenschaft.

+ +
+
{{domxref("LinkStyle.sheet")}} {{readonlyInline}}
+
Gibt das {{domxref("StyleSheet")}} Objekt zurück, das zu dem angegebenen Element gehört, oder null, falls keines existiert.
+
+ +

Methoden

+ +

Diese Schnittstelle implementiert keine Methoden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSSOM', '#the-linkstyle-interface', 'LinkStyle') }}{{ Spec2('CSSOM') }}Keine Änderung bezüglich {{ SpecName('DOM2 Style') }}.
{{ SpecName('DOM2 Style', 'stylesheets.html#StyleSheets-LinkStyle', 'LinkStyle') }}{{ Spec2('DOM2 Style') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

 

diff --git a/files/de/web/api/messageevent/index.html b/files/de/web/api/messageevent/index.html new file mode 100644 index 0000000000..5f3bc4c4c8 --- /dev/null +++ b/files/de/web/api/messageevent/index.html @@ -0,0 +1,205 @@ +--- +title: MessageEvent +slug: Web/API/MessageEvent +tags: + - API + - Channels + - Interface + - Nachrichten + - Referenz + - WebSockets + - Window + - Workers + - messaging +translation_of: Web/API/MessageEvent +--- +
{{APIRef("HTML DOM")}}
+ +

Das MessageEvent Interface representiert eine Nachricht die von einem Zielobjekt empfangen wurde.

+ +

Es wird verwendet in in:

+ + + +

Welche Aktion durch dieses Event ausgeführt wird, entscheidet die Funktion die als entsprechender Eventhandler für das {{event("message")}} Event definiert wurde. Beispielsweise durch das setzen eines onmessage handlers. 

+ +

{{AvailableInWorkers}}

+ +

Constructor

+ +
+
{{domxref("MessageEvent.MessageEvent", "MessageEvent()")}}
+
Creates a new MessageEvent.
+
+ +

Eigenschaften

+ +

Dieses Interface erbt auch Eigenschaften seines parents, {{domxref("Event")}}.

+ +
+
{{domxref("MessageEvent.data")}} {{readonlyInline}}
+
Die Daten die vom message emitter gesendet wurden.
+
{{domxref("MessageEvent.origin")}} {{readonlyInline}}
+
Ein {{domxref("USVString")}} der den Ursprung (Origin) des message emitters repräsentiert.
+
{{domxref("MessageEvent.lastEventId")}} {{readonlyInline}}
+
Ein {{domxref("DOMString")}} der die einzigartige ID des Events repräsentiert.
+
{{domxref("MessageEvent.source")}} {{readonlyInline}}
+
Eine MessageEventSource (welch ein {{domxref("WindowProxy")}}, {{domxref("MessagePort")}}, or {{domxref("ServiceWorker")}} Objekt sein kann) welche den message emitter repräsentiert.
+
{{domxref("MessageEvent.ports")}} {{readonlyInline}}
+
Ein Array bestehend aus {{domxref("MessagePort")}} Objekten, welche die Ports repräsentieren, welche mit dem channel verbunden sind durch die die Nachricht gesendet wurde (Bespielsweise in channel messaging oder wenn eine Nachricht zu einem shared worker gesendet wird).
+
+ +

Methoden

+ +

Dieses Interface erbt auch Methoden von seinem parent, {{domxref("Event")}}.

+ +
+
{{domxref("MessageEvent.initMessageEvent()")}} {{deprecated_inline}}
+
Initialisiert ein Message Objekt. Bitte nicht mehr benutzen — benutzen Sie bitte den {{domxref("MessageEvent.MessageEvent", "MessageEvent()")}} constructor stattdessen.
+
+ +

Examples

+ +

In unserem  Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML Seiten, von denen jede eine einfache Berechnung ausführt. Die unterschiedlichen Skripte benutzen die gleiche Worker Datei um die Berechnungen auszuführen — sie können beide darauf zugreifen, selbst wenn sich ihre Seiten in verschiedenen Fenstern befinden.

+ +

Der folgende Ausschnitt zeigt wie man ein SharedWorker Objekt mit dem {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} constructor erzeugen kann. Beide Skripte enthalten dies:

+ +
var myWorker = new SharedWorker('worker.js');
+
+ +

Beide Skripte greifen durch ein {{domxref("MessagePort")}} Objekt auf den Worker zu, welcher mit der {{domxref("SharedWorker.port")}} Eigenschaft erstellt wurde. Wenn das onmessage event mittels addEventListener hinzugefügt wird, wird der port automatisch mittels seiner start() Methode gestartet:

+ +
myWorker.port.start();
+ +

Wenn der Port gestartet wurde, senden beide Skripte Nachrichten zu dem Worker und verarbeiten die Nachrichten welche vom Worker empfangen werden mittels  port.postMessage() und port.onmessage:

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

In dem Worker benutzen wir den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns mit dem oben erwähnten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die ports Eigenschaft des {{event("connect")}} Events erreichbar — dann benutzen wir die {{domxref("MessagePort")}} start() Methode um den Port zu starten, und den onmessage Handler um die Nachrichten die von den Hauptthreads gesendet wurden zu verarbeiten.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}
+ +

Specifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#messageevent", "MessageEvent")}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}9{{CompatUnknown}}{{CompatSafari('10.0+')}}
origin als {{domxref("USVString")}} und source als MessageEventSource{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.0+
origin als {{domxref("USVString")}} und source als MessageEventSource{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("55.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/mouseevent/index.html b/files/de/web/api/mouseevent/index.html new file mode 100644 index 0000000000..55d458c6a2 --- /dev/null +++ b/files/de/web/api/mouseevent/index.html @@ -0,0 +1,323 @@ +--- +title: MouseEvent +slug: Web/API/MouseEvent +tags: + - API + - DOM + - DOM Events + - Interface + - Reference +translation_of: Web/API/MouseEvent +--- +

{{APIRef("DOM Events")}}

+ +

Die MouseEvent Schnittstelle stellt Events bereit, die während der Benutzerinteraktion mit einem Zeigegerät (zum Beispiel eine Maus) auftreten. Häufige Events, die diese Schnittstelle nutzen sind {{event("click")}}, {{event("dblclick")}}, {{event("mouseup")}}, {{event("mousedown")}}.

+ +

MouseEvent wird vererbt von {{domxref("UIEvent")}}, welches wiederum vererbt wird von {{domxref("Event")}}. Obwohl die {{domxref("MouseEvent.initMouseEvent()")}} Methode wegen der Rückwärtskompatibilität bleibt, sollte das Erstellen eines MouseEvent Objekts durch den {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}} Konstruktor erfolgen.

+ +

Mehrere spezifischere Events basieren auf MouseEvent, davon {{domxref("WheelEvent")}} und {{domxref("DragEvent")}}.

+ +

Konstruktor

+ +
+
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}
+
Erstellt einMouseEvent Objekt.
+
+ +

Eigenschaften

+ +

Diese Schnittstelle erbt Eigenschaften der Elternobjekte {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.altKey")}} {{readonlyinline}}
+
Gibt true zurück wenn die alt Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.button")}} {{readonlyinline}}
+
Die Nummer des Buttons der gedrückt wurde (wenn anwendbar), während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.buttons")}} {{readonlyinline}} {{gecko_minversion_inline("15.0")}}
+
+

Die Buttons, die losgelassen wurden (sofern vorhanden) während das MouseEvent ausgelöst wurde.

+
+
{{domxref("MouseEvent.clientX")}} {{readonlyinline}}
+
Die x-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
+
{{domxref("MouseEvent.clientY")}} {{readonlyinline}}
+
Die y-Koordinate des Mauszeigers in lokalen (DOM Inhalt) Koordinaten.
+
{{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}}
+
Gibt true zurück, wenn die control Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.metaKey")}} {{readonlyinline}}
+
Gibt true zurück, wenn die meta Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.movementX")}} {{readonlyinline}}
+
Die x-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.
+
{{domxref("MouseEvent.movementY")}} {{readonlyinline}}
+
Die y-Koordinate des Mauszeigers relativ zur Position des letzten {{event("mousemove")}} Events.
+
{{domxref("MouseEvent.offsetX")}} {{readonlyinline}}{{experimental_inline}}
+
Die x-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
+
{{domxref("MouseEvent.offsetY")}} {{readonlyinline}}{{experimental_inline}}
+
Die y-Koordinate des Mauszeigers relativ zur Position zur padding-Kante des Zielknotens.
+
{{domxref("MouseEvent.pageX")}} {{readonlyinline}}{{experimental_inline}}
+
Die x-Koordinate des Mauszeigers relativ zum gesamten Dokument.
+
{{domxref("MouseEvent.pageY")}} {{readonlyinline}}{{experimental_inline}}
+
Die y-Koordinate des Mauszeigers relativ zum gesamten Dokument.
+
{{domxref("MouseEvent.region")}} {{readonlyinline}}
+
Gibt die id des Trefferbereichs wieder, die von dem Event betroffen ist. Wenn kein Trefferbereich betroffen ist, wird null zurückgegeben.
+
{{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}}
+
+

Das sekundäre Zielobjekt des Events, sofern verfügbar.

+
+
{{domxref("MouseEvent.screenX")}} {{readonlyinline}}
+
Die x-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
+
{{domxref("MouseEvent.screenY")}} {{readonlyinline}}
+
Die y-Koordinate des Mauszeigers in globalen (Bildschirm) Koordinaten.
+
{{domxref("MouseEvent.shiftKey")}} {{readonlyinline}}
+
Gibt true zurück, wenn die shift Taste gedrückt war, während das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.which")}} {{non-standard_inline}} {{readonlyinline}}
+
Der Button, der gedrückt war, als das MouseEvent ausgelöst wurde.
+
{{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{readonlyinline}}
+
Die Stärke des Drucks, die auf ein Touch- oder Tabletgerät ausgeübt wurde, während das Event ausgelöst wurde. Der Wert bewegt sich zwischen 0.0 (Minimalste Druckstärke) und 1.0 (Maximalster Druckstärke)
+
{{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}}
+
+

Der Typ des Geräts das den Event generiert hat (eine der MOZ_SOURCE_* Konstanten die weiter unten gelistet werden). Es ermöglicht zum Beispiel die Bestimmung ob ein MouseEvent tatsächlich von einer Maus oder von einem Touchgerät ausgelöst wurde (welches den Grad der Genauigkeit beeinflusst, mit dem man die Koordinaten des Events betrachten kann).

+
+
{{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}}
+
Die Stärke des Drucks, die beim Klick angewendet wurde.
+
{{domxref("MouseEvent.x")}} {{experimental_inline}}{{readonlyinline}}
+
Alias auf {{domxref("MouseEvent.clientX")}}.
+
{{domxref("MouseEvent.y")}} {{experimental_inline}}{{readonlyinline}}
+
Alias auf {{domxref("MouseEvent.clientY")}}
+
+ +

Konstanten

+ +
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Minimum der Kraft, die für einen normalen Klick notwendig ist.
+
{{domxref("MouseEvent.WEBKIT_FORCE_AT_FORCE_MOUSE_DOWN")}} {{non-standard_inline}}{{readonlyinline}}
+
Minimum der Kraft, die für einen Force-Click notwendig ist.
+
+ +

Methoden

+ +

Das Interface erbt auch die Methoden seiner Eltern, {{domxref("UIEvent")}} und {{domxref("Event")}}.

+ +
+
{{domxref("MouseEvent.getModifierState()")}}
+
Gibt den aktuellen Zustand der angegebenen Modifizierungstaste zurück. Für Detailinformationen siehe {{domxref("KeyboardEvent.getModifierState()")}}.
+
{{domxref("MouseEvent.initMouseEvent()")}} {{deprecated_inline}}
+
Initialisiert den Wert eines erzeugten MouseEvent. Wenn der Event bereits ausgesendet wurde, wird durch diese Methode nichts passieren.
+
+ +

Beispiele

+ +

Dieses Beispiel demonstriert das Simulieren eines Klicks (die programmatische Erzeugung eines Klickereignisses) auf eine Checkbox mittels DOM Methoden. 

+ +
function simulateClick() {
+  var evt = new MouseEvent("click", {
+    bubbles: true,
+    cancelable: true,
+    view: window
+  });
+  var cb = document.getElementById("checkbox"); //element to click on
+  var canceled = !cb.dispatchEvent(evt);
+  if(canceled) {
+    // A handler called preventDefault
+    alert("canceled");
+  } else {
+    // None of the handlers called preventDefault
+    alert("not canceled");
+  }
+}
+document.getElementById("button").addEventListener('click', simulateClick);
+ +
<p><label><input type="checkbox" id="checkbox"> Checked</label>
+<p><button id="button">Click me</button>
+ +

Auf den Button klicken, um zu sehen wie das Beispiel funktioniert:

+ +

{{ EmbedLiveSample('Example', '', '', '') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View','#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}Redefines MouseEvent from long to double. This means that a PointerEvent whose pointerType is mouse will be a double.
{{SpecName("HTML WHATWG", "#dom-mouseevent-region", "MouseEvent.region")}}{{Spec2('HTML WHATWG')}}From {{SpecName('DOM3 Events')}}, added the region property.
{{SpecName('Pointer Lock','#extensions-to-the-mouseevent-interface','MouseEvent')}}{{Spec2('Pointer Lock')}}From {{SpecName('DOM3 Events')}}, added movementX and movementY properties.
{{SpecName('CSSOM View', '#extensions-to-the-mouseevent-interface', 'MouseEvent')}}{{Spec2('CSSOM View')}}From {{SpecName('DOM3 Events')}}, added offsetX and offsetY, pageX and pageY, x, and y properties. Redefined screen, page, client and coordinate (x and y) properties as double from long.
{{SpecName('DOM3 Events','#events-mouseevents','MouseEvent')}}{{Spec2('DOM3 Events')}}From {{SpecName('DOM2 Events')}}, added the MouseEvent() constructor, the getModifierState() method and the buttons property.
{{SpecName('DOM2 Events','#Events-MouseEvent','MouseEvent')}}{{Spec2('DOM2 Events')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.movementX","movementX")}}
+ {{domxref("MouseEvent.movementY","movementY")}}		{{CompatChrome(37)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}} {{property_prefix("moz")}}{{ CompatUnknown() }}{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{ domxref("MouseEvent.buttons", "buttons") }}{{CompatChrome(43)}}{{CompatVersionUnknown()}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatNo}}
{{ domxref("MouseEvent.which", "which") }}{{CompatChrome(1)}}{{CompatVersionUnknown()}}1.09.05.01.0
{{domxref("MouseEvent.getModifierState()", "getModifierState()")}}{{CompatChrome(47)}}{{CompatVersionUnknown()}}{{CompatGeckoDesktop(15)}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
{{domxref("MouseEvent.mozPressure", "mozPressure")}} and {{domxref("MouseEvent.mozInputSource", "mozInputSource")}} {{non-standard_inline}}{{CompatNo}}{{ CompatUnknown() }}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
{{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}{{CompatChrome(45)}}{{ CompatUnknown() }}{{CompatGeckoDesktop(11)}}9.0{{CompatVersionUnknown()}}{{ CompatUnknown() }}
{{domxref("MouseEvent.region")}}{{CompatChrome(51)}}[1]{{ CompatUnknown() }}{{CompatGeckoDesktop(32)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("MouseEvent.offsetX")}}, and {{domxref("MouseEvent.offsetY")}}{{CompatVersionUnknown()}}9{{CompatGeckoDesktop(40)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
{{domxref("MouseEvent.screenX")}}, {{domxref("MouseEvent.screenY")}}, {{domxref("MouseEvent.clientX")}}, and {{domxref("MouseEvent.Y")}} are double instead of long.{{CompatChrome(56)}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

[1] Setzt das Aktivieren von ExperimentalCanvasFeatures voraus.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/mozmobileconnection/index.html b/files/de/web/api/mozmobileconnection/index.html new file mode 100644 index 0000000000..f4d2882aab --- /dev/null +++ b/files/de/web/api/mozmobileconnection/index.html @@ -0,0 +1,134 @@ +--- +title: MozMobileConnection +slug: Web/API/MozMobileConnection +translation_of: Archive/B2G_OS/API/MozMobileConnection +--- +

{{APIRef("Firefox OS")}} {{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('certified') }}

+ +
+

This API is used to get information about the current mobile voice and data connection states of the device. It is accessible through {{domxref("window.navigator.mozMobileConnections","navigator.mozMobileConnections")}}, which returns an array of MozMobileConnection objects.

+
+ +
+

Note: The syntax used to be window.navigator.mozMobileConnection, returning a single MozMobileConnection object, but this was updated in Firefox 1.3 due to the introduction of Multi-SIM support (Dual-SIM-Dual-Standby or DSDS).

+
+ +

Interface overview

+ +
callback EventHandler = any (Event event);
+
+interface MozMobileConnection : EventTarget
+{
+  const long ICC_SERVICE_CLASS_VOICE = (1 << 0);
+  const long ICC_SERVICE_CLASS_DATA = (1 << 1);
+  const long ICC_SERVICE_CLASS_FAX = (1 << 2);
+  const long ICC_SERVICE_CLASS_SMS = (1 << 3);
+  const long ICC_SERVICE_CLASS_DATA_SYNC = (1 << 4);
+  const long ICC_SERVICE_CLASS_DATA_ASYNC = (1 << 5);
+  const long ICC_SERVICE_CLASS_PACKET = (1 << 6);
+  const long ICC_SERVICE_CLASS_PAD = (1 << 7);
+  const long ICC_SERVICE_CLASS_MAX = (1 << 7);
+
+  readonly attribute MozMobileConnectionInfo voice;
+  readonly attribute MozMobileConnectionInfo data;
+  readonly attribute DOMString networkSelectionMode;
+  readonly attribute DOMString iccId;
+
+  DOMRequest getNetworks();
+  DOMRequest selectNetwork(MozMobileNetworkInfo network);
+  DOMRequest selectNetworkAutomatically();
+  DOMRequest sendMMI(DOMString mmi);
+  DOMRequest cancelMMI();
+  DOMRequest setCallForwardingOption(MozMobileCFInfo CFInfo);
+  DOMRequest getCallForwardingOption(unsigned short reason);
+
+  attribute EventHandler onvoicechange;
+  attribute EventHandler ondatachange;
+  attribute EventHandler onussdreceived;
+  attribute EventHandler ondataerror;
+  attribute EventHandler oncfstatechange;
+};
+
+ +

Properties

+ +
+
 
+
{{domxref("MozMobileConnection.voice")}} {{readonlyinline}}
+
A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the voice connection.
+
{{domxref("MozMobileConnection.data")}} {{readonlyinline}}
+
A {{domxref("MozMobileConnectionInfo")}} object that gives access to information about the data connection.
+
{{domxref("MozMobileConnection.iccId")}} {{readonlyinline}}
+
A string that indicates the Integrated Circuit Card Identifier of the SIM this mobile connection corresponds to.
+
{{domxref("MozMobileConnection.networkSelectionMode")}} {{readonlyinline}}
+
A string that indicates the selection mode of the voice and data networks.
+
{{domxref("MozMobileConnection.oncfstatechange")}}
+
A handler for the {{event("cfstatechange")}} event. This event is fired when the call forwarding state changes.
+
{{domxref("MozMobileConnection.ondatachange")}}
+
A handler for the {{event("datachange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object changes values.
+
{{domxref("MozMobileConnection.ondataerror")}}
+
A handler for the {{event("dataerror")}} event. This event is fired whenever the {{domxref("MozMobileConnection.data","data")}} connection object receive an error from the RIL.
+
{{domxref("MozMobileConnection.onussdreceived")}}
+
A handler for the {{event("ussdreceived")}} event. This event is fired whenever a new USSD message is received.
+
{{domxref("MozMobileConnection.onvoicechange")}}
+
A handler for the {{event("voicechange")}} event. This event is fired whenever the {{domxref("MozMobileConnection.voice","voice")}} connection object changes.
+
+ +

Constants

+ + + +

Methods

+ +
+

Note: All original methods from the MozMobileConnection interface are fully asynchronous. They all return a {{domxref("DOMRequest")}} which has a onsuccess and onerror event handler to handle the success or failur of the method call.

+
+ +
+
{{domxref("MozMobileConnection.cancelMMI()")}}
+
Cancel the current MMI request if one exists.
+
{{domxref("MozMobileConnection.getCallForwardingOption()")}}
+
Queries current call forward options.
+
{{domxref("MozMobileConnection.getNetworks()")}}
+
Search for available networks.
+
{{domxref("MozMobileConnection.selectNetwork()")}}
+
Manually selects a network, overriding the radio's current selection.
+
{{domxref("MozMobileConnection.selectNetworkAutomatically()")}}
+
Tell the radio to automatically select a network.
+
{{domxref("MozMobileConnection.sendMMI()")}}
+
Send a MMI message.
+
{{domxref("MozMobileConnection.setCallForwardingOption()")}}
+
Configures call forward options.
+
+ +

The MozMobileConnection interface also inherit from the {{domxref("EventTarget")}} interface

+ +

{{page("/en-US/docs/DOM/EventTarget","Methods")}}

+ +

Specification

+ +

Not part of any specification

+ +

See also

+ + diff --git a/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html new file mode 100644 index 0000000000..242901b1c2 --- /dev/null +++ b/files/de/web/api/mozmobileconnection/selectnetworkautomatically/index.html @@ -0,0 +1,57 @@ +--- +title: MozMobileConnection.selectNetworkAutomatically +slug: Web/API/MozMobileConnection/selectNetworkAutomatically +translation_of: Archive/B2G_OS/API/MozMobileConnection/selectNetworkAutomatically +--- +

{{APIRef("Firefox OS")}} {{ non-standard_header() }}

+ +

{{ B2GOnlyHeader2('certified') }}

+ +

Summary

+ +

The selectNetworkAutomatically method is used to tell the radio to automatically select a network.

+ +
+

Note: If the network is actually changed by this request, the voicechange and datachange events are fired.

+
+ +

Syntax

+ +
var request = navigator.mozMobileConnection.selectNetworks();
+ +

Return

+ +

A {{domxref("DOMRequest")}} object to handle the success or failure of the method call.

+ +

If the request fails, the request's error is one of:

+ + + +

Example

+ +
var switchNetwork = navigator.mozMobileConnection.selectNetworkAutomatically();
+
+switchNetwork.onsuccess = function () {
+  console.log('Successful switch');
+}
+
+switchNetwork.onerror = function () {
+  console.log('Unable to switch: ' + this.error.name);
+}
+
+ +

Specification

+ +

Not part of any specification.

+ +

See also

+ + diff --git a/files/de/web/api/mutationobserver/index.html b/files/de/web/api/mutationobserver/index.html new file mode 100644 index 0000000000..c1367cea73 --- /dev/null +++ b/files/de/web/api/mutationobserver/index.html @@ -0,0 +1,287 @@ +--- +title: MutationObserver +slug: Web/API/MutationObserver +tags: + - Beobachter-Muster + - DOM-Knoten + - Fortgeschrittene + - Observer Pattern + - Programmierung + - Wertänderungen verfolgen + - Änderungen überwachen +translation_of: Web/API/MutationObserver +--- +

{{APIRef("DOM")}}

+ +

Der MutationObserver ermöglicht es, auf Änderungen im DOM-Element zu reagieren. Er löst die Mutation Events aus der DOM3 Events Spezifikation ab.

+ +

Konstruktor

+ +

MutationObserver()

+ +

Konstruktor zum Instanziieren neuer DOM-MutationObservers.

+ +
MutationObserver(
+  function callback
+);
+
+ +
Parameters
+ +
+
callback
+
Die Funktion wird bei jeder Veränderung am DOM-Element ausgelöst. Der Observer (Beobachter) ruft die Callbackfunktion mit zwei Argumenten auf. Das erste ist ein Array aus MutationRecord-Objekten. Das zweite ist diese Instanz des MutationObserver.
+
+ +

Methoden

+ + + + + + + + + + + + + +
void observe( {{domxref("Node")}} target, MutationObserverInit options );
void disconnect();
Array takeRecords();
+ +

observe()

+ +

Registriert die Instanz von MutationObserver , um Meldungen über Veränderungen DOM-Elements der angegebenen Node zu erhalten.

+ +
void observe(
+  {{domxref("Node")}} target,
+  MutationObserverInit options
+);
+
+ +
Parameters
+ +
+
target
+
Die {{domxref("Node")}} , zu dem Veränderungen im DOM beobachtet werden sollen.
+
options
+
Ein MutationObserverInit-Objekt, das angibt, welche DOM-Veränderungen gemeldet werden sollen.
+
+ +
Anmerkung: Einen Observer zu einem Element hinzufügen funktioniert genau wie addEventListener - man kann es auch von mehreren Observern gleichzeitig beobachten lassen. Das heißt, wenn man ein Element doppelt beobachtet, feuert es nicht zweimal und man muss auch nicht zweimal disconnect() aufrufen. Mit anderen Worten: wenn man ein Element beobachtet, macht es keinerlei Unterschied, wenn man es durch dasselbe Objekt nochmal beobachten lässt. Wenn es von einem anderen Objekt beobachtet wird, dann wird natürlich zusätzlich ein weiterer Observer angehängt.
+ +

disconnect()

+ +

Sorgt dafür, dass die MutationObserver-Instanz die Überwachung der DOM-Benachrichtigungen beendet. Bis die observe() -Methode erneut benutzt wird, wird die Callback-Methode des Observers nicht aufgerufen.

+ +
void disconnect();
+
+ +

takeRecords()

+ +

Leert die Nachrichten-Kette ("record queue") der MutationObserver Instanz gibt den vorher dort vorhandenen Inhalt zurück.

+ +
Array takeRecords();
+
+ +
Return value
+ +

Gibt ein Array mit MutationRecords zurück.

+ +

MutationObserverInit

+ +

MutationObserverInit ist ein Objekt, das die folgenden Eigenschaften enthalten (und damit festlegen) kann:

+ +
Anmerkung: Als Mindestanforderung muss childList, attributes, oder characterData auf true gesetzt werden. Anderenfalls wird ein Fehler "Ungültiger String angegeben" ("An invalid or illegal string was specified") ausgelöst.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyDescription
childListWenn Kindelemente (child nodes) der Ziel-Node (inklusive Textnodes) beobachtet werden sollen, muss childList auf true gesetzt werden.
attributesMuss auf true gesetzt werden, wenn Veränderungen an Attributen der Ziel-Node (target node) beobachtet bzw. berichtet werden sollen.
characterData +

Muss true sein, wenn Veränderungen an den Daten der Ziel-Node beobachtet werden sollen.

+
subtreeAuf true setzen, wenn nicht nur Änderungen an der Ziel-Node (target node) beobachtet werden sollen, sondern auch Veränderungen von dessen Kindelementen (child nodes).
attributeOldValueMuss auf true gesetzt werden, wenn attributes ebenfalls true ist und der Wert des target-node-Attributs vor der Veränderung ebenfalls gemeldet werden soll.
characterDataOldValue +

Muss auf true gesetzt werden, wenn characterData ebenfalls true ist und der Wert von data vor der Veränderung ebenfalls gemeldet werden soll.

+
attributeFilterMit dieser Eigenschaft kann ein Array mit lokalen Attributnamen angegeben werden (ohne Namespace), wenn nicht alle Attribute beobachtet werden sollen.
+ +

MutationRecord

+ +

Als erstes Argument wird an die Callback-Funktion des Observers ein Array aus MutationRecord-Objekten übergeben. Ein MutationRecord-Objekt beinhaltet die folgenden Eigenschaften:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
typeStringGibt attributes zurück, wenn die Veränderung eine Änderung an Attributen der Node gewesen ist, characterData wenn Veränderungen an der CharacterData-Node vorgenommen wurden, und childList wenn es sich um eine Veränderung an den untergeordneten Knoten im Baum handelt.
target{{domxref("Node")}}Gibt die von der Veränderung betroffene Node zurück, abhängig von type. Bei attributes das Element, von dem Attribute geändert wurden. Bei characterData wird die CharacterData-Node zurückgegeben. Bei childList die Node, deren untergeordnete Kindelemente verändert wurden.
addedNodes{{domxref("NodeList")}}Gibt die hinzugefügten Nodes zurück. Wenn keine hinzugefügt wurden, wird eine leere NodeList zurückgegeben.
removedNodes{{domxref("NodeList")}}Gibt die entfernten Nodes zurück. Wenn keine entfernt wurden, wird eine leere NodeList zurückgegeben.
previousSibling{{domxref("Node")}}Gibt den vorhergehenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst null.
nextSibling{{domxref("Node")}}Gibt den folgenden Sibling der hinzugefügten oder entfernten Node(s) zurück, sonst null.
attributeNameStringGibt den lokalen Namen des geänderten Attributs zurück, sonst null.
attributeNamespaceStringGibt den lokalen Namespace des geänderten Attributs zurück, sonst null.
oldValueStringRückgabewert hängt vom type ab. Bei attributes wird der Wert des Attributs vor der Änderung zurückgegeben. Bei characterData, der Wert von Data vor der Änderung. Bei childList wird null zurückgegeben.
+ +

Nutzungsbeispiel

+ +

Das folgende Beispiel wurde aus diesem Blog-Post übernommen.

+ +
// zu überwachende Zielnode (target) auswählen
+var target = document.querySelector('#some-id');
+
+// eine Instanz des Observers erzeugen
+var observer = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    console.log(mutation.type);
+  });
+});
+
+// Konfiguration des Observers: alles melden - Änderungen an Daten, Kindelementen und Attributen
+var config = { attributes: true, childList: true, characterData: true };
+
+// eigentliche Observierung starten und Zielnode und Konfiguration übergeben
+observer.observe(target, config);
+
+// später: Observation wieder einstellen
+observer.disconnect();
+
+ +

Weiterführende Informationen (engl.)

+ + + +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support18 {{ property_prefix("WebKit") }}
+ 26		{{ CompatGeckoDesktop(14) }}11156.0 {{ property_prefix("WebKit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}18 {{ property_prefix("WebKit") }}
+ 26		{{ CompatGeckoMobile(14) }}{{ CompatUnknown() }}15 +

6 {{ property_prefix("WebKit")}}

+ +

7

+
+
diff --git a/files/de/web/api/navigator/index.html b/files/de/web/api/navigator/index.html new file mode 100644 index 0000000000..b6efb42b05 --- /dev/null +++ b/files/de/web/api/navigator/index.html @@ -0,0 +1,122 @@ +--- +title: Navigator +slug: Web/API/Navigator +tags: + - API + - HTML DOM +translation_of: Web/API/Navigator +--- +

{{ apiref() }}

+ +

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

+ +

A Navigator object can be retrieved using the read-only {{domxref("Window.navigator")}} property.

+ +

Properties

+ +

Doesn't inherit any property, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorLanguage")}}, {{domxref("NavigatorOnLine")}}, {{domxref("NavigatorGeolocation")}}, {{domxref("NavigatorPlugins")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NetworkInformation")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the internal "code" name of the current browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appName")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("DOMString")}} with the official name of the browser. Do not rely on this property to return the correct value.
+
{{domxref("NavigatorID.appVersion")}} {{readonlyInline}}{{experimental_inline}}
+
Returns the version of the browser as a {{domxref("DOMString")}}. Do not rely on this property to return the correct value.
+
{{domxref("Navigator.battery")}} {{readonlyInline}}
+
Returns a {{domxref("BatteryManager")}} object you can use to get information about the battery charging status.
+
{{domxref("NetworkInformation.connection")}} {{readonlyInline}}{{experimental_inline}}
+
Provides a {{domxref("Connection")}} with information about the network connection of a device.
+
{{domxref("NavigatorGeolocation.geolocation")}} {{readonlyInline}}
+
Returns a {{domxref("Geolocation")}} object allowing accessing the location of the device.
+
{{domxref("NavigatorPlugins.javaEnabled")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Boolean")}} flag indicating whether the host browser is Java-enabled or not.
+
{{domxref("NavigatorLanguage.language")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the preferred language of the user, usually the language of the browser UI. The null value is returned when this is unknown.
+
{{domxref("NavigatorLanguage.languages")}} {{readonlyInline}}
+
Returns an array of {{domxref("DOMString")}} representing the languages known to the user, by order of preference.
+
{{domxref("NavigatorPlugins.mimeTypes")}} {{readonlyInline}}{{experimental_inline}}
+
Returns an {{domxref("MimeTypeArray")}} listing the MIME types supported by the browser.
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
{{domxref("Navigator.oscpu")}}
+
Returns a string that represents the current operating system.
+
{{domxref("NavigatorID.platform")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a string representing the platform of the browser. Do not rely on this function to return a significant value.
+
{{domxref("NavigatorPlugins.plugins")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("PluginArray")}} listing the plugins installed in the browser.
+
{{domxref("NavigatorID.product")}} {{readonlyInline}} {{experimental_inline}}
+
Always returns 'Gecko', on any browser. This property is kept only for compatibility purpose.
+
{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}
+
Returns the user agent string for the current browser.
+
{{domxref("Navigator.serviceWorker")}} {{readonlyInline}}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
+ +

Non-standard

+ +
+
{{domxref("window.navigator.buildID", "navigator.buildID")}} {{non-standard_inline}}
+
Returns the build identifier of the browser (e.g., "2006090803").
+
{{domxref("Navigator.cookieEnabled")}} {{non-standard_inline}}
+
Returns a boolean indicating whether cookies are enabled in the browser or not.
+
{{domxref("navigator.doNotTrack")}} {{non-standard_inline}}
+
Reports the value of the user's do-not-track preference. When this value is "yes", your web site or application should not track the user.
+
{{domxref("navigator.id")}} {{non-standard_inline}}
+
Returns the {{domxref("window.navigator.id", "id")}} object which you can use to add support for BrowserID to your web site.
+
{{domxref("window.navigator.mozApps", "navigator.mozApps")}} {{non-standard_inline}}
+
Returns an {{domxref("window.navigator.mozApps", "Apps")}} object you can use to install, manage, and control Open Web apps.
+
{{domxref("Navigator.mozAudioChannelManager", "navigator.mozAudioChannelManager")}} {{non-standard_inline}}
+
The navigator.mozAudioChannelManager object provides access to the {{domxref("mozAudioChannelManager")}} interface, which is used to manage your Firefox OS device's audio channels, including setting what channel's volume to affect when the volume buttons are pressed inside a particular app.
+
{{domxref("window.navigator.mozNotification","navigator.mozNotification")}} {{deprecated_inline("22")}} {{non-standard_inline}}
+ {{domxref("window.navigator.webkitNotification","navigator.webkitNotification")}}
+
Returns a {{domxref("navigator.mozNotification", "notification")}} object you can use to deliver notifications to the user from your web application.
+
{{domxref("navigator.mozSocial")}} {{non-standard_inline}}
+
The Object, returned by the navigator.mozSocial property, is available within the social media provider's panel to provide functionality it may need.
+
{{domxref("window.navigator.productSub", "navigator.productSub")}} {{non-standard_inline}}
+
Returns the build number of the current browser (e.g., "20060909").
+
{{domxref("window.navigator.securitypolicy", "navigator.securitypolicy")}} {{non-standard_inline}}
+
Returns an empty string. In Netscape 4.7x, returns "US & CA domestic policy" or "Export policy".
+
{{domxref("window.navigator.standalone", "navigator.standalone")}} {{non-standard_inline}}
+
Returns a boolean indicating whether the browser is running in standalone mode. Available on Apple's iOS Safari only.
+
{{domxref("window.navigator.vendor", "navigator.vendor")}} {{non-standard_inline}}
+
Returns the vendor name of the current browser (e.g., "Netscape6").
+
{{domxref("window.navigator.vendorSub", "navigator.vendorSub")}} {{non-standard_inline}}
+
Returns the vendor version number (e.g. "6.1").
+
navigator.webkitPointer {{non-standard_inline}}
+
Returns a PointerLock object for the Mouse Lock API.
+
+ +

Methods

+ +

Doesn't inherit any method, but implements those defined in {{domxref("NavigatorID")}}, {{domxref("NavigatorContentUtils")}}, {{domxref("NavigatorUserMedia")}}, and {{domxref("NavigatorStorageUtils")}}.

+ +

Standard

+ +
+
{{domxref("NavigatorUserMedia.getUserMedia()")}}
+
After having prompted the user for permission, returns the audio or video stream associated to a camera or microphone on the local computer.
+
{{domxref("window.navigator.registerContentHandler", "navigator.registerContentHandler")}}
+
Allows web sites to register themselves as a possible handler for a given MIME type.
+
{{domxref("navigator.registerProtocolHandler", "navigator.registerProtocolHandler")}}
+
Allows web sites to register themselves as a possible handler for a given protocol.
+
{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline("1.7.8")}} {{obsolete_inline("9.0")}} {{experimental_inline}}
+
Returns false. JavaScript taint/untaint functions removed in JavaScript 1.2.
+
{{domxref("Navigator.vibrate()")}} {{gecko_minversion_inline("11.0")}}
+
Causes vibration on devices with support for it. Does nothing if vibration support isn't available.
+
+ +

Non standard

+ +
+
{{domxref("window.navigator.mozIsLocallyAvailable", "navigator.mozIsLocallyAvailable")}} {{non-standard_inline}}
+
Lets code check to see if the document at a given URI is available without using the network.
+
{{domxref("window.navigator.mozPay", "navigator.mozPay")}} {{non-standard_inline}}
+
Allows in-app payment.
+
{{domxref("window.navigator.preference", "navigator.preference")}} {{obsolete_inline("2.0")}} {{non-standard_inline}}
+
Sets a user preference. This method is only available to privileged code and is obsolete; you should use the XPCOM Preferences API instead.
+
{{domxref("window.navigator.requestWakeLock", "navigator.requestWakeLock")}} {{non-standard_inline}}
+
Request a wake lock for a resource. A wake lock prevents a specific part of a device from being turned off automatically.
+
diff --git a/files/de/web/api/navigator/registerprotocolhandler/index.html b/files/de/web/api/navigator/registerprotocolhandler/index.html new file mode 100644 index 0000000000..2ffd20da9d --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/index.html @@ -0,0 +1,170 @@ +--- +title: Navigator.registerProtocolHandler() +slug: Web/API/Navigator/registerProtocolHandler +translation_of: Web/API/Navigator/registerProtocolHandler +--- +
{{APIRef("HTML DOM")}}
+ +

In progress. Allows web sites to register themselves as possible handlers for particular protocols.

+ +

For security reasons, by default, web sites may only register protocol handlers for themselves — the domain and protocol of the handler must match the current site. However, users may set a preference in Firefox to allow cross website installation, by setting the gecko.handlerService.allowRegisterFromDifferentHost pref to true in about:config.

+ +

Extensions can register protocol handlers targeting other sites: see the 'See Also' section for how to use them from XPCOM.

+ +

Syntax

+ +
window.navigator.registerProtocolHandler(protocol, url, title);
+
+ +

Parameters

+ +
+
protocol
+
The protocol the site wishes to handle, specified as a string. For example, you can register to handle SMS text message links by registering to handle the "sms" scheme.
+
url
+
The URL of the handler, as a string. This string should include "%s" as a placeholder which will be replaced with the escaped URL of the document to be handled. This URL might be a true URL, or it could be a phone number, email address, or so forth. +
The handler's URL must use one of "http" or "https" as its scheme.
+
+
title
+
A user-readable title string for the protocol handler. This will be displayed to the user in interface objects as needed.
+
+ +

Exceptions

+ +
+
SecurityError
+
The user agent blocked registration of the protocol handler. This might happen if an invalid scheme is specified, such as "http", which cannot be registered for obvious security reasons.
+
SyntaxError
+
The "%s" string is missing from the specified protocol handler URL.
+
+ +

Permitted schemes

+ +

For security reasons, registerProtocolHandler() has restrictions on which schemes may be registered. A custom scheme may be registered as long as the scheme's name begins with "web+", is at least five characters long (including the "web+" prefix), and has only lower-case ASCII letters in its name. For example, "web+burger", as shown in the {{anch("Example")}} below.

+ +

Otherwise, the scheme must be one of the schemes on the whitelist below:

+ +
+ +
+ +

Example

+ +

If your web application is located at http://www.google.co.uk, you can register a protocol handler for it to handle "web+burger" links like this:

+ +
navigator.registerProtocolHandler("web+burger",
+                                  "https://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+
+ +

This creates a handler that allows web+burger:// links to direct the user to your web application, inserting the burger information specified in the link into the URL. Recall that this script must be run from the same domain (so any page location at google.co.uk) and the second argument passed must be of http or https scheme (in this example it is https) .

+ +

The user will be notified that your code has asked to register the protocol handler, so that they can decide whether or not to permit it. See the screenshot below for an example.

+ +

+ +
+

"Register a webmail service as mailto handler" shows how to do this from XPCOM scope.

+
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#dom-navigator-registerprotocolhandler', 'registerProtocolHandler()')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support13[1]{{CompatGeckoDesktop("1.9")}}{{CompatUnknown}}11.60{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("3.5")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Protocol whitelist includes mailto, mms, nntp, rtsp, and webcal. Custom protocols must be prefixed with web+.

+ +

See also

+ + diff --git a/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html new file mode 100644 index 0000000000..5f48e63097 --- /dev/null +++ b/files/de/web/api/navigator/registerprotocolhandler/webbasierte_protokoll-handler/index.html @@ -0,0 +1,127 @@ +--- +title: Webbasierte Protokoll-Handler +slug: Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler +translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +--- +
{{Fx_minversion_header(3)}}
+ +

Hintergrund

+ +

Man findet im Web häufiger Seiten, die Verweise mit anderen Protokollen als HTTP einsetzen. Ein Beispiel ist das mailto: Protokoll:

+ +
+
<a href="mailto:webmaster@example.com">Web Master</a>
+
+ +

Seitenersteller können mailto: Verweise nutzen, wenn sie einen bequemen Weg anbieten möchten, E-Mails direkt aus ihrer Webseite heraus zu versenden. Wird der Link aktiviert, sollte der Browser das im Betriebssystem eingestelle Standardprogramm für E-Mail starten. Das ist ein Beispiel für einen desktopbasierten Protokoll-Handler.

+ +

Webbasierte Protokoll-Handler erlauben webbasierten Anwendungen ebenfall an solchen Prozessen teilzunehmen. Das wird mit der Migration vieler Anwendungen ins Web zunehmend wichtiger. Tatsächlich gibt es bereits viele Webanwendungen, die einen mailto: Verweis verarbeiten könnten.

+ +

Registrierung

+ +

Das Einrichten einer webbasierten Anwendung als Protokoll-Handler ist unkompliziert. Die Webapp nutzt registerProtocolHandler(), um sich selbst beim Browser als potentiellen Handler für ein bestimmtes Protokoll zu registrieren. Ein Beispiel:

+ +
navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+ +

Die Parameter sind:

+ + + +

Führt ein Browser diesen Code aus, wird er über einen Dialog die Erlaubnis des Nutzers einholen, die Webanwendung als Handler für dieses Protokoll zu registrieren. Firefox zeigt eine Nachricht in der Notification Bar:

+ +

+ +
Hinweis: Das bei der Registrierung angegebene URL Template muss mit der die Anfrage stellenden Webseite übereinstimmen, oder die Registrierung schlägt fehl. Beispielsweise kann http://example.com/homepage.html einen Protokoll-Handler für http://example.com/handle_mailto/%s registrieren, aber nicht für http://example.org/handle_mailto/%s.
+ +

Wird derselbe Handler mehrfach registriert, meldet der Browser das durch ein weiteres Pop-Up, das auf die bereits erfolgte Registrierung hinweist. Daher ist es sinnvoll, die Registrierung mit einem vorangehenden Check abzusichern.

+ +

Beispiel

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Web Protocol Handler Sample - Register</title>
+  <script type="text/javascript">
+    navigator.registerProtocolHandler("burger",
+                                  "http://www.google.co.uk/?uri=%s",
+                                  "Burger handler");
+  </script>
+</head>
+<body>
+  <h1>Web Protocol Handler Sample</h1>
+  <p>This web page will install a web protocol handler for the <code>fake:</code> protocol.</p>
+</body>
+</html>
+
+ +

Aktivierung

+ +

Ab jetzt wird der Browser bei jedem Klick auf einen Verweis, der das neu registrierte Protokoll verwendet, die Ausführung auf die registrierte URL umleiten. Firefox wird zuvor standardmäßig die Bestätigung durch den Nutzer einholen.

+ +

Beispiel

+ +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+  <title>Web Protocol Handler Sample - Test</title>
+</head>
+<body>
+  <p>Hey have you seen <a href="burger:cheeseburger">this</a> before?</p>
+</body>
+</html>
+
+ +

Handling

+ +

Der nächste Schritt ist das tatsächliche Handling. Der Browser kombiniert die href aus dem aktivierten Link mit dem registrierten URL Template und führt dann damit einen HTTP GET Request aus. Hervorgehend aus den vorangegangenen Beispielen würde der Request auf folgender URL stattfinden:

+ +
http://www.google.co.uk/?uri=burger:cheeseburger
+
+ +

Serverseitiger Code kann dann die query String Parameter extrahieren und die gewünschte Aktion ausführen.

+ +
Hinweis: Dem serverseitigen Code wird der gesamte Inhalt der href übergeben. D.h. der Server muss das Protokoll aus den Daten parsen.
+ +

Beispiel

+ +
<?php
+$value = "";
+if ( isset ( $_GET["value"] ) ) {
+  $value = $_GET["value"];
+}
+?>
+
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
+<html lang="en">
+<head>
+    <title>Web Protocol Handler Sample</title>
+</head>
+<body>
+  <h1>Web Protocol Handler Sample - Handler</h1>
+  <p>This web page is called when handling a <code>burger:</code> protocol action. The data sent:</p>
+  <textarea>
+<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
+  </textarea>
+</body>
+</html>
+
+ +

Verweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/navigator/sendbeacon/index.html b/files/de/web/api/navigator/sendbeacon/index.html new file mode 100644 index 0000000000..1e8ff5ea2b --- /dev/null +++ b/files/de/web/api/navigator/sendbeacon/index.html @@ -0,0 +1,144 @@ +--- +title: Navigator.sendBeacon() +slug: Web/API/Navigator/sendBeacon +translation_of: Web/API/Navigator/sendBeacon +--- +
{{APIRef("HTML DOM")}}{{SeeCompatTable}}
+ +

Die navigator.sendBeacon() Methode dient dazu, kleinere Datenmengen asynchron per HTTP vom User Agent zum Server zu senden.

+ +

Syntax

+ +
navigator.sendBeacon(url, data);
+
+ +

Parameter

+ +
+
url
+
Der url Parameter steht für die ermittelte URL, an die data zu senden ist. 
+
+ +
+
data
+
Der Parameter data enthält zu übermittelnde Daten der Art {{domxref("ArrayBufferView")}}, {{domxref("Blob")}}, {{domxref("DOMString")}} oder {{domxref("FormData")}}.
+
+ +

Rückgabewerte

+ +

Die sendBeacon() Methode gibt true zurück, falls der User Agent erfolgreich war, data zum Transfer bereit zu stellen. Andernfalls ist der Rückgabewert false.

+ +

Beschreibung

+ +

Diese Methode erfüllt Bedürfnisse von Analyse- und Diagnostik-Code, der regelmäßig versucht, Daten an den Server zu senden bevor der unload Vorgang einer Seite abgeschlossen ist. Daten schon früher zu senden, könnte eine unvollständige Datensammlung bewirken.
+ Bislang war es für Entwickler schwierig, sicherzustellen, dass Daten während eines unload Vorgangs tatsächlich gesendet wurden.

+ +

Üblicherweise ignorieren User Agenten asynchrone XMLHttpRequests in einem unload Anweisungsblock. Dieses Problem wird in Analytik- und Diagnostik-Code oft umgangen, indem in einem unload oder beforeunload Anweisungsblock ein synchroner XMLHttpRequest zum Datenversand genutzt wird.
+ Ein synchroner XMLHttpRequest zwingt den User Agenten den unload Vorgang des Dokuments zu verzögern, sodass jedoch die weitere Navigation langsamer wirkt. Der Eindruck einer schlechten Ladezeit der Folgeseite läst sich dabei nicht verhindern.

+ +

Es gibt weitere Techniken, die Datenübermittlung zu ermöglichen. Eine besteht darin, den unload Vorgang zu verzögern, indem man ein image Element erzeugt und dessen src Attribut innerhalb des unload Anweisungsblocks ändert. Da die meisten User Agenten den unload Vorgang verzögern werden bis das Nachladen des Bildes abgeschlossen ist, können so währenddessen noch Daten übermittelt werden.
+ Noch eine andere Technnik verwendet eine einige Sekunden lange wirkungsfreie (noop) Schleife innerhalb des unload Anweisungsblocks, die das unload verzögert und zwischenzeitliche Datenübermittlung zum Server ermöglicht.

+ +

Diese alternativen Techniken stellen allerdings nicht nur schlechte Programmiermuster dar. Einige sind schlicht unzuverlässig und erzeugen den Eindruck schlechter Seitenladezeiten.

+ +

Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der versucht, Daten an den Server zu schicken mittels synchronem XMLHttpRequest innerhalb des unload Anweisungsblocks. Dies resultiert in einer Verzögerung des unload Vorgangs der Seite.

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    var client = new XMLHttpRequest();
+    client.open("POST", "/log", false); // der dritte Parameter bewirkt synchrones xhr
+    client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
+    client.send(analyticsData);
+}
+
+ +

Durch Verwendung der sendBeacon() Methode werden Daten asynchron an den Server gesendet sobald der User Agent Gelegenheit dazu hat und zwar ohne das unload bzw. das Laden der nächsten Seite zu verzögen.

+ +

Das folgende Beispiel zeigt einen fiktiven Analytik-Code, der Daten zum Server sendet mittels sendBeacon()Methode. 

+ +
window.addEventListener('unload', logData, false);
+
+function logData() {
+    navigator.sendBeacon("/log", analyticsData);
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Beacon', '#sec-sendBeacon-method', 'sendBeacon()')}}{{Spec2('Beacon')}}Initial definition
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(39.0)}}{{CompatGeckoDesktop("31")}}{{CompatNo}}26{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(40.0)}}{{CompatGeckoMobile("31")}}2.5{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/navigator/vibrate/index.html b/files/de/web/api/navigator/vibrate/index.html new file mode 100644 index 0000000000..55b453cee1 --- /dev/null +++ b/files/de/web/api/navigator/vibrate/index.html @@ -0,0 +1,107 @@ +--- +title: Navigator.vibrate() +slug: Web/API/Navigator/vibrate +translation_of: Web/API/Navigator/vibrate +--- +

{{APIRef("HTML DOM")}}

+ +

Die Navigator.vibrate()-Methode erzeugt eine Vibration, wenn entsprechende Hardware vorhanden ist. Wenn das Gerät keine Vibration unterstützt, hat diese Methode keine Auswirkungen. Wenn eine Vibration gestartet werden soll, aber eine andere Vibration noch ausgeführt wird, wird die Alte gestoppt und die Neue gestartet!

+ +

Wenn die Methode nicht ausgeführt werden konnte aufgrund eines ungültigen Parameters wird ein false zurückgegeben, ansonsten ein true. Wenn das Modell zu lang ausgeführt wird, wird es abgeschnitten: die maximale Dauer ist je nach Implementierung abhängig!

+ +

Syntax

+ +
var successBool = window.navigator.vibrate(pattern);
+
+ +
+
pattern
+
Bietet ein Schema von Vibrationen und Vibrationsintervallen. Jeder Wert bezeichnet eine Anzahl an Millisekunden zum vibrieren und pausieren (im Wechsel). Sie bieten entweder einen einzelnen Wert (um einmal für so viele Millisekunden zu vibrieren) oder ein Array von Werten, um abwechselnd zu vibrieren, pausieren, dann wieder zu vibrieren. Siehe Vibration API für weitere Details.
+
+ +

Wenn man 0 als Wert, einen leeren Array oder einen Array, der nur 0 als Wert(e) enthält, angibt wird die Vibration gestoppt.

+ +

Beispiele

+ +
window.navigator.vibrate(200); // vibriert 200ms lang
+window.navigator.vibrate([100,30,100,30,100,200,200,30,200,30,200,200,100,30,100,30,100]); // vibriert 'SOS' im Morsecode
+
+ +

Technische Daten

+ + + + + + + + + + + + + + + + +
Technische DatenStatusHinweis
{{SpecName('Vibration API')}}{{Spec2('Vibration API')}}Linked to spec is the latest editor's draft; W3C version is a REC.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatGeckoDesktop("11.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoDesktop("16.0")}} (no prefix) [1]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FunktionAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}} {{property_prefix("webkit")}}{{CompatGeckoMobile("11.0")}} {{property_prefix("moz")}}
+ {{CompatGeckoMobile("16.0")}} (no prefix) [1]		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Wenn die Vibration zulang ist, das heißt der Wert selbst oder das Muster, wurde bis einschließlich Firefox 26 anstatt  false, eine Fehlermeldung zurückgegeben ({{bug("884935")}}). Ab Firefox 32 wird true zurückgegeben, aber das Muster gekürzt ({{bug(1014581)}}).

+ +

Weitere Informationen

+ + diff --git a/files/de/web/api/navigatoronline/index.html b/files/de/web/api/navigatoronline/index.html new file mode 100644 index 0000000000..11f6707c43 --- /dev/null +++ b/files/de/web/api/navigatoronline/index.html @@ -0,0 +1,127 @@ +--- +title: NavigatorOnLine +slug: Web/API/NavigatorOnLine +tags: + - API + - HTML-DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/NavigatorOnLine +--- +

{{APIRef("HTML DOM")}}

+ +

The NavigatorOnLine interface contains methods and properties related to the connectivity status of the browser.

+ +

There is no object of type NavigatorOnLine, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.

+ +

Properties

+ +

The NavigatorOnLine interface doesn't inherit any property.

+ +
+
{{domxref("NavigatorOnLine.onLine")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the browser is working online.
+
+ +

Methods

+ +

The NavigatorOnLine interface neither implements, nor inherit any method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML WHATWG')}}No change from the latest snapshot, {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', '#navigatoronline', 'NavigatorOnLine')}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName('HTML WHATWG')}} with its initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/navigatoronline/online/index.html b/files/de/web/api/navigatoronline/online/index.html new file mode 100644 index 0000000000..2995101bb4 --- /dev/null +++ b/files/de/web/api/navigatoronline/online/index.html @@ -0,0 +1,190 @@ +--- +title: NavigatorOnLine.onLine +slug: Web/API/NavigatorOnLine/onLine +tags: + - API + - DOM + - Dokumentation + - Eigenschaft + - Navigation + - NavigatorOnLine + - Offline + - Online + - Reference + - WebAPI +translation_of: Web/API/NavigatorOnLine/onLine +--- +
{{ApiRef("HTML DOM")}}
+ +

Diese Eigenschaft gibt einen Wahrheitswert (Bool-Wert) zurück, der Auskunft gibt, ob der Browser eine Internetverbindung aufbauen konnte. Dieser Wert wird immer dann aktualisiert, wenn eine neue Verbindung vom Browser angefordert wurde (durch Script- oder Benutzeraktionen). Es wird "false" zurückgegeben, wenn der letzte Versuch, eine Verbindung aufzubauen, fehlgeschlagen ist.

+ +

Einige Browser implementieren diese Funktion verschieden.

+ +

Für Chrome und Safari gilt, dass wenn keine Verbindung zum LAN oder Router aufgebaut wurde, der Browser "offline" ist. Andernfalls ist der Browser "online". Das bedeutet, dass aus dem Online-Status nicht die tatsächliche Verbindung erkennbar ist. Wenn der Rückgabewert "false" ist, dann ist mit Sicherheit keine Verbindung vorhanden. Wenn der Wert aber "true" ist, muss dies keine tatsächliche Verbindung zum Internet bedeuten. Auch kann die Ausführung innerhalb einer Virtuellen Maschine den Wert verfälschen. Für weitere Informationen kann dieser HTML5-Rocks Artikel hilfreich sein (in Englisch): Working Off the Grid with HTML5 Offline

+ +

Firefox und der Internet Explorer können diesen Wert auch durch die Funktion des "Offline-Modus" verändern. Dann wird auch "false" zurückgegeben, unabhängig vom tatsächlichen Status.

+ +

Bis Firefox 41 wurde in allen anderen Fällen "true" zurückgegeben. Seit Version 41 kann der tatsächliche Verbindungsstatus erkannt werden, wenn Firefox auf OS X oder Windows installiert ist.

+ +

Es sind auch folgende Ereignisse verfügbar, mit denen unmittelbar auf Änderungen des "OnLine"-Wertes reagiert werden kann.

+ + + +

 

+ +

Syntax

+ +
online = window.navigator.onLine;
+
+ +

Value

+ +

Der Rückgabewert ist vom Typ "boolean", kann also true oder false sein.

+ +

 

+ +

Beispiel

+ +

Hier das Live-Beispiel

+ +

Um zu bestimmen, ob der Browser mit dem Internet verbunden ist, müssen Sie den Wert von window.navigator.onLine wie folgt verwenden:

+ +
if (navigator.onLine) {
+  console.log('Verbunden');
+} else {
+  console.log('Getrennt');
+}
+ +

Wenn der Browser onLine nicht kennt, wird false oder undefiniert zurückgegeben.

+ +

Um auf dir Veränderung des Status direkt reagieren zu können, verwenden Sie addEventListener für die Ereignisse window.ononline und window.onoffline; wie in diesem Beispiel:

+ +
window.addEventListener("offline", function(e) { console.log("Nicht Verbunden"); });
+
+window.addEventListener("online", function(e) { console.log("Verbunden"); });
+
+ +

 

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "browsers.html#navigator.online", "navigator.onLine")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

 

+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Einfache Umsetzung{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop(1.9.1)}}[2]
+ {{CompatGeckoDesktop(2.0)}}[4]		8[3]{{CompatNo}}[2]5.0.4
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoDesktop(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunktionAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileBlackBerry
Einfache Umsetzung2.2[5]{{CompatGeckoMobile(1.9.1)}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}} +

7
+ 10

+
on {{domxref("WorkerNavigator")}}{{CompatUnknown}}{{CompatGeckoMobile(29)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Vorherige Versionen von Chrome geben true unmittelbar nach den öffnen des Tabs zurück. Erst nach der nächsten Netzwerkaktivität wird der richtige Wert zurückgegeben.  Windows: 11, Mac: 14, Chrome OS: 13, Linux: Liefert immer true zurück. Siehe auch crbug.com/7469.

+ +

[2] Seit Firefox 4 und Opera 11.10 wird false unabhängig von der tatsächlichen Verbindung zurückgegeben, wenn der "offline"-Modus des Browsers aktiviert wurde. 

+ +

[3] Im Internet Explorer 8 werden die "online"- and "offline"-Ereignisse duch document.body ausgelöst; seit dem IE 9 werden diese auch von window ausgelöst.

+ +

[4] Seit Firefox 41, auf OS X und Windows, wird der tatsächliche Verbindungstatus zurückgegeben, solange der "offline"-Modus nicht aktivert wurde.

+ +

[5] Fehler in der WebView-Komponenten, siehe auch: bug 16760.

+ +

 

+ +

Hinweise

+ +

Für weitere Informationen, siehe auch die  Online/Offline‎-Ereignisse 

+ +

 

+ +

Verweise

+ + diff --git a/files/de/web/api/navigatoronline/online_and_offline_events/index.html b/files/de/web/api/navigatoronline/online_and_offline_events/index.html new file mode 100644 index 0000000000..4bceb46e36 --- /dev/null +++ b/files/de/web/api/navigatoronline/online_and_offline_events/index.html @@ -0,0 +1,120 @@ +--- +title: Online- und Offline-Events +slug: Web/API/NavigatorOnLine/Online_and_offline_events +translation_of: Web/API/NavigatorOnLine/Online_and_offline_events +--- +

Einige Browser implementieren Online-/Offline-Events basierend auf der WHATWG Web Applications 1.0 specification.

+ +

Übersicht

+ +

Um eine gute offlinefähige Webanwendung erstellen zu können, muss die Anwendung wissen, wann sie offline ist. Zusätzlich muss die Anwendung wissen, wann die Internetverbindung wieder verfügbar ist. Die Voraussetzungen sind also:

+ +
    +
  1. die Anwendung erfährt, wann die Verbindung nach einem Verbindungsabbruch wieder besteht, so dass Änderungen mit dem Server abgeglichen werden können
    2. +
  2. die Anwendung erfährt, wann die Verbindung abbricht, um so Serveranfragen für später in eine Warteschlange einreihen zu können
    3. +
+ +

Dieser Vorgang trägt dazu bei, Online-/Offline Ereignisse zu trivialisieren.

+ +

Oft benötigen Webanwendungen außerdem die Möglichkeit, bestimmte Dokumente im Offline-Cache zu halten. Mehr Informationen darüber gibt es unter Offline resources in Firefox.

+ +

API

+ + + +

navigator.onLine ist eine Eigenschaft mit boole'schem Wert (true für online, false für offline). Sie aktualisiert sich, sobald der Benutzer in den Offline-Modus wechselt, indem der entsprechende Menü-Eintrag angewählt wird (in Firefox: Datei -> Offline-Modus).

+ +

Die Eigenschaft aktualisiert sich außerdem, sobald der Browser nicht mehr in der Lage ist, eine Verbindung herzustellen. Gemäß der Spezifikation:

+ +
The navigator.onLine attribute must return false if the user agent will not contact the network when the user follows links or when a script requests a remote page (or knows that such an attempt would fail)...
+ +

Firefox 2 aktualisiert diese Eigenschaft beim Wechseln in den Offline-Modus und zurück, sowie beim Abbruch/Wiederaufbau der Netzwerkverbindung in Windows und Linux.

+ +

Diese Eigenschaft existierte bereits in älteren Versionen von Firefox und Internet Explorer (die Spezifikation selbst basiert auf den vorherigen Implementierungen), sodass man sie schon jetzt einsetzen kann. Die Autoerkennung der Konnektivität wurde in Firefox 2 implementiert.

+ +

"online" und "offline" Events

+ +

Mit Firefox 3 gibt es 2 neue Events: "online" und "offline". Diese werden auf dem <body> jeder Sete ausgelöst, wenn der Browser zwischen Online- und Offline-Modus wechselt. Zusätzlich steigen die Events auf von document.body, zu document, und letztlich zu window. Beide können nicht unterbunden werden (man kann den Benutzer nicht daran hindern, online oder offline zu gehen).

+ +

Die Events können auf bekannte Art und Weise registriert werden:

+ + + +

Beispiel

+ +

Es gibt einen einfachen Test, um zu überprüfen, ob die Events funktionieren:

+ +

Hier ist der JavaScript-Teil:

+ +
window.addEventListener('load', function() {
+  var status = document.getElementById("status");
+
+  function updateOnlineStatus(event) {
+    var condition = navigator.onLine ? "online" : "offline";
+
+    status.className = condition;
+    status.innerHTML = condition.toUpperCase();
+
+    log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
+  }
+
+  window.addEventListener('online',  updateOnlineStatus);
+  window.addEventListener('offline', updateOnlineStatus);
+});
+ +

Ein bißchen CSS:

+ +
#status {
+  position : fixed;
+  width: 100%;
+  font : bold 1em sans-serif;
+  color: #FFF:
+  padding : 0.5em
+}
+
+#log {
+  padding: 2.5em 0.5em 0.5em;
+  font: 1em sans-serif;
+}
+
+.online {
+  background: green;
+}
+
+.offline {
+  background: red;
+}
+
+ +

Und das entsprechende HTML:XXX When mochitests for this are created, point to those instead and update this example -nickolay

+ +
<div id="status"></div>
+<div id="log"></div>
+<p>This is a test</p>
+
+ +

Hier ist das Live-Ergebnis:

+ +

{{ EmbedLiveSample('Example', '100%', '150') }}

+ +

Hinweise

+ +

Wenn die API im Browser nicht implementiert ist, gibt es andere Möglichkeiten herauszufinden, ob der Benutzer offline ist: zum Beispiel durch das Reagieren auf AppCache error Ereignissen oder auf Antworten von XMLHttpRequest.

+ +

Verweise

+ + diff --git a/files/de/web/api/node/appendchild/index.html b/files/de/web/api/node/appendchild/index.html new file mode 100644 index 0000000000..519f6f9a0d --- /dev/null +++ b/files/de/web/api/node/appendchild/index.html @@ -0,0 +1,144 @@ +--- +title: Node.appendChild() +slug: Web/API/Node/appendChild +tags: + - API + - DOM + - Method + - Node + - Reference +translation_of: Web/API/Node/appendChild +--- +
{{APIRef("DOM")}}
+ +

Die Node.appendChild() Methode fügt einen Kind-Knoten am Ende der Liste aller Kinder des angegebenen Eltern-Knotens an (to append = anhängen).

+ +

Wenn das gegebene Kind eine Referenz zu einem existierenden Knoten im Dokument ist, wird appendChild() es von der aktuellen Position zu der neuen Position bewegen. Es gibt also keine Notwendigkeit den Knoten erst zu entfernen, weil ein Knoten in einem Dokument nicht gleichzeitig an zwei Stellen vorkommen kann. Also, wenn der Knoten bereits einen Eltern-Knoten hat, wird der Knoten zuerst entfernt und dann erneut am Ende der Kind-Knoten-Liste angehängt.

+ +

Das {{domxref("Node.cloneNode()")}}  kann genutzt werden um eine Kopie des Knotens zu machen, bevor es an einen neuen Eltern-Knoten angehängt wird. Zu beachten: Kopien die mit cloneNode gemacht wurden, werden nicht automatisch Synchron gehalten.

+ +

Syntax

+ +
var aChild = element.appendChild(aChild);
+ +

Parameter

+ +

aChild

+ +

Der Knoten, der an den gegebenen Eltern-Knoten angehängt wird (für gewöhnlich ein Element).

+ +

Rückgabewert

+ +

Der Rückgabewert ist das angehängte Kindelement (aChild), außer wenn aChild ein {{domxref("DocumentFragment")}} ist. In diesem Fall wird ein {{domxref("DocumentFragment")}} zurückgegeben.

+ +

Anmerkungen

+ +

Eine Verkettung kann anders ablaufen als erwartet, da appendChild() das Kindelement zurück gibt.

+ +
var aBlock = doc.createElement('block').appendChild(doc.createElement('b'));
+ +

Setzt nur aBlock auf <b></b>, was möglicherweise nicht das gewünschte ist.

+ +

Beispiele

+ +
//  Erstellen Sie ein neues Absatz-Element und fügen Sie es an das Ende des Dokument-Körpers (body)
+var p = document.createElement("p");
+document.body.appendChild(p);
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-node-appendchild', 'Node.appendChild()')}}{{Spec2('DOM WHATWG')}}No change from {{SpecName("DOM3 Core")}}.
{{SpecName('DOM3 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM3 Core')}}No change from {{SpecName("DOM2 Core")}}.
{{SpecName('DOM2 Core', 'core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM2 Core')}}No change from {{SpecName("DOM1")}}.
{{SpecName('DOM1', 'level-one-core.html#ID-184E7107', 'Node.appendChild()')}}{{Spec2('DOM1')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/childnodes/index.html b/files/de/web/api/node/childnodes/index.html new file mode 100644 index 0000000000..afbddd274e --- /dev/null +++ b/files/de/web/api/node/childnodes/index.html @@ -0,0 +1,70 @@ +--- +title: Node.childNodes +slug: Web/API/Node/childNodes +translation_of: Web/API/Node/childNodes +--- +

{{ ApiRef() }}

+

Allgemein

+

childNodes gibt eine {{ domxref('NodeList') }}, welche alle Kindknoten (childNodes) eines bestimmten HTML-Elements enthält, zurück.

+

Syntax

+
var nodeList = referenzElement.childNodes;
+
+

nodeList ist eine Liste, die alle Kindknoten eines bestimmten Elements der Reihenfolge nach enthält. Falls das Element keine Kindknoten enthält, gibt childNodes eine leere NodeList zurück.
+
+ Diese Eigenschaft kann nur ausgelesen werden (read-only).

+

Beispiel

+

Folgendes HTML-Dokument liegt vor:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Neue Mitarbeiter eingestellt</h3>
+    <p>Dank der guten Konjunktur letzten Jahres [...]</p>
+  </body>
+</html>
+
+

Nun sollen die childNodes von <body> ausgelesen und in einer Liste namens nodeList gespeichert werden:

+
var bd = document.body;
+
+// Zuerst werden wir überprüfen, ob das <body>-Element überhaupt Kindknoten hat.
+if (bd.hasChildNodes()) {
+   // Nun werden wir die Eigenschaft childNodes auslesen
+   var nodeList = bd.childNodes;
+
+   for(var i = 0; i < nodeList.length; i++) {
+     // So wird nodeList durchlaufen und folgender Code wird an jedem Eintrag ausgeführt
+     // In diesem Fall soll der Name ausgegeben werden
+     alert(nodeList[i].nodeName);
+   }
+}
+
+


+ Diese Liste ist ständig aktuell. Jede Änderung am referenz-Element (hier <body>) bewirkt eine aktualisierung der Liste.
+ Wenn Sie also beispielsweise das erste Element in der Liste löschen, rückt automatisch das zweite Element an Stelle des Ersten.
+ Deshalb lassen sich z.B. auf diese Art alle Kindknoten eines Elements löschen:

+
while(bd.firstChild) {
+    bd.removeChild(bd.firstChild);
+}
+
+

Anmerkungen

+

Mit childNodes erhalten Sie eine Liste aller Kindknoten, einschließlich derer vom Typ {{ domxref("CharacterData") }}. Wenn Sie diese Datenknoten nicht im Index haben wollen, verwenden Sie statt childNodes die Eigenschaft {{ domxref('Element.children') }}.

+

Die Einträge in nodeList sind Objekte, keine Zeichenketten. Für diese Objekte gelten wiederum alle Methoden und Eigenschaften von {{ domxref("Node") }}. Um also Daten aus diesen Objekten auszulesen, müssen deren Eigenschaften ausgelesen werden. Um beispielsweise den Namen eines in nodeList aufgeführten Elements auszulesen, muss man die eigenschaft nodeName auslesen:

+
var name = nodeList[i].nodeName;
+

Das document Objekt hat zwei Kindknoten: Die Doctype-Deklaration und das root-Element, das eine Eigenschaft von {{ domxref("Document") }} ist.
+ Folgendermaßen kann darauf zugegriffen werden:

+
var root = document.documentElement;
+

In (X)HTML-Dokumenten stellt das HTML-Element das root-Element dar.

+

Siehe auch

+ +

Spezifikationen

+ +

{{ languages( { "fr": "fr/DOM/element.childNodes", "ja": "ja/DOM/element.childNodes", "pl": "pl/DOM/element.childNodes", "zh-cn": "cn/DOM/element.childNodes", "de": "de/DOM/element.childNodes" } ) }}

diff --git a/files/de/web/api/node/clonenode/index.html b/files/de/web/api/node/clonenode/index.html new file mode 100644 index 0000000000..d51a489a69 --- /dev/null +++ b/files/de/web/api/node/clonenode/index.html @@ -0,0 +1,135 @@ +--- +title: Node.cloneNode +slug: Web/API/Node/cloneNode +translation_of: Web/API/Node/cloneNode +--- +
{{APIRef("DOM")}}
+ +

Übersicht

+ +

Gibt ein Duplikat des Knotens, auf dem diese Methode aufgerufen wurde, zurück.

+ +

Syntax

+ +
var dupNode = node.cloneNode(deep);
+
+ +
+
node
+
Der Knoten, welcher dupliziert werden soll.
+
dupNode
+
Der duplizierte Knoten.
+
deep
+
true wenn die Kindknoten des Knotens ebenfalls dupliziert werden sollen, false wenn nur der Knoten dupliziert werden soll.
+
+ +
+

Hinweis: In der DOM4 Spezifikation (implementiert in Gecko 13.0 {{geckoRelease(13)}}), ist das Argument deep optional. Es ist dann laut Spezifikation true.

+ +

Leider wurde dies in der letzten Spezifikation geändert, sodass der Standardwert nun false ist. Auch wenn es immer noch optional ist, sollte man das Argument deep aus diesen Kompatibilitätsgründen setzen. Ab Gecko 28.0 {{geckoRelease(28)}} warnt die Konsole den Entwickler, wenn das Argument nicht gesetzt ist.

+
+ +

Beispiel

+ +
    var p = document.getElementById("para1");
+    var p_prime = p.cloneNode(true);
+
+ +

Hinweise

+ +

Der duplizierte Knoten enthält alle Attribute und deren Werte, aber nicht die Eventlistener welche via addEventListener() oder über die jeweilige Elementeigenschaft (z.B. node.onclick = function) gesetzt wurden. Im Fall eines <canvas>-Elements wird das gezeichnete Bild nicht mitkopiert.

+ +

Der mit cloneNode() duplizierte Knoten ist noch nicht Teil des Dokuments und hat keinen Elternknoten bis er mithilfe der Methode {{domxref("Node.appendChild()")}} oder einer anderen vergleichbaren Methode in das Dokument eingefügt wird.

+ +

Wenn deep auf false gesetzt ist, werden die Kindknoten nicht mitkopiert. Dies schließt ebenfalls alle Textelemente mit ein, da diese in einem oder mehreren Kindknoten enthalten sind.

+ +
Warnung: Die Verwendung von cloneNode() kann dazu führen, dass die selbe ID im Dokument mehrmals existiert.
+ +

Wenn der Originalknoten eine ID hat, sollte diese im dupliziertem Knoten geändert oder gelöscht werden, um Probleme zu vermeiden. Dies sollte auch für das name Attribut überlegt werden.

+ +

Um einen Knoten aus einem anderen Dokument zu kopieren sollte die {{domxref("Document.importNode()")}} verwendet werden.

+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep as an optional parameter +

Ja

+ +

(Standard: false)

+ 		{{CompatGeckoDesktop("13.0")}}{{CompatUnknown}}{{CompatUnknown}} +

Yes

+ +

(default is false)

+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
deep as an optional parameter{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("13.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Spezifikationen

+ + diff --git a/files/de/web/api/node/firstchild/index.html b/files/de/web/api/node/firstchild/index.html new file mode 100644 index 0000000000..38703904ec --- /dev/null +++ b/files/de/web/api/node/firstchild/index.html @@ -0,0 +1,62 @@ +--- +title: Node.firstChild +slug: Web/API/Node/firstChild +translation_of: Web/API/Node/firstChild +--- +

{{ ApiRef() }}

+ +

Allgemein

+ +

firstChild gibt den ersten Kindknoten (childNode) eines Datenknotens zurück.

+ +

Syntax

+ +
var ersterKindknoten = element.firstChild;
+
+ +

Die Variable ersterKindknoten enthält einen Datenknoten.

+ +

Beispiel

+ +

Folgendes HTML-Dokument ist gegeben:

+ +
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Texte</h3>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+ +

Um auf das erste Kindelement zuzugreifen, kann man folgenden Code verwenden:

+ +
var ersterKindknoten = document.body.firstChild;
+
+ +

In diesem Fall ist der erste Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des Paragraphs und dem Start-Tag von <body> ein Zeilenumbruch und vier Leerzeichen befinden.

+ +

Anmerkungen

+ + + +

Spezifikationen

+ + + +

Siehe auch:

+ + + +

{{ languages( { "fr": "fr/DOM/element.firstChild", "ja": "ja/DOM/element.firstChild", "pl": "pl/DOM/element.firstChild", "zh-cn": "zh-cn/DOM/Node.firstChild" } ) }}

diff --git a/files/de/web/api/node/haschildnodes/index.html b/files/de/web/api/node/haschildnodes/index.html new file mode 100644 index 0000000000..1ecfb52b48 --- /dev/null +++ b/files/de/web/api/node/haschildnodes/index.html @@ -0,0 +1,120 @@ +--- +title: Node.hasChildNodes() +slug: Web/API/Node/hasChildNodes +tags: + - API DOM Methode Node +translation_of: Web/API/Node/hasChildNodes +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.hasChildNodes() Methode liefert einen Boolean Wert der anzeigt ob die aktuelle {{domxref("Node")}} child nodes hat oder nicht.

+ +

Syntax

+ +
result = node.hasChildNodes();
+ +
+
result
+
enthält den return Wert true oder false.
+
+ +

Beispiele

+ +

Das nächste Beispiel entfernt die erste child node innerhalb dem element mit der id "foo" wenn foo child nodes enthält.

+ +
var foo = document.getElementById("foo");
+if (foo.hasChildNodes()) {
+    // do something with 'foo.childNodes'
+}
+
+ +

Polyfill

+ +
;(function(prototype) {
+    prototype.hasChildNodes = prototype.hasChildNodes || function() {
+        return !!this.firstChild;
+    }
+})(Node.prototype);
+
+ +

Zusammenfassung

+ +

Es gibt unterschiedliche Wege herauszufinden ob die node eine child node enthält.

+ + + +

Spezifikation

+ + + +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/index.html b/files/de/web/api/node/index.html new file mode 100644 index 0000000000..9f725381a2 --- /dev/null +++ b/files/de/web/api/node/index.html @@ -0,0 +1,365 @@ +--- +title: Node +slug: Web/API/Node +translation_of: Web/API/Node +--- +
{{APIRef("DOM")}}
+ +

A Node is an interface from which a number of DOM types inherit, and allows these various types to be treated (or tested) similarly.

+ +

The following interfaces all inherit from Node its methods and properties: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("CharacterData")}} (which {{domxref("Text")}}, {{domxref("Comment")}}, and {{domxref("CDATASection")}} inherit), {{domxref("ProcessingInstruction")}}, {{domxref("DocumentFragment")}}, {{domxref("DocumentType")}}, {{domxref("Notation")}}, {{domxref("Entity")}}, {{domxref("EntityReference")}}

+ +

These interfaces may return null in particular cases where the methods and properties are not relevant. They may throw an exception - for example when adding children to a node type for which no children can exist.

+ +

Properties

+ +

Inherits properties from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.baseURI")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the base URL. The concept of base URL changes from one language to another; in HTML, it corresponds to the protocol, the domain name and the directory structure, that is all until the last '/'.
+
{{domxref("Node.baseURIObject")}} {{Non-standard_inline()}} {{ Fx_minversion_inline("3") }}
+
(Not available to web content.) The read-only {{ Interface("nsIURI") }} object representing the base URI for the element.
+
{{domxref("Node.childNodes")}} {{readonlyInline}}
+
Returns a live {{domxref("NodeList")}} containing all the children of this node. {{domxref("NodeList")}} being live means that if the children of the Node change, the {{domxref("NodeList")}} object is automatically updated.
+
{{domxref("Node.firstChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the first direct child node of the node, or null if the node has no child.
+
{{domxref("Node.lastChild")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the last direct child node of the node, or null if the node has no child.
+
{{domxref("Node.localName")}} {{obsolete_inline}}{{readonlyInline}}
+
Returns a {{domxref("DOMString")}} representing the local part of the qualified name of an element. In Firefox 3.5 and earlier, the property upper-cases the local name for HTML elements (but not XHTML elements). In later versions, this does not happen, so the property is in lower case for both HTML and XHTML. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require localName to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.namespaceURI")}} {{obsolete_inline}}{{readonlyInline}}
+
The namespace URI of this node, or null if it is no namespace. In Firefox 3.5 and earlier, HTML elements are in no namespace. In later versions, HTML elements are in the http://www.w3.org/1999/xhtml namespace in both HTML and XML trees. {{ gecko_minversion_inline("1.9.2") }}
+ Though recent specifications require namespaceURI to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.nextSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the next node in the tree, or null if there isn't such node.
+
{{domxref("Node.nodeName")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the name of the Node. The structure of the name will differ with the name type. E.g. An {{domxref("HTMLElement")}} will contain the name of the corresponding tag, like 'audio' for an {{domxref("HTMLAudioElement")}}, a {{domxref("Text")}} node will have the '#text' string, or a {{domxref("Document")}} node will have the '#document' string.
+
{{domxref("Node.nodePrincipal")}} {{Non-standard_inline()}}{{ Fx_minversion_inline("3") }}
+
A {{ Interface("nsIPrincipal") }} representing the node principal.
+
{{domxref("Node.nodeType")}}{{readonlyInline}}
+
Returns an unsigned short representing the type of the node. Possible values are: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameValue
ELEMENT_NODE1
ATTRIBUTE_NODE {{deprecated_inline()}}2
TEXT_NODE3
CDATA_SECTION_NODE {{deprecated_inline()}}4
ENTITY_REFERENCE_NODE {{deprecated_inline()}}5
ENTITY_NODE {{deprecated_inline()}}6
PROCESSING_INSTRUCTION_NODE7
COMMENT_NODE8
DOCUMENT_NODE9
DOCUMENT_TYPE_NODE10
DOCUMENT_FRAGMENT_NODE11
NOTATION_NODE {{deprecated_inline()}}12
+
+
{{domxref("Node.nodeValue")}}
+
Is a {{domxref("DOMString")}} representing the value of an object. For most Node type, this returns null and any set operation is ignored. For nodes of type TEXT_NODE ({{domxref("Text")}} objects), COMMENT_NODE ({{domxref("Comment")}} objects), and PROCESSING_INSTRUCTION_NODE ({{domxref("ProcessingInstruction")}} objects), the value corresponds to the text data contained in the object.
+
{{domxref("Node.ownerDocument")}} {{readonlyInline}}
+
Returns the {{domxref("Document")}} that this node belongs to. If no document is associated with it, returns null.
+
{{domxref("Node.parentNode")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} that is the parent of this node. If there is no such node, like if this node is the top of the tree or if doesn't participate in a tree, this property returns null.
+
{{domxref("Node.parentElement")}} {{readonlyInline}}
+
Returns an {{domxref("Element")}} that is the parent of this node. If the node has no parent, or if that parent is not an {{domxref("Element")}}, this property returns null.
+
{{domxref("Node.prefix")}} {{obsolete_inline}}{{readonlyInline}}
+
Is a {{domxref("DOMString")}} representing the namespace prefix of the node, or null if no prefix is specified.
+ Though recent specifications require prefix to be defined on the {{domxref("Element")}} interface, Gecko-based browsers still implement it on the {{domxref("Node")}} interface.
+
{{domxref("Node.previousSibling")}} {{readonlyInline}}
+
Returns a {{domxref("Node")}} representing the previous node in the tree, or null if there isn't such node.
+
{{domxref("Node.textContent")}}
+
Is a {{domxref("DOMString")}} representing the textual content of an element and all its descendants.
+
+ +

Methods

+ +

Inherits methods from its parents {{domxref("EventTarget")}}.[1]

+ +
+
{{domxref("Node.appendChild()")}}
+
Insert a {{domxref("Node")}} as the last child node of this element.
+
{{domxref("Node.cloneNode()")}}
+
Clone a {{domxref("Node")}}, and optionally, all of its contents. By default, it clones the content of the node.
+
{{domxref("Node.compareDocumentPosition()")}}
+
 
+
{{domxref("Node.contains()")}}
+
 
+
{{domxref("Node.getFeature()")}} {{obsolete_inline}}
+
...
+
{{domxref("Node.getUserData()")}} {{obsolete_inline}}
+
Allows a user to get some {{domxref("DOMUserData")}} from the node.
+
{{domxref("Node.hasAttributes()")}} {{obsolete_inline}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any attributes, or not.
+
{{domxref("Node.hasChildNodes()")}}
+
Returns a {{domxref("Boolean")}} indicating if the element has any child nodes, or not.
+
{{domxref("Node.insertBefore()")}}
+
Inserts the first {{domxref("Node")}} given in a parameter immediately before the second, child of this element, {{domxref("Node")}}.
+
{{domxref("Node.isDefaultNamespace()")}}
+
 
+
{{domxref("Node.isEqualNode()")}}
+
 
+
{{domxref("Node.isSameNode()")}} {{obsolete_inline}}
+
 
+
{{domxref("Node.isSupported()")}} {{obsolete_inline}}
+
Returns a Boolean flag containing the result of a test whether the DOM implementation implements a specific feature and this feature is supported by the specific node.
+
{{domxref("Node.lookupPrefix()")}}
+
 
+
{{domxref("Node.lookupNamespaceURI()")}}
+
 
+
{{domxref("Node.normalize()")}}
+
Clean up all the text nodes under this element (merge adjacent, remove empty).
+
{{domxref("Node.removeChild()")}}
+
Removes a child node from the current element, which must be a child of the current node.
+
{{domxref("Node.replaceChild()")}}
+
Replaces one child {{domxref("Node")}} of the current one with the second one given in parameter.
+
{{domxref("Node.setUserData()")}} {{obsolete_inline}}
+
Allows a user to attach, or remove, {{domxref("DOMUserData")}} to the node.
+
 
+
+ +

Examples

+ +

Browse all child nodes

+ +

The following function recursively cycles all child nodes of a node and executes a callback function upon them (and upon the parent node itself).

+ +
function DOMComb (oParent, oCallback) {
+  if (oParent.hasChildNodes()) {
+    for (var oNode = oParent.firstChild; oNode; oNode = oNode.nextSibling) {
+      DOMComb(oNode, oCallback);
+    }
+  }
+  oCallback.call(oParent);
+}
+ +

Syntax

+ +
DOMComb(parentNode, callbackFunction);
+ +

Description

+ +

Recursively cycle all child nodes of parentNode and parentNode itself and execute the callbackFunction upon them as this objects.

+ +

Parameters

+ +
+
parentNode
+
The parent node (Node Object).
+
callbackFunction
+
The callback function (Function).
+
+ +

Sample usage

+ +

The following example send to the console.log the text content of the body:

+ +
function printContent () {
+  if (this.nodeValue) { console.log(this.nodeValue); }
+}
+
+onload = function () {
+  DOMComb(document.body, printContent);
+};
+ +

Remove all children nested within a node

+ +
Element.prototype.removeAll = function () {
+  while (this.firstChild) { this.removeChild(this.firstChild); }
+  return this;
+};
+ +

Sample usage

+ +
/* ... an alternative to document.body.innerHTML = "" ... */
+document.body.removeAll();
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed the following properties: attributes, namespaceURI, prefix, and localName.
+ Removed the following methods: isSupported(), hasAttributes(), isSameNode(), getFeature(), setUserData(), and getUserData().
{{SpecName('DOM3 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM3 Core')}}The methods insertBefore(), replaceChild(), removeChild(), and appendChild() returns one more kind of error (NOT_SUPPORTED_ERR) if called on a {{domxref("Document")}}.
+ The normalize() method has been modified so that {{domxref("Text")}} node can also be normalized if the proper {{domxref("DOMConfiguration")}} flag is set.
+ Added the following methods: compareDocumentPosition(), isSameNode(), lookupPrefix(), isDefaultNamespace(), lookupNamespaceURI(), isEqualNode(), getFeature(), setUserData(), and getUserData().
+ Added the following properties: baseURI and textContent.
{{SpecName('DOM2 Core', 'core.html#ID-1950641247', 'Node')}}{{Spec2('DOM2 Core')}}The ownerDocument property was slightly modified so that {{domxref("DocumentFragment")}} also returns null.
+ Added the following properties: namespaceURI, prefix, and localName.
+ Added the following methods: normalize(), isSupported() and hasAttributes().
{{SpecName('DOM1', 'level-one-core.html#ID-1950641247', 'Node')}}{{Spec2('DOM1')}}Initial definition.
+ +

 

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
getUserData(), setUserData() and hasAttributes() {{deprecated_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSameNode() {{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("9.0")}}.
+ Removed in {{CompatGeckoDesktop("10.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
isSupported() {{obsolete_inline}}{{CompatUnknown}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Removed in {{CompatGeckoDesktop("22.0")}}		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
attributes{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("21.0")}}.
+ Moved to {{domxref("Element")}} in {{CompatGeckoDesktop("22.0")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
getFeature(){{obsolete_inline}}{{CompatNo}}Supported from {{CompatGeckoDesktop("1.0")}} to {{CompatGeckoDesktop("6.0")}}.
+ Removed in {{CompatGeckoDesktop("7.0")}}		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Webkit and Blink incorrectly do not make Node inherit from {{domxref("EventTarget")}}.

diff --git a/files/de/web/api/node/innertext/index.html b/files/de/web/api/node/innertext/index.html new file mode 100644 index 0000000000..bd1594471a --- /dev/null +++ b/files/de/web/api/node/innertext/index.html @@ -0,0 +1,90 @@ +--- +title: Node.innerText +slug: Web/API/Node/innerText +tags: + - API DOM Property Reference +translation_of: Web/API/HTMLElement/innerText +--- +
{{APIRef("DOM")}}
+ +

Zusammenfassung

+ +

Node.innerText ist eine Eigenschaft die die "gerenderten" Text Inhalte einer node und ihrer nachfahren representiert. Als getter nähert es sich dem Text an, den ein User erhalten würde wenn sie/er den Inhalt des Elementes mit dem Kursor highlighten und dann zum Clipboard kopieren würde. Dieses Feature wurde ursprünglich von Internet Explorer eingeführt, und wurde förmlich in den HTML standards von 2016 spezifiziert nachdem es von allen Hauptbrowsern übernommen wurde.

+ +

{{domxref("Node.textContent")}} ist eine etwas ähnliche Alternative. Es gibt allerdings wichtige Unterschiede zwischen den beiden.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'dom.html#the-innertext-idl-attribute', 'innerText')}}{{Spec2('HTML WHATWG')}} +

Eingeführt, basiert auf dem draft of the innerText specification. Siehe whatwg/html#465 und whatwg/compat#5 für die Historie.

+
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{ CompatGeckoDesktop(45) }}69.6 (probably earlier)3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.3 (probably earlier){{ CompatGeckoMobile(45) }}10 (probably earlier)124.1 (probably earlier)
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/lastchild/index.html b/files/de/web/api/node/lastchild/index.html new file mode 100644 index 0000000000..9b6f98e59e --- /dev/null +++ b/files/de/web/api/node/lastchild/index.html @@ -0,0 +1,41 @@ +--- +title: Node.lastChild +slug: Web/API/Node/lastChild +translation_of: Web/API/Node/lastChild +--- +

{{ ApiRef() }}

+

Allgemein

+

lastChild gibt den letzten Kindknoten (childNode) eines Datenknotens zurück.

+

Syntax

+
var letzterKindknoten = element.lastChild;
+
+

Die Variable letzterKindknoten enthält einen Datenknoten.

+

Beispiel

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <h3>Texte</h3>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+

Um auf das letzte Kindelement zuzugreifen, kann man folgenden Code verwenden:

+
var letzterKindknoten = document.body.lastChild;
+
+

In diesem Fall ist der letzte Kindknoten ein Textknoten, da sich zwischen dem Schlusstag des Paragraphs und dem Schlusstag des body-Tags ein Zeilenumbruch und zwei Leerzeichen befinden.

+

Anmerkungen

+ +

Spezifikation

+

lastChild (en)

+

Siehe auch:

+ +

{{ languages( { "fr": "fr/DOM/element.lastChild", "ja": "ja/DOM/element.lastChild", "pl": "pl/DOM/element.lastChild" , "zh-cn": "zh-cn/DOM/Node.lastChild" } ) }}

diff --git a/files/de/web/api/node/nextsibling/index.html b/files/de/web/api/node/nextsibling/index.html new file mode 100644 index 0000000000..414e75a8ce --- /dev/null +++ b/files/de/web/api/node/nextsibling/index.html @@ -0,0 +1,60 @@ +--- +title: Node.nextSibling +slug: Web/API/Node/nextSibling +translation_of: Web/API/Node/nextSibling +--- +

{{ ApiRef() }}

+

Allgemein

+

Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements direkt auf den gegebenen Datenknoten folgt. Falls der übergebene Knoten bereits der letzte dieser Liste ist, wird null zurückgegeben.

+

Syntax

+
nextNode = node.nextSibling;
+
+

Beispiele

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div>Das ist eine DIV-Box</div>
+    <p>Hier steht Text!</p>
+  </body>
+</html>
+
+

Mit folgendem Code kann der Name des Geschwisterelements der DIV-Box ermittelt werden:

+
// Diese Variable speichert eine Referenz auf das Erste Element, das <body> enthält, also die DIV-Box
+	var element = document.body.children[0];
+
+	// Nun ermitteln wir das folgende Element
+	var folgeElement = element.nextSibling;
+
+	// Ausgabe des nodeNames
+	alert(folgeElement.nodeName);
+
+

Erläuterung:

+

Die Variable element enthält das erste Kindelement des <body>-Tags, also die DIV-Box.
+ folgeElement speichert den ersten Geschwisterknoten der DIV-Box. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem > der DIV-Box und dem < des <p> befinden. Das alert()-Fenster gibt somit #text aus.

+

Folgendermaßen können alle nachfolgenden Geschwisterknoten ermittelt werden:

+
var element = document.body.children[0];
+var liste = [];
+
+while(element.nextSibling) {
+  var element = liste[liste.push(element.nextSibling)-1];
+}
+
+

Das Skript erzeugt ein Array liste mit folgendem Inhalt:

+
Array[3]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+
+

Anmerkungen

+

Am obigen Beispiel lässt sich klar erkennen, dass einige Male ein #text-Knoten im Index auftaucht. Das kommt immer dann vor, wenn sich zwischen den Elementen Whitespace befindet. Da die Eigenschaft nextSibling auch Textknoten berücksichtigt, landet dieser Whitespace letztendlich als Solcher im Index. Falls dies nicht erwünscht ist, sollten Sie statt nextSibling die Eigenschaft {{ domxref("Element.nextElementSibling") }} verwenden

+

Spezifikationen

+ +

{{ languages( { "fr": "fr/DOM/element.nextSibling", "ja": "ja/DOM/element.nextSibling", "pl": "pl/DOM/element.nextSibling" } ) }}

+

Siehe auch

+ diff --git a/files/de/web/api/node/nodevalue/index.html b/files/de/web/api/node/nodevalue/index.html new file mode 100644 index 0000000000..ab9720812e --- /dev/null +++ b/files/de/web/api/node/nodevalue/index.html @@ -0,0 +1,88 @@ +--- +title: Node.nodeValue +slug: Web/API/Node/nodeValue +tags: + - API DOM Gecko Property +translation_of: Web/API/Node/nodeValue +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.nodeValue Eigenschaft gibt den Wert der aktuellen Node zurück oder setzt ihn.

+ +

Syntax

+ +
value = node.nodeValue;
+
+ +

value ist ein string der den Inhalt, falls es ihn gibt, der aktuellen node enthält.

+ +

Notizen

+ +

Für das Dokument selbst, gibt nodeValue  null zurück. Für Text, Kommentar, und CDATA nodes, gibt nodeValue den Inhalt der node zurück. Für attribute nodes, wird der Inhalt des Attributes zurückgegeben.

+ +

Die folgende Tabelle zeigt die return Werte der unterschiedlichen Elemente:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Attrvalue of attribute
CDATASectionInhalt der CDATA Section
CommentInhalt des comments
Documentnull
DocumentFragmentnull
DocumentTypenull
Elementnull
NamedNodeMapnull
EntityReferencenull
Notationnull
ProcessingInstructionGesamter Inhalt, ausgenommen des target
TextInhalt der text node
+ +

Wenn nodeValue als null definiert wird, hat das null setzen keine Auswirkung.

+ +

Spezifikation

+ + diff --git a/files/de/web/api/node/normalize/index.html b/files/de/web/api/node/normalize/index.html new file mode 100644 index 0000000000..e49f29e397 --- /dev/null +++ b/files/de/web/api/node/normalize/index.html @@ -0,0 +1,49 @@ +--- +title: Node.normalize() +slug: Web/API/Node/normalize +tags: + - API + - DOM + - Méthode + - Node + - Referenz +translation_of: Web/API/Node/normalize +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Node.normalize() Methode fügt die ausgewählte Node und all Ihre Kindelemente in eine "normalisierte" Form. In einer normalisierten Node sind keine Textnodes leer und es gibt keine parallel existierenden Textnodes.

+ +

Schreibweise

+ +
element.normalize();
+
+ +

Beispiel

+ +
var wrapper = document.createElement("div");
+
+wrapper.appendChild( document.createTextNode("Teil 1 ") );
+wrapper.appendChild( document.createTextNode("Teil 2 ") );
+
+// Her wäre: wrapper.childNodes.length === 2
+// wrapper.childNodes[0].textContent === "Teil 1 "
+// wrapper.childNodes[1].textContent === "Teil 2 "
+
+wrapper.normalize();
+
+// Jetzt: wrapper.childNodes.length === 1
+// wrapper.childNodes[0].textContent === "Teil 1 Teil 2 "
+ +

Spezifikation

+ + + +

Verwandte Themen

+ + diff --git a/files/de/web/api/node/parentnode/index.html b/files/de/web/api/node/parentnode/index.html new file mode 100644 index 0000000000..6481d10a86 --- /dev/null +++ b/files/de/web/api/node/parentnode/index.html @@ -0,0 +1,79 @@ +--- +title: Node.parentNode +slug: Web/API/Node/parentNode +translation_of: Web/API/Node/parentNode +--- +

{{ ApiRef() }}

+

Allgemein

+

Gibt das Elternelement des gegebenen Datenknotens, entsprechend des DOM-Baums zurück.

+

Syntax

+
elternelement = node.parentNode
+
+

elternelement enthält das Elternelement des gegebenen Datenknotens.

+

Beispiel

+
var dokument = document.documentElement.parentNode;
+
+

Anmerkungen

+ +

Siehe auch

+ +

Browserunterstützung

+

{{ CompatibilityTable() }}

+
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{ CompatGeckoDesktop(1.0) }}0.2{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoMobile(1) }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+

Spezifikation

+

DOM Level 2 Core: Node.parentNode (en)

+

{{ languages( { "it": "it/DOM/element.parentNode", "ja": "ja/DOM/element.parentNode", "fr": "fr/DOM/element.parentNode", "pl": "pl/DOM/element.parentNode" , "zh-cn": "zh-cn/DOM/Node.parentNode" } ) }}

diff --git a/files/de/web/api/node/previoussibling/index.html b/files/de/web/api/node/previoussibling/index.html new file mode 100644 index 0000000000..0a5bd2f518 --- /dev/null +++ b/files/de/web/api/node/previoussibling/index.html @@ -0,0 +1,69 @@ +--- +title: Node.previousSibling +slug: Web/API/Node/previousSibling +translation_of: Web/API/Node/previousSibling +--- +

{{ ApiRef() }}

+

{{ languages( { "fr": "fr/DOM/element.previousSibling", "ja": "ja/DOM/element.previousSibling", "pl": "pl/DOM/element.previousSibling", "zh-cn": "zh-cn/DOM/Node.previousSibling" } ) }}

+

Allgemein

+

Gibt den Datenknoten zurück, der entsprechend der childNodes-Liste des Elternelements dem gegebenen Datenknoten direkt vorangestellt ist. Falls der übergebene Knoten bereits der erste in dieser Liste ist, wird null zurückgegeben.

+

Syntax

+
vorangestellterKnoten = node.previousSibling;
+
+

Beispiele

+

Folgendes HTML-Dokument ist gegeben:

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div>Das ist eine DIV-Box</div>
+    <p>Hier steht Text!</p>
+    <ul>
+      <li>Punkt 1</li>
+      <li>Punkt 2</li>
+    </ul>
+  </body>
+</html>
+
+

So kann der vorangestellte Datenknoten von <ul> ermittelt werden:

+
	// Diese Variable speichert eine Referenz auf das letzte Element, das <body> enthält, also <ul>
+	var element = document.body.children[2];
+
+	// Nun ermitteln wir durch previousSibling den vorangestellten Knoten
+	var vorangestellterKnoten = element.previousSibling;
+
+	// Ausgabe des Knoten-Namens
+	alert(vorangestellterKnoten.nodeName);
+
+

Erläuterung:

+

Die Variable element enthält das letzte Kindelement des -Tags, also <ul>. vorangestellterKnoten speichert den direkt vorangestellten Geschwisterknoten von <ul>. In diesem Fall ist das ein Textknoten der einen Zeilenvorschub und vier Leerzeichen enthält, die sich in dem HTML-Dokument zwischen dem > von <p> und dem < des <ul> befinden. Das alert()-Fenster gibt somit #text aus.

+

So können alle vorangestellten Datenknoten eines Elements ermittelt werden:

+
var element = document.body.children[2];
+var liste = [];
+
+while(element.previousSibling) {
+  var element = liste[liste.push(element.previousSibling)-1];
+}
+
+

Das Skript erzeugt ein Array liste mit folgendem Inhalt:

+
Array[5]
+  0: Text
+  1: HTMLParagraphElement
+  2: Text
+  3: HTMLDivElement
+  4: Text
+
+

Anmerkungen

+

Um statt dem vorangestellten Datenknoten den Nächsten zu erhalten, verwenden Sie {{ domxref("Node.nextSibling") }}.
+ Da die Eigenschaft previousSibling Textknoten berücksichtigt, kann es sein, dass Sie statt des vorangestellten Elements einen Textknoten als Rückgabewert erhalten. Oft passiert das durch Whitespace aller Art (z.B. Leerzeichen, Zeilenvorschübe), der sich zwischen den beiden Elementen befindet und von previousSibling als Textknoten interpretiert wird.
+ Falls Textknoten nicht berücksichtigt werden sollen, verwenden Sie stattdessen {{ domxref("Element.previousElementSibling") }}

+

Spezifikationen

+ +

Siehe auch

+ diff --git a/files/de/web/api/node/removechild/index.html b/files/de/web/api/node/removechild/index.html new file mode 100644 index 0000000000..86a8dfd460 --- /dev/null +++ b/files/de/web/api/node/removechild/index.html @@ -0,0 +1,82 @@ +--- +title: Node.removeChild() +slug: Web/API/Node/removeChild +tags: + - API + - DOM + - Entfernen + - Knoten + - Löschen + - Methode(2) + - Referenz +translation_of: Web/API/Node/removeChild +--- +
+
{{APIRef("DOM")}}
+
+ +

Die Methode Node.removeChild() entfernt einen Kindknoten aus dem DOM. Gibt den entfernten Knoten zurück.

+ +

Syntax

+ +
var oldChild = element.removeChild(child);
+ODER
+element.removeChild(child);
+
+ + + +

Der entfernte Kindknoten bleibt im Speicher erhalten, ist aber nicht länger Teil des DOM. Mit der ersten Syntax-Form ist es möglich, den entfernten Knoten später im Code wieder zu verwenden, über die oldChild Objektreferenz. In der zweiten Form wird jedoch keine oldChild-Refernenz behalten, also wird (vorausgesetzt dass nirgendwo anders im Code eine Referenz gehalten wird) der Knoten unbenutzbar und nicht erreichbar, und wird nach kurzer Zeit automatisch aus dem Speicher entfernt. 

+ +

Wenn child kein Kind des Knotens element ist, wirft die Methode eine Exception. Dies passiert auch wenn child zwar zum Aufruf der Methode ein Kind von element war, aber durch einen beim Entfernen des Knotens aufgerufenen Event Handler bereits aus dem DOM entfernt wurde (z.B. blur).

+ +

 

+ +

Beispiele

+ +
<!-- Beispiel HTML -->
+
+<div id="top" align="center">
+  <div id="nested"></div>
+</div>
+
+ +
// Ein bestimmtes Element entfernen, wenn der Elternknoten bekannt ist
+var d = document.getElementById("top");
+var d_nested = document.getElementById("nested");
+var throwawayNode = d.removeChild(d_nested);
+
+ +
// Ein bestimmtes Element entfernen, ohne den Elternknoten zu kennen
+var node = document.getElementById("nested");
+if (node.parentNode) {
+  node.parentNode.removeChild(node);
+}
+
+ +
// Alle Kindknoten eines Elements entfernen
+var element = document.getElementById("top");
+while (element.firstChild) {
+  element.removeChild(element.firstChild);
+}
+
+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/node/replacechild/index.html b/files/de/web/api/node/replacechild/index.html new file mode 100644 index 0000000000..09886ba653 --- /dev/null +++ b/files/de/web/api/node/replacechild/index.html @@ -0,0 +1,61 @@ +--- +title: Node.replaceChild +slug: Web/API/Node/replaceChild +translation_of: Web/API/Node/replaceChild +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

Die Node.replaceChild()-Methode ersetzt den Kind-Knoten (child node) innerhalb des gegebenen Eltern-Knotens (parent node) durch einen anderen.

+ +

Syntax

+ +
replacedNode = parentNode.replaceChild(newChild, oldChild);
+
+ + + +

Beispiel

+ +
// <div>
+//  <span id="childSpan">foo bar</span>
+// </div>
+
+// erzeuge einen leeren Element-Knoten
+// ohne ID, Attribute oder Inhalt
+var sp1 = document.createElement("span");
+
+// setze sein id Attribut auf 'newSpan'
+sp1.setAttribute("id", "newSpan");
+
+// Inhalt für das neue Element erzeugen
+var sp1_content = document.createTextNode("new replacement span element.");
+
+// den erzeugten Inhalt an das Element anhängen
+sp1.appendChild(sp1_content);
+
+// Referenz auf den zu ersetzenden Knoten erzeugen
+var sp2 = document.getElementById("childSpan");
+var parentDiv = sp2.parentNode;
+
+// den existierenden Knoten sp2 mit dem neuen Span-Element sp1 ersetzen
+parentDiv.replaceChild(sp1, sp2);
+
+// Ergebnis:
+// <div>
+//   <span id="newSpan">new replacement span element.</span>
+// </div>
+
+ +

Spezifikation

+ +

DOM Level 1 Core: replaceChild

+ +

DOM Level 2 Core: replaceChild

+ +

{{ languages( { "fr": "fr/DOM/element.replaceChild", "ja": "ja/DOM/element.replaceChild", "pl": "pl/DOM/element.replaceChild", "zh-cn": "zh-cn/DOM/Node.replaceChild" } ) }}

diff --git a/files/de/web/api/node/setuserdata/index.html b/files/de/web/api/node/setuserdata/index.html new file mode 100644 index 0000000000..7c4c714d01 --- /dev/null +++ b/files/de/web/api/node/setuserdata/index.html @@ -0,0 +1,121 @@ +--- +title: Node.setUserData() +slug: Web/API/Node/setUserData +translation_of: Web/API/Node/setUserData +--- +
{{APIRef("DOM")}}{{obsolete_header}}
+ +

Die Methode Node.setUserData()erlaubt es dem Benutzer Daten dem Element hinzuzufügen (oder löschen), ohne dabei die DOM zu modifizieren. Beachte dabei, dass die Daten durch das Nutzen von {{domxref("Node.importNode")}}, {{domxref("Node.cloneNode()")}} und {{domxref("Node.renameNode()")}} nicht mitgegeben werden kann (jedoch kann {{domxref("Node.adoptNode")}} die Information behalten), und bei Vergleichstest mit {{domxref("Node.isEqualNode()")}} werden die Daten nicht berücksichtigt.

+ +

This method offers the convenience of associating data with specific nodes without needing to alter the structure of a document and in a standard fashion, but it also means that extra steps may need to be taken if one wishes to serialize the information or include the information upon clone, import, or rename operations.

+ +
+

The Node.getUserData and {{domxref("Node.setUserData")}} methods are no longer available from Web content. {{domxref("Element.dataset")}} or WeakMap can be used instead.

+
+ +

Syntax

+ +
var prevUserData = someNode.setUserData(userKey, userData, handler);
+ +

Parameters

+ + + +

Beispiel

+ +
var d = document.implementation.createDocument('', 'test', null);
+d.documentElement.setUserData('key', 15, {handle:function (o, k, d, s, ds) {console.log(o+'::'+k+'::'+d+'::'+s+'::'+ds)}}); // 2::key::15::[object Element]::[object Element]
+console.log(d.documentElement.getUserData('key')); // 15
+var e = document.importNode(d.documentElement, true); // causes handler to be called
+console.log(e.getUserData('key')); // null since user data is not copied
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('DOM WHATWG', '#interface-node', 'Node')}}{{Spec2('DOM WHATWG')}}Removed from the specification.
{{SpecName('DOM3 Core', 'core.html#Node3-setUserData', 'Node.setUserData()')}}{{Spec2('DOM3 Core')}}Initial definition
+ +

Browser Kompabilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop("1.0")}}
+ {{CompatNo}} {{CompatGeckoDesktop("22.0")}}[1]		{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatGeckoMobile("1.0")}}
+ {{CompatNo}} {{CompatGeckoMobile("22.0")}}[1]		{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] The method is still available from within chrome scripts.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/node/textcontent/index.html b/files/de/web/api/node/textcontent/index.html new file mode 100644 index 0000000000..c237b6ee70 --- /dev/null +++ b/files/de/web/api/node/textcontent/index.html @@ -0,0 +1,69 @@ +--- +title: Node.textContent +slug: Web/API/Node/textContent +tags: + - API + - DOM + - Eigenschaft + - Kommando API + - NeedsSpecTable + - Referenz +translation_of: Web/API/Node/textContent +--- +
{{APIRef("DOM")}}
+ +

Die Node.textContent Eigenschaft repräsentiert den Text-Inhalt einer Node und ihrer untergeordneten Elemente.

+ +

Syntax

+ +
var text = element.textContent;
+element.textContent = "Dies ist ein Beispiel-Text";
+
+ +

Beschreibung

+ + + +

Unterschiede zu innerText

+ +

Internet Explorer hat element.innerText eingeführt. Die Absicht ist ähnlich, weist aber die folgenden Unterschiede auf:

+ + + +

Unterschiede zu innerHTML

+ +

innerHTML gibt, wie der Name schon sagt, das HTML zurück. Sehr häufig wird dies benutzt, um den Text aus einem Element abzurufen oder ihn zu ändern. Stattdessen sollte lieber textContent verwendet werden. Da der Text nicht als HTML geparst wird, ist es sehr wahrscheinlich, dass die Performance besser ist. Weiterhin umgeht man so auch einen möglichen XSS-Angriffspunkt.

+ +

Beispiel

+ +
// Nehmen wir das folgende HTML Fragment:
+//   <div id="divA">Hier ist <span>etwas</span> Text</div>
+
+// Abrufen des Text-Inhalts:
+var text = document.getElementById("divA").textContent;
+// |text| wird auf "Hier ist etwas Text" gesetzt
+
+// Setzen des Text-Inhalts:
+document.getElementById("divA").textContent = "Hier ist auch Text";
+// Das HTML von divA sieht nun so aus:
+//   <div id="divA">Hier ist auch Text</div>
+
+ +

Browser Kompatibilität

+ +

{{Compat("api.Node.textContent")}}

+ +

Spezifikation

+ + diff --git a/files/de/web/api/notification/index.html b/files/de/web/api/notification/index.html new file mode 100644 index 0000000000..aaf5188c37 --- /dev/null +++ b/files/de/web/api/notification/index.html @@ -0,0 +1,265 @@ +--- +title: Notification +slug: Web/API/notification +translation_of: Web/API/Notification +--- +
{{APIRef("Web Notifications")}} {{ SeeCompatTable() }}
+ +
Das Notification interface wird zum konfigurieren und Anzeigen von desktop notifications verwendet.
+ +

Permissions

+ +

Wenn Sie notifications in einer offenen web app verwenden, fügen sie die desktop-notification permission zu ihrem manifest file hinzu. Notifications können für jedes permission level, hosted oder darüber verwendet werden.

+ +
"permissions": {
+    "desktop-notification":{}
+}
+ +

Konstruktor

+ +
var notification = new Notification(title, options);
+ +

Parameter

+ +
+
title
+
Titel der innerhalb der Notification angezeigt werden muss.
+
options {{optional_inline}}
+
Ein Objekt das optionale Konfigurationsparamter enthält. Es kann die folgenden Einträge enthalten: +
    +
  • dir : Die Ausrichtung des Textes; Verfügbar sind auto, ltr, oder rtl.
    • +
  • lang:  Spezifiziere die verwendete Sprache. Dieser String muss ein valides BCP 47 language tag sein.
    • +
  • body:  Ein String, welcher jeglichen extra Inhalt einer notification beinhaltet.
    • +
  • tag: Die ID einer gegebene notification, um diese abzurufen, zu löschen, zu ersetzen oder zu löschen. 
    • +
  • icon: Die Url für das verwendete Icon in einer notification.
    • +
  • data: Ein Benutzerdefiniertes Datenfeld.
    • +
+
+
+ +

Properties

+ +

Static properties

+ +

Diese Eigenschaften sind nur im Notification-Objekt selbst verfügbar.

+ +
+
{{domxref("Notification.permission")}} {{readonlyinline}}
+
Eine Zeichenkette, die die aktuell gesetzten Berechtigungen Notifications anzuzeigen darstellt. Mögliche Werte sind: denied (der Nutzer erlaubt keine Benachrichtigungen), granted (der Nutzer akzeptiert, dass Benachrichtigungen angezeigt werden) oder default (die Nutzerwahl ist unbekannt, daher verhält sich der Browser wie bei denied).
+
+ +

Instance properties

+ +

Diese Eigenschaften sind nur in Instanzen des Notification-Objekts verfügbar.

+ +
+
{{domxref("Notification.title")}} {{readonlyinline}}
+
Der Titel der Benachrichtigung der in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.dir")}} {{readonlyinline}}
+
Textausrichtung der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.lang")}} {{readonlyinline}}
+
Sprachcode der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.body")}} {{readonlyinline}}
+
Textinhalt der Benachrichtung welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.tag")}} {{readonlyinline}}
+
ID der Benachrichtung (if any) welche in den Parametern des Konstruktors spezifiziert wurde.
+
{{domxref("Notification.icon")}} {{readonlyinline}}
+
URL des Bildes welches als Icon der Benachrichtgung verwendet wird, wie in den Parametern des Konstruktors spezifiziert wurde
+
{{domxref("Notification.data")}} {{readonlyinline}}
+
Returns a structured clone of the notification’s data.
+
+ +

Event handlers

+ +
+
{{domxref("Notification.onclick")}}
+
A handler for the {{event("click")}} event. It is triggered each time the user clicks on the notification.
+
{{domxref("Notification.onshow")}}
+
A handler for the {{event("show")}} event. It is triggered when the notification is displayed.
+
{{domxref("Notification.onerror")}}
+
A handler for the {{event("error")}} event. It is triggered each time the notification encounters an error.
+
{{domxref("Notification.onclose")}}
+
A handler for the {{event("close")}} event. It is triggered when the user closes the notification.
+
+ +

Methods

+ +

Static methods

+ +

These methods are available only on the Notification object itself.

+ +
+
{{domxref("Notification.requestPermission()")}}
+
Requests permission from the user to display notifications. This method must be called as the result of a user action (for example, an onclick event), and cannot be used without it.
+
+ +

Instance methods

+ +

These properties are available only on an instance of the Notification object or through its prototype. The Notification objects also inherit from the {{domxref("EventTarget")}} interface.

+ +
+
{{domxref("Notification.close()")}}
+
Programmatically closes a notification.
+
+ +

{{page("/en-US/docs/Web/API/EventTarget","Methods")}}

+ +

Example

+ +

Assume this basic HTML:

+ +
<button onclick="notifyMe()">Notify me!</button>
+ +

It's possible to send a notification as follows:

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    alert("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied') {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

See the live result

+ +

{{ EmbedLiveSample('Example', '100%', 30) }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Notifications')}}{{Spec2('Web Notifications')}}Initial specification.
+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5 {{ property_prefix("webkit") }} (see notes)
+ 22		4.0 {{ property_prefix("moz") }} (see notes)
+ 22		{{ CompatNo() }}256 (see notes)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Mobile
Basic support{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		4.0 {{ property_prefix("moz") }} (see notes)
+ 22		1.0.1 {{ property_prefix("moz") }} (see notes)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
+
+ +

Gecko notes

+ + + +

Chrome notes

+ + + +

Android notes

+ + + +

Safari notes

+ + + +

Notes

+ +

{{ref("1")}} Deprecated since Android 4.0.

+ +

See also

+ + diff --git a/files/de/web/api/notification/permission/index.html b/files/de/web/api/notification/permission/index.html new file mode 100644 index 0000000000..bd381fe34c --- /dev/null +++ b/files/de/web/api/notification/permission/index.html @@ -0,0 +1,187 @@ +--- +title: Notification.permission +slug: Web/API/notification/permission +tags: + - API + - DOM + - Notifications + - Property + - Reference +translation_of: Web/API/Notification/permission +--- +

{{APIRef("Web Notifications")}}

+ +

Die schreibgeschützte Berechtigungseigenschaft der Schnittstelle {{domxref ("Notificaton")}} gibt die aktuelle Berechtigung an, die der Benutzer für den aktuellen Ursprung zur Anzeige von Web-Benachrichtigungen erteilt hat.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
var permission = Notification.permission;
+ +

Value

+ +

Ein {{domxref ("DOMString")}} repräsentiert die aktuelle Berechtigung. Der Wert kann sein:

+ + + +

Beispiele

+ +

Das folgende ziemlich ausführliche Snippet könnte verwendet werden, wenn Sie zuerst überprüfen möchten, ob Benachrichtigungen unterstützt werden, und prüfen Sie dann, ob für den aktuellen Ursprung die Erlaubnis für das Senden von Benachrichtigungen gewährt wurde, und fordern Sie dann bei Bedarf eine Genehmigung an, bevor Sie eine Benachrichtigung senden.

+ +
function notifyMe() {
+  // Let's check if the browser supports notifications
+  if (!("Notification" in window)) {
+    console.log("This browser does not support desktop notification");
+  }
+
+  // Let's check whether notification permissions have alredy been granted
+  else if (Notification.permission === "granted") {
+    // If it's okay let's create a notification
+    var notification = new Notification("Hi there!");
+  }
+
+  // Otherwise, we need to ask the user for permission
+  else if (Notification.permission !== 'denied' || Notification.permission === "default") {
+    Notification.requestPermission(function (permission) {
+      // If the user accepts, let's create a notification
+      if (permission === "granted") {
+        var notification = new Notification("Hi there!");
+      }
+    });
+  }
+
+  // At last, if the user has denied notifications, and you
+  // want to be respectful there is no need to bother them any more.
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("Web Notifications","#dom-notification-permission","permission")}}{{Spec2('Web Notifications')}}Lebensstandard
+ +

Browserkombatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung5 {{ property_prefix("webkit") }} (see notes)
+ 22		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		{{ CompatNo() }}256 (see notes)
Vorhanden in den Arbeitskräften{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("41.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
+

Grundlegende Unterstützung

+ 		{{ CompatUnknown() }} +

{{CompatVersionUnknown}}

+ 		{{CompatVersionUnknown}}4.0 {{ property_prefix("moz") }} (see notes)
+ 22		1.0.1 {{ property_prefix("moz") }} (see notes)
+ 1.2		{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatNo() }} +

{{CompatVersionUnknown}}

+
Vorhanden in den Arbeitskräften{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(41.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Firefox OS Notizen

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Firefox OS notes")}}

+ +

Chrome Notizen

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Chrome notes")}}

+ +

Safari Notizen

+ +

{{Page("/en-US/docs/Web/API/Notifications_API", "Safari notes")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/page_visibility_api/index.html b/files/de/web/api/page_visibility_api/index.html new file mode 100644 index 0000000000..c6ad0ac2e4 --- /dev/null +++ b/files/de/web/api/page_visibility_api/index.html @@ -0,0 +1,189 @@ +--- +title: Page Visibility API +slug: Web/API/Page_Visibility_API +translation_of: Web/API/Page_Visibility_API +--- +

{{DefaultAPISidebar("Page Visibility API")}}

+ +

Die Page Visibility API informiert sobald eine Webseite sichtbar ist und sich im Fokus befindet. Mit dem Konzept des "tabbed browsing" ist es recht wahrscheinlich, dass sich jede Webseite irgendwann im Hintergrund befindet und deshalb nicht aktiv sichtbar für den Benutzer ist. Wenn der Benutzer die Webseite minimiert oder in einen anderen Tab wechselt, sendet die API ein {{event("visibilitychange")}} Event über die geänderte Sichtbarkeit der Seite. Anhand des Events können dann spezifische Aktionen ausgeführt oder ein von der Sichtbarkeit abhängiges Verhalten aktiviert werden. Wenn etwa ein Video in der Webseite abgespielt wird, könnte dieses pausieren solange die Seite für den Benutzer unsichtbar ist und automatisch fortsetzen, sobald er zu ihr zurückkehrt. Der Benutzer verliert somit die Stelle in dem Video nicht und kann dieses einfach weiter anschauen.

+ +

Die Status eines {{HTMLElement("iframe")}} sind dieselben wie die des übergeordneten document. Wenn der iframe über CSS Eigenschaften versteckt wird, löst dies nicht die visibility events aus und ändert auch nicht den Status der umliegenden Seite.

+ +

Vorteile

+ +

Die API ist besonders hilfreich, um Ressourcen zu sparen und gibt den Entwicklern die Möglichkeit, nicht benötigte Aufgaben einer Webseite oder Web App zu pausieren solange diese nicht sichtbar ist.

+ +

Use cases

+ +

Einige Beispiele für die Nutzung sind:

+ + + +

Bisher mussten hierfür Workarounds von den Entwicklern implementiert werden. Dafür wurden Lösungen verwendet etwa auf Basis von onblur/onfocus Event-Handlern auf dem window, worüber sich ermitteln lässt ob die Webseite gerade die aktive ist oder nicht. Allerdings teilt dies nicht mit, ob die Webseite gerade für den Benutzer effektiv sichtbar ist oder nicht. Die Page Visibility API addressiert genau das. (Verglichen mit der onblur/onfocus basierten Lösung ist ein zentraler Unterschied, dass dort die Webseite nicht unsichtbar wurde, wenn ein ganz anderes Fenster aktiv wurde oder der Browser selbst den Fokus verloren hat, weil der Benutzer zu einer anderen Applikation gewechselt ist. Eine Webseite wird hier nur unsichtbar, wenn der Benutzer innerhalb des Browserfensters zu einem anderen Tab wechselt oder das Fenster minimiert.)

+ +

Beispiel

+ +

Hier ist ein live Code-Beispiel (eines Videos mit Sound).

+ +

Das Beispiel wurde über folgenden Code realisiert:

+ +
// Set the name of the hidden property and the change event for visibility
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// If the page is hidden, pause the video;
+// if the page is shown, play the video
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+// Warn if the browser doesn't support addEventListener or the Page Visibility API
+if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
+  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
+} else {
+  // Handle page visibility change
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+  // When the video pauses, set the title.
+  // This shows the paused
+  videoElement.addEventListener("pause", function(){
+    document.title = 'Paused';
+  }, false);
+
+  // When the video plays, set the title.
+  videoElement.addEventListener("play", function(){
+    document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Eigenschaften

+ +

document.hidden Read only

+ +

Liefert true wenn die Webseite als unsichtbar für den Benutzer gewertet wird und false andernfalls.

+ +

document.visibilityState Read only

+ +

Ist ein string welcher den aktuellen Sichtbarkeitsstatus angibt. Mögliche Werte sind:

+ + + +
//startSimulation and pauseSimulation defined elsewhere
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Initial definition.
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13 {{property_prefix("webkit")}}
+ 33		{{CompatGeckoDesktop(18)}} [2]1012.10[1]7
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.4 {{property_prefix("webkit")}}{{CompatGeckoMobile(18)}} [2]1012.10[1]7
+
+ +

[1] Feuert das {{event("visibilitychange")}} Event nicht, wenn das Browserfenster minimiert wird. Ebenso wird hidden nicht auf true gesetzt.

+ +

[2] In den Versionen Firefox 10 bis Firefox 51 einschließlich, konnte diese Eigenschaft verwendet werden mit Vendor-Prefix -moz-.

+ +

Weitere Informationen

+ + diff --git a/files/de/web/api/performance/index.html b/files/de/web/api/performance/index.html new file mode 100644 index 0000000000..14f80850bb --- /dev/null +++ b/files/de/web/api/performance/index.html @@ -0,0 +1,135 @@ +--- +title: Performance +slug: Web/API/Performance +tags: + - API + - Interface + - Navigation Timing + - NeedsTranslation + - Performance + - Reference + - TopicStub + - Web Performance +translation_of: Web/API/Performance +--- +
{{APIRef("High Resolution Time")}}
+ +

The Performance interface provides access to performance-related information for the current page. It's part of the High Resolution Time API, but is enhanced by the Performance Timeline API, the Navigation Timing API, the User Timing API, and the Resource Timing API.

+ +

An object of this type can be obtained by calling the {{domxref("Window.performance")}} read-only attribute.

+ +
+

Note: This interface and its members are available in Web Workers, except where indicated below. Also note that performance markers and measures are per context. If you create a mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa.

+
+ +

Properties

+ +

The Performance interface doesn't inherit any properties.

+ +
+
{{domxref("Performance.navigation")}} {{readonlyInline}}
+
A {{domxref("PerformanceNavigation")}} object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth. Not available in workers.
+
{{domxref("Performance.timing")}} {{readonlyInline}}
+
A {{domxref("PerformanceTiming")}} object containing latency-related performance information. Not available in workers.
+
{{domxref("Performance.memory", "performance.memory")}} {{Non-standard_inline}}
+
A non-standard extension added in Chrome, this property provides an object with basic memory usage information. You should not use this non-standard API.
+
+ +
+
+

Event handlers

+
+
{{domxref("Performance.onresourcetimingbufferfull")}}
+
An {{domxref("EventTarget")}} which is a callback that will be called when the {{event("resourcetimingbufferfull")}} event is fired.
+
+ +

Methods

+ +

The Performance interface doesn't inherit any methods.

+ +
+
{{domxref("Performance.clearMarks()")}}
+
Removes the given mark from the browser's performance entry buffer.
+
{{domxref("Performance.clearMeasures()")}}
+
Removes the given measure from the browser's performance entry buffer.
+
{{domxref("Performance.clearResourceTimings()")}}
+
Removes all {{domxref("PerformanceEntry","performance entries")}} with a {{domxref("PerformanceEntry.entryType","entryType")}} of "resource" from the browser's performance data buffer.
+
{{domxref("Performance.getEntries()")}}
+
Returns a list of {{domxref("PerformanceEntry")}} objects based on the given filter.
+
{{domxref("Performance.getEntriesByName()")}}
+
Returns a list of {{domxref("PerformanceEntry")}} objects based on the given name and entry type.
+
{{domxref("Performance.getEntriesByType()")}}
+
Returns a list of {{domxref("PerformanceEntry")}} objects of the given entry type.
+
{{domxref("Performance.mark()")}}
+
Creates a {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer with the given name.
+
{{domxref("Performance.measure()")}}
+
Creates a named {{domxref("DOMHighResTimeStamp","timestamp")}} in the browser's performance entry buffer between two specified marks (known as the start mark and end mark, respectively).
+
{{domxref("Performance.now()")}}
+
Returns a {{domxref("DOMHighResTimeStamp")}} representing the amount of milliseconds elapsed since a reference instant.
+
{{domxref("Performance.setResourceTimingBufferSize()")}}
+
Sets the browser's resource timing buffer size to the specified number of "resource" {{domxref("PerformanceEntry.entryType","type")}} {{domxref("PerformanceEntry","performance entry")}} objects.
+
{{domxref("Performance.toJSON()")}}
+
Is a jsonizer returning a json object representing the Performance object.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Highres Time Level 2', '#the-performance-interface', 'toJSON()')}}{{Spec2('Highres Time Level 2')}}Defines toJson() method.
{{SpecName('Highres Time', '#the-performance-interface', 'Performance')}}{{Spec2('Highres Time')}}Defines now() method.
{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}{{Spec2('Navigation Timing')}}Defines timing and navigation properties.
{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}{{Spec2('Performance Timeline Level 2')}}Changes getEntries() interface.
{{SpecName('Performance Timeline', '#sec-window.performance-attribute', 'Performance extensions')}}{{Spec2('Performance Timeline')}}Defines getEntries(), getEntriesByType() and getEntriesByName() methods.
{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('Resource Timing')}}Defines clearResourceTimings() and setResourceTimingBufferSize() methods and the onresourcetimingbufferfull property.
{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing Level 2')}}Clarifies mark(), clearMark(), measure() and clearMeasure() methods.
{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}{{Spec2('User Timing')}}Defines mark(), clearMark(), measure() and clearMeasure() methods.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("api.Performance")}}

+
+
diff --git a/files/de/web/api/performance/now/index.html b/files/de/web/api/performance/now/index.html new file mode 100644 index 0000000000..019bafeb55 --- /dev/null +++ b/files/de/web/api/performance/now/index.html @@ -0,0 +1,164 @@ +--- +title: performance.now() +slug: Web/API/Performance/now +tags: + - API + - Méthode + - Performanz + - Referenz + - Web Performance API +translation_of: Web/API/Performance/now +--- +
{{APIRef("High Resolution Timing")}}
+ +

Die performance.now() Methode gibt einen {{domxref("DOMHighResTimeStamp")}} zurück, der in Millisekunden gemessen wird und auf fünf Tausendstel einer Millisekunde (5 Mikrosekunden) genau ist.

+ +

Der zurückgegebene Wert stellt die Zeit dar, die seit time origin (der {{domxref("PerformanceTiming.navigationStart")}} Eigenschaft und damit der Startzeit) vergangen ist. In einem Web Worker ist die Startzeit die Zeit, in der ihr Ausführungskontext (Thread oder Prozess) erstellt wurde. In einem Browserfenster ist es die Zeit, zu der eine Nutzerin zu dem aktuellen Dokument navigierte (oder die Navigation bestätigte, sollte Bestätigung notwendig gewesen sein). Folgende Punkte sind dabei zu beachten:

+ + + +
t = performance.now();
+ +

Beispiel

+ +
var zeit0 = performance.now();
+machEtwas();
+var zeit1 = performance.now();
+console.log("Der Aufruf von machEtwas dauerte " + (zeit1 - zeit0) + " Millisekunden.");
+
+ +

Anders als andere Zeitmessungsdaten, die in JavaScript verfügbar sind (beispielsweise Date.now), sind die Zeitstempel, die von Performance.now() zurückgegeben werden nicht auf eine Auflösung von einer Millisekunde beschränkt. Stattdessen repräsentieren sie Zeit als Fließkommazahl mit einer Präzision von bis zu einer Mikrosekunde.

+ +

Ebenso anders als Date.now(), wachsen die Werte, die von Performance.now() zurückgegeben werden immer in einem konstanten Tempo, unabhängig von der Systemuhr (die manuell eingestellt oder durch Software wie NTP ungenau geworden sein kann). Ansonsten wird performance.timing.navigationStart + performance.now() annähernd ähnlich zu Date.now() sein.

+ +

Spezifkationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time Level 2')}}Strengere Definition von Schnittstellen und Typen
{{SpecName('Highres Time', '#dom-performance-now', 'performance.now()')}}{{Spec2('Highres Time')}}Ursprüngliche Definition
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Grundsätzliche Unterstützung{{CompatChrome("20.0")}} {{property_prefix("webkit")}}
+ {{CompatChrome("24.0")}} [1]		{{CompatVersionUnknown}}{{CompatGeckoDesktop("15.0")}}10.0{{CompatOpera("15.0")}}{{CompatSafari("8.0")}}
in Web Workern{{CompatChrome("33")}}{{CompatUnknown}}{{CompatGeckoDesktop("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
now() in einem dedizierten Worker ist nun unabhängig vom now() des Hauptkontextes.{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileChrome for Android
Grundsätzliche Unterstützung{{CompatAndroid("4.0")}}{{CompatChrome("25.0")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("15.0")}}10.0{{CompatNo}}9{{CompatChrome("25.0")}}
in Web Workern{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("34.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
now() in einem dedizierten Worker ist nun unabhängig vom now() des Hauptkontextes.{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("45.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Windows Versionen von Chrome 20 bis 33 geben performance.now() nur mit einer Millisekundengenauigkeit zurück.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/push_api/index.html b/files/de/web/api/push_api/index.html new file mode 100644 index 0000000000..84451b1ac4 --- /dev/null +++ b/files/de/web/api/push_api/index.html @@ -0,0 +1,180 @@ +--- +title: Push API +slug: Web/API/Push_API +translation_of: Web/API/Push_API +--- +
{{SeeCompatTable}}
+ +

Die Push API verleiht Web Applikationen die Fähigkeit, Benachrichtigungen zu empfangen, die von einem Server gesendet werden. Das funktioniert auch, wenn die Web Applikation selbst nicht im Vordergrund oder überhaupt aktuell geladen ist. Dies ermöglicht Entwicklern asynchrone Notizen und Updates an Benutzer zu senden, die sich dafür angemeldet haben. Das Ergebnis ist besseres Engagement mit aktuellem Inhalt.

+ +

Push Konzepte und Anwendung

+ +
+

When implementing PushManager subscriptions, it is vitally important that you protect against CSRF/XSRF issues in your app. See the following articles for more information:

+ + +
+ +

Wenn eine App Push Nachrichten erhalten soll, muss sie ein service worker sein. Wenn der Service Worker aktiv ist, kann er Push Benachrichtigungen abonnieren wie folgt: {{domxref("PushManager.subscribe()")}}.

+ +

Das Resultat {{domxref("PushSubscription")}} enthält sämtliche Information, die die App braucht, um Push Nachrichten zu senden: einen Endpunkt und den Kodierungsschlüssel zum Datenversand.

+ +

Der Service Worker startet bei Bedarf, um eintreffende Nachrichten zu verarbeiten, welche an den Event Handler {{domxref("ServiceWorkerGlobalScope.onpush")}} geliefert werden. Dies erlaubt der App auf einlaufende Push Nachrichten zu reagieren, beispielsweise mit der Darstellung einer Notiz (mit dem Befehl {{domxref("ServiceWorkerRegistration.showNotification()")}}.)

+ +

Jedes Abonnement ist eindeutig für einen Service Worker. Der Endpunkt des Abonnements ist eine eindeutige capability URL: Kenntnis des Endpunkts ist alles was nötig ist, um eine Nachricht an Ihre Applikation zu senden. Die Endpunkt URL ist daher geheim zu halten, da sonst andere Applikationen Nachrichten an Ihre Applikation senden könnten.

+ +

Die Aktivierung einen Service Workers kann eine erhöhte Ressourcennutzung begründen, besonders der Batterie. Die verschiedenen Browser behandeln dies verschieden. Es gibt aktuell keinen Standard dafür. Firefox erlaubt eine begrenzte Anzahlt (quota) Push Nachrichten, die an eine Applikation gesendet werden dürfen, wobei Push Nachrichten, die Notizen generieren, davon ausgenommen sind. Das Limit wird bei jedem Seitenbesuch erneuert. Zum Vergleich verwendet Chrome kein Limit, sondern erfordert, dass jede Push Nachricht mit einer Notiz angezeigt wird.

+ +
+

Note: As of Gecko 44, the allowed quota of push messages per application is not incremented when a new notification fires, when another is still visible, for a period of three seconds. This handles cases where a burst of Push messages is received, and not all generate a visible notification.

+
+ +
+

Note: Chrome versions earlier than 52 require you to set up a project on Google Cloud Messaging to send push messages, and use the associated project number and API key when sending push notifications. It also requires an app manifest, with some special parameters to use this service.

+
+ +

Interfaces

+ +
+
{{domxref("PushEvent")}}
+
Represents a push action, sent to the global scope of a {{domxref("ServiceWorker")}}. It contains information sent from an application to a {{domxref("PushSubscription")}}.
+
{{domxref("PushManager")}}
+
Provides a way to receive notifications from third-party servers, as well as request URLs for push notifications. This interface has replaced the functionality offered by the obsolete {{domxref("PushRegistrationManager")}} interface.
+
{{domxref("PushMessageData")}}
+
Provides access to push data sent by a server, and includes methods to manipulate the received data.
+
{{domxref("PushSubscription")}}
+
Provides a subcription's URL endpoint, and allows unsubscription from a push service.
+
+ +

Service worker additions

+ +

The following additions to the Service Worker API have been specified in the Push API spec to provide an entry point for using Push messages. They also monitor and respond to push and subscription change events.

+ +
+
{{domxref("ServiceWorkerRegistration.pushManager")}} {{readonlyinline}}
+
Returns a reference to the {{domxref("PushManager")}} interface for managing push subscriptions including subscribing, getting an active subscription, and accessing push permission status. This is the entry point into using Push messaging.
+
{{domxref("ServiceWorkerGlobalScope.onpush")}}
+
An event handler fired whenever a {{Event("push")}} event occurs; that is, whenever a server push message is received.
+
{{domxref("ServiceWorkerGlobalScope.onpushsubscriptionchange")}}
+
An event handler fired whenever a {{Event("pushsubscriptionchange")}} event occurs; for example, when a push subscription has been invalidated, or is about to be invalidated (e.g. when a push service sets an expiration time.)
+
+ +

Examples

+ +

Mozilla's ServiceWorker Cookbook contains many useful Push examples.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Push API")}}{{Spec2("Push API")}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}[1][3]{{CompatNo}}[2]{{CompatUnknown}}{{CompatUnknown}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatGeckoDesktop(44.0)}}[3]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatUnknown}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(42.0)}}
{{domxref("PushEvent.data")}},
+ {{domxref("PushMessageData")}}		{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(48.0)}}[4]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ + + +

See also

+ + + +
{{DefaultAPISidebar("Push API")}}
diff --git a/files/de/web/api/pushmanager/index.html b/files/de/web/api/pushmanager/index.html new file mode 100644 index 0000000000..96627b0fb0 --- /dev/null +++ b/files/de/web/api/pushmanager/index.html @@ -0,0 +1,161 @@ +--- +title: PushManager +slug: Web/API/PushManager +tags: + - API + - Experimental + - Interface + - NeedsTranslation + - Push + - Push API + - Reference + - Service Workers + - TopicStub + - WebAPI +translation_of: Web/API/PushManager +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

The PushManager interface of the Push API provides a way to receive notifications from third-party servers as well as request URLs for push notifications.

+ +

This interface is accessed via the {{domxref("ServiceWorkerRegistration.pushManager")}} property.

+ +
+

Note: This interface replaces functionality previously offered by the obsolete {{domxref("PushRegistrationManager")}} interface.

+
+ +

Properties

+ +

None.

+ +

Methods

+ +
+
{{domxref("PushManager.getSubscription()")}}
+
Retrieves an existing push subscription. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of an existing subscription. If no existing subscription exists, this resolves to a null value.
+
{{domxref("PushManager.permissionState()")}}
+
Returns a {{jsxref("Promise")}} that resolves to the permission state of the current {{domxref("PushManager")}}, which will be one of 'granted', 'denied', or 'prompt'.
+
{{domxref("PushManager.subscribe()")}}
+
Subscribes to a push service. It returns a {{jsxref("Promise")}} that resolves to a {{domxref("PushSubscription")}} object containing details of a push subscription. A new push subscription is created if the current service worker does not have an existing subscription.
+
+ +

Deprecated methods

+ +
+
{{domxref("PushManager.hasPermission()")}} {{deprecated_inline}}
+
Returns a {{jsxref("Promise")}} that resolves to the PushPermissionStatus of the requesting webapp, which will be one of granted, denied, or default. Replaced by {{domxref("PushManager.permissionState()")}}.
+
{{domxref("PushManager.register()")}} {{deprecated_inline}}
+
Subscribes to a push subscription. Replaced by {{domxref("PushManager.subscribe()")}}.
+
{{domxref("PushManager.registrations()")}} {{deprecated_inline}}
+
Retrieves existing push subscriptions. Replaced by {{domxref("PushManager.getSubscription()")}}.
+
{{domxref("PushManager.unregister()")}} {{deprecated_inline}}
+
Unregisters and deletes a specified subscription endpoint. In the updated API, a subscription is unregistered by calling the {{domxref("PushSubscription.unsubscribe()")}} method.
+
+ +

Example

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.subscriptionId);
+        console.log(pushSubscription.endpoint);
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Push API','#pushmanager-interface','PushManager')}}{{Spec2('Push API')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

See also

+ + diff --git a/files/de/web/api/pushmanager/subscribe/index.html b/files/de/web/api/pushmanager/subscribe/index.html new file mode 100644 index 0000000000..5d82a28916 --- /dev/null +++ b/files/de/web/api/pushmanager/subscribe/index.html @@ -0,0 +1,143 @@ +--- +title: PushManager.subscribe() +slug: Web/API/PushManager/subscribe +translation_of: Web/API/PushManager/subscribe +--- +

{{SeeCompatTable}}{{ApiRef("Push API")}}

+ +

Die Methode subscribe() des {{domxref("PushManager")}} Interfaces meldet die API an einem Push-Service an.

+ +

Sie bekommt {{jsxref("Promise")}} als Rückgabewert, welcher sich zu einem {{domxref("PushSubscription")}} Objekt auflösen lässt, und weitere Details der Push-Subscription enthält. Eine neue Push-Subscription wird erstellt falls der aktuelle Service-Worker nicht bereits eine existierende Push-Subscription enthält.

+ +

Syntax

+ +
​PushManager.subscribe(options).then(function(pushSubscription) { ... } );
+ +

Parameter

+ +
+
options {{optional_inline}}
+
Ein Objekt das optionale Konfigurationsparameter enthält. Das Objekt kann die folgenden Eigenschaften (properties) haben: +
    +
  • userVisibleOnly: Ein boolscher Wert der anzeigt, dass die zurückgegebene Push-Subscription nur für Nachrichten genutz wird, dessen Effekt den sie (die Push-Subscription) auslöst, auch nur für den Anwender sichtbar sind.
    • +
+
+
+ +

Returnwert

+ +

{{jsxref("Promise")}} welcher ein {{domxref("PushSubscription")}} Objekt auflöst.

+ +

Beispiel

+ +
this.onpush = function(event) {
+  console.log(event.data);
+  /**********************************************
+  ++ Die Überstzung des Kommentars, folgt noch ++
+  **********************************************/
+  // From here we can write the data to IndexedDB, send it to any open
+  // windows, display a notification, etc.
+}
+
+navigator.serviceWorker.register('serviceworker.js').then(
+  function(serviceWorkerRegistration) {
+    serviceWorkerRegistration.pushManager.subscribe().then(
+      function(pushSubscription) {
+        console.log(pushSubscription.endpoint);
+        /**********************************************
+        ++ Die Überstzung des Kommentars, folgt noch ++
+        **********************************************/
+        // The push subscription details needed by the application
+        // server are now available, and can be sent to it using,
+        // for example, an XMLHttpRequest.
+      }, function(error) {
+        /**********************************************
+        ++ Die Überstzung des Kommentars, folgt noch ++
+        **********************************************/
+        // During development it often helps to log errors to the
+        // console. In a production environment it might make sense to
+        // also report information about errors back to the
+        // application server.
+        console.log(error);
+      }
+    );
+  });
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Push API', '#widl-PushManager-subscribe-Promise-PushSubscription--PushSubscriptionOptions-options', 'subscribe()')}}{{Spec2('Push API')}}Initial-Definition.
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(42.0)}}{{CompatGeckoDesktop(44.0)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatChrome(42.0)}}
+
+ +

Weitere Informationen

+ + diff --git a/files/de/web/api/range/index.html b/files/de/web/api/range/index.html new file mode 100644 index 0000000000..2dd5008afc --- /dev/null +++ b/files/de/web/api/range/index.html @@ -0,0 +1,254 @@ +--- +title: Range +slug: Web/API/Range +tags: + - API + - DOM + - NeedsTranslation + - TopicStub +translation_of: Web/API/Range +--- +

{{ APIRef("DOM") }}

+ +

The Range interface represents a fragment of a document that can contain nodes and parts of text nodes.

+ +

A range can be created using the {{ domxref("Document.createRange", "createRange()") }} method of the {{ domxref("Document") }} object. Range objects can also be retrieved by using the {{ domxref("Selection/getRangeAt", "getRangeAt()") }} method of the {{ domxref("Selection") }} object or the {{domxref("Document/caretRangeFromPoint", "caretRangeAtPoint()")}} method of the {{domxref("Document")}} object.

+ +

There also is the {{domxref("Range.Range()", "Range()")}} constructor available.

+ +

Properties

+ +

There are no inherited properties.

+ +
+
{{domxref("Range.collapsed")}} {{readonlyInline}}
+
Returns a {{domxref("Boolean")}} indicating whether the range's start and end points are at the same position.
+
{{domxref("Range.commonAncestorContainer")}} {{readonlyInline}}
+
Returns the deepest {{ domxref("Node") }} that contains the startContainer and endContainer nodes.
+
{{domxref("Range.endContainer")}} {{readonlyInline}}
+
Returns the {{ domxref("Node") }} within which the Range ends.
+
{{domxref("Range.endOffset")}} {{readonlyInline}}
+
Returns a number representing where in the endContainer the Range ends.
+
{{domxref("Range.startContainer")}} {{readonlyInline}}
+
Returns the {{ domxref("Node") }} within which the Range starts.
+
{{domxref("Range.startOffset")}} {{readonlyInline}}
+
Returns a number representing where in the startContainer the Range starts.
+
+ +

Constructor

+ +
+
{{ domxref("Range.Range()", "Range()") }} {{experimental_inline}}
+
Returns a Range object with the global {{domxref("Document")}} as its start and end.
+
+ +

Methods

+ +

There are no inherited methods.

+ +
+
{{ domxref("Range.setStart()")}}
+
Sets the start position of a Range.
+
{{ domxref("Range.setEnd()")}}
+
Sets the end position of a Range.
+
{{ domxref("Range.setStartBefore()")}}
+
Sets the start position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.setStartAfter()")}}
+
Sets the start position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.setEndBefore()")}}
+
Sets the end position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.setEndAfter()")}}
+
Sets the end position of a Range relative to another {{ domxref("Node") }}.
+
{{ domxref("Range.selectNode()")}}
+
Sets the Range to contain the {{ domxref("Node") }} and its contents.
+
{{ domxref("Range.selectNodeContents()")}}
+
Sets the Range to contain the contents of a {{ domxref("Node") }}.
+
{{ domxref("Range.collapse()")}}
+
Collapses the Range to one of its boundary points.
+
{{ domxref("Range.cloneContents()")}}
+
Returns a {{ domxref("DocumentFragment") }} copying the nodes of a Range.
+
{{ domxref("Range.deleteContents()")}}
+
Removes the contents of a Range from the {{ domxref("Document") }}.
+
{{ domxref("Range.extractContents()")}}
+
Moves contents of a Range from the document tree into a {{ domxref("DocumentFragment") }}.
+
{{ domxref("Range.insertNode()")}}
+
Insert a {{ domxref("Node") }} at the start of a Range.
+
{{ domxref("Range.surroundContents()")}}
+
Moves content of a Range into a new {{ domxref("Node") }}.
+
{{ domxref("Range.compareBoundaryPoints()")}}
+
Compares the boundary points of the Range with another Range.
+
{{ domxref("Range.cloneRange()")}}
+
Returns a Range object with boundary points identical to the cloned Range.
+
{{ domxref("Range.detach()")}}
+
Releases the Range from use to improve performance.
+
{{ domxref("Range.toString()")}}
+
Returns the text of the Range.
+
{{ domxref("Range.compareNode()")}} {{ Obsolete_inline }}{{non-standard_inline}}
+
Returns a constant representing whether the {{domxref("Node")}} is before, after, inside, or surrounding the range.
+
{{ domxref("Range.comparePoint()")}} {{experimental_inline}}
+
Returns -1, 0, or 1 indicating whether the point occurs before, inside, or after the Range.
+
{{ domxref("Range.createContextualFragment()")}}{{experimental_inline}}
+
Returns a {{ domxref("DocumentFragment") }} created from a given string of code.
+
{{ domxref("Range.getBoundingClientRect()") }} {{experimental_inline}}
+
Returns a {{ domxref("DOMRect") }} object which bounds the entire contents of the Range; this would be the union of all the rectangles returned by {{ domxref("range.getClientRects()") }}.
+
{{ domxref("Range.getClientRects()") }} {{experimental_inline}}
+
Returns a list of {{ domxref("DOMRect") }} objects that aggregates the results of {{ domxref("Element.getClientRects()") }} for all the elements in the Range.
+
{{ domxref("Range.intersectsNode()")}} {{experimental_inline}}
+
Returns a boolean indicating whether the given node intersects the Range.
+
{{ domxref("Range.isPointInRange()")}} {{experimental_inline}}
+
Returns a boolean indicating whether the given point is in the Range.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#interface-range', 'Range')}}{{Spec2('DOM WHATWG')}}Do not use RangeException anymore, use DOMException instead.
+ Made the second parameter of collapse() optional.
+ Added the methods isPointInRange(), comparePoint(), and intersectsNode().
+ Added the constructor Range().
{{SpecName('DOM Parsing', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('DOM Parsing')}}Added the method createContextualFragment().
{{SpecName('CSSOM View', '#extensions-to-the-range-interface', 'Extensions to Range')}}{{Spec2('CSSOM View')}}Added the methods getClientRects() and getBoundingClientRect().
{{SpecName('DOM2 Traversal_Range', 'ranges.html#Level-2-Range-Interface', 'Range')}}{{Spec2('DOM2 Traversal_Range')}}Initial specification.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
Range() constructor {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
compareNode() {{obsolete_inline}}{{non-standard_inline()}}{{CompatNo}}{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}}
+ Removed in {{CompatGeckoDesktop("1.9")}}		{{CompatNo}}{{CompatNo}}{{CompatNo}}
isPointInRange(), and comparePoint(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatNo}}15.0{{CompatUnknown}}
intersectsNode() {{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop("17.0")}} [2]{{CompatNo}}15.0{{CompatUnknown}}
getClientRects() and getBoundingClientRect(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}915.05
createContextualFragment(){{experimental_inline}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}1115.0{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}} [1]9.09.0{{CompatVersionUnknown}}
+
+ +

[1] Starting with Gecko 13.0 {{ geckoRelease("13.0") }} the Range object throws a {{ domxref("DOMException") }} as defined in DOM 4, instead of a RangeException defined in prior specifications.

+ +

[2] Gecko supported it up to Gecko 1.9, then removed it until Gecko 17 where it was reimplemented, matching the spec.

+ +

See also

+ + diff --git a/files/de/web/api/range/range/index.html b/files/de/web/api/range/range/index.html new file mode 100644 index 0000000000..f4dddfe830 --- /dev/null +++ b/files/de/web/api/range/range/index.html @@ -0,0 +1,95 @@ +--- +title: Range() +slug: Web/API/Range/Range +translation_of: Web/API/Range/Range +--- +

{{ APIRef("DOM") }}{{seeCompatTable}}

+ +

Der Range() Konstrukteur gibt ein neu generiertes Objekt wieder, wessen Start und Ende das globale {{domxref("Document")}} Objekt ist.

+ +

Syntax

+ +
range = new Range()
+ +

Beispiele

+ +
range = new Range();
+endNode = document.getElementsByTagName("p").item(3);
+endOffset = document.getElementsByTagName("p").item(3).childNodes.length;
+range.setEnd(endNode,endOffset);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('DOM WHATWG', '#dom-range', 'Range.Range()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis Unterstützung{{CompatVersionUnknown}}{{CompatGeckoDesktop("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basis Unterstützung{{CompatVersionUnknown}}{{CompatGeckoMobile("24.0")}}{{CompatNo}}15.0{{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + + +

 

diff --git a/files/de/web/api/readablestream/index.html b/files/de/web/api/readablestream/index.html new file mode 100644 index 0000000000..43873c162b --- /dev/null +++ b/files/de/web/api/readablestream/index.html @@ -0,0 +1,101 @@ +--- +title: ReadableStream +slug: Web/API/ReadableStream +tags: + - API + - Fetch + - Interface + - Reference + - Streams +translation_of: Web/API/ReadableStream +--- +

{{APIRef("Streams")}}{{SeeCompatTable}}

+ +

Das ReadableStream Interface der Streams API repräsentiert einen lesbaren Datenstrom von Bytes.

+ +

Konstruktor

+ +
+
{{domxref("ReadableStream.ReadableStream", "ReadableStream()")}}
+
Erstellt eine Instanz des ReadableStream Interfaces.
+
+ +

Eigenschaften

+ +
+
{{domxref("ReadableStream.locked")}} {{readonlyInline}}
+
Gibt zurück, ob der Stream bereits für einen Reader gesperrt ist.
+
+ +

Methoden

+ +
+
{{domxref("ReadableStream.cancel()")}}
+
Bricht den Stream ab und signalisiert dadurch, dass der Konsument sein Interesse am Stream verloren hat. Das angegebene reason Argument wird an die darunterliegende Quelle weitergegeben, welche dieses benutzen kann. 
+
{{domxref("ReadableStream.getReader()")}}
+
Erstellt einen Reader, dessen Typ durch die mode Option angegeben wird, und sperrt den Stream für den neuen Reader. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.
+
{{domxref("ReadableStream.getIterator()")}}
+
Erstellt einen asyncronen ReadableStream-Iterator und sperrt den Stream für ihn, sodass der Iterator der einzige Leser ist. Während der Stream gesperrt ist kann kein anderer Reader angelegt werden bis dieser freigegeben wurde.
+
{{domxref("ReadableStream.pipeThrough()")}}
+
Bietet die Möglichkeit den Stream mit transformierenden Streams zu verketten.
+
{{domxref("ReadableStream.pipeTo()")}}
+
Pipet den aktuellen ReadableStream zu einem gegebenen {{domxref("WritableStream")}} und gibt ein {{domxref("Promise")}} zurück welches erfüllt ist, wenn der Piping-Prozess erfolgreich beendet wurde oder verwirft es, wenn irgendein anderer Fehler auftritt.
+
{{domxref("ReadableStream.tee()")}}
+
Verzweigt den ReadableStream in zwei neue Stream-Instanzen, auf denen parallel gelesen werden kann.
+
{{domxref("ReadableStream[@@asyncIterator]()")}}
+
Alias der getIterator-Methode.
+
+ +

Benutzung

+ +

Im folgenden Beispiel wird eine {{domxref("Response")}} erzeugt, die HTML-Fragmente einer anderen Ressource fetched und an den Browser streamt.

+ +

Dadurch wird die Benutzung von {{domxref("ReadableStream")}} in Kombination mit {{domxref("Uint8Array")}} gezeigt.

+ +
fetch("https://www.example.org/").then((response) => {
+  const reader = response.body.getReader();
+  const stream = new ReadableStream({
+    start(controller) {
+      // Die folgende Funktion behandelt jeden Daten-Chunk
+      function push() {
+        // "done" ist ein Boolean und "value" ein "Uint8Array"
+        return reader.read().then(({ done, value }) => {
+          // Gibt es weitere Daten zu laden?
+          if (done) {
+            // Teile dem Browser mit, dass wir fertig mit dem Senden von Daten sind
+            controller.close();
+            return;
+          }
+
+          // Bekomme die Daten und sende diese an den Browser durch den Controller weiter
+          controller.enqueue(value);
+        }).then(push);
+      };
+
+      push();
+    }
+  });
+
+  return new Response(stream, { headers: { "Content-Type": "text/html" } });
+});
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Streams','#rs-class','ReadableStream')}}{{Spec2('Streams')}}Initial definition
+ +

Browserkompatibilität

+ +
{{Compat("api.ReadableStream")}}
diff --git a/files/de/web/api/renderingcontext/index.html b/files/de/web/api/renderingcontext/index.html new file mode 100644 index 0000000000..d290eb830d --- /dev/null +++ b/files/de/web/api/renderingcontext/index.html @@ -0,0 +1,41 @@ +--- +title: RenderingContext +slug: Web/API/RenderingContext +translation_of: Web/API/RenderingContext +--- +

{{APIRef("Canvas API")}}

+ +

RenderingContext ist eine WebIDL-typedef, die auf eine beliebige der Schnittstellen verweisen kann, die einen Grafik-Rendering-Kontext innerhalb eines {{HTMLElement("canvas")}} Elements darstellen: {{domxref("CanvasRenderingContext2D")}}, {{domxref("WebGLRenderingContext")}} oder {{domxref("WebGL2RenderingContext")}}.

+ +

Durch die Verwendung der Kurzform RenderingContext können Methoden und Eigenschaften, die eine beliebige dieser Schnittstellen verwenden können, einfacher spezifiziert und geschrieben werden; da <canvas> mehrere Rendering-Systeme unterstützt, ist es aus Sicht der Spezifikation und der Browser-Implementierung hilfreich, eine Kurzform zu verwenden, die "eine dieser Schnittstellen" bedeutet.

+ +

Als solches ist RenderingContext ein Implementierungsdetail und nicht etwas, das Webentwickler direkt verwenden. Es gibt keine RenderingContext-Schnittstelle, und es gibt keine Objekte, die den Typ RenderingContext implementieren.

+ +

Die primäre Verwendung dieses Typs ist die Definition der {{domxref("HTMLCanvasElement.getContext()")}} Methode des <canvas>-Elements, die einen RenderingContext (d.h. einen beliebigen der Rendering-Kontext Typen) zurückgibt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('HTML WHATWG', "scripting.html#renderingcontext", "RenderingContext")}}{{Spec2('HTML WHATWG')}}Erstdefinition.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/response/index.html b/files/de/web/api/response/index.html new file mode 100644 index 0000000000..ee370f462e --- /dev/null +++ b/files/de/web/api/response/index.html @@ -0,0 +1,120 @@ +--- +title: Response +slug: Web/API/Response +translation_of: Web/API/Response +--- +
{{APIRef("Fetch API")}}
+ +

Die Response Schnittstelle der Fetch API stellt die Antwort auf eine Anfrage dar.

+ +

Sie können ein neues Response-Objekt mithilfe des Konstruktors {{domxref("Response.Response()")}} erstellen. Es ist jedoch wahrscheinlicher, dass Sie ein Response-Objekt als Rückgabewert einer API Operation erhalten, z. B. durch einen Service Worker {{domxref("Fetchevent.respondWith")}} oder ein simples {{domxref("GlobalFetch.fetch()")}}.

+ +

Konstruktor

+ +
+
{{domxref("Response.Response","Response()")}}
+
Erstell ein neues Response Objekt.
+
+ +

Eigenschaften

+ +
+
{{domxref("Response.headers")}} {{readonlyinline}}
+
Enthält das {{domxref("Headers")}} Objekt der Antwort.
+
{{domxref("Response.ok")}} {{readonlyinline}}
+
Enthält einen boolschen Wert, ob die anfrage Erfolgreich war (Status im Bereich von 200-299) oder nicht.
+
{{domxref("Response.redirected")}} {{ReadOnlyInline}}
+
Gibt an, ob die Antwort das Ergebnis einer Weiterleitung ist, d. h. die URL-Liste enthält mehrere Einträge.
+
{{domxref("Response.status")}} {{readonlyinline}}
+
Enthält den Status-Code der Antwort (z. B. 200 bei Erfolg).
+
{{domxref("Response.statusText")}} {{readonlyinline}}
+
Enthält die Statusmeldung, die dem Statuscode entspricht (z. B. OK für 200).
+
{{domxref("Response.type")}} {{readonlyinline}}
+
Enthält den Typ der Antwort (z. B. basic, cors).
+
{{domxref("Response.url")}} {{readonlyinline}}
+
Enthält die URL der Antwort.
+
{{domxref("Response.useFinalURL")}}
+
Enthält einen booleschen Wert, der angibt, ob dies die endgültige URL der Antwort ist.
+
+ +

Response implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Eigenschaften zur Verfügung:

+ +
+
{{domxref("Body.body")}} {{readonlyInline}}
+
Ein einfacher Getter, der verwendet wird, um einen {{domxref("ReadableStream")}} des Body-Inhalts verfügbar zu machen.
+
{{domxref("Body.bodyUsed")}} {{readonlyInline}}
+
Speichert einen {{domxref("Boolean")}}, der angibt, ob der Body bereits in einer Antwort verwendet wurde.
+
+ +

Methoden

+ +
+
{{domxref("Response.clone()")}}
+
Klont Response Objekt.
+
{{domxref("Response.error()")}}
+
Gibt ein neues Response Objekt zurück, das einem Netzwerkfehler zugeordnet ist.
+
{{domxref("Response.redirect()")}}
+
Erstellt eine neue Antwort mit einer anderen URL.
+
+ +

Response implementiert {{domxref("Body")}}, daher stehen darüber hinaus auch folgende Methoden zur Verfügung:

+ +
+
{{domxref("Body.arrayBuffer()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("ArrayBuffer")}} aufgelöst wird.
+
{{domxref("Body.blob()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("Blob")}} aufgelöst wird.
+
{{domxref("Body.formData()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("FormData")}} Objekt aufgelöst wird.
+
{{domxref("Body.json()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches den Inhalt des Body als {{jsxref("JSON")}} einliest.
+
{{domxref("Body.text()")}}
+
Nimmt einen {{domxref("Response")}} Stream und liest ihn bis zum Ende. Gibt ein Promise zurück, welches in einen {{domxref("USVString")}} (Text) aufgelöst wird.
+
+ +

Beispiele

+ +

In unserem grundlegenden Beispiel zu Fetch (Beispiel live ausführen) verwenden wir einen einfachen Aufruf von fetch(), um ein Bild abzurufen und es in einem {{htmlelement("img")}} Tag anzuzeigen. Der Aufruf von fetch() gibt ein Promise zurück, das zu einem Response Objekt aufgelöst wird, welches mit der Anforderung der Ressource verknüpft ist. Da wir ein Bild anfordern, werden Sie feststellen, dass wir {{domxref("Body.blob")}} ausführen müssen ({{domxref("Response")}} implementiert Body), um der Antwort den richtigen MIME-Type zuzuordnen.

+ +
const image = document.querySelector('.my-image');
+fetch('flowers.jpg').then(function(response) {
+  return response.blob();
+}).then(function(blob) {
+  const objectURL = URL.createObjectURL(blob);
+  image.src = objectURL;
+});
+ +

Sie können auch den {{domxref("Response.Response()")}} Konstruktor verwenden, um Ihr eigenes benutzerdefiniertes Response Objekt zu erstellen:

+ +
const response = new Response();
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#response-class','Response')}}{{Spec2('Fetch')}}Initial definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Response")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/response/response/index.html b/files/de/web/api/response/response/index.html new file mode 100644 index 0000000000..53f3eff566 --- /dev/null +++ b/files/de/web/api/response/response/index.html @@ -0,0 +1,75 @@ +--- +title: Response() +slug: Web/API/Response/Response +translation_of: Web/API/Response/Response +--- +
{{APIRef("Fetch")}}
+ +

Der Response() Konstruktor erstellt ein neues {{domxref("Response")}} Objekt.

+ +

Syntax

+ +
var myResponse = new Response(body, init);
+ +

Parameter

+ +
+
body {{optional_inline}}
+
Ein Objekt, welches den Body für eine Antwort definiert. Das kann entweder null oder eins der folgenden sein: +
    +
  • {{domxref("Blob")}}
    • +
  • {{domxref("BufferSource")}}
    • +
  • {{domxref("FormData")}}
    • +
  • {{domxref("ReadableStream")}}
    • +
  • {{domxref("URLSearchParams")}}
    • +
  • {{domxref("USVString")}}
    • +
+
+
init {{optional_inline}}
+
Ein Objekt mit Optionen, welches benutzerdefinierte Einstellungen enthält, die auf die Antwort angewendet werden sollen. Mögliche Optionen sind: +
    +
  • status: Der Statuscode der Antwort, z. B. 200.
    • +
  • statusText: Die Statusnachricht die dem Statuscode zugeordnet ist, z. B. OK.
    • +
  • headers: Etwaige Header die Sie Ihrer Antwort hinzufügen wollen, die einem {{domxref("Headers")}} Objekt or einem Objekt-Literal von {{domxref("ByteString")}} Schlüsselwertpaaren enthalten sind (siehe HTTP Header für Referenzen).
    • +
+
+
+ +

Beispiel

+ +

In unserem Beispiel für eine Fetch Antwort (live ausführen) erstellen wir ein neues Response Objekt mit dem Konstruktor, dem wir einen neuen {{domxref("Blob")}} als Body und ein init Objekt übergeben, welches einen benutzerdefinierten status und statusText enthält:

+ +
var myBlob = new Blob();
+var init = { "status" : 200 , "statusText" : "SuperSmashingGreat!" };
+var myResponse = new Response(myBlob,init);
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Fetch','#dom-response','Response()')}}{{Spec2('Fetch')}}Initiale Definition
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Response.Response")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/rtcicecandidate/index.html b/files/de/web/api/rtcicecandidate/index.html new file mode 100644 index 0000000000..4479c64bb6 --- /dev/null +++ b/files/de/web/api/rtcicecandidate/index.html @@ -0,0 +1,121 @@ +--- +title: RTCIceCandidate +slug: Web/API/RTCIceCandidate +translation_of: Web/API/RTCIceCandidate +--- +

{{APIRef("WebRTC")}}{{SeeCompatTable}}{{draft}}

+ +

Das RTCIceCandidate Interface der WebRTC API repräsentiert einen Kandidaten für einen Internet Connectivity Establishment (ICE) Server, welcher eine {{domxref("RTCPeerConnection")}} herstellt.

+ +

Konstruktoren

+ +
+
{{domxref("RTCIceCandidate.RTCIceCandidate()","RTCIceCandidate()")}}
+
Erstellt ein RTCIceCandidate Objekt.
+
+ +

Properties

+ +
+
{{domxref("RTCIceCandidate.candidate")}} {{readonlyInline}}
+
Ein {{domxref("DOMString")}}, der die Transportadresse für den Kadidaten repräsentiert, welche zur Konnektivitätsprüfung verwendet werden kann. Das Format der Adresse ist ein candidate-attribute, wie in {{RFC(5245)}} definiert. Dieser String ist leer (""), wenn der RTCIceCandidate einen "end of candidates" Indikator repräsentiert.
+
{{domxref("RTCIceCandidate.foundation")}} {{readonlyInline}}
+
Gibt einen eindeutigen Identifikator zurück, der es dem ICE erlaubt, Kandidaten, die in mehreren {{domxref("RTCIceTransport")}} Objekten vorhanden sind, in Beziehung zu setzen.
+
{{domxref("RTCIceCandidate.ip")}} {{readonlyInline}}
+
Gibt die IP-Adresse des Kandidaten zurück.
+
{{domxref("RTCIceCandidate.port")}} {{readonlyInline}}
+
Gibt den Port des Kandidaten zurück.
+
{{domxref("RTCIceCandidate.priority")}} {{readonlyInline}}
+
Gibt die zugewiesene Priorität des Kandidaten zurück.
+
{{domxref("RTCIceCandidate.protocol")}} {{readonlyInline}}
+
Gibt das vom Kandidaten verwendete Protokoll zurück, entweder TCP oder UDP.
+
{{domxref("RTCIceCandidate.relatedAddress")}} {{readonlyInline}}
+
Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist relatedAddress die IP-Adresse des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist sie null.
+
{{domxref("RTCIceCandidate.relatedPort")}} {{readonlyInline}}
+
Für einen Kandidaten, welcher von einem anderen abgeleitet ist, wie etwa ein Relay- oder Reflexivkandidat, ist relatedPort der Port des Kandidaten, von dem er abgeleitet ist. Für Hostkandidaten ist er null.
+
{{domxref("RTCIceCandidate.sdpMid")}} {{readonlyInline}}
+
Enthält, wenn nicht null, den Identifikator der "media stream identification" (wei definiert in RFC 5888) für die Medienkomponente, zu der dieser Kandidat zugeordnet ist.
+
{{domxref("RTCIceCandidate.sdpMLineIndex")}} {{readonlyInline}}
+
Enthält, wenn nicht null, den Index (beginnend bei 0) der Medienbeschreibung (wie definiert in RFC 4566) im SDP, dem dieser Kandidat zugeordnet ist.
+
{{domxref("RTCIceCandidate.tcpType")}} {{readonlyInline}}
+
Wenn protocol den Wert tcp enthält, dann repräsentiert tcpType den Typ des TCP Kandidats. Ansonsten enthält tcpType den Wert null.
+
{{domxref("RTCIceCandidate.type")}} {{readonlyInline}}
+
Einer aus host, srflx, prflx, oder relay.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0', '#rtcicecandidate-interface', 'RTCIceCandidate')}}{{Spec2('WebRTC 1.0')}}Initiale definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(22)}}   
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
+
diff --git a/files/de/web/api/rtcpeerconnection/index.html b/files/de/web/api/rtcpeerconnection/index.html new file mode 100644 index 0000000000..df67ef624c --- /dev/null +++ b/files/de/web/api/rtcpeerconnection/index.html @@ -0,0 +1,379 @@ +--- +title: RTCPeerConnection +slug: Web/API/RTCPeerConnection +translation_of: Web/API/RTCPeerConnection +--- +

{{APIRef}}{{SeeCompatTable}}

+ +

The RTCPeerConnection interface represents a WebRTC connection between the local computer and a remote peer. It is used to handle efficient streaming of data between the two peers.

+ +
+

Note: RTCPeerConnection and {{domxref("RTCSessionDescription")}} are currently prefixed in most browsers, and the {{domxref("navigator.getUserMedia()")}} method is prefixed in many versions of some browsers; you should use code like the following to access these:

+ +
var peerConnection = window.RTCPeerConnection || window.mozRTCPeerConnection ||
+                       window.webkitRTCPeerConnection || window.msRTCPeerConnection;
+var sessionDescription = window.RTCSessionDescription || window.mozRTCSessionDescription ||
+                       window.webkitRTCSessionDescription || window.msRTCSessionDescription;
+
+navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia ||
+                       navigator.webkitGetUserMedia || navigator.msGetUserMedia;
+
+ +

Simple code such as this is all it takes to ensure that your project will work on as many versions of as many browsers as possible.

+
+ +

Basic usage

+ +

Basic RTCPeerConnection usage involves negotiating a connection between your local machine and a remote one by generating Session Description Protocol to exchange between the two. The caller starts the process by sending an offer to the remote machine, which responds by either accepting or rejecting the call.

+ +

Both parties (the caller and the called party) need to set up their own RTCPeerConnection instances to represent their end of the peer-to-peer connection:

+ +
var pc = new RTCPeerConnection();
+pc.onaddstream = function(obj) {
+  var vid = document.createElement("video");
+  document.appendChild(vid);
+  vid.srcObject = obj.stream;
+}
+
+// Helper functions
+function endCall() {
+  var videos = document.getElementsByTagName("video");
+  for (var i = 0; i < videos.length; i++) {
+    videos[i].pause();
+  }
+
+  pc.close();
+}
+
+function error(err) {
+  endCall();
+}
+
+ +

Initializing the call

+ +

If you are the one initiating the call, you would use {{domxref("navigator.getUserMedia()")}} to get a video stream, then add the stream to the RTCPeerConnection. Once that's been done, call {{domxref("RTCPeerConnection.createOffer()")}} to create an offer, configure the offer, then send it to the server through which the connection is being mediated.

+ +
// Get a list of friends from a server
+// User selects a friend to start a peer connection with
+navigator.getUserMedia({video: true}, function(stream) {
+  // Adding a local stream won't trigger the onaddstream callback,
+  // so call it manually.
+  pc.onaddstream({stream: stream});
+  pc.addStream(stream);
+
+  pc.createOffer(function(offer) {
+    pc.setLocalDescription(new RTCSessionDescription(offer), function() {
+      // send the offer to a server to be forwarded to the friend you're calling.
+    }, error);
+  }, error);
+});
+
+ +

Answering a call

+ +

On the opposite end, the friend will receive the offer from the server using whatever protocol is being used to do so. Once the offer arrives, {{domxref("navigator.getUserMedia()")}} is once again used to create the stream, which is added to the RTCPeerConnection. An {{domxref("RTCSessionDescription")}} object is created and set up as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.

+ +

Then an answer is created using {{domxref("RTCPeerConnection.createAnswer()")}} and sent back to the server, which forwards it to the caller.

+ +
var offer = getOfferFromFriend();
+navigator.getUserMedia({video: true}, function(stream) {
+  pc.onaddstream({stream: stream});
+  pc.addStream(stream);
+
+  pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+    pc.createAnswer(function(answer) {
+      pc.setLocalDescription(new RTCSessionDescription(answer), function() {
+        // send the answer to a server to be forwarded back to the caller (you)
+      }, error);
+    }, error);
+  }, error);
+});
+
+ +

Handling the answer

+ +

Back on the original machine, the response is received. Once that happens, call {{domxref("RTCPeerConnection.setRemoteDescription()")}} to set the response as the remote end of the connection.

+ +
// pc was set up earlier when we made the original offer
+var offer = getResponseFromFriend();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() { }, error);
+
+ +

Constructor

+ +
+
{{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}}
+
Constructor; returns a new RTCPeerConnection object.
+
+ +

Properties

+ +

This interface inherits properties from its parent interface, {{domxref("EventTarget")}}.

+ +
+
{{domxref("RTCPeerConnection.iceConnectionState")}} {{ReadOnlyInline}}
+
Returns an enum of type RTCIceConnectionState that describes the ICE connection state for the connection. When this value changes, a {{event("iceconnectionstatechange")}} event is fired on the object.
+
{{domxref("RTCPeerConnection.iceGatheringState")}} {{ReadOnlyInline}}
+
Returns an enum of type RTCIceGatheringState that describes the ICE gathering state for the connection.
+
{{domxref("RTCPeerConnection.localDescription")}} {{ReadOnlyInline}}
+
Returns a {{domxref("RTCSessionDescription")}} describing the session for the local end of the connection. If it has not yet been set, it can be null.
+
{{domxref("RTCPeerConnection.peerIdentity")}} {{ReadOnlyInline}}
+
Returns a RTCIdentityAssertion, that is a couple of a domain name (idp) and a name (name) representing the identity of the remote peer of this connection, once set and verified. If no peer has yet been set and verified, this property will return null. Once set, via the appropriate method, it can't be changed.
+
{{domxref("RTCPeerConnection.remoteDescription")}} {{ReadOnlyInline}}
+
Returns a {{domxref("RTCSessionDescription")}} describing the session for the remote end of the connection. If it has not yet been set, it can be null.
+
{{domxref("RTCPeerConnection.signalingState")}} {{ReadOnlyInline}}
+
Returns an enum of type RTCSignalingState that describes the signaling state of the local connection. This state describes the SDP offer, that defines the configuration of the connections like the description of the locally associated objects of type {{domxref("MediaStream")}}, the codec/RTP/RTCP options, the candidates gathered by the ICE Agent. When this value changes, a {{event("signalingstatechange")}} event is fired on the object.
+
+ +

Event handlers

+ +
+
{{domxref("RTCPeerConnection.onaddstream")}}
+
Is the event handler called when the {{event("addstream")}} event is received. Such an event is sent when a {{domxref("MediaStream")}} is added to this connection by the remote peer. The event is sent immediately after the call {{domxref("RTCPeerConnection.setRemoteDescription()")}} and doesn't wait for the result of the SDP negotiation.
+
{{domxref("RTCPeerConnection.ondatachannel")}}
+
Is the event handler called when the {{event("datachannel")}} event is received. Such an event is sent when a {{domxref("RTCDataChannel")}} is added to this connection.
+
{{domxref("RTCPeerConnection.onicecandidate")}}
+
Is the event handler called when the {{event("icecandidate")}} event is received. Such an event is sent when a {{domxref("RTCICECandidate")}} object is added to the script.
+
{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
+
Is the event handler called when the {{event("iceconnectionstatechange")}} event is received. Such an event is sent when the value of {{domxref("RTCPeerConnection.iceConnectionState", "iceConnectionState")}} changes.
+
{{domxref("RTCPeerConnection.onidentityresult")}}
+
Is the event handler called when the {{event("identityresult")}} event is received. Such an event is sent when an identity assertion is generated, via {{domxref("RTCPeerConnection.getIdentityAssertion()", "getIdentityAssertion()")}}, or during the creation of an offer or an answer.
+
{{domxref("RTCPeerConnection.onidpassertionerror")}}
+
Is the event handler called when the {{event("idpassertionerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while generating an identity assertion.
+
{{domxref("RTCPeerConnection.onidpvalidationerror")}}
+
Is the event handler alled when the {{event("idpvalidationerror")}} event is received. Such an event is sent when the associated identity provider (IdP) encounters an error while validating an identity assertion.
+
{{domxref("RTCPeerConnection.onnegotiationneeded")}}
+
Is the event handler called when the {{event("negotiationneeded")}} event, sent by the browser to inform that negotiation will be required at some point in the future, is received.
+
{{domxref("RTCPeerConnection.onpeeridentity")}}
+
Is the event handler called when the {{event("peeridentity")}} event, sent when a peer identity has been set and verified on this connection, is received.
+
{{domxref("RTCPeerConnection.onremovestream")}}
+
Is the event handler called when the {{event("removestream")}} event, sent when a {{domxref("MediaStream")}} is removed from this connection, is received.
+
{{domxref("RTCPeerConnection.onsignalingstatechange")}}
+
Is the event handler called when the {{event("signalingstatechange")}} event, sent when the value of {{domxref("RTCPeerConnection.signalingState", "signalingState")}} changes, is received.
+
+ +

Methods

+ +
+
{{domxref("RTCPeerConnection.addIceCandidate()")}}
+
 
+
{{domxref("RTCPeerConnection.addStream()")}}
+
Adds a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to be able to use it.
+
{{domxref("RTCPeerConnection.close()")}}
+
Abruptly closes a connection.
+
{{domxref("RTCPeerConnection.createAnswer()")}}
+
Creates an answer to the offer received by the remote peer, in a two-part offer/answer negotiation of a connection. The two first parameters are respectively success and error callbacks, the optional third one represent options for the answer to be created.
+
{{domxref("RTCPeerConnection.createDataChannel()")}}
+
Creates a new {{domxref("RTCDataChannel")}} associated with this connection. The method takes a dictionary as parameter, with the configuration required for the underlying data channel, like its reliability.
+
{{domxref("RTCPeerConnection.createDTMFSender()")}}
+
Creates a new {{domxref("RTCDTMFSender")}}, associated to a specific {{domxref("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.
+
{{domxref("RTCPeerConnection.createOffer()")}}
+
Creates a request to find a remote peer with a specific configuration. 
+
{{domxref("RTCPeerConnection.generateCertificate()")}}
+
Creates and stores an X.509 certificate and corresponding private key then returns an {{domxref("RTCCertificate")}}, providing access to it.
+
{{domxref("RTCPeerConnection.getConfiguration()")}}
+
 
+
{{domxref("RTCPeerConnection.getIdentityAssertion()")}}
+
Initiates the gathering of an identity assertion. This has an effect only if the {{domxref("RTCPeerConnection.signalingState", "signalingState")}} is not "closed". It is not expected for the application dealing with the RTCPeerConnection: this is automatically done; an explicit call only allows to anticipate the need.
+
{{domxref("RTCPeerConnection.getLocalStreams()")}}
+
Returns an array of {{domxref("MediaStream")}} associated with the local end of the connection. The array may be empty.
+
{{domxref("RTCPeerConnection.getRemoteStreams()")}}
+
Returns an array of {{domxref("MediaStream")}} associated with the remote end of the connection. The array may be empty.
+
{{domxref("RTCPeerConnection.getStats()")}}
+
Creates a new {{domxref("RTCStatsReport")}} that contains and allows access to statistics regarding the connection.
+
{{domxref("RTCPeerConnection.getStreamById()")}}
+
Returns the {{domxref("MediaStream")}} with the given id that is associated with local or remote end of the connection. If no stream matches, it returns null.
+
{{domxref("RTCPeerConnection.removeStream()")}}
+
Removes a {{domxref("MediaStream")}} as a local source of audio or video. If the negotiation already happened, a new one will be needed for the remote peer to stop using it.
+
{{domxref("RTCPeerConnection.setIdentityProvider()")}}
+
Sets the Identity Provider (IdP) to the triplet given in parameter: its name, the protocol used to communicate with it (optional) and an optional username. The IdP will be used only when an assertion will be needed.
+
{{domxref("RTCPeerConnection.setLocalDescription()")}}
+
Changes the local description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.
+
{{domxref("RTCPeerConnection.setRemoteDescription()")}}
+
Changes the remote description associated with the connection. The description defines the properties of the connection like its codec. The connection is affected by this change and must be able to support both old and new descriptions. The method takes three parameters, a {{domxref("RTCSessionDescription")}} object to set, and two callbacks, one called if the change of description succeeds, another called if it failed.
+
{{domxref("RTCPeerConnection.updateIce()")}}
+
 
+
+ +

Constructor

+ +
new RTCPeerConnection({{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints);
+ +
+

Note: While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.

+
+ +

Methods

+ +

createOffer

+ +

void createOffer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints);

+ +

Create offer generates a blob of description data to facilitate a PeerConnection to the local machine. Use this when you've got a remote Peer connection and you want to set up the local one.

+ +

Example

+ +
var pc = new PeerConnection();
+pc.addStream(video);
+pc.createOffer(function(desc){
+  pc.setLocalDescription(desc, function() {
+    // send the offer to a server that can negotiate with a remote client
+  });
+}
+ +

Arguments

+ +
+
successCallback
+
An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object
+
errorCallback
+
An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object
+
[optional] constraints
+
An optional {{domxref("MediaConstraints")}} object.
+
+ +

createAnswer

+ +

void createAnswer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints)")

+ +

Respond to an offer sent from a remote connection.

+ +

Example

+ +
var pc = new PeerConnection();
+pc.setRemoteDescription(new RTCSessionDescription(offer), function() {
+  pc.createAnswer(function(answer) {
+    pc.setLocalDescription(answer, function() {
+      // send the answer to the remote connection
+    })
+  })
+});
+ +

Arguments

+ +
+
successCallback
+
An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object
+
errorCallback
+
An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object
+
[optional] constraints
+
An optional {{domxref("MediaConstraints")}} object.
+
+ +

updateIce()

+ +

updateIce(optional {{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints)

+ +

The updateIce method updates the ICE Agent process of gathering local candidates and pinging remote candidates. If there is a mandatory constraint called "IceTransports" it will control how the ICE engine can act. This can be used to limit the use to TURN candidates by a callee to avoid leaking location information prior to the call being accepted. This call may result in a change to the state of the ICE Agent, and may result in a change to media state if it results in connectivity being established.

+ +

Example

+ +
 
+ +

addIceCandidate()

+ +

addIceCandidate ({{domxref("RTCIceCandidate")}} candidate, {{domxref("Function")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback);

+ +

The addIceCandidate() method provides a remote candidate to the ICE Agent. In addition to being added to the remote description, connectivity checks will be sent to the new candidates as long as the "IceTransports" constraint is not set to "none". This call will result in a change to the connection state of the ICE Agent, and may result in a change to media state if it results in different connectivity being established.

+ +

Example

+ +
  pc.addIceCandidate(new RTCIceCandidate(candidate));
+
+ +

createDataChannel

+ +

{{domxref("RTCDataChannel")}} createDataChannel ({{domxref("DOMString")}} label, optional {{domxref("RTCDataChannelInit")}} dataChannelDict);

+ +

Creates a data channel for sending non video or audio data across the peer connection

+ +

Example

+ +
var pc = new PeerConnection();
+var channel = pc.createDataChannel("Mydata");
+channel.onopen = function(event) {
+  channel.send('sending a message');
+}
+channel.onmessage = function(event) { console.log(event.data); }
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebRTC 1.0')}}{{Spec2('WebRTC 1.0')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}    
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatVersionUnknown}}     {{CompatVersionUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/rtcrtptransceiver/direction/index.html b/files/de/web/api/rtcrtptransceiver/direction/index.html new file mode 100644 index 0000000000..644e007d52 --- /dev/null +++ b/files/de/web/api/rtcrtptransceiver/direction/index.html @@ -0,0 +1,82 @@ +--- +title: RTCRtpTransceiver.direction +slug: Web/API/RTCRtpTransceiver/direction +tags: + - API + - Attribut + - RTCRtpTransceiver + - RTP + - Richtung + - Transceiver + - Transceiver Richtung + - WebRTC + - direction +translation_of: Web/API/RTCRtpTransceiver/direction +--- +
{{APIRef("WebRTC")}}
+ +

Das {{domxref("RTCRtpTransceiver")}} direction Attribut gibt als String die bevorzugte Transceiver-Richtung an. Es muss sich hierbei um einen Wert des {{domxref("RTCRtpTransceiverDirection")}} Enum handeln.

+ +

Die tatsächliche, aktuelle Richtung des Transceivers kann über das {{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} Attribut abgelesen werden.

+ +

Syntax

+ +
var direction = RTCRtpTransceiver.direction
+ +

Value

+ +

Ein {{domxref("DOMString")}}, dessen Wert einem Wert des RTCRtpTransceiverDirection Enum / Aufzählungstypen entspricht und die bevorzugte Transceiver-Richtung angibt. {{page("/en-US/docs/Web/API/RTCRtpTransceiverDirection", "Values")}}

+ +

Exceptions

+ +

Wird der direction Wert eines Transceivers gesetzt, können folgende Fehler auftreten:

+ +
+
InvalidStateError
+
Der Receiver des Transceivers {{domxref("RTCPeerConnection")}} wurde bereits geschlossen und befindet sich nun im closed Zustand oder der {{domxref("RTCRtpReceiver")}} wurde gestoppt und befinet sich im stopped Zustand.
+
+ +

Hinweise zur Nutzung

+ +

Ändern der Übertragungsrichtung

+ +

Wird der Wert des direction Attributes geändert, wird eine InvalidStateError Ausnahme geworfen, insofern die RTCPeerConnection bereits geschlossen wurde oder aber der jeweils betroffene Receiver oder Sender bereits gestoppt wurde.

+ +

Wenn der neu gesetzte Wert für direction sich vom aktuellen Wert unterscheidet, muss die Übertragung mit dem Peer neu verhandelt werden, es wird also ein {{event("negotiationneeded")}} Event auf der {{domxref("RTCPeerConnection")}} ausgelöst.

+ +

Transceiver-Richtung in SDP

+ +

Der direction Wert wird von {{domxref("RTCPeerConnection.createOffer()")}} bzw. {{domxref("RTCPeerConnection.createAnswer()")}} genutzt, um die entsprechenden SDP-Nachrichten zu generieren. SDP stellt die Richtung über eine Attribut-Zeile (a-line) dar. Wenn die Richtung des Transceivers als "sendrecv" definiert wurde, so enthält die hierzu erzeugte SDP-Nachricht folgende Attribut-Zeile:

+ +
a=sendrecv
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebRTC 1.0", "#dom-rtcrtptransceiver-direction", "RTCRtpTransceiver.direction")}}{{Spec2("WebRTC 1.0")}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.RTCRtpTransceiver.direction")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/rtcrtptransceiver/index.html b/files/de/web/api/rtcrtptransceiver/index.html new file mode 100644 index 0000000000..0bf844cf0f --- /dev/null +++ b/files/de/web/api/rtcrtptransceiver/index.html @@ -0,0 +1,85 @@ +--- +title: RTCRtpTransceiver +slug: Web/API/RTCRtpTransceiver +tags: + - API + - Interface + - Media + - MediaStreamTrack + - NeedsTranslation + - RTCRtpTransceiver + - RTP + - Reference + - SDP + - TopicStub + - Transceiver + - WebRTC +translation_of: Web/API/RTCRtpTransceiver +--- +
{{APIRef("WebRTC")}}
+ +

The WebRTC interface RTCRtpTransceiver describes a permanent pairing of an {{domxref("RTCRtpSender")}} and an {{domxref("RTCRtpReceiver")}}, along with some shared state.

+ +

Each {{Glossary("SDP")}} media section describes one bidirectional SRTP ("Secure Real Time Protocol") stream (excepting the media section for {{domxref("RTCDataChannel")}}, if present). This pairing of send and receive SRTP streams is significant for some applications, so RTCRtpTransceiver is used to represent this pairing, along with other important state from the media section. Each non-disabled SRTP media section is always represented by exactly one transceiver.

+ +

A transceiver is uniquely identified using its {{domxref("RTCRtpTransceiver.mid", "mid")}} property, which is the same as the media ID (mid) of its corresponding m-line. An RTCRtpTransceiver is associated with an m-line if its mid is non-null; otherwise it's considered disassociated.

+ +

Properties

+ +
+
{{domxref("RTCRtpTransceiver.currentDirection", "currentDirection")}} {{ReadOnlyInline}}
+
A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which indicates the transceiver's current directionality, or null if the transceiver is stopped or has never participated in an exchange of offers and answers.
+
{{domxref("RTCRtpTransceiver.direction", "direction")}}
+
A string from the enum {{domxref("RTCRtpTransceiverDirection")}} which is used to set the transceiver's desired direction.
+
{{domxref("RTCRtpTransceiver.mid", "mid")}} {{ReadOnlyInline}}
+
The media ID of the m-line associated with this transceiver. This association is established, when possible, whenever either a local or remote description is applied. This field is null if neither a local or remote description has been applied, or if its associated m-line is rejected by either a remote offer or any answer.
+
{{domxref("RTCRtpTransceiver.receiver", "receiver")}} {{ReadOnlyInline}}
+
The {{domxref("RTCRtpReceiver")}} object that handles receiving and decoding incoming media.
+
{{domxref("RTCRtpTransceiver.sender", "sender")}} {{ReadOnlyInline}}
+
The {{domxref("RTCRtpSender")}} object responsible for encoding and sending data to the remote peer.
+
{{domxref("RTCRtpTransceiver.stopped", "stopped")}}
+
Indicates whether or not sending and receiving using the paired RTCRtpSender and RTCRtpReceiver has been permanently disabled, either due to SDP offer/answer, or due to a call to {{domxref("RTCRtpTransceiver.stop", "stop()")}}.
+
+ +

Methods

+ +
+
{{domxref("RTCRtpTransceiver.setCodecPreferences", "setCodecPreferences()")}}
+
A list of {{domxref("RTCRtpCodecParameters")}} objects which override the default preferences used by the {{Glossary("user agent")}} for the transceiver's codecs.
+
{{domxref("RTCRtpTransceiver.stop", "stop()")}}
+
Permanently stops the RTCRtpTransceiver. The associated sender stops sending data, and the associated receiver likewise stops receiving and decoding incoming data.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebRTC 1.0", "#rtcrtptransceiver-interface", "RTCRtpTransceiver")}}{{Spec2("WebRTC 1.0")}}
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.RTCRtpTransceiver")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/service_worker_api/index.html b/files/de/web/api/service_worker_api/index.html new file mode 100644 index 0000000000..54e3e1d86e --- /dev/null +++ b/files/de/web/api/service_worker_api/index.html @@ -0,0 +1,280 @@ +--- +title: Service Worker API +slug: Web/API/Service_Worker_API +tags: + - API + - Offline + - Referenz + - Service-Worker + - Worker +translation_of: Web/API/Service_Worker_API +--- +
+

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +

Service-Worker verhalten sich im Wesentlichen wie Proxy-Server, welche zwischen der Webanwendung bzw. dem Browser und dem Netzwerk (sofern dieses verfügbar ist) sitzen. Sie sollen u. a. das Erstellen wirksamer Offline-Erfahrungen ermöglichen und können Netzwerkanfragen abfangen und passende Maßnahmen abhängig davon ergreifen, ob das Netzwerk verfügbar ist und ob der Server veränderte Ressourcen enthält. Sie erlauben außerdem den Zugriff auf Push-Benachrichtigungen und Background Sync APIs.

+
+ +

Konzepte von Service-Workern und deren Nutzung

+ +

Ein Service-Worker ist ein ereignisgesteuerter Worker, der an einem Ursprung und einem Pfad registriert ist. Sie ist eine JavaScript-Datei, die in Abhängigkeit zu einer Webseite steht, Anfragen von Ressourcen abfängt und cached. In manchen Situationen kann es das Verhalten der Webseite beeinflussen. Ein häufiger Anwendungsfall ist die Abfrage, ob ein Netzwerk verfügbar ist, oder nicht.

+ +

Ein Service-Worker läuft in einem Worker-Kontext. Es hat keinerlei Zugriff auf das DOM und läuft in einem separaten Thread, also isoliert vom JavaScript, dass die Hauptinteraktionslogik der Website steuert. Es läuft vollständig asynchron und verhindert die Ausführung anderer Scripte nicht. Daraus resultiert, dass APIs wie XHR  oder LocalStorage nicht in Service-Workern benutzt werden können.

+ +

Service-Worker laufen aus Sicherheitsgründen nur über das HTTPS-Protokoll. Veränderte Netzwerkanfragen könnten "Man in the middle"-Angriffe deutlich leichter machen.

+ +
+

Hinweis: Service-Worker haben in Bereichen wie AppCache gezeigt, dass sie dort besonders gut genutzt werden können, da sie keine Vermutungen darüber treffen, was Sie machen wollen und brechen ihre Aktionen entsprechend ab. Sie haben deshalb die Kontrolle über alles.

+
+ +
+

Hinweis: Service-Worker basieren auf Promises. Generell sind sie abhängig von Anfragen und sie werden mit einer erfolgreichen oder einer fehlerhaften Aktion antworten. Die Architektur ist deshalb ideal dafür.

+
+ +

Registrierung

+ +

Ein Service-Worker wird über die {{domxref("ServiceWorkerContainer.register()")}}-Methode registriert. Falls sie erfolgreich war, wird Ihr Service-Worker vom Client heruntergeladen und versucht eine Installation/Aktivierung (siehe unten)  für URLs, die innerhalb der Quelle liegen oder die URLs, die Sie vorgeben.

+ +

Download, Installation und Aktivierung

+ +

Ihr Service-Worker muss folgenden Lebenszyklus durchlaufen:

+ +
    +
  1. Download
    2. +
  2. Installation
    3. +
  3. Aktivierung
    4. +
+ +

Der Service-Worker wird sofort mit heruntergeladen, sobald der Nutzer erstmals eine von Service-Workern kontrollierte Seite aufruft.

+ +

Danach wird es alle 24 Stunden neu heruntergeladen. Es kann auch in kürzeren Abständen heruntergeladen werden, aber die 24 Stunden können nicht überschritten werden. Damit sollen die Ladezeiten kürzer werden.

+ +

Eine Installation wird versucht, wenn die heruntergeladene Datei neu ist, also Unterschiede byteweise verglichen mit dem bestehenden Service-Worker aufweist oder es der erste Service-Worker ist, der für diese Seite heruntergeladen wurde.

+ +

Wenn ein Service-Worker erstmals verfügbar ist, wird eine Installation versucht. Nach einer erfolgreichen Installation ist es aktiviert.

+ +

Wenn bereits ein bestehender Service-Worker installiert wurde, wird die neue Version im Hintergrund installiert, aber noch nicht aktiviert. Zu diesen Zeitpunkt wartet der Worker, bis alle Seiten heruntergeladen wurden, die noch den alten Service-Worker nutzen. Sobald alle Seiten geladen worden sind, wird der neue Service-Worker aktiviert.

+ +

Sie können ein Ereignishandler für das {{domxref("InstallEvent")}} erstellen. Standardmäßig wird der Worker für den Einsatz vorbereitet, wenn das Event feuert. Zum Beispiel beim erstellen eines Caches, bei der die Built-In Storage API verwendet wird und Assets hineingeladen werden, damit die App offline verwendet werden kann.

+ +

Außerdem existiert ein activate-Event. Wenn es feuert, ist es ein guter Zeitpunkt die alten Caches und andere Daten zu bereinigen, die mit der vorherigen Version ihres Workers zusammenhängen.

+ +

Ihr Service-Worker kann mit dem {{domxref("FetchEvent")}} auf Anfragen antworten. Sie können die Antworten auf die Anfragen verändern, wie Sie wollen. Nutzen Sie dazu die {{domxref("FetchEvent.respondWith") }}-Methode.

+ +
+

Hinweis: Weil oninstall/onactivate eine Weile benötigen, um ihre Aktionen abzuschließen, ist es empfehlenswert, eine waitUntil-Methode bereitzustellen, die, wenn oninstall oder onactivate gefeuert werden, ein Promise geliefert wird. Events, die der Funktion dienen, werden dem Service-Worker nicht enthalten und der Promise wird erfolgreich ausgeführt.

+
+ +

Für eine komplette Anleitung, die zeigt, wie Sie Ihr erstes Beispiel erstellen, siehe Using Service Workers.

+ +

Weitere Anwendungsbereiche

+ +

Service-Worker werden auch benutzt für:

+ + + +

In Zukunft werden Service-Worker zu weiteren nützlichen Dingen fähig sein, die sie näher an eine native App bringen. Andere Spezifikationen können und werden den Service-Worker-Kontext benutzen. Zum Beispiel:

+ + + +

Schnittstellen

+ +
+
{{domxref("Cache") }}
+
Repräsentiert einen Speicher für {{domxref("Request")}} / {{domxref("Response")}}-Objeltpaare, die als ein Teil des {{domxref("ServiceWorker")}}-Lifecycles agieren.
+
{{domxref("CacheStorage") }}
+
Repräsentiert einen Speicher für {{domxref("Cache")}}-Objekte. Es ist das Hauptverzeichnis für {{domxref("ServiceWorker")}}. Es beinhaltet alle benannten Caches basierend auf Strings, auf die der Worker zugreifen kann.
+
{{domxref("Client") }}
+
Repräsentiert den Gültigkeitsbereich von einem Service-Worker-Client. Ein Service-Worker-Client ist entweder ein Dokument in einem Browser-Kontext oder ein {{domxref("SharedWorker")}}, welches von einem aktiven Worker gesteuert wird.
+
{{domxref("Clients") }}
+
Repräsentiert einen Container von {{domxref("Client")}}-Objekten; die hauptsächtliche Methode, um die aktiven Service-Worker-Clients anzusteuern.
+
{{domxref("ExtendableEvent") }}
+
Erweitert die Lebensdauer der install und activate-Events, die vom {{domxref("ServiceWorkerGlobalScope")}} entfernt werden als teil des Service-Worker-Lebenszyklus. Dies versichert, dass einige Events wie z. B. das {{domxref("FetchEvent")}} nicht vom {{domxref("ServiceWorker")}}, solange sie veraltete Cache-Einträge löschen usw.
+
{{domxref("ExtendableMessageEvent") }}
+
Das Event-Objekt von einem {{event("message_(ServiceWorker)","message")}}-Event, welches von einem Service-Worker gefeuert wird.
+
{{domxref("FetchEvent") }}
+
Die Parameter, die dem {{domxref("ServiceWorkerGlobalScope.onfetch")}}-Handler übergeben werden. FetchEvent repräsentiert eine Fetch-Aktion, die vom {{domxref("ServiceWorkerGlobalScope")}} eines {{domxref("ServiceWorker")}} entfernt wird. Es beinhaltet Information über die Anfrage und der daraus resultierenden Antwort, und stellt die {{domxref("FetchEvent.respondWith", "FetchEvent.respondWith()")}}-Methode bereit. Es ermöglicht eine willkürliche Antwort, die zurück  zur kontrollierten Seite gesendet wird.
+
{{domxref("InstallEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.oninstall", "oninstall")}} handler, the InstallEvent interface represents an install action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}. As a child of {{domxref("ExtendableEvent")}}, it ensures that functional events such as {{domxref("FetchEvent")}} are not dispatched during installation. 
+
{{domxref("Navigator.serviceWorker") }}
+
Returns a {{domxref("ServiceWorkerContainer")}} object, which provides access to registration, removal, upgrade, and communication with the {{domxref("ServiceWorker")}} objects for the associated document.
+
{{domxref("NotificationEvent") }}
+
The parameter passed into the {{domxref("ServiceWorkerGlobalScope.onnotificationclick", "onnotificationclick")}} handler, the NotificationEvent interface represents a notification click event that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a {{domxref("ServiceWorker")}}.
+
{{domxref("ServiceWorker") }}
+
Represents a service worker. Multiple browsing contexts (e.g. pages, workers, etc.) can be associated with the same ServiceWorker object.
+
{{domxref("ServiceWorkerContainer") }}
+
Provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.
+
{{domxref("ServiceWorkerGlobalScope") }}
+
Represents the global execution context of a service worker.
+
{{domxref("ServiceWorkerMessageEvent")}}
+
Contains information about an event sent to a {{domxref("ServiceWorkerContainer")}} target. 
+
{{domxref("ServiceWorkerRegistration") }}
+
Represents a service worker registration.
+
{{domxref("SyncEvent")}} {{non-standard_inline}}
+
+

The SyncEvent interface represents a sync action that is dispatched on the {{domxref("ServiceWorkerGlobalScope")}} of a ServiceWorker. 

+
+
{{domxref("SyncManager")}} {{non-standard_inline}}
+
Provides an interface for registering and listing sync registrations.
+
{{domxref("WindowClient") }}
+
Represents the scope of a service worker client that is a document in a browser context, controlled by an active worker. This is a special type of {{domxref("Client")}} object, with some additional methods and properties available.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser-Kompatibilität

+ +
{{ CompatibilityTable() }}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{ CompatNo() }}24{{ CompatNo() }}
install/activate events{{ CompatChrome(40.0) }}{{ CompatGeckoDesktop("44.0") }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache +

{{CompatChrome(42.0)}}

+ 		{{ CompatGeckoDesktop("39.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
 install/activate events{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatNo() }}
fetch event/request/
+ respondWith()		{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
caches/cache{{ CompatNo() }}{{CompatChrome(40.0)}}{{ CompatGeckoMobile("39.0") }}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
+
+ +
+

Note: For backwards compatibility, you could choose to use service workers and AppCache on the same web app to do equivalent things (if the AppCache will support doing those things, of course.) What happens in such a case is that browsers that don’t support Service Workers will use AppCache, and those that do will ignore the AppCache and let the service worker take over.

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/service_worker_api/using_service_workers/index.html b/files/de/web/api/service_worker_api/using_service_workers/index.html new file mode 100644 index 0000000000..f45d69025f --- /dev/null +++ b/files/de/web/api/service_worker_api/using_service_workers/index.html @@ -0,0 +1,507 @@ +--- +title: Service-Worker benutzen +slug: Web/API/Service_Worker_API/Using_Service_Workers +tags: + - Anleitung + - Grundlagen +translation_of: Web/API/Service_Worker_API/Using_Service_Workers +--- +

{{ServiceWorkerSidebar}}

+ +

{{ SeeCompatTable() }}

+ +
+

Dieser Artikel informiert über die ersten Schritte mit Service-Workern, inklusive der Basisarchitektur, der Registrierung eines Service-Workers, der Installation und des Aktivierungsprozesses für einen neuen Service-Worker, Aktualisierung eines Service-Workers, Cache-Kontrolle und benutzerdefinierte Antworten, alles im Kontext von einer simplen App mit Offline-Funktionalität. 

+
+ +

Die Voraussetzung von Service-Workern

+ +

Ein großes Problem, unter dem Web-User seit Jahren leiden, ist der Verlust der Internetverbindung. Selbst die beste Webanwendung liefert eine furchtbare Benutzererfahrung, wenn sie nicht heruntergeladen werden kann. Es gab verschiedene Versuche, Technologien zu erstellen, die dieses Problem lösen (wie unsere Offline-Seite zeigt) und einige Themen konnten so angegangen werden. Das größte Problem aber ist, dass es immer noch keinen guten allgemeinen Kontroll-Mechanismus für Asset-Caching und eigene Netzwerkanfragen gibt. 
+
+ Der vorausgegangene Versuch — AppCache — schien eine gute Idee, da er der Entwicklerin erlaubte, Assets zu spezifizieren, die leicht zu cachen sein sollten. Die Technologie traf jedoch Annahmen darüber, was die Entwicklerin zu tun gedachte und schlug an mehreren Stellen fehl, wenn die Webanwendung diesen Annahmen nicht eins zu eins folgte. Mehr Details dazu finden sich in Jake Archibalds "Application Cache is a Douchebag".

+ +
+

Beachte:  Wird AppCache verwendet, um Offline-Support für eine Seite zur Verfügung zu stellen, wird seit Firefox 44 eine Warnmeldung auf der Console angezeigt, die Entwicklern statt dessen die Verwendung von Service-Workern empfiehlt ({{bug("1204581")}}).

+
+ +

Service-Worker sollen diese Probleme schließlich beheben. Ihre Syntax ist komplexer als die des AppCaches, der Vorteil ist aber, dass nun JavaScript benutzt werden kann, um die vom AppCache getroffenen Annahmen feinschrittig zu kontrollieren, was das zuvor beschriebene Problem und viele weitere löst. Mit Hilfe eines Service-Workers, kann die Webanwendung leicht aufgesetzt werden, um vorrangig gecachte Assets zu benutzen und so auch im Offline-Fall eine bestimmte Benutzererfahrung zu ermöglichen, bevor weitere Daten aus dem Netzwerk geladen werden (auch bekannt als Offline First-Ansatz). Native Apps stellen dieses Feature bereits bereit, was der Grund dafür ist, dass native Apps oft Webanwendungen vorgezogen werden.

+ +

Einrichtung zur Verwendung von Service-Workern

+ +

Viele der Eigenschaften von Service-Workern sind inzwischen in neueren Versionen unterstützender Browser standardmäßig eingestellt. Sollte der Beispielcode in einem der installierten Browser jedoch nicht funktionieren, kann die explizite Aktivierung einer Einstellung vonnöten sein:

+ + + +

Stellen Sie weiterhin sicher, dass Ihr Code über HTTPS gesendet wird — Service-Worker sind aus Sicherheitsgründen auf HTTPS beschränkt. Da GitHub (resp. GitHub Pages) HTTPS unterstüzt, ist es ein guter Ort, um Experimente zu hosten.

+ +

Grundarchitektur

+ +

+ +

Ein einfache Implementierung von Service-Workern folgt für gewöhnlich den folgenden Schritten:

+ +
    +
  1. Die URL des Service-Workers wird aufgerufen und via {{domxref("serviceWorkerContainer.register()")}} registriert.
    2. +
  2. War dies erfolgreich, wird der Service-Worker in einem {{domxref("ServiceWorkerGlobalScope")}} ausgeführt; Im Prinzip ist dies eine besondere Art von Worker-Kontext, welcher außerhalb des Threads des Hauptscriptes läuft und keinen Zugriff auf das DOM hat.
    3. +
  3. Der Service-Worker kann nun Events verarbeiten.
    4. +
  4. Die Installation des Workers wird versucht, wenn Seiten, die durch Service-Worker verwaltet werden, wiederholt besucht werden. Ein Install-Event ist immer das erste, welches an einen Service-Worker gesendet wird (Dies kann beispielsweise benutzt werden, um den Prozess zu starten, der die IndexDB befüllt und Seiten-Assets cacht). Das ist der gleiche Ablauf, der bei der Installation einer nativen oder FirefoxOS App stattfindet - alles für die Offline-Nutzung vorbereiten.
    5. +
  5. Sobald der oninstall-Handler abgeschlossen ist, wird der Service-Worker als installiert betrachtet.
    6. +
  6. Der nächste Schritt ist Aktivierung. Sobald der Service-Worker installiert wurde, erhält dieser ein activate-Event. Der Hauptnutzen von onactivate ist das Aufräumen von Ressourcen, die in vorherigen Versionen des Service-Worker-Scripts genutzt wurden.
    7. +
  7. Der Service-Worker kann nun Webseiten verwalten, aber nur wenn diese nach dem erfolgreichen Abschluss von register() aufgerufen wurden. So wird ein Dokument, welches ohne Service-Worker gestartet wurde bis zu einem Neuladen nicht von einem Service-Worker verwaltet werden.
    8. +
+ +

Promises

+ +

Promises sind ein sehr guter Mechanismus um asynchrone Operationen, deren Erfolg voneinander abhängt, auszuführen. Diese Technologie ist zentral für die Arbeitsweise von Service-Workern.
+
+ Promises ermöglichen viele verschiedene Dinge, für unseren Zweck reicht es allerdings aus zu wissen, dass, wenn eine Funktion eine Promise zurück gibt, ein .then() an das Ende des Aufrufs gehangen werden und mit Callbacks für Erfolg, Misserfolg, etc. versehen werden kann. Des Weiteren kann .catch() am Ende benutzt werden, um einen besonderen Callback für den Misserfolg hinzuzufügen.

+ +

Vergleichen wir nun die traditionelle synchrone Callback-Struktur mit ihrem asynchronen Promise-Äquivalent.

+ +

sync

+ +
try {
+  var value = myFunction();
+  console.log(value);
+} catch(err) {
+  console.log(err);
+}
+ +

async

+ +
myFunction().then(function(value) {
+  console.log(value);
+  }).catch(function(err) {
+  console.log(err);
+});
+ +

Im ersten Beispiel müssen wir warten, bis die myFunction() ausgeführt wird und value zurückgegeben wird bevor weiterer Code ausgeführt werden kann. Im zweiten Beispiel gibt myFunction() eine Promise für value zurück, danach kann weiterer Code ausgeführt werden. Wenn die Promise aufgelöst wird, wird der Code in then asynchron ausgeführt.
+
+ Nun zu einem echten Beispiel: Was, wenn wir Bilder dynamisch laden, aber sicher stellen wollen, dass sie erst angezeigt werden, wenn sie vollständig geladen sind? Dies ist etwas, was häufig gemacht werden soll, aber sehr kompliziert werden kann. .onload kann benutzt werden, um ein Bild erst anzuzeigen, wenn es geladen wurde. Was aber geschieht mit Events, die stattfinden, bevor wir auf diese hören können? Man könnte versuchen, dieses Problem mit Hilfe von .complete zu umgehen, was jedoch nicht betriebssicher ist und den Umgang mit mehreren Bildern gleichzeitig nicht abdeckt. Auch ist dieser Ansatz weiterhin synchron und blockiert somit den Haupt-Thread.
+
+ Wir können jedoch stattdessen eine eigene Promise bauen, die diesen Fall abdeckt. (Siehe unser Promises-Test-Beispiel für den entsprechenden Quellcode, oder hier für eine Liveanwendung.)

+ +

{{note("Eine echte Service-Worker-Implementierung würde Caching und das onfetch-Event statt der überholten XMLHttpRequest API benutzen. Diese Features wurden hier nicht benutzt, um den Fokus auf Promises setzen zu können.")}}

+ +
function imgLoad(url) {
+  return new Promise(function(resolve, reject) {
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'blob';
+
+    request.onload = function() {
+      if (request.status == 200) {
+        resolve(request.response);
+      } else {
+        reject(Error('Bild wurde nicht geladen; Fehlercode:' + request.statusText));
+      }
+    };
+
+    request.onerror = function() {
+      reject(Error('Ein Netzwerkfehler ist aufgetreten.'));
+    };
+
+    request.send();
+  });
+}
+ +

Wir geben eine neue Promise mit Hilfe des Promise()-Konstruktors zurück, der als Parameter eine Callback-Funktion mit resolve- und reject- Parametern erhält. Innerhalb dieser Funktion müssen wir definieren, was passieren muss, dass die Promise erfolgreich aufgelöst oder zurückgewiesen wird — In diesem Fall also entweder einen 200 OK Status zurückgegeben bekommen oder nicht — und dann bei Erfolg resolve und bei Misserfolg reject aufzurufen. Der restliche Inhalt dieser Funktion sind Schritte zum Umgang mit XHR, über die wir uns im Moment keine Gedanken machen müssen.

+ +

Wenn wir beim Aufruf der imgLoad()-Funktion angelangt sind, rufen wir diese mit der URL zu dem Bild, welches wir laden möchten, wie erwartet auf, der restliche Code ist jedoch ein bisschen anders:

+ +
var body = document.querySelector('body');
+var myImage = new Image();
+
+imgLoad('myLittleVader.jpg').then(function(response) {
+  var imageURL = window.URL.createObjectURL(response);
+  myImage.src = imageURL;
+  body.appendChild(myImage);
+}, function(Error) {
+  console.log(Error);
+});
+ +

Die then()-Methode wird an das Ende des Funktionsaufrufes gehangen, und enthält zwei Funktionen – die erste wird ausgeführt, wenn die Promise aufgelöst wird, die zweite, wenn sie zurückgewiesen wird. Im Auflösungsfall zeigen wir das Bild innerhalb von myImage an und fügen es an den body an (Das Argument der then()-Funktion ist die request.response innerhalb der resolve-Methode des Promises); im Zurückweisungsfall geben wir einen Fehler in der Konsole aus.

+ +

Dies alles geschieht asynchron.

+ +
+

Beachte: Promises können aneinandergekettet werden, zum Beispiel:
+ myPromise().then(success, failure).then(success).catch(failure);

+
+ +
+

Beachte: Weitere Informationen zu Promises finden sich in Jake Archibalds Artikel JavaScript Promises: there and back again.

+
+ +

Service-Worker Demo

+ +

Um die Grundlagen der Registrierung und Installation eines Service-Workers zu demonstrieren, haben wir eine kleine Demo namens sw-test geschaffen, die eine überschaubare Star-Wars-Lego-Bildergalerie ist. Sie nutzt eine Promise-unterstützte Funktion um Bilddaten von einem JSON-Objekt zu lesen und diese Bilder mit Hilfe von Ajax zu laden, bevor sie untereinander auf der Webseite angezeigt werden. Die Anwendung ist statisch und einfach gehalten. Sie registriert, installiert und aktiviert des Weiteren einen Service-Worker und cacht die erforderlichen Dateien für die Offline-Nutzung, sollten weitere Aspekte dieser Spezifikation bei den aufrufenden Browsern aktiviert sein.

+ +


+
+
+ Der Quellcode ist auf GithHub zu finden, eine Live-Version kann hier betrachtet werden. Der Aspekt, den wir hier betrachten wollen, ist die Promise (siehe app.js Zeilen 17-42), die eine modifizierte Version dessen ist, was in der Promises Test Demo zu lesen war. Die Unterschiede sind die folgenden:

+ +
    +
  1. Im Original haben wir nur eine URL zu einem Bild, welches wir laden wollen, hineingereicht. In dieser Version reichen wir ein JSON-Fragment hinein, welches alle Daten für ein einzelnes Bild beinhaltet (in image-list.js kann ein Blick darauf geworfen werden). Das geschieht, weil wegen der Asynchronität die gesamten Daten für jedes Auflösen der Promise in in diese hineingereicht werden müssen. Würde nur die URL hineingereicht werden und versucht werden, während der for()-Schleife, auf andere Dinge im JSON zuzugreifen, schlüge dies fehl, da die Promise nicht zeitgleich mit dem Abschluss der Iteration auflösen würde, da dies ein synchroner Prozess ist.
    2. +
  2. Wir lösen die Promise des Weiteren mit einem Array auf, da wir den geladenen Bild-Blob, aber auch Bildname, Bildnachweis und Alt-Text später der auflösenden Funktion zur Verfügung stellen wollen. (siehe app.js Zeilen 26-29). Promises lösen mit einem einzigen Argument auf, werden also mehrere Werte gebraucht, muss dies über ein Array bzw. Objekt gelöst werden.
    3. +
  3. Um auf die Werte der aufgelösten Promise zuzugreifen, greifen wir auf eben jene Funktion zu. (siehe app.js Zeilen 55-59.) Dies mag auf den ersten Blick seltsam erscheinen, ist aber die korrekte Handhabung von Promises.
    4. +
+ +

Service-Worker auf die Bühne, bitte!

+ +

Auf geht's zu Service-Workern!

+ +

Service-Worker registrieren

+ +

Der erste Code-Block in der JavaScript-Datei unserer App — app.js — sieht wie folgt aus. Dies ist unser Startpunkt für die Nutzung von Service-Workern.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/sw-test/' }).then(function(reg) {
+    // Registrierung erfolgreich
+    console.log('Registrierung erfolgreich. Scope ist ' + reg.scope);
+  }).catch(function(error) {
+    // Registrierung fehlgeschlagen
+    console.log('Registrierung fehlgeschlagen mit ' + error);
+  });
+};
+ +
    +
  1. Der äußere Block kümmert sich um die Feature-Erkennung um sicher zu stellen, dass Service-Worker unterstützt werden, bevor einer registriert wird.
    2. +
  2. Als nächstes nutzen wir die {{domxref("ServiceWorkerContainer.register()") }}-Funktion, um den Service Worker für diese Seite zu registrieren. Dieser ist nur eine JavaScript-Datei innerhalb unserer App. (Beachte, dass die URL der Datei relativ zum Ursprung ist, und nicht zur JavaScript-Datei, die sie referenziert.)
    3. +
  3. Der scope Parameter ist optional, und kann benutzt werden, um den Teil der. Applikation einzuschränken, den der Service-Worker kontrollieren soll. In diesem Fall, haben wir '/sw-test/' spezifiziert, was alle Inhalte unter dem App-Ursprungsverzeichnis beinhaltet. Wird der Parameter weggelassen, würde standardmäßig dieses Verzeichnis gewählt werden. Wir haben es hier zu Anschauungszwecken jedoch spezifiziert..
    4. +
  4. Die .then() Promise-Funktion wird genutzt, um den Erfolgsfall an unsere Promise-Struktur zu hängen. Wenn die Promise erfolgreich auflöst, wird der Programmcode innerhalb dieser Funktion ausgeführt.
    5. +
  5. Zuletzt fügen wir die.catch()-Funktion ans Ende an, die ausgeführt wird, sollte die Promise zurückgewiesen werden.
    6. +
+ +

Jetzt ist ein Service-Worker registriert, der in einem Worker-Kontext läuft und daher keinen Zugriff auf das DOM hat. Code im Service-Worker wird außerhalb der normalen Seiten ausgeführt, um deren Laden zu kontrollieren.
+
+ Ein einzelner Service-Worker kann viele Seiten kontrollieren. Wird eine Seite innerhalb des spezifizierten Codes geladen, wird der Service-Worker für diese eingerichtet und nimmt seine Arbeit auf. Es sollte daher nicht vergessen werden, dass vorsichtig mit globalen Variablen im Service-Worker-Script umgegangen werden muss: Jede Seite im Scope hat den selben Worker, mit dem sie arbeitet.

+ +
+

Beachte: Service-Worker funktionieren wie Proxy-Server, was es unter anderem erlaubt, Netzwerkanfragen und -antworten zu modifizieren und mit Objekten aus dem Cache zu ersetzen.

+
+ +
+

Beachte: Eine gute Sache an Service-Workern ist, dass, wenn Feature-Erkennung wie im obigen Beispiel verwendet wird, Browser, die Service-Worker nicht unterstützen, die App dennoch normal und wie erwartet benutzen können. Wenn weiterhin AppCache und Service-Worker gemeinsam auf einer Seite benutzt werden, werden Browser, die AppCache aber nicht Service-Worker unterstützen, ersteres benutzen. Browser die beides unterstützen, werden AppCache zu Gunsten von Service-Workern ignorieren.

+
+ +

Wieso schlägt die Registrierung meines Service Workers fehl?

+ +

Dies kann aus folgenden Gründen passieren:

+ +
    +
  1. Die Applikation läuft nicht unter HTTPS
    2. +
  2. Der Pfad zur Service-Worker-Datei ist nicht korrekt beschrieben — er muss relativ zum Ursprung geschrieben sein, nicht relativ zum Wurzelverzeichnis der App. In unserem Beispiel liegt der Worker unter https://mdn.github.io/sw-test/sw.js, wohingegen das Wurzelverzeichnis der App https://mdn.github.io/sw-test/ ist. Der Pfad muss also als /sw-test/sw.js, geschrieben werden, und nicht als /sw.js.
    3. +
  3. Der Service-Worker, auf den verwiesen wird, hat einen anderen Ursprung als die App. Auch das ist nicht gestattet.
    4. +
+ +

Weiterhin zu beachten:

+ + + +

Installation und Aktivierung: Füllen des Caches

+ +

Nachdem der Service-Worker registriert wurde, versucht der Browser den Service-Worker für die entsprechende Seite zu installieren und zu aktivieren.
+
+ Das Install-Event wird abgesetzt wenn eine Installation erfolgreich abgeschlossen wurde. Dieses Event wird für gewöhnlich dazu genutzt, den Offline-Cache des Browsers mit den Assets zu befüllen, die benötigt werden, damit die App offline laufen kann. Um das zu erreichen, nutzen wir die Storage-API der Service-Worker — {{domxref("cache")}} — ein globales Objekt des Service-Workers, welches uns erlaubt Assets, die durch Netzwerkantworten geliefert wurden, zu speichern. Diese API arbeitet ähnlich wie der Browser interne Cache, ist allerdings Domain spezifisch und besteht, bis Gegenteiliges gesagt wird, was erneut volle Kontrolle erlaubt.

+ +
+

Beachte: Die Cache API ist nicht in jedem Browser unterstützt. (Siehe auch den Abschnitt {{anch("Browserkompabilität")}} für weitere Informationen.) Soll sie jetzt genutzt werden, kann ein Polyfill in Betracht gezogen werden, wie er beispielsweise in Googles Topeka Demo enthalten ist, oder die Assets in IndexedDB gespeichert werden.

+
+ +

Wir beginnen diesen Abschnitt mit einem Blick auf ein Code-Beispiel — Das ist der erste Block in unserem Service-Worker:

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v1').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+        '/sw-test/star-wars-logo.jpg',
+        '/sw-test/gallery/',
+        '/sw-test/gallery/bountyHunters.jpg',
+        '/sw-test/gallery/myLittleVader.jpg',
+        '/sw-test/gallery/snowTroopers.jpg'
+      ]);
+    })
+  );
+});
+ +
    +
  1. Hier wird dem Service-Worker (mit Hilfe von this) ein installEvent-Listener hinzugefügt, und die {{domxref("ExtendableEvent.waitUntil()") }}-Methode dem Event angehängt — das stellt sicher, dass der Service-Worker nicht installiert wird, bis der Code innerhalb von waitUntil() erfolgreich ausgeführt wurde.
    2. +
  2. Innerhalb von waitUntil() benutzen wir die caches.open()-Methode um einen neuen Cache mit dem Namen v1 zu erstellen, welcher die erste Version des Ressourcenspeichers unserer Seite sein wird. Das gibt eine Promise für den erstellten Cache zurück; sobald diese aufgelöst ist, rufen wir eine Funktion auf, die wiederum addAll() auf dem erstellten Cache aufruft und als Parameter einen Array mit zum Ursprung relativen URLs der zu cachenden Ressourcen enthält.
    3. +
  3. Sollte die Promise zurückgewiesen werden, schlägt die Installation fehl und der Worker tut nichts. Das ist in Ordnung und bietet die Möglichkeit, den Code zu korrigieren und es bei der nächsten Registrierung erneut zu versuchen.
    4. +
  4. Nach erfolgreicher Installation wird der Service-Worker aktiviert. Wurde der Service-Worker zum ersten mal installiert und aktiviert ist dies nicht weiter von Bedeutung, aber wichtig, wenn der Service-Worker aktiviert wird. (Siehe den Abschnitt {{anch("Aktualisieren des Service-Workers") }} im späteren Verlauf.)
    5. +
+ +
+

Beachte: localStorage funktioniert ähnlich wie der Service-Worker-Cache, ist aber synchron und daher in Service-Workern nicht gestattet.

+
+ +
+

Beachte: IndexedDB kann, wenn nötig, innerhalb eines Service-Workers benutzt werden.

+
+ +

Eigene Antworten auf Netzwerkanfragen

+ +

Da jetzt die Assets der Seite gecacht wurden, kann nun den Service-Workern mitgeteilt werden, was sie mit dem gecachten Inhalt tun sollen. Dies geschieht mit Hilfe des fetch-Events.

+ +

Ein fetch-Event wird jedes Mal abgesetzt, wenn eine Ressource, die vom Service-Worker kontrolliert wird (also die Dokumente innerhalb seines Scopes sowie die dort referenzierten Ressourcen), geladen wird.  (Wenn also index.html eine Cross-Origin-Anfrage an ein eingebettetes Bild absetzt, geht auch das durch den Service-Worker.)

+ +

Ein fetch Event-Listener kann dem Service-Worker hinzugefügt, und die respondWith()-Methode des Events aufgerufen werden, um die HTTP-Antworten abzufangen und mit unseren eigenen zu ersetzen.

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    // Hier eigene Antworten
+  );
+});
+ +

Es kann damit begonnen werden, jedes Mal mit der Ressource zu antworten, deren URL der der Netzwerkanfrage entspricht:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request)
+  );
+});
+ +

caches.match(event.request) erlaubt uns, jede Ressource, die vom Netzwerk angefragt wird, mit der entsprechenden Ressource des Caches zu ersetzen, so diese verfügbar ist. Der Abgleich geschieht wie bei normalen HTTP-Anfragen über URLs und Header.

+ +

Betrachten wir einige weitere Optionen, die wir haben, wenn wir unsere eigenen Antworten definieren wollen (siehe auch die Fetch-API Dokumentation für weitere Informationen über {{domxref("Request")}}- und {{domxref("Response")}}-Objekte.)

+ +
    +
  1. +

    Der {{domxref("Response.Response","Response()")}}-Konstruktor  erlaubt uns das Erstellen einer benutzerdefinierten Antwort. In diesem Fall geben wir eine einfache Zeichenkette zurück:

    + + 
    new Response('Hallo vom freundlichen Service-Worker!');
    +
    2. +
  2. +

    Das folgende komplexere Response-Beispiel zeigt, dass optional eine Anzahl an Headern in der Antwort gesetzt werden können, die die Standard HTTP-Responce-Header emulieren. Hier wird dem Browser nut der Content-Type unserer künstlichen Antwort mitgeteilt:

    + + 
    new Response('<p>Hallo from freundlichen Service-Worker!</p>', {
+  headers: { 'Content-Type': 'text/html' }
+})
    +
    3. +
  3. +

    Wenn im Cache kein Treffer gefunden wurde, könnte der Browser angewiesen werden, die standardmäßigen Netzwerkanfrage mit {{domxref("GlobalFetch.fetch","fetch")}} auszuführen, um die Ressource aus dem Netzwerk zu laden, wenn dieses verfügbar ist:

    + + 
    fetch(event.request)
    +
    4. +
  4. +

    Wenn es keinen Treffer gab und auch das Netzwerk nicht verfügbar ist, kann die Anfrage mit einer Ausweichseite beantwortet werden, indem {{domxref("CacheStorage.match","match()")}} folgendermaßen verwendet wird:

    + + 
    caches.match('/fallback.html');
    +
    5. +
  5. +

    Viele Informationen über jeden Request können erhalten werden, indem Parameter des {{domxref("Request")}}-Objekts, welches vom {{domxref("FetchEvent")}} zurückgegeben wird, aufgerufen werden.

    + + 
    event.request.url
+event.request.method
+event.request.headers
+event.request.body
    +
    6. +
+ +

Umgang mit fehlgeschlagenen Cache-Anfragen

+ +

caches.match(event.request)ist hilfreich, wenn es einen Treffer im Service-Worker-Cache gibt. Was aber, wenn das nicht der Fall ist? Stellten wir keine Möglichkeit zur Behandlung einer scheiternden Cache-Anfrage bereit, würde unsere Promise zurückgewiesen werden und wir würden einem Netzwerkfehler gegenüber stehen, wenn es keinen Treffer im Cache gibt.

+ +

Glücklicherweise erlaubt die Promise basierte Struktur des Service-Workers weitere Optionen bereitzustellen. Beispielsweise:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request);
+    })
+  );
+});
+ +

Falls die Promise zurückgewiesen wird, gibt die catch()-Funktion die Standard-Netzwerkanfrage für die Ressource zurück, was es erlaubt, diese vom Server zu laden, sollte eine Netzwerkverbindung bestehen.

+ +

Ein weiterer Weg wäre, die Ressource nicht bloß aus dem Netzwerk zu laden, sondern für zukünftige Anfragen im Cache zu speichern, damit diese ebenfalls offline verwendet werden können. Das bedeutet, sollten weitere Bilder zur Star-Wars-Galerie hinzugefügt werden, kann unsere App diese laden und cachen. Es würde folgendermaßen implementiert werden:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).catch(function() {
+      return fetch(event.request).then(function(response) {
+        return caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+          return response;
+        });
+      });
+    })
+  );
+});
+ +

Wir geben an dieser Stelle die Standard-Netzwerkanfrage mit return fetch(event.request) zurück, die wiederum eine Promise zurückgibt. Wenn diese Promise aufgelöst wird, reagieren wir mit einer Funktion, die unseren Cache mit caches.open('v1') öffnet, was eine weitere Promise zurückgibt. Wenn diese auflöst, wird cache.put() benutzt, um die Ressource dem Cache hinzuzufügen. Diese wird aus event.request gezogen, die Netzwerkantwort mit response.clone() kopiert und dem Cache hinzugefügt. Die Kopie wird gespeichert und die Original-Netzwerkantwort an den Browser und somit an die Seite, die die Anfrage gestellt hat, zurückgegeben.

+ +

Warum das alles? Der Datenstrom von Netzwerkanfrage und -antwort kann nur ein einziges Mal gelesen werden. Damit die Netzwerkantwort an den Browser zurückgegeben werden und trotzdem auch im Cache gespeichert werden kann, muss sie kopiert werden. Dadurch kann das Original an den Browser gereicht und die Kopie im Cache gespeichert werden. Original und Kopie werden somit jeweils nur einmal gelesen.

+ +

Zuletzt bleibt noch das Problem, was passieren soll, wenn es weder einen Treffer im Cache noch eine verfügbare Netzwerkverbindung gibt. Zur Zeit schlägt unsere Anfrage an die Ressource fehl. Wenn wir eine Ausweichlösung bereitstellen, werden, egal was passiert, die Nutzer eine Antwort bekommen:

+ +
this.addEventListener('fetch', function(event) {
+  event.respondWith(
+    caches.match(event.request).then(function(resp) {
+      return resp || fetch(event.request).then(function(response) {
+        caches.open('v1').then(function(cache) {
+          cache.put(event.request, response.clone());
+        });
+        return response;
+      });
+    }).catch(function() {
+      return caches.match('/sw-test/gallery/myLittleVader.jpg');
+    })
+  );
+});
+ +

Wir haben uns an dieser Stelle für ein Ausweichbild entschieden, da die einzigen Anfragen, die potentiell fehlschlagen, die für neue Bilder in der Galerie sein werden. Um alles andere wurde sich bereits während des install-Events der Installation gekümmert.

+ +

Aktualisieren des Service-Workers

+ +

Wurde der Service-Worker bereits installiert, aber eine neue Version bei Neuladen der Seite bereitgestellt werden, wird dieser neue Worker im Hintergrund installiert, jedoch noch nicht aktiviert. Das geschieht erst dann, wenn keine der Seiten, die den alten Worker nutzen, mehr geladen werden. Sobald dies der Fall ist, wird der neue Service-Worker aktiviert.

+ +

Damit dies geschehen kann, muss derinstall-Event-Listener im neuen Service-Worker ungefähr folgendermaßen angepasst werden (Augenmerk auf die neue Versionsnummer):

+ +
this.addEventListener('install', function(event) {
+  event.waitUntil(
+    caches.open('v2').then(function(cache) {
+      return cache.addAll([
+        '/sw-test/',
+        '/sw-test/index.html',
+        '/sw-test/style.css',
+        '/sw-test/app.js',
+        '/sw-test/image-list.js',
+
+             …
+
+              // hier können weitere neue Ressourcen stehen...
+      ]);
+    });
+  );
+});
+ +

Während dies alles geschieht, ist weiterhin die vorherige Version des Service-Workers für die Verwaltung der Anfragen verantwortlich und die neue Version wird im Hintergrund installiert. Der neue Cache hat in diesem Beispiel den Namen v2, so dass der Cache mit dem Namen v1 nicht beeinträchtigt wird.

+ +

Wenn keine Seiten mehr die aktuelle Version benutzen, wird der neue Worker aktiviert und verwaltet die Netzwerkanfragen.

+ +

Löschen des alten Caches

+ +

Es steht weiterhin ein activate-Event zur Verfügung. Es wird generell genutzt, um Dinge abzuhandeln, die die alte Version stark beeinträchtigt hätten, würden sie zu deren Laufzeit ausgeführt werden. Dies betrifft zum Beispiel das Löschen der alten Caches. Das Event ist auch nützlich, um Daten zu löschen, die nicht mehr gebraucht werden und so zu verhindern, dass zu viel Speicherplatz verbraucht wird — jeder Browser hat eine feste Obergrenze für die Menge an Cache-Speicherplatz, die ein Service-Worker nutzen kann. Der Browser selbst verwaltet den Speicherplatz an sich selbstständig, aber es kann passieren, dass der Cache-Speicherplatz für eine Seite gelöscht wird, denn wenn der Browser Daten dieser Art löscht, dann entweder alle oder keine Daten der Seite.

+ +

Promises, die waitUntil() hineingereicht werden, blockieren weitere Events bis diese abgearbeitet wurden, so dass sicher gestellt werden kann, dass alle Aufräumarbeiten abgeschlossen sind, bevor die erste Netzwerkanfrage an den neuen Cache gestellt wird.

+ +
this.addEventListener('activate', function(event) {
+  var cacheWhitelist = ['v2'];
+
+  event.waitUntil(
+    caches.keys().then(function(keyList) {
+      return Promise.all(keyList.map(function(key) {
+        if (cacheWhitelist.indexOf(key) === -1) {
+          return caches.delete(key);
+        }
+      }));
+    })
+  );
+});
+ +

Entwicklertools

+ +

Chrome hat chrome://inspect/#service-workers, wo Aktivität und Speicherplatz der aktuellen Service-Worker eingesehen werden können, und chrome://serviceworker-internals, wo mehr Details zu finden sind und Service-Worker gestartet, beendet und der Fehlersuche unterworfen werden können. Zukünftige Versionen werden zusätzlich Mittel zur Netzwerkdrosselung und einen Offline-Modus bereitsellen, um schlechte oder nicht vorhandene Netzwerkverbindungen zu simulieren.

+ +

Auch Firefox hat die Entwicklung nützlicher Werkzeuge in Bezug auf Service-Worker begonnen:

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '')}}{{Spec2('Service Workers')}}Initiale Definition.
+ +

Browserkompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstüzung{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("33.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstüzung{{CompatNo}}{{CompatChrome(40.0)}}{{ CompatVersionUnknown }}{{ CompatVersionUnknown }}{{CompatNo}}{{ CompatVersionUnknown() }}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/serviceworker/index.html b/files/de/web/api/serviceworker/index.html new file mode 100644 index 0000000000..38d160b96b --- /dev/null +++ b/files/de/web/api/serviceworker/index.html @@ -0,0 +1,103 @@ +--- +title: ServiceWorker +slug: Web/API/ServiceWorker +translation_of: Web/API/ServiceWorker +--- +
{{APIRef("Service Workers API")}}
+ +

Die ServiceWorker-Schnittstelle der Service Worker-API stellt einen Verweis auf einen Serviceworker bereit. Mehrere "Glossary"-Glossar-("Browsing-Kontexte", "Browsing-Kontexte") (z. B. .pages, Arbeitskräfte usw.) können demselben Service-Worker zugeordnet werden, jeder durch ein eindeutiges Objekt.ServiceWorker

+ +

Ein Objekt ist in der Eigenschaft ""ServiceWorkerRegistration.active"" und in der Eigenschaft ""ServiceWorkerContainer.controller"" verfügbar – dies ist ein Service-Worker, der aktiviert wurde und die Seite steuert (der Service-Worker wurde erfolgreich registriert, und die gesteuerte Seite wurde neu geladen).)ServiceWorker

+ +

Die Schnittstelle wird eine Reihe von Lebenszyklusereignissen – und – und funktionalen Ereignissen einschließlich ausgelöst. Einem Objekt ist ein Objekt zugeordnet, dem der Lebenszyklus von "ServiceWorker.state") zugeordnet ist.ServiceWorkerinstallactivatefetchServiceWorker

+ +

Properties

+ +

The ServiceWorker interface inherits properties from its parent, {{domxref("Worker")}}.

+ +
+
{{domxref("ServiceWorker.scriptURL")}} {{readonlyinline}}
+
Returns the serialized script URL defined as part of {{domxref("ServiceWorkerRegistration")}}. The URL must be on the same origin as the document that registers the .ServiceWorkerServiceWorker
+
{{domxref("ServiceWorker.state")}} {{readonlyinline}}
+
Returns the state of the service worker. It returns one of the following values: , , , or .installinginstalled,activatingactivatedredundant
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorker.onstatechange")}} {{readonlyinline}}
+
An {{domxref("EventListener")}} property called whenever an event of type is fired; it is basically fired anytime the {{domxref("ServiceWorker.state")}} changes.statechange
+
+ +

Methods

+ +

The ServiceWorker interface inherits methods from its parent, {{domxref("Worker")}}, with the exception of {{domxref("Worker.terminate")}} — this should not be accessible from service workers.

+ +

Examples

+ +

This code snippet is from the service worker registration-events sample (live demo). The code listens for any change in the {{domxref("ServiceWorker.state")}} and returns its value.

+ +
if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('service-worker.js', {
+        scope: './'
+    }).then(function (registration) {
+        var serviceWorker;
+        if (registration.installing) {
+            serviceWorker = registration.installing;
+            document.querySelector('#kind').textContent = 'installing';
+        } else if (registration.waiting) {
+            serviceWorker = registration.waiting;
+            document.querySelector('#kind').textContent = 'waiting';
+        } else if (registration.active) {
+            serviceWorker = registration.active;
+            document.querySelector('#kind').textContent = 'active';
+        }
+        if (serviceWorker) {
+            // logState(serviceWorker.state);
+            serviceWorker.addEventListener('statechange', function (e) {
+                // logState(e.target.state);
+            });
+        }
+    }).catch (function (error) {
+        // Something went wrong during registration. The service-worker.js file
+        // might be unavailable or contain a syntax error.
+    });
+} else {
+    // The current browser doesn't support service workers.
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#serviceworker', 'ServiceWorker')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("api.ServiceWorker")}}

+
+ +

See also

+ + diff --git a/files/de/web/api/serviceworkercontainer/index.html b/files/de/web/api/serviceworkercontainer/index.html new file mode 100644 index 0000000000..2899d05b7c --- /dev/null +++ b/files/de/web/api/serviceworkercontainer/index.html @@ -0,0 +1,158 @@ +--- +title: ServiceWorkerContainer +slug: Web/API/ServiceWorkerContainer +tags: + - API + - Draft + - Interface + - NeedsTranslation + - Offline + - Reference + - Service Workers + - ServiceWorkerContainer + - TopicStub + - Workers +translation_of: Web/API/ServiceWorkerContainer +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

The ServiceWorkerContainer interface of the ServiceWorker API provides an object representing the service worker as an overall unit in the network ecosystem, including facilities to register, unregister and update service workers, and access the state of service workers and their registrations.

+ +

Most importantly, it exposes the {{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register(scriptURL, scope[, base])")}} method used to register service workers, and the {{domxref("ServiceWorkerContainer.controller")}} property used to determine whether or not the current page is actively controlled.

+ +

Properties

+ +
+
{{domxref("ServiceWorkerContainer.controller")}} {{readonlyinline}}
+
Returns a {{domxref("ServiceWorker")}} object if its state is activated (the same object returned by {{domxref("ServiceWorkerRegistration.active")}}). This property returns null if the request is a force refresh (Shift + refresh) or if there is no active worker.
+
+ +
+
{{domxref("ServiceWorkerContainer.ready")}} {{readonlyinline}}
+
Defines whether a service worker is ready to control a page or not. It returns a {{jsxref("Promise")}} that will never reject, which resolves to a {{domxref("ServiceWorkerRegistration")}} with an {{domxref("ServiceWorkerRegistration.active")}} worker.
+
+ +

Event handlers

+ +
+
{{domxref("ServiceWorkerContainer.oncontrollerchange")}}
+
An event handler fired whenever a {{Event("controllerchange")}} event occurs — when the document's associated {{domxref("ServiceWorkerRegistration")}} acquires a new {{domxref("ServiceWorkerRegistration.active")}} worker.
+
{{domxref("ServiceWorkerContainer.onerror")}}
+
An event handler fired whenever an {{Event("error")}} event occurs in the associated service workers.
+
{{domxref("ServiceWorkerContainer.onmessage")}}
+
An event handler fired whenever a {{Event("message")}} event occurs — when incoming messages are received to the {{domxref("ServiceWorkerContainer")}} object (e.g. via a {{domxref("MessagePort.postMessage()")}} call.)
+
+ +

Methods

+ +
+
{{domxref("ServiceWorkerContainer.register", "ServiceWorkerContainer.register()")}} 
+
Creates or updates a {{domxref("ServiceWorkerRegistration")}} for the given scriptURL.
+
{{domxref("ServiceWorkerContainer.getRegistration()")}}
+
Gets a {{domxref("ServiceWorkerRegistration")}} object whose scope URL matches the provided document URL.  If the method can't return a {{domxref("ServiceWorkerRegistration")}}, it returns a Promise. 
+
{{domxref("ServiceWorkerContainer.getRegistrations()")}}
+
Returns all {{domxref("ServiceWorkerRegistration")}}s associated with a ServiceWorkerContainer in an array.  If the method can't return {{domxref("ServiceWorkerRegistration")}}s, it returns a Promise. 
+
+ +

Examples

+ +

This code snippet is from the service worker fallback-response sample (see fallback-response live). The code checks to see if the browser supports service workers. Then the code registers the service worker and determines if the page is actively controlled by the service worker. If it isn't, it prompts the user to reload the page so the service worker can take control. The code also reports any registration failures.

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function() {
+    if (navigator.serviceWorker.controller) {
+      document.querySelector('#status').textContent = 'The service worker is currently handling network operations.';
+      showRequestButtons();
+    } else {
+      document.querySelector('#status').textContent = 'Please reload this page to allow the service worker to handle network operations.';
+    }
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initial definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/serviceworkercontainer/register/index.html b/files/de/web/api/serviceworkercontainer/register/index.html new file mode 100644 index 0000000000..e900e8085c --- /dev/null +++ b/files/de/web/api/serviceworkercontainer/register/index.html @@ -0,0 +1,122 @@ +--- +title: ServiceWorkerContainer.register() +slug: Web/API/ServiceWorkerContainer/register +translation_of: Web/API/ServiceWorkerContainer/register +--- +

{{SeeCompatTable}}{{APIRef("Service Workers API")}}

+ +

Die register() Methode der ServiceWorkerContainer Schnittstelle erstellt oder aktualisiert eine ServiceWorkerRegistration für die gegebene scriptURL. 

+ +

Nach erfolgreicher Registrierung verwendet die Service Worker Registrierung die übergebene scriptURL und ihren Bereich für den Navigationsabgleich. Die Methode gibt ein Promise zurück, welches zu einer ServiceWorkerRegistration aufgelöst wird. Die Funktion kann bedingungslos aufgerufen werden - Es muss vorher nicht kontrolliert werden, ob eine aktive Registrierung vorhanden ist.

+ +

Es entstehen häufig Verwirrungen über die Bedeutung und Verwendung des scope. Da ein ServiceWorker keinen größeren Bereich abdecken kann als seinen einen Pfad, sollte man den Parameter nur verwenden, wenn man einen kleineren Bereich als den Standardbereich abdecken will.

+ +

Syntax

+ +
ServiceWorkerContainer.register(scriptURL, options).then(function(ServiceWorkerRegistration) {
+  // Do something with ServiceWorkerRegistration.
+});
+ +

Parameter

+ +
+
scriptURL
+
Die Url des Service Workers Scripts.
+
options {{optional_inline}}
+
Ein Object, welches verschiedene Registrierungsoptionen beinhaltet. Zur Zeit stehen folgende Optionen zur Verfügung: +
    +
  • scope: Ein USVString, welcher eine URL darstellt, die zur Festlegung des Bereiches des Service Workers verwendet wird. Dies ist normalerweise eine relative URL. Der Standardwert ist die URL, die man bekommen würde, wenn man './' mit dem Pfad des Service Worker Scripts verwenden würde.
    • +
+
+
+ +

Rückgabewert

+ +

Ein Promise, welches zu einem ServiceWorkerRegistration Objekt aufgelöst wird.

+ +

Beispiele

+ +
if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('service-worker.js', {scope: './'}).then(function(registration) {
+    document.querySelector('#status').textContent = 'succeeded';
+  }).catch(function(error) {
+    document.querySelector('#status').textContent = error;
+  });
+} else {
+  // Der verwendete Browser unterstützt Service Worker nicht.
+  var aElement = document.createElement('a');
+  aElement.href = 'http://www.chromium.org/blink/serviceworker/service-worker-faq';
+  aElement.textContent = 'unavailable';
+  document.querySelector('#status').appendChild(aElement);
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Service Workers', '#service-worker-container', 'ServiceWorkerContainer')}}{{Spec2('Service Workers')}}Initiale Definition.
+ +

Browserkompatiblität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(40.0)}}{{ CompatGeckoDesktop("44.0") }}{{CompatNo}}24{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{ CompatGeckoMobile("44.0") }}{{ CompatVersionUnknown }}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatChrome(40.0)}}
+
diff --git a/files/de/web/api/sharedworker/index.html b/files/de/web/api/sharedworker/index.html new file mode 100644 index 0000000000..52ecc8075b --- /dev/null +++ b/files/de/web/api/sharedworker/index.html @@ -0,0 +1,117 @@ +--- +title: SharedWorker +slug: Web/API/SharedWorker +tags: + - API + - Interface + - Reference + - SharedWorker + - WebWorkers + - Workers +translation_of: Web/API/SharedWorker +--- +
{{APIRef("Web Workers API")}}
+ +

Das SharedWorker Interface repräsentiert eine spezielle Art von Worker, auf welchen durch mehrere Kontexte zugegeriffen werden kann. Hier kann es sich um verschiedene Tabs, iFrames oder auch Worker handeln. Diese implementieren ein anderes Interface als dedicated Worker und haben einen anderen Global Scope {{domxref("SharedWorkerGlobalScope")}}.

+ +
+

Note: Wenn auf einen SharedWorker von mehreren Browser Kontexten aus zugegriffen wird müssen all diese denselben Urpsrung haben. (Dasselbe Protocol, Host und Port)

+
+ +

Konstruktoren

+ +
+
{{domxref("SharedWorker.SharedWorker", "SharedWorker()")}}
+
Erstellt einen Shared Web Worker, der ein Script zu einer angegebenen URL ausführt.
+
+ +

Eigenschaften

+ +

Erbt Eigenschaften von dem Parent {{domxref("EventTarget")}} und implementiert Eigenschaften von {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Ist ein{{domxref("EventListener")}} der immer aufgerufen wird wenn ein {{domxref("ErrorEvent")}} vom Typ error durch den Worker läuft.
+
{{domxref("SharedWorker.port")}} {{readonlyInline}}
+
Returnt ein {{domxref("MessagePort")}} Objekt, welches zum Kommunizieren und Kontrollieren des Shared Workers verwendet wird.
+
+ +
+
+ +

Methoden

+ +

Erbt Methoden von dem Parent {{domxref("EventTarget")}} und implementiert Methoden von {{domxref("AbstractWorker")}}.

+ +

Beispiel

+ +

In unserem Grundlegenden Shared Worker Beispiel (Shared Worker ausführen), haben wir zwei HTML Seiten, von denen beide etwas JavaScript verwenden um simple Kalkulationen auszuführen. Die verschiedenen Skripte verwenden dasselbe Worker File um die Kalkulation durchzuführen. Beide können auf dieses zugreifen, auch wenn diese in verschiedenen Fenstern ausgeführt werden.

+ +

Das folgende Code Beispiel zeigt das Erstellen eines SharedWorker Objekts unter der Verwendung des {{domxref("SharedWorker.SharedWorker", "SharedWorker()")}} Konstruktors. Beide Skripte enthalten:

+ +
var myWorker = new SharedWorker('worker.js');
+
+ +

Beide Skripte greifen dann auf den Worker durch ein {{domxref("MessagePort")}} Objekt zu, welches mithilfe von {{domxref("SharedWorker.port")}} erstellt wurde. Wenn das onmessage Event mithilfe von addEventListener angehängt wurde, wird der Port automatisch gestartet mittels der start() Methode:

+ +
myWorker.port.start();
+ +

Wenn der Port gestartet ist senden beide Skripte Nachrichten an den Worker und behandeln die empfangenen Nachrichten von port.postMessage() und port.onmessage:

+ +
first.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+second.onchange = function() {
+  myWorker.port.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+
+myWorker.port.onmessage = function(e) {
+  result1.textContent = e.data;
+  console.log('Message received from worker');
+}
+ +

Innerhalb des Workers verwenden wird den {{domxref("SharedWorkerGlobalScope.onconnect")}} Handler um uns an den oben genannten Port zu verbinden. Die mit dem Worker verbundenen Ports sind durch die Eigenschaft ports im {{event("connect")}} Event zugänglich. Anschließend verwenden wir die {{domxref("MessagePort")}} start() Methode um den Port zu starten und verwenden den onmessage Handler um die Nachrichten aus dem Main Thread zu behandeln.

+ +
onconnect = function(e) {
+  var port = e.ports[0];
+
+  port.addEventListener('message', function(e) {
+    var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
+    port.postMessage(workerResult);
+  });
+
+  port.start(); // Required when using addEventListener. Otherwise called implicitly by onmessage setter.
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', "#sharedworker", "SharedWorker")}}{{Spec2('HTML WHATWG')}}Keine Änderung von {{SpecName("Web Workers")}}.
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.SharedWorker")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/speechsynthesis/index.html b/files/de/web/api/speechsynthesis/index.html new file mode 100644 index 0000000000..b90f40aa6f --- /dev/null +++ b/files/de/web/api/speechsynthesis/index.html @@ -0,0 +1,134 @@ +--- +title: SpeechSynthesis +slug: Web/API/SpeechSynthesis +translation_of: Web/API/SpeechSynthesis +--- +

{{APIRef("Web Speech API")}}{{SeeCompatTable}}

+ +

Die SpeechSynthesis-Schnittstelle der Web Speech API ist die Controller-Schnittstelle für den Sprachdienst. Sie kann genutzt werden um Informationen über die Synthesestimmen, die auf dem Gerät verfügbar sind, zu erhalten. Außerdem um die Sprache zu starten, zu pausieren und andere Befehle auszuführen.

+ +

Eigenschaften

+ +

SpeechSynthesis erbt ebenfalls Eigenschaften seiner Elternschnittstelle, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.paused")}} {{readonlyinline}}
+
Ein {{domxref("Boolean")}} der true zurückgibt, wenn das SpeechSynthesis-Objekt sich im pausierten Zustand befindet.
+
{{domxref("SpeechSynthesis.pending")}} {{readonlyinline}}
+
Ein {{domxref("Boolean")}} der true zurückgibt, wenn die Äußerungen-Warteschlange bisher ungesprochene Äußerungen enthält.
+
{{domxref("SpeechSynthesis.speaking")}} {{readonlyinline}}
+
Ein {{domxref("Boolean")}} der true zurückgibt, wenn eine Äußerung aktuell gesprochen wird — auch wenn SpeechSynthesis sich aktuell im pausierten Zustand befindet.
+
+ +

Event-Handler

+ +
+
{{domxref("SpeechSynthesis.onvoiceschanged")}}
+
Wird ausgelöst, wenn sich die Liste von {{domxref("SpeechSynthesisVoice")}}-Objekten, die von der {{domxref("SpeechSynthesis.getVoices()")}}-Methode zurückgegeben würde, geändert hat.
+
+ +

Methoden

+ +

SpeechSynthesis erbt ebenfalls Methoden von seiner Elternschnittstelle, {{domxref("EventTarget")}}.

+ +
+
{{domxref("SpeechSynthesis.cancel()")}}
+
Entfernt alle Äußerungen aus der Äußerungen-Warteschlange.
+
{{domxref("SpeechSynthesis.getVoices()")}}
+
Gibt eine Liste von {{domxref("SpeechSynthesisVoice")}}-Objecten zurück die alle verfügbaren Stimmen auf dem aktuellen Gerät repräsentiert.
+
{{domxref("SpeechSynthesis.pause()")}}
+
Versetzt das SpeechSynthesis-Objekt in den pausierten Zustand.
+
{{domxref("SpeechSynthesis.resume()")}}
+
Versetzt das SpeechSynthesis-Object in den nicht-pausierten Zustand: setzt es fort, wenn es bereits pausiert war.
+
{{domxref("SpeechSynthesis.speak()")}}
+
Fügt eine {{domxref("SpeechSynthesisUtterance", "Äußerung")}} Äußerung zur Äußerungen-Warteschlange hinzu; sie wird gesprochen, wenn alle anderen davor eingereihten Äußerungen fertig gesprochen wurden.
+
+ +

Beispiele

+ +

In our basic Speech synthesiser demo, we first grab a reference to the SpeechSynthesis controller using window.speechSynthesis. After defining some necessary variables, we retrieve a list of the voices available using {{domxref("SpeechSynthesis.getVoices()")}} and populate a select menu with them so the user can choose what voice they want.

+ +

Inside the inputForm.onsubmit handler, we stop the form submitting with preventDefault(),  create a new {{domxref("SpeechSynthesisUtterance")}} instance containing the text from the text {{htmlelement("input")}}, set the utterance's voice to the voice selected in the {{htmlelement("select")}} element, and start the utterance speaking via the {{domxref("SpeechSynthesis.speak()")}} method.

+ +
var synth = window.speechSynthesis;
+
+var inputForm = document.querySelector('form');
+var inputTxt = document.querySelector('.txt');
+var voiceSelect = document.querySelector('select');
+
+var pitch = document.querySelector('#pitch');
+var pitchValue = document.querySelector('.pitch-value');
+var rate = document.querySelector('#rate');
+var rateValue = document.querySelector('.rate-value');
+
+var voices = [];
+
+function populateVoiceList() {
+  voices = synth.getVoices();
+
+  for(i = 0; i < voices.length ; i++) {
+    var option = document.createElement('option');
+    option.textContent = voices[i].name + ' (' + voices[i].lang + ')';
+
+    if(voices[i].default) {
+      option.textContent += ' -- DEFAULT';
+    }
+
+    option.setAttribute('data-lang', voices[i].lang);
+    option.setAttribute('data-name', voices[i].name);
+    voiceSelect.appendChild(option);
+  }
+}
+
+populateVoiceList();
+if (speechSynthesis.onvoiceschanged !== undefined) {
+  speechSynthesis.onvoiceschanged = populateVoiceList;
+}
+
+inputForm.onsubmit = function(event) {
+  event.preventDefault();
+
+  var utterThis = new SpeechSynthesisUtterance(inputTxt.value);
+  var selectedOption = voiceSelect.selectedOptions[0].getAttribute('data-name');
+  for(i = 0; i < voices.length ; i++) {
+    if(voices[i].name === selectedOption) {
+      utterThis.voice = voices[i];
+    }
+  }
+  utterThis.pitch = pitch.value;
+  utterThis.rate = rate.value;
+  synth.speak(utterThis);
+
+  inputTxt.blur();
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Speech API', '#tts-section', 'SpeechSynthesis')}}{{Spec2('Web Speech API')}} 
+ +

Browserkompatibilität

+ +
+ + +

{{Compat("api.SpeechSynthesis")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/storage/clear/index.html b/files/de/web/api/storage/clear/index.html new file mode 100644 index 0000000000..5e6c6d5678 --- /dev/null +++ b/files/de/web/api/storage/clear/index.html @@ -0,0 +1,61 @@ +--- +title: Storage.clear() +slug: Web/API/Storage/clear +tags: + - API Methode Storage +translation_of: Web/API/Storage/clear +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode clear() der {{domxref("Storage")}}-Schnittstelle löscht sämtliche Datensätze des Objekts.

+ +

Syntax

+ +
storage.clear();
+ +

Rückgabewert

+ +

{{jsxref("undefined")}}.

+ +

Beispiele

+ +

Die folgende Funktion speichert drei Datensätze und löscht sie abschließend mit clear().

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'miGato.png');
+
+  localStorage.clear();
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-clear', 'Storage.clear')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.clear")}}

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/getitem/index.html b/files/de/web/api/storage/getitem/index.html new file mode 100644 index 0000000000..364c3cbc83 --- /dev/null +++ b/files/de/web/api/storage/getitem/index.html @@ -0,0 +1,78 @@ +--- +title: Storage.getItem() +slug: Web/API/Storage/getItem +tags: + - API Methode Storage +translation_of: Web/API/Storage/getItem +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode getItem() der {{domxref("Storage")}}-Schnittstelle gibt bei Nennung des Schlüssels im Parameter keyName den Wert des zugehörigen Datensatzes zurück.

+ +

Syntax

+ +
var aValue = storage.getItem(keyName);
+
+ +

Parameter

+ +
+
keyName
+
Ein {{domxref("DOMString")}}, der den Namen des Schlüssels, dessen Wert ausgelesen werden soll, enthält.
+
+ +

Rückgabewert

+ +

Ein {{domxref("DOMString")}}, der den Wert des Schlüssels enthält. Falls der Schlüssel nicht existiert, wird null zurückgegeben.

+ +

Beispiel

+ +

Die folgende Funktion liest drei Datenwerte aus dem lokalen Speicher und verwendet sie, um einen benutzerdefinierten Style auf einer Seite zu setzen.

+ +
function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-getitem', 'Storage.getItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.getItem")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/storage/index.html b/files/de/web/api/storage/index.html new file mode 100644 index 0000000000..7b5d09b041 --- /dev/null +++ b/files/de/web/api/storage/index.html @@ -0,0 +1,161 @@ +--- +title: Storage +slug: Web/API/Storage +translation_of: Web/API/Storage +--- +

{{APIRef("Web Storage API")}}

+ +

Die Storage-Schnittstelle der Web-Storage-API ermöglicht den Zugriff auf einfache Schlüssel-Wert-Datenbanken des Browsers, in denen Daten mit einer Domain verknüpft gespeichert werden können.

+ +

In {{domxref("Window.sessionStorage")}} gespeicherte Daten verfallen mit Ablauf der Sitzung (in der Regel dem Schließen des Browsers), {{domxref("Window.localStorage")}} speichert die Daten hingegen grundsätzlich zeitlich unbegrenzt.

+ +

Eigenschaften

+ +
+
{{domxref("Storage.length")}} {{readonlyInline}}
+
Anzahl der in diesem Storage-Objekt gespeicherten Datensätze.
+
+ +

Methoden

+ +
+
{{domxref("Storage.key()")}}
+
Gibt unter Angabe einer Zahl n den Schlüssel des n-ten Datensatzes zurück.
+
+ +
+
{{domxref("Storage.getItem()")}}
+
Gibt den zum Schlüssel gehörigen Wert zurück.
+
{{domxref("Storage.setItem()")}}
+
Speichert den gegebenen Wert im Storage-Objekt unter dem gegebenen Schlüssel. Ist unter diesem Schlüssel bereits ein Datensatz vorhanden, wird sein Wert mit dem gegebenen überschrieben.
+
{{domxref("Storage.removeItem()")}}
+
Löscht den Datensatz des gegebenen Schlüssels.
+
{{domxref("Storage.clear()")}}
+
Löscht sämtliche Datensätze des Storage-Objekts.
+
+ +

Beispiele

+ +

In diesem Beispiel wird auf das Storage-Objekt localStorage zugegriffen.

+ +

Zuerst wird mit !localStorage.getItem('bgcolor') geprüft, ob das Objekt keinen Datensatz namens bgcolor enthält. Ist der Datensatz bgcolor nicht vorhanden, wird populateStorage() aufgerufen, um Werte aus der Seite auszulesen und mittels {{domxref("Storage.setItem()")}} im Storage-Objekt zu speichern.
+ Anschließend folgt der Aufruf der Funktion setStyles(), die alle Daten mittels {{domxref("Storage.getItem()")}} ausliest und die Darstellung der Seite entsprechend ändert.
+  

+ +
if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+}
+setStyles();
+
+function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+}
+
+function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}
+ +
+

Anmerkung: Dieses Beispiel kann unter Web Storage Demo ausprobiert werden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Storage', '#the-storage-interface', 'Storage')}}{{Spec2('Web Storage')}} 
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}8113.2[1]
+
+ +

[1] Seit iOS 5.1 speichert Safari Mobile in localStorage abgelegte Daten im Cache-Verzeichnis. Dieses wird in unregelmäßigen Abständen vom Betriebssystem teilweise geleert, spätestens jedoch, sobald nur noch wenig Speicherplatz zur Verfügung steht.
+ Desweiteren verhindert der private Modus von Safari Mobile jegliche Nutzung von localStorage.

+ +

Die Speicherkapazität von localStorage und sessionStorage. unterscheidet sich von Browser zu Browser (siehe diese detailierte Aufstellung der Speicherkapazitäten für verschiedene Browser).

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/key/index.html b/files/de/web/api/storage/key/index.html new file mode 100644 index 0000000000..65e56c9ec0 --- /dev/null +++ b/files/de/web/api/storage/key/index.html @@ -0,0 +1,75 @@ +--- +title: Storage.key() +slug: Web/API/Storage/key +tags: + - API Methode Storage +translation_of: Web/API/Storage/key +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode key() der {{domxref("Storage")}}-Schnittstelle gibt durch Übergabe des Parameters n den Schlüssel des n-ten Datensatzes zurück.
+ Die Reihenfolge der Schlüssel folgt keiner Vorgabe und hängt alleine vom Browser ab.

+ +

Syntax

+ +
var aKeyName = storage.key(index);
+ +

Parameter

+ +
+
index
+
Ein Integer, der die Position des gewünschten Schlüssels bestimmt. Die Nummerierung beginnt bei 0.
+
+ +

Rückgabewert

+ +

Ein {{domxref("DOMString")}} mit dem Namen des Schlüssels.

+ +

Beispiele

+ +

Die folgende Funktion liest in einer Schleife für jeden Datensatz den Schlüssel und übergibt diesen an die Funktion callback():

+ +
function forEachKey(callback) {
+  for (var i = 0; i < localStorage.length; i++) {
+    callback(localStorage.key(i));
+  }
+}
+ +

Nachfolgend wird in einer Schleife zu jedem Datensatz erst der Schlüssel, dann mit dem Schlüssel der Wert gelesen und dieser in der Konsole ausgegeben.

+ +
for (var i = 0; i < localStorage.length; i++) {
+   var key = localStorage.key(i);
+   var value = localStorage.getItem(key);
+   console.log(value);
+}
+ +
+

Hinweis: Weitere Beispiele sind in der Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusComment
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-key', 'Storage.key')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.key")}}

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/length/index.html b/files/de/web/api/storage/length/index.html new file mode 100644 index 0000000000..767ef0c21b --- /dev/null +++ b/files/de/web/api/storage/length/index.html @@ -0,0 +1,63 @@ +--- +title: Storage.length +slug: Web/API/Storage/length +tags: + - API Eigenschaft Storage +translation_of: Web/API/Storage/length +--- +

{{APIRef("Web Storage API")}}

+ +

Die length-Eigenschaft der {{domxref("Storage")}}-Schnittstelle enthält die Anzahl der im Storage-Objekt gespeicherten Datensätze.

+ +

Syntax

+ +
var aLength = Storage.length;
+ +

Rückgabewert

+ +

Ein Integer.

+ +

Beispiel

+ +

Die folgende Funktion fügt drei Datensätze hinzu und liest abschließend die Anzahl der vorhandenen Datensätze:

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'yellow');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'cats.png');
+
+  localStorage.length; // sollte 3 zurückgeben
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-length', 'Storage.length')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.length")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/storage/removeitem/index.html b/files/de/web/api/storage/removeitem/index.html new file mode 100644 index 0000000000..6b180f52db --- /dev/null +++ b/files/de/web/api/storage/removeitem/index.html @@ -0,0 +1,68 @@ +--- +title: Storage.removeItem() +slug: Web/API/Storage/removeItem +tags: + - API Methode Storage Speicher +translation_of: Web/API/Storage/removeItem +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode removeItem() der {{domxref("Storage")}}-Schnittstelle löscht den im Parameter keyName benannten Datensatz aus dem Speicher. Ist kein Datensatz unter diesem Schlüssel vorhanden, tut diese Funktion nichts.

+ +

Syntax

+ +
storage.removeItem(keyName);
+ +

Parameter

+ +
+
keyName
+
Ein {{domxref("DOMString")}}, der den Schlüssel des zu löschenden Datensatzes enthält.
+
+ +

Rückgabewert

+ +

Keiner.

+ +

Beispiel

+ +

Die nachfolgende Funktion speichert drei Datensätze und löscht abschließend den Datensatz mit dem Schlüssel image.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+
+  localStorage.removeItem('image');
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-removeitem', 'Storage.removeItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Storage.removeItem")}}

+ +

Siehe auch

+ +

Using the Web Storage API

diff --git a/files/de/web/api/storage/setitem/index.html b/files/de/web/api/storage/setitem/index.html new file mode 100644 index 0000000000..94145670a9 --- /dev/null +++ b/files/de/web/api/storage/setitem/index.html @@ -0,0 +1,146 @@ +--- +title: Storage.setItem() +slug: Web/API/Storage/setItem +tags: + - API + - Méthode + - Referenz + - Speicher + - Webspeicher + - localStorage + - sessionStorage +translation_of: Web/API/Storage/setItem +--- +

{{APIRef("Web Storage API")}}

+ +

Die Methode setItem() der {{domxref("Storage")}}-Schnittstelle fügt das gegebene Schlüssel-Wert-Paar zum Speicher hinzu oder überschreibt ein bereits unter diesem Schlüssel im Speicher vorhandenes.

+ +

Syntax

+ +
storage.setItem(keyName, keyValue);
+ +

Parameter

+ +
+
keyName
+
Ein {{domxref("DOMString")}} mit dem Schlüssel des Datensatzes, der erstellt oder überschrieben werden soll.
+
keyValue
+
Ein {{domxref("DOMString")}} mit dem Wert, der in den mit keyName benannten Datensatz geschrieben werden soll.
+
+ +

Rückgabewert

+ +

Keiner.

+ +

Fehler

+ +

setItem() kann bei vollem Speicher eine Exception auslösen. Insbesondere im mobilen Safari (ab iOS 5) wird sie immer ausgelöst, falls der Nutzer sich im privaten Modus befindet, da Safari in diesem Modus das Speicherkontingent auf 0 Bytes setzt. Andere Browser nutzen für den privaten Modus einen separaten Daten-Container.
+ Deshalb sollte immer sichergestellt sein, dass ein möglicher Fehler eingeplant und entsprechend behandelt wird.

+ +

Beispiel

+ +

Die folgende Funktion erstellt drei Datensätze im localStorage-Objekt.

+ +
function populateStorage() {
+  localStorage.setItem('bgcolor', 'red');
+  localStorage.setItem('font', 'Helvetica');
+  localStorage.setItem('image', 'myCat.png');
+}
+ +
+

Hinweis: Weitere Beispiele sind im Web-Storage-Demo zu finden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'webstorage.html#dom-storage-setitem', 'Storage.setItem')}}{{Spec2('HTML WHATWG')}} 
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage4{{CompatVersionUnknown}}3.5810.504
sessionStorage5{{CompatUnknown}}2810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}{{ CompatUnknown }}811iOS 3.2
+
+ +

Alle Browser haben verschiedene Kapazitäten für localStorage und sessionStorage. Hier gibt es eine detaillierten Übersicht der Kapazitäten verschiedener Browser.

+ +
+

Hinweis: Seit iOS 5.1, speichert Safari Mobile localStorage-Daten im Cache-Ordner, der gelegentlich durch das Betriebssystem geleert wird, insbesondere falls nur noch wenig freier Speicher zur Verfügung steht.

+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/transferable/index.html b/files/de/web/api/transferable/index.html new file mode 100644 index 0000000000..20ed3dfccd --- /dev/null +++ b/files/de/web/api/transferable/index.html @@ -0,0 +1,122 @@ +--- +title: Transferable +slug: Web/API/Transferable +tags: + - API + - Interface + - Reference + - Web Workers + - postMessage +translation_of: Web/API/Transferable +--- +

{{ ApiRef("HTML DOM") }}

+ +

Das Transferable Interface stellt ein Objekt dar, welches zwischen unterschiedlichen Ausführungskontexten, wie zum Beispiel dem main thread und Web Workers, ausgetauscht werden kann.

+ +

Es existiert von dem Interface keine Instanz und kein Objekt. Ebenso definiert es keinerlei Eigenschaften und Methoden. Zweck des Transferable Interface ist lediglich die Möglichkeit der Kennzeichnung von Objekten für die spezifische Situation eines Transfers und Austauschs etwa zwischen Anwendung und {{domxref("Worker")}} via {{domxref("Worker.postMessage()")}}.

+ +

Die Typen {{jsxref("ArrayBuffer")}}, {{domxref("MessagePort")}} and {{domxref("ImageBitmap")}} implementieren dieses Interface.

+ +

Properties

+ +

Das Transferable Interface implementiert und erbt keine spezifischen Eigenschaften.

+ +

Methods

+ +

Das Transferable Interface implementiert und erbt keine spezifischen Methoden.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML WHATWG')}}Keine Änderung von {{SpecName("HTML5 W3C")}}, wenngleich das neue {{domxref("CanvasProxy")}} auch Transferable implementiert.
{{SpecName('HTML5 W3C', "infrastructure.html#transferable-objects", "Transferable")}}{{Spec2('HTML5 W3C')}}Initiale Definition.
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
MessagePort{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}10.0 [1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
MessagePort{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 10 only accepts a single {{domxref("Transferable")}} object as parameter, but not an array.

+ +

See also

+ + diff --git a/files/de/web/api/url/createobjecturl/index.html b/files/de/web/api/url/createobjecturl/index.html new file mode 100644 index 0000000000..f3668e7f70 --- /dev/null +++ b/files/de/web/api/url/createobjecturl/index.html @@ -0,0 +1,139 @@ +--- +title: URL.createObjectURL() +slug: Web/API/URL/createObjectURL +tags: + - API + - Experimentell + - Méthode + - URL + - URL API +translation_of: Web/API/URL/createObjectURL +--- +

{{ApiRef("URL API")}}{{SeeCompatTable}}

+ +

Zusammenfassung

+ +

Die statische Methode URL.createObjectURL() erzeugt einen {{domxref("DOMString")}}, welcher eine URL enthält, die das übergebene Objekt repräsentiert. Die Gültigkeitsdauer der URL ist von dem Dokumentobjekt {{domxref("document")}} abhängig, in dessen Fenster sie erzeugt wurde. Die neue Objekt-URL repräsentiert das angegebene {{domxref("File")}}- bzw. {{domxref("Blob")}}-Objekt.

+ +

Syntax

+ +
objectURL = URL.createObjectURL(blob);
+
+ +

Parameter

+ +
+
blob
+
+ +
+
Ist ein {{domxref("File")}}-Objekt oder ein {{domxref("Blob")}}-Objekt, für das eine URL generiert werden soll.
+
+ + + +

Beispiele

+ +

Siehe "Using object URLs to display images".

+ +

Anmerkungen

+ +

Immer, wenn createObjectURL() aufgerufen wird, wird eine neue Objekt-URL erzeugt, auch wenn schon eine URL für das gleiche Objekt existiert. Jede dieser URLs muss durch einen Aufruf von {{domxref("URL.revokeObjectURL()")}}  wieder freigegeben werden, sofern sie nicht mehr benötigt wird. Wenn das Dokument geschlossen wird, gibt der Browser die URLs automatisch wieder frei. Für eine optimale Performance and Speichernutzung sollten die URLs freigegeben werden, sofern sichergestellt werden kann, dass sie nicht mehr benötigt werden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('File API', '#dfn-createObjectURL', 'URL')}}{{Spec2('File API')}}Erste Definition.
+ +

Browserkompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung8 mit vorangestelltem webkitURL für URL
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(2)}}{{CompatIE(10)}}{{CompatOpera(15)}}{{CompatSafari(6)}} mit vorangestelltem webkitURL für URL
+ {{CompatSafari(7)}}
In a {{ domxref("Worker", "Web Worker") }}10 mit vorangestelltem webkitURL für URL
+ {{CompatChrome(23)}}		{{CompatGeckoDesktop(21)}}{{CompatIE(11)}}{{CompatOpera(15)}}{{CompatSafari(6)}} mit vorangestelltem webkitURL für URL
+ {{CompatSafari(7)}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChrome for AndroidAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support18 mit vorangestelltem webkitURL für URL4.0 mit vorangestelltem webkitURL für URL{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} mit vorangestelltem webkitURL für URL6.0 mit vorangestelltem webkitURL für URL
In einem {{ domxref("Worker", "Web Worker") }}18 mit vorangestelltem webkitURL für URL{{CompatVersionUnknown}} mit vorangestelltem webkitURL für URL{{CompatGeckoMobile(14)}}{{CompatUnknown}}{{CompatOpera(15)}} mit vorangestelltem webkitURL für URL6.0 mit vorangestelltem webkitURL für URL
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/url/index.html b/files/de/web/api/url/index.html new file mode 100644 index 0000000000..6f1bb53686 --- /dev/null +++ b/files/de/web/api/url/index.html @@ -0,0 +1,222 @@ +--- +title: URL +slug: Web/API/URL +tags: + - API + - Experimental + - NeedsTranslation + - TopicStub + - URL API +translation_of: Web/API/URL +--- +
{{ApiRef("URL API")}} {{SeeCompatTable}}
+ +

The URL interface represent an object providing static methods used for creating object URLs.

+ +

When using a user agent where no constructor has been implemented yet, it is possible to access such an object using the {{domxref("Window.URL")}} properties (prefixed with Webkit-based browser as Window.webkitURL).

+ +

Properties

+ +

Implements properties defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.href")}}
+
Is a {{domxref("DOMString")}} containing the whole URL.
+
{{domxref("URLUtils.protocol")}}
+
Is a {{domxref("DOMString")}} containing the protocol scheme of the URL, including the final ':'.
+
{{domxref("URLUtils.host")}}
+
Is a {{domxref("DOMString")}} containing the host, that is the hostname, a ':', and the port of the URL.
+
{{domxref("URLUtils.hostname")}}
+
Is a {{domxref("DOMString")}} containing the domain of the URL.
+
{{domxref("URLUtils.port")}}
+
Is a {{domxref("DOMString")}} containing the port number of the URL.
+
{{domxref("URLUtils.pathname")}}
+
Is a {{domxref("DOMString")}} containing an initial '/' followed by the path of the URL.
+
{{domxref("URLUtils.search")}}
+
Is a {{domxref("DOMString")}} containing a '?' followed by the parameters of the URL.
+
{{domxref("URLUtils.hash")}}
+
Is a {{domxref("DOMString")}} containing a '#' followed by the fragment identifier of the URL.
+
{{domxref("URLUtils.username")}}
+
Is a {{domxref("DOMString")}} containing the username specified before the domain name.
+
{{domxref("URLUtils.password")}}
+
Is a {{domxref("DOMString")}} containing the password specified before the domain name.
+
{{domxref("URLUtils.origin")}} {{readonlyInline}}
+
Returns a {{domxref("DOMString")}} containing the origin of the URL, that is its scheme, its domain and its port.
+
+ +
+
{{domxref("URLUtils.searchParams")}}
+
Returns a {{domxref("URLSearchParams")}} object allowing to access the GET query arguments contained in the URL.
+
+ +

Constructor

+ +
+
{{domxref("URL.URL", "URL()")}}
+
Creates and return a URL object composed from the given parameters.
+
+ +

Methods

+ +

The URL interface implements methods defined in {{domxref("URLUtils")}}.

+ +
+
{{domxref("URLUtils.toString()")}}
+
Returns a {{domxref("DOMString")}} containing the whole URL. It is a synonym for {{domxref("URLUtils.href")}}, though it can't be used to modify the value.
+
+ +

Static methods

+ +
+
{{ domxref("URL.createObjectURL()") }}
+
Returns a {{domxref("DOMString")}} containing a unique blob URL, that is a URL with blob: as its scheme, followed by an opaque string uniquely identifying the object in the browser.
+
{{ domxref("URL.revokeObjectURL()") }}
+
Revokes an object URL previously created using {{ domxref("URL.createObjectURL()") }}.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('File API', '#creating-revoking', 'URL')}}{{Spec2('File API')}}Added the static methods URL.createObjectURL() and URL.revokeObjectURL().
{{SpecName('URL', '#api', 'Node')}}{{Spec2('URL')}}Initial definition (implements URLUtils).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support8.0 as webkitURL
+ 35		{{CompatGeckoDesktop("2.0")}} (non-standard name) [1]
+ {{CompatGeckoDesktop("19.0")}}		10.015.0 as webkitURL
+ {{CompatVersionUnknown}}		6.0 as webkitURL
+ 7.0
URLUtils properties32{{CompatVersionUnknown}}{{CompatUnknown}}19{{CompatVersionUnknown}}
username, password, and origin32{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
protocol, host, hostname, port, href, pathname, search, hash32{{CompatGeckoDesktop("22.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
searchParams{{CompatNo}}{{CompatGeckoDesktop("29.0")}}{{CompatUnknown}}19{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}as webkitURL{{CompatGeckoMobile("14.0")}}(non-standard name) [1]
+ {{CompatGeckoMobile("19.0")}}		{{CompatVersionUnknown}}15.0 as webkitURL +

6.0 as webkitURL

+ +

 

+
URLUtils {{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
username, password, href, and origin{{CompatUnknown}}{{CompatGeckoDesktop("26.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko supported this interface with the non-standard nsIDOMMozURLProperty internal type. As the only to access such an object was through {{domxref("window.URL")}}, in practice, this didn't make any difference.

+ +

Chrome Code - Scope Availability

+ +

To use from chrome code, JSM and Bootstrap scope, you have to import it like this:

+ +
Cu.importGlobalProperties(['URL']);
+
+ +

URL is available in Worker scopes.

+ +

See also

+ + diff --git a/files/de/web/api/url/protocol/index.html b/files/de/web/api/url/protocol/index.html new file mode 100644 index 0000000000..08d4ad6b6f --- /dev/null +++ b/files/de/web/api/url/protocol/index.html @@ -0,0 +1,61 @@ +--- +title: URL.protocol +slug: Web/API/URL/protocol +tags: + - API + - Property + - Protocols + - Reference + - URL +translation_of: Web/API/URL/protocol +--- +
{{ApiRef("URL API")}}
+ +

Die protocol Eigenschaft der {{domxref("URL")}} Schnittstelle ist ein {{domxref("USVString")}} der das Protokollschema der URL, einschließlich des finalen ':' darstellt.

+ +

{{AvailableInWorkers}}

+ +

Syntax

+ +
string = object.protocol;
+object.protocol = string;
+
+ +

Wert

+ +

Ein {{domxref("USVString")}}.

+ +

Beispiele

+ +
var url = new URL('https://developer.mozilla.org/en-US/docs/Web/API/URL/protocol');
+var result = url.protocol; // Gibt "https:" zurück.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('URL', '#dom-url-protocol', 'protocol')}}{{Spec2('URL')}}Erste Definition.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.URL.protocol")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/urlsearchparams/index.html b/files/de/web/api/urlsearchparams/index.html new file mode 100644 index 0000000000..3c635d180d --- /dev/null +++ b/files/de/web/api/urlsearchparams/index.html @@ -0,0 +1,211 @@ +--- +title: URLSearchParams +slug: Web/API/URLSearchParams +tags: + - API + - Experimentell + - Interface + - Referenz + - URL API +translation_of: Web/API/URLSearchParams +--- +

{{ApiRef("URL API")}}

+ +

Das URLSearchParams Interface definiert Hilfsmethoden um mit dem Query-String einer URL zu arbeiten.

+ +

Ein Objekt, welches URLSearchParams implementiert, kann auch direkt in einem {{jsxref("Statements/for...of", "for...of")}} Konstrukt genutzt werden, anstatt {{domxref('URLSearchParams.entries()', 'entries()')}}: for (var p of mySearchParams) ist äquivalent zu for (var p of mySearchParams.entries()).

+ +

Konstruktor

+ +
+
{{domxref("URLSearchParams.URLSearchParams", 'URLSearchParams()')}}
+
Konstruktor erzeugt ein URLSearchParams Objekt von einem Query-String.
+
+ +

Eigenschaften

+ +

Dieses Interface erbt keine Eigenschaften.

+ +

Methoden

+ +

Dieses Interface erbt keine Methoden.

+ +
+
{{domxref("URLSearchParams.append()")}}
+
Hängt ein Schlüssel/Wert - Paar an den Query-String.
+
{{domxref("URLSearchParams.delete()")}}
+
Löscht einen Schlüssel und den zugehörigen Wert aus dem Query-String.
+
{{domxref("URLSearchParams.entries()")}}
+
Gibt einen {{jsxref("Iteration_protocols","Iterator")}} über alle Schlüssel/Wert - Paare im Query-String.
+
{{domxref("URLSearchParams.get()")}}
+
Gibt den ersten Wert, der im Query-String mit einem Schlüssel assoziiert ist.
+
{{domxref("URLSearchParams.getAll()")}}
+
Gibt alle Werte, die im Query-String mit einem Schlüssel assoziiert sind.
+
{{domxref("URLSearchParams.has()")}}
+
Gibt einen {{jsxref("Boolean")}}, der anzeigt ob ein Schlüssel im Query-String vorkommt.
+
{{domxref("URLSearchParams.keys()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Schlüssel im Query-String.
+
{{domxref("URLSearchParams.set()")}}
+
Setzt den Wert eines Schlüssels. Wenn der Schlüssel mehrfach im Query-String vorkommt, werden die Restlichen gelöscht.
+
{{domxref("URLSearchParams.sort()")}}
+
Sortiert alle Schlüssel/Wert Paare, nach dem Schlüssel.
+
Sorts all key/value pairs, if any, by their keys.
+
{{domxref("URLSearchParams.toString()")}}
+
Gibt den Query-String, in der passenden Form um in einer URL einzusetzen.
+
{{domxref("URLSearchParams.values()")}}
+
Gibt einen {{jsxref("Iteration_protocols", "Iterator")}} über alle Werte im Query-String.
+
+ +

Beispiel

+ +
var paramsString = "q=URLUtils.searchParams&topic=api"
+var searchParams = new URLSearchParams(paramsString);
+
+//Iteriert über die Suchparameter
+for (let p of searchParams) {
+  console.log(p);
+}
+
+searchParams.has("topic") === true; // true
+searchParams.get("topic") === "api"; // true
+searchParams.getAll("topic"); // ["api"]
+searchParams.get("foo") === null; // true
+searchParams.append("topic", "webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=api&topic=webdev"
+searchParams.set("topic", "More webdev");
+searchParams.toString(); // "q=URLUtils.searchParams&topic=More+webdev"
+searchParams.delete("topic");
+searchParams.toString(); // "q=URLUtils.searchParams"
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('URL', '#urlsearchparams', "URLSearchParams")}}{{Spec2('URL')}}Initial definition.
+ +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome(49)}}{{CompatGeckoDesktop("29.0")}}{{CompatNo}}3610.1
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatGeckoDesktop("44.0")}}{{CompatNo}}36{{CompatUnknown}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatGeckoDesktop("53.0")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatNo}}{{CompatGeckoDesktop("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("29.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
entries(), keys(), values(), and support of for...of{{CompatChrome(49)}}{{CompatChrome(49)}}{{CompatGeckoMobile("44.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
USVString for constructor init object{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("53.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
Record for constructor init object{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile("54.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Verweise

+ + + +
+
diff --git a/files/de/web/api/usvstring/index.html b/files/de/web/api/usvstring/index.html new file mode 100644 index 0000000000..4021cc4cc8 --- /dev/null +++ b/files/de/web/api/usvstring/index.html @@ -0,0 +1,42 @@ +--- +title: USVString +slug: Web/API/USVString +tags: + - API + - DOM + - DOM Referenz + - Referenz + - String + - WebIDL +translation_of: Web/API/USVString +--- +

{{APIRef("DOM")}}

+ +

Ein USVString entspricht der Menge aller möglichen Folgen von Unicode-Skalarwerten. USVString konvertiert zu String, wenn es in JavaScript zurückgegeben wird; Es wird allgemein nur für APIs verwendet, die Text verarbeiten und einen String mit Unicode-Skalarwerten benötigen. USVString ist gleich zu DOMString, mit der Ausnahme, dass USVString ungepaarte Ersatzcodepoints nicht erlaubt. Ungepaarte Ersatzcodepoints in einem USVString werden vom Browser zum Unicode 'Ersatzzeichen' U+FFFD konvertiert.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebIDL', '#idl-USVString', 'USVString')}}{{Spec2('WebIDL')}}Initiale Definition.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/vollbild_api/index.html b/files/de/web/api/vollbild_api/index.html new file mode 100644 index 0000000000..1ddce4c572 --- /dev/null +++ b/files/de/web/api/vollbild_api/index.html @@ -0,0 +1,305 @@ +--- +title: Vollbild API +slug: Web/API/Vollbild_API +tags: + - API + - DOM + - JS + - Tutorial + - Vollbild API +translation_of: Web/API/Fullscreen_API +--- +

{{DefaultAPISidebar("Fullscreen API")}}

+ +

Die Vollbild-API bietet einen einfachen Weg, um Webinhalte auf dem gesamten Bildschirm des Nutzers anzuzeigen. Der Browser kann einfach angewiesen werden, Elemente und, falls vorhanden, deren Kinder den gesamten Bildschirm einnehmen zu lassen, wodurch jegliche andere Inhalte vorübergehend ausgeblendet werden.

+ +
+

Momentan benutzen nicht alle Browser die Version der API ohne Präfixe. Siehe Vendor Präfixe für Unterschiede zwischen Präfixen und Namen. 

+ +

Für eine universelle Lösung des Problems siehe Fscreen.

+
+ +

Aktivieren des Vollbildmodus

+ +

Wenn sie ein Element gefunden haben, welches Sie im Vollbildmodus anzeigen möchten (etwa ein {{ HTMLElement("video") }}), wir der Vollbildmodus einfach durch den Aufruf der {{ domxref("Element.requestFullscreen()") }}-Methode gestartet.

+ +

Nehmen wir dieses {{ HTMLElement("video") }}-Element als Beispiel:

+ +
<video controls id="myvideo">
+  <source src="somevideo.webm"></source>
+  <source src="somevideo.mp4"></source>
+</video>
+
+ +

Wir können dieses Video mit folgendem Skript in den Vollbildmodus versetzen:

+ +
var elem = document.getElementById("myvideo");
+if (elem.requestFullscreen) {
+  elem.requestFullscreen();
+}
+
+ +

Anzeige-Schwierigkeiten

+ +

An dieser Stelle lohnt es sich, einen wichtigen Unterschied zwischen Gecko und WebKit aufzuzeigen: Gecko fügt automatisch CSS-Regeln zum betroffenen Element hinzu, damit es den ganzen Bildschirm einnimmt: "width: 100%; height: 100%". WebKit tut dies allerdings nicht; stattdessen wird das Vollbild-Element in der selben Größe zentriert vor einem schwarzen Hintergrund dargestellt. Um das gleich Vollbild-Verhalten in WebKit zu erhalten, müssen Sie selbst eine "width: 100%; height: 100%;"-CSS-Regel zum entsprechenden Element hinzufügen:

+ +
#myvideo:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+ +

Andererseits, wenn Sie stattdessen versuchen, das WebKit-Verhalten auf Gecko zu erreichen, müssen sie das Element, das präsentiert werden soll, in einem anderen Element platzieren, welches sie stattdessen in den Vollbild-Modus versetzen. Dann können sie CSS-Regeln verwenden, um das innere Element so zu layouten, wie Sie wünschen.

+ +

Benachrichtigung

+ +

Wenn der Vollbild-Modus erfolgreich gestartet wird, erhält das document, welches das entsprechende Element enthält ein {{ event("fullscreenchange") }}-Event. Wenn der Vollbild-Modus wieder verlassen wird, erhält das document wiederum ein {{ event("fullscreenchange") }}-Event. Beachten Sie jedoch, dass das {{ event("fullscreenchange") }}-Event selbst keine Informationen darüber bereitstellt, ob das document in oder aus den Vollbild-Modus wechselt. Stattdessen muss überprüft werden, ob das Attribut {{ domxref("document.fullscreenElement", "fullscreenElement") }}, des document nicht null ist. In diesem Fall befindet sich der Browser im Vollbild-Modus.

+ +

Wenn die Vollbild-Anfrage scheitert

+ +

Es ist nicht garantiert, dass der Wechsel in den Vollbild-Modus möglich ist. {{ HTMLElement("iframe") }}-Elements etwa haben das {{ HTMLAttrXRef("allowfullscreen", "iframe") }}-Attribut, um ihrem Inhalt zu erlauben, in den Vollbild-Modus zu wechseln. Zusätzlich gibt es bestimmte Arten von Inhalten, wie etwa windowed plug-ins, welche nicht im Vollbild-Modus angezeigt werden können. Wenn versucht wird, ein Element, welches nicht im Vollbild-Modus dargestellt werden kann (oder ein Eltern- bzw. Kind-Knoten eines solchen Elements), wird dies nicht funktionieren. Stattdessen wird das Element, welches den Vollbild-Modus angefragt hat, ein mozfullscreenerror-Event erhalten. Wenn eine Vollbild-Anfrage scheitert, wird Firefox eine Fehlermeldung auf der Web-Konsole ausgeben, welche erklärt, warum die Anfrage fehlgeschlagen ist. In Chrome und neueren Versionen von Opera werden allerdings keine solchen Warnungen produziert.

+ +
+

Hinweis: Vollbild-Anfragen müssen aus einem Event-Handler heraus gestellt werden oder die Anfrage wird abgelehnt. 

+
+ +

Verlassen des Vollbildmodus

+ +

Der Nutzer hat immer die Möglichkeit, selbst den Vollbildmodus zu verlassen; siehe {{ anch("Things your users want to know") }}. Der Vollbildmodus kann aber auch programmatisch mithilfe der  {{domxref("Document.exitFullscreen()")}}-Methode beendet werden.

+ +

Weitere Informationen

+ +

Das {{ domxref("document") }} hält weitere Informationen bereit, welche bei der Entwicklung von Vollbild-Web-Apps hilfreich sein können:

+ +
+
{{ domxref("document.fullscreenElement", "fullscreenElement") }}
+
Das fullscreenElement-Attribut gibt das {{ domxref("element") }} an, welches aktuell im Vollbild-Modus angezeigt wird. Wenn dies nicht null ist, befindet sich das document im Vollbildmodus. Sonst, wenn dieses Attribut null ist, befindet sich das Dokument nicht im Vollbildmodus.
+
{{ domxref("document.fullscreenEnabled", "fullscreenEnabled") }}
+
Das fullscreenEnabled-Attribut gibt an, ob das document aktuell in einem Zustand ist, in welchem der Vollbild-Modus erlaubt ist.
+
+ +

Was die Nutzer wissen wollen

+ +

Sie sollten die Nutzer wissen lassen, dass sie den Vollbildmodus jederzeit mit ESC (oder F11) verlassen können.

+ +

Zusätzlich beendet das Navigieren zu einer anderen Seite oder das Wechseln von Tabs oder Programmen (etwa mit  Alt+Tab) auch den Vollbildmodus.

+ +

Beispiel

+ +

In diesem Beispiel wird ein Video auf einer Webseite dargestellt. Durch drücken von Return oder Enter kann der Nutzer den Vollbildmodus des Videos umschalten.

+ +

Live-Beispiel ansehen

+ +

Watching for the Enter key

+ +

When the page is loaded, this code is run to set up an event listener to watch for the Enter key.

+ +
document.addEventListener("keydown", function(e) {
+  if (e.keyCode == 13) {
+    toggleFullScreen();
+  }
+}, false);
+
+ +

Toggling fullscreen mode

+ +

This code is called when the user hits the Enter key, as seen above.

+ +
function toggleFullScreen() {
+  if (!document.fullscreenElement) {
+      document.documentElement.requestFullscreen();
+  } else {
+    if (document.exitFullscreen) {
+      document.exitFullscreen();
+    }
+  }
+}
+
+ +

This starts by looking at the value of the fullscreenElement attribute on the {{ domxref("document") }} (checking it prefixed with both moz, ms, or webkit). If it's null, the document is currently in windowed mode, so we need to switch to fullscreen mode. Switching to fullscreen mode is done by calling {{ domxref("element.requestFullscreen()") }}.

+ +

If fullscreen mode is already active (fullscreenElement is non-null), we call {{ domxref("document.exitFullscreen()") }}.

+ +

Vendor Präfixe

+ +

For the moment not all browsers are implementing the unprefixed version of the API (for vendor agnostic access to the Fullscreen API you can use Fscreen). Here is the table summarizing the prefixes and name differences between them:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
StandardBlink (Chrome & Opera)Gecko (Firefox)Internet Explorer 11EdgeSafari (WebKit)
{{domxref("Document.fullscreen")}}webkitIsFullScreenmozFullScreen-webkitIsFullScreenwebkitIsFullScreen
{{domxref("Document.fullscreenEnabled")}}webkitFullscreenEnabledmozFullScreenEnabledmsFullscreenEnabledwebkitFullscreenEnabledwebkitFullscreenEnabled
{{domxref("Document.fullscreenElement")}}webkitFullscreenElementmozFullScreenElementmsFullscreenElementwebkitFullscreenElementwebkitFullscreenElement
{{domxref("Document.onfullscreenchange")}}onwebkitfullscreenchangeonmozfullscreenchangeMSFullscreenChangeonwebkitfullscreenchangeonwebkitfullscreenchange
{{domxref("Document.onfullscreenerror")}}onwebkitfullscreenerroronmozfullscreenerrorMSFullscreenErroronwebkitfullscreenerroronwebkitfullscreenerror
{{domxref("Document.exitFullscreen()")}}webkitExitFullscreen()mozCancelFullScreen()msExitFullscreen()webkitExitFullscreen()webkitExitFullscreen()
{{domxref("Element.requestFullscreen()")}}webkitRequestFullscreen()mozRequestFullScreen()msRequestFullscreen()webkitRequestFullscreen()webkitRequestFullscreen()
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("Fullscreen")}}{{Spec2("Fullscreen")}}Initial version.
+ +

Browser Kompatibilität

+ +

All browsers implement this APIs. Nevertheless some implement it with prefixed names with slightly different spelling; e.g., instead of requestFullscreen(), there is MozRequestFullScreen().

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support15 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("9.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.0 {{ property_prefix("-webkit") }}
fullscreenEnabled20 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop("10.0") }} {{ property_prefix("-moz") }}
+ {{CompatGeckoDesktop("47")}} (behind full-screen-api.unprefix.enabled)		11 {{ property_prefix("-ms") }}12.105.1 {{ property_prefix("-webkit") }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChromeEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("9.0") }}{{ property_prefix("-moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
fullscreenEnabled{{ CompatUnknown() }}28 {{ property_prefix("-webkit") }}{{CompatVersionUnknown}}{{ CompatGeckoMobile("10.0") }} {{ property_prefix("moz") }}
+ {{CompatGeckoMobile("47")}} (behind full-screen-api.unprefix.enabled)		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/web_animations_api/index.html b/files/de/web/api/web_animations_api/index.html new file mode 100644 index 0000000000..ad88873dfd --- /dev/null +++ b/files/de/web/api/web_animations_api/index.html @@ -0,0 +1,99 @@ +--- +title: Web Animations API +slug: Web/API/Web_Animations_API +translation_of: Web/API/Web_Animations_API +--- +

{{DefaultAPISidebar("Web Animations")}}{{ SeeCompatTable() }}

+ +
+

Die Web Animations API ermöglicht die Synchronisierung und zeitliche Abstimmung von Änderungen an der Präsentation einer Webseite, d. H. der Animation von DOM-Elementen. Dabei werden zwei Modelle kombiniert: das Timing-Modell und das Animationsmodell.

+
+ +

Konzepte und Verwendung

+ +

Die Web-Animations-API bietet Browsern und Entwicklern eine gemeinsame Sprache, um Animationen auf DOM-Elementen zu beschreiben. Weitere Informationen zu den Konzepten der API und ihrer Verwendung finden Sie unter Verwenden der Web Animations-API.

+ +

Webanimationsschnittstellen

+ +
+
+ +
+
{{domxref("Animation")}}
+
Bietet Steuerelemente zur Wiedergabe und eine Zeitleiste für einen Animationsknoten. Kann ein mit dem {{domxref("KeyframeEffect.KeyframeEffect", "KeyframeEffect()")}} Konstruktor erstelltes Object aufnehmen.
+
{{domxref("KeyframeEffect")}}
+
Beschreibt eine Menge animierbarer Eigenschaften und Werte, die als Keyframes bezeichnet werden, sowie deren Timing-Optionen. Diese können dann mit dem {{domxref("Animation.Animation", "Animation()")}} Konstruktor abgespielt werden. 
+
{{domxref("AnimationTimeline")}}
+
Repräsentiert die Zeitleiste der Animation. Diese Schnittstelle ist zum Definieren von Timeline-Features (geerbt von {{domxref ("DocumentTimeline")}} und zukünftigen Timeline-Objekten) vorhanden, auf die Entwickler nicht selbst zugreifen.
+
{{domxref("AnimationEvent")}}
+
Eigentlich Teil von CSS-Animationen.
+
{{domxref("DocumentTimeline")}}
+
Stellt Animationszeitleisten dar, einschließlich der Standarddokumentzeitleiste (auf die über die Eigenschaft {{domxref ("Document.timeline")}} zugegriffen wird).
+
{{domxref("EffectTiming")}}
+
{{domxref ("Element.animate ()")}}, {{domxref ("KeyframeEffectReadOnly.KeyframeEffectReadOnly ()")}} und {{domxref ("KeyframeEffect.KeyframeEffect ()")}} akzeptieren alle ein optionales Objekt von Timing-Eigenschaften.
+
+ +

Erweiterungen zu anderen Schnittstellen

+ +

 

+ +

Die Web-Animations-API fügt {{domxref ("document")}} und {{domxref ("element")}} einige neue Funktionen hinzu.

+ +

Etweiterungen der Document Schnittstelle

+ +
+
{{domxref("document.timeline")}}
+
Das DocumentTimeline Objekt stellt die Standardzeitleiste des Dokuments dar.
+
{{domxref("document.getAnimations()")}}
+
Gibt ein Array von {{domxref ("Animation")}} - Objekten zurück, die derzeit für Elemente im document wirksam sind.
+
+

Erweiterungen der Element Schnittstelle

+
+
{{domxref("Element.animate()")}}
+
Eine Shortcut-Methode zum Erstellen und Wiedergeben einer Animation für ein Element. Sie gibt die erstellte {{domxref ("Animation")}} Objektinstanz zurück.
+
+ +
+
+ +

Read-Only-Schnittstellen für Web-Animationen

+ +

Die folgenden Schnittstellen sind in der Spezifikation enthalten, z. B. um Features zu definieren, die an mehreren anderen Stellen verwendet werden, oder um als Basis für mehrere Schnittstellen zu dienen, die alle als Werte derselben Eigenschaften verwendet werden können. Du würdest diese nicht direkt in der Entwicklungsarbeit verwenden, aber für Bibliotheksautoren könnte es interessant sein, die Funktionsweise der Technologie zu verstehen, sodass ihre Implementierungen effektiver sein können, oder für Browseringenieure, die eine einfachere Referenz suchen, als die Spezifikation bietet.

+ +
+
{{domxref("AnimationEffectTimingReadOnly")}}
+
Ein dictionary Objekt mit Timing-Eigenschaften, die von der veränderlichen {{domxref ("AnimationEffectTiming")}} - Schnittstelle geerbt werden, die der {{domxref ("KeyframeEffect")}} zugeordnet ist.
+
{{domxref("AnimationEffectReadOnly")}}
+
Defines current and future "Animation Effects" like {{domxref("KeyframeEffect")}}, which can be passed to {{domxref("Animation")}} objects for playing, and {{domxref("KeyframeEffectReadOnly")}} which is used by {{domxref("KeyframeEffect")}} (inherited by CSS Animations and Transitions). All values of {{domxref("Animation.effect")}} are of types based on AnimationEffectReadOnly.
+
{{domxref("KeyframeEffectReadOnly")}}
+
Describes sets of animatable properties and values that can be played using the {{domxref("Animation.Animation", "Animation()")}} constructor, and which are inherited by {{domxref("KeyframeEffect")}}. 
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Web Animations')}}{{Spec2('Web Animations')}}Initial definition
+ +

See also

+ + diff --git a/files/de/web/api/web_storage_api/index.html b/files/de/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..ae3779f420 --- /dev/null +++ b/files/de/web/api/web_storage_api/index.html @@ -0,0 +1,142 @@ +--- +title: Web Storage API +slug: Web/API/Web_Storage_API +translation_of: Web/API/Web_Storage_API +--- +

{{DefaultAPISidebar("Web Storage API")}}

+ +

Die Web Storage API bietet Mechanismen, durch welche Browser in einer weitaus intuitiveren Form Schlüssel-Werte-Paare abspeichern können, als dies bei Cookies der Fall ist.

+ +

Web Storage Konzepte und Verwendung

+ +

Die zwei Mechanismen innerhalb des Web Storage sind wie folgt:

+ + + +

Diese Mechanismen stehen durch die Eigenschaften {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} zur Verfügung (um dies näher zu beschreiben: Zur Unterstützung der Browser implementiert das Window Objekt die Objekte WindowLocalStorage und WindowSessionStorage, welche von localStorage und sessionStorage bereitgestellt werden) — durch deren Aufruf wird eine Instanz des {{domxref("Storage")}} Objekts erstellt, durch welches Daten gespeichert, abgerufen und gelöscht werden können. Ein anderes Speicherelement wird für das sessionStorage und localStorage jedes Ausgangspunktes verwendet — beide arbeiten getrennt und werden auch getrennt gesteuert.

+ +
+

Hinweis: Ab Firefox 45 aufwärts wird die Datenspeicherung pro Ausgangspunkt auf 10MB begrenzt, um Speicherprobleme durch übermäßige Verwendung des Web storage zu vermeiden.

+
+ +
+

Hinweis: Zugang zum Web Storage von IFrames Ditter wird verweigert, wenn der Anwender Cookies Dritter deaktiviert hat (Firefox implementiert dieses Verhalten ab der version 43 aufwärts.)

+
+ +
+

Hinweis: Web Storage ist nicht dasselbe wie mozStorage (Mozillas XPCOM Schnittstelle zu SQLite) oder die Session store API (ein XPCOM Speicherprogramm, welches von Erweiterungen verwendet wird).

+
+ +

Web Storage Schnittstellen

+ +
+
{{domxref("Storage")}}
+
Erlaubt das Speichern, Abrufen und Löschen von Daten einer spezifischen Domain und des Speichertyps (session oder local).
+
{{domxref("Window")}}
+
Die Web Storage API erweitert das {{domxref("Window")}} Objekt mit zwei neuen Attributen — {{domxref("Window.sessionStorage")}} und {{domxref("Window.localStorage")}} — welche den Zugang zu den jeweiligen session- und local-Objekten der aktuellen Domain sowie eine {{domxref("Window.onstorage")}} Ereignissteuerung (event handler), welche aktiviert wird, wenn ein Speicherbereich geändert wird (z.B. bei der Speicherung eines neuen Datensatzes).
+
{{domxref("StorageEvent")}}
+
Das storage-Ereignis wird über das Window-Objekt eines (html-) Dokuments aktiviert, wenn sich ein Speicherbereich ändert.
+
+ +

Beispiele

+ +

Um einige der typischen Anwendungsfälle von Web Storage darzulegen, wurde ein einfaches Beispiel erstellt, fantasievoll als Web Storage Demo benannt. Die Startseite bietet die Möglichkeit, Farbe, Schriftart und ein dekoratives Bild zu verändern. Wenn verschiedene Optionen ausgewählt werden, wird die Seite umgehend aktualisiert. Zudem werden die ausgewählten Optionen im localStorage gespeichert, sodass diese beim Verlassen und erneutem Aufruf der Seite bestehen bleiben. 

+ +

Zudem besteht eine Ereignis-Ausgabeseite — wenn diese Seite in einem weiteren Tab geladen wird, hiernach Änderungen auf der Startseite vorgenommen werden, sind die aktualisierten Speicherinformationen zu sehen, welche durch die Aktivierung des Ereignisses {{event("StorageEvent")}} zustandekommen.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Storage')}}{{Spec2('Web Storage')}}
+ +

Browser-Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage43.5810.504
sessionStorage52810.504
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{ CompatUnknown }}811iOS 3.2
+
+ +

Alle Browser haben variiernde Kapazitäten sowohl für das localStorage und auch das sessionStorage. Hier ist ein detailierter Ablauf aller Speicherkapazitäten verschiedener Browser zu finden.

+ +
+

Hinweis: Seit iOS 5.1, speichert Safari Mobile localStorage-Daten in den cache-Ordner, welcher gelegentlichen Speicherbereinigungen durch das OS ausgesetzt ist, welche typischerweise bei knappem Speicher auftreten.

+
+ +

Privates Surfen / Inkognito-Modus

+ +

Die meisten modernen Browser unterstützen die als "Inkognito", "Privates Surfen" o.ä. bezeichnete Datenschutz-Option, welche keine Daten wie Verlauf und Cookies speichert. Aus ersichtlichen Gründen ist dies grundsätzlich inkompatibel mit Web Storage. Nichtsdestotrotz experimentieren Browseranbieter mit verschiedenen Szenarien, um mit dieser Inkompatibilität umzugehen.

+ +

Für die meisten Browser hat man sich für eine Strategie entschieden, wobei Speicher-APIs vorhanden und scheinbar voll funktionsfähig sind, mit dem einen großen Unterschied, dass alle gespeicherten Daten gelöscht werden, nachdem der Browser geschlossen wird. Für diese Browser bestehen desweiteren unterschiedliche Interpretationen dazu, was mit den vorhandenen abgespeicherten Daten (aus einer regulären Sitzung) geschehen soll. Sollten sie zum Abruf zur Verfügung stehen, um im Inkognito-Modus gelesen werden zu können? Dann gibt es einige Browser, insbesondere Safari, welche sich dazu entschieden haben, den Speicher zur Verfügung zu stellen, dieser jedoch leer ist und ihm ein Speicheranteil von 0 Byte zugeordnet ist. Dadurch machen sie es praktisch unmöglich, Daten auf den Speicher zu schreiben.

+ +

Entwicklern sollten diese unterschiedlichen Implementierungen bewusst sein und sie sollten dies bei der Entwicklung von Webseiten, welche von den Web Storage APIs abhängen, in Betracht ziehen. Für weitere Informationen werfe man einen Blick auf diesen WHATWG Blogpost , das sich insbesondere mit diesem Thema befasst.

+ +

Siehe auch

+ +

Using the Web Storage API
+ HTML5 Storage API By Venkatraman

diff --git a/files/de/web/api/web_workers_api/index.html b/files/de/web/api/web_workers_api/index.html new file mode 100644 index 0000000000..46dccd115d --- /dev/null +++ b/files/de/web/api/web_workers_api/index.html @@ -0,0 +1,226 @@ +--- +title: Web Worker API +slug: Web/API/Web_Workers_API +translation_of: Web/API/Web_Workers_API +--- +

{{DefaultAPISidebar("Web Workers API")}}

+ +

Web Workers ermöglichen Entwicklern Skripte in einem Hintergrundthread getrennt vom Haupthread auszuführen. Dies hat den Vorteil, dass rechenintensive Operationen in einem gesonderten Thread ausgeführt werden können und somit der Hauptthread, der für gewöhnlich das UI bereitstellt, arbeiten kann ohne verlangsamt oder blockiert zu werden.

+ +

Web Workers Konzepte und Anwendung

+ +

Ein Worker ist ein Objekt das mit einem Konstruktor erzeugt wird (beispielsweise {{domxref("Worker.Worker", "Worker()")}}) und eine JavaScript Datei mit Namen ausführt. In dieser Datei ist der Code enthalten der im Worker-Thread ausgeführt wird. Worker arbeiten in einem eigenen globalen Kontext, der vom aktuellen Hauptkontext {{domxref("window")}} verschieden ist. Dieser Kontext ist durch das Objekt  {{domxref("DedicatedWorkerGlobalScope")}}  repräsentiert, falls es sich um einen dedizierten Worker handelt (also einen Worker der nur von einem Skript genutzt wird, was der Standard ist.). Shared Workers benutzen das Objekt {{domxref("SharedWorkerGlobalScope")}}.

+ +

Man kann bis auf einige Ausnahmen beliebige Anweisungen ausführen. Beispielsweise kann man das DOM nicht direkt ändern und auch einige Standardmethoden und -attribute von {{domxref("window")}} können nicht genutzt werden. Viele andere Elemente von window können allerdings schon genutzt werden, unter anderem WebSockets und Datenspeicher, wie IndexedDB und die Firefox-OS-only Data Store API.  Unter Functions and classes available to workers finden Sie mehr Details.

+ +

Daten werden zwischen den Workern und dem Hauptthread mithilfe eines Nachrichtensystems verschickt — beide Seiten verschicken ihre Nachrichten mit der postMessage() Methode und antworten mit dem onmessage Event Handler (die empfangene Nachricht ist im data Attribut {{event("Message")}} des Events enthalten). Die Daten werden kopiert und nicht geteilt.

+ +

Worker können neue Worker erzeugen, solange diese vom selben Ursprung gehosted werden wie die Ursprungsseite.  Außerdem können Worker XMLHttpRequest für Netzwerk I/O benutzen mit der Ausnahme, dass  die responseXML und channel Attribute von XMLHttpRequest stets null zurückgeben.

+ +

Neben dedizierten Workern gibt es noch andere Typen:

+ + + +
+

Note: As per the Web workers Spec, worker error events should not bubble (see {{bug(1188141)}}. This has been implemented in Firefox 42.

+
+ +

Web Worker interfaces

+ +
+
{{domxref("AbstractWorker")}}
+
Abstrakte Attribute und Methoden für alle Worker (z.B. {{domxref("Worker")}} oder {{domxref("SharedWorker")}}).
+
{{domxref("Worker")}}
+
Repräsentiert einen laufenden Workerthread. Erlaubt das Senden von Nachrichten an den Code im Worker.
+
{{domxref("WorkerLocation")}}
+
Definiert die absolute Quelle des Skripts das im  Worker ausgeführet wird.
+
+ +
+
{{domxref("SharedWorker")}}
+
Repräsentiert einen speziellen Worker, auf den von verschiedenen Fenstern, IFrames oder sogar Workern  zugegrifffen werden kann.
+
{{domxref("WorkerGlobalScope")}}
+
Repräsentiert den generischen Scope jedes Workers (dies entspricht dem {{domxref("Window")}} objekt für normale Webinhalte). Andere Worker haben Scopes die von diesem vererbt werden und spezifische Eigenschaften hinzufügen.
+
{{domxref("DedicatedWorkerGlobalScope")}}
+
Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines dedizierten Workers. Fügt besondere Eigenschaften hinzu.
+
{{domxref("SharedWorkerGlobalScope")}}
+
Repräsentiert den von {{domxref("WorkerGlobalScope")}} vererbten Scope eines  Shared Workers. Fügt besondere Eigenschaften hinzu.
+
{{domxref("WorkerNavigator")}}
+
Repräsentiert die Identität und den Zustand des User Agents (dem client).
+
+ +

Beispiele

+ +

Sie finden ein paar einfache Beispiele, die die Benutzung veranschaulichen unter diesen Links:

+ + + +

Unter Using web workers finden Sie mehr Informationen wie diese Demos funktionieren.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#workers')}}{{Spec2('HTML WHATWG')}}
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}{{CompatGeckoDesktop(1.9.1)}}10.010.64
Shared workers4{{CompatNo}}{{CompatGeckoDesktop(29)}}{{CompatNo}}10.64
Passing data using structured cloning13{{CompatVersionUnknown}}{{CompatGeckoDesktop(8)}}10.011.56
Passing data using  transferable objects17 {{property_prefix("webkit")}}
+ 21		{{CompatNo}}{{CompatGeckoDesktop(18)}}{{CompatNo}}156
Global {{domxref("window.URL", "URL")}}10[1]
+ 23		{{CompatVersionUnknown}}{{CompatGeckoDesktop(21)}}11156[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OS (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support4.44{{CompatVersionUnknown}}{{CompatGeckoMobile(1.9.1)}}1.0.110.011.55.1
Shared workers{{CompatNo}}4{{CompatNo}}291.4{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using structured cloning{{CompatNo}}4{{CompatVersionUnknown}}81.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
Passing data using  transferable objects{{CompatNo}}{{CompatNo}}{{CompatNo}}181.0.1{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] As webkitURL.

+ +

Weiterführend

+ + diff --git a/files/de/web/api/webgl_api/index.html b/files/de/web/api/webgl_api/index.html new file mode 100644 index 0000000000..cd699e7ee1 --- /dev/null +++ b/files/de/web/api/webgl_api/index.html @@ -0,0 +1,258 @@ +--- +title: WebGL +slug: Web/API/WebGL_API +tags: + - WebGL + - WebGL2 +translation_of: Web/API/WebGL_API +--- +
{{WebGLSidebar}}
+ +
+

WebGL (Web Graphics Library) ist eine Javascript-API zum Rendern interaktiver 3D und 2D Grafiken mittels eines kompatiblen Web-Browsers ohne Einsatz zusätzlicher Plugins. Mit WebGL steht eine API zur Verfügung, die an OpenGL ES 2.0 angelehnt ist und deren Inhalte mittels eines {{HTMLElement("canvas")}} Elements dargestellt werden.

+
+ +

WebGL steht ab Firefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+ und Internet Explorer 11+ zur Verfügung. Allerdings muss auch die Hardware des Zielgerätes dieses Feature unterstützen.

+ +

WebGL2 steht ab Firefox 51+, Google Chrome 56+ und Opera 42+ standardmäßig zur Verfügung. WebGL2 wird derzeit nicht von Internet Explorer oder Edge unterstützt.

+ +

Das {{HTMLElement("canvas")}} Element kann auch von Canvas 2D genutzt werden, um 2D Grafiken rendern zu können.

+ +

Reference

+ +
+ +
+ +

Extensions

+ +
+ +
+ +

Events

+ + + +

Konstanten und Typen

+ + + +

Themen

+ +

Die folgenden acht Artikel bauen aufeinander auf.

+ +
+
Einführung in WebGL
+
Wie man einen WebGL-Kontext herstellt.
+
Hinzufügen von 2D Inhalten in einen WebGL-Kontext
+
Wie eine einfache, flache Form mittels WebGL erstellt wird.
+
Farben mittels Shader in einen WebGL-Kontext hinzufügen
+
Zeigt wie Farben mit Shadern auf die Form gebracht werden können.
+
Objekte mit WebGL animieren
+
Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.
+
3D-Objekte mit WebGL erstellen
+
Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).
+
Texturen in WebGL verwenden
+
Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.
+
Beleuchtung in WebGL
+
Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.
+
Animierte Texturen in WebGL
+
Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.
+
+ +

Ressourcen

+ +
+
WebGL Spezifikation
+
Der Entwurf der WebGL Spezifikation.
+
Khronos WebGL Seite
+
Die Hauptseite für WebGL der Khronos Group.
+
Learning WebGL
+
Eine Reihe von Tutorials über WebGL (Englisch).
+
Das WebGL Kochbuch
+
Rezepte für das Schreiben von WebGL-Code (Englisch).
+
Sylvester
+
Eine Open-Source Bibliothek, die das Verarbeiten von Vektoren und Matrizen erleichtert.
+
Planet WebGL
+
Eine Feed-Sammlung von Leuten, die in der WebGL Community aktiv sind.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusHinweis
{{SpecName('WebGL')}}{{Spec2('WebGL')}}Grundlegende Definition. Basierend auf OpenGL ES 2.0
{{SpecName('WebGL2')}}{{Spec2('WebGL2')}}Erweiterung von WebGL1. Basierend auf OpenGL ES 3.0.
{{SpecName('OpenGL ES 2.0')}}{{Spec2('OpenGL ES 2.0')}} 
{{SpecName('OpenGL ES 3.0')}}{{Spec2('OpenGL ES 3.0')}} 
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("2.0")}}91112[1]5.1[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureEdgeFirefox Mobile (Gecko)Chrome for AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}425[1]{{CompatNo}}12[1]8.1
+
+ +

[1] Die Implementierung dieses Features ist experimentell.

+ +

Kompatibilitätshinweise

+ +

Neben dem Browser muss auch die GPU selbst dieses Feature unterstützen. So ist zum Beispiel S3 Texture Compression (S3TC) derzeit nur auf Desktop-Rechnern und Tegra-basierenden Tablets verfügbar. Die meisten Browser stellen den {{domxref("HTMLCanvasElement.getContext", "WebGL-Context")}} durch den webgl Contextnamen zur Verfügung - ältere Browser benötigen hingegen manchmal stattdessen den Contextnamen experimental-webgl.

+ +

Das kommende WebGL 2 ist vollständig abwärtskompatibel und wird über den Contextnamen experimental-webgl2 aufgerufen. Ab Firefox 42.0 ist der Aufruf auch über den Contextnamen webgl2 möglich - WebGL2 ist bis einschließlich Firefox 50 ein experimentelles Feature und kann zu Testzwecken über Flag-Settings des Konfigurationseditors aktiviert werden. WebGL2 ist ab Firefox 51+, Chrome 56+ und Opera 42+ standardmäßig aktiviert - Internet Explorer und Edge bieten derzeit noch keinen Support für WebGL2.

+ +

Anmerkungen zu Gecko

+ +

WebGL Debugging und Testing

+ +

Ab Gecko 10.0 {{geckoRelease("10.0")}} werden zwei Möglichkeiten geboten, die WebGL-Fähigkeit des Browsers zu Testzwecken zu beeinflussen:

+ +
+
webgl.min_capability_mode
+
Ein boolescher Wert, der bei true einen minimalen Kompatibiätsmodus zur Verfügung stellt. Ist dieser Modus aktiviert, wird WebGL ausschließlich mit dem geringsten Features betrieben, die von der WebGL-Spezifikation definiert wurden. Damit lässt sich sicherstellen, dass dein WebGL-Code auf jedem Gerät unabhängig besonderer Fähigkeiten lauffähig ist. Der Standarardwert ist false.
+
webgl.disable_extensions
+
Ein boolescher Wert, der bei true alle WebGL Extensions deaktiviert. Der Standarardwert ist false.
+
+ +

WebGL2 Aktivierung

+ +
+
webgl.enable-prototype-webgl2 (ab Firefox 38)
+
webgl.enable-webgl2 (ab Firefox 50)
+
Ein boolescher Wert, der bei true den bisher experimentellen WebGL2-Context im Browser aktiviert. Der Standarardwert ist false - ab Firefox 51 ist der Standardwert true.
+
+ +

Siehe auch

+ + diff --git a/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html new file mode 100644 index 0000000000..d3a21591fd --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/3d-objekte_mit_webgl_erstellen/index.html @@ -0,0 +1,126 @@ +--- +title: 3D-Objekte mit WebGL erstellen +slug: Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

+ +

Bringen wir unser Quadrat in die dritte Dimension, indem wir fünf oder mehr Flächen hinzufügen und daraus einen Würfel machen. Um das effizient zu machen, wechseln wir vom Zeichnen direkt über die Vertices zur gl.drawArray() Methode, um den Vertex-Array als eine Tabelle zu verwenden und die einzelnen Vertices in dieser Tabelle als Referenz für Positionen jeder Fläche zu definieren, indem wir gl.drawElements() aufrufen.

+ +

Bedenken Sie: Jede Fläche benötigt vier Vertices, die diese definieren, aber jeder Vertex wird von drei Flächen verwendet. Wir können eine Menge Daten sparen, indem wir eine Liste aller 24 Vertices erstellen und uns dann auf jeden Vertex durch dessen Index in der Liste beziehen, anstatt den gesamten Koordinatensatz zu verwenden.

+ +

Die Vertex-Positionen des Würfels definieren

+ +

Zunächst wollen wir den Positionsspeicher der Vertices erstellen, indem wir den Code in initBuffers() ändern. Das geschieht genau so wie für das Quadrat, allerdings haben wir hier ein paar Datensätze mehr, da wir 24 Vertices (4 pro Seite) haben müssen:

+ +
  var vertices = [
+    // vordere Fläche
+    -1.0, -1.0,  1.0,
+     1.0, -1.0,  1.0,
+     1.0,  1.0,  1.0,
+    -1.0,  1.0,  1.0,
+
+    // hintere Fläche
+    -1.0, -1.0, -1.0,
+    -1.0,  1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0, -1.0, -1.0,
+
+    // obere Fläche
+    -1.0,  1.0, -1.0,
+    -1.0,  1.0,  1.0,
+     1.0,  1.0,  1.0,
+     1.0,  1.0, -1.0,
+
+    // untere Fläche
+    -1.0, -1.0, -1.0,
+     1.0, -1.0, -1.0,
+     1.0, -1.0,  1.0,
+    -1.0, -1.0,  1.0,
+
+    // rechte Fläche
+     1.0, -1.0, -1.0,
+     1.0,  1.0, -1.0,
+     1.0,  1.0,  1.0,
+     1.0, -1.0,  1.0,
+
+    // linke Fläche
+    -1.0, -1.0, -1.0,
+    -1.0, -1.0,  1.0,
+    -1.0,  1.0,  1.0,
+    -1.0,  1.0, -1.0
+  ];
+
+ +

Die Farben der Vertices definieren

+ +

Außerdem müssen wir einen Array für die Farben der 24 Vertices erstellen. Dieser Code definiert zunächst die Farben für jede Fläche und verwendet dann eine Schleife, um jeden der Vertices mit einer Farbe zu bestücken.

+ +
  var colors = [
+    [1.0,  1.0,  1.0,  1.0],    // vordere Fläche: weiß
+    [1.0,  0.0,  0.0,  1.0],    // hintere Fläche: rot
+    [0.0,  1.0,  0.0,  1.0],    // obere Fläche: grün
+    [0.0,  0.0,  1.0,  1.0],    // untere Fläche: blau
+    [1.0,  1.0,  0.0,  1.0],    // rechte Fläche: gelb
+    [1.0,  0.0,  1.0,  1.0]     // linke Fläche: violett
+  ];
+
+  var generatedColors = [];
+
+  for (j=0; j<6; j++) {
+    var c = colors[j];
+
+    for (var i=0; i<4; i++) {
+      generatedColors = generatedColors.concat(c);
+    }
+  }
+
+  cubeVerticesColorBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesColorBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(generatedColors), gl.STATIC_DRAW);
+
+ +

Das Element-Array definieren

+ +

Sobald die Vertex-Arrays generiert worden sind, müssen wir das Element-Array erstellen.

+ +
  cubeVerticesIndexBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+
+  // Dieser Array definiert jede Fläche als zwei Dreiecke über die Indizes
+  // im Vertex-Array, um die Position jedes Dreiecks festzulegen.
+
+  var cubeVertexIndices = [
+    0,  1,  2,      0,  2,  3,    // vorne
+    4,  5,  6,      4,  6,  7,    // hinten
+    8,  9,  10,     8,  10, 11,   // oben
+    12, 13, 14,     12, 14, 15,   // unten
+    16, 17, 18,     16, 18, 19,   // rechts
+    20, 21, 22,     20, 22, 23    // links
+  ]
+
+  // Sende nun das Element-Array zum GL
+
+  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
+      new WebGLUnsignedShortArray(cubeVertexIndices), gl.STATIC_DRAW);
+
+ +

Das cubeVertexIndices Array definiert jede Fläche als ein paar von Dreiecken, alle Vertices des Dreiecks werden als ein Index im Vertex-Array des Würfels festgelegt. Daher ist der Würfel aus einer Sammlung von 12 Dreiecken beschrieben.

+ +

Den Würfel zeichnen

+ +

Als nächstes müssen wir etwas Code zur drawScene() Funktion hinzufügen, um über den Indexspeicher des Würfels zu zeichnen. Wir fügen neue bindBuffer() und drawElements() Aufrufe hinzu:

+ +
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
+  setMatrixUniforms();
+  gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0);
+
+ +

Da jede Seite unseres Würfels aus zwei Dreiecken besteht, gibt es 6 Vertices pro Seite, oder 36 Vertices im Würfel, obwohl einige davon doppelt sind. Da unser Index-Array jedoch aus einfachen Integern besteht, stellt dies keinen unkoordinierbaren Betrag an Daten dar, welcher für jeden Frame der Animation durchgegangen werden muss.

+ +

Jetzt haben wir einen animierten Würfel, welcher herum springt, rotiert und über sechs unterschiedliche Seiten verfügt. Wenn Ihr Browser WebGL unterstützt, schauen Sie sich hier die Demo in Aktion an.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren", "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden")}}

diff --git a/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html new file mode 100644 index 0000000000..bfeb362b8e --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/animierte_texturen_in_webgl/index.html @@ -0,0 +1,89 @@ +--- +title: Animierte Texturen in WebGL +slug: Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial") }} {{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

+ +

In dieser Demo bauen wir auf das vorherige Beispiel auf, indem wir die statischen Texturen mit den Frames eines OGG-Video ersetzen. Das ist nicht sehr schwer zu schreiben, sieht aber umso besser aus. Fangen wir an.

+ +

Zugang zum Video

+ +

Zunächst müssen wir etwas HTML hinzufügen, um das video Element zu erstellen, welches wir verwenden, um die Video-Frames zu erhalten:

+ +
<video id="video" src="Firefox.ogv" autobuffer='true'">
+  Ihr Browser scheint das HTML5 <code>&lt;video&gt;</code> Element nicht zu unterstützen.
+</video>
+
+ +

Das erstellt einfach ein Element, um die Video-Datei "Firefox.ogv" abzuspielen. Wir benutzen CSS, um zu verhindern, dass das Video angezeigt wird:

+ +
video {
+  display: none;
+}
+
+ +

Dann schenken wir dem JavaScript Code wieder unsere Aufmerksamkeit und fügen eine neue Zeile zur start() Funktion hinzu, um einen Bezug zum Video-Element herzustellen:

+ +
videoElement = document.getElementById("video");
+
+ +

Und wir ersetzen den Code, der die Intervall-gesteuerten Aufrufe von drawScene() setzt, mit diesem Code:

+ +
videoElement.addEventListener("canplaythrough", startVideo, true);
+videoElement.addEventListener("ended", videoDone, true);
+
+ +

Die Idee ist hier, dass wir die Animation nicht starten wollen, bevor das Video nicht ausreichend zwischengespeichert wurde, sodass es dann ohne Unterbrechung abgespielt werden kann. Wir fügen also einen Event-Listener hinzu, um auf das video Element zu warten bis es uns mitteilt, dass genug zwischengespeichert wurde und das komplette Video ohne Pause abgespielt werden kann. Wir fügen außerdem einen zweiten Event-Listener hinzu, sodass wir die Animation stoppen können, wenn das Video beendet ist und wir so nicht unnötig den Prozessor belasten.

+ +

Die startVideo() Funktion sieht so aus:

+ +
function startVideo() {
+  videoElement.play();
+  videoElement.addEventListener("timeupdate", updateTexture, true);
+  setInterval(drawScene, 15);
+}
+
+ +

Hier wird einfach das Video gestartet und ein Event-Handler bereitgestellt, der aufgerufen wird, wenn ein neuer Frame des Videos verfügbar ist. Dann werden die Intervall-gesteuerten Aufrufe der drawScene() Funktion eingerichtet, um den Würfel zu rendern.

+ +

Die videoDone() Funktion ruft einfach {{ domxref("window.clearInterval") }} auf, um die Intervallaufrufe zu beenden, die die Animation aktualisieren.

+ +

Die Video-Frames als Textur verwenden

+ +

Die nächste Änderung erhält die initTexture() Funktion, welche viel einfacher wird, weil kein Bild mehr geladen werden muss. Stattdessen muss nun das Textur-Mapping aktiviert werden und ein leeres Textur-Objekt zum späteren Gebrauch erstellt werden:

+ +
function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+}
+
+ +

So sieht die updateTexture() Funktion aus. Hier wird wirklich Arbeit verrichtet:

+ +
function updateTexture() {
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, videoElement, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

Sie kennen diesen Code bereits. Es ist fast identisch zur handleTextureLoaded() Routine im vorherigen Beispiel, mit der Ausnahme, dass wir texImage2D() nicht mit einem Image Objekt sondern mit dem video Element aufrufen.

+ +

updateTexture() wird jedes Mal aufgerufen, wenn sich das timeupdate Event vom video Element meldet. Dieses Event wird gesendet, wenn sich die Zeit des aktuellen Frames ändert, sodass wir wissen, dass wir unsere Textur nur dann aktualisieren müssen, wenn neue Daten verfügbar sind.

+ +

Das war alles! Wenn Sie eine Browser mit Unterstützung von WebGL verwenden, können Sie sich das Beispiel in Aktion ansehen.

+ +

Siehe auch

+ + + +

{{Previous("Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html new file mode 100644 index 0000000000..bd65b5bb40 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/beleuchtung_in_webgl/index.html @@ -0,0 +1,172 @@ +--- +title: Beleuchtung in WebGL +slug: Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

+ +

Als Erstes sollten wir verstehen, dass WebGL nicht wie OpenGL über eine eigene Unterstützung für die Beleuchtung verfügt. Das müssen wir selbst machen. Glücklicherweise ist es nicht sehr schwer und dieser Artikel versucht Ihnen die Grundlagen dazu näher zu bringen.

+ +

Beleuchtung und Schattierung simulieren

+ +

Obwohl wir nicht weiter ins Detail über die Theorie hinter simulierter Beleuchtung in 3D Grafiken gehen wollen, was außerdem weit über diesen Artikel hinaus gehen würde, ist es gut zu wissen wie es ungefähr funktioniert. Anstatt hier nun in aller Tiefe zu diskutieren, sollten Sie einen Blick auf den »Phong Shading« Artikel auf Wikipedia werfen, welcher einen guten Überblick über das meist genutzte Beleuchtungsmodell liefert.

+ +

Es gibt drei grundlegende Typen zur Beleuchtung:

+ +

Umgebungslicht ist das Licht, das die Szene umgibt. Es weist in keine Richtung und bestrahlt jede Oberfläche in gleicher Weise, egal in welche Richtung es zeigt.

+ +

Gerichtetes Licht ist das Licht, das von einer festgelegten Richtung ausgestrahlt wird. Dieses Licht ist so weit weg, sodass sich jeder Photon parallel zu jedem anderen Photon bewegt. Sonnenlicht ist zum Beispiel gerichtetes (direktionales) Licht.

+ +

Punktbeleuchtung ist das Licht, das von einem Punkt ausgestrahlt wird und von dort radial in alle Richtungen verläuft. So funktionieren zum Beispiel die Glühbirnen im Alltag.

+ +

Für unsere Zwecke vereinfachen wir das Beleuchtungsmodell, indem wir nur gerichtetes Licht und Umgebungslicht betrachten. Wir haben hier keine Highlights, die wir mit Punktbeleuchtung oder Glanzlicht in dieser Szene hervorheben wollen. Stattdessen werden wir Umgebungslicht mit einem einzelnen, gerichteten Licht verwenden, welches auf den rotierenden Würfel aus der vorherigen Demo zeigt.

+ +

Wenn Sie die Konzepte der Punktbeleuchtung und des Glanzlichtes hinter sich gelassen haben, gibt es dennoch zwei kleine Informationen, die Sie benötigen werden, wenn wir unser gerichtetes Licht implementieren:

+ +
    +
  1. Wir müssen die Oberflächennormale mit jedem Vertex verbinden. Das ist ein Vektor, der senkrecht zur Oberfläche des Vertex ist.
    2. +
  2. Wir müssen die Richtung in welche das Licht strahlt wissen. Diese wird durch den Richtungsvektor angegeben.
    3. +
+ +

Dann aktualisieren wir den Vertex-Shader, um die Farbe jedes Vertices, unter Berücksichtigung des Umgebungslichts und dem Effekt des gerichteten Lichts (sowie dessen Winkel mit dem es auf die Oberfläche trifft), einzustellen. Wir werden sehen, wie genau wir das machen, wenn wir einen Blick auf den Code für den Shader werfen.

+ +

Die Normalen für die Vertices erstellen

+ +

Als Erstes müssen wir einen Array für die Normalen für alle Vertices erstellen, die unseren Würfel umfassen. Da ein Würfel ein sehr einfaches Objekt ist, ist dies auch sehr einfach zu erstellen. Für komplexere Objekte wird das Berechnen der Normalen schon umfassender.

+ +
  cubeVerticesNormalBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+
+  var vertexNormals = [
+    // vorne
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+     0.0,  0.0,  1.0,
+
+    // hinten
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+     0.0,  0.0, -1.0,
+
+    // oben
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+     0.0,  1.0,  0.0,
+
+    // unten
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+     0.0, -1.0,  0.0,
+
+    // rechts
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+     1.0,  0.0,  0.0,
+
+    // links
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0,
+    -1.0,  0.0,  0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertexNormals), gl.STATIC_DRAW);
+
+ +

Das sollte Ihnen schon bekannt vorkommen: Wir erstellen einen neuen Buffer, verknüpfen den Array damit und senden dann unseren Vertex-Normalen-Array in den Buffer, indem wir bufferData() aufrufen.

+ +

Dann fügen wir Code zu drawScene() hinzu, um das Normalen-Array mit einem Shader-Attribut zu verknüpfen, sodass der Shader-Code darauf zugreifen kann:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesNormalBuffer);
+  gl.vertexAttribPointer(vertexNormalAttribute, 3, gl.FLOAT, false, 0, 0);
+
+ +

Schließlich müssen wir den Code aktualisieren, welcher die Einheitsmatrizen erstellt, um eine Normalenmatrix zu generieren und zum Shader auszuliefern. Diese wird verwendet, um die Normalen umzuwandeln, wenn die aktuelle Orientierung des Würfels in Beziehung zur Lichtquelle behandelt wird:

+ +
  var normalMatrix = mvMatrix.inverse();
+  normalMatrix = normalMatrix.transpose();
+  var nUniform = gl.getUniformLocation(shaderProgram, "uNormalMatrix");
+  gl.uniformMatrix4fv(nUniform, false, new WebGLFloatArray(normalMatrix.flatten()));
+
+ +

Die Shader aktualisieren

+ +

Jetzt sind alle Daten, die von den Shadern gebraucht werden, verfügbar. Wir müssen nun den Code in den Shadern selbst aktualisieren.

+ +

Der Vertex-Shader

+ +

Zunächst aktualisieren wir den Vertex-Shader, sodass dieser einen Schattenwert für jeden Vertex auf Basis des Umgebungslichts sowie des direktionalen Lichts berechnet. Werfen wir einen Blick auf den Code:

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexNormal;
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uNormalMatrix;
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+
+        // Beleuchtungseffekt anwenden
+
+        vec3 ambientLight = vec3(0.6, 0.6, 0.6);
+        vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);
+        vec3 directionalVector = vec3(0.85, 0.8, 0.75);
+
+        vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);
+
+        float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);
+        vLighting = ambientLight + (directionalLightColor * directional);
+      }
+    </script>
+
+ +

Sobald die Position des Vertex berechnet wurde und wir die Koordinaten des Texels (welcher passend zum Vertex ist) erhalten haben, können wir den Schatten für den Vertex berechnen.

+ +

Als Erstes wandeln wir die Normale auf Basis der aktuellen Position und Orientierung des Würfels um, indem wir die Normale des Vertexes mit der Normalenmatrix multiplizieren. Dann können wir den Betrag an direktionalem Licht, welcher auf den Vertex angewendet werden soll, berechnen, indem wir das Skalarprodukt der umgewandelten Normalen und des direktionalen Vektors (Richtung aus der das Licht kommt) bilden. Wenn dieser Wert kleiner als Null ist, setzen wir den Wert auf Null fest, da man nicht weniger als Null Licht haben kann.

+ +

Wenn der Betrag des direktionalen Lichts berechnet wurde, können wir den Beleuchtungswert generieren, indem wir das Umgebungslicht nehmen und das Produkt der Farbe des direktionalen Lichts und den Betrag an direktionalem Licht bereitstellen. Als Ergebnis haben wir nun einen RGB-Wert, welcher vom Fragment-Shader verwendet wird, um die Farbe jedes Pixels den wir rendern einzustellen.

+ +

Der Fragment-Shader

+ +

Der Fragment-Shader muss nun aktualisiert werden, um den berechneten Beleuchtungswert vom Vertex-Shader zu berücksichtigen:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      varying vec2 vTextureCoord;
+      varying vec3 vLighting;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        vec4 texelColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+
+        gl_FragColor = vec4(texelColor.rgb * vLighting, texelColor.a);
+      }
+    </script>
+
+ +

Hier erhalten wir nun die Farbe des Texels, genau so wie wir es im vorherigen Beispiel getan haben. Bevor wir die Farbe der Fragmente aber festlegen, multiplizieren wir die Texel-Farbe mit dem Beleuchtungswert, um die Texel-Farbe so einzustellen, dass diese den Effekt der Lichtquelle berücksichtigt.

+ +

Und das war's! Wenn Sie einen Browser verwenden, der WebGL unterstützt, können Sie einen Blick auf die Live-Demo werfen.

+ +

Übungen für den Leser

+ +

Dies ist natürlich ein sehr einfaches Beispiel, welches eine Beleuchtung pro Vertex implementiert. Für fortgeschrittene Grafiken, möchten Sie sicher eine Beleuchtung pro Pixel implementieren, aber dies wird Sie in die Richtung leiten.

+ +

Sie können nun also versuchen mit der Richtung der Lichtquelle zu experimentieren, die Farbe der Leuchtquelle zu ändern und so weiter.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden", "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" "b/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" new file mode 100644 index 0000000000..5906f95761 --- /dev/null +++ "b/files/de/web/api/webgl_api/tutorial/einf\303\274hrung_in_webgl/index.html" @@ -0,0 +1,73 @@ +--- +title: Einführung in WebGL +slug: Web/API/WebGL_API/Tutorial/Einführung_in_WebGL +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

+ +

Mit WebGL steht eine API zur Verfügung, die auf OpenGL ES 2.0 basiert, um 3D Rendering im HTML canvas Element zu ermöglichen. WebGL Programme bestehen aus Steuercode in JavaScript und Shadercode (GLSL), der auf dem Grafikprozessor (GPU) des Computers ausgeführt wird. WebGL Elemente können mit anderen HTML Elementen kombiniert werden.

+ +

Dieser Artikel ist eine Einführung in die Grundlagen von WebGL. Es wird vorausgesetzt, dass einige mathematischen Kenntnisse im 3D-Bereich (Matrizen) vorhanden sind. Dieser Artikel wird daher keine 3D-Grafik-Konzepte vermitteln. Es gibt einen anfängergeeigneten Leitfaden mit Programmieraufgaben in unserem Lernbereich: Learn WebGL for 2D and 3D graphics.

+ +

DIe hier verwendeten Codebeispiele finden sich auch im webgl-examples GitHub repository.

+ +

3D Rendering vorbereiten

+ +

Um WebGL benutzen zu können, wird als erstes ein canvas Element benötigt. Der folgende HTML-Code definiert eine canvas Zeichenfläche.

+ +
<body>
+  <canvas id="glCanvas" width="640" height="480"></canvas>
+</body>
+
+ +

Vorbereitung des WebGL-Kontexts

+ +

Die main() Funktion im JavaScript Code wird aufgerufen, nachdem das Dokument geladen wurde. Die Aufgabe der Funktion ist, den WebGL-Kontext festzulegen und mit dem Rendering zu beginnen.

+ +
main();
+
+function main() {
+  const canvas = document.querySelector("#glCanvas");
+  // Initialisierung des GL Kontexts
+  const gl = canvas.getContext("webgl");
+
+  // Nur fortfahren, wenn WebGL verfügbar ist und funktioniert
+  if (!gl) {
+    alert("Unable to initialize WebGL. Your browser or machine may not support it.");
+    return;
+  }
+
+  // Setze clear color auf schwarz, vollständig sichtbar
+  gl.clearColor(0.0, 0.0, 0.0, 1.0);
+  // Lösche den color buffer mit definierter clear color
+  gl.clear(gl.COLOR_BUFFER_BIT);
+}
+ +

Als erstes verschaffen wir uns eine Referenz zum canvas Element und speichern sie in der canvas Variable.

+ +

Sobald wir den Bezug zum canvas haben, versuchen wir einen zugehörigen  WebGLRenderingContext zu erhalten, indem wir getContext aufrufen und dabei den String "webgl" mitgeben. Falls der Browser WebGL nicht unterstützt, wird getContext null zurückgeben, woraufhin wir den Nutzer benachrichtigen und das Script verlassen.

+ +

Wenn der Kontext erfolgreich initialisiert wurde, ist gl eine Variable für den Kontext. In diesem Fall setzen wir die clear color auf schwarz, und löschen den zugehörigen Kontext (der canvas wird mit der Hintergrundfarbe neu gezeichnet)

+ +

An dieser Stelle ist genug Code vorhanden, um den WebGL-Kontext erfolgreich zu initialisieren. Ein großer, leerer, schwarzer Kasten sollte zu sehen sein, der darauf wartet mit weiteren Inhalten gefüttert zu werden.

+ +

{{EmbedGHLiveSample('webgl-examples/tutorial/sample1/index.html', 670, 510) }}

+ +

Vollständigen Code ansehen | Demo in neuer Seite öffnen

+ +

Siehe auch

+ +

 

+ + + +

 

+ +

{{Next("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" "b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" new file mode 100644 index 0000000000..94068822d5 --- /dev/null +++ "b/files/de/web/api/webgl_api/tutorial/farben_mittels_shader_in_einen_webgl-kontext_hinzuf\303\274gen/index.html" @@ -0,0 +1,97 @@ +--- +title: Farben mittels Shader in einen WebGL-Kontext hinzufügen +slug: >- + Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

+ +

Wir haben ein simples Quadrat im vorherigen Teil erstellt, im nächsten Schritt wollen wir ein bisschen Farbe ins Spiel bringen. Dafür sind Änderungen an den Shadern erforderlich.

+ +

Farben zu den Eckpunkten hinzufügen

+ +

In der Computergrafik werden Objekte mit einer Reihe von Punkten erstellt. Jeder Punkt hat eine Position und eine Farbe. Standardmäßig werden alle anderen Pixelfarben (und alle weiteren Attribute, darunter die Position) über eine lineare Interpolation berechnet, die automatisch glatte Verläufe erstellt. Vorher hat unser Vertex-Shader keine festgelegten Farben auf die Punkte (Vertices) angewendet und der Fragment-Shader legte die feste Farbe weiß für jeden Pixel fest, sodass das gesamte Quadrat komplett weiß gezeichnet wurde.

+ +

Nun wollen wir in jeder Ecke des Quadrats einen Verlauf in einer unterschiedlichen Farbe rendern: rot, blau, grün und weiß. Als erstes sollten wir daher diese Farben in den vier Eckpunkten einrichten. Um das zu machen, müssen wir zunächst einen Array der Vertex-Farben erstellen und diesen dann in einen WebGL Buffer speichern. Das erreichen wir durch die folgenden Zeilen in unserer initBuffers() Funktion:

+ +
var colors = [
+  1.0,  1.0,  1.0,  1.0,    // weiß
+  1.0,  0.0,  0.0,  1.0,    // rot
+  0.0,  1.0,  0.0,  1.0,    // grün
+  0.0,  0.0,  1.0,  1.0     // blau
+];
+
+squareVerticesColorBuffer = gl.createBuffer();
+gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+}
+
+ +

Dieser Code definiert zuerst einen JavaScript Array, welcher die vier Farb-Vektoren mit jeweils vier Werten für die jeweilige Farbe enthält. Dann wird ein neuer WebGL Buffer angewiesen diese Farben zu speichern und der Array wird in WebGL Floats konvertiert und im Buffer gespeichert.

+ +

Um die Farben schließlich zu verwenden, muss der der Vertex-Shader aktualisiert werden, um die entsprechende Farbe vom Farb-Buffer zu erhalten:

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+  attribute vec4 aVertexColor;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+    vColor = aVertexColor;
+  }
+</script>
+
+ +

Der wichtigste Unterschied ist hier, dass wir für jeden Punkt (Vertex) die Farbe entsprechend des Farb-Arrays setzen.

+ +

Die Fragmente mit Farben versehen

+ +

Als Erinnerung, so sah unser Fragment-Shader vorher aus:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Um nun die interpolierte Farbe für jeden Pixel aufzugreifen, müssen wir dies einfach so ändern, dass wir den Wert der vColor Variable erhalten:

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+  varying vec4 vColor;
+
+  void main(void) {
+    gl_FragColor = vColor;
+  }
+</script>
+
+ +

Das ist eine sehr einfache Änderung. Anstatt des festen Wertes vorher, erhält jedes Fragment jetzt einfach die interpolierte Farbe, basierend auf der Position relativ zu den Kontenpunkten (Vertices).

+ +

Mit den Farben zeichnen

+ +

Als nächstes ist es nötig, Code zur initShaders() Routine hinzuzufügen, um das Farbattribut für das Shader-Programm zu initialisieren:

+ +
  vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
+  gl.enableVertexAttribArray(vertexColorAttribute);
+
+ +

Dann wird drawScene() abgeändert, um schließlich die Farben zu verwenden, wenn das Quadrat gezeichnet wird:

+ +
  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesColorBuffer);
+  gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
+
+ +

Jetzt sollten Sie das Beispiel in einem WebGL kompatiblen Browser sehen und Ihre Ausgabe sollte so wie im Bild unten gezeichnet werden (das Quadrat ist innerhalb eines schwarzen Felds zu sehen):

+ +

screenshot.png

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext", "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren")}}

diff --git "a/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" "b/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" new file mode 100644 index 0000000000..56c267f394 --- /dev/null +++ "b/files/de/web/api/webgl_api/tutorial/hinzuf\303\274gen_von_2d_inhalten_in_einen_webgl-kontext/index.html" @@ -0,0 +1,238 @@ +--- +title: Hinzufügen von 2D Inhalten in einen WebGL-Kontext +slug: Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

+ +

Sobald der WebGL-Kontext erfolgreich erstellt wurde, können wir anfangen darin zu rendern. Am einfachsten beginnen wir mit einem einfachen, zweidimensionalen, untextuierten Objekt. Fangen wir also damit an, ein Stück Code zu schreiben, um ein Quadrat zu zeichnen.

+ +

Hinweis zur deutschen Übersetzung dieses Abschnitts

+ +

Die deutsche Übersetzung bezieht sich auf ältere Version des Beispielcodes als der englische Originaltext. Der im deutschen Text beschriebene Code hat einige Probleme:

+ + + +

Um das Beispiel selber nachzuprogrammieren ist es daher empfehlenswert, auf die englische Version des Tutorials zu wechseln. Vielleicht haben Sie ja auch Lust, diese Version ins Deutsche zu übersetzen?

+ +

Beleuchtung der Szene

+ +

Das Wichtigste, das wir verstehen müssen bevor wir anfangen können, ist, dass wir, uns bereits in einer dreidimensionalen Umgebung befinden, obwohl wir nur ein zweidimensionales Objekt in diesem Beispiel rendern wollen. Das heißt, wir müssen jetzt bereits Shader einsetzen, die unsere einfache Szene beleuchten und solche erstellen, die unser Objekt zeichnen. Diese Shader werden festlegen wie unser Quadrat später beleuchtet sein wird.

+ +

Initialisierung der Shader

+ +

Shader sind durch die OpenGL ES Shading Language (pdf) spezifiziert. Damit es einfacher ist unsere Inhalte zu warten und zu aktualisieren, können wir unseren Code so schreiben, dass die Shader im HTML Dokument gefunden werden, anstatt alles mittels JavaScript zu bauen. Werfen wir einen Blick auf unsere initShaders() Routine, welche diese Aufgabe übernimmt:

+ +
function initShaders() {
+  var fragmentShader = getShader(gl, "shader-fs");
+  var vertexShader = getShader(gl, "shader-vs");
+
+  // Erzeuge Shader
+
+  shaderProgram = gl.createProgram();
+  gl.attachShader(shaderProgram, vertexShader);
+  gl.attachShader(shaderProgram, fragmentShader);
+  gl.linkProgram(shaderProgram);
+
+  // Wenn die das Aufrufen der Shader fehlschlägt,
+  // gib eine Fehlermeldung aus:
+
+  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+    alert("Initialisierung des Shaderprogramms nicht möglich.");
+  }
+
+  gl.useProgram(shaderProgram);
+
+  vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
+  gl.enableVertexAttribArray(vertexPositionAttribute);
+}
+
+
+ +

Es werden zwei Shader in dieser Routine geladen; der Erste, der fragmentShader, wird vom script Element mit der Id "shader-fs" geladen. Der Zweite, der vertexShader, wird vom script Element mit der Id "shader-vs" geladen. Wir werden im nächsten Abschnitt noch näher auf die getShader() Funktion eingehen. Diese Routine holt sich dann die Shader aus dem DOM.

+ +

In diesem Teil erstellen wir noch das Shaderprogramm, in dem wir die Funktion createProgram() aufrufen, die beiden Shader anhängen und das Shaderprogramm verlinken. Danach wird der Zustand des LINK_STATUS Parameters überprüft, um sicher zu gehen, dass das Programm erfolgreich verlinkt wurde. Wenn das der Fall ist, aktivieren wir das neue Shaderprogramm.

+ +

Shader aus dem DOM laden

+ +

Die getShader() Routine ruft ein Shaderprogramm mit dem festgelegtem Namen aus dem DOM auf, gibt das kompilierte Shaderprogramm zurück oder ist leer, wenn nichts geladen oder kompiliert worden konnte.

+ +
function getShader(gl, id) {
+  var shaderScript = document.getElementById(id);
+
+  if (!shaderScript) {
+    return null;
+  }
+
+  var theSource = "";
+  var currentChild = shaderScript.firstChild;
+
+  while(currentChild) {
+    if (currentChild.nodeType == 3) {
+      theSource += currentChild.textContent;
+    }
+
+    currentChild = currentChild.nextSibling;
+  }
+ +

Wenn das Element mit der festgelegten Id gefunden wurde, wird der Text in die Variable theSource gespeichert.

+ +
  var shader;
+
+  if (shaderScript.type == "x-shader/x-fragment") {
+    shader = gl.createShader(gl.FRAGMENT_SHADER);
+  } else if (shaderScript.type == "x-shader/x-vertex") {
+    shader = gl.createShader(gl.VERTEX_SHADER);
+  } else {
+    return null;  // Unbekannter Shadertyp
+  }
+ +

Jetzt wo der Code für die Shader gelesen wurde, können wir uns die MIME Typen der Shader angucken, um festzulegen, ob es ein Vertex-Shader (MIME Typ: "x-shader/x-vertex") oder ein Fragment-Shader (MIME Typ: "x-shader/x-fragment") ist. Danach werden dann die entsprechenden Shadertypen erstellt.

+ +
  gl.shaderSource(shader, theSource);
+
+  // Kompiliere das Shaderprogramm
+
+  gl.compileShader(shader);
+
+  // Überprüfe, ob die Kompilierung erfolgreich war
+
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    alert("Es ist ein Fehler beim Kompilieren der Shader aufgetaucht: " + gl.getShaderInfoLog(shader));
+    return null;
+  }
+
+  return shader;
+}
+
+ +

Schließlich wird der Shader kompiliert. Falls ein Fehler während der Kompilierung auftritt, zeigen wir die Fehlermeldung an und geben null zurück. Andernfalls wird der kompilierte Shader zurückgegeben.

+ +

Die Shader

+ +

Nun müssen wir die eigentlichen Shaderprogramme in unser HTML schreiben. Wie genau diese Shader arbeiten, übersteigt das Ziel dieses Tutorials, wir gehen daher nur auf das Wesentliche ein.

+ +

Fragment-Shader

+ +

Jeder Pixel in einem Vieleck wird Fragment in der GL-Fachsprache genannt. Die Aufgabe des Fragment-Shaders ist es, die Farbe für jeden Pixel bereitzustellen. In unserem Fall ordnen wir einfach jedem Pixel eine weiße Farbe zu.

+ +

gl_FragColor ist eine eingebaute GL Variable, die für die Farbe des Fragments verwendet wird.

+ +
<script id="shader-fs" type="x-shader/x-fragment">
+
+  void main(void) {
+    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
+  }
+</script>
+
+ +

Vertex-Shader

+ +

Der Vertex-Shader definiert die Position und Form von jedem Punkt.

+ +
<script id="shader-vs" type="x-shader/x-vertex">
+  attribute vec3 aVertexPosition;
+
+  uniform mat4 uMVMatrix;
+  uniform mat4 uPMatrix;
+
+
+  void main(void) {
+    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+  }
+</script>
+
+ +

Das Objekt erstellen

+ +

Bevor wir unser Quadrat rendern können, müssen wir einen Puffer erstellen, der unsere Punkte enthält. Das werden wir mittels einer Funktion machen, die wir initBuffers() nennen. Wenn wir zu mehr fortgeschrittenen WebGL-Konzepten kommen, wird diese Routine vergrößert, um mehr - und komplexere - 3D-Objekte zu erstellen.

+ +
var horizAspect = 480.0/640.0;
+
+function initBuffers() {
+  squareVerticesBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+
+  var vertices = [
+    1.0,  1.0,  0.0,
+    -1.0, 1.0,  0.0,
+    1.0,  -1.0, 0.0,
+    -1.0, -1.0, 0.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
+}
+
+ +

Diese Routine ist, durch die einfache Art der Szene in diesem Beispiel, sehr einfach gehalten. Es geht los mit dem Aufruf der createBuffer() Methode, die einen Puffer erstellt in dem wir die Punkte speichern können. Der Puffer wird, durch Aufrufen der bindBuffer() Methode, mit dem Kontext verbunden.

+ +

Wenn das erledigt ist, erstellen wir einen JavaScript Array, der die Koordinaten für jeden Punkt des Quadrats enthält. Dieser wird dann in einen WebGL FloatArray umgewandelt und durch die bufferData() Methode werden die Punkte für das Objekt festgelegt.

+ +

Die Szene zeichnen

+ +

Jetzt sind die Shader aufgebaut und das Objekt ist erstellt. Wir können die Szene rendern lassen. Da wir in dieser Szene nichts animieren, ist unsere drawScene() Funktion sehr einfach. Es werden einige nützliche Routinen verwendet, die wir uns kurz anschauen.

+ +
function drawScene() {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+  perspectiveMatrix = makePerspective(45, 640.0/480.0, 0.1, 100.0);
+
+  loadIdentity();
+  mvTranslate([-0.0, 0.0, -6.0]);
+
+  gl.bindBuffer(gl.ARRAY_BUFFER, squareVerticesBuffer);
+  gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
+  setMatrixUniforms();
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+}
+
+ +

Als Erstes wird der Kontext auf unsere Hintergrundfarbe gesetzt und die Kameraperspektive festgelegt. Wir definieren ein Blickfeld von 45°, mit einem Höhen-/Breitenverhältnis von 640 zu 480 (die Größe unseres Canvas). Außerdem legen wir fest, dass wir nur Objekte zwischen 0.1 und 100 Einheiten gerendert haben wollen.

+ +

Dann wird die Position des Quadrats, über das Laden der ursprünglichen Position und der Verschiebung um 6 Einheiten von der Kamera weg, ermittelt. Danach, verbinden wir den Puffer des Quadrats mit dem Kontext, konfigurieren es, und zeichnen das Objekt, in dem wir die drawArrays() Methode aufrufen.

+ +

Das Ergebnis kann hier ausprobiert werden, wenn Sie einen Browser verwenden, der WebGL unterstützt.

+ +

Matrix Operationen

+ +

Matrix Operationen sind schon kompliziert genug. Keiner möchte wirklich den ganzen Code selbst schreiben, der benötigt wird um die Berechnungen selber durchzuführen. Glücklicherweise gibt es Sylvester, eine sehr handliche Bibliothek, die bestens mit Vektor und Matrix Operationen in JavaScript umgehen kann.

+ +

Die glUtils.js Datei, die in dieser Demo benutzt wird, wird bei einer ganzen Reihe von WebGL-Demos, die Web zu finden sind, verwendet. Keiner scheint sich völlig sicher zu sein, woher diese Bibliothek ursprünglich herkommt, aber es vereinfacht den Gebrauch von Sylvester noch weiter, in dem Methoden hinzugefügt werden, die auch spezielle Matrizentypen ermöglichen und HTML ausgegeben werden kann, um die Matrizen anzeigen zu lassen.

+ +

Zusätzlich, definiert diese Demo ein paar hilfreiche Routinen, um an diese Bibliothek für spezielle Aufgaben anzukoppeln. Was genau gemacht wird, ist kein Teil dieses Artikels, aber es gibt einige gute Referenzen zu Matrizen, die online verfügbar sind. Siehe unter Siehe auch, um ein paar aufzulisten.

+ +
function loadIdentity() {
+  mvMatrix = Matrix.I(4);
+}
+
+function multMatrix(m) {
+  mvMatrix = mvMatrix.x(m);
+}
+
+function mvTranslate(v) {
+  multMatrix(Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4());
+}
+
+function setMatrixUniforms() {
+  var pUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
+  gl.uniformMatrix4fv(pUniform, false, new Float32Array(perspectiveMatrix.flatten()));
+
+  var mvUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
+  gl.uniformMatrix4fv(mvUniform, false, new Float32Array(mvMatrix.flatten()));
+}
+
+ +

Siehe auch

+ + + +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Einführung_in_WebGL", "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen")}}

diff --git a/files/de/web/api/webgl_api/tutorial/index.html b/files/de/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..34db3f57e6 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,40 @@ +--- +title: WebGL Tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML {{HTMLElement("canvas")}} in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and special effects code(shader code) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

+
+ +

This tutorial describes how to use the <canvas> element to draw WebGL graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with WebGL and will provide code snippets that may get you started in building your own content.

+ +

Before you start

+ +

Using the <canvas> element is not very difficult, but you do need a basic understanding of HTML and JavaScript. The <canvas> element and WebGL are not supported in some older browsers, but are supported in recent versions of all major browsers. In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

+ +

In diesem Tutorial

+ +
+
Einführung in WebGL
+
Wie man einen WebGL-Kontext herstellt.
+
Hinzufügen von 2D Inhalten in einen WebGL-Kontext
+
Wie eine einfache, flache Form mittels WebGL erstellt wird.
+
Farben mittels Shader in einen WebGL-Kontext hinzufügen
+
Zeigt wie Farben mit Shadern auf die Form gebracht werden können.
+
Objekte mit WebGL animieren
+
Erklärt wie Objekte rotiert und verschiebt werden, um eine einfache Animation zu erstellen.
+
3D-Objekte mit WebGL erstellen
+
Erläutert wie dreidimensionale Objekte erstellt und animiert werden (ein Würfel dient als Beispiel).
+
Texturen in WebGL verwenden
+
Demonstriert wie Texturen auf die Oberfläche eines Objektes gezeichnet werden können.
+
Beleuchtung in WebGL
+
Wie Beleuchtungseffekte in unserem WebGL-Kontext simuliert werden.
+
Animierte Texturen in WebGL
+
Animierte Texturen werden mittels einem Ogg-Video auf der Oberfläche eines rotierenden Würfels realisiert.
+
diff --git a/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html new file mode 100644 index 0000000000..a9eafed6db --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/objekte_mit_webgl_animieren/index.html @@ -0,0 +1,118 @@ +--- +title: Objekte mit WebGL animieren +slug: Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

+ +

Unser Code vom vorherigen Beispiel ist bereits so konfiguriert, dass die WebGL-Szene alle 15 Millisekunden neu gezeichnet wird. Bis jetzt wird zu jeder Zeit das gleiche Bild immer neu gezeichnet. Das wollen wir nun ändern, sodass sich unser Quadrat auf der Bildfläche bewegt.

+ +

In diesem Beispiel rotieren und verschieben wir unser Quadrat in alle drei Dimensionen, sodass es schon in einem 3D Raum existieren kann (obwohl wir bisher nur ein 2D-Objekt erstellt haben).

+ +

Das Quadrat rotieren lassen

+ +

Fangen wir damit an, das Quadrat im Raum zu rotieren. Als erstes brauchen wir dazu eine Variable in welche wir die Rotation des Quadrats verfolgen können:

+ +
var squareRotation = 0.0;
+
+ +

Jetzt müssen wir die drawScene() Funktion ändern, um die aktuelle Rotation auf das Quadrat anzuwenden, wenn dies gezeichnet werden soll. Nach der Umrechnung der Startposition für das Quadrat, wenden wir eine Rotation wie diese an:

+ +
mvPushMatrix();
+mvRotate(squareRotation, [1, 0, 1]);
+
+ +

Das speichert die aktuelle Model-View Matrix und rotiert die Matrix mit dem aktuellen Wert von squareRotation um die X und Z Achsen.

+ +

Nach dem Zeichen müssen wir die Originalmatrix wiederherstellen:

+ +
mvPopMatrix();
+
+ +

Wir speichern und stellen die Originalmatrix dann wieder her, um zu verhindern, dass die Rotation auf andere Objekte angewendet wird, die wir vielleicht später noch zeichnen wollen.

+ +

Um letztendlich etwas zu animieren, brauchen wir noch ein paar Zeilen Code, welcher den Wert von squareRotation über die Zeit verändert. Dafür erstellen wir eine neue Variable, die die Zeit aufzeichnet, welche wir zuletzt animiert haben (wir nennen diese lastSquareUpdateTime), dann fügen wir den folgenden Code an das Ende der drawScene() Funktion:

+ +
var currentTime = (new Date).getTime();
+if (lastSquareUpdateTime) {
+  var delta = currentTime - lastSquareUpdateTime;
+  squareRotation += (30 * delta) / 1000.0;
+}
+lastSquareUpdateTime = currentTime;
+
+ +

Dieser Code benutzt den Betrag der Zeit, die vergangen ist, seitdem wir zum letzten Mal den Wert von squareRotation geändert haben, um festzustellen wie weit das Quadrat rotiert werden soll.

+ +

Das Quadrat bewegen

+ +

Wir können das Quadrat auch verschieben indem wir eine unterschiedliche Position berechnen lassen, bevor wir es zeichnen. Dieses Beispiel zeigt wie eine grundlegende Animation gemacht werden kann. Allerdings möchten Sie in einer echten Anwendung wohl eher etwas weniger Irrsinniges machen.

+ +

Verfolgen wir die Abstände zu jeder Achse für unsere Verschiebung in drei neuen Variablen:

+ +
var squareXOffset = 0.0;
+var squareYOffset = 0.0;
+var squareZOffset = 0.0;
+
+ +

Und den Betrag, welcher unsere Postion auf jeder Achse verändern soll, in diesen Variablen:

+ +
var xIncValue = 0.2;
+var yIncValue = -0.4;
+var zIncValue = 0.3;
+
+ +

Nun können wir einfach diesen Code zum vorherigen Code, der die Rotation aktualisiert, hinzufügen:

+ +
squareXOffset += xIncValue * ((30 * delta) / 1000.0);
+squareYOffset += yIncValue * ((30 * delta) / 1000.0);
+squareZOffset += zIncValue * ((30 * delta) / 1000.0);
+
+if (Math.abs(squareYOffset) > 2.5) {
+  xIncValue = -xIncValue;
+  yIncValue = -yIncValue;
+  zIncValue = -zIncValue;
+}
+
+ +

Das bringt unser Quadrat dazu seine Größe zu verändern, sich willkürlich auf der Fläche zu verschieben, sich vom Betrachter weg und zum Betrachter hin zu bewegen und das alles während das Quadrat auch noch rotiert. Das sieht dann schon eher wie ein Bildschirmschoner aus.

+ +

Wenn Ihr Browser WebGL unterstützt, ist hier das Beispiel in Aktion.

+ +

Weitere Matrixoperationen

+ +

Dieses Beispiel verwendet einige zusätzliche Matrixoperationen, darunter zwei Routinen, die die Matrizen verschieben, wiederherstellen und in einem Stack aufbewahren und eine Routine, die die Matrix um eine gewissen Anzahl von Grad rotiert:

+ +
var mvMatrixStack = [];
+
+function mvPushMatrix(m) {
+  if (m) {
+    mvMatrixStack.push(m.dup());
+    mvMatrix = m.dup();
+  } else {
+    mvMatrixStack.push(mvMatrix.dup());
+  }
+}
+
+function mvPopMatrix() {
+  if (!mvMatrixStack.length) {
+    throw("Can't pop from an empty matrix stack.");
+  }
+
+  mvMatrix = mvMatrixStack.pop();
+  return mvMatrix;
+}
+
+function mvRotate(angle, v) {
+  var inRadians = angle * Math.PI / 180.0;
+
+  var m = Matrix.Rotation(inRadians, $V([v[0], v[1], v[2]])).ensure4x4();
+  multMatrix(m);
+}
+
+ +

Diese Routinen wurden von einem Beispiel ausgeliehen, welches von Vlad Vukićević geschrieben wurde.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen", "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen") }}

diff --git a/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html new file mode 100644 index 0000000000..eb59417694 --- /dev/null +++ b/files/de/web/api/webgl_api/tutorial/texturen_in_webgl_verwenden/index.html @@ -0,0 +1,159 @@ +--- +title: Texturen in WebGL verwenden +slug: Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +tags: + - Tutorial + - WebGL +translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +--- +

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

+ +

Jetzt wo unser Beispielprogramm über einen rotierenden 3D-Würfel verfügt, wollen wir darauf eine Textur legen, statt der bisher verwendeten, einfachen Farben.

+ +

Texturen laden

+ +

Als Erstes müssen wir ein paar Zeilen Code hinzufügen, um die Texturen zu laden. In unserem Fall werden wir eine einzige Textur verwenden, die auf alle sechs Seiten des rotierenden Würfels gelegt wird, aber die gleiche Technik kann verwendet werden, um jede beliebig viele Texturen auf ein Objekt zu legen.

+ +

Der Code, der die Textur lädt, sieht so aus:

+ +
function initTextures() {
+  gl.enable(gl.TEXTURE_2D);
+  cubeTexture = gl.createTexture();
+  cubeImage = new Image();
+  cubeImage.onload = function() { handleTextureLoaded(cubeImage, cubeTexture); }
+  cubeImage.src = "cubetexture.png";
+}
+
+function handleTextureLoaded(image, texture) {
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  gl.texImage2D(gl.TEXTURE_2D, 0, image, true);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
+  gl.generateMipmap(gl.TEXTURE_2D);
+  gl.bindTexture(gl.TEXTURE_2D, null);
+}
+
+ +

Die Routine initTextures() aktiviert zunächst die Unterstützung von Texturen, dann wird das GL Textur-Objekt cubeTexture durch Aufruf der GL createTexture() Funktion erstellt. Um die Textur von der Bilddatei zu laden, wird dann ein Image-Objekt erstellt und in die Grafikdatei geladen, die wir als unsere Textur verwenden wollen. Die handleTextureLoaded() Callback-Routine wird ausgeführt, wenn das Bild geladen wurde.

+ +

Um schließlich die Textur zu erstellen, legen wir fest, dass die neue Textur die aktuelle Textur ist, mit welcher wir arbeiten wollen und verbinden diese mit gl.TEXTURE_2D. Danach wird das geladene Bild mit texImage2D() die Bilddaten in die Textur schreiben.

+ +

Die nächsten zwei Zeilen legen Filter für die Textur fest, die steuern, wie das Bild gefiltert wird, wenn es skaliert wird. In diesem Fall verwenden wir lineare Filter, wenn das Bild hoch skaliert wird und Mip-Mapping wenn wir herunter skalieren. Dann wird die Mip-Map generiert, indem generateMipMap() aufgerufen wird. Schließlich teilen wir WebGL mit, dass wir mit der Arbeit an der Textur fertig sind, in dem wir null mit gl.TEXTURE_2D verknüpfen.

+ +

Textur auf die Flächen legen

+ +

Nun ist die Textur geladen und bereit eingesetzt zu werden. Bevor wir die Textur aber verwenden können, müssen wir die Texturkoordinaten auf die Vertices der Flächen des Würfels legen. Das ersetzt den vorherigen Code in initBuffers(), der die Farben für jede Fläche festgelegt hat.

+ +
  cubeVerticesTextureCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVerticesTextureCoordBuffer);
+
+  var textureCoordinates = [
+    // vorne
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // hinten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // oben
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // unten
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // rechts
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0,
+    // links
+    0.0,  0.0,
+    1.0,  0.0,
+    1.0,  1.0,
+    0.0,  1.0
+  ];
+
+  gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(textureCoordinates),
+                gl.STATIC_DRAW);
+
+ +

Zuerst erstellt dieser Code einen GL-Buffer in welchen wir die Texturkoordinaten für jede Fläche speichern werden, dann verknüpfen wir diesen Buffer als das Array in welchen wir schreiben werden.

+ +

Das textureCoordinates Array definiert die Texturkoordinaten entsprechend jedem Vertex von jeder Fläche. Beachten Sie, dass die Texturkoordinaten sich im Bereich von 0.0 bis 1.0 befinden. Beim Texturmapping werden die Dimensionen von Texturen immer auf einen Bereich von 0.0 bis 1.0 normiert, egal welche Größe die Textur wirklich hat.

+ +

Sobald wir das Texturmapping-Array erstellt haben, speichern wir das Array in den Buffer, sodass GL die Daten zur Verfügung hat.

+ +

Die Shader aktualisieren

+ +

Das Shader-Programm - und der Code, der die Shader initialisiert - muss aktualisiert werden, damit die Textur anstatt der Farben verwendet wird.

+ +

Werfen wir zunächst einen Blick auf die einfache Änderung, die in initShaders() benötigt wird:

+ +
  textureCoordAttribute = gl.getAttribLocation(shaderProgram, "aTextureCoord");
+  gl.enableVertexAttribArray(textureCoordAttribute);
+
+ +

Das ersetzt den Code, der die Vertex Farbattribute enthielt, mit dem, der nun die Texturkoordinaten für jeden Vertex enthält.

+ +

Der Vertex-Shader

+ +

Als Nächstes müssen wir den Vertex-Shader ersetzen, sodass statt der Farbdaten die Texturkoordinaten abgerufen werden.

+ +
    <script id="shader-vs" type="x-shader/x-vertex">
+      attribute vec3 aVertexPosition;
+      attribute vec2 aTextureCoord;
+
+      uniform mat4 uMVMatrix;
+      uniform mat4 uPMatrix;
+
+      varying vec2 vTextureCoord;
+
+      void main(void) {
+        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
+        vTextureCoord = aTextureCoord;
+      }
+    </script>
+
+ +

Die wichtigste Änderung ist hier, dass anstatt die Vertex-Farbe abzurufen, die Texturkoordinaten gesetzt werden. Das gibt den Ort der Textur entsprechend zum Vertex an.

+ +

Der Fragment-Shader

+ +

Der Fragment-Shader muss in ähnlicher Weise geändert werden:

+ +
    <script id="shader-fs" type="x-shader/x-fragment">
+      varying vec2 vTextureCoord;
+
+      uniform sampler2D uSampler;
+
+      void main(void) {
+        gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
+      }
+    </script>
+
+ +

Anstatt einen Farbwert auf die Fragment-Farbe zu legen, wird die Fragment-Farbe berechnet in dem der texel (der Pixel innerhalb der Textur) abgerufen wird, der am Besten auf die Fragement-Position laut dem Sampler passt.

+ +

Zeichnen des textuierten Würfels

+ +

Die Änderungen an der drawScene() Funktion sind einfach (mit der Ausnahme, dass ich nun zur besseren Anschaulichkeit die Verschiebungen entfernt habe und der Würfel nur noch rotiert wird).

+ +

Der Code, der die Farben auf die Textur legt ist weg und wurde ersetzt:

+ +
  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, cubeTexture);
+  gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
+
+ +

GL ermöglicht 32 Textur-Register; der Erste davon ist gl.TEXTURE0. Wir verknüpfen unsere geladene Textur zu diesem Register, dann wird der Shader-Sampler uSampler gesetzt (im Shader-Program festgelegt), um die Textur zu benutzen.

+ +

Jetzt sollte der rotierende Würfel gut anzuschauen zu sein. Wenn Ihr Browser WebGL unterstützt, können Sie das Live-Beispiel ausprobieren.

+ +

{{PreviousNext("Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen", "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL")}}

diff --git a/files/de/web/api/webglactiveinfo/index.html b/files/de/web/api/webglactiveinfo/index.html new file mode 100644 index 0000000000..ed46e4e058 --- /dev/null +++ b/files/de/web/api/webglactiveinfo/index.html @@ -0,0 +1,129 @@ +--- +title: WebGLActiveInfo +slug: Web/API/WebGLActiveInfo +translation_of: Web/API/WebGLActiveInfo +--- +
{{APIRef("WebGL")}}
+ +

Das WebGLActiveInfo-Interface ist Teil der WebGL API und repräsentiert die Informationen der Rückgabewerte von den {{domxref("WebGLRenderingContext.getActiveAttrib()")}} und {{domxref("WebGLRenderingContext.getActiveUniform()")}} Methoden.

+ +

Eigenschaften

+ +
+
{{domxref("WebGLActiveInfo.name")}}
+
Der schreibgeschützte Name von der abgefragten Variable
+
{{domxref("WebGLActiveInfo.size")}}
+
Die schreibgeschützte Größe der abgefragten Variable
+
{{domxref("WebGLActiveInfo.type")}}
+
Der schreibgeschützte Typ der abgefragten Variable
+
+ +

Beispiele

+ +

Ein WebGLActiveInfo-Objekt wird von den folgenden Funktionen zurück gegeben:

+ + + +
WebGLActiveInfo? getActiveAttrib(WebGLProgram? program, GLuint index);
+WebGLActiveInfo? getActiveUniform(WebGLProgram? program, GLuint index);
+WebGLActiveInfo? getTransformFeedbackVarying(WebGLProgram? program, GLuint index)
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.11", "WebGLActiveInfo")}}{{Spec2('WebGL')}}Erstmalige Definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Dieses Feature ist durch eine Voreinstellung deaktiviert. Zur Aktivierung setzt man in about:config den Wert gfx.offscreencanvas.enabled auf true.

+ +

See also

+ + diff --git a/files/de/web/api/webglprogram/index.html b/files/de/web/api/webglprogram/index.html new file mode 100644 index 0000000000..3d115b5947 --- /dev/null +++ b/files/de/web/api/webglprogram/index.html @@ -0,0 +1,166 @@ +--- +title: WebGLProgram +slug: Web/API/WebGLProgram +tags: + - WebGL + - WebGLProgram +translation_of: Web/API/WebGLProgram +--- +
{{APIRef("WebGL")}}
+ +

Das WebGLProgram ist ein Teil der WebGL API und ist eine Kombination aus zwei kompilierten {{domxref("WebGLShader")}}n, bestehend aus einem Vertex-Shader und einem Fragment-Shader (beide in GLSL geschrieben). Diese werden dann zu einem benutzbaren Programm zusammen gelinkt.

+ +
var program = gl.createProgram();
+
+// Bereits existierende Shader hinzufügen
+gl.attachShader(program, vertexShader);
+gl.attachShader(program, fragmentShader);
+
+gl.linkProgram(program);
+
+if ( !gl.getProgramParameter( program, gl.LINK_STATUS) ) {
+  var info = gl.getProgramInfoLog(program);
+  throw "WebGL-Programm konnte nicht kompiliert werden. \n\n" + info;
+}
+
+ +

Für weitere Informationen über das Erstellen von vertexShader und fragmentShader, lese dir {{domxref("WebGLShader")}} durch.

+ +

Beispiele

+ +

Das Program benutzen

+ +

Hier wird zu erst der GPU mit geteilt, dass sie das Programm benutzen soll. Danach werden die benötigten Daten und Konfigurationen vorgenommen und zuletzt wird etwas auf den Bildschirm gezeichnet.

+ +
// Das Programm benutzen
+gl.useProgram(program);
+
+// Bereits existierende Attribute binden
+gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+gl.enableVertexAttribArray(attributeLocation);
+gl.vertexAttribPointer(attributeLocation, 3, gl.FLOAT, false, 0, 0);
+
+// Ein einzelnes Dreieck zeichnen
+gl.drawArrays(gl.TRIANGLES, 0, 3);
+
+ +

Das Programm löschen

+ +

Falls es bei dem Linken des Programms zu fehlern kommt oder falls du ein bereits erstelltes Programm einfach nur löschen möchtest, dann kannst du einfach {{domxref("WebGLRenderingContext.deleteProgram()")}} ausführen. Dies löscht den Speicher des gelinkten Programms.

+ +
gl.deleteProgram(program);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebGL', "#5.6", "WebGLProgram")}}{{Spec2('WebGL')}}Erstmalige Definition
+ +

Browser-Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatUnknown}}128.1
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

Weiterführendes

+ + diff --git a/files/de/web/api/webglrenderingcontext/canvas/index.html b/files/de/web/api/webglrenderingcontext/canvas/index.html new file mode 100644 index 0000000000..4f54fd191e --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/canvas/index.html @@ -0,0 +1,74 @@ +--- +title: WebGLRenderingContext.canvas +slug: Web/API/WebGLRenderingContext/canvas +tags: + - Schreibgeschützt + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext/canvas +--- +
{{APIRef("WebGL")}}
+ +

Die Eigenschaft WebGLRenderingContext.canvas ist eine schreibgeschütze Referenz auf das {{domxref("HTMLCanvasElement")}} oder das {{domxref("OffscreenCanvas")}} Objekt, welches mit dem Context verknüpft ist. Es kann auch den Wert {{jsxref("null")}} annehmen, wenn es keinem {{HTMLElement("canvas")}} Element oder {{domxref("OffscreenCanvas")}} Objekt zugeordnet ist.

+ +

Syntax

+ +
gl.canvas;
+ +

Rückgabewert

+ +

Entweder ein {{domxref("HTMLCanvasElement")}}, ein {{domxref("OffscreenCanvas")}} Objekt oder {{jsxref("null")}}.

+ +

Beispiele

+ +

Canvas Element

+ +

Gegeben ist ein {{HTMLElement("canvas")}} Element:

+ +
<canvas id="canvas"></canvas>
+
+ +

Du kannst die Eigenschaft canvas aus dem WebGLRenderingContext auslesen um eine Referenz darauf zu erhalten.

+ +
var canvas = document.getElementById('canvas');
+var gl = canvas.getContext('webgl');
+gl.canvas; // HTMLCanvasElement
+
+ +

Offscreen Canvas

+ +

Beispiel des experimentellen {{domxref("OffscreenCanvas")}} Objektes.

+ +
var offscreen = new OffscreenCanvas(256, 256);
+var gl = offscreen.getContext('webgl');
+gl.canvas; // OffscreenCanvas
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#DOM-WebGLRenderingContext-canvas", "WebGLRenderingContext.canvas")}}{{Spec2('WebGL')}}Ursprüngliche Definition.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.WebGLRenderingContext.canvas")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html new file mode 100644 index 0000000000..0774b87631 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/getactiveattrib/index.html @@ -0,0 +1,115 @@ +--- +title: WebGLRenderingContext.getActiveAttrib() +slug: Web/API/WebGLRenderingContext/getActiveAttrib +translation_of: Web/API/WebGLRenderingContext/getActiveAttrib +--- +
{{APIRef("WebGL")}}
+ +

Die WebGLRenderingContext.getActiveAttrib() Methode der WebGL API gibt ein {{domxref("WebGLActiveInfo")}} Objekt zurück, welches die Größe, den Typ und den Namen eines Vertex-Attributes an der gegebenen Position in einem {{domxref("WebGLProgram")}} enthält.

+ +

Syntax

+ +
WebGLActiveInfo gl.getActiveAttrib(program,index);
+
+ +

Parameter

+ +
+
program
+
Ein {{domxref("WebGLProgram")}}, welches das Vertex-Attribut enthält
+
index
+
Ein {{domxref("GLuint")}}, welcher den Index des Vertex-Attributes angibt
+
+ +

Rückgabewert

+ +

Ein {{domxref("WebGLActiveInfo")}} Objekt.

+ +

Beispiele

+ +
gl.getActiveAttrib(program, i);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebGL', "#5.14.10", "getActiveAttrib")}}{{Spec2('WebGL')}}Erstmalige Definition
{{SpecName('OpenGL ES 2.0', "glGetActiveAttrib.xml", "glGetActiveAttrib")}}{{Spec2('OpenGL ES 2.0')}}Man page der OpenGL API
+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}12{{CompatGeckoDesktop("2.0")}}11{{CompatOpera("12")}}{{CompatSafari("5.1")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatGeckoMobile("2.0")}}1.0{{CompatUnknown}}128.0
+
+ +

Weiterführendes

+ + diff --git a/files/de/web/api/webglrenderingcontext/getattriblocation/index.html b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html new file mode 100644 index 0000000000..7088f72b90 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/getattriblocation/index.html @@ -0,0 +1,65 @@ +--- +title: WebGLRenderingContext.getAttribLocation() +slug: Web/API/WebGLRenderingContext/getAttribLocation +translation_of: Web/API/WebGLRenderingContext/getAttribLocation +--- +
{{APIRef("WebGL")}}
+ +

Die Methode WebGLRenderingContext.getAttribLocation() aus der WebGL API gibt die Position einer At­tri­but Variable innerhalb eines gegebenen {{domxref("WebGLProgram")}} zurück.

+ +

Syntax

+ +
GLint gl.getAttribLocation(program, name);
+
+ +

Parameter

+ +
+
program
+
Ein {{domxref("WebGLProgram")}} das die At­tri­but Variable enthält.
+
name
+
Ein {{domxref("DOMString")}} der den Namen des Attributes angibt, dessen Position gesucht wird.
+
+ +

Rückgabewert

+ +

Wenn gefunden, wird die Position der Variable als {{domxref("GLint")}}, andernfalls -1 zurückgegeben.

+ +

Beispiele

+ +
gl.getAttribLocation(program, 'vColor');
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('WebGL', "#5.14.10", "getAttribLocation")}}{{Spec2('WebGL')}}Ursprüngliche Definition.
{{SpecName('OpenGL ES 2.0', "glGetAttribLocation.xml", "glGetAttribLocation")}}{{Spec2('OpenGL ES 2.0')}}Hauptseite der OpenGL API.
+ +

Browserkompatibilität

+ + + +

{{Compat("api.WebGLRenderingContext.getAttribLocation")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/webglrenderingcontext/index.html b/files/de/web/api/webglrenderingcontext/index.html new file mode 100644 index 0000000000..77182a3177 --- /dev/null +++ b/files/de/web/api/webglrenderingcontext/index.html @@ -0,0 +1,441 @@ +--- +title: WebGLRenderingContext +slug: Web/API/WebGLRenderingContext +tags: + - NeedsTranslation + - TopicStub + - WebGL + - WebGLRenderingContext +translation_of: Web/API/WebGLRenderingContext +--- +
{{APIRef("WebGL")}}
+ +

The WebGLRenderingContext interface provides the OpenGL ES 2.0 rendering context for the drawing surface of an HTML {{HTMLElement("canvas")}} element.

+ +

To get an object of this interface, call {{domxref("HTMLCanvasElement.getContext()", "getContext()")}} on a <canvas> element, supplying "webgl" as the argument:

+ +
var canvas = document.getElementById('myCanvas');
+var gl = canvas.getContext('webgl');
+
+ +

Once you have the WebGL rendering context for a canvas, you can render within it.

+ +

The WebGL tutorial has more information, examples, and resources on how to get started with WebGL.

+ +

Constants

+ +

See the WebGL constants page.

+ +

The WebGL context

+ +

The following properties and methods provide general information and functionality to deal with the WebGL context:

+ +
+
{{domxref("WebGLRenderingContext.canvas")}}
+
A read-only back-reference to the {{domxref("HTMLCanvasElement")}}. Might be {{jsxref("null")}} if it is not associated with a {{HTMLElement("canvas")}} element.
+
{{domxref("WebGLRenderingContext.commit()")}} {{experimental_inline}}
+
+

Pushes frames back to the original {{domxref("HTMLCanvasElement")}}, if the context is not directly fixed to a specific canvas.

+
+
{{domxref("WebGLRenderingContext.drawingBufferWidth")}}
+
The read-only width of the current drawing buffer. Should match the width of the canvas element associated with this context.
+
{{domxref("WebGLRenderingContext.drawingBufferHeight")}}
+
The read-only height of the current drawing buffer. Should match the height of the canvas element associated with this context.
+
{{domxref("WebGLRenderingContext.getContextAttributes()")}}
+
Returns a WebGLContextAttributes object that contains the actual context parameters. Might return {{jsxref("null")}}, if the context is lost.
+
{{domxref("WebGLRenderingContext.isContextLost()")}}
+
Returns true if the context is lost, otherwise returns false.
+
+ +

Viewing and clipping

+ +
+
{{domxref("WebGLRenderingContext.scissor()")}}
+
Defines the scissor box.
+
{{domxref("WebGLRenderingContext.viewport()")}}
+
Sets the viewport.
+
+ +

State information

+ +
+
{{domxref("WebGLRenderingContext.activeTexture()")}}
+
Selects the active texture unit.
+
{{domxref("WebGLRenderingContext.blendColor()")}}
+
Sets the source and destination blending factors.
+
{{domxref("WebGLRenderingContext.blendEquation()")}}
+
Sets both the RGB blend equation and alpha blend equation to a single equation.
+
{{domxref("WebGLRenderingContext.blendEquationSeparate()")}}
+
Sets the RGB blend equation and alpha blend equation separately.
+
{{domxref("WebGLRenderingContext.blendFunc()")}}
+
Defines which function is used for blending pixel arithmetic.
+
{{domxref("WebGLRenderingContext.blendFuncSeparate()")}}
+
Defines which function is used for blending pixel arithmetic for RGB and alpha components separately.
+
{{domxref("WebGLRenderingContext.clearColor()")}}
+
Specifies the color values used when clearing color buffers.
+
{{domxref("WebGLRenderingContext.clearDepth()")}}
+
Specifies the depth value used when clearing the depth buffer.
+
{{domxref("WebGLRenderingContext.clearStencil()")}}
+
Specifies the stencil value used when clearing the stencil buffer.
+
{{domxref("WebGLRenderingContext.colorMask()")}}
+
Sets which color components to enable or to disable when drawing or rendering to a {{domxref("WebGLFramebuffer")}}.
+
{{domxref("WebGLRenderingContext.cullFace()")}}
+
Specifies whether or not front- and/or back-facing polygons can be culled.
+
{{domxref("WebGLRenderingContext.depthFunc()")}}
+
Specifies a function that compares incoming pixel depth to the current depth buffer value.
+
{{domxref("WebGLRenderingContext.depthMask()")}}
+
Sets whether writing into the depth buffer is enabled or disabled.
+
{{domxref("WebGLRenderingContext.depthRange()")}}
+
Specifies the depth range mapping from normalized device coordinates to window or viewport coordinates.
+
{{domxref("WebGLRenderingContext.disable()")}}
+
Disables specific WebGL capabilities for this context.
+
{{domxref("WebGLRenderingContext.enable()")}}
+
Enables specific WebGL capabilities for this context.
+
{{domxref("WebGLRenderingContext.frontFace()")}}
+
Specifies whether polygons are front- or back-facing by setting a winding orientation.
+
{{domxref("WebGLRenderingContext.getParameter()")}}
+
Returns a value for the passed parameter name.
+
{{domxref("WebGLRenderingContext.getError()")}}
+
Returns error information.
+
{{domxref("WebGLRenderingContext.hint()")}}
+
Specifies hints for certain behaviors. The interpretation of these hints depend on the implementation.
+
{{domxref("WebGLRenderingContext.isEnabled()")}}
+
Tests whether a specific WebGL capability is enabled or not for this context.
+
{{domxref("WebGLRenderingContext.lineWidth()")}}
+
Sets the line width of rasterized lines.
+
{{domxref("WebGLRenderingContext.pixelStorei()")}}
+
Specifies the pixel storage modes
+
{{domxref("WebGLRenderingContext.polygonOffset()")}}
+
Specifies the scale factors and units to calculate depth values.
+
{{domxref("WebGLRenderingContext.sampleCoverage()")}}
+
Specifies multi-sample coverage parameters for anti-aliasing effects.
+
{{domxref("WebGLRenderingContext.stencilFunc()")}}
+
Sets the both front and back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilFuncSeparate()")}}
+
Sets the front and/or back function and reference value for stencil testing.
+
{{domxref("WebGLRenderingContext.stencilMask()")}}
+
Controls enabling and disabling of both the front and back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilMaskSeparate()")}}
+
Controls enabling and disabling of front and/or back writing of individual bits in the stencil planes.
+
{{domxref("WebGLRenderingContext.stencilOp()")}}
+
Sets both the front and back-facing stencil test actions.
+
{{domxref("WebGLRenderingContext.stencilOpSeparate()")}}
+
Sets the front and/or back-facing stencil test actions.
+
+ +

Buffers

+ +
+
{{domxref("WebGLRenderingContext.bindBuffer()")}}
+
Binds a WebGLBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.bufferData()")}}
+
Updates buffer data.
+
{{domxref("WebGLRenderingContext.bufferSubData()")}}
+
Updates buffer data starting at a passed offset.
+
{{domxref("WebGLRenderingContext.createBuffer()")}}
+
Creates a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.deleteBuffer()")}}
+
Deletes a WebGLBuffer object.
+
{{domxref("WebGLRenderingContext.getBufferParameter()")}}
+
Returns information about the buffer.
+
{{domxref("WebGLRenderingContext.isBuffer()")}}
+
Returns a Boolean indicating if the passed buffer is valid.
+
+ +

Framebuffers

+ +
+
{{domxref("WebGLRenderingContext.bindFramebuffer()")}}
+
Binds a WebGLFrameBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.checkFramebufferStatus()")}}
+
Returns the status of the framebuffer.
+
{{domxref("WebGLRenderingContext.createFramebuffer()")}}
+
Creates a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.deleteFramebuffer()")}}
+
Deletes a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferRenderbuffer()")}}
+
Attaches a WebGLRenderingBuffer object to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.framebufferTexture2D()")}}
+
Attaches a textures image to a WebGLFrameBuffer object.
+
{{domxref("WebGLRenderingContext.getFramebufferAttachmentParameter()")}}
+
Returns information about the framebuffer.
+
{{domxref("WebGLRenderingContext.isFramebuffer()")}}
+
Returns a Boolean indicating if the passed WebGLFrameBuffer object is valid.
+
{{domxref("WebGLRenderingContext.readPixels()")}}
+
Reads a block of pixels from the WebGLFrameBuffer.
+
+ +

Renderbuffers

+ +
+
{{domxref("WebGLRenderingContext.bindRenderbuffer()")}}
+
Binds a WebGLRenderBuffer object to a given target.
+
{{domxref("WebGLRenderingContext.createRenderbuffer()")}}
+
Creates a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.deleteRenderbuffer()")}}
+
Deletes a WebGLRenderBuffer object.
+
{{domxref("WebGLRenderingContext.getRenderbufferParameter()")}}
+
Returns information about the renderbuffer.
+
{{domxref("WebGLRenderingContext.isRenderbuffer()")}}
+
Returns a Boolean indicating if the passed WebGLRenderingBuffer is valid.
+
{{domxref("WebGLRenderingContext.renderbufferStorage()")}}
+
Creates a renderbuffer data store.
+
+ +

Textures

+ +
+
{{domxref("WebGLRenderingContext.bindTexture()")}}
+
Binds a WebGLTexture object to a given target.
+
{{domxref("WebGLRenderingContext.compressedTexImage2D()")}}
+
Specifies a 2D texture image in a compressed format.
+
{{domxref("WebGLRenderingContext.compressedTexSubImage2D()")}}
+
Specifies a 2D texture sub-image in a compressed format.
+
{{domxref("WebGLRenderingContext.copyTexImage2D()")}}
+
Copies a 2D texture image.
+
{{domxref("WebGLRenderingContext.copyTexSubImage2D()")}}
+
Copies a 2D texture sub-image.
+
{{domxref("WebGLRenderingContext.createTexture()")}}
+
Creates a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.deleteTexture()")}}
+
Deletes a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.generateMipmap()")}}
+
Generates a set of mipmaps for a WebGLTexture object.
+
{{domxref("WebGLRenderingContext.getTexParameter()")}}
+
Returns information about the texture.
+
{{domxref("WebGLRenderingContext.isTexture()")}}
+
Returns a Boolean indicating if the passed WebGLTexture is valid.
+
{{domxref("WebGLRenderingContext.texImage2D()")}}
+
Specifies a 2D texture image.
+
{{domxref("WebGLRenderingContext.texSubImage2D()")}}
+
Updates a sub-rectangle of the current WebGLTexture.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameterf()")}}
+
Sets texture parameters.
+
{{domxref("WebGLRenderingContext.texParameter", "WebGLRenderingContext.texParameteri()")}}
+
Sets texture parameters.
+
+ +

Programs and shaders

+ +
+
{{domxref("WebGLRenderingContext.attachShader()")}}
+
Attaches a WebGLShader to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.bindAttribLocation()")}}
+
Binds a generic vertex index to a named attribute variable.
+
{{domxref("WebGLRenderingContext.compileShader()")}}
+
Compiles a WebGLShader.
+
{{domxref("WebGLRenderingContext.createProgram()")}}
+
Creates a WebGLProgram.
+
{{domxref("WebGLRenderingContext.createShader()")}}
+
Creates a WebGLShader.
+
{{domxref("WebGLRenderingContext.deleteProgram()")}}
+
Deletes a WebGLProgram.
+
{{domxref("WebGLRenderingContext.deleteShader()")}}
+
Deletes a WebGLShader.
+
{{domxref("WebGLRenderingContext.detachShader()")}}
+
Detaches a WebGLShader.
+
{{domxref("WebGLRenderingContext.getAttachedShaders()")}}
+
Returns a list of WebGLShader objects attached to a WebGLProgram.
+
{{domxref("WebGLRenderingContext.getProgramParameter()")}}
+
Returns information about the program.
+
{{domxref("WebGLRenderingContext.getProgramInfoLog()")}}
+
Returns the information log for a WebGLProgram object.
+
{{domxref("WebGLRenderingContext.getShaderParameter()")}}
+
Returns information about the shader.
+
{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}
+
Returns a WebGLShaderPrecisionFormat object describing the precision for the numeric format of the shader.
+
{{domxref("WebGLRenderingContext.getShaderInfoLog()")}}
+
Returns the information log for a WebGLShader object.
+
{{domxref("WebGLRenderingContext.getShaderSource()")}}
+
Returns the source code of a WebGLShader as a string.
+
{{domxref("WebGLRenderingContext.isProgram()")}}
+
Returns a Boolean indicating if the passed WebGLProgram is valid.
+
{{domxref("WebGLRenderingContext.isShader()")}}
+
Returns a Boolean indicating if the passed WebGLShader is valid.
+
{{domxref("WebGLRenderingContext.linkProgram()")}}
+
Links the passed WebGLProgram object.
+
{{domxref("WebGLRenderingContext.shaderSource()")}}
+
Sets the source code in a WebGLShader.
+
{{domxref("WebGLRenderingContext.useProgram()")}}
+
Uses the specified WebGLProgram as part the current rendering state.
+
{{domxref("WebGLRenderingContext.validateProgram()")}}
+
Validates a WebGLProgram.
+
+ +

Uniforms and attributes

+ +
+
{{domxref("WebGLRenderingContext.disableVertexAttribArray()")}}
+
Disables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.enableVertexAttribArray()")}}
+
Enables a vertex attribute array at a given position.
+
{{domxref("WebGLRenderingContext.getActiveAttrib()")}}
+
Returns information about an active attribute variable.
+
{{domxref("WebGLRenderingContext.getActiveUniform()")}}
+
Returns information about an active uniform variable.
+
{{domxref("WebGLRenderingContext.getAttribLocation()")}}
+
Returns the location of an attribute variable.
+
{{domxref("WebGLRenderingContext.getUniform()")}}
+
Returns the value of a uniform variable at a given location.
+
{{domxref("WebGLRenderingContext.getUniformLocation()")}}
+
Returns the location of a uniform variable.
+
{{domxref("WebGLRenderingContext.getVertexAttrib()")}}
+
Returns information about a vertex attribute at a given position.
+
{{domxref("WebGLRenderingContext.getVertexAttribOffset()")}}
+
Returns the address of a given vertex attribute.
+
{{domxref("WebGLRenderingContext.uniform()", "WebGLRenderingContext.uniform[1234][fi][v]()")}}
+
Specifies a value for a uniform variable.
+
{{domxref("WebGLRenderingContext.uniformMatrix()", "WebGLRenderingContext.uniformMatrix[234]fv()")}}
+
Specifies a matrix value for a uniform variable.
+
{{domxref("WebGLRenderingContext.vertexAttrib()", "WebGLRenderingContext.vertexAttrib[1234]f[v]()")}}
+
Specifies a value for a generic vertex attribute.
+
{{domxref("WebGLRenderingContext.vertexAttribPointer()")}}
+
Specifies the data formats and locations of vertex attributes in a vertex attributes array.
+
+ +

Drawing buffers

+ +
+
{{domxref("WebGLRenderingContext.clear()")}}
+
Clears specified buffers to preset values.
+
{{domxref("WebGLRenderingContext.drawArrays()")}}
+
Renders primitives from array data.
+
{{domxref("WebGLRenderingContext.drawElements()")}}
+
Renders primitives from element array data.
+
{{domxref("WebGLRenderingContext.finish()")}}
+
Blocks execution until all previously called commands are finished.
+
{{domxref("WebGLRenderingContext.flush()")}}
+
Empties different buffer commands, causing all commands to be executed as quickly as possible.
+
+ +

Working with extensions

+ +

These methods manage WebGL extensions:

+ +
+
{{domxref("WebGLRenderingContext.getSupportedExtensions()")}}
+
Returns an {{jsxref("Array")}} of {{domxref("DOMString")}} elements with all the supported WebGL extensions.
+
{{domxref("WebGLRenderingContext.getExtension()")}}
+
Returns an extension object.
+
+ +

Examples

+ +

WebGL context feature detection

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "summary")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Detect_WebGL", "detect-webgl-source")}}

+ +

{{EmbedLiveSample("detect-webgl-source", 660,150 ,"" , "Learn/WebGL/By_example/Detect_WebGL")}}

+ +

Effect of canvas size on rendering with WebGL

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-intro")}}

+ +

{{page("/en-US/Learn/WebGL/By_example/Canvas_size_and_WebGL", "canvas-size-and-webgl-source")}}

+ +

{{EmbedLiveSample("canvas-size-and-webgl-source", 660,180 ,"" , "Learn/WebGL/By_example/Canvas_size_and_WebGL")}}

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('WebGL', "#5.14", "WebGLRenderingContext")}}{{Spec2('WebGL')}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("9")}}20{{CompatGeckoDesktop("2.0")}}{{CompatIE("11")}}{{CompatOpera("12")}}{{CompatSafari("5.1")}}
Available in workers{{CompatNo}}{{CompatNo}}{{CompatGeckoDesktop(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}25{{CompatVersionUnknown}}{{CompatGeckoMobile("2.0")}}1.0{{CompatUnknown}}128.0
Available in workers{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile(44)}} [1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

+ +

See also

+ + diff --git a/files/de/web/api/websocket/binarytype/index.html b/files/de/web/api/websocket/binarytype/index.html new file mode 100644 index 0000000000..da69c1ec8c --- /dev/null +++ b/files/de/web/api/websocket/binarytype/index.html @@ -0,0 +1,56 @@ +--- +title: WebSocket.binaryType +slug: Web/API/WebSocket/binaryType +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/binaryType +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.binaryType gibt den Typ von Binärdaten zurück, der übertragen wird.

+ +

Syntax

+ +
var binaryType = aWebSocket.binaryType;
+ +

Wert

+ +

Ein {{DOMXref("DOMString")}}:

+ +
+
"blob"
+
Wenn {{domxref("Blob")}} Objekte benutzt werden.
+
"arraybuffer"
+
Wenn {{jsxref("ArrayBuffer")}} Objekte benutzt werden. + +
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-binarytype', 'WebSocket: binaryType')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.binaryType")}}

diff --git a/files/de/web/api/websocket/close/index.html b/files/de/web/api/websocket/close/index.html new file mode 100644 index 0000000000..9aec5890d0 --- /dev/null +++ b/files/de/web/api/websocket/close/index.html @@ -0,0 +1,64 @@ +--- +title: WebSocket.close() +slug: Web/API/WebSocket/close +tags: + - API + - Funktion + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/close +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Funktion WebSocket.close() beendet eine {{domxref("WebSocket")}} Verbindung oder den Versuch eines Verbindungsaufbaus. Wenn diese schon geschlossen ist, passiert nichts weiter.

+ +

Syntax

+ +
WebSocket.close();
+ +

Parameter

+ +
+
code {{optional_inline}}
+
Ein numerisch Wert, der den Status angibt, warum die Verbindung geschlossen wird. Wird kein Wert spezifiziert, . Zur Referenz kann diese Liste mit Codes des {{domxref("CloseEvent")}}s für gültige Werte genommen werden.
+
reason {{optional_inline}}
+
Ein lesbarer Text, welcher erklärt, warum die Verbindung geschlossen wird. Dieser muss UTF-8 kodiert und darf nicht länger als 123 Bytes sein.
+
+ +

Fehler

+ +
+
INVALID_ACCESS_ERR
+
Ein ungültiger code wurde angegeben.
+
SYNTAX_ERR
+
Der reason Text ist zu lang oder enthält ungültige Zeichen.
+
+ +
+

Note: In Gecko unterstützte diese Funktion bis zu Version 8.0 {{geckoRelease("8.0")}} keine Parameter.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
HTML Living Standard
+ The definition of 'WebSocket.close()' in that specification.		Living StandardInitial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.close")}}

diff --git a/files/de/web/api/websocket/extensions/index.html b/files/de/web/api/websocket/extensions/index.html new file mode 100644 index 0000000000..bbc5d722c4 --- /dev/null +++ b/files/de/web/api/websocket/extensions/index.html @@ -0,0 +1,49 @@ +--- +title: WebSocket.extensions +slug: Web/API/WebSocket/extensions +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/extensions +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.extensions gibt die Erweiterungen des Servers zurück. Sie ist nur lesbar.

+ +

Syntax

+ +
var extensions = aWebSocket.extensions;
+ +

Wert

+ +

Ein {{domxref("DOMString")}}.

+ +

Momentan ist dies entweder ein leerer String oder eine Liste an Erweiterungen, welche zwischen dem Server und dem Client ausgehandelt wurden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-extensions', 'WebSocket: extensions')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.extensions")}}

diff --git a/files/de/web/api/websocket/index.html b/files/de/web/api/websocket/index.html new file mode 100644 index 0000000000..641c788179 --- /dev/null +++ b/files/de/web/api/websocket/index.html @@ -0,0 +1,314 @@ +--- +title: WebSocket +slug: Web/API/WebSocket +tags: + - API + - WebSocket + - WebSockets +translation_of: Web/API/WebSocket +--- +

{{APIRef("Web Sockets API")}}{{ SeeCompatTable() }}

+ +

Das WebSocket-Objekt bietet die API für das Erstellen und Verwalten einer WebSocket-Verbindung zu einem Server, ebenso dient es auch dem Senden und dem Empfangen von Daten auf der Verbindung.

+ +

Der WebSocket-Konstruktor akzeptiert einen benötigten und einen optionalen Parameter:

+ +
WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString protocols
+);
+
+WebSocket WebSocket(
+  in DOMString url,
+  in optional DOMString[] protocols
+);
+
+ +
+
url
+
Die URL mit der sich das WebSocket verbinden soll; dies sollte die URL sein, auf welcher der WebSocket Server antworten wird.
+
protocols {{ optional_inline() }}
+
Entweder ein einzelnes Protokol als String oder ein Array aus Protokol-Strings. Diese Strings werden genutzt um Sub-Protokolle zu indizieren, sodass ein einzelner Server mehrere WebSocket Sub-Protokolle implementieren kann (Beispielsweiße kann ein Server abhängig vom protocol verschiedene Interaktionen mit dem Client handeln). Falls du kein Protokoll angibst, wird ein leerer String verwendet.
+
+ +

Der Konstruktur kann folgende Exceptions werfen:

+ +
+
SECURITY_ERR
+
Der Port auf dem man die Verbindung aufbauen will, ist blockiert worden.
+
+ +
+
+ +

Methoden Übersicht

+ + + + + + + + + + +
void close(in optional unsigned long code, in optional DOMString reason);
void send(in DOMString data);
+ +

Attribute

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTypBeschreibung
binaryType{{ DOMXref("DOMString") }}Ein String indiziert den Typ der Binärdaten, die von der Verbindung übertragen werden. Dies sollte entweder "blob" sein, falls DOM-Objekte {{ domxref("Blob") }} genutzt werden oder "arraybuffer" falls ArrayBuffer-Objekte genutzt werden.
bufferedAmountunsigned longDie Anzahl der Bytes der Daten, welche bereits durch Aufrufe von {{ manch("send") }} gebuffert wurden, allerdings noch nicht über das Netzwerk versand wurden. Dieses Feld setzt sich nicht auf Null zurück, wenn die Verbindung beendet wurde; falls du weiterhin {{ manch("send") }} aufrufst, wird dieses Feld weiterhin ansteigen. Read only.
extensions{{ DOMXref("DOMString") }}Die Erweiterungen, die von dem Server gewählt wurden. Aktuell ist dies nur ein leerer String oder eine Liste von Erweiterungen, die von der Verbindung verhandelt wurden.
onclose{{ domxref("EventListener") }}Ein Event-Listener welcher aufgerufen wird, wenn der readyState der WebSocket-Verbindung auf CLOSED wechselt. Den Listener erreicht ein CloseEvent welches "close" heißt.
onerror{{ domxref("EventListener") }}Ein Event-Listener welcher bei Fehlern aufgerufen wird. Dies ist ein einfaches Event welches "error" genannt wird.
onmessage{{ domxref("EventListener") }}Ein Event-Listener welcher aufgerufen wird, wenn eine Nachricht vom Server empfangen wird. Den Listener erreicht ein MessageEvent welches "message" heißt.
onopen{{ domxref("EventListener") }}Ein Event-Listener welcher aufgerufen wird, wenn der readyState der WebSocket-Verbindung auf OPEN wechselt; dies indiziert, dass die Verbindung bereit ist, dass man Daten versenden und empfangen kann. Dieses Event ist eine einfaches Event, es heißt "open".
protocol{{ DOMXref("DOMString") }}Ein String welcher dne Namen des Sub-Protokolls nennt, welches vom Server ausgewählt wurde; dieses Protokoll wird eines sein, welches in den Strings des protocols-Parameter beim Erstellen des WebSocket-Objekt angegeben wurde.
readyStateunsigned shortDer aktuelle Status der Verbindung; dies ist einer der {{ anch("Ready state Konstanten") }}. Read only.
url{{ DOMXref("DOMString") }}Die URL welche beim Konstruktor angegeben wurde. Dies ist immer die absolute URL. Read only.
+ +

Konstanten

+ +

Ready state Konstanten

+ +

Diese Konstanten werden vom readyState Attribut genutzt, um den Status der WebSocket-Verbindung zu beschreiben.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KonstanteInhaltBeschreibung
CONNECTING0Die Verbindung ist noch nicht hergestellt.
OPEN1Die Verbindung ist hergestellt und bereit darüber zu kommunizieren.
CLOSING2Die Verbindung ist im Prozess des Schließens.
CLOSED3Die Verbindung ist geschlossen oder konnte nicht hergestellt werden.
+ +

Methoden

+ +

close()

+ +

Schließt die WebSocket-Verbindung oder den Verbindungsversuch, falls dieser gerade existiert. Falls die Verbindung bereits CLOSED ist, macht diese Methode überhaupt nichts.

+ +
void close(
+  in optional unsigned short code,
+  in optional DOMString reason
+);
+
+ +
Parameter
+ +
+
code {{ optional_inline() }}
+
Eine Nummer welche den Status-Code setzt, warum die Verbindung geschlossen wird. Falls dieser Parameter nicht gesetzt wird, wird er auf 1005 (welcher bei einer normalen Verbindung "Keinen Status erhalten" bedeutet) gesetzt.
+
reason {{ optional_inline() }}
+
Ein vom Menschen lesbarer String, welcher erklärt, warum die Verbindung geschlossen wurde. Dieser Text darf nicht länger als 123 Bytes UTF-8-Text sein. Dabei heißt dies nicht unbedingt, dass es auch 123 Zeichen sind.
+
+ +
Exceptions thrown
+ +
+
INVALID_ACCESS_ERR
+
Ein ungültiger code wurde gesetzt.
+
SYNTAX_ERR
+
Der reason-String ist zu lang oder enthält ungültige Zeichen.
+
+ +
Notizen
+ +

In Gecko vor Version Gecko 8.0 unterstützte diese Methode überhaupt keine Parameter. {{ geckoRelease("8.0") }}.

+ +

send()

+ +

Überträgt Daten zu dem Server über die WebSocket-Verbindung.

+ +
void send(
+  in DOMString data
+);
+
+void send(
+  in ArrayBuffer data
+);
+
+void send(
+  in Blob data
+);
+
+ +
Parameter
+ +
+
data
+
Ein String der zum Server geschickt wird.
+
+ +
Exceptions thrown
+ +
+
INVALID_STATE_ERR
+
Die Verbindung hat aktuell nicht den Status OPEN.
+
SYNTAX_ERR
+
data enthält ungültige Zeichen.
+
+ +
Erläuterung
+ +
+

Notiz: Geckos Implementierung von der send() Methode unterscheidet sich ein wenig von der Spezifikation in {{Gecko("6.0")}}; Gecko gibt einen boolean zurück, welcher darüber auskunft gibt, ob die Verbindung immer noch hergestellt ist oder nicht (und, durch Erweiterung, dass die Daten erfolgreich gesammelt oder übertragen wurden); dies wurde in {{Gecko("8.0")}} korrigiert.

+ +

In {{Gecko("11.0")}} ist die Unterstützung für  ArrayBuffer implementiert aber nicht die für {{ domxref("Blob") }} Datentypen.

+
+ +

Weiterführendes

+ + + +

Browser Kompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatGeckoDesktop("2.0") }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
Sub-protocol support{{ CompatUnknown() }}{{ CompatGeckoDesktop("6.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("7.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
Sub-protocol support{{ CompatUnknown() }}{{ CompatGeckoMobile("7.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

Gecko Notizen

+ +

In Gecko 6.0 ist der Konstruktur mit einem Prefix ausgestattet; du must MozWebSocket() benutzen:

+ +
var mySocket = new MozWebSocket("http://www.example.com/socketserver");
+
+ +

Das extensions-Attribut wurde bis Gecko 8.0 nicht unterstützt.

+ +
Notiz: Vor {{Gecko("11.0")}} ausgehende Nachrichten welche mit der {{ manch("send") }} Methode versendet wurden, waren auf 16 MB begrenzt. Jetzt können sie bis zu 2 GB wachsen.
+ +

{{ languages ( {"zh-tw": "zh_tw/WebSockets/WebSockets_reference/WebSocket"} ) }}

diff --git a/files/de/web/api/websocket/onclose/index.html b/files/de/web/api/websocket/onclose/index.html new file mode 100644 index 0000000000..9e112fb499 --- /dev/null +++ b/files/de/web/api/websocket/onclose/index.html @@ -0,0 +1,45 @@ +--- +title: WebSocket.onclose +slug: Web/API/WebSocket/onclose +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/onclose +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.onclose ist ein {{domxref("EventHandler")}}, der aufgerufen wird, wenn die Eigenschaft {{domxref("WebSocket.readyState","WebSocket.readyState")}} zu {{domxref("WebSocket.readyState","CLOSED")}} geändert bzw. die Verbindung geschlossen wird.

+ +

Als Parameter übergeben wird ein {{domxref("CloseEvent")}}.

+ +

Syntax

+ +
aWebSocket.onclose = function(event) {
+  console.log("WebSocket is closed now.");
+};
+ +

Wert

+ +

Ein {{domxref("EventListener")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#handler-websocket-onclose', 'WebSocket: onclose')}}{{Spec2('HTML WHATWG')}}Initial definition
diff --git a/files/de/web/api/websocket/protocol/index.html b/files/de/web/api/websocket/protocol/index.html new file mode 100644 index 0000000000..ca76edd3a2 --- /dev/null +++ b/files/de/web/api/websocket/protocol/index.html @@ -0,0 +1,51 @@ +--- +title: WebSocket.protocol +slug: Web/API/WebSocket/protocol +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/protocol +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.protocol gibt den Namen des Unterprotokolls zurück, welches der Server ausgewählt hat. Sie ist nur lesbar.

+ +

Syntax

+ +
var protocol = aWebSocket.protocol;
+ +

Wert

+ +

A DOMString.

+ +

Entweder ist der String leer, oder enthält den Namen eines der Protokolle, welche im {{domxref("WebSocket")}} Konstruktor mit dem Parameter protocols übergeben wurden.

+ +

Siehe hier.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-protocol', 'WebSocket: protocol')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.protocol")}}

diff --git a/files/de/web/api/websocket/readystate/index.html b/files/de/web/api/websocket/readystate/index.html new file mode 100644 index 0000000000..9abc994d65 --- /dev/null +++ b/files/de/web/api/websocket/readystate/index.html @@ -0,0 +1,77 @@ +--- +title: WebSocket.readyState +slug: Web/API/WebSocket/readyState +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/readyState +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.readyState gibt den momentanen Status einer {{domxref("WebSocket")}} Verbindung zurück. Sie ist nur lesbar.

+ +

Syntax

+ +
var readyState = aWebSocket.readyState;
+ +

Werte

+ +

Einer der folgenden Werte kann vorhanden sein:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertStatusBeschreibung
0CONNECTINGDer Socket wurde erstellt, jedoch besteht noch keine Verbindung.
1OPENEine Verbindung wurde hergestellt und kann zur Kommunikation genutzt werden.
2CLOSINGDie Verbindung wird beendet.
3CLOSEDDie Verbindung wurde geschlossen oder konnte nicht geöffnet werden.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-websocket-readystate', 'WebSocket: readyState')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.readyState")}}

diff --git a/files/de/web/api/websocket/url/index.html b/files/de/web/api/websocket/url/index.html new file mode 100644 index 0000000000..56e0852dea --- /dev/null +++ b/files/de/web/api/websocket/url/index.html @@ -0,0 +1,47 @@ +--- +title: WebSocket.url +slug: Web/API/WebSocket/url +tags: + - API + - Eigenschaft + - Referenz + - Web API + - WebSocket +translation_of: Web/API/WebSocket/url +--- +

{{APIRef("Web Sockets API")}}

+ +

Die Eigenschaft WebSocket.url gibt die absolute URL eines {{domxref("WebSocket")}} zurück, wie sie im Konstruktor angegeben wurde. Sie ist nur lesbar.

+ +

Syntax

+ +
var url = aWebSocket.url;
+ +

Wert

+ +

Ein DOMString.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-websocket-url', 'WebSocket: url')}}{{Spec2('HTML WHATWG')}}Initial definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.WebSocket.url")}}

diff --git a/files/de/web/api/webxr_device_api/index.html b/files/de/web/api/webxr_device_api/index.html new file mode 100644 index 0000000000..69e10d7d3b --- /dev/null +++ b/files/de/web/api/webxr_device_api/index.html @@ -0,0 +1,298 @@ +--- +title: WebXR-Geräte-API +slug: Web/API/WebXR_Device_API +translation_of: Web/API/WebXR_Device_API +--- +

{{APIRef("WebXR Device API")}}{{Draft}}

+ +

WebXR ist eine Gruppe von Standards, die zusammen verwendet werden, um das Rendern von 3D-Szenen auf Hardware zu unterstützen, die für die Darstellung virtueller Welten(Virtuelle Realitätoder VR )entwickelt wurde, oder um der realen Welt grafische Bilder hinzuzufügen (Augmented Realityoder AR). Die WebXR-Geräte-API implementiert den Kern des WebXR-Feature-Sets, verwaltet die Auswahl von Ausgabegeräten, rendert die 3D-Szene mit der entsprechenden Bildrate auf das ausgewählte Gerät und verwaltet Bewegungsvektoren, die mit Eingabecontrollern erstellt wurden.

+ +

WebXR-kompatible Geräte umfassen vollständig immersive 3D-Headsets mit Bewegungs- und Orientierungsverfolgung, Brillen, die Grafiken über der realen Szene überlagern, die durch die Rahmen gehen, und Handheld-Handys, die die Realität erweitern, indem sie die Welt mit einer Kamera erfassen und diese Szene mit computergenerierten Bildern ergänzen.

+ +

Um dies zu erreichen, bietet die WebXR-Geräte-API die folgenden Schlüsselfunktionen:

+ + + +

Auf der grundlegendsten Ebene wird eine Szene in 3D dargestellt, indem die Perspektive berechnet wird, die auf die Szene angewendet werden soll, um sie aus der Sicht jedes benutzerischen Augen zu rendern, wobei der typische Abstand zwischen den Augen berücksichtigt wird, und dann die Szene zweimal, einmal für jedes Auge, gerendert wird. Die resultierenden Bilder (oder Bilder, wenn die Szene zweimal auf einem einzigen Frame gerendert wird, die Hälfte pro Auge) werden dann dem Benutzer angezeigt.

+ +

Da WebGL zum Rendern der 3D-Welt in die WebXR-Sitzung verwendet wird, sollten Sie zunächst mit der allgemeinen Verwendung von WebGL und mit den Grundlagen der 3D-Grafik im Allgemeinen vertraut sein. Sie verwenden höchstwahrscheinlich nicht direkt die WebGL-API, sondern eines der Frameworks oder Bibliotheken, die auf WebGL erstellt werden, um die Verwendung zu erleichtern. Zu den beliebtesten von ihnen ist three.js.

+ +

Ein besonderer Vorteil der Verwendung einer Bibliothek anstelle der direkten Verwendung der WebGL-API besteht darin, dass Bibliotheken dazu neigen, virtuelle Kamerafunktionen zu implementieren. OpenGL (und damit WebGL durch Erweiterung) bietet nicht direkt eine Kameraansicht, mit einer Bibliothek, die eine in Ihrem Namen simuliert kann Ihre Arbeit viel, viel einfacher machen, vor allem beim Erstellen von Code, die freie Bewegung durch Ihre virtuelle Welt ermöglicht.

+ +

Wichtige Gesundheits- und Sicherheitshinweise

+ +

Da der gesamte Akt der Schaffung einer virtuellen 3D-Welt im Wesentlichen ein Trick ist, der unser Verständnis davon nutzt, wie Augen Licht sammeln und wie das Gehirn die gesammelten Daten interpretiert, ist es wichtig zu bedenken, dass Software-Designer und Entwickler als solche die Verantwortung haben, noch vorsichtiger als üblich zu sein, um sicherzustellen, dass die Ergebnisse korrekt sind.

+ +

Defekte, Fehlstellungen oder Verzerrungen können die Augen und das Gehirn verwirren, was zu allem von schmerzenden Augen oder Kopfschmerzen bis hin zu schwindelerregendem Schwindel, Schwindel oder potenziell schwerer Übelkeit führt. Es ist auch wichtig, wachsam zu sein für alles, was Sie anzeigen können, die das Potenzial haben können, Anfälle auszulösen, angesichts der allumfassenden Natur der VR-Brille; Der Benutzer ist möglicherweise nicht in der Lage, schnell von den Bildern wegzuschauen, die Sie präsentieren, wenn es Zuflucht verursacht.

+ +

Wenn Sie Inhalte haben, die für Benutzer von Gefahr sein können, sollten Sie eine Warnmeldung bereitstellen. Besser sicher sein als entschuldigung!

+ +

WebXR Device API-Konzepte und -Nutzung

+ +

WebXR: AR and VR

+ +
+
Example WebXR hardware setup
+Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"
+ +

While the older WebVR API was designed solely to support Virtual Reality (VR), WebXR provides support for both VR and Augmented Reality (AR) on the web. Support for AR functionality is added by the WebXR Augmented Reality Module.

+ +

A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.

+ +

The equipment may also include an accelerometer, barometer, or other sensors which are used to sense when the user moves through space, rotates their head, or the like.

+ +

WebXR application lifecycle

+ +

Most applications using WebXR will follow a similar overall design pattern:

+ +
    +
  1. Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide. +
      +
    1. Make sure the WebXR API is available; if {{domxref("navigator.xr")}} is undefined, you can assume the user's browser and/or device doesn't support WebXR. If it's not supported, disable any user interface used to activate XR features and abort any attempts to enter XR mode.
      2. +
    2. Call {{DOMxRef("XR.isSessionSupported","navigator.xr.isSessionSupported()")}}, specifying the WebXR experience mode you want to provide: , , or , in order to determine whether or not the type of session you wish to provide is available.inlineimmersive-vrimmersive-ar
      3. +
    3. If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.
      4. +
    +
    2. +
  2. When the user requests the activation of WebXR functionality by engaging with the user interface enabled above, request an {{DOMxRef("XRSession")}} using the desired mode. This is done by calling {{DOMxRef("XR.requestSession","navigator.xr.requestSession()")}}, again specifying the string indicating the mode you want to enable: , , or .inlineimmersive-vrimmersive-ar
    3. +
  3. If the promise returned by  resolves, use the new {{domxref("XRSession")}} to run the frame loop for the entire duration of the WebXR experience.requestSession() +
      +
    1. Call the {{domxref("XRSession")}} method {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} to schedule the first frame render for the XR device.
      2. +
    2. Each  callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.requestAnimationFrame()
      3. +
    3. Keep calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} from within the callback to schedule each successive frame to be rendered.
      4. +
    +
    4. +
  4. When the time comes, end the XR session; otherwise, continue the loop until the user chooses to exit XR mode. +
      +
    1. To end the XR session yourself, call {{DOMxRef("XRSession.end", "XRSession.end()")}}.
      2. +
    2. Include a handler for the {{domxref("XRSession")}} event {{domxref("XRSession.end_event", "end")}} event to be informed when the session is ending, regardless of whether your code, the user, or the browser initiated the termination of the session.
      3. +
    +
    5. +
+ +

Permissions and security

+ +

The WebXR Device API is subject to a number of permission and security controls. While not onerous, they are worth being aware of. These mostly revolve around the fully-immersive  session mode, but there are things to be aware of when setting up an AR session, as well.immersive-vr

+ +

Immersive presentation of VR

+ +

First, any requests to activate the  mode are rejected if the domain issuing the request does not have permission to enable an immersive session. This permission comes from the  feature policy.immersive-vrxr-spatial-tracking

+ +

Once that check is passed, the request to enter mode is allowed if all of the following are true:immersive-vr

+ + + +

If all of that is true, the promise returned by  is resolved, and the new {{domxref("XRSession")}} object is passed into the fulfillment handler. Otherwise, an appropriate exception is thrown, such as  if the document doesn't have permission to enter immersive mode.requestSession()SecurityError

+ +

Inline presentation

+ +

When you request an {{domxref("XRSession")}} with the mode set to , and any features are required or requested, the browser will only allow the session to be created if the call to {{domxref("XR.requestSession", "requestSession()")}} was made by code which is executing expressly due to user intent.inline

+ +

Specifically:

+ + + +
+

Note: Additional requirements may be put into effect due to the specific features requested by the options object when calling .requestSession()

+
+ +

User intent

+ +

User intent is the concept of whether or not an action being performed by code is being performed because of something the user intends to do or not. There are two kinds of user intent: implicit and explicit.

+ +

Explicit user intent (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action.

+ +

Implicit user intent (implicit user consent) is assumed if either of the following scenarios is the case:

+ + + +

WebXR availability

+ +

As a new and still in development API, WebXR support is limited to specific devices and browsers; and even on those, it may not be enabled by default. There may be options available to allow you to experiment with WebXR even if you don't have a compatible system, however.

+ +

WebXR polyfill

+ +

The team designing the WebXR specification has published a WebXR polyfill which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older WebVR API, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.

+ +

The polyfill is maintained alongside the specification, and is kept up to date with the specification. Additionally, it is updated to maintain compatibility with browsers as their support for WebXR and other technologies related to it and to the implementation of the polyfill change over time.

+ +

Be sure to read the readme carefully; the polyfill comes in several versions depending on what degree of compatibility with newer JavaScript features your target browsers include.

+ +

WebXR API Emulator extension

+ +

The Mozilla WebXR team has created a WebXR API Emulator browser extension, compatible with both Firefox and Chrome, which emulates the WebXR API, simulating a variety of compatible devices such as the HTC Vive, the Oculus Go and Oculus Quest, Samsung Gear, and Google Cardboard. With the extension in place, you can open up a developer tools panel that lets you control the position and orientation of the headset and any hand controllers, as well as button presses on the controllers.

+ +
Emulator usage
+ +

While somewhat awkward compared to using an actual headset, this makes it possible to experiment with and developer WebXR code on a desktop computer, where WebXR isn't normally available. It also lets you perform some basic testing before taking your code to a real device. Be aware, however, that the emulator does not yet completely emulate all of the WebXR API, so you may run into problems you're not expecting. Again, carefully read the readme file and make sure you're aware of the limitations before you begin.

+ +
+

Important: You should always test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are not an adequate substitute for actual testing on physical devices.

+
+ +
Getting the extension
+ +

Download the WebXR API Emulator for your supported browser below:

+ + + +

The source code for the extension is also available on GitHub.

+ +
Emulator issues and notes
+ +

While this isn't the place for a full article about the extension, there are some specific things worth mentioning.

+ +

Version 0.4.0 of the extension was announced on March 26, 2020. It introduced support for augmented reality (AR) through the WebXR AR Module, which has is approaching a stable state. Documentation for AR is forthcoming shortly here on MDN.

+ +

Other improvements include updating the emulator to rename the  interface to {{domxref("XRSystem")}}, introduce support for squeeze (grip) input sources, and add support for the {{domxref("XRInputSource")}} property {{domxref("XRInputSource.profiles", "profiles")}}.XR

+ +

Accessing the WebXR API

+ +

To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property.

+ +
+
{{domxref("navigator.xr")}} {{ReadOnlyInline}}
+
This property, added to the {{domxref("Navigator")}} interface, returns the {{domxref("XR")}} object through which the WebXR API is exposed. If this property is missing or , WebXR is not available.null
+
+ +

WebXR interfaces

+ +
+
{{DOMxRef("XR")}}
+
The {{domxref("Navigator.xr", "navigator.xr")}} property returns the window's instance of {{domxref("XR")}}, which is the mechanism by which your code accesses the WebXR API. Using the  interface, you can create {{domxref("XRSession")}}s to represent actual AR and/or VR sessions.XR
+
{{DOMxRef("XRFrame")}}
+
While presenting an XR session, the state of all tracked objects which make up the session are represented by an . To get an , call the session's {{domxref("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} method, providing a callback which will be called with the  once available. Events which communicate tracking states will also use  to contain that information.XRFrameXRFrameXRFrameXRFrame
+
{{DOMxRef("XRRenderState")}}
+
Provides a set of configurable properties which change how the imagery output by an  is composited.XRSession
+
{{DOMxRef("XRSession")}}
+
Provides the interface for interacting with XR hardware. Once an  is obtained from {{domxref("XR.requestSession()")}}, the session can be used to check the position and orientation of the viewer, query the device for environment information, and present the virtual or augmented world to the user.XRSession
+
{{DOMxRef("XRSpace")}}
+
XRSpace is an opaque base class on which all virtual coordinate system interfaces are based. Positions in WebXR are always expressed in relation to a particular  at the time at which a particular {{domxref("XFrame")}} takes place. The space's coordinate system has its origin at the a given physical position.XRSpace
+
{{DOMxRef("XRReferenceSpace")}}
+
A subclass of {{domxref("XRSpace")}} which is used to identify a spatial relationship in relation to the user's physical environment. The  coordinate system is expected to remain unchanged through the lifespan of the {{domxref("XRSession")}}.The world has no boundaries and extends infinitely in every direction.XRReferenceSpace
+
{{DOMxRef("XRBoundedReferenceSpace")}}
+
XRBoundedReferenceSpace extends the {{domxref("XRReferenceSpace")}} coordinate system to further include support for a finite world with set boundaries. Unlike , the origin must be located on the floor (that is, y = 0 at the floor). The x and z components of the origin are typically presumed to be located at or near the center of the room or surface.XRReferenceSpace
+
{{DOMxRef("XRView")}}
+
Represents a single view into the XR scene for a particular frame. Each  corresponds to the video display surface used to present the scene to the user. For example, a given XR device might have two views: one for the left eye and one for the right. Each view has an offset used to shift the position of the view relative to the camera, in order to allow for creating stereographic effects.XRView
+
{{DOMxRef("XRViewport")}}
+
Describes a viewport. A viewport is a rectangular portion of a graphic surface.
+
{{DOMxRef("XRRigidTransform")}}
+
A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.
+
{{DOMxRef("XRPose")}}
+
Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.
+
{{DOMxRef("XRViewerPose")}}
+
Based on {{domxref("XRPose")}},  specifies the state of a viewer of the WebXR scene as indicated by the XR device. Included is an array of {{domxref("XRView")}} objects, each representing one perspective on the scene. For example, it takes two views to create the stereoscopic view as perceived by human vision—one for the left eye and a second for the right eye. One view is offset to the left slightly from the viewer's position, and the other view is offset to the right by the same distance. The view list can also be used to represent the perspectives of each of the spectators of a scene, in a multi-user environment.XRViewerPose
+
{{DOMxRef("XRInputSource")}}
+
Represents any input device the user can use to perform targeted actions within the same virtual space as the viewer. Input sources may include devices such as hand controllers, optical tracking systems, and other devices which are explicitly associated with the XR device. Other input devices such as keyboards, mice, and gamepads are not presented as  instances.XRInputSource
+
{{DOMxRef("XRWebGLLayer")}}
+
A layer which serves as a WebGL frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.
+
+ +

Event interfaces

+ +

The following interfaces are used to represent the events used by the WebXR API.

+ +
+
{{domxref("XRInputSourceEvent")}}
+
Sent when the state of an {{domxref("XRInputSource")}} changes. This can happen, for example, when the position and/or orientation of the device changes, or when buttons are pressed or released.
+
{{domxref("XRInputSourcesChangeEvent")}}
+
Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.
+
{{domxref("XRReferenceSpaceEvent")}}
+
Sent when the state of an {{domxref("XRReferenceSpace")}} changes.
+
{{domxref("XRSessionEvent")}}
+
Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient
+
+ +

Extensions to the WebGL API

+ +

The WebGL API is extended by the WebXR specification to augment the WebGL context to allow it to be used to render views for display by a WebXR device.

+ +
+
{{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}
+
Configures the WebGL context to be compatible with WebXR. If the context was not initially created with the {{domxref("WebGLContextAttributes.xrCompatible", "xrCompatible")}} property set to , you must call  prior to attempting to use the WebGL context for WebXR rendering. Returns a {{jsxref("promise")}} which resolves once the context has been prepared, or is rejected if the context cannot be configured for use by WebXR.truemakeXRCompatible()
+
+ +

Guides and tutorials

+ +

The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.

+ +
+
Fundamentals of WebXR
+
Before diving into the details of how to create content using WebXR, it may be helpful to read this overview of the technology, which includes introductions to terminology that may be unfamiliar to you, or which may be used in a new way.
+
Matrix math for the web
+
A guide covering how matrices can be used on the web, including both for CSS transforms and for WebGL purposes, as well as to handle the positioning and orientation of objects in WebXR contexts.
+
Setting up and shutting down a WebXR session
+
Before actually presenting a scene using an XR device such as a headset or goggles, you need to create a WebXR session bound to a rendering layer that draws the scene for presentation in each of the XR device's displays so that the 3D effect can be presented to the user. This guide covers how to create and stop WebXR sessions.
+
Permissions and security for WebXR
+
The WebXR Device API has several areas of security to contend with, from establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it.
+
Geometry and reference spaces in WebXR
+
In this guide, the required concepts of 3D geometry are briefly reviewed, and the fundamentals of how that geometry is represented in WebXR are detailed. Learn how reference spaces are used to position objects—and the viewer—and the differences among the available types of reference space, as well as their use cases.
+
Spatial tracking in WebXR
+
This guide describes how objects—including the user's body and its parts—are located in space, and how their movement and orientation relative to one another is monitored and managed over time. This article explains the relationship between spaces, poses, viewers, and views.
+
Rendering and the WebXR frame loop
+
Starting with how you schedule frames to be rendered, this guide then continues to cover how to determine the placement of objects in the view and how to then render them into the WebGL buffer used for each of the two eyes' views of the scene.
+
Viewpoints and viewers: Simulating cameras in WebXR
+
WebGL (and therefore WebXR) doesn't really have a concept of a camera, which is the traditional concept used to represent a viewpoint in 3D graphics. In this article, we see how to simulate a camera and how to create the illusion of moving a viewer through a world in which the viewer doesn't really move.
+
Movement, orientation, and motion: A WebXR example
+
In this example and tutorial, we use information learned throughout the WebXR documentation to create a scene containing a rotating cube which the user can move around using both VR headset and keyboard and mouse.
+
Using bounded reference spaces
+
In this article, we examine how to use a  reference space to define the boundaries of where the viewer can safely move about without leaving the area tracked by their XR hardware or colliding with a physical obstacle. On devices which support it,  can be a useful tool in your repertoire.bounded-floorbounded-floor
+
WebXR performance guide
+
Recommendations and tips to help you optimize the performance of your WebXR application.
+
Inputs and input sources
+
A guide to input sources and how to efficiently manage the input devices being used to control the WebXR session, and how to receive and process user inputs from those devices.
+
Using WebXR input profiles
+
A guide to interpreting the {{Glossary("JSON")}} data provided by the WebXR Input Profiles Registry, which can be used to determine what options and controls are available on the user's available input devices.
+
Supporting advanced controllers and gamepads in WebXR applications
+
WebXR uses the {{domxref("Gamepad")}} object to describe the controls available on complex input devices (such as hand controllers with multiple buttons and/or axes) and gamepad-like devices. In this guide, learn how to make use of these devices' controls.
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("WebXR")}}{{Spec2("WebXR")}}Initial definition.
+ +

Browser compatibility

+ +

{{Compat("api.Navigator.xr")}}

+ +

See also

+ + diff --git a/files/de/web/api/window/alert/index.html b/files/de/web/api/window/alert/index.html new file mode 100644 index 0000000000..841600419d --- /dev/null +++ b/files/de/web/api/window/alert/index.html @@ -0,0 +1,72 @@ +--- +title: Window.alert +slug: Web/API/Window/alert +tags: + - API + - DOM + - Method + - Reference + - Window +translation_of: Web/API/Window/alert +--- +

{{ APIRef }}

+ +

Die Window.alert() Methode zeigt einen Alert-Dialog mit optional spezifiziertem Inhalt und einem OK-Button an.

+ +

Syntax

+ +
window.alert(nachricht);
+ + + +

Beispiel

+ +
window.alert("Hello world!");
+
+ +

erzeugt:

+ +

Image:AlertHelloWorld.png

+ +

Mehr JS:

+ +
alert()
+ +

Anmerkungen

+ +

Der Alert-Dialog sollte für Nachrichten benutzt werden, die keine Reaktion des Nutzers benötigen, außer seiner/ihrer Bestätigung.

+ +

Dialog-Boxen sind modale Fenster - der Rest der Oberfläche wird erst geladen, sobald die Box geschlossen wird. Deswegen sollten Funktionen, die Dialog-Boxen (oder modale Fenster) erzeugen, nicht zu oft benutzt werden.

+ +

Mozilla Chrome-Nutzer (z. B. Firefox-Erweiterungen) sollten stattdessen Methoden des {{interface("nsIPromptService")}} verwenden.

+ +

Ab Chrome {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} geblockt, solange sein Sandbox-Attribut nicht den Wert allow-modal enthält.

+ +

{{gecko_minversion_inline("23.0")}} Das Argument ist nun optional, wie von der Spezifikation gefordert.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML5 Web application', '#dom-alert', 'alert()')}}{{Spec2('HTML5 Web application')}}Anfängliche Definition
+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/applicationcache/index.html b/files/de/web/api/window/applicationcache/index.html new file mode 100644 index 0000000000..c8d47fc6ee --- /dev/null +++ b/files/de/web/api/window/applicationcache/index.html @@ -0,0 +1,33 @@ +--- +title: Window.applicationCache +slug: Web/API/Window/applicationCache +translation_of: Web/API/Window/applicationCache +--- +

{{APIRef}}

+ +

Zusammenfassung

+ +

Liefert eine Referenz auf das ApplicationCache Objekt für das aktuelle Fenster.

+ +

Syntax

+ +
cache = window.applicationCache
+
+ +

Parameter

+ + + +

Spezification

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/window/cancelanimationframe/index.html b/files/de/web/api/window/cancelanimationframe/index.html new file mode 100644 index 0000000000..7d38ab5be4 --- /dev/null +++ b/files/de/web/api/window/cancelanimationframe/index.html @@ -0,0 +1,72 @@ +--- +title: Window.cancelAnimationFrame() +slug: Web/API/Window/cancelAnimationFrame +tags: + - API + - Animation + - DOM + - Experimentell + - Méthode +translation_of: Web/API/Window/cancelAnimationFrame +--- +
{{APIRef}}{{SeeCompatTable}}
+ +

Zusammenfassung

+ +

Stopt eine vorher durch {{domxref("window.requestAnimationFrame()")}} geplante Animation.

+ +

Syntax

+ +
window.cancelAnimationFrame(requestID);
+
+ +

Parameter

+ +
+
requestID
+
Der ID Wert der beim Aufruf von {{domxref("window.requestAnimationFrame()")}} vorher zurückgegeben wurde.
+
+ +

Beispiel

+ +
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
+                            window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
+
+var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
+
+var start = window.mozAnimationStartTime;  // Nur unterstützt in FF. Andere Browsers können zB Date.now() benutzen.
+
+var myReq;
+
+function step(timestamp) {
+  var progress = timestamp - start;
+  d.style.left = Math.min(progress/10, 200) + "px";
+  if (progress < 2000) {
+    myReq = requestAnimationFrame(step);
+  }
+}
+myReq = requestAnimationFrame(step);
+
+window.cancelAnimationFrame(myReq);
+
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.cancelAnimationFrame")}}

+ +

Spezifikation

+ + + +

Siehe auch

+ + diff --git a/files/de/web/api/window/close/index.html b/files/de/web/api/window/close/index.html new file mode 100644 index 0000000000..84c1630838 --- /dev/null +++ b/files/de/web/api/window/close/index.html @@ -0,0 +1,78 @@ +--- +title: Window.close() +slug: Web/API/Window/close +tags: + - API + - DOM + - Gecko + - Method + - Reference + - Window +translation_of: Web/API/Window/close +--- +
{{APIRef}}
+ +

Die Window.close() Methode schließt das aktuelle Fenster oder das Fenster von dem sie aufgerufen wurde.

+ +

Diese Methode kann nur von Fenstern aufgerufen werden, die ein Skript mit der {{domxref("Window.open()")}} Methode verwenden. Wenn das Fenster nicht durch ein Skript geöffnet wurde, erscheint ein so oder ähnlich lautender Fehler in der Konsole Skripte können keine Fenster schließen, die nicht von ihnen geöffnet wurden.

+ +

Zu beachten ist auch, dass close() keinen Effekt auf {{domxref("Window")}} Objekte hat, die per HTMLIFrame​Element​.content​Window zurückgegeben werden.

+ +

Syntax

+ +
window.close();
+ +

Beispiele

+ +

Schließt ein Fenster, geöffnet durch window.open()

+ +

Dieses Beispiel zeigt eine Funktion die ein Fenster öffnet eine zweite Funktion die es schließt. Das demonstriert wie Window.close() verwendet wird um ein Fenster zu schließen, das per {{domxref("window.open()")}} geöffnet wurde.

+ +
//Global var to store a reference to the opened window
+var openedWindow;
+
+function openWindow() {
+  openedWindow = window.open('moreinfo.htm');
+}
+
+function closeOpenedWindow() {
+  openedWindow.close();
+}
+
+ +

Das aktuelle Fenster schließen

+ +

Wenn Sie in der Vergangenheit die close() Methode des window Objekts direkt aufgerufen haben, anstatt close() für eine window Instanz aufzurufen, hat der Browser das vorderste Fenster geschlossen, unabhängig davon, ob Ihr Skript dieses Fenster erstellt hat oder nicht. Dies ist nicht länger der Fall; Aus Sicherheitsgründen dürfen Skripte keine Fenster mehr schließen, die sie nicht geöffnet haben. (Firefox 46.0.1: Skripte können keine Fenster schließen, die sie nicht geöffnet hatten)

+ +
function closeCurrentWindow() {
+  window.close();
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#dom-window-close', 'window.close()')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', "browsers.html#dom-window-close", "Window.close()")}}{{Spec2('HTML5 W3C')}}
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.close")}}

diff --git a/files/de/web/api/window/confirm/index.html b/files/de/web/api/window/confirm/index.html new file mode 100644 index 0000000000..23df4db917 --- /dev/null +++ b/files/de/web/api/window/confirm/index.html @@ -0,0 +1,73 @@ +--- +title: Window.confirm() +slug: Web/API/Window/confirm +tags: + - API + - DOM + - Method + - NeedsBrowserCompatibility + - NeedsCompatTable + - NeedsMobileBrowserCompatibility + - Reference + - Window + - confirm +translation_of: Web/API/Window/confirm +--- +
{{ApiRef("Window")}}
+ +

Die Window.confirm() Funktion zeigt ein modales Dialogfenster mit einem optionalen Text und zwei Buttons an, OK und Abbrechen.

+ +

Syntax

+ +
eingabe = window.confirm(nachricht);
+ + + +

Beispiel

+ +
if (window.confirm("Willst du die Seite wirklich verlassen?")) {
+    window.open("exit.html", "Auf Wiedersehen!");
+}
+
+ +

Erzeugt (englisch):

+ +

firefox confirm
+  

+ +

Anmerkungen

+ +

The following text is shared between this article, DOM:window.prompt and DOM:window.alert Dialogfenster sind modal - sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden. Und unabhängig davon gibt es gute Gründe dafür, Dialogfenster zum Bestätigen einer Aktion zu vermeiden.

+ +

Mozilla Chrome-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.

+ +

Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert allow-modal.

+ +

{{gecko_minversion_inline("23.0")}} Der Parameter ist optional und wird laut Spezifikation nicht benötigit.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', 'timers-and-user-prompts.html#dom-confirm', 'confirm()')}}{{Spec2('HTML WHATWG')}} 
+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/console/index.html b/files/de/web/api/window/console/index.html new file mode 100644 index 0000000000..2fa7d75001 --- /dev/null +++ b/files/de/web/api/window/console/index.html @@ -0,0 +1,56 @@ +--- +title: Window.console +slug: Web/API/Window/console +tags: + - API + - Eigenschaft + - Referenz + - Schreibgeschützt + - Window + - console +translation_of: Web/API/Window/console +--- +

{{ APIRef }}

+ +

Die Window.console Eigenschaft gibt eine Referenz des {{domxref("Console")}} Objects zurück, welches Methoden für das Loggen von Informationen in der Browser Konsole bietet. Diese Methoden sollten nur für das Debugging genutzt werden und nicht für das Darstellen von Informationen an Endnutzer.

+ +

Syntax

+ +
var consoleObj = window.console;
+
+ +

Beispiele

+ +

Zur Konsole loggen

+ +

Das erste Beispiel loggt text zur Konsole.

+ +
console.log("Während dem Laden ist ein Fehler aufgetreten.");
+
+ +

Das nächste Beispiel loggt ein Objekt in der Konsole. Die Felder des Objekts können dabei ausgeklappt werden:

+ +
console.dir(einObjekt);
+ +

Schau dir {{SectionOnPage("/de-DE/docs/Web/API/Console", "Nutzung")}} für weitere Beispiele an.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Console API')}}{{Spec2('Console API')}}Anfängliche Definition.
+ +
+

Aktuell gibt es viele Unterschiede in der Implementation zwischen den verschiedenen Browsern. Dennoch wird aktuell daran gearbeitet, die Implementationen zusammen zu bringen und konsistenter zu machen.

+
diff --git a/files/de/web/api/window/dump/index.html b/files/de/web/api/window/dump/index.html new file mode 100644 index 0000000000..4126c3a4db --- /dev/null +++ b/files/de/web/api/window/dump/index.html @@ -0,0 +1,42 @@ +--- +title: Window.dump() +slug: Web/API/Window/dump +tags: + - DOM +translation_of: Web/API/Window/dump +--- +
{{ApiRef}}
+ +

Übersicht

+ +

Schreibt eine Nachricht auf die (systemeigene) Konsole.

+ +

Syntax

+ +
window.dump(message);
+
+dump(message);
+
+ + + +

Bemerkungen

+ +

dump wird normalerweise verwendet um JavaScript zu debuggen. Privilegierter Code kann auch Components.utils.reportError und nsIConsoleService verwenden, um Nachrichten in die Fehler-Konsole zu schreiben.

+ +

In Gecko ist dump standardmäßig deaktiviert – beim Aufruf passiert also nichts und es wird auch kein Fehler erzeugt. Um die dump Ausgabe zu sehen, muss die Einstellung browser.dom.window.dump.enabled auf true gesetzt werden. Diese Einstellung kann in about:config oder in der user.js Datei vorgenommen werden. Anmerkung: Diese Einstellung ist in about:config normalerweise nicht enthalten, sie muss erst erzeugt werden (Rechtsklick in den Fensterbereich -> Neu -> Boolean).

+ +

In Windows benötigt man eine Konsole, um überhaupt etwas zu sehen. Wenn noch keine vorhanden ist, kann durch einen Neustart der Anwendung mit dem Parameter  -console eine Konsole erzeugt werden. Auf anderen Betriebssystemen ist es ausreichend die Anwendung aus einem Terminal aufzurufen.

+ +

Um die Konsolenausgabe in eine Datei umzuleiten, muss Firefox ohne den Parameter -console gestartet und folgende Syntax zum Umleiten von stderr und stdout in eine Datei verwendet werden, zB.:

+ +
firefox > console.txt 2>&1
+
+ +

dump steht auch in JavaScript geschriebenen XPCOM Komponenten zur verfügbar, obwohl window nicht das globale Objekt in Komponenten ist. Allerdings wird diese Verwendung von dump nicht durch die oben genannte Einstellung beeinflusst -- die Ausgabe findet immer statt. Deshalb ist es anzuraten, diese Einstellung selbst zu prüfen oder eine eigene Debug-Einstellung zu erzeugen. Damit sichergestellt ist, dass nicht unnötig viele Debug-Daten in die Konsole des Benutzers geschrieben werden, wenn dieser überhaupt nicht an diesen interessiert ist. Achtung, die Ausgabe von dump von XPCOM Komponenten wird zu stderr geleitet, während ein Aufruf von dump an andere Stelle auf stdout ausgibt.

+ +

Spezifikation

+ +

{{DOM0}}

diff --git a/files/de/web/api/window/history/index.html b/files/de/web/api/window/history/index.html new file mode 100644 index 0000000000..05a369435f --- /dev/null +++ b/files/de/web/api/window/history/index.html @@ -0,0 +1,56 @@ +--- +title: Window.history +slug: Web/API/Window/history +tags: + - API + - HTML DOM + - History API + - Window +translation_of: Web/API/Window/history +--- +

{{ APIRef }}

+ +

Die nur lesend zugreifbare Eigenschaft Window.history gibt eine Referenz auf das {{domxref("History")}} Objekt zurück, welches eine Schnittstelle zur Manipulation der Browser Sitzungs-Historie bereitstellt (Seiten, die im aktuellen Tab oder dem aktuellen Frame besucht wurden).

+ +

Unter Manipulating the browser history finden sie weitere Details und Beispiele. Der Artikel geht besonders auf die Sicherheits-Features der Methoden pushState() und replaceState() ein, die Sie vor Benutzung der Funktionen kennen sollten.

+ +

Syntax

+ +
var historyObj = window.history;
+
+ +

Beispiel

+ +
history.back();     // entspricht dem Klicken des "Zurück"-Kopfes
+history.go(-1);     // entspricht history.back();
+
+ +

Anmerkungen

+ +

Für Seiten auf der obersten Ebene kann in der Sitzungs-Historie eine Liste von Seiten über das History Objekt angesehen werden, zugreifbar über die Drop-Downs im Browser neben den Vor- und Zurück-Schaltflächen.

+ +

Aus Sicherheitsgründen erlaubt das History Objekt keinen Zugriff für nicht-privilegierten Code auf die URLs anderer Seiten in der Sitzungs-Historie, erlaubt aber die Navigation durch die Historie.

+ +

Die Sitzungs-Historie kann nicht gelöscht oder das Vor-und Zurück-Navigieren verhindert werden. Die nächstbeste Lösung ist die location.replace() Methode, die den aktuellen Eintrag in der Sitzungs-Historie durch die übergebene URL ersetzt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#the-history-interface', 'The History interface')}}{{Spec2('HTML5 W3C')}} 
diff --git a/files/de/web/api/window/index.html b/files/de/web/api/window/index.html new file mode 100644 index 0000000000..26f27d9af0 --- /dev/null +++ b/files/de/web/api/window/index.html @@ -0,0 +1,384 @@ +--- +title: Window +slug: Web/API/Window +tags: + - DOM + - Gecko +translation_of: Web/API/Window +--- +

{{APIRef}}

+ +

Das window Objekt repräsentiert ein Fenster (Window), das ein DOM Dokument enthält. Das document Attribut zeigt auf das DOM document, das im Fenster geladen ist. Für ein gegebenes Dokument kann man über das {{Domxref("document.defaultView")}} Attribut das Fenster abrufen.

+ +

Dieser Abschnitt bietet eine kurze Referenz für alle Methoden, Attribute und Events, die über das window Objekt zur Verfügung stehen. Das window Objekt implementiert die Window Schnitstelle, die wiederrum von der AbstractView Schnittstelle erbt. Einige zusätzliche globale Funktionen, Namespace Objekte, Schnittstellen und Konstruktoren, die nicht typischerweise mit dem Window in Verbindung gebracht werden, aber durch dieses verfügbar sind, werden in der JavaScript Reference und DOM Reference aufgelistet.

+ +

In einem "getabten" Browser wie Firefox enthält jeder Tab sein eigenes Window-Objekt (und im Falle von Extensions ist das Browser-Fenster selbst ein eigenständiges Fenster – siehe auch "Working with windows in chrome code". Das heisst also, dass das Window-Objekt nicht zwischen Tabs desselben Fensters geteilt wird. Einige Methoden, zum Beispiel {{Domxref("window.resizeTo")}} und {{Domxref("window.resizeBy")}} beziehen sich auf das "ganze" Fenster, und nicht auf den Tab, dem das Window-Objekt gehört. Grundsätzlich lässt sich sagen, das alles, was man nicht sinnvollerweise einem Tab zuordnen kann, sich stattdessen auf das Window bezieht.

+ +

Properties

+ +

This interface inherits properties from the {{domxref("EventTarget")}} interface and implements properties from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +

Note that properties which are objects (e.g.,. for overriding the prototype of built-in elements) are listed in a separate section below.

+ +
+
{{domxref("Window.applicationCache")}} {{readOnlyInline}} {{gecko_minversion_inline("1.9")}}
+
An {{domxref("OfflineResourceList")}} object providing access to the offline resources for the window.
+
{{domxref("Window.closed")}} {{Non-standard_inline}}{{readOnlyInline}}
+
This property indicates whether the current window is closed or not.
+
Window.Components {{Non-standard_inline}}
+
The entry point to many XPCOM features. Some properties, e.g. classes, are only available to sufficiently privileged code. Web code should not use this property.
+
{{domxref("console","Window.console")}} {{Non-standard_inline}} {{ReadOnlyInline}}
+
Returns a reference to the console object providing access to the browser's debugging console.
+
{{domxref("Window.content")}} and Window._content {{Non-standard_inline}} {{obsolete_inline}}{{ReadOnlyInline}}
+
Returns a reference to the content element in the current window. The obsolete variant with underscore is no longer available from Web content.
+
{{domxref("Window.controllers")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the XUL controller objects for the current chrome window.
+
{{domxref("Window.crypto")}} {{readOnlyInline}}
+
Returns the browser crypto object.
+
{{domxref("Window.defaultStatus")}} {{Obsolete_inline("gecko23")}}
+
Gets/sets the status bar text for the given window.
+
{{domxref("Window.devicePixelRatio")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns the ratio between physical pixels and device independent pixels in the current display.
+
{{domxref("Window.dialogArguments")}} {{Fx_minversion_inline(3)}} {{ReadOnlyInline}}
+
Gets the arguments passed to the window (if it's a dialog box) at the time {{domxref("window.showModalDialog()")}} was called. This is an {{Interface("nsIArray")}}.
+
{{domxref("Window.directories")}} {{obsolete_inline}}
+
Synonym of {{domxref("window.personalbar")}}
+
{{domxref("Window.document")}} {{ReadOnlyInline}}
+
Returns a reference to the document that the window contains.
+
{{domxref("Window.frameElement")}} {{readOnlyInline}}
+
Returns the element in which the window is embedded, or null if the window is not embedded.
+
{{domxref("Window.frames")}} {{readOnlyInline}}
+
Returns an array of the subframes in the current window.
+
{{domxref("Window.fullScreen")}} {{gecko_minversion_inline("1.9")}}
+
This property indicates whether the window is displayed in full screen or not.
+
{{domxref("window.globalStorage")}} {{gecko_minversion_inline("1.8.1")}} {{Non-standard_inline}} {{Obsolete_inline("gecko13")}}
+
Unsupported since Gecko 13 (Firefox 13). Use {{domxref("Window.localStorage")}} instead.
+ Was: Multiple storage objects that are used for storing data across multiple pages.
+
{{domxref("Window.history")}} {{ReadOnlyInline}}
+
Returns a reference to the history object.
+
{{domxref("Window.innerHeight")}}
+
Gets the height of the content area of the browser window including, if rendered, the horizontal scrollbar.
+
{{domxref("window.innerWidth")}}
+
Gets the width of the content area of the browser window including, if rendered, the vertical scrollbar.
+
{{domxref("Window.length")}} {{readOnlyInline}}
+
Returns the number of frames in the window. See also {{domxref("window.frames")}}.
+
{{domxref("Window.location")}} {{ReadOnlyInline}}
+
Gets/sets the location, or current URL, of the window object.
+
{{domxref("Window.locationbar")}} {{ReadOnlyInline}}
+
Returns the locationbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.localStorage")}} {{readOnlyInline}}{{gecko_minversion_inline("1.9.1")}}
+
Returns a reference to the local storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("Window.menubar")}} {{ReadOnlyInline}}
+
Returns the menubar object, whose visibility can be toggled in the window.
+
{{domxref("Window.messageManager")}} {{gecko_minversion_inline("2.0")}}
+
Returns the message manager object for this window.
+
{{domxref("Window.mozAnimationStartTime")}} {{ReadOnlyInline}}{{gecko_minversion_inline("2.0")}}
+
The time in milliseconds since epoch at which the current animation cycle began.
+
{{domxref("Window.mozInnerScreenX")}} {{ReadOnlyInline}}{{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the horizontal (X) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel in {{interface("nsIDOMWindowUtils")}} for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozInnerScreenY")}} {{ReadOnlyInline}} {{non-standard_inline}}{{gecko_minversion_inline("1.9.2")}}
+
Returns the vertical (Y) coordinate of the top-left corner of the window's viewport, in screen coordinates. This value is reported in CSS pixels. See mozScreenPixelsPerCSSPixel for a conversion factor to adapt to screen pixels if needed.
+
{{domxref("Window.mozPaintCount")}} {{non-standard_inline}}{{ReadOnlyInline}} {{gecko_minversion_inline("2.0")}}
+
Returns the number of times the current document has been rendered to the screen in this window. This can be used to compute rendering performance.
+
{{domxref("Window.name")}}
+
Gets/sets the name of the window.
+
{{domxref("Window.navigator")}} {{readOnlyInline}}
+
Returns a reference to the navigator object.
+
{{domxref("Window.opener")}}
+
Returns a reference to the window that opened this current window.
+
{{domxref("Window.outerHeight")}} {{readOnlyInline}}
+
Gets the height of the outside of the browser window.
+
{{domxref("Window.outerWidth")}} {{readOnlyInline}}
+
Gets the width of the outside of the browser window.
+
{{domxref("Window.scrollX","Window.pageXOffset")}} {{readOnlyInline}}
+
An alias for {{domxref("window.scrollX")}}.
+
{{domxref("Window.scrollY","Window.pageYOffset")}}{{readOnlyInline}}
+
An alias for {{domxref("window.scrollY")}}
+
{{domxref("Window.sessionStorage")}} {{readOnlyInline}}
+
Returns a reference to the session storage object used to store data that may only be accessed by the origin that created it.
+
{{domxref("SpeechSynthesisGetter.speechSynthesis")}} {{readOnlyInline}}
+
 
+
{{domxref("Window.parent")}} {{readOnlyInline}}
+
Returns a reference to the parent of the current window or subframe.
+
{{domxref("Window.performance")}} {{readOnlyInline}}
+
Provides a hosting area for performance related attributes.
+
{{domxref("Window.personalbar")}} {{readOnlyInline}}
+
Returns the personalbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.pkcs11")}} {{obsolete_inline(29)}}
+
Formerly provided access to install and remove PKCS11 modules.
+
{{domxref("Window.returnValue")}} {{Fx_minversion_inline(3)}}
+
The return value to be returned to the function that called {{domxref("window.showModalDialog()")}} to display the window as a modal dialog.
+
{{domxref("Window.screen")}} {{readOnlyInline}}
+
Returns a reference to the screen object associated with the window.
+
{{domxref("Window.screenX")}} {{readOnlyInline}}
+
Returns the horizontal distance of the left border of the user's browser from the left side of the screen.
+
{{domxref("Window.screenY")}} {{readOnlyInline}}
+
Returns the vertical distance of the top border of the user's browser from the top side of the screen.
+
{{domxref("Window.scrollbars")}} {{readOnlyInline}}
+
Returns the scrollbars object, whose visibility can be toggled in the window.
+
{{domxref("Window.scrollMaxX")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to horizontally, that is the document width minus the viewport width.
+
{{domxref("Window.scrollMaxY")}}{{non-standard_inline}}{{ReadOnlyInline}}
+
The maximum offset that the window can be scrolled to vertically (i.e., the document height minus the viewport height).
+
{{domxref("Window.scrollX")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled horizontally.
+
{{domxref("Window.scrollY")}} {{readOnlyInline}}
+
Returns the number of pixels that the document has already been scrolled vertically.
+
{{domxref("Window.self")}} {{ReadOnlyInline}}
+
Returns an object reference to the window object itself.
+
{{domxref("Window.sessionStorage")}} {{Fx_minversion_inline("2.0")}}
+
Returns a storage object for storing data within a single page session.
+
{{domxref("Window.sidebar")}} {{non-standard_inline}}{{ReadOnlyInline}}
+
Returns a reference to the window object of the sidebar.
+
{{domxref("Window.status")}}
+
Gets/sets the text in the statusbar at the bottom of the browser.
+
{{domxref("Window.statusbar")}} {{readOnlyInline}}
+
Returns the statusbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.toolbar")}} {{readOnlyInline}}
+
Returns the toolbar object, whose visibility can be toggled in the window.
+
{{domxref("Window.top")}} {{readOnlyInline}}
+
Returns a reference to the topmost window in the window hierarchy. This property is read only.
+
{{domxref("Window.window")}} {{ReadOnlyInline}}
+
Returns a reference to the current window.
+
window[0], window[1], etc.
+
Returns a reference to the window object in the frames. See {{domxref("Window.frames")}} for more details.
+
+ +

Methods

+ +

This interface inherits methods from the {{domxref("EventTarget")}} interface and implements methods from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+
{{domxref("EventTarget.addEventListener()")}}
+
Register an event handler to a specific event type on the window.
+
{{domxref("Window.alert()")}}
+
Displays an alert dialog.
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("Window.back()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves back one in the window history.
+
{{domxref("Window.blur()")}}
+
Sets focus away from the window.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
{{domxref("Window.captureEvents()")}} {{Deprecated_inline}}
+
Registers the window to capture all events of the specified type.
+
{{domxref("Window.clearImmediate()")}}
+
Cancels the repeated execution set using setImmediate.
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("Window.close()")}}
+
Closes the current window.
+
{{domxref("Window.confirm()")}}
+
Displays a dialog with a message that the user needs to respond to.
+
{{domxref("Window.disableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.dispatchEvent()")}}
+
Used to trigger an event.
+
{{domxref("Window.dump()")}}
+
Writes a message to the console.
+
{{domxref("Window.enableExternalCapture()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.find()")}}
+
Searches for a given string in a window.
+
{{domxref("Window.focus()")}}
+
Sets focus on the current window.
+
{{domxref("Window.forward()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Moves the window one document forward in the history.
+
{{domxref("Window.getAttention()")}}
+
Flashes the application icon.
+
{{domxref("Window.getAttentionWithCycleCount()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.getComputedStyle()")}}
+
Gets computed style for the specified element. Computed style indicates the computed values of all CSS properties of the element.
+
{{domxref("Window.getDefaulComputedStyle()")}}
+
Gets default computed style for the specified element, ignoring author stylesheets.
+
{{domxref("Window.getSelection()")}}
+
Returns the selection object representing the selected item(s).
+
{{domxref("Window.home()")}} {{Non-standard_inline}} {{obsolete_inline}}
+
Returns the browser to the home page.
+
{{domxref("Window.matchMedia()")}} {{gecko_minversion_inline("6.0")}}
+
Returns a {{domxref("MediaQueryList")}} object representing the specified media query string.
+
{{domxref("Window.maximize()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.minimize()")}} (top-level XUL windows only)
+
Minimizes the window.
+
{{domxref("Window.moveBy()")}}
+
Moves the current window by a specified amount.
+
{{domxref("Window.moveTo()")}}
+
Moves the window to the specified coordinates.
+
{{domxref("Window.mozRequestAnimationFrame()")}} {{gecko_minversion_inline("2.0")}}
+
Tells the browser that an animation is in progress, requesting that the browser schedule a repaint of the window for the next animation frame. This will cause a MozBeforePaint event to fire before that repaint occurs.
+
{{domxref("Window.open()")}}
+
Opens a new window.
+
{{domxref("Window.openDialog()")}}
+
Opens a new dialog window.
+
{{domxref("Window.postMessage()")}} {{Fx_minversion_inline(3)}}
+
Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first.
+
{{domxref("Window.print()")}}
+
Opens the Print Dialog to print the current document.
+
{{domxref("Window.prompt()")}}
+
Returns the text entered by the user in a prompt dialog.
+
{{domxref("Window.releaseEvents()")}} {{Deprecated_inline}}
+
Releases the window from trapping events of a specific type.
+
{{domxref("element.removeEventListener","Window.removeEventListener()")}}
+
Removes an event listener from the window.
+
{{domxref("Window.resizeBy()")}}
+
Resizes the current window by a certain amount.
+
{{domxref("Window.resizeTo()")}}
+
Dynamically resizes window.
+
{{domxref("Window.restore()")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.routeEvent()")}} {{obsolete_inline(24)}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.scroll()")}}
+
Scrolls the window to a particular place in the document.
+
{{domxref("Window.scrollBy()")}}
+
Scrolls the document in the window by the given amount.
+
{{domxref("Window.scrollByLines()")}}
+
Scrolls the document by the given number of lines.
+
{{domxref("Window.scrollByPages()")}}
+
Scrolls the current document by the specified number of pages.
+
{{domxref("Window.scrollTo()")}}
+
Scrolls to a particular set of coordinates in the document.
+
{{domxref("Window.setCursor()")}}
+
Changes the cursor for the current window
+
{{domxref("Window.setImmediate()")}}
+
Executes a function after the browser has finished other heavy tasks
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("Window.setResizable")}}
+
{{todo("NeedsContents")}}
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
{{domxref("Window.showModalDialog()")}} {{Fx_minversion_inline(3)}}
+
Displays a modal dialog.
+
{{domxref("Window.sizeToContent()")}}
+
Sizes the window according to its content.
+
{{domxref("Window.stop()")}}
+
This method stops window loading.
+
{{domxref("Window.updateCommands()")}}
+
Updates the state of commands of the current chrome window (UI).
+
+ +

Event handlers

+ +

These are properties of the window object that can be set to establish event handlers for the various things that can happen in the window that might be of interest.

+ +

This interface inherits event handlers from the {{domxref("EventTarget")}} interface and implements event handlers from {{domxref("WindowTimers")}}, {{domxref("WindowBase64")}}, and {{domxref("WindowEventHandlers")}}.

+ +
+

Note: Starting in {{Gecko("9.0")}}, you can now use the syntax if ("onabort" in window) to determine whether or not a given event handler property exists. This is because event handler interfaces have been updated to be proper web IDL interfaces. See DOM event handlers for details.

+
+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
An event handler property for abort events on the window.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
An event handler property for before-unload events on the window.
+
{{domxref("GlobalEventHandlers.onblur")}}
+
An event handler property for blur events on the window.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
An event handler property for change events on the window.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
An event handler property for click events on the window.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
An event handler property for handling the window close event.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
An event handler property for right-click events on the window.
+
{{domxref("Window.ondevicelight")}}
+
An event handler property for any ambient light levels changes
+
{{domxref("Window.ondevicemotion")}} {{gecko_minversion_inline("6.0")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.ondeviceorientation")}} {{gecko_minversion_inline("6.0")}}
+
An event handler property for any device orientation changes
+
{{domxref("Window.ondeviceproximity")}}
+
An event handler property for device proximity event
+
{{domxref("GlobalEventHandlers.onerror")}}
+
An event handler property for {{event("error")}} events raised on the window.
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
An event handler property for {{event("focus")}} events on the window.
+
{{domxref("WindowEventHandlers.onhashchange")}} {{gecko_minversion_inline("1.9.2")}}
+
An event handler property for hash change events on the window; called when the part of the URL after the hash mark ("#") changes.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
An event handler property for {{event("keydown")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
An event handler property for {{event("keypress")}} events on the window.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
An event handler property for {{event("keyup")}} events on the window.
+
{{domxref("WindowEventHandlers.onlanguagechange")}}
+
An event handler property for {{event("languagechange")}} events on the window.
+
{{domxref("GlobalEventHandlers.onload")}}
+
An event handler property for window loading.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
An event handler property for mousedown events on the window.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
An event handler property for mousemove events on the window.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
An event handler property for mouseout events on the window.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
An event handler property for mouseover events on the window.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
An event handler property for mouseup events on the window.
+
{{domxref("Window.onmozbeforepaint")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for the MozBeforePaint event, which is sent before repainting the window if the event has been requested by a call to the {{domxref("Window.mozRequestAnimationFrame()")}} method.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
An event handler property for pageshow events on the window.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
An event handler property for pagehide events on the window.
+
{{domxref("Window.onpaint")}}
+
An event handler property for paint events on the window.
+
{{domxref("WindowEventHandlers.onpopstate")}} {{gecko_minversion_inline("2.0")}}
+
An event handler property for popstate events, which are fired when navigating to a session history entry representing a state object.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
An event handler property for reset events on the window.
+
{{domxref("GlobalEventHandlers.onresize")}}
+
An event handler property for window resizing.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
An event handler property for window scrolling.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
An event handler property for window selection.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
An event handler property for submits on window forms.
+
{{domxref("Window.onunload")}}
+
An event handler property for unload events on the window.
+
{{domxref("Window.onuserproximity")}}
+
An event handler property for user proximity events
+
+ +

Constructors

+ +

See also the DOM Interfaces.

+ +
+
{{domxref("Window.DOMParser")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.GeckoActiveXObject")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Image")}}
+
Used for creating an {{domxref("HTMLImageElement")}}.
+
{{domxref("Option")}}
+
Used for creating an {{domxref("HTMLOptionElement")}}
+
{{domxref("Window.QueryInterface")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XMLSerializer")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Worker")}}
+
Used for creating a Web worker
+
{{domxref("Window.XPCNativeWrapper")}}
+
{{todo("NeedsContents")}}
+
{{domxref("Window.XPCSafeJSObjectWrapper")}}
+
{{todo("NeedsContents")}}
+
+ +

Interfaces

+ +

See DOM Reference

+ +

See also

+ + diff --git a/files/de/web/api/window/length/index.html b/files/de/web/api/window/length/index.html new file mode 100644 index 0000000000..202c83237d --- /dev/null +++ b/files/de/web/api/window/length/index.html @@ -0,0 +1,51 @@ +--- +title: Window.length +slug: Web/API/Window/length +translation_of: Web/API/Window/length +--- +
{{ ApiRef() }}
+ +

Liefert die Anzahl an Frames ({{HTMLElement("frame")}} oder {{HTMLElement("iframe")}} elements) im aktuellen Fenster.

+ +

Syntax

+ +
framesCount = window.length;
+
+ + + +

Beispiel

+ +
if (window.length) {
+  // this is a document with subframes
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','browsers.html#dom-length','Window.length')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-length', 'Window.length')}}{{Spec2('HTML5 W3C')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.length")}}

diff --git a/files/de/web/api/window/localstorage/index.html b/files/de/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..5395a7985f --- /dev/null +++ b/files/de/web/api/window/localstorage/index.html @@ -0,0 +1,81 @@ +--- +title: Window.localStorage +slug: Web/API/Window/localStorage +tags: + - API + - Storage + - Web Storage + - Web Storage API + - Window + - localStorage +translation_of: Web/API/Window/localStorage +--- +

{{APIRef()}}

+ +

Die localStorage-Eigenschaft erlaubt den Zugriff auf ein lokales {{domxref("Storage")}}-Objekt. localStorage ist mit einer Ausnahme identisch zu sessionStorage: Im Unterschied zu letzterem besitzen in localStorage gespeicherte Daten kein Verfallsdatum, während sie im sessionStorage mit Ablauf der session, in der Regel beim Schließen des Browsers, gelöscht werden.

+ +

localStorage und sessionStorage sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com nicht zur Verfügung.

+ +

Syntax

+ +
myStorage = localStorage;
+ +

Wert

+ +

Ein {{domxref("Storage")}}-Objekt.

+ +

Beispiel

+ +

Der folgende Ausschnitt greift auf das lokale {{domxref("Storage")}}-Objekt der aktuellen Domain zu und fügt ihm mit {{domxref("Storage.setItem()")}} einen Eintrag hinzu.

+ +
localStorage.setItem('myCat', 'Tom');
+ +

Die Syntax für das Auslesen eines Eintrages aus dem localStore lautet:

+ +
var cat = localStorage.getItem('myCat');
+ +

Die Syntax um einen Eintrag zu entfernen lautet:

+ +
localStorage.removeItem('myCat');
+ +

Die Syntax um alle Einträge zu löschen lautet:

+ +
localStorage.clear();
+ +
+

Hinweis: Ausführliche Beispiele sind im Artikel Using the Web Storage API nachzulesen.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Web Storage', '#dom-localstorage', 'localStorage')}}{{Spec2('Web Storage')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.localStorage")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/name/index.html b/files/de/web/api/window/name/index.html new file mode 100644 index 0000000000..f6d3ec5b97 --- /dev/null +++ b/files/de/web/api/window/name/index.html @@ -0,0 +1,57 @@ +--- +title: Window.name +slug: Web/API/Window/name +tags: + - API +translation_of: Web/API/Window/name +--- +
{{APIRef}}
+ +

Holt oder setzt den Namen des Fensters.

+ +

Syntax

+ +
string = window.name;
+window.name = string;
+
+ +

Beispiel

+ +
window.name = "lab_view";
+
+ +

Hinweise

+ +

Der Name von Fenstern wird hauptsächlich als Ziel von Hyperlinks und Formularen verwendet. Fenster benötigen grundsätzlich keinen Namen.

+ +

window.name wurde auch in Frameworks verwendet um Domain-übergreifend zu kommunizieren (z.B. mit SessionVars oder Dojo's dojox.io.windowName) als sicherere Alternative JSONP. Moderne Webanwendungen sollten sich jedoch nicht auf window.name verlassen, sondern die postMessage API verwenden.

+ +

window.name konvertiert alle Werte zu ihre String-Repräsentation durch die Verwendung ihrer toString Methode.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5 W3C', 'browsers.html#dom-name', 'Window.name')}}{{Spec2('HTML5 W3C')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.name")}}

diff --git a/files/de/web/api/window/navigator/index.html b/files/de/web/api/window/navigator/index.html new file mode 100644 index 0000000000..5e9289f088 --- /dev/null +++ b/files/de/web/api/window/navigator/index.html @@ -0,0 +1,98 @@ +--- +title: Window.navigator +slug: Web/API/Window/navigator +tags: + - API + - HTML DOM + - Property + - Read-only + - Reference + - Window +translation_of: Web/API/Window/navigator +--- +
{{APIRef}}
+ +

Die Schreibgeschützte Window.navigator Eigenschaft liefert eine Referenz des {{domxref("Navigator")}} Objekts, das Informationen über die Anwendung die das Skript ausführt liefern kann.

+ +

Syntax

+ +
navigatorObject = window.navigator
+ +

Beispiele

+ +

Beispiel #1: Browsererkennung und Ausgabe eines Texts.

+ +
var sBrowser, sUsrAg = navigator.userAgent;
+
+// The order matters here, and this may report false positives for unlisted browsers.
+
+if (sUsrAg.indexOf("Firefox") > -1) {
+  sBrowser = "Mozilla Firefox";
+  // "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:61.0) Gecko/20100101 Firefox/61.0"
+} else if (sUsrAg.indexOf("Opera") > -1 || sUsrAg.indexOf("OPR") > -1) {
+  sBrowser = "Opera";
+  //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36 OPR/57.0.3098.106"
+} else if (sUsrAg.indexOf("Trident") > -1) {
+  sBrowser = "Microsoft Internet Explorer";
+  // "Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C; .NET4.0E; Zoom 3.6.0; wbx 1.0.0; rv:11.0) like Gecko"
+} else if (sUsrAg.indexOf("Edge") > -1) {
+  sBrowser = "Microsoft Edge";
+  // "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Edge/16.16299"
+} else if (sUsrAg.indexOf("Chrome") > -1) {
+  sBrowser = "Google Chrome or Chromium";
+  // "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/66.0.3359.181 Chrome/66.0.3359.181 Safari/537.36"
+} else if (sUsrAg.indexOf("Safari") > -1) {
+  sBrowser = "Apple Safari";
+  // "Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/11.0 Mobile/15E148 Safari/604.1 980x1306"
+} else {
+  sBrowser = "unknown";
+}
+
+alert("Sie verwenden: " + sBrowser);
+ +

Beispiel #2: Browsererkennung und Rückgabe eines Index.

+ +
function getBrowserId () {
+  var aKeys = ["MSIE", "Firefox", "Safari", "Chrome", "Opera"],
+      sUsrAg = navigator.userAgent,
+      nIdx = aKeys.length - 1;
+
+  for (nIdx; nIdx > -1 && sUsrAg.indexOf(aKeys[nIdx]) === -1; nIdx--);
+
+  return nIdx;
+}
+
+console.log(getBrowserId());
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-navigator', 'Window: navigator')}}{{Spec2('HTML WHATWG')}}
+  
+ +


+ Browserkompatibilität

+ + + + + +

{{Compat("api.Window.navigator")}}

diff --git a/files/de/web/api/window/ondevicemotion/index.html b/files/de/web/api/window/ondevicemotion/index.html new file mode 100644 index 0000000000..0e39638929 --- /dev/null +++ b/files/de/web/api/window/ondevicemotion/index.html @@ -0,0 +1,56 @@ +--- +title: Window.ondevicemotion +slug: Web/API/Window/ondevicemotion +tags: + - API + - Ausrichtung + - Beschleunigungssensor + - Bewegung + - Eigenschaft + - Firefox OS + - Geräteausrichtung +translation_of: Web/API/Window/ondevicemotion +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

Ein Eventhandler für das {{ event("devicemotion")}} Event, welches an das Fenster gesendet wird.

+ +

Syntax

+ +
window.ondevicemotion = funcRef;
+
+ +

Die Funktion funcRef ist eine Referenz für eine Funktion. Diese Funktion erhält ein {{ domxref("DeviceMotionEvent") }} Objekt, welches die aufgetretene Bewegung beschreibt.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Device Orientation')}}{{Spec2('Device Orientation')}}Initial specification.
+ +

Browserkompatibilität

+ +

{{ page("/en-US/docs/Web/API/DeviceMotionEvent","Browser_compatibility") }}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/opendialog/index.html b/files/de/web/api/window/opendialog/index.html new file mode 100644 index 0000000000..2dbd0587c5 --- /dev/null +++ b/files/de/web/api/window/opendialog/index.html @@ -0,0 +1,90 @@ +--- +title: Window.openDialog() +slug: Web/API/Window/openDialog +translation_of: Web/API/Window/openDialog +--- +

{{ ApiRef() }}

+ +

Zusammenfassung

+ +

window.openDialog ist eine Erweiterung von window.open. Es ist fast das gleiche, ausser das optional nach windowFeatures zusätzliche Parameter angegeben werden können, und windowFeatures selber wird ein bisschen anders behandelt.

+ +

Die optionalen Parameter, wenn vorhanden, werden zu einem JavaScript Array gebündelt und zum neu geöffneten Fenster hinzugefügt als eine Eigenschaft namens window.arguments. Sie können jederzeit im JavaScript des Fensters verwendet werden, auch während der ausführung eines load handler. Diese Parameter können dafür benutzt werden, um in beide Richtungen Daten mit dem Dialogfenster auszutauschen.

+ +

Beachten sie, das nach dem Aufruf von openDialog() sofort weitergefahren wird. Wenn Sie wollen, dass der Aufruf blockiert bis der Benutzer den Dialog schliesst, geben sie modal als windowFeatures Parameter an. Beachten sie, dass der Benutzer das opener window nicht bedienen kann, bis er den Dialog schliesst.

+ +

Syntax

+ +
newWindow = openDialog(url, name, features, arg1, arg2, ...)
+
+ +
+
newWindow 
+
Das geöffnete Fenster
+
url 
+
Die URL, die im neu geöffneten Fenster geladen wird.
+
name 
+
Der Name des Fensters (optional). Siehe window.open für detailierte Informationen.
+
features 
+
Siehe window.open.
+
arg1, arg2, ... 
+
Die Argumente, die dem neuen Fenster gegeben werden (optional).
+
+ +

Beispiel

+ +
var win = openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+
+ +

Zu beachten

+ +

Neue Features

+ +

all - Aktiviert (oder deaktiviert ("all=no")) anfangs alles chrome (ausser die behaviour flags chrome, dialog und modal). Diese können überschrieben werden (z.B. "menubar=no,all" schaltet alles chrome ein ausser die Menüleiste.) Dieses Feature wird explizirt ignoriert von window.open. Für window.openDialog ist es nützlich wegen unterschiedlichem Standardverhalten.

+ +

Standardverhalten

+ +

Die window Features chrome und dialog  sind immer eingeschaltet, ausser sie werden explizit ausgeschaltet ("chrome=no"). openDialog behandelt einen nicht vorhandenen features Parameter gleich wie window.open, (ein leerer String schaltet alle Features aus) ausser chrome und dialog, welche standartmässig eingeschaltet sind. Wenn der features Parameter ein leerer String ist, oder nur behaviour features (chrome, dependent, dialog und modal) enthält, werden die chrome features nach der "OS' choice" ausgewählt. Das heisst, der window creation code erhält keine spezifischen Anweisungen, kann dafür das chrome auswählen, das am besten zu einem Dialog auf diesem operating system passt.

+ +

Zusätzliche Parameter zum Dialog hinzufügen

+ +

Um dem Fenster zusätzliche Parameter hinzuzufügen, können Sie diese einfach nach dem windowFeatures parameter einfügen:

+ +
openDialog("http://example.tld/zzz.xul", "dlg", "", "pizza", 6.98);
+
+ +

Die zusätzlichen Parameter werden dann in eine Eigenschaft gepackt namens arguments mit dem Typ Array, und diese Eigenschaft wird dem neu erzeugten Fenster hinzugefügt.

+ +

Benützen Sie dieses Schema, um im Code des Dialogs auf diese zusätzlichen Parameter zuzugreifen:

+ +
var food  = window.arguments[0];
+var price = window.arguments[1];
+
+ +

Beachten Sie, dass Sie überall im Code des Dialogs auf diese Eigenschaft zugreiffen können. (Anderes Beispiel).

+ +

Werte vom Dialog zurückerhalten

+ +

Weil window.close() alle Eigenschaften des Dialogfensters löscht (d.h. die Variablen vom JavaScript des Dialogs), ist es nicht möglich, mit globalen Variablen (oder anderen Konstrukten) nach dem Schliessen Werte zurückzugeben.

+ +

Um Werte zum Aufrufer zurückzugeben, müssen Sie ein Objekt mit den zusätzlichen Parametern übergeben. Sie können im Code des Dialogs auf dieses Objekt zugreiffen und Eigenschaften setzen, welche die Werte enthalten, die Sie zurückgeben wollen oder die Sie auch nach window.close() behalten wollen.

+ +
var retVals = { address: null, delivery: null };
+openDialog("http://example.tld/zzz.xul", "dlg", "modal", "pizza", 6.98, retVals);
+
+ +

Wenn Sie im Dialog die Eigenschaften von retVals im Code des Dialogs setzen wie unten beschrieben, können Sie über retVals auf sie zugreiffen nach dem der Aufruf von openDialog() zurückkommt.

+ +

Im JavaScript des Dialogs können Sie wie folgt auf die Eigenschaften zugreiffen:

+ +
var retVals = window.arguments[2];
+retVals.address  = enteredAddress;
+retVals.delivery = "immediate";
+
+ +

Siehe auch hier. (anderes Beispiel).
+ Siehe auch window.importDialog (mobile).

+ +

Spezifikation

+ +

{{ DOM0() }}

diff --git a/files/de/web/api/window/opener/index.html b/files/de/web/api/window/opener/index.html new file mode 100644 index 0000000000..32301159ce --- /dev/null +++ b/files/de/web/api/window/opener/index.html @@ -0,0 +1,28 @@ +--- +title: Window.opener +slug: Web/API/Window/opener +translation_of: Web/API/Window/opener +--- +
{{APIRef}}
+ +

Zusammenfassung

+ +

Gibt einen Hinweis auf das Fenster, welches das aktuelle Fenster öffnete.

+ +

Schreibweise

+ +
objRef = window.opener;
+
+ +

Beispiel

+ +
if (window.opener != indexWin) {
+  referToTop(window.opener);
+}
+
+ +

Bemerkungen

+ +

Öffnet man ein Fenster aus einem anderen Fenster heraus (mittels {{domxref("Window.open")}} oder target='_blank'), wird im neuen Fenster ein Bezug auf das ursprüngliche Fenster mit window.opener aufrecht erhalten. Wurde das aktuelle Fenster nicht aus einem anderen Fenster geöffnet, wird NULL ausgegeben.

+ +

Der Browser in Windows Smartphones unterstützt window.opener nicht (getestet mit Microsoft Edge 25.10586.36.0). Auch im Internet Explorer gibt es keine Unterstützung, wenn die Aktivität von einer anderen Sicherheitszone ausgeht.

diff --git a/files/de/web/api/window/performance/index.html b/files/de/web/api/window/performance/index.html new file mode 100644 index 0000000000..7805b7b019 --- /dev/null +++ b/files/de/web/api/window/performance/index.html @@ -0,0 +1,96 @@ +--- +title: Window.performance +slug: Web/API/Window/performance +tags: + - Performanz + - Timing +translation_of: Web/API/Window/performance +--- +
{{APIRef("High Resolution Time")}}
+ +

Die Eigenschaft performance der {{domxref("Window")}} Schnittstelle  gibt ein {{domxref("Performance")}} Objekt zurück, welches benutzt werden kann, um Performanz-Informationen über das aktuelle Dokument zu sammeln. Sie dient als Bereitstellungspunkt für die Performance Timeline API, die High Resolution Time API, die Navigation Timing API, die User Timing API, und die Resource Timing API.

+ +

Syntax

+ +
performanceData = window.performance;
+ +

Wert

+ +

Ein {{domxref("Performance")}}-Objekt bietet Zugriff auf Performanz- und Timing-Informationen, die von den APIs, welche es offen legt, bereit gestellt werden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpecifikationStatusKommentar
{{SpecName('Highres Time', '#the-performance-interface', 'window.performance')}}{{Spec2('Highres Time')}}Definiert die now() Methode.
+ +

Browserkompabilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundsätzliche Unterstützung6.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("7.0")}}9.015.08
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundsätzliche Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("7.0")}}9.015.09{{CompatVersionUnknown}}
+
+ +

 

diff --git a/files/de/web/api/window/print/index.html b/files/de/web/api/window/print/index.html new file mode 100644 index 0000000000..3043194293 --- /dev/null +++ b/files/de/web/api/window/print/index.html @@ -0,0 +1,50 @@ +--- +title: Window.print() +slug: Web/API/Window/print +translation_of: Web/API/Window/print +--- +

{{ ApiRef() }}

+ +

Öffnet den Dialog zum Drucken des aktuellen Dokuments.

+ +

In den meisten Browsern wird die Methode nicht ausgeführt, sofern bereits ein Druck-Dialog geöffnet ist.

+ +

Syntax

+ +
window.print()
+
+ +

Anmerkungen

+ +

Seit Chrome Version {{CompatChrome(46.0)}} wird diese Methode innerhalb eines {{htmlelement("iframe")}} Elements blockiert, solange kein sandbox Attribut mit dem Wert allow-modal gesetzt ist.

+ +

Spezifikation

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentare
{{SpecName('HTML5 Web application', '#dom-print', 'print()')}}{{Spec2('HTML5 Web application')}}Erste Definition.
+ +

Browserkompatibilität

+ +

{{Compat("api.Window.print")}}

+ +

Siehe auch

+ + + +

{{ languages( { "ja": "ja/DOM/window.print", "it": "it/DOM/window.print" , "zh-cn": "zh-cn/DOM/window.print" } ) }}

diff --git a/files/de/web/api/window/prompt/index.html b/files/de/web/api/window/prompt/index.html new file mode 100644 index 0000000000..5fe0290c4e --- /dev/null +++ b/files/de/web/api/window/prompt/index.html @@ -0,0 +1,79 @@ +--- +title: Window.prompt() +slug: Web/API/Window/prompt +translation_of: Web/API/Window/prompt +--- +
{{ApiRef("Window")}}
+ +

Window.prompt() zeigt ein Dialogfenster mit einem Text-Eingabefeld an, mit einer optionalen Nachricht an den Benutzer.

+ +

Syntax

+ +
eingabe = window.prompt(nachricht, default);
+
+ + + +

Beispiel

+ +
var sign = prompt("What's your sign?");
+
+if (sign.toLowerCase() == "scorpio") {
+  alert("Wow! I'm a Scorpio too!");
+}
+
+// es gibt viele Möglichkeiten, um die prompt-Funktion zu nutzen
+var sign = window.prompt(); //  Öffnet das leere Eingabefenster 
+var sign = prompt();       //   Öffnet das leere Eingabefenster
+var sign = window.prompt('Are you feeling lucky'); // Öffnet das Eingabefenster mit dem Text "Are you feeling lucky"
+var sign = window.prompt('Are you feeling lucky', 'sure'); // Öffnet das Eingabefenster mit dem Text "Are you feeling lucky" und dem Standardwert "sure"
+ +

Wenn der Benutzer den OK-Button drückt, wird der Text im Eingabefeld zurückgegeben. Falls das Feld leer ist, wenn der Benutzer den OK-Button drückt, wird ein leerer String zurückgegeben. Wird der Abbrechen-Button gedrückt, gibt die Funktion null zurück.

+ +

Die obige Eingabeaufforderung wird wie folgt angezeigt (in Chrome auf OS X):

+ +

prompt() dialog in Chrome on OS X

+ +

Anmerkungen

+ +

Ein prompt-Dialogfenster einen einzeiligen Text, einen Abbrechen-Button und einen OK-Button und gibt den (möglicherweise leeren) Text zurück, der ins Textfeld eingegeben wurde.

+ +

The following text is shared between this article, DOM:window.confirm and DOM:window.alert Dialogfenster sind modal - sie verhindern, dass der Anwender auf den Rest der Seite zugreifen kann, bis das Dialogfenster geschlossen wurde. Aus diesen Grund sollte man Funktionen, die Dialogfenster anzeigen, nicht zu oft verwenden.

+ +

Beachte, dass ein String zurückgegeben wird. Das heißt, die Eingabe muss manchmal gecasted werden. Beispiel: Falls eine Zahl eingegeben werden soll, sollte der String zu einer Zahl gecasted werden. var aNumber = Number(window.prompt("Gib eine Zahl ein", ""));

+ +

Mozilla Chrome-Nutzer (z.B. Firefox-Erweiterungen) sollten stattdessen {{interface("nsIPromptService")}} verwenden.

+ +

Seit Chrome {{CompatChrome(46.0)}} wird diese Funktion innerhalb eines {{htmlelement("iframe")}}s blockiert, es sei denn, dessen sandbox-Attribut hat den Wert allow-modal.

+ +

In Safari wird auch dann ein leerer String zurückgegeben, wenn Abbrechen gedrückt wurde. Es macht also keinen Unterschied, ob OK oder Abbrechen gedrückt wird, wenn das Eingabefeld leer ist.

+ +

Diese Funktion hat keinen Effekt in der Modern UI/Metro-Version von Internet Explorer für Windows 8. Es zeigt kein Dialogfenster an und gibt immer undefined zurück. Es ist unklar, ob dieses Verhalten Absicht oder ein Bug ist. Desktopversionen von Internet Explorer implementieren die Funktion aber.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationenStatusKommentar
{{SpecName('HTML5 Web application', '#dom-prompt', 'prompt()')}}{{Spec2('HTML5 Web application')}}Anfängliche Definition.
+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/screenx/index.html b/files/de/web/api/window/screenx/index.html new file mode 100644 index 0000000000..61221ffd18 --- /dev/null +++ b/files/de/web/api/window/screenx/index.html @@ -0,0 +1,98 @@ +--- +title: Window.screenX +slug: Web/API/Window/screenX +translation_of: Web/API/Window/screenX +--- +
{{APIRef}}
+ +
Die schreibgeschützte Eigenschaft Window.screenX liefert den Abstand in CSS-Pixeln zwischen dem linken Bildschirmrand und dem linken Rand des Browsers.
+ +
 
+ +

Syntax

+ +
lLoc = window.screenX
+
+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSSOM View', '#dom-window-screenx', 'Window.screenX') }}{{ Spec2('CSSOM View') }}Initiale Definition.
+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }} [1]{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
+
+ +

[1] Vor Firefox 28 nutzte Gecko "device pixel" anstatt CSS-Pixel; anders gesagt nahm es für den Wert von screenPixelsPerCSSPixel für jedes Gerät "1" an.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/scroll/index.html b/files/de/web/api/window/scroll/index.html new file mode 100644 index 0000000000..95f7da74fc --- /dev/null +++ b/files/de/web/api/window/scroll/index.html @@ -0,0 +1,56 @@ +--- +title: Window.scroll() +slug: Web/API/Window/scroll +translation_of: Web/API/Window/scroll +--- +
{{APIRef}}
+ +

Zusammenfassung

+ +

Scrollt das Fenster zu einer bestimmten Stelle im Dokument.

+ +

Syntax

+ +
window.scroll(x-koord,y-koord)
+
+ +

Parameters

+ + + +

Beispiel

+ +
<!-- lege den 100. vertikalen Pixel an der oberen Fensterrand -->
+
+<button onClick="scroll(0, 100);">Klicken, um 100 Pixel nach unten zu scrollen</button>
+
+ +

Notizen

+ +

window.scrollTo ist praktisch dasselbe wie diese Methode. Zum wiederholten Blättern um einen bestimmten Abstand, wird window.scrollBy benutzt. Siehe auch window.scrollByLines, window.scrollByPages.

+ +

Spezifikation

+ +
+
+ + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSSOM View', '#dom-window-scrollto', 'window.scrollTo()') }}{{ Spec2('CSSOM View') }}Erste Definition.
+
+
diff --git a/files/de/web/api/window/scrollto/index.html b/files/de/web/api/window/scrollto/index.html new file mode 100644 index 0000000000..c33f70df89 --- /dev/null +++ b/files/de/web/api/window/scrollto/index.html @@ -0,0 +1,75 @@ +--- +title: Window.scrollTo() +slug: Web/API/Window/scrollTo +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/Window/scrollTo +--- +
{{ APIRef }}
+ +

Window.scrollTo() scrollt zu einer spezifischen Koordinate im Dokument.

+ +

Syntax

+ +
window.scrollTo(x-Koordinate, y-Koordinate)
+window.scrollTo(options)
+
+ +

Parameter

+ + + +

- or -

+ + + +

Beispiele

+ +
window.scrollTo(0, 1000);
+
+ +

Mit Benutzung von options:

+ +
window.scrollTo({
+  top: 100,
+  left: 100,
+  behavior: 'smooth'
+});
+ +

Anmerkungen

+ +

{{domxref("Window.scroll()")}} ist im Endeffekt die gleiche Methode. Schau dir {{domxref("Window.scrollBy()")}}, {{domxref("Window.scrollByLines()")}}, und {{domxref("Window.scrollByPages()")}} für relatives scrollen an.

+ +

Um Elemente zu scrollen, schau dir {{domxref("Element.scrollTop")}} und {{domxref("Element.scrollLeft")}} an.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSSOM View', '#dom-window-scroll', 'window.scroll()') }}{{ Spec2('CSSOM View') }}Anfängliche Definition.
+ +

Browser Kompatibilität

+ + + +

{{Compat("api.Window.scrollTo")}}

diff --git a/files/de/web/api/window/sessionstorage/index.html b/files/de/web/api/window/sessionstorage/index.html new file mode 100644 index 0000000000..b5adca4a81 --- /dev/null +++ b/files/de/web/api/window/sessionstorage/index.html @@ -0,0 +1,90 @@ +--- +title: Window.sessionStorage +slug: Web/API/Window/sessionStorage +tags: + - API + - Property + - Storage +translation_of: Web/API/Window/sessionStorage +--- +

{{APIRef()}}

+ +

Die sessionStorage-Eigenschaft erlaubt den Zugriff auf ein nur während der aktuellen Sitzung verfügbares Storage-Objekt. sessionStorage ist mit einer Ausnahme identisch zu {{domxref("Window.localStorage")}}: In localStorage gespeicherte Daten besitzen kein Verfallsdatum, während sie im sessionStorage mit Ablauf der Sitzung gelöscht werden. Eine Sitzung endet erst mit dem Schließen des Browsers, sie übersteht das Neuladen und Wiederherstellen einer Webseite. Das Öffnen einer Webseite in einem neuen Tab oder Browserfenster erzeugt jedoch eine neue Sitzung; ein Unterschied zur Funktionsweise von Session-Cookies.

+ +

localStorage und sessionStorage sind nicht nur von der Domain, sondern auch vom Protokoll abhängig, über das die Seite aufgerufen wurde. In http://example.com/ gespeicherte Daten stehen daher unter https://example.com nicht zur Verfügung.

+ +

Syntax

+ +
// Daten im sessionStorage speichern
+sessionStorage.setItem('key', 'value');
+
+// Gespeicherte Daten aus dem sessionStorage abfragen
+var data = sessionStorage.getItem('key');
+
+// Gespeicherte Daten aus dem sessionStorage entfernen
+sessionStorage.removeItem('key');
+
+// Alle gespeicherten Daten aus dem sessionStorage entfernen
+sessionStorage.clear();
+ +

Wert

+ +

Ein {{domxref("Storage")}}-Objekt.

+ +

Beispiel

+ +

Im folgenden Beispiel wird auf das sessionStorage-Objekt der aktuellen Domain zugegriffen und mit {{domxref("Storage.setItem()")}} Daten hinzugefügt:

+ +
sessionStorage.setItem('myCat', 'Tom');
+ +

Das folgende Beispiel speichert automatisch den Inhalt eines Textfeldes. Bei einem versehentlichen Neuladen der Seite wird der Inhalt wiederhergestellt, sodass keine Eingaben verloren gehen.

+ +
// Das Textfeld holen, das überwacht werden soll
+var field = document.getElementById("field");
+
+// Prüfen, ob ein gespeicherter Wert vorliegt
+// (das ist nur dann der Fall, wenn die Seite versehentlich aktualisiert wurde)
+if (sessionStorage.getItem("autosave")) {
+  // Den Inhalt des Testfeldes aus dem sessionStorage wiederherstellen
+  field.value = sessionStorage.getItem("autosave");
+}
+
+// Änderungen des Inhalts des Textfeldes überwachen
+field.addEventListener("change", function() {
+  // Speichern des Inhalts des Textfeldes im sessionStorage
+  sessionStorage.setItem("autosave", field.value);
+});
+ +
+

Anmerkung: Ein vollständiges Beispiel kann unter Using the Web Storage API nachgelesen werden.

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('Web Storage', '#the-sessionstorage-attribute', 'sessionStorage')}}{{Spec2('Web Storage')}} 
+ +

Browserkompatibilität

+ + + +

{{Compat("api.Window.sessionStorage")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/api/window/stop/index.html b/files/de/web/api/window/stop/index.html new file mode 100644 index 0000000000..8968e89177 --- /dev/null +++ b/files/de/web/api/window/stop/index.html @@ -0,0 +1,38 @@ +--- +title: Window.stop() +slug: Web/API/Window/stop +tags: + - API + - DOM + - DOM_0 + - Method + - stopwindowloading +translation_of: Web/API/Window/stop +--- +
{{APIRef}}
+ +

Zusammenfassung

+ +

Diese Methode stoppt das Laden des Fensters.

+ +

Syntax

+ +
window.stop()
+
+ +

Beispiel

+ +
window.stop();
+
+ +

Notizen

+ +

Die stop() Methode ist genau equivalent zum Klicken des Stop-Buttons im Browser. Aufgrund der Reihenfolge in der Scripte geladen werden, kann die stop() Methode nicht das Dokument, in dem es enthalten ist, vom Laden stoppen, aber es stoppt das Laden von großen Bildern, neuen Fenstern, und anderen Objekten, die verzögert geladen werden.

+ +

Spezifikation

+ +

DOM Level 0. Kein Teil der Spezifikation.

+ +

Compatibility

+ +

Die stop() Methode wird nicht vom Internet Explorer unterstützt.

diff --git a/files/de/web/api/windowbase64/btoa/index.html b/files/de/web/api/windowbase64/btoa/index.html new file mode 100644 index 0000000000..9d980c340a --- /dev/null +++ b/files/de/web/api/windowbase64/btoa/index.html @@ -0,0 +1,145 @@ +--- +title: WindowBase64.btoa() +slug: Web/API/WindowBase64/btoa +tags: + - API + - Méthode + - Referenz +translation_of: Web/API/WindowOrWorkerGlobalScope/btoa +--- +
{{APIRef("HTML DOM")}}
+ +

Erzeugt eine Base-64-kodierten ASCII-Zeichenkette aus einer "Zeichenkette" von Binärdaten.

+ +

Hinweis: diese Funktion ist nicht für Raw-Unicode-Zeichenketten geeignet (siehe Abschnitt "Unicode-Zeichenketten" unten).

+ +

Syntax

+ +
var encodedData = window.btoa(stringToEncode);
+ +

Example

+ +
var encodedData = window.btoa("Hello, world"); // Zeichenkette kodieren
+var decodedData = window.atob(encodedData); // Zeichenkette dekodieren
+
+ +

Hinweise

+ +

Diese Methode kann verwendet werden, um Daten zu kodieren, übertragen, und mittels {{domxref("WindowBase64.atob","window.atob()")}} wieder zu dekodieren, welche andernfalls Übertragungsprobleme bereiten würden. Beispielsweise ist es möglich, die Steuerzeichen mit den ASCII-Werten 0 bis 31 zu kodieren.

+ +

btoa() steht auch in JavaScript implementierten XPCOM-Komponenten zur Verfügung, auch wenn window in solchen Komponenten nicht das globale Objekt ist.

+ +

Unicode-Zeichenketten

+ +

In den meisten Browsern verursacht ein Aufruf von window.btoa() mit einer Unicode-Zeichenkette eine "Character Out Of Range"-Exception ("Zeichen außerhalb des zulässigen Wertebereichs").

+ +

Das kann mithilfe eines solchen Code-Schemas vermieden werden (beigesteuert von Johan Sundström):

+ +
function utf8_to_b64(str) {
+    return window.btoa(unescape(encodeURIComponent(str)));
+}
+
+function b64_to_utf8(str) {
+    return decodeURIComponent(escape(window.atob(str)));
+}
+
+// Usage:
+utf8_to_b64('✓ à la mode'); // JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ==
+b64_to_utf8('JTI1dTI3MTMlMjUyMCUyNUUwJTI1MjBsYSUyNTIwbW9kZQ=='); // "✓ à la mode"
+
+utf8_to_b64('I \u2661 Unicode!'); // SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ==
+b64_to_utf8('SSUyNTIwJTI1dTI2NjElMjUyMFVuaWNvZGUlMjUyMQ=='); // "I ♡ Unicode!"
+
+
+ +

Eine günstigere, zuverlässigere und effizientere Lösung ist, DOMString zunächst in eine UTF-8-kodierte Zeichenkette zu konvertieren, die sich für typed arrays eignet. Eine Anleitung bietet dieser Abschnitt.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#dom-windowbase64-btoa', 'WindowBase64.btoa()')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#dom-windowbase64-btoa", "WindowBase64.btoa()")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(1)}}[1]10{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile(1)}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] btoa() is also available to XPCOM components implemented in JavaScript, even though window is not the global object in components.

+ +

See also

+ + diff --git a/files/de/web/api/windowbase64/index.html b/files/de/web/api/windowbase64/index.html new file mode 100644 index 0000000000..40051820b4 --- /dev/null +++ b/files/de/web/api/windowbase64/index.html @@ -0,0 +1,120 @@ +--- +title: WindowBase64 +slug: Web/API/WindowBase64 +tags: + - API + - HTML-DOM + - Helper + - NeedsTranslation + - TopicStub + - WindowBase64 +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +

{{APIRef("HTML DOM")}}

+ +

The WindowBase64 helper contains utility methods to convert data to and from base64, a binary-to-text encoding scheme. For example it is used in data URIs.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This helper neither defines nor inherits any properties.

+ +

Methods

+ +

This helper does not inherit any methods.

+ +
+
{{domxref("WindowBase64.atob()")}}
+
Decodes a string of data which has been encoded using base-64 encoding.
+
{{domxref("WindowBase64.btoa()")}}
+
Creates a base-64 encoded ASCII string from a string of binary data.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowbase64', 'WindowBase64')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowbase64", "WindowBase64")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}} [1]{{CompatVersionUnknown}}10.0{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1]  atob() is also available to XPCOM components implemented in JavaScript, even though {{domxref("Window")}} is not the global object in components.

+ +

See also

+ + diff --git a/files/de/web/api/windoweventhandlers/index.html b/files/de/web/api/windoweventhandlers/index.html new file mode 100644 index 0000000000..cdd4a8258b --- /dev/null +++ b/files/de/web/api/windoweventhandlers/index.html @@ -0,0 +1,189 @@ +--- +title: WindowEventHandlers +slug: Web/API/WindowEventHandlers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/API/WindowEventHandlers +--- +
{{APIRef("HTML DOM")}}
+ +

WindowEventHandlers describes the event handlers common to several interfaces like {{domxref("Window")}}, or {{domxref("HTMLBodyElement")}} and  {{domxref("HTMLFrameSetElement")}}. Each of these interfaces can implement more event handlers.

+ +

WindowEventHandlers is a not an interface and no object of this type can be created.

+ +

Properties

+ +

The events properties, of the form onXYZ, are defined on the {{domxref("WindowEventHandlers")}}, and implemented by {{domxref("Window")}}, and {{domxref("WorkerGlobalScope")}} for Web Workers.

+ +
+
{{domxref("WindowEventHandlers.onafterprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("afterprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeprint")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeprint")}} event is raised.
+
{{domxref("WindowEventHandlers.onbeforeunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("beforeunload")}} event is raised.
+
{{domxref("WindowEventHandlers.onhashchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("hashchange")}} event is raised.
+
{{domxref("WindowEventHandlers.onlanguagechange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("languagechange")}} event is raised.
+
{{domxref("WindowEventHandlers.onmessage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("message")}} event is raised.
+
{{domxref("WindowEventHandlers.onoffline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("offline")}} event is raised.
+
{{domxref("WindowEventHandlers.ononline")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("online")}} event is raised.
+
{{domxref("WindowEventHandlers.onpagehide")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pagehide")}} event is raised.
+
{{domxref("WindowEventHandlers.onpageshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pageshow")}} event is raised.
+
{{domxref("WindowEventHandlers.onpopstate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("popstate")}} event is raised.
+
{{domxref("WindowEventHandlers.onresize")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("resize")}} event is raised.
+
{{domxref("WindowEventHandlers.onstorage")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("storage")}} event is raised.
+
{{domxref("WindowEventHandlers.onunload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("unload")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onlanguage since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoDesktop(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onhashchange{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onlanguage{{experimental_inline}}{{CompatGeckoMobile(32)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onstorage{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/de/web/api/windoweventhandlers/onafterprint/index.html b/files/de/web/api/windoweventhandlers/onafterprint/index.html new file mode 100644 index 0000000000..088f6c91aa --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onafterprint/index.html @@ -0,0 +1,93 @@ +--- +title: WindowEventHandlers.onafterprint +slug: Web/API/WindowEventHandlers/onafterprint +translation_of: Web/API/WindowEventHandlers/onafterprint +--- +
{{ApiRef}}
+ +
Die Eigenschaft WindowEventHandlers.onafterprint definiert und gibt den {{event("onafterprint")}} {{domxref("EventHandler")}} für das aktuelle Window aus.
+ +

Syntax

+ +
window.onafterprint = event handling code
+
+ +

Beschreibung

+ +

Manche Browser (inklusive Firefox 6 und neuer, Internet Explorer) senden beforeprint und afterprint Events um zu bestimmen, ob ein Druckvorgang stattgefunden hat. Diese Funktion kann genutzt werden um das User-Interface während des Druckvorgangs anzupassen (z.B das Ausblenden von User-Interface Elementen während des Druckvorgangs).

+ +

Das afterprint Event wird ausgelöst nachdem der Nutzer gedruckt hat oder den den Druck abgebrochen hat.

+ +

Spezifikation

+ +

Nicht Teil einer Spezifikation.

+ +

Browserkompatbilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}6.0{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + + +
 
diff --git a/files/de/web/api/windoweventhandlers/onhashchange/index.html b/files/de/web/api/windoweventhandlers/onhashchange/index.html new file mode 100644 index 0000000000..3bb0fb12a9 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onhashchange/index.html @@ -0,0 +1,162 @@ +--- +title: WindowEventHandlers.onhashchange +slug: Web/API/WindowEventHandlers/onhashchange +tags: + - Eigenschaft + - Event + - HTML-DOM + - Referenz + - WindowEventHandlers +translation_of: Web/API/WindowEventHandlers/onhashchange +--- +
+
{{APIRef("HTML DOM")}}
+
+ +

Das hashchange Event wird ausgelöst wenn sich der window.hash verändert (siehe {{domxref("Window.location", "location.hash")}}).

+ +

Syntax

+ +
window.onhashchange = funcRef;
+
+ +

oder

+ +
<body onhashchange="funcRef();">
+
+ +

oder

+ +
window.addEventListener("hashchange", funcRef, false);
+
+ +

Parameter

+ +
+
funcRef
+
Ein Verweis auf eine Funktion.
+
+ +

Beispiel

+ +
if ("onhashchange" in window) {
+    alert("Der Browser unterstützt das hashchange-Event!");
+}
+
+function locationHashChanged() {
+    if (location.hash === "#irgendeinCoolesFeature") {
+        featureFunction();
+    }
+}
+
+window.onhashchange = locationHashChanged;
+
+ +

Das hashchange Event

+ +

Das ausgelöste hashchange Event hat folgende Eigenschaften:

+ + + + + + + + + + + + + + + + + + + +
EigenschaftTypBeschreibung
newURL {{gecko_minversion_inline("6.0")}}DOMStringDie neue URL zu der das Fenster nun navigiert.
oldURL {{gecko_minversion_inline("6.0")}}DOMStringDie vorherige URL, von der aus das Fenster navigierte.
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML5.1', '#windoweventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}} 
{{SpecName("HTML5 W3C", "#windoweventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}} 
+ +

Browser-Kompatiblität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5.0{{CompatGeckoDesktop("1.9.2")}} +

8.0

+ +

oldURL/newURL Eigenschaften werden nicht unterstützt.

+ 		10.65.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.2{{CompatGeckoMobile("1.9.2")}}9.011.05.0
+
+ + diff --git a/files/de/web/api/windoweventhandlers/onpopstate/index.html b/files/de/web/api/windoweventhandlers/onpopstate/index.html new file mode 100644 index 0000000000..5154919751 --- /dev/null +++ b/files/de/web/api/windoweventhandlers/onpopstate/index.html @@ -0,0 +1,57 @@ +--- +title: WindowEventHandlers.onpopstate +slug: Web/API/WindowEventHandlers/onpopstate +translation_of: Web/API/WindowEventHandlers/onpopstate +--- +
{{APIRef}} {{gecko_minversion_header("2")}}
+ +

Zusammenfassung

+ +

Hier geht es um die Ereignisbehandlungsroutine, üblicherweise event handler genannt, für das popstate Ereignis (event) des window Objekts.

+ +

Ein popstate Ereignis wird an window übermittelt, wann immer der aktive history Eintrag zwischen zwei Einträgen für dasselbe Dokument wechselt. Falls der zu aktivierende history Eintrag erzeugt wurde durch den Aufruf von history.pushState() oder beeinflusst wurde durch Aufruf von history.replaceState(), dann enthält die state Eigenschaft des popstate Ereignisses eine Kopie des state Objekts des history Eintrags. 

+ +

Es gilt zu beachten, dass der bloße Aufruf von history.pushState() oder history.replaceState() kein popstate Ereignis auslöst. Das popstate Ereignis wird allein durch Anklicken des Zurück-Buttons (oder den Aufruf von history.back() per Javascript) ausgelöst. Auch wird das Ereignis nur ausgelöst, wenn sich der Anwender zwischen zwei history Einträgen für dasselbe Dokument bewegt.

+ +

Browser behandeln den popstate Zustand nach initialem Laden einer Seite (onload) auf verschiedene Weise. Chrome (vor Version 34) und Safari senden immer ein popstate Ereignis, Firefox hingegen nicht.

+ +

Syntax

+ +
window.onpopstate = funcRef;
+
+ + + +

Das popstate Ereignis

+ +

Zum Beispiel würde eine Seite mit der URL http://example.com/example.html beim Durchlaufen dieses Codes die folgenden Meldungen in der Konsole ausgeben:

+ +
window.onpopstate = function(event) {
+  alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
+};
+
+history.pushState({page: 1}, "title 1", "?page=1");
+history.pushState({page: 2}, "title 2", "?page=2");
+history.replaceState({page: 3}, "title 3", "?page=3");
+history.back(); // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
+history.back(); // alerts "location: http://example.com/example.html, state: null
+history.go(2);  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}
+
+ +

Obwohl mit dem ursprünglichen history Eintrag (für die URL http://example.com/example.html) kein state Objekt verknüpft ist, wird dennoch ein popstate Ereignis ausgelöst, sobald dieser Eintrag durch den zweiten Aufruf von history.back() aktiv wird.

+ +

Spezifikation

+ + + +

Weiterführende Informationen

+ + diff --git a/files/de/web/api/windowtimers/index.html b/files/de/web/api/windowtimers/index.html new file mode 100644 index 0000000000..396aca3d4d --- /dev/null +++ b/files/de/web/api/windowtimers/index.html @@ -0,0 +1,124 @@ +--- +title: WindowTimers +slug: Web/API/WindowTimers +tags: + - API + - HTML-DOM + - Interface + - NeedsTranslation + - Reference + - TopicStub + - Workers +translation_of: Web/API/WindowOrWorkerGlobalScope +--- +
{{APIRef("HTML DOM")}}
+ +

WindowTimers contains utility methods to set and clear timers.

+ +

There is no object of this type, though the context object, either the {{domxref("Window")}} for regular browsing scope, or the {{domxref("WorkerGlobalScope")}}  for workers, implements it.

+ +

Properties

+ +

This interface do not define any property, nor inherit any.

+ +

Methods

+ +

This interface do not inherit any method.

+ +
+
{{domxref("WindowTimers.clearInterval()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setInterval()")}}.
+
{{domxref("WindowTimers.clearTimeout()")}}
+
Cancels the repeated execution set using {{domxref("WindowTimers.setTimeout()")}}.
+
{{domxref("WindowTimers.setInterval()")}}
+
Schedules the execution of a function each X milliseconds.
+
{{domxref("WindowTimers.setTimeout()")}}
+
Sets a delay for executing a function.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#windowtimers', 'WindowTimers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. No change.
{{SpecName("HTML5 W3C", "#windowtimers", "WindowTimers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of WindowBase64 (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(1)}}1.04.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatGeckoMobile(1)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

 

+ +

See also

+ + diff --git a/files/de/web/api/windowtimers/settimeout/index.html b/files/de/web/api/windowtimers/settimeout/index.html new file mode 100644 index 0000000000..9f13870d78 --- /dev/null +++ b/files/de/web/api/windowtimers/settimeout/index.html @@ -0,0 +1,329 @@ +--- +title: WindowTimers.setTimeout() +slug: Web/API/WindowTimers/setTimeout +translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout +--- +
{{APIRef("HTML DOM")}}
+ +

Die Funktion setTimeout() der {{domxref("WindowOrWorkerGlobalScope")}}-Schnittstelle ruft nach der gegebenen Zeitspanne eine Funktion oder direkt angebenen Code auf.

+ +

Syntax

+ +
var timeoutID = window.setTimeout(funktion, zeitspanne, [parameter1, parameter2, ...]);
+var timeoutID = window.setTimeout(code, zeitspanne);
+
+ +

 

+ +

Parameter

+ +

 

+ +
+
funktion
+
Die {{jsxref("function", "Funktion")}}, die nach zeitspanne Millisekunden ausgeführt werden soll.
+
code
+
code in der alternativen Syntax ist eine Zeichenkette, die Code enthält, der nach zeitspanne Millisekunden ausgeführt werden soll.  code sollte aus den gleichen Gründen, die auch eval() zum Sicherheitsrisiko machen, nicht verwendet werden.
+
zeitspanne {{optional_inline}}
+
zeitspanne ist die Wartezeit in Millisekunden (ein Tausendstel einer Sekunde), nach der funktion bzw. code ausgeführt werden soll. Dieser Wert ist ein Mindestwert, die tatsächlich abgelaufene Zeit kann länger sein, siehe {{anch("Gründe für längere als gegebene Wartezeiten")}} weiter unten.
+
parameter1, ..., parameterN {{optional_inline}}
+
Diese Parameter werden an die funktion oder den code übergeben.
+
+ +
Anmerkung: Der Internet Explorer unterstützt bis einschließlich Version 9 die Übergabe von zusätzlichen Parametern nicht.
+ +

Rückgabewert

+ +

setTimeout() gibt eine ID zurück, die den eingerichteten Zeitgeber identifiziert; um die Wartezeit abzubrechen, kann sie an {{domxref("WindowOrWorkerGlobalScope.clearTimeout","clearTimeout()")}}  übergeben werden.

+ +

Jede ID wird von setTimeout() und setInterval() nur einmalig je Objekt (window oder Worker) verwendet.

+ +

Beispiel

+ +

HTML

+ +
<p>Beispiel</p>
+<button onclick="delayedAlert();">Zeige nach zwei Sekunden einen Alarm.</button>
+<p></p>
+<button onclick="clearAlert();">Alarm vorzeitig abbrechen.</button>
+ +

JavaScript

+ +
var timeoutID;
+
+function delayedAlert() {
+  timeoutID = window.setTimeout(slowAlert, 2000);
+}
+
+function slowAlert() {
+  alert('Das hat gedauert!');
+}
+
+function clearAlert() {
+  window.clearTimeout(timeoutID);
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample('Example')}}

+ +

Siehe auch clearTimeout()

+ +

Polyfill

+ +

Der nachfolgende Polyfill-Code ermöglicht es, der aufzurufenden Funktion auch im Internet Explorer Parameter zu übergeben:

+ +
/*\
+|*|
+|*|  Polyfill which enables the passage of arbitrary arguments to the
+|*|  callback functions of JavaScript timers (HTML5 standard syntax).
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/window.setInterval
+|*|
+|*|  Syntax:
+|*|  var timeoutID = window.setTimeout(func, delay[, param1, param2, ...]);
+|*|  var timeoutID = window.setTimeout(code, delay);
+|*|  var intervalID = window.setInterval(func, delay[, param1, param2, ...]);
+|*|  var intervalID = window.setInterval(code, delay);
+|*|
+\*/
+
+(function() {
+  setTimeout(function(arg1) {
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeST__ = window.setTimeout;
+    window.setTimeout = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeST__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+
+  var interval = setInterval(function(arg1) {
+    clearInterval(interval);
+    if (arg1 === 'test') {
+      // feature test is passed, no need for polyfill
+      return;
+    }
+    var __nativeSI__ = window.setInterval;
+    window.setInterval = function(vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */ ) {
+      var aArgs = Array.prototype.slice.call(arguments, 2);
+      return __nativeSI__(vCallback instanceof Function ? function() {
+        vCallback.apply(null, aArgs);
+      } : vCallback, nDelay);
+    };
+  }, 0, 'test');
+}())
+ +

Eine andere Möglichkeit ist, die Funktion innerhalb einer anonymen Funktion aufzurufen:

+ +
setTimeout(function() {
+    funktion("eins", "zwei", "drei");
+}, 1000);
+
+ +

Ebenfalls kann die Funktion bind() genutzt werden:

+ +

 

+ +
setTimeout(function(arg1, arg2, arg3){}.bind(undefined, "eins", "zwei", "drei"), 1000);
+ +

 

+ +

Das "this"-Problem

+ +

In der an setTimeout() übergebenen Funktion wird this bei Aufruf einen falschen Wert enthalten. Dieses Problem wird detailliert in der JavaScript-Referenz beschrieben.

+ +

Erklärung

+ +

Von setTimeout() ausgeführter Code wird in einem anderen Kontext ausgeführt, als in dem setTimeout() aufgerufen wurde. this wird deshalb in der aufgerufenen Funktion window oder global entsprechen, nicht dem this des Bereichs, in dem  setTimeout() aufgerufen wurde. Beispiel:

+ +
myArray = ["null", "eins", "drei"];
+myArray.myMethod = function (sProperty) {
+    alert(arguments.length > 0 ? this[sProperty] : this);
+};
+
+myArray.myMethod(); // Ausgabe: "null,eins,zwei"
+myArray.myMethod(1); // Ausgabe: "eins"
+setTimeout(myArray.myMethod, 1000); // Ausgabe: "[object Window]" nach 1 Sekunde
+setTimeout(myArray.myMethod, 1500, "1"); // Ausgabe: "undefined" nach 1,5 Sekunden
+// Versuchen wir, 'this' zu übergeben
+setTimeout.call(myArray, myArray.myMethod, 2000); // Fehler: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"
+setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Der gleiche Fehler
+ +

Es gibt hier keine Möglichkeit, this an die aufzurufende Funktion durchzureichen.

+ +

Eine Lösungsmöglichkeit

+ +

Eine Möglichkeit, das Problem zu umgehen, ist es, die beiden eingebauten Funktionen setTimeout() und setInterval() durch zwei eigene zu ersetzen, die sich Function.prototype.call bedienen:

+ +
// Enable the passage of the 'this' object through the JavaScript timers
+
+var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;
+
+window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeST__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+
+window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
+  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
+  return __nativeSI__(vCallback instanceof Function ? function () {
+    vCallback.apply(oThis, aArgs);
+  } : vCallback, nDelay);
+};
+ +
Hinweis: Diese beiden Ersatzfunktionen ermöglichen es auch, im Internet Explorer Parameter an die aufzurufende Funktion zu übergeben, wie es HTML5 vorsieht. Sie können daher auch als {{anch("Polyfill")}} benutzt werden.
+ +

Anmerkungen

+ +

Eine Wartezeit kann mit window.clearTimeout() abgebrochen werden.

+ +

Soll eine Funktion wiederholt alle n Millisekunden aufgerufen werden, ist window.setInterval() die bessere Wahl.

+ +

Passing string literals

+ +

Passing a string instead of a function to setTimeout() suffers from the same hazards as using eval.

+ +
// Correct
+window.setTimeout(function() {
+    alert("Hello World!");
+}, 500);
+
+// Incorrect
+window.setTimeout("alert(\"Hello World!\");", 500);
+
+
+ +

String literals are evaluated in the global context, so local symbols in the context where setTimeout() was called will not be available when the string is evaluated as code.

+ +

Gründe für längere als gegebene Wartezeiten

+ +

Aus verschiedenen Gründen kann die tatsächliche Zeit bis zum Aufruf der Funktion länger sein als mit setTimeout() angegeben wurde. Dieser Abschnitt beschreibt die beiden häufigsten.

+ +

Wartezeiten betragen 4ms oder mehr

+ +

Um das System nicht zu überlasten, begrenzen moderne Browser die Häufigkeit der von setTimeout() und setInterval() ausgelösten Ereignisse ab einer bestimmten Aufruftiefe oder -häufigkeit. Beispiel:

+ +
function cb() { f(); setTimeout(cb, 0); }
+setTimeout(cb, 0);
+ +
setInterval(f, 0);
+ +

Chrome und Firefox drosseln nach dem fünften Aufruf, Safari nach dem sechsten, Edge bereits nach dem dritten.

+ +

Eine Wartezeit von 0 ms kann mit {{domxref("window.postMessage()")}} erreicht werden, wie hier beschrieben.

+ +

 

+ +
+

Hinweis: Die Mindestwartezeit, DOM_MIN_TIMEOUT_VALUE, beträgt 4 ms (Firefox-Einstellung dom.min_timeout_value), die Verschachtelungstiefe DOM_CLAMP_TIMEOUT_NESTING_LEVEL beträgt 5.

+
+ +
+

Hinweis: Der Wert 4 ms wurde mit HTML5 festgelegt und wird von allen Browsern umgesetzt, die nach 2010 erschienen sind. Vor {{geckoRelease("5.0")}} war der Mindestwert 10 ms.

+
+ +

 

+ +

 

+ +

Wartezeiten in inaktiven Tabs  größer als 1s

+ +

Um die Last noch weiter zu verringern, beträgt die Mindestwartezeit in sich im Hintergrund befindlichen Tabs grundsätzlich mindestens 1 s.

+ +

Firefox setzt diese Beschränkung seit Version 5 um (siehe {{bug(633421)}}). Der Wert von 1000 ms kann in der Einstellungen dom.min_background_timeout_value geändert werden.
+ Chrome setzt diese Beschränkung seit Version 11 um (crbug.com/66078).

+ +

Bei Firefox für Android beträgt seit Version 14 die Mindestwartezeit in sich im Hintergrund befindlichen Tabs 15 Minuten (siehe {{bug(736602)}}). Jegliche Aktivität in diesen Tabs kann auch vollständig angehalten werden.

+ +
+

Seit Version 50 gelten in Firefox keine Beschränkungen mehr, falls sich die Web Audio API {{domxref("AudioContext")}} im Wiedergabemodus befindet. Seit Firefox 51 gilt dies bereits für jegliche Dokumente mit einem {{domxref("AudioContext")}}, unabhängig von dessen Status.
+ Apps, die Musik Note für Note abspielen, konnten wegen der Beschränkungen den Takt nicht halten, sobald sie in den Hintergrund gelegt wurden.

+
+ +

Lastbedingte Verzögerungen

+ +

Zusätzlich zum aktiven Drosseln kann es zu verlängerten Wartezeiten kommen, falls das Dokument, der Browser oder das Betriebssystem anderweitig beschäftigt sind. Ein wichtiger Punkt in diesem Zusammenhang ist, dass die aufzurufende Funktion nicht ausgeführt werden kann, solange der Thread, der setTimeout() aufgerufen hat, noch aktiv ist:

+ +
function bla() {
+  console.log('bla wurde aufgerufen');
+}
+setTimeout(bla, 0);
+console.log('hinter setTimeout');
+ +

Ergebnis:

+ +
hinter setTimeout
+bla wurde aufgerufen
+ +

Obwohl setTimeout die sofortige Ausführung angewiesen wurde, wird der Aufruf von bla() in einer Warteschlange bis zur nächsten Gelegenheit zurückgestellt. Erst wenn der aktuell laufende Code ausgeführt wurde, werden die in der Warteschlange gesammelten Aufrufe abgearbeitet. In der Folge ist der Programmablauf nicht, wie eventuell erwartet.

+ +

Browserkompatibilität

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + +
EigenschaftChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basis1.0{{ CompatGeckoDesktop("1") }}4.04.01.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
EigenschaftAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic1.01.0{{ CompatGeckoMobile("1") }}6.06.01.0
+
+ +

Spezifikation

+ +

Gehört zu DOM-Level 0, wie spezifiziert in HTML5.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/worker/index.html b/files/de/web/api/worker/index.html new file mode 100644 index 0000000000..258fc77862 --- /dev/null +++ b/files/de/web/api/worker/index.html @@ -0,0 +1,191 @@ +--- +title: Worker +slug: Web/API/Worker +translation_of: Web/API/Worker +--- +

{{APIRef("Web Workers API")}}

+ +

Das Worker Interface der Web Workers API beschreibt eine im Hintergrund ausgeführte Programmlogik, die leicht erstellt werden kann und Nachrichten mit dem Ersteller austauschen. Einen Worker erzeugen erfolgt einfach über den Aufruf des Worker() Konstruktors unter Angabe eines Scripts, welches in dem Worker Thread ausgeführt werden soll.

+ +

Worker selbst können zudem weitere (sog. "verschachtelte") Worker erzeugen, solange diese in demselben origin wie die übergeordnete Seite liegen (Achtung: verschachtelte Worker sind aktuell nicht in Blink implementiert).  Zusätzlich können Worker das XMLHttpRequest nutzen, um auf Netzwerk I/O zuzugreifen, unter der Voraussetzung, dass die Attribute responseXML und channel des XMLHttpRequest immer den Wert null zurück liefern.

+ +

Nicht alle Interfaces und Funktionen sind verfügbar für das mit dem Worker assoziierte Script.

+ +

Zur Verwendung eines Workers mit Zugriff auf js-ctypes in Browser-Erweiterungen (Extension) für den Firefox bitte das {{ domxref("ChromeWorker") }} Objekt nutzen.

+ +

Constructors

+ +
+
{{domxref("Worker.Worker", "Worker()")}}
+
Erzeugt einen neuen Web Worker, der das über seine URL referenzierte Script ausführt. Worker können auch über Blobs erzeugt werden.
+
+ +

Properties

+ +

Erbt die Eigenschaften seines parents, {{domxref("EventTarget")}}, und implementiert die Eigenschaften von {{domxref("AbstractWorker")}}.

+ +

Event handlers

+ +
+
{{domxref("AbstractWorker.onerror")}}
+
Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("ErrorEvent")}} des Typs error den Worker erreicht. Dies ist geerbt von {{domxref("AbstractWorker")}}.
+
{{domxref("Worker.onmessage")}}
+
Ein {{ domxref("EventListener") }}, welcher jedesmal dann aufgerufen wird, wenn ein {{domxref("MessageEvent")}} des Typs message den Worker erreicht — d.h. der Worker erhält eine Nachricht von seinem übergeordneten document via {{domxref("DedicatedWorkerGlobalScope.postMessage")}}. Diese Nachricht wird innerhalb des Events in der {{domxref("MessageEvent.data", "data")}} Eigenschaft gespeichert.
+
{{domxref("Worker.onmessageerror")}}
+
Der {{domxref("EventHandler")}}, dessen Code aufgerufen werden soll, wenn es zu einem {{event("messageerror")}} Event kommt.
+
+ +
+
+ +

Methods

+ +

Erbt die Methoden seines parents, {{domxref("EventTarget")}}, und implementiert die Methoden von {{domxref("AbstractWorker")}}.

+ +
+
{{domxref("Worker.postMessage()")}}
+
Sendet eine Nachricht an den Worker. Diese kann dabei aus einem beliebigen JavaScript Objekt bestehen.
+
{{domxref("Worker.terminate()")}}
+
Beendet den Worker unmittelbar. Hierüber besteht dabei nicht die Möglichkeit, dem Worker die Gelegenheit für ein geordnetes Beenden von laufenden Operationen zu geben. Vielmehr wird der Worker sofort beendet. ServiceWorker Instanzen unterstützen diese Methode nicht.
+
+ +

Example

+ +

Das nachfolgende Beispiel zeigt wie ein {{domxref("Worker")}} mittels des {{domxref("Worker.Worker", "Worker()")}} Konstruktors erzeugt und verwendet wird:

+ +
var myWorker = new Worker('worker.js');
+var first = document.querySelector('#number1');
+var second = document.querySelector('#number2');
+
+first.onchange = function() {
+  myWorker.postMessage([first.value,second.value]);
+  console.log('Message posted to worker');
+}
+ +

Ein vollständiges Beispiel findet sich hier: Basic dedicated worker example (run dedicated worker).

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "#worker", "Worker")}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +

Die Unterstützung der einzelnen Worker ist abhängig vom Typ und variiert. Wie ein Worker konkret unterstützt wird, kann der Seite zu dem Worker Typ entnommen werden.

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatVersionUnknown}}3.510.010.64
Constructor name option{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmessageerror60{{CompatUnknown}}{{CompatGeckoDesktop(57)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Basic support4.4{{CompatVersionUnknown}}3.510.011.55.1{{CompatUnknown}}
Constructor name option{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoMobile(55)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
onmessageerror60{{CompatUnknown}}{{CompatGeckoMobile(57)}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Cross-origin worker error behaviour

+ +

In früheren Browserversionen kam es zu einem SecurityError bei dem Versuch ein Script für einen cross-origin worker zu laden. In neueren Browsern wird, aufgrund einer Änderung der Spezifikation, stattdessen ein {{event("error")}} Event erzeugt. Mehr über den Umgang mit solchen Fehlern ist hier zu finden: Loading cross-origin worker now fires error event instead of throwing; worker in sandboxed iframe no longer allowed.

+ +

See also

+ + diff --git a/files/de/web/api/xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/index.html new file mode 100644 index 0000000000..913acfb17a --- /dev/null +++ b/files/de/web/api/xmlhttprequest/index.html @@ -0,0 +1,710 @@ +--- +title: XMLHttpRequest +slug: Web/API/XMLHttpRequest +translation_of: Web/API/XMLHttpRequest +--- +

{{APIRef("XMLHttpRequest")}}

+ +

XMLHttpRequest ist ein JavaScript Objekt, das von Microsoft entwickelt und von Mozilla, Apple, und Google übernommen wurde. Es wird derzeit im W3C standardisiert. Es bietet einen einfachen Weg, Daten von einem URL zu erhalten. Trotz seines Namens kann man mit XMLHttpRequest jede Art von Daten laden, nicht nur XML, und es unterstützt auch andere Protokolle als HTTP (inklusive file und ftp).

+ +

Eine Instanz von XMLHttpRequest erzeugt man ganz einfach so:

+ +
var myRequest = new XMLHttpRequest();
+
+ +

Für Näheres zur Verwendung von XMLHttpRequest, siehe Using XMLHttpRequest.

+ +

Übersicht: Methoden

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
XMLHttpRequest(JSObject objParameters);
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
+ void send(ArrayBuffer data);
+ void send(Blob data);
+ void send(Document data);
+ void send(DOMString? data);
+ void send(FormData data);
void setRequestHeader(DOMString header, DOMString value);
Nicht-Standard Methoden
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void sendAsBinary(in DOMString body);
+ +

Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTypBeschreibung
+

onreadystatechange

+ 		Function? +

Ein JavaScript function Objekt, das bei jedem Wechsel des readyState Attributs aufgerufen wird. Das Callback wird aus dem Thread der Benutzerschnittstelle aufgerufen.

+ +
Warnung: Dies sollte nicht mit synchronen Anfragen und darf nicht aus nativem Code heraus verwendet werden.
+
readyStateunsigned short +

Der Status der Anfrage:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertStatusBeschreibung
0UNSENTopen()wurde noch nicht aufgerufen.
1OPENEDsend()wurde noch nicht aufgerufen.
2HEADERS_RECEIVEDsend() wurde aufgerufen, und Headers sowie Status sind verfügbar.
3LOADINGDownload ist im Gange; responseText enthält bereits unvollständige Daten.
4DONEDer Vorgang ist abgeschlossen.
+
responsevariiert +

Der Entitätskörper der Antwort (response entity body) gemäss responseType, als ein ArrayBuffer, Blob, {{domxref("Document")}}, JavaScript Objekt (für "json"), oder string. Dies ist null falls die Anfrage nicht abgeschlossen ist oder erfolglos war.

+
responseText {{ReadOnlyInline}}DOMStringDie Antwort auf die Anfrage als Text, oder null falls die Anfrage nicht abgeschlossen ist oder erfolglos war.
responseTypeXMLHttpRequestResponseType +

Kann gesetzt werden, um den Datentyp der Antwort zu ändern.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertDatentyp der response Eigenschaft
"" (leerer String)String (Das ist der Default)
"arraybuffer"ArrayBuffer
"blob"{{domxref("Blob")}}
"document"{{domxref("Document")}}
"json"JavaScript Objekt, geparsed aus einem JSON String, der vom Server zurückgegeben wird.
"text"String
"moz-blob"Wird von Firefox verwendet, um den Bezug partieller {{domxref("Blob")}} Daten von progress Events zu erlauben. Dadurch kann ein progress Event Handler bereits mit der Verarbeitung von Daten beginnen, während ihr Empfang noch läuft.
"moz-chunked-text" +

Ähnlich wie "text", aber streamt die Daten. Das bedeutet, dass der Wert in response nur während des "progress" Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten "progress" Event eingetroffen sind.

+ +

Wenn auf response während eines "progress" Events zugegriffen wird, enthält es einen String mit den Daten. Andernfalls gibt es null zurück.

+ +

Dieser Modus funktioniert derzeit nur in Firefox.

+
"moz-chunked-arraybuffer" +

Ähnlich wie "arraybuffer", aber streamt die Daten. Das bedeutet, dass der Wert in response nur während des "progress" Event verfügbar ist und jeweils nur die Daten enthält, die seit dem letzten "progress" Event eingetroffen sind.

+ +

Wenn auf response während eines "progress" Events zugegriffen wird, enthält es einen ArrayBuffer mit den Daten. Andernfalls gibt es null zurück.

+ +

Dieser Modus funktioniert derzeit nur in Firefox.

+
+ +
Anmerkung: Ab Gecko 11.0  sowie WebKit build 528 kann man in diesen Browsern das responseType Attribut nicht mehr für synchrone Anfragen benutzen. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.
+
responseXML {{ReadOnlyInline}}Document? +

Die Antwort auf die Anfrage als DOM Document Objekt, oder null falls die Anfrage erfolglos war, noch nicht gesendet wurde, oder nicht als XML oder HTML geparst werden kann. Die Antwort wird geparst, als wäre sie ein text/xml Stream. Wenn der responseType auf "document" gesetzt wurde und die Anfrage asynchron gemacht wurde, wird die Antwort geparst, als wäre sie ein text/html Stream.

+ +
Anmerkung: Falls der Server nicht den text/xml Inhaltstyp-Header auf die Antwort anwendet, kann man overrideMimeType() verwenden, um XMLHttpRequest zu zwingen, sie dennoch als XML zu parsen.
+
status {{ReadOnlyInline}}unsigned shortDer Status der Antwort auf die Anfrage. Das ist der HTTP Ergebnis-Code (status ist z.B. 200 für eine erfolgreiche Anfrage).
statusText {{ReadOnlyInline}}DOMStringDer Antwort-String, der vom HTTP Server zurückgesendet wurde. Im Gegensatz zu status beinhaltet dies den ganzen Text der Antwortnachricht (z.B. "200 OK").
timeoutunsigned long +

Die Anzahl Millisekunden, die eine Anfrage dauern darf, bevor sie automatisch abgebrochen wird. Ein Wert von 0 (das ist die Voreinstellung) bedeutet, dass es kein timeout gibt.

+ +
Anmerkung: Für synchrone Anfragen mit einem besitzenden Fenster darf man kein timeout verwenden.
+
uploadXMLHttpRequestUploadDas Hochladen kann mitverfolgt werden, indem man einen Event Listener zu upload hinzufügt.
withCredentialsboolean +

Zeigt an, ob Site-übergreifende Access-Control Anfragen mit Credentials wie Cookies oder Autorisierungs-Headers durchgeführt werden sollen oder nicht. Die Voreinstellung ist false.

+ +
Anmerkung: Anfragen an die ursprüngliche Site sind davon niemals betroffen.
+ +
Anmerkung: Ab Gecko 11.0 kann man das withCredentials Attribut nicht mehr für synchrone Anfragen verwenden. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus.
+
+ +

Nicht-Standard Eigenschaften

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
AttributTypDescription
channel {{ReadOnlyInline}}{{Interface("nsIChannel")}}Der Kanal, der vom Objekt zur Durchführung der Anfrage verwendet wurde. Das ist null falls der Kanal noch nicht erzeugt worden ist. Im Falle von mehrteiligen Anfragen ist das der anfängliche Kanal, nicht derjenige der anderen Teile der mehrteiligen Anfrage.
+ Zugriff nur mit erhöhten Rechten.
mozAnon {{ReadOnlyInline}}boolean +

Falls true wird die Anfrage ohne Cookie und Authentisierungs-Headers gesendet.

+
mozSystem {{ReadOnlyInline}}boolean +

Falls true wird die Regel, die nur Anfragen zum gleichen Ursprung erlaubt, für diese Anfrage nicht durchgesetzt.

+
mozBackgroundRequestboolean +

Zeigt an, ob das Objekt eine Service-Anfrage im Hintergrund darstellt. Falls true wird keine Lastgruppe mit der Anfrage verknüpft, und die Anzeige von Sicherheits-Dialogen wird verhindert. Zugriff nur mit erhöhten Rechten.

+ +

In Fällen, wo normalerweise ein Sicherheits-Dialog angezeigt würde (wie Autorisierungs- oder Zertifikatsfehler-Benachrichtigungen), schlägt die Anfrage stattdessen einfach fehl.

+ +
Anmerkung: Diese Eigenschaft muss vor dem Aufrufen von open() gesetzt werden..
+
mozResponseArrayBuffer  {{obsolete_inline("6")}} {{ReadOnlyInline}}ArrayBufferDie Antwort auf die Anfrage, als typisiertes JavaScript Array. Dies ist NULL falls die Anfrage erfolglos war oder noch nicht gesendet wurde.
multipart {{obsolete_inline("22")}}boolean +

Dieses nur in Gecko verfügbare Feature wurde in Firefox/Gecko 22 entfernt. Bitte verwende stattdessen Server-Sent Events, Web Sockets oder responseText aus progress Events.

+ +

Zeigt an, ob als Antwort ein Stream von möglicherweise mehreren XML Dokumenten erwartet wird. Wird dies auf true gesetzt, muss der Inhaltstyp des ersten Teils der Antwort multipart/x-mixed-replace sein, sonst tritt ein Fehler auf. Alle Anfragen müssen asynchron sein.

+ +

Dies ermöglicht die Unterstützung von Server Push; für jedes XML Dokument, das in die Antwort auf diese Anfrage geschrieben wird, wird ein neues XML DOM Dokument erzeugt, und zwischen den Dokumenten wird der onload Handler aufgerufen.

+ +
Anmerkung: Wenn dies gesetzt ist, werden onload und andere Event Handler nicht zurückgesetzt, nachdem das erste XML Dokument geladen ist, und der onload Handler wird nach Erhalt jedes Teils der Antwort aufgerufen.
+
+ +

Konstruktor

+ +

XMLHttpRequest()

+ +

Der Konstruktor initiiert ein XMLHttpRequest Objekt. Er muss vor allen anderen Methoden aufgerufen werden.

+ +

Gecko/Firefox 16 fügt einen nicht-standard Parameter zum Konstruktor hinzu, der den anonymen Modus einschalten kann (siehe Bug 692677). Das mozAnon flag auf true zu setzen, hat einen ähnlichen Effekt wie der AnonXMLHttpRequest() Konstruktor, der in der XMLHttpRequest Spezifikation beschrieben ist, aber noch in keinem Browser implementiert wurde (Stand September 2012).

+ +
XMLHttpRequest (
+  JSObject objParameters
+);
+ +
Parameter (nicht-standard)
+ +
+
objParameters
+
Es gibt zwei Flags, die gesetzt werden können: +
+
mozAnon
+
Boolean: Wenn dieses Flag auf true gesetzt ist, wird der Browser weder den Ursprung der Anfrage noch Anmeldedaten übermitteln, wenn er Daten anfordert. Das heisst vor allem auch, dass keine Cookies gesendet werden, sofern sie nicht ausdrücklich mit setRequestHeader hinzugefügt wurden.
+
mozSystem
+
Boolean: Dieses Flag auf true zu setzen, ermöglicht das Herstellen von Cross-Site Verbindungen, ohne dass der Server dem mittels CORS zustimmen muss. Erfodert das Setzen von mozAnon: true. D.h. das kann nicht mit dem Senden von Cookies oder anderen Anmeldeinformationen kombiniert werden. Dies funktioniert nur in privilegierten (reviewed) Apps; es klappt nicht auf beliebigen Webseiten, die in Firefox geladen werden.
+
+
+
+ +

Methoden

+ +

abort()

+ +

Bricht die Anfrage ab, falls sie bereits gesendet wurde.

+ +

getAllResponseHeaders()

+ +
DOMString getAllResponseHeaders();
+ +

Liefert alle Antwort-Header als String, oder null falls keine Antwort empfangen wurde.

+ +

Anmerkung: Für mehrteilige Anfragen gibt dies die Header des aktuellen Teils der Anfrage zurück, nicht die des ursprünglichen Kanals.

+ +

getResponseHeader()

+ +
DOMString? getResponseHeader(DOMString header);
+ +

Liefert den String mit dem Text des angegebenen Headers, oder null falls die Antwort noch nicht empfangen wurde oder der Header in der Antwort nicht existiert.

+ +

open()

+ +

Initialisiert eine Anfrage. Diese Methode ist nur zur Verwendung in JavaScript Code; um eine Anfrage aus nativem Code zu initialisieren, ist stattdessen openRequest() zu benutzen.

+ +
Anmerkung: Der Aufruf dieser Methode für eine bereits aktive Anfrage (eine, für die open()oder openRequest() schon ausgeführt wurde) ist gleichwertig mit  dem Aufruf von abort().
+ +
void open(
+   DOMString method,
+   DOMString url,
+   optional boolean async,
+   optional DOMString user,
+   optional DOMString password
+);
+
+ +
Parameter
+ +
+
method
+
Die zu benutzende HTTP Methode,  wie "GET", "POST", "PUT", "DELETE", etc. Wird für nicht-HTTP(S) URLs ignoriert.
+
url
+
Der URL, an den die Anfrage geschickt werden soll.
+
async
+
Ein optionaler boole'scher Parameter mit Defaultwert true, der angibt, ob die Operation asynchron ausgeführt werden soll. Wenn dieser Wert false ist, kehrt die send()Methode nicht zurück, bis die Antwort vollständig empfangen worden ist. Ist er true, kehrt sie sofort zurück, und die Benachrichtigung über die vollendete Transaktion erfolgt mittels Events. Dies muss true sein falls das multipart Attribut true ist, sonst wird ein Fehler ausgelöst.
+
user
+
Der optionale Benutzername zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.
+
password
+
Das optionale Passwort zum Zweck der Authentisierung; ohne Angabe ist dies ein leerer String.
+
+ +

overrideMimeType()

+ +

Übergeht den vom Server zurückgegebenen MIME Typ. Dies kann beispielsweise benutzt werden, um zu erzwingen, dass ein Stream als text/xml behandelt und geparst wird, selbst wenn ihn der Server nicht als das meldet. Diese Methode muss vor send() aufgerufen werden.

+ +
void overrideMimeType(DOMString mimetype);
+ +

send()

+ +

Sendet die Anfrage. Falls die Anfage asynchron ist (was der Default ist), kehrt diese Methode zurück, sobald die Anfrage gesendet ist. Ist die Anfrage synchron, kehrt diese Methode nicht zurück, bis die Antwort angekommen (oder ein Timeout aufgetreten) ist.

+ +
Anmerkung: Jegliche zu setzende Event Handler / Listener müssen vor dem Aufruf von send() gesetzt werden.
+ +
void send();
+void send(ArrayBuffer data);
+void send(Blob data);
+void send(Document data);
+void send(DOMString? data);
+void send(FormData data);
+ +
Anmerkungen
+ +

Falls data ein Document ist, so wird dieses vor dem Senden serialisiert. Beim Senden eines Document senden Firefox Versionen vor Version 3 die Anfrage immer encodiert als UTF-8; Firefox 3 sendet das Document richtigerweise mit dem angegebenen body.xmlEncoding, oder UTF-8 falls keines angegeben wurde.

+ +

Falls es ein nsIInputStream ist, muss er kompatibel sein mit der setUploadStream()Methode des nsIUploadChannel. In diesem Fall wird die Länge des Inhalts in einem Content-Length Header zur Anfrage hinzugefügt, dessen Wert mit der available()Methode des nsIInputStream ermittelt wird. Jegliche Header, die am Anfang des Streams enthalten sind, werden als Teil des Nachrichtenkörpers behandelt. Der MIME Typ des Streams sollte vor dem Aufruf von send() angegeben werden, indem der Content-Type Header mit der  setRequestHeader() Methode gesetzt wird.

+ +

Der beste Weg, um binäre Inhalte zu senden (wie beim Hochladen einer Datei), ist die Verwendung von ArrayBuffern oder Blobs in Verbindung mit der send() Methode. Wenn jedoch stringifizierbare Rohdaten gesendet werden sollen, ist die sendAsBinary() Methode zu verwenden.

+ +

setRequestHeader()

+ +

Setzt den Wert eines HTTP Anfrage-Headers. Aufrufe von setRequestHeader() müssen nach open(), aber vor send() erfolgen.

+ +
void setRequestHeader(
+   DOMString header,
+   DOMString value
+);
+
+ +
Parameter
+ +
+
header
+
Der Name des zu setzenden Headers.
+
value
+
Der Wert des zu setzenden Headers.
+
+ +

Nicht-Standard Methoden

+ +

init()

+ +

Initialisiert das Objekt für die Verwendung aus C++ Code.

+ +
Warnung: Diese Methode darf nicht aus JavaScript heraus aufgerufen werden.
+ +
[noscript] void init(
+   in nsIPrincipal principal,
+   in nsIScriptContext scriptContext,
+   in nsPIDOMWindow ownerWindow
+);
+
+ +
Parameter
+ +
+
principal
+
Das Prinzipal, das für die Anfrage benutzt werden soll; darf nicht null sein.
+
scriptContext
+
Der Skript-Kontext, der für die Anfrage benutzt werden soll; darf nicht null sein.
+
ownerWindow
+
Das Fenster, das zu der Anfrage gehört; darf null sein.
+
+ +

openRequest()

+ +

Initialisiert eine Anfrage. Diese Methode ist zur Verwendung in nativem Code; um eine Anfrage in JavaScript Code zu initialisieren, ist stattdessen open() zu verwenden. Siehe Dokumentation für open().

+ +

sendAsBinary()

+ +

Eine Variante der send() Methode, die binäre Daten schickt.

+ +
void sendAsBinary(
+   in DOMString body
+);
+
+ +

Diese Methode, zusammen mit der readAsBinaryString Methode der FileReader API, ermöglichen das Lesen und den Upload jeglicher Dateitypen und das Stringifizieren der Rohdaten.

+ +
Parameter
+ +
+
body
+
Der Körper der Anfrage als DOMstring. Diese Daten werden durch Beschneiden (Entfernen des höherwertigen Bytes jedes Zeichens) in Einzel-Byte-Zeichen umgewandelt.
+
+ +
sendAsBinary() polyfill
+ +

Da sendAsBinary() ein experimentelles Feature ist, kommt hier ein Polyfill für Browser, die sendAsBinary() nicht unterstützen, dafür aber typisierte Arrays.

+ +
/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+|*|
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function (sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* sende als ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...oder als ArrayBuffer (altmodisch)...: this.send(ui8Data.buffer); */
+  };
+}
+ +
Anmerkung: Dieses Polyfill kann mit zwei Datentypen als Argument für send() gebaut werden: einem ArrayBuffer (ui8Data.buffer – kommentierter Code) oder einer ArrayBufferView (ui8Data, das ist ein typisiertes Array von 8-bit Ganzzahlen ohne Vorzeichen – unkommentierter Code). Wenn man jedoch in Google Chrome versucht, einen ArrayBuffer zu senden, erscheint die folgende Warnmeldung: ArrayBuffer is deprecated in XMLHttpRequest.send(). Use ArrayBufferView instead.
+ +

Anmerkungen

+ + + +

Events

+ +

onreadystatechange als eine Eigenschaft der XMLHttpRequest Instanz wird von allen Browsern unterstützt.

+ +

Seither wurden einige zusätzliche Event Handler in verschiedenen Browsern implementiert (onload, onerror, onprogress, etc.). Diese werden in Firefox unterstützt. Für Genaueres, siehe {{interface("nsIXMLHttpRequestEventTarget")}} und Using XMLHttpRequest.

+ +

Neuere Browser, inklusive Firefox, unterstützen das 'Horchen' nach XMLHttpRequest Ereignissen mittels der Standard addEventListener APIs zusätzlich zum Setzen von on* Eigenschaften auf eine Handler Funktion.

+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundsätzliche Unterstützung (XHR1)11.05 (via ActiveXObject)
+ 7 (XMLHttpRequest)		{{CompatVersionUnknown}}1.2
send(ArrayBuffer)99{{compatUnknown}}11.60{{compatUnknown}}
send(Blob)73.6{{compatUnknown}}12{{compatUnknown}}
send(FormData)64{{compatUnknown}}12{{compatUnknown}}
sendAsBinary(DOMString){{compatNo}} – benutze polyfill1.9{{compatUnknown}}{{compatUnknown}}{{compatUnknown}}
response1061011.60{{compatUnknown}}
responseType = 'arraybuffer'1061011.60{{compatUnknown}}
responseType = 'blob'1961012{{compatUnknown}}
responseType = 'document'181110{{CompatNo}}{{CompatNo}}
responseType = 'json'{{CompatNo}}10{{CompatNo}}12{{CompatNo}}
Progress Events73.51012{{compatUnknown}}
withCredentials33.510124
timeout{{CompatNo}}12.08{{compatUnknown}}{{CompatNo}}
responseType = 'moz-blob'{{CompatNo}}12.0{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome für AndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundsätzliche Unterstützung{{CompatUnknown}}0.16{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Gecko Anmerkungen

+ +

Gecko 11.0 {{geckoRelease("11.0")}} entfernte die Unterstützung für die Verwendung der responseType und withCredentials Attribute bei der Durchführung synchroner Anfragen. Der Versuch löst einen NS_ERROR_DOM_INVALID_ACCESS_ERR Fehler aus. Diese Änderung wurde dem W3C zur Standardisierung vorgeschlagen.

+ +

Gecko 12.0 {{geckoRelease("12.0")}} und spätere unterstützen die Verwendung von XMLHttpRequest zum Lesen von data: URLs.

+ +

Siehe auch

+ + diff --git a/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html new file mode 100644 index 0000000000..f15901a388 --- /dev/null +++ b/files/de/web/api/xmlhttprequest/using_xmlhttprequest/index.html @@ -0,0 +1,789 @@ +--- +title: Using XMLHttpRequest +slug: Web/API/XMLHttpRequest/Using_XMLHttpRequest +translation_of: Web/API/XMLHttpRequest/Using_XMLHttpRequest +--- +
{{APIRef ("XMLHttpRequest")}}
+ +

In diesem Handbuch wird erläutert, wie Sie mit {{domxref ("XMLHttpRequest")}} HTTP- Anforderungen ausgeben , um Daten zwischen der Website und einem Server auszutauschen . Beispiele für häufig vorkommende und unklarere Anwendungsfälle XMLHttpRequestsind enthalten.

+ +

Um eine HTTP-Anfrage zu senden, erstellen Sie ein XMLHttpRequestObjekt, öffnen Sie eine URL und senden Sie die Anfrage. Nach Abschluss der Transaktion enthält das Objekt nützliche Informationen wie den Antworttext und den HTTP-Status des Ergebnisses.

+ +
function reqListener () {
+  console.log(this.responseText);
+}
+
+var oReq = new XMLHttpRequest();
+oReq.addEventListener("load", reqListener);
+oReq.open("GET", "http://www.example.org/example.txt");
+oReq.send();
+ +

Arten von Anfragen

+ +
+

Eine Anforderung über XMLHttpRequestkann die Daten auf zwei Arten asynchron oder synchron abrufen. Die Art der Anforderung wird durch das optionale asyncArgument (das dritte Argument) bestimmt, das für die Methode {{domxref ("XMLHttpRequest.open ()")}} festgelegt wird. Wenn dieses Argument angegeben ist trueoder nicht, XMLHttpRequestwird das asynchron verarbeitet, andernfalls wird der Prozess synchron behandelt. Eine ausführliche Diskussion und Demonstration dieser beiden Arten von Anforderungen finden Sie auf der Seite für synchrone und asynchrone Anforderungen . Verwenden Sie keine synchronen Anforderungen außerhalb von Web Workers.

+
+ +
Hinweis: Ab Gecko 30.0 {{geckoRelease ("30.0")}} sind synchrone Anforderungen im Hauptthread aufgrund der negativen Auswirkungen auf die Benutzererfahrung veraltet.
+ +
Hinweis: Die Konstruktorfunktion XMLHttpRequestist nicht nur auf XML-Dokumente beschränkt. Es beginnt mit "XML", da das Hauptformat, das ursprünglich für den asynchronen Datenaustausch verwendet wurde, bei der Erstellung XML war
+ +

Umgang mit Antworten

+ +

Es gibt verschiedene Arten von Antwortattributen, die durch die Living Standard-Spezifikation für den Konstruktor {{domxref ("XMLHttpRequest.XMLHttpRequest", "XMLHttpRequest ()")}} definiert sind. Diese teilen dem Kunden die XMLHttpRequestwichtigen Informationen über den Status der Antwort mit. In den folgenden Abschnitten werden einige Fälle beschrieben, in denen der Umgang mit Nicht-Text-Antworttypen möglicherweise manipuliert und analysiert wird.

+ +

Analysieren und Bearbeiten der responseXML-Eigenschaft

+ +

If you use XMLHttpRequest to get the content of a remote XML document, the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property will be a DOM object containing a parsed XML document. This could prove difficult to manipulate and analyze. There are four primary ways of analyzing this XML document:

+ +
    +
  1. Using XPath to address (or point to) parts of it.
    2. +
  2. Manually Parsing and serializing XML to strings or objects.
    3. +
  3. Using {{domxref("XMLSerializer")}} to serialize DOM trees to strings or to files.
    4. +
  4. {{jsxref("RegExp")}} can be used if you always know the content of the XML document beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to line breaks. However, this method is a "last resort" since if the XML code changes slightly, the method will likely fail.
    5. +
+ +
+

Note: XMLHttpRequest can now interpret HTML for you using the {{domxref("XMLHttpRequest.responseXML", "responseXML")}} property. Read the article about HTML in XMLHttpRequest to learn how to do this.

+
+ +

Processing a responseText property containing an HTML document

+ +

If you use XMLHttpRequest to get the content of a remote HTML webpage, the {{domxref("XMLHttpRequest.responseText", "responseText")}} property is a string containing the raw HTML. This could prove difficult to manipulate and analyze. There are three primary ways to analyze and parse this raw HTML string:

+ +
    +
  1. Use the XMLHttpRequest.responseXML property as covered in the article HTML in XMLHttpRequest.
    2. +
  2. Inject the content into the body of a document fragment via fragment.body.innerHTML and traverse the DOM of the fragment.
    3. +
  3. {{jsxref("RegExp")}} can be used if you always know the content of the HTML responseText beforehand. You might want to remove line breaks, if you use RegExp to scan with regard to linebreaks. However, this method is a "last resort" since if the HTML code changes slightly, the method will likely fail.
    4. +
+ +

Handling binary data

+ +

Although {{domxref("XMLHttpRequest")}} is most commonly used to send and receive textual data, it can be used to send and receive binary content. There are several well tested methods for coercing the response of an XMLHttpRequest into sending binary data. These involve utilizing the {{domxref("XMLHttpRequest.overrideMimeType", "overrideMimeType()")}} method on the XMLHttpRequest object and is a workable solution.

+ +
var oReq = new XMLHttpRequest();
+oReq.open("GET", url);
+// retrieve data unprocessed as a binary string
+oReq.overrideMimeType("text/plain; charset=x-user-defined");
+/* ... */
+
+ +

However, more modern techniques are available, since the {{domxref("XMLHttpRequest.responseType", "responseType")}} attribute now supports a number of additional content types, which makes sending and receiving binary data much easier.

+ +

For example, consider this snippet, which uses the responseType of "arraybuffer" to fetch the remote content into a {{jsxref("ArrayBuffer")}} object, which stores the raw binary data.

+ +
var oReq = new XMLHttpRequest();
+
+oReq.onload = function(e) {
+  var arraybuffer = oReq.response; // not responseText
+  /* ... */
+}
+oReq.open("GET", url);
+oReq.responseType = "arraybuffer";
+oReq.send();
+ +

For more examples check out the Sending and Receiving Binary Data page

+ +

Monitoring progress

+ +

XMLHttpRequest provides the ability to listen to various events that can occur while the request is being processed. This includes periodic progress notifications, error notifications, and so forth.

+ +

Support for DOM {{event("progress")}} event monitoring of XMLHttpRequest transfers follows the specification for progress events: these events implement the {{domxref("ProgressEvent")}} interface. The actual events you can monitor to determine the state of an ongoing transfer are:

+ +
+
{{event("progress")}}
+
The amount of data that has been retrieved has changed.
+
{{event("load")}}
+
The transfer is complete; all data is now in the response
+
+ +
var oReq = new XMLHttpRequest();
+
+oReq.addEventListener("progress", updateProgress);
+oReq.addEventListener("load", transferComplete);
+oReq.addEventListener("error", transferFailed);
+oReq.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+// ...
+
+// progress on transfers from the server to the client (downloads)
+function updateProgress (oEvent) {
+  if (oEvent.lengthComputable) {
+    var percentComplete = oEvent.loaded / oEvent.total * 100;
+    // ...
+  } else {
+    // Unable to compute progress information since the total size is unknown
+  }
+}
+
+function transferComplete(evt) {
+  console.log("The transfer is complete.");
+}
+
+function transferFailed(evt) {
+  console.log("An error occurred while transferring the file.");
+}
+
+function transferCanceled(evt) {
+  console.log("The transfer has been canceled by the user.");
+}
+ +

Lines 3-6 add event listeners for the various events that are sent while performing a data transfer using XMLHttpRequest.

+ +
Note: You need to add the event listeners before calling open() on the request. Otherwise the progress events will not fire.
+ +

The progress event handler, specified by the updateProgress() function in this example, receives the total number of bytes to transfer as well as the number of bytes transferred so far in the event's total and loaded fields. However, if the lengthComputable field is false, the total length is not known and will be zero.

+ +

Progress events exist for both download and upload transfers. The download events are fired on the XMLHttpRequest object itself, as shown in the above sample. The upload events are fired on the XMLHttpRequest.upload object, as shown below:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.upload.addEventListener("progress", updateProgress);
+oReq.upload.addEventListener("load", transferComplete);
+oReq.upload.addEventListener("error", transferFailed);
+oReq.upload.addEventListener("abort", transferCanceled);
+
+oReq.open();
+
+ +
Note: Progress events are not available for the file: protocol.
+ +
+

Note: Starting in {{Gecko("9.0")}}, progress events can now be relied upon to come in for every chunk of data received, including the last chunk in cases in which the last packet is received and the connection closed before the progress event is fired. In this case, the progress event is automatically fired when the load event occurs for that packet. This lets you now reliably monitor progress by only watching the "progress" event.

+
+ +
+

Note: As of {{Gecko("12.0")}}, if your progress event is called with a responseType of "moz-blob", the value of response is a {{domxref("Blob")}} containing the data received so far.

+
+ +

One can also detect all three load-ending conditions (abort, load, or error) using the loadend event:

+ +
req.addEventListener("loadend", loadEnd);
+
+function loadEnd(e) {
+  console.log("The transfer finished (although we don't know if it succeeded or not).");
+}
+
+ +

Note there is no way to be certain, from the information received by the loadend event, as to which condition caused the operation to terminate; however, you can use this to handle tasks that need to be performed in all end-of-transfer scenarios.

+ +

Submitting forms and uploading files

+ +

Instances of XMLHttpRequest can be used to submit forms in two ways:

+ + + +

Using the FormData API is the simplest and fastest, but has the disadvantage that data collected can not be stringified.
+ Using only AJAX is more complex, but typically more flexible and powerful.

+ +

Using nothing but XMLHttpRequest

+ +

Submitting forms without the FormData API does not require other APIs for most use cases. The only case where you need an additional API is if you want to upload one or more files, where you use the {{domxref("FileReader")}} API.

+ +

A brief introduction to the submit methods

+ +

An html {{ HTMLElement("form") }} can be sent in four ways:

+ + + +

Now, consider the submission of a form containing only two fields, named foo and baz. If you are using the POST method the server will receive a string similar to one of the following three examples, depending on the encoding type you are using:

+ + + +

However, if you are using the GET method, a string like the following will be simply added to the URL:

+ +
?foo=bar&baz=The%20first%20line.%0AThe%20second%20line.
+ +

A little vanilla framework

+ +

All these effects are done automatically by the web browser whenever you submit a {{HTMLElement("form")}}. If you want to perform the same effects using JavaScript you have to instruct the interpreter about everything. Therefore, how to send forms in pure AJAX is too complex to be explained here in detail. For this reason, here we place a complete (yet didactic) framework, able to use all four ways to submit, and to upload files:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Sending forms with pure AJAX &ndash; MDN</title>
+<script type="text/javascript">
+
+"use strict";
+
+/*\
+|*|
+|*|  :: XMLHttpRequest.prototype.sendAsBinary() Polyfill ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest#sendAsBinary()
+\*/
+
+if (!XMLHttpRequest.prototype.sendAsBinary) {
+  XMLHttpRequest.prototype.sendAsBinary = function(sData) {
+    var nBytes = sData.length, ui8Data = new Uint8Array(nBytes);
+    for (var nIdx = 0; nIdx < nBytes; nIdx++) {
+      ui8Data[nIdx] = sData.charCodeAt(nIdx) & 0xff;
+    }
+    /* send as ArrayBufferView...: */
+    this.send(ui8Data);
+    /* ...or as ArrayBuffer (legacy)...: this.send(ui8Data.buffer); */
+  };
+}
+
+/*\
+|*|
+|*|  :: AJAX Form Submit Framework ::
+|*|
+|*|  https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest
+|*|
+|*|  This framework is released under the GNU Public License, version 3 or later.
+|*|  https://www.gnu.org/licenses/gpl-3.0-standalone.html
+|*|
+|*|  Syntax:
+|*|
+|*|   AJAXSubmit(HTMLFormElement);
+\*/
+
+var AJAXSubmit = (function () {
+
+  function ajaxSuccess () {
+    /* console.log("AJAXSubmit - Success!"); */
+    console.log(this.responseText);
+    /* you can get the serialized data through the "submittedData" custom property: */
+    /* console.log(JSON.stringify(this.submittedData)); */
+  }
+
+  function submitData (oData) {
+    /* the AJAX request... */
+    var oAjaxReq = new XMLHttpRequest();
+    oAjaxReq.submittedData = oData;
+    oAjaxReq.onload = ajaxSuccess;
+    if (oData.technique === 0) {
+      /* method is GET */
+      oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/,
+          oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
+      oAjaxReq.send(null);
+    } else {
+      /* method is POST */
+      oAjaxReq.open("post", oData.receiver, true);
+      if (oData.technique === 3) {
+        /* enctype is multipart/form-data */
+        var sBoundary = "---------------------------" + Date.now().toString(16);
+        oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
+        oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" +
+            oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
+      } else {
+        /* enctype is application/x-www-form-urlencoded or text/plain */
+        oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
+        oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
+      }
+    }
+  }
+
+  function processStatus (oData) {
+    if (oData.status > 0) { return; }
+    /* the form is now totally serialized! do something before sending it to the server... */
+    /* doSomething(oData); */
+    /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
+    submitData (oData);
+  }
+
+  function pushSegment (oFREvt) {
+    this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
+    this.owner.status--;
+    processStatus(this.owner);
+  }
+
+  function plainEscape (sText) {
+    /* How should I treat a text/plain form encoding?
+       What characters are not allowed? this is what I suppose...: */
+    /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
+    return sText.replace(/[\s\=\\]/g, "\\$&");
+  }
+
+  function SubmitRequest (oTarget) {
+    var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
+    /* console.log("AJAXSubmit - Serializing form..."); */
+    this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
+    this.technique = bIsPost ?
+        this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
+    this.receiver = oTarget.action;
+    this.status = 0;
+    this.segments = [];
+    var fFilter = this.technique === 2 ? plainEscape : escape;
+    for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
+      oField = oTarget.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE" && oField.files.length > 0) {
+        if (this.technique === 3) {
+          /* enctype is multipart/form-data */
+          for (nFile = 0; nFile < oField.files.length; nFile++) {
+            oFile = oField.files[nFile];
+            oSegmReq = new FileReader();
+            /* (custom properties:) */
+            oSegmReq.segmentIdx = this.segments.length;
+            oSegmReq.owner = this;
+            /* (end of custom properties) */
+            oSegmReq.onload = pushSegment;
+            this.segments.push("Content-Disposition: form-data; name=\"" +
+                oField.name + "\"; filename=\"" + oFile.name +
+                "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
+            this.status++;
+            oSegmReq.readAsBinaryString(oFile);
+          }
+        } else {
+          /* enctype is application/x-www-form-urlencoded or text/plain or
+             method is GET: files will not be sent! */
+          for (nFile = 0; nFile < oField.files.length;
+              this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
+        }
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        /* NOTE: this will submit _all_ submit buttons. Detecting the correct one is non-trivial. */
+        /* field type is not FILE or is FILE but is empty */
+        this.segments.push(
+          this.technique === 3 ? /* enctype is multipart/form-data */
+            "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
+          : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
+            fFilter(oField.name) + "=" + fFilter(oField.value)
+        );
+      }
+    }
+    processStatus(this);
+  }
+
+  return function (oFormElement) {
+    if (!oFormElement.action) { return; }
+    new SubmitRequest(oFormElement);
+  };
+
+})();
+
+</script>
+</head>
+<body>
+
+<h1>Sending forms with pure AJAX</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<form action="register.php" method="post" enctype="text/plain"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      Your name: <input type="text" name="user" />
+    </p>
+    <p>
+      Your message:<br />
+      <textarea name="message" cols="40" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+</body>
+</html>
+
+ +

To test this, create a page named register.php (which is the action attribute of these sample forms), and put the following minimalistic content:

+ +
<?php
+/* register.php */
+
+header("Content-type: text/plain");
+
+/*
+NOTE: You should never use `print_r()` in production scripts, or
+otherwise output client-submitted data without sanitizing it first.
+Failing to sanitize can lead to cross-site scripting vulnerabilities.
+*/
+
+echo ":: data received via GET ::\n\n";
+print_r($_GET);
+
+echo "\n\n:: Data received via POST ::\n\n";
+print_r($_POST);
+
+echo "\n\n:: Data received as \"raw\" (text/plain encoding) ::\n\n";
+if (isset($HTTP_RAW_POST_DATA)) { echo $HTTP_RAW_POST_DATA; }
+
+echo "\n\n:: Files received ::\n\n";
+print_r($_FILES);
+
+
+ +

The syntax to activate this script is simply:

+ +
AJAXSubmit(myForm);
+ +
Note: This framework uses the {{domxref("FileReader")}} API to transmit file uploads. This is a recent API and is not implemented in IE9 or below. For this reason, the AJAX-only upload is considered an experimental technique. If you do not need to upload binary files, this framework works fine in most browsers.
+ +
Note: The best way to send binary content is via {{jsxref("ArrayBuffer", "ArrayBuffers")}} or {{domxref("Blob", "Blobs")}} in conjuncton with the {{domxref("XMLHttpRequest.send()", "send()")}} method and possibly the {{domxref("FileReader.readAsArrayBuffer()", "readAsArrayBuffer()")}} method of the FileReader API. But, since the aim of this script is to work with a stringifiable raw data, we used the {{domxref("XMLHttpRequest.sendAsBinary()", "sendAsBinary()")}} method in conjunction with the {{domxref("FileReader.readAsBinaryString()", "readAsBinaryString()")}} method of the FileReader API. As such, the above script makes sense only when you are dealing with small files. If you do not intend to upload binary content, consider instead using the FormData API.
+ +
Note: The non-standard sendAsBinary method is considered deprecated as of Gecko 31 {{geckoRelease(31)}} and will be removed soon. The standard send(Blob data) method can be used instead.
+ +

Using FormData objects

+ +

The {{domxref("XMLHttpRequest.FormData", "FormData")}} constructor lets you compile a set of key/value pairs to send using XMLHttpRequest. Its primary use is in sending form data, but can also be used independently from a form in order to transmit user keyed data. The transmitted data is in the same format the form's submit() method uses to send data, if the form's encoding type were set to "multipart/form-data". FormData objects can be utilized in a number of ways with an XMLHttpRequest. For examples, and explanations of how one can utilize FormData with XMLHttpRequests, see the Using FormData Objects page. For didactic purposes here is a translation of the previous example transformed to use the FormData API. Note the brevity of the code:

+ +
+
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" charset="UTF-8" />
+<title>Sending forms with FormData &ndash; MDN</title>
+<script>
+"use strict";
+
+function ajaxSuccess () {
+  console.log(this.responseText);
+}
+
+function AJAXSubmit (oFormElement) {
+  if (!oFormElement.action) { return; }
+  var oReq = new XMLHttpRequest();
+  oReq.onload = ajaxSuccess;
+  if (oFormElement.method.toLowerCase() === "post") {
+    oReq.open("post", oFormElement.action);
+    oReq.send(new FormData(oFormElement));
+  } else {
+    var oField, sFieldType, nFile, sSearch = "";
+    for (var nItem = 0; nItem < oFormElement.elements.length; nItem++) {
+      oField = oFormElement.elements[nItem];
+      if (!oField.hasAttribute("name")) { continue; }
+      sFieldType = oField.nodeName.toUpperCase() === "INPUT" ?
+          oField.getAttribute("type").toUpperCase() : "TEXT";
+      if (sFieldType === "FILE") {
+        for (nFile = 0; nFile < oField.files.length;
+            sSearch += "&" + escape(oField.name) + "=" + escape(oField.files[nFile++].name));
+      } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
+        sSearch += "&" + escape(oField.name) + "=" + escape(oField.value);
+      }
+    }
+    oReq.open("get", oFormElement.action.replace(/(?:\?.*)?$/, sSearch.replace(/^&/, "?")), true);
+    oReq.send(null);
+  }
+}
+</script>
+</head>
+<body>
+
+<h1>Sending forms with FormData</h1>
+
+<h2>Using the GET method</h2>
+
+<form action="register.php" method="get" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h2>Using the POST method</h2>
+<h3>Enctype: application/x-www-form-urlencoded (default)</h3>
+
+<form action="register.php" method="post" onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Registration example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" />
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+
+<h3>Enctype: text/plain</h3>
+
+<p>The text/plain encoding is not supported by the FormData API.</p>
+
+<h3>Enctype: multipart/form-data</h3>
+
+<form action="register.php" method="post" enctype="multipart/form-data"
+    onsubmit="AJAXSubmit(this); return false;">
+  <fieldset>
+    <legend>Upload example</legend>
+    <p>
+      First name: <input type="text" name="firstname" /><br />
+      Last name: <input type="text" name="lastname" /><br />
+      Sex:
+      <input id="sex_male" type="radio" name="sex" value="male" />
+      <label for="sex_male">Male</label>
+      <input id="sex_female" type="radio" name="sex" value="female" />
+      <label for="sex_female">Female</label><br />
+      Password: <input type="password" name="secret" /><br />
+      What do you prefer:
+      <select name="image_type">
+        <option>Books</option>
+        <option>Cinema</option>
+        <option>TV</option>
+      </select>
+    </p>
+    <p>
+      Post your photos:
+      <input type="file" multiple name="photos[]">
+    </p>
+    <p>
+      <input id="vehicle_bike" type="checkbox" name="vehicle[]" value="Bike" />
+      <label for="vehicle_bike">I have a bike</label><br />
+      <input id="vehicle_car" type="checkbox" name="vehicle[]" value="Car" />
+      <label for="vehicle_car">I have a car</label>
+    </p>
+    <p>
+      Describe yourself:<br />
+      <textarea name="description" cols="50" rows="8"></textarea>
+    </p>
+    <p>
+      <input type="submit" value="Submit" />
+    </p>
+  </fieldset>
+</form>
+</body>
+</html>
+
+ +
Note: As we said, {{domxref("FormData")}} objects are not stringifiable objects. If you want to stringify a submitted data, use the previous pure-AJAX example. Note also that, although in this example there are some file {{ HTMLElement("input") }} fields, when you submit a form through the FormData API you do not need to use the {{domxref("FileReader")}} API also: files are automatically loaded and uploaded.
+ +

Get last modified date

+ +
function getHeaderTime () {
+  console.log(this.getResponseHeader("Last-Modified"));  /* A valid GMTString date or null */
+}
+
+var oReq = new XMLHttpRequest();
+oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
+oReq.onload = getHeaderTime;
+oReq.send();
+ +

Do something when last modified date changes

+ +

Let's create two functions:

+ +
function getHeaderTime () {
+  var nLastVisit = parseFloat(window.localStorage.getItem('lm_' + this.filepath));
+  var nLastModif = Date.parse(this.getResponseHeader("Last-Modified"));
+
+  if (isNaN(nLastVisit) || nLastModif > nLastVisit) {
+    window.localStorage.setItem('lm_' + this.filepath, Date.now());
+    isFinite(nLastVisit) && this.callback(nLastModif, nLastVisit);
+  }
+}
+
+function ifHasChanged(sURL, fCallback) {
+  var oReq = new XMLHttpRequest();
+  oReq.open("HEAD" /* use HEAD - we only need the headers! */, sURL);
+  oReq.callback = fCallback;
+  oReq.filepath = sURL;
+  oReq.onload = getHeaderTime;
+  oReq.send();
+}
+ +

And to test:

+ +
/* Let's test the file "yourpage.html"... */
+
+ifHasChanged("yourpage.html", function (nModif, nVisit) {
+  console.log("The page '" + this.filepath + "' has been changed on " + (new Date(nModif)).toLocaleString() + "!");
+});
+ +

If you want to know if the current page has changed, please read the article about {{domxref("document.lastModified")}}.

+ +

Cross-site XMLHttpRequest

+ +

Modern browsers support cross-site requests by implementing the Cross-Origin Resource Sharing (CORS) standard. As long as the server is configured to allow requests from your web application's origin, XMLHttpRequest will work. Otherwise, an INVALID_ACCESS_ERR exception is thrown.

+ +

Bypassing the cache

+ +

A cross-browser compatible approach to bypassing the cache is appending a timestamp to the URL, being sure to include a "?" or "&" as appropriate. For example:

+ +
http://foo.com/bar.html -> http://foo.com/bar.html?12345
+http://foo.com/bar.html?foobar=baz -> http://foo.com/bar.html?foobar=baz&12345
+
+ +

As the local cache is indexed by URL, this causes every request to be unique, thereby bypassing the cache.

+ +

You can automatically adjust URLs using the following code:

+ +
var oReq = new XMLHttpRequest();
+
+oReq.open("GET", url + ((/\?/).test(url) ? "&" : "?") + (new Date()).getTime());
+oReq.send(null);
+ +

Security

+ +

{{fx_minversion_note(3, "Versions of Firefox prior to Firefox 3 allowed you to set the preference capability.policy.<policyname>.XMLHttpRequest.open</policyname> to allAccess to give specific sites cross-site access. This is no longer supported.")}}

+ +

{{fx_minversion_note(5, "Versions of Firefox prior to Firefox 5 could use netscape.security.PrivilegeManager.enablePrivilege(\"UniversalBrowserRead\"); to request cross-site access. This is no longer supported, even though it produces no warning and permission dialog is still presented.")}}

+ +

The recommended way to enable cross-site scripting is to use the Access-Control-Allow-Origin HTTP header in the response to the XMLHttpRequest.

+ +

XMLHttpRequests being stopped

+ +

If you conclude with an XMLHttpRequest receiving status=0 and statusText=null, this means the request was not allowed to be performed. It was UNSENT. A likely cause for this is when the XMLHttpRequest origin (at the creation of the XMLHttpRequest) has changed when the XMLHttpRequest is subsequently open(). This case can happen, for example, when one has an XMLHttpRequest that gets fired on an onunload event for a window, the expected XMLHttpRequest is created when the window to be closed is still there, and finally sending the request (in otherwords, open()) when this window has lost its focus and another window gains focus. The most effective way to avoid this problem is to set a listener on the new window's {{event("activate")}} event which is set once the terminated window has its {{event("unload")}} event triggered.

+ +

Workers

+ +

Setting overrideMimeType does not work from a {{domxref("Worker")}}. See {{bug(678057)}} for more details. Other browsers may handle this differently.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('XMLHttpRequest')}}{{Spec2('XMLHttpRequest')}}Live standard, latest version
+ +

Browser compatibility

+ + + +

{{Compat ("api.XMLHttpRequest")}}

+ +

Siehe auch

+ +
    +
  1. MDN AJAX Einführung
    2. +
  2. HTML in XMLHttpRequest
    3. +
  3. HTTP-Zugriffskontrolle
    4. +
  4. So überprüfen Sie den Sicherheitsstatus einer XMLHTTPRequest über SSL
    5. +
  5. XMLHttpRequest - REST und die Rich User Experience
    6. +
  6. Microsoft-Dokumentation
    7. +
  7. "Verwenden des XMLHttpRequest-Objekts" (jibbering.com)
    8. +
  8. Das XMLHttpRequestObjekt: WHATWG-Spezifikation
    9. +
diff --git a/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html new file mode 100644 index 0000000000..3aa0530a35 --- /dev/null +++ b/files/de/web/barrierefreiheit/an_overview_of_accessible_web_applications_and_widgets/index.html @@ -0,0 +1,232 @@ +--- +title: Übersicht zu barrierefreien Web-Applikationen und Komponenten +slug: Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets +tags: + - ARIA + - Accessibility + - Guide + - Handbuch + - Komponente + - Web apps +translation_of: Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +--- +

Das Web entwickelt sich weiter: Statische seitenbasierte Websites werden zunehmend durch dynamische, desktopartige Web-Applikationen ersetzt, die mit JavaScript und AJAX arbeiten. Designer erstellen allein durch die Kombination von JavaScript, HTML und CSS beeindruckende neue Benutzeroberflächen und Steuerungsmechanismen. Dieser Wandel hat das Potential, durch responsives Design die Benutzerfreundlichkeit enorm zu verbessern, doch besteht für viele Benutzer die Gefahr wegen Zugänglichkeitsbarrieren ausgeschlossen zu werden. JavaScript hat keinen sehr guten Ruf, was die Barrierefreiheit anbelangt, da JavaScript-Techniken oft Probleme in Kombination mit Unterstützungstechnologie wie z.B. Screenreadern verursachen. Es gibt jedoch andere Möglichkeiten, dynamische Oberflächen zu erstellen, damit diese auch für Menschen mit Behinderungen ohne Einschränkungen benutzbar sind.

+ +

Das Problem

+ +

Die meisten JavaScript-Toolkits stellen eine Bibliothek für clientseitige Komponenten bereit, welche den Benutzeroberflächen von bekannten Desktopumgebungen nachempfunden sind. Slider, Menüleisten, Dateisystem-Bäume usw. lassen sich mit einer Kombination von JavaScript, CSS und HTML erstellen. In der HTML4-Spezifikation werden keine Tags festgelegt, welche diese Komponenten semantisch beschreiben und Entwickler greifen daher üblicherweise auf Tags wie <div> und <span> zurück. Die so entwickelten Oberflächen sehen Desktop-Applikation sehr ähnlich, enthalten jedoch in der Regel nicht genügend semantische Informationen, um die korrekte Funktion unterstützender Technologie zu gewährleisten. So können dynamische Inhalte einer Webseite von Benutzern, die z.B. eine Website (aus welchen Gründen auch immer) nicht sehen können, nicht vollständlig erfasst werden. Börsenticker, Updates von Twitter-Feeds, Fortschrittsanzeigen und ähnliche Komponenten manipulieren das DOM auf eine Weise, die von Unterstützungstechnologie nicht erkannt werden kann. An dieser Stelle kommt ARIA zum Einsatz.

+ +

Beispiel 1: Markup für eine Tabs-Komponente mit ARIA-Labeln. Im Markup sind keine Informationen enthalten, welche die Form und Funktion der Komponente beschreiben.

+ +
<!-- Dies ist eine Komponente für Tabs. Wie könnten Sie das wissen, würden sie nur das Markup betrachten? -->
+<ol>
+  <li id="ch1Tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <div id="ch1Panel">Chapter 1 content goes here</div>
+  <div id="ch2Panel">Chapter 2 content goes here</div>
+  <div id="quizPanel">Quiz content goes here</div>
+</div>
+ +

Beispiel 2: Die Tabs-Komponente könnte z.B. wie folgt aussehen. Bei der visuellen Betrachtung lässt sich dies erkennen, es gibt jedoch keine maschinenlesbare Beschreibungen für Unterstützungstechnologie.
+ Screenshot of the tabs widget

+ +

ARIA

+ +

WAI-ARIA, die Spezifikation für Accessible Rich Internet Applications der Web Accessibility Initiative des W3C beschreibt, wie fehlende semantischen Informationen hinzugefügt werden können, die für das Erfassen der Inhalte bei der Benutzung von Unterstützungstechnologie, wie z.B. Screen Readern, benötigt werden. ARIA ermöglicht Entwicklern, ihre Komponenten genauer zu beschreiben, indem dem Markup spezielle Attribute hinzugefügt werden. ARIA wurde entwickelt, um die Lücke zwischen Standard-HTML-Tags und desktopartigen Komponenten von dynamischen Web-Applikationen zu schließen und legt Rollen- und Zustansbeschreibungen für verbreitete UI-Komponenten fest.

+ +

Die ARIA-Spezifikation beschreibt drei verschiedene Arten von Attributen: Rollen, Zustände und Eigenschaften. Rollen werden Komponenten zugewiesen, die bei HTML4 nicht vorhanden sind, wie z.B. Slider, Menüleisten, Tabs und Dialoge. Eigenschaften beschreiben Charakteristiken dieser Komponenten, wie z.B. ob sie per Drag & Drop ziehbar sind, ein benötigtes Element besitzen oder ein Popup mit ihnen verbunden ist. Zustände beschreiben den aktuellen Interaktionsstatus eines Elements - so wird der Unterstützungstechnologie mitgeteilt, ob das Element gerade beschäftigt, deaktiviert, selektiert oder versteckt ist.

+ +

ARIA-Attribute sind dafür geschaffen, automatisch vom Browser interpretiert und für die nativen Barrierefreiheit-APIs des jeweiligen Betriebssystems übersetzt zu werden. Wenn ARIA vorhanden ist, kann die Unterstützungstechnologie JavaScript-Komponenten erkennen und mit diesen interagieren, auf dieselbe Weise wie bei Desktop-Software. Hierdurch kann eine konsistentere Benutzerführung ermöglicht werden, als noch bei älteren Generationen von Web-Applkationen, da Benutzer von Unterstützungstechnologie auch bei webbasierten Applikationen auf ihre Kenntnisse über Desktop-Software zurückgreifen können.

+ +

Beispiel 3: Markup für die Tabs-Komponente mit hinzugefügten ARIA-Attributen.

+ +
<!-- Durch die zugeteilte Rolle sind die Tabs erkennbar! -->
+<!-- role-Attribute wurden der Liste und den einzelnen Elementen hinzugefügt. -->
+<ol role="tablist">
+  <li id="ch1Tab" role="tab">
+    <a href="#ch1Panel">Chapter 1</a>
+  </li>
+  <li id="ch2Tab" role="tab">
+    <a href="#ch2Panel">Chapter 2</a>
+  </li>
+  <li id="quizTab" role="tab">
+    <a href="#quizPanel">Quiz</a>
+  </li>
+</ol>
+
+<div>
+  <!-- Beachten Sie die Attribute 'role' und 'aria-labelledby', welche die Tab-Panels beschreiben. -->
+  <div id="ch1Panel" role=”tabpanel” aria-labelledby="ch1Tab">Chapter 1 content goes here</div>
+  <div id="ch2Panel" role=”tabpanel” aria-labelledby="ch2Tab">Chapter 2 content goes here</div>
+  <div id="quizPanel" role=”tabpanel” aria-labelledby="quizTab">Quiz content goes here</div>
+</div>
+
+ +

ARIA wird von allen aktuellen Versionen der bekannten Browser unterstützt, einschließlich Firefox, Safari, Opera, Chrome und Internet Explorer. Viele Unterstützungstechnologien, wie z.B. die Open-Source-Screenreader NVDA und Orca, unterstützen ARIA ebenfalls. Auch JavaScript-Biblitheken wie jQuery UI, YUI, Google Closure und Dojo Dijit setzen ARIA-Markup ein.

+ +

Darstellungänderungen

+ +

Dynamische Änderungen der Darstellung sind zum Beispiel die Veränderung der Elementeigenschaften mit CSS (wie z.B. ein roter Rand um ein Feld, das fehlerhafte Daten enthält oder eine Farbänderung bei einer aktivierten Checkbox) oder das Anzeigen und Verstecken von Inhalten.

+ +

Zustandsänderungen

+ +

ARIA stellt Attribute zur Deklaration des aktuellen Zustands von Komponenten bereit. Die Beispiele in dieser Einführung werden die folgenden Attribute verwendet (es gibt allerdings noch einige mehr):

+ + + +

(Eine komplette Liste aller Zustände finden Sie in der Liste zu ARIA-Zuständen und Eigenschaften)

+ +

Entwickler sollten ARIA-Zustände einsetzen, um den Zustand von Komponenten zu deklarieren und mit CSS-Attribut-Selektoren die visuelle Darstellung je nach Zustand entsprechend verändern (anstatt per Skript den Klassennamen des Elements zu ändern).

+ +

Die Website der Open Ajax Alliance stellt Beispiel zu CSS-Attributseletoren in Verbindung mit ARIA bereit. Das Beispiel zeigt die Oberfläche eines WYSIWYG-Editors mit einem dynamischen Menü-System. Elemente, die gerade selektiert sind, unterscheiden sich visuell von anderen Elementen. Relevant sind hier besonders die unten beschriebenen Teile.

+ +

Bei diesem Beispiel wird für des Menüs der HTML-Code aus Beispiel 1a verwendet. In Zeile 7 und 13 wird die Eigenschaft aria-checked eingesetzt, um den Zustand der Selektion anzuzeigen.

+ +

Beispiel 1a. HTML für ein selektierbares Menü (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
<ul id="fontMenu" class="menu" role="menu" aria-hidden="true">
+  <li id="sans-serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="true">Sans-serif</li>
+  <li id="serif"
+      class="menu-item"
+      role="menuitemradio"
+      tabindex="-1"
+      aria-controls="st1"
+      aria-checked="false">Serif</li>
+  ...
+
+ +

Für die Änderung der visuellen Darstellung des selektierten Elements wird der CSS-Code aus Beispiel 1b verwendet. Beachten Sie, dass keine Klassennamen benutzt werden, einzig der Zustand des aria-checked-Attribute in Zeile 1 entscheidet also über die Darstellung des Elements.

+ +

Beispiel 1b. Attribute-basierte Selektoren zum Anzeigen des Zustands (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
li[aria-checked="true"] {
+  font-weight: bold;
+  background-image: url('images/dot.png');
+  background-repeat: no-repeat;
+  background-position: 5px 10px;
+}
+
+ +

Zur Aktualisierung der Eigenschaft aria-checked wird der JavaScript-Code aus Beispiel 1c verwendet. Auch das Skript ändert nur den Wert der Attribute (Zeile 3 und 8) und es wird kein Klassenname hinzugefügt oder entfernt.

+ +

Beispiel 1c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/25/).

+ +
var processMenuChoice = function(item) {
+  // 'check' the selected item
+  item.setAttribute('aria-checked', 'true');
+  // 'un-check' the other menu items
+  var sib = item.parentNode.firstChild;
+  for (; sib; sib = sib.nextSibling ) {
+    if ( sib.nodeType === 1 && sib !== item ) {
+      sib.setAttribute('aria-checked', 'false');
+    }
+  }
+};
+
+ +

Änderung der Sichtbarkeit

+ +

Bei Änderungen der Sichtbarkeit von Elementen (verstecken oder sichtbar machen von Elementen) sollten Entwickler nur den Wert der Eigenschaft aria-hidden verändern. Dabei sollte die oben beschreibene Technik angewendet und CSS (display:none) eingesetzt werden, um das Element zu verstecken.

+ +

Auf der Website der Open Ajax Alliance findet man hierzu ein Beispiel mit einem Tooltip bei dem das Attribut aria-hidden eingesetzt wird, um die Sichtbarkeit des Tooltips zu verändern. Das Beispiel zeigt ein einfaches Formular, bei dem Anweisungen zu den einzelnen Feldern eingeblendet werden. Auf die wichtigsten Details wird im Folgenden genauer eingegangen.

+ +

Beispiel 2a zeigt den HTML-Code für einen Tooltip. In Zeile 9 wird der Zustand von aria-hidden auf true gesetzt.

+ +

Beispiel 2a. HTML für ein Tooltip (übernommen von http://www.oaa-accessibility.org/example/39/).

+ +
<div class="text">
+    <label id="tp1-label" for="first">First Name:</label>
+    <input type="text" id="first" name="first" size="20"
+           aria-labelledby="tp1-label"
+           aria-describedby="tp1"
+           aria-required="false" />
+    <div id="tp1" class="tooltip"
+         role="tooltip"
+         aria-hidden="true">Your first name is a optional</div>
+</div>
+
+ +

Das Beispiel 2b unten zeigt den CSS-Code für das Markup. Wie schon beim ersten Beispiel wird auch hier kein Klassenname benutzt, sondern nur der Wert der Attribute aria-hidden geändert.

+ +

Beispiel 2b. Attributbasierte Selektoren zur Anzeige des Zustands (übernommen von
+ http://www.oaa-accessibility.org/example/39/).

+ +
div.tooltip[aria-hidden="true"] {
+  display: none;
+}
+
+ +

Beispiel 2c zeigt den JavaScript-Code zur Aktulisierung der Eigenschaft aria-hidden. Wieder wird per Skript nur die Attribute aria-hidden in Zeile 2 verändert und kein Klassenname hinzugefügt oder entfernt.

+ +

Beispiel 2c. JavaScript zur Aktualisierung des Attributs aria-checked (übernommen von http://www.oaa-accessibility.org/example/39/).

+ +
var showTip = function(el) {
+  el.setAttribute('aria-hidden', 'false');
+}
+ +

Role changes

+ +
+
In Bearbeitung
+
+ +

Mit ARIA können Entwicklern solchen Elementen, bei denen wichtige semantische Informationen fehlen, eine Rolle zuweisen. Wenn z.B. eine ungeordnete Liste für die Erstellung eines Menüs benutzt wird, sollte dem ul-Elemente die Rolle menubar zugeteilt werden und jedem untergeordneten li-Listenelement die Rolle menuitem.

+ +

Die Rolle eines Elements sollte nicht verändert werden. Stattdessen sollte das bestehende Element entfernt und ein neues Element mit neuer Rolle hinzugefügt werden.

+ +

Wenn man z.B. eine Texteditor-Komponente mit einem Ansichtsmodus und einem Editiermodus erstellen möchte, dann kommt ein Entwickler vielleicht auf die Idee für das Textfeld ein schreibgeschütztes input-Element einzusetzen, diesem für den Ansichtsmodus die Rolle button zuzuweisen und beim Wechsel in den Editiermodus die Rolle und den Schreibschutz zu entfernen (da input-Elemente eigene Rollen zugewiesen werden können).

+ +

Diese Vorgehensweise ist keine gute Idee. Stattdessen sollte für den Ansichtsmodus ein anderes Element, wie z.B. ein div- oder span-Element mit der Rolle button verwendet werden und für den Editiermodus ein input-Textelement.

+ +

Asynchrone Inhaltsänderungen

+ +
In Bearbeitung. Siehe auch Live Regions
+ +

Tastaturnavigation

+ +

Von Entwicklern wird oft wenig darauf geachtet, ob Oberflächenkomponenten auch mit der Tastatur bedienbar sind. Damit die Kompnenten für möglichst viele Benutzer zugänglich sind, sollte für alle Funktionen der Komponenten einer Web-Applikation überprüft werden, ob sie auch ausschließlich mit Tastatur und ohne Maus bedient werden können. Für die praktische Umsetzung sollten die üblichen Konventionen für Desktop-Komponenten befolgt werden, also die Benutzung von Tab-, Enter-, Leertaste und Pfeiltasten ermöglicht werden.

+ +

Traditionell ist die Tastaturnavigation im Web auf die Tab-Taste begrenzt. Der Nutzer drückt Tab um jeden Link, Button oder Formular auf der Seite nacheinander zu fukussieren, Shift-Tab um zum letzten Element zu springen. Das ist eine eindimensionale Form der Navigation—vor und zurück, ein Element pro Schritt. Auf sehr umfangreichen Seiten muss ein Nutzer der Tastaturnavigation oft dutzende Male die Tab-Taste drücken, um zu dem gewünschten Bereich zu kommen. Die Implementierung von Navigationskonventionen von Desktop-Programmen im Web hat das Potential die Navigation für viele Nutzer zu beschleunigen.

+ +

Hier eine Zusammenfassung wie Tastaturnavigation in einer ARIA-unterstützten Web-Applikation funktionieren sollte:

+ + + +

In dem Beispiel der Tab-Komponente oben sollte der Nutzer also in der Lage sein mit den Tab- und Shift-Tab Tasten in und aus dem Komponenten-Container (<ol> in unserem Beispiel) zu navigieren. Sobald der Fokus innerhalb des Containers liegt, sollten die Pfeiltasten dem Nutzer erlauben zwischen den einzelnen Tabs (die <li> Elemente) zu navigieren. Ab hier variieren die Konventionen je nach Plattform. Unter Windows wird der nächste Tab automatisch aktivieren, wenn der Nutzer die Pfeiltasten drückt. Unter macOS, kann der Nutzer entweder die Enter- oder die Leertaste drücken, um den nächsten Tab zu aktivieren. Ein umfangreiches Tutorial zur Erstellung von Tastaturnavigation in JavaScript Komponenten beschreibt wie man diese Funktionsweise mit JavaScript implementieren kann.

+ +

Für mehr Details zu Koventionen bei desktopartiger Tastaturnavigation gibt es einen umfangreichen DHTML style guide. Dieser stellt einen Überblick darüber bereit, wie Tastaturnavigation in jeder von ARIA unterstützten Komponente funktionieren sollte. Die W3C bietet ebenfalls ein hilfreiches ARIA Best Practices Dokument, das Konventionen für Tastaturnavigation und Shortcuts für eine Vielzahl von Komponenten beinhaltet.

+ + + + diff --git a/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html new file mode 100644 index 0000000000..4e1f22e0b5 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/aria_live_regionen/index.html @@ -0,0 +1,89 @@ +--- +title: ARIA Live-Regionen +slug: Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen +translation_of: Web/Accessibility/ARIA/ARIA_Live_Regions +--- +

Einführung

+

In der Vergangenheit konnten Änderungen bei Webseiten nur so von einem Screenreader kommuniziert werden, dass der komplette Inhalt vorgelesen oder nur sehr wenig bis gar nichts über die Inhaltsänderungen berichtet wurde. Dies führte dazu, dass einige oder sogar alle Informationen unzugänglich waren. Bisher waren Screenreader nicht in der Lage, diese Situation zu verbessern, weil es keine standardisierte Methode gab, um Screenreader per Markup über Veränderungen zu informieren. ARIA-Live-Regionen sollen diese Lücke schließen. Über Live-Regionen erhalten Screenreader Anweisungen, wonach entschieden werden kann, ob und wann Benutzer unterbrochen werden sollen, um sie über Veränderungen des Inhalts in Kenntnis zu setzen.

+

Einfache Live-Regionen

+

 

+

Dynamische Inhalte, die ohne das Neuladen einer Webseite nachgeladen werden, sind im Allgemeinen entweder eine Region oder eine Komponente. Einfache Inhaltsänderungen, die nicht interaktiv sind, sollten als Live-Regionen gekennzeichnet werden. In der folgenden Liste werden die unterschiedlichen Eigenschaften für ARIA-Live-Regionen mit einer Beschreibung aufgeführt.

+
    +
  1. aria-live: Mit aria-live=POLITENESS_SETTING wird die Priorität für die Behandlung von Aktualisierungen von Live-Regionen festgelegt - die möglichen Werte für diese Einstellung sind: off/polite/assertive, wobei "off" der Default-Wert ist. Diese Eigenschaft ist mit Abstand die Wichtigste.
    2. +
  2. +

    aria-controls: Mit aria-controls=[IDLIST] wird ein Steuerungselement mit der Region verknüpft, die es kontrollieren soll. Regionen werden ähnlich wie div-Elemente anhand einer ID identifiziert. Wenn mehrere Regionen mit einer Steuerung verknüpft werden sollen, können diese einfach getrennt durch ein Leerzeichen angegeben werden, z.B. aria-controls="myRegionID1 myRegionsID2".

    +
    + Not known if the aria-controls aspect of live regions is implemented in current ATs, or which. Needs research.
    +
    3. +
+

In der Regel wird ausschließlich aria-live="polite" verwendet. Alle Regionen, die mit Informationen aktualisiert werden, die zwar wichtig sind, jedoch nicht so dringend, dass der Benutzer sofort unterbrochen und darüber informiert werden sollte, sollten dieses Attribut erhalten. Der Screenreader setzt den Benutzer dann über die Änderungen in Kenntnis, sobald er nicht mehr beschäftigt ist.

+

Regionen, die unrelevant sind oder z.B. wegen ständiger Aktualisierungen störend wirken könnten, sollten mit aria-live="off" stillgeschaltet werden.

+

Einfaches Einsatzszenario: Eine Combobox aktualisiert nützliche On-Screen-Informationen

+

Angenommen eine Website, die Informationen über Vogelarten bereitstellt, bietet ein Dropdown-Menü zur Auswahl einer der Vogelarten an und bei der Auswahl werden in einer Region Informationen über diese Vogelart angezeigt.

+

<select size="1" id="bird-selector" aria-controls="bird-info"><option> .... </select>

+

<div role="region" id="bird-info" aria-live="polite">

+

Sobald der Benutzer eine Vogelart selektiert, wird die Information vorgelesen. Da für die Region "polite" eingestellt ist, wartet der Screenreader, bis der Benutzer nicht mehr beschäftigt ist. Folglich wird bei der Bewegung nach unten in der Liste nicht jede Vogelart vorgelesen, sondern nur die ausgewählte.

+

Bevorzugung von spezialisierten Live-Region-Rollen

+

Für die folgenden bekannten vordefinierten Situationen sollte bevorzugt eine entsprechende "Live-Region-Rolle" eingesetzt werden:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
RolleBeschreibungHinweise zur Kompatibilität
logChat, Fehler, Spiel oder andere LogsZur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
statusEine Statusleiste oder Bildschirmbereich, der einen aktualisierbaren Status anzeigt. Screenreader-Benutzer können mit einem speziellen Befehl den aktuellen Status abfragen.Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="polite" hinzugefügt werden, wenn diese Rolle verwendet wird.
alertEine Fehler- oder Warnungmeldung, die auf dem Bildschirm eingeblendet wird. Alarmmeldungen sind  insbesondere bei der clentseitige Validierungsmeldungen für Benutzer wichtig. (TBD: link to ARIA form tutorial with aria info)Zur Maximierung der Kompatiblität sollte ein redundantes aria-live="assertive" hinzugefügt werden, wenn diese Rolle verwendet wird.  (TBD: check to see if this is necessary or causes double speaking issues.)
progressbarEine Kombination aus einer Komponente und einer Live-Region.  Verwenden Sie diese Rolle mit aria-valuemin, aria-valuenow und aria-valuemax. (TBD: add more info here). 
marqueeFür scrollenden Text, wie z.B. ein Börsenticker. 
timerJede Art von Zeitschaltung oder Uhr, wie z.B. ein Countdown-Timer oder eine Stoppuhr. 
+

Fortgeschrittene Live-Regionen

+

(TBD: what is supported where?)

+
    +
  1. aria-atomic: Das Attribut aria-atomic=BOOLEAN wird eingesetzt, um festzulegen, ob der Screenreader die Live-Regionen als Ganzes präsentieren soll, auch wenn sich nur ein Teil dieser Region ändert. Die möglichen Werte sind false oder true, wobei false der Default-Wert ist.
    2. +
  2. aria-relevant: Mit aria-relevant=[LIST_OF_CHANGES] wird bestimmt, welche Art von Veränderungen relevant für eine Live-Region sind - die möglichen Werte sind additions/removals/text/all. Der Default-Wert ist "additions text".
    3. +
  3. aria-labelledby: Mit aria-labelledby=[IDLIST] wird eine Region mit seinen Labels verknüpft. Die Technik ist dieselbe wie bei aria-controls, nur dass hier Labels statt Steuerungselemente mit der Region verknüpft werden. Mehrere Bezeichner können durch Leerzeichen getrennt angegeben werden.
    4. +
  4. aria-describedby: Das Attribut aria-describedby=[IDLIST] wird verwendet, um eine Region mit einer Beschreibung zu verknüpfen. Auch hier ist die Technik dieselbe, wie bei aria-controls, nur dass eine Beschreibung statt einer Steuerung verknüpft wird. Mehrere Bezeichner für Beschreibungen können durch Leerzeichen getrennt angegeben werden.
    5. +
+

Fortgeschrittenes Einsatzszenario: Roster

+

Auf einer Chat-Webseite soll eine Liste von Benutzern angezeigt werden, die zum aktuellen Zeitpunkt eingeloggt sind. Der Status der Benutzer soll dabei dynamisch (ohne Aktualisierung der Webseite) auf dem neusten Stand gehalten werden.

+
<ul id="roster" aria-live="polite" aria-relevant="additions removals">
+	<!-- Hier wird JavaScript zum Hinzufügen und Entfernen von Benutzern eingesetzt -->
+</ul>
+
+

Zusammenfassende Beschreibung von ARIA-Live-Eigenschaften:

+ +

TBD: Realistic use case for aria-atomic="true"

diff --git a/files/de/web/barrierefreiheit/aria/aria_techniken/index.html b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html new file mode 100644 index 0000000000..85059df7a2 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/aria_techniken/index.html @@ -0,0 +1,168 @@ +--- +title: ARIA Techniken +slug: Web/Barrierefreiheit/ARIA/ARIA_Techniken +tags: + - ARIA + - Accessibility +translation_of: Web/Accessibility/ARIA/ARIA_Techniques +--- +

 

+ +

 Rollen

+ +

 

+ +

Widget Rollen

+ +
+ +
+ +

Zusammengesetzte Rollen

+ +

Diese Techniken beschreiben jede zusammengesetzte Rolle, sowie deren benötigte und optinale Kind-Rollen.

+ + +
+ +
+ +

Dokumentstruktur Rollen

+ +
+ +
+ +

Grenzrollen

+ +
+ +
+ +

Zustände und Eigenschaften

+ +

 

+ +

Widget Eigenschaften

+ +
+ +
+ +

Live Region Attribute

+ +
+ +
+ +

Drag & drop Attribute

+ +
+ +
+ +

Beziehungs Attribute

+ +
+ +
diff --git a/files/de/web/barrierefreiheit/aria/index.html b/files/de/web/barrierefreiheit/aria/index.html new file mode 100644 index 0000000000..c282ef8f95 --- /dev/null +++ b/files/de/web/barrierefreiheit/aria/index.html @@ -0,0 +1,137 @@ +--- +title: ARIA +slug: Web/Barrierefreiheit/ARIA +translation_of: Web/Accessibility/ARIA +--- +

Accessible Rich Internet Applications (ARIA) ermöglichen Webentwicklern Webinhalte und Web-Applikationen (insbesondere solche mit Ajax und JavaScript) besser zugänglich für Menschen mit Behinderungen und anderen Einschränkungen zu machen. Zum Beispiel lassen sich mit ARIA Navigations-Landmarken, JavaScript-Widgets, Formular-Hinweise und Fehlermeldungen hinzufügen und Live-Content-Aktualisierungen barrierefrei gestalten.

+ +

ARIA ist ein Satz von speziellen Attributen, die beliebigem Markup-Content hinzugefügt werden können, wurde jedoch vorwiegend für HTML entwickelt. Das Attribut role definiert, um welche Art von Element es sich bei einem Objekt handelt (z. B. article, alert, oder slider). Andere ARIA-Attribute erweitern den Inhalt einer Website um nützliche Hilfsfunktionen, wie z. B. Formularbeschreibungen und Anzeigen für den aktuellen Wert bei Fortschrittsanzeigen.

+ +

ARIA ist bei den meisten Browsern und Screen-Readern implementiert. Die Implementierungen weichen jedoch teilweise voneinander ab. Bei älterer Technologie ist die Unterstützung oft nicht vollständig (oder gar nicht vorhanden), daher sollte am besten "sicheres" ARIA eingesetzt werden, das bei schlechter Unterstützung keine Probleme verursacht, oder der Benutzer aufgefordert werden, neuere Technologie zu benutzen.

+ +

Bitte helfen Sie uns, ARIA zu verbessern! Falls sie nicht genügend Zeit haben, fügen sie ihre Vorschläge einfach auf der Diskussionsseite hinzu.

+ + + + + + + + + + + + + +
+

Einführung in ARIA

+ +
+
Einführung in ARIA
+
Eine schnelle Einführung, die beschreibt, wie dynamische Inhalte mit ARIA barrierefrei gestaltet werden können. Lesen Sie auch die klassische Einführung von Gez Lemon von 2008.
+
Web-Applikationen und ARIA-FAQ
+
Antworten für die häufigsten Fragen rund um WAI-ARIA und warum es nötig ist, Web-Applikationen barrierefrei zu gestalten.
+
Videos von Screen-Readern mit ARIA
+
Schauen sie sich vereinfachte Beispiele und Praxisbeispiele zu ARIA an. Auch "davor und danach"-Beispiele sind hier zu finden.
+
Benutzung von ARIA mit HTML
+
Hier finden Sie praxisorientierte Empfehlungen für Entwickler. Zum Beispiel welche Attribute mit welchen HTML-Elementen eingesetzt werden sollten.
+
+ +

Einfache Verbesserungen mit ARIA

+ +
+
Enhancing Page Navigation with ARIA Landmarks
+
Eine Einführung zur Verbesserung der Seitennavigation für Benutzer von Screen Readern mit ARIA-Landmarken. Lesen Sie auch den Artikel zur Impelemtierung von ARIA-Landmarken und schauen Sie sich bereits existierende Websites mit ARIA-Landmarken an (letze Aktualisierung: Juli 2011).
+
Verbesserung der Zugänglichkeit von Formularen
+
ARIA ist nicht nur für dynamische Inhalte! Lernen Sie, wie die Zugänglichkeit von HTML-Formularen mit Hilfe von ARIA-Attributen verbessert werden kann.
+
Live-Regions (work-in-progress)
+
Live-Regionen liefern Screen Readern Hinweise über den Umgang mit Inhaltsänderungen bei Webseiten.
+
Using ARIA Live Regions to Announce Content Changes
+
Eine kurze Übersicht über Live-Regionen von den Machern  der Screen-Reader Software JAWS. Live Regions werden auch von NVDA in Firefox und VoiceOver bei Safari unterstüzt (ab OS X Lion und iOS 5).
+
+ +

ARIA für JavaScript-Widgets

+ +
+
Tastaturgesteuerte JavaScript-Komponenten
+
Der erste Schritt bei der Erstellung eines berrierefreien JavaScript-Widget ist, es mit der Tastatur navigierbar zu machen. Deiser Artikel zeigt die Arbeitsschritte auf, die hierfür nötig sind. Der Artikel von Yahoo! zum Focus Management liefert ebenfalls eine gute Beschreibung.
+
Style-Guide für die Tastaturnavigation
+
Es stellt eine Herausforderung bei ARIA dar, Entwickler zur konsistenten Implementierung zu bringen, was für die Benutzer natürlich am besten wäre. Dieser Style-Guide beschreibt die Tastaturfunktionen bei bekannten Widgets.
+
+ +

Weitere Informationen zu ARIA

+ +
+
Widget-Techniken, Tutorials und Beispiele
+
Benötigen sie einen Slider, ein Menü oder eine andere Art von Widget? Hier finden Sie weiterführende Informationen.
+
ARIA-erweiterte JavaScript UI-Libraries
+
Falls Sie ein neues Projekt starten, setzen Sie eine UI-Widget-Llibrary mit ARIA-Unterstützung ein!  Achtung: Der Artikel ist von 2009 - der Inhalt sollte auf eine MDN-Seite kopiert werden, damit er aktualisiert werden kann.
+
Barrierefreiheit von HTML5 und Rich Internet Applications - CSUN 2012 Workshop Materialen
+
Beinhaltet auch Präsentationen und Beispiele.
+
+ 		+

Mailing-Liste

+ +
+
Free ARIA Google Group
+
Hier können Fragen zu ARIA gestellt und Vorschläge gemacht werden, um diese ARIA-Dokumentation zu verbessern.
+
+ +

Blogs

+ +

ARIA-Information von Blogs sind meist schnell veraltet. Dennoch gibt es einige hilfreiche Informationen von anderen Entwicklern, die mit ARIA arbeiten.

+ +

Paciello Group

+ +

Accessible Culture

+ +

Yahoo! Accessibility

+ +

Fehler melden

+ +

Schreiben Sie ARIA-Fehlerberichte zu Browsern, Screen-Readern und JavaScript-Libraries.

+ +

Beispiele

+ +
+
Verzeichnis für ARIA-Beispiele
+
Einige Beispieldateien mit Grundstruktur von denen man lernen kann.
+
Beispiele für zugängliche JS-Widget-Libraries
+
Dojo, jQuery, Fluid, YUI
+
+ +
+
Yahoo! Mail
+
Yahoo! hat bei Yahoo! Mail sehr gute Arbeit geleistet. Einer Web-App, die beinahe wie eine native App aussieht und sehr gut funktioniert, wie ein Review über Yahoo! Mail des Screen-Reader-Benutzers Marco Zehe zeigt. Sein Kommentar: "Keep up the good work!".
+
+ +
+
Yahoo! Search
+
Yahoo! hat hier ebenfalls sehr gute Arbeit geleistet, die Möglichkeiten mit ARIA voll ausgeschöpft und die Technik ausführlich dokumentiert. Bei Yahoo! Search kommt eine Kombination von ARIA-Landmarken, Live-Regionen und Widgets zum Einsatz.
+
+ +

Bemühungen zur Standardisierung

+ +
+
Übersicht zu den WAI-ARIA Aktivitäten des W3C
+
Übersicht zu den Bemühungen für die Standardisierung von AI-ARIA der Web Accessibility Initiative (WAI).
+
WAI-ARIA Spezifikation
+
Die Spezifikation des W3C ist als Referenz sehr nützlich. In diesem Stadium unbedingt Kompatibilitätstest durchgeführt werden, da die Implematierungen noch immer voneinader abweichen.
+
WAI-ARIA Authoring Practices
+
Wie bei der WAI-ARIA-Spezifikation des W3C stellen die offiziellen best-practices ein Ideal für die Zukunft dar - den Zeitpunkt, an dem davon ausgegangen werden kann, dass die ARIA-Überstützung bei allen Browsern und Screen-Readern konsistent implemetiert ist. Die W3C-Dokumente erlauben die tiefgehende Einsicht in die Struktur von ARIA.
+
+ Für jetzt gilt, dass Webentwickler, die ARIA implementieren, die Kompatibiliät maximieren sollten und hierfür auf die Dokumentation von Best-Practices und Beispielen zurückgreifen.
+
Open AJAX Accessibility Task Force
+
Die Open AJAX Effort Centers zu Themen wie Entwicklerwerkzeugen, Beispieldateien und automatisierte Tests für ARIA.
+
In der Entwicklung: WCAG 2.0 ARIA Techniken
+
Die Community benötigt einen kompletten Satz von WCAG-Techniken für WAI-ARIA + HTML, damit Organisationen davon ausgehen können, dass ihre ARIA-erweiterten Inhalte WCAG-konform sind. Das ist vor allem dann wichtig, wenn Regulierungen und Vorschriften auf WCAG basieren.
+
+
+ + +
+
Accessibility, AJAX, JavaScript
+
+
+ +

 

diff --git a/files/de/web/barrierefreiheit/index.html b/files/de/web/barrierefreiheit/index.html new file mode 100644 index 0000000000..417c160fd0 --- /dev/null +++ b/files/de/web/barrierefreiheit/index.html @@ -0,0 +1,78 @@ +--- +title: Barrierefreiheit +slug: Web/Barrierefreiheit +tags: + - Accessibility + - Barrierefreiheit +translation_of: Web/Accessibility +--- +

Accessibility (often abbreviated to A11y—as in "a" then 11 characters then "y") in Web development means enabling as many people as possible to use Web sites, even when those people's abilities are limited in some way.

+ +

For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible no matter an individual's physical and cognitive abilities and no matter how they access the web.

+ +

"The Web is fundamentally designed to work for all people, whatever their hardware, software, language, culture, location, or physical or mental ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability."

+ +
+
+

Key tutorials

+ +

The MDN Accessibility Learning Area contains modern, up-to-date tutorials covering accessibility essentials:

+ +
+
What is accessibility?
+
This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.
+
HTML: A good basis for accessibility
+
A great deal of web content can be made accessible just by making sure the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.
+
CSS and JavaScript accessibility best practices
+
CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences ... or they can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure even complex content is as accessible as possible.
+
WAI-ARIA basics
+
Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and use to let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.
+
Accessible multimedia
+
Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
+
Mobile accessibility
+
With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
+
+
+ +
+

Other documentation

+ +
+
Understanding the Web Content Accessibility Guidelines
+
+

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

+
+
Keyboard-navigable JavaScript widgets
+
Until now, web developers who want to make their styled <div> and <span> based widgets have lacked the proper techniques. Keyboard accessibility is part of the minimum accessibility requirements which a developer should be aware of.
+
ARIA
+
A collection of articles to learn how to use ARIA to make your HTML documents more accessible.
+
Assistive technology (AT) development
+
A collection of articles intended for AT developers
+
Mobile accessibility checklist
+
This document provides a concise checklist of accessibility requirements for mobile app developers.
+
Cognitive accessibility
+
When creating web content, be aware of how you can ensure that it is accessible to people cognitive impairments.
+
Accessibility for seizure disorders
+
Some types of visual web content can induce seizures in people with certain brain disorders. Understand the types of content that can be problematic, and find tools and strategies to help you avoid them.
+
+
+ +

View all articles about Accessibility...

+
+ + +
+ +

W3C - Accessibility

+ +

See also

+ + + + diff --git a/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html new file mode 100644 index 0000000000..2dedfc7aab --- /dev/null +++ b/files/de/web/barrierefreiheit/tastaturgesteuerte_javascript_komponenten/index.html @@ -0,0 +1,145 @@ +--- +title: Tastaturgesteuerte JavaScript-Komponenten +slug: Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten +translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets +--- +

Tastaturgesteuerte JavaScript-Komponenten

+

Übersicht

+

Bei der Erstellung von Desktopkomponenten für Web-Applikationen, wie z.B. Menüs, Baumansichten, Richtext-Felder und Tab-Panels kommt in der Regel JavaScript zum Einsatz. Die Komponenten bestehen üblicherweise aus {{ HTMLElement("div") }}- und {{ HTMLElement("span") }}-Elementen, die von Haus aus nicht die gleiche Funktionalität wie echte Desktopkomponenten besitzen. Dieses Dokument beschreibt Techniken, die eingesetzt werden können, um JavaScript-Komponenten über die Tastatur zugänglich zu machen.

+

Benutzung von tabindex

+

Das tabindex-Attribut wurde zu Beginn als Teil von HTML 4 eingeführt, um Entwicklern zu ermöglichen, die Reihenfolge für die Fokussierung von Elementen festzulegen, die vom Benutzer mit der Tastatur angesteuert werden. Das genaue Verhalten von tabindex wurde später etwas abgeändert. Diese Änderungen sind in der HTML 5-Spezifikation beschrieben. Alle bekannten Browser implementieren fortan das neue Design.

+

Die folgende Tabelle beschreibt das Verhalten von tabindex in modernen Browsern:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
tabindex-AttributFokussierbar mit der Maus oder JavaScript über element.focus()Tab-navigierbar
Nicht vorhandenFolgt der Festlegung für das Element für die Plattform ("Ja" bei Formularsteuerungen, Links, etc.).Folgt der Festlegung für das Element für die Plattform.
Negativ (z.B. tabindex="-1")JaNein; Entwickler muss auf Tasteneingaben reagieren und das Element über focus() fokussieren.
Null (z.B. tabindex="0")JaIn der Tab-Ordnung relativ zur Position des Elements im Dokument.
Positiv (z.B. tabindex="33")JaWert von tabindex bestimmt die Position des Elements in der Tab-Ordnung: Im Allgemeinen werden Elemente vor solchen positioniert, bei denen tabindex="0" gesetzt ist oder die von Natur aus per Tab steuerbar sind; Elemente mit kleinere Werten werden vor solchen mit größeren Werten positioniert (ein Element mit tabindex="7" wird z.B. vor tabindex="11" positioniert)
+

Einfache Steuerungen

+

Damit z.B. eine einfache Tab-Komponente über die Tastatur bedient werden kann, wird dem entsprechenden {{ HTMLElement("div") }}- oder {{ HTMLElement("span") }}-Element das tabindex-Attribut hinzugefügt. Beim folgenden Beispiel wird diese Technik für eine Checkbox angewendet, die auf einem span-Element basiert.

+

Beispiel 1: Eine einfache Checkbox-Komponente mit einem Bild, welche um das tabindex="0" erweitert wurde und so auch über die Tastatur gesteuert werden kann.

+
<!-- Ohne die tabindex-Attribute könnten die <span>-Elemente nicht mit der Tastatur fokussiert werden -->
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Include decorative fruit basket
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="true" tabindex="0">
+        <img src="checked.gif" role="presentation" alt="" />
+        Include singing telegram
+    </span>
+</div>
+<div>
+    <span role="checkbox" aria-checked="false" tabindex="0">
+        <img src="unchecked.gif" role="presentation" alt="" />
+        Require payment before delivery
+    </span>
+</div>
+
+

Gruppieren von Steuerungselementen

+

Für die Gruppierung von Komponenten, wie z.B. Menüs, Tableisten, Grids oder Baumansichten, sollte das Elternelement in die Tab-Ordnung aufgenommen werden (tabindex="0"). Außerdem sollte jede(s) untergeordnete Auswahl/Tab/Zelle/Reihe aus der Tabordnung entfernt werden (tabindex="-1"). Die untergeordneten Elemente sollten vom Benutzer über die Pfeiltasten angesteuert werden können (Eine ausführliche Beschreibung der Tastaturunterstützung, die im Allgemeinen für bestimmte Komponenten erwartet wird, finden Sie im DHTML Style Guide).

+

Beim nächsten Beispiel wird diese Technik bei einer Menüsteuerung eingesetzt. Sobald der Fokus der Tastatur das <ul>-Element erreicht, muss der JavaScript-Entwickler den Fokus programmatisch steuern und auf das Drücken der Pfeiltasten reagieren. Techniken für die Steuerung des Fokus innerhalb von Komponenten, sind im Abschnitt "Steuerung des Fokus innerhalb von Gruppen" weiter unten beschrieben.

+

Beispiel 2: Eine Menüsteuerung bei der mit tabindex die Tastaturnavigation gesteuert wird.

+
<ul id="mb1" tabindex="0">
+  <li id="mb1_menu1" tabindex="-1"> Font
+    <ul id="fontMenu" title="Font" tabindex="-1">
+      <li id="sans-serif" tabindex="-1">Sans-serif</li>
+      <li id="serif" tabindex="-1">Serif</li>
+      <li id="monospace" tabindex="-1">Monospace</li>
+      <li id="fantasy" tabindex="-1">Fantasy</li>
+    </ul>
+  </li>
+  <li id="mb1_menu2" tabindex="-1"> Style
+    <ul id="styleMenu" title="Style" tabindex="-1">
+      <li id="italic" tabindex="-1">Italics</li>
+      <li id="bold" tabindex="-1">Bold</li>
+      <li id="underline" tabindex="-1">Underlined</li>
+    </ul>
+  </li>
+  <li id="mb1_menu3" tabindex="-1"> Justification
+    <ul id="justificationMenu" title="Justication" tabindex="-1">
+      <li id="left" tabindex="-1">Left</li>
+      <li id="center" tabindex="-1">Centered</li>
+      <li id="right" tabindex="-1">Right</li>
+      <li id="justify" tabindex="-1">Justify</li>
+    </ul>
+  </li>
+</ul>
+

Deaktivierte Steuerungen

+

Wenn Sie ein Steuerelement deaktivieren, sollte dieses aus der Tab-Ordnung entfernt werden, indem tabindex="-1" gesetzt wird. Elemente, die Teil einer Komponentengruppe (wie z.B. Menüpunkte in einem Menü) sind, sollten über die Tastatur ansprechbar bleiben.

+

Steuerung des Fokus innerhalb von Gruppen

+

Wenn ein Benutzer den Fokus per Tab von einem Element wegbewegt, sollte der Fokus zu dem Element, das zuvor fokussiert war - z.B. einer Baumkomponente oder Gridzelle - zurückkehren. Es existieren zwei verschiedene Techniken, um dies zu bewirken:

+
    +
  1. Verschiebung von tabindex: Programmatische Bewegung des Fokus
    2. +
  2. aria-activedescendent: Verwaltung eines "virtuellen" Fokus
    3. +
+

Technik 1: Verschiebung von tabindex

+

Setzt man tabindex für das fokussierte Element auf "0", wird das ausgewählte Element innerhalb der Gruppe erneut fokussiert, wenn der Benutzer den Fokus per Tab fortbewegt und dann zu diesem Element zurückkehrt. Beachten Sie, dass bei der Aktualisierung von tabindex auf 0 für des zuvor selektierte Element tabindex="-1" gesetzt werden muss. Diese Technik wird auch verwendet, wenn auf Tastendrücke reagiert und der Fokus programmatisch weiterbewegt wird. Der tabindex wird dann entspechend aktualisiert, um das aktuell fokussierte Element anzuzeigen. Dies lässt sich wie folgt umsetzen:

+

Jeweils ein keydown-Hander wird mit einem Element der Gruppe verknüpft. Wenn der Benutzer eine Pfeiltaste drückt, um ein anderes Element anzusteuern, passiert Folgendes:

+
    +
  1. Das neue Element wird codegesteuert fokussiert.
    2. +
  2. Der tabindex des fokussierten Elements wird auf "0" gesetzt.
    3. +
  3. Der tabindex des zuvor fokussierte Elements wird auf "-1" gesetzt.
    4. +
+

Hier finden Sie ein Beispiel für eine WAI-ARIA Baumansicht bei der diese Technik eingesetzt wird.

+
Tipps
+
Mit element.focus() den Fokus setzen
+

Benutzen Sie nicht die Funktionen createEvent(), initEvent() und dispatchEvent() um ein Element zu fokussieren. DOM-Focus-Events arbeiten nur informell: Sie werden vom System erzeugt, wenn ein Element fokussiert wird, aber nicht verwendet, um den Fokus zu setzen. Greifen Sie stattdessen auf element.focus() zurück.

+
Mit onfocus den Fokus überprüfen
+

Gehen Sie nicht davon aus, dass Fokusänderungen allein über die Tastatur oder Maus initiiert werden: Assistierende Technologien, wie z.B. Screenreader, sind in der Lage den Fokus für jedes fokussierbare Element zu setzen. Benutzen Sie daher onfocus und onblur um Fokusänderungen zu verfolgen.

+

onfocus und onblur können nun mit jedem beliebigen Element verwendet werden. Es existiert jedoch kein Standard-DOM-Interface, um den aktuellen Fokus im Dokument abzufragen. Wenn man den Fokus verfolgen möchte, muss der aktuelle Zustand in einer JavaScript-Variablen hinterlegt werden.

+

Technik 2: aria-activedescendant

+

Bei dieser Technik wird ein einzelner Event-Handler mit der Container-Komponente verknüpft und aria-activedescendant dazu benutzt, um einen "virtuellen" Fokus zu verwalten. (Mehr Informationen über ARIA finden Sie indieser Übersicht).

+

The aria-activedescendant property identifies the ID of the descendent element that currently has the virtual focus. The event handler on the container must respond to key and mouse events by updating the value of aria-activedescendant and ensuring that the current item is styled appropriately (for example, with a border or background color). See the source code of this ARIA radiogroup example for a direct illustration of how this works.

+

Die Eigenschaft aria-activedescendent enthält die ID des untergeordneten Elements, das aktuell fokussiert ist. Der Event-Handler des Containers muss auf Tastatur- und Mauseingaben reagieren, den Wert von aria-activedescendent aktualisieren und sicherstellen, dass die Darstellung des Elements entsprechend angepasst wird (z.B. Rahmen oder Hintergrundfarbe). Ein konkretes Beispiel für diese Technik liefert der Quellcode des ARIA-Radiogruppen-Beispiels.

+
Tipps
+
scrollIntoView
+

Note that the use of this pattern requires the author to ensure that the current focused widget is scrolled into view. You should be able to use the {{ domxref("element.scrollIntoView()") }} function, but we recommend confirming this works for you in your target browsers using the quirksmode test.Bei der Benutzung dieses Musters muss der Entwickler sicherstellen, dass das aktuell fokussierte Element in Sichtweite gescrollt wird. Für diesen Zweck kann die Funktion element.scrollIntoView() eingesetzt werden. Überprüfen Sie jedoch unbedingt mit dem Quirksmode-Test, ob dies für ihre Browser, die unterstützt werden sollen, fehlerfrei funktioniert.

+
Probleme
+ +

Allgemeine Richtlinien

+

Benutzung von onkeydown, um auf Tastendrücke zu reagieren (nicht onkeypress)

+

Der Internet Explorer führt keypress-Events für nicht-alpahnumerische Zeichen nicht aus. Benutzen Sie stattdessen das onkeydown-Event.

+

Tastatur- und Mausbedienung sollte konsistent sein

+

Um sicherzustellen, dass Benutzereingaben unabhängig vom Eingabegerät konstistent sind, sollten Tastatur- und Maus-Eventhandler denselben Code verwenden. Zum Beispiel sollte der Code, womit der tabindex oder das Aussehen festgelegt wird, wenn die Pfeiltasten benutzt werden, auch für die Mausklick-Handler verwendet werden, damit dieselben Änderungen stattfinden.

+

Aktivierung von Elementen per Tastatur

+

Damit die Tastatur für die Aktivierung von Elementen benutzt werden kann, sollte alle Handler, die mit der Mausevents verknüpft sind, auch mit Tastaturevents verknüpft werden. Soll z.B. mit der Enter-Taste ein Element aktiviert werden können, welches über einen Maushandler onclick="doSomething()" mit der Maus verknüpft ist, dann sollte die Funktion doSomething() auch über ein keydown-Event mit der Tastatur verknüpft werden: onkeydown="return event.keyCode != 13 || doSomething();".

+

Verwenden Sie nicht :focus für das Styling (falls Kompatibilität mit IE 7 und ältereren Browsern notwendig)

+

Der Internet Explorer 7 und ältere Versionen unterstützen den Pseudoselektor :focus nicht. Aus diesem Grund sollte er für die Gestaltung von fokussierten Elementen nicht verwendet werden. Stattdessen kann die Darstellung über einen onfucus-Eventhander verändert werden, z.B. indem ein CSS-Style Name dem class-Attribut hinzugefügt wird.

+

Kontinuierliches Anzeigen des Fokus für Elemente mit tabindex="-1", die programmatisch fokussiert werden

+

Der Internet Explorer zeigt die Fokusumrandung für Elemente nicht automatisch an. Die Hervorhebung des fokussierten Elementes muss daher per JavaScript, entweder durch die Änderung der Hintergrundfarbe (z.B. this.style.backgroundColor = "gray") oder Anzeige eines gepunkteten Rahmen (z.B. this.style.border = "1px dotted invert") erfolgen. Entscheiden Sie sich für die zweite Vorgehensweise, sollten die Elementen von Anfang an einen unsichtbaren 1px-Rahmen besitzen, damit sie nicht größer werden, wenn der Rahmen angezeigt wird (Rahmen nehmen Platz in Anspruch und beim IE sind CSS-Outlines nicht implementiert).

+

Verwendete Tastendrücke sollten keine Browserfunktionen auslösen

+

Wenn eine Komponente auf Tastendrücke reagiert, sollte verhindert werden, dass der Browser diese Tastendrücke verarbeitet (z.B. Scrollen mit den Pfeiltasten), indem bei Event-Handlern ein Return-Code angegeben wird. Der Rückgabewert false verhindert, dass das Event an den Browser weitergereicht wird.

+

Hierzu ein Beispiel:

+
<span tabindex="-1" onkeydown="return handleKeyDown();">
+

Gibt die Funktion handleKeyDown() den Wert false zurück, wird das Event übernommen und der Browser so davon abgehalten auf den Tastendruck zu reagieren.

+

Abweichendes Verhalten bei wiederholten Tastendrücken

+

Je nach Betriebssystem kann es leider vorkommen, dass bei wiederholten Tastendrücken onkeydown-Events wiederholt ausgeführt werden oder auch nicht.

diff --git a/files/de/web/barrierefreiheit/webentwicklung/index.html b/files/de/web/barrierefreiheit/webentwicklung/index.html new file mode 100644 index 0000000000..7c0f69c735 --- /dev/null +++ b/files/de/web/barrierefreiheit/webentwicklung/index.html @@ -0,0 +1,58 @@ +--- +title: Webentwicklung +slug: Web/Barrierefreiheit/Webentwicklung +translation_of: Web/Accessibility +--- +

 

+ + + + + + + + +
+

Barrierefreiheit im Web

+ +
+
ARIA für Entwickler
+
+ +
+
ARIA ermöglicht Barrierefreiheit für dynamischen HTML-Content, wie z.B. Live-Content und JavaScript-Widgets.
+
+ +
+
Tastaturgesteuerte JavaScript-Widgets
+
Viele Webentwickler, die ihre <div>- und <span>-basierten Widgets über die Tastatur zugänglich machen wollen,  suchen dafür die passende Technik. Tastaturgesteuerte Zugänglichkeit gehört zu den Techniken, mit denen jeder Webentwickler vertraut sein sollte.
+
+ +

XUL-Barrierefreiheit

+ +
+
 
+
Erstellung von benutzerdefinierten Komponenten mit XUL
+
Wie man DHTML-Techniken für Barrierefreiheit einsetzt, um XUL-Komponenten barrierefrei zu machen.
+
+ +
+
Richtlinien für die Erstellung von barrierefreiem XUL
+
Wenn diese Richtlinen bei der Erstellung von XUL-Komponenten befolgt werden, sind die mit XUL erstellten Benutzeroberflächen barrierefrei. Programmierer, Reviewer, Designer und QS-Tester sollten mit diesen Richtlinien vertraut sein.
+
+ +
+
+ +
+
+ 		+

Externe Informationen

+ +
+
Accessible Web Page Authoring
+
Eine übersichtliche Checkliste für barrierefreie Webentwicklung von IBM.
+
+
+ +

 

diff --git a/files/de/web/css/-moz-binding/index.html b/files/de/web/css/-moz-binding/index.html new file mode 100644 index 0000000000..c59286c421 --- /dev/null +++ b/files/de/web/css/-moz-binding/index.html @@ -0,0 +1,65 @@ +--- +title: '-moz-binding' +slug: Web/CSS/-moz-binding +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsUpdate + - Non-standard + - XBL +translation_of: Archive/Web/CSS/-moz-binding +--- +
{{Non-standard_header}}{{CSSRef}}{{Deprecated_Header(57)}}
+ +

Übersicht

+ +

Die -moz-binding CSS Eigenschaft wird bei Mozilla basierten Anwendungen dazu verwendet, XBL Bindings an ein DOM Element anzufügen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* <uri> Wert */
+-moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#checkbox);
+
+/* Globale Werte */
+-moz-binding: inherited;
+-moz-binding: initial;
+-moz-binding: unset;
+
+ +

Werte

+ +
+
<uri>
+
Die URI für ein XBL Binding (inclusive dem Fragmentidentifizier).
+
none
+
Kein XBL Binding wird auf das Element angewandt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
.beispieleins {
+  -moz-binding: url(http://www.example.org/xbl/htmlBindings.xml#radiobutton);
+}
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.-moz-binding")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-bottom-colors/index.html b/files/de/web/css/-moz-border-bottom-colors/index.html new file mode 100644 index 0000000000..04c5583e52 --- /dev/null +++ b/files/de/web/css/-moz-border-bottom-colors/index.html @@ -0,0 +1,134 @@ +--- +title: '-moz-border-bottom-colors' +slug: Web/CSS/-moz-border-bottom-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-bottom-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

In Mozilla Anwendungen wie Firefox setzt die -moz-border-bottom-colors CSS Eigenschaft eine Liste von Farben für den unteren Rahmen.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-bottom-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-bottom-colors: inherit;
+-moz-border-bottom-colors: initial;
+-moz-border-bottom-colors: unset;
+
+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des unteren Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
<div id="example">Beispiel</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Beispiel", 120, 90)}}

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-left-colors/index.html b/files/de/web/css/-moz-border-left-colors/index.html new file mode 100644 index 0000000000..a9d2006c1d --- /dev/null +++ b/files/de/web/css/-moz-border-left-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-left-colors' +slug: Web/CSS/-moz-border-left-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-left-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-left-colors")}} CSS Eigenschaft eine Liste von Farben für den linken Rand.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-left-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-left-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-left-colors: inherit;
+-moz-border-left-colors: initial;
+-moz-border-left-colors: unset;
+
+ +

Werte

+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des linken Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
<div id="example">Beispiel</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Beispiel", 120, 90)}}

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-right-colors/index.html b/files/de/web/css/-moz-border-right-colors/index.html new file mode 100644 index 0000000000..787c70a6fa --- /dev/null +++ b/files/de/web/css/-moz-border-right-colors/index.html @@ -0,0 +1,88 @@ +--- +title: '-moz-border-right-colors' +slug: Web/CSS/-moz-border-right-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-right-colors +--- +
{{Non-standard_header}}{{CSSRef}}{{Obsolete_Header(59)}}
+ +

In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den rechten Rand.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-right-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-right-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-right-colors: inherit;
+-moz-border-right-colors: initial;
+-moz-border-right-colors: unset;
+
+ +

Werte

+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des rechten Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
<div id="example">Beispiel</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Beispiel", 120, 90)}}

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.-moz-border-right-colors")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-border-top-colors/index.html b/files/de/web/css/-moz-border-top-colors/index.html new file mode 100644 index 0000000000..79f324ceb0 --- /dev/null +++ b/files/de/web/css/-moz-border-top-colors/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-border-top-colors' +slug: Web/CSS/-moz-border-top-colors +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Non-standard +translation_of: Archive/Web/CSS/-moz-border-top-colors +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

In Mozilla-Anwendungen wie Firefox, setzt die {{cssxref("-moz-border-top-colors")}} CSS Eigenschaft eine Liste von Farben für den oberen Rand.

+ +

Wenn ein Element einen Rand hat, der größer ist als ein einzelner CSS-Pixel, verwendet jede Zeile von Pixeln die nächste Farbe, die in dieser Eigenschaft angegeben wurde, von außen nach innen. Dies beseitigt die Notwendigkeit von verschachtelten Boxen. Falls der Rand breiter ist als die Anzahl der definierten Farben, wird der verbleibende Teil des Randes in der innersten Farbe gezeichnet.

+ +

{{cssinfo}}

+ +

Sie wird nicht angewendet

+ +
    +
  1. wenn {{cssxref("border-style")}} dashed oder dotted ist.
    2. +
  2. auf Tabellen mit border-collapse: collapse.
    3. +
+ +

Syntax

+ +
/* Einzelner <color> Wert */
+-moz-border-top-colors: #f0f0f0;
+
+/* Mehrere <color> Werte */
+-moz-border-top-colors: #f0f0f0 #a0a0a0 #505050 #000000;
+
+/* Globale Werte */
+-moz-border-top-colors: inherit;
+-moz-border-top-colors: initial;
+-moz-border-top-colors: unset;
+
+ +

Werte

+ +

Akzeptiert eine durch Leerzeichen getrennte Liste von Farbwerten.

+ +
+
<color>
+
Definiert die Farbe einer Linie von Pixeln des oberen Randes. transparent ist gültig. Siehe {{cssxref("<color>")}} Werte für mögliche Einheiten.
+
none
+
Es werden keine Farben gezeichnet oder {{cssxref("border-color")}} verwendet, falls angegeben.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
<div id="example">Beispiel</div>
+
+ +
#example {
+  padding: 20px;
+  background-color: gray;
+  border: 10px solid black;
+  -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+  -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0;
+  -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0;
+}
+
+ +

{{EmbedLiveSample("Beispiel", 120, 90)}}

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil irgendeiner Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.7")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-box-flex/index.html b/files/de/web/css/-moz-box-flex/index.html new file mode 100644 index 0000000000..8c54ffa75a --- /dev/null +++ b/files/de/web/css/-moz-box-flex/index.html @@ -0,0 +1,103 @@ +--- +title: '-moz-box-flex' +slug: Web/CSS/-moz-box-flex +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/box-flex +--- +
{{CSSRef}}{{warning("Dies ist eine Eigenschaft zur Steuerung von Teilen des XUL Boxmodells. Sie stimmt weder mit den alten CSS Flexible Box Layout Module Entwürfen für box-flex (welche auf dieser Eigenschaft beruhen), noch dem Verhalten von -webkit-box-flex (welche auf diesen Entwürfen beruht) überein.")}}
+ +

Siehe Flexbox für mehr Informationen, was anstelle dieser Eigenschaft verwendet werden sollte.

+ +

Übersicht

+ +

Die -moz-box-flex und -webkit-box-flex CSS Eigenschaften geben an, wie eine -moz-box oder -webkit-box wächst, um die Box zu füllen, die sie beinhaltet, in Richtung des Layouts der beinhaltenden Box. Siehe Flexbox für mehr Informationen über die Eigenschaften von Flexbox-Elementen.

+ +

Syntax

+ +
/* <number> Werte */
+-moz-box-flex: 0;
+-moz-box-flex: 3;
+-webkit-box-flex: 0;
+-webkit-box-flex: 3;
+
+/* Globale Werte */
+-moz-box-flex: inherit;
+-moz-box-flex: initial;
+-moz-box-flex: unset;
+
+ +

Werte

+ +
+
0
+
Die Box wächst nicht.
+
> 0
+
Die Box wächst soweit, dass sie den verfügbaren Raum ausfüllt.
+
+ +

Beispiele

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <title>-moz-box-flex example</title>
+    <style>
+      div.example {
+        display: -moz-box;
+        display: -webkit-box;
+        border: 1px solid black;
+        width: 100%;
+      }
+      div.example > p:nth-child(1) {
+        -moz-box-flex: 1;       /* Mozilla */
+        -webkit-box-flex: 1;    /* WebKit */
+        border: 1px solid black;
+      }
+      div.example > p:nth-child(2) {
+        -moz-box-flex: 0;       /* Mozilla */
+        -webkit-box-flex: 0;    /* WebKit */
+        border: 1px solid black;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example">
+      <p>Ich wachse, um den zusätzlichen Raum auszufüllen.</p>
+      <p>Ich wachse nicht.</p>
+    </div>
+  </body>
+</html>
+
+ +

Hinweise

+ +

Die beinhaltende Box teilt den zur Verfügung stehenden zusätzlichen Abstand proportional zum Flexwert jedes Inhaltselements auf.

+ +

Inhaltselemente, die null als Flexwert haben, vergrößern sich nicht.

+ +

Falls nur ein Inhaltselement einen Flexwert hat, der nicht null ist, vergrößert es sich, um den verfügbaren Raum auszufüllen.

+ +

Inhaltselemente, die den gleichen Flexwert haben, vergrößern sich um den gleichen absoluten Betrag.

+ +

Falls der Flexwert über das flex Elementattribut gesetzt wird, wird der Stil ignoriert.

+ +

Um XUL Elemente innerhalb einer Box gleich groß zu machen, muss das equalsize Attribut der beinhaltenden Box auf den Wert always gesetzt werden. Dieses Attribut hat keine entsprechende CSS Eigenschaft.

+ +

Ein Trick, um alle Inhaltselemente in einer beinhaltenden Box gleich groß zu machen, ist, allen eine feste Größe (z. B. height: 0;) und denselben box-flex Wert größer als null zu geben (z. B. -moz-box-flex: 1).

+ +

Spezifikationen

+ +

Diese Eigenschaft ist eine nicht standardisierte Erweiterung. Es gab einen alten Entwurf der CSS3 Flexbox Spezifikation, der eine box-flex Eigenschaft definiert hat, aber dieser Entwurf ist mittlerweile überholt.

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.box-flex")}}

+ +

Siehe auch

+ +

{{cssxref("-moz-box-orient")}}, {{cssxref("-moz-box-pack")}}, {{cssxref("-moz-box-direction")}}, {{cssxref("flex")}}

diff --git a/files/de/web/css/-moz-box-ordinal-group/index.html b/files/de/web/css/-moz-box-ordinal-group/index.html new file mode 100644 index 0000000000..f4465ba8ca --- /dev/null +++ b/files/de/web/css/-moz-box-ordinal-group/index.html @@ -0,0 +1,66 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - Flexible Box + - Non-standard +translation_of: Web/CSS/box-ordinal-group +--- +

{{CSSRef}}
+ {{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Entwurfs und wurde in neueren Entwürfen ersetzt.")}}

+ +

Siehe Flexbox für mehr Informationen, was statt dieser Eigenschaft verwendet werden sollte.

+ +

Übersicht

+ +

Kennzeichnet die Aufzählungsgruppe, zu der das Element gehört. Elemente mit einer geringeren Aufzählungsgruppe werden vor denen mit höherer Aufzählungsgruppe angezeigt.

+ +

Werte

+ +

Werte müssen Ganzzahlen größer als null sein. Der Standardwert für diese Eigenschaft ist 1.

+ +

Beispiele

+ +
<style type="text/css">
+  #Flexbox {
+    display: -ms-box;
+    display: -moz-box;
+    display: -webkit-box;
+  }
+
+  #text1 {
+    background: red;
+    -ms-box-ordinal-group: 4;
+    -moz-box-ordinal-group: 4;
+    -webkit-box-ordinal-group: 4;
+  }
+
+  #text2 {
+    background: green;
+    -ms-box-ordinal-group: 3;
+    -moz-box-ordinal-group: 3;
+    -webkit-box-ordinal-group: 3;
+  }
+
+  #text3 {
+    background: blue;
+    -ms-box-ordinal-group: 2;
+    -moz-box-ordinal-group: 2;
+    -webkit-box-ordinal-group: 2;
+  }
+
+  #text4 {
+    background: orange;
+  }
+</style>
+
+<div id="Flexbox">
+  <div id="text1">text 1</div>
+  <div id="text2">text 2</div>
+  <div id="text3">text 3</div>
+  <div id="text4">text 4</div>
+</div>
+
diff --git a/files/de/web/css/-moz-box-pack/index.html b/files/de/web/css/-moz-box-pack/index.html new file mode 100644 index 0000000000..517c6fce72 --- /dev/null +++ b/files/de/web/css/-moz-box-pack/index.html @@ -0,0 +1,136 @@ +--- +title: '-moz-box-pack' +slug: Web/CSS/-moz-box-pack +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - Layout + - Non-standard +translation_of: Web/CSS/box-pack +--- +
{{CSSRef}}{{warning("Dies ist eine Eigenschaft des ursprünglichen CSS Flexible Box Layout Moduls, welches durch einen neuen Standard ersetzt wurde.")}}
+ +

Siehe Flexbox für mehr Informationen.

+ +

Übersicht

+ +

Die -moz-box-pack und -webkit-box-pack CSS Eigenschaften bestimmen, wie ein -moz-box oder -webkit-box seine Inhalte in Richtung seines Layouts packt.  Die Wirkung dieser Eigenschaft ist nur sichtbar, falls es zusätzlichen Leerraum innerhalb der Box gibt. Siehe Flexbox für mehr Informationen bezüglich den Eigenschaften von Flexbox-Elementen.

+ +

Die Richtung des Layouts hängt von der Ausrichtung des Elements ab: horizontal oder vertikal.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-box-pack: start;
+-moz-box-pack: center;
+-moz-box-pack: end;
+-moz-box-pack: justify;
+
+/* Globale Werte */
+-moz-box-pack: inherit;
+-moz-box-pack: initial;
+-moz-box-pack: unset;
+
+ +

Werte

+ +
+
start
+
Die Box packt Inhalte am Anfang und lässt eventuellen zusätzlichen Leerraum am Ende.
+
center
+
Die Box packt Inhalte in der Mitte und teilt eventuellen zusätzlichen Leerraum zwischen Start und Ende auf.
+
end
+
Die Box packt Inhalte am Ende und lässt eventuellen zusätzlichen Leerraum am Start.
+
justify
+
Der Leerraum wird gleichmäßig zwischen jedem Kind aufgeteilt, wobei kein zusätzlicher Leerraum vor dem ersten Kind oder nach dem letzten Kind platziert wird. Falls es nur ein Kind gibt, wird der Wert so behandelt, als ob er start wäre.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
div.example {
+  border-style: solid;
+
+  display: -moz-box; /* Mozilla */
+  display: -webkit-box; /* WebKit */
+
+  /* Make this box taller than the children,
+     so there is room for the box-pack */
+  height: 300px;
+  /* Make this box wide enough to show the contents
+     are centered horizontally */
+  width: 300px;
+
+  /* Children should be oriented vertically */
+  -moz-box-orient: vertical; /* Mozilla */
+  -webkit-box-orient: vertical; /* WebKit */
+
+  /* Align children to the horizontal center of this box */
+  -moz-box-align: center; /* Mozilla */
+  -webkit-box-align: center; /* WebKit */
+
+  /* Pack children to the bottom of this box */
+  -moz-box-pack: end;             /* Mozilla */
+  -webkit-box-pack: end;          /* WebKit */
+}
+
+div.example p {
+  /* Make children narrower than their parent,
+     so there is room for the box-align */
+  width: 200px;
+}
+
+ +
<div class="example">
+  <p>I will be second from the bottom of div.example, centered horizontally.</p>
+  <p>I will be on the bottom of div.example, centered horizontally.</p>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 310, 310)}}

+ +

Hinweise

+ +

Der Rand der Box, die als Start zum Packen bestimmt wird, hängt von der Ausrichtung der Box und deren Richtung ab:

+ + + + + + + + + + + + + + + + + + + +
 NormalUmgekehrt
Horizontallinksrechts
Vertikalobenunten
+ +

Der dem Start gegenüberliegende Rand wird als das Ende bestimmt.

+ +

Falls das Packen durch das pack Elementattribut gesetzt wird, wird die Stileigenschaft ignoriert.

+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht standardisiert, jedoch erschien eine ähnliche Eigenschaft in einem frühen Entwurf von CSS3 Flexbox, die durch neuere Versionen der Spezifikation überholt wurde.

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.box-pack")}} + +

Siehe auch

+ +

{{cssxref("box-orient")}}, {{cssxref("box-direction")}}, {{cssxref("box-align")}}

diff --git a/files/de/web/css/-moz-cell/index.html b/files/de/web/css/-moz-cell/index.html new file mode 100644 index 0000000000..7e4ded305c --- /dev/null +++ b/files/de/web/css/-moz-cell/index.html @@ -0,0 +1,11 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Non-standard +translation_of: Web/CSS/cursor +--- +
{{CSSRef}}{{obsolete_header}}
+ +

Diesen Wert nicht verwenden! Stattdessen sollte der cursor Wert {{cssxref("cursor#cell","cell")}} verwendet werden.

diff --git a/files/de/web/css/-moz-float-edge/index.html b/files/de/web/css/-moz-float-edge/index.html new file mode 100644 index 0000000000..1049fa0df2 --- /dev/null +++ b/files/de/web/css/-moz-float-edge/index.html @@ -0,0 +1,67 @@ +--- +title: '-moz-float-edge' +slug: Web/CSS/-moz-float-edge +tags: + - CSS + - CSS Eigenschaft + - 'CSS:Mozilla Erweiterungen' + - Layout + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: Web/CSS/-moz-float-edge +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die nicht standardisierte -moz-float-edge CSS Eigenschaft gibt an, ob die Höhen- und Breiteneigenschaften des Elements die Dicke des Außenabstands, des Rands oder des Innenabstands beinhalten.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-float-edge: border-box;
+-moz-float-edge: content-box;
+-moz-float-edge: margin-box;
+-moz-float-edge: padding-box;
+
+/* Globale Werte */
+-moz-float-edge: inherit;
+-moz-float-edge: initial;
+-moz-float-edge: unset;
+
+ +

Werte

+ +
+
border-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand und Rand, aber nicht den Außenabstand.
+
content-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, aber weder Innenabstand, Rand, noch Außenabstand.
+
margin-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt, Innenabstand, Rand und Außenabstand.
+
padding-box
+
Die Höhen- und Breiteneigenschaften beinhalten den Inhalt und Innenabstand, aber nicht den Rand oder Außenabstand.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
hr {
+  display: block;
+  height: 2px;
+  border: 1px inset;
+  margin: 0.5em auto 0.5em auto;
+  color: gray;
+  -moz-float-edge: margin-box;
+  box-sizing: border-box;
+}
+ +

Siehe auch

+ +

{{bug(432891)}}

diff --git a/files/de/web/css/-moz-force-broken-image-icon/index.html b/files/de/web/css/-moz-force-broken-image-icon/index.html new file mode 100644 index 0000000000..b4b56a17d8 --- /dev/null +++ b/files/de/web/css/-moz-force-broken-image-icon/index.html @@ -0,0 +1,57 @@ +--- +title: '-moz-force-broken-image-icon' +slug: Web/CSS/-moz-force-broken-image-icon +tags: + - CSS + - CSS Referenz + - NeedsContent + - Non-standard +translation_of: Web/CSS/-moz-force-broken-image-icon +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

-moz-force-broken-image-icon ist eine erweiterte CSS Eigenschaft. Der Wert 1 erzwingt ein Symbol für nicht ladbare Bilder auch wenn das Bild ein {{HTMLElement("img", "alt", "#attr-alt")}} Attribut hat. Wenn der Wert 0 verwendet wird, wird sich das Bild wie gewohnt verhalten und nur das alt Attribut anzeigen.

+ +
Hinweis: Sogar wenn der Wert auf 1 gesetzt wird, wird das alt Attribut immer noch angezeigt. Mehr Informationen sind weiter unten verfügbar.
+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
{{cssxref("<integer>")}}
+
Ein Wert von 1 bedeutet, dass ein Symbol für nicht ladbare Bilder angezeigt wird, auch wenn das Bild ein {{HTMLElement("img", "alt", "#attr-alt")}} Attribut hat. Ein Wert von 0 zeigt nur das alt Attribut an.
+
+ +

Beispiele

+ +
img {
+  -moz-force-broken-image-icon: 1;
+  height:100px;
+  width:100px;
+}
+ +
<img src='/broken/image/link.png' alt='Broken image link'>
+ +

{{EmbedLiveSample('Beispiele','125','125','/files/4619/broken%20image%20link.png')}}

+ +
Hinweis: Sofern das Bild keine definierte Höhe und Breite hat, wird das Symbol für nicht ladbare Bilder nicht angezeigt, aber das alt Attribut wird ebenfalls versteckt, wenn -moz-force-broken-image-icon auf 1 gesetzt wird.
+ +

Hinweise

+ + + +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-image-rect/index.html b/files/de/web/css/-moz-image-rect/index.html new file mode 100644 index 0000000000..685d7a855b --- /dev/null +++ b/files/de/web/css/-moz-image-rect/index.html @@ -0,0 +1,146 @@ +--- +title: '-moz-image-rect' +slug: Web/CSS/-moz-image-rect +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsUpdate + - Non-standard +translation_of: Web/CSS/-moz-image-rect +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}
+ +

Übersicht

+ +

Dieser Wert für CSS {{cssxref("background-image")}} ermöglicht es, einen Bereich eines größeren Bildes als Hintergrund zu verwenden. Dies erlaubt es beispielsweise, verschiedene Teile eines größeren Bildes als Hintergründe in verschiedenen Teilen des Inhalts zu verwenden.

+ +

Dies funktioniert ähnlich der {{cssxref("-moz-image-region")}} Eigenschaft, welche zusammen mit der {{cssxref("list-style-image")}} verwendet wird, um Teile eines Bildes als Aufzählungszeichen in einer Liste zu verwenden. Diese Eigenschaft wird jedoch für CSS Hintergründe verwendet.

+ +

Die Syntax für ein Rechteck ist ähnlich der der rect() Funktion, die einen {{cssxref("<shape>")}} CSS Typ generiert. Alle vier Werte sind relativ zur linken oberen Ecke des Bildes.

+ +

Syntax

+ +
-moz-image-rect({{cssxref("<uri>")}}, top, right, bottom, left);
+ +

Werte

+ +
+
{{cssxref("<uri>")}}
+
Der URI des Bildes, von dem das Teilbild verwendet werden soll.
+
top
+
Der obere Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
right
+
Der rechte Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
bottom
+
Der untere Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
left
+
Der linke Rand, definiert als {{cssxref("<length>")}} des Teilbilds innerhalb des angegebenen Bildes.
+
+ +

Beispiel

+ +

Dieses Beispiel lädt ein Bild und verwendet es in vier Segmenten, um das Firefox Logo in vier {{HTMLElement("div")}} Blöcken darzustellen. Wenn auf deren Container geklickt wird, werden die vier Segmente rotiert, indem die {{cssxref("background-image")}} Eigenschaftswerte zwischen den vier {{HTMLElement("div")}} Blöcken getauscht werden.

+ +

CSS

+ +

Das CSS definiert einen Containerstil, dann die Stile für die vier Boxen, die das gesamte Bild ausmachen.

+ +

Der Container sieht folgendermaßen aus:

+ +
#container {
+  width: 267px;
+  height: 272px;
+  top: 100px;
+  left: 100px;
+  position: absolute;
+  font-size: 16px;
+  text-shadow: white 0px 0px 6px;
+  text-align: center;
+}
+ +

Dann werden die vier Boxen definiert, die die Segmente des Bildes beschreiben. Hier wird eines nach dem anderen dargestellt.

+ +
#box1 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 50%, 50%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+ +

Dies ist die linke obere Ecke des Bildes. Sie beschreibt ein Rechteck, das das linke obere Viertel des Bildes der Datei firefox.jpg beinhaltet.

+ +
#box2 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 0%, 100%, 50%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+ +

Dies beschreibt die rechte obere Ecke des Bildes.

+ +

Die anderen Ecken folgen einem ähnlichen Schema:

+ +
#box3 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 50%, 100%, 0%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+#box4 {
+  background-image: -moz-image-rect(url(https://mdn.mozillademos.org/files/12053/firefox.png), 50%, 100%, 100%, 50%);
+  width: 133px;
+  height: 136px;
+  position: absolute;
+}
+
+ +

HTML

+ +

Das HTML ist recht einfach:

+ +
<div id="container" onclick="rotate()">
+  <div id="box1" style="left:0px;top:0px;">Top left</div>
+  <div id="box2" style="left:133px;top:0px;">Top right</div>
+  <div id="box3" style="left:0px;top:136px;">Bottom left</div>
+  <div id="box4" style="left:133px;top:136px;">Bottom right</div>
+</div>
+
+ +

Dies platziert die vier Segmente des Bildes in einem 2x2 Raster. Diese vier Segmente sind alle innerhalb eines größeren {{HTMLElement("div")}} Blocks, dessen primärer Zweck das Erhalten von Klickereignissen und deren Senden an den JavaScript Code ist.

+ +

Der JavaScript Code

+ +

Dieser Code verarbeitet das Klickereignis, wenn auf den Container geklickt wird.

+ +
function rotate() {
+  var prevStyle = window.getComputedStyle(document.getElementById("box4"), null).getPropertyValue("background-image");
+
+  // Now that we've saved the last one, start rotating
+
+  for (var i=1; i<=4; i++) {
+    var curId = "box" + i;
+
+    // Shift the background images
+
+    var curStyle = window.getComputedStyle(document.getElementById(curId), null).getPropertyValue("background-image");
+    document.getElementById(curId).style.backgroundImage = prevStyle;
+    prevStyle = curStyle;
+  }
+}
+ +

Dies verwendet {{domxref("window.getComputedStyle()")}}, um den Stil jedes Elements auszulesen und dem nächsten Element zuzuweisen. Beachte, dass es zuvor eine Kopie des letzten Boxstils speichert, da dieser durch den Stil des dritten Elements überschrieben wird. Durch das simple Kopieren der Werte der {{cssxref("background-image")}} Eigenschaft von einem zum nächsten Element durch jeden Mausklick, wird dieser erwünschte Effekt erreicht.

+ +

Wie es aussieht

+ +

{{EmbedLiveSample("Beispiel","400","400")}}

+ +

Bugs

+ + diff --git a/files/de/web/css/-moz-image-region/index.html b/files/de/web/css/-moz-image-region/index.html new file mode 100644 index 0000000000..3a49ad49b0 --- /dev/null +++ b/files/de/web/css/-moz-image-region/index.html @@ -0,0 +1,84 @@ +--- +title: '-moz-image-region' +slug: Web/CSS/-moz-image-region +tags: + - CSS + - Non-standard + - Referenz +translation_of: Web/CSS/-moz-image-region +--- +

{{Non-standard_header}}{{ CSSRef() }}

+ +
Für ein System, das mit beliebigen Hintergründen funktioniert, siehe {{Cssxref("-moz-image-rect")}}.
+ +
 
+ +

Übersicht

+ +

Die -moz-image-region Eigenschaft ist für XUL-Elemente und Pseudo-Elemente, welche ein Bild von der list-style-image Eigenschaft benutzen, gedacht. Die Eigenschaft gibt einen Bereich des Bildes an, welcher anstelle des ganzen Bildes dargestellt wird. Das erlaubt Elementen verschiedene Stücke des gleichen Bildes zu benutzen, um die Leistung zu steigern.
+ Die Syntax ist derjenigen der clip-Property ähnlich. Alle vier Werte sind relativ von der oberen linken Ecke des Bildes.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
auto
+
Standardwert. Es wird nichts ausgeschnitten.
+
rect()
+
Es wird ein Bereich ausgeschnitten, der über die vier Längenangaben definert wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +
#example-button {
+  /* Zeige nur einen 4x4 großen Ausschnitt von der oberen, linken Ecke des Bildes */
+  list-style-image: url("chrome://example/skin/example.png");
+  -moz-image-region: rect(0px, 4px, 4px, 0px);
+}
+#example-button:hover {
+  /* Zeige einen anderen 4x4 großen Ausschnitt vom Bild, wenn sich die Maus über dem Button befindet */
+  -moz-image-region: rect(0px, 8px, 4px, 4px);
+}
+
+
+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer---
Firefox (Gecko)1.0 (1.0)
Opera---
Safari (WebKit)---
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-orient/index.html b/files/de/web/css/-moz-orient/index.html new file mode 100644 index 0000000000..8f650e4ab5 --- /dev/null +++ b/files/de/web/css/-moz-orient/index.html @@ -0,0 +1,73 @@ +--- +title: '-moz-orient' +slug: Web/CSS/-moz-orient +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: Web/CSS/-moz-orient +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -moz-orient CSS Eigenschaft bestimmt die Orientierung des Elements, auf das sie angewendet wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
inline
+
Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.
+
block
+
Das Element wird in der gleichen Richtung wie die Textachse dargestellt: horizontal für horizontale Schreibmodi, vertikal für vertikale Schreibmodi.
+
horizontal
+
Das Element wird horizontal dargestellt.
+
vertical
+
Das Element wird vertikal dargestellt.
+
+ +

Beispiele

+ +

HTML

+ +
<p>
+  The following progress meter
+  is horizontal (the default):
+</p>
+<progress max="100" value="75"></progress>
+
+<p>
+ The following progress meter
+ is vertical:
+</p>
+<progress class="vert" max="100" value="75"></progress>
+ +

CSS

+ +
.vert {
+  -moz-orient: vertical;
+  width: 16px;
+  height: 150px;
+}
+ +

Beispiele

+ +

{{EmbedLiveSample("Beispiele","200","360")}}

+ +

Spezifikationen

+ +

Obwohl für das W3C mit anfänglichem positivem Feedback eingereicht, ist diese Eigenschaft noch nicht Teil einer Spezifikation; aktuell ist sie daher eine Mozilla spezifische Erweiterung (d. h. -moz-orient).

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.-moz-orient")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-outline-radius-bottomleft/index.html b/files/de/web/css/-moz-outline-radius-bottomleft/index.html new file mode 100644 index 0000000000..33caabb749 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-bottomleft/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-bottomleft' +slug: Web/CSS/-moz-outline-radius-bottomleft +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-bottomleft CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken unteren Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius-bottomright/index.html b/files/de/web/css/-moz-outline-radius-bottomright/index.html new file mode 100644 index 0000000000..6603060bd4 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-bottomright/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-bottomright' +slug: Web/CSS/-moz-outline-radius-bottomright +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-bottomright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-bottomright CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten unteren Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius-topleft/index.html b/files/de/web/css/-moz-outline-radius-topleft/index.html new file mode 100644 index 0000000000..1129445f62 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-topleft/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-topleft' +slug: Web/CSS/-moz-outline-radius-topleft +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topleft +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-topleft CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der linken oberen Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius-topright/index.html b/files/de/web/css/-moz-outline-radius-topright/index.html new file mode 100644 index 0000000000..4abd5bea36 --- /dev/null +++ b/files/de/web/css/-moz-outline-radius-topright/index.html @@ -0,0 +1,22 @@ +--- +title: '-moz-outline-radius-topright' +slug: Web/CSS/-moz-outline-radius-topright +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius-topright +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-outline-radius-topright CSS Eigenschaft setzt in Mozilla Anwendungen die Rundung der rechten oberen Ecke des Umrisses.

+ +

{{cssinfo}}

+ +

Siehe die {{cssxref("-moz-outline-radius")}} Eigenschaft für mehr Informationen.

diff --git a/files/de/web/css/-moz-outline-radius/index.html b/files/de/web/css/-moz-outline-radius/index.html new file mode 100644 index 0000000000..45213c6b0b --- /dev/null +++ b/files/de/web/css/-moz-outline-radius/index.html @@ -0,0 +1,141 @@ +--- +title: '-moz-outline-radius' +slug: Web/CSS/-moz-outline-radius +tags: + - CSS + - CSS Referenz + - NeedsLiveSample + - Non-standard +translation_of: Web/CSS/-moz-outline-radius +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

In Mozilla Anwendungen wie Firefox kann die -moz-outline-radius CSS Eigenschaft dazu verwendet werden, um Umrissen runde Ecken zu verleihen. Ein {{cssxref("outline", "Umriss")}} ist eine Linie, die um Elemente gezeichnet wird, außerhalb des Randes, um das Element hervorzuheben.

+ +

-moz-outline-radius ist eine praktische Kurzschreibweise, um die vier Eigenschaften {{cssxref("-moz-outline-radius-topleft")}}, {{cssxref("-moz-outline-radius-topright")}}, {{cssxref("-moz-outline-radius-bottomright")}} und {{cssxref("-moz-outline-radius-bottomleft")}} zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Ein Wert */
+-moz-outline-radius: 25px;
+
+/* Zwei Werte */
+-moz-outline-radius: 25px 1em;
+
+/* Drei Werte */
+-moz-outline-radius: 25px 1em 12%;
+
+/* Vier Werte */
+-moz-outline-radius: 25px 1em 12% 4mm;
+
+/* Globale Werte */
+-moz-outline-radius: inherit;
+-moz-outline-radius: initial;
+-moz-outline-radius: unset;
+
+ +

Werte

+ +
Elliptische Umrisse und <percentage> Werte folgen der in {{cssxref("border-radius")}} beschriebenen Syntax.
+ +

Ein, zwei, drei oder vier <outline-radius> Werte, die jeweils einem dieser Werte entsprechen:

+ +
+
<length>
+
Siehe {{cssxref("<length>")}} für mögliche Werte.
+
<percentage>
+
Eine {{cssxref("<percentage>")}}; siehe {{cssxref("border-radius")}} für Details.
+
+ + + +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
outline: dotted red;
+
+-moz-outline-radius: 12% 1em 25px;
+/* ist gleichbedeutend mit: */
+-moz-outline-radius-topleft: 12%;
+-moz-outline-radius-topright: 1em;
+-moz-outline-radius-bottomright: 35px;
+-moz-outline-radius-bottomleft: 1em;
+ +

Hinweise

+ + + +

Spezifikationen

+ +

Diese Eigenschaft ist in keinem CSS Standard definiert.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.8")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatGeckoMobile("1.8")}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/-moz-stack-sizing/index.html b/files/de/web/css/-moz-stack-sizing/index.html new file mode 100644 index 0000000000..40e35d798f --- /dev/null +++ b/files/de/web/css/-moz-stack-sizing/index.html @@ -0,0 +1,59 @@ +--- +title: '-moz-stack-sizing' +slug: Web/CSS/-moz-stack-sizing +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard + - XUL +translation_of: Archive/Web/CSS/-moz-stack-sizing +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Übersicht

+ +

-moz-stack-sizing ist eine erweiterte CSS Eigenschaft. Normalerweise ändert ein {{XULElem("stack")}} seine Größe, sodass alle seine Kindelemente komplett sichtbar sind. Zum Beispiel führt das Verschieben eines Kindelements ganz nach rechts innerhalb eines Stacks dazu, dass der Stack verbreitert wird, sodass das Kindelement sichtbar bleibt.

+ +

Falls es erwünscht ist, den Stack an der automatischen Größenänderung zur Unterbringung aller Kinder zu hindern, kann -moz-stack-sizing beim Kindelement auf ignore gesetzt werden. Die Eigenschaft wird nicht für den Stack selbst, sondern auf dessen Kindelemente gesetzt. Dies erlaubt es, bestimmte Kindelemente zu ignorieren, die anderen aber nicht.

+ +

Hinweis: In früheren Gecko Versionen war es möglich, das Problem zu umgehen, indem sehr große negative untere und rechte Außenabstände für das Stackelement angegeben wurden und gleichgroße positive untere und rechte Außenabstände für die Kindelemente, die nicht ignoriert werden sollten. (Das Problem betraf nicht Kindelemente, die über oder links vom Stack verschoben wurden.)

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-stack-sizing: stretch-to-fit;
+-moz-stack-sizing: ignore;
+
+/* Globale Werte */
+-moz-stack-sizing: inherit;
+-moz-stack-sizing: initial;
+-moz-stack-sizing: unset;
+
+ +

Werte

+ +
+
stretch-to-fit
+
Das Kindelement beeinflusst die Größe des Stacks.
+
ignore
+
Der Stack wird das Kind bei der Berechnung seiner Größe nicht berücksichtigen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
.mainsheet {
+  -moz-stack-sizing: ignore;
+}
+
+ +

Siehe auch

+ +

{{bug("346189")}}

diff --git a/files/de/web/css/-moz-text-blink/index.html b/files/de/web/css/-moz-text-blink/index.html new file mode 100644 index 0000000000..40ee555a03 --- /dev/null +++ b/files/de/web/css/-moz-text-blink/index.html @@ -0,0 +1,47 @@ +--- +title: '-moz-text-blink' +slug: Web/CSS/-moz-text-blink +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Extensions' +translation_of: Archive/Web/CSS/-moz-text-blink +--- +
{{CSSRef}}{{non-standard_header}}{{deprecated_header}}
+ +

Übersicht

+ +

Die nicht standardisierte -moz-text-blink Mozilla CSS Eigenschaft definiert den Blinkmodus.

+ +
+

Firefox, der der einzige große Browser ist, der diese Eigenschaft unterstützt, hat die Unterstützung in Firefox 26 aufgegeben. Diese Eigenschaft wird nun in keinem Browser mehr unterstützt.

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
none
+
Produziert kein Blinken.
+
blink
+
Text blinkt. Beachte, dass Text nicht blinken zu lassen eine Technik ist, um  Checkpoint 3.3 der WAI-UAAG zu erfüllen.
+
+ +

Beispiel

+ +
.example {
+  -moz-text-blink: blink;
+}
+ +

Spezifikationen

+ +

Diese Eigenschaft wurde in einem alten Entwurf der CSS 3 Text Spezifikation definiert. Neuere Versionen haben die Definition entfernt.

+ +

Browser Kompatibilität

+ +{{Compat("css.properties.-moz-text-blink")}} diff --git a/files/de/web/css/-moz-user-focus/index.html b/files/de/web/css/-moz-user-focus/index.html new file mode 100644 index 0000000000..2c3e77a9da --- /dev/null +++ b/files/de/web/css/-moz-user-focus/index.html @@ -0,0 +1,117 @@ +--- +title: '-moz-user-focus' +slug: Web/CSS/-moz-user-focus +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/-moz-user-focus +--- +
{{Non-standard_header}}
+ +

Übersicht

+ +

Die -moz-user-focus CSS Eigenschaft wird dazu benutzt, anzugeben, ob das Element den Fokus haben kann.

+ +

Durch Setzen ihres Wertes auf ignore kann die Fokussierung des Elements deaktiviert werden, was bedeutet, dass der Benutzer das Element nicht aktivieren kann. Das Element wird in der Tabsequenz ausgelassen.

+ +

{{cssinfo}}

+ +
Hinweis: Diese Eigenschaft funktioniert nicht bei XUL {{XULElem("textbox")}} Elementen, weil die textbox selbst nie fokussiert werden kann. Stattdessen erzeugt XBL ein anonymes HTML {{HTMLElement("input")}} Element innerhalb der textbox und dieses Element ist dasjenige, das den Fokus erhält. Die textbox kann auch daran gehindert werden, den Tastaturfokus zu erhalten, indem sein Tabindex auf -1 gesetzt wird und daran, den Mausfokus zu erhalten, indem die Standardaktion des mousedown Ereignisses verhindert wird.
+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-focus: normal;
+-moz-user-focus: ignore;
+
+/* Globale Werte */
+-moz-user-focus: inherit;
+-moz-user-focus: initial;
+-moz-user-focus: unset;
+
+ +

Werte

+ +
+
ignore
+
Das Element akzeptiert den Tastaturfokus nicht und wird in der Tabreihenfolge ausgelassen.
+
normal
+
Das Element kann den Tastaturfokus akzeptieren.
+
select-after
+
?
+
select-before
+
?
+
select-menu
+
?
+
select-same
+
?
+
select-all
+
?
+
none
+
?
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht Teil einer Spezifikation. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation vorgeschlagen, jedoch von der Arbeitsgruppe abgelehnt.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/-moz-user-input/index.html b/files/de/web/css/-moz-user-input/index.html new file mode 100644 index 0000000000..a9237a1778 --- /dev/null +++ b/files/de/web/css/-moz-user-input/index.html @@ -0,0 +1,64 @@ +--- +title: '-moz-user-input' +slug: Web/CSS/-moz-user-input +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: Web/CSS/-moz-user-input +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

In Mozilla Anwendungen bestimmt die -moz-user-input CSS Eigenschaft, ob ein Element Benutzereingaben zulässt. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation definiert, wurde jedoch von der Arbeitsgruppe verworfen.

+ +

{{cssinfo}}

+ +

-moz-user-input war einer der Vorschläge, der zu der vorgeschlagenen CSS 3 {{cssxref("user-input")}} Eigenschaft führten, welche noch nicht Candidate Recommendation (benötigt Implementierungen) erreicht hat.

+ +

Für Elemente, die normalerweise Benutzereingaben ermöglichen wie beispielsweise {{HTMLElement("textarea")}}, ist der Initialwert von -moz-user-input enabled.

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-input: none;
+-moz-user-input: enabled;
+-moz-user-input: disabled;
+
+/* Globale Werte */
+-moz-user-input: inherit;
+-moz-user-input: initial;
+-moz-user-input: unset;
+
+ +

Werte

+ +
+
none
+
Das Element reagiert nicht auf Benutzereingaben und wird nicht {{Cssxref(":active")}}.
+
enabled
+
Das Element akzeptiert Benutzereingaben. Für Texteingabefelder ist dies das Standardverhalten.
+
disabled
+
Das Element akzeptiert keine Benutzereingaben. Dies ist jedoch insofern nicht dasselbe wie das Setzen von {{XULAttr("disabled")}} auf true, als dass das Element normal dargestellt wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
input.example {
+  /* Der Benutzer kann den Text markieren, ihn jedoch nicht ändern. */
+  -moz-user-input: disabled;
+}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-user-modify/index.html b/files/de/web/css/-moz-user-modify/index.html new file mode 100644 index 0000000000..d1ec135fa0 --- /dev/null +++ b/files/de/web/css/-moz-user-modify/index.html @@ -0,0 +1,133 @@ +--- +title: '-moz-user-modify' +slug: Web/CSS/-moz-user-modify +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/user-modify +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -moz-user-modify Eigenschaft bestimmt, ob der Inhalt eines Elementes vom Benutzer bearbeitet werden kann oder nicht. Diese Eigenschaft ist ähnlich zum {{htmlattrxref("contenteditable")}} Attribut. Eine ähnliche Eigenschaft user-focus wurde in frühen Entwürfen eines Vorläufers der CSS3 UI Spezifikation vorgeschlagen, jedoch von der Arbeitsgruppe verworfen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-moz-user-modify: read-only;
+-moz-user-modify: read-write;
+-moz-user-modify: write-only;
+
+/* Globale Werte */
+-moz-user-modify: inherit;
+-moz-user-modify: initial;
+-moz-user-modify: unset;
+
+ +

Werte

+ +
+
read-only
+
Standardwert. Inhalte sind nur lesbar.
+
read-write
+
Der Benutzer kann Inhalte lesen und schreiben.
+
write-only
+
Der Benutzer kann Inhalte bearbeiten, jedoch nicht lesen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

CSS

+ +
.readwrite {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+}
+
+ +

HTML

+ +
<div class="readwrite">Der Benutzer kann diesen Text ändern.</div>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiel", 300, 30)}}

+ +

Spezifikationen

+ +

user-modify in einem frühen Entwurf der CSS 3 User Interface Spezifikation (Working Draft vom Februar 2000, jetzt überholt durch CSS 3 Basic User Interface).

+ +

Browser Kompatibilität

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("1.0")}} {{property_prefix("-moz")}}{{CompatNo}}{{CompatNo}}3.0 {{property_prefix("-webkit")}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)IE PhoneOpera MobileSafari MobileChrome for Android
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Auch unterstützt: -webkit-user-modify: read-write-plaintext-only (Richtext geht verloren).
+ Diese Eigenschaft wird in Safari 2.0 -khtml-user-modify genannt.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-user-select/index.html b/files/de/web/css/-moz-user-select/index.html new file mode 100644 index 0000000000..aefa619439 --- /dev/null +++ b/files/de/web/css/-moz-user-select/index.html @@ -0,0 +1,55 @@ +--- +title: '-moz-user-select' +slug: Web/CSS/-moz-user-select +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' +translation_of: Web/CSS/user-select +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

In Mozilla Anwendungen steuert die -moz-user-select Eigenschaft, ob und wie ein Text ausgewählt werden kann.

+ + + +

Syntax

+ +
-moz-user-select: text | all | none| -moz-none | inherit
+
+ +

Werte

+ +
+
text
+
Der Text kann vom Benutzer ausgewählt werden.
+
all
+
Bei einem einfachem Klick auf das Element wird der gesamte Text ausgewählt. Bei einem Doppelklick auf das Element wird der höchste Vorfahr ausgewählt.
+
none
+
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Wird jedoch eine Auswahl über das DOM getätigt, sind diese Elemente darin enthalten.
+
-moz-none
+
Der Text eines Elements und dessen Kindelemente können nicht ausgewählt werden. Die Auswahl kann bei Kindelementen aktiviert werden, wenn dort -moz-user-select: text festgelegt wird.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
/* Schaltet Textauswahl ab */
+-moz-user-select: none
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-moz-window-shadow/index.html b/files/de/web/css/-moz-window-shadow/index.html new file mode 100644 index 0000000000..9571b99e0d --- /dev/null +++ b/files/de/web/css/-moz-window-shadow/index.html @@ -0,0 +1,53 @@ +--- +title: '-moz-window-shadow' +slug: Web/CSS/-moz-window-shadow +tags: + - CSS + - CSS Eigenschaft + - NeedsCompatTable + - Non-standard + - Referenz + - XUL +translation_of: Archive/Web/CSS/-moz-window-shadow +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Übersicht

+ +

Die -moz-window-shadow CSS Eigenschaft bestimmt, ob ein Fenster einen Schatten wirft oder nicht. Sie funktioniert nur unter Mac OS X.

+ +
+

Diese Eigenschaft ist nicht standardisiert und kann ab Firefox 44 nicht mehr in Webseiten verwendet werden.

+
+ +

{{cssinfo}}

+ +

Firefox 3 hat die Unterstützung für transparente Fenster unter Mac OS X hinzugefügt. Jedoch waren für diese Fenster Schatten deaktiviert und es gab keine Möglichkeit, diese zu aktivieren.

+ +

In Firefox 3.5 wurde der Standardwert geändert; alle Fenster haben nun einen Schatten. Es wurde die -moz-window-shadow CSS Eigenschaft eingeführt, um umgewollte Schatten ausschalten zu können.

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
default
+
Das Fenster wirft einen Schatten mit dem Standard Fensterschattenstil.
+
menu {{gecko_minversion_inline("2.0")}}
+
Das Fenster hat einen Schatten, der für Menüs passend ist.
+
tooltip {{gecko_minversion_inline("2.0")}}
+
Das Fenster hat einen Schatten, der für Tooltips passend ist.
+
sheet {{gecko_minversion_inline("2.0")}}
+
Das Fenster hat einen Schatten, der für Sheetfenster passend ist.
+
none
+
Das Fenster hat keinen Schatten.
+
+ +

Beispiele

+ +
.KUI-panel {
+  -moz-window-shadow: none;
+}
+
diff --git a/files/de/web/css/-webkit-box-reflect/index.html b/files/de/web/css/-webkit-box-reflect/index.html new file mode 100644 index 0000000000..08b974fd4e --- /dev/null +++ b/files/de/web/css/-webkit-box-reflect/index.html @@ -0,0 +1,116 @@ +--- +title: '-webkit-box-reflect' +slug: Web/CSS/-webkit-box-reflect +tags: + - CSS + - Eigenschaft + - Non-standard + - Referenz +translation_of: Web/CSS/-webkit-box-reflect +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die -webkit-box-reflect CSS Eigenschaft reflektiert den Inhalt eines Elements in einer bestimmten Richtung.

+ +
Hinweis: Dieses Feature ist nicht dazu gedacht, auf Webseiten verwendet zu werden. Um Reflektionen im Web zu erreichen, ist der Standardweg die Benutzung der CSS {{cssxref("element", "element()")}} Funktion.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Richtungswerte */
+-webkit-box-reflect: above;
+-webkit-box-reflect: below;
+-webkit-box-reflect: left;
+-webkit-box-reflect: right;
+
+/* Versatzwert */
+-webkit-box-reflect: below 10px;
+
+/* Maskenwert */
+-webkit-box-reflect: below 0 linear-gradient(transparent, white);
+
+/* Globale Werte */
+-webkit-box-reflect: inherit;
+-webkit-box-reflect: initial;
+-webkit-box-reflect: unset;
+
+ +

Werte

+ +
+
above, below, right, left
+
Sind Schlüsselwörter, die angeben, in welche Richtung die Reflektion stattfinden soll.
+
<length>
+
Gibt die Größe der Reflektion an.
+
<image>
+
Beschreibt die Maske, die auf die Reflektion angewendet werden soll.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Diese Eigenschaft ist nicht standardisiert und wird nicht Teil von CSS sein. Der Standardweg, um eine Reflektion in CSS zu erzeugen, ist die Verwendung der CSS Funktion {{cssxref("element", "element()")}}.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatChrome("4.0")}}{{CompatNo}}{{CompatOpera("15.0")}}{{CompatSafari("4.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatAndroid("2.1")}}{{CompatNo}}22.0 {{CompatVersionUnknown}}3.2 {{CompatVersionUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-mask-origin/index.html b/files/de/web/css/-webkit-mask-origin/index.html new file mode 100644 index 0000000000..21f3b18534 --- /dev/null +++ b/files/de/web/css/-webkit-mask-origin/index.html @@ -0,0 +1,100 @@ +--- +title: '-webkit-mask-origin' +slug: Web/CSS/-webkit-mask-origin +tags: + - CSS + - Referenz +translation_of: Web/CSS/mask-origin +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -webkit-mask-origin CSS Eigenschaft bestimmt den Ursprungspunkt des Maskenbildes. Der Wert der {{cssxref("-webkit-mask-position")}} Eigenschaft wird relativ zum Wert dieser Eigenschaft interpretiert. Diese Eigenschaft wird nicht angewendet, wenn -webkit-mask-attachment fixed ist.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +
+
padding
+
Standardwert. Die Position des Maskenbildes ist relativ zum Innenabstand. (Für einzelne Boxen ist "0 0" die linke obere Ecke des Randes des Innenabstands, "100% 100%" ist die untere rechte Ecke.)
+
border
+
Die Position des Maskenbildes ist relativ zum Rand.
+
content
+
Das Maskenbild ist relativ zum Inhalt.
+
+ +

Beispiele

+ +
.example {
+  border: 10px double;
+  padding: 10px;
+  -webkit-mask-image: url('mask.png');
+
+  /* Das Maskenbild ist innerhalb des Innenabstands. */
+  -webkit-mask-origin: content;
+}
+
+ +
div {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-origin: padding, content;
+}
+
+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Siehe auch

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}},{{cssxref("-webkit-mask-composite")}}, {{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-clip")}}

diff --git a/files/de/web/css/-webkit-mask-position-x/index.html b/files/de/web/css/-webkit-mask-position-x/index.html new file mode 100644 index 0000000000..04586fef38 --- /dev/null +++ b/files/de/web/css/-webkit-mask-position-x/index.html @@ -0,0 +1,124 @@ +--- +title: '-webkit-mask-position-x' +slug: Web/CSS/-webkit-mask-position-x +translation_of: Web/CSS/-webkit-mask-position-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

 

+ +

Die CSS-Eigenschaft -webkit-mask-position-x legt die anfängliche horizontale Position eines Maskenbilds (Bild mit einer Maske) fest.

+ +
/* Keyword values */
+-webkit-mask-position-x: left;
+-webkit-mask-position-x: center;
+-webkit-mask-position-x: right;
+
+/* <percentage> values */
+-webkit-mask-position-x: 100%;
+-webkit-mask-position-x: -50%;
+
+/* <length> values */
+-webkit-mask-position-x: 50px;
+-webkit-mask-position-x: -1cm;
+
+/* Multiple values values */
+-webkit-mask-position-x: 50px, 25%, -3em;
+
+/* Global values */
+-webkit-mask-position-x: inherit;
+-webkit-mask-position-x: initial;
+-webkit-mask-position-x: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
<length-percentage>
+
Eine Länge, die die Position der linken Kante des Bildes relativ zur linken Füllkante der Box angibt. Die Prozentsätze werden anhand der horizontalen Abmessung des Box-Padding-Bereichs berechnet. Das heißt, ein Wert von 0% bedeutet, dass die linke Kante des Bildes mit der linken Füllkante der Box ausgerichtet ist und ein Wert von 100% bedeutet, dass die rechte Kante des Bildes mit der rechten Füllkante der Box ausgerichtet ist.
+
left
+
Gleichwertig mit 0%.
+
center
+
Gleichwertig mit 50%.
+
right
+
Gleichwertig mit 100%.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: right;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-x: 25%;
+}
+
+ +

Spezifikation

+ +

Kein Teil einer Spezifikation.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-y")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/de/web/css/-webkit-mask-position-y/index.html b/files/de/web/css/-webkit-mask-position-y/index.html new file mode 100644 index 0000000000..d0c972990c --- /dev/null +++ b/files/de/web/css/-webkit-mask-position-y/index.html @@ -0,0 +1,122 @@ +--- +title: '-webkit-mask-position-y' +slug: Web/CSS/-webkit-mask-position-y +translation_of: Web/CSS/-webkit-mask-position-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die CSS-Eigenschaft -webkit-mask-position-y legt die anfängliche vertikale Position eines Maskenbilds (Bild mit einer Maske) fest.

+ +
/* Keyword values */
+-webkit-mask-position-y: top;
+-webkit-mask-position-y: center;
+-webkit-mask-position-y: bottom;
+
+/* <percentage> values */
+-webkit-mask-position-y: 100%;
+-webkit-mask-position-y: -50%;
+
+/* <length> values */
+-webkit-mask-position-y: 50px;
+-webkit-mask-position-y: -1cm;
+
+/* Multiple values values */
+-webkit-mask-position-y: 50px, 25%, -3em;
+
+/* Global values */
+-webkit-mask-position-y: inherit;
+-webkit-mask-position-y: initial;
+-webkit-mask-position-y: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
<length-percentage>
+
Eine Länge, die die Position der oberen Seite des Bildes relativ zur oberen Kante der Box angibt. Die Prozentsätze werden anhand der vertikalen Abmessung des Box-Padding-Bereichs berechnet. Ein Wert von 0% bedeutet, dass der obere Rand des Bilds mit der oberen Füllkante der Box ausgerichtet ist und ein Wert von 100% bedeutet, dass die untere Kante des Bildes mit der unteren Füllkante der Box ausgerichtet ist.
+
top
+
Gleichwertig zu 0%.
+
bottom
+
Gleichwertig zu  100%.
+
center
+
Gleichwertig zu 50%.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
.exampleOne {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: bottom;
+}
+
+.exampleTwo {
+  -webkit-mask-image: url(mask.png);
+  -webkit-mask-position-y: 25%;
+}
+
+ +

Spezifikation

+ +

Kein Teil einer Spezifikation.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-position")}}, {{cssxref("-webkit-mask-position-x")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}

diff --git a/files/de/web/css/-webkit-mask-repeat-x/index.html b/files/de/web/css/-webkit-mask-repeat-x/index.html new file mode 100644 index 0000000000..15ab8b1f66 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat-x/index.html @@ -0,0 +1,128 @@ +--- +title: '-webkit-mask-repeat-x' +slug: Web/CSS/-webkit-mask-repeat-x +translation_of: Web/CSS/-webkit-mask-repeat-x +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

 

+ +

Die Eigenschaft -webkit-mask-repeat-x gibt an, ob und wie ein Maskenbild horizontal wiederholt wird.

+ +
/* Keyword values */
+-webkit-mask-repeat-x: repeat;
+-webkit-mask-repeat-x: no-repeat;
+-webkit-mask-repeat-x: space;
+-webkit-mask-repeat-x: round;
+
+/* Multiple values */
+-webkit-mask-repeat-x: repeat, no-repeat, space;
+
+/* Global values */
+-webkit-mask-repeat-x: inherit;
+-webkit-mask-repeat-x: initial;
+-webkit-mask-repeat-x: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird sowohl horizontal als auch vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht wiederholt, nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht angezeigt.
+
space
+
Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild sind an jeder Seite des Elements angeheftet und Leerräume sind gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.
+
round
+
Wenn der erlaubte Platz vergrößert wird, werden sich die wiederholten Bilder dehnen (ohne Lücken zu hinterlassen), bis Platz für einen weiteren Platz vorhanden ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Breite von 260 Pixeln, das dreimal wiederholt wird, könnte sich dehnen, bis jede Wiederholung 300 Pixel breit ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf 225px komprimieren.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiel

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-x: no-repeat;
+}
+
+ +

Support für mehrere Bildmasken

+ +

Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <repeat-style> angeben:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-x: repeat, space;
+}
+
+ +

Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.

+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-y")}}

diff --git a/files/de/web/css/-webkit-mask-repeat-y/index.html b/files/de/web/css/-webkit-mask-repeat-y/index.html new file mode 100644 index 0000000000..e969fc9482 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat-y/index.html @@ -0,0 +1,126 @@ +--- +title: '-webkit-mask-repeat-y' +slug: Web/CSS/-webkit-mask-repeat-y +translation_of: Web/CSS/-webkit-mask-repeat-y +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die Eigenschaft -webkit-mask-repeat-y gibt an, ob und wie ein Maskenbild vertikal wiederholt wird.

+ +
/* Keyword values */
+-webkit-mask-repeat-y: repeat;
+-webkit-mask-repeat-y: no-repeat;
+-webkit-mask-repeat-y: space;
+-webkit-mask-repeat-y: round;
+
+/* Multiple values */
+-webkit-mask-repeat-y: repeat, no-repeat, space;
+
+/* Global values */
+-webkit-mask-repeat-y: inherit;
+-webkit-mask-repeat-y: initial;
+-webkit-mask-repeat-y: unset;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht vertikal wiederholt, nur eine Kopie des Maskenbildes wird in vertikaler Richtung gezeichnet. Der vertikale Rest des Inhalts des maskierten Elements wird nicht angezeigt.
+
space
+
Das Bild wird so oft wie möglich wiederholt, ohne zu beschneiden. Das erste und das letzte Bild werden am oberen und unteren Rand des Elements fixiert, und Leerräume werden gleichmäßig zwischen den Bildern verteilt. Die Eigenschaft {{cssxref ("mask-position")}} wird ignoriert, es sei denn, nur ein Bild kann ohne Übersteuerung angezeigt werden. Der einzige Fall, in dem Clipping mit Leerzeichen auftritt, ist, wenn nicht genügend Platz vorhanden ist, um ein Bild anzuzeigen.
+
round
+
Wenn der erlaubte vertikale Raum größer wird, dehnen sich die wiederholten Bilder (ohne Lücken), bis Platz für einen weiteren Platz ist. Wenn das nächste Bild hinzugefügt wird, werden alle aktuellen komprimiert, um Platz zu schaffen. Beispiel: Ein Bild mit einer ursprünglichen Höhe von 260 Pixeln, das dreimal wiederholt wird, kann sich dehnen, bis jede Wiederholung 300 Pixel hoch ist, und dann wird ein weiteres Bild hinzugefügt. Sie werden dann auf eine Höhe von 225px komprimieren.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiel

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: repeat;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat-y: no-repeat;
+}
+
+ +

Support für mehrere Bildmasken

+ +

Sie können für jedes Maskenbild, getrennt durch Kommas, einen anderen <repeat-style> angeben:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat-y: repeat, space;
+}
+
+ +

Jedes Bild wird mit dem entsprechenden Wiederholungsstil verglichen, vom ersten bis zum letzten.

+ +

Browser-Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Während die Eigenschaft selbst erkannt wird, akzeptiert sie keine Werte.

+ +

Sehenswert

+ +

{{cssxref("-webkit-mask-repeat")}}, {{cssxref("-webkit-mask-repeat-x")}}

diff --git a/files/de/web/css/-webkit-mask-repeat/index.html b/files/de/web/css/-webkit-mask-repeat/index.html new file mode 100644 index 0000000000..cef03cef91 --- /dev/null +++ b/files/de/web/css/-webkit-mask-repeat/index.html @@ -0,0 +1,127 @@ +--- +title: '-webkit-mask-repeat' +slug: Web/CSS/-webkit-mask-repeat +tags: + - CSS +translation_of: Web/CSS/mask-repeat +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-mask-repeat Eigenschaft gibt an, ob und wie ein Maskenbild wiederholt (gekachelt) wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Schlüsselwortwerte */
+-webkit-mask-repeat: repeat;
+-webkit-mask-repeat: repeat-x;
+-webkit-mask-repeat: repeat-y;
+-webkit-mask-repeat: no-repeat;
+
+/* Mehrer Schlüsselwortwerte */
+-webkit-mask-repeat: repeat, repeat-x, no-repeat;
+
+/* Globale Werte */
+-webkit-mask-repeat: inherit;
+-webkit-mask-repeat: initial;
+-webkit-mask-repeat: unset;
+
+ +

Werte

+ +
+
repeat
+
Das Maskenbild wird horizontal und vertikal wiederholt.
+
repeat-x
+
Das Maskenbild wird nur horizontal wiederholt.
+
repeat-y
+
Das Maskenbild wird nur vertikal wiederholt.
+
no-repeat
+
Das Maskenbild wird nicht wiederholt; nur eine Kopie des Maskenbildes wird gezeichnet. Der Rest des Inhalts des maskierten Elements wird nicht dargestellt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
.exampleone {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: repeat-x;
+}
+
+.exampletwo {
+  -webkit-mask-image: url('mask.png');
+  -webkit-mask-repeat: no-repeat;
+}
+
+ +

Unterstützung mehrerer Maskenbilder

+ +

Für jedes Maskenbild kann ein unterschiedlicher <repeat-style> Wert angegeben werden, der durch Kommas getrennt wird:

+ +
.examplethree {
+  -webkit-mask-image: url('mask1.png'), url('mask2.png');
+  -webkit-mask-repeat: repeat-x, repeat-y;
+}
+
+ +

Jedes Bild wird dem zugehörigen Wiederholungsstil zugeordnet, vom zuerst bis zum zuletzt angegebenen.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatNo}}{{CompatNo}}{{CompatNo}}4.0
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung2.1{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}3.2
+
+ +

Siehe auch

+ +

{{cssxref("-webkit-mask")}}, {{cssxref("-webkit-mask-box-image")}}, {{cssxref("-webkit-mask-clip")}}, {{cssxref("-webkit-mask-origin")}}, {{cssxref("-webkit-mask-attachment")}}, {{cssxref("-webkit-mask-image")}}, {{cssxref("-webkit-mask-composite")}}

diff --git a/files/de/web/css/-webkit-overflow-scrolling/index.html b/files/de/web/css/-webkit-overflow-scrolling/index.html new file mode 100644 index 0000000000..e563f1bc33 --- /dev/null +++ b/files/de/web/css/-webkit-overflow-scrolling/index.html @@ -0,0 +1,95 @@ +--- +title: '-webkit-overflow-scrolling' +slug: Web/CSS/-webkit-overflow-scrolling +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/-webkit-overflow-scrolling +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-overflow-scrolling CSS Eigenschaft bestimmt, ob Touchgeräte impulsbasiertes Scrolling für ein Element verwenden oder nicht.

+ +

Werte

+ +
+
auto
+
"Reguläres" Scrolling wird verwendet, wobei der Inhalt sofort aufhört zu scrollen, wenn der Finger vom Touchscreen entfernt wird.
+
touch
+
Impulsbasiertes Scrolling wird verwendet, wobei der Inhalt für einen Moment weiterscrollt nachdem die Scrollgeste beendet und der Finger vom Touchscreen entfernt wurde. Die Geschwindigkeit und Dauer des Weiterscrollens ist proportional zur Stärke der Scrollgeste. Erzeugt auch einen neuen Stackingkontext.
+
+ +

Beispiele

+ +
-webkit-overflow-scrolling: touch; /* lets it scroll lazy */
+
+-webkit-overflow-scrolling: auto; /* stop scrolling immediately */
+
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}5.0
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-print-color-adjust/index.html b/files/de/web/css/-webkit-print-color-adjust/index.html new file mode 100644 index 0000000000..37712aa627 --- /dev/null +++ b/files/de/web/css/-webkit-print-color-adjust/index.html @@ -0,0 +1,97 @@ +--- +title: '-webkit-print-color-adjust' +slug: Web/CSS/-webkit-print-color-adjust +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsExample + - Non-standard + - Web +translation_of: Web/CSS/-webkit-print-color-adjust +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Die -webkit-print-color-adjust Eigenschaft ist eine nicht standardisierte CSS Erweiterung, die dazu verwendet werden kann, um das Drucken von Hintergrundfarben und -bildern in Browsern zu erzwingen, die auf der WebKit Engine basieren.

+ +

Syntax

+ +
-webkit-print-color-adjust: economy | exact
+
+ +

Werte

+ +
+
economy
+
Normales Verhalten. Hintergrundfarben und -bilder werden nur gedruckt, falls der Benutzer dies explizit in den Druckeinstellungen seines Browsers erlaubt.
+
exact
+
Hintergrundfarben und -bilder des Elements, auf den die Regel zutrifft, werden immer gedruckt. Die Druckeinstellungen des Benutzers werden überschrieben.
+
+ +

Vererbung

+ +

Diese Eigenschaft wird vererbt.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatVersionUnknown}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}6.0[2]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}
+
+ +

[1] Chrome druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

+ +

Wenn Hintergrundbilder zugeschnitten sind (zum Beispiel wenn Sprites als Hintergrundbilder verwendet werden), werden sie wegen Chromium Bug 131054 verzerrt dargestellt, wenn sie im Chrome Browser mit -webkit-print-color-adjust: exact gedruckt werden. Einfarbige Hintergründe und Hintergrundbilder, die nicht zugeschnitten sind (d. h. sie haben eine kleinere Breite und Höhe als das Element, auf das sie angewendet werden), werden korrekt gedruckt.

+ +

[2] Safari druckt keine Hintergründe des {{HTMLElement("body")}} Elements. Falls diese Eigenschaft für das <body> Element auf exact gesetzt ist, wird sie nur auf dessen Unterknoten angewendet.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-tap-highlight-color/index.html b/files/de/web/css/-webkit-tap-highlight-color/index.html new file mode 100644 index 0000000000..f74eca6d7e --- /dev/null +++ b/files/de/web/css/-webkit-tap-highlight-color/index.html @@ -0,0 +1,33 @@ +--- +title: '-webkit-tap-highlight-color' +slug: Web/CSS/-webkit-tap-highlight-color +translation_of: Web/CSS/-webkit-tap-highlight-color +--- +
{{ CSSRef() }}
+ +

{{ Non-standard_header() }}

+ +

-webkit-tap-highlight-color ist eine nicht standardmäßige CSS-Eigenschaft, mit der die Farbe der Hervorhebung festgelegt wird, die während des Tippens über einen Link angezeigt wird. Die Markierung zeigt dem Benutzer an, dass sein Antippen erfolgreich erkannt wird, und zeigt an, auf welches Element er tippt.

+ +
-webkit-tap-highlight-color: red;
+
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +

A {{Cssxref("color value")}}.

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Kein Teil einer Spezifikation. Apple hat eine Beschreibung im Safari Web Content Guide.

+ +

Browser-Kompatibilität

+ +

Diese Eigenschaft wird von WebKit / Safari, Blink / Chrome und einigen Versionen von Internet Explorer und Microsoft Edge unterstützt.

diff --git a/files/de/web/css/-webkit-text-fill-color/index.html b/files/de/web/css/-webkit-text-fill-color/index.html new file mode 100644 index 0000000000..e3a7cc06e6 --- /dev/null +++ b/files/de/web/css/-webkit-text-fill-color/index.html @@ -0,0 +1,83 @@ +--- +title: '-webkit-text-fill-color' +slug: Web/CSS/-webkit-text-fill-color +tags: + - CSS + - CSS Eigenschaft + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/-webkit-text-fill-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-fill-color CSS Eigenschaft bestimmt die Füllfarbe von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.

+ +

Spezifikationen

+ +

Nicht Teil irgendeiner Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-text-stroke-color/index.html b/files/de/web/css/-webkit-text-stroke-color/index.html new file mode 100644 index 0000000000..1a220a1710 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke-color/index.html @@ -0,0 +1,108 @@ +--- +title: '-webkit-text-stroke-color' +slug: Web/CSS/-webkit-text-stroke-color +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: Web/CSS/-webkit-text-stroke-color +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-stroke-color CSS Eigenschaft definiert die Umrandungsfarbe von Textzeichen. Falls diese Eigenschaft nicht gesetzt ist, wird der Wert der {{cssxref("color")}} Eigenschaft verwendet.

+ +

Syntax

+ +
/* <color> Werte */
+-webkit-text-stroke-color: red;
+-webkit-text-stroke-color: #e08ab4;
+-webkit-text-stroke-color: rgb(200, 100, 0);
+
+/* Globale Werte */
+-webkit-text-stroke-color: inherit;
+-webkit-text-stroke-color: initial;
+-webkit-text-stroke-color: unset;
+
+ +

Werte

+ +
+
<color>
+
Die Farbe der Umrandung.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung von -webkit-text-stroke-color in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-text-stroke-width/index.html b/files/de/web/css/-webkit-text-stroke-width/index.html new file mode 100644 index 0000000000..e06b5b1337 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke-width/index.html @@ -0,0 +1,85 @@ +--- +title: '-webkit-text-stroke-width' +slug: Web/CSS/-webkit-text-stroke-width +tags: + - CSS + - Experimentell + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - Non-standard +translation_of: Web/CSS/-webkit-text-stroke-width +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-stroke-width CSS Eigenschaft definiert die Strichbreite des Texts.

+ +

Der Standardwert dieser Eigenschaft ist null.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-text-stroke/index.html b/files/de/web/css/-webkit-text-stroke/index.html new file mode 100644 index 0000000000..056b62d357 --- /dev/null +++ b/files/de/web/css/-webkit-text-stroke/index.html @@ -0,0 +1,126 @@ +--- +title: '-webkit-text-stroke' +slug: Web/CSS/-webkit-text-stroke +tags: + - CSS + - Eigenschaft + - Non-standard + - Referenz +translation_of: Web/CSS/-webkit-text-stroke +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-text-stroke CSS Eigenschaft gibt die Breite und Farbe der Umrandung von Textzeichen an. Sie ist eine Kurzschreibweise für die Langschreibungseigenschaften {{cssxref("-webkit-text-stroke-width")}} und {{cssxref("-webkit-text-stroke-color")}}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Breiten- und Farbwerte */
+-webkit-text-stroke: 4px navy;
+
+/* Globale Werte */
+-webkit-text-stroke: inherit;
+-webkit-text-stroke: initial;
+-webkit-text-stroke: unset;
+
+ +

Werte

+ +
+
<length>
+
Die Breite der Umrandung.
+
<color>
+
Die Farbe der Umrandung.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +

HTML

+ +
<p id="example">Die Umrandung dieses Texts ist rot.</p>
+ +

CSS

+ +
#example {
+  font-size: 50px;
+  margin: 0;
+  -webkit-text-stroke: 2px red;
+}
+ +

{{EmbedLiveSample("Beispiel", 650, 60)}}

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung4{{CompatGeckoDesktop("48.0")}}[1]{{CompatNo}}153.1
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4{{CompatGeckoMobile("48.0")}}[1]{{CompatNo}}364.1
+
+ +

[1] Ab Gecko 48 hinter der Einstellung layout.css.prefixes.webkit implementiert, dort noch standarmäßig false;
+ ab Gecko 49 {{geckoRelease("49.0")}} standardmäßig true.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/-webkit-touch-callout/index.html b/files/de/web/css/-webkit-touch-callout/index.html new file mode 100644 index 0000000000..af79615358 --- /dev/null +++ b/files/de/web/css/-webkit-touch-callout/index.html @@ -0,0 +1,108 @@ +--- +title: '-webkit-touch-callout' +slug: Web/CSS/-webkit-touch-callout +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsLiveSample + - Referenz +translation_of: Web/CSS/-webkit-touch-callout +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die -webkit-touch-callout CSS Eigenschaft steuert die Anzeige der Standard-Textbox, die angezeigt wird, wenn das Touchziel berührt und gehalten wird.

+ +

Wenn das Ziel in iPhone OS berührt und gehalten wird, zeigt Safari eine Textbox-Information über den Link an. Diese Eigenschaft erlaubt es, dieses Verhalten zu deaktivieren.

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+-webkit-touch-callout: default;
+-webkit-touch-callout: none;
+
+/* Globale Werte */
+-webkit-touch-callout: initial;
+-webkit-touch-callout: inherit;
+-webkit-touch-callout: unset;
+ +

Werte

+ +
+
default
+
Die Standard-Textbox wird angezeigt.
+
none
+
Die Textbox ist deaktiviert.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
.example {
+  -webkit-touch-callout: none;
+}
+
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Apple hat eine Beschreibung in der Safari CSS Referenz.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}[1]
+
+ +

[1] Die -webkit-touch-callout Eigenschaft wurde in iOS 2.0 implementiert und später zu WebKit hinzugefügt ({{webkitbug(121507)}}).

diff --git a/files/de/web/css/@charset/index.html b/files/de/web/css/@charset/index.html new file mode 100644 index 0000000000..289dc8117b --- /dev/null +++ b/files/de/web/css/@charset/index.html @@ -0,0 +1,79 @@ +--- +title: '@charset' +slug: Web/CSS/@charset +tags: + - CSS + - CSS At-Regel + - Layout + - Referenz + - Web +translation_of: Web/CSS/@charset +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die @charset CSS At-Regel gibt die Zeichenkodierung an, die in dem Stylesheet verwendet wird. Sie muss das erste Element im Stylesheet sein und ihr darf kein Zeichen vorangestellt werden; da sie kein verschachtelter Ausdruck ist, kann sie nicht innerhalb bedingten Gruppen At-Regeln verwendet werden. Falls mehrere @charset At-Regeln definiert sind, wird nur die erste verwendet. Und sie kann auch nicht innerhalb eines style Attributs eines HTML Elements oder innerhalb des {{ HTMLElement("style") }} Elements verwendet werden, in dem die Zeichenkodierung der HTML Seite ausschlaggebend ist.

+ +

Diese At-Regel ist nützlich, wenn nicht-ASCII Zeichen in manchen CSS Eigenschaften wie {{ cssxref("content") }} verwendet werden.

+ +

Da es mehrere Möglichkeiten gibt, die Zeichenkodierung eines Stylesheets anzugeben, versucht der Browser die folgenden Methoden in der angegebenen Reihenfolge (und stoppt, sobald eine ein Ergebnis zurückliefert):

+ +
    +
  1. Der Wert des Unicode Bytereihenfolge Zeichens, das am Anfang der Datei gesetzt ist.
    2. +
  2. Der Wert, der durch das charset Attribut des Content-Type: HTTP-Headers angegeben wurde oder das Äquivalent hierzu im Protokoll, das verwendet wird, um das Stylesheet zu übertragen.
    3. +
  3. Die @charset CSS At-Regel.
    4. +
  4. Benutze die Zeichenkodierung, die durch das referenzierte Dokument angegeben wird: Das charset Attribut des {{ HTMLElement("link") }} Elements. Diese Methode ist veraltet in HTML5 und darf nicht verwendet werden.
    5. +
  5. Nimm an, dass das Dokument UTF-8 kodiert ist.
    6. +
+ +

Syntax

+ +
@charset "UTF-8";
+@charset 'iso-8859-15';
+
+ +
+
charset
+
Ist ein {{cssxref("<string>")}}, der die zu verwendende Zeichenkodierung angibt. Dies muss der Name einer websicheren Zeichenkodierung sein, wie sie in der IANA Registrierung definiert wird. Falls mehrere Namen mit einer Kodierung assoziiert werden, wird nur der verwendet, der mit preferred gekennzeichnet ist.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Gültige Bespiele:

+ +
@charset "UTF-8";       /* Setzt die Kodierung des Stylesheets auf Unicode UTF-8 */
+@charset 'iso-8859-15'; /* Setzt die Kodierung des Stylesheets auf Latin-9 (Westeuropäische Sprachen, mit Eurozeichen) */
+
+ +

Ungültige Beispiele:

+ +
 @charset "UTF-8";      /* Ungültig, da ein Zeichen (Leerzeichen) vor der At-Regel steht */
+@charset UTF-8;         /* Ungültig, da kein ' oder " angegeben wurde, die Zeichenkodierung ist kein CSS {{cssxref("<string>")}} */
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.charset")}} diff --git a/files/de/web/css/@document/index.html b/files/de/web/css/@document/index.html new file mode 100644 index 0000000000..f9d47540fb --- /dev/null +++ b/files/de/web/css/@document/index.html @@ -0,0 +1,71 @@ +--- +title: '@document' +slug: Web/CSS/@document +tags: + - At-Regel + - CSS + - Referenz +translation_of: Web/CSS/@document +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die @document CSS at-rule beschränkt die Stilregeln, die sie beinhaltet, basierend auf dem URL des Dokuments. Sie wurde hauptsächlich für Benutzerstylesheets entworfen. Eine @document Regel kann eine oder mehrere Matchingfunktionen definieren. Falls eine der Funktionen auf einen URL passt, wird die Regel auf diesen URL angewandt.

+ +

Der Hauptanwendungsfall ist für benutzerdefinierte Stylesheets, jedoch kann diese Regel auch für autordefinierte Stylesheets verwendet werden.

+ +

Die verfügbaren Funktionen sind:

+ + + +

Syntax

+ +

Die angegebenen Werte für die url(), url-prefix() und domain() Funktionen können optional durch einfache oder doppelte Anführungszeichen umschlossen werden. Die angegebenen WErte für die regexp() Funktion müssen durch Anführungenzeichen umschlossen sein.

+ +

Für die regexp() Funktion escapte Werte müssen zusätzlich vom CSS escapt werden. Zum Beispiel matcht ein . (Punkt) ein beliebiges Zeichen in regulären Ausdrücken. Um einen Punkt zu matchen, muss er zunächst anhand der Regeln für reguläre Ausdrücke escapt werden (also \.) und anschließend durch die CSS Regeln (also \\.).

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
@document url(http://www.w3.org/),
+               url-prefix(http://www.w3.org/Style/),
+               domain(mozilla.org),
+               regexp("https:.*")
+{
+  /* CSS Regeln hier werden angewandt auf:
+     - Die Seite "http://www.w3.org/".
+     - Jede Seite, deren URL mit "http://www.w3.org/Style/" beginnt
+     - Jede Seite, deren URLs Host "mozilla.org" ist oder mit ".mozilla.org" endet
+     - Jede Seite, deren URL mit "https:" beginnt */
+
+  /* macht die oben erwähnten Seiten wirklich hässlich */
+  body {
+    color: purple;
+    background: yellow;
+  }
+}
+
+ +

Spezifikationen

+ +

Ursprünglich in {{SpecName('CSS3 Conditional', '', '')}}, wurde @document nach Level 4 verschoben.

+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.document")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/@import/index.html b/files/de/web/css/@import/index.html new file mode 100644 index 0000000000..acff38aebc --- /dev/null +++ b/files/de/web/css/@import/index.html @@ -0,0 +1,79 @@ +--- +title: '@import' +slug: Web/CSS/@import +tags: + - '@-Regel' + - CSS + - Referenz +translation_of: Web/CSS/@import +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die @import CSS @-Regel wird verwendet, um Stilregeln anderer Stylesheets zu importieren. Diese Regeln müssen allen anderen Typen von Regeln vorangehen außer {{cssxref("@charset")}} Regeln; da sie kein verschachteltes Statement ist, kann @import nicht innerhalb bedingter Gruppen-@-Regeln verwendet werden.

+ +

Damit User Agents verhindern können, Ressourcen für nicht unterstützte Medientypen zu holen, können Autoren medienabhängige @import Regeln definieren. Diese bedingten Importe definieren kommaseparierte Media Queries nach dem URI. Falls keine Media Query angegeben wurde, ist der Import unbedingt. Die Angabe von all für das Medium hat denselben Effekt.

+ +

Syntax

+ +
@import url;
+@import url list-of-media-queries;
+
+ +

wobei:

+ +
+
url
+
Ist ein {{cssxref("<string>")}} oder ein {{cssxref("<uri>")}}, der die Adresse der zu importierenden Ressource repräsentiert. Der URL kann absolut oder relativ sein. Beachte, dass der URL nicht unbedingt eine Datei referenzieren muss; er kann auch nur den Packagenamen und -teil angeben und die passende Datei wird automatisch ausgewählt (z. B. chrome://communicator/skin/). Siehe hier für mehr Informationen.
+
list-of-media-queries
+
Ist eine kommaseparierte Liste von Media Queries, die die Anwendung der in dem verlinkten URL definierten CSS Regeln bedingt. Falls der Browser keine dieser Media Queries unterstützt, lädt er die verlinkte Ressource nicht.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
@import url("fineprint.css") print;
+@import url("bluish.css") projection, tv;
+@import 'custom.css';
+@import url("chrome://communicator/skin/");
+@import "common.css" screen, projection;
+@import url('landscape.css') screen and (orientation:landscape);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Media Queries', '#media0', '@import')}}{{Spec2('CSS3 Media Queries')}}Erweitert die Syntax zur Unterstützung beliebiger Media Queries und nicht nur einfache Medientypen.
{{SpecName('CSS2.1', 'cascade.html#at-import', '@import')}}{{Spec2('CSS2.1')}}Fügt Unterstützung für {{cssxref("<string>")}} hinzu, um den URL eines Stylesheets anzugeben,
+ und Voraussetzung dafür, die @import Regel am Anfang des CSS Dokuments anzugeben.
{{SpecName('CSS1', '#the-cascade', '@import')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.import")}} diff --git a/files/de/web/css/@keyframes/index.html b/files/de/web/css/@keyframes/index.html new file mode 100644 index 0000000000..31acaf56b5 --- /dev/null +++ b/files/de/web/css/@keyframes/index.html @@ -0,0 +1,114 @@ +--- +title: '@keyframes' +slug: Web/CSS/@keyframes +translation_of: Web/CSS/@keyframes +--- +
{{CSSRef}}
+ +

Zusammenfassung

+ +

Durch die CSS-at-Regel @keyframes kann der Autor die einzelnen Schritte einer CSS-Animationssequenz festlegen, indem er Keyframes (oder Wegpunkte) setzt, die während der Sequenz an bestimmten Punkten erreicht werden. Das ermöglicht eine spezifischere Kontrolle über die Zwischenschritte einer Animationssequenz gegenüber dem Ergebnis einem dem Browser überlassenen, automatisch berechneten Ablauf.

+ +

Die at-Regel @keyframes kann mit dem CSS-Objekt {{domxref("CSSKeyframesRule")}} erlangt werden.

+ +

Um Keyframes zu benutzen, erstellt man eine @keyframes-Regel mit einem Namen, der dann durch die {{ cssxref("animation-name") }}-Eigenschaft genutzt wird, um einer Animation einen Keyframe zuzuweisen. Jede @keyframes-Regel beinhaltet eine Style-Liste aus Keyframe-Selektoren, von denen jeder eine Prozentzahl enthält, die angibt, zu welchem relativen Zeitpunkt während der Animation der Keyframe auftritt, sowie einen Block mit den jeweiligen Style-Informationen für diesen Keyframe.

+ +

Die Reihenfolge der Keyframes ist egal, denn sie werden in der Reihenfolge ihrer Prozentzahl verwendet.

+ +

Gültige Keyframe-Liste

+ +

Damit ein Keyframe gültig ist, muss er Regeln enthalten, die zumindest die Zeiten 0% (oder from) und 100% (oder to) enthalten (d.h. der Start- und Endstatus der Animation). Wenn beide Zeiten nicht angegeben sind, ist die Keyframe-Deklaration ungültig; sie wird vom Parser ignoriert und kann nicht als Animation verwendet werden.

+ +

Wenn Eigenschaften beschrieben werden, die nicht in den Keyframe-Regeln animiert werden können, werden sie ignoriert. Unterstützte Eingeschaften in dem Block werden weiterhin animiert.

+ +

Doppelte Deklarationen

+ +

Wenn mehrere Keyframe-Sets mit einem Namen existieren, gilt der letzte definierte. @keyframes-Regeln sind nicht kaskadierend, Animationen nehmen also niemals Keyframes von mehr als einer definierten Regel.

+ +

Wenn ein Zeitpunkt in der Animation doppelt deklariert ist, gilt der letzte Keyframe dieses Zeitpunkts in der @keyframes-Regel. Mehrere Regeln derselben Zeit sind nicht kaskadierend.

+ +

Wenn Eigenschaften aus manchen Keyframes ausgelassen werden

+ +

Jede Eigenschaft, die nicht in jedem Keyframe spezifiert wird, ist interpoliert (mit der Ausnahme von denen, die nicht interpoliert werden können und daher aus der gesamten Animation weggelassen werden). Zum Beispiel:

+ +
@keyframes identifier {
+  0% { top: 0; left: 0; }
+  30% { top: 50px; }
+  68%, 72% { left: 50px; }
+  100% { top: 100px; left: 100%; }
+}
+
+ +

Hier wird die {{ cssxref("top") }}-Eigenschaft mit Benutzen der 0%-, 30%-, und 100%-Keyframes animiert, und {{ cssxref("left") }} animiert anhand der 0%-, 68%-, and 100%-Keyframes.

+ +

Nur Eigenschaften, die in sowohl im 0%-, als auch im 100%-Keyframe spezifiziert sind, werden animiert; jede Eigenschaft, die nicht in diesen beiden Keyframes enthalten ist, wird ihren Startwert für die Dauer der Animation behalten.

+ +

Wenn ein Keyframe mehrmals definiert wird

+ +

Wenn ein Keyframe mehrmals definiert wird, aber nicht alle Eigenschaften in jedem Keyframe enthalten sind, werden ausschließlich die Werte des letzten Keyframes beachtet, zum Beispiel:

+ +
@keyframes identifier {
+  0% { top: 0; }
+  50% { top: 30px; left: 20px; }
+  50% { top: 10px; }
+  100% { top: 0; }
+}
+
+ +

In diesem Beispiel ist der genutzte Wert des 50%-Keyframe top: 10px und alle anderen Werte des ersten Keyframes werden ignoriert.

+ +

{{ non-standard_inline }} {{ fx_minversion_inline("14") }}  Kaskadierende Keyframes werden in Firefox ab Version 14 unterstützt. Im oberen Beispiel wird beim 50%-Keyframe der Wert left: 20px beachtet. Dies ist noch nicht in der Spezifikation definiert, wird allerdings gerade diskutiert.

+ +

Syntax

+ +
@keyframes <bezeichner> {
+  [ [ from | to | <Prozentzahl> ] [, from | to | <Prozentzahl> ]* block ]*
+}
+
+ +

Values

+ +
+
<Bezeichner>
+
Ein Name, der die Keyframe-Liste eindeutig identifiziert. Er muss den CSS-Syntax-Richtlinien für Bezeichner entsprechen.
+
from
+
Der Startwert 0%.
+
to
+
Der Endwert 100%.
+
{{cssxref("<percentage>")}}
+
Eine Prozentzahl, die den Zeitpunkt in der Animationssequenz angibt, an dem der spezifizierte Keyframe gelten soll.
+
+ +

Beispiel

+ +

Siehe CSS-Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Animations', '#keyframes', '@keyframes') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser-Kompatibilität

+ +{{Compat("css.at-rules.keyframes")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/@media/any-pointer/index.html b/files/de/web/css/@media/any-pointer/index.html new file mode 100644 index 0000000000..d919a97c58 --- /dev/null +++ b/files/de/web/css/@media/any-pointer/index.html @@ -0,0 +1,67 @@ +--- +title: any-pointer +slug: Web/CSS/@media/any-pointer +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsExample + - Referenz +translation_of: Web/CSS/@media/any-pointer +--- +{{cssref}} + +

any-pointer ist ein CSS Media Feature, das dazu verwendet werden kann, um zu prüfen, ob irgendein verfügbarer Eingabemechanismus ein Zeigegerät ist, und falls ja, wie genau es ist.

+ +

Aufgezählte Werte

+ + + + + + + + + + + + + + + + + + + + + + +
WertBedeutung
noneDas Gerät verfügt nicht über ein Zeigegerät.
coarseMindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von begrenzter Genauigkeit.
fineMindestens ein Eingabemechanismus des Geräts verfügt über ein Zeigegerät von präziser Genauigkeit.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#descdef-media-any-pointer', 'any-pointer')}}{{Spec2('CSS4 Media Queries')}}Added in Media Queries Level 4
+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.media.any-pointer")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/@media/index.html b/files/de/web/css/@media/index.html new file mode 100644 index 0000000000..814ff628ed --- /dev/null +++ b/files/de/web/css/@media/index.html @@ -0,0 +1,260 @@ +--- +title: '@media' +slug: Web/CSS/@media +tags: + - At-rule + - CSS + - Layout + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/CSS/@media +--- +

{{ CSSRef() }}

+ +

Summary

+ +

The @media CSS at-rule associates a set of nested statements, in a CSS block that is delimited by curly braces, with a condition defined by a media query. The @media at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule.

+ +

The @media at-rule can be accessed via the CSS object model interface {{domxref("CSSMediaRule")}}.

+ +

Syntax

+ +
{{csssyntax}}
+ +

A <media-query> is composed of a media type and/or a number of media features.

+ +

Media types

+ +
Note: Firefox currently only implements the print and screen media types.  The FullerScreen extension enables support for the projection media type.
+ +
+
all
+
Suitable for all devices.
+
print
+
Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.
+
screen
+
Intended primarily for color computer screens.
+
speech
+
Intended for speech synthesizers. Note: CSS2 had a similar media type called 'aural' for this purpose. See the appendix on aural style sheets for details.
+
+ +
Note: CSS2.1 and Media Queries 3 defined several additional media types (tty, tv, projection, handheld, braille, embossed, aural), but they were deprecated in Media Queries 4 and shouldn't be used.
+ +

Media Features

+ +

Definition. This section needs to be expanded to explain media conditions in more depth.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NameSummaryNotes
widthViewport width 
heightViewport height 
aspect-ratioWidth-to-height aspect ratio of the viewport 
orientationOrientation of the viewport 
resolutionPixel density of the output device 
scanScanning process of the output device 
gridIs the device a grid or bitmap? 
update-frequencyHow quickly (if at all) can the output device modify the appearance of the contentAdded in Media Queries Level 4
overflow-blockHow does the output device handle content that overflows the viewport along the block axis?Added in Media Queries Level 4
overflow-inlineCan content that overflows the viewport along the inline axis be scrolled?Added in Media Queries Level 4
colorNumber of bits per color component of the output device, or zero if the device isn't color. 
color-indexNumber of entries in the output device's color lookup table, or zero if the device does not use such a table. 
monochromeBits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome. 
inverted-colorsIs the user agent or underlying OS inverting colors?Added in Media Queries Level 4
pointerIs the primary input mechanism a pointing device, and if so, how accurate is it?Added in Media Queries Level 4
hoverDoes the primary input mechanism allow the user to hover over elements?Added in Media Queries Level 4
any-pointerIs any available input mechanism a pointing device, and if so, how accurate is it? 
any-hoverDoes any available input mechanism allow the user to hover over elements? 
light-levelCurrent ambient light levelAdded in Media Queries Level 4
scriptingIs scripting (e.g. JavaScript) available?Added in Media Queries Level 4
device-width {{obsolete_inline}}Width of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-height {{obsolete_inline}}Height of the rendering surface of the output deviceDeprecated in Media Queries Level 4
device-aspect-ratio {{obsolete_inline}}Width-to-height aspect ratio of the output deviceDeprecated in Media Queries Level 4
-webkit-device-pixel-ratio {{non-standard_inline}}Number of physical device pixels per CSS pixelNonstandard; WebKit/Blink-specific. If possible, use the resolution media feature instead.
-webkit-transform-3d {{non-standard_inline}}Are CSS 3D {{cssxref("transform")}}s supported?Nonstandard; WebKit/Blink-specific
-webkit-transform-2d {{non-standard_inline}}Are CSS 2D {{cssxref("transform")}}s supported?Nonstandard; WebKit-specific
-webkit-transition {{non-standard_inline}}Are CSS {{cssxref("transition")}}s supported?Nonstandard; WebKit-specific
-webkit-animation {{non-standard_inline}}Are CSS {{cssxref("animation")}}s supported?Nonstandard; WebKit-specific
+ +

Examples

+ +
@media print {
+  body { font-size: 10pt }
+}
+@media screen {
+  body { font-size: 13px }
+}
+@media screen, print {
+  body { line-height: 1.2 }
+}
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Conditional', '#at-media', '@media')}}{{Spec2('CSS3 Conditional')}}Defines the basic syntax of the @media rule.
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}} +

Added scripting, pointer, hover, light-level, update-frequency, overflow-block, and overflow-inline media features.
+ Deprecated all media types except for screen, print, speech, and all.

+
{{SpecName('CSS3 Media Queries', '#media0', '@media')}}{{Spec2('CSS3 Media Queries')}}No change.
{{SpecName('CSS2.1', 'media.html#at-media-rule', '@media')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Browser compatibility

+ +{{Compat("css.at-rules.media")}} + +

See also

+ + diff --git a/files/de/web/css/@media/pointer/index.html b/files/de/web/css/@media/pointer/index.html new file mode 100644 index 0000000000..4c1ff0fc8b --- /dev/null +++ b/files/de/web/css/@media/pointer/index.html @@ -0,0 +1,91 @@ +--- +title: pointer +slug: Web/CSS/@media/pointer +translation_of: Web/CSS/@media/pointer +--- +
{{cssref}}
+ +

Das CSS {{cssxref("@media")}} media Merkmal pointer wird verwendet um Styles abhängig vom primären Eingabemechanismus des Geräts anzuwenden. Es gibt aufschluss darüber ob der primäre Eingabemechanismus ein Zeigegerät ist, und wenn ja, wie präzise es ist.

+ +

Syntax

+ +

Die Einstellungsmöglichkeiten für das Merkmal pointer  sind in der folgenden Liste aufge

+ +
+
none
+
Das Gerät verfügt nur über Tastatur
+
coarse
+
Das Gerät verfügt über ein Eingabegerät mit limitierter Präzision (z.B. Touch)
+
fine
+
Das Gerät verfügt über einen sehr präzises Eingabegerät (z.B. Maus, Touchpad, Stift)
+
+ +

Beispiel

+ +

HTML

+ +
<input id="test" type="checkbox" />
+<label for="test">Look at me!</label>
+ +

CSS

+ +
input[type="checkbox"]:checked {
+  background: gray;
+}
+
+@media (pointer: fine) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 15px;
+    height: 15px;
+    border: 1px solid blue;
+  }
+}
+
+@media (pointer: coarse) {
+  input[type="checkbox"] {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    width: 30px;
+    height: 30px;
+    border: 2px solid red;
+  }
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Media Queries', '#pointer', 'pointer')}}{{Spec2('CSS4 Media Queries')}}Initial definition.
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.at-rules.media.pointer")}}

+ +

See also

+ + diff --git a/files/de/web/css/@media/prefers-reduced-motion/index.html b/files/de/web/css/@media/prefers-reduced-motion/index.html new file mode 100644 index 0000000000..84c9382a27 --- /dev/null +++ b/files/de/web/css/@media/prefers-reduced-motion/index.html @@ -0,0 +1,23 @@ +--- +title: prefers-reduced-motion +slug: Web/CSS/@media/prefers-reduced-motion +translation_of: Web/CSS/@media/prefers-reduced-motion +--- +

Das prefers-reduced-motion CSS media feature wird genutzt um zu erkennen ob der Nutzer angefragt hat, dass das System die Menge an nicht notwendiger Bewegung minimiert.

+ +

User preferences

+ + + +

Browser Kompatibilität

+ + + +

{{Compat("css.at-rules.media.prefers-reduced-motion")}}

+ +

+ +
{{QuickLinksWithSubpages("/en-US/docs/Web/CSS/@media/")}}
diff --git a/files/de/web/css/@media/width/index.html b/files/de/web/css/@media/width/index.html new file mode 100644 index 0000000000..7f25285f3e --- /dev/null +++ b/files/de/web/css/@media/width/index.html @@ -0,0 +1,53 @@ +--- +title: width +slug: Web/CSS/@media/width +tags: + - CSS + - Referenz +translation_of: Web/CSS/@media/width +--- +

{{cssref}}

+ +

width ist eine CSS Medien-Eigenschaft, die verwendet werden kann um Stile basierend auf der Breite der Anzeige (Viewport) zuzuordnen. Die Breite muss als {{cssxref("<length>")}} Wert definiert werden.

+ +

Syntax

+ +

width ist ein Breichswert, d.h. min-width und max-width sind ebenfalls verfügbar.

+ +
/* Exakte Breite */
+@media (width: 300px) {}
+
+/* Viewport Minimale Breite */
+@media (min-width: 50em) {}
+
+/* Viewport Maximale Breite */
+@media (max-width: 1000px) {}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Media Queries', '#media', '@media')}}{{Spec2('CSS4 Media Queries')}}Keine Änderung.
{{SpecName('CSS3 Media Queries', '#width', 'width')}}{{Spec2('CSS3 Media Queries')}}Initiale Definition.
+ +

Browserkompatibilität

+ +{{Compat("css.at-rules.media.width")}} diff --git a/files/de/web/css/@page/bleed/index.html b/files/de/web/css/@page/bleed/index.html new file mode 100644 index 0000000000..709025d671 --- /dev/null +++ b/files/de/web/css/@page/bleed/index.html @@ -0,0 +1,77 @@ +--- +title: bleed +slug: Web/CSS/@page/bleed +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility +translation_of: Web/CSS/@page/bleed +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Der bleed At-Regel Deskriptor gibt den Überhang über den Beschnitt des Seitenbereichs an. Diese Eigenschaft hat nur einen Effekt, falls Schnittmarken über die {{cssxref("marks")}} Eigenschaft aktiviert werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+bleed: auto;
+
+/* <length> Werte */
+bleed: 8pt;
+bleed: 1cm;
+
+ +

Werte

+ +
+
auto
+
Erhält den Wert 6pt, falls der Wert von {{cssxref("marks")}} crop ist. Ansonsten ist der Wert 0.
+
{{cssxref("<length>")}}
+
Gibt an, wie weit, in jeder Richtung, der Beschnitt den Seitenbereich überragt. Werte können negativ sein, allerdings gibt es implementierungsspezifische Beschränkungen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
@page {
+  bleed: 1cm;
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("CSS3 Paged Media", "#bleed", "bleed")}}{{Spec2("CSS3 Paged Media")}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.at-rules.page.bleed")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/@page/index.html b/files/de/web/css/@page/index.html new file mode 100644 index 0000000000..ed45c12a03 --- /dev/null +++ b/files/de/web/css/@page/index.html @@ -0,0 +1,90 @@ +--- +title: '@page' +slug: Web/CSS/@page +tags: + - At-Regel + - CSS + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die @page CSS At-Regel wird verwendet, um einige CSS Eigenschaften zu ändern, wenn ein Dokument gedruckt wird. Es können nicht alle CSS Eigenschaften mit @page geändert werden. Es können nur Seitenränder, Absatzkontrolle — oben (widow); unten (orphans) — und Seitenumbrüche des Dokuments verändert werden. Versuche, andere CSS Eigenschaften zu ändern, werden ignoriert.

+ +

Die @page At-Regel kann über die CSS Objektmodellschnittstelle {{domxref("CSSPageRule")}} angesprochen werden.

+ +
Hinweis: Das W3C diskutiert, wie die viewportbezogenen {{cssxref("<length>")}} Einheiten, vh, vw, vmin, und vmax gehandhabt werden sollen. Bis dahin sollten diese nicht in einer @page At-Regel verwendet werden.
+ +

Syntax

+ +

Deskriptoren

+ +
+
{{cssxref("@page/size", "size")}}
+
Bestimmt die Zielgröße und -ausrichtung des den Seitenbereich beinhaltenden Blocks. Im allgemeinen Fall, in dem ein Seitenbereich auf einer Seitenpostille dargestellt wird, gibt sie auch die Größe der Zielseitenpostille an.
+
+ +
+
{{cssxref("@page/marks", "marks")}}
+
Fügt dem Dokument Schneide- und/oder Registrierungsmarker hinzu.
+
+ +
+
{{cssxref("@page/bleed", "bleed")}}
+
Gibt den Überhang über den Seitenbereich an, bei dem die Darstellung der Seite abgeschnitten wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Bitte lies die verschiedenen Pseudoklassen von @page für Beispiele.

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#logical-page', ':recto und :verso')}}{{Spec2('CSS Logical Properties')}}Fügt die :recto und :verso Seitenselektoren hinzu.
{{SpecName('CSS3 Paged Media', '#at-page-rule', '@page')}}{{Spec2('CSS3 Paged Media')}}Keine Änderung bzgl. {{SpecName('CSS2.1')}}, es können jedoch mehr CSS At-Regeln innerhalb @page verwendet werden.
{{SpecName('CSS2.1', 'page.html#page-selectors', '@page')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.at-rules.page")}}

diff --git a/files/de/web/css/@page/marks/index.html b/files/de/web/css/@page/marks/index.html new file mode 100644 index 0000000000..f30efcffd3 --- /dev/null +++ b/files/de/web/css/@page/marks/index.html @@ -0,0 +1,84 @@ +--- +title: marks +slug: Web/CSS/@page/marks +tags: + - CSS + - CSS Eigenschaft + - Layout + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/@page/marks +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die marks CSS Eigenschaft fügt Schneide- und/oder Registermarken zur Darstellung eines Dokuments hinzu. Schneidemarken zeigen an, wo die Seite abgeschnitten werden soll. Registermarken verden zur Ausrichtung von Blättern benutzt.

+ +

Schneidemarken und Registermarken werden außerhalb des Seitenrechtecks gedruckt. Um Platz für Schneide- und Registermarken zu haben, müssen die finalen Seiten etwas größer sein als das Seitenrechteck.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+marks: none;
+marks: crop;
+marks: cross;
+marks: crop cross;
+ +

Werte

+ +
+
crop
+
Es werden Schneidemarken angezeigt.
+
cross
+
Es werden Registermarken angezeigt.
+
none
+
Es werden keine Marken angezeigt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
@page {
+  marks: crop cross;
+}
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Paged Media', '#marks', 'marks')}}{{Spec2('CSS3 Paged Media')}}Ursprüngliche Definition
+ +

Diese CSS Eigenschaft wurde ursprünglich in CSS Level 2 vorgeschlagen, wurde jedoch in CSS Level 2 (Revision 1) verworfen.

+ +

Browser Kompatibilität

+ +{{Compat("css.at-rules.page.marks")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/@viewport/index.html b/files/de/web/css/@viewport/index.html new file mode 100644 index 0000000000..2cdcd37691 --- /dev/null +++ b/files/de/web/css/@viewport/index.html @@ -0,0 +1,96 @@ +--- +title: '@viewport' +slug: Web/CSS/@viewport +translation_of: Web/CSS/@viewport +--- +

{{ CSSRef() }}

+ +

Zusammenfassung

+ +

Die @viewport CSS at-Regel enthält eine Menge aus geschachtelten Deskriptoren in einem CSS-Block, der durch geschweifte Klammern begrenzt wird. Diese Deskriptoren steuern die Viewport-Einstellungen, insbesondere auf mobilen Geräten.

+ +

Syntax

+ +

(Dieser MDN Artikel ist derzeit nur ein Abriss, ihm fehlt die vollständige Beschreibung der Syntax.)

+ +
@viewport {
+  /* viewport-Deskriptor: viewport-Wert; */
+}
+ +

 

+ +

Ein Zoomfaktor von 1.0 oder 100% beschreibt kein Zooming. Größere Werte vergrößern, kleinere Werte verkleinern.

+ +

Deskriptoren

+ +

Browser sollen unbekannte Deskriptoren ignorieren.

+ +
+
min-width
+
Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
max-width
+
Verwendet für die Festlegung der Breite des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
width
+
Eine Kurznotation für die Festlegung von sowohl min-width als auch max-width
+
min-height
+
Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
max-height
+
Verwendet für die Festlegung der Höhe des Viewports, wenn das Dokument zum ersten Mal gezeigt wird.
+
height
+
Eine Kurznotation für die Festlegung von sowohl min-height als auch max-height
+
zoom
+
Legt den initialen Zoomfaktor fest.
+
min-zoom
+
Legt den minimalen Zoomfaktor fest.
+
max-zoom
+
Legt den maximalen Zoomfaktor fest.
+
user-zoom
+
Steuert, ob der Anwender den Zoomfaktor ändern darf.
+
orientation
+
Steuert die Orientierung des Dokuments (Hoch- oder Querformat).
+
+ +

Beispiele

+ +
@viewport {
+  min-width: 640px;
+  max-width: 800px;
+}
+@viewport {
+  zoom: 0.75;
+  min-zoom: 0.5;
+  max-zoom: 0.9;
+}
+@viewport {
+  orientation: landscape;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezificationStatusKommentar
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}}{{Spec2('CSS3 Device')}} 
+ +

Browserkompatibilität

+ +

{{Compat("css.at-rules.viewport")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-broken/index.html b/files/de/web/css/_colon_-moz-broken/index.html new file mode 100644 index 0000000000..bf59121e5e --- /dev/null +++ b/files/de/web/css/_colon_-moz-broken/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-broken' +slug: 'Web/CSS/:-moz-broken' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-broken' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Übersicht

+ +

Die :-moz-broken CSS Pseudoklasse matcht Elemente, die fehlende Bildlinks repräsentieren.

+ +

Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-drag-over/index.html b/files/de/web/css/_colon_-moz-drag-over/index.html new file mode 100644 index 0000000000..af4b680211 --- /dev/null +++ b/files/de/web/css/_colon_-moz-drag-over/index.html @@ -0,0 +1,42 @@ +--- +title: ':-moz-drag-over' +slug: 'Web/CSS/:-moz-drag-over' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-drag-over' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-drag-over CSS Pseudoklasse wird dazu verwendet, um ein Element zu stylen, wenn das drag-over Ereignis für es ausgelöst wird.

+ +

Syntax

+ +
element:-moz-drag-over { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
td:-moz-drag-over {
+  color: red;
+}
+
+ +

HTML

+ +
<table border="1">
+  <tr>
+    <td width="100px" height="100px">Hierüber ziehen</td>
+  </tr>
+</table>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Example")}}

diff --git a/files/de/web/css/_colon_-moz-first-node/index.html b/files/de/web/css/_colon_-moz-first-node/index.html new file mode 100644 index 0000000000..97002e8509 --- /dev/null +++ b/files/de/web/css/_colon_-moz-first-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-first-node' +slug: 'Web/CSS/:-moz-first-node' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-first-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-first-node CSS Pseudoklasse repräsentiert ein beliebiges Element, dass der erste Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.

+ +

Any white space at the start of an element is ignored for the determination of :-moz-first-node.

+ +

Syntax

+ +
span:-moz-first-node { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span:-moz-first-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Example", "220", "20")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-focusring/index.html b/files/de/web/css/_colon_-moz-focusring/index.html new file mode 100644 index 0000000000..ab07f48bdc --- /dev/null +++ b/files/de/web/css/_colon_-moz-focusring/index.html @@ -0,0 +1,91 @@ +--- +title: ':-moz-focusring' +slug: 'Web/CSS/:-moz-focusring' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/:-moz-focusring' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-focusring CSS Pseudoklasse ist ähnlich der {{cssxref(":focus")}} Pseudoklasse, jedoch matcht sie ein Element nur, wenn das Element aktuell fokussiert ist und der User Agent das Zeichen von Fokusringen aktiviert hat. Falls :-moz-focusring matcht, dann matcht auch :focus, aber das Umgekehrte ist nicht immer wahr - es hängt davon ab, ob der User Agent das Zeichnen von Fokusringen aktiviert hat. Ob der User Agent das Zeichen von Fokusringen aktiviert hat, kann von Dingen wie der Einstellung des Betriebssystems abhängen, das der Benutzer verwendet, sodass das Verhalten dieser Pseudoklasse von Plattform zu Plattform abhängig von den Best Practices (Standardeinstellungen) bezüglich Fokusierung der Plattform oder Benutzereinstellungen.

+ +

Syntax

+ +
:-moz-focusring
+ +

Beispiel

+ +

Um die Anzeige eines fokussierten Elements zu definieren, kann dieser Pseudoklassenselektor folgendermaßen verwendet werden:

+ +
mybutton:-moz-focusring {
+  outline: 2px dotted;
+}
+
+ +

Spezifikationen

+ +

Dieses Feature ist bisher noch in keiner Spezifikation definiert, jedoch wurde es in der Working Group diskutiert und es wurde beschlossen, es zu Selectors 4 oder 5 hinzuzufügen.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop(2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html new file mode 100644 index 0000000000..c14ed802c6 --- /dev/null +++ b/files/de/web/css/_colon_-moz-full-screen-ancestor/index.html @@ -0,0 +1,82 @@ +--- +title: ':-moz-full-screen-ancestor' +slug: 'Web/CSS/:-moz-full-screen-ancestor' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse +translation_of: 'Archive/Web/CSS/:-moz-full-screen-ancestor' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Die :-moz-full-screen-ancestor CSS Pseudoklasse passt auf alle Vorfahren des Vollbild-Elements außer beinhaltende Frames in Elterndokumenten, welche das Vollbild-Element in ihren eigenen Dokumenten sind. Jedoch passt diese Pseudoklasse auf die Vorfahren dieser Elemente.

+ +

Beispiele

+ +

Benötigt Beispiele.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("10.0")}}{{property_prefix("-moz")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("10.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-handler-blocked/index.html b/files/de/web/css/_colon_-moz-handler-blocked/index.html new file mode 100644 index 0000000000..df544a0487 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-blocked/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-blocked' +slug: 'Web/CSS/:-moz-handler-blocked' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-blocked' +--- +

{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}

+ +

Übersicht

+ +

:-moz-handler-blocked matcht Elemente, die nicht angezeigt werden können, weil deren Handler blockiert wurden.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-handler-crashed/index.html b/files/de/web/css/_colon_-moz-handler-crashed/index.html new file mode 100644 index 0000000000..25f59a32c2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-crashed/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-crashed' +slug: 'Web/CSS/:-moz-handler-crashed' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-crashed' +--- +

{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("2.0")}}

+ +

Übersicht

+ +

:-moz-handler-crashed matcht Elemente, die nicht angezeigt werden können, weil das Plugin, das für deren Darstellung verantwortlich ist, abgestürzt ist.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-handler-disabled/index.html b/files/de/web/css/_colon_-moz-handler-disabled/index.html new file mode 100644 index 0000000000..4a47e9f9d6 --- /dev/null +++ b/files/de/web/css/_colon_-moz-handler-disabled/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-handler-disabled' +slug: 'Web/CSS/:-moz-handler-disabled' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-handler-disabled' +--- +

{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}

+ +

Übersicht

+ +

:-moz-handler-disabled matcht Elemente, die nicht angezeigt werden können, weil deren Handler durch den Benutzer deaktiviert wurden.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-last-node/index.html b/files/de/web/css/_colon_-moz-last-node/index.html new file mode 100644 index 0000000000..29f8c0b486 --- /dev/null +++ b/files/de/web/css/_colon_-moz-last-node/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-last-node' +slug: 'Web/CSS/:-moz-last-node' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Web/CSS/:-moz-last-node' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-last-node CSS Pseudoklasse matcht ein Element, das der letzte Kindknoten eines anderen Elements ist. Es unterscheidet sich von {{cssxref(":last-child")}}, da es keine letzten Kindelemente mit darauffolgendem (nicht aus Leerzeichen bestehenden) Text matcht.

+ +

Leerzeichen am Ende eines Elements werden zur Bestimmung von :-moz-last-node ignoriert.

+ +

Syntax

+ +
span:-moz-last-node { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span:-moz-last-node {
+  background-color: lime;
+}
+
+ +

HTML

+ +
<div>
+  <span>:-moz-first-node</span>
+  <span>:-moz-last-node</span>
+</div>
+
+ +

{{EmbedLiveSample("Beispiel", "220", "20")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-list-bullet/index.html b/files/de/web/css/_colon_-moz-list-bullet/index.html new file mode 100644 index 0000000000..f3ffef8cda --- /dev/null +++ b/files/de/web/css/_colon_-moz-list-bullet/index.html @@ -0,0 +1,47 @@ +--- +title: '::-moz-list-bullet' +slug: 'Web/CSS/:-moz-list-bullet' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/:-moz-list-bullet' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das nicht standardisierte ::-moz-list-bullet Mozilla CSS Pseudoelement wird dazu benutzt, um den Aufzählungspunkt eines Listenelements zu stylen.

+ +

Syntax

+ +
li::-moz-list-bullet { style properties }
+ +

Beispiele

+ +

CSS

+ +
.list li::-moz-list-bullet {
+  font-size: 36px;
+}
+
+ +

HTML

+ +
<ul>
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+<ul class="list">
+  <li>Number 1</li>
+  <li>Number 2</li>
+  <li>Number 3</li>
+</ul>
+
+ +

Ergebnis

+ +

Image:liug3.jpg

diff --git a/files/de/web/css/_colon_-moz-list-number/index.html b/files/de/web/css/_colon_-moz-list-number/index.html new file mode 100644 index 0000000000..92de0853ac --- /dev/null +++ b/files/de/web/css/_colon_-moz-list-number/index.html @@ -0,0 +1,45 @@ +--- +title: '::-moz-list-number' +slug: 'Web/CSS/:-moz-list-number' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard + - Pseudoelement +translation_of: 'Web/CSS/:-moz-list-number' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das ::-moz-list-number CSS Pseudoelement erlaubt es, das Aussehen von Zahlen in Listeneinträgen ({{HTMLElement("li")}}), die in geordneten Listen ({{HTMLElement("ol")}}) auftreten, anzupassen.

+ +

Syntax

+ +
li::-moz-list-number { style properties }
+
+ +

Beispiel

+ +

CSS

+ +
li::-moz-list-number {
+  font-style: italic;
+  font-weight: bold;
+}
+
+ +

HTML

+ +
<ol>
+  <li>First item</li>
+  <li>Second item</li>
+  <li>Third item</li>
+</ol>
+
+ +

Ergebnis

+ +

moz-list-number.png
+ {{EmbedLiveSample("Beispiel")}}

diff --git a/files/de/web/css/_colon_-moz-loading/index.html b/files/de/web/css/_colon_-moz-loading/index.html new file mode 100644 index 0000000000..01a8a5cb9a --- /dev/null +++ b/files/de/web/css/_colon_-moz-loading/index.html @@ -0,0 +1,17 @@ +--- +title: ':-moz-loading' +slug: 'Web/CSS/:-moz-loading' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-loading' +--- +
{{CSSRef}}{{Non-standard_header}}{{gecko_minversion_header("1.9")}}
+ +

Die :-moz-loading CSS Pseudoklasse matcht Elemente, die nicht angezeigt werden können, weil sie noch nicht geladen wurden, wie beispielsweise Bilder, die noch nicht angefangen haben, anzukommen. Beachte, dass Bilder, die dabei sind, geladen zu werden, nicht von der Pseudoklasse gematcht werden.

+ +

Dies ist hauptsächlich für Themeentwickler nützlich.

diff --git a/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html new file mode 100644 index 0000000000..74d080b016 --- /dev/null +++ b/files/de/web/css/_colon_-moz-locale-dir(ltr)/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-locale-dir(ltr)' +slug: 'Web/CSS/:-moz-locale-dir(ltr)' +tags: + - CSS + - CSS Referenz + - Localisierung + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:-moz-locale-dir(ltr)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Übersicht

+ +

Die :-moz-locale-dir(ltr) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von links nach rechts angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "ltr" bestimmt.

+ +

Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.

+ +

Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht immer, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html new file mode 100644 index 0000000000..ac2045c986 --- /dev/null +++ b/files/de/web/css/_colon_-moz-locale-dir(rtl)/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-locale-dir(rtl)' +slug: 'Web/CSS/:-moz-locale-dir(rtl)' +tags: + - CSS + - CSS Referenz + - Lokalisierung + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoklasse + - Rechts-nach-links +translation_of: 'Web/CSS/:-moz-locale-dir(rtl)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.2")}}
+ +

Übersicht

+ +

Die :-moz-locale-dir(rtl) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von rechts nach links angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "rtl" bestimmt.

+ +

Dies erlaubt Erweiterungen (und Themes) die einfache Anpassung ihrer Benutzerschnittstelle an die Bedürfnisse der Sprachumgebung des Benutzers. Dies kann sich von Fenster zu Fenster und sogar von Tab zu Tab unterscheiden. Dies ermöglicht es Erweiterungen, selbst dann zu funktionieren, wenn sie die standardmäßige Sprachumgebung des Benutzers nicht unterstützen, da sie sowohl links-nach-rechts als auch rechts-nach-links Layouts unterstützen können, ohne sich um die Besonderheiten der Sprachumgebung zu sorgen.

+ +

Dieser Selektor funktioniert nicht korrekt unter HTML; er matcht nie, unabhängig davon, ob das UI links-nach-rechts oder rechts-nach-links ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html new file mode 100644 index 0000000000..1b9aca10dd --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme-brighttext/index.html @@ -0,0 +1,22 @@ +--- +title: ':-moz-lwtheme-brighttext' +slug: 'Web/CSS/:-moz-lwtheme-brighttext' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-brighttext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-lwtheme-brighttext Pseudoklasse matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} true ist und ein Lightweight Theme mit heller Farbe ausgewählt ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html new file mode 100644 index 0000000000..d62e9ca240 --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme-darktext/index.html @@ -0,0 +1,23 @@ +--- +title: ':-moz-lwtheme-darktext' +slug: 'Web/CSS/:-moz-lwtheme-darktext' +tags: + - CSS + - CSS Referenz + - Non-standard + - Themes +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme-darktext' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-lwtheme-darktext Pseudoklasse matcht in Chrome-Dokumenten, wenn {{cssxref(":-moz-lwtheme")}} true ist und ein Lightweight Theme mit dunkler Farbe ausgewählt ist.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-lwtheme/index.html b/files/de/web/css/_colon_-moz-lwtheme/index.html new file mode 100644 index 0000000000..6b0c439fa7 --- /dev/null +++ b/files/de/web/css/_colon_-moz-lwtheme/index.html @@ -0,0 +1,26 @@ +--- +title: ':-moz-lwtheme' +slug: 'Web/CSS/:-moz-lwtheme' +tags: + - CSS + - CSS Referenz + - Lightweight themes + - NeedsCompatTable + - NeedsExample + - Non-standard + - Themes +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-lwtheme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-lwtheme CSS Pseudoklasse matcht in Chromedokumenten, wenn das {{xulattr("lightweightthemes")}} Attribut des Wurzelelements true ist und ein Theme ausgewählt wurde.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-only-whitespace/index.html b/files/de/web/css/_colon_-moz-only-whitespace/index.html new file mode 100644 index 0000000000..ef533f52d7 --- /dev/null +++ b/files/de/web/css/_colon_-moz-only-whitespace/index.html @@ -0,0 +1,36 @@ +--- +title: ':-moz-only-whitespace' +slug: 'Web/CSS/:-moz-only-whitespace' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:-moz-only-whitespace' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-only-whitespace CSS Pseudoklasse matcht ein Element, dass keine Kindelemente hat oder leere Textknoten oder Textknoten, die nur Leerzeichen enthalten. Nur falls es Elementknoten oder Textknoten mit einem oder mehreren Zeichen innerhalb des Elements gibt, matcht das Element diese Pseudoklasse nicht mehr.

+ +

Syntax

+ +
span:-moz-only-whitespace { Stileigenschaften }
+
+ +

Beispiel

+ +

CSS

+ +
span:-moz-only-whitespace::before {
+  background-color: lime;
+}
+ +

HTML

+ +
<span> </span>
+
+ +

{{EmbedLiveSample("Beispiel", "50", "20")}}

diff --git a/files/de/web/css/_colon_-moz-placeholder/index.html b/files/de/web/css/_colon_-moz-placeholder/index.html new file mode 100644 index 0000000000..2055009cf2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-placeholder/index.html @@ -0,0 +1,120 @@ +--- +title: ':-moz-placeholder' +slug: 'Web/CSS/:-moz-placeholder' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard + - Platzhalter + - Selektoren +translation_of: 'Web/CSS/:placeholder-shown' +--- +
Hinweis: Die :-moz-placeholder Pseudoklasse ist in Firefox 19 als veraltet markiert zugunsten des {{cssxref('::-moz-placeholder')}} Pseudoelements.
+ +
Hinweis:Die CSSWG hat beschlossen, :placeholder-shown einzuführen. Diese Funktionalität wird in Gecko irgendwann in der Zukunft wieder eingeführt, ohne Präfix und unter dem neuen Namen. {{bug("1069012")}}
+ +
{{deprecated_header}}{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-placeholder Pseudoklasse repräsentiert ein Formularelement, das Platzhaltertext anzeigt. Dies erlaubt Webentwicklern und Themedesignern die Darstellung von Platzhaltertext anzupassen, welche standardmäßig einer hellgrauen Farbe entspricht. Dies ist in manchen Fällen unvorteilhaft, beispielsweise wenn der Hintergrundfarbe von Formularfeldern eine ähnliche Farbe zugewiesen wird. Hier kann die Pseudoklasse verwendet werden, um die Textfarbe des Platzhalters zu ändern.

+ +

Beispiel

+ +

Dieses Beispiel weist dem Platzhaltertext eine grüne Farbe zu.

+ +
<!DOCTYPE html>
+<html>
+<head>
+  <title>Placeholder demo</title>
+  <style type="text/css">
+    input:-moz-placeholder {
+      color: green;
+    }
+  </style>
+</head>
+<body>
+  <input id="test" placeholder="Placeholder text!">
+</body>
+</html>
+
+ +

Ergibt:

+ +

{{EmbedLiveSample('Beispiel', '100%', 30)}}

+ +

Überlauf

+ +

Oft werden Suchfelder oder andere Formularelemente auf mobilen Geräten verkürzt dargestellt. Leider passt u. U. der Platzhaltertext eines {{HTMLElement("input")}} Elements in die Länge des Elements, was einen abgeschnittenen Text zur Folge hat. Um diese Darstellung zu verhindern, kann die CSS Eigenschaft text-overflow: ellipsis! verwendet werden, um den Text mit einer Ellipse abzuschließen.

+ +
input[placeholder] { text-overflow: ellipsis; }
+::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
+input:-moz-placeholder { text-overflow: ellipsis; }
+
+ +

David Walsh hat dies in seinem Blog Eintrag "Placeholders and Overflow" beschrieben.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("2.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Implementiert in {{bug("457801")}}.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-submit-invalid/index.html b/files/de/web/css/_colon_-moz-submit-invalid/index.html new file mode 100644 index 0000000000..af433fef51 --- /dev/null +++ b/files/de/web/css/_colon_-moz-submit-invalid/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-submit-invalid' +slug: 'Web/CSS/:-moz-submit-invalid' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - Non-standard +translation_of: 'Web/CSS/:-moz-submit-invalid' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Die :-moz-submit-invalid CSS Pseudoklasse repräsentiert jeden Submitbutton auf Formularen, deren Inhalte anhand ihrer Validierungsbeschränkungen nicht gültig sind.

+ +

Standardmäßig wird kein Stil zugewiesen. Dieser Stil kann dazu verwendet werden, um das Aussehen des Submitbuttons anzupassen, wenn es ungültige Formularfelder gibt.

+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.-moz-submit-invalid")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-suppressed/index.html b/files/de/web/css/_colon_-moz-suppressed/index.html new file mode 100644 index 0000000000..a14ef0e383 --- /dev/null +++ b/files/de/web/css/_colon_-moz-suppressed/index.html @@ -0,0 +1,17 @@ +--- +title: ':-moz-suppressed' +slug: 'Web/CSS/:-moz-suppressed' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-suppressed' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Die :-moz-suppressed CSS Pseudoklasse matcht Elemente, die Bilder repräsentieren, die nicht geladen werden konnten, da das Laden von Bildern von dieser Seite blockiert wurde.

+ +

Dieser Selektor ist dazu gedacht, hauptsächlich von Themeentwicklern verwendet zu werden.

diff --git a/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html new file mode 100644 index 0000000000..d9882303fd --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(images-in-menus)/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-system-metric(images-in-menus)' +slug: 'Web/CSS/:-moz-system-metric(images-in-menus)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/images-in-menus' +--- +
{{CSSRef}}{{Non-standard_header}}{{Fx_minversion_header(3)}}
+ +

Übersicht

+ +

Die :-moz-system-metric(images-in-menus) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers Bilder in Menüs unterstützt.

+ +

Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html new file mode 100644 index 0000000000..8cd7bc0e9b --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(mac-graphite-theme)/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-system-metric(mac-graphite-theme)' +slug: 'Web/CSS/:-moz-system-metric(mac-graphite-theme)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/mac-graphite-theme' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9.1")}}
+ +

Übersicht

+ +

:-moz-system-metric(mac-graphite-theme) matcht ein Element, falls der Benutzer die "Graphite" Darstellung in der "Darstellung" Einstellungsseite der Mac OS X Systemeinstellungen gewählt hat.

+ +

Dieser Selektor ist hauptsächlich dazu gedacht, von Themeentwicklern verwendet zu werden.

+ +

Beispiele

+ +

Demo

+ +

Bugzilla

+ +

{{bug("448767")}}

diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html new file mode 100644 index 0000000000..689598432f --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-backward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-end-backward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Ende von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html new file mode 100644 index 0000000000..a7c84cd200 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-end-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-end-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-end-forward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-end-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-end-forward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Ende von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html new file mode 100644 index 0000000000..0781e4b37a --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-backward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-backward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-backward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-backward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-start-backward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Zurück-Button am Anfang von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html new file mode 100644 index 0000000000..01a8b77a02 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-start-forward)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-start-forward)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-start-forward)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-start-forward' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-start-forward) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers einen Vorwärts-Button am Anfang von Scrollleisten beinhaltet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html new file mode 100644 index 0000000000..cfdd764992 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(scrollbar-thumb-proportional)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(scrollbar-thumb-proportional)' +slug: 'Web/CSS/:-moz-system-metric(scrollbar-thumb-proportional)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/scrollbar-thumb-proportional' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(scrollbar-thumb-proportional) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle des Computers proportionale Scrollleistenbalken verwendet; d. h. der bewegliche Balken der Scrollleiste verändert seine Größe, um die relative Größe der sichtbaren Bereichs des Dokuments zu kennzeichnen.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html new file mode 100644 index 0000000000..c59bc203d3 --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(touch-enabled)/index.html @@ -0,0 +1,73 @@ +--- +title: ':-moz-system-metric(touch-enabled)' +slug: 'Web/CSS/:-moz-system-metric(touch-enabled)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/touch-enabled' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-moz-system-metric(touch-enabled) CSS Pseudoklasse matcht ein Element, falls das Gerät, auf welchem der Inhalt angezeigt wird, eine unterstützte Touchscreen Schnittstelle bietet.

+ +
Hinweis: Diese Pseudoklasse ist nicht für die Benutzung in Webinhalten gedacht. Stattdessen sollte die -moz-touch-enabled Media Query verwendet werden.
+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("1.9.2")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html new file mode 100644 index 0000000000..2242bb293c --- /dev/null +++ b/files/de/web/css/_colon_-moz-system-metric(windows-default-theme)/index.html @@ -0,0 +1,65 @@ +--- +title: ':-moz-system-metric(windows-default-theme)' +slug: 'Web/CSS/:-moz-system-metric(windows-default-theme)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Archive/Web/CSS/:-moz-system-metric/windows-default-theme' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-system-metric(windows-default-theme) CSS Pseudoklasse matcht ein Element, falls der Benutzer aktuell eines der folgenden Themes in Windows verwendet: Luna, Royale, Zune oder Aero (d. h. Vista Basic, Vista Standard oder Aero Glass). Dies schließt sowohl Windows Classic Themes als auch Drittanbieterthemes aus.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

+ +

Beispiel

+ +

HTML Inhalt

+ +
<p id="defaultThemes">
+  This paragraph should have a green background with Luna/Royale/Zune/Aero
+  Windows themes and red with other themes.
+</p>
+
+<p id="nonDefaultThemes">
+  This paragraph should have a green background with Windows Classic or
+  third-party themes and red with other themes.
+</p>
+
+<p id="notSupported">Theme detection is not supported.</p>
+ +

CSS Inhalt

+ +
#defaultThemes,
+#nonDefaultThemes {
+  background-color: #FFA0A0;
+}
+
+#defaultThemes:-moz-system-metric(windows-default-theme) {
+  background-color: #A0FFA0;
+}
+
+#nonDefaultThemes:not(-moz-system-metric(windows-default-theme)) {
+  background-color: #A0FFA0;
+}
+
+#notSupported:-moz-system-metric(windows-default-theme),
+#notSupported:not(:-moz-system-metric(windows-default-theme)) {
+  display: none;
+}
+
+ +

{{EmbedLiveSample("Beispiel", "100%", 170)}}

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.-moz-system-metric.windows-default-theme")}} diff --git a/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html new file mode 100644 index 0000000000..a1cf6af05c --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell-text(hover)/index.html @@ -0,0 +1,20 @@ +--- +title: ':-moz-tree-cell-text(hover)' +slug: 'Web/CSS/:-moz-tree-cell-text(hover)' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Selektor +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header(1.9)}}
+ +

Übersicht

+ +

Die :-moz-tree-cell-text(hover) CSS Pseudoklasse matcht ein Element, falls sich der Mauszeiger über dem Text innerhalb einer Baumzelle befindet.

+ +

Dieser Selektor ist hauptsächlich für die Benutzung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-tree-cell-text/index.html b/files/de/web/css/_colon_-moz-tree-cell-text/index.html new file mode 100644 index 0000000000..1507e1f8c4 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell-text/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-cell-text' +slug: 'Web/CSS/:-moz-tree-cell-text' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell-text' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-cell/index.html b/files/de/web/css/_colon_-moz-tree-cell/index.html new file mode 100644 index 0000000000..f2250e3e4f --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-cell/index.html @@ -0,0 +1,38 @@ +--- +title: ':-moz-tree-cell' +slug: 'Web/CSS/:-moz-tree-cell' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-cell' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-tree-column/index.html b/files/de/web/css/_colon_-moz-tree-column/index.html new file mode 100644 index 0000000000..927b64e482 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-column/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-column' +slug: 'Web/CSS/:-moz-tree-column' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-column' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html new file mode 100644 index 0000000000..607b4dfe1b --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-drop-feedback/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-drop-feedback' +slug: 'Web/CSS/:-moz-tree-drop-feedback' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Pseudo-class +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-drop-feedback' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-image/index.html b/files/de/web/css/_colon_-moz-tree-image/index.html new file mode 100644 index 0000000000..780d66e4bf --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-image/index.html @@ -0,0 +1,34 @@ +--- +title: ':-moz-tree-image' +slug: 'Web/CSS/:-moz-tree-image' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsLiveSample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/:-moz-tree-image' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + + +

Beispiele

+ +

Bookmark icons in the Places window - Mozillazine Forum

diff --git a/files/de/web/css/_colon_-moz-tree-indentation/index.html b/files/de/web/css/_colon_-moz-tree-indentation/index.html new file mode 100644 index 0000000000..c53db78b8f --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-indentation/index.html @@ -0,0 +1,27 @@ +--- +title: ':-moz-tree-indentation' +slug: 'Web/CSS/:-moz-tree-indentation' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-indentation' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-line/index.html b/files/de/web/css/_colon_-moz-tree-line/index.html new file mode 100644 index 0000000000..b6badf8db2 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-line/index.html @@ -0,0 +1,25 @@ +--- +title: ':-moz-tree-line' +slug: 'Web/CSS/:-moz-tree-line' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-line' +--- +

{{Non-standard_header}}{{CSSRef}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-progressmeter/index.html b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html new file mode 100644 index 0000000000..1642c8f373 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-progressmeter/index.html @@ -0,0 +1,28 @@ +--- +title: ':-moz-tree-progressmeter' +slug: 'Web/CSS/:-moz-tree-progressmeter' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-progressmeter' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Aktiviert, wenn das type Attribut auf progressmeter gesetzt ist.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-row(hover)/index.html b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html new file mode 100644 index 0000000000..07400474ba --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-row(hover)/index.html @@ -0,0 +1,20 @@ +--- +title: ':-moz-tree-row(hover)' +slug: 'Web/CSS/:-moz-tree-row(hover)' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row(hover)' +--- +
{{Non-standard_header}}{{CSSRef}}{{Fx_minversion_header(3)}}
+ +

Übersicht

+ +

Die :-moz-tree-row(hover) CSS Pseudoklasse matcht ein Element, falls der Mauszeiger sich über einer Baumzeile befindet.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-tree-row/index.html b/files/de/web/css/_colon_-moz-tree-row/index.html new file mode 100644 index 0000000000..72c4ae0940 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-row/index.html @@ -0,0 +1,48 @@ +--- +title: ':-moz-tree-row' +slug: 'Web/CSS/:-moz-tree-row' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-row' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Das ::-moz-tree-row CSS Pseudoelement wird benutzt, um Zeilen auszuwählen und Stile auf Baumzeilen anzuwenden.

+ +

Zugehörige Elemente

+ + + +

Syntax

+ +
treechildren::-moz-tree-row { Stileigenschaften }
+
+ +

Stileigenschaften

+ + + +

Beispiele

+ +
treechildren::-moz-tree-row( foo bar )
+{
+    margin: 2%;
+}
+
+ +

...wo...

+ +
  <treerow properties="foo">...</treerow>
+
diff --git a/files/de/web/css/_colon_-moz-tree-separator/index.html b/files/de/web/css/_colon_-moz-tree-separator/index.html new file mode 100644 index 0000000000..d204747549 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-separator/index.html @@ -0,0 +1,29 @@ +--- +title: ':-moz-tree-separator' +slug: 'Web/CSS/:-moz-tree-separator' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-separator' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Stileigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-tree-twisty/index.html b/files/de/web/css/_colon_-moz-tree-twisty/index.html new file mode 100644 index 0000000000..3af5a302d0 --- /dev/null +++ b/files/de/web/css/_colon_-moz-tree-twisty/index.html @@ -0,0 +1,30 @@ +--- +title: ':-moz-tree-twisty' +slug: 'Web/CSS/:-moz-tree-twisty' +tags: + - CSS + - CSS Referenz + - Non-standard +translation_of: 'Mozilla/Gecko/Chrome/CSS/::-moz-tree-twisty' +--- +

{{CSSRef}}{{Non-standard_header}}

+ +

Aktiviert durch das properties Attribut.

+ +

Zugehörige Elemente

+ + + +

Styleeigenschaften

+ + diff --git a/files/de/web/css/_colon_-moz-ui-invalid/index.html b/files/de/web/css/_colon_-moz-ui-invalid/index.html new file mode 100644 index 0000000000..cc133a4d28 --- /dev/null +++ b/files/de/web/css/_colon_-moz-ui-invalid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-invalid' +slug: 'Web/CSS/:-moz-ui-invalid' +tags: + - CSS + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoklasse +translation_of: 'Web/CSS/:user-invalid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-ui-invalid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert nicht auf dessen Validierungsbeschränkungen basiert, unter bestimmten Umständen. Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:

+ + + +

Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Auf Pflichtfelder wird die Pseudoklasse nur angewendet, falls der Benutzer diese ändert oder versucht, einen unveränderten gültigen Wert abzuschicken.

+ +

Standardmäßig wendet Gecko einen Stil an, der ein rotes "Leuchten" (unter Vernwendung der {{cssxref("box-shadow")}} Eigenschaft) um Felder erzeugt, die diese Pseudoklasse zugewiesen haben. Siehe die {{cssxref(":invalid")}} Pseudoklasse für ein Beispiel, das zeigt, wie der Standardstil überschrieben werden kann.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-ui-valid/index.html b/files/de/web/css/_colon_-moz-ui-valid/index.html new file mode 100644 index 0000000000..163ffacd79 --- /dev/null +++ b/files/de/web/css/_colon_-moz-ui-valid/index.html @@ -0,0 +1,94 @@ +--- +title: ':-moz-ui-valid' +slug: 'Web/CSS/:-moz-ui-valid' +tags: + - CSS + - CSS Pseudoklasse + - CSS Referenz + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/:-moz-ui-valid' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-ui-valid CSS Pseudoklasse repräsentiert jedes validierte Formularelement, dessen Wert korrekt validiert basierend auf dessen Validierungsbeschränkungen.

+ +

Diese Pseudoklasse wird anhand der folgenden Regeln angewendet:

+ + + +

Das Ergebnis ist, dass wenn das Steuerungselement gültig war als der Benutzer angefangen hat, mit ihm zu interagieren, das Gültigkeitsstyling nur geändert wird, falls der Benutzer den Fokus auf ein anderes Steuerungselement setzt. Falls der Benutzer jedoch versucht, einen zuvor markierten Wert zu korrigieren, zeigt das Steuerungselement sofort an, wenn der Wert gültig wird. Pflichtfelder werden nur als ungültig markiert, falls der Benutzer diese ändert oder versucht, einen unveränderten ungültigen Wert abzuschicken.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(2)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_-moz-user-disabled/index.html b/files/de/web/css/_colon_-moz-user-disabled/index.html new file mode 100644 index 0000000000..50ea47366c --- /dev/null +++ b/files/de/web/css/_colon_-moz-user-disabled/index.html @@ -0,0 +1,19 @@ +--- +title: ':-moz-user-disabled' +slug: 'Web/CSS/:-moz-user-disabled' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/:-moz-user-disabled' +--- +
{{Non-standard_header}}{{CSSRef}}{{gecko_minversion_header("1.9")}}
+ +

Übersicht

+ +

Die :-moz-user-disabled CSS Pseudoklasse matcht Elemente, die Bilder repräsentieren, die nicht geladen wurden, weil Bilder durch die Benutzereinstellungen komplett deaktiviert wurden.

+ +

Dieser Selektor ist hauptsächlich für die Verwendung durch Themeentwickler gedacht.

diff --git a/files/de/web/css/_colon_-moz-window-inactive/index.html b/files/de/web/css/_colon_-moz-window-inactive/index.html new file mode 100644 index 0000000000..88a73ced90 --- /dev/null +++ b/files/de/web/css/_colon_-moz-window-inactive/index.html @@ -0,0 +1,51 @@ +--- +title: ':-moz-window-inactive' +slug: 'Web/CSS/:-moz-window-inactive' +tags: + - CSS + - CSS Referenz + - 'CSS:Mozilla Erweiterungen' + - NeedsBrowserCompatibility + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/:-moz-window-inactive' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :-moz-window-inactive CSS Pseudoklasse matcht jedes Element während es sich in einem inaktivem Fenster befindet.

+ +
Hinweis: Vor der Einführung dieser Pseudoklasse konnten andere Stile für Hintergrundfenster durch das Setzen eines Attributs (active="true") für das Toplevel XUL Chromefenster erreicht werden. Dieses Attribut wird nicht mehr verwendet.
+ +

:-moz-window-inactive funktioniert auch in Inhalten von HTML Dokumenten.

+ +

Beispiel

+ +

Dieses Beispiel verändert die Darstellung des Hintergrunds einer Box in Abhängigkeit davon, ob das Fenster aktiv ist oder nicht.

+ +
<style type="text/css">
+#mybox {
+  background: linear-gradient(to bottom, blue, cyan);
+}
+
+#mybox:-moz-window-inactive {
+  background: cyan;
+}
+</style>
+
+<div id="mybox" style="width:200px; height:200px;">
+  <p>Dies ist eine Box!</p>
+</div>
+
+ +

Dieses Beispiel kann als Livebeispiel betrachtet werden.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.-moz-window-inactive")}} diff --git a/files/de/web/css/_colon_-webkit-autofill/index.html b/files/de/web/css/_colon_-webkit-autofill/index.html new file mode 100644 index 0000000000..2030c723b3 --- /dev/null +++ b/files/de/web/css/_colon_-webkit-autofill/index.html @@ -0,0 +1,80 @@ +--- +title: ':-webkit-autofill' +slug: 'Web/CSS/:-webkit-autofill' +tags: + - CSS + - NeedsExample + - Non-standard + - Pseudoklasse + - Referenz +translation_of: 'Web/CSS/:-webkit-autofill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Die :-webkit-autofill CSS Pseudoklasse matcht, wenn der Wert eines {{HTMLElement("input")}} Elements durch den Browser vorausgefüllt wird.

+ +

Hinweis: Die User Agent Stylesheets einiger Browser verwenden !important in ihren :-webkit-autofill Stildeklarationen, was sie durch Webseiten nicht überschreibbar macht, ohne dass auf JavaScript Hacks zurückgegriffen werden muss.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_active/index.html b/files/de/web/css/_colon_active/index.html new file mode 100644 index 0000000000..73bb8044dd --- /dev/null +++ b/files/de/web/css/_colon_active/index.html @@ -0,0 +1,84 @@ +--- +title: ':active' +slug: 'Web/CSS/:active' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:active' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die Pseudoklasse :active entspricht jedem Element, das vom Benutzer aktiviert wurde. Beim Mauszeiger ist das die Zeitspanne, wo die Taste gedrückt gehalten wird. Deshalb wird sie meistens bei den Elementen {{HTMLElement("a")}} und {{HTMLElement("button")}} Eingesetzt, kann aber auch für jedes andere Element genutzt werden.

+ +

Die Stile können von weiteren Pseudoklassen überschrieben werden: {{cssxref(":link")}}, {{cssxref(":hover")}} und {{cssxref(":visited")}}. Deshalb ist es wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active.

+ +
Hinweis: Auf Systemen mit Mäusen mit mehreren Knöpfen, definiert CSS 3, dass die :active Pseudoklasse nur dem Hauptknopf zugewiesen wird; bei Mäusen für Rechtshänder ist dies typischerweise der linkeste Knopf.
+ +

Beispiel

+ +

HTML

+ +
<body>
+    <h1>:active CSS selector example</h1>
+    <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
+</body>
+ +

CSS

+ +
body { background-color: #ffffc9 }
+a:link { color: blue } /* unbesuchte Links */
+a:visited { color: purple } /* besuchte Links*/
+a:hover { font-weight: bold } /* Benutzer fährt mit der Maus darüber */
+a:active { color: lime } /* aktive Links */
+
+ +
{{EmbedLiveSample('Beispiel', 600, 140)}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#active-pseudo', ':active')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#useraction-pseudos', ':active')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':active')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#anchor-pseudo-classes', ':active')}}{{Spec2('CSS1')}}Standard Wert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.active")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_default/index.html b/files/de/web/css/_colon_default/index.html new file mode 100644 index 0000000000..5055b1a2b8 --- /dev/null +++ b/files/de/web/css/_colon_default/index.html @@ -0,0 +1,83 @@ +--- +title: ':default' +slug: 'Web/CSS/:default' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:default' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :default CSS Pseudoklasse repräsentiert ein Benutzerschnittstellenelement, das das Standardelement innerhalb einer Gruppe ähnlicher Elemente darstellt.

+ +

Zum Beispiel kann mithilfe dieser Pseudoklasse die Standardschaltfläche in einer Gruppe von Schaltflächen ausgewählt werden.

+ +

Benutzerschnittstellenelemente, die Mehrfachauswahlen erlauben, können mehrere Standardwerte haben, um anfangs mit mehreren selektierten Einträgen angezeigt zu werden. In diesem Fall werden alle Standardwerte über die :default Pseudoklasse angesprochen.

+ +

Syntax

+ +
:default { Stileigenschaften }
+
+ +

Beispiele

+ +
:default
+{
+  background-color: lime;
+}
+
+ +

...auf folgendes HTML angewendet...

+ +
 <form method="get">
+   <p><input type="submit" id="submit1"></p>
+   <p><input type="submit" id="submit2"></p>
+   <p><input type="reset"></p>
+ </form>
+
+ +

Dieses Beispiel färbt die Hintergrundfarbe für die Absendeschaltfläche des Formulars in lime ein.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifizationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-default', ':default')}}{{Spec2('HTML WHATWG')}}Keine Änderung.
{{SpecName('HTML5 W3C', '#selector-default', ':default')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik in Bezug auf HTML und Defines the semantic regarding HTML and Beschränkungsvalidierung.
{{SpecName('CSS4 Selectors', '#default-pseudo', ':default')}}{{Spec2('CSS4 Selectors')}}Keine Änderung.
{{SpecName('CSS3 UI', '#pseudo-default', ':default')}}{{Spec2('CSS3 UI')}}Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.default")}} diff --git a/files/de/web/css/_colon_dir/index.html b/files/de/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..160ff8063b --- /dev/null +++ b/files/de/web/css/_colon_dir/index.html @@ -0,0 +1,69 @@ +--- +title: ':dir()' +slug: 'Web/CSS/:dir' +tags: + - CSS + - CSS Pseudoklasse + - Experimentell + - Referenz +translation_of: 'Web/CSS/:dir' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die :dir CSS Pseudoklasse matcht Elemente basierend auf der Direktionalität des in ihnen beinhalteten Texts. In HTML wird die Richtung durch das {{htmlattrxref("dir", "html")}} Attribut bestimmt. Für andere Dokumenttypen können andere Methoden zur Bestimmung der Sprache existieren.

+ +

Beachte, dass die Verwendung der Pseudoklasse :dir() nicht gleichbedeutend mit den [dir=…] Attributselektoren ist. Letztere matchen einen Wert von {{htmlattrxref("dir", "html")}} und matchen nicht, falls kein Attribut gesetzt ist, auch wenn in diesem Fall das Elemente den Wert seines Elternelements erbt; ebenso matchen [dir=rtl] oder [dir=ltr] auch nicht den auto Wert, der für das dir Attribut verwendet werden kann. Im Gegensatz dazu matcht :dir() den vom User Agent berechneten, den geerbten oder den auto Wert.

+ +

Auch berücksichtigt :dir() nur den semantischen Wert der Ausrichtung, der innerhalb des Dokuments definiert wird, normalerweise in HTML. Er berücksichtigt nicht die Styling-Ausrichtung, die durch CSS Eigenschaften wie {{cssxref("direction")}}, welche rein stilistisch sind, gesetzt wird.

+ +

Syntax

+ +
/* element:dir(directionality) { Stileigenschaften }
+   wobei die Richtungn ltr oder rtl ist */
+
+div:dir(ltr) { /* Stileigenschaften */ }
+span:dir(rtl) { /* Stileigenschaften */ }
+
+ +

Beispiele

+ +
<div dir="rtl">
+  <span>test1</span>
+  <div dir="ltr">test2
+    <div dir="auto">עִבְרִית</div>
+  </div>
+</div>
+
+ +

In diesem Beispiel matcht :dir(rtl) den obersten div, span, welcher test1 beinhaltet und den div mit den hebräischen Zeichen. :dir(ltr) matcht den div, der test2 beinhaltet.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}}{{Spec2('CSS4 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.dir")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_disabled/index.html b/files/de/web/css/_colon_disabled/index.html new file mode 100644 index 0000000000..cd11062408 --- /dev/null +++ b/files/de/web/css/_colon_disabled/index.html @@ -0,0 +1,139 @@ +--- +title: ':disabled' +slug: 'Web/CSS/:disabled' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:disabled' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :disabled CSS Pseudoklasse steht für alle deaktivierten Elemente. Ein Element gilt als deaktiviert, wenn es nicht aktiviert (d.h. ausgewählt, angeklickt oder mit Text gefüllt) oder fokussiert werden kann. Das Element verfügt außerdem über einen Status, in dem es aktiviert oder fokussiert werden kann.

+ +

Beispiele

+ +

Beispielselektoren

+ +
+
input:disabled
+
Wählt alle deaktivierten Eingabefelder aus.
+
select.country:disabled
+
Wählt ein deaktiviertes Zielelement mit der Klasse country aus.
+
+ +

Anwendungsbeispiel

+ +

Das folgende CSS:

+ +
input[type="text"]:disabled {
+  background: #ccc;
+}
+
+ +

Angewendet auf das folgende HTML5 Beispiel:

+ +
<form action="#">
+  <fieldset>
+    <legend>Shipping address</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Address">
+    <input type="text" placeholder="Zip Code">
+  </fieldset>
+  <fieldset id="billing">
+    <legend>Billing address</legend>
+    <label for="billing_is_shipping">Same as shipping address:</label>
+    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+
+ +
<form action="#">
+  <fieldset>
+    <legend>Empfängeradresse</legend>
+    <input type="text" placeholder="Name">
+    <input type="text" placeholder="Adresse">
+    <input type="text" placeholder="PLZ">
+  </fieldset>
+  <fieldset>
+    <legend>Rechnungsadresse</legend>
+    <label for="billing_is_shipping">Rechnungsadresse entspricht der Empfängeradresse:</label>
+    <input type="checkbox" onchange="javascript:toggleBilling()" checked>
+    <br />
+    <input type="text" placeholder="Name" disabled>
+    <input type="text" placeholder="Address" disabled>
+    <input type="text" placeholder="Zip Code" disabled>
+  </fieldset>
+</form>
+
+ +

Mit ein wenig JavaScript:

+ +
function toggleBilling() {
+  var billingItems = document.querySelectorAll('#billing input[type="text"]');
+  for (var i = 0; i < billingItems.length; i++) {
+    billingItems[i].disabled = !billingItems[i].disabled;
+  }
+}
+
+ +

Führt zu einem ergrautem Hintergrund aller Texteingabefelder im {{HTMLElement("fieldset")}} der Rechnungsadresse.

+ +

{{EmbedLiveSample('Anwendungsbeispiel', '300px', '250px', '', 'Web/CSS/:disabled')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-disabled', ':disabled')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-disabled', ':disabled')}}{{Spec2('HTML5 W3C')}}Beschreibt die Semantik von HTML und Formularen.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 UI', '#pseudo-classes', ':disabled')}}{{Spec2('CSS3 UI')}}Verweis auf Selektors Level 3
{{SpecName('CSS3 Selectors', '#enableddisabled', ':disabled')}}{{Spec2('CSS3 Selectors')}}Beschreibt die Pseudoklasse,aber nicht die dazugehörige Semantik.
+ +

Browserkompatibilität

+ +{{Compat("css.selectors.disabled")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_empty/index.html b/files/de/web/css/_colon_empty/index.html new file mode 100644 index 0000000000..ed47ba891a --- /dev/null +++ b/files/de/web/css/_colon_empty/index.html @@ -0,0 +1,66 @@ +--- +title: ':empty' +slug: 'Web/CSS/:empty' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:empty' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Der pseudo-Klassen Selektor :empty wählt Elemente aus, die über kein Kindelement verfügen. Ein Inhalt in Form von einem Text wird dabei ebenfalls als ein Kind des Elementes angesehen, Kommentare und sonstige Verarbeitungsanweisungen jedoch nicht.

+ +

Syntax

+ +
<element>:empty { /* Deklarationsblock */ }
+
+ +

Beispiele

+ +
span:empty::before  {
+  background-color: lime;
+}
+
+ +

Die ersten beiden span Elemente sind leer, sodass der :empty Selektor angewendet wird. Auf die letzten drei trifft das jedoch nicht zu.

+ +
<span></span>
+<span><!-- Dieses Element wird grün dargestellt --></span>
+
+<span> </span>
+<span>Lorem ipsum</span>
+<span><strong></strong></span>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#empty-pseudo', ':empty')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#empty-pseudo', ':empty')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.empty")}} diff --git a/files/de/web/css/_colon_enabled/index.html b/files/de/web/css/_colon_enabled/index.html new file mode 100644 index 0000000000..1d4f3888d5 --- /dev/null +++ b/files/de/web/css/_colon_enabled/index.html @@ -0,0 +1,96 @@ +--- +title: ':enabled' +slug: 'Web/CSS/:enabled' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:enabled' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :enabled CSS Pseudoklasse repräsentiert alle aktivierten Elemente. Ein Element ist aktiviert, falls es aktiviert werden kann (z. B. markierte, angeklickte Elemente oder solche, die Texteingaben akzeptieren) oder die fokussiert werden können. Das Element hat auch einen deaktivierten Zustand, in welchem es nicht aktiviert werden oder fokussiert werden kann.

+ +

Beispiel

+ +

Der folgende Code macht die Textfarbe grün, wenn das Element aktiviert ist, und grau, wenn es deaktiviert ist. Dies erlaubt es, dem Benutzer Feedback darüber zu geben, ob mit den Elementen interagiert werden kann oder nicht.

+ +
+

Das folgende HTML...

+ +
<form action="url_of_form">
+  <label for="FirstField">First field (enabled):</label> <input type="text" id="FirstField" value="Lorem"><br />
+  <label for="SecondField">Second field (disabled):</label> <input type="text" id="SecondField" value="Ipsum" disabled="disabled"><br />
+  <input type="button" value="Submit" />
+</form>
+ +

...in Verwendung mit diesem CSS...

+ +
input:enabled {
+  color: #22AA22;
+}
+
+input:disabled {
+  color: #D9D9D9;
+}
+
+ +

...ergibt:

+ +
{{EmbedLiveSample("Aktivierte_deaktivierte_Inputs_Beispiel", 550, 95)}}
+ +
Beachte, dass die Farbe des Buttontexts auch grün ist, da der Button ebenfalls aktiviert ist.
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-enabled', ':enabled')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-enabled', ':enabled')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik in Bezug auf HTML und Formulare.
{{SpecName('CSS4 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Basic UI', '#pseudo-classes', ':enabled')}}{{Spec2('CSS3 Basic UI')}}Verknüpfung zu Selectors Level 3.
{{SpecName('CSS3 Selectors', '#enableddisabled', ':enabled')}}{{Spec2('CSS3 Selectors')}}Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.enabled")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_first-child/index.html b/files/de/web/css/_colon_first-child/index.html new file mode 100644 index 0000000000..150c836d17 --- /dev/null +++ b/files/de/web/css/_colon_first-child/index.html @@ -0,0 +1,103 @@ +--- +title: ':first-child' +slug: 'Web/CSS/:first-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:first-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :first-child CSS Pseudoklasse repräsentiert jedes Element, das das erste Kindelement seines Elternelements ist.

+ +

Syntax

+ +
element:first-child { Stileigenschaften }
+
+ +

Beispiele

+ +

Beispiel 1

+ +

HTML Inhalt

+ +
<div>
+  <span>Dieser Text ist grün!</span>
+  <span>Dieser Text nicht. :(</span>
+</div>
+
+ +

CSS Inhalt

+ +
span:first-child {
+    background-color: lime;
+}
+
+ +

... sieht folgendermaßen aus:

+ +

{{EmbedLiveSample('Beispiel_1',300,50)}}

+ +

Beispiel 2 - Verwendung von UL

+ +

HTML Inhalt

+ +
<ul>
+  <li>Eintrag 1</li>
+  <li>Eintrag 2</li>
+  <li>Eintrag 3</li>
+</ul>
+ +

CSS Inhalt

+ +
li{
+  color:red;
+}
+li:first-child{
+  color:green;
+}
+ +

... sieht folgendermaßen aus:

+ +

{{EmbedLiveSample('Beispiel_2_-_Verwendung_von_UL',300,100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#first-child-pseudo', ':first-child')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.first-child")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_first-of-type/index.html b/files/de/web/css/_colon_first-of-type/index.html new file mode 100644 index 0000000000..f99d9991c7 --- /dev/null +++ b/files/de/web/css/_colon_first-of-type/index.html @@ -0,0 +1,76 @@ +--- +title: ':first-of-type' +slug: 'Web/CSS/:first-of-type' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:first-of-type' +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die :first-of-type CSS Pseudoklasse repräsentiert den ersten Geschwisterknoten eines Typs in der Liste der Kindknoten des Elternelements.

+ +

Syntax

+ +
element:first-of-type { Stileigenschaften }
+
+ +

Beispiel

+ +

Dieses Beispiel zeigt, wie der universelle Selektor angenommen wird, falls kein einfacher Selektor angegeben wird.

+ +
div :first-of-type {
+  background-color: lime;
+}
+ +
<div>
+  <span>Dieser Text kommt zuerst!</span>
+  <span>Dieser Text nicht. :(</span>
+  <span>Was ist mit diesem <em>verschachtelten Element</em>?</span>
+  <strike>Dies ist ein weiterer Typ.</strike>
+  <span>Dieser leider nicht...</span>
+</div>
+
+ +

...ergibt:

+ +
{{EmbedLiveSample('Beispiel','100%', '120')}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#first-of-type-pseudo', ':first-of-type')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.first-of-type")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_first/index.html b/files/de/web/css/_colon_first/index.html new file mode 100644 index 0000000000..2af8daa43a --- /dev/null +++ b/files/de/web/css/_colon_first/index.html @@ -0,0 +1,65 @@ +--- +title: ':first' +slug: 'Web/CSS/:first' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:first' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :first {{cssxref("@page")}} CSS Pseudoklasse beschreibt das Styling der ersten Seite, wenn ein Dokument gedruckt wird.

+ +
Hinwweis: Nicht alle CSS Eigenschaften sind veränderbar. Es können nur Ränder, Schusterjungen, Hurenkinder und Seitenumbrüche innerhalb des Dokuments geändert werden. Alle anderen CSS Eigenschaften werden ignoriert.
+ +

Beispiele

+ +
@page :first {
+  margin: 2in 3in;
+}
+
+ +
Hinwweis: Nur die absoluten Längeneinheiten können verwendet werden, wenn ein Rand definiert wird. Bitte schaue dir die Seite über Längen für mehr Informationen an.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}{{Spec2('CSS3 Paged Media')}}Keine Änderung
{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.first")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_focus/index.html b/files/de/web/css/_colon_focus/index.html new file mode 100644 index 0000000000..6d0fb0aac5 --- /dev/null +++ b/files/de/web/css/_colon_focus/index.html @@ -0,0 +1,79 @@ +--- +title: ':focus' +slug: 'Web/CSS/:focus' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:focus' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudoklasse :focus steht für Elemente, welche mit einem Eingabegerät, wie z. B. der Tastatur, fokusiert wurden.

+ +

Syntax

+ +
element:focus { ... }
+ +

Beispiele

+ +
.first-name:focus {
+  color: red;
+}
+
+.last-name:focus {
+  color: lime;
+}
+ +
<input class="first-name" value="Dieser Text wird rot, wenn das Textfeld den Fokus erhält">
+<input class="last-name" value="Dieser Text wird grün, wenn das Textfeld den Fokus erhält">
+ +

{{EmbedLiveSample('Beispiele', '100%', 40)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.focus")}}

+ +

Siehe auch

+ +

 

+ + + +

 

diff --git a/files/de/web/css/_colon_fullscreen/index.html b/files/de/web/css/_colon_fullscreen/index.html new file mode 100644 index 0000000000..8d10c1176d --- /dev/null +++ b/files/de/web/css/_colon_fullscreen/index.html @@ -0,0 +1,81 @@ +--- +title: ':fullscreen' +slug: 'Web/CSS/:fullscreen' +tags: + - CSS + - CSS Mozilla Erweiterungen + - CSS Pseudoklasse + - Experimentell + - Layout + - NeedsLiveSample + - Referenz + - Vollbild + - Web +translation_of: 'Web/CSS/:fullscreen' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudoklasse :fullscreen betrifft jedes Element, welches sich im Vollbildmodus befindet. Sie selektiert nicht nur das Toplevelelement, sondern den ganzen Stapel an Elementen.

+ +
Das W3C empfiehlt das zusammengeschriebene :fullscreen, d. h. ohne Bindestrich, jedoch haben sowohl Gecko als auch Webkit eine Präfixversion mit Bindestrich implementiert : :-webkit-full-screen und :-moz-full-screen. Microsoft Edge und Internet Explorer verwenden die Syntaxen :fullscreen und :-ms-fullscreen.
+ +

Beispiele

+ +
*:fullscreen {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+ +
h1:fullscreen {
+  border: 1px solid #f00;
+}
+ +
p:fullscreen {
+  font-size: 200%;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('Fullscreen', '#:fullscreen-pseudo-class', ':fullscreen')}}{{Spec2('Fullscreen')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.fullscreen")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_hover/index.html b/files/de/web/css/_colon_hover/index.html new file mode 100644 index 0000000000..a26cfdbed9 --- /dev/null +++ b/files/de/web/css/_colon_hover/index.html @@ -0,0 +1,122 @@ +--- +title: ':hover' +slug: 'Web/CSS/:hover' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:hover' +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die :hover CSS Pseudoklasse wird verwendet, wenn der Nutzer einen Link auswählt, auch ohne ihn zu aktivieren. Dieser Stil kann von weiteren Link-abhängigen Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":visited") }} und {{ cssxref(":active") }}. Um nur entsprechende Links auszuwählen, ist es wichtig die :hover Regel nach den :link und :visited Regeln, aber vor der :active Regel zu erwähnen, wie beschrieben in der LVHA-Reihenfolge: :link — :visited — :hover — :active.

+ +

Die :hover Pseudoklasse kann auf alle Pseudoelemente angewendet werden. {{experimental_inline}}

+ +

Webbrowser (User-Agents) wie Firefox, Internet Explorer, Safari, Opera oder Chrome, wenden den zugehörigen Stil an, wenn der Cursor (Mauszeiger) über ein Element fährt.

+ +
Hinweis: Auf Touchscreens ist :hover problematisch oder unmöglich. Abhängig vom Browser, tritt die :hover Pseudoklasse niemals, nur für einen kurzen Moment nach dem Berühren in Kraft oder bleibt aktiviert, auch wenn der Nutzer das Element nicht mehr berührt, bis er ein anderes Element berührt. Weil Touchscreen-Geräte oft gleich sind, ist es wichtig für Webentwickler, keinen Inhalt zu haben, der nur über die :hover Pseudoklasse aufrufbar ist, da es für Nutzer von solchen Geräten schwierig oder unmöglich ist, diesen Inhalt aufzurufen.
+ +

Beispiele

+ +
:link:hover { outline: dotted red; }
+
+.foo:hover { background: gold; }
+
+ + + +

Mit der :hover Pseudoklasse kann man komplexe Algorithmen in CSS erstellen. Dies ist eine verbreitete Methode, die genutzt wird, um beispielsweise Dropdown Menüs nur mit CSS (ohne JavaScript) zu erstellen. Die Idee dieser Methode ist das Erstellen einer Regel, wie die Folgende:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+
+ +

Sie kann auf folgende HTML Struktur angewendet werden:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menü</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Untermenü</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Untermenü</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Sieh dir unser CSS-basiertes Dropdown Menü Beispiel für eine mögliche Lösung an.

+ +

Galerie mit Vollbild-Bildern und Vorschauen

+ +

Man kann die :hover Pseudoklasse nutzen, um eine Bildergalerie mit Vollbild-Bildern, welche nur angezeigt werden, wenn der Nutzer mit der Maus über die Vorschau fährt, zu erstellen. Sieh dir dafür diese Demo an.

+ +
Hinweis: Für einen analogen Effekt, der jedoch auf der {{ cssxref(":checked") }} Pseudoklasse basiert (angewendet auf Auswahlfelder), sieh dir diese Demo an, übernommen von der {{ cssxref(":checked") }} Seite.
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS4 Selectors', '#hover', ':hover') }}{{ Spec2('CSS4 Selectors') }}Kann auf jedes Pseudoelement angewendet werden.
{{ SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':hover') }}{{ Spec2('CSS3 Selectors') }}Keine wesentlichen Veränderungen
{{ SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':hover') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.hover")}} + +

Siehe auch:

+ + diff --git a/files/de/web/css/_colon_in-range/index.html b/files/de/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..0cdd2fb178 --- /dev/null +++ b/files/de/web/css/_colon_in-range/index.html @@ -0,0 +1,117 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

Die :in-range CSS Pseudoklasse entspricht einem {{htmlelement("input")}} Element, dessen aktueller Wert innerhalb eines bestimmten Bereichs liegt. Dieser Bereich wird durch die {{htmlattrxref("min", "input")}} und {{htmlattrxref("max","input")}} Attribute festgelegt.

+ +
/* Wählt jedes <input> Element aus, aber nur wenn es eine
+   Begrenzung festlegt, und sein Wert innerhalb dieser
+   Begrenzung liegt */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

Diese Pseudoklasse ist nützlich um den Nutzer visuell darauf hinzuweisen, dass der aktuelle Wert des Feldes innerhalb der erlaubten Begrenzungen liegt.

+ +
Note: Diese Pseudoklasse gilt nur für Elemente, die eine Begrenzung haben. Wenn es eine solche Begrenzung nicht gibt, kann der Wert des Elements weder "in-range" (innerhalb der Begrenzung) noch "out-of-range" (außerhalb der Begrenzung) sein.
+ +

Syntax

+ +
{{csssyntax}}
+ +

Beispiel

+ +
+

HTML

+ +
<form action="" id="form1">
+  <ul>Werte zwischen 1 und 10 sind gültig.
+    <li>
+      <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+      <label for="value1">Der Wert ist </label>
+    </li>
+  </ul>
+</form>
+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+
+input {
+  border: 1px solid black;
+}
+
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+
+input:in-range + label::after {
+  content: 'okay.';
+}
+
+input:out-of-range + label::after {
+  content: 'außerhalb der Begrenzung!';
+}
+ +

Result

+
+ +
{{EmbedLiveSample('Example', 600, 140)}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Definiert wann :in-range HTML-Elementen entspricht.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Standard Wert definiert.
+ +

Browser compatibility

+ +
+
+ + +

{{Compat("css.selectors.in-range")}}

+
+
+ +

See also

+ + diff --git a/files/de/web/css/_colon_indeterminate/index.html b/files/de/web/css/_colon_indeterminate/index.html new file mode 100644 index 0000000000..8f229baed2 --- /dev/null +++ b/files/de/web/css/_colon_indeterminate/index.html @@ -0,0 +1,74 @@ +--- +title: ':indeterminate' +slug: 'Web/CSS/:indeterminate' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:indeterminate' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :indeterminate CSS Pseudoklasse repräsentiert alle <input type="checkbox"> Elements, deren indeterminate DOM Eigenschaft durch JavaScript auf true gesetzt wurde. Darüber hinaus wird sie in manchen Browsern dazu verwendet, {{HTMLElement("progress")}} Elemente in einem Zwischenstatus zu finden.

+ +

Beispiel

+ +
input, span {
+  background: red;
+}
+
+:indeterminate, :indeterminate + span {
+  background: limegreen;
+}
+
+ +
<input type="checkbox"> <span>Der Inhalt dieses Absatzes hat eine grüne Hintergrundfarbe.</span>
+
+ +
document.getElementsByTagName("input")[0].indeterminate = true;
+
+ +

{{EmbedLiveSample('Beispiel', '100%', 50)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik bezüglich HTML und Begrenzungsvalidierung.
{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 UI', '#indeterminate', ':indeterminate')}}{{Spec2('CSS3 UI')}}Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.indeterminate")}} diff --git a/files/de/web/css/_colon_invalid/index.html b/files/de/web/css/_colon_invalid/index.html new file mode 100644 index 0000000000..4dc3873fd3 --- /dev/null +++ b/files/de/web/css/_colon_invalid/index.html @@ -0,0 +1,134 @@ +--- +title: ':invalid' +slug: 'Web/CSS/:invalid' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:invalid' +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die Pseudoklasse :invalid entspricht jedem {{ HTMLElement("input") }}- oder {{ HTMLElement("form") }}-Element, dessen Inhalt nicht gemäß der Eigenschaften des Eingabeelements validiert werden kann. Dadurch kann die Darstellung ungültiger Felder auf einfache Weise angepasst werden, damit Benutzer*innen fehlerhafte Eingaben gut identifizieren und korrigieren können.

+ +

Standardmäßig wendet Gecko keinen Stil auf die Pseudoklasse :invalid an. Jedoch wendet es einen Stil (ein rotes "Leuchten" mithilfe der Eigenschaft {{ Cssxref("box-shadow") }}) auf die Pseudoklasse {{ Cssxref(":-moz-ui-invalid") }} an, der einen Teil der Fälle für :invalid betrifft.

+ +

Das Leuchten kann mit dem folgenden CSS ausgeschaltet werden. Es kann auch komplett überschrieben werden, um das Aussehen von ungültigen Feldern anzupassen.

+ +
:invalid {
+  box-shadow: none;
+}
+
+:-moz-submit-invalid {
+  box-shadow: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Anmerkungen

+ +

Radio Buttons

+ +

Wenn in einer Gruppe von Radio Buttons (d.i., wenn alle den gleichen Wert für ihr name-Attribut besitzen) kein Radio Button ausgewählt ist und mindestens einer die Eigenschaft required hat, wird die Pseudoklasse :invalid auf alle Radio Buttons der Gruppe angewendet.

+ +

Beispiel

+ +

Dieses Beispiel zeigt ein einfaches Formular, dessen gültige Elemente grün und dessen ungültige Elemente rot gefärbt werden.

+ +

HTML

+ +
<form>
+  <label for="url_input">Geben Sie eine URL ein:</label>
+  <input type="url" id="url_input" />
+  <br />
+  <br />
+  <label for="email_input">Geben Sie eine E-Mail-Adresse ein:</label>
+  <input type="email" id="email_input" required/>
+</form>
+ +

CSS

+ +
input:invalid {
+  background-color: #ffdddd;
+}
+
+form:invalid {
+  border: 5px solid #ffdddd;
+}
+
+input:valid {
+  background-color: #ddffdd;
+}
+
+form:valid {
+  border: 5px solid #ddffdd;
+}
+
+input:required {
+  border-color: #800000;
+  border-width: 3px;
+}
+
+input:required:invalid {
+  border-color: #C00000;
+}
+ +

{{ EmbedLiveSample('Example2',600,150) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('HTML WHATWG', '#selector-invalid', ':invalid') }}{{ Spec2('HTML WHATWG') }}Keine Änderung.
{{ SpecName('HTML5 W3C', '#selector-invalid', ':invalid') }}{{ Spec2('HTML5 W3C') }}Definiert Semantik bezogen auf HTML und Überprüfung der Einschränkungen.
{{ SpecName('CSS4 Selectors', '#validity-pseudos', ':invalid') }}{{ Spec2('CSS4 Selectors') }}Keine Änderung.
{{ SpecName('CSS3 Basic UI', '#pseudo-validity', ':invalid') }}{{ Spec2('CSS3 Basic UI') }}Definiert die Pseudoklasse, aber nicht die dazugehörige Semantik.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.selectors.invalid")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_lang/index.html b/files/de/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..4bf15acd0f --- /dev/null +++ b/files/de/web/css/_colon_lang/index.html @@ -0,0 +1,85 @@ +--- +title: ':lang' +slug: 'Web/CSS/:lang' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :lang CSS Pseudoklasse matcht Elemente anhand der Sprache, in der das Element ist. In HTML wird die Sprache durch eine Kombination aus lang Attribut, dem {{HTMLElement("meta")}} Element und möglicherweise durch Informationen durch das Protokoll (wie z. B. HTTP Header). Für andere Dokumenttypen können andere Dokumentmethoden zur Bestimmung der Sprache existieren.

+ +

Akzeptierte language-code Strings werden in der HTML 4.0 Specification definiert.

+ +

Syntax

+ +
element:lang(language-code) { Stileigenschaften }
+
+ +

Beispiel

+ +

In diesem Beispiel wird der lang Selektor dazu verwendet, um mit Hilfe von Kindselektoren das Elternelement eines {{HTMLElement("q")}} Elements zu matchen. Es ist nicht dazu gedacht, den einzigen oder sogar den korrekten (was vom Dokumenttyp abhängt) Weg aufzuzeigen, um dies umzusetzen. Beachte, Unicodewerte werden verwendet, um spezielle Anführungszeichen anzugeben.

+ +
:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+
+ +

... wo ...

+ +
  <div lang="fr"><q>Dieses französische Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div>
+  <div lang="de"><q>Dieses deutsche Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div>
+  <div lang="en"><q>Dieses englische Anführungszeichen hat ein <q>verschachteltes</q> Zitat.</q></div>
+
+ +

... wird dargestellt als ...

+ +

{{EmbedLiveSample('Beispiel', '100%', 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}Keine wesentliche Änderung
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.lang")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_last-child/index.html b/files/de/web/css/_colon_last-child/index.html new file mode 100644 index 0000000000..368ad9a58a --- /dev/null +++ b/files/de/web/css/_colon_last-child/index.html @@ -0,0 +1,74 @@ +--- +title: ':last-child' +slug: 'Web/CSS/:last-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:last-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :last-child CSS Pseudoklasse repräsentiert jedes Element, das das letzte Kindelement seines Elternelements ist.

+ +

Syntax

+ +
element:last-child { Stileigenschaften }
+ +

Beispiel

+ +

HTML Inhalt

+ +
<ul>
+  <li>Dieser Punkt ist nicht grün.</li>
+  <li>Auch nicht dieser.</li>
+  <li>Dieser Punkt ist es! :)</li>
+</ul>
+ +

CSS Inhalt

+ +
li:last-child {
+  background-color: lime;
+}
+ +

{{EmbedLiveSample('Beispiel', '100%', 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.last-child")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_last-of-type/index.html b/files/de/web/css/_colon_last-of-type/index.html new file mode 100644 index 0000000000..267747715f --- /dev/null +++ b/files/de/web/css/_colon_last-of-type/index.html @@ -0,0 +1,86 @@ +--- +title: ':last-of-type' +slug: 'Web/CSS/:last-of-type' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:last-of-type' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :last-of-type CSS Pseudoklasse repräsentiert den letzten Geschwisterknoten eines Typs in der Liste von Kindknoten des Elternelements.

+ +

Syntax

+ +
element:last-of-type { Stileigenschaften }
+
+ +

Beispiel

+ +

Um das letzte {{HTMLElement("em")}} Element innerhalb eines {{HTMLElement("p")}} Elements auszuwählen, kann folgender Code verwendet werden:

+ +
p em:last-of-type {
+  color: lime;
+}
+
+ +
<p>
+  <em>Ich bin nicht grün. :(</em>
+  <strong>Ich bin nicht grün. :(</strong>
+  <em>Ich bin grün! :D</em>
+  <strong>Ich bin auch nicht grün. :(</strong>
+</p>
+
+<p>
+  <em>Ich bin nicht grün. :(</em>
+  <span><em>Ich bin grün!</em></span>
+  <strong>Ich bin nicht grün. :(</strong>
+  <em>Ich bin grün! :D</em>
+  <span><em>Ich bin auch grün!</em> <strike> Ich bin nicht grün. </strike></span>
+  <strong>Ich bin auch nicht grün. :(</strong>
+</p>
+ +

...entspricht:

+ +
{{EmbedLiveSample('Beispiel','100%', '120')}}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#last-of-type-pseudo', ':last-of-type')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.last-of-type")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_link/index.html b/files/de/web/css/_colon_link/index.html new file mode 100644 index 0000000000..0ac0cb3d3d --- /dev/null +++ b/files/de/web/css/_colon_link/index.html @@ -0,0 +1,70 @@ +--- +title: ':link' +slug: 'Web/CSS/:link' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:link' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :link Pseudoklasse erlaubt es, Links innerhalb von Elementen auszuwählen. Dies wählt jeden Link aus, der bisher noch nicht besucht wurde, auch die, die bereits durch andere Selektoren anderer linkbezogener Pseudoklassen wie {{cssxref(":hover")}}, {{cssxref(":active")}} oder {{cssxref(":visited")}} gestylt wurden. Um nur die unbesuchten Links anzusprechen, ist es deshalb wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active. Die {{cssxref(":focus")}} Pseudoklasse wird normalerweise direkt neben :hover platziert, je nach gewünschtem Effekt davor oder danach.

+ +

Beispiele

+ +
a:link {
+  color: slategray;
+}
+
+.external:link {
+  background-color: lightblue;
+}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS4 Selectors', '#link', ':link') }}{{ Spec2('CSS4 Selectors') }}Keine Änderung
{{ SpecName('CSS3 Selectors', '#link', ':link') }}{{ Spec2('CSS3 Selectors') }}Keine Änderung
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}{{ Spec2('CSS2.1') }}Berenzung auf {{HTMLElement("a")}} aufgehoben
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}{{ Spec2('CSS1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.link")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_not/index.html b/files/de/web/css/_colon_not/index.html new file mode 100644 index 0000000000..cddf772707 --- /dev/null +++ b/files/de/web/css/_colon_not/index.html @@ -0,0 +1,76 @@ +--- +title: ':not()' +slug: 'Web/CSS/:not' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:not' +--- +
{{ CSSRef() }}
+ +

Übersicht

+ +

Die CSS Pseudoklasse :not(X) ist eine Negation zu einem Selektor X als Argument und wird als Funktion angegeben. Sie passt auf Elemente, die nicht durch das Argument repräsentiert werden. X darf keinen weiteren Negationsselektor beinhalten.

+ +

Die Spezifität der :not Pseudoklasse entspricht der Spezifität seines Arguments. Die :not Pseudoklasse hat im Gegensatz zu anderen Pseudoklassen keinen Einfluss auf die Spezifität.

+ +
Hinweise: + + +
+ +

Syntax

+ +
:not(selector) { Stileigenschaften }
+ +

Beispiele

+ +
p:not(.classy) { color: red; }
+:not(p) { color: green; }
+ +

auf folgendes HTML angewandt:

+ +
<p>Irgendein Text.</p>
+<p class="classy">Irgendein anderer Text.</p>
+<span>Noch mehr Text<span>
+
+ +

ergibt:

+ +

{{EmbedLiveSample('Beispiele', '100%', '150')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#negation', ':not()')}}{{Spec2('CSS4 Selectors')}}Argument erweitert, um komplexe Selektoren zu ermöglichen.
{{SpecName('CSS3 Selectors', '#negation', ':not()')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.not")}} diff --git a/files/de/web/css/_colon_nth-child/index.html b/files/de/web/css/_colon_nth-child/index.html new file mode 100644 index 0000000000..17dc2c3387 --- /dev/null +++ b/files/de/web/css/_colon_nth-child/index.html @@ -0,0 +1,163 @@ +--- +title: ':nth-child' +slug: 'Web/CSS/:nth-child' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:nth-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :nth-child(an+b) CSS Pseudo-Klasse passt auf ein Element, das im Dokumentbaum an+b-1 Geschwisterknoten vor sich hat, wobei n einen gegebenen positiven Wert oder den Wert 0 hat. Zudem muss das Element einen Elternknoten haben. Einfacher ausgedrückt: Beginnend bei einem Startindex b trifft der Selector auf jedes n-te folgende Element zu.

+ +

Einige Beispiele:

+ + + +

Die Werte a und b müssen beide Integer sein, und der Index des ersten Kindelements eines Knotens ist 1. In anderen Worten, diese Klasse trifft auf alle Kindelemente zu, deren Index Teil der Menge { an + b; n = 0, 1, 2, ... } ist.

+ +

Ein beliebter Anwendungsfall ist das Auswählen jeder zweiten Reihe in einer Tabelle.

+ +

Syntax

+ +
element:nth-child(an + b) { style properties }
+
+ +

Beispiele

+ +

Beispielselektoren

+ +
+
tr:nth-child(2n+1)
+
Wählt die ungeraden Reihen einer HTML-Tabelle aus.
+
tr:nth-child(odd)
+
Wählt die ungeraden Reihen einer HTML-Tabelle aus.
+
tr:nth-child(2n)
+
Wählt die geraden Reihen einer HTML-Tabelle aus.
+
tr:nth-child(even)
+
Wählt die geraden Reihen einer HTML-Tabelle aus.
+
span:nth-child(0n+1)
+
Selektiert ein span Element, welches das erste Kind seines Elternknotens ist. Dies entspricht dem {{Cssxref(':first-child')}} Selector.
+
span:nth-child(1)
+
Entspricht dem vorherigen Beispiel.
+
span:nth-child(-n+3)
+
Erzielt einen Treffer, wenn das Element vom Typ span ist und zudem eines der ersten drei Kinder seines Elternknotens ist.
+
+ +

Gesamtbeispiel

+ +

Im folgenden ein HTML-Beispiel:

+ +
<p><code>span:nth-child(2n+1)</code>, <em>ohne</em> ein <code>&lt;em&gt;</code>
+ unter den Kindelementen. Element 1, 3, 5, und 7 sind ausgewählt, wie erwartet.</p>
+
+<div class="first">
+      <span>Dieses span ist ausgewählt</span>
+      <span>Dieses span is nicht. :(</span>
+      <span>Wie sieht's mit diesem aus?</span>
+      <span>Und dieses?</span>
+      <span>Noch ein Beispiel</span>
+      <span>Und noch eins</span>
+      <span>Zu guter Letzt</span>
+</div>
+
+<p><code>span:nth-child(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
+ unter den Kindelementen. Element 1, 5, und 7 sind ausgewählt. 3 wird beim Zählen berücksichtigt
+ weil es ein Kind ist, aber es ist nicht ausgewählt, weil es kein
+<code>&lt;span&gt;</code> ist.</p>
+
+<div class="second">
+      <span>Dieses span ist ausgewählt!</span>
+      <span>Dieses span nicht. :(</span>
+      <em>Dieses ist ein em.</em>
+      <span>Wie sieht's mit diesem aus?</span>
+      <span>Und dieses?</span>
+      <span>Noch ein Beispiel</span>
+      <span>Und noch eins</span>
+      <span>Zu guter Letzt</span>
+</div>
+
+<p><code>span:nth-of-type(2n+1)</code>, <em>mit</em> einem <code>&lt;em&gt;</code>
+ unter den Kindern. Element 1, 4, 6, und 8 sind ausgewählt. 3 ist
+ nicht bei der Zählung berücksichtigt oder ausgewählt, weil es ein <code>&lt;em&gt;</code> ist,
+und kein <code>&lt;span&gt;</code>, und <code>nth-of-type</code> selektiert nur
+ Kinder dieses Typs. Das <code>&lt;em&gt;</code> wird übersprungen und ignoriert.
+</p>
+
+<div class="third">
+      <span>Dieses span ist ausgewählt!</span>
+      <span>Dieses span nicht. :(</span>
+      <em>Dieses ist ein em.</em>
+      <span>Wie sieht's mit diesem aus?</span>
+      <span>Und dieses?</span>
+      <span>Noch ein Beispiel</span>
+      <span>Und noch eins</span>
+      <span>Zu guter Letzt</span>
+</div>
+ +

...dieses CSS wird verwendet...

+ +
html {
+  font-family: sans-serif;
+}
+
+span, div em {
+  padding: 10px;
+  border: 1px solid green;
+  display: inline-block;
+  margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+  background-color: lime;
+}
+ +

...und erzeugt folgendes Resultat:

+ +
{{EmbedLiveSample('Gesamtbeispiel','100%', '550')}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#nth-child-pseudo', ':nth-child')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.nth-child")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_only-child/index.html b/files/de/web/css/_colon_only-child/index.html new file mode 100644 index 0000000000..ac7ffcc7c0 --- /dev/null +++ b/files/de/web/css/_colon_only-child/index.html @@ -0,0 +1,113 @@ +--- +title: ':only-child' +slug: 'Web/CSS/:only-child' +tags: + - CSS + - CSS Pseudo-Klasse + - Layout + - Referenz + - Selektoren + - Web +translation_of: 'Web/CSS/:only-child' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Pseudo-Klasse :only-child  repräsentiert ein Element, welches das einzige Kindeelement innerhalb seines Elternelementes ist. Das ist das gleiche wie :first-child:last-child oder :nth-child(1):nth-last-child(1), nur mit einer geringeren Spezifizität.

+ +

Syntax

+ +
parent child:only-child {
+  property: value;
+}
+
+ +

Beispiele

+ +

Einfaches Beispiel

+ +
span:only-child {
+  color: red;
+}
+
+ +
<div>
+  <span>Dieser span ist das einzige Kind seines Elternteils</span>
+</div>
+
+<div>
+  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
+  <span>Dieser span ist eines von zwei Kindern seines Elternteils</span>
+</div>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Basic_example', '100%', 100)}}

+ +

Ein Beispiel für Listen

+ +
li li {
+  list-style-type: disc;
+}
+li:only-child {
+  color: #6699ff;
+  font-style: italic;
+  list-style-type: square;
+}
+ +
<ol>
+  <li>Erstens
+    <ul>
+      <li>Einziges Kind
+    </ul>
+  </li>
+  <li>Zweitens
+    <ul>
+      <li>Diese Liste hat zwei Elemente
+      <li>Diese Liste hat zwei Elemente
+    </ul>
+  </li>
+  <li>Drittens
+    <ul>
+      <li>Diese Liste hat drei Elemente
+      <li>Diese Liste hat drei Elemente
+      <li>Diese Liste hat drei Elemente
+    </ul>
+  </li>
+<ol>
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('A_list_example', '100%', 150)}}

+ +
+

Spezifizierungen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifizierungStatusKommentar
{{SpecName('CSS4 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS4 Selectors')}}Keine Änderung.
{{SpecName('CSS3 Selectors', '#only-child-pseudo', ':only-child')}}{{Spec2('CSS3 Selectors')}}Ausgangs-Definition.
+ +

Browser-Kompatibilität

+ +{{Compat("css.selectors.only-child")}} diff --git a/files/de/web/css/_colon_optional/index.html b/files/de/web/css/_colon_optional/index.html new file mode 100644 index 0000000000..ccf6fe9770 --- /dev/null +++ b/files/de/web/css/_colon_optional/index.html @@ -0,0 +1,69 @@ +--- +title: ':optional' +slug: 'Web/CSS/:optional' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:optional' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :optional CSS Pseudoklasse repräsentiert alle {{HTMLElement("input")}} Elemente, die kein {{htmlattrxref("required","input")}} Attribut enthalten.

+ +

Für Pflichtfelder kann man die {{cssxref(":required")}} Pseudoklasse verwenden.

+ +

Beispiele

+ +

Siehe {{cssxref(":invalid")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-optional', ':optional')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-optional', ':optional')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung.
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':optional')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 UI', '#pseudo-required-value', ':optional')}}{{Spec2('CSS3 UI')}}Definiert die Pseudoklasse, aber nicht die zugehörige Semantik.
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.optional")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_out-of-range/index.html b/files/de/web/css/_colon_out-of-range/index.html new file mode 100644 index 0000000000..c9b1c64957 --- /dev/null +++ b/files/de/web/css/_colon_out-of-range/index.html @@ -0,0 +1,94 @@ +--- +title: ':out-of-range' +slug: 'Web/CSS/:out-of-range' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/:out-of-range' +--- +
{{CSSRef}}
+ +
 
+ +

Übersicht

+ +

Die :out-of-range CSS Pseudoklasse passt, wenn das value Attribut eines Elements außerhalb der angegebenen Begrenzungen für dieses Element ist. Sie erlaubt der Seite, darauf zu reagieren, dass der aktuell definierte Wert eines Elements außerhalb der Bereichsgrenzen ist. Ein Wert kann außerhalb eines Bereichs sein, wenn er entweder kleiner oder größer als die gesetzten Minimal- und Maximalwerte ist.

+ +
Hinweis: Diese Pseudoklasse trifft nur auf Elemente zu, die Bereichsbegrenzungen haben. Falls keine solchen Begrenzungen existieren, kann der Wert des Elements weder innerhalb noch außerhalb der Grenzen liegen.
+ +

Beispiel

+ +
+

HTML

+ +
<form action="" id="form1">
+    <ul>Werte zwischen 1 und 10 sind gültig.
+        <li>
+            <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
+            <label for="value1">Der Wert ist </label>
+        </li>
+</form>
+ +

CSS

+ +
li {
+    list-style: none;
+    margin-bottom: 1em;
+}
+input {
+    border: 1px solid black;
+}
+input:in-range {
+    background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+    background-color: rgba(255, 0, 0, 0.25);
+    border: 2px solid red;
+}
+input:in-range + label::after {
+    content:' OK';
+}
+input:out-of-range + label::after {
+    content:'out of range!';
+}
+
+ +
{{EmbedLiveSample('Beispielcode',600,140)}}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Basic UI', '#pseudo-range', ':in-range')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Spezifikation
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.out-of-range")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_required/index.html b/files/de/web/css/_colon_required/index.html new file mode 100644 index 0000000000..769f925180 --- /dev/null +++ b/files/de/web/css/_colon_required/index.html @@ -0,0 +1,67 @@ +--- +title: ':required' +slug: 'Web/CSS/:required' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:required' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die :required CSS Pseudoklasse repräsentiert jedes {{HTMLElement("input")}} Element, welches das Attribut {{htmlattrxref("required", "input")}} beinhaltet. So kann das Aussehen von Pflichtfeldern einfach angepasst werden.

+ +

Die {{cssxref(":optional")}} Pseudoklasse hingegen kann für die Darstellung von Nicht-Pflichtfeldern verwendet werden.

+ +

Beispiele

+ +

Siehe {{cssxref(":invalid")}}.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('HTML WHATWG', '#selector-required', ':required')}}{{Spec2('HTML WHATWG')}}Keine Änderung
{{SpecName('HTML5 W3C', '#selector-required', ':required')}}{{Spec2('HTML5 W3C')}}Definiert die Semantik bezüglich HTML und Beschränkungsvalidierung
{{SpecName('CSS4 Selectors', '#opt-pseudos', ':required')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Basic UI', '#pseudo-required-value', ':required')}}{{Spec2('CSS3 Basic UI')}}Definiert die Pseudoklasse, aber nicht die zugehörige Semantik
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.required")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_colon_root/index.html b/files/de/web/css/_colon_root/index.html new file mode 100644 index 0000000000..4328605e04 --- /dev/null +++ b/files/de/web/css/_colon_root/index.html @@ -0,0 +1,48 @@ +--- +title: ':root' +slug: 'Web/CSS/:root' +tags: + - CSS + - CSS Pseudoklasse + - Layout + - NeedsExample + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:root' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit dem :root-Selektor kannst Du das oberste "Elternelement" im DOM oder die Dokumentstruktur als Ziel festlegen. Es ist in der Spezifikation der CSS Selectors Level 3 als „strukturelle Pseudoklasse“ definiert, was bedeutet, dass Inhalt basierend auf seiner Beziehung zu übergeordneten und gleichgeordneten Inhalten gestaltet wird.

+ +

In der überwiegenden Mehrheit der Fälle, auf die Du wahrscheinlich stößt, gilt Folgendes: :root bezieht sich auf das <html> -Element einer Webseite. In einem HTML-Dokument ist das HTML-Element immer das übergeordnete Element der höchsten Ebene, sodass das Verhalten von :root vorhersehbar ist. Da CSS jedoch eine Stilsprache ist, die mit anderen Dokumentformaten wie SVG und XML verwendet werden kann, kann die :root-Pseudoklasse in diesen Fällen auf andere Elemente verweisen. Unabhängig von der Auszeichnungssprache wählt :root immer das oberste Element des Dokuments in der Dokumentstruktur aus.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS4 Selectors')}}Keine Änderung
{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}{{Spec2('CSS3 Selectors')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.root")}}

diff --git a/files/de/web/css/_colon_visited/index.html b/files/de/web/css/_colon_visited/index.html new file mode 100644 index 0000000000..9816196c8a --- /dev/null +++ b/files/de/web/css/_colon_visited/index.html @@ -0,0 +1,76 @@ +--- +title: ':visited' +slug: 'Web/CSS/:visited' +tags: + - CSS + - CSS Pseudoklasse + - CSS3 + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/:visited' +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die :visited Pseudoklasse betrifft nur bereits besuchte Links. Die Stile können von weiteren Pseudoklassen überschrieben werden: {{ cssxref(":link") }}, {{ cssxref(":hover") }}, und {{ cssxref(":active") }}. Um nur besuchte Links auszuwählen, ist es deshalb wichtig, die LVHA-Reihenfolge einzuhalten: :link — :visited — :hover — :active.

+ +
+

Hinweis: Aus Datenschutzgründen ist der Einsatzbereich dieser Pseudoklasse auf die folgenden Eigenschaften begränzt: {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, fill und stroke. Beachte, dass auch der Alphakanal ignoriert wird: die Alphakomponente der nicht besuchten Regel wird stattdessen verwendet (außer, wenn die Deckkraft 0 ist. In diesem Fall wird die gesamte Farbe ignoriert und die Farbe der nicht besuchten Regel verwendet).

+ +

Da sich die Farbe ändern kann, liefert getComputedStyle immer den Wert von unbesuchten Links zurück.

+ +

Für mehr informationen zu den Schutzmasnahmen siehe Privacy and the :visited selector.

+
+ +

Beispiele

+ +
a:visited { color: #4b2f89; }
+a:visited { background-color: white }
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS4 Selectors', '#link', ':visited') }}{{ Spec2('CSS4 Selectors') }}Keine Änderung
{{ SpecName('CSS3 Selectors', '#link', ':visited') }}{{ Spec2('CSS3 Selectors') }}Keine Änderung
{{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':visited') }}{{ Spec2('CSS2.1') }}Berenzung auf {{ HTMLElement("a") }} aufgehoben. Beschränkt aus Datenschutzgründen das Browserverhalten.
{{ SpecName('CSS1', '#anchor-pseudo-classes', ':visited') }}{{ Spec2('CSS1') }}Standard Wert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.visited")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html new file mode 100644 index 0000000000..a99a56e7fc --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-page-sequence/index.html @@ -0,0 +1,83 @@ +--- +title: '::-moz-page-sequence' +slug: 'Web/CSS/::-moz-page-sequence' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement +translation_of: 'Web/CSS/::-moz-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Das ::-moz-page-sequence CSS Pseudoelement repräsentiert den Hintergrund der Druckvorschau.

+ +

Beispiele

+ +

Benötigt Beispiele.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-page/index.html b/files/de/web/css/_doublecolon_-moz-page/index.html new file mode 100644 index 0000000000..e491443ea9 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-page/index.html @@ -0,0 +1,28 @@ +--- +title: '::-moz-page' +slug: 'Web/CSS/::-moz-page' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard +translation_of: 'Web/CSS/::-moz-page' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das ::-moz-page CSS Pseudoelement gilt für eine einzelne Seite im Druck oder der Druckvorschau.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-placeholder/index.html b/files/de/web/css/_doublecolon_-moz-placeholder/index.html new file mode 100644 index 0000000000..07de5dafea --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-placeholder/index.html @@ -0,0 +1,107 @@ +--- +title: '::-moz-placeholder' +slug: 'Web/CSS/::-moz-placeholder' +tags: + - CSS + - CSS Pseudo-class + - CSS Reference + - Non-standard +translation_of: 'Web/CSS/::placeholder' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +
Hinweis: Das Pseudoelement ::-moz-placeholder wurde eingeführt, um die Pseudoklasse {{cssxref(":-moz-placeholder")}}, die in Firefox 19 als veraltet eingestuft wurde, zu ersetzen.
+ +

Übersicht

+ +

Das ::-moz-placeholder Pseudoelement repräsentiert Formularelemente, die Platzhaltertexte anzeigen. Damit können Webentwickler und Theme Designer die Darstellung von Platzhaltertexten anpassen.

+ +

Standardmäßig wird {{cssxref("opacity")}}: 0.54 verwendet. Sollten Sie die Hintergrundfarbe der Formularelemente angepasst haben (beispielsweise in einen ähnlichen Farbton), so kann es sein, dass der Platzhaltertext nicht gut sichtbar ist. In diesem Fall können Sie mit ::-moz-placeholder die Textdarstellung des Platzhaltertextes ändern.

+ +

Beispiel

+ +

Das folgende Beispiel färbt den Platzhaltertext grün.

+ +

HTML Inhalt

+ +
<input id="test" placeholder="Platzhaltertext!">
+
+ +

CSS Inhalt

+ +
input::-moz-placeholder {
+  color: green;
+}
+
+ +

Das Ergebnis sieht folgendermaßen aus:

+ +

{{EmbedLiveSample('Beispiel')}}

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoDesktop("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)Firefox OSIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("19.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Firefox verwendet standardmäßig {{cssxref("opacity")}}: 0.54 für Platzhaltertexte. Siehe {{Bug("556145")}}. Die meisten anderen Browser verwenden momentan andere Standards für ihre Platzhalter Pseudoelemente oder Pseudoklassen.

+ +

Gecko hat dies zuvor als {{cssxref(":-moz-placeholder")}} Pseudoklasse implementiert. Siehe {{Bug("737786")}}.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-progress-bar/index.html b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html new file mode 100644 index 0000000000..858c79c319 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-progress-bar/index.html @@ -0,0 +1,36 @@ +--- +title: '::-moz-progress-bar' +slug: 'Web/CSS/::-moz-progress-bar' +tags: + - CSS + - CSS Referenz + - NeedsCompatTable + - NeedsLiveSample + - Non-standard +translation_of: 'Web/CSS/::-moz-progress-bar' +--- +
{{Non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Das ::-moz-progress-bar CSS Pseudoelement betrifft den Bereich eines HTML {{HTMLElement("progress")}} Elements, der den erreichten Fortschritt darstellt. Dies erlaubt es beispielsweise, die Farbe von Fortschrittsbalken ändern.

+ +

Die Möglichkeiten, den Stil des Balkens anzupassen, sind recht groß. Dies kann besonders für unbestimmte Balken nützlich sein (über die {{cssxref(":indeterminate")}} Pseudoklasse), bei denen es möglich ist, die Darstellung grundlegend zu ändern; es können z. B. die Breite und die Positionierung des Balkens verändert werden. (Was die gesamten Ausmaße des Elements und seine Position meint, nicht nur den gefüllten Teil des Elements, wie im Screenshot unten verdeutlicht.)

+ +

Beispiele

+ +

Dieses Beispiel gestaltet den Fortschrittszähler des Fortschrittbalkens mit der ID redbar in rot.

+ +
#redbar::-moz-progress-bar {
+  background-color: red;
+}
+ +

Ein Balken, der diesen Stil verwendet, könnte so aussehen:

+ +

Benutzerdefiniert gestalteter Fortschrittsbalken

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html new file mode 100644 index 0000000000..7f1fe71354 --- /dev/null +++ b/files/de/web/css/_doublecolon_-moz-scrolled-page-sequence/index.html @@ -0,0 +1,81 @@ +--- +title: '::-moz-scrolled-page-sequence' +slug: 'Web/CSS/::-moz-scrolled-page-sequence' +tags: + - CSS + - CSS Referenz + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard +translation_of: 'Web/CSS/::-moz-scrolled-page-sequence' +--- +
{{CSSRef}}{{non-standard_header}}
+ +

Übersicht

+ +

Das ::-moz-scrolled-page-sequence CSS Pseudoelement repräsentiert den Hintergrund der Druckvorschau.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome für AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-ms-browse/index.html b/files/de/web/css/_doublecolon_-ms-browse/index.html new file mode 100644 index 0000000000..06b3002488 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-browse/index.html @@ -0,0 +1,79 @@ +--- +title: '::-ms-browse' +slug: 'Web/CSS/::-ms-browse' +tags: + - CSS + - NeedsBrowserCompatibility + - NeedsContent + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-browse' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-browse CSS Pseudoelement repräsentiert die Schaltfläche eines {{HTMLElement("input")}} Elements mit type="file", die die Dateiauswahl öffnet.

+ +

Diese Schaltfläche und dieses Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung von ::-ms-browse auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}10{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_doublecolon_-ms-check/index.html b/files/de/web/css/_doublecolon_-ms-check/index.html new file mode 100644 index 0000000000..3f5c0e1b87 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-check/index.html @@ -0,0 +1,23 @@ +--- +title: '::-ms-check' +slug: 'Web/CSS/::-ms-check' +tags: + - CSS + - NeedsCompatTable + - NeedsExample + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-check' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-check CSS Pseudoelement repräsentiert den Haken eines {{HTMLElement("input")}} mit type="checkbox" oder type="radio".

+ +

Spezifikation

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

diff --git a/files/de/web/css/_doublecolon_-ms-fill-lower/index.html b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html new file mode 100644 index 0000000000..80bc10efe4 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill-lower/index.html @@ -0,0 +1,90 @@ +--- +title: '::-ms-fill-lower' +slug: 'Web/CSS/::-ms-fill-lower' +tags: + - CSS + - CSS Pseudoelement + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill-lower' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-fill-lower CSS Pseudoelement repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit type="range", welcher den Werten entspricht, die kleiner sind als der aktuell vom Thumb markierte.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-ms-fill-upper/index.html b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html new file mode 100644 index 0000000000..c897657ac2 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill-upper/index.html @@ -0,0 +1,90 @@ +--- +title: '::-ms-fill-upper' +slug: 'Web/CSS/::-ms-fill-upper' +tags: + - CSS + - CSS Pseudoelement + - NeedsBrowserCompatibility + - NeedsExample + - NeedsMobileBrowserCompatibility + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill-upper' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-fill-upper CSS Pseudoelement repräsentiert den Teil des "Tracks" (die Spur, in der der sich der Indikator, alias Thumb, bewegt) eines {{HTMLElement("input")}} Elements mit type="range", welcher den Werten entspricht, die größer sind als der aktuell vom Thumb markierte.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_-ms-fill/index.html b/files/de/web/css/_doublecolon_-ms-fill/index.html new file mode 100644 index 0000000000..972cd7a224 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-fill/index.html @@ -0,0 +1,71 @@ +--- +title: '::-ms-fill' +slug: 'Web/CSS/::-ms-fill' +tags: + - CSS + - NeedsExample + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-fill' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-fill CSS Pseudoelement repräsentiert die gefüllte Portion eines {{HTMLElement("progress")}} Elements. Das Pseudoelement ist nicht standardisiert und wird nur von Internet Explorer 10+ unterstützt, daher das Herstellerpräfix.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}10.0{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/de/web/css/_doublecolon_-ms-reveal/index.html b/files/de/web/css/_doublecolon_-ms-reveal/index.html new file mode 100644 index 0000000000..c3da23ecb9 --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-reveal/index.html @@ -0,0 +1,24 @@ +--- +title: '::-ms-reveal' +slug: 'Web/CSS/::-ms-reveal' +tags: + - CSS + - NeedsCompatTable + - NeedsContent + - NeedsExample + - Non-standard + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-reveal' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-reveal CSS Pseudoelement wird verwendet, um Stile auf den "Passwort Anzeigebutton" anzuwenden, welcher im Internet Explorer 10+ standardmäßig am Rand eines {{HTMLElement("input")}} Elements mit type="password" angezeigt wird. Der Passwort Anzeigebutton zeigt den Wert des Passwortfeldes im Klartext an (anstatt der normalen versteckt-wegen-Datenschutz nur-Sternchen Anzeige). Dieser Button und das Pseudoelement sind nicht standardisiert und spezifisch für Internet Explorer 10+, daher das Herstellerpräfix.

+ +

Spezifikationen

+ +

Nicht Teil einer Spezifikation.

+ +

Microsoft hat eine Beschreibung auf MSDN.

diff --git a/files/de/web/css/_doublecolon_-ms-thumb/index.html b/files/de/web/css/_doublecolon_-ms-thumb/index.html new file mode 100644 index 0000000000..e8736b011d --- /dev/null +++ b/files/de/web/css/_doublecolon_-ms-thumb/index.html @@ -0,0 +1,24 @@ +--- +title: '::-ms-thumb' +slug: 'Web/CSS/::-ms-thumb' +tags: + - CSS + - Pseudoelement + - Referenz +translation_of: 'Archive/Web/CSS/::-ms-thumb' +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

Übersicht

+ +

Das ::-ms-thumb CSS Pseudoelement repräsentiert den Schieber, den der Benutzer innerhalb der Spur eines {{HTMLElement("input")}}s mit type="range" bewegen kann, um seinen numerischen Wert zu ändern.

+ +

Spezifikationen

+ +

Dies ist nicht Teil einer Spezifikation, jedoch hat Microsoft eine Beschreibung auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_after/index.html b/files/de/web/css/_doublecolon_after/index.html new file mode 100644 index 0000000000..6eca5cbd0c --- /dev/null +++ b/files/de/web/css/_doublecolon_after/index.html @@ -0,0 +1,158 @@ +--- +title: '::after (:after)' +slug: 'Web/CSS/::after' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/::after' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Das ::after CSS Pseudoelement matcht ein virtuelles letztes Kindelement des markierten Elements. Es wird typischerweise dazu verwendet, um kosmetischen Inhalt unter Verwendung der {{cssxref("content")}} CSS Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.

+ +

Syntax

+ +
/* CSS2 Syntax */
+element:after  { Stileigenschaften }
+
+/* CSS3 Syntax */
+element::after { Stileigenschaften }
+ +

Die ::after Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen einzuführen. Browser unterstützen auch die :after Notation, wie sie in CSS 2 eingeführt wurde.

+ +

Beispiele

+ +

Einfache Verwendung

+ +

Lass uns zwei Klassen erstellen: eine für langweilige Absätze und eine für aufregende. Wir können anschließend jeden Absatz markieren, indem wir ein Pseudoelement an dessen Ende setzen.

+ +
<p class="boring-text">Hier ist etwas alter, langweiliger Text.</p>
+<p>Hier ist etwas mittelmäßiger Text, weder langweilig noch aufregend.</p>
+<p class="exciting-text">An MDN mitzuwirken ist einfach und macht Spaß.
+Klicke einfach auf den 'BEARBEITEN' Button und füge neue Livebeispiele hinzu oder verbessere bestehende Beispiele.</p>
+ +
.exciting-text::after {
+  content: "<- *Das* ist interessant!";
+  color: green;
+}
+
+.boring-text::after {
+   content: "<- LANGWEILIG!";
+   color: red;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Einfache_Verwendung', 500, 150)}}

+ +

Dekoratives Beispiel

+ +

Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.

+ +
<span class="ribbon">Beachte, wo die orange Box ist.</span>
+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::after {
+  content: "Sieh dir diese orange Box an.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Dekoratives_Beispiel', 450, 20)}}

+ +

Tooltips

+ +

Das folgende Beispiel zeigt die Verwendung des ::after Pseudoelements in Verbindung mit dem attr() CSS Ausdruck und einem benutzerdefinierten Datenattribut data-descr, um einen rein CSS-basierten, Wörterbuch ähnlichen Tooltip zu erstellen. Sieh dir die Livevorschau unten an oder das Beispiel auf einer separaten Seite.

+ +
<p>Hier ist ein Livebeispiel des oberen Codes.<br />
+  Wir haben ein <span data-descr="Sammlung von Wörtern und Interpunktion">text</span> mit ein paar
+  <span data-descr="kleine Popups, welche auch wieder verschwinden">Tooltips</span>.<br />
+  Sei nicht schüchtern, beweg die Maus darüber, ums dir <span data-descr="nicht wörtlich nehmen">anzusehen</span>.
+</p>
+
+ +
span[data-descr] {
+  position: relative;
+  text-decoration: underline;
+  color: #00F;
+  cursor: help;
+}
+
+span[data-descr]:hover::after {
+  content: attr(data-descr);
+  position: absolute;
+  left: 0;
+  top: 24px;
+  min-width: 200px;
+  border: 1px #aaaaaa solid;
+  border-radius: 10px;
+  background-color: #ffffcc;
+  padding: 12px;
+  color: #000000;
+  font-size: 14px;
+  z-index: 1;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Tooltips', 450, 120)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-after', '::after')}}{{Spec2('CSS4 Pseudo-Elements')}}Keine wesentlichen Änderungen zur vorherigen Spezifikation.
{{Specname("CSS3 Transitions", "#animatable-properties", "Übergängen bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Transitions")}}Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.
{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Animations")}}Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.
{{SpecName('CSS3 Selectors', '#gen-content', '::after')}}{{Spec2('CSS3 Selectors')}}Führt die Zwei-Doppelpunkte-Syntax ein.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::after')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.after")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_backdrop/index.html b/files/de/web/css/_doublecolon_backdrop/index.html new file mode 100644 index 0000000000..d0edc3021e --- /dev/null +++ b/files/de/web/css/_doublecolon_backdrop/index.html @@ -0,0 +1,49 @@ +--- +title: '::backdrop' +slug: 'Web/CSS/::backdrop' +tags: + - CSS + - Layout + - NeedsContent + - Pseudoelement + - Referenz + - Vollbild + - Web +translation_of: 'Web/CSS/::backdrop' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Jedes Element im Stack des Toplayers hat ein ::backdrop {{cssxref("pseudo-elements", "pseudo-element")}}. Dieses Pseudoelement ist eine Box, die direkt unterhalb des Elements gerendert wird (und oberhalb des Elements unterhalb des Elements im Stack, falls es eines gibt), innerhalb desselben Toplayers.

+ +

Das ::backdrop Pseudoelement kann dazu verwendet werden, um einen Hintergrund zu erstellen, der das dahinterliegende Dokument für ein Element im Stack des Toplayers versteckt, z. B. für das Element, das im Vollbild dargestellt wird, wie in dieser Spezifikation beschrieben.

+ +

Es erbt von keinem Element und vererbt auch nicht. Es gelten keine Einschränkungen bezüglich der Eigenschaften, die auf dieses Pseudoelement angewendet werden können.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Fullscreen', '#::backdrop-pseudo-element', '::backdrop')}}{{Spec2('Fullscreen')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.backdrop")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_before/index.html b/files/de/web/css/_doublecolon_before/index.html new file mode 100644 index 0000000000..080ef608bb --- /dev/null +++ b/files/de/web/css/_doublecolon_before/index.html @@ -0,0 +1,230 @@ +--- +title: '::before (:before)' +slug: 'Web/CSS/::before' +tags: + - CSS + - CSS Pseudoelement + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: 'Web/CSS/::before' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

::before erzeugt ein Pseudoelement, dass das erste Kind des gematchten Elements ist. Es wird oft dazu verwendet, um kosmetische Inhalte unter Verwendung der {{cssxref("content")}} Eigenschaft zu einem Element hinzuzufügen. Dieses Element ist standardmäßig inline.

+ +

Syntax

+ +
/* CSS3 Syntax */
+element::before { Stileigenschaften }
+
+/* CSS2 veraltete Syntax (nur benötigt, um IE8 zu unterstützen) */
+element:before  { Stileigenschaften }
+
+/* Fügt Inhalte vor jedem <p> Element ein */
+p::before { content: "Hallo Welt!"; }
+ +

Die ::before Notation (mit zwei Doppelpunkten) wurde in CSS 3 eingeführt, um eine Unterscheidung zwischen Pseudoklassen und Pseudoelementen einzuführen. Browser unterstützen auch die :before Notation, wie sie in CSS 2 eingeführt wurde.

+ +

Beispiele

+ +

Hinzufügen von Anführungszeichen

+ +

Ein einfaches Beispiel für die Verwendung von ::before Pseudoelementen ist das Hinzufügen von Anführungszeichen. Hier werden ::before und ::after verwendet, um Anführungszeichen einzufügen.

+ +

HTML Inhalt

+ +
<q>Ein paar Anführungszeichen</q>, sagte er, <q>sind besser als keine</q>.
+ +

CSS Inhalt

+ +
q::before {
+  content: "«";
+  color: blue;
+}
+q::after {
+  content: "»";
+  color: red;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Hinzufügen_von_Anführungszeichen', '500', '50')}}

+ +

Dekoratives Beispiel

+ +

Wir können Text oder Bilder innerhalb der {{cssxref("content")}} Eigenschaft fast beliebig stylen.

+ +

HTML Inhalt

+ +
<span class="ribbon">Beachte, wo die orange Box ist.</span>
+ +

CSS content

+ +
.ribbon {
+  background-color: #5BC8F7;
+}
+
+.ribbon::before {
+  content: "Sieh dir diese orange Box an.";
+  background-color: #FFBA10;
+  border-color: black;
+  border-style: dotted;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample('Dekoratives_Beispiel', 450, 60)}}

+ +

Todo-Liste

+ +

In diesem Beispiel erstellen wir eine einfache Todo-Liste mit Hilfe von Pseudoelementen. Diese Methode kann oft dazu verwendet werden, kleine Änderungen an der Benutzerschnittstelle hinzuzufügen und die User Experience zu verbessern.

+ +

HTML Inhalt

+ +
<ul>
+  <li>Milch kaufen</li>
+  <li>Mit Hund Gassi gehen</li>
+  <li>Trainieren</li>
+  <li>Code schreiben</li>
+  <li>Musik spielen</li>
+  <li>Entspannen</li>
+</ul>
+
+ +

CSS Inhalt

+ +
li {
+  list-style-type: none;
+  position: relative;
+  margin: 2px;
+  padding: 0.5em 0.5em 0.5em 2em;
+  background: lightgrey;
+  font-family: sans-serif;
+}
+
+li.done {
+  background: #CCFF99;
+}
+
+li.done::before {
+  content: '';
+  position: absolute;
+  border-color: #009933;
+  border-style: solid;
+  border-width: 0 0.3em 0.25em 0;
+  height: 1em;
+  top: 1.3em;
+  left: 0.6em;
+  margin-top: -1em;
+  transform: rotate(45deg);
+  width: 0.5em;
+}
+ +

JavaScript Inhalt

+ +
var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+  if( ev.target.tagName === 'LI') {
+     ev.target.classList.toggle('done');
+  }
+}, false);
+
+ +

Das obige Beispiel ist ein Livebeispiel. Beachte, dass keine Symbole verwendet werden und dass der Haken in Wirklichkeit das ::before ist, dass durch CSS dargestellt wird.

+ +

Ausgabe

+ +

{{EmbedLiveSample('Todo-Liste', 400, 300)}}

+ +

Hinweise

+ +

Obwohl die Fehlerbehebungen in Firefox 3.5 bzgl. Positionierung es nicht erlauben, Inhalte als ein separates, vorheriges Geschwisterelement zu erstellen (wie die CSS Spezifikation sagt "The :before and :after pseudo-elements elements interact with other boxes [...] as if they were real elements inserted just inside their associated element.", etwa: "Die :before- und :after-Pseudo-Elemente interagieren mit anderen Boxen [...] so als wären sie reale Elemente, die in dem dazugehörigen Element eingefügt wären), können Sie dennoch eingesetzt werden um leichte Verbesserungen in tabellenlosen Layouts (z.B. um ein Element zu zentrieren) zu erhalten. Solange der zu zentrierende Inhalt ein Kindelement ist, können eine vorhergehende und nachfolgende Spalte eingefügt werden ohne eigene Elemente dafür zu verwenden (d.h., es ist eventuell semantisch korrekter, wie unten in dem Beispiel, ein zusätzliches span-Element anstelle jeweils eines leeres div-Elements davor und danach einzufügen). (Und denke immer daran, einem gefloateten Element eine Breite zu geben, andernfalls wird es nicht floaten!)

+ +

HTML Inhalt

+ +
<div class="example">
+<span id="floatme">"Davor umflossen" sollte links vom Viewport erstellt werden
+und Umfluss in dieser Zeile nicht erlauben, sie unterhalb zu umfließen. Genauso sollte
+"Danach umflossen" rechts vom Viewport erscheinen und dieser Zeile nicht erlauben, es unterhalb zu umfließen.</span>
+</div>
+ +

CSS Inhalt

+ +
#floatme {
+  float: left; width: 50%;
+}
+
+/* Um eine leere Spalte zu erhalten, einfach den hexadezimalen Wert für einen nicht umbrechenden Leerraum angeben: \a0 als Attributwert für content (verwende \0000a0 wenn weitere Zeichen folgen) */
+.example::before {
+  content: "Davor umflossen";
+  float: left;
+  width: 25%
+}
+.example::after {
+  content: "Danach umflossen";
+  float: right;
+  width:25%
+}
+
+/* For styling */
+.example::before, .example::after, .first {
+  background: yellow;
+  color: red;
+}
+ +

Ausgabe

+ +

{{EmbedLiveSample("Hinweise")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-before', '::before')}}{{Spec2('CSS4 Pseudo-Elements')}}Keine wesentlichen Änderungen zur vorherigen Spezifikation.
{{Specname("CSS3 Transitions", "#animatable-properties", "Übergänge bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Transitions")}}Erlaubt Übergänge bei Eigenschaften, die für Pseudoelemente definiert sind.
{{Specname("CSS3 Animations", "", "Animationen bei Pseudoelement Eigenschaften")}}{{Spec2("CSS3 Animations")}}Erlaubt Animationen bei Eigenschaften, die für Pseudoelemente definiert sind.
{{SpecName('CSS3 Selectors', '#gen-content', '::before')}}{{Spec2('CSS3 Selectors')}}Führt die Zwei-Doppelpunkte-Syntax ein.
{{SpecName('CSS2.1', 'generate.html#before-after-content', '::before')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition, unter Verwendung der Ein-Doppelpunkt-Syntax
+ +

Browser Kompatibililtät

+ +

{{Compat("css.selectors.before")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..d63f9b7cc7 --- /dev/null +++ b/files/de/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,150 @@ +--- +title: '::placeholder' +slug: 'Web/CSS/::placeholder' +tags: + - CSS + - Referenz +translation_of: 'Web/CSS/::placeholder' +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Das ::placeholder CSS Pseudo-Element stellt den Platzhaltertext eines Formular-Elements dar.

+ +
::placeholder {
+  color: blue;
+  font-size: 1.5em;
+}
+ +

Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using ::placeholder in its selector.

+ +
+

Note: In Firefox, the appearance of placeholder text is a translucent gray color by default.

+
+ +

Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Red text

+ +

HTML

+ +
<input placeholder="Type something here!">
+ +

CSS

+ +
input::placeholder {
+  color: red;
+  font-size: 1.2em;
+  font-style: italic;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Red_text", 200, 60)}}

+ +

Green text

+ +

HTML

+ +
<input placeholder="Type something here...">
+ +

CSS

+ +
input::placeholder {
+  color: green;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Green_text", 200, 60)}}

+ +

Accessibility concerns

+ +

Color contrast

+ +

Contrast Ratio

+ +

Placeholder text typically has a lighter color treatment to indicate that it is a suggestion for what kind of input will be valid, and is not actual input of any kind.

+ +

It is important to ensure that the contrast ratio between the color of the placeholder text and the background of the input is high enough that people experiencing low vision conditions will be able to read it while also making sure there is enough of a difference between the placeholder text and input text color that users do not mistake the placeholder for inputed data.

+ +

Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current Web Content Accessibility Guidelines (WCAG), a ratio of 4.5:1 is required for text content and 3:1 for larger text such as headings. Large text is defined as 18.66px and bold or larger, or 24px or larger.

+ + + +

Usability

+ +

Placeholder text with sufficient color contrast may be interpreted as entered input. Placeholder text will also disappear when a person enters content into an {{htmlelement("input")}} element. Both of these circumstances can interfere with successful form completion, especially for people with cognitive concerns.

+ +

An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use aria-describedby to programmatically associate the {{HTMLElement("input")}} with its hint.

+ +

With this implementation, the hint content is available even if information is entered into the input field, and the input appears free of preexisting input when the page is loaded. Most screen reading technology will use aria-describedby to read the hint after the input's label text is announced, and the person using the screen reader can mute it if they find the extra information unnecessary.

+ +
<label for="user-email">Your email address</label>
+<span id="user-email-hint" class="input-hint">Example: jane@sample.com</span>
+<input id="user-email" aria-describedby="user-email-hint" name="email" type="email">
+
+ + + +

Windows High Contrast Mode

+ +

Placeholder text will appear with the same styling as user-entered text content when rendered in Windows High Contrast Mode. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.

+ + + +

Labels

+ +

Placeholders are not a replacement for the {{htmlelement("label")}} element. Without a label that has been programmatically associated with an input using a combination of the {{htmlattrxref("for", "label")}} and {{htmlattrxref("id")}} attributes, assistive technology such as screen readers cannot parse {{htmlelement("input")}} elements.

+ + + +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}{{Spec2('CSS4 Pseudo-Elements')}}Initial definition.
+ +

Browser compatibility

+ +
+ + +

{{Compat("css.selectors.placeholder")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/_doublecolon_selection/index.html b/files/de/web/css/_doublecolon_selection/index.html new file mode 100644 index 0000000000..d8d1197db3 --- /dev/null +++ b/files/de/web/css/_doublecolon_selection/index.html @@ -0,0 +1,86 @@ +--- +title: '::selection' +slug: 'Web/CSS/::selection' +tags: + - CSS + - CSS Pseudoelement + - Layout + - Referenz + - Web +translation_of: 'Web/CSS/::selection' +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Das ::selection CSS Pseudoelement weist dem durch den Benutzer ausgewählten Bereich (z. B. mit der Maus oder einem anderen Zeigegerät) eines Dokuments Regeln zu.

+ +

Nur ein kleiner Teil der CSS Eigenschaften kann innerhalb einer Regel benutzt werden, die ::selection in ihrem Selektor verwendet: {{cssxref("color")}}, {{cssxref("background")}}, {{cssxref("background-color")}} und {{cssxref("text-shadow")}}. Zu beachten ist insbesondere, dass {{cssxref("background-image")}} ignoriert wird, sowie alle anderen Eigenschaften.

+ +
+

{{cssxref("text-shadow")}} in ::selection wird von Chrome, Safari und Firefox 17+ unterstützt.

+
+ +

Obwohl dieses Pseudoelement in Entwürfen von CSS Selektoren Level 3 war, wurde es während der Candidate Recommendation Phase entfernt, da sein Verhalten nicht genau definiert erschien, besonders in Beziehung zu verschachtelten Elementen, und Interoperabilität war nicht gegeben (auf Grundlage einer Diskussion in der W3C Style Mailingliste).
+
+ Das ::selection Pseudoelement wurde in Pseudo-Elements Level 4 wieder hinzugefügt.

+ +

Beispiel

+ +

Gecko ist die einzige Engine, die einen Präfix benötigt. Dadurch, dass die CSS Parsingregeln verlangen, dass die gesamte Regel verworfen wird, falls ein ungültiges Pseudoelement gefunden wird, müssen zwei separate Regeln geschrieben werden: ::-moz-selection, ::selection {...}. Die Regel würde von nicht-Gecko Browsern verworfen werden, da ::-moz-selection für sie ungültig ist.

+ +

HTML

+ +
<div>Dies ist etwas Text für dich, um CSS' ::selection Pseudoklasse zu testen.</div>
+<p>Versuche auch, etwas Text in diesem &lt;p&gt;</p> zu markieren
+ +

CSS

+ +
/* Zeichnet jeden markierten Text gelb auf rotem Hintergrund */
+::-moz-selection {
+  color: gold; background: red;
+}
+
+::selection {
+  color: gold; background: red;
+}
+
+/* Zeichnet markierten Text innerhalb von Absätzen weiß auf schwarz */
+p::-moz-selection {
+  color: white;
+  background: black;
+}
+
+p::selection {
+  color: white;
+  background: black;
+}
+ +

Output

+ +

{{EmbedLiveSample('Beispiel')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}{{Spec2('CSS4 Pseudo-Elements')}}Ursprüngliche Definition
+ +

Das ::selection CSS Pseudoelement wurde für CSS Selectors Level 3 entworfen, aber entfernt bevor die Spezifikation Empfehlungsstatus erreicht hat. Es wurde als Teil des Pseudo-Elements Level 4 Entwurfs wieder hinzugefügt.

+ +

Browser Kompatibilität

+ +

{{Compat("css.selectors.selection")}}

diff --git a/files/de/web/css/alias/index.html b/files/de/web/css/alias/index.html new file mode 100644 index 0000000000..992dcda304 --- /dev/null +++ b/files/de/web/css/alias/index.html @@ -0,0 +1,10 @@ +--- +title: alias +slug: Web/CSS/Alias +tags: + - CSS +translation_of: Web/CSS/cursor +--- +

Der alias {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.

+ +

In Windows könnte der alias Zeiger so aussehen: Image:Cursor-moz_alias.png

diff --git a/files/de/web/css/align-content/index.html b/files/de/web/css/align-content/index.html new file mode 100644 index 0000000000..d899a26cfd --- /dev/null +++ b/files/de/web/css/align-content/index.html @@ -0,0 +1,212 @@ +--- +title: align-content +slug: Web/CSS/align-content +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - Referenz +translation_of: Web/CSS/align-content +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die align-content CSS Eigenschaft richtet Flexcontainer Zeilen innerhalb des Flexcontainers aus, falls zusätzlicher Leerraum auf der Querachse zur Verfügung steht.

+ +

Diese Eigenschaft hat keine Auswirkung auf einzeilige Flexboxen.

+ +
{{cssinfo}}
+ +

Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

+ +

Syntax

+ +
/* Packe Zeilen an den Start der Querachse */
+align-content: flex-start;
+
+/* Packe Zeilen an das Ende der Querachse */
+align-content: flex-end;
+
+/* Packe Zeilen um die Mitte der Querachse */
+align-content: center;
+
+/* Verteile Zeilen entlang der Querachse, Start und Ende */
+align-content: space-between;
+
+/* Verteile Zeilen gleichmäßig entlang der Querachse */
+align-content: space-around;
+
+/* Strecke Zeilen, um die gesamte Querachse auszufüllen */
+align-content: stretch;
+
+/* Globale Werte */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+
+ +

Werte

+ +
+
flex-start
+
Zeilen werden an den Start der Querachse gepackt. Der Querachsenstartrand der ersten Zeile und des Flexcontainers grenzen aneinander. Jede folgende Zeile grenzt die vorherige.
+
flex-end
+
Zeilen werden an das Ende der Querachse gepackt. Der Querachsenstartrand der letzten Zeile und des Flexcontainers grenzen aneinander. Jede vorhergehende Zeile grenzt die nächste.
+
center
+
Zeilen werden in die Mitte der Querachse gepackt. Die Zeilen grenzen aneinander und werden mittig innerhalb des des Flexcontainers ausgerichtet. Leerräume zwischen dem Querachsenstartrand des Flexcontainers und der ersten Zeile und zwischen dem Querachsenendrand des Flexcontainers und der letzten Zeile sind gleich.
+
space-between
+
Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Querachsenstartrand und -endrand des Flexcontainers grenzen an den Rand der ersten bzw. letzten Zeile.
+
space-around
+
Zeilen werden gleichmäßig innerhalb des Flexcontainers verteilt, sodass die Leerräume zwischen zwei angrenzenden Zeilen gleich sind. Der Leerraum vor der ersten und nach der letzten Zeile entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Zeilen.
+
stretch
+
Zeilen dehnen sich aus, um den verbleibenden Leerraum auszunutzen. Der Freiraum wird gleichmäßig auf alle Zeilen aufgeteilt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML:

+ +
<div id="container">
+  <p>align-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+  <p>align-content: stretch</p>
+  <div id="stretch">
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+ +

CSS:

+ +
#container > div {
+  display: flex;
+  flex-flow: row wrap;
+  width: 140px;
+  height: 140px;
+  background: linear-gradient(-45deg, #78ff8c, #b4ffc8);
+}
+
+#container > div > div {
+  margin: 2px;
+  width: 30px;
+  min-height: 30px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  align-content: flex-start;
+}
+
+#center {
+  align-content: center;
+}
+
+#flex-end {
+  align-content: flex-end;
+}
+
+#space-between {
+  align-content: space-between;
+}
+
+#space-around {
+  align-content: space-around;
+}
+
+#stretch {
+  align-content: stretch;
+}
+ +

Ergibt:

+ +

{{ EmbedLiveSample('Beispiele', 600, 550) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Flexbox', '#align-content', 'align-content')}}{{Spec2('CSS3 Flexbox')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

Support im Flex-Layout

+ +

{{Compat("css.properties.align-content.flex_context")}}

+ +

Support im Grid-Layout

+ +

{{Compat("css.properties.align-content.grid_context")}}

+ +

Siehe auch

+ + + +
{{CSSRef}}
diff --git a/files/de/web/css/align-items/index.html b/files/de/web/css/align-items/index.html new file mode 100644 index 0000000000..169081934b --- /dev/null +++ b/files/de/web/css/align-items/index.html @@ -0,0 +1,107 @@ +--- +title: align-items +slug: Web/CSS/align-items +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsExample + - Referenz + - Web +translation_of: Web/CSS/align-items +--- +

{{ CSSRef("CSS Flexible Boxes") }}

+ +

Übersicht

+ +

Die align-items CSS Eigenschaft richtet Flexelemente der aktuellen Flexlinie genauso wie {{cssxref("justify-content")}} aus, jedoch in senkrechter Richtung.

+ +

{{cssinfo}}

+ +

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+ +

Syntax

+ +
/* Am Kreuzungsstart ausrichten */
+align-items: flex-start;
+
+/* Am Kreuzungsende ausrichten */
+align-items: flex-end;
+
+/* Elemente um die Kreuzungsachse zentrieren */
+align-items: center;
+
+/* Basislinien der Elemente ausrichten */
+align-items: baseline;
+
+/* Elemente dehnen, um sie einzupassen */
+align-items: stretch;
+
+/* Globale Werte */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+
+ +

Werte

+ +
+
flex-start
+
Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.
+
flex-end
+
Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.
+
center
+
Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.
+
baseline
+
Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.
+
stretch
+
Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

{{ TODO() }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Flexbox', '#align-items', 'align-items') }}{{ Spec2('CSS3 Flexbox') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

Support im Flex-Layout

+ +

{{Compat("css.properties.align-items.flex_context")}}

+ +

Support im Grid-Layout

+ +

{{Compat("css.properties.align-items.grid_context")}}

+ +

[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+ +

[2] In Internet Explorer 10-11 (aber nicht 12+), falls Spaltenflexelemente align-items: center; gesetzt haben und ihr Inhalt zu groß ist, überfließen sie die Grenzen ihres Containers. Siehe Flexbug #2 für mehr Informationen.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/align-self/index.html b/files/de/web/css/align-self/index.html new file mode 100644 index 0000000000..6f20312ee8 --- /dev/null +++ b/files/de/web/css/align-self/index.html @@ -0,0 +1,95 @@ +--- +title: align-self +slug: Web/CSS/align-self +tags: + - CSS + - CSS Eigenschaft + - CSS Flexible Boxes + - Layout + - NeedsExample + - Referenz +translation_of: Web/CSS/align-self +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die align-self CSS Eigenschaft richtet Flexelemente der aktuellen Flexzeile aus und überschreibt dabei den Wert von {{cssxref("align-items")}}. Falls der Querachsenabstand irgendeines Flexelements auf auto gesetzt ist, wird align-self ignoriert.

+ +

{{cssinfo}}

+ +

Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+ +

Syntax

+ +
/* Schlüsselwort Werte */
+align-self: auto
+align-self: flex-start
+align-self: flex-end
+align-self: center
+align-self: baseline
+align-self: stretch
+
+/* Globale Werte */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+
+ +

Werte

+ +
+
auto
+
Verwendet den {{cssxref("align-items") }} Wert des Elternelements oder stretch, falls das Element kein Elternelement besitzt.
+
flex-start
+
Der Rand der Querachse des Flexelements grenzt an den Startrand der Querachse der Zeile.
+
flex-end
+
Der Rand der Querachse des Flexelements grenzt an den Endrand der Querachse der Zeile.
+
center
+
Die Außenabstandsbox des Flexelements wird innerhalb der Zeile auf der Querachse zentriert. Falls die vertikale Größe des Elements größer ist als der Flexcontainer, überragt es die Ränder gleichmäßig in beiden Richtungen.
+
baseline
+
Alle Flexelemente werden an deren Grundlinien ausgerichtet. Das Element mit dem größten Abstand zwischen seinem Startrand der Querachse und der Grundlinie grenzt an den Startrand der Zeile.
+
stretch
+
Flexelemente werden gedehnt, sodass die horizontale Größe der Außenabstandsbox des Elements mit der Zeile ist übereinstimmt, wobei Breiten- und Höhenbegrenzungen berücksichtigt werden.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS3 Box Alignment', '#align-self-property', 'align-self') }}{{ Spec2('CSS3 Box Alignment') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

Support im Flex-Layout

+ +

{{Compat("css.properties.align-self.flex_context")}}

+ +

Support im Grid-Layout

+ +

{{Compat("css.properties.align-self.grid_context")}}

+ +

[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/all/index.html b/files/de/web/css/all/index.html new file mode 100644 index 0000000000..5e2b7191e8 --- /dev/null +++ b/files/de/web/css/all/index.html @@ -0,0 +1,140 @@ +--- +title: all +slug: Web/CSS/all +tags: + - CSS + - CSS Cascade + - CSS Eigenschaft + - Layout + - Referenz +translation_of: Web/CSS/all +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die all CSS Kurzform Eigenschaft setzt alle Eigenschaften mit Ausnahme von {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} auf ihren ursprünglichen oder vererbten Wert zurück.

+ +

{{cssinfo}}

+ +

Syntax

+ +
all: initial;
+all: inherit;
+all: unset;
+
+ +

Werte

+ +
+
initial
+
Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf deren ursprünglichen Wert geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.
+
inherit
+
Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.
+
unset
+
Dieses Schlüsselwort gibt an, dass alle dem Element oder dem Elternelement zugewiesenen Eigenschaften auf den Wert des Elternelements geändert werden sollen, falls sie vererbbar sind, ansonsten auf ihren ursprünglichen Wert. {{cssxref("unicode-bidi")}} und {{cssxref("direction")}} Werte sind davon nicht betroffen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML

+ +
<blockquote id="quote">Lorem ipsum dolor sit amet.</blockquote> Phasellus eget velit sagittis.
+ +

CSS

+ +
html {
+  font-size: small;
+  background-color: #F0F0F0;
+  color: blue;
+}
+
+blockquote {
+  background-color: skyblue;
+  color: red;
+}
+
+ +

Ergibt:

+ +
+

Keine all Eigenschaft

+ + + + +{{EmbedLiveSample("Beispiel0", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet die Standarddarstellung des Browsers zusammen mit einer angepassten Hintergrund- und Textfarbe. Es verhält sich auch wie ein Blockelement: Der Text, der ihm folgt, wird unter ihm angezeigt.

+
+ +
+

all:unset

+ + + + +{{EmbedLiveSample("Beispiel1", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein Inlineelement (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist transparent (ursprünglicher Wert), aber seine {{cssxref("font-size")}} Eigenschaft ist immer noch small (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist blue (vererbter Wert).

+
+ +
+

all:initial

+ + + + +{{EmbedLiveSample("Beispiel2", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein Inlineelement (ursprünglicher Wert), seine {{cssxref("background-color")}} Eigenschaft ist transparent (ursprünglicher Wert), seine {{cssxref("font-size")}} Eigenschaft ist normal (ursprünglicher Wert) und seine {{cssxref("color")}} Eigenschaft ist black (ursprünglicher Wert).

+
+ +
+

all:inherit

+ + + + +{{EmbedLiveSample("Beispiel3", "200", "125")}} + +

Das {{HTMLElement("blockquote")}} Element verwendet nicht die Standarddarstellung des Browsers: Es ist jetzt ein Blockelement (vererbter Wert seines beinhaltenden {{HTMLElement("div")}}), seine {{cssxref("background-color")}} Eigenschaft ist transparent (vererbter Wert), seine {{cssxref("font-size")}} Eigenschaft ist small (vererbter Wert) und seine {{cssxref("color")}} Eigenschaft ist blue (vererbter Wert).

+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}{{ Spec2('CSS3 Cascade') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.all")}}

+ +

Siehe auch

+ +

Die CSS-weiten Eigenschaften {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.

diff --git a/files/de/web/css/alternative_style_sheets/index.html b/files/de/web/css/alternative_style_sheets/index.html new file mode 100644 index 0000000000..c03fa0ba1e --- /dev/null +++ b/files/de/web/css/alternative_style_sheets/index.html @@ -0,0 +1,47 @@ +--- +title: Alternative Style Sheets +slug: Web/CSS/Alternative_style_sheets +tags: + - CSS + - NeedsCompatTable +translation_of: Web/CSS/Alternative_style_sheets +--- +

Firefox unterstützt alternative Stylesheets. Seiten, die alternative Stylesheets anbieten, erlauben es dem Benutzer, über das Untermenü Ansicht > Webseiten-Stil den Stil auszuwählen, in dem die Seite angezeigt werden soll. Dies ermöglicht es Benutzern, basierend auf deren Bedürfnissen oder Vorlieben mehrere Versionen einer Seite zu sehen.

+ +

Eine Webseite kann das {{HTMLElement("link")}} verwenden, um alternative Stylesheets zu einem Dokument hinzuzufügen.

+ +

Zum Beispiel:

+ +
 <link href="default.css" rel="stylesheet" type="text/css" title="Standardstil">
+ <link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Modisch">
+ <link href="basic.css" rel="alternate stylesheet" type="text/css" title="Schlicht">
+
+ +

Mittels dieser drei Stylesheets werden die Stile "Standardstil", "Modisch" und "Schlicht" im Webseiten-Stil Untermenü aufgelistet. Wenn der Benutzer einen Stil auswählt, wird die Darstellung der Seite sofort anhand des Stylesheets neu aufgebaut.

+ +

Wenn Stylesheets über ein title Attribut im {{HTMLElement("link")}} oder {{HTMLElement("style")}} Element referenziert werden, wird der Titel dem Benutzer als Auswahlmöglichkeit angeboten. Stylesheets, die mit demselben Titel eingebunden werden, sind Teil der gleichen Auswahl. Stylesheets, die ohne ein title Attribut eingebunden werden, werden immer angewandt.

+ +

rel="stylesheet" kann dazu verwendet werden, zum Standardstil zu verlinken, und rel="alternate stylesheet", um alternative Stylesheets zu verlinken. Dies teilt Firefox mit, welcher Stylesheet Titel standardmäßig ausgewählt werden soll und weist diese Standardauswahl in Browsern zu, die alternative Stylesheets nicht unterstützen.

+ +

Livebeispiel

+ +

Hier klicken, um ein funktionierendes Beispiel auszuprobieren.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName("HTML4.01", "present/styles.html#h-14.3", "Alternative style sheets")}}{{Spec2("HTML4.01")}}Ursprüngliche Definition
diff --git a/files/de/web/css/angle-percentage/index.html b/files/de/web/css/angle-percentage/index.html new file mode 100644 index 0000000000..6c6f726144 --- /dev/null +++ b/files/de/web/css/angle-percentage/index.html @@ -0,0 +1,50 @@ +--- +title: +slug: Web/CSS/angle-percentage +tags: + - CSS + - CSS Datentyp + - Einheiten + - Werte + - angle-percentage +translation_of: Web/CSS/angle-percentage +--- +
{{CSSRef}}
+ +

Der <angle-percentage> CSS-Datentyp stellt einen Wert dar, der entweder {{Cssxref("angle")}} oder ein {{Cssxref("percentage")}} sein kann.

+ +

Syntax

+ +

Für <angle-percentage>-Werte sind alle Werte syntaktisch gültig, die auch bei {{Cssxref("angle")}} oder {{Cssxref("percentage")}} syntaktisch gültig sind.

+ +

Verwendung mit calc()

+ +

Wenn <angle-percentage> ein zulässiger Typ ist, dann wird aus einem Prozentwert ein einfacher {{Cssxref("angle")}} errechnet. Daher kann <angle-percentage> in einem {{Cssxref("calc()")}}-Ausdruck verwendet werden.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS4 Values')}}
{{SpecName('CSS3 Values', '#mixed-percentages', '<angle-percentage>')}}{{Spec2('CSS3 Values')}}Definiert <angle-percentage>. calc() hinzugefügt.
+ +

Browser-Kompatibilität

+ +

{{Compat("css.types.angle-percentage")}}

diff --git a/files/de/web/css/angle/index.html b/files/de/web/css/angle/index.html new file mode 100644 index 0000000000..4003605ed4 --- /dev/null +++ b/files/de/web/css/angle/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: Web/CSS/angle +tags: + - CSS + - CSS Data Type + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/angle +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Der CSS Datentyp <angle> steht für einen Winkel. Dieser kann positiv (rechts, im Uhrzeigersinn) oder negativ (links, gegen den Uhrzeigersinn) sein. Ein Winkel besteht immer aus einer {{cssxref("<number>")}}, gefolgt von einer Einheit (deg, grad, rad or turn). Wie auch bei anderen Werten mit Einheiten darf dazwischen kein Leerschlag sein.

+ +

Für statische Elemente können mehrere Schreibweisen zum selben Ergebnis führen (bspw. 90deg und -270deg oder 1turn und 4turn), bei dynamischen Eigenschaften wie zum Beispiel {{ cssxref("transition") }} kann die Schreibweise jedoch eine Auswirkung auf die Animation haben.

+ +

Die folgenden Einheiten können verwendet werden:

+ +
+
deg
+
definiert einen Winkel in Grad. Ein voller Kreis hat 360deg.
+
grad
+
definiert einen Winkel in Gon. Ein voller Kreis hat 400grad. +
Achtung: Nicht zu verwechseln mit Grad (siehe deg).
+
+
rad
+
definiert einen Winkel in Radianten.  Ein voller Kreis hat 2π Radianten, das entspricht etwa 6.2832rad. 1rad entspricht 180/π Grad.
+
turn
+
definiert einen Winkel in der Anzahl Umdrehungen. Ein voller Kreis besteht aus 1turn.
+
+ +

Alle Einheiten können auch den Wert 0 (oder 0deg, 0grad, 0rad, 0turn) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt.

+ +

Beispiele

+ + + + + + + + + + + + + + + + + + + + +
Angle90.png +

Ein rechter Winkel (nach rechts, im Uhrzeigersinn): 90deg = 100grad = 0.25turn ≈ 1.5708rad

+
Angle180.pngEin flacher Winkel: 180deg = 200grad = 0.5turn ≈ 3.1416rad
AngleMinus90.pngEin rechter Winkel (nach links, gegen den Uhrzeigersinn): -90deg = -100grad = -0.25turn ≈ -1.5708rad
Angle0.png +

Ein Nullwinkel: 0 = 0deg = 0grad = 0turn = 0rad

+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#angles', '<angle>') }}{{ Spec2('CSS3 Values') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.types.angle")}}

diff --git a/files/de/web/css/angrenzende_geschwisterselektoren/index.html b/files/de/web/css/angrenzende_geschwisterselektoren/index.html new file mode 100644 index 0000000000..b5ff92dda2 --- /dev/null +++ b/files/de/web/css/angrenzende_geschwisterselektoren/index.html @@ -0,0 +1,88 @@ +--- +title: Angrenzende Geschwisterselektoren +slug: Web/CSS/Angrenzende_Geschwisterselektoren +tags: + - CSS + - CSS Referenz + - NeedsMobileBrowserCompatibility + - Selectors + - Selektoren +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Dies wird Nachbar- oder Nächstes-Geschwister-Element-Selektor genannt. Er selektiert nur das angegebene Element, das dem zuvor angegebenen Element direkt folgt.

+ +

Syntax

+ +
vorheriges_Element + Zielelement { Stileigenschaften }
+
+ +

Beispiel

+ +
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>One</li>
+  <li>Two</li>
+  <li>Three</li>
+</ul>
+ +

{{EmbedLiveSample('Beispiel', 200, 100)}}

+ +

Ein weiterer Anwendungsfall ist das Stylen von "Beschriftungs-spans" der darauffolgenden {{HTMLElement("img")}} Elemente:

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

matcht die folgenden {{HTMLElement("span")}} Elemente:

+ +
<img src="photo1.jpg"><span class="caption">The first photo</span>
+<img src="photo2.jpg"><span class="caption">The second photo</span>
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.adjacent_sibling")}} + +

[1] Internet Explorer 7 aktualisiert den Style nicht korrekt, wenn ein Element dynamisch vor einem Element platziert wurde, das auf den Selektor gepasst hat. Wenn in Internet Explorer 8 ein Element durch Klick auf einen Link dynamisch eingefügt wird, wird der :first-child-Stil nicht angewandt bis der Link den Fokus verliert.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-delay/index.html b/files/de/web/css/animation-delay/index.html new file mode 100644 index 0000000000..d6dd7702b9 --- /dev/null +++ b/files/de/web/css/animation-delay/index.html @@ -0,0 +1,78 @@ +--- +title: animation-delay +slug: Web/CSS/animation-delay +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-delay +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-delay CSS Eigenschaft gibt an, wann eine Animation starten soll. Dies lässt die Animationssequenz einige Zeit später starten nachdem sie einem Element zugewiesen wurde.

+ +

Ein Wert von 0s, welcher der Standardwert für die Eigenschaft ist, gibt an, dass die Animation starten soll sobald sie zugewiesen wird. Andernfalls legt der Wert eine Verzögerung von dem Moment fest, an dem die Animation dem Element zugewiesen wird; die Animation startet um diesen Wert verzögert nachdem sie zugewiesen wurde.

+ +

Falls ein negativer Wert für die Animationsverzögerung zugewiesen wird,  wird die Animation sofort ausgeführt. Jedoch wird sie so dargestellt, als ob sie vor dem Animationszyklus begonnen hat. Zum Beispiel, wenn Sie -1s als die Animationsverzögerungszeit angeben, wird die Animation sofort starten, allerdings 1 Sekunde innerhalb der Animationssequenz.

+ +

Falls Sie einen negativen Wert für die Animationsverzögerung angeben, der Startwert jedoch implizit ist, wird der Moment, an dem die Animation dem Element zugewiesen wird, als Startwert verwendet.

+ +

Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +
animation-delay: 3s
+animation-delay: 2s, 4ms
+
+ +

Werte

+ +
+
<time>
+
Der Zeitversatz von dem Zeitpunkt, an dem die Animation dem Element zugewiesen wird, nach dem die Animation starten soll. Dieser kann entweder in Sekunden angegeben werden (mittels s als Einheit) oder in Millisekunden (mittels ms als Einheit). Falls keine Einheit angegeben wird, ist der Ausdruck ungültig.
+
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation-delay', 'animation-delay')}}{{Spec2('CSS3 Animations')}} 
+ +

Browser-Kompatibilität

+ +{{Compat("css.properties.animation-delay")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/animation-direction/index.html b/files/de/web/css/animation-direction/index.html new file mode 100644 index 0000000000..0f62a3b74f --- /dev/null +++ b/files/de/web/css/animation-direction/index.html @@ -0,0 +1,91 @@ +--- +title: animation-direction +slug: Web/CSS/animation-direction +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-direction +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-direction CSS Eigenschaft gibt an, ob die Animation rückwärts oder in Wechelzyklen abgespielt werden soll.

+ +

Es ist oft einfacher, die Kurzschreibweise {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Animation */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Mehrere Animationen */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Globale Werte */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+
+ +

Werte

+ +
+
normal
+
Die Animation wird in jedem Durchlauf vorwärts abgespielt. In anderen Worten, jedesmal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Anfangszustand zurückgesetzt und beginnt erneut. Dies ist die Standardeinstellung der Animationsrichtung.
+
alternate
+
Die Animation ändert in jedem Durchlauf die Richtung. Wenn die Animation umgekehrt abgespielt wird, werden die Animationsschritte rückwärts ausgeführt. Des weiteren werden Timingfunktionen ebenfalls umgekehrt; zum Beispiel wird eine ease-in Animation durch eine ease-out Animation ersetzt, wenn sie rückwärts abgespielt wird. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.
+
reverse
+
Die Animation wird in jedem Durchlauf rückwärts abgespielt. Jedes Mal, wenn der nächste Zyklus der Animation beginnt, wird die Animation auf den Endzustand zurückgesetzt und beginnt erneut.
+
alternate-reverse
+
Die Animation wird beim ersten Durchlauf rückwärts abgespielt, beim nächsten vorwärts und fährt danach abwechselnd fort. Die Zählung zur Bestimmung, ob es sich um eine gerade oder ungerade Iteration handelt, beginnt bei eins.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation-direction', 'animation-direction')}}{{Spec2('CSS3 Animations')}}For the two new values, see the W3C discussion.
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-direction")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-duration/index.html b/files/de/web/css/animation-duration/index.html new file mode 100644 index 0000000000..e602ec194d --- /dev/null +++ b/files/de/web/css/animation-duration/index.html @@ -0,0 +1,79 @@ +--- +title: animation-duration +slug: Web/CSS/animation-duration +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz +translation_of: Web/CSS/animation-duration +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-duration CSS Eigenschaft bestimmt die Ablaufdauer einer Animation.

+ +

Der Standartwert ist 0s, somit wird keine Animation ausgeführt.

+ +

Anstelle von animation-duration kann auch die Kurzschreibweise {{ cssxref("animation") }} verwendet werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+
+ +

Werte

+ +
+
<time>
+
Die Ablaufdauer der Animation wird in Sekunden (s) oder Millisekunden (ms) angegeben. Ohne Angabe einer Masseinheit ist der Wert ungültig. Negative Werte sind nicht zulässig.
+
+ +
Hinweis: Einige ältere Implementierungen mit Präfix interpretieren negative Werte als 0s.
+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +

Siehe CSS animations

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Animations', '#animation-duration', 'animation-duration') }}{{ Spec2('CSS3 Animations') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-duration")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-fill-mode/index.html b/files/de/web/css/animation-fill-mode/index.html new file mode 100644 index 0000000000..adfb23a43a --- /dev/null +++ b/files/de/web/css/animation-fill-mode/index.html @@ -0,0 +1,145 @@ +--- +title: animation-fill-mode +slug: Web/CSS/animation-fill-mode +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation-fill-mode +--- +
{{ CSSRef() }}
+ +

Übersicht

+ +

animation-fill-mode definiert den Zustand einer Animation vor und nach deren Ablauf.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +
animation-fill-mode: none
+animation-fill-mode: forwards
+animation-fill-mode: backwards
+animation-fill-mode: both
+
+The # indicates that several values may be given, separated by commas.
+Each applies to the animation defined in the same order in animation-name.
+animation-fill-mode: none, backwards
+animation-fill-mode: both, forwards, none
+
+ +

Werte

+ +
+
none
+
Das Element nimmt keine Werte der Animation an.
+
forwards
+
Das Element nimmt nach Ablauf die Werte des letzten Animationsschrittes an, unter der Berücksichtigung von {{ cssxref("animation-direction") }} und {{ cssxref("animation-iteration-count") }}: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
animation-directionanimation-iteration-countLetzte keyframe Regel
normalgerade oder ungerade100% oder to
reversegerade oder ungerade0% oder from
alternategerade0% oder from
alternateungerade100% oder to
alternate-reversegerade100% oder to
alternate-reverseungerade0% oder from
+
+
backwards
+
Das Element nimmt die Werte des ersten Animationsschrittes an und behält diesen auch während der {{ cssxref("animation-delay") }} Zeit. {{ cssxref("animation-direction") }} wird wie folgt gehandhabt: + + + + + + + + + + + + + + + + + +
animation-directionErste keyframe Regel
normal oder alternate0% oder from
reverse oder alternate-reverse100% oder to
+
+
both
+
Vereint die Werte backwards und forwards.
+
+ +

Beispiele

+ +
h1 {
+  animation-fill-mode: forwards;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Animations', '#animation-fill-mode', 'animation-fill-mode') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-fill-mode")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-iteration-count/index.html b/files/de/web/css/animation-iteration-count/index.html new file mode 100644 index 0000000000..a1e7d3c3e9 --- /dev/null +++ b/files/de/web/css/animation-iteration-count/index.html @@ -0,0 +1,75 @@ +--- +title: animation-iteration-count +slug: Web/CSS/animation-iteration-count +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation-iteration-count +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft animation-iteration-count  legt die Anzahl Wiederholungen der Animation fest.

+ +

Meistens wird die Kurzform {{ cssxref("animation") }} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +
animation-iteration-count: infinite
+animation-iteration-count: 3
+animation-iteration-count: 2.3
+
+animation-iteration-count: 2, 0, infinite
+
+ +

Werte

+ +
+
infinite
+
Die Animation wird unbegrenzt wiederholt.
+
<number>
+
Die Anzahl Wiederholungen der Animation. Standartmässig ist dieser Wet 1. Negative Werte sind nicht zulässig. Es können auch Dezimalzahlen genutzt werden um nur einen Teil der Animation abzuspielen (z. B. 0.5 spielt die nur die Halbe Animation ab).
+
+ +

Beispiel

+ +

Siehe CSS Animationen.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Animations', '#animation-iteration-count', 'animation-iteration-count') }}{{ Spec2('CSS3 Animations') }} 
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-iteration-count")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-name/index.html b/files/de/web/css/animation-name/index.html new file mode 100644 index 0000000000..5b755b8b35 --- /dev/null +++ b/files/de/web/css/animation-name/index.html @@ -0,0 +1,86 @@ +--- +title: animation-name +slug: Web/CSS/animation-name +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-name +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-name CSS Eigenschaft definiert eine Liste von Animationen, welche dem Element zugeortnet werden sollen. Jeder name steht für eine {{cssxref("@keyframes")}} Regel, welche den Ablauf der Animation definiert.

+ +

Meistens wird die Kurzform {{cssxref("animation")}} genutzt, um alle Eigenschaften der Animation auf einen Blick zu haben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Globale Werte */
+animation-name: initial;
+animation-name: inherit;
+animation-name: unset;
+
+ +

Werte

+ +
+
none
+
Keine Animation soll abgespielt werden. Dieser Wert ermöglicht das deaktivieren einer Animation, ohne die dazugehörigen Eigenschaften und Regeln zu ändern.
+
IDENT
+
Eine beliebige Zeichenkette aus den Buchstaben a bis z, Zahlen 0 bis 9, Bodenstriche (_), und oder Bindestriche (-). Das erste Zeichen muss ein Buchstabe oder einer der beiden zugelassenen Striche sein. Es dürfen nicht zwei hintereinandeflogende Striche am Anfang stehen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Animations', '#animation-name', 'animation-name')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-name")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-play-state/index.html b/files/de/web/css/animation-play-state/index.html new file mode 100644 index 0000000000..7520037251 --- /dev/null +++ b/files/de/web/css/animation-play-state/index.html @@ -0,0 +1,84 @@ +--- +title: animation-play-state +slug: Web/CSS/animation-play-state +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Layout + - Referenz + - Web +translation_of: Web/CSS/animation-play-state +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die animation-play-state CSS Eigenschaft bestimmt, ob eine Animation abläuft oder pausiert ist. Der Wert dieser Eigenschaft kann abgefragt werden, um festzustellen, ob die Animation gerade abläuft oder nicht; darüber hinaus kann der Wert auch gesetzt werden, um die das Abspielen der Animation anzuhalten und fortzusetzen.

+ +

Wenn eine pausierte Animation fortgesetzt wird, wird sie dort gestartet, wo sie angehalten wurde, nicht vom Anfang der Animationssequenz.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Einzelne Animation */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Mehrere Animationen */
+animation-play-state: paused, running, running;
+
+/* Globale Werte */
+animation-play-state: inherit;
+animation-play-state: initial;
+animation-play-state: unset;
+
+ +

Werte

+ +
+
running
+
Die Animation läuft aktuell ab.
+
paused
+
Die Animation ist aktuell pausiert.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Animations', '#animation-play-state', 'animation-play-state')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-play-state")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation-timing-function/index.html b/files/de/web/css/animation-timing-function/index.html new file mode 100644 index 0000000000..8f73828d74 --- /dev/null +++ b/files/de/web/css/animation-timing-function/index.html @@ -0,0 +1,93 @@ +--- +title: animation-timing-function +slug: Web/CSS/animation-timing-function +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Layout + - Referenz +translation_of: Web/CSS/animation-timing-function +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die animation-timing-function CSS Eigenschaft gibt an, wie eine CSS Animation über die Dauer eines Zyklus verlaufen soll. Die möglichen Werte sind eine oder mehrere {{cssxref("<timing-function>")}}.

+ +

Für Schlüsselbildanimationen wird die Timingfunktion zwischen den Schlüsselbildern angewandt, anstatt über die gesamte Animation. Mit anderen Worten, die Timingfunktion wird auf den Start des Schlüsselbildes und an dessen Ende angewandt.

+ +

Eine Animationstimingfunktion, die innerhalb eines Schlüsselbildblocks definiert wurde, wird auf dieses Schlüsselbild angewandt. Falls keine Timingfunktion für das Schlüsselbild angegeben wurde, wird die Timingfunktion verwendet, die für die gesamte Animation definiert wurde.

+ +

Es ist oftmals einfacher, die Kurzform Eigenschaft {{cssxref("animation")}} zu verwenden, um alle Animationseigenschaften auf einmal zu setzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwerte */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Funktionswerte */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Mehrere Animationen */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Globale Werte */
+animation-timing-function: inherited;
+animation-timing-function: initial;
+animation-timing-function: unset;
+
+ +

Werte

+ +
+
<timingfunction>
+
Jeder {{cssxref("<timing-function>")}} Wert repräsentiert die Timingfunktion, die mit der dazugehörigen zu animierenden Eigenschaft verknüpft wird, die in {{ cssxref("animation-property") }} definiert wird.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe CSS Animationen für Beispiele

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Animations', '#animation-timing-function', 'animation-timing-function')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.animation-timing-function")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/animation/index.html b/files/de/web/css/animation/index.html new file mode 100644 index 0000000000..77ff733e13 --- /dev/null +++ b/files/de/web/css/animation/index.html @@ -0,0 +1,125 @@ +--- +title: animation +slug: Web/CSS/animation +tags: + - CSS + - CSS Animationen + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/animation +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft animation fasst die folgenden Werte zusammen: {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}} und {{cssxref("animation-direction")}}.

+ +

Eine Beschreibung der animierbaren CSS Eigenschaften ist verfügbar; es sollte auch angemerkt werden, dass diese Beschreibung auch für CSS Übergänge gilt.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* @keyframes Dauer | Timingfunktion | Verzögerung |
+   Anzahl der Iterationen | Richtung | Füllmodus | Abspielstatus | Name */
+  animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes Dauer | Timingfunktion | Verzögerung | Name */
+  animation: 3s linear 1s slidein;
+
+/* @keyframes Dauer | Name */
+  animation: 3s slidein;
+
+ +

Die Reihenfolge innerhalb jeder Animationsdefinition ist wichtig: Der erste Wert in der Einheit {{cssxref("<time>")}} wird als {{cssxref("animation-duration")}} interpretiert, der zweite als {{cssxref("animation-delay")}}.

+ +

Beachte, dass die Reihenfolge auch innerhalb jeder Animationsdefinition wichtig ist, um {{cssxref("animation-name")}} Werte von anderen Schlüsselwörtern zu unterscheiden. Beim Parsen müssen Werte von Schlüsselwörtern, die für Eigenschaften außer {{cssxref("animation-name")}} gültig sind und nicht zuvor in der Kurzschreibweiseeigenschaft gefunden wurden, für diese Eigenschaften anstatt für {{cssxref("animation-name")}} verwendet werden. Zudem müssen bei der Serialisierung die Standardwerte anderer Eigenschaften zumindest in den Fällen ausgegeben werden, in denen es nötig ist, einen {{cssxref("animation-name")}}, der ein gültiger Wert einer anderen Eigenschaft sein könnte, zu unterscheiden, und können in zusätzlichen Fällen ausgegeben werden.

+ +

Formale Syntax

+ +
{{csssyntax}}
+
+ +

Beispiele

+ +

Siehe CSS Animationen.

+ +

Zylonenauge

+ +

Unter Berücksichtigung aller browserspezifischen Präfixe ist hier eine Zylonenauge-Animation, die lineare Farbverläufe und Animationen verwendet, die in allen Browsern funktioniert:

+ +
<div class="view_port">
+  <div class="polling_message">
+    Warte auf Nachrichten
+  </div>
+  <div class="cylon_eye"></div>
+</div>
+
+ +
.polling_message {
+  color: white;
+  float: left;
+  margin-right: 2%;
+}
+
+.view_port {
+  background-color: black;
+  height: 25px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.cylon_eye {
+  background-color: red;
+  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
+  color: white;
+  height: 100%;
+  width: 20%;
+
+  -webkit-animation: move_eye 4s linear 0s infinite alternate;
+     -moz-animation: move_eye 4s linear 0s infinite alternate;
+       -o-animation: move_eye 4s linear 0s infinite alternate;
+          animation: move_eye 4s linear 0s infinite alternate;
+}
+
+@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
+
+ +

{{EmbedLiveSample('Zylonenauge')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Animations', '#animation', 'animation')}}{{Spec2('CSS3 Animations')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.animation")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/appearance/index.html b/files/de/web/css/appearance/index.html new file mode 100644 index 0000000000..12a67f3f60 --- /dev/null +++ b/files/de/web/css/appearance/index.html @@ -0,0 +1,1532 @@ +--- +title: '-moz-appearance (-webkit-appearance)' +slug: Web/CSS/appearance +tags: + - CSS + - CSS Referenz + - nicht Standard +translation_of: Web/CSS/appearance +--- +
{{non-standard_header}}{{CSSRef}}
+ +

Übersicht

+ +

Die CSS-Eigenschaft -moz-appearance wird von Gecko (Firefox) dazu verwendet, um ein Element mit dem nativen Stil der Plattform anzuzeigen, wie er im Betriebssystem eingestellt ist.

+ +

Diese Eigenschaft wird häufig in XUL-Stylesheets verwendet, um individuelle Eingabefelder passend zur Plattform zu gestalten. Auch die XBL-Implementierungen der in Mozilla enthaltenen Bedienelemente verwenden diese Eigenschaft.

+ +
+

Verwende diese Eigenschaft nicht für Websites: Sie entspricht nicht den Webstandards und ihre Auswirkungen unterscheiden sich von einem Browser zum anderen. Sogar der Wert none hat in den verschiedenen Browsern kein einheitliches Verhalten für alle Formularelemente, und teilweise wird sie überhaupt nicht unterstützt.

+
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Partielle Liste verfügbarer Werte in Gecko */
+-moz-appearance: none;
+-moz-appearance: button;
+-moz-appearance: checkbox;
+-moz-appearance: scrollbarbutton-up;
+
+/* Partielle Liste verfügbarer Werte in WebKit/Blink */
+-webkit-appearance: none;
+-webkit-appearance: button;
+-webkit-appearance: checkbox;
+-webkit-appearance: scrollbarbutton-up;
+
+ +

Werte

+ +

<appearance> ist eines der folgenden Schlüsselwörter:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
WertDemoBeschreibung
none + + {{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}}Keine besondere Formatierung wird angewandt. Dies ist der Standardwert. Beachten Sie aber {{ bug(649849) }} und {{ bug(605985) }}.
button + + {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}Das Element wird wie eine Schaltfläche gezeichnet.
button-arrow-down + + {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} 
button-arrow-next + + {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} 
button-arrow-previous + + {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} 
button-arrow-up + + {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} 
button-bevel + + {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} 
button-focus + + {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} 
caret + + {{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} 
checkbox + + {{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}}Das Element wird wie der innere Teil einer Checkbox gezeichnet.
checkbox-container + + {{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}}Das Element wird wie ein Container für eine Checkbox gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und eine Checkbox.
checkbox-label + + {{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} 
checkmenuitem + + {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} 
dualbutton + + {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} 
groupbox + + {{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} 
listbox + + {{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} 
listitem + + {{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} 
menuarrow + + {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} 
menubar + + {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} 
menucheckbox + + {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} 
menuimage + + {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} 
menuitem + + {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}Das Element wird wie ein Menüeintrag dargestellt, wobei der Eintrag hervorgehoben wird, wenn sich der Mauscursor darüber befindet.
menuitemtext + + {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} 
menulist + + {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} 
menulist-button + + {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}Das Element wird wie eine Schaltfläche dargestellt, die eine Menüliste darstellt, die geöffnet werden kann.
menulist-text + + {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} 
menulist-textfield + + {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}Dieses Element wird wie ein Texteingabefeld einer Menüliste dargestellt. (Nicht für die Windows Plattform implementiert.)
menupopup + + {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} 
menuradio + + {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} 
menuseparator + + {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} 
meterbar + + {{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}}Neu in Firefox 16
meterchunk + + {{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}}Neu in Firefox 16
progressbar + + {{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}}Das Element wird wie ein Fortschrittsbalken dargestellt.
progressbar-vertical + + {{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} 
progresschunk + + {{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} 
progresschunk-vertical + + {{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} 
radio + + {{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}}Das Element wird wie der innere Teil eines Radiobuttons gezeichnet.
radio-container + + {{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}}Das Element wird wie ein Container für einen Radiobutton gezeichnet, was einen vorilluminierenden Hintergrundeffekt unter bestimmten Plattformen beinhaltet. Normalerweise beinhaltet er ein Label und einen Radiobutton.
radio-label + + {{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} 
radiomenuitem + + {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} 
resizer + + {{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} 
resizerpanel + + {{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} 
scale-horizontal + + {{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} 
scalethumbend + + {{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} 
scalethumb-horizontal + + {{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} 
scalethumbstart + + {{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} 
scalethumbtick + + {{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} 
scalethumb-vertical + + {{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} 
scale-vertical + + {{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} 
scrollbarbutton-down + + {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} 
scrollbarbutton-left + + {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} 
scrollbarbutton-right + + {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} 
scrollbarbutton-up + + {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} 
scrollbarthumb-horizontal + + {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} 
scrollbarthumb-vertical + + {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} 
scrollbartrack-horizontal + + {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} 
scrollbartrack-vertical + + {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} 
searchfield + + {{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} 
separator + + {{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} 
sheet + + {{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} 
spinner + + {{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} 
spinner-downbutton + + {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} 
spinner-textfield + + {{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} 
spinner-upbutton + + {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} 
splitter + + {{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} 
statusbar + + {{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} 
statusbarpanel + + {{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} 
tab + + {{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} 
tabpanel + + {{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} 
tabpanels + + {{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} 
tab-scroll-arrow-back + + {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} 
tab-scroll-arrow-forward + + {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} 
textfield + + {{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} 
textfield-multiline + + {{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} 
toolbar + + {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} 
toolbarbutton + + {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} 
toolbarbutton-dropdown + + {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} 
toolbargripper + + {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} 
toolbox + + {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} 
tooltip + + {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} 
treeheader + + {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} 
treeheadercell + + {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} 
treeheadersortarrow + + {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} 
treeitem + + {{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} 
treeline + + {{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} 
treetwisty + + {{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} 
treetwistyopen + + {{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} 
treeview + + {{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} 
-moz-mac-unified-toolbar + + {{EmbedLiveSample("sampleMacUnifiedToolbar",100,50,"","", "nobutton")}}Nur Mac OS X. Dies ermöglicht die Darstellung von Toolbar und Titelleiste unter Verwendung des einheitlichen Toolbarstils, wie er in  Anwendungen unter Mac OS X 10.4 und neuer zu sehen ist.
{{ gecko_minversion_inline("2.0") }} -moz-win-borderless-glass + + {{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt - aber ohne einen Rahmen - auf das Element an.
-moz-win-browsertabbar-toolbox + + {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um für die Tableiste in einem Browser verwendet zu werden.
-moz-win-communicationstext + + {{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} 
-moz-win-communications-toolbox + + {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, in Kommunikations- und Produktivitätsanwendungen verwendet zu werden. Die entsprechende Vordergrundfarbe ist -moz-win-communicationstext.
{{gecko_minversion_inline("6.0")}} -moz-win-exclude-glass + + {{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Stil wird dazu verwendet, um den Aero Glass Effekt für das Element auszuschließen.
-moz-win-glass + + {{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Stil wendet den Aero Glass Effekt auf das Element an.
-moz-win-mediatext + + {{EmbedLiveSample("sampleWinMediaText",100,50,"","", "nobutton")}} 
-moz-win-media-toolbox + + {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}Nur Windows Vista und neuer. Dieser Toolboxstil ist dazu gedacht, um in Anwendungen verwendet zu werden, die Medienobjekte verwalten. Die Entsprechende Vordergrundfarbe ist -moz-win-mediatext.
-moz-window-button-box + + {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} 
-moz-window-button-box-maximized + + {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} 
-moz-window-button-close + + {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} 
-moz-window-button-maximize + + {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} 
-moz-window-button-minimize + + {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} 
-moz-window-button-restore + + {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} 
-moz-window-frame-bottom + + {{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} 
-moz-window-frame-left + + {{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} 
-moz-window-frame-right + + {{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} 
-moz-window-titlebar + + {{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} 
-moz-window-titlebar-maximized + + {{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} 
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
.exampleone {
+	-moz-appearance: toolbarbutton;
+}
+
+ +

Spezifikationen

+ +

{The appearance property is currently not present in any newer CSS specification.

+ +

Browser Kompatibilität

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1.0")}}{{property_prefix("-moz")}}[1]{{CompatNo}}{{CompatUnknown}}3.0{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatGeckoMobile("1.0")}}11.0{{property_prefix("-webkit")}}[2]{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Nicht vollständig unterstützt.

+ +

[2] Nur die Werte none, button, und textfield werden unterstützt. Siehe die Dokumentation auf MSDN.

+ +

Siehe auch

+ + diff --git a/files/de/web/css/at-rule/index.html b/files/de/web/css/at-rule/index.html new file mode 100644 index 0000000000..f32e9daee6 --- /dev/null +++ b/files/de/web/css/at-rule/index.html @@ -0,0 +1,61 @@ +--- +title: '@-Regel' +slug: Web/CSS/At-rule +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/At-rule +--- +
{{cssref}}
+ +

Eine @-Regel ist ein CSS Statement, das mit einem At-Zeichen beginnt, '@' (U+0040 COMMERCIAL AT), gefolgt von einem Bezeichner und das beim ersten Semikolon, ';' (U+003B SEMICOLON), außerhalb eines CSS Blocks endet oder am Ende des ersten Blocks.

+ +

Es gibt verschiedene @-Regeln, bestimmt durch deren Bezeichner, jede mit einer unterschiedlichen Syntax:

+ +
    +
  • {{cssxref("@charset")}} — Definiert den Zeichensatz, der vom Stylesheet verwendet wird.
    • +
  • {{cssxref("@import")}} — Teilt der CSS Engine mit, ein externes Stylesheet einzubinden.
    • +
  • {{cssxref("@namespace")}} — Teilt der CSS Engine mit, dass sie alle Inhalte mit einem XML Namespace als Präfix betrachten soll.
    • +
  • Verschachtelte @-Regeln — Eine Untermenge an verschachtelten Statements, welche als Statement eines Stylesheets als auch innerhalb von bedingten Gruppenregeln verwendet werden können: +
      +
    • {{cssxref("@media")}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Gerät die Kriterien der Bedingung erfüllt, die durch eine Media Query definiert wird.
      • +
    • {{cssxref("@supports")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls der Browser die Kriterien der angegebenen Bedingung erfüllt.
      • +
    • {{cssxref("@document")}} {{experimental_inline}} — Eine bedingte Gruppenregel, die ihren Inhalt anwendet, falls das Dokument, auf das das Stylesheet angewendet wird, die Kriterien der angegebenen Bedingung erfüllt. (verschoben nach Level 4 der CSS Spezifikation)
      • +
    • {{cssxref("@page")}} — Beschreibt den Aspekt von Layoutänderungen, welche angewendet werden, wenn das Dokument gedruckt wird.
      • +
    • {{cssxref("@font-face")}} — Beschreibt den Aspekt einer externen Schrift, die heruntergeladen werden soll.
      • +
    • {{cssxref("@keyframes")}} {{experimental_inline}} — Beschreibt den Aspekt von Zwischenschritten in einer CSS Animationssequenz.
      • +
    • {{cssxref("@viewport")}} {{experimental_inline}} — Beschreibt die Aspekte des Viewports auf Geräten mit kleinem Bildschirm. (aktuell im Arbeitsentwurfsstadium)
      • +
    +
    • +
+ +

Bedingte Gruppenregeln

+ +

Ähnlich wie die Werte von Eigenschaften hat jede @-Regel eine andere Syntax. Trotzdem können einige von ihnen zu einer speziellen Kategorie zusammengefasst werden, bedingte Gruppenregeln genannt. Diese Statements teilen sich eine gemeinsame Syntax und jedes von ihnen kann verschachtelte Statements — entweder Regelsets oder verschachtelte @-Regeln — beinhalten. Darüber hinaus vermitteln sie alle die gleiche semantische Bedeutung — sie alle verbindet eine Art Bedingung, welche immer entweder true oder false ergibt. Falls die Bedingung true ergibt, werden alle Statements innerhalb der Gruppe angewandt.

+ +

Bedingte Gruppenregeln werden in CSS Conditionals Level 3 definiert und sind:

+ +
    +
  • {{cssxref("@media")}},
    • +
  • {{cssxref("@supports")}},
    • +
  • {{cssxref("@document")}}. (verschoben nach Level 4 der Spezifikation)
    • +
+ +

Da jede bedingte Gruppe auch verschachtelte Statements beinhalten kann, kann es eine undefinierte Anzahl von Verschachtelungen geben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Ursprüngliche Definition
diff --git a/files/de/web/css/attr()/index.html b/files/de/web/css/attr()/index.html new file mode 100644 index 0000000000..8da73fd80c --- /dev/null +++ b/files/de/web/css/attr()/index.html @@ -0,0 +1,189 @@ +--- +title: attr +slug: Web/CSS/attr() +tags: + - CSS + - CSS Funktion + - Layout + - Referenz + - Web +translation_of: Web/CSS/attr() +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die attr() CSS Funktion wird verwendet, um einen Wert eines Attributs des ausgewählten Elements abzurufen und innerhalb des Stylesheets zu verwenden. Sie kann auch für Pseudoelemente verwendet werden. In diesem Fall wird der Wert des Attributs seines ursprünglichen Elements zurückgegeben.

+ +

Die attr() Funktion kann innerhalb jeder CSS Eigenschaft verwendet werden. {{ experimental_inline() }}

+ +

Syntax

+ +
Formale Syntax: attr( attribute-name <type-or-unit>? [, <fallback> ]? )
+
+ +

Werte

+ +
+
attribute-name
+
Entspricht dem Namen des Attributs des HTML Elements, das durch CSS referenziert wird.
+
<type-or-unit>
+
Ist ein Schlüsselwort, das den Typ oder die Einheit des Attributwerts angibt, da in HTML einige Attribute implizite Einheiten haben. Falls die Verwendung von <type-or-unit> als Wert für das angegebene Attribut ungültig ist, ist der attr() Ausdruck ebenfalls ungültig. Falls nicht angegeben, wird standardmäßig string verwendet. Nachfolgend ist eine Liste aller Werte aufgeführt: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SchlüsselwortAssoziierter TypAnmerkungStandardwert
string{{cssxref("<string>")}}Der Attributwert wird als CSS {{cssxref("<string>")}} Wert behandelt. Er wird nicht erneut geparst, insbesondere werden die Zeichen wie angegeben verwendet, anstatt dass CSS Escapes zu anderen Zeichen umgewandelt werden.An empty string
color {{ experimental_inline() }}{{cssxref("<color>")}}Der Attributwert wird als Hash (3- oder 6-Werthash) oder als Schlüsselwort interpretiert. Er muss ein gültiger CSS {{cssxref("<string>")}} Wert sein.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		currentColor
url {{ experimental_inline() }}{{ cssxref("<uri>") }}Der Attributwert wird als ein String interpretiert, wie er in einer url() Funktion verwendet wird. Relative URLs werden relativ zum ursprünglichen Dokument interpretiert, nicht relativ zum Stylesheet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		Die URL about:invalid, die auf ein nicht existierendes Dokument mit einer allgemeinen Fehlermeldung verweist.
integer {{ experimental_inline() }}{{cssxref("<integer>")}}Der Attributwert wird als CSS {{cssxref("<integer>")}} Wert interpretiert. Falls er nicht gültig ist, d. h. keine Ganzzahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
number {{ experimental_inline() }}{{cssxref("<number>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wertinterpretiert. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
length {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<length>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 12.5em). Falls er ungültig ist, d. h. keine Länge oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, oder pc {{ experimental_inline() }}{{cssxref("<length>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<length>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls die angegebene Einheit eine relative Länge ist, wandelt attr()sie in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0 oder, falls 0 kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
angle {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{ cssxref("<angle>") }} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5deg). Falls er ungültig ist, d. h. kein Winkel oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
deg, grad, rad {{ experimental_inline() }}{{ cssxref("<angle>") }}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{ cssxref("<angle>") }} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0deg oder, falls 0deg kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
time {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<time>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5ms). Falls er ungültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
s, ms {{ experimental_inline() }}{{cssxref("<time>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<time>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Zeit oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0s oder, falls 0s kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
frequency {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<frequency>")}} Wert interpretiert, der die Einheit beinhaltet (z. B. 30.5kHz). Falls er ungültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
Hz, kHz {{ experimental_inline() }}{{cssxref("<frequency>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<frequency>")}} Wert mit der angegebenen Einheit umgewandelt. Falls er nicht gültig ist, d. h. keine Frequenz oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0Hz oder, falls 0Hz kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
% {{ experimental_inline() }}{{cssxref("<percentage>")}}Der Attributwert wird als CSS {{cssxref("<number>")}} Wert ohne Einheit interpretiert (z. B. 12.5) und in einen {{cssxref("<percentage>")}} Wert umgewandelt. Falls er nicht gültig ist, d. h. keine Zahl oder außerhalb des Bereichs, der von der CSS Eigenschaft akzeptiert wird, wird der Standardwert verwendet.
+ Falls der Wert als Länge verwendet wird, wandelt attr()ihn in eine absolute Länge um.
+ Voran- und nachgestellte Leerzeichen werden abgeschnitten.		0% oder, falls 0% kein gültiger Wert für die Eigenschaft ist, der Minimalwert der Eigenschaft.
+
+
<fallback>
+
Der Wert, der verwendet wird, falls das zugehörige Attribut fehlt oder einen ungültigen Wert beinhaltet. Der Fallbackwert muss gültig sein, auch wenn er nicht verwendet wird, und darf keinen weiteren attr() Ausdruck beinhalten. Falls attr() nicht der einzige Wert einer Eigenschaft ist, muss dessen <fallback> Wert von dem Typ sein, der durch <type-or-unit> definiert wird. Falls nicht angegeben, wird CSS den Standardwert verwenden, der für jeden <type-or-unit> Wert angegeben ist.
+
+ +

Beispiele

+ +
p:before {
+  content:attr(data-foo) " ";
+}
+
+ +
<p data-foo="Hallo">Welt</p>
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample("Beispiele", '100%', '60') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#attr', 'attr()') }}{{ Spec2('CSS3 Values') }}Fügt zwei optionale Parameter hinzu; kann in allen Eigenschaften verwendet werden; kann andere Werte als {{cssxref("<string>")}} zurückliefern. Diese Änderungen sind als experimentell {{ experimental_inline() }} markiert und können jederzeit während der CR Phase verworfen werden, falls die Browserunterstützung nicht groß genug ist.
{{ SpecName('CSS2.1', 'generate.html#x18', 'attr()') }}{{ Spec2('CSS2.1') }}Beschränkt auf die {{ cssxref("content") }} Eigenschaft; gibt immer {{cssxref("<string>")}} zurück.
+ +

Browser Kompatibilität

+ +{{Compat("css.types.attr")}} diff --git a/files/de/web/css/attributselektoren/index.html b/files/de/web/css/attributselektoren/index.html new file mode 100644 index 0000000000..a4b6449af3 --- /dev/null +++ b/files/de/web/css/attributselektoren/index.html @@ -0,0 +1,122 @@ +--- +title: Attributselektoren +slug: Web/CSS/Attributselektoren +tags: + - Anfänger + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Attributselektoren wählen Elemente anhand des Vorhandenseins oder Wertes eines Attributs aus.

+ +
+
[attr]
+
Repräsentiert ein Element mit einem Attribut attr.
+
[attr=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches exakt den Wert „wert“ enthält.
+
[attr~=wert]
+
Repräsentiert ein Element mit einem Attribut attr, welches eine Liste mit durch Leerraum getrennten Wörtern enthält, von denen eines exakt dem Wert „wert“ entspricht.
+
[attr|=wert]
+
Repräsentiert ein Element mit einem Attribut attr. Es kann exakt den Wert „wert“ enthalten oder mit einem Wert „wert“ beginnen, dem ein „-“ (U+002D) folgt. Es kann benutzt werden, um anhand von Sprachsubcodes Elemente auszuwählen.
+
[attr^=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ beginnt.
+
[attr$=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mit „wert“ endet.
+
[attr*=wert]
+
Repräsentiert ein Element mit einem Attribut attr, dessen Wert mindestens einmal „wert“ enthält.
+
[attr operator wert i]
+
Wenn ein i vor der schließenden Klammer eingefügt wird, wird ein Vergleich ohne Berücksichtigung der Groß-/Kleinschreibung (für Zeichen innerhalb des ASCII Bereichs) durchgeführt.
+
+ +

Beispiele

+ +
/* Alle span-Elemente mit dem „lang“-Attribut sind fett */
+span[lang] {font-weight:bold;}
+
+/* Alle span-Elemente in Portugiesisch sind grün */
+span[lang="pt"] {color:green;}
+
+/* Alle span-Elemente in amerikanischem Englisch sind blau  */
+span[lang~="en-us"] {color: blue;}
+
+/* Alle span-Elemente sowohl in vereinfachtem (zh-CN) als auch traditionellem (zh-TW) Chinesisch sind rot */
+span[lang|="zh"] {color: red;}
+
+/* Alle internen Links haben einen goldenen Hintergrund */
+a[href^="#"] {background-color:gold}
+
+/* Alle Links zu mit „.cn“ endenden URLs sind rot */
+a[href$=".cn"] {color: red;}
+
+/* Alle Links zu URLs, die „beispiel“ enthalten, haben einen grauen Hintergrund */
+a[href*="beispiel"] {background-color: #CCCCCC;}
+
+/* Alle email Eingabefelder haben einen blauen Rahmen */
+/* Das matcht jede Großschreibung von "email", z. B. "email", "EMAIL", "eMaIL", etc. */
+input[type="email" i] {border-color: blue;}
+
+ +
<div class="hallo-beispiel">
+    <a href="http://example.com">English:</a>
+    <span lang="en-us en-gb en-au en-nz">Hallo Welt!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="#portugiesisch">Portugiesisch:</a>
+    <span lang="pt">Olá Mundo!</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Vereinfacht):</a>
+    <span lang="zh-CN">世界您好！</span>
+</div>
+<div class="hallo-beispiel">
+    <a href="http://example.cn">Chinesisch (Traditionell):</a>
+    <span lang="zh-TW">世界您好！</span>
+</div>
+
+ +

{{EmbedLiveSample('Beispiele', 250, 100)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Hat den Modifizierer für ASCII schreibungsunabhängige Attributwertselektierung hinzugefügt.
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.selectors.attribute")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/aural/index.html b/files/de/web/css/aural/index.html new file mode 100644 index 0000000000..37d115443e --- /dev/null +++ b/files/de/web/css/aural/index.html @@ -0,0 +1,17 @@ +--- +title: aural +slug: Web/CSS/Aural +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/@media/aural +--- +
{{CSSRef}}{{obsolete_header("6.0")}}
+ +

Eine Mediengruppe definiert durch die CSS Standards.

+ +
+

Hinweis: Diese Mediengruppe wurde in Gecko nie vollständig implementiert und wurde in {{Gecko("6.0")}} entfernt.

+
+ +

 

diff --git a/files/de/web/css/auto/index.html b/files/de/web/css/auto/index.html new file mode 100644 index 0000000000..1827bb39d6 --- /dev/null +++ b/files/de/web/css/auto/index.html @@ -0,0 +1,26 @@ +--- +title: auto +slug: Web/CSS/auto +translation_of: Web/CSS/width +--- +
+ {{CSSRef}}
+

Übersicht

+

auto ist ein Wert, der vom jeweiligen user agent definiert wird. Das Ergebnies variert von Eigenschaft zu Eigenschaft.

+

Verwendet in

+
    +
  • {{ Cssxref("overflow") }}
    • +
  • {{ Cssxref("overflow-x") }}
    • +
  • {{ Cssxref("overflow-y") }}
    • +
  • {{ Cssxref("cursor") }}
    • +
  • {{ Cssxref("width") }}
    • +
  • {{ Cssxref("height") }}
    • +
  • {{ Cssxref("marker-offset") }}
    • +
  • {{ Cssxref("margin") }}
    • +
  • margin-* (left|bottom|top|right|start|end)
    • +
  • {{ Cssxref("bottom") }}
    • +
  • {{ Cssxref("left") }}
    • +
  • {{ Cssxref("table-layout") }}
    • +
  • {{ Cssxref("z-index") }}
    • +
  • {{ Cssxref("column-width") }}
    • +
diff --git a/files/de/web/css/backdrop-filter/index.html b/files/de/web/css/backdrop-filter/index.html new file mode 100644 index 0000000000..910ecc40f8 --- /dev/null +++ b/files/de/web/css/backdrop-filter/index.html @@ -0,0 +1,97 @@ +--- +title: backdrop-filter +slug: Web/CSS/backdrop-filter +tags: + - CSS + - CSS Eigenschaft + - Grafik + - Layout + - NeedsContent + - NeedsLiveSample + - NeedsMobileBrowserCompatibility + - Referenz + - SVG + - SVG Filter + - Web +translation_of: Web/CSS/backdrop-filter +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die backdrop-filter CSS Eigenschaft beschreibt den Bereich hinter einem Element für Effekte wie Unschärfe oder Farbverschiebung, welcher anschließend durch das Element gesehen werden kann, indem die Transparenz/Deckkraft des Elements angepasst wird.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwortwert */
+backdrop-filter: none;
+
+/* URL zu SVG-Filter */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* Filterfunktionen */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Mehrere Filterfunktionen */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Globale Werte */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+
+ +

Werte

+ +

TODO

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +
backdrop-filter: blur(10px);
+
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Filters 2.0', '#BackdropFilterProperty', 'backdrop-filter')}}{{Spec2('Filters 2.0')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.backdrop-filter")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/backface-visibility/index.html b/files/de/web/css/backface-visibility/index.html new file mode 100644 index 0000000000..f69c76b4d3 --- /dev/null +++ b/files/de/web/css/backface-visibility/index.html @@ -0,0 +1,208 @@ +--- +title: backface-visibility +slug: Web/CSS/backface-visibility +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/backface-visibility +--- +
{{CSSRef}}{{SeeCompatTable}}
+ +

Übersicht

+ +

Die backface-visibility CSS Eigenschaft bestimmt, ob die Rückfläche eines Elements sichtbar ist, wenn diese dem Benutzer zugewandt ist. Die Rückfläche eines Elements ist immer ein transparenter Hintergrund, der, wenn sichtbar, ein Spiegelbild der Vorderfläche zeigt.

+ +

Es gibt Fälle, in denen es nicht gewollt ist, die Vorderfläche eines Elements durch die Rückfläche sehen zu können, wie beispielsweise bei einem Kartenumdreheffekt, bei dem zwei Elemente Seite an Seite gelegt werden.

+ +

Diese Eigenschaft hat keine Auswirkung auf 2D-Transformationen, da es bei diesen keine Perspektive gibt.

+ +

{{cssinfo}}

+ +

Syntax

+ +
backface-visibility: visible;
+backface-visibility: hidden;
+
+ +

Werte

+ +

Diese Eigenschaft kann zwei verschiedene (exclusive) Werte annehmen:

+ +
    +
  • visible bedeutet, dass die Rückfläche sichtbar ist, sodass sie die Vorderfläche gespiegelt darstellt;
    • +
  • hidden bedeutet, dass die Rückfläche nicht sichtbar ist und damit die Vorderfläche versteckt wird.
    • +
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Würfel mit transparenten Flächen

+ +

HTML

+ +
<table>
+  <tbody>
+    <tr>
+      <th><code>backface-visibility: visible;</code></th>
+      <th><code>backface-visibility: hidden;</code></th>
+    </tr>
+    <tr>
+      <td>
+        <div class="container">
+          <div class="cube showbf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>Alle Flächen sind transparent und die drei Rückflächen sind durch die Vorderflächen sichtbar.</p>
+      </td>
+      <td>
+        <div class="container">
+          <div class="cube hidebf">
+            <div class="face front">1</div>
+            <div class="face back">2</div>
+            <div class="face right">3</div>
+            <div class="face left">4</div>
+            <div class="face top">5</div>
+            <div class="face bottom">6</div>
+          </div>
+        </div>
+        <p>Obwohl die Flächen halbtransparent sind, sind die drei Rückflächen nun nicht sichtbar.</p>
+      </td>
+    </tr>
+  </tbody>
+</table>
+ +

CSS

+ +
/* Klassen, die die drei Rückflächen des "Würfels" entweder zeigen oder verstecken */
+.hidebf div {
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+}
+
+.showbf div {
+  backface-visibility: visible;
+  -webkit-backface-visibility: visible;
+}
+
+/* Definiert den Container-DIV, den Würfel-DIV und allgemeine Fläche */
+.container {
+  width: 150px;
+  height: 150px;
+  margin: 75px 0 0 75px;
+  border: none;
+}
+
+.cube {
+  width: 100%;
+  height: 100%;
+  perspective: 550px;
+  perspective-origin: 150% 150%;
+  transform-style: preserve-3d;
+  -webkit-perspective: 300px;
+  -webkit-perspective-origin: 150% 150%;
+  -webkit-transform-style: preserve-3d;
+}
+
+.face {
+  display: block;
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border: none;
+  line-height: 100px;
+  font-family: sans-serif;
+  font-size: 60px;
+  color: white;
+  text-align: center;
+}
+
+/* Definiert jede Fläche basierend auf deren Position */
+.front {
+  background: rgba(0, 0, 0, 0.3);
+  transform: translateZ(50px);
+  -webkit-transform: translateZ(50px);
+}
+
+.back {
+  background: rgba(0, 255, 0, 1);
+  color: black;
+  transform: rotateY(180deg) translateZ(50px);
+  -webkit-transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+  background: rgba(196, 0, 0, 0.7);
+  transform: rotateY(90deg) translateZ(50px);
+  -webkit-transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+  background: rgba(0, 0, 196, 0.7);
+  transform: rotateY(-90deg) translateZ(50px);
+  -webkit-transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+  background: rgba(196, 196, 0, 0.7);
+  transform: rotateX(90deg) translateZ(50px);
+  -webkit-transform: rotateX(90deg) translateZ(50px)
+}
+
+.bottom {
+  background: rgba(196, 0, 196, 0.7);
+  transform: rotateX(-90deg) translateZ(50px);
+  -webkit-transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Verschönert die Tabelle ein wenig */
+th, p, td {
+  background-color: #EEEEEE;
+  margin: 0px;
+  padding: 6px;
+  font-family: sans-serif;
+  text-align: left;
+}
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Beispiele', 620, 460) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Transforms', '#backface-visibility-property', 'backface-visibility')}}{{Spec2('CSS3 Transforms')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.backface-visibility")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/background-attachment/index.html b/files/de/web/css/background-attachment/index.html new file mode 100644 index 0000000000..fe0d426df2 --- /dev/null +++ b/files/de/web/css/background-attachment/index.html @@ -0,0 +1,158 @@ +--- +title: background-attachment +slug: Web/CSS/background-attachment +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - CSS Referenz + - Referenz +translation_of: Web/CSS/background-attachment +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft background-attachmentlegt fest, ob die Position eines Hintergrundbildes innerhalb des {{glossary("viewport")}} fixiert ist, oder ob es mit seinem enthaltenden Block scrollt.

+ +
{{EmbedInteractiveExample("pages/css/background-attachment.html")}}
+ + + +

Syntax

+ +
/* Keyword values */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Global values */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+
+ +

Die Eigenschaft background-attachment wird als einer der Schlüsselwortwerte aus der folgenden Liste angegeben.

+ +

Werte

+ +
+
fixed
+
Der Hintergrund ist relativ zum Ansichtsfenster fixiert. Selbst wenn ein Element über einen Bildlaufmechanismus verfügt, bewegt sich der Hintergrund nicht mit dem Element. (Dies ist nicht kompatibel mit {{cssxref("background-clip", "background-clip: text", "#text")}}.)
+
local
+
Der Hintergrund ist relativ zum Inhalt des Elements fixiert. Wenn das Element über einen Bildlaufmechanismus verfügt, wird der Hintergrund mit dem Inhalt des Elements gescrollt, und der Hintergrundmalbereich und der Hintergrundpositionierungsbereich sind relativ zum scrollbaren Bereich des Elements und nicht zum Rand, der sie umrahmt.
+
scroll
+
Der Hintergrund ist relativ zum Element selbst fixiert und scrollt nicht mit seinem Inhalt. (Er ist effektiv an den Rand des Elements gebunden).
+
{{cssxref("<initial>")}}
+
Setzt den Standardwert für diese Eigenschaft
+
{{cssxref("<inherit>")}}
+
Diese Eigenschaft erbt den Wert von seinem Elternelement.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Einfaches Beispiel

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+  background-attachment: fixed;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Simple_example")}}

+ +

Mehrere Hintergründe

+ +

Diese Eigenschaft unterstützt mehrere Hintergrundbilder. Sie können für jeden Hintergrund ein anderes <attachment> , durch Kommata getrennt, angeben. Jedes Bild, vom ersten bis zum letzten, wird dem entsprechenden <attachment> Typ zugeordnet.

+ +

HTML

+ +
<p>
+  There were doors all round the hall, but they were all locked; and when
+  Alice had been all the way down one side and up the other, trying every
+  door, she walked sadly down the middle, wondering how she was ever to
+  get out again.
+
+  Suddenly she came upon a little three-legged table, all made of solid
+  glass; there was nothing on it except a tiny golden key, and Alice's
+  first thought was that it might belong to one of the doors of the hall;
+  but, alas! either the locks were too large, or the key was too small,
+  but at any rate it would not open any of them. However, on the second
+  time round, she came upon a low curtain she had not noticed before, and
+  behind it was a little door about fifteen inches high: she tried the
+  little golden key in the lock, and to her great delight it fitted!
+</p>
+ +

CSS

+ +
p {
+  background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"),
+      url("https://mdn.mozillademos.org/files/12059/startransparent.gif");
+  background-attachment: fixed, scroll;
+  background-repeat: no-repeat, repeat-y;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Multiple_background_images")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background-attachment', 'background-attachment')}}{{Spec2('CSS3 Backgrounds')}}Das Kurzformat-Eigenschaft wurde erweitert, um mehrere Hintergründe und den local Wert zu unterstützen.
{{SpecName('CSS2.1', 'colors.html#propdef-background-attachment', 'background-attachment')}}{{Spec2('CSS2.1')}}Keine wesentliche Änderung.
{{SpecName('CSS1', '#background-attachment', 'background-attachment')}}{{Spec2('CSS1')}}Keine wesentliche Änderung.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.properties.background-attachment")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/background-blend-mode/index.html b/files/de/web/css/background-blend-mode/index.html new file mode 100644 index 0000000000..2423929b79 --- /dev/null +++ b/files/de/web/css/background-blend-mode/index.html @@ -0,0 +1,129 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - CSS Compositing + - CSS Eigenschaft + - Referenz +translation_of: Web/CSS/background-blend-mode +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft background-blend-mode beschreibt, wie sich die Hintergrundbilder eines Elementes, sowie dessen Hintergrundfarbe, miteinander vemischen

+ +
{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}}
+ + + +

Die Blending-Verfahren sollten in der selben Reihenfolge wie die Bilder der background-image Eigenschaft definiert werden. Wenn die Anzahl der Blending-Verfahren nicht mit der Anzahl der Hintergrundbilder übereinstimmt, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blending-Verfahren zugeordnet werden kann.

+ +

Syntax

+ +
/* Ein Wert */
+background-blend-mode: normal;
+
+/* Zwei Werte, einer pro Hintergrund */
+background-blend-mode: darken, luminosity;
+
+/* Globale Werte */
+background-blend-mode: initial;
+background-blend-mode: inherit;
+background-blend-mode: unset;
+
+ +

Werte

+ +
+
{{cssxref("<blend-mode>")}}
+
Ein {{cssxref("<blend-mode>")}} welcher das Verfahren zur Vermischung von Hintergrundbildern und -farbe beschreibt. Es können mehrere Werte mit Kommas getrennt angegeben werden.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Einfaches Beispiel

+ +

HTML

+ +
.item {
+    width: 300px;
+    height: 300px;
+    background: url('image1.png'),url('image2.png');
+    background-blend-mode: screen;
+}
+ +

Probieren Sie verschiedene Mischmodi aus

+ + + + + + + +

Ergebnis

+ +

{{ EmbedLiveSample('Examples', "330", "330") }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('Compositing', '#background-blend-mode', 'background-blend-mode')}}{{Spec2('Compositing')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.background-blend-mode")}}

+ +

Siehe auch

+ +
    +
  • {{cssxref("<blend-mode>")}}
    • +
  • {{cssxref("mix-blend-mode")}}
    • +
diff --git a/files/de/web/css/background-clip/index.html b/files/de/web/css/background-clip/index.html new file mode 100644 index 0000000000..c627b66ce2 --- /dev/null +++ b/files/de/web/css/background-clip/index.html @@ -0,0 +1,110 @@ +--- +title: background-clip +slug: Web/CSS/background-clip +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-clip +--- +

{{ CSSRef() }}

+

Übersicht

+

Die background-clip Eigenschaft legt fest, ob ein Hintergrundbild oder eine Hintergrundfarbe auch unterhalb des Elementrahmens erweitert werden soll. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.
+ Die Eigenschaft -moz-background-clip wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

+
+ Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.
+

Wenn kein background-image vorhanden ist, hat diese Eigenschaft nur einen sichtbaren Effekt, wenn der Rahmen über transparente oder teilweise transparente Bereiche verfügt (siehe border-style). Andernfalls sind nur die Effekte des Rahmens selbst zu sehen.

+
    +
  • Standardwert: border-box
    • +
  • Anwendbar auf: alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
background-clip:  [ border-box | padding-box | content-box][, [ border-box | padding-box | content-box]]*
+
+-moz-background-clip:  [border | padding][, [border | padding]]*  /* Gecko 1.2-1.9.2 (Firefox 1.0-3.6) */
+
+

Werte

+
+
+ border-box {{ gecko_minversion_inline("2.0") }} bzw. border (Firefox 1.0-3.6)
+
+ Standardwert.Der Hintergrund erstreckt sich bis zur äußeren Ecke des Rahmens (aber unterhalb des Rahmens auf der Z-Achse).
+
+ padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding (Firefox 1.0-3.6)
+
+ Es wird kein Hintergrund unterhalb des Rahmens gezeichnet (der Hintergrund erstreckt sich bis zur äußeren Ecke des Innenabstands (padding).
+
+ content-box {{ gecko_minversion_inline("2.0") }}
+
+ Der Hintergrund wird innerhalb des Inhalts (content box) gezeichnet.
+
+

Beispiele

+
pre {
+   border: 1em navy;
+   border-style: dotted double;
+   background: tomato;
+   /* Der rote Hintergrund wird nicht unter den Rahmen wandern */
+   -moz-background-clip: padding;         /* Firefox 1.0-3.6 */
+   -webkit-background-clip: padding-box;  /* Safari, Chrome */
+           background-clip: padding-box;  /* Firefox 4.0+, Opera */
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab VersionUnterstützung von
Chrome1.0background-clip:  padding-box | border-box | content-box
Firefox (Gecko)1.0-3.6 (1.2-1.9.2)-moz-background-clip: padding | border
4.0 (2.0)background-clip:  padding-box | border-box | content-box
Internet Explorer9.0background-clip:  padding-box | border-box | content-box
Opera10.5background-clip:  padding-box | border-box
Safari (WebKit)3.0 (522)-webkit-background-clip:  padding | border | content
+ -webkit-background-clip:  padding-box | border-box | content-box
+
    +
  • [*]: Der IE 7 (keine anderen IE-Versionen) verhält sich wie background-clip:padding wenn overflow: hidden | auto | scroll festgelegt wurde.
    • +
  • Konqueror 3.5.4 unterstützt -khtml-background-clip.
    • +
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-clip", "fr": "fr/CSS/-moz-background-clip", "ja": "ja/CSS/-moz-background-clip", "pl": "pl/CSS/-moz-background-clip" } ) }}

diff --git a/files/de/web/css/background-color/index.html b/files/de/web/css/background-color/index.html new file mode 100644 index 0000000000..6db5caa387 --- /dev/null +++ b/files/de/web/css/background-color/index.html @@ -0,0 +1,133 @@ +--- +title: background-color +slug: Web/CSS/background-color +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/background-color +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die background-color CSS Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort transparent.

+ +
{{cssinfo}}
+ +

Syntax

+ +
/* Schlüsselwortwerte */
+background-color: red;
+
+/* Hexadezimalwert */
+background-color: #bbff00;
+
+/* RGB-Wert */
+background-color: rgb(255, 255, 128);
+
+/* HSLA-Wert */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Spezielle Schlüsselwortwerte */
+background-color: currentColor;
+background-color: transparent;
+
+/* Globale Werte */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+
+ +

Werte

+ +
+
<color>
+
Ist ein CSS {{cssxref("<color>")}} Wert, der die einheitliche Farbe des Hintergrunds beschreibt. Sogar wenn ein oder mehrere {{cssxref("background-image")}} definiert sind, kann diese Farbe die Darstellung durch Transparenzen in den Bildern beeinflussen. In CSS ist transparent eine Farbe.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML

+ +
<div class="exampleone">
+ Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="exampletwo">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+
+<div class="examplethree">
+  Lorem ipsum dolor sit amet, consectetuer
+</div>
+ +

CSS

+ +
.exampleone {
+  background-color: teal;
+  color: white;
+}
+
+.exampletwo {
+  background-color: rgb(153,102,153);
+  color: rgb(255,255,204);
+}
+
+.examplethree {
+  background-color: #777799;
+  color: #FFFFFF;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Beispiele","200","150")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#background-color', 'background-color')}}{{Spec2('CSS3 Backgrounds')}}Obwohl das Schlüsselwort transparent technisch entfernt wurde, ändert dies nichts, da es als echter {{cssxref("<color>")}} integriert wurde.
{{SpecName('CSS2.1', 'colors.html#propdef-background-color', 'background-color')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#background-color', 'background-color')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.background-color")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/background-image/index.html b/files/de/web/css/background-image/index.html new file mode 100644 index 0000000000..2c49b17489 --- /dev/null +++ b/files/de/web/css/background-image/index.html @@ -0,0 +1,155 @@ +--- +title: background-image +slug: Web/CSS/background-image +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-image +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt.

+ +

Um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten, ist es deshalb sinnvoll, immer eine Hintergrundfarbe mittels background-color anzugeben. Die Kurzform background bietet sich an, um beides zu notieren.

+ +
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.
+Das zuerst definierte Hintergrundbild ist dabei das Oberste.
+ +
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute URI oder none
    • +
+ +

Syntax

+ +
background-image:  <Hintergrundbild>[, <Hintergrundbild>]*
+
+<Hintergrundbild>:
+none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()
+
+
+ +

Werte

+ +
+
none
+
Standardwert. Es wird kein Hintergrundbild verwendet.
+
url
+
Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Mozilla Erweiterungen:

+ +
+
-moz-linear-gradient() {{ gecko_minversion_inline("1.9.2") }}
+
Linearer Verlauf
+
-moz-radial-gradient() {{ gecko_minversion_inline("1.9.2") }}
+
Radialer Verlauf
+
+ +

Beispiele

+ +

Es ist zu beachten, dass das Bild des Sterns teilweise transparent ist und das Katzenbild überlagert. 

+ +

HTML

+ +
<div>
+    <p class="catsandstars">
+        This paragraph is full of cats<br />and stars.
+    </p>
+    <p>This paragraph is not.</p>
+    <p class="catsandstars">
+        Here are more cats for you.<br />Look at them!
+    </p>
+    <p>And no more.</p>
+</div>
+ +

CSS

+ +
pre, p {
+    font-size: 1.5em;
+    color: #FE7F88;
+    background-color: transparent;
+}
+
+div {
+  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
+}
+
+p {
+  background-image: none;
+}
+
+.catsandstars {
+  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
+                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
+  background-color: transparent;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Beispiele')}}

+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Versionmehrere HintergrundbilderVerläufe
Internet Explorer4.0------
Firefox (Gecko)1.0 (1.0)3.6 (1.9.2)3.6 (1.9.2) [-moz-]
Opera3.510.5---
Safari (WebKit)1.0 (85)1.3 (312)4.0 (528) [-webkit-]
+ +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

diff --git a/files/de/web/css/background-origin/index.html b/files/de/web/css/background-origin/index.html new file mode 100644 index 0000000000..694b12b3e4 --- /dev/null +++ b/files/de/web/css/background-origin/index.html @@ -0,0 +1,60 @@ +--- +title: background-origin +slug: Web/CSS/background-origin +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-origin +--- +

{{ CSSRef() }}

+

Übersicht

+

Die background-origin Eigenschaft legt den Bereich des Hintergrundbildes fest (bzw. den Ausgangspunkt eines background-image). background-origin hat keinen Effekt, wenn background-attachment auf fixed gesetzt wurde. Es können mehrere Werte (durch Kommata getrennt) definiert werden, um unterschiedliche Einstellungen für mehrere Hintergrundbilder festzulegen.

+

Die Eigenschaft -moz-background-origin wird bis einschließlich Gecko 1.9.2 (Firefox 3.6) unterstützt.

+

 

+
Hinweis: Um ältere und neuere Versionen von Gecko (Firefox) zu unterstützen, sollten Sie beide Eigenschaften (mit und ohne -moz-) im Stylesheet notieren. Siehe Beispiele.
+

Der Wert dieser Eigenschaft wird durch die Kurzformeigenschaft background auf den Standardwert (padding-box) zurückgesetzt.

+
  • Standardwert: padding-box
  • Anwendbar auf: alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
/* seit Gecko 2.0 (Firefox 4.0) */
+background-origin: [padding-box | border-box | content-box][, [border-box | padding-box | content-box]]*
+
+/* ältere Versionen (mehrere Hintergründe seit Gecko 1.9.2 / Firefox 3.6) */
+-moz-background-origin: [padding | border | content][, [border | padding | content]]*
+
+

Werte

+
padding-box {{ gecko_minversion_inline("2.0") }} bzw. padding (Firefox 1.0-3.6)
Standardwert. Die Hintergrundposition ist relativ zum padding. (Für einzelne Boxen ist "0 0" die obere linke Ecke der padding edge und "100% 100%" ist die untere rechte Ecke.)
border-box {{ gecko_minversion_inline("2.0") }} bzw. border (Firefox 1.0-3.6)
Die Hintergrundposition ist relativ zum Rahmen (border), sodass sich das Hintergrundbild hinter dem Rahmen befinden kann.
content-box {{ gecko_minversion_inline("2.0") }} bzw. content (Firefox 1.0-3.6)
Die Hintergrundposition ist relativ zum Inhalt.
+
+

Beispiele

+

Hintergrundbild im padding-Bereich

+
 .example {
+   border: 10px double;
+   padding: 10px;
+   background: url('image.jpg');
+   background-position: center left;
+   -moz-background-origin: content;          /* Firefox 1.0-3.6 */
+   -webkit-background-origin: content-box;   /* Safari, Chrome */
+           background-origin: content-box;   /* Firefox 4.0+ */
+}
+
+

Mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}

+
div {
+  background-image: url('mainback.png'), url('logo.jpg');
+  background-position: 0px 0px, top right;
+  -moz-background-origin: padding, content;
+  -webkit-background-origin: padding-box, content-box;
+          background-origin: padding-box, content-box;
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version Unterstützung von
Internet Explorer --- --- [*]
Firefox (Gecko) 1.0-3.6 (1.2-1.9.2) -moz-background-origin: padding | border | content
4.0 (1.9.3) background-origin: padding-box | border-box | content-box
Opera 10.5 background-origin: padding-box | border-box | content-box
Safari (WebKit) 3.0 (522) -webkit-background-origin: padding | border | content
-webkit-background-origin: padding-box | border-box | content-box
+
  • [*]: Der Standardwert ist bis einschließlich IE7 border-box.
  • Der IE8 kennt padding-box als Standard.
  • Konqueror 3.5.4 unterstützt -khtml-background-origin.
    • +
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-origin", "fr": "fr/CSS/-moz-background-origin", "ja": "ja/CSS/-moz-background-origin", "pl": "pl/CSS/-moz-background-origin" } ) }}

diff --git a/files/de/web/css/background-position/index.html b/files/de/web/css/background-position/index.html new file mode 100644 index 0000000000..03c3c64c4e --- /dev/null +++ b/files/de/web/css/background-position/index.html @@ -0,0 +1,86 @@ +--- +title: background-position +slug: Web/CSS/background-position +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-position +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die background-position Eigenschaft bestimmt die Position des Hintergrundbildes

+
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundpositionen, durch Kommata getrennt, definiert werden.
+Vorherige Versionen unterstützen nur einen Wert.
+
  • Standardwert: 0% 0%
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Beziehen sich auf den Positionierungsbereich (z.B. Größe eines <div>) minus der Bildgröße
  • Medium: visuell
  • berechneter Wert: für <Länge> der absolute Wert; sonst eine Prozentzahl
    • +
+

Syntax

+
background-position:  <Hintergrundposition>[, <Hintergrundposition>]*
+
+<Hintergrundposition>:
+  [ [ <Prozentzahl> | <Länge> | left | center | right ] ]
+  [ [ <Prozentzahl> | <Länge> | top | center | bottom ] ]?
+|
+  [ center | [ left | right ] [ <Prozentzahl> | <Länge> ]? ] || [ center | [ top | bottom ] [ <Prozentzahl> | <Länge> ]? ] ]
+|
+  inherit
+
+

Werte

+

Möglich sind ein oder zwei Werte. Negative <Prozentzahlen> und <Längen> sind erlaubt.
+Wenn nur ein Wert angegeben wird, ist der zweite automatisch center.
+Der erste Wert gibt die horizontale, der zweite die vertikale Position an (Es sei denn, mindestens ein Wert ist ein Schlüsselwort).

+
<Prozentwert>
Mit einem Wert von 0% 0% (gleichbedeutend zu 0 0) wird das Bild an der oberen linken Ecke ausgerichtet.
Mit einem Wert von 100% 100% wird das Bild an der unteren rechten Ecke ausgerichtet.
Mit einem Wert von 50% 50% wird das Bild horizontal und vertikal zentriert.
Die absoluten Werte werden aus der Größe des Postionierungsbereichs minus der Bildgröße berechnet (Siehe Berechnung der Prozentwerte).
<Länge>
Verschiebung vom Ursprung (obere linke Ecke)
left
Gleichbedeutend für 0% für die horizontale Postion
center
Gleichbedeutend für 50% für die horizontale Position, wenn diese nicht festgelegt ist, sonst gleichbedeutend für 50% für die vertikale Postion.
right
Gleichbedeutend für 100% für die horizontale Postion
top
Gleichbedeutend für 0% für die vertikale Postion
bottom
Gleichbedeutend für 100% für die vertikale Postion
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+

Berechnung der Prozentwerte

+
.beispielNull {
+  width: 320px;                   /* 50% der Bereichsbreite = 160px  */
+  height: 320px;                  /* 50% Bereichshöhe = 160px  */
+
+  background-image: url(32x32.jpg)/* 50% der Bildbreite/Bildhöhe = 16px  */
+
+  background-position: 50% 50%;   /* 160px-16px = 144px */
+                                  /* 50% 50% entspricht also: 144px 144px /*
+}
+
+

Positionen für einzelne Hintergrundbilder

+
.beispielEins {
+  background-image: url("logo.png");
+  background-position: top;
+}
+
+.beispielZwei {
+  background-image: url("logo.png");
+  background-position: 25% 75%;
+}
+
+.beispielDrei {
+  background: url("logo.png") 2cm bottom;
+}
+
+.beispielVier {
+  background-image: url("logo.png");
+  background-position: center 10%;
+}
+
+.beispielFuenf {
+  background: url("logo.png") 3em 50%;
+}
+
+
+

Positionen für mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}

+
.beispielSechs {
+  background-image: url("img1.png"), url("img2.png");
+  background-position: 0px 0px, center;
+}
+
+
+

Browser Kompatibilität

+ +
Browser ab Version mehrere Hintergrundbilder
Internet Explorer 4.0 ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 10.5
Safari (WebKit) 1.0 (85) 1.3 (312)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/background-position", "fr": "fr/CSS/background-position", "pl": "pl/CSS/background-position", "es": "es/CSS/background-position" } ) }}

diff --git a/files/de/web/css/background-repeat/index.html b/files/de/web/css/background-repeat/index.html new file mode 100644 index 0000000000..7dd8a25693 --- /dev/null +++ b/files/de/web/css/background-repeat/index.html @@ -0,0 +1,166 @@ +--- +title: background-repeat +slug: Web/CSS/background-repeat +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/background-repeat +--- +

{{ CSSRef() }}

+ +

Übersicht:

+ +

Die background-repeat Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden.

+ +
Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundwiederholungen, durch Kommata getrennt, definiert werden.
+Vorherige Versionen unterstützen nur einen Wert.
+ +
    +
  • Standardwert: repeat
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+ +

Syntax

+ +
background-repeat:  <Hintergrundwiederholung>[, <Hintergrundwiederholung>]*
+
+<Hintergrundwiederholung>:
+repeat | repeat-x | repeat-y | no-repeat | round | space | inherit
+
+ +

Werte

+ +
+
repeat
+
Das Hintergrundbild wird horizontal und vertikal wiederholt.
+
repeat-x
+
Das Hintergrundbild wird nur horizontal wiederholt.
+
repeat-y
+
Das Hintergrundbild wird nur vertikal wiederholt.
+
no-repeat
+
Das Hintergrundbild wird nicht wiederholt. Nur ein Exemplar wird angezeigt.
+
round
+
{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Dabei kann das Hintergrundbild in seiner Größe angepasst werden, um auf die volle Breite bzw. Höhe des Elements ausgestreckt zu werden.
+
space
+
{{ unimplemented_inline() }} Das Hintergrundbild wird so oft wiederholt, wie es in das Element hinein passt. Allerdings wird die Bildgröße nicht angepasst, sondern soviel Platz zwischen den Hintergrundbildern gelassen, sodass sich der Hintergrund auf das gesamte Element verteilt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +

HTML

+ +
<ol>
+    <li>no-repeat
+        <div class="one">&nbsp;</div>
+    </li>
+    <li>repeat
+        <div class="two">&nbsp;</div>
+    </li>
+    <li>repeat-x
+        <div class="three">&nbsp;</div>
+    </li>
+    <li>repeat-y
+        <div class="four">&nbsp;</div>
+    </li>
+    <li>repeat-x, repeat-y (multiple images)
+        <div class="five">&nbsp;</div>
+    </li>
+</ol>
+ +

CSS

+ +
/* Shared for all DIVS in example */
+li {margin-bottom: 12px;}
+div {
+    background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+    width: 144px;
+    height: 84px;
+}
+
+/* background repeat CSS */
+.one {
+    background-repeat: no-repeat;
+}
+.two {
+    background-repeat: repeat;
+}
+.three {
+    background-repeat: repeat-x;
+}
+.four {
+    background-repeat: repeat-y;
+}
+
+/* Multiple images */
+.five {
+    background-image:  url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+                       url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png);
+    background-repeat: repeat-x,
+                       repeat-y;
+    height: 144px;
+}
+ +

Result

+ +

In this example, each list item is matched with a different value of background-repeat.

+ +

{{EmbedLiveSample('Beispiele', 240, 360)}}

+ +

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Browserab Versionmehrere Hintergrundbilderround und space Werte
Internet Explorer4.0------
Firefox (Gecko)1.0 (1.0)3.6 (1.9.2)---
Opera3.510.510.5
Safari (WebKit)1.0 (85)1.3 (312)---
+ +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/background-repeat", "es": "es/CSS/background-repeat", "fr": "fr/CSS/background-repeat", "pl": "pl/CSS/background-repeat" } ) }}

diff --git a/files/de/web/css/background-size/index.html b/files/de/web/css/background-size/index.html new file mode 100644 index 0000000000..de6629ef6b --- /dev/null +++ b/files/de/web/css/background-size/index.html @@ -0,0 +1,151 @@ +--- +title: background-size +slug: Web/CSS/background-size +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - NeedsMobileBrowserCompatibility + - Referenz +translation_of: Web/CSS/background-size +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die background-size CSS Eigenschaft definiert die Abmessungen eines Hintergrundbildes. Die Abmessungen des Bildes können komplett festgelegt werden oder nur teilweise, um das eigentliche Seitenverhältnis zu erhalten.

+ +
Hinweis: Folgt auf background-size die {{cssxref("background")}} Kurzform und es wird in ihr kein Wert für diese Eigenschaft angegeben, wird der Wert auf den Standardwert zurückgesetzt.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Schlüsselwort Syntax */
+background-size: cover;
+background-size: contain;
+
+/* Ein-Wert Syntax: Der Wert definiert die Bildbreite,
+   die Höhe wird auf 'auto' gesetzt */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Zwei-Wert Syntax: Der erste Wert definiert die Bildbreite,
+   der Zweite die Höhe */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Werte für mehrere Hintergründe, die durch background-image definiert wurden,
+   können kommagetrennt aufgelistet werden */
+background-size: auto, auto     /* Nicht zu verwechseln mit background-size: auto auto */
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Globale Werte */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+
+ +

Werte

+ +
+
<length>
+
Ein {{cssxref("<length>")}} Wert, der das Hintergrundbild auf die angegebene Länge in der entsprechenden Maßeinheit skaliert. Negative Werte sind nicht erlaubt.
+
<percentage>
+
Ein {{cssxref("<percentage>")}} Wert,  der das Hintergrundbild auf den angegebenen Prozentwert des Hintergrund-Positionierungsbereich skaliert (angegeben durch {{cssxref("background-origin")}}). Standardmäßig umfasst der Positionierungsbereich den Inhalt des Elements und dessen Innenabstand (Padding), kann aber auch so abgeändert werden, dass er nur den Inhalt umfasst oder Inhalt, Innenabstand und Rahmen. Ist die {{cssxref("background-attachment","attachment")}} Eigenschaft auf fixed gesetzt, entspricht der Positionierungsbereich dem Browser-Fenster abzüglich des von eventuellen Scroll-Leisten genutzten Bereichs. Negative Prozentwerte sind nicht erlaubt.
+
auto
+
Das auto Schlüsselwort skaliert das Hintergrundbild so in die entsprechende Richtung, dass das ursprüngliche Seitenverhältnis beibehalten wird.
+
cover
+
Das cover Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt.
+
contain
+
Das contain Schlüsselwort behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so groß wie möglich ist, aber vollständig im Hintergrund-Positionierungsbereichs enthalten ist.
+
+ +

Die Interpretation möglicher Werte hängt von den Maßen (Breite und Höhe) und der Proportion (Verhältnis von Breite zu Höhe) des Bildes ab. Eine Rastergrafik hat immer eigene Maße und eine eigene Proportion. Eine Vektorgrafik kann beide eigenen Maße haben (und somit auch eine eigene Proportion). Sie kann aber auch nur ein oder kein eigenes Maß haben. In beiden Fällen kann sie (muss aber nicht) eine eigen Proportion haben. Farbverläufe werden als Grafiken ohne eigene Maße und eigener Proportion behandelt.

+ +
Hinweis: Dieses Verhalten hat sich in Gecko 8.0 {{geckoRelease("8.0")}} geändert. Vorher wurden Farbverläufe als Grafiken ohne eigene Maße, aber mit einer eigenen Proportion behandelt. Die Proportion entsprach dabei derjenigen des Positionierungsbereich des Hintergrunds.
+ +

Hintergrundbilder, die mittels {{cssxref("-moz-element")}} generiert wurden, werden momentan als Bilder mit den Maßen des Elements behandelt. Außer es handelt sich um ein SVG-Element, dann werden die Maße des Hintergrund-Positionierungsbereich mit der eigenen Proportion verwendet.

+ +
Hinweis: Die entspricht nicht dem spezifizierten Verhalten, wonach die Maße und die Proportion stets denjenigen Werten des Elements entsprechen müssen.
+ +

Die gerenderte Größe des Hintergrundbildes wird folgendermaßen berechnet:

+ +
+
Falls beide Werte von background-size angegeben werden und nicht auto sind:
+
Das Hintergrundbild wird mit den angegebenen Werten gerendert.
+
Falls die Schlüsselwörter contain oder cover gesetzt werden:
+
Das Bild behält seine eigene Proportion bei, wobei die Maße so berechnet werden, dass das Bild im Hintergrund-Positionierungsbereich enthalten ist beziehungsweise ihn abdeckt. Besitzt das Bild keine eigene Proportion, wird es auf die Größe des Hintergrund-Positionierungsbereichs gerendert.
+
Falls background-size auto oder auto auto ist:
+
Besitzt das Bild beide Maße, wird es in dieser Größe gerendert. Hat es keine eigenen Maße und keine eigene Proportion, wird es in der Größe des Hintergrund-Positionierungsbereich gerendert. Hat es keine Maße, aber eine Proportion, wird es so gerendert als ob contain angegeben wurde. Hat es ein Maß angegeben und besitzt eine Proportion, wird es entsprechend dieser Angaben gerendert. Hat es ein Maß und keine Proportion, wird es mit diesem eigenen Maß und dem entsprechenden Maß des Hintergrund-Positionierungsbereichs gerendert.
+
Falls background-size ein auto und ein nicht-auto Wert besitzt:
+
Hat das Bild eine eigene Proportion, wird das nicht spezifizierte Maß aus dem angegebenen Maß und der Proportion berechnet. Hat das Bild keine eigene Proportion, wird das angebene Maß und das entsprechende eigene Maß des Bilds verwendet, falls vorhanden. Existiert kein eigenes Maß, wird dasjenige des Hintergrund-Positionierungsbereichs verwendet. 
+
+ +

Es ist zu beachten, dass Vektorgrafiken ohne Maße oder Proportion noch nicht vollständig in allen Browsern implementiert sind. Aus diesem Grund sollte man nicht zu sehr auf das oben beschriebene Verhalten vertrauen. Tests in unterschiedlichen Browsern (insbesondere Firefox 7 oder älter und Firefox 8 oder neuer) sind nötig, um festzustellen, ob die verschiedenen Darstellungen akzeptabel sind.

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Diese Demonstration von background-size: cover und diese Demonstration von background-size: contain sollten in einem neuen Fenster geöffnet werden, damit man das Verhalten von cover und contain bei ändernder Größe des Hintergrund-Positionierungsbereichs beobachten kann. Diese Demos zeigen das Zusammenspiel von background-size mit anderen background-* Attributen.

+ +

Hinweise

+ +

Wird ein Farbverlauf als HIntergrund und zusätzliche eine background-size angegeben, ist es empfehlenswert, die Hintergrund-Größe nicht mit einem einzelnen auto Wert oder nur mit einer Breite zu definieren (zum Beispiel background-size: 50%). Das Rendern solcher Farbverläufe hat sich mit Firefox 8 geändert und führt generell zu einer inkonsistenten Darstellung in Browsern, die die beiden Spezifikationen the CSS3 background-size specification und the CSS3 Image Values gradient specification nicht vollständig implementieren.

+ +
.bar {
+       width: 50px; height: 100px;
+       background-image: gradient(...);
+
+       /* NICHT EMPFOHLEN */
+       background-size: 25px;
+       background-size: 50%;
+       background-size: auto 50px;
+       background-size: auto 50%;
+
+       /* OKAY */
+       background-size: 25px 50px;
+       background-size: 50% 50%;
+}
+
+ +

Insbesondere ist es nicht empfohlen, ein Pixel-Wert und ein auto Wert zusammen mit einem Farbverlauf zu verwenden, da die Darstellung in Firefox-Versionen vor 8 oder in anderen Browsern, die nicht das Firefox 8 Rendering verwenden nicht nachzuvollziehen ist, wenn die genaue Größe des Elements nicht bekannt ist.

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background-size', 'background-size')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.background-size")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/background/index.html b/files/de/web/css/background/index.html new file mode 100644 index 0000000000..d4e50112d0 --- /dev/null +++ b/files/de/web/css/background/index.html @@ -0,0 +1,182 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/background +--- +
+

{{CSSRef("CSS Background")}}

+ +

Die CSS Kurzformat-Eigenschaft backgroundsetzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

Eigenschaftsbestandteile

+ +

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

+ +
    +
  • {{cssxref("background-attachment")}}
    • +
  • {{cssxref("background-clip")}}
    • +
  • {{cssxref("background-color")}}
    • +
  • {{cssxref("background-image")}}
    • +
  • {{cssxref("background-origin")}}
    • +
  • {{cssxref("background-position")}}
    • +
  • {{cssxref("background-repeat")}}
    • +
  • {{cssxref("background-size")}}
    • +
+
+ +

Syntax

+ +
/* Verwendung von <background-color> */
+background: green;
+
+/* Verwendung von <bg-image> und <repeat-style> */
+background: url("test.jpg") repeat-y;
+
+/* Verwendung von <box> und <background-color> */
+background: border-box red;
+
+/* Ein einzelnes Bild, zentriert und skaliert */
+background: no-repeat center/80% url("../img/image.png");
+
+ +

Die Eigenschaft background wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.

+ +

Die Syntax der einzelnen Schichten ist wie folgt:

+ +
    +
  •  Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten: + +
    • +
  • Der Wert <bg-size>  darf nur unmittelbar nach <position>, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "center/80%".
    • +
  • Der Wert <box> kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohl {{cssxref("background-origin")}} als auch {{cssxref("background-clip")}}. Bei zweimaligem Einschließen setzt das erste Vorkommen {{cssxref("background-origin")}} und das zweite Vorkommen {{cssxref("background-clip")}}.
    • +
  • Der Wert <background-color> darf nur in der zuletzt angegebenen Ebene enthalten sein.
    • +
+ +
Hinweis: Die {{cssxref("background-color")}} kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.
+ +

Werte

+ +

Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:

+ +
+
<attachment>
+
Siehe {{cssxref("background-attachment")}}
+
<box>
+
Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
+
<background-color>
+
Siehe {{cssxref("background-color")}}
+
<bg-image>
+
See {{Cssxref("background-image")}}
+
<position>
+
Siehe {{cssxref("background-position")}}
+
<repeat-style>
+
Siehe {{cssxref("background-repeat")}}
+
<bg-size>
+
Siehe {{cssxref("background-size")}}.
+
+ +

Bedenken zur Zugänglichkeit

+ +

Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.

+ + + +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

+ +
.warning {
+  background: pink;
+}
+
+.topbanner {
+  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}Die Kurzformat-Eigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften {{cssxref("background-size")}}, {{cssxref("background-origin")}} und {{cssxref("background-clip")}} unterstützt.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +
+ + +

{{Compat("css.properties.background")}}

+
+ +

Siehe auch

+ + diff --git a/files/de/web/css/basic-shape/index.html b/files/de/web/css/basic-shape/index.html new file mode 100644 index 0000000000..9c53920461 --- /dev/null +++ b/files/de/web/css/basic-shape/index.html @@ -0,0 +1,176 @@ +--- +title: +slug: Web/CSS/basic-shape +tags: + - CSS + - CSS Datentyp + - CSS Formen + - Referenz +translation_of: Web/CSS/basic-shape +--- +

{{CSSRef}}

+ +

Der <basic-shape> CSS Datentyp stellt eine geometrische Grundform dar. Er kann in den {{cssxref("clip-path")}}, {{cssxref("shape-outside")}} und {{cssxref("offset-path")}} CSS-Eigenschaften verwendet werden.

+ +

Syntax

+ +

Die unten aufgelisteten Funktionen definieren <basic-shape> -Werte.

+ +

Wenn eine Form erstellt wird, definiert sich der Referenzrahmen durch jede CSS-Eigenschaft, die <basic-shape> -Werte benutzt. Der Koordinatenursprung für die Form liegt in der oberen linken Ecke des Referenzrahmens, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Dieses Koordinatensystem ist in vielen Computergrafiksystemen üblich.

+ +

Form-Funktionen

+ +

Die folgenden Formen werden unterstützt. Alle <basic-shape> Werte verwenden die funktionale Schreibweise und werden mithilfe der Wertdefinitionssyntax definiert.

+ +
+
inset()
+
+ 
inset( <shape-arg>{1,4} [round <border-radius>]? )
+ +

Definiert ein nach innen versetztes Rechteck.

+ +

Wenn alle vier ersten Argumente vorhanden sind, stellen sie den Versatz des Rechtecks oben, links, rechts und unten dar. Der Versatz bezieht sich auf den Referenzrahmen. Wie auch bei der {{cssxref("margin")}}-Eigenschaft können weniger als vier Werte als Kurzform angegeben werden.

+ +

Die optionalen {{cssxref("<border-radius>")}}-Argumente definieren abgerundete Ecken für das Rechteck. Auch hier ist die <border-radius>-Kurzform-Syntax zulässig.

+
+
circle()
+
+ 
circle( [<shape-radius>]? [at <position>]? )
+ +

Definiert einen Kreis.

+ +

Das <shape-radius>-Argument stellt den Radius r des Kreises dar, negative Werte sind verboten. Ein Prozentwert bezieht sich auf sqrt(a^2+b^2)/sqrt(2), wobei a und b Höhe und Breite des Referenzrahmens darstellen. Dieser Referenzwert ist die Länge einer Seite eines Quadrats, das dieselbe Fläche wie der Referenzrahmen hat.

+ +

Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt des Kreises. Standardmäßig wird der Kreis in der Mitte des Referenzrahmens platziert.

+
+
ellipse()
+
+ 
ellipse( [<shape-radius>{2}]? [at <position>]? )
+ +

Definiert eine Ellipse, deren Hauptachse und Nebenachse entlang der x- oder y-Achsen verlaufen.

+ +

Das <shape-radius> Argument repräsentiert den Radius entlang der x- bzw. y-Achse. Negative Werte sind ungültig. Prozentwerte werden im Verhältnis zur Breite (für die x-Achse) und Höhe (für die y-Achse) des Referenzrahmens bestimmt.

+ +

Das {{cssxref("<position>")}}-Argument definiert den Mittelpunkt der Ellipse. Standardmäßig wird die Ellipse in der Mitte des Referenzrahmens platziert.

+
+
+ +
+
polygon()
+
+ 
polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
+ +

Definiert ein Vieleck (Polygon).

+ +

<fill-rule> definiert die Füllregel, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

+ +

Jedes Argumentpaar der Liste stellt die x- und y-Koordinate einer Ecke des Vielecks dar.

+
+
path()
+
+ 
path( [<fill-rule>,]? <string>)
+ +

Definiert einen SVG-Pfad, also eine Kombination aus Kurven, Strecken und Punkten.

+ +

<fill-rule> definiert die Füllregel, die zur Bestimmung der Innenfläche des Polygons verwendet werden soll. Mögliche Werte sind nonzero und evenodd. Der Standardwert ist nonzero.

+ +

<string> entspricht dem d-Attribut des SVG-Pfades und ist der SVG-Pfad-Text in Anführungszeichen.

+
+
+ +

Die Argumente, die oben nicht definiert sind, werden folgendermaßen definiert:

+ +
<shape-arg> = <length> | <percentage>
+<shape-radius> = <length> | <percentage> | closest-side | farthest-side
+ +

closest-side verwendet den Abstand des Mittelpunkts der Form zur nächsten Seite des Referenzrahmens. Für Kreise ist dies die nächste Seite in beliebiger Richtung. Für Ellipsen ist dies die nächste Seite in Radiusrichtung.

+ +

farthest-side verwendet die Länge vom Mittelpunkt der Form zur entferntesten Seite der Referenzrahmens. Für Kreise ist dies die entfernteste Seite in beliebiger Richtung. Für Ellipsen ist dies die entfernteste Seite in Radiusrichtung.

+ +

Berechnete Werte von Grundformen

+ +

Die Werte in einer <basic-shape> Funktion werden wie angegeben berechnet, mit folgenden Ausnahmen:

+ +
    +
  • Anstelle von ausgelassenen Werten werden Standardwerte verwendet.
    • +
  • Ein {{cssxref("<position>")}}-Wert in circle() oder  ellipse() wird als ein Versatzpaar (horizontal, dann vertikal) vom Ursprung berechnet, wobei jeder Versatz als Kombination einer absoluten Länge und einem Prozentwert angegeben wird.
    • +
  • Ein <border-radius> Wert in inset() wird als eine erweiterte Liste aller acht {{cssxref("<length>")}}-Werte oder Prozentwerte berechnet.
    • +
+ +

Interpolation von Grundformen

+ +
Zur Interpolation zwischen zwei Grundformen werden die folgenden Regeln angewandt. In den Formfunktionen werden alle Werte als Liste interpoliert. Die Listenwerte werden, soweit möglich, als {{cssxref("<length>")}}, {{cssxref("<percentage>")}} oder {{cssxref("calc")}}-Ausdruck interpoliert. Falls die Listenwerte nicht diesen Typen entsprechen, jedoch identisch sind (wie beispielsweise Zahlen ungleich null an der gleichen Position innerhalb beider Listen), werden diese Werte interpoliert.
+ +
+ +
    +
  • Beide Formen müssen den gleichen Referenzrahmen verwenden.
    • +
  • Falls beide Formen vom gleichen Typ sind, d. h. vom Typ ellipse() oder circle(), und keiner der Radien die Schlüsselwörter closest-side oder farthest-side verwendt, wird zwischen jedem Wert der Formfunktionen interpoliert.
    • +
  • Falls beide Formen vom Typ inset() sind, wird zwischen jedem Wert der Formfunktionen interpoliert.
    • +
  • Falls beide Formen vom Typ polygon() sind, beide Vielecke die gleiche Anzahl an Eckpunkten haben und die gleiche <fill-rule> verwenden, wird zwischen jedem Wert der Formfunktionen interpoliert.
    • +
  • In allen anderen Fällen findet keine Interpolation statt.
    • +
+ +

Beispiele

+ +

Animiertes Polygon

+ +

In diesem Beispiel nutzten wir eine @keyframes Regel, um den Pfad zwischen zwei Vielecken zu animieren. (In diesem Beispiel müssen beide Vielecke dieselbe Anzahl Kanten haben.)

+ +

HTML

+ +
<div></div>
+ +

CSS

+ +
div {
+  width: 300px;
+  height: 300px;
+  background: repeating-linear-gradient(red, orange 50px);
+  clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  animation: 4s poly infinite alternate ease-in-out;
+  margin: 10px auto;
+}
+
+@keyframes poly {
+  from {
+    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
+  }
+
+  to {
+    clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%);
+  }
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample('Animated_polygon','340', '340')}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS Shapes', '#basic-shape-functions', '<basic-shape>') }}{{ Spec2('CSS Shapes') }}Ursprüngliche Definition.
+ +

Browser Kompatibilität

+ +

{{Compat("css.types.basic-shape")}}

+ +

Siehe auch

+ +
    +
  • {{cssxref("shape-outside")}}
    • +
diff --git a/files/de/web/css/berechneter_wert/index.html b/files/de/web/css/berechneter_wert/index.html new file mode 100644 index 0000000000..d98a8be023 --- /dev/null +++ b/files/de/web/css/berechneter_wert/index.html @@ -0,0 +1,32 @@ +--- +title: Berechneter Wert +slug: Web/CSS/berechneter_Wert +tags: + - CSS + - Guide + - Web +translation_of: Web/CSS/computed_value +--- +
+ {{cssref}}
+

Übersicht

+

Der berechnete Wert einer CSS Eigenschaft wird aus dem angegebenen Wert berechnet durch:

+
    +
  • Verarbeitung der speziellen Werte {{ cssxref("inherit") }} und {{ cssxref("initial") }} und
    • +
  • durch die Berechnung, die benötigt wird, um den Wert zu erreichen, der in der Zeile "Berechneter Wert" in der Übersicht der Eigenschaft beschrieben wird.
    • +
+

Die Berechnung, die benötigt wird, um den "berechneten Wert" für die Eigenschaft zu erreichen, beinhaltet typischerweise die Konvertierung relativer Werte (wie die in em Einheiten oder Prozentangaben) zu absoluten Werten.

+

Wenn zum Beispiel ein Element einen Wert font-size:16px und padding-top:2em definiert hat, dann ist der berechnete Wert von padding-top gleich 32px (zweimal die Schriftgröße).

+

Für einige Eigenschaften jedoch (jene, für die Prozentangaben relativ zu etwas sind, das Layout zur Bestimmung benötigt, wie width, margin-right, text-indent und top), werden definierte Prozentwerte zu berechneten Prozentwerten. Des weiteren werden in line-height definierte einheitenlose Zahlen zu berechneten Werten, wie angegeben. Diese relativen Werte, die im berechneten Wert gleich bleiben, werden absolut sobald der benutzte Wert ermittelt wird.

+

Der Hauptnutzen des berechneten Wertes (außer als ein Schritt zwischen dem angegebenen Wert und dem benutzten Wert) ist Vererbung inklusive dem {{ cssxref("inherit") }} Schlüsselwort.

+

Hinweis

+

Die {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API gibt den aufgelösten Wert zurück, welcher abhängig von der Eigenschaft entweder der berechnete Wert oder der benutzte Wert ist.

+

Spezifikation

+ +

Siehe auch

+ diff --git a/files/de/web/css/border-bottom-color/index.html b/files/de/web/css/border-bottom-color/index.html new file mode 100644 index 0000000000..86561e834a --- /dev/null +++ b/files/de/web/css/border-bottom-color/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom-color +slug: Web/CSS/border-bottom-color +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Referenz +translation_of: Web/CSS/border-bottom-color +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-bottom-color CSS Eigenschaft legt die Farbe des unteren Rahmens eines Elements fest. Beachte, dass in vielen Fällen die Kurzschreibweisen {{cssxref("border-color")}} oder {{cssxref("border-bottom")}} geeigneter und daher zu bevorzugen sind.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-bottom-color: yellow;
+border-bottom-color: #F5F6F7;
+
+ +

Werte

+ +
+
<color>
+
Ist ein {{cssxref("<color>")}} CSS Wert, der die Farbe des unteren Rahmens beschreibt.
+
inherit
+
Ist ein Schlüsselwort, das die Farbe des unteren Rahmens des Elternelements kennzeichnet (welche sich vom Standardwert von border-bottom-color unterscheiden kann).
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Ein einfacher div mit einem Rahmen

+ +

HTML Inhalt

+ +
<div class="mybox">
+    <p>Dies ist eine Box mit einem Rahmen außenrum.
+       Beachte welche Seite der Box
+       <span class="redtext">rot</span> ist.</p>
+</div>
+ +

CSS Inhalt

+ +
.mybox {
+    border: solid 0.3em gold;
+    border-bottom-color: red;
+    width: auto;
+}
+.redtext {
+    color: red;
+}
+ +

Ergebnis

+ +

{{EmbedLiveSample("Ein_einfacher_div_mit_einem_Rahmen")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName("CSS3 Backgrounds", "#border-bottom-color", "border-bottom-color")}}{{Spec2("CSS3 Backgrounds")}}Keine nennenswerten Änderungen, jedoch wurde das Schlüsselwort transparent entfernt, das nun in {{cssxref("<color>")}} beinhaltet ist, welcher erweitert wurde.
{{SpecName("CSS2.1", "box.html#border-color-properties", "border-bottom-color")}}{{Spec2('CSS2.1')}}Erstmalige Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom-color")}} + +

Siehe auch

+ +
    +
  • Die rahmenbezogenen CSS Kurzschreibweise Eigenschaften {{Cssxref("border")}}, {{Cssxref("border-bottom")}} und {{Cssxref("border-color")}}.
    • +
  • Die farbbezogenen CSS Eigenschaften, die sich auf die anderen Ränder beziehen: {{Cssxref("border-right-color")}}, {{Cssxref("border-top-color")}} und {{Cssxref("border-left-color")}}.
    • +
  • Die anderen rahmenbezogenen CSS Eigenschaften, die sich auf denselben Rand beziehen: {{cssxref("border-bottom-style")}} und {{cssxref("border-bottom-width")}}.
    • +
diff --git a/files/de/web/css/border-bottom-left-radius/index.html b/files/de/web/css/border-bottom-left-radius/index.html new file mode 100644 index 0000000000..ad1aea03ac --- /dev/null +++ b/files/de/web/css/border-bottom-left-radius/index.html @@ -0,0 +1,51 @@ +--- +title: border-bottom-left-radius +slug: Web/CSS/border-bottom-left-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-left-radius +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die CSS Eigenschaft border-bottom-left-radius legt die Abrundung der unteren, linken Ecke eines Elements fest. Vor Gecko 2.0 (Firefox) war diese Eigenschaft unter dem Namen -moz-border-radius-bottomleft bekannt.

+ +

Weitere Informationen sind unter border-top-left-radius verfügbar.

+ +

{{cssinfo}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-bottom-left-radius")}}
+ +
border-bottom-left-radius: radius               /* the corner is a circle    */  E.g. border-bottom-left-radius: 3px
+border-bottom-left-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-bottom-left-radius: 0.5em 1em
+
+border-bottom-left-radius: inherit
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-bottom-left-radius', 'border-bottom-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-bottom-left-radius")}}

diff --git a/files/de/web/css/border-bottom-right-radius/index.html b/files/de/web/css/border-bottom-right-radius/index.html new file mode 100644 index 0000000000..786a7a21a7 --- /dev/null +++ b/files/de/web/css/border-bottom-right-radius/index.html @@ -0,0 +1,56 @@ +--- +title: border-bottom-right-radius +slug: Web/CSS/border-bottom-right-radius +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - CSS Ränder + - Layout + - NeedsContent +translation_of: Web/CSS/border-bottom-right-radius +--- +

{{CSSRef}}

+ +

Die CSS Eigenschaft border-bottom-right-radius legt die Abrundung der unteren rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen -moz-border-radius-bottomright bekannt.

+ +

Weitere Informationen sind unter border-top-left-radius verfügbar.

+ +

{{cssinfo("border-bottom-right-radius")}}

+ +

Syntax

+ +
border-bottom-right-radius: radius               /* the corner is a circle    */  E.g. border-bottom-right-radius: 3px
+border-bottom-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-bottom-right-radius: 0.5em 1em
+
+border-bottom-right-radius: inherit
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-bottom-right-radius', 'border-bottom-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-bottom-right-radius")}}

diff --git a/files/de/web/css/border-bottom-style/index.html b/files/de/web/css/border-bottom-style/index.html new file mode 100644 index 0000000000..bfd0ec4249 --- /dev/null +++ b/files/de/web/css/border-bottom-style/index.html @@ -0,0 +1,99 @@ +--- +title: border-bottom-style +slug: Web/CSS/border-bottom-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-style +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-bottom-style Eigenschaft legt die Rahmenart des unteren Rahmens fest.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-bottom-style: {{csssyntax("border-bottom-style")}}
+
+ +

Werte

+ +
+
none
+
Standardwert. Es wird kein unterer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
hidden
+
Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
dotted
+
Punktierte Linie.
+
dashed
+
Gestrichelte Linie.
+
solid
+
Durchgehende Linie.
+
double
+
Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-bottom-width Angabe groß.
+
groove
+
Der Rahmen wirkt eingekerbt (3D-Effekt).
+
ridge
+
Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
inset
+
Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
outset
+
Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
.beispielEins {
+  border-bottom-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-bottom-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-bottom-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Backgrounds', '#border-bottom-style', 'border-bottom-style') }}{{ Spec2('CSS3 Backgrounds') }}keine Änderung
{{ SpecName('CSS2.1', 'box.html#border-style-properties', 'border-bottom-style') }}{{ Spec2('CSS2.1') }}Standardwert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom-style")}} + +

Siehe auch

+ +
    +
  • {{ Cssxref("border-bottom") }}, {{ Cssxref("border-bottom-color") }}, and {{ Cssxref("border-bottom-width") }}
    • +
  • {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }}, {{ Cssxref("border-top-style") }}, and {{ Cssxref("border-style") }}
    • +
diff --git a/files/de/web/css/border-bottom-width/index.html b/files/de/web/css/border-bottom-width/index.html new file mode 100644 index 0000000000..6f67816001 --- /dev/null +++ b/files/de/web/css/border-bottom-width/index.html @@ -0,0 +1,82 @@ +--- +title: border-bottom-width +slug: Web/CSS/Border-bottom-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-bottom-width +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-bottom-width Eigenschaft legt die Breite des unteren Rahmens fest.

+ +

{{cssinfo("border-bottom-width")}}

+ +

Syntax

+ +
border-bottom-width: {{csssyntax("border-bottom-width")}}
+
+
+ +

Werte

+ +
+
<Länge>
+
Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
thin
+
Eine dünne Rahmenlinie (1px).
+
medium
+
Standardwert. Eine mitteldicke Rahmenlinie (3px).
+
thick
+
Eine dicke Rahmenlinie (5px).
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
.beispielEins {
+  border-bottom-width: 10px;
+}
+
+.beispielZwei {
+  border-bottom-width: thin;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Backgrounds', '#the-border-width', 'border-bottom-width') }}{{ Spec2('CSS3 Backgrounds') }}Keine Änderung
{{ SpecName('CSS2.1', 'box.html#border-width-properties', 'border-bottom-width') }}{{ Spec2('CSS2.1') }}Standardwert definiert
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom-width")}} + +

Siehe auch

+ +
    +
  • {{Cssxref("border")}}, {{Cssxref("border-bottom")}}, {{Cssxref("border-bottom-style")}} und {{Cssxref("border-bottom-color")}}
    • +
  • {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}} und {{Cssxref("border-width")}}
    • +
diff --git a/files/de/web/css/border-bottom/index.html b/files/de/web/css/border-bottom/index.html new file mode 100644 index 0000000000..8d93a330f4 --- /dev/null +++ b/files/de/web/css/border-bottom/index.html @@ -0,0 +1,89 @@ +--- +title: border-bottom +slug: Web/CSS/border-bottom +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Referenz +translation_of: Web/CSS/border-bottom +--- +

{{ CSSRef("CSS Borders") }}

+ +

Übersicht

+ +

Die border-bottom Eigenschaft legt den unteren Rahmen eines Elementes fest und ist eine Kurzform für
+ border-bottom-color, border-bottom-style und border-bottom-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+
+ +

Werte

+ +
+
<Rahmenbreite>
+
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-bottom-width.
+
<Rahmenstil>
+
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-bottom-style.
+
<Rahmenfarbe>
+
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-bottom-color.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
.beispielEins {
+  border-bottom: 1px solid #000;
+}
+
+.beispielZwei {
+  border-bottom-style: dotted;
+  border-bottom: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-bottom-style: dotted;
+  border-bottom: none thick green;
+
+  /* border-bottom-style wird nach Angabe von border-bottom ignoriert.
+  Es wird kein unterer Rahmen gezeichnet. */
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS3 Backgrounds') }}No direct changes, though the modification of values for the {{ cssxref("border-bottom-color") }} do apply to it.
{{ SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom') }}{{ Spec2('CSS2.1') }}No significant changes
{{ SpecName('CSS1', '#border-bottom', 'border-bottom') }}{{ Spec2('CSS1') }} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-bottom")}} diff --git a/files/de/web/css/border-collapse/index.html b/files/de/web/css/border-collapse/index.html new file mode 100644 index 0000000000..52a2fcb4f1 --- /dev/null +++ b/files/de/web/css/border-collapse/index.html @@ -0,0 +1,155 @@ +--- +title: border-collapse +slug: Web/CSS/border-collapse +tags: + - CSS + - CSS Border + - CSS Rahmen + - CSS Referenz + - CSS Table + - Referenz +translation_of: Web/CSS/border-collapse +--- +

{{CSSRef}}

+ +

Die CSS Eigenschaft border-collapse bestimmt, ob die Zellen innerhalb einer Tabelle mite einem gemeinsamen oder getrennten Rahmen dargestellt werden.

+ +
{{EmbedInteractiveExample("pages/css/border-collapse.html")}}
+ + + +
Hinweis: Wenn der Wert auf collapsed gesetzt ist, so verhält sich der Wert inset für {{cssxref("border-style")}} wie der Wert groove und der Wert outset wie ridge.
+ +
Hinweis: When cells are separated, the distance between cells is defined by the {{cssxref("border-spacing")}} property.
+ +

Syntax

+ +
/* Keyword values */
+border-collapse: collapse;
+border-collapse: separate;
+
+/* Global values */
+border-collapse: inherit;
+border-collapse: initial;
+border-collapse: unset;
+
+ +

Die Eigenschaft border-collapse wird als ein einziges Schlüsselwort angegeben, das aus der folgenden Liste ausgewählt werden kann.

+ +

Werte

+ +
+
separate
+
Standardwert. Jede Zelle besitzt ihre eigenen Rahmen, deren Abstand mit border-spacing angegeben wird.
+
collapse
+
Benachbarte Zellen haben einen gemeinsame Rahmen.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Formal definition

+ +

{{CSSInfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ + + +

A colorful table of browser engines

+ +

HTML

+ +
<table class="separate">
+  <caption><code>border-collapse: separate</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+<table class="collapse">
+  <caption><code>border-collapse: collapse</code></caption>
+  <tbody>
+    <tr><th>Browser</th> <th>Layout Engine</th></tr>
+    <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
+    <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
+    <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
+    <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
+    <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
+  </tbody>
+</table>
+ +

CSS

+ +
.collapse {
+  border-collapse: collapse;
+}
+
+.separate {
+  border-collapse: separate;
+}
+
+table {
+  display: inline-table;
+  margin: 1em;
+  border: dashed 5px;
+}
+
+table th,
+table td {
+  border: solid 3px;
+}
+
+.fx { border-color: orange blue; }
+.gk { border-color: black red; }
+.ed { border-color: blue gold; }
+.tr { border-color: aqua; }
+.sa { border-color: silver blue; }
+.wk { border-color: gold blue; }
+.ch { border-color: red yellow green blue; }
+.bk { border-color: navy blue teal aqua; }
+.op { border-color: red; }
+ +

Ergebnis

+ +

{{ EmbedLiveSample('A_colorful_table_of_browser_engines', 400, 300) }}

+ + + +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS2.1', 'tables.html#borders', 'border-collapse') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.properties.border-collapse")}}

+ +

Siehe auch

+ +
    +
  • {{cssxref("border-spacing")}}, {{cssxref("border-style")}}, {{cssxref("caption-side")}}, {{cssxref("empty-cells")}}, {{cssxref("table-layout")}}
    • +
diff --git a/files/de/web/css/border-color/index.html b/files/de/web/css/border-color/index.html new file mode 100644 index 0000000000..bfac86d3ca --- /dev/null +++ b/files/de/web/css/border-color/index.html @@ -0,0 +1,107 @@ +--- +title: border-color +slug: Web/CSS/border-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-color +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die border-color Eigenschaft legt die Farbe des oberen, rechten, unteren und linken Rahmens fest.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-color:  {{csssyntax("border-color")}}
+
+ +

Werte

+ +
+
<Farbe>
+
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
+
transparent
+
Der Rahmen hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
Ein Wert
+
Gilt für alle vier Seiten: border-top-color, border-right-color, border-bottom-color und border-left-color.
+
Zwei Werte
+
Der erste Wert gilt für border-top-color und border-bottom-color, der zweite Wert für border-right-color und border-left-color.
+
Drei Werte
+
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color und border-left-color und der dritte Wert für border-bottom-color.
+
Vier Werte
+
Der erste Wert gilt für border-top-color, der zweite Wert für border-right-color, der dritte Wert für border-bottom-color und der vierte Wert für border-left-color.
+
+ +

Beispiele

+ +
.beispielEins {
+  border: solid;
+  border-color: blue;
+}
+
+ +
.beispielZwei {
+  border: solid;
+  border-color: blue #f00;
+}
+
+ +
.beispielDrei {
+  border: solid;
+  border-color: blue #f00 rgb(0,150,0);
+}
+
+ +
.beispielVier {
+  border: solid;
+  border-color: blue #f00 rgb(0,150,0) transparent;
+}
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Backgrounds', '#border-color', 'border-color') }}{{ Spec2('CSS3 Backgrounds') }}The transparent keyword has been removed as it is now a part of the {{cssxref("<color>")}} data type.
{{ SpecName('CSS2.1', 'box.html#border-color-properties', 'border-color') }}{{ Spec2('CSS2.1') }}The property is now a shorthand property
{{ SpecName('CSS1', '#border-color', 'border-color') }}{{ Spec2('CSS1') }} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-color")}} + +

Siehe auch

+ +
    +
  • {{CSSxRef("border")}}
    • +
  • {{CSSxRef("border-top-color")}}, {{CSSxRef("border-right-color")}}, {{CSSxRef("border-bottom-color")}}, {{CSSxRef("border-left-color")}}
    • +
  • {{CSSxRef("<color>")}}</color>
    • +
  • {{CSSxRef("color")}}, {{CSSxRef("background-color")}}, {{CSSxRef("outline-color")}}, {{CSSxRef("text-decoration-color")}}, {{CSSxRef("text-emphasis-color")}}, {{CSSxRef("text-shadow")}}, {{CSSxRef("caret-color")}}, and {{CSSxRef("column-rule-color")}}
    • +
diff --git a/files/de/web/css/border-image-outset/index.html b/files/de/web/css/border-image-outset/index.html new file mode 100644 index 0000000000..7cd1f0410c --- /dev/null +++ b/files/de/web/css/border-image-outset/index.html @@ -0,0 +1,77 @@ +--- +title: border-image-outset +slug: Web/CSS/border-image-outset +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/border-image-outset +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border-image-outset CSS Eigenschaft beschreibt, um welchem Wert der Randbildbereich über die Borderbox hinausragt.

+ +
{{cssinfo}}
+ +

Syntax

+ +
{{csssyntax}}
+
+ +
border-image-outset: Seiten                  /* Ein-Wert Syntax   */  z. B. border-image-outset: 30%;
+border-image-outset: vertikal horizontal     /* Zwei-Werte Syntax   */  z. B. border-image-outset: 10% 30%;
+border-image-outset: oben horizontal unten   /* Drei-Werte Syntax */  z. B. border-image-outset: 30px 30% 45px;
+border-image-outset: oben rechts unten links /* Vier-Werte syntax  */  z. B. border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit
+
+ +

Werte

+ +
+
Seiten
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in allen vier Richtungen überragt.
+
horizontal
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden horizontalen Richtungen überragt.
+
vertikal
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich die Borderbox in beiden vertikalen Richtungen überragt.
+
oben
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den oberen Rand der Borderbox hinausragt.
+
unten
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den unteren Rand der Borderbox hinausragt.
+
rechts
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den rechten Rand der Borderbox hinausragt.
+
links
+
Ist ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} Wert, der den Betrag angibt, um welchen der Randbildbereich über den linken Rand der Borderbox hinausragt.
+
inherit
+
Ist ein Schlüsselwort, das angibt, dass alle vier Werte vom berechneten Wert des Elternelements geerbt werden.
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-image-outset', 'border-image-outset')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-outset")}} diff --git a/files/de/web/css/border-image-repeat/index.html b/files/de/web/css/border-image-repeat/index.html new file mode 100644 index 0000000000..b721074674 --- /dev/null +++ b/files/de/web/css/border-image-repeat/index.html @@ -0,0 +1,83 @@ +--- +title: border-image-repeat +slug: Web/CSS/border-image-repeat +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/border-image-repeat +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die border-image-repeat CSS Eigenschaft definiert, wie der mittlere Teil eines Randbildes gehandhabt wird, sodass es in die Ausmaße des Randes passt. Sie hat eine Einwert-Syntax, welche das Verhalten aller Seiten beschreibt, und eine Zweiwert-Syntax, welche unterschiedliche Werte für das horizontale und vertikale Verhalten setzt.

+ +
{{cssinfo}}
+ +

Syntax

+ +
/* border-image-repeat: Typ */
+border-image-repeat: stretch;
+
+/* border-image-repeat: horizontal vertikal */
+border-image-repeat: round stretch;
+
+/* Globale Werte */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+
+ +

Werte

+ +
+
type
+
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild wiederholt wird. Dies wird nur in der Einwert-Syntax verwendet.
+
horizontal
+
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild horizontal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.
+
vertical
+
Eins der Schlüsselwörter stretch, repeat, round oder space, die angeben, wie das Bild vertikal wiederholt wird. Dies wird nur in der Zweiwert-Syntax verwendet.
+
stretch
+
Schlüsselwort, das angibt, dass das Bild gedehnt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.
+
repeat
+
Schlüsselwort, das angibt, dass das Bild wiederholt werden soll, um den Leerraum zwischen beiden Rändern zu füllen.
+
round
+
Schlüsselwort, das angibt, dass das Bild wiederholt werden soll bis es den Leerraum zwischen beiden Rändern füllt. Falls das Bild nach einer ganzzahligen Wiederholung nicht den gesamten Leerraum ausfüllt, wird es skaliert, damit es passt.
+
inherit
+
Schlüsselwort, das angibt, dass die Werte vom berechneten Wert des Elternelements geerbt werden sollen.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe {{cssxref("border-image")}} für Beispiele, welche Auswirkungen Wiederholungswerte haben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Backgrounds', '#border-image-repeat', 'border-image-repeat')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-repeat")}} diff --git a/files/de/web/css/border-image-slice/index.html b/files/de/web/css/border-image-slice/index.html new file mode 100644 index 0000000000..c52c885c16 --- /dev/null +++ b/files/de/web/css/border-image-slice/index.html @@ -0,0 +1,102 @@ +--- +title: border-image-slice +slug: Web/CSS/border-image-slice +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - NeedsExample + - Referenz +translation_of: Web/CSS/border-image-slice +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die border-image-slice CSS Eigenschaft teilt das Bild, welches von {{cssxref("border-image-source")}} spezifiziert wird, in neun Regionen ein: Die vier Ecken, die vier Kanten und die Mitte. Diese werden von 4 Werten festgelegt.

+ +

The nine slices defined by the CSS border-image shorthand or border-image-slice longhand propertiesVier Werte kontrollieren die Position der Schneidelinien, die das Bild einteilen. Werden nicht alle Werte definiert, werden sie von den anderen angegebenen, mit der üblichen 4-Werte CSS Syntax, abgeleitet.

+ +

Die Mitte des Bildes wird nicht im Rand verwendet, kann allerdings als Hintergrundbild benutzt werden, wenn das Schlüsselwort fill gesetzt wurde. Dies kann an jeder Position der CSS-Eigenschaft geschehen (vor, hinter oder zwischen anderen Werten).

+ +

Die Eigenschaften {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} definieren die weitere Verwendung des Bildes.

+ +

Die Kurzschreibweise {{cssxref("border-image")}} kann diese Eigenschaft zu ihrem Standardwert zurücksetzen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertikal */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: oben vertikal unten */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: oben rechts unten links */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* Der fill Wert kann zwischen beliebigen Werten platziert werden */
+border-image-slice: 10% fill 7 12;
+
+/* Globale Werte */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+
+ +

Werte

+ +
+
slice
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der vier Schneidelinien vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
horizontal
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der zwei horizontalen Schneidelinien, die von oben und unten, vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
vertical
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der zwei vertikalen Schneidelinien, die von rechts und links, vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
top
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der oberen Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
bottom
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der unteren Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
right
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der rechten Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
left
+
ist eine {{cssxref("<number>")}} oder eine {{cssxref("<percentage>")}}, welche den Abstand der linken Schneidelinie vom Rand festlegt. {{cssxref("<length>")}} Werte sind nicht erlaubt. Die {{cssxref("<number>")}} wird bei Rastergrafiken als Pixel, bei Vektorgrafiken als Koordinaten angesehen. Des Weiteren sind {{cssxref("<percentage>")}} Werte relativ zu der Höhe, beziehungsweise der Breite des Bildes. Negative Werte sind nicht erlaubt und größere Werte als die Bildgröße werden zu 100% konvertiert.
+
fill
+
ist ein Schlüsselwort, das die mittlere Region des Bildes über dem Hintergrundbild abbildet. Seine Größe wird dabei jeweils an die der oberen und linken Bildregionen angepasst.
+
inherit
+
ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements übernommen (vererbt) werden.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-image-slice', 'border-image-slice')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-slice")}} diff --git a/files/de/web/css/border-image-source/index.html b/files/de/web/css/border-image-source/index.html new file mode 100644 index 0000000000..1ec0a50134 --- /dev/null +++ b/files/de/web/css/border-image-source/index.html @@ -0,0 +1,67 @@ +--- +title: border-image-source +slug: Web/CSS/border-image-source +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Referenz +translation_of: Web/CSS/border-image-source +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border-image-source CSS Eigenschaft definiert den {{cssxref("<image>")}} Wert, der anstatt dem Stil des Randes verwendet wird. Falls diese Eigenschaft auf none gesetzt wird, wird der Stil verwendet, der durch {{cssxref("border-style")}} definiert wird.

+ +
Hinweis: Obwohl jeder {{cssxref("<image>")}} Wert innerhalb dieser CSS Eigenschaft verwendet werden kann, ist die Browserunterstützung bisher noch begrenzt und einige Browser unterstützen nur Bilder, die über die url() Funktion angegeben werden.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Kein Randbild, stattdessen wird der angegebene border-style verwendet */
+border-image-source: none;
+
+/* image.jpg wird als Bild verwendet */
+border-image-source: url(image.jpg);
+
+/* Farbverlauf wird als Bild verwendet */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Globale Werte */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Siehe {{cssxref("border-image")}} für Beispiele, welchen Einfluss die verschiedenen Werte haben.

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Backgrounds', '#border-image-source', 'border-image-source')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-source")}} diff --git a/files/de/web/css/border-image-width/index.html b/files/de/web/css/border-image-width/index.html new file mode 100644 index 0000000000..e367bc1406 --- /dev/null +++ b/files/de/web/css/border-image-width/index.html @@ -0,0 +1,119 @@ +--- +title: border-image-width +slug: Web/CSS/border-image-width +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz +translation_of: Web/CSS/border-image-width +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS Eigenschaft border-image-width definiert die Breite des Randbilds. Wenn sie definiert wird, wird die Eigenschaft {{cssxref("border-width")}} durch ihren Wert überschrieben.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* border-image-width: all */
+border-image-width: 3;
+
+/* border-image-width: vertical horizontal */
+border-image-width: 2em 3em;
+
+/* border-image-width: top horizontal bottom */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: top right bottom left */
+border-image-width: 5% 2em 10% auto;
+
+/* Globale Werte */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+
+ +

wobei:

+ +
+
width
+
Ist ein Wert, der die Breite des Bildes angibt, das als Rand für alle vier Ränder verwendet wird. Er wird ausschließlich in der Einwert-Syntax verwendet.
+
vertical
+
Ist ein Wert, der die Breite des Bildes angibt, das für alle vertikalen Ränder, d. h. den oberen und unteren Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.
+
horizontal
+
Ist ein Wert, der die Breite des Bildes angibt, das für alle horizontalen Ränder, d. h. den rechten und linken Rand, verwendet wird. Er wird ausschließlich in der Zweiwert-Syntax verwendet.
+
top
+
Ist ein Wert, der die Breite des Bildes angibt, das für den oberen Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
bottom
+
Ist ein Wert, der die Breite des Bildes angibt, das für den unteren Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
right
+
Ist ein Wert, der die Breite des Bildes angibt, das für den rechten Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
left
+
Ist ein Wert, der die Breite des Bildes angibt, das für den linken Rand verwendet wird. Er wird ausschließlich für die Dreiwert- und Vierwert-Syntax verwendet.
+
inherit
+
Ist ein Schlüsselwort, welches bewirkt, dass alle vier Werte von den berechneten Werten des Elternelements geerbt werden.
+
+ +

Werte

+ +
+
<length>
+
Repräsentiert die Länge des Teilbilds. Sie kann eine absolute oder relative Länge sein. Dieser Wert darf nicht negativ sein.
+
<percentage>
+
Repräsentiert den Prozentwert des Teilbilds relativ zur Höhe oder Breite des Randbildbereichs. Dieser Wert darf nicht negativ sein.
+
<number>
+
Repräsentiert ein Vielfaches des berechneten Wertes der {{cssxref("border-width")}} Eigenschaft des Elements dar, die als Teilbildgröße verwendet wird. Dieser Wert darf nicht negativ sein.
+
auto
+
Gibt an, dass die Breite oder Höhe des Bildes die tatsächliche Größe dieser Dimension sein muss.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

HTML-Inhalt

+ +
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
+
+ +

CSS-Inhalt

+ +
p{
+   border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+   border-image-slice:30;
+   border-image-width:20px;
+   border-image-repeat: round;
+   padding:40px
+}
+ +

{{ EmbedLiveSample('Beispiele', '480', '320') }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Spezifikation
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image-width")}} diff --git a/files/de/web/css/border-image/index.html b/files/de/web/css/border-image/index.html new file mode 100644 index 0000000000..d489fa343d --- /dev/null +++ b/files/de/web/css/border-image/index.html @@ -0,0 +1,101 @@ +--- +title: border-image +slug: Web/CSS/border-image +tags: + - CSS + - CSS Eigenschaft + - CSS Ränder + - Grafik + - Layout + - Referenz + - Web +translation_of: Web/CSS/border-image +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border-image CSS Eigenschaft ermöglicht das Zeichnen eines Bildes an den Rändern eines Elements. Dies vereinfacht das Zeichnen von komplex wirkenden Widgets deutlich und macht den Gebrauch von neun Kästen um das Element für einige Fälle überflüssig.
+
+ border-image wird anstatt der Randstile benutzt, die durch die {{cssxref("border-style")}} Eigenschaft definiert werden. Es ist wichtig anzumerken, dass, wenn der berechnete Wert von {{cssxref("border-image-source")}}, welcher entweder durch border-image-source oder die Kurzschreibweise border-image gesetzt werden kann, none ist, oder falls das Bild nicht angezeigt werden kann, die Randstile verwendet werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
{{csssyntax}}
+ +

Werte

+ +

Siehe die entsprechenden Eigenschaften der verschiedenen Werte.

+ +

Beispiele

+ +

Bild wiederholt (repeat)

+ +

Das Bild wird aufgeteilt und einfach gekachelt, um den Randbereich zu füllen.

+ +
.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 repeat; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 repeat; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 repeat; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 repeat;
+}
+
+ +

Ergibt:
+ Beispiel für border-image: repeat

+ +

Bild wiederholt (round)

+ +

Die Option round ist eine Variante der repeat Option, die die Kacheln so verteilt, dass die Enden sauber verbunden sind.

+ +
.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 round; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 round; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 round; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 round;
+}
+ +

Ergibt:
+ Beispiel für border-image: round

+ +

Bild gestreckt

+ +

Die stretch Option streckt die Bilder, um den Randbereich zu füllen.

+ +
.beispiel {
+  border: 30px solid transparent;
+  -moz-border-image:url("/files/4127/border.png") 30 30 stretch; /* Old firefox */
+  -webkit-border-image:url("/files/4127/border.png") 30 30 stretch; /* Safari */
+  -o-border-image:url("/files/4127/border.png") 30 30 stretch; /* Opera */
+  border-image:url("/files/4127/border.png") 30 30 stretch;
+}
+ +

Ergibt:
+ Beispiel für border-image: stretch

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-image', 'border-image')}}{{Spec2('CSS3 Backgrounds')}} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-image")}} diff --git a/files/de/web/css/border-left-color/index.html b/files/de/web/css/border-left-color/index.html new file mode 100644 index 0000000000..270f7b1cd6 --- /dev/null +++ b/files/de/web/css/border-left-color/index.html @@ -0,0 +1,36 @@ +--- +title: border-left-color +slug: Web/CSS/border-left-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-color +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-left-color Eigenschaft legt die Farbe des linken Rahmens fest. Da der Standardwert für die Rahmenart none ist, muss eine Angabe der border-left-style Eigenschaft erfolgen, damit ein linker Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform border-left gleich die Farbe und die Art des linken Rahmens festzulegen.

+
  • Standardwert: Wert der color Eigenschaft
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-left-color:  <Farbe> | transparent | inherit
+
+

Werte

+
<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
pre {
+  border-left-style: solid;
+  border-left-color: red;
+
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left-color", "fr": "fr/CSS/border-left-color", "ja": "ja/CSS/border-left-color", "pl": "pl/CSS/border-left-color" } ) }}

diff --git a/files/de/web/css/border-left-style/index.html b/files/de/web/css/border-left-style/index.html new file mode 100644 index 0000000000..30b17926a9 --- /dev/null +++ b/files/de/web/css/border-left-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-left-style +slug: Web/CSS/border-left-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-style +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-left-style Eigenschaft legt die Rahmenart des linken Rahmens fest.

+
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-left-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+
+

Werte

+
+
+ none
+
+ Standardwert. Es wird kein linker Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
+ hidden
+
+ Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
+ dotted
+
+ Punktierte Linie.
+
+ dashed
+
+ Gestrichelte Linie.
+
+ solid
+
+ Durchgehende Linie.
+
+ double
+
+ Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-left-width Angabe groß.
+
+ groove
+
+ Der Rahmen wirkt eingekerbt (3D-Effekt).
+
+ ridge
+
+ Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
+ inset
+
+ Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
+ outset
+
+ Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-left-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-left-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-left-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left-style", "fr": "fr/CSS/border-left-style", "ja": "ja/CSS/border-left-style", "pl": "pl/CSS/border-left-style" } ) }}

diff --git a/files/de/web/css/border-left-width/index.html b/files/de/web/css/border-left-width/index.html new file mode 100644 index 0000000000..05734d57da --- /dev/null +++ b/files/de/web/css/border-left-width/index.html @@ -0,0 +1,38 @@ +--- +title: border-left-width +slug: Web/CSS/Border-left-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-left-width Eigenschaft legt die Breite des linken Rahmens fest.

+
  • Standardwert: medium
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-left-width: <Länge> | thin | medium | thick | inherit
+
+

Werte

+
<Länge>
Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
thin
Eine dünne Rahmenlinie (1px).
medium
Standardwert. Eine mitteldicke Rahmenlinie (3px).
thick
Eine dicke Rahmenlinie (5px).
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-left-width: 10px;
+}
+
+.beispielZwei {
+  border-left-width: thin;
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left-width", "fr": "fr/CSS/border-left-width", "ja": "ja/CSS/border-left-width", "pl": "pl/CSS/border-left-width" } ) }}

diff --git a/files/de/web/css/border-left/index.html b/files/de/web/css/border-left/index.html new file mode 100644 index 0000000000..f4fb458b27 --- /dev/null +++ b/files/de/web/css/border-left/index.html @@ -0,0 +1,48 @@ +--- +title: border-left +slug: Web/CSS/border-left +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-left +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-left Eigenschaft legt den linken Rahmen eines Elementes fest und ist eine Kurzform für
+border-left-color, border-left-style und border-left-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+
  • Standardwert: siehe einzelne Eigenschaften
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: siehe einzelne Eigenschaften
    • +
+

Syntax

+
border-left: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit
+
+

Werte

+
<Rahmenbreite>
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-left-width.
<Rahmenstil>
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-left-style.
<Rahmenfarbe>
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-left-color.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-left: 1px solid #000;
+}
+
+.beispielZwei {
+  border-left-style: dotted;
+  border-left: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-left-style: dotted;
+  border-left: none thick green;
+
+  /* border-left-style wird nach Angabe von border-left ignoriert.
+  Es wird kein linker Rahmen gezeichnet. */
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-left", "es": "es/CSS/border-left", "fr": "fr/CSS/border-left", "ja": "ja/CSS/border-left", "pl": "pl/CSS/border-left" } ) }}

diff --git a/files/de/web/css/border-radius/index.html b/files/de/web/css/border-radius/index.html new file mode 100644 index 0000000000..a4674ee265 --- /dev/null +++ b/files/de/web/css/border-radius/index.html @@ -0,0 +1,141 @@ +--- +title: border-radius +slug: Web/CSS/border-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-radius +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die Eigenschaft border-radius kann verwendet werden, um Rahmen mit abgerundeten Ecken zu versehen. Der Radius wird auch auf Hintergründe und Schatteneffekte angewendet, selbst wenn das Element über keinen Rahmen verfügt.

+ +

border-radius ist die Kurzform für die für Eigenschaften {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} und {{ Cssxref("border-bottom-left-radius") }}.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border-radius: {{csssyntax("border-radius")}}
+
+bzw.
+
+border-radius: [ <Länge> | <Prozentzahl> ]{1,4}
+               [ / [ <Länge> | <Prozentzahl> ]{1,4} ]?
+
+ +

Werte

+ +

Es werden bis zu vier Angaben akzeptiert und nach einem Slash ("/") können vier weitere Angaben folgen.

+ +
+
<Länge>
+
Siehe {{cssxref("<length>")}} für mögliche Einheiten.
+
<Prozentzahl>
+
Ab Gecko 2.0 (Firefox 4.0):
+ Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.
+ In vorherigen Gecko- & Firefox-Versionen:
+ {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist auch dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.
+
Ein Wert
+
Gilt für alle vier Ecken.
+
Zwei Werte
+
Der erste Wert bestimmt die Ecken oben links und unten rechts, der zweite Wert legt die Ecken oben rechts und unten links fest.
+
Drei Werte
+
Der erste Wert bestimmt die Ecke oben links, der zweite Wert legt die Ecke für oben rechts und unten links zusammen fest und der dritte Wert bestimmt die Ecke unten rechts.
+
Vier Werte
+
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben links, oben rechts, unten rechts, unten links.
+
Slash ("/") Schreibweise
+
Wenn weitere Werte nach einem Slash ("/") folgen, werden die Werte vor dem Slash verwendet, um den horizontalen Radius festzulegen, während die Werte nach dem Slash für vertikalen Radius benutzt werden. Wird der Slash weggelassen, werden die festgelegten Werte für horizontale und vertikale Radien verwendet.
+
+ +

Beispiel zur Slash-Notation:

+ +
-moz-border-radius: 1em/5em;
+     border-radius: 1em/5em;
+
+/* ist gleichbedeutend zu: */
+
+-moz-border-radius-topleft:      1em 5em;
+-moz-border-radius-topright:     1em 5em;
+-moz-border-radius-bottomright:  1em 5em;
+-moz-border-radius-bottomleft:   1em 5em;
+     border-top-left-radius:     1em 5em;
+     border-top-right-radius:    1em 5em;
+     border-bottom-right-radius: 1em 5em;
+     border-bottom-left-radius:  1em 5em;
+
+ +
-moz-border-radius: 4px 3px 6px / 2px 4px;
+     border-radius: 4px 3px 6px / 2px 4px;
+
+/* ist gleichbedeutend zu: */
+
+-moz-border-radius-topleft:      4px 2px;
+-moz-border-radius-topright:     3px 4px;
+-moz-border-radius-bottomright:  6px 2px;
+-moz-border-radius-bottomleft:   3px 4px;
+     border-top-left-radius:     4px 2px;
+     border-top-right-radius:    3px 4px;
+     border-bottom-right-radius: 6px 2px;
+     border-bottom-left-radius:  3px 4px;
+
+ +
Hinweis: Elliptische Rahmen (Slash mit erweitertem border-radius Syntax) werden von Versionen vor Gecko 1.9.1 (Firefox 3.5) nicht unterstützt.
+ +

Beispiele

+ +
border: solid 10px;
+
+  /* Der Rahmen ergibt ein 'D' */
+  -moz-border-radius: 0 50px 50px 0;
+       border-radius: 0 50px 50px 0;
+
+ +
    border: groove 1em red;
+
+           -moz-border-radius: 2em;
+        -webkit-border-radius: 2em;
+                border-radius: 2em;
+
+ +
     {{ fx_minversion_inline(3.5) }}
+           background: gold;
+           border: ridge gold;
+
+             -moz-border-radius: 13em/3em;
+          -webkit-border-radius: 13em 3em;
+                  border-radius: 13em/3em;
+
+ +
    background: gold;
+
+       -moz-border-radius: 40px 10px;
+            border-radius: 40px 10px;
+
+ +
background: black;
+color: gray;
+border-radius: 50%;
+
+ +

 

+ +

Hinweise

+ +
    +
  • Gepunktete und gestrichelte Rahmenecken werden als durchgehende Linie gerendert. Siehe {{ bug("382721") }}.
    • +
  • border-radius wird nicht auf Tabellen angewendet, wenn border-collapse auf collapse gesetzt ist.
    • +
  • Safari/WebKit behandelt mehrere mehrere Werte anders (siehe unten).
    • +
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border-radius")}} + +

Spezifikation

+ + diff --git a/files/de/web/css/border-right-color/index.html b/files/de/web/css/border-right-color/index.html new file mode 100644 index 0000000000..b70d0ade28 --- /dev/null +++ b/files/de/web/css/border-right-color/index.html @@ -0,0 +1,36 @@ +--- +title: border-right-color +slug: Web/CSS/border-right-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-color +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-right-color Eigenschaft legt die Farbe des rechten Rahmens fest. Da der Standardwert für die Rahmenart none ist, muss eine Angabe der border-right-style Eigenschaft erfolgen, damit ein rechter Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform border-right gleich die Farbe und die Art des rechten Rahmens festzulegen.

+
  • Standardwert: Wert der color Eigenschaft
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-right-color:  <Farbe> | transparent | inherit
+
+

Werte

+
<Farbe>
Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
transparent
Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
pre {
+  border-right-style: solid;
+  border-right-color: red;
+
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right-color", "fr": "fr/CSS/border-right-color", "ja": "ja/CSS/border-right-color", "pl": "pl/CSS/border-right-color" } ) }}

diff --git a/files/de/web/css/border-right-style/index.html b/files/de/web/css/border-right-style/index.html new file mode 100644 index 0000000000..eee81bd976 --- /dev/null +++ b/files/de/web/css/border-right-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-right-style +slug: Web/CSS/border-right-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-style +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-right-style Eigenschaft legt die Rahmenart des rechten Rahmens fest.

+
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-right-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+
+

Werte

+
+
+ none
+
+ Standardwert. Es wird kein rechter Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
+ hidden
+
+ Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
+ dotted
+
+ Punktierte Linie.
+
+ dashed
+
+ Gestrichelte Linie.
+
+ solid
+
+ Durchgehende Linie.
+
+ double
+
+ Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-right-width Angabe groß.
+
+ groove
+
+ Der Rahmen wirkt eingekerbt (3D-Effekt).
+
+ ridge
+
+ Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
+ inset
+
+ Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
+ outset
+
+ Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-right-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-right-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-right-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right-style", "fr": "fr/CSS/border-right-style", "ja": "ja/CSS/border-right-style", "pl": "pl/CSS/border-right-style" } ) }}

diff --git a/files/de/web/css/border-right-width/index.html b/files/de/web/css/border-right-width/index.html new file mode 100644 index 0000000000..c3aa02724f --- /dev/null +++ b/files/de/web/css/border-right-width/index.html @@ -0,0 +1,90 @@ +--- +title: border-right-width +slug: Web/CSS/Border-right-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-right-width Eigenschaft legt die Breite des rechten Rahmens fest.

+
    +
  • Standardwert: medium
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Werte: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-right-width: <Länge> | thin | medium | thick | inherit
+
+

Werte

+
+
+ <Länge>
+
+ Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
+ thin
+
+ Eine dünne Rahmenlinie (1px).
+
+ medium
+
+ Standardwert. Eine mitteldicke Rahmenlinie (3px).
+
+ thick
+
+ Eine dicke Rahmenlinie (5px).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-right-width: 10px;
+}
+
+.beispielZwei {
+  border-right-width: thin;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right-width", "fr": "fr/CSS/border-right-width", "ja": "ja/CSS/border-right-width", "pl": "pl/CSS/border-right-width" } ) }}

diff --git a/files/de/web/css/border-right/index.html b/files/de/web/css/border-right/index.html new file mode 100644 index 0000000000..664b3ded4d --- /dev/null +++ b/files/de/web/css/border-right/index.html @@ -0,0 +1,48 @@ +--- +title: border-right +slug: Web/CSS/border-right +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-right +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-right Eigenschaft legt den rechten Rahmen eines Elementes fest und ist eine Kurzform für
+border-right-color, border-right-style und border-right-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+
  • Standardwert: siehe einzelne Eigenschaften
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: siehe einzelne Eigenschaften
    • +
+

Syntax

+
border-right: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit
+
+

Werte

+
<Rahmenbreite>
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-right-width.
<Rahmenstil>
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-right-style.
<Rahmenfarbe>
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-right-color.
inherit
Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-right: 1px solid #000;
+}
+
+.beispielZwei {
+  border-right-style: dotted;
+  border-right: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-right-style: dotted;
+  border-right: none thick green;
+
+  /* border-right-style wird nach Angabe von border-right ignoriert.
+  Es wird kein rechter Rahmen gezeichnet. */
+}
+
+

Browser Kompatibilität

+ +
Browser ab Version
Internet Explorer 4.0
Firefox (Gecko) 1.0 (1.0)
Opera 3.5
Safari (WebKit) 1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-right", "fr": "fr/CSS/border-right", "ja": "ja/CSS/border-right", "pl": "pl/CSS/border-right" } ) }}

diff --git a/files/de/web/css/border-spacing/index.html b/files/de/web/css/border-spacing/index.html new file mode 100644 index 0000000000..e20300171a --- /dev/null +++ b/files/de/web/css/border-spacing/index.html @@ -0,0 +1,143 @@ +--- +title: border-spacing +slug: Web/CSS/border-spacing +tags: + - CSS + - CSS Eigenschaft + - CSS Referenz + - CSS Tabellen + - Referenz +translation_of: Web/CSS/border-spacing +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft border-spacing legt die Abstände zwischen Tabellenzellen fest.
+ Die Eigenschaft hat nur dann Auswirkungen, wenn border-collapse: separate definiert ist.

+ +
{{EmbedInteractiveExample("pages/css/border-spacing.html")}}
+ + + +

Der Wert für border-spacing wird auch entlang der Außenkante der Tabelle verwendet, wobei der Abstand zwischen dem Rand der Tabelle und den Zellen in der ersten/letzten Spalte oder Zeile die Summe des relevanten Randabstands (horizontalen oder vertikalen) border-spacing und des relevanten (oben, rechts, unten oder links) {{cssxref("padding")}} in der Tabelle ist.

+ +

value is also used along the outside edge of the table, where the distance between the table's border and the cells in the first/last column or row is the sum of the relevant (horizontal or vertical) border-spacing and the relevant (top, right, bottom, or left) {{cssxref("padding")}} on the table.

+ +
+

Hinweis: Die border-spacing Eigenschaft entspricht demveraltetem <table> Attribut  cellspacing, mit der Ausnahme, dass es einen optionalen zweiten Wert hat, mit dem unterschiedliche horizontale und vertikale Abstände eingestellt werden können.

+
+ +

Syntax

+ +
/* <length> */
+border-spacing: 2px;
+
+/* horizontal <length> | vertical <length> */
+border-spacing: 1cm 2em;
+
+/* Global values */
+border-spacing: inherit;
+border-spacing: initial;
+
+ +

Die Eigenschaft border-spacing kann entweder als ein oder zwei Werte angegeben werden.

+ +
    +
  • Wenn ein <length> Wert angegeben wird, definiert er sowohl die horizontalen als auch die vertikalen Abstände zwischen den Zellen.
    • +
  • Wenn zwei <length> Werte angegeben werden, definiert der erste Wert den horizontalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Spalten) und der zweite Wert den vertikalen Abstand zwischen Zellen (d.h. den Abstand zwischen Zellen in benachbarten Zeilen).
    • +
+ +

Werte

+ +
+
{{cssxref("<length>")}}
+
Die Größe des Abstands als fester Wert.
+
{{cssxref("<initial>")}}
+
Setzt den Standardwert für diese Eigenschaft
+
{{cssxref("<inherit>")}}
+
Diese Eigenschaft erbt den Wert von seinem Elternelement.
+
+ +

Formale Definition

+ +

{{CSSInfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Abstände und Padding von Tabellenzellen

+ +
+

In diesem Beispiel wird ein Abstand von .5em vertikal und 1em horizontal zwischen den Zellen einer Tabelle angewendet. Beachten Sie, wie die padding Werte der Tabelle entlang ihrer Außenkanten zu ihren Randabstandswerten border-spacing addiert werden.

+ +

HTML

+ +
<table>
+  <tr>
+    <td>1</td><td>2</td><td>3</td>
+  </tr>
+  <tr>
+    <td>4</td><td>5</td><td>6</td>
+  </tr>
+  <tr>
+    <td>7</td><td>8</td><td>9</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
table {
+  border-spacing: 1em .5em;
+  padding: 0 2em 1em 0;
+  border: 1px solid orange;
+}
+
+td {
+  width: 1.5em;
+  height: 1.5em;
+  background: #d2d2d2;
+  text-align: center;
+  vertical-align: middle;
+}
+
+ +

Ergebnis

+ +

{{ EmbedLiveSample('Spacing_and_padding_table_cells', 400, 200) }}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS2.1', 'tables.html#separated-borders', 'border-spacing') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.properties.border-spacing")}}

+
+ +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/border-spacing", "fr": "fr/CSS/border-spacing", "pl": "pl/CSS/border-spacing", "es": "es/CSS/border-spacing" } ) }}

diff --git a/files/de/web/css/border-style/index.html b/files/de/web/css/border-style/index.html new file mode 100644 index 0000000000..32aa331b10 --- /dev/null +++ b/files/de/web/css/border-style/index.html @@ -0,0 +1,219 @@ +--- +title: border-style +slug: Web/CSS/border-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-style +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die border-style CSS Eigenschaft ist eine Kurzschreibweise zum Setzen des Linienstils für alle vier Seiten des Elementrands.

+ +
Hinweis: Der Standardwert von border-style ist none. Das bedeutet, falls die {{cssxref("border-width")}} und die {{cssxref("border-color")}} geändert werden, wird der Rand nicht angezeigt, solange diese Eigenschaft nicht auf etwas anderes als none oder hidden gesetzt wird.
+ +

{{cssinfo}}

+ +

Syntax

+ +
/* Auf alle vier Seiten anwenden */
+border-style: dashed;
+
+/* horizontal | vertikal */
+border-style: dotted solid;
+
+/* open | horizontal | vertikal */
+border-style: hidden double dashed;
+
+/* open | rechts | unten | links */
+border-style: none solid dotted dashed;
+
+/* Global values */
+border-style: inherit;
+border-style: initial;
+border-style: unset;
+
+ +

Werte

+ +
+
<br-style>
+
Ist ein Schlüsselwort, das den Stil des unteren Rahmens beschreibt. Es kann die folgenden Werte annehmen: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
none +
+ 		Wie beim hidden Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} 0, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der none Wert die niedrigste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er angezeigt.
hidden +
+ 		Wie beim none Schlüsselwort wird kein Rahmen angezeigt. In diesem Fall sind die berechneten Werte von {{cssxref("border-width")}} 0, außer ein Hintergrundbild ist gesetzt, auch wenn die Eigenschaft anders gesetzt wurde. Im Fall von Zusammenfallen von Tabellenzellen und Rahmen hat der hidden Wert die höchste Priorität: Das bedeutet, dass falls irgendein anderer, gegensätzlicher Rahmen gesetzt ist, wird er nicht angezeigt.
dotted +
+ 		Zeigt eine Reihe von runden Punkten an. Die Abstände der Punkte werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch. Der Radius der Punkte ist die halbe {{cssxref("border-width")}}.
dashed +
+ 		Zeigt eine Reihe von kurzen Strichen mit quadratischen Enden oder Liniensegmenten an. Die exakte Größe und Länger der Segmente werden nicht durch die Spezifikation bestimmt und sind implementationsspezifisch.
solid +
+ 		Zeigt eine einfache, gerade, ausgefüllte Linie an.
double +
+ 		Zeigt zwei gerade Linien an, die zum Pixelwert hinzugefügt werden, der durch {{cssxref("border-width")}} definiert wird.
groove +
+ 		Zeigt einen Rahmen an, der zu einem eingeritzten Effekt führt. Er ist das Gegenteil von ridge.
ridge +
+ 		Zeigt einen Rahmen mit einem 3D-Effekt an, so als ob es aus der Seite herauskommt. Er ist das Gegenteil von groove.
inset +
+ 		Zeigt einen Rahmen an, der die Box so darstellt, als wäre sie eingelassen. Es ist das Gegenteil von outset. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie groove.
outset +
+ 		+

Zeigt einen Rahmen an, der die Box in 3D wie geprägt darstellt. Es ist das Gegenteil von inset. Auf eine Tabellenzelle mit {{cssxref("border-collapse")}} auf collapsed gesetzt angewendet, verhält sich dieser Wert wie ridge.

+
+
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Tabelle mit allen Eigenschaftswerten

+ +

Hier ist ein Beispiel aller Eigenschaftswerte.

+ +

HTML Inhalt

+ +
<table>
+  <tr>
+    <td class="b1">none</td>
+    <td class="b2">hidden</td>
+    <td class="b3">dotted</td>
+    <td class="b4">dashed</td>
+  </tr>
+  <tr>
+    <td class="b5">solid</td>
+    <td class="b6">double</td>
+    <td class="b7">groove</td>
+    <td class="b8">ridge</td>
+  </tr>
+  <tr>
+    <td class="b9">inset</td>
+    <td class="b10">outset</td>
+  </tr>
+</table>
+ +

CSS Inhalt

+ +
/* Definiert das Aussehen der Tabelle */
+table {
+  border-width: 3px;
+  background-color: #52E396;
+}
+
+tr, td {
+  padding: 2px;
+}
+
+/* border-style Beispielklassen */
+.b1 { border-style: none; }
+.b2 { border-style: hidden; }
+.b3 { border-style: dotted; }
+.b4 { border-style: dashed; }
+.b5 { border-style: solid; }
+.b6 { border-style: double; }
+.b7 { border-style: groove; }
+.b8 { border-style: ridge; }
+.b9 { border-style: inset; }
+.b10  { border-style: outset; }
+ +

Ausgabe

+ +

{{EmbedLiveSample('Tabelle_mit_allen_Eigenschaftswerten', 300, 200)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}}{{Spec2('CSS3 Backgrounds')}}Keine Änderung
{{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}}{{Spec2('CSS2.1')}}2-, 3- und 4-Wert-Syntaxen hinzugefügt
{{SpecName('CSS1', '#border-style', 'border-style')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-style")}}

+ +

Siehe auch

+ +
    +
  • Die Rahmen-bezogenen Kurzschreibweise CSS Eigenschaften: {{cssxref("border")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-radius")}}
    • +
diff --git a/files/de/web/css/border-top-color/index.html b/files/de/web/css/border-top-color/index.html new file mode 100644 index 0000000000..3bf2e95cb2 --- /dev/null +++ b/files/de/web/css/border-top-color/index.html @@ -0,0 +1,81 @@ +--- +title: border-top-color +slug: Web/CSS/border-top-color +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-color +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-top-color Eigenschaft legt die Farbe des oberen Rahmens fest. Da der Standardwert für die Rahmenart none ist, muss eine Angabe der border-top-style Eigenschaft erfolgen, damit ein oberer Rahmen sichtbar werden kann. Es ist daher sinnvoll mit der Kurzform border-top gleich die Farbe und die Art des oberen Rahmens festzulegen.

+
    +
  • Standardwert: Wert der color Eigenschaft
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: die berechnete Farbe
    • +
+

Syntax

+
border-top-color:  <Farbe> | transparent | inherit
+
+

Werte

+
+
+ <Farbe>
+
+ Farbangabe [ Hexadezimalwert, Farbname, Systemfarbe, rgb(), rgba(), hsl() oder hlsa() ]
+
+ transparent
+
+ Das Element hat keine Farbe. Es wird die Farbe des dahinter liegenden Elementes angezeigt.
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
pre {
+  border-top-style: solid;
+  border-top-color: red;
+
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top-color", "fr": "fr/CSS/border-top-color", "ja": "ja/CSS/border-top-color", "pl": "pl/CSS/border-top-color" } ) }}

diff --git a/files/de/web/css/border-top-left-radius/index.html b/files/de/web/css/border-top-left-radius/index.html new file mode 100644 index 0000000000..9c3408d8a5 --- /dev/null +++ b/files/de/web/css/border-top-left-radius/index.html @@ -0,0 +1,91 @@ +--- +title: border-top-left-radius +slug: Web/CSS/border-top-left-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-left-radius +--- +

{{ CSSRef }}

+ +

Übersicht

+ +

Die border-top-left-radius Eigenschaft die Abrundung der oberen, linken Ecke eines Elements fest.

+ +

Vor Gecko 2.0 (Firefox 4.0) war diese Eigenschaft als -moz-border-radius-topleft bekannt. Diese Eigenschaft wird weiterhin übergangsweise unterstützt.

+ +

Weitere Informationen sind unter border-radius verfügbar.

+ +

{{cssinfo("border-top-left-radius")}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-top-left-radius")}}
+-moz-border-radius-topleft: [ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]?
+     border-top-left-radius:[ <Länge> | <Prozentzahl> ] [ <Länge> | <Prozentzahl> ]?
+
+ +

Werte

+ +

Seit Gecko 1.9.1 (Firefox 3.5) wird ein zweiter, optionaler Wert unterstützt, welcher Längenwerte für elliptische Ecken akzeptiert. Es gibt zwei Werte, die die Form der Ecke beschreiben: Der erste Wert ist der horizontale, der zweite Wert der vertikale Radius. Wird nur ein Wert angegeben, gilt dieser für beide Richtungen (horizontal und vertikal).

+ +
+
<Länge>
+
Siehe Längen für mögliche Einheiten.
+
<Prozentzahl>
+
In Gecko 2.0 (Firefox 4.0):
+ Prozentuale Angaben für den horizontalen Radius beziehen sich auf die Breite der Box. Die Prozentzahl für den vertikalen Radius ist allerdings relativ zur Höhe der Box.
+ In vorherigen Gecko- & Firefox-Versionen:
+ {{ non-standard_inline() }} Eine prozentuale Angabe, die sich auf die Breite der Box bezieht. Die Prozentzahl ist selbst dann relativ zur Breite, wenn ein Radius für die Höhe festgelegt wird.
+
+ +

Beispiele

+ +
div { -moz-border-radius-topleft:  20px;  /* Firefox bis Version 3.6 */
+   -webkit-border-top-left-radius: 20px;  /* Safari, Chrome (vor WebKit Version 533) */
+           border-top-left-radius: 20px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
+}
+
+ +
/* Elliptische Ecke (unterstützt seit Firefox 3.5 [Gecko 1.9.1]) */
+
+div { -moz-border-radius-topleft:   20px;       /* Runde Ecke, Fallback für Firefox 1-3.0 */
+      -moz-border-radius-topleft:   20px 10px;  /* elliptischer Rahmen für Firefox 3.5-3.6 */
+    -webkit-border-top-left-radius: 20px 10px;  /* Safari, Chrome (vor WebKit Version 532.5) */
+            border-top-left-radius: 20px 10px;  /* Firefox 4; Browser mit CSS3 Unterstützung */
+}
+
+ + +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-top-left-radius', 'border-top-left-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-top-left-radius")}}

+ +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/border-top-left-radius", "fr": "fr/CSS/border-top-left-radius", "ja": "ja/CSS/border-top-left-radius", "pl": "pl/CSS/-moz-border-radius-topleft" } ) }}

diff --git a/files/de/web/css/border-top-right-radius/index.html b/files/de/web/css/border-top-right-radius/index.html new file mode 100644 index 0000000000..dd04ae2d87 --- /dev/null +++ b/files/de/web/css/border-top-right-radius/index.html @@ -0,0 +1,47 @@ +--- +title: border-top-right-radius +slug: Web/CSS/border-top-right-radius +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-right-radius +--- +

{{CSSRef}}

+ +

Übersicht

+ +

Die CSS Eingenschaft border-top-right-radius legt die Abrundung der oberen rechten Ecke eines Elements fest. Vor Gecko 2.0 (Firefox 4) war diese Eigenschaft unter dem Namen -moz-border-radius-topright bekannt.

+ +

Weitere Informationen sind unter border-top-left-radius verfügbar.

+ +

{{cssinfo("border-top-right-radius")}}

+ +

Syntax

+ +
Formal syntax: {{csssyntax("border-top-right-radius")}}
+ + +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#border-top-right-radius', 'border-top-right-radius')}}{{Spec2('CSS3 Backgrounds')}}Initial definition
+ +

{{cssinfo}}

+ +

Browser Kompatibilität

+ +

{{Compat("css.properties.border-top-right-radius")}}

diff --git a/files/de/web/css/border-top-style/index.html b/files/de/web/css/border-top-style/index.html new file mode 100644 index 0000000000..10fbe13a5b --- /dev/null +++ b/files/de/web/css/border-top-style/index.html @@ -0,0 +1,120 @@ +--- +title: border-top-style +slug: Web/CSS/border-top-style +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-style +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-top-style Eigenschaft legt die Rahmenart des oberen Rahmens fest.

+
    +
  • Standardwert: none
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: wie festgelegt
    • +
+

Syntax

+
border-top-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
+
+

Werte

+
+
+ none
+
+ Standardwert. Es wird kein oberer Rahmen gezeichnet und die Breite wird auf '0' zurückgesetzt.
+
+ hidden
+
+ Genau wie bei none wird kein Rahmen angezeigt. Das Verhalten unterscheidet sich jedoch beim "Collapsing Border Model" innerhalb von Tabellen.
+ Wenn border-collapse: collapse gesetzt wurde, wird auch an den angrenzenden Nachbarzellen kein Rahmen dargestellt.
+
+ dotted
+
+ Punktierte Linie.
+
+ dashed
+
+ Gestrichelte Linie.
+
+ solid
+
+ Durchgehende Linie.
+
+ double
+
+ Zwei durchgehende Linien mit Zwischenraum. Die zwei Linien und der Zwischenraum sind jeweils ein Drittel der border-top-width Angabe groß.
+
+ groove
+
+ Der Rahmen wirkt eingekerbt (3D-Effekt).
+
+ ridge
+
+ Der Rahmen wirkt wie eine Kante (3D-Effekt).
+
+ inset
+
+ Durch den Rahmen wirkt das ganze Element eingetieft (3D-Effekt).
+
+ outset
+
+ Durch den Rahmen wirkt das ganze Element herausgehoben (3D-Effekt).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-top-style: dashed;      /* gestrichelt */
+}
+
+.beispielZwei {
+  border-top-style: groove;      /* Einkerbung */
+}
+
+.beispielDrei {
+ border-top-style: hidden;       /* Collapsing Border Model */
+ border-collapse: collapse;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top-style", "fr": "fr/CSS/border-top-style", "ja": "ja/CSS/border-top-style", "pl": "pl/CSS/border-top-style" } ) }}

diff --git a/files/de/web/css/border-top-width/index.html b/files/de/web/css/border-top-width/index.html new file mode 100644 index 0000000000..b740149b3c --- /dev/null +++ b/files/de/web/css/border-top-width/index.html @@ -0,0 +1,90 @@ +--- +title: border-top-width +slug: Web/CSS/Border-top-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-top-width Eigenschaft legt die Breite des oberen Rahmens fest.

+
    +
  • Standardwert: medium
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-top-width: <Länge> | thin | medium | thick | inherit
+
+

Werte

+
+
+ <Länge>
+
+ Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
+ thin
+
+ Eine dünne Rahmenlinie (1px).
+
+ medium
+
+ Standardwert. Eine mitteldicke Rahmenlinie (3px).
+
+ thick
+
+ Eine dicke Rahmenlinie (5px).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-top-width: 10px;
+}
+
+.beispielZwei {
+  border-top-width: thin;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top-width", "fr": "fr/CSS/border-top-width", "ja": "ja/CSS/border-top-width", "pl": "pl/CSS/border-top-width" } ) }}

diff --git a/files/de/web/css/border-top/index.html b/files/de/web/css/border-top/index.html new file mode 100644 index 0000000000..4724a57ad7 --- /dev/null +++ b/files/de/web/css/border-top/index.html @@ -0,0 +1,98 @@ +--- +title: border-top +slug: Web/CSS/border-top +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-top +--- +

{{ CSSRef() }}

+

Übersicht:

+

Die border-top Eigenschaft legt den oberen Rahmen eines Elementes fest und ist eine Kurzform für
+ border-top-color, border-top-style und border-top-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.

+
    +
  • Standardwert: siehe einzelne Eigenschaften
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: siehe einzelne Eigenschaften
    • +
+

Syntax

+
border-top: [ <Rahmenbreite> || <Rahmenstil> || <Rahmenfarbe> ] | inherit
+
+

Werte

+
+
+ <Rahmenbreite>
+
+ Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-top-width.
+
+ <Rahmenstil>
+
+ Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-top-style.
+
+ <Rahmenfarbe>
+
+ Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-top-color.
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+

Beispiele

+
.beispielEins {
+  border-top: 1px solid #000;
+}
+
+.beispielZwei {
+  border-top-style: dotted;
+  border-top: thick green;
+
+  /* Bedeutet das gleiche wie: */
+
+  border-top-style: dotted;
+  border-top: none thick green;
+
+  /* border-top-style wird nach Angabe von border-top ignoriert.
+  Es wird kein oberer Rahmen gezeichnet. */
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-top", "fr": "fr/CSS/border-top", "ja": "ja/CSS/border-top", "pl": "pl/CSS/border-top" } ) }}

diff --git a/files/de/web/css/border-width/index.html b/files/de/web/css/border-width/index.html new file mode 100644 index 0000000000..fe0e129bfa --- /dev/null +++ b/files/de/web/css/border-width/index.html @@ -0,0 +1,118 @@ +--- +title: border-width +slug: Web/CSS/border-width +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/border-width +--- +

{{ CSSRef() }}

+

Übersicht

+

Die border-width Eigenschaft legt die Breite des oberen, rechten, unteren und linken Rahmens fest.

+
    +
  • Standardwert: medium
    • +
  • Anwendbar auf: Alle Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Nein
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute Länge; 0 wenn none oder hidden festgelegt wurde
    • +
+

Syntax

+
border-width:  [<Länge> | thin | medium | thick] {1,4} | inherit
+
+

Werte

+
+
+ <Länge>
+
+ Eine Längenangabe die, die Rahmenstärke explizit angibt. Es sind keine negativen Werte erlaubt.
+
+ thin
+
+ Eine dünne Rahmenlinie (1px; IE 4-7: 2px).
+
+ medium
+
+ Standardwert. Eine mitteldicke Rahmenlinie (3px; IE 4-7: 4px).
+
+ thick
+
+ Eine dicke Rahmenlinie (5px; IE 4-7: 6px).
+
+ inherit
+
+ Der Wert des Elternelements wird geerbt.
+
+ Ein Wert
+
+ Gilt für alle vier Seiten: border-top-width, border-right-width, border-bottom-width und border-left-width.
+
+ Zwei Werte
+
+ Der erste Wert gilt für border-top-width und border-bottom-width, der zweite Wert für border-right-width und border-left-width.
+
+ Drei Werte
+
+ Der erste Wert gilt für border-top-width, der zweite Wert für border-right-width und border-left-width und der dritte Wert für border-bottom-width.
+
+ Vier Werte
+
+ Der erste Wert gilt für border-top-width, der zweite Wert für border-right-width, der dritte Wert für border-bottom-width und der vierte Wert für border-left-width.
+
+

Beispiele

+
.beispielEins {
+  border: solid #ccc;
+  border-width: 3px;
+}
+
+
.beispielZwei {
+  border: solid #ccc;
+  border-width: thin thick;
+}
+
+
.beispielDrei {
+  border: solid #ccc;
+  border-width: thin thick 10px;
+}
+
+
.beispielVier {
+  border: solid #ccc;
+  border-width: thin thick 10px 2em;
+}
+
+

Browser Kompatibilität

+ + + + + + + + + + + + + + + + + + + + + + + +
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)
+

Spezifikation

+ +

Siehe auch

+ +

{{ languages( { "en": "en/CSS/border-width", "fr": "fr/CSS/border-width", "ja": "ja/CSS/border-width", "pl": "pl/CSS/border-width", "es": "es/CSS/border-width" } ) }}

diff --git a/files/de/web/css/border/index.html b/files/de/web/css/border/index.html new file mode 100644 index 0000000000..ffcf4c2631 --- /dev/null +++ b/files/de/web/css/border/index.html @@ -0,0 +1,99 @@ +--- +title: border +slug: Web/CSS/border +tags: + - CSS + - CSS Eigenschaft + - CSS Rahmen + - Layout + - NeedsMobileBrowserCompatibility + - Referenz + - Web +translation_of: Web/CSS/border +--- +
{{CSSRef("CSS Borders")}}
+ +

Übersicht

+ +

Die border Eigenschaft legt den kompletten Rahmen eines Elementes fest und ist eine Kurzform für
+ border-color, border-style und border-width. Die Werte der drei Eigenschaften können in beliebiger Reihenfolge angegeben werden.
+ Unterschiedliche Einstellungen für den oberen, unteren, linken und rechten Rahmen können nur unter den Kurzformen
+ border-bottom, border-top, border-left und border-right festgelegt werden.

+ +

{{cssinfo}}

+ +

Syntax

+ +
border: 1px;
+border: 2px dotted;
+border: medium dashed green;
+ +

Werte

+ +
+
<Rahmenbreite>
+
Optional. Wenn nichts festgelegt ist, wird medium verwendet. Siehe: border-width.
+
<Rahmenstil>
+
Erforderlich. Wenn nichts festgelegt ist, wird none verwendet. Siehe: border-style.
+
<Rahmenfarbe>
+
Optional. Wenn nichts festgelegt ist, wird der Wert der color Eigenschaft des Elements genommen. Siehe: border-color.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Live Beispiel

+ +
  border: dashed;           /* gestrichelter Rahmen mit mittlerer Breite und gleicher Farbe wie der Text */
+  border: dotted 1.5em;     /* gestrichelt, 1.5em breit, gleiche Farbe wie der Text */
+  border: solid red;        /* durchgezogener, roter Rahmen mit mittelgroßer Breite */
+  border: solid blue 10px;  /* durchgezogene Linie, blaue Farbe, 10px Breite */
+
+ +

Spezifikation

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusArgument
{{SpecName('CSS3 Backgrounds', '#the-border-shorthands', 'border')}}{{Spec2('CSS3 Backgrounds')}}Technically removes the support for transparent as it is now a valid {{cssxref("<color>")}}; this has no practical influence.
+ Though it cannot be set to another value using the shorthand, border does now reset {{cssxref("border-image")}} to its initial value (none).
{{SpecName('CSS2.1', 'box.html#border-shorthand-properties', 'border')}}{{Spec2('CSS2.1')}}Accepts the inherit keyword. Also accepts transparent as a valid color.
{{SpecName('CSS1', '#border', 'border')}}{{Spec2('CSS1')}} 
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.border")}} + +

Siehe auch

+ + diff --git a/files/de/web/css/bottom/index.html b/files/de/web/css/bottom/index.html new file mode 100644 index 0000000000..5f9ed69a02 --- /dev/null +++ b/files/de/web/css/bottom/index.html @@ -0,0 +1,74 @@ +--- +title: bottom +slug: Web/CSS/Bottom +tags: + - CSS + - CSS Referenz +translation_of: Web/CSS/bottom +--- +

{{ CSSRef() }}

+ +

Übersicht

+ +

Die bottom Eigenschaft macht eine Angabe zur Position von Elementen und wird daher zusammen mit der position Eigenschaft notiert, wenn für die Positionsart der Wert absolute, fixed oder relative definiert wurde.

+ +

Bei absolut positionierten Elementen (position: absolute oder position: fixed) wird der Abstand zwischen der unteren, äußeren Kante (margin edge) des Elements und der unteren Kante des umschließenden Blocks definiert.

+ +

Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die top Eigenschaft definiert wurde, überschreibt diese den Wert der bottom Eigenschaft. Wenn top den Wert auto besitzt, ist der berechnete Wert für bottom gleich dem Wert der top Eigenschaft mit umgedrehtem Vorzeichen.
+ Wenn beide Eigenschaften nicht den Wert auto besitzen, wird bottom ignoriert und auf auto gesetzt.

+ +
    +
  • Standardwert: auto
    • +
  • Anwendbar auf: positionierte Elemente
    • +
  • Vererbbar: Nein
    • +
  • Prozentwerte: Beziehen sich auf die Höhe des umschließenden Blocks
    • +
  • Medium: visuell
    • +
  • berechneter Wert: absolute Länge, Prozentwert oder auto
    • +
+ +

Syntax

+ +
bottom: <Länge> | <Prozentzahl> | auto | inherit
+
+ +

Werte

+ +
+
<Länge>
+
Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.
+
<Prozentzahl>
+
Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Höhe des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.
+
auto
+
Standardwert. Die vertikale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch top, margin, padding oder durch die Höhe.
+
inherit
+
Der Wert des Elternelements wird geerbt.
+
+ +

Beispiele

+ +
element {
+    position: absolute;
+    bottom: 20px;
+    height: 200px;
+    border: 1px solid #000;
+}
+
+ +

Browser Kompatibilität

+ +{{Compat("css.properties.bottom")}} + +

Spezifikation

+ + + +

Siehe auch

+ + + +

{{ languages( { "en": "en/CSS/bottom", "fr": "fr/CSS/bottom", "pl": "pl/CSS/bottom", "es": "es/CSS/bottom" } ) }}

diff --git a/files/de/web/css/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html new file mode 100644 index 0000000000..d1f0261fc2 --- /dev/null +++ b/files/de/web/css/box-decoration-break/index.html @@ -0,0 +1,136 @@ +--- +title: box-decoration-break +slug: Web/CSS/box-decoration-break +tags: + - CSS + - CSS Fragmentation + - CSS Property + - Experimental + - Reference +translation_of: Web/CSS/box-decoration-break +--- +

{{CSSRef}}{{SeeCompatTable}}

+ +

Summary

+ +

The box-decoration-break CSS property specifies how the {{ Cssxref("background") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, {{ Cssxref("border-image") }}, {{ Cssxref("box-shadow") }}, {{ Cssxref("margin") }} and {{ Cssxref("clip") }} of an element is applied when the box for the element is fragmented.  Fragmentation occurs when an inline box wraps onto multiple lines, or when a block spans more than one column inside a column layout container, or spans a page break when printed.  Each piece of the rendering for the element is called a fragment.

+ +

{{cssinfo}}

+ +

Syntax

+ +
box-decoration-break: slice;
+box-decoration-break: clone;
+
+box-decoration-break: initial;
+box-decoration-break: inherit;
+box-decoration-break: unset;
+
+ +

Values

+ +
+
slice
+
The element is rendered as if its box were not fragmented, and then the rendering for this hypothetical box is sliced into pieces for each line/column/page. Note that the hypothetical box can be different for each fragment since it uses its own height if the break occurs in the inline direction, and its own width if the break occurs in the block direction. See the CSS specification for details.
+
clone
+
Each box fragment is rendered independently with the specified border, padding and margin wrapping each fragment. The {{ Cssxref("border-radius") }}, {{ Cssxref("border-image") }} and {{ Cssxref("box-shadow") }}, are applied to each fragment independently. The background is drawn independently in each fragment which means that a background image with {{ Cssxref("background-repeat") }}: no-repeat may be repeated multiple times.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Inline box fragments

+ +

An inline element that contains line-breaks styled with:

+ +
.example {
+  background: linear-gradient(to bottom right, yellow, green);
+  box-shadow:
+    8px 8px 10px 0px deeppink,
+    -5px -5px 5px 0px blue,
+    5px 5px 15px 0px yellow;
+  padding: 0em 1em;
+  border-radius: 16px;
+  border-style: solid;
+  margin-left: 10px;
+  font: 24px sans-serif;
+  line-height: 2;
+}
+
+...
+<span class="example">The<br>quick<br>orange fox</span>
+ +

Results in:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example.

+ +

Adding box-decoration-break:clone to the above styles:

+ +
  -webkit-box-decoration-break: clone;
+  -o-box-decoration-break: clone;
+  box-decoration-break: clone;
+
+ +

Results in:

+ +

A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example

+ +

You can try the two inline examples above in your browser.

+ +

Here's an example of an inline element using a large border-radius value. The second "iM" has a line-break between the "i" and the "M". For comparison, the first "iM" is without line-breaks. Note that if you stack the rendering of the two fragments horizontally next to each other it will result in the non-fragmented rendering.

+ +

A screenshot of the rendering of the second inline element example.

+ +

Try the above example in your browser.

+ +

Block box fragments

+ +

A block element with similar styles as above, first without any fragmentation:

+ +

A screenshot of the rendering of the block element used in the examples without any fragmentation.

+ +

Fragmenting the above block into three columns results in:

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice.

+ +

Note that stacking these pieces vertically will result in the non-fragmented rendering.

+ +

Now the same example styled with box-decoration-break:clone

+ +

A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone.

+ +

Note here that each fragment has an identical replicated border, box-shadow and background.

+ +

You can try the block examples above in your browser.

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}{{ Spec2('CSS3 Fragmentation') }}Initial definition
+ +

Browser compatibility

+ +{{Compat("css.properties.box-decoration-break")}} + +

See also

+ + diff --git a/files/de/web/css/box-shadow/index.html b/files/de/web/css/box-shadow/index.html new file mode 100644 index 0000000000..637e204327 --- /dev/null +++ b/files/de/web/css/box-shadow/index.html @@ -0,0 +1,107 @@ +--- +title: box-shadow +slug: Web/CSS/box-shadow +tags: + - CSS + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/box-shadow +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die CSS-Eigenschaft box-shadow beschreibt einen oder mehrere Schatteneffekte als eine kommaseparierte Liste. Sie erlaubt es, den Rahmen fast jedes Elements einen Schatten werfen zu lassen. Falls ein {{cssxref("border-radius")}} für das Element mit einem Schlagschatten angegeben ist, übernimmt der Schatten diese abgerundeten Ecken. Die z-Anordnung mehrerer Schlagschatten ist die gleiche wie bei mehreren Textschatten (der zuerst angegebene Schatten ist der oberste).

+ +

Box-shadow-Generator ist ein interaktives Werkzeug, das es erlaubt, einen Schlagschatten zu generieren.

+ +

{{cssinfo}}

+ +

Syntax

+ +
/* offset-x | offset-y | color */
+box-shadow: 60px -16px teal;
+
+/* offset-x | offset-y | blur-radius | color */
+box-shadow: 10px 5px 5px black;
+
+/* offset-x | offset-y | blur-radius | spread-radius | color */
+box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
+
+/* inset | offset-x | offset-y | color */
+box-shadow: inset 5em 1em gold;
+
+/* Beliebige Anzahl an Schatten, durch Kommas getrennt */
+box-shadow: 3px 3px red, -1em 0 0.4em olive;
+
+ +

Werte

+ +
+
inset
+
Falls nicht angegeben (Standardwert), wird angenommen, dass der Schatten ein Schlagschatten ist (als ob die Box über dem Inhalt schweben würde).
+ Die Angabe des Schlüsselworts inset ändert den Schatten so, dass er innerhalb des Rahmens angezeigt wird (als ob der Inhalt innerhalb der Box nach innen gedrückt wäre). Innere Schatten werden innerhalb des Randes (sogar transparenten) gezeichnet, über dem Hintergrund aber unterhalb des Inhalts.
+
<offset-x> <offset-y>
+
Diese zwei {{cssxref("<length>")}}-Werte setzen den Schattenabstand. <offset-x> beschreibt die horizontale Distanz. Negative Werte platzieren den Schatten links des Elements. <offset-y> beschreibt die vertikale Distanz. Negative Werte platzieren den Schatten oberhalb des Elements. Siehe {{cssxref("<length>")}} für mögliche Einheiten.
+ Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und können einen Unschärfeeffekt erzeugen, falls <blur-radius> und/oder <spread-radius> gesetzt sind).
+
<blur-radius>
+
Dies ist ein dritter {{cssxref("<length>")}}-Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, sodass der Schatten größer und schwächer wird. Negative Werte sind nicht erlaubt. Falls nicht angegeben, ist der Wert 0 (der Rand des Schattens wird scharf dargestellt).
+
<spread-radius>
+
Dies ist ein vierter {{cssxref("<length>")}}-Wert. Positive Werte erweitern den Schatten und machen ihn größer, negative Werte verkleinern den Schatten. Falls nicht angegeben, ist der Wert 0 (der Schatten hat die gleiche Größe wie das Element).
+
<color>
+
Siehe {{cssxref("<color>")}}-Werte für mögliche Schlüsselwörter und Notationen.
+ Falls nicht angegeben, hängt die Farbe vom Browser ab – sie ist normalerweise der Wert der {{cssxref("color")}}-Eigenschaft, aber Safari zeichnet in diesem Fall aktuell einen transparenten Schatten.
+
+ +

Interpolation

+ +

Jeder Schatten innerhalb der Liste (none wird als eine leere Liste interpretiert) wird über die Farbkomponente (als Farbe) interpoliert und x-, y-, Unschärfe- und (falls zutreffend) Ausbreitungskomponenten (als Länge). Für jeden Schatten gilt, falls beide angegebenen Schatten inset sind oder nicht, muss der interpolierte Schatten diesbezüglich mit den angegebenen Schatten übereinstimmen. Falls ein Schatten eines beliebigen Paares von angegebenen Schatten inset ist und der andere nicht, ist die gesamte Schattenliste nicht interpolierbar. Falls die Listen von Schatten verschiedene Längen haben, wird die kürzere Liste mit Schatten aufgefüllt, deren Farbe transparent ist, alle Längen 0 und dessen inset (oder nicht) mit dem der längeren Liste übereinstimmt.

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Live-Beispiele

+ + + +
box-shadow: 60px -16px teal;
+ +
box-shadow: 10px 5px 5px black;
+ +
box-shadow: 3px 3px red, -1em 0 0.4em olive;
+ +
box-shadow: inset 5em 1em gold;
+ +
box-shadow: 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold;
+ +
box-shadow: inset 0 0 1em gold, 0 0 1em red;
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#box-shadow', 'box-shadow')}}{{Spec2('CSS3 Backgrounds')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +{{Compat("css.properties.box-shadow")}} diff --git a/files/de/web/css/box-sizing/index.html b/files/de/web/css/box-sizing/index.html new file mode 100644 index 0000000000..7c07a9c554 --- /dev/null +++ b/files/de/web/css/box-sizing/index.html @@ -0,0 +1,137 @@ +--- +title: box-sizing +slug: Web/CSS/box-sizing +tags: + - CSS + - CSS Eigenschaft + - Experimentell + - Referenz +translation_of: Web/CSS/box-sizing +--- +
+

{{CSSRef}}

+ +

Die CSS Eigenschaft box-sizing legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.

+ +
{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+ + + +

Im CSS box model wird die Breite width und die Höhe height, die Sie einem Element zuweisen, standardmäßig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element über einen Rahmen border oder Innenabstände padding verfügt, wird diese zu der Breite width und Höhe height hinzugefügt, um die Größe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite width und Höhe height den Wert anpassen müssen, um einen eventuell hinzugefügten Rahmen oder Auffüllen zu berücksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite width: 25%; haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht auf eine Zeile innerhalb der Beschränkungen des Elterncontainers.

+ +

Die box-sizing Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:

+ +
    +
  • content-box gibt Ihnen das standardmäßige CSS-Box-Größenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder Auffüllungen wird zur endgültigen gerenderten Breite hinzugefügt, wodurch das Element breiter als 100px wird.
    • +
  • border-box +

    weist den Browser an, bei den Werten, die Sie für die Breite und Höhe eines Elements angeben, alle Ränder und Auffüllungen zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefügten Ränder oder Füllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite zu absorbieren. Dadurch wird die Größenanpassung von Elementen normalerweise viel einfacher.

    +
    • +
+ +
+

Hinweis: Es ist oft nützlich, bei Layoutelementen die box-sizing auf border-box zu setzen. Dies erleichtert den Umgang mit der Größe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können.  Bei der Verwendung von position: relative oder position: absolute und der Nutzung von box-sizing: content-box können die Positionswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Füllungsgrößen eingestellt werden, was manchmal wünschenswert ist.

+
+
+ +

Syntax

+ +

Das box-sizing Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewählt wird.

+ +
/* Schlüsselwortwerte */
+box-sizing: content-box;
+box-sizing: border-box;
+
+/* Globale Werte */
+box-sizing: inherit;
+box-sizing: initial;
+box-sizing: unset;
+
+ +

Werte

+ +
+
content-box
+
Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin oder padding.
+
border-box
+
Die Werte {{Cssxref("width")}} und {{Cssxref("height")}} enthalten padding und border, aber nicht margin. Das ist das Boxmodell, das der Internet Explorer im Quirks mode verwendet.
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Box sizes mit content-box und border-box

+ +

Dieses Beispiel zeigt, wie unterschiedliche box-sizing Werte die gerenderte Größe von zwei ansonsten identischen Elementen verändern.

+ +

HTML

+ +
<div class="content-box">Content box</div>
+<br>
+<div class="border-box">Border box</div>
+ +

CSS

+ +
div {
+  width: 160px;
+  height: 80px;
+  padding: 20px;
+  border: 8px solid red;
+  background: yellow;
+}
+
+.content-box {
+  box-sizing: content-box;
+  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+     Content box width: 160px
+     Content box height: 80px */
+}
+
+.border-box {
+  box-sizing: border-box;
+  /* Total width: 160px
+     Total height: 80px
+     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Box_sizes_with_content-box_and_border-box', 'auto', 300)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#box-sizing', 'box-sizing')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Definition
+ +

Browser Kompabilität

+ +

{{Compat("css.properties.box-sizing")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/break-after/index.html b/files/de/web/css/break-after/index.html new file mode 100644 index 0000000000..6bbcdb52d2 --- /dev/null +++ b/files/de/web/css/break-after/index.html @@ -0,0 +1,114 @@ +--- +title: break-after +slug: Web/CSS/break-after +tags: + - CSS + - CSS Eigenschaft + - CSS Fragmentierung + - NeedsExample + - Referenz +translation_of: Web/CSS/break-after +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Die break-after CSS Eigenschaft gibt an, wie die Seite, die Spalte oder der Abschnitt nach der generierten Box umbricht. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.

+ +

Jeder mögliche Brechpunkt, das sind alle Begrenzungen des Elements, ist unter dem Einfluss von drei Eigenschaften: dem break-after Wert des vorhergehenden Elements, dem {{cssxref("break-before")}} des nächsten Elements und dem {{cssxref("break-inside")}} Wert von dem beinhaltenden Elements.

+ +

Um zu ermitteln ob ein Umbruch erfolgen muss, werden folgende Regeln angwendet:

+ +
    +
  1. Wenn einer der drei Betroffenen Werte ein forced break value ist (das sind always, left, right, page, column oder region), hat er Vorrang. Wenn mehrere der betroffenen Werte solch ein Umbruch sind, wird der Wert des Elements, welches als letztes im Flow auftritt, verwendet (der {{cssxref("break-before")}} hat Vorrang gegenüber dem break-after Wert, welches wiederum Vorrang gegebüber dem {{cssxref("break-inside")}} Wert hat).
    2. +
  2. Wenn einer der drei betroffenen Werte ein avoid break value ist (das sind avoid, avoid-page, avoid-region oder avoid-column), wird kein Umbruch gemacht.
    3. +
+ +

Wenn einmal ein gezwungener Umbruch gemacht worden ist, werden bei Bedarf weiche Umbrüche hinzugefügt. Aber nicht auf Elementbegrenzungen, welche zu einem entsprechenden avoid Wert führen.

+ +

{{cssinfo}}

+ +

Syntax

+ +
break-after: auto;
+break-after: always;
+break-after: left;
+break-after: right;
+break-after: recto;
+break-after: verso;
+break-after: page;
+break-after: column;
+break-after: region;
+break-after: avoid;
+break-after: avoid-page;
+break-after: avoid-column;
+break-after: avoid-region;
+
+ +

Werte

+ +
+
auto
+
Initialwert. Erlaubt (bedeutet kein Verbot oder Zwang) das Einfügen jeden Umbruchs (entweder Seite, Spalte oder Abschnitt) nach der hauptsächlichen Box.
+
always
+
Erzwingt immer Umbrüche nach der hauptsächlichen Box. Das ist ein Synonym für page, welches beibehalten wurde, um Übergänge von {{cssxref("page-break-after")}} zu ermöglichen, welche eine Teilmenge dieser Eigenschaft sind.
+
avoid
+
Verhindert das Einfügen jeglicher Umbrüche für page, column oder region nach der hauptsächlichen Box.
+
left
+
Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als linke Seite formatiert wird.
+
right
+
Erzwingt immer einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als rechte Seite formatiert wird.
+
page
+
Erzwingt immer einen Seitenumbruch direkt nach der hauptsächlichen Box.
+
column
+
Erzwingt immer einen Spaltenumbruch direkt nach der hauptsächlichen Box.
+
region {{experimental_inline}}
+
Erzwing immer einen Abschnittsumbruch direkt nach der hauptsächlichen Box.
+
recto {{experimental_inline}}
+
Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine recto Seite (eine rechte Seite in einer links-nach-rechts Ausdehnung oder eine linke Seite in einer rechts-nach-links Ausdehnung) formatiert wird.
+
verso {{experimental_inline}}
+
Erzwingt einen oder zwei Seitenumbrüche direkt nach der hauptsächlichen Box, damit die nächste Seite als eine verso Seite (eine linke Seite in einer links-nach-rechts Ausdehnung oder eine rechte Seite in einer rechts-nach-links Ausdehnung) formatiert wird.
+
avoid-page
+
Verhindert jeden Seitenumbruch direkt nach der hauptsächlichen Box.
+
avoid-column
+
Verhindert jeden Spaltenumbruch direkt nach der hauptsächlichen Box.
+
avoid-region {{experimental_inline}}
+
Verhindert jeden Anschnittsumbruch direkt nach der hauptsächlichen Box.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('CSS3 Fragmentation', '#break-after', 'break-after')}}{{Spec2('CSS3 Fragmentation')}}Fügt die Schlüsselwörter recto und verso hinzu. Ändert dne Medientyp dieser Eigenschaft von paged zu {{xref_cssvisual}}. Präzisiert den Algorithmus für verschiedene Arten von Umbrüchen.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-after')}}{{Spec2('CSS3 Regions')}}Erweitert die Eigenschaft, um Abschnittsumbrüche handhaben zu können. Für die Schlüsselwörter avoid-region und region hinzu.
{{SpecName('CSS3 Multicol', '#break-after', 'break-after')}}{{Spec2('CSS3 Multicol')}}Initiale Spezifikation. Erweitert die CSS 2.1 {{cssxref("page-break-after")}} Eigenschaft, um Seiten- und Spaltenumbrüche handhaben zu können.
+ +

Webbrowserkompatibilität

+ +{{Compat("css.properties.break-after")}} diff --git a/files/de/web/css/break-inside/index.html b/files/de/web/css/break-inside/index.html new file mode 100644 index 0000000000..8090a69267 --- /dev/null +++ b/files/de/web/css/break-inside/index.html @@ -0,0 +1,127 @@ +--- +title: break-inside +slug: Web/CSS/break-inside +translation_of: Web/CSS/break-inside +--- +
{{CSSRef}}
+ +

Die CSS-Eigenschaft break-inside gibt an, wie Seiten, Spalten oder Abschnitte innerhalb einer generierten Box umbrechen. Wenn es keine generierte Box gibt, wird die Eigenschaft ignoriert.

+ +
/* Spezifische Werte */
+break-inside: auto;
+break-inside: avoid;
+break-inside: avoid-page;
+break-inside: avoid-column;
+break-inside: avoid-region;
+
+/* Globale Werte */
+break-inside: inherit;
+break-inside: initial;
+break-inside: unset;
+
+ +

Alle Begrenzungen eines Elements sind ein möglicher Brechpunkt. Dieser wird von drei Eigenschaften beeinflusst:

+ +
    +
  • Dem Wert für {{cssxref("break-after")}} des vorherigen Elements.
    • +
  • Dem Wert für {{cssxref("break-before")}} des nachfolgenden Elements.
    • +
  • Dem Wert für break-inside des Elternelements.
    • +
+ +

Um zu ermitteln, ob ein Umbruch erfolgen muss, werden folgende Regeln angewendet:

+ +
    +
  1. Besitzt eine der drei Eigenschaften einen forced break value (always, left, right, page, column, oder region), so hat sie Vorrang. Wenn mehrere Eigenschaften einen forced break value besitzen, gewinnt das Element, welches als letztes im Flow auftritt. Das heißt: break-before überwiegt break-after, welches wiederum break-inside überwiegt.
    2. +
  2. Besitzt eine der drei Eigenschaften einen avoid break value (avoid, avoid-page, avoid-region, or avoid-column), so erfolgt kein Umbruch.
    3. +
+ +

Nachdem erzwungene Umbrüche gemacht wurden, werden bei Bedarf weiche Umbrüche hinzugefügt. Davon ausgenommen sind Elementbegrenzungen, für die der Wert avoid gilt.

+ +

{{cssinfo}}

+ +

Syntax

+ +

Die break-inside-Eigenschaft wird durch einen der folgenden Werte spezifiziert.

+ +

Werte

+ +
+
auto
+
Initialwert. Erlaubt jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box, erzwingt ihn aber nicht.
+
avoid
+
Vermeidet jede Art von Umbruch (Seiten-, Spalten- oder Abschnittsumbruch) innerhalb der Box.
+
avoid-page
+
Vermeidet Seitenumbrüche innerhalb der Box.
+
avoid-column
+
Vermeidet Spaltenumbrüche innerhalb der Box.
+
avoid-region {{experimental_inline}}
+
Vermeidet Regionsumbrüche innerhalb der Box.
+
+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Page-break-Aliasse

+ +

Aus Gründen der Kompatibilität soll die veraltete Eigenschaft {{cssxref("page-break-inside")}} von Browsern als ein Alias für break-inside behandelt werden. So wird sichergestellt, dass Projekte mit page-break-inside sich weiterhin wie konzipiert verhalten. Für folgende Werte sollen die aufgeführten Aliasse gelten:

+ + + + + + + + + + + + + + + + + + +
page-break-insidebreak-inside
autoauto
avoidavoid
+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusBemerkung
{{SpecName('CSS3 Fragmentation', '#break-within', 'break-inside')}}{{Spec2('CSS3 Fragmentation')}}Keine Änderungen.
{{SpecName('CSS3 Regions', '#region-flow-break', 'break-inside')}}{{Spec2('CSS3 Regions')}}Erweitert die Eigenschaft um Regionsumbrüche.
{{SpecName('CSS3 Multicol', '#break-before-break-after-break-inside', 'break-inside')}}{{Spec2('CSS3 Multicol')}}Initiale Spezifikation.
+ +

Browser-Kompatibilität

+ + + +

{{Compat("css.properties.break-inside", 4)}}

+ +

Anmerkungen zur Kompatibilität

+ +

Vor Firefox 65 kann die veraltete {{cssxref("page-break-inside")}}-Eigenschaft zur Vermeidung von Spalten- und Seitenumbrüchen genutzt werden. Verwenden Sie für Rückwärtskompatibilität beide Eigenschaften.

+ +

Für ältere WebKit-basierte Browser können Sie die Präfix-Eigenschaft -webkit-column-break-inside verwenden, um Spaltenumbrüche zu steuern.

diff --git a/files/de/web/css/calc()/index.html b/files/de/web/css/calc()/index.html new file mode 100644 index 0000000000..357b7d1036 --- /dev/null +++ b/files/de/web/css/calc()/index.html @@ -0,0 +1,106 @@ +--- +title: calc +slug: Web/CSS/calc() +tags: + - CSS + - CSS Funktion + - Referenz +translation_of: Web/CSS/calc() +--- +
{{CSSRef}}
+ +

Übersicht

+ +

Mit der CSS-Funktion calc() lassen sich Werte für CSS-Eigenschaften berechnen.

+ +

calc() kann überall verwendet werden, wo {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}} und {{cssxref("<integer>")}} eingesetzt werden dürfen.

+ +

Syntax

+ +
{{csssyntax}}
+ +
/* Eigenschaft: calc(Ausdruck) */
+width: calc(100% - 80px);
+ +

Werte

+ +
+
Ausdruck
+
Ein mathematischer Ausdruck, dessen Ergebnis als Wert verwendet wird.
+
+ +

Ausdrücke

+ +

Der Ausdruck kann eine beliebige Kombination der folgenden Operatoren sein:

+ +
+
+
+
Addition.
+
-
+
Subtraktion.
+
*
+
Multiplikation (muss mindestens eine {{cssxref("<number>")}} enthalten).
+
/
+
Division (Divisor muss eine {{cssxref("<number>")}} sein).
+
+ +

Bei den Operanden darf es sich um jeden Wert vom Typ {{cssxref("<length>")}} handeln, insbesondere können auch verschiedene Einheiten miteinander verrechnet werden.
+ Das Setzen von Klammern ist ebenfalls möglich.

+ +

calc()-Funktionen können ineinander verschachtelt werden.

+ +
Hinweis: Die Operatoren + und - erfordern zwingend ein Leerzeichen zwischen dem Operator und den Werten. Zum Beispiel würde calc(50% -8px) als Prozentwert, gefolgt von einer negativen Pixel-Länge interpretiert. Eine korrekte Subtraktion ergibt sich nur mit einem Leerzeichen zwischen - und 8px: calc(50% - 8px)
+Bei einer Multiplikation oder Division spielen Leerzeichen keine Rolle, sind aber der Lesbarkeit wegen empfohlen.
+ +
Berechnungen für die Breite oder Höhe von Tabellenspalten und -spaltengruppen sowie Tabellenzeilen und -zeilengruppen, sowie Tabellenzellen können vom Browser als Wert auto behandelt werden. Dies gilt für Tabellen mit dem Typ auto oder fixed.
+ +

Beispiele

+ +

Relative Größe eines Objekts mit einer absoluten Positionierung

+ +

Mit calc() ist es kein Problem mehr, die Maße eines Objekts in Abhängigkeit anderer Maße festzulegen.

+ +

In diesem Beispiel wurde ein Banner erstellt, das die gesamte verfügbare Breite einnehmen, dabei jedoch auf beiden Seiten einen Abstand einnehmen soll, der exakt 40 Pixeln beträgt.

+ +

Links ist die Position mit left: 40px definiert. Mit calc(100% - 80px) werden von der Gesamtbreite 80 Pixel abgezogen (2 * 40 Pixel), so verbleibt am rechten Rand ein Abstand von ebenfalls exakt 40 Pixeln.

+ +
.banner {
+  position: absolute;
+  left: 40px;
+  width: 90%;               /* fallback for browsers without support for calc() */
+  width: calc(100% - 80px);
+}
+
+ +
<div class="banner">This is a banner!</div>
+ +

{{ EmbedLiveSample('Relative_Gr%C3%B6sse_eines_Objekts_mit_einer_absoluten_Positionierung', '100%', '60') }}

+ +

Spezifikation

+ + + + + + + + + + + + + + + + +
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#calc-notation', 'calc()')}}{{Spec2('CSS3 Values')}}
+ +

Browserkompatibilität

+ +

{{Compat("css.types.calc")}}

+ +

Siehe auch

+ + diff --git a/files/de/web/css/caption-side/index.html b/files/de/web/css/caption-side/index.html new file mode 100644 index 0000000000..042981c576 --- /dev/null +++ b/files/de/web/css/caption-side/index.html @@ -0,0 +1,153 @@ +--- +title: caption-side +slug: Web/CSS/caption-side +tags: + - CSS + - CSS Eigenschaft + - CSS Tabellen + - Layout + - Referenz +translation_of: Web/CSS/caption-side +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft caption-side positioniert den Inhalt einer {{HTMLElement("caption") }} einer Tabelle auf der angegebenen Seite.

+ +
{{EmbedInteractiveExample("pages/css/caption-side.html")}}
+ + + +

Syntax

+ +
/* Directional values */
+caption-side: top;
+caption-side: bottom;
+
+/* Warning: non-standard values */
+caption-side: left;
+caption-side: right;
+caption-side: top-outside;
+caption-side: bottom-outside;
+
+/* Global values */
+caption-side: inherit;
+caption-side: initial;
+caption-side: unset;
+
+ +

Die Eigenschaft caption-side property wird als einer der unten aufgeführten Schlüsselwortwerte angegeben.

+ +

Werte

+ +
+
top
+
Die Überschriftenbox soll oberhalb der Tabelle positioniert werden.
+
bottom
+
Die Überschriftenbox soll unterhalb der Tabelle positioniert werden.
+
left {{ non-standard_inline() }}
+
Die Überschriftenbox soll links von der Tabelle positioniert werden.
+
+
Hinweis: Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.
+
+
right {{ non-standard_inline() }}
+
Die Überschriftenbox soll rechts von der Tabelle positioniert werden.
+
+
Hinweis: Dieser Wert wurde für CSS 2 vorgeschlagen, aber aus der endgültigen CSS 2.1-Spezifikation entfernt. Er ist nicht standardisiert.
+
+
top-outside {{non-standard_inline}}
+
Das Überschriftenbox sollte oberhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
+
+
Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den top Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird.
+
+
bottom-outside {{non-standard_inline}}
+
Das Überschriftenbox sollte unterhalb der Tabelle positioniert werden, während die Breite und das horizontale Ausrichtungsverhalten nicht an das horizontale Layout der Tabelle gebunden sind.
+
+
Die CSS 2.1-Spezifikation stellt fest, dass die CSS 2-Spezifikation ein anderes Verhalten für den bottom Wert beschrieben hat, der in einer zukünftigen Spezifikation durch diesen Wert wieder eingeführt wird
+
+
+ +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Setzen von Beschriftungen oben und unten

+ +

HTML

+ +
<table class="top">
+  <caption>Caption ABOVE the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+<br>
+
+<table class="bottom">
+  <caption>Caption BELOW the table</caption>
+  <tr>
+    <td>Some data</td>
+    <td>Some more data</td>
+  </tr>
+</table>
+
+ +

CSS

+ +
.top caption {
+  caption-side: top;
+}
+
+.bottom caption {
+  caption-side: bottom;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+}
+
+ +

Ergebnis

+ +

{{EmbedLiveSample('Setting_captions_above_and_below', 'auto', 160)}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{ SpecName('CSS Logical Properties', '#caption-side', 'caption-side') }}{{ Spec2('CSS Logical Properties') }}Definiert die oberen top und unteren bottom Werte relativ zum Schreibmodus writing-mode Wert.
{{ SpecName('CSS2.1', 'tables.html#caption-position', 'caption-side') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition
+ +

Browser Kompatibilität

+ + + +

{{Compat("css.properties.caption-side")}}

diff --git a/files/de/web/css/clear/index.html b/files/de/web/css/clear/index.html new file mode 100644 index 0000000000..9d2be4ab3c --- /dev/null +++ b/files/de/web/css/clear/index.html @@ -0,0 +1,250 @@ +--- +title: clear +slug: Web/CSS/clear +tags: + - CSS + - CSS Eigenschaft + - CSS Positionierung + - Layout + - Referenz +translation_of: Web/CSS/clear +--- +
{{CSSRef}}
+ +

Die CSS Eigenschaft clear legt fest, ob ein Element unter einem fließenden (float) Element verschoben werden muss, die ihm vorausgehen. Die clear Eigenschaft gilt für fließende und nicht fließenden Elemente.

+ +
{{EmbedInteractiveExample("pages/css/clear.html")}}
+ + + +

Wenn sie auf nicht fließende Blöcke angewendet wird, verschiebt sie den Rahmen (border edge) des Elements nach unten, bis sie unter den Rand (margin edge) aller relevanten fließende Elemente liegt. Der obere Rand (margin) des nicht fließenden Blocks kollabiert.

+ +

Vertikale Ränder (margins) zwischen zwei fließenden Elementen hingegen kollabieren nicht. Wenn sie auf fließenden Elemente angewendet werden, wird der Rand des unteren Elements unter den Rand aller relevanten fließenden Elementen verschoben. Dies wirkt sich auf die Position späterer fließenden Elementen aus, da spätere fließende Elemente nicht höher positioniert werden können als frühere.

+ +

Die relevanen fließenden Elemente, deren Fließeigenschaft beendet werden soll, sind die früheren fließenden Elemente mit der selben Blockformatierungskontexts .

+ +
+

Hinweis: Wenn ein Element nur fließenden (float) Elemente enthält, kollabiert seine Höhe zu null. Wenn Sie möchten, dass es immer in der Lage ist, seine Größe zu ändern, so dass es in seinem Inneren schwebende Elemente enthält, müssen Sie das float für seine Kinder selbst beenden. Dies wird clearfix genannt, und eine Weg, besteht darin, ein clear zu einem ersetzten {{cssxref("::after")}} Pseudoelement hinzuzufügen.

+ +
#container:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+
+ +

Syntax

+ +

+
+
/* Keyword values */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+

+
+
Werte

+
+

+ 
none

+ 
Der Umfluss von vorherigen Elementen wird nicht beendet.

+ 
left

+ 
Der Umfluss von vorherigen Elementen wird auf der linken Seite beendet.

+ 
right

+ 
Der Umfluss von vorherigen Elementen wird auf der rechten Seite beendet.

+ 
both

+ 
Der Umfluss von vorherigen Elementen wird auf beiden Seiten beendet.

+ 
inline-start

+ 
Beendet die Fließeigenschaft des Elementes, das nach unten an den Startrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung ltr (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung rtl (von rechts nach links) ist, dann wird es rechtsseitig sein.

+ 
inline-end

+ 
Beendet die Fließeigenschaft des Elementes, das nach unten an den Endrand eines seines enthaltenden Blocks verschoben wird. Wenn die Textrichtung ltr (von links nach rechts) ist, dann wird es linksseitig sein. Falls die Textrichtung rtl (von rechts nach links) ist, dann wird es rechtsseitig sein.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
clear: left

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="left">This paragraph clears left.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.left {
+  border: 1px solid black;
+  clear: left;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width: 20%;
+}
+.red {
+  float: left;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-left','100%','250') }}

+
+
clear: right

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+  <p class="right">This paragraph clears right.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.right {
+  border: 1px solid black;
+  clear: right;
+}
+.black {
+  float: right;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 50%;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-right','100%','250') }}

+
+
clear: both

+
+
HTML

+
+
<div class="wrapper">
+  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
+  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
+  <p class="both">This paragraph clears both.</p>
+</div>
+

+
+
CSS

+
+
.wrapper{
+  border:1px solid black;
+  padding:10px;
+}
+.both {
+  border: 1px solid black;
+  clear: both;
+}
+.black {
+  float: left;
+  margin: 0;
+  background-color: black;
+  color: #fff;
+  width:20%;
+}
+.red {
+  float: right;
+  margin: 0;
+  background-color: pink;
+  width:20%;
+}
+p {
+  width: 45%;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('clear-both','100%','300') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Die Werte inline-start und inline-end hinzugefügt.
{{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}{{Spec2('CSS2.1')}}Keine signifikanten Änderungen, jedoch werden Details geklärt.
{{SpecName('CSS1', '#clear', 'clear')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.clear")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/clip-path/index.html b/files/de/web/css/clip-path/index.html
new file mode 100644
index 0000000000..63df0e6248
--- /dev/null
+++ b/files/de/web/css/clip-path/index.html
@@ -0,0 +1,128 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+tags:
+  - CSS
+  - Experimentell
+  - Layout
+  - NeedsBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/clip-path
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Die clip-path CSS Eigenschaft verhindert, dass ein Teil eines Elements angezeigt wird, indem es einen Schnittbereich definiert, der angezeigt werden soll, d. h. nur ein bestimmter Bereich des Elements wird angezeigt.

+
+
Der Schnittbereich ist ein Pfad, der als URL, die eine Inline- oder externe SVG-Grafik oder eine Formfunktion wie circle() definiert wird. Die clip-path Eigenschaft ersetzt die nun als veraltet geltende clip Eigenschaft.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+clip-path: none;
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+
+/* Bildwerte */
+clip-path: url(resources.svg#c1);
+clip-path: linear-gradient(blue, transparent);
+
+/* Geometriewerte */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Globale Werte */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+

+
+
Werte

+
+

+ 
<clip-source>

+ 
Repräsentiert eine URL, die ein Schnittpfad Element referenziert.

+ 
<basic-shape>

+ 
Eine Grundform Funktion, wie sie in der CSS Shapes Specifikation definiert wird. Eine Grundform macht Gebrauch von der angegebenen Referenzbox, um die Grundform zu skalieren und positionieren. Falls keine Referenzbox angegeben wurde, wird border-box als Referenzbox verwendet.

+ 
<geometry-box>

+ 

+ 
Falls in Kombination mit <basic-shape> angegeben, gibt dieser Wert die Referenzbox für die Grundform an. Falls alleine angegeben, werden die Ränder der angegebenen Box inklusive etwaiger Randformen (z. B. definiert durch {{cssxref("border-radius")}}) als Schnittpfad verwendet.

+ 

+ 
fill-box

+ 

+ 
Verwendet den Objektrahmen als Referenzbox.

+ 

+ 
stroke-box

+ 

+ 
Verwendet die Strichrahmenbox als Referenzbox.

+ 

+ 
view-box

+ 

+ 
Verwendet den nähesten SVG-Viewport als Referenzbox. Falls ein {{SVGAttr("viewBox")}} Attribut für das den SVG-Viewport erstellende Element angegeben wurde, wird die Referenzbox am Ursprung des Koordinatensystems positioniert, das durch das viewBox Attribut erzeugt wird und die Ausmaße der Referenzbox werden auf die Breite und Höhe des viewBox Attributs gesetzt.

+ 

+ 
none

+ 
Es wird kein Schnittpfad erzeugt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
/* Inline-SVG  */
+.target {
+  clip-path: url(#c1);
+}
+
+/* externes SVG */
+.anothertarget {
+  clip-path: url(resources.svg#c1);
+}
+
+/* Kreis */
+.circleClass {
+  clip-path: circle(15px at 20px 20px);
+}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}{{Spec2('CSS Masks')}}Erweitert die Anwendung auf HTML Elemente
{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition (gilt nur für SVG Elemente)

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.clip-path")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/clip/index.html b/files/de/web/css/clip/index.html
new file mode 100644
index 0000000000..a23c3ec708
--- /dev/null
+++ b/files/de/web/css/clip/index.html
@@ -0,0 +1,131 @@
+---
+title: clip
+slug: Web/CSS/clip
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Veraltet
+translation_of: Web/CSS/clip
+---
+
{{CSSRef}}{{deprecated_header}}

+
+
Übersicht

+
+
Die clip CSS Eigenschaft definiert, welcher Teil eines Elements sichtbar ist. Sie gilt nur für Elemente mit {{cssxref("position","position:absolute")}}.

+
+

+
Warnung: Diese Eigenschaft ist veraltet. Es sollte stattdessen {{cssxref("clip-path")}} verwendet werden.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+clip: auto;
+
+/* <shape> Werte */
+clip: rect(1px 10em 3rem 2ch);
+clip: rect(1px, 10em, 3rem, 2ch);
+
+/* Globale Werte */
+clip: inherit;
+clip: initial;
+clip: unset;
+

+
+
Werte

+
+

+ 
<shape>

+ 
Ein rechteckiger {{cssxref("<shape>")}} Wert der Form rect(<top>, <right>, <bottom>, <left>) oder  rect(<top> <right> <bottom> <left>) wobei <top> und <bottom> Versätze von der Innenseite des oberen Randes der Box angeben und <right> und <left> Versätze von der Innenseite des linken Randes der Box — d. h. die Ausmaße der Innenabstandsbox.

+ 
<top>, <right>, <bottom> und <left> können entweder einen {{cssxref("<length>")}} Wert haben oder auto. Falls der Wert irgendeiner Seite auto ist, wird das Element an der Innenseite des Randes dieser Seite abgeschnitten.

+ 
auto

+ 
Das Element wird nicht abgeschnitten (Standardwert). Zu beachten ist, dass sich dies von rect(auto, auto, auto, auto) unterscheidet, welches das Element an den Innenseiten der Ränder des Elements abschneidet.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.dotted-border {
+   border: dotted;
+   position: relative;
+   width: 536px;
+   height: 350px;
+}
+
+#top-left, #middle, #bottom-right {
+   position: absolute;
+   top: 0px;
+}
+
+#top-left {
+   left: 360px;
+   clip: rect(0px, 175px, 113px, 0px);
+}
+
+
+#middle {
+   left: 280px;
+   clip: rect(119px, 255px, 229px, 80px);
+   /* Standardsyntax, nicht unterstützt von Internet Explorer 4-7 */
+}
+
+#bottom-right {
+   left: 200px;
+   clip: rect(235px 335px 345px 160px);
+   /* Nicht-standardisierte Syntax, jedoch von allen gängigen Browsern unterstützt */
+}

+
+
<p class="dotted-border">
+   <img src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Originalgrafik" />
+   <img id="top-left" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die oben links abgeschnitten ist">
+   <img id="middle" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die zur Mitte hin abgeschnitten ist">
+   <img id="bottom-right" src="https://developer.mozilla.org/@api/deki/files/3613/=hut.jpg" title="Grafik, die unten rechts abgeschnitten ist">
+</p>

+
+
{{EmbedLiveSample('Beispiele', '689px', '410px')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Masks', '#clip-property', 'clip')}}{{Spec2('CSS Masks')}}Markiert die clip Eigenschaft als veraltet, schlägt {{cssxref("clip-path")}} als Ersatz vor.
{{SpecName('CSS3 Transitions', '#animatable-css', 'clip')}}{{Spec2('CSS3 Transitions')}}Definiert clip als animierbar.
{{SpecName('CSS2.1', 'visufx.html#clipping', 'clip')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.clip")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("overflow")}}, {{Cssxref("display")}}, {{Cssxref("position")}}
    • 
+

diff --git a/files/de/web/css/color/index.html b/files/de/web/css/color/index.html
new file mode 100644
index 0000000000..1465dd3a1f
--- /dev/null
+++ b/files/de/web/css/color/index.html
@@ -0,0 +1,121 @@
+---
+title: color
+slug: Web/CSS/color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/color
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft color setzt die Vordergrundfarbe des Textinhalts eines Elements und seiner Dekorationen. Sie hat keinen Einfluss auf andere Charakteristiken des Elements; sie sollte eigentlich text-color genannt werden, jedoch wurde sie aus historischen Gründen und ihrem Auftreten in CSS Level 1 so genannt.

+
+
Beachte, dass der Farbwert eine gleichmäßige Farbe sein muss, welche seit CSS3 einen Transparenzwert beinhalten kann. Sie kann kein {{cssxref("<gradient>")}} sein, welcher in CSS ein {{cssxref("<image>")}} ist.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Eine CSS Level 1 Farbe */
+color: red;
+
+/* Die einzige in CSS Level 2 (Revision 1) hinzugefügte Farbe */
+color: orange;
+
+/* CSS Level 3 Farbe, manchmal SVG- oder X11-Farbe genannt */
+color: antiquewhite;
+
+/* Die Farbe lindgrün in der 3-Zeichen-Notation */
+color: #0f0;
+
+/* Die Farbe lindgrün in der 6-Zeichen-Notation */
+color: #00ff00;
+
+/* Eine Farbe, die die verfügbaren funktionalen Notationen verwendet */
+color: rgba(34, 12, 64, 0.3);
+
+/* Verwende die Farbe des direkten Vorfahren des Elements */
+color: currentcolor;
+
+/* Globale Werte */
+color: inherit;
+color: initial;
+color: unset;
+

+
+
Werte

+
+

+ 
<color>

+ 
Ist ein {{cssxref("<color>")}} Wert, der die Farbe von Textelementen innerhalb des Elements bestimmt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Die folgenden Zeilen sind Beispiele, wie der Text des Elements rot eingefärbt werden kann:

+
+
element { color: red; }
+element { color: #f00; }
+element { color: #ff0000; }
+element { color: rgb(255, 0, 0); }
+element { color: rgb(100%, 0%, 0%); }
+element { color: hsl(0, 100%, 50%); }
+
+/* 50% translucent */
+element { color: rgba(255, 0, 0, 0.5); }
+element { color: hsla(0, 100%, 50%, 0.5); }
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'color')}}{{Spec2('CSS3 Transitions')}}Definiert color als animierbar.
{{SpecName('CSS3 Colors', '#color', 'color')}}{{Spec2('CSS3 Colors')}}Markiert Systemfarben als veraltet; fügt SVG-Farben hinzu; fügt die funktionalen Notationen rgba(), hsl(), hsla() hinzu.
{{SpecName('CSS2.1', 'colors.html#colors', 'color')}}{{Spec2('CSS2.1')}}Fügt die Farbe orange und die Systemfarben hinzu.
{{SpecName('CSS1', '#color', 'color')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.color")}}
+
+
Siehe auch

+
+
    
+ 
  • Der {{cssxref("<color>")}} Datentyp
    • 
+ 
  • Weitere Farbeigenschaften: {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, {{cssxref("column-rule-color")}} und {{cssxref("color-adjust")}}
    • 
+

diff --git a/files/de/web/css/column-count/index.html b/files/de/web/css/column-count/index.html
new file mode 100644
index 0000000000..0e7117c49b
--- /dev/null
+++ b/files/de/web/css/column-count/index.html
@@ -0,0 +1,106 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+translation_of: Web/CSS/column-count
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-count bestimmt die Spaltenanzahl innerhalb eines Elements.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("column-count")}}
+

+
+
column-count: 3
+column-count: auto

+
+
Werte

+
+

+ 
auto

+ 
Besagt, dass die Anzahl Spalten von anderen Werten Abhängig ist, wie z. B. {{cssxref("column-width")}}.

+ 
<number>

+ 
Ein positiver {{cssxref("<integer>")}}, welcher die Anzahl der Spalten genau festlegt. Falls der Wert von {{cssxref("column-width")}} nicht auto ist, stellt dieser Wert die maximale Anzahl an Spalten dar.

+

+
+
Beispiel

+
+
.content-box {
+  border: 10px solid #000000;
+  column-count:3;
+}
+

+
+
Spezifikations

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Multicol', '#column-count', 'column-count')}}{{Spec2('CSS3 Multicol')}} 

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{property_prefix('-webkit')}}1.5 (1.8){{property_prefix('-moz')}}1011.13.0 (522){{property_prefix('-webkit')}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

diff --git a/files/de/web/css/column-fill/index.html b/files/de/web/css/column-fill/index.html
new file mode 100644
index 0000000000..3750096c9f
--- /dev/null
+++ b/files/de/web/css/column-fill/index.html
@@ -0,0 +1,74 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - NeedsBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-fill
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-fill bestimmt die Aufteilung von Inhalten auf Spalten. Inhalte können entweder gleichmäßig verteilt werden, damit alle Spalten dieselbe Höhe haben, oder sie nehmen den Raum ein, den der Inhalt benötigt, sofern auto verwendet wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+column-fill: auto;
+column-fill: balance;
+
+/* Globale Werte */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Die Spalten werden fortlaufend gefüllt.

+ 
balance

+ 
Der Inhalt wird gleichmäßig aufgeteilt.

+

+
+
{{csssyntax}}

+
+
Beispiel

+
+
.content-box {
+  column-count: 4;
+  column-rule: 1px solid black;
+  column-fill: balance;
+  height: 200px;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#column-fill', 'column-fill')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-fill")}}
diff --git a/files/de/web/css/column-gap/index.html b/files/de/web/css/column-gap/index.html
new file mode 100644
index 0000000000..9e41194a52
--- /dev/null
+++ b/files/de/web/css/column-gap/index.html
@@ -0,0 +1,94 @@
+---
+title: column-gap
+slug: Web/CSS/column-gap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-gap
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-gap bestimmt die Größe der Lücke zwischen den Spalten für Elemente, die als mehrspaltige Elemente dargestellt werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+column-gap: normal;
+
+/* <length> Werte */
+column-gap: 3px;
+column-gap: 2.5em;
+
+/* Globale Werte */
+column-gap: inherit;
+column-gap: initial;
+column-gap: unset;
+

+
+
Werte

+
+

+ 
normal

+ 
Übernimmt den vom Browser vordefinierten Wert. Laut Spezifikation sollte dieser Wert 1em entsprechen.

+ 
<length>

+ 
Ein {{cssxref("<length>")}} Wert, welcher den Abstand der Lücke festlegt. Der Wert darf nicht negativ sein, 0 ist jedoch zulässig.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
.content-box {
+  border: 10px solid #000000;
+  column-count: 3;
+  column-gap: 20px;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#column-gap', 'column-gap')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Support im Flex Layout

+
+
{{Compat("css.properties.column-gap.flex_context")}}

+
+
Support im Grid Layout

+
+
{{Compat("css.properties.column-gap.grid_context")}}

+
+
Support im Multi-column Layout

+
+
{{Compat("css.properties.column-gap.multicol_context")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/column-rule-color/index.html b/files/de/web/css/column-rule-color/index.html
new file mode 100644
index 0000000000..750321ff5e
--- /dev/null
+++ b/files/de/web/css/column-rule-color/index.html
@@ -0,0 +1,67 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule-color
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
Die column-rule-color CSS Eigenschaft definiert die Farbe der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("column-rule-color")}}
+

+
+
column-rule-color: red
+column-rule-color: rgb(192, 56, 78)
+column-rule-color: transparent
+column-rule-color: hsla(0, 100%, 50%, 0.6)
+
+column-rule-color: inherit
+

+
+
Werte

+
+

+ 
<color>

+ 
Ist ein {{cssxref("<color>")}} Wert, der die Farbe der Linie angibt, die die Spalten trennt.

+

+
+
Beispiel

+
+
#header { column-rule-color: blue; }
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#crc', 'column-rule-color')}}{{Spec2('CSS3 Multicol')}} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-rule-color")}}
diff --git a/files/de/web/css/column-rule-style/index.html b/files/de/web/css/column-rule-style/index.html
new file mode 100644
index 0000000000..612ec4008b
--- /dev/null
+++ b/files/de/web/css/column-rule-style/index.html
@@ -0,0 +1,72 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule-style
+---
+
{{ CSSRef("CSS Multi-columns") }}

+
+
Übersicht

+
+
Die column-rule-style CSS Eigenschaft definiert den Stil der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("column-rule-style")}}
+

+
+
column-rule-style: none
+column-rule-style: hidden
+column-rule-style: dotted
+column-rule-style: dashed
+column-rule-style: solid
+column-rule-style: double
+column-rule-style: groove
+column-rule-style: ridge
+column-rule-style: inset
+column-rule-style: outset
+
+column-rule-style: inherit
+

+
+
Werte

+
+

+ 
<br-style> 

+ 
Ist ein Schlüsselwort, das durch {{ cssxref("border-style") }} definiert wird und der den Stil der Linie angibt, die die Spalten trennt. Die Gestaltung muss wie im zusammenfallenden Border Model interpretiert werden.

+

+
+
Beispiel

+
+
#header {-moz-column-rule-style: inset;}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Multicol', '#crs', 'column-rule-style') }}{{ Spec2('CSS3 Multicol') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-rule-style")}}
diff --git a/files/de/web/css/column-rule-width/index.html b/files/de/web/css/column-rule-width/index.html
new file mode 100644
index 0000000000..b087970e95
--- /dev/null
+++ b/files/de/web/css/column-rule-width/index.html
@@ -0,0 +1,78 @@
+---
+title: column-rule-width
+slug: Web/CSS/column-rule-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltiges Layout
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/column-rule-width
+---
+
{{ CSSRef}}

+
+
Übersicht

+
+
Die column-rule-width CSS Eigenschaft definiert die Breite der Linie, die zwischen den Spalten in mehrspaltigen Layouts gezeichnet wird.

+
+
{{cssinfo('column-rule-width')}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+column-rule-width: thin;
+column-rule-width: medium;
+column-rule-width: thick;
+
+/* Längenwerte */
+column-rule-width: 1px;
+column-rule-width: 2.5em;
+
+/* Globale Werte */
+column-rule-width: inherit;
+column-rule-width: initial;
+column-rule-width: unset;
+

+
+
Werte

+
+

+ 
<'border-width'> 

+ 
Ist ein {{cssxref("border-width")}} Wert oder eines der Schlüsselwörter thin, medium oder thick, und beschreibt die Breite der Linie, die zwei Spalten trennt.

+

+
+
Formale Syntax

+
+
{{csssyntax('column-rule-width')}}

+
+
Beispiel

+
+
#header {
+  column-rule-width: thick;
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Multicol', '#crw', 'column-rule-width') }}{{ Spec2('CSS3 Multicol') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.column-rule-width")}}

diff --git a/files/de/web/css/column-rule/index.html b/files/de/web/css/column-rule/index.html
new file mode 100644
index 0000000000..5df71109ef
--- /dev/null
+++ b/files/de/web/css/column-rule/index.html
@@ -0,0 +1,74 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspaltenlayout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/column-rule
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
In mehrspaltigen Layouts beschreibt die column-rule CSS Eigenschaft eine gerade Linie, welche zwischen jeder Spalte dargestellt wird. Sie ist eine komfortable Kurzform, um das separate Setzen der einzelnen column-rule-* Eigenschaften zu vermeiden: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}} und {{Cssxref("column-rule-color")}}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("column-rule")}}
+

+
+
Werte

+
+
Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:

+
+

+ 
<column-rule-width>

+ 
Ist eine {{cssxref("<length>")}} oder eins der drei Schlüsselwörter thin, medium oder thick. Siehe {{cssxref("border-width")}} für Details.

+ 
<column-rule-style>

+ 
Siehe {{cssxref("border-style")}} für mögliche Werte und Details.

+ 
<column-rule-color>

+ 
Ist ein {{cssxref("<color>")}} Wert.

+

+
+
Beispiele

+
+
p.foo { column-rule: dotted; }          /* entspricht "medium dotted currentColor" */
+p.bar { column-rule: solid blue; }      /* entspricht "medium solid blue" */
+p.baz { column-rule: solid 8px; }       /* entspricht "8px solid currentColor" */
+p.abc { column-rule: thick inset blue; }
+

+
+
Live Beispiel

+
+

+
padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol', '#column-rule', 'column-rule')}}{{Spec2('CSS3 Multicol')}} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-rule")}}
diff --git a/files/de/web/css/column-span/index.html b/files/de/web/css/column-span/index.html
new file mode 100644
index 0000000000..c441af6d43
--- /dev/null
+++ b/files/de/web/css/column-span/index.html
@@ -0,0 +1,67 @@
+---
+title: column-span
+slug: Web/CSS/column-span
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - Referenz
+translation_of: Web/CSS/column-span
+---
+
{{CSSRef("CSS Multi-columns")}}

+
+
Übersicht

+
+
Die CSS Eigenschaft column-span bestimmt die Laufweite eines Elements inerhalb eines Mehrspaltigen Containers.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
column-span: none
+column-span: all
+
+column-span: inherit
+

+
+
Werte

+
+

+ 
none

+ 
Das Element fliesst nicht über mehrere Spalten hinweg.

+ 
all

+ 
Das Element fliesst über sämtliche Spalten hinweg. Der Inhalt davor wird automatisch zwischen den Spalten ausgeglichen.

+

+
+
Beispiele

+
+
h1, h2 {
+  column-span: all;
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Multicol', '#column-span0', 'column-width') }}{{ Spec2('CSS3 Multicol') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.column-span")}}
diff --git a/files/de/web/css/column-width/index.html b/files/de/web/css/column-width/index.html
new file mode 100644
index 0000000000..2ba1dc5e11
--- /dev/null
+++ b/files/de/web/css/column-width/index.html
@@ -0,0 +1,99 @@
+---
+title: column-width
+slug: Web/CSS/column-width
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten
+  - Referenz
+translation_of: Web/CSS/column-width
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die column-width CSS Eigenschaft schlägt eine optimale Spaltenbreite vor. Dies ist kein absoluter Wert, sondern lediglich ein Hinweis an den Browser, welcher die Breite der Spalte anhand des vorgeschlagenen Wertes anpasst, was skalierbare Designs ermöglicht, die sich verschiedenen Bildschirmgrößen anpassen. Besonders wenn die {{cssxref("column-count")}} CSS Eigenschaft angegeben ist, welche Vorrang hat, wenn es darum geht, eine exakte Spaltenbreite zu setzen, müssen alle Längenwerte angegeben werden. In horizontalem Text sind dies {{cssxref('width')}}, {{cssxref('column-width')}}, {{cssxref('column-gap')}} und {{cssxref('column-rule-width')}}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+column-width: auto;
+
+/* Verschiedene <length> Werte */
+column-width: 6px;
+column-width: 25em;
+column-width: 0.3vw;
+
+/* Globale Werte */
+column-width: inherit;
+column-width: initial;
+column-width: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Ist ein {{cssxref("<length>")}} Wert, der einen Hinweis auf die optimale Breite der Spalte gibt. Die tatsächliche Spaltenbreite kann größer (um den verfügbaren Platz auszufüllen) oder schmaler (nur, falls der verfügbare Platz kleiner als die angegebene Spaltenbreite ist) sein. Die Länge muss positiv sein, ansonsten ist sie ungültig.

+ 
auto

+ 
Ist ein Schlüsselwort, das angibt, dass die Breite der Spalte durch andere CSS Eigenschaften wie {{cssxref("column-count")}} bestimmt werden soll.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML Inhalt

+
+
<div class="content-box">
+Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
+</div>

+
+
CSS Inhalt

+
+
.content-box {
+  border: 10px solid #0ff;
+
+  /* Chrome, Safari, Opera Präfix */
+  -webkit-column-width: 100px;
+
+  /* Mozilla Firefox Präfix */
+  -moz-column-width: 100px;
+
+  column-width: 100px;
+}
+

+
+
{{EmbedLiveSample('Beispiele', '300px', '200px')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Writing Modes', '#multicol-intrinsic', 'column-width')}}{{Spec2('CSS3 Writing Modes')}}Fügt innere Größen über die Schlüsselwörter min-content, max-content, fill-available und fit-content hinzu.
{{SpecName('CSS3 Multicol', '#cw', 'column-width')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.column-width")}}

diff --git a/files/de/web/css/columns/index.html b/files/de/web/css/columns/index.html
new file mode 100644
index 0000000000..5a243ed703
--- /dev/null
+++ b/files/de/web/css/columns/index.html
@@ -0,0 +1,113 @@
+---
+title: columns
+slug: Web/CSS/columns
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Mehrspalten Layout
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/columns
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft columns ist eine Kurzform Eigenschaft, die es erlaubt, sowohl die {{ cssxref('column-width') }} als auch die {{ cssxref("column-count") }} Eigenschaft auf einmal zu setzen.

+
+
{{EmbedInteractiveExample("pages/css/columns.html")}}

+
+
+
+
Syntax

+
+
/* Column width */
+columns: 18em;
+
+/* Column count */
+columns: auto;
+columns: 2;
+
+/* Both column width and count */
+columns: 2 auto;
+columns: auto 12em;
+columns: auto auto;
+
+/* Global values */
+columns: inherit;
+columns: initial;
+columns: unset;

+
+
Die Eigenschaft columns kann mit einem oder mit zwei von den unten aufgelisteten Werten in beliebiger Reihenfolge spezifiziert.

+
+
Werte

+
+

+ 
<column-width>

+ 
The ideal column width, defined as a {{cssxref("<length>")}} or the keyword auto. The actual width may be wider or narrower to fit the available space. See {{cssxref("column-width")}}.

+ 
<column-count>

+ 
The ideal number of columns into which the element's content should be flowed, defined as an {{cssxref("<integer>")}} or the keyword auto. If neither this value nor the column's width are auto, it merely indicates the maximum allowable number of columns. See {{cssxref("column-count")}}.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
Sets drei gleiche Spalten

+
+
HTML

+
+
<p class="content-box">
+  This is a bunch of text split into three columns
+  using the CSS `columns` property. The text
+  is equally distributed over the columns.
+</p>
+

+
+
CSS

+
+
.content-box {
+  columns: 3 auto;
+}

+
+
Ergebnis

+
+
{{EmbedLiveSample('Setting_three_equal_columns', 'auto', 120)}}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Multicol', '#columns', 'columns') }}{{ Spec2('CSS3 Multicol') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.columns")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/content/index.html b/files/de/web/css/content/index.html
new file mode 100644
index 0000000000..686e098723
--- /dev/null
+++ b/files/de/web/css/content/index.html
@@ -0,0 +1,238 @@
+---
+title: content
+slug: Web/CSS/content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/content
+---
+
{{ CSSRef() }}

+
+
Zusammenfassung

+
+
Die content CSS Eigenschaft wird mit {{ cssxref("::before") }} und {{ cssxref("::after") }} Pseudo-elementen genutzt um Inhalte in einen Element zu generieren. Die Inhalte die in content eingefügt werden sind Anonym, sie werden nur gerendert und sind nicht im DOM vorhanden. Siehe: replaced elements.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("content")}}
+

+
+
content: normal                                /* Keywords die nicht mit anderen Werten kombiniert werden können */
+content: none
+
+content: 'prefix'                              /* <string> Wert, nicht-lateinische Zeichen müssen codiert werden z.B. \00A0 for &nbsp; */
+content: url(http://www.example.com/test.html) /* <uri> Wert */
+content: chapter_counter                       /* <counter> Werte */
+content: attr(value string)                    /* attr() Wert verbunden mit dem HTML Attribut Wert */
+content: open-quote                            /* Sprach- und positionsabhängige Keywords */
+content: close-quote
+content: no-open-quote
+content: no-close-quote
+
+content: open-quote chapter_counter            /* Außer für normal und none, können mehrere Werte gleichzeitig verwendet werden */
+
+content: inherit
+

+
+
Werte

+
+

+ 
none

+ 
Das Pseudo-Element wird nicht erzeugt.

+ 
normal

+ 
Berechnet auf none für :before und :after Pseudo-elemente.

+ 
<string>

+ 
Text Inhalt.

+ 
<uri> url()

+ 
Der Wert ist ein URI, die eine externe Ressource bezeichnet (beispielsweise ein Bild). Wenn die Ressource oder das Bild nicht angezeigt werden kann, wird es entweder ignoriert oder ein Platzhalter wird angezeigt.

+ 
<counter>

+ 
Die Zähler (Counters) können mit zwei verschiedenen Funktionen angegeben werden: 'counter()' oder 'counters()'. Ersteres hat zwei Formen: 'counter(name) "oder" counter(name, style). Der erzeugte Text ist der Wert des counter innersten, im Scope dieses Pseudoelements; es wird in der angegebenen Art ('dezimal' als Standard) formatiert. Die letztere Funktion hat auch zwei Formen: "counter(name, string) 'oder' counters(name, string, style) '. Der erzeugte Text ist der Wert aller Zähler mit dem angegebenen Namen im Scope dieses Pseudoelements, von außen nach innen, durch den angegebenen String getrennt. Die counter werden in der angegebenen Art ('dezimal' als Standard) wiedergegeben. Siehe den Abschnitt über automatische Counter und Nummerierung für weitere Informationen. Der Name darf nicht "none", "inherit" oder "initial" sein. Ein solcher Name bewirkt, dass die Deklaration ignoriert wird.

+ 
attr(X)

+ 
Gibt den Wert des Elementen Attributes X als String zurück. Gibt es kein Attribut X wird ein leerer String zurückgegeben. Die Groß- und Kleinschreibung von Attributnamen hängt von der Dokumentsprache ab.

+ 
open-quote | close-quote

+ 
Diese Werte werden durch die entsprechende Zeichenfolge aus der {{ cssxref("quotes") }} Eigenschaft ersetzt. 

+ 
no-open-quote | no-close-quote

+ 
Stellt keine Inhalte, sondern erhöht (verringert) die Ebene der Schachtelung für Zitate.

+

+
+
Beispiele

+
+
Code Beispiele - Überschriften und Zitate

+
+
HTML

+
+
<h1>5</h1>
+<p> We shall start this with a quote from Sir Tim Berners-Lee,
+    <q cite="http://www.w3.org/People/Berners-Lee/FAQ.html#Internet">
+        I was lucky enough to invent the Web at the time when the Internet already existed - and had for a decade and a half.</q>  We must understand that there is nothing fundamentally wrong with building on the contributions of others.
+</p>
+
+<h1>6</h1>
+<p> Here we shall quote the Mozilla Manifesto,
+    <q cite="http://www.mozilla.org/en-US/about/manifesto/">
+        Individuals must have the ability to shape the Internet and their own experiences on the Internet.</q> And so, we can infer that contributing to the open web, can protect our own individual experiences on it.
+</p>

+
+
CSS

+
+
q {
+    color: #00008B;
+    font-style: italic;
+}
+
+q::before   { content: open-quote }
+q::after    { content: close-quote }
+
+h1::before  { content: "Chapter "; }

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_headings_and_quotes', 460, 100) }}

+
+
Code sample - content with multiple values adding an icon before a link

+
+
HTML

+
+
<a href="http://www.mozilla.org/en-US/">Home Page</a>

+
+
CSS

+
+
a::before{
+    content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
+    font:    x-small Arial,freeSans,sans-serif;
+    color:   gray;
+}

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_content_with_multiple_values', 200, 60) }}

+
+
Code sample - adding an icon after text in a custom list

+
+
HTML

+
+
<div>
+  <ul class="brightIdea">
+    <li>This is my first idea</li>
+    <li>and another good idea</li>
+  </ul>
+</div>

+
+
CSS

+
+
/* first import the icon from a suitable site */
+@import url(http://weloveiconfonts.com/api/?family=entypo);
+
+.brightIdea li::after{
+    content: '\1f4a1';
+    font-family: 'entypo', sans-serif;
+}

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_adding_an_icon_after_text', 300, 100) }}

+
+
Code sample - class based example

+
+
HTML

+
+
<h2>Paperback best sellers</h2>
+<ol>
+    <li>Political thriller</li>
+    <li class="newEntry">Halloween Stories</li>
+    <li>My Biography</li>
+    <li class="newEntry">Vampire Romance</li>
+</ol>

+
+
CSS

+
+
/* use a class rather that an element selector to give more flexibility.
+Simple string example, but don't forget add a leading space in the text string
+for spacing purposes  */
+
+.newEntry::after {
+    content: " New!";
+    color: red;
+}

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_class_based_example', 300, 200) }}

+
+
Code sample - rich link styling

+
+
HTML

+
+
<ul>
+    <li><a id="moz" href="http://www.mozilla.org/">
+        Mozilla Home Page</a></li>
+    <li><a id="mdn" href="https://developer.mozilla.org/">
+        Mozilla Developer Network</a></li>
+    <li><a id="w3c" href="http://www.w3c.org/">
+        World Wide Web Consortium</a></li>
+</ul>

+
+
CSS

+
+
a {
+    text-decoration: none;
+    border-bottom: 3px dotted navy;
+}
+
+a::after {
+    content: " (" attr(id) ")";
+}
+
+#moz::before {
+    content:url(https://mozorg.cdn.mozilla.net/media/img/favicon.ico) ;
+}
+
+#mdn::before {
+    content:url(https://mdn.mozillademos.org/files/7691/mdn-favicon16.png) ;
+}
+
+#w3c::before {
+    content:url(http://w3c.org/2008/site/images/favicon.ico) ;
+}
+
+li {
+    margin: 1em;
+}
+
+

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Code_sample_-_rich_link_styling', 340, 200) }}

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS2.1', 'generate.html#content', 'content') }}{{ Spec2('CSS2.1') }}

+
+
Browser compatibility

+
+
{{Compat("css.properties.content")}}

+
+
See also

+
+
    
+ 
  • {{ Cssxref("::after") }}, {{ Cssxref("::before") }}, {{ Cssxref("quotes") }}
    • 
+

diff --git a/files/de/web/css/counter-increment/index.html b/files/de/web/css/counter-increment/index.html
new file mode 100644
index 0000000000..07c649e290
--- /dev/null
+++ b/files/de/web/css/counter-increment/index.html
@@ -0,0 +1,99 @@
+---
+title: counter-increment
+slug: Web/CSS/counter-increment
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/counter-increment
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die counter-increment CSS Eigenschaft wird verwendet, um den Wert von CSS Zählern um einen bestimmten Wert zu erhöhen. Der Wert des Zählers kann durch die {{cssxref("counter-reset")}} CSS Eigenschaft zurückgesetzt werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Erhöht 'counter-name' um 1 */
+counter-increment: counter-name;
+
+/* Verringert 'counter-name' um 1 */
+counter-increment: counter-name -1;
+
+/* Erhöht 'counter1' um 1 und verringert 'counter2' um 4 */
+counter-increment: counter1 counter2 -4;
+
+/* Belässt die Zähler unverändert: wird verwendet, um weniger spezifische Werte zu verstecken */
+counter-increment: none;
+
+/* Globale Werte */
+counter-increment: inherit;
+counter-increment: initial;
+counter-increment: unset;
+

+
+
Werte

+
+

+ 
{{cssxref("custom-ident", "<custom-ident>")}}

+ 
Der Name des Zählers, der erhöht bzw. verringert werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben a bis z, den Zahlen 0 bis 9, Unterstrichen (_), und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder none, unset, initial oder inherit unabhängig von Groß- und Kleinschreibung sein.

+ 
{{cssxref("<integer>")}}

+ 
Der Wert, der dem Zähler hinzugefügt wird. Falls nicht angegeben, wird 1 verwendet.

+ 
none

+ 
Keiner der Zähler wird verändert. Dieser Wert wird als Standardwert verwendet oder um eine Erhöhung bzw. Verringerung in spezifischeren Regeln zurückzusetzen.

+

+
+
Es können beliebig viele Zähler erhöht bzw. verringert werden, jeder durch ein Leerzeichen getrennt.

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
h1 {
+  counter-increment: chapter section 2 page;
+  /* Erhöht den Wert der 'chapter' und 'page' Zähler um 1
+     und den 'section' Zähler um 2. */
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Lists", "#counter-increment", "counter-increment")}}{{Spec2("CSS3 Lists")}}Keine Änderung
{{SpecName("CSS2.1", "generate.html#propdef-counter-increment", "counter-increment")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.counter-increment")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/counter-reset/index.html b/files/de/web/css/counter-reset/index.html
new file mode 100644
index 0000000000..3b35441a61
--- /dev/null
+++ b/files/de/web/css/counter-reset/index.html
@@ -0,0 +1,100 @@
+---
+title: counter-reset
+slug: Web/CSS/counter-reset
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/counter-reset
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die counter-reset CSS Eigenschaft wird verwendet, um CSS Zähler auf einen bestimmten Wert zurückzusetzen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Setzt 'counter-name' auf 0 */
+counter-reset: counter-name;
+
+/* Setzt 'counter-name' auf -1 */
+counter-reset: counter-name -1;
+
+/* Setzt 'counter1' auf 1 und 'counter2' auf 4 */
+counter-reset: counter1 1 counter2 4;
+
+/* Bricht alle Rücksetzungen ab, die in weniger spezifischen Regeln gesetzt würden */
+counter-reset: none;
+
+/* Globale Werte */
+counter-reset: inherit;
+counter-reset: initial;
+counter-reset: unset;
+

+
+
Werte

+
+

+ 
{{cssxref("custom-ident", "<custom-ident>")}}

+ 
Der Name des Zählers, der zurückgesetzt werden soll. Dieser Bezeichner besteht aus einer Kombination von den schreibungsunabhängigen Buchstaben a bis z, den Zahlen 0 bis 9, Unterstrichen (_), und/oder Bindestrichen (-). Das erste Zeichen, das kein Bindestrich ist, muss ein Buchstabe sein (d. h. am Anfang darf keine Zahl stehen, auch nicht, wenn davor ein Bindestrich steht). Zudem sind zwei Bindestriche am Anfang des Bezeichners verboten. Er darf weder none, unset, initial oder inherit unabhängig von Groß- und Kleinschreibung sein.

+ 
{{cssxref("<integer>")}}

+ 
Der Wert, auf den der Zähler bei jedem Vorkommen des Elements zurückgesetzt werden soll. Falls nicht angegeben, wird 0 verwendet.

+ 
none

+ 
Ist ein Schlüsselwort, das angibt, dass keiner der Zähler zurückgesetzt wird. Es kann dazu verwendet werden, um counter-reset Werte zu verstecken, die in weniger spezifischen Regeln definiert wurden.

+

+
+
Es können beliebig viele Zähler zurückgesetzt werden, jeder durch ein Leerzeichen getrennt.

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
h1 {
+  counter-reset: chapter section 1 page;
+  /* Setzt den 'chapter' und 'page' Zähler auf 0
+     und den 'section' Zähler auf 1. */
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Lists', '#counter-reset', 'counter-reset')}}{{Spec2('CSS3 Lists')}}Keine Änderung
{{SpecName('CSS2.1', 'generate.html#propdef-counter-reset', 'counter-reset')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.counter-reset")}}
+
+
Siehe auch

+
+
    
+ 
  • CSS Zähler
    • 
+ 
  • {{Cssxref("counter-increment")}}
    • 
+ 
  • {{cssxref("@counter-style")}}
    • 
+

diff --git a/files/de/web/css/css_animations/css_animationen_nutzen/index.html b/files/de/web/css/css_animations/css_animationen_nutzen/index.html
new file mode 100644
index 0000000000..ea0dc4e7de
--- /dev/null
+++ b/files/de/web/css/css_animations/css_animationen_nutzen/index.html
@@ -0,0 +1,365 @@
+---
+title: CSS Animationen nutzen
+slug: Web/CSS/CSS_Animations/CSS_Animationen_nutzen
+translation_of: Web/CSS/CSS_Animations/Using_CSS_animations
+---
+
{{SeeCompatTable}}{{CSSRef}}

+
+
CSS Animationen ermöglichen animierte Übergänge von einem CSS Style-Konfiguration zur nächsten. Die Animationen bestehen aus zwei Komponenten: Einem Style, der die Animation beschreibt, sowie einer Menge von Keyframes, die Start, Ende und mögliche Zwischenpositionen der Animation festlegt.

+
+
Es gibt drei zentrale Vorteile von CSS-Animationen gegenüber traditionellen skriptgetriebenen Animationstechniken:

+
+
    
+ 
  1. Sie sind einfach zu nutzen für simple Animationen; man kann sie ohne Javascript-Kenntnisse erstellen. 
    2. 
+ 
  2. Die Animationen laufen performant, sogar unter mäßiger Systemauslastung. Im Gegensatz dazu fallen selbst simple Javascript-Animationen durch schlechte Performance auf. Die Engine kann einzelne Frames überspringen und kennt weitere Techniken, um die Ausführung so sauber wie möglich zu gestalten. 
    3. 
+ 
  3. Da der Browser die Animation kontrolliert, kann er selbstständig die Performance optimieren, zum Beispiel durch das Drosseln der Freqenz von Animationen in aktuell nicht sichtbaren Browser-Tabs.
    4. 
+

+
+
Konfigurieren der Animation

+
+
Um eine CSS-Animation zu erstellen, fügt man dem zu animierenden Element die {{ cssxref("animation") }}-Eigenschaft oder seine Sub-Eigenschaften zu. So lassen sich Timing und Dauer der Animation sowie weitere Details des Animationsablaufes bestimmen. Man legt damit nicht die eigentliche Darstellung der Animation fest, die mittels {{ cssxref("@keyframes") }} definiert wird. Siehe {{ anch("Definieren der Animationssequenz mittels Keyframes") }} weiter unten.

+
+
Die Sub-Eigenschaften der {{ cssxref("animation") }}-Eigenschaft sind:

+
+

+ 
{{ cssxref("animation-name") }}

+ 
Spezifiziert den Namen der {{ cssxref("@keyframes") }}-at-Regel, welche die einzelnen Keyframes beschreibt.

+ 
{{ cssxref("animation-duration") }}

+ 
Legt die Dauer der Animation für einen kompletten Durchgang fest.

+ 
{{ cssxref("animation-timing-function") }}

+ 
Konfiguriert das Timing der Animation. Konkret werden die Übergänge zwischen den einzelnen Keyframes mittels Beschleunigungskurven festgelegt.

+ 
{{ cssxref("animation-delay") }}

+ 
Setzt den Abstand zwischen dem Zeitpunkt, an dem die Animation vollständig geladen ist und dem Start der Animationssequenz.

+ 
{{ cssxref("animation-iteration-count") }}

+ 
Konfiguriert wie oft die Animation wiederholt wird; mittels infinite wird die Animation unendlich wiederholt.

+ 
{{ cssxref("animation-direction") }}

+ 
Legt fest, ob die Animation nach jedem Durchgang die Abspielrichtung wechselt oder zum Startpunkt zurückspringt und sich wiederholt. 

+ 
{{ cssxref("animation-fill-mode") }}

+ 
Legt fest, welche Styles vor und nach dem Ausführen der Animation auf das animierte Element angewendet werden.

+ 
{{ cssxref("animation-play-state") }}

+ 
Ermöglicht das Pausieren und Wiederaufnehmen einer Animationssequenz.

+ 

+ 
Definieren der Animationssequenz mittels Keyframes

+ 

+

+
+
Nachdem Sie den zeitlichen Ablauf der Animation festgelegt haben, müssen Sie die Erscheinung der Animation festlegen. Sie erreichen dies, indem Sie zwei oder mehr Keyframes mit Hilfe der {{ cssxref("@keyframes") }} at-Regel erstellen. Jeder Keyframe beschreibt den Darstellungszustand des animierten Elements zum gegebenen Zeitpunkt der Animationssequenz.

+
+
Da der zeitliche Ablauf der Animation im CSS-Style, welcher die Animation konfiguriert, festgelegt ist, verwenden Keyframes {{ cssxref("percentage") }} um den Zeitpunkt festzulegen, wann die Animationssequenz beginnen soll. 0% steht für den ersten Moment der Animationssequenz, wohingegen 100%  den letzten Zustand der Animation beschreibt. Weil diese beiden Keyframes so wichtg sind gibt es zwei Wörter für sie: from und to. Sie sind beide optional. Falls from/0% oder to/100% nicht definiert sind , startet oder stoppt der Browser die Animation gemäß der berechneten Werte aller Attribute.

+
+
Sie können optional zusätzliche Keyframes einfügen, die jeweils Zwischenschritte auf dem Weg vom Start- zum Endpunkt der Animation beschreiben.

+
+
Beispiele

+
+
Hinweis: Einige ältere Browser (vor 2017) benötigen unter Umständen Präfixe; die Live-Beispiele, welche durch einen Klick im Browser betrachtet werden können, beinhalten die -webkit Präfix-Syntax.

+
+
Einen Text übers Fenster gleiten lassen.

+
+
Dieses einfache Beispiel an einem {{ HTMLElement("p") }}-Element lässt einen Text von rechts über das Browserfenster gleiten.

+
+
Beachte, dass solche Animationen dafür sorgen können, dass die Seite breiter als das Browser-Fenster wird. Um dieses Problem zu umgehen, wird das zu animierende Element in einen Container gepackt. Der Container erhält anschließend die {{cssxref("overflow")}}:hidden Eigenschaft.

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}
+

+
+
In diesem Beispiel, bestimmt der Style für das {{ HTMLElement("p") }}-Element, dass durch den Einsatz von {{ cssxref("animation-duration") }} die Animation von Anfang bis Ende in drei Sekunden ausgeführt werden soll. Der Name der {{ cssxref("@keyframes") }} at-Regel, welche die Keyframes der Animation beschreibt, lautet "slidein".

+
+
Falls Sie weitere angepasste Styles auf das {{ HTMLElement("p") }}-Element anwenden wollen, die keine CSS-Animationen unterstützen, würden diese hier ebenfalls eingefügt werden. In diesem Falle wollen wir aber außer der Animation keine weiteren Styles festlegen.

+
+
Die Keyframes werden anhand der {{ cssxref("@keyframes") }} at-Regel festgelegt. In diesem Beispiel haben wir nur zwei Keyframes. Der erste tritt bei 0% (aufgrund des Aliases from) ein. Hier bestimmen wir einen linken Außenabstand des Elements von 100% (das heißt, am rechten äußeren Rand des umschließenden Elements). Darüberhinaus wird die Breite des Elements auf 300% gesetzt (oder drei Mal der Breite des umgebenden Elements). Dadurch wird der Header im ersten Frame der Animation außerhalb des rechten Randes des Browser-Fensters gezeichnet.

+
+
Der zweite (und letzte) Keyframe tritt bei 100% ein (aufgrund des Aliases to). Der linke Außenabstand wird auf 0% gesetzt und die Breite des Elements auf 100% aktualisiert. Dadurch beendet der Header seine Animation mit einer Ausrichtung am linken Rand des Inhaltsbereichs.

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>
+

+
+

+
Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+

+
+
{{EmbedLiveSample("Making_text_slide_across_the_browser_window","100%","250")}}

+
+
Hinzufügen eines weiteren Keyframes

+
+
Lassen Sie uns eine weitere Keyframe zur Animation des vorigen Beispiels hinzufügen. Sagen wir, wir wollen zunächst für eine Weile die Schriftgröße des Headers erhöhen, während er sich von rechts nach links bewegt. Am Ende soll sie wieder auf ihre ursprüngliche Größe schrumpfen. Das ist so einfach wie das Hinzufügen dieser Keyframe:

+
+
75% {
+  font-size: 300%;
+  margin-left: 25%;
+  width: 150%;
+}
+

+
+
Der vollständige Code sieht nun so aus:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+}
+
+@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  75% {
+    font-size: 300%;
+    margin-left: 25%;
+    width: 150%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>

+
+
Dies teilt dem Browser mit, dass nach 75% der Animationssequenz der linke Außenabstand des Headers bei 25% und die Breite bei 150% liegen sollte.

+
+

+
Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+

+
+
{{EmbedLiveSample("Adding_another_keyframe","100%","250")}}

+
+
Lass es sich wiederholen

+
+
Damit die Animation sich wiederholt, nutzen Sie die {{ cssxref("animation-iteration-count") }}-Eigenschaft, um festzulegen, wie oft sich die Animation wiederholen soll. In diesem Beispiel setzen wir sie auf infinite, damit sich die Animation unendlich oft wiederholt:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+}
+

+
+
Nach Hinzufügen zum bisherigen Code:

+
+
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>

+
+
{{EmbedLiveSample("Making_it_repeat","100%","250")}}

+
+
Lassen Sie es sich vor- und zurück bewegen

+
+
Die vorige Anpassung sorgte dafür, dass sich die Animation wiederholte. Aber es ist sehr eigenartig, dass die Animation jedes Mal zum Anfang zurückspringt, wenn sie sich wiederholt. Was wir wirklich wollen ist ein Vor- und Zurückbewegen über den Bildschirm. Dazu muss die {{ cssxref("animation-direction") }}-Eigenschaft auf alternate gesetzt werden:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+

+
+
Damit sieht der übrige Code folgendermaßen aus:

+
+
@keyframes slidein {
+  from {
+    margin-left: 100%;
+    width: 300%;
+  }
+
+  to {
+    margin-left: 0%;
+    width: 100%;
+  }
+}

+
+
<p>The Caterpillar and Alice looked at each other for some time in silence:
+at last the Caterpillar took the hookah out of its mouth, and addressed
+her in a languid, sleepy voice.</p>

+
+
{{EmbedLiveSample("Making_it_move_back_and_forth","100%","250")}}

+
+
Benutzen der Animation Kurzversion

+
+
Die {{cssxref("animation")}}-Kurzversion ist hilfreich, um Platz zu sparen. Zum Beispiel haben wir diese Regel während dieses Artikels genutzt:

+
+
p {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+

+
+
Sie könnte durch Folgendes ersetzt werden:

+
+
p {
+  animation: 3s infinite alternate slidein;
+}
+

+
+

+
Hinweis: Sie können weitere Beispiele auf der Referenzseite von {{cssxref("animation")}} finden.

+

+
+
Setzen mehrere Animationseigenschaftswerte

+
+
Die Langversion der CSS-Animation akzeptiert mehrere durch Komma getrennte Werte — eine Eigenschaft, die genutzt werden kann, um mehrere Animationen in einer einzigen Regel anzuwenden. Daneben lassen sich für die verschiedenen Animationen die Dauer, Anzahl der Wiederholungen usw. einzeln festlegen. Sehen Sie sich die folgenden kurzen Beispiele an, die die verschiedenen Kombinationen erklären:

+
+
In diesem ersten Beispiel wurden drei Animations-Namen gesetzt, aber nur eine Dauer und Anzahl der Wiederholungen gesetzt. In diesem Falle erhalten alle drei Animationen die gleiche Dauer und Anzahl der Wiederholungen:

+
+
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 3s;
+animation-iteration-count: 1;

+
+
In diesem zweiten Beispiel wurden drei Werte für drei Eigenschaften gesetzt. In diesem Falle entsprechen die Werte an der selben Position jeder Eigenschaft der jeweiligen Animation. So hat die fadeInOut Animation beispielsweise eine Dauer von 2.5s und wiederholt sich zwei Mal usw.

+
+
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s, 1s;
+animation-iteration-count: 2, 1, 5;

+
+
In diesem dritten Beispiel wurden drei Animationen festgelegt, aber nur zwei Dauern und Anzahl der Wiederholungen. In Fällen wie diesen, in denen es nicht genug Werte gibt, um jeder Animation ihren eigenen Wert zuzuweisen, wiederholt sich der Wertze-Zyklus von Anfang bis Ende. Beispielsweise erhält fadeInOut eine Dauer von 2.5s und moveLeft300px eine von 5s. Damit sind wir am Ende der verfügbaren Werte für die Dauer angelangt, also fangen wir von vorne an — bounce bekommt daher eine dauer von 2.5s zugewiesen. Die Anzahl der Wiederholungen (und alle weiteren Eigenschaften, die Sie so festlegen), werden auf die selbe Weise zugewiesen.

+
+
animation-name: fadeInOut, moveLeft300px, bounce;
+animation-duration: 2.5s, 5s;
+animation-iteration-count: 2, 1;

+
+
Benutzen von Animations-Ereignissen

+
+
Sie können zusätzliche Kontrolle über Animationen — sowie mehr nützliche Informationen — erhalten, indem sie Animations-Ereignisse nutzen. Diese Ereignisse werden durch das {{domxref("AnimationEvent")}}-Objekt repräsentiert. Es kann genutzt werden, um den Start, das Ende oder den Beginn einer Wiederholung zu erkennen. Jedes Ereignis beinhaltet die Zeit, an der es auftrat sowie den Namen der Animation, welche es getriggert hat.

+
+
Wir passen das Beispiel mit dem gleitenden Text an, um einige Informationen über jedes Animations-Ereignis bei Eintritt auszugeben, um zu sehen, wie sie funktionieren.

+
+
Hinzufügen des CSS

+
+
Wir beginnen mit dem Schreiben des CSS für die Animation. Diese Animation wird drei Sekunden dauern, “slidein” genannt werden, sich drei Mal wiederholen, und dabei jedes Mal die Richtung ändern. In den {{cssxref("@keyframes")}} wird die Breite under linke Außenabstand manipuliert, um das Element über den Bildschirm gleiten zu lassen.

+
+
.slidein {
+  animation-duration: 3s;
+  animation-name: slidein;
+  animation-iteration-count: 3;
+  animation-direction: alternate;
+}
+
+@keyframes slidein {
+  from {
+    margin-left:100%;
+    width:300%
+  }
+
+  to {
+    margin-left:0%;
+    width:100%;
+  }
+}

+
+
Hinzufügen der Animations-Ereignis-Listener

+
+
Wir verwenden JavaScript-Code, um auf alle drei möglichen Animationsereignisse zu aluschen. Der folgende Code konfiguriert unsere Event Listener. Wir rufen ihn auf, wenn das Dokument das erste Mal geladen wurde, um die Dinge einzurichten.

+
+
var element = document.getElementById("watchme");
+element.addEventListener("animationstart", listener, false);
+element.addEventListener("animationend", listener, false);
+element.addEventListener("animationiteration", listener, false);
+
+element.className = "slidein";
+

+
+
Dies ist ziemlich üblicher Code; Sie können mehr über die Details der Funktionsweise in der Dokumentation zu {{domxref("eventTarget.addEventListener()")}} erfahren. Als letztes setzt dieser Code die class des Elements, welches wir animieren wollen, auf “slidein”, um die Animation damit zu starten.

+
+
Warum? Weil das animationstart Ereignis mit dem Beginn der Animation gestartet wird. In unserem Falle vor Ausführung des Codes. Daher starten wir die Animation selber durch das Setzen von class auf dem Element zu dem Werte, welches die Animation steuert.

+
+
Empfangen von Ereignissen

+
+
Die Ereignisse werden an die untenstehende listener() Funktion durchgereicht.

+
+
function listener(event) {
+  var l = document.createElement("li");
+  switch(event.type) {
+    case "animationstart":
+      l.innerHTML = "Started: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationend":
+      l.innerHTML = "Ended: elapsed time is " + event.elapsedTime;
+      break;
+    case "animationiteration":
+      l.innerHTML = "New loop started at time " + event.elapsedTime;
+      break;
+  }
+  document.getElementById("output").appendChild(l);
+}
+

+
+
Auch dieser Code ist sehr einfach. Es schaut auf den {{domxref("event.type")}}, um zu bestimmen, welche Art von Animation eingetreten ist. Danach fügt es die entsprechende Notiz zur {{HTMLElement("ul")}} (ungeordneten Liste) hinzu, welche wir benutzen, um die Ereignisse mitzuschneiden.

+
+
Schlussendlich sieht die Ausgabe in etwa folgendermaßen aus:

+
+
    
+ 
  • Started: elapsed time is 0
    • 
+ 
  • New loop started at time 3.01200008392334
    • 
+ 
  • New loop started at time 6.00600004196167
    • 
+ 
  • Ended: elapsed time is 9.234000205993652
    • 
+

+
+
Beachten Sie, dass die Zeiten ziemlich nah, aber nicht exakt denen entsprechen, die wir in der Animation konfiguriert haben. Beachten Sie außerdem, dass bei der letzten Animation, das animationiteration Ereignis nicht gesetzt wurde. Stattdessen wurde ein animationend Ereignis gesendet.

+
+
Das HTML

+
+
Der Vollständigkeit halber ist hier das HTML, welches den Seiteninhalt darstellt und die Liste beinhaltet, welche vom Skript mit Informationen über empfangene Ereignisse gefüllt wird:

+
+
<h1 id="watchme">Watch me move</h1>
+<p>
+  This example shows how to use CSS animations to make <code>H1</code>
+  elements move across the page.
+</p>
+<p>
+  In addition, we output some text each time an animation event fires,
+  so you can see them in action.
+</p>
+<ul id="output">
+</ul>
+

+
+
Hier gibt es eine Live-Ausgabe:

+
+

+
Hinweis: Laden Sie die Seite neu, um die Animation zu sehen. Oder klicken Sie auf den CodePen-Knopf, um die Animation innerhalb der CodePen-Umgebung zu betrachten.

+

+
+
{{EmbedLiveSample('Using_animation_events', '600', '300')}}

+
+
Zum Weiterlesen

+
+
diff --git a/files/de/web/css/css_animations/index.html b/files/de/web/css/css_animations/index.html
new file mode 100644
index 0000000000..35df3692b4
--- /dev/null
+++ b/files/de/web/css/css_animations/index.html
@@ -0,0 +1,79 @@
+---
+title: CSS Animations
+slug: Web/CSS/CSS_Animations
+tags:
+  - CSS
+  - CSS Animations
+  - Experimental
+  - Overview
+  - Reference
+translation_of: Web/CSS/CSS_Animations
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS Animations is a module of CSS that defines how to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, their number of repetitions, and how they repeat.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("animation")}}
    • 
+ 
  • {{cssxref("animation")}}
    • 
+ 
  • {{cssxref("animation-delay")}}
    • 
+ 
  • {{cssxref("animation-direction")}}
    • 
+ 
  • {{cssxref("animation-duration")}}
    • 
+ 
  • {{cssxref("animation-fill-mode")}}
    • 
+ 
  • {{cssxref("animation-iteration-count")}}
    • 
+ 
  • {{cssxref("animation-name")}}
    • 
+ 
  • {{cssxref("animation-play-state")}}
    • 
+ 
  • {{cssxref("animation-timing-function")}}
    • 
+

+

+
+
CSS At-rules

+
+

+
    
+ 
  • {{cssxref("@keyframes")}}
    • 
+

+

+
+
Guides

+
+

+ 
Detecting CSS animation support

+ 
Describes a technique for detecting if the browser supports CSS animations.

+ 
Using CSS animations

+ 
Step-by-step tutorial about how to create animations using CSS, this article describes each relevant CSS property and at-rule and explains how they interact.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Animations') }}{{ Spec2('CSS3 Animations') }}Initial definition.

+
+
Browser compatibility

+
+{{Compat("css.properties.animation")}}
+
+
See also

+
+
    
+ 
  • Related to CSS Animations, CSS Transitions can trigger animations on user actions.
    • 
+

diff --git a/files/de/web/css/css_background_and_borders/border-image_generator/index.html b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
new file mode 100644
index 0000000000..ff2740480a
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/border-image_generator/index.html
@@ -0,0 +1,2626 @@
+---
+title: Border-image Generator
+slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator
+---
+
Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-image")}} Werte zu erzeugen.

+
+

+
Border Image Generator

+
+
HTML Content

+
+
    <div id="container">
+
+        <div id="gallery">
+            <div id="image-gallery">
+                <img class="image" src="https://mdn.mozillademos.org/files/6007/border-image-1.png" data-stateID="border1"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6009/border-image-2.png" data-stateID="border2"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6011/border-image-3.png" data-stateID="border3"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6013/border-image-4.png" data-stateID="border4"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6015/border-image-5.png" data-stateID="border5"/>
+                <img class="image" src="https://mdn.mozillademos.org/files/6017/border-image-6.svg" data-stateID="border6"/>
+            </div>
+        </div>
+
+        <div id="load-actions" class="group section">
+            <div id="toggle-gallery" data-action="hide"> </div>
+            <div id="load-image" class="button"> Upload image </div>
+            <input id="remote-url" type="text" placeholder="Load an image from URL"/>
+            <div id="load-remote" class="button"> </div>
+        </div>
+
+        <div id="general-controls" class="group section">
+            <div class="name"> Control Box </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">scale</div>
+                <div class="ui-input-slider" data-topic="scale"
+                    data-unit="%" data-max="300" data-sensivity="10">
+                </div>
+            </div>
+            <div class="separator"></div>
+            <div class="property">
+                <div class="name">draggable</div>
+                <div class="ui-checkbox" data-topic='drag-subject'></div>
+            </div>
+            <div class="property right">
+                <div class="name">section height</div>
+                <div class="ui-input-slider" data-topic="preview-area-height"
+                    data-min="400" data-max="1000">
+                </div>
+            </div>
+        </div>
+
+        <div id="preview_section" class="group section">
+            <div id="subject">
+                <div class="guideline" data-axis="Y" data-topic="slice-top"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-right"></div>
+                <div class="guideline" data-axis="Y" data-topic="slice-bottom"></div>
+                <div class="guideline" data-axis="X" data-topic="slice-left"></div>
+            </div>
+            <div id="preview"> </div>
+        </div>
+
+        <!-- controls -->
+        <div id="controls" class="group section">
+
+            <!-- border-image-slice -->
+            <div id="border-slice-control" class="category">
+                <div class="title"> border-image-slice </div>
+                <div class="property">
+                    <div class="name">fill</div>
+                    <div class="ui-checkbox" data-topic='slice-fill'></div>
+                </div>
+            </div>
+
+            <!-- border-image-width -->
+            <div id="border-width-control" class="category">
+                <div class="title"> border-image-width </div>
+            </div>
+
+            <!-- border-image-outset -->
+            <div id="border-outset-control" class="category">
+                <div class="title"> border-image-outset </div>
+            </div>
+
+            <!-- other-settings -->
+            <div id="aditional-properties" class="category">
+                <div class="title"> aditional-properties </div>
+                <div class="property">
+                    <div class="name"> repeat-x </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-X" data-selected="2">
+                        <div data-value="0">repeat</div>
+                        <div data-value="0">stretch</div>
+                        <div data-value="0">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="name"> repeat-y </div>
+                    <div class="ui-dropdown border-repeat" data-topic="image-repeat-Y" data-selected="2">
+                        <div data-value="1">repeat</div>
+                        <div data-value="1">stretch</div>
+                        <div data-value="1">round</div>
+                    </div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="font-size" data-info="em size"
+                        data-unit="px" data-value="12" data-sensivity="3">
+                    </div>
+                </div>
+
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-width" data-info="width"
+                         data-unit=" px" data-min="10" data-max="10000" data-sensivity="3"></div>
+                </div>
+                <div class="property">
+                    <div class="ui-input-slider" data-topic="preview-height" data-info="height"
+                        data-unit=" px" data-min="10" data-max="10000" data-sensivity="3">
+                    </div>
+                </div>
+            </div>
+
+
+            <div id="output" class="category">
+                <div class="title"> CSS Code </div>
+                <div class="css-property">
+                    <span class="name"> border-image-slice: </span>
+                    <span id="out-border-slice" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-width: </span>
+                    <span id="out-border-width" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-outset: </span>
+                    <span id="out-border-outset" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-repeat: </span>
+                    <span id="out-border-repeat" class="value"> </span>
+                </div>
+                <div class="css-property">
+                    <span class="name"> border-image-source: </span>
+                    <span id="out-border-source" class="value">  </span>
+                </div>
+            </div>
+
+        </div>
+    </div>

+
+
CSS Content

+
+
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI DropDown
+ */
+
+/* Dropdown */
+
+.ui-dropdown {
+	height: 2em;
+	width: 120px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 12px;
+
+	background-image: url("https://mdn.mozillademos.org/files/6037/drop_arrow_icon.png");
+	background-position: right center;
+	background-repeat: no-repeat;
+	background-color: #359740;
+
+	position: relative;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-dropdown:hover {
+	cursor: pointer;
+	background-color: #208B20;
+}
+
+/* Dropdown Select Button */
+
+.ui-dropdown-select {
+	height: inherit;
+	padding: 0 0.75em;
+	color: #FFF;
+	line-height: 2em;
+}
+
+/* Dropdown List */
+
+.ui-dropdown-list {
+	width: 100%;
+	height: 150px;
+	max-height: 150px;
+	margin: 0;
+	padding: 0 0.3em;
+
+	border: 3px solid #3490D2;
+	border-color: #208B20;
+	background: #666;
+	background-color: #EEF1F5;
+	color: #000;
+
+	position: absolute;
+	top: 2em;
+	left: 0;
+	z-index: 100;
+
+	overflow: hidden;
+	transition: all 0.3s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list:hover {
+	overflow: auto;
+}
+
+.ui-dropdown-list[data-hidden='true'] {
+	height: 0 !important;
+	opacity: 0;
+	visibility: hidden;
+}
+
+.ui-dropdown[data-position='left'] .ui-dropdown-list {
+	left: -100%;
+	top: 0;
+}
+
+.ui-dropdown[data-position='right'] .ui-dropdown-list {
+	left: 100%;
+	top: 0;
+}
+
+.ui-dropdown-list > div {
+	width: 100%;
+	height: 1.6em;
+	margin: 0.3em 0;
+	padding: 0.3em;
+	line-height: 1em;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-dropdown-list > div:hover {
+	background: #3490D2;
+	color:#FFF;
+	border-radius: 2px;
+	cursor: pointer;
+}
+
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 2px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*************************************************************************************/
+/*************************************************************************************/
+
+/*
+ * BORDER IMAGE GENERATOR TOOL
+ */
+
+body {
+	width: 100%;
+	margin: 0 auto;
+	padding: 0 0 20px 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	/*background: url("https://mdn.mozillademos.org/files/6025/grain.png");*/
+	border: 1px solid #EEE;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+body[data-move='X'] {
+	cursor: w-resize !important;
+}
+
+body[data-move='Y'] {
+	cursor: s-resize !important;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+[data-draggable='true']:hover {
+	cursor: move;
+}
+
+[data-draggable='true']:hover > * {
+	cursor: default;
+}
+
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/*
+ * Border Image Picker
+ */
+
+#gallery {
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#image-gallery {
+	width: 600px;
+	height: 100px;
+	margin: 0 auto;
+	transition: margin 0.4s;
+}
+
+#image-gallery .image {
+	height: 80px;
+	float: left;
+	margin: 10px;
+	opacity: 0.5;
+	background-color: #FFF;
+	box-shadow: 0px 0px 3px 1px #BABABA;
+}
+
+#image-gallery .image[selected="true"] {
+	box-shadow: 0px 0px 3px 1px #3BBA52;
+	opacity: 1;
+}
+
+#image-gallery .image:hover {
+	cursor: pointer;
+	box-shadow: 0px 0px 3px 1px #30ACE5;
+	opacity: 1;
+}
+
+#image-gallery[data-collapsed='true'] {
+	margin-top: -100px;
+}
+
+/* Load Menu */
+
+#load-actions {
+	margin: 10px 0;
+}
+
+#toggle-gallery {
+	width: 30px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+	background-repeat: no-repeat;
+	background-position: top 4px center;
+	background-color: #888888 !important;
+
+	border-radius: 2px;
+	float: left;
+}
+
+#toggle-gallery:hover {
+	cursor: pointer;
+}
+
+#toggle-gallery[data-action='show'] {
+	background-image: url('https://mdn.mozillademos.org/files/6001/arrow-down-white.png');
+	background-color: #888888 !important;
+}
+
+#toggle-gallery[data-action='hide'] {
+	background-image: url('https://mdn.mozillademos.org/files/6005/arrow-up-white.png');
+}
+
+.button {
+	width: 100px;
+	height: 25px;
+	margin: 10px;
+	color: #FFF;
+	text-align: center;
+	font-size: 12px;
+	line-height: 25px;
+	background-color: #379B4A;
+	border-radius: 2px;
+	float: left;
+}
+
+.button:hover {
+	cursor: pointer;
+	background-color: #3380C4;
+}
+
+#load-image {
+	float: left;
+}
+
+#load-remote {
+	width: 30px;
+	background-image: url('https://mdn.mozillademos.org/files/6003/arrow-right-white.png');
+	background-repeat: no-repeat;
+	background-position: center center;
+}
+
+#remote-url {
+	width: 200px;
+	height: 23px;
+	margin: 10px;
+	padding: 0 5px;
+	border: 1px solid #379B4A;
+	border-radius: 2px;
+	float: left;
+
+	transition: width 0.5s;
+}
+
+#remote-url:focus {
+	box-shadow: 0px 0px 3px -1px #379B4A; /*#68ACE8; */
+	border-color: rgba(55, 155, 74, 0.5);
+	width: 450px;
+}
+
+/*
+ * Visible Area
+ */
+
+#preview_section {
+	position: relative;
+	min-height: 400px;
+}
+
+/* Image Control */
+
+#subject {
+	width: 300px;
+	height: 300px;
+	background-repeat: no-repeat;
+	background-size: 100%;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+
+	position: absolute;
+	z-index: 10;
+	top: 15%;
+	left: 10%;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition-property: width, height;
+	transition-duration: 0.1s;
+}
+
+#subject .guideline {
+	background-color: rgba(255, 255, 255, 0.7);
+	border: 1px solid rgba(0, 0, 0, 0.3);
+	position: absolute;
+}
+
+#subject .guideline:hover {
+	background-color: #F00;
+}
+
+#subject .guideline[data-active] {
+	background-color: #F00;
+	z-index: 10;
+}
+
+#subject .guideline[data-axis='X'] {
+	width: 1px;
+	height: 100%;
+	top: -1px;
+}
+
+#subject .guideline[data-axis='Y'] {
+	width: 100%;
+	height: 1px;
+	left: -1px;
+}
+
+#subject .guideline[data-axis='X']:hover {
+	cursor: w-resize;
+}
+
+#subject .guideline[data-axis='Y']:hover {
+	cursor: s-resize;
+}
+
+
+#subject .relative {
+	position: relative;
+	font-size: 12px;
+}
+
+#subject .tooltip, #subject .tooltip2 {
+	width: 40px;
+	height: 20px;
+	line-height: 20px;
+	font-size: 12px;
+	text-align: center;
+
+	position: absolute;
+	opacity: 0.5;
+	transition: opacity 0.25s;
+}
+
+#subject .tooltip {
+	background: #EEE;
+	border-radius: 2px;
+	border: 1px solid #CCC;
+}
+
+#subject .tooltip2{
+	color: #555;
+}
+
+#subject [data-active] > * {
+	opacity: 1;
+}
+
+#subject .tooltip[data-info='top'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip[data-info='right'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+#subject .tooltip[data-info='bottom'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip[data-info='left'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='top'] {
+	top: -10px;
+	left: -50px;
+}
+
+#subject .tooltip2[data-info='right'] {
+	top: -30px;
+	right: -20px;
+}
+
+#subject .tooltip2[data-info='bottom'] {
+	top: -10px;
+	right: -50px;
+}
+
+#subject .tooltip2[data-info='left'] {
+	bottom: -30px;
+	right: -20px;
+}
+
+/* Preview */
+
+#preview {
+	width: 30%;
+	height: 50%;
+	background-color: #FFF;
+	text-align: center;
+	overflow: hidden;
+	position: absolute;
+	z-index: 10;
+
+	left: 60%;
+	top: 15%;
+
+	border-radius: 2px;
+	border-image-width: 20px;
+	border-image-repeat: round;
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#preview .resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url("https://mdn.mozillademos.org/files/6027/resize.png") center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+#preview .resize-handle:hover {
+	cursor: nw-resize;
+}
+
+
+/*
+ * General controls MENU
+ */
+
+#general-controls {
+	padding: 10px 30px;
+	background-color: #FFF;
+	opacity: 0.95;
+	color: #888;
+	/*border-radius: 2px;*/
+	box-shadow: 0 0 3px 0 #BABABA;
+}
+
+#general-controls .property {
+	width: 130px;
+	float: left;
+}
+
+#general-controls .name {
+	height: 20px;
+	margin: 0 10px 0 0;
+	line-height: 100%;
+	text-align: right;
+	float: left;
+}
+
+#general-controls .right {
+	width: 200px;
+	float: right;
+}
+
+#general-controls .ui-checkbox label {
+	height: 10px;
+}
+
+#general-controls .separator {
+	height: 40px;
+	width: 1px;
+	margin: -10px 15px;
+	background-color: #EEE;
+	float: left;
+}
+
+/*
+ * Controls
+ */
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+#controls .category {
+	height: 190px;
+	min-width: 260px;
+	margin: 10px;
+	padding: 10px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	float: left;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+@media (min-width: 880px) {
+	#controls .category {
+		width: 30%;
+		margin-left: 1.66%;
+		margin-right: 1.66%;
+	}
+}
+
+@media (max-width: 879px) {
+	#controls .category {
+		width: 37%;
+		margin-left: 6.5%;
+		margin-right: 6.5%;
+	}
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#controls .category:hover .title {
+	color: #777;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 2px;
+}
+
+
+/* property */
+
+#controls .property {
+	width: 250px;
+	height: 20px;
+	margin: 5px auto;
+}
+
+#controls .property .ui-input-slider {
+	margin: 0;
+	float: left;
+}
+
+#controls .property .ui-input-slider-info {
+	width: 60px;
+}
+
+#controls .property .ui-input-slider-left {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .ui-input-slider-right {
+	transition: opacity 0.15s;
+    opacity: 0;
+}
+
+#controls .property .name {
+	width: 60px;
+	height: 20px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	line-height: 100%;
+	float: left;
+}
+
+#controls .property .config {
+	width: 20px;
+	height: 20px;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/6021/config.png") center center no-repeat;
+	opacity: 0.5;
+}
+
+#controls .property .config:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-right {
+    opacity: 1;
+}
+
+#controls .ui-input-slider:hover .ui-input-slider-left {
+    opacity: 1;
+}
+
+#controls .property .ui-dropdown {
+	margin: 0 10px;
+	float: left;
+}
+
+
+#controls .property .ui-checkbox {
+	margin: 0 0 0 16px;
+	float: left;
+}
+
+#controls .property .ui-checkbox label {
+	height: 0.85em;
+	width: 10px;
+}
+
+/* dropdowns */
+#controls .ui-dropdown {
+	width: 50px;
+	height: 1.7em;
+	border-radius: 2px;
+}
+
+#controls .ui-dropdown-select {
+	line-height: 1.6em;
+}
+
+#controls .ui-dropdown-list {
+	top: 20px;
+}
+
+#controls .ui-dropdown-list {
+	border-width: 1px;
+	text-align: center;
+}
+
+#controls .ui-dropdown-list:hover {
+	overflow: hidden;
+}
+
+#controls .border-repeat {
+	margin: 0 0 0 16px !important;
+	width: 80px;
+}
+
+#controls .border-repeat .ui-dropdown-list {
+	height: 6.2em;
+	border-width: 1px;
+	text-align: center;
+}
+
+/* border-image-slice */
+
+
+#border-slice-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+/* border-image-width */
+
+#border-width-control .ui-dropdown-list {
+	height: 6.2em;
+}
+
+/* border-image-outset */
+
+#border-outset-control .ui-dropdown-list {
+	height: 4.3em;
+}
+
+#aditional-properties .property {
+	width: 200px;
+}
+
+#aditional-properties .ui-input-slider > input {
+	width: 80px !important;
+}
+
+/* unit settings panel */
+
+#unit-settings {
+	padding: 10px;
+	position: absolute;
+
+	background: #FFF;
+
+	font-size: 12px;
+	border-radius: 3px;
+	border: 1px solid #CCC;
+	text-align: center;
+	color: #555;
+
+	position: absolute;
+	z-index: 1000;
+
+	box-shadow: 0 0 3px 0 #BABABA;
+	transition: all 0.25s;
+}
+
+#unit-settings .title {
+	width: 100%;
+	margin: -5px auto 0;
+
+	color: #666;
+	font-size: 14px;
+	font-weight: bold;
+	line-height: 25px;
+	border-bottom: 1px solid #E5E5E5;
+}
+
+#unit-settings .ui-input-slider {
+	margin: 10px 0 0 0;
+}
+
+#unit-settings .ui-input-slider-info {
+	width: 50px;
+	line-height: 1.5em;
+}
+
+#unit-settings input {
+	font-size: 12px;
+	width: 40px !important;
+}
+
+#unit-settings .close {
+	width: 16px;
+	height: 16px;
+	background: url('https://mdn.mozillademos.org/files/6019/close.png') no-repeat center center;
+	background-size: 75%;
+
+	position: absolute;
+	top: 4px;
+	right: 4px;
+	opacity: 0.5;
+}
+
+#unit-settings .close:hover {
+	cursor: pointer;
+	opacity: 1;
+}
+
+#unit-settings[data-active='true'] {
+	opacity: 1;
+}
+
+#unit-settings[data-active='false'] {
+	opacity: 0;
+	top: -100px !important;
+}
+
+/*
+ * CSS Output Code
+ */
+
+#output {
+	padding: 10px;
+	border: 2px dashed #888 !important;
+	box-shadow: none !important;
+	border-radius: 3px;
+	overflow: hidden;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+}
+
+
+@media (min-width: 880px) {
+	#output {
+		width: 63.33% !important;
+	}
+}
+
+@media (max-width: 879px) {
+	#output {
+		width: 87% !important;
+	}
+}
+
+
+#output .title {
+	width: 100%;
+	height: 30px;
+	margin: 0 0 10px 0;
+	line-height: 25px;
+
+	text-align: center;
+	color: #AAA;
+}
+
+#output .css-property {
+	width: 100%;
+	margin: 0;
+	color: #555;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+#output .css-property .name {
+	width: 30%;
+	font-weight: bold;
+	text-align: right;
+	float: left;
+}
+
+#output .css-property .value {
+	width: 65%;
+	padding: 0 2.5%;
+	word-break: break-all;
+	float: left;
+}
+
+

+
+
JavaScript Content

+
+
'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+/**
+ * UI-DropDown Select
+ */
+
+var DropDownManager = (function DropdownManager() {
+
+	var subscribers = {};
+	var dropdowns = [];
+	var active = null;
+
+	var visbility = ["hidden", "visible"];
+
+
+	var DropDown = function DropDown(node) {
+		var topic = node.getAttribute('data-topic');
+		var label = node.getAttribute('data-label');
+		var selected = node.getAttribute('data-selected') | 0;
+
+		var select = document.createElement('div');
+		var list = document.createElement('div');
+		var uval = 0;
+		var option = null;
+		var option_value = null;
+
+		list.className = 'ui-dropdown-list';
+		select.className = 'ui-dropdown-select';
+
+		while (node.firstElementChild !== null) {
+			option = node.firstElementChild;
+			option_value = option.getAttribute('data-value');
+
+			if (option_value === null)
+				option.setAttribute('data-value', uval);
+
+			list.appendChild(node.firstElementChild);
+			uval++;
+		}
+
+		node.appendChild(select);
+		node.appendChild(list);
+
+		select.onclick = this.toggle.bind(this);
+		list.onclick = this.updateValue.bind(this);
+		document.addEventListener('click', clickOut);
+
+		this.state = 0;
+		this.time = 0;
+		this.dropmenu = list;
+		this.select = select;
+		this.toggle(false);
+		this.value = {};
+		this.topic = topic;
+
+		if (label)
+			select.textContent = label;
+		else
+			this.setNodeValue(list.children[selected]);
+
+		dropdowns[topic] = this;
+
+	};
+
+	DropDown.prototype.toggle = function toggle(state) {
+		if (typeof(state) === 'boolean')
+			this.state = state === false ? 0 : 1;
+		else
+			this.state = 1 ^ this.state;
+
+		if (active !== this) {
+			if (active)
+				active.toggle(false);
+			active = this;
+		}
+
+		if (this.state === 0)
+			this.dropmenu.setAttribute('data-hidden', 'true');
+		else
+			this.dropmenu.removeAttribute('data-hidden');
+
+	};
+
+	var clickOut = function clickOut(e) {
+		if (active.state === 0 ||
+			e.target === active.dropmenu ||
+			e.target === active.select)
+			return;
+
+		active.toggle(false);
+	};
+
+	DropDown.prototype.updateValue = function updateValue(e) {
+
+		if (Date.now() - this.time < 500)
+			return;
+
+		if (e.target.className !== "ui-dropdown-list") {
+			this.setNodeValue(e.target);
+			this.toggle(false);
+		}
+
+		this.time = Date.now();
+	};
+
+	DropDown.prototype.setNodeValue = function setNodeValue(node) {
+		this.value['name'] = node.textContent;
+		this.value['value'] = node.getAttribute('data-value');
+
+		this.select.textContent = node.textContent;
+		this.select.setAttribute('data-value', this.value['value']);
+
+		notify.call(this);
+	};
+
+	var createDropDown = function createDropDown(topic, options) {
+
+		var dropdown = document.createElement('div');
+		dropdown.setAttribute('data-topic', topic);
+		dropdown.className = 'ui-dropdown';
+
+		for (var i in options) {
+			var x = document.createElement('div');
+			x.setAttribute('data-value', i);
+			x.textContent = options[i];
+			dropdown.appendChild(x);
+		}
+
+		new DropDown(dropdown);
+
+		return dropdown;
+	};
+
+	var setValue = function setValue(topic, index) {
+		if (dropdowns[topic] === undefined ||
+			index >= dropdowns[topic].dropmenu.children.length)
+			return;
+
+		dropdowns[topic].setNodeValue(dropdowns[topic].dropmenu.children[index]);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		var index = subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	};
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-dropdown');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new DropDown(elem[i]);
+
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		createDropDown : createDropDown
+	};
+
+})();
+
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	};
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	};
+
+	var setValue = function setValue(topic, value) {
+		var obj = buttons[topic];
+		if (obj === undefined)
+			return;
+
+		obj.checkbox.checked = value;
+		notify.call(obj);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	};
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	};
+
+})();
+
+window.addEventListener("load", function() {
+	BorderImage.init();
+});
+
+var BorderImage = (function BorderImage() {
+
+	var getElemById = document.getElementById.bind(document);
+
+	var subject;
+	var preview;
+	var guidelines = [];
+	var positions = ['top', 'right', 'bottom', 'left'];
+
+	var makeDraggable = function makeDraggable(elem) {
+
+		var offsetTop;
+		var offsetLeft;
+
+		elem.setAttribute('data-draggable', 'true');
+
+		var dragStart = function dragStart(e) {
+			if (e.target.getAttribute('data-draggable') !== 'true' ||
+				e.target !== elem || e.button !== 0)
+				return;
+
+			offsetLeft = e.clientX - elem.offsetLeft;
+			offsetTop = e.clientY - elem.offsetTop;
+
+			document.addEventListener('mousemove', mouseDrag);
+			document.addEventListener('mouseup', dragEnd);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			document.removeEventListener('mouseup', dragEnd);
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+
+			elem.style.left = e.clientX - offsetLeft + 'px';
+			elem.style.top = e.clientY - offsetTop + 'px';
+		};
+
+		elem.addEventListener('mousedown', dragStart, false);
+	};
+
+	var PreviewControl = function PreviewControl() {
+
+		var dragging = false;
+		var valueX = null;
+		var valueY = null;
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			valueX = e.clientX - preview.clientWidth;
+			valueY = e.clientY - preview.clientHeight;
+			dragging = true;
+
+			document.addEventListener('mousemove', mouseDrag);
+		};
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0 || dragging === false)
+				return;
+
+			document.removeEventListener('mousemove', mouseDrag);
+			dragging = false;
+		};
+
+		var mouseDrag = function mouseDrag(e) {
+			InputSliderManager.setValue('preview-width', e.clientX - valueX);
+			InputSliderManager.setValue('preview-height', e.clientY - valueY);
+		};
+
+		var init = function init() {
+
+			makeDraggable(preview);
+			makeDraggable(subject);
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			handle.addEventListener('mousedown', dragStart);
+			document.addEventListener('mouseup', dragEnd);
+
+			preview.appendChild(handle);
+
+		};
+
+		return {
+			init: init
+		};
+
+	}();
+
+	var ImageReader = (function ImageReader() {
+
+		var fReader = new FileReader();
+		var browse = document.createElement('input');
+
+		var loadImage = function loadImage(e) {
+			if (browse.files.length === 0)
+				return;
+
+			var file = browse.files[0];
+
+			if (file.type.slice(0, 5) !== 'image')
+				return;
+
+			fReader.readAsDataURL(file);
+
+			return false;
+		};
+
+		fReader.onload = function(e) {
+			ImageControl.loadRemoteImage(e.target.result);
+		};
+
+		var load = function load() {
+			browse.click();
+		};
+
+		browse.setAttribute('type', 'file');
+		browse.style.display = 'none';
+		browse.onchange = loadImage;
+
+		return {
+			load: load
+		};
+
+	})();
+
+	var ImageControl = (function ImageControl() {
+
+		var scale = 0.5;
+		var imgSource = new Image();
+		var imgState = null;
+		var selected = null;
+
+
+		var topics = ['slice', 'width', 'outset'];
+		var properties = {};
+		properties['border1'] = {
+			fill			: false,
+
+			slice_values	: [27, 27, 27, 27],
+			width_values	: [20, 20, 20, 20],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [1, 1],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border2'] = {
+			fill			: false,
+
+			slice_values	: [33, 33, 33, 33],
+			width_values	: [1.5, 1.5, 1.5, 1.5],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [1, 1, 1, 1],
+			width_units		: [2, 2, 2, 2],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border3'] = {
+			fill			: true,
+
+			slice_values	: [15, 15, 15, 15],
+			width_values	: [10, 10, 10, 10],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border4'] = {
+			fill			: false,
+
+			slice_values	: [13, 13, 13, 13],
+			width_values	: [13, 13, 13, 13],
+			outset_values	: [13, 13, 13, 13],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400
+		};
+
+		properties['border5'] = {
+			fill			: false,
+
+			slice_values	: [0, 12, 0, 12],
+			width_values	: [0, 12, 0, 12],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [0, 0],
+			size			: [300, 200],
+			preview_area	: 400,
+		};
+
+		properties['border6'] = {
+			fill			: false,
+
+			slice_values	: [42, 42, 42, 42],
+			width_values	: [42, 42, 42, 42],
+			outset_values	: [0, 0, 0, 0],
+
+			slice_units		: [0, 0, 0, 0],
+			width_units		: [0, 0, 0, 0],
+			outset_units	: [0, 0, 0, 0],
+
+			repeat			: [2, 2],
+			size			: [350, 350],
+			preview_area	: 500,
+		};
+
+
+		var loadLocalImage = function loadLocalImage(source) {
+			var location = "images/" + source;
+			imgSource.src = location;
+		};
+
+		var loadRemoteImage = function loadRemoteImage(source) {
+			imgSource.src = source;
+			if (selected)
+				selected.removeAttribute('selected');
+			Tool.setOutputCSS('source', 'url("' + source + '")');
+		};
+
+		var pickImage = function pickImage(e) {
+			if (e.target.className === 'image') {
+				selected = e.target;
+				selected.setAttribute('selected', 'true');
+				loadRemoteImage(e.target.src);
+				imgState = e.target.getAttribute('data-stateID');
+			}
+		};
+
+		var loadImageState = function loadImageState(stateID) {
+			if (properties[stateID] === undefined)
+				return;
+
+			var prop = properties[stateID];
+			var topic;
+			var unit_array;
+			var value_array;
+
+			for (var i in topics) {
+				for (var j=0; j<4; j++) {
+					topic = topics[i] + '-' + positions[j];
+					unit_array = topics[i] + '_units';
+					value_array = topics[i] + '_values';
+					InputSliderManager.setValue(topic, prop[value_array][j]);
+					DropDownManager.setValue(topic, prop[unit_array][j]);
+				}
+			}
+
+			ButtonManager.setValue('slice-fill', prop['fill']);
+			DropDownManager.setValue('image-repeat-X', prop['repeat'][0]);
+			DropDownManager.setValue('image-repeat-Y', prop['repeat'][1]);
+			InputSliderManager.setValue('preview-width', prop['size'][0]);
+			InputSliderManager.setValue('preview-height', prop['size'][1]);
+			InputSliderManager.setValue('preview-area-height', prop['preview_area']);
+		};
+
+		var update = function update() {
+			scale =  Math.min(300, (30000 / this.width) | 0);
+			setScale(scale);
+			InputSliderManager.setValue('scale', scale, false);
+
+			subject.style.backgroundImage = 'url("' + this.src + '")';
+			preview.style.borderImageSource = 'url("' + this.src + '")';
+
+			guidelines['slice-top'].setMax(this.height);
+			guidelines['slice-right'].setMax(this.width);
+			guidelines['slice-bottom'].setMax(this.height);
+			guidelines['slice-left'].setMax(this.width);
+
+			if (imgState)
+				loadImageState(imgState);
+		};
+
+		var setScale = function setScale(value) {
+			scale = value;
+			var w = imgSource.width * scale / 100 | 0;
+			var h = imgSource.height * scale / 100 | 0;
+			subject.style.width = w + 'px';
+			subject.style.height = h + 'px';
+
+			for (var i = 0; i < positions.length; i++)
+				guidelines['slice-' + positions[i]].updateGuidelinePos();
+		};
+
+		var getScale = function getScale() {
+			return scale/100;
+		};
+
+		var toggleGallery = function toggleGallery() {
+			var gallery = getElemById('image-gallery');
+			var button  = getElemById('toggle-gallery');
+			var state = 1;
+			button.addEventListener('click', function() {
+				state = 1 ^ state;
+				if (state === 0) {
+					gallery.setAttribute('data-collapsed', 'true');
+					button.setAttribute('data-action', 'show');
+				}
+				else {
+					gallery.removeAttribute('data-collapsed');
+					button.setAttribute('data-action', 'hide');
+				}
+			});
+		};
+
+		var init = function init() {
+			var gallery = getElemById('image-gallery');
+			var browse = getElemById('load-image');
+			var remote = getElemById('remote-url');
+			var load_remote = getElemById('load-remote');
+
+			remote.addEventListener('change', function(){
+				loadRemoteImage(this.value);
+			});
+
+			load_remote.addEventListener('click', function(){
+				loadRemoteImage(remote.value);
+			});
+
+			browse.addEventListener('click', ImageReader.load);
+			gallery.addEventListener('click', pickImage);
+			imgSource.addEventListener('load', update);
+
+			InputSliderManager.subscribe('scale', setScale);
+			InputSliderManager.setValue('scale', scale);
+			imgState = 'border1';
+			loadRemoteImage('https://mdn.mozillademos.org/files/6007/border-image-1.png');
+			toggleGallery();
+		};
+
+		return {
+			init: init,
+			getScale : getScale,
+			loadRemoteImage: loadRemoteImage
+		};
+
+	})();
+
+	var GuideLine = function GuideLine(node) {
+		var topic = node.getAttribute('data-topic');
+		var axis = node.getAttribute('data-axis');
+
+		this.node = node;
+		this.topic = topic;
+		this.axis = axis;
+		this.info = topic.split('-')[1];
+
+		this.position = 0;
+		this.value = 0;
+		this.unit = 0;
+		this.max = 0;
+		this.pos = positions.indexOf(this.info);
+
+		guidelines[topic] = this;
+
+		var relative_container = document.createElement('div');
+		var tooltip = document.createElement('div');
+		var tooltip2 = document.createElement('div');
+
+		tooltip.className = 'tooltip';
+		tooltip.setAttribute('data-info', this.info);
+
+		tooltip2.className = 'tooltip2';
+		tooltip2.textContent = this.info;
+		tooltip2.setAttribute('data-info', this.info);
+
+		this.tooltip = tooltip;
+
+		relative_container.appendChild(tooltip);
+		relative_container.appendChild(tooltip2);
+		node.appendChild(relative_container);
+
+		var startX = 0;
+		var startY = 0;
+		var start = 0;
+
+		var startDrag = function startDrag(e) {
+			startX = e.clientX;
+			startY = e.clientY;
+			start = guidelines[topic].position;
+			document.body.setAttribute('data-move', axis);
+			relative_container.setAttribute('data-active', '');
+			node.setAttribute('data-active', '');
+
+			document.addEventListener('mousemove', updateGuideline);
+			document.addEventListener('mouseup', endDrag);
+		};
+
+		var endDrag = function endDrag() {
+			document.body.removeAttribute('data-move');
+			relative_container.removeAttribute('data-active');
+			node.removeAttribute('data-active');
+
+			document.removeEventListener('mousemove', updateGuideline);
+		};
+
+		var updateGuideline = function updateGuideline(e) {
+			var value;
+			if (topic === 'slice-top')
+				value = e.clientY - startY + start;
+
+			if (topic === 'slice-right')
+				value = startX - e.clientX + start;
+
+			if (topic === 'slice-bottom')
+				value = startY - e.clientY + start;
+
+			if (topic === 'slice-left')
+				value = e.clientX - startX + start;
+
+			if (this.unit === 0)
+				InputSliderManager.setValue(topic, value * 1 / ImageControl.getScale() | 0);
+			else {
+				InputSliderManager.setValue(topic, (value * 100 / (this.max * ImageControl.getScale())) | 0);
+			}
+
+		}.bind(this);
+
+		node.addEventListener("mousedown", startDrag);
+
+		InputSliderManager.subscribe(topic, this.setPosition.bind(this));
+		InputSliderManager.setValue(topic, this.position);
+	};
+
+
+	GuideLine.prototype.updateGuidelinePos = function updateGuidelinePos() {
+		if (this.unit === 0)
+			this.position = this.value * ImageControl.getScale() | 0;
+		else
+			this.position = this.value * this.max * ImageControl.getScale() / 100 | 0;
+
+		this.node.style[this.info] = this.position + 'px';
+	};
+
+	GuideLine.prototype.setPosition = function setPosition(value) {
+		this.value = value;
+		this.tooltip.textContent = value;
+		this.updateGuidelinePos();
+		Tool.setBorderSlice(this.pos, value);
+	};
+
+	GuideLine.prototype.setMax = function setMax(max) {
+		this.max = max;
+		this.updateLimit();
+	};
+
+	GuideLine.prototype.updateLimit = function updateLimit() {
+		if (this.unit === 1)
+			InputSliderManager.setMax(this.topic, 100);
+		else
+			InputSliderManager.setMax(this.topic, this.max);
+	};
+
+	GuideLine.prototype.setUnit = function setUnit(type) {
+		if (type === '%')	this.unit = 1;
+		if (type === '')	this.unit = 0;
+		this.updateLimit();
+	};
+
+	/*
+	 * Unit panel
+	 */
+	var UnitPanel = (function UnitPanel () {
+
+		var panel;
+		var title;
+		var precision;
+		var step;
+		var unit_topic = null; // settings are made for this topic
+		var step_option = [1, 0.1, 0.01];
+
+		var updatePrecision = function updatePrecision(value) {
+			InputSliderManager.setPrecision('unit-step', value);
+			InputSliderManager.setStep('unit-step', step_option[value]);
+			InputSliderManager.setMin('unit-step', step_option[value]);
+
+			if (unit_topic)
+				InputSliderManager.setPrecision(unit_topic, value);
+		};
+
+		var updateUnitSettings = function updateUnitSettings(value) {
+			if (unit_topic)
+				InputSliderManager.setStep(unit_topic, value);
+		};
+
+		var show = function show(e) {
+			var topic = e.target.getAttribute('data-topic');
+			var precision = InputSliderManager.getPrecision(topic);
+			var step = InputSliderManager.getStep(topic);
+
+			unit_topic = topic;
+			title.textContent = topic;
+
+			panel.setAttribute('data-active', 'true');
+			panel.style.top = e.target.offsetTop - 40 + 'px';
+			panel.style.left = e.target.offsetLeft + 30 + 'px';
+
+			InputSliderManager.setValue('unit-precision', precision);
+			InputSliderManager.setValue('unit-step', step);
+		};
+
+		var init = function init() {
+			panel = document.createElement('div');
+			title = document.createElement('div');
+			var close = document.createElement('div');
+
+			step = InputSliderManager.createSlider('unit-step', 'step');
+			precision = InputSliderManager.createSlider('unit-precision', 'precision');
+
+			InputSliderManager.setStep('unit-precision', 1);
+			InputSliderManager.setMax('unit-precision', 2);
+			InputSliderManager.setValue('unit-precision', 2);
+			InputSliderManager.setSensivity('unit-precision', 20);
+
+			InputSliderManager.setValue('unit-step', 1);
+			InputSliderManager.setStep('unit-step', 0.01);
+			InputSliderManager.setPrecision('unit-step', 2);
+
+			InputSliderManager.subscribe('unit-precision', updatePrecision);
+			InputSliderManager.subscribe('unit-step', updateUnitSettings);
+
+			close.addEventListener('click', function () {
+				panel.setAttribute('data-active', 'false');
+			});
+
+			title.textContent = 'Properties';
+			title.className = 'title';
+			close.className = 'close';
+			panel.id = 'unit-settings';
+			panel.setAttribute('data-active', 'false');
+			panel.appendChild(title);
+			panel.appendChild(precision);
+			panel.appendChild(step);
+			panel.appendChild(close);
+			document.body.appendChild(panel);
+		};
+
+		return {
+			init : init,
+			show : show
+		};
+
+	})();
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview_area;
+		var dropdown_unit_options = [
+			{ '' : '--', '%' : '%'},
+			{ 'px' : 'px', '%' : '%', 'em' : 'em'},
+			{ 'px' : 'px', 'em' : 'em'},
+		];
+
+		var border_slice = [];
+		var border_width = [];
+		var border_outset = [];
+
+		var border_slice_values = [];
+		var border_width_values = [];
+		var border_outset_values = [];
+
+		var border_slice_units = ['', '', '', ''];
+		var border_width_units = ['px', 'px', 'px', 'px'];
+		var border_outset_units = ['px', 'px', 'px', 'px'];
+
+		var border_fill = false;
+		var border_repeat = ['round', 'round'];
+		var CSS_code = {
+			'source' : null,
+			'slice' : null,
+			'width' : null,
+			'outset' : null,
+			'repeat' : null
+		};
+
+		var setBorderSlice = function setBorderSlice(positionID, value) {
+			border_slice[positionID] = value + border_slice_units[positionID];
+			updateBorderSlice();
+		};
+
+		var updateBorderSlice = function updateBorderSlice() {
+			var value = border_slice.join(' ');
+			if (border_fill === true)
+				value += ' fill';
+
+			preview.style.borderImageSlice = value;
+			setOutputCSS('slice', value);
+		};
+
+		var setBorderFill = function setBorderFill(value) {
+			border_fill = value;
+			var bimgslice = border_slice.join(' ');;
+			if (value === true)
+				bimgslice += ' fill';
+
+			preview.style.borderImageSlice = bimgslice;
+		};
+
+		var updateBorderWidth = function updateBorderWidth() {
+			var value = border_width.join(' ');
+			preview.style.borderImageWidth = value;
+			setOutputCSS('width', value);
+		};
+
+		var updateBorderOutset = function updateBorderOutset() {
+			var value = border_outset.join(' ');
+			preview.style.borderImageOutset = border_outset.join(' ');
+			setOutputCSS('outset', value);
+		};
+
+		var setBorderRepeat = function setBorderRepeat(obj) {
+			border_repeat[obj.value] = obj.name;
+			var value = border_repeat.join(' ');
+			preview.style.borderImageRepeat = value;
+			setOutputCSS('repeat', value);
+		};
+
+		var setOutputCSS = function setOutputCSS(topic, value) {
+			CSS_code[topic].textContent = value + ';';
+		};
+
+		var setPreviewFontSize = function setPreviewFontSize(value) {
+			preview.style.fontSize = value + 'px';
+		};
+
+		var setPreviewWidth = function setPreviewWidth(value) {
+			preview.style.width = value + 'px';
+		};
+
+		var setPreviewHeight = function setPreviewHeight(value) {
+			preview.style.height = value + 'px';
+		};
+
+		var setPreviewAreaHeight = function setPreviewAreaHeight(value) {
+			preview_area.style.height = value + 'px';
+		};
+
+		var updateDragOption = function updateDragOption(value) {
+			if (value === true)
+				subject.setAttribute('data-draggable', 'true');
+			else
+				subject.removeAttribute('data-draggable');
+		};
+
+		var createProperty = function createProperty(topic, labelID, optionsID) {
+
+			var slider = InputSliderManager.createSlider(topic, positions[labelID]);
+			var dropdown = DropDownManager.createDropDown(topic, dropdown_unit_options[optionsID]);
+
+			InputSliderManager.setSensivity(topic, 3);
+			InputSliderManager.setPrecision(topic, 1);
+
+			var property = document.createElement('div');
+			var config = document.createElement('div');
+
+			property.className = 'property';
+			config.className = 'config';
+			config.setAttribute('data-topic', topic);
+			config.addEventListener('click', UnitPanel.show);
+
+			property.appendChild(slider);
+			property.appendChild(dropdown);
+			property.appendChild(config);
+
+			return property;
+		};
+
+		var initBorderSliceControls = function initBorderSliceControls() {
+			var container = getElemById('border-slice-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_slice_values[id] = value;
+					border_slice[id] = value + border_slice_units[id];
+					updateBorderSlice();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					guidelines[topic].setUnit(obj.value);
+					border_slice_units[id] = obj.value;
+					border_slice[id] = border_slice_values[id] + obj.value;
+					updateBorderSlice();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'slice-' + positions[i];
+				var property = createProperty(topic, i, 0);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+
+			container.appendChild(container.children[1]);
+
+		};
+
+		var initBorderWidthControls = function initBorderWidthControls() {
+			var container = getElemById('border-width-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_width_values[id] = value;
+					border_width[id] = value + border_width_units[id];
+					updateBorderWidth();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					if (obj.value === '%')
+						InputSliderManager.setMax(topic, 100);
+					else
+						InputSliderManager.setMax(topic, 1000);
+
+					border_width_units[id] = obj.value;
+					border_width[id] = border_width_values[id] + obj.value;
+					updateBorderWidth();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'width-' + positions[i];
+				var property = createProperty(topic, i, 1);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var initBorderOutsetControls = function initBorderOutsetControls() {
+
+			var container = getElemById('border-outset-control');
+
+			var listenForChanges = function listenForChanges(topic, id) {
+				InputSliderManager.subscribe(topic, function(value) {
+					border_outset_values[id] = value;
+					border_outset[id] = value + border_outset_units[id];
+					updateBorderOutset();
+				});
+
+				DropDownManager.subscribe(topic, function(obj) {
+					border_outset_units[id] = obj.value;
+					border_outset[id] = border_outset_values[id] + obj.value;
+					updateBorderOutset();
+				});
+			};
+
+			for (var i = 0; i < positions.length; i++) {
+				var topic = 'outset-' + positions[i];
+				var property = createProperty(topic, i, 2);
+				InputSliderManager.setMax(topic, 1000);
+				listenForChanges(topic, i);
+
+				container.appendChild(property);
+			}
+		};
+
+		var init = function init() {
+
+			var gallery =
+			subject = getElemById('subject');
+			preview = getElemById("preview");
+			preview_area = getElemById("preview_section");
+
+
+			CSS_code['source'] = getElemById("out-border-source");
+			CSS_code['slice'] = getElemById("out-border-slice");
+			CSS_code['width'] = getElemById("out-border-width");
+			CSS_code['outset'] = getElemById("out-border-outset");
+			CSS_code['repeat'] = getElemById("out-border-repeat");
+
+			initBorderSliceControls();
+			initBorderWidthControls();
+			initBorderOutsetControls();
+
+			var elem = document.querySelectorAll('.guideline');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				new GuideLine(elem[i]);
+
+			PreviewControl.init();
+
+			ButtonManager.subscribe('slice-fill',setBorderFill);
+			ButtonManager.subscribe('drag-subject', updateDragOption);
+			ButtonManager.setValue('drag-subject', false);
+
+			DropDownManager.subscribe('image-repeat-X', setBorderRepeat);
+			DropDownManager.subscribe('image-repeat-Y', setBorderRepeat);
+
+			InputSliderManager.subscribe('preview-area-height', setPreviewAreaHeight);
+			InputSliderManager.subscribe('preview-width', setPreviewWidth);
+			InputSliderManager.subscribe('preview-height', setPreviewHeight);
+			InputSliderManager.subscribe('font-size', setPreviewFontSize);
+			InputSliderManager.setValue('preview-width', 300);
+			InputSliderManager.setValue('preview-height', 200);
+		};
+
+		return {
+			init: init,
+			setOutputCSS: setOutputCSS,
+			setBorderSlice: setBorderSlice
+		};
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		InputSliderManager.init();
+		DropDownManager.init();
+		ButtonManager.init();
+		UnitPanel.init();
+		Tool.init();
+		ImageControl.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+

+

+
+
{{EmbedLiveSample('Border_Image_Generator', '100%', '1270px')}}

diff --git a/files/de/web/css/css_background_and_borders/border-radius_generator/index.html b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
new file mode 100644
index 0000000000..0193a207e7
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/border-radius_generator/index.html
@@ -0,0 +1,1600 @@
+---
+title: Border-radius Generator
+slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+tags:
+  - CSS
+  - Werkzeuge
+translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator
+---
+
Dieses Werkzeug kann dazu verwendet werden, CSS3 {{cssxref("border-radius")}} Effekte zu erzeugen.

+
+

+
border-radius

+
+
HTML Content

+
+
<div id="container">
+    <div class="group section">
+        <div id="preview" class="col span_12">
+            <div id="subject">
+                <div id="top-left" class="radius-container"
+                    data-X="left" data-Y="top">
+                </div>
+                <div id="top-right" class="radius-container"
+                    data-X="right" data-Y="top">
+                </div>
+                <div id="bottom-right" class="radius-container"
+                    data-X="right" data-Y="bottom">
+                </div>
+                <div id="bottom-left" class="radius-container"
+                    data-X="left" data-Y="bottom">
+                </div>
+
+                <div id="radius-ui-sliders">
+                    <div id="tlr" class="ui-input-slider" data-topic="top-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlw" class="ui-input-slider" data-topic="top-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="tlh" class="ui-input-slider" data-topic="top-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trr" class="ui-input-slider" data-topic="top-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trw" class="ui-input-slider" data-topic="top-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="trh" class="ui-input-slider" data-topic="top-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brr" class="ui-input-slider" data-topic="bottom-right"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brw" class="ui-input-slider" data-topic="bottom-right-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="brh" class="ui-input-slider" data-topic="bottom-right-h"
+                        data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blr" class="ui-input-slider" data-topic="bottom-left"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blw" class="ui-input-slider" data-topic="bottom-left-w"
+                         data-unit=" px" data-sensivity="2"></div>
+
+                    <div id="blh" class="ui-input-slider" data-topic="bottom-left-h"
+                        data-unit=" px" data-sensivity="2"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="controls" class="group section">
+
+        <div class="group section">
+            <div id="dimensions">
+                <div class="ui-input-slider" data-topic="width" data-info="width"
+                     data-unit=" px" data-min="150" data-max="700" data-sensivity="1"></div>
+
+                <div class="ui-input-slider" data-topic="height" data-info="height"
+                    data-unit=" px" data-min="75" data-max="350" data-sensivity="1"></div>
+            </div>
+
+            <div id="output"></div>
+        </div>
+
+        <div class="group section">
+            <div id="radius-lock">
+                <div class="info"> rounded corner </div>
+                <div class="ui-checkbox" data-topic='top-left'></div>
+                <div class="ui-checkbox" data-topic='top-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-right'></div>
+                <div class="ui-checkbox" data-topic='bottom-left'></div>
+            </div>
+
+            <div id="unit-selection">
+                <div class="info"> select border units </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+

+
+
CSS Content

+
+
/*  GRID OF TEN
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider-container {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider-container * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview {
+	height: 500px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	overflow: hidden;
+	position: relative;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#preview input {
+	color: #333;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+#subject {
+	width: 400px;
+	height: 150px;
+	margin: 0 auto;
+	border: 3px solid #C60;
+	background: #FFF;
+	position: relative;
+}
+
+.radius {
+	width: 50%;
+	height: 50%;
+	border: 1px solid #CCC;
+	display: none;
+	position: absolute;
+	z-index: 1;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.handle {
+	width: 16px;
+	height: 16px;
+	position: absolute;
+	z-index: 2;
+}
+
+.handle-top-left {
+	top: -12px;
+	left: -12px;
+	cursor: se-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top left no-repeat;
+}
+
+.handle-top-right {
+	top: -12px;
+	right: -12px;
+	cursor: sw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") top right no-repeat;
+}
+
+.handle-bottom-right {
+	bottom: -12px;
+	right: -12px;
+	cursor: nw-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom right no-repeat;
+}
+
+.handle-bottom-left {
+	bottom: -12px;
+	left: -12px;
+	cursor: ne-resize;
+	background: url("https://mdn.mozillademos.org/files/5677/resize-handle.png") bottom left no-repeat;
+}
+
+
+.radius-container {
+	position: absolute;
+	display : block;
+	z-index: 1;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* TOP LEFT */
+#top-left {
+	top: 0;
+	left: 0;
+}
+
+#top-left .radius {
+	border-top-left-radius: 100%;
+	top: 0;
+	left: 0;
+}
+
+/* TOP RIGHT */
+#top-right {
+	top: 0;
+	right: 0;
+}
+
+#top-right .radius {
+	border-top-right-radius: 100%;
+	top: 0;
+	right: 0;
+}
+
+/* BOTTOM RIGHT */
+#bottom-right {
+	bottom: 0;
+	right: 0;
+}
+
+#bottom-right .radius {
+	border-bottom-right-radius: 100%;
+	bottom: 0;
+	right: 0;
+}
+
+/* BOTTOM lEFT */
+#bottom-left {
+	bottom: 0;
+	left: 0;
+}
+
+#bottom-left .radius {
+	border-bottom-left-radius: 100%;
+	bottom: 0;
+}
+
+/* INPUT SLIDERS */
+
+#preview .ui-input-slider {
+	margin: 10px;
+	position: absolute;
+	z-index: 10;
+}
+
+#radius-ui-sliders {
+	width: 100%;
+	height: 100%;
+	min-height: 75px;
+	min-width: 150px;
+	padding: 20px 50px;
+	top: -20px;
+	left: -50px;
+	position: relative;
+}
+
+#tlr {
+	top: -30px;
+	left: -50px;
+	display: none;
+}
+
+#tlw {
+	top: -30px;
+	left: 30px;
+}
+
+#tlh {
+	top: 20px;
+	left: -50px;
+}
+
+#trr {
+	top: -30px;
+	right: -50px;
+	display: none;
+}
+
+#trw {
+	top: -30px;
+	right: 30px;
+}
+
+#trh {
+	top: 20px;
+	right: -50px;
+}
+
+#brr {
+	bottom: -30px;
+	right: -50px;
+	display: none;
+}
+
+#brw {
+	bottom: -30px;
+	right: 30px;
+}
+
+#brh {
+	bottom: 20px;
+	right: -50px;
+}
+
+#blr {
+	bottom: -30px;
+	left: -50px;
+	display: none;
+}
+
+#blw {
+	bottom: -30px;
+	left: 30px;
+}
+
+#blh {
+	bottom: 20px;
+	left: -50px;
+}
+
+#preview .ui-input-slider-left, #preview .ui-input-slider-right {
+	visibility: hidden;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-left {
+	visibility: visible;
+}
+
+#preview .ui-input-slider-container:hover .ui-input-slider-right {
+	visibility: visible;
+}
+
+/*
+ *
+ */
+
+#unit-selection {
+	width: 200px;
+	height: 75px;
+	margin: 30px 30px 0 0;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: right;
+}
+
+#unit-selection .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#unit-selection .dropdown {
+	width: 50px;
+	height: 20px;
+	margin: 10px;
+	padding: 0;
+	border-radius: 3px;
+	position: absolute;
+	overflow: hidden;
+}
+
+#unit-selection select {
+	width: 50px;
+	height: 20px;
+	marign: 0;
+	padding: 0 0 0 10px;
+	background: #555;
+	border: 1px solid #555;
+	border: none;
+	color: #FFF;
+	float: left;
+}
+
+#unit-selection select option {
+	background: #FFF;
+	color: #333;
+}
+
+#unit-selection select:hover {
+	cursor: pointer;
+}
+
+#unit-selection .dropdown:before {
+	content: "";
+	width: 18px;
+	height: 20px;
+	display: block;
+	background-color: #555;
+	background-image: url("https://mdn.mozillademos.org/files/5675/dropdown.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	top: 0px;
+	right: 0px;
+	position: absolute;
+	z-index: 1;
+	pointer-events: none;
+}
+
+#unit-selection .unit-top-left {
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-left-w {
+	top: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-top-left-h {
+	top: 20px;
+	left: -37px;
+}
+
+#unit-selection .unit-top-right {
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-top-right-w {
+	top: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-top-right-h {
+	top: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-right {
+	bottom: 0;
+	right: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-right-w {
+	bottom: -22px;
+	right: 30px;
+}
+
+#unit-selection .unit-bottom-right-h {
+	bottom: 20px;
+	right: -37px;
+}
+
+#unit-selection .unit-bottom-left {
+	bottom: 0;
+	left: 0;
+	display: none;
+}
+
+#unit-selection .unit-bottom-left-w {
+	bottom: -22px;
+	left: 30px;
+}
+
+#unit-selection .unit-bottom-left-h {
+	bottom: 20px;
+	left: -37px;
+}
+
+/******************************************************************************/
+/******************************************************************************/
+
+
+#radius-lock {
+	width: 200px;
+	height: 75px;
+	margin: 30px 0 0 30px;
+	padding: 30px;
+	border: 3px solid #555;
+	border-radius: 10px;
+	position: relative;
+	float: left;
+}
+
+#radius-lock .ui-checkbox {
+	color: #FFF;
+	position: absolute;
+}
+
+#radius-lock .ui-checkbox > label {
+	height: 20px;
+	width: 34px;
+	padding: 0;
+}
+
+#radius-lock .info {
+	height: 20%;
+	width: 100%;
+	line-height: 20%;
+	font-size: 20px;
+	text-align: center;
+	position: relative;
+	top: 40%;
+}
+
+#radius-lock [data-topic="top-left"] {
+	top: 10px;
+	left: 10px;
+}
+
+#radius-lock [data-topic="top-right"] {
+	top: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-right"] {
+	bottom: 10px;
+	right: 10px;
+}
+
+#radius-lock [data-topic="bottom-left"] {
+	bottom: 10px;
+	left: 10px;
+}
+
+/**
+ * Controls
+ */
+
+#dimensions {
+	width: 200px;
+	color: #444;
+	float:left;
+}
+
+#dimensions input {
+	background: #555;
+	color: #FFF;
+	border: none;
+	border-radius: 3px;
+}
+
+#output {
+	width: 500px;
+	padding: 10px 0;
+	margin: 10px 0;
+	color: #555;
+	text-align: center;
+	border: 1px dashed #999;
+	border-radius: 3px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+	user-select: text;
+
+	float: right;
+}
+
+
+

+
+
JavaScript Content

+
+
'use strict';
+
+
+/**
+ * UI-InputSliderManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseInt(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		subscribe(obj.topic, function(value) {
+			input.value = value + obj.unit;
+		});
+
+		return input;
+	}
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		});
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		}
+
+		return slider;
+	}
+
+	var InputSlider = function(node) {
+		var min		= node.getAttribute('data-min') | 0;
+		var max		= node.getAttribute('data-max') | 0;
+		var step	= node.getAttribute('data-step') | 0;
+		var value	= node.getAttribute('data-value') | 0;
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+		node.className = 'ui-input-slider ui-input-slider-container';
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	}
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		if (send_notify !== undefined && send_notify === false) {
+			slider.input.value = value + slider.unit;
+			return;
+		}
+
+		notify.call(slider);
+	}
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	}
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	}
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	}
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		getNode : getNode,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+		}
+		catch(error) {
+			console.log(error);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function() {
+	BorderRadius.init();
+});
+
+var BorderRadius = (function BorderRadius() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	var subject;
+	var units = ['px', '%'];
+	var output = null;
+
+	var UnitSelector = function UnitSelector(topic) {
+
+		this.container = document.createElement("div");
+		this.select = document.createElement("select");
+		for (var i in units) {
+			var option = document.createElement("option");
+			option.value = i;
+			option.textContent = units[i];
+			this.select.appendChild(option);
+		}
+
+		this.container.className = 'dropdown ' + 'unit-' + topic;
+		this.container.appendChild(this.select);
+	}
+
+	UnitSelector.prototype.setValue = function setValue(value) {
+		this.salect.value = value;
+	}
+
+
+	var RadiusContainer = function RadiusContainer(node) {
+		var radius = document.createElement('div');
+		var handle = document.createElement('div');
+		var x = node.getAttribute('data-x');
+		var y = node.getAttribute('data-y');
+		var active = false;
+
+		this.id = node.id;
+		this.node = node;
+		this.radius = radius;
+		this.handle = handle;
+		this.width = 100;
+		this.height = 50;
+		this.size = 0;
+		this.rounded = false;
+
+		this.unitX = 0;
+		this.unitY = 0;
+		this.unitR = 0;
+
+		this.maxW = 100;
+		this.maxH = 100;
+		this.maxR = 100;
+
+		this.topic = y + '-' + x;
+
+		var sliderW = InputSliderManager.getNode(this.topic + '-w');
+		var sliderH = InputSliderManager.getNode(this.topic + '-h');
+		var sliderR = InputSliderManager.getNode(this.topic);
+
+		this.setUnitX(this.unitX);
+		this.setUnitY(this.unitY);
+		this.setUnitR(this.unitR);
+
+		this.updateWidth();
+		this.updateHeight();
+		this.updateRadius();
+
+		if (x === 'left')	this.resizeX =  1;
+		if (x === 'right')	this.resizeX = -1;
+		if (y === 'top')	this.resizeY =  1;
+		if (y === 'bottom')	this.resizeY = -1;
+
+		radius.className = 'radius';
+
+		var unit_selector = document.getElementById("unit-selection");
+		var unitW = new UnitSelector(this.topic + '-w');
+		var unitH = new UnitSelector(this.topic + '-h');
+		var unitR = new UnitSelector(this.topic);
+
+		unit_selector.appendChild(unitW.container);
+		unit_selector.appendChild(unitH.container);
+		unit_selector.appendChild(unitR.container);
+		node.appendChild(radius);
+		subject.appendChild(handle);
+
+		unitW.select.addEventListener('change', function(e) {
+			this.setUnitX(e.target.value | 0);
+		}.bind(this));
+
+		unitH.select.addEventListener('change', function(e) {
+			this.setUnitY(e.target.value | 0);
+		}.bind(this));
+
+		unitR.select.addEventListener('change', function(e) {
+			this.setUnitR(e.target.value | 0);
+		}.bind(this));
+
+		if (x === 'left' && y == 'top') handle.className = 'handle handle-top-left'
+		if (x === 'right' && y == 'top') handle.className = 'handle handle-top-right';
+		if (x === 'right' && y == 'bottom') handle.className = 'handle handle-bottom-right';
+		if (x === 'left' && y == 'bottom') 	handle.className = 'handle handle-bottom-left';
+
+		handle.addEventListener("mousedown", function(e) {
+			active = true;
+			this.radius.style.display = 'block';
+			PreviewMouseTracking.subscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		document.addEventListener("mouseup", function(e) {
+			this.radius.style.display = 'none';
+			if (active === true)
+				PreviewMouseTracking.unsubscribe(this.updateContainer.bind(this));
+		}.bind(this));
+
+		InputSliderManager.subscribe(this.topic + '-w', this.setWidth.bind(this));
+		InputSliderManager.subscribe(this.topic + '-h', this.setHeight.bind(this));
+		InputSliderManager.subscribe(this.topic, this.setRadius.bind(this));
+
+		ButtonManager.subscribe(this.topic, function(value) {
+			this.rounded = value;
+			if (value === true) {
+				unitW.container.style.display = 'none';
+				unitH.container.style.display = 'none';
+				unitR.container.style.display = 'block';
+				sliderW.style.display = 'none';
+				sliderH.style.display = 'none';
+				sliderR.style.display = 'block';
+				this.setUnitR(this.unitR);
+				this.updateRadius();
+			}
+
+			if (value === false) {
+				unitW.container.style.display = 'block';
+				unitH.container.style.display = 'block';
+				unitR.container.style.display = 'none';
+				sliderW.style.display = 'block';
+				sliderH.style.display = 'block';
+				sliderR.style.display = 'none';
+				this.setUnitX(this.unitX);
+				this.setUnitY(this.unitY);
+				this.updateWidth();
+				this.updateHeight();
+			}
+
+			this.updateBorderRadius();
+
+		}.bind(this));
+
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.updateWidth = function updateWidth() {
+		this.node.style.width = this.width + units[this.unitX];
+		var value = Math.round(this.width / 2);
+		InputSliderManager.setValue(this.topic + '-w', value, false);
+	}
+
+	RadiusContainer.prototype.updateHeight = function updateHeight() {
+		this.node.style.height = this.height + units[this.unitY];
+		var value = Math.round(this.height / 2);
+		InputSliderManager.setValue(this.topic + '-h', value, false);
+	}
+
+	RadiusContainer.prototype.updateRadius = function updateRadius() {
+		var value = Math.round(this.size / 2);
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		InputSliderManager.setValue(this.topic, value, false);
+	}
+
+	RadiusContainer.prototype.setWidth = function setWidth(value) {
+		this.radius.style.display = 'block';
+		this.width = 2 * value;
+		this.node.style.width = this.width + units[this.unitX];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setHeight = function setHeight(value) {
+		this.radius.style.display = 'block';
+		this.height = 2 * value;
+		this.node.style.height = this.height + units[this.unitY];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setRadius = function setRadius(value) {
+		this.radius.style.display = 'block';
+		this.size = 2 * value;
+		this.node.style.width = this.size + units[this.unitR];
+		this.node.style.height = this.size + units[this.unitR];
+		this.updateBorderRadius();
+	}
+
+	RadiusContainer.prototype.setUnitX = function setUnitX(value) {
+		this.unitX = value;
+		if (this.unitX === 0) this.maxW = 2 * subject.clientWidth;
+		if (this.unitX === 1) this.maxW = 200;
+		InputSliderManager.setUnit(this.topic + '-w', units[this.unitX]);
+		InputSliderManager.setMax(this.topic + '-w', this.maxW / 2);
+	}
+
+	RadiusContainer.prototype.setUnitY = function setUnitY(value) {
+		this.unitY = value;
+		if (this.unitY === 0) this.maxH = 2 * subject.clientHeight;
+		if (this.unitY === 1) this.maxH = 200;
+		InputSliderManager.setUnit(this.topic + '-h', units[this.unitY]);
+		InputSliderManager.setMax(this.topic + '-h', this.maxH / 2);
+	}
+
+	RadiusContainer.prototype.setUnitR = function setUnitR(value) {
+		this.unitR = value;
+
+		if (this.unitR === 0)
+			this.maxR = 2 * Math.min(subject.clientHeight , subject.clientWidth);
+
+		if (this.unitR === 1)
+			this.maxR = 200;
+
+		InputSliderManager.setUnit(this.topic, units[this.unitR]);
+		InputSliderManager.setMax(this.topic, this.maxR / 2);
+	}
+
+	RadiusContainer.prototype.updateUnits = function updateUnits(unit) {
+		if (this.rounded) {
+			this.setUnitR(this.unitR);
+			return;
+		}
+
+		if (unit === 0)
+			this.setUnitX(this.unitX);
+
+		if (unit === 1)
+			this.setUnitY(this.unitY);
+	}
+
+	RadiusContainer.prototype.composeBorderRadius = function composeBorderRadius () {
+
+		if (this.rounded === true) {
+			var unit = units[this.unitR];
+			var value = Math.round(this.size / 2);
+			return value + unit;
+		}
+
+		var unitX = units[this.unitX];
+		var unitY = units[this.unitY];
+		var valueX = Math.round(this.width / 2);
+		var valueY = Math.round(this.height / 2);
+
+		if (valueX === valueY && this.unitX === this.unitY)
+			return valueX + unitX;
+
+		return valueX + unitX + ' ' + valueY + unitY;
+	}
+
+	RadiusContainer.prototype.updateBorderRadius = function updateBorderRadius () {
+		var radius = this.composeBorderRadius();
+		var corner = 0;
+
+		if (this.topic === 'top-left') {
+			subject.style.borderTopLeftRadius = radius;
+			corner = 0;
+		}
+
+		if (this.topic === 'top-right') {
+			subject.style.borderTopRightRadius = radius;
+			corner = 1;
+		}
+
+		if (this.topic === 'bottom-right') {
+			subject.style.borderBottomRightRadius = radius;
+			corner = 2;
+		}
+
+		if (this.topic === 'bottom-left') {
+			subject.style.borderBottomLeftRadius = radius;
+			corner = 3;
+		}
+
+		Tool.updateOutput(corner, radius);
+	}
+
+	RadiusContainer.prototype.updateContainer = function updateContainer(deltaX, deltaY) {
+
+		if (this.rounded === true) {
+			this.size += this.resizeX * deltaX + this.resizeY * deltaY;
+			if (this.size < 0)	this.size = 0;
+			if (this.size > this.maxR)	this.size = this.maxR;
+			this.updateRadius();
+			this.updateBorderRadius();
+			return;
+		}
+
+		if (deltaX) {
+			this.width += this.resizeX * deltaX;
+			if (this.width < 0)	this.width = 0;
+			if (this.width > this.maxW)	this.width = this.maxW;
+			this.updateWidth();
+		}
+
+		if (deltaY) {
+			this.height += this.resizeY * deltaY;
+			if (this.height < 0) this.height = 0;
+			if (this.height > this.maxH)	this.height = this.maxH;
+			this.updateHeight();
+		}
+
+		if (deltaX || deltaY)
+			this.updateBorderRadius();
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+		var preview;
+		var preview_ui;
+		var radius_containers = [];
+		var border_width = 3;
+		var borders1 = [null, null, null, null];
+		var borders2 = [0, 0, 0, 0];
+
+		var updateUIWidth = function updateUIWidth(value) {
+			var pwidth = subject.parentElement.clientWidth;
+			var left = (pwidth - value) / 2;
+			subject.style.width = value + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(0);
+		}
+
+		var updateUIHeight = function updateUIHeight(value) {
+			var pheight = subject.parentElement.clientHeight;
+			var top = (pheight - value) / 2;
+			subject.style.height = value + "px";
+			subject.style.top = top - border_width + "px";
+
+			for (var i = 0; i < 4; i++)
+				radius_containers[i].updateUnits(1);
+		}
+
+		var updatePreviewUIWidth = function updatePreviewUIWidth() {
+			var p = subject.parentElement.clientWidth;
+			var v = preview_ui.clientWidth;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.left = (p - v) / 2 + "px" ;
+		}
+
+		var updatePreviewUIHeight = function updatePreviewUIHeight() {
+			var p = subject.parentElement.clientHeight;
+			var v = preview_ui.clientHeight;
+			console.log(p, v, (p - v ) / 2);
+			preview_ui.style.top = (p - v) / 2 + "px" ;
+		}
+
+		var updateOutput = function updateOutput(corner, radius) {
+			var values = radius.split(" ");
+
+			borders1[corner] = values[0];
+			borders2[corner] = values[0];
+
+			if (values.length === 2)
+				borders2[corner] = values[1];
+
+			var border_1_value = borders1.join(" ");
+			var border_2_value = borders2.join(" ");
+			var border_radius = 'border-radius: ' + border_1_value;
+
+			if (border_2_value !== border_1_value)
+				border_radius += ' / ' + border_2_value;
+
+			border_radius += ';';
+			output.textContent = border_radius;
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+			subject = getElemById("subject");
+			output = getElemById("output");
+			preview_ui = getElemById("radius-ui-sliders");
+
+			var elem = document.querySelectorAll('.radius-container');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				radius_containers[i] = new RadiusContainer(elem[i]);
+
+			InputSliderManager.subscribe("width", updateUIWidth);
+			InputSliderManager.subscribe("height", updateUIHeight);
+
+			InputSliderManager.setValue("width", subject.clientWidth);
+			InputSliderManager.setValue("height", subject.clientHeight);
+		}
+
+		return {
+			init : init,
+			updateOutput : updateOutput
+		}
+
+	})();
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		InputSliderManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+

+

+
+
{{EmbedLiveSample('border-radius-generator', '100%', '800px')}}

diff --git a/files/de/web/css/css_background_and_borders/index.html b/files/de/web/css/css_background_and_borders/index.html
new file mode 100644
index 0000000000..87b26bd607
--- /dev/null
+++ b/files/de/web/css/css_background_and_borders/index.html
@@ -0,0 +1,154 @@
+---
+title: CSS Background and Borders
+slug: Web/CSS/CSS_Background_and_Borders
+tags:
+  - CSS
+  - CSS Backgrounds and Borders
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders
+---
+
{{CSSRef}}

+
+
CSS Background and Borders is a module of CSS that defines how background and borders of elements are described. Borders can be lines or images, boxes can have one or multiple backgrounds, have rounded corners, and shadows.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("background")}}
    • 
+ 
  • {{cssxref("background-attachment")}}
    • 
+ 
  • {{cssxref("background-clip")}}
    • 
+ 
  • {{cssxref("background-color")}}
    • 
+ 
  • {{cssxref("background-image")}}
    • 
+ 
  • {{cssxref("background-origin")}}
    • 
+ 
  • {{cssxref("background-position")}}
    • 
+ 
  • {{cssxref("background-repeat")}}
    • 
+ 
  • {{cssxref("background-size")}}
    • 
+ 
  • {{cssxref("box-shadow")}}
    • 
+ 
  • {{cssxref("border")}}
    • 
+ 
  • {{cssxref("border-bottom")}}
    • 
+ 
  • {{cssxref("border-bottom-color")}}
    • 
+ 
  • {{cssxref("border-bottom-left-radius")}}
    • 
+ 
  • {{cssxref("border-bottom-right-radius")}}
    • 
+ 
  • {{cssxref("border-bottom-style")}}
    • 
+ 
  • {{cssxref("border-bottom-width")}}
    • 
+ 
  • {{cssxref("border-collapse")}}
    • 
+ 
  • {{cssxref("border-color")}}
    • 
+ 
  • {{cssxref("border-image")}}
    • 
+ 
  • {{cssxref("border-image-outset")}}
    • 
+ 
  • {{cssxref("border-image-repeat")}}
    • 
+ 
  • {{cssxref("border-image-slice")}}
    • 
+ 
  • {{cssxref("border-image-source")}}
    • 
+ 
  • {{cssxref("border-image-width")}}
    • 
+ 
  • {{cssxref("border-left")}}
    • 
+ 
  • {{cssxref("border-left-color")}}
    • 
+ 
  • {{cssxref("border-left-style")}}
    • 
+ 
  • {{cssxref("border-left-width")}}
    • 
+ 
  • {{cssxref("border-radius")}}
    • 
+ 
  • {{cssxref("border-right")}}
    • 
+ 
  • {{cssxref("border-right-color")}}
    • 
+ 
  • {{cssxref("border-right-style")}}
    • 
+ 
  • {{cssxref("border-right-width")}}
    • 
+ 
  • {{cssxref("border-style")}}
    • 
+ 
  • {{cssxref("border-top")}}
    • 
+ 
  • {{cssxref("border-top-color")}}
    • 
+ 
  • {{cssxref("border-top-left-radius")}}
    • 
+ 
  • {{cssxref("border-top-right-radius")}}
    • 
+ 
  • {{cssxref("border-top-style")}}
    • 
+ 
  • {{cssxref("border-top-width")}}
    • 
+ 
  • {{cssxref("border-width")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using CSS multiple backgrounds

+ 
Explains how to set backgrounds on elements and how they will interact with it.

+ 
Scaling background images

+ 
Describes how to change the appearance of the background images, by stretching them or repeating them, to cover the whole background of the element, or not.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Backgrounds') }}{{ Spec2('CSS3 Backgrounds') }} 
{{SpecName('CSS2.1', 'box.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#border')}}{{Spec2('CSS1')}} 

+
+
Browser compatibility

+
+
{{CompatibilityTable()}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}4.03.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}{{CompatGeckoMobile("1.9.2")}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}1.0

+

diff --git "a/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html" "b/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html"
new file mode 100644
index 0000000000..4c0b1e58ec
--- /dev/null
+++ "b/files/de/web/css/css_background_and_borders/mehrere_hintergr\303\274nde_in_css_verwenden/index.html"
@@ -0,0 +1,69 @@
+---
+title: Mehrere Hintergründe in CSS verwenden
+slug: Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden
+tags:
+  - Beispiel
+  - CSS
+  - CSS Hintergrund
+  - Guide
+  - Intermediate
+translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
+---
+
{{CSSRef}}

+
+
Mit CSS3 können einem Element mehrere Hintergründe zugewiesen werden. Diese werden aufeinander gestapelt wobei der erste Hintergrund zuoberst ist und der letzte zuunterst. Nur dem untersten Hintergrund kann eine Hintergrundfarbe zugewiesen werden.

+
+
Mehrere Hintergründe festzulegen ist einfach:

+
+
.myclass {
+  background: background1, background 2, ..., background;
+}
+

+
+
Du kannst dies mit beiden Varianten, der verkürzten {{cssxref("background")}} Eigenschaft und dem Einzel-Eigenschafts-Selektor davon ausser {{cssxref("background-color")}}. Die folgenden Hintergrund Eigenschaften können als Liste festgelegt werden, eine pro Hintergrund: {{cssxref("background")}}, {{cssxref("background-attachment")}}, {{cssxref("background-clip")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}.

+
+
Beispiel

+
+
In diesem Beispiel werden drei Hintergründe übereinandergelegt: das Firefox Logo, ein linearer Farbverlauf und ein Bild mit Blasen:

+
+
.multi_bg_example {
+  background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png),
+                    url(https://mdn.mozillademos.org/files/11307/bubbles.png),
+                    linear-gradient(to right, rgba(30, 75, 115, 1),  rgba(255, 255, 255, 0));
+
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat;
+
+  background-position: bottom right,
+                       left,
+                       right;
+}
+

+
+
+
+
Ergebnis

+
+
{{EmbedLiveSample('Beispiel', '100%', '400')}}

+
+
Wie oben zu erkennen ist, liegt das Firefox Logo (als erstes aufgelistet) zuoberst, gefolgt vom Hintergrund mit Blasen, welcher wiederum auf dem Farbverlauf liegt. Jede nachfolgende Untereigenschaft ({{cssxref("background-repeat")}} und {{cssxref("background-position")}}) gilt für den entsprechenden Hintergrund. Demzufolge gilt der erste aufgelistete Wert für {{cssxref("background-repeat")}} für den ersten (vordersten) Hintergrund und so weiter.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_basic_user_interface/index.html b/files/de/web/css/css_basic_user_interface/index.html
new file mode 100644
index 0000000000..6b0f5e652e
--- /dev/null
+++ b/files/de/web/css/css_basic_user_interface/index.html
@@ -0,0 +1,76 @@
+---
+title: CSS Basic User Interface
+slug: Web/CSS/CSS_Basic_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Overview
+  - Reference
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+
{{CSSRef}}

+
+
CSS Basic User Interface ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.

+
+
Referenz

+
+
Einstellungen

+
+

+
    
+ 
  • {{CSSxRef("appearance")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("box-sizing")}}
    • 
+ 
  • {{CSSxRef("cursor")}}
    • 
+ 
  • {{CSSxRef("ime-mode")}} {{Deprecated_Inline}}
    • 
+ 
  • {{CSSxRef("nav-down")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("nav-left")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("nav-right")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("nav-up")}} {{Experimental_Inline}}
    • 
+ 
  • {{CSSxRef("outline")}}
    • 
+ 
  • {{CSSxRef("outline-width")}}
    • 
+ 
  • {{CSSxRef("outline-style")}}
    • 
+ 
  • {{CSSxRef("outline-color")}}
    • 
+ 
  • {{CSSxRef("outline-offset")}}
    • 
+ 
  • {{CSSxRef("resize")}}
    • 
+ 
  • {{CSSxRef("text-overflow")}}
    • 
+ 
  • {{CSSxRef("user-select")}} {{Experimental_Inline}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
Verwendung von URL Werten für die cursor Eigenschaft

+ 
Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezificationStatusKommentar
{{SpecName("CSS4 Basic UI")}}{{Spec2("CSS4 Basic UI")}} 
{{SpecName("CSS3 Basic UI")}}{{Spec2("CSS3 Basic UI")}} 
{{SpecName("CSS2.1", "ui.html")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition.

diff --git a/files/de/web/css/css_boxmodell/box-shadow_generator/index.html b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html
new file mode 100644
index 0000000000..b087898d03
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/box-shadow_generator/index.html
@@ -0,0 +1,2884 @@
+---
+title: Box-shadow Generator
+slug: Web/CSS/CSS_Boxmodell/Box-shadow_generator
+tags:
+  - CSS3
+  - Werkzeuge
+  - box-shadow
+translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator
+---
+
Dieses Werkzeug erlaubt es, CSS {{cssxref("box-shadow")}} Effekte zu erstellen, um Schlagschatteneffekte zu CSS Objekten hinzuzufügen.

+
+

+
box-shadow generator

+
+
HTML Content

+
+
<div id="container">
+    <div class="group section">
+        <div id="layer_manager">
+            <div class="group section">
+                <div class="button" data-type="add"> </div>
+                <div class="button" data-type="move-up"> </div>
+                <div class="button" data-type="move-down"> </div>
+            </div>
+            <div id="stack_container"></div>
+        </div>
+
+        <div id="preview_zone">
+            <div id="layer_menu" class="col span_12">
+                <div class="button" id="element" data-type="subject" data-title="element"> element </div>
+                <div class="button" id="before" data-type="subject" data-title=":before">
+                    :before
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="button" id="after" data-type="subject" data-title=":after">
+                    :after
+                    <span class="delete" data-type="disable"></span>
+                </div>
+                <div class="ui-checkbox" data-topic='before' data-label=":before"></div>
+                <div class="ui-checkbox" data-topic='after' data-label=":after"></div>
+            </div>
+
+            <div id="preview">
+                <div id="obj-element">
+                    <div class="content"> </div>
+                    <div id="obj-before"> </div>
+                    <div id="obj-after"> </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div id="controls" class="group section">
+        <div class="wrap-left">
+            <div class="colorpicker category">
+                <div class="title"> </div>
+                <div id="colorpicker" class="group">
+                    <div id="gradient" class="gradient">
+                        <div id="gradient_picker"> </div>
+                    </div>
+                    <div id="hue" data-topic="hue" class="hue">
+                        <div id="hue_selector"> </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="hue" data-title='H:' data-action="HSV"></div>
+                        <div class="input" data-topic="saturation" data-title='S:' data-action="HSV"></div>
+                        <div class="input" data-topic="value" data-title='V:' data-action="HSV"></div>
+                    </div>
+                    <div class="alpha">
+                        <div id="alpha" data-topic="alpha">
+                            <div id="alpha_selector"> </div>
+                        </div>
+                    </div>
+                    <div class="info">
+                        <div class="input" data-topic="r" data-title='R:' data-action="RGB"></div>
+                        <div class="input" data-topic="g" data-title='G:' data-action="RGB"></div>
+                        <div class="input" data-topic="b" data-title='B:' data-action="RGB"></div>
+                    </div>
+                    <div class="preview block">
+                        <div id="output_color"> </div>
+                    </div>
+                    <div class="block info">
+                        <div class="input" data-topic="a" data-title='alpha:' data-action="alpha"></div>
+                        <div class="input" data-topic="hexa" data-title='' data-action="hexa"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="wrap-right">
+
+            <div id="shadow_properties" class="category">
+                <div class="title"> Shadow properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> inset </div>
+                        <div class="ui-checkbox" data-topic='inset'></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position x </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posX"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posX" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posX" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Position y </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="posY"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="posY" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="posY" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Blur </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="blur"
+                            data-min="0" data-max="200" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="blur" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="blur" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Spread </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="spread"
+                            data-min="-100"    data-max="100" data-step="1" data-value="50">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="spread" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="spread" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="element_properties" class="category">
+                <div class="title"> Class element properties </div>
+                <div class="group">
+                    <div class="group property">
+                        <div class="ui-slider-name"> border </div>
+                        <div class="ui-checkbox" data-topic='border-state' data-state="true"></div>
+                    </div>
+                    <div id="z-index" class="slidergroup">
+                        <div class="ui-slider-name"> z-index </div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="z-index"
+                            data-min="-10" data-max="10" data-step="1"></div>
+                        <div class="ui-slider-btn-set" data-topic="z-index" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="z-index"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> top </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="top"
+                            data-min="-500" data-max="500" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="top" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="top" data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> left </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="left"
+                            data-min="-300" data-max="700" data-step="1"> </div>
+                        <div class="ui-slider-btn-set" data-topic="left" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="left" data-unit="px"></div>
+                    </div>
+                    <div id="transform_rotate" class="slidergroup">
+                        <div class="ui-slider-name"> Rotate </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="rotate"
+                            data-min="-360" data-max="360" data-step="1" data-value="0">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="rotate" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="rotate" data-unit="deg"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Width </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="width"
+                            data-min="0" data-max="1000" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="width" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="width"  data-unit="px"></div>
+                    </div>
+                    <div class="slidergroup">
+                        <div class="ui-slider-name"> Height </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="sub"></div>
+                        <div class="ui-slider" data-topic="height"
+                            data-min="0" data-max="400" data-step="1" data-value="200">
+                        </div>
+                        <div class="ui-slider-btn-set" data-topic="height" data-type="add"></div>
+                        <div class="ui-slider-input" data-topic="height" data-unit="px"></div>
+                    </div>
+                </div>
+            </div>
+
+            <div id="output" class="category">
+                <div id="menu" class="menu"></div>
+                <div class="title">    CSS Code </div>
+                <div class="group" style="border-top-left-radius: 0;">
+                    <div class="output" data-topic="element" data-name="element"
+                        data-prop="width height background-color position=[relative] box-shadow">
+                    </div>
+                    <div class="output" data-topic="before" data-name="element:before"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                    <div class="output" data-topic="after" data-name="element:after"
+                        data-prop="content=[&quot;&quot;] position=[absolute] width height top left z-index background-color box-shadow transform -webkit-transform -ms-transform">
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+

+
+
CSS Content

+
+
/*  GRID OF TWELVE
+ * ========================================================================== */
+
+.span_12 {
+	width: 100%;
+}
+
+.span_11 {
+	width: 91.46%;
+}
+
+.span_10 {
+	width: 83%;
+}
+
+.span_9 {
+	width: 74.54%;
+}
+
+.span_8 {
+	width: 66.08%;
+}
+
+.span_7 {
+	width: 57.62%;
+}
+
+.span_6 {
+	width: 49.16%;
+}
+
+.span_5 {
+	width: 40.7%;
+}
+
+.span_4 {
+	width: 32.24%;
+}
+
+.span_3 {
+	width: 23.78%;
+}
+
+.span_2 {
+	width: 15.32%;
+}
+
+.span_1 {
+	width: 6.86%;
+}
+
+
+/*  SECTIONS
+ * ========================================================================== */
+
+.section {
+	clear: both;
+	padding: 0px;
+	margin: 0px;
+}
+
+/*  GROUPING
+ * ========================================================================== */
+
+
+.group:before, .group:after {
+    content: "";
+    display: table;
+}
+
+.group:after {
+    clear:both;
+}
+
+.group {
+    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
+}
+
+/*  GRID COLUMN SETUP
+ * ========================================================================== */
+
+.col {
+	display: block;
+	float:left;
+	margin: 1% 0 1% 1.6%;
+}
+
+.col:first-child {
+	margin-left: 0;
+} /* all browsers except IE6 and lower */
+
+/*
+ * UI Slider
+ */
+
+.slidergroup {
+	height: 20px;
+	margin: 10px 0;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.slidergroup * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+.ui-slider {
+	height: 10px;
+	width: 200px;
+	margin: 4px 10px;
+	display: block;
+	border: 1px solid #999;
+	border-radius: 3px;
+	background: #EEE;
+}
+
+.ui-slider:hover {
+	cursor: pointer;
+}
+
+.ui-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-slider-pointer {
+	width: 13px;
+	height: 13px;
+	background-color: #EEE;
+	border: 1px solid #2C9FC9;
+	border-radius: 3px;
+	position: relative;
+	top: -3px;
+	left: 0%;
+}
+
+.ui-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 3px;
+	color: #FFF;
+	font-weight: bold;
+	text-align: center;
+}
+
+.ui-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+.ui-slider-input > input {
+	margin: 0 10px;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/*
+ * UI Button
+ */
+
+/* Checkbox */
+
+.ui-checkbox {
+	text-align: center;
+	font-size: 16px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	line-height: 1.5em;
+	color: #FFF;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-checkbox > input {
+ 	display: none;
+}
+
+.ui-checkbox > label {
+	font-size: 12px;
+	padding: 0.333em 1.666em 0.5em;
+	height: 1em;
+	line-height: 1em;
+
+	background-color: #888;
+	background-image: url("https://mdn.mozillademos.org/files/5683/disabled.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	color: #FFF;
+	border-radius: 3px;
+	font-weight: bold;
+	float: left;
+}
+
+.ui-checkbox .text {
+	padding-left: 34px;
+	background-position: center left 10px;
+}
+
+.ui-checkbox .left {
+	padding-right: 34px;
+	padding-left: 1.666em;
+	background-position: center right 10px;
+}
+
+.ui-checkbox > label:hover {
+	cursor: pointer;
+}
+
+.ui-checkbox > input:checked + label {
+	background-image: url("https://mdn.mozillademos.org/files/5681/checked.png");
+	background-color: #379B4A;
+}
+
+/*
+ * BOX SHADOW GENERATOR TOOL
+ */
+
+body {
+	max-width: 1000px;
+	height: 800px;
+	margin: 20px auto 0;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+#container {
+	width: 100%;
+	padding: 2px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/* container with shadows stacks */
+#stack_container {
+	height: 400px;
+	overflow: hidden;
+	position: relative;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#stack_container .container {
+	height: 100%;
+	width: 100%;
+	position: absolute;
+	left: 100%;
+	transition-property: left;
+	transition-duration: 0.5s;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+#stack_container .title {
+	text-align: center;
+	font-weight: bold;
+	line-height: 2em;
+	border-bottom: 1px solid #43A6E1;
+	color: #666;
+}
+
+
+/*
+ * Stack of Layers for shadow
+ */
+
+#layer_manager {
+	width: 17%;
+	background-color: #FEFEFE;
+	margin: 0 1% 0 0;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+
+#layer_manager .button {
+	width: 30%;
+	height: 25px;
+	margin:0 0 10px;
+	color: #333;
+	background-color: #EEE;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+
+	display: block;
+	background-position: center center;
+	background-repeat: no-repeat;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	float: left;
+}
+
+#layer_manager .button:hover {
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_manager [data-type='add'] {
+	background-image: url("https://mdn.mozillademos.org/files/5685/add-black.png");
+}
+
+#layer_manager [data-type='add']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5687/add-white.png");
+}
+
+#layer_manager [data-type='move-up'] {
+	background-image: url("https://mdn.mozillademos.org/files/5697/up-black.png");
+	margin-left: 5%;
+	margin-right: 5%;
+}
+
+#layer_manager [data-type='move-up']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5709/up-white.png");
+}
+
+#layer_manager [data-type='move-down'] {
+	background-image: url("https://mdn.mozillademos.org/files/5693/down-black.png");
+}
+
+#layer_manager [data-type='move-down']:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5695/down-white.png");
+}
+
+/* shadows classes */
+
+#layer_manager .node {
+	width: 100%;
+	margin: 5px 0;
+	padding: 5px;
+	text-align: center;
+	background-color: #EEE;
+	border: 1px solid #DDD;
+	font-size: 0.75em;
+	line-height: 1.5em;
+	color: #333;
+	border-radius: 3px;
+
+	position: relative;
+	display: block;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_manager .node:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	cursor: pointer;
+}
+
+/* active element styling */
+
+#layer_manager [data-active='layer'] {
+	color: #FFF;
+	border: none;
+	background-color: #379B4A;
+}
+
+#layer_manager [data-active='subject'] {
+	color: #FFF;
+	background-color: #467FC9;
+}
+
+/* delete button */
+
+#layer_manager .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	display: none;
+}
+
+#layer_manager .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_manager .node:hover .delete {
+	display: block;
+}
+
+
+#layer_manager .stack {
+	padding: 0 5px;
+	max-height: 90%;
+	overflow: auto;
+	overflow-x: hidden;
+}
+
+
+/*
+ * Layer Menu
+ */
+
+#layer_menu {
+	margin: 0 0 10px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button {
+	width: 100px;
+	margin: 0 5px 0 0;
+	padding: 2.5px;
+	color: #333;
+	background-color: #EEE;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+	font-size: 0.75em;
+	line-height: 1.5em;
+
+	position: relative;
+	display: block;
+	float: left;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#layer_menu .button:hover {
+	color: #FFF;
+	background-color: #3380C4;
+	border: 1px solid #3380C4;
+	cursor: pointer;
+}
+
+#layer_menu .delete {
+	width: 1.5em;
+	height: 100%;
+	float: right;
+	border-radius: 3px;
+	background-image: url("https://mdn.mozillademos.org/files/5689/delete-white.png");
+	background-position: center center;
+	background-repeat: no-repeat;
+	position: absolute;
+	top: 0;
+	right: 5px;
+	display: none;
+}
+
+#layer_menu .delete:hover {
+	background-image: url("https://mdn.mozillademos.org/files/5691/delete-yellow.png");
+}
+
+#layer_menu .button:hover .delete {
+	display: block;
+}
+
+
+/*
+ * active element styling
+ */
+
+#layer_menu [data-active='subject'] {
+	color: #FFF;
+	background-color: #379B4A;
+	border: 1px solid #379B4A;
+}
+
+
+/* Checkbox */
+
+#layer_menu .ui-checkbox > label {
+	height: 15px;
+	line-height: 17px;
+	font-weight: normal;
+	width: 46px;
+	margin: 0 5px 0 0;
+}
+
+#layer_menu .ui-checkbox > input:checked + label {
+	display: none;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+/*
+ * Preview Area
+ */
+
+#preview_zone {
+	width: 82%;
+	float: left;
+
+}
+
+
+#preview {
+	width: 100%;
+	height: 400px;
+	border: 1px solid #CCC;
+	border-radius: 3px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+	cursor: move;
+	float: left;
+}
+
+#preview .content {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+#obj-element {
+	width: 300px;
+	height: 100px;
+	border: 1px solid #CCC;
+	background: #FFF;
+	position: relative;
+}
+
+
+#obj-before {
+	height: 100%;
+	width: 100%;
+	background: #999;
+	border: 1px solid #CCC;
+	text-align: left;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+#obj-after {
+	height: 100%;
+	width: 100%;
+	background: #DDD;
+	border: 1px solid #CCC;
+	text-align: right;
+	display : block;
+	position: absolute;
+	z-index: -1;
+}
+
+
+/******************************************************************************/
+/******************************************************************************/
+
+/**
+ * Controls
+ */
+
+.wrap-left {
+	float: left;
+	overflow: hidden;
+}
+
+.wrap-right {
+	float: right;
+	overflow: hidden;
+}
+
+.wrap-left > * {
+	float: left;
+}
+
+.wrap-right > * {
+	float: right;
+}
+
+@media (min-width: 960px) {
+
+	.wrap-left {
+		width: 45%;
+	}
+
+	.wrap-right {
+		width: 55%;
+	}
+}
+
+
+@media (max-width: 959px) {
+
+	.wrap-left {
+		width: 30%;
+	}
+
+	.wrap-right {
+		width: 70%;
+	}
+}
+
+
+#controls {
+	color: #444;
+	margin: 10px 0 0 0;
+}
+
+
+#controls .category {
+	width: 500px;
+	margin: 0 auto 20px;
+	padding: 0;
+
+}
+
+#controls .category .title {
+	width: 100%;
+	height: 1.5em;
+	line-height: 1.5em;
+	color: #AAA;
+	text-align: right;
+}
+
+#controls .category > .group {
+	border: 1px solid #CCC;
+	border-radius: 3px;
+}
+
+
+/**
+ * 	Color Picker
+ */
+
+@media (min-width: 960px) {
+	#controls .colorpicker {
+		width: 420px;
+	}
+}
+
+@media (max-width: 959px) {
+	#controls .colorpicker {
+		width: 210px;
+	}
+}
+
+#colorpicker {
+	width: 100%;
+	margin: 0 auto;
+}
+
+#colorpicker .gradient {
+	width: 200px;
+	height: 200px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5707/picker_mask_200.png");
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background-color: #F00;
+	float: left;
+}
+
+#colorpicker .hue {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png");
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	float: left;
+}
+
+#colorpicker .alpha {
+	width: 200px;
+	height: 30px;
+	margin: 5px;
+	border: 1px solid #CCC;
+	float: left;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker #alpha {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/5703/alpha_mask.png");
+	background: -moz-linear-gradient(left, rgba(255, 0, 0, 0) 0%, rgba(255, 0, 0, 1) 100%);
+}
+
+#colorpicker #gradient_picker {
+	width: 0.5em;
+	height: 0.5em;
+	border-radius: 0.4em;
+	border: 2px solid #CCC;
+	position: relative;
+	top: 20%;
+	left: 20%;
+}
+
+#colorpicker #hue_selector,
+#colorpicker #alpha_selector {
+	width: 3px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+	left: 0%;
+}
+
+/* input HSV and RGB */
+#colorpicker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+#colorpicker .info * {
+	float: left;
+}
+
+#colorpicker .info input {
+	margin: 0;
+	text-align: center;
+	width: 30px;
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#colorpicker .info span {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	line-height: 20px;
+	display: block;
+}
+
+/* Preview color */
+#colorpicker .block {
+	width: 95px;
+	height: 54px;
+	float: left;
+	position: relative;
+}
+
+#colorpicker .preview {
+	margin: 5px;
+	border: 1px solid #CCC;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#colorpicker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+#colorpicker .preview > * {
+	width: 50%;
+	height: 100%;
+}
+
+#colorpicker #output_color {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 2;
+}
+
+#colorpicker .block .input {
+	float: right;
+}
+
+#colorpicker [data-topic="a"] > span {
+	width: 50px;
+}
+
+#colorpicker [data-topic="hexa"] {
+	float: right;
+	margin: 10px 0 0 0;
+}
+
+#colorpicker [data-topic="hexa"] > span {
+	display: none;
+}
+
+#colorpicker [data-topic="hexa"] > input {
+	width: 85px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+
+/*
+ * UI Components
+ */
+
+/* Property */
+
+.property {
+	height: 20px;
+	margin: 10px 0;
+}
+
+.property * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Slider */
+
+#controls .ui-slider-name {
+	margin: 0 10px 0 0;
+}
+
+/*
+ * Output code styling
+ */
+
+#output {
+	position: relative;
+}
+
+#output .menu {
+	max-width: 70%;
+	height: 20px;
+	position: absolute;
+	top: 2px;
+}
+
+#output .button {
+	width: 90px;
+	height: 22px;
+	margin: 0 5px 0 0;
+	text-align: center;
+	line-height: 20px;
+	font-size: 14px;
+	color: #FFF;
+	background-color: #999;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+	bottom: -5px;
+	float:left;
+}
+
+#output .button:hover {
+	color: #FFF;
+	background-color: #666;
+	cursor: pointer;
+}
+
+#output .menu [data-active="true"] {
+	color: #777;
+	background-color: #FFF;
+	border: 1px solid #CCC;
+	border-bottom: none;
+}
+
+#output .menu [data-topic="before"] {
+	left: 100px;
+}
+
+#output .menu [data-topic="after"] {
+	left: 200px;
+}
+
+#output .output {
+	width: 480px;
+	margin: 10px;
+	padding: 10px;
+	overflow: hidden;
+	color: #555;
+	font-size: 14px;
+	border: 1px dashed #CCC;
+	border-radius: 3px;
+	display: none;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+#output .css-property {
+	width: 100%;
+	float: left;
+	white-space: pre;
+}
+
+#output .name {
+	width: 35%;
+	float: left;
+}
+
+#output .value {
+	width: 65%;
+	float: left;
+}
+
+

+
+
JavaScript Content

+
+

+
+'use strict';
+
+/**
+ * UI-SlidersManager
+ */
+
+var SliderManager = (function SliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var Slider = function(node) {
+		var min = node.getAttribute('data-min') | 0;
+		var max = node.getAttribute('data-max') | 0;
+		var step = node.getAttribute('data-step') | 0;
+		var value = node.getAttribute('data-value') | 0;
+		var snap = node.getAttribute('data-snap');
+		var topic = node.getAttribute('data-topic');
+
+		this.min = min;
+		this.max = max > 0 ? max : 100;
+		this.step = step === 0 ? 1 : step;
+		this.value = value <= max && value >= min ? value : (min + max) / 2 | 0;
+		this.snap = snap === "true" ? true : false;
+		this.topic = topic;
+		this.node = node;
+
+		var pointer = document.createElement('div');
+		pointer.className = 'ui-slider-pointer';
+		node.appendChild(pointer);
+		this.pointer = pointer;
+
+		setMouseTracking(node, updateSlider.bind(this));
+
+		sliders[topic] = this;
+		setValue(topic, this.value);
+	}
+
+	var setButtonComponent = function setButtonComponent(node) {
+		var type = node.getAttribute('data-type');
+		var topic = node.getAttribute('data-topic');
+		if (type === "sub") {
+			node.textContent = '-';
+			node.addEventListener("click", function() {
+				decrement(topic);
+			});
+		}
+		if (type === "add") {
+			node.textContent = '+';
+			node.addEventListener("click", function() {
+				increment(topic);
+			});
+		}
+	}
+
+	var setInputComponent = function setInputComponent(node) {
+		var topic		= node.getAttribute('data-topic');
+		var unit_type	= node.getAttribute('data-unit');
+
+		var input = document.createElement('input');
+		var unit = document.createElement('span');
+		unit.textContent = unit_type;
+
+		input.setAttribute('type', 'text');
+		node.appendChild(input);
+		node.appendChild(unit);
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			setValue(topic, e.target.value | 0);
+		});
+
+		subscribe(topic, function(value) {
+			node.children[0].value = value;
+		});
+	}
+
+	var increment = function increment(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value + slider.step <= slider.max) {
+			slider.value += slider.step;
+			setValue(slider.topic, slider.value)
+			notify.call(slider);
+		}
+	};
+
+	var decrement = function decrement(topic) {
+		var slider = sliders[topic];
+		if (slider === null || slider === undefined)
+			return;
+
+		if (slider.value - slider.step >= slider.min) {
+			slider.value -= slider.step;
+			setValue(topic, slider.value)
+			notify.call(slider);
+		}
+	}
+
+	// this = Slider object
+	var updateSlider = function updateSlider(e) {
+		var node = this.node;
+		var pos = e.pageX - node.offsetLeft;
+		var width = node.clientWidth;
+		var delta = this.max - this.min;
+		var offset = this.pointer.clientWidth + 4; // border width * 2
+
+		if (pos < 0) pos = 0;
+		if (pos > width) pos = width;
+
+		var value = pos * delta / width | 0;
+		var precision = value % this.step;
+		value = value - precision + this.min;
+		if (precision > this.step / 2)
+			value = value + this.step;
+
+		if (this.snap)
+			pos =  (value - this.min) * width / delta;
+
+		this.pointer.style.left = pos - offset/2 + "px";
+		this.value = value;
+		node.setAttribute('data-value', value);
+		notify.call(this);
+	}
+
+	var setValue = function setValue(topic, value) {
+		var slider = sliders[topic];
+
+		if (value > slider.max || value < slider.min)
+			return;
+
+		var delta = slider.max - slider.min;
+		var width = slider.node.clientWidth;
+		var offset = slider.pointer.clientWidth;
+		var pos =  (value - slider.min) * width / delta;
+		slider.value = value;
+		slider.pointer.style.left = pos - offset / 2 + "px";
+		slider.node.setAttribute('data-value', value);
+		notify.call(slider);
+	}
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener("mousedown", function(e) {
+			callback(e);
+			document.addEventListener("mousemove", callback);
+		});
+
+		document.addEventListener("mouseup", function(e) {
+			document.removeEventListener("mousemove", callback);
+		});
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+
+		for (var i in subscribers[this.topic]) {
+			subscribers[this.topic][i](this.value);
+		}
+	}
+
+	var init = function init() {
+		var elem, size;
+
+		elem = document.querySelectorAll('.ui-slider-btn-set');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setButtonComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider-input');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			setInputComponent(elem[i]);
+
+		elem = document.querySelectorAll('.ui-slider');
+		size = elem.length;
+		for (var i = 0; i < size; i++)
+			new Slider(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+/**
+ * UI-ButtonManager
+ */
+
+var ButtonManager = (function CheckBoxManager() {
+
+	var subscribers = [];
+	var buttons = [];
+
+	var CheckBox = function CheckBox(node) {
+		var topic = node.getAttribute('data-topic');
+		var state = node.getAttribute('data-state');
+		var name = node.getAttribute('data-label');
+		var align = node.getAttribute('data-text-on');
+
+		state = (state === "true");
+
+		var checkbox = document.createElement("input");
+		var label = document.createElement("label");
+
+		var id = 'checkbox-' + topic;
+		checkbox.id = id;
+		checkbox.setAttribute('type', 'checkbox');
+		checkbox.checked = state;
+
+		label.setAttribute('for', id);
+		if (name) {
+			label.className = 'text';
+			if (align)
+				label.className += ' ' + align;
+			label.textContent = name;
+		}
+
+		node.appendChild(checkbox);
+		node.appendChild(label);
+
+		this.node = node;
+		this.topic = topic;
+		this.checkbox = checkbox;
+
+		checkbox.addEventListener('change', function(e) {
+			notify.call(this);
+		}.bind(this));
+
+		buttons[topic] = this;
+	}
+
+	var getNode =  function getNode(topic) {
+		return buttons[topic].node;
+	}
+
+	var setValue = function setValue(topic, value) {
+		try {
+			buttons[topic].checkbox.checked = value;
+			notify.call(buttons[topic]);
+		}
+		catch(error) {
+			console.log(error, topic, value);
+		}
+	}
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	}
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	}
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.checkbox.checked);
+	}
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-checkbox');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new CheckBox(elem[i]);
+	}
+
+	return {
+		init : init,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe
+	}
+
+})();
+
+
+window.addEventListener("load", function(){
+	BoxShadow.init();
+});
+
+var BoxShadow = (function BoxShadow() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	/**
+	 * RGBA Color class
+	 */
+
+	function Color() {
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log("Typeof instance not Color");
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+	}
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (red != undefined)
+			this.r = red | 0;
+		if (green != undefined)
+			this.g = green | 0;
+		if (blue != undefined)
+			this.b = blue | 0;
+		if (alpha != undefined)
+			this.a = alpha | 0;
+	}
+
+	/**
+	 * HSV/HSB (hue, saturation, value / brightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 */
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.updateRGB();
+	}
+
+	Color.prototype.updateRGB = function updateRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision;
+		X = (X + m) * precision;
+		m = m * precision;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	}
+
+	Color.prototype.updateHSV = function updateHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	}
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value)
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,"$1$1$2$2$3$3");
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+	}
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	}
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = "(" + this.r + ", " + this.g + ", " + this.b;
+		var a = '';
+		var v = '';
+		if (this.a !== 1) {
+			a = 'a';
+			v = ', ' + this.a;
+		}
+
+		var value = "rgb" + a + rgb + v + ")";
+		return value;
+	}
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	}
+
+	/**
+	 * Shadow Object
+	 */
+	function Shadow() {
+		this.inset  = false;
+		this.posX   = 5;
+		this.posY   = -5;
+		this.blur   = 5;
+		this.spread = 0;
+		this.color  = new Color();
+
+		var hue			= (Math.random() * 360) | 0;
+		var saturation	= (Math.random() * 75) | 0;
+		var value 		= (Math.random() * 50 + 50) | 0;
+		this.color.setHSV(hue, saturation, value, 1);
+	}
+
+	Shadow.prototype.computeCSS = function computeCSS() {
+		var value = "";
+		if (this.inset === true)
+			value += "inset ";
+		value += this.posX + "px ";
+		value += this.posY + "px ";
+		value += this.blur + "px ";
+		value += this.spread + "px ";
+		value += this.color.getColor();
+
+		return value;
+	}
+
+	Shadow.prototype.toggleInset = function toggleInset(value) {
+		if (value !== undefined || typeof value === "boolean")
+			this.inset = value;
+		else
+			this.inset = this.inset === true ? false : true;
+	}
+
+	Shadow.prototype.copy = function copy(obj) {
+		if(obj instanceof Shadow !== true) {
+			console.log("Typeof instance not Shadow");
+			return;
+		}
+
+		this.inset  = obj.inset;
+		this.posX   = obj.posX;
+		this.posY   = obj.posY;
+		this.blur   = obj.blur;
+		this.spread = obj.spread;
+		this.color.copy(obj.color);
+	}
+
+	/**
+	 * Color Picker
+	 */
+	var ColoPicker = (function ColoPicker() {
+
+		var colorpicker;
+		var hue_area;
+		var gradient_area;
+		var alpha_area;
+		var gradient_picker;
+		var hue_selector;
+		var alpha_selector;
+		var pick_object;
+		var info_rgb;
+		var info_hsv;
+		var info_hexa;
+		var output_color;
+		var color = new Color();
+		var subscribers = [];
+
+		var updateColor = function updateColor(e) {
+			var x = e.pageX - gradient_area.offsetLeft;
+			var y = e.pageY - gradient_area.offsetTop;
+
+			// width and height should be the same
+			var size = gradient_area.clientWidth;
+
+			if (x > size)
+				x = size;
+			if (y > size)
+				y = size;
+
+			if (x < 0) x = 0;
+			if (y < 0) y = 0;
+
+			var value = 100 - (y * 100 / size) | 0;
+			var saturation = x * 100 / size | 0;
+
+			color.setHSV(color.hue, saturation, value);
+			// should update just
+			// color pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateHue = function updateHue(e) {
+			var x = e.pageX - hue_area.offsetLeft;
+			var width = hue_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			var hue = ((360 * x) / width) | 0;
+			if (hue === 360) hue = 359;
+
+			color.setHSV(hue, color.saturation, color.value);
+
+			// should update just
+			// hue pointer location
+			// picker area background
+			// alpha area background
+			updateUI();
+			notify("color", color);
+		}
+
+		var updateAlpha = function updateAlpha(e) {
+			var x = e.pageX - alpha_area.offsetLeft;
+			var width = alpha_area.clientWidth;
+
+			if (x < 0) x = 0;
+			if (x > width) x = width;
+
+			color.a = (x / width).toFixed(2);
+
+			// should update just
+			// alpha pointer location
+			updateUI();
+			notify("color", color);
+		}
+
+		var setHueGfx = function setHueGfx(hue) {
+			var sat = color.saturation;
+			var val = color.value;
+			var alpha = color.a;
+
+			color.setHSV(hue, 100, 100);
+			gradient_area.style.backgroundColor = color.getHexa();
+
+			color.a = 0;
+			var start = color.getRGBA();
+			color.a = 1;
+			var end = color.getRGBA();
+			color.a = alpha;
+
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+		}
+
+		var updateUI = function updateUI() {
+			var x, y;		// coordinates
+			var size;		// size of the area
+			var offset;		// pointer graphic selector offset
+
+			// Set color pointer location
+			size = gradient_area.clientWidth;
+			offset = gradient_picker.clientWidth / 2 + 2;
+
+			x = (color.saturation * size / 100) | 0;
+			y = size - (color.value * size / 100) | 0;
+
+			gradient_picker.style.left = x - offset + "px";
+			gradient_picker.style.top = y - offset + "px";
+
+			// Set hue pointer location
+			size = hue_area.clientWidth;
+			offset = hue_selector.clientWidth/2;
+			x = (color.hue * size / 360 ) | 0;
+			hue_selector.style.left = x - offset + "px";
+
+			// Set alpha pointer location
+			size = alpha_area.clientWidth;
+			offset = alpha_selector.clientWidth/2;
+			x = (color.a * size) | 0;
+			alpha_selector.style.left = x - offset + "px";
+
+			// Set picker area background
+			var nc = new Color();
+			nc.copy(color);
+			if (nc.hue === 360) nc.hue = 0;
+			nc.setHSV(nc.hue, 100, 100);
+			gradient_area.style.backgroundColor = nc.getHexa();
+
+			// Set alpha area background
+			nc.copy(color);
+			nc.a = 0;
+			var start = nc.getRGBA();
+			nc.a = 1;
+			var end = nc.getRGBA();
+			var gradient = '-moz-linear-gradient(left, ' +	start + '0%, ' + end + ' 100%)';
+			alpha_area.style.background = gradient;
+
+			// Update color info
+			notify("color", color);
+			notify("hue", color.hue);
+			notify("saturation", color.saturation);
+			notify("value", color.value);
+			notify("r", color.r);
+			notify("g", color.g);
+			notify("b", color.b);
+			notify("a", color.a);
+			notify("hexa", color.getHexa());
+			output_color.style.backgroundColor = color.getRGBA();
+		}
+
+		var setInputComponent = function setInputComponent(node) {
+			var topic = node.getAttribute('data-topic');
+			var title = node.getAttribute('data-title');
+			var action = node.getAttribute('data-action');
+			title = title === null ? '' : title;
+
+			var input = document.createElement('input');
+			var info = document.createElement('span');
+			info.textContent = title;
+
+			input.setAttribute('type', 'text');
+			input.setAttribute('data-action', 'set-' + action + '-' + topic);
+			node.appendChild(info);
+			node.appendChild(input);
+
+			input.addEventListener('click', function(e) {
+				this.select();
+			});
+
+			input.addEventListener('change', function(e) {
+				if (action === 'HSV')
+					inputChangeHSV(topic);
+				if (action === 'RGB')
+					inputChangeRGB(topic);
+				if (action === 'alpha')
+					inputChangeAlpha(topic);
+				if (action === 'hexa')
+					inputChangeHexa(topic);
+			});
+
+			subscribe(topic, function(value) {
+				node.children[1].value = value;
+			});
+		}
+
+		var inputChangeHSV = function actionHSV(topic) {
+			var selector = "[data-action='set-HSV-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value < 360)
+				color[topic] = value;
+
+			color.updateRGB();
+			updateUI();
+		}
+
+		var inputChangeRGB = function inputChangeRGB(topic) {
+			var selector = "[data-action='set-RGB-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseInt(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 255)
+				color[topic] = value;
+
+			color.updateHSV();
+			updateUI();
+		}
+
+		var inputChangeAlpha = function inputChangeAlpha(topic) {
+			var selector = "[data-action='set-alpha-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = parseFloat(node.value);
+
+			if (typeof value === 'number' && isNaN(value) === false &&
+				value >= 0 && value <= 1)
+				color.a = value.toFixed(2);
+
+			updateUI();
+		}
+
+		var inputChangeHexa = function inputChangeHexa(topic) {
+			var selector = "[data-action='set-hexa-" + topic + "']";
+			var node = document.querySelector("#colorpicker " + selector);
+			var value = node.value;
+			color.setHexa(value);
+			color.updateHSV();
+			updateUI();
+		}
+
+		var setMouseTracking = function setMouseTracking(elem, callback) {
+
+			elem.addEventListener("mousedown", function(e) {
+				callback(e);
+				document.addEventListener("mousemove", callback);
+			});
+
+			document.addEventListener("mouseup", function(e) {
+				document.removeEventListener("mousemove", callback);
+			});
+		}
+
+		/*
+		 * Observer
+		 */
+		var setColor = function setColor(obj) {
+			if(obj instanceof Color !== true) {
+				console.log("Typeof instance not Color");
+				return;
+			}
+			color.copy(obj);
+			updateUI();
+		}
+
+		var subscribe = function subscribe(topic, callback) {
+			if (subscribers[topic] === undefined)
+				subscribers[topic] = [];
+
+			subscribers[topic].push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(topic, value) {
+			for (var i in subscribers[topic])
+				subscribers[topic][i](value);
+		}
+
+		var init = function init() {
+			colorpicker		= getElemById("colorpicker");
+			hue_area		= getElemById("hue");
+			gradient_area	= getElemById("gradient");
+			alpha_area		= getElemById("alpha");
+			gradient_picker	= getElemById("gradient_picker");
+			hue_selector	= getElemById("hue_selector");
+			alpha_selector	= getElemById("alpha_selector");
+			output_color	= getElemById("output_color");
+
+			var elem = document.querySelectorAll('#colorpicker .input');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				setInputComponent(elem[i]);
+
+			setMouseTracking(gradient_area, updateColor);
+			setMouseTracking(hue_area, updateHue);
+			setMouseTracking(alpha_area, updateAlpha);
+
+		}
+
+		return {
+			init : init,
+			setColor : setColor,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/**
+	 * Shadow dragging
+	 */
+	var PreviewMouseTracking = (function Drag() {
+		var active = false;
+		var lastX = 0;
+		var lastY = 0;
+		var subscribers = [];
+
+		var init = function init(id) {
+			var elem = getElemById(id);
+			elem.addEventListener('mousedown', dragStart, false);
+			document.addEventListener('mouseup', dragEnd, false);
+		}
+
+		var dragStart = function dragStart(e) {
+			if (e.button !== 0)
+				return;
+
+			active = true;
+			lastX = e.clientX;
+			lastY = e.clientY;
+			document.addEventListener('mousemove', mouseDrag, false);
+		}
+
+		var dragEnd = function dragEnd(e) {
+			if (e.button !== 0)
+				return;
+
+			if (active === true) {
+				active = false;
+				document.removeEventListener('mousemove', mouseDrag, false);
+			}
+		}
+
+		var mouseDrag = function mouseDrag(e) {
+			notify(e.clientX - lastX, e.clientY - lastY);
+			lastX = e.clientX;
+			lastY = e.clientY;
+		}
+
+		var subscribe = function subscribe(callback) {
+			subscribers.push(callback);
+		}
+
+		var unsubscribe = function unsubscribe(callback) {
+			var index = subscribers.indexOf(callback);
+			subscribers.splice(index, 1);
+		}
+
+		var notify = function notify(deltaX, deltaY) {
+			for (var i in subscribers)
+				subscribers[i](deltaX, deltaY);
+		}
+
+		return {
+			init : init,
+			subscribe : subscribe,
+			unsubscribe : unsubscribe
+		}
+
+	})();
+
+	/*
+	 * Element Class
+	 */
+	var CssClass = function CssClass(id) {
+		this.left = 0;
+		this.top = 0;
+		this.rotate = 0;
+		this.width = 300;
+		this.height = 100;
+		this.display = true;
+		this.border = true;
+		this.zIndex = -1;
+		this.bgcolor = new Color();
+		this.id = id;
+		this.node = getElemById('obj-' + id);
+		this.object = getElemById(id);
+		this.shadowID = null;
+		this.shadows = []
+		this.render = [];
+		this.init();
+	}
+
+	CssClass.prototype.init = function init() {
+		this.left = ((this.node.parentNode.clientWidth - this.node.clientWidth) / 2) | 0;
+		this.top = ((this.node.parentNode.clientHeight - this.node.clientHeight) / 2) | 0;
+
+		this.setTop(this.top);
+		this.setLeft(this.left);
+		this.setHeight(this.height);
+		this.setWidth(this.width);
+		this.bgcolor.setHSV(0, 0, 100);
+		this.updateBgColor(this.bgcolor);
+	}
+
+	CssClass.prototype.updatePos = function updatePos(deltaX, deltaY) {
+		this.left += deltaX;
+		this.top += deltaY;
+		this.node.style.top = this.top + "px";
+		this.node.style.left = this.left + "px";
+		SliderManager.setValue("left", this.left);
+		SliderManager.setValue("top", this.top);
+	}
+
+	CssClass.prototype.setLeft = function setLeft(value) {
+		this.left = value;
+		this.node.style.left = this.left + "px";
+		OutputManager.updateProperty(this.id, 'left', this.left + 'px');
+	}
+
+	CssClass.prototype.setTop = function setTop(value) {
+		this.top = value;
+		this.node.style.top = this.top + 'px';
+		OutputManager.updateProperty(this.id, 'top', this.top + 'px');
+	}
+
+	CssClass.prototype.setWidth = function setWidth(value) {
+		this.width = value;
+		this.node.style.width = this.width + 'px';
+		OutputManager.updateProperty(this.id, 'width', this.width + 'px');
+	}
+
+	CssClass.prototype.setHeight = function setHeight(value) {
+		this.height = value;
+		this.node.style.height = this.height + 'px';
+		OutputManager.updateProperty(this.id, 'height', this.height + 'px');
+	}
+
+	// Browser support
+	CssClass.prototype.setRotate = function setRotate(value) {
+		var cssvalue = 'rotate(' + value +'deg)';
+
+		this.node.style.transform = cssvalue;
+		this.node.style.webkitTransform = cssvalue;
+		this.node.style.msTransform = cssvalue;
+
+		if (value !== 0) {
+			if (this.rotate === 0) {
+				OutputManager.toggleProperty(this.id, 'transform', true);
+				OutputManager.toggleProperty(this.id, '-webkit-transform', true);
+				OutputManager.toggleProperty(this.id, '-ms-transform', true);
+			}
+		}
+		else {
+			OutputManager.toggleProperty(this.id, 'transform', false);
+			OutputManager.toggleProperty(this.id, '-webkit-transform', false);
+			OutputManager.toggleProperty(this.id, '-ms-transform', false);
+		}
+
+		OutputManager.updateProperty(this.id, 'transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-webkit-transform', cssvalue);
+		OutputManager.updateProperty(this.id, '-ms-transform', cssvalue);
+		this.rotate = value;
+	}
+
+	CssClass.prototype.setzIndex = function setzIndex(value) {
+		this.node.style.zIndex = value;
+		OutputManager.updateProperty(this.id, 'z-index', value);
+		this.zIndex = value;
+	}
+
+	CssClass.prototype.toggleDisplay = function toggleDisplay(value) {
+		if (typeof value !== "boolean" || this.display === value)
+			return;
+
+		this.display = value;
+		var display = this.display === true ? "block" : "none";
+		this.node.style.display = display;
+		this.object.style.display = display;
+	}
+
+	CssClass.prototype.toggleBorder = function toggleBorder(value) {
+		if (typeof value !== "boolean" || this.border === value)
+			return;
+
+		this.border = value;
+		var border = this.border === true ? "1px solid #CCC" : "none";
+		this.node.style.border = border;
+	}
+
+	CssClass.prototype.updateBgColor = function updateBgColor(color) {
+		this.bgcolor.copy(color);
+		this.node.style.backgroundColor = color.getColor();
+		OutputManager.updateProperty(this.id, 'background-color', color.getColor());
+	}
+
+	CssClass.prototype.updateShadows = function updateShadows() {
+		if (this.render.length === 0)
+			OutputManager.toggleProperty(this.id, 'box-shadow', false);
+		if (this.render.length === 1)
+			OutputManager.toggleProperty(this.id, 'box-shadow', true);
+
+		this.node.style.boxShadow = this.render.join(", ");
+		OutputManager.updateProperty(this.id, 'box-shadow', this.render.join(", \n"));
+
+	}
+
+
+	/**
+	 * Tool Manager
+	 */
+	var Tool = (function Tool() {
+
+		var preview;
+		var classes = [];
+		var active = null;
+		var animate = false;
+
+		/*
+		 * Toll actions
+		 */
+		var addCssClass = function addCssClass(id) {
+			classes[id] = new CssClass(id);
+		}
+
+		var setActiveClass = function setActiveClass(id) {
+			active = classes[id];
+			active.shadowID = null;
+			ColoPicker.setColor(classes[id].bgcolor);
+			SliderManager.setValue("top", active.top);
+			SliderManager.setValue("left", active.left);
+			SliderManager.setValue("rotate", active.rotate);
+			SliderManager.setValue("z-index", active.zIndex);
+			SliderManager.setValue("width", active.width);
+			SliderManager.setValue("height", active.height);
+			ButtonManager.setValue("border-state", active.border);
+			active.updateShadows();
+		}
+
+		var disableClass = function disableClass(topic) {
+			classes[topic].toggleDisplay(false);
+			ButtonManager.setValue(topic, false);
+		}
+
+		var addShadow = function addShadow(position) {
+			if (animate === true)
+				return -1;
+
+			active.shadows.splice(position, 0, new Shadow());
+			active.render.splice(position, 0, null);
+		}
+
+		var swapShadow = function swapShadow(id1, id2) {
+			var x = active.shadows[id1];
+			active.shadows[id1] = active.shadows[id2];
+			active.shadows[id2] = x;
+			updateShadowCSS(id1);
+			updateShadowCSS(id2);
+		}
+
+		var deleteShadow = function deleteShadow(position) {
+			active.shadows.splice(position, 1);
+			active.render.splice(position, 1);
+			active.updateShadows();
+		}
+
+		var setActiveShadow = function setActiveShadow(id, glow) {
+			active.shadowID = id;
+			ColoPicker.setColor(active.shadows[id].color);
+			ButtonManager.setValue("inset", active.shadows[id].inset);
+			SliderManager.setValue("blur", active.shadows[id].blur);
+			SliderManager.setValue("spread", active.shadows[id].spread);
+			SliderManager.setValue("posX", active.shadows[id].posX);
+			SliderManager.setValue("posY", active.shadows[id].posY);
+			if (glow === true)
+				addGlowEffect(id);
+		}
+
+		var addGlowEffect = function addGlowEffect(id) {
+			if (animate === true)
+				return;
+
+			animate = true;
+			var store = new Shadow();
+			var shadow = active.shadows[id];
+
+			store.copy(shadow);
+			shadow.color.setRGBA(40, 125, 200, 1);
+			shadow.blur = 10;
+			shadow.spread = 10;
+
+			active.node.style.transition = "box-shadow 0.2s";
+			updateShadowCSS(id);
+
+			setTimeout(function() {
+				shadow.copy(store);
+				updateShadowCSS(id);
+				setTimeout(function() {
+					active.node.style.removeProperty("transition");
+					animate = false;
+				}, 100);
+			}, 200);
+		}
+
+		var updateActivePos = function updateActivePos(deltaX, deltaY) {
+			if (active.shadowID === null)
+				active.updatePos(deltaX, deltaY);
+			else
+				updateShadowPos(deltaX, deltaY);
+		}
+
+		/*
+		 * Shadow properties
+		 */
+		var updateShadowCSS = function updateShadowCSS(id) {
+			active.render[id] = active.shadows[id].computeCSS();
+			active.updateShadows();
+		}
+
+		var toggleShadowInset = function toggleShadowInset(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].toggleInset(value);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowPos = function updateShadowPos(deltaX, deltaY) {
+			var shadow = active.shadows[active.shadowID];
+			shadow.posX += deltaX;
+			shadow.posY += deltaY;
+			SliderManager.setValue("posX", shadow.posX);
+			SliderManager.setValue("posY", shadow.posY);
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosX = function setShadowPosX(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posX = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowPosY = function setShadowPosY(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].posY = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowBlur = function setShadowBlur(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].blur = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var setShadowSpread = function setShadowSpread(value) {
+			if (active.shadowID === null)
+				return;
+			active.shadows[active.shadowID].spread = value;
+			updateShadowCSS(active.shadowID);
+		}
+
+		var updateShadowColor = function updateShadowColor(color) {
+			active.shadows[active.shadowID].color.copy(color);
+			updateShadowCSS(active.shadowID);
+		}
+
+		/*
+		 * Element Properties
+		 */
+		var updateColor = function updateColor(color) {
+			if (active.shadowID === null)
+				active.updateBgColor(color);
+			else
+				updateShadowColor(color);
+		}
+
+		var init = function init() {
+			preview = getElemById("preview");
+
+			ColoPicker.subscribe("color", updateColor);
+			PreviewMouseTracking.subscribe(updateActivePos);
+
+			// Affects shadows
+			ButtonManager.subscribe("inset", toggleShadowInset);
+			SliderManager.subscribe("posX", setShadowPosX);
+			SliderManager.subscribe("posY", setShadowPosY);
+			SliderManager.subscribe("blur", setShadowBlur);
+			SliderManager.subscribe("spread", setShadowSpread);
+
+			// Affects element
+			SliderManager.subscribe("top", function(value){
+				active.setTop(value);
+			});
+			SliderManager.subscribe("left", function(value){
+				active.setLeft(value);
+			});
+			SliderManager.subscribe("rotate", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setRotate(value);
+			});
+
+			SliderManager.subscribe("z-index", function(value) {
+				if (active == classes["element"])
+					return;
+				active.setzIndex(value);
+			});
+
+			SliderManager.subscribe("width", function(value) {
+				active.setWidth(value)
+			});
+
+			SliderManager.subscribe("height", function(value) {
+				active.setHeight(value)
+			});
+
+			// Actions
+			classes['before'].top = -30;
+			classes['before'].left = -30;
+			classes['after'].top = 30;
+			classes['after'].left = 30;
+			classes['before'].toggleDisplay(false);
+			classes['after'].toggleDisplay(false);
+			ButtonManager.setValue('before', false);
+			ButtonManager.setValue('after', false);
+
+			ButtonManager.subscribe("before", classes['before'].toggleDisplay.bind(classes['before']));
+			ButtonManager.subscribe("after", classes['after'].toggleDisplay.bind(classes['after']));
+
+			ButtonManager.subscribe("border-state", function(value) {
+				active.toggleBorder(value);
+			});
+
+		}
+
+		return {
+			init 			: init,
+			addShadow		: addShadow,
+			swapShadow		: swapShadow,
+			addCssClass		: addCssClass,
+			disableClass	: disableClass,
+			deleteShadow	: deleteShadow,
+			setActiveClass	: setActiveClass,
+			setActiveShadow : setActiveShadow
+		}
+
+	})();
+
+	/**
+	 * Layer Manager
+	 */
+	var LayerManager = (function LayerManager() {
+		var stacks = [];
+		var active = {
+			node : null,
+			stack : null
+		}
+		var elements = {};
+
+		var mouseEvents = function mouseEvents(e) {
+			var node = e.target;
+			var type = node.getAttribute('data-type');
+
+			if (type === 'subject')
+				setActiveStack(stacks[node.id]);
+
+			if (type === 'disable') {
+				Tool.disableClass(node.parentNode.id);
+				setActiveStack(stacks['element']);
+			}
+
+			if (type === 'add')
+				active.stack.addLayer();
+
+			if (type === 'layer')
+				active.stack.setActiveLayer(node);
+
+			if (type === 'delete')
+				active.stack.deleteLayer(node.parentNode);
+
+			if (type === 'move-up')
+				active.stack.moveLayer(1);
+
+			if (type === 'move-down')
+				active.stack.moveLayer(-1);
+		}
+
+		var setActiveStack = function setActiveStack(stackObj) {
+			active.stack.hide();
+			active.stack = stackObj;
+			active.stack.show();
+		}
+
+		/*
+		 * Stack object
+		 */
+		var Stack = function Stack(subject) {
+			var S = document.createElement('div');
+			var title = document.createElement('div');
+			var stack = document.createElement('div');
+
+			S.className = 'container';
+			stack.className = 'stack';
+			title.className = 'title';
+			title.textContent = subject.getAttribute('data-title');
+			S.appendChild(title);
+			S.appendChild(stack);
+
+			this.id = subject.id;
+			this.container = S;
+			this.stack = stack;
+			this.subject = subject;
+			this.order = [];
+			this.uid = 0;
+			this.count = 0;
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.addLayer = function addLayer() {
+			if (Tool.addShadow(this.layerID) == -1)
+				return;
+
+			var uid = this.getUID();
+			var layer = this.createLayer(uid);
+
+			if (this.layer === null && this.stack.children.length >= 1)
+				this.layer = this.stack.children[0];
+
+			this.stack.insertBefore(layer, this.layer);
+			this.order.splice(this.layerID, 0, uid);
+			this.count++;
+			this.setActiveLayer(layer);
+		}
+
+		Stack.prototype.createLayer = function createLayer(uid) {
+			var layer = document.createElement('div');
+			var del = document.createElement('span');
+
+			layer.className = 'node';
+			layer.setAttribute('data-shid', uid);
+			layer.setAttribute('data-type', 'layer');
+			layer.textContent = 'shadow ' + uid;
+
+			del.className = 'delete';
+			del.setAttribute('data-type', 'delete');
+
+			layer.appendChild(del);
+			return layer;
+		}
+
+		Stack.prototype.getUID = function getUID() {
+			return this.uid++;
+		}
+
+		// SOLVE IE BUG
+		Stack.prototype.moveLayer = function moveLayer(direction) {
+			if (this.count <= 1 || this.layer === null)
+				return;
+			if (direction === -1 && this.layerID === (this.count - 1) )
+				return;
+			if (direction === 1 && this.layerID === 0 )
+				return;
+
+			if (direction === -1) {
+				var before = null;
+				Tool.swapShadow(this.layerID, this.layerID + 1);
+				this.swapOrder(this.layerID, this.layerID + 1);
+				this.layerID += 1;
+
+				if (this.layerID + 1 !== this.count)
+					before = this.stack.children[this.layerID + 1];
+
+				this.stack.insertBefore(this.layer, before);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+
+			if (direction === 1) {
+				Tool.swapShadow(this.layerID, this.layerID - 1);
+				this.swapOrder(this.layerID, this.layerID - 1);
+				this.layerID -= 1;
+				this.stack.insertBefore(this.layer, this.stack.children[this.layerID]);
+				Tool.setActiveShadow(this.layerID, false);
+			}
+		}
+
+		Stack.prototype.swapOrder = function swapOrder(pos1, pos2) {
+			var x = this.order[pos1];
+			this.order[pos1] = this.order[pos2];
+			this.order[pos2] = x;
+		}
+
+		Stack.prototype.deleteLayer = function deleteLayer(node) {
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			var index = this.order.indexOf(shadowID);
+			this.stack.removeChild(this.stack.children[index]);
+			this.order.splice(index, 1);
+			this.count--;
+
+			Tool.deleteShadow(index);
+
+			if (index > this.layerID)
+				return;
+
+			if (index == this.layerID) {
+				if (this.count >= 1) {
+					this.layerID = 0;
+					this.setActiveLayer(this.stack.children[0], true);
+				}
+				else {
+					this.layer = null;
+					this.show();
+				}
+			}
+
+			if (index < this.layerID) {
+				this.layerID--;
+				Tool.setActiveShadow(this.layerID, true);
+			}
+
+		}
+
+		Stack.prototype.setActiveLayer = function setActiveLayer(node) {
+			elements.shadow_properties.style.display = 'block';
+			elements.element_properties.style.display = 'none';
+
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = node;
+			this.layer.setAttribute('data-active', 'layer');
+
+			var shadowID =  node.getAttribute('data-shid') | 0;
+			this.layerID = this.order.indexOf(shadowID);
+			Tool.setActiveShadow(this.layerID, true);
+		}
+
+		Stack.prototype.unsetActiveLayer = function unsetActiveLayer() {
+			if (this.layer)
+				this.layer.removeAttribute('data-active');
+
+			this.layer = null;
+			this.layerID = 0;
+		}
+
+		Stack.prototype.hide = function hide() {
+			this.unsetActiveLayer();
+			this.subject.removeAttribute('data-active');
+			var style = this.container.style;
+			style.left = '100%';
+			style.zIndex = '0';
+		}
+
+		Stack.prototype.show = function show() {
+			elements.shadow_properties.style.display = 'none';
+			elements.element_properties.style.display = 'block';
+
+			if (this.id === 'element') {
+				elements.zIndex.style.display = 'none';
+				elements.transform_rotate.style.display = 'none';
+			}
+			else {
+				elements.zIndex.style.display = 'block';
+				elements.transform_rotate.style.display = 'block';
+			}
+
+			this.subject.setAttribute('data-active', 'subject');
+			var style = this.container.style;
+			style.left = '0';
+			style.zIndex = '10';
+			Tool.setActiveClass(this.id);
+		}
+
+		function init() {
+
+			var elem, size;
+			var layerManager = getElemById("layer_manager");
+			var layerMenu = getElemById("layer_menu");
+			var container = getElemById("stack_container");
+
+			elements.shadow_properties = getElemById('shadow_properties');
+			elements.element_properties = getElemById('element_properties');
+			elements.transform_rotate = getElemById('transform_rotate');
+			elements.zIndex = getElemById('z-index');
+
+			elem = document.querySelectorAll('#layer_menu [data-type="subject"]');
+			size = elem.length;
+
+			for (var i = 0; i < size; i++) {
+				var S = new Stack(elem[i]);
+				stacks[elem[i].id] = S;
+				container.appendChild(S.container);
+				Tool.addCssClass(elem[i].id);
+			}
+
+			active.stack = stacks['element'];
+			stacks['element'].show();
+
+			layerManager.addEventListener("click", mouseEvents);
+			layerMenu.addEventListener("click", mouseEvents);
+
+			ButtonManager.subscribe("before", function(value) {
+				if (value === false && active.stack === stacks['before'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['before'])
+					setActiveStack(stacks['before'])
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				if (value === false && active.stack === stacks['after'])
+					setActiveStack(stacks['element'])
+				if (value === true && active.stack !== stacks['after'])
+					setActiveStack(stacks['after'])
+			});
+		}
+
+		return {
+			init : init
+		}
+	})();
+
+	/*
+	 * OutputManager
+	 */
+	var OutputManager = (function OutputManager() {
+		var classes = [];
+		var buttons = [];
+		var active = null;
+		var menu = null;
+		var button_offset = 0;
+
+		var crateOutputNode = function(topic, property) {
+
+			var prop = document.createElement('div');
+			var name = document.createElement('span');
+			var value = document.createElement('span');
+
+			var pmatch = property.match(/(^([a-z0-9\-]*)=\[([a-z0-9\-\"]*)\])|^([a-z0-9\-]*)/i);
+
+			name.textContent = '\t' + pmatch[4];
+
+			if (pmatch[3] !== undefined) {
+				name.textContent = '\t' + pmatch[2];
+				value.textContent = pmatch[3] + ';';
+			}
+
+			name.textContent += ': ';
+			prop.className = 'css-property';
+			name.className = 'name';
+			value.className = 'value';
+			prop.appendChild(name);
+			prop.appendChild(value);
+
+			classes[topic].node.appendChild(prop);
+			classes[topic].line[property] = prop;
+			classes[topic].prop[property] = value;
+		}
+
+		var OutputClass = function OutputClass(node) {
+			var topic = node.getAttribute('data-topic');
+			var prop = node.getAttribute('data-prop');
+			var name = node.getAttribute('data-name');
+			var properties = prop.split(' ');
+
+			classes[topic] = {};
+			classes[topic].node = node;
+			classes[topic].prop = [];
+			classes[topic].line = [];
+			classes[topic].button = new Button(topic);
+
+			var open_decl = document.createElement('div');
+			var end_decl = document.createElement('div');
+
+			open_decl.textContent = name + ' {';
+			end_decl.textContent = '}';
+			node.appendChild(open_decl);
+
+			for (var i in properties)
+				crateOutputNode(topic, properties[i]);
+
+			node.appendChild(end_decl);
+		}
+
+		var Button = function Button(topic) {
+			var button = document.createElement('div');
+
+			button.className = 'button';
+			button.textContent = topic;
+			button.style.left = button_offset + 'px';
+			button_offset += 100;
+
+			button.addEventListener("click", function() {
+				toggleDisplay(topic);
+			})
+
+			menu.appendChild(button);
+			return button;
+		}
+
+		var toggleDisplay = function toggleDisplay(topic) {
+			active.button.removeAttribute('data-active');
+			active.node.style.display = 'none';
+			active = classes[topic];
+			active.node.style.display = 'block';
+			active.button.setAttribute('data-active', 'true');
+		}
+
+		var toggleButton = function toggleButton(topic, value) {
+			var display = (value === true) ? 'block' : 'none';
+			classes[topic].button.style.display = display;
+
+			if (value === true)
+				toggleDisplay(topic);
+			else
+				toggleDisplay('element');
+		}
+
+		var updateProperty = function updateProperty(topic, property, data) {
+			try {
+				classes[topic].prop[property].textContent = data + ';';
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ", topic, property, data);
+			}
+		}
+
+		var toggleProperty = function toggleProperty(topic, property, value) {
+			var display = (value === true) ? 'block' : 'none';
+			try {
+				classes[topic].line[property].style.display = display;
+			}
+			catch(error) {
+				// console.log("ERROR undefined : ",classes, topic, property, value);
+			}
+		}
+
+		var init = function init() {
+
+			menu = getElemById('menu');
+
+			var elem = document.querySelectorAll('#output .output');
+			var size = elem.length;
+			for (var i = 0; i < size; i++)
+				OutputClass(elem[i]);
+
+			active = classes['element'];
+			toggleDisplay('element');
+
+			ButtonManager.subscribe("before", function(value) {
+				toggleButton('before', value);
+			});
+
+			ButtonManager.subscribe("after", function(value) {
+				toggleButton('after', value);
+			});
+		}
+
+		return {
+			init : init,
+			updateProperty : updateProperty,
+			toggleProperty : toggleProperty
+		}
+
+	})();
+
+
+	/**
+	 * Init Tool
+	 */
+	var init = function init() {
+		ButtonManager.init();
+		OutputManager.init();
+		ColoPicker.init();
+		SliderManager.init();
+		LayerManager.init();
+		PreviewMouseTracking.init("preview");
+		Tool.init();
+	}
+
+	return {
+		init : init
+	}
+
+})();
+
+
+

+

+
+
{{ EmbedLiveSample('box-shadow_generator', '100%', '1100px', '') }}

+
+
Related Tool: Box Shadow CSS Generator

diff --git "a/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html" "b/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html"
new file mode 100644
index 0000000000..1bf796b36b
--- /dev/null
+++ "b/files/de/web/css/css_boxmodell/einf\303\274hrung_in_das_css_boxmodell/index.html"
@@ -0,0 +1,52 @@
+---
+title: Boxmodell
+slug: Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Eine Box hat in CSS vier Bereiche: margin edge (weiß außen), border edge (grau), padding edge (grün), und content edge (weiß mitte). Das Folgende Diagramm zeigt die unterschiedlichen Höhen und Breiten anhand der Eigenschaften, die Veränderungen an einer CSS Box zulassen:

+
+
Thanks to Hannes Kraft.

+
+
 

+
+
Details

+
+
    
+ 
  • Die komplette Breite eines Elements berechnet sich wie folgt:
+  
    
+   
    margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
    
+  
    
+ 
    • 
+ 
  • Die komplette Höhe eines Elements berechnet sich wie folgt:
+  
    
+   
    margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom
    
+  
    
+ 
    • 
+ 
  • Der MS Internet Explorer verwendet die width- und die height-Eigenschaft als Innenabstand des Rahmens, nicht des padding-Bereiches.
+  
    
+   
    width = padding-left + width + padding-right
    
+   
    height = padding-top + height + padding-bottom
    
+  
    
+ 
    • 
+

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_boxmodell/index.html b/files/de/web/css/css_boxmodell/index.html
new file mode 100644
index 0000000000..37440c9523
--- /dev/null
+++ b/files/de/web/css/css_boxmodell/index.html
@@ -0,0 +1,165 @@
+---
+title: CSS Boxmodell
+slug: Web/CSS/CSS_Boxmodell
+tags:
+  - CSS
+  - CSS Boxmodell
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Box_Model
+---
+
{{CSSRef}}

+
+
CSS Box Model ist ein CSS Modul, das die rechteckigen Boxen einschließlich deren Innen- und Außenabständen definiert, die für Elemente generiert werden und gemäß des visuellen Formatierungsmodells dargestellt werden.

+
+
Referenz

+
+
Eigenschaften

+
+
Den Inhaltsfluss innerhalb einer Box beeinflussende Eigenschaften

+
+

+
    
+ 
  • {{cssxref("box-decoration-break")}}
    • 
+ 
  • {{cssxref("box-sizing")}}
    • 
+ 
  • {{cssxref("overflow")}}
    • 
+ 
  • {{cssxref("overflow-x")}}
    • 
+ 
  • {{cssxref("overflow-y")}}
    • 
+

+

+
+
Die Größe einer Box beeinflussende Eigenschaften

+
+

+
    
+ 
  • {{cssxref("height")}}
    • 
+ 
  • {{cssxref("width")}}
    • 
+ 
  • {{cssxref("max-height")}}
    • 
+ 
  • {{cssxref("max-width")}}
    • 
+ 
  • {{cssxref("min-height")}}
    • 
+ 
  • {{cssxref("min-width")}}
    • 
+

+

+
+
Außenabstände einer Box beeinflussende Eigenschaften

+
+

+
    
+ 
  • {{cssxref("margin")}}
    • 
+ 
  • {{cssxref("margin-bottom")}}
    • 
+ 
  • {{cssxref("margin-left")}}
    • 
+ 
  • {{cssxref("margin-right")}}
    • 
+ 
  • {{cssxref("margin-top")}}
    • 
+

+

+
+
Innenabstände einer Box beeinflussende Eigenschaften

+
+

+
    
+ 
  • {{cssxref("padding")}}
    • 
+ 
  • {{cssxref("padding-bottom")}}
    • 
+ 
  • {{cssxref("padding-left")}}
    • 
+ 
  • {{cssxref("padding-right")}}
    • 
+ 
  • {{cssxref("padding-top")}}
    • 
+

+

+
+
Andere Eigenschaften

+
+

+
    
+ 
  • {{cssxref("box-shadow")}}
    • 
+ 
  • {{cssxref("visibility")}}
    • 
+

+

+
+
Anleitungen und Werkzeuge

+
+

+ 
Einführung in das CSS Boxmodell

+ 
Erklärt eines der grundlegenden Konzepte von CSS, das Boxmodell: Beschreibt die Bedeutung von Außen- und Innenabständen als auch der verschiedenen Bereiche einer Box.

+ 
Zusammenfallen von Außenabständen meistern

+ 
In mehreren Fällen werden zwei anliegende Außenabstände zu einem zusammengelegt. Dieser Artikel beschreibt, wann dies passiert und wie es gesteuert werden kann.

+ 
Box-shadow Generator

+ 
Ein interaktives Werkzeug, das es erlaubt, Schatten visuell zu erstellen und die benötigte Syntax für die {{cssxref("box-shadow")}} Eigenschaft zu generieren.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Box")}}{{Spec2("CSS3 Box")}} 
{{SpecName("CSS2.1", "box.html")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0

+

diff --git "a/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html" "b/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html"
new file mode 100644
index 0000000000..edf1fa050c
--- /dev/null
+++ "b/files/de/web/css/css_boxmodell/zusammenfallen_von_au\303\237enabst\303\244nden_meistern/index.html"
@@ -0,0 +1,60 @@
+---
+title: Zusammenfallen von Außenabständen meistern
+slug: Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern
+tags:
+  - CSS
+  - CSS Boxmodell
+  - Referenz
+translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing
+---
+
{{CSSRef}}

+
+
Obere und untere Außenabstände von Blöcken werden manchmal zu einem einzelnen Außenabstand zusammengefasst (kollabiert), dessen Größe der größte der Außenabstände ist, die in ihm zusammengefasst werden, ein Verhalten bekannt als Außenabstandszusammenfassung (engl. margin collapsing).

+
+
Außenabstandszusammenfassung tritt in drei grundlegenden Fällen auf:

+
+

+ 
Angrenzende Geschwisterelemente

+ 
Die Außenabstände von angrenzenden Geschwisterelementen werden zusammengefasst (außer, wenn des nachfolgende Geschwisterelement nach Seitenumflüssen freigestellt ist). Zum Beispiel:
+ 
 <p>Der untere Außenabstand dieses Absatzes fällt ...</p>
+ <p>...mit dem oberen Außenabstand dieses Absatzes zusammen.</p>
+

+ 

+ 
Eltern- und erstes/letztes Kindelement

+ 
Falls es keinen Rahmen, Innenabstand, Inlineinhalt oder Freilegung gibt, um den {{cssxref("margin-top")}} eines Blocks vom {{cssxref("margin-top")}} seines ersten Kindblocks zu trennen, oder keinen Rahmen, Innenabstand Inlineinhalt, {{cssxref("height")}}, {{cssxref("min-height")}} oder {{cssxref("max-height")}} gibt, um den {{cssxref("margin-bottom")}} des Blocks vom {{cssxref("margin-bottom")}} seines letzten Kindelements zu trennen, dann fallen diese Außenabstände zusammen. Der zusammengefallene Außenabstand verläuft dabei außerhalb des Elternelements.

+ 
Leere Blöcke

+ 
Falls es keinen Rahmen, Innenabstand, Inlineinhalt, {{cssxref("height")}} oder {{cssxref("min-height")}} gibt, um den {{cssxref("margin-top")}} des Blocks vom {{cssxref("margin-bottom")}} zu trennen, fallen sein oberer und unterer Außenabstand zusammen.

+

+
+
Kompliziertere Außenabstandszusammenfassung (von mehr als zwei Außenabständen) tritt auf, wenn diese Fälle kombiniert werden.

+
+
Diese Regeln gelten sogar für Außenabstände, die null sind, sodass ein Außenabstand eines ersten/letzten Kinds sich (gemäß den oben genannten Regeln) am Ende außerhalb seines Elternelements befindet, unabhängig davon, ob der Außenabstand des Elternelements null ist oder nicht.

+
+
Falls negative Außenabstände involviert sind, ist die Größe des zusammengefassten Außenabstands die Summe des größten positiven Abstands und dem kleinsten (meist negativen) negativen Abstands.

+
+
Außenabstände von umfließenden und absolut positionierten Elementen werden niemals zusammengefasst.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "box.html#collapsing-margins", "margin collapsing")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_charsets/index.html b/files/de/web/css/css_charsets/index.html
new file mode 100644
index 0000000000..1b12d996a6
--- /dev/null
+++ b/files/de/web/css/css_charsets/index.html
@@ -0,0 +1,50 @@
+---
+title: CSS Charsets
+slug: Web/CSS/CSS_Charsets
+tags:
+  - CSS
+  - CSS Zeichensätze
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Charsets
+---
+
{{CSSRef}}

+
+
CSS Charsets ist ein CSS Modul, das es erlaubt, den Zeichensatz zu bestimmen, der im Stylesheet verwendet wird.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@charset")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'syndata.html#x57', '@charset')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.at-rules.charset")}}
diff --git a/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html
new file mode 100644
index 0000000000..3f822f9f73
--- /dev/null
+++ b/files/de/web/css/css_colors/farbauswahl_werkzeug/index.html
@@ -0,0 +1,3225 @@
+---
+title: Farbauswahl-Werkzeug
+slug: Web/CSS/CSS_Colors/farbauswahl_werkzeug
+tags:
+  - CSS
+  - Farbauswahl
+  - Farbe
+  - Hilfsmittel
+  - Pipette
+  - Werkzeug
+translation_of: Web/CSS/CSS_Colors/Color_picker_tool
+---
+

+
ColorPicker tool

+
+
HTML Content

+
+
    <div id="container">
+        <div id="palette" class="block">
+            <div id="color-palette"></div>
+            <div id="color-info">
+                <div class="title"> CSS Color </div>
+            </div>
+        </div>
+
+        <div id="picker" class="block">
+            <div class="ui-color-picker" data-topic="picker" data-mode="HSL"></div>
+            <div id="picker-samples" sample-id="master"></div>
+            <div id="controls">
+                <div id="delete">
+                    <div id="trash-can"></div>
+                </div>
+                <div id="void-sample" class="icon"></div>
+            </div>
+        </div>
+
+        <div id="canvas" data-tutorial="drop">
+            <div id="zindex" class="ui-input-slider" data-topic="z-index" data-info="z-index"
+                data-max="20" data-sensivity="10"></div>
+        </div>
+    </div>
+
+

+
+
CSS Content

+
+
/*
+ * COLOR PICKER TOOL
+ */
+
+.ui-color-picker {
+	width: 420px;
+	margin: 0;
+	border: 1px solid #DDD;
+	background-color: #FFF;
+	display: table;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.ui-color-picker .picking-area {
+	width: 198px;
+	height: 198px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: relative;
+	float: left;
+	display: table;
+}
+
+.ui-color-picker .picking-area:hover {
+	cursor: default;
+}
+
+/* HSV format - Hue-Saturation-Value(Brightness) */
+.ui-color-picker .picking-area {
+	background: url('https://mdn.mozillademos.org/files/5707/picker_mask_200.png') center center;
+
+	background: -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-moz-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-webkit-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -ms-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-ms-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+	background: -o-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%),
+				-o-linear-gradient(left, #FFF 0%, rgba(255, 255, 255, 0) 100%);
+
+	background-color: #F00;
+}
+
+/* HSL format - Hue-Saturation-Lightness */
+.ui-color-picker[data-mode='HSL'] .picking-area {
+	background: -moz-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-moz-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -webkit-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-webkit-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -ms-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-ms-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background: -o-linear-gradient(top, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%,
+									hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
+				-o-linear-gradient(left, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
+	background-color: #F00;
+}
+
+.ui-color-picker .picker {
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	border: 1px solid #FFF;
+	position: absolute;
+	top: 45%;
+	left: 45%;
+}
+
+.ui-color-picker .picker:before {
+	width: 8px;
+	height: 8px;
+	content: "";
+	position: absolute;
+	border: 1px solid #999;
+	border-radius: 50%;
+}
+
+.ui-color-picker .hue,
+.ui-color-picker .alpha {
+	width: 198px;
+	height: 28px;
+	margin: 5px;
+	border: 1px solid #FFF;
+	float: left;
+}
+
+.ui-color-picker .hue {
+	background: url("https://mdn.mozillademos.org/files/5701/hue.png") center;
+	background: -moz-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -webkit-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -ms-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+	background: -o-linear-gradient(left, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%,
+				#00F 66.66%, #F0F 83.33%, #F00 100%);
+}
+
+.ui-color-picker .alpha {
+	border: 1px solid #CCC;
+	background: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+}
+
+.ui-color-picker .alpha-mask {
+	width: 100%;
+	height: 100%;
+	background: url("https://mdn.mozillademos.org/files/6089/alpha_mask.png");
+}
+
+.ui-color-picker .slider-picker {
+	width: 2px;
+	height: 100%;
+	border: 1px solid #777;
+	background-color: #FFF;
+	position: relative;
+	top: -1px;
+}
+
+/* input HSV and RGB */
+
+.ui-color-picker .info {
+	width: 200px;
+	margin: 5px;
+	float: left;
+}
+
+.ui-color-picker .info * {
+	float: left;
+}
+
+.ui-color-picker .input {
+	width: 64px;
+	margin: 5px 2px;
+	float: left;
+}
+
+.ui-color-picker .input .name {
+	height: 20px;
+	width: 30px;
+	text-align: center;
+	font-size: 14px;
+	line-height: 18px;
+	float: left;
+}
+
+.ui-color-picker .input input {
+	width: 30px;
+	height: 18px;
+	margin: 0;
+	padding: 0;
+	border: 1px solid #DDD;
+	text-align: center;
+	float: right;
+
+	-moz-user-select: text;
+	-webkit-user-select: text;
+	-ms-user-select: text;
+}
+
+.ui-color-picker .input[data-topic="lightness"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="value"] {
+	display: none;
+}
+
+.ui-color-picker[data-mode='HSL'] .input[data-topic="lightness"] {
+	display: block;
+}
+
+.ui-color-picker .input[data-topic="alpha"] {
+	margin-top: 10px;
+	width: 93px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > .name {
+	width: 60px;
+}
+
+.ui-color-picker .input[data-topic="alpha"] > input {
+	float: right;
+}
+
+.ui-color-picker .input[data-topic="hexa"] {
+	width: auto;
+	float: right;
+	margin: 6px 8px 0 0;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > .name {
+	display: none;
+}
+
+.ui-color-picker .input[data-topic="hexa"] > input {
+	width: 90px;
+	height: 24px;
+	padding: 2px 0;
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+/* Preview color */
+.ui-color-picker .preview {
+	width: 95px;
+	height: 53px;
+	margin: 5px;
+	margin-top: 10px;
+	border: 1px solid #DDD;
+	background-image: url("https://mdn.mozillademos.org/files/5705/alpha.png");
+	float: left;
+	position: relative;
+}
+
+.ui-color-picker .preview:before {
+	height: 100%;
+	width: 50%;
+	left: 50%;
+	top: 0;
+	content: "";
+	background: #FFF;
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .preview-color {
+	width: 100%;
+	height: 100%;
+	background-color: rgba(255, 0, 0, 0.5);
+	position: absolute;
+	z-index: 1;
+}
+
+.ui-color-picker .switch_mode {
+	width: 10px;
+	height: 20px;
+	position: relative;
+	border-radius: 5px 0 0 5px;
+	border: 1px solid #DDD;
+	background-color: #EEE;
+	left: -12px;
+	top: -1px;
+	z-index: 1;
+	transition: all 0.5s;
+}
+
+.ui-color-picker .switch_mode:hover {
+	background-color: #CCC;
+	cursor: pointer;
+}
+
+/*
+ * UI Component
+ */
+
+.ui-input-slider {
+	height: 20px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	-moz-user-select: none;
+	user-select: none;
+}
+
+.ui-input-slider * {
+	float: left;
+	height: 100%;
+	line-height: 100%;
+}
+
+/* Input Slider */
+
+.ui-input-slider > input {
+	margin: 0;
+	padding: 0;
+	width: 50px;
+	text-align: center;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.ui-input-slider-info {
+	width: 90px;
+	padding: 0px 10px 0px 0px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-left, .ui-input-slider-right {
+	width: 16px;
+	cursor: pointer;
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center left no-repeat;
+}
+
+.ui-input-slider-right {
+	background: url("https://mdn.mozillademos.org/files/5679/arrows.png") center right no-repeat;
+}
+
+.ui-input-slider-name {
+	width: 90px;
+	padding: 0 10px 0 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.ui-input-slider-btn-set {
+	width: 25px;
+	background-color: #2C9FC9;
+	border-radius: 5px;
+	color: #FFF;
+	font-weight: bold;
+	line-height: 14px;
+	text-align: center;
+}
+
+.ui-input-slider-btn-set:hover {
+	background-color: #379B4A;
+	cursor: pointer;
+}
+
+/*
+ * COLOR PICKER TOOL
+ */
+
+body {
+	max-width: 1000px;
+	margin: 0 auto;
+
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+
+	box-shadow: 0 0 5px 0 #999;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	-moz-user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+
+}
+
+/**
+ * Resize Handle
+ */
+.resize-handle {
+	width: 10px;
+	height: 10px;
+	background: url('https://mdn.mozillademos.org/files/6083/resize.png') center center no-repeat;
+	position: absolute;
+	bottom: 0;
+	right: 0;
+}
+
+[data-resize='both']:hover {
+	cursor: nw-resize !important;
+}
+
+[data-resize='width']:hover {
+	cursor: w-resize !important;
+}
+
+[data-resize='height']:hover {
+	cursor: n-resize !important;
+}
+
+[data-hidden='true'] {
+	display: none;
+}
+
+[data-collapsed='true'] {
+	height: 0 !important;
+}
+
+.block {
+	display: table;
+}
+
+
+/**
+ * 	Container
+ */
+#container {
+	width: 100%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	display: table;
+}
+
+/**
+ * 	Picker Zone
+ */
+
+#picker {
+	padding: 10px;
+	width: 980px;
+}
+
+.ui-color-picker {
+	padding: 3px 5px;
+	float: left;
+	border-color: #FFF;
+}
+
+.ui-color-picker .switch_mode {
+	display: none;
+}
+
+.ui-color-picker .preview-color:hover {
+	cursor: move;
+}
+
+/**
+ * Picker Container
+ */
+
+#picker-samples {
+	width: 375px;
+	height: 114px;
+	max-height: 218px;
+	margin: 0 10px 0 30px;
+	overflow: hidden;
+	position: relative;
+	float: left;
+
+	transition: all 0.2s;
+}
+
+#picker-samples .sample {
+	width: 40px;
+	height: 40px;
+	margin: 5px;
+	border: 1px solid #DDD;
+	position: absolute;
+	float: left;
+	transition: all 0.2s;
+}
+
+#picker-samples .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#picker-samples .sample[data-active='true'] {
+	border-color: #999;
+}
+
+#picker-samples .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#picker-samples #add-icon {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	box-shadow: inset 0px 0px 2px 0px #DDD;
+}
+
+#picker-samples #add-icon:hover {
+	cursor: pointer;
+	border-color: #DDD;
+	box-shadow: inset 0px 0px 5px 0px #CCC;
+}
+
+#picker-samples #add-icon:before,
+#picker-samples #add-icon:after {
+	content: "";
+	position: absolute;
+	background-color: #EEE;
+	box-shadow: 0 0 1px 0 #EEE;
+}
+
+#picker-samples #add-icon:before {
+	width: 70%;
+	height: 16%;
+	top: 42%;
+	left: 15%;
+}
+
+#picker-samples #add-icon:after {
+	width: 16%;
+	height: 70%;
+	top: 15%;
+	left: 42%;
+}
+
+#picker-samples #add-icon:hover:before,
+#picker-samples #add-icon:hover:after {
+	background-color: #DDD;
+	box-shadow: 0 0 1px 0 #DDD;
+}
+
+/**
+ * 	Controls
+ */
+
+#controls {
+	width: 110px;
+	padding: 10px;
+	float: right;
+}
+
+#controls #picker-switch {
+	text-align: center;
+	float: left;
+}
+
+#controls .icon {
+	width: 48px;
+	height: 48px;
+	margin: 10px 0;
+	background-repeat: no-repeat;
+	background-position: center;
+	border: 1px solid #DDD;
+	display: table;
+	float: left;
+}
+
+#controls .icon:hover {
+	cursor: pointer;
+}
+
+#controls .picker-icon {
+	background-image: url('https://mdn.mozillademos.org/files/6081/picker.png');
+}
+
+#controls #void-sample {
+	margin-right: 10px;
+	background-image: url('https://mdn.mozillademos.org/files/6087/void.png');
+	background-position: center left;
+}
+
+#controls #void-sample[data-active='true'] {
+	border-color: #CCC;
+	background-position: center right;
+}
+
+#controls .switch {
+	width: 106px;
+	padding: 1px;
+	border: 1px solid #CCC;
+	font-size: 14px;
+	text-align: center;
+	line-height: 24px;
+	overflow: hidden;
+	float: left;
+}
+
+#controls .switch:hover {
+	cursor: pointer;
+}
+
+#controls .switch > * {
+	width: 50%;
+	padding: 2px 0;
+	background-color: #EEE;
+	float: left;
+}
+
+#controls .switch [data-active='true'] {
+	color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-color: #777;
+}
+
+/**
+ * 	Trash Can
+ */
+
+#delete {
+	width: 100%;
+	height: 94px;
+	background-color: #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+
+	text-align: center;
+	color: #777;
+
+	position: relative;
+	float: right;
+}
+
+#delete #trash-can {
+	width: 80%;
+	height: 80%;
+	border: 2px dashed #FFF;
+	border-radius: 5px;
+	background: url('https://mdn.mozillademos.org/files/6085/trash-can.png') no-repeat center;
+
+	position: absolute;
+	top: 10%;
+	left: 10%;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+
+	transition: all 0.2s;
+}
+
+#delete[drag-state='enter'] {
+	background-color: #999;
+}
+
+/**
+ * 	Color Theme
+ */
+
+#color-theme {
+	margin: 0 8px 0 0;
+	border: 1px solid #EEE;
+	display: inline-block;
+	float: right;
+}
+
+#color-theme .box {
+	width: 80px;
+	height: 92px;
+	float: left;
+}
+
+/**
+ * Color info box
+ */
+#color-info {
+	width: 360px;
+	float: left;
+}
+
+#color-info .title {
+	width: 100%;
+	padding: 15px;
+	font-size: 18px;
+	text-align: center;
+	background-image: url('https://mdn.mozillademos.org/files/6071/color-wheel.png');
+	background-repeat:no-repeat;
+	background-position: center left 30%;
+}
+
+#color-info .copy-container {
+	position: absolute;
+	top: -100%;
+}
+
+#color-info .property {
+	min-width: 280px;
+	height: 30px;
+	margin: 10px 0;
+	text-align: center;
+	line-height: 30px;
+}
+
+#color-info .property > * {
+	float: left;
+}
+
+#color-info .property .type {
+	width: 60px;
+	height: 100%;
+	padding: 0 16px 0 0;
+	text-align: right;
+}
+
+#color-info .property .value {
+	width: 200px;
+	height: 100%;
+	padding: 0 10px;
+	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
+	font-size: 16px;
+	color: #777;
+	text-align: center;
+	background-color: #FFF;
+	border: none;
+}
+
+#color-info .property .value:hover {
+	color: #37994A;
+}
+
+#color-info .property .value:hover + .copy {
+	background-position: center right;
+}
+
+#color-info .property .copy {
+	width: 24px;
+	height: 100%;
+	padding: 0 5px;
+	background-color: #FFF;
+	background-image: url('https://mdn.mozillademos.org/files/6073/copy.png');
+	background-repeat: no-repeat;
+	background-position: center left;
+	border-left: 1px solid #EEE;
+	text-align: right;
+	float: left;
+}
+
+#color-info .property .copy:hover {
+	background-position: center right;
+}
+
+
+/**
+ * 	Color Palette
+ */
+
+#palette {
+	width: 1000px;
+	padding: 10px 0;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	background-color: #EEE;
+	color: #777;
+
+	-moz-box-sizing: border-box;
+	-webkit-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+#color-palette {
+	width: 640px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #777;
+	float: left;
+}
+
+#color-palette .container {
+	width: 100%;
+	height: 50px;
+	line-height: 50px;
+	overflow: hidden;
+	float: left;
+	transition: all 0.5s;
+}
+
+#color-palette .container > * {
+	float: left;
+}
+
+#color-palette .title {
+	width: 100px;
+	padding: 0 10px;
+	text-align: right;
+	line-height: inherit;
+}
+
+#color-palette .palette {
+	width: 456px;
+	height: 38px;
+	margin: 3px;
+	padding: 3px;
+	display: table;
+	background-color: #FFF;
+}
+
+#color-palette .palette .sample {
+	width: 30px;
+	height: 30px;
+	margin: 3px;
+	position: relative;
+	border: 1px solid #DDD;
+	float: left;
+	transition: all 0.2s;
+}
+
+#color-palette .palette .sample:hover {
+	cursor: pointer;
+	border-color: #BBB;
+	transform: scale(1.15);
+	border-radius: 3px;
+}
+
+#color-palette .controls {
+}
+
+#color-palette .controls > * {
+	float: left;
+}
+
+#color-palette .controls > *:hover {
+	cursor: pointer;
+}
+
+#color-palette .controls .lock {
+	width: 24px;
+	height: 24px;
+	margin: 10px;
+	padding: 3px;
+	background-image: url('https://mdn.mozillademos.org/files/6077/lock.png');
+	background-repeat: no-repeat;
+	background-position: bottom right;
+}
+
+#color-palette .controls .lock:hover {
+	/*background-image: url('images/unlocked-hover.png');*/
+	background-position: bottom left;
+}
+
+#color-palette .controls .lock[locked-state='true'] {
+	/*background-image: url('images/locked.png');*/
+	background-position: top left ;
+}
+
+#color-palette .controls .lock[locked-state='true']:hover {
+	/*background-image: url('images/lock-hover.png');*/
+	background-position: top right;
+}
+
+/**
+ * Canvas
+ */
+
+#canvas {
+	width: 100%;
+	height: 300px;
+	min-height: 250px;
+	border-top: 1px solid #DDD;
+	background-image: url('https://mdn.mozillademos.org/files/6025/grain.png');
+	background-repeat: repeat;
+	position: relative;
+	float: left;
+}
+
+#canvas[data-tutorial='drop'] {
+	text-align: center;
+	font-size: 30px;
+	color: #777;
+}
+
+#canvas[data-tutorial='drop']:before {
+	content: "Drop colors here to compare";
+	width: 40%;
+	padding: 30px 9% 70px 11%;
+
+	background-image: url('https://mdn.mozillademos.org/files/6075/drop.png');
+	background-repeat: no-repeat;
+	background-position: left 35px top 60%;
+
+	text-align: right;
+
+	border: 3px dashed rgb(221, 221, 221);
+	border-radius: 15px;
+
+	position: absolute;
+	top: 50px;
+	left: 20%;
+}
+
+#canvas[data-tutorial='drop']:after {
+	content: "adjust, change or modify";
+	width: 40%;
+	font-size: 24px;
+	position: absolute;
+	top: 130px;
+	left: 32%;
+	z-index: 2;
+}
+
+#canvas [data-tutorial='dblclick'] {
+	background-color: #999 !important;
+}
+
+#canvas [data-tutorial='dblclick']:before {
+	content: "double click to activate";
+	width: 80px;
+	color: #FFF;
+	position: absolute;
+	top: 10%;
+	left: 20%;
+	z-index: 2;
+}
+
+#canvas .sample {
+	width: 100px;
+	height: 100px;
+	min-width: 20px;
+	min-height: 20px;
+	position: absolute;
+	border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+#canvas .sample:hover {
+	cursor: move;
+}
+
+#canvas .sample[data-active='true']:after {
+	content: "";
+	position: absolute;
+	background: url('https://mdn.mozillademos.org/files/6065/arrow.png') center no-repeat;
+	width: 100%;
+	height: 12px;
+	top: -12px;
+	z-index: 2;
+}
+
+#canvas .sample:hover > * {
+	cursor: pointer;
+	display: block !important;
+}
+
+#canvas .sample .resize-handle {
+	display: none;
+}
+
+#canvas .sample .pick {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6079/pick.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: none;
+}
+
+#canvas .sample .delete {
+	width: 10px;
+	height: 10px;
+	margin: 5px;
+	background: url('https://mdn.mozillademos.org/files/6069/close.png') center no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+	display: none;
+}
+
+
+/**
+ * Canvas controls
+ */
+
+#canvas .toggle-bg {
+	width: 16px;
+	height: 16px;
+	margin: 5px;
+	background: url("images/canvas-controls.png") center left no-repeat;
+	position: absolute;
+	top: 0;
+	right: 0;
+}
+
+#canvas .toggle-bg:hover {
+	cursor: pointer;
+}
+
+#canvas[data-bg='true'] {
+	background: none;
+}
+
+#canvas[data-bg='true'] .toggle-bg {
+	background: url('https://mdn.mozillademos.org/files/6067/canvas-controls.png') center right no-repeat;
+}
+
+#zindex {
+	height: 20px;
+	margin: 5px;
+	font-size: 16px;
+	position: absolute;
+	opacity: 0;
+	top: -10000px;
+	left: 0;
+	color: #777;
+	float: left;
+	transition: opacity 1s;
+}
+
+#zindex input {
+	border: 1px solid #DDD;
+	font-size: 16px;
+	color: #777;
+}
+
+#zindex .ui-input-slider-info {
+	width: 60px;
+}
+
+#zindex[data-active='true'] {
+	top: 0;
+	opacity: 1;
+}
+
+

+
+
JavaScript Content

+
+
'use strict';
+
+var UIColorPicker = (function UIColorPicker() {
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	var subscribers = [];
+	var pickers = [];
+
+	/**
+	 * RGBA Color class
+	 *
+	 * HSV/HSB and HSL (hue, saturation, value / brightness, lightness)
+	 * @param hue			0-360
+	 * @param saturation	0-100
+	 * @param value 		0-100
+	 * @param lightness		0-100
+	 */
+
+	function Color(color) {
+
+		if(color instanceof Color === true) {
+			this.copy(color);
+			return;
+		}
+
+		this.r = 0;
+		this.g = 0;
+		this.b = 0;
+		this.a = 1;
+		this.hue = 0;
+		this.saturation = 0;
+		this.value = 0;
+		this.lightness = 0;
+		this.format = 'HSV';
+	}
+
+	function RGBColor(r, g, b) {
+		var color = new Color();
+		color.setRGBA(r, g, b, 1);
+		return color;
+	}
+
+	function RGBAColor(r, g, b, a) {
+		var color = new Color();
+		color.setRGBA(r, g, b, a);
+		return color;
+	}
+
+	function HSVColor(h, s, v) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		return color;
+	}
+
+	function HSVAColor(h, s, v, a) {
+		var color = new Color();
+		color.setHSV(h, s, v);
+		color.a = a;
+		return color;
+	}
+
+	function HSLColor(h, s, l) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		return color;
+	}
+
+	function HSLAColor(h, s, l, a) {
+		var color = new Color();
+		color.setHSL(h, s, l);
+		color.a = a;
+		return color;
+	}
+
+	Color.prototype.copy = function copy(obj) {
+		if(obj instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		this.r = obj.r;
+		this.g = obj.g;
+		this.b = obj.b;
+		this.a = obj.a;
+		this.hue = obj.hue;
+		this.saturation = obj.saturation;
+		this.value = obj.value;
+		this.format = '' + obj.format;
+		this.lightness = obj.lightness;
+	};
+
+	Color.prototype.setFormat = function setFormat(format) {
+		if (format === 'HSV')
+			this.format = 'HSV';
+		if (format === 'HSL')
+			this.format = 'HSL';
+	};
+
+	/*========== Methods to set Color Properties ==========*/
+
+	Color.prototype.isValidRGBValue = function isValidRGBValue(value) {
+		return (typeof(value) === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 255);
+	};
+
+	Color.prototype.setRGBA = function setRGBA(red, green, blue, alpha) {
+		if (this.isValidRGBValue(red) === false ||
+			this.isValidRGBValue(green) === false ||
+			this.isValidRGBValue(blue) === false)
+			return;
+
+			this.r = red | 0;
+			this.g = green | 0;
+			this.b = blue | 0;
+
+		if (this.isValidRGBValue(alpha) === true)
+			this.a = alpha | 0;
+	};
+
+	Color.prototype.setByName = function setByName(name, value) {
+		if (name === 'r' || name === 'g' || name === 'b') {
+			if(this.isValidRGBValue(value) === false)
+				return;
+
+			this[name] = value;
+			this.updateHSX();
+		}
+	};
+
+	Color.prototype.setHSV = function setHSV(hue, saturation, value) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setHSL = function setHSL(hue, saturation, lightness) {
+		this.hue = hue;
+		this.saturation = saturation;
+		this.lightness = lightness;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHue = function setHue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 359)
+			return;
+		this.hue = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setSaturation = function setSaturation(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.saturation = value;
+		this.updateRGB();
+	};
+
+	Color.prototype.setValue = function setValue(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.value = value;
+		this.HSVtoRGB();
+	};
+
+	Color.prototype.setLightness = function setLightness(value) {
+		if (typeof(value) !== 'number' || isNaN(value) === true ||
+			value < 0 || value > 100)
+			return;
+		this.lightness = value;
+		this.HSLtoRGB();
+	};
+
+	Color.prototype.setHexa = function setHexa(value) {
+		var valid  = /(^#{0,1}[0-9A-F]{6}$)|(^#{0,1}[0-9A-F]{3}$)/i.test(value);
+
+		if (valid !== true)
+			return;
+
+		if (value[0] === '#')
+			value = value.slice(1, value.length);
+
+		if (value.length === 3)
+			value = value.replace(/([0-9A-F])([0-9A-F])([0-9A-F])/i,'$1$1$2$2$3$3');
+
+		this.r = parseInt(value.substr(0, 2), 16);
+		this.g = parseInt(value.substr(2, 2), 16);
+		this.b = parseInt(value.substr(4, 2), 16);
+
+		this.alpha	= 1;
+		this.RGBtoHSV();
+	};
+
+	/*========== Conversion Methods ==========*/
+
+	Color.prototype.convertToHSL = function convertToHSL() {
+		if (this.format === 'HSL')
+			return;
+
+		this.setFormat('HSL');
+		this.RGBtoHSL();
+	};
+
+	Color.prototype.convertToHSV = function convertToHSV() {
+		if (this.format === 'HSV')
+			return;
+
+		this.setFormat('HSV');
+		this.RGBtoHSV();
+	};
+
+	/*========== Update Methods ==========*/
+
+	Color.prototype.updateRGB = function updateRGB() {
+		if (this.format === 'HSV') {
+			this.HSVtoRGB();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.HSLtoRGB();
+			return;
+		}
+	};
+
+	Color.prototype.updateHSX = function updateHSX() {
+		if (this.format === 'HSV') {
+			this.RGBtoHSV();
+			return;
+		}
+
+		if (this.format === 'HSL') {
+			this.RGBtoHSL();
+			return;
+		}
+	};
+
+	Color.prototype.HSVtoRGB = function HSVtoRGB() {
+		var sat = this.saturation / 100;
+		var value = this.value / 100;
+		var C = sat * value;
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = value - C;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.HSLtoRGB = function HSLtoRGB() {
+		var sat = this.saturation / 100;
+		var light = this.lightness / 100;
+		var C = sat * (1 - Math.abs(2 * light - 1));
+		var H = this.hue / 60;
+		var X = C * (1 - Math.abs(H % 2 - 1));
+		var m = light - C/2;
+		var precision = 255;
+
+		C = (C + m) * precision | 0;
+		X = (X + m) * precision | 0;
+		m = m * precision | 0;
+
+		if (H >= 0 && H < 1) {	this.setRGBA(C, X, m);	return; }
+		if (H >= 1 && H < 2) {	this.setRGBA(X, C, m);	return; }
+		if (H >= 2 && H < 3) {	this.setRGBA(m, C, X);	return; }
+		if (H >= 3 && H < 4) {	this.setRGBA(m, X, C);	return; }
+		if (H >= 4 && H < 5) {	this.setRGBA(X, m, C);	return; }
+		if (H >= 5 && H < 6) {	this.setRGBA(C, m, X);	return; }
+	};
+
+	Color.prototype.RGBtoHSV = function RGBtoHSV() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / cmax;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.value = (cmax * 100) | 0;
+	};
+
+	Color.prototype.RGBtoHSL = function RGBtoHSL() {
+		var red		= this.r / 255;
+		var green	= this.g / 255;
+		var blue	= this.b / 255;
+
+		var cmax = Math.max(red, green, blue);
+		var cmin = Math.min(red, green, blue);
+		var delta = cmax - cmin;
+		var hue = 0;
+		var saturation = 0;
+		var lightness = (cmax + cmin) / 2;
+		var X = (1 - Math.abs(2 * lightness - 1));
+
+		if (delta) {
+			if (cmax === red ) { hue = ((green - blue) / delta); }
+			if (cmax === green ) { hue = 2 + (blue - red) / delta; }
+			if (cmax === blue ) { hue = 4 + (red - green) / delta; }
+			if (cmax) saturation = delta / X;
+		}
+
+		this.hue = 60 * hue | 0;
+		if (this.hue < 0) this.hue += 360;
+		this.saturation = (saturation * 100) | 0;
+		this.lightness = (lightness * 100) | 0;
+	};
+
+	/*========== Get Methods ==========*/
+
+	Color.prototype.getHexa = function getHexa() {
+		var r = this.r.toString(16);
+		var g = this.g.toString(16);
+		var b = this.b.toString(16);
+		if (this.r < 16) r = '0' + r;
+		if (this.g < 16) g = '0' + g;
+		if (this.b < 16) b = '0' + b;
+		var value = '#' + r + g + b;
+		return value.toUpperCase();
+	};
+
+	Color.prototype.getRGBA = function getRGBA() {
+
+		var rgb = '(' + this.r + ', ' + this.g + ', ' + this.b;
+		var a = '';
+		var v = '';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'rgb' + a + rgb + v + ')';
+		return value;
+	};
+
+	Color.prototype.getHSLA = function getHSLA() {
+		if (this.format === 'HSV') {
+			var color = new Color(this);
+			color.setFormat('HSL');
+			color.updateHSX();
+			return color.getHSLA();
+		}
+
+		var a = '';
+		var v = '';
+		var hsl = '(' + this.hue + ', ' + this.saturation + '%, ' + this.lightness +'%';
+		var x = parseFloat(this.a);
+		if (x !== 1) {
+			a = 'a';
+			v = ', ' + x;
+		}
+
+		var value = 'hsl' + a + hsl + v + ')';
+		return value;
+	};
+
+	Color.prototype.getColor = function getColor() {
+		if (this.a | 0 === 1)
+			return this.getHexa();
+		return this.getRGBA();
+	};
+
+	/*=======================================================================*/
+	/*=======================================================================*/
+
+	/*========== Capture Mouse Movement ==========*/
+
+	var setMouseTracking = function setMouseTracking(elem, callback) {
+		elem.addEventListener('mousedown', function(e) {
+			callback(e);
+			document.addEventListener('mousemove', callback);
+		});
+
+		document.addEventListener('mouseup', function(e) {
+			document.removeEventListener('mousemove', callback);
+		});
+	};
+
+	/*====================*/
+	// Color Picker Class
+	/*====================*/
+
+	function ColorPicker(node) {
+		this.color = new Color();
+		this.node = node;
+		this.subscribers = [];
+
+		var type = this.node.getAttribute('data-mode');
+		var topic = this.node.getAttribute('data-topic');
+
+		this.topic = topic;
+		this.picker_mode = (type === 'HSL') ? 'HSL' : 'HSV';
+		this.color.setFormat(this.picker_mode);
+
+		this.createPickingArea();
+		this.createHueArea();
+
+		this.newInputComponent('H', 'hue', this.inputChangeHue.bind(this));
+		this.newInputComponent('S', 'saturation', this.inputChangeSaturation.bind(this));
+		this.newInputComponent('V', 'value', this.inputChangeValue.bind(this));
+		this.newInputComponent('L', 'lightness', this.inputChangeLightness.bind(this));
+
+		this.createAlphaArea();
+
+		this.newInputComponent('R', 'red', this.inputChangeRed.bind(this));
+		this.newInputComponent('G', 'green', this.inputChangeGreen.bind(this));
+		this.newInputComponent('B', 'blue', this.inputChangeBlue.bind(this));
+
+		this.createPreviewBox();
+		this.createChangeModeButton();
+
+		this.newInputComponent('alpha', 'alpha', this.inputChangeAlpha.bind(this));
+		this.newInputComponent('hexa', 'hexa', this.inputChangeHexa.bind(this));
+
+		this.setColor(this.color);
+		pickers[topic] = this;
+	}
+
+	/*************************************************************************/
+	//				Function for generating the color-picker
+	/*************************************************************************/
+
+	ColorPicker.prototype.createPickingArea = function createPickingArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'picking-area';
+		picker.className = 'picker';
+
+		this.picking_area = area;
+		this.color_picker = picker;
+		setMouseTracking(area, this.updateColor.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createHueArea = function createHueArea() {
+		var area = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'hue';
+		picker.className ='slider-picker';
+
+		this.hue_area = area;
+		this.hue_picker = picker;
+		setMouseTracking(area, this.updateHueSlider.bind(this));
+
+		area.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createAlphaArea = function createAlphaArea() {
+		var area = document.createElement('div');
+		var mask = document.createElement('div');
+		var picker = document.createElement('div');
+
+		area.className = 'alpha';
+		mask.className = 'alpha-mask';
+		picker.className = 'slider-picker';
+
+		this.alpha_area = area;
+		this.alpha_mask = mask;
+		this.alpha_picker = picker;
+		setMouseTracking(area, this.updateAlphaSlider.bind(this));
+
+		area.appendChild(mask);
+		mask.appendChild(picker);
+		this.node.appendChild(area);
+	};
+
+	ColorPicker.prototype.createPreviewBox = function createPreviewBox(e) {
+		var preview_box = document.createElement('div');
+		var preview_color = document.createElement('div');
+
+		preview_box.className = 'preview';
+		preview_color.className = 'preview-color';
+
+		this.preview_color = preview_color;
+
+		preview_box.appendChild(preview_color);
+		this.node.appendChild(preview_box);
+	};
+
+	ColorPicker.prototype.newInputComponent = function newInputComponent(title, topic, onChangeFunc) {
+		var wrapper = document.createElement('div');
+		var input = document.createElement('input');
+		var info = document.createElement('span');
+
+		wrapper.className = 'input';
+		wrapper.setAttribute('data-topic', topic);
+		info.textContent = title;
+		info.className = 'name';
+		input.setAttribute('type', 'text');
+
+		wrapper.appendChild(info);
+		wrapper.appendChild(input);
+		this.node.appendChild(wrapper);
+
+		input.addEventListener('change', onChangeFunc);
+		input.addEventListener('click', function() {
+			this.select();
+		});
+
+		this.subscribe(topic, function(value) {
+			input.value = value;
+		});
+	};
+
+	ColorPicker.prototype.createChangeModeButton = function createChangeModeButton() {
+
+		var button = document.createElement('div');
+		button.className = 'switch_mode';
+		button.addEventListener('click', function() {
+			if (this.picker_mode === 'HSV')
+				this.setPickerMode('HSL');
+			else
+				this.setPickerMode('HSV');
+
+		}.bind(this));
+
+		this.node.appendChild(button);
+	};
+
+	/*************************************************************************/
+	//					Updates properties of UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updateColor = function updateColor(e) {
+		var x = e.pageX - this.picking_area.offsetLeft;
+		var y = e.pageY - this.picking_area.offsetTop;
+		var picker_offset = 5;
+
+		// width and height should be the same
+		var size = this.picking_area.clientWidth;
+
+		if (x > size) x = size;
+		if (y > size) y = size;
+		if (x < 0) x = 0;
+		if (y < 0) y = 0;
+
+		var value = 100 - (y * 100 / size) | 0;
+		var saturation = x * 100 / size | 0;
+
+		if (this.picker_mode === 'HSV')
+			this.color.setHSV(this.color.hue, saturation, value);
+		if (this.picker_mode === 'HSL')
+			this.color.setHSL(this.color.hue, saturation, value);
+
+		this.color_picker.style.left = x - picker_offset + 'px';
+		this.color_picker.style.top = y - picker_offset + 'px';
+
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('value', value);
+		this.notify('lightness', value);
+		this.notify('saturation', saturation);
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.updateHueSlider = function updateHueSlider(e) {
+		var x = e.pageX - this.hue_area.offsetLeft;
+		var width = this.hue_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		// TODO 360 => 359
+		var hue = ((359 * x) / width) | 0;
+		// if (hue === 360) hue = 359;
+
+		this.updateSliderPosition(this.hue_picker, x);
+		this.setHue(hue);
+	};
+
+	ColorPicker.prototype.updateAlphaSlider = function updateAlphaSlider(e) {
+		var x = e.pageX - this.alpha_area.offsetLeft;
+		var width = this.alpha_area.clientWidth;
+
+		if (x < 0) x = 0;
+		if (x > width) x = width;
+
+		this.color.a = (x / width).toFixed(2);
+
+		this.updateSliderPosition(this.alpha_picker, x);
+		this.updatePreviewColor();
+
+		this.notify('alpha', this.color.a);
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setHue = function setHue(value) {
+		this.color.setHue(value);
+
+		this.updatePickerBackground();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+		this.notify('hue', this.color.hue);
+
+		notify(this.topic, this.color);
+	};
+
+	// Updates when one of Saturation/Value/Lightness changes
+	ColorPicker.prototype.updateSLV = function updateSLV() {
+		this.updatePickerPosition();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+		this.notify('hexa', this.color.getHexa());
+
+		notify(this.topic, this.color);
+	};
+
+	/*************************************************************************/
+	//				Update positions of various UI elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerPosition = function updatePickerPosition() {
+		var size = this.picking_area.clientWidth;
+		var value = 0;
+		var offset = 5;
+
+		if (this.picker_mode === 'HSV')
+			value = this.color.value;
+		if (this.picker_mode === 'HSL')
+			value = this.color.lightness;
+
+		var x = (this.color.saturation * size / 100) | 0;
+		var y = size - (value * size / 100) | 0;
+
+		this.color_picker.style.left = x - offset + 'px';
+		this.color_picker.style.top = y - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateSliderPosition = function updateSliderPosition(elem, pos) {
+		elem.style.left = Math.max(pos - 3, -2) + 'px';
+	};
+
+	ColorPicker.prototype.updateHuePicker = function updateHuePicker() {
+		var size = this.hue_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.hue * size / 360 ) | 0;
+		this.hue_picker.style.left = pos - offset + 'px';
+	};
+
+	ColorPicker.prototype.updateAlphaPicker = function updateAlphaPicker() {
+		var size = this.alpha_area.clientWidth;
+		var offset = 1;
+		var pos = (this.color.a * size) | 0;
+		this.alpha_picker.style.left = pos - offset + 'px';
+	};
+
+	/*************************************************************************/
+	//						Update background colors
+	/*************************************************************************/
+
+	ColorPicker.prototype.updatePickerBackground = function updatePickerBackground() {
+		var nc = new Color(this.color);
+		nc.setHSV(nc.hue, 100, 100);
+		this.picking_area.style.backgroundColor = nc.getHexa();
+	};
+
+	ColorPicker.prototype.updateAlphaGradient = function updateAlphaGradient() {
+		this.alpha_mask.style.backgroundColor = this.color.getHexa();
+	};
+
+	ColorPicker.prototype.updatePreviewColor = function updatePreviewColor() {
+		this.preview_color.style.backgroundColor = this.color.getColor();
+	};
+
+	/*************************************************************************/
+	//						Update input elements
+	/*************************************************************************/
+
+	ColorPicker.prototype.inputChangeHue = function inputChangeHue(e) {
+		var value = parseInt(e.target.value);
+		this.setHue(value);
+		this.updateHuePicker();
+	};
+
+	ColorPicker.prototype.inputChangeSaturation = function inputChangeSaturation(e) {
+		var value = parseInt(e.target.value);
+		this.color.setSaturation(value);
+		e.target.value = this.color.saturation;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeValue = function inputChangeValue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setValue(value);
+		e.target.value = this.color.value;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeLightness = function inputChangeLightness(e) {
+		var value = parseInt(e.target.value);
+		this.color.setLightness(value);
+		e.target.value = this.color.lightness;
+		this.updateSLV();
+	};
+
+	ColorPicker.prototype.inputChangeRed = function inputChangeRed(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('r', value);
+		e.target.value = this.color.r;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeGreen = function inputChangeGreen(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('g', value);
+		e.target.value = this.color.g;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeBlue = function inputChangeBlue(e) {
+		var value = parseInt(e.target.value);
+		this.color.setByName('b', value);
+		e.target.value = this.color.b;
+		this.setColor(this.color);
+	};
+
+	ColorPicker.prototype.inputChangeAlpha = function inputChangeAlpha(e) {
+		var value = parseFloat(e.target.value);
+
+		if (typeof value === 'number' && isNaN(value) === false &&
+			value >= 0 && value <= 1)
+			this.color.a = value.toFixed(2);
+
+		e.target.value = this.color.a;
+		this.updateAlphaPicker();
+	};
+
+	ColorPicker.prototype.inputChangeHexa = function inputChangeHexa(e) {
+		var value = e.target.value;
+		this.color.setHexa(value);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//							Internal Pub/Sub
+	/*************************************************************************/
+
+	ColorPicker.prototype.subscribe = function subscribe(topic, callback) {
+		this.subscribers[topic] = callback;
+	};
+
+	ColorPicker.prototype.notify = function notify(topic, value) {
+		if (this.subscribers[topic])
+			this.subscribers[topic](value);
+	};
+
+	/*************************************************************************/
+	//							Set Picker Properties
+	/*************************************************************************/
+
+	ColorPicker.prototype.setColor = function setColor(color) {
+		if(color instanceof Color !== true) {
+			console.log('Typeof parameter not Color');
+			return;
+		}
+
+		if (color.format !== this.picker_mode) {
+			color.setFormat(this.picker_mode);
+			color.updateHSX();
+		}
+
+		this.color.copy(color);
+		this.updateHuePicker();
+		this.updatePickerPosition();
+		this.updatePickerBackground();
+		this.updateAlphaPicker();
+		this.updateAlphaGradient();
+		this.updatePreviewColor();
+
+		this.notify('red', this.color.r);
+		this.notify('green', this.color.g);
+		this.notify('blue', this.color.b);
+
+		this.notify('hue', this.color.hue);
+		this.notify('saturation', this.color.saturation);
+		this.notify('value', this.color.value);
+		this.notify('lightness', this.color.lightness);
+
+		this.notify('alpha', this.color.a);
+		this.notify('hexa', this.color.getHexa());
+		notify(this.topic, this.color);
+	};
+
+	ColorPicker.prototype.setPickerMode = function setPickerMode(mode) {
+		if (mode !== 'HSV' && mode !== 'HSL')
+			return;
+
+		this.picker_mode = mode;
+		this.node.setAttribute('data-mode', this.picker_mode);
+		this.setColor(this.color);
+	};
+
+	/*************************************************************************/
+	//								UNUSED
+	/*************************************************************************/
+
+	var setPickerMode = function setPickerMode(topic, mode) {
+		if (pickers[topic])
+			pickers[topic].setPickerMode(mode);
+	};
+
+	var setColor = function setColor(topic, color) {
+		if (pickers[topic])
+			pickers[topic].setColor(color);
+	};
+
+	var getColor = function getColor(topic) {
+		if (pickers[topic])
+			return new Color(pickers[topic].color);
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(callback) {
+		subscribers.indexOf(callback);
+		subscribers.splice(index, 1);
+	};
+
+	var notify = function notify(topic, value) {
+		if (subscribers[topic] === undefined || subscribers[topic].length === 0)
+			return;
+
+		var color = new Color(value);
+		for (var i in subscribers[topic])
+			subscribers[topic][i](color);
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-color-picker');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new ColorPicker(elem[i]);
+	};
+
+	return {
+		init : init,
+		Color : Color,
+		RGBColor : RGBColor,
+		RGBAColor : RGBAColor,
+		HSVColor : HSVColor,
+		HSVAColor : HSVAColor,
+		HSLColor : HSLColor,
+		HSLAColor : HSLAColor,
+		setColor : setColor,
+		getColor : getColor,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPickerMode : setPickerMode
+	};
+
+})();
+
+
+
+/**
+ * UI-SlidersManager
+ */
+
+var InputSliderManager = (function InputSliderManager() {
+
+	var subscribers = {};
+	var sliders = [];
+
+	var InputComponent = function InputComponent(obj) {
+		var input = document.createElement('input');
+		input.setAttribute('type', 'text');
+		input.style.width = 50 + obj.precision * 10 + 'px';
+
+		input.addEventListener('click', function(e) {
+			this.select();
+		});
+
+		input.addEventListener('change', function(e) {
+			var value = parseFloat(e.target.value);
+
+			if (isNaN(value) === true)
+				setValue(obj.topic, obj.value);
+			else
+				setValue(obj.topic, value);
+		});
+
+		return input;
+	};
+
+	var SliderComponent = function SliderComponent(obj, sign) {
+		var slider = document.createElement('div');
+		var startX = null;
+		var start_value = 0;
+
+		slider.addEventListener("click", function(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			setValue(obj.topic, obj.value + obj.step * sign);
+		});
+
+		slider.addEventListener("mousedown", function(e) {
+			startX = e.clientX;
+			start_value = obj.value;
+			document.body.style.cursor = "e-resize";
+
+			document.addEventListener("mouseup", slideEnd);
+			document.addEventListener("mousemove", sliderMotion);
+		});
+
+		var slideEnd = function slideEnd(e) {
+			document.removeEventListener("mousemove", sliderMotion);
+			document.body.style.cursor = "auto";
+			slider.style.cursor = "pointer";
+		};
+
+		var sliderMotion = function sliderMotion(e) {
+			slider.style.cursor = "e-resize";
+			var delta = (e.clientX - startX) / obj.sensivity | 0;
+			var value = delta * obj.step + start_value;
+			setValue(obj.topic, value);
+		};
+
+		return slider;
+	};
+
+	var InputSlider = function(node) {
+		var min		= parseFloat(node.getAttribute('data-min'));
+		var max		= parseFloat(node.getAttribute('data-max'));
+		var step	= parseFloat(node.getAttribute('data-step'));
+		var value	= parseFloat(node.getAttribute('data-value'));
+		var topic	= node.getAttribute('data-topic');
+		var unit	= node.getAttribute('data-unit');
+		var name 	= node.getAttribute('data-info');
+		var sensivity = node.getAttribute('data-sensivity') | 0;
+		var precision = node.getAttribute('data-precision') | 0;
+
+		this.min = isNaN(min) ? 0 : min;
+		this.max = isNaN(max) ? 100 : max;
+		this.precision = precision >= 0 ? precision : 0;
+		this.step = step < 0 || isNaN(step) ? 1 : step.toFixed(precision);
+		this.topic = topic;
+		this.node = node;
+		this.unit = unit === null ? '' : unit;
+		this.sensivity = sensivity > 0 ? sensivity : 5;
+		value = isNaN(value) ? this.min : value;
+
+		var input = new InputComponent(this);
+		var slider_left  = new SliderComponent(this, -1);
+		var slider_right = new SliderComponent(this,  1);
+
+		slider_left.className = 'ui-input-slider-left';
+		slider_right.className = 'ui-input-slider-right';
+
+		if (name) {
+			var info = document.createElement('span');
+			info.className = 'ui-input-slider-info';
+			info.textContent = name;
+			node.appendChild(info);
+		}
+
+		node.appendChild(slider_left);
+		node.appendChild(input);
+		node.appendChild(slider_right);
+
+		this.input = input;
+		sliders[topic] = this;
+		setValue(topic, value);
+	};
+
+	InputSlider.prototype.setInputValue = function setInputValue() {
+		this.input.value = this.value.toFixed(this.precision) + this.unit;
+	};
+
+	var setValue = function setValue(topic, value, send_notify) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = parseFloat(value.toFixed(slider.precision));
+
+		if (value > slider.max) value = slider.max;
+		if (value < slider.min)	value = slider.min;
+
+		slider.value = value;
+		slider.node.setAttribute('data-value', value);
+
+		slider.setInputValue();
+
+		if (send_notify === false)
+			return;
+
+		notify.call(slider);
+	};
+
+	var setMax = function setMax(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.max = value;
+		setValue(topic, slider.value);
+	};
+
+	var setMin = function setMin(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.min = value;
+		setValue(topic, slider.value);
+	};
+
+	var setUnit = function setUnit(topic, unit) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.unit = unit;
+		setValue(topic, slider.value);
+	};
+
+	var setStep = function setStep(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		slider.step = parseFloat(value);
+		setValue(topic, slider.value);
+	};
+
+	var setPrecision = function setPrecision(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+		slider.precision = value;
+
+		var step = parseFloat(slider.step.toFixed(value));
+		if (step === 0)
+			slider.step = 1 / Math.pow(10, value);
+
+		setValue(topic, slider.value);
+	};
+
+	var setSensivity = function setSensivity(topic, value) {
+		var slider = sliders[topic];
+		if (slider === undefined)
+			return;
+
+		value = value | 0;
+
+		slider.sensivity = value > 0 ? value : 5;
+	};
+
+	var getNode =  function getNode(topic) {
+		return sliders[topic].node;
+	};
+
+	var getPrecision =  function getPrecision(topic) {
+		return sliders[topic].precision;
+	};
+
+	var getStep =  function getStep(topic) {
+		return sliders[topic].step;
+	};
+
+	var subscribe = function subscribe(topic, callback) {
+		if (subscribers[topic] === undefined)
+			subscribers[topic] = [];
+		subscribers[topic].push(callback);
+	};
+
+	var unsubscribe = function unsubscribe(topic, callback) {
+		subscribers[topic].indexOf(callback);
+		subscribers[topic].splice(index, 1);
+	};
+
+	var notify = function notify() {
+		if (subscribers[this.topic] === undefined)
+			return;
+		for (var i = 0; i < subscribers[this.topic].length; i++)
+			subscribers[this.topic][i](this.value);
+	};
+
+	var createSlider = function createSlider(topic, label) {
+		var slider = document.createElement('div');
+		slider.className = 'ui-input-slider';
+		slider.setAttribute('data-topic', topic);
+
+		if (label !== undefined)
+			slider.setAttribute('data-info', label);
+
+		new InputSlider(slider);
+		return slider;
+	};
+
+	var init = function init() {
+		var elem = document.querySelectorAll('.ui-input-slider');
+		var size = elem.length;
+		for (var i = 0; i < size; i++)
+			new InputSlider(elem[i]);
+	};
+
+	return {
+		init : init,
+		setMax : setMax,
+		setMin : setMin,
+		setUnit : setUnit,
+		setStep : setStep,
+		getNode : getNode,
+		getStep : getStep,
+		setValue : setValue,
+		subscribe : subscribe,
+		unsubscribe : unsubscribe,
+		setPrecision : setPrecision,
+		setSensivity : setSensivity,
+		getPrecision : getPrecision,
+		createSlider : createSlider,
+	};
+
+})();
+
+
+'use strict';
+
+window.addEventListener("load", function() {
+	ColorPickerTool.init();
+});
+
+var ColorPickerTool = (function ColorPickerTool() {
+
+	/*========== Get DOM Element By ID ==========*/
+
+	function getElemById(id) {
+		return document.getElementById(id);
+	}
+
+	function allowDropEvent(e) {
+		e.preventDefault();
+	}
+
+	/*========== Make an element resizable relative to it's parent ==========*/
+
+	var UIComponent = (function UIComponent() {
+
+		function makeResizable(elem, axis) {
+			var valueX = 0;
+			var valueY = 0;
+			var action = 0;
+
+			var resizeStart = function resizeStart(e) {
+				e.stopPropagation();
+				e.preventDefault();
+				if (e.button !== 0)
+					return;
+
+				valueX = e.clientX - elem.clientWidth;
+				valueY = e.clientY - elem.clientHeight;
+
+				document.body.setAttribute('data-resize', axis);
+				document.addEventListener('mousemove', mouseMove);
+				document.addEventListener('mouseup', resizeEnd);
+			};
+
+			var mouseMove = function mouseMove(e) {
+				if (action >= 0)
+					elem.style.width = e.clientX - valueX + 'px';
+				if (action <= 0)
+					elem.style.height = e.clientY - valueY + 'px';
+			};
+
+			var resizeEnd = function resizeEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.body.removeAttribute('data-resize', axis);
+				document.removeEventListener('mousemove', mouseMove);
+				document.removeEventListener('mouseup', resizeEnd);
+			};
+
+			var handle = document.createElement('div');
+			handle.className = 'resize-handle';
+
+			if (axis === 'width') action = 1;
+			else if (axis === 'height') action = -1;
+			else axis = 'both';
+
+			handle.className = 'resize-handle';
+			handle.setAttribute('data-resize', axis);
+			handle.addEventListener('mousedown', resizeStart);
+			elem.appendChild(handle);
+		};
+
+		/*========== Make an element draggable relative to it's parent ==========*/
+
+		var makeDraggable = function makeDraggable(elem, endFunction) {
+
+			var offsetTop;
+			var offsetLeft;
+
+			elem.setAttribute('data-draggable', 'true');
+
+			var dragStart = function dragStart(e) {
+				e.preventDefault();
+				e.stopPropagation();
+
+				if (e.target.getAttribute('data-draggable') !== 'true' ||
+					e.target !== elem || e.button !== 0)
+					return;
+
+				offsetLeft = e.clientX - elem.offsetLeft;
+				offsetTop = e.clientY - elem.offsetTop;
+
+				document.addEventListener('mousemove', mouseDrag);
+				document.addEventListener('mouseup', dragEnd);
+			};
+
+			var dragEnd = function dragEnd(e) {
+				if (e.button !== 0)
+					return;
+
+				document.removeEventListener('mousemove', mouseDrag);
+				document.removeEventListener('mouseup', dragEnd);
+			};
+
+			var mouseDrag = function mouseDrag(e) {
+				elem.style.left = e.clientX - offsetLeft + 'px';
+				elem.style.top = e.clientY - offsetTop + 'px';
+			};
+
+			elem.addEventListener('mousedown', dragStart, false);
+		};
+
+		return {
+			makeResizable : makeResizable,
+			makeDraggable : makeDraggable
+		};
+
+	})();
+
+	/*========== Color Class ==========*/
+
+	var Color = UIColorPicker.Color;
+	var HSLColor = UIColorPicker.HSLColor;
+
+	/**
+	 * ColorPalette
+	 */
+	var ColorPalette = (function ColorPalette() {
+
+		var samples = [];
+		var color_palette;
+		var complementary;
+
+		var hideNode = function(node) {
+			node.setAttribute('data-hidden', 'true');
+		};
+
+		var ColorSample = function ColorSample(id) {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = new Color();
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('click', this.pickColor.bind(this));
+
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateHue = function updateHue(color, degree, steps) {
+			this.color.copy(color);
+			var hue = (steps * degree + this.color.hue) % 360;
+			if (hue < 0) hue += 360;
+			this.color.setHue(hue);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateSaturation = function updateSaturation(color, value, steps) {
+			var saturation = color.saturation + value * steps;
+			if (saturation <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setSaturation(saturation);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateLightness = function updateLightness(color, value, steps) {
+			var lightness = color.lightness + value * steps;
+			if (lightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setLightness(lightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateBrightness = function updateBrightness(color, value, steps) {
+			var brightness = color.value + value * steps;
+			if (brightness <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.setValue(brightness);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.updateAlpha = function updateAlpha(color, value, steps) {
+			var alpha = parseFloat(color.a) + value * steps;
+			if (alpha <= 0) {
+				this.node.setAttribute('data-hidden', 'true');
+				return;
+			}
+			this.node.removeAttribute('data-hidden');
+			this.color.copy(color);
+			this.color.a = parseFloat(alpha.toFixed(2));
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.pickColor = function pickColor() {
+			UIColorPicker.setColor('picker', this.color);
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'palette-samples');
+		};
+
+		var Palette = function Palette(text, size) {
+			this.samples = [];
+			this.locked = false;
+
+			var palette = document.createElement('div');
+			var title = document.createElement('div');
+			var controls = document.createElement('div');
+			var container = document.createElement('div');
+			var lock = document.createElement('div');
+
+			container.className = 'container';
+			title.className = 'title';
+			palette.className = 'palette';
+			controls.className = 'controls';
+			lock.className = 'lock';
+			title.textContent = text;
+
+			controls.appendChild(lock);
+			container.appendChild(title);
+			container.appendChild(controls);
+			container.appendChild(palette);
+
+			lock.addEventListener('click', function () {
+				this.locked = !this.locked;
+				lock.setAttribute('locked-state', this.locked);
+			}.bind(this));
+
+			for(var i = 0; i < size; i++) {
+				var sample = new ColorSample();
+				this.samples.push(sample);
+				palette.appendChild(sample.node);
+			}
+
+			this.container = container;
+			this.title = title;
+		};
+
+		var createHuePalette = function createHuePalette() {
+			var palette = new Palette('Hue', 12);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 12; i++) {
+					palette.samples[i].updateHue(color, 30, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var createSaturationPalette = function createSaturationPalette() {
+			var palette = new Palette('Saturation', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 11; i++) {
+					palette.samples[i].updateSaturation(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		/* Brightness or Lightness - depends on the picker mode */
+		var createVLPalette = function createSaturationPalette() {
+			var palette = new Palette('Lightness', 11);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				if(color.format === 'HSL') {
+					palette.title.textContent = 'Lightness';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateLightness(color, -10, i);
+				}
+				else {
+					palette.title.textContent = 'Value';
+					for(var i = 0; i < 11; i++)
+						palette.samples[i].updateBrightness(color, -10, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var isBlankPalette = function isBlankPalette(container, value) {
+			if (value === 0) {
+				container.setAttribute('data-collapsed', 'true');
+				return true;
+			}
+
+			container.removeAttribute('data-collapsed');
+			return false;
+		};
+
+		var createAlphaPalette = function createAlphaPalette() {
+			var palette = new Palette('Alpha', 10);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (palette.locked === true)
+					return;
+
+				for(var i = 0; i < 10; i++) {
+					palette.samples[i].updateAlpha(color, -0.1, i);
+				}
+			});
+
+			color_palette.appendChild(palette.container);
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var init = function init() {
+			color_palette = getElemById('color-palette');
+
+			createHuePalette();
+			createSaturationPalette();
+			createVLPalette();
+			createAlphaPalette();
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor
+		};
+
+	})();
+
+	/**
+	 * ColorInfo
+	 */
+	var ColorInfo = (function ColorInfo() {
+
+		var info_box;
+		var select;
+		var RGBA;
+		var HEXA;
+		var HSLA;
+
+		var updateInfo = function updateInfo(color) {
+			if (color.a | 0 === 1) {
+				RGBA.info.textContent = 'RGB';
+				HSLA.info.textContent = 'HSL';
+			}
+			else {
+				RGBA.info.textContent = 'RGBA';
+				HSLA.info.textContent = 'HSLA';
+			}
+
+			RGBA.value.value = color.getRGBA();
+			HSLA.value.value = color.getHSLA();
+			HEXA.value.value = color.getHexa();
+		};
+
+		var InfoProperty = function InfoProperty(info) {
+
+			var node = document.createElement('div');
+			var title = document.createElement('div');
+			var value = document.createElement('input');
+			var copy = document.createElement('div');
+
+			node.className = 'property';
+			title.className = 'type';
+			value.className = 'value';
+			copy.className = 'copy';
+
+			title.textContent = info;
+			value.setAttribute('type', 'text');
+
+			copy.addEventListener('click', function() {
+				value.select();
+			});
+
+			node.appendChild(title);
+			node.appendChild(value);
+			node.appendChild(copy);
+
+			this.node = node;
+			this.value = value;
+			this.info = title;
+
+			info_box.appendChild(node);
+		};
+
+		var init = function init() {
+
+			info_box = getElemById('color-info');
+
+			RGBA = new InfoProperty('RGBA');
+			HSLA = new InfoProperty('HSLA');
+			HEXA = new InfoProperty('HEXA');
+
+			UIColorPicker.subscribe('picker', updateInfo);
+
+		};
+
+		return {
+			init: init
+		};
+
+	})();
+
+	/**
+	 * ColorPicker Samples
+	 */
+	var ColorPickerSamples = (function ColorPickerSamples() {
+
+		var samples = [];
+		var nr_samples = 0;
+		var active = null;
+		var container = null;
+		var	samples_per_line = 10;
+		var trash_can = null;
+		var base_color = new HSLColor(0, 50, 100);
+		var add_btn;
+		var add_btn_pos;
+
+		var ColorSample = function ColorSample() {
+			var node = document.createElement('div');
+			node.className = 'sample';
+
+			this.uid = samples.length;
+			this.index = nr_samples++;
+			this.node = node;
+			this.color = new Color(base_color);
+
+			node.setAttribute('sample-id', this.uid);
+			node.setAttribute('draggable', 'true');
+
+			node.addEventListener('dragstart', this.dragStart.bind(this));
+			node.addEventListener('dragover' , allowDropEvent);
+			node.addEventListener('drop'     , this.dragDrop.bind(this));
+
+			this.updatePosition(this.index);
+			this.updateBgColor();
+			samples.push(this);
+		};
+
+		ColorSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		ColorSample.prototype.updatePosition = function updatePosition(index) {
+			this.index = index;
+			this.posY = 5 + ((index / samples_per_line) | 0) * 52;
+			this.posX = 5 + ((index % samples_per_line) | 0) * 52;
+			this.node.style.top  = this.posY + 'px';
+			this.node.style.left = this.posX + 'px';
+		};
+
+		ColorSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.activate = function activate() {
+			UIColorPicker.setColor('picker', this.color);
+			this.node.setAttribute('data-active', 'true');
+		};
+
+		ColorSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+		};
+
+		ColorSample.prototype.dragStart = function dragStart(e) {
+			e.dataTransfer.setData('sampleID', this.uid);
+			e.dataTransfer.setData('location', 'picker-samples');
+		};
+
+		ColorSample.prototype.dragDrop = function dragDrop(e) {
+			e.stopPropagation();
+			this.color = Tool.getSampleColorFrom(e);
+			this.updateBgColor();
+		};
+
+		ColorSample.prototype.deleteSample = function deleteSample() {
+			container.removeChild(this.node);
+			samples[this.uid] = null;
+			nr_samples--;
+		};
+
+		var updateUI = function updateUI() {
+			updateContainerProp();
+
+			var index = 0;
+			var nr = samples.length;
+			for (var i=0; i < nr; i++)
+				if (samples[i] !== null) {
+					samples[i].updatePosition(index);
+					index++;
+				}
+
+			AddSampleButton.updatePosition(index);
+		};
+
+		var deleteSample = function deleteSample(e) {
+			trash_can.parentElement.setAttribute('drag-state', 'none');
+
+			var location = e.dataTransfer.getData('location');
+			if (location !== 'picker-samples')
+				return;
+
+			var sampleID = e.dataTransfer.getData('sampleID');
+			samples[sampleID].deleteSample();
+			console.log(samples);
+
+			updateUI();
+		};
+
+		var createDropSample = function createDropSample() {
+			var sample = document.createElement('div');
+			sample.id = 'drop-effect-sample';
+			sample.className = 'sample';
+			container.appendChild(sample);
+		};
+
+		var setActivateSample = function setActivateSample(e) {
+			if (e.target.className !== 'sample')
+				return;
+
+			unsetActiveSample(active);
+			Tool.unsetVoidSample();
+			CanvasSamples.unsetActiveSample();
+			active = samples[e.target.getAttribute('sample-id')];
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var getSampleColor = function getSampleColor(id) {
+			if (samples[id] !== undefined && samples[id]!== null)
+				return new Color(samples[id].color);
+		};
+
+		var updateContainerProp = function updateContainerProp() {
+			samples_per_line = ((container.clientWidth - 5) / 52) | 0;
+			var height = 52 * (1 + (nr_samples / samples_per_line) | 0);
+			container.style.height = height + 10 + 'px';
+		};
+
+		var AddSampleButton = (function AddSampleButton() {
+			var node;
+			var _index = 0;
+			var _posX;
+			var _posY;
+
+			var updatePosition = function updatePosition(index) {
+				_index = index;
+				_posY = 5 + ((index / samples_per_line) | 0) * 52;
+				_posX = 5 + ((index % samples_per_line) | 0) * 52;
+
+				node.style.top  = _posY + 'px';
+				node.style.left = _posX + 'px';
+			};
+
+			var addButtonClick = function addButtonClick() {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+				updatePosition(_index + 1);
+				updateUI();
+			};
+
+			var init = function init() {
+				node = document.createElement('div');
+				var icon = document.createElement('div');
+
+				node.className = 'sample';
+				icon.id = 'add-icon';
+				node.appendChild(icon);
+				node.addEventListener('click', addButtonClick);
+
+				updatePosition(0);
+				container.appendChild(node);
+			};
+
+			return {
+				init : init,
+				updatePosition : updatePosition
+			};
+		})();
+
+		var init = function init() {
+			container = getElemById('picker-samples');
+			trash_can = getElemById('trash-can');
+
+			AddSampleButton.init();
+
+			for (var i=0; i<16; i++) {
+				var sample = new ColorSample();
+				container.appendChild(sample.node);
+			}
+
+			AddSampleButton.updatePosition(samples.length);
+			updateUI();
+
+			active = samples[0];
+			active.activate();
+
+			container.addEventListener('click', setActivateSample);
+
+			trash_can.addEventListener('dragover', allowDropEvent);
+			trash_can.addEventListener('dragenter', function() {
+				this.parentElement.setAttribute('drag-state', 'enter');
+			});
+			trash_can.addEventListener('dragleave', function(e) {
+				this.parentElement.setAttribute('drag-state', 'none');
+			});
+			trash_can.addEventListener('drop', deleteSample);
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)
+					active.updateColor(color);
+			});
+
+		};
+
+		return {
+			init : init,
+			getSampleColor : getSampleColor,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	/**
+	 * Canvas Samples
+	 */
+	var CanvasSamples = (function CanvasSamples() {
+
+		var active = null;
+		var canvas = null;
+		var samples = [];
+		var zindex = null;
+		var tutorial = true;
+
+		var CanvasSample = function CanvasSample(color, posX, posY) {
+
+			var node = document.createElement('div');
+			var pick = document.createElement('div');
+			var delete_btn = document.createElement('div');
+			node.className = 'sample';
+			pick.className = 'pick';
+			delete_btn.className = 'delete';
+
+			this.uid = samples.length;
+			this.node = node;
+			this.color = color;
+			this.updateBgColor();
+			this.zIndex = 1;
+
+			node.style.top = posY - 50 + 'px';
+			node.style.left = posX - 50 + 'px';
+			node.setAttribute('sample-id', this.uid);
+
+			node.appendChild(pick);
+			node.appendChild(delete_btn);
+
+			var activate = function activate() {
+				setActiveSample(this);
+			}.bind(this);
+
+			node.addEventListener('dblclick', activate);
+			pick.addEventListener('click', activate);
+			delete_btn.addEventListener('click', this.deleteSample.bind(this));
+
+			UIComponent.makeDraggable(node);
+			UIComponent.makeResizable(node);
+
+			samples.push(this);
+			canvas.appendChild(node);
+			return this;
+		};
+
+		CanvasSample.prototype.updateBgColor = function updateBgColor() {
+			this.node.style.backgroundColor = this.color.getColor();
+		};
+
+		CanvasSample.prototype.updateColor = function updateColor(color) {
+			this.color.copy(color);
+			this.updateBgColor();
+		};
+
+		CanvasSample.prototype.updateZIndex = function updateZIndex(value) {
+			this.zIndex = value;
+			this.node.style.zIndex = value;
+		};
+
+		CanvasSample.prototype.activate = function activate() {
+			this.node.setAttribute('data-active', 'true');
+			zindex.setAttribute('data-active', 'true');
+
+			UIColorPicker.setColor('picker', this.color);
+			InputSliderManager.setValue('z-index', this.zIndex);
+		};
+
+		CanvasSample.prototype.deactivate = function deactivate() {
+			this.node.removeAttribute('data-active');
+			zindex.removeAttribute('data-active');
+		};
+
+		CanvasSample.prototype.deleteSample = function deleteSample() {
+			if (active === this)
+				unsetActiveSample();
+			canvas.removeChild(this.node);
+			samples[this.uid] = null;
+		};
+
+		CanvasSample.prototype.updatePosition = function updatePosition(posX, posY) {
+			this.node.style.top = posY - this.startY + 'px';
+			this.node.style.left = posX - this.startX + 'px';
+		};
+
+		var canvasDropEvent = function canvasDropEvent(e) {
+			var color = Tool.getSampleColorFrom(e);
+
+			if (color) {
+				var offsetX = e.pageX - canvas.offsetLeft;
+				var offsetY = e.pageY - canvas.offsetTop;
+				var sample = new CanvasSample(color, offsetX, offsetY);
+				if (tutorial) {
+					tutorial = false;
+					canvas.removeAttribute('data-tutorial');
+					var info = new CanvasSample(new Color(), 100, 100);
+					info.node.setAttribute('data-tutorial', 'dblclick');
+				}
+			}
+
+		};
+
+		var setActiveSample = function setActiveSample(sample) {
+			ColorPickerSamples.unsetActiveSample();
+			Tool.unsetVoidSample();
+			unsetActiveSample();
+			active = sample;
+			active.activate();
+		};
+
+		var unsetActiveSample = function unsetActiveSample() {
+			if (active)
+				active.deactivate();
+			active = null;
+		};
+
+		var createToggleBgButton = function createToggleBgButton() {
+			var button = document.createElement('div');
+			var state = false;
+			button.className = 'toggle-bg';
+			canvas.appendChild(button);
+
+			button.addEventListener('click', function() {
+				console.log(state);
+				state = !state;
+				canvas.setAttribute('data-bg', state);
+			});
+		};
+
+		var init = function init() {
+			canvas = getElemById('canvas');
+			zindex = getElemById('zindex');
+
+			canvas.addEventListener('dragover', allowDropEvent);
+			canvas.addEventListener('drop', canvasDropEvent);
+
+			createToggleBgButton();
+
+			UIColorPicker.subscribe('picker', function(color) {
+				if (active)	active.updateColor(color);
+			});
+
+			InputSliderManager.subscribe('z-index', function (value) {
+				if (active)	active.updateZIndex(value);
+			});
+
+			UIComponent.makeResizable(canvas, 'height');
+		};
+
+		return {
+			init : init,
+			unsetActiveSample : unsetActiveSample
+		};
+
+	})();
+
+	var StateButton = function StateButton(node, state) {
+		this.state = false;
+		this.callback = null;
+
+		node.addEventListener('click', function() {
+			this.state = !this.state;
+			if (typeof this.callback === "function")
+				this.callback(this.state);
+		}.bind(this));
+	};
+
+	StateButton.prototype.set = function set() {
+		this.state = true;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.unset = function unset() {
+		this.state = false;
+		if (typeof this.callback === "function")
+			this.callback(this.state);
+	};
+
+	StateButton.prototype.subscribe = function subscribe(func) {
+		this.callback = func;
+	};
+
+
+	/**
+	 * Tool
+	 */
+	var Tool = (function Tool() {
+
+		var samples = [];
+		var controls = null;
+		var void_sw;
+
+		var createPickerModeSwitch = function createPickerModeSwitch() {
+			var parent = getElemById('controls');
+			var icon = document.createElement('div');
+			var button = document.createElement('div');
+			var hsv = document.createElement('div');
+			var hsl = document.createElement('div');
+			var active = null;
+
+			icon.className = 'icon picker-icon';
+			button.className = 'switch';
+			button.appendChild(hsv);
+			button.appendChild(hsl);
+
+			hsv.textContent = 'HSV';
+			hsl.textContent = 'HSL';
+
+			active = hsl;
+			active.setAttribute('data-active', 'true');
+
+			function switchPickingModeTo(elem) {
+				active.removeAttribute('data-active');
+				active = elem;
+				active.setAttribute('data-active', 'true');
+				UIColorPicker.setPickerMode('picker', active.textContent);
+			};
+
+			var picker_sw = new StateButton(icon);
+			picker_sw.subscribe(function() {
+				if (active === hsv)
+					switchPickingModeTo(hsl);
+				else
+					switchPickingModeTo(hsv);
+			});
+
+			hsv.addEventListener('click', function() {
+				switchPickingModeTo(hsv);
+			});
+			hsl.addEventListener('click', function() {
+				switchPickingModeTo(hsl);
+			});
+
+			parent.appendChild(icon);
+			parent.appendChild(button);
+		};
+
+		var setPickerDragAndDrop = function setPickerDragAndDrop() {
+			var preview = document.querySelector('#picker .preview-color');
+			var picking_area = document.querySelector('#picker .picking-area');
+
+			preview.setAttribute('draggable', 'true');
+			preview.addEventListener('drop', drop);
+			preview.addEventListener('dragstart', dragStart);
+			preview.addEventListener('dragover', allowDropEvent);
+
+			picking_area.addEventListener('drop', drop);
+			picking_area.addEventListener('dragover', allowDropEvent);
+
+			function drop(e) {
+				var color = getSampleColorFrom(e);
+				UIColorPicker.setColor('picker', color);
+			};
+
+			function dragStart(e) {
+				e.dataTransfer.setData('sampleID', 'picker');
+				e.dataTransfer.setData('location', 'picker');
+			};
+		};
+
+		var getSampleColorFrom = function getSampleColorFrom(e) {
+			var sampleID = e.dataTransfer.getData('sampleID');
+			var location = e.dataTransfer.getData('location');
+
+			if (location === 'picker')
+				return UIColorPicker.getColor(sampleID);
+			if (location === 'picker-samples')
+				return ColorPickerSamples.getSampleColor(sampleID);
+			if (location === 'palette-samples')
+				return ColorPalette.getSampleColor(sampleID);
+		};
+
+		var setVoidSwitch = function setVoidSwitch() {
+			var void_sample = getElemById('void-sample');
+			void_sw = new StateButton(void_sample);
+			void_sw.subscribe( function (state) {
+				void_sample.setAttribute('data-active', state);
+				if (state === true) {
+					ColorPickerSamples.unsetActiveSample();
+					CanvasSamples.unsetActiveSample();
+				}
+			});
+		};
+
+		var unsetVoidSample = function unsetVoidSample() {
+			void_sw.unset();
+		};
+
+		var init = function init() {
+			controls = getElemById('controls');
+
+			var color = new Color();
+			color.setHSL(0, 51, 51);
+			UIColorPicker.setColor('picker', color);
+
+			setPickerDragAndDrop();
+			createPickerModeSwitch();
+			setVoidSwitch();
+		};
+
+		return {
+			init : init,
+			unsetVoidSample : unsetVoidSample,
+			getSampleColorFrom : getSampleColorFrom
+		};
+
+	})();
+
+	var init = function init() {
+		UIColorPicker.init();
+		InputSliderManager.init();
+		ColorInfo.init();
+		ColorPalette.init();
+		ColorPickerSamples.init();
+		CanvasSamples.init();
+		Tool.init();
+	};
+
+	return {
+		init : init
+	};
+
+})();
+
+

+

+
+
+
{{CSSRef}}

+
+
Dieses Werkzeug vereinfacht es, beliebige Farben zu kreieren, um sie dann für das Internet zu verwenden. Außerdem erlaubt es, Farben in verschiedene von CSS unterstützte Formate zu konvertieren. Dazu zählen: HEXA-Farben, RGB (Rot/Grün/Blau) und HSL (Farbton/Sättigung/relative Helligkeit). Bei Verwendung der Farbformate RGB (rgba) und HSL (hsla) wird es auch unterstützt, den Alphakanal einzustellen.

+
+
Jede Farbe wird in allen drei im Internet üblichen CSS-Formaten ausgedrückt. Weiters wird für die ausgewählte Farbe jeweils eine Palette für HSL (Farbton/Sättigung/relative Helligkeit), HSV (Farbton/Sättigung/Hellwert) und den Alphakanal angezeigt. Das Spektrum des Farbauswahl-Werkzeuges kann man zwischen dem HSL- und HSV-Farbraum umschalten.

+
+
{{ EmbedLiveSample('ColorPicker_Tool', '100%', '900') }}

+
+
 

diff --git a/files/de/web/css/css_colors/index.html b/files/de/web/css/css_colors/index.html
new file mode 100644
index 0000000000..b9ef3a636f
--- /dev/null
+++ b/files/de/web/css/css_colors/index.html
@@ -0,0 +1,117 @@
+---
+title: CSS Farben
+slug: Web/CSS/CSS_Colors
+tags:
+  - CSS
+  - CSS Farben
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Color
+---
+
{{CSSRef}}

+
+
CSS Colors ist ein CSS Modul, das um Farben, Farbtypen und Transparenz geht.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("color")}}
    • 
+ 
  • {{cssxref("opacity")}}
    • 
+

+

+
+
CSS Datentypen

+
+
{{cssxref("<color>")}}

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Colors')}}{{Spec2('CSS3 Colors')}} 
{{SpecName('CSS2.1', 'colors.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}3.03.51.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}6.06.01.0

+

+
+
Siehe auch

+
+
    
+ 
  • In CSS sind Farbverläufe keine Farben, sondern Bilder.
    • 
+

diff --git a/files/de/web/css/css_columns/index.html b/files/de/web/css/css_columns/index.html
new file mode 100644
index 0000000000..f637773da4
--- /dev/null
+++ b/files/de/web/css/css_columns/index.html
@@ -0,0 +1,60 @@
+---
+title: CSS Columns
+slug: Web/CSS/CSS_Columns
+tags:
+  - CSS
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Columns
+---
+
{{CSSRef("CSS3 Multicol")}}

+
+
CSS Spalten ist ein CSS Modul, das ein Mehrspaltenlayout definiert, das es erlaubt, auszudrücken, wie Inhalte zwischen Spalten aufgeteilt werden und wie Lücken und Linien dazwischen gehandhabt werden.

+
+
Referenz

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("break-after")}}
    • 
+ 
  • {{cssxref("break-before")}}
    • 
+ 
  • {{cssxref("break-inside")}}
    • 
+ 
  • {{cssxref("column-count")}}
    • 
+ 
  • {{cssxref("column-fill")}}
    • 
+ 
  • {{cssxref("column-gap")}}
    • 
+ 
  • {{cssxref("column-rule")}}
    • 
+ 
  • {{cssxref("column-rule-color")}}
    • 
+ 
  • {{cssxref("column-rule-style")}}
    • 
+ 
  • {{cssxref("column-rule-width")}}
    • 
+ 
  • {{cssxref("column-span")}}
    • 
+ 
  • {{cssxref("column-width")}}
    • 
+ 
  • {{cssxref("columns")}}
    • 
+

+

+
+
Guides

+
+

+ 
Verwendung von mehrspaltigen Layouts

+ 
Schritt für Schritt Tutorial darüber, wie Layouts mit mehreren Spalten erstellt werden.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Multicol')}}{{Spec2('CSS3 Multicol')}}Ursprüngliche Definition

diff --git a/files/de/web/css/css_compositing_and_blending/index.html b/files/de/web/css/css_compositing_and_blending/index.html
new file mode 100644
index 0000000000..61e43b48e5
--- /dev/null
+++ b/files/de/web/css/css_compositing_and_blending/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS Compositing and Blending
+slug: Web/CSS/CSS_Compositing_and_Blending
+tags:
+  - CSS
+  - CSS Compositing and Blending
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/Compositing_and_Blending
+---
+
{{CSSRef}}

+
+
CSS Compositing and Blending ist ein CSS Modul, das definiert, wie Formen verschiedener Elemente zu einem einzelnen Bild kombiniert werden.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("background-blend-mode")}}
    • 
+ 
  • {{cssxref("mix-blend-mode")}}
    • 
+ 
  • {{cssxref("isolation")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("Compositing")}}{{Spec2("Compositing")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoDesktop("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatChrome("41.0")}}{{CompatGeckoMobile("36.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}

+

diff --git a/files/de/web/css/css_conditional_rules/index.html b/files/de/web/css/css_conditional_rules/index.html
new file mode 100644
index 0000000000..a0c6192fc1
--- /dev/null
+++ b/files/de/web/css/css_conditional_rules/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS Conditional Rules
+slug: Web/CSS/CSS_Conditional_Rules
+tags:
+  - CSS
+  - CSS Conditional Rules
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Conditional_Rules
+---
+
{{CSSRef}}

+
+
CSS Conditional Rules ist ein CSS Modul, das es erlaubt, eine Reihe von Regeln zu definieren, die nur basierend auf den Fähigkeiten des Prozessors oder des Dokuments angewendet werden, auf das das Stylesheet angewendet wird.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@document")}}
    • 
+ 
  • {{cssxref("@media")}}
    • 
+ 
  • {{cssxref("@supports")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git a/files/de/web/css/css_device_adaptation/index.html b/files/de/web/css/css_device_adaptation/index.html
new file mode 100644
index 0000000000..13b3bba03c
--- /dev/null
+++ b/files/de/web/css/css_device_adaptation/index.html
@@ -0,0 +1,104 @@
+---
+title: CSS Device Adaptation
+slug: Web/CSS/CSS_Device_Adaptation
+tags:
+  - CSS
+  - CSS Device Adaption
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Device_Adaptation
+---
+
{{CSSRef}}

+
+
CSS Device Adapation ist ein CSS Modul, das es erlaubt, die Größe, den Zoomfaktor und die Ausrichtung des Viewports zu definieren.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@viewport")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Device")}}{{Spec2("CSS3 Device")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung29[1]{{CompatNo}}10 {{property_prefix("-ms")}}11.10

+    {{CompatNo}}15

+    16[1]		{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung4.429.0{{CompatNo}}10{{property_prefix("-ms")}}11.10

+    {{CompatNo}}15

+    16[1]		{{CompatNo}}

+

+
+
[1] Hinter einem Flag.

diff --git a/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
new file mode 100644
index 0000000000..1401a93f7f
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -0,0 +1,210 @@
+---
+title: Aligning Items in a Flex Container
+slug: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+tags:
+  - Flex-Container
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+
{{CSSRef}}

+
+
Einer der Gründe, warum Flexbox das Interesse von Webentwicklern schnell geweckt hat, ist, dass es zum ersten Mal die richtigen Ausrichtungsfunktionen für das Web bereitgestellt hat. Es ermöglichte die richtige vertikale Ausrichtung, so dass wir endlich eine Box leicht zentrieren können. In diesem Handbuch werden wir uns eingehend mit der Funktionsweise der Ausrichtungs- und Ausrichtungseigenschaften in Flexbox befassen.

+
+
Um unsere Box zu zentrieren, verwenden wir die align-itemsEigenschaft, um unser Element auf der Querachse auszurichten, in diesem Fall der vertikal verlaufenden Blockachse. Wir verwenden justify-content, um das Element auf der Hauptachse auszurichten, in diesem Fall der horizontal verlaufenden Inline-Achse.

+
+
A containing element with another box centered inside it.

+
+
Sie können sich den Code dieses Beispiels unten ansehen. Ändern Sie die Größe des Containers oder des verschachtelten Elements, und das verschachtelte Element bleibt immer zentriert.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}

+
+
Eigenschaften, die die Ausrichtung steuern

+
+
Die Eigenschaften, die wir in diesem Handbuch betrachten werden, sind wie folgt.

+
+
    
+ 
  • {{cssxref("justify-content")}} — steuert die Ausrichtung aller Elemente auf der Hauptachse.
    • 
+ 
  • {{cssxref("align-items")}} — steuert die Ausrichtung aller Elemente auf der Querachse.
    • 
+ 
  • {{cssxref("align-self")}} — steuert die Ausrichtung eines einzelnen Flex-Elements auf der Querachse.
    • 
+ 
  • {{cssxref("align-content")}} — in der Spezifikation als „Packing Flex Lines“ beschrieben; Steuert den Abstand zwischen den Flexlinien auf der Querachse.
    • 
+

+
+
Wir werden auch herausfinden, wie automatische Ränder für die Ausrichtung in der Flexbox verwendet werden können.

+
+

+
Hinweis : Die Ausrichtungseigenschaften in Flexbox wurden in eine eigene Spezifikation eingefügt - CSS Box Alignment Level 3 . Es wird erwartet, dass diese Spezifikation letztendlich die in Flexbox Level One definierten Eigenschaften ersetzt.

+

+
+
Die Querachse

+
+
Die Eigenschaften align-itemsund align-selfsteuern die Ausrichtung unserer Flex-Elemente auf der Querachse in den Spalten if flex-directionis rowund entlang der Zeile if flex-directionis column.

+
+
Wir verwenden die Achsenausrichtung im einfachsten Flex-Beispiel. Wenn wir display: flexeinem Container hinzufügen , werden alle untergeordneten Elemente zu flexiblen Elementen, die in einer Reihe angeordnet sind. Sie werden alle so groß wie der höchste Gegenstand, da dieser Gegenstand die Höhe der Gegenstände auf der Querachse definiert. Wenn für Ihren Flex-Container eine Höhe festgelegt ist, werden die Elemente auf diese Höhe gedehnt, unabhängig davon, wie viel Inhalt sich im Element befindet.

+
+
Three items, one with additional text causing it to be taller than the others.

+
+
Three items stretched to 200 pixels tall

+
+
The reason the items become the same height is that the initial value of align-items, the property that controls alignment on the cross axis, is set to stretch.

+
+
We can use other values to control how the items align:

+
+
    
+ 
  • align-items: flex-start
    • 
+ 
  • align-items: flex-end
    • 
+ 
  • align-items: center
    • 
+ 
  • align-items: stretch
    • 
+ 
  • align-items: baseline
    • 
+

+
+
In the live example below, the value of align-items is stretch. Try the other values and see how all of the items align against each other in the flex container.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} 

+
+
Aligning one item with align-self

+
+
The align-items property sets the align-self property on all of the flex items as a group. This means you can explicitly declare the align-self property to target a single item. The align-self property accepts all of the same values as align-items plus a value of auto, which will reset the value to that which is defined on the flex container.

+
+
In this next live example, the flex container has align-items: flex-start, which means the items are all aligned to the start of the cross axis. I have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. You can change the value of align-items or change the values of align-self on the individual items to see how this works.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}}

+
+
Changing the main axis

+
+
So far we have looked at the behaviour when our flex-direction is row, and while working in a language written top to bottom. This means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down.

+
+
Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis.

+
+
If we change our flex-direction to column, align-items and align-self will align the items to the left and right.

+
+
Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis.

+
+
You can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} 

+
+
Aligning content on the cross axis — the align-content property

+
+
So far we have been aligning the items, or an individual item inside the area defined by the flex-container. If you have a wrapped multiple-line flex container then you might also want to use the align-content property to control the distribution of space between the rows. In the specification this is described as packing flex lines.

+
+
For align-content to work you need more height in your flex container than is required to display the items. It then works on all the items as a set, and dictates what happens with that free space, and the alignment of the entire set of items within it.

+
+
The align-content property takes the following values:

+
+
    
+ 
  • align-content: flex-start
    • 
+ 
  • align-content: flex-end
    • 
+ 
  • align-content: center
    • 
+ 
  • align-content: space-between
    • 
+ 
  • align-content: space-around
    • 
+ 
  • align-content: stretch
    • 
+ 
  • align-content: space-evenly (not defined in the Flexbox specification)
    • 
+

+
+
In the live example below, the flex container has a height of 400 pixels, which is more than needed to display our items. The value of align-content is space-between, which means that the available space is shared out between the flex lines, which are placed flush with the start and end of the container on the cross axis.

+
+
Try out the other values to see how the align-content property works.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} 

+
+
Once again we can switch our flex-direction to column in order to see how this property behaves when we are working by column. As before, we need enough space in the cross axis to have some free space after displaying all of the items.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} 

+
+

+
Note: the value space-evenly is not defined in the flexbox specification and is a later addition to the Box Alignment specification. Browser support for this value is not as good as that of the values defined in the flexbox spec.

+

+
+
See the documentation for justify-content on MDN for more details on all of these values and browser support.

+
+
Aligning content on the main axis

+
+
Now that we have seen how alignment works on the cross axis, we can take a look at the main axis. Here we only have one property available to us — justify-content. This is because we are only dealing with items as a group on the main axis. With justify-content we control what happens with available space, should there be more space than is needed to display the items.

+
+
In our initial example with display: flex on the container, the items display as a row and all line up at the start of the container. This is due to the initial value of justify-content being flex-start. Any available space is placed at the end of the items.

+
+
Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items.

+
+
The justify-content property accepts the same values as align-content.

+
+
    
+ 
  • justify-content: flex-start
    • 
+ 
  • justify-content: flex-end
    • 
+ 
  • justify-content: center
    • 
+ 
  • justify-content: space-between
    • 
+ 
  • justify-content: space-around
    • 
+ 
  • justify-content: space-evenly (not defined in the Flexbox specification)
    • 
+

+
+
In the example below, the value of justify-content is space-between. The available space after displaying the items is distributed between the items. The left and right item line up flush with the start and end.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}} 

+
+
If the main axis is in the block direction because flex-direction is set to column, then justify-content will distribute space between items in that dimension as long as there is space in the flex container to distribute.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} 

+
+
Alignment and Writing Modes

+
+
Remember that with all of these alignment methods, the values of flex-start and flex-end are writing mode-aware. If the value of justify-content is start and the writing mode is left-to-right as in English, the items will line up starting at the left side of the container.

+
+
Three items lined up on the left

+
+
However if the writing mode is right-to-left as in Arabic, the items will line up starting at the right side of the container.

+
+
Three items lined up from the right

+
+
The live example below has the direction property set to rtl to force a right-to-left flow for our items. You can remove this, or change the values of justify-content to see how flexbox behaves when the start of the inline direction is on the right.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} 

+
+
Alignment and flex-direction

+
+
The start line will also change if you change the flex-direction property — for example using row-reverse instead of row.

+
+
In this next example I have items laid out with flex-direction: row-reverse and justify-content: flex-end. In a left to right language the items all line up on the left. Try changing flex-direction: row-reverse to flex-direction: row. You will see that the items now move to the right hand side.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} 

+
+
While this may all seem a little confusing, the rule to remember is that unless you do something to change it, flex items lay themselves out in the direction that words are laid out in the language of your document along the inline, row axis. flex-start will be where the start of a sentence of text would begin.

+
+
Diagram showing start on the left and end on the right.

+
+
You can switch them to display in the block direction for the language of your document by selecting flex-direction: column. Then flex-start will then be where the top of your first paragraph of text would start.

+
+
Diagram showing start at the top and end at the bottom.

+
+
If you change flex-direction to one of the reverse values, then they will lay themselves out from the end axis and in the reverse order to the way words are written in the language of your document. flex-start will then change to the end of that axis — so to the location where your lines would wrap if working in rows, or at the end of your last paragraph of text in the block direction.

+
+
Diagram showing start on the right and end on the left.

+
+
Diagram showing end at the top and start at the bottom

+
+
Using auto margins for main axis alignment

+
+
We don’t have a justify-items or justify-self property available to us on the main axis as our items are treated as a group on that axis. However it is possible to do some individual alignment in order to separate an item or a group of items from others by using auto margins along with flexbox.

+
+
A common pattern is a navigation bar where some key items are aligned to the right, with the main group on the left. You might think that this should be a use case for a justify-self property, however consider the image below. I have three items on one side and two on the other. If I were able to use justify-self on item d, it would also change the alignment of item e that follows, which may or may not be my intention.

+
+
Five items, in two groups. Three on the left and two on the right.

+
+
Instead we can target item 4 and separate it from the first three items by giving it a margin-left value of auto. Auto margins will take up all of the space that they can in their axis — it is how centering a block with margin auto left and right works. Each side tries to take as much space as it can, and so the block is pushed into the middle.

+
+
In this live example, I have flex items arranged simply into a row with the basic flex values, and the class push has margin-left: auto. You can try removing this, or adding the class to another item to see how it works.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} 

+
+
Future alignment features for Flexbox

+
+
At the beginning of this article I explained that the alignment properties currently contained in the Level 1 flexbox specification are also included in Box Alignment Level 3, which may well extend these properties and values in the future. We have already seen one place where this has happened, with the introduction of the space-evenly value for align-content and justify-content properties.

+
+
The Box Alignment module also includes other methods of creating space between items, such as the column-gap and row-gap feature as seen in CSS Grid Layout. The inclusion of these properties in Box Alignment means that in future we should be able to use column-gap and row-gap in flex layouts too, and in Firefox 63 you will find the first browser implementation of the gap properties in flex layout.

+
+
My suggestion when exploring flexbox alignment in depth is to do so alongside looking at alignment in Grid Layout. Both specifications use the alignment properties as detailed in the Box Alignment specification. You can see how these properties behave when working with a grid in the MDN article Box Alignment in Grid Layout, and I have also compared how alignment works in these specifications in my Box Alignment Cheatsheet.

+
+
See Also

+
+
diff --git a/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html
new file mode 100644
index 0000000000..86354499d2
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/flex_elemente_sortieren/index.html
@@ -0,0 +1,138 @@
+---
+title: Flex Elemente Sortieren
+slug: Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren
+tags:
+  - Barrierefreiheit
+  - CSS
+  - Flex
+  - Reihenfolge
+  - Richtung
+  - flexbox
+  - umgekehrt
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items
+---
+
{{CSSRef}}

+
+
Neue Layout-Methoden wie z.B Flexbox und Grid geben die Möglichkeit, die Reihenfolge dessen Inhaltes zu verändern. Dieser Artikel handelt von den verschiedenen Möglichkeiten wie man die visuelle Reihenfolge des Inhalts, mithilfe von Flexbox, ändern kann. Dazu werden wir uns das Thema aus der perspektive der Barrierefreiheit betrachten.

+
+
Die Anzeige der Elemente umkehren

+
+
Die {{cssxref("flex-direction")}} Eigenschaft kann einer der 4 folgenden Werte bekommen:

+
+
    
+ 
  • row // Reihe
    • 
+ 
  • column // Spalte
    • 
+ 
  • row-reverse // Reihe-umgekehrt
    • 
+ 
  • column-reverse // Spalte-umgekehrt
    • 
+

+
+
Bei den ersten 2 Werten, bleibt die Reihenfolge wie sie auch im Quelltext angegeben ist und zeigt diese nacheinander von der Startlinie an an. Die Elemente werden dabei entweder in einer Reihe (row), oder in einer Spalte (column) angezeigt.

+ The items are displayed in a row starting on the left.

+
+
The items are displayed as a column starting from the top 

+
+
Die letzten beiden Werte, kehren die Reihenfolge der Elemente um, indem Sie die Start und End-Linien wechseln

+
+
The items are displayed in reverse order starting on the right-hand line.

+
+
The items are displayed in a column in reverse order starting at the bottom line.

+
+
Denk dran das der Start der Linie mit den Schreibmodis verbunden ist. Das Reihenbeispiel oben demonstriert wie row und row-reverse in einer links-zu-rechts Sprache wie z.B. Deutsch funktioniert. Wenn du aber in einer rechts-zu-links Sprache wie z.B. Arabisch arbeitest dann würde row rechts starten und row-reverse links.

+
+
Flex containers with Arabic letters showing how row starts from the right hand side and row-reverse from the left.

+
+
Das kann zwar nach einer schönen Möglichkeit aussehen, Elemente in einer umgekehrten Reihenfolge anzuzeigen, es sollte einem jedoch bewusst sein, das elemente nur visuell in einer umgekehrten Reihenfolge angezeigt werden. Die Spezifikation sagt diesbezüglich folgendes:

+
+

+
“Hinweis: Die Umsortierungs-möglichkeiten betreffen absichtlich nur die visuelle Ansicht und lassen dabei Sprech- und Navigationsbasierte Reihenfolgen außen vor. Das ermöglicht Autoren die Möglichkeit die visuelle Ansicht zu ändern, während sie die Quellen-Reihenfolge in intakt hält für nicht-CSS UAs und für lineare Modelle, wie z.B. Sprachmodelle und Sequentielle Navigationen” - Reigenfolge und Orientation

+

+
+
Wenn die Elemente Hyperlinks sind, oder irgendwelche anderen Elemente zu denen der User hintabben kann, dann wäre die tab-reihenfolge die selbe, wie sie im Dokumenten-Quellcode vorkommt und nicht wie sie visuell angezeigt wird.

+
+
Wenn man einen reverse Wert benuzt, oder in irgendeiner Weise die Reihenfolge der Elemente beeinflusst, dann musst du schauen, ob man nicht doch die logische Reihenfolge im Quelltext ändert. Die Spezifikitation fährt fort mit einer Warnung, das man umsortierung nicht nutzen soll um Probleme im Quellcode zu fixen.

+
+

+
“Autoren sollten die Reihenfolgen- oder Umgekehrtwerte der flex-flow/flex-direction Eigenschaften nicht als Ersatz für die tatsächliche Änderung des Dokumentes nutzen, da das die Barrierefreiheit des Dokumentes einschränkt.”

+

+
+

+
Hinweis: Firefox hatte ein paar Jahre lang einen Bug, bei dem es versucht hatte der visuellen Reihenfolge und nicht der Quelltext-Reihenfolge zu folgen, daruch verhielt es sich anders als andere Browser. Dieser Bug ist mittlerweile gefixt. Man sollte immer Quelltext-Reihenfolge als die logische Reihenfolge für das Dokument benutzen, da alle aktuellen User Agents diesem Schema folgen.

+

+
+
In dem Live-Beispiel unten habe ich einen focus-style hinzugefügt, damit man, wenn man mit tab von link zu link wechselt, sieht welcher link markiert wird. Wenn man die Reihenfolge mit flex-direction wechselst, dann sieht man wie die tab Reihenfolge immernoch der Reihenfolge der Elemente im Quelltext folgen.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/order.html", '100%', 500)}}

+
+
Auf die gleiche Weise, wie das ändern des Wertes flex-direction nicht die Reihenfolge ändert, in denen zu Elementen navigiert werden, ändert es auch nicht die Reihenfolge in denen die Elemente gemalt werden. Es ist nur eine visuelle umkehrung der Elemente.

+
+
Die order Eigenschaft

+
+
Zusätzlich zum umkehren der Reihenfolge, in welcher flex-elemente visuell dargestellt werden, kann man die Elemente individuell ansprechen und die visuelle Reihenfolge mit der {{cssxref("order")}} Eigenschaft.

+
+
Die order Eigenschaft legt die Elemente in Ordnungsgruppen. Das heißt, das den Elementen eine Zahl zugewiesen werden, welche die dazugehörige Gruppe repräsentieren. Danach werden die Elemente, in die Reihenfolge gebracht, wie die Zahlen es vorgeben, der kleinste Wert zuerst. Wenn mehr als ein Element, den selben Wert besitzen, dann werden die Elemente innerhalb ihrer Gruppe so ausgelegt, wie sie im Quelltext vorkommen.

+
+
Beispiel: Ich habe 5 flex-items und weise order Eigenschaften folgendermaßen zu:

+
+
    
+ 
  • Quellelement 1: order: 2
    • 
+ 
  • Quellelement 2: order: 3
    • 
+ 
  • Quellelement 3: order: 1
    • 
+ 
  • Quellelement 4: order: 3
    • 
+ 
  • Quellelement 5: order: 1
    • 
+

+
+
Diese Elemente werden dann wie folgt dargestellt:

+
+
    
+ 
  • Quellelement 3: order: 1
    • 
+ 
  • Quellelement 5: order: 1
    • 
+ 
  • Quellelement 1: order: 2
    • 
+ 
  • Quellelement 2: order: 3
    • 
+ 
  • Quellelement 4: order: 3
    • 
+

+
+
Items have a number showing their source order which has been rearranged.

+
+
Um zu sehen, wie das die Reihenfolge beeinflusst, kann man im Live-Beispiel unten die Werte für order ändern. Man kann auch flex-direction zu row-reverse wechseln und sehen was passiert — die Start Linie ist getauscht, damit startet das sortieren von der anderen Seite.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/flex-direction.html", '100%', 440)}}

+
+
Flex-items haben einen natürlichen order Wert von 0, deshalb werden alle Elemente mit einem Zahlen-Wert größer als 0 nach Elementen angezeigt, welche noch keinen Expliziten order Wert erhalten haben.

+
+
Man kann auch negative Zahlenwerte verwenden, das ist ziemlich hilfreich. Wenn man ein Element als erstes anzeigen lassen will, aber die Reihenfolge aller anderen Elemente so lassen will wie sie sind, dann kann man diesem Element eine Reihenfolge von -1 geben. Da das kleiner als 0 ist, wird dieses Element als erstes angezeigt.

+
+
Im Live-Code Beispiel unten habe Ich Elemente mithilfe einer Flexbox ausgelegt. Wenn man ändert welches Element die Klasse active besitzt, dann kann man ändern, welches Element als erstes angezeigt werden soll, mit allen anderen Elementen darunter.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/negative-order.html", '100%', 520)}}

+
+
Die Elemente werden anhand der, wie es in der Spezifikation beschrieben ist, order-modified- document order angezeigt. Der Wert der order-Eigenschaft wird berücksichtigt, bevor die Elemente angezeigt werden

+
+
Order ändert auch die Malreihenfolge der Elemente; Elemente mit einem geringerem order Wert, werden vor den Elementen mit einem höherem order Wert gemalt.

+
+
Die order Eigenschaft und Barrierefreiheit

+
+
Wenn man die order Eigenschaft nutzt, dann hat man exakt die gleichen Implikationen, wenn es ums Thema Barrierefreiheit geht, wie beim ändern der flex-direction. Die Eigenschaft order ändert die Reihenfolge, in der Elemente gemalt werden und die Reihenfolge in der diese Elemente visuell auftauchen. Es ändert nichts an der sequentiellen Navigationsreihenfolge der Elemente. Deshalb könnte es passieren, dass wenn ein Benutzer auf einer Website durch die Zeilen tabbt, das dieser in einem ziemlich verwirrendem Weg durch das Layout springt.

+
+
Wenn man in irgendeinem Live-Beispiel auf dieser Seite hin und her tabbt, dann kann man sehen, wie order das potential hat, eine seltsame Erfahrung für alle Benutzer zu schaffen, die nicht ein Zeiger-Gerät verwenden. Um mehr über dieses Thema zu erfahren, empfehle Ich folgende Ressourcen:

+
+
+
+
Anwendungsbeispiele für order

+
+
Manchmal gibt es Anwendungsorte, an denen es hilfreich ist, das die logische und visuelle Reihenfolge der Elemente voneinander getrennt sind. Vorsichtig eingesetzt ermöglicht die order Eigenschaft hilfreiche Lösungen für verbreitete Problemmuster.

+
+
Man hat z.B. ein Design einer Karte, welche Neuigkeiten anzeigt. Die Überschrift der Neuigkeiten ist das Schlüsselelement und wäre das Element, zu dem der Benutzer springen würde wenn er durch die verschiedenen Überschriften tabben würde. Die Karte hat dazu auch noch ein Datum; das fertige Design sieht dann ungefähr so aus:

+
+
A design component with a date, then heading and then content.

+
+
Visually the date appears above the heading, im Quelltext. Jedoch, wenn die Karte von einem Programm vorgelesen wird, wäre es mir lieber, wenn der Titel als erstes vorgelesen wird und danach das Veröffentlichungsdatum. Das geht ganz einfach wenn man die order Eigenschaft nutzt.

+
+
Die Karte wird unser flex-container sein, mit flex-direction auf column. Dann gebe ich dem Datum die order:-1. Das setzt es über die Überschrift.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/order/usecase-order.html", '100%', 730)}}

+
+
Diese kleinen Veränderungen sind die Art der Fälle in denen die order Eigenschaft Sinn macht. Behalte die logische Abfolge als Lese und Tab Reihenfolge des Dokumentes und pflege das in einer Art und Weise, das es Barrierefrei strukturiert bleibt. Danach nutze order lediglich zur Design-Optimierung. Wenn man das tut, sollte man darauf achten, das man die Reihenfolge von Elementen, durch die der Benutzer durchtabbt, nicht durcheinander bringt. Du wirst schnell bemerken, ob deine Entwicklungs-Entscheidungen es für den Benutzer schwierig machen.

diff --git a/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html
new file mode 100644
index 0000000000..81b1db9c4b
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/grundlegende_konzepte_der_flexbox/index.html
@@ -0,0 +1,230 @@
+---
+title: Grundlegende Konzepte der Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+
 

+
+
{{CSSRef}}

+
+
Das Flexible Box Modul, üblicherweise als Flexbox bezeichnet, wurde als ein eindimensionales Layoutmodell und als eine Methode entwickelt, die eine Platzverteilung zwischen Elementen in einer Schnittstelle und leistungsstarke Ausrichtungsmöglichkeiten bietet. Dieser Artikel gibt einen Überblick über die Hauptmerkmale von Flexbox, die wir im Folgenden näher erläutern werden.

+
+
Wenn wir Flexbox als eindimensional bezeichnen, beschreiben wir die Tatsache, dass Flexbox sich mit dem Layout in einer Dimension zu einem Zeitpunkt beschäftigt - entweder als eine Zeile oder als eine Spalte. Dies kann mit dem zweidimensionalen Modell von CSS Grid Layout, das Spalten und Zeilen zusammen steuert, kontrastiert werden.

+
+
Die zwei Achsen der Flexbox

+
+
Bei der Arbeit mit Flexbox muss man in zwei Achsen denken - der Hauptachse und der Querachse. Die Hauptachse wird durch die Eigenschaft {{cssxref("flex-direction")}} definiert, und die Querachse verläuft senkrecht dazu. Alles, was wir mit flexbox machen, bezieht sich auf diese Achsen, so dass es sich lohnt zu verstehen, wie sie von Anfang an funktionieren.

+
+
Die Hauptachse

+
+
Die Hauptachse wird durch flex-direction definiert, die vier mögliche Werte hat:

+
+
    
+ 
  • row
    • 
+ 
  • row-reverse
    • 
+ 
  • column
    • 
+ 
  • column-reverse
    • 
+

+
+
Wenn Sie row oder row-reverse wählen, läuft Ihre Hauptachse entlang der Zeile in Zeilenrichtung.

+
+
If flex-direction is set to row the main axis runs along the row in the inline direction.

+
+
Wählen Sie column oder column-reverse und Ihre Hauptachse läuft von oben nach unten - in Blockrichtung.

+
+
If flex-direction is set to column the main axis runs in the block direction.

+
+
Die Querachse

+
+
Die Querachse (cross axis) verläuft senkrecht zur Hauptachse, d.h. wenn Ihre flex-direction (Hauptachse) auf row oder row-reverse eingestellt ist, läuft die Querachse die Spalten hinunter.

+
+
If flex-direction is set to row then the cross axis runs in the block direction.

+
+
Wenn Ihre Hauptachse column oder column-reverse ist, dann verläuft die Querachse entlang der Zeilen.

+
+
If flex-direction is set to column then the cross axis runs in the inline direction.

+
+
Es ist wichtig zu verstehen, welche Achse die richtige ist, wenn wir uns mit der Ausrichtung und Justierung von Flex-Elementen befassen; Flexbox bietet Eigenschaften, die den Inhalt entlang der einen oder anderen Achse ausrichtet und justiert.

+
+
Start- und Endzeilen

+
+
Ein weiterer wichtiger Bereich des Verständnisses ist, wie Flexbox keine Annahmen über den Schreibmodus des Dokuments macht. In der Vergangenheit wurde CSS stark in Richtung horizontale und links-nach-rechts-Schreibweise ausgerichtet. Moderne Layoutmethoden umfassen den Bereich der Schreibmodi und so gehen wir nicht mehr davon aus, dass eine Textzeile oben links in einem Dokument beginnt und nach rechts verläuft, wobei neue Zeilen untereinander erscheinen.

+
+
Sie können mehr über die Beziehung zwischen Flexbox und der Writing Modes Spezifikation in einem späteren Artikel lesen, aber die folgende Beschreibung soll helfen zu erklären, warum wir nicht über links und rechts und oben und unten sprechen, wenn wir die Richtung beschreiben, in die unsere Flex Elemente fließen.

+
+
Wenn die flex-direction row ist und ich in Englisch arbeite, dann ist die Anfangskante der Hauptachse links, die Endkante rechts.

+
+
Working in English the start edge is on the left.

+
+
Wenn ich auf Arabisch arbeiten würde, dann wäre die Anfangskante meiner Hauptachse rechts und die Endkante links.

+
+
The start edge in a RTL language is on the right.

+
+
In beiden Fällen befindet sich die Anfangskante der Querachse oben am Flexcontainer und die Endkante unten, da beide Sprachen einen horizontalen Schreibmodus haben.

+
+
Nach einer Weile wird das Nachdenken über Anfang und Ende statt links und rechts natürlich werden, und Ihnen nützlich sein, wenn Sie mit anderen Layout-Methoden arbeiten, wie CSS-Grid-Layout, die den gleichen Mustern folgen.

+
+
Der Flex Container

+
+
Ein mit Flexbox angelegter Bereich eines Dokuments wird als Flex Container bezeichnet. Um einen Flex Container zu erstellen, setzen wir den Wert der Eigenschaft {{cssxref("display")}} des Bereichscontainers auf flex oder inline-flex. Sobald wir dies tun, werden die direkten Kinder dieses Containers zu flexiblen Elementen. Wie bei allen Eigenschaften in CSS sind einige Initialwerte definiert, so dass sich beim Erstellen eines Flex Containers alle enthaltenen Flex Items wie folgt verhalten.

+
+
    
+ 
  • Elemente werden in einer Zeile angezeigt (die Standardeinstellung der Eigenschaft flex-direction ist row).
    • 
+ 
  • Die Positionen beginnen an der Startkante der Hauptachse.
    • 
+ 
  • Die Elemente dehnen sich nicht auf der Hauptdimension aus, sondern können schrumpfen.
    • 
+ 
  • Die {{cssxref("flex-basis")}} Eigenschaft wird auf auto gesetzt.
    • 
+ 
  • Die{{cssxref("flex-wrap")}} Eigenschaft wird auf nowrap gesetzt.
    • 
+

+
+
Dies hat zur Folge, dass Ihre Elemente in einer Reihe angeordnet werden, wobei die Größe des Inhalts als Größe in der Hauptachse verwendet wird. Wenn es mehr Elemente gibt, als in den Container passen, werden sie nicht eingepackt, sondern überlaufen. Wenn einige Elemente größer als andere sind, dehnen sich alle Elemente entlang der Querachse aus, um ihre volle Größe zu erreichen.

+
+
Wie das aussieht, sehen Sie im folgenden Live-Beispiel. Versuchen Sie, die Elemente zu bearbeiten oder zusätzliche Elemente hinzuzufügen, um das anfängliche Verhalten von Flexbox zu testen.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} 

+
+
Wechsel der flex-direction

+
+
Das Hinzufügen der Eigenschaft {{cssxref("flex-direction")}} zum Flex Container erlaubt es uns, die Richtung zu ändern, in der unsere Flex Elemente angezeigt werden. Einstellung der flex-direction: row-reverse behält die Anzeige entlang der Zeile bei, jedoch werden die Start- und Endlinien umgeschaltet.

+
+
Wenn wir die flex-direction in eine Spalte (column)ändern, schaltet die Hauptachse um und unsere Elemente werden nun in einer Spalte angezeigt. Setzen Sie column-reverse und die Start- und Endzeilen werden wieder umgeschaltet.

+
+
Das folgende Live-Beispiel hat die flex-direction auf row-reverse eingestellt. Versuchen Sie die anderen Werte - row, column and column-reverse - um zu sehen, was mit dem Inhalt passiert.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}

+
+
Multi-line flex containers with flex-wrap

+
+
While flexbox is a one dimensional model, it is possible to cause our flex items to wrap onto multiple lines. In doing so, you should consider each line as a new flex container. Any space distribution will happen across that line, without reference to the lines either side.

+
+
To cause wrapping behaviour add the property {{cssxref("flex-wrap")}} with a value of wrap. Now, should your items be too large to all display in one line, they will wrap onto another line. The live sample below contains items that have been given a width, the total width of the items being too wide for the flex container. As flex-wrap is set to wrap, the items wrap. Set it to nowrap, which is also the initial value, and they will instead shrink to fit the container because they are using initial flexbox values that allows items to shrink. Using nowrap would cause an overflow if the items were not able to shrink, or could not shrink small enough to fit.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

+
+
Find out more about wrapping flex items in the guide Mastering Wrapping of Flex Items.

+
+
The flex-flow shorthand

+
+
You can combine the two properties flex-direction and flex-wrap into the {{cssxref("flex-flow")}} shorthand. The first value specified is flex-direction and the second value is flex-wrap.

+
+
In the live example below try changing the first value to one of the allowable values for flex-direction - row, row-reverse, column or column-reverse, and also change the second to wrap and nowrap.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}

+
+
Properties applied to flex items

+
+
To have more control over flex items we can target them directly. We do this by way of three properties:

+
+
    
+ 
  • {{cssxref("flex-grow")}}
    • 
+ 
  • {{cssxref("flex-shrink")}}
    • 
+ 
  • {{cssxref("flex-basis")}}
    • 
+

+
+
We will take a brief look at these properties in this overview, and you can gain a fuller understanding in the guide Controlling Ratios of Flex Items on the Main Axis.

+
+
Before we can make sense of these properties we need to consider the concept of available space. What we are doing when we change the value of these flex properties is to change the way that available space is distributed amongst our items. This concept of available space is also important when we come to look at aligning items.

+
+
If we have three 100 pixel-wide items in a container which is 500 pixels wide, then the space we need to lay out our items is 300 pixels. This leaves 200 pixels of available space. If we don’t change the initial values then flexbox will put that space after the last item.

+
+
This flex container has available space after laying out the items.

+
+
If we instead would like the items to grow and fill the space, then we need to have a method of distributing the leftover space between the items. This is what the flex properties that we apply to the items themselves, will do.

+
+
The flex-basis property

+
+
The flex-basis is what defines the size of that item in terms of the space it leaves as available space. The initial value of this property is auto — in this case the browser looks to see if the items have a size. In the example above, all of the items have a width of 100 pixels and so this is used as the flex-basis.

+
+
If the items don’t have a size then the content's size is used as the flex-basis. This is why when we just declare display: flex on the parent to create flex items, the items all move into a row and take only as much space as they need to display their contents.

+
+
The flex-grow property

+
+
With the flex-grow property set to a positive integer, flex items can grow along the main axis from their flex-basis. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.

+
+
If we gave all of our items in the example above a flex-grow value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.

+
+
The flex-grow property can be used to distribute space in proportion. If we give our first item a flex-grow value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).

+
+
The flex-shrink property

+
+
Where the flex-grow property deals with adding space in the main axis, the flex-shrink property controls how it is taken away. If we do not have enough space in the container to lay out our items and flex-shrink is set to a positive integer the item can become smaller than the flex-basis. As with flex-grow different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for flex-shrink will shrink faster than its siblings that have lower values.

+
+
The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.

+
+

+
Note that these values for flex-grow and flex-shrink are proportions. Typically if we had all of our items set to flex: 1 1 200px and then wanted one item to grow at twice the rate, we would set that item to flex: 2 1 200px. However you could use flex: 10 1 200px and flex: 20 1 200px if you wanted.

+

+
+
Shorthand values for the flex properties

+
+
You will very rarely see the flex-grow, flex-shrink, and flex-basis properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The flex shorthand allows you to set the three values in this order — flex-grow, flex-shrink, flex-basis.

+
+
The live example below allows you to test out the different values of the flex shorthand; remember that the first value is flex-grow. Giving this a positive value means the item can grow. The second is flex-shrink — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is flex-basis; this is the value the items are using as their base value to grow and shrink from.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}

+
+
There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:

+
+
    
+ 
  • flex: initial
    • 
+ 
  • flex: auto
    • 
+ 
  • flex: none
    • 
+ 
  • flex: <positive-number>
    • 
+

+
+
Setting flex: initial resets the item to the initial values of Flexbox. This is the same as flex: 0 1 auto. In this case the value of flex-grow is 0, so items will not grow larger than their flex-basis size. The value of flex-shrink is 1, so items can shrink if they need to rather than overflowing. The value of flex-basis is auto. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.

+
+
Using flex: auto is the same as using flex: 1 1 auto; everything is as with flex:initial but in this case the items can grow and fill the container as well as shrink if required.

+
+
Using flex: none will create fully inflexible flex items. It is as if you wrote flex: 0 0 auto. The items cannot grow or shrink but will be laid out using flexbox with a flex-basis of auto.

+
+
The shorthand you often see in tutorials is flex: 1 or flex: 2 and so on. This is as if you used flex: 1 1 0. The items can grow and shrink from a flex-basis of 0.

+
+
Try these shorthand values in the live example below.

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}

+
+
Alignment, justification and distribution of free space between items

+
+
A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.

+
+
align-items

+
+
The {{cssxref("align-items")}} property will align the items on the cross axis.

+
+
The initial value for this property is stretch and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.

+
+
You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:

+
+
    
+ 
  • stretch
    • 
+ 
  • flex-start
    • 
+ 
  • flex-end
    • 
+ 
  • center
    • 
+

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}

+
+
justify-content

+
+
The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which flex-direction has set the flow. The initial value is flex-start which will line the items up at the start edge of the container, but you could also set the value to flex-end to line them up at the end, or center to line them up in the centre.

+
+
You can also use the value space-between to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value space-around. With space-around, items have a half-size space on either end. Or, to cause items to have equal space around them use the value space-evenly. With space-evenly, items have a full-size space on either end.

+
+
Try the following values of justify-content in the live example:

+
+
    
+ 
  • flex-start
    • 
+ 
  • flex-end
    • 
+ 
  • center
    • 
+ 
  • space-around
    • 
+ 
  • space-between
    • 
+ 
  • space-evenly
    • 
+

+
+
{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}

+
+
In the article Aligning Items in a Flex Container we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.

+
+
Next steps

+
+
After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at how this specification relates to other parts of CSS.

diff --git a/files/de/web/css/css_flexible_box_layout/index.html b/files/de/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..50a0d76329
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,111 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+
{{CSSRef}}

+
+
CSS Flexible is a module of CSS that defines a multi-column layout, allowing to express how content should flows between columns, and how gaps and rules are handled.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("align-content")}}
    • 
+ 
  • {{cssxref("align-items")}}
    • 
+ 
  • {{cssxref("align-self")}}
    • 
+ 
  • {{cssxref("flex")}}
    • 
+ 
  • {{cssxref("flex-basis")}}
    • 
+ 
  • {{cssxref("flex-direction")}}
    • 
+ 
  • {{cssxref("flex-flow")}}
    • 
+ 
  • {{cssxref("flex-grow")}}
    • 
+ 
  • {{cssxref("flex-shrink")}}
    • 
+ 
  • {{cssxref("flex-wrap")}}
    • 
+ 
  • {{cssxref("justify-content")}}
    • 
+ 
  • {{cssxref("order")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using CSS flexible boxes

+ 
Step-by-step tutorial about how to build layouts using this feature.

+ 
Using flexbox to lay out Web applications

+ 
Tutorial explaining how to use flexbox in the specific context of Web applications.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox') }}{{ Spec2('CSS3 Flexbox') }}Initial definition.

+
+
Browser compatibility

+
+
{{CompatibilityTable()}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop("20.0")}}21.0{{property_prefix("-webkit")}}

+    29.0		10.0{{property_prefix("-ms")}}

+    11.0		12.106.1{{property_prefix("-webkit")}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}

+

+
+
 

diff --git a/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..8a66487777
--- /dev/null
+++ b/files/de/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,397 @@
+---
+title: Using CSS flexible boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+
{{CSSRef}}

+
+
Die CSS3 Flexible Box, auch flexbox genannt, ist ein Layoutmodus, um Elemente einer Seite so anzuordnen, dass sie sich vorhersagbar verhalten, wenn sich das Layout verschiedenen Bildschirmgrößen und Ausgabegeräten anpasst. Für viele Anwendungsfälle stellt das Flexible-Box-Modell eine Verbesserung gegenüber dem Block-Modell dar, da es keine Floats nutzt. Außerdem fallen die Margins eines Containers nicht mit den Margins seines Inhalts zusammen.

+
+
Viele Designer empfinden die Verwendung des Flexbox-Modells als einfacher. Kindelemente einer Flexbox können in jede Richtung ausgelegt werden sowie eine flexible Größe besitzen, um sich so an den Anzeigeplatz anzupassen. Die Positionierung von Kindelementen ist dadurch wesentlich leichter und komplexe Layouts sind nicht nur einfacher, sondern auch mit schönerem Code zu erlangen, was auf die unabhängige Platzierung der Elemente im Quellcode zurückzuführen ist. Diese Unabhängigkeit beeinflusst bewusst nur die visuelle Darstellung und lässt somit die Sprachordnung und Navigation, die auf dem Quellcode basiert, unberührt.

+
+
Hinweis: Obwohl sich die Spezifikation des CSS Flexible Boxes Layouts im Aufruf zum letzen Arbeitsentwurf befindet (siehe aktuellen Editor-Entwurf), haben noch nicht alle Browser alle Eigenschaften der Flexbox implementiert. Es sei hiermit darauf verwiesen, dass es noch keine ausreichend übergreifende Unterstützung gibt. Einen Überblick über den Stand der jeweiligen Eigenschaften bietet die Kompatibilitätsliste.

+
+
Flexible-Box-Konzept

+
+
Ein entscheidender Aspekt des Flex-Layouts ist die Möglichkeit, die Breite und/oder Höhe der einzelnen Elemente, entsprechend des zur Verfügung stehenden Platzes, auf jedem Gerät anpassen zu können. Ein Flex-Container dehnt seine Elemente entweder aus, um den verfügbaren freien Platz zu füllen, oder verkleinert sie, um einen Overflow zu vermeiden.

+
+
Der Flexbox-Layout-Algorithmus funktioniert richtungsunabhängig, anders als beim Block-Layout, das vertikal ausgerichtet ist, oder beim Inline-Layout, das horizontal ausgerichtet ist. Obwohl das Block-Layout gut auf Seiten anwendbar ist, mangelt es ihm an individuellen Richtlinien, um Applikationskomponenten zu unterstützen, die die Ausrichtung ändern, sich in ihrer Größe anpassen, je nach Benutzerprogrammen ausdehnen oder verkleinern, von der Horizontalen in die Vertikale rotieren müssen und so weiter. Das Flexbox-Layout lässt sich am besten auf Anwendungskomponenten und auf kleinere Layouts anwenden, während das (neu aufkommende) Grid-Layout für großflächigere Layouts bestimmt ist. Beide sind Bestandteil größerer Bemühungen der CSS-Arbeitsgruppe, um eine größere Interoperabilität zwischen Webanwendungen mit den unterschiedlichsten Benutzerprogrammen, den vielfältigen Schreibmethoden und anderen Anforderungen, die an die Flexibilität gestellt werden, zu ermöglichen.

+
+
Flexible-Box-Wortschatz

+
+
Während sich die Diskussion der Flexible Boxes von Bezeichnungen wie Horizontal-/Inline-Achse und Vertikal-/Block-Achse befreit, bedarf es dennoch einer neuen Terminologie, um das Modell adäquat zu beschreiben. Folgendes Diagramm soll als Referenz, zur Erörterung des Wortschatzes, dienen. Es zeigt einen Flex Container, dessen Eigenschaft flex-direction den Wert row hat. Das bedeutet, dass die flex items (im weiteren Verlauf als Flex-Elemente benannt) einander auf der Horizontalen, der Hauptachse, folgen – gemäß der gängigen Schreibmethode, die der Schreibrichtung folgt – in diesem Fall von links nach rechts.

+
+
flex_terms.png

+
+

+ 
Flex container (Flex-Container)

+ 
Das Elternelement, in dem die Flex-Elemente (entsprechen den flex items im Diagramm) liegen. Ein Flex-Container wird durch den Wert flex oder inline-flex der Eigenschaft {{Cssxref("display")}} bestimmt.

+

+
+

+ 
Flex item (Flex-Elemente)

+ 

+ 
Jedes Kindelement eines Flex-Containers wird zu einem Flex-Element. Text, der sich unmittelbar in einem Flex-Container befindet, wird von einem anonymen Flex-Element umspannt.

+ 

+ 
Achsen

+ 

+ 
Jedes Flexible-Box-Layout folgt zwei Achsen. Die Hauptachse ist die Achse, auf der die Flex-Elemente aufeinander folgen. Die Querachse ist die Achse, die senkrecht zur Hauptachse steht.

+
+ 
    
+  
  • Die flex-direction-Eigenschaft bestimmt die Hauptachse.
    • 
+  
  • Die justify-content-Eigenschaft bestimmt, wie Flex-Elemente auf der Hauptachse der aktuellen Zeile ausgelegt werden.
    • 
+  
  • Die align-items-Eigenschaft bestimmt die standardmäßige Ausrichtung der Flex-Elemente auf der Querachse der aktuellen Zeile.
    • 
+  
  • Die align-self-Eigenschaft bestimmt die Ausrichtung einzelner Flex-Elemente auf der Querachse und überschreibt den standardmäßig durch align-items definierten Wert.
    • 
+ 

+ 

+ 
Richtungen

+ 

+ 
Die Seiten main start/main end und cross start/cross end des Flex-Containers beschreiben den Anfang und den Endpunkt der Fließrichtung von Flex-Elementen. Sie folgen der Haupt- und Querachse des Flex-Containers in der durch writing-mode festgelegten Richtung (von links nach rechts, von rechts nach links usw.)

+
+ 
    
+  
  • Die order-Eigenschaft weist Elementen Ordinalzahlen zu und legt fest, welche Elemente zuerst erscheinen.
    • 
+  
  • Die flex-flow-Eigenschaft fasst die flex-direction- und flex-wrap-Eigenschaften zusammen, um die Flex-Elemente anzulegen.
    • 
+ 

+ 

+ 
Lines

+ 

+ 
Die Flex-Elemente können auf eine oder mehrere Linien ausgelegt werden, gemäß der flex-wrap-Eigenschaft, welche die Richtung der Querachse und die Richtung der Linien steuert, in welche diese aufgereiht werden.

+ 

+ 
Dimensions

+ 

+ 
Die richtungsunabhängigen Entsprechungen von Höhe und Breite der Flex-Elemente sind main size und cross size, die entsprechend der Haupt- bzw. Querachse des Flex-Containers folgen.

+
+ 
+ 

+

+
+
Flexible-Box-Auszeichnung

+
+
Um per CSS Elemente auszuzeichnen, die dieses Layout benutzen, setzt man die display-Eigenschaft wie folgt:

+
+
display: flex

+
+
oder

+
+
display: inline-flex

+
+
Macht man es so, definiert man das Element als Flex-Container und seine Kindelemente als Flex-Elemente. Der flex-Wert macht den Flex-Container zu einem Block-level-Element. Der flex-inline- Wert macht den Flex-Container zu einem kleinen Inline-level-Element.

+
+
Hinweis: Werden anbieterspzifische Präfixe für ältere Browser verwendet, fügt man den Präfix dem display-Wert hinzu und nicht der Eigenschaft. Zum Beispiel: display: -webkit-flex.

+
+
Überlegungen zu Flex-Elementen

+
+
Text, der sich unmittelbar in einem Flex-Container befindet, wird automatisch von einem anonymen Flex-Element umschlossen. Ein anonymes Flex-Element, das nur aus Leerraum besteht, wird nicht gerendert, ganz so, als ob es durch display: none ausgezeichnet ist.

+
+
Absolut positionierte Kindelemente eines Flex-Containers werden so angeordnet, dass sich ihre statische Position auf die Hauptecke der ersten Inhaltsbox ihres Flex-Containers bezieht.

+
+
Wegen eines bekannten Problems wird ein Flex-Element mit der Deklaration visibility: collapse gegenwärtig so behandelt, als ob es die Deklaration display: none besäße, und nicht, wie mit der Deklation visibility: hidden. Vorgeschlagener Workaround, bis zur Lösung dieses Problems, ist, die Deklaration visibility: hidden für Flex-Elemente zu benutzen, sodass sie sich so verhalten, als ob sie mit visibility: collapse ausgezeichnet wären. Für mehr Informationen siehe Bug 783470.

+
+
Die Margins benachbarter Flex-Elemente fallen nicht zusammen. Die Benutzung von Auto-Margins absorbiert überflüssigen Platz in der Vertikalen und der Horizontalen und kann zur Ausrichtung oder Trennung von benachbarten Flex-Elementen genutzt werden. Siehe Align with ‘auto’ margins in der W3C Flexible-Box-Layout-Model-Spezifikation für eine detailliertere Beschreibung.

+
+
Um eine vernünftige, minimal Größe für ‘flex Elemente’ zu gewährleisten, benutzt man min-width: auto und/oder min-height: auto. Bei ‘flex Elementen’ berechnet der auto Wert die mindest Breite/Höhe seiner Elemente so, dass nicht mehr Platz zu Verfügung steht, als es durch die Breite/Höhe seines Inhaltes erforderlich ist. Dadurch ist sichergestellt, dass die Elemente groß genug gerendert werden um ihren Inhalt anzeigen zu können. Siehe min-width und min-height für eine detailliertere Beschreibung.

+
+
Die Ausrichtungseigenschaften der Flexbox gewährleisten eine “echte” Zentrierung, entgegen anderer Zentrierungsmethoden in CSS. Dies bedeutet, dass Flex-Elemente auch dann zentriert bleiben, wenn sie ihren Container überfließen. Dies kann manchmal jedoch problematisch sein. Überfließt der Inhalt die obere Kante der Seite oder die linke Seite (in LTR-Sprachen wie dem Englischen; Bei RTL-Sprachen wie dem Arabischen tritt dieses Problem auf der rechten Seite auf), so kann man in diesem Bereich nicht mehr Scrollen auch wenn sich darin Inhalte befinden! In einer künftigen Version werden die Ausrichtungseigenschaften so erweitert, dass es auch hier eine “sichere” Möglichkeit geben wird. Sollte dies ein Problem darstellen, kann man momentan stattdessen auf Margins zurückgreifen, um eine Zentrierung zu gewährleisten, da sich diese “sicher” verhalten und bei einem Überfließen nicht mehr zentrieren. Anstelle der align-Deklaration kann man einfach Auto-Margins auf die zu zentrierenden Elemente anwenden. Anstelle der justify-Eigenschaft kann man Auto-Margins auf die äußeren Enden des ersten und letzten Flex-Elements innerhalb eines Flex-Containers setzen. Die Auto-Margins werden entsprechend des geschätzten, freien Platzes die Flex-Elemente entweder zentrieren, sollte genug Platz vorhanden sein, und zur normalen Ausrichtung wechseln, wenn kein Platz da ist. Will man jedoch justify-content durch eine margin-basierte Zentrierung in einer multi-line-Flexbox ersetzen, hat man wahrscheinlich kein Glück dabei, da man die Margins auf dem ersten und letzten Flex-Element auf jeder Zeile setzen müsste. Sofern man nicht schon im Voraus bestimmten kann, welches Element auf welcher Zeile landet, kann man margin-basierte Zentrierung auf der Hauptachse nicht zuverlässig benutzen, um die justify-content-Deklaration zu ersetzen.

+
+
Man sollte sich daran erinnern, dass, auch wenn die Reihenfolge in der Darstellung von Elementen unabhängig von der Notierung im Quellcode ist, sich diese nur in der visuellen Darstellung auswirkt und sich die Sprachreihenfolge und Navigationsanordnung nach der Anordnung im Quelltext richtet. Sprach- und Navigationssequenzen werden sogar von der order-Eigenschaft unberührt gelassen. Dementsprechend müssen Entwickler dafür Sorge tragen, Elemente in der richtigen Reihenfolge anzuordnen, um die Zugänglichkeit nicht zu gefährden.

+
+
Flexible-Box-Eigenschaften

+
+
Eigenschaften, die Flexible Boxes nicht beeinflussen

+
+
Da Flexible Boxes einen anderen Darstellungsalgorithmus verwenden, ergibt die Verwendung einiger Eigenschaften bei Flex-Containern keinen Sinn:

+
+
    
+ 
  • Eigenschaften column-* der multiple column Modules haben keinen Einfluss auf Flex-Elemente.
    • 
+ 
  • {{cssxref("float")}} und {{cssxref("clear")}} haben keinen Einfluss auf Flex -Elemente. Die Benutzung von float sorgt dafür, dass die display-Eigenschaft den errechneten Wert block zugewiesen bekommt.
    • 
+ 
  • {{cssxref("vertical-align")}} hat keinen Einfluss auf die Ausrichtung von Flex-Elementen.
    • 
+

+
+
Beispiele

+
+
Basis-Flex-Beispiel

+
+
Dieses Grundbeispiel zeigt, wie man ein Element "flexibel" macht und wie sich gleichrangige Elemente in einem flexiblen Zustand verhalten.

+
+
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+   .flex
+   {
+      /* basic styling */
+      width: 350px;
+      height: 200px;
+      border: 1px solid #555;
+      font: 14px Arial;
+
+      /* flexbox setup */
+      display: -webkit-flex;
+      -webkit-flex-direction: row;
+
+      display: flex;
+      flex-direction: row;
+   }
+
+   .flex > div
+   {
+      -webkit-flex: 1 1 auto;
+      flex: 1 1 auto;
+
+      width: 30px; /* To make the transition work nicely.  (Transitions to/from
+                      "width:auto" are buggy in Gecko and Webkit, at least.
+                      See http://bugzil.la/731886 for more info.) */
+
+      -webkit-transition: width 0.7s ease-out;
+      transition: width 0.7s ease-out;
+   }
+
+   /* colors */
+   .flex > div:nth-child(1){ background : #009246; }
+   .flex > div:nth-child(2){ background : #F1F2F1; }
+   .flex > div:nth-child(3){ background : #CE2B37; }
+
+   .flex > div:hover
+   {
+        width: 200px;
+   }
+
+   </style>
+
+ </head>
+ <body>
+  <p>Flexbox nuovo</p>
+  <div class="flex">
+    <div>uno</div>
+    <div>due</div>
+    <div>tre</div>
+  </div>
+ </body>
+</html>

+
+
Holy-Grail-Layout-Beispiel

+
+
Dieses Beispiel demonstriert, wie Flexbox die Möglichkeit bietet, Layouts entsprechend verschiedener Auflösungen dynamisch anzupassen. Folgendes Diagramm stellt die Transformation bildlich dar.

+
+
HolyGrailLayout.png

+
+
Hier wird das Beispiel dargestellt, dass sich eine Seite, die für einen Browser ausgelegt ist, sich an ein Smartphone-Fenster anpassen muss. Es müssen sich nicht nur die Größenverhältnisse der Elemente anpassen, sondern auch die Anordnung, in der die Elemente präsentiert werden. Das wird durch die Benutzung von Flexbox sehr vereinfacht.

+
+
​<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+
+  body {
+   font: 24px Helvetica;
+   background: #999999;
+  }
+
+  #main {
+   min-height: 800px;
+   margin: 0px;
+   padding: 0px;
+   display: -webkit-flex;
+   display:         flex;
+   -webkit-flex-flow: row;
+           flex-flow: row;
+   }
+
+  #main > article {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #cccc33;
+   border-radius: 7pt;
+   background: #dddd88;
+   -webkit-flex: 3 1 60%;
+           flex: 3 1 60%;
+   -webkit-order: 2;
+           order: 2;
+   }
+
+  #main > nav {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 1;
+           order: 1;
+   }
+
+  #main > aside {
+   margin: 4px;
+   padding: 5px;
+   border: 1px solid #8888bb;
+   border-radius: 7pt;
+   background: #ccccff;
+   -webkit-flex: 1 6 20%;
+           flex: 1 6 20%;
+   -webkit-order: 3;
+           order: 3;
+   }
+
+  header, footer {
+   display: block;
+   margin: 4px;
+   padding: 5px;
+   min-height: 100px;
+   border: 1px solid #eebb55;
+   border-radius: 7pt;
+   background: #ffeebb;
+   }
+
+  /* Too narrow to support three columns */
+  @media all and (max-width: 640px) {
+
+   #main, #page {
+    -webkit-flex-flow: column;
+            flex-direction: column;
+   }
+
+   #main > article, #main > nav, #main > aside {
+    /* Return them to document order */
+    -webkit-order: 0;
+            order: 0;
+   }
+
+   #main > nav, #main > aside, header, footer {
+    min-height: 50px;
+    max-height: 50px;
+   }
+  }
+
+ </style>
+  </head>
+  <body>
+ <header>header</header>
+ <div id='main'>
+    <article>article</article>
+    <nav>nav</nav>
+    <aside>aside</aside>
+ </div>
+ <footer>footer</footer>
+  </body>
+</html>

+
+
Playground (Spielwiese)

+
+
Es gibt verschiedene, online verfügbare Spielwiesen im Internet zum Experimentieren:

+
+
+
+
Things to keep in mind

+
+
The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.

+
+
Flexible boxes are laid out in conformance of the writing mode, which means that main start and main end are laid out according to the position of start and end.

+
+
cross start and cross end rely on the definition of the start or before position that depends on the value of direction.

+
+
Page breaks are possible in flexible boxes layout as long as break- property allows it. CSS3 break-after, break-before, and break-inside as well as CSS 2.1 page-break-before, page-break-after, and page-break-inside properties are accepted on a flex container, flex items, and inside flex items.

+
+
Browser compatibility

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support (single-line flexbox){{CompatGeckoDesktop("18.0")}}{{property_prefix("-moz")}}[2]

+    {{CompatGeckoDesktop("22.0")}}		21.0{{property_prefix("-webkit")}}

+    29.0		11[3]12.10{{property_prefix("-webkit")}}[5]6.1{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoDesktop("28.0")}}21.0{{property_prefix("-webkit")}}

+    29.0		11[3]12.10[5]

+    15 {{property_prefix("-webkit")}}		6.1{{property_prefix("-webkit")}}[1]

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox Mobile (Gecko)Firefox OSAndroidIE PhoneOpera MobileSafari Mobile
Basic support (single-line flexbox){{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}[2]

+    {{CompatGeckoMobile("22.0")}}		
+    
1.0{{property_prefix("-moz")}}[2]

+     1.1

+   		2.1{{property_prefix("-webkit")}}[4]

+    4.4		1112.10[5]

+    15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]
Multi-line flexbox{{CompatGeckoMobile("28.0")}}1.32.1{{property_prefix("-webkit")}}[4]

+    4.4		1112.10[5]

+    15{{property_prefix("-webkit")}}		7{{property_prefix("-webkit")}}[1]

+

+
+
[1] Safari up to 6.0 ( 6.1 for iOS ) supported an old incompatible draft version of the specification. Safari 6.1( 7 for iOS ) has been updated to support the final version.

+
+
[2] Up to Firefox 22, to activate flexbox support, the user has to change the about:config preference layout.css.flexbox.enabled to true. From Firefox 22 to Firefox 27, the preference is true by default, but the preference has been removed in Firefox 28.

+
+
[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 has been updated to support the final version.

+
+
[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.

+
+
[5] While in the initial implementation in Opera 12.10 flexbox was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.

+
+
See also

+
+
diff --git a/files/de/web/css/css_fonts/index.html b/files/de/web/css/css_fonts/index.html
new file mode 100644
index 0000000000..2d5b16fa9f
--- /dev/null
+++ b/files/de/web/css/css_fonts/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Fonts
+slug: Web/CSS/CSS_Fonts
+tags:
+  - CSS
+  - CSS Fonts
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Fonts
+---
+
{{CSSRef}}

+
+
CSS Fonts ist ein CSS Modul, das schriftbezogene Eigenschaften definiert und wie Schriftressourcen geladen werden. Es erlaubt, den Stil einer Schrift, wie deren Schriftart, -größe und -dicke zu bestimmen als auch die Variante der verwendeten Glyphe für eine Schriftart, die mehrere Glyphen für ein Schriftzeichen bereitstellt. Es erlaubt außerdem, die Höhe einer Zeile zu definieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("font")}}
    • 
+ 
  • {{cssxref("font-family")}}
    • 
+ 
  • {{cssxref("font-feature-settings")}}
    • 
+ 
  • {{cssxref("font-kerning")}}
    • 
+ 
  • {{cssxref("font-language-override")}}
    • 
+ 
  • {{cssxref("font-size")}}
    • 
+ 
  • {{cssxref("font-size-adjust")}}
    • 
+ 
  • {{cssxref("font-stretch")}}
    • 
+ 
  • {{cssxref("font-style")}}
    • 
+ 
  • {{cssxref("font-synthesis")}}
    • 
+ 
  • {{cssxref("font-variant")}}
    • 
+ 
  • {{cssxref("font-variant-alternates")}}
    • 
+ 
  • {{cssxref("font-variant-caps")}}
    • 
+ 
  • {{cssxref("font-variant-east-asian")}}
    • 
+ 
  • {{cssxref("font-variant-ligatures")}}
    • 
+ 
  • {{cssxref("font-variant-numeric")}}
    • 
+ 
  • {{cssxref("font-variant-position")}}
    • 
+ 
  • {{cssxref("font-weight")}}
    • 
+ 
  • {{cssxref("line-height")}}
    • 
+

+

+
+
@-Regeln

+
+

+ 
{{cssxref("@font-face")}}

+ 

+ 

+ 
    
+  
  • {{cssxref("@font-face/font-family", "font-family")}}
    • 
+  
  • {{cssxref("@font-face/font-feature-settings", "font-feature-settings")}}
    • 
+  
  • {{cssxref("@font-face/font-style", "font-style")}}
    • 
+  
  • {{cssxref("@font-face/font-variant", "font-variant")}}
    • 
+  
  • {{cssxref("@font-face/font-weight", "font-weight")}}
    • 
+  
  • {{cssxref("@font-face/font-stretch", "font-stretch")}}
    • 
+  
  • {{cssxref("@font-face/src", "src")}}
    • 
+  
  • {{cssxref("@font-face/unicode-range", "unicode-range")}}
    • 
+ 

+ 

+ 

+ 
{{cssxref("@font-feature-values")}}

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts')}}{{Spec2('CSS3 Fonts')}} 
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', '')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#font', '')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.01.0 (1.0)3.03.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

diff --git a/files/de/web/css/css_generated_content/index.html b/files/de/web/css/css_generated_content/index.html
new file mode 100644
index 0000000000..8541394b39
--- /dev/null
+++ b/files/de/web/css/css_generated_content/index.html
@@ -0,0 +1,61 @@
+---
+title: CSS Generated Content
+slug: Web/CSS/CSS_Generated_Content
+tags:
+  - CSS
+  - CSS Generated Content
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Generated_Content
+---
+
{{CSSRef}}

+
+
CSS Generated Content ist ein CSS Modul, das definiert, wie Inhalte zu einem Element hinzugefügt werden.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("content")}}
    • 
+ 
  • {{cssxref("quotes")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
content

+
+
 

+
+
{{Compat("css.properties.content")}}

+
+
quotes

+
+
{{Compat("css.properties.quotes")}}

+
+
 

diff --git a/files/de/web/css/css_grid_layout/index.html b/files/de/web/css/css_grid_layout/index.html
new file mode 100644
index 0000000000..d5e810da8e
--- /dev/null
+++ b/files/de/web/css/css_grid_layout/index.html
@@ -0,0 +1,252 @@
+---
+title: CSS Grid Layout
+slug: Web/CSS/CSS_Grid_Layout
+tags:
+  - CSS
+  - Grid Layout
+  - Grids
+  - Layout
+  - NeedsTranslation
+  - Raster
+  - Referenz
+  - Überblick
+translation_of: Web/CSS/CSS_Grid_Layout
+---
+
CSS Grid Layout zeichnet sich dadurch aus, dass eine Seite in Hauptbereiche unterteilt wird oder die Beziehung zwischen Teilen eines Steuerelements, das aus HTML-Grundelementen besteht, in Bezug auf Größe, Position und Layer definiert wird.

+
+
Grid Layout ermöglicht es, Elemente in Spalten und Reihen auszurichten, ähnlich wie in Tabellen. Jedoch gibt es viel mehr Gestaltungsmöglichkeiten und diese sind einfacher umzusetzen mit CSS Grid als es mit Tabellen der Fall war. Beispielsweise kann das Kindelement eines Grid-Container-Elements so positioniert werden, dass es andere überlappt und überlagert, ähnlich wie bei mit CSS positionierten Elementen.

+
+
Einfaches Beispiel

+
+
Das folgende Beispiel zeigt ein dreispaltiges Raster mit neuen Zeilen, die mit mindestens 100 Pixeln und einem Maximum von auto erstellt wurden. Die Elemente wurden mithilfe von zeilenbasierten Platzierungen im Raster positioniert.

+
+

+
+
+
HTML

+
+
<div class="wrapper">
+  <div class="one">One</div>
+  <div class="two">Two</div>
+  <div class="three">Three</div>
+  <div class="four">Four</div>
+  <div class="five">Five</div>
+  <div class="six">Six</div>
+</div>

+
+
CSS

+
+
.wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 10px;
+  grid-auto-rows: minmax(100px, auto);
+}
+.one {
+  grid-column: 1 / 3;
+  grid-row: 1;
+}
+.two {
+  grid-column: 2 / 4;
+  grid-row: 1 / 3;
+}
+.three {
+  grid-column: 1;
+  grid-row: 2 / 5;
+}
+.four {
+  grid-column: 3;
+  grid-row: 3;
+}
+.five {
+  grid-column: 2;
+  grid-row: 4;
+}
+.six {
+  grid-column: 3;
+  grid-row: 4;
+}
+

+
+
{{ EmbedLiveSample('example', '500', '440') }}

+

+
+
Referenz

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("grid-template-columns")}}
    • 
+ 
  • {{cssxref("grid-template-rows")}}
    • 
+ 
  • {{cssxref("grid-template-areas")}}
    • 
+ 
  • {{cssxref("grid-template")}}
    • 
+ 
  • {{cssxref("grid-auto-columns")}}
    • 
+ 
  • {{cssxref("grid-auto-rows")}}
    • 
+ 
  • {{cssxref("grid-auto-flow")}}
    • 
+ 
  • {{cssxref("grid")}}
    • 
+ 
  • {{cssxref("grid-row-start")}}
    • 
+ 
  • {{cssxref("grid-column-start")}}
    • 
+ 
  • {{cssxref("grid-row-end")}}
    • 
+ 
  • {{cssxref("grid-column-end")}}
    • 
+ 
  • {{cssxref("grid-row")}}
    • 
+ 
  • {{cssxref("grid-column")}}
    • 
+ 
  • {{cssxref("grid-area")}}
    • 
+ 
  • {{cssxref("grid-row-gap")}}
    • 
+ 
  • {{cssxref("grid-column-gap")}}
    • 
+ 
  • {{cssxref("grid-gap")}}
    • 
+

+

+
+
CSS Funktionen

+
+

+
    
+ 
  • {{cssxref("repeat", "repeat()")}}
    • 
+ 
  • {{cssxref("minmax", "minmax()")}}
    • 
+ 
  • {{cssxref("fit-content", "fit-content()")}}
    • 
+

+

+
+
CSS Datentypen

+
+

+
    
+ 
  • {{cssxref("<flex>")}}
    • 
+

+

+
+
Glossar Einträge

+
+

+
+

+
+
Anleitungen

+
+

+
+

+
+
Externe Quellen

+
+
+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusBemerkung
{{ SpecName('CSS3 Grid') }}{{ Spec2('CSS3 Grid') }}Initial definition.

+
+
diff --git a/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
new file mode 100644
index 0000000000..5551a4a59e
--- /dev/null
+++ b/files/de/web/css/css_images/implementing_image_sprites_in_css/index.html
@@ -0,0 +1,50 @@
+---
+title: Implementing image sprites in CSS
+slug: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+tags:
+  - Anleitung
+  - CSS
+  - CSS Bilder
+  - Fortgeschrittene
+  - Grafik
+  - NeedsContent
+  - Sprites
+  - Web
+translation_of: Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS
+---
+
{{APIRef}}

+
+
Image Sprites werden in zahlreichen Webanwendungen verwendet, wo mehrere Bilder verwendet werden. Statt jedes Bild als eine eigene Bilddatei einzubinden, ist es wesentlich speicher- und bandbreitenfreundlicher, sie als ein einzelnes Bild zu schicken, um die Anzahl an HTTP Anfragen zu verringern.

+
+
Implementierung

+
+
Angenommen, jedem Element mit der Klasse toolbtn wird ein Bild zugewiesen:

+
+
.toolbtn {
+  background: url(myfile.png);
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+}

+
+
Eine Hintergrundposition kann entweder über zwei x- und y-Werte nach der {{cssxref("url()")}} dem Hintergrund hinzugefügt werden oder als {{cssxref("background-position")}}. Als Beispiel:

+
+
#btn1 {
+  background-position: -20px 0px;
+}
+
+#btn2 {
+  background-position: -40px 0px;
+}

+
+
Dies verschiebt das Element mit der ID 'btn1' um 20 Pixel nach links und das Element mit der ID 'btn2' um 40 Pixel nach links (unter Annahme, dass diesen die Klasse toolbtn zugewiesen wurde und durch die obere CSS Regel beeinflusst werden).

+
+
Ebenso können Hover-Status erstellt werden mit:

+
+
#btn:hover {
+  background-position: <nach rechts verschobene Pixel>px <nach unten verschobene Pixel>px;
+}

+
+
Siehe auch

+
+
Voll funktionsfähige Demo bei CSS Tricks

diff --git a/files/de/web/css/css_images/index.html b/files/de/web/css/css_images/index.html
new file mode 100644
index 0000000000..b34532bf2c
--- /dev/null
+++ b/files/de/web/css/css_images/index.html
@@ -0,0 +1,145 @@
+---
+title: CSS Bilder
+slug: Web/CSS/CSS_Images
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Images
+---
+
{{CSSRef}}

+
+
CSS Images ist ein CSS Modul, das definiert, welche Typen von Bildern verwendet werden können (der {{cssxref("<image>")}} Typ, der URLs, Farbverläufe und andere Arten von Bildern beinhaltet), wie diese in der Größe geändert werden und wie sie und andere ersetzte Inhalte mit den verschiedenen Layoutmodellen interagieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("image-orientation")}}
    • 
+ 
  • {{cssxref("image-rendering")}}
    • 
+ 
  • {{cssxref("object-fit")}}
    • 
+ 
  • {{cssxref("object-position")}}
    • 
+

+

+
+
Funktionen

+
+

+
    
+ 
  • {{cssxref("linear-gradient", "linear-gradient()")}}
    • 
+ 
  • {{cssxref("radial-gradient", "radial-gradient()")}}
    • 
+ 
  • {{cssxref("repeating-linear-gradient", "repeating-linear-gradient()")}}
    • 
+ 
  • {{cssxref("repeating-radial-gradient", "repeating-radial-gradient()")}}
    • 
+ 
  • {{cssxref("element", "element()")}}
    • 
+

+

+
+
Datentypen

+
+

+
    
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("<uri>")}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
CSS Farbverläufe verwenden

+ 
Beschreibt einen bestimmten Typ von CSS Bildern, Farbverläufe, und wie diese erstellt und verwendet werden.

+ 
Implementierung von Bildsprites in CSS

+ 
Beschreibt die geläufige Methode, mehrere Bilder in einem einzigen Dokument zu gruppieren, um Downloadanfragen zu sparen und die Verfügbarkeit einer Seite zu beschleunigen.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Images')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images')}}{{Spec2('CSS3 Images')}} 
{{SpecName('CSS3 Values', '#urls', '<url>')}}{{Spec2('CSS3 Values')}} 
{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#url', '<url>')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git "a/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html" "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html"
new file mode 100644
index 0000000000..252f90b530
--- /dev/null
+++ "b/files/de/web/css/css_lists_and_counters/css_z\303\244hler_verwenden/index.html"
@@ -0,0 +1,126 @@
+---
+title: CSS Zähler verwenden
+slug: Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden
+tags:
+  - Anleitung
+  - CSS
+  - CSS Listen
+  - CSS Wert
+  - Fortgeschrittene
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters
+---
+
{{CSSRef}}

+
+
CSS Zähler sind im Grunde von CSS verwaltete Variablen, deren Werte mittels CSS Regeln inkrementiert werden können, um nachzuvollziehen, wie oft sie verwendet wurden. Dies ermöglicht es, die Darstellung von Inhalten anhand der Positionierung innerhalb des Dokuments anzupassen. CSS Zähler sind eine Implementierung von Automatic counters and numbering in CSS 2.1.

+
+
Der Wert eines Zählers wird durch die Verwendung von {{cssxref("counter-reset")}} geändert. {{cssxref("counter-increment")}} kann auf einer Seite durch verwenden der counter() oder counters() Funktion der {{cssxref("content")}} Eigenschaft dargestellt werden.

+
+
Zähler verwenden

+
+
Um einen CSS Zähler zu verwenden, muss er zunächst auf einen Wert zurückgesetzt werden (standardmäßig 0). Um den Wert eines Zählers zu einem Element hinzuzufügen, kann die counter() Funktion verwendet werden. Das folgende CSS fügt am Anfang jedes h3 Elements "Abschnitt <der Wert des Zählers>:" ein.

+
+
body {
+  counter-reset: section;                      /* Setzt den Abschnittszähler auf 0 */
+}
+
+h3::before {
+  counter-increment: section;                  /* Erhöht den Abschnittszähler */
+  content: "Abschnitt " counter(section) ": "; /* Zeigt den Zähler an */
+}
+

+
+
Beispiel:

+
+
<h3>Einführung</h3>
+<h3>Inhalt</h3>
+<h3>Zusammenfassung</h3>

+
+
{{EmbedLiveSample("Zähler_verwenden", 280, 150)}}

+
+
Zähler verschachteln

+
+
Ein CSS Zähler ist besonders nützlich, um kontinuierte Listen zu erstellen, da in Kindelementen automatisch eine neue Instanz eines CSS Zählers erzeugt wird. Wird die counters() Funktion verwendet, kann ein String zwischen verschiedenen Leveln von verschachtelten Zählern eingefügt werden. Beispielsweise dieses CSS:

+
+
ol {
+  counter-reset: section;                /* Erstellt mit jedem ol Element
+                                            eine neue Instanz des
+                                            Abschnittszählers. */
+  list-style-type: none;
+}
+
+li::before {
+  counter-increment: section;            /* Inkrementiert nur diese Instanz
+                                            des Abschnittszählers. */
+  content: counters(section,".") " ";    /* Fügt den Wert aller Instanzen
+                                            des Abschnittszählers durch "."
+                                            getrennt hinzu. */
+                                         /* Falls < IE8 unterstützt werden soll,
+                                            sollte sichergestellt werden, dass
+                                            kein Leerzeichen nach dem ',' steht. */
+}
+

+
+
Kombiniert mit dem folgenden HTML:

+
+
<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag               <!-- 2     -->
+    <ol>
+      <li>Eintrag</li>      <!-- 2.1   -->
+      <li>Eintrag</li>      <!-- 2.2   -->
+      <li>Eintrag           <!-- 2.3   -->
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+        </ol>
+        <ol>
+          <li>Eintrag</li>  <!-- 2.3.1 -->
+          <li>Eintrag</li>  <!-- 2.3.2 -->
+          <li>Eintrag</li>  <!-- 2.3.3 -->
+        </ol>
+      </li>
+      <li>Eintrag</li>      <!-- 2.4   -->
+    </ol>
+  </li>
+  <li>Eintrag</li>          <!-- 3     -->
+  <li>Eintrag</li>          <!-- 4     -->
+</ol>
+<ol>
+  <li>Eintrag</li>          <!-- 1     -->
+  <li>Eintrag</li>          <!-- 2     -->
+</ol>

+
+
Erzeugt dieses Ergebnis:

+
+
{{EmbedLiveSample("Zähler_verschachteln", 250, 350)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "generate.html#generate.html#counters", "counter-reset")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("counter-reset")}}
    • 
+ 
  • {{cssxref("counter-increment")}}
    • 
+

+
+
Es gibt ein zusätzliches Beispiel unter http://www.mezzoblue.com/archives/20.../counter_intu/. Dieser Blogeintrag wurde am 01.11.2006 veröffentlicht, sollte jedoch noch zutreffen.

diff --git a/files/de/web/css/css_lists_and_counters/index.html b/files/de/web/css/css_lists_and_counters/index.html
new file mode 100644
index 0000000000..e616ac7735
--- /dev/null
+++ b/files/de/web/css/css_lists_and_counters/index.html
@@ -0,0 +1,132 @@
+---
+title: CSS Lists and Counters
+slug: Web/CSS/CSS_Lists_and_Counters
+tags:
+  - CSS
+  - CSS Listen und Zähler
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Lists_and_Counters
+---
+
{{CSSRef}}

+
+
CSS Lists and Counters ist ein CSS Modul, das definiert, wie Listen dargestellt werden, wie Aufzählungspunkte gestylt werden können und wie Autoren neue Zähler erstellen können.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("list-style-image")}}
    • 
+ 
  • {{cssxref("list-style-type")}}
    • 
+ 
  • {{cssxref("list-style-position")}}
    • 
+ 
  • {{cssxref("list-style")}}
    • 
+ 
  • {{cssxref("counter-reset")}}
    • 
+ 
  • {{cssxref("counter-increment")}}
    • 
+

+

+
+
@-Regeln

+
+

+ 
{{cssxref("@counter-style")}}

+ 

+ 

+ 
    
+  
  • {{cssxref("@counter-style/system","system")}}
    • 
+  
  • {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}
    • 
+  
  • {{cssxref("@counter-style/negative", "negative")}}
    • 
+  
  • {{cssxref("@counter-style/prefix", "prefix")}}
    • 
+  
  • {{cssxref("@counter-style/suffix", "suffix")}}
    • 
+  
  • {{cssxref("@counter-style/range", "range")}}
    • 
+  
  • {{cssxref("@counter-style/pad", "pad")}}
    • 
+  
  • {{cssxref("@counter-style/speak-as", "speak-as")}}
    • 
+  
  • {{cssxref("@counter-style/fallback", "fallback")}}
    • 
+ 

+ 

+ 

+

+
+
Anleitungen

+
+

+ 
Konsistente Listeneinrückung

+ 
Erklärt, wie eine konsistente Einrückung zwischen verschiedenen Browsern erreicht werden kann.

+ 
CSS Zähler verwenden

+ 
Beschreibt, wie Zähler verwendet werden, um Aufzählungen außerhalb der traditionellen Listenelemente verwenden zu können oder um komplexe Zählungen durchzuführen.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Lists')}}{{Spec2('CSS3 Lists')}} 
{{SpecName('CSS2.1', 'generate.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git "a/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html" "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html"
new file mode 100644
index 0000000000..b2309f5e82
--- /dev/null
+++ "b/files/de/web/css/css_lists_and_counters/konsistente_listeneinr\303\274ckung/index.html"
@@ -0,0 +1,104 @@
+---
+title: Konsistente Listeneinrückung
+slug: Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung
+tags:
+  - Anleitung
+  - CSS
+  - Intermediate
+  - NeedsUpdate
+translation_of: Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation
+---
+
{{CSSRef}}

+
+
Eine der häufigsten Stiländerungen, die auf Listen angewendet werden, ist eine Änderung der Einrückungsweite — d. h. wie weit die Listeneinträge nach rechts verschoben sind. Dies führt oft zu Frustration, da das, was in einem Browser funktioniert, in einem anderen oft nicht denselben Effekt hat. Wenn zum Beispiel angegeben wird, dass Listen keinen linken Außenabstand haben, verschieben sie sich im Internet Explorer, bleiben jedoch hartnäckig am selben Platz in Gecko-basierten Browsern. Dieser Artikel hilft, die Probleme zu verstehen, die auftreten können, und wie man diese verhindert.

+
+
Um zu verstehen, warum dies der Fall ist, und noch wichtiger, wie das Problem generell vermieden werden kann, ist es notwendig, die Details der Listenerstellung zu untersuchen.

+
+
Eine Liste erstellen

+
+
Zunächst betrachten wir einen einzelnen Listeneintrag. Dieser Listeneintrag hat kein Aufzählungszeichen (auch bekannt als "Bullet") und ist noch nicht Teil einer Liste. Er hängt allein in der Leere, schlicht und einfach, wie in Abbildung 1 gezeigt.

+
+
Abbildung 1

+
+
Der gepunktete rote Rahmen repräsentiert die äußeren Ränder des Inhaltsbereichs des Listeneintrags. Erinnere dich, dass der Listeneintrag zu diesem Zeitpunkt weder einen Innenabstand noch Ränder besitzt. Falls wir zwei oder mehr Listeneinträge hinzufügen, erhalten wir als Ergebnis etwas wie in Abbildung 2.

+
+
Abbildung 2

+
+
Jetzt umschließen wir diese durch ein Elternelement; in diesem Fall, umschließen wir sie durch eine ungeordnete Liste (d. h. <ul>). Laut dem CSS Boxmodell müssen die Boxen von Listeneinträgen innerhalb des Inhaltsbereichs des Elternelements dargestellt werden. Da das Elternelement aktuell weder Innen- noch Außenabstände hat, erhalten wir als Ergebnis das in Abbildung 3 Gezeigte.

+
+
Abbildung 3

+
+
Hier zeigt uns der gepunktete blaue Rahmen die Ränder des Inhaltsbereichs des <ul> Elements. Da wir keinen Innenabstand für das <ul> Element haben, umschließt sein Inhalt die drei Listeneinträge passend.

+
+
Nun fügen wir Listenaufzählungszeichen hinzu. Da es sich hierbei um eine ungeordnete Liste handelt, fügen wir gewöhnliche gefüllte Kreis-"Bullets" hinzu, wie in Abbildung 4 dargestellt.

+
+
Abbildung 4

+
+
Visuell sind die Aufzählungszeichen außerhalb des Inhaltsbereichs des <ul>, jedoch spielt dies hier keine Rolle. Der Hauptpunkt ist, dass die Aufzählungszeichen außerhalb der "Hauptbox" des <li> Elements platziert sind, nicht des <ul>. Sie sind sozusagen Anhängsel der Listeneinträge, die außerhalb des Inhaltsbereichs des <li> liegen, jedoch trotzdem am <li> hängen.

+
+
Dies ist der Grund, warum in allen Browsern außer dem Internet Explorer für Windows die Aufzählungszeichen außerhalb der Rahmen eines <li> Elements liegen, vorausgesetzt, der Wert von list-style-position ist outside. Falls er zu inside geändert wird, werden die Aufzählungszeichen innerhalb des Inhalts des <li>s gezogen, obwohl sie eine Inlinebox sind, die am Anfang des <li> platziert ist.

+
+
Doppelt einrücken

+
+
Wie wird all dies nun im Dokument dargestellt? Im Moment haben wir eine Situation analog zu diesen Stilen:

+
+
ul, li {margin-left: 0; padding-left: 0;}

+
+
Falls diese Liste so wie sie ist in ein Dokument eingebunden würde, gäbe es keine sichtbare Einrückung und die Aufzählungszeichen liefen Gefahr, am linken Rand des Browserfensters herauszufallen.

+
+
Um dies zu vermeiden und eine Einrückung zu erhalten, gibt es nur drei Möglichkeiten für Browserhersteller.

+
+
    
+ 
  1. Gib jedem <li> Element einen linken Außenabstand.
    2. 
+ 
  2. Gib dem <ul> Element einen linken Außenabstand.
    3. 
+ 
  3. Gib dem <ul> Element einen linken Innenabstand.
    4. 
+

+
+
Wie sich herausstellt, hat niemand auf die erste Option zurückgegriffen. Die zweite Option wurde von Internet Explorer für Windows und Macintosh und Opera gewählt. Die dritte wird von Gecko und allen darauf basierenden Browsern verwendet.

+
+
Lass uns die beiden Herangehensweisen genauer betrachten. Im Internet Explorer und Opera werden die Listen durch das Setzen eines linken Außenabstands von 40 Pixeln für das <ul> Element gesetzt. Falls wir dem <ul> Element eine Hintergrundfarbe zuweisen und die Rahmen der Listeneinträge und <ul> unverändert lassen, erhalten wir das Ergebnis, das in Abbildung 5 gezeigt wird.

+
+
Abbildung 5

+
+
Im Gegensatz dazu setzt Gecko einen linken Innenabstand von 40 Pixeln für das <ul> Element. Werden die exakt gleichen Stile benutzt, die zur Erzeugung von Abbildung 5 verwendet wurden, erhalten wir beim Laden des Beispiels in Gecko-basierten Browsern Abbildung 6.

+
+
Abbildung 6

+
+
Wie wir sehen können, bleiben die Aufzählungszeichen an den <li> Elementen hängen, unabhängig davon, wo sie sind. Der Unterschied liegt ausschließlich in der Darstellung des <ul>. Wir können den Unterschied nur sehen, wenn wir versuchen, einen Hintergrund oder einen Rahmen für das <ul> Element zu setzen.

+
+
Konsistenz finden

+
+
Zusammenfassend kann man sagen: Falls eine konsistente Darstellung von Listen zwischen Gecko, Internet Explorer und Opera gewünscht ist, müssen beide linken Abstände des <ul> Elements gesetzt werden, Innen- und Außenabstand. Wir können <li> für diesen Zweck komplett ignorieren. Zur Erstellung der Standardanzeige in Netscape 6.x schreibt man folgendes:

+
+
ul {margin-left: 0; padding-left: 40px;}

+
+
Falls lieber das Internet Explorer/Opera Modell gewünscht ist, dann:

+
+
ul {margin-left: 40px; padding-left: 0;}

+
+
Natürlich können die eigenen bevorzugten Werte angegeben werden. Wenn gewünscht, können beide auf 1.25em gesetzt werden -- es gibt keinen Grund, bei pixelbasierter Einrückung zu bleiben. Falls Listen zurückgesetzt werden sollen, sodass sie keine Einrückung haben, müssen sowohl Innen- als auch Außenabstand auf null gesetzt werden:

+
+
ul {margin-left: 0; padding-left: 0;}

+
+
Beachte hierbei jedoch, dass dadurch die Bullets außerhalb der Liste und deren Elternelement hängen. Falls das Elternelement das body Element ist, sind die Bullets höchstwahrscheinlich außerhalb des Browserfensters, und sind daher nicht sichtbar.

+
+
Zusammenfassung

+
+
Am Ende sehen wir, dass keiner der in diesem Artikel genannten Browser Listen richtig oder falsch darstellt. Sie verwenden verschiedene Standardstile und dadurch entstehen die Probleme. Wenn sichergestellt wird, dass sowohl linker Innen- als auch Außenabstand gesetzt sind, kann wesentlich größere browserübergreifende Konsistenz bei der Einrückung von Listen erzielt werden.

+
+
Empfehlungen

+
+
    
+ 
  • Wenn die Einrückung von Listen geändert werden soll, stelle sicher, dass Innen- und Außenabstand gesetzt sind.
    • 
+

+
+

+
Originaldokumentinformation

+
+
    
+ 
  • Autor(en): Eric A. Meyer, Netscape Communications
    • 
+ 
  • Zuletzt aktualisiert: Published 30 Aug 2002
    • 
+ 
  • Copyright Information: Copyright © 2001-2003 Netscape. Alle Rechte vorbehalten.
    • 
+ 
  • Hinweis: Dieser nachgedruckte Artikel war ursprünglich Teil der DevEdge Seite.
    • 
+

+

diff --git a/files/de/web/css/css_logical_properties/index.html b/files/de/web/css/css_logical_properties/index.html
new file mode 100644
index 0000000000..108ab187ac
--- /dev/null
+++ b/files/de/web/css/css_logical_properties/index.html
@@ -0,0 +1,129 @@
+---
+title: CSS Logical Properties
+slug: Web/CSS/CSS_Logical_Properties
+tags:
+  - CSS
+  - CSS Logische Eigenschaften
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Logical_Properties
+---
+
{{CSSRef}}

+
+
CSS Logical Properties ist ein CSS Modul, das logische Eigenschaften definiert, die auf physische Eigenschaften gemappt werden, um das Layout zu kontrollieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("block-size")}}
    • 
+ 
  • {{cssxref("border-block-end")}}
    • 
+ 
  • {{cssxref("border-block-end-color")}}
    • 
+ 
  • {{cssxref("border-block-end-style")}}
    • 
+ 
  • {{cssxref("border-block-end-width")}}
    • 
+ 
  • {{cssxref("border-block-start")}}
    • 
+ 
  • {{cssxref("border-block-start-color")}}
    • 
+ 
  • {{cssxref("border-block-start-style")}}
    • 
+ 
  • {{cssxref("border-block-start-width")}}
    • 
+ 
  • {{cssxref("border-inline-end")}}
    • 
+ 
  • {{cssxref("border-inline-end-color")}}
    • 
+ 
  • {{cssxref("border-inline-end-style")}}
    • 
+ 
  • {{cssxref("border-inline-end-width")}}
    • 
+ 
  • {{cssxref("border-inline-start")}}
    • 
+ 
  • {{cssxref("border-inline-start-color")}}
    • 
+ 
  • {{cssxref("border-inline-start-style")}}
    • 
+ 
  • {{cssxref("border-inline-start-width")}}
    • 
+ 
  • {{cssxref("inline-size")}}
    • 
+ 
  • {{cssxref("margin-block-end")}}
    • 
+ 
  • {{cssxref("margin-block-start")}}
    • 
+ 
  • {{cssxref("margin-inline-end")}}
    • 
+ 
  • {{cssxref("margin-inline-start")}}
    • 
+ 
  • {{cssxref("max-block-size")}}
    • 
+ 
  • {{cssxref("max-inline-size")}}
    • 
+ 
  • {{cssxref("min-block-size")}}
    • 
+ 
  • {{cssxref("min-inline-size")}}
    • 
+ 
  • {{cssxref("offset-block-end")}}
    • 
+ 
  • {{cssxref("offset-block-start")}}
    • 
+ 
  • {{cssxref("offset-inline-end")}}
    • 
+ 
  • {{cssxref("offset-inline-start")}}
    • 
+ 
  • {{cssxref("padding-block-end")}}
    • 
+ 
  • {{cssxref("padding-block-start")}}
    • 
+ 
  • {{cssxref("padding-inline-end")}}
    • 
+ 
  • {{cssxref("padding-inline-start")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Ursprüngliche Defintion

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop("41.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoMobile("41.0")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

diff --git a/files/de/web/css/css_masken/index.html b/files/de/web/css/css_masken/index.html
new file mode 100644
index 0000000000..74001bd680
--- /dev/null
+++ b/files/de/web/css/css_masken/index.html
@@ -0,0 +1,55 @@
+---
+title: CSS Masken
+slug: Web/CSS/CSS_Masken
+tags:
+  - CSS
+  - CSS Masken
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Masking
+---
+
{{CSSRef}}

+
+
CSS Masken ist ein CSS Modul, das Mittel wie Maskierung und Clipping zum teilweisen oder kompletten Verstecken von Teilen visueller Elemente definiert.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("mask")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Masks")}}{{Spec2("CSS Masks")}} 
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.mask")}}
diff --git "a/files/de/web/css/css_namensr\303\244ume/index.html" "b/files/de/web/css/css_namensr\303\244ume/index.html"
new file mode 100644
index 0000000000..e9d0879cb2
--- /dev/null
+++ "b/files/de/web/css/css_namensr\303\244ume/index.html"
@@ -0,0 +1,51 @@
+---
+title: CSS Namensräume
+slug: Web/CSS/CSS_Namensräume
+tags:
+  - CSS
+  - CSS Namensräume
+  - Referenz
+  - Web
+  - Übersicht
+translation_of: Web/CSS/CSS_Namespaces
+---
+
{{CSSRef}}

+
+
CSS Namensräume ist ein CSS Modul, das es Authoren erlaubt, XML Namensräume in CSS anzugeben.

+
+
Referenz

+
+
@-Regeln

+
+

+
    
+ 
  • {{cssxref("@namespace")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Namespaces")}}{{Spec2("CSS3 Namespaces")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.at-rules.namespace")}}
diff --git a/files/de/web/css/css_positioning/index.html b/files/de/web/css/css_positioning/index.html
new file mode 100644
index 0000000000..0a9020dd54
--- /dev/null
+++ b/files/de/web/css/css_positioning/index.html
@@ -0,0 +1,64 @@
+---
+title: CSS Positioned Layout
+slug: Web/CSS/CSS_Positioning
+tags:
+  - CSS
+  - CSS Positioning
+  - Guide
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/CSS_Positioning
+---
+
{{CSSRef}}

+
+
CSS Positioned Layout is a module of CSS that defines how to position elements on the page.

+
+
Reference

+
+
CSS properties

+
+

+
    
+ 
  • {{cssxref("bottom")}}
    • 
+ 
  • {{cssxref("clear")}}
    • 
+ 
  • {{cssxref("float")}}
    • 
+ 
  • {{cssxref("left")}}
    • 
+ 
  • {{cssxref("position")}}
    • 
+ 
  • {{cssxref("right")}}
    • 
+ 
  • {{cssxref("top")}}
    • 
+ 
  • {{cssxref("z-index")}}
    • 
+

+

+
+
Guides

+
+

+ 
Understanding CSS z-index

+ 
Presents the notion of stacking context and explains how z-ordering works, with several examples.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Positioning') }}{{ Spec2('CSS3 Positioning') }}
{{ SpecName('CSS2.1', 'visuren.html') }}{{ Spec2('CSS2.1') }}

diff --git a/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
new file mode 100644
index 0000000000..ff78bd192a
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/adding_z-index/index.html
@@ -0,0 +1,161 @@
+---
+title: Using z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+tags:
+  - CSS
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index
+---
+
{{cssref}}

+
+
The first part of this article, Stacking without the z-index property, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a positioned element.

+
+
The z-index property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along the z-axis. If you are not familiar with the z-axis, imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers.

+
+
    
+ 
  • bottom layer (farthest from the observer)
    • 
+ 
  • ...
    • 
+ 
  • Layer -3
    • 
+ 
  • Layer -2
    • 
+ 
  • Layer -1
    • 
+ 
  • Layer 0 (default rendering layer)
    • 
+ 
  • Layer 1
    • 
+ 
  • Layer 2
    • 
+ 
  • Layer 3
    • 
+ 
  • ...
    • 
+ 
  • top layer (closest to the observer)
    • 
+

+
+

+
Notes:

+
+
    
+ 
  • When no z-index property is specified, elements are rendered on the default rendering layer 0 (zero).
    • 
+ 
  • If several elements share the same z-index value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without the z-index property apply.
    • 
+

+

+
+
In the following example, the layers' stacking order is rearranged using z-index. The z-index of element #5 has no effect since it is not a positioned element.

+
+
{{EmbedLiveSample("Source_code_for_the_example", 600, 400)}}

+
+
Beispiel

+
+
HTML

+
+
<div id="abs1">
+  <b>DIV #1</b>
+  <br />position: absolute;
+  <br />z-index: 5;
+</div>
+
+<div id="rel1">
+  <b>DIV #2</b>
+  <br />position: relative;
+  <br />z-index: 3;
+</div>
+
+<div id="rel2">
+  <b>DIV #3</b>
+  <br />position: relative;
+  <br />z-index: 2;
+</div>
+
+<div id="abs2">
+  <b>DIV #4</b>
+  <br />position: absolute;
+  <br />z-index: 1;
+</div>
+
+<div id="sta1">
+  <b>DIV #5</b>
+  <br />no positioning
+  <br />z-index: 8;
+</div>
+

+
+
CSS

+
+
div {
+  padding: 10px;
+  opacity: 0.7;
+  text-align: center;
+}
+
+b {
+  font-family: sans-serif;
+}
+
+#abs1 {
+  z-index: 5;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  left: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#rel1 {
+  z-index: 3;
+  height: 100px;
+  position: relative;
+  top: 30px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#rel2 {
+  z-index: 2;
+  height: 100px;
+  position: relative;
+  top: 15px;
+  left: 20px;
+  border: 1px dashed #696;
+  background-color: #cfc;
+  margin: 0px 50px 0px 50px;
+}
+
+#abs2 {
+  z-index: 1;
+  position: absolute;
+  width: 150px;
+  height: 350px;
+  top: 10px;
+  right: 10px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+}
+
+#sta1 {
+  z-index: 8;
+  height: 70px;
+  border: 1px dashed #996;
+  background-color: #ffc;
+  margin: 0px 50px 0px 50px;
+}
+

+
+
Siehe auch

+
+
+
+

+
Original Document Information

+
+
+

diff --git a/files/de/web/css/css_positioning/understanding_z_index/index.html b/files/de/web/css/css_positioning/understanding_z_index/index.html
new file mode 100644
index 0000000000..7f44be02c9
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/index.html
@@ -0,0 +1,51 @@
+---
+title: Understanding CSS z-index
+slug: Web/CSS/CSS_Positioning/Understanding_z_index
+tags:
+  - Advanced
+  - CSS
+  - Guide
+  - NeedsTranslation
+  - Reference
+  - TopicStub
+  - Understanding_CSS_z-index
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index
+---
+
{{cssref}}

+
+
In the most basic cases, HTML pages can be considered two-dimensional, because text, images, and other elements are arranged on the page without overlapping. In this case, there is a single rendering flow, and all elements are aware of the space taken by others. The {{cssxref("z-index")}} attribute lets you adjust the order of the layering of objects when rendering content.

+
+

+
In CSS 2.1, each box has a position in three dimensions. In addition to their horizontal and vertical positions, boxes lie along a "z-axis" and are formatted one on top of the other. Z-axis positions are particularly relevant when boxes overlap visually.

+

+
+
(from CSS 2.1 Section 9.9.1 - Layered presentation)

+
+
This means that CSS style rules allow you to position boxes on layers in addition to the normal rendering layer (layer 0). The Z position of each layer is expressed as an integer representing the stacking order for rendering. Greater numbers mean closer to the observer. Z position can be controlled with the CSS z-index property.

+
+
Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

+
+
This article will try to explain those rules, with some simplification and several examples.

+
+
    
+ 
  1. Stacking without the z-index property: The stacking rules that apply when z-index is not used.
    2. 
+ 
  2. Stacking with floated blocks: How floating elements are handled with stacking.
    3. 
+ 
  3. Using z-index: How to use z-index to change default stacking.
    4. 
+ 
  4. The stacking context: Notes on the stacking context.
    5. 
+ 
  5. Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
    6. 
+ 
  6. Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
    7. 
+ 
  7. Stacking context example 3: 3-level HTML hierarchy, z-index on the second level
    8. 
+

+
+

+
Original Document Information

+
+
+
+
Author's note: Thanks to Wladimir Palant and Rod Whiteley for the review.

+

diff --git a/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
new file mode 100644
index 0000000000..d814b294cf
--- /dev/null
+++ b/files/de/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html
@@ -0,0 +1,243 @@
+---
+title: The stacking context
+slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+tags:
+  - CSS
+  - CSS Positionierung
+  - Position
+  - Referenz
+  - z-index
+translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+---
+
{{cssref}}

+
+
Der Stapelungszusammenhang ist eine dreidimensionale Konzeptualisierung von HTML-Elementen entlang einer imaginären z-Achse relativ zum Benutzer, von dem angenommen wird, dass er dem Ansichtsfenster oder der Webseite zugewandt ist. HTML-Elemente füllen diesen Raum in Prioritätsreihenfolge auf der Grundlage von Elementattributen aus.

+
+
Der Stapelungszusammenhang

+
+
Im vorherigen Teil dieses Artikels, die Verwendung von z-index, wird die Darstellungsreihenfolge bestimmter Elemente durch ihren z-index Wert beeinflusst. Dies ist darauf zurückzuführen, dass diese Elemente spezielle Eigenschaften haben, die dazu führen, dass sie einen Stapelungszusammenhang bilden.

+
+
Ein Stapelungszusammenhang wird an beliebiger Stelle im Dokument durch ein beliebiges Element in den folgenden Szenarien gebildet:

+
+
    
+ 
  • Root Element des Dokumentes (<html>).
    • 
+ 
  • Ein Element mit einem {{cssxref("position")}} Wert absolute oder relative und einem {{cssxref("z-index")}} Wert anders als auto.
    • 
+ 
  • Ein Element mit einem {{cssxref("position")}} Wert fixed oder sticky (sticky für alle mobilen Browser, aber nicht für ältere Desktops).
    • 
+ 
  • Ein Element das als Kind eines Flex-Container ({{cssxref("flexbox")}}), mit einem {{cssxref("z-index")}} Wert anders als auto.
    • 
+ 
  • Ein Element das als Kind eines Grid-Container ({{cssxref("grid")}}), mit einem {{cssxref("z-index")}} Wert anders als auto.
    • 
+ 
  • Ein Element mit einem {{cssxref("opacity")}} Wert unter 1 (siehe auch die Spezifikation für opacity).
    • 
+ 
  • Ein Element mit einem {{cssxref("mix-blend-mode")}} Wert anders als normal.
    • 
+ 
  • Element with any of the following properties with Wert anders als none:
+  
      
+   
    • {{cssxref("transform")}}
      • 
+   
    • {{cssxref("filter")}}
      • 
+   
    • {{cssxref("perspective")}}
      • 
+   
    • {{cssxref("clip-path")}}
      • 
+   
    • {{cssxref("mask")}} / {{cssxref("mask-image")}} / {{cssxref("mask-border")}}
      • 
+  
    
+ 
    • 
+ 
  • Ein Element mit einem {{cssxref("isolation")}} Wert isolate.
    • 
+ 
  • Ein Element mit einem {{cssxref("-webkit-overflow-scrolling")}} Wert touch.
    • 
+ 
  • Ein Element mit einem {{cssxref("will-change")}} Wert, der irgendeine Eigenschaft angibt, die einen Stapelkontext auf einem nicht initialen Wert erzeugen würde (siehe auch this post).
    • 
+ 
  • Ein Element mit einem {{cssxref("contain")}} Wert layout oder paint oder einen zusammengesetzten Wert, der einen von beiden enthält (d.h. contain: strict, contain: content).
    • 
+

+
+
Innerhalb eines Stapelungszusammenhang werden die untergeordneten Elemente nach den gleichen Regeln gestapelt, die zuvor erläutert wurden. Wichtig ist, dass die z-index Werte der untergeordneten Stapelungszusammenhänge nur in diesem übergeordneten Kontext eine Bedeutung haben. Stapelungszusammenhänge werden im übergeordneten Stapelungszusammenhang atomar als eine einzige Einheit behandelt.

+
+
Zusammengefasst:

+
+
    
+ 
  • Stapelungszusammenhänge können in anderen Stapelungszusammenhängen enthalten sein und zusammen eine Hierarchie von Stapelungszusammenhängen bilden.
    • 
+ 
  • Jeder Stapelungszusammenhang ist völlig unabhängig von seinen Geschwistern: Bei der Verarbeitung des Stapels werden nur nachkommende Elemente berücksichtigt.
    • 
+ 
  • Jeder Stapelungszusammenhang ist in sich geschlossen: Nachdem der Inhalt des Elements gestapelt wurde, wird das gesamte Element in der Stapelreihenfolge des übergeordneten Stapelungszusammenhanges betrachtet.
    • 
+

+
+
Hinweis: Die Hierarchie der Stapelungszusammenhänge ist eine Teilmenge der Hierarchie der HTML-Elemente, da nur bestimmte Elemente Stapelungszusammenhänge erzeugen. Man kann sagen, dass Elemente, die keinen eigenen Stapelungszusammenhang bilden, vom übergeordneten Stapelungszusammenhang assimiliert werden.

+
+
Das Beispiel

+
+
Example of stacking rules modified using z-index

+
+
In diesem Beispiel erzeugt jedes positionierte Element aufgrund seiner Positionierung und seiner z-index -Werte einen eigenen Stapelungszusammenhang. Die Hierarchie der Stapelungszusammenhang ist wie folgt organisiert:

+
+
    
+ 
  • Root
+  
      
+   
    • DIV #1
      • 
+   
    • DIV #2
      • 
+   
    • DIV #3
+    
        
+     
      • DIV #4
        • 
+     
      • DIV #5
        • 
+     
      • DIV #6
        • 
+    
      
+   
      • 
+  
    
+ 
    • 
+

+
+
Es ist wichtig zu beachten, dass DIV #4, DIV #5 und DIV #6 Kinder von DIV #3 sind, so dass das Stapeln dieser Elemente innerhalb von DIV #3 vollständig aufgelöst wird. Sobald das Stapeln und Rendern innerhalb von DIV #3 abgeschlossen ist, wird das gesamte DIV #3-Element für das Stapeln im Wurzelelement in Bezug auf das DIV seines Geschwisters übergeben.

+
+

+
Notes:

+
+
    
+ 
  • DIV #4 wird unter DIV #1 gerendert, weil der z-Index (5) von DIV #1 innerhalb des Stapelungszusammenhanges des Wurzelelementes gültig ist, während der z-Index (6) von DIV #4 innerhalb des Stapelungszusammenhanges von DIV #3 gültig ist. DIV #4 ist also unter DIV #1, weil DIV #4 zu DIV #3 gehört, das einen niedrigeren z-Indexwert hat.
    • 
+ 
  • Aus dem gleichen Grund wird DIV #2 (z-Index 2) unter DIV#5 (z-Index 1) gerendert, weil DIV #5 zu DIV #3 gehört, das einen höheren z-Index-Wert hat.
    • 
+ 
  • Der z-Index von DIV #3 ist 4, aber dieser Wert ist unabhängig vom z-Index von DIV #4, DIV #5 und DIV #6, da er zu einem anderen Stapelungszusammenhang gehört.
    • 
+ 
  • 
+  
    Eine einfache Möglichkeit, die Rendering-Reihenfolge von gestapelten Elementen entlang der Z-Achse herauszufinden, besteht darin, sie sich als eine Art "Versionsnummer" vorzustellen, wobei untergeordnete Elemente Minor-Versionsnummern unter den Major-Versionsnummern ihrer übergeordneten Elemente sind. Auf diese Weise können wir leicht erkennen, wie ein Element mit einem z-Index von 1 (DIV #5) über einem Element mit einem z-Index von 2 (DIV #2) gestapelt wird, und wie ein Element mit einem z-Index von 6 (DIV #4) unter einem Element mit einem z-Index von 5 (DIV #1) gestapelt wird. In unserem Beispiel (sortiert nach der endgültigen Rendering-Reihenfolge):
    
+
+  
      
+   
    • Root
+    
        
+     
      • DIV #2 - z-index is 2
        • 
+     
      • DIV #3 - z-index is 4
+      
          
+       
        • DIV #5 - z-index ist 1, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,1 ergibt
          • 
+       
        • DIV #6 - z-index ist 3, gestapelt unter einem Element mit einem z-Index von 4, was eine Rendering-Reihenfolge von 4,3 ergibt
          • 
+       
        • DIV #4 - z-index ist 6, gestapelt unter einem Element mit einem z-Index von 4, was zu einer Rendering-Reihenfolge von 4,6 führt
          • 
+      
        
+     
        • 
+     
      • DIV #1 - z-index is 5
        • 
+    
      
+   
      • 
+  
    
+ 
    • 
+

+

+
+
Beispiel

+
+
HTML

+
+
<div id="div1">
+  <h1>Division Element #1</h1>
+  <code>position: relative;<br/>
+  z-index: 5;</code>
+</div>
+
+<div id="div2">
+  <h1>Division Element #2</h1>
+  <code>position: relative;<br/>
+  z-index: 2;</code>
+</div>
+
+<div id="div3">
+  <div id="div4">
+    <h1>Division Element #4</h1>
+    <code>position: relative;<br/>
+    z-index: 6;</code>
+  </div>
+
+  <h1>Division Element #3</h1>
+  <code>position: absolute;<br/>
+  z-index: 4;</code>
+
+  <div id="div5">
+    <h1>Division Element #5</h1>
+    <code>position: relative;<br/>
+    z-index: 1;</code>
+  </div>
+
+  <div id="div6">
+    <h1>Division Element #6</h1>
+    <code>position: absolute;<br/>
+    z-index: 3;</code>
+  </div>
+</div>
+

+
+
CSS

+
+
* {
+  margin: 0;
+}
+html {
+  padding: 20px;
+  font: 12px/20px Arial, sans-serif;
+}
+div {
+  opacity: 0.7;
+  position: relative;
+}
+h1 {
+  font: inherit;
+  font-weight: bold;
+}
+#div1,
+#div2 {
+  border: 1px dashed #696;
+  padding: 10px;
+  background-color: #cfc;
+}
+#div1 {
+  z-index: 5;
+  margin-bottom: 190px;
+}
+#div2 {
+  z-index: 2;
+}
+#div3 {
+  z-index: 4;
+  opacity: 1;
+  position: absolute;
+  top: 40px;
+  left: 180px;
+  width: 330px;
+  border: 1px dashed #900;
+  background-color: #fdd;
+  padding: 40px 20px 20px;
+}
+#div4,
+#div5 {
+  border: 1px dashed #996;
+  background-color: #ffc;
+}
+#div4 {
+  z-index: 6;
+  margin-bottom: 15px;
+  padding: 25px 10px 5px;
+}
+#div5 {
+  z-index: 1;
+  margin-top: 15px;
+  padding: 5px 10px;
+}
+#div6 {
+  z-index: 3;
+  position: absolute;
+  top: 20px;
+  left: 180px;
+  width: 150px;
+  height: 125px;
+  border: 1px dashed #009;
+  padding-top: 125px;
+  background-color: #ddf;
+  text-align: center;
+}

+
+
Ergebnis

+
+
{{ EmbedLiveSample('Example', '100%', '396') }}

+
+
Siehe auch

+
+
+
+

+
Original Document Information

+
+
+

diff --git a/files/de/web/css/css_referenz/index.html b/files/de/web/css/css_referenz/index.html
new file mode 100644
index 0000000000..89a0c83e25
--- /dev/null
+++ b/files/de/web/css/css_referenz/index.html
@@ -0,0 +1,211 @@
+---
+title: CSS Referenz
+slug: Web/CSS/CSS_Referenz
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/Reference
+---
+
{{CSSRef}}

+
+
Verwende diese CSS-Referenz für einen alphabetischen Index aller Standard-CSS-Eigenschaften, Pseudoklassen, Pseudoelemente, Datentypen und @-Regeln. Du kannst eine Liste aller Selektoren und eine Liste aller Konzepte ansehen. Dies beinhaltet auch eine kurze Referenz zu DOM-CSS / CSSOM.

+
+
Grundlegende Syntax von Regeln

+
+
Syntax von Stilregeln

+
+
selektorliste {
+  eigenschaft: wert;
+  [weitere eigenschaft:wert; Paare]
+}
+
+... wobei selektorliste: selektor[:pseudo-klasse] [::pseudo-element] [, weitere selektorlisten]
+
+Siehe Listen aller Selektoren, Pseudo-Klassen und Pseudo-Elemente weiter unten.
+

+
+
Beispiele für Stilregeln

+
+

+strong {
+  color: red;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+

+
+
Für eine Einführung in die Syntax von CSS-Selektoren auf Anfängerstufe, siehe diese Anleitung. Beachte, dass jeder CSS-Syntax-Fehler in einer Regeldefinition die gesamte Regel ungültig macht. Ungültige Regeln werden vom Browser ignoriert. Beachte dass CSS-Regeldefinitionen vollständig (ASCII) text-basiert sind, wohingegegen DOM-CSS / CSSOM (das Regel-Verwaltungssystem) objekt-basiert ist.

+
+
Syntax von @-Regeln

+
+
Da die Struktur von @-Regeln stark variiert, schaue bitte bei @-Regel nach, um die Syntax der gewünschten Regel herauszufinden.

+
+
Index

+
+

+
Hinweis: Die Bezeichnungen der Eigenschaften enthalten nicht die JavaScript-Namen, wenn sie sich von den CSS-Standardbezeichnern unterscheiden.

+

+
+
{{CSS_Ref}}

+
+
Selektoren

+
+
Einfache Selektoren

+
+
+
+
Kombinatoren

+
+
+
+
Pseudoklassen

+
+

+
    
+ 
  • {{ Cssxref(":active") }}
    • 
+ 
  • {{cssxref(':any')}}
    • 
+ 
  • {{cssxref(':any-link')}}
    • 
+ 
  • {{ Cssxref(":checked") }}
    • 
+ 
  • {{ Cssxref(":default") }}
    • 
+ 
  • {{ Cssxref(":defined") }}
    • 
+ 
  • {{ Cssxref(":dir", ":dir()")}}
    • 
+ 
  • {{ Cssxref(":disabled") }}
    • 
+ 
  • {{ Cssxref(":empty") }}
    • 
+ 
  • {{ Cssxref(":enabled") }}
    • 
+ 
  • {{ Cssxref(":first") }}
    • 
+ 
  • {{ Cssxref(":first-child") }}
    • 
+ 
  • {{ Cssxref(":first-of-type") }}
    • 
+ 
  • {{ Cssxref(":fullscreen") }}
    • 
+ 
  • {{ Cssxref(":focus") }}
    • 
+ 
  • {{ Cssxref(":focus-visible") }}
    • 
+ 
  • {{ Cssxref(":host") }}
    • 
+ 
  • {{ Cssxref(":host()") }}
    • 
+ 
  • {{ Cssxref(":host-context()") }}
    • 
+ 
  • {{ Cssxref(":hover") }}
    • 
+ 
  • {{ Cssxref(":indeterminate") }}
    • 
+ 
  • {{ Cssxref(":in-range") }}
    • 
+ 
  • {{ Cssxref(":invalid") }}
    • 
+ 
  • {{ Cssxref(":lang", ":lang()") }}
    • 
+ 
  • {{ Cssxref(":last-child") }}
    • 
+ 
  • {{ Cssxref(":last-of-type") }}
    • 
+ 
  • {{ Cssxref(":left") }}
    • 
+ 
  • {{ Cssxref(":link") }}
    • 
+ 
  • {{ Cssxref(":not", ":not()") }}
    • 
+ 
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • 
+ 
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • 
+ 
  • {{ Cssxref(":only-child") }}
    • 
+ 
  • {{ Cssxref(":only-of-type") }}
    • 
+ 
  • {{ Cssxref(":optional") }}
    • 
+ 
  • {{ Cssxref(":out-of-range") }}
    • 
+ 
  • {{ Cssxref(":read-only") }}
    • 
+ 
  • {{ Cssxref(":read-write") }}
    • 
+ 
  • {{ Cssxref(":required") }}
    • 
+ 
  • {{ Cssxref(":right") }}
    • 
+ 
  • {{ Cssxref(":root") }}
    • 
+ 
  • {{ Cssxref(":scope") }}
    • 
+ 
  • {{ Cssxref(":target") }}
    • 
+ 
  • {{ Cssxref(":valid") }}
    • 
+ 
  • {{ Cssxref(":visited") }}
    • 
+

+

+
+
Pseudoelemente

+
+

+
    
+ 
  • {{ Cssxref("::after") }}
    • 
+ 
  • {{ Cssxref("::backdrop") }}
    • 
+ 
  • {{ Cssxref("::before") }}
    • 
+ 
  • {{ Cssxref("::cue") }}
    • 
+ 
  • {{ Cssxref("::first-letter") }}
    • 
+ 
  • {{ Cssxref("::first-line") }}
    • 
+ 
  • {{ Cssxref("::grammar-error") }} {{experimental_inline}}
    • 
+ 
  • {{ Cssxref("::marker") }} {{experimental_inline}}
    • 
+ 
  • {{ Cssxref("::placeholder") }} {{experimental_inline}}
    • 
+ 
  • {{ Cssxref("::selection") }}
    • 
+ 
  • {{ Cssxref("::spelling-error") }} {{experimental_inline}}
    • 
+

+

+
+

+
Siehe auch: Eine vollständige Liste der Selektoren in der Selectors Level 3 Spezifikation.

+

+
+
Konzepte

+
+
Syntax & Semantik

+
+
+
+
Werte

+
+
+
+
Layout

+
+
+
+
DOM-CSS / CSSOM

+
+
Wichtigste Objekttypen

+
+
+
+
Wichtige Methoden

+
+
    
+ 
  • {{domxref("CSSStyleSheet.insertRule")}}
    • 
+ 
  • {{domxref("CSSStyleSheet.deleteRule")}}
    • 
+

diff --git a/files/de/web/css/css_ruby/index.html b/files/de/web/css/css_ruby/index.html
new file mode 100644
index 0000000000..f2aaf73a9f
--- /dev/null
+++ b/files/de/web/css/css_ruby/index.html
@@ -0,0 +1,97 @@
+---
+title: CSS Ruby
+slug: Web/CSS/CSS_Ruby
+tags:
+  - CSS
+  - CSS Ruby
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Ruby
+---
+
{{CSSRef}}

+
+
CSS Ruby ist ein CSS Modul, das das Darstellungsmodell und die Formatierungssteuerung zur Anzeige von Ruby Anmerkungen bietet, eine Form von zwischenzeiligen Anmerkungen, kurze Texte entlang des Basistexts.

+
+
Referenz

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("ruby-align")}}
    • 
+ 
  • {{cssxref("ruby-position")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Ruby')}}{{Spec2('CSS3 Ruby')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoDesktop(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatGeckoMobile(38)}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

diff --git a/files/de/web/css/css_selectors/index.html b/files/de/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..1b0966e479
--- /dev/null
+++ b/files/de/web/css/css_selectors/index.html
@@ -0,0 +1,153 @@
+---
+title: CSS Selectors
+slug: Web/CSS/CSS_Selectors
+tags:
+  - CSS
+  - CSS Selektoren
+  - Referenz
+  - Selectors
+  - Selektoren
+  - Übersicht
+translation_of: Web/CSS/CSS_Selectors
+---
+
{{CSSRef}}

+
+
Selektoren definieren, auf welche Elemente eine Reihe von CSS Regeln angewendet wird.

+
+
Grundlegende Selektoren

+
+

+ 
Typselektoren

+ 
Dieser grundlegende Selektor wählt alle Elemente aus, die den angegebenen Namen matchen.

+ Syntax: eltname

+ Beispiel: input matcht jedes {{HTMLElement('input')}} Element.

+ 
Klassenselektoren

+ 
Dieser grundlegende Selektor wählt Elemente anhand ihres class Attributs aus.

+ Syntax: .classname

+ Beispiel: .index matcht jedes Element, das die Klasse index besitzt (wahrscheinlich definiert durch ein class="index" Attribut oder ähnliches).

+ 
ID-Selektoren

+ 
Dieser grundlegende Selektor wählt Knoten anhand des Wertes ihres id Attributs aus. Es sollte nur ein Element mit der angegebenen ID in einem Dokument geben.

+ Syntax: #idname

+ Beispiel: #toc matcht das Element, das die ID toc hat (wahrscheinlich definiert durch ein id="toc" Attribut oder ähnliches).

+ 
Universalselektoren

+ 
Dieser grundlegende Selektor wählt alle Knoten aus. Er existiert auch in einer Ein-Namensraum- und einer Alle-Namensräume-Variante.

+ Syntax: * ns|* *|*

+ Beispiel: * matcht alle Elemente des Dokuments.

+ 
Attributselektoren

+ 
Dieser grundlegende Selektor wählt Knoten anhand des Wertes eines ihrer Attribute aus.

+ Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]

+ Beispiel: [autoplay] matcht alle Elemente, deren autoplay Attribut (auf einen beliebigen Wert) gesetzt ist.

+

+
+
Kombinatoren

+
+

+ 
Angrenzende Geschwisterselektoren

+ 
Der '+'-Kombinator wählt Knoten aus, die direkt dem davor angegebenen Element folgen.

+ Syntax: A + B

+ Beispiel: h2 + p matcht jedes {{HTMLElement('p')}}, das direkt einem {{HTMLElement('h2')}} folgt.

+ 
Allgemeine Geschwisterselektoren

+ 
Der '~'-Kombinator wählt Knoten aus, die dem davor angegeben Element (nicht zwingend direkt) folgen, falls sie sich dasselbe Elternelement teilen.

+ Syntax: A ~ B

+ Beispiel: p ~ span matcht alle {{HTMLElement('span')}} Elemente, die einem {{HTMLElement('p')}} Element innerhalb desselben Elements folgen.

+ 
Kindselektoren

+ 
Der '>'-Kombinator wählt Knoten aus, die direkte Kinder des davor angegebenen Elements sind.

+ Syntax: A > B

+ Beispiel: ul > li matcht alle {{HTMLElement('li')}} Elemente, die innerhalb eines {{HTMLElement('ul')}} Element sind.

+ 
Nachfahrenselektoren

+ 
Der ' '-Kombinator wählt Knoten aus, die (nicht zwangsweise direkte) Kinder des davor angegebenen Elements sind.

+ Syntax: A B

+ Beispiel: div span matcht jedes {{HTMLElement('span')}} Element, das innerhalb eines {{HTMLElement('div')}} Elements ist.

+

+
+
Pseudoelemente

+
+
Pseudoelemente sind Abstraktionen des Baums, die Elemente außerhalb von dem, was HTML macht, repräsentieren. Zum Beispiel hat HTML kein Element, das den ersten Buchstaben oder die erste Zeile eines Absatzes beschreibt, oder die Markierung in einer Liste. Pseudoelemente repräsentieren diese Elemente und erlauben es, ihnen CSS Regeln zuzuweisen: dadurch können diese Elemente unabhängig gestylt werden.

+
+
Pseudoklassen

+
+
Pseudoklassen erlauben es, Elemente anhand von Informationen auszuwählen, die nicht im Dokumentbaum hinterlegt sind, wie ein Status, oder die schwer zu extrahieren sind. Z. B. ob ein Link zuvor bereits besucht wurde oder nicht.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1{{CompatGeckoDesktop("1")}}3.03.51.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.5{{CompatGeckoMobile("1.9.2")}}{{CompatUnknown}}{{CompatUnknown}}3.2

+

diff --git a/files/de/web/css/css_shapes/index.html b/files/de/web/css/css_shapes/index.html
new file mode 100644
index 0000000000..fce870138d
--- /dev/null
+++ b/files/de/web/css/css_shapes/index.html
@@ -0,0 +1,98 @@
+---
+title: CSS Shapes
+slug: Web/CSS/CSS_Shapes
+tags:
+  - CSS
+  - CSS Formen
+  - CSS Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Shapes
+---
+
{{CSSRef}}

+
+
CSS Shapes ist ein CSS Modul, das geometrische Formen definiert, die in CSS Werten verwendet werden können.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("shape-outside")}}
    • 
+ 
  • {{cssxref("shape-margin")}}
    • 
+ 
  • {{cssxref("shape-image-threshold")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Shapes")}}{{Spec2("CSS Shapes")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung37{{CompatNo}}{{CompatNo}}248.0 {{property_prefix("-webkit")}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}8.0 {{property_prefix("-webkit")}}

+

diff --git a/files/de/web/css/css_table/index.html b/files/de/web/css/css_table/index.html
new file mode 100644
index 0000000000..8447a21246
--- /dev/null
+++ b/files/de/web/css/css_table/index.html
@@ -0,0 +1,101 @@
+---
+title: CSS Table
+slug: Web/CSS/CSS_Table
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Table
+  - Übersicht
+translation_of: Web/CSS/CSS_Table
+---
+
{{CSSRef}}

+
+
CSS Table ist ein CSS Modul, das definiert, wie Tabellendaten dargestellt werden.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("border-collapse")}}
    • 
+ 
  • {{cssxref("border-spacing")}}
    • 
+ 
  • {{cssxref("caption-side")}}
    • 
+ 
  • {{cssxref("empty-cells")}}
    • 
+ 
  • {{cssxref("table-layout")}}
    • 
+ 
  • {{cssxref("vertical-align")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS2.1", "tables.html")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop("1")}}4.04.01.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile("1")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git a/files/de/web/css/css_text/index.html b/files/de/web/css/css_text/index.html
new file mode 100644
index 0000000000..cb9b073d14
--- /dev/null
+++ b/files/de/web/css/css_text/index.html
@@ -0,0 +1,123 @@
+---
+title: CSS Text
+slug: Web/CSS/CSS_Text
+tags:
+  - CSS
+  - CSS Text
+  - Übersicht
+translation_of: Web/CSS/CSS_Text
+---
+
{{CSSRef}}

+
+
CSS Text ist ein CSS Modul, das definiert, wie Textmanipulationen durchgeführt werden, wie Zeilenumbrüche, Blocksatz und Ausrichtung, Leerraumverhalten und Texttransformationen.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("hyphens")}}
    • 
+ 
  • {{cssxref("letter-spacing")}}
    • 
+ 
  • {{cssxref("line-break")}}
    • 
+ 
  • {{cssxref("overflow-wrap")}}
    • 
+ 
  • {{cssxref("tab-size")}}
    • 
+ 
  • {{cssxref("text-align")}}
    • 
+ 
  • {{cssxref("text-align-last")}}
    • 
+ 
  • {{cssxref("text-indent")}}
    • 
+ 
  • {{cssxref("text-size-adjust")}}
    • 
+ 
  • {{cssxref("text-transform")}}
    • 
+ 
  • {{cssxref("white-space")}}
    • 
+ 
  • {{cssxref("word-break")}}
    • 
+ 
  • {{cssxref("word-spacing")}}
    • 
+ 
  • {{cssxref("word-wrap")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS Logical Properties')}}{{Spec2('CSS Logical Properties')}}Updates some properties to be independent of the directionality of the text.
{{SpecName('CSS3 Text')}}{{Spec2('CSS3 Text')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)

+

diff --git a/files/de/web/css/css_textdekoration/index.html b/files/de/web/css/css_textdekoration/index.html
new file mode 100644
index 0000000000..389d7f6a5e
--- /dev/null
+++ b/files/de/web/css/css_textdekoration/index.html
@@ -0,0 +1,65 @@
+---
+title: CSS Textdekoration
+slug: Web/CSS/CSS_Textdekoration
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Textdekoration
+  - Übersicht
+translation_of: Web/CSS/CSS_Text_Decoration
+---
+
{{CSSRef}}

+
+
CSS Text Decoration ist ein CSS Modul, das Features in Bezug auf Textdekoration definiert, wie zum Beispiel Unterstreichungen, Textschatten und Betonungsmarker.

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("letter-spacing")}}
    • 
+ 
  • {{cssxref("text-align")}}
    • 
+ 
  • {{cssxref("text-decoration")}}
    • 
+ 
  • {{cssxref("text-decoration-color")}}
    • 
+ 
  • {{cssxref("text-decoration-line")}}
    • 
+ 
  • {{cssxref("text-decoration-style")}}
    • 
+ 
  • {{cssxref("text-indent")}}
    • 
+ 
  • {{cssxref("text-rendering")}}
    • 
+ 
  • {{cssxref("text-shadow")}}
    • 
+ 
  • {{cssxref("text-transform")}}
    • 
+ 
  • {{cssxref("white-space")}}
    • 
+ 
  • {{cssxref("word-spacing")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text Decoration')}}{{Spec2('CSS3 Text Decoration')}}
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}}
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

diff --git a/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
new file mode 100644
index 0000000000..83a9ada0d2
--- /dev/null
+++ b/files/de/web/css/css_transforms/css_transformationen_verwenden/index.html
@@ -0,0 +1,248 @@
+---
+title: CSS Transformationen verwenden
+slug: Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden
+tags:
+  - CSS
+  - CSS Transformationen
+  - CSS3
+  - Fortgeschritten
+  - Guide
+translation_of: Web/CSS/CSS_Transforms/Using_CSS_transforms
+---
+
{{CSSRef}}

+
+
Durch Modifizierung des Koordinatenraums ändern CSS Transformationen den Umriss und die Position des betreffenden Inhalts ohne den normalen Dokumentfluss zu unterbrechen. Diese Anleitung bietet eine Einführung in die Verwendung von Transformationen.

+
+
CSS Transformationen sind als eine Reihe von CSS Eigenschaften implementiert, die es erlauben, affine lineare Transformationen auf HTML Elemente anzuwenden. Diese Transformationen beinhalten Drehung, Verzerrung, Skalierung und Verschiebung sowohl im ebenen als auch im 3D Raum.

+
+
CSS Transformationseigenschaften

+
+
Zwei Haupteigenschaften werden dazu verwendet, CSS Transformationen zu definieren: {{cssxref("transform")}} und {{cssxref("transform-origin")}}.

+
+

+ 
{{cssxref("transform-origin")}}

+ 
Bestimmt die Position des Ursprungs. Standardmäßig ist dieser in der Mitte des Elements und kann verschoben werden. Er wird von mehreren Transformationen verwendet wie Drehung, Skalierung oder Verzerrung, die einen bestimmten Punkt als Parameter benötigen.

+ 
{{cssxref("transform")}}

+ 
Bestimmt die Transformationen, die auf das Element angewendet werden. Sie ist eine leerzeichenseparierte Liste von Transformationen, welche eine nach der anderen angewendet werden, wie durch die Zusammensetzungsoperation verlangt.

+

+
+
Beispiele

+
+
Drehung

+
+
Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, die um 90 Grad um die linke untere Ecke gedreht wurde.

+
+
Livebeispiel ansehen Screenshot des Beispiels ansehen

+
+
<div style="transform: rotate(90deg); transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="500" height="600"></iframe>
+</div>
+

+
+
Verzerrung und Verschiebung

+
+
Dieses Beispiel erstellt einen iframe, der Googles Homepage beinhaltet, verzerrt um 10 Grad und verschoben um 150 Pixel auf der x-Achse.

+
+
Livebeispiel ansehen  Screenshot des Beispiels ansehen

+
+
<div style="transform: skewx(10deg) translatex(150px);
+            transform-origin: bottom left;">
+  <iframe src="http://www.google.com/" width="600" height="500"></iframe>
+</div>
+

+
+
3D-spezifische CSS Eigenschaften

+
+
Die Anwendung von CSS Transformationen im dreidimensionalen Raum ist ein wenig komplexer. Zunächst muss der 3D Raum konfiguriert werden, indem ihm eine Perspektive gegeben wird. Anschließend muss konfiguriert werden, wie die 2D Elemente sich in diesem Raum verhalten.

+
+
Eine Perspektive einrichten

+
+
Das erste Element ist das Setzen der Perspektive. Die Perspektive ist, was den dreidimensionalen Eindruck vermittelt. Je weiter weg Elemente vom Betrachter sind, desto kleiner sind sie.

+
+
Wie schnell sie kleiner werden, wird durch die {{cssxref("perspective")}} Eigenschaft bestimmt. Je kleiner deren Wert ist, desto tiefer ist die Perspektive.

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+ 
+
perspective:0;perspective:250px;

+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+ 
+
perspective:300px;perspective:350px;

+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   

+
+
Das zweite Element ist die Konfiguration der Position des Betrachters mittels der {{cssxref("perspective-origin")}} Eigenschaft. Standardmäßig ist die Perspektive auf den Betrachter zentriert, was nicht immer passend ist.

+
+

+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
perspective-origin:150px 150px;perspective-origin:50% 50%;perspective-origin:-50px -50px;

+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   		
+    

+    

+    
   

+
+    
1

+
+    
2

+
+    
3

+
+    
4

+
+    
5

+
+    
6

+    

+    

+   

+

+
+
Sobald dies getan ist, kann mit der Arbeit am Element im dreidimensionalen Raum begonnen werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/css_transforms/index.html b/files/de/web/css/css_transforms/index.html
new file mode 100644
index 0000000000..142b07aed1
--- /dev/null
+++ b/files/de/web/css/css_transforms/index.html
@@ -0,0 +1,152 @@
+---
+title: CSS Transforms
+slug: Web/CSS/CSS_Transforms
+tags:
+  - CSS
+  - CSS Reference
+  - Experimental
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Transforms
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space.

+
+
Reference

+
+
CSS Properties

+
+

+
    
+ 
  • {{cssxref("backface-visibility")}}
    • 
+ 
  • {{cssxref("perspective")}}
    • 
+ 
  • {{cssxref("perspective-origin")}}
    • 
+ 
  • {{cssxref("transform")}}
    • 
+ 
  • {{cssxref("transform-box")}}
    • 
+ 
  • {{cssxref("transform-origin")}}
    • 
+ 
  • {{cssxref("transform-style")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using CSS transforms

+ 
Step-by-step tutorial about how to transform elements styled with CSS.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Transforms') }}{{ Spec2('CSS3 Transforms') }}Initial definition.

+
+
Browser compatibility

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support
+    
{{CompatVersionUnknown}} {{property_prefix("-webkit")}}

+     36

+   		{{CompatGeckoDesktop("1.9.1")}}{{property_prefix("-moz")}}[1]

+    {{CompatGeckoDesktop("16.0")}}[2]		9.0{{property_prefix("-ms")}}[3]

+    10.0		10.5{{property_prefix("-o")}}

+    12.10

+    15.0{{property_prefix("-webkit")}}

+    23		3.1{{property_prefix("-webkit")}}
3D Support12.0{{property_prefix("-webkit")}}

+    36		10.0{{property_prefix("-moz")}}

+    {{CompatGeckoDesktop("16.0")}}		10.015.0{{property_prefix("-webkit")}}

+    23		4.0{{property_prefix("-webkit")}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatAndroid(2.1)}}{{property_prefix("-webkit")}}[4]{{CompatVersionUnknown}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+    11.0{{property_prefix("-webkit")}}[5]		11.5{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
3D Support{{CompatAndroid(3.0)}}{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{ property_prefix("-webkit")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}22{{property_prefix("-webkit")}}3.2 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}

+

+
+
[1] Gecko 14.0 removed the experimental support for skew(), but it was reintroduced in Gecko 15.0 for compatibility reasons. As it is non-standard and will likely be removed in the future, do not use it.

+
+
[2] Before Firefox 16, the translation values of matrix() and matrix3d() could be {{cssxref("<length>")}}, in addition to the standard {{cssxref("<number>")}}.

+
+
[3] Internet Explorer 5.5 or later supports a proprietary Matrix Filter which can be used to achieve a similar effect.

+
+
Internet Explorer 9.0 or earlier has no support for 3D transforms, mixing 3D and 2D transform functions. such as -ms-transform:rotate(10deg) translateZ(0); will prevent the entire property from being applied.

+
+
[4] Android 2.3 has a bug where input forms will "jump" when typing, if any container element has a -webkit-transform.

+
+
[5] Internet Explorer 11.0 supports the {{property_prefix("-webkit")}} prefixed variant as an alias for the default one.

+
+
 

diff --git a/files/de/web/css/css_transitions/index.html b/files/de/web/css/css_transitions/index.html
new file mode 100644
index 0000000000..b9bc67d16f
--- /dev/null
+++ b/files/de/web/css/css_transitions/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS Übergänge
+slug: Web/CSS/CSS_Transitions
+tags:
+  - CSS
+  - CSS Übergänge
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Transitions
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSS Transitions ist ein CSS Modul, das definiert, wie weiche Übergänge zwischen Werten von CSS Eigenschaften erstellt werden. Es erlaubt es nicht nur, diese zu erstellen, sondern definiert auch deren Entwicklung unter Verwendung von Timingfunktionen.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("transition")}}
    • 
+ 
  • {{cssxref("transition-delay")}}
    • 
+ 
  • {{cssxref("transition-duration")}}
    • 
+ 
  • {{cssxref("transition-property")}}
    • 
+ 
  • {{cssxref("transition-timing-function")}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
CSS Übergänge verwenden

+ 
Schritt-für-Schritt-Tutorial darüber, wie weiche Übergänge mithilfe von CSS erstellt werden. Dieser Artikel beschreibt jede relevante CSS Eigenschaft und erklärt, wie diese interagieren.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions')}}{{Spec2('CSS3 Transitions')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung1.0 {{property_prefix("-webkit")}}

+    26.0		{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}

+    {{CompatGeckoDesktop("16.0")}}		10.011.6 {{property_prefix("-o")}}

+    12.10 #		3.0 {{property_prefix("-webkit")}}

+    6.1

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung2.1 {{property_prefix("-webkit")}}{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}

+    {{CompatGeckoMobile("16.0")}}		{{CompatUnknown}}10.0 {{property_prefix("-o")}}

+    12.10 #		3.2 {{property_prefix("-webkit")}}

+

+
+
Siehe auch

+
+
    
+ 
  • Ähnlich zu CSS Übergängen kann CSS Animationen Animationen unabhängig von Wertänderungen auslösen.
    • 
+

diff --git a/files/de/web/css/css_typen/index.html b/files/de/web/css/css_typen/index.html
new file mode 100644
index 0000000000..bb08a42cd4
--- /dev/null
+++ b/files/de/web/css/css_typen/index.html
@@ -0,0 +1,59 @@
+---
+title: CSS-Basis-Datentypen
+slug: Web/CSS/CSS_Typen
+translation_of: Web/CSS/CSS_Types
+---
+
{{CssRef}}

+
+
CSS-Basis-Datentypen definieren typische Werte (einschließlich Schlüsselwörtern und Einheiten), die von CSS-Eigenschaften und Funktionen akzeptiert werden. Sie sind eine besondere Art eines Komponenten-Wertetyp.

+
+
Im formellen Syntax werden Datentypen mit einem Schlüsselwort gekennzeichnet, das zwischen den Zeichen "<" und ">" steht.

+
+
Referenz

+
+

+
    
+ 
  • {{cssxref("<angle>")}}
    • 
+ 
  • {{cssxref("<basic-shape>")}}
    • 
+ 
  • {{cssxref("<blend-mode>")}}
    • 
+ 
  • {{cssxref("<color>")}}
    • 
+ 
  • {{cssxref("<custom-ident>")}}
    • 
+ 
  • {{cssxref("<filter-function>")}}
    • 
+ 
  • {{cssxref("<flex>")}}
    • 
+ 
  • {{cssxref("<frequency>")}}
    • 
+ 
  • {{cssxref("<gradient>")}}
    • 
+ 
  • {{cssxref("<image>")}}
    • 
+ 
  • {{cssxref("<integer>")}}
    • 
+ 
  • {{cssxref("<length>")}}
    • 
+ 
  • {{cssxref("<number>")}}
    • 
+ 
  • {{cssxref("<percentage>")}}
    • 
+ 
  • {{cssxref("<position>")}}
    • 
+ 
  • {{cssxref("<ratio>")}}
    • 
+ 
  • {{cssxref("<resolution>")}}
    • 
+ 
  • {{cssxref("<shape-box>")}}
    • 
+ 
  • {{cssxref("<single-transition-timing-function>")}}
    • 
+ 
  • {{cssxref("<string>")}}
    • 
+ 
  • {{cssxref("<time>")}}
    • 
+ 
  • {{cssxref("<transform-function>")}}
    • 
+ 
  • {{cssxref("<url>")}}
    • 
+

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values') }}{{ Spec2('CSS3 Values') }}Erste Definition.

diff --git a/files/de/web/css/css_user_interface/index.html b/files/de/web/css/css_user_interface/index.html
new file mode 100644
index 0000000000..586426c255
--- /dev/null
+++ b/files/de/web/css/css_user_interface/index.html
@@ -0,0 +1,116 @@
+---
+title: CSS User Interface
+slug: Web/CSS/CSS_User_Interface
+tags:
+  - CSS
+  - CSS Basic User Interface
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Basic_User_Interface
+---
+
{{CSSRef}}

+
+
CSS User Interface ist ein CSS Modul, das es erlaubt, die Darstellung und Funktionalität von Benutzerschnittstellenfeatures zu definieren.

+
+
Referenz

+
+
Einstellungen

+
+

+
    
+ 
  • {{cssxref("box-sizing")}}
    • 
+ 
  • {{cssxref("cursor")}}
    • 
+ 
  • {{cssxref("outline")}}
    • 
+ 
  • {{cssxref("outline-width")}}
    • 
+ 
  • {{cssxref("outline-style")}}
    • 
+ 
  • {{cssxref("outline-color")}}
    • 
+ 
  • {{cssxref("outline-offset")}}
    • 
+ 
  • {{cssxref("resize")}}
    • 
+ 
  • {{cssxref("text-overflow")}}
    • 
+ 
  • {{cssxref("nav-down")}}
    • 
+ 
  • {{cssxref("nav-left")}}
    • 
+ 
  • {{cssxref("nav-right")}}
    • 
+ 
  • {{cssxref("nav-up")}}
    • 
+

+

+
+
Anleitungen

+
+

+ 
Verwendung von URL Werten für die cursor Eigenschaft

+ 
Erklärt und zeigt, wie ein URL für die {{cssxref('cursor')}} Eigenschaft angegeben werden kann, um benutzerdefinierte Mauszeiger zu erstellen.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}} 
{{SpecName('CSS2.1', 'ui.html')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.01.5 (1.8)8.07.01.2 (125)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung1.0{{CompatGeckoMobile(1.8)}}8.06.03.1

+

diff --git a/files/de/web/css/css_writing_modes/index.html b/files/de/web/css/css_writing_modes/index.html
new file mode 100644
index 0000000000..f6815b68b7
--- /dev/null
+++ b/files/de/web/css/css_writing_modes/index.html
@@ -0,0 +1,109 @@
+---
+title: CSS Writing Modes
+slug: Web/CSS/CSS_Writing_Modes
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Writing Modes
+  - Übersicht
+translation_of: Web/CSS/CSS_Writing_Modes
+---
+
{{CSSRef}}

+
+
CSS Writing Modes ist ein CSS Modul, das verschiedene internationale Schreibmodi definiert, wie links-nach-rechts (z. B. verwendet von der lateinischen und indischen Schrift), rechts-nach-links (z. B. verwendet von der hebräischen und arabischen Schrift), bidirektional (wenn links-nach-rechts und rechts-nach-links Schriften vermischt werden) und vertikal (z. B. verwendet in einigen asiatischen Schriften).

+
+
CSS Eigenschaften

+
+

+
    
+ 
  • {{cssxref("direction")}}
    • 
+ 
  • {{cssxref("glyph-orientation-horizontal")}}
    • 
+ 
  • {{cssxref("text-combine-upright")}}
    • 
+ 
  • {{cssxref("text-orientation")}}
    • 
+ 
  • {{cssxref("unicode-bidi")}}
    • 
+ 
  • {{cssxref("writing-mode")}}
    • 
+

+

+
+
Guides

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Writing Modes')}}{{Spec2('CSS3 Writing Modes')}} 
{{SpecName('CSS2.1', 'text.html')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung1.0{{CompatGeckoDesktop(1.0)}}33.51.0 (85)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}1.0 (85)

+

diff --git a/files/de/web/css/cssom_view/index.html b/files/de/web/css/cssom_view/index.html
new file mode 100644
index 0000000000..77ba31c695
--- /dev/null
+++ b/files/de/web/css/cssom_view/index.html
@@ -0,0 +1,99 @@
+---
+title: CSSOM View
+slug: Web/CSS/CSSOM_View
+tags:
+  - CSS
+  - CSSOM View
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSSOM_View
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
CSSOM View ist ein Modul, das es erlaubt, die visuelle Darstellung eines Dokuments zu verändern, insbesondere sein Scrollverhalten.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("scroll-behavior")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSSOM View')}}{{Spec2('CSSOM View')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

diff --git a/files/de/web/css/cursor/index.html b/files/de/web/css/cursor/index.html
new file mode 100644
index 0000000000..f069a478b8
--- /dev/null
+++ b/files/de/web/css/cursor/index.html
@@ -0,0 +1,300 @@
+---
+title: cursor
+slug: Web/CSS/cursor
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Cursor
+  - NeedsBrowserCompatibility
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/cursor
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die cursor CSS Eigenschaft legt den Cursor fest, der angezeigt wird, wenn sich der Mauszeiger über einem Element befindet.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+cursor: pointer;
+cursor: auto;
+
+/* Verwendung von URL und Koordinaten */
+cursor:  url(cursor1.png) 4 12, auto;
+cursor:  url(cursor2.png) 2 2, pointer;
+
+/* Globale Werte */
+cursor: inherit;
+cursor: initial;
+cursor: unset;
+

+
+
Werte

+
+

+ 
<uri>

+ 
Eine durch Kommata getrennte Liste, die auf benutzerdefinierte Bilder verweist, die als Cursor angezeigt werden sollen. Mehr als eine Angabe macht Sinn, um eine Ausweichlösung (Fallback) bei nicht unterstützten Bildformaten in anderen Browsern bereitzustellen. Am Ende der Liste muss ein Fallback stehen, welches einen Cursor ohne URL angibt, um einen Mauszeiger anzeigen zu können, wenn kein benutzerdefiniertes Bild geladen werden kann. Siehe auch: Verwendung von URL Werten für die cursor Eigenschaft für weitere Details.

+ 
<x> <y> {{ experimental_inline() }}

+ 
Optionale Angabe von X- und Y-Koordinaten (vom Internet Explorer nicht unterstützt). Angegeben werden zwei Zahlen ohne Einheit.

+ 
Schlüsselwortwerte

+ 
Bewege die Maus über einen Wert zum Testen:

+ 

+ 
+  
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+    
+    
+   
+   
+    
+    
+   
+  
+ 
KategorieCSS Wert

+     Mouseover zum Testen		Beschreibung
AllgemeinautoDer Browser bestimmt aufgrund des aktuellen Kontextes, welcher Cursor angezeigt wird.

+     Wenn der Mauszeiger sich zum Beispiel über dem Text befindet, wird der text Cursor angezeigt.
defaultdefault.gifStandard Cursor. Üblicherweise durch ein Pfeil dargestellt.
noneEs wird kein Cursor wird angezeigt.
Links & Statuscontext-menucontext-menu.pngEin Kontextmenü wird unter dem Cursor angezeigt.

+     Unter Windows nicht verfügbar. {{ Bug("258960") }}
helphelp.gifZeigt an, dass Hilfe verfügbar ist.
pointerpointer.gifWird zum Beispiel angezeigt, wenn der Mauszeiger sich über Links befindet. Üblicherweise durch eine Hand dargestellt.
progressprogress.gifZeigt an, dass das Programm im Hintergrund arbeitet und der Benutzer kann, anders als bei wait, weiterhin mit der Oberfläche arbeiten.
waitwait.gifZeigt an, dass das Programm arbeitet. Manchmal auch durch eine Sanduhr oder eine Uhr dargestellt.
Auswahlcellcell.gifZeigt an, dass Zellen ausgewählt werden können.
crosshaircrosshair.gifEin Kreuz, das oft zur Auswahl eines Bereiches in Bildern verwendet wird.
texttext.gifZeigt an, dass der Text ausgewählt werden kann.
vertical-textvertical-text.gifZeigt an, dass vertikaler Text ausgewählt werden kann.
Drag and Dropaliasalias.gifZeigt an, dass ein Tastenkürzel vorhanden ist.
copycopy.gifZeigt an, dass etwas kopiert werden kann.
movemove.gifZeigt an, dass das Objekt bewegt werden kann.
no-dropno-drop.gifZeigt an, dass an der aktuellen Stelle nichts hinein gezogen werden darf.

+     {{bug("275173")}} unter Windows ist no-drop gleich wie not-allowed.
not-allowednot-allowed.gifZeigt an, dass hier etwas nicht erlaubt ist.
Skalierung & Scrollenall-scrollall-scroll.gifZeigt an, dass etwas in alle Richtungen gescrollt werden kann.

+     {{ bug("275174") }} unter Windows ist all-scroll gleich wie move.
col-resizecol-resize.gifZeigt an, dass das Element bzw. die Spalte horizontal skaliert werden kann. Meistens als Pfeile dargestellt, die nach rechts und links zeigen und in der Mitte einen Trennbalken haben.
row-resizerow-resize.gifZeigt an, dass das Element bzw. die Zeile vertikal skaliert werden kann. Meistens als Pfeile dargestellt, die nach unten und oben zeigen und in der Mitte einen Trennbalken haben.
n-resizen-resize.gifZeigt an, dass von einer Ecke aus skaliert werden kann. Der se-resize Cursor wird zum Beispiel benutzt, wenn, von der unteren rechten Ecke aus, etwas bewegt/skaliert werden soll.
e-resizee-resize.gif
s-resizes-resize.gif
w-resizew-resize.gif
ne-resizene-resize.gif
nw-resizenw-resize.gif
se-resizese-resize.gif
sw-resizesw-resize.gif
ew-resizeew-resize.gifZeigt an, dass in zwei Richtungen (bidirektional) skaliert werden kann.
ns-resizens-resize.gif
nesw-resizenesw-resize.gif
nwse-resizenwse-resize.gif
Zoomzoom-inzoom-in.gif
+     
Indicates that something can be zoomed (magnified) in or out.

+    
zoom-outzoom-out.gif
Greifengrabgrab.gif
+     
Indicates that something can be grabbed (dragged to be moved).

+    
grabbinggrabbing.gif

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}
+

+
+
Beispiele

+
+
.foo {
+  cursor: crosshair;
+}
+
+/* Benutze move wenn cell nicht unterstützt wird. */
+.bar {
+  cursor: move;
+  cursor: cell;
+}
+
+/* Standardwert als Fallback für url() muss angegeben werden (funktioniert nicht ohne) */
+.baz {
+  cursor: url(hyper.cur), auto;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#cursor', 'cursor')}}{{Spec2('CSS3 Basic UI')}}Mehrere Schlüsselwörter und die Positionierungssyntax für url() hinzugefügt.
{{SpecName('CSS2.1', 'ui.html#cursor-props', 'cursor')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.cursor")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/custom-ident/index.html b/files/de/web/css/custom-ident/index.html
new file mode 100644
index 0000000000..babda0dccf
--- /dev/null
+++ b/files/de/web/css/custom-ident/index.html
@@ -0,0 +1,120 @@
+---
+title: 
+slug: Web/CSS/custom-ident
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/custom-ident
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <custom-ident> CSS Datentyp beschreibt eine beliebige benutzerdefinierte Zeichenkette, die als Bezeichner verwendet wird. Er ist schreibungsabhängig und in jedem Kontext sind mehrere Werte ausgeschlossen, um Falschinterpretationen zu vermeiden.

+
+
Syntax

+
+
Seine Syntax ist ähnlich der des CSS Bezeichners mit Ausnahme, dass Groß- und Kleinschreibung berücksichtigt wird: ein <custom-ident> ist eine Sequenz von Zeichen, wobei Zeichen folgendes sein können:

+
+
    
+ 
  • ein beliebiges alphanumerisches Zeichen ('A' bis 'Z' oder 'a' bis 'z'),
    • 
+ 
  • eine beliebige dezimale Ziffer ('0' bis '9'),
    • 
+ 
  • ein Bindestrich ('-')
    • 
+ 
  • ein Unterstrich ('_'),
    • 
+ 
  • ein escaptes Zeichen (mit einem Backslash, '\'),
    • 
+ 
  • oder ein Unicode Zeichen (im Format eines Backslashs gefolgt von einer bis sechs hexadezimalen Ziffern, seinem Unicode Codepoint).
    • 
+

+
+
Das erste Zeichen darf weder eine dezimale Ziffer, noch ein Bindestrich ('-') sein, gefolgt von einer dezimalen Ziffer oder einem weiteren Bindestrich. Ein <custom-ident> darf nicht zwischen einfachen oder doppelten Anführungszeichen stehen, da er sonst identisch zu einem {{cssxref("<string>")}} wäre.

+
+
Beachte, dass id1, Id1, iD1 und ID1 alle verschiedene Bezeichner sind, da sie sich in Groß-/Kleinschreibung unterscheiden. Im Gegensatz dazu sind toto\? und toto\3F dieselben Bezeichner, da es verschiedene Arten gibt, ein Zeichen zu escapen.

+
+
Liste ausgeschlossener Werte

+
+
Um Mehrdeutigkeiten zu verhindern, definiert jede Eigenschaft, die <custom-ident> verwendet, eine spezielle Liste an verbotenen Werten:

+
+

+ 
{{cssxref("animation-name")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit und den Wert none.

+ 
{{cssxref("counter-reset")}}

+ 
{{cssxref("counter-increment")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit und den Wert none.

+ 
{{cssxref("@counter-style")}}

+ 
{{cssxref("list-style-type")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit, als auch die Werte none, inline und outside. Auch einige vordefinierte Werte werden von verschiedenen Browsern implementiert: disc, circle, square, decimal, cjk-decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, arabic-indic, armenian, bengali, cambodian, cjk-earthly-branch, cjk-heavenly-stem, cjk-ideographic, devanagari, ethiopic-numeric, georgian, gujarati, gurmukhi, hebrew, hiragana, hiragana-iroha, japanese-formal, japanese-informal, kannada, katakana, katakana-iroha, khmer, korean-hangul-formal, korean-hanja-formal, korean-hanja-informal, lao, lower-armenian, malayalam, mongolian, myanmar, oriya, persian, simp-chinese-formal, simp-chinese-informal, tamil, telugu, thai, tibetan, trad-chinese-formal, trad-chinese-informal, upper-armenian, disclosure-open und disclosure-close.

+ 
{{cssxref("will-change")}}

+ 
Verbietet die globalen CSS Werte unset, initial und inherit, als auch die Werte will-change, auto, scroll-position und contents.

+

+
+
Beispiele

+
+
Dies sind gültige Bezeichner:

+
+
nono79            Eine Mischung aus alphanumerischen Zeichen und Zahlen
+ground-level      Eine Mischung aus alphanumerischen Zeichen und einem Bindestrich
+-test             Ein Bindestrich gefolgt von alphanumerischen Zeichen
+_internal         Ein Unterstrich gefolgt von alphanumerischen Zeichen
+\22 toto          Ein Unicode-Zeichen gefolgt von einer Sequenz von alphanumerischen Zeichen
+bili\.bob         Der Punkt ist korrekt escapt
+

+
+
Dies sind ungültige Bezeichner:

+
+
34rem             Darf nicht mit einer Dezimalziffer anfangen
+-12rad            Darf nicht mit einem Bindestrich gefolgt von einer Dezimalziffer anfangen
+bili.bob          Nur alphanumerische Zeichen, _ und - müssen nicht escapt werden
+--toto            Darf nicht mit zwei Bindestrichen anfangen
+'bilibob'         Kein <user-ident>, sondern ein {{cssxref("<string>")}}
+"bilibob"         Kein <user-ident>, sondern ein {{cssxref("<string>")}}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Will Change', '#valdef-will-change-custom-ident', '<custom-ident> für will-change')}}{{Spec2('CSS Will Change')}}Definiert, welche Werte für {{cssxref("will-change")}} ausgeschlossen sind.
{{SpecName('CSS3 Counter Styles', '#typedef-counter-style-name', '<custom-ident> für list-style-type')}}{{Spec2('CSS3 Counter Styles')}}Verwendet <custom-ident> anstatt einer begrenzten Liste von Schlüsselwörtern und definiert, welche Werte für {{cssxref("list-style-type")}} und {{cssxref("@counter-style")}} ausgeschlossen sind.
{{SpecName('CSS3 Lists', '#counter-properties', '<custom-ident> für counter-*')}}{{Spec2('CSS3 Lists')}}Benennt <identifier> zu <custom-ident> um. Fügt seine Verwendung zur neuen counter-set Eigenschaft hinzu.
{{SpecName('CSS3 Animations', '#typedef-single-animation-name', '<custom-ident> für animation-name')}}{{Spec2('CSS3 Animations')}}Definiert, welche Werte für {{cssxref("animation-name")}} ausgeschlossen sind.
{{SpecName('CSS3 Values', '#identifier-value', '<custom-ident>')}}{{Spec2('CSS3 Values')}}Benennt <identifier> in <custom-ident> um. Macht ihn zu einem Pseudotyp und verlangt die verschiedenen Verwendungen, um die ausgeschlossenen Werte zu präzisieren.
{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<identifier>')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Da dieser Typ kein realer Typ ist, sondern ein Bequemlichkeitstyp, der dazu verwendet wird, um die Beschreibung von erlaubten Werten zu vereinfachen, gibt es keine Browser Kompatibilitätsinformationen im engeren Sinne.

diff --git a/files/de/web/css/direction/index.html b/files/de/web/css/direction/index.html
new file mode 100644
index 0000000000..50c1af5f09
--- /dev/null
+++ b/files/de/web/css/direction/index.html
@@ -0,0 +1,90 @@
+---
+title: direction
+slug: Web/CSS/direction
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/direction
+---
+
{{CSSRef}}

+
+
Zusammenfassung

+
+
Legt die CSS Eigenschaft direction fest damit sie mit der Richtung des Textes übereinstimmt: rtl dür Sprachen welche von rechts nach links geschrieben werden (wie Hebräisch oder Arabisch) und ltr für Sprachen von links nach rechts. Normalerweise ist es jedoch ein Teil des Dokuments (z.B. mit dem dir Attribut in HTML) statt durch den direkten Gebrauch in CSS.

+
+
Der Wert legt die grundsätzliche Richtung des Textes von block-level Elementen und die Richtung von Einbindungen, welche von der {{Cssxref("unicode-bidi")}} Eigenschaft erzeugt wird, fest. Auch legt es die grunsätzliche Ausreichtung des Textes, block-level Elemente und die Richtung in welcher Zellen in einer Tabellenzeile angeordnet werden.

+
+
Anders als das dir Attribut in HTML, wird die direction Eigenschaft nicht von Tabellenspalten an die Tabellenzellen vererbt, da CSS Vererbung dem Dokumenten Baum folgt, in welchem Tabellenzellen in Zeilen sind und nicht in Spalten.

+
+
Die direction und {{cssxref("unicode-bidi")}} Eigenschaft sind die einzigen zwei Eigenschaften welche nicht von der {{cssxref("all")}} Kurzform Eigenschaft beinflusst werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
direction: ltr;
+direction: rtl;
+
+/* Globale Werte*/
+direction: inherit;
+direction: initial;
+direction: unset;
+

+
+
Werte

+
+

+ 
ltr

+ 
Der Ausgangswert von direction (wenn nicht anders festgelegt). Text und andere Elemente gehen von links nach rechts.

+ 
rtl

+ 
Text und andere Elemente gehen von rechts nach links.

+

+
+
Damit die direction Eigenschaft Auswirkungen auf inline-level elemente hat, muss der {{Cssxref("unicode-bidi")}} Eigenschaftswert embed oder override sein.

+
+
Formaler Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
blockquote {
+  direction: rtl;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Writing Modes', '#direction', 'direction')}}{{Spec2('CSS3 Writing Modes')}}Keine Änderung.
{{SpecName('CSS2.1', 'visuren.html#direction', 'direction')}}{{Spec2('CSS2.1')}}Erste Definition.

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.direction")}}
+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("unicode-bidi")}}
    • 
+ 
  • {{Cssxref("writing-mode")}}
    • 
+

diff --git a/files/de/web/css/display/index.html b/files/de/web/css/display/index.html
new file mode 100644
index 0000000000..54b21e29b5
--- /dev/null
+++ b/files/de/web/css/display/index.html
@@ -0,0 +1,259 @@
+---
+title: display
+slug: Web/CSS/display
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/display
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline.

+
+
Zusätzlich zu den vielen verschiedenen Anzeigearten erlaubt der Wert none es, ein Element gänzlich auszublenden; wenn none verwendet wird, werden auch alle Unterelemente ausgeblendet. Das Dokument wird so dargestellt, als ob das Element nicht im Dokumentenbaum existieren würde.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+display: none;
+display: inline;
+display: block;
+display: contents;
+display: list-item;
+display: inline-block;
+display: inline-table;
+display: table;
+display: table-cell;
+display: table-column;
+display: table-column-group;
+display: table-footer-group;
+display: table-header-group;
+display: table-row;
+display: table-row-group;
+display: flex;
+display: inline-flex;
+display: grid;
+display: inline-grid;
+display: ruby;
+display: ruby-base;
+display: ruby-text;
+display: ruby-base-container;
+display: ruby-text-container;
+display: run-in;
+
+/* Globale Werte */
+display: inherit;
+display: initial;
+display: unset;
+

+
+
Werte

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+ 
+
ModulWertBeschreibung
Basic values (CSS 1)none
+    
Schaltet die Anzeige eines Elementes aus (das Element hat keinen Effekt mehr auf das Layout des Dokumentes). Alle Kindelemente werden ebenfalls nicht mehr angezeigt. Das Dokument wird so gerendert als wenn das Element nicht im Dokumentenbaum existieren würde.

+
+    
Um die Box trotzdem rendern zu lassen, aber den Inhalt unsichtbar zu machen, kann die {{cssxref("visibility")}} Eigenschaft verwendet werden.

+   
inlineEs werden eine oder mehrere inline Elementboxen generiert.
blockEs wird eine Blockbox generiert.
list-itemEs wird eine block Box für den Inhalt und eine separate inline Box für die List-Items generiert.
Extended values (CSS 2.1)inline-blockEs wird eine block Box generiert, welche den umliegenden Inhalt umfließen lässt, als wenn es eine einzelne inline Box wäre.
Table model values (CSS 2.1)inline-tableVerhält sich wie das {{HTMLElement("table")}} HTML Element, aber es wird ein inline Element generiert.
tableVerhält sich wie das {{HTMLElement("table")}} HTML Element. Es wird eine Blockbox generiert.
table-captionVerhält sich wie das {{HTMLElement("caption")}} HTML Element
table-cellVerhält sich wie das {{HTMLElement("td")}} HTML Element
table-columnVerhält sich wie das {{HTMLElement("col")}} HTML Element
table-column-groupVerhält sich wie das {{HTMLElement("colgroup")}} HTML Element
table-footer-groupVerhält sich wie das {{HTMLElement("tfoot")}} HTML Element
table-header-groupVerhält sich wie das {{HTMLElement("thead")}} HTML Element
table-rowVerhält sich wie das {{HTMLElement("tr")}} HTML Element
table-row-groupVerhält sich wie das {{HTMLElement("tbody")}} HTML Element
Flexbox model values (CSS3)flexEs wird ein Flexbox Container als block Element erzeugt.
inline-flexEs wird ein Flexbox Container als inline Element erzeugt.
Grid box model values (CSS3) {{experimental_inline}}gridEs wird ein Grid Container als block Element erzeugt.
+   
inline-gridEs wird ein Grid Container als inline Element erzeugt.
Ruby Formatierungsmodell Werte (CSS3){{experimental_inline}}rubyDas Element verhält sich wie ein Inlineelement und stellt seinen Inhalt anhand des Ruby Formatierungsmodells dar. Es verhält sich wie die entsprechenden {{HTMLElement("ruby")}} HTML Elemente.
ruby-baseDiese Elemente verhalten sich wie {{HTMLElement("rb")}} Elemente.
ruby-textDiese Elemente verhalten sich wie {{HTMLElement("rt")}} Elemente.
ruby-base-containerDiese Elemente verhalten sich wie {{HTMLElement("rbc")}} Elemente, die als anonyme Boxen generiert wurden.
ruby-text-containerDiese Elemente verhalten sich wie {{HTMLElement("rtc")}} Elemente.
Experimental values {{experimental_inline}}run-in
+    
    
+     
  • Wenn eine run-in Box eine block Box enthält, genau wie block.
    • 
+     
  • Wenn einer block Box eine run-in Box folgt, wird die run-in Box die erste inline Box der block Box.
    • 
+     
  • Wenn eine inline Box folgt, wird aus der run-in Box eine block Box.
    • 
+    

+   
contentsDiese Elemente erzeugen selbst keine spezielle Box. Sie werden durch ihre Pseudobox und deren Kindboxen ersetzt.

+
+
Formale Syntax

+
+
{{csssyntax}}
+

+
+
Beispiele

+
+
Live Beispiel

+
+
p.secret  { display: none; }
+<p class="secret">invisible text</p>
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Display', '#display', 'display')}}{{Spec2('CSS3 Display')}}run-in und contents Werte hinzugefügt
{{SpecName('CSS3 Ruby', '#display', 'display')}}{{Spec2('CSS3 Ruby')}}ruby, ruby-base, ruby-text, ruby-base-container und ruby-text-container Eigenschaften hinzugefügt
{{SpecName('CSS3 Grid', '#grid-declaration0', 'display')}}{{Spec2('CSS3 Grid')}}Grid Box-Modell hinzugefügt
{{SpecName('CSS3 Flexbox', '#flex-containers', 'display')}}{{Spec2('CSS3 Flexbox')}}Flexbox-Modell hinzugefügt
{{SpecName('CSS2.1', 'visuren.html#display-prop', 'display')}}{{Spec2('CSS2.1')}}Table-Model und inline-block hinzugefügt
{{SpecName('CSS1', '#display', 'display')}}{{Spec2('CSS1')}}none, block, inline und list-item hinzugefügt

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.display", 10)}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("visibility")}}, {{cssxref("float")}}, {{cssxref("position")}}
    • 
+ 
  • {{cssxref("flex")}}
    • 
+

diff --git a/files/de/web/css/empty-cells/index.html b/files/de/web/css/empty-cells/index.html
new file mode 100644
index 0000000000..97bdbe839f
--- /dev/null
+++ b/files/de/web/css/empty-cells/index.html
@@ -0,0 +1,76 @@
+---
+title: empty-cells
+slug: Web/CSS/empty-cells
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabellen
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/empty-cells
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die empty-cells CSS Eigenschaft legt fest, ob Hintergründe und Rahmen leerer Tabellenzellen angezeigt werden sollen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+empty-cells: show;
+empty-cells: hide;
+
+/* Globale Werte */
+empty-cells: inherit;
+empty-cells: initial;
+empty-cells: unset;
+

+
+
Werte

+
+

+ 
show

+ 
Ist ein Schlüsselwort, das angibt, dass Ränder und Hintergründe wie in normalen Zellen dargestellt werden sollen.

+ 
hide

+ 
Ist ein Schlüsselwort, das angibt, dass keine Ränder oder Hintergründe dargestellt werden sollen.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.contentbox td {
+  empty-cells: show;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'tables.html#empty-cells', 'empty-cells')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.empty-cells")}}
diff --git a/files/de/web/css/ersetztes_element/index.html b/files/de/web/css/ersetztes_element/index.html
new file mode 100644
index 0000000000..c75a4aec95
--- /dev/null
+++ b/files/de/web/css/ersetztes_element/index.html
@@ -0,0 +1,23 @@
+---
+title: Ersetztes Element
+slug: Web/CSS/ersetztes_Element
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/Replaced_element
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
In CSS ist ein ersetztes Element ein Element, dessen Darstellung außerhalb des Anwendungsbereichs von CSS liegt. Dies sind eine Art externe Objekte, deren Repräsentation unabhängig von CSS ist. Typische ersetzte Elemente sind {{HTMLElement("img")}}, {{HTMLElement("object")}}, {{HTMLElement("video")}} oder Formularelemente wie {{HTMLElement("textarea")}} und {{HTMLElement("input")}}. Manche Elemente wie {{HTMLElement("audio")}} oder {{HTMLElement("canvas")}} sind nur in bestimmten Fällen ersetzte Elemente. Objekte, die via CSS {{cssxref("content")}} Eigenschaften eingefügt werden, sind anonyme ersetzte Elemente.

+
+
CSS behandelt ersetzte Elemente in manchen Fällen besonders, wie z. B. bei der Berechnung von Außenabständen und einigen auto Werten.

+
+
Beachte, dass manche ersetzte Elemente, jedoch nicht alle, innere Maße oder eine definierte Grundlinie haben, welche von einigen CSS Eigenschaften wie {{cssxref("vertical-align")}} verwendet wird.

+
+
Siehe auch

+
+
    
+ 
  • {{CSS_key_concepts}}
    • 
+

diff --git a/files/de/web/css/farben/index.html b/files/de/web/css/farben/index.html
new file mode 100644
index 0000000000..9e0baf0720
--- /dev/null
+++ b/files/de/web/css/farben/index.html
@@ -0,0 +1,1285 @@
+---
+title: 
+slug: Web/CSS/Farben
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/color_value
+---
+
{{CSSRef}}

+
+
Der CSS Datentyp beschreibt eine Farbe im sRGB Farbraum. Eine Farbe kann auf eine dieser Arten beschrieben werden:

+
+
+
+
Beachte, dass die Liste an akzeptierten Farbwerten durch weiterentwickelte Spezifikationen erweitert wurde bis hin zu den neuesten CSS3 Farben.

+
+
In Verbindung mit einer Farbe im sRGB Raum besteht ein <color>-Wert auch aus einer Alphakanal-Koordinate, einem Transparenzwert, der angibt, wie die Farbe mit der Hintergrundfarbe vermischt wird

+
+
Obwohl CSS Farbwerte genau definiert sind, können sie auf verschiedenen Ausgabegeräten unterschiedlich dargestellt werden. Die meisten davon sind nicht kalibriert und manche Browser unterstützen nicht das Farbprofil des Ausgabegeräts. Ohne diese kann die Farbdarstellung stark variieren.

+
+
Hinweis: Die WCAG 2.0 Empfehlung des W3C rät Webauthoren ausdrücklich dazu, Farben nicht als einziges Mittel zur Vermittlung einer bestimmten Information, Aktion oder einem Ergebnis zu verwenden. Manche Benutzer haben Probleme, Farben zu unterscheiden, was das Verständnis der übermittelten Information verhindert. Natürlich verhindert das nicht die Benutzung von Farbe, nur deren Benutzung als einziges Mittel eine Information zu beschreiben.

+
+
Interpolation

+
+
Werte des <color> CSS Datentyps können für Animationen und zur Erstellung von {{cssxref("gradient", "<gradient>")}} Werten interpoliert werden. In diesem Fall werden ihre Rot-, Grün- und Blau-Komponenten als eine reale Fließkommazahl interpoliert. Beachte, dass die Interpolation von Farben innerhalb des alpha-vormultiplizierten sRGBA-Farbraums stattfindet, um unerwartete Grautöne zu verhindern. In Animationen wird die Geschwindigkeit der Interlolation durch die zur Animation gehörenden Timing-Funktion bestimmt.

+
+
Werte

+
+
Es gibt mehrere Arten, wie ein <color> Wert beschrieben werden kann.

+
+
Farbschlüsselwörter

+
+
Farbschlüsselwörter sind schreibungsunabhängige Bezeichner, welche eine bestimmte Farbe repräsentieren, z. B. red, blue, brown, lightseagreen. Der Name beschreibt die Farbe, er ist jedoch meist erfunden. Die Liste an akzeptierten Werten variiert sehr zwischen den Spezifikationen:

+
+
    
+ 
  • CSS Level 1 akzeptierte nur 16 Grundfarben, bekannt als VGA-Farben, weil sie aus der Menge an darstellbaren Farben von VGA-Grafikkarten stammen.
    • 
+ 
  • CSS Level 2 fügte das orange-Schlüsselwort hinzu.
    • 
+ 
  • Von Anfang an haben Browser weitere Farben akzeptiert, meist die X11 genannte Farbliste, da einige frühere Browser X11-basierte Anwendungen waren, allerdings mit einigen Unterschieden. SVG 1.0 war der erste Standard, der diese Schlüsselwörter formal definiert hat; CSS Colors Level 3 hat diese Schlüsselwörter ebenfalls formal definiert. Sie werden oft als erweiterte Farbschlüsselwörter, X11 Farben oder SVG Farben bezeichnet.
    • 
+

+
+
Es gibt ein paar Dinge bei der Verwendung von Farbschlüsselwörtern zu beachten:

+
+
    
+ 
  • Außer den 16 Grundfarben, die HTML gemein hat, können keine anderen Farben in HTML verwendet werden. HTML konvertiert diese unbekannten Werte mit einem bestimmten Algorithmus, was zu komplett unterschiedlichen Farben führt. Diese Schlüsselwörter sollten ausschließlich in SVG & CSS verwendet werden.
    • 
+ 
  • Unknown keywords make the CSS property invalid. Invalid properties being ignored, the color will have no effect. This is a different behavior than the one of HTML.
    • 
+ 
  • Keine als Schlüsselwort definierten Farben haben in CSS eine Transparenz. Sie sind klare, undurchsichtige Farben.
    • 
+ 
  • Verschiedene Schlüsselwörter kennzeichnen die gleiche Farbe:
+  
      
+   
    • darkgray / darkgrey
      • 
+   
    • darkslategray / darkslategrey
      • 
+   
    • dimgray / dimgrey
      • 
+   
    • lightgray / lightgrey
      • 
+   
    • lightslategray / lightslategrey
      • 
+   
    • gray / grey
      • 
+   
    • slategray / slategrey
      • 
+  
    
+ 
    • 
+ 
  • Obwohl die Namen der Schlüsselwörter von den gewöhnlichen X11-Farbnamen stammen, können die Farben von den entsprechenden Systemfarben im X11-System abweichen, da sie auf die spezielle Hardware der Hersteller zugeschnitten sind.
    • 
+

+
+
+ 
+  
+   
+   
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+ 
+
SpezifikationFarbeSchlüsselwortRGB HexwerteVorschau
{{SpecName("CSS1")}} black#000000 
 silver#c0c0c0 
 gray#808080 
 white#ffffff 
 maroon#800000 
 red#ff0000 
 purple#800080 
 fuchsia#ff00ff 
 green#008000 
 lime#00ff00 
 olive#808000 
 yellow#ffff00 
 navy#000080 
 blue#0000ff 
 teal#008080 
 aqua#00ffff 
{{SpecName("CSS2.1")}} orange#ffa500 
{{SpecName("CSS3 Colors")}} aliceblue#f0f8ff 
 antiquewhite#faebd7 
 aquamarine#7fffd4 
 azure#f0ffff 
 beige#f5f5dc 
 bisque#ffe4c4 
 blanchedalmond#ffe4c4 
 blueviolet#8a2be2 
 brown#a52a2a 
 burlywood#deb887 
 cadetblue#5f9ea0 
 chartreuse#7fff00 
 chocolate#d2691e 
 coral#ff7f50 
 cornflowerblue#6495ed 
 cornsilk#fff8dc 
 crimson#dc143c 
 darkblue#00008b 
 darkcyan#008b8b 
 darkgoldenrod#b8860b 
 darkgray#a9a9a9 
 darkgreen#006400 
 darkgrey#a9a9a9 
 darkkhaki#bdb76b 
 darkmagenta#8b008b 
 darkolivegreen#556b2f 
 darkorange#ff8c00 
 darkorchid#9932cc 
 darkred#8b0000 
 darksalmon#e9967a 
 darkseagreen#8fbc8f 
 darkslateblue#483d8b 
 darkslategray#2f4f4f 
 darkslategrey#2f4f4f 
 darkturquoise#00ced1 
 darkviolet#9400d3 
 deeppink#ff1493 
 deepskyblue#00bfff 
 dimgray#696969 
 dimgrey#696969 
 dodgerblue#1e90ff 
 firebrick#b22222 
 floralwhite#fffaf0 
 forestgreen#228b22 
 gainsboro#dcdcdc 
 ghostwhite#f8f8ff 
 gold#ffd700 
 goldenrod#daa520 
 greenyellow#adff2f 
 grey#808080 
 honeydew#f0fff0 
 hotpink#ff69b4 
 indianred#cd5c5c 
 indigo#4b0082 
 ivory#fffff0 
 khaki#f0e68c 
 lavender#e6e6fa 
 lavenderblush#fff0f5 
 lawngreen#7cfc00 
 lemonchiffon#fffacd 
 lightblue#add8e6 
 lightcoral#f08080 
 lightcyan#e0ffff 
 lightgoldenrodyellow#fafad2 
 lightgray#d3d3d3 
 lightgreen#90ee90 
 lightgrey#d3d3d3 
 lightpink#ffb6c1 
 lightsalmon#ffa07a 
 lightseagreen#20b2aa 
 lightskyblue#87cefa 
 lightslategray#778899 
 lightslategrey#778899 
 lightsteelblue#b0c4de 
 lightyellow#ffffe0 
 limegreen#32cd32 
 linen#faf0e6 
 mediumaquamarine#66cdaa 
 mediumblue#0000cd 
 mediumorchid#ba55d3 
 mediumpurple#9370db 
 mediumseagreen#3cb371 
 mediumslateblue#7b68ee 
 mediumspringgreen#00fa9a 
 mediumturquoise#48d1cc 
 mediumvioletred#c71585 
 midnightblue#191970 
 mintcream#f5fffa 
 mistyrose#ffe4e1 
 moccasin#ffe4b5 
 navajowhite#ffdead 
 oldlace#fdf5e6 
 olivedrab#6b8e23 
 orangered#ff4500 
 orchid#da70d6 
 palegoldenrod#eee8aa 
 palegreen#98fb98 
 paleturquoise#afeeee 
 palevioletred#db7093 
 papayawhip#ffefd5 
 peachpuff#ffdab9 
 peru#cd853f 
 pink#ffc0cb 
 plum#dda0dd 
 powderblue#b0e0e6 
 rosybrown#bc8f8f 
 royalblue#4169e1 
 saddlebrown#8b4513 
 salmon#fa8072 
 sandybrown#f4a460 
 seagreen#2e8b57 
 seashell#fff5ee 
 sienna#a0522d 
 skyblue#87ceeb 
 slateblue#6a5acd 
 slategray#708090 
 slategrey#708090 
 snow#fffafa 
 springgreen#00ff7f 
 steelblue#4682b4 
 tan#d2b48c 
 thistle#d8bfd8 
 tomato#ff6347 
 turquoise#40e0d0 
 violet#ee82ee 
 wheat#f5deb3 
 whitesmoke#f5f5f5 
 yellowgreen#9acd32 
{{SpecName("CSS4 Colors")}} rebeccapurple#663399 

+
+
Die Farbe rebeccapurple entspricht der Farbe #639. Mehr Informationen darüber, warum sie eingeführt wurde, kann in diesem Codepen Blog Post von Trezy nachgelesen werden: "Honoring a Great Man."

+
+
transparent Schlüsselwort

+
+
Das transparent-Schlüsselwort beschreibt eine vollkommen transparente Farber, d. h. die dargestellte Farbe ist die Hintergrundfarbe. Technisch ist sie schwarz mit einem Alphakanal mit Minimalwert und ist ein Kürzel für rgba(0,0,0,0).

+
+
Historischer Hinweis

+Das Schlüsselwort transparent war keine echte Farbe in CSS Level 2 (Revision 1). Es war ein spezifisches Schlüsselwort, das bei zwei CSS-Eigenschaften anstelle eines regulären <color>-Wertes verwendet werden konnte: {{cssxref("background")}} und {{cssxref("border")}}. Es war eigentlich hinzugefügt, um geerbte Festfarben zu überschreiben.

+

+Mit der Unterstützung der Deckkraft durch den Alphakanal, wurde transparent in CSS Colors Level 3 neudefiniert als eine echte Farbe, die überall dort verwendet werden kann, wo ein <color>-Wert benötigt wird, wie der {{cssxref("color")}} Eigenschaft.

+
+
currentColor Schlüsselwort

+
+
Das currentColor-Schlüsselwort beschreibt den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements. Es erlaubt, die Farbeigenschaften, die von Eigenschaften oder Kindelementeigenschaften zu vererben, die sie normalerweise nicht vererben.

+
+
Es kann auch für Eigenschaften verwendet werden, die den berechneten Wert der {{cssxref("color")}} Eigenschaft des Elements erben und entspricht dem inherit Schlüsselwort bei diesen Elementen, falls es welche gibt.

+
+
Live-Beispiel

+
+
Die Farbe der Zeile (ein farbgefülltes {{HTMLElement("div")}}) passt sich der Farbe der {{cssxref("color")}} Eigenschaft an, die von seinem Elternelement geerbt wird.

+
+

+
Live-Beispiel 1

+
+
<div style="color:darkred;">
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ <div style="background:currentcolor; height:1px;"></div>
+ Mehr Text.
+</div>

+
+
{{EmbedLiveSample("Live-Beispiel_1")}}

+
+
Live-Beispiel 2

+
+
<div style="color:blue; border-bottom: 1px dashed currentcolor;">
+ Die Farbe dieses Texts ist dieselbe wie die der Zeile:
+ <div style="background:currentcolor; height:1px;"></div>
+ Mehr Text.
+</div>

+
+
{{EmbedLiveSample("Live-Beispiel_2")}}

+

+
+
rgb()

+
+
Farben können durch das Rot-Grün-Blau-Modell (RGB-Modell) auf zwei Weisen definiert werden:

+
+

+ 
Hexadezimale Notation #RRGGBB und #RGB

+ 

+ 
    
+  
  • "#", gefolgt von sechs hexadezimalen Zeichen (0-9, A-F).
    • 
+  
  • "#", gefolgt von drei hexadezimalen Zeichen (0-9, A-F).
    • 
+ 

+ Die Drei-Ziffern-RGB-Notation (#RGB) und die Sechs-Ziffern-Form (#RRGGBB) sind gleich.

+ Zum Beispiel repräsentieren #f03 und #ff0033 dieselbe Farbe.

+ 
Funktionelle Notation rgb(R,G,B)

+ 
"rgb", gefolgt von drei {{cssxref("<integer>")}} oder drei {{cssxref("<percentage>")}} Werten.

+ Die Ganzzahl 255 entspricht 100% und F oder FF in der hexadezimalen Schreibweise.

+

+
+
/* Diese Beispiele definieren alle dieselbe RGB-Farbe: */
+
+ #f03
+ #F03
+ #ff0033
+ #FF0033
+ rgb(255,0,51)
+ rgb(255, 0, 51)
+ rgb(255, 0, 51.2) /* FEHLER! Keine Bruchzahlen verwenden, nur Ganzzahlen. */
+ rgb(100%,0%,20%)
+ rgb(100%, 0%, 20%)
+ rgb(100%, 0, 20%) /* FEHLER! Ganzzahl- und Prozentschreibweise dürfen nicht gemischt werden. */
+

+
+
hsl()

+
+
Farben können auch durch das Hue-Saturation-Lightness-Modell (HSL-Modell) unter Verwendung der funktionellen Notation hsl() definiert werden. Der Vorteil von HSL gegenüber RGB ist, dass es wesentlich intuitiver ist: man kann die Zahlen, die man haben will, erraten und dann anpassen. Es ist auch einfacher, Sets passender Farben zu erstellen (indem der Farbwert unverändert bleibt und die Helligkeit/Dunkelheit und Sättigung verändert werden).

+
+
Der Farbwert wird als ein Winkel des Farbkreises angegeben (d. h. der Regenbogen als Kreis dargestellt). Der Winkel wird als einheitenlose {{cssxref("<number>")}} angegeben. Per definition red=0=360 und die anderen Farben sind so auf den Kreis verteilt, sodass green=120, blue=240, etc. Als Winkel bricht er implizit um, sodass 120=240 und 480=120.

+
+
Sättigung und Helligkeit werden als Prozentwert angegeben.

+ 100% entspricht voller Sättigung und 0% ist ein Grauton.

+ 100% Helligkeit ist weiß, 0% Helligkeit ist schwarz und 50% Helligkeit ist "normal".

+
+
hsl(0,  100%,50%)    /* rot */       
+hsl(30, 100%,50%)                    
+hsl(60, 100%,50%)                    
+hsl(90, 100%,50%)                    
+hsl(120,100%,50%)    /* grün */      
+hsl(150,100%,50%)                    
+hsl(180,100%,50%)                    
+hsl(210,100%,50%)                    
+hsl(240,100%,50%)    /* blau */      
+hsl(270,100%,50%)                    
+hsl(300,100%,50%)                    
+hsl(330,100%,50%)                    
+hsl(360,100%,50%)    /* rot */       
+
+hsl(120,100%,25%)    /* dunkelgrün */
+hsl(120,100%,50%)    /* grün*/       
+hsl(120,100%,75%)    /* hellgrün */  
+
+hsl(120,100%,50%)    /* grün */      
+hsl(120, 67%,50%)                    
+hsl(120, 33%,50%)                    
+hsl(120,  0%,50%)                    
+
+hsl(120, 60%,70%)    /* pastelgrün */
+

+
+
rgba()

+
+
Farben können durch das Rot-Grün-Blau-Model (RGB-Modell) unter Verwendungn der funktionellen Notation rgba() verwendet werden. RGBa erweitert das RGB-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.

+ a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

+
+
rgba(255, 0, 0, 0.1)    /* 10% undurchsichtiges Rot */      
+rgba(255, 0, 0, 0.4)    /* 40% undurchsichtiges Rot */      
+rgba(255, 0, 0, 0.7)    /* 70% undurchsichtiges Rot */      
+rgba(255, 0, 0, 1)      /* komplett undurchsichtiges Rot */ 
+

+
+
hsla()

+
+
Farben können auch durch das Hue-Saturation-Lightness-Alpha-Modell (HSLa-Modell) unter Verwendung der funktionellen Notation hsla() definiert werden. HSLa erweitert das HSL-Farbmodell um einen Alphakanal, der die Deckkraft einer Farbe angibt.

+ a bedeutet Deckkraft: 0=transparent; 1=undurchsichtig;

+
+
hsla(240, 100%, 50%, 0.05)    /* 5% undurchsichtiges Blau */   
+hsla(240,100%,50%, 0.4)       /* 40% undurchsichtiges Blau */  
+hsla(240,100%,50%, 0.7)       /* 70% undurchsichtiges Blau */  
+hsla(240,100%,50%,   1)       /* full undurchsichtiges Blau */ 
+

+
+
Systemfarben

+
+
Nicht alle Systemfarben werden von allen Systemen unterstützt. {{deprecated_inline}} für die Benutzung in öffentlichen Webseiten.

+
+

+ 
ActiveBorder

+ 
Rahmenfarbe eines aktiven Fensters.

+ 
ActiveCaption

+ 
Titelfarbe eines aktiven Fensters. Sollte mit der Vordergrundfarbe CaptionText verwendet werden.

+ 
AppWorkspace

+ 
Hintergrundfarbe einer Mehrfachdokumentschnittstelle (MDI).

+ 
Background

+ 
Desktophintergrund.

+ 
ButtonFace

+ 
Schaltflächenfarbe für 3D-Elemente, die durch eine Ebene umgebender Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.

+ 
ButtonHighlight

+ 
Farbe des dem Licht zugewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.

+ 
ButtonShadow

+ 
Farbe des dem Licht abgewandten Rahmens eines 3D-Elements, das durch diesen Rahmen dreidimensional erscheint.

+ 
ButtonText

+ 
Text auf Schaltflächen. Sollte mit der Hintergrundfarbe ButtonFace oder ThreeDFace verwendet werden.

+ 
CaptionText

+ 
Farbe des Titeltexts in Fenstern. Sollte mit der Hintergrundfarbe ActiveCaption verwendet werden.

+ 
GrayText

+ 
Farbe für ausgegrauten (deaktivierten) Text.

+ 
Highlight

+ 
Farbe für ausgewählte Elemente in einem Steuerelement. Sollte mit der Vordergrundfarbe HighlightText verwendet werden.

+ 
HighlightText

+ 
Farbe des Texts ausgewählter Elemente in einem Steuerelement. Sollte mit der Hintergrundfarbe Highlight verwendet werden.

+ 
InactiveBorder

+ 
Rahmenfarbe eines inaktiven Fensters.

+ 
InactiveCaption

+ 
Titelfarbe eines inaktiven Fensters. Sollte mit der Vordergrundfarbe InactiveCaptionText verwendet werden.

+ 
InactiveCaptionText

+ 
Farbe des Titeltexts in inaktiven Fenstern. Sollte mit der Hintergrundfarbe InactiveCaption verwendet werden.

+ 
InfoBackground

+ 
Hintergrundfarbe für Tooltips. Sollte mit der Vordergrundfarbe InfoText verwendet werden.

+ 
InfoText

+ 
Textfarbe für Tooltips. Sollte mit der Hintergrundfarbe InfoBackground verwendet werden.

+ 
Menu

+ 
Hintergrundfarbe von Menüs. Sollte mit der Vordergrundfarbe MenuText oder -moz-MenuBarText verwendet werden.

+ 
MenuText

+ 
Textfarbe von Menüs. Sollte mit der Hintergrundfarbe Menu verwendet werden.

+ 
Scrollbar

+ 
Hintergrundfarbe von Scrollleisten.

+ 
ThreeDDarkShadow

+ 
Farbe des dunkleren (normalerweise äußeren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
ThreeDFace

+ 
Schaltflächenfarbe für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen. Sollte mit der Vordergrundfarbe ButtonText verwendet werden.

+ 
ThreeDHighlight

+ 
Farbe des helleren (normalerweise äußeren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
ThreeDLightShadow

+ 
Farbe des dunkleren (normalerweise inneren) der dem Licht zugewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
ThreeDShadow

+ 
Farbe des helleren (normalerweise inneren) der dem Licht abgewandten zweier Rahmen für 3D-Elemente, die durch zwei Ebenen umgebender konzentrischer Rahmen dreidimensional erscheinen.

+ 
Window

+ 
Fensterhintergrundfarbe. Sollte mit der Vordergrundfarbe WindowText verwendet werden.

+ 
WindowFrame

+ 
Fensterrahmenfarbe.

+ 
WindowText

+ 
Textfarbe in Fenstern. Sollte mit der Hintergrundfarbe Window verwendet werden.

+

+
+
Mozilla Systemfarben Erweiterungen

+
+

+ 
-moz-ButtonDefault

+ 
Rahmenfarbe, die um Schaltflächen angezeigt wird, die die Standardaktion für Dialoge darstellen.

+ 
-moz-ButtonHoverFace

+ 
Hintergrundfarbe einer Schaltfläche, über der der Mauszeiger steht (was ThreeDFace oder ButtonFace wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Vordergrundfarbe -moz-ButtonHoverText verwendet werden.

+ 
-moz-ButtonHoverText

+ 
Textfarbe einer Schaltfläche, über der der Mauszeiger steht (was ButtonText wäre, wenn der Mauszeiger nicht darübersteht). Sollte mit der Hintergrundfarbe -moz-ButtonHoverFace verwendet werden.

+ 
-moz-CellHighlight

+ 
Hintergrundfarbe für markierte Elemente in einem Baum. Sollte mit der Vordergrundfarbe -moz-CellHighlightText verwendet werden. Siehe auch -moz-html-CellHighlight.

+ 
-moz-CellHighlightText

+ 
Textfarbe für markierte Elemente in einem Baum. Sollte mit der Hintergrundfarbe -moz-CellHighlight verwendet werden. Siehe auch -moz-html-CellHighlightText.

+ 
-moz-Combobox

+ 
{{Gecko_minversion_inline("1.9.2")}} Hintergrundfarbe für Combo-Boxen. Sollte mit der Vordergrundfarbe -moz-ComboboxText verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-Field verwendet werden.

+ 
-moz-ComboboxText

+ 
{{Gecko_minversion_inline("1.9.2")}} Textfarbe für Combo-Boxen. Sollte mit der Hintergrundfarbe -moz-Combobox verwendet werden. In Gecko Versionen vor 1.9.2 sollte stattdessen -moz-FieldText verwendet werden.

+ 
-moz-Dialog

+ 
Hintergrundfarbe für Dialoge. Sollte mit der Vordergrundfarbe -moz-DialogText verwendet werden.

+ 
-moz-DialogText

+ 
Textfarbe für Dialoge. Sollte mit der Hintergrundfarbe -moz-Dialog verwendet werden.

+ 
-moz-dragtargetzone

+ 
-moz-EvenTreeRow

+ 
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für geradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-OddTreeRow.

+ 
-moz-Field

+ 
Hintergrundfarbe für Texteingabefelder. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden.

+ 
-moz-FieldText

+ 
Textfarbe für Texteingabefelder. Sollte mit der Hintergrundfarbe -moz-Field, -moz-EvenTreeRow oder -moz-OddTreeRow verwendet werden.

+ 
-moz-html-CellHighlight

+ 
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Vordergrundfarbe -moz-html-CellHighlightText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlight verwendet werden.

+ 
-moz-html-CellHighlightText

+ 
{{gecko_minversion_inline("1.9")}} Vordergrundfarbe für markierte Elemente in HTML {{HTMLElement("select")}}s. Sollte mit der Hintergrundfarbe -moz-html-CellHighlight verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-CellHighlightText verwendet werden.

+ 
-moz-mac-accentdarkestshadow

+ 
-moz-mac-accentdarkshadow

+ 
-moz-mac-accentface

+ 
-moz-mac-accentlightesthighlight

+ 
-moz-mac-accentlightshadow

+ 
-moz-mac-accentregularhighlight

+ 
-moz-mac-accentregularshadow

+ 
-moz-mac-chrome-active

+ 
{{Gecko_minversion_inline("1.9.1")}}

+ 
-moz-mac-chrome-inactive

+ 
{{Gecko_minversion_inline("1.9.1")}}

+ 
-moz-mac-focusring

+ 
-moz-mac-menuselect

+ 
-moz-mac-menushadow

+ 
-moz-mac-menutextselect

+ 
-moz-MenuHover

+ 
Hintergrundfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu Highlight. Sollte mit der Vordergrundfarbe -moz-MenuHoverText oder -moz-MenuBarHoverText verwendet werden.

+ 
-moz-MenuHoverText

+ 
Textfarbe für Menüeinträge, über denen der Mauszeiger steht. Oft ähnlich zu HighlightText. Sollte mit der Hintergrundfarbe -moz-MenuHover verwendet werden.

+ 
-moz-MenuBarText

+ 
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten. Oft ähnlich zu MenuText. Sollte auf einem Menu Hintergrund verwendet werden.

+ 
-moz-MenuBarHoverText

+ 
{{Gecko_minversion_inline("1.9.2")}} Vordergrundfarbe für Text in Menüleisten, über dem der Mauszeiger steht. Oft ähnlich zu -moz-MenuHoverText. Sollte auf einem -moz-MenuHover Hintergrund verwendet werden.

+ 
-moz-nativehyperlinktext

+ 
{{Gecko_minversion_inline("1.9.1")}} Standardplattformfarbe für Hyperlinks.

+ 
-moz-OddTreeRow

+ 
{{gecko_minversion_inline("1.9")}} Hintergrundfarbe für ungeradzahlige Zeilen in einem Baum. Sollte mit der Vordergrundfarbe -moz-FieldText verwendet werden. In Gecko Versionen vor 1.9 sollte stattdessen -moz-Field verwendet werden. Siehe auch -moz-EvenTreeRow.

+ 
-moz-win-communicationstext

+ 
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-communications-toolbox; verwendet werden.

+ 
-moz-win-mediatext

+ 
{{gecko_minversion_inline("1.9")}} Sollte für Text in Objekten mit {{cssxref("-moz-appearance")}}: -moz-win-media-toolbox; verwendet werden.

+

+
+
Mozilla Farbpräferenz Erweiterungen

+
+

+ 
-moz-activehyperlinktext

+ 
Benutzerpräferenz für die Textfarbe aktiver Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.

+ 
 

+ 
-moz-default-background-color

+ 
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Dokumenthintergrundfarbe.

+ 
 

+ 
-moz-default-color

+ 
{{Gecko_minversion_inline("5.0")}} Benutzerpräferenz für die Textfarbe.

+ 
-moz-hyperlinktext

+ 
Benutzerpräferenz für die Textfarbe nicht besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.

+ 
-moz-visitedhyperlinktext

+ 
Benutzerpräferenz für die Textfarbe besuchter Links. Sollte mit dem Standarddokumenthintergrund verwendet werden.

+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Colors', '#colorunits', '')}}{{Spec2('CSS4 Colors')}}rebeccapurple hinzugefügt.
{{SpecName('CSS3 Colors', '#colorunits', '')}}{{Spec2('CSS3 Colors')}}Systemfarben als veraltet markiert; SVG-Farben hinzugefügt; functionale Notationen rgba(), hsl() und hsla() hinzugefügt.
{{SpecName('CSS2.1', 'syndata.html#value-def-color', '')}}{{Spec2('CSS2.1')}}orange als Farbe und Systemfarben hinzugefügt.
{{SpecName('CSS1', '#color-units', '')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.color")}}

+
+
Siehe auch

+
+
    
+ 
  • Die {{cssxref("opacity")}} Eigenschaft, die es erlaubt, die Transparenz einer Farbe auf Elementebene zu definieren.
    • 
+ 
  • Die {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-shadow")}} und {{cssxref("box-shadow")}} Eigenschaften.
    • 
+

diff --git a/files/de/web/css/filter/index.html b/files/de/web/css/filter/index.html
new file mode 100644
index 0000000000..04901d5c3a
--- /dev/null
+++ b/files/de/web/css/filter/index.html
@@ -0,0 +1,1064 @@
+---
+title: filter
+slug: Web/CSS/filter
+tags:
+  - Benötigt Browserunterstützung
+  - CSS
+  - CSS Eigenschaft
+  - CSS Funktion
+  - Grafik
+  - Layout
+  - Referenz
+  - SVG
+  - SVG Filter
+  - Web
+translation_of: Web/CSS/filter
+---
+
{{ CSSRef() }}

+
+
{{ SeeCompatTable() }}

+
+
Übersicht

+
+
Die filter CSS Eigenschaft erlaubt es, Effekte wie Unschärfe oder Farbverschiebungen auf Elemente anzuwenden, bevor sie angezeigt werden. Filter werden normalerweise dazu benutzt, die Darstellung eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.

+
+
Im CSS Standard inbegriffen sind mehrere Funktionen, die vordefinierte Effekte ermöglichen. Es können auch Filter verwendet werden, die über SVG mit Hilfe des SVG Filter Elements angegeben wurden.

+
+
Hinweis: Ältere Versionen (4.0 bis einschließlich 9.0) des Internet Explorers unterstützten eine nicht standardisierte "filter" Eigenschaft, die mittlerweile missbilligt wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Angabe einer Funktion:

+
+
filter: <filter-function> [<filter-function>]* | none
+

+
+
Für eine Referenz zu einem SVG {{ SVGElement("filter") }} Element:

+
+
filter: url(svg-url#element-id)
+

+
+
Beispiele

+
+
Beispiele zur Benutzung der vordefinierten Funktionen. Siehe die jeweilige Funktion für ein spezifisches Beispiel.

+
+
.mydiv { filter: grayscale(50%) }
+
+/* Graut alle Bilder um 50% aus und macht sie um 10px unscharf */
+img {
+  filter: grayscale(0.5) blur(10px);
+}

+
+
Beispiele zur Benutzung der URL Funktion mit einer SVG Ressource.

+
+
.target { filter: url(#c1); }
+
+.mydiv { filter: url(commonfilters.xml#large-blur) }
+

+
+
Funktionen

+
+
Um die filter Eigenschaft zu verwenden, muss ein Wert für die folgenden Funktionen angegeben werden. Falls der Wert ungültig ist, gibt die Funktion none zurück. Falls nicht anders angegeben, akzeptieren Funktionen, die eine Wertangabe mit Prozentzeichen (wie z. B. 34%) akzeptieren, auch einen dezimalen Wert (wie z. B. 0.34).

+
+
url(url)

+
+
Die url() Funktion erlaubt die Angabe einer XML Datei, die einen SVG Filter definiert, und kann auch einen Anker zu einem bestimmten Element beinhalten.

+
+
filter: url(resources.svg#c1)
+

+
+
blur(radius)

+
+
Wendet eine Gaußsche Unschärfe auf das Ursprungsbild an. Der Radiuswert gibt die Standardabweichung der Gaußschen Funktion an, oder wie viele Pixel auf dem Bildschirm mit einander vermischt werden. Ein höherer Wert erzeugt daher eine stärkere Unschärfe. Falls kein Parameter angegeben wird, wird 0 verwendet. Der Parameter wird dabei als {{cssxref("<length>")}} angegeben, akzeptiert jedoch keine Prozentwerte.

+
+
filter: blur(5px)
+

+
+
+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
+    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
+  </filter>
+</svg>

+
+
{{EmbedLiveSample('blur_example','100%','236px','')}}

+
+
brightness(amount)

+
+
Wendet eine lineare Multiplikation auf das Ursprungsbild an, sodass es dunkler oder heller erscheint. Ein Wert von 0% erzeugt ein Bild, das komplett schwarz ist. Ein Wert von 100% lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte über 100% sind erlaubt und erzeugen hellere Ergebnisse. Falls der amount Parameter fehlt, wird ein Wert von 100% verwendet.

+
+
filter: brightness(0.5)

+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="brightness">
+    <feComponentTransfer>
+        <feFuncR type="linear" slope="[amount]"/>
+        <feFuncG type="linear" slope="[amount]"/>
+        <feFuncB type="linear" slope="[amount]"/>
+    </feComponentTransfer>
+  </filter>
+</svg>

+
+
+
+
{{EmbedLiveSample('brightness_example','100%','231px','')}}

+
+
contrast(amount)

+
+
Passt den Kontrast des Ursprungsbildes an. Ein Wert von 0% erzeugt ein Bild, dass komplett schwarz ist. Ein Wert von 100% lässt das Bild unverändert. Werte über 100% sind erlaubt und erzeugen Ergebnisse mit weniger Kontrast. Falls der amount Parameter fehlt, wird ein Wert von 100% verwendet.

+
+
filter: contrast(200%)
+

+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+  <filter id="contrast">
+    <feComponentTransfer>
+      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
+    </feComponentTransfer>
+  </filter>
+</svg>
+

+
+
+
+
{{EmbedLiveSample('contrast_example','100%','203px','')}}

+
+
drop-shadow(<shadow>)

+
+
Fügt dem Ursprungsbild einen Schlagschatteneffekt hinzu. Ein Schlagschatten ist dabei eigentlich eine unscharfe, versetzte Version der Alphamaske eines Bildes, die in einer bestimmten Farbe dargestellt wird und unterhalb des Bildes angezeigt wird. Die Funktion akzeptiert einen Parameter des Typs <shadow> (definiert in CSS3 Backgrounds), mit der Ausnahme, dass das Schlüsselwort inset nicht erlaubt ist. Diese Funktion ähnelt der verbreiteteren box-shadow Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen. Die Parameter des <shadow> Wertes lauten wie folgt:

+
+

+ 
<offset-x> <offset-y> (benötigt)

+ 
Dies sind die zwei {{cssxref("<length>")}} Werte, die den Schattenversatz angeben. <offset-x> gibt die horizontale Distanz an. Negative Werte positionieren den Schatten links von dem Element. <offset-y> gibt die vertikale Distanz an. Negative Werte positionieren den Schatten oberhalb des Elements. Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ Falls beide Werte 0 sind, wird der Schatten hinter dem Element platziert (und erzeugt möglicherweise einen Unschärfeeffekt, falls <blur-radius> und/oder <spread-radius> gesetzt sind).

+ 
<blur-radius> (optional)

+ 
Dies ist ein dritter {{cssxref("<length>")}} Wert. Je größer dieser Wert ist, desto größer ist die Unschärfe, d. h. der Schatten wird größer und unschärfer. Negative Werte sind nicht erlaubt. Falls nicht angegeben, wird 0 verwendet (der Schattenrand wird scharf dargestellt).

+ 
<spread-radius> (optional)

+ 
Dies ist ein vierter {{cssxref("<length>")}} Wert. Positive Werte erweitern den Schatten und lassen ihn größer erscheinen, negative Werte verkleinern den Schatten. Falls nicht angegeben, wird 0 verwendet (der Schatten hat die gleiche Größe wie das Element). 

+ Hinweis: WebKit und evtl. andere Browser unterstützen diesen vierten Wert nicht. Er wird nicht dargestellt, falls er angegeben wird.

+ 
<color> (optional)

+ 
Siehe {{cssxref("<color>")}} für mögliche Schlüsselwörter und Angaben.

+ Falls nicht angegeben, bestimmt der Browser die Farbe. In Gecko (Firefox), Presto (Opera bis Version 12) und Trident (Internet Explorer) wird der Wert der {{ cssxref("color") }} Eigenschaft verwendet. WebKit (Opera ab Version 15, Chrome) verwendet einen transparenten Schatten und ist daher nutzlos, falls <color> nicht angegeben wird.

+

+
+
filter: drop-shadow(16px 16px 10px black)

+
+
<svg height="0" xmlns="http://www.w3.org/2000/svg">
+ <filter id="drop-shadow">
+    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
+    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
+    <feFlood flood-color="[color]"/>
+    <feComposite in2="offsetblur" operator="in"/>
+    <feMerge>
+      <feMergeNode/>
+      <feMergeNode in="SourceGraphic"/>
+    </feMerge>
+  </filter>
+</svg>
+

+
+
+
+
{{EmbedLiveSample('shadow_example','100%','238px','')}}

+
+
grayscale(amount)

+
+
Konvertiert das Ursprungsbild in Graustufen. Der Wert von amount bestimmt den Anteil der Konvertierung. Ein Wert von 100% erzeugt ein komplett graues Ergebnis. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: grayscale(100%)

+
+
+
+
{{EmbedLiveSample('grayscale_example','100%','209px','')}}

+
+
hue-rotate(angle)

+
+
Wendet eine Farbtonrotation auf das Ursprungsbild an. Der Wert von angle gibt die Gradzahl um den Farbkreis an, um den die Ursprungsfarben verschoben werden. Ein Wert von 0deg lässt das Bild unverändert. Falls der angle Parameter fehlt, wird 0deg verwendet. Der Maximalwert ist 360deg.

+
+
filter: hue-rotate(90deg)

+
+
+
+
{{EmbedLiveSample('huerotate_example','100%','221px','')}}

+
+
invert(amount)

+
+
Invertiert die Ursprungsfarben des Ursprungsbildes. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 100% erzeugt ein komplett invertiertes Ergebnis. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: invert(100%)

+
+
+
+
{{EmbedLiveSample('invert_example','100%','407px','')}}

+
+
opacity(amount)

+
+
Fügt den Farben des Ursprungsbildes eine Transparenz hinzu. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 0% erzeugt ein komplett transparentes Ergebnis. Ein Wert von 100% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Dies ist equivalent zur Multiplikation der Ursprungsfarben mit amount. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet. Diese Funktion ist ähnlich zu der verbreiteteren opacity Eigenschaft; der Unterschied besteht darin, dass manche Browser für Filter Hardwarebeschleunigung für eine höhere Geschwindigkeit unterstützen.

+
+
filter: opacity(50%)

+
+
+
+
{{EmbedLiveSample('opacity_example','100%','210px','')}}

+
+
saturate(amount)

+
+
Sättigt das Ursprungsbild. Der Wert von amount gibt den Anteil der Konvertierung an. Ein Wert von 0% erzeugt ein komplett ungesättigtes Ergebnis. Ein Wert von 100% lässt das Bild unverändert. Andere Werte sind lineare Multiplikationen dieses Effekts. Werte für amount über 100% sind erlaubt und erzeugen übersättigte Ergebnisse. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: saturate(200%)

+
+
+
+
{{EmbedLiveSample('saturate_example','100%','332px','')}}

+
+
sepia(amount)

+
+
Konvertiert das Ursprungsbild in Sepiafarben. Der Wert von amount bestimmt den Anteil der Konvertierung. Ein Wert von 100% erzeugt ein komplett sepiafarbenes Ergebnis. Ein Wert von 0% lässt das Bild unverändert. Werte zwischen 0% und 100% sind lineare Multiplikationen dieses Effekts. Falls der amount Parameter nicht angegeben wird, wird 100% verwendet.

+
+
filter: sepia(100%)

+
+
+
+
{{EmbedLiveSample('sepia_example','100%','229px','')}}

+
+
Kombinierte Funktionen

+
+
Eine beliebige Anzahl an Funktionen kann kombiniert werden, um die Ausgabe zu verändert. Das folgende Beispiel verstärkt den Kontrast und die Helligkeit des Bildes.

+
+
filter: contrast(175%) brightness(3%)

+
+
+
+
{{EmbedLiveSample('combination_example','100%','209px','')}}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('Filters 1.0', '#FilterProperty', 'filter') }}{{ Spec2('Filters 1.0') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.filter")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-flow/index.html b/files/de/web/css/flex-flow/index.html
new file mode 100644
index 0000000000..7eca4d3ecb
--- /dev/null
+++ b/files/de/web/css/flex-flow/index.html
@@ -0,0 +1,64 @@
+---
+title: flex-flow
+slug: Web/CSS/flex-flow
+tags:
+  - CSS
+  - CSS Eigenschaften
+  - CSS Flexible Boxen
+  - Referenz
+translation_of: Web/CSS/flex-flow
+---
+
{{ CSSRef("CSS Flexible Boxes") }}

+
+
Summary

+
+
Die Kurzschreibweise flex-flow fasst die Eigenschaften {{cssxref("flex-direction")}} und {{cssxref("flex-wrap")}} zusammen.

+
+
{{cssinfo}}

+
+
Siehe Using CSS flexible boxes für mehr Information.

+
+
Syntax

+
+
{{csssyntax}}

+
+
Werte

+
+
Siehe flex-direction und flex-wrap.

+
+
Beispiele

+
+
element {
+  /* Main-axis is the block direction with reversed main-start and main-end. Flex items are laid out in multiple lines */
+  flex-flow: column-reverse wrap;
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
CSS Flexible Box Layout Module{{ Spec2('CSS3 Flexbox') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.flex-flow")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-grow/index.html b/files/de/web/css/flex-grow/index.html
new file mode 100644
index 0000000000..0a40c317de
--- /dev/null
+++ b/files/de/web/css/flex-grow/index.html
@@ -0,0 +1,82 @@
+---
+title: flex-grow
+slug: Web/CSS/flex-grow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/flex-grow
+---
+
{{ CSSRef("CSS Flexible Boxes") }}

+
+
Die  flex-grow CSS Eigenschaft gibt den Wachstumsfaktor eines flexiblen Elements in dem zur Verfügung stehenden Raum eines Flex Containers an. Wenn alle Schwesternelemente den gleichen flex-grow Wert haben, teilen sich diese Elemente den gleichen Platzanteil im Container auf. Andernfalls entscheidet der Platzanteil durch das Verhältnis, das sich aus den verschiedenen flex-grow Werten ergibt.

+
+
Verwendet wird flex-grow zusammen mit den anderen flex Eigenschaften {{cssxref("flex-shrink")}} und {{cssxref("flex-basis")}}. Im Regelfall wird durch die {{cssxref("flex")}} Kurzschrift sichergestellt, dass alle Werte gesetzt werden.

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+
+
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}

+
+
+
+
 

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
flex-grow: 3
+
+flex-grow: inherit
+

+
+
Werte

+
+

+ 
<number>

+ 
Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.

+

+
+
Beispiele

+
+
element {
+  flex-grow: 3;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
CSS Flexible Box Layout Module{{ Spec2('CSS3 Flexbox') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.flex-grow")}}

+
+
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-shrink/index.html b/files/de/web/css/flex-shrink/index.html
new file mode 100644
index 0000000000..7e741ec2d6
--- /dev/null
+++ b/files/de/web/css/flex-shrink/index.html
@@ -0,0 +1,75 @@
+---
+title: flex-shrink
+slug: Web/CSS/flex-shrink
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/flex-shrink
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die flex-shrink CSS Eigenschaft gibt den Schrumpffaktor eines Flexelements an.

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("flex-shrink")}}
+

+
+
flex-shrink: 2
+
+flex-shrink: inherit
+

+
+
Werte

+
+

+ 
<number>

+ 
Siehe {{cssxref("<number>")}}. Negative Werte sind ungültig.

+

+
+
Beispiele

+
+
element {
+  flex-shrink: 3;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Flexbox', '#flex-shrink', 'flex-shrink') }}{{ Spec2('CSS3 Flexbox') }} 

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.flex-shrink")}}

+
+
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/flex-wrap/index.html b/files/de/web/css/flex-wrap/index.html
new file mode 100644
index 0000000000..bb2e777f0d
--- /dev/null
+++ b/files/de/web/css/flex-wrap/index.html
@@ -0,0 +1,81 @@
+---
+title: flex-wrap
+slug: Web/CSS/flex-wrap
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - Referenz
+translation_of: Web/CSS/flex-wrap
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die flex-wrap CSS Eigenschaft legt fest, ob die Elemente in einem Flexbox-Container auf einer Linie liegen, oder bei bedarf auf mehrere Zeilen verteilt werden können.

+
+
{{cssinfo}}

+
+
Siehe die CSS flexible Boxen verwenden für mehr Informationen.

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("flex-wrap")}}
+

+
+
flex-wrap: nowrap
+flex-wrap: wrap
+flex-wrap: wrap-reverse
+
+flex-wrap: inherit
+

+
+
Werte

+
+
Die folgenden Werte können verwendet werden:

+
+

+ 
nowrap

+ 
Die flexiblen Elemente liegen alle in derselben Reihe, auch wenn dazu der Platz fehlt.

+ 
wrap

+ 
Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach unten).

+ 
wrap-reverse

+ 
Die flexiblen Elemente können sich wenn nötig innerhalb des Containers in mehrere Zeilen aufteilen (nach oben).

+

+
+
Beispiele

+
+
element {
+  flex-wrap: nowrap;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Flexbox', '#flex-wrap', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }} 

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.flex-wrap")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/float/index.html b/files/de/web/css/float/index.html
new file mode 100644
index 0000000000..2711d0d936
--- /dev/null
+++ b/files/de/web/css/float/index.html
@@ -0,0 +1,109 @@
+---
+title: float
+slug: Web/CSS/float
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/float
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die float Eigenschaft bestimmt, ob ein Element aus dem normalen Fluss herausgelöst werden soll und nachfolgende Inhalte auf der linken oder rechten Seite des gefloateten Elements platziert werden sollen.

+
+
    
+ 
  • Standardwert: none
    • 
+ 
  • Anwendbar auf: alle Elemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
+
Syntax

+
+
float:  left | right | none | inherit
+

+
+
Werte

+
+

+ 
none

+ 
Standardwert. Das Element wird nicht umflossen.

+ 
left

+ 
Das Element wird nach links gerückt und die Inhalte des umliegenden Elements (containing block) werden rechts vom Element angeordnet.

+ 
right

+ 
Das Element wird nach rechts gerückt und die Inhalte des umliegenden Elements (containing block) werden links vom Element angeordnet.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
Live Beispiel

+
+
<style type="text/css">
+  div { border: solid red;  max-width: 70ex; }
+  h4  { float: left;  margin: 0; }
+</style>
+
+<div>
+  <h4>HELLO!</h4>
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+  This is some text. This is some text. This is some text.
+</div>
+

+
+

+
HELLO!

+This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}{{Spec2('CSS Logical Properties')}}Adds the values inline-start and inline-end.
{{SpecName('CSS3 Box', '#float', 'float')}}{{Spec2('CSS3 Box')}}Lots of new values, not all clearly defined yet. Any differences in behavior, unrelated to new features, are expected to be unintentional; please report.
{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}{{Spec2('CSS2.1')}}No change
{{SpecName('CSS1', '#float', 'float')}}{{Spec2('CSS1')}}Initial definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.float")}}
+
+
Siehe auch

+
+
+
+
{{ languages( {"en": "en/CSS/float", "fr": "en/CSS/float", "es": "es/CSS/float", "pl": "pl/CSS/float"} ) }}

diff --git a/files/de/web/css/font-family/index.html b/files/de/web/css/font-family/index.html
new file mode 100644
index 0000000000..ccd539914f
--- /dev/null
+++ b/files/de/web/css/font-family/index.html
@@ -0,0 +1,185 @@
+---
+title: font-family
+slug: Web/CSS/font-family
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Schriftarten
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/font-family
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die font-family CSS Eigenschaft erlaubt es, eine priorisierte Liste von Schriftfamiliennamen und/oder generische Familiennamen für ein ausgewähltes Element anzugeben. Im Gegensatz zu den meisten anderen CSS Eigenschaften werden die Werte durch Komma getrennt, um zu kennzeichnen, dass sie Alternativen darstellen. Der Browser wählt die erste Schrift, die auf dem Computer installiert ist oder mittels der Informationen, die über eine {{cssxref("@font-face")}} At-Regel gegeben sind, heruntergeladen werden kann.

+
+
Webautoren sollten einer Schriftfamilienliste immer mindestens eine generische Familie hinzufügen, da es keine Garantie dafür gibt, dass eine bestimmte Schriftart auf dem Computer installiert ist oder über die {{cssxref("@font-face")}} At-Regel heruntergeladen werden kann. Die generische Schriftart erlaubt es dem Browser, falls nötig, eine akzeptable Ersatzschriftart auszuwählen.

+
+
Es ist oft vorteilhaft, die Kurzform Eigenschaft {{cssxref("font")}} zu verwenden, um font-size und andere Schrift bezogene Eigenschaften auf einmal zu setzen.

+
+
Hinweis: Die font-family Eigenschaft definiert eine Liste von Schriftarten, von der höchsten zur niedrigsten Priorität. Die Auswahl der Schriftart stoppt nicht einfach bei der ersten Schriftart in der Liste, die auf dem System des Benutzers installiert ist. Vielmehr findet die Auswahl der Schriftart pro Zeichen statt, so dass, falls eine verfügbare Schriftart ein bestimmtes Schriftzeichen nicht definiert, in den übrigen Schriftarten nach diesem Zeichen gesucht wird. Dies funktioniert jedoch nicht im Internet Explorer 6 oder früheren Versionen.

+

+Falls eine Schrift nur in bestimmten Stilen, Varianten oder Größen verfügbar ist, können diese Eigenschaften auch beeinflussen, welche Schriftart ausgewählt wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("font-family")}}
+

+
+
font-family: Gill Sans Extrabold, sans-serif
+font-family: "Goudy Bookletter 1911", sans-serif
+
+font-family: serif
+font-family: sans-serif
+font-family: monospace
+font-family: cursive
+font-family: fantasy
+
+font-family: inherit
+

+
+
Werte

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
<family-name>Der Name der Schriftfamilie. Zum Beispiel "Times" und "Helvetica" sind Schriftfamilien. Schriftfamiliennamen, die Leerzeichen enthalten, sollten von Anführungszeichen eingeschlossen werden.
<generic-name>
+    
Generische Schriftfamilien dienen als Fallback-Mechanismus, ein Mittel, um etwas von der Absicht des Stylesheet Autors zu erhalten für den Fall, wenn keine der angegebenen Schriftarten verfügbar sind. Generische Familiennamen sind Schlüsselwörter und dürfen nicht in Anführungszeichen eingeschlossen werden. Eine generische Schriftfamilie sollte die letzte Alternative in einer Liste von Schriftfamiliennamen sein.

+
+    

+     
serif

+     
Schriftzeichen haben abschließende Striche, ausgeweitete oder zugespitzte Enden oder serifenbetonte Enden.

+     Z. B.  Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif

+     
sans-serif

+     
Schriftzeichen haben gerade Strichenden.

+     Z. B. 'Trebuchet MS', 'Liberation Sans', 'Nimbus Sans L', sans-serif

+     
monospace

+     
Alle Schriftzeichen haben die gleiche Breite.

+     Z. B. "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace

+     
cursive

+     
Schriftzeichen in kursiven Schriftarten haben üblicherweise verbindende Striche oder andere kursive Charakteristiken, die über die von kursiven Schriftzügen hinausgehen. Die Schriftzeichen sind teilweise oder ganz verbunden und das Ergebnis ähnelt eher einer Handschrift als gedruckten Lettern.

+     
fantasy

+     
Fantasie Schriftarten sind überwiegend dekorative Schriftarten, die verspielte Darstellungen von Schriftzeichen beinhalten.

+    

+   

+
+
Gültige Schriftfamiliennamen

+
+
Schriftfamiliennamen müssen entweder in Anführungszeichen eingeschlossene Strings sein oder nicht angeführte als eine Aneinanderreihung von einem oder mehreren Bezeichnern. Das heißt dass in nicht angeführten Schriftfamiliennamen Interpunktionszeichen und Ziffern am Anfang jedes Zeichens Maskiert (escaped) werden müssen.

+
+
Beispielsweise sind die folgenden Angaben gültig:

+
+
font-family: Gill Sans Extrabold, sans-serif;
+font-family: "Goudy Bookletter 1911", sans-serif;

+
+
Die folgenden Angaben sind ungültig:

+
+
font-family: Goudy Bookletter 1911, sans-serif;
+font-family: Red/Black, sans-serif;
+font-family: "Lucida" Grande, sans-serif;
+font-family: Ahem!, sans-serif;
+font-family: test@foo, sans-serif;
+font-family: #POUND, sans-serif;
+font-family: Hawaii 5-0, sans-serif;

+
+
Beispiele

+
+
Beispiel 1

+
+
body     { font-family: "Gill Sans Extrabold", Helvetica, sans-serif }
+
+.receipt { font-family: Courier, "Lucida Console", monospace }
+

+
+
Beispiel 2

+
+
.exampleserif {
+    font-family: Times, "Times New Roman", Georgia, serif;
+}
+
+.examplesansserif {
+    font-family: Verdana, Arial, Helvetica, sans-serif;
+}
+
+.examplemonospace {
+    font-family: "Lucida Console", Courier, monospace;
+}
+
+.examplecursive {
+    font-family: cursive;
+}
+
+.examplefantasy {
+    font-family: fantasy;
+}
+

+
+
<div class="exampleserif">
+Dies ist ein Beispiel für eine Serifenschrift.
+</div>
+
+<div class="examplesansserif">
+Dies ist ein Beispiel für eine serifenlose Schrift.
+</div>
+
+<div class="examplemonospace">
+Dies ist ein Beispiel für eine nicht-proportionale Schrift.
+</div>
+
+<div class="examplecursive">
+Dies ist ein Beispiel für eine kursive Schrift.
+</div>
+
+<div class="examplefantasy">
+Dies ist ein Beispiel für eine Fantasieschrift.
+</div>

+
+
Live Beispiel

+
+
{{ EmbedLiveSample('Beispiel_2','600','120') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts', '#font-family-prop', 'font-family')}}{{Spec2('CSS3 Fonts')}}Keine wesentlichen Änderungen
{{SpecName('CSS2.1', 'fonts.html#propdef-font-family', 'font-family')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#font-family', 'font-familiy')}}{{Spec2('CSS1')}} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.font-family")}}
diff --git a/files/de/web/css/font-feature-settings/index.html b/files/de/web/css/font-feature-settings/index.html
new file mode 100644
index 0000000000..f04a5497a6
--- /dev/null
+++ b/files/de/web/css/font-feature-settings/index.html
@@ -0,0 +1,108 @@
+---
+title: font-feature-settings
+slug: Web/CSS/font-feature-settings
+tags:
+  - CSS
+  - CSS Fonts
+  - CSS Property
+  - Layout
+  - Reference
+  - Référence(2)
+translation_of: Web/CSS/font-feature-settings
+---
+
{{CSSRef}} {{SeeCompatTable}}

+
+
Zusammenfassung

+
+
Die Eigenschaft font-feature-settings ermöglicht die Kontrolle von erweiterten typografischen Eigenschaften in OpenType-Schriftarten.

+
+
Anmerkung: Wenn möglich sollte die Eigenschaft {{cssxref("font-variant")}} genutzt werden. Diese Eigenschaft wurde speziell für Fälle entwickelt, in denen es nicht möglich ist, eine OpenType-Eigenschaft zu aktivieren oder zu nutzen.

+

+Diese Eigenschaft sollte insbesondere nicht genutzt werden, um Kapitälchen zu aktivieren.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("font-feature-settings")}}
+

+
+
font-feature-settings: normal
+font-feature-settings: "smcp"
+font-feature-settings: "smcp" on
+font-feature-settings: "swsh" 2
+font-feature-settings: "smcp", "swsh" 2
+
+font-feature-settings: inherit
+

+
+
Werte

+
+

+ 
normal

+ 
Der Text wird mit Standardeinstellungen gesetzt.

+ 
<feature-tag-value>

+ 
Beim Rendern von Text wird die Liste der Tag-Wert-Paare an die Text-Layout-Engine übergeben um Eigenschaften zu aktivieren oder zu deaktivieren. Der Tag ist immer ein {{cssxref("<string>")}} aus 4 ASCII-Zeichen. Wenn eine andere Anzahl an Zeichen übergeben wird oder der Tag Zeichen außerhalb des Coderaumes von U+20 bis U+7E enthält, ist die komplette Eigenschaft ungültig.

+ Der Wert ist eine positive Ganzzahl, wobei die Schlüsselwörter on und off entsprechend für 1 und 0 stehen.  Wenn kein Wert übergeben wird, wird standardmäßig von 1 ausgegangen. Für nicht-boolsche OpenType-Eigenschaften (z.B. Alternative Stile) selektiert der Wert ein bestimmtes Zeichen, während er für boolsche Eigenschaften einen Schalter darstellt.

+

+
+
Beispiele

+
+
/* Kapitälchen aktivieren */
+.smallcaps { font-feature-settings: "smcp" on; }
+
+/* Groß- und Kleinbuchstaben zu Kapitälchen konvertieren (Zeichensetzung eingeschlossen) */
+.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
+
+/* Historische Formen aktivieren */
+.hist { font-feature-settings: "hist"; }
+
+/* Verbreitete Ligaturen deaktivieren (standardmäßig eingeschaltet) */
+.noligs { font-feature-settings: "liga" 0; }
+
+/* Nichtproportionale Ziffern (monospace) aktivieren */
+td.tabular { font-feature-settings: "tnum"; }
+
+/* Automatische Brüche aktivieren */
+.fractions { font-feature-settings: "frac"; }
+
+/* Das zweite geschwungene Zeichen nutzen */
+.swash { font-feature-settings: "swsh" 2; }
+
+/* Alternativen Zeichensatz Nr.7 nutzen */
+.fancystyle {
+  font-family: Gabriola; /* Verfügbar ab Windows 7 und Mac OS */
+  font-feature-settings: "ss07";
+}
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}{{Spec2('CSS3 Fonts')}} 

+
+
Browserkompatibilität

+
+{{Compat("css.properties.font-feature-settings")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/font-size/index.html b/files/de/web/css/font-size/index.html
new file mode 100644
index 0000000000..7a5592169c
--- /dev/null
+++ b/files/de/web/css/font-size/index.html
@@ -0,0 +1,327 @@
+---
+title: font-size
+slug: Web/CSS/font-size
+tags:
+  - CSS
+  - CSS Font
+  - CSS-Eigenschaft
+  - CSS-Schrift
+  - Reference
+translation_of: Web/CSS/font-size
+---
+
{{CSSRef}}

+
+
Die font-size-CSS-Eigenschaft spezifiziert die Schriftgöße. Eine Änderung der Schriftgröße kann die Größe anderer Partien beeinflussen, da sie dazu benutzt wird, den Wert der em- und ex-{{cssxref("<length>")}}-Einheiten zu berechnen.

+
+
/* <absolute-size>-Werte */
+font-size: xx-small;
+font-size: x-small;
+font-size: small;
+font-size: medium;
+font-size: large;
+font-size: x-large;
+font-size: xx-large;
+
+/* <relative-size>-Werte */
+font-size: smaller;
+font-size: larger;
+
+/* <length>-Werte */
+font-size: 12px;
+font-size: 0.8em;
+
+/* <percentage>-Werte */
+font-size: 80%;
+
+/* Globale Werte */
+font-size: inherit;
+font-size: initial;
+font-size: unset;
+

+
+
+
+
{{EmbedLiveSample("font-size", 1200, 180, "", "", "example-outcome-frame")}}

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die font-size-Eigenschaft kann auf zwei Weisen spezifiziert werden:

+
+
+
+
Werte

+
+

+ 
xx-small, x-small, small, medium, large, x-large, xx-large

+ 
Ein Satz von Schlüsselwörtern absoluter Größe, basierend auf der vom Benutzer festgelegten Schriftgröße (welche medium entspricht). Ähnlich der HTML-Tags <font size="1"> bis <font size="7">, bei denen die benutzerdefinierte Größe <font size="3"> entspricht.

+ 
larger, smaller

+ 
Größer oder kleiner als die Schriftgröße des Elternelements; grob das Verhältnis, das benutzt wird, um die obigen absoluten Schlüsselwörter zu unterscheiden.

+ 
<length-percentage>

+ 

+ 
Ein positiver {{cssxref("<length>")}}- oder {{cssxref("<percentage>")}}-Wert. Werden die Einheiten der <length>-Werte durch em oder ex spezifiziert, ist die Größe relativ definiert zur Schriftgröße des Elternelements des gefragten Elements. Zum Beispiel entspricht 0.5em der Hälfte der Schriftgröße des aktuellen Elternelements. Werden die Einheiten in rem spezifiziert, ist die Größe relativ definiert zur Schriftgröße des {{HTMLElement("html")}}-(Wurzel-)Elements.

+
+ 
<percentage>-Werte beziehen sich auf die Schriftgröße des Elternelements.

+ 

+

+
+
Am Besten werden Werte benutzt, die relativ zur benutzerdefinierten Schriftgröße stehen. Absolute Werte in Form von Längen mit Einheiten, außer em oder ex, sollten vermieden werden. Müssen trotzdem solche absoluten Werte benutzt werden, ist px anderen Einheiten vorzuziehen, weil seine Bedeutung nicht abhängig davon, was das Betriebssystem (meist fälschlicherweise) für die Bildschirmauflösung hält, variiert.

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Mögliche Ansätze

+
+
Es gibt einige verschiedene Arten, die Schriftgröße zu spezifizieren, in Form von Schlüsselwörtern oder numerischen Werten für Pixel oder ems. Je nachdem, was die Ansprüche einer Webseite sind, kann die richtige Methode gewählt werden.

+
+
Schlüsselwörter

+
+
Schlüsselwörter sind eine gute Möglichkeit die Größe von Schriften im Web festzulegen. Indem ein Schlüsselwort für die Schriftgröße des body-Elements festgelegt wird, ist es möglich überall auf der restlichen Webseite relative Schriftgrößen zu benutzen, was einen befähigt, auf einfache Weise die Schrift auf der ganzen Seite entsprechend zu vergrößern oder zu verkleinern.

+
+
Pixel

+
+
Das Festlegen der Schriftgröße in Pixel-Werten (px) ist eine gute Wahl, wenn Pixel-Genauigkeit gefordert ist. Ein px-Wert ist statisch und stellt eine Möglichkeit dar, die unabhängig von Betriebssystem und Browser ist und dem Browser unveränderlich mitteilt, die Buchstaben in genau der spezifizierten Höhe an Pixeln darzustellen. Das Ergebnis kann sich je nach Browser leicht unterscheiden, da diese eventuell verschiedene Algorithmen verwenden, um den selben Effekt zu erzielen.

+
+
Verschiedene Schriftgrößeneinstellungen können auch kombiniert werden. Zum Beispiel, wenn ein Elternelement 16px festlegt und sein Kindelement larger spezifiziert, dann wird das Kindelement größer dargestellt als das Elternelement auf der Seite.

+
+
Anmerkung: Die Schriftgröße in Pixeln festzulegen, ist nicht barrierefrei, weil der Benutzer infolge dessen die Schriftgröße nicht über den Browser ändern kann. Zum Beispiel möchten Benutzer mit Sehschwäche die Schriftgröße vielleicht viel größer einstellen als vom Web-Designer ausgewählt. Die Benutzung von Pixeln für Schriftgrößen sollte vermieden werden, wenn ein allumfassendes Design gefordert ist.

+
+
Ems

+
+
Eine weitere Möglichkeit, die Schriftgröße festzulegen, ist die Verwendung von em-Werten. Die Größe eines em-Wertes ist dynamisch. Beim Spezifizieren der font-size-Eigenschaft entspricht ein em der für das gefragte Elternelement festgelegten Schriftgröße. Wird die Schriftgröße nirgendwo anders auf der Seite festgelegt, dann gilt die vom Browser definierte Größe, die oft 16px entspricht. Demnach gilt im Normalfall 1em = 16px, also 2em = 32px. Wenn dem body-Element eine Schriftgröße von 20px zugewiesen wird, dann gilt 1em = 20px und 2em = 40px. Es ist zu beachten, dass der Wert 2 notwendigerweise ein Multiplikator der aktuellen em-Größe ist.

+
+
Um das em-Äquivalent für einen beliebigen benötigten Pixel-Wert zu berechnen, kann die folgende Formel benutzt werden:

+
+
em = gewünschter Pixel-Wert des Elements / Elternelementschriftgröße in Pixeln

+
+
Angenommen die Schriftgröße des Body der Seite entspricht 16px. Wenn die gewünschte Schriftgröße 12px ist, dann sollten 0.75em spezifiziert werden (da 12/16 = 0,75). Es verhält sich ähnlich, wenn eine Schriftgröße von 10px gewollt ist; dann sollte 0.625em spezifiziert werden (10/16 = 0,625) und für 22px sollten es 1.375em (22/16) sein.

+
+
Em ist eine sehr nützliche CSS-Einheit, da es seine Länge automatisch relativ zur vom Leser gewählten Schrift anpasst.

+
+
Ein wichtiger Hinweis: em-Werte können zu bisweilen auch extremen Steigerungen führen wie das folgende HTML und CSS zeigen:

+
+
html {
+  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
+}
+span {
+  font-size: 1.6em;
+}

+
+
<div>
+<span>Outer <span>inner</span> outer</span>
+</div>
+

+
+
Das Ergebnis ist:

+
+
{{EmbedLiveSample("Ems", 400, 40)}}

+
+
Angenommen, dass font-size vom Browser als 16px festgelegt wird, dann würden die Wörter "outer" mit 16px dargestellt, das Wort "inner" aber mit 25.6px. Das liegt daran, dass die Schriftgröße des inneren Spans 1.6em entspricht, was relativ zum Elternelement gilt, welches wiederum relativ zu dessen Elternelement steht. Dieses Verhalten wird auch compounding (Steigerung/Aufzinsung) genannt.

+
+
Rems

+
+
Rem-Werte wurden eingeführt, um das compunding-Problem zu umgehen. Rem-Werte sind relativ zum html-Wurzelelement, nicht zum Elternelement. Mit anderen Worten ermöglicht es, eine Schriftgröße in einer relativen Weise zu spezifizieren ohne durch das Elternelement beeinflusst zu werden und so das Compunding zu verhindern.

+
+
Das folgende CSS ist nahezu identisch mit dem vorherigen Beispiel. Die einzige Ausnahme ist, dass die Einheit nun rem ist.

+
+
html {
+  font-size: 62.5%; /* font-size 1em = 10px bei normaler Browser-Einstellung */
+}
+span {
+  font-size: 1.6rem;
+}
+

+
+
Anschließend wird dieses CSS auf das selbe HTML angewandt, das wie folgt aussieht:

+
+
<span>Outer <span>inner</span> outer</span>

+
+
{{EmbedLiveSample("Rems", 400, 40)}}

+
+
Bei diesem Beispiel erscheinen die Worte "outer inner outer" alle mit 16px (angenommen, dass die Schriftgröße des Browsers beim Standardwert von 16px verblieben ist).

+
+
Beispiele

+
+
Beispiel 1

+
+
/* Paragrafentext auf sehr groß setzen */
+p { font-size: xx-large }
+
+/* h1-(level 1 heading)-Text auf 2,5 mal die Größe
+ * des umliegenden Textes setzen */
+h1 { font-size: 250% }
+
+/* setzt in span-Tags eingeschlossenen Text auf 16px */
+span { font-size: 16px; }
+

+
+
Beispiel 2

+
+
.small {
+	font-size: xx-small;
+}
+.larger {
+	font-size: larger;
+}
+.point {
+	font-size: 24pt;
+}
+.percent {
+	font-size: 200%;
+}
+

+
+
<h1 class="small">small-H1</h1>
+<h1 class="larger">larger-H1</h1>
+<h1 class="point">24pt-H1</h1>
+<h1 class="percent">200%-H1</h1>

+
+
Live-Test

+
+
{{EmbedLiveSample('Beispiel_2','600','200')}}

+
+
Bemerkungen

+
+
Em- und ex-Einheiten in der {{Cssxref("font-size")}}-Eigenschaft verhalten sich relativ zur Schriftgröße des Elternelements (im Gegensatz zu allen anderen Einheiten, die relativ zur Schriftgröße des Elements sind). Das bedeutet, dass em-Einheiten und Prozentangaben das selbe als Wert für {{Cssxref("font-size")}} bewirken.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Fonts', '#font-size-prop', 'font-size')}}{{Spec2('CSS3 Fonts')}}Keine Veränderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-size')}}{{Spec2('CSS3 Transitions')}}Definiert font-size als animierbar.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-size', 'font-size')}}{{Spec2('CSS2.1')}}Keine Veränderung
{{SpecName('CSS1', '#font-size', 'font-size')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser-Kompatibilität

+
+{{Compat("css.properties.font-size")}}
diff --git a/files/de/web/css/font-style/index.html b/files/de/web/css/font-style/index.html
new file mode 100644
index 0000000000..02430dd746
--- /dev/null
+++ b/files/de/web/css/font-style/index.html
@@ -0,0 +1,225 @@
+---
+title: font-style
+slug: Web/CSS/font-style
+translation_of: Web/CSS/font-style
+---
+
{{CSSRef}}

+
+
Die CSS-Eigenschaft font-style legt fest, ob Text mit einem kursiven Schnitt der gewählten Schriftfamilie ({{cssxref("font-family")}}) dargestellt werden soll.

+
+
{{EmbedInteractiveExample("pages/css/font-style.html")}}

+
+
+
+
Syntax

+
+
font-style: normal;
+font-style: italic;
+font-style: oblique;
+font-style: oblique 10deg;
+
+/* Global values */
+font-style: inherit;
+font-style: initial;
+font-style: unset;
+

+
+
font-style akzeptiert ein einzelnes der nachfolgenden Schlüsselwörter, welchem im Falle von oblique ein Winkel folgen darf.

+
+
Werte

+
+

+ 
normal

+ 
Wählt einen Schriftschnitt mit nicht-kursiven Buchstaben.

+ 
italic

+ 
Wählt einen kursiven Schriftschnitt der Eigenschaft italic (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert oblique angewendet. Ist auch dies nicht möglich, wird die Schrägstellung von 14° durch den Browser erzeugt.

+ 
oblique

+ 
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten). Steht keiner zur Verfügung, wird stattdessen der Wert italic angewendet. Ist auch dies nicht möglich, wird eine Schrägstellung von 14° durch den Browser erzeugt.

+ 
oblique <angle>

+ 
Wählt einen kursiven Schriftschnitt der Eigenschaft oblique (siehe unten), dessen Buchstaben genau oder annähernd im Winkel <angle> schräggestellt sind. Üblicherweise werden bei der Suche nach passenden Schriftschnitten für Winkel ab 14° eher größere Werte gewählt, bis 13° eher kleinere (Details siehe font matching section).

+ 
Steht kein passender Schriftschnitt zur Verfügung, wird die Schrägstellung durch den Computer aus einem normalen Schriftschnitt erzeugt.

+ 
Der gültige Winkelbereich erstreckt sich von -90deg bis 90deg (einschließlich). Positive Werte bewirken eine Schrägstellung in Richtung Zeilenende, negative in Richtung Zeilenanfang.

+

+
+
italic gegenüber oblique

+
+
Die Werte italic und oblique scheinen auf den ersten Blick bei der Darstellung oftmals zu identischen Ergebnissen zu führen.

+
+
Während italic jedoch Schriftschnitte bezeichnet, die bereits kursiv entworfen wurden, umfasst oblique Schriftschnitte, die lediglich durch automatisierte Schrägstellung normaler Buchstaben derselben Familie erzeugt wurden („kursiviert“).

+ italic ist in der Regel die bessere Wahl, da die Form der Buchstaben und die Abstände der Buchstaben untereinander vom Schriftgestalter manuell festgelegt werden, was zu einer harmonischeren Textdarstellung führt.

+
+
Da beide Varianten sehr ähnlich sind, wird die jeweils andere verwendet, steht die gewählte Variante nicht zur Verfügung. Dieses Verhalten kann mit {{cssxref("font-synthesis")}} geändert werden.

+
+
Variable Schriftarten

+
+
Variable Schriftarten erlauben eine präzise Steuerung der Darstellung von kursivierten Schriftschnitten mit Hilfe des Werts <angle> im Anschluss an oblique.

+
+
Bei variablen Schriftarten nach TrueType- oder OpenType-Spezifikation wird die Schrägstellung bei oblique über die Eigenschaft "slnt"  realisiert, sowie italic mit einem Wert von 1 für die Eigenschaft  "ital"(siehe {{cssxref("font-variation-settings")}}).

+
+
Das nachstehende Beispiel benötigt einen Browser, der die Syntax nach CSS Fonts Level 4 versteht, d.h. die Angabe eines Winkels bei font-style: oblique.

+
+
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}

+
+
HTML

+
+

+
<header>
+    <input type="range" id="slant" name="slant" min="-90" max="90" />
+    <label for="slant">Slant</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+

+
+
CSS

+
+
/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
+and is used here under the terms of its license:
+https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16044/AmstelvarAlpha-VF.ttf');
+  font-family:'AmstelvarAlpha';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+}
+
+.container {
+  max-height: 150px;
+  overflow: scroll;
+}
+
+.sample {
+  font: 2rem 'AmstelvarAlpha', sans-serif;
+}
+
+

+
+
+
+
JavaScript

+
+
let slantLabel = document.querySelector('label[for="slant"]');
+let slantInput = document.querySelector('#slant');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  let slant = `oblique ${slantInput.value}deg`;
+  slantLabel.textContent = `font-style: ${slant};`;
+  sampleText.style.fontStyle = slant;
+}
+
+slantInput.addEventListener('input', update);
+
+update();
+

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
+
+
.normal {
+  font-style: normal;
+}
+
+.italic {
+  font-style: italic;
+}
+
+.oblique {
+  font-style: oblique;
+}

+
+
{{ EmbedLiveSample('Font_styles') }}

+
+
Barrierefreiheit

+
+
Längere Abschnitte in kursiver Schrift können für Menschen mit einer Lesestörung (Legasthenie oder Dyslexie) schwer bis gar nicht zu erfassen sein. Kursive Schrift sollte deshalb nur als Hervorhebung einzelner Stellen verwendet werden.

+
+
+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}Fügt die Möglichkeit einer Winkelangabe für oblique hinzu.
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Keine Änderung
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Erste Definition

+
+
{{cssinfo}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.font-style")}}

diff --git a/files/de/web/css/font-variant/index.html b/files/de/web/css/font-variant/index.html
new file mode 100644
index 0000000000..19f2f0268d
--- /dev/null
+++ b/files/de/web/css/font-variant/index.html
@@ -0,0 +1,116 @@
+---
+title: font-variant
+slug: Web/CSS/font-variant
+tags:
+  - CSS
+  - CSS Eigenschaften
+  - CSS Schriften
+  - NeedsLiveSample
+  - Referenz
+translation_of: Web/CSS/font-variant
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS-Eigenschaft font-variant erlaubt die Darstellung der Schrift in Kapitälchen, Kleinbuchstaben in der Form von Großbuchstaben.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("font-variant")}}

+
+
font-variant: normal;
+font-variant: small-caps;
+font-variant: common-ligatures small-caps;
+
+font-variant: inherit;
+font-variant: initial;
+font-variant: unset;
+

+
+
Werte

+
+

+ 
normal

+ 
Normale Schrift.

+ 
small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, titling-caps

+ 
Stellt die Schrift in verschiedenen Arten von Kapitälchen dar, entsprechend {{cssxref("font-variant-caps")}}.

+ Falls dies von der Schriftart nicht unterstützt wird, stellt Gecko den Effekt nach, indem die Kleinbuchstaben durch verkleinerte Grossbuchstaben ersetzt werden.

+

+
+

+
Der Wert small-caps hat in einigen Sprachen weitergehende Auswirkungen:

+
+
    
+ 
  • In Turksprachen (wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), Tatarisch (tt) und Baschkirisch (ba)), gibt es zwei verschiedene Buchstaben i, einen mit und einen ohne Punkt, und somit auch zwei verschiedene Buchstabenpaare: i/İ und ı/I.
    • 
+ 
  • Im Deutschen (de) wird das ß zu SS.
    • 
+ 
  • Im Griechischen (el) verlieren Vokale ihren Akzent, wenn sie großgeschrieben sind (ά/Α), eine Ausnahme ist Eta (ή/Ή). Auch Diphthongen mit einem Akzent im ersten Vokal verliern diesen, dafür erhält der zweite Vokal einen (άι/ΑΪ).
    • 
+

+
+
Die Sprache wird in HTML mit dem Attribut  lang und in XML mit xml:lang definiert.

+
+
Diese spezifischen Anpassungen werden nicht von allen Browsern unterstützt, siehe Browserkompatibilität.

+

+
+
Beispiel

+
+
HTML

+
+
<p class="normal">Firefox rocks!</p>
+<p class="small">Firefox rocks!</p>
+

+
+
CSS

+
+
p.normal {
+  font-variant: normal;
+}
+p.small {
+  font-variant: small-caps;
+}
+

+
+
Result

+
+
{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/font-variant') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Fonts', '#propdef-font-variant', 'font-variant')}}{{Spec2('CSS3 Fonts')}}Sammeleigenschaft für font-variant-* (in diesem Artikel noch nicht beschrieben).
{{SpecName('CSS2.1', 'fonts.html#propdef-font-variant', 'font-variant')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-variant', 'font-variant')}}{{Spec2('CSS1')}}

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.font-variant")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("text-transform")}}
    • 
+

diff --git a/files/de/web/css/font-weight/index.html b/files/de/web/css/font-weight/index.html
new file mode 100644
index 0000000000..bff759e976
--- /dev/null
+++ b/files/de/web/css/font-weight/index.html
@@ -0,0 +1,276 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+translation_of: Web/CSS/font-weight
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS-Eigenschaft {{Cssxref("font-weight")}} definiert die Stärke der Schrift. Einige Schriftarten sind jedoch nicht in allen Werten verfügbar und unterstützen nur die Werte normal und bold.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("font-weight")}}

+
+
font-weight: normal
+font-weight: bold
+
+font-weight: lighter
+font-weight: bolder
+
+font-weight: 100
+font-weight: 200
+font-weight: 300
+font-weight: 400
+font-weight: 500
+font-weight: 600
+font-weight: 700
+font-weight: 800
+font-weight: 900
+
+font-weight: inherit

+
+
Werte

+
+

+ 
normal

+ 
Normale Stärke, entspricht 400.

+ 
bold

+ 
Fette Schrift, entspricht 700.

+ 
lighter

+ 
Eine Stufe dünner als das Elternelement (siehe Die Bedeutung relativer Angaben unten).

+ 
bolder

+ 
Eine Stufe fetter als das Elternelement (siehe Die Bedeutung relativer Angaben unten).

+ 
<number>

+ 
Eine Zahl ({{cssxref("<number>")}}) zwischen 1 und 1000 (einschließlich). Größere Werte stehen für eine fettere oder gleich fette Darstellung als kleinere Werte.

+

+
+
Frühere Spezifikationen erlaubten für font-weight nur die Schlüsselworte sowie die Werte 100 bis 1000 in Hunderterschritten. Nicht-variable Schriftarten können nur mit diesen Werten arbeiten, feinere Abstimmungen werden jedoch mit den festgelegten Werte angenähert.

+
+
Die Spezifikation CSS Fonts Level 4 nimmt variable Schriftarten im Format TrueType und OpenType auf. Mit diesen sind grundsätzlich beliebig feine Abstimmungen möglich.

+
+
Näherungsverfahren

+
+
Ist die gewählte Stärke nicht verfügbar, bestimmen die nachfolgenden Schritte die Darstellung:

+
+
    
+ 
  • Liegt die gewünschte Stärke zwischen 400 und 500 (einschließlich):
+  
      
+   
    1. Verwende die erste Stärke, die größer als die gewünschte, aber kleiner als 500 ist.
      2. 
+   
    2. Ist keine verfügbar, verwende die erste Stärke die kleiner als die gewünschte ist.
      3. 
+   
    3. Ist keine verfügbar, verwende die erste Stärke größer als 500.
      4. 
+  
    
+ 
    • 
+ 
  • Liegt die gewünschte Stärke unter 400, verwende die erste Stärke kleiner als die gewünschte. Ist keine verfügbar, verwende die erste Stärke größer als die gewünschte.
    • 
+ 
  • Liegt die gewünschte Stärke über 500, verwende die erste Stärke größer als die gewünschte. Ist keine verfügbar, verwende die erste Stärke kleiner als die gewünschte.
    • 
+

+
+
Die Bedeutung relativer Angaben

+
+
Bei der Angabe von lighter und bolder bestimmt die nachfolgende Tabelle die tatsächliche Schriftstärke. Zu beachten ist, dass hierbei nur vier Abstufungen verfügbar sind, fein (100), normal (400), fett (700) und schwarz (900).

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Gegebenbolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700

+
+
Zuordnung von Namen und Werten

+
+
Die Werte 100 bis 900 entsprechen ungefähr den nachfolgenden Bezeichnungen (siehe OpenType-Spezifikation und Wikipedia-Artikel zur Schriftstärke):

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
WertDeutschEnglisch
100feinThin (Hairline)
200extraleichtExtra Light (Ultra Light)
300leichtLight
400normalNormal (Regular)
500mediumMedium
600halbfettSemi Bold (Demi Bold)
700fettBold
800extrafettExtra Bold (Ultra Bold)
900schwarzBlack (Heavy)
950extraschwarzExtra Black (Ultra Black)

+
+
Variable Schriftarten

+
+
Die meisten Schriftarten stellen nur einige festgelegte Breiten zur Verfügung. Variable Schriftarten unterstützen hingegen eine Vielzahl von Breiten in mehr oder weniger feiner Abstufung.

+
+
Bei variablen Schriftarten vom Typ TrueType und OpenType korrespondiert deren Eigenschaft "wght" mit der CSS-Eigenschaft font-weight und wird von Browsern – sofern unterstützt –  entsprechend eingesetzt.

+
+
Beispiel

+
+
<p>
+  Alice fing an sich zu langweilen; sie saß schon
+  lange bei ihrer Schwester am Ufer und hatte nichts
+  zu tun. Das Buch, das ihre Schwester las, gefiel
+  ihr nicht, denn es waren weder Bilder noch Gespräche
+  darin. »Und was nützen Bücher,« dachte Alice,
+  »ohne Bilder und Gespräche?«
+</p>
+
+<div>Ich bin breiter.<br/>
+  <span>Ich bin schmaler.</span>
+</div>
+

+
+
/* Absatz soll breiter sein. */
+p {
+  font-weight: bold;
+}
+
+/* Der Text im div soll zwei Schritte breiter
+   als normal sein, aber nicht so breit wie
+   ein normales breit (bold). */
+div {
+ font-weight: 600;
+}
+
+/* Der Text im span soll einen Schritt schmaler
+   sein als jener seines Elternelements. */
+span {
+  font-weight: lighter;
+}

+
+
{{EmbedLiveSample("Beispiele","400","300")}}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Keine Änderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}font-weight ist animierbar
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.font-weight")}}

diff --git a/files/de/web/css/font/index.html b/files/de/web/css/font/index.html
new file mode 100644
index 0000000000..6e0fecf56b
--- /dev/null
+++ b/files/de/web/css/font/index.html
@@ -0,0 +1,176 @@
+---
+title: font
+slug: Web/CSS/font
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/font
+---
+
{{CSSRef}}

+
+
Die font Eigenschaft hat zwei unterschiedliche Verwendungszwecke:

+
+
    
+ 
  1. Die font Eigenschaft kann als Kurzform für die Eigenschaften font-style, font-variant, font-weight, font-size, line-height und font-family dienen und setzt dabei, wie bei jeder Kurzform, die einzelnen Eigenschaften auf ihre Standardwerte zurück, wenn nichts weiter angegeben wird, oder
    2. 
+ 
  2. die jeweilige Schrift eines Elementes kann auf eine Systemschriftart festlegt werden. Diese Systemschriftarten können jedoch nur über die font Eigenschaft gesetzt werden und nicht etwa über die font-family Eigenschaft, sodass font nicht nur als eine Kurznotation von verschiedenen Schrift-Eigenschaften anzusehen ist.
    3. 
+

+
+
Außerdem ist zu beachten, dass font keine weiteren Eigenschaften wie etwa font-stretch oder font-size-adjust mit einschließt und font-size-adjust dennoch auf den Standardwert (normal) zurückgesetzt wird, wenn die font Eigenschaft notiert wird.

+ Das Festlegen von font-size sowie font-family ist verpflichtend, sonst wird die Anweisung komplett ignoriert.

+
+
    
+ 
  • Standardwert: siehe einzelne Eigenschaften
    • 
+ 
  • Anwendbar auf: alle Elemente
    • 
+ 
  • Vererbbar: Ja
    • 
+ 
  • Prozentwerte: erlaubt für font-size und line-height
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: siehe einzelne Eigenschaften
    • 
+

+
+
Syntax

+
+
[
+  [ <font-style> || <font-variant> || <font-weight> ]?
+  <font-size>
+  [ / <line-height> ]?
+  <font-family>
+]
+| caption | icon | menu | message-box | small-caption | status-bar
+| -moz-window | -moz-desktop | -moz-workspace | -moz-document | -moz-info
+| -moz-dialog | -moz-button | -moz-pull-down-menu | -moz-list | -moz-field
+| inherit

+
+
Werte

+
+
Wird font als Kurzform verwendet, siehe einzelne Eigenschaften für die unterschiedlichen Werteangaben.

+
+
Werte für System-Fonts

+
+

+ 
caption

+ 
Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird.

+ 
icon

+ 
Schrift, die zur Beschriftung von Icons verwendet wird.

+ 
menu

+ 
Schrift die in Menüs benutzt wird.

+ 
message-box

+ 
Schrift die in Dialogboxen verwendet wird.

+ 
small-caption

+ 
Schrift die für kleine Kontrollelemente benutzt wird.

+ 
status-bar

+ 
Schrit die in Statusleisten benutzt wird.

+

+
+
Mozilla Erweiterungen für System-Fonts

+
+

+ 
-moz-window

+ 
Schrift, die für den Inhalt in einem Fenster verwendet wird.

+ 
-moz-desktop

+ 
Schrift, die auf dem Desktop benutzt wird.

+ 
-moz-workspace

+ 
Schrift, die für ein Arbeitsplatz-Fenster verwendet wird.

+ 
-moz-document

+ 
Schrift, die für den Inhalt eines Dokumentes benutzt wird.

+ 
-moz-dialog

+ 
Schrift die in Dialogboxen verwendet wird (wie message-box).

+ 
-moz-button

+ 
Schrift, die für Beschriftungen von Kontrollelementen (Buttons, Drop-Downs, etc.) verwendet wird (wie caption).

+ 
-moz-pull-down-menu

+ 
Schrift, die für Aufklapp-Menüs benutzt wird.

+ 
-moz-list

+ 
Schrift, die in Listenmenüs verwendet wird.

+ 
-moz-field

+ 
Schrift, die in Textfeldern (z.B. input) verwendet wird.

+ 
-moz-info

+ 
?

+

+
+
Beispiele

+
+
Link zum Live Beispiel

+
+
Beispiel 1

+
+
/* Setze die Schriftgröße auf 12px und die Zeilenhöhe auf 14px, sowie die Schriftart auf sans-serif */
+p { font: 12px/14px sans-serif }
+

+
+
Beispiel 2

+
+
/* Setze die Schriftgröße auf 80% des Elternelements und setze die Schriftart auf sans-serif */
+p { font: 80% sans-serif }
+
+/* Hat den gleichen Effekt wie: */
+p {
+  font-family: sans-serif;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: 600;
+  font-size: 80%;
+  line-height: normal;
+}
+

+
+
Beispiel 3

+
+
/* Setze die Schriftstärke auf fett, die Textneigung auf kursiv, die Schriftgröße auf groß,
+und die Schriftart auf serif. */
+p { font: bold italic large serif }
+

+
+
Beispiel 4

+
+
/* Benutze die gleiche Schriftart wie die Statusleiste des Fensters. */
+p { font: status-bar }
+

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Version
KurznotationSystemschriften
Internet Explorer3.0-4.04.0-5.5
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.56.0
Safari (WebKit)1.0 (85)1.0 (85)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/frequency/index.html b/files/de/web/css/frequency/index.html
new file mode 100644
index 0000000000..799e3fc5e3
--- /dev/null
+++ b/files/de/web/css/frequency/index.html
@@ -0,0 +1,111 @@
+---
+title: 
+slug: Web/CSS/frequency
+translation_of: Web/CSS/frequency
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der CSS Datentyp <frequency> steht für eine Frequenz, wie sie bspw. bei Audio Inhalten gebraucht wird. Der Wert setzt sich susammen aus einer {{cssxref("<number>")}}, gefolgt von einer Einheit. Dazwischen darf kein Leerzeichen sein.

+
+
Die folgenden Einheiten können gewählt werden:

+
+

+ 
Hz

+ 
Für eine Frequenz in Hertz.

+ 
kHz

+ 
Für eine Frequenz in Kilohertz.

+

+
+
Alle Einheiten können auch den Wert 0 (0kHz oder 0Hz) annehmen, welcher unabhängig der Einheit immer dasselbe Ergebnis erzielt. Ein Wert ohne angabe einer Einheit (0)  ist nicht zulässig.

+
+
Beispiele

+
+
Gültige Werte:

+
+
12Hz        Positive integer.
+-456kHz     Negative integer.
+4.3Hz       Non-integer.
+14KhZ       The unit is case-insensitive, though non-SI capitalization is not recommended.
++0Hz        Zero, with a leading + and the unit.
+-0kHz       Zero, with a leading - and the unit (Though strange, this is an allowed value).
+

+
+
Ungültige Werte:

+
+
12.0        This is a <number>, not an <frequency>, it must have a unit.
+7 Hz        No space is allowed between the <number> and the unit.
+0           Zero values can be written without a unit only if there are <length> values, not <frequency>.
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', '#frequency', '<frequency>') }}{{ Spec2('CSS3 Values') }} 

+
+
Browser Kompatibilität

+
+
{{ CompatibilityTable() }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}} [*]{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+
[*] Einige Versionen von Opera unterstützten den Datentyp teilweise in einer veralteten Spezifikation.

diff --git a/files/de/web/css/gradient/index.html b/files/de/web/css/gradient/index.html
new file mode 100644
index 0000000000..dcec7d40b2
--- /dev/null
+++ b/files/de/web/css/gradient/index.html
@@ -0,0 +1,91 @@
+---
+title: 
+slug: Web/CSS/gradient
+tags:
+  - CSS
+  - CSS Datentyp
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/gradient
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <gradient> CSS Datentyp beschreibt ein {{cssxref("<image>")}}, das aus einem progressiven Verlauf zwischen zwei oder mehreren Farben besteht. Ein CSS Farbverlauf ist kein {{cssxref("<color>")}} Wert, aber ein Bild ohne innere Maße; das bedeutet, es hat weder eine natürliche oder bevorzugte Größe, noch ein bevorzugtes Seitenverhältnis. Seine konkrete Größe passt sich dem Element an, dem es zugewiesen wurde.

+
+
Es gibt drei Arten von Farbverläufen:

+
+
    
+ 
  • Lineare Farbverläufe, erzeugt durch die {{cssxref("linear-gradient()")}} Funktion, wo die Farbe weich entlang einer imaginären Linie verläuft.
+
+  
+
+  
    body {
+background: -moz-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -webkit-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -ms-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: -o-linear-gradient(left,red,orange,yellow, green, blue,indigo,violet);
+background: linear-gradient(to right,red,orange,yellow, green, blue,indigo,violet);
+}
    
+
+  
    {{EmbedLiveSample('linear-gradient', 600, 20)}}
    
+ 
    • 
+ 
  • Radiale Farbverläufe, erzeugt durch die {{cssxref("radial-gradient()")}} Funktion. Je weiter sich ein Punkt vom Ursprung entfernt befindet, desto weiter entfernt ist er von der Originalfarbe.
+  
+
+  
    body {
+background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255)) repeat scroll 0% 0% transparent;
+background: radial-gradient(red, yellow, rgb(30, 144, 255));
+}
+
    
+
+  
    {{EmbedLiveSample('radial-gradient', 600, 20)}}
    
+ 
    • 
+ 
  • Wiederholende Farbverläufe, welche lineare oder radiale Farbverläufe fester Größe sind, die sich solange wiederholen bis die gesamte Box gefüllt ist.
+  
+
+  
    body {
+background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);
+background: repeating-linear-gradient(to top left, red, red 5px, white 5px, white 10px);
+}  
    
+
+  
    {{EmbedLiveSample('repeating-gradient', 600, 20)}}
    
+ 
    • 
+

+
+
Wie in allen Fällen, in denen zwischen Farben interpoliert wird, werden Farbverläufe im alpha-vormultiplizierten Farbraum berechnet. Dies verhindert unerwartete Grauschattierungen, wenn sowohl Farbe als auch Deckkraft variieren.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Images', '#gradients', '<gradient>')}}{{Spec2('CSS3 Images')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Jeder Farbverlaufstyp hat eine unterschiedliche Kompatibilitätsmatrix. Bitte daher die individuellen Artikel lesen.

+
+
Siehe auch

+
+
    
+ 
  • Farbverläufe in CSS, {{cssxref("linear-gradient()")}}, {{cssxref("radial-gradient()")}}, {{cssxref("repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient()")}}
    • 
+

diff --git a/files/de/web/css/grid-gap/index.html b/files/de/web/css/grid-gap/index.html
new file mode 100644
index 0000000000..8e2956013f
--- /dev/null
+++ b/files/de/web/css/grid-gap/index.html
@@ -0,0 +1,177 @@
+---
+title: grid-gap
+slug: Web/CSS/grid-gap
+translation_of: Web/CSS/gap
+---
+
grid-gap  ist die shorthand CSS Eigenschaft für  {{cssxref("grid-row-gap")}} und {{cssxref("grid-column-gap")}} , welche die Spalten (gutter) zwischen Rasterreihen und Rasterspalten festlegt.

+
+
/* Ein <Länge> Wert */
+grid-gap: 20px;
+grid-gap: 1em;
+grid-gap: 3vmin;
+grid-gap: 0.5cm;
+
+/* Ein <Prozent> Wert */
+grid-gap: 16%;
+grid-gap: 100%;
+
+/* Zwei <Länge> Werte */
+grid-gap: 20px 10px;
+grid-gap: 1em 0.5em;
+grid-gap: 3vmin 2vmax;
+grid-gap: 0.5cm 2mm;
+
+/* Ein or zwei <Prozent> Werte */
+grid-gap: 16% 100%;
+grid-gap: 21px 82%;
+
+/* Globale Werte */
+grid-gap: inherit;
+grid-gap: initial;
+grid-gap: unset;
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Dieser Eigenschaft wird ein Wert für <'grid-row-gap'> zugeordnet, gefolgt von einem optionalen Wert für <'grid-column-gap'>. Falls <'grid-column-gap'> ausgelassen wird, wird diesem der gleiche Wert zugeordnet wie <'grid-row-gap'>.

+
+
<'grid-row-gap'> und <'grid-column-gap'> werden jeweils angegeben als <Länge> or als <Prozent>.

+
+
Werte

+
+

+ 
<Länge>

+ 
Gibt die Breite der Spalte an, welche die Grid-Linien trennt.

+ 
<Prozent>

+ 
Ist die prozentuale Breite der Lücke zwischen zwei Rasterlinien im Verhältnis zu der Gesamtgröße des Elements.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML Inhalt

+
+
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS Inhalt

+
+
#grid {
+  display: grid;
+  height: 200px;
+  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
+  grid-gap: 20px 5px;
+}
+
+#grid > div {
+  background-color: lime;
+}
+

+
+
{{EmbedLiveSample("Example", "100%", "200px")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Grid", "#propdef-grid-gap", "grid-gap")}}{{Spec2("CSS3 Grid")}}Erste Definition

+
+
Browserkompatibilität

+
+
 

+
+
+
+
{{Compat("css.properties.grid-gap")}}

+
+
 

+
+
Siehe auch

+
+
+
+
diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html
new file mode 100644
index 0000000000..57ceda4481
--- /dev/null
+++ b/files/de/web/css/grid-template-areas/index.html
@@ -0,0 +1,194 @@
+---
+title: grid-template-areas
+slug: Web/CSS/grid-template-areas
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Grid
+  - CSS Property
+  - Reference
+  - Referenz
+translation_of: Web/CSS/grid-template-areas
+---
+
Die grid-template-areas CSS Eigenschaft spezifiziert benannte {{glossary("grid areas")}}.

+
+
{{EmbedInteractiveExample("pages/css/grid-template-areas.html")}}

+
+
+
+
Diese areas sind nicht mit einem bestimmten grid item assoziiert, sondern können von den grid-placement Eigenschaften {{cssxref("grid-row-start")}}, {{cssxref("grid-row-end")}}, {{cssxref("grid-column-start")}}, {{cssxref("grid-column-end")}}, und ihren Kurzformen  {{cssxref("grid-row")}}, {{cssxref("grid-column")}}, und {{cssxref("grid-area")}} referenziert werden.

+
+
Syntax

+
+
/* Keyword value */
+grid-template-areas: none;
+
+/* <string> values */
+grid-template-areas: "a b";
+grid-template-areas: "a b b"
+                     "a c d";
+
+/* Global values */
+grid-template-areas: inherit;
+grid-template-areas: initial;
+grid-template-areas: unset;
+

+
+
Werte

+
+

+ 
none

+ 
Der grid container definiert keine benannten grid areas.

+ 
{{cssxref("<string>")}}+

+ 
Für jeden seperaten String wird eine Reihe, und für jede Zelle in dem String wird eine Spalte erstellt. Mehrere benannte Zelltokens innerhalb und zwischen den Reihen sind eine einzelne benannte grid area welche die entsprechenden grid Zellen überspannt. Wenn diese Zellen kein Quader formen ist de Deklaration ungültig.

+

+
+
Formaler Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+

+ 
HTML

+

+
+
<section id="page">
+  <header>Header</header>
+  <nav>Navigation</nav>
+  <main>Main area</main>
+  <footer>Footer</footer>
+</section>

+
+
CSS

+
+
#page {
+  display: grid;
+  width: 100%;
+  height: 250px;
+  grid-template-areas: "head head"
+                       "nav  main"
+                       "nav  foot";
+  grid-template-rows: 50px 1fr 30px;
+  grid-template-columns: 150px 1fr;
+}
+
+#page > header {
+  grid-area: head;
+  background-color: #8ca0ff;
+}
+
+#page > nav {
+  grid-area: nav;
+  background-color: #ffa08c;
+}
+
+#page > main {
+  grid-area: main;
+  background-color: #ffff64;
+}
+
+#page > footer {
+  grid-area: foot;
+  background-color: #8cffa0;
+}
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Example", "100%", "250px")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid-template-areas", "grid-template-areas")}}{{Spec2("CSS3 Grid")}}Ursprüngliche Definition

+
+
{{cssinfo}}

+
+
Browser kompatibilität

+
+
 

+
+
+
+
{{Compat("css.properties.grid-template-areas")}}

+
+
 

+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template")}}
    • 
+ 
  • Grid Layout Guide: Grid template areas
    • 
+ 
  • Video Tutorial: Grid Template Areas
    • 
+

+
+
diff --git a/files/de/web/css/grid/index.html b/files/de/web/css/grid/index.html
new file mode 100644
index 0000000000..2dc160fe34
--- /dev/null
+++ b/files/de/web/css/grid/index.html
@@ -0,0 +1,184 @@
+---
+title: grid
+slug: Web/CSS/grid
+tags:
+  - CSS
+  - CSS-Eigenschaft
+  - CSS-Raster
+  - Referenz
+translation_of: Web/CSS/grid
+---
+
Zusammenfassung

+
+
Die grid-CSS-Eigenschaft ist eine Kurzschrift-Eigenschaft, die alle der expliziten Gittereigenschaften ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}} und {{cssxref("grid-template-areas")}}) setzt, alle impliziten Gittereigenschaften ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}} und {{cssxref("grid-auto-flow")}}) sowie die Zwischenabstandseigenschaften ({{cssxref("grid-column-gap")}} und {{cssxref("grid-row-gap")}}) in einer einfachen Deklaration.

+
+
Hinweis: Sie können nur die expliziten oder die impliziten Rastereigenschaften in einer einfachen grid-Deklaration spezifizieren. Die Subeigenschaften, die Sie nicht spezifizieren, werden auf ihre Initialwerte gesetzt, wie für Kurzschrift üblich. Außerdem werden die Zwischenabstandseigenschaften durch diese Kurzschrift ebenfalls zurückgesetzt, obwohl diese nicht einmal gesetzt werden können.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Werte für <'grid-template'> */
+grid: none;
+grid: "a" 100px "b" 1fr;
+grid: [linename1] "a" 100px [linename2];
+grid: "a" 200px "b" min-content;
+grid: "a" minmax(100px, max-content) "b" 20%;
+grid: 100px / 200px;
+grid: minmax(400px, min-content) / repeat(auto-fill, 50px);
+
+/* Werte für <'grid-template-rows'> /
+   [ auto-flow && dense? ] <'grid-auto-columns'>? */
+grid: 200px / auto-flow;
+grid: 30% / auto-flow dense;
+grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
+grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;
+
+/* Werte für [ auto-flow && dense? ] <'grid-auto-rows'>? /
+   <'grid-template-columns'> */
+grid: auto-flow / 200px;
+grid: auto-flow dense / 30%;
+grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
+grid: auto-flow dense 40% / [line1] minmax(20em, max-content);
+
+/* Globale Werte */
+grid: inherit;
+grid: initial;
+grid: unset;
+

+
+
Werte

+
+

+ 
<'grid-template'>

+ 
Defines the {{cssxref("grid-template")}} including {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} and {{cssxref("grid-template-areas")}}.

+ 
<'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?

+ 
Sets up an auto-flow by setting the row tracks explicitly via the {{cssxref("grid-template-rows")}} property (and the {{cssxref("grid-template-columns")}} property to none) and specifying how to auto-repeat the column tracks via {{cssxref("grid-auto-columns")}} (and setting {{cssxref("grid-auto-rows")}} to auto). {{cssxref("grid-auto-flow")}} is also set to column accordingly, with dense if it’s specified.
+ 
All other grid sub-properties are reset to their initial values.

+ 

+ 
[ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>

+ 
Sets up an auto-flow by setting the column tracks explicitly via the {{cssxref("grid-template-columns")}} property (and the {{cssxref("grid-template-rows")}} property to none) and specifying how to auto-repeat the row tracks via {{cssxref("grid-auto-rows")}} (and setting {{cssxref("grid-auto-columns")}} to auto). {{cssxref("grid-auto-flow")}} is also set to row accordingly, with dense if it’s specified.
+ 
All other grid sub-properties are reset to their initial values.

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML-Inhalt

+
+
<div id="container">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS-Inhalt

+
+
#container {
+  display: grid;
+  grid: repeat(2, 60px) / auto-flow 80px;
+}
+
+#container > div {
+  background-color: #8ca0ff;
+  width: 50px;
+  height: 50px;
+}

+
+
Ergebnis

+
+
{{EmbedLiveSample("Example", "100%", 150)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName("CSS3 Grid", "#propdef-grid", "grid")}}{{Spec2("CSS3 Grid")}}Initial definition

+
+
Browserkompatibilität

+
+{{Compat("css.properties.grid")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS-Eigenschaften: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}
    • 
+

+
+
diff --git a/files/de/web/css/height/index.html b/files/de/web/css/height/index.html
new file mode 100644
index 0000000000..8360676aa8
--- /dev/null
+++ b/files/de/web/css/height/index.html
@@ -0,0 +1,157 @@
+---
+title: height
+slug: Web/CSS/height
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/height
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die height CSS Eigenschaft bestimmt die Höhe des Inhaltsbereichs eines Elements. Der Inhaltsbereich ist innerhalb des Innenabstands, der Rahmen und des Außenabstands des Elements.

+
+
Die Eigenschaften {{cssxref("min-height")}} und {{cssxref("max-height")}} überschreiben height.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+height: auto;
+
+/* <length> Werte */
+height: 120px;
+height: 10em;
+
+/* <percentage> Wert */
+height: 75%;
+
+/* Globale Werte */
+height: inherit;
+height: initial;
+height: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ 
<percentage>

+ 
Definiert als eine {{cssxref("<percentage>")}} der Höhe des beinhaltenden Blocks.

+ 
border-box {{experimental_inline}}

+ 
Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Rahmenbox des Elements angewendet.

+ 
content-box {{experimental_inline}}

+ 
Falls angegeben, wird die vorhergehende {{cssxref("<length>")}} oder {{cssxref("<percentage>")}} auf die Inhaltsbox des Elements angewendet.

+ 
auto

+ 
Der Browser berechnet und wählt die Höhe für das angegebene Element aus.

+ 
max-content {{experimental_inline}}

+ 
Die innere bevorzugte Höhe.

+ 
min-content {{experimental_inline}}

+ 
Die innere Minimalhöhe.

+ 
available {{experimental_inline}}

+ 
Die Höhe des beinhaltenden Blocks minus vertikaler Außenabstand, Rahmen und Innenabstand.

+ 
fit-content {{experimental_inline}}

+ 
Die größere der:
+ 
    
+  
  • inneren Minimalhöhe
    • 
+  
  • kleineren der inneren bevorzugten und der verfügbaren Höhe
    • 
+ 

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML

+
+
<div id="red">
+  <span>Ich bin 50 Pixel hoch.</span>
+</div>
+<div id="green">
+  <span>Ich bin 25 Pixel hoch.</span>
+</div>
+<div id="parent">
+  <div id="child">
+    <span>Ich bin halb so groß wie mein Elternelement.</span>
+  </div>
+</div>
+

+
+
CSS

+
+
div {
+  width: 250px;
+  margin-bottom: 5px;
+  border: 3px solid #999999;
+}
+
+#red {
+  height: 50px;
+}
+
+#green {
+  height: 25px;
+}
+
+#parent {
+  height: 100px;
+}
+
+#child {
+  height: 50%;
+  width: 75%;
+}
+

+
+
{{EmbedLiveSample('Beispiel')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}}{{Spec2('CSS3 Box')}}Fügt die Schlüsselwörter max-content, min-content, available, fit-content, border-box und content-box hinzu.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Definiert height als animierbar.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Fügt Unterstützung für {{cssxref("<length>")}} Werte hinzu und präzisiert, für welche Elemente die Eigenschaft gilt.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.height")}}
+
+
Siehe auch

+
+
    
+ 
  • Boxmodell, {{cssxref("width")}}, {{cssxref("box-sizing")}}, {{cssxref("min-height")}}, {{cssxref("max-height")}}
    • 
+

diff --git a/files/de/web/css/hyphens/index.html b/files/de/web/css/hyphens/index.html
new file mode 100644
index 0000000000..564d3246e1
--- /dev/null
+++ b/files/de/web/css/hyphens/index.html
@@ -0,0 +1,119 @@
+---
+title: hyphens
+slug: Web/CSS/hyphens
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/hyphens
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die hyphens Eigenschaft regelt die automatische Silbentrennung. Dazu ist das HTML Attribut lang, bzw. xml:lang unter XML, zwingend notwendig.

+
+
Hinweis: Wie die Silbentrennung umgesetzt wird kann von Browser zu Browser, bzw. von Sprache zu Sprache, variieren.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
hyphens: none
+hyphens: manual
+hyphens: auto
+
+hyphens: inherit
+

+
+
Werte

+
+

+ 
none

+ 
Keine Silbentrennung: Wörter werden nicht getrennt und automatische Zeilenumbrüche sind nur bei Leerzeichen möglich.

+ 
manual

+ 
Manuelle Silbentrennung: Wörter werden nur dann getrennt, wenn dies definiert wurde (siehe {{anch("Umbrüche manuell definieren")}}).

+ 
auto

+ 
Automatische Silbentrennung: Der Browser trennt die Wörter automatisch. Manuell definierte Umbrüche werden dabei vorgezogen (siehe {{anch("Umbrüche manuell definieren")}}).

+

+
+
Umbrüche manuell definieren

+
+
Es gibt zwei Möglichkeiten, um Wörter manuell zu trennen. Dafür werden die beiden folgenden Unicode-Zeichen verwendet:

+
+

+ 
U+2010 (Bindestrich)

+ 
Dieser Bindestrich ist immer sichtbar, auch wenn das Wort gar nicht getrennt werden muss.

+ 
U+00AD (SHY)

+ 
Dieses Zeichen ist unsichtbar und kennzeichnet nur eine mögliche Trennstelle. Sobald eine Trennung notwendig wird, wird ein Bindestrich sichtbar. In HTML lässt sich das Zeichen mit &shy; einfügen.

+

+
+
Beispiel

+
+
This CSS snippet creates three classes, one for each possible configuration of the hyphens property.

+
+
<ul>
+  <li><code>none</code>: no hyphen; overflow if needed
+    <p lang="en" class="none">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)
+    <p lang="en" class="manual">An extreme&shy;ly long English word</p>
+  </li>
+  <li><code>auto</code>: hyphen where the algo is deciding (if needed)
+    <p lang="en" class="auto">An extreme&shy;ly long English word</p>
+  </li>
+</ul>
+

+
+
p {
+  width: 55px;
+  border: 1px solid black;
+ }
+p.none {
+  -moz-hyphens: none;
+  hyphens: none;
+}
+p.manual {
+  -moz-hyphens: manual;
+  hyphens: manual;
+}
+p.auto {
+  -moz-hyphens: auto;
+  hyphens: auto;
+}
+

+
+
{{EmbedLiveSample("Beispiel", "100%", "470'")}}

+
+
Spezifikations

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Text', '#hyphens', 'hyphens')}}{{Spec2('CSS3 Text')}}

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.hyphens")}}

+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("content")}}
    • 
+

diff --git a/files/de/web/css/id-selektoren/index.html b/files/de/web/css/id-selektoren/index.html
new file mode 100644
index 0000000000..921e391d80
--- /dev/null
+++ b/files/de/web/css/id-selektoren/index.html
@@ -0,0 +1,72 @@
+---
+title: ID-Selektoren
+slug: Web/CSS/ID-Selektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - Selektoren
+translation_of: Web/CSS/ID_selectors
+---
+
{{CSSRef("Selectors")}}

+
+
In einem HTML Dokument matchen CSS ID-Selektoren ein Element basierend auf den Inhalten des {{htmlattrxref("id")}} Attributs des Elements, welches exakt dem Wert des angegebenen Selektors entsprechen muss.

+
+
Syntax

+
+
#id_value { Stileigenschaften }

+
+
Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

+
+
[id=id_value] { Stileigenschaften }

+
+
Beispiel

+
+
span#identified {
+  background-color: DodgerBlue;
+}
+

+
+
<span id="identified">Hier ist ein Span mit Text.</span>
+<span>Hier ist ein weiterer.</span>
+

+
+
{{EmbedLiveSample("Beispiel", 200, 50)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS4 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS4 Selectors")}} 
{{SpecName("CSS3 Selectors", "#id-selectors", "ID selectors")}}{{Spec2("CSS3 Selectors")}} 
{{SpecName("CSS2.1", "selector.html#id-selectors", "ID selectors")}}{{Spec2("CSS2.1")}} 
{{SpecName("CSS1", "#id-as-selector", "ID selectors")}}{{Spec2("CSS1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.selectors.id")}}
diff --git a/files/de/web/css/image-orientation/index.html b/files/de/web/css/image-orientation/index.html
new file mode 100644
index 0000000000..5ef67d6ea1
--- /dev/null
+++ b/files/de/web/css/image-orientation/index.html
@@ -0,0 +1,98 @@
+---
+title: image-orientation
+slug: Web/CSS/image-orientation
+tags:
+  - CSS
+  - CSS Bild
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/image-orientation
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Mit der CSS Eigenschaft image-orientation kann die Ausrichtung eines Bildes geändert werden.

+
+

+
Hinweis:

+
+
    
+ 
  • Diese Eigenschaft ist nicht dazu gedacht Bilder beliebig zu drehen sondern eine fehlerhaften Ausrichtung zu korrigieren. Deshalb wird zur nächsten Vierteldrehung gerundet.
    • 
+ 
  • Ebenso ist diese Eigenschaft nicht dazu vorgesehen das Layout zu verändern, da sich image-orientation nur auf Bilder auswirkt.
    • 
+

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
image-orientation: 0deg;
+image-orientation: 6.4deg;     /* Wird zu 0deg gerundet */
+image-orientation: -90deg;     /* Wie 270deg, der normalisiert berechnete Wert */
+image-orientation: from-image; /* EXIF Daten des Bildes verwenden */
+image-orientation: 90deg flip; /* Um 90deg rotieren und horizontal spiegeln */
+image-orientation: flip;       /* Horizontales Spiegeln ohne Drehung */
+
+/* Globale Werte */
+image-orientation: inherit;
+image-orientation: initial;
+image-orientation: unset;
+

+
+
Werte

+
+

+ 
from-image

+ 
Das Bild wird entsprechend der enthaltenen EXIF-Informationen gedreht.

+ 
<angle>

+ 
Die {{cssxref("<angle>")}} der anzuwendenden Rotation. Wird zu den nächsten 90deg (0.25turn) gerundet.

+ 
flip

+ 
Das Bild wird horizontal gespiegelt, nachdem die Drehung des {{cssxref("<angle>")}} Wertes angewendet wird. Wenn keine {{cssxref("<angle>")}} gegeben ist, wird 0deg benutzt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
<img src="arrow.png" alt="Pfeil" style="image-orientation: 180deg;">

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS4 Images')}}Die Schlüsselwörter from-image und flip wurden hinzugefügt.
{{SpecName('CSS3 Images', '#image-orientation', 'image-orientation')}}{{Spec2('CSS3 Images')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+

+
+
+
{{Compat("css.properties.image-orientation")}}

+

+
+
Siehe auch

+
+
    
+ 
  • Andere bildbezogene CSS-Eigenschaften {{cssxref("object-fit")}}, {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/de/web/css/image-rendering/index.html b/files/de/web/css/image-rendering/index.html
new file mode 100644
index 0000000000..3abab150d4
--- /dev/null
+++ b/files/de/web/css/image-rendering/index.html
@@ -0,0 +1,114 @@
+---
+title: image-rendering
+slug: Web/CSS/image-rendering
+tags:
+  - CSS
+  - CSS Bild
+  - CSS Eigenschaft
+  - Experimentell
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/image-rendering
+---
+

+
{{CSSRef}}

+
+
{{SeeCompatTable}}

+
+
Zusammenfassung

+
+
Das image-rendering CSS Property schlägt dem user agent vor, wie er eingebundene Bilder darstellen sollte. Dieses Property gilt für alle Bilder welche einem HTML untergeordnet sind, betrifft allerdings nur skalierte Bilder.  Wenn ein Bild zum Beispiel 100x1000px groß ist, es aber mit einer Größe von 200x200px eingebunden wird, so Rechnet der Browser nach dem durch das Property festgelegten Algorythmus um.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}

+
+
image-rendering: auto
+image-rendering: crisp-edges
+image-rendering: pixelated
+
+image-rendering: inherit
+

+
+
Values

+
+

+ 
auto

+ 
Default value, the image should be scaled with an algorithm that maximizes the appearance of the image. In particular, scaling algorithms that "smooth" colors are acceptable, such as bilinear interpolation. This is intended for images such as photos. Since version 1.9 (Firefox 3.0), Gecko uses bilinear resampling (high quality).

+

+
+

+

+
+

+ 
crisp-edges

+ 
The image must be scaled with an algorithm that preserves contrast and edges in the image, and which does not smooth colors or introduce blur to the image in the process. This is intended for images such as pixel art.

+ 
pixelated

+ 
When scaling the image up, the "nearest neighbor" or similar algorithm must be used, so that the image appears to be composed of large pixels. When scaling down, this is the same as 'auto'.

+

+
+
The values optimizeQuality and optimizeSpeed present in early draft (and coming from its SVG counterpart) are defined as synonyms for the auto value.

+
+
Examples

+
+
/* applies to GIF and PNG images; avoids blurry edges */
+
+img[src$=".gif"], img[src$=".png"] {
+                   image-rendering: -moz-crisp-edges;         /* Firefox */
+                   image-rendering:   -o-crisp-edges;         /* Opera */
+                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+                   image-rendering: crisp-edges;
+                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+                 }
+
+

+
+
div {
+        background: url(chessboard.gif) no-repeat 50% 50%;
+        image-rendering: -moz-crisp-edges;         /* Firefox */
+        image-rendering:   -o-crisp-edges;         /* Opera */
+        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
+        image-rendering: crisp-edges;
+        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
+}

+
+
Live Examples

+
+
image-rendering: auto;

+
+
78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+
+
image-rendering: pixelated; (-ms-interpolation-mode: nearest-neighbor)

+
+
78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+
+
image-rendering: crisp-edges; (-webkit-optimize-contrast)

+
+
78% squares.gif 100% squares.gif 138% squares.gif downsized hut.jpg upsized blumen.jpg

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Images', '#the-image-rendering', 'image-rendering')}}{{Spec2('CSS3 Images')}} 

+
+
Though initially close from the SVG image-rendering property, the values are quite different now.

+
+
Browser compatibility

+{{Compat("css.properties.image-rendering")}}

diff --git a/files/de/web/css/image/index.html b/files/de/web/css/image/index.html
new file mode 100644
index 0000000000..d84257fc23
--- /dev/null
+++ b/files/de/web/css/image/index.html
@@ -0,0 +1,129 @@
+---
+title: 
+slug: Web/CSS/image
+tags:
+  - CSS
+  - CSS Bilder
+  - CSS Datentyp
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/image
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <image> CSS Datentyp repräsentiert ein 2D Bild. Es gibt zwei Arten von Bildern in CSS: einfache statische Bilder, die meist über einen URL referenziert werden, und dynamisch generierte Bilder wie Farbverläufe oder Abbildungen von Teilen der HTML Struktur.

+
+
CSS kann verschiedene Arten von Bildern verarbeiten:

+
+
    
+ 
  • Bilder mit inneren Maßen, d. h. einer natürlichen Größe, wie bei einem JPEG Bild, das feste Maße hat.
    • 
+ 
  • Bilder mit mehreren inneren Maßen, die in mehreren Versionen innerhalb der Datei existieren, wie bei einigen ICO Formaten. In diesem Fall entspricht das innere Maß dem flächenmäßig größten Bild mit dem Seitenverhältnis, das dem der beinhaltenden Box am nächsten kommt.
    • 
+ 
  • Bilder ohne innerem Maß, die jedoch ein inneres Seitenverhältnis zwischen ihrer Breite und Höhe haben, wie beispielsweise einige Vektorbilder im SVG Format.
    • 
+ 
  • Bilder ohne innere Maße noch innerem Seitenverhältnis, wie beispielsweise CSS Farbverläufen.
    • 
+

+
+
CSS bestimmt die konkrete Objektgröße anhand dieser inneren Maße, der angegebenen Größe definiert durch CSS Eigenschaften wie {{cssxref("width")}}, {{cssxref("height")}} oder {{cssxref("background-size")}} und der Standard Objektgröße, die durch die Art der Eigenschaft definiert wird, in der das Bild verwendet wird:

+
+
+ 
+  
+   
+   
+  
+ 
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
ObjektartStandard Objektgröße
{{cssxref("background-image")}}Die Größe des Hintergrund Positionierungsbereichs des Elements
{{cssxref("list-style-image")}}Die Größe eines Zeichens in 1em
{{cssxref("border-image")}}Die Größe des Randbildbereichs des Elements
{{cssxref("cursor")}}Eine durch den Browser definierte Größe, die der normalen Größe eines Mauszeigers auf dem benutzten System entspricht
Ersetzter Inhalt wie die Kombination der CSS Eigenschaft {{cssxref("content")}} mit den CSS Pseudoelementen {{cssxref("::after")}} und {{cssxref("::before")}}Ein 300px × 150px Rechteck

+
+
Die konkrete Objektgröße wird mit Hilfe des folgenden Algorithmus berechnet:

+
+
    
+ 
  • Falls die angegebene Größe sowohl Breite als auch Höhe definiert, werden diese Werte als die konkrete Objektgröße verwendet.
    • 
+ 
  • Falls die angegebene Größe einen der beiden Werte für Breite und Höhe definiert, wird der fehlende Wert durch das innere Seitenverhältnis bestimmt, sofern vorhanden, die inneren Maße, falls der angegebene Wert passt, oder es wird die Standard Objektgröße für den fehlenden Wert verwendet.
    • 
+ 
  • Falls die angegebene Größe weder Breite noch Höhe definiert, wird die konkrete Objektgröße so berechnet, dass sie dem inneren Seitenverhältnis der Bilder entspricht, jedoch die Standard Objektgröße in keinem Maß übersteigt. Falls das Bild kein inneres Seitenverhältnis hat, wird das innere Seitenverhältnis des Objekts verwendet, dem es zugewiesen ist; falls das Objekt keines hat, wird die fehlende Breite oder Höhe von der Standard Objektgröße herangezogen.
    • 
+

+
+
Bilder können von diversen CSS Eigenschaften verwendet werden, wie {{cssxref("background-image")}}, {{cssxref("border-image")}}, {{cssxref("content")}}, {{cssxref("list-style-image")}} oder {{cssxref("cursor")}}.

+
+
Hinweis: Nicht alle Browser unterstützen alle Arten von Bildern in allen Eigenschaften. Der Unterpunkt Browser Kompatibilität enhält hierzu eine detaillierte Liste.

+
+
Syntax

+
+
Ein <image> CSS Datentyp kann die folgenden Bilder repräsentieren:

+
+
    
+ 
  • Ein Bild, dass durch einen {{cssxref("<uri>")}} CSS Datentyp und die url() Funktion angegeben wird
    • 
+ 
  • Einen CSS {{cssxref("<gradient>")}};
    • 
+ 
  • Einen Teil einer Seite, der durch die {{cssxref("element", "element()")}} Funktion definiert wird.
    • 
+

+
+
Beispiele

+
+
Dies sind gültige Bildwerte:

+
+
url(test.jpg)                          Die url() Funktion, sofern test.jpg ein Bild ist
+linear-gradient(to bottom, blue, red)  Ein <gradient>
+element(#colonne3)                     Ein Teil einer Seite, der durch die element() Funktion referenziert wird,,
+                                       sofern 'colonne3' eine existierende CSS ID auf der Seite darstellt.
+

+
+
Dies sind ungültige Bildwerte:

+
+
cervin.jpg                             Eine Bilddatei muss durch die url() Funktion angegeben werden.
+url(report.pdf)                        Die Datei, die über die url() Funktion angesprochen wird, muss ein Bild sein.
+element(#fakeid)                       Falls 'fakeid' keine in der Seite existierende CSS ID darstellt.
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Images', '#image-notation', 'image()')}}{{Spec2('CSS3 Images')}}Vor CSS3 gab es keinen explizit definierten <image> Datentyp. Bilder konnten nur durch die url() Funktion definiert werden.

+
+
Browser Kompatibilität

+
+{{Compat("css.types.image")}}
+
+
Siehe auch

+
+
    
+ 
  • Farbverläufe in CSS, {{cssxref("<gradient>")}}, {{cssxref("linear-gradient","linear-gradient()")}}, {{cssxref("radial-gradient","radial-gradient()")}}, {{cssxref("repeating-linear-gradient","repeating-linear-gradient()")}}, {{cssxref("repeating-radial-gradient","repeating-radial-gradient()")}};
    • 
+ 
  • {{cssxref("element","element()")}};
    • 
+

diff --git a/files/de/web/css/index.html b/files/de/web/css/index.html
new file mode 100644
index 0000000000..356ca6e639
--- /dev/null
+++ b/files/de/web/css/index.html
@@ -0,0 +1,100 @@
+---
+title: CSS
+slug: Web/CSS
+tags:
+  - CSS
+  - Design
+  - Landing
+  - Layout
+  - Referenz
+translation_of: Web/CSS
+---
+
{{CSSRef}}

+
+
Cascading Style Sheets, meistens als CSS abgekürzt, ist eine Beschreibungssprache, die das Erscheinungsbild einer in {{Glossary("HTML")}} oder {{Glossary("XML")}} formatierten Datei (inklusive verschiedener XML-Sprachen wie SVG oder XHTML) festlegt. CSS beschreibt, wie ein strukturiertes Element am Bildschirm, auf Papier, in Sprache oder anderen Medien dargestellt wird.

+
+
CSS ist eine der Kernsprachen des Open Web und basiert auf standardisierten W3C-Spezifikationen. Vorher wurden die verschieden Tiele der CSS-Spezifikation synchron entwickelt, was die Versionierung der letzten Empfehlung ermöglichte. Du hast vielleicht von CSS1, CSS2.1 und CSS3 gehört. CSS4 wurde jedoch nie eine offizielle Version.

+
+
Seit CSS3 wuchs der Umfang der Spezifikation beträchtlich und der Fortschritt an den verschiedenen CSS-Modulen begann, so sehr abzuweichen, dass es effizienter wurde, Empfehlungen getrennt pro Modul zu entwickeln und zu veröffentlichen.

+
+

+
    
+ 
  • CSS-Einführung
+
+  
    Eine Schritt-für-Schritt-Einführung für Anfänger, welche die grundlegenden Informationen enthält.
    
+ 
    • 
+ 
  • CSS-TutorialUnser CSS-Lernbereich enthält eine Vielzahl von Tutorials, die alle Grundlagen behandeln und dich vom Anfänger- zum Profiniveau bringen.
    • 
+ 
  • CSS-Referenz
+  
    Eine vollständige Übersicht für erfahrene Webentwickler, die alle Eigenschaften und Konzepte von CSS beschreibt.
    
+ 
    • 
+

+
+

+

+
Tutorials

+
+
Unser CSS-Lernbereich bietet mehrere Module, die dir CSS von Grund auf beibringen — kein Vorwissen wird benötigt.

+
+

+ 
Erste Schritte mit CSS

+ 
CSS (für englisch „Cascading Style Sheets“) wird zur Gestaltung und zum Layout von Webseiten verwendet — zum Beispiel, um Schriftart, Farbe, Größe und Abstand des Inhalts zu verändern, ihn in mehrere Spalten aufzuteilen oder Animationen und andere dekorative Merkmale hinzuzufügen. Dieses Modul stellt einen sanften Anfang auf deinem Weg zur Beherrschung von CSS bereit, mit den Grundlagen, wie es funktioniert, wie die Syntax aussieht, und wie du anfangen kannst, es zu nutzen, um Gestaltung zu HTML hinzuzufügen.

+ 
CSS-Bausteine

+ 
Dieses Modul macht weiter, wo „Erste Schritte mit CSS“ aufgehört hat — jetzt, wo du mit der Sprache und ihrer Syntax vertraut geworden bist und etwas grundlegende Erfahrung gesammelt hast, ist es Zeit, ein bisschen tiefer einzutauchen. Dieses Modul beschäftigt sich mit der Kaskade und Vererbung, allen verfügbaren Selektorarten, Einheiten, Festlegung von Größen, Gestaltung des Hintergrunds und der Kanten, Debugging, und vielem mehr.

+ 
Das Ziel ist hier, dir eine Werkzeugsammlung zum Schreiben kompetenten CSS-Codes bereitzustellen und dir zu helfen, die grundlegende Theorie zu verstehen, bevor es mit spezifischeren Themen wie Textgestaltung und CSS-Layout weitergeht.

+ 
Textgestaltung

+ 
Nach der Behandlung der Grundlagen der Sprache CSS ist das nächste Thema, auf das du dich konzentrierst, Text zu gestalten — eines der gewöhnlichsten Dinge, die du mit CSS tun wirst. Hier sehen wir uns die Grundlagen der Textgestaltung an, zum Beispiel das Verändern der Schriftart, Schriftdicke, Kursivschrift, Zeilen- und Buchstabenabstand, Schlagschatten und andere Textmerkmale. Wir runden das Modul ab, indem wir uns das Anwenden eigener Schriften auf die Seite und die Gestaltung von Listen und Links anschauen.

+ 
CSS-Layout

+ 
An dieser Stelle haben wir uns bereits die CSS-Grundlagen, Textgestaltung und, wie Boxen, in denen sich dein Inhalt befindet, gestaltet und manipuliert werden können, angeschaut. Jetzt ist es an der Zeit, sich anzusehen, wie Boxen in Bezug auf den Ansichtsbereich und einander am richtigen Ort platziert werden. Wir haben die notwendigen Voraussetzungen behandelt, weshalb wir jetzt tief ins CSS-Layout eintauchen können, indem wir uns verschiedene Bildschirmeinstellungen, moderne Layoutwerkzeuge wie Flexbox, CSS-Grids und Positionierung und ein paar der alten Methoden, über die du vielleicht noch etwas wissen möchtest, anschauen.

+ 
CSS nutzen, um übliche Probleme zu lösen

+ 
Dieses Modul beinhaltet Links zu Inhaltsabschnitten, die erklären, wie CSS genutzt werden kann, um sehr gewöhnliche Probleme beim Erstellen einer Webseite zu lösen.

+

+

+
+

+
Referenzen

+
+
+
+
Kochbuch

+
+
Das CSS-Layout-Cookbook versucht, Rezepte für übliche Layoutmuster zusammenzubringen, Dinge, die du in deiner Seite implementieren müssen könntest. Zusätzlich zur Bereitstellung von Code, den du als Anfangspunkt in deinen Projekten nutzen kannst, heben diese Rezepte die verschieden Möglichkeiten, wie Layoutspezifikationen genutzt werden können, und die Entscheidungen, die du als Entwickler treffen kannst, hervor.

+
+
Werkzeuge für die CSS-Entwicklung

+
+
+

+

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/index/index.html b/files/de/web/css/index/index.html
new file mode 100644
index 0000000000..2c59185221
--- /dev/null
+++ b/files/de/web/css/index/index.html
@@ -0,0 +1,8 @@
+---
+title: CSS Dokumentationsverzeichnis
+slug: Web/CSS/Index
+tags:
+  - CSS
+translation_of: Web/CSS/Index
+---
+
{{Index("/de/docs/Web/CSS")}}

diff --git a/files/de/web/css/inherit/index.html b/files/de/web/css/inherit/index.html
new file mode 100644
index 0000000000..c91cd0c021
--- /dev/null
+++ b/files/de/web/css/inherit/index.html
@@ -0,0 +1,75 @@
+---
+title: inherit
+slug: Web/CSS/inherit
+tags:
+  - CSS
+  - CSS Kaskadierung
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/inherit
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der inherit CSS Wert lässt das Element, für das es angegeben wurde, den berechneten Wert der Eigenschaft seines Elternelements annehmen. Er ist für jede CSS Eigenschaft erlaubt.

+
+
Für vererbte Eigenschaften bestärkt es das Standardverhalten und wird nur dafür benötigt, eine andere Regel zu überschreiben. Für nicht vererbte Eigenschaften gibt er ein Verhalten an, das normalerweise wenig Sinn macht. Stattdessen sollte {{cssxref("initial")}} verwendet werden oder {{cssxref("unset")}} auf die {{cssxref("all")}} Eigenschaft angewandt werden.

+
+
{{ Note("Vererbung wird immer vom Elternelement im Dokumentbaum durchgeführt, auch wenn das Elternelement nicht der beinhaltende Block ist.") }}

+
+
Beispiel

+
+
 /* Mache Überschriften zweiter Ebene grün */
+ h2 { color: green; }
+
+ /* ...aber lasse jene in der Seitenleiste unberührt,
+    sodass diese die Farbe ihres Elternelements verwenden */
+ #sidebar h2 { color: inherit; }
+

+
+
In diesem Beispiel verwenden die h2 Elemente innerhalb der Seitenleiste andere Farben. Zum Beispiel, falls eines davon der Kindknoten eines divs wäre, der auf folgende Regel passt

+
+
 div#current { color: blue; }
+

+
+
wäre es blau.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Values', "#common-keywords", "inherit") }}{{ Spec2('CSS3 Values') }}Keine signifikante Änderung bezüglich {{ SpecName('CSS2.1') }}.
{{ SpecName('CSS2.1', "cascade.html#value-def-inherit", "inherit") }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.types.global_keywords.inherit")}}
+
+
Siehe auch

+
+
    
+ 
  • Vererbung
    • 
+ 
  • Die {{cssxref("all")}} CSS Eigenschaft
    • 
+ 
  • 
+  
    Die CSS-weiten Eigenschaftswerte {{cssxref("initial")}}, {{cssxref("inherit")}} und {{cssxref("unset")}}.
    
+ 
    • 
+

diff --git a/files/de/web/css/initial/index.html b/files/de/web/css/initial/index.html
new file mode 100644
index 0000000000..f4779b525e
--- /dev/null
+++ b/files/de/web/css/initial/index.html
@@ -0,0 +1,100 @@
+---
+title: initial
+slug: Web/CSS/initial
+translation_of: Web/CSS/initial
+---
+

+ {{CSSRef}}

+
Übersicht

+
Der Wert initial repräsentiert einen vom Browser vorgegebenen Standardwert. Der Wert ist in jeder CSS Eigenschaft verfügbar, hat aber verschiedene Auswirkungen.

+
Siehe Standardwert.

+
Beispiel

+
 /* give headers a green border */
+ h2 { border: medium solid green }
+
+ /* but make those in the sidebar use the value of the "color" property */
+ #sidebar h2 { border-color: initial; }
+

+
 <p style="color:red">
+    this text is red
+       <em style="color:initial">
+          this text is in the initial color (e.g. black)
+       </em>
+    this is red again
+ </p> 

+
Spezifikation

+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
CSS Values and Units Level 3{{Spec2('CSS3 Values')}}Wert hinzugefügt
CSS Cascade And Inheritance Level 3{{Spec2('CSS3 Cascade')}}Definiert den Wert

+
Browser Kompatibilität

+

+ {{CompatibilityTable}}

+

+ 
+  
+   
+    
+    
+    
+    
+    
+    
+   
+   
+    
+    
+    
+    
+    
+    
+   
+  
+ 
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatGeckoDesktop("3.5")}}{{property_prefix("-moz")}}[*]

+     {{CompatGeckoDesktop("19.0")}}		{{CompatNo}}15.01.2(125)

+

+

+ 
+  
+   
+    
+    
+    
+    
+    
+    
+   
+   
+    
+    
+    
+    
+    
+    
+   
+  
+ 
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support1.0{{CompatGeckoMobile("3.0")}}{{property_prefix("-moz")}}[*]

+     {{CompatGeckoMobile("169.0")}}		{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}

+

+
[*] Seit Firefox 1.0 wurden die Werte für -moz-initial festgelegt, bis mit der Definition von {{cssxref("quotes")}} ab Firefox 3.5 (Gecko 1.9.1) der Wert implementiert werden konnte. Die Werte für {{cssxref("-moz-border-top-colors","-moz-border-*-colors")}} wurden erst in in Firefox 3.6 (Gecko 1.9.2) hinzugefügt. Der Wert mit Präfix (-moz-initial) wurde in Firefox 19 durch initial erstetzt und wird seit Firefox 24 nichtmehr unterstützt.

+
Siehe auch

+
diff --git a/files/de/web/css/initialwert/index.html b/files/de/web/css/initialwert/index.html
new file mode 100644
index 0000000000..7d5e7e18dd
--- /dev/null
+++ b/files/de/web/css/initialwert/index.html
@@ -0,0 +1,20 @@
+---
+title: Initialwert
+slug: Web/CSS/Initialwert
+tags:
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/initial_value
+---
+
Übersicht

+
Der Initialwert, der in der Übersicht der Definition jeder CSS Eigenschaft steht, hat eine unterschiedliche Bedeutung für vererbte und nicht vererbte Eigenschaften.

+
Für vererbte Eigenschaften wird der Initialwert ausschließlich für das Wurzelelement verwendet, falls kein Wert für das Element definiert ist.

+
Für nicht vererbte Eigenschaften wird der Initialwert für jedes Element verwendet, falls kein Wert für das Element definiert ist.

+
Ein initial Schlüsselwort wurde in CSS3 hinzugefügt, um es Autoren zu erlauben, diesen ursprünglichen Wert explizit anzugeben.

+
Siehe auch

+
diff --git a/files/de/web/css/integer/index.html b/files/de/web/css/integer/index.html
new file mode 100644
index 0000000000..c4d214a033
--- /dev/null
+++ b/files/de/web/css/integer/index.html
@@ -0,0 +1,89 @@
+---
+title: 
+slug: Web/CSS/integer
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/integer
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der CSS Wert <integer> ist eine Ganzzahl zwischen 0 und 9. data type denotes an integer number, positive or negative. Davor kann ein + oder - stehen. Steht nichts davor ist der Interger positiv.

+
+
Integer kommen bspw. in {{cssxref("z-index")}}, {{cssxref("line-height")}}, {{cssxref("counter-increment")}} oder {{Cssxref("column-count")}} vor.

+
+
Ein <integer> entspricht auch dem Wert {{cssxref("<number>")}}.

+
+
Es gibt keine offizielle Begrenzung des Wertes. Opera unterstützt nur Werte bis 215-1, der Internet Explorer bis 220-1. Während der Entwicklung von CSS3 wurde dies ausführlich diskutiert. Der letzte Stand, April 2012, war [-227-1; 227-1] #, aber auch 224-1 und 230-1 wurden vorgeschlagen # #. Im letzten Entwurf der Spezifikation wurde kein Limit festgelegt.

+
+
Interpolation

+
+
Werte des <integer> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als ganzzahlige Einzelschritte interpoliert. Die Berechnung erfolgt, als ob sie reale Fließkommazahlen wären und der Einzelwert wird durch die Abrundungsfunktion ermittelt. Die Geschwindigkeit der Interpolation wird durch die mit der Animation verbundenen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.

+
+
Beispiele

+
+
Gültige Integer:

+
+
12          Positiver Integer (ohne führendes +)
++123        Positiver integer (mit führendem +)
+-456        Negativer integer
+0           Null
++0          Null mit führendem +
+-0          Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert)
+

+
+
Ungültige Integer:

+
+
12.0        Dist ist eine {{cssxref("<number>")}}, kein <integer>, obwohl sie eine Ganzzahl darstellt
+12.         Der Punkt sollte nicht Teil eines <integer> sein
++---12      Nur ein führendes +/- ist erlaubt
+ten         Buchstaben sind nicht erlaubt
+_5          Sonderzeichen sind nicht erlaubt
+\35         Escapte Unicodezeichen sind nicht erlaubt, auch wenn diese einer Ganzzahl entsprechen (hier: 5)
+\4E94       Nicht-arabische Numerale sind nicht erlaubt, auch nicht escapt (hier: die japanische 5, 五)
+3e4         Wissenschaftliche Notation ist nicht gültig für <integer>
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Values', '#integers', '<integer>')}}{{Spec2('CSS3 Values')}}keine wesentliche Änderung gegenüber CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#numbers', '<integer>')}}{{Spec2('CSS2.1')}}Explizit definiert
{{SpecName('CSS1', '', '<integer>')}}{{Spec2('CSS1')}}Implizit definiert

+
+
Browser Kompatibilität

+
+
{{Compat("css.types.integer")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("<number>")}}
    • 
+

diff --git a/files/de/web/css/justify-content/index.html b/files/de/web/css/justify-content/index.html
new file mode 100644
index 0000000000..3d991145af
--- /dev/null
+++ b/files/de/web/css/justify-content/index.html
@@ -0,0 +1,187 @@
+---
+title: justify-content
+slug: Web/CSS/justify-content
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - CSS3
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/justify-content
+---
+
{{CSSRef("CSS Flexible Boxes")}}

+
+
Übersicht

+
+
Die justify-content CSS Eigenschaft definiert, wie ein Browser verfügbaren Platz zwischen und um Elemente verteilt, wenn Flexelemente an der Hauptachse der aktuellen Zeile ausgerichtet werden sollen. Die Ausrichtung wird berechnet, nachdem die Längen und automatischen Abstände angewendet wurden, was bedeutet, dass falls es mindestens ein flexibles Element gibt mit {{cssxref("flex-grow")}} ungleich 0, hat diese Eigenschaft keine Auswirkung, da es keinen verfügbaren Platz gibt.

+
+

+
Hinweis: Es sollte nicht angenommen werden, dass diese Eigenschaft ausschließlich auf Flexcontainer angewandt wird. Daher sollte sie nicht einfach durch Setzen eines anderen {{cssxref("display")}} Wertes versteckt werden. Die CSSWG arbeitet daran, deren Verwendung auf alle Blockelemente auszuweiten. Diese Entwurfsspezifikation ist bisher noch in einer frühen Entwicklungsphase und bisher noch nicht implementiert.

+

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von CSS Flexible Boxes für weitere Eigenschaften und Informationen.

+
+
Syntax

+
+
/* Packe Flexelemente an den Start */
+justify-content: flex-start;
+
+/* Packe Flexelemente an das Ende */
+justify-content: flex-end;
+
+/* Packe Flexelemente um die Mitte */
+justify-content: center;
+
+/* Verteile die Elemente gleichmäßig
+Das erste Element an den Start, das letzte an das Ende */
+justify-content: space-between;
+
+/* Verteile die Elemente gleichmäßig
+Elemente haben gleiche Abstände um sie herum */
+justify-content: space-around;
+
+/* Globale Werte */
+justify-content: inherit;
+justify-content: initial;
+justify-content: unset;
+

+
+
Werte

+
+

+ 
flex-start

+ 
Die Flexelemente werden an den Hauptstartpunkt gepackt. Die Außenabstände des ersten Flexelements grenzen an den Startrand der Zeile und jedes weitere Flexelement an das folgende.

+ 
flex-end

+ 
Die Flexelemente werden an den Hauptendpunkt gepackt. Außenabstände des letzten Flexelements grenzen an den Endrand der Zeile und jedes weitere Flexelement an das folgende.

+ 
center

+ 
Die Flexelemente werden in die Mitte der Zeile gepackt. Die Flexelemente grenzen aneinander und werden in der Mitte der Zeile ausgerichtet. Die Leerräume zwischen dem Hauptstartrand und dem ersten Element und zwischen dem Hauptendrand und dem letzten Element sind gleich.

+ 
space-between

+ 
Flexelemente werden gleichmäßig innerhalb der Zeile verteilt. Die Abstände werden so verteilt, dass sie zwischen zwei angrenzenden Elementen gleich sind. Hauptstartrand und -endrand einer Zeile grenzen an den Rand des ersten bzw. letzten Flexelements.

+ 
space-around

+ 
Flexelemente werden gleichmäßig innerhalb der Zeile verteilt, sodass die Leerräume zwischen zwei angrenzenden Elementen gleich sind. Der Leerraum vor dem ersten und nach dem letzten Element entspricht der Hälfte des Leerraums zwischen zwei angrenzenden Elementen.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML:

+
+
<div id="container">
+  <p>justify-content: flex-start</p>
+  <div id="flex-start">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: flex-end</p>
+  <div id="flex-end">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: center</p>
+  <div id="center">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-between</p>
+  <div id="space-between">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+
+  <p>justify-content: space-around</p>
+  <div id="space-around">
+    <div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+

+
+
CSS:

+
+
#container > div {
+  display: flex;
+  font-family: Courier New, Lucida Console, monospace;
+}
+
+#container > div > div {
+  width: 50px;
+  height: 50px;
+  background: linear-gradient(-45deg, #788cff, #b4c8ff);
+}
+
+#flex-start {
+  justify-content: flex-start;
+}
+
+#center {
+  justify-content: center;
+}
+
+#flex-end {
+  justify-content: flex-end;
+}
+
+#space-between {
+  justify-content: space-between;
+}
+
+#space-around {
+  justify-content: space-around;
+}
+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiele', 600, 550) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Flexbox', '#justify-content', 'justify-content')}}{{Spec2('CSS3 Flexbox')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
Support im Flex-Layout

+
+
{{Compat("css.properties.justify-content.flex_context")}}

+
+
Support im Grid-Layout

+
+
{{Compat("css.properties.justify-content.grid_context")}}

+
+
[1] Firefox unterstützt nur einzeiliges Flexbox Layout bis Version 28. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/kindselektoren/index.html b/files/de/web/css/kindselektoren/index.html
new file mode 100644
index 0000000000..2e351964ed
--- /dev/null
+++ b/files/de/web/css/kindselektoren/index.html
@@ -0,0 +1,90 @@
+---
+title: Kindselektoren
+slug: Web/CSS/Kindselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - NeedsMobileBrowserCompatibility
+  - Selektoren
+translation_of: Web/CSS/Child_combinator
+---
+
{{CSSRef("Selectors")}}

+
+
Der Kindkombinator (>) wird zwischen zwei CSS-Selektoren platziert. Er wählt nur die Elemente aus, die vom zweiten Selektor gewählt werden, die Kinder vom ersten gewählten Element sind.

+
+
 

+
+

+
/* Listenpunkte, die Kinder der "my-things" Liste sind */
+ul.my-things > li {
+  margin: 2em;
+}

+
+
Elemente, die vom zweiten Selektor gewählt werden, müssen direkte Kinder des ersten gewählten Elements sein. Dies ist strenger, als der Nachfahrenselektor, der alle Elemente auswählt, die vom zweiten Selektor gewählt werden, für die ein Vorfahrenelement existieren, unabhängig der Anzahl der "Sprünge" aufwärts des DOM.

+

+
+
Syntax

+
+
selector1 > selector2 { Stileigenschaften }
+

+
+
Beispiel

+
+
CSS

+
+
span {
+  background-color: white;
+}
+
+div > span {
+  background-color: DodgerBlue;
+}
+

+
+
HTML

+
+
<div>
+  <span>Span 1. Innerhalb des Divs.
+    <span>Span 2. Innerhalb des Spans, der sich im Div befindet.</span>
+  </span>
+</div>
+<span>Span 3. In keinem Div.</span>
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Beispiel", 200, 100)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#child-combinators', 'child combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#child-combinators', 'child combinators')}}{{Spec2('CSS3 Selectors')}}Keine Änderung
{{SpecName('CSS2.1', 'selector.html#child-selectors', 'child selectors')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.selectors.child")}}
diff --git a/files/de/web/css/klassenselektoren/index.html b/files/de/web/css/klassenselektoren/index.html
new file mode 100644
index 0000000000..eafd714a05
--- /dev/null
+++ b/files/de/web/css/klassenselektoren/index.html
@@ -0,0 +1,76 @@
+---
+title: Klassenselektoren
+slug: Web/CSS/Klassenselektoren
+tags:
+  - CSS
+  - CSS Referenz
+  - Einsteiger
+  - Selektoren
+translation_of: Web/CSS/Class_selectors
+---
+
{{CSSRef("Selectors")}}

+
+
In einem HTML Dokument matchen CSS Klassenselektoren ein Element basierend auf den Inhalten des {{htmlattrxref("class")}} Attributs des Elements. Das class Attribut ist definiert als eine durch Leerzeichen getrennte Liste von Einträgen, wobei einer dieser Einträge exakt auf den Klassennamen des angegebenen Selektors passen muss.

+
+
Syntax

+
+
.classname { style properties }

+
+
Beachte, dass dies äquivalent zu folgendem {{cssxref("Attributselektoren", "Attributselektor")}} ist:

+
+
[class~=classname] { style properties }

+
+
Beispiel

+
+
CSS

+
+
span.classy {
+  background-color: DodgerBlue;
+}
+

+
+
HTML

+
+
<span class="classy">Hier ist ein Span mit Text.</span>
+<span>Hier ist ein weiterer.</span>
+

+
+
{{EmbedLiveSample('Beispiel', 200, 50)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS4 Selectors')}}Keine Änderungen
{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.selectors.class")}}
diff --git a/files/de/web/css/kurzformat_eigenschaft/index.html b/files/de/web/css/kurzformat_eigenschaft/index.html
new file mode 100644
index 0000000000..1923d5efd5
--- /dev/null
+++ b/files/de/web/css/kurzformat_eigenschaft/index.html
@@ -0,0 +1,158 @@
+---
+title: Kurzformat Eigenschaft
+slug: Web/CSS/Kurzformat_Eigenschaft
+translation_of: Web/CSS/Shorthand_properties
+---
+
{{cssref}}

+
+
Shorthand properties are CSS properties that let you set the values of multiple other CSS properties simultaneously. Using a shorthand property, you can write more concise (and often more readable) style sheets, saving time and energy.

+
+
The CSS specification defines shorthand properties to group the definition of common properties acting on the same theme. For instance, the CSS {{cssxref("background")}} property is a shorthand property that's able to define the values of {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-repeat")}}, and {{cssxref("background-position")}}. Similarly, the most common font-related properties can be defined using the shorthand {{cssxref("font")}}, and the different margins around a box can be defined using the {{cssxref("margin")}} shorthand.

+
+
Tricky edge cases

+
+
Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:

+
+
    
+ 
  1. A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it overrides previously set values. Therefore:
+
+  
    background-color: red;
+background: url(images/bg.gif) no-repeat left top;
+
    
+  will not set the color of the background to red but to {{cssxref("background-color")}}'s default, transparent, as the second rule has precedence.
    2. 
+ 
  2. Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
    3. 
+ 
  3. Shorthand properties try not to force a specific order for the values of the properties they replace. This works well when these properties use values of different types, as the order has no importance, but this does not work as easily when several properties can have identical values. Handling of these cases are grouped in several categories:
+  
      
+   
    1. Shorthands handling properties related to edges of a box, like {{cssxref("border-style")}}, {{cssxref("margin")}} or {{cssxref("padding")}}, always use a consistent 1-to-4-value syntax representing those edges:
+    
+     
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+     
+    
      border1.pngThe 1-value syntax: border-width: 1em — The unique value represents all edges
      border2.pngThe 2-value syntax: border-width: 1em 2em — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.
      border3.pngThe 3-value syntax: border-width: 1em 2em 3em — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge
      border4.png
+        
      The 4-value syntax: border-width: 1em 2em 3em 4em — The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (The initial letter of Top-Right-Bottom-Left matches the order of the consonant of the word trouble: TRBL) (You can also remember it as the order that the hands would rotate on a clock: 1em starts in the 12 o'clock position, then 2em in the 3 o'clock position, then 3em in the 6 o'clock position, and 4em in the 9 o'clock position).
      
+       
      
+   
      2. 
+   
    2. Similarly, shorthands handling properties related to corners of a box, like {{cssxref("border-radius")}}, always use a consistent 1-to-4-value syntax representing those corners:
+    
+     
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+      
+       
+       
+      
+     
+    
      corner1.pngThe 1-value syntax: border-radius: 1em — The unique value represents all corners
      corner2.pngThe 2-value syntax: border-radius: 1em 2em — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.
      corner3.pngThe 3-value syntax: border-radius: 1em 2em 3em — The first value represents the top left corner, the second the top right and bottom left ones, and the third value the bottom right corner
      corner4.png
+        
      The 4-value syntax: border-radius: 1em 2em 3em 4em — The four values represent the top left, top right, bottom right and bottom left corners respectively, always in that order, that is clock-wise starting at the top left.
      
+       
      
+   
      3. 
+  
    
+ 
    4. 
+

+
+
Background properties

+
+
A background with the following properties ...

+
+
background-color: #000;
+background-image: url(images/bg.gif);
+background-repeat: no-repeat;
+background-position: left top;

+
+
... can be shortened to just one declaration:

+
+
background: #000 url(images/bg.gif) no-repeat left top;

+
+
(The shorthand form is actually the equivalent of the longhand properties above plus background-attachment: scroll and, in CSS3, some additional properties.)

+
+
See {{cssxref("background")}} for more detailed information, including CSS3 properties.

+
+
Font properties

+
+
The following declarations ...

+
+
font-style: italic;
+font-weight: bold;
+font-size: .8em;
+line-height: 1.2;
+font-family: Arial, sans-serif;

+
+
... can be shortened to the following:

+
+
font: italic bold .8em/1.2 Arial, sans-serif;

+
+
This shorthand declaration is actually equivalent to the longhand declarations above plus font-variant: normal and font-size-adjust: none (CSS2.0 / CSS3), font-stretch: normal (CSS3).

+
+
Border properties

+
+
With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...

+
+
border-width: 1px;
+border-style: solid;
+border-color: #000;

+
+
... can be simplified as:

+
+
border: 1px solid #000;

+
+
Margin and padding properties

+
+
Shorthand versions of margin and padding values work similarly; the margin property allows for shorthand values to be specified using one, two, three, or four values. The following CSS declarations ...

+
+
margin-top: 10px;
+margin-right: 5px;
+margin-bottom: 10px;
+margin-left: 5px;

+
+
... are the same as the following declaration using the four value shorthand. Note that the values are in clockwise order, beginning at the top: top, right, bottom, then left (TRBL, the consonants in "trouble").

+
+
margin: 10px 5px 10px 5px;

+
+
Margin shorthand rules for one, two, three and four value declarations are:

+
+
    
+ 
  • When one value is specified, it applies the same margin to all four sides.
    • 
+ 
  • When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
    • 
+ 
  • When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
    • 
+ 
  • When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).
    • 
+

+
+
The universal shorthand property

+
+
CSS provides a universal shorthand property, {{cssxref("all")}}, which applies its value to every property in the document. Its purpose is to change the properties' inheritance model to one of:

+
+
{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}

+
+
See Cascade and inheritance or Introducing the CSS Cascade for more information about how inheritance works in CSS.

+
+
See also

+
+
    
+ 
  • {{css_key_concepts}}
    • 
+ 
  • Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}
    • 
+

diff --git a/files/de/web/css/layout_mode/index.html b/files/de/web/css/layout_mode/index.html
new file mode 100644
index 0000000000..f3ed2f4b75
--- /dev/null
+++ b/files/de/web/css/layout_mode/index.html
@@ -0,0 +1,27 @@
+---
+title: Layout mode
+slug: Web/CSS/Layout_mode
+tags:
+  - CSS
+translation_of: Web/CSS/Layout_mode
+---
+
Ein CSS Layoutmodus, manchmal als Layout abgekürzt, ist ein Algorithmus, der die Position und die Größe von Boxen bestimmt, basierend auf der Weise, wie diese mit ihren Geschwisterknoten und übergeordneten Knoten interagieren. Es gibt mehrere davon:

+
+
    
+ 
  • Das Blocklayout, designt, um Dokumente darzustellen. Das Blocklayout beinhaltet dokumentenspezifische Features, wie die Möglichkeit, Elemente umzubrechen oder sie in mehreren Spalten darzustellen.
    • 
+ 
  • Das Inlinelayout, designt, um Text darzustellen.
    • 
+ 
  • Das Tabellenlayout, designt, um Tabellen darzustellen.
    • 
+ 
  • Das positionierte Layout, designt, um Elemente ohne viel Interaktion mit anderen Elementen zu positionieren.
    • 
+ 
  • Das Flexboxlayout, designt, um komplexe Seiten darzustellen, die problemlos in der Größe geändert werden können. {{experimental_inline}}
    • 
+ 
  • Das Rasterlayout, designt, um Elemente relativ zu einem festen Raster darzustellen. {{experimental_inline}}
    • 
+

+
+

+
Hinweis: Nicht alle CSS Eigenschaften gelten für alle Layoutmodi. Die meisten von ihnen gelten für einen oder zwei davon und haben keinen Effekt, falls sie für ein Element gesetzt werden, das in einem anderen Layoutmodus dargestellt wird.

+

+
+
Siehe auch

+
+
    
+ 
  • {{CSS_key_concepts}}
    • 
+

diff --git a/files/de/web/css/left/index.html b/files/de/web/css/left/index.html
new file mode 100644
index 0000000000..d1e281e4a3
--- /dev/null
+++ b/files/de/web/css/left/index.html
@@ -0,0 +1,190 @@
+---
+title: left
+slug: Web/CSS/Left
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/left
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft left definiert einen Teil der Position von positionierten Elementen.

+
+
Bei absolut positionierten Elementen (jene mit {{cssxref("position")}}: absolute oder position: fixed) wird der Abstand zwischen der linken, äußeren Rand des Elements und dem linken Rand des umschließenden Blocks definiert.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <length> Werte */
+left: 3px;
+left: 2.4em;
+
+/* <percentage> Werte bezogen auf die Breite des beinhaltenden Blocks */
+left: 10%;
+
+/* Schlüsselwortwerte */
+left: auto;
+
+/* Globale Werte */
+left: inherit;
+left: initial;
+left: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Ist eine negative, null oder positive {{cssxref("<length>")}}, die folgendem entspricht:
+ 
    
+  
  • für absolute positionierte Elemente, die Distanz zum linken Rand des beinhaltenden Blocks
    • 
+  
  • für relativ positionierte Elemente, der Versatz, um den das Element von seiner Position im normalen Fluss nach links verschoben ist, falls es nicht positioniert wäre.
    • 
+ 

+ 

+ 
<percentage>

+ 
Ein {{cssxref("<percentage>")}} Wert der Breite des beinhaltenden Blocks, wie in der Übersicht beschrieben.

+ 
auto

+ 
Ist ein Schlüsselwort, das folgendem entspricht:
+ 
    
+  
  • für absolut positionierte Elemente, die Position des Elements basierend auf der {{cssxref("right")}} Eigenschaft und width: auto wird als Breite basierend auf dem Inhalt behandelt.
    • 
+  
  • für relativ positionierte Elemente, der linke Versatz des Elements von der Originalposition basierend auf der {{cssxref("right")}} Eigenschaft oder falls right ebenfalls auto ist, wird wird es nicht verschoben.
    • 
+ 

+ 

+

+
+
Beispiele

+
+
CSS

+
+
#wrap {
+  width: 700px;
+  margin: 0 auto;
+  background: #5C5C5C;
+}
+
+pre {
+  white-space: pre;
+  white-space: pre-wrap;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+#example_1 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  background-color: #D8F5FF;
+}
+
+#example_2 {
+  width: 200px;
+  height: 200px;
+  position: relative;
+  top: 0;
+  right: 0;
+  background-color: #C1FFDB;
+
+}
+#example_3 {
+  width: 600px;
+  height: 400px;
+  position: relative;
+  top: 20px;
+  left: 20px;
+  background-color: #FFD7C2;
+}
+
+#example_4 {
+  width: 200px;
+  height: 200px;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+  background-color: #FFC7E4;
+}

+
+
HTML

+
+
<div id="wrap">
+  <div id="example_1">
+    <pre>
+      position: absolute;
+      left: 20px;
+      top: 20px;
+    </pre>
+    <p>Das einzige Element, das dieser Div beinhaltet, ist das Hauptfenster. Daher positioniert er sich in Bezug dazu.</p>
+  </div>
+
+  <div id="example_2">
+    <pre>
+      position: relative;
+      top: 0;
+      right: 0;
+    </pre>
+    <p>Relative Position in Bezug auf seine Geschwisterelemente.</p>
+  </div>
+
+  <div id="example_3">
+    <pre>
+      float: right;
+      position: relative;
+      top: 20px;
+      left: 20px;
+    </pre>
+    <p>Relativ zu seinem Geschwister-Div darüber, jedoch aus dem Inhaltsfluss entfernt.</p>
+
+    <div id="example_4">
+      <pre>
+        position: absolute;
+        top: 10px;
+        left: 20px;
+      </pre>
+      <p>Absolute Position innerhalb des Elternelements mit relativer Position.</p>
+    </div>
+  </div>
+</div>

+
+
Live Beispiel

+
+
{{EmbedLiveSample('Beispiele', 1200, 650)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'left')}}{{Spec2('CSS3 Transitions')}}Definiert left als animierbar.
{{SpecName('CSS2.1', 'visuren.html#propdef-left', 'left')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.left")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("position")}}, {{cssxref("right")}}, {{cssxref("bottom")}}, {{cssxref("left")}}
    • 
+

diff --git a/files/de/web/css/length/index.html b/files/de/web/css/length/index.html
new file mode 100644
index 0000000000..6309f0f045
--- /dev/null
+++ b/files/de/web/css/length/index.html
@@ -0,0 +1,178 @@
+---
+title: 
+slug: Web/CSS/length
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Länge
+  - Referenz
+  - Web
+  - length
+translation_of: Web/CSS/length
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der Platzhalter <length> steht für eine Längenangabe. Diese besteht immer aus aus einer Zahl ({{cssxref("<number>")}}) und einer Maßeinheit (px, em, pc, in, mm, …); zwischen diesen Elementen darf sich kein Leerzeichen befinden.

+
+
Der Wertebereich ist abhängig von der jeweiligen CSS-Eigenschaft, teils sind nur positive Werte sinnvoll und zulässig.

+ Oftmals wird auch eine prozentuale Angabe ({{cssxref("<percentage>")}}) akzeptiert, diese gehört jedoch strenggenommen nicht zu den <length>-Werten und wird deshalb an anderer Stelle besprochen.

+
+
<length> wird von vielen Eigenschaften benutzt, zum Beispiel {{ Cssxref("width") }}, {{ Cssxref("margin") }},  {{ Cssxref("padding") }}, {{ Cssxref("font-size") }}, {{ Cssxref("border-width") }} und {{ Cssxref("text-shadow") }}.

+
+
Interpolation

+
+
<length>-Werte können für Animationen interpoliert werden. Für die Berechnung werden sie als reelle Fließkommazahlen behandelt, dabei wird immer der berechnete Wert interpoliert. Die Geschwindigkeit bzw. die Zwischenschritte hängen von der der Animation zugeordneten Zeitfunktion ab.

+
+
Einheiten

+
+
Relative Längenmaße

+
+
Relativ zur Schriftgröße

+
+
Die nachfolgenden Einheiten beziehen sich immer auf eine Eigenschaft der Schriftart des Elements, für das sie genutzt werden (Ausnahme: rem und rlh, diese beziehen sich auf das Wurzelelement, meist das {{HTMLElement("html")}}-Element).

+
+

+ 
em

+ 
1em entspricht der aus {{Cssxref("font-size")}} berechneten Schriftgröße. Wird em zusammen mit {{Cssxref("font-size")}} selbst benutzt, entspricht 1em der Schriftgröße des Elternelements.

+ em ist, zusammen mit Prozentwerten, das gebräuchlichste Maß, um den Fluss der Seitenelemente unabhängig von der vom Benutzer gewählten Schriftgröße einheitlich zu gewährleisten.

+ 
rem

+ 
Wie em, bezieht sich jedoch immer auf die berechnete Schriftgröße des Wurzelelements. {{ gecko_minversion_inline("1.9.2") }}

+ 
ex

+ 
1ex enspricht üblicherweise der Höhe des kleinen x; oftmals ist 1ex ≈ 0,5em.

+ 
ch

+ 
1ch enspricht der Breite der Ziffer '0' (Null, Unicode U+0030) {{gecko_minversion_inline("1.9.1") }}

+ 
cap {{experimental_inline}}

+ 
Nominale Höhe der Großbuchstaben.

+ 
lh {{experimental_inline}}

+ 
Die aus {{Cssxref("line-height")}} berechnete Zeilenhöhe.

+ 
rlh {{experimental_inline}}

+ 
Wie lh, bezieht sich jedoch immer auf die berechnete Zeilenhöhe des Wurzelelements.

+ 
ic {{experimental_inline}}

+ 
Größe des "水"-Zeichens (CJK "Wasser"-Ideograph U+6C34) in der aktuellen Schriftart.

+

+
+
Relativ zum Viewport

+
+
Diese Werte werden vom sichtbaren Teil des Dokuments abgeleitet, dem Anzeigebereich (Englisch: Viewport). Sie sind also abhängig von der Fenster- bzw. Bildschirmgröße.

+
+
Innerhalb einer {{cssxref("@page")}}-Regel sind Viewport-Werte nicht zulässig.

+
+

+ 
vh

+ 
1vh entspricht 1% der Anzeigenhöhe (vh = viewport height).

+ 
vw

+ 
1vw entspricht 1% Anzeigenbreite (vh = viewport width).

+ 
vi {{experimental_inline}}

+ 
Entspricht 1% der Länge der Inlineachse des umgebenden Blocks. Die Inlineachse ist die Richtung, in der Text geschrieben wird, also horizontal für deutschen Text.

+ 
vi {{experimental_inline}}

+ 
Entspricht 1% der Länge der Blockachse des umgebenden Blocks. Die Blockachse verläuft im Winkel von 90° zur Inlineachse, also vertikal für deutschen Text.

+ 
vmin

+ 
Der kleinere der Werte vh und vw.

+ 
vmax

+ 
Der größere der Werte vh und vw.

+

+
+
Absolute Längenmaße

+
+
Absolute Längenmaße stehen für ein physikalisches Maß, sofern die physischen Eigenheiten des Ausgabemediums bekannt sind. Eine der Einheiten wird als Referenz festgelegt, alle anderen werden relativ zu ihr definiert. Die Festlegung hängt vom Ausgabegerät ab, genauer: von dessen Auflösung.

+
+
Bei Geräten mit niedriger Auflösung (namentlich herkömmliche Flachbildschirme) ist die Bezugsgröße das sogenannte Referenzpixel. Die Größe des Referenzpixels ist definiert als die wahrgenommene Größe eines Pixels auf einem Bildschirm mit der Auflösung 96dpi in etwa einer Armlänge Abstand. In der Praxis wird jedoch meist das tatsächliche Bildschirmpixel des gerade angeschlossenen Bildschirms als Referenzpixel definiert.

+ Ein Referenzpixel entspricht 1px, alle anderen Einheiten sind bei niedrig auflösenden Geräten von px abgeleitet.  1in ist in Abhängigkeit von px als 96px festgelegt, was wiederum 72pt entspricht.

+
+
Aufgrund dieser eher ungenauen Definition können in mm, cm oder in gegebene Längen von jenen abweichen, die tatsächlich als solche gemessen werden würden – in anderen Worten: 1cm auf dem Bildschirm ist üblicherweise nur ungefähr gleich einem Zentimeter auf dem Zollstock.

+
+
Bei Geräten mit hoher Auflösung hingegen entsprechen die Einheiten mm, cm und in ihren tatsächlichen Maßen, mithin den Einheiten Millimeter, Zentimeter und Zoll (Englisch: Inch). Von ihnen abhängig ist die Einheit px, sie ist definiert als 1/96 eines Zolls.

+
+

+
Hinweis: Viele Benutzer erhöhen die Standardschriftgröße ihres Browsers zur besseren Lesbarkeit. Absolute Schriftgrößen können Probleme mit der Barrierefreiheit verursachen, weil sie nicht von den Benutzereinstellungen der Schriftgröße abhängen. Es wird deshalb empfohlen, relative Schriftgrößen wie em und rem zu benutzen, selbst für allgemeine Schriftgrößendefinitionen auf p- oder body-Ebene.

+

+
+

+ 
px

+ 
Pixel, abhängig vom Anzeigegerät. Auf herkömmlichen Bildschirmen entspricht 1px in der Regel einem physischen Pixel des Bildschirms.

+ Bei hochauflösenden Geräten wird die Anzahl physischer Pixel so bemessen, dass 1 Zoll ungefähr 96px entspricht, also für px eine theoretische Auflösung von 96dpi beibehalten wird.

+ 
cm

+ 
Zentimeter

+ 
mm

+ 
Millimeter

+ 
in

+ 
Zoll (Englisch: Inch). 1 Zoll = 2,54cm

+ 
pc

+ 
Picas. 1pc = 12pt = 1/6in

+ 
pt

+ 
Punkt, ein Wert aus dem Druckgewerbe. 1pt = 1/72in. pt wird häufig für Schriftgrößen auch in anderen Anwendungen verwendet.

+ 
mozmm {{ non-standard_inline() }}

+ 
Experimentelle Maßeinheit, die unter Berücksichtigung der Auflösung des Anzeigegeräts immer exakten Millimetern entspricht.

+

+
+
Beispiel

+
+
HTML

+
+
<div style="width: 10em;">10em</div>
+<div style="width: 10ex;">10ex</div>
+<div style="width: 10ch;">10ch</div>
+<div style="width: 10vh;">10vh</div>
+<div style="width: 10vw;">10vw</div>
+<div style="width: 10vmin;">10vmin</div>
+<div style="width: 10vmax;">10vmax</div>
+<div style="width: 100px;">100px</div>
+<div style="width: 10cm;">10cm</div>
+<div style="width: 10mm;">10mm</div>
+<div style="width: 10in;">10in</div>
+<div style="width: 10pc;">10pc</div>
+<div style="width: 50pt;">50pt</div>
+

+
+
CSS

+
+
div {
+    background-color: green;
+    margin: 6px;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample('Beispiel', '', '', '', 'Web/CSS/length') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS4 Values', '#lengths', '')}}{{Spec2('CSS4 Values')}}vi, vb, ic, lh, und rlh hinzugefügt.
{{ SpecName('CSS3 Values', '#lengths', '<length>') }}{{ Spec2('CSS3 Values') }}ch, rem, vw, vh, vmin, vmax hinzugefügt
{{ SpecName('CSS2.1', 'syndata.html#length-units', '<length>') }}{{ Spec2('CSS2.1') }}pt, pc, px definiert
{{ SpecName('CSS1', '#length-units', '<length>') }}{{ Spec2('CSS1') }}

+
+
Browserkompatibilität

+
+
{{Compat("css.types.length")}}

diff --git a/files/de/web/css/letter-spacing/index.html b/files/de/web/css/letter-spacing/index.html
new file mode 100644
index 0000000000..ffd4a58d94
--- /dev/null
+++ b/files/de/web/css/letter-spacing/index.html
@@ -0,0 +1,117 @@
+---
+title: letter-spacing
+slug: Web/CSS/letter-spacing
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/letter-spacing
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die letter-spacing CSS Eigenschaft gibt das Abstandsverhalten zwischen Textzeichen an.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <length> Werte */
+letter-spacing: 0.3em;
+letter-spacing: 3px;
+letter-spacing: .3px;
+
+/* Schlüsselwortwerte */
+letter-spacing: normal;
+
+/* Globale Werte */
+letter-spacing: inherit;
+letter-spacing: initial;
+letter-spacing: unset;
+

+
+
Werte

+
+

+ 
normal

+ 
Die Abstände sind die normalen Abstände für die aktuelle Schriftart. Im Gegensatz zu einem Wert von 0, erlaubt es dieser Wert dem User Agent, den Leerraum zwischen Zeichen zu ändern, um Text im Block anzuordnen.

+ 
<length>

+ 
Beschreibt Leerraum zwischen den Zeichen zusätzlich zum Standardleerraum zwischen Zeichen. Werte können negativ sein, aber es kann implementationsspezifische Beschränkungen geben. User Agents können den Leerraum zwischen den Zeichen nicht weiter verringern oder vergrößern, um den Text im Block anzuordnen.

+ Siehe {{cssxref("length")}} Werte für mögliche Einheiten.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML Inhalt

+
+
<p class="first-example"> letter spacing </p>
+<p class="second-example"> letter spacing </p>
+<p class="third-example"> letter spacing </p>
+<p class="fourth-example"> letter spacing </p>
+

+
+
CSS Inhalt

+
+
.first-example { letter-spacing: 0.4em; }
+.second-example { letter-spacing: 1em; }
+.third-example { letter-spacing: -0.05em; }
+.fourth-example { letter-spacing: 6px; }
+

+
+
{{ EmbedLiveSample('Beispiele', 440, 185) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#letter-spacing-property', 'letter-spacing')}}{{Spec2('CSS3 Text')}}Keine Änderung
{{SpecName('CSS3 Transitions', '#animatable-css', 'letter-spacing')}}{{Spec2('CSS3 Transitions')}}Definiert letter-spacing als animierbar.
{{SpecName('CSS2.1', 'text.html#propdef-letter-spacing', 'letter-spacing')}}{{Spec2('CSS2.1')}}Keine Änderung
{{SpecName('SVG1.1', 'text.html#LetterSpacingProperty', 'letter-spacing')}}{{Spec2('SVG1.1')}}Ursprüngliche SVG Definition
{{SpecName('CSS1', '#letter-spacing', 'letter-spacing')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.letter-spacing")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("font-kerning")}}
    • 
+

diff --git a/files/de/web/css/line-break/index.html b/files/de/web/css/line-break/index.html
new file mode 100644
index 0000000000..7338a176c7
--- /dev/null
+++ b/files/de/web/css/line-break/index.html
@@ -0,0 +1,72 @@
+---
+title: line-break
+slug: Web/CSS/line-break
+tags:
+  - CSS
+  - CSS Text
+  - NeedsExample
+  - Property
+  - Referenz
+translation_of: Web/CSS/line-break
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Die line-break CSS Eigenschaft wird dazu verwendet, wie (oder ob) Zeilen umgebrochen werden sollen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+line-break: auto;
+line-break: loose;
+line-break: normal;
+line-break: strict;
+
+/* Globale Werte */
+line-break: inherit;
+line-break: initial;
+line-break: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Text wird nach der Standardregel zum Umbrechen von Zeilen umgebrochen.

+ 
loose

+ 
Text wird umgebrochen, sodass die Zeile kürzer ist, wie bei einer Zeitung.

+ 
normal

+ 
Text wird nach der allgemeinen Regel zum Umbrechen von Zeilen umgebrochen.

+ 
strict

+ 
Text wird nach der strikten Regel zum Umbrechen von Zeilen umgebrochen.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#line-break-property', 'line-break')}}{{Spec2('CSS3 Text')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.line-break")}}
diff --git a/files/de/web/css/linear-gradient()/index.html b/files/de/web/css/linear-gradient()/index.html
new file mode 100644
index 0000000000..127a082f2a
--- /dev/null
+++ b/files/de/web/css/linear-gradient()/index.html
@@ -0,0 +1,332 @@
+---
+title: linear-gradient()
+slug: Web/CSS/linear-gradient()
+translation_of: Web/CSS/linear-gradient()
+---
+
{{ CSSRef() }}

+
+
Die CSS linear-gradient() Funktion erstellt ein {{cssxref("<image>")}} welches aus einem konstanten Farbverlauf besteht. Das Ergebnis dieser Funktion ist ein Objekt des CSS {{cssxref("<gradient>")}} Daten-Typs. Wie jeder andere Farbverlauf, ist der CSS Farbverlauf keine CSS {{cssxref("<color>")}} sondern ein Bild mit keinen spezifischen Dimensionen; Also hat er weder eine natürliche oder bevorzugte Größe, noch ein Größenverhältnis. Seine genaue Größe wird durch die Größe seines zugehörigen Elements bedingt.

+
+
Ein konstanter Farbverlauf wird durch eine Achse, die gradient line, definiert wobei jeder Punkt auf dieser Linie eine andere Farbe hat. Senkrecht zur gradient line stehende Linien haben jeweils eine Farbe, die des jeweiligen Schnittpunks mit der gradient line.

+
+
 

+
+
linear-gradient.pngDie gradient line wird definiert durch einen Winkel und dem Mittelpunkt des Quadrates auf dem das gradienten Bild abgebildet wird. Der Farbverlauf wird durch verschiedene Punkte definiert, dem Startpunkt, dem Endpunkt und den optional dazwischen liegenden Farbunterbrechungspunkten.

+
+
Der Startpunkt ist der Punkt auf der gradient line, auf dem auch die Farbe anfängt. Er liegt genau auf dem Schnittpunkt der gradient line und einer Linie die senkrecht zu der Ecke des Bildes verläuft das im gleichen Quadranten liegt.  

+
+
So ist auch der Endpunkt ein Punkt, an dem einer der beiden ausgesuchten Farben ganz erreicht wird. Er liegt auch genauso auf dem Schnittpunkt zwischen der gradient line und der aus der Ecke im gleichen Quadranten senkrecht verlaufenden Linie , einfacher ist er aber als Punktsymmetrische Spiegelung zum Startpunkt zu sehen, wobei der Spiegelpunkt dabei auf der Mitte des Bildes liegt.  

+
+
Diese ungefähre und komplexe Definition des Start- und Endpunkts führt uns zu einer interessanten Eigenschaft, die manchmal magic corners genannt wird: die benachbarten Ecken der Start- und Endpunkte haben die gleiche Farbe, wie die jeweiligen Start- und Endpunkte.

+
+
Mehr als nur die Farben des Start- und Endpunkts können festgesetzt werden.  Durch das definieren einiger Farbunterbrechungen, kann der Web-Entwickler einen mehr individuellen Übergang zwischen den Start- und den Endpunktfarben erreichen , oder einen mehrfarbigen Farbverlauf erstellen.

+
+
Der Syntax eines konstanten Farberlaufes erlaubt zwar keine Wiederholung von Farbverläufen, aber durch das Setzen von Farbunterbrechungen kann ein ähnlicher Effekt erzielt werden. Für wiederholende Farbverläufe ist die {{ Cssxref("repeating-linear-gradient") }} CSS Eigenschaft geeignet.

+
+
Wenn die Position einer Farbunterbrechung bedingungslos definiert wird, wird er genau auf halben Weg zwischen dem vorhergehenden und dem nachfolgenden Punkt gesetzt.  Außerdem kann die Position genau bestimmt werden, indem ein {{cssxref("<length>")}} oder ein {{cssxref("<percentage>")}} CSS Datentyp benutzt wird.

+
+
Farbverläufe sind als CSS <image> Datentypen definiert; sie können nur dann benutzt werden, wenn auch ein <image> Datentyp benötigt ist. Aus diesem Grund, wird ein linear-gradient nicht bei einer {{ Cssxref("background-color") }} und anderen Eigenschaften, die eine {{cssxref("<color>")}} benötigen,  funktionieren.

+
+
Syntax

+
+
linear-gradient(
+  [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
+  \---------------------------------/ \----------------------------/
+    Definition of the gradient line        List of color stops
+
+where <side-or-corner> = [left | right] || [top | bottom]
+  and <color-stop>     = <color> [ <percentage> | <length> ]?
+

+
+
linear-gradient( 45deg, blue, red );           /* A gradient on 45deg axis starting blue and finishing red */
+linear-gradient( to left top, blue, red);      /* A gradient going from the bottom right to the top left starting blue and
+                                                  finishing red */
+
+linear-gradient( 0deg, blue, green 40%, red ); /* A gradient going from the bottom to top, starting blue, being green after 40%
+                                                  and finishing red */
+

+
+
Values

+
+

+ 
<side-or-corner>

+ 
Represents the position of the starting-point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keyword is optional.

+ The values to top, to bottom, to left and to right are translated into the angles 0deg, 180deg, 270deg, 90deg respectively. The others are translated into an angle that let the starting-point to be in the same quadrant than the described corner and so that the line defined by the starting-point and the corner is perpendicular to the gradient line. That way, the color described by the <color-stop> will exactly apply to the corner point. This is sometimes called the "magic corner" property. The end-point of the gradient line is the symmetrical point of the starting-point on the other direction of the center box.

+ 
<angle>

+ 
An angle of direction for the gradient. See {{ cssxref("<angle>") }}.

+ 
<color-stop>

+ 
This value is comprised of a {{cssxref("<color>")}} value, followed by an optional stop position (either a percentage or a {{cssxref("<length>")}} along the gradient axis).

+ Rendering of color-stops in CSS gradients follows the same rules as color-stops in SVG gradients.

+

+
+
History of the syntax

+
+
The syntax of linear-gradient has evolved since the first Apple proposal implemented in 2008:

+
+
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)
+

+
+
In the original syntax, the same function was used to create both linear and radial gradients.  However, the parameters needed in each case were different, resulting in a syntax that varied with the value of the first parameter.  The situation became more complicated if  other types of gradients, like conical gradients, were added, requiring the use of functions and non-standard or inconsistent css value specifications.  No draft was proposed to the W3C.

+
+
An alternative syntax was proposed and implemented by Mozilla in 2009.  In this syntax, two CSS functions would be required; one for linear gradients, and the other for radial gradients. However, this syntax never shipped in a released product.  A third syntax was proposed.  This third syntax simplified the syntax for linear gradients to:

+
+
-moz-linear-gradient([ [ [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+

+
+
The new syntax did not require the to(), from()and color-stop() functions, so they were dropped. The order of the top/bottom and left/right keywords was also recognized as unimportant, so Mozilla removed the constraint of having top/bottom defined first. 

+
+
But the new syntax had still had one drawback: it allowed only vertical and horizontal gradients.  Finally, the syntax below was proposed to the W3C.  Following two more changes to solve the limitation on the direction of gradients, it was added to the CSS Images Values and Content Replacement Level 3 draft in 2011.

+
+
    
+ 
  • The support of an {{ cssxref("<angle>") }} as an origin, allowing gradients of any direction.
    • 
+ 
  • The definition of the magic corner algorithm which eases the work of Web developers by allowing an easy definition of the exact color at the corners.
    • 
+

+
+
The color interpolation is also defined as happening in the pre-multiplied color space, in order to prevent non esthetic grey to appear when using color with different opacity. This syntax was implemented, prefixed, by both Webkit, without dropping the original one, and Trident (IE 10):

+
+
linear-gradient( [ [ {{cssxref("<angle>")}} | [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+

+
+
Unfortunately, the addition of the {{ cssxref("<angle>") }} values to the syntax introduced an incoherence: the angle indicates a destination, but the keywords indicate a starting point.# This was fixed by a new syntax where the keyword are directions too, and preceded by the to keyword.

+
+
linear-gradient([ [ [ {{cssxref("<angle>")}} | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
+

+
+
This should be the final syntax.

+
+
A last semantic curiosity still exists between the prefixed variants and the unprefixed proposal. Following the initial Apple proposal, the prefixed variants of the syntax all uses the an {{ cssxref("<angle>") }} defined like polar angles, that is with 0deg representing the East. To be coherent with the rest of CSS, the specification defines an angle with 0deg representing the North. To prevent sites using prefixed version of the property to get suddenly broken, even when adapting to the otherwise forward-compatible final syntax, they keep the original angle definition (0deg = East). They will switch to the correct spec when unprefixing the property. Also, as they aren't incompatible, Gecko supports, prefixed, both the syntax with the to keyword and without. Here again, the syntax without the keyword will be dropped when unprefixing.

+
+
Examples

+
+
Gradient at a 45 degree angle

+
+
Positions can be specified along the gradient axis with a color for each of them, called "color-stops", and the areas between every color-stop smoothly transition between each other. Any one color in the gradient forms a straight line that is perpendicular to the gradient axis. In the below image, the gradient's axis starts from the top-left corner of the div, and is directed at a 45 degree angle. Two color-stops are specified, red and blue.

+
+
<div style="width: 200px; height: 200px;"></div>

+
+
div {
+  background: linear-gradient(135deg, red, blue);
+}

+
+
Result:

+
+
{{ EmbedLiveSample("Gradient_at_a_45_degree_angle") }}

+
+
Gradient that starts at 60% of the gradient line

+
+
Sometimes we don't want a gradient that starts at the beginning of the line, but later. To reach this, add a color stop with same color where you want the gradient to start.

+
+
<div style="width: 200px; height: 200px;"></div>

+
+
div {
+  background: linear-gradient(135deg, red, red 60%, blue);
+}

+
+
Result:

+
+
{{ EmbedLiveSample("Gradient_that_starts_at_60_of_the_gradient_line") }}

+
+
Gradient with multiple color stops

+
+
If the first color-stop does not have a <length> or <percentage>, it defaults to 0%. If the last color-stop does not have a <length> or <percentage>, it defaults to 100%. If a color-stop doesn't have a specified position and it isn't the first or last stop, then it is assigned the position that is half way between the previous stop and next stop.

+
+
Color-stops must be specified in order. After assigning default values to the first and last stops if necessary, if a color-stop has a specified position that is less than the specified position of any color-stop before it in the list, its position is changed to be equal to the largest specified position of any color-stop before it.

+
+
<div>A rainbow made from a gradient</div>

+
+
div {
+  background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
+}
+

+
+
Result:

+
+
{{ EmbedLiveSample("Gradient_with_multiple_color_stops") }}

+
+
Repeating a linear gradient

+
+
The linear-gradient does not allow repeating gradients. By default, the gradient will stretch to fill the element it is defined on. For this functionality, see {{ Cssxref("repeating-linear-gradient") }}.

+
+
Using transparency

+
+
<div>Linear with transparency</div>

+
+
div {
+  background: linear-gradient(to bottom right, red, rgba(255,0,0,0));
+}

+
+
Result:

+
+
{{ EmbedLiveSample("Using_transparency") }}

+
+
Gradient backgrounds are not affected by {{ Cssxref("background-size") }} if all points and lengths are specified using fixed units (as opposed to percentages or keywords, which are relative to the value of background-size).

+
+
Notes

+
+
If you set the {{ cssxref("background-image") }} property of the {{ HTMLElement("body") }} tag to a linear-gradient, the gradient won't fill the browser screen unless you also set the {{ cssxref("min-height") }} property of the document root (e.g. the {{ HTMLElement("html") }} tag) to 100%.

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{ SpecName('CSS3 Images', '#linear-gradients', 'linear-gradient()') }}{{ Spec2('CSS3 Images') }}Initial definition

+
+
Browser compatibility

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support (on {{ cssxref("background") }} and {{ cssxref("background-image") }}){{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}[3]

+    {{ CompatGeckoDesktop("16") }}[5]		10.0 (534.16){{ property_prefix("-webkit") }} [2][3]10.0 [1]11.10{{ property_prefix("-o") }} [3]5.1{{ property_prefix("-webkit") }}[2][3]
On {{cssxref("border-radius")}}{{CompatGeckoDesktop("29")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
On any other property that accept {{cssxref("<image>")}}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Legacy webkit syntax{{ non-standard_inline() }}{{ CompatNo() }}3{{ property_prefix("-webkit") }} [2]{{ CompatNo() }}{{ CompatNo() }}4.0{{ property_prefix("-webkit") }}[2]
Legacy from syntax (without to){{ non-standard_inline() }}{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} [4]10.0 (534.16){{ property_prefix("-webkit") }} [2]1011.10{{ property_prefix("-o") }}[4]5.1{{ property_prefix("-webkit") }}[2]
Standard syntax (using the to keyword){{CompatGeckoDesktop("16")}}26.0 (537.27)1012.106.1
Interpolation hints (a percent without a color){{CompatGeckoDesktop("36")}}40 27 

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureFirefox (Gecko)ChromeInternet ExplorerOpera (Presto)Safari
Basic support{{ CompatGeckoMobile("1.9.2") }}{{ property_prefix("-moz") }}[3]

+    {{ CompatGeckoMobile("16") }}[5]		
+    
16{{property_prefix("-webkit")}}

+     26

+   		10{{CompatVersionUnknown}}{{CompatVersionUnknown}}

+

+
+
[1] Internet Explorer 5.5 through 9.0 supports proprietary filter: progid:DXImageTransform.Microsoft.Gradient() filter.

+
+
[2] WebKit since 528 supports the legacy -webkit-gradient(linear,…) function. As of WebKit 534.16, it also supports the standard gradient syntax. Unlike in Gecko, in legacy WebKit you cannot specify both a position and angle in -webkit-linear-gradient(). You can achieve the same effect by offsetting the color stops.

+
+
[3] Gecko, Opera & Webkit considers {{ cssxref("<angle>") }} to start to the right, instead of the top. I.e. it considered an angle of 0deg as a direction indicator pointing to the right. This is different from the latest specification where an angle of 0deg as a direction indicator points to the top.

+
+
[4] Firefox 3.6 and Opera 11.10 implemented, prefixed, an early syntax where the starting corner or side was indicated without the to keyword, and effectively considered as a from position. The to syntax has been added in Firefox 10 and Opera 11.60 , at first without removing the deprecated syntax and translation between the two is trivial:

+
+
linear-gradient(to top left, blue, red);

+
+
is almost the same as:

+
+
-moz-linear-gradient(bottom right, blue, red);

+
+
The legacy syntax, without to, is planned to go away when the prefix is removed.

+
+
[5]Before Firefox 36, Gecko didn't apply gradient on the pre-multiplied color space, leading to shade of grey unexpectedly appearing when used with transparency.

+
+
Cross-browser gradients

+
+
Considering all prefixes above, here is a gradient from pink to green, top to bottom.

+
+
.grad {
+  background-color: #F07575; /* fallback color if gradients are not supported */
+  background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
+  background-image:    -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For Firefox (3.6 to 15) */
+  background-image:      -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); /* For old Opera (11.1 to 12.0) */
+  background-image:         linear-gradient(to bottom, hsl(0, 80%, 70%), #bada55); /* Standard syntax; must be last */
+}
+

+
+
The -moz- prefixed rules are used for compatibility with older versions (Fx 3.6 to Fx 15). The -webkit-prefix is the only one that still needs to be included for Android 4.3-, iOS up to 6.1, and Safari 6. When using a prefix, do not use 'to'.

+
+
See also

+
+
+
+
 

diff --git a/files/de/web/css/list-style-image/index.html b/files/de/web/css/list-style-image/index.html
new file mode 100644
index 0000000000..dba30b4191
--- /dev/null
+++ b/files/de/web/css/list-style-image/index.html
@@ -0,0 +1,102 @@
+---
+title: list-style-image
+slug: Web/CSS/list-style-image
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/list-style-image
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die list-style-image CSS Eigenschaft gibt das Bild an, das als Aufzählungszeichen verwendet wird.

+
+
Es ist oft einfacher, die Kurzform Eigenschaft {{ cssxref("list-style") }} zu verwenden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+list-style-image: none;
+
+/* <url> Werte */
+list-style-image: url('starsolid.gif');
+
+/* Globale Werte */
+list-style-image: inherit;
+list-style-image: initial;
+list-style-image: unset;
+

+
+
Werte

+
+

+ 
<uri>

+ 
Adresse des Bildes, das als Aufzählungszeichen verwendet werden soll.

+ 
none

+ 
Gibt an, dass kein Bild als Aufzählungszeichen verwendet werden soll. Falls dieser Wert gesetzt ist, wird das in {{ Cssxref("list-style-type") }} definierte Aufzählungszeichen verwendet.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
HTML

+
+
<ul>
+    <li>Item 1</li>
+    <li>Item 2</li>
+</ul>
+

+
+
CSS

+
+
ul {
+  list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif")
+}

+
+
Result

+
+
{{EmbedLiveSample('Beispiele')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Lists', '#list-style-image', 'list-style-image') }}{{ Spec2('CSS3 Lists') }}Erweitert die Unterstützung auf beliebige {{cssxref("<image>")}} Datentypen.
{{ SpecName('CSS2.1', 'generate.html#propdef-list-style-image', 'list-style-image') }}{{ Spec2('CSS2.1') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.list-style-image")}}
+
+
Siehe auch

+
+
    
+ 
  • {{ Cssxref("list-style") }}, {{ Cssxref("list-style-type") }}, {{ Cssxref("list-style-position") }}
    • 
+

diff --git a/files/de/web/css/list-style-position/index.html b/files/de/web/css/list-style-position/index.html
new file mode 100644
index 0000000000..6645dafb85
--- /dev/null
+++ b/files/de/web/css/list-style-position/index.html
@@ -0,0 +1,116 @@
+---
+title: list-style-position
+slug: Web/CSS/list-style-position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/list-style-position
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die list-style-position CSS Eigenschaft gibt die Position der Aufzählungszeichenbox innerhalb der Hauptblockbox an.

+
+
Es ist oft einfacher, die Kurzform Eigenschaft {{cssxref("list-style")}} zu verwenden.

+
+
{{cssinfo("list-style-position")}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("list-style-position")}}

+
+
list-style-position: inside
+list-style-position: outside
+
+list-style-position: inherit
+

+
+
Werte

+
+

+ 
outside

+ 
Die Aufzählungszeichenbox liegt außerhalb der Hauptblockbox.

+ 
inside

+ 
Die Aufzählungszeichenbox ist die erste Inlinebox der Hauptblockbox, nach der der Inhalt des Elements steht.

+

+
+
Beispiel

+
+
HTML

+
+
<ul class="one"> List 1
+  <li>List Item 1-1</li>
+  <li>List Item 1-2</li>
+  <li>List Item 1-3</li>
+  <li>List Item 1-4</li>
+</ul>
+<ul class="two"> List 2
+  <li>List Item 2-1</li>
+  <li>List Item 2-2</li>
+  <li>List Item 2-3</li>
+  <li>List Item 2-4</li>
+</ul>
+<ul class="three"> List 3
+  <li>List Item 3-1</li>
+  <li>List Item 3-2</li>
+  <li>List Item 3-3</li>
+  <li>List Item 3-4</li>
+</ul>

+
+
CSS

+
+
.one {
+  list-style:square inside;
+}
+
+.two {
+  list-style-position: outside;
+  list-style-type: circle;
+}
+
+.three {
+  list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif");
+  list-style-position: inherit;
+}

+
+
Result

+
+
{{EmbedLiveSample("Beispiel","200","420")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Lists', '#list-style-position', 'list-style-position')}}{{Spec2('CSS3 Lists')}}Keine Änderung
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.list-style-position")}}
+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-type")}}, {{Cssxref("list-style-image")}}
    • 
+

diff --git a/files/de/web/css/list-style-type/index.html b/files/de/web/css/list-style-type/index.html
new file mode 100644
index 0000000000..d2831799ac
--- /dev/null
+++ b/files/de/web/css/list-style-type/index.html
@@ -0,0 +1,562 @@
+---
+title: list-style-type
+slug: Web/CSS/list-style-type
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Liste
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/list-style-type
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS-Eigenschaft list-style-type bestimmt, wie die Einträge einer Liste ausgezeichnet werden. Übliche Arten sind etwa Punkte oder eine Nummerierung vor jedem Eintrag:

+
+
    
+ 
  • Erster Eintrag
    • 
+ 
  • Zweiter Eintrag
    • 
+

+
+
    
+ 
  1. Numerierte Einträge
    2. 
+ 
  2. Numerierte Einträge
    3. 
+

+
+
Meist wird diese Eigenschaft mit dem {{HTMLElement("li")}}-Element in Verbindung gebracht. Tatsächlich kann es sich jedoch um jedes beliebige Element handeln, dessen {{cssxref("display")}}-Eigenschaft list-item ist.

+
+

+
Hinweis:  list-style-type ist eine Eigenschaft von Listenelementen, nicht von Listen. Da sie vererbt wird, kann sie jedoch statt beim Listenelement selbst auch bei seinem Elternelement gesetzt werden (in der Regel {{HTMLElement("ol")}} or {{HTMLElement("ul")}}).

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Werte

+
+

+ 
none

+ 
Es wird kein Aufzählungszeichen angezeigt.

+ 
{{cssxref("<string>")}}

+ 
Der gebene, in Anführungszeichen gesetzte Text wird vor jedem Listeneintrag angezeigt. Beispiel: list-style-type: '-'

+ 
{{cssxref("symbols()")}}

+ 
Statt über {{cssxref("@counter-style")}} eine Aufzählungsweise zu definieren, kann dies mit der Funktion symbols() auch direkt in der Eigenschaft list-style-type geschehen.

+ Da diese Aufzählungsweise im Gegensatz zu per @counter-style definierten keinen Namen hat, wird sie auch als "anonym" bezeichnet.

+ 
{{cssxref("custom-ident", "<custom-ident>")}}

+ 
Ein Bezeichner, der dem Wert einer {{cssxref("@counter-style")}}-Regel entspricht oder einem der folgenden Stile:

+

+
+

+ 
disc

+ 

+ 
    
+  
  • Ein gefüllter Kreis (Standardwert)
    • 
+ 

+ 

+ 
circle

+ 

+ 
    
+  
  • Ein leerer Kreis
    • 
+ 

+ 

+ 
square

+ 

+ 
    
+  
  • Ein gefülltes Quadrat
    • 
+ 

+ 

+ 
decimal

+ 

+ 
    
+  
  • Dezimalzahlen
    • 
+  
  • Beginnend bei 1
    • 
+ 

+ 

+ 
cjk-decimal {{experimental_inline}}

+ 

+ 
    
+  
  • Han-Dezimalzahlen
    • 
+  
  • z. B. 一, 二, 三, ..., 九八, 九九, 一〇〇
    • 
+ 

+ 

+ 
decimal-leading-zero

+ 

+ 
    
+  
  • Dezimalzahlen
    • 
+  
  • Aufgefüllt mit vorangestellten Nullen
    • 
+  
  • z. B. 01, 02, 03, … 98, 99
    • 
+ 

+ 

+ 
lower-roman

+ 

+ 
    
+  
  • Kleingeschriebene römische Zahlen
    • 
+  
  • E.g. i, ii, iii, iv, v…
    • 
+ 

+ 

+ 
upper-roman

+ 

+ 
    
+  
  • Großgeschriebene römische Zahlen
    • 
+  
  • E.g. I, II, III, IV, V…
    • 
+ 

+ 

+ 
lower-greek

+ 

+ 
    
+  
  • Kleingeschriebene griechische Zahlworte
    • 
+  
  • Alpha, Beta, Gamma…
    • 
+  
  • z. B. α, β, γ…
    • 
+ 

+ 

+ 
lower-alpha

+ 
lower-latin

+ 

+ 
    
+  
  • Kleingeschriebene lateinische Buchstaben
    • 
+  
  • z. B. a, b, c, … z
    • 
+  
  • lower-latin wird nicht von IE7 und früher unterstützt
    • 
+  
  • Siehe den Unterpunkt {{anch("Browser-Kompatibilität")}}.
    • 
+ 

+ 

+ 
upper-alpha

+ 
upper-latin

+ 

+ 
    
+  
  • Großgeschriebene lateinische Buchstaben
    • 
+  
  • z. B. A, B, C, … Z
    • 
+  
  • upper-latin wird nicht von IE7 und früher unterstützt
    • 
+ 

+ 

+ 
arabic-indic

+ 
-moz-arabic-indic

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
armenian

+ 

+ 
    
+  
  • Traditionelle armenische Nummerierung
    • 
+  
  • z. B. ayb/ayp, ben/pen, gim/keem…
    • 
+ 

+ 

+ 
bengali

+ 
-moz-bengali

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
cambodian {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+  
  • Ist ein Synonym für Khmer
    • 
+ 

+ 

+ 
cjk-earthly-branch

+ 
-moz-cjk-earthly-branch

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
cjk-heavenly-stem

+ 
-moz-cjk-heavenly-stem

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
cjk-ideographic{{experimental_inline}}

+ 

+ 
    
+  
  • Identisch zu trad-chinese-informal
    • 
+  
  • Z. B. 一萬一千一百一十一
    • 
+ 

+ 

+ 
devanagari

+ 
-moz-devanagari

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
ethiopic-numeric {{experimental_inline}}

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
georgian

+ 

+ 
    
+  
  • Traditionelle georgische Nummerierung
    • 
+  
  • z. B. an, ban, gan, … he, tan, in…
    • 
+ 

+ 

+ 
gujarati

+ 
-moz-gujarati

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
gurmukhi

+ 
-moz-gurmukhi

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
hebrew {{experimental_inline}}

+ 

+ 
    
+  
  • Traditionelle hebräische Nummerierung
    • 
+ 

+ 

+ 
hiragana {{experimental_inline}}

+ 

+ 
    
+  
  • a, i, u, e, o, ka, ki, …
    • 
+  
  • (Japanisch)
    • 
+ 

+ 

+ 
hiragana-iroha {{experimental_inline}}

+ 

+ 
    
+  
  • i, ro, ha, ni, ho, he, to, …
    • 
+  
  • {{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.
    • 
+ 

+ 

+ 
japanese-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle japanische Nummerierung, wie sie in juristischen oder Wirtschaftsdokumenten verwendet wird.
    • 
+  
  • z. B. 壱萬壱阡壱百壱拾壱
    • 
+  
  • Änderungen an der Gestaltung der Kanji-Schriftzeichen, die zu Verwechslungen mit anderen führen könnten, werden unterdrückt.
    • 
+ 

+ 

+ 
japanese-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Formlose japanische Nummerierung
    • 
+ 

+ 

+ 
kannada

+ 
-moz-kannada

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
katakana {{experimental_inline}}

+ 

+ 
    
+  
  • A, I, U, E, O, KA, KI, …
    • 
+  
  • (Japanisch)
    • 
+ 

+ 

+ 
katakana-iroha {{experimental_inline}}

+ 

+ 
    
+  
  • I, RO, HA, NI, HO, HE, TO, …
    • 
+  
  • {{interwiki('wikipedia', 'Iroha')}} ist die alte japanische Silbenreihenfolge.
    • 
+ 

+ 

+ 
khmer

+ 
-moz-khmer

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
korean-hangul-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Koreanische Hangul-Nummerierung
    • 
+  
  • z. B. 일만 일천일백일십일
    • 
+ 

+ 

+ 
korean-hanja-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle koreanische Han-Nummerierung
    • 
+  
  • z. B. 壹萬 壹仟壹百壹拾壹
    • 
+ 

+ 

+ 
korean-hanja-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Koreanische Hanja-Nummerierung
    • 
+  
  • z. B. 萬 一千百十一
    • 
+ 

+ 

+ 
lao

+ 
-moz-lao

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
lower-armenian {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
malayalam

+ 
-moz-malayalam

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
mongolian {{experimental_inline}}

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
myanmar

+ 
-moz-myanmar

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
oriya

+ 
-moz-oriya

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
persian {{experimental_inline}}

+ 
-moz-persian

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
simp-chinese-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle Nummerierung in vereinfachtem Chinesisch
    • 
+  
  • z. B. 壹万壹仟壹佰壹拾壹
    • 
+ 

+ 

+ 
simp-chinese-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Formlose Nummerierung in vereinfachtem Chinesisch
    • 
+  
  • z. B. 一万一千一百一十一
    • 
+ 

+ 

+ 
tamil {{experimental_inline}}

+ 
-moz-tamil

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
telugu

+ 
-moz-telugu

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
thai

+ 
-moz-thai

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
tibetan {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
trad-chinese-formal {{experimental_inline}}

+ 

+ 
    
+  
  • Formelle Nummerierung in traditionellem Chinesisch
    • 
+  
  • z. B. 壹萬壹仟壹佰壹拾壹
    • 
+ 

+ 

+ 
trad-chinese-informal {{experimental_inline}}

+ 

+ 
    
+  
  • Formlose Nummerierung in traditionellem Chinesisch
    • 
+  
  • z. B. 一萬一千一百一十一
    • 
+ 

+ 

+ 
upper-armenian {{experimental_inline}}*

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
disclosure-open {{experimental_inline}}

+ 

+ 
    
+  
  • Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) sichtbar ist.
    • 
+ 

+ 

+ 
disclosure-closed {{experimental_inline}}

+ 

+ 
    
+  
  • Zeigt an, dass der zugehörige Seitenbereich (etwa {{HTMLElement("details")}}) versteckt ist.
    • 
+ 

+ 

+ 

+ 
    
+ 

+ 

+

+
+
Nicht standardisierte Erweiterungen

+
+
Zusätzliche Werte, die von Gecko (Firefox), Blink (Chrome und Opera) und WebKit (Safari) unterstützt werden, um Listenarten in anderen Sprachen anzubieten. Die Kompatibilitätstabelle weiter unten gibt nähere Auskunft zu den einzelnen Browsern.

+
+

+ 
-moz-ethiopic-halehame

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
-moz-ethiopic-halehame-am

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
ethiopic-halehame-ti-er

+ 
-moz-ethiopic-halehame-ti-er

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
ethiopic-halehame-ti-et

+ 
-moz-ethiopic-halehame-ti-et

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+ 
hangul

+ 
-moz-hangul

+ 

+ 
    
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+ 

+ 

+ 
hangul-consonant

+ 
-moz-hangul-consonant

+ 

+ 
    
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+  
  • Beispiel
    • 
+ 

+ 

+ 
urdu

+ 
-moz-urdu

+ 

+ 
    
+  
  • Beispiel
    • 
+ 

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
CSS

+
+
ol.normal {
+  list-style-type: upper-alpha;
+}
+
+/* Es kann auch die Kurzschreibweise "list-style" verwendet werden: */
+ol.shortcut {
+  list-style: upper-alpha;
+}

+
+
HTML

+
+
<ol class="normal">Liste 1
+  <li>Hallo</li>
+  <li>Welt</li>
+  <li>Was gibt's?</li>
+</ol>
+
+<ol class="shortcut">Liste 2
+  <li>Schaut</li>
+  <li>Gleich</li>
+  <li>aus</li>
+</ol>
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Beispiele", "200", "300")}}

+
+
Hinweise

+
+
    
+ 
  • Manche Listenarten setzen für die korrekte Darstellung voraus, dass eine passende Schriftart installiert ist.
    • 
+ 
  • cjk-ideographic ist identisch zu trad-chinese-informal; es existiert lediglich aus Gründen der Rückwärtskompatibilität.
    • 
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Lists', '#list-style-type', 'list-style-type')}}{{Spec2('CSS3 Lists')}}Definiert CSS2.1-Zähler neu.

+    Erweitert die Syntax um Unterstützung für @counter-style-Regeln.

+    Definiert unter Verwendung von @counter-style die üblichen Stiltypen: hebrew, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha, japanese-formal, japanese-informal, simp-chinese-formal, trad-chinese-formal, simp-chinese-formal, trad-chinese-formal,korean-hangul-formal, korean-hanja-informal, korean-hanja-formal, cjk-decimal, ethiopic-numeric, disclosure-open und disclosure-closed.

+    Erweitert <counter-style> um die Funktion symbols().
{{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.list-style-type")}}

+
+
Siehe auch

+
+
    
+ 
  • {{Cssxref("list-style")}}, {{Cssxref("list-style-image")}}, {{Cssxref("list-style-position")}}
    • 
+

diff --git a/files/de/web/css/list-style/index.html b/files/de/web/css/list-style/index.html
new file mode 100644
index 0000000000..17e4e515f9
--- /dev/null
+++ b/files/de/web/css/list-style/index.html
@@ -0,0 +1,104 @@
+---
+title: list-style
+slug: Web/CSS/list-style
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/list-style
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die list-style Eigenschaft ist eine Kurzform für {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}  und {{cssxref("list-style-position")}}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
list-style: [ list-style-type || list-style-position || list-style-image ] | inherit
+

+
+
Werte

+
+

+ 
list-style-type

+ 
Siehe  {{cssxref("list-style-type")}}

+ 
list-style-image

+ 
Siehe  {{cssxref("list-style-image")}}

+ 
list-style-position

+ 
Siehe  {{cssxref("list-style-position")}}

+

+
+
Beispiele

+
+
HTML

+
+
List 1
+<ul class="one">
+  <li>List Item1</li>
+  <li>List Item2</li>
+  <li>List Item3</li>
+</ul>
+List 2
+<ul class="two">
+  <li>List Item A</li>
+  <li>List Item B</li>
+  <li>List Item C</li>
+</ul>
+

+
+
CSS

+
+
.one {
+  list-style: circle;
+}
+
+.two {
+  list-style: square inside;
+}

+
+
Ergebnis

+
+
{{EmbedLiveSample('Beispiele')}}

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}
    • 
+

+
+
{{ languages({ "en": "en/CSS/list-style", "es": "es/CSS/list-style", "fr": "fr/CSS/list-style", "ja": "ja/CSS/list-style", "pl": "pl/CSS/list-style", "pt": "pt/CSS/list-style"}) }}

diff --git a/files/de/web/css/margin-bottom/index.html b/files/de/web/css/margin-bottom/index.html
new file mode 100644
index 0000000000..522efd3f45
--- /dev/null
+++ b/files/de/web/css/margin-bottom/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-bottom
+slug: Web/CSS/margin-bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-bottom
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-bottom Eigenschaft legt den unteren Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-bottom: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-bottom: 5%; }
+.sidebox { margin-bottom: 10px; }
+.logo    { margin-bottom: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-bottom", "ja": "ja/CSS/margin-bottom" } ) }}

diff --git a/files/de/web/css/margin-left/index.html b/files/de/web/css/margin-left/index.html
new file mode 100644
index 0000000000..e540e1f456
--- /dev/null
+++ b/files/de/web/css/margin-left/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-left
+slug: Web/CSS/margin-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-left
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-left Eigenschaft legt den linken Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-left: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-left: 5%; }
+.sidebox { margin-left: 10px; }
+.logo    { margin-left: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-left", "ja": "ja/CSS/margin-left" } ) }}

diff --git a/files/de/web/css/margin-right/index.html b/files/de/web/css/margin-right/index.html
new file mode 100644
index 0000000000..e651d4a53d
--- /dev/null
+++ b/files/de/web/css/margin-right/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-right
+slug: Web/CSS/margin-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-right
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-right Eigenschaft legt den rechten Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-right: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-right: 5%; }
+.sidebox { margin-right: 10px; }
+.logo    { margin-right: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-right", "ja": "ja/CSS/margin-right" } ) }}

diff --git a/files/de/web/css/margin-top/index.html b/files/de/web/css/margin-top/index.html
new file mode 100644
index 0000000000..daa9b03ad8
--- /dev/null
+++ b/files/de/web/css/margin-top/index.html
@@ -0,0 +1,87 @@
+---
+title: margin-top
+slug: Web/CSS/margin-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin-top
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin-top Eigenschaft legt den oberen Außenabstand eines Elements fest. Negative Werte sind erlaubt.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
margin-top: <Längenangabe> | <Prozentzahl> | auto | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { margin-top: 5%; }
+.sidebox { margin-top: 10px; }
+.logo    { margin-top: -5px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin-top", "ja": "ja/CSS/margin-top" } ) }}

diff --git a/files/de/web/css/margin/index.html b/files/de/web/css/margin/index.html
new file mode 100644
index 0000000000..dac915749a
--- /dev/null
+++ b/files/de/web/css/margin/index.html
@@ -0,0 +1,121 @@
+---
+title: margin
+slug: Web/CSS/margin
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/margin
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die margin Eigenschaft ist eine Kurzform für die Außenabstände aller vier Seiten eines Elements.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente, in Tabellen nur auf Elemente mit display table, table-caption und inline-table
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich immer auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: siehe einzelne Eigenschaften
    • 
+

+
Syntax

+
margin: <Längenwert>{1,4} | <Prozentzahl>{1,4} | inherit | auto
+

+
Werte

+
Es werden bis zu vier der folgenden Werte akzeptiert:

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte sind erlaubt.

+ 

+  auto

+ 

+  auto wird von einem passendem Wert ersetzt, wobei die horizontalen bzw. vertikalen Dimensionen berücksichtigt werden.

+  Bei div { width:50%; margin:0 auto; } wird das div Element horizontal zentriert.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+ 

+  Ein Wert

+ 

+  Gilt für alle vier Seiten.

+ 

+  Zwei Werte

+ 

+  Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.

+ 

+  Drei Werte

+ 

+  Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.

+ 

+  Vier Werte

+ 

+  Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

+

+
Beispiele

+
margin: 5%;                /* 5% Abstand auf allen Seiten */
+
+margin: 10px;              /* 10px Abstand auf allen Seiten */
+
+margin: 1.6em 20px;        /* 1.6em Abstand für oben und unten, 20px Abstand für rechts und links */
+
+margin: 10px 3% 1em;       /* oben 10px, links und rechts 3%, unten 1em */
+
+margin: 10px 3px 30px 5px; /* oben 10px, rechts 3px, unten 30px, links 5px */
+
+margin: 1em auto;          /* 1em Abstand oben und unten; die Box wird horizontal zentriert */
+
+margin: auto;              /* Die Box wird horizontal zentriert, kein Abstand (0) oben und unten */
+

+
margin:     auto;
+background: gold;
+width:      66%;

+
margin:     -1em 0 100px -40px;
+background: plum;
+width:      20em

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauto Wert
Internet Explorer3.06.0 (strict mode)
Firefox (Gecko)1.0 (1.0)1.0 (1.0)
Opera3.53.5
Safari (WebKit)1.0 (85)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/margin", "ja": "ja/CSS/margin" } ) }}

diff --git a/files/de/web/css/mask/index.html b/files/de/web/css/mask/index.html
new file mode 100644
index 0000000000..900127ae1b
--- /dev/null
+++ b/files/de/web/css/mask/index.html
@@ -0,0 +1,96 @@
+---
+title: mask
+slug: Web/CSS/mask
+tags:
+  - CSS
+  - Layout
+  - NeedsBrowserCompatibility
+  - Referenz
+  - SVG
+  - Web
+translation_of: Web/CSS/mask
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
The mask property in CSS allows users to alter the visibility of an item by either partially or fully hiding the item. This is accomplished by either masking or clipping the image at specific points.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+mask: none;
+
+/* Bildwerte */
+mask: url(mask.png);                       /* Pixelbild, das als Maske verwendet wird */
+mask: url(masks.svg#star);                 /* Element mit SVG-Grafik, die als Maske verwendet wird */
+
+/* Kombinierte Werte */
+mask: url(masks.svg#star) luminance;       /* Element mit SVG-Grafik, die als Helligkeitsmaske verwendet wird */
+mask: url(masks.svg#star) 40px 20px;       /* Element mit SVG-Grafik, die als Maske verwendet wird, die 40px vom oberen Rand und 20px vom linken Rand positioniert ist */
+mask: url(masks.svg#star) 0 0/50px 50px;   /* Element mit SVG-Grafik, die als Maske mit einer Breite und Höhe von 50px verwendet wird */
+mask: url(masks.svg#star) repeat-x;        /* Element mit SVG-Grafik, die als horizontal wiederholte Maske verwendet wird */
+mask: url(masks.svg#star) stroke-box;      /* Element mit SVG-Grafik, die als Maske verwendet wird, die sich bis zur Box erstreckt, die von der Kontur eingeschlossen wird */
+mask: url(masks.svg#star) exclude;         /* Element mit SVG-Grafik, die als Maske verwendet wird und deren nicht überlappende Teile mit dem Hintergrund kombiniert werden */
+
+/* Globale Werte */
+mask: inherit;
+mask: initial;
+mask: unset;
+

+
+
Werte

+
+
Falls der Wert ein URL Wert ist, wird das Element als SVG-Maske verwendet, dass durch die URI referenziert wird.

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.target {
+  mask: url(#c1);
+}
+
+.anothertarget {
+  mask: url(resources.svg#c1);
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS Masks", "#the-mask", 'mask')}}{{Spec2("CSS Masks")}}Erweitert die Benutzung auf HTML Elemente.

+    Erweitert die Syntax, indem sie als eine Kurzschreibweise für die neuen mask-* Eigenschaften in dieser Spezifikation definiert wird.
{{SpecName('SVG1.1', 'masking.html#MaskProperty', 'mask')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.mask")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/max-height/index.html b/files/de/web/css/max-height/index.html
new file mode 100644
index 0000000000..51205487ba
--- /dev/null
+++ b/files/de/web/css/max-height/index.html
@@ -0,0 +1,111 @@
+---
+title: max-height
+slug: Web/CSS/max-height
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/max-height
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die max-height Eigenschaft wird verwendet, um die maximale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der {{ Cssxref("height") }} Eigenschaft größer wird als der festgelegte Wert von max-height.

+
+
{{ Cssxref("max-height") }} überschreibt {{cssxref("height")}}, aber {{ Cssxref("min-height") }} überschreibt {{ Cssxref("max-height") }}.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <length> Wert */
+max-height: 3.5em;
+
+/* <percentage> Wert */
+max-height: 75%;
+
+/* Schlüsselwortwerte */
+max-height: none;
+max-height: max-content;
+max-height: min-content;
+max-height: fit-content;
+max-height: fill-available;
+
+/* Globale Werte */
+max-height: inherit;
+max-height: initial;
+max-height: unset;
+

+
+
Werte

+
+

+ 
<length>

+ 
Eine feste Maximalhöhe. Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ 
<percentage>

+ 
Der {{cssxref("<percentage>")}} Wert wird unter Berücksichtigung der Höhe des beinhaltenden Blocks berechnet. Falls die Höhe des beinhaltenden Blocks nicht explizit angegeben wurde, wird der prozentuale Wert als none behandelt.

+ 
none

+ 
Das Element verfügt über keine maximale Höhe.

+ 
max-content {{experimental_inline()}}

+ 
Die innere bevorzugte Höhe.

+ 
min-content {{experimental_inline()}}

+ 
Die innere Minimalhöhe.

+ 
fill-available {{experimental_inline()}}

+ 
Die Höhe des beinhaltenden Blocks minus dem horizontalen Außenabstand, Rand und Innenabstand. Einige Browser implementieren hierfür das veraltete Schlüsselwort available.

+ 
fit-content {{experimental_inline()}}

+ 
Hat die gleiche Bedeutung wie max-content.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
table { max-height: 75%; }
+
+form { max-height: none; }
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-height')}}{{Spec2('CSS3 Sizing')}}Fügt die Schlüsselwörter max-content, min-content, fit-content und fill-available hinzu.

+    Die Entwürfe zu CSS3 Box und CSS3 Writing Modes definierten zuvor beide diese Schlüsselwörter. Diese Entwürfe werden durch diese Spezifikation ersetzt.
{{SpecName('CSS3 Transitions', '#animatable-css', 'max-height')}}{{Spec2('CSS3 Transitions')}}Definiert max-height als animierbar.
{{SpecName('CSS2.1', 'visudet.html#min-max-heights', 'max-height')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.max-height")}}
+
+
Siehe auch

+
+
    
+ 
  • Das Boxmodell
    • 
+ 
  • {{cssxref("max-width")}}, {{cssxref("box-sizing")}}, {{cssxref("height")}}, {{cssxref("min-height")}}
    • 
+

diff --git a/files/de/web/css/max-width/index.html b/files/de/web/css/max-width/index.html
new file mode 100644
index 0000000000..e8c6d3c08d
--- /dev/null
+++ b/files/de/web/css/max-width/index.html
@@ -0,0 +1,139 @@
+---
+title: max-width
+slug: Web/CSS/max-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/max-width
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die max-width Eigenschaft wird verwendet, um die maximale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der width Eigenschaft nicht größer wird als der festgelegte Wert von max-width.

+
Hinweis: max-width überschreibt width, allerdings überschreibt min-width auch max-width.

+
    
+ 
  • Standardwert: none
    • 
+ 
  • Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe Browser Kompatibilität
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: die Prozentzahl wie festgelegt, die absolute Länge oder none
    • 
+

+
Syntax

+
max-width:  <Längenangabe> | <Prozentzahl> | none | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Siehe Länge für mögliche Einheiten.

+ 

+  Prozentzahl

+ 

+  Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.

+ 

+  none

+ 

+  Das Element verfügt über keine maximale Breite.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Mozilla Erweiterungen

+

+ 

+  -moz-max-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.

+ 

+  -moz-min-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.

+ 

+  -moz-available

+ 

+  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.

+ 

+  -moz-fit-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu -moz-max-content.

+

+
Beispiele

+
body  { max-width: 40em; }
+table { max-width: 75%; }
+form  { max-width: none; }
+

+
Beispiel 1 {{ gecko_minversion_inline("1.9") }}

+
p { background: gold }
+

+
The Mozilla community produces a lot of great software.

+
Beispiel 2 {{ gecko_minversion_inline("1.9") }}

+
p { background: lightgreen;
+    max-width:  intrinsic;         /* Safari/WebKit */
+    max-width:  -moz-max-content;  /* Firefox/Gecko */
+  }
+

+
The Mozilla community produces a lot of great software.

+
Beispiel 3 {{ gecko_minversion_inline("1.9") }}

+
p { background: lightblue;  max-width: -moz-min-content; }
+

+
The Mozilla community produces a lot of great software.

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
Browserab Versionauf <table> anwendbarintrinsische Breiteminimale intrinsische Breite
Internet Explorer7.0nein------------
Firefox (Gecko)1.0 (1.0)ja3.0 (1.9)-moz-max-content3.0 (1.9)-moz-min-content
Opera4.0ja------------
Safari (WebKit)2.0.2 (416), vorher fehlerhaftnein2.0 (412) ?intrinsic------

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/max-width", "es": "es/CSS/max-width", "fr": "fr/CSS/max-width" } ) }}

diff --git a/files/de/web/css/media_queries/index.html b/files/de/web/css/media_queries/index.html
new file mode 100644
index 0000000000..c6da1617ab
--- /dev/null
+++ b/files/de/web/css/media_queries/index.html
@@ -0,0 +1,76 @@
+---
+title: Media queries
+slug: Web/CSS/Media_Queries
+tags:
+  - CSS
+  - Media Queries
+  - NeedsTranslation
+  - Overview
+  - Reference
+  - TopicStub
+translation_of: Web/CSS/Media_Queries
+---
+
{{CSSRef}}

+
+
Media Queries is a module of CSS that defines expressions allowing to tailor presentations to a specific range of output devices without changing the content itself.

+
+
Reference

+
+
At-rules

+
+

+
    
+ 
  • {{cssxref("@import")}}
    • 
+ 
  • {{cssxref("@media")}}
    • 
+

+

+
+
Guides

+
+

+ 
Using media queries

+ 
Presents what media queries are doing and explains the possible expressions.

+ 
Testing media queries

+ 
Explains how to test a media query programmatically, from JavaScript.

+

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Conditional')}}{{Spec2('CSS3 Conditional')}} 
{{SpecName('CSS4 Media Queries')}}{{Spec2('CSS4 Media Queries')}}
+    


+      

+   
{{SpecName('CSS3 Media Queries')}}{{Spec2('CSS3 Media Queries')}} 
{{SpecName('CSS2.1', 'media.html')}}{{Spec2('CSS2.1')}} 

+
+
Browser compatibility

+
+{{Compat("css.at-rules.media")}}
diff --git a/files/de/web/css/media_queries/using_media_queries/index.html b/files/de/web/css/media_queries/using_media_queries/index.html
new file mode 100644
index 0000000000..f4d15a6c53
--- /dev/null
+++ b/files/de/web/css/media_queries/using_media_queries/index.html
@@ -0,0 +1,644 @@
+---
+title: Using media queries
+slug: Web/CSS/Media_Queries/Using_media_queries
+tags:
+  - NeedsTranslation
+translation_of: Web/CSS/Media_Queries/Using_media_queries
+---
+
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.

+
+
Syntax

+
+
Media queries consist of a media type and can, as of the CSS3 specification, contain one or more expressions, expressed as media features, which resolve to either true or false.  The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true.

+
+
<!-- CSS media query on a link element -->
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+
+<!-- CSS media query within a stylesheet -->
+<style>
+@media (max-width: 600px) {
+  .facet_sidebar {
+    display: none;
+  }
+}
+</style>

+
+
When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Style sheets with media queries attached to their <link> tags will still download even if their media queries would return false (they will not apply, however).

+
+
Unless you use the not or only operators, the media type is optional and the all type will be implied.

+
+
Logical operators

+
+
You can compose complex media queries using logical operators, including not, and, and only. The and operator is used for combining multiple media features together into a single media query, requiring each chained feature to return true in order for the query to be true. The not operator is used to negate an entire media query. The only operator is used to apply a style only if the entire query matches, useful for preventing older browsers from applying selected styles. If you use the not or only operators, you must specify an explicit media type.

+
+
You can also combine multiple media queries in a comma-separated list; if any of the media queries in the list is true, the entire media statement returns true. This is equivalent to an or operator.

+
+
and

+
+
The and keyword is used for combining multiple media features together, as well as combining media features with media types. A basic media query, a single media feature with the implied all media type, could look like this:

+
+
@media (min-width: 700px) { ... }

+
+
If, however, you wanted this to apply only if the display is in landscape, you could use an and operator to chain the media features together.

+
+
@media (min-width: 700px) and (orientation: landscape) { ... }

+
+
Now the above media query will only return true if the viewport is 700px wide or wider and the display is in landscape. If, however, you only wanted this to apply if the display in question was of the media type TV, you could chain these features with a media type using an and operator.

+
+
@media tv and (min-width: 700px) and (orientation: landscape) { ...  }

+
+
Now, the above media query will only apply if the media type is TV, the viewport is 700px wide or wider, and the display is in landscape.

+
+
comma-separated lists

+
+
Comma-separated lists behave like the logical operator or when used in media queries. When using a comma-separated list of media queries, if any of the media queries returns true, the styles or style sheets get applied. Each media query in a comma-separated list is treated as an individual query, and any operator applied to one media query does not affect the others. This means the comma-separated media queries can target different media features, types, and states.

+
+
For instance, if you wanted to apply a set of styles if the viewing device either had a minimum width of 700px or was a handheld in landscape, you could write the following:

+
+
@media (min-width: 700px), handheld and (orientation: landscape) { ... }

+
+
Above, if I were on a screen device with a viewport width of 800px, the media statement would return true because the first part, interpreted as @media all and (min-width: 700px) would apply to my device and therefore return true, despite the fact that my screen device would fail the handheld media type check in the second media query. Likewise, if I were on a handheld device held in landscape with a viewport width of 500px, while the first media query would fail due to the viewport width, the second media query would succeed and thus the media statement would return true.

+
+
not

+
+
The not keyword applies to the whole media query and returns true if the media query would otherwise return false (such as monochrome on a color display or a screen width of 600px with a min-width: 700px feature query). A not will only negate the media query it is applied to and not to every media query if present in a comma-separated list of media queries. The not keyword cannot be used to negate an individual feature query, only an entire media query. For example, the not is evaluated last in the following query:

+
+
@media not all and (monochrome) { ... }
+

+
+
This means that the query is evaluated like this:

+
+
@media not (all and (monochrome)) { ... }
+

+
+
... rather than like this:

+
+
@media (not all) and (monochrome) { ... }

+
+
As another example, look at the following media query:

+
+
@media not screen and (color), print and (color)
+

+
+
It is evaluated like this:

+
+
@media (not (screen and (color))), print and (color)

+
+
only

+
+
The only keyword prevents older browsers that do not support media queries with media features from applying the given styles:

+
+
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
+

+
+
Pseudo-BNF (for those of you that like that kind of thing)

+
+
media_query_list: <media_query> [, <media_query> ]*
+media_query: [[only | not]? <media_type> [ and <expression> ]*]
+  | <expression> [ and <expression> ]*
+expression: ( <media_feature> [: <value>]? )
+media_type: all | aural | braille | handheld | print |
+  projection | screen | tty | tv | embossed
+media_feature: width | min-width | max-width
+  | height | min-height | max-height
+  | device-width | min-device-width | max-device-width
+  | device-height | min-device-height | max-device-height
+  | aspect-ratio | min-aspect-ratio | max-aspect-ratio
+  | device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
+  | color | min-color | max-color
+  | color-index | min-color-index | max-color-index
+  | monochrome | min-monochrome | max-monochrome
+  | resolution | min-resolution | max-resolution
+  | scan | grid

+
+
Media queries are case insensitive.  Media queries involving unknown media types are always false.

+
+
Note: Parentheses are required around expressions; failing to use them is an error.

+
+
Media features

+
+
Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints.  This avoids using the "<" and ">" symbols, which would conflict with HTML and XML.  If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.

+
+
Note: If a media feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false.  For example, querying the aspect ratio of an aural device always results in false.

+
+
color

+
+
Value: {{cssxref("<color>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the number of bits per color component of the output device.  If the device is not a color device, this value is zero.

+
+
Note: If the color components have different numbers of bits per color component, the smallest number is used.  For example, if a display uses 5 bits for blue and red and 6 bits for green, then the device is considered to use 5 bits per color component.  If the device uses indexed colors, the minimum number of bits per color component in the color table is used.

+
+
Examples

+
+
To apply a style sheet to all color devices:

+
+
@media all and (color) { ... }
+

+
+
To apply a style sheet to devices with at least 4 bits per color component:

+
+
@media all and (min-color: 4) { ... }
+

+
+
color-index

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the number of entries in the color look-up table for the output device.

+
+
Examples

+
+
To indicate that a style sheet should apply to all devices using indexed color, you can do:

+
+
@media all and (color-index) { ... }
+

+
+
To apply a style sheet to indexed color devices with at least 256 colors:

+
+
<link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" />
+

+
+
aspect-ratio

+
+
Value: {{cssxref("<ratio>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the aspect ratio of the targeted display area of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

+
+
Example

+
+
The following selects a special style sheet to use for when the display area is at least as wide as it is high.

+
+
@media screen and (min-aspect-ratio: 1/1) { ... }

+
+
This selects the style when the aspect ratio is either 1:1 or greater. In other words, these styles will only be applied when the viewing area is square or landscape.

+
+
device-aspect-ratio

+
+
Value: {{cssxref("<ratio>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the aspect ratio of the output device.  This value consists of two positive integers separated by a slash ("/") character.  This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

+
+
Example

+
+
The following selects a special style sheet to use for widescreen displays.

+
+
@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }

+
+
This selects the style when the aspect ratio is either 16:9 or 16:10.

+
+
device-height

+
+
Value: {{cssxref("<length>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

+
+
Example

+
+
To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:

+
+
<link rel="stylesheet" media="screen and (max-device-height: 799px)" />
+

+
+
device-width

+
+
Value: {{cssxref("<length>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

+
+
Example

+
+
To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:

+
+
<link rel="stylesheet" media="screen and (max-device-width: 799px)" />

+
+
grid

+
+
Value: <mq-boolean> which is an {{cssxref("<integer>")}} that can only have the 0 and 1 value.

+ Media: all

+ Accepts min/max prefixes: no

+
+
Determines whether the output device is a grid device or a bitmap device.  If the device is grid-based (such as a TTY terminal or a phone display with only one font), the value is 1.  Otherwise it is zero.

+
+
Example

+
+
To apply a style to handheld devices with a 15-character or narrower display:

+
+
@media handheld and (grid) and (max-width: 15em) { ... }
+

+
+
Note: The "em" unit has a special meaning for grid devices; since the exact width of an "em" can't be determined, 1em is assumed to be the width of one grid cell horizontally, and the height of one cell vertically.

+
+
height

+
+
Value: {{cssxref("<length>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
The height media feature describes the height of the output device's rendering surface (such as the height of the viewport or of the page box on a printer).

+
+
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.

+
+
monochrome

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the number of bits per pixel on a monochrome (greyscale) device.  If the device isn't monochrome, the device's value is 0.

+
+
Examples

+
+
To apply a style sheet to all monochrome devices:

+
+
@media all and (monochrome) { ... }
+

+
+
To apply a style sheet to monochrome devices with at least 8 bits per pixel:

+
+
@media all and (min-monochrome: 8) { ... }
+

+
+
orientation

+
+
Value: landscape | portrait

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
Indicates whether the viewport is in landscape (the display is wider than it is tall) or portrait (the display is taller than it is wide) mode.

+
+
Example

+
+
To apply a style sheet only in portrait orientation:

+
+
@media all and (orientation: portrait) { ... }

+
+
Note: This value does not correspond to actual device orientation. Opening the soft keyboard on most devices in portrait orientation will cause the viewport to become wider than it is tall, thereby causing the browser to use landscape styles instead of portrait.

+
+
resolution

+
+
Value: {{cssxref("<resolution>")}}

+ Media: {{cssxref("Media/Bitmap", "bitmap")}}

+ Accepts min/max prefixes: yes

+
+
Indicates the resolution (pixel density) of the output device.  The resolution may be specified in either dots per inch (dpi) or dots per centimeter (dpcm).

+
+
Example

+
+
To apply a style sheet to devices with at least 300 dots per inch of resolution:

+
+
@media print and (min-resolution: 300dpi) { ... }
+

+
+
To replace the old (min-device-pixel-ratio: 2) syntax:

+
+
@media screen and (min-resolution: 2dppx) { ... }

+
+
scan

+
+
Value: progressive | interlace

+ Media: {{cssxref("Medien/TV")}}

+ Accepts min/max prefixes: no

+
+
Describes the scanning process of television output devices.

+
+
Example

+
+
To apply a style sheet only to progressive scanning televisions:

+
+
@media tv and (scan: progressive) { ... }
+

+
+
width

+
+
Value: {{cssxref("<length>")}}

+ Media: {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}

+ Accepts min/max prefixes: yes

+
+
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).

+
+
Note: As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the width and height media features.

+
+
Examples

+
+
If you want to specify a style sheet for handheld devices, or screen devices with a width greater than 20em, you can use this query:

+
+
@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... }
+

+
+
This media query specifies a style sheet that applies to printed media wider than 8.5 inches:

+
+
<link rel="stylesheet" media="print and (min-width: 8.5in)"
+    href="http://foo.com/mystyle.css" />
+

+
+
This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:

+
+
@media screen and (min-width: 500px) and (max-width: 800px) { ... }
+

+
+
Mozilla-specific media features

+
+
Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.

+
+
{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device allows images to appear in menus, this is 1; otherwise, the value is 0. This corresponds to the {{ cssxref(":-moz-system-metric(images-in-menus)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user has configured their device to use the "Graphite" appearance on Mac OS X, this is 1. If the user is using the standard blue appearance, or is not on Mac OS X, this is 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}

+
+
Value: {{cssxref("<number>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: yes

+
+
Gives the number of device pixels per CSS pixel.

+
+

+
Do not use this feature. 

+
+
Use the resolution feature with the dppx unit instead.

+ 

+ -moz-device-pixel-ratio may be used for compatibility with Firefox older than 16 and -webkit-device-pixel-ratio with WebKit-based browsers that do not support dppx.

+
+
Example:

+
+
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
+       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
+       (min-resolution: 2dppx),             /* The standard way */
+       (min-resolution: 192dpi)             /* dppx fallback */ 

+
+
See this CSSWG article for compatibility good practices regarding resolution and dppx.

+

+
+
Note: This media feature is also implemented by Webkit and by IE 11 for Windows Phone 8.1 as -webkit-device-pixel-ratio. The min and max prefixes as implemented by Gecko are named min--moz-device-pixel-ratio and max--moz-device-pixel-ratio; but the same prefixes as implemented by Webkit are named -webkit-min-device-pixel-ratio and -webkit-max-device-pixel-ratio.

+
+
{{ h3_gecko_minversion("-moz-os-version", "25.0") }}

+
+
Value: windows-xp | windows-vista | windows-win7 | windows-win8 | windows-win10

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:

+
+
    
+ 
  • windows-xp
    • 
+ 
  • windows-vista
    • 
+ 
  • windows-win7
    • 
+ 
  • windows-win8
    • 
+ 
  • windows-win10
    • 
+

+
+
This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device's user interface displays the thumb of scrollbars proportionally (that is, sized based on the percentage of the document that is visible), this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS pseudo-class.

+
+
Example

+
+
You might use this to render your buttons slightly larger, for example, if the user is on a touch-screen device, to make them more finger-friendly.

+
+
{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is currently using one of the default Windows themes (Luna, Royale, Zune, or Aero (including Vista Basic, Vista Advanced, and Aero Glass), this is 1. Otherwise it's 0.

+
+
This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS pseudo-class.

+
+
{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}

+
+
Value: {{cssxref("<integer>")}}

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
If the user is using Windows Glass theme, this is 1; otherwise it's 0. Note that this only exists for Windows 7 and earlier.

+
+
{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}

+
+
Value: aero | luna-blue | luna-olive | luna-silver | royale | generic | zune

+ Media: {{cssxref("Medien/Visuell")}}

+ Accepts min/max prefixes: no

+
+
Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:

+
+
    
+ 
  • aero
    • 
+ 
  • luna-blue
    • 
+ 
  • luna-olive
    • 
+ 
  • luna-silver
    • 
+ 
  • royale
    • 
+ 
  • generic
    • 
+ 
  • zune
    • 
+

+
+
This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.

+
+
Browser compatibility

+
+
{{ CompatibilityTable() }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("21") }}{{ CompatGeckoDesktop("1.9.1") }}{{ CompatIE("9.0") }}{{ CompatOpera("9") }}{{ CompatSafari("4") }}
grid{{ CompatUnknown() }}{{ CompatNo() }} [1]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
resolution{{ CompatChrome("29") }}{{ CompatGeckoDesktop("1.9.1") }} [2]

+    {{ CompatGeckoDesktop("8.0") }} [3]		{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
scan{{ CompatUnknown() }}{{ CompatNo() }} [4]{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}

+

+
+
[1] grid media type is not supported

+
+
[2] Supports {{cssxref("<integer>")}} values;

+
+
[3] Supports {{cssxref("<number>")}} values, as per the spec.

+
+
[4] tv media type is not supported

+
+
 

+
+
See also

+
+
diff --git a/files/de/web/css/min-height/index.html b/files/de/web/css/min-height/index.html
new file mode 100644
index 0000000000..2214fc01a9
--- /dev/null
+++ b/files/de/web/css/min-height/index.html
@@ -0,0 +1,77 @@
+---
+title: min-height
+slug: Web/CSS/min-height
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/min-height
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die min-height Eigenschaft wird verwendet, um die minimale Höhe eines Elements festzulegen. Das verhindert, dass der benutzte Wert der height Eigenschaft nicht kleiner wird als der festgelegte Wert von min-height.

+
Hinweis: min-height überschreibt sowohl height, als auch max-height.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: Blockelemente und ersetzte Elemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Höhe des umschließenden Blocks
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge
    • 
+

+
Syntax

+
min-height:  <Längenangabe> | <Prozentzahl> | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Siehe Länge für mögliche Einheiten.

+ 

+  Prozentzahl

+ 

+  Eine prozentuale Angabe, die sich auf die Höhe des umschließenden Blocks bezieht.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
table { min-height: 75%; }
+form  { min-height: 0; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer7.0
Firefox (Gecko)1.0 (1.0)
Opera4.0
Safari (WebKit)2.0.2 (416), vorher fehlerhaft

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/min-height", "es": "es/CSS/min-height", "fr": "fr/CSS/min-height" } ) }}

diff --git a/files/de/web/css/min-width/index.html b/files/de/web/css/min-width/index.html
new file mode 100644
index 0000000000..085949c9d6
--- /dev/null
+++ b/files/de/web/css/min-width/index.html
@@ -0,0 +1,101 @@
+---
+title: min-width
+slug: Web/CSS/min-width
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/min-width
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die min-width Eigenschaft wird verwendet, um die minimale Breite eines Elements festzulegen. Das verhindert, dass der benutzte Wert der width Eigenschaft nicht kleiner wird als der festgelegte Wert von min-width.

+
Hinweis: min-width überschreibt sowohl width, als auch max-width.

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: Blockelemente und ersetzte Elemente, für <table> siehe Browser Kompatibilität
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: die Prozentzahl wie festgelegt oder die absolute Länge
    • 
+

+
Syntax

+
min-width:  <Längenangabe> | <Prozentzahl> | -moz-max-content | -moz-min-content | -moz-fit-content | -moz-available | inherit
+

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Siehe Länge für mögliche Einheiten.

+ 

+  Prozentzahl

+ 

+  Eine prozentuale Angabe, die sich auf die Breite des umschließenden Blocks bezieht.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Mozilla Erweiterungen

+

+ 

+  -moz-max-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Bevorzugte intrinsische Breite.

+ 

+  -moz-min-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Minimale intrinsische Breite.

+ 

+  -moz-available

+ 

+  {{ gecko_minversion_inline("1.9") }} Die Breite des umschließenden Blocks minus horizontalen margin, padding und border Werten.

+ 

+  -moz-fit-content

+ 

+  {{ gecko_minversion_inline("1.9") }} Gleichbedeutend zu -moz-max-content.

+

+
Beispiele

+
table { min-width: 75%; }
+form  { min-width: 0; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
Browserab Versionauf <table> anwendbar
Internet Explorer7.0nein
Firefox (Gecko)1.0 (1.0)ja
Opera4.0ja
Safari (WebKit)2.0.2 (416), vorher fehlerhaftnein

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/min-width", "es": "es/CSS/min-width", "fr": "fr/CSS/min-width", "ja": "ja/CSS/min-width" } ) }}

diff --git a/files/de/web/css/mix-blend-mode/index.html b/files/de/web/css/mix-blend-mode/index.html
new file mode 100644
index 0000000000..59efbddadd
--- /dev/null
+++ b/files/de/web/css/mix-blend-mode/index.html
@@ -0,0 +1,97 @@
+---
+title: mix-blend-mode
+slug: Web/CSS/mix-blend-mode
+tags:
+  - CSS
+  - CSS Compositing
+  - CSS Eigenschaft
+translation_of: Web/CSS/mix-blend-mode
+---
+
{{CSSRef()}}

+
+
Übersicht

+
+
Die mix-blend-mode CSS Eigenschaft beschreibt, wie sich der Inhalt des Elements mit dem Inhalt des Elements unter ihm und dem Element-Hintergrund vermischen soll.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Keyword values */
+mix-blend-mode: normal;
+mix-blend-mode: multiply;
+mix-blend-mode: screen;
+mix-blend-mode: overlay;
+mix-blend-mode: darken;
+mix-blend-mode: lighten;
+mix-blend-mode: color-dodge;
+mix-blend-mode: color-burn;
+mix-blend-mode: hard-light;
+mix-blend-mode: soft-light;
+mix-blend-mode: difference;
+mix-blend-mode: exclusion;
+mix-blend-mode: hue;
+mix-blend-mode: saturation;
+mix-blend-mode: color;
+mix-blend-mode: luminosity;
+
+/* Global values */
+mix-blend-mode: initial;
+mix-blend-mode: inherit;
+mix-blend-mode: unset;
+

+
+
Werte

+
+

+ 
<blend-mode>

+ 
Ein {{cssxref("<blend-mode>")}} der den zu verwendenden Mischmodus festlegt. Mehrere Werte können per Komma getrennt angegeben werden.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
<svg>
+  <circle cx="40" cy="40" r="40" fill="red"/>
+  <circle cx="80" cy="40" r="40" fill="lightgreen"/>
+  <circle cx="60" cy="80" r="40" fill="blue"/>
+</svg>

+
+
circle { mix-blend-mode: screen; }

+
+
Result

+
+
{{EmbedLiveSample("Examples", "100%", "180")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('Compositing', '#mix-blend-mode', 'mix-blend-mode') }}{{ Spec2('Compositing') }}Initial specification.

+
+
Browser Unterstützung

+
+{{Compat("css.properties.mix-blend-mode")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("<blend-mode>")}}
    • 
+ 
  • {{cssxref("background-blend-mode")}}
    • 
+

diff --git a/files/de/web/css/motion_path/index.html b/files/de/web/css/motion_path/index.html
new file mode 100644
index 0000000000..5c09de0a90
--- /dev/null
+++ b/files/de/web/css/motion_path/index.html
@@ -0,0 +1,104 @@
+---
+title: Bewegungspfad
+slug: Web/CSS/Motion_Path
+tags:
+  - Bewegungspfad
+  - CSS
+  - Experimentell
+  - Referenz
+  - Übersicht
+translation_of: Web/CSS/CSS_Motion_Path
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Motion Path ist ein CSS Modul, das es Autoren erlaubt, beliebige grafische Objekte entlang eines benutzerdefinierten Pfads zu animieren.

+
+
Referenz

+
+
Eigenschaften

+
+

+
    
+ 
  • {{cssxref("motion")}}
    • 
+ 
  • {{cssxref("motion-path")}}
    • 
+ 
  • {{cssxref("motion-offset")}}
    • 
+ 
  • {{cssxref("motion-rotation")}}
    • 
+

+

+
+
Anleitungen

+
+
Keine.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('Motion Path Level 1')}}{{Spec2('Motion Path Level 1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome für Android
Grundlegende Unterstützung{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

diff --git a/files/de/web/css/mozilla_extensions/index.html b/files/de/web/css/mozilla_extensions/index.html
new file mode 100644
index 0000000000..d91ad7bb00
--- /dev/null
+++ b/files/de/web/css/mozilla_extensions/index.html
@@ -0,0 +1,661 @@
+---
+title: Mozilla CSS Erweiterungen
+slug: Web/CSS/Mozilla_Extensions
+tags:
+  - CSS
+  - CSS Referenz
+  - 'CSS:Mozilla Erweiterungen'
+translation_of: Web/CSS/Mozilla_Extensions
+---
+
{{CSSRef}}

+
+
Mozilla unterstützt eine Reihe von Erweiterungen zu CSS, die durch das Präfix -moz- gekennzeichnet sind.

+
+
Manche dieser Eigenschaften wurden zu Entwürfen zu CSS Spezifikationen für die Aufnahme in der finalen Empfehlung hinzugefügt, sind jedoch immer noch experimentell. Die entgültige Standardeigenschaft kann sich von der Implementierung mit Präfix unterscheiden. Einige dieser nicht standardisierten Eigenschaften beziehen sich nur auf XUL Elemente.

+
+
Wenn sie standardisiert und die Unterstützung für die Variante ohne Präfix hinzugefügt wurde, werden die Eigenschaften mit Präfix entfernt.

+
+
Eigenschaften mit Mozilla-Präfix, die standardisiert werden

+
+

+
A – C

+
+
    
+ 
  • {{Cssxref("clip-path")}} (bezieht sich auf mehr als SVG)
    • 
+ 
  • {{Cssxref("-moz-column-count")}}
    • 
+ 
  • {{Cssxref("-moz-column-fill")}}
    • 
+ 
  • {{Cssxref("-moz-column-gap")}}
    • 
+ 
  • {{Cssxref("-moz-column-width")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule-width")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule-style")}}
    • 
+ 
  • {{Cssxref("-moz-column-rule-color")}}
    • 
+

+
+
F

+
+
    
+ 
  • {{Cssxref("filter")}} (bezieht sich auf mehr als SVG)
    • 
+

+
+
G – H

+
+
    
+ 
  • {{Cssxref("-moz-hyphens")}}
    • 
+

+
+
I – M

+
+
    
+ 
  • {{Cssxref("mask")}} (bezieht sich auf mehr als SVG)
    • 
+

+
+
N – P

+
+
    
+ 
  • {{Cssxref("pointer-events")}} (bezieht sich auf mehr als SVG)
    • 
+

+
+
Q – Z

+
+
    
+ 
  • {{cssxref("-moz-tab-size")}}
    • 
+ 
  • {{cssxref("-moz-text-align-last")}}
    • 
+ 
  • {{cssxref("-moz-text-size-adjust")}}
    • 
+

+

+
+
Proprietäre Eigenschaften mit Mozilla-Präfix (nicht auf Webseiten verwenden)

+
+

+
A

+
+
    
+ 
  • {{Cssxref("-moz-appearance")}}
    • 
+

+
+
B

+
+
    
+ 
  • {{Cssxref("-moz-binding")}}
    • 
+ 
  • {{Cssxref("-moz-border-bottom-colors")}}
    • 
+ 
  • {{Cssxref("-moz-border-left-colors")}}
    • 
+ 
  • {{Cssxref("-moz-border-right-colors")}}
    • 
+ 
  • {{Cssxref("-moz-border-top-colors")}}
    • 
+ 
  • {{Cssxref("-moz-box-align")}}
    • 
+ 
  • {{Cssxref("-moz-box-direction")}}
    • 
+ 
  • {{Cssxref("-moz-box-flex")}}
    • 
+ 
  • {{Cssxref("-moz-box-ordinal-group")}}
    • 
+ 
  • {{Cssxref("-moz-box-orient")}}
    • 
+ 
  • {{Cssxref("-moz-box-pack")}}
    • 
+

+
+
C – F

+
+
    
+ 
  • {{Cssxref("-moz-float-edge")}}
    • 
+ 
  • {{Cssxref("-moz-force-broken-image-icon")}}
    • 
+

+
+
G H I

+
+
    
+ 
  • {{Cssxref("-moz-image-region")}}
    • 
+

+
+
J – O

+
+
    
+ 
  • {{cssxref("-moz-orient")}}
    • 
+ 
  • {{cssxref("-moz-osx-font-smoothing")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-bottomleft")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-bottomright")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-topleft")}}
    • 
+ 
  • {{Cssxref("-moz-outline-radius-topright")}}
    • 
+

+
+
P – S

+
+
    
+ 
  • {{Cssxref("-moz-stack-sizing")}}
    • 
+

+
+
T U

+
+
    
+ 
  • {{Cssxref("-moz-user-focus")}}
    • 
+ 
  • {{Cssxref("-moz-user-input")}}
    • 
+ 
  • {{Cssxref("-moz-user-modify")}}
    • 
+ 
  • {{Cssxref("-moz-user-select")}}
    • 
+

+
+
V – Z

+
+
    
+ 
  • {{cssxref("-moz-window-dragging")}}
    • 
+ 
  • {{Cssxref("-moz-window-shadow")}}
    • 
+

+

+
+
Zuvor mit Präfix versehene Eigenschaften, jetzt standardisiert

+
+

+
    
+ 
  • {{Cssxref("animation", "-moz-animation")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-delay", "-moz-animation-delay")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-direction", "-moz-animation-direction")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-duration", "-moz-animation-duration")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-fill-mode", "-moz-animation-fill-mode")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-iteration-count", "-moz-animation-iteration-count")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-name", "-moz-animation-name")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-play-state", "-moz-animation-play-state")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("animation-timing-function","-moz-animation-timing-function")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("backface-visibility", "-moz-backface-visibility")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("background-clip", "-moz-background-clip")}}
    • 
+ 
  • {{Cssxref("background-origin", "-moz-background-origin")}}
    • 
+ 
  • {{Cssxref("-moz-background-inline-policy")}} [Überholt durch die Standardversion {{cssxref("box-decoration-break")}}]
    • 
+ 
  • {{Cssxref("background-size", "-moz-background-size")}}
    • 
+ 
  • {{Cssxref("-moz-border-end")}} [Überholt durch die Standardversion {{cssxref("border-inline-end")}}]
    • 
+ 
  • {{Cssxref("-moz-border-end-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-color")}}]
    • 
+ 
  • {{Cssxref("-moz-border-end-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-style")}}]
    • 
+ 
  • {{Cssxref("-moz-border-end-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-end-width")}}]
    • 
+ 
  • {{Cssxref("border-image","-moz-border-image")}}
    • 
+ 
  • {{Cssxref("-moz-border-start")}} [Überholt durch die Standardversion {{cssxref("border-inline-start")}}]
    • 
+ 
  • {{Cssxref("-moz-border-start-color")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-color")}}]
    • 
+ 
  • {{Cssxref("-moz-border-start-style")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-style")}}]
    • 
+ 
  • {{Cssxref("-moz-border-start-width")}} [Überholt durch die Standardversion {{cssxref("border-inline-start-width")}}]
    • 
+ 
  • {{cssxref("box-sizing", "-moz-box-sizing")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("-moz-font-feature-settings")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("-moz-font-language-override")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("-moz-margin-end")}} [Überholt durch die Standardversion {{cssxref("margin-inline-end")}}]
    • 
+ 
  • {{Cssxref("-moz-margin-start")}} [Überholt durch die Standardversion {{cssxref("margin-inline-start")}}]
    • 
+ 
  • {{Cssxref("opacity","-moz-opacity")}}
    • 
+ 
  • {{Cssxref("outline","-moz-outline")}}
    • 
+ 
  • {{Cssxref("outline-color","-moz-outline-color")}}
    • 
+ 
  • {{Cssxref("outline-offset","-moz-outline-offset")}}
    • 
+ 
  • {{Cssxref("outline-style","-moz-outline-style")}}
    • 
+ 
  • {{Cssxref("outline-width","-moz-outline-width")}}
    • 
+ 
  • {{Cssxref("-moz-padding-end")}} [Überholt durch die Standardversion {{cssxref("padding-inline-end")}}]
    • 
+ 
  • {{Cssxref("-moz-padding-start")}} [Überholt durch die Standardversion {{cssxref("padding-inline-start")}}]
    • 
+ 
  • {{Cssxref("perspective", "-moz-perspective")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("perspective-origin","-moz-perspective-origin")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("text-decoration-color","-moz-text-decoration-color")}}
    • 
+ 
  • {{Cssxref("text-decoration-line","-moz-text-decoration-line")}}
    • 
+ 
  • {{Cssxref("text-decoration-style","-moz-text-decoration-style")}}
    • 
+ 
  • {{Cssxref("transform", "-moz-transform")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("transform-origin", "-moz-transform-origin")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{Cssxref("transform-style", "-moz-transform-style")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition", "-moz-transition")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-delay", "-moz-transition-delay")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-duration", "-moz-transition-duration")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-property", "-moz-transition-property")}} [Version mit Präfix immer noch akzeptiert]
    • 
+ 
  • {{cssxref("transition-timing-function", "-moz-transition-timing-function")}} [Version mit Präfix immer noch akzeptiert]
    • 
+

+

+
+
Werte

+
+
Für alle Eigenschaften

+
+

+
    
+ 
  • {{cssxref("initial","-moz-initial")}}
    • 
+

+

+
+
{{Cssxref("-moz-appearance")}}

+
+

+
    
+ 
  • button
    • 
+ 
  • button-arrow-down
    • 
+ 
  • button-arrow-next
    • 
+ 
  • button-arrow-previous
    • 
+ 
  • button-arrow-up
    • 
+ 
  • button-bevel
    • 
+ 
  • checkbox
    • 
+ 
  • checkbox-container
    • 
+ 
  • checkbox-label
    • 
+ 
  • checkmenuitem
    • 
+ 
  • dialog
    • 
+ 
  • groupbox
    • 
+ 
  • listbox
    • 
+ 
  • menuarrow
    • 
+ 
  • menucheckbox
    • 
+ 
  • menuimage
    • 
+ 
  • menuitem
    • 
+ 
  • menuitemtext
    • 
+ 
  • menulist
    • 
+ 
  • menulist-button
    • 
+ 
  • menulist-text
    • 
+ 
  • menulist-textfield
    • 
+ 
  • menupopup
    • 
+ 
  • menuradio
    • 
+ 
  • menuseparator
    • 
+ 
  • -moz-mac-unified-toolbar {{Fx_minversion_inline(3.5)}}
    • 
+ 
  • -moz-win-borderless-glass
    • 
+ 
  • -moz-win-browsertabbar-toolbox {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-communications-toolbox {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-glass
    • 
+ 
  • -moz-win-media-toolbox {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-window-button-box
    • 
+ 
  • -moz-window-button-box-maximized
    • 
+ 
  • -moz-window-button-close
    • 
+ 
  • -moz-window-button-maximize
    • 
+ 
  • -moz-window-button-minimize
    • 
+ 
  • -moz-window-button-restore
    • 
+ 
  • -moz-window-titlebar
    • 
+ 
  • -moz-window-titlebar-maximized
    • 
+ 
  • progressbar
    • 
+ 
  • progresschunk
    • 
+ 
  • radio
    • 
+ 
  • radio-container
    • 
+ 
  • radio-label
    • 
+ 
  • radiomenuitem
    • 
+ 
  • resizer
    • 
+ 
  • resizerpanel
    • 
+ 
  • scale-horizontal
    • 
+ 
  • scalethumb-horizontal
    • 
+ 
  • scalethumb-vertical
    • 
+ 
  • scale-vertical
    • 
+ 
  • scrollbarbutton-down
    • 
+ 
  • scrollbarbutton-left
    • 
+ 
  • scrollbarbutton-right
    • 
+ 
  • scrollbarbutton-up
    • 
+ 
  • scrollbar-small
    • 
+ 
  • scrollbarthumb-horizontal
    • 
+ 
  • scrollbarthumb-vertical
    • 
+ 
  • scrollbartrack-horizontal
    • 
+ 
  • scrollbartrack-vertical
    • 
+ 
  • separator
    • 
+ 
  • spinner
    • 
+ 
  • spinner-downbutton
    • 
+ 
  • spinner-textfield
    • 
+ 
  • spinner-upbutton
    • 
+ 
  • statusbar
    • 
+ 
  • statusbarpanel
    • 
+ 
  • tab
    • 
+ 
  • tabpanels
    • 
+ 
  • tab-scroll-arrow-back
    • 
+ 
  • tab-scroll-arrow-forward
    • 
+ 
  • textfield
    • 
+ 
  • textfield-multiline
    • 
+ 
  • toolbar
    • 
+ 
  • toolbarbutton-dropdown
    • 
+ 
  • toolbox
    • 
+ 
  • tooltip
    • 
+ 
  • treeheadercell
    • 
+ 
  • treeheadersortarrow
    • 
+ 
  • treeitem
    • 
+ 
  • treetwisty
    • 
+ 
  • treetwistyopen
    • 
+ 
  • treeview
    • 
+ 
  • window
    • 
+

+

+
+
{{cssxref("background-image")}}

+
+

+
    
+ 
  • Farbverläufe {{Gecko_minversion_inline("1.9.2")}}
+  
      
+   
    • {{cssxref("-moz-linear-gradient")}}
      • 
+   
    • {{cssxref("-moz-radial-gradient")}}
      • 
+  
    
+ 
    • 
+ 
  • Elemente {{gecko_minversion_inline("2.0")}}
+  
      
+   
    • {{cssxref("-moz-element")}}
      • 
+  
    
+ 
    • 
+ 
  • Teilbilder
+  
      
+   
    • {{cssxref("-moz-image-rect")}} {{gecko_minversion_inline("2.0")}}
      • 
+  
    
+ 
    • 
+

+

+
+
{{Cssxref("border-color")}}

+
+

+
    
+ 
  • -moz-use-text-color {{Deprecated_inline}} Use {{Cssxref("currentColor")}}
    • 
+

+

+
+
{{Cssxref("border-style")}} und {{Cssxref("outline-style")}}

+
+

+
    
+ 
  • -moz-bg-inset | -moz-bg-outset | -moz-bg-solid  {{obsolete_inline}} entfernt in Gecko 1.9 {{geckoRelease("1.9")}}
    • 
+

+

+
+
{{cssxref("<color>")}} Schlüsselwörter

+
+

+
    
+ 
  • -moz-activehyperlinktext
    • 
+ 
  • -moz-hyperlinktext
    • 
+ 
  • -moz-visitedhyperlinktext
    • 
+ 
  • -moz-buttondefault
    • 
+ 
  • -moz-buttonhoverface
    • 
+ 
  • -moz-buttonhovertext
    • 
+ 
  • -moz-default-background-color {{Gecko_minversion_inline("5.0")}}
    • 
+ 
  • -moz-default-color {{Gecko_minversion_inline("5.0")}}
    • 
+ 
  • -moz-cellhighlight
    • 
+ 
  • -moz-cellhighlighttext
    • 
+ 
  • -moz-field
    • 
+ 
  • -moz-fieldtext
    • 
+ 
  • -moz-dialog
    • 
+ 
  • -moz-dialogtext
    • 
+ 
  • -moz-dragtargetzone
    • 
+ 
  • -moz-mac-accentdarkestshadow
    • 
+ 
  • -moz-mac-accentdarkshadow
    • 
+ 
  • -moz-mac-accentface
    • 
+ 
  • -moz-mac-accentlightesthighlight
    • 
+ 
  • -moz-mac-accentlightshadow
    • 
+ 
  • -moz-mac-accentregularhighlight
    • 
+ 
  • -moz-mac-accentregularshadow
    • 
+ 
  • -moz-mac-chrome-active {{Gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • -moz-mac-chrome-inactive {{Gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • -moz-mac-focusring
    • 
+ 
  • -moz-mac-menuselect
    • 
+ 
  • -moz-mac-menushadow
    • 
+ 
  • -moz-mac-menutextselect
    • 
+ 
  • -moz-menuhover
    • 
+ 
  • -moz-menuhovertext
    • 
+ 
  • -moz-win-communicationstext {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-win-mediatext {{gecko_minversion_inline(1.9)}}
    • 
+ 
  • -moz-nativehyperlinktext {{Gecko_minversion_inline("1.9.1")}}
    • 
+

+

+
+
{{Cssxref("display")}}

+
+

+
    
+ 
  • -moz-box
    • 
+ 
  • -moz-inline-block {{obsolete_inline}}
    • 
+ 
  • -moz-inline-box
    • 
+ 
  • -moz-inline-grid
    • 
+ 
  • -moz-inline-stack
    • 
+ 
  • -moz-inline-table {{obsolete_inline}}
    • 
+ 
  • -moz-grid
    • 
+ 
  • -moz-grid-group
    • 
+ 
  • -moz-grid-line
    • 
+ 
  • -moz-groupbox
    • 
+ 
  • -moz-deck
    • 
+ 
  • -moz-popup
    • 
+ 
  • -moz-stack
    • 
+ 
  • -moz-marker
    • 
+

+

+
+
{{cssxref("empty-cells")}}

+
+

+
    
+ 
  • -moz-show-background (Standardwert in {{Glossary("Quirksmode")}})
    • 
+

+

+
+
{{Cssxref("font")}}

+
+

+
    
+ 
  • -moz-button
    • 
+ 
  • -moz-info
    • 
+ 
  • -moz-desktop
    • 
+ 
  • -moz-dialog (auch eine Farbe)
    • 
+ 
  • -moz-document
    • 
+ 
  • -moz-workspace
    • 
+ 
  • -moz-window
    • 
+ 
  • -moz-list
    • 
+ 
  • -moz-pull-down-menu
    • 
+ 
  • -moz-field (auch eine Farbe)
    • 
+

+

+
+
{{Cssxref("font-family")}}

+
+

+
    
+ 
  • -moz-fixed
    • 
+

+

+
+
{{Cssxref("image-rendering")}}

+
+

+
    
+ 
  • {{Cssxref("image-rendering","-moz-crisp-edges")}} {{Gecko_minversion_inline("1.9.2")}}
    • 
+

+

+
+
{{cssxref("<length>")}} Werte

+
+

+
    
+ 
  • {{cssxref("-moz-calc")}} {{gecko_minversion_inline("2.0")}}
    • 
+

+

+
+
{{Cssxref("list-style-type")}}

+
+

+
    
+ 
  • -moz-arabic-indic
    • 
+ 
  • -moz-bengali
    • 
+ 
  • -moz-cjk-earthly-branch
    • 
+ 
  • -moz-cjk-heavenly-stem
    • 
+ 
  • -moz-devanagari
    • 
+ 
  • -moz-ethiopic-halehame
    • 
+ 
  • -moz-ethiopic-halehame-am
    • 
+ 
  • -moz-ethiopic-halehame-ti-er
    • 
+ 
  • -moz-ethiopic-halehame-ti-et
    • 
+ 
  • -moz-ethiopic-numeric
    • 
+ 
  • -moz-gujarati
    • 
+ 
  • -moz-gurmukhi
    • 
+ 
  • -moz-hangul
    • 
+ 
  • -moz-hangul-consonant
    • 
+ 
  • -moz-japanese-formal
    • 
+ 
  • -moz-japanese-informal
    • 
+ 
  • -moz-kannada
    • 
+ 
  • -moz-khmer
    • 
+ 
  • -moz-lao
    • 
+ 
  • -moz-malayalam
    • 
+ 
  • -moz-myanmar
    • 
+ 
  • -moz-oriya
    • 
+ 
  • -moz-persian
    • 
+ 
  • -moz-simp-chinese-formal
    • 
+ 
  • -moz-simp-chinese-informal
    • 
+ 
  • -moz-tamil
    • 
+ 
  • -moz-telugu
    • 
+ 
  • -moz-thai
    • 
+ 
  • -moz-trad-chinese-formal
    • 
+ 
  • -moz-trad-chinese-informal
    • 
+ 
  • -moz-urdu
    • 
+

+

+
+
{{Cssxref("overflow")}}

+
+

+
    
+ 
  • {{Cssxref("-moz-scrollbars-none")}} {{obsolete_inline}}
    • 
+ 
  • {{Cssxref("-moz-scrollbars-horizontal")}} {{Deprecated_inline}}
    • 
+ 
  • {{Cssxref("-moz-scrollbars-vertical")}} {{Deprecated_inline}}
    • 
+ 
  • {{Cssxref("-moz-hidden-unscrollable")}}
    • 
+

+

+
+
{{Cssxref("text-align")}}

+
+

+
    
+ 
  • -moz-center
    • 
+ 
  • -moz-left
    • 
+ 
  • -moz-right
    • 
+

+

+
+
{{Cssxref("text-decoration")}}

+
+

+
    
+ 
  • -moz-anchor-decoration
    • 
+

+

+
+
{{Cssxref("-moz-user-select")}}

+
+

+
    
+ 
  • -moz-all
    • 
+ 
  • -moz-none
    • 
+

+

+
+
{{Cssxref("width")}}, {{Cssxref("min-width")}} und {{Cssxref("max-width")}}

+
+

+
    
+ 
  • -moz-min-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-fit-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-max-content {{Fx_minversion_inline(3)}}
    • 
+ 
  • -moz-available {{Fx_minversion_inline(3)}}
    • 
+

+

+
+
Pseudoelemente und Pseudoklassen

+
+

+
    
+ 
  • {{Cssxref("::-moz-anonymous-block")}} eg@:- bug 331432
    • 
+ 
  • {{Cssxref("::-moz-anonymous-positioned-block")}}
    • 
+ 
  • {{cssxref(":-moz-any")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref(":-moz-any-link")}} (matcht :link und :visited)
    • 
+ 
  • {{Cssxref(":-moz-bound-element")}}
    • 
+ 
  • {{Cssxref(":-moz-broken")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref("::-moz-canvas")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-cell-content")}} eg@:- bug 331432
    • 
+ 
  • {{Cssxref(":-moz-drag-over")}}
    • 
+ 
  • {{Cssxref(":-moz-first-node")}}
    • 
+ 
  • {{cssxref("::-moz-focus-inner")}}
    • 
+ 
  • {{cssxref("::-moz-focus-outer")}}
    • 
+ 
  • {{cssxref(":-moz-focusring")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{cssxref(":-moz-full-screen")}} {{gecko_minversion_inline("9.0")}}
    • 
+ 
  • {{cssxref(":-moz-full-screen-ancestor")}} {{gecko_minversion_inline("10.0")}}
    • 
+ 
  • {{cssxref(":-moz-handler-blocked")}} {{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{cssxref(":-moz-handler-crashed")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{cssxref(":-moz-handler-disabled")}} {{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{Cssxref("::-moz-inline-table")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref(":-moz-last-node")}}
    • 
+ 
  • {{Cssxref(":-moz-list-bullet")}}
    • 
+ 
  • {{cssxref(":-moz-list-number")}}
    • 
+ 
  • {{cssxref(":-moz-loading")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-locale-dir(ltr)")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-locale-dir(rtl)")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-lwtheme")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-lwtheme-brighttext")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-lwtheme-darktext")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-native-anonymous")}} {{gecko_minversion_inline("36")}}
    • 
+ 
  • {{Cssxref(":-moz-only-whitespace")}}
    • 
+ 
  • {{Cssxref("::-moz-page")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-page-sequence")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-pagebreak")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-pagecontent")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref(":-moz-placeholder")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{cssxref("::-moz-placeholder")}} {{gecko_minversion_inline("19")}}
    • 
+ 
  • {{Cssxref("::-moz-progress-bar")}}
    • 
+ 
  • {{Cssxref("::-moz-range-thumb")}}
    • 
+ 
  • {{Cssxref("::-moz-range-track")}}
    • 
+ 
  • {{Cssxref(":-moz-read-only")}}
    • 
+ 
  • {{Cssxref(":-moz-read-write")}}
    • 
+ 
  • {{cssxref("::selection","::-moz-selection")}}
    • 
+ 
  • {{Cssxref("::-moz-scrolled-canvas")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-scrolled-content")}} eg@:- bug 331432
    • 
+ 
  • {{Cssxref("::-moz-scrolled-page-sequence")}} eg@:- bug 331432
    • 
+ 
  • {{cssxref(":-moz-suppressed")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{cssxref(":-moz-submit-invalid")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref("::-moz-svg-foreign-content")}} example at resource://gre/res/svg.css , *|*::-moz-svg-foreign-content {display: block !important;position: static !important;}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(images-in-menus)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(mac-graphite-theme)")}} {{gecko_minversion_inline("1.9.1")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-end-backward)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-end-forward)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-start-backward)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-start-forward)")}} {{Fx_minversion_inline(3)}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(scrollbar-thumb-proportional)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(touch-enabled)")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref(":-moz-system-metric(windows-default-theme)")}} {{Fx_minversion_inline(3)}}
    • 
+ 
  • {{Cssxref("::-moz-table")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-cell")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-column")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-column-group")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-outer")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-row")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-table-row-group")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref(":-moz-tree-checkbox")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-cell")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-cell-text")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-cell-text(hover)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-column")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-drop-feedback")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-image")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-indentation")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-line")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-progressmeter")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-row")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-row(hover)")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-separator")}}
    • 
+ 
  • {{Cssxref(":-moz-tree-twisty")}}
    • 
+ 
  • {{Cssxref(":-moz-ui-invalid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref(":-moz-ui-valid")}}{{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{cssxref(":-moz-user-disabled")}} {{gecko_minversion_inline("1.9")}}
    • 
+ 
  • {{Cssxref("::-moz-viewport")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{Cssxref("::-moz-viewport-scroll")}} eg@:- resource://gre/res/ua.css
    • 
+ 
  • {{cssxref(":-moz-window-inactive")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref("::-moz-xul-anonymous-block")}} eg@:- resource://gre/res/ua.css
    • 
+

+

+
+
At-Regeln

+
+

+
    
+ 
  • {{Cssxref("@-moz-document")}}
    • 
+

+

+
+
Media Queries

+
+

+
    
+ 
  • {{Cssxref("Media_queries", "-moz-images-in-menus", "#-moz-images-in-menus")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-mac-graphite-theme", "#-moz-mac-graphite-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-maemo-classic", "#-moz-maemo-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-device-pixel-ratio", "#-moz-device-pixel-ratio")}} {{gecko_minversion_inline("2.0")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-end-backward", "#-moz-scrollbar-end-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-end-forward", "#-moz-scrollbar-end-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-start-backward", "#-moz-scrollbar-start-backward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-start-forward", "#-moz-scrollbar-start-forward")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-scrollbar-thumb-proportional", "#-moz-scrollbar-thumb-proportional")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-touch-enabled", "#-moz-touch-enabled")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-classic", "#-moz-windows-classic")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-compositor", "#-moz-windows-compositor")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-default-theme", "#-moz-windows-default-theme")}} {{gecko_minversion_inline("1.9.2")}}
    • 
+ 
  • {{Cssxref("Media_queries", "-moz-windows-theme", "#-moz-windows-theme")}} {{gecko_minversion_inline("2.0")}}
    • 
+

+

+
+
Andere

+
+

+
    
+ 
  • {{Cssxref("-moz-alt-content")}} {{Bug("11011")}}
    • 
+

+

diff --git a/files/de/web/css/none/index.html b/files/de/web/css/none/index.html
new file mode 100644
index 0000000000..3f5680c26f
--- /dev/null
+++ b/files/de/web/css/none/index.html
@@ -0,0 +1,25 @@
+---
+title: none
+slug: Web/CSS/none
+translation_of: Web/CSS/float
+---
+

+ {{ CSSRef() }}

+
Übersicht

+
none ist ein oft gebrauchter Wert, welcher in einem Grossteil der Eigenschaften verwendet werden kann. Meistens ist er der Standartwert einer Eigenschaft. Ein vergleichbarer Wert ist {{ Cssxref("normal") }}.

+
Verwendet in

+
    
+ 
  • {{ Cssxref("background-image") }}
    • 
+ 
  • {{ Cssxref("border-style") }}
    • 
+ 
  • {{ Cssxref("clear") }}
    • 
+ 
  • {{ Cssxref("content") }}
    • 
+ 
  • {{ Cssxref("counter-increment") }}
    • 
+ 
  • {{ Cssxref("counter-reset") }}
    • 
+ 
  • {{ Cssxref("display") }}
    • 
+ 
  • {{ Cssxref("float") }}
    • 
+ 
  • {{ Cssxref("list-style-type") }}
    • 
+ 
  • {{ Cssxref("max-height") }} / {{ Cssxref("max-width") }}
    • 
+ 
  • {{ Cssxref("quotes") }}
    • 
+ 
  • {{ Cssxref("text-decoration") }}
    • 
+ 
  • {{ Cssxref("text-transform") }}
    • 
+

diff --git a/files/de/web/css/normal/index.html b/files/de/web/css/normal/index.html
new file mode 100644
index 0000000000..c70bf8921f
--- /dev/null
+++ b/files/de/web/css/normal/index.html
@@ -0,0 +1,27 @@
+---
+title: normal
+slug: Web/CSS/normal
+translation_of: Web/CSS/font-variant
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
normal ist ein oft gebrauchter Wert. Meistens ist es der Standartwert der entsprechenden Eigenschaften. It is comparable to the value {{ Cssxref("none") }}, used in a similar manner for other properties.

+
+
Verwendet in

+
+
    
+ 
  • {{ Cssxref("content") }}
    • 
+ 
  • {{ Cssxref("font-style") }}
    • 
+ 
  • {{ Cssxref("font-variant") }}
    • 
+ 
  • {{ Cssxref("font-weight") }}
    • 
+ 
  • {{ Cssxref("letter-spacing") }}
    • 
+ 
  • {{ Cssxref("line-height") }}
    • 
+ 
  • {{ Cssxref("speak") }}
    • 
+ 
  • {{ Cssxref("unicode-bidi") }}
    • 
+ 
  • {{ Cssxref("white-space") }}
    • 
+ 
  • {{ Cssxref("word-spacing") }}
    • 
+

+
+
{{ languages({ "ja": "ja/CSS/normal" }) }}

diff --git a/files/de/web/css/number/index.html b/files/de/web/css/number/index.html
new file mode 100644
index 0000000000..8da756e1ff
--- /dev/null
+++ b/files/de/web/css/number/index.html
@@ -0,0 +1,80 @@
+---
+title: 
+slug: Web/CSS/number
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - Web
+translation_of: Web/CSS/number
+---
+
{{CSSRef}}

+
+
Der <number> CSS Datentyp repräsentiert eine Zahl, entweder Ganzzahl oder Bruchzahl. Ihre Syntax erweitert die des {{cssxref("<integer>")}} Datentyps. Um einen Bruchwert darzustellen, wird der Bruchteil — ein '.' gefolgt von einer oder mehreren Ziffern — einem beliebigen {{cssxref("<integer>")}} Datentyp angehängt. Wie für {{cssxref("<integer>")}} Datentypen wird auch für <number> Werte keine Einheit angegeben, welche keine CSS Größe ist.

+
+
Interpolation

+
+
Werte des <number> CSS Datentyps können interpoliert werden, um Animationen zu ermöglichen. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die der Animation zugehörigen {{cssxref("timing-function", "Timingfunktion")}} bestimmt.

+
+
Beispiele

+
+
Dies sind gültige Zahlenwerte:

+
+
12          Reiner <integer> ist ebenfalls eine <number>
+4.01        Positive <number>, die keine Ganzzahl ist
+-456.8      Negative <number>, die keine Ganzzahl ist
+0.0         Null
++0.0        Null mit führendem +
+-0.0        Null mit führendem - (obwohl seltsam, ist dies ein erlaubter Wert)
+.60         Ziffern vor dem Punkt sind optional
+10e3        Wissenschaftliche Notation ist erlaubt
+-3.4e-2     Komplexester Fall wissenschaftlicher Notation
+

+
+
Dies sind ungültige Zahlenwerte:

+
+
12.         Dem Punkt sollte eine Zahl folgen
++-12.2      Nur ein führendes +/- ist erlaubt
+12.1.1      Nur ein Punkt ist erlaubt
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#numbers', '<number>')}}{{Spec2('CSS3 Values')}}Keine wesentliche Änderung in Bezug auf CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#numbers', '<number>')}}{{Spec2('CSS2.1')}}Explizit definiert
{{SpecName('CSS1', '', '<number>')}}{{Spec2('CSS1')}}Implizit definiert

+
+
Browser Kompatibilität

+
+
{{Compat("css.types.number")}}

+
+
Siehe auch

+
+
    
+ 
  • {{CSSxRef("<integer>")}}
    • 
+

diff --git a/files/de/web/css/object-fit/index.html b/files/de/web/css/object-fit/index.html
new file mode 100644
index 0000000000..7fbbc5267e
--- /dev/null
+++ b/files/de/web/css/object-fit/index.html
@@ -0,0 +1,148 @@
+---
+title: object-fit
+slug: Web/CSS/object-fit
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Image
+  - Grafik
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/object-fit
+---
+
{{ CSSRef }}

+
+
Übersicht

+
+
Die object-fit CSS Eigenschaft gibt an, wie die Inhalte eines ersetzten Elements an die Box angepasst werden, die durch dessen verwendeter Höhe und Breite erzeugt wird.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}

+
+
object-fit: fill
+object-fit: contain
+object-fit: cover
+object-fit: none
+object-fit: scale-down
+

+
+
Werte

+
+

+ 
fill

+ 
Der ersetzte Inhalt wird in der Größe angepasst, sodass er die Inhaltsbox des Elements ausfüllt: die konkrete Objektgröße entspricht der verwendeten Breite und Höhe des Elements.

+ 
contain

+ 
Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während es an die Inhaltsbox des Elements angepasst wird: die konkrete Objektgröße wird als eine Inhaltsbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.

+ 
cover

+ 
Der ersetzte Inhalt wird in der Größe angepasst, sodass das Seitenverhältnis beibehalten wird während die gesamte Inhaltsbox des Elements ausgefüllt wird: die konkrete Objektgröße wird als eine Abdeckbeschränkung auf die verwendete Breite und Höhe des Elements bestimmt.

+ 
none

+ 
Der ersetzte Inhalt wird nicht in der Größe angepasst, um in die Inhaltsbox des Elements zu passen: die konkrete Objektgröße wird durch den Standardalgorithmus zur Größenanpassung und eine Standardobjektgröße gleich der verwendeten Breite und Höhe des ersetzten Elements bestimmt.

+ 
scale-down

+ 
Der Inhalt wird in der Größe geändert als ob none oder contain angegeben wäre, je nachdem welches in einer kleineren konkreten Objektgröße resultieren würde.

+

+
+
Beispiel

+
+
HTML Inhalt

+
+
<div>
+  <h2>object-fit: fill</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+
+  <h2>object-fit: contain</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+
+  <h2>object-fit: cover</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+
+  <h2>object-fit: none</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+
+  <h2>object-fit: scale-down</h2>
+  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/>
+</div>

+
+
CSS Inhalt

+
+
h2 {
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  margin: 1em 0 0.3em;
+}
+
+div {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  height: 450px;
+}
+
+img {
+  width: 150px;
+  height: 100px;
+  border: 1px solid #000;
+}
+
+.fill {
+  object-fit: fill;
+}
+
+.contain {
+  object-fit: contain;
+}
+
+.cover {
+  object-fit: cover;
+}
+
+.none {
+  object-fit: none;
+}
+
+.scale-down {
+  object-fit: scale-down;
+}
+

+
+
Ausgabe

+
+
{{ EmbedLiveSample('Beispiel', 500, 450) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}}Die Schlüsselwörter from-image und flip wurden hinzugefügt.
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}Ursprüngliche Spezifikation

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.object-fit")}}

+
+
Siehe auch

+
+
    
+ 
  • Andere Bild bezogene CSS Eigenschaften: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html
new file mode 100644
index 0000000000..e3b2dd4f80
--- /dev/null
+++ b/files/de/web/css/object-position/index.html
@@ -0,0 +1,147 @@
+---
+title: object-position
+slug: Web/CSS/object-position
+translation_of: Web/CSS/object-position
+---
+
{{CSSRef}}

+
+
Die Eigenschaft object-position bestimmt  die Ausrichtung des Elements in seiner Box.

+
+
/* <position> Werte */
+object-position: 100px 50px;
+
+/* Globale Werte */
+object-position: inherit;
+object-position: initial;
+object-position: unset;
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Values

+
+

+ 
<position>

+ 
Is a {{ cssxref("<position>") }}, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Example

+
+
HTML content

+
+
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+<img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
+

+
+
CSS content

+
+
img {
+   width: 300px;
+   height: 250px;
+   border: 1px solid black;
+   background-color: silver;
+   margin-right: 1em;
+   object-fit: none;
+}
+
+#object-position-1 {
+  object-position: 10px;
+}
+
+#object-position-2 {
+  object-position: 100% 10%;
+}
+

+
+
Output

+
+
{{ EmbedLiveSample('Example', '100%','300px') }}

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS4 Images')}}The from-image and flip keywords have been added.
{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}{{Spec2('CSS3 Images')}}Initial definition

+
+
Browser compatibility

+
+
{{ CompatibilityTable }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support31.0{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.60{{ property_prefix("-o") }}

+    19.0		10.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.4.4{{ CompatGeckoDesktop("36") }}{{CompatNo}}11.5{{ property_prefix("-o") }}

+    24		{{ CompatNo }}

+

+[1] WebKit Nightly fixed in bug 122811.

+
+
See also

+
+
    
+ 
  • Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.
    • 
+

diff --git a/files/de/web/css/opacity/index.html b/files/de/web/css/opacity/index.html
new file mode 100644
index 0000000000..6781cbfee6
--- /dev/null
+++ b/files/de/web/css/opacity/index.html
@@ -0,0 +1,158 @@
+---
+title: opacity
+slug: Web/CSS/opacity
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/opacity
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die opacity CSS Eigenschaft gibt die Transparenz eines Elements an, d. h. den Grad, zu welchem der Hintergrund des Elements überlagert wird.

+
+
Der Wert wird dem gesamten Element zugewiesen einschließlich dessen Inhalten, auch wenn der Wert nicht durch Kindelemente geerbt wird. Dadurch haben ein Element und seine Kindelemente alle dieselbe Deckkraft relativ zum Hintergrund des Elements, auch wenn das Element und seine Kindelemente untereinander unterschiedliche Werte für die Deckkraft haben.

+
+
Wird für diese Eigenschaft ein Wert anders als 1 festgelegt, bewirkt dies, dass das Element in einen neuen Stapelkontext versetzt wird.

+
+
Falls ein Kindelement nicht den Wert für die Deckkraft haben soll, kann stattdessen die {{cssxref("background")}} Eigenschaft verwendet werden. Zum Beispiel:

+
+
background: rgba(0, 0, 0, 0.4);

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Komplett undurchsichtig */
+opacity: 1;
+opacity: 1.0;
+
+/* Durchscheinend */
+opacity: 0.6;
+
+/* Komplett transparent */
+opacity: 0.0;
+opacity: 0;
+
+/* Globale Werte */
+opacity: inherit;
+opacity: initial;
+opacity: unset;
+

+
+
Werte

+
+

+ 
<number>

+ 
Ist eine {{cssxref("<number>")}} im Bereich von 0.0 bis 1.0, beide einschließlich, die die Deckkraft des Alphakanals repräsentiert. Jeder Wert außerhalb des Intervalls, obwohl gültig, wird abgeschnitten auf die nächstliegende Grenze innerhalb des Bereichs.
+ 
+  
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+   
+    
+    
+   
+  
+ 
WertBedeutung
0Das Element ist vollkommen transparent (d. h. unsichtbar).
Irgendeine {{cssxref("<number>")}} genau zwischen 0 und 1Das Element ist durchsichtig (d. h. der Hintergrund scheint durch).
1Das Element ist vollkommen opak (blickdicht).

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Einfaches Beispiel

+
+
div {
+  background-color: yellow;
+}
+
+.light {
+  opacity: 0.2; /* Der Text kann kaum über dem Hintergrund gelesen werden */
+}
+
+.medium {
+  opacity: 0.5; /* Der Text ist besser über dem Hintergrund lesbar */
+}
+
+.heavy {
+  opacity: 0.9; /* Der Text ist sehr deutlich über dem Hintergrund lesbar */
+}
+

+
+
<div class="light">Dies kann kaum gesehen werden.</div>
+<div class="medium">Dies ist einfacher zu sehen.</div>
+<div class="heavy">Dies ist sehr deutlich sichtbar.</div>
+

+
+
{{EmbedLiveSample('Einfaches_Beispiel', '640', '64')}}

+
+
Andere Deckkraft mit :hover

+
+
img.opacity {
+  opacity: 1;
+  filter: alpha(opacity=100); /* IE8 and lower */
+  zoom: 1; /* Triggers "hasLayout" in IE 7 and lower */
+}
+
+img.opacity:hover {
+  opacity: 0.5;
+  filter: alpha(opacity=50);
+  zoom: 1;
+}

+
+
<img src="//developer.mozilla.org/media/img/mdn-logo.png"
+     alt="MDN logo" width="128" height="146"
+     class="opacity">
+

+
+
{{EmbedLiveSample('Andere_Deckkraft_mit_hover', '150', '175')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'opacity')}}{{Spec2('CSS3 Transitions')}}Definiert opacity als animierbar.
{{SpecName('CSS3 Colors', '#propdef-opacity', 'opacity')}}{{Spec2('CSS3 Colors')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.opacity")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/order/index.html b/files/de/web/css/order/index.html
new file mode 100644
index 0000000000..7b3a099ded
--- /dev/null
+++ b/files/de/web/css/order/index.html
@@ -0,0 +1,104 @@
+---
+title: order
+slug: Web/CSS/order
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Flexible Boxes
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/order
+---
+
{{ CSSRef("CSS Flexible Boxes") }}

+
+
Übersicht

+
+
Die order CSS Eigenschaft gibt die Reihenfolge an, in der Flexelemente innerhalb ihres Flexcontainers dargestellt werden. Elemente werden in aufsteigender Reihenfolge des order Werts dargestellt. Elemente mit dem gleichen order Wert werden in der Reihenfolge dargestellt, in der sie im Quelltext auftauchen.

+
+

+
Hinweis: order beeinflusst nur die visuelle Reihenfolge von Elementen und nicht deren logische oder Tab-Reihenfolge. order darf nicht bei nicht visuellen Medien wie Sprache verwendet werden.

+

+
+
{{cssinfo}}

+
+
Siehe die Verwendung von flexiblen Boxen für mehr Informationen.

+
+
{{ Note("order ist nur dazu gedacht, die visuelle Reihenfolge festzulegen, nicht die logische Reihenfolge der Elemente. Die Eigenschaft darf nicht auf nicht-visuelle Medien wie beispielsweise Sprache angewendet werden.") }}

+
+
Syntax

+
+
/* Nummerische Werte inklusive negativer Zahlen */
+order: 5;
+order: -5;
+
+/* Globale Werte */
+order: inherit;
+order: initial;
+order: unset;
+

+
+
Werte

+
+

+ 
<integer>

+ 
Repräsentiert die ordinale Position des Flexelements.

+

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Einfache HTML-Struktur:

+
+
<!DOCTYPE html>
+<header>…</header>
+<div id='main'>
+   <article>…</article>
+   <nav>…</nav>
+   <aside>…</aside>
+</div>
+<footer>…</footer>

+
+
Der folgende CSS Code erzeugt ein klassisches Layout mit zwei Seitenleisten, die einen Inhaltsbereich umschließen. Das Flexible Box Layout Modul erzeugt automatisch Blöcke gleicher vertikaler Größe und verwendet gesamten zur Verfügung stehenden horizontalen Platz.

+
+
#main { display: flex; }
+#main > article { flex:1;         order: 2; }
+#main > nav     { width: 200px;   order: 1; }
+#main > aside   { width: 200px;   order: 3; }

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Flexbox', '#order-property', 'order') }}{{ Spec2('CSS3 Flexbox') }}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.order")}}
+
+
[1] Firefox unterstützt bis Version 28 nur einzeiliges Flexbox Layout. Um Flexbox Unterstützung für Firefox 18 und 19 zu aktivieren, muss die Einstellung layout.css.flexbox.enabled in about:config auf true gesetzt werden.

+
+
Firefox verändert aktuell fälschlicherweise die Tab-Reihenfolge der Elemente. Siehe {{bug("812687")}}.

+
+
[2] Im Internet Explorer 10 wird ein flexibler Container durch display:-ms-flexbox angegeben, nicht durch display:flex.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/orphans/index.html b/files/de/web/css/orphans/index.html
new file mode 100644
index 0000000000..0e1c984025
--- /dev/null
+++ b/files/de/web/css/orphans/index.html
@@ -0,0 +1,121 @@
+---
+title: orphans
+slug: Web/CSS/orphans
+tags:
+  - CSS
+  - CSS3
+  - Layout
+  - Referenz
+  - mehrspaltige Layouts
+translation_of: Web/CSS/orphans
+---
+
{{CSSRef}}

+
+
Die CSS-Eigenschaft orphans legt die Mindestanzahl von Zeilen in einem Blockcontainer fest, die unten auf einer Seite, eines Bereichs oder einer Spalte angezeigt werden müssen.

+
+
/* <integer> values */
+orphans: 2;
+orphans: 3;
+
+/* Global values */
+orphans: inherit;
+orphans: initial;
+orphans: unset;
+

+
+

+
Hinweis: In der Typografie ist ein Schusterjunge die erste Zeile eines Absatzes, die allein am unteren Rand einer Seite angezeigt wird (der Absatz wird auf einer nachfolgenden Seite fortgesetzt).

+

+
+
Syntax

+
+
Werte

+
+

+ 
{{cssxref("<integer>")}}

+ 
Die Mindestanzahl von Zeilen, die vor einem Fragmentierungsbruch am unteren Rand eines Fragments verbleiben können. Der Wert muss positiv sein.

+

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
Festlegung einer Mindestgröße für Waisenkinder von drei Zeilen

+
+
HTML

+
+

+
<div>
+  <p>This is the first paragraph containing some text.</p>
+  <p>This is the second paragraph containing some more text than the first one. It is used to demonstrate how orphans work.</p>
+  <p>This is the third paragraph. It has a little bit more text than the first one.</p>
+</div>
+

+
+
CSS

+
+
div {
+  background-color: #8cffa0;
+  height: 150px;
+  columns: 3;
+  orphans: 3;
+}
+
+p {
+  background-color: #8ca0ff;
+}
+
+p:first-child {
+  margin-top: 0;
+}
+

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Setting_a_minimum_orphan_size_of_three_lines", 380, 150)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Fragmentation', '#widows-orphans', 'orphans')}}{{Spec2('CSS3 Fragmentation')}}Erweitert orphans, die auf alle Fragmenttypen angewendet werden können, einschließlich Seiten, Regionen oder Spalten.
{{SpecName('CSS2.1', 'page.html#break-inside', 'orphans')}}{{Spec2('CSS2.1')}}Initiale Definition.

+
+
Browserkompatibilität

+
+

+
+
+
{{Compat("css.properties.orphans")}}

+

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/outline-color/index.html b/files/de/web/css/outline-color/index.html
new file mode 100644
index 0000000000..c802720159
--- /dev/null
+++ b/files/de/web/css/outline-color/index.html
@@ -0,0 +1,154 @@
+---
+title: outline-color
+slug: Web/CSS/outline-color
+translation_of: Web/CSS/outline-color
+---
+
{{CSSRef}}

+
+
Zusammenfassung

+
+
Die outline-color CSS-Eigenschaft bestimmt die Farbe der Outline (den Umriss) eines Elements. Eine Outline ist eine Linie, die außerhalb des Rahmens (border) um Elemente gezeigt wird, damit das Element hervorsticht.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Keyword values */
+outline-color: invert;
+outline-color: red;
+
+/* Global values */
+outline-color: inherit;
+outline-color: initial;
+outline-color: unset;
+

+
+
Werte

+
+

+ 
<color>

+ 
See {{cssxref("<color>")}} for the various color keywords and notations.

+ 
invert

+ 
To ensure the outline is visible, performs a color inversion of the background. This makes the focus border more salient, regardless of the color in the background. Note that browsers are not required to support it. If not, they just consider the statement as invalid

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML

+
+
<p class="example">My outline is blue, da ba dee.</p>

+
+
CSS

+
+
.example {
+  /* first need to set "outline" */
+  outline: 2px solid;
+  /* make the outline blue */
+  outline-color: #0000FF;
+}

+
+
Live:

+
+
{{ EmbedLiveSample('Example', '', '', '', 'Web/CSS/outline-color') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Basic UI', '#outline-color', 'outline-color')}}{{Spec2('CSS3 Basic UI')}}No change
{{SpecName('CSS3 Transitions', '#animatable-css', 'outline-color')}}{{Spec2('CSS3 Transitions')}}Defines outline-color as animatable.
{{SpecName('CSS2.1', 'ui.html#propdef-outline-color', 'outline-color')}}{{Spec2('CSS2.1')}}Initial definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}} [1]8.07.01.2 (125)
invert value{{CompatNo}}{{CompatUnknown}}{{CompatNo}} [2]8.0{{CompatNo}} [3]{{CompatNo}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+
[1] In versions previous to Gecko 1.8: -moz-outline-color.

+
+
[2] Support had been dropped in version 3.0 (1.9).

+
+
[3] Supported in Opera 7 but support was dropped in  Opera 15 with the adoption of Chromium/Blink engine.

diff --git a/files/de/web/css/outline/index.html b/files/de/web/css/outline/index.html
new file mode 100644
index 0000000000..48b3666cce
--- /dev/null
+++ b/files/de/web/css/outline/index.html
@@ -0,0 +1,162 @@
+---
+title: outline
+slug: Web/CSS/outline
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Outline
+  - Layout
+  - Referenz
+  - 'recipe:css-shorthand-property'
+translation_of: Web/CSS/outline
+---
+
{{CSSRef}}

+
+
Das outline CSS Eigenschaftskürzel setzt alle outline Eigenschaften in einer einzigen Deklaration.

+
+
{{EmbedInteractiveExample("pages/css/outline.html")}}

+
+
+
+
Bestandteileigenschaften

+
+
Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

+
+
+
+
Syntax

+
+
/* style */
+outline: solid;
+
+/* color | style */
+outline: #f66 dashed;
+
+/* style | width */
+outline: inset thick;
+
+/* color | style | width */
+outline: green solid 3px;
+
+/* Global values */
+outline: inherit;
+outline: initial;
+outline: unset;
+

+
+
Die outline Eigenschaft kann mit einem, zwei oder drei der unten aufgeführten Werte angegeben werden. Die Reihenfolge der Werte spielt dabei keine Rolle.

+
+

+
Hinweis: Der Umriss ist für viele Elemente unsichtbar, wenn sein Stil nicht definiert ist. Dies liegt daran, dass der Stil standardmäßig auf keinen Stil eingestellt ist: none. Eine bemerkenswerte Ausnahme bilden input Elemente, die von den Browsern als Standard-Stil vorgegeben werden.

+

+
+
Values

+
+

+ 
<'outline-color'>

+ 
Legt die Farbe des Umrisses fest. Standardeinstellung ist die currentcolor (aktuelle Farbe), wenn sie nicht vorhanden ist. Siehe {{cssxref("outline-color")}}.

+ 
<'outline-style'>

+ 
Legt den Stil des Umrisses fest. Standardeinstellung ist none, wenn nicht vorhanden. Siehe {{cssxref("outline-style")}}.

+ 
<'outline-width'>

+ 
Legt die Dicke der Umrisslinie fest. Standardeinstellung ist medium, wenn nicht vorhanden. Siehe {{cssxref("outline-width")}}.

+

+
+
Beschreibung

+
+
Borders und outline sind sehr ähnlich. Allerdings unterscheiden sich die Umrisse von den Grenzen in den folgenden Punkten:

+
+
    
+ 
  • Outlines nehmen nie Raum ein, da sie außerhalb des Inhalts eines Elements gezeichnet werden.
    • 
+ 
  • 
+  
    Gemäß der Spezifikation müssen Umrisse nicht rechteckig sein, obwohl sie es normalerweise sind.
    
+ 
    • 
+

+
+
Wie bei allen Kurzform-Eigenschaften werden alle ausgelassenen Unterwerte auf ihren Initialwert gesetzt.

+
+
Bedenken zu Zugänglichkeit

+
+
Wenn Sie outline den Wert von 0 oder none zuweisen, wird der Standard-Fokussierungsstil des Browsers entfernt. Wenn ein Element mit ihm interagiert werden kann, muss es einen sichtbaren Fokusindikator haben. Sorgen Sie für eine offensichtliche Fokusgestaltung, wenn der Standardfokusstil entfernt wird.

+
+
+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beschreibung

+
+
Verwendung von Umrissen zum Setzen eines Fokusstils

+
+
HTML

+
+

+
<a href="#">This link has a special focus style.</a>
+

+
+
CSS

+
+
a {
+  border: 1px solid;
+  border-radius: 3px;
+  display: inline-block;
+  margin: 10px;
+  padding: 5px;
+}
+
+a:focus {
+  outline: 4px dotted #e73;
+  outline-offset: 4px;
+  background: #ffa;
+}
+

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Using_outline_to_set_a_focus_style", "100%", 60)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Basic UI', '#outline', 'outline')}}{{Spec2('CSS3 Basic UI')}}Keine Änderung.
{{SpecName('CSS2.1', 'ui.html#propdef-outline', 'outline')}}{{Spec2('CSS2.1')}}Anfangsdefinition

+
+
Browser Kompatibilität

+
+

+
+
+
{{Compat("css.properties.outline")}}

+

diff --git a/files/de/web/css/overflow-clip-box/index.html b/files/de/web/css/overflow-clip-box/index.html
new file mode 100644
index 0000000000..bc8b4bb4ff
--- /dev/null
+++ b/files/de/web/css/overflow-clip-box/index.html
@@ -0,0 +1,97 @@
+---
+title: overflow-clip-box
+slug: Web/CSS/overflow-clip-box
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Referenz
+  - Referenz
+  - Web
+translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box
+---
+
{{CSSRef}}{{Non-standard_header}}

+
+
Übersicht

+
+
Die overflow-clip-box CSS Eigenschaft bestimmt, bezogen auf welche Box die Zuschnitt erfolgt, wenn ein Überlauf stattfindet.

+
+

+
In Gecko wird standardmäßig padding-box überall verwendet, aber <input type="text"> und ähnliche Elemente verwenden den Wert content-box. Vor Firefox 29 war das Verhalten fest kodiert; seitdem benutzt Firefox diese Eigenschaft, die auch an anderen Stellen verwendet werden kann. Beachte, dass diese Eigenschaft nur in {{Glossary("User Agent")}} Stylesheets und dem Chrome Kontext standardmäßig aktiviert ist.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Globale Werte */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+

+
+
Werte

+
+

+ 
padding-box

+ 
Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Paddingbox erfolgt.

+ 
content-box

+ 
Diese Schlüsselwort gibt an, dass der Zuschnitt relativ zur Contentbox erfolgt.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
padding-box

+
+
<div class="things">
+  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
+  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
+</div>
+

+
+
.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}

+
+
.padding-box {
+  overflow-clip-box: padding-box;
+}
+

+
+
function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i < elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+

+
+
{{EmbedLiveSample('padding-box')}}

+
+
Spezifikationen

+
+
Diese Eigenschaft wurde der W3C CSSWG vorgeschlagen; sie ist noch nicht standardisiert, aber, falls sie akzeptiert wird, sollte sie in {{SpecName("CSS3 Overflow")}} erscheinen.

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.overflow-clip-box")}}
+
+
Siehe auch

+
+
    
+ 
  • Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}, {{Cssxref("display")}}
    • 
+

diff --git a/files/de/web/css/overflow/index.html b/files/de/web/css/overflow/index.html
new file mode 100644
index 0000000000..eec5ccd2bc
--- /dev/null
+++ b/files/de/web/css/overflow/index.html
@@ -0,0 +1,130 @@
+---
+title: overflow
+slug: Web/CSS/overflow
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/overflow
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die overflow Eigenschaft legt fest, ob Inhalte aus einem Element hinausragen dürfen oder, ob Scrollbalken beim Überlauf zum Einsatz kommen.

+
+
    
+ 
  • Standardwert: visible
    • 
+ 
  • Anwendbar auf: block, inline und table-cell Elemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
+
Syntax

+
+
overflow: visible | hidden | scroll | auto | inherit
+

+
+
Werte

+
+

+ 
visible

+ 
Standardwert. Der Inhalt wird nicht abgeschnitten und kann aus dem Element hinausragen.

+ 
hidden

+ 
Der Inhalt wird abgeschnitten und es werden keine Scrollbalken angezeigt.

+ 
scroll

+ 
Es werden immer Scrollbalken angezeigt, auch wenn der Inhalt nicht überläuft.

+ 
auto

+ 
Hängt vom Browser ab. Firefox stellt Scrollbalken zur Verfügung, wenn der Inhalt überläuft.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Mozilla Erweiterungen

+
+

+ 
-moz-scrollbars-none

+ 
{{ obsolete_inline() }}  stattdessen overflow:hidden

+ 
-moz-scrollbars-horizontal

+ 
{{ Deprecated_inline() }} Verwendung von overflow-x und overflow-y wird bevorzugt.

+ 
-moz-scrollbars-vertical

+ 
{{ Deprecated_inline() }} Verwendung von overflow-x und overflow-y wird bevorzugt.

+ 
-moz-hidden-unscrollable

+ 
Deaktiviert das Scrollen für das Wurzelelement (<html>, <body>) und ist nur für interne Zwecke gedacht (z.B. Themes).

+

+
+
Beispiele

+
+
p {
+     width: 12em;
+     height: 6em;
+     border: dotted;
+     overflow: auto;   /* Scrollbalken erscheinen nur wenn nötig */
+}
+
+

+
+
overflow: hidden

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
overflow: scroll

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
overflow: auto

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
overflow: auto

+ wenig Text

+
+
overflow: visible

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
+
Hinweise

+
+
Bis einschließlich Gecko 1.9.2 (Firefox 3.6), war die overflow Eigenschaft fälschlicherweise auch für Tabellengruppen verfügbar (<thead> , <tbody> , <tfoot>). Dieses Verhalten wurde in späteren Versionen korrigiert.

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Overflow', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Overflow')}}
+    
Changed syntax to allow one or two keywords instead of only one

+   
{{SpecName('CSS3 Box', '#propdef-overflow', 'overflow')}}{{Spec2('CSS3 Box')}}No change.
{{SpecName('CSS2.1', 'visufx.html#overflow', 'overflow')}}{{Spec2('CSS2.1')}}Initial definition.

+
+
{{cssinfo}}

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.overflow")}}

+
+
Siehe auch

+
+
    
+ 
  • Ähnliche CSS Eigenschaften: {{cssxref("text-overflow")}}, {{cssxref("white-space")}}, {{Cssxref("overflow-x")}}, {{Cssxref("overflow-y")}}, {{Cssxref("clip")}}
+

+
+
{{ languages( { "en": "en/CSS/overflow" } ) }}

diff --git a/files/de/web/css/overscroll-behavior-y/index.html b/files/de/web/css/overscroll-behavior-y/index.html
new file mode 100644
index 0000000000..996350ccac
--- /dev/null
+++ b/files/de/web/css/overscroll-behavior-y/index.html
@@ -0,0 +1,85 @@
+---
+title: overscroll-behavior-y
+slug: Web/CSS/overscroll-behavior-y
+translation_of: Web/CSS/overscroll-behavior-y
+---
+
{{CSSRef}}

+
+
Die overscroll-behavior-y CSS Eigenschaft ändert das Browserverhalten, wenn die vertikale Grenze des Scrollbereichs erreicht wurde.

+
+

+
Eine vollständige Erklärung gibt es auch unter {{cssxref("overscroll-behavior")}} .

+

+
+
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die overscroll-behavior-y Eigenschaft kann mit einem der untenstehenden Schlüsselworte definiert werden:

+
+
Werte

+
+

+ 
auto

+ 
Das standardmäßige Scrollüberlaufverhalten wird eingestellt.

+ 
contain

+ 
Es wird das standardmäßige Scrollüberlaufverhalten im aktuellen Element eingestellt, die Scrollverkettung, d.h. das gelichzeitige Scrollen von darunterliegenden Elementen wird verhindert.

+ 
none

+ 
Es gibt keine Scrollverkettung zu benachbarten Scrollzonen und das Standard-Scrollverhalten wird verhindert.

+

+
+
Formale  Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} 

+
+
Eine vollständige Erklärung gibt es auch unter {{cssxref("overscroll-behavior")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('Overscroll Behavior', '#propdef-overscroll-behavior-y','overscroll-behavior-y')}}{{Spec2('Overscroll Behavior')}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.overscroll-behavior-y")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/overscroll-behavior/index.html b/files/de/web/css/overscroll-behavior/index.html
new file mode 100644
index 0000000000..f2a7e10165
--- /dev/null
+++ b/files/de/web/css/overscroll-behavior/index.html
@@ -0,0 +1,104 @@
+---
+title: overscroll-behavior
+slug: Web/CSS/overscroll-behavior
+translation_of: Web/CSS/overscroll-behavior
+---
+
{{CSSRef}}

+
+
The overscroll-behavior CSS property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for {{cssxref("overscroll-behavior-x")}} and {{cssxref("overscroll-behavior-y")}}.

+
+
/* Keyword values */
+overscroll-behavior: auto; /* default */
+overscroll-behavior: contain;
+overscroll-behavior: none;
+
+/* Two values */
+overscroll-behavior: auto contain;
+
+/* Global values */
+overflow: inherit;
+overflow: initial;
+overflow: unset;
+

+
+
By default, mobile browsers tend to provide a "bounce" effect or even a page refresh when the top or bottom of a page (or other scroll area) is reached. You may also have noticed that when you have a dialog box with scrolling content on top of a page of scrolling content, once the dialog box's scroll boundary is reached, the underlying page will then start to scroll — this is called scroll chaining.

+
+
In some cases these behaviors are not desirable. you can use overscroll-behavior to get rid of unwanted scroll chaining and the browser's Facebook/Twitter app-inspired "pull to refresh"-type behavior.

+
+
{{cssinfo}}

+
+
Syntax

+
+
The overscroll-behavior property is specified as one or two keywords chosen from the list of values below.

+
+
Two keywords specifies the overscroll-behavior value on the x and y axes respectively. If only one value is specified, both x and y are assumed to have the same value.

+
+
Values

+
+

+ 
auto

+ 
The default scroll overflow behavior occurs as normal.

+ 
contain

+ 
Default scroll overflow behavior is observed inside the element this value is set on (e.g. "bounce" effects or refreshes), but no scroll chaining occurs to neighbouring scrolling areas, e.g. underlying elements will not scroll.

+ 
none

+ 
No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Examples

+
+
In our overscroll-behavior example (see the source code also), we present a full-page list of fake contacts, and a dialog box containing a chat window. 

+
+

+
+
Both of these areas scroll; normally if you scrolled the chat window until you hit a scroll boundary, the underlying contacts window would start to scroll too, which is not desirable. This can be stopped using overscroll-behavior-y (overscroll-behavior would also work) on the chat window, like this:

+
+
.messages {
+  height: 220px;
+  overflow: auto;
+  overscroll-behavior-y: contain;
+} 

+
+
We also wanted to get rid of the standard overscroll effects when the contacts are scrolled to the top or bottom (e.g. Chrome on Android refreshes the page when you scroll past the top boundary). This can be prevented by setting overscroll-behavior: none on the {{htmlelement("body")}} element:

+
+
body {
+  margin: 0;
+  overscroll-behavior: none;
+}

+
+
Specifications

+
+
Until the CSSWG publishes their own draft, the specification can only be found in its WICG Github Repository.

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS Overscroll Behavior', '#propdef-overscroll-behavior', 'overscroll-behavior')}}{{Spec2('CSS Overscroll Behavior')}} 

+
+
Browser compatibility

+
+
+
+
{{Compat("css.properties.overscroll-behavior")}}

+
+
See also

+
+
diff --git a/files/de/web/css/padding-bottom/index.html b/files/de/web/css/padding-bottom/index.html
new file mode 100644
index 0000000000..dc288c4904
--- /dev/null
+++ b/files/de/web/css/padding-bottom/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-bottom
+slug: Web/CSS/padding-bottom
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-bottom
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die padding-bottom Eigenschaft legt den unteren Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
padding-bottom: <Längenangabe> | <Prozentzahl> | inherit

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { padding-bottom: 5%; }
+.sidebox { padding-bottom: 10px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/padding-bottom", "ja": "ja/CSS/padding-bottom" } ) }}

diff --git a/files/de/web/css/padding-left/index.html b/files/de/web/css/padding-left/index.html
new file mode 100644
index 0000000000..601e6a5037
--- /dev/null
+++ b/files/de/web/css/padding-left/index.html
@@ -0,0 +1,86 @@
+---
+title: padding-left
+slug: Web/CSS/padding-left
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-left
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die padding-left Eigenschaft legt den linken Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
+
Syntax

+
+
padding-left: <Längenangabe> | <Prozentzahl> | inherit

+
+
Werte

+
+

+ 
<Längenangabe>

+ 
Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 
<Prozentzahl>

+ 
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
.content { padding-left: 5%; }
+.sidebox { padding-left: 10px; }
+

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
+
+
{{ languages( { "en": "en/CSS/padding-left", "ja": "ja/CSS/padding-left" } ) }}

diff --git a/files/de/web/css/padding-right/index.html b/files/de/web/css/padding-right/index.html
new file mode 100644
index 0000000000..a41d823d52
--- /dev/null
+++ b/files/de/web/css/padding-right/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-right
+slug: Web/CSS/padding-right
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-right
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die padding-right Eigenschaft legt den rechten Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
padding-right: <Längenangabe> | <Prozentzahl> | inherit

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { padding-right: 5%; }
+.sidebox { padding-right: 10px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
Spezifikation

+
    
+ 
  • {{ spec("http://www.w3.org/TR/CSS21/box.html#padding-properties","CSS 2.1 Box: padding", "CR") }}
    • 
+

+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/padding-right", "ja": "ja/CSS/padding-right" } ) }}

diff --git a/files/de/web/css/padding-top/index.html b/files/de/web/css/padding-top/index.html
new file mode 100644
index 0000000000..319bde784a
--- /dev/null
+++ b/files/de/web/css/padding-top/index.html
@@ -0,0 +1,76 @@
+---
+title: padding-top
+slug: Web/CSS/padding-top
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/padding-top
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die padding-top Eigenschaft legt den oberen Innenabstand eines Elementes fest. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
    
+ 
  • Standardwert: 0
    • 
+ 
  • Anwendbar auf: alle Elemente außer table-*-group, table-row und table-column
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: beziehen sich auf die Breite des umschließenden Blocks.
    • 
+ 
  • Medium: visuell
    • 
+ 
  • berechneter Wert: eine Prozentzahl wie festgelegt oder die absolute Länge.
    • 
+

+
Syntax

+
padding-top: <Längenangabe> | <Prozentzahl>  | inherit

+
Werte

+

+ 

+  <Längenangabe>

+ 

+  Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 

+  <Prozentzahl>

+ 

+  Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 

+  inherit

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
.content { padding-top: 5%; }
+.sidebox { padding-top: 10px; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0)
Opera3.5
Safari (WebKit)1.0 (85)

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( { "en": "en/CSS/padding-top", "ja": "ja/CSS/padding-top" } ) }}

diff --git a/files/de/web/css/padding/index.html b/files/de/web/css/padding/index.html
new file mode 100644
index 0000000000..96406d0299
--- /dev/null
+++ b/files/de/web/css/padding/index.html
@@ -0,0 +1,125 @@
+---
+title: padding
+slug: Web/CSS/padding
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Innenabstand
+  - CSS Referenz
+  - Layout
+  - Web
+translation_of: Web/CSS/padding
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die padding Eigenschaft ist eine Kurzform für die Innenabstände aller vier Seiten eines Elementes. Der Innenabstand ist der Bereich zwischen dem Inhalt und dem Rahmen (auch: padding area).

+
+
{{cssinfo}}

+
+
Syntax

+
+
padding:   [ <Längenangabe> | <Prozentzahl> ] {1,4} | inherit

+
+
Werte

+
+
Es werden bis zu vier der folgenden Werte akzeptiert:

+
+

+ 
<Längenangabe>

+ 
Legt eine bestimmte Länge fest. Negative Werte sind nicht erlaubt.

+ 
<Prozentzahl>

+ 
Ein prozentualer Wert, der sich auf die Breite des umschließenden Blocks (containing block) bezieht. Negative Werte nicht sind erlaubt.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+ 
Ein Wert

+ 
Gilt für alle vier Seiten.

+ 
Zwei Werte

+ 
Der erste Wert bestimmt die oberen und unteren Abstände, der zweite Wert legt die Abstände rechts und links fest.

+ 
Drei Werte

+ 
Der erste Wert bestimmt den oberen Abstand, der zweite Wert legt die Abstände für rechts und links zusammen fest und der dritte Wert bestimmt den unteren Abstand.

+ 
Vier Werte

+ 
Für jede Seite können die Abstände einzeln festgelegt werden. In der Reihenfolge: oben, rechts, unten, links.

+

+
+
Beispiele

+
+
padding: 5%;                /* 5% Abstand auf allen Seiten */
+
+padding: 10px;              /* 10px Abstand auf allen Seiten */
+
+padding: 10px 20px;         /* oben und unten 10px */
+                            /* links und rechts 20px */
+
+padding: 10px 3% 20px;      /* oben 10px */
+                            /* links und rechts 3% */
+                            /* unten 20px */
+
+padding: 1em 3px 30px 5px;  /* oben 1em */
+                            /* rechts 3px */
+                            /* unten 30px */
+                            /* links 5px */
+

+
+
border:outset; padding:5% 1em;

+
+
Livebeispiel

+
+
HTML Inhalt

+
+
<h4>Hallo Welt!</h4>
+<h3>Der Innenabstand ist in dieser Zeile anders.</h3>

+
+
CSS Inhalt

+
+
h4 {
+  background-color: green;
+  padding: 50px 20px 20px 50px;
+}
+
+h3{
+  background-color: blue;
+  padding: 400px 50px 50px 400px;
+}

+
+
{{ EmbedLiveSample('Livebeispiel') }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Box', '#the-padding', 'padding') }}{{ Spec2('CSS3 Box') }}keine Änderung
{{ SpecName('CSS2.1', 'box.html#propdef-padding', 'padding-top') }}{{ Spec2('CSS2.1') }}keine Änderung
{{ Specname('CSS1', '#padding', 'padding') }}{{ Spec2('CSS1') }}Ursprüngliche Definition

+
+
Browserkompatiblität

+
+{{Compat("css.properties.padding")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/page-break-after/index.html b/files/de/web/css/page-break-after/index.html
new file mode 100644
index 0000000000..ef08a19da6
--- /dev/null
+++ b/files/de/web/css/page-break-after/index.html
@@ -0,0 +1,90 @@
+---
+title: page-break-after
+slug: Web/CSS/page-break-after
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-after
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die page-break-after Eigenschaft dient zur Regulierung von Seitenumbrüchen nach dem aktuellen Element.

+
    
+ 
  • Standardwert: auto
    • 
+ 
  • Anwendbar auf: Blockelemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell, Seiten
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
Syntax

+
page-break-after: auto | always | avoid | left | right | inherit
+

+
Werte

+

+ 

+  auto

+ 

+  Standardwert. Automatischer Seitenumbruch.

+ 

+  always

+ 

+  Es wird immer ein Seitenumbruch nach einem Element eingefügt.

+ 

+  avoid {{ Unimplemented_inline() }}

+ 

+  Ein Seitenumbruch nach einem Element wird vermieden.

+ 

+  left {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.

+ 

+  right {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.

+ 

+  inherit {{ Unimplemented_inline() }}

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
/* Überschriften auf eine neue Seite platzieren */
+h1,h2, h3 { page-break-after:always; }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0) [*]
Opera7.0
Safari (WebKit)1.2 (125)

+
[*] Gecko unterstützt nur page-break-after:always. Siehe {{ bug(132035) }}

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( {"en": "en/CSS/page-break-after" } ) }}

diff --git a/files/de/web/css/page-break-before/index.html b/files/de/web/css/page-break-before/index.html
new file mode 100644
index 0000000000..7dfffaf948
--- /dev/null
+++ b/files/de/web/css/page-break-before/index.html
@@ -0,0 +1,90 @@
+---
+title: page-break-before
+slug: Web/CSS/page-break-before
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-before
+---
+
{{ CSSRef() }}

+
Übersicht

+
Die page-break-before Eigenschaft dient zur Regulierung von Seitenumbrüchen vor dem aktuellen Element.

+
    
+ 
  • Standardwert: auto
    • 
+ 
  • Anwendbar auf: Blockelemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell, Seiten
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
Syntax

+
page-break-before: auto | always | avoid | left | right | inherit
+

+
Werte

+

+ 

+  auto

+ 

+  Standardwert. Automatischer Seitenumbruch.

+ 

+  always

+ 

+  Es wird immer ein Seitenumbruch vor einem Element eingefügt.

+ 

+  avoid {{ Unimplemented_inline() }}

+ 

+  Ein Seitenumbruch vor einem Element wird vermieden.

+ 

+  left {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten linken Seite platziert wird.

+ 

+  right {{ Unimplemented_inline() }}

+ 

+  Es wird ein Seitenumbruch eingefügt, sodass das folgende Element auf der nächsten rechten Seite platziert wird.

+ 

+  inherit {{ Unimplemented_inline() }}

+ 

+  Der Wert des Elternelements wird geerbt.

+

+
Beispiele

+
/* Vermeide Seitenumbruch vor dem div-Element */
+div.note { page-break-before: avoid;  }
+

+
Browser Kompatibilität

+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer4.0
Firefox (Gecko)1.0 (1.0) [*]
Opera7.0
Safari (WebKit)1.2 (125)

+
[*] Gecko unterstützt nur page-break-before:always. Siehe {{ bug(132035) }}

+
Spezifikation

+
+
Siehe auch

+
+
{{ languages( {"en": "en/CSS/page-break-before" } ) }}

diff --git a/files/de/web/css/page-break-inside/index.html b/files/de/web/css/page-break-inside/index.html
new file mode 100644
index 0000000000..6136f98b9e
--- /dev/null
+++ b/files/de/web/css/page-break-inside/index.html
@@ -0,0 +1,87 @@
+---
+title: page-break-inside
+slug: Web/CSS/page-break-inside
+tags:
+  - CSS
+  - CSS Referenz
+translation_of: Web/CSS/page-break-inside
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die page-break-inside Eigenschaft dient zur Regulierung von Seitenumbrüchen innerhalb des aktuellen Elements.

+
+
    
+ 
  • Standardwert: auto
    • 
+ 
  • Anwendbar auf: Blockelemente
    • 
+ 
  • Vererbbar: Nein
    • 
+ 
  • Prozentwerte: Nein
    • 
+ 
  • Medium: visuell, Seiten
    • 
+ 
  • berechneter Wert: wie festgelegt
    • 
+

+
+
Syntax

+
+
page-break-inside: auto | avoid | inherit
+

+
+
Werte

+
+

+ 
auto

+ 
Standardwert. Automatischer Seitenumbruch.

+ 
avoid

+ 
Ein Seitenumbruch innerhalb eines Elements wird vermieden.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
/* Vermeide Seitenumbruch innerhalb des Absatzes */
+p { page-break-inside: avoid;  }
+

+
+
Browser Kompatibilität

+
+
+ 
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
Browserab Version
Internet Explorer8.0
Firefox (Gecko)---
Opera7.0
Safari (WebKit)1.3 (312)

+
+
Spezifikation

+
+
+
+
Siehe auch

+
+
+
+
{{ languages( {"en": "en/CSS/page-break-inside" } ) }}

diff --git a/files/de/web/css/paged_media/index.html b/files/de/web/css/paged_media/index.html
new file mode 100644
index 0000000000..1a9fafe9cf
--- /dev/null
+++ b/files/de/web/css/paged_media/index.html
@@ -0,0 +1,21 @@
+---
+title: Seitennummerierte Medien
+slug: Web/CSS/Paged_Media
+tags:
+  - CSS
+  - CSS3
+  - Seitenumbrüche
+translation_of: Web/CSS/Paged_Media
+---
+
{{cssref}}

+
+
Seitennummerierte Medieneigenschaften steuern die Darstellung von Inhalten für den Druck oder andere Medien, die den Inhalt in separate Seiten aufteilen. Sie erlauben es, Seitenumbrüche zu setzen, den Druckbereich festzulegen, linke und rechte Seiten unterschiedlich zu gestalten und Umbrüche innerhalb von Elementen zu steuern. Allgemein unterstützte Eigenschaften beinhalten

+
+
    
+ 
  • {{cssxref("page-break-before")}}
    • 
+ 
  • {{cssxref("page-break-after")}}
    • 
+ 
  • {{cssxref("page-break-inside")}}
    • 
+ 
  • {{cssxref("orphans")}}
    • 
+ 
  • {{cssxref("widows")}}
    • 
+ 
  • {{cssxref("@page")}}
    • 
+

diff --git a/files/de/web/css/percentage/index.html b/files/de/web/css/percentage/index.html
new file mode 100644
index 0000000000..36cc54c434
--- /dev/null
+++ b/files/de/web/css/percentage/index.html
@@ -0,0 +1,84 @@
+---
+title: 
+slug: Web/CSS/percentage
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/percentage
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der <percentage> CSS Datentyp repräsentiert einen Prozentwert. Viele CSS Eigenschaften akzeptieren Prozentwerte, oft um Größen bezüglich Elternobjekten zu definieren. Prozentwerte werden durch einen {{cssxref("<number>")}} Wert unmittelbar gefolgt von einem Prozentzeichen % angegeben. Wie bei allen Einheiten in CSS wird kein Leerzeichen zwischen der Zahl und dem '%' geschrieben.

+
+
Viele Längeneigenschaften verwenden Prozentwerte, wie {{ Cssxref("width") }}, {{ Cssxref("margin") }} und {{ Cssxref("padding") }}. Prozentwerte können auch in {{ Cssxref("font-size") }} vorkommen, wo die Größe des Texts direkt von der Textgröße des Elternelements abhängt.

+
+
Hinweis: Nur berechnete Werte werden vererbt. D. h. auch wenn ein Prozentwert für eine Elterneigenschaft verwendet wird, wird für die vererbte Eigenschaft ein realer Wert, wie beispielsweise eine Breite in Pixeln für einen {{cssxref("<length>")}} Wert, verwendet, nicht der Prozentwert.

+
+
Interpolation

+
+
Werte des <percentage> CSS Datentyps können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie als reale Fließkommazahlen interpoliert. Die Geschwindigkeit der Interpolation wird durch die Timingfunktion bestimmt, die mit der Animation verbunden ist.

+
+
Beispiele

+
+

+
<div style="background-color:#0000FF;">
+  <div style="width:50%;margin-left:20%;background-color:#00FF00;">Breite: 50%, linker Außenabstand: 20%</div>
+  <div style="width:30%;margin-left:60%;background-color:#FF0000;">Breite: 30%, linker Außenabstand: 60%</div>
+</div>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_1','600','70') }}

+
+

+
<div style="font-size:18px;">
+  Text in Normalgröße (18px)
+  <span style="font-size:50%;">50%</span>
+  <span style="font-size:200%;">200%</span>
+</div>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_2','600','50') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS3 Values', '#percentages', '<percentage>') }}{{ Spec2('CSS3 Values') }}Keine signifikante Änderung zu CSS Level 2 (Revision 1)
{{ SpecName('CSS2.1', 'syndata.html#percentage-units', '<percentage>') }}{{ Spec2('CSS2.1') }}Keine Änderung zu CSS Level 1
{{ SpecName('CSS1', '#percentage-units', '<percentage>') }}{{ Spec2('CSS1') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.types.percentage")}}
diff --git a/files/de/web/css/pointer-events/index.html b/files/de/web/css/pointer-events/index.html
new file mode 100644
index 0000000000..29916ac619
--- /dev/null
+++ b/files/de/web/css/pointer-events/index.html
@@ -0,0 +1,184 @@
+---
+title: pointer-events
+slug: Web/CSS/pointer-events
+translation_of: Web/CSS/pointer-events
+---
+
{{CSSRef}}

+
+
Zusammenfassung

+
+
Die CSS-Eigenschaft pointer-events erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element target eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von visiblePainted auf den SVG Inhalt angewandt.

+
+
Der Wert none ist nicht nur Indikator, dass das Element kein Ziel für Mouse-Events ist, sondern weist den Mouse-Event zusätzlich an, "durch" das Element zu gehen und stattdessen auf was auch immer auch "darunterliegend" ist, zu zielen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Keyword values */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted;
+pointer-events: visibleFill;
+pointer-events: visibleStroke;
+pointer-events: visible;
+pointer-events: painted;
+pointer-events: fill;
+pointer-events: stroke;
+pointer-events: all;
+
+/* Global values */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Das Element verhält sich als ob die pointer-events Eigenschaft nicht spezifiziert wurde. Im SVG-Inhalt hat dieser Wert und der Wert visiblePainted den selben Effekt.

+ 
none

+ 
Das Element ist nie das Ziel von Mouse-Events;  trotzdem werden abstämmige Elemente angezielt, sofern Ihre pointer-events einen abweichenden Wert haben. In diesem Fall lösen Mouse-Events während Ihrem Weg zu/von den Nachkömmlingen während der Event-Capture/bubble-Phasen gegebenenfalls die Event-Listener des übergeordneten Elements aus.

+ 
visiblePainted

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist, sich der Mauszeiger im Inneren (z. B. 'fill') befindet und die fill-Eigenschaft einen anderen Wert als none hat oder wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet und die stroke-Eigenschaft einen anderen Wert als none hat.

+ 
visibleFill

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist und sich der Mauszeiger im Inneren (z. B. 'fill') befindet. Der Wert der fill-Eigenschaft beinflusst die Event-Verarbeitung nicht.

+ 
visibleStroke

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist und sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Der Wert der stroke-Eigenschaft beinflusst die Event-Verarbeitung nicht.

+ 
visible

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn die visibility Eigenschaft auf visible gesetzt ist und sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befindet. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
painted

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet, und die fill-Eigenschaft einen anderen Wert als none hat, oder sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke')  des Elements befindet, und die stroke-Eigenschaft einen anderen Wert als none hat.  Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
fill

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger im Inneren (z. B. 'fill') des Elements befindet. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
stroke

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+ 
all

+ 
Nur SVG. Das Element kann nur Ziel eines Mouse-Events werden, wenn sich der Mauszeiger entweder im Inneren (z. B. 'fill') oder über einem Umgrenzung (z. B. 'stroke') des Elements befinden. Die Werte der stroke- und fill-Eigenschaft beinflussen die Event-Verarbeitung nicht.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Beispiel 1

+
+
/* Beispiel 1: Unterbinden die Reaktion von `img` auf alle Mouse-Events wie z. B. dragging, hovering, clicking */
+img {
+  pointer-events: none;
+}

+
+
Beispiel 2

+
+
Unterbinden eine Reaktion des Link-Tags mit der Eigenschaft href=http://example.com.

+
+
<ul>
+  <li><a href="https://developer.mozilla.org">MDN</a></li>
+  <li><a href="http://example.com">example.com</a></li>
+</ul>

+
+
a[href="http://example.com"] {
+  pointer-events: none;
+}

+
+
{{EmbedLiveSample('Example_2', "500", "100")}}

+
+
Anmerkungen

+
+
Es gilt zu beachten: Durch pointer-events zu verhindern, dass ein Element Ziel eines Mouse-Events wird, bedeutet nicht, dass Mouse-Event-Listeners auf diesem Element nicht ausgelößt werden oder werden können. Wenn bei einem der Kinder des Elements pointer-events explizit gesetzt wurde, um zu erlauben, dass dieses Ziel eines Mouse-Events wird, werden alle auf das Kind gerichteten Events entlang der Elternkette durch das Elternelement wandern und wohlmöglich Events des Elternelements auslösen. Natürlich wird jede Mausinteraktion auf einem Punkt des Bildschirms, welcher vom Eltern- aber nicht vom Kindelement bedeckt ist, weder vom Kind noch vom Elternelement eingefangen (sie wird durch das Elternelement hindurchgehen und auf das zielen, was immer "darunterliegend" ist).

+
+
Wir würden gerne feingranularere Kontrolle (als lediglich auto und none) über die Teile eines Elements welche Mouse-Events "einfangen" und wann, im HTML bereitstellen. Um uns bei der Entscheidung zu helfen, welche pointer-events für HTML weiter ausgebaut werden sollten, oder wenn Sie irgend welche speziellen Wünsche haben, was Ihnen diese Eigenschaft ermöglichen sollte, dann fügen Sie diese bitte dem Use cases Abschnitt dieser Wiki Seite hinzu (Machen Sie sich über die Ordentlichkeit keine Sorgen).

+
+
Diese Eigenschaft kann auch benutzt werden um bessere Bildraten beim Scrollen zu erzielen. Tatsächlich, während des Scrollens fährt die Maus über einige Elemente auf denen der hover-Effekt angewendet wird. Diese Effekte hingegen bleiben meist unbemerkt und resultieren trotzdem meist in hakeligen Scrollen.  pointer-events: none auf den body anzuwenden deaktiviert Mouse-Events inkl. hover und wirkt sich positiv auf die Flüssigkeit des Scrollens. 

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationenStatusKommentar
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}} 

+
+
Seine Erweiterung für HTML-Elemente, trotz Präsenz in frühen Entwürfen von CSS Basic User Interface Module Level 3, wurde auf sein level 4 erhoben.

+
+
Browser-Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
SVG support1.0{{CompatGeckoDesktop("1.8")}}11.09.0 (2.0)3.0 (522)
HTML/XML content2.0{{CompatGeckoDesktop("1.9.2")}} [1]11.015.04.0 (530)

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}

+

+
+
[1] Vor Firefox 41, standardmäßig deaktiviert. Seit Firefox 41, standardmäßig auf Desktop aktiviert, allerdings nur in Nightly builds.

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/position/index.html b/files/de/web/css/position/index.html
new file mode 100644
index 0000000000..7acf3f3009
--- /dev/null
+++ b/files/de/web/css/position/index.html
@@ -0,0 +1,104 @@
+---
+title: position
+slug: Web/CSS/position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Positionierung
+  - Referenz
+translation_of: Web/CSS/position
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die position Eigenschaft legt die Positionsart eines Elements fest. Für die Positionierung selbst werden die Eigenschaften top, right, bottom oder left verwendet.

+
+
Ein positioniertes Element ist ein Element für das absolute, fixed oder relative als position definiert wurde.

+ Ein absolut positioniertes Element ist ein Element für das absolute oder fixed als position definiert wurde.

+
+
{{cssinfo}}

+
+
Syntax

+
+
{{csssyntax}}
+

+
+
Werte

+
+

+ 
static

+ 
Standardwert. Das Element ist im normalen Fluss. Die Eigenschaften top, right, bottom oder left haben keine Auswirkungen.

+ 
relative

+ 
Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, da an der ursprünglichen Position Platz gelassen wird. Bei  table-*-group, table-row, table-column, table-cell, und table-caption Elementen ist kein Effekt definiert.

+ 
absolute

+ 
Das Element wird aus dem normalen Fluss gelöst und unabhängig verschoben. Dabei können andere Elemente verdeckt werden. Diese verhalten sich so, als ob das Element nicht vorhanden wäre und lassen keinen Platz für das Element.

+ 
sticky {{Experimental_inline}}

+ 
Eine Mischung zwischen fixed und relative: Das Element wird vom normalen Fluss aus verschoben und hat keinen Einfluss auf andere Elemente, solange es sich innerhalb des Viewports befindet. Sobald es sich ausserhalb befindet, wird das Element aus dem normalen Fluss gelöst und bleibt so beim Scrollen an seiner fest definierten Position.

+ 
fixed

+ 
Die Verschiebung orientiert sich am Viewport. Das Element wird aus dem normalen Fluss gelöst und bleibt auch beim Scrollen an seiner fest definierten Position. Beim Drucken wird das Element auf jeder Seite an der positionierten Stelle angezeigt.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Beispiele

+
+
Das folgende Beispiel verdeutlicht den Unterschied zwischen position: absolute und position: fixed. Während das absolut positionierte Element beim Scrollen mitwandert, bleibt das mit fixed positionierte Element fest an seiner Position.

+
+
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+   "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=utf-8">
+<title>Position absolute und fixed</title>
+<style type="text/css">
+p {font-size:30px; line-height:3em;}
+div.pos {width:49%; text-align:center; border:2px solid #00f;}
+div#abs {position:absolute; bottom:0; left:0;}
+div#fix {position:fixed; bottom:0; right:0;}
+</style>
+</head>
+<body>
+  <p>This<br>is<br>some<br>tall,<br>tall,
+    <br>tall,<br>tall,<br>tall<br>content.</p>
+  <div id="fix" class="pos"><p>Fixed</p></div>
+  <div id="abs" class="pos"><p>Absolute</p></div>
+</body>
+</html>
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{SpecName('CSS2.1', 'visuren.html#propdef-position', 'position')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS3 Positioning')}}{{Spec2('CSS3 Positioning')}}sticky hinzugefügt

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.position")}}

+
+
Siehe auch

+
+
+
+
{{ languages( { "en": "en/CSS/position", "fr": "fr/CSS/position", "es": "es/CSS/position" } ) }}

diff --git a/files/de/web/css/position_value/index.html b/files/de/web/css/position_value/index.html
new file mode 100644
index 0000000000..6ed01c98ab
--- /dev/null
+++ b/files/de/web/css/position_value/index.html
@@ -0,0 +1,86 @@
+---
+title: 
+slug: Web/CSS/position_value
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/position_value
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <position> CSS Datentyp beschreibt eine Koordinate im 2D-Raum, die dazu verwendet wird, die Position relativ zu einer Box zu setzen.

+
+
Eine bestimmte Position kann durch zwei Schlüsselwörter mit bestimmten Versätzen angegeben werden. Ein Schlüsselwort repräsentiert einen Rand der Elementbox oder die Mittellinie zwischen zwei Rändern: left, right, top, bottom oder center (was entweder die Mitte zwischen dem linken und rechten Rand repräsentiert oder die Mitte zwischen dem oberen und unteren Rand, abhängig vom Kontext).

+
+
{{experimental_inline}}Ein Versatz kann entweder ein relativer Wert sein, ausgedrückt durch einen {{cssxref("<percentage>")}} Wert, oder ein absoluter {{cssxref("<length>")}} Wert. Positive Werte werden nach rechts oder unten versetzt, je nachdem, was zutrifft. Negative Werte werden in die anderen Richtungen versetzt.

+
+
Die endgültige Position, die durch den <position> Wert beschrieben wird, muss nicht innerhalb der Elementbox liegen.

+
+
Falls ein Versatz ohne zugehöriges Schlüsselwort angegeben wurde, wird für es center angenommen.

+
+
Interpolation

+
+
Die Werte für die Abzisse und die Ordinate werden unabhängig voneinander interpoliert. Da die Geschwindigkeit für beide durch dieselbe {{cssxref("<timing-function>")}} definiert wird, folgt der Punkt einer Linie.

+
+
Werte

+
+
/* 1-Wert-Syntax */
+Schlüsselwort                  /* Der zugehörige Rand, die andere Richtung verweist auf center, die Mitte des Randes. */
+<length> oder <percentage> /* Die Position auf der x-Achse, 50% für die y-Achse. */
+
+/* 2-Werte-Syntax */
+Schlüsselwort Schlüsselwort          /* Ein Schlüsselwort für jede Richtung, die Reihenfolge ist unwichtig. */
+Schlüsselwort Wert            /* Der Wert ist der Versatz für den Rand, der durch das Schlüsselwort definiert wird. */
+

+
+
Formale Syntax

+
+
[ [ left | center | right | top | bottom | <percentage> | <length> ] |
+                  [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] |
+                  [ center | [ left | right ] [ <percentage> | <length> ]? ] &&
+                  [ center | [ top | bottom ] [ <percentage> | <length> ]? ]
+                ]
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#position', '<position>')}}{{Spec2('CSS3 Values')}}Listed die Links zu beiden Definitionen auf mit der Voraussetzung, dass diese koherent sind: falls {{SpecName('CSS3 Backgrounds')}} unterstützt wird, muss deren Definition von <position> ebenfalls verwendet werden.
{{SpecName('CSS3 Backgrounds', '#position', '<position>')}}{{Spec2('CSS3 Backgrounds')}}Definiert <position> explizit und erweitert es um die Unterstützung von Versätzen von einem beliebigen Rand.
{{SpecName('CSS2.1', 'colors.html#propdef-background-position', '<position>')}}{{Spec2('CSS2.1')}}Erlaubt die Kombination von einem Schlüsselwort mit einem {{cssxref("<length>")}} oder einem {{cssxref("<percentage>")}} Wert.
{{SpecName('CSS1', '#background-position', '<position>')}}{{Spec2('CSS1')}}Definiert <position> anonym als Wert von {{cssxref("background-position")}}.

+
+
Browser Kompatibilität

+
+{{Compat("css.types.position")}}
diff --git a/files/de/web/css/property_template/index.html b/files/de/web/css/property_template/index.html
new file mode 100644
index 0000000000..57b2483609
--- /dev/null
+++ b/files/de/web/css/property_template/index.html
@@ -0,0 +1,165 @@
+---
+title: Eigenschaft Vorlage
+slug: Web/CSS/Property_Template
+tags:
+  - CSS
+  - CSS Referenz
+  - MDN Meta
+translation_of: MDN/Contribute/Howto/Document_a_CSS_property/Property_template
+---
+
{{MDNSidebar}}
{{ CSSRef() }}

+
+
Übersicht

+
+
Eine Beschreibung der Eigenschaft, welche erklärt was diese Eigenschaft bewirkt.

+
+
(Falls vorhanden) Wichtige Informationen zu dieser Eigenschaft

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+property: value1;
+property: value2;
+
+/* <length> Werte */
+property: 12.8em;
+
+/* Globale Werte */
+property: inherit; <-- To remember those are a possible values
+property: initial;
+property: unset;
+

+
+
<Wert>: wert | wert2 | wert3 | wert2

+
+
Werte

+
+

+ 
wert1 {{ gecko_minversion_inline("9.9") }}

+ 
Erläuterung.

+ 
wert2

+ 
....

+

+
+
(Falls vorhanden) Mozilla Erweiterungen

+
+

+ 
-moz-*

+ 
Erklärung

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Beispiel 1

+
+
CSS

+
+
ElementName {
+  Eigenschaft: Wert;
+  dazu: "Beispiel";
+  Traum: 10000000mm;
+  Liebe: "Gefahr";
+}

+
+
HTML

+
+
<ElementName>foo bar</ElementName>

+
+
Ergebnis

+
+
{{EmbedLiveSample("Beispiel_1")}}

+
+
Beispiel 2 {{ gecko_minversion_inline("9.9") }}

+
+
ElementName {
+  eigenschaft: wert;
+  /* ... */
+}

+
+
Spezifikationen

+
+
Benutze ausschließlich die Standardtabelle. Füge andere Spezifikationen am Ende an. Benutze das Makro \{{SpecName()}} für den Name und \{{Spec2()}} für den Status. Auf diese Weise wird der Tabelleninhalt automatisch angepasst, sobald sich der Status einer Spezifikation ändert.

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName("CSS3 Animations", "#fake-link", "fake-value")}}{{Spec2("CSS3 Animations")}}Keine Änderung
{{SpecName("CSS2.1", "#fake-link", "fake value")}}{{Spec2("CSS2.1")}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable()}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}100{{CompatUnknown}}{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatUnknown}}{{CompatUnknown}}100{{CompatUnknown}}{{CompatUnknown}}

+

+
+
Siehe auch

+
+
    
+ 
  • Links zu verwandten Eigenschaften
    • 
+

diff --git a/files/de/web/css/pseudo-classes/index.html b/files/de/web/css/pseudo-classes/index.html
new file mode 100644
index 0000000000..ecbf7e24dc
--- /dev/null
+++ b/files/de/web/css/pseudo-classes/index.html
@@ -0,0 +1,122 @@
+---
+title: Pseudo-Klassen
+slug: Web/CSS/Pseudo-classes
+translation_of: Web/CSS/Pseudo-classes
+---
+
{{CSSRef}}

+
+
Eine Pseudoklasse in CSS ist ein Schlüsselbegriff, welcher hinter einen Selektor gestellt wird, um einen besonderen Zustand abzufragen. So steht beispielsweise {{ Cssxref(":hover") }} für Elemente, die gerade mit dem Mauszeiger berührt werden.

+
+
Mit Pseudoklassen und Pseudoelementen lässt sich eine Seite nicht nur in Bezug auf die Struktur des Inhalts gestalten, sondern auch im Bezug auf andere Faktoren wie zum Beispiel den Browserverlauf  ({{ cssxref(":visited") }}), eingegebene Formulardaten ({{ cssxref(":checked") }}) oder die Position des Mauszeigers ({{ cssxref(":hover") }}).

+
+
Syntax

+
+
selector:pseudo-class {
+  property: value;
+}
+

+
+
Übersicht der standardisierten Pseudoklassen

+
+

+
    
+ 
  • {{ Cssxref(":active") }}
    • 
+ 
  • {{ Cssxref(":checked") }}
    • 
+ 
  • {{ Cssxref(":default") }}
    • 
+ 
  • {{ Cssxref(":dir", ":dir()")}}
    • 
+ 
  • {{ Cssxref(":disabled") }}
    • 
+ 
  • {{ Cssxref(":empty") }}
    • 
+ 
  • {{ Cssxref(":enabled") }}
    • 
+ 
  • {{ Cssxref(":first") }}
    • 
+ 
  • {{ Cssxref(":first-child") }}
    • 
+ 
  • {{ Cssxref(":first-of-type") }}
    • 
+ 
  • {{ Cssxref(":fullscreen") }}
    • 
+ 
  • {{ Cssxref(":focus") }}
    • 
+ 
  • {{ Cssxref(":hover") }}
    • 
+ 
  • {{ Cssxref(":indeterminate") }}
    • 
+ 
  • {{ Cssxref(":in-range") }}
    • 
+ 
  • {{ Cssxref(":invalid") }}
    • 
+ 
  • {{ Cssxref(":lang", ":lang()") }}
    • 
+ 
  • {{ Cssxref(":last-child") }}
    • 
+ 
  • {{ Cssxref(":last-of-type") }}
    • 
+ 
  • {{ Cssxref(":left") }}
    • 
+ 
  • {{ Cssxref(":link") }}
    • 
+ 
  • {{ Cssxref(":not", ":not()") }}
    • 
+ 
  • {{ Cssxref(":nth-child", ":nth-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-child", ":nth-last-child()") }}
    • 
+ 
  • {{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}
    • 
+ 
  • {{ Cssxref(":nth-of-type", ":nth-of-type()") }}
    • 
+ 
  • {{ Cssxref(":only-child") }}
    • 
+ 
  • {{ Cssxref(":only-of-type") }}
    • 
+ 
  • {{ Cssxref(":optional") }}
    • 
+ 
  • {{ Cssxref(":out-of-range") }}
    • 
+ 
  • {{ Cssxref(":read-only") }}
    • 
+ 
  • {{ Cssxref(":read-write") }}
    • 
+ 
  • {{ Cssxref(":required") }}
    • 
+ 
  • {{ Cssxref(":right") }}
    • 
+ 
  • {{ Cssxref(":root") }}
    • 
+ 
  • {{ Cssxref(":scope") }}
    • 
+ 
  • {{ Cssxref(":target") }}
    • 
+ 
  • {{ Cssxref(":valid") }}
    • 
+ 
  • {{ Cssxref(":visited") }}
    • 
+

+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('Fullscreen') }}{{ Spec2('Fullscreen') }}:fullscreen hinzugefügt
{{ SpecName('HTML WHATWG') }}{{ Spec2('HTML WHATWG') }}Keine Änderungen seit {{ SpecName('HTML5 W3C') }}.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}:any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column()und :matches() hinzugefügt.

+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS3 Selectors')}} und {{SpecName('HTML5 W3C')}}.
{{ SpecName('HTML5 W3C') }}{{ Spec2('HTML5 W3C') }}:link, :visited, :active, :enabled, :disabled, :checked und :indeterminate geändert

+    :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write und :dir() hinzugefügt
{{ SpecName('CSS3 Basic UI') }}{{ Spec2('CSS3 Basic UI') }}:default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only und :read-write hinzugefügt
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}:target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty und :not() 

+    Defined the syntax of :enabled, :disabled, :checked und :indeterminate, hinzugefügt.

+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}:lang(), :first-child, :hover und :focus hinzugefügt.

+    Keine Änderungen der bisherigen Pseudoklassen aus {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}:link, :visited und :active hinzugefügt

diff --git a/files/de/web/css/pseudo-elements/index.html b/files/de/web/css/pseudo-elements/index.html
new file mode 100644
index 0000000000..399548ad95
--- /dev/null
+++ b/files/de/web/css/pseudo-elements/index.html
@@ -0,0 +1,78 @@
+---
+title: Pseudoelemente
+slug: Web/CSS/Pseudo-elements
+translation_of: Web/CSS/Pseudo-elements
+---
+
{{ CSSRef() }}

+
+
Summary

+
+
Wie auch {{ Cssxref("pseudo-classes") }} können  Pseudoelemente einem Selektor hinzugefügt werden, aber statt einzelen Zustände ermöglichen Sie das gestalten eines einzelnen Teils von einem Element. Das Pseudoelement {{ Cssxref("::first-line") }} richtet sich bspw. nur an die erste Zeile eines Elements.

+
+
Syntax

+
+
selector::pseudo-element {
+  property: value;
+}

+
+
Pseudoelemente

+
+
    
+ 
  • {{ Cssxref("::after") }}
    • 
+ 
  • {{ Cssxref("::before") }}
    • 
+ 
  • {{ Cssxref("::first-letter") }}
    • 
+ 
  • {{ Cssxref("::first-line") }}
    • 
+ 
  • {{ Cssxref("::selection") }}
    • 
+

+
+
Hinweis

+
+
Pseudoelemente sind sowohl mit zwei Doppelpunkten (::), als auch mit nur einem (:) anzutreffen. In der CSS3 Spezifikation wurde darin der Unterschied zwischen Pseudoelement und Pseudoklasse festgelegt. Die meisten Browser unterstützten aber beide Varianten.

+
+
Hinweis: ::selection muss zwingend mit zwei Doppelpunkten (::) geschrieben werden.

+
+
Es ist immer nur ein Pseudoelement pro Selektor möglich.

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
BrowserLowest VersionSupport of
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element

+
+
 

diff --git a/files/de/web/css/quotes/index.html b/files/de/web/css/quotes/index.html
new file mode 100644
index 0000000000..884ed4cf44
--- /dev/null
+++ b/files/de/web/css/quotes/index.html
@@ -0,0 +1,86 @@
+---
+title: quotes
+slug: Web/CSS/quotes
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/quotes
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die quotes CSS Eigenschaft gibt an, wie User Agents Anführungszeichen darstellen sollen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwert */
+quotes: none;
+
+/* <string> Werte */
+quotes: "«" "»"         /* Setzt open-quote und close-quote auf französische Anführungszeichen */
+quotes: "«" "»" "‹" "›" /* Setzt zwei Ebenen von Anführungszeichen */
+
+/* Globale Werte */
+quotes: inherit;
+quotes: initial;
+quotes: unset;
+

+
+
Werte

+
+

+ 
none

+ 
Die open-quote und close-quote Werte der {{cssxref("content")}} Eigenschaft erzeugen keine Anführungszeichen.

+ 
[<string> <string>]+

+ 
Ein oder mehrere Paare von {{cssxref("<string>")}} Werten für open-quote und close-quote. Das erste Paar stellt die äußere Ebene des Zitats dar, das zweite Paar das erste Unterebene, das nächste die dritte Ebene usw.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
q { quotes: '"' '"' "'" "'" }
+q:before { content: open-quote }
+q:after  { content: close-quote }
+

+
+
Hinweise

+
+
Seit Firefox 3.5 kann der ursprüngliche Wert der quotes Eigenschaft über -moz-initial gelesen werden. Dies war in früheren Versionen von Firefox nicht möglich.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'generate.html#quotes', 'quotes')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.quotes")}}
+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("content")}}
    • 
+

diff --git a/files/de/web/css/ratio/index.html b/files/de/web/css/ratio/index.html
new file mode 100644
index 0000000000..e4052bb133
--- /dev/null
+++ b/files/de/web/css/ratio/index.html
@@ -0,0 +1,79 @@
+---
+title: 
+slug: Web/CSS/ratio
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/ratio
+---
+
{{CSSRef}}

+
+
Der <ratio> CSS Datentyp, der zur Beschreibung von Seitenverhältnissen in Media Queries verwendet wird, bezeichnet das Verhältnis zwischen zwei einheitenlosen Werten. Es ist ein strikt positiver {{cssxref("<integer>")}} Wert gefolgt von einem Slash ('/', Unicode U+002F SOLIDUS) und einem zweiten strikt positivem {{cssxref("<integer>")}}. Vor und nach dem Schrägstrich können Leerzeichen stehen.

+
+
Beispiele

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
 VerhältnisVerwendung
Ratio4_3.png4/3Traditionelles TV-Format im 20sten Jahrhundert.
Ratio16_9.png16/9Modernes Breitbild-TV-Format.
Ratio1_1.85.png185/100 = 91/50

+    (Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)		Die häufigsten Filmformate seit den 1960ern.
Ratio1_2.39.png239/100

+    (Nicht-Ganzzahl-Dividenden und -Divisoren sind nicht erlaubt.)		Das anamorphe Breitbild-Filmformat.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Media Queries', '#values', '<ratio>')}}{{Spec2('CSS3 Media Queries')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.types.ratio")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/resize/index.html b/files/de/web/css/resize/index.html
new file mode 100644
index 0000000000..82162a06bf
--- /dev/null
+++ b/files/de/web/css/resize/index.html
@@ -0,0 +1,196 @@
+---
+title: resize
+slug: Web/CSS/resize
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Referenz
+translation_of: Web/CSS/resize
+---
+
{{CSSRef}}

+
+

+
+

+
Die CSS Eigenschaft resize CSS legt fest, ob ein Element größenveränderbar ist, und wenn ja, in welche Richtungen.

+
+
{{EmbedInteractiveExample("pages/css/resize.html")}}

+
+
+
+
resize gilt nicht für die folgenden Elemente:

+
+
    
+ 
  • Inline Elemente
    • 
+ 
  • Blockelemente, für die die Eigenschaft {{cssxref("overflow")}} auf visible gesetzt ist
    • 
+

+

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Globale Werte */
+resize: inherit;
+resize: initial;
+resize: unset;
+

+
+
Die Eigenschaft resize wird als ein einzelner Schlüsselwortwert aus der folgenden Liste angegeben.

+
+
Werte

+
+

+ 
none

+ 
Das Element bietet keine vom Benutzer steuerbare Möglichkeit zur Größenänderung des Elements.

+ 
both

+ 
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, sowohl die horizontale als auch die vertikale Größe des Elements zu ändern.

+ 
horizontal

+ 
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale Größe des Elements zu ändern.

+ 
vertical

+ 
Das Element zeigt eine Möglichkeit an, die es dem Benutzer erlaubt, die vertikale Größe des Elements zu ändern.

+ 
block {{experimental_inline}}

+ 
Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Blockrichtung zu ändern.

+ 
inline {{experimental_inline}}

+ 
Abhängig von den Werten für {{cssxref("writing-mode")}} und {{cssxref("direction")}}, zeigt das Element eine Möglichkeit an, die es dem Benutzer erlaubt, die horizontale oder vertikale Größe des Elements in Inlinerichtung zu ändern.

+

+
+
Hinweis: resize wird nicht auf Blöcke angewendet, für die die {{cssxref("overflow")}} Eigenschaft auf visible gesetzt ist.

+
+
Formale Definition

+
+
{{cssinfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Deaktivierung der Größenänderungsmöglichkeit von textareas

+
+
In vielen Browsern sind {{HTMLElement("textarea")}} Elemente standardmäßig in der Größe veränderbar. Sie können dieses Verhalten mit der resize Eigenschaft überschreiben.

+
+
HTML

+
+
<textarea>Type some text here.</textarea>

+
+
CSS

+
+
textarea {
+  resize: none; /* Disables resizability */
+}  

+
+

+
+
+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+
+
Verwendung von resize bei beliebigen Elementen

+
+
Sie können die Eigenschaft resize verwenden, um die Größe eines beliebigen Elements zu ändern. Im folgenden Beispiel enthält ein größenveränderbares {{HTMLElement("div")}} einen größenveränderbaren Absatz ({{HTMLElement("p")}} Element).

+
+
HTML

+
+
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  </p>
+</div>

+
+
CSS

+
+
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  

+
+
+

+
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable in all directions, because
+    the CSS `resize` property is set to `both` on this element.
+  </p>
+</div>

+
+
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}  

+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Fügt die Werte block und inline hinzu.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.resize")}}

+
+
Siehe auch

+
+
    
+ 
  • {{HTMLElement("textarea")}}
    • 
+

diff --git a/files/de/web/css/resolution/index.html b/files/de/web/css/resolution/index.html
new file mode 100644
index 0000000000..d1f3c3512e
--- /dev/null
+++ b/files/de/web/css/resolution/index.html
@@ -0,0 +1,145 @@
+---
+title: 
+slug: Web/CSS/resolution
+translation_of: Web/CSS/resolution
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der <resolution> CSS Datentyp, der in Media Queries verwendet wird, kennzeichnet die Pixeldichte eines Ausgabemediums, seine Auflösung. Er ist eine {{cssxref("<number>")}}, der direkt eine Auflösungseinheit (dpi, dpcm, ...) folgt. Wie bei allen CSS Einheiten gibt es kein Leerzeichen zwischen der Einheit und der Zahl.

+
+
Auf Bildschirmen ist die Länge relativ zu CSS Zoll, Zentimetern oder Pixeln, nicht zu physikalischen Werten.

+
+
Auch wenn alle Einheiten die gleiche Auflösung für den Wert 0 darstellen, darf die Einheit in diesem Fall nicht weggelassen werden, da sie keine {{cssxref("<length>")}} ist: 0 ist ungültig und repräsentiert weder 0dpi, 0dpcm, noch 0dppx.

+
+
Einheiten

+
+

+ 
dpi

+ 
Diese Einheit repräsentiert die Anzahl an Punkten pro Zoll. Ein Bildschirm hat typischerweise 72 oder 96dpi; ein gedrucktes Dokument erreicht normalerweise weit höhrere dpi Zahlen. Da 1 Zoll 2.54cm entspricht, 1dpi ≈ 0.39dpcm.

+ 
dpcm

+ 
Diese Einheit repräsentiert die Anzahl an Punkten pro Zentimeter. Da 1 Zoll 2.54cm entspricht, 1dpcm ≈ 2.54dpi.

+ 
dppx

+ 
Diese Einheit repräsentiert die Anzahl an Punkten pro px Einheit. Wegen dem festen 1:96 Verhältnis von CSS in zu CSS px, ist 1dppx äquivalent zu 96dpi, dies enspricht der Standardauflösung von Bildern, die in CSS dargestellt werden, wie in {{cssxref("image-resolution")}} definiert.

+

+
+
Beispiele

+
+
Hier sind einige korrekte Verwendungen von <resolution> Werten:

+
+
96dpi                                              Korrekte Verwendung: ein {{cssxref("<number>")}} Wert (hier ein {{cssxref("<integer>")}}) gefolgt von einer Einheit.
+@media print and (min-resolution: 300dpi) { ... }  Korrekte Verwendung im Kontext einer Media Query.
+

+
+
Hier sind einige inkorrekte Verwendungen:

+
+
72 dpi                                             Falsch: Keine Leerzeichen erlaubt zwischen {{cssxref("<number>")}} und der Einheit.
+ten dpi                                            Falsch: Nur Ziffern dürfen verwendet werden.
+0                                                  Falsch: Die Einheit kann nur für 0 Werte weggelassen werden, die einen {{cssxref("<length>")}} Wert darstellen.
+

+
+
Spezifization

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#resolution', '<resolution>')}}{{Spec2('CSS3 Values')}}Faktorisierung des Typs in einer allgemeineren Spezifikation. Keine Änderung.
{{SpecName('CSS3 Images', '#resolution-units', '<resolution>')}}{{Spec2('CSS3 Images')}}dppx Einheit hinzugefügt
{{SpecName('CSS3 Media Queries', '#resolution', '<resolution>')}}{{Spec2('CSS3 Media Queries')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Grundlegende Unterstützung293.5 (1.9.1) [**]99.5{{CompatNo}} [*]
dppx29{{CompatGeckoDesktop("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
MerkmalAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundlegende Unterstützung{{CompatNo}} [*]yes?yes{{CompatNo}} [*]
dppx{{CompatUnknown}}{{CompatGeckoMobile("16.0")}}{{CompatUnknown}}12.10{{CompatUnknown}}

+

+
+
[*] Die Webkit Engine unterstützt die CSS Auflösungsabfrage, wie sie in der Spezifikation definiert wird, nicht. Die Benutzung der nicht standardisierten device-pixel-ratio Abfrage wird für Safari Browser benötigt, siehe Bug 16832.

+
+
[**] Vor Firefox 8 (Gecko 8.0) hat die Eigenschaft fälschlicherweise nur CSS {{cssxref("<integer>")}} Größenangaben erlaubt, gefolgt von der Einheit. Ab dieser Version werden alle gültigen CSS Größenangaben unterstützt ({{cssxref("<number>")}} direkt gefolgt von der Einheit).

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/right/index.html b/files/de/web/css/right/index.html
new file mode 100644
index 0000000000..0eee367917
--- /dev/null
+++ b/files/de/web/css/right/index.html
@@ -0,0 +1,97 @@
+---
+title: right
+slug: Web/CSS/Right
+tags:
+  - CSS
+  - CSS Positionierung
+  - Layout
+  - NeedsLiveSample
+  - Referenz
+  - Web
+translation_of: Web/CSS/right
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die right CSS Eigenschaft gibt einen Teil der Position eines positionierten Elements an.

+
+
Bei absolut positionierten Elementen ({{Cssxref("position")}}: absolute oder position: fixed) gibt sie den Abstand zwischen der rechten, äußeren Kante des Elements und der rechten Kante des umschließenden Blocks an.

+
+
Bei relativ positionierten Elementen (position: relative) wird das Element aus seiner normalen Position im Elementfluss verschoben. Dabei gilt: Wenn die {{Cssxref("left")}} Eigenschaft definiert wurde, überschreibt diese den Wert der {{Cssxref("right")}} Eigenschaft. Wenn left den Wert auto besitzt, ist der berechnete Wert für right gleich dem Wert von left mit umgedrehtem Vorzeichen.

+ Wenn beide Eigenschaften einen anderen Wert als auto besitzen, wird right ignoriert und auf auto gesetzt.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Werte

+
+

+ 
<Länge>

+ 
Eine Längenangabe, die positive und negative Werte sowie Null erlaubt.

+ 
<Prozentzahl>

+ 
Eine prozentuale Angabe, die sich auf den umschließenden Block bezieht. Die Prozentangabe kann nur berücksichtigt werden, wenn die Breite des umschließenden Blocks festgelegt wurde, andernfalls wird die definierte Prozentzahl wie auto behandelt.

+ 
auto

+ 
Standardwert. Die horizontale Position des Elementes wird nicht weiter beeinflusst, es sei denn durch left, margin, padding oder durch die Breite.

+ 
inherit

+ 
Der Wert des Elternelements wird geerbt.

+

+
+
Formelle Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
#left {
+  width: 100px;
+  height: 100px;
+  background-color: #FFC7E4;
+  position: relative;
+  top: 20px;
+  left: 20px;
+}
+
+#right {
+  width: 100px;
+  height: 100px;
+  background-color: #FFD7C2;
+  position: absolute;
+  bottom: 10px;
+  right: 20px;
+}

+
+
<div id="left">links</div>
+<div id="right">rechts</div>
+

+
+
{{ EmbedLiveSample('Beispiele', 500, 220) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'right')}}{{Spec2('CSS3 Transitions')}}Definiert right als animierbar.
{{SpecName('CSS2.1', 'visuren.html#propdef-right', 'right')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.right")}}
diff --git a/files/de/web/css/row-gap/index.html b/files/de/web/css/row-gap/index.html
new file mode 100644
index 0000000000..c6754e69ad
--- /dev/null
+++ b/files/de/web/css/row-gap/index.html
@@ -0,0 +1,163 @@
+---
+title: row-gap (grid-row-gap)
+slug: Web/CSS/row-gap
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Grid
+  - CSS-Eigenschaften
+  - Referenz
+  - row-gab
+translation_of: Web/CSS/row-gap
+---
+
{{CSSRef}}

+
+
Die CSS-Eigenschaft row-gap legt die Größe der Zwischenräume ({{glossary("gutters","gutter")}}) zwischen den Grid-Reihen eines Elements fest.

+
+
{{EmbedInteractiveExample("pages/css/row-gap.html")}}

+
+
+
+

+
CSS Grid Layout definierte zunächst die Eigenschaft {{CSSxRef('grid-row-gap')}}}. Diese vorangestellte Eigenschaft wird durch row-gap ersetzt. Um jedoch Browser zu unterstützen, die grid-row-gap und nicht row-gap für grid implementiert haben, müssen Sie die Eigenschaft mit Präfix verwenden, wie im obigen interaktiven Beispiel.

+

+
+
Syntax

+
+
/* <length> Längen-Werte */
+row-gap: 20px;
+row-gap: 1em;
+row-gap: 3vmin;
+row-gap: 0.5cm;
+
+/* <percentage> Prozent-Werte*/
+row-gap: 10%;
+
+/* Globale Werte */
+row-gap: inherit;
+row-gap: initial;
+row-gap: unset;
+

+
+
Values

+
+

+ 
<length-percentage>

+ 
Ist die Breite des Abstands (gutter) zwischen den Reihen. {{CSSxRef("<percentage>")}} Werte sind relativ zur Dimension des Elements.

+

+
+
Formal syntax

+
+
{{CSSSyntax}}

+
+
Examples

+
+
Flex layout

+
+
{{SeeCompatTable}}

+
+
HTML

+
+
<div id="flexbox">
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+

+
+
CSS

+
+
#flexbox {
+  display: flex;
+  flex-wrap: wrap;
+  width: 300px;
+  row-gap: 20px;
+}
+
+#flexbox > div {
+  border: 1px solid green;
+  background-color: lime;
+  flex: 1 1 auto;
+  width: 100px;
+  height: 50px;
+}
+

+
+
Result

+
+
{{EmbedLiveSample('Flex_layout', "auto", "120px")}}

+
+
Grid layout

+
+
HTML

+
+
<div id="grid">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>

+
+
CSS

+
+
#grid {
+  display: grid;
+  height: 200px;
+  grid-template-columns: 200px;
+  grid-template-rows: repeat(3, 1fr);
+  row-gap: 20px;
+}
+
+#grid > div {
+  border: 1px solid green;
+  background-color: lime;
+}
+

+
+
+
+
Result

+
+
{{EmbedLiveSample('Grid_layout', 'auto', 120)}}

+
+
Specifications

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusBemerkung
{{SpecName("CSS3 Box Alignment", "#propdef-row-gap", "row-gap")}}{{Spec2("CSS3 Box Alignment")}}Erstdefinition

+
+
{{CSSInfo}}

+
+
Browser-Kompatibilität

+
+
+
+
Support in Flex layout

+
+
{{Compat("css.properties.row-gap.flex_context")}}

+
+
Support in Grid layout

+
+
{{Compat("css.properties.row-gap.grid_context")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/ruby-align/index.html b/files/de/web/css/ruby-align/index.html
new file mode 100644
index 0000000000..f38d8257bb
--- /dev/null
+++ b/files/de/web/css/ruby-align/index.html
@@ -0,0 +1,153 @@
+---
+title: ruby-align
+slug: Web/CSS/ruby-align
+tags:
+  - CSS
+  - CSS Referenz
+  - CSS Ruby
+  - Eigenschaft
+  - Referenz
+translation_of: Web/CSS/ruby-align
+---
+
{{CSSRef}}{{SeeCompatTable}}

+
+
Übersicht

+
+
Die ruby-align CSS Eigenschaft definiert die Verteilung der verschiedenen {{Glossary("Ruby")}}elemente über die Basis.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+ruby-align: start;
+ruby-align: center;
+ruby-align: space-between;
+ruby-align: space-around;
+
+/* Globale Werte */
+ruby-align: inherit;
+ruby-align: initial;
+ruby-align: unset;
+

+
+
Werte

+
+

+ 
start

+ 
Ist ein Schlüsselwort, dass angibt, dass die Anmerkung am dem Start des Basistexts ausgerichtet wird.

+ 
center

+ 
Ist ein Schlüsselwort, dass angibt, dass die Anmerkung mittig am Basistext ausgerichtet wird.

+ 
space-between

+ 
Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen die Elemente der Anmerkung verteilt wird.

+ 
space-around

+ 
Ist ein Schlüsselwort, das angibt, dass der zusätzliche Abstand zwischen und um die Elemente der Anmerkung verteilt wird.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Dieses HTML wird mit jedem Wert von ruby-align unterschiedlich dargestellt:

+
+
<ruby>
+  <rb>Dies ist ein langer Text als Beispiel</rb>
+  <rp>（</rp><rt>kurzes Ruby</rt><rp>）</rp>
+</ruby>
+

+
+
Ruby am Start des Basistexts ausgerichtet

+
+
+
+
ruby {
+    ruby-align:start;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Ruby_am_Start_des_Basistexts_ausgerichtet", 240, 40)}}

+
+
Ruby mittig am Basistext ausgerichtet

+
+
+
+
ruby {
+    ruby-align:center;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Ruby_mittig_am_Basistext_ausgerichtet", 240, 40)}}

+
+
Zusätzlicher Abstand verteilt zwischen Rubyelementen

+
+
+
+
ruby {
+    ruby-align:space-between;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_Rubyelementen", 240, 40)}}

+
+
Zusätzlicher Abstand verteilt zwischen und um Rubyelemente

+
+
+
+
ruby {
+    ruby-align:space-around;
+}

+
+
Dies ergibt folgende Ausgabe:

+
+
{{EmbedLiveSample("Zusätzlicher_Abstand_verteilt_zwischen_und_um_Rubyelemente", 240, 40)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Ruby', '#ruby-align-property', 'ruby-align')}}{{Spec2('CSS3 Ruby')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.ruby-align")}}
+
+
Siehe auch

+
+
    
+ 
  • HTML Ruby Elemente: {{HTMLElement("ruby")}}, {{HTMLElement("rt")}}, {{HTMLElement("rp")}} und {{HTMLElement("rtc")}}.
    • 
+ 
  • CSS Ruby Eigenschaften: {{cssxref("ruby-position")}}, {{cssxref("ruby-merge")}}.
    • 
+

diff --git a/files/de/web/css/scroll-behavior/index.html b/files/de/web/css/scroll-behavior/index.html
new file mode 100644
index 0000000000..9505393d2a
--- /dev/null
+++ b/files/de/web/css/scroll-behavior/index.html
@@ -0,0 +1,143 @@
+---
+title: scroll-behavior
+slug: Web/CSS/scroll-behavior
+translation_of: Web/CSS/scroll-behavior
+---
+
{{ CSSRef }}

+Die scroll-behavior CSS-Eigenschaft spezifiziert das Scroll-Verhalten einer Scroll-Box, wenn ein Scroll-Event durch eine Navigation oder durch CSSOM APIs ausgelöst wird.

+
+
{{cssinfo}}

+
+

+
+

+

+
{{EmbedInteractiveExample("pages/css/scroll-behavior.html")}}

+
+
+

+

+
+
Beachte, dass andere Scroll-Verhalten, wie etwa solche durch den Nutzer ausgelöste, nicht durch diese Eigenschaft beeinflusst werden. Wenn diese Eigenschaft für das Wurzel-Element spezifiziert wird, beeinflusst es stattdessen den Viewport. Wird diese Eigenschaft für das body-Element spezifiziert, wird es nicht an den Viewport weitergegeben.

+
+

+
+
User Agents dürfen diese Eigenschaft ignorieren.

+
+

+

+
Syntax

+

+
+
/* Keyword values */
+scroll-behavior: auto;
+scroll-behavior: smooth;
+
+/* Global values */
+scroll-behavior: inherit;
+scroll-behavior: initial;
+scroll-behavior: unset;
+

+
+
Sämltiche anderen Arten des Scrollens, beispielsweise durch den User, sind von dieser Eigenschaft nicht betroffen.

+ Wenn diese Eigenschaft auf ein Root-Element angewendet, betrifft sie stattdessen den gesamten Viewport.

+ Wird die Eigenschaft dem body zugeordnet, wrikt sie sich hingegen nicht auf den Viewport aus.

+ 

+ Ein User Agent kann diese Eigenschaft auch ignorieren.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die Eigenschaft scroll-behavior kann dabei folgende Werte annehmen:

+
+
Werte

+
+

+ 
auto

+ 
Die scrolling Box scrollt sofort.

+ 
smooth

+ 
Die scrolling Box scrollt mit einem flüssigen/smoothen Verhalten.

+ Der User Agent definiert dabei sowohl die Geschwindigkeit als auch die dafür benötigte Dauer. Der User Agent sollte dabei nach Möglichkeit den Platform-Konventionen folgen.

+

+
+
Formelle Syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
HTML

+
+
<nav>
+  <a href="#page-1">1</a>
+  <a href="#page-2">2</a>
+  <a href="#page-3">3</a>
+</nav>
+<scroll-container>
+  <scroll-page id="page-1">1</scroll-page>
+  <scroll-page id="page-2">2</scroll-page>
+  <scroll-page id="page-3">3</scroll-page>
+</scroll-container>

+
+
CSS

+
+
a {
+  display: inline-block;
+  width: 50px;
+  text-decoration: none;
+}
+nav, scroll-container {
+  display: block;
+  margin: 0 auto;
+  text-align: center;
+}
+nav {
+  width: 339px;
+  padding: 5px;
+  border: 1px solid black;
+}
+scroll-container {
+  display: block;
+  width: 350px;
+  height: 200px;
+  overflow-y: scroll;
+  scroll-behavior: smooth;
+}
+scroll-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-size: 5em;
+}
+

+
+
Ergebnis

+
+
{{ EmbedLiveSample("Example", "100%", 250) }}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSSOM View', "#propdef-scroll-behavior", 'scroll-behavior')}}{{Spec2('CSSOM View')}}Initial specification

+
+
Browser compatibility

+
+
+
+
{{Compat("css.properties.scroll-behavior")}}

diff --git a/files/de/web/css/shape/index.html b/files/de/web/css/shape/index.html
new file mode 100644
index 0000000000..b186d495aa
--- /dev/null
+++ b/files/de/web/css/shape/index.html
@@ -0,0 +1,93 @@
+---
+title: 
+slug: Web/CSS/shape
+tags:
+  - CSS
+  - CSS Datentyp
+  - Layout
+  - Reference
+  - Référence(2)
+  - Web
+translation_of: Web/CSS/shape
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Der <shape> CSS Datentyp beschreibt die genaue Form eines Bereichs. Dieser Bereich wird benutzt, um zu definieren, auf welchen Teil eines Elements Eigenschaften wie {{ Cssxref("clip") }} angewendet werden.

+
+
In der aktuellen Spezifikation kann ein <shape>, obwohl er entworfen wurde, um beliebige Formen zu beschreiben, ausschließlich einen rechteckigen Bereich repräsentieren, der durch die Funktion rect() definiert wird.

+
+
Die rect() Funktion

+
+
Die rect() Funktion erstellt einen Bereich in Form eines Rechtecks.

+
+
Syntax

+
+
rect(top, right, bottom, left)
+

+
+
Werte

+
+
rect.png

+
+

+ 
top

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der Oberkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.

+

+
+

+ 
right

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der rechten Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.

+

+
+

+ 
bottom

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der Unterkante des Rechtecks relativ zur Oberkante der Element Box beschreibt.

+

+
+

+ 
left

+ 
Ist eine {{cssxref("<length>")}}, die den Versatz der linken Kante des Rechtecks relativ zur linken Kante der Element Box beschreibt.

+

+
+
Interpolation

+
+
Werte des <shape> Datentyps, welche Rechtecke darstellen, können interpoliert werden, um Animationen zu erlauben. In diesem Fall werden sie über ihre top, right, bottom und left Komponenten interpoliert, wovon jede als reale Fließkommazahl behandelt wird. Die Geschwindigkeit der Interpolation wird bestimmt durch die Timing Funktion associated with the animation.

+
+
Beispiel

+
+
 img.clip04 {
+   clip: rect(10px, 20px, 20px, 10px);
+ }
+

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{ SpecName('CSS2.1', 'visufx.html#value-def-shape', '<shape>') }}{{ Spec2('CSS2.1') }}Definiert durch die {{ cssxref("clip") }} Eigenschaft

+
+
Browser Kompatibilität

+
+{{Compat("css.types.shape")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{ Cssxref("clip") }}
    • 
+ 
  • Die -moz-image-rect() Funktion mit ähnlichen Koordinaten wie rect().
    • 
+

diff --git "a/files/de/web/css/spezifit\303\244t/index.html" "b/files/de/web/css/spezifit\303\244t/index.html"
new file mode 100644
index 0000000000..e8a0e22302
--- /dev/null
+++ "b/files/de/web/css/spezifit\303\244t/index.html"
@@ -0,0 +1,197 @@
+---
+title: Spezifität
+slug: Web/CSS/Spezifität
+tags:
+  - Beispiel
+  - CSS
+  - Guide
+  - Web
+translation_of: Web/CSS/Specificity
+---
+
{{cssref}}

+
+
Das Konzept

+
+
Spezifität ist das Mittel, mit dem ein Browser bestimmt, welche Eigenschaftswerte die relevantesten für ein Element sind und zugewiesen werden. Spezifität basiert ausschließlich auf den Matchingregeln, welche durch die verschiedenen Selektoren gebildet werden.

+
+
Berechnung

+
+
Die Spezifität wird durch die Verkettung der Anzahl jedes Selektortyps berechnet. Sie entspricht keiner Gewichtung, die dem passenden Ausdruck zugewiesen wird.

+
+
Im Falle einer Spezifitätsgleichheit wird die letzte im CSS gefundene Deklaration auf das Element angewandt.

+
+
{{ Note("Die Nähe von Elementen in einem Dokumentenbaum zueinander hat keine Auswirkung auf die Spezifität.") }}

+
+
Reihenfolge der Spezifität

+
+
Die folgende Selektorenliste ist nach aufsteigender Spezifität sortiert:

+
+
    
+ 
  • Universelle Selektoren
    • 
+ 
  • Typselektoren
    • 
+ 
  • Klassenselektoren
    • 
+ 
  • Attributselektoren
    • 
+ 
  • Pseudoklassen
    • 
+ 
  • ID-Selektoren
    • 
+ 
  • Inlinestile
    • 
+

+
+
Die !important Ausnahme

+
+
Wenn eine !important Regel auf eine Stildeklaration angewendet wird, überschreibt diese Deklaration alle anderen Deklarationen des CSS, unabhängig davon, wo sie in der Deklarationsliste steht. Jedoch hat !important nichts mit Spezifität zu tun. Es wird davon abgeraten, !important zu verwenden, da es das Debuggen erschwert, weil die normale Kaskadierung der Stylesheets dadurch unterbrochen wird.

+
+
Einige allgemeine Regeln:

+
+
    
+ 
  • Niemals !important in CSS verwenden, das auf der gesamten Seite Verwendung findet.
    • 
+ 
  • !important nur in Seiten spezifischem CSS verwenden, das seitenweites oder fremdes CSS (wie beispielsweise von ExtJS oder YUI) überschreibt.
    • 
+ 
  • Niemals !important verwenden, wenn ein Plugin/Mashup geschrieben wird.
    • 
+ 
  • Immer nach einem Weg suchen, Spezifität zu verwenden, bevor !important in Erwägung gezogen wird.
    • 
+

+
+
Anstatt !important zu verwenden kann folgendes getan werden:

+
+
    
+ 
  1. Besseren Gebrauch der CSS Kaskadierungseigenschaften machen.
    2. 
+ 
  2. 
+  
    Spezifischere Regeln verwenden. Eines oder mehrere Elemente vor dem Element anzugeben, das selektiert werden soll, ist spezifischer und erhält eine höhere Priorität:
    
+
+  
    <div id="test">
+  <span>Text</span>
+</div>
    
+
+  
    div#test span { color: green; }
+span { color: red; }
+div span { color: blue; }
    
+ 
    3. 
+

+
+
Unabhängig von der Reihenfolge, in der der Text steht, wird der Text grün dargestellt, da die Regel spezifischer ist. (Des weiteren überschreibt die Regel für blau die Regel für rot unabhängig von deren Reihenfolge.)

+
+
!Important sollte in folgenden Fällen verwendet werden:

+
+
A) Erstes Szenario

+
+
    
+ 
  1. Eine globale CSS Datei wird verwendet, die die visuellen Aspekte der Seite global setzt.
    2. 
+ 
  2. Es werden Inline Styles in Elementen verwendet, wovon grundsätzlich abgeraten wird.
    3. 
+

+
+
In diesem Fall sollten bestimmte Stile in der globalen CSS Datei als !important deklariert werden, was Inline Styles überschreibt.

+
+
B) Weiteres Szenario

+
+
#someElement p {
+  color: blue;
+}
+
+p.awesome {
+  color: red;
+}

+
+
Ohne !important hat die erste Regel eine höhere Spezifität und hat damit Vorrang vor der zweiten Regel. Somit werden alle awesome Absätze blau dargestellt.

+
+
Wie !important überschrieben werden kann

+
+
Eine Eigenschaft, die mit !important gekennzeichnet ist, kann durch eine weitere !important Eigenschaft überschrieben werden. Hierbei muss jedoch die zweite Eigenschaft entweder eine höhere Spezifität besitzen (indem im Selektor ein zusätzlicher Tag, eine ID oder Klasse angegeben wird) oder eine CSS Regel mit dem gleichen Selektor muss weiter unten als die existierende platziert werden.

+
+
Einige Beispiele mit höherer Spezifität:

+
+
table td    {height: 50px !important;}
+.myTable td {height: 50px !important;}
+#myTable td {height: 50px !important;}

+
+
Beispiel für gleichen Selektor nach dem existierenden:

+
+
td {height: 50px !important;}

+
+
Die :not Ausnahme

+
+
Die Negations-Pseudoklasse :not wird nicht als Pseudoklasse in der Spezifitätsberechnung berücksichtigt. Jedoch werden Selektoren innerhalb der Negations-Pseudoklasse als normale Selektoren behandelt.

+
+

+
Beispiel CSS:

+
+
div.outer p {
+  color:orange;
+}
+div:not(.outer) p {
+  color: lime;
+}
+

+
+
Angewendet auf folgendes HTML:

+
+
<div class="outer">
+  <p>Dies ist im äußeren div.</p>
+  <div class="inner">
+    <p>Dieser Text ist innerhalb des inneren divs.</p>
+  </div>
+</div>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_not','600','100') }}

+
+
Formbasierte Spezifität

+
+
Spezifität basiert auf der Form eines Selektors. Im folgenden Fall zählt der Selektor als ein Attribut im Algorithmus zur Bestimmung der Spezifität, obwohl er eine ID selektiert.

+
+
CSS:

+
+

+
* #foo {
+  color: green;
+}
+*[id="foo"] {
+  color: purple;
+}
+

+
+
Angewendet auf folgendes HTML:

+
+
<p id="foo">I am a sample text.</p>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_formbasierte_Spezifitaet','600','100') }}

+
+
Da das gleiche Element selektiert wird, der ID-Selektor jedoch eine höhere Spezifität aufweist.

+
+
Nichtbeachtung der Position innerhalb des Baumes

+
+

+
CSS:

+
+
body h1 {
+  color: green;
+}
+html h1 {
+  color: purple;
+}
+

+
+
Angewendet auf folgendes HTML:

+
+
<html>
+  <body>
+    <h1>Here is a title!</h1>
+  </body>
+</html>
+

+

+
+
Ergibt:

+
+
{{ EmbedLiveSample('Beispiel_Nichtbeachtung_Baumposition','600','100') }}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/string/index.html b/files/de/web/css/string/index.html
new file mode 100644
index 0000000000..9918c42d77
--- /dev/null
+++ b/files/de/web/css/string/index.html
@@ -0,0 +1,70 @@
+---
+title: 
+slug: Web/CSS/string
+tags:
+  - CSS
+  - CSS Datentypen
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/string
+---
+
{{CSSRef}}

+
+
Der <string> CSS Datentyp repräsentiert eine Zeichenfolge. Er setzt sich aus Unicode Zeichen umschlossen von doppelten (") oder einfachen (') Anführungszeichen zusammen. Ein in doppelte Anführungszeichen eingeschlossener String darf keine doppelten Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das gleiche Prinzip gilt für in einfache Anführungszeichen eingeschlossene Strings. Sie dürfen keine einfachen Anführungszeichen enthalten, außer sie sind durch einen Backslash (\) escapt. Das Backslash Zeichen muss escapt sein, um Teil des Strings zu sein.

+
+
Zeilenumbrüche werden nicht akzeptiert, sofern sie nicht durch ein Zeilenvorschubzeichen wie \A oder \00000a escapt sind. Jedoch können Strings sich über mehrere Zeilen erstrecken. In diesem Fall muss das Zeilenumbruchszeichen durch einen Backslash (\) als letztes Zeichen der Zeile escapt werden.

+
+
Zeichen können durch ihren Unicode Codepunkt in Hexadezimalschreibweise beschrieben werden, wenn sie durch einen Backslash (\) escapt werden. \27 stellt dabei das einfache Anführungszeichen (') dar.

+
+
Beispiele

+
+
/* Einfaches Escapen von Anführungszeichen */
+"String mit doppelten Anführungszeichen"
+"String mit \" escapten doppelten Anführungszeichen"
+'String mit einfachen Anführungszeichen'
+"String mit \' escapten einfachen Anführungszeichen"
+
+/* Zeilenumbruch in einem String */
+"String mit \AZeilenumbruch"
+
+/* String, der sich über zwei Zeilen erstreckt (diese zwei Strings sind exakt gleich) */
+"Ein äußerst langer \
+String"
+"Ein äußerst langer String"
+

+
+
Hinweis: Strings in doppelten Anführungszeichen können auch mit Hilfe von \22 escapt werden und Strings mit einfachen Anführungszeichen mit Hilfe von \27.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Values', '#strings', '<string>')}}{{Spec2('CSS3 Values')}}Keine signifikante Änderung in Bezug auf CSS Level 2 (Revision 1)
{{SpecName('CSS2.1', 'syndata.html#strings', '<string>')}}{{Spec2('CSS2.1')}}Explizit definiert; erlaubt 6-stellige escapte Unicodezeichen
{{SpecName('CSS1', '', '<string>')}}{{Spec2('CSS1')}}Implizit definiert; erlaubt 4-stellige escapte Unicodezeichen

+
+
Browser Kompatibilität

+
+{{Compat("css.types.string")}}
diff --git a/files/de/web/css/tab-size/index.html b/files/de/web/css/tab-size/index.html
new file mode 100644
index 0000000000..b324828746
--- /dev/null
+++ b/files/de/web/css/tab-size/index.html
@@ -0,0 +1,94 @@
+---
+title: tab-size
+slug: Web/CSS/tab-size
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/tab-size
+---
+
{{ CSSRef() }}

+
+
{{ SeeCompatTable() }}

+
+
Übersicht

+
+
Die tab-size CSS Eigenschaft wird verwendet, um die Breite eines Tabulatorzeichens (U+0009) anzupassen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* <integer> Werte */
+tab-size: 4;
+tab-size: 0;
+
+/* <length> Werte */
+tab-size: 10px;
+tab-size: 2em;
+
+/* Globale Werte */
+tab-size: inherit;
+tab-size: initial;
+tab-size: unset;
+

+
+
Werte

+
+

+ 
{{cssxref("<integer>")}}

+ 
Die Anzahl der Leerzeichen in einem Tabulator. Darf nicht negativ sein.

+ 
{{cssxref("<length>")}}

+ 
Die Breite eines Tabulators. Darf nicht negativ sein.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
pre {
+  tab-size: 4; /* Setzt die Tabgröße auf 4 Leerzeichen */
+}
+

+
+
pre {
+  tab-size: 0; /* Entfernt die Einrückung */
+}
+

+
+
pre {
+  tab-size: 99; /* Verwende keine Tabs! */
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text', '#tab-size', 'tab-size')}}{{Spec2('CSS3 Text')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.tab-size")}}

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/table-layout/index.html b/files/de/web/css/table-layout/index.html
new file mode 100644
index 0000000000..1a7136e994
--- /dev/null
+++ b/files/de/web/css/table-layout/index.html
@@ -0,0 +1,117 @@
+---
+title: table-layout
+slug: Web/CSS/table-layout
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Tabelle
+  - Referenz
+  - 'recipe:css-property'
+translation_of: Web/CSS/table-layout
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft table-layout legt den Algorithmus fest, der für das Layout von {{htmlelement("table")}} Zellen, Zeilen und Spalten verwendet wird.

+
+
{{EmbedInteractiveExample("pages/css/table-layout.html")}}

+
+
+
+
Syntax

+
+
/* Keyword values */
+table-layout: auto;
+table-layout: fixed;
+
+/* Global values */
+table-layout: inherit;
+table-layout: initial;
+table-layout: unset;
+

+
+
Werte

+
+

+ 
{{Cssxref("auto")}}

+ 
Standardwert. Die meisten Browser haben einen automatischen Tabellenlayout-Algorithmus. Die Breiten der Tabelle und ihrer Zellen werden an den Inhalt angepasst.

+ 
fixed

+ 
Die Tabellen- und Spaltenbreiten werden durch die Breiten der Tabellen- und Spaltenelemente oder durch die Breite der ersten Zellenzeile festgelegt. Zellen in nachfolgenden Zeilen haben keinen Einfluss auf die Spaltenbreiten.

+ 
Bei der "festen" oder "fixierten" fixed Layoutmethode kann die gesamte Tabelle gerendert werden, sobald die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderingzeit bei der "automatischen" auto Layoutmethode beschleunigen, aber der Inhalt nachfolgender Zellen passt möglicherweise nicht in die bereitgestellten Spaltenbreiten. Zellen verwenden die Eigenschaft {{Cssxref("overflow")}}, um zu bestimmen, ob überlaufende Inhalte abgeschnitten werden sollen. Dies erfolgt aber nur, wenn die Breite der Tabelle bekannt ist; andernfalls werden die Zellen nicht überlaufen.

+

+
+
Formale Definition

+
+
{{CSSInfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Tabellen fester Breite mit Text-Überlauf

+
+
In diesem Beispiel wird ein festes fixed Tabellenlayout in Kombination mit der Eigenschaft {{cssxref("width")}} verwendet, um die Breite der Tabelle einzuschränken. Die Eigenschaft {{cssxref("text-overflow")}} wird verwendet, um eine Ellipse auf Wörter anzuwenden, die zu lang sind, um in die Tabelle zu passen.

+ Wenn das Tabellenlayout automatisch auto wäre, würde die Tabelle trotz der angegebenen Breite wachsen, um ihren Inhalt aufzunehmen.

+
+
HTML

+
+

+
<table>
+  <tr><td>Ed</td><td>Wood</td></tr>
+  <tr><td>Albert</td><td>Schweitzer</td></tr>
+  <tr><td>Jane</td><td>Fonda</td></tr>
+  <tr><td>William</td><td>Shakespeare</td></tr>
+</table>

+
+
CSS

+
+
table {
+  table-layout: fixed;
+  width: 120px;
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid blue;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample('Fixed-width_tables_with_text-overflow')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'tables.html#width-layout', 'table-layout')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition.

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.table-layout")}}

+
+
Siehe auch

+
+
diff --git "a/files/de/web/css/tats\303\244chlicher_wert/index.html" "b/files/de/web/css/tats\303\244chlicher_wert/index.html"
new file mode 100644
index 0000000000..5e77670cac
--- /dev/null
+++ "b/files/de/web/css/tats\303\244chlicher_wert/index.html"
@@ -0,0 +1,36 @@
+---
+title: tatsächlicher Wert
+slug: Web/CSS/tatsächlicher_Wert
+translation_of: Web/CSS/actual_value
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Der tatsächliche Wert einer CSS Eigenschaft ist der verwendete Wert nachdem alle Annäherungen angewendet wurden. Zum Beispiel kann ein User Agent nur in der Lage sein, Ränder mit einem ganzzahligen Pixelwert darzustellen und daher gezwungen sein, die berechnete Breite des Randes anzunähern.

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}{{Spec2('CSS2.1')}}Ursprüngliche Definition

+
+
Siehe auch

+
+
diff --git a/files/de/web/css/text-align-last/index.html b/files/de/web/css/text-align-last/index.html
new file mode 100644
index 0000000000..41b0607160
--- /dev/null
+++ b/files/de/web/css/text-align-last/index.html
@@ -0,0 +1,106 @@
+---
+title: text-align-last
+slug: Web/CSS/text-align-last
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Experimentell
+  - Referenz
+translation_of: Web/CSS/text-align-last
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft text-align-last  beschreibt, wie die letzte Zeile eines Blocks, oder die letzte Zeile unmittelbar vor einem erzwungenem Umbruch, ausgerichtet ist

+
+
{{EmbedInteractiveExample("pages/css/text-align-last.html")}}

+
+
+
+
Syntax

+
+
/* Keyword values */
+text-align-last: auto;
+text-align-last: start;
+text-align-last: end;
+text-align-last: left;
+text-align-last: right;
+text-align-last: center;
+text-align-last: justify;
+
+/* Global values */
+text-align-last: inherit;
+text-align-last: initial;
+text-align-last: unset;
+

+
+
Values

+
+

+ 
auto

+ 
Die Ausrichtung der Zeile ist gleich dem Wert von {{cssxref("text-align")}}, außer wenn {{cssxref("text-align")}} den Wert justify hat; in diesem Fall entspricht der Wert von text-align-last der Einstellung start.

+ 
start

+ 
Das Gleiche wie left, wenn die Leserichtung links-nach-rechts ist, und right, wenn die Leserichtung rechts-nach-links ist.

+ 
end

+ 
Das Gleiche wie right, wenn die Leserichtung links-nach-rechts ist, und left, wenn die Leserichtung rechts-nach-links ist.

+ 
left

+ 
Die Inhalte werden an der linken Kante des inline-Elements ausgerichtet.

+ 
right

+ 
Die Inhalte werden an der rechten Kante des inline-Elements ausgerichtet.

+ 
center

+ 
Die Inhalte werden innerhalb des inline-Elements zentriert.

+ 
justify

+ 
Der Text wird im Blocksatz angezeigt, d.h. der Text schließt sowohl links als auch rechts mit der Kante des inline-Elements ab.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiel

+
+
+
+
p {
+  font-size: 1.4em;
+  text-align: justify;
+  text-align-last: center;
+}

+
+
{{EmbedLiveSample('Example','560')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Text', '#text-align-last-property', 'text-align-last')}}{{Spec2('CSS3 Text')}}Initial definition

+
+
{{cssinfo}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.text-align-last")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("text-align")}}
    • 
+

diff --git a/files/de/web/css/text-align/index.html b/files/de/web/css/text-align/index.html
new file mode 100644
index 0000000000..5af079ca81
--- /dev/null
+++ b/files/de/web/css/text-align/index.html
@@ -0,0 +1,238 @@
+---
+title: text-align
+slug: Web/CSS/text-align
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Referenz
+translation_of: Web/CSS/text-align
+---
+
{{CSSRef}}

+
+

+
Die CSS Eigenschaft text-align egt die horizontale Ausrichtung eines Blockelements oder eines Tabellenzellenrahmens fest. Dies bedeutet, dass sie wie {{cssxref("vertical-align")}} funktioniert, jedoch in horizontaler Richtung.

+
+
{{EmbedInteractiveExample("pages/css/text-align.html")}}

+
+
+

+
+
Syntax

+
+
/* Keyword values */
+text-align: left;
+text-align: right;
+text-align: center;
+text-align: justify;
+text-align: justify-all;
+text-align: start;
+text-align: end;
+text-align: match-parent;
+
+/* Character-based alignment in a table column */
+text-align: ".";
+text-align: "." center;
+
+/* Block alignment values (Non-standard syntax) */
+text-align: -moz-center;
+text-align: -webkit-center;
+
+/* Global values */
+text-align: inherit;
+text-align: initial;
+text-align: unset;

+
+
Die Eigenschaft text-align wird auf eine der folgenden Arten angegeben:

+
+
+
+
Werte

+
+

+ 
start {{experimental_inline}}

+ 
Dasselbe wie left, falls {{cssxref("direction")}} ltr ist und right, falls direction rtl ist.

+ 
end {{experimental_inline}}

+ 
Dasselbe wie right, falls {{cssxref("direction")}} ltr ist und left, falls direction rtl ist.

+ 
left

+ 
Die Inlineinhalte werden am linken Rand (linksbündig) der Zeilenbox ausgerichtet.

+ 
right

+ 
Die Inlineinhalte werden am rechten Rand (rechtsbündig) der Zeilenbox ausgerichtet.

+ 
center

+ 
Die Inlineinhalte werden innerhalb der Zeilenbox zentriert.

+ 
justify

+ 
Der Text wird im Blocksatz angeordnet. Text sollte seinen linken und rechten Rand bündig am linken und rechten Rand des Absatzinhalts ausrichten.

+ 
justify-all {{experimental_inline}}

+ 
Dasselbe wie justify, erzwingt jedoch, dass die letzte Zeile ebenfalls im Blocksatz angeordnet wird.

+ 
match-parent {{experimental_inline}}

+ 
Ähnlich zu inherit mit dem Unterschied, dass die Werte start und end in Bezug auf die {{cssxref("direction")}} des Elternelements berechnet werden und durch den passenden left oder right Wert ersetzt werden.

+ 
{{cssxref("<string>")}} {{experimental_inline}}

+ 
Gibt bei Anwendung auf eine Tabellenzelle das Zeichen an, um das der Inhalt der Zelle ausgerichtet wird.

+

+
+
Bedenken zur Zugänglichkeit

+
+
Der inkonsistente Abstand zwischen den Wörtern, der durch einen gerechtfertigten Text entsteht, kann für Menschen mit kognitiven Problemen wie Legasthenie problematisch sein.

+
+
+
+
Formale Definition

+
+
{{CSSInfo}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
Linksbündig

+
+
HTML

+
+

+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: left;
+  border: solid;
+}

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Left_alignment","100%","100%")}}

+
+
Zentriert

+
+
HTML

+
+

+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: center;
+  border: solid;
+}

+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Centered_text","100%","100%")}}

+
+
Blocksatz

+
+
HTML

+
+

+
<p class="example">
+  Integer elementum massa at nulla placerat varius.
+  Suspendisse in libero risus, in interdum massa.
+  Vestibulum ac leo vitae metus faucibus gravida ac in neque.
+  Nullam est eros, suscipit sed dictum quis, accumsan a ligula.
+</p>

+
+
CSS

+
+
.example {
+  text-align: justify;
+  border: solid;
+}

+
+

+
+
Ergebnis

+
+
{{EmbedLiveSample("Justify","100%","100%")}}

+
+
Hinweis

+
+
Der Standard-kompatible Weg, einen Block selbst zu zentrieren, ohne seinen Inline-Inhalt zu zentrieren, ist z.B. das Setzen der linken und rechten {{cssxref("margin")}} auf auto, z.B..:

+
+
.something {
+  margin: auto;
+}
+

+
+
.something {
+  margin: 0 auto;
+}
+

+
+
.something {
+  margin-left: auto;
+  margin-right: auto;
+}
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS Logical Properties', '#text-align', 'text-align')}}{{Spec2('CSS Logical Properties')}}Keine Änderungen
{{SpecName('CSS4 Text', '#alignment', 'text-align')}}{{Spec2('CSS4 Text')}}Fügt den Wert <string> hinzu.
{{SpecName('CSS3 Text', '#text-align-property', 'text-align')}}{{Spec2('CSS3 Text')}}Fügt die start, end und match-parent Werte hinzu. Ändert den unbenannten Initialwert zu start (der er war).
{{SpecName('CSS2.1', 'text.html#alignment-prop', 'text-align')}}{{Spec2('CSS2.1')}}Keine Änderungen
{{SpecName('CSS1', '#text-align', 'text-align')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
+
+
{{Compat("css.properties.text-align")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("margin", "margin:auto")}}, {{cssxref("margin-left", "margin-left:auto")}}, {{cssxref("vertical-align")}}
    • 
+

diff --git a/files/de/web/css/text-decoration-color/index.html b/files/de/web/css/text-decoration-color/index.html
new file mode 100644
index 0000000000..32f9355d51
--- /dev/null
+++ b/files/de/web/css/text-decoration-color/index.html
@@ -0,0 +1,135 @@
+---
+title: text-decoration-color
+slug: Web/CSS/text-decoration-color
+translation_of: Web/CSS/text-decoration-color
+---
+
{{ CSSRef }}

+
+
Zusammenfassung

+
+
Mit der CSS-Eigenschaft text-decoration-color kann die Farbe für Unterstreichungen, Überstreichungen oder Durchstreichungen gesetzt werden, spezifiziert durch {{cssxref("text-decoration-line")}}. Das ist die bevorzugte Art und Weise, Textdekorationen eine Farbe zuzuweisen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("text-decoration-color")}}
+

+
+
text-decoration-color: currentColor
+text-decoration-color: red
+text-decoration-color: #00ff00
+text-decoration-color: rgba(255, 128, 128, 0.5)
+text-decoration-color: transparent
+
+text-decoration-color: inherit
+

+
+
Werte

+
+

+ 
<color>

+ 
Die Eigenschaft color akzeptiert verschiedene Schlüsselwörter und numerische Daten. Siehe {{cssxref("<color>")}}-Werte für genauere Details.

+

+
+
Beispiel

+
+
.beispiel {
+    text-decoration: underline;
+    text-decoration-color: red;
+}
+

+
+
Das obige Beispiel hat denselben Effekt wie der folgende Code, der auch noch einen Hover-Style hinzufügt.

+
+
<!DOCTYPE html>
+<html>
+<head>
+<style>
+.beispiel {
+  font-size: 24px;
+  text-decoration: underline;
+  color: red;
+}
+.beispiel:hover {
+  color: blue;
+  text-decoration: line-through;
+}
+</style>
+</head>
+<body>
+<span class="beispiel">
+  <span style="color:black">schwarzer Text mit roter Linie und blauem Hovereffekt</span>
+</span>
+</body>
+</html>
+

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusAnmerkung
{{ SpecName('CSS3 Text-decoration', '#text-decoration-color', 'text-decoration-color') }}{{ Spec2('CSS3 Text-decoration') }} 

+
+
Browserkompabilität

+
+
{{ CompatibilityTable }}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FunktionChromeFirefox (Gecko)Internet ExplorerOperaSafari
Elementare Unterstützung{{ CompatUnknown }}{{ CompatGeckoDesktop("6.0") }}{{ property_prefix("-moz") }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FunktionAndroidFirefox mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Elementare Unterstützung{{ CompatUnknown }}{{ CompatGeckoMobile("6.0") }}{{ property_prefix("-moz") }}{{ CompatUnknown }}{{ CompatUnknown }}{{ CompatUnknown }}

+

diff --git a/files/de/web/css/text-decoration-line/index.html b/files/de/web/css/text-decoration-line/index.html
new file mode 100644
index 0000000000..ac3ab5bfb1
--- /dev/null
+++ b/files/de/web/css/text-decoration-line/index.html
@@ -0,0 +1,94 @@
+---
+title: text-decoration-line
+slug: Web/CSS/text-decoration-line
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - Layout
+  - Referenz
+  - Web
+translation_of: Web/CSS/text-decoration-line
+---
+
{{ CSSRef() }}

+
+
Übersicht

+
+
Die text-decoration-line CSS Eigenschaft repräsentiert die Art der Liniendekoration eines Elements.

+
+
Unter- und Überstreichungsdekorationen werden hinter dem Text dargestellt, während Durchstreichungen über dem Text dargestellt werden.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formale Syntax: {{csssyntax("text-decoration-line")}}
+

+
+
text-decoration-line: none /* This is the only keyword that cannot be mixed with other */
+
+text-decoration-line: underline
+text-decoration-line: overline
+text-decoration-line: line-through
+text-decoration-line: underline overline
+text-decoration-line: overline underline line-through
+
+text-decoration-line: inherit
+

+
+
Werte

+
+
Akzeptiert entweder none als Wert oder einen oder mehrere durch Leerzeichen getrennte Werte:

+
+

+ 
none

+ 
Erzeugt keine Textdekoration.

+ 
underline

+ 
Jede Zeile des Texts wird unterstrichen.

+ 
overline

+ 
Über jeder Zeile des Texts wird eine Linie dargestellt.

+ 
line-through

+ 
Jede Zeile des Texts wird durchgestrichen.

+ 
blink {{deprecated_inline}}

+ 
Der Text blinkt (wechselt zwischen sichtbar und unsichtbar). Dem Standard folgende User Agents können das Blinken ignorieren. Dieser Wert ist  missbilligt und es sollten stattdessen Animationen verwendet werden.

+ 
-moz-anchor-decoration

+ 
Mozilla CSS Erweiterung, nicht geeignet für Webinhalte.

+

+
+
Beispiel

+
+
HTML

+
+
<p>Hier steht Text mit einer roten Unterkringelung!</p>

+
+
CSS

+
+
p {
+  -moz-text-decoration-line: underline;
+  -moz-text-decoration-style: wavy;
+  -moz-text-decoration-color: red;
+}

+
+
{{ EmbedLiveSample('Beispiel') }}

+
+
Spezifikation

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusComment
{{ SpecName('CSS3 Text-decoration', '#text-decoration-line', 'text-decoration-line') }}{{ Spec2('CSS3 Text-decoration') }} 

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-decoration-line")}}
diff --git a/files/de/web/css/text-decoration/index.html b/files/de/web/css/text-decoration/index.html
new file mode 100644
index 0000000000..af1de281c1
--- /dev/null
+++ b/files/de/web/css/text-decoration/index.html
@@ -0,0 +1,116 @@
+---
+title: text-decoration
+slug: Web/CSS/text-decoration
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-decoration
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-decoration CSS Eigenschaft wird dazu verwendet, die Textformatierung auf underline, overline, line-through oder blink zu setzen. Unter- und Überstrichdekorationen werden unterhalb des Texts positioniert, Durchstreichungen über dem Text.

+
+
Textdekorationen werden auf Unterelemente gezeichnet. Das bedeutet, dass es nicht möglich ist, die Textdekoration, die für ein übergeordnetes Element angegeben wurde, für ein Unterelement zu deaktivieren. Zum Beispiel würde in folgendem Markup <p>Dieser Text hat <em>ein paar hervorgehobene Wörter</em>.</p> die Stilregel p { text-decoration: underline; } den gesamten Absatz unterstreichen. Die Stilregel em { text-decoration: none; } würde nichts ändern; der gesamte Absatz wäre immer noch unterstrichen. Jedoch würde die Regel em { text-decoration: overline; } eine zweite Dekoration für "ein paar hervorgehobene Wörter" erscheinen lassen.

+
+

+
Hinweis: CSS Text Decoration Level 3 hat diese Eigenschaft zu einer Kurzschreibweise für die drei neuen CSS Eigenschaften {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}} und {{cssxref("text-decoration-style")}} gemacht. Wie für andere Kurzschreibweiseeigenschaften bedeutet dies, dass sie deren Werte auf deren Standardwerte zurücksetzt, falls diese nicht explizit in der Kurzschreibweiseeigenschaft angegeben sind.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+text-decoration: none;                 /* Keine Textdekoration */
+text-decoration: underline red;        /* Rote Unterstreichung */
+text-decoration: underline wavy red;   /* Rote gewellte Unterstreichung */
+
+/* Globale Werte */
+text-decoration: inherit;
+text-decoration: initial;
+text-decoration: unset;
+

+
+
Werte

+
+
Die text-decoration Eigenschaft ist eine Kurzschreibweise und kann die Werte jeder der drei Langschreibweiseeigenschaften annehmen: {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-color")}} und {{cssxref("text-decoration-style")}}

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
h1.under {
+    text-decoration: underline;
+}
+h1.over {
+    text-decoration: overline;
+}
+p.line {
+    text-decoration: line-through;
+}
+p.blink {
+    text-decoration: blink;
+}
+a.none {
+    text-decoration: none;
+}
+p.underover {
+    text-decoration: underline overline;
+}
+

+
+
+
+
{{EmbedLiveSample('Beispiele','100%','310')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text Decoration', '#text-decoration-property', 'text-decoration')}}{{Spec2('CSS3 Text Decoration')}}Hat die Eigenschaft in eine Kurzschreibweiseeigenschaft ungewandelt. Unterstützung für den Wert von {{cssxref('text-decoration-style')}} wurde hinzugefügt.
{{SpecName('CSS2.1', 'text.html#lining-striking-props', 'text-decoration')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#text-decoration', 'text-decoration')}}{{Spec2('CSS1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.text-decoration")}}

+
+
Siehe auch

+
+
    
+ 
  • Das {{cssxref("list-style")}} Attribut steuert die Darstellung von Einträgen in HTML {{HTMLElement("ol")}} und {{HTMLElement("ul")}} Listen.
    • 
+

diff --git a/files/de/web/css/text-indent/index.html b/files/de/web/css/text-indent/index.html
new file mode 100644
index 0000000000..7c5c74219c
--- /dev/null
+++ b/files/de/web/css/text-indent/index.html
@@ -0,0 +1,119 @@
+---
+title: text-indent
+slug: Web/CSS/text-indent
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Layout
+  - Referenz
+translation_of: Web/CSS/text-indent
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die CSS Eigenschaft text-indent legt den Einzug vor der ersten Zeile eines Textes fest. Dabei wird der Abstand zur linken Seite des enthaltenden Elements angegeben.

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("text-indent")}}

+
+
text-indent: 3mm       /* Beispielwerte */
+text-indent: 40px
+text-indent: 15%       /* Prozentuale Angaben sind relativ zur Breite des Blockelements */
+text-indent: each-line /* Festgelegte Werte */
+text-indent: hanging
+
+text-indent: inherit
+

+
+
Werte

+
+

+ 
<length>

+ 
Der Einzug wird absolut angegeben. Negative Angaben sind erlaubt. Für mögliche Einheiten, siehe {{cssxref("<length>")}} .

+ 
<percentage>

+ 
Abstand wird prozentual {{cssxref("<percentage>")}} zur Breite des enthaltenden Blockelements angegeben.

+ 
each-line {{experimental_inline}}

+ 
Der Einzug beeinflusst die erste Zeile des Blockelements sowie jede Zeile nach einem erzwungenem Zeilenumbruch (forced line break ), lässt Zeilen nach einem soft wrap break allerdings unberührt.

+ 
hanging {{experimental_inline}}

+ 
Kehrt den Texteinzug um. Jede Zeile, außer der ersten, wird eingerückt.

+

+
+
Beispiel mit absoluter Angabe

+
+
HTML

+
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+

+
+
CSS

+
+
p {
+  text-indent: 5em;
+  background: powderblue;
+}

+
+
{{ EmbedLiveSample('Simple_indent','100%','100%') }}

+
+
Beispiel mit prozentualer Angabe

+
+
HTML Content

+
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
+<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
+nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> 

+
+
CSS Content

+
+
p {
+  text-indent: 30%;
+  background: plum;
+}

+
+
{{ EmbedLiveSample('Percentage_indent_example','100%','100%') }}

+
+
Details

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusKommentar
{{SpecName('CSS3 Text', '#text-indent', 'text-indent')}}{{Spec2('CSS3 Text')}}Schlüsselwerte hanging und each-line hinzugefügt
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-indent')}}{{Spec2('CSS3 Transitions')}}text-indent als Eigenschaft, die animiert werden kann
{{SpecName('CSS2.1', 'text.html#indentation-prop', 'text-indent')}}{{Spec2('CSS2.1')}}Verhalten von display: inline-block und anderen block Containern explizit definiert
{{SpecName('CSS1', '#text-indent', 'text-indent')}}{{Spec2('CSS1')}} 

+
+
Browserkompatibilität

+
+
{{Compat("css.properties.text-indent")}}

diff --git a/files/de/web/css/text-justify/index.html b/files/de/web/css/text-justify/index.html
new file mode 100644
index 0000000000..441321a862
--- /dev/null
+++ b/files/de/web/css/text-justify/index.html
@@ -0,0 +1,117 @@
+---
+title: text-justify
+slug: Web/CSS/text-justify
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - Referenz
+translation_of: Web/CSS/text-justify
+---
+
{{CSSRef}}

+
+
Die CSS Eigenschaft text-justify legt fest, wie der Blocksatz ausgeführt werden soll, wenn ein Element auf {{cssxref("text-align")}}: justify; gesetzt ist.

+
+
text-justify: none;
+text-justify: auto;
+text-justify: inter-word;
+text-justify: inter-character;
+text-justify: distribute; /* Deprecated value */
+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Die Eigenschaft text-justify  wird mit einem der Schlüsselwörter aus der folgenden Liste definiert.

+
+
Values

+
+

+ 
none

+ 
Der Blocksatz ist abgeschaltet. Dies hat den gleichen Effekt wie wenn {{cssxref("text-align")}} überhaupt nicht definiert ist. Diese Einstellung is nützlich, wenn man den Blocksatz dynamisch ein- und ausschalten möchte.

+ 
auto

+ 
Der Browser entscheidet, wie der Blocksatz ausgeführt wird, abhängig von Performance und Qualität, aber auch, was angemessen ist für die Sprache des Textes (z.B. Deutsch, asiatische Sprachen). Dies ist die Standardeinstellung, wenn  text-justify nicht definiert ist.

+ 
inter-word

+ 
Um den Blocksatz zu erreichen, wird Weißraum zwischen den Wörtern eingefügt (also eine Variante zu {{cssxref("word-spacing")}}). Diese Form ist gebräuchlich für Sprachen, die Wörter mit Leerzeichen trennen, wie Deutsch oder Koreanisch.

+ 
inter-character

+ 
Um den Blocksatz zu erreichen, wird Weißraum zwischen den Zeichen eingefügt (also eine Variante zu {{cssxref("letter-spacing")}}). Diese Form ist gebräuchlich für Sprachen wie Japanisch.

+ 
distribute {{deprecated_inline}}

+ 
Zeigt das gleiche Verhalten wie inter-character; dieser Wert wird beibehalten, um Abwärtskompatibilität zu gewährleisten.

+

+
+
Formal syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
+
+
p {
+  font-size: 1.5em;
+  border: 1px solid black;
+  padding: 10px;
+  width: 95%;
+  margin: 10px auto;
+  text-align: justify;
+}
+
+.none {
+  text-justify: none;
+}
+
+.auto {
+  text-justify: auto;
+}
+
+.dist {
+  text-justify: distribute;
+}
+
+.word {
+  text-justify: inter-word;
+}
+
+.char {
+  text-justify: inter-character;
+}

+
+
{{EmbedLiveSample("Examples","100%",400)}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpecificationStatusComment
{{SpecName('CSS3 Text', '#text-justify-property', 'text-justify')}}{{Spec2('CSS3 Text')}}

+
+
Browserkompatibilität

+
+
+
+
{{Compat("css.properties.text-justify")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("text-align")}}
    • 
+

diff --git a/files/de/web/css/text-overflow/index.html b/files/de/web/css/text-overflow/index.html
new file mode 100644
index 0000000000..c513eca823
--- /dev/null
+++ b/files/de/web/css/text-overflow/index.html
@@ -0,0 +1,274 @@
+---
+title: text-overflow
+slug: Web/CSS/text-overflow
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-overflow
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-overflow CSS Eigenschaft bestimmt, wie überlaufende Inhalte die nicht angezeigt werden (Siehe {{cssxref("overflow")}}) dem Nutzer signalisiert werden. Sie können abgeschnitten (clipped) oder durch ein Auslassungszeichen ('…', U+2026 Horizontal Ellipsis) beziehungsweise eine vom Webautor definierte Zeichenfolge markiert sein.

+
+
text-overflow.png

+
+
Das Abschneiden des überlaufenden Textes findet exakt am Rand des Inhaltselements statt. Um erst nach einem vollen Zeichen abzuschneiden, kann eine leere benutzerdefinierte Zeichenfolge angegeben werden (' ').

+
+
Diese Eigenschaft beeinflusst nur Inhalte, welche aus einem Blockelement in dessen inline-Richtung überlaufen (beispielsweise wird Text der am unteren Ende eines Kastens überläuft nicht beeinflusst). Ein Textüberlauf kann auftreten, wenn ein Text-wrapping verhindert wird (z.B., durch ‘white-space:nowrap’) oder wenn ein einzelnes Wort zu lang ist.

+
+
Diese CSS Eigenschaft erzwingt keinen Textüberlauf; um dies zu erreichen und somit die text-overflow-Eigenschaft anzuwenden, muss der Autor dem Element weitere Eigenschaften zuweisen, u. a. den {{cssxref("overflow")}} auf hidden setzen.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Überlaufverhalten am Zeilenende
+   Rechtes Ende, falls links nach rechts, linkes Ende, falls rechts nach links */
+text-overflow: clip;
+text-overflow: ellipsis;
+text-overflow: "…";
+
+/* Überlaufverhalten am linken/rechten Ende
+   Richtung hat keinen Einfluss */
+text-overflow: clip ellipsis;
+text-overflow: "…" "…";
+
+/* Globale Werte */
+text-overflow: inherit;
+text-overflow: initial;
+text-overflow: unset;
+

+
+
Werte

+
+

+ 
clip

+ 
Dieses Schlüsselwort führt dazu, dass Text genau am Ende des Inhaltsbereichs abgeschnitten wird. Daher kann der Schnitt auch innerhalb eines Zeichens geschehen. Um am Übergang zwischen zwei Zeichen abzuschneiden, muss eine leere Zeichenfolge ('') verwendet werden. Der Wert clip ist der Standardwert für diese Eigenschaft.

+ 
ellipsis

+ 
Dieses Schlüsselwort führt dazu, dass ein Auslassungszeichen ('…', U+2026 Horizontal Ellipsis) an der Schnittstelle angezeigt wird, um abgeschnittenen Text zu repräsentieren. Das Auslassungszeichen wird innerhalb des Inhaltsbereichs angezeigt, wodurch die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für das Auslassungszeichen selbst zur Verfügung steht, wird es abgeschnitten.

+ 
<string> {{experimental_inline}}

+ 
Der {{cssxref("<string>")}}, welcher zur Anzeige des abgeschnittenen Texts genutzt werden soll. Diese Zeichenfolge wird innerhalb des Inhaltsbereichs angezeigt und führt dazu, dass die Menge des angezeigten Texts verringert wird. Wenn nicht genug Platz für die Zeichenfolge selbst zur Verfügung steht, wird sie abgeschnitten.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
p {
+  white-space: nowrap;
+  width: 100%;
+  overflow: hidden;              /* "overflow"-Wert darf nicht "visible" sein */
+
+  text-overflow: ellipsis;
+}
+

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+  
+ 
+
CSS Wertdirection: ltrdirection: rtl
Erwartetes ErgebnisLive-ErgebnisErwartetes ErgebnisLive-Ergebnis
visible overflow1234567890
+    
1234567890

+   		0987654321
+    
1234567890

+   
text-overflow: clipt-o_clip.png
+    
123456

+   		t-o_clip_rtl.png
+    
1234567890

+   
text-overflow: ''12345
+    
123456

+   		54321
+    
1234567890

+   
text-overflow: ellipsis1234…
+    
1234567890

+   		…4321
+    
1234567890

+   
text-overflow: '.'1234.
+    
1234567890

+   		.4321
+    
1234567890

+   
text-overflow: clip clip123456
+    
1234567890

+   		654321
+    
1234567890

+   
text-overflow: clip ellipsis1234…
+    
1234567890

+   		6543…
+    
1234567890

+   
text-overflow: clip '.'1234.
+    
1234567890

+   		6543.
+    
1234567890

+   
text-overflow: ellipsis clip…3456
+    
1234567890

+   		…4321
+    
1234567890

+   
text-overflow: ellipsis ellipsis…34…
+    
1234567890

+   		…43…
+    
1234567890

+   
text-overflow: ellipsis '.'…34.
+    
1234567890

+   		…43.
+    
1234567890

+   
text-overflow: ',' clip,3456
+    
1234567890

+   		,4321
+    
1234567890

+   
text-overflow: ',' ellipsis,34…
+    
1234567890

+   		,43…
+    
1234567890

+   
text-overflow: ',' '.',34.
+    
1234567890

+   		,53.
+    
1234567890

+   

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 UI', '#text-overflow', 'text-overflow')}}{{Spec2('CSS3 UI')}}Ursprüngliche Definition

+
+
Eine vorherige Version dieser Schnittstelle erreichte den Candidate Recommendation-Status (CR). Da einige der nicht aufgeführten gefährdeten Eigenschaften entfernt werden mussten, wurde die Spezifikation auf Working Draft-Niveau herabgesetzt. Das erklärt, weshalb Browser diese Eigenschaft ohne Präfix, jedoch nicht im CR-Zustand, umgesetzt haben. Momentan hat die Spezifikation das Editor's Draft-Niveau erreicht.

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-overflow")}}
+
+
Siehe auch

+
+
    
+ 
  • Verwandte CSS Eigenschaften: {{cssxref("overflow")}}, {{cssxref("white-space")}}
    • 
+

diff --git a/files/de/web/css/text-rendering/index.html b/files/de/web/css/text-rendering/index.html
new file mode 100644
index 0000000000..57d8ffb78d
--- /dev/null
+++ b/files/de/web/css/text-rendering/index.html
@@ -0,0 +1,133 @@
+---
+title: text-rendering
+slug: Web/CSS/text-rendering
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - CSS Text
+  - NeedsLiveSample
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+  - SVG
+translation_of: Web/CSS/text-rendering
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-rendering CSS Eigenschaft liefert der Renderingengine Informationen darüber, wie die Darstellung von Text optimiert werden soll.

+
+
Der Browser macht Abstriche bezüglich Geschwindigkeit, Lesbarkeit und geometrischer Präzision. Die text-rendering Eigenschaft ist eine SVG Eigenschaft, die in keinem CSS Standard definiert ist. Jedoch erlauben Gecko und WebKit Browser es unter Windows, Mac OS X und Linux, diese Eigenschaft auf HTML und XML Inhalte anzuwenden.

+
+
Ein offensichtlicher Effekt ist optimizeLegibility, welches Ligaturen (ff, fi, fl etc.) in Text kleiner als 20px für einige Schriftarten aktiviert (zum Beispiel Microsofts Calibri, Candara, Constantia und Corbel oder die DejaVu Schriftfamilie).

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+text-rendering: auto;
+text-rendering: optimizeSpeed;
+text-rendering: optimizeLegibility;
+text-rendering: geometricPrecision;
+
+/* Globale Werte */
+text-rendering: inherit;
+text-rendering: initial;
+text-rendering: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Der Browser bestimmt, wann auf Geschwindigkeit, Lesbarkeit oder geometrische Präzision optimiert werden soll, wenn Text gezeichnet wird. Für Unterschiede, wie dieser Wert von den Browser interpretiert wird, siehe die Kompatibilitätstabelle.

+ 
optimizeSpeed

+ 
Der Browser betont Geschwindigkeit gegenüber Lesbarkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies deaktiviert Unterschneidung und Ligaturen.

+ 
optimizeLegibility

+ 
Der Browser betont Lesbarkeit gegenüber Geschwindigkeit und geometrischer Präzision, wenn Text gezeichnet wird. Dies aktiviert Unterschneidung und optionale Ligaturen.

+ 
geometricPrecision

+ 

+ 
Der Browser betont geometrischer Präzision gegenüber Geschwindigkeit und Lesbarkeit. Bestimmte Aspekte von Schriften — wie Unterschneidung — skalieren nicht linear. Daher erlaubt es dieser Wert, Text in diesen Schriften gut aussehen zu lassen.

+
+ 
Wenn Text in SVG hoch- oder runterskaliert wird, berechnen Browser die finale Größe des Texts (welche durch die angegebene Schriftgröße und die Skalierung bestimmt wird) und fordern eine Schriftart dieser berechneten Größe vom Schriftsystem der Plattform an. Aber falls eine Schriftgröße von beispielsweise 9 mit einer Skalierung von 140% angefordert wird, existiert die sich ergebende Schriftgröße von 12.6 nicht explizit im Schriftsystem, sodass der Browser stattdessen die Schriftgröße auf 12 abrundet. Dies resultiert in einer schrittweisen Skalierung von Text.

+
+ 
Der geometricPrecision Wert — falls von der Renderingengine vollständig unterstützt — erlaubt es, Text übergangslos zu skalieren. Große Skalierungsfaktoren können eine weniger schöne Textdarstellung zur Folge haben, aber die Größe ist, was erwartet wird — weder auf- noch abgerundet auf die nächstmögliche Schriftgröße, die von Windows oder Linux unterstützt wird.

+
+ 
Hinweis: WebKit wendet exakt den angegebenen Wert an, aber Gecko behandelt den Wert genauso wie optimizeLegibility.

+ 

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+
/* stellt sicher, dass alle Schriften innerhalb des HTML Dokuments in all ihrer Pracht dargestellt werden,
+   aber verhindert unangemessene Ligaturen in Elementen mit der Klasse 'foo' */
+
+body {
+  text-rendering: optimizeLegibility;
+}
+
+.foo {
+  text-rendering: optimizeSpeed;
+}

+
+
Livebeispiele

+
+
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
CSS CodeUnterschneidungLigaturen
font: 19.9px 'DejaVu Serif', Constantia;LYoWATff fi fl ffl
font: 20px 'DejaVu Serif', Constantia;LYoWATff fi fl ffl
font: 3em 'DejaVu Serif', Constantia;

+    text-rendering: optimizeSpeed;		LYoWATff fi fl ffl
font: 3em 'Dejavu Serif', Constantia;

+    text-rendering: optimizeLegibility;		LYoWATff fi fl ffl

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering')}}{{Spec2('SVG1.1')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-rendering")}}
diff --git a/files/de/web/css/text-shadow/index.html b/files/de/web/css/text-shadow/index.html
new file mode 100644
index 0000000000..89b3f6907e
--- /dev/null
+++ b/files/de/web/css/text-shadow/index.html
@@ -0,0 +1,145 @@
+---
+title: text-shadow
+slug: Web/CSS/text-shadow
+tags:
+  - CSS
+  - CSS Text
+  - Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-shadow
+---
+
{{Cssref}}

+
+
Übersicht

+
+
Die text-shadow CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und {{cssxref("text-decoration","Textdekorationen")}} des Elements angewendet werden sollen.

+
+
Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.

+
+
Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.

+
+
Diese Eigenschaft gilt sowohl für {{cssxref("::first-line")}} als auch {{cssxref("::first-letter")}} Pseudoelemente.

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* offset-x | offset-y | blur-radius | color */
+text-shadow: 1px 1px 2px black;
+
+/* color | offset-x | offset-y | blur-radius */
+text-shadow: #CCC 1px 0 10px;
+
+/* offset-x | offset-y | color */
+text-shadow: 5px 5px #558ABB;
+
+/* color | offset-x | offset-y */
+text-shadow: white 2px 5px;
+
+/* offset-x | offset-y */
+/* Für color und blur-radius werden Standardwerte verwendet */
+text-shadow: 5px 10px;
+
+/* Globale Werte */
+text-shadow: inherit;
+text-shadow: initial;
+text-shadow: unset;
+

+
+
Werte

+
+

+ 
<color>

+ 
Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet. {{note("Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.")}}

+ 
<offset-x> <offset-y>

+ 
Benötigt. Diese <length> Werte bestimmen den Versatz des Schattens vom Text. <offset-x> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <offset-y> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte 0 sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <blur-radius> gesetzt ist).

+ Siehe {{cssxref("<length>")}} für mögliche Einheiten.

+ 
<blur-radius>

+ 
Optional. Dies ist ein {{cssxref("<length>")}} Wert. Falls nicht angegeben, ist der Standardwert 0. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Beispiele

+
+

+
.red-text-shadow {
+   text-shadow: red 0 -2px;
+}

+
+
<p class="red-text-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
+   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>

+

+
+
{{EmbedLiveSample('Beispiel1', '689px', '90px')}}

+
+

+
.white-with-blue-shadow {
+   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
+   color: white;
+   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
+}

+
+
<p class="white-with-blue-shadow">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>

+

+
+
{{EmbedLiveSample('Beispiel2', '689px', '180px')}}

+
+

+
.gold-on-gold {
+   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
+   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
+   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px;
+   color: gold;
+   background: gold;
+}

+
+
<p class="gold-on-gold">
+   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
+   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
+</p>

+

+
+
{{EmbedLiveSample('Beispiel3', '689px', '90px')}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Transitions', '#animatable-css', 'text-shadow')}}{{Spec2('CSS3 Transitions')}}Definiert text-shadow als animierbar.
{{SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow')}}{{Spec2('CSS3 Text Decoration')}}Die CSS Eigenschaft text-shadow wurde in CSS2 inkorrekt definiert und in CSS2 (Level 1) verworfen. Die CSS Text Module Level 3 Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf CSS Text Decoration Module Level 3 verschoben.

+
+
Browser Kompatibilität

+
+
{{Compat("css.properties.text-shadow")}}

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("box-shadow")}}
    • 
+

diff --git a/files/de/web/css/text-transform/index.html b/files/de/web/css/text-transform/index.html
new file mode 100644
index 0000000000..5461a868a2
--- /dev/null
+++ b/files/de/web/css/text-transform/index.html
@@ -0,0 +1,504 @@
+---
+title: text-transform
+slug: Web/CSS/text-transform
+translation_of: Web/CSS/text-transform
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Das text-transform CSS Attribut legt die Groß- und Kleinschreibung eines Elementes fest. Es kann verwendet werden, um den Text eines Elementes komplett klein oder klein zu schreiben oder den ersten Buchstaben jedes Wortes groß zu schreiben.

+
+

+
Das text-transform Attribut berücksichtigt sprachspezifische Regeln:

+
+
    
+ 
  • in Turksprachen, wie Türkisch (tr), Aserbaidschanisch (az), Krimtatarisch (crh), und Baschkirisch (ba), gibt es zwei Arten von i, mit und ohne Punkt, und jeweils die Groß- bzw. Kleinschreibung: i/İ and ı/I.
    • 
+ 
  • auf Deutsch (de) wird das ß in der Großschreibung zu SS.
    • 
+ 
  • auf Niederländisch (nl) wird der Digraph ij auch bei text-transform: capitalize zu IJ.
    • 
+ 
  • auf Griechisch (el) verlieren Vokale ihren Akzent wenn wenn ganze Worte is in Großschreibung geschrieben werden (ά/Α), außer beim Eta (ή/Ή). Doppelvokale mit einem Akzent auf dem ersten Vokal verlieren den Akzent und bekommen einen Trema auf dem zweiten Vokal (άι/ΑΪ).
    • 
+ 
  • auf Griechisch (el) hat das kleine Sigma zwei Formen: σ and ς. ς wird nur dann genutzt, wenn Sigma ein Wort beendet. Wird text-transform: lowercase auf ein großes Sigma (Σ) angewandt, so muss der Browser aus dem Kontext heraus entscheiden, welches verwendet wird.
    • 
+

+
+
Die Sprache wird durch das lang HTML Attribut oder das xml:lang XML Attribut festgelegt..

+
+
Die Unterstützung dieser spezifischen Fälle unterscheidet sich von Browser zu Browser, also prüfen Sie dies anhand der Kompatibilitätstabelle.

+

+
+
{{cssinfo}}

+
+
Syntax

+
+
Formal syntax: {{csssyntax("text-transform")}}
+

+
+
text-transform: capitalize
+text-transform: uppercase
+text-transform: lowercase
+text-transform: none
+text-transform: full-width
+
+text-transform: inherit
+

+
+
Werte

+
+

+ 
capitalize

+ 
Ein Schlüsselwort, dass die Großschreibung des Anfachsbuchstaben jedes Wortes erzwingt. Geändert werden alle Unicode-basierten Zeichen außer Symbole. Dabei bleiben alle anderen Zeichen unverändert.

+ 

+ 
Bei der automatischen Großschreibung sollte je nach Sprache die Kompatibilität beachtet und überprüft werden. 

+ 

+ 
uppercase

+ 
Wendet die Großschreibung auf alle Zeichen an.

+ 
lowercase

+ 
Erzwingt die Kleinschreibung aller Zeichen.

+ 
none

+ 
Verhindert Änderungen; alle Buchstaben bleiben unverändert.

+ 
full-width {{experimental_inline}}

+ 
Erzwingt das Rendern der Buchstaben als rechteckige Form, was z.B. die Interaktion mit ostasiatischen Sprachen (z.B. Chinesisch oder Japanisch) erlaubt.

+

+
+
Beispiele

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: none; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
ReferenzwertLorem ipsum dolor sit amet, consectetur adipisicing elit, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: capitalize; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
ReferenzwertLorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: capitalize; }

+
+    
Die Großschreibung beginnt bei Zeichen, die nach Unicode der Buchstabenkategorie angehören.

+   
Zeichenkette(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
Echtzeitbeispiel(this) “is” [a] –short– -test- «for» *the* _css_ ¿capitalize? ?¡transform!
Referenzwert(This) “Is” [A] –Short– -Test- «For» *The* _Css_ ¿Capitalize? ?¡Transform!

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: capitalize; }

+
+    
Symbole werden ignoriert. Auch hier wird erst der erste gefundene Buchstabe in einer Zeichenkette großgeschrieben.

+   
Zeichenketteⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Echtzeitbeispielⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙkl
Referenzwertⓐⓑⓒ (ⓓⓔⓕ) —ⓖⓗⓘ— ⓙKl

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: capitalize; }

+    Das dänische Digraph ij muss wie ein einzelnes Zeichen behandelt werden.
ZeichenketteThe Dutch word: "ijsland" starts with a digraph.
EchtzeitbeispielThe Dutch word: "ijsland" starts with a digraph.
ReferenzwertThe Dutch Word: "IJsland" Starts With A Digraph.

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: uppercase; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
ReferenzwertLOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: uppercase; }

+
+    
Bei Griechischen Vokalen sollte, außer bei einem trennenden eta, auf Akzente verzichtet werden. Bei der Großschreibung eines ersten Vokals mit Akzent kommt es bei zwei direkt aufeinander folgenden Vokalen zu einer Diaräse.

+   
ZeichenketteΘα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";
EchtzeitbeispielΘα πάμε στο "Θεϊκό φαΐ" ή στη "Νεράιδα";
ReferenzwertΘΑ ΠΑΜΕ ΣΤΟ "ΘΕΪΚΟ ΦΑΪ" Ή ΣΤΗ "ΝΕΡΑΪΔΑ";

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: lowercase; }
ZeichenketteLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
EchtzeitbeispielLorem ipsum dolor sit amet, consectetur adipisicing elit, ...
Referenzwertlorem ipsum dolor sit amet, consectetur adipisicing elit, ...

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+

+    
p { text-transform: lowercase; }

+
+    
Der griechische Buchstabe Sigma (Σ) wird je nach Kontext in ein kleingeschriebenes Sigma (σ) oder die entsprechene Wortvariante (ς) umgewandelt.

+   
ZeichenketteΣ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
EchtzeitbeispielΣ IS A greek LETTER that appears SEVERAL TIMES IN ΟΔΥΣΣΕΥΣ.
Referenzwertσ is a greek letter that appears several times in ΟΔΥΣΣΕΥς.

+
+
+ 
+  
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+  
+   
+   
+  
+ 
+
p { text-transform: full-width; }

+    Some characters exists in two formats, normal width and a full-width, with different Unicode code points. The full-width version is used to mix them smoothly with Asian ideographic characters.
Zeichenkette0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
Echtzeitbeispiel0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ!"#$%&()*+,-./:;<=>?@{|}~
Referenzwert０１２３４５６７８９ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ！＂＃＄％＆（）＊＋，－．／：；＜＝＞？＠｛｜｝～

+
+
Details

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentrar
{{SpecName('CSS4 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS4 Text')}}Aus{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}} :Fügt das Schlüsselwort full-size-kana hinzu und erlaubt die Kombination von Schlüsselwörtern mit full-width
{{SpecName('CSS3 Text', '#text-transform', 'text-transform')}}{{Spec2('CSS3 Text')}}
+    
Aus {{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}} : Mehr Zahlen und Buchstaben können verwendet werden. Das Schlüsselwort capitalize aktiviert die Großschreibung nur beim ersten unterstützten Zeichen eines Wortes; andere Zeichen werden ignoriert. Erhöhung der Kompatibilität des Schlüsselwortes full-width.

+   
{{SpecName('CSS2.1', 'text.html#caps-prop', 'text-transform')}}{{Spec2('CSS2.1')}}Aus {{SpecName('CSS1', '#text-transform', 'text-transform')}} : Ergänzung des Umfangs an unterstützten Zeichen um einige nicht-lateinische Buchstaben
{{SpecName('CSS1', '#text-transform', 'text-transform')}}{{Spec2('CSS1')}}

+
+
Browserkompatibilität

+
+
{{CompatibilityTable}}

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Grundfunktionalität1.0{{CompatGeckoDesktop("1")}}4.07.01.0
capitalize (CSS3 version)siehe Bemerkung{{CompatGeckoDesktop("14")}} (siehe Bemerkung)siehe Bemerkung{{CompatUnknown}}siehe Bemerkung
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoDesktop("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoDesktop("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ and ı → I{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dänisches IJ Digraph{{CompatNo}}{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Griech. Zeichen mit Akzent{{CompatNo}}{{CompatGeckoDesktop("15")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ bzw. ς30{{CompatGeckoDesktop("14")}}{{CompatNo}}{{CompatNo}}6.0

+

+
+

+
+ 
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+  
+   
+   
+   
+   
+   
+   
+  
+ 
+
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Grundfunktionalität1.0{{CompatGeckoMobile("1")}}6.06.01.0
capitalize (CSS3 version)siehe Bemerkung{{CompatGeckoMobile("14")}} siehe Bemerkungsiehe Bemerkung{{CompatUnknown}}siehe Bemerkung
full-size-kana{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
full-width{{CompatNo}}{{CompatGeckoMobile("19")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
ß → SS{{CompatUnknown}}{{CompatGeckoMobile("1")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
i → İ and ı → I{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
Dänisches IJ Digraph{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Griech. Zeichen mit Akzent{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Σ → σ bzw. ς{{CompatNo}}{{CompatGeckoMobile("14")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}

+

+
+
Browserinformationen

+
+
Das capitalize Schlüsselwort wurde in CSS1 bzw. CSS 2.1 nicht eindeutig spezifiziert. Dadurch wurde der erste großzuschreibende Buchstabe unterschiedlich ermittelt. Sowohl Webkit-basierte Browser als auch die Gecko Engine identifizierte Symbole fälschlicherwiese als Buchstaben. Beispielsweise galten bei Firefox - respektive _ als Buchstaben. Internet Explorer 9 hielt sich den Spezifikationen insgesamt am nächsten. Mit CSS3 wurde das Verhalten vereinheitlicht. Der Kompatibilitätstabelle können die Browserversionen entnommen werden, mit denen der Standard erstmals exakt umgesetzt wurde.

+
+
Siehe auch

+
+
    
+ 
  • {{cssxref("font-variant")}}
    • 
+

diff --git a/files/de/web/css/text-underline-position/index.html b/files/de/web/css/text-underline-position/index.html
new file mode 100644
index 0000000000..90fd9ddafd
--- /dev/null
+++ b/files/de/web/css/text-underline-position/index.html
@@ -0,0 +1,92 @@
+---
+title: text-underline-position
+slug: Web/CSS/text-underline-position
+tags:
+  - CSS
+  - CSS Eigenschaft
+  - NeedsMobileBrowserCompatibility
+  - Referenz
+translation_of: Web/CSS/text-underline-position
+---
+
{{CSSRef}}

+
+
Übersicht

+
+
Die text-underline-position CSS Eigenschaft legt die Position der Linie einer Unterstreichung, die über die {{cssxref("text-decoration")}}-Eigenschaft mit dem Wert underline gesetzt wurde, fest.

+
+
Diese Eigenschaft wird vererbt und nicht von {{cssxref("text-decoration")}} zurückgesetzt, wodurch sie auch für das gesamte Dokument festgelegt werden kann:

+
+
:root { /* nützlich für Dokumente mit vielen chemischen Formeln */
+  text-underline-position: under;
+}

+
+
{{cssinfo}}

+
+
Syntax

+
+
/* Schlüsselwortwerte */
+text-underline-position: auto;
+text-underline-position: under;
+text-underline-position: left;
+text-underline-position: right;
+text-underline-position: under left;
+text-underline-position: right under;
+
+/* Globale Werte */
+text-underline-position: inherit;
+text-underline-position: initial;
+text-underline-position: unset;
+

+
+
Werte

+
+

+ 
auto

+ 
Der Browser verwendet einen Algorithmus, um zwischen under und der Grundlinie zu unterscheiden.

+ 
under

+ 
Die Linie wird unterhalb der Grundlinie, wo keine Unterlängen berührt werden, gesetzt. Dies ist nützlich, um zu verhindern, dass chemische oder mathematische Formeln, die oft Tiefstellungen enthalten, schwer lesbar werden.

+ 
left

+ 
In vertikalen Schreibrichtungen wird die Linie auf der linken Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für under.

+ 
right

+ 
In vertikalen Schreibrichtungen wird die Linie auf der rechten Seite der Zeichen platziert. In horizontalen Schreibrichtungen ist dies ein Synonym für under.

+ 
auto-pos{{non-standard_inline}}

+ 
Dies ist ein Synonym für auto und sollte nicht verwendet werden.

+ 
above{{non-standard_inline}}

+ 
Die Linie wird über dem Text gesetzt. In ostasiatischem Text führt der Wert auto zum gleichen Ergebnis.

+ 
below{{non-standard_inline}}

+ 
Die Linie wird unter dem Text gesetzt. In aus Buchstaben bestehendem Text führt der Wert auto zum gleichen Ergebnis.

+

+
+
Formale Syntax

+
+
{{csssyntax}}

+
+
Spezifikationen

+
+
+ 
+  
+   
+   
+   
+  
+ 
+ 
+  
+   
+   
+   
+  
+ 
+
SpezifikationStatusKommentar
{{SpecName('CSS3 Text-decoration', '#text-underline-position', 'text-underline-position')}}{{Spec2('CSS3 Text-decoration')}}Ursprüngliche Definition

+
+
Browser Kompatibilität

+
+{{Compat("css.properties.text-underline-position")}}
+
+
Siehe auch

+
+
diff --git a/files/de/web/css/time/index.html b/files/de/web/css/time/index.html
new file mode 100644
index 0000000000..e8e0f07a88
--- /dev/null
+++ b/files/de/web/css/time/index.html
@@ -0,0 +1,75 @@
+---
+title: