diff options
Diffstat (limited to 'files/de')
63 files changed, 0 insertions, 15689 deletions
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 ---- -<div>{{LearnSidebar}}</div> - -<div class="summary"> -<p>Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert</p> -</div> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Voraussetzungen:</th> - <td>Keine, aber wir empfehlen dir den Artikel <a href="/en-US/docs/Learn/Thinking_before_coding">setting project goals</a> zuerst zu lesen.</td> - </tr> - <tr> - <th scope="row">Ziel:</th> - <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td> - </tr> - </tbody> -</table> - -<h2 id="Summary">Summary</h2> - -<p>Das <strong>Internet</strong> 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.</p> - -<p><a href="https://en.wikipedia.org/wiki/Internet#History" rel="external">The history of the Internet is somewhat obscure</a>. 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.</p> - -<h2 id="Active_Learning">Active Learning</h2> - -<ul> - <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> -</ul> - -<h2 id="Deeper_dive">Deeper dive</h2> - -<h3 id="A_simple_network">A simple network</h3> - -<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p> - -<div class="note"> -<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</p> -</div> - -<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> - -<p>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!</p> - -<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> - -<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> 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.</p> - -<p>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.</p> - -<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> - -<h3 id="A_network_of_networks">A network of networks</h3> - -<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p> - -<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> - -<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</p> - -<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> - -<p>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 <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p> - -<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> - -<p>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 <em>routers</em> 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.</p> - -<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> - -<h3 id="Finding_computers">Finding computers</h3> - -<p>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 <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> - -<p>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 <em>domain name</em>. For example, <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p> - -<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> - -<h3 id="Internet_and_the_web">Internet and the web</h3> - -<p>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 <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> 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")}}.</p> - -<h2 id="Next_steps">Next steps</h2> - -<ul> - <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> - <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> - <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> - -<p>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.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To learn about the different types of values and units used in CSS properties.</td> - </tr> - </tbody> -</table> - -<h2 id="What_is_a_CSS_value">What is a CSS value?</h2> - -<p>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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> or <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. When you see the value <code><color></code> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> reference page.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. 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.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value"><color></a> 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.</p> -</div> - -<p>In the following example we have set the color of our heading using a keyword, and the background using the <code>rgb()</code> function:</p> - -<pre class="brush: css"><code>h1 { - color: black; - background-color: rgb(197,93,161); -} </code> -</pre> - -<p>A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <code><color></code> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, <code>rgb()</code> functions, etc. You can use <em>any</em> available <code><color></code> 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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> you will see that the browser compatibility section lists different types of color value and support for them.</p> - -<p>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.</p> - -<h2 id="Numbers_lengths_and_percentages">Numbers, lengths, and percentages</h2> - -<p>There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Data type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> - <td>An <code><integer></code> is a whole number such as <code>1024</code> or <code>-55</code>.</td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> - <td>A <code><number></code> represents a decimal number — it may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code>, or <code>-1.2</code>.</td> - </tr> - <tr> - <td><code><dimension></code></td> - <td>A <code><dimension></code> is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code> is an umbrella category that includes the <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, and <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> types<a href="/en-US/docs/Web/CSS/resolution">.</a></td> - </tr> - <tr> - <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> - <td>A <code><percentage></code> represents a fraction of some other value, for example <code>50%</code>. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.</td> - </tr> - </tbody> -</table> - -<h3 id="Lengths">Lengths</h3> - -<p>The numeric type you will come across most frequently is <code><length></code>, for example <code>10px</code> (pixels) or <code>30em</code>. 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.</p> - -<h4 id="Absolute_length_units">Absolute length units</h4> - -<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else and are generally considered to always be the same size.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Equivalent to</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Centimeters</td> - <td>1cm = 96px/2.54</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Millimeters</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Quarter-millimeters</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>Inches</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/6th of 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Points</td> - <td>1pt = 1/72th of 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Pixels</td> - <td>1px = 1/96th of 1in</td> - </tr> - </tbody> -</table> - -<p>Most of these values are more useful when used for print, rather than screen output. For example we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p> - -<h4 id="Relative_length_units">Relative length units</h4> - -<p>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.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Relative to</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Font size of the element.</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>x-height of the element's font.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>The advance measure (width) of the glyph "0" of the element's font.</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>Font size of the root element.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>Line height of the element.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>1% of the viewport's width.</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>1% of the viewport's height.</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>1% of the viewport's smaller dimension.</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>1% of the viewport's larger dimension.</td> - </tr> - </tbody> -</table> - -<h4 id="Exploring_an_example">Exploring an example</h4> - -<p>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.</p> - -<p>The second box has a width set in <code>vw</code> (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 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p> - -<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> 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.</p> - -<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> - -<h4 id="ems_and_rems">ems and rems</h4> - -<p><code>Die relativen Maßeneinheiten, <strong>em</strong></code><strong> </strong>und <strong><code>rem</code></strong><code>,</code>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 <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p> - -<p>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 <em>ems</em> and the second a class of <em>rems</em>.</p> - -<p>To start with, we set 16px as the font size on the <code><html></code> element.</p> - -<p><strong>To recap, the em unit means "my parent element's font-size"</strong>. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p> - -<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code><html></code>). This means that each successive level of nesting does not keep getting larger.</p> - -<p>However, if you change the <code><html></code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> - -<h3 id="Percentages">Percentages</h3> - -<p>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 <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p> - -<p>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.</p> - -<p>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!</p> - -<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> - -<p>The next example has font sizes set in percentages. Each <code><li></code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> - -<p>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 <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code> then you can use a length or a percentage. If the allowed value only includes <code><length></code>, it is not possible to use a percentage.</p> - -<h3 id="Numbers">Numbers</h3> - -<p>Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p> - -<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p> -</div> - -<h2 id="Color">Color</h2> - -<p>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.</p> - -<p>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.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h3 id="Color_keywords">Color keywords</h3> - -<p>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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> value.</p> - -<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p> - -<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3> - -<p>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 <code>0123456789abcdef</code>. 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.)</p> - -<p>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.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> - -<p><strong>Again, try changing the values to see how the colors vary.</strong></p> - -<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3> - -<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — 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.</p> - -<p>Let's rewrite our last example to use RGB colors:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> - -<p>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 <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<p>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.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> - -<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> 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.</p> -</div> - -<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3> - -<p>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 <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p> - -<ul> - <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li> - <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li> - <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li> -</ul> - -<p>We can update the RGB example to use HSL colors like this:</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> - -<p>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.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> - -<p>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!</p> - -<h2 id="Images">Images</h2> - -<p>The <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p> - -<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: there are some other possible values for <code><image></code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type if you want to read about them.</p> -</div> - -<h2 id="Position">Position</h2> - -<p>The <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> 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.</p> - -<p>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 <code>center</code>.</p> - -<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> - -<p><strong>Play around with these values to see how you can push the image around.</strong></p> - -<h2 id="Strings_and_identifiers">Strings and identifiers</h2> - -<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code><color></code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p> - -<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. 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.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> - -<h2 id="Functions">Functions</h2> - -<p>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 — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p> - -<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> 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.</p> - -<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> 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 <code>calc()</code> to tell the browser to do it for us.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> - -<h2 id="Summary">Summary</h2> - -<p>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 <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p> - -<p>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.</p> - -<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> - -<p class="summary">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.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vorwissen:</th> - <td>HTML Grundlagen (siehe <a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>).</td> - </tr> - <tr> - <th scope="row">Ziel:</th> - <td>To gain basic familiarity with HTML tables.</td> - </tr> - </tbody> -</table> - -<h2 id="What_is_a_table">What is a table ?</h2> - -<p>A table is a structured set of data made up of rows and columns (<strong>tabular data</strong>). 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.</p> - -<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> - -<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> - -<p>Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:</p> - -<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> - -<p>It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.</p> - -<h3 id="How_does_a_table_work">How does a table work?</h3> - -<p>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.</p> - -<table> - <caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption> - <thead> - <tr> - <td colspan="2"></td> - <th scope="col">Name</th> - <th scope="col">Mass (10<sup>24</sup>kg)</th> - <th scope="col">Diameter (km)</th> - <th scope="col">Density (kg/m<sup>3</sup>)</th> - <th scope="col">Gravity (m/s<sup>2</sup>)</th> - <th scope="col">Length of day (hours)</th> - <th scope="col">Distance from Sun (10<sup>6</sup>km)</th> - <th scope="col">Mean temperature (°C)</th> - <th scope="col">Number of moons</th> - <th scope="col">Notes</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th> - <th scope="row">Mercury</th> - <td>0.330</td> - <td>4,879</td> - <td>5427</td> - <td>3.7</td> - <td>4222.6</td> - <td>57.9</td> - <td>167</td> - <td>0</td> - <td>Closest to the Sun</td> - </tr> - <tr> - <th scope="row">Venus</th> - <td>4.87</td> - <td>12,104</td> - <td>5243</td> - <td>8.9</td> - <td>2802.0</td> - <td>108.2</td> - <td>464</td> - <td>0</td> - <td></td> - </tr> - <tr> - <th scope="row">Earth</th> - <td>5.97</td> - <td>12,756</td> - <td>5514</td> - <td>9.8</td> - <td>24.0</td> - <td>149.6</td> - <td>15</td> - <td>1</td> - <td>Our world</td> - </tr> - <tr> - <th scope="row">Mars</th> - <td>0.642</td> - <td>6,792</td> - <td>3933</td> - <td>3.7</td> - <td>24.7</td> - <td>227.9</td> - <td>-65</td> - <td>2</td> - <td>The red planet</td> - </tr> - <tr> - <th rowspan="4" scope="rowgroup">Jovian planets</th> - <th rowspan="2" scope="rowgroup">Gas giants</th> - <th scope="row">Jupiter</th> - <td>1898</td> - <td>142,984</td> - <td>1326</td> - <td>23.1</td> - <td>9.9</td> - <td>778.6</td> - <td>-110</td> - <td>67</td> - <td>The largest planet</td> - </tr> - <tr> - <th scope="row">Saturn</th> - <td>568</td> - <td>120,536</td> - <td>687</td> - <td>9.0</td> - <td>10.7</td> - <td>1433.5</td> - <td>-140</td> - <td>62</td> - <td></td> - </tr> - <tr> - <th rowspan="2" scope="rowgroup">Ice giants</th> - <th scope="row">Uranus</th> - <td>86.8</td> - <td>51,118</td> - <td>1271</td> - <td>8.7</td> - <td>17.2</td> - <td>2872.5</td> - <td>-195</td> - <td>27</td> - <td></td> - </tr> - <tr> - <th scope="row">Neptune</th> - <td>102</td> - <td>49,528</td> - <td>1638</td> - <td>11.0</td> - <td>16.1</td> - <td>4495.1</td> - <td>-200</td> - <td>14</td> - <td></td> - </tr> - <tr> - <th colspan="2" scope="rowgroup">Dwarf planets</th> - <th scope="row">Pluto</th> - <td>0.0146</td> - <td>2,370</td> - <td>2095</td> - <td>0.7</td> - <td>153.3</td> - <td>5906.4</td> - <td>-225</td> - <td>5</td> - <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td> - </tr> - </tbody> -</table> - -<p>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.</p> - -<h3 id="Table_styling">Table styling</h3> - -<p>You can also have a <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">look at the live example</a> 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.</p> - -<p>Be under no illusion; for tables to be effective on the web, you need to provide some styling information with <a href="/en-US/docs/Learn/CSS">CSS</a>, 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 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a> article after you've finished here.</p> - -<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">stylesheet here</a>, and you can also find an <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML template</a> that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.</p> - -<h3 id="When_should_you_NOT_use_HTML_tables">When should you NOT use HTML tables?</h3> - -<p>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 <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> in our <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a>. 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.</p> - -<p>In short, using tables for layout rather than <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout techniques</a> is a bad idea. The main reasons are as follows:</p> - -<ol> - <li><strong>Layout tables reduce accessibility for visually impaired users</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders</a>, 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.</li> - <li><strong>Tables produce tag soup</strong>: 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.</li> - <li><strong>Tables are not automatically responsive</strong>: 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.</li> -</ol> - -<h2 id="Active_learning_Creating_your_first_table">Active learning: Creating your first table</h2> - -<p>We've talked table theory enough, so, let's dive into a practical example and build up a simple table.</p> - -<ol> - <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> in a new directory on your local machine.</li> - <li>The content of every table is enclosed by these two tags : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Add these inside the body of your HTML.</li> - <li>The smallest container inside a table is a table cell, which is created by a <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> element ('td' stands for 'table data'). Add the following inside your table tags: - <pre class="brush: html"><td>Hi, I'm your first cell.</td></pre> - </li> - <li>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: - <pre class="brush: html"><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></pre> - </li> -</ol> - -<p>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 <code><td></code> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.</p> - -<p>To stop this row from growing and start placing subsequent cells on a second row, we need to use the <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> element ('tr' stands for 'table row'). Let's investigate this now.</p> - -<ol> - <li>Place the four cells you've already created inside <code><tr></code> tags, like so: - - <pre class="brush: html"><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></pre> - </li> - <li>Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <code><tr></code> element, with each cell contained in a <code><td></code>.</li> -</ol> - -<p>This should result in a table that looks something like the following:</p> - -<table> - <tbody> - <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> - <tr> - <td>Second row, first cell.</td> - <td>Cell 2.</td> - <td>Cell 3.</td> - <td>Cell 4.</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note</strong>: You can also find this on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p> -</div> - -<h2 id="Adding_headers_with_<th>_elements">Adding headers with <th> elements</h2> - -<p>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:</p> - -<pre class="brush: html"><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></pre> - -<p>Now the actual rendered table:</p> - -<table> - <tbody> - <tr> - <td></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> - </tbody> -</table> - -<p>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.</p> - -<h3 id="Active_learning_table_headers">Active learning: table headers</h3> - -<p>Let's have a go at improving this table.</p> - -<ol> - <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.</li> - <li>To recognize the table headers as headers, both visually and semantically, you can use the <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> element ('th' stands for 'table header'). This works in exactly the same way as a <code><td></code>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <code><td></code> elements surrounding the table headers into <code><th></code> elements.</li> - <li>Save your HTML and load it in a browser, and you should see that the headers now look like headers.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">see it live also</a>).</p> -</div> - -<h3 id="Why_are_headers_useful">Why are headers useful?</h3> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<p>Tables headers also have an added benefit — along with the <code>scope</code> 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.</p> - -<h2 id="Allowing_cells_to_span_multiple_rows_and_columns">Allowing cells to span multiple rows and columns</h2> - -<p>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.</p> - -<p>The initial markup looks like this:</p> - -<pre class="brush: html"><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></pre> - -<p>But the output doesn't give us quite what we want:</p> - -<table> - <tbody> - <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> - </tbody> -</table> - -<p>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 <code>colspan</code> and <code>rowspan</code> 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, <code>colspan="2"</code> makes a cell span two columns.</p> - -<p>Let's use <code>colspan</code> and <code>rowspan</code> to improve this table.</p> - -<ol> - <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same animals example as you saw above.</li> - <li>Next, use <code>colspan</code> to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.</li> - <li>Finally, use <code>rowspan</code> to make "Horse" and "Chicken" span across two rows.</li> - <li>Save and open your code in a browser to see the improvement.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">see it live also</a>).</p> -</div> - -<table id="tabular" style="background-color: white;"> -</table> - -<h2 id="Providing_common_styling_to_columns">Providing common styling to columns</h2> - -<p>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 <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> 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 <em>every</em> <code><td></code> or <code><th></code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p> - -<p>Take the following simple example:</p> - -<pre class="brush: html"><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></pre> - -<p>Which gives us the following result:</p> - -<table> - <tbody> - <tr> - <th>Data 1</th> - <th style="background-color: yellow;">Data 2</th> - </tr> - <tr> - <td>Calcutta</td> - <td style="background-color: yellow;">Orange</td> - </tr> - <tr> - <td>Robots</td> - <td style="background-color: yellow;">Jazz</td> - </tr> - </tbody> -</table> - -<p>This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a <code>class</code> 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 <code><col></code> element. <code><col></code> elements are specified inside a <code><colgroup></code> container just below the opening <code><table></code> tag. We could create the same effect as we see above by specifying our table as follows:</p> - -<pre class="brush: html"><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></pre> - -<p>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 <code><col></code> element — if we didn't, the styling would just be applied to the first column also.</p> - -<p>If we wanted to apply the styling information to both columns, we could just include one <code><col></code> element with a span attribute on it, like this:</p> - -<pre class="brush: html"><colgroup> - <col style="background-color: yellow" span="2"> -</colgroup></pre> - -<p>Just like <code>colspan</code> and <code>rowspan</code>, <code>span</code> takes a unitless number value that specifies the number of columns you want the styling to apply to.</p> - -<h3 id="Active_learning_colgroup_and_col">Active learning: colgroup and col</h3> - -<p>Now it's time to have a go yourself.</p> - -<p>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.</p> - -<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> - -<p>Recreate the table by following the steps below.</p> - -<ol> - <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.</li> - <li>Add a <code><colgroup></code> element at the top of the table, just underneath the <code><table></code> tag, in which you can add your <code><col></code> elements (see the remaining steps below).</li> - <li>The first two columns need to be left unstyled.</li> - <li>Add a background color to the third column. The value for your <code>style</code> attribute is <code>background-color:#97DB9A;</code></li> - <li>Set a separate width on the fourth column. The value for your <code>style</code> attribute is <code>width: 42px;</code></li> - <li>Add a background color to the fifth column. The value for your <code>style</code> attribute is <code>background-color: #97DB9A;</code></li> - <li>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 <code>style</code> attribute are <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> - <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code></li> -</ol> - -<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">see it live also</a>).</p> - -<h2 id="Summary">Summary</h2> - -<p>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.</p> - -<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> - -<div> -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li> - <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li> - <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li> -</ul> -</div> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary">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.<br> - Ein Beispiel: Ein Benutzer klickt einen Knopf auf der Website, woraufhin eine Box mit Infromationen eingeblendet wird.<br> - 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.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, a basic understanding of HTML and CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.</td> - </tr> - </tbody> -</table> - -<h2 id="A_series_of_fortunate_events">A series of fortunate events</h2> - -<p>As mentioned above, <strong>events</strong> 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.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> - -<p>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:</p> - -<ul> - <li>The user clicking the mouse over a certain element or hovering the cursor over a certain element.</li> - <li>The user pressing a key on the keyboard.</li> - <li>The user resizing or closing the browser window.</li> - <li>A web page finishing loading.</li> - <li>A form being submitted.</li> - <li>A video being played, or paused, or finishing play.</li> - <li>An error occurring.</li> -</ul> - -<p>You can gather from this (and from glancing at the MDN <a href="/en-US/docs/Web/Events">Event reference</a>) that there are <strong>a lot</strong> of events that can be responded to.</p> - -<p>Each available event has an <strong>event handler</strong>, 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 <strong>registering an event handler</strong>. Note that event handlers are sometimes called <strong>event listeners</strong> — 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.</p> - -<div class="note"> -<p><strong>Note</strong>: Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.</p> -</div> - -<h3 id="A_simple_example">A simple example</h3> - -<p>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:</p> - -<pre class="brush: html"><button>Change color</button></pre> - -<div class="hidden"> -<pre class="brush: css">button { margin: 10px };</pre> -</div> - -<p>The JavaScript looks like so:</p> - -<pre class="brush: js">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; -}</pre> - -<p>In this code, we store a reference to the button inside a constant called <code>btn</code>, 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 <code>btn</code> constant points to a <code><a href="/en-US/docs/Web/HTML/Element/button"><button></a></code> 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 <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> event firing, by setting the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> event handler property to equal an anonymous function containing code that generates a random RGB color and sets the <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> equal to it.</p> - -<p>This code is run whenever the click event fires on the <code><button></code> element, that is, whenever a user clicks on it.</p> - -<p>The example output is as follows:</p> - -<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Its_not_just_web_pages">It's not just web pages</h3> - -<p>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.</p> - -<p>For example, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The <a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> 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 <code>on()</code> to register an event listener, and <code>once()</code> to register an event listener that unregisters after it has run once. The <a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> provide a good example of use.</p> - -<p>As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as <code>onMessage</code> rather than <code>onmessage</code>), and need to be combined with the <code>addListener</code> function. See the <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples"><code>runtime.onMessage</code> page</a> for an example.</p> - -<p>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.</p> - -<h2 id="Ways_of_using_web_events">Ways of using web events</h2> - -<p>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.</p> - -<h3 id="Event_handler_properties">Event handler properties</h3> - -<p>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:</p> - -<pre class="brush: js">const btn = document.querySelector('button'); - -btn.onclick = function() { - const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -}</pre> - -<p>The <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 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. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, or <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), 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.</p> - -<p>You could also set the handler property to be equal to a named function name (like we saw in <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a>). The following would work just the same:</p> - -<pre class="brush: js">const btn = document.querySelector('button'); - -function bgChange() { - const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -} - -btn.onclick = bgChange;</pre> - -<p>There are many different event handler properties available. Let's do an experiment.</p> - -<p>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, 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 <code>btn.onclick</code> to the following different values in turn, and observing the results in the example:</p> - -<ul> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — The color changes when the button is focused and unfocused; try pressing tab to focus on the button and press tab again to focus away from the button. These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — The color changes only when the button is double-clicked.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — The color changes when a key is pressed on the keyboard. The <code>keypress</code> event refers to a general press (button down and then up), while <code>keydown</code> and <code>keyup</code> refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the <a href="/en-US/docs/Web/API/Window">window</a> object, which represents the entire browser window.</li> - <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — The color changes when the mouse pointer is moved so it begins hovering over the button, or when pointer stops hovering over the button and moves off of it, respectively.</li> -</ul> - -<p>Some events are very general and available nearly anywhere (for example an <code>onclick</code> 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 <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> only on specific elements, such as {{htmlelement("video")}}).</p> - -<h3 id="Inline_event_handlers_—_dont_use_these">Inline event handlers — don't use these</h3> - -<p>You might also see a pattern like this in your code:</p> - -<pre class="brush: html"><button onclick="bgChange()">Press me</button> -</pre> - -<pre class="brush: js">function bgChange() { - const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -}</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">see it running live</a>).</p> -</div> - -<p>The earliest method of registering event handlers found on the Web involved <strong>event handler HTML attributes</strong> (or <strong>inline event handlers</strong>) 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:</p> - -<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> - -<p>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.</p> - -<p>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.</p> - -<p>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:</p> - -<pre class="brush: js">const buttons = document.querySelectorAll('button'); - -for (let i = 0; i < buttons.length; i++) { - buttons[i].onclick = bgChange; -}</pre> - -<p class="brush: js">Note that another option here would be to use the <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code> built-in method available on <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code> objects:</p> - -<pre class="brush: js">buttons.forEach(function(button) { - button.onclick = bgChange; -});</pre> - -<div class="note"> -<p><strong>Note</strong>: Separating your programming logic from your content also makes your site more friendly to search engines.</p> -</div> - -<h3 id="addEventListener_and_removeEventListener">addEventListener() and removeEventListener()</h3> - -<p>The newest type of event mechanism is defined in the <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> Specification, which provides browsers with a new function — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. 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:</p> - -<pre class="brush: js">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);</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">see it running live</a>).</p> -</div> - -<p>Inside the <code>addEventListener()</code> 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 <code>addEventListener()</code> function, in an anonymous function, like this:</p> - -<pre class="brush: js">btn.addEventListener('click', function() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -});</pre> - -<p>This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:</p> - -<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> - -<p>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.</p> - -<p>Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied:</p> - -<pre class="brush: js">myElement.onclick = functionA; -myElement.onclick = functionB;</pre> - -<p>The second line overwrites the value of <code>onclick</code> set by the first line. This would work, however:</p> - -<pre class="brush: js">myElement.addEventListener('click', functionA); -myElement.addEventListener('click', functionB);</pre> - -<p>Both functions would now run when the element is clicked.</p> - -<p>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 <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> reference pages.</p> - -<h3 id="What_mechanism_should_I_use">What mechanism should I use?</h3> - -<p>Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.</p> - -<p>The other two are relatively interchangeable, at least for simple uses:</p> - -<ul> - <li>Event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as Internet Explorer 8). You should probably start with these as you are learning.</li> - <li>DOM Level 2 Events (<code>addEventListener()</code>, etc.) are more powerful, but can also become more complex and are less well supported (supported as far back as Internet Explorer 9). You should also experiment with these, and aim to use them where possible.</li> -</ul> - -<p>The main advantages of the third mechanism are that you can remove event handler code if needed, using <code>removeEventListener()</code>, and you can add multiple listeners of the same type to elements if required. For example, you can call <code>addEventListener('click', function() { ... })</code> 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.:</p> - -<pre class="brush: js">element.onclick = function1; -element.onclick = function2; -etc.</pre> - -<div class="note"> -<p><strong>Note</strong>: 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 <code>jQuery</code>) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.</p> -</div> - -<h2 id="Other_event_concepts">Other event concepts</h2> - -<p>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.</p> - -<h3 id="Event_objects">Event objects</h3> - -<p>Sometimes inside an event handler function, you might see a parameter specified with a name such as <code>event</code>, <code>evt</code>, or simply <code>e</code>. This is called the <strong>event object</strong>, 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:</p> - -<pre class="brush: js">function bgChange(e) { - const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - e.target.style.backgroundColor = rndCol; - console.log(e); -} - -btn.addEventListener('click', bgChange);</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">see it running live</a>).</p> -</div> - -<p>Here you can see that we are including an event object, <strong>e</strong>, in the function, and in the function setting a background color style on <code>e.target</code> — which is the button itself. The <code>target</code> 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.</p> - -<div class="note"> -<p><strong>Note</strong>: 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. <code>e</code>/<code>evt</code>/<code>event</code> 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.</p> -</div> - -<p><code>e.target</code> 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 <code>e.target</code>, rather than having to select it in some more difficult way. In the following example (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> for the full source code; also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">running live</a> 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 <code>onclick</code> handler to each that makes it so that a random color is applied to each one when clicked:</p> - -<pre class="brush: js">const divs = document.querySelectorAll('div'); - -for (let i = 0; i < divs.length; i++) { - divs[i].onclick = function(e) { - e.target.style.backgroundColor = bgChange(); - } -}</pre> - -<p>The output is as follows (try clicking around on it — have fun):</p> - -<div class="hidden"> -<h6 id="Hidden_example">Hidden example</h6> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Useful event target example</title> - <style> - div { - height: 100px; - width: 25%; - float: left; - } - </style> - </head> - <body> - <script> - for (let i = 1; i <= 16; i++) { - const myDiv = document.createElement('div'); - myDiv.style.backgroundColor = "red"; - document.body.appendChild(myDiv); - } - - function random(number) { - return Math.floor(Math.random()*number); - } - - function bgChange() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - return rndCol; - } - - const divs = document.querySelectorAll('div'); - - for (let i = 0; i < divs.length; i++) { - divs[i].onclick = function(e) { - e.target.style.backgroundColor = bgChange(); - } - } - </script> - </body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>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 <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, for example, has a <code>dataavailable</code> 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 <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler's event object has a <code>data</code> property available containing the recorded audio or video data to allow you to access it and do something with it.</p> - -<h3 id="Preventing_default_behavior">Preventing default behavior</h3> - -<p>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.)</p> - -<p>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.</p> - -<p>First, a simple HTML form that requires you to enter your first and last name:</p> - -<pre class="brush: html"><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></pre> - -<div class="hidden"> -<pre class="brush: css">div { - margin-bottom: 10px; -} -</pre> -</div> - -<p>Now some JavaScript — here we implement a very simple check inside an <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> 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 <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 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:</p> - -<pre class="brush: js">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!'; - } -}</pre> - -<p>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:</p> - -<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: for the full source code, see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">running live</a> here.)</p> -</div> - -<h3 id="Event_bubbling_and_capture">Event bubbling and capture</h3> - -<p>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 <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> example in a new tab (and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">source code</a> in another tab.) It is also available live below:</p> - -<div class="hidden"> -<h6 id="Hidden_video_example">Hidden video example</h6> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>Show video box example</title> - <style> - div { - position: absolute; - top: 50%; - transform: translate(-50%,-50%); - width: 480px; - height: 380px; - border-radius: 10px; - background-color: #eee; - background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); - } - - .hidden { - left: -50%; - } - - .showing { - left: 50%; - } - - div video { - display: block; - width: 400px; - margin: 40px auto; - } - - </style> - </head> - <body> - <button>Display video</button> - - <div class="hidden"> - <video> - <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> - <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/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> - - <script> - - const btn = document.querySelector('button'); - const videoBox = document.querySelector('div'); - const video = document.querySelector('video'); - - btn.onclick = function() { - displayVideo(); - } - - function displayVideo() { - if(videoBox.getAttribute('class') === 'hidden') { - videoBox.setAttribute('class','showing'); - } - } - - videoBox.addEventListener('click',function() { - videoBox.setAttribute('class','hidden'); - }); - - video.addEventListener('click',function() { - video.play(); - }); - - </script> - </body> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:</p> - -<pre class="brush: html"><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></pre> - -<p>When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <code><div></code> from <code>hidden</code> to <code>showing</code> (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):</p> - -<pre class="brush: js">btn.onclick = function() { - videoBox.setAttribute('class', 'showing'); -}</pre> - -<p>We then add a couple more <code>onclick</code> event handlers — the first one to the <code><div></code> and the second one to the <code><video></code>. The idea is that when the area of the <code><div></code> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.</p> - -<pre class="brush: js">videoBox.onclick = function() { - videoBox.setAttribute('class', 'hidden'); -}; - -video.onclick = function() { - video.play(); -};</pre> - -<p>But there's a problem — currently, when you click the video it starts to play, but it causes the <code><div></code> to also be hidden at the same time. This is because the video is inside the <code><div></code> — it is part of it — so clicking on the video actually runs <em>both</em> the above event handlers.</p> - -<h4 id="Bubbling_and_capturing_explained">Bubbling and capturing explained</h4> - -<p>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 <strong>capturing</strong> phase and the <strong>bubbling</strong> phase.</p> - -<p>In the <strong>capturing</strong> phase:</p> - -<ul> - <li>The browser checks to see if the element's outer-most ancestor ({{htmlelement("html")}}) has an <code>onclick</code> event handler registered on it for the capturing phase, and runs it if so.</li> - <li>Then it moves on to the next element inside <code><html></code> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.</li> -</ul> - -<p>In the <strong>bubbling</strong> phase, the exact opposite occurs:</p> - -<ul> - <li>The browser checks to see if the element that was actually clicked on has an <code>onclick</code> event handler registered on it for the bubbling phase, and runs it if so.</li> - <li>Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <code><html></code> element.</li> -</ul> - -<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> - -<p>(Click on image for bigger diagram)</p> - -<p>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 <code><video></code> element outwards to the <code><html></code> element. Along the way:</p> - -<ul> - <li>It finds the <code>video.onclick...</code> handler and runs it, so the video first starts playing.</li> - <li>It then finds the <code>videoBox.onclick...</code> handler and runs it, so the video is hidden as well.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: In cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase.</p> -</div> - -<h4 id="Fixing_the_problem_with_stopPropagation">Fixing the problem with stopPropagation()</h4> - -<p>This is annoying behavior, but there is a way to fix it! The standard <code><a href="/en-US/docs/Web/API/Event">Event</a></code> object has a function available on it called <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code> 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.</p> - -<p>We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:</p> - -<pre class="brush: js">video.onclick = function(e) { - e.stopPropagation(); - video.play(); -};</pre> - -<p>You can try making a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> and fixing it yourself, or looking at the fixed result in <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">source code</a> here).</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: 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 <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, and setting the optional third property to <code>true</code>.</p> -</div> - -<h4 id="Event_delegation">Event delegation</h4> - -<p>Bubbling also allows us to take advantage of <strong>event delegation</strong> — 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.?</p> - -<p>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 <code>click</code> event listener on the parent <code><ul></code>, and events will bubble from the list items to the <code><ul></code>.</p> - -<p>This concept is explained further on David Walsh's blog, with multiple examples — see <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> - -<h2 id="Test_your_skills!">Test your skills!</h2> - -<p>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 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">Test your skills: Events</a>.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>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.</p> - -<p>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.</p> - -<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="https://discourse.mozilla.org/c/mdn/learn">contact us</a> to ask for help.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li> - <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li> - <li><a href="/en-US/docs/Web/Events">Event reference</a></li> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> - -<p class="summary">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.</p> - -<table class="learn-box"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To gain familiarity with the basics of JavaScript variables.</td> - </tr> - </tbody> -</table> - -<h2 id="Tools_you_need">Tools you need</h2> - -<p>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 <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information on how to access this tool).</p> - -<p>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.</p> - -<h2 id="Was_ist_eine_Variable">Was ist eine Variable?</h2> - -<p>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:</p> - -<pre class="brush: html"><button>Press me</button></pre> - -<pre class="brush: js">var button = document.querySelector('button'); - -button.onclick = function() { - var name = prompt('Wie heißt du?'); - alert('Hallo ' + name + ', schön dich zu sehen!'); -}</pre> - -<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>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.</p> - -<p>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:</p> - -<pre class="example-bad">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 ...</pre> - -<p>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.</p> - -<p>Variables just make sense, and as you learn more about JavaScript they will start to become second nature.</p> - -<p>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.</p> - -<p><u><strong>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.</strong></u></p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> - -<h2 id="Eine_Variable_deklarieren">Eine Variable deklarieren</h2> - -<p>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:</p> - -<pre class="brush: js">var myName; -var myAge;</pre> - -<p>Here we're creating two variables called <code>myName</code> and <code>myAge</code>. Try typing these lines in now in your web browser's console, or in the below console (You can <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">open this console</a> in a separate tab or window if you'd prefer that). After that, try creating a variable (or two) with your own name choices.</p> - -<div class="hidden"> -<h6 id="Hidden_code">Hidden code</h6> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>JavaScript console</title> - <style> - * { - box-sizing: border-box; - } - - html { - background-color: #0C323D; - color: #809089; - font-family: monospace; - } - - body { - max-width: 700px; - } - - p { - margin: 0; - width: 1%; - padding: 0 1%; - font-size: 16px; - line-height: 1.5; - float: left; - } - - .input p { - margin-right: 1%; - } - - .output p { - width: 100%; - } - - .input input { - width: 96%; - float: left; - border: none; - font-size: 16px; - line-height: 1.5; - font-family: monospace; - padding: 0; - background: #0C323D; - color: #809089; - } - - div { - clear: both; - } - - </style> - </head> - <body> - - - </body> - - <script> - var geval = eval; - function createInput() { - var inputDiv = document.createElement('div'); - var inputPara = document.createElement('p'); - var inputForm = document.createElement('input'); - - inputDiv.setAttribute('class','input'); - inputPara.textContent = '>'; - inputDiv.appendChild(inputPara); - inputDiv.appendChild(inputForm); - document.body.appendChild(inputDiv); - - if(document.querySelectorAll('div').length > 1) { - inputForm.focus(); - } - - inputForm.addEventListener('change', executeCode); - } - - function executeCode(e) { - try { - var result = geval(e.target.value); - } catch(e) { - var result = 'error — ' + e.message; - } - - var outputDiv = document.createElement('div'); - var outputPara = document.createElement('p'); - - outputDiv.setAttribute('class','output'); - outputPara.textContent = 'Result: ' + result; - outputDiv.appendChild(outputPara); - document.body.appendChild(outputDiv); - - e.target.disabled = true; - e.target.parentNode.style.opacity = '0.5'; - - createInput() - } - - createInput(); - - </script> -</html></pre> -</div> - -<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> - -<div class="note"> -<p><strong>Note</strong>: In JavaScript, all code instructions should end with a semi-colon (<code>;</code>) — 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.</p> -</div> - -<p>You can test whether these values now exist in the execution environment by typing just the variable's name, e.g.</p> - -<pre class="brush: js">myName; -myAge;</pre> - -<p>They currently have no value; they are empty containers. When you enter the variable names, you should get a value of <code>undefined</code> returned. If they don't exist, you'll get an error message — try typing in</p> - -<pre class="brush: js">scoobyDoo;</pre> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h2 id="Eine_Variable_initialisieren">Eine Variable initialisieren</h2> - -<p>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 (<code>=</code>), followed by the value you want to give it. For example:</p> - -<pre class="brush: js">myName = 'Chris'; -myAge = 37;</pre> - -<p>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:</p> - -<pre class="brush: js">myName; -myAge;</pre> - -<p>You can declare and initialize a variable at the same time, like this:</p> - -<pre class="brush: js">var myName = 'Chris';</pre> - -<p>This is probably what you'll do most of the time, as it is quicker than doing the two actions on two separate lines.</p> - -<div class="note"> -<p><strong>Note</strong>: 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 <strong>hoisting</strong> — read <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> for more detail on the subject.</p> -</div> - -<h2 id="Eine_Variable_aktualisieren">Eine Variable aktualisieren</h2> - -<p>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:</p> - -<pre class="brush: js">myName = 'Bob'; -myAge = 40;</pre> - -<h3 id="An_aside_on_variable_naming_rules">An aside on variable naming rules</h3> - -<p>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.</p> - -<ul> - <li>You shouldn't use other characters because they may cause errors or be hard to understand for an international audience.</li> - <li>Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.</li> - <li>Don't use numbers at the start of variables. This isn't allowed and will cause an error.</li> - <li>A safe convention to stick to is so-called <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.</li> - <li>Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.</li> - <li>Variables are case sensitive — so <code>myage</code> is a different variable to <code>myAge</code>.</li> - <li>One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So you can't use words like <code>var</code>, <code>function</code>, <code>let</code>, and <code>for</code> as variable names. Browsers will recognize them as different code items, and so you'll get errors.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: You can find a fairly complete list of reserved keywords to avoid at <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> -</div> - -<p>Good name examples:</p> - -<pre class="example-good">age -myAge -init -initialColor -finalOutputValue -audio1 -audio2</pre> - -<p>Bad name examples:</p> - -<pre class="example-bad">1 -a -_12 -myage -MYAGE -var -Document -skjfndskjfnbdskjfb -thisisareallylongstupidvariablenameman</pre> - -<p>Error-prone name examples:</p> - -<pre class="example-invalid">var -Document -</pre> - -<p>Try creating a few more variables now, with the above guidance in mind.</p> - -<h2 id="Typen_von_Variablen">Typen von Variablen</h2> - -<p>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.</p> - -<p>So far we've looked at the first two, but there are others.</p> - -<h3 id="Numbers">Numbers</h3> - -<p>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:</p> - -<pre class="brush: js">var myAge = 17;</pre> - -<h3 id="Strings">Strings</h3> - -<p>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.</p> - -<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> - -<h3 id="Booleans">Booleans</h3> - -<p>Booleans are true/false values — they can have two values, <code>true</code> or <code>false</code>. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:</p> - -<pre class="brush: js">var iAmAlive = true;</pre> - -<p>Whereas in reality it would be used more like this:</p> - -<pre class="brush: js">var test = 6 < 3;</pre> - -<p>This is using the "less than" operator (<code><</code>) to test whether 6 is less than 3. As you might expect, it will return <code>false</code>, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.</p> - -<h3 id="Arrays">Arrays</h3> - -<p>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:</p> - -<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim']; -var myNumberArray = [10,15,40];</pre> - -<p>Once these arrays are defined, you can access each value by their location within the array. Try these lines:</p> - -<pre class="brush: js">myNameArray[0]; // should return 'Chris' -myNumberArray[2]; // should return 40</pre> - -<p>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.</p> - -<p>You'll learn a lot more about arrays in a future article.</p> - -<h3 id="Objects">Objects</h3> - -<p>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.</p> - -<p>Try entering the following line into your console:</p> - -<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> - -<p>To retrieve the information stored in the object, you can use the following syntax:</p> - -<pre class="brush: js">dog.name</pre> - -<p>We won't be looking at objects any more for now — you can learn more about those in a future module.</p> - -<h2 id="Dynamic_typing">Dynamic typing</h2> - -<p>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).</p> - -<p>For example, if you declare a variable and give it a value encapsulated in quotes, the browser will treat the variable as a string:</p> - -<pre class="brush: js">var myString = 'Hello';</pre> - -<p>It will still be a string, even if it contains numbers, so be careful:</p> - -<pre class="brush: js">var myNumber = '500'; // oops, this is still a string -typeof myNumber; -myNumber = 500; // much better — now this is a number -typeof myNumber;</pre> - -<p>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 <code>typeof</code> — this returns the data type of the variable you pass into it. The first time it is called, it should return <code>string</code>, as at that point the <code>myNumber</code> variable contains a string, <code>'500'</code>. Have a look and see what it returns the second time you call it.</p> - -<h2 id="Zusammenfassung">Zusammenfassung</h2> - -<p>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.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">The first splash into JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> - -<p class="summary">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.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Voraussetzungen:</th> - <td>Grundsätzliche EDV-Kenntnisse, ein grundlegendes Verständnis für HTML und CSS, mit JavaScript Grundlagen vertraut sein (siehe <a href="/de/docs/Learn/JavaScript/First_steps">Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) und Grundlagen zu OOJS (siehe<a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> - </tr> - <tr> - <th scope="row">Lernziel:</th> - <td>Zu verstehen, wie es in JavaScript möglich ist, Vererbung zu implementieren.</td> - </tr> - </tbody> -</table> - -<h2 id="Prototypal_inheritance">Prototypal inheritance</h2> - -<p>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?</p> - -<p>Let's explore how to do this with a concrete example.</p> - -<h2 id="Getting_started">Getting started</h2> - -<p>First of all, make yourself a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> file (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a> also). Inside here you'll find the same <code>Person()</code> 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:</p> - -<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { - this.name = { - first, - last - }; - this.age = age; - this.gender = gender; - this.interests = interests; -};</pre> - -<p>The methods are <em>all</em> defined on the constructor's prototype. For example:</p> - -<pre class="brush: js notranslate">Person.prototype.greeting = function() { - alert('Hi! I\'m ' + this.name.first + '.'); -};</pre> - -<div class="note"> -<p><strong>Note</strong>: In the source code, you'll also see <code>bio()</code> and <code>farewell()</code> methods defined. Later you'll see how these can be inherited by other constructors.</p> -</div> - -<p>Say we wanted to create a <code>Teacher</code> class, like the one we described in our initial object-oriented definition, which inherits all the members from <code>Person</code>, but also includes:</p> - -<ol> - <li>A new property, <code>subject</code> — this will contain the subject the teacher teaches.</li> - <li>An updated <code>greeting()</code> method, which sounds a bit more formal than the standard <code>greeting()</code> method — more suitable for a teacher addressing some students at school.</li> -</ol> - -<h2 id="Defining_a_Teacher_constructor_function">Defining a Teacher() constructor function</h2> - -<p>The first thing we need to do is create a <code>Teacher()</code> constructor — add the following below the existing code:</p> - -<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { - Person.call(this, first, last, age, gender, interests); - - this.subject = subject; -}</pre> - -<p>This looks similar to the Person constructor in many ways, but there is something strange here that we've not seen before — the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> 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 <code>this</code> 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.</p> - -<p>We want the <code>Teacher()</code> constructor to take the same parameters as the <code>Person()</code> constructor it is inheriting from, so we specify them all as parameters in the <code>call()</code> invocation.</p> - -<p>The last line inside the constructor simply defines the new <code>subject</code> property that teachers are going to have, which generic people don't have.</p> - -<p>As a note, we could have simply done this:</p> - -<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { - this.name = { - first, - last - }; - this.age = age; - this.gender = gender; - this.interests = interests; - this.subject = subject; -}</pre> - -<p>But this is just redefining the properties anew, not inheriting them from <code>Person()</code>, so it defeats the point of what we are trying to do. It also takes more lines of code.</p> - -<h3 id="Inheriting_from_a_constructor_with_no_parameters">Inheriting from a constructor with no parameters</h3> - -<p>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 <code>call()</code>. So, for example, if you had something really simple like this:</p> - -<pre class="brush: js notranslate">function Brick() { - this.width = 10; - this.height = 20; -}</pre> - -<p>You could inherit the <code>width</code> and <code>height</code> properties by doing this (as well as the other steps described below, of course):</p> - -<pre class="brush: js notranslate">function BlueGlassBrick() { - Brick.call(this); - - this.opacity = 0.5; - this.color = 'blue'; -}</pre> - -<p>Note that we've only specified <code>this</code> inside <code>call()</code> — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.</p> - -<h2 id="Setting_Teachers_prototype_and_constructor_reference">Setting Teacher()'s prototype and constructor reference</h2> - -<p>All is good so far, but we have a problem. We have defined a new constructor, and it has a <code>prototype</code> 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 <code>prototype</code> property. To see this, enter <code>Object.getOwnPropertyNames(Teacher.prototype)</code> into either the text input field or your JavaScript console. Then enter it again, replacing <code>Teacher</code> with <code>Person</code>. Nor does the new constructor <em>inherit</em> those methods. To see this, compare the outputs of <code>Person.prototype.greeting</code> and <code>Teacher.prototype.greeting</code>. We need to get <code>Teacher()</code> to inherit the methods defined on <code>Person()</code>'s prototype. So how do we do that?</p> - -<ol> - <li>Add the following line below your previous addition: - <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> - Here our friend <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> comes to the rescue again. In this case we are using it to create a new object and make it the value of <code>Teacher.prototype</code>. The new object has <code>Person.prototype</code> as its prototype and will therefore inherit, if and when needed, all the methods available on <code>Person.prototype</code>.</li> - <li>We need to do one more thing before we move on. After adding the last line, <code>Teacher.</code><code>prototype</code>'s <code>constructor</code> property is now equal to <code>Person()</code>, because we just set <code>Teacher.prototype</code> to reference an object that inherits its properties from <code>Person.prototype</code>! Try saving your code, loading the page in a browser, and entering <code>Teacher.prototype.constructor</code> into the console to verify.</li> - <li>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: - <pre class="brush: js notranslate">Object.defineProperty(Teacher.prototype, 'constructor', { - value: Teacher, - enumerable: false, // so that it does not appear in 'for in' loop - writable: true });</pre> - </li> - <li>Now if you save and refresh, entering <code>Teacher.prototype.constructor</code> should return <code>Teacher()</code>, as desired, plus we are now inheriting from <code>Person()</code>!</li> -</ol> - -<h2 id="Giving_Teacher_a_new_greeting_function">Giving Teacher() a new greeting() function</h2> - -<p>To finish off our code, we need to define a new <code>greeting()</code> function on the <code>Teacher()</code> constructor.</p> - -<p>The easiest way to do this is to define it on <code>Teacher()</code>'s prototype — add the following at the bottom of your code:</p> - -<pre class="brush: js notranslate">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 + '.'); -};</pre> - -<p>This alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.</p> - -<h2 id="Trying_the_example_out">Trying the example out</h2> - -<p>Now that you've entered all the code, try creating an object instance from <code>Teacher()</code> by putting the following at the bottom of your JavaScript (or something similar of your choosing):</p> - -<pre class="brush: js notranslate">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> - -<p>Now save and refresh, and try accessing the properties and methods of your new <code>teacher1</code> object, for example:</p> - -<pre class="brush: js notranslate">teacher1.name.first; -teacher1.interests[0]; -teacher1.bio(); -teacher1.subject; -teacher1.greeting(); -teacher1.farewell();</pre> - -<p>These should all work just fine. The queries on lines 1, 2, 3, and 6 access members inherited from the generic <code>Person()</code> constructor (class). The query on line 4 accesses a member that is available only on the more specialized <code>Teacher()</code> constructor (class). The query on line 5 would have accessed a member inherited from <code>Person()</code>, except for the fact that <code>Teacher()</code> has its own member with the same name, so the query accesses that member.</p> - -<div class="note"> -<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p> -</div> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). 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.</p> - -<p>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. <a href="http://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p> - -<h2 id="A_further_exercise">A further exercise</h2> - -<p>In our <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, we also included a <code>Student</code> class as a concept, which inherits all the features of <code>Person</code>, and also has a different <code>greeting()</code> method from <code>Person</code> that is much more informal than the <code>Teacher</code>'s greeting. Have a look at what the student's greeting looks like in that section, and try implementing your own <code>Student()</code> constructor that inherits all the features of <code>Person()</code>, and implements the different <code>greeting()</code> function.</p> - -<div class="note"> -<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p> -</div> - -<h2 id="Object_member_summary">Object member summary</h2> - -<p>To summarize, you've got four types of property/method to worry about:</p> - -<ol> - <li>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 <code>this.x = x</code> type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the <code>new</code> keyword, e.g. <code>let myInstance = new myConstructor()</code>).</li> - <li>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, <em>not</em> an instance. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>. These are also known as <strong>static properties/methods</strong>.</li> - <li>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 <code>prototype</code> property, e.g. <code>myConstructor.prototype.x()</code>.</li> - <li>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 <code>var teacher1 = new Teacher( name = 'Chris' );</code> and then <code>teacher1.name</code>), or an object literal (<code>let teacher1 = { name = 'Chris' }</code> and then <code>teacher1.name</code>).</li> -</ol> - -<p>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.</p> - -<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2> - -<p>ECMAScript 2015 introduces <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> 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.</p> - -<div class="note"> -<p><strong>Note</strong>: 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).</p> -</div> - -<p>Let's look at a rewritten version of the Person example, class-style:</p> - -<pre class="brush: js notranslate">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!`); - }; -} -</pre> - -<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> statement indicates that we are creating a new class. Inside this block, we define all the features of the class:</p> - -<ul> - <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> method defines the constructor function that represents our <code>Person</code> class.</li> - <li><code>greeting()</code> and <code>farewell()</code> are class methods. Any methods you want associated with the class are defined inside it, after the constructor. In this example, we've used <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> rather than string concatenation to make the code easier to read.</li> -</ul> - -<p>We can now instantiate object instances using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, in just the same way as we did before:</p> - -<pre class="brush: js notranslate">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 -</pre> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h3 id="Inheritance_with_class_syntax">Inheritance with class syntax</h3> - -<p>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 <code>Teacher</code> class, making it inherit from <code>Person</code> using modern class syntax. This is called creating a subclass or subclassing.</p> - -<p>To create a subclass we use the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends keyword</a> to tell JavaScript the class we want to base our class on,</p> - -<pre class="brush: js notranslate">class Teacher extends Person { - constructor(subject, grade) { - this.subject = subject; - this.grade = grade; - } -}</pre> - -<p>but there's a little catch.</p> - -<p>Unlike old-school constructor functions where the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> does the initialization of <code>this</code> to a newly-allocated object, this isn't automatically initialized for a class defined by the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> keyword, i.e the sub-classes.</p> - -<p>Therefore running the above code will give an error:</p> - -<pre class="brush: js notranslate">Uncaught ReferenceError: Must call super constructor in derived class before -accessing 'this' or returning from derived constructor</pre> - -<p>For sub-classes, the <code>this</code> 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.</p> - -<p>Here we are extending the <code>Person</code> class — the <code>Teacher</code> sub-class is an extension of the <code>Person</code> class. So for <code>Teacher</code>, the <code>this</code> initialization is done by the <code>Person</code> constructor.</p> - -<p>To call the parent constructor we have to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a>, like so:</p> - -<pre class="brush: js notranslate">class Teacher extends Person { - constructor(subject, grade) { - super(); // Now 'this' is initialized by calling the parent constructor. - this.subject = subject; - this.grade = grade; - } -}</pre> - -<p>There is no point having a sub-class if it doesn't inherit properties from the parent class.<br> - It is good then, that the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a> also accepts arguments for the parent constructor.</p> - -<p>Looking back to our <code>Person</code> constructor, we can see it has the following block of code in its constructor method:</p> - -<pre class="brush: js notranslate"> constructor(first, last, age, gender, interests) { - this.name = { - first, - last - }; - this.age = age; - this.gender = gender; - this.interests = interests; -} </pre> - -<p>Since the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> operator is actually the parent class constructor, passing it the necessary arguments of the <code>Parent</code> class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it:</p> - -<pre class="brush: js notranslate">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; - } -} -</pre> - -<p>Now when we instantiate <code>Teacher</code> object instances, we can call methods and properties defined on both <code>Teacher</code>and <code>Person</code> as we'd expect:</p> - -<pre class="brush: js notranslate">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 -</pre> - -<p>Like we did with Teachers, we could create other subclasses of <code>Person</code> to make them more specialized without modifying the base class.</p> - -<div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p> -</div> - -<h2 id="Getters_and_Setters">Getters and Setters</h2> - -<p>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 <code>Teacher</code> example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.</p> - -<p>We can handle such situations with getters and setters.</p> - -<p>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.</p> - -<p>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.</p> - -<p>The modified <code>Teacher</code> class looks like this:</p> - -<pre class="brush: js notranslate">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; - } -} -</pre> - -<p>In our class above we have a getter and setter for the <code>subject</code> property. We use <strong><code>_</code> </strong> 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:</p> - -<ul> - <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use the <code>snape.subject</code> getter method.</li> - <li>To assign a new value to the <code>_subject</code> property we can use the <code>snape.subject="new value"</code> setter method.</li> -</ul> - -<p>The example below shows the two features in action:</p> - -<pre class="brush: js notranslate">// 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" -</pre> - -<div class="note"> -<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> 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.</p> -</div> - -<h2 id="When_would_you_use_inheritance_in_JavaScript">When would you use inheritance in JavaScript?</h2> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called <strong>delegation</strong>. Specialized objects delegate functionality to a generic object type.</p> -</div> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Alternatives_for_extending_the_prototype_chain">Alternatives for extending the prototype chain</h2> - -<p>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 <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Inheritance and the prototype chain</a> article.</p> - -<h2 id="Test_your_skills!">Test your skills!</h2> - -<p>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 <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">Test your skills: Object-oriented JavaScript</a>.</p> - -<h2 id="Summary">Summary</h2> - -<p>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.</p> - -<p>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.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li> - <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Secrets of the JavaScript Ninja</a>, Chapter 7 — A good book on advanced JavaScript concepts and techniques, by John Resig, Bear Bibeault, and Josip Maras. Chapter 7 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li> - <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/README.md">You Don't Know JS: this & Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div> - -<p class="summary">This article briefly introduces databases, and how to use them with Node/Express apps. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> 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.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>To be able to design and create your own models using Mongoose.</td> - </tr> - </tbody> -</table> - -<h2 id="Overview">Overview</h2> - -<p>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 <em>database</em>.</p> - -<p>Express apps can use many different databases, and there are several approaches you can use for performing <strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete (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.</p> - -<h3 id="What_databases_can_I_use">What databases can I use?</h3> - -<p><em>Express</em> apps can use any database supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behavior/requirements for database management). There are <a href="https://expressjs.com/en/guide/database-integration.html">many popular options</a>, including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.</p> - -<p>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.</p> - -<p>For more information on the options see <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p> - -<h3 id="What_is_the_best_way_to_interact_with_a_database">What is the best way to interact with a database?</h3> - -<p>There are two common approaches for interacting with a database: </p> - -<ul> - <li>Using the databases' native query language (e.g. SQL)</li> - <li>Using an Object Data Model ("ODM") or an Object Relational Model ("ORM"). An ODM/ORM represents the website's data as JavaScript objects, which are then mapped to the underlying database. Some ORMs are tied to a specific database, while others provide a database-agnostic backend.</li> -</ul> - -<p>The very best <em>performance</em> 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).</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Tip:</strong> 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.</p> -</div> - -<h3 id="What_ORMODM_should_I_use">What ORM/ODM should I use?</h3> - -<p>There are many ODM/ORM solutions available on the NPM package manager site (check out the <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> and <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> tags for a subset!).</p> - -<p>A few solutions that were popular at the time of writing are:</p> - -<ul> - <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose is a <a href="https://www.mongodb.org/">MongoDB</a> object modeling tool designed to work in an asynchronous environment.</li> - <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: An ORM extracted from the Express-based <a href="http://sailsjs.com/">Sails</a> web framework. It provides a uniform API for accessing numerous different databases, including Redis, MySQL, LDAP, MongoDB, and Postgres.</li> - <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Features both promise-based and traditional callback interfaces, providing transaction support, eager/nested-eager relation loading, polymorphic associations, and support for one-to-one, one-to-many, and many-to-many relations. Works with PostgreSQL, MySQL, and SQLite3.</li> - <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Makes it as easy as possible to use the full power of SQL and the underlying database engine (supports SQLite3, Postgres, and MySQL).</li> - <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite, and MSSQL and features solid transaction support, relations, read replication and more.</li> - <li><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2</a> is an Object Relationship Manager for NodeJS. It supports MySQL, SQLite, and Progress, helping to work with the database using an object-oriented approach.</li> - <li><a href="https://graphql.org/">GraphQL</a>: Primarily a query language for restful APIs, GraphQL is very popular, and has features available for reading data from databases.</li> -</ul> - -<p>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.</p> - -<h3 id="Using_Mongoose_and_MongoDb_for_the_LocalLibrary">Using Mongoose and MongoDb for the LocalLibrary</h3> - -<p>For the <em>Local Library</em> example (and the rest of this topic) we're going to use the <a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> to access our library data. Mongoose acts as a front end to <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a>, an open source <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> database that uses a document-oriented data model. A “collection” of “documents” in a MongoDB database <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">is analogous to</a> a “table” of “rows” in a relational database.</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Tip:</strong> You don't need to know MongoDB in order to use Mongoose, although parts of the <a href="http://mongoosejs.com/docs/guide.html">Mongoose documentation</a> <em>are</em> easier to use and understand if you are already familiar with MongoDB.</p> -</div> - -<p>The rest of this tutorial shows how to define and access the Mongoose schema and models for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary website</a> example.</p> - -<h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p>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.).</p> - -<p>Once we've decided on our models and fields, we need to think about the relationships between them.</p> - -<p>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 <code>BookInstance:status</code> — 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.</p> - -<p>The diagram also shows the relationships between the models, including their <em>multiplicities</em>. 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 <code>Book</code> and a <code>Genre</code> are related. The numbers close to the <code>Book</code> model show that a <code>Genre</code> must have zero or more <code>Book</code>s (as many as you like), while the numbers on the other end of the line next to the <code>Genre</code> show that a book can have zero or more associated <code>Genre</code>s.</p> - -<div class="note"> -<p><strong>Note</strong>: As discussed in our <a href="#related_documents">Mongoose primer</a> below it is often better to have the field that defines the relationship between the documents/models in just <em>one</em> model (you can still find the reverse relationship by searching for the associated <code>_id</code> 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.</p> -</div> - -<p><img alt="Mongoose Library Model with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h2 id="Mongoose_primer">Mongoose primer</h2> - -<p>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. </p> - -<div class="note"> -<p><strong>Note:</strong> This primer is heavily influenced by the <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> on <em>npm</em> and the <a href="http://mongoosejs.com/docs/guide.html">official documentation</a>.</p> -</div> - -<h3 id="Installing_Mongoose_and_MongoDB">Installing Mongoose and MongoDB</h3> - -<p>Mongoose is installed in your project (<strong>package.json</strong>) like any other dependency — using NPM. To install it, use the following command inside your project folder:</p> - -<pre class="brush: bash">npm install mongoose -</pre> - -<p>Installing <em>Mongoose</em> 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 <a href="https://www.mongodb.com/download-center">download installers from here</a> for various operating systems and install it locally. You can also use cloud-based MongoDB instances.</p> - -<div class="note"> -<p><strong>Note:</strong> For this tutorial, we'll be using the <a href="https://www.mongodb.com/">MongoDB Atlas</a> cloud-based <em>database as a service</em> 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).</p> -</div> - -<h3 id="Connecting_to_MongoDB">Connecting to MongoDB</h3> - -<p><em>Mongoose</em> requires a connection to a MongoDB database. You can <code>require()</code> and connect to a locally hosted database with <code>mongoose.connect()</code>, as shown below.</p> - -<pre class="brush: js">//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:'));</pre> - -<p>You can get the default <code>Connection</code> object with <code>mongoose.connection</code>. Once connected, the open event is fired on the <code>Connection</code> instance.</p> - -<div class="note"> -<p><strong>Tip:</strong> If you need to create additional connections you can use <code>mongoose.createConnection()</code>. This takes the same form of database URI (with host, database, port, options etc.) as <code>connect()</code> and returns a <code>Connection</code> object).</p> -</div> - -<h3 id="Defining_and_creating_models">Defining and creating models</h3> - -<p>Models are <em>defined </em>using the <code>Schema</code> 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).</p> - -<p>Schemas are then "compiled" into models using the <code>mongoose.model()</code> method. Once you have a model you can use it to find, create, update, and delete objects of the given type.</p> - -<div class="note"> -<p><strong>Note:</strong> Each model maps to a <em>collection</em> of <em>documents</em> in the MongoDB database. The documents will contain the fields/schema types defined in the model <code>Schema</code>.</p> -</div> - -<h4 id="Defining_schemas">Defining schemas</h4> - -<p>The code fragment below shows how you might define a simple schema. First you <code>require()</code> mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.</p> - -<pre class="brush: js">//Require Mongoose -var mongoose = require('mongoose'); - -//Define a schema -var Schema = mongoose.Schema; - -var SomeModelSchema = new Schema({ - a_string: String, - a_date: Date -}); -</pre> - -<p>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.</p> - -<h4 id="Creating_a_model">Creating a model</h4> - -<p>Models are created from schemas using the <code>mongoose.model()</code> method:</p> - -<pre class="brush: js">// Define schema -var Schema = mongoose.Schema; - -var SomeModelSchema = new Schema({ - a_string: String, - a_date: Date -}); - -<strong>// Compile model from schema -var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> - -<p>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 <em>SomeModel</em> above), and the second argument is the schema you want to use in creating the model.</p> - -<div class="note"> -<p><strong>Note:</strong> 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 <a href="#Using_models">Using models</a> section, and when we create our views.</p> -</div> - -<h4 id="Schema_types_fields">Schema types (fields)</h4> - -<p>A schema can have an arbitrary number of fields — each one represents a field in the documents stored in <em>MongoDB</em>. An example schema showing many of the common field types and how they are declared is shown below.</p> - -<pre class="brush: js">var schema = new Schema( -{ - name: <strong>String</strong>, - binary: <strong>Buffer</strong>, - living: <strong>Boolean</strong>, - updated: { type: <strong>Date</strong>, default: Date.now() }, - age: { type: <strong>Number</strong>, min: 18, max: 65, required: true }, - mixed: <strong>Schema.Types.Mixed</strong>, - _someId: <strong>Schema.Types.ObjectId</strong>, - array: <strong>[]</strong>, - ofString: [<strong>String</strong>], // You can also have an array of each of the other types too. - nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } } -})</pre> - -<p>Most of the <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (the descriptors after “type:” or after field names) are self-explanatory. The exceptions are:</p> - -<ul> - <li><code>ObjectId</code>: Represents specific instances of a model in the database. For example, a book might use this to represent its author object. This will actually contain the unique ID (<code>_id</code>) for the specified object. We can use the <code>populate()</code> method to pull in the associated information when needed.</li> - <li><code><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a></code>: An arbitrary schema type.</li> - <li><code>[]</code>: An array of items. You can perform JavaScript array operations on these models (push, pop, unshift, etc.). The examples above show an array of objects without a specified type and an array of <code>String</code> objects, but you can have an array of any type of object.</li> -</ul> - -<p>The code also shows both ways of declaring a field:</p> - -<ul> - <li>Field <em>name</em> and <em>type</em> as a key-value pair (i.e. as done with fields <code>name</code>, <code>binary </code>and <code>living</code>).</li> - <li>Field <em>name</em> followed by an object defining the <code>type</code>, and any other <em>options</em> for the field. Options include things like: - <ul> - <li>default values.</li> - <li>built-in validators (e.g. max/min values) and custom validation functions.</li> - <li>Whether the field is required</li> - <li>Whether <code>String</code> fields should automatically be set to lowercase, uppercase, or trimmed (e.g. <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li> - </ul> - </li> -</ul> - -<p>For more information about options see <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs).</p> - -<h4 id="Validation">Validation</h4> - -<p>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.</p> - -<p>The built-in validators include:</p> - -<ul> - <li>All <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> have the built-in <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> validator. This is used to specify whether the field must be supplied in order to save a document.</li> - <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> have <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> and <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a> validators.</li> - <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> have: - <ul> - <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: specifies the set of allowed values for the field.</li> - <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: specifies a regular expression that the string must match.</li> - <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> and <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> for the string.</li> - </ul> - </li> -</ul> - -<p>The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:</p> - -<pre class="brush: js">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',] - } -}); -</pre> - -<p>For complete information on field validation see <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs).</p> - -<h4 id="Virtual_properties">Virtual properties</h4> - -<p>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.</p> - -<div class="note"> -<p><strong>Note:</strong> 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 <code>_id</code> value.</p> -</div> - -<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p> - -<h4 id="Methods_and_query_helpers">Methods and query helpers</h4> - -<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. 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 <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p> - -<h3 id="Using_models">Using models</h3> - -<p>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.</p> - -<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p> - -<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4> - -<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p> - -<pre class="brush: js">// 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! -}); -</pre> - -<p>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.</p> - -<p>You can also use <code>create()</code> 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.</p> - -<pre class="brush: js">SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) { - if (err) return handleError(err); - // saved! -});</pre> - -<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p> - -<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p> - -<pre class="brush: js">// 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! -}); -</pre> - -<h4 id="Searching_for_records">Searching for records</h4> - -<p>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 <em>name</em> and <em>age</em>. 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.</p> - -<pre class="brush: js">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. -})</pre> - -<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p> - -<div class="note"> -<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p> -</div> - -<div class="note"> -<p><strong>Note:</strong> It is important to remember that not finding any results is <strong>not an error</strong> 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 (<code>results==null</code>) or daisy chain the <a href="https://mongoosejs.com/docs/api.html#query_Query-orFail">orFail()</a> method on the query. </p> -</div> - -<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p> - -<pre class="brush: js">// 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 -})</pre> - -<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> 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.</p> - -<pre class="brush: js">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.</pre> - -<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p> - -<ul> - <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li> - <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li> - <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either updates or removes it. These are useful convenience functions for updating and removing records.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> 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.</p> -</div> - -<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p> - -<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4> - -<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p> - -<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p> - -<pre class="brush: js">var mongoose = require('mongoose') - , Schema = mongoose.Schema - -var authorSchema = Schema({ - name : String, - stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }] -}); - -var storySchema = Schema({ - author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' }, - title : String -}); - -var Story = mongoose.model('Story', storySchema); -var Author = mongoose.model('Author', authorSchema);</pre> - -<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a story, and assign the author id to our story's author field.</p> - -<pre class="brush: js">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 - }); -});</pre> - -<p>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 <code>populate()</code>, as shown below.</p> - -<pre class="brush: js">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" -});</pre> - -<div class="note"> -<p><strong>Note:</strong> 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 <code>stories</code> 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.</p> - -<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p> - -<pre class="brush: js">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. -}); -</pre> -</div> - -<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p> - -<h3 id="One_schemamodel_per_file">One schema/model per file</h3> - -<p>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:</p> - -<pre class="brush: js">// 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, -}); - -<strong>//Export function to create "SomeModel" model class -module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> - -<p>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.</p> - -<pre class="brush: js">//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);</pre> - -<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2> - -<p>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 <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p> - -<p>For this tutorial, we're going to use the <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a> free cloud-hosted <a href="https://www.mongodb.com/cloud/atlas/pricing">sandbox</a> 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 <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.objectrocket.com/">ObjectRocket</a>).</p> - -<div class="note"> -<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center/community">appropriate binaries for your system</a>. 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 <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to Production</a> tutorial requires some form of remote database, since the free tier of the <a href="https://www.heroku.com/">Heroku</a> service does not provide persistent storage. It is therefore highly recommended to use <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>.</p> -</div> - -<p>You will first need to <a href="https://www.mongodb.com/cloud/atlas/register">create an account</a> with MongoDB Atlas (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p> - -<p>After logging in, you'll be taken to the <a href="https://cloud.mongodb.com/v2">home</a> screen:</p> - -<ol> - <li>Click <strong>Build a Cluster</strong> button in the Clusters Overview section.<br> - <img alt="Create a cluster on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16516/MongoDB_Atlas_-_CreateCluster.jpg" style="border-style: solid; border-width: 1px; height: 549px; width: 742px;"></li> - <li>This will open the <em>Create New Cluster</em> screen.<br> - <img alt="Choose a cloud provider when using MongoDB Atlas." src="https://mdn.mozillademos.org/files/16511/MongoDB_Atlas_-_ChooseProviderRegion.jpg" style="border-style: solid; border-width: 1px; height: 656px; width: 742px;"> - <ul> - <li>Select any provider from the <em>Cloud Provider & Region </em>section. Different providers offer different regions.</li> - <li>Select any region marked "FREE TIER AVAILABLE".</li> - <li>Click the <strong>Create Cluster</strong> button (creation of the cluster will take some minutes).</li> - </ul> - </li> - <li> - <p>You will return to the <em>Cluster Overview</em> screen.<br> - <img alt="Setup a collection on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16517/MongoDB_Atlas_-_CreateCollection.jpg" style="border-style: solid; border-width: 1px; height: 399px; width: 742px;"></p> - - <ul> - <li> - <p>Click the <strong>Collections</strong> button.</p> - </li> - </ul> - </li> - <li>This will open the <em>Collections</em> section.<br> - <img alt="Create a database on MongoDB Atlas." src="https://mdn.mozillademos.org/files/17151/MongoDB_Atlas_-_CreateDatabase2.PNG" style="border-style: solid; border-width: 1px; height: 519px; width: 1130px;"> - <ul> - <li>Click the <strong>Add My Own Data</strong> button.</li> - </ul> - </li> - <li>This will open the <em>Create Database</em> screen.<br> - <img alt="Details during database creation on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16520/MongoDB_Atlas_-_DatabaseDetails.jpg" style="border-style: solid; border-width: 1px; height: 441px; width: 416px;"> - <ul> - <li>Enter the name for the new database as <code>local_library</code>.</li> - <li>Enter the name of the collection as <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Collection0</span></font>.</li> - <li>Click the <strong>Create</strong> button to create the database.</li> - </ul> - </li> - <li>You will return to the Collection screen with your database created.<br> - <img alt="Database creation confirmation on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16519/MongoDB_Atlas_-_DatabaseCreated.jpg" style="border-style: solid; border-width: 1px; height: 305px; width: 742px;"> - <ul> - <li>Click the <em>Overview</em> tab to return the cluster overview.</li> - </ul> - </li> - <li>From the Cluster0 Overview screen click the <strong>Connect</strong> button.<br> - <img alt="Configure a connection when after setting up a cluster in MongoDB Atlas." src="https://mdn.mozillademos.org/files/16512/MongoDB_Atlas_-_Connectbutton.jpg" style="border-style: solid; border-width: 1px; height: 308px; width: 742px;"></li> - <li>This will open the Connect to Cluster screen.<br> - <img alt="Setup a connection when using MongoDB Atlas." src="https://mdn.mozillademos.org/files/16513/MongoDB_Atlas_-_ConnectCluster.jpg" style="border-style: solid; border-width: 1px; height: 771px; width: 690px;"> - <ul> - <li>Click the <strong>Add a Different IP Address</strong> button, enter <code>0.0.0.0/0</code> for the IP Address and click <strong>Add IP Address</strong> button. - <div class="blockIndicator note"> - <p><strong>Note:</strong> 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.</p> - </div> - </li> - <li>Enter a username and password and click <strong>Create MongoDB User</strong> button. - <div class="blockIndicator note"> - <p><strong>Note:</strong> Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.</p> - </div> - </li> - <li>If you have completed the 2 previous steps, the button <strong>Choose a connection method </strong>will turn green.</li> - <li>Click the <strong>Choose a connection method</strong> button.</li> - </ul> - </li> - <li>You should now be able to access the <em>Choose a connection</em> method tab.<br> - <img alt="Choose a connection type when connecting with MongoDB Atlas." src="https://mdn.mozillademos.org/files/16510/MongoDB_Atlas_-_ChooseAConnectionMethod.jpg" style="border-style: solid; border-width: 1px; height: 606px; width: 691px;"> - <ul> - <li>Click the <strong>Connect Your Application</strong> option.</li> - </ul> - </li> - <li>This will open the <em>Connect</em> screen.<br> - <img alt="Choose the Short SRV connection when settinup a connection on MongoDB Atalas." src="https://mdn.mozillademos.org/files/17153/MongoDB_Atlas_-_ConnectForShortSRV_2020-03.PNG" style="border-style: solid; border-width: 1px; height: 649px; width: 666px;"> - <ul> - <li>Click the <strong>Copy</strong> button to copy the connection string.</li> - <li>Save this string somewhere safe.</li> - <li>Update the password with your users password.</li> - <li>Replace test with <code>local_library</code>.</li> - </ul> - </li> -</ol> - -<p>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: <code>mongodb+srv://your_user_name:your_password@cluster0-mbdj7.mongodb.net/local_library?retryWrites=true</code></p> - -<h2 id="Install_Mongoose">Install Mongoose</h2> - -<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> - -<pre class="brush: bash">npm install mongoose -</pre> - -<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2> - -<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information from <em>mongoDB Atlas</em>).</p> - -<pre class="brush: js">//Set up mongoose connection -var mongoose = require('mongoose'); -var mongoDB = '<em>insert_your_database_url_here</em>'; -mongoose.connect(mongoDB, { useNewUrlParser: true }); -var db = mongoose.connection; -db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> - -<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p> - -<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2> - -<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p> - -<pre>/express-locallibrary-tutorial //the project root - <strong>/models</strong> - <strong>author.js</strong> - <strong>book.js</strong> - <strong>bookinstance.js</strong> - <strong>genre.js</strong> -</pre> - -<h3 id="Author_model">Author model</h3> - -<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The schema defines an author as having <code>String</code> SchemaTypes for the first and family names (required, with a maximum of 100 characters), and <code>Date</code> fields for the dates of birth and death.</p> - -<pre class="brush: js">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}, - } -); - -<strong>// 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 -</strong>.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); - -</pre> - -<p>We've also declared a <a href="#Virtual_properties">virtual</a> 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.</p> - -<div class="note"> -<p><strong>Note:</strong> 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.<br> - 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!</p> -</div> - -<p>At the end of the module, we export the model.</p> - -<h3 id="Book_model">Book model</h3> - -<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> 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.</p> - -<pre class="brush: js">var mongoose = require('mongoose'); - -var Schema = mongoose.Schema; - -var BookSchema = new Schema( - { - title: {type: String, required: true}, - <strong> author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},</strong> - summary: {type: String, required: true}, - isbn: {type: String, required: true}, - <strong> genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]</strong> - } -); - -// Virtual for book's URL -BookSchema -.virtual('url') -.get(function () { - return '/catalog/book/' + this._id; -}); - -//Export model -module.exports = mongoose.model('Book', BookSchema); -</pre> - -<p>The main difference here is that we've created two references to other models:</p> - -<ul> - <li>author is a reference to a single <code>Author</code> model object, and is required.</li> - <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li> -</ul> - -<h3 id="BookInstance_model">BookInstance model</h3> - -<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> 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.</p> - -<pre class="brush: js">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, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>}, - due_back: {type: Date, <strong>default: Date.now</strong>} - } -); - -// Virtual for bookinstance's URL -BookInstanceSchema -.virtual('url') -.get(function () { - return '/catalog/bookinstance/' + this._id; -}); - -//Export model -module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> - -<p>The new things we show here are the field options:</p> - -<ul> - <li><code>enum</code>: This allows us to set the allowed values of a string. In this case, we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status).</li> - <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!).</li> -</ul> - -<p>Everything else should be familiar from our previous schema.</p> - -<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3> - -<p>Open your <strong>./models/genre.js</strong> 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).</p> - -<p>The definition will be very similar to the other models:</p> - -<ul> - <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li> - <li>This name should be required and have between 3 and 100 characters.</li> - <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li> - <li>Export the model.</li> -</ul> - -<h2 id="Testing_—_create_some_items">Testing — create some items</h2> - -<p>That's it. We now have all models for the site set up!</p> - -<p>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 <em>independent</em> script to create items of each type:</p> - -<ol> - <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>). - - <div class="note"> - <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p> - </div> - </li> - <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, ) - <pre class="brush: bash">npm install async</pre> - </li> - <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier): Be sure to pass it as a string by wrapping it with <code>''</code>. - <pre class="brush: bash">node populatedb <your mongodb url></pre> - </li> - <li> - <div class="blockIndicator note"> - <p><strong>Note for Windows operating system users</strong>: If the above command results in the error <code>DeprecationWarning: current URL string parser is deprecated</code>, change the <code>mongoose.connect(mongoDB);</code> line in <code>populatedb.js</code> file with <code>mongoose.connect(mongoDB, { useNewUrlParser:true });</code></p> - - <p>Also, if you encounter problem with your MongoDb connection(e.g. <strong>MongoDb connection error: TypeError: Cannot read property 'split' of null</strong>) you should try the command above, only WITHOUT wrapping mongodb url as a string with ' ';</p> - </div> - </li> - <li>The script should run through to completion, displaying items as it creates them in the terminal.</li> -</ol> - -<div class="note"> -<p><strong>Tip:</strong> Go to your database on mongoDB Atlas (in the <em>Collections</em> tab). You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>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 <code>Book</code>, <code>BookInstance</code>, <code>Author</code> and <code>Genre</code> models for the <em>LocalLibrary</em> website.</p> - -<p>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.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li> - <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose docs)</li> - <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose docs)</li> - <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs)</li> - <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose docs)</li> - <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs)</li> - <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs)</li> - <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> - <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div> - -<p class="summary"><span class="seoSummary">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.</span></p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Vorraussetzungen:</th> - <td>Grundlegende Computerkenntnisse. Ein grundlegendes Verständnis davon, was ein Webserver ist.</td> - </tr> - <tr> - <th scope="row">Ziel:</th> - <td>Sich damit vertraut machen, was serverseitige Programmierung ist, was sie kann und wie sie sich von der clientseitigen Programmierung unterscheidet.</td> - </tr> - </tbody> -</table> - -<p>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.</p> - -<p>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.</p> - -<p>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.</p> - -<p>In der heutigen Zeit des Webdevelopments wird es deshalb empfohlen sich auch mit der serverseitigen Programmierung von Websites auseinanderzusetzen.</p> - -<h2 id="What_is_server-side_website_programming">What is server-side website programming?</h2> - -<p>Web browsers communicate with <a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server" rel="noreferrer">web servers</a> using the <strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol ({{glossary("HTTP")}}). When you click a link on a web page, submit a form, or run a search, an <strong>HTTP request</strong> is sent from your browser to the target server.</p> - -<p>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 <a href="https://en.wikipedia.org/wiki/Query_string" rel="noreferrer">query string</a>), as POST data (data sent by the <a href="/en-US/docs/Web/HTTP/Methods/POST" rel="noreferrer">HTTP POST method</a>), or in associated {{glossary("Cookie", "cookies")}}.</p> - -<p>Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an <strong>HTTP response</strong> message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success). </p> - -<p>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.</p> - -<h3 id="Static_sites">Static sites</h3> - -<p>The diagram below shows a basic web server architecture for a <em>static site</em> (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.</p> - -<p>The server retrieves the requested document from its file system and returns an HTTP response containing the document and a <a href="/en-US/docs/Web/HTTP/Status#Successful_responses" rel="noreferrer">success status</a> (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see <a href="/en-US/docs/Web/HTTP/Status#Client_error_responses" rel="noreferrer">client error responses</a> and <a href="/en-US/docs/Web/HTTP/Status#Server_error_responses" rel="noreferrer">server error responses</a>).</p> - -<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p> - -<h3 id="Dynamic_sites">Dynamic sites</h3> - -<p>A dynamic website is one where some of the response content is generated <em>dynamically </em>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). </p> - -<p>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).</p> - -<p>Most of the code to support a dynamic website must run on the server. Creating this code is known as "<strong>server-side programming</strong>" (or sometimes "<strong>back-end scripting</strong>").</p> - -<p>The diagram below shows a simple architecture for a <em>dynamic website</em>. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.</p> - -<p>Requests for <em>static </em>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). </p> - -<p><img alt="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." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p> - -<p>Requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a <em>Web Application</em>). 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). </p> - -<div> -<h2 id="Are_server-side_and_client-side_programming_the_same">Are server-side and client-side programming the same?</h2> -</div> - -<p>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:</p> - -<ul> - <li>They have different purposes and concerns.</li> - <li>They generally don't use the same programming languages (the exception being JavaScript, which can be used on the server- and client-side).</li> - <li>They run inside different operating system environments.</li> -</ul> - -<p>Code running in the browser is known as <strong>client-side code </strong>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 <em>which content</em> 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.</p> - -<p>Client-side code is written using <a href="/en-US/docs/Learn/HTML" rel="noreferrer">HTML</a>, <a href="/en-US/docs/Learn/CSS" rel="noreferrer">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript" rel="noreferrer">JavaScript</a> — 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).</p> - -<p>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.</p> - -<p>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.</p> - -<p>Developers typically write their code using <strong>web frameworks</strong>. 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.</p> - -<p>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.).</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> - -<p>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.</p> -</div> - -<div> -<h2 id="What_can_you_do_on_the_server-side">What can you do on the server-side?</h2> - -<p>Server-side programming is very useful because it allows us to <em>efficiently</em> deliver information tailored for individual users and thereby create a much better user experience.</p> -</div> - -<p>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.</p> - -<p>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.</p> - -<p>Some of the common uses and benefits of server-side programming are listed below. You'll note that there is some overlap!</p> - -<h3 id="Efficient_storage_and_delivery_of_information">Efficient storage and delivery of information</h3> - -<p>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.</p> - -<p>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).</p> - -<p>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.</p> - -<p>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).</p> - -<div class="note"> -<p><strong>Note</strong>: Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:</p> - -<ol> - <li>Go to <a href="https://www.amazon.com" rel="noreferrer">Amazon</a> or some other e-commerce site.</li> - <li>Search for a number of keywords and note how the page structure doesn't change, even though the results do. </li> - <li>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.</li> -</ol> - -<p>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.</p> -</div> - -<h3 id="Customised_user_experience">Customised user experience</h3> - -<p>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.</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note: </strong><a href="https://maps.google.com/" rel="noreferrer">Google Maps</a> saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.</p> - -<p>Google search results are optimized based on previous searches.</p> - -<ol> - <li> Go to <a href="https:\\google.com" rel="noreferrer">Google search</a>.</li> - <li> Search for "football".</li> - <li> Now try typing "favourite" in the search box and observe the autocomplete search predictions.</li> -</ol> - -<p>Coincidence? Nada!</p> -</div> - -<h3 id="Controlled_access_to_content">Controlled access to content</h3> - -<p>Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see.</p> - -<p>Real world examples include:</p> - -<ul> - <li>Social networks like Facebook allow users to fully control their own data but only allow their friends to view or comment on it. The user determines who can see their data, and by extension, whose data appears in their feed — authorization is a central part of the user experience!</li> - <li> - <p>The site you are on right now controls access to content: articles are visible to everyone, but only users who have logged in can edit the content. To try this, click on the <strong>Edit </strong>button at the top of this page — if you are logged in you will be shown the edit view; if you are not logged in you will be taken to the sign-up page.</p> - </li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: 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?</p> -</div> - -<h3 id="Store_sessionstate_information">Store session/state information</h3> - -<p>Server-side programming allows developers to make use of <strong>sessions</strong> — 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.</p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. <a href="http://www.theage.com.au/" rel="noreferrer">The Age</a>). 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.</p> -</div> - -<h3 id="Notifications_and_communication">Notifications and communication</h3> - -<p>Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services.</p> - -<p>A few examples include:</p> - -<ul> - <li>Facebook and Twitter send emails and SMS messages to notify you of new communications.</li> - <li>Amazon regularly sends product e-mails that suggest products similar to those already bought or viewed that you might be interested in.</li> - <li>A web server might send warning messages to site administrators alerting them to low memory on the server, or suspicious user activity.</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<h3 id="Data_analysis">Data analysis</h3> - -<p>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.</p> - -<p>For example, Amazon and Google both advertise products based on previous searches (and purchases).</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> - -<p>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!</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>Congratulations, you've reached the end of the first article about server-side programming. </p> - -<p>You've now learned that server-side code is run on a web server and that its main role is to control <em>what</em> information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).</p> - -<p>You should also understand that it is useful because it allows us to create websites that <em>efficiently</em> 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.</p> - -<p>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. </p> - -<p>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.</p> - -<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction" rel="noreferrer">Introduction to the server side</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview" rel="noreferrer">Client-Server overview</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks" rel="noreferrer">Server-side web frameworks</a></li> - <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security" rel="noreferrer">Website security</a></li> -</ul> 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 ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">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.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p> - -<h2 id="Guides">Guides</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt> - <dd>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?"</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt> - <dd>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 <code>@supports</code>.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt> - <dd>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.</dd> -</dl> 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 ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/en-US/docs/MDN")}}</div> - -<p>As the <a href="/en-US/docs/Web/CSS">CSS</a> standards evolve, new properties are always being added. The MDN <a href="/en-US/docs/Web/CSS/Reference">CSS Reference</a> needs to be kept up to date with these developments. This document gives step-by-step instructions for creating a CSS property reference page.</p> - -<p>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.</p> - -<h2 id="Step_1_—_Decide_which_property_to_document">Step 1 — Decide which property to document</h2> - -<p>First, you will need to decide which property to document. The <em>CSS Documentation status</em> page lists properties that <a href="/en-US/docs/Web/CSS/Documentation_status#Missing_pages">need to be documented</a>. For details about the CSS property you will need to find a relevant specification for it (e.g., a <a href="http://www.w3.org/Style/CSS/">W3C specification</a>, a <a href="https://wiki.mozilla.org">Mozilla Wiki page</a>, or a bug report for a non-standard property used in rendering engines like Gecko or Blink).</p> - -<div class="note"> -<p><strong>Pro tips:</strong></p> - -<ul> - <li>When using a W3C spec, always use the <strong>Editor's Draft</strong> (note the red banner on the left side) and not a published version (e.g. Working Draft). The Editor's Draft is always closer to the final version!</li> - <li>If the implementation and spec diverge, feel free to mention it in the implementation bug: it may be a bug in the implementation (and a follow-up bug will be filed), a delay in the publication of a new spec, or an error in the spec (in which case a spec bug is worth filing).</li> -</ul> -</div> - -<h2 id="Step_2_—_Check_the_database_of_CSS_properties">Step 2 — Check the database of CSS properties</h2> - -<p>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 <a href="/en-US/docs/MDN/Contribute/Howto/Update_the_CSS_JSON_DB">checking that this information is there</a>.</p> - -<p>If not, contact an admin or a power user, either in the <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs (Matrix) chat room</a>, or, if nobody is available, by <a href="https://bugzilla.mozilla.org/form.doc">filing a bug</a>.</p> - -<h2 id="Step_3_—_Creating_the_CSS_property_page">Step 3 — Creating the CSS property page</h2> - -<p>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.</p> - -<div class="note"> -<p>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)}}).</p> -</div> - -<ol> - <li>Clone the <a href="/en-US/docs/MDN/Contribute/Howto/Document_a_CSS_property/Property_template">following page</a>, set the title to <em>your-property</em> (without capitals) and the slug to <code>Web/CSS/<em>your-property</em></code><em>.</em></li> - <li>Change the summary to fit, but keep it starting the same way : "The <em><code>your-property</code></em> <a href="/en-US/docs/Web/CSS">CSS</a> property…". Explain briefly what this property is for.</li> - <li>If the property is not experimental, remove the <code>\{{SeeCompatTable}}</code> 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: - <ul> - <li>Is the feature supported by several browsers?</li> - <li>Is the feature prefixed or behind a preference?</li> - <li>Is there any reason to think that the implementation of the feature will change in the future?</li> - </ul> - </li> - <li>Replace the parameter of the <code>\{{cssinfo("animation-name")}}</code> 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.</li> - <li>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 <code>inherit</code>, <code>initial</code>, and <code>unset</code> keywords examples at the end. It reminds users that these are valid values, too.</li> - <li>Under the chapter <em>Values</em>, put the meaning of each value. If it is a keyword, don't forget to mark it as code (select it and press <code>CTRL-O</code>). Each description should start by "Is a" followed by the type of the value, or indicating it is a keyword.</li> - <li>Clear the <em>Examples</em> chapter, we will add them at the end!</li> - <li>Update the specification table. For information about how to do it, read this <a href="/en-US/docs/MDN/Contribute/Structures/Specification_tables">tutorial</a>.</li> - <li>Update the compatibility information. For information about how to do it, read this <a href="/en-US/docs/MDN/Contribute/Structures/Compatibility_tables">tutorial</a>.</li> - <li>Update the <em>See also</em> 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.</li> - <li>Add the relevant tags: you need to add <code>CSS</code>, <code>CSS Property</code>, and <code>Reference.</code> You also need to add <code>Experimental</code> or <code>Non-standard</code> if this is the case. Finally you also need to add a <code>CSS XYZ</code> 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.</li> -</ol> - -<p>At any point, you can save by hitting the <code>SAVE</code> button. You can continue to edit right along. If you haven't saved your page until now, please do so! :-)</p> - -<p>The last step is to add <em>Examples</em>. To do that follow this <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Live_samples">tutorial about live samples</a>. 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 <code>list-style-type</code> 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.</p> - -<h2 id="Step_4_—_Getting_a_review">Step 4 — Getting a review</h2> - -<p>You have documented your CSS property! Congratulations!</p> - -<p>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 <a href="https://discourse.mozilla-community.org/c/mdn">MDN forum</a>.</p> - -<h2 id="Step_5_—_Integrating_the_new_page_in_the_MDN">Step 5 — Integrating the new page in the MDN</h2> - -<p>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 <a href="/en-US/docs/Web/CSS/Reference">CSS index page</a>. 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.</p> - -<p>Also, if the property is implemented by Firefox, you need to check that it is listed, and linked! in the correct <a href="/en-US/Firefox/Releases">Firefox for developers</a> 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.</p> - -<h2 id="Contact_us">Contact us</h2> - -<ul> - <li>On IRC: <a href="irc://irc.mozilla.org/mdn">#mdn</a></li> - <li><a href="https://discourse.mozilla.org/c/mdn">Discourse</a></li> -</ul> 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 ---- -<div>{{MDNSidebar}}</div> - -<div>{{IncludeSubnav("/de-DE/docs/MDN")}}</div> - -<p>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.</p> - -<p>Wenn Sie nach Spezifikationen suchen, wie eine bestimmte Art von Seite strukturiert sein sollte, lesen Sie den <a href="/en-US/docs/MDN/Contribute/Content/Layout">MDN page layout guide</a>.</p> - -<p>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.</p> - -<p>Stilstandards, die für Inhalte gelten, die für andere Sites als MDN geschrieben wurden, finden Sie im <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>.</p> - -<h2 id="Page_name_and_heading_capitalization" name="Page_name_and_heading_capitalization">Basics</h2> - -<p>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.</p> - -<h3 id="Page_titles">Page titles</h3> - -<p>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 "<em><locale>/docs/</em>".</p> - -<h4 id="Title_and_heading_capitalization">Title and heading capitalization</h4> - -<p>Page titles and section headings should use sentence-style capitalization (only capitalize the first word and proper nouns) rather than headline-style capitalization:</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: "A new method for creating JavaScript rollovers"</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: "A New Method for Creating JavaScript Rollovers"</li> -</ul> - -<p>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.</p> - -<h4 id="Choosing_titles_and_slugs">Choosing titles and slugs</h4> - -<p>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.</p> - -<p>Page titles, on the other hand, may be as long as you like, within reason, and they should be descriptive.</p> - -<h4 id="Creating_new_subtrees">Creating new subtrees</h4> - -<p>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.</p> - -<p>For example, consider the <a href="/en-US/docs/Web/JavaScript">JavaScript</a> guide, which is structured as follows:</p> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide" title="JavaScript/Guide">JavaScript/Guide</a> - Main table-of-contents page</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/JavaScript_Overview" title="JavaScript/Guide/JavaScript_Overview">JavaScript/Guide/JavaScript Overview</a></li> - <li><a href="/en-US/docs/JavaScript/Guide/Functions" title="JavaScript/Guide/Functions">JavaScript/Guide/Functions</a></li> - <li><a href="/en-US/docs/JavaScript/Guide/Details_of_the_Object_Model" title="JavaScript/Guide/Details_of_the_Object_Model">JavaScript/Guide/Details of the Object Model</a></li> -</ul> - -<p>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.</p> - -<h3 id="Sections.2C_Paragraphs.2C_Newlines" name="Sections.2C_Paragraphs.2C_Newlines">Sections, paragraphs, and newlines</h3> - -<p>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.</p> - -<p>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.</p> - -<p>Don't create single subsections -- you don't subdivide a topic into one. It's either two subheadings or more or none at all. </p> - -<p>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.</p> - -<h3 id="Text_Formatting" name="Text_Formatting">Text formatting and styles</h3> - -<p>Use the "Formatting Styles" drop-down list to apply predefined styles to selected content.</p> - -<div class="note"><strong>Note: </strong>The "Note" style is used to call out important notes, like this one.</div> - -<div class="warning"><strong>Warning:</strong> Similarly, the "Warning" style creates warning boxes like this.</div> - -<p>Unless specifically instructed to do so, <strong>do not</strong> use the HTML <code>style</code> attribute to manually style content. If you can't do it using a predefined class, drop into <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">Matrix</a> and ask for help.</p> - -<h3 id="Code_sample_style_and_formatting">Code sample style and formatting</h3> - -<h4 id="Tabs_and_line_breaks">Tabs and line breaks</h4> - -<p>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:</p> - -<pre class="brush: js notranslate">if (condition) { - /* handle the condition */ -} else { - /* handle the "else" case */ -} -</pre> - -<p>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:</p> - -<pre class="brush: js notranslate">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); -</pre> - -<h4 id="Inline_code_formatting">Inline code formatting</h4> - -<p>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 <code class="js plain">frenchText()</code> function".</p> - -<p>Method names should be followed by a pair of parentheses: <code>doSomethingUseful()</code>. This helps to differentiate methods from other code terms.</p> - -<h4 id="Syntax_highlighting">Syntax highlighting</h4> - -<p><img alt='Screenshot of the "syntax highlighting" menu.' src="https://mdn.mozillademos.org/files/7857/syntax-highlighting-menu.png" style="border-style: solid; border-width: 1px; float: right; height: 315px; margin: 2px 4px; width: 183px;">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:</p> - -<div class="line number2 index1 alt1"> -<pre class="brush: js notranslate">for (var i = 0, j = 9; i <= 9; i++, j--) - document.writeln("a[" + i + "][" + j + "]= " + a[i][j]);</pre> -</div> - -<p>If no appropriate transformation is available, use the <code>pre</code> tag without specifying a language ("No Highlight" in the language menu).</p> - -<pre class="notranslate">x = 42;</pre> - -<h4 id="Styling_HTML_element_references">Styling HTML element references</h4> - -<p>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.</p> - -<dl> - <dt>Element names</dt> - <dd>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, <strong>enclose the name in angle brackets</strong> and use "Code (inline)" style (e.g., <code><title></code>).</dd> - <dt>Attribute names</dt> - <dd>Use <strong>bold face</strong>.</dd> - <dt>Attribute definitions</dt> - <dd>Use the {{TemplateLink("htmlattrdef")}} macro (e.g., <span class="nowiki">\{{htmlattrdef("type")}}</span>) for the definition term, so that it can be linked to from other pages, then use the {{TemplateLink("htmlattrxref")}} macro (e.g., <span class="nowiki">\{{htmlattrxref("attr","element")}}</span>) to reference attribute definitions.</dd> - <dt>Attribute values</dt> - <dd>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 <strong>type</strong> attribute of an <code><input></code> element is set to <code>email</code> or <code>tel</code> ...</dd> - <dt>Labeling attributes</dt> - <dd>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.</dd> -</dl> - -<h3 id="Latin_abbreviations" name="Latin_abbreviations">Latin abbreviations</h3> - -<h4 id="In_notes_and_parentheses" name="In_notes_and_parentheses">In notes and parentheses</h4> - -<ul> - <li>Common Latin abbreviations (etc., i.e., e.g.) may be used in parenthetical expressions and in notes. Use periods in these abbreviations. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers (e.g. Firefox) can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, e.g. Firefox, can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers, (eg: Firefox) can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="In_running_text" name="In_running_text">In running text</h4> - -<ul> - <li>In regular text (i.e. text outside of notes or parentheses), use the English equivalent of the abbreviation. - <ul> - <li><span class="correct"><strong>Correct</strong></span>: ... web browsers, and so on.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: ... web browsers, etc.</li> - <li><span class="correct"><strong>Correct</strong></span>: Web browsers such as Firefox can be used ...</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Web browsers e.g. Firefox can be used ...</li> - </ul> - </li> -</ul> - -<h4 id="Meanings_and_English_equivalents_of_Latin_abbreviations" name="Meanings_and_English_equivalents_of_Latin_abbreviations">Meanings and English equivalents of Latin abbreviations</h4> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Abbrev</th> - <th>Latin</th> - <th>English</th> - </tr> - <tr> - <td>cf.</td> - <td><em>confer</em></td> - <td>compare</td> - </tr> - <tr> - <td>e.g.</td> - <td><em>exempli gratia</em></td> - <td>for example</td> - </tr> - <tr> - <td>et al.</td> - <td><em>et alii</em></td> - <td>and others</td> - </tr> - <tr> - <td>etc.</td> - <td><em>et cetera</em></td> - <td>and so forth, and so on</td> - </tr> - <tr> - <td>i.e.</td> - <td><em>id est</em></td> - <td>that is, in other words</td> - </tr> - <tr> - <td>N.B.</td> - <td><em>nota bene</em></td> - <td>note well</td> - </tr> - <tr> - <td>P.S.</td> - <td><em>post scriptum</em></td> - <td>postscript</td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note:</strong> 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 <strong>you</strong> 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.</p> -</div> - -<h3 id="Acronyms_and_abbreviations" name="Acronyms_and_abbreviations">Acronyms and abbreviations</h3> - -<h4 id="Capitalization_and_periods" name="Capitalization_and_periods">Capitalization and periods</h4> - -<p>Use full capitals and delete periods in all acronyms and abbreviations, including organizations such as "US" and "UN".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: XUL</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: X.U.L.; Xul</li> -</ul> - -<h4 id="Expansion" name="Expansion">Expansion</h4> - -<p>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 <a href="/en-US/docs/Glossary">glossary</a> entry describing the technology.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: "XUL (XML User Interface Language) is Mozilla's XML-based language..."</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: "XUL is Mozilla's XML-based language..."</li> -</ul> - -<h4 id="Plurals_of_acronyms_and_abbreviations" name="Plurals_of_acronyms_and_abbreviations">Plurals of acronyms and abbreviations</h4> - -<p>For plurals of acronyms or abbreviations, add <em>s</em>. Don't use an apostrophe. Ever. Please.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: CD-ROMs</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: CD-ROM's</li> -</ul> - -<h3 id="Contractions" name="Contractions">Capitalization</h3> - -<p>Use standard English capitalization rules in body text, and capitalize "World Wide Web" and "Web".</p> - -<p>Keyboard keys should use sentence-style capitalization, not all-caps capitalization. For example, "Enter" not "ENTER."</p> - -<h3 id="Contractions" name="Contractions">Contractions</h3> - -<p>Use contractions (e.g. "don't", "can't", "shouldn't") if you prefer. We're not that formal!</p> - -<h3 id="Pluralization" name="Pluralization">Pluralization</h3> - -<p>Use English-style plurals, not the Latin- or Greek-influenced forms.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: syllabuses, octopuses</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: syllabi, octopi</li> -</ul> - -<h3 id="Hyphenation" name="Hyphenation">Hyphenation</h3> - -<p>Hyphenate compounds when the last letter of the prefix is a vowel and is the same as the first letter of the root.</p> - -<ul> - <li><font color="green"><strong>Correct</strong></font>: email, re-elect, co-op</li> - <li><font color="red"><strong>Incorrect</strong></font>: e-mail, reelect, coop</li> -</ul> - -<h3 id="Gender-neutral_language">Gender-neutral language</h3> - -<p>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.<br> - <br> - Let's take the following example:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he allows the web page to make use of his web cam.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog appears, asking the user if she allows the web page to make use of her web cam.</p> -</blockquote> - -<p>Both versions in this case are gender-specific. This could be fixed by using gender-neutral pronouns:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if they allow the web page to make use of their web cam.</p> -</blockquote> - -<div class="note"> -<p><strong>Note:</strong> 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 "<a href="http://en.wikipedia.org/wiki/Singular_they">singular 'they.'</a>"</p> -</div> - -<p>You can use both genders:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the user if he or she allows the web page to make use of his/her web cam.</p> -</blockquote> - -<p>making the users plural:</p> - -<blockquote> -<p>A confirmation dialog appears, asking the users if they allow the web page to make use of their web cams.</p> -</blockquote> - -<p>The best solution, of course, is to rewrite and eliminate the pronouns completely:</p> - -<blockquote> -<p>A confirmation dialog appears, requesting the user's permission for web cam access.</p> -</blockquote> - -<blockquote> -<p>A confirmation dialog box appears, which asks the user for permission to use the web cam.</p> -</blockquote> - -<p>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.</p> - -<h3 id="Numbers_and_numerals" name="Numbers_and_numerals">Numbers and numerals</h3> - -<h4 id="Dates">Dates</h4> - -<p>For dates (not including dates in code samples) use the format "January 1, 1990".</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: February 24, 2006</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: February 24th, 2006; 24 February, 2006; 24/02/2006</li> -</ul> - -<p>Alternately, you can use the YYYY/MM/DD format.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 2006/02/24</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 02/24/2006; 24/02/2006; 02/24/06</li> -</ul> - -<h4 id="Decades" name="Decades">Decades</h4> - -<p>For decades, use the format "1990s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 1990s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 1990's</li> -</ul> - -<h4 id="Plurals_of_numerals" name="Plurals_of_numerals">Plurals of numerals</h4> - -<p>For plurals of numerals add "s". Don't use an apostrophe.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 486s</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 486's</li> -</ul> - -<h4 id="Commas" name="Commas">Commas</h4> - -<p>In running text, use commas only in five-digit and larger numbers.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: 4000; 54,000</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: 4,000; 54000</li> -</ul> - -<h3 id="Punctuation" name="Punctuation">Punctuation</h3> - -<h4 id="Serial_comma" name="Serial_comma">Serial comma</h4> - -<p><strong>Use the serial comma</strong>. The serial (also known as "Oxford") comma is the comma that appears before the conjunction in a series of three or more items.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: I will travel on trains, planes, and automobiles.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: I will travel on trains, planes and automobiles.</li> -</ul> - -<div class="note"> -<p><strong>Note:</strong> This is in contrast to the <a href="http://www.mozilla.org/en-US/styleguide/" title="http://www.mozilla.org/en-US/styleguide/">One Mozilla style guide</a>, which specifies that the serial comma is not to be used. MDN is an exception to this rule.</p> -</div> - -<h3 id="Spelling" name="Spelling">Spelling</h3> - -<p>For words with variant spellings, always use the first entry at <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. Do not use variant spellings.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: localize, honor</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: localise, honour</li> -</ul> - -<h3 id="Terminology">Terminology</h3> - -<h4 id="Obsolete_vs._deprecated">Obsolete vs. deprecated</h4> - -<p>It's important to be clear on the difference between the terms <strong>obsolete</strong> and <strong>deprecated</strong>.</p> - -<dl> - <dt>Obsolete:</dt> - <dd>On MDN, the term <strong>obsolete</strong> 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.</dd> - <dt>Deprecated:</dt> - <dd>On MDN, the term <strong>deprecated</strong> 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 <em>obsolete</em> 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.</dd> -</dl> - -<h4 id="HTML_elements">HTML elements</h4> - -<p>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).</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: the {{HTMLElement("span")}} element</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: the span tag</li> -</ul> - -<h4 id="User_interface_actions">User interface actions</h4> - -<p>In task sequences, describe user interface actions using the imperative mood. Identify the user interface element by its label and type.</p> - -<ul> - <li><span class="correct"><strong>Correct</strong></span>: Click the Edit button.</li> - <li><span class="incorrect"><strong>Incorrect</strong></span>: Click Edit.</li> -</ul> - -<h3 id="Voice">Voice</h3> - -<p>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.</p> - -<h2 id="Wiki_markup_and_usage">Wiki markup and usage</h2> - -<h3 id="External_links">External links</h3> - -<p>To automatically create a link to a Bugzilla bug, use this template:</p> - -<pre class="notranslate">\{{Bug(322603)}} -</pre> - -<p>This results in:</p> - -<p>{{Bug(322603)}}</p> - -<p>For WebKit bugs, you can use this template:</p> - -<pre class="notranslate">\{{Webkitbug("322603")}} -</pre> - -<p>This results in:</p> - -<p>{{Webkitbug("322603")}}</p> - -<h3 id="Page_tags">Page tags</h3> - -<p>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 <a href="/en-US/docs/MDN/Contribute/Howto/Tag">How to properly tag pages</a> guide.</p> - -<p>The tagging interface lives at the bottom of a page while you're in edit mode, and looks something like this:</p> - -<p><img alt="Screenshot of the UX for adding and removing tags on MDN" src="https://mdn.mozillademos.org/files/7859/tag-interface.png" style="border-style: solid; border-width: 1px; height: 167px; width: 863px;"></p> - -<p>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.</p> - -<p>To remove a tag, simply click the little "X" icon in the tag.</p> - -<h4 id="Tagging_pages_that_need_work">Tagging pages that need work</h4> - -<p>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.</p> - -<h4 id="Tagging_obsolete_pages">Tagging obsolete pages</h4> - -<p>Use the following tags for pages that are not current:</p> - -<ul> - <li><em>Junk</em>: Use for spam, pages created by mistake, or content that is so bad that it should be deleted. Pages with this tag are deleted from time to time.</li> - <li><em>Obsolete</em>: Use for content that is technically superceded, but still valid in context. For example an HTML element that is obsolete in HTML5 is still valid in HTML 4.01. You can also use the <span class="nowiki">{{TemplateLink("obsolete_header")}}</span> macro to put a prominent banner on the topic.</li> - <li><em>Archive</em>: Use for content that is technically superceded and no longer useful. If possible, add a note to the topic referring readers to a more current topic. For example, a page that describes how to use the Mozilla CVS repository should refer readers to a current topic on using Mercurial repos. (If no corresponding current topic exists, use the <em>NeedsUpdate</em> tag, and add an explanation on the Talk page.) Pages with the Archive tag are eventually moved from the main content of MDN to the <a href="/en-US/docs/Archive">Archive</a> section.</li> -</ul> - -<h3 id="SEO_summary">SEO summary</h3> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/Project:MDN/Contributing/Editor_guide/Editing#Formatting_styles">"SEO summary" style in the WYSIWYG editor</a>.</p> - -<h3 id="Landing_pages">Landing pages</h3> - -<p><strong>Landing pages</strong> are pages at the root of a topic area of the site, such as the main <a href="/en-US/docs/CSS" title="CSS">CSS</a> or <a href="/en-US/docs/HTML" title="HTML">HTML</a> pages. They have a standard format that consists of three areas:</p> - -<ol> - <li>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.</li> - <li>A two-column list of links with appropriate headings. See {{anch("Creating a page link list")}} for guidelines.</li> - <li>An <strong>optional</strong> "Browser compatibility" section at the bottom of the page.</li> -</ol> - -<h4 id="Creating_a_page_link_list">Creating a page link list</h4> - -<p>The link list section of an MDN landing page consists of two columns. These are created using the following HTML:</p> - -<pre class="brush: html notranslate"><div class="row topicpage-table"> - <div class="section"> - ... left column contents ... - </div> - <div class="section"> - ... right column contents ... - </div> -</div></pre> - -<p>The left column should be a list of articles, with an <code><h2></code> 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 <code><dl></code> list of articles with each article's link in a <code><dt></code> block and a brief one-or-two sentence summary of the article in the corresponding <code><dd></code> block.</p> - -<p>The right column should contain one or more of the following sections, in order:</p> - -<dl> - <dt>Getting help from the community</dt> - <dd>This should provide information on Matrix chat rooms and mailing lists available about the topic. The heading should use the class "Community".</dd> - <dt>Tools</dt> - <dd>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".</dd> - <dt>Related topics</dt> - <dd>A list of links to landing pages for other, related, technologies of relevance. The heading should use the class "Related_Topics".</dd> -</dl> - -<p><strong><<<finish this once we finalize the landing page standards>>></strong></p> - -<h2 id="Using_inserting_images">Using, inserting images</h2> - -<p>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:</p> - -<ol> - <li>Attach the desired image file to the article (at the bottom of every article in edit mode)</li> - <li>Create an image in the WYSIWYG editor</li> - <li>In the WYSIWYG editor in the drop-down list listing attachments, select the newly created attachment which is your image</li> - <li>Press OK.</li> -</ol> - -<h2 id="Other_References">Other References</h2> - -<h3 id="Preferred_style_guides" name="Preferred_style_guides">Preferred style guides</h3> - -<p>If you have questions about usage and style not covered here, we recommend referring to the <a href="http://www.economist.com/research/StyleGuide/">Economist style guide</a> or, failing that, the <a href="http://www.amazon.com/gp/product/0226104036/">Chicago Manual of Style</a>.</p> - -<h3 id="Preferred_dictionary" name="Preferred_dictionary">Preferred dictionary</h3> - -<p>For questions of spelling, please refer to <a href="http://www.answers.com/library/Dictionary">Answers.com</a>. The spell-checker for this site uses American English. Please do not use variant spellings (e.g., use <em>honor</em> rather than <em>honour</em>).</p> - -<p>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 <a href="/en-US/docs/Project:Community" title="Project:en/Community">MDC mailing list</a> or <a href="/User:Sheppy" title="User:Sheppy">project lead</a> so we know what should be added.</p> - -<h3 id="MDC-specific" name="MDC-specific">MDN-specific</h3> - -<ul> - <li><a href="/en-US/docs/Project:Custom_CSS_Classes" title="Project:en/Custom_CSS_Classes">Custom CSS classes</a> defined for all MDC pages.</li> - <li><a href="/en-US/docs/Project:Custom_Templates" title="Project:en/Custom_Templates">Custom templates</a> created for use on MDC, with explanations.</li> -</ul> - -<h3 id="Other_resources" name="Other_resources">Language, grammar, spelling</h3> - -<p>If you're interested in improving your writing and editing skills, you may find the following resources to be helpful.</p> - -<ul> - <li><a href="http://www.amazon.com/Writing-Well-30th-Anniversary-Nonfiction/dp/0060891548">On Writing Well</a>, by William Zinsser (Amazon link)</li> - <li><a href="http://www.amazon.com/Style-Basics-Clarity-Grace-4th/dp/0205830765/" title="http://www.amazon.com/Style-Lessons-Clarity-Grace-Edition/dp/0321898680">Style: The Basics of Clarity and Grace</a>, by Joseph Williams and Gregory Colomb (Amazon link)</li> - <li><a href="http://www.bartleby.com/64/">American Heritage Book of English Usage</a></li> - <li><a href="http://www.wsu.edu/~brians/errors/">Common Errors in English</a></li> - <li><a href="http://www-personal.umich.edu/~jlawler/aue.html">English Grammar FAQ</a> (alt.usage.english)</li> - <li><a href="http://www.angryflower.com/bobsqu.gif">Bob's quick guide to the apostrophe, you idiots</a> (funny)</li> - <li><a href="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2" title="http://www.amazon.com/Merriam-Websters-Concise-Dictionary-English-Usage/dp/B004L2KNI2">Merriam-Webster's Concise Dictionary of English Usage</a> (Amazon link): Scholarly but user-friendly, evidence-based advice; very good for non-native speakers, especially for preposition usage.</li> -</ul> 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 ---- -<div>{{AddonSidebar()}}</div> - -<p>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 <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action"><code>default_popup</code></a> specified in the manifest.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox brush:js">browser.browserAction.setPopup( - details // object -) -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>details</code></dt> - <dd><code>object</code>.</dd> - <dd> - <dl class="reference-values"> - <dt><code>tabId</code>{{optional_inline}}</dt> - <dd><code>integer</code>. Sets the popup only for a specific tab. The popup is reset when the user navigates this tab to a new page.</dd> - <dt><code>windowId</code>{{optional_inline}}</dt> - <dd><code>integer</code>. Sets the popup only for the specified window.</dd> - </dl> - - <dl class="reference-values"> - <dt><code>popup</code></dt> - <dd> - <p><code>string</code> or <code>null</code>. The HTML file to show in a popup, specified as a URL.</p> - - <p>This can point to a file packaged within the extension (for example, created using {{WebExtAPIRef("extension.getURL")}}), or a remote document (e.g. <code>https://example.org/</code>).</p> - - <p>If an empty string (<code>""</code>) is passed here, the popup is disabled, and the extension will receive {{WebExtAPIRef("browserAction.onClicked")}} events.</p> - - <p>If <code>popup</code> is <code>null</code>:</p> - - <p>If <code>tabId</code> is specified, removes the tab-specific popup so that the tab inherits the global popup.</p> - - <p>If <code>windowId</code> is specified, removes the window-specific popup so that the window inherits the global popup.</p> - - <p>Otherwise it reverts the global popup to the default value.</p> - </dd> - </dl> - </dd> -</dl> - -<ul> - <li>If <code>windowId</code> and <code>tabId</code> are both supplied, the function fails and the popup is not set.</li> - <li>If <code>windowId</code> and <code>tabId</code> are both omitted, the global popup is set.</li> -</ul> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.api.browserAction.setPopup",2)}}</p> - -<h2 id="Examples">Examples</h2> - -<p>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" <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a> set in the extension's manifest to create context menu items.</p> - -<pre class="brush: js">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"}) - } -});</pre> - -<p>{{WebExtExamples}}</p> - -<div class="note"><strong>Acknowledgements</strong> - -<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/browserAction#method-setPopup"><code>chrome.browserAction</code></a> API. This documentation is derived from <a href="https://chromium.googlesource.com/chromium/src/+/master/chrome/common/extensions/api/browser_action.json"><code>browser_action.json</code></a> in the Chromium code.</p> - -<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> -</div> - -<div class="hidden"> -<pre>// Copyright 2015 The Chromium Authors. All rights reserved. -// -// Redistribution and use in source and binary forms, with or without -// modification, are permitted provided that the following conditions are -// met: -// -// * Redistributions of source code must retain the above copyright -// notice, this list of conditions and the following disclaimer. -// * Redistributions in binary form must reproduce the above -// copyright notice, this list of conditions and the following disclaimer -// in the documentation and/or other materials provided with the -// distribution. -// * Neither the name of Google Inc. nor the names of its -// contributors may be used to endorse or promote products derived from -// this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -</pre> -</div> 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 ---- -<div>0ü</div> - -<p>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.</p> - -<p>To use this API you need to have the "downloads" <a href="/en-US/Add-ons/WebExtensions/manifest.json/permissions#API_permissions">API permission</a> specified in your <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file.</p> - -<h2 id="Types">Types</h2> - -<dl> - <dt>{{WebExtAPIRef("downloads.FilenameConflictAction")}}</dt> - <dd>Defines options for what to do if the name of a downloaded file conflicts with an existing file.</dd> - <dt>{{WebExtAPIRef("downloads.InterruptReason")}}</dt> - <dd>Defines a set of possible reasons why a download was interrupted.</dd> - <dt>{{WebExtAPIRef("downloads.DangerType")}}</dt> - <dd>Defines a set of common warnings of possible dangers associated with downloadable files.</dd> - <dt>{{WebExtAPIRef("downloads.State")}}</dt> - <dd>Defines different states that a current download can be in.</dd> - <dt>{{WebExtAPIRef("downloads.DownloadItem")}}</dt> - <dd>Represents a downloaded file.</dd> - <dt>{{WebExtAPIRef("downloads.StringDelta")}}</dt> - <dd>Represents the difference between two strings.</dd> - <dt>{{WebExtAPIRef("downloads.DoubleDelta")}}</dt> - <dd>Represents the difference between two doubles.</dd> - <dt>{{WebExtAPIRef("downloads.BooleanDelta")}}</dt> - <dd>Represents the difference between two booleans.</dd> - <dt>{{WebExtAPIRef("downloads.DownloadTime")}}</dt> - <dd>Represents the time a download took to complete.</dd> - <dt>{{WebExtAPIRef("downloads.DownloadQuery")}}</dt> - <dd>Defines a set of parameters that can be used to search the downloads manager for a specific set of downloads.</dd> -</dl> - -<h2 id="Functions">Functions</h2> - -<dl> - <dt>{{WebExtAPIRef("downloads.download()")}}</dt> - <dd>Downloads a file, given its URL and other optional preferences.</dd> - <dt>{{WebExtAPIRef("downloads.search()")}}</dt> - <dd>Queries the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} available in the browser's downloads manager, and returns those that match the specified search criteria.</dd> - <dt>{{WebExtAPIRef("downloads.pause()")}}</dt> - <dd>Pauses a download.</dd> - <dt>{{WebExtAPIRef("downloads.resume()")}}</dt> - <dd>Resumes a paused download.</dd> - <dt>{{WebExtAPIRef("downloads.cancel()")}}</dt> - <dd>Cancels a download.</dd> - <dt>{{WebExtAPIRef("downloads.getFileIcon()")}}</dt> - <dd>Retrieves an icon for the specified download.</dd> - <dt>{{WebExtAPIRef("downloads.open()")}}</dt> - <dd>Opens the downloaded file with its associated application.</dd> - <dt>{{WebExtAPIRef("downloads.show()")}}</dt> - <dd>Opens the platform's file manager application to show the downloaded file in its containing folder.</dd> - <dt>{{WebExtAPIRef("downloads.showDefaultFolder()")}}</dt> - <dd>Opens the platform's file manager application to show the default downloads folder.</dd> - <dt>{{WebExtAPIRef("downloads.erase()")}}</dt> - <dd>Erases matching {{WebExtAPIRef("downloads.DownloadItem", "DownloadItems")}} from the browser's download history, without deleting the downloaded files from disk.</dd> - <dt>{{WebExtAPIRef("downloads.removeFile()")}}</dt> - <dd>Removes a downloaded file from disk, but not from the browser's download history.</dd> - <dt>{{WebExtAPIRef("downloads.acceptDanger()")}}</dt> - <dd>Prompts the user to accept or cancel a dangerous download.</dd> - <dt>{{WebExtAPIRef("downloads.drag()")}}</dt> - <dd>Initiates dragging the downloaded file to another application.</dd> - <dt>{{WebExtAPIRef("downloads.setShelfEnabled()")}}</dt> - <dd>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.</dd> -</dl> - -<h2 id="Events">Events</h2> - -<dl> - <dt>{{WebExtAPIRef("downloads.onCreated")}}</dt> - <dd>Fires with the {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}} object when a download begins.</dd> - <dt>{{WebExtAPIRef("downloads.onErased")}}</dt> - <dd>Fires with the <code>downloadId</code> when a download is erased from history.</dd> - <dt>{{WebExtAPIRef("downloads.onChanged")}}</dt> - <dd>When any of a {{WebExtAPIRef("downloads.DownloadItem", "DownloadItem")}}'s properties except <code>bytesReceived</code> changes, this event fires with the <code>downloadId</code> and an object containing the properties that changed.</dd> -</dl> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.api.downloads")}}</p> - -<p>{{WebExtExamples("h2")}}</p> - -<div class="note"><strong>Acknowledgements</strong> - -<p>This API is based on Chromium's <a href="https://developer.chrome.com/extensions/downloads"><code>chrome.downloads</code></a> API.</p> - -<p>Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.</p> -</div> - -<div class="hidden"> -<pre>// Copyright 2015 The Chromium Authors. All rights reserved. -// -// Redistribution and use in source and binary forms, with or without -// modification, are permitted provided that the following conditions are -// met: -// -// * Redistributions of source code must retain the above copyright -// notice, this list of conditions and the following disclaimer. -// * Redistributions in binary form must reproduce the above -// copyright notice, this list of conditions and the following disclaimer -// in the documentation and/or other materials provided with the -// distribution. -// * Neither the name of Google Inc. nor the names of its -// contributors may be used to endorse or promote products derived from -// this software without specific prior written permission. -// -// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -</pre> -</div> 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 ---- -<div>{{AddonSidebar}}</div> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <th scope="row" style="width: 30%;">Type</th> - <td><code>String</code></td> - </tr> - <tr> - <th scope="row">Mandatory</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Example</th> - <td> - <pre class="brush: json no-line-numbers"> -"devtools_page": "devtools/my-page.html"</pre> - </td> - </tr> - </tbody> -</table> - -<p>Use this key to enable your extension to extend the browser's built-in devtools.</p> - -<p>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.</p> - -<p>See <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools">Extending the developer tools</a> to learn more.</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: json no-line-numbers">"devtools_page": "devtools/my-page.html"</pre> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.manifest.devtools_page")}}</p> 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 ---- -<div>{{AddonSidebar}}</div> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <th scope="row" style="width: 30%;">Type</th> - <td><code>Object</code></td> - </tr> - <tr> - <th scope="row">Mandatory</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Example</th> - <td> - <pre class="brush: json notranslate"> -"theme": { - "images": { - "theme_frame": "images/sun.jpg" - }, - "colors": { - "frame": "#CF723F", - "tab_background_text": "#000" - } -}</pre> - </td> - </tr> - </tbody> -</table> - -<p>Use the theme key to define a static theme to apply to Firefox.</p> - -<div class="note"> -<p><strong>Note</strong>: If you want to include a theme with an extension, please see the {{WebExtAPIRef("theme")}} API.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Since May 2019, themes need to be signed to be installed ({{bug(1545109)}}). See <a href="/en-US/docs/Mozilla/Add-ons/Distribution">Signing and distributing your add-on</a> for more details.</p> -</div> - -<div class="note"> -<p><strong>Theme support in Firefox for Android</strong>: A new version of Firefox for Android, based on GeckoView, is under development. A <a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix" rel="noreferrer nofollow">pre-release version</a> is available. The pre-release version does not support themes.</p> -</div> - -<h2 id="Image_formats">Image formats</h2> - -<p>The following image formats are supported in all theme image properties:</p> - -<ul> - <li>JPEG</li> - <li>PNG</li> - <li>APNG</li> - <li>SVG (animated SVG is supported from Firefox 59)</li> - <li>GIF (animated GIF isn’t supported)</li> -</ul> - -<h2 id="Syntax">Syntax</h2> - -<p>The theme key is an object that takes the following properties:</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>images</code></td> - <td><code>Object</code></td> - <td> - <p>Optional as of Firefox 60. Mandatory before Firefox 60.</p> - - <p>A JSON object whose properties represent the images to display in various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#images">images</a></code> for details on the properties that this object can contain.</p> - </td> - </tr> - <tr> - <td><code>colors</code></td> - <td><code>Object</code></td> - <td> - <p>Mandatory.</p> - - <p>A JSON object whose properties represent the colors of various parts of the browser. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#colors">colors</a></code> for details on the properties that this object can contain.</p> - </td> - </tr> - <tr> - <td><code>properties</code></td> - <td><code>Object</code></td> - <td> - <p>Optional</p> - - <p>This object has two properties that affect how the <code>"additional_backgrounds"</code> images are displayed. See <code><a href="/en-US/Add-ons/WebExtensions/manifest.json/theme#properties">properties</a></code> for details on the properties that this object can contain.</p> - - <ul> - <li><code>"additional_backgrounds_alignment":</code> an array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br> - The alignment options include: <code>"bottom"</code>, <code>"center"</code>, <code>"left"</code>, <code>"right"</code>, <code>"top"</code>, <code>"center bottom"</code>, <code>"center center"</code>, <code>"center top"</code>, <code>"left bottom"</code>, <code>"left center"</code>, <code>"left top"</code>, <code>"right bottom"</code>, <code>"right center"</code>, and <code>"right top"</code>. If not specified, defaults to <code>"right top"</code>.<br> - Optional</li> - <li><code>"additional_backgrounds_tiling":</code> an array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats, with support for <code>"no-repeat"</code>, <code>"repeat"</code>, <code>"repeat-x"</code>, and <code>"repeat-y"</code>. If not specified, defaults to <code>"no-repeat"</code>.<br> - Optional</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<h3 id="images">images</h3> - -<p dir="ltr">All URLs are relative to the manifest.json file and cannot reference an external URL.</p> - -<p dir="ltr">Images should be 200 pixels high to ensure they always fill the header space vertically.</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>headerURL </code> <code>{{Deprecated_Inline}}</code></td> - <td><code>String</code></td> - <td> - <div class="blockIndicator warning"> - <p><code>headerURL</code> 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 <code>theme_frame</code> instead.</p> - </div> - - <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p> - - <p>Optional in desktop Firefox from Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> 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 <code>headerURL</code> is specified (see {{bug(1404688)}}).</p> - - <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code> must be specified.</p> - </td> - </tr> - <tr> - <td><code>theme_frame</code></td> - <td><code>String</code></td> - <td> - <p>The URL of a foreground image to be added to the header area and anchored to the upper right corner of the header area.</p> - - <div class="blockIndicator note"> - <p>Chrome anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</p> - </div> - - <p>Optional in desktop Firefox 60 onwards. One of <code>theme_frame</code> or <code>headerURL</code> had to be specified before Firefox 60.</p> - - <p>In Firefox for Android, <code>headerURL</code> or <code>theme_frame</code> must be specified.</p> - </td> - </tr> - <tr> - <td><code>additional_backgrounds</code></td> - <td><code>Array </code>of <code>String</code></td> - <td> - <div class="warning"> - <p>The <code>additional_backgrounds</code> 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.</p> - </div> - - <p>An array of URLs for additional background images to be added to the header area and displayed behind the <code>"theme_frame":</code> image. These images layer the first image in the array on top, the last image in the array at the bottom.</p> - - <p>Optional.</p> - - <p>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 <code>"properties":</code>.</p> - </td> - </tr> - </tbody> -</table> - -<h3 id="colors">colors</h3> - -<p>These properties define the colors used for different parts of the browser. They are all optional (but note that <code>"accentcolor"</code> and <code>"textcolor"</code> were mandatory in Firefox before version 63). How these properties affect the Firefox UI is shown here:</p> - -<table class="fullwidth-table standard-table"> - <tbody> - <tr> - <td style="background-color: white;"> - <p><img alt="Overview of the color properties and how they apply to Firefox UI components" src="https://mdn.mozillademos.org/files/16855/Themes_components_annotations.png" style="height: 1065px; width: 1521px;"></p> - </td> - </tr> - </tbody> -</table> - -<div class="blockIndicator note"> -<p>Where a component is affected by multiple color properties, the properties are listed in order of precedence.</p> -</div> - -<p>All these properties can be specified as either a string containing any valid <a href="/en-US/docs/Web/CSS/color_value">CSS color string</a> (including hexadecimal), or an RGB array, such as <code>"tab_background_text": [ 107 , 99 , 23 ]</code>.</p> - -<div class="blockIndicator note"> -<p><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/theme#Chrome_compatibility">In Chrome, colors may only be specified as RGB arrays</a>.</p> - -<p>In Firefox for Android colors can be specified using:</p> - -<ul> - <li>full hexadecimal notation, that is #RRGGBB only. <em>alpha</em> and shortened syntax, as in #RGB[A], are not supported.</li> - <li><a href="/en-US/docs/Web/CSS/color_value#Syntax_2">Functional notation</a> (RGB arrays) for themes targeting Firefox 68.2 or later.</li> -</ul> - -<p>Colors for Firefox for Android themes cannot be specified using color names.</p> -</div> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code>accentcolor</code><code> {{Deprecated_Inline}}</code></p> - </td> - <td> - <div class="blockIndicator warning"> - <p><code>accentcolor</code> 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 <code>frame</code> property instead.</p> - </div> - - <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"headerURL"</code> and <code>"additional_backgrounds"</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "accentcolor": "red", - "tab_background_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>bookmark_text</code></td> - <td> - <p>The color of text and icons in the bookmark and find bars. Also, if <code>tab_text</code> isn't defined it sets the color of the active tab text and if <code>icons</code> isn't defined the color of the toolbar icons. Provided as Chrome compatible alias for <code>toolbar_text</code>.</p> - - <div class="blockIndicator note"> - <p>Ensure any color used contrasts well with those used in <code>frame</code> and <code>frame_inactive</code> or <code>toolbar</code> if you're using that property.</p> - - <p>Where <code>icons</code> isn't defined, also ensure good contrast with<code> button_background_active</code> and <code>button_background_hover</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_text": "white", - "toolbar": "black", - "bookmark_text": "red" - } -}</pre> - </details> - - <p><img alt="Example use of the bookmark_text color property" src="https://mdn.mozillademos.org/files/16668/theme-bookmark_text.png"></p> - </td> - </tr> - <tr> - <td><code>button_background_active</code></td> - <td> - <p>The color of the background of the pressed toolbar buttons.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "button_background_active": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15872/theme-button_background_active.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>button_background_hover</code></td> - <td> - <p>The color of the background of the toolbar buttons on hover.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "button_background_hover": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15873/theme-button_background_hover.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>icons</code></td> - <td> - <p>The color of toolbar icons, excluding those in the find toolbar.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>frame</code>, <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "icons": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15874/theme-icons.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>icons_attention</code></td> - <td> - <p>The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>frame</code>, <code>frame_inactive</code>, <code>button_background_active</code>, and <code>button_background_hover</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "icons_attention": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15875/theme-icons_attention.png" style="height: 324px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>frame</code></td> - <td> - <p>The color of the header area background, displayed in the part of the header not covered or visible through the images specified in <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "red", - "tab_background_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15871/theme-accentcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>frame_inactive</code></td> - <td> - <p>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 <code>"theme_frame"</code> and <code>"additional_backgrounds"</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "red", - "frame_inactive": "gray", - "tab_text": "white" - } -}</pre> - </details> - - <p><img alt="Example use of the frame_inactive color property" src="https://mdn.mozillademos.org/files/16669/theme-frame_inactive.png" style="height: 193px; width: 752px;"></p> - </td> - </tr> - <tr> - <td><code>ntp_background</code></td> - <td> - <p>The new tab page background color.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "ntp_background": "red", - "ntp_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p> - </td> - </tr> - <tr> - <td><code>ntp_text</code></td> - <td> - <p>The new tab page text color.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>ntp_background</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "ntp_background": "red", - "ntp_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16175/ntp_colors.png" style="display: block; height: 190px; margin: 0 auto;"></p> - </td> - </tr> - <tr> - <td><code>popup</code></td> - <td> - <p>The background color of popups (such as the url bar dropdown and the arrow panels).</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15876/theme-popup.png" style="height: 324px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_border</code></td> - <td> - <p>The border color of popups.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup": "black", - "popup_text": "white", - "popup_border": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15877/theme-popup_border.png" style="height: 324px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_highlight</code></td> - <td> - <p>The background color of items highlighted using the keyboard inside popups (such as the selected url bar dropdown item).</p> - - <div class="blockIndicator note"> - <p>It's recommended to define <code>popup_highlight_text</code> to override the browser default text color on various platforms.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup_highlight": "red", - "popup_highlight_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15878/theme-popup_highlight.png" style="height: 490px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_highlight_text</code></td> - <td> - <p>The text color of items highlighted inside popups.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>popup_highlight</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup_highlight": "black", - "popup_highlight_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15879/theme-popup_highlight_text.png" style="height: 490px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>popup_text</code></td> - <td> - <p>The text color of popups.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>popup</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "popup": "black", - "popup_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15880/popup_text.png" style="height: 490px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar</code></td> - <td> - <p>The background color of the sidebar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar": "red", - "sidebar_highlight": "white", - "sidebar_highlight_text": "green", - "sidebar_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_border</code></td> - <td> - <p>The border and splitter color of the browser sidebar</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar_border": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16177/Screen_Shot_2018-09-16_at_6.13.31_PM.png" style="display: block; height: 286px; margin: 0px auto; width: 300px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_highlight</code></td> - <td> - <p>The background color of highlighted rows in built-in sidebars</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar_highlight": "red", - "sidebar_highlight_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16223/Screen_Shot_2018-10-04_at_11.15.46_AM.png" style="display: block; height: 357px; margin: 0px auto; width: 269px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_highlight_text</code></td> - <td> - <p>The text color of highlighted rows in sidebars.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>sidebar_highlight</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar_highlight": "pink", - "sidebar_highlight_text": "red", - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16224/Screen_Shot_2018-10-04_at_11.22.41_AM.png" style="display: block; height: 363px; margin: auto; width: 262px;"></p> - </td> - </tr> - <tr> - <td><code>sidebar_text</code></td> - <td> - <p>The text color of sidebars.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with that used in <code>sidebar</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "sidebar": "red", - "sidebar_highlight": "white", - "sidebar_highlight_text": "green", - "sidebar_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/16176/sidebar_colors.png" style="display: block; margin: 0 auto; width: 250px;"></p> - </td> - </tr> - <tr> - <td><code>tab_background_separator</code></td> - <td> - <p>The color of the vertical separator of the background tabs.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_background_separator": "red" - } -}</pre> - </details> - - <p><img alt="A closeup of browser tabs to highlight the separator." src="https://mdn.mozillademos.org/files/16048/theme-tab-background-separator.png" style="height: 356px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_background_text</code></td> - <td> - <p>The color of the text displayed in the inactive page tabs. If <code>tab_text</code> or <code>bookmark_text</code> isn't specified, applies to the active tab text.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and <code>frame_inactive</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "white", - "tab_background_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_line</code></td> - <td> - <p>The color of the selected tab line.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_line": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15881/theme-tab_line.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_loading</code></td> - <td> - <p>The color of the tab loading indicator and the tab loading burst.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_loading": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15882/theme-tab_loading.gif" style="height: 186px; width: 618px;"></p> - </td> - </tr> - <tr> - <td><code>tab_selected</code></td> - <td> - <p>The background color of the selected tab. When not in use selected tab color is set by <code>frame</code> and the <code>frame_inactive</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "images": { - "theme_frame": "weta.png" -}, - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_selected": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15883/theme-tab_selected.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>tab_text</code></td> - <td> - <p>From Firefox 59, it represents the text color for the selected tab. If <code>tab_line</code> isn't specified, it also defines the color of the selected tab line.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>tab_selected</code> or <code>frame</code> and <code>frame_inactive</code>.</p> - </div> - - <p>From Firefox 55 to 58, it is incorrectly implemented as alias for <code>"textcolor"</code></p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "images": { - "theme_frame": "weta.png" -}, - "colors": { - "frame": "black", - "tab_background_text": "white", - "tab_selected": "white", - "tab_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15884/theme-tab_text.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>textcolor {{Deprecated_Inline}}</code></td> - <td> - <div class="blockIndicator warning"> - <p><code>textcolor</code> 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 <code>tab_background_text</code> instead.</p> - </div> - - <p>The color of the text displayed in the header area.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "white", - "textcolor": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15885/theme-textcolor.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar</code></td> - <td> - <p>The background color for the navigation bar, the bookmarks bar, and the selected tab.</p> - - <p>This also sets the background color of the "Find" bar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "red", - "tab_background_text": "white" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15966/toolbar.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_bottom_separator</code></td> - <td> - <p>The color of the line separating the bottom of the toolbar from the region below.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar_bottom_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15887/theme-toolbar_bottom_separator.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field</code></td> - <td> - <p>The background color for fields in the toolbar, such as the URL bar.</p> - - <p>This also sets the background color of the <strong>Find in page</strong> field.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar_field": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15967/toolbar-field.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_border</code></td> - <td> - <p>The border color for fields in the toolbar.</p> - - <p>This also sets the border color of the <strong>Find in page</strong> field.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_border": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15968/toolbar-field-border.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_border_focus</code></td> - <td> - <p>The focused border color for fields in the toolbar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_border_focus": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15890/theme-toolbar_field_border_focus.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_focus</code></td> - <td> - <p>The focused background color for fields in the toolbar, such as the URL bar.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_focus": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15891/theme-toolbar_field_focus.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_highlight</code></td> - <td>The 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). - <details open><summary>See example</summary> - <pre class="brush: json notranslate"> -"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)" - } -}</pre> - </details> - - <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p> - - <p>Here, the <code>toolbar_field_highlight</code> field specifies that the highlight color is a light green, while the text is set to a dark-to-medium green using <code>toolbar_field_highlight_text</code>.</p> - </td> - </tr> - <tr> - <td><code>toolbar_field_highlight_text</code></td> - <td> - <p>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).</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>toolbar_field_highlight</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"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)" - } -}</pre> - </details> - - <p><img alt="Example showing customized text and highlight colors in the URL bar" src="https://mdn.mozillademos.org/files/16632/toolbar_field_highlight.png" style="height: 289px; width: 738px;"></p> - - <p>Here, the <code>toolbar_field_highlight_text</code> field is used to set the text color to a dark medium-dark green, while the highlight color is a light green.</p> - </td> - </tr> - <tr> - </tr> - <tr> - <td><code>toolbar_field_separator</code></td> - <td> - <p>The color of separators inside the URL bar. In Firefox 58 this was implemented as <code>toolbar_vertical_separator</code>.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15895/theme-toolbar_field_separator.png" style="height: 302px; width: 738px;"></p> - - <p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p> - </td> - </tr> - <tr> - <td><code>toolbar_field_text</code></td> - <td> - <p>The color of text in fields in the toolbar, such as the URL bar. This also sets the color of text in the <strong>Find in page</strong> field.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>toolbar_field</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15969/toolbar-field-text.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_field_text_focus</code></td> - <td> - <p>The color of text in focused fields in the toolbar, such as the URL bar.</p> - - <div class="blockIndicator note"> - <p>Ensure the color used contrasts well with those used in <code>toolbar_field_focus</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "toolbar": "black", - "tab_background_text": "white", - "toolbar_field": "black", - "toolbar_field_text": "white", - "toolbar_field_text_focus": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15893/theme-toolbar_field_text_focus.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_text </code></td> - <td> - <p>The color of toolbar text. This also sets the color of text in the "Find" bar.</p> - - <div class="blockIndicator note"> - <p>For compatibility with Chrome, use the alias <code>bookmark_text</code>.</p> - </div> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar": "black", - "toolbar_text": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15970/toolbar-text.png" style="height: 335px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_top_separator</code></td> - <td> - <p>The color of the line separating the top of the toolbar from the region above.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar": "black", - "toolbar_top_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15897/theme-toolbar_top_separator.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - <tr> - <td><code>toolbar_vertical_separator</code></td> - <td> - <p>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.</p> - - <details open><summary>See example</summary> - - <pre class="brush: json notranslate"> -"theme": { - "colors": { - "frame": "black", - "tab_background_text": "white", - "toolbar": "black", - "toolbar_vertical_separator": "red" - } -}</pre> - </details> - - <p><img alt="" src="https://mdn.mozillademos.org/files/15898/theme-toolbar_vertical_separator.png" style="height: 302px; width: 738px;"></p> - </td> - </tr> - </tbody> -</table> - -<h4 id="Aliases">Aliases</h4> - -<p>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.</p> - -<div class="blockIndicator warning"> -<p>Beginning Firefox 70, the following properties are removed: <code>accentcolor</code> and <code>textcolor</code>. Use <code>frame</code> and <code>tab_background_text</code> instead. Using these values in themes loaded into Firefox 65 or later will raise warnings.</p> -</div> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Alias for</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>bookmark_text</code></td> - <td><code>toolbar_text</code></td> - </tr> - <tr> - <td><code>frame</code></td> - <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td> - </tr> - <tr> - <td><code>frame_inactive</code></td> - <td><code>accentcolor</code> <code>{{Deprecated_Inline}}</code></td> - </tr> - <tr> - <td><code>tab_background_text</code></td> - <td><code>textcolor</code> <code>{{Deprecated_Inline}}</code></td> - </tr> - </tbody> -</table> - -<h3 id="properties">properties</h3> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Name</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>additional_backgrounds_alignment</code></td> - <td> - <p><code>Array</code> of <code>String</code></p> - </td> - <td> - <p>Optional.</p> - - <p>An array of enumeration values defining the alignment of the corresponding <code>"additional_backgrounds":</code> array item.<br> - The alignment options include:</p> - - <ul> - <li><code>"bottom"</code></li> - <li><code>"center"</code></li> - <li><code>"left"</code></li> - <li><code>"right"</code></li> - <li><code>"top"</code></li> - <li><code>"center bottom"</code></li> - <li><code>"center center"</code></li> - <li><code>"center top"</code></li> - <li><code>"left bottom"</code></li> - <li><code>"left center"</code></li> - <li><code>"left top"</code></li> - <li><code>"right bottom"</code></li> - <li><code>"right center"</code></li> - <li><code>"right top"</code>.</li> - </ul> - - <p>If not specified, defaults to <code>"right top"</code>.</p> - </td> - </tr> - <tr> - <td><code>additional_backgrounds_tiling</code></td> - <td> - <p><code>Array</code> of <code>String</code></p> - </td> - <td> - <p>Optional.</p> - - <p>An array of enumeration values defining how the corresponding <code>"additional_backgrounds":</code> array item repeats. Options include:</p> - - <ul> - <li><code>"no-repeat"</code></li> - <li><code>"repeat"</code></li> - <li><code>"repeat-x"</code></li> - <li><code>"repeat-y"</code></li> - </ul> - - <p>If not specified, defaults to <code>"no-repeat"</code>.</p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Examples">Examples</h2> - -<p dir="ltr" id="docs-internal-guid-f85f22a2-6854-24d7-769b-8a47c376e2f2">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:</p> - -<pre class="brush: json notranslate" dir="ltr"> "theme": { - "images": { - "theme_frame": "images/sun.jpg" - }, - "colors": { - "frame": "#CF723F", - "tab_background_text": "#000" - } - }</pre> - -<p dir="ltr">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:</p> - -<pre class="brush: json notranslate" dir="ltr"> "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" - } - }</pre> - -<p dir="ltr">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:</p> - -<pre class="brush: json notranslate" dir="ltr"> "theme": { - "images": { - "additional_backgrounds": [ "images/logo.png"] - }, - "properties": { - "additional_backgrounds_alignment": [ "top" ], - "additional_backgrounds_tiling": [ "repeat" ] - }, - "colors": { - "frame": "green", - "tab_background_text": "#000" - } - }</pre> - -<p><a id="example-screenshot" name="example-screenshot">The following example uses most of the different values for <code>theme.colors</code>:</a></p> - -<pre class="brush: json notranslate"> "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" - } - }</pre> - -<p>It will give you a browser that looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/15789/theme.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 1446px;"></p> - -<p>In this screenshot, <code>"toolbar_vertical_separator"</code> is the white vertical line in the URL bar dividing the Reader Mode icon from the other icons.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("webextensions.manifest.theme")}}</p> - -<h3 id="Colors">Colors</h3> - -<p>{{Compat("webextensions.manifest.theme.colors", 10)}}</p> - -<h3 id="Images">Images</h3> - -<p>{{Compat("webextensions.manifest.theme.images", 10)}}</p> - -<h3 id="Properties">Properties</h3> - -<p>{{Compat("webextensions.manifest.theme.properties", 10)}}</p> - -<h3 id="Chrome_compatibility">Chrome compatibility</h3> - -<p>In Chrome:</p> - -<ul> - <li><code>colors/toolbar_text</code> is not used, use <code>colors/bookmark_text</code> instead.</li> - <li><code>images/theme_frame</code> anchors the image to the top left of the header and if the image doesn’t fill the header area tile the image.</li> - <li>all colors must be specified as an array of RGB values, like this: - <pre class="brush: json notranslate">"theme": { - "colors": { - "frame": [255, 0, 0], - "tab_background_text": [0, 255, 0], - "bookmark_text": [0, 0, 255] - } -}</pre> - - <p>From Firefox 59 onward, both the array form and the CSS color form are accepted for all properties. Before that, <code>colors/frame</code> and <code>colors/tab_background_text</code> required the array form, while other properties required the CSS color form.</p> - </li> -</ul> 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 ---- -<div>{{AddonSidebar}}</div> - -<p>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 <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> into, and to specify which URLs to add <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest">webRequest</a></code> listeners to.</p> - -<p>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 <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code> key in manifest.json.</p> - -<h2 id="Match_pattern_structure">Match pattern structure</h2> - -<div class="note"> -<p><strong>Note:</strong> Some browsers don’t support certain schemes.<br> - Check the <a href="#Browser_compatibility">Browser compatibility table</a> for details.</p> -</div> - -<p>All match patterns are specified as strings. Apart from the special <code><a href="/en-US/Add-ons/WebExtensions/Match_patterns#%3Call_urls%3E"><all_urls></a></code> pattern, match patterns consist of three parts: <em>scheme</em>, <em>host</em>, and <em>path</em>. The scheme and host are separated by <code>://</code>.</p> - -<pre><scheme>://<host><path></pre> - -<h3 id="scheme">scheme</h3> - -<p>The <em>scheme</em> component may take one of two forms:</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col" style="width: 50%;">Form</th> - <th scope="col">Matches</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>*</code></td> - <td>Only "http" and "https" and in some browsers also <a href="/en-US/docs/Web/API/WebSockets_API">"ws" and "wss"</a>.</td> - </tr> - <tr> - <td>One of <code>http</code>, <code>https</code>, <code>ws</code>, <code>wss</code>, <code>ftp</code>, <code>ftps</code>, <code>data</code> or <code>file</code>.</td> - <td>Only the given scheme.</td> - </tr> - </tbody> -</table> - -<h3 id="host">host</h3> - -<p>The <em>host</em> component may take one of three forms:</p> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col" style="width: 50%;">Form</th> - <th scope="col">Matches</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>*</code></td> - <td>Any host.</td> - </tr> - <tr> - <td><code>*.</code> followed by part of the hostname.</td> - <td>The given host and any of its subdomains.</td> - </tr> - <tr> - <td>A complete hostname, without wildcards.</td> - <td>Only the given host.</td> - </tr> - </tbody> -</table> - -<p><em>host</em> must not include a port number.</p> - -<p><em>host</em> is optional only if the <em>scheme</em> is "file".</p> - -<p>Note that the wildcard may only appear at the start.</p> - -<h3 id="path">path</h3> - -<p>The <em>path</em> component must begin with a <code>/</code>.</p> - -<p>After that, it may subsequently contain any combination of the <code>*</code> wildcard and any of the characters that are allowed in URL paths or query strings. Unlike <em>host</em>, the <em>path</em> component may contain the <code>*</code> wildcard in the middle or at the end, and the <code>*</code> wildcard may appear more than once.</p> - -<p>The value for the <em>path</em> matches against the string which is the URL path plus the <a href="https://en.wikipedia.org/wiki/Query_string">URL query string</a>. This includes the <code>?</code> 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 <code>foo.bar</code>, then you need to use an array of Match Patterns like <code>['*://*/*foo.bar', '*://*/*foo.bar?*']</code>. The <code>?*</code> is needed, rather than just <code>bar*</code>, in order to anchor the ending <code>*</code> as applying to the URL query string and not some portion of the URL path.</p> - -<p>Neither the <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment identifier</a>, nor the <code>#</code> which precedes it, are considered as part of the <em>path</em>.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The path pattern string should not include a port number. Adding a port, as in: <em>"http://localhost:1234/*" </em>causes the match pattern to be ignored. However, "<em>http://localhost:1234</em>" will match with "<em>http://localhost/*</em>"</p> -</div> - -<h3 id="<all_urls>"><all_urls></h3> - -<p>The special value <code><all_urls></code> matches all URLs under any of the supported schemes: that is "http", "https", "ws", "wss", "ftp", "data", and "file".</p> - -<h2 id="Examples">Examples</h2> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col" style="width: 33%;">Pattern</th> - <th scope="col" style="width: 33%;">Example matches</th> - <th scope="col" style="width: 33%;">Example non-matches</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p><code><all_urls></code></p> - - <p>Match all URLs.</p> - </td> - <td> - <p><code>http://example.org/</code></p> - - <p><code>https://a.org/some/path/</code></p> - - <p><code>ws://sockets.somewhere.org/</code></p> - - <p><code>wss://ws.example.com/stuff/</code></p> - - <p><code>ftp://files.somewhere.org/</code></p> - - <p><code>ftps://files.somewhere.org/</code></p> - </td> - <td> - <p><code>resource://a/b/c/</code><br> - (unsupported scheme)</p> - </td> - </tr> - <tr> - <td> - <p><code>*://*/*</code></p> - - <p>Match all HTTP, HTTPS and WebSocket URLs.</p> - </td> - <td> - <p><code>http://example.org/</code></p> - - <p><code>https://a.org/some/path/</code></p> - - <p><code>ws://sockets.somewhere.org/</code></p> - - <p><code>wss://ws.example.com/stuff/</code></p> - </td> - <td> - <p><code>ftp://ftp.example.org/</code><br> - (unmatched scheme)</p> - - <p><code>ftps://ftp.example.org/</code><br> - (unmatched scheme)</p> - - <p><code>file:///a/</code><br> - (unmatched scheme)</p> - </td> - </tr> - <tr> - <td> - <p><code>*://*.mozilla.org/*</code></p> - - <p>Match all HTTP, HTTPS and WebSocket URLs that are hosted at "mozilla.org" or one of its subdomains.</p> - </td> - <td> - <p><code>http://mozilla.org/</code></p> - - <p><code>https://mozilla.org/</code></p> - - <p><code>http://a.mozilla.org/</code></p> - - <p><code>http://a.b.mozilla.org/</code></p> - - <p><code>https://b.mozilla.org/path/</code></p> - - <p><code>ws://ws.mozilla.org/</code></p> - - <p><code>wss://secure.mozilla.org/something</code></p> - </td> - <td> - <p><code>ftp://mozilla.org/</code><br> - (unmatched scheme)</p> - - <p><code>http://mozilla.com/</code><br> - (unmatched host)</p> - - <p><code>http://firefox.org/</code><br> - (unmatched host)</p> - </td> - </tr> - <tr> - <td> - <p><code>*://mozilla.org/</code></p> - - <p>Match all HTTP, HTTPS and WebSocket URLs that are hosted at exactly "mozilla.org/".</p> - </td> - <td> - <p><code>http://mozilla.org/</code></p> - - <p><code>https://mozilla.org/</code></p> - - <p><code>ws://mozilla.org/</code></p> - - <p><code>wss://mozilla.org/</code></p> - </td> - <td> - <p><code>ftp://mozilla.org/</code><br> - (unmatched scheme)</p> - - <p><code>http://a.mozilla.org/</code><br> - (unmatched host)</p> - - <p><code>http://mozilla.org/a</code><br> - (unmatched path)</p> - </td> - </tr> - <tr> - <td> - <p><code>ftp://mozilla.org/</code></p> - - <p>Match only "ftp://mozilla.org/".</p> - </td> - <td><code>ftp://mozilla.org</code></td> - <td> - <p><code>http://mozilla.org/</code><br> - (unmatched scheme)</p> - - <p><code>ftp://sub.mozilla.org/</code><br> - (unmatched host)</p> - - <p><code>ftp://mozilla.org/path</code><br> - (unmatched path)</p> - </td> - </tr> - <tr> - <td> - <p><code>https://*/path</code></p> - - <p>Match HTTPS URLs on any host, whose path is "path".</p> - </td> - <td> - <p><code>https://mozilla.org/path</code></p> - - <p><code>https://a.mozilla.org/path</code></p> - - <p><code>https://something.com/path</code></p> - </td> - <td> - <p><code>http://mozilla.org/path</code><br> - (unmatched scheme)</p> - - <p><code>https://mozilla.org/path/</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/a</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/path?foo=1</code><br> - (unmatched path due to URL query string)</p> - </td> - </tr> - <tr> - <td> - <p><code>https://*/path/</code></p> - - <p>Match HTTPS URLs on any host, whose path is "path/" and which has no URL query string.</p> - </td> - <td> - <p><code>https://mozilla.org/path/</code></p> - - <p><code>https://a.mozilla.org/path/</code></p> - - <p><code>https://something.com/path</code>/</p> - </td> - <td> - <p><code>http://mozilla.org/path/</code><br> - (unmatched scheme)</p> - - <p><code>https://mozilla.org/path</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/a</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/path/</code><code>?foo=1</code><br> - (unmatched path due to URL query string)</p> - </td> - </tr> - <tr> - <td> - <p><code>https://mozilla.org/*</code></p> - - <p>Match HTTPS URLs only at "mozilla.org", with any URL path and URL query string.</p> - </td> - <td> - <p><code>https://mozilla.org/</code></p> - - <p><code>https://mozilla.org/path</code></p> - - <p><code>https://mozilla.org/another</code></p> - - <p><code>https://mozilla.org/path/to/doc</code></p> - - <p><code>https://mozilla.org/path/to/doc?foo=1</code></p> - </td> - <td> - <p><code>http://mozilla.org/path</code><br> - (unmatched scheme)</p> - - <p><code>https://mozilla.com/path</code><br> - (unmatched host)</p> - </td> - </tr> - <tr> - <td> - <p><code>https://mozilla.org/a/b/c/</code></p> - - <p>Match only this URL, or this URL with any URL fragment.</p> - </td> - <td> - <p><code>https://mozilla.org/a/b/c/</code></p> - - <p><code>https://mozilla.org/a/b/c/#section1</code></p> - </td> - <td>Anything else.</td> - </tr> - <tr> - <td> - <p><code>https://mozilla.org/*/b/*/</code></p> - - <p>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 <code>/</code>.</p> - </td> - <td> - <p><code>https://mozilla.org/a/b/c/</code></p> - - <p><code>https://mozilla.org/d/b/f/</code></p> - - <p><code>https://mozilla.org/a/b/c/d/</code></p> - - <p><code>https://mozilla.org/a/b/c/d/#section1</code></p> - - <p><code>https://mozilla.org/a/b/c/d/?foo=/</code></p> - - <p><code>https://mozilla.org/a?foo=21314&bar=/b/&extra=c/</code></p> - </td> - <td> - <p><code>https://mozilla.org/b/*/</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/a/b/</code><br> - (unmatched path)</p> - - <p><code>https://mozilla.org/a/b/c/d/?foo=bar</code><br> - (unmatched path due to URL query string)</p> - </td> - </tr> - <tr> - <td> - <p><code>file:///blah/*</code></p> - - <p>Match any FILE URL whose path begins with "blah".</p> - </td> - <td> - <p><code>file:///blah/</code></p> - - <p><code>file:///blah/bleh</code></p> - </td> - <td><code>file:///bleh/</code><br> - (unmatched path)</td> - </tr> - </tbody> -</table> - -<h3 id="Invalid_match_patterns">Invalid match patterns</h3> - -<table class="fullwidth-table standard-table"> - <thead> - <tr> - <th scope="col">Invalid pattern</th> - <th scope="col">Reason</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>resource://path/</code></td> - <td>Unsupported scheme.</td> - </tr> - <tr> - <td><code>https://mozilla.org</code></td> - <td>No path.</td> - </tr> - <tr> - <td><code>https://mozilla.*.org/</code></td> - <td>"*" in host must be at the start.</td> - </tr> - <tr> - <td><code>https://*zilla.org/</code></td> - <td>"*" in host must be the only character or be followed by ".".</td> - </tr> - <tr> - <td><code>http*://mozilla.org/</code></td> - <td>"*" in scheme must be the only character.</td> - </tr> - <tr> - <td><code>https://mozilla.org:80/</code></td> - <td>Host must not include a port number.</td> - </tr> - <tr> - <td><code>*://*</code></td> - <td>Empty path: this should be "<code>*://*/*</code>".</td> - </tr> - <tr> - <td><code>file://*</code></td> - <td>Empty path: this should be "<code>file:///*</code>".</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<h3 id="scheme_2">scheme</h3> - - - -<p>{{Compat("webextensions.match_patterns.scheme",10)}}</p> 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 ---- -<div><section class="Quick_links" id="Quick_Links"> - <ol> - <li class="toggle"> - <details> - <summary>Firefox developer release notes</summary> - <ol> - <li><a href="/de/docs/Mozilla/Firefox/Releases">Firefox developer release notes</a></li> - </ol> - </details> - </li> - <li class="toggle"> - <details> - <summary>Add-ons</summary> - <ol> - <li><a href="/de/Add-ons/WebExtensions">Browser extensions</a></li> - <li><a href="/de/Add-ons/Themes">Themes</a></li> - </ol> - </details> - </li> - <li class="toggle"> - <details> - <summary>Firefox internals</summary> - <ol> - <li><a href="/de/docs/Mozilla/">Mozilla project</a></li> - <li><a href="/de/docs/Mozilla/Gecko">Gecko</a></li> - <li><a href="/de/docs/Mozilla/Firefox/Headless_mode">Headless mode</a></li> - <li><a href="/de/docs/Mozilla/JavaScript_code_modules">JavaScript code modules</a></li> - <li><a href="/de/docs/Mozilla/js-ctypes">JS-ctypes</a></li> - <li><a href="/de/docs/Mozilla/MathML_Project">MathML project</a></li> - <li><a href="/de/docs/Mozilla/MFBT">MFBT</a></li> - <li><a href="/de/docs/Mozilla/Projects">Mozilla projects</a></li> - <li><a href="/de/docs/Mozilla/Preferences">Preference system</a></li> - <li><a href="/de/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a></li> - <li><a href="/de/docs/Mozilla/Tech/XPCOM">XPCOM</a></li> - <li><a href="/de/docs/Mozilla/Tech/XUL">XUL</a></li> - </ol> - </details> - </li> - <li class="toggle"> - <details> - <summary>Building and contributing</summary> - <ol> - <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions">Build instructions</a></li> - <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions/Configuring_Build_Options">Configuring build options</a></li> - <li><a href="/de/docs/Mozilla/Developer_guide/Build_Instructions/How_Mozilla_s_build_system_works">How the build system works</a></li> - <li><a href="/de/docs/Mozilla/Developer_guide/Source_Code/Mercurial">Mozilla source code</a></li> - <li><a href="/de/docs/Mozilla/Localization">Localization</a></li> - <li><a href="/de/docs/Mozilla/Mercurial">Mercurial</a></li> - <li><a href="/de/docs/Mozilla/QA">Quality assurance</a></li> - <li><a href="/de/docs/Mozilla/Using_Mozilla_code_in_other_projects">Using Mozilla code in other projects</a></li> - </ol> - </details> - </li> - </ol> -</section></div><p><a class="external" href="http://www.firefox.com/" title="http://www.firefox.com/">Firefox 3.6</a> 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.</p> - -<h2 id="For_web_site_and_application_developers">For web site and application developers</h2> - -<h3 id="CSS">CSS</h3> - -<dl> - <dt><a href="/en-US/docs/CSS/Using_CSS_gradients" title="en-US/docs/Using gradients">Using gradients</a></dt> - <dd>Firefox 3.6 adds support for the proposed <a href="/de/docs/Web/CSS/-moz-linear-gradient" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>-moz-linear-gradient</code></a> and <a href="/de/docs/Web/CSS/-moz-radial-gradient" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>-moz-radial-gradient</code></a> properties for <a href="/de/docs/Web/CSS/background" title="Die background CSS Eigenschaft ist eine Kurzschreibweise, um die verschiedenen Hintergrundwerte an einer einzigen Stelle im Stylesheet zu setzen. background kann dazu verwendet werden, einen oder mehrere der folgenden Werte zu setzen: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size und background-attachment."><code>background</code></a>.</dd> - <dt><a href="/en-US/docs/CSS/Multiple_backgrounds" title="en-US/docs/CSS/Multiple backgrounds">Multiple backgrounds</a></dt> - <dd>The <a href="/de/docs/Web/CSS/background" title="Die background CSS Eigenschaft ist eine Kurzschreibweise, um die verschiedenen Hintergrundwerte an einer einzigen Stelle im Stylesheet zu setzen. background kann dazu verwendet werden, einen oder mehrere der folgenden Werte zu setzen: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size und background-attachment."><code>background</code></a> property (as well as <a href="/de/docs/Web/CSS/background-color" title="Die background-color CSS Eigenschaft setzt die Hintergrundfarbe eines Elements, entweder durch einen Farbwert oder das Schlüsselwort transparent."><code>background-color</code></a>, <a href="/de/docs/Web/CSS/background-image" title="Die background-image-Eigenschaft legt ein oder mehrere Hintergrundbilder für ein Element fest. Die einzelnen Bilder werden übereinander gestapelt, wobei die erste Schicht so dargestellt wird, dass sie dem Benutzer am nächsten erscheint. Hintergrundbilder werden immer über Hintergrundfarben gelegt."><code>background-image</code></a>, <a href="/de/docs/Web/CSS/background-position" title="Die background-position Eigenschaft bestimmt die Position des Hintergrundbildes"><code>background-position</code></a>, <a href="/de/docs/Web/CSS/background-repeat" title="Die background-repeat Eigenschaft bestimmt, ob und wie Hintergrundbilder wiederholt werden."><code>background-repeat</code></a>, and <a href="/de/docs/Web/CSS/background-attachment" title="Die background-attachment Eigenschaft bestimmt, ob, das über background-image festgelegte Hintergrundbild beim Scrollen mit wandert oder an einem festen Ort fixiert ist."><code>background-attachment</code></a>) now supports multiple backgrounds. This lets you specify multiple backgrounds that are rendered atop one another in layers.</dd> - <dt><a href="/en-US/docs/CSS/Media_queries#Mozilla-specific_media_features" title="en-US/docs/CSS/Media queries#Mozilla-specific media features">Mozilla-specific media features</a></dt> - <dd>Media features have been added for Mozilla-specific system metrics, so that <a href="/en-US/docs/CSS/Media_queries" title="en-US/docs/CSS/Media queries">media queries</a> can be used to more safely check on the availability of features such as touch support.</dd> - <dt><a href="/en-US/docs/CSS/Scaling_background_images" title="en-US/docs/CSS/Scaling background images">Scaling background images</a></dt> - <dd>The <code>background-size </code>property from the <a class="external" href="http://dev.w3.org/csswg/css3-background/" title="http://dev.w3.org/csswg/css3-background/#the-background-size-property">CSS 3 Backgrounds and Borders draft</a> is now supported under the name <a href="/de/docs/Web/CSS/-moz-background-size" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>-moz-background-size</code></a>.</dd> - <dt><a href="/en-US/docs/WOFF" title="en-US/docs/About WOFF">WOFF font support</a></dt> - <dd><a href="/de/docs/Web/CSS/@font-face" title="Die @font-face CSS at-Regel erlaubt Web-Autoren, Texte mit spezifischen Schriftarten (Fonts), die auf dem jeweiligen Webserver abgelegt sind, darzustellen. Durch die @font-face Regel sind Web-Autoren nicht mehr länger auf die eingeschränkte Zahl an Fonts angewiesen, die auf den Computern von Usern installiert ist. Die @font-face at Regel lässt sich nicht nur in der oberen CSS-Ebene einbinden, sondern auch in irgendeiner CSS conditional-group at-Regel."><code>@font-face</code></a> now supports the WOFF downloadable font file format.</dd> - <dt><a href="/en-US/docs/CSS/pointer-events" title="en-US/docs/CSS/pointer-events">Pointer events</a></dt> - <dd>The <a href="/de/docs/Web/CSS/pointer-events" title="Die CSS-Eigenschaft pointer-events erlaubt es dem Autor zu steuern, unter welchen Umständen (wenn überhaupt) ein spezifisches grafisches Element target eines Mouse-Events wird. Wenn die Eigenschaft nicht gesetzt ist, werden die Eigenschaften von visiblePainted auf den SVG Inhalt angewandt."><code>pointer-events</code></a> property lets content specify whether or not an element may be the target of mouse pointer events.</dd> -</dl> - -<h4 id="Miscellaneous_CSS_changes">Miscellaneous CSS changes</h4> - -<ul> - <li>The <a href="/en-US/docs/CSS/length#Relative_length_units" title="en-US/docs/CSS/length#Relative length units"><code>rem</code></a> length unit from <a class="external" href="http://www.w3.org/TR/css3-values/#lengths" title="http://www.w3.org/TR/css3-values/#lengths">CSS3 Values and Units</a> is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=472195" title="FIXED: support css3 root em ('rem' or 're') units">Bug 472195</a></li> - <li><a href="/de/docs/Web/CSS/image-rendering" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>image-rendering</code></a> is supported for images, background images, videos and canvases. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=423756" title="FIXED: Request: Switch for authors to turn on/off bilinear filtering when enlarging images">Bug 423756</a></li> - <li><a href="/de/docs/Web/CSS/text-align" title="Die CSS Eigenschaft text-align beschreibt, wie Inlineinhalte wie Text in ihrem Elternblockelement ausgerichtet werden. text-align steuert nicht die Ausrichtung von Blockelementen selbst, nur deren Inlineinhalte."><code>text-align</code></a>:end is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=299837" title="FIXED: [FIX]add support for text-align: end">Bug 299837</a></li> - <li>DOM changes to elements using the table <a href="/de/docs/Web/CSS/display" title="Die display Eigenschaft legt den Typ einer Rendering-Box eines Elements fest. Für HTML sind die standardmäßigen display Werte in der HTML-Spezifikation beschrieben und in den User- bzw. Browser-Stylesheets angegeben. Für XML-Dokumente ist der voreingestellte Wert inline."><code>display</code></a> types now work much better.</li> - <li>Added <a href="/de/docs/Web/CSS/:-moz-locale-dir(ltr)" title='Die :-moz-locale-dir(ltr) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von links nach rechts angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "ltr" bestimmt.'><code>:-moz-locale-dir(ltr)</code></a> and <a href="/de/docs/Web/CSS/:-moz-locale-dir(rtl)" title='Die :-moz-locale-dir(rtl) CSS Pseudoklasse matcht ein Element, falls die Benutzerschnittstelle von rechts nach links angezeigt wird. Dies wird durch das Setzen der Einstellung intl.uidirection.locale (wobei locale die aktuelle Sprachumgebung ist) auf "rtl" bestimmt.'><code>:-moz-locale-dir(rtl)</code></a> to make it easier to customize layouts based on whether the user interface is being displayed using a left-to-right or a right-to-left locale. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=478416" title="FIXED: Replace chromedir with something more sane">Bug 478416</a></li> - <li>Added support for the <a href="/de/docs/Web/CSS/:indeterminate" title='Die :indeterminate CSS Pseudoklasse repräsentiert alle &lt;input type="checkbox"> Elements, deren indeterminate DOM Eigenschaft durch JavaScript auf true gesetzt wurde. Darüber hinaus wird sie in manchen Browsern dazu verwendet, &lt;progress> Elemente in einem Zwischenstatus zu finden.'><code>:indeterminate</code></a> pseudo-class, which matches <code>checkbox</code> <a class="internal" href="/en-US/docs/HTML/Element/Input" title="en-US/docs/HTML/Element/input"><code>input</code></a> elements whose <code>indeterminate</code> attribute is <code>true</code>.</li> - <li>Windowed plugins are no longer displayed in CSS transforms, because they can't be transformed properly by the compositor.</li> -</ul> - -<h3 id="HTML">HTML</h3> - -<dl> - <dt><a href="/en-US/docs/Using_files_from_web_applications" title="en-US/docs/Using files from web applications">Using files from web applications</a></dt> - <dd>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 <code>input type="file"</code> HTML element's new <code>multiple</code> attribute.</dd> - <dt>HTML5 video supports poster frames</dt> - <dd>The <code>poster</code> attribute is now supported for the <a class="internal" href="/en-US/docs/HTML/Element/Video" title="en-US/docs/HTML/Element/Video"><code>video</code></a> element, allowing content to specify a poster frame to be displayed until the video begins to play.</dd> - <dt>Checkboxes and radio buttons support the <code>indeterminate</code> property</dt> - <dd>HTML <a class="internal" href="/en-US/docs/HTML/Element/Input" title="en-US/docs/HTML/Element/input"><code>input</code></a> elements of types <code>checkbox</code> and <code>radio</code> now support the indeterminate property, which allows a third, "indeterminate" state.</dd> - <dt>Canvas image smoothing can be controlled</dt> - <dd>The new <a class="internal" href="/en-US/docs/Canvas_tutorial/Using_images#Controlling_image_scaling_behavior" title="en-US/docs/Canvas tutorial/Using images#Controlling image scaling behavior"><code>mozImageSmoothingEnabled</code></a> property can be used to turn on and off image smoothing when scaling in <a class="internal" href="/en-US/docs/HTML/Element/canvas" title="en-US/docs/HTML/Element/canvas"><code>canvas</code></a> elements.</dd> - <dt>Asynchronous script execution</dt> - <dd>By setting the <code>async</code> attribute on a <a href="/en-US/docs/HTML/Element/Script" title="en-US/docs/HTML/Element/Script"><code>script</code></a> element, the <code>script</code> will not block loading or display of the rest of the page. Instead the <code>script</code> executes as soon as it is downloaded.</dd> -</dl> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Gecko 1.9.2 introduces JavaScript 1.8.2, which adds a number of language features from the <a href="/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla" title="https://developer.mozilla.org/en-US/docs/JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5 standard</a>:</p> - -<ul> - <li><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/parse" title="en-US/docs/Core JavaScript 1.5 Reference/Global Objects/Date/parse"><code>Date.parse()</code></a> can now parse ISO 8601 dates like YYYY-MM-DD.</li> - <li> - <p>The <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function/prototype" title="en-US/docs/Core JavaScript 1.5 Reference/Global Objects/Function/prototype"><code>prototype</code></a> property of function instances is no longer enumerable.</p> - </li> -</ul> - -<dl> -</dl> - -<h3 id="DOM">DOM</h3> - -<dl> - <dt>Web workers can now self-terminate</dt> - <dd><a href="/en-US/docs/DOM/Using_web_workers" title="en-US/docs/Using web workers">Workers</a> now support the <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIWorkerScope#close()">nsIWorkerScope.close()</a></code> method, which allows them to terminate themselves.</dd> - <dt>Drag and drop now supports files</dt> - <dd>The <a href="/en-US/docs/DragDrop/DataTransfer" title="en-US/docs/DragDrop/DataTransfer"><code>DataTransfer</code></a> object provided to drag listeners now includes a list of files that were dragged.</dd> - <dt>Checking to see if an element matches a specified CSS selector</dt> - <dd>The new <a href="/de/docs/Web/API/Node/mozMatchesSelector" title="Die Beschreibung hierüber wurde bisher noch nicht geschrieben. Bitte überlege, mitzuwirken!"><code>element.mozMatchesSelector</code></a> method lets you determine whether or not an element matches a specified CSS selector. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=518003" title="FIXED: implement function to check whether element matches a CSS selector">Bug 518003</a>.</dd> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="en-US/docs/Detecting device orientation">Detecting device orientation</a></dt> - <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <a href="/en-US/docs/DOM/MozOrientation" title="en-US/docs/DOM/MozOrientation"><code>MozOrientation</code></a> event. Firefox 3.6 supports the accelerometer in Mac laptops.</dd> - <dt><a href="/en-US/docs/DOM/Detecting_document_width_and_height_changes" title="en-US/docs/DOM/Detecting document width and height changes">Detecting document width and height changes</a></dt> - <dd>The new <code>MozScrollAreaChanged</code> event is dispatched whenever the document's <code>scrollWidth</code> and/or <code>scrollHeight</code> properties change.</dd> -</dl> - -<h4 id="Miscellaneous_DOM_changes">Miscellaneous DOM changes</h4> - -<ul> - <li>The <code>getBoxObjectFor()</code> method has been <strong>removed</strong>, as it was non-standard and exposed even more non-standard stuff to the web. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=340571" title="FIXED: getBoxObjectFor leaking-onto-the-Web disaster">Bug 340571</a>. Also affects <a class="external" href="http://mootools.net/" title="http://mootools.net/">MooTools</a> which uses this call for Gecko detection; this has been fixed in the latest version of MooTools, so be sure to update.</li> - <li>The new <a class="internal" href="/en-US/docs/DOM/window.mozInnerScreenX" title="en-US/docs/DOM/window.mozInnerScreenX"><code>mozInnerScreenX</code></a> and <a class="internal" href="/en-US/docs/DOM/window.mozInnerScreenY" title="en-US/docs/DOM/window.mozInnerScreenY"><code>mozInnerScreenY</code></a> properties on DOM windows have been added; these return the screen coordinates of the top-left corner of the window's viewport.</li> - <li>The new <code>mozScreenPixelsPerCSSPixel</code> attribute on the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDOMWindowUtils" title="">nsIDOMWindowUtils</a></code> interface, accessible only to chrome, provides a conversion factor between CSS pixels and screen pixels; this value can vary based on the zoom level of the content.</li> - <li>When the page's URI's document fragment identifier (the part after the "#" (hash) character) changes, a new <code>hashchange</code> event is sent to the page. See <a class="internal" href="/en-US/docs/DOM/window.onhashchange" title="window.onhashchange">window.onhashchange</a> for more information. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=385434" title="FIXED: Add support for HTML5 onhashchange (event for named anchor changes)">Bug 385434</a></li> - <li>The attribute <a class="internal" href="/en-US/docs/DOM/document.readyState" title="en-US/docs/DOM/document.readyState"><code>document.readyState</code></a> is now supported. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=347174" title='FIXED: Implement document.readystate == "complete"'>Bug 347174</a></li> - <li>Support for HTML5's <code><a class="internal" href="/en-US/docs/DOM/element.classList" title="element.classList">element.classList</a></code> to allow easier handling of the class attribute. <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=501257" title="FIXED: Implement HTML 5's HTMLElement.classList property">Bug 501257</a></li> - <li><code>localName</code> and <code>namespaceURI</code> in HTML documents now behave like they do in XHTML documents: <code>localName</code> returns in lower case and <code>namespaceURI</code> for HTML elements is <code>"<a class="external" href="http://www.w3.org/1999/xhtml" rel="freelink">http://www.w3.org/1999/xhtml</a>"</code>.</li> - <li><a href="/en-US/docs/DOM/element.getElementsByTagNameNS" title="en-US/docs/DOM/element.getElementsByTagNameNS"><code>element.getElementsByTagNameNS</code></a> no longer lowercases its argument, so upper-case ASCII letters in the argument make matches against HTML elements fail. The same is true for <a href="/en-US/docs/DOM/document.getElementsByTagNameNS" title="en-US/docs/DOM/document.getElementsByTagNameNS"><code>document.getElementsByTagNameNS</code></a>.</li> - <li>Support has been added for addresses in geolocation via the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDOMGeoPositionAddress" title="">nsIDOMGeoPositionAddress</a></code> interface and a new field added to <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDOMGeoPosition" title="">nsIDOMGeoPosition</a></code>.</li> - <li>The <a href="/de/docs/Web/API/Window/getComputedStyle" title="Die Methode Window.getComputedStyle() gibt ein Objekt zurück, das alle CSS-Eigenschaften eines Elements enthält; und zwar nachdem alle aktiven Stylesheets geladen und Basisberechungen ausgeführt wurden."><code>window.getComputedStyle</code></a> function now returns quotes within <code>url()</code> values.</li> -</ul> - -<h3 id="XPath">XPath</h3> - -<dl> - <dt>The choose() XPath method is now supported</dt> - <dd>The <a href="/en-US/docs/XPath/Functions/choose" title="en-US/docs/XPath/Functions/choose"><code>choose()</code></a> method is now supported by our implementation of <a href="/en-US/docs/XPath" title="en-US/docs/XPath">XPath</a>.</dd> -</dl> - -<h2 id="For_XUL_and_add-on_developers">For XUL and add-on developers</h2> - -<p>If you're an extension developer, you should start by reading <a class="internal" href="/en-US/docs/Updating_extensions_for_Firefox_3.6" title="en-US/docs/Updating extensions for Firefox 3.6">Updating extensions for Firefox 3.6</a>, which offers a helpful overview of what changes may affect your extension. Plug-in developers should read <a class="internal" href="/en-US/docs/Updating_plug-ins_for_Firefox_3.6" title="en-US/docs/Updating plug-ins for Firefox 3.6">Updating plug-ins for Firefox 3.6</a>.</p> - -<h3 id="New_features">New features</h3> - -<dl> - <dt><a href="/en-US/docs/Detecting_device_orientation" title="en-US/docs/Detecting device orientation">Detecting device orientation</a></dt> - <dd>Content can now detect the orientation of the device if it has a supported accelerometer, using the <a href="/en-US/docs/DOM/MozOrientation" title="en-US/docs/DOM/MozOrientation"><code>MozOrientation</code></a> event. Firefox 3.6 supports the accelerometer in Mac laptops.</dd> - <dt><a href="/en-US/docs/Monitoring_HTTP_activity" title="en-US/docs/Monitoring HTTP activity">Monitoring HTTP activity</a></dt> - <dd>You can now monitor HTTP transactions to observe requests and responses in real time.</dd> - <dt><a href="/en-US/docs/Working_with_the_Windows_taskbar" title="en-US/docs/Working with the Windows taskbar">Working with the Windows taskbar</a></dt> - <dd>It's now possible to customize the appearance of windows in the taskbar in Windows 7 or later. <em>This has been disabled by default in Firefox 3.6.</em></dd> -</dl> - -<h3 id="Places">Places</h3> - -<ul> - <li>Places queries can now use the <code>redirectsMode</code> attribute on the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsINavHistoryQueryOptions" title="">nsINavHistoryQueryOptions</a></code> interface to specify whether or not to include redirected pages in results.</li> - <li>Added the new <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIFaviconService#expireAllFavicons()">nsIFaviconService.expireAllFavicons()</a></code> method to the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIFaviconService" title="">nsIFaviconService</a></code> interface.</li> -</ul> - -<h3 id="Storage">Storage</h3> - -<dl> - <dt><a href="/en-US/docs/Storage#Collation_(sorting)" title="en-US/docs/Storage#Collation (sorting)">Locale-aware collation of data is now supported by the Storage API</a></dt> - <dd>Gecko 1.9.2 added several new collation methods to provide optimized collation (sorting) of results using locale-aware techniques.</dd> - <dt><a href="/en-US/docs/mozIStorageStatementParams#Enumeration_of_properties" title="en-US/docs/mozIStorageStatementParams#Enumeration of properties">Properties on a statement can now be enumerated</a></dt> - <dd>You can now use a <code><a class="internal" href="/en-US/docs/JavaScript/Reference/Statements/for...in" title="en-US/docs/Core JavaScript 1.5 Reference/Statements/For...in">for..in</a></code> enumeration to enumerate all the properties on a statement.</dd> - <dt>mozIStorageStatement's getParameterIndex changed behavior between 3.5 and 3.6.</dt> - <dd>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=528166" title="mozIStorageStatement getParameterIndex causes NS_ERROR_ILLEGAL_VALUE">Bug 528166</a> for details.</dd> - <dt>Asynchronously bind multiple sets of parameters and execute a statement.</dt> - <dd>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=490085" title="FIXED: Add ability to bind multiple sets of parameters and execute asynchronously">Bug 490085</a> for details. Documentation coming soon.</dd> -</dl> - -<h3 id="Preferences">Preferences</h3> - -<ul> - <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIContentPrefService" title="">nsIContentPrefService</a></code> interface has two new methods: <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIContentPrefService#getPrefsByName()">nsIContentPrefService.getPrefsByName()</a></code> and <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIContentPrefService#removePrefsByName()">nsIContentPrefService.removePrefsByName()</a></code>.</li> -</ul> - -<h3 id="Themes">Themes</h3> - -<p>See <a class="internal" href="/en-US/docs/Updating_themes_for_Firefox_3.6" title="en-US/docs/Updating themes for Firefox 3.6">Updating themes for Firefox 3.6</a> for a list of changes related to themes.</p> - -<dl> - <dt><a href="/en-US/docs/Themes/Lightweight_themes" title="en-US/docs/Themes/Lightweight themes">Lightweight themes</a></dt> - <dd>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 <a class="external" href="http://www.getpersonas.com/" title="http://www.getpersonas.com/">Personas</a> theme architecture into Firefox.</dd> -</dl> - -<h3 id="Miscellaneous">Miscellaneous</h3> - -<ul> - <li>Firefox will no longer load third-party components installed in its internal components directory. This helps to ensure stability by preventing buggy third-party components from being executed. Developers that install components this way must <a href="/en-US/docs/Migrating_raw_components_to_add-ons" title="en-US/docs/Migrating raw components to add-ons">repackage their components as XPI packages</a> so they can be installed as standard add-ons.</li> - <li><code>contents.rdf</code> is no longer supported for registering chrome in extensions. You must now use the <a class="internal" href="/en-US/docs/Install_Manifests" title="en-US/docs/Install manifests"><code>chrome.manifest</code></a> file instead. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=492008" title="FIXED: Drop support for contents.rdf chrome registrations">Bug 492008</a>.</li> - <li>Added support for hiding the menu bar automatically. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=477256" title="FIXED: Implement menubar auto-hiding in toolkit">Bug 477256</a>.</li> - <li>Added support for the <code>container-live-role</code> attribute to objects. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=391829" title="FIXED: Add support for container-live-role to object attributes">Bug 391829</a>.</li> - <li>The <code>tabs-closebutton</code> binding has been removed. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=500971" title="FIXED: Remove obsolete tabs-closebutton binding">Bug 500971</a>.</li> - <li>Added support to <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISound" title="">nsISound</a></code> for playing sounds based on events that have occurred. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=502799" title="FIXED: add new nsISound method for the event sounds">Bug 502799</a>.</li> - <li>The syntax for the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsITreeView" title="">nsITreeView</a></code> methods <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsITreeView#canDrop()">nsITreeView.canDrop()</a></code> and <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsITreeView#drop()">nsITreeView.drop()</a></code> has changed to support the new drag & drop API introduced in Gecko 1.9. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=455590" title="FIXED: Allow new dnd api with tree views">Bug 455590</a>.</li> - <li>Added support to snap the mouse cursor to the default button of dialog or wizard on Windows, see <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=76053" title='FIXED: Windows mouse integration: "Snap to default button in dialog boxes"'>Bug 76053</a>. This is processed automatically by dialog and wizard element. But if a XUL application creates a window using the <code>window</code> element and it has a default button, it needs to call <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIDOMChromeWindow#notifyDefaultButtonLoaded()">nsIDOMChromeWindow.notifyDefaultButtonLoaded()</a></code> during the window's <code>onload</code> event handler.</li> - <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsILocalFileMac" title="">nsILocalFileMac</a></code> interface has had two methods removed: <code>setFileTypeAndCreatorFromMIMEType()</code> and <code>setFileTypeAndCreatorFromExtension()</code>.</li> - <li>The new <a class="internal" href="/en-US/docs/JavaScript_code_modules/NetUtil.jsm" title="en-US/docs/JavaScript code modules/NetUtil.jsm"><code>NetUtils.jsm</code></a> code module provides an easy-to-use method for asynchronously copying data from an input stream to an output stream.</li> - <li>The new <a class="internal" href="/en-US/docs/JavaScript_code_modules/openLocationLastURL.jsm" title="en-US/docs/JavaScript code modules/openLocationLastURL.jsm"><code>openLocationLastURL.jsm</code></a> code module makes it easy to read and change the value of the "Open Location" dialog box's remembered URL while properly taking private browsing mode into account.</li> - <li>On Windows, the <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIScreen" title="">nsIScreen</a></code> interface now reports 24 bit per pixel color depths when the graphics driver claims 32 bits, since 24 more accurately represents the actual number of color pixels in use.</li> - <li>Menu bars can now be hidden on Windows, using the new <code id="a-autohide"><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Attribute/autohide">autohide</a></code> attribute on the <code><a href="/de/docs/Mozilla/Tech/XUL/toolbar" title="toolbar">toolbar</a></code> XUL element.</li> - <li>The <span id="m-loadOneTab"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/loadOneTab">loadOneTab</a></code></span> and <span id="m-addTab"><code><a href="https://developer.mozilla.org/de/docs/Mozilla/Tech/XUL/Methoden/addTab">addTab</a></code></span> methods now accept a new <code>relatedToCurrent</code> parameter and, in addition, allow the parameters to be specified by name, since nearly all of the parameters are optional.</li> - <li>The "<a href="/en-US/docs/Install_Manifests#hidden" title="en-US/docs/Install Manifests#hidden">hidden</a>" property is no longer supported in install manifests; it's no longer possible to prevent the user from seeing add-ons in the add-on manager window.</li> - <li>The <code>@mozilla.org/webshell;1</code> component no longer exists; you need to use <code>@mozilla.org/docshell;1</code> instead.</li> - <li>You can now register with the update-timer category to schedule timer events without having to instantiate the object that the timer will eventually call into; it will instead be instantiated when it's needed. See <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIUpdateTimerManager#registerTimer()">nsIUpdateTimerManager.registerTimer()</a></code> for details.</li> - <li>The <a href="/en-US/docs/NPN_GetValue" title="en-US/docs/NPN GetValue"><code>NPN_GetValue()</code></a> function no longer provides access to XPCOM through the variable values <code>NPNVserviceManager</code>, <code>NPNVDOMelement</code>, and <code>NPNVDOMWindow</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li> - <li>Plugins are no longer scriptable through XPCOM (IDL) interfaces, <a href="/en-US/docs/Gecko_Plugin_API_Reference/Scripting_plugins" title="en-US/docs/Gecko Plugin API Reference:Scripting plugins">NPRuntime</a> is the API to use for making plugins scriptable, and <a href="/en-US/docs/NPP_GetValue" title="en-US/docs/NPP GetValue"><code>NPP_GetValue()</code></a> is no longer called to with the value <code>NPPVpluginScriptableInstance</code> or <code>NPPVpluginScriptableIID</code>. This is part of the work toward making plugins run in separate processes in a future version of Gecko.</li> -</ul> - -<h2 id="For_FirefoxGecko_developers">For Firefox/Gecko developers</h2> - -<p>Certain changes are only really interesting if you work on the internals of Firefox itself.</p> - -<h3 id="Interfaces_merged">Interfaces merged</h3> - -<p>The following interfaces have been combined together:</p> - -<ul> - <li><code>nsIPluginTagInfo2</code> has been merged into <code>nsIPluginTagInfo</code>.</li> - <li><code>nsIPluginInstanceInternal</code>, <code>nsIPPluginInstancePeer</code>, <code>nsIPluginInstancePeer1</code>, <code>nsIPluginInstancePeer2</code>, and <code>nsIPluginInstancePeer3</code> have all been merged into <code>nsIPluginInstance</code>.</li> - <li><code>nsIWindowlessPlugInstPeer</code> has been merged into <code>nsIPluginInstance</code>.</li> - <li><code>nsIPluginManager</code> and <code>nsIPluginManager2</code> have been merged into <code>nsIPluginHost</code>.</li> -</ul> - -<h3 id="Interfaces_removed">Interfaces removed</h3> - -<p>The following interfaces have been removed entirely because they were unused, unimplemented, or obsolete:</p> - -<ul> - <li><code>nsIFullScreen</code></li> - <li><code>nsIDOMSVGListener</code></li> - <li><code>nsIDOMSVGZoomListener</code></li> - <li><code>nsIInternetConfigService</code></li> - <li><code>nsIDKey</code></li> - <li><code>nsIEventHandler</code></li> - <li><code>nsIJRILiveConnectPIPeer</code></li> - <li><code>nsIJRILiveConnectPlugin</code></li> - <li><code>nsIScriptablePlugin</code></li> - <li><code>nsIClassicPluginFactory</code></li> - <li><code>nsIFileUtilities</code></li> -</ul> - -<h3 id="Interfaces_moved">Interfaces moved</h3> - -<p>The following interfaces have been relocated from their previous IDL files into new ones:</p> - -<ul> - <li><code>nsIDOMNSCSS2Properties</code> is now located in its own IDL file (<code>dom/interfaces/css/nsIDOMCSS2Properties.idl</code>).</li> - <li><code><a href="/de/docs/XPCOM_Interface_Referenz/nsIUpdateTimerManager" title="">nsIUpdateTimerManager</a></code> is now located in its own IDL file.</li> -</ul> - -<p>A large number of interfaces have been moved. See <a href="/en-US/docs/Interfaces_moved_in_Firefox_3.6" title="en-US/docs/Interfaces moved in Firefox 3.6">Interfaces moved in Firefox 3.6</a> for a complete list.</p> - -<h3 id="Other_interface_changes">Other interface changes</h3> - -<p>The following assorted changes have been made:</p> - -<ul> - <li>The <code>nsIPlugin</code> interface now inherits from <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code> instead of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIFactory" title="">nsIFactory</a></code>.</li> - <li>The <code>nsIPluginHost</code> interface now inherits from <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code> instead of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIFactory" title="">nsIFactory</a></code>.</li> - <li>The <code>nsIFrame</code> interface now inherits from <code>nsQueryFrame</code> instead of <code><a href="/de/docs/XPCOM_Interface_Referenz/nsISupports" title="">nsISupports</a></code>.</li> - <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIDeviceContext" title="">nsIDeviceContext</a></code> method <code>getPaletteInfo()</code> has been removed, as it was never implemented.</li> - <li>The <code><a href="/de/docs/XPCOM_Interface_Referenz/nsIScriptContext" title="">nsIScriptContext</a></code> method <code>reportPendingException()</code> has been removed, since it was no longer being used.</li> -</ul> - -<h3 id="Changes_in_accessibility_code">Changes in accessibility code</h3> - -<ul> - <li>The <span style="font-family: monospace;">EVENT</span><code>_REORDER</code> <a href="/en-US/docs/XPCOM_Interface_Reference/nsIAccessibleEvent" title="en-US/docs/XPCOM Interface Reference/nsIAccessibleEvent">accessibility event</a> is now sent when the children of frames and iframes change, as well as when the main document's children change. See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=420845" title="FIXED: Fire event_reorder on any embedded frames/iframes whos document has just loaded.">Bug 420845</a>.</li> - <li>The <code><a href="https://developer.mozilla.org/de/docs/XPCOM_Interface_Reference/nsIAccessibleTable#selectRow()">nsIAccessibleTable.selectRow()</a></code> now correctly removes any current selection before selecting the specified row.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<div><div class="multiColumnList"> -<ul> -<li><a href="/de/docs/Mozilla/Firefox/Releases/3.5">Firefox 3.5 for developers</a></li><li><a href="/de/docs/Mozilla/Firefox/Releases/3">Firefox 3 for developers</a></li><li><a href="/de/docs/Mozilla/Firefox/Releases/2">Firefox 2 for developers</a></li><li><a href="/de/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5 for developers</a></li></ul> -</div></div> 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 ---- -<div>{{FirefoxSidebar}}</div><p> </p> - -<p><a href="https://www.mozilla.org/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">To test the latest developer features of Firefox,<br> - install Firefox Developer Edition</a>Firefox 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.</p> - -<h2 id="Changes_for_Web_developers">Changes for Web developers</h2> - -<h3 id="Developer_Tools">Developer Tools</h3> - -<ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Browser_detection_using_the_user_agent">User-agent spoofing</a> from the <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode">Responsive mode</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Memory/Dominators_view#Retaining_Paths_panel">Retaining paths panel</a> in memory tool</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker">Service workers</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push API</a> debugging - <ul> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/about:debugging">about:debugging</a> dashboard for workers</li> - <li>Cached requests are now shown in <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> - <li>Support for <a href="https://developer.mozilla.org/en-US/docs/Web/API/Cache">cache storage</a> in <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></li> - </ul> - </li> - <li>Ability to filter <a href="https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> entries</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console</a> now detects incomplete input and switches multi-line mode</li> - <li>Updated breakpoint style in <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Debugger</a></li> - <li>Prevent panels from hiding automatically using the <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a>, to aid browser and add-on debugging</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Font inspector</a> has been disabled by default</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/3D_View">3D view</a> has been removed</li> - <li>Developer tools theme refresh</li> - <li>Disable the Font Panel ({{bug(1247723)}}).</li> -</ul> - -<h3 id="HTML">HTML</h3> - -<p><em>No change.</em></p> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Support for the {{cssxref("::backdrop")}} pseudo-element has been added ({{bug(1064843)}}).</li> - <li>The case-insensitive modifier <code>i</code> (like in <code>[foo=bar i]</code>) for <a href="/en-US/docs/Web/CSS/Attribute_selectors">attribute selectors</a> has been implemented ({{bug(888190)}}).</li> - <li>An experimental implementation of CSS Mask Image properties landed. For the moment, this will only be available on Nightly versions of Firefox.y: shorthand version of {{cssxref("mask")}}, as well as {{cssxref("mask-repeat")}}, {{cssxref("mask-position")}}, {{cssxref("mask-size")}} are now available ({{bug(686281)}}).</li> - <li>The {{cssxref("clip-path")}} property now experimentally supports <code>polygon()</code>, <code>ellipse()</code>, and <code>circle()</code> on HTML elements (does not support <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246762">inset()</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1246764">path()</a>), behind the pref <code>layout.css.clip-path-shapes.enabled</code> that defaults to <code>false</code> ({{bug(1075457)}}). Interpolation (and therefore animation) of these values is not yet supported.</li> - <li>Our still experimental grid implementation has been updated: - <ul> - <li>{{cssxref("align-content")}}: <code>normal</code> behaves now as <code>stretch</code> for grid containers ({{bug(1237754)}}).</li> - <li>The order of column/row values for {{cssxref('grid')}}, {{cssxref('grid-template')}}, and {{cssxref('grid-gap')}} properties has been swapped ({{bug(1251999)}}).</li> - </ul> - </li> - <li>The {{cssxref("@media/display-mode", "display-mode")}} media feature is now supported ({{bug("1104916")}}).</li> - <li>The value <code>true</code> of {{cssxref("text-align")}} and {{cssxref("text-align-last")}} has been renamed to <code>unsafe</code> ({{bug("1250342")}}).</li> -</ul> - -<h3 id="JavaScript">JavaScript</h3> - -<ul> - <li>The new ES2017 {{jsxref("Object.values()")}} and {{jsxref("Object.entries()")}} methods have been implemented ({{bug(1232639)}}).</li> - <li>The deprecated <a href="/en-US/docs/Archive/Web/Old_Proxy_API">old Proxy API</a> (<code>Proxy.create</code> and <code>Proxy.createFunction</code>) now presents a deprecation warning in the console and will be removed in a future version. Use the standard {{jsxref("Proxy")}} object instead ({{bug(892903)}}).</li> - <li>Support for the deprecated non-standard <code>flags</code> argument of <code>String.prototype.</code>{{jsxref("String.prototype.match", "match")}}/{{jsxref("String.prototype.search", "search")}}/{{jsxref("String.prototype.replace", "replace")}} has been dropped in non-release builds ({{bug(1245801)}}).</li> - <li>As per the new ES2016 specification, the {{jsxref("Proxy")}} <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/handler/enumerate">enumerate</a> trap for <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> statements has been removed ({{bug(1246318)}}).</li> - <li>The {{jsxref("Array.prototype.indexOf()")}} and {{jsxref("Array.prototype.lastIndexOf()")}} methods (and their {{jsxref("TypedArray")}} equivalents) have been updated to never return <code>-0</code> as per the ECMAScript specification ({{bug(1242043)}}).</li> -</ul> - -<h3 id="InterfacesAPIsDOM">Interfaces/APIs/DOM</h3> - -<h4 id="DOM_HTML_DOM">DOM & HTML DOM</h4> - -<ul> - <li>The property {{domxref("Document.scrollingElement")}} has been implemented behind the pref <code>dom.document.scrollingElement.enabled</code> that defaults to <code>false</code> ({{bug(1153322)}}).</li> -</ul> - -<h4 id="WebGL">WebGL</h4> - -<p><em>No change.</em></p> - -<h4 id="IndexedDB">IndexedDB</h4> - -<ul> - <li>The {{domxref("IDBKeyRange.includes()")}} method has been implemented ({{bug("1251498")}}).</li> -</ul> - -<h4 id="Service_Worker_and_related_APIs">Service Worker and related APIs</h4> - -<ul> - <li>The {{domxref("Request.Request()")}} constructor can now accept a referrer option in its init object ({{bug(1251448)}}).</li> - <li>The {{domxref("Request.referrerPolicy")}} property is now supported ({{bug(1251872)}}).</li> - <li> - <p><a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API">Push</a> have been disabled in the <a class="external external-icon" href="https://www.mozilla.org/en-US/firefox/organizations/">Firefox 45 Extended Support Release</a> (ESR) ({{bug(1232029)}}).</p> - </li> -</ul> - -<h4 id="WebRTC">WebRTC</h4> - -<ul> - <li>Support for the {{domxref("RTCIceServer")}} dictionary has been updated in keeping with revisions to the WebGL 1.0 specification by adding support for the {{domxref("RTCIceServer.credentialType", "credentialType")}} property. This property is a string which specifies whether the credential is a password or a token. Currently, Firefox only supports <code>"password"</code>.</li> -</ul> - -<h4 id="New_APIs">New APIs</h4> - -<p><em>No change.</em></p> - -<h4 id="Others">Others</h4> - -<ul> - <li>{{domxref("Cache.add()")}} and {{domxref("Cache.addAll()")}} now raises a <code>TypeError</code> exception if the response status is not in the <code>200</code> range ({{bug(1244764)}}).</li> - <li>The <a href="/en-US/docs/Mozilla/Firefox_OS/API/App_installation_and_management_APIs">App installation and management APIs</a> (<code>navigator.mozApps.*</code>) are no longer exposed to non-Firefox OS platforms ({{bug("1238576")}}).</li> - <li><a href="/en-US/docs/Web/API/Web_Crypto_API">Web Crypto API</a> methods can now use the RSA-PSS cryptographic algorithm ({{bug (1191936)}}).</li> - <li>The <a href="/en-US/docs/Web/API/Permissions_API">Permissions API</a> has had the {{domxref("Permissions.revoke()")}} method added ({{bug("1197461")}}).</li> - <li>The <a href="/en-US/docs/Web/API/Browser_API">Browser API</a>, which extends the functionality of {{htmlelement("iframe")}}s to allow the creation of frames for displaying web content using HTML — and was previously only available in Firefox OS — is now available to desktop chrome code too ({{bug(1238160)}}).</li> - <li>The <a href="/en-US/docs/Web/API/notification">Notification API</a>'s {{domxref("Notification.requestPermission()","requestPermission()")}} method has been updated from a callback to a promised-based syntax ({{bug(1241278)}}).</li> - <li>The <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a> has been updated to the latest spec and unprefixed. Some methods have been renamed or have seen their capitalisation changed ({{bug(743198)}}). Note that this is not yet activated by default by behind the <code>full-screen-api.unprefix.enabled</code> preference ({{bug(1268749)}}).</li> -</ul> - -<h3 id="AudioVideo">Audio/Video</h3> - -<ul> - <li>Now WAV file with u-law compression encoding can be played({{bug(851530)}}).</li> - <li><a href="https://www.widevine.com/">Widevine</a> Content Decryption Module provided by Google Inc. is available via the <a href="/en-US/docs/Web/API/Encrypted_Media_Extensions_API">Encrypted Media Extensions API</a> for use with MP4 (only; see {{bug(1257716)}} for EME-with-WebM support) on Windows Vista and later and on Mac OS X enabling migration off Silverlight ({{bug(1265270)}}).</li> -</ul> - -<h2 id="HTTP">HTTP</h2> - -<p><em>No change.</em></p> - -<h2 id="Networking">Networking</h2> - -<p><em>No change.</em></p> - -<h2 id="Security">Security</h2> - -<ul> - <li>URL with the <code>view-source:</code> protocol don't open the <a href="/en-US/docs/Tools/View_source">View Source</a> tool anymore when used from a Web page ({{bug(1172165)}}).</li> - <li>The Firefox <a href="https://blog.mozilla.org/futurereleases/2013/09/24/plugin-activation-in-firefox/">click-to-activate plugin whitelist</a> has been removed: only Flash doesn't need to be clicked to be activated ({{bug(1263630)}}).</li> -</ul> - -<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> - -<h3 id="Interfaces">Interfaces</h3> - -<ul> - <li>The CSS tokenizer is now available in JavaScript for add-ons ({{bug(1152033)}}).</li> -</ul> - -<h3 id="FUEL">FUEL</h3> - -<p>The <a href="/en-US/docs/Mozilla/Tech/Toolkit_API/FUEL">FUEL</a> JavaScript library, introduced back in Firefox 3, <strong>has been removed</strong>. This library was designed to aid in add-on development and with the introduction of the <a href="/en-US/docs/Mozilla/Add-ons/SDK">Add-on SDK</a> and, now, by <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a> support, is no longer useful. ({{bug(1090880)}})</p> - -<h3 id="XUL">XUL</h3> - -<p><em>No change.</em></p> - -<h3 id="JavaScript_code_modules">JavaScript code modules</h3> - -<p><em>No change.</em></p> - -<h3 id="XPCOM">XPCOM</h3> - -<p><em>No change.</em></p> - -<h3 id="Other">Other</h3> - -<p><em>No change.</em></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/en-US/versions/47">Site Compatibility for Firefox 47</a></li> -</ul> - -<h2 id="Older_versions">Older versions</h2> - -<p>{{Firefox_for_developers(46)}}</p> 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 ---- -<div>{{FirefoxSidebar}}</div><div>{{draft}}</div> - -<p class="summary">This article provides information about the changes in Firefox 60 that will affect developers. Firefox 60 is the current <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#nightly">Nightly version of Firefox</a>, and will ship on <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates">May 8, 2018</a>.</p> - -<h2 id="Stylo_comes_to_Firefox_for_Android_in_60">Stylo comes to Firefox for Android in 60</h2> - -<p><a href="https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/">Firefox's new parallel CSS engine</a> — also known as <strong>Quantum CSS</strong> or <strong>Stylo</strong>, which was <a href="/en-US/Firefox/Releases/57#Firefox_57_Firefox_Quantum">first enabled by default in Firefox 57 for desktop</a>, has now been enabled in Firefox for Android.</p> - -<h2 id="Changes_for_web_developers">Changes for web developers</h2> - -<h3 id="Developer_tools">Developer tools</h3> - -<ul> - <li>In the CSS Pane rules view (see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>), the keyboard shortcuts for precise value increments (increase/decrease by 0.1) have changed from <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> to <kbd>Ctrl</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> on Linux and Windows, to avoid clashes with default OS-level shortcuts (see {{bug("1413314")}}).</li> - <li>Also in the CSS Pane rules view, <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables">CSS variable names</a> will now auto-complete ({{bug(1422635)}}). If you enter <code>var(</code> into a property value and then type a dash (<code>-</code>), any variables you have declared in your CSS will then appear in an autocomplete list.</li> -</ul> - -<h3 id="HTML">HTML</h3> - -<p>Pressing the Enter key in <code>designMode</code> and <code>contenteditable</code> now inserts <code><div></code> 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 <code><br></code> elements like it used to. If you want to use the old behavior on your app, you can do it with <code>document.execCommand()</code>. See <a href="/en-US/docs/Web/Guide/HTML/Editable_content#Differences_in_markup_generation">Differences in markup generation</a> for more details.</p> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>The {{cssxref("align-content")}}, {{cssxref("align-items")}}, {{cssxref("align-self")}}, {{cssxref("justify-content")}}, and {{cssxref("place-content")}} property values have been updated as per the latest <a href="https://drafts.csswg.org/css-align-3/">CSS Box Alignment Module Level 3</a> spec ({{bug(1430817)}}).</li> - <li>The {{cssxref("paint-order")}} property has been implemented ({{bug(1426146)}}).</li> -</ul> - -<h3 id="SVG">SVG</h3> - -<p><em>No changes.</em></p> - -<h3 id="JavaScript">JavaScript</h3> - -<p>The {{jsxref("Array.prototype.values()")}} method has been added again ({{bug(1420101)}}). It was disabled due to <a href="https://www.fxsitecompat.com/en-CA/docs/2016/array-prototype-values-breaks-some-legacy-apps/">compatibilty issues</a> in earlier versions. Make sure your code doesn't have any custom implementation of this method.</p> - -<h3 id="APIs">APIs</h3> - -<h4 id="New_APIs">New APIs</h4> - -<p><em>No changes.</em></p> - -<h4 id="DOM">DOM</h4> - -<ul> - <li>In the <a href="/en-US/docs/Web/API/Web_Authentication_API">Web Authentication API</a>, the <code>MakePublicKeyCredentialOptions</code> dictionary object has been renamed {{domxref("PublicKeyCredentialCreationOptions")}}; this change has been made in Firefox ({{bug(1436473)}}).</li> - <li>The <code>dom.workers.enabled</code> pref has been removed, meaning workers can no longer be disabled ({{bug(1434934)}}).</li> - <li>The {{domxref("Document.body","body")}} property is now implemented on the {{domxref("Document")}} interface, rather than the {{domxref("HTMLDocument")}} interface ({{bug(1276438)}}).</li> - <li>{{domxref("PerformanceResourceTiming")}} is now available in workers ({{bug(1425458)}}).</li> - <li>The {{domxref("PerformanceObserver.takeRecords()")}} method has been implemented ({{bug(1436692)}}).</li> - <li>The {{domxref("KeyboardEvent.keyCode")}} attribute of punctuation key becomes non-zero even if active keyboard layout doesn't produce ASCII character. See <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#keyCode_of_punctuation_keys_on_some_keyboard_layout">the detail</a>. Note that please do <strong>not</strong> use <code>KeyboardEvent.keyCode</code> in new applications. Please consider to use {{domxref("KeyboardEvent.key")}} or {{domxref("KeyboardEvent.code")}} instead.</li> - <li>The {{domxref("Animation.updatePlaybackRate()")}} method has been implemented ({{bug("1436659")}}).</li> - <li>New rules have been included for determining <a href="/en-US/docs/Web/API/KeyboardEvent/keyCode#keyCode_of_punctuation_keys_on_some_keyboard_layout">keyCode values of punctuation keys</a> ({{bug(1036008)}}).</li> -</ul> - -<h4 id="DOM_events">DOM events</h4> - -<p><em>No changes.</em></p> - -<h4 id="Service_workers">Service workers</h4> - -<p><em>No changes.</em></p> - -<h4 id="Media_and_WebRTC">Media and WebRTC</h4> - -<ul> - <li>When recording or sharing media obtained using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}, muting the camera by setting the corresponding track's {{domxref("MediaStreamTrack.enabled")}} property to <code>false</code> now turns off the camera's "in use" indicator light, to help the user more easily see that the camera is not in use ({{bug(1299515)}}).</li> - <li>Removing a track from an {{domxref("RTCPeerConnection")}} using {{domxref("RTCPeerConnection.removeTrack", "removeTrack()")}} no longer removes the track's {{domxref("RTCRtpSender")}} from the peer connection's list of senders as reported by {{domxref("RTCPeerConnection.getSenders", "getSenders()")}} ({{bug(1290949)}}).</li> - <li>The {{domxref("RTCRtpContributingSource")}} and {{domxref("RTCRtpSynchronizationSource")}} objects' timestamps were previously being reported based on values returned by {{jsxref("Date.getTime()")}}. In Firefox 60, these have been fixed to correctly use the <a href="/en-US/docs/Web/API/Performance_API">Performance Timing API</a> instead ({{bug(1433576)}}).</li> -</ul> - -<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4> - -<p><em>No changes.</em></p> - -<h3 id="CSSOM">CSSOM</h3> - -<p><em>No changes.</em></p> - -<h3 id="HTTP">HTTP</h3> - -<p><em>No changes.</em></p> - -<h3 id="Security">Security</h3> - -<p><em>No changes.</em></p> - -<h3 id="Plugins">Plugins</h3> - -<p><em>No changes.</em></p> - -<h3 id="Other">Other</h3> - -<p><em>No changes.</em></p> - -<h2 id="Removals_from_the_web_platform">Removals from the web platform</h2> - -<h3 id="HTML_2">HTML</h3> - -<p><em>No changes.</em></p> - -<h3 id="CSS_2">CSS</h3> - -<ul> - <li>The proprietary {{cssxref("-moz-user-input")}} property's <code>enabled</code> and <code>disabled</code> values are no longer available ({{bug("1405087")}}).</li> - <li>The proprietary {{cssxref("-moz-border-top-colors")}}, {{cssxref("-moz-border-right-colors")}}, {{cssxref("-moz-border-bottom-colors")}}, and {{cssxref("-moz-border-left-colors")}} properties have been removed from the platform completely ({{bug(1429723)}}).</li> -</ul> - -<h3 id="JavaScript_2">JavaScript</h3> - -<p>The non-standard <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Expression_closures">expression closure</a> syntax has been removed ({{bug(1426519)}}).</p> - -<h3 id="APIs_2">APIs</h3> - -<p><em>No changes.</em></p> - -<h3 id="SVG_2">SVG</h3> - -<p><em>No changes.</em></p> - -<h3 id="Other_2">Other</h3> - -<p><em>No changes.</em></p> - -<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> - -<h3 id="WebExtensions">WebExtensions</h3> - -<p><em>No changes.</em></p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>Site compatibility for Firefox 60</li> -</ul> - -<h2 id="Older_versions">Older versions</h2> - -<p>{{Firefox_for_developers(58)}}</p> - -<p> </p> 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 ---- -<p>{{FirefoxSidebar}}{{Draft}}</p> - -<p class="summary">This article provides information about the changes in Firefox 68 that will affect developers. Firefox 68 is the current <a href="https://www.mozilla.org/en-US/firefox/channel/desktop/#beta" rel="noopener">Beta version of Firefox</a>, and will ship on <a href="https://wiki.mozilla.org/RapidRelease/Calendar#Future_branch_dates" rel="noopener">July 9, 2019</a>.</p> - -<h2 id="Changes_for_web_developers">Changes for web developers</h2> - -<h3 id="Developer_tools">Developer tools</h3> - -<ul> - <li>Die Einstellung, die die Sichtbarkeit interner Erweiterungen (System-Add-Ons und versteckte Erweiterungen) auf der <a href="/en-US/docs/Tools/about:debugging">about:debugging</a>-Seite kontrolliert, wurde von <code>devtools.aboutdebugging.showSystemAddons</code> zu <code>devtools.aboutdebugging.showHiddenAddons</code> geändert ({{bug(1544372)}}).</li> - <li>Die Konsole zeigt jetzt <a href="/en-US/docs/Tools/Web_Console/Console_messages#CSS">mehr Informationen über CSS-Warnungen</a> inklusive einer Liste der Knoten der DOM-Elemente, die die Regel genutzt haben ({{bug(1093953)}}).</li> - <li>Über die <a href="/en-US/docs/Tools/Network_Monitor/request_list#Filtering_requests">Anfragen-Liste</a> der Netzwerkanalyse kann jetzt eine spezifische URL geblockt werden ({{bug(1151368)}}).</li> - <li>Es ist jetzt möglich, eine Netzwerkanfrage erneut zu senden, ohne das Verfahren, die URL, die Parameter oder die Überschrift ändern zu müssen, indem der <a href="/en-US/docs/Tools/Network_Monitor/request_list#Context_menu">Resend</a>-Befehl im Kontextmenü ausgeführt wird ({{bug(1422014)}}).</li> - <li>Es ist jetzt möglich, die <a href="/en-US/docs/Tools/Network_Monitor/request_list#Network_request_columns">Breite der Spalten</a> in der Netzwerkanalyse zu ändern, um dem Arbeitsalauf gerecht zu werden. ({{bug(1358414)}}).</li> - <li>The context menu of the <a href="/en-US/docs/Tools/Network_Monitor/request_details#Headers">Headers</a> tab now allows you to copy all or some of the header information to the clipboard in JSON format ({{bug(1442249)}}).</li> - <li>A button has been added to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">rules panel</a> of the Page Inspector that allows you to toggle display of any print media queries ({{bug(1534984)}}).</li> - <li>An icon will be displayed next to invalid or unsupported <a href="/en-US/docs/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">CSS rules</a> in the Rules pane of the Page Inspector ({{bug(1306054)}}).</li> -</ul> - -<h4 id="Removals">Removals</h4> - -<h3 id="HTML">HTML</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_2"> Removals</h4> - -<h3 id="CSS">CSS</h3> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Scroll_Snap">CSS Scroll Snapping</a> has been updated to the latest version of the specification ({{bug(1312163)}}) and ({{bug(1544136)}}), this includes: - - <ul> - <li>The scroll-padding properties ({{bug(1373832)}})</li> - <li>The scroll-margin properties ({{bug(1373833)}})</li> - <li>{{CSSxRef("scroll-snap-align")}} ({{bug(1373835)}})</li> - </ul> - </li> - <li>The {{CSSxRef("-webkit-line-clamp")}} property has been implemented for compatibility with other browsers ({{bug(866102)}}).</li> - <li>Support {{CSSxRef("::marker")}} pseudo-element ({{bug(205202)}}) and animation for ::marker pseudos ({{bug(1538618)}})</li> - <li>Change {{CSSxRef("currentColor")}} to be a computed value (except for color property) ({{bug(760345)}}).</li> - <li>Fix support for the 'ch' length unit to match spec (fallback for no '0' glyph, vertical metrics) ({{bug(282126)}})</li> - <li>The {{CSSxRef("counter-set")}} property has been implemented. ({{bug(1518201)}})</li> - <li>Implement list numbering using a built-in 'list-item' counter - fixes list numbering bugs ({{bug(288704)}})</li> - <li>CSS Transforms are now supported in indirectly rendered things e.g.) {{SVGElement("mask")}}, {{SVGElement("marker")}}, {{SVGElement("pattern")}}, {{SVGElement("clipPath")}} ({{bug(1323962)}}).</li> -</ul> - -<h4 id="Removals_3">Removals</h4> - -<ul> - <li>{{CSSxRef("scroll-snap-coordinate")}}, {{CSSxRef("scroll-snap-destination")}}, {{CSSxRef("scroll-snap-type-x")}} and {{CSSxRef("scroll-snap-type-y")}} have been removed.</li> - <li>The {{CSSxRef("scroll-snap-type")}} property has become a longhand, so the old shorthand syntax like <code>scroll-snap-type:mandatory</code> will stop working. See the <a href="https://www.fxsitecompat.com/en-CA/docs/2019/legacy-css-scroll-snap-syntax-support-has-been-dropped/">Firefox Site Compatability</a> note.</li> -</ul> - -<h3 id="SVG">SVG</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_4">Removals</h4> - -<h3 id="JavaScript">JavaScript</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_5">Removals</h4> - -<h3 id="APIs">APIs</h3> - -<p><em>No changes.</em></p> - -<h4 id="New_APIs">New APIs</h4> - -<ul> - <li>Implement Resize Observer API ({{bug(1272409)}}).</li> -</ul> - -<h4 id="DOM">DOM</h4> - -<ul> - <li>The <a href="/en-US/docs/Web/API/Visual_Viewport_API">Visual Viewport API</a> has now been enabled by default on Android ({{bug(1512813)}}). Adding this API to desktop versions of Firefox is being tracked in {{bug(1551302)}}.</li> - <li>The {{domxref("HTMLImageElement.decode", "decode()")}} element on images is now implemented. this can be used to trigger loading and decoding of an image prior to adding it to the DOM ({{bug(1501794)}}).</li> - <li>The <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> now requires that the user interact with the page before it can request permission to send notifications ({{bug(1524619)}}).</li> - <li>{{domxref("XMLHttpRequest")}} has been updated to no longer accept the non-standard <code>moz-chunked-arraybuffer</code> value for {{domxref("XMLHttpRequest.responseType", "responseType")}}. Code still using it should be updated to <a href="/en-US/docs/Web/API/Streams_API/Using_readable_streams#Consuming_a_fetch_as_a_stream">use the Fetch API as a stream</a> ({{bug(1120171)}}).</li> - <li><code>XMLHttpRequest</code> now outputs a warning to console if you perform a synchronous request while handling an {{domxref("Window.unload_event", "unload")}}, {{domxref("Window.beforeunload_event", "beforeunload")}}, or {{domxref("Window.pagehide_event", "pagehide")}} event ({{bug(980902)}}).</li> - <li>The {{domxref("Document.cookie", "cookie")}} property has moved from the {{domxref("HTMLDocument")}} interface to the {{domxref("Document")}} interface, allowing documents other than {{Glossary("HTML")}} to use cookies ({{bug(144795)}}).</li> -</ul> - -<h4 id="DOM_events">DOM events</h4> - -<h4 id="Service_workers">Service workers</h4> - -<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> - -<ul> - <li>WebRTC has been updated to recognize that a <code>null</code> candidate passed into the {{domxref("RTCPeerConnection.icecandidate", "icecandidate")}} event handler, indicating the receipt of a candidate, instead indicates that there are no further candidates coming; when this happens the ICE gathering ({{domxref("RTCPeerConnection.iceGatheringState", "iceGatheringState")}}) state reaches <code>complete</code> ({{bug(1318167)}}).</li> - <li>The {{domxref("RTCRtpReceiver")}} methods {{domxref("RTCRtpReceiver.getContributingSources", "getContributingSources()")}} and {{domxref("RTCRtpReceiver.getSynchronizationSources", "getSynchronizationSources()")}} now support video tracks; previously they only worked on audio ({{bug(1534466)}}).</li> - <li> - <p>{{domxref("MediaDevices.getUserMedia", "getUserMedia()")}} may no longer be used from a non-secure context; attempting to do so now throws a <code>NotAllowedError</code> result. Secure contexts are those loaded using HTTPS, those located using the <code>file:///</code> scheme, and those loaded from <code>localhost</code>. For now, if you must, you can re-enable the ability to perform insecure calls to <code>getUserMedia()</code> by setting the preference <code>media.getusermedia.insecure.enabled</code> to <code>true</code> ({{bug(1335740)}}).</p> - - <div class="blockIndicator note"> - <p><strong>Note:</strong> In the future, Firefox will also remove the {{domxref("navigator.mediaDevices")}} property on insecure contexts, preventing all access to the {{domxref("MediaDevices")}} APIs; see {{bug()}} for the status of this work. <strong>This is already the case in Nightly builds.</strong></p> - </div> - </li> -</ul> - -<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4> - -<h4 id="Removals_6">Removals</h4> - -<ul> - <li>Removed the non-standard {{DOMxRef("XMLDocument.load()")}} method ({{bug(332175)}}).</li> - <li>Removed the non-standard {{DOMxRef("XMLDocument.async")}} property ({{bug(1328138)}}).</li> -</ul> - -<h3 id="Security">Security</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_7">Removals</h4> - -<h3 id="Plugins">Plugins</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_8">Removals</h4> - -<h3 id="Other">Other</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_9">Removals</h4> - -<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> - -<h3 id="API_changes">API changes</h3> - -<ul> - <li>The The proxy.register() and proxy.unregister() functions have been deprecated and will be removed from Firefox 71 ({{bug(1545811)}}).</li> -</ul> - -<h4 id="Removals_10">Removals</h4> - -<h3 id="Manifest_changes">Manifest changes</h3> - -<p><em>No changes.</em></p> - -<h4 id="Removals_11">Removals</h4> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/en-CA/versions/68/">Site compatibility for Firefox 68</a></li> -</ul> - -<h2 id="Older_versions">Older versions</h2> - -<p>{{Firefox_for_developers(67)}}</p> 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' ---- -<p>{{ToolsSidebar}}</p> - -<p>The <code>about:debugging</code> 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.</p> - -<h2 id="Opening_the_aboutdebugging_page">Opening the about:debugging page</h2> - -<p>There are two ways to open <code>about:debugging</code>:</p> - -<ul> - <li>Type <code>about:debugging</code> in the Firefox URL bar.</li> - <li>In the <strong>Tools</strong> > <strong>Web Developer</strong> menu, click <strong>Remote Debugging</strong>.</li> -</ul> - -<p>When about:debugging opens, on the left-hand side, you'll see a sidebar with two options and information about your remote debugging setup:</p> - -<dl> - <dt>Setup</dt> - <dd>Use the Setup tab to configure the connection to your remote device.</dd> - <dt>This Firefox</dt> - <dd>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.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p> - -<p>If your <code>about:debugging</code> page is different from the one displayed here, go to <code>about:config</code>, find and set the option <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> - -<h2 id="Setup_tab">Setup tab</h2> - -<h3 id="Connecting_to_a_remote_device">Connecting to a remote device</h3> - -<p>Firefox supports debugging over USB with Android devices, using the about:debugging page.</p> - -<p>Before you connect:</p> - -<ol> - <li>Enable Developer settings on your Android device.</li> - <li>Enable USB debugging in the Android Developer settings.</li> - <li>Enable <strong>Remote Debugging via USB</strong> in the Advanced Settings in Firefox on the Android device.</li> - <li>Connect the Android device to your computer using a USB cable.</li> -</ol> - -<p>If your device doesn't appear in the lefthand side of the about:debugging page, try clicking the <strong>Refresh devices</strong> button.</p> - -<p><strong>If it still doesn't appear</strong>, it may be because the link between your Android device and your computer is not authorized yet. First make sure you have installed <a href="https://developer.android.com/studio/command-line/adb.html">Android Debug Bridge</a> 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 <strong>Refresh devices</strong> button again. The device should appear.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You do not need to install the full Android Studio SDK. Only adb is needed.</p> -</div> - -<p>To start a debugging session, first open the page that you wish to debug and then click <strong>Connect</strong> 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.</p> - -<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>The information on this page is the same as the information on the <strong>This Firefox</strong> tab, but instead of displaying information for your computer, it displays the information for the remote device with the addition of a <strong>Tabs</strong> section with an entry for each of the tabs open on the remote device.</p> - -<p>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:</p> - -<p><img alt="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." src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p> - -<p>In Firefox 76 and above, the message can look like the following:</p> - -<p><img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png" style="height: 64px; width: 675px;"></p> - -<p>See <a href="#">Connection for Firefox for Android 68</a> for more information.</p> - -<p>In the image above, there are three tabs open: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, and <strong>About Nightly</strong>. To debug the contents of one of these tabs, click the <strong>Inspect</strong> button next to its title. When you do, the Developer Tools open in a new tab.</p> - -<p><img alt="Screenshot showing the remote debugging window, with the editable URL bar" src="https://mdn.mozillademos.org/files/17317/remote-debugger-w-URL-buttons.png" style="border: 1px solid black; display: block; height: 471px; margin: 0px auto; width: 1014px;"></p> - -<p>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.</p> - -<p>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 <strong>Reload</strong> button next to the URL bar, and (starting 79), navigate backward or forward in the browsing history with the <strong>Back</strong> and <strong>Forward</strong> buttons.</p> - -<h3 id="Connecting_over_the_Network">Connecting over the Network</h3> - -<p>You can connect to a Firefox Debug server on your network, or on your debugging machine using the <strong>Network Location</strong> settings of the about:debugging page.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p> - -<p>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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p> - -<h2 id="This_Firefox">This Firefox</h2> - -<p>The <strong>This Firefox</strong> tab combines the features of Extensions, Tabs, and Workers into a single tab with the following sections:</p> - -<dl> - <dt>Temporary Extensions</dt> - <dd>Displays a list of the extensions that you have loaded using the <strong>Load Temporary Add-on</strong> button.</dd> - <dt>Extensions</dt> - <dd>This section lists information about the extensions that you have installed on your system.</dd> - <dt>Service Workers, Shared Workers, and Other Workers</dt> - <dd>There are three sections on this page that deal with Service Workers, Shared Workers, and Other Workers.</dd> -</dl> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p> - -<p>Whether internal extensions appear in the list on this page depends on the setting of the <code>devtools.aboutdebugging.showHiddenAddons</code> preference. If you need to see these extensions, navigate to <code>about:config</code> and make sure that the preference is set to <code>true</code>.</p> - -<h2 id="Extensions">Extensions</h2> - -<h3 id="Loading_a_temporary_extension">Loading a temporary extension</h3> - -<p>With the <strong>Load Temporary Add-on</strong> 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 <strong>Temporary Extensions</strong> header.</p> - -<p>You don't have to package or sign the extension before loading it, and it stays installed until you restart Firefox.</p> - -<p>The major advantages of this method, compared with installing an add-on from an XPI, are:</p> - -<ul> - <li>You don't have to rebuild an XPI and reinstall when you change the add-on's code;</li> - <li>You can load an add-on without signing it and without needing to disable signing.</li> -</ul> - -<p>Once you have loaded a temporary extension, you can see information about it and perform operations on it.</p> - -<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p> - -<p>You can use the following buttons:</p> - -<dl> - <dt>Inspect</dt> - <dd>Loads the extension in the debugger.</dd> - <dt>Reload</dt> - <dd>Reloads the temporary extension. This is handy when you have made changes to the extension.</dd> - <dt>Remove</dt> - <dd>Unloads the temporary extension.</dd> -</dl> - -<p>Other information about the extension is displayed:</p> - -<dl> - <dt>Location</dt> - <dd>The location of the extension's source code on your local system.</dd> - <dt>Extension ID</dt> - <dd>The temporary ID assigned to the extension.</dd> - <dt>Internal UUID</dt> - <dd>The internal UUID assigned to the extension.</dd> - <dt>Manifest URL</dt> - <dd>If you click the link, the manifest for this extension is loaded in a new tab.</dd> -</dl> - -<h3 id="Updating_a_temporary_extension">Updating a temporary extension</h3> - -<p>If you install an extension in this way, what happens when you update the extension?</p> - -<ul> - <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> - <li>For other changes, click the <strong>Reload</strong> button. This does what it says: - <ul> - <li>Reloads any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> - <li>Parses the <code>manifest.json</code> file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys take effect</li> - </ul> - </li> -</ul> - -<h3 id="Installed_Extensions">Installed Extensions</h3> - -<p>The permanently installed extensions are listed in the next section, <strong>Extensions</strong>. For each one, you see something like the following:</p> - -<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p> - -<p>The <strong>Inspect</strong> button, and the <strong>Extension ID</strong> and <strong>Internal UUID</strong> fields are the same as for temporary extensions.</p> - -<p>Just as it does with temporarily loaded extensions, the link next to <strong>Manifest URL</strong> opens the loaded manifest in a new tab.</p> - -<div class="note"> -<p><strong>Note: </strong>It's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> -</div> - -<p>The Add-ons section in about:debugging lists all web extensions that are currently installed. Next to each entry is a button labeled <strong>Inspect</strong>.</p> - -<div class="blockIndicator note"> -<p><strong>Note: </strong>This list may include add-ons that came preinstalled with Firefox.</p> -</div> - -<p>If you click <strong>Inspect</strong>, the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a new tab.</p> - -<p>{{EmbedYouTube("efCpDNuNg_c")}}</p> - -<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> - -<h2 id="Workers">Workers</h2> - -<p>The Workers section shows all the workers you've got registered on your Firefox, categorised as follows:</p> - -<ul> - <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> - <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> - <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> -</ul> - -<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p> - -<h3 id="Service_worker_state">Service worker state</h3> - -<p>The list of service workers shows the state of the service worker in its <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">lifecycle</a>. Three states are possible:</p> - -<ul> - <li><em>Registering</em>: this covers all states between the service worker's initial registration, and its assuming control of pages. That is, it subsumes the <em>installing</em>, <em>activating</em>, and <em>waiting</em> states.</li> - <li><em>Running</em>: the service worker is currently running. It's installed and activated, and is currently handling events.</li> - <li><em>Stopped</em>: the service worker is installed and activated, but has been terminated after being idle.</li> -</ul> - -<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p> - -<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: From Firefox 79 onwards, you can access similar information on the Service Workers registered on a particular domain by going to the Firefox DevTools <a href="/en-US/docs/Tools/Application">Application panel</a>.</p> -</div> - -<h3 id="Unregistering_service_workers">Unregistering service workers</h3> - -<p>Click the <strong>Unregister</strong> button to unregister the service worker.</p> - -<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> - -<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Click the <strong>Push</strong> button to send a push event to the service worker.</p> - -<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> - -<div> -<p>A warning message is displayed at the top of the <strong>This Firefox</strong> tab if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p> -</div> - -<p>Service workers can be unavailable if the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</p> - -<h2 id="Connection_to_Firefox_for_Android_68">Connection to Firefox for Android 68</h2> - -<p>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:</p> - -<ul> - <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox Preview</a>, if your desktop Firefox is the main release or Developer Edition</li> - <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox for Android Nightly</a></li> -</ul> - -<p>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 <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">Firefox Extended Support Release (ESR)</a>, which is also based on version 68.</p> - -<p>Note that <code>about:debugging</code> is not enabled by default in Firefox ESR. To enable it, open the <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Configuration Editor</a> (<code>about:config</code>) and set <code>devtools.aboutdebugging.new-enabled</code> to <strong>true</strong>.</p> - -<p>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 <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">What happens to my profile if I downgrade to a previous version of Firefox?</a></p> 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 ---- -<div>{{ToolsSidebar}}</div><p>The Browser Console is like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>, but applied to the whole browser rather than a single content tab.</p> - -<p>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.</p> - -<p>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 <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p> - -<p>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).</p> - -<p>From Firefox 27 onwards, you can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p> - -<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> - -<p>The Browser Console looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p> - -<ul> - <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a></li> - <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear</li> - <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li> -</ul> - -<h2 id="Browser_Console_logging">Browser Console logging</h2> - -<p>The Browser console logs the same sorts of messages as the Web Console:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li> - <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li> - <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li> -</ul> - -<p>However, it displays such messages from:</p> - -<ul> - <li>web content hosted by all browser tabs</li> - <li>the browser's own code</li> - <li>add-ons.</li> -</ul> - -<h3 id="Messages_from_add-ons">Messages from add-ons</h3> - -<p>The Browser Console displays messages logged by all Firefox add-ons.</p> - -<h4 id="Console.jsm">Console.jsm</h4> - -<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p> - -<p>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.</p> - -<pre class="brush: js">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 - -<code>console.log("Hello from Firefox code"); //output messages to the console</code></pre> - -<p> </p> - -<p>The full module with other functionality is found here on <a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Mozilla Cross-Reference</a>.</p> - -<p>For more methods of the console exported attribute of the Console.jsm see this article: <a href="/en-US/docs/Web/API/console?redirectlocale=en-US&redirectslug=DOM%2Fconsole">Console</a></p> - -<h4 id="HUDService">HUDService</h4> - -<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</a>. We see we can not only access the Browser Console but also Web Console.</p> - -<p>Here is an example on how to clear the contents of the Browser console:</p> - -<pre class="brush: js">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);</pre> - -<p>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:</p> - -<pre class="brush: js">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);</pre> - -<h4 id="Bonus_Features_Available">Bonus Features Available</h4> - -<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> 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:</p> - -<pre class="brush: js">widget = require("sdk/widget").Widget({ - id: "an-error-happened", - label: "Error!", - width: 40, - content: "Error!", - onClick: logError -}); - -function logError() { - console.error("something went wrong!"); -}</pre> - -<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, 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:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>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 <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p> - -<h2 id="Browser_Console_command_line">Browser Console command line</h2> - -<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p> - -<p>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 <code>window</code>:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>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.</p> - -<h3 id="Controlling_the_browser">Controlling the browser</h3> - -<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> 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):</p> - -<pre class="brush: js">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/";</pre> - -<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p> - -<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3> - -<p>Since the global <code>window</code> 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:</p> - -<pre class="brush: js">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);</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On OS X, this similar code will add a new item to the "Tools" menu:</p> - -<pre class="brush: js">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);</pre> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> 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 ---- -<div>{{ToolsSidebar}}</div> - -<p>The JavaScript sources executed by the browser are often transformed in some way from the original sources created by a developer. For example:</p> - -<ul> - <li>sources are often combined and <a href="https://en.wikipedia.org/wiki/Minification_(programming)">minified</a> to make delivering them from the server more efficient.</li> - <li>JavaScript running in a page is often machine-generated, as when compiled from a language like <a href="http://coffeescript.org/">CoffeeScript</a> or <a href="http://www.typescriptlang.org/">TypeScript</a>.</li> -</ul> - -<p>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 <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source map</a> 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.</p> - -<p>To enable the debugger to work with a source map, you must:</p> - -<ul> - <li>generate the source map</li> - <li>include a comment in the transformed file, that points to the source map. The comment's syntax is like this:</li> -</ul> - -<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre> - -<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> - -<p>In the video above we load <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. 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:</p> - -<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre> - -<p>In the Debugger's <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">source list pane</a>, the original CoffeeScript source now appears as "main.coffee", and we can debug it just like any other source.</p> 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 ---- -<div>{{ToolsSidebar}}</div> - -<div> 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.{</div> - -<div>{ToolsSidebar}}</div> - -<p class="summary">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.</p> - -<div class="note"> -<p><strong>Note:</strong> 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).</p> -</div> - -<h2 id="The_Fonts_tab">The Fonts tab</h2> - -<p>The Fonts tab is located on the right-hand side of the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> 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:</p> - -<ol> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Open the Page Inspector</a>.</li> - <li>Select the Fonts tab; the last of the tabs shown in the right-hand side of the CSS pane.</li> -</ol> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16157/full-fonts-tab-new63.png" style="border: 1px solid black; display: block; height: 663px; margin: 0px auto; width: 500px;"></p> - -<p>The Fonts tab has three major sections:</p> - -<ul> - <li>"Fonts used" by the currently inspected element.</li> - <li>The new Fonts Editor. In Firefox 61 and 62, this section does not exist.</li> - <li>"All fonts on page" — This section lists all of the fonts in use on the page. In Firefox 61 and 62, this area is labeled "Other fonts in page" and doesn't include the fonts mentioned in the "Fonts used" section.</li> -</ul> - -<h2 id="Fonts_used">Fonts used</h2> - -<p>The top section of the Font Editor shows the fonts used by the currently inspected element, grouped by font family.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16150/fonts-used.png" style="border-style: solid; border-width: 1px; display: block; height: 114px; margin: 0px auto; width: 400px;"></p> - -<p>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."</p> - -<p>Fonts will be included in this section for one of the following reasons:</p> - -<ul> - <li>They are listed in the element's <code>font-family</code> CSS declaration value.</li> - <li>They are applied to the element as part of the browser's default styling (Times New Roman for most browsers), and no author-defined font has been supplied.</li> - <li>They are used by a descendant of the inspected element, for example, when it is a container for other elements which have text content with fonts applied.</li> - <li>They are system fallback fonts used when nothing from the <code>font-family</code> CSS declaration has been applied.</li> -</ul> - -<h2 id="Fonts_Editor">Fonts Editor</h2> - -<p>Firefox 63 adds the Font Editor — a new area below "Fonts used" with additional controls for editing the fonts’ characteristics.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16159/fonts-editor-closeup-63-cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 134px; margin: 0px auto; width: 500px;"></p> - -<p>For standard (static) fonts, you will be able to change the settings listed below</p> - -<h3 id="Size">Size</h3> - -<p>The {{cssxref("font-size")}} for the inspected element.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16160/font-size_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 26px; margin: 0px auto; width: 360px;"></p> - -<p>This can be set using <code>em</code>, <code>rem</code>, <code>%</code>, <code>px</code>, <code>vh</code>, or <code>vw</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p> - -<div class="note"> -<p><strong>Note</strong>: If you want to use a different unit such as <code>pt</code> for <code>font-size</code> or <code>line-height</code>, you can set the property value applied to the currently inspected element to use that unit via the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">rules view</a>, and the font editor will automatically pick it up and make it available in the associated units dropdown menu.</p> -</div> - -<p>Changing the unit of measure converts the numerical value to its equivalent in the new unit, so the same computed value is maintained.</p> - -<p>Example: If <code>1rem</code> is equivalent to 10 pixels, when you change the unit of measurement from <code>rem</code> to <code>px</code>, <code>2rem</code> becomes <code>20px</code>.</p> - -<h3 id="Line_height">Line height</h3> - -<p>The {{cssxref("line-height")}} of the inspected element.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16166/line-height_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> - -<p>This can be set using unitless, <code>em</code>, <em>%</em>, or <code>px</code> units. You can select values using the slider or enter a numeric value directly into the text box.</p> - -<p>Changing the unit of measure changes the value relative to the <code>font-size</code> setting.</p> - -<p>Example: If the font is 20 pixels high and the line-height is <code>1.5em</code>, when you change the unit of measure from <code>em</code> to <code>px</code>, the value will become <code>30px</code>.</p> - -<h3 id="Weight">Weight</h3> - -<p>The {{cssxref("font-weight")}} for the inspected element.</p> - -<p><img alt="Font weight setting" src="https://mdn.mozillademos.org/files/16162/font-weight_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: For <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">variable fonts</a> (see below) that define a <code>wght</code> variation axis, this range is custom.</p> -</div> - -<h3 id="Italic">Italic</h3> - -<p>The {{cssxref("font-style")}} for the inspected element.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16163/font-italic_cropped.png" style="border-style: solid; border-width: 1px; display: block; height: 31px; margin: 0px auto; width: 360px;"></p> - -<p>This setting toggles between <code>italic</code> and <code>normal</code> values for the <code>font-style</code> CSS property.</p> - -<div class="note"> -<p><strong>Note</strong>: As you change settings, Firefox applies inline styles to the element to make the changes instantly visible on the page.</p> -</div> - -<h2 id="All_fonts_on_page">All fonts on page</h2> - -<p>The remaining area, at the bottom of the Fonts tab, shows an expandable list of all of the fonts in use on the page.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16158/all-fonts-on-page_new63.png" style="border: 1px solid black; display: block; height: 641px; margin: 0px auto; width: 500px;"></p> - -<p>The list is useful because you can easily determine whether a font is a web font or a font hosted on your system.</p> - -<p>Each font listed in this section shows you:</p> - -<ul> - <li>The <code>font-family</code> identifier and full name of the font.</li> - <li>The URL to the font file in the case of web fonts not available on your system, or "System" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). You can copy the URL to the font file by clicking on the icon to the right of the URL.</li> - <li>The {{cssxref("@font-face")}} descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet.</li> - <li>A text sample, to give you an idea of what the font looks like when rendered. The default text for the sample is "Abc" but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. Once entered, all of the sample text will be set to the same custom value.</li> -</ul> - -<h2 id="Variable_font_support_in_Firefox_Developer_Tools">Variable font support in Firefox Developer Tools</h2> - -<p>Firefox 62 added support for variable fonts and Firefox 63 features support for editing the properties of variable fonts in the Font Editor.</p> - -<h3 id="What_are_variable_fonts">What are variable fonts?</h3> - -<p><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable Fonts</a>, or <strong>OpenType Font Variations</strong>, 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.</p> - -<p>Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by <strong>axes of variation</strong> (see <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#Introducing_the_'variation_axis'">Introducing the 'variation axis'</a> 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).</p> - -<p>There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer <em>does </em>implement a registered axis, its behavior <em>must</em> follow the defined behavior.</p> - -<p>All variable font axes have a four-character axis tag. The CSS <code>{{cssxref("font-variation-settings")}}</code> property uses the tag as part of the key-value pair. For example, to set {{cssxref("font-weight")}} using <code>font-variation-settings</code>, you could do something like this:</p> - -<pre class="brush: css notranslate">font-variation-settings: "wght" 350;</pre> - -<p>However, you should only use <code>font-variation-settings</code> as a last resort if there is no basic font property available for setting those characteristic values (e.g. custom axes).</p> - -<div class="note"> -<p><strong>Note</strong>: font characteristics set using <code>font-variation-settings</code> will always override those set using the corresponding basic font properties, e.g. <code>font-weight</code>, no matter where they appear in the cascade.</p> -</div> - -<p>Here are the registered axes along with their corresponding CSS properties:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Axis Tag</th> - <th scope="col">CSS Property</th> - </tr> - </thead> - <tbody> - <tr> - <td>"wght"</td> - <td>{{cssxref("font-weight")}}</td> - </tr> - <tr> - <td>"wdth"</td> - <td>{{cssxref("font-stretch")}}</td> - </tr> - <tr> - <td>"slnt" (slant)</td> - <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td> - </tr> - <tr> - <td>"ital"</td> - <td>{{cssxref("font-style")}}: <code>italic</code></td> - </tr> - <tr> - <td>"opsz"</td> - <td> - <p>{{cssxref("font-optical-sizing")}}</p> - </td> - </tr> - </tbody> -</table> - -<p>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.</p> - -<div class="note"> -<p><strong>Note</strong>: 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.</p> -</div> - -<div class="warning"> -<p><strong>Warning</strong>: 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.</p> -</div> - -<h4 id="Working_with_Variable_fonts_in_the_Font_Editor">Working with Variable fonts in the Font Editor</h4> - -<p>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.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16164/v_fonts_example_cropped.png" style="border: 1px solid black; display: block; height: 379px; margin: 0px auto; width: 350px;"></p> - -<p>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.</p> - -<p>Here are a couple of examples of fonts with different axes defined:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16167/v_fonts-examples_cropped.png" style="display: block; height: 29px; margin: 0px auto; width: 700px;"></p> - -<p>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.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16169/change_font_before_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 889px;"></p> - -<p>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.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16168/change_font_after_cropped.png" style="border: 1px solid black; display: block; height: 329px; margin: 0px auto; width: 897px;"></p> - -<ul> -</ul> - -<h2 id="Tips">Tips</h2> - -<p>Finally, here are a few tips for making effective use of the Fonts tab:</p> - -<ul> - <li>When using the Page Inspector's <a href="/en-US/docs/Tools/Page_Inspector/3-pane_mode">3-pane mode</a>, you can view the CSS rules for the inspected element simultaneously alongside the Fonts tab.</li> - <li>If you hover over the {{cssxref("font-family")}} property in the Rules view, a tooltip shows a sample of the font: - <p><img alt="" src="https://mdn.mozillademos.org/files/16170/fonts_62_tooltip_cropped.png" style="border: 1px solid black; display: block; height: 153px; margin: 0px auto; width: 450px;"></p> - </li> - <li>You'll also notice in the above screenshot that the font in the <code>font-family</code> font stack that is actually applied to the inspected element is underlined. This makes it easy to see exactly what is being applied where, when font stacks are specified.</li> -</ul> 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 ---- -<div>{{ToolsSidebar}}</div><p>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.</p> - -<h2 id="Repaints_and_responsiveness">Repaints and responsiveness</h2> - -<p>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 <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class that changes the element's style.</p> - -<p>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.</p> - -<p>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.</p> - -<h2 id="Using_the_paint_flashing_tool">Using the paint flashing tool</h2> - -<p>There are two ways to switch on paint flashing:</p> - -<ul> - <li>open the <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Toolbox</a>, then click the icon labeled "Highlight painted area":</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5929/paint-flashing-open-from-toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<ul> - <li>activate the <a href="/en-US/docs/Tools/GCLI" title="/en-US/docs/Tools/GCLI">Developer Toolbar</a> and type "paintflashing on", then press the Enter key:</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5931/paint-flashing-open-from-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<p>Then try using the page. After moving the mouse around and scrolling a bit, the above page looks like this:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/5935/paint-flashing-activated.png" style="display: block; margin-left: auto; margin-right: auto;">In this example, there are two main sources of repaints:</p> - -<ul> - <li>moving the mouse over links makes the browser repaint them, because they have a style applied using the <a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"><code>:hover</code></a> pseudo-class</li> - <li>scrolling makes the browser repaint the new part of the page coming into view at the bottom of the screen, and also the scrollbar at the top-right</li> -</ul> - -<p>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.</p> - -<h2 id="Example_CSS_transitions">Example: CSS transitions</h2> - -<p>One area where implementation choices can affect repaint efficiency is in <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions" title="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">CSS transitions</a>. 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 <a href="/en-US/docs/Web/CSS/margin-left" title="/en-US/docs/Web/CSS/margin-left"><code>margin-left</code></a>, while the second way moves the element using the <a href="/en-US/docs/Web/CSS/transform" title="/en-US/docs/Web/CSS/transform"><code>transform</code></a> property.</p> - -<pre class="brush: html"><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> - -</pre> - -<pre class="brush: css">#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%); -}</pre> - -<p>To see the transition, move the mouse into the space below:</p> - -<p>{{ EmbedLiveSample('Example.3A_CSS_transitions', 600, 300) }}</p> - -<p>Now switch paint flashing on, and try it again. You should see that the <code>margin-left</code> version triggers a series of repaints as the element moves, while the <code>transform</code> version only causes repaints in the start and end positions.</p> - -<p>Why? Well, when you use <code>transform</code>, 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.</p> - -<p>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.</p> 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 ---- -<p>{{draft}}</p> - -<p>{{ToolsSidebar}}</p> - -<p>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 <em>debuggee</em>, and the instance of Firefox doing the debugging is called the <em>debugger</em>.</p> - -<h2 id="Enable_remote_debugging">Enable remote debugging</h2> - -<p>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 <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>. If you're using <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, they are checked by default.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16905/remote_debug_settings.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> - -<p>You only need to do this once: the setting values persist across restarts.</p> - -<h2 id="Start_the_debugger_server">Start the debugger server</h2> - -<p>Next, you need to start the debugger server in the debuggee.</p> - -<p>Run the debuggee from the command line, passing it the <code>--start-debugger-server</code> option:</p> - -<pre class="notranslate">/path/to/firefox --start-debugger-server</pre> - -<p>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:</p> - -<pre class="notranslate">/path/to/firefox --start-debugger-server 1234</pre> - -<p>Note: in Windows, the <code>start-debugger-server</code> call will only have one dash:</p> - -<pre class="notranslate">firefox.exe -start-debugger-server 1234</pre> - -<div class="note"> -<p><strong>Note</strong>: By default, and for security reasons, the <code>devtools.debugger.force-local</code> 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.</p> -</div> 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 ---- -<div>{{ToolsSidebar}}</div> - -<p>Under the <em>Cache Storage</em> type within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a> you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p> - -<ul> - <li>the URL for the resource.</li> - <li>the status code for the request that was made to fetch it.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16810/cache_storage_detail.png" style="border: 1px solid black; display: block; height: 251px; margin-left: auto; margin-right: auto; width: 926px;"></p> 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 ---- -<div>{{ToolsSidebar}}</div> - -<p>When you select an origin inside the <em>Indexed DB</em> storage type in the storage tree of the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, a table lists the details of all the databases present for that origin.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The data shown in an IndexedDB database is a snapshot of the data as it was when you opened the Storage Inspector tool.</p> -</div> - -<p>Databases have the following details:</p> - -<ul> - <li><em>Database Name</em> — The name of the database.</li> - <li><em>Storage</em> — The <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Different_types_of_data_storage">storage type</a> specified for the database.</li> - <li><em>Origin</em> — The origin of the database.</li> - <li><em>Version</em> — The database version.</li> - <li><em>Object Stores</em> — The number of object stores in the database.</li> -</ul> - -<p>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:</p> - -<ul> - <li><em>Object Store Name</em> — The name of the object store.</li> - <li><em>Key</em> — The {{domxref("IDBIndex.keyPath", "keyPath")}} property of the object store.</li> - <li><em>Auto Increment</em> — Is automatic incrementation of the keys enabled?</li> - <li><em>Indexes</em> — Array of indexes present in the object store as shown below.</li> -</ul> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16812/indexed_db_details.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 926px;"></p> - -<p>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.</p> - -<p>You can delete an IndexedDB database using the context menu in the storage tree:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16813/indexed_db_context_menu.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p> - -<p>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:<img alt="" src="https://mdn.mozillademos.org/files/16815/indexedDB_delete_warning.png" style="border: 1px solid black; display: block; height: 250px; margin: 0px auto; width: 926px;"></p> - -<p>You can use the context menu in the table widget to delete all items in an object store, or a particular item:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16814/indexed_db_table_widget_context.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 924px;"></p> 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 ---- -<div>{{ToolsSidebar}}</div> - -<p>When an origin corresponding to local storage or session storage is selected within the <a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a>, the names and values of all the items corresponding to local storage or session storage will be listed in a table.</p> - -<p>You can edit local and session storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p> - -<p>{{EmbedYouTube("UKLgBBUi11c")}}</p> - -<p>You can delete local storage and session storage entries using the context menu:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16768/delete_storage_menu.png" style="border: 1px solid black; display: block; height: 270px; margin-left: auto; margin-right: auto; width: 914px;"></p> - -<p>You can also delete local and session storage entries by selecting an item and pressing the <kbd>Delete</kbd> or <kbd>Backspace</kbd> key.</p> - -<p>Finally, you can add new storage items by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.</p> 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 ---- -<p class="summary">This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the <strong>Perceivable</strong> 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.</p> - -<div class="note"> -<p><strong>Note</strong>: To read the W3C definitions for Perceivable and its guidelines and success criteria, see <a href="https://www.w3.org/TR/WCAG21/#perceivable">Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.</a></p> -</div> - -<h2 id="Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">Guideline 1.1 — Providing text alternatives for non-text content</h2> - -<p>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.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - </thead> - <tbody> - <tr> - <td colspan="1" rowspan="5">1.1.1 Provide text equivalents (A)</td> - <td>All images that convey meaningful content should be given suitable alternative text.</td> - <td><a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives.</a></td> - </tr> - <tr> - <td>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 <code>longdesc</code> attribute.</td> - <td> - <p>A text description may work, or an accessible data table (see <a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a>). Also see <a href="/en-US/docs/Learn/Accessibility/HTML#Other_text_alternative_mechanisms">Other text alternative mechanisms</a> for the argument against <code>longdesc</code>.</p> - </td> - </tr> - <tr> - <td>Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).</td> - <td> - <p>See <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a> for static caption options, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a>, <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a>, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other alternatives.</p> - </td> - </tr> - <tr> - <td>UI Controls such as form elements and buttons should have text labels that describe their purpose.</td> - <td>Buttons are simple — you should make sure the button text describes the function of the button (e.g. <code><button>Upload image</button></code>). For further information on other UI controls, see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>.</td> - </tr> - <tr> - <td>Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.</td> - <td> - <p>Decorative images should be implemented using CSS background images (see <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">Backgrounds</a>). If you have to include an image via an {{htmlelement("img")}} element, give it a blank alt (<code>alt=""</code>), otherwise screenreaders may try to read out the filepath, etc.</p> - - <p>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.</p> - </td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#text-alternatives">WCAG description for Guideline 1.1: Text alternatives</a>.</p> -</div> - -<h2 id="Guideline_1.2_—_Providing_text_alternatives_for_time-based_media">Guideline 1.2 — Providing text alternatives for time-based media</h2> - -<p>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.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - <tr> - <td colspan="1" rowspan="1">1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A)</td> - <td>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).</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> - </tr> - <tr> - <td colspan="1">1.2.2 Provide captions for web-based video (A)</td> - <td>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.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Video_text_tracks">Video text tracks</a> for HTML5 video captions, and <a href="/en-US/docs/Learn/Accessibility/Multimedia#Other_multimedia_content">Other multimedia content</a> for other technologies. See also <a href="https://support.google.com/youtube/answer/2734796?hl=en">Add your own subtitles & closed captions</a> (YouTube).</td> - </tr> - <tr> - <td colspan="1">1.2.3 Provide text transcript or audio description for web-based video (A)</td> - <td>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.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information. No audio description tutorial available as yet.</td> - </tr> - <tr> - <td colspan="1">1.2.4 Provide captions for live audio (AA)</td> - <td>You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.5 Provide audio descriptions for prerecorded video (AA)</td> - <td>Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.6 Provide sign language equivalent to prerecorded audio (AAA)</td> - <td>An equivalent sign language video should be provided for any prerecorded content containing audio.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.7 Provide extended video with audio descriptions (AAA)</td> - <td>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).</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.2.8 Provide an alternative for prerecorded media (AAA)</td> - <td>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.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> - </tr> - <tr> - <td colspan="1">1.2.9 Provide a transcript for live audio (AAA)</td> - <td>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.</td> - <td>See <a href="/en-US/docs/Learn/Accessibility/Multimedia#Audio_transcripts">Audio transcripts</a> for transcript information.</td> - </tr> - </thead> -</table> - -<div class="note"> -<p><strong>Note</strong>: Also see the <a href="https://www.w3.org/TR/WCAG21/#time-based-media">WCAG description for Guideline 1.2: Time-based Media: Provide alternatives for time-based media</a>.</p> -</div> - -<h2 id="Guideline_1.3_—_Create_content_that_can_be_presented_in_different_ways">Guideline 1.3 — Create content that can be presented in different ways</h2> - -<p>This guideline refers to the ability of content to be consumed by users in multiple ways, accomodating their differing needs.</p> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - <tr> - <td colspan="1" rowspan="1">1.3.1 Info and relationships (A)</td> - <td> - <p>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:</p> - - <ul> - <li>Text labels and the form elements they describe are associated unambiguously using the {{htmlelement("label")}} element, which can be picked up by screenreaders, etc.</li> - <li>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. <code>alt</code> 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.</li> - <li>Lists — if the order of list items is important, and ordered list should be used ({{htmlelement("ol")}}).</li> - </ul> - </td> - <td>The whole of - <p><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> is packed with information about this, but you should particularly refer to <a href="/en-US/docs/Learn/Accessibility/HTML#Good_semantics">Good semantics</a>, <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a>, and <a href="/en-US/docs/Learn/Accessibility/HTML#Text_alternatives">Text alternatives</a>.</p> - </td> - </tr> - <tr> - <td colspan="1">1.3.2 Meaningful content sequence (A)</td> - <td>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.</td> - <td>Again, refer to <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a>.</td> - </tr> - <tr> - <td colspan="1">1.3.3 Sensory characteristics (A)</td> - <td> - <p>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:</p> - - <ul> - <li>"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.</li> - <li>"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.</li> - <li>"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.</li> - </ul> - - <div class="note"> - <p><strong>Note</strong>: Conveying instructions solely by color is related, but covered in a different guideline — 1.4.1.</p> - </div> - </td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.3.4 Orientation (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td>Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.</td> - <td> - <p><a href="https://www.w3.org/WAI/WCAG21/Understanding/orientation.html">Understanding Orientation</a> </p> - </td> - </tr> - <tr> - <td colspan="1">1.3.5 Identify Input Purpose (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <p> </p> - - <p>Follow the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 input fields</a> to programmatically identify the purpose of a field. </p> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html">Understanding Identify Input Purpose</a></td> - </tr> - <tr> - <td colspan="1">1.3.6 Identify Purpose (AAA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td>In content implemented using markup languages, the purpose of User Interface Components, icons, and regions can be programmatically determined.</td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-purpose.html">Understanding Identify Purpose</a></td> - </tr> - </tbody> -</table> - -<div class="note"> -<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#adaptable">Guideline 1.3: Adaptable: Create content that can be presented in different ways without losing information or structure.</a></p> -</div> - -<h2 id="Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Guideline 1.4: Make it easier for users to see and hear content including separating foreground from background</h2> - -<p>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.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Success criteria</th> - <th scope="col">How to conform to the criteria</th> - <th scope="col">Practical resource</th> - </tr> - <tr> - <td colspan="1" rowspan="1">1.4.1 Use of color (A)</td> - <td> - <p>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.</p> - </td> - <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a> and <a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form#Multiple_labels">Multiple labels</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.2 Audio controls (A)</td> - <td>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.</td> - <td>Use native <code><button></code>s to provide accessible keyboard controls, as shown in <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player syling basics</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.3 Minimum contrast (AA)</td> - <td> - <p>The color contrast between background and foreground content should be at a minimum level to ensure legibility:</p> - - <ul> - <li>Text and its background should have a contrast ratio of at least 4.5.1.</li> - <li>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.</li> - </ul> - </td> - <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.4 Resize text (AA)</td> - <td>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.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.5 Images of text (AA)</td> - <td>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.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.6 Enhanced contrast (AAA)</td> - <td> - <p>This follows, and builds on, criterion 1.4.3.</p> - - <ul> - <li>Text and its background should have a contrast ratio of at least 7.1.</li> - <li>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.</li> - </ul> - </td> - <td>See <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast">Color and color contrast</a>.</td> - </tr> - <tr> - <td colspan="1">1.4.7 Low or no background audio (AAA)</td> - <td>Prerecorded audio recordings that primarily feature speech should have minimal background noise, so the content can be easily understood.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.8 Visual presentation (AAA)</td> - <td> - <p>For text content presentation, the following should be true:</p> - - <ul> - <li>Foreground and background colors should be user-selectable.</li> - <li>Text blocks should be no wider than 80 characters (or glyphs), for maximum readability.</li> - <li>Text should not be fully justified (e.g. <code>text-align: justify;</code>)</li> - <li>line height should be at least 1.5 times the text size within paragraphs (e.g. <code>line-height: 1.5;</code>), and at least 2.25 times the text size between paragraphs (e.g. <code>padding: 2.25rem;</code>)</li> - <li>When the text size is doubled, the content should not need to be scrolled.</li> - </ul> - </td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.9 Images of text (No Exception) (AAA)</td> - <td>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.</td> - <td> </td> - </tr> - <tr> - <td colspan="1">1.4.10 Reflow (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <ul> - <li>No horizontal scrolling for right-to-left languages (like English) or left-to-right languages (like Arabic) </li> - <li>No vertical scrolling for top-to-bottom languages (like Japanese)</li> - <li>Except for parts of the content which require two-dimensional layout for usage or meaning (like a large data table).</li> - </ul> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/reflow.html">Understanding Reflow</a></td> - </tr> - <tr> - <td colspan="1">1.4.11 Non-Text Contrast(AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td>Minimum color contrast ratio of 3 to 1 for user interface components and graphical objects. </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html">Understanding Non-Text Contrast</a></td> - </tr> - <tr> - <td colspan="1">1.4.12 Text Spacing (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <p>No loss of content or functionality occurs when the following styles are applied: </p> - - <ul> - <li>Line height (line spacing) to at least 1.5 times the font size;</li> - <li>Spacing following paragraphs to at least 2 times the font size;</li> - <li>Letter spacing (tracking) to at least 0.12 times the font size;</li> - <li>Word spacing to at least 0.16 times the font size.</li> - </ul> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html">Understanding Text Spacing</a></td> - </tr> - <tr> - <td colspan="1">1.4.13 Content on Hover or Focus (AA) <em><a href="https://www.w3.org/TR/WCAG21/#new-features-in-wcag-2-1">added in 2.1</a></em></td> - <td> - <p>Additional content appear and disappear in coordination with hover and keyboard focus, this success criterion specifies three conditions that must be met:</p> - - <ul> - <li>dismissable (can be closed/removed)</li> - <li>hoverable (the additional content does not disappear when the pointer is over it) </li> - <li>persistent (the additional content does not disappear without user action)</li> - </ul> - </td> - <td><a href="https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html">Understanding Content on Hover or Focus</a></td> - </tr> - </thead> -</table> - -<div class="note"> -<p><strong>Note</strong>: Also see the WCAG description for <a href="https://www.w3.org/TR/WCAG21/#distinguishable">Guideline 1.4: Distinguishable: Make it easier for users to see and hear content including separating foreground from background.</a><a href="https://www.w3.org/TR/WCAG21/#distinguishable">.</a></p> -</div> - -<p> </p> - -<h2 id="See_Also">See Also</h2> - -<ul> - <li><a href="en-US/docs/Web/Accessibility/Understanding_WCAG">WCAG</a> - - <ol> - <li>Perceivable</li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable">Operable</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Understandable">Understandable</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Robust">Robust</a></li> - </ol> - </li> -</ul> - -<p> </p> 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 ---- -<p>{{SeeCompatTable}}{{APIRef("Web Animations API")}}</p> - -<p>The <strong><code>AnimationEvent</code></strong> interface represents events providing information related to <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">animations</a>.</p> - -<p>{{InheritanceDiagram}}</p> - -<h2 id="Properties">Properties</h2> - -<p><em>Also inherits properties from its parent {{domxref("Event")}}</em>.</p> - -<dl> - <dt>{{domxref("AnimationEvent.animationName")}} {{readonlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}} containing the value of the {{cssxref("animation-name")}} CSS property associated with the transition.</dd> - <dt>{{domxref("AnimationEvent.elapsedTime")}} {{readonlyInline}}</dt> - <dd>Is a <code>float</code> 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 <code>"animationstart"</code> event, <code>elapsedTime</code> is <code>0.0</code> unless there was a negative value for {{cssxref("animation-delay")}}, in which case the event will be fired with <code>elapsedTime</code> containing <code>(-1 * </code><em>delay</em><code>)</code>.</dd> - <dt>{{domxref("AnimationEvent.pseudoElement")}} {{readonlyInline}}</dt> - <dd>Is a {{domxref("DOMString")}}, starting with <code>'::'</code>, containing the name of the <a href="/en-US/docs/Web/CSS/Pseudo-elements" title="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-element</a> the animation runs on. If the animation doesn't run on a pseudo-element but on the element, an empty string: <code>''</code><code>.</code></dd> -</dl> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("AnimationEvent.AnimationEvent", "AnimationEvent()")}}</dt> - <dd>Creates an <code>AnimationEvent</code> event with the given parameters.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Also inherits methods from its parent {{domxref("Event")}}</em>.</p> - -<dl> - <dt>{{domxref("AnimationEvent.initAnimationEvent()")}} {{non-standard_inline}}{{deprecated_inline}}</dt> - <dd>Initializes a <code>AnimationEvent</code> created using the deprecated {{domxref("Document.createEvent()", "Document.createEvent(\"AnimationEvent\")")}} method.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Animations', '#AnimationEvent-interface', 'AnimationEvent') }}</td> - <td>{{ Spec2('CSS3 Animations') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td> - <p>1.0 {{ property_prefix("webkit") }}</p> - - <p>{{CompatChrome(43.0)}}</p> - </td> - <td>{{ CompatGeckoDesktop("6.0") }}</td> - <td>10.0</td> - <td>12 {{ property_prefix("o") }}<br> - 12.10<br> - 15.0 {{ property_prefix("webkit") }}</td> - <td>4.0 {{ property_prefix("webkit") }}</td> - </tr> - <tr> - <td><code>AnimationEvent()</code> constructor</td> - <td> - <p>{{CompatChrome(43.0)}}</p> - </td> - <td>{{ CompatGeckoDesktop("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td> - <td>1.0</td> - <td>{{ CompatGeckoDesktop("6.0") }}<br> - Removed in {{ CompatGeckoDesktop("23.0") }}</td> - <td>10.0</td> - <td>12</td> - <td>4.0</td> - </tr> - <tr> - <td><code>pseudoelement</code></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoDesktop("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoMobile("6.0") }}</td> - <td>10.0</td> - <td>12 {{ property_prefix("o") }}<br> - 12.10<br> - 15.0 {{ property_prefix("webkit") }}</td> - <td>{{CompatVersionUnknown}}{{ property_prefix("webkit") }}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - <tr> - <td><code>AnimationEvent()</code> constructor</td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(43.0)}}</td> - </tr> - <tr> - <td><code>initAnimationEvent()</code> {{non-standard_inline}}{{deprecated_inline}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile("6.0") }}<br> - Removed in {{ CompatGeckoMobile("23.0") }}</td> - <td>10.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>pseudoelement</code></td> - <td>{{CompatNo}}</td> - <td>{{ CompatGeckoMobile("23.0") }}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_animations">Using CSS animations</a></li> - <li>Animation-related CSS properties and at-rules: {{cssxref("animation")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-name")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timing-function")}}, {{cssxref("@keyframes")}}.</li> -</ul> 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 ---- -<p>{{APIRef("Web Audio API")}}</p> - -<div> -<p>Die <code>AudioContext</code> 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.</p> -</div> - -<p><code>Ein AudioContext</code> kann das Ziel von Events sein, aufgrund dessen unterstützt er auch die {{domxref("EventTarget")}} Schnittstelle.</p> - -<h2 id="Eigenschaften">Eigenschaften</h2> - -<dl> - <dt>{{domxref("AudioContext.currentTime")}} {{readonlyInline}}</dt> - <dd>Returns a double representing an ever-increasing hardware time in seconds used for scheduling. It starts at <code>0</code>.</dd> - <dt>{{domxref("AudioContext.destination")}} {{readonlyInline}}</dt> - <dd>Returns an {{domxref("AudioDestinationNode")}} representing the final destination of all audio in the context. It can be thought of as the audio-rendering device.</dd> - <dt>{{domxref("AudioContext.listener")}} {{readonlyInline}}</dt> - <dd>Returns the {{domxref("AudioListener")}} object, used for 3D spatialization.</dd> - <dt>{{domxref("AudioContext.sampleRate")}} {{readonlyInline}}</dt> - <dd>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.</dd> - <dt>{{domxref("AudioContext.state")}} {{readonlyInline}}</dt> - <dd>Returns the current state of the <code>AudioContext</code>.</dd> - <dt>{{domxref("AudioContext.mozAudioChannelType")}} {{ non-standard_inline() }} {{readonlyInline}}</dt> - <dd>Used to return the audio channel that the sound playing in an {{domxref("AudioContext")}} will play in, on a Firefox OS device.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("AudioContext.onstatechange")}}</dt> - <dd>An event handler that runs when an event of type {{event("statechange")}} has fired. This occurs when the <code>AudioContext</code>'s state changes, due to the calling of one of the state change methods ({{domxref("AudioContext.suspend")}}, {{domxref("AudioContext.resume")}}, or {{domxref("AudioContext.close")}}.)</dd> -</dl> - -<h2 id="Methoden">Methoden</h2> - -<p><em>Implementiert zusätzlich die Methoden der Schnittstelle </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("AudioContext.close()")}}</dt> - <dd>Closes the audio context, releasing any system audio resources that it uses.</dd> - <dt>{{domxref("AudioContext.createBuffer()")}}</dt> - <dd>Creates a new, empty {{ domxref("AudioBuffer") }} object, which can then be populated by data and played via an {{ domxref("AudioBufferSourceNode") }}.</dd> - <dt>{{domxref("AudioContext.createBufferSource()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("AudioContext.createMediaElementSource()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("AudioContext.createMediaStreamSource()")}}</dt> - <dd>Creates a {{domxref("MediaStreamAudioSourceNode")}} associated with a {{domxref("MediaStream")}} representing an audio stream which may come from the local computer microphone or other sources.</dd> - <dt>{{domxref("AudioContext.createMediaStreamDestination()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("AudioContext.createScriptProcessor()")}}</dt> - <dd>Creates a {{domxref("ScriptProcessorNode")}}, which can be used for direct audio processing via JavaScript.</dd> - <dt>{{domxref("AudioContext.createStereoPanner()")}}</dt> - <dd>Creates a {{domxref("StereoPannerNode")}}, which can be used to apply stereo panning to an audio source.</dd> - <dt>{{domxref("AudioContext.createAnalyser()")}}</dt> - <dd>Creates an {{domxref("AnalyserNode")}}, which can be used to expose audio time and frequency data and for example to create data visualisations.</dd> - <dt>{{domxref("AudioContext.createBiquadFilter()")}}</dt> - <dd>Creates a {{domxref("BiquadFilterNode")}}, which represents a second order filter configurable as several different common filter types: high-pass, low-pass, band-pass, etc.</dd> - <dt>{{domxref("AudioContext.createChannelMerger()")}}</dt> - <dd>Creates a {{domxref("ChannelMergerNode")}}, which is used to combine channels from multiple audio streams into a single audio stream.</dd> - <dt>{{domxref("AudioContext.createChannelSplitter()")}}</dt> - <dd>Creates a {{domxref("ChannelSplitterNode")}}, which is used to access the individual channels of an audio stream and process them separately.</dd> - <dt>{{domxref("AudioContext.createConvolver()")}}</dt> - <dd>Creates a {{domxref("ConvolverNode")}}, which can be used to apply convolution effects to your audio graph, for example a reverberation effect.</dd> - <dt>{{domxref("AudioContext.createDelay()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("AudioContext.createDynamicsCompressor()")}}</dt> - <dd>Creates a {{domxref("DynamicsCompressorNode")}}, which can be used to apply acoustic compression to an audio signal.</dd> - <dt>{{domxref("AudioContext.createGain()")}}</dt> - <dd>Creates a {{domxref("GainNode")}}, which can be used to control the overall volume of the audio graph.</dd> - <dt>{{domxref("AudioContext.createOscillator()")}}</dt> - <dd>Creates an {{domxref("OscillatorNode")}}, a source representing a periodic waveform. It basically generates a tone.</dd> - <dt>{{domxref("AudioContext.createPanner()")}}</dt> - <dd>Creates a {{domxref("PannerNode")}}, which is used to spatialise an incoming audio stream in 3D space.</dd> - <dt>{{domxref("AudioContext.createPeriodicWave()")}}</dt> - <dd>Creates a {{domxref("PeriodicWave")}}, used to define a periodic waveform that can be used to determine the output of an {{ domxref("OscillatorNode") }}.</dd> - <dt>{{domxref("AudioContext.createWaveShaper()")}}</dt> - <dd>Creates a {{domxref("WaveShaperNode")}}, which is used to implement non-linear distortion effects.</dd> - <dt>{{domxref("AudioContext.createAudioWorker()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("AudioContext.decodeAudioData()")}}</dt> - <dd>Asynchronously decodes audio file data contained in an {{domxref("ArrayBuffer")}}. In this case, the ArrayBuffer is usually loaded from an {{domxref("XMLHttpRequest")}}'s <code>response</code> attribute after setting the <code>responseType</code> to <code>arraybuffer</code>. This method only works on complete files, not fragments of audio files.</dd> - <dt>{{domxref("AudioContext.resume()")}}</dt> - <dd>Resumes the progression of time in an audio context that has previously been suspended.</dd> - <dt>{{domxref("AudioContext.suspend()")}}</dt> - <dd>Suspends the progression of time in the audio context, temporarily halting audio hardware access and reducing CPU/battery usage in the process.</dd> -</dl> - -<h2 id="Obsolete_Methoden">Obsolete Methoden</h2> - -<dl> - <dt>{{domxref("AudioContext.createJavaScriptNode()")}}</dt> - <dd>Creates a {{domxref("JavaScriptNode")}}, used for direct audio processing via JavaScript. This method is obsolete, and has been replaced by {{domxref("AudioContext.createScriptProcessor()")}}.</dd> - <dt>{{domxref("AudioContext.createWaveTable()")}}</dt> - <dd>Creates a {{domxref("WaveTableNode")}}, used to define a periodic waveform. This method is obsolete, and has been replaced by {{domxref("AudioContext.createPeriodicWave()")}}.</dd> -</dl> - -<h2 id="Beispiele">Beispiele</h2> - -<p>Grundsätzliche Deklarierung eines Audio Kontextes:</p> - -<pre class="brush: js">var audioCtx = new AudioContext();</pre> - -<p>Browserunabhängige Variante:</p> - -<pre class="brush: js">var AudioContext = window.AudioContext || window.webkitAudioContext; -var audioCtx = new AudioContext(); - -var oscillatorNode = audioCtx.createOscillator(); -var gainNode = audioCtx.createGain(); -var finish = audioCtx.destination; -// etc.</pre> - -<h2 id="Spezifikationen">Spezifikationen</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('Web Audio API', '#the-audiocontext-interface', 'AudioContext')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browserkompatibilität">Browserkompatibilität</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(10.0)}}{{property_prefix("webkit")}}<br> - 35</td> - <td>{{CompatGeckoDesktop(25.0)}} </td> - <td>{{CompatNo}}</td> - <td>15.0{{property_prefix("webkit")}}<br> - 22</td> - <td>6.0{{property_prefix("webkit")}}</td> - </tr> - <tr> - <td><code>createStereoPanner()</code></td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoDesktop(37.0)}} </td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(40.0)}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop(37.0)}} </td> - <td>2.2</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>createStereoPanner()</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>onstatechange</code>, <code>state</code>, <code>suspend()</code>, <code>resume()</code></td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul style="margin-left: 40px;"> - <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> - <li>{{domxref("OfflineAudioContext")}}</li> -</ul> 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 ---- -<div>{{APIRef}}</div> - -<p>The <code><strong>CanvasRenderingContext2D</strong></code><strong><code>.setLineDash()</code></strong> method of the Canvas 2D API sets the line dash pattern.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">void <var><em>ctx</em>.setLineDash(segments);</var> -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>segments</code></dt> - <dd>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, <code>[5, 15, 25]</code> will become <code>[5, 15, 25, 5, 15, 25]</code>. An empty array clears the dashes, so that a solid line will be drawn.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_the_setLineDash_method">Using the <code>setLineDash</code> method</h3> - -<p>This is just a simple code snippet which uses the <code>setLineDash</code> method to draw a dashed line.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><canvas id="canvas"></canvas> -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="brush: js; highlight:[4]">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(); -</pre> - -<p>Edit the code below and see your changes update live in the canvas:</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas> -<div class="playable-buttons"> - <input id="edit" type="button" value="Edit" /> - <input id="reset" type="button" value="Reset" /> -</div> -<textarea id="code" class="playable-code"> -ctx.setLineDash([5, 15]); -ctx.beginPath(); -ctx.moveTo(0,100); -ctx.lineTo(400, 100); -ctx.stroke();</textarea> -</pre> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var ctx = canvas.getContext("2d"); -var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var edit = document.getElementById("edit"); -var code = textarea.value; - -function drawCanvas() { - ctx.clearRect(0, 0, canvas.width, canvas.height); - eval(textarea.value); -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawCanvas(); -}); - -edit.addEventListener("click", function() { - textarea.focus(); -}) - -textarea.addEventListener("input", drawCanvas); -window.addEventListener("load", drawCanvas); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 360) }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', "scripting.html#dom-context-2d-setlinedash", "CanvasRenderingContext2D.setLineDash")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(27) }}</td> - <td>{{ CompatIE(11) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(27) }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Gecko-specific_notes">Gecko-specific notes</h2> - -<ul> - <li>Starting with Gecko 7.0 {{geckoRelease("7.0")}}, the non-standard and deprecated property <code>mozDash</code> has been implemented to set and get a dash list. This property will be deprecated and removed in the future, see {{bug(931643)}}. Use <code>setLineDash()</code> instead.</li> -</ul> - -<h2 id="WebKit-specific_notes">WebKit-specific notes</h2> - -<ul> - <li>In WebKit-based browsers (e.g. Safari), the non-standard and deprecated property <code>webkitLineDash</code> is implemented besides this method. Use <code>setLineDash()</code> instead.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The interface defining it, {{domxref("CanvasRenderingContext2D")}}</li> - <li>{{domxref("CanvasRenderingContext2D.getLineDash()")}}</li> - <li>{{domxref("CanvasRenderingContext2D.lineDashOffset")}}</li> -</ul> 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 ---- -<p>{{ApiRef("DOM Events")}}</p> - -<p><code>EventTarget</code> is an interface implemented by objects that can receive events and may have listeners for them.</p> - -<p>{{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.</p> - -<p>Many event targets (including elements, documents, and windows) also support setting <a href="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">event handlers</a> via <code>on...</code> properties and attributes.</p> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("EventTarget.addEventListener()")}}</dt> - <dd>Register an event handler of a specific event type on the <code>EventTarget</code>.</dd> - <dt>{{domxref("EventTarget.removeEventListener()")}}</dt> - <dd>Removes an event listener from the <code>EventTarget</code>.</dd> - <dt>{{domxref("EventTarget.dispatchEvent()")}}</dt> - <dd>Dispatch an event to this <code>EventTarget</code>.</dd> -</dl> - -<h3 id="Additional_methods_for_Mozilla_chrome_code">Additional methods for Mozilla chrome code</h3> - -<p>Mozilla extensions for use by JS-implemented event targets to implement on* properties. See also <a href="/en-US/docs/Mozilla/WebIDL_bindings">WebIDL bindings</a>.</p> - -<ul> - <li>void <strong>setEventHandler</strong>(DOMString type, EventHandler handler) {{non-standard_inline}}</li> - <li>EventHandler <strong>getEventHandler</strong>(DOMString type) {{non-standard_inline}}</li> -</ul> - -<h2 id="Example">Example:</h2> - -<h3 id="_Simple_implementation_of_EventTarget" name="_Simple_implementation_of_EventTarget">Simple implementation of EventTarget</h3> - -<pre class="brush: js">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; -}; -</pre> - -<p>{{ EmbedLiveSample('_Simple_implementation_of_EventTarget') }}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#interface-eventtarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>No change.</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', 'DOM3-Events.html#interface-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - <td>A few parameters are now optional (<code>listener</code>), or accepts the <code>null</code> value (<code>useCapture</code>).</td> - </tr> - <tr> - <td>{{SpecName('DOM2 Events', 'events.html#Events-EventTarget', 'EventTarget')}}</td> - <td>{{Spec2('DOM2 Events')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1")}}</td> - <td>9.0</td> - <td>7</td> - <td>1.0<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1")}}</td> - <td>9.0</td> - <td>6.0</td> - <td>1.0</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>window.EventTarget</code> does not exist.</p> - -<h2 id="See_Also">See Also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Reference/Events">Event reference</a> - the events available in the platform.</li> - <li><a href="/en-US/docs/Web/Guide/DOM/Events">Event developer guide</a></li> - <li>{{domxref("Event")}} interface</li> -</ul> 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 ---- -<p>{{APIRef("File API") }}{{non-standard_header}}</p> - -<p>{{deprecated_header(7.0)}}</p> - -<h2 id="Summary">Summary</h2> - -<p>The <code>getAsText</code> method provides the file's data interpreted as text using a given encoding.</p> - -<div class="note"> -<p><strong>Note:</strong> This method is obsolete; you should use the {{domxref("FileReader")}} method {{domxref("FileReader.readAsText()","readAsText()")}} instead.</p> -</div> - -<h2 id="Syntaxe">Syntaxe</h2> - -<pre>var str = instanceOfFile.getAsText(encoding);</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt>encoding</dt> - <dd>A string indicating the encoding to use for the returned data. If this string is empty, UTF-8 is assumed.</dd> -</dl> - -<h3 id="Returns">Returns</h3> - -<p>A string containing the file's data interpreted as text in the specified <code>encoding</code>.</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: js">// fileInput is a HTMLInputElement: <input> -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 - } - } -}</pre> - -<h2 id="Specification">Specification</h2> - -<p>Not part of any specification.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("File")}}</li> - <li>{{domxref("FileReader")}}</li> -</ul> 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 ---- -<p>{{APIRef}}{{SeeCompatTable}}</p> - -<p>The <strong><code>RTCPeerConnection</code></strong> 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.</p> - -<div class="note"> -<p><strong>Note:</strong> <code>RTCPeerConnection</code> 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:</p> - -<pre class="brush: js">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; -</pre> - -<p>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.</p> -</div> - -<h2 id="Basic_usage">Basic usage</h2> - -<p>Basic <code>RTCPeerConnection</code> usage involves negotiating a connection between your local machine and a remote one by generating <a href="http://en.wikipedia.org/wiki/Session_Description_Protocol">Session Description Protocol</a> 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.</p> - -<p>Both parties (the caller and the called party) need to set up their own <code>RTCPeerConnection</code> instances to represent their end of the peer-to-peer connection:</p> - -<pre class="brush: js">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.<a href="#close()">close</a>(); -} - -function error(err) { - endCall(); -} -</pre> - -<h3 id="Initializing_the_call">Initializing the call</h3> - -<p>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 <code>RTCPeerConnection</code>. 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.</p> - -<pre class="brush: js">// 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.<a href="#addStream()">addStream</a>(stream); - - pc.<a href="#createOffer()">createOffer</a>(function(offer) { - pc.<a href="#setLocalDescription()">setLocalDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { - // send the offer to a server to be forwarded to the friend you're calling. - }, error); - }, error); -}); -</pre> - -<h3 id="Answering_a_call">Answering a call</h3> - -<p>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 <code>RTCPeerConnection</code>. An {{domxref("RTCSessionDescription")}} object is created and set up as the remote description by calling {{domxref("RTCPeerConnection.setRemoteDescription()")}}.</p> - -<p>Then an answer is created using {{domxref("RTCPeerConnection.createAnswer()")}} and sent back to the server, which forwards it to the caller.</p> - -<pre class="brush: js">var offer = getOfferFromFriend(); -navigator.getUserMedia({video: true}, function(stream) { - pc.onaddstream({stream: stream}); - pc.<a href="#addStream()">addStream</a>(stream); - - pc.setRemoteDescription(new <span class="nx">RTCSessionDescription</span>(offer), function() { - pc.<a href="#createAnswer()">createAnswer</a>(function(answer) { - pc.<a href="#setLocalDescription()">setLocalDescription</a>(new <span class="nx">RTCSessionDescription</span>(answer), function() { - // <span style="font-size: 1rem;">send the answer to a server to be forwarded back to the caller (you)</span> - }, error); - }, error); - }, error); -}); -</pre> - -<h3 id="Handling_the_answer">Handling the answer</h3> - -<p>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.</p> - -<pre class="brush: js">// pc was set up earlier when we made the original offer -var offer = getResponseFromFriend(); -pc.<a href="#createAnswer()">setRemoteDescription</a>(new <span class="nx">RTCSessionDescription</span>(offer), function() { }, error); -</pre> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("RTCPeerConnection.RTCPeerConnection", "RTCPeerConnection()")}}</dt> - <dd>Constructor; returns a new <code>RTCPeerConnection</code> object.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<p><em>This interface inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("RTCPeerConnection.iceConnectionState")}} {{ReadOnlyInline}}</dt> - <dd>Returns an enum of type <code>RTCIceConnectionState</code> that describes the ICE connection state for the connection. When this value changes, a {{event("iceconnectionstatechange")}} event is fired on the object.</dd> - <dt>{{domxref("RTCPeerConnection.iceGatheringState")}} {{ReadOnlyInline}}</dt> - <dd>Returns an enum of type <code>RTCIceGatheringState</code> that describes the ICE gathering state for the connection.</dd> - <dt>{{domxref("RTCPeerConnection.localDescription")}} {{ReadOnlyInline}}</dt> - <dd>Returns a {{domxref("RTCSessionDescription")}} describing the session for the local end of the connection. If it has not yet been set, it can be <code>null</code>.</dd> - <dt>{{domxref("RTCPeerConnection.peerIdentity")}} {{ReadOnlyInline}}</dt> - <dd>Returns a <code>RTCIdentityAssertion</code>, that is a couple of a domain name (<code>idp</code>) and a name (<code>name</code>) 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 <code>null</code>. Once set, via the appropriate method, it can't be changed.</dd> - <dt>{{domxref("RTCPeerConnection.remoteDescription")}} {{ReadOnlyInline}}</dt> - <dd>Returns a {{domxref("RTCSessionDescription")}} describing the session for the remote end of the connection. If it has not yet been set, it can be <code>null</code>.</dd> - <dt>{{domxref("RTCPeerConnection.signalingState")}} {{ReadOnlyInline}}</dt> - <dd>Returns an enum of type <code>RTCSignalingState</code> 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.</dd> -</dl> - -<h3 id="Event_handlers">Event handlers</h3> - -<dl> - <dt>{{domxref("RTCPeerConnection.onaddstream")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.ondatachannel")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onicecandidate")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.oniceconnectionstatechange")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onidentityresult")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onidpassertionerror")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onidpvalidationerror")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onnegotiationneeded")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onpeeridentity")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.onremovestream")}}</dt> - <dd>Is the event handler called when the {{event("removestream")}} event, sent when a {{domxref("MediaStream")}} is removed from this connection, is received.</dd> - <dt>{{domxref("RTCPeerConnection.onsignalingstatechange")}}</dt> - <dd>Is the event handler called when the {{event("signalingstatechange")}} event, sent when the value of {{domxref("RTCPeerConnection.signalingState", "signalingState")}} changes, is received.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("RTCPeerConnection.addIceCandidate()")}}</dt> - <dd> </dd> - <dt>{{domxref("RTCPeerConnection.addStream()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.close()")}}</dt> - <dd>Abruptly closes a connection.</dd> - <dt>{{domxref("RTCPeerConnection.createAnswer()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.createDataChannel()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.createDTMFSender()")}}</dt> - <dd>Creates a new {{domxref("RTCDTMFSender")}}, associated to a specific {{domxref("MediaStreamTrack")}}, that will be able to send {{Glossary("DTMF")}} phone signaling over the connection.</dd> - <dt>{{domxref("RTCPeerConnection.createOffer()")}}</dt> - <dd>Creates a request to find a remote peer with a specific configuration. </dd> - <dt>{{domxref("RTCPeerConnection.generateCertificate()")}}</dt> - <dd>Creates and stores an X.509 certificate and corresponding private key then returns an {{domxref("RTCCertificate")}}, providing access to it.</dd> - <dt>{{domxref("RTCPeerConnection.getConfiguration()")}}</dt> - <dd> </dd> - <dt>{{domxref("RTCPeerConnection.getIdentityAssertion()")}}</dt> - <dd>Initiates the gathering of an identity assertion. This has an effect only if the {{domxref("RTCPeerConnection.signalingState", "signalingState")}} is not <code>"closed"</code>. It is not expected for the application dealing with the <code>RTCPeerConnection</code>: this is automatically done; an explicit call only allows to anticipate the need.</dd> - <dt>{{domxref("RTCPeerConnection.getLocalStreams()")}}</dt> - <dd>Returns an array of {{domxref("MediaStream")}} associated with the local end of the connection. The array may be empty.</dd> - <dt>{{domxref("RTCPeerConnection.getRemoteStreams()")}}</dt> - <dd>Returns an array of {{domxref("MediaStream")}} associated with the remote end of the connection. The array may be empty.</dd> - <dt>{{domxref("RTCPeerConnection.getStats()")}}</dt> - <dd>Creates a new {{domxref("RTCStatsReport")}} that contains and allows access to statistics regarding the connection.</dd> - <dt>{{domxref("RTCPeerConnection.getStreamById()")}}</dt> - <dd>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 <code>null</code>.</dd> - <dt>{{domxref("RTCPeerConnection.removeStream()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.setIdentityProvider()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.setLocalDescription()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.setRemoteDescription()")}}</dt> - <dd>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.</dd> - <dt>{{domxref("RTCPeerConnection.updateIce()")}}</dt> - <dd> </dd> -</dl> - -<h3 id="Constructor_2">Constructor</h3> - -<pre>new RTCPeerConnection({{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints);</pre> - -<div class="note"> -<p><strong>Note:</strong> While the PeerConnection specification reads like passing an RTCConfiguration object is required, Firefox will supply a default if you don't.</p> -</div> - -<h2 id="Methods_2">Methods</h2> - -<h3 id="createOffer">createOffer</h3> - -<p><code>void createOffer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints);</code></p> - -<p>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.</p> - -<h4 id="Example">Example</h4> - -<pre class="prettyprint">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 - }); -}</pre> - -<h4 id="Arguments">Arguments</h4> - -<dl> - <dt>successCallback</dt> - <dd>An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object</dd> - <dt>errorCallback</dt> - <dd>An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object</dd> - <dt>[optional] constraints</dt> - <dd>An optional {{domxref("MediaConstraints")}} object.</dd> -</dl> - -<h3 id="createAnswer">createAnswer</h3> - -<p><code>void createAnswer({{domxref("RTCSessionDescriptionCallback")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback, optional {{domxref("MediaConstraints")}} constraints)")</code></p> - -<p>Respond to an offer sent from a remote connection.</p> - -<h4 id="Example_2">Example</h4> - -<pre class="line">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 - }) - }) -});</pre> - -<h4 id="Arguments_2">Arguments</h4> - -<dl> - <dt>successCallback</dt> - <dd>An {{domxref("RTCSessionDescriptionCallback")}} which will be passed a single {{domxref("RTCSessionDescription")}} object</dd> - <dt>errorCallback</dt> - <dd>An {{domxref("RTCPeerConnectionErrorCallback")}} which will be passed a single {{domxref("DOMError")}} object</dd> - <dt>[optional] constraints</dt> - <dd>An optional {{domxref("MediaConstraints")}} object.</dd> -</dl> - -<h3 id="updateIce()">updateIce()</h3> - -<p>updateIce(optional {{domxref("RTCConfiguration")}} configuration, optional {{domxref("MediaConstraints")}} constraints)</p> - -<p>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.</p> - -<h4 id="Example_3">Example</h4> - -<pre> </pre> - -<h3 id="addIceCandidate()">addIceCandidate()</h3> - -<p>addIceCandidate ({{domxref("RTCIceCandidate")}} candidate, {{domxref("Function")}} successCallback, {{domxref("RTCPeerConnectionErrorCallback")}} failureCallback);</p> - -<p>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.</p> - -<h4 id="Example_4">Example</h4> - -<pre> pc.addIceCandidate(new RTCIceCandidate(candidate)); -</pre> - -<h3 id="createDataChannel">createDataChannel</h3> - -<p><code>{{domxref("RTCDataChannel")}} createDataChannel ({{domxref("DOMString")}} label, optional {{domxref("RTCDataChannelInit")}} dataChannelDict);</code></p> - -<p>Creates a data channel for sending non video or audio data across the peer connection</p> - -<h4 id="Example_5">Example</h4> - -<pre class="brush: js">var pc = new PeerConnection(); -var channel = pc.createDataChannel("Mydata"); -channel.onopen = function(event) { - <code>channel.send('sending a message');</code> -} -channel.onmessage = function(event) { console.log(event.data); }</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('WebRTC 1.0')}}</td> - <td>{{Spec2('WebRTC 1.0')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Android Webview</th> - <th>Firefox Mobile (Gecko)</th> - <th>Firefox OS</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - <th>Chrome for Android</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td> </td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js">https://github.com/jesup/nightly-gupshup/blob/master/static/js/chat.js</a></li> - <li><a href="http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple">http://www.html5rocks.com/en/tutorials/webrtc/basics/#toc-simple</a></li> - <li><a href="http://dev.w3.org/2011/webrtc/editor/webrtc.html">http://dev.w3.org/2011/webrtc/editor/webrtc.html</a></li> -</ul> 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 ---- -<p>{{APIRef("WebXR Device API")}}{{Draft}}</p> - -<p><span class="seoSummary"><strong>WebXR</strong> 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<strong>(Virtuelle Realität</strong>oder <strong>VR )</strong>entwickelt wurde, oder um der realen Welt grafische Bilder hinzuzufügen (<strong>Augmented Reality</strong>oder <strong>AR</strong>).</span> Die <strong>WebXR-Geräte-API</strong> 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.</p> - -<p>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.</p> - -<p>Um dies zu erreichen, bietet die WebXR-Geräte-API die folgenden Schlüsselfunktionen:</p> - -<ul> - <li>Finden Sie kompatible VR- oder AR-Ausgangsgeräte</li> - <li>Rendern einer 3D-Szene auf dem Gerät mit einer entsprechenden Bildrate</li> - <li>(Optional) spiegeln Sie den Ausgang auf ein 2D-Display</li> - <li>Erstellen von Vektoren, die die Bewegungen von Eingabesteuerelementen darstellen</li> -</ul> - -<p>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.</p> - -<p>Da <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> 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 <a href="https://threejs.org/">three.js</a>.</p> - -<p>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.</p> - -<h2 id="Wichtige_Gesundheits-_und_Sicherheitshinweise">Wichtige Gesundheits- und Sicherheitshinweise</h2> - -<p>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.</p> - -<p>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.</p> - -<p>Wenn Sie Inhalte haben, die für Benutzer von Gefahr sein können, sollten Sie eine Warnmeldung bereitstellen. Besser sicher sein als entschuldigung!</p> - -<h2 id="WebXR_Device_API-Konzepte_und_-Nutzung">WebXR Device API-Konzepte und -Nutzung</h2> - -<h3 id="WebXR_AR_and_VR">WebXR: AR and VR</h3> - -<figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 20em; margin-bottom: 1em; margin-right: 2em; float: left;"> -<figcaption>Example WebXR hardware setup</figcaption> -<img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labeled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png"></figure> - -<p>While the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> 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.</p> - -<p>A typical XR device can have either 3 or 6 degrees of freedom and might or might not have an external positional sensor.</p> - -<p>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.</p> - -<h3 id="WebXR_application_lifecycle">WebXR application lifecycle</h3> - -<p>Most applications using WebXR will follow a similar overall design pattern:</p> - -<ol> - <li>Check to see if the user's device and browser are both capable of presenting the XR experience you want to provide. - <ol> - <li>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.</li> - <li>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.<code>inline</code><code>immersive-vr</code><code>immersive-ar</code></li> - <li>If the session type you want to use is available, provide the appropriate interface to the user to allow them to activate it.</li> - </ol> - </li> - <li>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 .<code>inline</code><code>immersive-vr</code><code>immersive-ar</code></li> - <li>If the promise returned by resolves, use the new {{domxref("XRSession")}} to run the frame loop for the entire duration of the WebXR experience.<code>requestSession()</code> - <ol> - <li>Call the {{domxref("XRSession")}} method {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} to schedule the first frame render for the XR device.</li> - <li>Each callback should use the information provided about the objects located in the 3D world to render the frame using WebGL.<code>requestAnimationFrame()</code></li> - <li>Keep calling {{DOMxRef("XRSession.requestAnimationFrame", "requestAnimationFrame()")}} from within the callback to schedule each successive frame to be rendered.</li> - </ol> - </li> - <li>When the time comes, end the XR session; otherwise, continue the loop until the user chooses to exit XR mode. - <ol> - <li>To end the XR session yourself, call {{DOMxRef("XRSession.end", "XRSession.end()")}}.</li> - <li>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.</li> - </ol> - </li> -</ol> - -<h3 id="Permissions_and_security">Permissions and security</h3> - -<p>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.<code>immersive-vr</code></p> - -<h4 id="Immersive_presentation_of_VR">Immersive presentation of VR</h4> - -<p>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 <a href="/en-US/docs/Web/HTTP/Feature_Policy">feature policy</a>.<code>immersive-vr</code><code>xr-spatial-tracking</code></p> - -<p>Once that check is passed, the request to enter mode is allowed if all of the following are true:<code>immersive-vr</code></p> - -<ul> - <li>The call was issued by code executing within the handler for a user event, or the from the startup code for a user-launched <a href="/en-US/docs/Web/Progressive_web_apps">web application</a>.<code>requestSession()</code></li> - <li>The document is considered trustworthy, in that it is responsible and is both currently active and has focus.</li> - <li>The user's intent to enter immersive VR mode is well understood; see {{anch("User intent")}} below for details.</li> -</ul> - -<p>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.<code>requestSession()</code><code>SecurityError</code></p> - -<h4 id="Inline_presentation">Inline presentation</h4> - -<p>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 <strong>user intent</strong>.<code>inline</code></p> - -<p>Specifically:</p> - -<ul> - <li>If the call isn't coming from within the handler executed in response to a user event, and is not being issued while launching a web application, the request is denied and is delivered to the promise's fulfillment handler.<code>requestSession()</code><code>false</code></li> - <li>If the document making the request isn't the one which is responsible for the script, the request is denied.</li> - <li>If the document making the request isn't trustworthy, the request is denied and is returned through the promise's fulfillment routine. A trustworthy document is one which is both responsible and active, and which currently has focus.<code>false</code></li> - <li>If the user's intent to open an inline XR presentation is not well understood, the request is denied. Understanding of the {{anch("User intent", "user's intent")}} may be either implicit or explicit.</li> -</ul> - -<div class="blockIndicator note"> -<p><strong>Note:</strong> Additional requirements may be put into effect due to the specific features requested by the options object when calling .<code>requestSession()</code></p> -</div> - -<h4 id="User_intent">User intent</h4> - -<p><strong>User intent</strong> 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: <strong>implicit</strong> and <strong>explicit</strong>.</p> - -<p><strong>Explicit user intent</strong> (explicit user consent) is granted when the user has specifically and expressly been asked for permission to perform an action.</p> - -<p><strong>Implicit user intent</strong> (implicit user consent) is assumed if either of the following scenarios is the case:</p> - -<ul> - <li>The user has interacted with the document in some way which has in turn caused your request to occur. For example, if you have an "Enter XR mode" button, and the user clicks it, calling from the button's {{domxref("Element.click_event", "click")}} event handler will permitted.<code>requestSession()</code></li> - <li>If your code is executing during the launch of a web application, the runtime may consider the act of launching your web application to qualify as user intent.</li> -</ul> - -<h3 id="WebXR_availability">WebXR availability</h3> - -<p>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.</p> - -<h4 id="WebXR_polyfill">WebXR polyfill</h4> - -<p>The team designing the WebXR specification has published a <a href="https://github.com/immersive-web/webxr-polyfill">WebXR polyfill</a> which you can use to simulate WebXR on browsers which don't have support for the WebXR APIs. If the browser supports the older <a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a>, that is used. Otherwise, the polyfill falls back to an implementation which uses Google's Cardboard VR API.</p> - -<p>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.</p> - -<p>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.</p> - -<h4 id="WebXR_API_Emulator_extension">WebXR API Emulator extension</h4> - -<p>The <a href="https://mixedreality.mozilla.org/">Mozilla WebXR team</a> has created a <a href="https://blog.mozvr.com/webxr-emulator-extension/">WebXR API Emulator</a> 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.</p> - -<h5 id="Emulator_usage">Emulator usage</h5> - -<p>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.</p> - -<div class="blockIndicator note"> -<p><strong>Important:</strong> You should <em>always</em> test your code on actual AR and/or VR hardware before releasing or shipping a product! Emulated, simulated, or polyfilled environments are <em>not</em> an adequate substitute for actual testing on physical devices.</p> -</div> - -<h5 id="Getting_the_extension">Getting the extension</h5> - -<p>Download the WebXR API Emulator for your supported browser below:</p> - -<ul> - <li><a href="https://chrome.google.com/webstore/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje">Google Chrome</a></li> - <li><a href="https://addons.mozilla.org/en-US/firefox/addon/webxr-api-emulator/">Mozilla Firefox</a></li> -</ul> - -<p>The <a href="https://github.com/MozillaReality/WebXR-emulator-extension">source code for the extension</a> is also available on GitHub.</p> - -<h5 id="Emulator_issues_and_notes">Emulator issues and notes</h5> - -<p>While this isn't the place for a full article about the extension, there are some specific things worth mentioning.</p> - -<p>Version 0.4.0 of the extension was announced on March 26, 2020. It introduced support for augmented reality (AR) through the <a href="https://www.w3.org/TR/webxr-ar-module-1/">WebXR AR Module</a>, which has is approaching a stable state. Documentation for AR is forthcoming shortly here on MDN.</p> - -<p>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")}}.<code>XR</code></p> - -<h2 id="Accessing_the_WebXR_API">Accessing the WebXR API</h2> - -<p>To gain access to the WebXR API within the context of a given window, use the {{domxref("navigator.xr")}} property.</p> - -<dl> - <dt>{{domxref("navigator.xr")}} {{ReadOnlyInline}}</dt> - <dd>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.<code>null</code></dd> -</dl> - -<h2 id="WebXR_interfaces">WebXR interfaces</h2> - -<dl> - <dt>{{DOMxRef("XR")}}</dt> - <dd>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.<code>XR</code></dd> - <dt>{{DOMxRef("XRFrame")}}</dt> - <dd>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.<code>XRFrame</code><code>XRFrame</code><code>XRFrame</code><code>XRFrame</code></dd> - <dt>{{DOMxRef("XRRenderState")}}</dt> - <dd>Provides a set of configurable properties which change how the imagery output by an is composited.<code>XRSession</code></dd> - <dt>{{DOMxRef("XRSession")}}</dt> - <dd>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.<code>XRSession</code></dd> - <dt>{{DOMxRef("XRSpace")}}</dt> - <dd><code>XRSpace</code> 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.<code>XRSpace</code></dd> - <dt>{{DOMxRef("XRReferenceSpace")}}</dt> - <dd>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.<code>XRReferenceSpace</code></dd> - <dt>{{DOMxRef("XRBoundedReferenceSpace")}}</dt> - <dd><code>XRBoundedReferenceSpace</code> 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, <em>y</em> = 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.<code>XRReferenceSpace</code></dd> - <dt>{{DOMxRef("XRView")}}</dt> - <dd>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.<code>XRView</code></dd> - <dt>{{DOMxRef("XRViewport")}}</dt> - <dd>Describes a viewport. A viewport is a rectangular portion of a graphic surface.</dd> - <dt>{{DOMxRef("XRRigidTransform")}}</dt> - <dd>A transform defined using a position and orientation in the virtual space's coordinate system as described by the {{domxref("XRSpace")}}.</dd> - <dt>{{DOMxRef("XRPose")}}</dt> - <dd>Describes a position and orientation in space relative to an {{domxref("XRSpace")}}.</dd> - <dt>{{DOMxRef("XRViewerPose")}}</dt> - <dd>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.<code>XRViewerPose</code></dd> - <dt>{{DOMxRef("XRInputSource")}}</dt> - <dd>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.<code>XRInputSource</code></dd> - <dt>{{DOMxRef("XRWebGLLayer")}}</dt> - <dd>A layer which serves as a <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a> frame buffer into which a scene's view is rendered. Using WebGL to render the scene gains substantial performance benefits due to graphics acceleration.</dd> -</dl> - -<h3 id="Event_interfaces">Event interfaces</h3> - -<p>The following interfaces are used to represent the events used by the WebXR API.</p> - -<dl> - <dt>{{domxref("XRInputSourceEvent")}}</dt> - <dd>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.</dd> - <dt>{{domxref("XRInputSourcesChangeEvent")}}</dt> - <dd>Sent to indicate that the set of available input sources has changed for the {{domxref("XRSession")}}.</dd> - <dt>{{domxref("XRReferenceSpaceEvent")}}</dt> - <dd>Sent when the state of an {{domxref("XRReferenceSpace")}} changes.</dd> - <dt>{{domxref("XRSessionEvent")}}</dt> - <dd>Sent to indicate that the state of an {{domxref("XRSession")}} has changed. For example, if the position and/or orient</dd> -</dl> - -<h2 id="Extensions_to_the_WebGL_API">Extensions to the WebGL API</h2> - -<p>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.</p> - -<dl> - <dt>{{domxref("WebGLRenderingContextBase.makeXRCompatibile()")}}</dt> - <dd>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.<code>true</code><code>makeXRCompatible()</code></dd> -</dl> - -<h2 id="Guides_and_tutorials">Guides and tutorials</h2> - -<p>The following guides and tutorials are a great resource to learn how to comprehend WebXR and the underlying 3D and VR/AR graphics concepts.</p> - -<dl> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Fundamentals">Fundamentals of WebXR</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API/Matrix_math_for_the_web">Matrix math for the web</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Startup_and_shutdown">Setting up and shutting down a WebXR session</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Permissions_and_security">Permissions and security for WebXR</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Geometry">Geometry and reference spaces in WebXR</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Spatial_tracking">Spatial tracking in WebXR</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Rendering">Rendering and the WebXR frame loop</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Cameras">Viewpoints and viewers: Simulating cameras in WebXR </a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Movement_and_motion">Movement, orientation, and motion: A WebXR example</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Bounded_reference_spaces">Using bounded reference spaces</a></dt> - <dd>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.<code>bounded-floor</code><code>bounded-floor</code></dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Performance">WebXR performance guide</a></dt> - <dd>Recommendations and tips to help you optimize the performance of your WebXR application.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Inputs">Inputs and input sources</a></dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebXR_Device_API/Input_profiles">Using WebXR input profiles</a></dt> - <dd>A guide to interpreting the {{Glossary("JSON")}} data provided by the <a href="https://github.com/immersive-web/webxr-input-profiles/tree/master/packages/registry">WebXR Input Profiles Registry</a>, which can be used to determine what options and controls are available on the user's available input devices.</dd> - <dt><a href="/en-US/docs/Web/WebXR_Device_API/Gamepads">Supporting advanced controllers and gamepads in WebXR applications</a></dt> - <dd>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.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName("WebXR")}}</td> - <td>{{Spec2("WebXR")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.Navigator.xr")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> - <li><a href="/en-US/docs/Web/API/WebGL_API">WebGL API</a>: Accelerated 2D and 3D graphics on the web</li> - <li><a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a>: 2D drawing for the web</li> - <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a></li> -</ul> 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' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>Das <strong><code>::placeholder</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-Element</a> stellt den <a href="/en-US/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">Platzhaltertext</a> eines <a href="/en-US/docs/Learn/HTML/Forms">Formular-</a>Elements dar.</p> - -<pre class="brush: css no-line-numbers">::placeholder { - color: blue; - font-size: 1.5em; -}</pre> - -<p>Only the subset of CSS properties that apply to the {{cssxref("::first-line")}} pseudo-element can be used in a rule using <code>::placeholder</code> in its selector.</p> - -<div class="note"> -<p><strong>Note:</strong> In Firefox, the appearance of placeholder text is a translucent gray color by default.</p> -</div> - -<h2 id="Syntax">Syntax</h2> - -{{csssyntax}} - -<h2 id="Beispiele">Beispiele</h2> - -<h3 id="Red_text">Red text</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush:html line-numbers language-html"><input placeholder="Type something here!"></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">input::placeholder { - color: red; - font-size: 1.2em; - font-style: italic; -}</pre> - -<h4 id="Ergebnis">Ergebnis</h4> - -<p>{{EmbedLiveSample("Red_text", 200, 60)}}</p> - -<h3 id="Green_text">Green text</h3> - -<h4 id="HTML_2">HTML</h4> - -<pre class="brush:html line-numbers language-html"><input placeholder="Type something here..."></pre> - -<h4 id="CSS_2">CSS</h4> - -<pre class="brush: css">input::placeholder { - color: green; -} -</pre> - -<h4 id="Ergebnis_2">Ergebnis</h4> - -<p>{{EmbedLiveSample("Green_text", 200, 60)}}</p> - -<h2 id="Accessibility_concerns">Accessibility concerns</h2> - -<h3 id="Color_contrast">Color contrast</h3> - -<h4 id="Contrast_Ratio">Contrast Ratio</h4> - -<p>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.</p> - -<p>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.</p> - -<p>Color contrast ratio is determined by comparing the luminosity of the placeholder text and the input background color values. In order to meet current <a href="https://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guidelines (WCAG)</a>, 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.</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/" rel="noopener">WebAIM: Color Contrast Checker</a></li> - <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN Understanding WCAG, Guideline 1.4 explanations</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h4 id="Usability">Usability</h4> - -<p>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.</p> - -<p>An alternate approach to providing placeholder information is to include it outside of the input in close visual proximity, then use <code><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute">aria-describedby</a></code> to programmatically associate the {{HTMLElement("input")}} with its hint.</p> - -<p>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 <code>aria-describedby</code> 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.</p> - -<pre class="brush:html line-numbers language-html"><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"> -</pre> - -<ul> - <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> -</ul> - -<h3 id="Windows_High_Contrast_Mode">Windows High Contrast Mode</h3> - -<p>Placeholder text will appear with the same styling as user-entered text content when rendered in <a href="/en-US/docs/Web/CSS/-ms-high-contrast">Windows High Contrast Mode</a>. This will make it difficult for some people to determine which content has been entered, and which content is placeholder text.</p> - -<ul> - <li><a href="http://www.gwhitworth.com/blog/2017/04/how-to-use-ms-high-contrast">Greg Whitworth — How to use -ms-high-contrast</a></li> -</ul> - -<h3 id="Labels">Labels</h3> - -<p>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.</p> - -<ul> - <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> - <li><a href="https://www.nngroup.com/articles/form-design-placeholders/">Placeholders in Form Fields Are Harmful — Nielsen Norman Group</a></li> -</ul> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Pseudo-Elements', '#placeholder-pseudo', '::placeholder')}}</td> - <td>{{Spec2('CSS4 Pseudo-Elements')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.selectors.placeholder")}}</p> -</div> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul> - <li>The {{cssxref(":placeholder-shown")}} pseudo-class styles an element that <em>has</em> an active placeholder.</li> - <li>Related HTML elements: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> - <li><a href="/en-US/docs/Learn/HTML/Forms">HTML forms</a></li> -</ul> 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 ---- -<p>{{CSSRef}}{{SeeCompatTable}}</p> - -<h2 id="Summary">Summary</h2> - -<p>The <strong><code>box-decoration-break</code></strong> 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.</p> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css">box-decoration-break: slice; -box-decoration-break: clone; - -box-decoration-break: initial; -box-decoration-break: inherit; -box-decoration-break: unset; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>slice</code></dt> - <dd>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.</dd> - <dt><code>clone</code></dt> - <dd>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") }}: <code>no-repeat</code> may be repeated multiple times.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Inline_box_fragments">Inline box fragments</h3> - -<p>An inline element that contains line-breaks styled with:</p> - -<pre class="brush:css">.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></pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:slice and styles given in the example." src="https://mdn.mozillademos.org/files/8167/box-decoration-break-inline-slice.png" style="height: 177px; width: 191px;"></p> - -<p>Adding <code>box-decoration-break:clone</code> to the above styles:</p> - -<pre class="brush:css"> -webkit-box-decoration-break: clone; - -o-box-decoration-break: clone; - box-decoration-break: clone; -</pre> - -<p>Results in:</p> - -<p><img alt="A screenshot of the rendering of an inline element styled with box-decoration-break:clone and styles given in the example" src="https://mdn.mozillademos.org/files/8169/box-decoration-break-inline-clone.png" style="height: 180px; width: 231px;"></p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8179/box-decoration-break-inline.html">try the two inline examples above</a> in your browser.</p> - -<p>Here's an example of an inline element using a large <code>border-radius</code> value. The second <code>"iM"</code> has a line-break between the <code>"i"</code> and the <code>"M"</code>. For comparison, the first <code>"iM"</code> 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.</p> - -<p><img alt="A screenshot of the rendering of the second inline element example." src="https://mdn.mozillademos.org/files/8189/box-decoration-break-slice-inline-2.png" style="height: 184px; width: 108px;"></p> - -<p><a href="https://mdn.mozillademos.org/files/8191/box-decoration-break-inline-extreme.html">Try the above example</a> in your browser.</p> - -<h3 id="Block_box_fragments">Block box fragments</h3> - -<p>A block element with similar styles as above, first without any fragmentation:</p> - -<p><img alt="A screenshot of the rendering of the block element used in the examples without any fragmentation." src="https://mdn.mozillademos.org/files/8181/box-decoration-break-block.png" style="height: 149px; width: 333px;"></p> - -<p>Fragmenting the above block into three columns results in:</p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:slice." src="https://mdn.mozillademos.org/files/8183/box-decoration-break-block-slice.png" style="height: 55px; max-width: none; width: 1025px;"></p> - -<p>Note that stacking these pieces vertically will result in the non-fragmented rendering.</p> - -<p>Now the same example styled with <code>box-decoration-break:clone</code></p> - -<p><img alt="A screenshot of the rendering of the fragmented block used in the examples styled with box-decoration-break:clone." src="https://mdn.mozillademos.org/files/8185/box-decoration-break-block-clone.png" style="height: 61px; max-width: none; width: 1023px;"></p> - -<p>Note here that each fragment has an identical replicated border, box-shadow and background.</p> - -<p>You can <a href="https://mdn.mozillademos.org/files/8187/box-decoration-break-block.html">try the block examples above</a> in your browser.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Fragmentation', '#break-decoration', 'box-decoration-break') }}</td> - <td>{{ Spec2('CSS3 Fragmentation') }}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -{{Compat("css.properties.box-decoration-break")}} - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li> -</ul> 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 ---- -<div>{{cssref}}</div> - -<p>The size and position of an element are often impacted by its <strong>containing block</strong>. Most often, the containing block is the <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model#content-area">content area</a> of an element's nearest <a href="/en-US/docs/Web/HTML/Block-level_elements">block-level</a> ancestor, but this is not always the case. <span class="seoSummary">In this article, we examine the factors that determine an element's containing block.</span></p> - -<p>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:</p> - -<ol start="1"> - <li>Content area</li> - <li>Padding area</li> - <li>Border area</li> - <li>Margin area</li> -</ol> - -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> - -<p>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.</p> - -<h2 id="Effects_of_the_containing_block">Effects of the containing block</h2> - -<p>Before learning what determines the containing block of an element, it's useful to know why it matters in the first place.</p> - -<p>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 <code>absolute</code> or <code>fixed</code>) are computed from the element's containing block.</p> - -<h2 id="Identifying_the_containing_block">Identifying the containing block</h2> - -<p>The process for identifying the containing block depends entirely on the value of the element's {{cssxref("position")}} property:</p> - -<ol start="1"> - <li>If the <code>position</code> property is <code><strong>static</strong></code>, <code><strong>relative</strong></code>, or <strong><code>sticky</code></strong>, the containing block is formed by the edge of the <em>content box</em> of the nearest ancestor element that is either <strong>a block container</strong> (such as an inline-block, block, or list-item element) or <strong>establishes a formatting context</strong> (such as a table container, flex container, grid container, or the block container itself).</li> - <li>If the <code>position</code> property is <code><strong>absolute</strong></code>, the containing block is formed by the edge of the <em>padding box</em> of the nearest ancestor element that has a <code>position</code> value other than <code>static</code> (<code>fixed</code>, <code>absolute</code>, <code>relative</code>, or <code>sticky</code>).</li> - <li>If the <code>position</code> property is <code><strong>fixed</strong></code>, 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).</li> - <li>If the <code>position</code> property is <code><strong>absolute</strong></code> or <code><strong>fixed</strong></code>, the containing block may also be formed by the edge of the <em>padding box</em> of the nearest ancestor element that has the following: - <ol start="1"> - <li>A {{cssxref("transform")}} or {{cssxref("perspective")}} value other than <code>none</code></li> - <li>A {{cssxref("will-change")}} value of <code>transform</code> or <code>perspective</code></li> - <li>A {{cssxref("filter")}} value other than <code>none</code> or a <code>will-change</code> value of <code>filter</code> (only works on Firefox).</li> - <li>A {{cssxref("contain")}} value of <code>paint</code> (e.g. <code>contain: paint;</code>)</li> - </ol> - </li> -</ol> - -<div class="note"> -<p><strong>Note:</strong> The containing block in which the root element ({{HTMLElement("html")}}) resides is a rectangle called the <strong>initial containing block</strong>. It has the dimensions of the viewport (for continuous media) or the page area (for paged media).</p> -</div> - -<h2 id="Calculating_percentage_values_from_the_containing_block">Calculating percentage values from the containing block</h2> - -<p>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 <strong>box model properties</strong> and <strong>offset properties</strong>:</p> - -<ol start="1"> - <li>The {{cssxref("height")}}, {{cssxref("top")}}, and {{cssxref("bottom")}} properties compute percentage values from the <code>height</code> of the containing block.</li> - <li>The {{cssxref("width")}}, {{cssxref("left")}}, {{cssxref("right")}}, {{cssxref("padding")}}, and {{cssxref("margin")}} properties compute percentage values from the <code>width</code> of the containing block.</li> -</ol> - -<h2 id="Some_examples">Some examples</h2> - -<p>The HTML code for all our examples is:</p> - -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> - -<p>Only the CSS is altered in each instance below.</p> - -<h3 id="Example_1">Example 1</h3> - -<p>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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">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; -} -</pre> - -<p>{{EmbedLiveSample('Example_1','100%','300')}}</p> - -<h3 id="Example_2">Example 2</h3> - -<p>In this example, the paragraph's containing block is the {{HTMLElement("body")}} element, because <code><section></code> is not a block container (because of <code>display: inline</code>) and doesn’t establish a formatting context.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">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; -} -</pre> - -<p>{{EmbedLiveSample('Example_2','100%','300')}}</p> - -<h3 id="Example_3">Example 3</h3> - -<p>In this example, the paragraph's containing block is <code><section></code> because the latter's <code>position</code> is <code>absolute</code>. The paragraph's percentage values are affected by the <code>padding</code> of its containing block, though if the containing block's {{cssxref("box-sizing")}} value were <code>border-box</code> this would not be the case.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">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; -} -</pre> - -<p>{{EmbedLiveSample('Example_3','100%','300')}}</p> - -<h3 id="Example_4">Example 4</h3> - -<p>In this example, the paragraph's <code>position</code> is <code>fixed</code>, 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.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">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; -} -</pre> - -<p>{{EmbedLiveSample('Example_4','100%','300')}}</p> - -<h3 id="Example_5">Example 5</h3> - -<p>In this example, the paragraph's <code>position</code> is <code>absolute</code>, so its containing block is <code><section></code>, which is the nearest ancestor with a {{cssxref("transform")}} property that isn't <code>none</code>.</p> - -<div class="hidden"> -<pre class="brush: html notranslate"><body> - <section> - <p>This is a paragraph!</p> - </section> -</body> -</pre> -</div> - -<pre class="brush: css notranslate">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; -} -</pre> - -<p>{{EmbedLiveSample('Example_5','100%','300')}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> - <li>The {{cssxref("all")}} property resets all CSS declarations to a given known state</li> -</ul> 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 ---- -<div>{{CSSRef}}</div> - -<p class="summary"><span class="seoSummary">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.</span> Below is an overview of most of these data types. Refer to the page for each value type for more detailed information.</p> - -<h2 id="Textual_data_types">Textual data types</h2> - -<ul> - <li>{{cssxref("<custom-ident>")}}</li> - <li>Pre-defined keywords as an <code><ident></code></li> - <li>{{cssxref("<string>")}}</li> - <li>{{cssxref("<url>")}}</li> -</ul> - -<p>Text data types are either <code><string></code>, a quoted series of characters, or an <code><ident></code>, a "CSS Identifier" which is an unquoted string. A <code><string></code> must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as <code><ident></code> or <code><custom-ident></code>, must be unquoted.</p> - -<p>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.</p> - -<p>When both quoted and unquoted user defined text values are permitted, the specification will list <code><custom-ident> | <string></code>, meaning quotes are optional, such as is the case with animation names:</p> - -<pre class="brush: css notranslate">@keyframe validIdent { - /* keyframes go here */ -} -@keyframe 'validString' { - /* keyframes go here */ -}</pre> - -<p>Some text values are not valid if encompassed in quotes. For example, the value of {{cssxref("grid-area")}} can be a <code><custom-ident></code>, so if we had a grid area named <code>content</code> we would use it without quotes:</p> - -<pre class="brush: css notranslate">.item { - grid-area: content; -} -</pre> - -<p>In comparison, a data type that is a {{cssxref("<string>")}}, such as a string value of the {{cssxref("content")}} property, must be quoted:</p> - -<pre class="brush: css notranslate">.item::after { - content: "This is my content."; -} -</pre> - -<p>While you can generally create any name you want, including using emojis, the identifier can't be <code>none</code>, <code>unset</code>, <code>initial</code>, or <code>inherit</code>, 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.</p> - -<h3 id="Pre-defined_keyword_values">Pre-defined keyword values</h3> - -<p>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.</p> - -<p>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")}}.</p> - -<pre class="syntaxbox notranslate">left <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> right <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> none <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-start <a href="/en-US/docs/CSS/Value_definition_syntax#Single_bar" title="Single bar: exactly one of the entities must be present">|</a> inline-end</pre> - -<p>Such values are used without quotes:</p> - -<pre class="brush: css notranslate"><code>.box { - float: left; -} -</code></pre> - -<h3 id="CSS-wide_values">CSS-wide values</h3> - -<p>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.</p> - -<p>The <code>initial</code> keyword represents the value specified as the property’s initial value. The <code>inherit</code> keyword represents the computed value of the property on the element’s parent, provided it is inherited.</p> - -<p>The <code>unset</code> keyword acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not.</p> - -<p>A fourth value of {{cssxref("revert")}} was added in the Cascade Level 4 specification, but it does not currently have good browser support.</p> - -<h3 id="URLs">URLs</h3> - -<p>A {{cssxref("<url>")}} type uses functional notation, which accepts a <code><string></code> 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.</p> - -<pre class="brush: css notranslate"><code>.box { - background-image: url("images/my-background.png"); -}</code> - -<code>.box { - background-image: url("https://www.exammple.com/images/my-background.png"); -}</code> -</pre> - -<p>The parameter for <code>url()</code> can be either quoted or unquoted. If unquoted, it is parsed as a <code><url-token></code>, which has extra requirements including the escaping of certain characters. See {{cssxref("<url>")}} for more information.</p> - -<h2 id="Numeric_data_types">Numeric data types</h2> - -<ul> - <li>{{cssxref("<integer>")}}</li> - <li>{{cssxref("<number>")}}</li> - <li>{{cssxref("<dimension>")}}</li> - <li>{{cssxref("<percentage>")}}</li> -</ul> - -<h3 id="Integers">Integers</h3> - -<p>An integer is one or more decimal digits, <code>0</code> through <code>9</code>, such as <code>1024</code> or <code>-55</code>. An integer may be preceded by a <code>+</code> or <code>-</code> symbol, with no space between the symbol and the integer.</p> - -<h3 id="Numbers">Numbers</h3> - -<p>A {{cssxref("<number>")}} represents a real number, which may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code> or <code>-1.2</code>. Numbers may also be preceded by a <code>+</code> or <code>-</code> symbol.</p> - -<h3 id="Dimensions">Dimensions</h3> - -<p>A {{cssxref("<dimension>")}} is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>100ms</code>, or <code>10px</code>. 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. <code>1 cm</code> is not valid.</p> - -<p>CSS uses dimensions to specify:</p> - -<ul> - <li>{{cssxref("<length>")}} (Distance units)</li> - <li>{{cssxref("<angle>")}}</li> - <li>{{cssxref("<time>")}}</li> - <li>{{cssxref("<frequency>")}}</li> - <li>{{cssxref("<resolution>")}}</li> -</ul> - -<p>These are all covered in subsections below.</p> - -<h4 id="Distance_units">Distance units</h4> - -<p>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.</p> - -<p>Relative length units specify a length in relation to something else. For example, <code>em</code> is relative to the font size on the element and <code>vh</code> is relative to the viewport height.</p> - -<table class="standard-table"> - <caption> - <h4 id="Relative_length_units">Relative length units</h4> - </caption> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Relative to</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>em</code></td> - <td>Font size of the element.</td> - </tr> - <tr> - <td><code>ex</code></td> - <td>x-height of the element's font.</td> - </tr> - <tr> - <td><code>cap</code></td> - <td>Cap height (the nominal height of capital letters) of the element's font.</td> - </tr> - <tr> - <td><code>ch</code></td> - <td>Average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph.</td> - </tr> - <tr> - <td><code>ic</code></td> - <td>Average character advance of a full width glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph.</td> - </tr> - <tr> - <td><code>rem</code></td> - <td>Font size of the root element.</td> - </tr> - <tr> - <td><code>lh</code></td> - <td>Line height of the element.</td> - </tr> - <tr> - <td><code>rlh</code></td> - <td>Line height of the root element.</td> - </tr> - <tr> - <td><code>vw</code></td> - <td>1% of viewport's width.</td> - </tr> - <tr> - <td><code>vh</code></td> - <td>1% of viewport's height.</td> - </tr> - <tr> - <td><code>vi</code></td> - <td>1% of viewport's size in the root element's inline axis.</td> - </tr> - <tr> - <td><code>vb</code></td> - <td>1% of viewport's size in the root element's block axis.</td> - </tr> - <tr> - <td><code>vmin</code></td> - <td>1% of viewport's smaller dimension.</td> - </tr> - <tr> - <td><code>vmax</code></td> - <td>1% of viewport's larger dimension.</td> - </tr> - </tbody> -</table> - -<p>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, <code>mm</code> is a physical millimeter, 1/10th of a centimeter.</p> - -<table class="standard-table"> - <caption> - <h4 id="Absolute_length_units">Absolute length units</h4> - </caption> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Equivalent to</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>cm</code></td> - <td>Centimeters</td> - <td>1cm = 96px/2.54</td> - </tr> - <tr> - <td><code>mm</code></td> - <td>Millimeters</td> - <td>1mm = 1/10th of 1cm</td> - </tr> - <tr> - <td><code>Q</code></td> - <td>Quarter-millimeters</td> - <td>1Q = 1/40th of 1cm</td> - </tr> - <tr> - <td><code>in</code></td> - <td>Inches</td> - <td>1in = 2.54cm = 96px</td> - </tr> - <tr> - <td><code>pc</code></td> - <td>Picas</td> - <td>1pc = 1/16th of 1in</td> - </tr> - <tr> - <td><code>pt</code></td> - <td>Points</td> - <td>1pt = 1/72th of 1in</td> - </tr> - <tr> - <td><code>px</code></td> - <td>Pixels</td> - <td>1px = 1/96th of 1in</td> - </tr> - </tbody> -</table> - -<p>When including a length value, if the length is <code>0</code>, 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.</p> - -<h4 id="Angle_units">Angle units</h4> - -<p>Angle values are represented by the type {{cssxref("<angle>")}} and accept the following values:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>deg</code></td> - <td>Degrees</td> - <td>There are 360 degrees in a full circle.</td> - </tr> - <tr> - <td><code>grad</code></td> - <td>Gradians</td> - <td>There are 400 gradians in a full circle.</td> - </tr> - <tr> - <td><code>rad</code></td> - <td>Radians</td> - <td>There are 2π radians in a full circle.</td> - </tr> - <tr> - <td><code>turn</code></td> - <td>Turns</td> - <td>There is 1 turn in a full circle.</td> - </tr> - </tbody> -</table> - -<h4 id="Time_units">Time units</h4> - -<p>Time values are represented by the type {{cssxref("<time>")}}. When including a time value, the unit identifier -- the <code>s</code> or <code>ms</code> -- is required. It accepts the following values.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>s</code></td> - <td>Seconds</td> - <td></td> - </tr> - <tr> - <td><code>ms</code></td> - <td>Milliseconds</td> - <td>There are 1,000 milliseconds in a second.</td> - </tr> - </tbody> -</table> - -<h4 id="Frequency_units">Frequency units</h4> - -<p>Frequency values are represented by the type {{cssxref("<frequency>")}}. It accepts the following values.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Name</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>Hz</code></td> - <td>Hertz</td> - <td>Represents the number of occurrences per second.</td> - </tr> - <tr> - <td><code>kHz</code></td> - <td>KiloHertz</td> - <td>A kiloHertz is 1000 Hertz.</td> - </tr> - </tbody> -</table> - -<p><code>1Hz</code>, which can also be written as <code>1hz</code> or <code>1HZ</code>, is one cycle per second.</p> - -<h4 id="Resolution_unit">Resolution unit</h4> - -<p>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:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Unit</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>dpi</code></td> - <td>Dots per inch.</td> - </tr> - <tr> - <td><code>dpcm</code></td> - <td>Dots per centimetre.</td> - </tr> - <tr> - <td><code>dppx</code>, <code>x</code></td> - <td>Dots per px unit.</td> - </tr> - </tbody> -</table> - -<h3 id="Percentages">Percentages</h3> - -<p>A {{cssxref("<percentage>")}} is a type that represents a fraction of some other value.</p> - -<p>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.</p> - -<p>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:</p> - -<pre class="brush: css notranslate">.box { - width: 50%; -}</pre> - -<h3 id="Mixing_percentages_and_dimensions">Mixing percentages and dimensions</h3> - -<p>Some properties accept a dimension that could be either one of two types, for example a <code><length></code> <strong>or</strong> a <code><percentage></code>. 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:</p> - -<ul> - <li>{{cssxref("<frequency-percentage>")}}</li> - <li>{{cssxref("<angle-percentage>")}}</li> - <li>{{cssxref("<time-percentage>")}}</li> -</ul> - -<h3 id="Special_data_types_defined_in_other_specs">Special data types (defined in other specs)</h3> - -<ul> - <li>{{cssxref("<color>")}}</li> - <li>{{cssxref("<image>")}}</li> - <li>{{cssxref("<position>")}}</li> -</ul> - -<h4 id="Color">Color</h4> - -<p>The {{cssxref("<color>")}} value specifies the color of an element feature (e.g. it's background color), and is defined in the <a href="https://drafts.csswg.org/css-color-3/">CSS Color Module</a>.</p> - -<h4 id="Image">Image</h4> - -<p>The {{cssxref("<image>")}} value specifies all the different types of image that can be used in CSS, and is defined in the <a href="https://www.w3.org/TR/css-images-4/">CSS Image Values and Replaced Content Module</a>.</p> - -<h4 id="Position">Position</h4> - -<p>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 <a href="https://www.w3.org/TR/css-backgrounds-3/">CSS Backgrounds and Borders specification</a>.</p> - -<h3 id="Functional_notation">Functional notation</h3> - -<ul> - <li>{{cssxref("calc()")}}</li> - <li>{{cssxref("min", "min()")}}</li> - <li>{{cssxref("max", "max()")}}</li> - <li>{{cssxref("clamp", "clamp()")}}</li> - <li>{{cssxref("toggle", "toggle()")}}</li> - <li>{{cssxref("attr", "attr()")}}</li> -</ul> - -<p><a href="/en-US/docs/Web/CSS/CSS_Functionals">Functional notation</a> 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 <code>(</code> followed by the argument(s) to the notation followed by a right parenthesis <code>)</code>. Functions can take multiple arguments, which are formatted similarly to a CSS property value.</p> - -<p>White space is allowed, but optional inside the parentheses. (But see notes regarding whitespace within pages for <code>min()</code>, <code>max()</code> and <code>clamp()</code> functions.)</p> - -<p>Some legacy functional notations such as <code>rgba()</code> 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.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("CSS4 Values")}}</td> - <td>{{Spec2("CSS4 Values")}}</td> - <td>Adds the <code>vi</code>, <code>vb</code>, <code>ic</code>, <code>cap</code>, <code>lh</code> and <code>rlh</code> units.<br> - Adds the <code>min()</code>, <code>max()</code> and <code>clamp()</code> functional notation<br> - Adds <code>toggle()</code></td> - </tr> - <tr> - <td>{{SpecName("CSS3 Values")}}</td> - <td>{{Spec2("CSS3 Values")}}</td> - <td>Adds <code>calc()</code>, <code>ch</code>, <code>rem</code>, <code>vw</code>, <code>vw</code>, <code>vmin</code>,<code> vmax</code>, <code>Q</code></td> - </tr> - <tr> - <td>{{SpecName("CSS4 Colors")}}</td> - <td>{{Spec2("CSS4 Colors")}}</td> - <td>Adds commaless syntaxes for the <code>rgb()</code>, <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions. Allows alpha values in <code>rgb()</code> and <code>hsl()</code>, turning <code>rgba()</code> and <code>hsla()</code> into (deprecated) aliases for them.<br> - Adds color keyword <code>rebeccapurple</code>.<br> - Adds 4- and 8-digit hex color values, where the last digit(s) represents the alpha value.<br> - Adds <code>hwb()</code>, <code>device-cmyk()</code>, and <code>color()</code> functions.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Colors")}}</td> - <td>{{Spec2("CSS3 Colors")}}</td> - <td>Deprecates system-colors. Adds SVG colors. Adds the <code>rgba()</code>, <code>hsl()</code>, and <code>hsla()</code> functions.</td> - </tr> - <tr> - <td>{{SpecName("CSS4 Images")}}</td> - <td>{{Spec2("CSS4 Images")}}</td> - <td> - <p>Adds <code>element()</code>, <code>image()</code>, <code>image-set()</code>, <code>conic-gradient()</code></p> - </td> - </tr> - <tr> - <td>{{SpecName("CSS3 Images")}}</td> - <td>{{Spec2("CSS3 Images")}}</td> - <td>Initial definition of image.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1")}}</td> - <td>{{Spec2("CSS1")}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Types">CSS Basic Data Types</a></li> - <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">Introduction to CSS: Values and Units </a></li> -</ul> 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 ---- -<div>{{cssref}}</div> - -<p>The {{Glossary("DOM")}} provides features that can test the results of a <a href="/en-US/docs/Web/CSS/Media_Queries">media query</a> programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a <code>MediaQueryList</code> object, you can check the result of the query or receive notifications when the result changes.</p> - -<h2 id="Creating_a_media_query_list">Creating a media query list</h2> - -<p>Before you can evaluate the results of a media query, you need to create the <code>MediaQueryList</code> object representing the query. To do this, use the {{domxref("window.matchMedia")}} method.</p> - -<p>For example, to set up a query list that determines if the device is in landscape or portrait orientation:</p> - -<pre class="brush: js notranslate">const mediaQueryList = window.matchMedia("(orientation: portrait)"); -</pre> - -<h2 id="Checking_the_result_of_a_query">Checking the result of a query</h2> - -<p>Once you've created your media query list, you can check the result of the query by looking at the value of its <code>matches</code> property:</p> - -<pre class="brush: js notranslate">if (mediaQueryList.matches) { - /* The viewport is currently in portrait orientation */ -} else { - /* The viewport is not currently in portrait orientation, therefore landscape */ -} -</pre> - -<h2 id="Receiving_query_notifications">Receiving query notifications</h2> - -<p>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 <a href="/en-US/docs/Web/API/EventTarget/addEventListener">listener</a> than to poll the query's result. To do this, call the <code>addListener()</code> 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 <code>true</code> to <code>false</code>):</p> - -<pre class="brush: js notranslate">// 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); -</pre> - -<p>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.</p> - -<p>The <code>handleOrientationChange()</code> function would look at the result of the query and handle whatever we need to do on an orientation change:</p> - -<pre class="brush: js notranslate">function handleOrientationChange(evt) { - if (evt.matches) { - /* The viewport is currently in portrait orientation */ - } else { - /* The viewport is currently in landscape orientation */ - } -} -</pre> - -<p>Above, we define the parameter as <code>evt</code> — an event object. This makes sense because <a href="/en-US/docs/Web/API/MediaQueryList#Browser_compatibility">newer implementations of <code>MediaQueryList</code></a> handle event listeners in a standard way. They no longer use the unusual {{domxref("MediaQueryListListener")}} mechanism, but a standard event listener setup, passing an <a href="/en-US/docs/Web/API/Event">event object</a> of type {{domxref("MediaQueryListEvent")}} as the argument to the callback function.</p> - -<p>This event object also includes the {{domxref("MediaQueryListEvent.media","media")}} and {{domxref("MediaQueryListEvent.matches","matches")}} properties, so you can query these features of the <code>MediaQueryList</code> by directly accessing it, or accessing the event object.</p> - -<h2 id="Ending_query_notifications">Ending query notifications</h2> - -<p>To stop receiving notifications about changes to the value of your media query, call <code>removeListener()</code> on the <code>MediaQueryList</code>, passing it the name of the previously-defined callback function:</p> - -<pre class="brush: js notranslate">mediaQueryList.removeListener(handleOrientationChange); -</pre> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<h3 id="MediaQueryList_interface"><code>MediaQueryList</code> interface</h3> - - - -<p>{{Compat("api.MediaQueryList")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Media_queries">Media queries</a></li> - <li>{{domxref("window.matchMedia()")}}</li> - <li>{{domxref("MediaQueryList")}}</li> - <li>{{domxref("MediaQueryListEvent")}}</li> -</ul> 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 ---- -<div>{{cssref}}</div> - -<p>A <strong>media query</strong> 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 <a href="/en-US/docs/CSS/CSS3" title="/en-US/docs/CSS/CSS3">CSS3</a>, let the presentation of content be tailored to a specific range of output devices without having to change the content itself.</p> - -<h2 id="Syntax">Syntax</h2> - -<p>Media queries consist of a <a class="internal" href="/en-US/docs/CSS/@media" title="/en-US/docs/CSS/@media">media type</a> 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 <strong>and</strong> all expressions in the media query are true.</p> - -<pre class="brush: html notranslate"><!-- 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></pre> - -<p>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 <code><link></code> tags <a href="http://scottjehl.github.com/CSS-Download-Tests/" title="http://scottjehl.github.com/CSS-Download-Tests/">will still download</a> even if their media queries would return false (they will not apply, however).</p> - -<p>Unless you use the <code>not</code> or <code>only</code> operators, the media type is optional and the <code>all</code><span style="line-height: 1.572;"> </span><span style="line-height: 1.572;">type will be implied</span><span style="font-family: courier new,andale mono,monospace; line-height: normal;">.</span></p> - -<h3 id="Logical_operators">Logical operators</h3> - -<p>You can compose complex media queries using logical operators, including <code>not</code>, <code>and</code>, and <code>only</code>. The <code>and</code> operator is used for combining multiple <a href="#Media_features" title="#Media_features">media features</a> together into a single media query, requiring each chained feature to return true in order for the query to be true. The <code>not</code> operator is used to negate an entire media query. The <code>only</code> 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 <code>not</code> or <code>only</code> operators, you <em>must</em> specify an explicit media type.</p> - -<p>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 <code>or</code> operator.</p> - -<h4 id="and">and</h4> - -<p>The <code>and</code> 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 <code>all</code> media type, could look like this:</p> - -<pre class="brush: css notranslate">@media (min-width: 700px) { ... }</pre> - -<p>If, however, you wanted this to apply only if the display is in landscape, you could use an <code>and</code> operator to chain the media features together.</p> - -<pre class="brush: css notranslate">@media (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>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 <code>and</code> operator.</p> - -<pre class="brush: css notranslate">@media tv and (min-width: 700px) and (orientation: landscape) { ... }</pre> - -<p>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.</p> - -<h4 id="comma-separated_lists">comma-separated lists</h4> - -<p>Comma-separated lists behave like the logical operator <code>or</code> 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.</p> - -<p>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:</p> - -<pre class="brush: css notranslate">@media (min-width: 700px), handheld and (orientation: landscape) { ... }</pre> - -<p>Above, if I were on a <code>screen</code> device with a viewport width of 800px, the media statement would return true because the first part, interpreted as <code>@media all and (min-width: 700px)</code> would apply to my device and therefore return true, despite the fact that my <code>screen</code> device would fail the <code>handheld</code> media type check in the second media query. Likewise, if I were on a <code>handheld</code> 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.</p> - -<h4 id="not">not</h4> - -<p>The <code>not</code> keyword applies to the whole media query and returns true if the media query would otherwise return false (such as <code>monochrome</code> on a color display or a screen width of 600px with a <code>min-width: 700px</code> feature query). A <code>not</code> 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 <code>not</code> keyword cannot be used to negate an individual feature query, only an entire media query. <span style="line-height: 1.572;">For example, the </span><code style="font-size: 14px;">not</code><span style="line-height: 1.572;"> is evaluated last in the following query:</span></p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media not all and (monochrome) { ... } -</pre> - -<p>This means that the query is evaluated like this:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media not (all and (monochrome)) { ... } -</pre> - -<p>... rather than like this:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media (not all) and (monochrome) { ... }</pre> - -<p>As another example, look at the following media query:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media not screen and (color), print and (color) -</pre> - -<p>It is evaluated like this:</p> - -<pre class="brush: css notranslate" style="font-size: 14px;">@media (not (screen and (color))), print and (color)</pre> - -<h4 id="only">only</h4> - -<p><span style="line-height: 21px;">The </span><code style="font-size: 14px;">only</code><span style="line-height: 21px;"> keyword prevents older browsers that do not support media queries with media features from applying the given styles:</span></p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="only screen and (color)" href="example.css" /> -</pre> - -<h3 id="Pseudo-BNF_for_those_of_you_that_like_that_kind_of_thing">Pseudo-BNF (for those of you that like that kind of thing)</h3> - -<pre class="notranslate">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</pre> - -<p>Media queries are case insensitive. Media queries involving unknown media types are always false.</p> - -<div class="note"><strong>Note:</strong> Parentheses are required around expressions; failing to use them is an error.</div> - -<h2 id="Media_features">Media features</h2> - -<p>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.</p> - -<div class="note"><strong>Note:</strong> 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.</div> - -<h3 id="color">color</h3> - -<p><strong>Value:</strong> {{cssxref("<color>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per color component of the output device. If the device is not a color device, this value is zero.</p> - -<div class="note"><strong>Note:</strong> 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.</div> - -<h4 id="Examples">Examples</h4> - -<p>To apply a style sheet to all color devices:</p> - -<pre class="brush: css notranslate">@media all and (color) { ... } -</pre> - -<p>To apply a style sheet to devices with at least 4 bits per color component:</p> - -<pre class="brush: css notranslate">@media all and (min-color: 4) { ... } -</pre> - -<h3 id="color-index">color-index</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of entries in the color look-up table for the output device.</p> - -<h4 id="Examples_2">Examples</h4> - -<p>To indicate that a style sheet should apply to all devices using indexed color, you can do:</p> - -<pre class="brush: css notranslate">@media all and (color-index) { ... } -</pre> - -<p>To apply a style sheet to indexed color devices with at least 256 colors:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="all and (min-color-index: 256)" href="http://foo.bar.com/stylesheet.css" /> -</pre> - -<h3 id="aspect-ratio">aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>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).</p> - -<h4 id="Example">Example</h4> - -<p>The following selects a special style sheet to use for when the display area is at least as wide as it is high.</p> - -<pre class="brush: css notranslate">@media screen and (min-aspect-ratio: 1/1) { ... }</pre> - -<p>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.</p> - -<h3 id="device-aspect-ratio">device-aspect-ratio</h3> - -<p><strong>Value:</strong> {{cssxref("<ratio>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>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).</p> - -<h4 id="Example_2">Example</h4> - -<p>The following selects a special style sheet to use for widescreen displays.</p> - -<pre class="brush: css notranslate">@media screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10) { ... }</pre> - -<p>This selects the style when the aspect ratio is either 16:9 or 16:10.</p> - -<h3 id="device-height">device-height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the height of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_3">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels long, you can use this:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="screen and (max-device-height: 799px)" /> -</pre> - -<h3 id="device-width">device-width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).</p> - -<h4 id="Example_4">Example</h4> - -<p>To apply a style sheet to a document when displayed on a screen that is less than 800 pixels wide, you can use this:</p> - -<pre class="brush: html notranslate" style="font-size: 14px;"><link rel="stylesheet" media="screen and (max-device-width: 799px)" /></pre> - -<h3 id="grid">grid</h3> - -<p><strong>Value:</strong> <code><mq-boolean></code> which is an {{cssxref("<integer>")}} that can only have the <code>0</code> and <code>1</code> value.<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> all<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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.</p> - -<h4 id="Example_5">Example</h4> - -<p>To apply a style to handheld devices with a 15-character or narrower display:</p> - -<pre class="brush: css notranslate">@media handheld and (grid) and (max-width: 15em) { ... } -</pre> - -<div class="note"><strong>Note:</strong> 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.</div> - -<h3 id="height">height</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>height</code> 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).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h3 id="monochrome">monochrome</h3> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Indicates the number of bits per pixel on a monochrome (greyscale) device. If the device isn't monochrome, the device's value is 0.</p> - -<h4 id="Examples_3">Examples</h4> - -<p>To apply a style sheet to all monochrome devices:</p> - -<pre class="brush: css notranslate">@media all and (monochrome) { ... } -</pre> - -<p>To apply a style sheet to monochrome devices with at least 8 bits per pixel:</p> - -<pre class="brush: css notranslate">@media all and (min-monochrome: 8) { ... } -</pre> - -<h3 id="orientation">orientation</h3> - -<p><strong>Value:</strong> <code>landscape</code> | <code>portrait</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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.</p> - -<h4 id="Example_6">Example</h4> - -<p>To apply a style sheet only in portrait orientation:</p> - -<pre class="brush: css notranslate">@media all and (orientation: portrait) { ... }</pre> - -<div class="note"><strong>Note:</strong> 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.</div> - -<h3 id="resolution">resolution</h3> - -<p><strong>Value:</strong> {{cssxref("<resolution>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Media/Bitmap", "bitmap")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>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).</p> - -<h4 id="Example_7">Example</h4> - -<p>To apply a style sheet to devices with at least 300 dots per inch of resolution:</p> - -<pre class="brush: css notranslate">@media print and (min-resolution: 300dpi) { ... } -</pre> - -<p>To replace the old <span style="font-family: courier new,andale mono,monospace; line-height: normal;">(min-device-pixel-ratio: 2) </span>syntax:</p> - -<pre class="brush: css notranslate">@media screen and (min-resolution: 2dppx) { ... }</pre> - -<h3 id="scan">scan</h3> - -<p><strong>Value:</strong> <code>progressive</code> | <code>interlace</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/TV")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Describes the scanning process of television output devices.</p> - -<h4 id="Example_8">Example</h4> - -<p>To apply a style sheet only to progressive scanning televisions:</p> - -<pre class="brush: css notranslate">@media tv and (scan: progressive) { ... } -</pre> - -<h3 id="width">width</h3> - -<p><strong>Value:</strong> {{cssxref("<length>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}, {{cssxref("Medien/Taktil")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>The <code>width</code> 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).</p> - -<div class="note"><strong>Note:</strong> As the user resizes the window, Firefox switches style sheets as appropriate based on media queries using the <code>width</code> and <code>height</code> media features.</div> - -<h4 id="Examples_4">Examples</h4> - -<p>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:</p> - -<pre class="brush: css notranslate">@media handheld and (min-width: 20em), screen and (min-width: 20em) { ... } -</pre> - -<p>This media query specifies a style sheet that applies to printed media wider than 8.5 inches:</p> - -<pre class="brush: html notranslate"><link rel="stylesheet" media="print and (min-width: 8.5in)" - href="http://foo.com/mystyle.css" /> -</pre> - -<p>This query specifies a style sheet that is usable when the viewport is between 500 and 800 pixels wide:</p> - -<pre class="brush: css notranslate">@media screen and (min-width: 500px) and (max-width: 800px) { ... } -</pre> - -<h2 id="Mozilla-specific_media_features">Mozilla-specific media features</h2> - -<p>Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features.</p> - -<p>{{ h3_gecko_minversion("-moz-images-in-menus", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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 <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-mac-graphite-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(mac-graphite-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-maemo-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Maemo with the original theme, this is 1; if it's using the newer Fremantle theme, this is 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(maemo-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-device-pixel-ratio", "2.0") }} {{ deprecated_inline("gecko&16") }}</p> - -<p><strong>Value:</strong> {{cssxref("<number>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> yes</p> - -<p>Gives the number of device pixels per CSS pixel.</p> - -<div class="geckoVersionNote"> -<p><strong>Do not use this feature. </strong></p> - -<p>Use the <code>resolution</code> feature with the <code>dppx</code> unit instead.<br> - <br> - <code>-moz-device-pixel-ratio</code> may be used for compatibility with Firefox older than 16 and <code>-webkit-device-pixel-ratio</code> with WebKit-based browsers that do not support <code>dppx</code>.</p> - -<p>Example:</p> - -<pre class="notranslate">@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 */ </pre> - -<p>See this <a href="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/" title="http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/">CSSWG article</a> for compatibility good practices regarding <code>resolution</code> and <code>dppx</code>.</p> -</div> - -<div class="note"><strong>Note</strong>: This media feature is also implemented by Webkit and by <a href="https://msdn.microsoft.com/en-us/library/ie/dn760733(v=vs.85).aspx">IE 11 for Windows Phone 8.1</a> as <span style="font-family: courier new;">-webkit-device-pixel-ratio</span>. The min and max prefixes as implemented by Gecko are named <span style="font-family: courier new;">min--moz-device-pixel-ratio</span> and <span style="font-family: courier new;">max--moz-device-pixel-ratio</span>; but the same prefixes as implemented by Webkit are named <span style="font-family: courier new;">-webkit-min-device-pixel-ratio</span> and <span style="font-family: courier new;">-webkit-max-device-pixel-ratio</span>.</div> - -<p>{{ h3_gecko_minversion("-moz-os-version", "25.0") }}</p> - -<p><strong>Value:</strong> <code>windows-xp</code> | <code>windows-vista</code> | <code>windows-win7</code> | <code>windows-win8 | windows-win10</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which operating system version is currently being used. Currently only implemented on Windows. Possible values are:</p> - -<ul> - <li><code>windows-xp</code></li> - <li><code>windows-vista</code></li> - <li><code>windows-win7</code></li> - <li><code>windows-win8</code></li> - <li><code>windows-win10</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current operating system version.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-end-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the end of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-end-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-backward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a backward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-backward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-start-forward", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device's user interface displays a forward arrow button at the beginning of scrollbars, this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-start-forward)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-scrollbar-thumb-proportional", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(scrollbar-thumb-proportional)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-touch-enabled", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the device supports touch events (for a touch screen), this is 1. Otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(touch-enabled)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<h4 id="Example_9">Example</h4> - -<p>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.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-classic", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows unthemed (in classic mode instead of using uxtheme), this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-classic)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-compositor", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>If the user is using Windows with the DWM compositor, this is 1; otherwise it's 0.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-compositor)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-default-theme", "1.9.2") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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.</p> - -<p>This corresponds to the {{ cssxref(":-moz-system-metric(windows-default-theme)") }} CSS <a href="/en-US/docs/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a>.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-glass", "21.0") }}</p> - -<p><strong>Value:</strong> {{cssxref("<integer>")}}<br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>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.</p> - -<p>{{ h3_gecko_minversion("-moz-windows-theme", "2.0") }}</p> - -<p><strong>Value:</strong> <code>aero</code> | <code>luna-blue</code> | <code>luna-olive</code> | <code>luna-silver</code> | <code>royale</code> | <code>generic</code> | <code>zune</code><br> - <strong style="font-weight: bold;">Media</strong><strong>:</strong> {{cssxref("Medien/Visuell")}}<br> - <strong>Accepts min/max prefixes:</strong> no</p> - -<p>Indicates which Windows theme is currently being used. Only available on Windows. Possible values are:</p> - -<ul> - <li><code>aero</code></li> - <li><code>luna-blue</code></li> - <li><code>luna-olive</code></li> - <li><code>luna-silver</code></li> - <li><code>royale</code></li> - <li><code>generic</code></li> - <li><code>zune</code></li> -</ul> - -<p>This is provided for application skins and other chrome code to be able to adapt to work well with the current Windows theme.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome("21") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>{{ CompatIE("9.0") }}</td> - <td>{{ CompatOpera("9") }}</td> - <td>{{ CompatSafari("4") }}</td> - </tr> - <tr> - <td>grid</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [1]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>resolution</td> - <td>{{ CompatChrome("29") }}</td> - <td>{{ CompatGeckoDesktop("1.9.1") }} [2]<br> - {{ CompatGeckoDesktop("8.0") }} [3]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>scan</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }} [4]</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] <code>grid</code> media type is not supported</p> - -<p>[2] Supports {{cssxref("<integer>")}} values;</p> - -<p>[3] Supports {{cssxref("<number>")}} values, as per the spec.</p> - -<p>[4] <code>tv</code> media type is not supported</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/" title="http://www.w3.org/TR/css3-mediaqueries/">CSS 3 media query specification</a></li> - <li><a class="internal" href="/en-US/docs/CSS/@media" title="En/CSS/@media">Media types</a></li> - <li><a href="/en-US/docs/CSS/Using_media_queries_from_code" title="en/CSS/Using media queries from code">Using media queries from code</a></li> - <li><a href="http://i-skool.co.uk/mobile-development/web-design-for-mobiles-and-tablets-viewport-sizes/">List of mobile and tablet viewport sizes with pixel ratios and physical sizes</a></li> - <li><a href="http://davidwalsh.name/animate-media-queries">CSS Animations Between Media Queries</a> by David Walsh</li> -</ul> 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 ---- -<p><strong>Media Queries</strong> can also be used to help users with disabilities understand your website better.</p> - -<h2 id="Reduced_Motion">Reduced Motion</h2> - -<p>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.</p> - -<p>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.</p> - -<h3 id="Syntax">Syntax</h3> - -<dl> - <dt><code><dfn>no-preference</dfn></code></dt> - <dd>Indicates that the user has made no preference known to the system.</dd> - <dt><code><dfn>reduce</dfn></code></dt> - <dd>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.</dd> -</dl> - -<h3 id="Example">Example</h3> - -<p>This example has an annoying animation unless you turn on Reduce Motion in your accessibility preferences.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="animation">animated box</div> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">.animation { - -webkit-animation: vibrate 0.3s linear infinite both; - animation: vibrate 0.3s linear infinite both; -} - -@media (prefers-reduced-motion: reduce) { - .animation { - animation: none; - } -} -</pre> - -<h2 id="High_Contrast_Mode">High Contrast Mode</h2> - -<div>{{CSSRef}}{{Non-standard_header}}</div> - -<p>The <strong>-ms-high-contrast</strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">media feature</a> is a <a href="/en-US/docs/Web/CSS/Microsoft_extensions">Microsoft extension</a> that describes whether the application is being displayed in high contrast mode, and with what color variation.</p> - -<p>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.</p> - -<h3 id="Syntax_2">Syntax</h3> - -<p>The <strong><code>-ms-high-contrast</code></strong> media feature is specified as one of the following values.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>active</code></dt> - <dd> - <p>Indicates that the subsequent styling rules will be applied when the system is placed in high contrast mode with any color variation.</p> - </dd> - <dt><code>black-on-white</code></dt> - <dd> - <p>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.</p> - </dd> - <dt><code>white-on-black</code></dt> - <dd> - <p>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.</p> - </dd> -</dl> - -<h3 id="Example_2">Example</h3> - -<p>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.</p> - -<pre class="brush: css notranslate">@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'); } -} -</pre> 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 ---- -<div>{{CSSRef}}</div> - -<p>Die Eigenschaft <strong><code>object-position </code></strong>bestimmt die Ausrichtung des Elements in seiner Box.</p> - -<pre class="brush:css no-line-numbers">/* <position> Werte */ -object-position: 100px 50px; - -/* Globale Werte */ -object-position: inherit; -object-position: initial; -object-position: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<h3 id="Values" name="Values">Values</h3> - -<dl> - <dt><code><position></code></dt> - <dd>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.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">Example</h2> - -<h3 id="HTML_content">HTML content</h3> - -<pre class="brush: html"><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"/> -</pre> - -<h3 id="CSS_content">CSS content</h3> - -<pre class="brush: css">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%; -} -</pre> - -<h3 id="Output">Output</h3> - -<p>{{ EmbedLiveSample('Example', '100%','300px') }}</p> - -<h2 id="Specifications" name="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#the-object-position', 'object-position')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#the-object-position', 'object-position')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>31.0</td> - <td>{{ CompatGeckoDesktop("36") }}</td> - <td>{{CompatNo}}</td> - <td>11.60{{ property_prefix("-o") }}<br> - 19.0</td> - <td>10.0</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4.4</td> - <td>{{ CompatGeckoDesktop("36") }}</td> - <td>{{CompatNo}}</td> - <td>11.5{{ property_prefix("-o") }}<br> - 24</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -<br> -[1] WebKit Nightly fixed in bug <a href="https://bugs.webkit.org/show_bug.cgi?id=122811">122811</a>.</div> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>Other image-related CSS properties: {{cssxref("object-fit")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> -</ul> 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 ---- -<div>{{CSSRef}}</div> - -<p>Die <a href="/de/docs/CSS">CSS</a>-Eigenschaft <strong><code>perspective-origin</code></strong> <a href="/en-US/docs/CSS">CSS</a> property determines the position at which the viewer is looking. It is used as the <em>vanishing point</em> by the {{cssxref("perspective")}} property.</p> - -<div>{{EmbedInteractiveExample("pages/css/perspective-origin.html")}}</div> - - - -<p>The <strong><code>perspective-origin</code> </strong>and {{cssxref('perspective')}} properties are attached to the parent of a child transformed in 3-dimensional space, unlike the <code><a href="/en-US/docs/Web/CSS/transform-function/perspective">perspective()</a></code> transform function which is placed on the element being transformed.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:css no-line-numbers notranslate">/* 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; -</pre> - -<h3 id="Values">Values</h3> - -<dl> - <dt><em>x-position</em></dt> - <dd>Indicates the position of the abscissa of the <em>vanishing point</em>. It can have one of the following values: - <ul> - <li>{{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the width of the element. The value may be negative.</li> - <li><code>left</code>, a keyword being a shortcut for the <code>0</code> length value.</li> - <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li> - <li><code>right</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li> - </ul> - </dd> - <dt><em>y-position</em></dt> - <dd>Indicates the position of the ordinate of the <em>vanishing point</em>. It can have one of the following values: - <ul> - <li>{{cssxref("<length-percentage>")}} indicating the position as an absolute length value or relative to the height of the element. The value may be negative.</li> - <li><code>top</code>, a keyword being a shortcut for the <code>0</code> length value.</li> - <li><code>center</code>, a keyword being a shortcut for the <code>50%</code> percentage value.</li> - <li><code>bottom</code>, a keyword being a shortcut for the <code>100%</code> percentage value.</li> - </ul> - </dd> -</dl> - -<h2 id="Formal_definition">Formal definition</h2> - -<p>{{cssinfo}}</p> - -<h2 id="Formal_syntax">Formal syntax</h2> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<h3 id="Changing_the_perspective_origin">Changing the perspective origin</h3> - -<p>This example shows cubes with popular <code>perspective-origin</code> values.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><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> -</pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">/* 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); -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Changing_the_perspective_origin', '100%', 700)}}</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS Transforms 2', '#perspective-origin-property', 'perspective-origin')}}</td> - <td>{{Spec2('CSS Transforms 2')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("css.properties.perspective-origin")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms">Using CSS Transforms</a></li> - <li>{{cssxref('transform-style')}}</li> - <li>{{cssxref('transform-function')}}</li> - <li>{{cssxref('perspective')}}</li> - <li><code><a href="/en-US/docs/Web/CSS/transform-function/perspective">transform: perspective()</a></code> function</li> -</ul> 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 ---- -<div>{{cssref}}</div> - -<p class="summary"><strong><dfn>Shorthand properties</dfn></strong> 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.</p> - -<p>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.</p> - -<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">Tricky edge cases</h2> - -<p>Even if they are very convenient to use, there are a few edge cases to keep in mind when using them:</p> - -<ol> - <li>A value which is not specified is set to its initial value. That sounds anecdotal, but it really means that it <strong>overrides</strong> previously set values. Therefore: - - <pre class="brush:css notranslate">background-color: red; -background: url(images/bg.gif) no-repeat left top; -</pre> - will not set the color of the background to <code>red</code> but to {{cssxref("background-color")}}'s default, <code>transparent</code>, as the second rule has precedence.</li> - <li>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 <code>inherit</code> 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 <code>inherit</code>.</li> - <li>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: - <ol> - <li>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: - <table> - <tbody> - <tr> - <td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td> - <td><em>The 1-value syntax</em>: <code>border-width: 1em</code> — The unique value represents all edges</td> - </tr> - <tr> - <td><img alt="border2.png" src="/files/3647/border2.png"></td> - <td><em>The 2-value syntax</em>: <code>border-width: 1em 2em</code> — The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.</td> - </tr> - <tr> - <td><img alt="border3.png" src="/files/3648/border3.png"></td> - <td><em>The 3-value syntax</em>: <code>border-width: 1em 2em 3em</code> — The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge</td> - </tr> - <tr> - <td><img alt="border4.png" src="/files/3649/border4.png"></td> - <td> - <p><em>The 4-value syntax</em>: <code>border-width: 1em 2em 3em 4em</code> — 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 <em>trouble</em>: TRBL) (You can also remember it as the order that the hands would rotate on a clock: <code>1em</code> starts in the 12 o'clock position, then <code>2em</code> in the 3 o'clock position, then <code>3em</code> in the 6 o'clock position, and <code>4em</code> in the 9 o'clock position).</p> - </td> - </tr> - </tbody> - </table> - </li> - <li>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: - <table> - <tbody> - <tr> - <td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td> - <td><em>The 1-value syntax</em>: <code>border-radius: 1em</code> — The unique value represents all corners</td> - </tr> - <tr> - <td><img alt="corner2.png" src="/files/3651/corner2.png"></td> - <td><em>The 2-value syntax</em>: <code>border-radius: 1em 2em</code> — The first value represents the top left and bottom right corner, the second the top right and bottom left ones.</td> - </tr> - <tr> - <td><img alt="corner3.png" src="/files/3652/corner3.png"></td> - <td><em>The 3-value syntax</em>: <code>border-radius: 1em 2em 3em</code> — 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</td> - </tr> - <tr> - <td><img alt="corner4.png" src="/files/3653/corner4.png"></td> - <td> - <p><em>The 4-value syntax</em>: <code>border-radius: 1em 2em 3em 4em</code> — 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.</p> - </td> - </tr> - </tbody> - </table> - </li> - </ol> - </li> -</ol> - -<h2 id="Background_Properties" name="Background_Properties">Background properties</h2> - -<p>A background with the following properties ...</p> - -<pre class="brush:css notranslate">background-color: #000; -background-image: url(images/bg.gif); -background-repeat: no-repeat; -background-position: left top;</pre> - -<p>... can be shortened to just one declaration:</p> - -<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat left top;</pre> - -<p>(The shorthand form is actually the equivalent of the longhand properties above plus <code>background-attachment: scroll</code> and, in CSS3, some additional properties.)</p> - -<p>See {{cssxref("background")}} for more detailed information, including CSS3 properties.</p> - -<h2 id="Font_Properties" name="Font_Properties">Font properties</h2> - -<p>The following declarations ...</p> - -<pre class="brush:css notranslate">font-style: italic; -font-weight: bold; -font-size: .8em; -line-height: 1.2; -font-family: Arial, sans-serif;</pre> - -<p>... can be shortened to the following:</p> - -<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre> - -<p>This shorthand declaration is actually equivalent to the longhand declarations above plus <code>font-variant: normal</code> and <code>font-size-adjust: none</code> (CSS2.0 / CSS3), <code>font-stretch: normal</code> (CSS3).</p> - -<h2 id="Border_Properties" name="Border_Properties">Border properties</h2> - -<p>With borders, the width, color, and style can be simplified into one declaration. For example, the following CSS ...</p> - -<pre class="brush:css notranslate">border-width: 1px; -border-style: solid; -border-color: #000;</pre> - -<p>... can be simplified as:</p> - -<pre class="brush:css notranslate">border: 1px solid #000;</pre> - -<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin and padding properties</h2> - -<p>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 ...</p> - -<pre class="brush:css notranslate">margin-top: 10px; -margin-right: 5px; -margin-bottom: 10px; -margin-left: 5px;</pre> - -<p>... 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").</p> - -<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre> - -<p>Margin shorthand rules for one, two, three and four value declarations are:</p> - -<ul> - <li>When <strong>one</strong> value is specified, it applies the same margin to <strong>all four sides</strong>.</li> - <li>When <strong>two</strong> values are specified, the first margin applies to the <strong>top and bottom</strong>, the second to the <strong>left and right</strong>.</li> - <li>When <strong>three</strong> values are specified, the first margin applies to the <strong>top</strong>, the second to the <strong>left and right</strong>, the third to the <strong>bottom</strong>.</li> - <li>When <strong>four</strong> values are specified, the margins apply to the <strong>top</strong>, <strong>right</strong>, <strong>bottom</strong>, and <strong>left</strong> in that order (clockwise).</li> -</ul> - -<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">The universal shorthand property</h2> - -<p>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:</p> - -<p>{{page("/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}</p> - -<p>See <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> or <a href="/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> for more information about how inheritance works in CSS.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> - <li>Shorthand properties: {{cssxref("animation")}}, {{cssxref("background")}}, {{cssxref("border")}}, {{cssxref("border-bottom")}}, {{cssxref("border-color")}}, {{cssxref("border-left")}}, {{cssxref("border-radius")}}, {{cssxref("border-right")}}, {{cssxref("border-style")}}, {{cssxref("border-top")}}, {{cssxref("border-width")}}, {{cssxref("column-rule")}}, {{cssxref("columns")}}, {{cssxref("flex")}}, {{cssxref("flex-flow")}}, {{cssxref("font")}}, {{cssxref("grid")}}, {{cssxref("grid-area")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, {{cssxref("grid-template")}}, {{cssxref("list-style")}}, {{cssxref("margin")}}, {{cssxref("offset")}}, {{cssxref("outline")}}, {{cssxref("overflow")}}, {{cssxref("padding")}}, {{cssxref("place-content")}}, {{cssxref("place-items")}}, {{cssxref("place-self")}}, {{cssxref("text-decoration")}}, {{cssxref("transition")}}</li> -</ul> 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 ---- -<div>{{CSSRef}}</div> - -<p class="summary">In CSS The <strong>Visual Formatting Model</strong> 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.</p> - -<p>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:</p> - -<ul> - <li>Box dimensions and type.</li> - <li>Positioning scheme (normal flow, float, and absolute positioning).</li> - <li>Relationships between elements in the document tree.</li> - <li>External information (e.g., viewport size, intrinsic dimensions of images, etc.).</li> -</ul> - -<p>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.</p> - -<p>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.</p> - -<h2 id="The_role_of_the_viewport">The role of the viewport</h2> - -<p>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.</p> - -<p>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 <strong>block dimension</strong> — vertically in a horizontal, top-to-bottom language. However, you might design something that requires scrolling in the <strong>inline dimension</strong> too.</p> - -<h2 id="Box_generation">Box generation</h2> - -<p><strong>Box generation</strong> 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.</p> - -<p>Initially defined in CSS2, the <code>display</code> property is extended in the <a href="https://www.w3.org/TR/css-display-3/">CSS Display Module Level 3</a>. In addition, some of the terminologies around the display have been updated and clarified in the years since CSS2.</p> - -<p>CSS takes your source document and renders it onto a canvas. To do this, it generates an intermediary structure, the <strong>box tree</strong>, 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.</p> - -<p>Then, for each element, CSS generates zero or more boxes as specified by that element’s <code>display</code> property value.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: Boxes are often referred to by their display type — e.g. a box generated by an element with <code>display: block</code> 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.</p> -</div> - -<h3 id="The_principal_box">The principal box</h3> - -<p>When an element generates one or more boxes, one of them is the <strong>principal box</strong>, which contains its descendant boxes and generated content in the box tree, and is also the box involved in any positioning scheme.</p> - -<p>Some elements may generate additional boxes in addition to the principal box, for example <code>display: list-item</code> generates more than one box (e.g. a <strong>principal block box</strong> and a <strong>child marker box</strong>). And some values (such as <code>none</code> or <code>contents</code>) cause the element and/or its descendants to not generate any boxes at all.</p> - -<h3 id="Anonymous_boxes">Anonymous boxes</h3> - -<p>An <strong>anonymous box</strong> is created when there is not an HTML element to use for the box. This situation happens when, for example, you declare <code>display: flex</code> 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.</p> - -<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-flex.html", '100%', 720)}}</p> - -<p>The same thing happens when you have text runs interspersed with block elements. In the next example I have a string inside a <code><div></code>; in the middle of my string is a <code><p></code> element containing part of the text.</p> - -<p>{{EmbedGHLiveSample("css-examples/visual-formatting/anonymous-block.html", '100%', 720)}}</p> - -<p>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 <code><p></code>, which generates a box, and then another anonymous box.</p> - -<p>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.</p> - -<p><strong>Inline anonymous boxes</strong> are created when a string is split by an inline element, for example, a sentence that includes a section wrapped with <code><em></em></code>. This splits the sentence into three inline boxes — an anonymous inline box before the emphasized section, the section wrapped in the <code><em></code> 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 <code><em></code> can; they just inherit the styles of their container.</p> - -<p>Other formatting contexts also create anonymous boxes. <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Grid Layout</a> behaves in the same way as the <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> example above, turning strings of text into a grid item with an anonymous box. <a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column</a> layout creates anonymous column boxes around the columns; these also cannot be styled or otherwise targetted. <a href="/en-US/docs/Web/CSS/CSS_Table">Table layout</a> will add anonymous boxes to create a proper table structure — for example adding an anonymous table row — if there was no box with <code>display: table-row</code>.</p> - -<h3 id="Line_boxes">Line boxes</h3> - -<p><strong>Line boxes</strong> 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.</p> - -<p>In the following example, the line boxes following the floated <code><div></code> 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.</p> - -<p>{{EmbedGHLiveSample("css-examples/visual-formatting/line-boxes.html", '100%', 720)}}</p> - -<h2 id="Positioning_schemes_and_in-flow_and_out-of-flow_elements">Positioning schemes and in-flow and out-of-flow elements</h2> - -<p>In CSS, a box may be laid out according to three positioning schemes — <strong>normal flow</strong>, <strong>floats</strong>, or <strong>absolute positioning</strong>.</p> - -<h3 id="Normal_flow">Normal flow</h3> - -<p>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.</p> - -<p>Read more about <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout">flow layout</a> in CSS.</p> - -<h3 id="Floats">Floats</h3> - -<p>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.</p> - -<p>Find out more about <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>.</p> - -<h3 id="Absolute_positioning">Absolute positioning</h3> - -<p>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).</p> - -<p>An element is called <strong>out of flow</strong> if it is floated, absolutely positioned, or is the root element. An element is called <strong>in-flow</strong> if it is not out of the flow.</p> - -<p>Read about <a href="/en-US/docs/Web/CSS/CSS_Positioning">CSS Positioned Layout</a>.</p> - -<h2 id="Formatting_contexts_and_the_display_property">Formatting contexts and the display property</h2> - -<p>Boxes can be described as having an <strong>outer display type</strong>, which is <code>block</code> or <code>inline</code>. This outer display type refers to how the box behaves alongside other elements on the page.</p> - -<p>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 <code>flow</code>. This means that the child elements will also be either <code>block</code> or <code>inline</code>.</p> - -<p>However, the inner display type might be something like <code>grid</code> or <code>flex</code>, 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 <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts">formatting context</a>. 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.</p> - -<p>The interactions between block-level and inline-level boxes are described in the MDN documentation for {{cssxref("display")}}.</p> - -<p>In addition, the references for specific values of display explain how these formatting contexts work in terms of box layout.</p> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexible Box Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Table">CSS Table Layout</a></li> - <li><a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">Lists</a></li> -</ul> - -<h3 id="Independent_formatting_contexts">Independent formatting contexts</h3> - -<p>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 <strong>Grid Formatting Context</strong> for its children.</p> - -<p><strong>Independent formatting contexts</strong> 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 <code>display: flow-root</code> creates a new <a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">block formatting context</a> in order to gain the useful effects of this, without any unwanted issues caused by changing the value of overflow.</p> - -<h3 id="Block_boxes">Block boxes</h3> - -<p>In specifications, block boxes, block-level boxes, and block containers are all referred to as <strong>block boxes</strong> in certain places. These things are somewhat different and the term block box should only be used if there is no ambiguity.</p> - -<h4 id="Block_containers">Block containers</h4> - -<p>A <strong>block container</strong> 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.</p> - -<h4 id="Inline-level_and_block-level_boxes">Inline-level and block-level boxes</h4> - -<p>These are the boxes contained inside the block container that are participating in inline or block layout, respectively.</p> - -<h4 id="Block_boxes_2">Block boxes</h4> - -<p>A block box is a block-level box that is also a block container. As described in CSS <code>display</code>, 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).</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{css_key_concepts}}</li> -</ul> 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 ---- -<p>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.</p> -<ul> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Mobile-friendliness" title="/en/Web_development/Mobile/Mobile-friendliness">What is mobile-friendliness?</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Separate_sites" title="en/Web_development/Mobile/Separate sites">Separate sites</a></li> - <li><a class="vt-p" href="/en/Web_Development/Mobile/Responsive_design" title="/en/Web_development/Mobile/Responsive design">Responsive design</a></li> - <li><a class="vt-p" href="/en/Web_development/Mobile/A_hybrid_approach" title="A New Approach to Web Applications (external)">A hybrid approach</a></li> -</ul> 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 ---- -<div>{{HTMLRef}}</div> - -<p>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. <span class="seoSummary">Mit <a href="/en-US/docs/Web/CSS">CSS</a> gibt es viele Möglichkeiten, den <a href="/en-US/docs/Web/HTML">HTML</a> <a href="/en-US/docs/Web/HTML/Element">elements</a> Farbe zu verleihen. Dieser Artikel ist eine Einführung, die jede Möglichkeit vorstellt, CSS Farben in HTML zu verwenden.</span></p> - -<p>Zum Glück ist das Hinzufügen von Farbe zu deinem HTML eigentlich wirklich <em>easy</em> und du kannst Farbe zu fast allem hinzufügen.</p> - -<p>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")}}.</p> - -<p>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</p> - -<h2 id="Dinge_die_Farbe_haben_können">Dinge, die Farbe haben können</h2> - -<p>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.</p> - -<p>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.</p> - -<h3 id="Text">Text</h3> - -<p>Wo auch immer ein Element gerendert wurde sind diese Elemente dazu da, die Farbe des Textes, seinen Hintergrund oder Dekorationen des Textes festzulegen.</p> - -<dl> - <dt>{{cssxref("color")}}</dt> - <dd>Legt die Farbe von Text und <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration">text decorations</a> fest (wie z. B. die Ergänzung von Über- oder Unterstrichen, durchgestrichene Linien, usw.)</dd> - <dt>{{cssxref("background-color")}}</dt> - <dd>Die Hintergrundfarbe des Textes.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>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.</dd> - <dt>{{cssxref("text-decoration-color")}}</dt> - <dd>Als Standardeinstellung verwenden Textdekorationen (wie z. B. Unterstreichungen, Durchstreichungen, etc.) die <code>color</code> Eigenschaft als ihre Farbe. Jedoch können sie diese Einstellung überschreiben und eine andere Farbe mit der <code>text-decoration-color</code> Eigenschaft verwenden.</dd> - <dt>{{cssxref("text-emphasis-color")}}</dt> - <dd>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.</dd> - <dt>{{cssxref("caret-color")}}</dt> - <dd>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.</dd> -</dl> - -<h3 id="Boxen">Boxen</h3> - -<p>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.</p> - -<dl> - <dt>{{anch("Borders")}}</dt> - <dd>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.</dd> - <dt>{{cssxref("background-color")}}</dt> - <dd>Farbe auf Bereiche eines Elements anwenden, die keinen Inhalt im Vordergrund haben.</dd> - <dt>{{cssxref("column-rule-color")}}</dt> - <dd>Farbe auf Linien anwenden, die Textspalten trennen.</dd> - <dt>{{cssxref("outline-color")}}</dt> - <dd>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.</dd> -</dl> - -<h3 id="Ränder_(Borders)">Ränder (Borders)</h3> - -<p>Jedes Element kann einen Rand (<a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">border</a>) 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 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Borders">Styling borders using CSS</a> to learn more about applying styles to borders.</p> - -<p>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 <a href="/en-US/docs/Web/CSS/border-width">width</a>, <a href="/en-US/docs/Web/CSS/border-style">style</a> (solid, dashed, etc.), and so forth.</p> - -<dl> - <dt>{{cssxref("border-color")}}</dt> - <dd>Specifies a single color to use for every side of the element's border.</dd> - <dt>{{cssxref("border-left-color")}}, {{cssxref("border-right-color")}}, {{cssxref("border-top-color")}}, and {{cssxref("border-bottom-color")}}</dt> - <dd>Lets you set the color of the corresponding side of the element's border.</dd> - <dt>{{cssxref("border-block-start-color")}} and {{cssxref("border-block-end-color")}}</dt> - <dd>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).</dd> - <dt>{{cssxref("border-inline-start-color")}} and {{cssxref("border-inline-end-color")}}</dt> - <dd>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 <code>border-inline-start-color</code> is applied to the right side of the border.</dd> -</dl> - -<h3 id="Andere_Methoden_um_Farbe_zu_verwenden">Andere Methoden um Farbe zu verwenden</h3> - -<p>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.</p> - -<dl> - <dt>Die HTML <a href="/en-US/docs/Web/API/Canvas_API">Canvas API</a></dt> - <dd>Lets you draw 2D bitmapped graphics in a {{HTMLElement("canvas")}} element. See our <a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> to learn more.</dd> - <dt><a href="/en-US/docs/Web/SVG">SVG</a> (Scalable Vector Graphics)</dt> - <dd>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.</dd> - <dt><a href="/en-US/docs/Web/API/WebGL_API">WebGL</a></dt> - <dd>The Web Graphics Library is an OpenGL ES-based API for drawing high-performance 2D and 3D graphics on the Web. See <a href="/en-US/docs/Learn/WebGL">Learn WebGL for 2D and 3D</a> graphics to find out more.</dd> -</dl> - -<h2 id="Wie_man_eine_Farbe_definiert">Wie man eine Farbe definiert</h2> - -<p>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.</p> - -<p>For more detailed discussion of each of the color value types, see the reference for the CSS {{cssxref("<color>")}} unit.</p> - -<h3 id="Schlüsselwörter">Schlüsselwörter</h3> - -<p>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 <code>red</code>, <code>blue</code>, or <code>orange</code>), shades of gray (from <code>black</code> to <code>white</code>, including colors like <code>darkgray</code> and <code>lightgrey</code>), and a variety of other blended colors including <code>lightseagreen</code>, <code>cornflowerblue</code>, and <code>rebeccapurple</code>.</p> - -<p>See {{SectionOnPage("/en-US/docs/Web/CSS/color_value", "Color keywords", "code")}} for a list of all available color keywords.</p> - -<h3 id="RGB-Werte">RGB-Werte</h3> - -<p>There are three ways to represent an RGB color in CSS.</p> - -<h4 id="Hexadezimale_String_Notation">Hexadezimale String Notation</h4> - -<p>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 <em>must</em> 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, <code>"#D"</code> becomes <code>"#DD"</code> when drawing.</p> - -<p>A color in hexadecimal string notation always begins with the character <code>"#"</code>. After that come the hexadecimal digits of the color code. The string is case-insensitive.</p> - -<dl> - <dt><code>"#rrggbb"</code></dt> - <dd>Specifies a fully-opaque color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> - <dt><code>"#rrggbbaa"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> - <dt><code>"#rgb"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>.</dd> - <dt><code>"#rgba"</code></dt> - <dd>Specifies a color whose red component is the hexadecimal number <code>0xrr</code>, green component is <code>0xgg</code>, and blue component is <code>0xbb</code>. The alpha channel is specified by <code>0xaa</code>; the lower this value is, the more translucent the color becomes.</dd> -</dl> - -<p>As an example, you can represent the opaque color bright blue as <code>"#0000ff"</code> or <code>"#00f"</code>. To make it 25% opaque, you can use <code>"#0000ff44"</code> or <code>"#00f4"</code>.</p> - -<h4 id="RGB_functional_notation">RGB functional notation</h4> - -<p>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.</p> - -<p>Legal values for each of these parameters are:</p> - -<dl> - <dt><code>red</code>, <code>green</code>, and <code>blue</code></dt> - <dd>Each must be an {{cssxref("<integer>")}} value between 0 and 255 (inclusive), or a {{cssxref("<percentage>")}} from 0% to 100%.</dd> - <dt><code>alpha</code></dt> - <dd>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.</dd> -</dl> - -<p>For example, a bright red that's 50% opaque can be represented as <code>rgb(255, 0, 0, 0.5)</code> or <code>rgb(100%, 0, 0, 50%)</code>.</p> - -<h3 id="HSL_functional_notation">HSL functional notation</h3> - -<p>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 <code>hsl()</code> CSS function is very similar to the <code>rgb()</code> function in usage otherwise.</p> - -<div style="padding-bottom: 20px;"> -<figure style="width: 500px;"><img alt="HSL color cylinder" src="https://mdn.mozillademos.org/files/15445/1200px-HSL_color_solid_cylinder_alpha_lowgamma.png" style="height: 375px; width: 500px;"> -<figcaption><em><strong>Figure 1. An HSL color cylinder.</strong> 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 <a href="http://commons.wikimedia.org/wiki/User:SharkD">SharkD</a> on <a href="https://www.wikipedia.org/">Wikipedia</a>, distributed under the <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0</a> license.</em></figcaption> -</figure> -</div> - -<p>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 (<code>deg</code>), radians (<code>rad</code>), gradians (<code>grad</code>), or turns (<code>turn</code>). But this doesn't control how vivid or dull, or how bright or dark the color is.</p> - -<p>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.</p> - -<p>Think of it like creating the perfect paint color:</p> - -<ol> - <li>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 <strong>hue</strong> (H) component: a value representing the angle around the color wheel for the vivid hue we want to use as our base.</li> - <li>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.</li> - <li>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.</li> -</ol> - -<p>You can also optionally include an alpha channel, to make the color less than 100% opaque.</p> - -<p>Here are some sample colors in HSL notation:</p> - -<div id="hsl-swatches"> -<div class="hidden"> -<pre class="brush: css">table { - border: 1px solid black; - font: 16px "Open Sans", Helvetica, Arial, sans-serif; - border-spacing: 0; - border-collapse: collapse; -} - -th, td { - border: 1px solid black; - padding:4px 6px; - text-align: left; -} - -th { - background-color: hsl(0, 0%, 75%); -}</pre> - -<pre class="brush: html"><table> - <thead> - <tr> - <th scope="col">Color in HSL notation</th> - <th scope="col">Example</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>hsl(90deg, 100%, 50%)</code></td> - <td style="background-color: hsl(90deg, 100%, 50%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(90, 100%, 50%)</code></td> - <td style="background-color: hsl(90, 100%, 50%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(0.15turn, 50%, 75%)</code></td> - <td style="background-color: hsl(0.15turn, 50%, 75%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(0.15turn, 90%, 75%)</code></td> - <td style="background-color: hsl(0.15turn, 90%, 75%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(0.15turn, 90%, 50%)</code></td> - <td style="background-color: hsl(0.15turn, 90%, 50%);">&nbsp;</td> - </tr> - <tr> - <td><code>hsl(270deg, 90%, 50%)</code></td> - <td style="background-color: hsl(270deg, 90%, 50%);">&nbsp;</td> - </tr> - </tbody> -</table></pre> -</div> - -<p>{{EmbedLiveSample("hsl-swatches", 300, 260)}}</p> -</div> - -<div class="note"> -<p>Note that when you omit the hue's unit, it's assumed to be in degrees (<code>deg</code>).</p> -</div> - -<h2 id="Farbe_verwenden">Farbe verwenden</h2> - -<p>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.</p> - -<h3 id="Specifying_colors_in_stylesheets">Specifying colors in stylesheets</h3> - -<p>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.</p> - -<p>Let's take a look at an example, starting by looking at the results we're trying to achieve:</p> - -<div>{{EmbedLiveSample("Specifying_colors_in_stylesheets", 650, 150)}}</div> - -<h4 id="HTML">HTML</h4> - -<p>The HTML responsible for creating the above example is shown here:</p> - -<pre class="brush: html"><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></pre> - -<p>This is pretty simple, using a {{HTMLElement("div")}} as a wrapper around the contents, which consists of two more <code><div></code>s, each styled differently with a single paragraph ({{HTMLElement("p")}}) in each box.</p> - -<p>The magic happens, as usual, in the CSS, where we'll apply colors define the layout for the HTML above.</p> - -<h4 id="CSS">CSS</h4> - -<p>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.</p> - -<pre class="brush: css">.wrapper { - width: 620px; - height: 110px; - margin: 0; - padding: 10px; - border: 6px solid mediumturquoise; -}</pre> - -<p>The <code>.wrapper</code> 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")}}.</p> - -<p>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 <code>mediumturquoise</code>.</p> - -<p>Our two colored boxes share a number of properties in common, so next we establish a class, <code>.box</code>, that defines those shared properties:</p> - -<pre class="brush: css">.box { - width: 290px; - height: 100px; - margin: 0; - padding: 4px 6px; - font: 28px "Marker Felt", "Zapfino", cursive; - display: flex; - justify-content: center; - align-items: center; -}</pre> - -<p>In brief, <code>.box</code> establishes the size of each box, as well as the configuration of the font used within. We also take advantage of <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Flexbox</a> to easily center the contents of each box. We enable <code>flex</code> mode using {{cssxref("display", "display: flex")}}, and set both {{cssxref("justify-content")}} and {{cssxref("align-items")}} to <code>center</code>. Then we can create a class for each of the two boxes that defines the propeties that differ between the two.</p> - -<pre class="brush: css">.boxLeft { - float: left; - background-color: rgb(245, 130, 130); - outline: 2px solid darkred; -}</pre> - -<p>The <code>.boxLeft</code> class—which, cleverly, is used to style the box on the left—floats the box to the left, then sets up the colors:</p> - -<ul> - <li>The box's background color is set by changing the value of the CSS {{cssxref("background-color")}} property to <code>rgb(245, 130, 130)</code>.</li> - <li>An outline is defined for the box. Unlike the more commonly used <code>border</code>, {{cssxref("outline")}} doesn't affect layout at all; it draws over the top of whatever may happen to be outside the element's box instead of making room as <code>border</code> does. This outline is a solid, dark red line that's two pixels thick. Note the use of the <code>darkred</code> keyword when specifying the color.</li> - <li>Notice that we're not explicitly setting the text color. That means the value of {{cssxref("color")}} will be inherited from the nearest containing element that defines it. By default, that's black.</li> -</ul> - -<pre class="brush: css">.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; -}</pre> - -<p>Finally, the <code>.boxRight</code> 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:</p> - -<ul> - <li>The <code>background-color</code> is set using the HSL value specified using <code>hsl(270deg, 50%, 75%)</code>. This is a medium purple color.</li> - <li>The box's <code>outline</code> is used to specify that the box should be enclosed in a four pixel thick dashed line whose color is a somewhat deeper purple (<code>rgb(110, 20, 120)</code>).</li> - <li>The foreground (text) color is specified by setting the {{cssxref("color")}} property to <code>hsl(0deg, 100%, 100%)</code>. This is one of many ways to specify the color white.</li> - <li>We add a green wavy line under the text with {{cssxref("text-decoration")}}.</li> - <li>Finally, a bit of a shadow is added to the text using {{cssxref("text-shadow")}}. Its <code>color</code> parameter is set to <code>black</code>.</li> -</ul> - -<h2 id="Dem_Nutzer_die_Farbe_wählen_lassen">Dem Nutzer die Farbe wählen lassen</h2> - -<p>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 <code>"color"</code> as the value of its {{htmlattrxref("type", "input")}} attribute.</p> - -<p>The <code><input></code> element represents a color only in the {{anch("Hexadecimal string notation", "hexadecimal string notation")}} covered above.</p> - -<h3 id="Beispiel_Farbe_wählen">Beispiel: Farbe wählen</h3> - -<p>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.</p> - -<p>{{EmbedLiveSample("Example_Picking_a_color", 525, 275)}}</p> - -<div class="note"> -<p>On macOS, you indicate that you've finalized selection of the color by closing the color picker window.</p> -</div> - -<h4 id="HTML_2">HTML</h4> - -<p>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.</p> - -<pre class="brush: html"><div id="box"> - <label for="colorPicker">Border color:</label> - <input type="color" value="#8888ff" id="colorPicker"> - <p id="output"></p> -</div></pre> - -<h4 id="CSS_2">CSS</h4> - -<p>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...</p> - -<pre class="brush: css">#box { - width: 500px; - height: 200px; - border: 2px solid rgb(245, 220, 225); - padding: 4px 6px; - font: 16px "Lucida Grande", "Helvetica", "Arial", "sans-serif" -}</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<p>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 <code><a href="/en-US/docs/Web/HTML/Element/input/color"><input type="color"></a></code> element.</p> - -<pre class="brush: js">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);</pre> - -<p>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.</p> - -<p>The {{event("change")}} event is received when the color picker's value is finalized. We respond by setting the contents of the <code><p></code> element with the ID <code>"output"</code> to a string describing the finally selected color.</p> - -<h2 id="Farbe_klug_verwenden">Farbe klug verwenden</h2> - -<p>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.</p> - -<h3 id="Die_richtigen_Farben_finden">Die richtigen Farben finden</h3> - -<p>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.</p> - -<h4 id="Base_color">Base color</h4> - -<p>The first step is to choose your <strong>base color</strong>. 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:</p> - -<ul> - <li>A color that is naturally associated with the topic of your content, such as the existing color identified with a product or idea or a color representative of the emotion you wish to convey.</li> - <li>A color that comes from imagery associated with what your content is about. If you're creating a web site about a given item or product, choose a color that's physically present on that item.</li> - <li>Browse web sites that let you look at lots of existing color palettes and imags to find inspiration.</li> -</ul> - -<p>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 <a href="http://www.colorzilla.com/">ColorZilla</a> offers an extension (<a href="http://www.colorzilla.com/chrome">Chrome</a> / <a href="http://www.colorzilla.com/firefox">Firefox</a>) 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.</p> - -<div class="note"> -<p>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.</p> -</div> - -<h4 id="Fleshing_out_the_palette">Fleshing out the palette</h4> - -<p>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.</p> - -<p>A few examples (all free to use as of the time this list was last revised):</p> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool">MDN's color picker tool</a></li> - <li><a href="http://paletton.com">Paletton</a></li> - <li><a href="https://color.adobe.com/create/color-wheel">Adobe Color CC online color wheel</a></li> -</ul> - -<p>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.</p> - -<div class="note"> -<p>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.</p> -</div> - -<h3 id="Ressourcen_zu_Farbentheorie">Ressourcen zu Farbentheorie</h3> - -<p>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:</p> - -<dl> - <dt><a href="https://www.khanacademy.org/partner-content/pixar/color">Color Science</a> (<a href="https://www.khanacademy.org/">Khan Academy</a> in association with <a href="https://www.pixar.com/">Pixar</a>)</dt> - <dd>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.</dd> - <dt>{{interwiki("wikipedia", "Color theory")}} on Wikipedia</dt> - <dd>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.</dd> -</dl> - -<h3 id="Farbe_und_Barrierefreiheit">Farbe und Barrierefreiheit</h3> - -<p>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.</p> - -<p>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.</p> - -<div class="note"> -<p>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.</p> -</div> - -<p>For more information about color blindness, see the following articles:</p> - -<ul> - <li><a href="https://medlineplus.gov/colorblindness.html">Medline Plus: Color Blindness</a> (United States National Institute of Health)</li> - <li><a href="https://www.aao.org/eye-health/diseases/what-is-color-blindness">American Academy of Ophthamology: What Is Color Blindness?</a></li> - <li><a href="https://www.usability.gov/get-involved/blog/2010/02/color-blindness.html">Color Blindness & Web Design</a> (Usability.gov: United States Department of Health and Human Services)</li> -</ul> - -<h3 id="Palette_design_example">Palette design example</h3> - -<p>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 <a href="https://www.google.com/search?q=Mars&tbm=isch">Google search for photos of Mars</a>. 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.</p> - -<p>Using an eyedropper tool, we identify a color we like and determine that the color in question is <code>#D79C7A</code>, which is an appropriate rusty orange-red color that's so stereotypical of the Martian surface.</p> - -<p>Having selected our base color, we need to build out our palette. We decide to use <a href="http://www.paletteon.com/">Paletteon</a> to come up with the other colors we need. Upon opening Paletton, we see:</p> - -<p><img alt="Right after loading Paletton." src="https://mdn.mozillademos.org/files/15451/paletton1.png" style="height: 361px; width: 600px;"></p> - -<p>Next, we enter our color's hex code (<code>D79C7A</code>) into the "Base RGB" box at the bottom-left corner of the tool:</p> - -<p><img alt="After entering base color" src="https://mdn.mozillademos.org/files/15453/paletton2.png" style="height: 361px; width: 600px;"></p> - -<p>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 <code>#508D7C</code>.</p> - -<p><img alt="Now with complementary colors included." src="https://mdn.mozillademos.org/files/15455/paletton3.png" style="height: 361px; width: 600px;"></p> - -<p>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:</p> - -<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15457/paletton4.png" style="height: 361px; width: 600px;"></p> - -<p>That greyish blue in the top-right looks pretty good. Clicking on it, we find that it's <code>#556E8D</code>. 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:</p> - -<p><img alt="Triad color scheme selected" src="https://mdn.mozillademos.org/files/15459/paletton-color-detail.png" style="height: 370px; width: 526px;"></p> - -<p>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.</p> - -<p>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.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li> - <li><a href="/en-US/docs/Web/Guide/Graphics">Graphics on the web</a></li> - <li><a href="/en-US/docs/Tools/DevToolsColors">MDN's color picker tool</a></li> -</ul> 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: <input type ="button"> -slug: Web/HTML/Element/Input/button -tags: - - Eingabeelement - - Element - - HTML - - Referenz -translation_of: Web/HTML/Element/input/button ---- -<p>{{HTMLRef}}</p> - -<p><span class="seoSummary">Das HTML <code><strong><input type="button"></strong></code> Element ist eine bestimmte Version des <strong><code><input></code></strong> Elements. Es wird benutzt, um einen anklickbaren Button zu generieren, der jedoch keinen voreingestellten Wert hat.</span></p> - -<p>Browser generieren einen Controller für clickbare Buttons ohne Standartwert. Ein Button kann beliebige Beschriftungen besitzen. Der Controller selbst variiert von Browser zu Browser.</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">Content categories</a></th> - <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">Flow content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">phrasing content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">Interactive content</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, and <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element, palpable content.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">Phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>None, both the starting and ending tag are mandatory. </td> - </tr> - <tr> - <th scope="row">Permitted parent elements</th> - <td>Any element that accepts <a href="https://developer.mozilla.org/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">phrasing content</a>.</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement" title="The HTMLButtonElement interface provides properties and methods (beyond the <button> object interface it also has available to them by inheritance) for manipulating the layout and presentation of button elements."><code>HTMLButtonElement</code></a></td> - </tr> - <tr> - <th scope="row">Element Typ</th> - <td>Inline</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>Dieses Element kann zusätzlich zu den <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">globalen Attribute</a> jedes der folgenden besitzen:</p> - -<dl> - <dt>{{htmlattrdef("disabled")}}</dt> - <dd> - <p>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 <code><strong>disabled</strong></code> attribute set, then the button is enabled. The disabled control's value isn't submitted with the form and the <code>click</code> event <a class="external" href="https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute">will not be dispatched</a> on disabled controls.</p> - </dd> - <dd> - <p>Firefox will, unlike other browsers, by default, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Use the {{htmlattrxref("autocomplete","button")}} attribute to control this feature.</p> - </dd> - <dt>{{htmlattrdef("autofocus")}} {{HTMLVersionInline(5)}}</dt> - <dd>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.</dd> - <dt>{{htmlattrdef("autocomplete")}} {{non-standard_inline}}</dt> - <dd>The use of this attribute on a {{HTMLElement("button")}} is nonstandard and Firefox-specific. By default, unlike other browsers, <a href="http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox persists the dynamic disabled state</a> of a {{HTMLElement("button")}} across page loads. Setting the value of this attribute to <code>off</code> (i.e., <code>autocomplete="off"</code>) disables this feature.</dd> - <dt>{{htmlattrdef("form")}} {{HTMLVersionInline(5)}}</dt> - <dd>The form element that the button is associated with (its <em>form owner</em>). The value of the attribute must be the <strong>id</strong> attribute of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, the <code><button></code> element must be a descendent of a form element. This attribute enables you to place <code><button></code> elements anywhere within a document, not just as descendents of their {{HTMLElement("form")}} elements.</dd> - <dt>{{htmlattrdef("formenctype")}}</dt> - <dd>Since the input element is a submit button, the <code><strong>formenctype</strong></code> attribute specifies the type of content that is used to submit the form to the server. Possible values are: - <ul> - <li><code>application/x-www-form-urlencoded</code>: The default value if the attribute is not specified.</li> - <li><code>multipart/form-data</code>: This value is used if an {{HTMLElement("input")}} element is used with the {{htmlattrxref("type","input")}} attribute set to <code>file</code>.</li> - <li><code>text/plain</code></li> - </ul> - - <p>If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.</p> - </dd> - <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline(5)}}</dt> - <dd>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.</dd> - <dt>{{htmlattrdef("formmethod")}}</dt> - <dd>Since the input element is a submit button, the <code><strong>formmethod</strong></code> attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: - <ul> - <li><code>post</code>: The data from the form is included in the body of the form and is sent to the server.</li> - <li><code>get</code>: The data from the form is appended to the <strong>form</strong> 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.</li> - </ul> - - <p>If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.</p> - </dd> - <dt>{{htmlattrdef("formnovalidate")}}</dt> - <dd>Since the input element is a submit button, the <code><strong>formnovalidate </strong></code>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.</dd> - <dt>{{htmlattrdef("formtarget")}}</dt> - <dd>Since the input element is a submit button, the <code><strong>formtarget</strong></code> 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 <em>browsing context</em> (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: - <ul> - <li>_<code>self</code>: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.</li> - <li><code>_blank</code>: Load the response into a new unnamed browsing context.</li> - <li><code>_parent</code>: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as <code>_self</code>.</li> - <li><code>_top</code>: 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 <code>_self</code>.</li> - </ul> - </dd> - <dt>{{htmlattrdef("name")}}</dt> - <dd><span class="tlid-translation translation" lang="de"><span title="">Der Name der Schaltfläche, der mit den Formulardaten übermittelt wird.</span></span></dd> - <dt>{{htmlattrdef("type")}}</dt> - <dd>The type of the button. Possible values are: - <ul> - <li><code>submit</code>: 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.</li> - <li><code>reset</code>: The button resets all the controls to their initial values.</li> - <li><code>button</code>: 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.</li> - </ul> - </dd> - <dt>{{htmlattrdef("value")}}</dt> - <dd>The initial value of the button.</dd> -</dl> - -<h2 id="Beispiele">Beispiele</h2> - -<pre class="brush:html"><input type="button" value="Klick mich"> -</pre> - -<p>Das erstellt einen neuen Button mit der Beschriftung: 'Klick mich'.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table" style="height: 137px; width: 1065px;"> - <tbody> - <tr> - <td>Specification</td> - <td>Status</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'the-button-element.html#the-button-element', '<button>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-button-element', '<button>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.5', '<button>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_Compatibiltiy">Browser Compatibiltiy</h2> - -<table class="standard-table"> - <caption>Browser Compatibility</caption> - <tbody> - <tr> - <td>Feature</td> - <td>Chrome</td> - <td>Gecko (Firefox)</td> - <td>Internet Explorer</td> - <td>Opera</td> - <td>Safari</td> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>formenctype</code> attribute</td> - <td>9.0</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>10.6</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>formmethod</code> attribute</td> - <td>9.0</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>autofocus</code> attribute</td> - <td>5.0</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>9.6</td> - <td>5.0</td> - </tr> - <tr> - <td><code>formaction</code> attribute</td> - <td>9.0</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<table class="standard-table"> - <caption>Mobile Browser Compatibility</caption> - <tbody> - <tr> - <td>Feature</td> - <td>Android</td> - <td>Gecko (Firefox Mobile)</td> - <td>Internet Explorer Mobile</td> - <td>Opera Mobile</td> - <td>Safari Mobile</td> - </tr> - <tr> - <td>Basic Support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>formaction </code>attribute</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>formenctype </code>attribute</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>formmethod</code> attribute</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> -</ul> 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: <th> -slug: Web/HTML/Element/th -translation_of: Web/HTML/Element/th ---- -<h2 id="Übersicht">Übersicht</h2> - -<p>Das HTML Element<em> table header cell </em><code><th></code> 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.</p> - -<h2 id="Gebrauchsübersicht">Gebrauchsübersicht</h2> - -<table class="standard-table"> - <tbody> - <tr> - <td><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content categories">Content categories</a></td> - <td>None.</td> - </tr> - <tr> - <td>Permitted content</td> - <td> - <div class="content-models"> - <div id="table-mdls">Phrasing content.</div> - </div> - </td> - </tr> - <tr> - <td>Tag omission</td> - <td>The <span title="syntax-start-tag">start tag</span> is mandatory.<br> - 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.</td> - </tr> - <tr> - <td>Permitted parent elements</td> - <td>A {{HTMLElement("tr")}} element.</td> - </tr> - <tr> - <td>Normative document</td> - <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element" rel="external nofollow" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element">HTML5, section 4.9.10</a> (<a href="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6" title="http://www.w3.org/TR/REC-html40/struct/tables.html#h-11.2.6">HTML4.01, section 11.2.6</a>)</td> - </tr> - </tbody> -</table> - -<h2 id="Attribute">Attribute</h2> - -<p>This element includes the <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" title="HTML/Global attributes">global attributes</a>.</p> - -<dl> - <dt>{{htmlattrdef("abbr")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>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. - <div class="note"><strong>Note: </strong>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 <strong>title</strong> attribute.</div> - </dd> - <dt>{{htmlattrdef("align")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>This enumerated attribute specifies how horizontal alignment of each cell content will be handled. Possible values are: - <ul> - <li><code>left</code>, aligning the content to the left of the cell</li> - <li><code>center</code>, centering the content in the cell</li> - <li><code>right</code>, aligning the content to the right of the cell</li> - <li><code>justify</code>, inserting spaces into the textual content so that the content is justified in the cell</li> - <li><code>char</code>, 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")}}.</li> - </ul> - - <p>If this attribute is not set, the <code>left</code> value is assumed.</p> - - <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (not supported) in the latest standard. - - <ul> - <li>To achieve the same effect as the <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code> values, use the CSS {{cssxref("text-align")}} property on it.</li> - <li>To achieve the same effect as the <code>char</code> value, in CSS3, you can use the value of the {{htmlattrxref("char", "th")}} as the value of the {{cssxref("text-align")}} property {{unimplemented_inline}}.</li> - </ul> - </div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("axis")}} {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>This attribute contains a list of space-separated strings. Each string is the id of a group of cells that this header apply to. - <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete in the latest standard: instead use the {{htmlattrxref("scope", "th")}} attribute.</div> - </dd> - <dt>{{htmlattrdef("bgcolor")}} {{Non-standard_inline}}</dt> - <dd>This attribute defines the background color of each cell of the column. It is one of the 6-digit hexadecimal code as defined in <a href="http://www.w3.org/Graphics/Color/sRGB" title="http://www.w3.org/Graphics/Color/sRGB">sRGB</a>, prefixed by a '#'. One of the sixteen predefined color strings may be used: - <table> - <tbody> - <tr> - <td style="background-color: black; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>black</code> = "#000000"</td> - <td style="background-color: green; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>green</code> = "#008000"</td> - </tr> - <tr> - <td style="background-color: silver; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>silver</code> = "#C0C0C0"</td> - <td style="background-color: lime; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>lime</code> = "#00FF00"</td> - </tr> - <tr> - <td style="background-color: gray; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>gray</code> = "#808080"</td> - <td style="background-color: olive; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>olive</code> = "#808000"</td> - </tr> - <tr> - <td style="background-color: white; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>white</code> = "#FFFFFF"</td> - <td style="background-color: yellow; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>yellow</code> = "#FFFF00"</td> - </tr> - <tr> - <td style="background-color: maroon; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>maroon</code> = "#800000"</td> - <td style="background-color: navy; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>navy</code> = "#000080"</td> - </tr> - <tr> - <td style="background-color: red; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>red</code> = "#FF0000"</td> - <td style="background-color: blue; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>blue</code> = "#0000FF"</td> - </tr> - <tr> - <td style="background-color: purple; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>purple</code> = "#800080"</td> - <td style="background-color: teal; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>teal</code> = "#008080"</td> - </tr> - <tr> - <td style="background-color: fuchsia; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>fuchsia</code> = "#FF00FF"</td> - <td style="background-color: aqua; width: 24px; height: 24px; border-width: 1px; border-color: black; border-style: solid;"> </td> - <td><code>aqua</code> = "#00FFFF"</td> - </tr> - </tbody> - </table> - - <div class="note"><strong>Usage note:</strong> 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 <a href="/en-US/docs/CSS" title="CSS">CSS</a>. To give a similar effect to the <strong>bgcolor</strong> attribute, use the <a href="/en-US/docs/CSS" title="CSS">CSS</a> property {{cssxref("background-color")}} instead.</div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("char")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>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 <code>char</code>, this attribute is ignored. - <div class="note"><strong>Note: </strong>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}}.</div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("charoff")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>This attribute is used to indicate the number of characters to offset the column data from the alignment characters specified by the <strong>char</strong> attribute. - <div class="note"><strong>Note: </strong>Do not use this attribute as it is obsolete (and not supported) in the latest standard.</div> - </dd> -</dl> - -<dl> - <dt>{{htmlattrdef("colspan")}}</dt> - <dd>This attribute contains a non-negative integer value that indicates on how many columns does the cell extend. Its default value is <code>1</code>; if its value is set to <code>0</code>, 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.</dd> - <dt>{{htmlattrdef("headers")}}</dt> - <dd>This attributes a list of space-separated strings, each corresponding to the <strong>id</strong> attribute of the {{HTMLElement("th")}} elements that applies to this element.</dd> - <dt>{{htmlattrdef("rowspan")}}</dt> - <dd>This attribute contains a non-negative integer value that indicates on how many rows does the cell extend. Its default value is <code>1</code>; if its value is set to <code>0</code>, 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.</dd> - <dt>{{htmlattrdef("scope")}}</dt> - <dd>This enumerated attribute defines the cells that the header defined in this {{HTMLElement("th")}} element relates to. It may have the following values: - <ul> - <li><code>row</code>, which means that the header relates to all cells in the row that this element belongs to;</li> - <li><code>col</code>, which means that the header relates to all cells in the column that this element belongs to;</li> - <li><code>rowgroup</code>, 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;</li> - <li><code>colgroup</code>, which means that the header relates to all remaining cells in the column group that this element belongs to;</li> - <li><em>auto</em></li> - </ul> - </dd> - <dt>{{htmlattrdef("valign")}} {{Deprecated_inline}} in {{HTMLVersionInline("4")}}, {{obsolete_inline}} in {{HTMLVersionInline("5")}}</dt> - <dd>This attribute specifies the vertical alignment of the text within each row of cells of the table header. Possible values for this attribute are: - <ul> - <li><code>baseline</code>, which will put the text as close to the bottom of the cell as it is possible, but align it on the <a href="http://en.wikipedia.org/wiki/Baseline_%28typography%29" title="http://en.wikipedia.org/wiki/Baseline_(typography)">baseline</a> of the characters instead of the bottom of them. If characters are all of the size, this has the same effect as <code>bottom</code>.</li> - <li><code>bottom</code>, which will put the text as close to the bottom of the cell as it is possible;</li> - <li><code>middle</code>, which will center the text in the cell;</li> - <li>and <code>top</code>, which will put the text as close to the top of the cell as it is possible.</li> - </ul> - - <div class="note"><strong>Note: </strong>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.</div> - </dd> - <dt>{{htmlattrdef("width")}} {{Deprecated_inline}} in {{HTMLVersionInline(4.01)}}</dt> - <dd>This attribute is used to define a recommended cell width. Properties <a href="/en-US/docs/Web/API/HTMLTableElement/cellSpacing">cellspacing</a> and <a href="/en-US/docs/Web/API/HTMLTableElement/cellPadding">cellpadding</a> 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. - <div class="note"><strong>Note: </strong>Do not use this attribute in the latest standard: instead set the CSS {{cssxref("width")}} property.</div> - </dd> -</dl> - -<h2 id="DOM_interface">DOM interface</h2> - -<p>This element implements the <code><a href="en-US/docs/Web/API/HTMLTableHeaderCellElement" title="DOM/HTMLTableHeaderCellElement">HTMLTableHeaderCellElement</a></code> interface.</p> - -<h2 id="Beispiele">Beispiele</h2> - -<p>See {{HTMLElement("table")}} for examples on <code><th></code>.</p> - -<h2 id="Kompatibilät">Kompatibilät</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>align/valign</code> attribute</td> - <td>1.0</td> - <td>{{CompatNo}} {{bug("915")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>char/charoff</code> attribute</td> - <td>1.0</td> - <td>{{CompatNo}} {{bug("2212")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - <tr> - <td><code>align/valign</code> attribute</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}} {{bug("915")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>char/charoff</code> attribute</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}} {{bug("2212")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td><code>bgcolor</code> attribute {{Non-standard_inline}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Siehe_auch">Siehe auch</h2> - -<ul> - <li>Other table-related HTML Elements: {{HTMLElement("caption")}}, {{HTMLElement("col")}}, {{HTMLElement("colgroup")}}, {{HTMLElement("table")}}, {{HTMLElement("tbody")}}, {{HTMLElement("td")}}, {{HTMLElement("tfoot")}}, {{HTMLElement("thead")}}, {{HTMLElement("tr")}}.</li> -</ul> - -<p>{{HTMLRef}}</p> 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 ---- -<div>{{HTMLSidebar("Global_attributes")}}</div> - -<p><span class="seoSummary">The <strong><code>is</code></strong> <a href="/en-US/docs/Web/HTML/Global_attributes">global attribute</a> allows you to specify that a standard HTML element should behave like a defined custom built-in element (see <a href="/en-US/docs/Web/Web_Components/Using_custom_elements">Using custom elements</a> for more details).</span></p> - -<p>This attribute can only be used if the specified custom element name has been successfully <a href="/en-US/docs/Web/API/CustomElementRegistry/define">defined</a> in the current document, and extends the element type it is being applied to.</p> - -<h2 id="Examples">Examples</h2> - -<p>The following code is taken from our <a href="https://github.com/mdn/web-components-examples/tree/master/word-count-web-component">word-count-web-component</a> example (<a href="https://mdn.github.io/web-components-examples/word-count-web-component/">see it live also</a>).</p> - -<pre class="brush: js">// 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' });</pre> - -<pre class="brush: html"><p is="word-count"></p></pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "custom-elements.html#attr-is", "is")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.global_attributes.is")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>All <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</li> -</ul> 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 ---- -<div>{{HTTPSidebar}}</div> - -<p>The <strong><code>Connection</code></strong> general header controls whether or not the network connection stays open after the current transaction finishes. If the value sent is <code>keep-alive</code>, the connection is persistent and not closed, allowing for subsequent requests to the same server to be done.</p> - -<div class="blockIndicator warning"> -<p>Connection-specific header fields such as {{HTTPHeader("Connection")}} and {{HTTPHeader("Keep-Alive")}} are <a href="https://tools.ietf.org/html/rfc7540#section-8.1.2.2">prohibited in HTTP/2</a>. 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.</p> -</div> - -<p>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 <code>Connection</code> 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).</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("General header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>yes</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox notranslate">Connection: keep-alive -Connection: close -</pre> - -<h2 id="Directives">Directives</h2> - -<dl> - <dt><code>close</code></dt> - <dd>Indicates that either the client or the server would like to close the connection. This is the default on HTTP/1.0 requests.</dd> - <dt>any comma-separated list of HTTP headers [Usually <code>keep-alive</code> only]</dt> - <dd>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.</dd> -</dl> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("http.headers.Connection")}}</p> 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 ---- -<div>{{HTTPSidebar}}</div> - -<p><span class="seoSummary">The <strong><code>SameSite</code></strong> attribute of the {{HTTPHeader("Set-Cookie")}} HTTP response header allows you to declare if your cookie should be restricted to a <a href="/en-US/docs/Web/HTTP/Cookies#Third-party_cookies">first-party</a> or same-site context. </span></p> - -<div class="blockIndicator note"> -<p>Standards related to the Cookie <code>SameSite</code> attribute recently changed such that:</p> - -<ul> - <li>The cookie-sending behaviour if <code>SameSite</code> is not specified is <code>SameSite=Lax</code>. Previously the default was that cookies were sent for all requests.</li> - <li>Cookies with <code>SameSite=None</code> must now also specify the <code>Secure</code> attribute (they require a secure context/HTTPS).</li> -</ul> - -<p>This article documents the new standard. See <a href="#Browser_compatibility">Browser Compatibility</a> below for information about specific versions where the behaviour changed.</p> -</div> - -<h2 id="Values">Values</h2> - -<p>The <code>SameSite</code> attribute accepts three values:</p> - -<h3 id="Lax"><code>Lax</code></h3> - -<p>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 <em>navigating to</em> the origin site (i.e. when following a link).</p> - -<p>This is the default cookie value if <code>SameSite</code> has not been explicitly specified in recent browser versions (see the "SameSite: Defaults to Lax" feature in the Browser Compatibility).</p> - -<div class="blockIndicator note"> -<p><code>Lax</code> replaced <code>None</code> 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.</p> -</div> - -<h3 id="Strict"><code>Strict</code></h3> - -<p>Cookies will only be sent in a first-party context and not be sent along with requests initiated by third party websites.</p> - -<h3 id="None"><code>None</code></h3> - -<p>Cookies will be sent in all contexts, i.e in responses to both first-party and cross-origin requests.If <code>SameSite=None</code> is set, the cookie <a href="/en-US/docs/Web/HTTP/Headers/Set-Cookie#Secure"><code>Secure</code></a> attribute must also be set (or the cookie will be blocked).</p> - -<h2 id="Fixing_common_warnings">Fixing common warnings</h2> - -<h3 id="SameSiteNone_requires_Secure"><code>SameSite=None</code> requires <code>Secure</code></h3> - -<p>Warnings like the ones below might appear in your console:</p> - -<pre class="syntaxbox notranslate">Cookie “<em>myCookie</em>” 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".</pre> - -<p>The warning appears because any cookie that requests <code>SameSite=None</code> but is not marked <code>Secure</code> will be rejected.</p> - -<pre class="example-bad notranslate">Set-Cookie: flavor=choco; SameSite=None</pre> - -<p>To fix this, you will have to add the <code>Secure</code> attribute to your <code>SameSite=None</code> cookies.</p> - -<pre class="example-good notranslate">Set-Cookie: flavor=choco; SameSite=None; <strong>Secure</strong></pre> - -<p>A <a href="#Secure"><code>Secure</code></a> cookie is only sent to the server with an encrypted request over the HTTPS protocol. Note that insecure sites (<code>http:</code>) can't set cookies with the <code>Secure</code> directive.</p> - -<div class="blockIndicator note"> -<p>On older browser versions you might simply get a warning that the cookie will be blocked in future. For example:</p> - -<pre class="syntaxbox notranslate">Cookie “<em>myCookie</em>” 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 -</pre> -</div> - -<h3 id="Cookies_without_SameSite_default_to_SameSiteLax">Cookies without <code>SameSite</code> default to <code>SameSite=Lax</code></h3> - -<p>Recent versions of modern browsers provide a more secure default for <code>SameSite</code> to your cookies and so the following message might appear in your console:</p> - -<pre class="syntaxbox notranslate">Cookie “<em>myCookie</em>” has “SameSite” policy set to “Lax” because it is missing a “SameSite” attribute, and “SameSite=Lax” is the default value for this attribute. -</pre> - -<p>The warning appears because the <code>SameSite</code> policy for a cookie was not explicitly specified:</p> - -<pre class="example-bad notranslate">Set-Cookie: flavor=choco</pre> - -<p>You should explicitly communicate the intended <code>SameSite</code> policy for your cookie (rather than relying on browsers to apply <code>SameSite=Lax</code> automatically). This will also improve the experience across browsers as not all of them default to <code>Lax</code> yet.</p> - -<pre class="example-good notranslate">Set-Cookie: flavor=choco; <strong>SameSite=Lax</strong></pre> - -<h2 id="Example"><strong>Example:</strong></h2> - -<pre class="notranslate">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] -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{RFC("6265", "Set-Cookie", "4.1")}}</td> - <td>HTTP State Management Mechanism</td> - </tr> - <tr> - <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-rfc6265bis-05">draft-ietf-httpbis-rfc6265bis-05</a></td> - <td>Cookie Prefixes, Same-Site Cookies, and Strict Secure Cookies</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("http.headers.Set-Cookie", 5)}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/HTTP/Cookies">HTTP cookies</a></li> - <li>{{HTTPHeader("Cookie")}}</li> - <li>{{domxref("Document.cookie")}}</li> - <li><a href="https://web.dev/samesite-cookies-explained/">Samesite cookies explained</a> (web.dev blog)</li> -</ul> 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 ---- -<div>{{HTTPSidebar}}</div> - -<p>The <strong>User-Agent</strong> 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.</p> - -<div class="note"> -<p>Please read <a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a> and why serving different Web pages or services to different browsers is usually a bad idea.</p> -</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Header type</th> - <td>{{Glossary("Request header")}}</td> - </tr> - <tr> - <th scope="row">{{Glossary("Forbidden header name")}}</th> - <td>no</td> - </tr> - </tbody> -</table> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox">User-Agent: <product> / <product-version> <comment> - -Common format for web browsers: - -User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions> -</pre> - -<h2 id="Directives">Directives</h2> - -<dl> - <dt><product></dt> - <dd>A product identifier</dd> - <dt><product-version></dt> - <dd>A version number of the product.</dd> - <dt><comment></dt> - <dd>Zero or more comments containing sub product information, for example.</dd> -</dl> - -<h2 id="Firefox_UA_string">Firefox UA string</h2> - -<p>For more details on Firefox and Gecko based user agent strings, see the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a>. The UA string of Firefox itself is broken down into four components:</p> - -<p><strong>Mozilla/5.0 (<em>platform</em>; rv:<em>geckoversion</em>) Gecko/<em>geckotrail</em> Firefox/<em>firefoxversion</em></strong></p> - -<ul> - <li><em><strong>Mozilla/5.0</strong></em> is the general token that says the browser is Mozilla compatible, and is common to almost every browser today.</li> - <li><strong><em>platform</em></strong> describes the native platform the browser is running on (e.g. Windows, Mac, Linux or Android), and whether or not it's a mobile phone. Firefox OS phones simply say "Mobile"; the web is the platform. Note that <strong><em>platform</em></strong> can consist of multiple "; "-separated tokens. See below for further details and examples.</li> - <li><strong>rv:<em>geckoversion</em></strong> indicates the release version of Gecko (such as <em>"17.0"</em>). In recent browsers, <strong><em>geckoversion</em></strong> is the same as <strong><em>firefoxversion</em></strong>.</li> - <li><strong><em>Gecko/geckotrail</em></strong> indicates that the browser is based on Gecko.</li> - <li>On Desktop, <em><strong>geckotrail</strong></em> is the fixed string "20100101"</li> - <li><em><strong>Firefox/firefoxversion</strong></em> indicates the browser is Firefox, and provides the version (such as "<em>17.0"</em>).</li> -</ul> - -<h3 id="Examples">Examples</h3> - -<pre>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 <em>x.y</em>; rv:42.0) Gecko/20100101 Firefox/42.0 -</pre> - -<h2 id="Chrome_UA_string">Chrome UA string</h2> - -<p>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".</p> - -<h3 id="Examples_2">Examples</h3> - -<pre>Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36</pre> - -<h2 id="Opera_UA_string">Opera UA string</h2> - -<p>The Opera browser is also based on the blink engine, which is why it almost looks the same, but adds "OPR/<version>".</p> - -<h3 id="Examples_3">Examples</h3> - -<pre>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</pre> - -<h2 id="Safari_UA_string">Safari UA string</h2> - -<p>In this example, the user agent string is mobile safari version. It contains the word "Mobile".</p> - -<h3 id="Examples_4">Examples</h3> - -<pre>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</pre> - -<h2 id="Internet_Explorer_UA_string">Internet Explorer UA string</h2> - -<h3 id="Examples_5">Examples</h3> - -<pre>Mozilla/5.0 (compatible; MSIE 9.0; Windows Phone OS 7.5; Trident/5.0; IEMobile/9.0)</pre> - -<h2 id="Crawler_and_bot_UA_strings">Crawler and bot UA strings</h2> - -<h3 id="Examples_6">Examples</h3> - -<pre>Googlebot/2.1 (+http://www.google.com/bot.html)</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Title</th> - </tr> - <tr> - <td>{{RFC("7231", "User-Agent", "5.5.3")}}</td> - <td>Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("http.headers.User-Agent")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://hacks.mozilla.org/2013/09/user-agent-detection-history-and-checklist/">User-Agent detection, history and checklist</a></li> - <li><a href="/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox">Firefox user agent string reference</a></li> - <li> - <p><a href="/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent">Browser detection using the user agent</a></p> - </li> -</ul> 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 ---- -<div> -<p><strong>Ein Hintergrund zu den Modulen</strong></p> - -<p><br> - 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).</p> - -<p>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).</p> - -<p>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.</p> - -<p>Übersetzt mit www.DeepL.com/Translator (kostenlose Version)</p> -</div> - -<h2 id="Browser_support">Browser support</h2> - -<p>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):</p> - -<h3 id="import">import</h3> - -<p>{{Compat("javascript.statements.import")}}</p> - -<h3 id="export">export</h3> - -<p>{{Compat("javascript.statements.export")}}</p> - -<h2 id="Introducing_an_example">Introducing an example</h2> - -<p>To demonstrate usage of modules, we've created a <a href="https://github.com/mdn/js-examples/tree/master/modules">simple set of examples</a> that you can find on GitHub. These examples demonstrate a simple set of modules that create a <a href="/en-US/docs/Web/HTML/Element/canvas" title="Use the HTML <canvas> element with either the canvas scripting API or the WebGL API to draw graphics and animations."><code><canvas></code></a> element on a webpage, and then draw (and report information about) different shapes on the canvas.</p> - -<p>These are fairly trivial, but have been kept deliberately simple to demonstrate modules clearly.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: If you want to download the examples and run them locally, you'll need to run them through a local web server.</p> -</div> - -<h2 id="Basic_example_structure">Basic example structure</h2> - -<p>In our first example (see <a href="https://github.com/mdn/js-examples/tree/master/modules/basic-modules">basic-modules</a>) we have a file structure as follows:</p> - -<pre>index.html -main.js -modules/ - canvas.js - square.js</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: All of the examples in this guide have basically the same structure; the above should start getting pretty familiar.</p> -</div> - -<p>The modules directory's two modules are described below:</p> - -<ul> - <li><code>canvas.js</code> — contains functions related to setting up the canvas: - - <ul> - <li><code>create()</code> — creates a canvas with a specified <code>width</code> and <code>height</code> inside a wrapper <a href="/en-US/docs/Web/HTML/Element/div" title="The HTML Content Division element (<div>) is the generic container for flow content. It has no effect on the content or layout until styled using CSS."><code><div></code></a> with a specified ID, which is itself appended inside a specified parent element. Returns an object containing the canvas's 2D context and the wrapper's ID.</li> - <li><code>createReportList()</code> — creates an unordered list appended inside a specified wrapper element, which can be used to output report data into. Returns the list's ID.</li> - </ul> - </li> - <li><code>square.js</code> — contains: - <ul> - <li><code>name</code> — a constant containing the string 'square'.</li> - <li><code>draw()</code> — draws a square on a specified canvas, with a specified size, position, and color. Returns an object containing the square's size, position, and color.</li> - <li><code>reportArea()</code> — writes a square's area to a specific report list, given its length.</li> - <li><code>reportPerimeter()</code> — writes a square's perimeter to a specific report list, given its length.</li> - </ul> - </li> -</ul> - -<h2 id="Aside_—_.mjs_versus_.js">Aside — <code>.mjs</code> versus <code>.js</code></h2> - -<p>Throughout this article, we've used <code>.js</code> extensions for our module files, but in other resources you may see the <code>.mjs</code> extension used instead. <a href="https://v8.dev/features/modules#mjs">V8's documentation recommends this</a>, for example. The reasons given are:</p> - -<ul> - <li>It is good for clarity, i.e. it makes it clear which files are modules, and which are regular JavaScript.</li> - <li>It ensures that your module files are parsed as a module by runtimes such as <a href="https://nodejs.org/api/esm.html#esm_enabling">Node.js</a>, and build tools such as <a href="https://babeljs.io/docs/en/options#sourcetype">Babel</a>.</li> -</ul> - -<p>However, we decided to keep to using <code>.js</code>, 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 <code>Content-Type</code> header that contains a JavaScript MIME type such as <code>text/javascript</code>. 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 <code>.js</code> files, but not yet for <code>.mjs</code> files. Servers that already serve <code>.mjs</code> files correctly include <a href="https://pages.github.com/">GitHub Pages</a> and <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> for Node.js.</p> - -<p>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 <code><a href="/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> for <code>.mjs</code> 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.</p> - -<p>For learning and portability purposes, we decided to keep to <code>.js</code>.</p> - -<p>If you really value the clarity of using <code>.mjs</code> for modules versus using <code>.js</code> for "normal" JavaScript files, but don't want to run into the problem described above, you could always use <code>.mjs</code> during development and convert them to <code>.js</code> during your build step.</p> - -<p>It is also worth noting that:</p> - -<ul> - <li>Some tools may never support <code>.mjs</code>, such as <a href="https://www.typescriptlang.org/">TypeScript</a>.</li> - <li>The <code><script type="module"></code> attribute is used to denote when a module is being pointed to, as you'll see below.</li> -</ul> - -<h2 id="Exporting_module_features">Exporting module features</h2> - -<p>The first thing you do to get access to module features is export them. This is done using the {{JSxRef("Statements/export", "export")}} statement.</p> - -<p>The easiest way to use it is to place it in front of any items you want exported out of the module, for example:</p> - -<pre class="brush: js;">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 - }; -}</pre> - -<p>You can export functions, <code>var</code>, <code>let</code>, <code>const</code>, and — as we'll see later — classes. They need to be top-level items; you can't use <code>export</code> inside a function, for example.</p> - -<p>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:</p> - -<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> - -<h2 id="Importing_features_into_your_script">Importing features into your script</h2> - -<p>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:</p> - -<pre class="brush: js;">import { name, draw, reportArea, reportPerimeter } from './modules/square.js';</pre> - -<p>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 <code>basic-modules</code> example would be <code>/js-examples/modules/basic-modules</code>.</p> - -<p>However, we've written the path a bit differently — we are using the dot (<code>.</code>) 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.</p> - -<p>So for example:</p> - -<pre>/js-examples/modules/basic-modules/modules/square.js</pre> - -<p>becomes</p> - -<pre>./modules/square.js</pre> - -<p>You can see such lines in action in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/basic-modules/main.js">main.js</a></code>.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: In some module systems, you can omit the file extension and the dot (e.g. <code>'/modules/square'</code>). This doesn't work in native JavaScript modules.</p> -</div> - -<p>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 <code>main.js</code>, below the import lines:</p> - -<pre class="brush: js;">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); -</pre> - -<h2 id="Applying_the_module_to_your_HTML">Applying the module to your HTML</h2> - -<p>Now we just need to apply the <code>main.js</code> module to our HTML page. This is very similar to how we apply a regular script to a page, with a few notable differences.</p> - -<p>First of all, you need to include <code>type="module"</code> in the <a href="/en-US/docs/Web/HTML/Element/script" title="The HTML <script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code><script></code></a> element, to declare this script as a module:</p> - -<pre class="brush: html; no-line-numbers"><script type="module" src="main.js"></script></pre> - -<p>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".</p> - -<p>You can only use <code>import</code> and <code>export</code> statements inside modules; not regular scripts.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: You can also import modules into internal scripts, as long as you include <code>type="module"</code>, for example <code><script type="module"> //include script here </script></code>.</p> -</div> - -<h2 id="Other_differences_between_modules_and_standard_scripts">Other differences between modules and standard scripts</h2> - -<ul> - <li>You need to pay attention to local testing — if you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server.</li> - <li>Also, note that you might get different behavior from sections of script defined inside modules as opposed to in standard scripts. This is because modules use {{JSxRef("Strict_mode", "strict mode", "", 1)}} automatically.</li> - <li>There is no need to use the <code>defer</code> attribute (see <a href="/en-US/docs/Web/HTML/Element/script#Attributes" title="The HTML <script> element is used to embed or reference executable code; this is typically used to embed or refer to JavaScript code."><code><script></code> attributes</a>) when loading a module script; modules are deferred automatically.</li> - <li>Modules are only executed once, even if they have been referenced in multiple <code><script></code> tags.</li> - <li>Last but not least, let's make this clear — module features are imported into the scope of a single script — they aren't available in the global scope. Therefore, you will only be able to access imported features in the script they are imported into, and you won't be able to access them from the JavaScript console, for example. You'll still get syntax errors shown in the DevTools, but you'll not be able to use some of the debugging techniques you might have expected to use.</li> -</ul> - -<h2 id="Default_exports_versus_named_exports">Default exports versus named exports</h2> - -<p>The functionality we've exported so far has been comprised of <strong>named exports</strong> — each item (be it a function, <code>const</code>, etc.) has been referred to by its name upon export, and that name has been used to refer to it on import as well.</p> - -<p>There is also a type of export called the <strong>default export</strong> — 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 <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 In Depth: Modules</a> by Jason Orendorff; search for "Default exports").</p> - -<p>Let's look at an example as we explain how it works. In our basic-modules <code>square.js</code> you can find a function called <code>randomSquare()</code> 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:</p> - -<pre class="brush: js;">export default randomSquare;</pre> - -<p>Note the lack of curly braces.</p> - -<p>We could instead prepend <code>export default</code> onto the function and define it as an anonymous function, like this:</p> - -<pre class="brush: js;">export default function(ctx) { - ... -}</pre> - -<p>Over in our <code>main.js</code> file, we import the default function using this line:</p> - -<pre class="brush: js;">import randomSquare from './modules/square.js';</pre> - -<p>Again, note the lack of curly braces. This is because there is only one default export allowed per module, and we know that <code>randomSquare</code> is it. The above line is basically shorthand for:</p> - -<pre class="brush: js;">import {default as randomSquare} from './modules/square.js';</pre> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The as syntax for renaming exported items is explained below in the <a href="#Renaming_imports_and_exports">Renaming imports and exports</a> section.</p> -</div> - -<h2 id="Avoiding_naming_conflicts">Avoiding naming conflicts</h2> - -<p>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 <code>draw()</code>, <code>reportArea()</code>, 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.</p> - -<p>Fortunately there are a number of ways to get around this. We'll look at these in the following sections.</p> - -<h2 id="Renaming_imports_and_exports">Renaming imports and exports</h2> - -<p>Inside your <code>import</code> and <code>export</code> statement's curly braces, you can use the keyword <code>as</code> along with a new feature name, to change the identifying name you will use for a feature inside the top-level module.</p> - -<p>So for example, both of the following would do the same job, albeit in a slightly different way:</p> - -<pre class="brush: js;">// inside module.js -export { - function1 as newFunctionName, - function2 as anotherNewFunctionName -}; - -// inside main.js -import { newFunctionName, anotherNewFunctionName } from './modules/module.js';</pre> - -<pre class="brush: js;">// inside module.js -export { function1, function2 }; - -// inside main.js -import { function1 as newFunctionName, - function2 as anotherNewFunctionName } from './modules/module.js';</pre> - -<p>Let's look at a real example. In our <a href="https://github.com/mdn/js-examples/tree/master/modules/renaming">renaming</a> directory you'll see the same module system as in the previous example, except that we've added <code>circle.js</code> and <code>triangle.js</code> modules to draw and report on circles and triangles.</p> - -<p>Inside each of these modules, we've got features with the same names being exported, and therefore each has the same <code>export</code> statement at the bottom:</p> - -<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> - -<p>When importing these into <code>main.js</code>, if we tried to use</p> - -<pre class="brush: js;">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';</pre> - -<p>The browser would throw an error such as "SyntaxError: redeclaration of import name" (Firefox).</p> - -<p>Instead we need to rename the imports so that they are unique:</p> - -<pre class="brush: js;">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';</pre> - -<p>Note that you could solve the problem in the module files instead, e.g.</p> - -<pre class="brush: js;">// in square.js -export { name as squareName, - draw as drawSquare, - reportArea as reportSquareArea, - reportPerimeter as reportSquarePerimeter };</pre> - -<pre class="brush: js;">// in main.js -import { squareName, drawSquare, reportSquareArea, reportSquarePerimeter } from './modules/square.js';</pre> - -<p>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.</p> - -<h2 id="Creating_a_module_object">Creating a module object</h2> - -<p>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:</p> - -<pre class="brush: js;">import * as Module from './modules/module.js';</pre> - -<p>This grabs all the exports available inside <code>module.js</code>, and makes them available as members of an object <code>Module</code>, effectively giving it its own namespace. So for example:</p> - -<pre class="brush: js;">Module.function1() -Module.function2() -etc.</pre> - -<p>Again, let's look at a real example. If you go to our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-objects">module-objects</a> 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:</p> - -<pre class="brush: js;">export { name, draw, reportArea, reportPerimeter };</pre> - -<p>The imports on the other hand look like this:</p> - -<pre class="brush: js;">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';</pre> - -<p>In each case, you can now access the module's imports underneath the specified object name, for example:</p> - -<pre class="brush: js;">let square1 = Square.draw(myCanvas.ctx, 50, 50, 100, 'blue'); -Square.reportArea(square1.length, reportList); -Square.reportPerimeter(square1.length, reportList);</pre> - -<p>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.</p> - -<h2 id="Modules_and_classes">Modules and classes</h2> - -<p>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.</p> - -<p>You can see an example of our shape drawing module rewritten with ES classes in our <a href="https://github.com/mdn/js-examples/tree/master/modules/classes">classes</a> directory. As an example, the <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/modules/square.js">square.js</a></code> file now contains all its functionality in a single class:</p> - -<pre class="brush: js;">class Square { - constructor(ctx, listId, length, x, y, color) { - ... - } - - draw() { - ... - } - - ... -}</pre> - -<p>which we then export:</p> - -<pre class="brush: js;">export { Square };</pre> - -<p>Over in <code><a href="https://github.com/mdn/js-examples/blob/master/modules/classes/main.js">main.js</a></code>, we import it like this:</p> - -<pre class="brush: js;">import { Square } from './modules/square.js';</pre> - -<p>And then use the class to draw our square:</p> - -<pre class="brush: js;">let square1 = new Square(myCanvas.ctx, myCanvas.listId, 50, 50, 100, 'blue'); -square1.draw(); -square1.reportArea(); -square1.reportPerimeter();</pre> - -<h2 id="Aggregating_modules">Aggregating modules</h2> - -<p>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:</p> - -<pre class="brush: js;">export * from 'x.js' -export { name } from 'x.js'</pre> - -<p>For an example, see our <a href="https://github.com/mdn/js-examples/tree/master/modules/module-aggregation">module-aggregation</a> directory. In this example (based on our earlier classes example) we've got an extra module called <code>shapes.js</code>, which aggregates all the functionality from <code>circle.js</code>, <code>square.js</code>, and <code>triangle.js</code> together. We've also moved our submodules inside a subdirectory inside the <code>modules</code> directory called <code>shapes</code>. So the module structure in this example is:</p> - -<pre>modules/ - canvas.js - shapes.js - shapes/ - circle.js - square.js - triangle.js</pre> - -<p>In each of the submodules, the export is of the same form, e.g.</p> - -<pre class="brush: js;">export { Square };</pre> - -<p>Next up comes the aggregation part. Inside <code><a href="https://github.com/mdn/js-examples/blob/master/modules/module-aggregation/modules/shapes.js">shapes.js</a></code>, we include the following lines:</p> - -<pre class="brush: js;">export { Square } from './shapes/square.js'; -export { Triangle } from './shapes/triangle.js'; -export { Circle } from './shapes/circle.js';</pre> - -<p>These grab the exports from the individual submodules and effectively make them available from the <code>shapes.js</code> module.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: The exports referenced in <code>shapes.js</code> 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.</p> -</div> - -<p>So now in the <code>main.js</code> file, we can get access to all three module classes by replacing</p> - -<pre class="brush: js;">import { Square } from './modules/square.js'; -import { Circle } from './modules/circle.js'; -import { Triangle } from './modules/triangle.js';</pre> - -<p>with the following single line:</p> - -<pre class="brush: js;">import { Square, Circle, Triangle } from './modules/shapes.js';</pre> - -<h2 id="Dynamic_module_loading">Dynamic module loading</h2> - -<p>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.</p> - -<p>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 <a href="#Creating_a_module_object">Creating a module object</a>) giving you access to that object's exports, e.g.</p> - -<pre class="brush: js;">import('./modules/myModule.js') - .then((module) => { - // Do something with the module. - });</pre> - -<p>Let's look at an example. In the <a href="https://github.com/mdn/js-examples/tree/master/modules/dynamic-module-imports">dynamic-module-imports</a> 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.</p> - -<p>In this example we've only made changes to our <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/index.html">index.html</a></code> and <code><a href="https://github.com/mdn/js-examples/blob/master/modules/dynamic-module-imports/main.mjs">main.js</a></code> files — the module exports remain the same as before.</p> - -<p>Over in <code>main.js</code> we've grabbed a reference to each button using a <a href="/en-US/docs/Web/API/Document/querySelector"><code>Document.querySelector()</code></a> call, for example:</p> - -<pre class="brush: js;">let squareBtn = document.querySelector('.square');</pre> - -<p>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:</p> - -<pre class="brush: js;">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(); - }) -});</pre> - -<p>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 <code>Module.</code> prepended to it, e.g. <code>Module.Square( ... )</code>.</p> - -<h2 id="Troubleshooting">Troubleshooting</h2> - -<p>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!</p> - -<ul> - <li>We mentioned this before, but to reiterate: <code>.js</code> files need to be loaded with a MIME-type of <code>text/javascript</code> (or another JavaScript-compatible MIME-type, but <code>text/javascript</code> is recommended), otherwise you'll get a strict MIME type checking error like "The server responded with a non-JavaScript MIME type".</li> - <li>If you try to load the HTML file locally (i.e. with a <code>file://</code> URL), you'll run into CORS errors due to JavaScript module security requirements. You need to do your testing through a server. GitHub pages is ideal as it also serves <code>.js</code> files with the correct MIME type.</li> - <li>Because <code>.mjs</code> is a non-standard file extension, some operating systems might not recognise it, or try to replace it with something else. For example, we found that macOS was silently adding on <code>.js</code> to the end of <code>.mjs</code> files and then automatically hiding the file extension. So all of our files were actually coming out as <code>x.mjs.js</code>. Once we turned off automatically hiding file extensions, and trained it to accept <code>.mjs</code>, it was OK.</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://developers.google.com/web/fundamentals/primers/modules#mjs">Using JavaScript modules on the web</a>, by Addy Osmani and Mathias Bynens</li> - <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> - <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> - <li>Axel Rauschmayer's book <a href="http://exploringjs.com/es6/ch_modules.html">Exploring JS: Modules</a></li> -</ul> - -<p>{{Previous("Web/JavaScript/Guide/Meta_programming")}}</p> 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__ ---- -<div>{{JSRef}}</div> - -<div class="warning"> -<p>This feature is deprecated in favor of defining getters using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer syntax</a> or the {{jsxref("Object.defineProperty()")}} API. While this feature is widely implemented, it is only described in the <a href="https://tc39.github.io/ecma262/#sec-additional-ecmascript-features-for-web-browsers">ECMAScript specification</a> because of legacy usage. This method should not be used since better alternatives exist.</p> -</div> - -<p>Die <code><strong>__defineGetter__</strong></code> Methode bindet eine Eigenschaft des Objects an eine Funktion, die aufgerufen wird, wenn das Object angesehen wird.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>obj</var>.__defineGetter__(<var>prop</var>, <var>func</var>)</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>prop</code></dt> - <dd><code>Ein String der den Namen der zur Funktion gebundenen Eigenschaft enthält</code></dd> - <dt><code>func</code></dt> - <dd><code>Eine Funktion die zur Eigenschaft gebunden wird.</code></dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>{{jsxref("undefined")}}.</p> - -<h2 id="Description">Description</h2> - -<p>Die <code>__defineGetter__</code> erlaubt einen {{jsxref("Operators/get", "getter", "", 1)}} auf ein Object zu erstellen.</p> - -<h2 id="Examples">Examples</h2> - -<pre class="brush: js">// 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 -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="spectable standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object.prototype.__defineGetter__', 'Object.prototype.__defineGetter__()')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td>Included in the (normative) annex for additional ECMAScript legacy features for Web browsers (note that the specification codifies what is already in implementations).</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatIE("11")}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="Compatibility_notes">Compatibility notes</h2> - -<ul> - <li>Starting with Firefox 48 {{geckoRelease(48)}}, this method can no longer be called at the global scope without any object. A {{jsxref("TypeError")}} will be thrown otherwise. Previously, the global object was used in these cases automatically, but this is no longer the case ({{bug(1253016)}}).</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Object.prototype.__defineSetter__()")}}</li> - <li>{{jsxref("Operators/get", "get")}} operator</li> - <li>{{jsxref("Object.defineProperty()")}}</li> - <li>{{jsxref("Object.prototype.__lookupGetter__()")}}</li> - <li>{{jsxref("Object.prototype.__lookupSetter__()")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">JS Guide: Defining Getters and Setters</a></li> - <li><a href="https://whereswalden.com/2010/04/16/more-spidermonkey-changes-ancient-esoteric-very-rarely-used-syntax-for-creating-getters-and-setters-is-being-removed/">[Blog Post] Deprecation of __defineGetter__ and __defineSetter__</a></li> - <li>{{bug(647423)}}</li> -</ul> 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 ---- -<div>{{JSRef}}</div> - -<p>The <code><strong>RangeError</strong></code> object indicates an error when a value is not in the set or range of allowed values.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><code>new RangeError([<var>message</var>[, <var>fileName</var>[, <var>lineNumber</var>]]])</code></pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><code>message</code></dt> - <dd>Optional. Human-readable description of the error</dd> - <dt><code>fileName</code> {{non-standard_inline}}</dt> - <dd>Optional. The name of the file containing the code that caused the exception</dd> - <dt><code>lineNumber</code> {{non-standard_inline}}</dt> - <dd>Optional. The line number of the code that caused the exception</dd> -</dl> - -<h2 id="Description">Description</h2> - -<p>A <code>RangeError</code> 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()")}}.</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{jsxref("RangeError.prototype")}}</dt> - <dd>Allows the addition of properties to an <code>RangeError</code> object.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p>The global <code>RangeError</code> contains no methods of its own, however, it does inherit some methods through the prototype chain.</p> - -<h2 id="RangeError_instances"><code>RangeError</code> instances</h2> - -<h3 id="Properties_2">Properties</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Properties')}}</div> - -<h3 id="Methods_2">Methods</h3> - -<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype', 'Methods')}}</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_RangeError">Using <code>RangeError</code></h3> - -<pre class="brush: js">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 - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES3')}}</td> - <td>{{Spec2('ES3')}}</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.11.6.2', 'RangeError')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-native-error-types-used-in-this-standard-rangeerror', 'RangeError')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Error")}}</li> - <li>{{jsxref("RangeError.prototype")}}</li> - <li>{{jsxref("Array")}}</li> - <li>{{jsxref("Number.toExponential()")}}</li> - <li>{{jsxref("Number.toFixed()")}}</li> - <li>{{jsxref("Number.toPrecision()")}}</li> -</ul> 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 ---- -<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Manifest")}}</div> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Type</th> - <td><code>String</code></td> - </tr> - <tr> - <th scope="row">Mandatory</th> - <td>No</td> - </tr> - </tbody> -</table> - -<p>The <code><dfn>short_name</dfn></code> member is a string that represents the name of the web application displayed to the user if there is not enough space to display <code><a href="./name">name</a></code> (e.g., as a label for an icon on the phone home screen). <code>short_name</code> is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the <code><a href="./dir">dir</a></code> and <code><a href="./lang">lang</a></code> manifest members.</p> - -<h2 id="Examples">Examples</h2> - -<p>Simple <code>short_name</code> in left-to-right language:</p> - -<pre class="brush: json notranslate">"name": "Awesome application", -"short_name": "Awesome app"</pre> - -<p><code>short_name</code> in Arabic, which will be displayed right-to-left:</p> - -<pre class="brush: json notranslate" dir="rtl"><code>"dir": "rtl", -"lang": "ar", -"nam</code>e": "تطبيق رائع", -"short_name": "رائع" -</pre> - -<h2 id="Specification">Specification</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - <th scope="col">Feedback</th> - </tr> - </thead> - <tbody> - <tr> - <td> - <p>{{SpecName('Manifest', '#short_name-member', 'short_name')}}</p> - </td> - <td> - <p>{{Spec2('Manifest')}}</p> - </td> - <td> - <p>Initial definition.</p> - </td> - <td> - <p><a href="https://github.com/w3c/manifest/issues/">Web App Manifest Working Group drafts</a></p> - </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("html.manifest.short_name")}}</p> 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 ---- -<p>Dieses Dokument beschreibt die Schnittstelle zu <a href="/en-US/docs/XPath" title="en/XPath">XPath</a> in JavaScript intern, in Erweiterungen und in Webseiten. Mozilla implementiert einen großen Teil von <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/xpath.html">DOM 3 XPath</a>, sodass XPath auf HTML- und XML-Dokumente angewendet werden kann.</p> - -<p>Die Hauptschnittstelle für die Anwendung von XPath ist die <a href="/en-US/docs/Web/API/document.evaluate" title="en/DOM/document.evaluate">evaluate</a>-Methode des <a href="/en-US/Web/API/document" title="en/DOM/document">document</a>-Objekts.</p> - -<h2 id="document.evaluate" name="document.evaluate">document.evaluate</h2> - -<p>Diese Methode wertet <a href="/en-US/docs/XPath" title="en/XPath">XPath</a> Ausdrücke in Bezug auf ein <a href="/en-US/docs/Glossary/XML" title="en/XML">XML</a> basierendes Dokument (einschließlich HTML-Documente) aus und gibt ein <code><a href="/en-US/docs/XPathResult" title="en/XPathResult">XPathResult</a></code>-Objekt zurück, das ein Einzelknoten oder eine Zusammenstellung mehrerer Knoten sein kann. Die vorhandene Dokumentation dieser Methode ist unter <a href="/en-US/docs/Web/API/Document.evaluate" title="en/DOM/document.evaluate">document.evaluate</a> zu finden, sie ist jedoch für unseren jetzigen Bedarf ziemlich knapp gehalten. Eine umfangreichere Betrachtung wird nachfolgend beschrieben.</p> - -<pre class="brush: js">var xpathResult = document.evaluate( xpathExpression, contextNode, namespaceResolver, resultType, result ); -</pre> - -<h3 id="Parameters" name="Parameters">Parameter</h3> - -<p>Die <a href="/en-US/docs/Web/API/Document.evaluate" title="en/DOM/document.evaluate">evaluate</a> Funktion nimmt insgesamt fünf Parameter entgegen:</p> - -<ul> - <li><code>xpathExpression</code>: Eine Zeichenkette, die den auszuwertenden XPath-Ausdrucks beinhaltet.</li> - <li><code>contextNode</code>: Ein Bezugsknoten im Dokument, auf den sich die Auswertung von <code>xpathExpression</code> beziehen soll, einschließlich sämtlicher Kindknoten. Am häufigsten wird hierfür der <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a>-Knoten verwendet.</li> - <li><code>namespaceResolver</code>: A function that will be passed any namespace prefixes contained within <code>xpathExpression</code> which returns a string representing the namespace URI associated with that prefix. This enables conversion between the prefixes used in the XPath expressions and the possibly different prefixes used in the document. The function can be either: - <ul> - <li><a href="#Implementing_a_Default_Namespace_Resolver">Created</a> by using the <code><a href="/en-US/docs/Web/API/Document.createNSResolver" title="en/DOM/document.createNSResolver">createNSResolver</a></code> method of a <code><a href="/en-US/docs/Using_XPath#Node-specific_evaluator_function" title="en/XPathEvaluator">XPathEvaluator</a></code> object. You should use this virtually all of the time.</li> - <li><code>null</code>, which can be used for HTML documents or when no namespace prefixes are used. Note that, if the <code>xpathExpression</code> contains a namespace prefix, this will result in a <code>DOMException</code> being thrown with the code <code>NAMESPACE_ERR</code>.</li> - <li>A custom user-defined function. See the <a href="#Implementing_a_User_Defined_Namespace_Resolver">Using a User Defined Namespace Resolver</a> section in the appendix for details.</li> - </ul> - </li> - <li><code>resultType</code>: Eine <a href="#XPathResult_Defined_Constants">Konstante</a>, die den gewünschten Rückgabetyp als Ergebnis der Auswertung angibt. Die am häufigsten übergebene Konstante ist <code>XPathResult.ANY_TYPE</code>, die eine Rückgabe der Ergebnisse in in einer Weise liefert, die den sebstverständlichen Erwartungen am ehesten entspricht. Im Anhang ist ein Abschnitt zu finden, der eine vollständige Liste der der <a href="#XPathResult_Defined_Constants">verfügbaren Konstanten</a> enthält. Sie werden weiter unten im Abschnitt "<a href="#Specifying_the_Return_Type">Festlegung des Rückgabetyps</a>" erläutert.</li> - <li><code>result</code>: Wird ein vorhandenes <code>XPathResult</code>-Objekt angegeben, so wird es für die Ergebnisrückgabe wiederverwendet. Bei der Angabe von <code>null</code> wird ein neues <code>XPathResult</code>-Objekt erzeugt.</li> -</ul> - -<h3 id="Return_Value" name="Return_Value">Rückgabewert</h3> - -<p>Returns <code>xpathResult</code>, which is an <code>XPathResult</code> object of the type <a href="#Specifying_the_Return_Type">specified</a> in the <code>resultType</code> parameter. The <code>XPathResult</code> Interface is defined {{ Source("dom/interfaces/xpath/nsIDOMXPathResult.idl", "here") }}.</p> - -<h3 id="Implementing_a_Default_Namespace_Resolver" name="Implementing_a_Default_Namespace_Resolver">Einen Standard-Namensraumauflöser (Default Namespace Resolver) implementieren</h3> - -<p>Wir erstellen einen Namensraumauflöser mit Hilfe der <code>createNSResolver</code>-Methode des <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a>-Objekts.</p> - -<pre class="brush: js">var nsResolver = document.createNSResolver( contextNode.ownerDocument == null ? contextNode.documentElement : contextNode.ownerDocument.documentElement ); -</pre> - -<p><span class="comment">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></span> And then pass <code>document.evaluate</code>, the <code>nsResolver</code> variable as the <code>namespaceResolver</code> parameter.</p> - -<p>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., <code>p[@id='_myid']</code> for <code><span class="nowiki">xmlns='http://www.w3.org/1999/xhtml</span>'</code>). To match default elements in a non-null namespace, you either have to refer to a particular element using a form such as <code>['namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code> (<a href="#Using_XPath_functions_to_reference_elements_with_a_default_namespace">this approach</a> 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 <a href="#Implementing_a_User_Defined_Namespace_Resolver">how to create a user defined namespace resolver</a>, if you wish to take the latter approach.</p> - -<h3 id="Notes" name="Notes">Anmerkungen</h3> - -<p>Adapts any DOM node to resolve namespaces so that an <a href="/en-US/docs/XPath" title="en/XPath">XPath</a> 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 <code>lookupNamespaceURI</code> on nodes in resolving the <code>namespaceURI</code> from a given prefix using the current information available in the node's hierarchy at the time <code>lookupNamespaceURI</code> is called. Also correctly resolves the implicit <code>xml</code> prefix.</p> - -<h3 id="Specifying_the_Return_Type" name="Specifying_the_Return_Type">Festlegung des Rückgabetyps</h3> - -<p>The returned variable <code>xpathResult</code> from <code>document.evaluate</code> can either be composed of individual nodes (<a href="#Simple_Types">simple types</a>), or a collection of nodes (<a href="#Node-Set_Types">node-set types</a>).</p> - -<h4 id="Simple_Types" name="Simple_Types">Simple Types</h4> - -<p>When the desired result type in <code>resultType</code> is specified as either:</p> - -<ul> - <li><code>NUMBER_TYPE</code> - a double</li> - <li><code>STRING_TYPE</code> - a string</li> - <li><code>BOOLEAN_TYPE</code> - a boolean</li> -</ul> - -<p>We obtain the returned value of the expression by accessing the following properties respectively of the <code>XPathResult</code> object.</p> - -<ul> - <li><code>numberValue</code></li> - <li><code>stringValue</code></li> - <li><code>booleanValue</code></li> -</ul> - -<h5 id="Example" name="Example">Beispiel</h5> - -<p>The following uses the XPath expression <code><a href="/en-US/docs/XPath/Functions/count" title="en/XPath/Functions/count">count(//p)</a></code> to obtain the number of <code><p></code> elements in a HTML document:</p> - -<pre class="brush: js">var paragraphCount = document.evaluate( 'count(//p)', document, null, XPathResult.ANY_TYPE, null ); - -alert( 'This document contains ' + paragraphCount.numberValue + ' paragraph elements' ); -</pre> - -<p>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 <code>stringValue</code> property is requested, so the following code will <strong>not</strong> work:</p> - -<pre class="brush: js">var paragraphCount = document.evaluate('count(//p)', document, null, XPathResult.ANY_TYPE, null ); - -alert( 'This document contains ' + paragraphCount.stringValue + ' paragraph elements' ); -</pre> - -<p>Instead it will return an exception with the code <code>NS_DOM_TYPE_ERROR</code>.</p> - -<h4 id="Node-Set_Types" name="Node-Set_Types">Node-Set-Typen</h4> - -<p>The <code>XPathResult</code> object allows node-sets to be returned in 3 principal different types:</p> - -<ul> - <li><a href="#Iterators">Iterators</a></li> - <li><a href="#Snapshots">Snapshots</a></li> - <li><a href="#First_Node">First Nodes</a></li> -</ul> - -<h5 id="Iterators" name="Iterators">Iteratoren</h5> - -<p>When the specified result type in the <code>resultType</code> parameter is either:</p> - -<ul> - <li><code>UNORDERED_NODE_ITERATOR_TYPE</code></li> - <li><code>ORDERED_NODE_ITERATOR_TYPE</code></li> -</ul> - -<p>The <code>XPathResult</code> 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 <code>iterateNext()</code> method of the <code>XPathResult</code>.</p> - -<p>Once we have iterated over all of the individual matched nodes, <code>iterateNext()</code> will return <code>null</code>.</p> - -<p>Note however, that if the document is mutated (the document tree is modified) between iterations that will invalidate the iteration and the <code>invalidIteratorState</code> property of <code>XPathResult</code> is set to <code>true</code>, and a <code>NS_ERROR_DOM_INVALID_STATE_ERR</code> exception is thrown.</p> - -<h6 id="Iterator_Example" name="Iterator_Example">Iterator Example</h6> - -<pre class="brush: js">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 ); -} -</pre> - -<h5 id="Snapshots" name="Snapshots">Momentabbilder (Snapshots)</h5> - -<p>When the specified result type in the <code>resultType</code> parameter is either:</p> - -<ul> - <li><code>UNORDERED_NODE_SNAPSHOT_TYPE</code></li> - <li><code>ORDERED_NODE_SNAPSHOT_TYPE</code></li> -</ul> - -<p>The <code>XPathResult</code> object returned is a static node-set of matched nodes, which allows us to access each node through the <code>snapshotItem(itemNumber)</code> method of the <code>XPathResult</code> object, where <code>itemNumber</code> is the index of the node to be retrieved. The total number of nodes contained can be accessed through the <code>snapshotLength</code> property.</p> - -<p>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.</p> - -<h6 id="Snapshot_Example" name="Snapshot_Example">Snapshot Example</h6> - -<pre class="brush: js">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 ); -} -</pre> - -<h5 id="First_Node" name="First_Node">Erster Knoten</h5> - -<p>When the specified result type in the <code>resultType</code> parameter is either:</p> - -<ul> - <li><code>ANY_UNORDERED_NODE_TYPE</code></li> - <li><code>FIRST_ORDERED_NODE_TYPE</code></li> -</ul> - -<p>The <code>XPathResult</code> object returned is only the first found node that matched the XPath expression. This can be accessed through the <code>singleNodeValue</code> property of the <code>XPathResult</code> object. This will be <code>null</code> if the node set is empty.</p> - -<p>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.</p> - -<h6 id="First_Node_Example" name="First_Node_Example">First Node Example</h6> - -<pre class="brush: js">var firstPhoneNumber = document.evaluate('//phoneNumber', documentNode, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null ); - -dump( 'The first phone number found is ' + firstPhoneNumber.singleNodeValue.textContent ); -</pre> - -<h4 id="The_ANY_TYPE_Constant" name="The_ANY_TYPE_Constant">Die Konstante ANY_TYPE</h4> - -<p>When the result type in the <code>resultType</code> parameter is specified as <code>ANY_TYPE</code>, the <code>XPathResult</code> object returned, will be whatever type that naturally results from the evaluation of the expression.</p> - -<p>It could be any of the simple types (<code>NUMBER_TYPE, STRING_TYPE, BOOLEAN_TYPE</code>), <strong>but</strong>, if the returned result type is a node-set then it will <strong>only</strong> be an <code>UNORDERED_NODE_ITERATOR_TYPE</code>.</p> - -<p>To determine that type after evaluation, we use the <code>resultType</code> property of the <code>XPathResult</code> object. The <a href="#XPathResult_Defined_Constants">constant</a> values of this property are defined in the appendix. <span class="comment">None Yet =====Any_Type Example===== <pre> </pre></span></p> - -<h2 id="Examples" name="Examples">Beispiele</h2> - -<h3 id="Within_an_HTML_Document" name="Within_an_HTML_Document">Innerhalb eines HTML-Dokuments</h3> - -<p>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.</p> - -<p>To extract all the <code><h2></code> heading elements in an HTML document using XPath, the <code>xpathExpression</code> is simply '<code>//h2</code>'. Where, <code>//</code> is the Recursive Descent Operator that matches elements with the nodeName <code>h2</code> anywhere in the document tree. The full code for this is: <span class="comment">link to introductory xpath doc</span></p> - -<pre class="brush: js">var headings = document.evaluate('//h2', document, null, XPathResult.ANY_TYPE, null ); -</pre> - -<p>Notice that, since HTML does not have namespaces, we have passed <code>null</code> for the <code>namespaceResolver</code> parameter.</p> - -<p>Since we wish to search over the entire document for the headings, we have used the <a href="/en-US/docs/Web/API/document" title="en/DOM/document">document</a> object itself as the <code>contextNode</code>.</p> - -<p>The result of this expression is an <code>XPathResult</code> object. If we wish to know the type of result returned, we may evaluate the <code>resultType</code> property of the returned object. In this case, that will evaluate to <code>4</code>, an <code>UNORDERED_NODE_ITERATOR_TYPE</code>. 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 <code>iterateNext()</code> method of the returned object:</p> - -<pre class="brush: js">var thisHeading = headings.iterateNext(); - -var alertText = 'Level 2 headings in this document are:\n' - -while (thisHeading) { - alertText += thisHeading.textContent + '\n'; - thisHeading = headings.iterateNext(); -} -</pre> - -<p>Once we iterate to a node, we have access to all the standard DOM interfaces on that node. After iterating through all the <code>h2</code> elements returned from our expression, any further calls to <code>iterateNext()</code> will return <code>null</code>.</p> - -<h3 id="Evaluating_against_an_XML_document_within_an_Extension" name="Evaluating_against_an_XML_document_within_an_Extension">Auswertung an einem XML-Dokument innerhalb einer Erweiterung</h3> - -<p>The following uses an XML document located at <span class="nowiki">chrome://yourextension/content/peopleDB.xml</span> as an example.</p> - -<pre class="brush: xml"><?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> -</pre> - -<p>To make the contents of the XML document available within the extension, we create an <code><a href="/en-US/docs/Web/API/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></code> object to load the document synchronously, the variable <code>xmlDoc</code> will contain the document as an <code><a href="/en-US/docs/Web/API/XMLDocument" title="en/XMLDocument">XMLDocument</a></code> object against which we can use the <code>evaluate</code> method</p> - -<p>JavaScript used in the extensions xul/js documents.</p> - -<pre class="brush: js">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 ); -</pre> - -<h3 id="Anmerkung">Anmerkung</h3> - -<p>When the XPathResult object is not defined, the constants can be retreived in privileged code using <code>Components.interfaces.nsIDOMXPathResult.ANY_TYPE</code> (<code>CI.nsIDOMXPathResult</code>). Similarly, an XPathEvaluator can be created using:</p> - -<pre class="brush: js">Components.classes["@mozilla.org/dom/xpath-evaluator;1"].createInstance(Components.interfaces.nsIDOMXPathEvaluator)</pre> - -<h2 id="Appendix" name="Appendix">Anhang</h2> - -<h4 id="Implementing_a_User_Defined_Namespace_Resolver" name="Implementing_a_User_Defined_Namespace_Resolver">Einen benutzerdefinierten Namensauflöser implementieren</h4> - -<p>This is an example for illustration only. This function will need to take namespace prefixes from the <code>xpathExpression</code> and return the URI that corresponds to that prefix. For example, the expression:</p> - -<pre>'//xhtml:td/mathml:math' -</pre> - -<p>will select all <a href="/en-US/docs/Web/API/MathML" title="en/MathML">MathML</a> expressions that are the children of (X)HTML table data cell elements.</p> - -<p>In order to associate the '<code>mathml:</code>' prefix with the namespace URI '<code><span class="nowiki">http://www.w3.org/1998/Math/MathML</span></code>' and '<code>xhtml:</code>' with the URI '<code><span class="nowiki">http://www.w3.org/1999/xhtml</span></code>' we provide a function:</p> - -<pre class="brush: js">function nsResolver(prefix) { - var ns = { - 'xhtml' : 'http://www.w3.org/1999/xhtml', - 'mathml': 'http://www.w3.org/1998/Math/MathML' - }; - return ns[prefix] || null; -} -</pre> - -<p>Our call to <code>document.evaluate</code> would then looks like:</p> - -<pre class="brush: js">document.evaluate( '//xhtml:td/mathml:math', document, nsResolver, XPathResult.ANY_TYPE, null ); -</pre> - -<h4 id="Implementing_a_default_namespace_for_XML_documents" name="Implementing_a_default_namespace_for_XML_documents">Einen Standard-Namensrauf für XML-Dokumente implementieren</h4> - -<p>As noted in the <a href="#Implementing_a_Default_Namespace_Resolver">Implementing a Default Namespace Resolver</a> previously, the default resolver does not handle the default namespace for XML documents. For example with this document:</p> - -<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> -<feed xmlns="http://www.w3.org/2005/Atom"> - <entry /> - <entry /> - <entry /> -</feed> -</pre> - -<p><code>doc.evaluate('//entry', doc, nsResolver, XPathResult.ANY_TYPE, null)</code> will return an empty set, where <code>nsResolver</code> is the resolver returned by <code>createNSResolver</code>. Passing a <code>null</code> resolver doesn't work any better, either.</p> - -<p>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.:</p> - -<pre class="brush: js">function resolver() { - return 'http://www.w3.org/2005/Atom'; -} -doc.evaluate('//myns:entry', doc, resolver, XPathResult.ANY_TYPE, null) -</pre> - -<p>Note that a more complex resolver will be required if the document uses multiple namespaces.</p> - -<p>An approach which might work better (and allow namespaces not to be known ahead of time) is described in the next section.</p> - -<h4 id="Using_XPath_functions_to_reference_elements_with_a_default_namespace" name="Using_XPath_functions_to_reference_elements_with_a_default_namespace">Using XPath functions to reference elements with a default namespace</h4> - -<p>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 <code>[namespace-uri()='<span class="nowiki">http://www.w3.org/1999/xhtml</span>' and name()='p' and @id='_myid']</code>. This circumvents the problem of an XPath query not being able to detect the default namespace on a regularly labeled element.</p> - -<h4 id="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix" name="Getting_specifically_namespaced_elements_and_attributes_regardless_of_prefix">Getting specifically namespaced elements and attributes regardless of prefix</h4> - -<p>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.</p> - -<p>While one can adapt the approach in the above section to test for namespaced elements regardless of the prefix chosen (using <code><a href="/en-US/docs/XPath/Functions/local-name" title="en/XPath/Functions/local-name">local-name()</a></code> in combination with <code><a href="/en-US/docs/XPath/Functions/namespace-uri" title="en/XPath/Functions/namespace-uri">namespace-uri()</a></code> instead of <code><a href="/en-US/docs/XPath/Functions/name" title="en/XPath/Functions/name">name()</a></code>), 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).</p> - -<p>For example, one might try (incorrectly) to grab an element with a namespaced attribute as follows: <code>var xpathlink = someElements[local-name(@*)="href" and namespace-uri(@*)='<span class="nowiki">http://www.w3.org/1999/xlink</span>'];</code></p> - -<p>This could inadvertently grab some elements if one of its attributes existed that had a local name of "<code>href</code>", but it was a different attribute which had the targeted (XLink) namespace (instead of <code><a href="/en/XPath/Axes/attribute" title="en/XPath/Axes/attribute">@href</a></code>).</p> - -<p>In order to accurately grab elements with the XLink <code>@href</code> attribute (without also being confined to predefined prefixes in a namespace resolver), one could obtain them as follows:</p> - -<pre class="brush: js">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(); -</pre> - -<h4 id="XPathResult_Defined_Constants" name="XPathResult_Defined_Constants">In XPathResult definierte Konstanten</h4> - -<table class="standard-table"> - <thead> - <tr> - <td class="header">Result Type Defined Constant</td> - <td class="header">Value</td> - <td class="header">Description</td> - </tr> - </thead> - <tbody> - <tr> - <td>ANY_TYPE</td> - <td>0</td> - <td>A 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.</td> - </tr> - <tr> - <td>NUMBER_TYPE</td> - <td>1</td> - <td>A result containing a single number. This is useful for example, in an XPath expression using the <code>count()</code> function.</td> - </tr> - <tr> - <td>STRING_TYPE</td> - <td>2</td> - <td>A result containing a single string.</td> - </tr> - <tr> - <td>BOOLEAN_TYPE</td> - <td>3</td> - <td>A result containing a single boolean value. This is useful for example, in an XPath expression using the <code>not()</code> function.</td> - </tr> - <tr> - <td>UNORDERED_NODE_ITERATOR_TYPE</td> - <td>4</td> - <td>A 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.</td> - </tr> - <tr> - <td>ORDERED_NODE_ITERATOR_TYPE</td> - <td>5</td> - <td>A 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.</td> - </tr> - <tr> - <td>UNORDERED_NODE_SNAPSHOT_TYPE</td> - <td>6</td> - <td>A 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.</td> - </tr> - <tr> - <td>ORDERED_NODE_SNAPSHOT_TYPE</td> - <td>7</td> - <td>A 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.</td> - </tr> - <tr> - <td>ANY_UNORDERED_NODE_TYPE</td> - <td>8</td> - <td>A 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.</td> - </tr> - <tr> - <td>FIRST_ORDERED_NODE_TYPE</td> - <td>9</td> - <td>A result node-set containing the first node in the document that matches the expression.</td> - </tr> - </tbody> -</table> - -<h2 id="See_also" name="See_also">Siehe auch</h2> - -<ul> - <li><a href="/en-US/docs/Web/XPath">XPath</a></li> - <li><a href="http://www.xml.com/pub/a/2000/08/holman/index.html?page=2#xpath-info">XML Path Language </a>from <em><a href="http://www.xml.com/pub/a/2000/08/holman/">What is XSLT?</a> </em>by G. Ken Holman</li> -</ul> - -<div class="originaldocinfo"> -<h2 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h2> - -<ul> - <li>Based Upon Original Document <a class="external" href="http://www-xray.ast.cam.ac.uk/~jgraham/mozilla/xpath-tutorial.html">Mozilla XPath Tutorial</a></li> - <li>Original Source Author: James Graham.</li> - <li>Other Contributors: James Thompson.</li> - <li>Last Updated Date: 2006-3-25.</li> -</ul> -</div> |