From 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 15 Jul 2021 12:58:54 -0400 Subject: delete pages that were never translated from en-US (de, part 1) (#1548) --- files/de/_redirects.txt | 17 - files/de/_wikihistory.json | 405 ------ .../how_does_the_internet_work/index.html | 96 -- .../building_blocks/values_and_units/index.html | 395 ------ files/de/learn/html/tables/basics/index.html | 556 -------- .../javascript/building_blocks/events/index.html | 588 --------- .../javascript/first_steps/variables/index.html | 386 ------ .../javascript/objects/inheritance/index.html | 440 ------- .../server-side/express_nodejs/mongoose/index.html | 843 ------------ .../first_steps/introduction/index.html | 231 ---- .../cross_browser_testing/index.html | 49 - .../howto/document_a_css_property/index.html | 89 -- .../mdn/guidelines/writing_style_guide/index.html | 561 -------- .../api/browseraction/setpopup/index.html | 134 -- .../add-ons/webextensions/api/downloads/index.html | 123 -- .../manifest.json/devtools_page/index.html | 40 - .../webextensions/manifest.json/theme/index.html | 1359 -------------------- .../webextensions/match_patterns/index.html | 430 ------- files/de/mozilla/firefox/releases/3.6/index.html | 301 ----- files/de/mozilla/firefox/releases/47/index.html | 174 --- files/de/mozilla/firefox/releases/60/index.html | 146 --- files/de/mozilla/firefox/releases/68/index.html | 162 --- files/de/tools/about_colon_debugging/index.html | 252 ---- files/de/tools/browser_console/index.html | 157 --- .../debugger/how_to/use_a_source_map/index.html | 32 - .../page_inspector/how_to/edit_fonts/index.html | 232 ---- files/de/tools/paint_flashing_tool/index.html | 94 -- .../debugging_firefox_desktop/index.html | 38 - .../storage_inspector/cache_storage/index.html | 15 - .../tools/storage_inspector/indexeddb/index.html | 45 - .../local_storage_session_storage/index.html | 20 - .../understanding_wcag/perceivable/index.html | 359 ------ files/de/web/api/animationevent/index.html | 190 --- files/de/web/api/audiocontext/index.html | 232 ---- .../setlinedash/index.html | 179 --- files/de/web/api/eventtarget/index.html | 174 --- files/de/web/api/file/getastext/index.html | 78 -- files/de/web/api/rtcpeerconnection/index.html | 379 ------ files/de/web/api/webxr_device_api/index.html | 298 ----- .../de/web/css/_doublecolon_placeholder/index.html | 150 --- files/de/web/css/box-decoration-break/index.html | 136 -- files/de/web/css/containing_block/index.html | 258 ---- files/de/web/css/css_values_and_units/index.html | 493 ------- .../media_queries/testing_media_queries/index.html | 88 -- .../media_queries/using_media_queries/index.html | 644 ---------- .../index.html | 88 -- files/de/web/css/object-position/index.html | 147 --- files/de/web/css/perspective-origin/index.html | 391 ------ files/de/web/css/shorthand_properties/index.html | 159 --- .../de/web/css/visual_formatting_model/index.html | 144 --- files/de/web/guide/mobile/index.html | 19 - files/de/web/html/applying_color/index.html | 498 ------- files/de/web/html/element/input/button/index.html | 246 ---- files/de/web/html/element/th/index.html | 297 ----- files/de/web/html/global_attributes/is/index.html | 63 - files/de/web/http/headers/connection/index.html | 46 - .../http/headers/set-cookie/samesite/index.html | 133 -- files/de/web/http/headers/user-agent/index.html | 137 -- files/de/web/javascript/guide/modules/index.html | 446 ------- .../object/__definegetter__/index.html | 150 --- .../reference/global_objects/rangeerror/index.html | 174 --- files/de/web/manifest/short_name/index.html | 71 - .../index.html | 412 ------ 63 files changed, 15689 deletions(-) delete mode 100644 files/de/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 files/de/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/de/learn/html/tables/basics/index.html delete mode 100644 files/de/learn/javascript/building_blocks/events/index.html delete mode 100644 files/de/learn/javascript/first_steps/variables/index.html delete mode 100644 files/de/learn/javascript/objects/inheritance/index.html delete mode 100644 files/de/learn/server-side/express_nodejs/mongoose/index.html delete mode 100644 files/de/learn/server-side/first_steps/introduction/index.html delete mode 100644 files/de/learn/tools_and_testing/cross_browser_testing/index.html delete mode 100644 files/de/mdn/contribute/howto/document_a_css_property/index.html delete mode 100644 files/de/mdn/guidelines/writing_style_guide/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/api/downloads/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html delete mode 100644 files/de/mozilla/add-ons/webextensions/match_patterns/index.html delete mode 100644 files/de/mozilla/firefox/releases/3.6/index.html delete mode 100644 files/de/mozilla/firefox/releases/47/index.html delete mode 100644 files/de/mozilla/firefox/releases/60/index.html delete mode 100644 files/de/mozilla/firefox/releases/68/index.html delete mode 100644 files/de/tools/about_colon_debugging/index.html delete mode 100644 files/de/tools/browser_console/index.html delete mode 100644 files/de/tools/debugger/how_to/use_a_source_map/index.html delete mode 100644 files/de/tools/page_inspector/how_to/edit_fonts/index.html delete mode 100644 files/de/tools/paint_flashing_tool/index.html delete mode 100644 files/de/tools/remote_debugging/debugging_firefox_desktop/index.html delete mode 100644 files/de/tools/storage_inspector/cache_storage/index.html delete mode 100644 files/de/tools/storage_inspector/indexeddb/index.html delete mode 100644 files/de/tools/storage_inspector/local_storage_session_storage/index.html delete mode 100644 files/de/web/accessibility/understanding_wcag/perceivable/index.html delete mode 100644 files/de/web/api/animationevent/index.html delete mode 100644 files/de/web/api/audiocontext/index.html delete mode 100644 files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html delete mode 100644 files/de/web/api/eventtarget/index.html delete mode 100644 files/de/web/api/file/getastext/index.html delete mode 100644 files/de/web/api/rtcpeerconnection/index.html delete mode 100644 files/de/web/api/webxr_device_api/index.html delete mode 100644 files/de/web/css/_doublecolon_placeholder/index.html delete mode 100644 files/de/web/css/box-decoration-break/index.html delete mode 100644 files/de/web/css/containing_block/index.html delete mode 100644 files/de/web/css/css_values_and_units/index.html delete mode 100644 files/de/web/css/media_queries/testing_media_queries/index.html delete mode 100644 files/de/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html delete mode 100644 files/de/web/css/object-position/index.html delete mode 100644 files/de/web/css/perspective-origin/index.html delete mode 100644 files/de/web/css/shorthand_properties/index.html delete mode 100644 files/de/web/css/visual_formatting_model/index.html delete mode 100644 files/de/web/guide/mobile/index.html delete mode 100644 files/de/web/html/applying_color/index.html delete mode 100644 files/de/web/html/element/input/button/index.html delete mode 100644 files/de/web/html/element/th/index.html delete mode 100644 files/de/web/html/global_attributes/is/index.html delete mode 100644 files/de/web/http/headers/connection/index.html delete mode 100644 files/de/web/http/headers/set-cookie/samesite/index.html delete mode 100644 files/de/web/http/headers/user-agent/index.html delete mode 100644 files/de/web/javascript/guide/modules/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html delete mode 100644 files/de/web/javascript/reference/global_objects/rangeerror/index.html delete mode 100644 files/de/web/manifest/short_name/index.html delete mode 100644 files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index 6f4cd7eae5..77321def5b 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -206,7 +206,6 @@ /de/docs/DOM /de/docs/Web/API/Document_Object_Model /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.name /de/docs/Web/API/File/name /de/docs/DOM/Node /de/docs/Web/API/Node /de/docs/DOM/Node.childNodes /de/docs/Web/API/Node/childNodes @@ -226,7 +225,6 @@ /de/docs/DOM/window.openDialog /de/docs/Web/API/Window/openDialog /de/docs/DOM/window.setTimeout /de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /de/docs/DragDrop /de/docs/Web/API/HTML_Drag_and_Drop_API -/de/docs/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript /de/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /de/docs/Erweiterungen_für_Firefox_3_aktualisieren /de/docs/Mozilla/Firefox/Releases/3/Updating_extensions /de/docs/Farbverläufe_in_CSS /de/docs/Web/CSS/CSS_Images/Using_CSS_gradients /de/docs/Firefox_1.5_Beta /de/docs/Mozilla/Firefox/Releases/1.5 @@ -361,7 +359,6 @@ /de/docs/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction /de/docs/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction /de/docs/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction -/de/docs/Learn/CSS/Building_blocks/Werten_Einheiten /de/docs/Learn/CSS/Building_blocks/Values_and_units /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 @@ -372,7 +369,6 @@ /de/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /de/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /de/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks -/de/docs/Learn/Common_questions/Wie_das_Internet_funktioniert /de/docs/Learn/Common_questions/How_does_the_Internet_work /de/docs/Learn/Getting_started_with_the_web/JavaScript_basis /de/docs/Learn/Getting_started_with_the_web/JavaScript_basics /de/docs/Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert /de/docs/Learn/Getting_started_with_the_web/How_the_Web_works /de/docs/Learn/Getting_started_with_the_web/dateien_nutzen /de/docs/Learn/Getting_started_with_the_web/Dealing_with_files @@ -387,24 +383,18 @@ /de/docs/Learn/HTML/Einführung_in_HTML/Marking_up_a_letter /de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter /de/docs/Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content /de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content /de/docs/Learn/HTML/Forms /de/docs/Learn/Forms -/de/docs/Learn/HTML/Tables/Grund_tabelle_HTML /de/docs/Learn/HTML/Tables/Basics /de/docs/Learn/JavaScript/Bausteine /de/docs/Learn/JavaScript/Building_blocks -/de/docs/Learn/JavaScript/Bausteine/Ereignisse /de/docs/Learn/JavaScript/Building_blocks/Events /de/docs/Learn/JavaScript/First_steps/Erster_Blick /de/docs/Learn/JavaScript/First_steps/A_first_splash /de/docs/Learn/JavaScript/First_steps/Was_ist_JavaScript /de/docs/Learn/JavaScript/First_steps/What_is_JavaScript /de/docs/Learn/JavaScript/First_steps/lustige_geschichten_generator /de/docs/Learn/JavaScript/First_steps/Silly_story_generator /de/docs/Learn/Server-side/Erste_Schritte /de/docs/Learn/Server-side/First_steps -/de/docs/Learn/Server-side/Erste_Schritte/Introduction /de/docs/Learn/Server-side/First_steps/Introduction /de/docs/Lokalisierung /de/docs/Glossary/Localization /de/docs/MDN/Contribute/Content /de/docs/MDN/Guidelines -/de/docs/MDN/Contribute/Content/Style_guide /de/docs/MDN/Guidelines/Writing_style_guide /de/docs/MDN/Contribute/Guidelines /de/docs/MDN/Guidelines -/de/docs/MDN/Contribute/Guidelines/Style_guide /de/docs/MDN/Guidelines/Writing_style_guide /de/docs/MDN/Contribute/Structures /de/docs/MDN/Structures /de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Compatibility_tables /de/docs/MDN/Erste_Schritte /de/docs/MDN/Contribute/Getting_started /de/docs/MDN/Feedback /de/docs/MDN/Contribute/Feedback -/de/docs/MDN/Guidelines/Style_guide /de/docs/MDN/Guidelines/Writing_style_guide /de/docs/MDN/Kuma /de/docs/MDN/Yari /de/docs/MDN/Kuma/Beheben_von_KumaScript_Fehlern /de/docs/MDN/Tools/KumaScript/Troubleshooting /de/docs/MDN/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Compatibility_tables @@ -439,7 +429,6 @@ /de/docs/Tools/Browser_Werkzeuge /de/docs/Tools/Browser_Toolbox /de/docs/Tools/Page_Inspector/How_to/Event_Listener_untersuchen /de/docs/Tools/Page_Inspector/How_to/Examine_event_listeners /de/docs/Tools/Page_Inspector/How_to/Raster_Layout_untersuchen /de/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts -/de/docs/Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung /de/docs/Tools/Page_Inspector/How_to/Edit_fonts /de/docs/Tools/Seiten_Inspektor /de/docs/Tools/Page_Inspector /de/docs/Tools/Seiten_Inspektor/Style_panel /de/docs/Tools/Page_Inspector /de/docs/Tools/Shader-Editor /de/docs/Tools/Shader_Editor @@ -494,7 +483,6 @@ /de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten /de/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets /de/docs/Web/CSS/-moz-alias /de/docs/Web/CSS/cursor /de/docs/Web/CSS/-moz-appearance /de/docs/Web/CSS/appearance -/de/docs/Web/CSS/-moz-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 @@ -557,7 +545,6 @@ /de/docs/Web/CSS/Initialwert /de/docs/Web/CSS/initial_value /de/docs/Web/CSS/Kindselektoren /de/docs/Web/CSS/Child_combinator /de/docs/Web/CSS/Klassenselektoren /de/docs/Web/CSS/Class_selectors -/de/docs/Web/CSS/Kurzformat_Eigenschaft /de/docs/Web/CSS/Shorthand_properties /de/docs/Web/CSS/Motion_Path /de/docs/Web/CSS/CSS_Motion_Path /de/docs/Web/CSS/Pseudoklasse /de/docs/Web/CSS/Pseudo-classes /de/docs/Web/CSS/Referenz /de/docs/Web/CSS/Reference @@ -570,7 +557,6 @@ /de/docs/Web/CSS/ersetztes_Element /de/docs/Web/CSS/Replaced_element /de/docs/Web/CSS/grid-gap /de/docs/Web/CSS/gap /de/docs/Web/CSS/hidden /de/docs/Web/CSS/visibility -/de/docs/Web/CSS/mq-boolean /de/docs/Web/CSS/Media_Queries/Using_media_queries /de/docs/Web/CSS/tatsächlicher_Wert /de/docs/Web/CSS/actual_value /de/docs/Web/CSS/url /de/docs/Web/CSS/url() /de/docs/Web/CSS/visible /de/docs/Web/CSS/visibility @@ -628,7 +614,6 @@ /de/docs/Web/HTML/Globale_Attribute/hidden /de/docs/Web/HTML/Global_attributes/hidden /de/docs/Web/HTML/Globale_Attribute/id /de/docs/Web/HTML/Global_attributes/id /de/docs/Web/HTML/Globale_Attribute/inputmode /de/docs/Web/HTML/Global_attributes/inputmode -/de/docs/Web/HTML/Globale_Attribute/is /de/docs/Web/HTML/Global_attributes/is /de/docs/Web/HTML/Globale_Attribute/kontextmenu /de/docs/Web/HTML/Global_attributes/contextmenu /de/docs/Web/HTML/Globale_Attribute/lang /de/docs/Web/HTML/Global_attributes/lang /de/docs/Web/HTML/Globale_Attribute/style /de/docs/Web/HTML/Global_attributes/style @@ -644,7 +629,6 @@ /de/docs/Web/JavaScript/Datenstrukturen /de/docs/Web/JavaScript/Data_structures /de/docs/Web/JavaScript/Datenstruktures /de/docs/Web/JavaScript/Data_structures /de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/A_re-introduction_to_JavaScript -/de/docs/Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript /de/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators /de/docs/Web/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures /de/docs/Web/JavaScript/Guide/Einführung /de/docs/Web/JavaScript/Guide/Introduction @@ -833,7 +817,6 @@ /de/docs/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /de/docs/WebSockets /de/docs/Web/API/WebSockets_API /de/docs/WebSockets/Writing_WebSocket_servers /de/docs/Web/API/WebSockets_API/Writing_WebSocket_servers -/de/docs/Web_Development/Mobile /de/docs/Web/Guide/Mobile /de/docs/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /de/docs/Werkzeuge /de/docs/Tools /de/docs/XML_Einführung /de/docs/Web/XML/XML_introduction diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index b4e2fe004b..8613fb3af6 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -1118,12 +1118,6 @@ "hpkainz" ] }, - "Learn/CSS/Building_blocks/Values_and_units": { - "modified": "2020-07-16T22:28:56.210Z", - "contributors": [ - "GiovanniHD201E" - ] - }, "Learn/CSS/CSS_layout": { "modified": "2020-08-05T14:18:54.916Z", "contributors": [ @@ -1174,13 +1168,6 @@ "Learn/Common_questions": { "modified": "2020-07-16T22:35:21.824Z" }, - "Learn/Common_questions/How_does_the_Internet_work": { - "modified": "2020-07-16T22:35:36.371Z", - "contributors": [ - "frankwinter", - "NetiHeft" - ] - }, "Learn/Common_questions/Upload_files_to_a_web_server": { "modified": "2020-07-16T22:35:41.440Z", "contributors": [ @@ -1413,12 +1400,6 @@ "PercyGitarrist" ] }, - "Learn/HTML/Tables/Basics": { - "modified": "2020-07-16T22:25:19.143Z", - "contributors": [ - "GiovanniHD201E" - ] - }, "Learn/JavaScript": { "modified": "2020-07-16T22:29:37.369Z", "contributors": [ @@ -1432,13 +1413,6 @@ "Osslack" ] }, - "Learn/JavaScript/Building_blocks/Events": { - "modified": "2020-07-16T22:31:36.524Z", - "contributors": [ - "kaip-e", - "GiovanniHD201E" - ] - }, "Learn/JavaScript/First_steps": { "modified": "2020-07-16T22:29:48.847Z", "contributors": [ @@ -1465,13 +1439,6 @@ "Mugges" ] }, - "Learn/JavaScript/First_steps/Variables": { - "modified": "2020-07-16T22:29:58.071Z", - "contributors": [ - "felix23.fn", - "mermolaev" - ] - }, "Learn/JavaScript/First_steps/What_is_JavaScript": { "modified": "2020-09-29T09:38:57.543Z", "contributors": [ @@ -1499,12 +1466,6 @@ "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": [ @@ -1539,12 +1500,6 @@ "Steffen1998" ] }, - "Learn/Server-side/Express_Nodejs/mongoose": { - "modified": "2020-07-16T22:38:19.573Z", - "contributors": [ - "Chorris" - ] - }, "Learn/Server-side/First_steps": { "modified": "2020-07-16T22:36:07.662Z", "contributors": [ @@ -1552,13 +1507,6 @@ "Dschubba" ] }, - "Learn/Server-side/First_steps/Introduction": { - "modified": "2020-07-16T22:36:12.624Z", - "contributors": [ - "NetiHeft", - "Dschubba" - ] - }, "Learn/Tools_and_testing": { "modified": "2020-07-16T22:38:53.810Z", "contributors": [ @@ -1566,12 +1514,6 @@ "alex_hammerschmied" ] }, - "Learn/Tools_and_testing/Cross_browser_testing": { - "modified": "2020-07-16T22:38:59.366Z", - "contributors": [ - "wbamberg" - ] - }, "MDN": { "modified": "2019-09-10T15:39:15.802Z", "contributors": [ @@ -1656,15 +1598,6 @@ "Tutz" ] }, - "MDN/Contribute/Howto/Document_a_CSS_property": { - "modified": "2020-02-19T18:56:54.852Z", - "contributors": [ - "jswisher", - "SphinxKnight", - "wbamberg", - "teoli" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2019-07-04T23:25:18.289Z", "contributors": [ @@ -1687,19 +1620,6 @@ "Sheppy" ] }, - "MDN/Guidelines/Writing_style_guide": { - "modified": "2020-09-30T15:28:44.875Z", - "contributors": [ - "chrisdavidmills", - "stephanduesterhoeft", - "jswisher", - "Dschubba", - "wbamberg", - "Jeremie", - "PaddyKfg", - "Montana7755" - ] - }, "MDN/Structures": { "modified": "2020-09-30T09:04:48.225Z", "contributors": [ @@ -1808,12 +1728,6 @@ "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": [ @@ -1821,12 +1735,6 @@ "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": [ @@ -1851,12 +1759,6 @@ "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": [ @@ -1909,19 +1811,6 @@ "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/Firefox": { "modified": "2020-01-18T12:42:37.514Z", "contributors": [ @@ -2011,14 +1900,6 @@ "niels" ] }, - "Mozilla/Firefox/Releases/3.6": { - "modified": "2019-12-13T20:33:15.876Z", - "contributors": [ - "wbamberg", - "SphinxKnight", - "Timmi" - ] - }, "Mozilla/Firefox/Releases/3/Updating_extensions": { "modified": "2019-12-13T20:33:28.025Z", "contributors": [ @@ -2046,14 +1927,6 @@ "barning" ] }, - "Mozilla/Firefox/Releases/47": { - "modified": "2019-03-23T22:30:31.890Z", - "contributors": [ - "wbamberg", - "kdex", - "Schwarzer-Bob" - ] - }, "Mozilla/Firefox/Releases/5": { "modified": "2020-12-11T05:30:36.741Z", "contributors": [ @@ -2081,19 +1954,6 @@ "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" - ] - }, "Tools": { "modified": "2020-07-16T22:44:14.027Z", "contributors": [ @@ -2135,13 +1995,6 @@ "hellschu" ] }, - "Tools/Browser_Console": { - "modified": "2020-07-16T22:35:42.070Z", - "contributors": [ - "wbamberg", - "atze79" - ] - }, "Tools/Browser_Toolbox": { "modified": "2020-07-16T22:35:55.309Z", "contributors": [ @@ -2178,12 +2031,6 @@ "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": [ @@ -2251,13 +2098,6 @@ "sidgan" ] }, - "Tools/Page_Inspector/How_to/Edit_fonts": { - "modified": "2020-08-13T20:23:50.743Z", - "contributors": [ - "cama240601", - "GiovanniHD201E" - ] - }, "Tools/Page_Inspector/How_to/Examine_event_listeners": { "modified": "2020-07-16T22:34:35.556Z", "contributors": [ @@ -2273,14 +2113,6 @@ "Micky261" ] }, - "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": [ @@ -2304,12 +2136,6 @@ "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": [ @@ -2342,12 +2168,6 @@ "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": [ @@ -2355,18 +2175,6 @@ "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": [ @@ -2401,12 +2209,6 @@ "mherczegh" ] }, - "Tools/about:debugging": { - "modified": "2020-08-16T17:45:15.524Z", - "contributors": [ - "papacemal" - ] - }, "Web": { "modified": "2019-09-19T09:01:12.041Z", "contributors": [ @@ -2443,21 +2245,6 @@ "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/AudioDestinationNode": { "modified": "2019-03-23T22:30:19.717Z", "contributors": [ @@ -2608,12 +2395,6 @@ "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": [ @@ -3238,12 +3019,6 @@ "nexus511" ] }, - "Web/API/EventTarget": { - "modified": "2019-03-23T22:15:39.970Z", - "contributors": [ - "kamoroso94" - ] - }, "Web/API/FederatedCredential": { "modified": "2019-03-23T22:07:15.338Z", "contributors": [ @@ -3288,13 +3063,6 @@ "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": [ @@ -3858,12 +3626,6 @@ "PixelSnake" ] }, - "Web/API/RTCPeerConnection": { - "modified": "2019-03-23T22:39:31.626Z", - "contributors": [ - "TheA13X" - ] - }, "Web/API/RTCRtpTransceiver": { "modified": "2020-10-15T22:26:06.821Z", "contributors": [ @@ -4227,13 +3989,6 @@ "otde2016" ] }, - "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": [ @@ -4586,12 +4341,6 @@ "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/CSS": { "modified": "2020-12-03T15:50:42.872Z", "contributors": [ @@ -4960,12 +4709,6 @@ "Johuspect" ] }, - "Web/CSS/::placeholder": { - "modified": "2020-10-15T22:16:04.444Z", - "contributors": [ - "sklicek" - ] - }, "Web/CSS/::selection": { "modified": "2020-10-15T21:28:39.218Z", "contributors": [ @@ -5775,12 +5518,6 @@ "Claas" ] }, - "Web/CSS/CSS_Values_and_Units": { - "modified": "2020-12-11T17:02:10.559Z", - "contributors": [ - "Johuspect" - ] - }, "Web/CSS/CSS_Writing_Modes": { "modified": "2019-03-23T22:44:48.500Z", "contributors": [ @@ -5808,12 +5545,6 @@ "Sebastianz" ] }, - "Web/CSS/Containing_block": { - "modified": "2020-12-14T07:10:36.967Z", - "contributors": [ - "Johuspect" - ] - }, "Web/CSS/ID_selectors": { "modified": "2020-10-15T21:41:21.317Z", "contributors": [ @@ -5846,28 +5577,6 @@ "teoli" ] }, - "Web/CSS/Media_Queries/Testing_media_queries": { - "modified": "2020-12-14T11:23:36.591Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility": { - "modified": "2020-12-14T11:28:47.462Z", - "contributors": [ - "Johuspect" - ] - }, - "Web/CSS/Media_Queries/Using_media_queries": { - "modified": "2020-12-14T11:35:39.985Z", - "contributors": [ - "Johuspect", - "Sebastianz", - "mrstork", - "malayaleecoder", - "teoli" - ] - }, "Web/CSS/Mozilla_Extensions": { "modified": "2019-03-24T00:14:14.332Z", "contributors": [ @@ -5937,12 +5646,6 @@ "The Witcher" ] }, - "Web/CSS/Shorthand_properties": { - "modified": "2020-11-22T12:51:55.372Z", - "contributors": [ - "Johuspect" - ] - }, "Web/CSS/Specificity": { "modified": "2019-03-23T23:11:49.533Z", "contributors": [ @@ -6000,12 +5703,6 @@ "prayash" ] }, - "Web/CSS/Visual_formatting_model": { - "modified": "2020-12-14T11:39:39.796Z", - "contributors": [ - "Johuspect" - ] - }, "Web/CSS/WebKit_Extensions": { "modified": "2019-03-23T23:23:45.505Z", "contributors": [ @@ -6582,13 +6279,6 @@ "Michael2402" ] }, - "Web/CSS/box-decoration-break": { - "modified": "2020-10-15T21:39:28.136Z", - "contributors": [ - "SJW", - "teoli" - ] - }, "Web/CSS/box-flex": { "modified": "2020-10-15T21:40:01.205Z", "contributors": [ @@ -7360,12 +7050,6 @@ "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": [ @@ -7523,12 +7207,6 @@ "fscholz" ] }, - "Web/CSS/perspective-origin": { - "modified": "2020-12-14T11:42:27.157Z", - "contributors": [ - "Johuspect" - ] - }, "Web/CSS/pointer-events": { "modified": "2019-03-23T22:46:26.785Z", "contributors": [ @@ -8036,12 +7714,6 @@ "lxdiamond" ] }, - "Web/Guide/Mobile": { - "modified": "2019-03-23T23:29:04.325Z", - "contributors": [ - "wbamberg" - ] - }, "Web/HTML": { "modified": "2019-09-10T15:19:11.194Z", "contributors": [ @@ -8061,13 +7733,6 @@ "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": [ @@ -8137,15 +7802,6 @@ "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": [ @@ -8756,12 +8412,6 @@ "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": [ @@ -8908,12 +8558,6 @@ "sklicek" ] }, - "Web/HTML/Global_attributes/is": { - "modified": "2020-10-15T22:23:53.794Z", - "contributors": [ - "LoVo666" - ] - }, "Web/HTML/Global_attributes/lang": { "modified": "2020-10-15T21:51:21.501Z", "contributors": [ @@ -9080,12 +8724,6 @@ "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": [ @@ -9129,24 +8767,12 @@ "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": [ @@ -9598,12 +9224,6 @@ "schlagi123" ] }, - "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": [ @@ -12266,12 +11886,6 @@ "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": [ @@ -12471,12 +12085,6 @@ "florianb" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:12:22.680Z", - "contributors": [ - "jameshkramer" - ] - }, "Web/JavaScript/Reference/Global_Objects/Reflect": { "modified": "2020-10-15T22:13:20.309Z", "contributors": [ @@ -13468,12 +13076,6 @@ "yzanomi" ] }, - "Web/Manifest/short_name": { - "modified": "2020-10-15T22:31:31.945Z", - "contributors": [ - "kevin98" - ] - }, "Web/MathML": { "modified": "2019-03-23T22:48:05.789Z", "contributors": [ @@ -13925,13 +13527,6 @@ "M@d Man" ] }, - "Web/XPath/Introduction_to_using_XPath_in_JavaScript": { - "modified": "2019-03-23T22:12:16.123Z", - "contributors": [ - "chrisdavidmills", - "QClonesClan" - ] - }, "Web/XSLT": { "modified": "2019-03-24T00:03:43.722Z", "contributors": [ diff --git a/files/de/learn/common_questions/how_does_the_internet_work/index.html b/files/de/learn/common_questions/how_does_the_internet_work/index.html deleted file mode 100644 index e53bb596f3..0000000000 --- a/files/de/learn/common_questions/how_does_the_internet_work/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Wie das Internet funktioniert -slug: Learn/Common_questions/How_does_the_Internet_work -translation_of: Learn/Common_questions/How_does_the_Internet_work -original_slug: Learn/Common_questions/Wie_das_Internet_funktioniert ---- -
{{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/values_and_units/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 7cf48f86f7..0000000000 --- a/files/de/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Werte und Einheiten in CSS -slug: Learn/CSS/Building_blocks/Values_and_units -tags: - - CSS - - Einheiten - - Farbe - - Lernen - - Werte -translation_of: Learn/CSS/Building_blocks/Values_and_units -original_slug: Learn/CSS/Building_blocks/Werten_Einheiten ---- -
{{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/html/tables/basics/index.html b/files/de/learn/html/tables/basics/index.html deleted file mode 100644 index b162ed291d..0000000000 --- a/files/de/learn/html/tables/basics/index.html +++ /dev/null @@ -1,556 +0,0 @@ ---- -title: Grundtabellen in HTML -slug: Learn/HTML/Tables/Basics -translation_of: Learn/HTML/Tables/Basics -original_slug: Learn/HTML/Tables/Grund_tabelle_HTML ---- -
{{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/javascript/building_blocks/events/index.html b/files/de/learn/javascript/building_blocks/events/index.html deleted file mode 100644 index 88c8c66afd..0000000000 --- a/files/de/learn/javascript/building_blocks/events/index.html +++ /dev/null @@ -1,588 +0,0 @@ ---- -title: Einleitung der Ereignissen -slug: Learn/JavaScript/Building_blocks/Events -translation_of: Learn/JavaScript/Building_blocks/Events -original_slug: Learn/JavaScript/Bausteine/Ereignisse ---- -
{{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/first_steps/variables/index.html b/files/de/learn/javascript/first_steps/variables/index.html deleted file mode 100644 index d8906f7d02..0000000000 --- a/files/de/learn/javascript/first_steps/variables/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -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/objects/inheritance/index.html b/files/de/learn/javascript/objects/inheritance/index.html deleted file mode 100644 index 8eacfbcbfd..0000000000 --- a/files/de/learn/javascript/objects/inheritance/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -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/server-side/express_nodejs/mongoose/index.html b/files/de/learn/server-side/express_nodejs/mongoose/index.html deleted file mode 100644 index 7fb3b69ebe..0000000000 --- a/files/de/learn/server-side/express_nodejs/mongoose/index.html +++ /dev/null @@ -1,843 +0,0 @@ ---- -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/first_steps/introduction/index.html b/files/de/learn/server-side/first_steps/introduction/index.html deleted file mode 100644 index 48ab6570fc..0000000000 --- a/files/de/learn/server-side/first_steps/introduction/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Einführung auf der Serverseite -slug: Learn/Server-side/First_steps/Introduction -tags: - - Anfänger - - Einführung -translation_of: Learn/Server-side/First_steps/Introduction -original_slug: Learn/Server-side/Erste_Schritte/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/tools_and_testing/cross_browser_testing/index.html b/files/de/learn/tools_and_testing/cross_browser_testing/index.html deleted file mode 100644 index c92e094d0a..0000000000 --- a/files/de/learn/tools_and_testing/cross_browser_testing/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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/mdn/contribute/howto/document_a_css_property/index.html b/files/de/mdn/contribute/howto/document_a_css_property/index.html deleted file mode 100644 index 3270d75064..0000000000 --- a/files/de/mdn/contribute/howto/document_a_css_property/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -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/guidelines/writing_style_guide/index.html b/files/de/mdn/guidelines/writing_style_guide/index.html deleted file mode 100644 index 0771ddb68a..0000000000 --- a/files/de/mdn/guidelines/writing_style_guide/index.html +++ /dev/null @@ -1,561 +0,0 @@ ---- -title: MDN style guide -slug: MDN/Guidelines/Writing_style_guide -translation_of: MDN/Guidelines/Writing_style_guide -original_slug: MDN/Guidelines/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 Matrix 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/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html b/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html deleted file mode 100644 index 4bf68ba30f..0000000000 --- a/files/de/mozilla/add-ons/webextensions/api/browseraction/setpopup/index.html +++ /dev/null @@ -1,134 +0,0 @@ ---- -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/downloads/index.html b/files/de/mozilla/add-ons/webextensions/api/downloads/index.html deleted file mode 100644 index 7363cde811..0000000000 --- a/files/de/mozilla/add-ons/webextensions/api/downloads/index.html +++ /dev/null @@ -1,123 +0,0 @@ ---- -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/manifest.json/devtools_page/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html deleted file mode 100644 index 418571d80f..0000000000 --- a/files/de/mozilla/add-ons/webextensions/manifest.json/devtools_page/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -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/theme/index.html b/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html deleted file mode 100644 index 3f68335b18..0000000000 --- a/files/de/mozilla/add-ons/webextensions/manifest.json/theme/index.html +++ /dev/null @@ -1,1359 +0,0 @@ ---- -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 deleted file mode 100644 index 6c4694c922..0000000000 --- a/files/de/mozilla/add-ons/webextensions/match_patterns/index.html +++ /dev/null @@ -1,430 +0,0 @@ ---- -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/firefox/releases/3.6/index.html b/files/de/mozilla/firefox/releases/3.6/index.html deleted file mode 100644 index dcd0edcee8..0000000000 --- a/files/de/mozilla/firefox/releases/3.6/index.html +++ /dev/null @@ -1,301 +0,0 @@ ---- -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/47/index.html b/files/de/mozilla/firefox/releases/47/index.html deleted file mode 100644 index cf76445536..0000000000 --- a/files/de/mozilla/firefox/releases/47/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -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/60/index.html b/files/de/mozilla/firefox/releases/60/index.html deleted file mode 100644 index 2d75e69ac2..0000000000 --- a/files/de/mozilla/firefox/releases/60/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -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 deleted file mode 100644 index 8a5c4fa572..0000000000 --- a/files/de/mozilla/firefox/releases/68/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -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/tools/about_colon_debugging/index.html b/files/de/tools/about_colon_debugging/index.html deleted file mode 100644 index a342b78ee8..0000000000 --- a/files/de/tools/about_colon_debugging/index.html +++ /dev/null @@ -1,252 +0,0 @@ ---- -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/browser_console/index.html b/files/de/tools/browser_console/index.html deleted file mode 100644 index 39d8c889ec..0000000000 --- a/files/de/tools/browser_console/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -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/debugger/how_to/use_a_source_map/index.html b/files/de/tools/debugger/how_to/use_a_source_map/index.html deleted file mode 100644 index db733cd8f2..0000000000 --- a/files/de/tools/debugger/how_to/use_a_source_map/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -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/page_inspector/how_to/edit_fonts/index.html b/files/de/tools/page_inspector/how_to/edit_fonts/index.html deleted file mode 100644 index 36432b5afa..0000000000 --- a/files/de/tools/page_inspector/how_to/edit_fonts/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Schriftarten Bearbeitung -slug: Tools/Page_Inspector/How_to/Edit_fonts -translation_of: Tools/Page_Inspector/How_to/Edit_fonts -original_slug: Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung ---- -
{{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 deleted file mode 100644 index 7fca9a3167..0000000000 --- a/files/de/tools/paint_flashing_tool/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -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/remote_debugging/debugging_firefox_desktop/index.html b/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html deleted file mode 100644 index 0b90f7db95..0000000000 --- a/files/de/tools/remote_debugging/debugging_firefox_desktop/index.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -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/storage_inspector/cache_storage/index.html b/files/de/tools/storage_inspector/cache_storage/index.html deleted file mode 100644 index b8411a08dd..0000000000 --- a/files/de/tools/storage_inspector/cache_storage/index.html +++ /dev/null @@ -1,15 +0,0 @@ ---- -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/indexeddb/index.html b/files/de/tools/storage_inspector/indexeddb/index.html deleted file mode 100644 index 2ede236480..0000000000 --- a/files/de/tools/storage_inspector/indexeddb/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -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 deleted file mode 100644 index 464345892a..0000000000 --- a/files/de/tools/storage_inspector/local_storage_session_storage/index.html +++ /dev/null @@ -1,20 +0,0 @@ ---- -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/web/accessibility/understanding_wcag/perceivable/index.html b/files/de/web/accessibility/understanding_wcag/perceivable/index.html deleted file mode 100644 index e8059d8fca..0000000000 --- a/files/de/web/accessibility/understanding_wcag/perceivable/index.html +++ /dev/null @@ -1,359 +0,0 @@ ---- -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/animationevent/index.html b/files/de/web/api/animationevent/index.html deleted file mode 100644 index 7bd808e0ca..0000000000 --- a/files/de/web/api/animationevent/index.html +++ /dev/null @@ -1,190 +0,0 @@ ---- -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/index.html b/files/de/web/api/audiocontext/index.html deleted file mode 100644 index cc2c2db92e..0000000000 --- a/files/de/web/api/audiocontext/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -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/canvasrenderingcontext2d/setlinedash/index.html b/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html deleted file mode 100644 index 38aadbbfe3..0000000000 --- a/files/de/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -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:

- - - -

{{ 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/eventtarget/index.html b/files/de/web/api/eventtarget/index.html deleted file mode 100644 index 3ed264119e..0000000000 --- a/files/de/web/api/eventtarget/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -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/file/getastext/index.html b/files/de/web/api/file/getastext/index.html deleted file mode 100644 index fefda6647a..0000000000 --- a/files/de/web/api/file/getastext/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -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/rtcpeerconnection/index.html b/files/de/web/api/rtcpeerconnection/index.html deleted file mode 100644 index df67ef624c..0000000000 --- a/files/de/web/api/rtcpeerconnection/index.html +++ /dev/null @@ -1,379 +0,0 @@ ---- -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/webxr_device_api/index.html b/files/de/web/api/webxr_device_api/index.html deleted file mode 100644 index 69e10d7d3b..0000000000 --- a/files/de/web/api/webxr_device_api/index.html +++ /dev/null @@ -1,298 +0,0 @@ ---- -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/css/_doublecolon_placeholder/index.html b/files/de/web/css/_doublecolon_placeholder/index.html deleted file mode 100644 index 7f10c944d4..0000000000 --- a/files/de/web/css/_doublecolon_placeholder/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -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/box-decoration-break/index.html b/files/de/web/css/box-decoration-break/index.html deleted file mode 100644 index 1aaf5b37d0..0000000000 --- a/files/de/web/css/box-decoration-break/index.html +++ /dev/null @@ -1,136 +0,0 @@ ---- -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/containing_block/index.html b/files/de/web/css/containing_block/index.html deleted file mode 100644 index 94577e99cc..0000000000 --- a/files/de/web/css/containing_block/index.html +++ /dev/null @@ -1,258 +0,0 @@ ---- -title: Layout und der enthaltende Block -slug: Web/CSS/Containing_block -translation_of: Web/CSS/Containing_block ---- -
{{cssref}}
- -

The size and position of an element are often impacted by its containing block. Most often, the containing block is the content area of an element's nearest block-level ancestor, but this is not always the case. In this article, we examine the factors that determine an element's containing block.

- -

When a user agent (such as your browser) lays out a document, it generates a box for every element. Each box is divided into four areas:

- -
    -
  1. Content area
    2. -
  2. Padding area
    3. -
  3. Border area
    4. -
  4. Margin area
    5. -
- -

Diagram of the box model

- -

Many developers believe that the containing block of an element is always the content area of its parent, but that isn't necessarily true. Let's investigate the factors that determine what an element's containing block is.

- -

Effects of the containing block

- -

Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.

- -

The size and position of an element are often impacted by its containing block. Percentage values that are applied to the {{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and offset properties of an absolutely positioned element (i.e., which has its {{cssxref("position")}} set to absolute or fixed) are computed from the element's containing block.

- -

Identifying the containing block

- -

The process for identifying the containing block depends entirely on the value of the element's {{cssxref("position")}} property:

- -
    -
  1. If the position property is static, relative, or sticky, the containing block is formed by the edge of the content box of the nearest ancestor element that is either a block container (such as an inline-block, block, or list-item element) or establishes a formatting context (such as a table container, flex container, grid container, or the block container itself).
    2. -
  2. If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).
    3. -
  3. If the position property is fixed, the containing block is established by the {{glossary("viewport")}} (in the case of continuous media) or the page area (in the case of paged media).
    4. -
  4. If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following: -
      -
    1. A {{cssxref("transform")}} or {{cssxref("perspective")}} value other than none
      2. -
    2. A {{cssxref("will-change")}} value of transform or perspective
      3. -
    3. A {{cssxref("filter")}} value other than none or a will-change value of filter (only works on Firefox).
      4. -
    4. A {{cssxref("contain")}} value of paint (e.g. contain: paint;)
      5. -
    -
    5. -
- -
-

Note: The containing block in which the root element ({{HTMLElement("html")}}) resides is a rectangle called the initial containing block. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).

-
- -

Calculating percentage values from the containing block

- -

As noted above, when certain properties are given a percentage value, the computed value depends on the element's containing block. The properties that work this way are box model properties and offset properties:

- -
    -
  1. The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the height of the containing block.
    2. -
  2. The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the width of the containing block.
    3. -
- -

Some examples

- -

The HTML code for all our examples is:

- -
<body>
-  <section>
-    <p>This is a paragraph!</p>
-  </section>
-</body>
-
- -

Only the CSS is altered in each instance below.

- -

Example 1

- -

In this example, the paragraph is statically positioned, so its containing block is {{HTMLElement("section")}} because it's the nearest ancestor that is a block container.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: block;
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  width: 50%;   /* == 400px * .5 = 200px */
-  height: 25%;  /* == 160px * .25 = 40px */
-  margin: 5%;   /* == 400px * .05 = 20px */
-  padding: 5%;  /* == 400px * .05 = 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Example_1','100%','300')}}

- -

Example 2

- -

In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <section> is not a block container (because of display: inline) and doesn’t establish a formatting context.

- - - -
body {
-  background: beige;
-}
-
-section {
-  display: inline;
-  background: lightgray;
-}
-
-p {
-  width: 50%;     /* == half the body's width */
-  height: 200px;  /* Note: a percentage would be 0 */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Example_2','100%','300')}}

- -

Example 3

- -

In this example, the paragraph's containing block is <section> because the latter's position is absolute. The paragraph's percentage values are affected by the padding of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were border-box this would not be the case.

- - - -
body {
-  background: beige;
-}
-
-section {
-  position: absolute;
-  left: 30px;
-  top: 30px;
-  width: 400px;
-  height: 160px;
-  padding: 30px 20px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  width: 50%;   /* == (400px + 20px + 20px) * .5 = 220px */
-  height: 25%;  /* == (160px + 30px + 30px) * .25 = 55px */
-  margin: 5%;   /* == (400px + 20px + 20px) * .05 = 22px */
-  padding: 5%;  /* == (400px + 20px + 20px) * .05 = 22px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Example_3','100%','300')}}

- -

Example 4

- -

In this example, the paragraph's position is fixed, so its containing block is the initial containing block (on screens, the viewport). Thus, the paragraph's dimensions change based on the size of the browser window.

- - - -
body {
-  background: beige;
-}
-
-section {
-  width: 400px;
-  height: 480px;
-  margin: 30px;
-  padding: 15px;
-  background: lightgray;
-}
-
-p {
-  position: fixed;
-  width: 50%;   /* == (50vw - (width of vertical scrollbar)) */
-  height: 50%;  /* == (50vh - (height of horizontal scrollbar)) */
-  margin: 5%;   /* == (5vw - (width of vertical scrollbar)) */
-  padding: 5%;  /* == (5vw - (width of vertical scrollbar)) */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Example_4','100%','300')}}

- -

Example 5

- -

In this example, the paragraph's position is absolute, so its containing block is <section>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't none.

- - - -
body {
-  background: beige;
-}
-
-section {
-  transform: rotate(0deg);
-  width: 400px;
-  height: 160px;
-  background: lightgray;
-}
-
-p {
-  position: absolute;
-  left: 80px;
-  top: 30px;
-  width: 50%;   /* == 200px */
-  height: 25%;  /* == 40px */
-  margin: 5%;   /* == 20px */
-  padding: 5%;  /* == 20px */
-  background: cyan;
-}
-
- -

{{EmbedLiveSample('Example_5','100%','300')}}

- -

See also

- - diff --git a/files/de/web/css/css_values_and_units/index.html b/files/de/web/css/css_values_and_units/index.html deleted file mode 100644 index 7cde234d24..0000000000 --- a/files/de/web/css/css_values_and_units/index.html +++ /dev/null @@ -1,493 +0,0 @@ ---- -title: CSS values and units -slug: Web/CSS/CSS_Values_and_Units -translation_of: Web/CSS/CSS_Values_and_Units ---- -
{{CSSRef}}
- -

Jede CSS declaration includes a property / value pair. Depending on the property, the value can include a single integer or keyword, to a series of keywords and values with or without units. There are a common set of data types -- values and units -- that CSS properties accept. Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.

- -

Textual data types

- - - -

Text data types are either <string>, a quoted series of characters, or an <ident>, a "CSS Identifier" which is an unquoted string. A <string> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <ident> or <custom-ident>, must be unquoted.

- -

In the CSS specifications, values that can be defined by the web developer, like keyframe animations, font-family names, or grid areas are listed as a  {{cssxref("<custom-ident>")}}, {{cssxref("<string>")}}, or both.

- -

When both quoted and unquoted user defined text values are permitted, the specification will list <custom-ident> | <string>, meaning quotes are optional, such as is the case with animation names:

- -
@keyframe validIdent {
-  /* keyframes go here */
-}
-@keyframe 'validString' {
-  /* keyframes go here */
-}
- -

Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <custom-ident>, so if we had a grid area named content we would use it without quotes:

- -
.item {
-  grid-area: content;
-}
-
- -

In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:

- -
.item::after {
-    content: "This is my content.";
-}
-
- -

While you can generally create any name you want, including using emojis, the identifier can't be none, unset, initial, or inherit, start with a digit or two dashes, and generally you don't want it to be any other pre-defined CSS keyword. See the {{cssxref("<custom-ident>")}} and {{cssxref("<string>")}} reference pages for more details.

- -

Pre-defined keyword values

- -

Pre-defined keywords are text values defined by the specification for that property. These keywords are also CSS Identifiers and are therefore used without quotes.

- -

When viewing CSS property value syntax in a CSS specification or the MDN property page, allowable keywords will be listed in the following form. The following values are the pre-defined keyword values allowed for {{cssxref("float")}}.

- -
left | right | none | inline-start | inline-end
- -

Such values are used without quotes:

- -
.box {
-    float: left;
-}
-
- -

CSS-wide values

- -

In addition to the pre-defined keywords that are part of the specification for a property, all CSS properties accept the CSS-wide property values {{cssxref("initial")}}, {{cssxref("inherit")}}, and {{cssxref("unset")}}, which explicitly specify defaulting behaviors.

- -

The initial keyword represents the value specified as the property’s initial value. The inherit keyword represents the computed value of the property on the element’s parent, provided it is inherited.

- -

The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not.

- -

A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.

- -

URLs

- -

A {{cssxref("<url>")}} type uses functional notation, which accepts a <string> that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.

- -
.box {
-  background-image: url("images/my-background.png");
-}
-
-.box {
-  background-image: url("https://www.exammple.com/images/my-background.png");
-}
-
- -

The parameter for url() can be either quoted or unquoted. If unquoted, it is parsed as a <url-token>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}}  for more information.

- -

Numeric data types

- - - -

Integers

- -

An integer is one or more decimal digits, 0 through 9, such as 1024 or -55. An integer may be preceded by a + or - symbol, with no space between the symbol and the integer.

- -

Numbers

- -

A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example 0.255, 128 or -1.2. Numbers may also be preceded by a + or - symbol.

- -

Dimensions

- -

A {{cssxref("<dimension>")}} is a <number> with a unit attached to it, for example 45deg, 100ms, or 10px. The attached unit identifier is case insensitive. There is never a space or any other characters between a the number and the unit identifier: i.e. 1 cm is not valid.

- -

CSS uses dimensions to specify:

- - - -

These are all covered in subsections below.

- -

Distance units

- -

Where a distance unit, also known as a length, is allowed as a value for a property, this is described as the {{cssxref("<length>")}} type. There are two types of lengths in CSS: relative and absolute.

- -

Relative length units specify a length in relation to something else. For example, em is relative to the font size on the element and vh is relative to the viewport height.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Relative length units

-
UnitRelative to
emFont size of the element.
exx-height of the element's font.
capCap height (the nominal height of capital letters) of the element's font.
chAverage character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.
icAverage character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.
remFont size of the root element.
lhLine height of the element.
rlhLine height of the root element.
vw1% of viewport's width.
vh1% of viewport's height.
vi1% of viewport's size in the root element's inline axis.
vb1% of viewport's size in the root element's block axis.
vmin1% of viewport's smaller dimension.
vmax1% of viewport's larger dimension.
- -

Absolute length units are fixed to a physical length: either an inch or a centimeter. Many of these units are therefore more useful when the output is a fixed size media, such as print. For example, mm is a physical millimeter, 1/10th of a centimeter.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

Absolute length units

-
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/16th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
- -

When including a length value, if the length is 0, the unit identifier is not required. Otherwise, the unit identifier is required, is case insensitive, and must come immediately after the numeric part of the value, with no space in-between.

- -

Angle units

- -

Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitNameDescription
degDegreesThere are 360 degrees in a full circle.
gradGradiansThere are 400 gradians in a full circle.
radRadiansThere are 2π radians in a full circle.
turnTurnsThere is 1 turn in a full circle.
- -

Time units

- -

Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the s or ms -- is required. It accepts the following values.

- - - - - - - - - - - - - - - - - - - - - -
UnitNameDescription
sSeconds
msMillisecondsThere are 1,000 milliseconds in a second.
- -

Frequency units

- -

Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.

- - - - - - - - - - - - - - - - - - - - - -
UnitNameDescription
HzHertzRepresents the number of occurrences per second.
kHzKiloHertzA kiloHertz is 1000 Hertz.
- -

1Hz, which can also be written as 1hz or 1HZ, is one cycle per second.

- -

Resolution unit

- -

Resolution units are represented by the type {{cssxref("<resolution>")}}. They represent the size of a single dot in a graphical representation, such as a screen, by indicating how many of these dots fit in a CSS inch, centimeter, or pixel. It accepts the following values:

- - - - - - - - - - - - - - - - - - - - - - -
UnitDescription
dpiDots per inch.
dpcmDots per centimetre.
dppx, xDots per px unit.
- -

Percentages

- -

A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.

- -

Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property of the same element, the value of a property of an ancestor element, a measurement of a containing block, or something else.

- -

As an example, if you specify the {{cssxref("width")}} of a box as a percentage, it refers to the percentage of the box's parent's computed width:

- -
.box {
-  width: 50%;
-}
- -

Mixing percentages and dimensions

- -

Some properties accept a dimension that could be either one of two types, for example a <length> or a <percentage>. In this case the allowed value is detailed in the specification as a combination unit, e.g. {{cssxref("<length-percentage>")}}. Other possible combinations are as follows:

- - - -

Special data types (defined in other specs)

- - - -

Color

- -

The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the CSS Color Module.

- -

Image

- -

The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the CSS Image Values and Replaced Content Module.

- -

Position

- -

The {{cssxref("<position>")}} type defines 2D positioning of an object inside a positioning area, for example a background image inside a container. This type is interpreted as a  {{cssxref("background-position")}} and therefore specified in the CSS Backgrounds and Borders specification.

- -

Functional notation

- - - -

Functional notation is a type of value that can represent more complex types or invoke special processing by CSS. The syntax starts with the name of the function immediately followed by a left parenthesis ( followed by the argument(s) to the notation followed by a right parenthesis ). Functions can take multiple arguments, which are formatted similarly to a CSS property value.

- -

White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for min(), max() and clamp() functions.)

- -

Some legacy functional notations such as rgba() use commas, but generally commas are only used to separate items in a list. If a comma is used to separate arguments, white space is optional before and after the comma.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS4 Values")}}{{Spec2("CSS4 Values")}}Adds the vi, vb, ic, cap, lh and rlh units.
- Adds the min(), max() and clamp() functional notation
- Adds toggle()
{{SpecName("CSS3 Values")}}{{Spec2("CSS3 Values")}}Adds calc(), ch, rem, vw, vw, vmin, vmax, Q
{{SpecName("CSS4 Colors")}}{{Spec2("CSS4 Colors")}}Adds commaless syntaxes for the rgb(), rgba(), hsl(), and hsla() functions. Allows alpha values in rgb() and hsl(), turning rgba() and hsla() into (deprecated) aliases for them.
- Adds color keyword rebeccapurple.
- Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.
- Adds hwb(), device-cmyk(), and color() functions.
{{SpecName("CSS3 Colors")}}{{Spec2("CSS3 Colors")}}Deprecates system-colors. Adds SVG colors. Adds the rgba(), hsl(), and hsla() functions.
{{SpecName("CSS4 Images")}}{{Spec2("CSS4 Images")}} -

Adds element(), image(), image-set(), conic-gradient()

-
{{SpecName("CSS3 Images")}}{{Spec2("CSS3 Images")}}Initial definition of image.
{{SpecName("CSS2.1")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1")}}{{Spec2("CSS1")}}Initial definition.
- -

See also

- - diff --git a/files/de/web/css/media_queries/testing_media_queries/index.html b/files/de/web/css/media_queries/testing_media_queries/index.html deleted file mode 100644 index c30abd2ccd..0000000000 --- a/files/de/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Media Queries programmatisch testen -slug: Web/CSS/Media_Queries/Testing_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries ---- -
{{cssref}}
- -

The {{Glossary("DOM")}} provides features that can test the results of a media query programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a MediaQueryList object, you can check the result of the query or receive notifications when the result changes.

- -

Creating a media query list

- -

Before you can evaluate the results of a media query, you need to create the MediaQueryList object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.

- -

For example, to set up a query list that determines if the device is in landscape or portrait orientation:

- -
const mediaQueryList = window.matchMedia("(orientation: portrait)");
-
- -

Checking the result of a query

- -

Once you've created your media query list, you can check the result of the query by looking at the value of its matches property:

- -
if (mediaQueryList.matches) {
-  /* The viewport is currently in portrait orientation */
-} else {
-  /* The viewport is not currently in portrait orientation, therefore landscape */
-}
-
- -

Receiving query notifications

- -

If you need to be aware of changes to the evaluated result of the query on an ongoing basis, it's more efficient to register a listener than to poll the query's result. To do this, call the addListener() method on the {{domxref("MediaQueryList")}} object, with a callback function to invoke when the media query status changes (e.g., the media query test goes from true to false):

- -
// Create the query list.
-const mediaQueryList = window.matchMedia("(orientation: portrait)");
-
-// Define a callback function for the event listener.
-function handleOrientationChange(mql) {
-  // ...
-}
-
-// Run the orientation change handler once.
-handleOrientationChange(mediaQueryList);
-
-// Add the callback function as a listener to the query list.
-mediaQueryList.addListener(handleOrientationChange);
-
- -

This code creates the orientation-testing media query list, then adds an event listener to it. After adding the listener, we also call the listener directly. This makes our listener perform adjustments based on the current device orientation; otherwise, our code might assume the device is in portrait mode at startup, even if it's actually in landscape mode.

- -

The handleOrientationChange() function would look at the result of the query and handle whatever we need to do on an orientation change:

- -
function handleOrientationChange(evt) {
-  if (evt.matches) {
-    /* The viewport is currently in portrait orientation */
-  } else {
-    /* The viewport is currently in landscape orientation */
-  }
-}
-
- -

Above, we define the parameter as evt — an event object. This makes sense because newer implementations of MediaQueryList handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an event object of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.

- -

This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the MediaQueryList by directly accessing it, or accessing the event object.

- -

Ending query notifications

- -

To stop receiving notifications about changes to the value of your media query, call removeListener() on the MediaQueryList, passing it the name of the previously-defined callback function:

- -
mediaQueryList.removeListener(handleOrientationChange);
-
- -

Browser compatibility

- -

MediaQueryList interface

- - - -

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

- -

See also

- - 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 deleted file mode 100644 index 77efb6a299..0000000000 --- a/files/de/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,644 +0,0 @@ ---- -title: Media Queries verwenden -slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - NeedsTranslation -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -
{{cssref}}
- -

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:

- - - -

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:

- - - -

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/media_queries/using_media_queries_for_accessibility/index.html b/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html deleted file mode 100644 index 004ff3a78e..0000000000 --- a/files/de/web/css/media_queries/using_media_queries_for_accessibility/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Verwendung von Media Queries für Barrierefreiheit -slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility -translation_of: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility ---- -

Media Queries can also be used to help users with disabilities understand your website better.

- -

Reduced Motion

- -

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

- -

Also, this method of switching animation off according to the user's preference can also benefit users with low battery or low-end phones or computers.

- -

Syntax

- -
-
no-preference
-
Indicates that the user has made no preference known to the system.
-
reduce
-
Indicates that user has notified the system that they prefer an interface that minimizes the amount of movement or animation, preferably to the point where all non-essential movement is removed.
-
- -

Example

- -

This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.

- -

HTML

- -
<div class="animation">animated box</div>
-
- -

CSS

- -
.animation {
-  -webkit-animation: vibrate 0.3s linear infinite both;
-  animation: vibrate 0.3s linear infinite both;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .animation {
-    animation: none;
-  }
-}
-
- -

High Contrast Mode

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

The -ms-high-contrast CSS media feature is a Microsoft extension that describes whether the application is being displayed in high contrast mode, and with what color variation.

- -

This will help not only users with low vision and contrast sensitivity issues but also users that are working on a computer or phone with direct sunlight.

- -

Syntax

- -

The -ms-high-contrast media feature is specified as one of the following values.

- -

Values

- -
-
active
-
-

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.

-
-
black-on-white
-
-

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a black-on-white color variation.

-
-
white-on-black
-
-

Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with a white-on-black color variation.

-
-
- -

Example

- -

The following declarations will match applications that are being displayed in high contrast mode with any color variation, a black-on-white color variation, and a white-on-black color variation, respectively.

- -
@media screen and (-ms-high-contrast: active) {
-  /* All high contrast styling rules */
-}
-@media screen and (-ms-high-contrast: black-on-white) {
-  div { background-image: url('image-bw.png'); }
-}
-@media screen and (-ms-high-contrast: white-on-black) {
-  div { background-image: url('image-wb.png'); }
-}
-
diff --git a/files/de/web/css/object-position/index.html b/files/de/web/css/object-position/index.html deleted file mode 100644 index d42372ad90..0000000000 --- a/files/de/web/css/object-position/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -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

- - diff --git a/files/de/web/css/perspective-origin/index.html b/files/de/web/css/perspective-origin/index.html deleted file mode 100644 index c1d0249b99..0000000000 --- a/files/de/web/css/perspective-origin/index.html +++ /dev/null @@ -1,391 +0,0 @@ ---- -title: perspective-origin -slug: Web/CSS/perspective-origin -translation_of: Web/CSS/perspective-origin ---- -
{{CSSRef}}
- -

Die CSS-Eigenschaft perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the {{cssxref("perspective")}} property.

- -
{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}
- - - -

The perspective-origin and {{cssxref('perspective')}} properties are attached to the parent of a child transformed in 3-dimensional space, unlike the perspective() transform function which is placed on the element being transformed.

- -

Syntax

- -
/* One-value syntax */
-perspective-origin: x-position;
-
-/* Two-value syntax */
-perspective-origin: x-position y-position;
-
-/* When both x-position and y-position are keywords,
-   the following is also valid */
-perspective-origin: y-position x-position;
-
-/* Global values */
-perspective-origin: inherit;
-perspective-origin: initial;
-perspective-origin: unset;
-
- -

Values

- -
-
x-position
-
Indicates the position of the abscissa of the vanishing point. It can have one of the following values: -
    -
  • {{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the width of the element. The value may be negative.
    • -
  • left, a keyword being a shortcut for the 0 length value.
    • -
  • center, a keyword being a shortcut for the 50% percentage value.
    • -
  • right, a keyword being a shortcut for the 100% percentage value.
    • -
-
-
y-position
-
Indicates the position of the ordinate of the vanishing point. It can have one of the following values: -
    -
  • {{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the height of the element. The value may be negative.
    • -
  • top, a keyword being a shortcut for the 0 length value.
    • -
  • center, a keyword being a shortcut for the 50% percentage value.
    • -
  • bottom, a keyword being a shortcut for the 100% percentage value.
    • -
-
-
- -

Formal definition

- -

{{cssinfo}}

- -

Formal syntax

- -{{csssyntax}} - -

Examples

- -

Changing the perspective origin

- -

This example shows cubes with popular perspective-origin values.

- -

HTML

- -
<section>
-
-<figure>
-  <figcaption><code>perspective-origin: top left;</code></figcaption>
-    <div class="container">
-     <div class="cube potl">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: top;</code></figcaption>
-   <div class="container">
-    <div class="cube potm">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: top right;</code></figcaption>
-  <div class="container">
-    <div class="cube potr">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: left;</code></figcaption>
-  <div class="container">
-    <div class="cube poml">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: 50% 50%;</code></figcaption>
-  <div class="container">
-    <div class="cube pomm">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: right;</code></figcaption>
-  <div class="container">
-    <div class="cube pomr">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: bottom left;</code></figcaption>
-  <div class="container">
-    <div class="cube pobl">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: bottom;</code></figcaption>
-  <div class="container">
-    <div class="cube pobm">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: bottom right;</code></figcaption>
-  <div class="container">
-    <div class="cube pobr">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: -200% -200%;</code></figcaption>
-  <div class="container">
-    <div class="cube po200200neg">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: 200% 200%;</code></figcaption>
-  <div class="container">
-    <div class="cube po200200pos">
-      <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>
-</figure>
-
-<figure>
-  <figcaption><code>perspective-origin: 200% -200%;</code></figcaption>
-  <div class="container">
-    <div class="cube po200200">
-      <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>
-</figure>
-
-</section>
-
- -

CSS

- -
/* perspective-origin values (unique per example) */
-.potl {
-  perspective-origin: top left;
-}
-.potm {
-  perspective-origin: top;
-}
-.potr {
-  perspective-origin: top right;
-}
-.poml {
-  perspective-origin: left;
-}
-.pomm {
-  perspective-origin: 50% 50%;
-}
-.pomr {
-  perspective-origin: right;
-}
-.pobl {
-  perspective-origin: bottom left;
-}
-.pobm {
-  perspective-origin: bottom;
-}
-.pobr {
-  perspective-origin: bottom right;
-}
-.po200200neg {
-  perspective-origin: -200% -200%;
-}
-.po200200pos {
-  perspective-origin: 200% 200%;
-}
-.po200200 {
-  perspective-origin: 200% -200%;
-}
-
-/* Define the container div, the cube div, and a generic face */
-.container {
-  width: 100px;
-  height: 100px;
-  margin: 24px;
-  border: none;
-}
-
-.cube {
-  width: 100%;
-  height: 100%;
-  backface-visibility: visible;
-  perspective: 300px;
-  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;
-}
-
-/* Define each face based on direction */
-.front {
-  background: rgba(0, 0, 0, 0.3);
-  transform: translateZ(50px);
-}
-.back {
-  background: rgba(0, 255, 0, 1);
-  color: black;
-  transform: rotateY(180deg) translateZ(50px);
-}
-.right {
-  background: rgba(196, 0, 0, 0.7);
-  transform: rotateY(90deg) translateZ(50px);
-}
-.left {
-  background: rgba(0, 0, 196, 0.7);
-  transform: rotateY(-90deg) translateZ(50px);
-}
-.top {
-  background: rgba(196, 196, 0, 0.7);
-  transform: rotateX(90deg) translateZ(50px);
-}
-.bottom {
-  background: rgba(196, 0, 196, 0.7);
-  transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* Make the layout a little nicer */
-section {
-  background-color: #EEE;
-  padding: 10px;
-  font-family: sans-serif;
-  text-align: left;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
- -

Result

- -

{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}

- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}{{Spec2('CSS Transforms 2')}}Initial definition.
- -

Browser compatibility

- -
- - -

{{Compat("css.properties.perspective-origin")}}

-
- -

See also

- - diff --git a/files/de/web/css/shorthand_properties/index.html b/files/de/web/css/shorthand_properties/index.html deleted file mode 100644 index f5fbfabc44..0000000000 --- a/files/de/web/css/shorthand_properties/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Kurzformat Eigenschaft -slug: Web/CSS/Shorthand_properties -translation_of: Web/CSS/Shorthand_properties -original_slug: Web/CSS/Kurzformat_Eigenschaft ---- -
{{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:

- - - -

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

- - diff --git a/files/de/web/css/visual_formatting_model/index.html b/files/de/web/css/visual_formatting_model/index.html deleted file mode 100644 index 01c9f8a5b9..0000000000 --- a/files/de/web/css/visual_formatting_model/index.html +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: CSS Visuelles Formatierungsmodell -slug: Web/CSS/Visual_formatting_model -translation_of: Web/CSS/Visual_formatting_model ---- -
{{CSSRef}}
- -

In CSS The Visual Formatting Model describes how user agents take the document tree, and process and display it for visual media. This includes {{glossary("continuous media")}} such as a computer screen and {{glossary("paged media")}} such as a book or document printed by browser print functions. Most of the information applies equally to continuous and paged media.

- -

In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by:

- - - -

Much of the information about the visual formatting model is defined in CSS2, however, various level 3 specifications have added to this information. When reading specifications you will often find references to the model as defined in CSS2, so an understanding of the model and the terms used to describe it in CSS2 is valuable when reading other layout specifications.

- -

In this document we define the model and introduce some of the related terms and concepts, linking to more specific pages on MDN for further details.

- -

The role of the viewport

- -

In continuous media, the {{glossary("viewport")}} is the viewing area of the browser window. User agents can change the layout of the page when the viewport size changes — for example, if you resize your window, or change the orientation of a mobile device.

- -

If the viewport is smaller than the size of the document then the user agent needs to offer a way to scroll to the parts of the document that are not displayed. We most often see this as scrolling in the block dimension — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the inline dimension too.

- -

Box generation

- -

Box generation is the part of the CSS visual formatting model that creates boxes from the document's elements. Generated boxes are of different types, which affect their visual formatting. The type of the box generated depends on the value of the CSS {{cssxref("display")}} property.

- -

Initially defined in CSS2, the display property is extended in the CSS Display Module Level 3. In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.

- -

CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the box tree, which represents the formatting structure of the rendered document. Each box in the box tree represents its corresponding element (or pseudo-element) in space and/or time on the canvas, while each text run in the box tree likewise represents the contents of its corresponding text nodes.

- -

Then, for each element, CSS generates zero or more boxes as specified by that element’s display property value.

- -
-

Note: Boxes are often referred to by their display type — e.g. a box generated by an element with display: block is called a "block box" or just a "block". Note however that block boxes, block-level boxes and box containers are all subtly different; see the {{anch("Block boxes")}} section below for more details.

-
- -

The principal box

- -

When an element generates one or more boxes, one of them is the principal box, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.

- -

Some elements may generate additional boxes in addition to the principal box, for example display: list-item generates more than one box (e.g. a principal block box and a child marker box). And some values (such as none or contents) cause the element and/or its descendants to not generate any boxes at all.

- -

Anonymous boxes

- -

An anonymous box is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare display: flex on a parent element, and directly inside there is a run of text not contained in another element. In order to fix the box tree, an anonymous box is created around that run of text. It will then behave as a flex item, however, it cannot be targeted and styled like a regular box because there is no element to target.

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}

- -

The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a <div>; in the middle of my string is a <p> element containing part of the text.

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}

- -

The string is split into three boxes in the box tree. The part of the string before the paragraph element is wrapped in an anonymous box, then we have the <p>, which generates a box, and then another anonymous box.

- -

Something to consider about these anonymous boxes is that they inherit styles from their direct parent, but you cannot change how they look by targeting the anonymous box. In my examples, I am using a direct child selector to target the children of the container. This does not change the anonymous boxes, as they are not a child of the parent block.

- -

Inline anonymous boxes are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <em></em>. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <em> element, then a final anonymous inline box. As with the anonymous block boxes, these anonymous inline boxes cannot be styled independently in the way the <em> can; they just inherit the styles of their container.

- -

Other formatting contexts also create anonymous boxes. Grid Layout behaves in the same way as the flexbox example above, turning strings of text into a grid item with an anonymous box. Multiple-column layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. Table layout will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with display: table-row.

- -

Line boxes

- -

Line boxes are the boxes that wrap each line of text. You can see the difference between line boxes and their containing block if you float an item and then follow it by a block that has a background color.

- -

In the following example, the line boxes following the floated <div> are shortened to wrap around the float. The background of the box runs behind the float, as the floated item has been taken out of flow.

- -

{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}

- -

Positioning schemes and in-flow and out-of-flow elements

- -

In CSS, a box may be laid out according to three positioning schemes — normal flow, floats, or absolute positioning.

- -

Normal flow

- -

In CSS, the normal flow includes block-level formatting of block boxes, inline-level formatting of inline boxes, and also includes relative and sticky positioning of block-level and inline-level boxes.

- -

Read more about flow layout in CSS.

- -

Floats

- -

In the float model, a box is first laid out according to the normal flow, then taken out of the flow and positioned, typically to the left or right. Content may flow along the side of a float.

- -

Find out more about floats.

- -

Absolute positioning

- -

In the absolute positioning model (which also includes fixed positioning), a box is removed from the normal flow entirely and assigned a position with respect to a containing block (which is the viewport in the case of fixed positioning).

- -

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out of the flow.

- -

Read about CSS Positioned Layout.

- -

Formatting contexts and the display property

- -

Boxes can be described as having an outer display type, which is block or inline. This outer display type refers to how the box behaves alongside other elements on the page.

- -

Boxes also have an inner display type, dictating how their children behave. For normal block and inline layout, or normal flow, this display type is flow. This means that the child elements will also be either block or inline.

- -

However, the inner display type might be something like grid or flex, in which case the direct children will display as a grid, or flex items. In such a case the element is described as creating a grid or flex formatting context. In many ways this is similar to a block formatting context, however, the children behave as flex or grid items rather than items in normal flow.

- -

The interactions between block-level and inline-level boxes are described in the MDN documentation for {{cssxref("display")}}.

- -

In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.

- - - -

Independent formatting contexts

- -

Elements either participate in the formating context of their containing block or establish an independent formatting context. A grid container, for example, establishes a new Grid Formatting Context for its children.

- -

Independent formatting contexts contain floats, and margins do not collapse across formatting context boundaries. Therefore, creating a new block formatting context can ensure that floats remain inside a box. Developers sometimes clear floats by changing the value of the {{cssxref("overflow")}} property, as this creates a new block formatting context. The newer value of display: flow-root creates a new block formatting context in order to gain the useful effects of this, without any unwanted issues caused by changing the value of overflow.

- -

Block boxes

- -

In specifications, block boxes, block-level boxes, and block containers are all referred to as block boxes in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.

- -

Block containers

- -

A block container either contains only inline-level boxes participating in an inline formatting context, or only block-level boxes participating in a block formatting context. For this reason, we see the behavior explained above, where anonymous boxes are introduced to ensure all of the items can participate in a block or inline formatting context. An element is a block container only if it contains block-level or inline-level boxes.

- -

Inline-level and block-level boxes

- -

These are the boxes contained inside the block container that are participating in inline or block layout, respectively.

- -

Block boxes

- -

A block box is a block-level box that is also a block container. As described in CSS display, it is possible for a box to be a block-level box, but not also a block container (it might be a flex or grid container for example).

- -

See also

- - diff --git a/files/de/web/guide/mobile/index.html b/files/de/web/guide/mobile/index.html deleted file mode 100644 index 11f17242c7..0000000000 --- a/files/de/web/guide/mobile/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -title: Mobile Web development -slug: Web/Guide/Mobile -tags: - - Mobile - - NeedsTranslation - - TopicStub - - Web Development -translation_of: Web/Guide/Mobile -translation_of_original: Web_Development/Mobile -original_slug: Web_Development/Mobile ---- -

Developing web sites to be viewed on mobile devices requires approaches that ensure a web site works as well on mobile devices as it does on desktop browsers. The following articles describe some of these approaches.

- diff --git a/files/de/web/html/applying_color/index.html b/files/de/web/html/applying_color/index.html deleted file mode 100644 index 3e39d7bbcf..0000000000 --- a/files/de/web/html/applying_color/index.html +++ /dev/null @@ -1,498 +0,0 @@ ---- -title: Applying color to HTML elements using CSS -slug: Web/HTML/Applying_color -tags: - - Beginner - - CSS - - CSS Colors - - Guide - - HTML - - HTML Colors - - HTML Styles - - Styling HTML - - color -translation_of: Web/HTML/Applying_color ---- -
{{HTMLRef}}
- -

Die Verwendung von Farben ist eine fundamentale Ausdrucksweise der Menschheit. Kinder experimentieren mit Farben, noch bevor sie zeichnen können. Vielleicht ist das der Grund, warum viele Leute zuerst mit Farben experimentieren wollen, wenn sie lernen, eine Webseite zu erstellen. Mit CSS gibt es viele Möglichkeiten, den HTML elements Farbe zu verleihen. Dieser Artikel ist eine Einführung, die jede Möglichkeit vorstellt, CSS Farben in HTML zu verwenden.

- -

Zum Glück ist das Hinzufügen von Farbe zu deinem HTML eigentlich wirklich easy und du kannst Farbe zu fast allem hinzufügen.

- -

Wir werden die meisten Dinge behandeln, die du wissen musst, wenn du Farbe verwendest, einschließlich einer {{anch("Dinge, die Farbe haben können", "list of what you can color and what CSS properties are involved")}}, {{anch("How to describe a color", "how you describe colors")}}, und wie man eigentlich {{anch("Using color", "use colors both in stylesheets and in scripts")}}. Wir werden uns auch anschauen, wie man {{anch("Letting the user picka color", "let the user pick a color")}}.

- -

Dann schließen wir mit einer kurzen Diskussion ab, wie man {{anch("Using color wisely", "use color wisely")}}: Wie man angemessene Farben auswählt und dabei auch die Bedürfnisse von Menschen mit unterschiedlichen visuellen Fähigkeiten im Auge behält

- -

Dinge, die Farbe haben können

- -

Einfach gesagt kann alles mögliche in HTML Farbe hinzugefügt werden. Stattdessen schauen wir deswegen auf die Dinge die in einem Element sind, wie beispielsweise Text oder Ränder (Borders) usw. Für jedes werden wir eine Liste von CSS Eigenschaften sehen, die ihnen Farbe verleihen können.

- -

Auf einer Grundebene definiert die {{cssxref("color")}} Eigenschaft den Vordergrund des Inhaltes eines HTML Elements und die {{cssxref("background-color")}} Eigenschaft definiert die Hintergrundfarbe eines Elements. Sie können auf fast jedem Element angewendet werden.

- -

Text

- -

Wo auch immer ein Element gerendert wurde sind diese Elemente dazu da, die Farbe des Textes, seinen Hintergrund oder Dekorationen des Textes festzulegen.

- -
-
{{cssxref("color")}}
-
Legt die Farbe von Text und text decorations fest (wie z. B. die Ergänzung von Über- oder Unterstrichen, durchgestrichene Linien, usw.)
-
{{cssxref("background-color")}}
-
Die Hintergrundfarbe des Textes.
-
{{cssxref("text-shadow")}}
-
Fügt einen Schatteneffekt zu Text hinzu. Unter den Optionen für den Schatten ist die Basisfarbe des Schatten (die dann verschwommen und dann mit dem Hintergrund "vermischt" (blended) wird, basierend auf die anderen Parameter). Gehen Sie auf {{SectionOnPage("/en-US/docs/Learn/CSS/Styling_text/Fundamentals", "Text drop shadows")}} um mehr darüber zu erfahren.
-
{{cssxref("text-decoration-color")}}
-
Als Standardeinstellung verwenden Textdekorationen (wie z. B. Unterstreichungen, Durchstreichungen, etc.) die color Eigenschaft als ihre Farbe. Jedoch können sie diese Einstellung überschreiben und eine andere Farbe mit der text-decoration-color Eigenschaft verwenden.
-
{{cssxref("text-emphasis-color")}}
-
The color to use when drawing emphasis symbols adjacent to each character in the text. This is used primarily when drawing text for East Asian languages.
-
{{cssxref("caret-color")}}
-
The color to use when drawing the {{Glossary("caret")}} (sometimes referred to as the text input cursor) within the element. This is only useful in elements that are editable, such as {{HTMLElement("input")}} and {{HTMLElement("textarea")}} or elements whose HTML {{htmlattrxref("contenteditable")}} attribute is set.
-
- -

Boxen

- -

Jedes Element ist eine Box mit irgendeiner Art von Inhalt, hat einen Hintergrund und eine Grenze (Border) zusätzlich zu irgendwelchen Inhalten, die die Box besitzt.

- -
-
{{anch("Borders")}}
-
Schauen Sie sich den Abschnitt {{anch("Borders")}} an für eine Liste von CSS Eigenschaften, die Sie benutzen können, um die Farbe der Grenze (Border) einer Box festzulegen.
-
{{cssxref("background-color")}}
-
Farbe auf Bereiche eines Elements anwenden, die keinen Inhalt im Vordergrund haben.
-
{{cssxref("column-rule-color")}}
-
Farbe auf Linien anwenden, die Textspalten trennen.
-
{{cssxref("outline-color")}}
-
The color to use when drawing an outline around the outside of the element. This outline is different from the border in that it doesn't get space set aside for it in the document (so it may overlap other content). It's generally used as a focus indicator, to show which element will receive input events.
-
- -

Ränder (Borders)

- -

Jedes Element kann einen Rand (border) um sich herum haben. A basic element border is a line drawn around the edges of the element's content. See {{SectionOnPage("/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model", "Box properties")}} to learn about the relationship between elements and their borders, and the article Styling borders using CSS to learn more about applying styles to borders.

- -

You can use the {{cssxref("border")}} shorthand property, which lets you configure everything about the border in one shot (including non-color features of borders, such as its width, style (solid, dashed, etc.), and so forth.

- -
-
{{cssxref("border-color")}}
-
Specifies a single color to use for every side of the element's border.
-
{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}
-
Lets you set the color of the corresponding side of the element's border.
-
{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}
-
With these, you can set the color used to draw the borders which are closest to the start and end of the block the border surrounds. In a left-to-right writing mode (such as the way English is written), the block start border is the top edge and the block end is the bottom. This differs from the inline start and end, which are the left and right edges (corresponding to where each line of text in the box begins and ends).
-
{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}
-
These let you color the edges of the border closest to to the beginning and the end of the start of lines of text within the box. Which side this is will vary depending on the {{cssxref("writing-mode")}}, {{cssxref("direction")}}, and {{cssxref("text-orientation")}} properties, which are typically (but not always) used to adjust text directionality based on the language being displayed. For example, if the box's text is being rendered right-to-left, then the border-inline-start-color is applied to the right side of the border.
-
- -

Andere Methoden um Farbe zu verwenden

- -

CSS ist nicht die einzige Webtechnologie, die Farbe unterstützt. Es gibt auch Grafiktechnologien die auf dem Web verfügbar sind und auch Farbe unterstützen.

- -
-
Die  HTML Canvas API
-
Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our Canvas tutorial to learn more.
-
SVG (Scalable Vector Graphics)
-
Lets you draw images using commands that draw specific shapes, patterns, and lines to produce an image. SVG commands are formatted as XML, and can be embedded directly into a web page or can be placed in he page using the {{HTMLElement("img")}} element, just like any other type of image.
-
WebGL
-
The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See Learn WebGL for 2D and 3D graphics to find out more.
-
- -

Wie man eine Farbe definiert

- -

In order to represent a color in CSS, you have to find a way to translate the analog concept of "color" into a digital form that a computer can use. This is typically done by breaking down the color into components, such as how much of each of a set of primary colors to mix together, or how bright to make the color. As such, there are several ways you can describe color in CSS.

- -

For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.

- -

Schlüsselwörter

- -

A set of standard color names have been defined, letting you use these keywords instead of numeric representations of colors if you choose to do so and there's a keyword representing the exact color you want to use. Color keywords include the standard primary and secondary colors (such as red, blue, or orange), shades of gray (from black to white, including colors like darkgray and lightgrey), and a variety of other blended colors including lightseagreen, cornflowerblue, and rebeccapurple.

- -

See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.

- -

RGB-Werte

- -

There are three ways to represent an RGB color in CSS.

- -

Hexadezimale String Notation

- -

Die Hexadezimale String Notation repräsentiert eine Farbe, indem sie hexadezimale Zeichen für jeden Farbkomponenten benutzt (rot, grün und blau). It may also include a fourth compoment: the alpha channel (or opacity). Each color component can be represented as a number between 0 and 255 (0x00 and 0xFF) or, optionally, as a number between 0 and 15 (0x0 and 0xF). All components must be specified using the same number of digits. If you use the single-digit notation, the final color is computed by using each component's digit twice; that is, "#D" becomes "#DD" when drawing.

- -

A color in hexadecimal string notation always begins with the character "#". After that come the hexadecimal digits of the color code. The string is case-insensitive.

- -
-
"#rrggbb"
-
Specifies a fully-opaque color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
-
"#rrggbbaa"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
-
"#rgb"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb.
-
"#rgba"
-
Specifies a color whose red component is the hexadecimal number 0xrr, green component is 0xgg, and blue component is 0xbb. The alpha channel is specified by 0xaa; the lower this value is, the more translucent the color becomes.
-
- -

As an example, you can represent the opaque color bright blue as "#0000ff" or "#00f". To make it 25% opaque, you can use "#0000ff44" or "#00f4".

- -

RGB functional notation

- -

RGB (Red/Green/Blue) functional notation, like hexadecimal string notation, represents colors using their red, green, and blue components (as well as, optionally, an alpha channel component for opacity). However, instead of using a string, the color is defined using the CSS function {{cssxref("rgb()")}}. This function accepts as its input parameters the values of the red, green, and blue components and an optional fourth parameter, the value for the alpha channel.

- -

Legal values for each of these parameters are:

- -
-
red, green, and blue
-
Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.
-
alpha
-
The alpha channel is a number between 0.0 (fully transparent) and 1.0 (fully opaque). You can also specify a percentage where 0% is the same as 0.0 and 100% is the same as 1.0.
-
- -

For example, a bright red that's 50% opaque can be represented as rgb(255, 0, 0, 0.5) or rgb(100%, 0, 0, 50%).

- -

HSL functional notation

- -

Designers and artists often prefer to work using the {{interwiki("wikipedia", "HSL and HSV", "HSL")}} (Hue/Saturation/Luminosity) color method. On the web, HSL colors are represented using HSL functional notation. The hsl() CSS function is very similar to the rgb() function in usage otherwise.

- -
-
HSL color cylinder -
Figure 1. An HSL color cylinder. Hue defines the actual color based on the position along a circular color wheel representing the colors of the visible spectrum. Saturation is a percentage of how much of the way between being a shade of gray and having the maximum possible amount of the given hue. As the value of luminance (or lightness) increases, the color transitions from the darkest possible to the brightest possible (from black to white). Image courtesy of user SharkD on Wikipedia, distributed under the CC BY-SA 3.0 license.
-
-
- -

The value of the hue (H) component of an HSL color is an angle from red around through yellow, green, cyan, blue, and magenta (ending up back at red again at 360°) that identifies what the base color is. The value can be specified in any {{cssxref("<angle>")}} unit supported by CSS, including degrees (deg), radians (rad), gradians (grad), or turns (turn). But this doesn't control how vivid or dull, or how bright or dark the color is.

- -

The saturation (S) component of the color specifies what percentage of the final color is comprised of the specified hue. The rest is defined by the grey level provided by the luminance (L) component.

- -

Think of it like creating the perfect paint color:

- -
    -
  1. You start with base paint that's the maximum intensity possible for a given color, such as  the most intense blue that can be represented by the user's screen. This is the hue (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.
    2. -
  2. Then select a greyscale paint that corresponds how bright you want the color to be; this is the luminance. Do you want it to be very bright and nearly white, or very dark and closer to black, or somewhere in between? This is specified using a percentage, where 0% is perfectly black and 100% is perfectly white. (regardless of the saturation or hue). In between values are a literal grey area.
    3. -
  3. Now that you have a grey paint and a perfectly vivid color, you need to mix them together. The saturation (S) component of the color indicates what percentage of the final color should be comprised of that perfectly vivid color. The rest of the final color is made up of the grey paint that represents the saturation.
    4. -
- -

You can also optionally include an alpha channel, to make the color less than 100% opaque.

- -

Here are some sample colors in HSL notation:

- -
- - -

{{EmbedLiveSample("hsl-swatches", 300, 260)}}

-
- -
-

Note that when you omit the hue's unit, it's assumed to be in degrees (deg).

-
- -

Farbe verwenden

- -

Now that you know what CSS properties exist that let you apply color to elements and the formats you can use to describe colors, you can put this together to begin to make use of color. As you may have seen from the list under {{anch("Things that can have color")}}, there are plenty of things you can color with CSS. Let's look at this from two sides: using color within a {{Glossary("stylesheet")}}, and adding and changing color using {{Glossary("JavaScript")}} code to alter the styles of elements.

- -

Specifying colors in stylesheets

- -

The easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the CSS that's used when rendering elements. While we won't use every single property mentioned previously, we'll look at a couple of examples. The concept is the same anywhere you use color.

- -

Let's take a look at an example, starting by looking at the results we're trying to achieve:

- -
{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}
- -

HTML

- -

The HTML responsible for creating the above example is shown here:

- -
<div class="wrapper">
-  <div class="box boxLeft">
-    <p>
-      This is the first box.
-    </p>
-  </div>
-  <div class="box boxRight">
-    <p>
-      This is the second box.
-    </p>
-  </div>
-</div>
- -

This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <div>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.

- -

The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.

- -

CSS

- -

We'll look at the CSS to create the above results a piece at a time, so we can review the interesting parts one by one.

- -
.wrapper {
-  width: 620px;
-  height: 110px;
-  margin: 0;
-  padding: 10px;
-  border: 6px solid mediumturquoise;
-}
- -

The .wrapper class is used to assign styles to the {{HTMLElement("div")}} that encloses all of our other content. This establishes thesize of the container using {{cssxref("width")}} and {{cssxref("height")}} as well as its {{cssxref("margin")}} and {{cssxref("padding")}}.

- -

Of more interest to our discussion here is the use of the {{cssxref("border")}} property to establish a border around the outside edge of the element. This border is a solid line, 6 pixels wide, in the color mediumturquoise.

- -

Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

- -
.box {
-  width: 290px;
-  height: 100px;
-  margin: 0;
-  padding: 4px 6px;
-  font: 28px "Marker Felt", "Zapfino", cursive;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
- -

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to center. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.

- -
.boxLeft {
-  float: left;
-  background-color: rgb(245, 130, 130);
-  outline: 2px solid darkred;
-}
- -

The .boxLeft class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:

- - - -
.boxRight {
-  float: right;
-  background-color: hsl(270deg, 50%, 75%);
-  outline: 4px dashed rgb(110, 20, 120);
-  color: hsl(0deg, 100%, 100%);
-  text-decoration: underline wavy #88ff88;
-  text-shadow: 2px 2px 3px black;
-}
- -

Finally, the .boxRight class describes the unique properties of the box that's drawn on the right. It's configured to float the box to the right so that it appears next to the previous box. Then the following colors are established:

- - - -

Dem Nutzer die Farbe wählen lassen

- -

There are many situations in which your web site may need to let the user select a color. Perhaps you have a customizable user interface, or you're implementing a drawing app. Maybe you have editable text and need to let the user choose the text color. Or perhaps your app lets the user assign colors to folders or items. Although historically it's been necessary to implement your own {{interwiki("wikipedia", "color picker")}}, HTML now provides support for browsers to provide one for your use through the {{HTMLElement("input")}} element, by using "color" as the value of its {{htmlattrxref("type", "input")}} attribute.

- -

The <input> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.

- -

Beispiel: Farbe wählen

- -

Let's look at a simple example, in which the user can choose a color. As the user adjusts the color, the border around the example changes to reflect the new color. After finishing up and picking the final color, the color picker's value is displayed.

- -

{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}

- -
-

On macOS, you indicate that you've finalized selection of the color by closing the color picker window.

-
- -

HTML

- -

The HTML here creates a box that contains a color picker control (with a label created using the {{HTMLElement("label")}} element) and an empty paragraph element ({{HTMLElement("p")}}) into which we'll output some text from our JavaScript code.

- -
<div id="box">
-  <label for="colorPicker">Border color:</label>
-  <input type="color" value="#8888ff" id="colorPicker">
-  <p id="output"></p>
-</div>
- -

CSS

- -

The CSS simply establishes a size for the box and some basic styling for appearances. The border is also established with a 2-pixel width and a border color that won't last, courtesy of the JavaScript below...

- -
#box {
-  width: 500px;
-  height: 200px;
-  border: 2px solid rgb(245, 220, 225);
-  padding: 4px 6px;
-  font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif"
-}
- -

JavaScript

- -

The script here handles the task of updating the starting color of the border to match the color picker's value. Then two event handlers are added to deal with input from the <input type="color"> element.

- -
let colorPicker = document.getElementById("colorPicker");
-let box = document.getElementById("box");
-let output = document.getElementById("output");
-
-box.style.borderColor = colorPicker.value;
-
-colorPicker.addEventListener("input", function(event) {
-  box.style.borderColor = event.target.value;
-}, false);
-
-colorPicker.addEventListener("change", function(event) {
-  output.innerText = "Color set to " + colorPicker.value + ".";
-}, false);
- -

The {{event("input")}} event is sent every time the value of the element changes; that is, every time the user adjusts the color in the color picker. Each time this event arrives, we set the box's border color to match the color picker's current value.

- -

The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <p> element with the ID "output" to a string describing the finally selected color.

- -

Farbe klug verwenden

- -

Making the right choices when selecting colors when designing a web site can be a tricky process, especially if you aren't well-grounded in art, design, or at least basic color theory. The wrong color choice can render your site unattractive, or even worse, leave the content unreadable due to problems with contrast or conflicting colors. Worse still, if using the wrong colors can result in your content being outright unusable by people withcertain vision problems, particularly color blindness.

- -

Die richtigen Farben finden

- -

Coming up with just the right colors can be tricky, especially without training in art or design. Fortunately, there are tools available that can help you. While they can't replace having a good designer helping you make these decisions, they can definitely get you started.

- -

Base color

- -

The first step is to choose your base color. This is the color that in some way defines your web site or the subject matter of the site. Just as we associate green with the beverage {{interwiki("wikipedia", "Mountain Dew")}} and one might think of the color blue in relationship with the sky or the ocean, choosing an appropriate base color to represent your site is a good place to start. There are plenty of ways to select a base color; a few ideas include:

- - - -

When trying to decide upon a base color, you may find that browser extensions that let you select colors from web content can be particularly handy. Some of these are even specifically designed to help with this sort of work. For example, the web site ColorZilla offers an extension (Chrome / Firefox) that offers an eyedropper tool for picking colors from the web. It can also take averages of the colors of pixels in various sized areas or even a selected area of the page.

- -
-

The advantage to averaging colors can be that often what looks like a solid color is actually a surprisingly varied number of related colors all used in concert, blending to create a desired effect. Picking just one of these pixels can result in getting a color that on its own looks very out of place.

-
- -

Fleshing out the palette

- -

Once you have decided on your base color, there are plenty of online tools that can help you build out a palette of appropriate colors to use along with your base color by applying color theory to your base color to determine appropriate added colors. Many of these tools also support viewing the colors filtered so you can see what they would look like to people with various forms of color blindness. See {{anch("Color and accessibility")}} for a brief explanation of why this matters.

- -

A few examples (all free to use as of the time this list was last revised):

- - - -

When designing your palette, be sure to keep in mind that in addition to the colors these tools typically generate, you'll probably also need to add some core neutral colors such as white (or nearly white), black (or nearly black), and some number of shades of gray.

- -
-

Usually, you are far better off using the smallest number of colors possible. By using color to accentuate rather than adding color to everything on the page, you keep your content easy to read and the colors you do use have far more impact.

-
- -

Ressourcen zu Farbentheorie

- -

A full review of color theory is beyond the scope of this article, but there are plenty of articles about color theory available, as well as courses you can find at nearby schools and universities. A couple of useful resources about color theory:

- -
-
Color Science (Khan Academy in association with Pixar)
-
An online course which introduces concepts such as what color is, how it's percieved, and how to use colors to express ideas. Presented by Pixar artists and designers.
-
{{interwiki("wikipedia", "Color theory")}} on Wikipedia
-
Wikipedia's entry on color theory, which has a lot of great information from a technical perspective. It's not really a resource for helping you with the color sleection process, but is still full of useful information.
-
- -

Farbe und Barrierefreiheit

- -

There are several ways color can be an {{Glossary("accessibility")}} problem. Improper or careless use of color can result in a web site or app that a percentage of your target audience may not be able to use adequately, resulting in lost traffic, lost business, and possibly even a public relations problem. So it's important to consider your use of color carefully.

- -

You should do at least basic research into {{interwiki("wikipedia", "color blindness")}}. There are several kinds; the most common is red-green color blindness, which causes people to be unable to differentiate between the colors red and green. There are others, too, ranging from inabilities to tell the difference between certain colors to total inability to see color at all.

- -
-

The most important rule: never use color as the only way to know something. If, for example, you indicate success or failure of an operation by changing the color of a shape from white to green for success and red for failure, users with red-green color-blindness won't be able to use your site properly. Instead, perhaps use both text and color together, so that everyone can understand what's happening.

-
- -

For more information about color blindness, see the following articles:

- - - -

Palette design example

- -

Let's consider a quick example of selecting an appropriate color palette for a site. Imagine that you're building a web site for a new game that takes place on the planet Mars. So let's do a Google search for photos of Mars. Lots of good examples of Martian coloration there. We carefully avoid the mockups and the photos from movies. And we decide to use a photo taken by one of the Mars landers humanity has parked on the surface over the last few decades, since the game takes place on the planet's surface. We use a color picker tool to select a sample of the color we choose.

- -

Using an eyedropper tool, we identify a color we like and determine that the color in question is #D79C7A, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.

- -

Having selected our base color, we need to build out our palette. We decide to use Paletteon to come up with the other colors we need. Upon opening Paletton, we see:

- -

Right after loading Paletton.

- -

Next, we enter our color's hex code (D79C7A) into the "Base RGB" box at the bottom-left corner of the tool:

- -

After entering base color

- -

We now see a monochromatic palette based on the color we picked from the Mars photo. If you need a lot of related colors for some reason, those are likely to be good ones. But what we really want is an accent color. Something that will pop along side the base color. To find that, we click the "add complementary" toggle underneath the menu that lets you select the palette type (currently "Monochromatic"). Paletton computes an appropriate accent color; clicking on the accent color down in the bottom-right corner tells us that this color is #508D7C.

- -

Now with complementary colors included.

- -

If you're unhappy with the color that's proposed to you, you can change the color scheme, to see if you find something you like better. For example, if we don't like the proposed greenish-blue color, we can click the Triad color scheme icon, which presents us with the following:

- -

Triad color scheme selected

- -

That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's #556E8D. That would be used as the accent color, to be used sparingly to make things stand out, such as in headlines or in the highlighting of tabs or other indicators on the site:

- -

Triad color scheme selected

- -

Now we have our base color and our accent. On top of that, we have a few complementary shades of each, just in case we need them for gradients and the like. The colors can then be exported in a number of formats so you can make use of them.

- -

Once you have these colors, you will probably still need to select appropriate neutral colors. Common design practice is to try to find the sweet spot where there's just enough contrast that the text is crisp and readable but not enough contrast to become harsh for the eyes. It's easy to go too far in one way or another so be sure to get feedback on your colors once you've selected them and have examples of them in use available. If the contrast is too low, your text will tend to be washed out by the background, leaving it unreadable, but if your contrast is too high, the user may find your site garish and unpleasant to look at.

- -

See also

- - diff --git a/files/de/web/html/element/input/button/index.html b/files/de/web/html/element/input/button/index.html deleted file mode 100644 index d36dc8944b..0000000000 --- a/files/de/web/html/element/input/button/index.html +++ /dev/null @@ -1,246 +0,0 @@ ---- -title: -slug: Web/HTML/Element/Input/button -tags: - - Eingabeelement - - Element - - HTML - - Referenz -translation_of: Web/HTML/Element/input/button ---- -

{{HTMLRef}}

- -

Das HTML <input type="button"> Element ist eine bestimmte Version des <input> Elements. Es wird benutzt, um einen anklickbaren Button zu generieren, der jedoch keinen voreingestellten Wert hat.

- -

Browser generieren einen Controller für clickbare Buttons ohne Standartwert. Ein Button kann beliebige Beschriftungen besitzen. Der Controller selbst variiert von Browser zu Browser.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, phrasing content, Interactive content, listed, labelable, and submittable form-associated element, palpable content.
Permitted contentPhrasing content.
Tag omissionNone, both the starting and ending tag are mandatory. 
Permitted parent elementsAny element that accepts phrasing content.
DOM interfaceHTMLButtonElement
Element TypInline
- -

Attributes

- -

Dieses Element kann zusätzlich zu den globalen Attribute jedes der folgenden besitzen:

- -
-
{{htmlattrdef("disabled")}}
-
-

This Boolean attribute indicates that the user cannot interact with the button. If this attribute is not specified, the button inherits its setting from the containing element, for example {{HTMLElement("fieldset")}}; if there is no containing element with the disabled attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the click event will not be dispatched on disabled controls.

-
-
-

Firefox will, unlike other browsers, by default, persist the dynamic disabled state of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.

-
-
{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}
-
This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified.
-
{{htmlattrdef("autocomplete")}} {{non-standard_inline}}
-
The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, Firefox persists the dynamic disabled state of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to off (i.e., autocomplete="off") disables this feature.
-
{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}
-
The form element that the button is associated with (its form owner). The value of the attribute must be the id attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <button> element must be a descendent of a form element. This attribute enables you to place <button> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.
-
{{htmlattrdef("formenctype")}}
-
Since the input element is a submit button, the formenctype attribute specifies the type of content that is used to submit the form to the server. Possible values are: -
    -
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • -
  • multipart/form-data: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to file.
    • -
  • text/plain
    • -
- -

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}
-
The URI of a program that processes the information submitted by the button. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the button's form owner.
-
{{htmlattrdef("formmethod")}}
-
Since the input element is a submit button, the formmethod attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: -
    -
  • post: The data from the form is included in the body of the form and is sent to the server.
    • -
  • get: The data from the form is appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • -
- -

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formnovalidate")}}
-
Since the input element is a submit button, the formnovalidate attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. This is a Boolean attribute.
-
{{htmlattrdef("formtarget")}}
-
Since the input element is a submit button, the formtarget attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the element's form owner. The following keywords have special meanings: -
    -
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed browsing context.
    • -
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • -
-
-
{{htmlattrdef("name")}}
-
Der Name der Schaltfläche, der mit den Formulardaten übermittelt wird.
-
{{htmlattrdef("type")}}
-
The type of the button. Possible values are: -
    -
  • submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
    • -
  • reset: The button resets all the controls to their initial values.
    • -
  • button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.
    • -
-
-
{{htmlattrdef("value")}}
-
The initial value of the button.
-
- -

Beispiele

- -
<input type="button" value="Klick mich">
-
- -

Das erstellt einen neuen Button mit der Beschriftung: 'Klick mich'.

- -

Specifications

- - - - - - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}{{Spec2('HTML5 W3C')}}
{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}{{Spec2('HTML4.01')}}
- -

Browser Compatibiltiy

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Browser Compatibility
FeatureChromeGecko (Firefox)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formenctype attribute9.0{{CompatGeckoDesktop("2.0")}}1010.6{{CompatUnknown}}
formmethod attribute9.0{{CompatGeckoDesktop("2.0")}}10{{CompatUnknown}}{{CompatUnknown}}
autofocus attribute5.0{{CompatGeckoDesktop("2.0")}}109.65.0
formaction attribute9.0{{CompatGeckoDesktop("2.0")}}10{{CompatUnknown}}{{CompatUnknown}}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Mobile Browser Compatibility
FeatureAndroidGecko (Firefox Mobile)Internet Explorer MobileOpera MobileSafari Mobile
Basic Support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
formaction attribute{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formenctype attribute{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
formmethod attribute{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
- -

See also

- - diff --git a/files/de/web/html/element/th/index.html b/files/de/web/html/element/th/index.html deleted file mode 100644 index fce82bc5ca..0000000000 --- a/files/de/web/html/element/th/index.html +++ /dev/null @@ -1,297 +0,0 @@ ---- -title: -slug: Web/HTML/Element/th -translation_of: Web/HTML/Element/th ---- -

Übersicht

- -

Das  HTML Element table header cell <th> defines a cell that is a header for a group of cells of a table. The group of cells that the header refers to is defined by the {{htmlattrxref("scope", "th")}} and {{htmlattrxref("headers", "th")}} attribute.

- -

Gebrauchsübersicht

- - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesNone.
Permitted content -
-
Phrasing content.
-
-
Tag omissionThe start tag is mandatory.
- The end tag may be omitted, if it is immediately followed by a {{HTMLElement("th")}} or {{HTMLElement("td")}} element or if there are no more data in its parent element.
Permitted parent elementsA {{HTMLElement("tr")}} element.
Normative documentHTML5, section 4.9.10 (HTML4.01, section 11.2.6)
- -

Attribute

- -

This element includes the global attributes.

- -
-
{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute contains a short abbreviated description of the content of the cell. Some user-agent, like speech reader, may present it before the content itself. -
Note: Do not use this attribute as it is obsolete in the latest standard: instead either consider starting the cell content by an independent abbreviated content itself or use the abbreviated content as the cell content and use the long content as the description of the cell by putting it in the title attribute.
-
-
{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: -
    -
  • left, aligning the content to the left of the cell
    • -
  • center, centering the content in the cell
    • -
  • right, aligning the content to the right of the cell
    • -
  • justify, inserting spaces into the textual content so that the content is justified in the cell
    • -
  • char, aligning the textual content on a special character with a minimal offset, defined by the {{htmlattrxref("char", "th")}} and {{htmlattrxref("charoff", "th")}} attributes {{unimplemented_inline("2212")}}.
    • -
- -

If this attribute is not set, the left value is assumed.

- -
Note: Do not use this attribute as it is obsolete (not supported) in the latest standard. - -
    -
  • To achieve the same effect as the left, center, right or justify values, use the CSS {{cssxref("text-align")}} property on it.
    • -
  • To achieve the same effect as the char value, in CSS3, you can use the value of the {{htmlattrxref("char", "th")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.
    • -
-
-
-
- -
-
{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header apply to. -
Note: Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "th")}} attribute.
-
-
{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}
-
This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in sRGB, prefixed by a '#'. One of the sixteen predefined color strings may be used: - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black = "#000000" green = "#008000"
 silver = "#C0C0C0" lime = "#00FF00"
 gray = "#808080" olive = "#808000"
 white = "#FFFFFF" yellow = "#FFFF00"
 maroon = "#800000" navy = "#000080"
 red = "#FF0000" blue = "#0000FF"
 purple = "#800080" teal = "#008080"
 fuchsia = "#FF00FF" aqua = "#00FFFF"
- -
Usage note: Do not use this attribute, as it is non-standard and only implemented some versions of Microsoft Internet Explorer: the {{HTMLElement("th")}} element should be styled using CSS. To give a similar effect to the bgcolor attribute, use the CSS property {{cssxref("background-color")}} instead.
-
-
- -
-
{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute is used to set the character to align the cells in a column on. Typical values for this include a period (.) when attempting to align numbers or monetary values. If {{htmlattrxref("align", "th")}} is not set to char, this attribute is ignored. -
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard. To achieve the same effect as the {{htmlattrxref("char", "thead")}}, in CSS3, you can use the character set using the {{htmlattrxref("char", "th")}} attribute as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.
-
-
- -
-
{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the char attribute. -
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard.
-
-
- -
-
{{htmlattrdef("colspan")}}
-
This attribute contains a non-negative integer value that indicates on how many columns does the cell extend. Its default value is 1; if its value is set to 0, it does extend until the end of the {{HTMLElement("colgroup")}}, eventually implicitly defined, the cell belongs to. Values higher than 1000 are clipped down to 1000.
-
{{htmlattrdef("headers")}}
-
This attributes a list of space-separated strings, each corresponding to the id attribute of the {{HTMLElement("th")}} elements that applies to this element.
-
{{htmlattrdef("rowspan")}}
-
This attribute contains a non-negative integer value that indicates on how many rows does the cell extend. Its default value is 1; if its value is set to 0, it does extend until the end of the table section ({{HTMLElement("thead")}}, {{HTMLElement("tbody")}}, {{HTMLElement("tfoot")}}, eventually implicitly defined) the cell belongs to. Values higher than 65534 are clipped down to 65534.
-
{{htmlattrdef("scope")}}
-
This enumerated attribute defines the cells that the header defined in this {{HTMLElement("th")}} element relates to. It may have the following values: -
    -
  • row, which means that the header relates to all cells in the row that this element belongs to;
    • -
  • col, which means that the header relates to all cells in the column that this element belongs to;
    • -
  • rowgroup, which means that the header relates to all remaining cells in the row group that this element belongs to. The remaining cells are either those to the right of this element, or to his left depending of the value of{{htmlattrxref("dir", "table")}} attribute defined on the {{HTMLElement("table")}} element;
    • -
  • colgroup, which means that the header relates to all remaining cells in the column group that this element belongs to;
    • -
  • auto
    • -
-
-
{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}
-
This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: -
    -
  • baseline, which will put the text as close to the bottom of the cell as it is possible, but align it on the baseline of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as bottom.
    • -
  • bottom, which will put the text as close to the bottom of the cell as it is possible;
    • -
  • middle, which will center the text in the cell;
    • -
  • and top, which will put the text as close to the top of the cell as it is possible.
    • -
- -
Note: Do not use this attribute as it is obsolete (and not supported) in the latest standard: instead set the CSS {{cssxref("vertical-align")}} property on it.
-
-
{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}
-
This attribute is used to define a recommended cell width.  Properties cellspacing and cellpadding may add additional space, and element {{HTMLElement("col")}} width may also have some effect. In general, if a column's width is too narrow to show a particular cell properly, it, and thus the cells in it, may be widened when displayed. -
Note: Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.
-
-
- -

DOM interface

- -

This element implements the HTMLTableHeaderCellElement interface.

- -

Beispiele

- -

See {{HTMLElement("table")}} for examples on <th>.

- -

Kompatibilät

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support1.0{{CompatGeckoDesktop("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
align/valign attribute1.0{{CompatNo}} {{bug("915")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
char/charoff attribute1.0{{CompatNo}} {{bug("2212")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
bgcolor attribute {{Non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("1.0")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
align/valign attribute{{CompatUnknown}}{{CompatNo}} {{bug("915")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
char/charoff attribute{{CompatUnknown}}{{CompatNo}} {{bug("2212")}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
bgcolor attribute {{Non-standard_inline}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}
-
- -

Siehe auch

- - - -

{{HTMLRef}}

diff --git a/files/de/web/html/global_attributes/is/index.html b/files/de/web/html/global_attributes/is/index.html deleted file mode 100644 index 224c20c184..0000000000 --- a/files/de/web/html/global_attributes/is/index.html +++ /dev/null @@ -1,63 +0,0 @@ ---- -title: is -slug: Web/HTML/Global_attributes/is -translation_of: Web/HTML/Global_attributes/is -original_slug: Web/HTML/Globale_Attribute/is ---- -
{{HTMLSidebar("Global_attributes")}}
- -

The is global attribute allows you to specify that a standard HTML element should behave like a defined custom built-in element (see Using custom elements for more details).

- -

This attribute can only be used if the specified custom element name has been successfully defined in the current document, and extends the element type it is being applied to.

- -

Examples

- -

The following code is taken from our word-count-web-component example (see it live also).

- -
// Create a class for the element
-class WordCount extends HTMLParagraphElement {
-  constructor() {
-    // Always call super first in constructor
-    super();
-
-    // Constructor contents ommitted for brevity
-    ...
-
-  }
-}
-
-// Define the new element
-customElements.define('word-count', WordCount, { extends: 'p' });
- -
<p is="word-count"></p>
- -

Specifications

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}{{Spec2('HTML WHATWG')}} 
- -

Browser compatibility

- - - -

{{Compat("html.global_attributes.is")}}

- -

See also

- - diff --git a/files/de/web/http/headers/connection/index.html b/files/de/web/http/headers/connection/index.html deleted file mode 100644 index 5b203cabcc..0000000000 --- a/files/de/web/http/headers/connection/index.html +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: Connection -slug: Web/HTTP/Headers/Connection -translation_of: Web/HTTP/Headers/Connection ---- -
{{HTTPSidebar}}
- -

The Connection general header controls whether or not the network connection stays open after the current transaction finishes. If the value sent is keep-alive, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done.

- -
-

Connection-specific header fields such as {{HTTPHeader("Connection")}} and {{HTTPHeader("Keep-Alive")}} are prohibited in HTTP/2. Chrome and Firefox ignore them in HTTP/2 responses, but Safari conforms to the HTTP/2 spec requirements and won’t load any response which contains them.

-
- -

Except for the standard hop-by-hop headers ({{HTTPHeader("Keep-Alive")}}, {{HTTPHeader("Transfer-Encoding")}}, {{HTTPHeader("TE")}}, {{HTTPHeader("Connection")}}, {{HTTPHeader("Trailer")}}, {{HTTPHeader("Upgrade")}}, {{HTTPHeader("Proxy-Authorization")}} and {{HTTPHeader("Proxy-Authenticate")}}), any hop-by-hop headers used by the message must be listed in the Connection header, so that the first proxy knows it has to consume them and not forward them further. Standard hop-by-hop headers can be listed too (it is often the case of {{HTTPHeader("Keep-Alive")}}, but this is not mandatory).

- - - - - - - - - - - - -
Header type{{Glossary("General header")}}
{{Glossary("Forbidden header name")}}yes
- -

Syntax

- -
Connection: keep-alive
-Connection: close
-
- -

Directives

- -
-
close
-
Indicates that either the client or the server would like to close the connection. This is the default on HTTP/1.0 requests.
-
any comma-separated list of HTTP headers [Usually keep-alive only]
-
Indicates that the client would like to keep the connection open. Having a persistent connection is the default on HTTP/1.1 requests. The list of headers are the name of the header to be removed by the first non-transparent proxy or cache in-between: these headers define the connection between the emitter and the first entity, not the destination node.
-
- -

Browser compatibility

- -

{{Compat("http.headers.Connection")}}

diff --git a/files/de/web/http/headers/set-cookie/samesite/index.html b/files/de/web/http/headers/set-cookie/samesite/index.html deleted file mode 100644 index 84e0b68380..0000000000 --- a/files/de/web/http/headers/set-cookie/samesite/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: SameSite cookies -slug: Web/HTTP/Headers/Set-Cookie/SameSite -tags: - - HATTP - - IT -translation_of: Web/HTTP/Headers/Set-Cookie/SameSite ---- -
{{HTTPSidebar}}
- -

The SameSite attribute of the {{HTTPHeader("Set-Cookie")}} HTTP response header allows you to declare if your cookie should be restricted to a first-party or same-site context.

- -
-

Standards related to the Cookie SameSite attribute recently changed such that:

- - - -

This article documents the new standard. See Browser Compatibility below for information about specific versions where the behaviour changed.

-
- -

Values

- -

The SameSite attribute accepts three values:

- -

Lax

- -

Cookies are not sent on normal cross-site subrequests (for example to load images or frames into a third party site), but are sent when a user is navigating to the origin site (i.e. when following a link).

- -

This is the default cookie value if SameSite has not been explicitly specified in recent browser versions (see the "SameSite: Defaults to Lax" feature in the Browser Compatibility).

- -
-

Lax replaced None as the default value in order to ensure that users have reasonably robust defense against some classes of cross-site request forgery ({{Glossary("CSRF")}}) attacks.

-
- -

Strict

- -

Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites.

- -

None

- -

Cookies will be sent in all contexts, i.e in responses to both first-party and cross-origin requests.If SameSite=None is set, the cookie Secure attribute must also be set (or the cookie will be blocked).

- -

Fixing common warnings

- -

SameSite=None requires Secure

- -

Warnings like the ones below might appear in your console:

- -
Cookie “myCookie” rejected because it has the “SameSite=None” attribute but is missing the “secure” attribute.
-
-This Set-Cookie was blocked because it had the "SameSite=None" attribute but did not have the "Secure" attribute, which is required in order to use "SameSite=None".
- -

The warning appears because any cookie that requests SameSite=None but is not marked Secure will be rejected.

- -
Set-Cookie: flavor=choco; SameSite=None
- -

To fix this, you will have to add the Secure attribute to your SameSite=None cookies.

- -
Set-Cookie: flavor=choco; SameSite=None; Secure
- -

A Secure cookie is only sent to the server with an encrypted request over the HTTPS protocol. Note that insecure sites (http:) can't set cookies with the Secure directive.

- -
-

On older browser versions you might simply get a warning that the cookie will be blocked in future. For example:

- -
Cookie “myCookie” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite” attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite
-
-
- -

Cookies without SameSite default to SameSite=Lax

- -

Recent versions of modern browsers provide a more secure default for SameSite to your cookies and so the following message might appear in your console:

- -
Cookie “myCookie” has “SameSite” policy set to “Lax” because it is missing a “SameSite” attribute, and “SameSite=Lax” is the default value for this attribute.
-
- -

The warning appears because the SameSite policy for a cookie was not explicitly specified:

- -
Set-Cookie: flavor=choco
- -

You should explicitly communicate the intended SameSite policy for your cookie (rather than relying on browsers to apply SameSite=Lax automatically). This will also improve the experience across browsers as not all of them default to Lax yet.

- -
Set-Cookie: flavor=choco; SameSite=Lax
- -

Example:

- -
RewriteEngine on
-RewriteBase "/"
-RewriteCond "%{HTTP_HOST}"       "^example\.org$" [NC]
-RewriteRule "^(.*)"              "https://www.example.org/index.html" [R=301,L,QSA]
-RewriteRule "^(.*)\.ht$"         "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;01;https://www.example.org;30/;SameSite=None;Secure]
-RewriteRule "^(.*)\.htm$"        "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;02;https://www.example.org;30/;SameSite=None;Secure]
-RewriteRule "^(.*)\.html$"       "index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;03;https://www.example.org;30/;SameSite=None;Secure]
-[...]
-RewriteRule "^admin/(.*)\.html$" "admin/index.php?nav=$1 [NC,L,QSA,CO=RewriteRule;09;https://www.example.org:30/;SameSite=Strict;Secure]
-
- -

Specifications

- - - - - - - - - - - - - - - - - - -
SpecificationTitle
{{RFC("6265", "Set-Cookie", "4.1")}}HTTP State Management Mechanism
draft-ietf-httpbis-rfc6265bis-05Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies
- -

Browser compatibility

- -

{{Compat("http.headers.Set-Cookie", 5)}}

- -

See also

- - diff --git a/files/de/web/http/headers/user-agent/index.html b/files/de/web/http/headers/user-agent/index.html deleted file mode 100644 index b70e05c83a..0000000000 --- a/files/de/web/http/headers/user-agent/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: User-Agent -slug: Web/HTTP/Headers/User-Agent -tags: - - HTTP - - NeedsTranslation - - Reference - - TopicStub - - header -translation_of: Web/HTTP/Headers/User-Agent ---- -
{{HTTPSidebar}}
- -

The User-Agent request header contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent.

- -
-

Please read Browser detection using the user agent and why serving different Web pages or services to different browsers is usually a bad idea.

-
- - - - - - - - - - - - -
Header type{{Glossary("Request header")}}
{{Glossary("Forbidden header name")}}no
- -

Syntax

- -
User-Agent: <product> / <product-version> <comment>
-
-Common format for web browsers:
-
-User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>
-
- -

Directives

- -
-
<product>
-
A product identifier
-
<product-version>
-
A version number of the product.
-
<comment>
-
Zero or more comments containing sub product information, for example.
-
- -

Firefox UA string

- -

For more details on Firefox and Gecko based user agent strings, see the Firefox user agent string reference. The UA string of Firefox itself is broken down into four components:

- -

Mozilla/5.0 (platform; rv:geckoversion) Gecko/geckotrail Firefox/firefoxversion

- - - -

Examples

- -
Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0
-Mozilla/5.0 (Macintosh; Intel Mac OS X x.y; rv:42.0) Gecko/20100101 Firefox/42.0
-
- -

Chrome UA string

- -

The Chrome (or Chromium/blink-based engines) user agent string is similar to the Firefox format. For compatibility, it adds strings like "KHTML, like Gecko" and "Safari".

- -

Examples

- -
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36
- -

Opera UA string

- -

The Opera browser is also based on the blink engine, which is why it almost looks the same, but adds "OPR/<version>".

- -

Examples

- -
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36 OPR/38.0.2220.41
- -

Safari UA string

- -

In this example, the user agent string is mobile safari version. It contains the word "Mobile".

- -

Examples

- -
Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1
- -

Internet Explorer UA string

- -

Examples

- -
Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)
- -

Crawler and bot UA strings

- -

Examples

- -
Googlebot/2.1 (+http://www.google.com/bot.html)
- -

Specifications

- - - - - - - - - - - - -
SpecificationTitle
{{RFC("7231", "User-Agent", "5.5.3")}}Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
- -

Browser compatibility

- -

{{Compat("http.headers.User-Agent")}}

- -

See also

- - diff --git a/files/de/web/javascript/guide/modules/index.html b/files/de/web/javascript/guide/modules/index.html deleted file mode 100644 index 3d006ec04c..0000000000 --- a/files/de/web/javascript/guide/modules/index.html +++ /dev/null @@ -1,446 +0,0 @@ ---- -title: JavaScript modules -slug: Web/JavaScript/Guide/Modules -translation_of: Web/JavaScript/Guide/Modules ---- -
-

Ein Hintergrund zu den Modulen

- -


- JavaScript-Programme haben ziemlich klein angefangen - in der Anfangszeit wurde es hauptsächlich für isolierte Skripting-Aufgaben verwendet, um Ihren Webseiten bei Bedarf ein wenig Interaktivität zu verleihen, so dass große Skripte im Allgemeinen nicht erforderlich waren. Spätestens nach ein paar Jahren haben wir nun komplette Anwendungen, die in Browsern mit viel JavaScript ausgeführt werden, sowie JavaScript, das auch in anderen Kontexten verwendet wird (z.B. Node.js).

- -

Daher war es in den letzten Jahren sinnvoll, darüber nachzudenken, Mechanismen zur Aufteilung von JavaScript-Programmen in separate Module bereitzustellen, die bei Bedarf importiert werden können. Node.js besitzt diese Fähigkeit schon seit langem, und es gibt eine Reihe von JavaScript-Bibliotheken und Frameworks, die die Verwendung von Modulen ermöglichen (z.B. andere CommonJS- und AMD-basierte Modulsysteme wie RequireJS und seit kurzem auch Webpack und Babel).

- -

Die gute Nachricht ist, dass moderne Browser begonnen haben, die Modulfunktionalität nativ zu unterstützen, und genau darum geht es in diesem Artikel. Das kann nur eine gute Sache sein - Browser können das Laden von Modulen optimieren und damit effizienter machen, als wenn man eine Bibliothek verwenden müsste und all diese zusätzlichen clientseitigen Verarbeitungen und zusätzlichen Roundtrips durchführen müsste.

- -

Übersetzt mit www.DeepL.com/Translator (kostenlose Version)

-
- -

Browser support

- -

Die Verwendung von nativen JavaScript-Modulen ist abhängig von den Import- und Export-Anweisungen {{JSxRef("Statements/import", "import")}} und{{JSxRef("Statements/export", "export")}} , deren Browserkompatibilität wie folgt ist (die Zahlen in den grünen Kästen sind wahrscheinlich die Release-Version der jeweiligen Plattform, die die Funktion unterstützt):

- -

import

- -

{{Compat("javascript.statements.import")}}

- -

export

- -

{{Compat("javascript.statements.export")}}

- -

Introducing an example

- -

To demonstrate usage of modules, we've created a simple set of examples that you can find on GitHub. These examples demonstrate a simple set of modules that create a <canvas> element on a webpage, and then draw (and report information about) different shapes on the canvas.

- -

These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.

- -
-

Note: If you want to download the examples and run them locally, you'll need to run them through a local web server.

-
- -

Basic example structure

- -

In our first example (see basic-modules) we have a file structure as follows:

- -
index.html
-main.js
-modules/
-    canvas.js
-    square.js
- -
-

Note: All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.

-
- -

The modules directory's two modules are described below:

- - - -

Aside — .mjs versus .js

- -

Throughout this article, we've used .js extensions for our module files, but in other resources you may see the .mjs extension used instead. V8's documentation recommends this, for example. The reasons given are:

- - - -

However, we decided to keep to using .js, at least for the moment. To get modules to work correctly in a browser, you need to make sure that your server is serving them with a Content-Type header that contains a JavaScript MIME type such as text/javascript. If you don't, you'll get a strict MIME type checking error along the lines of "The server responded with a non-JavaScript MIME type" and the browser won't run your JavaScript. Most servers already set the correct type for .js files, but not yet for .mjs files. Servers that already serve .mjs files correctly include GitHub Pages and http-server for Node.js.

- -

This is OK if you are using such an environment already, or if you aren't but you know what you are doing and have access (i.e. you can configure your server to set the correct Content-Type for .mjs files). It could however cause confusion if you don't control the server you are serving files from, or are publishing files for public use, as we are here.

- -

For learning and portability purposes, we decided to keep to .js.

- -

If you really value the clarity of using .mjs for modules versus using .js for "normal" JavaScript files, but don't want to run into the problem described above, you could always use .mjs during development and convert them to .js during your build step.

- -

It is also worth noting that:

- - - -

Exporting module features

- -

The first thing you do to get access to module features is export them. This is done using the {{JSxRef("Statements/export", "export")}} statement.

- -

The easiest way to use it is to place it in front of any items you want exported out of the module, for example:

- -
export const name = 'square';
-
-export function draw(ctx, length, x, y, color) {
-  ctx.fillStyle = color;
-  ctx.fillRect(x, y, length, length);
-
-  return {
-    length: length,
-    x: x,
-    y: y,
-    color: color
-  };
-}
- -

You can export functions, var, let, const, and — as we'll see later — classes. They need to be top-level items; you can't use export inside a function, for example.

- -

A more convenient way of exporting all the items you want to export is to use a single export statement at the end of your module file, followed by a comma-separated list of the features you want to export wrapped in curly braces. For example:

- -
export { name, draw, reportArea, reportPerimeter };
- -

Importing features into your script

- -

Once you've exported some features out of your module, you need to import them into your script to be able to use them. The simplest way to do this is as follows:

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
- -

You use the {{JSxRef("Statements/import", "import")}} statement, followed by a comma-separated list of the features you want to import wrapped in curly braces, followed by the keyword from, followed by the path to the module file — a path relative to the site root, which for our basic-modules example would be /js-examples/modules/basic-modules.

- -

However, we've written the path a bit differently — we are using the dot (.) syntax to mean "the current location", followed by the path beyond that to the file we are trying to find. This is much better than writing out the entire relative path each time, as it is shorter, and it makes the URL portable — the example will still work if you move it to a different location in the site hierarchy.

- -

So for example:

- -
/js-examples/modules/basic-modules/modules/square.js
- -

becomes

- -
./modules/square.js
- -

You can see such lines in action in main.js.

- -
-

Note: In some module systems, you can omit the file extension and the dot (e.g. '/modules/square'). This doesn't work in native JavaScript modules.

-
- -

Once you've imported the features into your script, you can use them just like they were defined inside the same file. The following is found in main.js, below the import lines:

- -
let myCanvas = create('myCanvas', document.body, 480, 320);
-let reportList = createReportList(myCanvas.id);
-
-let square1 = draw(myCanvas.ctx, 50, 50, 100, 'blue');
-reportArea(square1.length, reportList);
-reportPerimeter(square1.length, reportList);
-
- -

Applying the module to your HTML

- -

Now we just need to apply the main.js module to our HTML page. This is very similar to how we apply a regular script to a page, with a few notable differences.

- -

First of all, you need to include type="module" in the <script> element, to declare this script as a module:

- -
<script type="module" src="main.js"></script>
- -

The script into which you import the module features basically acts as the top-level module. If you omit it, Firefox for example gives you an error of "SyntaxError: import declarations may only appear at top level of a module".

- -

You can only use import and export statements inside modules; not regular scripts.

- -
-

Note: You can also import modules into internal scripts, as long as you include type="module", for example <script type="module"> //include script here </script>.

-
- -

Other differences between modules and standard scripts

- - - -

Default exports versus named exports

- -

The functionality we've exported so far has been comprised of named exports — each item (be it a function, const, etc.) has been referred to by its name upon export, and that name has been used to refer to it on import as well.

- -

There is also a type of export called the default export — this is designed to make it easy to have a default function provided by a module, and also helps JavaScript modules to interoperate with existing CommonJS and AMD module systems (as explained nicely in ES6 In Depth: Modules by Jason Orendorff; search for "Default exports").

- -

Let's look at an example as we explain how it works. In our basic-modules square.js you can find a function called randomSquare() that creates a square with a random color, size, and position. We want to export this as our default, so at the bottom of the file we write this:

- -
export default randomSquare;
- -

Note the lack of curly braces.

- -

We could instead prepend export default onto the function and define it as an anonymous function, like this:

- -
export default function(ctx) {
-  ...
-}
- -

Over in our main.js file, we import the default function using this line:

- -
import randomSquare from './modules/square.js';
- -

Again, note the lack of curly braces. This is because there is only one default export allowed per module, and we know that randomSquare is it. The above line is basically shorthand for:

- -
import {default as randomSquare} from './modules/square.js';
- -
-

Note: The as syntax for renaming exported items is explained below in the Renaming imports and exports section.

-
- -

Avoiding naming conflicts

- -

So far, our canvas shape drawing modules seem to be working OK. But what happens if we try to add a module that deals with drawing another shape, like a circle or triangle? These shapes would probably have associated functions like draw(), reportArea(), etc. too; if we tried to import different functions of the same name into the same top-level module file, we'd end up with conflicts and errors.

- -

Fortunately there are a number of ways to get around this. We'll look at these in the following sections.

- -

Renaming imports and exports

- -

Inside your import and export statement's curly braces, you can use the keyword as along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.

- -

So for example, both of the following would do the same job, albeit in a slightly different way:

- -
// inside module.js
-export {
-  function1 as newFunctionName,
-  function2 as anotherNewFunctionName
-};
-
-// inside main.js
-import { newFunctionName, anotherNewFunctionName } from './modules/module.js';
- -
// inside module.js
-export { function1, function2 };
-
-// inside main.js
-import { function1 as newFunctionName,
-         function2 as anotherNewFunctionName } from './modules/module.js';
- -

Let's look at a real example. In our renaming directory you'll see the same module system as in the previous example, except that we've added circle.js and triangle.js modules to draw and report on circles and triangles.

- -

Inside each of these modules, we've got features with the same names being exported, and therefore each has the same export statement at the bottom:

- -
export { name, draw, reportArea, reportPerimeter };
- -

When importing these into main.js, if we tried to use

- -
import { name, draw, reportArea, reportPerimeter } from './modules/square.js';
-import { name, draw, reportArea, reportPerimeter } from './modules/circle.js';
-import { name, draw, reportArea, reportPerimeter } from './modules/triangle.js';
- -

The browser would throw an error such as "SyntaxError: redeclaration of import name" (Firefox).

- -

Instead we need to rename the imports so that they are unique:

- -
import { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter } from './modules/square.js';
-
-import { name as circleName,
-         draw as drawCircle,
-         reportArea as reportCircleArea,
-         reportPerimeter as reportCirclePerimeter } from './modules/circle.js';
-
-import { name as triangleName,
-        draw as drawTriangle,
-        reportArea as reportTriangleArea,
-        reportPerimeter as reportTrianglePerimeter } from './modules/triangle.js';
- -

Note that you could solve the problem in the module files instead, e.g.

- -
// in square.js
-export { name as squareName,
-         draw as drawSquare,
-         reportArea as reportSquareArea,
-         reportPerimeter as reportSquarePerimeter };
- -
// in main.js
-import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';
- -

And it would work just the same. What style you use is up to you, however it arguably makes more sense to leave your module code alone, and make the changes in the imports. This especially makes sense when you are importing from third party modules that you don't have any control over.

- -

Creating a module object

- -

The above method works OK, but it's a little messy and longwinded. An even better solution is to import each module's features inside a module object. The following syntax form does that:

- -
import * as Module from './modules/module.js';
- -

This grabs all the exports available inside module.js, and makes them available as members of an object Module, effectively giving it its own namespace. So for example:

- -
Module.function1()
-Module.function2()
-etc.
- -

Again, let's look at a real example. If you go to our module-objects directory, you'll see the same example again, but rewritten to take advantage of this new syntax. In the modules, the exports are all in the following simple form:

- -
export { name, draw, reportArea, reportPerimeter };
- -

The imports on the other hand look like this:

- -
import * as Canvas from './modules/canvas.js';
-
-import * as Square from './modules/square.js';
-import * as Circle from './modules/circle.js';
-import * as Triangle from './modules/triangle.js';
- -

In each case, you can now access the module's imports underneath the specified object name, for example:

- -
let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue');
-Square.reportArea(square1.length, reportList);
-Square.reportPerimeter(square1.length, reportList);
- -

So you can now write the code just the same as before (as long as you include the object names where needed), and the imports are much neater.

- -

Modules and classes

- -

As we hinted at earlier, you can also export and import classes; this is another option for avoiding conflicts in your code, and is especially useful if you've already got your module code written in an object-oriented style.

- -

You can see an example of our shape drawing module rewritten with ES classes in our classes directory. As an example, the square.js file now contains all its functionality in a single class:

- -
class Square {
-  constructor(ctx, listId, length, x, y, color) {
-    ...
-  }
-
-  draw() {
-    ...
-  }
-
-  ...
-}
- -

which we then export:

- -
export { Square };
- -

Over in main.js, we import it like this:

- -
import { Square } from './modules/square.js';
- -

And then use the class to draw our square:

- -
let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-square1.draw();
-square1.reportArea();
-square1.reportPerimeter();
- -

Aggregating modules

- -

There will be times where you'll want to aggregate modules together. You might have multiple levels of dependencies, where you want to simplify things, combining several submodules into one parent module. This is possible using export syntax of the following forms in the parent module:

- -
export * from 'x.js'
-export { name } from 'x.js'
- -

For an example, see our module-aggregation directory. In this example (based on our earlier classes example) we've got an extra module called shapes.js, which aggregates all the functionality from circle.js, square.js, and triangle.js together. We've also moved our submodules inside a subdirectory inside the modules directory called shapes. So the module structure in this example is:

- -
modules/
-  canvas.js
-  shapes.js
-  shapes/
-    circle.js
-    square.js
-    triangle.js
- -

In each of the submodules, the export is of the same form, e.g.

- -
export { Square };
- -

Next up comes the aggregation part. Inside shapes.js, we include the following lines:

- -
export { Square } from './shapes/square.js';
-export { Triangle } from './shapes/triangle.js';
-export { Circle } from './shapes/circle.js';
- -

These grab the exports from the individual submodules and effectively make them available from the shapes.js module.

- -
-

Note: The exports referenced in shapes.js basically get redirected through the file and don't really exist there, so you won't be able to write any useful related code inside the same file.

-
- -

So now in the main.js file, we can get access to all three module classes by replacing

- -
import { Square } from './modules/square.js';
-import { Circle } from './modules/circle.js';
-import { Triangle } from './modules/triangle.js';
- -

with the following single line:

- -
import { Square, Circle, Triangle } from './modules/shapes.js';
- -

Dynamic module loading

- -

The newest part of the JavaScript modules functionality to be available in browsers is dynamic module loading. This allows you to dynamically load modules only when they are needed, rather than having to load everything up front. This has some obvious performance advantages; let's read on and see how it works.

- -

This new functionality allows you to call {{JSxRef("Statements/import", "import()", "#Dynamic_Imports")}} as a function, passing it the path to the module as a parameter. It returns a {{JSxRef("Promise")}}, which fulfills with a module object (see Creating a module object) giving you access to that object's exports, e.g.

- -
import('./modules/myModule.js')
-  .then((module) => {
-    // Do something with the module.
-  });
- -

Let's look at an example. In the dynamic-module-imports directory we've got another example based on our classes example. This time however we are not drawing anything on the canvas when the example loads. Instead, we include three buttons — "Circle", "Square", and "Triangle" — that, when pressed, dynamically load the required module and then use it to draw the associated shape.

- -

In this example we've only made changes to our index.html and main.js files — the module exports remain the same as before.

- -

Over in main.js we've grabbed a reference to each button using a Document.querySelector() call, for example:

- -
let squareBtn = document.querySelector('.square');
- -

We then attach an event listener to each button so that when pressed, the relevant module is dynamically loaded and used to draw the shape:

- -
squareBtn.addEventListener('click', () => {
-  import('./modules/square.js').then((Module) => {
-    let square1 = new Module.Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue');
-    square1.draw();
-    square1.reportArea();
-    square1.reportPerimeter();
-  })
-});
- -

Note that, because the promise fulfillment returns a module object, the class is then made a subfeature of the object, hence we now need to access the constructor with Module. prepended to it, e.g. Module.Square( ... ).

- -

Troubleshooting

- -

Here are a few tips that may help you if you are having trouble getting your modules to work. Feel free to add to the list if you discover more!

- - - -

See also

- - - -

{{Previous("Web/JavaScript/Guide/Meta_programming")}}

diff --git a/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html b/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html deleted file mode 100644 index 5e88304f5f..0000000000 --- a/files/de/web/javascript/reference/global_objects/object/__definegetter__/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: Object.prototype.__defineGetter__() -slug: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ -translation_of: Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__ ---- -
{{JSRef}}
- -
-

This feature is deprecated in favor of defining getters using the object initializer syntax or the {{jsxref("Object.defineProperty()")}} API. While this feature is widely implemented, it is only described in the ECMAScript specification because of legacy usage. This method should not be used since better alternatives exist.

-
- -

Die __defineGetter__ Methode bindet eine Eigenschaft des Objects an eine Funktion, die aufgerufen wird, wenn das Object angesehen wird.

- -

Syntax

- -
obj.__defineGetter__(prop, func)
- -

Parameters

- -
-
prop
-
Ein String der den Namen der zur Funktion gebundenen Eigenschaft enthält
-
func
-
Eine Funktion die zur Eigenschaft gebunden wird.
-
- -

Return value

- -

{{jsxref("undefined")}}.

- -

Description

- -

Die __defineGetter__ erlaubt einen {{jsxref("Operators/get", "getter", "", 1)}} auf ein Object zu erstellen.

- -

Examples

- -
// Nicht standard und veraltete Weise
-
-var o = {};
-o.__defineGetter__('gimmeFive', function() { return 5; });
-console.log(o.gimmeFive); // 5
-
-
-// Üblicher Weg
-
-// Mithilfe der get Methode
-var o = { get gimmeFive() { return 5; } };
-console.log(o.gimmeFive); // 5
-
-// Mithilfe von Object.defineProperty
-var o = {};
-Object.defineProperty(o, 'gimmeFive', {
-  get: function() {
-    return 5;
-  }
-});
-console.log(o.gimmeFive); // 5
-
- -

Specifications

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}{{Spec2('ESDraft')}}Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("11")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

Compatibility notes

- - - -

See also

- - diff --git a/files/de/web/javascript/reference/global_objects/rangeerror/index.html b/files/de/web/javascript/reference/global_objects/rangeerror/index.html deleted file mode 100644 index d66cd10c55..0000000000 --- a/files/de/web/javascript/reference/global_objects/rangeerror/index.html +++ /dev/null @@ -1,174 +0,0 @@ ---- -title: RangeError -slug: Web/JavaScript/Reference/Global_Objects/RangeError -tags: - - Error - - JavaScript - - NeedsTranslation - - Object - - RangeError - - TopicStub -translation_of: Web/JavaScript/Reference/Global_Objects/RangeError ---- -
{{JSRef}}
- -

The RangeError object indicates an error when a value is not in the set or range of allowed values.

- -

Syntax

- -
new RangeError([message[, fileName[, lineNumber]]])
- -

Parameters

- -
-
message
-
Optional. Human-readable description of the error
-
fileName {{non-standard_inline}}
-
Optional. The name of the file containing the code that caused the exception
-
lineNumber {{non-standard_inline}}
-
Optional. The line number of the code that caused the exception
-
- -

Description

- -

A RangeError is thrown when trying to pass a number as an argument to a function that does not allow a range that includes that number. This can be encountered when attempting to create an array of an illegal length with the {{jsxref("Array")}} constructor, or when passing bad values to the numeric methods {{jsxref("Number.toExponential()")}}, {{jsxref("Number.toFixed()")}} or {{jsxref("Number.toPrecision()")}}.

- -

Properties

- -
-
{{jsxref("RangeError.prototype")}}
-
Allows the addition of properties to an RangeError object.
-
- -

Methods

- -

The global RangeError contains no methods of its own, however, it does inherit some methods through the prototype chain.

- -

RangeError instances

- -

Properties

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}
- -

Methods

- -
{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}
- -

Examples

- -

Using RangeError

- -
var check = function(num) {
-  if (num < MIN || num > MAX) {
-    throw new RangeError('Parameter must be between ' + MIN + ' and ' + MAX);
-  }
-};
-
-try {
-  check(500);
-}
-catch (e) {
-  if (e instanceof RangeError) {
-    // Handle range error
-  }
-}
-
- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('ES3')}}{{Spec2('ES3')}}Initial definition.
{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}{{Spec2('ES5.1')}} 
{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ES6')}} 
{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}{{Spec2('ESDraft')}} 
- -

Browser compatibility

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -

See also

- - diff --git a/files/de/web/manifest/short_name/index.html b/files/de/web/manifest/short_name/index.html deleted file mode 100644 index 0a54ba4c3c..0000000000 --- a/files/de/web/manifest/short_name/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: short_name -slug: Web/Manifest/short_name -translation_of: Web/Manifest/short_name ---- -
{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}
- - - - - - - - - - - - -
TypeString
MandatoryNo
- -

The short_name member is a string that represents the name of the web application displayed to the user if there is not enough space to display name (e.g., as a label for an icon on the phone home screen). short_name is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the dir and lang manifest members.

- -

Examples

- -

Simple short_name in left-to-right language:

- -
"name": "Awesome application",
-"short_name": "Awesome app"
- -

short_name in Arabic, which will be displayed right-to-left:

- -
"dir": "rtl",
-"lang": "ar",
-"name": "تطبيق رائع",
-"short_name": "رائع"
-
- -

Specification

- - - - - - - - - - - - - - - - - - -
SpecificationStatusCommentFeedback
-

{{SpecName('Manifest', '#short_name-member', 'short_name')}}

- 		-

{{Spec2('Manifest')}}

- 		-

Initial definition.

- 		-

Web App Manifest Working Group drafts

-
- -

Browser compatibility

- - - -

{{Compat("html.manifest.short_name")}}

diff --git a/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html deleted file mode 100644 index 93dc70994e..0000000000 --- a/files/de/web/xpath/introduction_to_using_xpath_in_javascript/index.html +++ /dev/null @@ -1,412 +0,0 @@ ---- -title: Einführung in den Gebrauch von XPath in JavaScript -slug: Web/XPath/Introduction_to_using_XPath_in_JavaScript -translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript -original_slug: Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript ---- -

Dieses Dokument beschreibt die Schnittstelle zu XPath in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von DOM 3 XPath, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.

- -

Die Hauptschnittstelle für die Anwendung von XPath ist die evaluate-Methode des document-Objekts.

- -

document.evaluate

- -

Diese Methode wertet  XPath Ausdrücke in Bezug auf ein XML basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein XPathResult-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter document.evaluate zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.

- -
var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result );
-
- -

Parameter

- -

Die evaluate Funktion nimmt insgesamt fünf Parameter entgegen:

- - - -

Rückgabewert

- -

Returns xpathResult, which is an XPathResult object of the type specified in the resultType parameter. The XPathResult Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.

- -

Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren

- -

Wir erstellen einen Namensraumauflöser mit Hilfe der createNSResolver-Methode des document-Objekts.

- -
var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement );
-
- -

Or alternatively by using the <code>createNSResolver</code> method of a <code>XPathEvaluator</code> object. <pre> var xpEvaluator = new XPathEvaluator(); var nsResolver = xpEvaluator.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); </pre> And then pass document.evaluate, the nsResolver variable as the namespaceResolver parameter.

- -

Note: XPath defines QNames without a prefix to match only elements in the null namespace. There is no way in XPath to pick up the default namespace as applied to a regular element reference (e.g., p[@id='_myid'] for xmlns='http://www.w3.org/1999/xhtml'). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as ['namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid'] (this approach works well for dynamic XPath's where the namespaces might not be known) or use prefixed name tests, and create a namespace resolver mapping the prefix to the namespace. Read more on how to create a user defined namespace resolver, if you wish to take the latter approach.

- -

Anmerkungen

- -

Adapts any DOM node to resolve namespaces so that an XPath expression can be easily evaluated relative to the context of the node where it appeared within the document. This adapter works like the DOM Level 3 method lookupNamespaceURI on nodes in resolving the namespaceURI from a given prefix using the current information available in the node's hierarchy at the time lookupNamespaceURI is called. Also correctly resolves the implicit xml prefix.

- -

Festlegung des Rückgabetyps

- -

The returned variable xpathResult from document.evaluate can either be composed of individual nodes (simple types), or a collection of nodes (node-set types).

- -

Simple Types

- -

When the desired result type in resultType is specified as either:

- - - -

We obtain the returned value of the expression by accessing the following properties respectively of the XPathResult object.

- - - -
Beispiel
- -

The following uses the XPath expression count(//p) to obtain the number of <p> elements in a HTML document:

- -
var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' );
-
- -

Although JavaScript allows us to convert the number to a string for display, the XPath interface will not automatically convert the numerical result if the stringValue property is requested, so the following code will not work:

- -
var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null );
-
-alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' );
-
- -

Instead it will return an exception with the code NS_DOM_TYPE_ERROR.

- -

Node-Set-Typen

- -

The XPathResult object allows node-sets to be returned in 3 principal different types:

- - - -
Iteratoren
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is a node-set of matched nodes which will behave as an iterator, allowing us to access the individual nodes contained by using the iterateNext() method of the XPathResult.

- -

Once we have iterated over all of the individual matched nodes, iterateNext() will return null.

- -

Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the invalidIteratorState property of XPathResult is set to true, and a NS_ERROR_DOM_INVALID_STATE_ERR exception is thrown.

- -
Iterator Example
- -
var iterator = document.evaluate('//phoneNumber', documentNode, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null );
-
-try {
-  var thisNode = iterator.iterateNext();
-
-  while (thisNode) {
-    alert( thisNode.textContent );
-    thisNode = iterator.iterateNext();
-  }
-}
-catch (e) {
-  dump( 'Error: Document tree modified during iteration ' + e );
-}
-
- -
Momentabbilder (Snapshots)
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is a static node-set of matched nodes, which allows us to access each node through the snapshotItem(itemNumber) method of the XPathResult object, where itemNumber is the index of the node to be retrieved. The total number of nodes contained can be accessed through the snapshotLength property.

- -

Snapshots do not change with document mutations, so unlike the iterators the snapshot does not become invalid, but it may not correspond to the current document, for example the nodes may have been moved, it might contain nodes that no longer exist, or new nodes could have been added.

- -
Snapshot Example
- -
var nodesSnapshot = document.evaluate('//phoneNumber', documentNode, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
-
-for ( var i=0 ; i < nodesSnapshot.snapshotLength; i++ )
-{
-  dump( nodesSnapshot.snapshotItem(i).textContent );
-}
-
- -
Erster Knoten
- -

When the specified result type in the resultType parameter is either:

- - - -

The XPathResult object returned is only the first found node that matched the XPath expression. This can be accessed through the singleNodeValue property of the XPathResult object. This will be null if the node set is empty.

- -

Note that, for the unordered subtype the single node returned might not be the first in document order, but for the ordered subtype you are guaranteed to get the first matched node in the document order.

- -
First Node Example
- -
var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null );
-
-dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent );
-
- -

Die Konstante ANY_TYPE

- -

When the result type in the resultType parameter is specified as ANY_TYPE, the XPathResult object returned, will be whatever type that naturally results from the evaluation of the expression.

- -

It could be any of the simple types (NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE), but, if the returned result type is a node-set then it will only be an UNORDERED_NODE_ITERATOR_TYPE.

- -

To determine that type after evaluation, we use the resultType property of the XPathResult object. The constant values of this property are defined in the appendix. None Yet =====Any_Type Example===== <pre> </pre>

- -

Beispiele

- -

Innerhalb eines HTML-Dokuments

- -

The following code is intended to be placed in any JavaScript fragment within or linked to the HTML document against which the XPath expression is to be evaluated.

- -

To extract all the <h2> heading elements in an HTML document using XPath, the xpathExpression is simply '//h2'. Where, // is the Recursive Descent Operator that matches elements with the nodeName h2 anywhere in the document tree. The full code for this is: link to introductory xpath doc

- -
var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null );
-
- -

Notice that, since HTML does not have namespaces, we have passed null for the namespaceResolver parameter.

- -

Since we wish to search over the entire document for the headings, we have used the document object itself as the contextNode.

- -

The result of this expression is an XPathResult object. If we wish to know the type of result returned, we may evaluate the resultType property of the returned object. In this case, that will evaluate to 4, an UNORDERED_NODE_ITERATOR_TYPE. This is the default return type when the result of the XPath expression is a node set. It provides access to a single node at a time and may not return nodes in a particular order. To access the returned nodes, we use the iterateNext() method of the returned object:

- -
var thisHeading = headings.iterateNext();
-
-var alertText = 'Level 2 headings in this document are:\n'
-
-while (thisHeading) {
-  alertText += thisHeading.textContent + '\n';
-  thisHeading = headings.iterateNext();
-}
-
- -

Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the h2 elements returned from our expression, any further calls to iterateNext() will return null.

- -

Auswertung an einem XML-Dokument innerhalb einer Erweiterung

- -

The following uses an XML document located at chrome://yourextension/content/peopleDB.xml as an example.

- -
<?xml version="1.0"?>
-<people xmlns:xul = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
-  <person>
-	<name first="george" last="bush" />
-	<address street="1600 pennsylvania avenue" city="washington" country="usa"/>
-	<phoneNumber>202-456-1111</phoneNumber>
-  </person>
-  <person>
-	<name first="tony" last="blair" />
-	<address street="10 downing street" city="london" country="uk"/>
-	<phoneNumber>020 7925 0918</phoneNumber>
-  </person>
-</people>
-
- -

To make the contents of the XML document available within the extension, we create an XMLHttpRequest object to load the document synchronously, the variable xmlDoc will contain the document as an XMLDocument object against which we can use the evaluate method

- -

JavaScript used in the extensions xul/js documents.

- -
var req = new XMLHttpRequest();
-
-req.open("GET", "chrome://yourextension/content/peopleDB.xml", false);
-req.send(null);
-
-var xmlDoc = req.responseXML;
-
-var nsResolver = xmlDoc.createNSResolver( xmlDoc.ownerDocument == null ? xmlDoc.documentElement : xmlDoc.ownerDocument.documentElement);
-
-var personIterator = xmlDoc.evaluate('//person', xmlDoc, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Anmerkung

- -

When the XPathResult object is not defined, the constants can be retreived in privileged code using Components.interfaces.nsIDOMXPathResult.ANY_TYPE (CI.nsIDOMXPathResult). Similarly, an XPathEvaluator can be created using:

- -
Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)
- -

Anhang

- -

Einen benutzerdefinierten Namensauflöser implementieren

- -

This is an example for illustration only. This function will need to take namespace prefixes from the xpathExpression and return the URI that corresponds to that prefix. For example, the expression:

- -
'//xhtml:td/mathml:math'
-
- -

will select all MathML expressions that are the children of (X)HTML table data cell elements.

- -

In order to associate the 'mathml:' prefix with the namespace URI 'http://www.w3.org/1998/Math/MathML' and 'xhtml:' with the URI 'http://www.w3.org/1999/xhtml' we provide a function:

- -
function nsResolver(prefix) {
-  var ns = {
-    'xhtml' : 'http://www.w3.org/1999/xhtml',
-    'mathml': 'http://www.w3.org/1998/Math/MathML'
-  };
-  return ns[prefix] || null;
-}
-
- -

Our call to document.evaluate would then looks like:

- -
document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null );
-
- -

Einen Standard-Namensrauf für XML-Dokumente implementieren

- -

As noted in the Implementing a Default Namespace Resolver previously, the default resolver does not handle the default namespace for XML documents. For example with this document:

- -
<?xml version="1.0" encoding="UTF-8"?>
-<feed xmlns="http://www.w3.org/2005/Atom">
-    <entry />
-    <entry />
-    <entry />
-</feed>
-
- -

doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null) will return an empty set, where nsResolver is the resolver returned by createNSResolver. Passing a null resolver doesn't work any better, either.

- -

One possible workaround is to create a custom resolver that returns the correct default namespace (the Atom namespace in this case). Note that you still have to use some namespace prefix in your XPath expression, so that the resolver function will be able to change it to your required namespace. E.g.:

- -
function resolver() {
-    return 'http://www.w3.org/2005/Atom';
-}
-doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null)
-
- -

Note that a more complex resolver will be required if the document uses multiple namespaces.

- -

An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.

- -

Using XPath functions to reference elements with a default namespace

- -

Another approach to match default elements in a non-null namespace (and one which works well for dynamic XPath expressions where the namespaces might not be known), involves referring to a particular element using a form such as [namespace-uri()='http://www.w3.org/1999/xhtml' and name()='p' and @id='_myid']. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.

- -

Getting specifically namespaced elements and attributes regardless of prefix

- -

If one wishes to provide flexibility in namespaces (as they are intended) by not necessarily requiring a particular prefix to be used when finding a namespaced element or attribute, one must use special techniques.

- -

While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using local-name() in combination with namespace-uri() instead of name()), a more challenging situation occurs, however, if one wishes to grab an element with a particular namespaced attribute in a predicate (given the absence of implementation-independent variables in XPath 1.0).

- -

For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='http://www.w3.org/1999/xlink'];

- -

This could inadvertently grab some elements if one of its attributes existed that had a local name of "href", but it was a different attribute which had the targeted (XLink) namespace (instead of @href).

- -

In order to accurately grab elements with the XLink @href attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:

- -
var xpathEls = 'someElements[@*[local-name() = "href" and namespace-uri() = "http://www.w3.org/1999/xlink"]]'; // Grabs elements with any single attribute that has both the local name 'href' and the XLink namespace
-var thislevel = xml.evaluate(xpathEls, xml, null, XPathResult.ANY_TYPE, null);
-var thisitemEl = thislevel.iterateNext();
-
- -

In XPathResult definierte Konstanten

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Result Type Defined ConstantValueDescription
ANY_TYPE0A result set containing whatever type naturally results from evaluation of the expression. Note that if the result is a node-set then UNORDERED_NODE_ITERATOR_TYPE is always the resulting type.
NUMBER_TYPE1A result containing a single number. This is useful for example, in an XPath expression using the count() function.
STRING_TYPE2A result containing a single string.
BOOLEAN_TYPE3A result containing a single boolean value. This is useful for example, in an XPath expression using the not() function.
UNORDERED_NODE_ITERATOR_TYPE4A result node-set containing all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_ITERATOR_TYPE5A result node-set containing all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
UNORDERED_NODE_SNAPSHOT_TYPE6A result node-set containing snapshots of all the nodes matching the expression. The nodes may not necessarily be in the same order that they appear in the document.
ORDERED_NODE_SNAPSHOT_TYPE7A result node-set containing snapshots of all the nodes matching the expression. The nodes in the result set are in the same order that they appear in the document.
ANY_UNORDERED_NODE_TYPE8A result node-set containing any single node that matches the expression. The node is not necessarily the first node in the document that matches the expression.
FIRST_ORDERED_NODE_TYPE9A result node-set containing the first node in the document that matches the expression.
- -

Siehe auch

- - - -
-

Original Document Information

- - -
-- cgit v1.2.3-54-g00ecf