diff options
42 files changed, 0 insertions, 10499 deletions
diff --git a/files/es/_redirects.txt b/files/es/_redirects.txt index 8783b96121..90b0245be0 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -73,7 +73,6 @@ /es/docs/CSS/border-image /es/docs/Web/CSS/border-image /es/docs/CSS/border-left /es/docs/Web/CSS/border-left /es/docs/CSS/border-left-color /es/docs/Web/CSS/border-left-color -/es/docs/CSS/border-radius /es/docs/Web/CSS/border-radius /es/docs/CSS/border-spacing /es/docs/Web/CSS/border-spacing /es/docs/CSS/border-style /es/docs/Web/CSS/border-style /es/docs/CSS/border-width /es/docs/Web/CSS/border-width @@ -401,7 +400,6 @@ /es/docs/Dibujar_texto_usando_canvas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_text /es/docs/DragDrop/Drag_and_Drop /es/docs/Web/API/HTML_Drag_and_Drop_API /es/docs/DragDrop/Drag_and_Drop/drag_and_drop_archivo /es/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop -/es/docs/DragDrop/Recommended_Drag_Types /es/docs/Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types /es/docs/Drawing_text_using_a_canvas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_text /es/docs/EXSLT /es/docs/Web/EXSLT /es/docs/EXSLT/exsl /es/docs/Web/EXSLT/exsl @@ -465,7 +463,6 @@ /es/docs/FUEL:Window /es/docs/FUEL/Window /es/docs/Firefox_1.5 /es/docs/Mozilla/Firefox/Releases/1.5 /es/docs/Firefox_1.5_para_Desarrolladores /es/docs/Mozilla/Firefox/Releases/1.5 -/es/docs/Firefox_19_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/19 /es/docs/Firefox_2 /es/docs/Mozilla/Firefox/Releases/2 /es/docs/Firefox_2_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/2 /es/docs/Firefox_3.1_para_desarrolladores /es/docs/Mozilla/Firefox/Releases/3.5 @@ -1026,7 +1023,6 @@ /es/docs/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /es/docs/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent /es/docs/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI -/es/docs/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent /es/docs/JavaScript/Referencia/Funciones_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite /es/docs/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN @@ -1202,7 +1198,6 @@ /es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos /es/docs/Learn/Getting_started_with_the_web/Dealing_with_files /es/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/Forms/How_to_structure_a_web_form /es/docs/Learn/HTML/Forms/My_first_HTML_form /es/docs/Learn/Forms/Your_first_form -/es/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_controls /es/docs/Learn/Forms/Property_compatibility_table_for_form_controls /es/docs/Learn/HTML/Forms/Prueba_tus_habilidades:_Otros_controles /es/docs/Learn/Forms/Test_your_skills:_Other_controls /es/docs/Learn/HTML/Forms/Prueba_tus_habilidades:_controles_HTML5 /es/docs/Learn/Forms/Test_your_skills:_HTML5_controls /es/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data /es/docs/Learn/Forms/Sending_and_retrieving_form_data @@ -1239,8 +1234,6 @@ /es/docs/Learn/Herramientas_y_pruebas/Understanding_client-side_tools /es/docs/Learn/Tools_and_testing/Understanding_client-side_tools /es/docs/Learn/JavaScript/Building_blocks/Bucle_codigo /es/docs/Learn/JavaScript/Building_blocks/Looping_code /es/docs/Learn/JavaScript/Building_blocks/Construyendo_tu_propia_funcion /es/docs/Learn/JavaScript/Building_blocks/Build_your_own_function -/es/docs/Learn/JavaScript/Building_blocks/Eventos /es/docs/Learn/JavaScript/Building_blocks/Events -/es/docs/Learn/JavaScript/Building_blocks/Galeria_de_imagenes /es/docs/Learn/JavaScript/Building_blocks/Image_gallery /es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción /es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction /es/docs/Learn/JavaScript/First_steps/Generador_de_historias_absurdas /es/docs/Learn/JavaScript/First_steps/Silly_story_generator /es/docs/Learn/JavaScript/First_steps/Matemáticas /es/docs/Learn/JavaScript/First_steps/Math @@ -1330,7 +1323,6 @@ /es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent /es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI -/es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent /es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite /es/docs/Referencia_de_JavaScript_1.5/Funciones_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN @@ -1459,7 +1451,6 @@ /es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent /es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI -/es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent /es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite /es/docs/Referencia_de_JavaScript_1.5:Funciones_globales:isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN @@ -1791,7 +1782,6 @@ /es/docs/Web/CSS/transform-function/translateY /es/docs/Web/CSS/transform-function/translateY() /es/docs/Web/CSS/transform-function/translateZ /es/docs/Web/CSS/transform-function/translateZ() /es/docs/Web/CSS/var /es/docs/Web/CSS/var() -/es/docs/Web/Events/DOMContentLoaded /es/docs/Web/API/Window/DOMContentLoaded_event /es/docs/Web/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event /es/docs/Web/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event /es/docs/Web/Events/blur /es/docs/Web/API/Element/blur_event @@ -1816,14 +1806,12 @@ /es/docs/Web/Guide/AJAX/Primeros_Pasos /es/docs/Web/Guide/AJAX/Getting_Started /es/docs/Web/Guide/API/Vibration /es/docs/Web/API/Vibration_API /es/docs/Web/Guide/CSS /es/docs/Learn/CSS -/es/docs/Web/Guide/CSS/probando_media_queries /es/docs/Web/CSS/Media_Queries/Testing_media_queries /es/docs/Web/Guide/HTML /es/docs/Learn/HTML /es/docs/Web/Guide/HTML/Canvas_tutorial /es/docs/Web/API/Canvas_API/Tutorial /es/docs/Web/Guide/HTML/Canvas_tutorial/Advanced_animations /es/docs/Web/API/Canvas_API/Tutorial/Advanced_animations /es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_animations /es/docs/Web/API/Canvas_API/Tutorial/Basic_animations /es/docs/Web/Guide/HTML/Canvas_tutorial/Basic_usage /es/docs/Web/API/Canvas_API/Tutorial/Basic_usage /es/docs/Web/Guide/HTML/Canvas_tutorial/Dibujando_formas /es/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes -/es/docs/Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility /es/docs/Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility /es/docs/Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas /es/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas /es/docs/Web/Guide/HTML/Canvas_tutorial/Pixel_manipulation_with_canvas /es/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas /es/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form /es/docs/Learn/Forms/How_to_structure_a_web_form @@ -1837,7 +1825,6 @@ /es/docs/Web/Guide/Usando_Objetos_FormData /es/docs/Web/API/FormData/Using_FormData_Objects /es/docs/Web/HTML/Atributos /es/docs/Web/HTML/Attributes /es/docs/Web/HTML/Atributos/accept /es/docs/Web/HTML/Attributes/accept -/es/docs/Web/HTML/Atributos/autocomplete /es/docs/Web/HTML/Attributes/autocomplete /es/docs/Web/HTML/Atributos/min /es/docs/Web/HTML/Attributes/min /es/docs/Web/HTML/Atributos/minlength /es/docs/Web/HTML/Attributes/minlength /es/docs/Web/HTML/Atributos/multiple /es/docs/Web/HTML/Attributes/multiple @@ -1873,7 +1860,6 @@ /es/docs/Web/HTML/Elemento/Audio2 /es/docs/Web/HTML/Element/audio /es/docs/Web/HTML/Elemento/Elementos_títulos /es/docs/Web/HTML/Element/Heading_Elements /es/docs/Web/HTML/Elemento/Progreso /es/docs/Web/HTML/Element/progress -/es/docs/Web/HTML/Elemento/Shadow /es/docs/Web/HTML/Element/shadow /es/docs/Web/HTML/Elemento/a /es/docs/Web/HTML/Element/a /es/docs/Web/HTML/Elemento/abbr /es/docs/Web/HTML/Element/abbr /es/docs/Web/HTML/Elemento/acronym /es/docs/Web/HTML/Element/acronym @@ -2173,7 +2159,6 @@ /es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /es/docs/Web/JavaScript/Referencia/Funciones_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI -/es/docs/Web/JavaScript/Referencia/Funciones_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Funciones_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite /es/docs/Web/JavaScript/Referencia/Funciones_globales/isNaN /es/docs/Web/JavaScript/Reference/Global_Objects/isNaN /es/docs/Web/JavaScript/Referencia/Funciones_globales/parseInt /es/docs/Web/JavaScript/Reference/Global_Objects/parseInt @@ -2480,7 +2465,6 @@ /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURI /es/docs/Web/JavaScript/Referencia/Objetos_globales/decodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/decodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURI /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURI -/es/docs/Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent /es/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent /es/docs/Web/JavaScript/Referencia/Objetos_globales/escape /es/docs/Web/JavaScript/Reference/Global_Objects/escape /es/docs/Web/JavaScript/Referencia/Objetos_globales/eval /es/docs/Web/JavaScript/Reference/Global_Objects/eval /es/docs/Web/JavaScript/Referencia/Objetos_globales/isFinite /es/docs/Web/JavaScript/Reference/Global_Objects/isFinite @@ -2563,7 +2547,6 @@ /es/docs/Web/JavaScript/Referencia/Sentencias/try...catch /es/docs/Web/JavaScript/Reference/Statements/try...catch /es/docs/Web/JavaScript/Referencia/Sentencias/var /es/docs/Web/JavaScript/Reference/Statements/var /es/docs/Web/JavaScript/Referencia/Sentencias/while /es/docs/Web/JavaScript/Reference/Statements/while -/es/docs/Web/JavaScript/Referencia/Sentencias/with /es/docs/Web/JavaScript/Reference/Statements/with /es/docs/Web/JavaScript/Referencia/template_strings /es/docs/Web/JavaScript/Reference/Template_literals /es/docs/Web/JavaScript/Una_nueva_introducción_a_JavaScript /es/docs/Web/JavaScript/A_re-introduction_to_JavaScript /es/docs/Web/JavaScript/Una_re-introducción_a_JavaScript /es/docs/Web/JavaScript/A_re-introduction_to_JavaScript @@ -2574,7 +2557,6 @@ /es/docs/Web/Performance/mejorando_rendimienot_inicial /es/docs/Web/Performance/Optimizing_startup_performance /es/docs/Web/Progressive_web_apps/Developer_guide/Instalar /es/docs/Web/Progressive_web_apps/Developer_guide/Installing /es/docs/Web/Reference/Events /es/docs/Web/Events -/es/docs/Web/Reference/Events/DOMContentLoaded /es/docs/Web/API/Window/DOMContentLoaded_event /es/docs/Web/Reference/Events/DOMSubtreeModified /es/docs/Web/Events/DOMSubtreeModified /es/docs/Web/Reference/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event /es/docs/Web/Reference/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event @@ -2641,7 +2623,6 @@ /es/docs/Web/XSLT/key /es/docs/Web/XSLT/Element/key /es/docs/Web/XSLT/message /es/docs/Web/XSLT/Element/message /es/docs/Web/XSLT/namespace-alias /es/docs/Web/XSLT/Element/namespace-alias -/es/docs/Web/XSLT/number /es/docs/Web/XSLT/Element/number /es/docs/Web/XSLT/otherwise /es/docs/Web/XSLT/Element/otherwise /es/docs/Web/XSLT/when /es/docs/Web/XSLT/Element/when /es/docs/Web/XSLT/with-param /es/docs/Web/XSLT/Element/with-param @@ -2724,7 +2705,6 @@ /es/docs/XSLT/key /es/docs/Web/XSLT/Element/key /es/docs/XSLT/message /es/docs/Web/XSLT/Element/message /es/docs/XSLT/namespace-alias /es/docs/Web/XSLT/Element/namespace-alias -/es/docs/XSLT/number /es/docs/Web/XSLT/Element/number /es/docs/XSLT/otherwise /es/docs/Web/XSLT/Element/otherwise /es/docs/XSLT/when /es/docs/Web/XSLT/Element/when /es/docs/XSLT/with-param /es/docs/Web/XSLT/Element/with-param @@ -2748,7 +2728,6 @@ /es/docs/XSLT:key /es/docs/Web/XSLT/Element/key /es/docs/XSLT:message /es/docs/Web/XSLT/Element/message /es/docs/XSLT:namespace-alias /es/docs/Web/XSLT/Element/namespace-alias -/es/docs/XSLT:number /es/docs/Web/XSLT/Element/number /es/docs/XSLT:otherwise /es/docs/Web/XSLT/Element/otherwise /es/docs/XSLT:when /es/docs/Web/XSLT/Element/when /es/docs/XSLT:with-param /es/docs/Web/XSLT/Element/with-param diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index e87c40ab52..83a0192a58 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -12,13 +12,6 @@ "chrisdavidmills" ] }, - "Games/Anatomy": { - "modified": "2019-01-16T22:18:47.235Z", - "contributors": [ - "wbamberg", - "cnaucler" - ] - }, "Games/Introduction": { "modified": "2020-11-28T21:23:49.961Z", "contributors": [ @@ -2356,12 +2349,6 @@ "eljonims" ] }, - "Learn/Forms/Property_compatibility_table_for_form_controls": { - "modified": "2020-08-30T01:12:52.090Z", - "contributors": [ - "edchasw" - ] - }, "Learn/Forms/Sending_and_retrieving_form_data": { "modified": "2020-07-16T22:21:26.056Z", "contributors": [ @@ -2956,14 +2943,6 @@ "madmaxdios" ] }, - "Learn/JavaScript/Asynchronous/Async_await": { - "modified": "2020-11-12T21:09:30.375Z", - "contributors": [ - "sargentogato", - "oscartzgz", - "SphinxKnight" - ] - }, "Learn/JavaScript/Asynchronous/Concepts": { "modified": "2020-11-19T20:30:13.091Z", "contributors": [ @@ -2996,32 +2975,6 @@ "carlosgocereceda" ] }, - "Learn/JavaScript/Building_blocks/Events": { - "modified": "2020-07-16T22:31:37.027Z", - "contributors": [ - "jhonarielgj", - "sebastiananea", - "maximilianotulian", - "ismamz" - ] - }, - "Learn/JavaScript/Building_blocks/Functions": { - "modified": "2020-10-10T22:09:39.322Z", - "contributors": [ - "GianGuerra", - "pmusetti", - "pablorebora", - "blanchart", - "Alessa", - "DanielAgustinTradito" - ] - }, - "Learn/JavaScript/Building_blocks/Image_gallery": { - "modified": "2020-07-16T22:31:42.753Z", - "contributors": [ - "amIsmael" - ] - }, "Learn/JavaScript/Building_blocks/Looping_code": { "modified": "2020-10-10T18:54:10.014Z", "contributors": [ @@ -3542,14 +3495,6 @@ "javierdelpino" ] }, - "Learn/Server-side/Django/django_assessment_blog": { - "modified": "2020-07-16T22:37:48.773Z", - "contributors": [ - "ricardo-soria", - "matiexe", - "javierdelpino" - ] - }, "Learn/Server-side/Django/skeleton_website": { "modified": "2020-07-16T22:36:52.017Z", "contributors": [ @@ -3560,14 +3505,6 @@ "javierdelpino" ] }, - "Learn/Server-side/Django/web_application_security": { - "modified": "2020-07-16T22:37:45.102Z", - "contributors": [ - "sebastianmr6", - "ricardo-soria", - "javierdelpino" - ] - }, "Learn/Server-side/Express_Nodejs": { "modified": "2020-07-16T22:37:51.529Z", "contributors": [ @@ -4235,15 +4172,6 @@ "Epaclon" ] }, - "Mozilla/Firefox/Releases/19": { - "modified": "2019-03-18T20:54:04.568Z", - "contributors": [ - "ulisestrujillo", - "wbamberg", - "Sebastianz", - "mannyatico" - ] - }, "Mozilla/Firefox/Releases/2": { "modified": "2019-03-23T23:58:56.168Z", "contributors": [ @@ -4429,13 +4357,6 @@ "JoaLop" ] }, - "Mozilla/Firefox/Releases/63": { - "modified": "2019-03-18T21:22:18.650Z", - "contributors": [ - "SphinxKnight", - "Dev-MADJ" - ] - }, "Mozilla/Firefox/Releases/66": { "modified": "2019-05-09T17:56:10.878Z", "contributors": [ @@ -4491,12 +4412,6 @@ "dinoop.p1" ] }, - "Tools/3D_View": { - "modified": "2020-07-16T22:34:25.151Z", - "contributors": [ - "rmilano" - ] - }, "Tools/Browser_Console": { "modified": "2020-07-16T22:35:42.205Z", "contributors": [ @@ -4539,12 +4454,6 @@ "drdavi7@hotmail.com" ] }, - "Tools/Debugger/How_to/Set_a_breakpoint": { - "modified": "2020-07-16T22:35:09.854Z", - "contributors": [ - "erickton" - ] - }, "Tools/Debugger/How_to/Use_a_source_map": { "modified": "2020-07-16T22:35:12.325Z", "contributors": [ @@ -4647,14 +4556,6 @@ "amaiafilo" ] }, - "Tools/Page_Inspector/How_to/Work_with_animations": { - "modified": "2020-07-16T22:34:36.333Z", - "contributors": [ - "lyono666", - "angelmillan", - "fmagrosoto" - ] - }, "Tools/Page_Inspector/UI_Tour": { "modified": "2020-07-16T22:34:48.922Z", "contributors": [ @@ -4710,12 +4611,6 @@ "maedca" ] }, - "Tools/Settings": { - "modified": "2020-07-16T22:36:34.818Z", - "contributors": [ - "amaiafilo" - ] - }, "Tools/Storage_Inspector": { "modified": "2020-07-16T22:36:09.696Z", "contributors": [ @@ -4986,12 +4881,6 @@ "rayrojas" ] }, - "Web/API/AudioNode": { - "modified": "2020-10-15T22:15:25.198Z", - "contributors": [ - "rayrojas" - ] - }, "Web/API/BaseAudioContext": { "modified": "2019-03-18T21:00:34.809Z", "contributors": [ @@ -5378,12 +5267,6 @@ "Debianpc" ] }, - "Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility": { - "modified": "2019-03-18T21:31:01.983Z", - "contributors": [ - "cepeami01" - ] - }, "Web/API/Canvas_API/Tutorial/Optimizing_canvas": { "modified": "2019-03-23T23:18:04.030Z", "contributors": [ @@ -6803,13 +6686,6 @@ "carlosbulnes" ] }, - "Web/API/FileSystem": { - "modified": "2019-07-04T14:31:32.136Z", - "contributors": [ - "lperezp", - "jpmontoya182" - ] - }, "Web/API/FormData": { "modified": "2020-10-15T21:22:58.694Z", "contributors": [ @@ -7080,12 +6956,6 @@ "empirreamm" ] }, - "Web/API/HTMLCanvasElement/toBlob": { - "modified": "2019-03-23T22:44:55.955Z", - "contributors": [ - "kodamirmo" - ] - }, "Web/API/HTMLCanvasElement/toDataURL": { "modified": "2020-10-15T21:38:42.950Z", "contributors": [ @@ -7429,18 +7299,6 @@ "rgomez" ] }, - "Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types": { - "modified": "2019-03-23T23:18:24.597Z", - "contributors": [ - "Evinton" - ] - }, - "Web/API/Headers": { - "modified": "2020-10-15T22:07:38.324Z", - "contributors": [ - "Estebanrg21" - ] - }, "Web/API/History": { "modified": "2020-10-15T22:28:24.964Z", "contributors": [ @@ -7658,12 +7516,6 @@ "PatoDeTuring" ] }, - "Web/API/MediaSource": { - "modified": "2019-03-23T22:38:20.191Z", - "contributors": [ - "Lazaro" - ] - }, "Web/API/MediaStreamAudioSourceNode": { "modified": "2019-03-18T20:35:52.439Z", "contributors": [ @@ -8816,12 +8668,6 @@ "karlalhdz" ] }, - "Web/API/WebVTT_API": { - "modified": "2020-10-15T22:33:07.538Z", - "contributors": [ - "Pablo-No" - ] - }, "Web/API/Web_Audio_API": { "modified": "2019-03-23T23:31:19.634Z", "contributors": [ @@ -8918,18 +8764,6 @@ "Mgjbot" ] }, - "Web/API/Window/DOMContentLoaded_event": { - "modified": "2019-09-06T00:37:43.389Z", - "contributors": [ - "wbamberg", - "jramcast", - "ExE-Boss", - "fscholz", - "AlexOfSoCal", - "jdmgarcia", - "daniville" - ] - }, "Web/API/Window/alert": { "modified": "2019-03-23T22:27:29.008Z", "contributors": [ @@ -9365,14 +9199,6 @@ "benjroy" ] }, - "Web/API/Worker/postMessage": { - "modified": "2020-04-23T06:46:10.302Z", - "contributors": [ - "aguilahorus", - "cristyansv", - "mar777" - ] - }, "Web/API/Worker/terminate": { "modified": "2019-03-23T22:19:14.265Z", "contributors": [ @@ -9401,12 +9227,6 @@ "Jorolo" ] }, - "Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests": { - "modified": "2019-03-23T22:05:30.902Z", - "contributors": [ - "Juvenal-yescas" - ] - }, "Web/API/XMLHttpRequest/Using_XMLHttpRequest": { "modified": "2020-03-17T04:09:47.273Z", "contributors": [ @@ -10624,13 +10444,6 @@ "israel-munoz" ] }, - "Web/CSS/@document": { - "modified": "2020-10-15T22:01:34.650Z", - "contributors": [ - "SphinxKnight", - "lsosa81" - ] - }, "Web/CSS/@font-face": { "modified": "2019-09-26T12:01:00.515Z", "contributors": [ @@ -11219,13 +11032,6 @@ "cristianmartinez" ] }, - "Web/CSS/Cascade": { - "modified": "2020-04-20T15:19:07.785Z", - "contributors": [ - "arjusgit", - "tw1ttt3r" - ] - }, "Web/CSS/Child_combinator": { "modified": "2019-03-23T22:17:17.663Z", "contributors": [ @@ -11284,12 +11090,6 @@ "mikelmg" ] }, - "Web/CSS/Media_Queries/Testing_media_queries": { - "modified": "2019-03-23T23:07:40.812Z", - "contributors": [ - "TibicenasDesign" - ] - }, "Web/CSS/Media_Queries/Using_media_queries": { "modified": "2019-10-03T11:52:26.928Z", "contributors": [ @@ -11675,12 +11475,6 @@ "ethertank" ] }, - "Web/CSS/background-position-x": { - "modified": "2020-10-15T22:33:04.718Z", - "contributors": [ - "Ismael_Diaz" - ] - }, "Web/CSS/background-repeat": { "modified": "2020-10-15T21:16:00.953Z", "contributors": [ @@ -12007,18 +11801,6 @@ "Wrongloop" ] }, - "Web/CSS/border-radius": { - "modified": "2019-03-23T23:37:30.234Z", - "contributors": [ - "Barleby", - "Simplexible", - "Sebastianz", - "Prinz_Rana", - "teoli", - "bytx", - "wilo" - ] - }, "Web/CSS/border-right": { "modified": "2020-10-15T22:17:02.534Z", "contributors": [ @@ -12181,15 +11963,6 @@ "nadiafaya" ] }, - "Web/CSS/clip-path": { - "modified": "2020-10-15T21:54:58.750Z", - "contributors": [ - "fscholz", - "jorgeherrera9103", - "david-velilla", - "CarlosLinares" - ] - }, "Web/CSS/color": { "modified": "2020-10-15T21:15:23.982Z", "contributors": [ @@ -13934,13 +13707,6 @@ "Nachec" ] }, - "Web/HTML/Attributes/autocomplete": { - "modified": "2019-04-06T00:39:59.162Z", - "contributors": [ - "qmarquez", - "Raulpascual2" - ] - }, "Web/HTML/Attributes/crossorigin": { "modified": "2019-03-23T22:46:11.986Z", "contributors": [ @@ -14943,12 +14709,6 @@ "AleV" ] }, - "Web/HTML/Element/shadow": { - "modified": "2019-03-23T22:06:38.273Z", - "contributors": [ - "H4isan" - ] - }, "Web/HTML/Element/slot": { "modified": "2020-10-15T22:05:53.326Z", "contributors": [ @@ -19711,16 +19471,6 @@ "Sheppy" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { - "modified": "2020-03-12T19:37:33.179Z", - "contributors": [ - "jazjay", - "SphinxKnight", - "teoli", - "Mgjbot", - "Sheppy" - ] - }, "Web/JavaScript/Reference/Global_Objects/escape": { "modified": "2020-10-15T21:56:14.356Z", "contributors": [ @@ -20435,13 +20185,6 @@ "Talisker" ] }, - "Web/JavaScript/Reference/Statements/with": { - "modified": "2020-03-12T19:42:08.065Z", - "contributors": [ - "MarkelCuesta", - "lokcito" - ] - }, "Web/JavaScript/Reference/Strict_mode": { "modified": "2020-08-30T21:51:49.146Z", "contributors": [ @@ -20522,16 +20265,6 @@ "maedca" ] }, - "Web/MathML/Authoring": { - "modified": "2019-03-23T23:27:02.180Z", - "contributors": [ - "rafaqtro", - "fred.wang", - "voylinux", - "robertoasq", - "maedca" - ] - }, "Web/MathML/Element": { "modified": "2019-03-23T23:37:26.121Z", "contributors": [ @@ -20570,12 +20303,6 @@ "vltamara" ] }, - "Web/Media/Formats": { - "modified": "2020-07-15T09:47:42.018Z", - "contributors": [ - "Sheppy" - ] - }, "Web/OpenSearch": { "modified": "2019-03-24T00:00:08.096Z", "contributors": [ @@ -20742,13 +20469,6 @@ "humbertaco" ] }, - "Web/SVG/Element/foreignObject": { - "modified": "2019-03-23T23:05:21.297Z", - "contributors": [ - "Sebastianz", - "THernandez03" - ] - }, "Web/SVG/Element/g": { "modified": "2019-03-23T22:54:18.875Z", "contributors": [ @@ -21330,15 +21050,6 @@ "ErickCastellanos" ] }, - "Web/XSLT/Element/number": { - "modified": "2019-03-18T20:59:21.341Z", - "contributors": [ - "SphinxKnight", - "chrisdavidmills", - "Mgjbot", - "ErickCastellanos" - ] - }, "Web/XSLT/Element/otherwise": { "modified": "2019-03-18T20:59:16.726Z", "contributors": [ diff --git a/files/es/games/anatomy/index.html b/files/es/games/anatomy/index.html deleted file mode 100644 index 799f31f931..0000000000 --- a/files/es/games/anatomy/index.html +++ /dev/null @@ -1,325 +0,0 @@ ---- -title: Anatomy of a video game -slug: Games/Anatomy -tags: - - Bucle - - JavaScript - - juegos -translation_of: Games/Anatomy ---- -<div>{{GamesSidebar}}</div><p>{{IncludeSubnav("/en-US/docs/Games")}}</p> - -<div class="summary"> -<p><span class="seoSummary">Este artículo es un vistazo a la anatomía y flujo de trabajo del videojuego medio desde un punto de vista técnico, en términos de cómo debería funcionar el bucle principal. Ayuda a los principiantes del desarrollo moderno de videojuegos a entender lo que hace falta al construir un juego y cómo los estándares web como JavaScript se prestan como herramientas. Los programadores de juegos experimentados que sean novatos en el desarrollo web también se pueden beneficiar.</span></p> -</div> - -<h2 id="Presentar_aceptar_traducir_calcular_repetir">Presentar, aceptar, traducir, calcular, repetir</h2> - -<p>El objetivo de todo videojuego es <strong>presentar</strong> al usuario una situación, <strong>aceptar</strong> su entrada, <strong>traducir</strong> esas señales a acciones, y <strong>calcular</strong> una nueva situación a partir de esos actos. Los juegos están iterando continuamente por estas etapas, una y otra vez, hasta que ocurre alguna condición final (como ganas, perder, o salirse para ir a la cama). De forma poco sorpresiva, este patrón corresponde a cómo se programa el motor de un juego.</p> - -<p>Los detalles dependen del juego.</p> - -<p>Algunos juegos dirigen este ciclo con la entrada del usuario. Imagina que estás desarrollando un juego del tipo <em>"encuentra las diferencias entre estas dos imágenes similares"</em>. Estos juegos <strong>presentan</strong> dos imágenes al usuario; <strong>aceptan</strong> sus clics (o toques); <strong>interpretan</strong> la entrada como éxito, fallo, pausa, interacción del menú, etc; y finalmente, calculan una escena actualizada resultante de esa entrada. El bucle del juego avanza con la entrada del usuario, y se queda en espera hasta que ésta se produce. Esto es más bien un enfoque basado por turnos que no requiere una actualización constante cada frame, sólo cuando el jugador reacciona.</p> - -<p>Otros juegos requieren control sobre cada uno de los más pequeños aspectos posibles. Se aplican los mismos principios de antes, con una ligera variación: cada frame de la animación hace progresar el ciclo, y cualquier cambio en la entrada del usuario se captura en el primer turno disponible. Este modelo de <em>una-vez-por-frame</em> se implementa en algo llamado <strong>bucle principal</strong>. Si el bucle de tu juego está basado en tiempo, éste será una ley a la que se tendrán que atener tus simulaciones.</p> - -<p>Pero puede no necesitar de un control <em>por-frame</em>. El bucle de tu juego podría ser similar al ejemplo de <em>encuentra las diferencias</em>, y basarse en las entradas del usuario. Podría necesitar tanto entradas como tiempo simulado. Podría incluso estar totalmente basado en algo diferente.</p> - -<p>Por suerte, el JavaScript moderno (que se describe en las siguientes secciones) hace sencillo desarrollar un bucle principal eficiente, tipo <em>ejecutar-una-vez-por-frame</em>. Por supuesto, estará tan optimizado como tú lo hagas. Si algo parece que debería ir acoplado a un evento más infrecuente, suele ser una buena idea (aunque no siempre) sacarlo fuera del bucle principal.</p> - -<h2 id="Crear_un_bucle_principal_en_JavaScript">Crear un bucle principal en JavaScript</h2> - -<p>JavaScript funciona mejor con eventos y funciones callback. Los navegadores modernos se esfuerzan en invocar los métodos sólo en cuanto se necesita, y reposar (o hacer otras tareas) en los intervalos. Es una idea excelente añadir tu código a los momentos apropiados. Considera si tu función necesita de verdad ser invocada en un intervalo estricto de tiempo, a cada frame, o sólo cuando haya ocurrido alguna otra cosa. Especificándole al navegador cuándo tiene que ser invocada tu función le permite optimizarla. Además, probablemente haga tu trabajo más fácil.</p> - -<p>Algún código necesita ejecutarse frame a frame, así que ¿por qué añadir esa función a cualquier otra cosa que al planificador de redibulado del navegador? En la web, <code>{{ domxref("window.requestAnimationFrame()") }} </code>será la base de la mayoría de bucles principales frame-a-frame bien programados. Al invocarla, hay que pasarle una función callback. Esa función callback se ejecutará en el momento apropiado antes del próximo redibujado. Aquí hay un ejemplo de un bucle principal sencillo:</p> - -<pre>window.main = function () { - window.requestAnimationFrame( main ); - - // Lo que sea que tenga que hacer tu bucle principal -}; - -main(); // Empezar el ciclo</pre> - -<p><strong>Note</strong>: In each of the <code>main()</code> methods discussed here, we schedule a new <code>requestAnimationFrame</code> before performing our loop contents. That is not by accident and it is considered best practice. Calling the next <code>requestAnimationFrame</code> early ensures the browser receives it on time to plan accordingly even if your current frame misses its VSync window.</p> - -<p>The above chunk of code has two statements. The first statement creates a function as a global variable called <code>main()</code>. This function does some work and also tells the browser to call itself next frame with <code>window.requestAnimationFrame()</code>. The second statement calls the <code>main()</code> function, defined in the first statement. Because <code>main()</code> is called once in the second statement and every call of it places itself in the queue of things to do next frame, <code>main()</code> is synchronized to your framerate.</p> - -<p>Of course this loop is not perfect. Before we discuss ways to change it, let us discuss what it already does well.</p> - -<p>Timing the main loop to when the browser paints to the display allows you to run your loop as frequently as the browser wants to paint. You are given control over each frame of animation. It is also very simple because <code>main()</code> is the only function getting looped. A First Person Shooter (or a similar game) presents a new scene once every frame. You cannot really get more smooth and responsive than that.</p> - -<p>But do not immediately assume animations require frame-by-frame control. Simple animations can be easily performed, even GPU-accelerated, with CSS animations and other tools included in the browser. There are a lot of them and they will make your life easier.</p> - -<h2 id="Building_a_better_main_loop_in_Javascript">Building a <em>better</em> main loop in Javascript</h2> - -<p>There are two obvious issues with our previous main loop: <code>main()</code> pollutes the <code>{{ domxref("window") }}</code> object (where all global variables are stored) and the example code did not leave us with a way to <em>stop</em> the loop unless the whole tab is closed or refreshed. For the first issue, if you want the main loop to just run and you do not need easy (direct) access to it, you could create it as an Immediately-Invoked Function Expression (IIFE).</p> - -<pre>/* -* Starting with the semicolon is in case whatever line of code above this example -* relied on automatic semicolon insertion (ASI). The browser could accidentally -* think this whole example continues from the previous line. The leading semicolon -* marks the beginning of our new line if the previous one was not empty or terminated. -*/ - -;(function () { - function main() { - window.requestAnimationFrame( main ); - - // Your main loop contents. - } - - main(); // Start the cycle -})();</pre> - -<p>When the browser comes across this IIFE, it will define your main loop and immediately queue it for the next frame. It will not be attached to any object and <code>main</code> (or <code>main()</code> for methods) will be a valid unused name in the rest of the application, free to be defined as something else.</p> - -<p>Note: In practice, it is more common to prevent the next requestAnimationFrame() with an if-statement, rather than calling cancelAnimationFrame().</p> - -<p>For the second issue, stopping the main loop, you will need to cancel the call to <code>main()</code> with <code>{{ domxref("window.cancelAnimationFrame()") }}</code>. You will need to pass <code>cancelAnimationFrame()</code> the ID token given by <code>requestAnimationFrame()</code> when it was last called. Let us assume that your game's functions and variables are built on a namespace that you called <code>MyGame</code>. Expanding our last example, the main loop would now look like:</p> - -<pre>/* -* Starting with the semicolon is in case whatever line of code above this example -* relied on automatic semicolon insertion (ASI). The browser could accidentally -* think this whole example continues from the previous line. The leading semicolon -* marks the beginning of our new line if the previous one was not empty or terminated. -* -* Let us also assume that MyGame is previously defined. -*/ - -;(function () { - function main() { - MyGame.stopMain = window.requestAnimationFrame( main ); - - // Your main loop contents. - } - - main(); // Start the cycle -})();</pre> - -<p>We now have a variable declared in our <code>MyGame</code> namespace, which we call <code>stopMain</code>, that contains the ID returned from our main loop's most recent call to <code>requestAnimationFrame()</code>. At any point, we can stop the main loop by telling the browser to cancel the request that corresponds to our token.</p> - -<pre>window.cancelAnimationFrame( MyGame.stopMain );</pre> - -<p>The key to programming a main loop, in JavaScript, is to it attach to whatever event should be driving your action and pay attention to how the different systems involved interplay. You may have multiple components driven by multiple different types of events. This feels like unnecessary complexity but it might just be good optimization (not necessarily, of course). The problem is that you are not programming a typical main loop. In Javascript, you are using the browser's main loop and you are trying to do so effectively.</p> - -<h2 id="Building_a_more_optimized_main_loop_in_JavaScript">Building a <em>more</em> <em>optimized</em> main loop in JavaScript</h2> - -<p>Ultimately, in JavaScript, the browser is running its own main loop and your code exists in some of its stages. The above sections describe main loops which try not to wrestle away control from the browser. These main methods attach themselves to <code>window.requestAnimationFrame()</code>, which asks the browser for control over the upcoming frame. It is up to the browser how to relate these requests to their main loop. The <a href="http://www.w3.org/TR/animation-timing/">W3C spec for requestAnimationFrame</a> does not really define exactly when the browsers must perform the requestAnimationFrame callbacks. This can be a benefit because it leaves browser vendors free to experiment with the solutions that they feel are best and tweak it over time.</p> - -<p>Modern versions of Firefox and Google Chrome (and probably others) <em>attempt</em> to connect <code>requestAnimationFrame</code> callbacks to their main thread at the very beginning of a frame's timeslice. The browser's main thread thus <em>tries</em> to look like the following:</p> - -<ol> - <li>Start a new frame (while the previous frame is handled by the display).</li> - <li>Go through the list of <code>requestAnimationFrame</code> callbacks and invoke them.</li> - <li>Perform garbage collection and other per-frame tasks when the above callbacks stop controlling the main thread.</li> - <li>Sleep (unless an event interrupts the browser's nap) until the monitor is ready for your image (<a href="http://www.techopedia.com/definition/92/vertical-sync-vsync">VSync</a>) and repeat.</li> -</ol> - -<p>You can think about developing realtime applications as having a budget of time to do work. All of the above steps must take place every 16-and-a-half milliseconds to keep up with a 60 Hz display. Browsers invoke your code as early as possible to give it maximum computation time. Your main thread will often start workloads that are not even on the main thread (such as rasterization or shaders in WebGL). Long calculations can be performed on a Web Worker or a GPU at the same time as the browser uses its main thread to manage garbage collection, its other tasks, or handle asynchronous events.</p> - -<p>While we are on the topic of budgeting time, many web browsers have a tool called <em>High Resolution Time</em>. The {{ domxref("Date") }} object is no longer the recognised method for timing events because it is very imprecise and can be modified by the system clock. High Resolution Time, on the other hand, counts the number of milliseconds since <code>navigationStart</code> (when the previous document is unloaded). This value is returned as a decimal number accurate to a thousandth of a millisecond. It is known as a <code>{{ domxref("DOMHighResTimeStamp") }}</code> but, for all intents and purposes, consider it a floating point number.</p> - -<p><strong>Note</strong>: Systems (hardware or software) that are not capable of microsecond accuracy are allowed to provide millisecond accuracy as a minimum. They should provide 0.001ms accuracy if they are capable of it, however.</p> - -<p>This value is not too useful alone, since it is relative to a fairly uninteresting event, but it can be subtracted from another timestamp to accurately and precisely determine how much time elapsed between those two points. To acquire one of these timestamps, you can call <code>window.performance.now()</code> and store the result as a variable.</p> - -<pre>var tNow = window.performance.now(); -</pre> - -<p>Back to the topic of the main loop. You will often want to know when your main function was invoked. Because this is common, <code>window.requestAnimationFrame()</code> always provides a <code>DOMHighResTimeStamp</code> to callbacks as an argument when they are executed. This leads to another enhancement to our previous main loops.</p> - -<pre>/* -* Starting with the semicolon is in case whatever line of code above this example -* relied on automatic semicolon insertion (ASI). The browser could accidentally -* think this whole example continues from the previous line. The leading semicolon -* marks the beginning of our new line if the previous one was not empty or terminated. -* -* Let us also assume that MyGame is previously defined. -*/ - -;(function () { - function main( tFrame ) { - MyGame.stopMain = window.requestAnimationFrame( main ); - - // Your main loop contents. - // tFrame, from "function main ( tFrame )", is now a DOMHighResTimeStamp provided by rAF. - } - - main(); // Start the cycle -})();</pre> - -<p>Several other optimizations are possible and it really depends on what your game attempts to accomplish. Your game genre will obviously make a difference but it could even be more subtle than that. You could draw every pixel individually on a canvas or you could layer DOM elements (including multiple WebGL canvases with transparent backgrounds if you want) into a complex hierarchy. Each of these paths will lead to different opportunities and constraints.</p> - -<h2 id="It_is_decision..._time">It is decision... time</h2> - -<p>You will need to make hard decisions about your main loop: how to simulate the accurate progress of time. If you demand per-frame control then you will need to determine how frequently your game will update and draw. You might even want update and draw to occur at different rates. You will also need to consider how gracefully your game will fail if the user's system cannot keep up with the workload. Let us start by assuming that you will handle user input and update the game state every time you draw. We will branch out later.</p> - -<p><em><strong>Note</strong>: </em>Changing how your main loop deals with time is a debugging nightmare, everywhere. Think about your needs, carefully, before working on your main loop.</p> - -<h3 id="What_most_browser_games_should_look_like">What most browser games should look like</h3> - -<p>If your game can hit the maximum refresh rate of any hardware you support then your job is fairly easy. You can simply update, render, and then do nothing until VSync.</p> - -<pre>/* -* Starting with the semicolon is in case whatever line of code above this example -* relied on automatic semicolon insertion (ASI). The browser could accidentally -* think this whole example continues from the previous line. The leading semicolon -* marks the beginning of our new line if the previous one was not empty or terminated. -* -* Let us also assume that MyGame is previously defined. -*/ - -;(function () { - function main( tFrame ) { - MyGame.stopMain = window.requestAnimationFrame( main ); - - update( tFrame ); //Call your update method. In our case, we give it rAF's timestamp. - render(); - } - - main(); // Start the cycle -})();</pre> - -<p>If the maximum refresh rate cannot be reached, quality settings could be adjusted to stay under your time budget. The most famous example of this concept is the game from id Software, RAGE. This game removed control from the user in order to keep its calculation time at roughly 16ms (or roughly 60fps). If computation took too long then rendered resolution would decrease, textures and other assets would fail to load or draw, and so forth. This (non-web) case study made a few assumptions and tradeoffs:</p> - -<ul> - <li>Each frame of animation accounts for user input.</li> - <li>No frame needs to be extrapolated (guessed) because each draw has its own update.</li> - <li>Simulation systems can basically assume that each full update is ~16ms apart.</li> - <li>Giving the user control over quality settings would be a nightmare.</li> - <li>Different monitors input at different rates: 30 FPS, 75 FPS, 100 FPS, 120 FPS, 144 FPS, etc.</li> - <li>Systems that are unable to keep up with 60 FPS lose visual quality to keep the game running at optimal speed (eventually it outright fails, if quality becomes too low.)</li> -</ul> - -<h3 id="Other_ways_to_handle_variable_refresh_rate_needs">Other ways to handle variable refresh rate needs</h3> - -<p>Other methods of tackling the problem exist.</p> - -<p>One common technique is to update the simulation at a constant frequency and then draw as much (or as little) of the actual frames as possible. The update method can continue looping without care about what the user sees. The draw method can view the last update and when it happened. Since draw knows when it represents, and the simulation time for the last update, it can predict a plausible frame to draw for the user. It does not matter whether this is more frequent than the official update loop (or even less frequent). The update method sets checkpoints and, as frequently as the system allows, the render method draws instants of time around them. There are many ways to separate the update method in web standards:</p> - -<ul> - <li>Draw on <code>requestAnimationFrame</code> and update on a {{ domxref("window.setInterval") }} or {{ domxref("window.setTimeout") }}. - - <ul> - <li>This uses processor time even when unfocused or minimized, hogs the main thread, and is probably an artifact of traditional game loops (but it is simple.)</li> - </ul> - </li> - <li>Draw on <code>requestAnimationFrame</code> and update on a <code>setInterval</code> or <code>setTimeout</code> in a <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a>. - <ul> - <li>This is the same as above, except update does not hog the main thread (nor does the main thread hog it). This is a more complex solution, and might be too much overhead for simple updates.</li> - </ul> - </li> - <li>Draw on <code>requestAnimationFrame</code> and use it to poke a Web Worker containing the update method with the number of ticks to compute, if any. - <ul> - <li>This sleeps until <code>requestAnimationFrame</code> is called and does not pollute the main thread, plus you are not relying on old fashioned methods. Again, this is a bit more complex than the previous two options, and <em>starting</em> each update will be blocked until the browser decides to fire rAF callbacks.</li> - </ul> - </li> -</ul> - -<p>Each of these methods have similar tradeoffs:</p> - -<ul> - <li>Users can skip rendering frames or interpolate extra ones depending on their performance.</li> - <li>You can count on all users updating non-cosmetic variables at the same constant frequency minus hiccups.</li> - <li>Much more complicated to program than the basic loops we saw earlier.</li> - <li>User input is completely ignored until the next update (even if the user has a fast device).</li> - <li>The mandatory interpolation has a performance penalty.</li> -</ul> - -<p>A separate update and draw method could look like the following example. For the sake of demonstration, the example is based on the third bullet point, just without using Web Workers for readability (and, let's be honest, writeability).</p> - -<p><em>Note: This example, specifically, is in need of technical review.</em></p> - -<pre>/* -* Starting with the semicolon is in case whatever line of code above this example -* relied on automatic semicolon insertion (ASI). The browser could accidentally -* think this whole example continues from the previous line. The leading semicolon -* marks the beginning of our new line if the previous one was not empty or terminated. -* -* Let us also assume that MyGame is previously defined. -* -* MyGame.lastRender keeps track of the last provided requestAnimationFrame timestamp. -* MyGame.lastTick keeps track of the last update time. Always increments by tickLength. -* MyGame.tickLength is how frequently the game state updates. It is 20 Hz (50ms) here. -* -* timeSinceTick is the time between requestAnimationFrame callback and last update. -* numTicks is how many updates should have happened between these two rendered frames. -* -* render() is passed tFrame because it is assumed that the render method will calculate -* how long it has been since the most recently passed update tick for -* extrapolation (purely cosmetic for fast devices). It draws the scene. -* -* update() calculates the game state as of a given point in time. It should always -* increment by tickLength. It is the authority for game state. It is passed -* the DOMHighResTimeStamp for the time it represents (which, again, is always -* last update + MyGame.tickLength unless a pause feature is added, etc.) -* -* setInitialState() Performs whatever tasks are leftover before the mainloop must run. -* It is just a generic example function that you might have added. -*/ - -;(function () { - function main( tFrame ) { - MyGame.stopMain = window.requestAnimationFrame( main ); - var nextTick = MyGame.lastTick + MyGame.tickLength; - var numTicks = 0; - - //If tFrame < nextTick then 0 ticks need to be updated (0 is default for numTicks). - //If tFrame = nextTick then 1 tick needs to be updated (and so forth). - //Note: As we mention in summary, you should keep track of how large numTicks is. - //If it is large, then either your game was asleep, or the machine cannot keep up. - if (tFrame > nextTick) { - var timeSinceTick = tFrame - MyGame.lastTick; - numTicks = Math.floor( timeSinceTick / MyGame.tickLength ); - } - - queueUpdates( numTicks ); - render( tFrame ); - MyGame.lastRender = tFrame; - } - - function queueUpdates( numTicks ) { - for(var i=0; i < numTicks; i++) { - MyGame.lastTick = MyGame.lastTick + MyGame.tickLength; //Now lastTick is this tick. - update( MyGame.lastTick ); - } - } - - MyGame.lastTick = performance.now(); - MyGame.lastRender = MyGame.lastTick; //Pretend the first draw was on first update. - MyGame.tickLength = 50; //This sets your simulation to run at 20Hz (50ms) - - setInitialState(); - main(performance.now()); // Start the cycle -})();</pre> - -<p>Another alternative is to simply do certain things less often. If a portion of your update loop is difficult to compute but insensitive to time, you might consider scaling back its frequency and, ideally, spreading it out into chunks throughout that lengthened period. An implicit example of this is found over at The Artillery Blog for Artillery Games, where they <a href="http://blog.artillery.com/2012/10/browser-garbage-collection-and-framerate.html">adjust their rate of garbage generation</a> to optimize garbage collection. Obviously, cleaning up resources is not time sensitive (especially if tidying is more disruptive than the garbage itself).</p> - -<p>This may also apply to some of your own tasks. Those are good candidates to throttle when available resources become a concern.</p> - -<h2 id="Summary">Summary</h2> - -<p>I want to be clear that any of the above, or none of them, could be best for your game. The correct decision entirely depends on the trade-offs that you are willing (and unwilling) to make. The concern is mostly with switching to another option. Fortunately, I do not have any experience with this but I have heard it is an excruciating game of Whack-a-Mole.</p> - -<p>An important thing to remember for managed platforms, like the web, is that your loop may stop execution for significant periods of time. This could occur when the user unselects your tab and the browser sleeps (or slows) its <code>requestAnimationFrame</code> callback interval. You have many ways to deal with this situation and this could depend on whether your game is single player or multiplayer. Some choices are:</p> - -<ul> - <li>Consider the gap "a pause" and skip the time. - <ul> - <li>You can probably see how this is problematic for most multiplayer games.</li> - </ul> - </li> - <li>You can simulate the gap to catch up. - <ul> - <li>This can be a problem for long drops and/or complex updates.</li> - </ul> - </li> - <li>You can recover the game state from a peer or the server. - <ul> - <li>This is ineffective if your peers or server are out-of-date too, or they don't exist because the game is single player and doesn't have a server.</li> - </ul> - </li> -</ul> - -<p>Once your main loop has been developed and you have decided on a set of assumptions and tradeoffs which suit your game, it is now just a matter of using your decisions to calculate any applicable physics, AI, sounds, network synchronization, and whatever else your game may require.</p> diff --git a/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html b/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html deleted file mode 100644 index a5c7202d69..0000000000 --- a/files/es/learn/forms/property_compatibility_table_for_form_controls/index.html +++ /dev/null @@ -1,2004 +0,0 @@ ---- -title: Tabla de compatibilidad de propiedades CSS para controles de formulario -slug: Learn/Forms/Property_compatibility_table_for_form_controls -translation_of: Learn/Forms/Property_compatibility_table_for_form_controls -original_slug: Learn/HTML/Forms/Property_compatibility_table_for_form_controls ---- -<div>{{learnsidebar}}</div> - -<p class="summary">Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.</p> - -<h2 id="Cómo_leer_las_tablas">Cómo leer las tablas</h2> - -<h3 id="Valores">Valores</h3> - -<p>Para cada propiedad, hay cuatro valores posibles:</p> - -<dl> - <dt>Si</dt> - <dd>Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.</dd> - <dt>Parcial</dt> - <dd>Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.</dd> - <dt>No</dt> - <dd>La propiedad simplemente no funciona o es tan inconsistente que no es confiable.</dd> - <dt>n.a.</dt> - <dd>La propiedad no tiene ningún significado para este tipo de widget.</dd> -</dl> - -<h3 id="Representación">Representación</h3> - -<p>Para cada propiedad hay dos representaciones posibles:</p> - -<dl> - <dt>N (Normal)</dt> - <dd>Indica que la propiedad se aplica tal cual</dd> - <dt>T (Retocada)</dt> - <dd>Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:</dd> -</dl> - -<pre class="brush: css notranslate">* { - /* Turn off the native look and feel */ - -webkit-appearance: none; - appearance: none; - -/* for Internet Explorer */ - background: none; -}</pre> - -<h2 id="Tablas_de_compatibilidad">Tablas de compatibilidad</h2> - -<h3 id="Comportamientos_globales">Comportamientos globales</h3> - -<p>Algunos comportamientos son comunes a muchos navegadores a nivel global::</p> - -<dl> - <dt>{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt> - <dd>El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.</dd> - <dt>{{cssxref("line-height")}}</dt> - <dd>Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.</dd> - <dt>{{cssxref("text-decoration")}}</dt> - <dd>Esta propiedad no es compatible con el navegador Opera en widgets de formulario.</dd> - <dt>{{cssxref("text-overflow")}}</dt> - <dd>Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.</dd> - <dt>{{cssxref("text-shadow")}}</dt> - <dd>Opera no admite {{cssxref("text-shadow")}} en widgets de formularios e IE9 no lo admite en absoluto.</dd> -</dl> - -<h3 id="Text_fields">Text fields</h3> - -<p>See the <code>{{htmlelement("input/text", "text")}}</code>, <code>{{htmlelement("input/search", "search")}}</code>, and <code>{{htmlelement("input/password", "password")}}</code> input types.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li> - <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li> - <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li> - <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on <code>{{htmlelement("textarea")}}</code>s.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td>See the note about {{cssxref("line-height")}}</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td>See the note about Opera</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 supports this property only on <code>{{htmlelement("textarea")}}</code>s, whereas Opera only supports it on single line text fields.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li> - <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Buttons">Buttons</h3> - -<p>See the <code>{{htmlelement("input/button", "button")}}</code>, <code>{{htmlelement("input/submit", "submit")}}</code>, and <code>{{htmlelement("input/reset", "reset")}}</code> input types and the <code>{{htmlelement("button")}}</code> element.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td>See the note about {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td> - <ol> - <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Number">Number</h3> - -<p>See the <code>{{htmlelement("input/number", "number")}}</code> input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being outside the field.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td>See the note about {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td colspan="1" rowspan="3"> - <p>Supported but there is too much inconsistency between browsers to be reliable.</p> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - </tr> - </tbody> -</table> - -<h3 id="Check_boxes_and_radio_buttons">Check boxes and radio buttons</h3> - -<p>See the <code>{{htmlelement("input/checkbox", "checkbox")}}</code> and <code>{{htmlelement("input/radio", "radio")}}</code> input types.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Some browsers add extra margins and others stretch the widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Some browsers add extra margins and others stretch the widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="Select_boxes_single_line">Select boxes (single line)</h3> - -<p>See the <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("optgroup")}}</code> and <code>{{htmlelement("option")}}</code> elements.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>This property is okay on the <code>{{htmlelement("select")}}</code> element, but it cannot be the case on the <code>{{htmlelement("option")}}</code> or <code>{{htmlelement("optgroup")}}</code> elements.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td> - <td> - <ol> - <li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li> - <li>The property is well applied on the <code>{{htmlelement("select")}}</code> element, but is inconsistently handled on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the <code>{{htmlelement("select")}}</code> element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td> - <ol> - <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td> - <td> - <ol> - <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<p>Note Firefox does not provide any way to change the down arrow on the <code>{{htmlelement("select")}}</code> element.</p> - -<h3 id="Select_boxes_multiline">Select boxes (multiline)</h3> - -<p>See the <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("optgroup")}}</code> and <code>{{htmlelement("option")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/size"><code>size</code> attribute</a>.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the <code>{{htmlelement("select")}}</code> element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td>See the note about {{cssxref("line-height")}}.</td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 does not support this property on <code>{{htmlelement("select")}}</code>, <code>{{htmlelement("option")}}</code>, and <code>{{htmlelement("optgroup")}}</code> elements; WebKit based browsers on Mac OSX do not support this property on <code>{{htmlelement("option")}}</code> and <code>{{htmlelement("optgroup")}}</code> elements.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Only supported by Firefox and IE9+.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Most of the browsers only support this property on the <code>{{htmlelement("select")}}</code> element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td> - <td> - <ol> - <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Datalist">Datalist</h3> - -<p>See the <code>{{htmlelement("datalist")}}</code> and <code>{{htmlelement("input")}}</code> elements and the <a href="/en-US/docs/Web/HTML/Attributes/list"><code>list</code> attribute</a>.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="File_picker">File picker</h3> - -<p>See the <code>{{htmlelement("input/file", "file")}}</code> input type.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Supported, but there is too much inconsistency between browsers to be reliable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Many browsers apply this property to the select button.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>It acts more or less like an extra left margin outside the widget.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td> - <ol> - <li>Supported, but there is too much inconsistency between browsers to be reliable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h3 id="Date_pickers">Date pickers</h3> - -<p>See the <code>{{htmlelement("input/date", "date")}}</code> and <code>{{htmlelement("input/time", "time")}}</code> input types. Many properties are supported, but there is too much inconstency between browsers to be reliable.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td></td> - </tr> - </tbody> -</table> - -<h3 id="Color_pickers">Color pickers</h3> - -<p>See the <code>{{htmlelement("input/color", "color")}}</code> input type:</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>Opera handles this like a select widget with the same restriction.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>Opera handles this like a select widget with the same restriction.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Supported, but there is too much inconsistency between browsers to be reliable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Meters_and_progress">Meters and progress</h3> - -<p>See the <code>{{htmlelement("meter")}}</code> and <code>{{htmlelement("progress")}}</code> elements:</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Chrome hides the <code>{{htmlelement("progress")}}</code> and <code>{{htmlelement("meter")}}</code> element when the {{cssxref("padding")}} property is applied on a tweaked element.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Supported, but there is too much inconsistency between browsers to be reliable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Range">Range</h3> - -<p>See the <code>{{htmlelement("input/range", "range")}}</code> input type. There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td> - <ol> - <li>Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td> - <ol> - <li>The {{cssxref("padding")}} is applied, but has no visual effect.</li> - </ol> - </td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td colspan="1" rowspan="3"> - <ol> - <li>Supported, but there is too much inconsistency between browsers to be reliable.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td> - </tr> - </tbody> -</table> - -<h3 id="Image_buttons">Image buttons</h3> - -<p>See the <code>{{htmlelement("input/image", "image")}}</code> input type:</p> - -<table> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col" style="text-align: center;">N</th> - <th scope="col" style="text-align: center;">T</th> - <th scope="col">Note</th> - </tr> - </thead> - <tbody> - <tr> - <th colspan="4" scope="col"><em>CSS box model</em></th> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - <tr> - <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Text and font</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td style="text-align: center; vertical-align: top;">N.A.</td> - <td></td> - </tr> - </tbody> - <tbody> - <tr> - <th colspan="4" scope="col"><em>Border and background</em></th> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td> - <td colspan="1"></td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td colspan="1"> - <ol> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - <tr> - <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td> - <td colspan="1"> - <ol> - <li>IE9 does not support this property.</li> - </ol> - </td> - </tr> - </tbody> -</table> - -<h2 id="See_also">See also</h2> - -<h3 id="Learning_path">Learning path</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">HTML5 input types</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Additional form controls</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">UI pseudo-classes</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li> -</ul> - -<h3 id="Advanced_Topics">Advanced Topics</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li> - <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li> -</ul> diff --git a/files/es/learn/javascript/asynchronous/async_await/index.html b/files/es/learn/javascript/asynchronous/async_await/index.html deleted file mode 100644 index 3487b11664..0000000000 --- a/files/es/learn/javascript/asynchronous/async_await/index.html +++ /dev/null @@ -1,411 +0,0 @@ ---- -title: Haciendo la programación asíncrona más fácil con async y await -slug: Learn/JavaScript/Asynchronous/Async_await -translation_of: Learn/JavaScript/Asynchronous/Async_await ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div> - -<p class="summary">Las incorporaciones más recientes al lenguaje JavaScript, son las <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">funciones async</a> y la palabra clave <code>await</code>, parte de la edición ECMAScript 2017 (véase <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). Estas características, básicamente, actúan como azúcar sintáctico, haciendo el código asíncrono fácil de escribir y leer más tarde. Hacen que el código asíncrono se parezca más al código síncrono de la vieja escuela, por lo que merece la pena aprenderlo. </p> - -<p>Este artículo le da lo que usted necesita saber. </p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Requisitos previos:</th> - <td>Conocimientos básicos de informática, entender de manera razonable los fundamentos de JavaScript y entender el código asíncrono en general y las promesas. </td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Entender las promesas y cómo usarlas</td> - </tr> - </tbody> -</table> - -<h2 id="Los_fundamentos_de_asyncawait">Los fundamentos de async/await</h2> - -<p>Hay dos partes a la hora de usar async/await en su código.</p> - -<h3 id="La_palabra_clave_async">La palabra clave async</h3> - -<p>Primero tenemos la palabra clave "async", que se coloca delante de la declaración de una función, para convertirla en función "async"(asíncrona). Una función "async", es una función que sabe cómo esperar la posibilidad de que la palabra clave "await" sea utilizada para invocar código asíncrono. </p> - -<p>Intenta escribir las siguientes líneas en la consola de tu navegador. </p> - -<pre class="brush: js notranslate">function hello() { return "Hello" }; -hello();</pre> - -<p>La función returna "Hello" — nada especial, verdad?</p> - -<p>Pero, qué pasa si convertimos esto en una función async? Trata lo siguiente:</p> - -<pre class="brush: js notranslate">async function hello() { return "Hello" }; -hello();</pre> - -<p>Ah!. Ahora cuando invocamos la función, retorna una promesa(promise). Esta es una de las características particulares de las funciones async — los valores que retornan están garantizados para ser convertidos en promesas.</p> - -<p>También puedes crear una <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">expresión de función async</a>, así:</p> - -<pre class="brush: js notranslate">let hello = async function() { return "Hello" }; -hello();</pre> - -<p>Y puedes utilizar funciones flecha(arrow functions):</p> - -<pre class="brush: js notranslate">let hello = async () => { return "Hello" };</pre> - -<p>Todos estos hacen básicamente lo mismo.</p> - -<p>Para realmente consumir el valor retornado cuando la promesa se cumple, ya que se está devolviendo una promesa, podemos utilizar un bloque <code>then()</code>: </p> - -<pre class="brush: js notranslate">hello().then((value) => console.log(value))</pre> - -<p>o incluso sólo un shorthand como</p> - -<pre class="brush: js notranslate">hello().then(console.log)</pre> - -<p>Como vimos en el último artículo.</p> - -<p>La palabra clave <code>async</code> se añade a las funciones para decirles que devuelvan una promesa en lugar de devolver directamente el valor. Adicionamente, esto permite que las funciones síncronas eviten cualquier potencial sobrecarga que viene con correr con el soporte por usar <code>async</code>. Cuando una función es declarada <code>async</code> con sólo añadir la manipulación necesaria, el motor de JavaScript puede optimizar su programa por usted. Dulce!</p> - -<p>So the <code>async</code> keyword is added to functions to tell them to return a promise rather than directly returning the value. In addition, this lets synchronous functions avoid any potential overhead that comes with running with support for using <code>await</code>. By only adding the necessary handling when the function is declared <code>async</code>, the JavaScript engine can optimize your program for you. Sweet!</p> - -<h3 id="La_palabra_clave_await">La palabra clave await</h3> - -<p>La ventaja real de las funciones asincronas aparecen cuando las combinas con la palabra clave <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a> — en efecto, <strong><code>await</code> solo trabaja dentro de las funciones async</strong>. Esta puede ser puesta frente a cualquier funcion async basada en una promesa para pausar tu codigo en esa linea hasta que se cumpla la promesa, entonces retorna el valor resultante. Mientras tanto, otro código que puede estar esperando una oportunidad para ejecutarse, puede hacerlo.</p> - -<p>Puedes usar <code>await</code> cuando llames cualquier funcion que retorna una Promesa, incluyendo funciones web API.</p> - -<p>Este es un ejemplo trivial:</p> - -<pre class="brush: js notranslate">async function hello() { - return greeting = await Promise.resolve("Hello"); -}; - -hello().then(alert);</pre> - -<p>Por supuesto, el ejemplo anterior no es muy util, aunque este sirve para ilustrar la syntaxis. Vamos a ver un ejemplo real.</p> - -<h2 id="Reescribiendo_el_código_de_las_promesas_con_asyncawait">Reescribiendo el código de las promesas con async/await</h2> - -<p>Let's look back at a simple fetch example that we saw in the previous article:</p> - -<pre class="brush: js notranslate">fetch('coffee.jpg') -.then(response => { - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } else { - return response.blob(); - } -}) -.then(myBlob => { - let objectURL = URL.createObjectURL(myBlob); - let image = document.createElement('img'); - image.src = objectURL; - document.body.appendChild(image); -}) -.catch(e => { - console.log('There has been a problem with your fetch operation: ' + e.message); -});</pre> - -<p>By now, you should have a reasonable understanding of promises and how they work, but let's convert this to use async/await to see how much simpler it makes things:</p> - -<pre class="brush: js notranslate">async function myFetch() { - let response = await fetch('coffee.jpg'); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } else { - let myBlob = await response.blob(); - - let objectURL = URL.createObjectURL(myBlob); - let image = document.createElement('img'); - image.src = objectURL; - document.body.appendChild(image); - } -} - -myFetch() -.catch(e => { - console.log('There has been a problem with your fetch operation: ' + e.message); -});</pre> - -<p>It makes code much simpler and easier to understand — no more <code>.then()</code> blocks everywhere!</p> - -<p>Since an <code>async</code> keyword turns a function into a promise, you could refactor your code to use a hybrid approach of promises and await, bringing the second half of the function out into a new block to make it more flexible:</p> - -<pre class="brush: js notranslate">async function myFetch() { - let response = await fetch('coffee.jpg'); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } else { - return await response.blob(); - } -} - -myFetch().then((blob) => { - let objectURL = URL.createObjectURL(blob); - let image = document.createElement('img'); - image.src = objectURL; - document.body.appendChild(image); -}).catch(e => console.log(e));</pre> - -<p>You can try typing in the example yourself, or running our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p> - -<h3 id="But_how_does_it_work">But how does it work?</h3> - -<p>You'll note that we've wrapped the code inside a function, and we've included the <code>async</code> keyword before the <code>function</code> keyword. This is necessary — you have to create an async function to define a block of code in which you'll run your async code; as we said earlier, <code>await</code> only works inside of async functions.</p> - -<p>Inside the <code>myFetch()</code> function definition you can see that the code closely resembles the previous promise version, but there are some differences. Instead of needing to chain a <code>.then()</code> block on to the end of each promise-based method, you just need to add an <code>await</code> keyword before the method call, and then assign the result to a variable. The <code>await</code> keyword causes the JavaScript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function call has returned its result. Once that's complete, your code continues to execute starting on the next line. For example:</p> - -<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre> - -<p>The response returned by the fulfilled <code>fetch()</code> promise is assigned to the <code>response</code> variable when that response becomes available, and the parser pauses on this line until that occurs. Once the response is available, the parser moves to the next line, which creates a <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> out of it. This line also invokes an async promise-based method, so we use <code>await</code> here as well. When the result of operation returns, we return it out of the <code>myFetch()</code> function.</p> - -<p>This means that when we call the <code>myFetch()</code> function, it returns a promise, so we can chain a <code>.then()</code> onto the end of it inside which we handle displaying the blob onscreen.</p> - -<p>You are probably already thinking "this is really cool!", and you are right — fewer <code>.then()</code> blocks to wrap around code, and it mostly just looks like synchronous code, so it is really intuitive.</p> - -<h3 id="Adding_error_handling">Adding error handling</h3> - -<p>And if you want to add error handling, you've got a couple of options.</p> - -<p>You can use a synchronous <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> structure with <code>async</code>/<code>await</code>. This example expands on the first version of the code we showed above:</p> - -<pre class="brush: js notranslate">async function myFetch() { - try { - let response = await fetch('coffee.jpg'); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } else { - let myBlob = await response.blob(); - let objectURL = URL.createObjectURL(myBlob); - let image = document.createElement('img'); - image.src = objectURL; - document.body.appendChild(image); - } - } catch(e) { - console.log(e); - } -} - -myFetch();</pre> - -<p>The <code>catch() {}</code> block is passed an error object, which we've called <code>e</code>; we can now log that to the console, and it will give us a detailed error message showing where in the code the error was thrown.</p> - -<p>If you wanted to use the second (refactored) version of the code that we showed above, you would be better off just continuing the hybrid approach and chaining a <code>.catch()</code> block onto the end of the <code>.then()</code> call, like this:</p> - -<pre class="brush: js notranslate">async function myFetch() { - let response = await fetch('coffee.jpg'); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } else { - return await response.blob(); - } -} - -myFetch().then((blob) => { - let objectURL = URL.createObjectURL(blob); - let image = document.createElement('img'); - image.src = objectURL; - document.body.appendChild(image); -}) -.catch((e) => - console.log(e) -);</pre> - -<p>This is because the <code>.catch()</code> block will catch errors occurring in both the async function call and the promise chain. If you used the <code>try</code>/<code>catch</code> block here, you might still get unhandled errors in the <code>myFetch()</code> function when it's called.</p> - -<p>You can find both of these examples on GitHub:</p> - -<ul> - <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li> - <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li> -</ul> - -<h2 id="Awaiting_a_Promise.all">Awaiting a Promise.all()</h2> - -<p>async/await is built on top of <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, so it's compatible with all the features offered by promises. This includes <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code> — you can quite happily await a <code>Promise.all()</code> call to get all the results returned into a variable in a way that looks like simple synchronous code. Again, let's return to <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">an example we saw in our previous article</a>. Keep it open in a separate tab so you can compare and contrast with the new version shown below.</p> - -<p>Converting this to async/await (see <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), this now looks like so:</p> - -<pre class="brush: js notranslate">async function fetchAndDecode(url, type) { - let response = await fetch(url); - - let content; - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } else { - if(type === 'blob') { - content = await response.blob(); - } else if(type === 'text') { - content = await response.text(); - } - - return content; - } - -} - -async function displayContent() { - let coffee = fetchAndDecode('coffee.jpg', 'blob'); - let tea = fetchAndDecode('tea.jpg', 'blob'); - let description = fetchAndDecode('description.txt', 'text'); - - let values = await Promise.all([coffee, tea, description]); - - let objectURL1 = URL.createObjectURL(values[0]); - let objectURL2 = URL.createObjectURL(values[1]); - let descText = values[2]; - - let image1 = document.createElement('img'); - let image2 = document.createElement('img'); - image1.src = objectURL1; - image2.src = objectURL2; - document.body.appendChild(image1); - document.body.appendChild(image2); - - let para = document.createElement('p'); - para.textContent = descText; - document.body.appendChild(para); -} - -displayContent() -.catch((e) => - console.log(e) -);</pre> - -<p>You'll see that the <code>fetchAndDecode()</code> function has been converted easily into an async function with just a few changes. See the <code>Promise.all()</code> line:</p> - -<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre> - -<p>By using <code>await</code> here we are able to get all the results of the three promises returned into the <code>values</code> array, when they are all available, in a way that looks very much like sync code. We've had to wrap all the code in a new async function, <code>displayContent()</code>, and we've not reduced the code by a lot of lines, but being able to move the bulk of the code out of the <code>.then()</code> block provides a nice, useful simplification, leaving us with a much more readable program.</p> - -<p>For error handling, we've included a <code>.catch()</code> block on our <code>displayContent()</code> call; this will handle errors ocurring in both functions.</p> - -<div class="blockIndicator note"> -<p><strong>Note</strong>: It is also possible to use a sync <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> block within an async function, in place of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally">.finally()</a></code> async block, to show a final report on how the operation went — you can see this in action in our <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (see also the <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p> -</div> - -<h2 id="The_downsides_of_asyncawait">The downsides of async/await</h2> - -<p>Async/await is really useful to know about, but there are a couple of downsides to consider.</p> - -<p>Async/await makes your code look synchronous, and in a way it makes it behave more synchronously. The <code>await</code> keyword blocks execution of all the code that follows until the promise fulfills, exactly as it would with a synchronous operation. It does allow other tasks to continue to run in the meantime, but your own code is blocked.</p> - -<p>This means that your code could be slowed down by a significant number of awaited promises happening straight after one another. Each <code>await</code> will wait for the previous one to finish, whereas actually what you want is for the promises to begin processing simultaneously, like they would do if we weren't using async/await.</p> - -<p>There is a pattern that can mitigate this problem — setting off all the promise processes by storing the <code>Promise</code> objects in variables, and then awaiting them all afterwards. Let's have a look at some examples that prove the concept.</p> - -<p>We've got two examples available — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) and <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Both of them start off with a custom promise function that fakes an async process with a <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code> call:</p> - -<pre class="brush: js notranslate">function timeoutPromise(interval) { - return new Promise((resolve, reject) => { - setTimeout(function(){ - resolve("done"); - }, interval); - }); -};</pre> - -<p>Then each one includes a <code>timeTest()</code> async function that awaits three <code>timeoutPromise()</code> calls:</p> - -<pre class="brush: js notranslate">async function timeTest() { - ... -}</pre> - -<p>Each one ends by recording a start time, seeing how long the <code>timeTest()</code> promise takes to fulfill, then recording an end time and reporting how long the operation took in total:</p> - -<pre class="brush: js notranslate">let startTime = Date.now(); -timeTest().then(() => { - let finishTime = Date.now(); - let timeTaken = finishTime - startTime; - alert("Time taken in milliseconds: " + timeTaken); -})</pre> - -<p>It is the <code>timeTest()</code> function that differs in each case.</p> - -<p>In the <code>slow-async-await.html</code> example, <code>timeTest()</code> looks like this:</p> - -<pre class="brush: js notranslate">async function timeTest() { - await timeoutPromise(3000); - await timeoutPromise(3000); - await timeoutPromise(3000); -}</pre> - -<p>Here we simply await all three <code>timeoutPromise()</code> calls directly, making each one alert for 3 seconds. Each subsequent one is forced to wait until the last one finished — if you run the first example, you'll see the alert box reporting a total run time of around 9 seconds.</p> - -<p>In the <code>fast-async-await.html</code> example, <code>timeTest()</code> looks like this:</p> - -<pre class="brush: js notranslate">async function timeTest() { - const timeoutPromise1 = timeoutPromise(3000); - const timeoutPromise2 = timeoutPromise(3000); - const timeoutPromise3 = timeoutPromise(3000); - - await timeoutPromise1; - await timeoutPromise2; - await timeoutPromise3; -}</pre> - -<p>Here we store the three <code>Promise</code> objects in variables, which has the effect of setting off their associated processes all running simultaneously.</p> - -<p>Next, we await their results — because the promises all started processing at essentially the same time, the promises will all fulfill at the same time; when you run the second example, you'll see the alert box reporting a total run time of just over 3 seconds!</p> - -<p>You'll have to test your code carefully, and bear this in mind if performance starts to suffer.</p> - -<p>Another minor inconvenience is that you have to wrap your awaited promises inside an async function.</p> - -<h2 id="Asyncawait_class_methods">Async/await class methods</h2> - -<p>As a final note before we move on, you can even add <code>async</code> in front of class/object methods to make them return promises, and <code>await</code> promises inside them. Take a look at the <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code we saw in our object-oriented JavaScript article</a>, and then look at our modified version with an <code>async</code> method:</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; - } - - async greeting() { - return await Promise.resolve(`Hi! I'm ${this.name.first}`); - }; - - farewell() { - console.log(`${this.name.first} has left the building. Bye for now!`); - }; -} - -let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre> - -<p>The first class method could now be used something like this:</p> - -<pre class="brush: js notranslate">han.greeting().then(console.log);</pre> - -<h2 id="Browser_support">Browser support</h2> - -<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p> - -<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p> - -<h2 id="Conclusion">Conclusion</h2> - -<p>And there you have it — async/await provide a nice, simplified way to write async code that is simpler to read and maintain. Even with browser support being more limited than other async code mechanisms at the time of writing, it is well worth learning and considering for use, both for now and in the future.</p> - -<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li> - <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li> -</ul> diff --git a/files/es/learn/javascript/building_blocks/events/index.html b/files/es/learn/javascript/building_blocks/events/index.html deleted file mode 100644 index 5fc7ee8df5..0000000000 --- a/files/es/learn/javascript/building_blocks/events/index.html +++ /dev/null @@ -1,579 +0,0 @@ ---- -title: Introducción a eventos -slug: Learn/JavaScript/Building_blocks/Events -translation_of: Learn/JavaScript/Building_blocks/Events -original_slug: Learn/JavaScript/Building_blocks/Eventos ---- -<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">Los eventos son acciones u ocurrencias que suceden en el sistema que está programando y que el sistema le informa para que pueda responder de alguna manera si lo desea. Por ejemplo, si el usuario hace clic en un botón en una página web, es posible que desee responder a esa acción mostrando un cuadro de información. En este artículo, discutiremos algunos conceptos importantes que rodean los eventos y veremos cómo funcionan en los navegadores. Este no será un estudio exhaustivo; solo lo que necesitas saber en esta etapa.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerrequisitos:</th> - <td>Conocimientos básicos de informática, entendimiento básico de HTML y CSS, <a href="https://developer.mozilla.org/es/docs/Learn/JavaScript/First_steps">Primeros pasos con JavaScript</a>.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Comprender la teoría fundamental de los eventos, cómo funcionan en los navegadores y cómo los eventos pueden diferir en distintos entornos de programación.</td> - </tr> - </tbody> -</table> - -<h2 id="Una_serie_de_eventos_afortunados">Una serie de eventos afortunados</h2> - -<p>Como se mencionó anteriormente, los <strong>eventos</strong> son acciones u ocurrencias que suceden en el sistema que está programando — el sistema disparará una señal de algún tipo cuando un evento ocurra y también proporcionará un mecanismo por el cual se puede tomar algún tipo de acción automáticamente (p.e., ejecutando algún código) cuando se produce el evento. Por ejemplo, en un aeropuerto cuando la pista está despejada para que despegue un avión, se comunica una señal al piloto y, como resultado, comienzan a pilotar el avión.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> - -<p>En el caso de la Web, los eventos se desencadenan dentro de la ventana del navegador y tienden a estar unidos a un elemento específico que reside en ella — podría ser un solo elemento, un conjunto de elementos, el documento HTML cargado en la pestaña actual o toda la ventana del navegador. Hay muchos tipos diferentes de eventos que pueden ocurrir, por ejemplo:</p> - -<ul> - <li>El usuario hace clic con el mouse sobre un elemento determinado o coloca el cursor sobre un elemento determinado.</li> - <li>El usuario presiona una tecla en el teclado.</li> - <li>El usuario cambia el tamaño o cierra la ventana del navegador.</li> - <li>Una página web termina de cargar.</li> - <li>Un formulario se envía</li> - <li>Un video se reproduce, pausa o finaliza la reproducción.</li> - <li>Un error ocurre.</li> -</ul> - -<p>Se deducirá de esto (y echar un vistazo a MDN <a href="https://developer.mozilla.org/es/docs/Web/Events">Referencia de eventos</a>) que hay <strong>muchos</strong> eventos a los que se puede responder.</p> - -<p>Cada evento disponible tiene un <strong>controlador de eventos</strong>, que es un bloque de código (generalmente una función JavaScript definida por el usuario) que se ejecutará cuando se active el evento. Cuando dicho bloque de código se define para ejecutarse en respuesta a un disparo de evento, decimos que estamos <strong>registrando un controlador de eventos</strong>. Tenga en cuenta que los controladores de eventos a veces se llaman <strong>oyentes de eventos</strong> — son bastante intercambiables para nuestros propósitos, aunque estrictamente hablando, trabajan juntos. El oyente escucha si ocurre el evento y el controlador es el código que se ejecuta en respuesta a que ocurra.</p> - -<div class="note"> -<p><strong>Nota</strong>: Es útil tener en cuenta que los eventos web no son parte del lenguaje central de JavaScript: se definen como parte de las API integradas en el navegador.</p> -</div> - -<h3 id="Un_ejemplo_simple">Un ejemplo simple</h3> - -<p>Veamos un ejemplo simple para explicar lo que queremos decir aquí. Ya has visto eventos y controladores de eventos en muchos de los ejemplos de este curso, pero vamos a recapitular solo para consolidar nuestro conocimiento. En el siguiente ejemplo, tenemos un solo {{htmlelement ("button")}}, que cuando se presiona, hará que el fondo cambie a un color aleatorio:</p> - -<pre class="brush: html notranslate"><button>Cambiar color</button></pre> - -<div class="hidden"> -<pre class="brush: css notranslate">button { margin: 10px };</pre> -</div> - -<p>El JavaScript se ve así:</p> - -<pre class="brush: js notranslate">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>En este código, almacenamos una referencia al botón dentro de una variable llamada <code>btn</code>, usando la función {{domxref ("Document.querySelector ()")}}. También definimos una función que devuelve un número aleatorio. La tercera parte del código es el controlador de eventos. La variable <code>btn</code> apunta a un elemento <code><button></code>, y este tipo de objeto tiene una serie de eventos que pueden activarse y, por lo tanto, los controladores de eventos están disponibles. Estamos escuchando el disparo del evento "click", estableciendo la propiedad del controlador de eventos <code>onclick</code> para que sea igual a una función anónima que contiene código que generó un color RGB aleatorio y establece el <code><body></code> color de fondo igual a este.</p> - -<p>Este código ahora se ejecutará cada vez que se active el evento "click" en el elemento <code><button></code>, es decir, cada vez que un usuario haga clic en él.</p> - -<p>El resultado de ejemplo es el siguiente:</p> - -<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="No_son_solo_páginas_web">No son solo páginas web</h3> - -<p>Otra cosa que vale la pena mencionar en este punto es que los eventos no son particulares de JavaScript — la mayoría de los lenguajes de programación tienen algún tipo de modelo de eventos, y la forma en que funciona a menudo diferirá de la forma en que funciona en JavaScript. De hecho, el modelo de eventos en JavaScript para páginas web difiere del modelo de eventos para JavaScript, ya que se utiliza en otros entornos.</p> - -<p>Por ejemplo, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> es un entorno en tiempo de ejecución de JavaScript muy popular que permite a los desarrolladores usar JavaScript para crear aplicaciones de red y del lado del servidor. El <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">modelo de eventos de Node.js</a> se basa en que los oyentes (<em>listeners</em>) escuchen eventos y los emisores (<em>emitters</em>) emitan eventos periódicamente — no suena tan diferentes, pero el código es bastante diferente, haciendo uso de funciones como <code>on()</code> para registrar un oyente de eventos, y <code>once()</code> para registrar un oyente de eventos que anula el registro después de que se haya ejecutado una vez. The <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">documentos de eventos de conexión HTTP</a> proporcionan un buen ejemplo de uso.</p> - -<p>Como otro ejemplo, ahora también puede usar JavaScript para crear complementos de navegadores — mejoras de funcionalidad del navegador — utilizando una tecnología llamada <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. El modelo de eventos es similar al modelo de eventos web, pero un poco diferente — las propiedades de los oyentes de eventos se escriben en <em>camel-case</em> (ej. <code>onMessage</code> en lugar de <code>onmessage</code>), y deben combinarse con la función <code>addListener</code>. Consulte la página <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage </a>para ver un ejemplo.</p> - -<p>No necesita comprender nada sobre otros entornos en esta etapa de su aprendizaje; solo queríamos dejar en claro que los eventos pueden diferir en diferentes entornos de programación.</p> - -<h2 id="Diferentes_formas_de_uso_de_eventos">Diferentes formas de uso de eventos</h2> - -<p>Hay muchas maneras distintas en las que puedes agregar event listeners a los sitios web, que se ejecutara cuando el evento asociado se dispare. En esta sección, revisaremos los diferentes mecanismos y discutiremos cuales deberias usar..</p> - -<h3 id="Propiedades_de_manejadores_de_eventos">Propiedades de manejadores de eventos</h3> - -<p>Estas son las propiedades que existen, que contienen codigo de manejadores de eventos(Event Handler) que vemos frecuentemente durante el curso.. Volviendo al ejemplo de arriba:</p> - -<pre class="brush: js notranslate">var btn = document.querySelector('button'); - -btn.onclick = function() { - var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; - document.body.style.backgroundColor = rndCol; -}</pre> - -<p>La propiedad <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> es la propiedad del manejador de eventos que está siendo usada en esta situación. Es escencialmente una propiedad como cualquier otra disponible en el botón (por ejemplo: <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>), pero es de un tipo especial — cuando lo configura para ser igual a algún código, ese código se ejecutará cuando el evento se dispare en el botón.</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 notranslate">var btn = document.querySelector('button'); - -function bgChange() { - var 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 will change when the button is focused and unfocused (try pressing tab to tab on to the button and off again). 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 will change only when it 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 will change when a key is pressed on the keyboard. <code>keypress</code> 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 will change when the mouse pointer is moved so it begins hovering over the button, or when it 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 notranslate"><button onclick="bgChange()">Press me</button> -</pre> - -<pre class="brush: js notranslate">function bgChange() { - var 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> (aka <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 notranslate"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> - -<p>You'll 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 notranslate">var buttons = document.querySelectorAll('button'); - -for (var 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/JavaScript/Reference/Global_Objects/Array/forEach">forEach()</a></code> built-in method available on all Array objects:</p> - -<pre class="brush: js notranslate">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 notranslate">var btn = document.querySelector('button'); - -function bgChange() { - var 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 notranslate">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 notranslate">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've got to do is add/remove event handlers as appropriate.</p> - -<p>Second, you can also register multiple handlers for the same listener. The following two handlers would not be applied:</p> - -<pre class="brush: js notranslate">myElement.onclick = functionA; -myElement.onclick = functionB;</pre> - -<p>As the second line would overwrite the value of <code>onclick</code> set by the first. This would work, however:</p> - -<pre class="brush: js notranslate">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 notranslate">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 will briefly cover some advanced concepts that are relevant to events. It is not important to understand these fully at this point, but it 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 notranslate">function bgChange(e) { - var 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 stick to a standard.</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 notranslate">var divs = document.querySelectorAll('div'); - -for (var 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 notranslate"><!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 (var i = 1; i <= 16; i++) { - var 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; - } - - var divs = document.querySelectorAll('div'); - - for (var 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 stop an event 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 behaviour 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'll want to stop the submission to the server and give them an error message telling them 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 notranslate"><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 notranslate">div { - margin-bottom: 10px; -} -</pre> -</div> - -<p>Now some JavaScript — here we implement a very simple check inside an <a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> 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 notranslate">var form = document.querySelector('form'); -var fname = document.getElementById('fname'); -var lname = document.getElementById('lname'); -var submit = document.getElementById('submit'); -var 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'll not 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 notranslate"><!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> - - var btn = document.querySelector('button'); - var videoBox = document.querySelector('div'); - var 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 notranslate"><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 notranslate">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 notranslate">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 (e.g. the {{htmlelement("video")}} in our case), 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 in 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 in 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 in 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> - -<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 event 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 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 notranslate">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 having a go at 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="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 tend to 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="/en-US/Learn#Contact_us">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/es/learn/javascript/building_blocks/functions/index.html b/files/es/learn/javascript/building_blocks/functions/index.html deleted file mode 100644 index d05ae34969..0000000000 --- a/files/es/learn/javascript/building_blocks/functions/index.html +++ /dev/null @@ -1,400 +0,0 @@ ---- -title: Funciones — bloques de código reutilizables -slug: Learn/JavaScript/Building_blocks/Functions -tags: - - API - - Funciones - - JavaScript - - Métodos - - Navegador -translation_of: Learn/JavaScript/Building_blocks/Functions ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary">Otro concepto esencial en la codificación son las <strong>funciones</strong>, que te permiten almacenar un fragmento de código que realiza una única tarea dentro de un bloque definido, y luego llamar a ese código siempre que lo necesites utilizando un único comando breve -- en lugar de tener que escribir el mismo codigo varias veces. En este artículo exploraremos conceptos fundamentales detrás de funciones tales como sintaxis básica, cómo invocarlas y definirlas, alcance(scope) y parámetros.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisites:</th> - <td>Conocimientos basicos de informatica, conocimiento basico de HTML y CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td> - </tr> - <tr> - <th scope="row">Objective:</th> - <td>Entender los conceptos fundamentales detras de las funciones JavaScript.</td> - </tr> - </tbody> -</table> - -<h2 id="¿Dónde_encuentro_las_funciones">¿Dónde encuentro las funciones? </h2> - -<p>En JavaScript vas a encontrar funciones por todos lados. De hecho, nosotros hemos usados funciones todo el tiempo a lo largo del curso; solo que no hemos hablado mucho sobre ellas. Ahora es el momento, igual, para comenzar a hablar explicitamente sobre las funciones y explorar su sintaxis.</p> - -<p>Básicamente cada vez que haces uso de código JavaScript que contiene parentesis como () y no estás usando estructuras de lenguaje como for loop, while, do, do while, estás usando una función! </p> - -<p>Funciones incluídas en los navegadores</p> - -<p>A lo largo de este curso hemos usado muchas funciones incluídas del navegador. Por ejemplo, cuando manipulamos una cadena de texto o <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/String">string</a>:</p> - -<pre class="brush: js notranslate">let miTexto = 'Soy una cadena de texto!'; -let nuevaCadena = miTexto.replace('cadena', 'ensalada'); -console.log(nuevaCadena); -// la función de cadena de texto <strong>replace()</strong> toma una cadena, -// reemplaza una palabra por otra, y devuelve -// una nueva cadena con el reemplazo hecho.</pre> - -<p>O cada vez que manipulamos un <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Array">array</a>:</p> - -<pre class="brush: js notranslate">let miArray = ['Yo', 'amo', 'el', 'chocolate', 'y', 'las', 'ranas']; -let armarCadena = miArray.join(' '); -console.log(armarCadena); -// La función join() toma un array, -// une todos sus elementos en una cadena o string -// y devuelve esta nueva cadena.</pre> - -<p>O cada vez que generamos un número al azar:</p> - -<pre class="brush: js notranslate">var miNumero = Math.random(); -console.log(miNumero); -// La función <a href="/es/docs/Web/JavaScript/Referencia/Objetos_globales/Math/random">Math.random()</a> genera un número aleatorio -// entre 0 and 1 y devuelve ese número. -</pre> - -<p>...estamos usando una función!</p> - -<div class="note"> -<p><strong>Nota</strong>: Sientase libre de ingresar esas líneas de código en la consola JavaScript de su navegador, para familiarizarse con sus funcionalidades. </p> -</div> - -<p>El lenguaje JavaScript contiene muchas funciones integradas que te permiten realizar cosas muy utilies sin escribir el código tu mismo. De hecho, parte del código que llamas (una palabra elegante para decir correr o ejecutar) cuando invocas una función integrada puede no estar escrita en JavaScript —muchas de estas funciones están llamando partes del código del navegador de fondo, que está escrito principalmente en lenguajes de sistema de bajo nivel como C ++, no en lenguajes web como JavaScript.</p> - -<p>Bear in mind that some built-in browser functions are not part of the core JavaScript language — some are defined as part of browser APIs, which build on top of the default language to provide even more functionality (refer to <a href="/en-US/Learn/JavaScript/First_steps/What_is_JavaScript#So_what_can_it_really_do">this early section of our course</a> for more descriptions). We'll look at using browser APIs in more detail in a later module.</p> - -<h2 id="Functions_versus_methods">Functions versus methods</h2> - -<p>One thing we need to clear up before we move on — technically speaking, built in browser functions are not functions — they are <strong>methods</strong>. This sounds a bit scary and confusing, but don't worry — the words function and method are largely interchangeable, at least for our purposes, at this stage in your learning.</p> - -<p>The distinction is that methods are functions defined inside objects. Built-in browser functions (methods) and variables (which are called <strong>properties</strong>) are stored inside structured objects, to make the code more efficient and easier to handle.</p> - -<p>You don't need to learn about the inner workings of structured JavaScript objects yet — you can wait until our later module that will teach you all about the inner workings of objects, and how to create your own. For now, we just wanted to clear up any possible confusion of method versus function — you are likely to meet both terms as you look at the available related resources across the Web.</p> - -<h2 id="Custom_functions">Custom functions</h2> - -<p>You've also seen a lot of <strong>custom functions</strong> in the course so far — functions defined in your code, not inside the browser. Anytime you saw a custom name with parentheses straight after it, you were using a custom function. In our <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> example (see also the full <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">source code</a>) from our <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">loops article</a>, we included a custom <code>draw()</code> function that looked like this:</p> - -<pre class="brush: js notranslate">function draw() { - ctx.clearRect(0,0,WIDTH,HEIGHT); - for (var i = 0; i < 100; i++) { - ctx.beginPath(); - ctx.fillStyle = 'rgba(255,0,0,0.5)'; - ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI); - ctx.fill(); - } -}</pre> - -<p>This function draws 100 random circles inside an {{htmlelement("canvas")}} element. Every time we want to do that, we can just invoke the function with this</p> - -<pre class="brush: js notranslate">draw();</pre> - -<p>rather than having to write all that code out again every time we want to repeat it. And functions can contain whatever code you like — you can even call other functions from inside functions. The above function for example calls the <code>random()</code> function three times, which is defined by the following code:</p> - -<pre class="brush: js notranslate">function random(number) { - return Math.floor(Math.random()*number); -}</pre> - -<p>We needed this function because the browser's built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> function only generates a random decimal number between 0 and 1. We wanted a random whole number between 0 and a specified number.</p> - -<h2 id="Invoking_functions">Invoking functions</h2> - -<p>You are probably clear on this by now, but just in case ... to actually use a function after it has been defined, you've got to run — or invoke — it. This is done by including the name of the function in the code somewhere, followed by parentheses.</p> - -<pre class="brush: js notranslate">function myFunction() { - alert('hello'); -} - -myFunction() -// calls the function once</pre> - -<h2 id="Anonymous_functions">Anonymous functions</h2> - -<p>You may see functions defined and invoked in slightly different ways. So far we have just created a function like so:</p> - -<pre class="brush: js notranslate">function myFunction() { - alert('hello'); -}</pre> - -<p>But you can also create a function that doesn't have a name:</p> - -<pre class="brush: js notranslate">function() { - alert('hello'); -}</pre> - -<p>This is called an <strong>anonymous function</strong> — it has no name! It also won't do anything on its own. You generally use an anonymous function along with an event handler, for example the following would run the code inside the function whenever the associated button is clicked:</p> - -<pre class="brush: js notranslate">var myButton = document.querySelector('button'); - -myButton.onclick = function() { - alert('hello'); -}</pre> - -<p>The above example would require there to be a {{htmlelement("button")}} element available on the page to select and click. You've already seen this structure a few times throughout the course, and you'll learn more about and see it in use in the next article.</p> - -<p>You can also assign an anonymous function to be the value of a variable, for example:</p> - -<pre class="brush: js notranslate">var myGreeting = function() { - alert('hello'); -}</pre> - -<p>This function could now be invoked using:</p> - -<pre class="brush: js notranslate">myGreeting();</pre> - -<p>This effectively gives the function a name; you can also assign the function to be the value of multiple variables, for example:</p> - -<pre class="brush: js notranslate">var anotherGreeting = function() { - alert('hello'); -}</pre> - -<p>This function could now be invoked using either of</p> - -<pre class="brush: js notranslate">myGreeting(); -anotherGreeting();</pre> - -<p>But this would just be confusing, so don't do it! When creating functions, it is better to just stick to this form:</p> - -<pre class="brush: js notranslate">function myGreeting() { - alert('hello'); -}</pre> - -<p>You will mainly use anonymous functions to just run a load of code in response to an event firing — like a button being clicked — using an event handler. Again, this looks something like this:</p> - -<pre class="brush: js notranslate">myButton.onclick = function() { - alert('hello'); - // I can put as much code - // inside here as I want -}</pre> - -<h2 id="Function_parameters">Function parameters</h2> - -<p>Some functions require <strong>parameters</strong> to be specified when you are invoking them — these are values that need to be included inside the function parentheses, which it needs to do its job properly.</p> - -<div class="note"> -<p><strong>Note</strong>: Parameters are sometimes called arguments, properties, or even attributes.</p> -</div> - -<p>As an example, the browser's built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> function doesn't require any parameters. When called, it always returns a random number between 0 and 1:</p> - -<pre class="brush: js notranslate">var myNumber = Math.random();</pre> - -<p>The browser's built-in string <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> function however needs two parameters — the substring to find in the main string, and the substring to replace that string with:</p> - -<pre class="brush: js notranslate">var myText = 'I am a string'; -var newString = myText.replace('string', 'sausage');</pre> - -<div class="note"> -<p><strong>Note</strong>: When you need to specify multiple parameters, they are separated by commas.</p> -</div> - -<p>It should also be noted that sometimes parameters are optional — you don't have to specify them. If you don't, the function will generally adopt some kind of default behavior. As an example, the array <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> function's parameter is optional:</p> - -<pre class="brush: js notranslate">var myArray = ['I', 'love', 'chocolate', 'frogs']; -var madeAString = myArray.join(' '); -// returns 'I love chocolate frogs' -var madeAString = myArray.join(); -// returns 'I,love,chocolate,frogs'</pre> - -<p>If no parameter is included to specify a joining/delimiting character, a comma is used by default.</p> - -<h2 id="Function_scope_and_conflicts">Function scope and conflicts</h2> - -<p>Let's talk a bit about {{glossary("scope")}} — a very important concept when dealing with functions. When you create a function, the variables and other things defined inside the function are inside their own separate <strong>scope</strong>, meaning that they are locked away in their own separate compartments, unreachable from inside other functions or from code outside the functions.</p> - -<p>The top level outside all your functions is called the <strong>global scope</strong>. Values defined in the global scope are accessible from everywhere in the code.</p> - -<p>JavaScript is set up like this for various reasons — but mainly because of security and organization. Sometimes you don't want variables to be accessible from everywhere in the code — external scripts that you call in from elsewhere could start to mess with your code and cause problems because they happen to be using the same variable names as other parts of the code, causing conflicts. This might be done maliciously, or just by accident.</p> - -<p>For example, say you have an HTML file that is calling in two external JavaScript files, and both of them have a variable and a function defined that use the same name:</p> - -<pre class="brush: html notranslate"><!-- Excerpt from my HTML --> -<script src="first.js"></script> -<script src="second.js"></script> -<script> - greeting(); -</script></pre> - -<pre class="brush: js notranslate">// first.js -var name = 'Chris'; -function greeting() { - alert('Hello ' + name + ': welcome to our company.'); -}</pre> - -<pre class="brush: js notranslate">// second.js -var name = 'Zaptec'; -function greeting() { - alert('Our company is called ' + name + '.'); -}</pre> - -<p>Both functions you want to call are called <code>greeting()</code>, but you can only ever access the <code>second.js</code> file's <code>greeting()</code> function — it is applied to the HTML later on in the source code, so its variable and function overwrite the ones in <code>first.js</code>.</p> - -<div class="note"> -<p><strong>Note</strong>: You can see this example <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">running live on GitHub</a> (see also the <a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">source code</a>).</p> -</div> - -<p>Keeping parts of your code locked away in functions avoids such problems, and is considered best practice.</p> - -<p>It is a bit like a zoo. The lions, zebras, tigers, and penguins are kept in their own enclosures, and only have access to the things inside their enclosures — in the same manner as the function scopes. If they were able to get into other enclosures, problems would occur. At best, different animals would feel really uncomfortable inside unfamiliar habitats — a lion or tiger would feel terrible inside the penguins' watery, icy domain. At worst, the lions and tigers might try to eat the penguins!</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p> - -<p>The zoo keeper is like the global scope — he or she has the keys to access every enclosure, to restock food, tend to sick animals, etc.</p> - -<h3 id="Active_learning_Playing_with_scope">Active learning: Playing with scope</h3> - -<p>Let's look at a real example to demonstrate scoping.</p> - -<ol> - <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a> example. This contains two functions called <code>a()</code> and <code>b()</code>, and three variables — <code>x</code>, <code>y</code>, and <code>z</code> — two of which are defined inside the functions, and one in the global scope. It also contains a third function called <code>output()</code>, which takes a single parameter and outputs it in a paragraph on the page.</li> - <li>Open the example up in a browser and in your text editor.</li> - <li>Open the JavaScript console in your browser developer tools. In the JavaScript console, enter the following command: - <pre class="brush: js notranslate">output(x);</pre> - You should see the value of variable <code>x</code> output to the screen.</li> - <li>Now try entering the following in your console - <pre class="brush: js notranslate">output(y); -output(z);</pre> - Both of these should return an error along the lines of "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Why is that? Because of function scope — <code>y</code> and <code>z</code> are locked inside the <code>a()</code> and <code>b()</code> functions, so <code>output()</code> can't access them when called from the global scope.</li> - <li>However, what about when it's called from inside another function? Try editing <code>a()</code> and <code>b()</code> so they look like this: - <pre class="brush: js notranslate">function a() { - var y = 2; - output(y); -} - -function b() { - var z = 3; - output(z); -}</pre> - Save the code and reload it in your browser, then try calling the <code>a()</code> and <code>b()</code> functions from the JavaScript console: - - <pre class="brush: js notranslate">a(); -b();</pre> - You should see the <code>y</code> and <code>z</code> values output in the page. This works fine, as the <code>output()</code> function is being called inside the other functions — in the same scope as the variables it is printing are defined in, in each case. <code>output()</code> itself is available from anywhere, as it is defined in the global scope.</li> - <li>Now try updating your code like this: - <pre class="brush: js notranslate">function a() { - var y = 2; - output(x); -} - -function b() { - var z = 3; - output(x); -}</pre> - Save and reload again, and try this again in your JavaScript console: - - <pre class="brush: js notranslate">a(); -b();</pre> - Both the <code>a()</code> and <code>b()</code> call should output the value of x — 1. These work fine because even though the <code>output()</code> calls are not in the same scope as <code>x</code> is defined in, <code>x</code> is a global variable so is available inside all code, everywhere.</li> - <li>Finally, try updating your code like this: - <pre class="brush: js notranslate">function a() { - var y = 2; - output(z); -} - -function b() { - var z = 3; - output(y); -}</pre> - Save and reload again, and try this again in your JavaScript console: - - <pre class="brush: js notranslate">a(); -b();</pre> - This time the <code>a()</code> and <code>b()</code> calls will both return that annoying "<a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" error — this is because the <code>output()</code> calls and the variables they are trying to print are not defined inside the same function scopes — the variables are effectively invisible to those function calls.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: The same scoping rules do not apply to loop (e.g. <code>for() { ... }</code>) and conditional blocks (e.g. <code>if() { ... }</code>) — they look very similar, but they are not the same thing! Take care not to get these confused.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: The <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a> error is one of the most common you'll encounter. If you get this error and you are sure that you have defined the variable in question, check what scope it is in.</p> -</div> - -<ul> -</ul> - -<h3 id="Functions_inside_functions">Functions inside functions</h3> - -<p>Keep in mind that you can call a function from anywhere, even inside another function. This is often used as a way to keep code tidy — if you have a big complex function, it is easier to understand if you break it down into several sub-functions:</p> - -<pre class="brush: js notranslate">function myBigFunction() { - var myValue; - - subFunction1(); - subFunction2(); - subFunction3(); -} - -function subFunction1() { - console.log(myValue); -} - -function subFunction2() { - console.log(myValue); -} - -function subFunction3() { - console.log(myValue); -} -</pre> - -<p>Just make sure that the values being used inside the function are properly in scope. The example above would throw an error <code>ReferenceError: myValue is not defined</code>, because although the <code>myValue</code> variable is defined in the same scope as the function calls, it is not defined inside the function definitions — the actual code that is run when the functions are called. To make this work, you'd have to pass the value into the function as a parameter, like this:</p> - -<pre class="brush: js notranslate">function myBigFunction() { - var myValue = 1; - - subFunction1(myValue); - subFunction2(myValue); - subFunction3(myValue); -} - -function subFunction1(value) { - console.log(value); -} - -function subFunction2(value) { - console.log(value); -} - -function subFunction3(value) { - console.log(value); -}</pre> - -<h2 id="Conclusion">Conclusion</h2> - -<p>This article has explored the fundamental concepts behind functions, paving the way for the next one in which we get practical and take you through the steps to building up your own custom function.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions detailed guide</a> — covers some advanced features not included here.</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions reference</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a>, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a> — advanced concept references</li> -</ul> - -<ul> -</ul> - -<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "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> -<gdiv></gdiv> diff --git a/files/es/learn/javascript/building_blocks/image_gallery/index.html b/files/es/learn/javascript/building_blocks/image_gallery/index.html deleted file mode 100644 index a4bad1842e..0000000000 --- a/files/es/learn/javascript/building_blocks/image_gallery/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Galería de imágenes -slug: Learn/JavaScript/Building_blocks/Image_gallery -translation_of: Learn/JavaScript/Building_blocks/Image_gallery -original_slug: Learn/JavaScript/Building_blocks/Galeria_de_imagenes ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div> - -<p class="summary"><span class="tlid-translation translation" lang="es"><span title="">Ahora que hemos analizado los bloques de construcción fundamentales de JavaScript, pongamos a prueba tu conocimiento de bucles, funciones, condicionales y eventos, creando un elemento que comumente vemos en muchos sitios web, una </span> <span title="">Galería de imágenes "motorizada" por JavaScript .</span></span></p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisitos:</th> - <td>Antes de intentar esta evaluación deberías de haber trabajado con todos los artículos en éste módulo.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Evaluar la comprensión de los bucles, funciones, condicionales y eventos de JavaScript..</td> - </tr> - </tbody> -</table> - -<h2 id="Punto_de_partida">Punto de partida</h2> - -<p>Para realizar esta evaluación, debería descárgarse <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/gallery/gallery-start.zip?raw=true">archivoZip</a> para el ejemplo, descomprímalo en algún lugar de su computadora y haga el ejercicio localmente para empezar.</p> - -<p>Opcionalmente, puedes usar un sitio como <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a href="https://glitch.com/">Glitch</a> para realizar tu evaluación. Puede pegar el HTML, CSS y JavaScript dentro de uno de estos editores online. <span class="tlid-translation translation" lang="es"><span title="">Si el editor en línea que está utilizando no tiene paneles JavaScript / CSS separados, siéntase libre de ponerlos en línea <script> / <style> elementos dentro de la página HTML.</span></span></p> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Si se atascascas con algo, entonces pregúntenos para ayudarlo — vea la sección de {{anch("evaluación o ayuda adicional")}} al final de esta página.</p> -</div> - -<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2> - -<p>Ha sido provisto con algún contenido de HTML, CSS e imágenes, también algunas líneas de código en JavaScript; necesitas escribir las líneas de código en JavaScript necesatio para transformarse en un programa funcional. El HTML body luce así:</p> - -<pre class="brush: html"><h1>Image gallery example</h1> - -<div class="full-img"> - <img class="displayed-img" src="images/pic1.jpg"> - <div class="overlay"></div> - <button class="dark">Darken</button> -</div> - -<div class="thumb-bar"> - -</div></pre> - -<p>El ejemplo se ve así:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/13787/gallery.png" style="display: block; margin: 0 auto;"></p> - -<ul> -</ul> - -<p>Las partes más interesantes del archivo example's CSS :</p> - -<ul> - <li>It absolutely positions the three elements inside the <code>full-img <div></code> — the <code><img></code> in which the full-sized image is displayed, an empty <code><div></code> that is sized to be the same size as the <code><img></code> and put right over the top of it (this is used to apply a darkening effect to the image via a semi-transparent background color), and a <code><button></code> that is used to control the darkening effect.</li> - <li>It sets the width of any images inside the <code>thumb-bar <div></code> (so-called "thumbnail" images) to 20%, and floats them to the left so they sit next to one another on a line.</li> -</ul> - -<p>Your JavaScript needs to:</p> - -<ul> - <li>Loop through all the images, and for each one insert an <code><img></code> element inside the <code>thumb-bar <div></code> that embeds that image in the page.</li> - <li>Attach an <code>onclick</code> handler to each <code><img></code> inside the <code>thumb-bar <div></code> so that when they are clicked, the corresponding image is displayed in the <code>displayed-img <img></code> element.</li> - <li>Attach an <code>onclick</code> handler to the <code><button></code> so that when it is clicked, a darken effect is applied to the full-size image. When it is clicked again, the darken effect is removed again.</li> -</ul> - -<p>To give you more of an idea, have a look at the <a href="http://mdn.github.io/learning-area/javascript/building-blocks/gallery/">finished example</a> (no peeking at the source code!)</p> - -<h2 id="Steps_to_complete">Steps to complete</h2> - -<p>The following sections describe what you need to do.</p> - -<h3 id="Looping_through_the_images">Looping through the images</h3> - -<p>We've already provided you with lines that store a reference to the <code>thumb-bar <div></code> inside a constant called <code>thumbBar</code>, create a new <code><img></code> element, set its <code>src</code> attribute to a placeholder value <code>xxx</code>, and append this new <code><img></code> element inside <code>thumbBar</code>.</p> - -<p>You need to:</p> - -<ol> - <li>Put the section of code below the "Looping through images" comment inside a loop that loops through all 5 images — you just need to loop through five numbers, one representing each image.</li> - <li>In each loop iteration, replace the <code>xxx</code> placeholder value with a string that will equal the path to the image in each case. We are setting the value of the <code>src</code> attribute to this value in each case. Bear in mind that in each case, the image is inside the images directory and its name is <code>pic1.jpg</code>, <code>pic2.jpg</code>, etc.</li> -</ol> - -<h3 id="Adding_an_onclick_handler_to_each_thumbnail_image">Adding an onclick handler to each thumbnail image</h3> - -<p>In each loop iteration, you need to add an <code>onclick</code> handler to the current <code>newImage</code> — this handler should find the value of the <code>src</code> attribute of the current image. Set the <code>src</code> attribute value of the <code>displayed-img <img></code> to the <code>src</code> value passed in as a parameter.</p> - -<h3 id="Writing_a_handler_that_runs_the_darkenlighten_button">Writing a handler that runs the darken/lighten button</h3> - -<p>That just leaves our darken/lighten <code><button></code> — we've already provided a line that stores a reference to the <code><button></code> in a constant called <code>btn</code>. You need to add an <code>onclick</code> handler that:</p> - -<ol> - <li>Checks the current class name set on the <code><button></code> — you can again achieve this by using <code>getAttribute()</code>.</li> - <li>If the class name is <code>"dark"</code>, changes the <code><button></code> class to <code>"light"</code> (using <code><a href="/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), its text content to "Lighten", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0.5)"</code>.</li> - <li>If the class name not <code>"dark"</code>, changes the <code><button></code> class to <code>"dark"</code>, its text content back to "Darken", and the {{cssxref("background-color")}} of the overlay <code><div></code> to <code>"rgba(0,0,0,0)"</code>.</li> -</ol> - -<p>The following lines provide a basis for achieving the changes stipulated in points 2 and 3 above.</p> - -<pre class="brush: js">btn.setAttribute('class', xxx); -btn.textContent = xxx; -overlay.style.backgroundColor = xxx;</pre> - -<h2 id="Hints_and_tips">Hints and tips</h2> - -<ul> - <li>You don't need to edit the HTML or CSS in any way.</li> -</ul> - -<h2 id="Assessment_or_further_help">Assessment or further help</h2> - -<p>If you would like your work assessed, or are stuck and want to ask for help:</p> - -<ol> - <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>.</li> - <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include: - <ul> - <li>A descriptive title such as "Assessment wanted for Image gallery".</li> - <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li> - <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li> - <li>A link to the actual task or assessment page, so we can find the question you want help with.</li> - </ul> - </li> -</ol> - -<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "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/es/learn/server-side/django/django_assessment_blog/index.html b/files/es/learn/server-side/django/django_assessment_blog/index.html deleted file mode 100644 index cb5ac7ad88..0000000000 --- a/files/es/learn/server-side/django/django_assessment_blog/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: 'Evaluación: DIY Django mini blog' -slug: Learn/Server-side/Django/django_assessment_blog -translation_of: Learn/Server-side/Django/django_assessment_blog ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div> - -<p class="summary">En esta evaluación usarás el conocimiento de Django que has adquirido en el módulo <a href="/es/docs/Learn/Server-side/Django" style="font-size: 1.25rem;">Framework Web Django (Python)</a> para crear un blog muy básico<span style="font-size: 1.25rem;">.</span></p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Requisitos Previos:</th> - <td>Before attempting this assessment you should have already worked through all the articles in this module.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Comprender los fundamentos de Django , incluidos las configuraciones de URL , modelos, vistas, formularios y templates.</td> - </tr> - </tbody> -</table> - -<h2 id="Resumen_del_proyecto">Resumen del proyecto</h2> - -<p>Las paginas que necesitan ser mostradas, sus URLs, y otros requisitos son listados debajo: </p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Pagina</th> - <th scope="col">URL</th> - <th scope="col">Requisitos</th> - </tr> - </thead> - <tbody> - <tr> - <td>Home page</td> - <td><code>/</code> and <code>/blog/</code></td> - <td>Una pagina inicial que describa el sitio</td> - </tr> - <tr> - <td>Lista de todos las publicaciones del blog</td> - <td><code>/blog/blogs/</code></td> - <td> - <p>Lista de todos las publicaciones del blog:</p> - - <ul> - <li>Accessible to all users from a sidebar link.</li> - <li>List sorted by post date (newest to oldest).</li> - <li>List paginated in groups of 5 articles.</li> - <li>List items display the blog title, post date, and author.</li> - <li>Blog post names are linked to blog detail pages.</li> - <li>Blogger (author names) are linked to blog author detail pages.</li> - </ul> - </td> - </tr> - <tr> - <td>Blog autor (blogger) pagina de detalles</td> - <td><code>/blog/blogger/<em><author-id></em></code></td> - <td> - <p>Information for a specified author (by id) and list of their blog posts:</p> - - <ul> - <li>Accessible to all users from author links in blog posts etc.</li> - <li>Contains some biographical information about the blogger/author.</li> - <li>List sorted by post date (newest to oldest).</li> - <li>Not paginated.</li> - <li>List items display just the blog post name and post date.</li> - <li>Blog post names are linked to blog detail pages.</li> - </ul> - </td> - </tr> - <tr> - <td>Blog post detail page</td> - <td><code>/blog/<em><blog-id></em></code></td> - <td> - <p>Blog post details.</p> - - <ul> - <li>Accessible to all users from blog post lists.</li> - <li>Page contains the blog post: name, author, post date, and content.</li> - <li>Comments for the blog post should be displayed at bottom.</li> - <li>Comments should be sorted in order: oldest to most recent.</li> - <li>Contains link to add comments at end for logged in users (see Comment form page)</li> - <li>Blog posts and comments need only display plain text. There is no need to support any sort of HTML markup (e.g. links, images, bold/italic, etc).</li> - </ul> - </td> - </tr> - <tr> - <td>List of all bloggers</td> - <td><code>/blog/bloggers/</code></td> - <td> - <p>List of bloggers on system:</p> - - <ul> - <li>Accessible to all users from site sidebar</li> - <li>Blogger names are linked to Blog author detail pages.</li> - </ul> - </td> - </tr> - <tr> - <td>Comment form page</td> - <td><code>/blog/<em><blog-id></em>/create</code></td> - <td> - <p>Create comment for blog post:</p> - - <ul> - <li>Accessible to logged-in users (only) from link at bottom of blog post detail pages.</li> - <li>Displays form with description for entering comments (post date and blog is not editable).</li> - <li>After a comment has been posted, the page will redirect back to the associated blog post page.</li> - <li>Users cannot edit or delete their posts.</li> - <li>Logged out users will be directed to the login page to log in, before they can add comments. After logging in, they will be redirected back to the blog page they wanted to comment on.</li> - <li>Comment pages should include the name/link to the blogpost being commented on.</li> - </ul> - </td> - </tr> - <tr> - <td>User authentication pages</td> - <td><code>/accounts/<em><standard urls></em></code></td> - <td> - <p>Standard Django authentication pages for logging in, out and setting the password:</p> - - <ul> - <li>Login/out should be accessible via sidebar links.</li> - </ul> - </td> - </tr> - <tr> - <td>Admin site</td> - <td><code>/admin/<em><standard urls></em></code></td> - <td> - <p>Admin site should be enabled to allow create/edit/delete of blog posts, blog authors and blog comments (this is the mechanism for bloggers to create new blog posts):</p> - - <ul> - <li>Admin site blog posts records should display the list of associated comments inline (below each blog post).</li> - <li>Comment names in the Admin site are created by truncating the comment description to 75 characters.</li> - <li>Other types of records can use basic registration.</li> - </ul> - </td> - </tr> - </tbody> -</table> - -<p>In addition you should write some basic tests to verify:</p> - -<ul> - <li>All model fields have the correct label and length.</li> - <li>All models have the expected object name (e.g.<code> __str__()</code> returns the expected value).</li> - <li>Models have the expected URL for individual Blog and Comment records (e.g. <code>get_absolute_url()</code> returns the expected URL).</li> - <li>The BlogListView (all-blog page) is accessible at the expected location (e.g. /blog/blogs)</li> - <li>The BlogListView (all-blog page) is accessible at the expected named url (e.g. 'blogs')</li> - <li>The BlogListView (all-blog page) uses the expected template (e.g. the default)</li> - <li>The BlogListView paginates records by 5 (at least on the first page)</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: There are of course many other tests you can run. Use your discretion, but we'll expect you to do at least the tests above.</p> -</div> - -<p>The following section shows <a href="#Screenshots">screenshots</a> of a site that implements the requirements above.</p> - -<h2 id="Screenshots">Screenshots</h2> - -<p>The following screenshot provide an example of what the finished program should output.</p> - -<h3 id="List_of_all_blog_posts">List of all blog posts</h3> - -<p>This displays the list of all blog posts (accessible from the "All blogs" link in the sidebar). Things to note:</p> - -<ul> - <li>The sidebar also lists the logged in user.</li> - <li>Individual blog posts and bloggers are accessible as links in the page.</li> - <li>Pagination is enabled (in groups of 5)</li> - <li>Ordering is newest to oldest.</li> -</ul> - -<p><img alt="List of all blogs" src="https://mdn.mozillademos.org/files/14319/diyblog_allblogs.png" style="border-style: solid; border-width: 1px; display: block; height: 363px; margin: 0px auto; width: 986px;"></p> - -<h3 id="List_of_all_bloggers">List of all bloggers</h3> - -<p>This provides links to all bloggers, as linked from the "All bloggers" link in the sidebar. In this case we can see from the sidebar that no user is logged in.</p> - -<p><img alt="List of all bloggers" src="https://mdn.mozillademos.org/files/14321/diyblog_blog_allbloggers.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 493px;"></p> - -<h3 id="Blog_detail_page">Blog detail page</h3> - -<p>This shows the detail page for a particular blog.</p> - -<p><img alt="Blog detail with add comment link" src="https://mdn.mozillademos.org/files/14323/diyblog_blog_detail_add_comment.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 986px;"></p> - -<p>Note that the comments have a date <em>and</em> time, and are ordered from oldest to newest (opposite of blog ordering). At the end we have a link for accessing the form to add a new comment. If a user is not logged in we'd instead see a suggestion to log in.</p> - -<p><img alt="Comment link when not logged in" src="https://mdn.mozillademos.org/files/14325/diyblog_blog_detail_not_logged_in.png" style="border-style: solid; border-width: 1px; display: block; height: 129px; margin: 0px auto; width: 646px;"></p> - -<h3 id="Add_comment_form">Add comment form</h3> - -<p>This is the form to add comments. Note that we're logged in. When this succeeds we should be taken back to the associated blog post page.</p> - -<p><img alt="Add comment form" src="https://mdn.mozillademos.org/files/14329/diyblog_comment_form.png" style="border-style: solid; border-width: 1px; display: block; height: 385px; margin: 0px auto; width: 778px;"></p> - -<h3 id="Author_bio">Author bio</h3> - -<p>This displays bio information for a blogger along with their blog posts list.</p> - -<p><img alt="Blogger detail page" src="https://mdn.mozillademos.org/files/14327/diyblog_blogger_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 379px; margin: 0px auto; width: 982px;"></p> - -<h2 id="Steps_to_complete">Steps to complete</h2> - -<p>The following sections describe what you need to do.</p> - -<ol> - <li>Create a skeleton project and web application for the site (as described in <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>). You might use 'diyblog' for the project name and 'blog' for the application name.</li> - <li>Create models for the Blog posts, Comments, and any other objects needed. When thinking about your design, remember: - <ul> - <li>Each comment will have only one blog, but a blog may have many comments.</li> - <li>Blog posts and comments must be sorted by post date.</li> - <li>Not every user will necessarily be a blog author though any user may be a commenter.</li> - <li>Blog authors must also include bio information.</li> - </ul> - </li> - <li>Run migrations for your new models and create a superuser.</li> - <li>Use the admin site to create some example blog posts and blog comments.</li> - <li>Create views, templates, and URL configurations for blog post and blogger list pages.</li> - <li>Create views, templates, and URL configurations for blog post and blogger detail pages.</li> - <li>Create a page with a form for adding new comments (remember to make this only available to logged in users!)</li> -</ol> - -<h2 id="Hints_and_tips">Hints and tips</h2> - -<p>This project is very similar to the <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial. You will be able to set up the skeleton, user login/logout behaviour, support for static files, views, URLs, forms, base templates and admin site configuration using almost all the same approaches.</p> - -<p>Some general hints:</p> - -<ol> - <li>The index page can be implemented as a basic function view and template (just like for the locallibrary).</li> - <li>The list view for blog posts and bloggers, and the detail view for blog posts can be created using the <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">generic list and detail views</a>.</li> - <li>The list of blog posts for a particular author can be created by using a generic list Blog list view and filtering for blog object that match the specified author. - <ul> - <li>You will have to implement <code>get_queryset(self)</code> to do the filtering (much like in our library class <code>LoanedBooksAllListView</code>) and get the author information from the URL.</li> - <li>You will also need to pass the name of the author to the page in the context. To do this in a class-based view you need to implement <code>get_context_data()</code> (discussed below).</li> - </ul> - </li> - <li>The <em>add comment</em> form can be created using a function-based view (and associated model and form) or using a generic <code>CreateView</code>. If you use a <code>CreateView</code> (recommended) then: - <ul> - <li>You will also need to pass the name of the blog post to the comment page in the context (implement <code>get_context_data()</code> as discussed below).</li> - <li>The form should only display the comment "description" for user entry (date and associated blog post should not be editable). Since they won't be in the form itself, your code will need to set the comment's author in the<code> form_valid()</code> function so it can be saved into the model (<a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/#models-and-request-user">as described here</a> — Django docs). In that same function we set the associated blog. A possible implementation is shown below (<code>pk</code> is a blog id passed in from the URL/URL configuration). - <pre class="brush: python"> def form_valid(self, form): - """ - Add author and associated blog to form data before setting it as valid (so it is saved to model) - """ - #Add logged-in user as author of comment - form.instance.author = self.request.user - #Associate comment with blog based on passed id - form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk']) - # Call super-class form validation behaviour - return super(BlogCommentCreate, self).form_valid(form) -</pre> - </li> - <li>You will need to provide a success URL to redirect to after the form validates; this should be the original blog. To do this you will need to override <code>get_success_url()</code> and "reverse" the URL for the original blog. You can get the required blog ID using the <code>self.kwargs</code> attribute, as shown in the <code>form_valid()</code> method above.</li> - </ul> - </li> -</ol> - -<p>We briefly talked about passing a context to the template in a class-based view in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views">Django Tutorial Part 6: Generic list and detail views</a> topic. To do this you need to override <code>get_queryset()</code> (first getting the existing context, updating it with whatever additional variables you want to pass to the template, and then returning the updated context. For example, the code fragment below shows how you can add a blogger object to the context based on their <code>BlogAuthor</code> id.</p> - -<pre class="brush: python">class SomeView(generic.ListView): - ... - - def get_context_data(self, **kwargs): - # Call the base implementation first to get a context - context = super(SomeView, self).get_context_data(**kwargs) - # Get the blogger object from the "pk" URL parameter and add it to the context - context['blogger'] = get_object_or_404(BlogAuthor, pk = self.kwargs['pk']) - return context -</pre> - -<h2 id="Assessment">Assessment</h2> - -<p>The assessment for this task is <a href="https://github.com/mdn/django-diy-blog/blob/master/MarkingGuide.md">available on Github here</a>. This assessment is primarily based on how well your application meets the requirements we listed above, though there are some parts of the assessment that check your code uses appropriate models, and that you have written at least some test code. When you're done, you can check out our <a href="https://github.com/mdn/django-diy-blog">the finished example</a> which reflects a "full marks" project.</p> - -<p>Once you've completed this module you've also finished all the MDN content for learning basic Django server-side website programming! We hope you enjoyed this module and feel you have a good grasp of the basics!</p> - -<p>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p> - -<p> </p> - -<h2 id="En_este_modulo">En este modulo</h2> - -<ul> - <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> -</ul> diff --git a/files/es/learn/server-side/django/web_application_security/index.html b/files/es/learn/server-side/django/web_application_security/index.html deleted file mode 100644 index e00a1771bb..0000000000 --- a/files/es/learn/server-side/django/web_application_security/index.html +++ /dev/null @@ -1,176 +0,0 @@ ---- -title: Seguridad de las aplicaciones web Django -slug: Learn/Server-side/Django/web_application_security -translation_of: Learn/Server-side/Django/web_application_security ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div> - -<p class="summary">Proteger los datos de los usuarios es una parte esencial de cualquier diseño de un sitio web. Previamente ya explicamos algunas de las amenazas de seguridad más comunes en el artículo <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Seguridad Web</a> — este artículo proporciona una demostración práctica de cómo las protecciones integradas de Django gestionan estas amenazas.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerrequisitos:</th> - <td>Lee la documentación de la Programación del Lado del servidor "<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Seguridad de la aplicación web de Django</a>". Completa todos los temas del Tutorial de Django (incluyendo este) o por lo menos el <a href="/en-US/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajar con formularios web</a>.</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Comprender las cosas principales que debes hacer (y las que no debes) para proteger su aplicación web de Django.</td> - </tr> - </tbody> -</table> - -<h2 id="Overview">Overview</h2> - -<p>The <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Website security</a> topic provides an overview of what website security means for server-side design, and some of the more common threats that you may need to protect against. One of the key messages in that article is that almost all attacks are successful when the web application trusts data from the browser.</p> - -<div class="warning"> -<p><strong>Important:</strong> The single most important lesson you can learn about website security is to <strong>never trust data from the browser</strong>. This includes <code>GET</code> request data in URL parameters, <code>POST</code> data, HTTP headers and cookies, user-uploaded files, etc. Always check and sanitize all incoming data. Always assume the worst.</p> -</div> - -<p>The good news for Django users is that many of the more common threats are handled by the framework! The <a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> (Django docs) article explains Django's security features and how to secure a Django-powered website.</p> - -<h2 id="Common_threatsprotections">Common threats/protections</h2> - -<p>Rather than duplicate the Django documentation here, in this article we'll demonstrate just a few of the security features in the context of our Django <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> tutorial.</p> - -<h3 id="Cross_site_scripting_(XSS)">Cross site scripting (XSS)</h3> - -<p>XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts <em>through</em> the website into the browsers of other users. This is usually achieved by storing malicious scripts in the database where they can be retrieved and displayed to other users, or by getting users to click a link that will cause the attacker’s JavaScript to be executed by the user’s browser.</p> - -<p>Django's template system protects you against the majority of XSS attacks by <a href="https://docs.djangoproject.com/en/1.10/ref/templates/language/#automatic-html-escaping">escaping specific characters</a> that are "dangerous" in HTML. We can demonstrate this by attempting to inject some JavaScript into our LocalLibrary website using the Create-author form we set up in <a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a>.</p> - -<ol> - <li>Start the website using the development server (<code>python3 manage.py runserver</code>).</li> - <li>Open the site in your local browser and login to your superuser account.</li> - <li>Navigate to the author-creation page (which should be at URL: <code><a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a></code>).</li> - <li>Enter names and date details for a new user, and then append the following text to the Last Name field:<br> - <code><script>alert('Test alert');</script></code>.<br> - <img alt="Author Form XSS test" src="https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png" style="border-style: solid; border-width: 1px; height: 245px; width: 594px;"> - <div class="note"> - <p><strong>Note:</strong> This is a harmless script that, if executed, will display an alert box in your browser. If the alert is displayed when you submit the record then the site is vulnerable to XSS threats.</p> - </div> - </li> - <li>Press <strong>Submit</strong> to save the record.</li> - <li>When you save the author it will be displayed as shown below. Because of the XSS protections the <code>alert()</code> should not be run. Instead the script is displayed as plain text.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li> -</ol> - -<p>If you view the page HTML source code, you can see that the dangerous characters for the script tags have been turned into their harmless escape code equivalents (e.g. <code>></code> is now <code>&gt;</code>)</p> - -<pre class="brush: html"><h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1> -</pre> - -<p>Using Django templates protects you against the majority of XSS attacks. However it is possible to turn off this protection, and the protection isn't automatically applied to all tags that wouldn't normally be populated by user input (for example, the <code>help_text</code> in a form field is usually not user-supplied, so Django doesn't escape those values).</p> - -<p>It is also possible for XSS attacks to originate from other untrusted source of data, such as cookies, Web services or uploaded files (whenever the data is not sufficiently sanitized before including in a page). If you're displaying data from these sources, then you may need to add your own sanitisation code.</p> - -<h3 id="Cross_site_request_forgery_(CSRF)_protection">Cross site request forgery (CSRF) protection</h3> - -<p>CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent. For example consider the case where we have a hacker who wants to create additional authors for our LocalLibrary.</p> - -<div class="note"> -<p><strong>Note:</strong> Obviously our hacker isn't in this for the money! A more ambitious hacker could use the same approach on other sites to perform much more harmful tasks (e.g. transfer money to their own accounts, etc.)</p> -</div> - -<p>In order to do this, they might create an HTML file like the one below, which contains an author-creation form (like the one we used in the previous section) that is submitted as soon as the file is loaded. They would then send the file to all the Librarians and suggest that they open the file (it contains some harmless information, honest!). If the file is opened by any logged in librarian, then the form would be submitted with their credentials and a new author would be created.</p> - -<pre class="brush: html"><html> -<body onload='document.EvilForm.submit()'> - -<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'> - <table> - <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /></td></tr> - <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /></td></tr> - <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text" /></td></tr> - <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /></td></tr> - </table> - <input type="submit" value="Submit" /> -</form> - -</body> -</html> -</pre> - -<p>Run the development web server, and log in with your superuser account. Copy the text above into a file and then open it in the browser. You should get a CSRF error, because Django has protection against this kind of thing!</p> - -<p>The way the protection is enabled is that you include the <code>{% csrf_token %}</code> template tag in your form definition. This token is then rendered in your HTML as shown below, with a value that is specific to the user on the current browser.</p> - -<pre class="brush: html"><input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /> -</pre> - -<p>Django generates a user/browser specific key and will reject forms that do not contain the field, or that contain an incorrect field value for the user/browser.</p> - -<p>To use this type of attack the hacker now has to discover and include the CSRF key for the specific target user. They also can't use the "scattergun" approach of sending a malicious file to all librarians and hoping that one of them will open it, since the CSRF key is browser specific.</p> - -<p>Django's CSRF protection is turned on by default. You should always use the <code>{% csrf_token %}</code> template tag in your forms and use <code>POST</code> for requests that might change or add data to the database.</p> - -<h3 id="Other_protections">Other protections</h3> - -<p>Django also provides other forms of protection (most of which would be hard or not particularly useful to demonstrate):</p> - -<dl> - <dt>SQL injection protection</dt> - <dd>SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. In almost every case you'll be accessing the database using Django’s querysets/models, so the resulting SQL will be properly escaped by the underlying database driver. If you do need to write raw queries or custom SQL then you'll need to explicitly think about preventing SQL injection.</dd> - <dt>Clickjacking protection</dt> - <dd>In this attack a malicious user hijacks clicks meant for a visible top level site and routes them to a hidden page beneath. This technique might be used, for example, to display a legitimate bank site but capture the login credentials in an invisible <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code><iframe></code></a> controlled by the attacker. Django contains <a href="https://docs.djangoproject.com/en/1.10/ref/clickjacking/#clickjacking-prevention">clickjacking protection</a> in the form of the <a href="https://docs.djangoproject.com/en/1.10/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware"><code>X-Frame-Options middleware</code></a> which, in a supporting browser, can prevent a site from being rendered inside a frame.</dd> - <dt>Enforcing SSL/HTTPS</dt> - <dd>SSL/HTTPS can be enabled on the web server in order to encrypt all traffic between the site and browser, including authentication credentials that would otherwise be sent in plain text (enabling HTTPS is highly recommended). If HTTPS is enabled then Django provides a number of other protections you can use:</dd> -</dl> - -<ul> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER"><code>SECURE_PROXY_SSL_HEADER</code></a> can be used to check whether content is secure, even if it is incoming from a non-HTTP proxy.</li> - <li><a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_SSL_REDIRECT"><code>SECURE_SSL_REDIRECT</code></a> is used to redirect all HTTP requests to HTTPS.</li> - <li>Use <a href="https://docs.djangoproject.com/en/1.10/ref/middleware/#http-strict-transport-security">HTTP Strict Transport Security</a> (HSTS). This is an HTTP header that informs a browser that all future connections to a particular site should always use HTTPS. Combined with redirecting HTTP requests to HTTPS, this setting ensures that HTTPS is always used after a successful connection has occurred. HSTS may either be configured with <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_HSTS_SECONDS"><code>SECURE_HSTS_SECONDS</code></a> and <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS"><code>SECURE_HSTS_INCLUDE_SUBDOMAINS</code></a> or on the Web server.</li> - <li>Use ‘secure’ cookies by setting <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-SESSION_COOKIE_SECURE"><code>SESSION_COOKIE_SECURE</code></a> and <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-CSRF_COOKIE_SECURE"><code>CSRF_COOKIE_SECURE</code></a> to <code>True</code>. This will ensure that cookies are only ever sent over HTTPS.</li> -</ul> - -<dl> - <dt>Host header validation</dt> - <dd>Use <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-ALLOWED_HOSTS"><code>ALLOWED_HOSTS</code></a> to only accept requests from trusted hosts.</dd> -</dl> - -<p>There are many other protections, and caveats to the usage of the above mechanisms. While we hope that this has given you an overview of what Django offers, you should still read the Django security documentation.</p> - -<ul> -</ul> - -<h2 id="Summary">Summary</h2> - -<p>Django has effective protections against a number of common threats, including XSS and CSRF attacks. In this article we've demonstrated how those particular threats are handled by Django in our <em>LocalLibrary</em> website. We've also provided a brief overview of some of the other protections.</p> - -<p>This has been a very brief foray into web security. We strongly recommend that you read <a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> to gain a deeper understanding.</p> - -<p>The next and final step in this module about Django is to complete the <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">assessment task</a>.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://docs.djangoproject.com/en/1.10/topics/security/">Security in Django</a> (Django docs)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Server side website security</a> (MDN)</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Web security</a> (MDN)</li> - <li><a href="/en-US/docs/Web/Security/Securing_your_site">Securing your site</a> (MDN)</li> -</ul> - -<p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p> - -<h2 id="En_este_módulo">En este módulo</h2> - -<ul> - <li><a href="/es/docs/Learn/Server-side/Django/Introducción">Introducción a Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/development_environment">Configurando un entorno de desarrollo Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Tutorial_local_library_website">Tutorial de Django: El sito web de la Biblioteca Local</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/skeleton_website">Tutorial de Django Parte 2: Creando el esqueleto de un sitio web</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Models">Tutorial de Django Parte 3: Usando modelos</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Admin_site">Tutorial de Django Parte 4: Sitio de administración de Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Home_page">Tutorial de Django Parte 5: Creando nuestra página de inicio</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Generic_views">Tutorial de Django Parte 6: Listas genéricas y vistas de detalle</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Sessions">Tutorial de Django Parte 7: Framework de sesiones</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Authentication">Tutorial de Django Parte 8: Autenticación de usuarios y permisos</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Forms">Tutorial de Django Parte 9: Trabajando con formularios</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Testing">Tutorial de Django Parte 10: Probando una aplicación web de Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/Deployment">Tutorial de Django Parte 11: Poniendo Django en producción</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/web_application_security">Seguridad en aplicaciones web Django</a></li> - <li><a href="/es/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li> -</ul> diff --git a/files/es/mozilla/firefox/releases/19/index.html b/files/es/mozilla/firefox/releases/19/index.html deleted file mode 100644 index c5ebfd438a..0000000000 --- a/files/es/mozilla/firefox/releases/19/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Firefox 19 para Desarrolladores -slug: Mozilla/Firefox/Releases/19 -translation_of: Mozilla/Firefox/Releases/19 -original_slug: Firefox_19_para_desarrolladores ---- -<div>{{FirefoxSidebar}}</div> - -<p> - </p><p>Quieres ayudar a documentar Firefox 19? Visita la <a class="external" href="http://beta.elchi3.de/doctracker/#list=fx&version=19.0">lista de bugs que necesitan ser revisados</a> e inicia!</p> -<p></p> - -<h2 id="Cambios_para_desarrolladores">Cambios para desarrolladores</h2> - -<h3 id="JavaScript">JavaScript</h3> - -<ul> - <li>Los objetos <code style="font-size: 14px;"><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Map" title="/en-US/docs/JavaScript/Reference/Global_Objects/Map">Map</a> y</code> <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Set" title="/en-US/docs/JavaScript/Reference/Global_Objects/Set">Set</a></code> pasaron de tener un método <code>size()</code> a tener una propiedad <code>size</code> ({{bug("807001")}})</li> - <li>Los objetos <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Map" style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;" title="/en-US/docs/JavaScript/Reference/Global_Objects/Map">Map</a> and <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Set" title="/en-US/docs/JavaScript/Reference/Global_Objects/Set">Set</a></code> ahora tienen un método clear(). ({{bug("805003")}})</li> -</ul> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Support for the viewport-relative {{cssxref("<length>")}} units, <code>vh</code>, <code>vw</code>, <code>vmin</code>, and <code>vmax</code>, has landed ({{bug("503720")}})</li> - <li>CSS Flexbox has been unprefixed, but remains disabled by default ({{bug("801098")}}).</li> - <li>The <code>-moz-initial</code> value has been unprefixed ({{bug("806068")}}). <code>-moz-initial</code> will be kept for a while as an alias; however, authors are strongly encouraged to switch over to <code>initial</code>.</li> - <li>The CSS {{ cssxref("text-transform")}} property now supports the <code>full-width</code> keyword, which allows a more seamless inclusion of Latin characters in text using ideographic fixed-width characters, like Chinese or Japanese ({{bug("774560")}}).</li> - <li>The CSS {{ cssxref("page-break-inside")}} has been implemented ({{bug("685012")}}).</li> - <li>The CSS {{ cssxref("calc", "calc()")}} function can now be used on <code><color-stop></code> (on {{cssxref("<gradient>")}}).</li> - <li>The CSS {{ cssxref("@page") }} at-rule is now supported ({{bug("115199")}}). Note that the pseudo-classes {{cssxref(":first")}}, {{cssxref(":right")}}, and {{cssxref(":left")}} are not yet implemented.</li> - <li>The {{ cssxref(":-moz-placeholder") }} pseudo-class is replaced by the {{ cssxref("::-moz-placeholder") }} pseudo-<em>element</em> ({{ bug("737786") }}).</li> -</ul> - -<h3 id="DOM">DOM</h3> - -<ul> - <li>The {{ domxref("element.getElementsByTagName") }} method will now return <code>HTMLCollection</code> ({{bug("799464")}}).</li> - <li>The {{domxref("File")}} <code>mozLastModifiedDate</code> property has been implemented. ({{bug("793955")}})</li> - <li>The {{domxref("CanvasRenderingContext2D")}} <code>isPointInStroke</code> method has been implemented ({{bug("803124")}}).</li> -</ul> - -<h3 id="XForms">XForms</h3> - -<p>Support for <a href="/en-US/docs/XForms" title="/en-US/docs/XForms">XForms</a> has been <a href="http://www.philipp-wagner.com/blog/2011/07/the-future-of-mozilla-xforms/" title="http://www.philipp-wagner.com/blog/2011/07/the-future-of-mozilla-xforms/"><strong>removed</strong></a> in Firefox 19.</p> - -<h2 id="Changes_for_add-on_and_Mozilla_developers">Changes for add-on and Mozilla developers</h2> - -<div class="note"> -<p><strong>Note:</strong> A key change in Firefox 19 is that <a href="/en-US/docs/XPCOM_API_Reference/nsresult" title="/en-US/docs/XPCOM_API_Reference/nsresult"><code>nsresult</code></a> is now strongly typed. This will help make it easier to detect bugs that are caused by mishandling of return values, but may cause existing code to break if it's making incorrect assumptions in this regard.</p> -</div> - -<ul> - <li><code>getBrowserSelection()</code> now returns the selected text in a text input field. As a result, <code>gContextMenu.isTextSelected</code> will be <code>true</code> when the user selects text in a text input field that is not a password field. ({{bug("565717")}})</li> - <li><a href="/en/Mozilla/JavaScript_code_modules/Dict.jsm" title="en/Mozilla/JavaScript_code_modules/Dict.jsm">Dict.jsm</a>: <a href="/en/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary" title="en/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary"><code>Dict()</code></a> now takes a JSON String. <a href="/en/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()" title="en/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()"><code>Dict.toJSON()</code></a> was added, and it returns a JSON String. ({{bug("727967")}})</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://www.mozilla.org/en-US/firefox/19.0beta/releasenotes/">Firefox 19 Beta Release Notes</a></li> - <li><a href="/en-US/docs/Site_Compatibility_for_Firefox_19">Site Compatibility for Firefox 19</a></li> -</ul> - -<h3 id="Older_versions">Older versions</h3> - -<p>{{Firefox_for_developers('18')}}</p> diff --git a/files/es/mozilla/firefox/releases/63/index.html b/files/es/mozilla/firefox/releases/63/index.html deleted file mode 100644 index cd63bb1eac..0000000000 --- a/files/es/mozilla/firefox/releases/63/index.html +++ /dev/null @@ -1,274 +0,0 @@ ---- -title: Firefox 63 para desarrolladores -slug: Mozilla/Firefox/Releases/63 -tags: - - Firefox - - Mozilla - - Release -translation_of: Mozilla/Firefox/Releases/63 ---- -<div>{{FirefoxSidebar}}</div> - -<p class="summary">Este articulo proporciona información sobre los cambios en Firefox 63, que afectara a los desarrolladores. La versión de Firefox 63 fue publicada el 23 de octubre del 2018.</p> - -<h2 id="Cambios_para_los_desarrolladores_web">Cambios para los desarrolladores web</h2> - -<h3 id="Herramientas_de_desarrollo">Herramientas de desarrollo</h3> - -<ul> - <li>La pestaña de fuentes en el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de Pagina</a> ahora incluye un editor que facilita ver y editar los ajustes de fuente en tu página. ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_fonts">editar fuentes </a>para más detalles.</li> - <li>El <a href="/en-US/docs/Tools/Accessibility_inspector">Inspector de accesibilidad</a> ahora está habilitado por defecto. ({{bug(1482454)}}).</li> - <li>Cuando flotas sobre un objeto en el <a href="/en-US/docs/Tools/Accessibility_inspector">Inspector de accesibilidad</a>, <a href="/en-US/docs/Tools/Accessibility_inspector#Highlighting_of_UI_items">el objeto es resaltado </a>y su rol y nombre serán mostrados en una barra de información de la página. ({{bug(1473030)}}).</li> - <li>La consola de comandos en la <a href="/en-US/docs/Tools/Web_Console">Consola Web</a> es ahora mostrada inmediatamente con su respectivo resultado. ({{bug(1136299)}}).</li> - <li>Un nuevo icono ha sido añadido al contenido <a href="/en-US/docs/Tools/Network_Monitor">Monitor de Red</a> para indicar cuando una URL pertenece a un rastreador desconocido — ver <a href="/en-US/docs/Tools/Network_Monitor/request_list#Security_icons">iconos de seguridad.</a> ({{bug(1333994)}}).</li> - <li>El valor por defecto de <code>devtools.aboutdebugging.showSystemAddons</code> es ahora <code>false</code>, significa que los complementos del sistema no serán listados en el <code>about:debugging</code> página. Puedes cambiar los ajustes navegando en <code>about:config</code> ({{bug(1425347)}}).</li> - <li>la barra de tareas <a href="/en-US/docs/Tools/Responsive_Design_Mode">Modo de diseño responsivo</a> fue simplificada, y añadimos la opción de alinear a la izquierda left-align la ventanilla.</li> - <li>El inspector de página incluye un <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Custom_element_definition">enlace a la definición de clases</a> para un elemento personalizado. ({{bug(1443923)}}).</li> -</ul> - -<h3 id="HTML">HTML</h3> - -<ul> - <li>Soporte para los {{HTMLElement("img")}} elementos <code>decoding</code> el atributo ha sido añadido ({{bug(1416328)}}); ver tambien {{DOMxRef("HTMLImageElement.decoding")}}.</li> -</ul> - -<h4 id="Removals">Removals</h4> - -<ul> - <li>Soporte para la <code>sidebar</code> (barralateral) tipo de enlace (<code>rel="sidebar"</code>) ha sido removido. si una etiqueta de anclaje incluye este atributo, sera ignorado. ({{bug(1452645)}}).</li> -</ul> - -<h3 id="CSS">CSS</h3> - -<ul> - <li>Soporte para {{CSSxRef(":defined")}} pseudo-clase ha sido añadida ({{bug(1331334)}}).</li> - <li>soporte para {{CSSxRef("row-gap")}}, {{CSSxRef("column-gap")}} y {{CSSxRef("gap")}} ha sido añadida en <a href="/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox#The_gap_properties">diseño flexbox</a> ({{bug(1398483)}}).</li> - <li>Soporte reactivado para <a href="/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio">webkit-prefixed pixel-density @media queries</a> ({{bug(1444139)}}).</li> - <li>Soporte añadido para <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">CSS Caja de diseño flexible</a> (Flexbox) propiedades {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, y {{CSSxRef("align-items")}} también como {{CSSxRef("justify-content")}} propiedad ({{bug(1472843)}}).</li> - <li>implementado el path()función para {{CSSxRef("offset-path")}} ({{bug(1429298)}}).</li> - <li>Implementado <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Syntax_improvements_in_Level_4">mejoras en la sintaxis de la petición de medios nivel 4</a> ({{bug(1472843)}}).</li> - <li>Cambio de nombre offset-* propiedades a {{CSSxRef("inset-block-start")}}, {{CSSxRef("inset-block-end")}}, {{CSSxRef("inset-inline-start")}}, and {{CSSxRef("inset-inline-end")}} ({{bug(1464782)}}).</li> - <li>Adiciona soporte para <a href="/en-US/docs/Web/CSS/@media/prefers-reduced-motion">preferencia-movimiento-reducido</a> implementación contenido media. ({{bug(1365045)}}, {{bug(1475462)}}).</li> - <li>Added flow relative values (<code>block</code>, <code>inline</code>) for the {{CSSxRef("resize")}} property ({{bug(1464786)}}).</li> - <li>Implemented flexbox layout for <code>safe</code> & <code>unsafe</code> values in {{CSSxRef("align-self")}}, {{CSSxRef("align-content")}}, and {{CSSxRef("justify-content")}} ({{bug(1297774)}}).</li> - <li>The <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">logical properties</a> (where appropriate) are now animatable ({{bug(1309752)}}).</li> -</ul> - -<h4 id="Removals_2">Removals</h4> - -<ul> - <li>Removed <code>offset-block-start</code>, <code>offset-block-end</code>, <code>offset-inline-start</code> and <code>offset-inline-end</code>; these have been renamed to <code>inset-*</code>, as described above ({{bug(1464782)}}).</li> -</ul> - -<h3 id="SVG">SVG</h3> - -<p><em>No changes.</em></p> - -<h3 id="JavaScript">JavaScript</h3> - -<ul> - <li>The {{JSxRef("Symbol.prototype.description")}} property has been implemented ({{bug(1472170)}}).</li> - <li>The {{JSxRef("Object.fromEntries()")}} method has been added ({{bug(1469019)}}).</li> - <li>When you try to access a property of an undefined object, the error message is now much improved. Considering the case where <code>x</code> is undefined and you try to access <code>x.y</code>, instead of <code>TypeError: x is undefined</code> the console now returns the more descriptive <code><a href="/en-US/docs/Web/JavaScript/Reference/Errors/cant_access_property">x is undefined; can't access its "y" property</a></code> ({{bug(1259822)}}).</li> -</ul> - -<h4 id="Removals_3">Removals</h4> - -<ul> - <li>Experimental WebAssembly Module IndexedDB serialization support has been removed ({{bug(1469395)}}).</li> -</ul> - -<h3 id="APIs">APIs</h3> - -<h4 id="New_APIs">New APIs</h4> - -<ul> - <li>The Shadow DOM ({{bug(1471947)}}) and Custom Elements ({{bug(1471948)}}) APIs have been enabled by default; See <a href="/en-US/docs/Web/Web_Components">Web components</a> for more details.</li> - <li>The {{domxref("Media_Capabilities_API", "Media Capabilities API", "", "1")}} been implemented ({{bug(1409664)}}).</li> - <li>The {{domxref("Clipboard", "Async Clipboard API", "", "1")}} has been implemented and enabled by default for all channels ({{bug(1461465)}}). As is the case with Chrome, Firefox currently implements only the {{domxref("Clipboard.writeText", "writeText()")}} and {{domxref("Clipboard.readText", "readText()")}} methods; however, unlike Chrome, <code>readText()</code> is only available in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">browser extensions</a>.</li> - <li>The {{DOMxRef("SecurityPolicyViolationEvent")}} interface is now supported. It allows sending events when the {{HTTPHeader("Content-Security-Policy")}} is violated ({{bug(1472661)}}).</li> -</ul> - -<h4 id="DOM">DOM</h4> - -<ul> - <li>The following portions of the {{domxref("Web_Animations_API", "Web Animations API", "", "1")}} have been enabled by default (see {{bug(1476158)}}): - <ul> - <li>The {{DOMxRef("Animation")}} properties {{DOMxRef("Animation.ready", "ready")}} and {{DOMxRef("Animation.finished", "finished")}}, specifying the <code>Animation</code> object's <code>ready</code> and <code>finished</code> {{JSxRef("Promise")}}s.</li> - <li>The {{DOMxRef("Animation")}} object's {{DOMxRef("Animation.effect", "effect")}} property.</li> - <li>The interfaces {{DOMxRef("KeyframeEffect")}} and {{DOMxRef("AnimationEffect")}}.</li> - </ul> - </li> - <li>The {{DOMxRef("Element.toggleAttribute()")}} method has been implemented ({{bug(1469592)}}).</li> - <li>The historical, previously non-standard, {{DOMxRef("Event.returnValue")}} property is now supported for compatibility purposes ({{bug(1452569)}}).</li> - <li>We implemented the {{DOMxRef("Window.event")}} property to improve web compatibility, now that it's become standard ({{bug(218415)}}).</li> - <li>To bring Firefox into alignment with Edge and Chrome, the {{DOMxRef("NavigatorID.platform", "navigator.platform")}} property now returns <code>"Win32"</code> even when running on 64-bit Windows ({{bug(1472618)}}).</li> - <li>Prior to Firefox 63, links that open new windows that had <code>rel="noopener"</code>, as well as calls to {{DOMxRef("Window.open()")}} with the <code><a href="/en-US/docs/Web/API/Window/open#noopener">noopener</a></code> window feature enabled would default to having all window features disabled, so that you had to explicitly re-enable any standard features you wanted. Now these windows have the same set of features enabled as any other window, and you need to explicitly turn off any you don't want ({{bug(1419960)}}).</li> -</ul> - -<h4 id="DOM_events">DOM events</h4> - -<ul> - <li>Handling of the <kbd>Alt</kbd> key <em>on the right side</em> of the keyboard has been improved on Windows. If the user's current keyboard layout maps the <kbd>Alt</kbd> key to the <kbd>AltGr</kbd> modifier key, the value of {{DOMxRef("KeyboardEvent.key")}} is now reported as <code>"AltGraph"</code>. This behavior matches the behavior recently introduced in Chrome ({{bug(900750)}}).</li> -</ul> - -<h4 id="Media_Web_Audio_and_WebRTC">Media, Web Audio, and WebRTC</h4> - -<ul> - <li>Microphone access now works simultaneously in multiple tabs, even within the same content process ({{bug(1404977)}}).</li> - <li>{{DOMxRef("RTCDataChannel")}} has been updated to support the sctp-sdp-21 data format for the data, in addition to the older sctp-sdp-05 format previously supported.</li> - <li>The {{DOMxRef("ConstantSourceNode")}} node type for Web Audio API now has a default channel count of 2 rather than 1, in order to match the specification ({{bug(1413283)}}).</li> - <li>The {{domxref("Web_Audio_API", "Web Audio API", "", "1")}} interface {{DOMxRef("AudioScheduledSourceNode")}} (and by extension, all the other node types based on it) now throw the correct exception when a negative value is specified for the node start time. That error is <code>RangeError</code> ({{bug(1413284)}}).</li> - <li>The minimum and maximum permitted values for an {{DOMxRef("AudioParam")}} object's {{DOMxRef("AudioParam.value", "value")}} have been changed to the minimum negative single-precision floating-point value (-340,282,346,638,528,859,811,704,183,484,516,925,440) and the maximum positive single-precision floating-point value (+340,282,346,638,528,859,811,704,183,484,516,925,440) respectively ({{bug(1476695)}}).</li> - <li>The {{DOMxRef("SourceBuffer.changeType")}} method, which allows you to change codecs during an active stream, has been enabled by default. This is part of the {{domxref("Media_Source_Extensions_API", "Media Source Extensions API", "", "1")}} ({{bug(1481166)}}).</li> - <li>The {{DOMxRef("AudioParam.setValueCurveAtTime()")}} method has been updated to correctly accept an array of floating-point values to indicate the parameter's values to change to over time. Previously, it required a {{DOMxRef("Float32Array")}} ({{bug(1421091)}}).</li> - <li>{{DOMxRef("AudioParam.setValueCurveAtTime()")}} has also been updated to correctly return a proper <code>TypeError</code> when a non-finite value is found in the <code>values</code> array ({{bug(1472095)}}).</li> - <li>In addition, <code>setValueCurveAtTime()</code> has been updated to ensure that, when the parameter finishes following the specified value curve after the duration elapses, the value of the parameter is set to the last value in the list of values to curve through ({{bug(1308436)}}).</li> - <li>The <code>RTCRTPStreamStats</code> dictionary has been renamed to {{DOMxRef("RTCRtpStreamStats")}} for consistency with other WebRTC dictionaries and the specification ({{bug(1480498)}}).</li> - <li>Support for the <code>RTCRtpStreamStats</code> dictionary's {{DOMxRef("RTCRtpStreamStats.kind", "kind")}} property has been added ({{bug(1481851)}}).</li> - <li>The {{DOMxRef("RTCRtpStreamStats")}} dictionary's {{DOMxRef("RTCRtpStreamStats.isRemote", "isRemote")}} property is deprecated and will be removed in Firefox 65. A warning is now output to console when this property is accessed. See <a href="https://blog.mozilla.org/webrtc/getstats-isremote-65/">this blog post on the Advancing WebRTC blog</a> for details ({{bug(1393306)}}).</li> -</ul> - -<h4 id="Canvas_and_WebGL">Canvas and WebGL</h4> - -<ul> - <li>A new <code>powerPreference</code> context attribute has been added to {{DOMxRef("HTMLCanvasElement.getContext()")}}. On macOS this allows WebGL non-performance-critical applications and applets to request the low-power GPU instead of the high-power GPU in multi-GPU systems ({{bug(1349799)}}).</li> -</ul> - -<h4 id="Removals_4">Removals</h4> - -<ul> - <li>The obsolete and non-standard Firefox-only methods {{DOMxRef("Window.back()")}} and {{DOMxRef("Window.forward()")}} have been removed. Please use the {{DOMxRef("History.back", "window.history.back()")}} and {{DOMxRef("History.forward", "window.history.forward()")}} methods instead ({{bug(1479486)}}).</li> - <li>The {{DOMxRef("URL.createObjectURL", "createObjectURL()")}} and {{DOMxRef("URL.revokeObjectURL", "revokeObjectURL()")}} methods are no longer available on {{DOMxRef("ServiceWorker")}} instances due to the potential they introduced for memory leaks to occur ({{bug(1264182)}}).</li> - <li>Since it was deprecated in the specification anyway, the limited support for Doppler effects on {{DOMxRef("PannerNode")}} has been removed from the Web Audio API. The {{DOMxRef("AudioListener")}} properties {{DOMxRef("AudioListener.dopplerFactor", "dopplerFactor")}} and {{DOMxRef("AudioListener.speedOfSound", "speedOfSound")}} have been removed, along with the <code>PannerNode</code> method {{DOMxRef("PannerNode.setVelocity", "setVelocity()")}} ({{bug(1148354)}}).</li> -</ul> - -<h3 id="CSSOM">CSSOM</h3> - -<p><em>No changes.</em></p> - -<h3 id="HTTP">HTTP</h3> - -<ul> - <li>The {{HTTPHeader("Clear-Site-Data")}} header is implemented and no longer behind a preference ({{bug(1470111)}}).</li> -</ul> - -<h3 id="Security">Security</h3> - -<ul> - <li>Site favicons are now subject to <a href="/en-US/docs/Web/HTTP/CSP">Content Security Policy</a>, if one is configured for the site ({{bug(1297156)}}).</li> - <li>CSP <code>script-src</code> directive's <code>'report-sample'</code> expression now recognized when generating violation reports. This directive indicates that a short sample of where the violation occurred should be included in the report. Previously, Firefox always included this sample ({{bug(1473218)}}).</li> - <li>Firefox now uses NSS 3.39 ({{bug(1470914)}}).</li> -</ul> - -<h3 id="Plugins">Plugins</h3> - -<p><em>No changes.</em></p> - -<h3 id="WebDriver_conformance_(Marionette)">WebDriver conformance (Marionette)</h3> - -<h4 id="New_features">New features</h4> - -<ul> - <li>Marionette now returns a <code>setWindowRect</code> <a href="/en-US/docs/Web/WebDriver/Capabilities">capability</a> in the <code>WebDriver:NewSession</code> response that is true if the browser window can be repositioned and resized, which e.g. is the case for Firefox but not any mobile applications ({{bug(1470659)}}).</li> - <li>Added support for the <code>unhandledPromptBehavior</code> capability, which allows to define a specific <a href="https://w3c.github.io/webdriver/#dfn-user-prompt-handler">prompt behavior</a> of the WebDriver specification ({{bug(1264259)}}).</li> - <li>Handling of user prompts has been added to the <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> commands ({{bug(1439995)}}).</li> -</ul> - -<h4 id="API_changes">API changes</h4> - -<ul> - <li>Deprecated command end-points without the <code>WebDriver:</code> prefix have been removed ({{bug(1451725)}}).</li> - <li>The <code>WebDriver:NewSession</code> command returns recommended strings (<code>linux</code>, <code>mac</code>, <code>windows</code>) for <code>platformName</code> as defined in the WebDriver specification ({{bug(1470646)}}).</li> -</ul> - -<h4 id="Bug_fixes">Bug fixes</h4> - -<ul> - <li>Focus related events were missing on element interaction when Firefox was not running as the top-most application ({{bug(1398111)}}).</li> - <li>Performing a <code>pointerDown</code> and <code>pointerUp</code> action in a subsequent action sequence could trigger a double click because <code>WebDriver:ReleaseActions</code> didn't reset the double click tracker ({{bug(1422583)}}).</li> - <li>Executing <code>pause</code> actions repeatedly could cause an infinite hang ({{bug(1447449)}}).</li> - <li>Fixed a bug where returning an element collection from <code>WebDriver:ExecuteScript</code> and <code>WebDriver:ExecuteAsyncScript</code> would cause a cyclic reference error ({{bug(1447977)}}).</li> - <li>To prevent a race condition both the <code>WebDriver:AcceptAlert</code> and <code>WebDriver:DismissAlert</code> commands now wait until the user prompt has been closed ({{bug(1479368)}}).</li> - <li>Log entries as emitted by the frame script were no longer limited by <code>MarionettePrefs.logLevel</code> but logged everything ({{bug(1482829)}}).</li> - <li><code>WebDriver:TakeScreenshot</code> raised an error when taking a screenshot of a window larger than 32767 pixels in width or height ({{bug(1485730)}}).</li> - <li><code>WebDriver:SendAlertText</code> didn't replace default user prompt value if text to send is an empty string ({{bug(1486485)}}).</li> -</ul> - -<h3 id="Other">Other</h3> - -<ul> - <li>Corrected the behavior of {{DOMxRef("PerformanceObserver.observe()")}} to simply do nothing if no valid entry types are found in the specified array of entry types to observe, or if the array is empty or missing. Previously, Firefox was incorrectly throwing a <code>TypeError</code> ({{bug(1403027)}}).</li> - <li>In <a href="/en-US/docs/Web/OpenSearch">OpenSearch</a>, Firefox now accepts <code>application/json</code> as a search URL type, as an alias of <code>application/x-suggestions+json</code> ({{bug(1425827)}}).</li> -</ul> - -<h2 id="Changes_for_add-on_developers">Changes for add-on developers</h2> - -<h3 id="API_changes_2">API changes</h3> - -<h4 id="Theming">Theming</h4> - -<ul> - <li>The default text color for {{WebExtAPIRef("browserAction")}} badges is now automatically set to black or white, to maximise contrast with the background ({{bug(1474110)}}).</li> - <li>The <code>accentcolor</code> and <code>textcolor</code> properties of the <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme">theme</a></code> manifest key are now optional ({{bug(1413144)}}).</li> - <li>{{WebExtAPIRef("browserAction.getBadgeTextColor()")}} and {{WebExtAPIRef("browserAction.setBadgeTextColor()")}} enable you to get and set the text color of browser action badges ({{bug(1424620)}}).</li> - <li>The theme <code>colors</code> key in <code>manifest.json</code> now supports the <code>ntp_text</code> property to set the text color in a new tab, and the <code>ntp_background</code> property to set the color of a new tab ({{bug(1347204)}}).</li> - <li>Themes can now define the colors for sidebars, such as the bookmarks sidebar ({{bug(1418602)}}). The relevant properties include: - <ul> - <li><code>sidebar</code>: The background color for sidebars.</li> - <li><code>sidebar_text</code>: The text color for sidebars.</li> - <li><code>sidebar_highlight</code>: The background color of a selected item in a sidebar.</li> - <li><code>sidebar_highlight_text</code>: The text color of a selected item in a sidebar.</li> - </ul> - </li> - <li>The method {{WebExtAPIRef("management.install()")}} allows web extensions to install and enable signed browser themes ({{bug(1369209)}}).</li> -</ul> - -<h4 id="Search">Search</h4> - -<ul> - <li>The new {{WebExtAPIRef("search")}} AP<a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/search">I</a> enables you to retrieve the list of installed search engines and perform searches with them ({{bug(1352598)}}).</li> - <li>{{WebExtAPIRef("topSites.get()")}} now takes an <code>options</code> parameter enabling you to set various options for the list of sites returned ({{bug(1445836)}}).</li> -</ul> - -<h4 id="Tabs">Tabs</h4> - -<ul> - <li>{{WebExtAPIRef("tabs.onHighlighted")}} now supports multi-select ({{bug(1474440)}}).</li> - <li>{{WebExtAPIRef("tabs.highlight")}} includes an optional field in the <code>highlightInfo</code> object. The optional populate field defaults to <code>true</code>. Setting it to <code>false</code> prevents the returned <code>windows.Window</code> object from being populated with a list of tabs.</li> - <li>{{WebExtAPIRef("tabs.update")}} now supports changing the selection status of a tab by including <code>highlighted: true</code> in the <code>updateProperties</code> parameter ({{bug(1479129)}}).</li> - <li>{{WebExtAPIRef("tabs.update")}} supports changing the selection status of a tab without changing the focused tab ({{bug(1486050)}}) by including both <code>highlighted: true</code> and <code>active: false</code> in the <code>updateProperties</code> parameter.</li> - <li>{{WebExtAPIRef("tabs.query")}} now returns an array of {{WebExtAPIRef("tabs.Tab")}} objects if multiple tabs are selected ({{bug(1465170)}}).</li> - <li>The {{WebExtAPIRef("tabs.Tab")}} property now properly reflects which tabs in a browser window are selected (highlighted) and {{WebExtAPIRef("tabs.highlight")}} supports changing the highlighted status of multiple tabs ({{bug(1464862)}}).</li> - <li>The <code>isarticle</code> property in the <code>extraParameters</code> object passed into {{WebExtAPIRef("tabs.onUpdated")}} has been renamed to <code>isArticle</code>. The old name is retained but deprecated. This change was uplifted to Firefox 62 ({{bug(1461695)}}).</li> - <li>The {{WebExtAPIRef('tabs.onUpdated')}} event can be used to track when a tab is drawing the user's attention with <code>attention</code> property of the <code>changeInfo</code> object ({{bug(1396684)}}).</li> -</ul> - -<h4 id="Menus">Menus</h4> - -<ul> - <li>Added {{WebExtApiRef("menus.getTargetElement()")}} to the {{WebExtApiRef("menus")}} API. The method returns the clicked on element referenced by the <code>targetElementId</code> parameter ({{bug(1325814)}}).</li> - <li>{{WebExtAPIRef("menus.create()")}} now enables you to create invisible menu items, and {{WebExtAPIRef("menus.update()")}} enables you to toggle menu item visibility ({{bug(1482529)}}).</li> - <li>Items created using the {{WebExtAPIRef("menus")}} API now support access keys ({{bug(1320462)}}).</li> - <li>The <code>targetUrlPatterns</code> parameter of {{WebExtApiRef("menus.create()")}} and {{WebExtApiRef("menus.update()")}} now supports any URL scheme, even those that are usually not allowed in a match pattern ({{bug(1280370)}}).</li> -</ul> - -<h4 id="Other_2">Other</h4> - -<ul> - <li>{{WebExtAPIRef("commands.onCommand")}} is now treated as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/User_actions">user input</a> ({{bug(1408129)}}).</li> - <li>The {{WebExtAPIRef("webRequest")}} API now enables you to filter for speculative connections ({{bug(1479565)}}).</li> - <li>{{WebExtAPIRef("webRequest.SecurityInfo")}} adds two new properties, <code>keaGroupName</code> and <code>signatureSchemeName</code>. This change was uplifted to Firefox 62 ({{bug(1471959)}}).</li> - <li>{{WebExtAPIRef("cookies.Cookie")}} now includes a property indicating the SameSite state of the cookie. The {{WebExtAPIRef("cookies.SameSiteStatus")}} enumeration defines SameSite state values ({{bug(1351663)}}).</li> - <li>Match patterns for URLs now explicitly match the "data" URL scheme ({{bug(1280370)}}).</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.fxsitecompat.com/en-CA/versions/63/">Site compatibility for Firefox 63</a></li> -</ul> - -<h2 id="Older_versions">Older versions</h2> - -<p>{{Firefox_for_developers(62)}}</p> diff --git a/files/es/tools/3d_view/index.html b/files/es/tools/3d_view/index.html deleted file mode 100644 index d394e5de81..0000000000 --- a/files/es/tools/3d_view/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: 3D view -slug: Tools/3D_View -translation_of: Tools/3D_View ---- -<p>Cuando das click sobre el botón ver 3D view, la página entra en modo de vista 3D; en este modo, usted puede ver su página en vista 3D en la cual se anidan bloques de HTML que van sobreponiendose, se proyecta desde la parte inferior de la página. Esta vista hace fácil de visualizar como se anida su contenido.</p> -<p><img alt="" class="internal default" src="/files/3625/3dview.png"></p> -<p>By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the HTML panel or or <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.</p> -<p>If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p> -<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2> -<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p> -<table class="standard-table" style="width: auto;"> - <tbody> - <tr> - <td class="header">Function</td> - <td class="header">Keyboard</td> - <td class="header">Mouse</td> - </tr> - <tr> - <td>Zoom in/out</td> - <td>+ / -</td> - <td>Scroll wheel up/down</td> - </tr> - <tr> - <td>Rotate left/right</td> - <td>a / d</td> - <td>Mouse left/right</td> - </tr> - <tr> - <td>Rotate up/down</td> - <td>w / s</td> - <td>Mouse up/down</td> - </tr> - <tr> - <td>Pan left/right</td> - <td>← / →</td> - <td>Mouse left/right</td> - </tr> - <tr> - <td>Pan up/down</td> - <td>↑ / ↓</td> - <td>Mouse up/down</td> - </tr> - <tr> - <td>Reset zoom level</td> - <td>0</td> - <td>Resets the zoom level to the default</td> - </tr> - <tr> - <td>Focus on selected node</td> - <td>f</td> - <td>Makes sure the currently selected node is visible</td> - </tr> - <tr> - <td>Reset view</td> - <td>r</td> - <td>Resets zoom, rotation, and panning to the default</td> - </tr> - <tr> - <td>Hide current node</td> - <td>x</td> - <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured</td> - </tr> - </tbody> -</table> -<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2> -<p>There are a variety of ways the 3D view is useful:</p> -<ul> - <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li> - <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li> - <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li> - <li>And, of course, it looks <strong>awesome</strong>.</li> -</ul> -<h2 id="See_also">See also</h2> -<ul> - <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> - <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> - <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li> - <li><a href="/en/Tools" title="Tools">Tools</a></li> - <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li> -</ul> -<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p> diff --git a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html deleted file mode 100644 index 49376ffc9e..0000000000 --- a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Set a breakpoint -slug: Tools/Debugger/How_to/Set_a_breakpoint -translation_of: Tools/Debugger/How_to/Set_a_breakpoint ---- -<div>{{ToolsSidebar}}</div> - -<p>Puedes establecer una interrupción incondicional en una de las siguientes maneras:</p> - -<ul> - <li>en el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de fuente</a>, haz clic en el número de línea para la línea que deseas la interrupción</li> - <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, activate the context menu while on the line you want to break at, and select "Add breakpoint"</li> - <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, highlight the line you want to break at and press <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows/Linux) or <code>Cmd</code> + <kbd>B</kbd> (macOS)</li> -</ul> - -<p>When you display the context menu, you have a choice of setting either a breakpoint that will pause code execution when it reaches that line, an unconditional breakpoint, or a conditional breakpoint that will only pause the code if the conditions you define are met:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p> - -<p>If you choose to set a conditional breakpoint, you will be able to add the condition:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p> - -<p>Each breakpoint is shown in two places in the debugger:</p> - -<ul> - <li>the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">breakpoints list</a> shows the filename and line number for the breakpoint - - <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p> - </li> - <li>the line in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a> is marked with a blue arrow if you set an unconditional breakpoint, or an orange arrow if the breakpoint is <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditional</a>. <img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li> -</ul> - -<p>Starting in Firefox 67, you can set a column breakpoint on a complex line of code, such as one that makes multiple function calls. For example, if you try to set a breakpoint on the following line, you will have three possible locations for a breakpoint: at the point where the variable value is set, at the call to <code>parse</code>, or at the call to <code>getItem</code>.</p> - -<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre> - -<p>Possible breakpoints are shown with indicators. The following image shows the line in the debugger. As soon as you click on the line, the three indicators show the possible breakpoints. The default breakpoint is set to the first column. In the image, the second column breakpoint was chosen which you can confirm in the Breakpoints section on the right where it shows that the breakpoint is on the call to <code>parse</code>.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> - -<p>Column breakpoints allow you to break at multiple points on the same line. In the previous example, you could have selected both the call to <code>parse </code>and the call to <code>getItem</code>, or even all three columns to break at each of the possible locations.</p> - -<p>In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.</p> diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html deleted file mode 100644 index 2d855f1785..0000000000 --- a/files/es/tools/page_inspector/how_to/work_with_animations/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Trabajar con animaciones -slug: Tools/Page_Inspector/How_to/Work_with_animations -tags: - - Guia(2) - - Herramientas - - Inspector -translation_of: Tools/Page_Inspector/How_to/Work_with_animations ---- -<p>Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:</p> - -<ul> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">El inspector de animación</a></li> - <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Editor de @keyframes</a></li> - <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Editor de funciones de tiempo</a></li> -</ul> - -<h2 id="Inspector_de_Animación">Inspector de Animación</h2> - -<div class="note"> -<p>Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p> -</div> - -<p>Desde Firefox 41, el Inspector de Página incluye una <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">vista extra etiquetada "Animaciones"</a>.</p> - -<p>Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.</p> - -<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p> - -<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p> - -<p>Let's use the animation inspector to see what's going on in this example.</p> - -<ul> - <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li> - <li>You'll probably also want to adjust the selected node up a level, to the <code><div class="channel"></code> node.</li> - <li>Switch over to the "Animations" tab.</li> -</ul> - -<p>{{EmbedYouTube("U2eJYacf5XY")}}</p> - -<p>Now play the animation:</p> - -<p>{{EmbedYouTube("CwXXXEllB3o")}}</p> - -<p>Let's take a closer look at the contents of the animation inspector here:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p> - -<p>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p> - -<p>Each animation or transition is shown as a horizontal bar laid across the timeline:</p> - -<ul> - <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li> - <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li> - <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li> - <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li> - <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li> -</ul> - -<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</p> - -<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p> - -<p>Applying all this to our example, we can see that:</p> - -<ul> - <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li> - <li>Each element had two properties animated: - <ul> - <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li> - <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span></li> - </ul> - </li> - <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li> - <li>The <code>transform</code> property transition ends after 0.5 seconds.</li> - <li>The <code>transform</code> property was animated on the compositor thread.</li> -</ul> - -<h3 id="Animation_playback">Animation playback</h3> - -<p>At the top of the animation inspector:</p> - -<ul> - <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li> - <li>the current time in the animation is displayed (new in Firefox 44).</li> -</ul> - -<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p> - -<p>{{EmbedYouTube("1hqNaMsB48g")}}</p> - -<h2 id="Edit_keyframes">Edit @keyframes</h2> - -<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p> - -<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> - -<h2 id="Edit_timing_functions">Edit timing functions</h2> - -<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p> - -<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p> - -<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> - -<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p> - -<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p> - -<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> diff --git a/files/es/tools/settings/index.html b/files/es/tools/settings/index.html deleted file mode 100644 index e502957541..0000000000 --- a/files/es/tools/settings/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Configuración -slug: Tools/Settings -translation_of: Tools/Settings ---- -<h2 id="Configuraciones"><a name="Settings">Configuraciones</a></h2> - -<p>Al hacer clic en el botón "Configuraciones" le permite acceder a la configuración de la propia caja de herramientas y de las herramientas que alberga:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6353/toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="Por_defecto_Firefox_Herramientas_de_Desarrollo">Por defecto Firefox Herramientas de Desarrollo</h3> - -<p>Este grupo de casillas de verificación determina qué herramientas están habilitadas en la caja de herramientas. Las nuevas herramientas se incluyen con frecuencia en Firefox, pero no está activado de forma predeterminada.</p> - -<h3 id="Elija_DevTools_tema"><span class="short_text" id="result_box" lang="es">Elija DevTools tema</span></h3> - -<p>Esto le permite cambiar entre tema claro u oscuro:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/6355/inspector-light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p> - -<h3 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/6357/inspector-dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></h3> - -<h3 id="Inspector">Inspector</h3> - -<div class="geckoVersionNote"> -<p>Este ajuste está disponible en Firefox 27 en adelante</p> -</div> - -<p><em>Unidad de color por defecto</em>: un valor para controlar cómo se representan los colores de la inspección: Hex, HSL(A), RGB(A), <span class="short_text" id="result_box" lang="es">y por su nombre.</span></p> - -<h3 id="Consola_Web">Consola Web</h3> - -<p><em>Habilitar registros persistentes</em>: una configuración para controlar si la consola borra la salida cuando se navega a una página nueva..</p> - -<h3 id="Analizador_JavaScript">Analizador JavaScript</h3> - -<p><em>Mostrar datos de la plataforma Gecko:</em> una opción para controlar si los perfiles deben incluir Gecko símbolos de plataforma.</p> - -<h3 id="Configuraciones_avanzadas">Configuraciones avanzadas</h3> - -<ul> - <li><em>Desactivar JavaScript</em>: recargar la pestaña actual con JavaScript desactivado</li> - <li><em>Activar depurador chrome:</em> le permiten utilizar herramientas de desarrollo en el contexto del navegador en sí, y no sólo el contenido web</li> - <li><em>Activar depuración remota</em>: permitir a las herramientas de desarrollo <a href="/en-US/docs/Tools/Remote_Debugging">depurar instancias de Firefox remotas</a></li> -</ul> - - - - -<h2 id="Opening_Settings">Opening Settings</h2> - -<p>To see the Developer Tools Settings pane, open any of the Developer Tools, and then:</p> - -<ul> - <li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; margin-bottom: -7px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li> - <li>or press <kbd>F1</kbd> to toggle between the active tool and the Settings pane</li> - <li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li> -</ul> - -<p>The Settings pane looks something like this:</p> - -<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/14703/devtool-settings-squashed.png" style=""></p> - -<h2 id="Categories">Categories</h2> - -<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3> - -<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p> - -<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3> - -<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p> - -<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p> - -<h3 id="Themes">Themes</h3> - -<p>This enables you to choose one of three different themes.</p> - -<p>There's a light theme, which is the default:</p> - -<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p> - -<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> - -<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p> - -<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p> - -<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p> - -<h3 id="Common_preferences">Common preferences</h3> - -<p>Settings that apply to more than one tool. There's just one of these:</p> - -<dl> - <dt><em>Enable persistent logs</em></dt> - <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd> -</dl> - -<h3 id="Inspector_2">Inspector</h3> - -<dl> - <dt><em>Show browser styles</em></dt> - <dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd> - <dt><em>Truncate DOM attributes</em></dt> - <dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd> - <dt><em>Default color unit</em></dt> - <dd>A setting to control how colors are represented in the inspector: - <ul> - <li>Hex</li> - <li>HSL(A)</li> - <li>RGB(A)</li> - <li>color name</li> - <li>As authored.</li> - </ul> - </dd> - <dt><em>Enable layout panel</em></dt> - <dd>Enable the experimental layout panel. This setting only exists in Firefox Nightly.</dd> -</dl> - -<h3 id="Web_Console">Web Console</h3> - -<dl> - <dt><em>Enable timestamps</em></dt> - <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd> - <dt><em>Enable new console frontend</em></dt> - <dd>Switch to the experimental new console. This setting only exists in Firefox Nightly.</dd> -</dl> - -<h3 id="Debugger">Debugger</h3> - -<dl> - <dt><em>Enable Source Maps</em></dt> - <dd>Enable <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map support</a> in the debugger.</dd> - <dt><em>Enable new debugger frontend</em></dt> - <dd>Enable the new debugger. This setting only exists in Firefox Nightly.</dd> -</dl> - -<h3 id="Style_Editor">Style Editor</h3> - -<dl> - <dt><em>Show original sources</em></dt> - <dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd> - <dt><em>Autocomplete CSS</em></dt> - <dd>Enable the Style Editor to offer autocomplete suggestions.</dd> -</dl> - -<h3 id="Screenshot_Behavior">Screenshot Behavior</h3> - -<dl> - <dt><em>Screenshot to clipboard</em></dt> - <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.</dd> - <dt><em>Play camera shutter sound</em></dt> - <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, play a shutter sound. New in Firefox 53.</dd> -</dl> - -<h3 id="Editor_Preferences">Editor Preferences</h3> - -<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> - -<dl> - <dt><em>Detect indentation</em></dt> - <dd>Auto-indent new lines based on the current indentation.</dd> - <dt><em>Autoclose brackets</em></dt> - <dt> </dt> - <dt><em>Indent using spaces</em></dt> - <dt> </dt> - <dt><em>Tab size</em></dt> - <dt> </dt> - <dt><em>Keybindings</em></dt> - <dd>Choose the default CodeMirror keybindings or keybindings from one of several popular editors: - <ul> - <li>Vim</li> - <li>Emacs</li> - <li>Sublime Text</li> - </ul> - </dd> -</dl> - -<h3 id="Advanced_settings">Advanced settings</h3> - -<dl> - <dt><em>Show Gecko platform data</em></dt> - <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd> -</dl> - -<dl> - <dt><em>Disable HTTP Cache</em></dt> - <dd>Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. - <div class="note">Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div> - </dd> - <dt><em>Disable JavaScript</em></dt> - <dd>Reload the current tab with JavaScript disabled.</dd> - <dt><em>Enable Service Workers over HTTP</em></dt> - <dd>Enable Service Worker registrations from insecure websites.</dd> - <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt> - <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd> - <dt><em>Enable remote debugging</em></dt> - <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd> - <dt><em>Enable worker debugging</em></dt> - <dd>Enable a panel within the debugger to debug workers. - <p class="note">Note: This option got removed from the UI in Firefox 56, because this version ships with a <a href="/en-US/docs/Tools/Debugger">new Debugger UI</a>, but it can still be enabled for the old UI by setting the preference <code>devtools.debugger.workers</code> to <code>true</code>.</p> - </dd> -</dl> diff --git a/files/es/web/api/audionode/index.html b/files/es/web/api/audionode/index.html deleted file mode 100644 index ea6ff34406..0000000000 --- a/files/es/web/api/audionode/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: AudioNode -slug: Web/API/AudioNode -translation_of: Web/API/AudioNode ---- -<div>{{APIRef("Web Audio API")}}</div> - -<p>La interfaz <strong><code>AudioNode</code></strong> es una interfaz genérica para representar un módulo de procesamiento de audio. Ejemplos:</p> - -<ul> - <li>En un recurso de audio (e.g. an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element, an {{domxref("OscillatorNode")}}, etc.),</li> - <li>the audio destination,</li> - <li>intermediate processing module (e.g. a filter like {{domxref("BiquadFilterNode")}} or {{domxref("ConvolverNode")}}), or</li> - <li>volume control (like {{domxref("GainNode")}})</li> -</ul> - -<p>{{InheritanceDiagram}}</p> - -<p class="note"><strong>Note</strong>: An <code>AudioNode</code> can be target of events, por lo tanto este implementa {{domxref("EventTarget")}} interface.</p> - -<h2 id="Descripción">Descripción</h2> - -<h3 id="The_audio_routing_graph">The audio routing graph</h3> - -<p><img alt="AudioNodes participating in an AudioContext create a audio routing graph." src="https://mdn.mozillademos.org/files/9713/WebAudioBasics.png" style="display: block; height: 230px; margin: 0px auto; width: 677px;"></p> - -<p>Cada <code>AudioNode</code> posee entradas y salidas, y múltiples nodos de audio son conectados para construir un <em>processing graph</em>. Este graph es contenido en {{domxref("AudioContext")}}, y cada nodo de audio solo puede pertecener a un audio context.</p> - -<p>Un <em>source node</em> tiene cero entradas pero una o muchas salidas, y puede ser usado para generar sonido. Por otro lado, un <em>destination node</em> no tiene salidas; instead, all its inputs are directly played back on the speakers (or whatever audio output device the audio context uses). In addition, there are <em>processing nodes</em> which have inputs and outputs. The exact processing done varies from one <code>AudioNode</code> to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the {{domxref("AnalyserNode")}}, where the result of the processing is accessed separately).</p> - -<p>The more nodes in a graph, the higher the latency will be. Por ejemplo, si tu graph tiene una latencia de 500ms, Cuando el source node reproduzca un sonido, este va a tomar la mitad de un segundo hasta que el sonido pueda ser escuchado en tus altavoces. (or even longer because of latency in the underlying audio device). Por lo tanto, si tu necesitas tener un audio interactivo, keep the graph as small as possible, and put user-controlled audio nodes at the end of a graph. For example, a volume control (<code>GainNode</code>) should be the last node so that volume changes take immediate effect.</p> - -<p>Each input and output has a given amount of <em>channels</em>. For example, mono audio has one channel, while stereo audio has two channels. The Web Audio API will up-mix or down-mix the number of channels as required; check the Web Audio spec for details.</p> - -<p>For a list of all audio nodes, see the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> homepage.</p> - -<h3 id="Creating_an_AudioNode">Creating an <code>AudioNode</code></h3> - -<p>There are two ways to create an <code>AudioNode</code>: via the <em>constuctor</em> and via the <em>factory method</em>.</p> - -<pre class="brush: js;">// constructor -const analyserNode = new AnalyserNode(audioCtx, { - fftSize: 2048, - maxDecibels: -25, - minDecibels: -60, - smoothingTimeConstant: 0.5, -}); - -// factory method -const analyserNode = audioCtx.createAnalyser(); -analyserNode.fftSize = 2048; -analyserNode.maxDecibels = -25; -analyserNode.minDecibels = -60; -analyserNode.smoothingTimeConstant = 0.5;</pre> - -<p>Eres libre de usar cualquiera de los constructors o factory methods, o una mezcla de ambos, sin embargo hay ventajas al usar contructores:</p> - -<ul> - <li>All parameters can be set during construction time and don't need to be set individually.</li> - <li>You can <a href="https://github.com/WebAudio/web-audio-api/issues/251">sub-class an audio node</a>. While the actual processing is done internally by the browser and cannot be altered, you could write a wrapper around an audio node to provide custom properties and methods.</li> - <li>Slightly better performance: In both Chrome and Firefox, the factory methods call the constructors internally.</li> -</ul> - -<p>Tener en cuenta que Microsoft Edge does not yet appear to support the constructors; it will throw a "Function expected" error when you use the constructors.</p> - -<p><em>Brief history:</em> The first version of the Web Audio spec only defined the factory methods. After a <a href="https://github.com/WebAudio/web-audio-api/issues/250">design review in October 2013</a>, it was decided to add constructors because they have numerous benefits over factory methods. The constructors were added to the spec from August to October 2016. Factory methods continue to be included in the spec and are not deprecated.</p> - -<h2 id="Properties" style="">Properties</h2> - -<dl> - <dt>{{domxref("AudioNode.context")}} {{readonlyInline}}</dt> - <dd>Returns the associated {{domxref("BaseAudioContext")}}, that is the object representing the processing graph the node is participating in.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.numberOfInputs")}} {{readonlyInline}}</dt> - <dd>Returns the number of inputs feeding the node. Source nodes are defined as nodes having a <code>numberOfInputs</code> property with a value of <code>0</code>.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.numberOfOutputs")}} {{readonlyInline}}</dt> - <dd>Returns the number of outputs coming out of the node. Destination nodes — like {{ domxref("AudioDestinationNode") }} — have a value of <code>0</code> for this attribute.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.channelCount")}}</dt> - <dd>Represents an integer used to determine how many channels are used when <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> connections to any inputs to the node. Its usage and precise definition depend on the value of {{domxref("AudioNode.channelCountMode")}}.</dd> -</dl> - -<dl> - <dt>{{domxref("AudioNode.channelCountMode")}}</dt> - <dd>Represents an enumerated value describing the way channels must be matched between the node's inputs and outputs.</dd> - <dt>{{domxref("AudioNode.channelInterpretation")}}</dt> - <dd>Represents an enumerated value describing the meaning of the channels. This interpretation will define how audio <a href="/en-US/docs/Web/API/Web_Audio_API/Basic_concepts_behind_Web_Audio_API#Up-mixing_and_down-mixing">up-mixing and down-mixing</a> will happen.<br> - The possible values are <code>"speakers"</code> or <code>"discrete"</code>.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Also implements methods from the interface </em>{{domxref("EventTarget")}}.</p> - -<dl> - <dt>{{domxref("AudioNode.connect()")}}</dt> - <dd>Allows us to connect the output of this node to be input into another node, either as audio data or as the value of an {{domxref("AudioParam")}}.</dd> - <dt>{{domxref("AudioNode.disconnect()")}}</dt> - <dd>Allows us to disconnect the current node from another one it is already connected to.</dd> -</dl> - -<h2 id="Example">Example</h2> - -<p>This simple snippet of code shows the creation of some audio nodes, and how the <code>AudioNode</code> properties and methods can be used. You can find examples of such usage on any of the examples linked to on the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> landing page (for example <a href="https://github.com/mdn/violent-theremin">Violent Theremin</a>.)<span class="p"> </span></p> - -<pre class="brush: js;">const audioCtx = new AudioContext(); - -const oscillator = new OscillatorNode(audioCtx); -const gainNode = new GainNode(audioCtx); - -oscillator.connect(gainNode).connect(audioCtx.destination); - -oscillator.context; -oscillator.numberOfInputs; -oscillator.numberOfOutputs; -oscillator.channelCount;</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('Web Audio API', '#the-audionode-interface', 'AudioNode')}}</td> - <td>{{Spec2('Web Audio API')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("api.AudioNode")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li> -</ul> diff --git a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html b/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html deleted file mode 100644 index 1f2a93dbae..0000000000 --- a/files/es/web/api/canvas_api/tutorial/hit_regions_and_accessibility/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Hit regions and accessibility -slug: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -translation_of: Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility -original_slug: Web/Guide/HTML/Canvas_tutorial/Hit_regions_and_accessibility ---- -<div>{{CanvasSidebar}} {{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> - -<div class="summary">The {{HTMLElement("canvas")}} element on its own is just a bitmap and does not provide information about any drawn objects. Canvas content is not exposed to accessibility tools like semantic HTML is. In general, you should avoid using canvas in an accessible website or app. The following guidelines can help to make it more accessible.</div> - -<div class="summary">El elemento {{HTMLElement ("canvas")}} por sí solo es solo un mapa de bits y no proporciona información sobre ningún objeto dibujado. El contenido del lienzo no está expuesto a herramientas de accesibilidad como el HTML semántico. En general, debe evitar usar canvas en un sitio web o aplicación accesible. Las siguientes pautas pueden ayudar a que sea más accesible.</div> - -<h2 id="Fallback_content">Fallback content</h2> - -<p>The content inside the <code><canvas> ... </canvas></code> tags can be used as a fallback for browsers which don't support canvas rendering. It's also very useful for assistive technology users (like screen readers) which can read and interpret the sub DOM in it. A good example at <a href="http://www.html5accessibility.com/tests/canvas.html">html5accessibility.com</a> demonstrates how this can be done:</p> - -<pre class="brush: html"><canvas> - <h2>Shapes</h2> - <p>A rectangle with a black border. - In the background is a pink circle. - Partially overlaying the <a href="http://en.wikipedia.org/wiki/Circle" onfocus="drawCircle();" onblur="drawPicture();">circle</a>. - Partially overlaying the circle is a green - <a href="http://en.wikipedia.org/wiki/Square" onfocus="drawSquare();" onblur="drawPicture();">square</a> - and a purple <a href="http://en.wikipedia.org/wiki/Triangle" onfocus="drawTriangle();" onblur="drawPicture();">triangle</a>, - both of which are semi-opaque, so the full circle can be seen underneath.</p> -</canvas> </pre> - -<p>See the <a href="https://www.youtube.com/watch?v=ABeIFlqYiMQ">video how NVDA reads this example by Steve Faulkner</a>.</p> - -<h2 id="ARIA_rules">ARIA rules</h2> - -<p>Accessible Rich Internet Applications <strong>(<a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a>)</strong> defines ways to make Web content and Web applications more accessible to people with disabilities. You can use ARIA attributes to describe the behavior and purpose of the canvas element. See <a href="/en-US/docs/Web/Accessibility/ARIA">ARIA</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">ARIA techniques</a> for more information.</p> - -<pre class="brush: html"><canvas id="button" tabindex="0" role="button" aria-pressed="false" aria-label="Start game"></canvas> -</pre> - -<h2 id="Hit_regions">Hit regions</h2> - -<p>Whether the mouse coordinates are within a particular area on the canvas, is a common problem to solve. The hit region API allows you to define an area of your canvas and provides another possibility to expose interactive content on a canvas to accessibility tools. It allows you to make hit detection easier and lets you route events to DOM elements. The API has the following three methods (which are still experimental in current web browsers; check the browser compatibility tables).</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.addHitRegion()")}} {{experimental_inline}}</dt> - <dd>Adds a hit region to the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.removeHitRegion()")}} {{experimental_inline}}</dt> - <dd>Removes the hit region with the specified <code>id</code> from the canvas.</dd> - <dt>{{domxref("CanvasRenderingContext2D.clearHitRegions()")}} {{experimental_inline}}</dt> - <dd>Removes all hit regions from the canvas.</dd> -</dl> - -<p>You can add a hit region to your path and check for the {{domxref("MouseEvent.region")}} property to test if your mouse is hitting your region, for example.</p> - -<pre class="brush: html"><canvas id="canvas"></canvas> -<script> -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); - -ctx.beginPath(); -ctx.arc(70, 80, 10, 0, 2 * Math.PI, false); -ctx.fill(); -ctx.addHitRegion({id: 'circle'}); - -canvas.addEventListener('mousemove', function(event) { - if (event.region) { - alert('hit region: ' + event.region); - } -}); -</script></pre> - -<p>The <code>addHitRegion()</code> method also takes a <code>control</code> option to route events to an element (that is a descendant of the canvas):</p> - -<pre class="brush: js">ctx.addHitRegion({control: element});</pre> - -<p>This can be useful for routing to {{HTMLElement("input")}} elements, for example. See also this <a href="https://codepen.io/peterj35/pen/PEdLKx">codepen demo</a>.</p> - -<h2 id="Focus_rings">Focus rings</h2> - -<p>When working with the keyboard, focus rings are a handy indicator to help navigating on a page. To draw focus rings on a canvas drawing, the <code>drawFocusIfNeeded</code> property can be used.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.drawFocusIfNeeded()")}} {{experimental_inline}}</dt> - <dd>If a given element is focused, this method draws a focus ring around the current path.</dd> -</dl> - -<p>Additionally, the <code>scrollPathIntoView()</code> method can be used to make an element visible on the screen if focused, for example.</p> - -<dl> - <dt>{{domxref("CanvasRenderingContext2D.scrollPathIntoView()")}} {{experimental_inline}}</dt> - <dd>Scrolls the current path or a given path into the view.</dd> -</dl> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="https://www.w3.org/WAI/PF/HTML/wiki/Canvas_Accessibility_Use_Cases">Canvas accessibility use cases</a></li> - <li><a href="https://www.w3.org/html/wg/wiki/AddedElementCanvas">Canvas element accessibility issues</a></li> - <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-canvas-accessibility-in-firefox-13/">HTML5 Canvas Accessibility in Firefox 13 – by Steve Faulkner</a></li> - <li><a href="https://html.spec.whatwg.org/multipage/scripting.html#best-practices">Best practices for interactive canvas elements</a></li> -</ul> - -<div>{{ PreviousNext("Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas", "Web/API/Canvas_API/Tutorial/Optimizing_canvas") }}</div> diff --git a/files/es/web/api/filesystem/index.html b/files/es/web/api/filesystem/index.html deleted file mode 100644 index 62f5e91b4b..0000000000 --- a/files/es/web/api/filesystem/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: FileSystem -slug: Web/API/FileSystem -translation_of: Web/API/FileSystem ---- -<p>{{APIRef("File System API")}} {{non-standard_header}}</p> - -<p>La interfaz de la API <strong><code>FileSystem</code></strong> para la entrada de archivos y directorios es usada para representar un sistema de archivos. Estos objetos pueden ser obtenidos desde la propiedad {{domxref("FileSystemEntry.filesystem", "filesystem")}} en cualquier entrada del sistema de archivos . Algunos navegadores ofrecen APIs adicionales para crear y administrar el sistema de archivos , como el metodo de Chrome {{domxref("Window.requestFileSystem", "requestFileSystem()")}}.</p> - -<p>This interface will not grant you access to the users filesystem. Instead you will have a "virtual drive" within the browser sandbox. If you want to gain access to the users filesystem you need to invoke the user by eg. installing a Chrome extension. The relevant Chrome API can be found <a href="https://developer.chrome.com/apps/fileSystem">here</a>.</p> - -<div class="note"> -<p>Because this is a non-standard API, whose specification is not currently on a standards track, it's important to keep in mind that not all browsers implement it, and those that do may implement only small portions of it. Check the {{anch("Browser compatibility")}} section for details.</p> -</div> - -<h2 id="Conceptos_Basicos">Conceptos Basicos</h2> - -<p>Hay dos formas de acceder a un objeto <code>FileSystem</code> :</p> - -<ol> - <li>You can directly ask for one representing a sandboxed file system created just for your web app directly by calling <code>window.requestFileSystem()</code>. If that call is successful, it executes a callback handler, which receives as a parameter a <code>FileSystem</code> object describing the file system.</li> - <li>You can get it from a file system entry object, through its {{domxref("FileSystemEntry.filesystem", "filesystem")}} property.</li> -</ol> - -<h2 id="Propiedades">Propiedades</h2> - -<dl> - <dt>{{domxref("FileSystem.name")}} {{ReadOnlyInline}}</dt> - <dd>A {{domxref("USVString")}} representing the file system's name. This name is unique among the entire list of exposed file systems.</dd> - <dt>{{domxref("FileSystem.root")}} {{ReadOnlyInline}}</dt> - <dd>A {{domxref("FileSystemDirectoryEntry")}} object which represents the file system's root directory. Through this object, you can gain access to all files and directories in the file system.</dd> -</dl> - -<h2 id="Especificaciones">Especificaciones</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Especificación</th> - <th scope="col">Estado</th> - <th scope="col">Comentario</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('File System API')}}</td> - <td>{{Spec2('File System API')}}</td> - <td>Draft of proposed API</td> - </tr> - </tbody> -</table> - -<p>This API has no official W3C or WHATWG specification.</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad entre navegadores </h2> - -<p>{{ CompatibilityTable }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Caracteristica</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Microsoft Edge</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Soporte basico</td> - <td>13{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoDesktop(50) }}</td> - <td>{{ CompatNo }}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}} {{ property_prefix("webkit") }}</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>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatNo }}</td> - <td>0.16{{ property_prefix("webkit") }}</td> - <td>{{ CompatGeckoMobile(50) }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - <td>{{ CompatNo }}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Microsoft Edge implements this interface under the name <code>WebKitFileSystem</code>, and supports its use only in drag-and-drop scenarios using the {{domxref("DataTransferItem.webkitGetAsEntry()")}} method. It's not available for use in file or folder picker panels (such as when you use an {{HTMLElement("input")}} element with the {{domxref("HTMLInputElement.webkitdirectory")}} attribute.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API">File and Directory Entries API</a></li> - <li><a href="/en-US/docs/Web/API/File_and_Directory_Entries_API/Introduction">Introduction to the File System API</a></li> - <li>{{domxref("FileSystemEntry")}}, {{domxref("FileSystemFileEntry")}}, and {{domxref("FileSystemDirectoryEntry")}}</li> - <li>MSDN article: <a href="https://msdn.microsoft.com/library/mt732564">WebKitFileSystem object</a></li> -</ul> diff --git a/files/es/web/api/headers/index.html b/files/es/web/api/headers/index.html deleted file mode 100644 index cb65b6aa11..0000000000 --- a/files/es/web/api/headers/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: Headers -slug: Web/API/Headers -tags: - - API - - Experimental - - Fetch - - Headers - - Interface - - Reference -translation_of: Web/API/Headers ---- -<div>{{ APIRef("Fetch") }}</div> - -<div>La interfaz <strong><code>Headers</code></strong> de la <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> permite realizar diversas acciones en los Headers de solicitud y respuesta HTTP.Estas acciones incluyen recuperar, establecer, agregar y eliminar. Un objeto <code>Header</code> tiene una lista asociada que inicialmente está vacía, y consta de cero o más pares de nombre y valor.</div> - -<div>Es posible añadir metodos de uso como <span style="line-height: 19.0909080505371px;">{{domxref("Headers.append","append()")}} (ver{{anch(" ejemplos")}}.) En todos los métodos de esta interfaz, los nombres de los encabezados se relacionan con una secuencia de bytes sensible a mayúsculas y minúsculas.</span></div> - -<div>Por razones de seguridad, algunos headers pueden ser controlados unicamente por el <strong>user agent</strong>. Estos headers incluyen los {{Glossary("Forbidden_header_name", "nombres prohibidos para headers", 1)}} y {{Glossary("Forbidden_response_header_name", "nombres prohibidos de Headers response", 1)}}.</div> - -<p>A Headers object also has an associated guard, which takes a value of <code>immutable</code>, <code>request</code>, <code>request-no-cors</code>, <code>response</code>, or <code>none</code>. This affects whether the {{domxref("Headers.set","set()")}}, {{domxref("Headers.delete","delete()")}}, and {{domxref("Headers.append","append()")}} methods will mutate the header. For more information see {{Glossary("Guard")}}.</p> - -<p>You can retrieve a <code>Headers</code> object via the {{domxref("Request.headers")}} and {{domxref("Response.headers")}} properties, and create a new <code>Headers</code> object using the {{domxref("Headers.Headers()")}} constructor.</p> - -<p>An object implementing <code>Headers</code> can directly be used in a {{jsxref("Statements/for...of", "for...of")}} structure, instead of {{domxref('Headers.entries()', 'entries()')}}: <code>for (var p of myHeaders)</code> is equivalent to <code>for (var p of myHeaders.entries())</code>.</p> - -<div class="note"> -<p><strong>Note</strong>: you can find more out about the available headers by reading our <a href="/en-US/docs/Web/HTTP/Headers">HTTP headers</a> reference.</p> -</div> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("Headers.Headers()")}}</dt> - <dd>Creates a new <code>Headers</code> object.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<dl> - <dt>{{domxref("Headers.append()")}}</dt> - <dd>Appends a new value onto an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd> - <dt>{{domxref("Headers.delete()")}}</dt> - <dd>Deletes a header from a <code>Headers</code> object.</dd> - <dt>{{domxref("Headers.entries()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols","iterator")}} allowing to go through all key/value pairs contained in this object.</dd> - <dt>{{domxref("Headers.forEach()")}}</dt> - <dd>Executes a provided function once for each array element.</dd> - <dt>{{domxref("Headers.get()")}}</dt> - <dd>Returns a {{domxref("ByteString")}} sequence of all the values of a header within a <code>Headers</code> object with a given name.</dd> - <dt>{{domxref("Headers.has()")}}</dt> - <dd>Returns a boolean stating whether a <code>Headers</code> object contains a certain header.</dd> - <dt>{{domxref("Headers.keys()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all keys of the key/value pairs contained in this object.</dd> - <dt>{{domxref("Headers.set()")}}</dt> - <dd>Sets a new value for an existing header inside a <code>Headers</code> object, or adds the header if it does not already exist.</dd> - <dt>{{domxref("Headers.values()")}}</dt> - <dd>Returns an {{jsxref("Iteration_protocols", "iterator")}} allowing you to go through all values of the key/value pairs contained in this object.</dd> -</dl> - -<div class="note"> -<p><strong>Note</strong>: To be clear, the difference between {{domxref("Headers.set()")}} and {{domxref("Headers.append()")}} is that if the specified header does already exist and does accept multiple values, {{domxref("Headers.set()")}} will overwrite the existing value with the new one, whereas {{domxref("Headers.append()")}} will append the new value onto the end of the set of values. See their dedicated pages for example code.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: All of the Headers methods will throw a <code>TypeError</code> if you try to pass in a reference to a name that isn't a <a href="https://fetch.spec.whatwg.org/#concept-header-name">valid HTTP Header name</a>. The mutation operations will throw a <code>TypeError</code> if the header has an immutable {{Glossary("Guard")}}. In any other failure case they fail silently.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: When Header values are iterated over, they are automatically sorted in lexicographical order, and values from duplicate header names are combined.</p> -</div> - -<h3 id="Obsolete_methods">Obsolete methods</h3> - -<dl> - <dt>{{domxref("Headers.getAll()")}}</dt> - <dd>Used to return an array of all the values of a header within a <code>Headers</code> object with a given name; this method has now been deleted from the spec, and {{domxref("Headers.get()")}} now returns all values instead of just one.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>In the following snippet, we create a new header using the <code>Headers()</code> constructor, add a new header to it using <code>append()</code>, then return that header value using <code>get()</code>:</p> - -<pre class="brush: js">var myHeaders = new Headers(); - -myHeaders.append('Content-Type', 'text/xml'); -myHeaders.get('Content-Type') // should return 'text/xml' -</pre> - -<p>The same can be achieved by passing an array of arrays or an object literal to the constructor:</p> - -<pre class="brush: js">var myHeaders = new Headers({ - 'Content-Type': 'text/xml' -}); - -// or, using an array of arrays: -myHeaders = new Headers([ - ['Content-Type', 'text/xml'] -]); - -myHeaders.get('Content-Type') // should return 'text/xml' -</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('Fetch','#headers-class','Headers')}}</td> - <td>{{Spec2('Fetch')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.Headers")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/ServiceWorker_API">ServiceWorker API</a></li> - <li><a href="/en-US/docs/Web/HTTP/Access_control_CORS">HTTP access control (CORS)</a></li> - <li><a href="/en-US/docs/Web/HTTP">HTTP</a></li> -</ul> - -<p> </p> diff --git a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html b/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html deleted file mode 100644 index 84b04854fa..0000000000 --- a/files/es/web/api/html_drag_and_drop_api/recommended_drag_types/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: Tipos de Drag recomendados -slug: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types -translation_of: Web/API/HTML_Drag_and_Drop_API/Recommended_drag_types -original_slug: DragDrop/Recommended_Drag_Types ---- -<p>A continuación se describe la mejor practica para utilizar los datos a ser arrastrado.</p> -<h2 id="text" name="text">Arrastramdo Texto</h2> -<p>Al arrastrar el texto, utilice el texto / texto normal. Los datos deben ser la cadena de arrastre. Por ejemplo:</p> -<pre>event.dataTransfer.setData("text/plain", "This is text to drag") -</pre> -<p>Arrastrar texto en cuadros de texto y las selecciones de las páginas web se realiza de forma automática, por lo que no es necesario para manejar dragging.</p> -<p><span style="line-height: 1.5;">Se recomienda que siempre se agrega datos del tipo </span><code style="font-size: 14px;">text/plain</code><span style="line-height: 1.5;"> </span><span style="line-height: 1.5;">como un mensaje para las aplicaciones o los destinos que no soportan otros tipos, a menos que no hay alternativa de texto lógico. Siempre agregue el tipo de texto sin formato pasado, ya que es el menos específico.</span></p> -<p><span style="line-height: 1.5;">En códigos más viejo, encontrara </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/unicode o </span>el tipo<span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;"> </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">Text.</span><span style="line-height: 1.5;">Estos equivalen </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain,</span><span style="line-height: 1.5;">que </span><span style="line-height: 1.5;">guardara y recibia los datos del texto plano en ese lugar</span><font face="Courier New, Andale Mono, monospace"><span style="line-height: normal;">.</span></font></p> -<h2 id="link" name="link">Arrastrando Enlaces</h2> -<p>Los enlaces deben incluir los datos de los dos tipos, el primero debe ser URL utilizando el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/uri-list,</span><span style="line-height: 1.5;">y el segundo es URL utilizando el tipo </span><span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain. </span><span style="line-height: 1.5;">Ambos tipos deben utilizar los mismos datos, la URL del enlace. Por ejemplo:</span></p> -<pre>var dt = event.dataTransfer; -dt.setData("text/uri-list", "http://www.mozilla.org"); -dt.setData("text/plain", "http://www.mozilla.org"); -</pre> -<p>Es constumbre, establecer el tipo <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">text/plain de ultimo, </span><span style="line-height: 1.5;">, ya que es menos específico que el tipo de URI.</span></p> -<p>Note que el tipo de URL <span style="font-family: 'Courier New', 'Andale Mono', monospace; line-height: normal;">uri-list </span><span style="line-height: 1.5;">es con una "i", no una "L"</span></p> -<p><span style="line-height: 1.5;">Note that the URL type is </span><code style="font-size: 14px;">uri-list</code><span style="line-height: 1.5;"> with an 'I', not with an 'L'.</span></p> -<p>To drag multiple links, you can also separate each link with a linebreak. A line that begins with a number sign (#) is a comment and should not be considered a valid URL. You can use a comment to indicate the purpose of a link, or to hold the title associated with a link. The <code>text/plain</code> version of the drag data should include all links but should not include the comments.</p> -<p>For example:</p> -<pre>http://www.mozilla.org -#A second link -http://www.xulplanet.com -</pre> -<p>This sample <code>text/uri-list</code> data contains two links and a comment.</p> -<p>When retrieving a dropped link, you should ensure you handle the case where multiple links may have been dragged, and any comments that appear in the data. For convenience, the special type <code>URL</code> may be used to refer to the first valid link within the data for the <code>text/uri-list</code> type. You should not add data using the <code>URL</code> type; attempting to do so will just set the value of the <code>text/uri-list</code> type instead.</p> -<pre>var url = event.dataTransfer.getData("URL"); -</pre> -<p>You may also see data using the <code>text/x-moz-url</code> type which is a Mozilla specific type. If it appears, it should be used before the <code>text/uri-list</code> type. It holds the URL of the link followed by the title of the link, separated by a linebreak. For example:</p> -<pre>http://www.mozilla.org -Mozilla -http://www.xulplanet.com -XUL Planet -</pre> -<h2 id="html" name="html">Dragging HTML and XML</h2> -<p>HTML content may use the <code>text/html</code> type. The data for this type should be the serialized HTML to drag. For instance, it would be suitable to set the data value for this type to the value of the <code>innerHTML</code> property of an element.</p> -<p>XML content may use the <code>text/xml</code> type, but you should ensure that the data value is well-formed XML.</p> -<p>You may also include a plain text representation of the HTML or XML data using the <code>text/plain</code> type. The data should be just the text and should not include any of the source tags or attributes. For instance:</p> -<pre>var dt = event.dataTransfer; -dt.setData("text/html", "Hello there, <strong>stranger</strong>"); -dt.setData("text/plain", "Hello there, stranger"); -</pre> -<h2 id="file" name="file">Dragging Files</h2> -<p>A local file is dragged using the <code>application/x-moz-file</code> type with a data value that is an <a href="/en/XPCOM_Interface_Reference/nsIFile" title="nsIFile">nsIFile</a> object. Non-privileged web pages are not able to retrieve or modify data of this type. Because a file is not a string, you must use the <a href="/En/DragDrop/DataTransfer#mozSetDataAt.28.29" title="mozSetDataAt">mozSetDataAt</a> method to assign the data. Similarly, when retrieving the data, you must use the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method.</p> -<pre>event.dataTransfer.mozSetDataAt("application/x-moz-file", file, 0); -</pre> -<p>If possible, you may also include the file URL of the file using both the <code>text/uri-list</code> and/or <code>text/plain</code> types. These types should be added last so that the more specific <code>application/x-moz-file</code> type has higher priority.</p> -<p>Multiple files will be received during a drop as mutliple items in the data transfer. See <a href="/En/DragDrop/Dragging_and_Dropping_Multiple_Items" title="Dragging and Dropping Multiple Items">Dragging and Dropping Multiple Items</a> for more details about this.</p> -<p>The following example shows how to create an area for receiving dropped files:</p> -<pre><listbox ondragenter="return checkDrag(event)" - ondragover="return checkDrag(event)" - ondrop="doDrop(event)"/> - -<script> -function checkDrag(event) -{ - return event.dataTransfer.types.contains("application/x-moz-file"); -} - -function doDrop(event) -{ - var file = event.dataTransfer.mozGetDataAt("application/x-moz-file", 0); - if (file instanceof Components.interfaces.nsIFile) - event.currentTarget.appendItem(file.leafName); -} -</script> -</pre> -<p>In this example, the event returns false only if the data transfer contains the <code>application/x-moz-file</code> type. During the drop event, the data associated with the file type is retrieved, and the filename of the file is added to the listbox. Note that the <code>instanceof</code> operator is used here as the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method will return an <code>nsISupports</code> that needs to be checked and converted into an nsIFile. This is also a good extra check in case someone made a mistake and added a non-file for this type.</p> -<h2 id="image" name="image">Dragging Images</h2> -<p>Direct image dragging is not commonly done. In fact, Mozilla does not support direct image dragging on Mac or Linux platforms. Instead, images are usually dragged only by their URLs. To do this, use the <code>text/uri-list</code> type as with other URL links. The data should be the URL of the image or a data URL if the image is not stored on a web site or disk. For more information about data URLs, see <a class="internal" href="/en/data_URIs" title="en/The data URL scheme">the data URL scheme</a>.</p> -<p>As with other links, the data for the <code>text/plain</code> type should also contain the URL. However, a data URL is not usually as useful in a text context, so you may wish to exclude the <code>text/plain</code> data in this situation.</p> -<p>In chrome or other privileged code, you may also use the <code>image/jpeg</code>, <code>image/png</code> or <code>image/gif</code> types, depending on the type of image. The data should be an object which implements the <a href="/en/XPCOM_Interface_Reference/nsIInputStream" title="nsIInputStream">nsIInputStream</a> interface. When this stream is read, it should provide the data bits for the image, as if the image was a file of that type.</p> -<p>You should also include the <code>application/x-moz-file</code> type if the image is located on disk. In fact, this a common way in which image files are dragged.</p> -<p>It is important to set the data in the right order, from most specific to least specific. The image type such as <code>image/jpeg</code> should come first, followed by the <code>application/x-moz-file</code> type. Next, you should set the <code>text/uri-list</code> data and finally the <code>text/plain</code> data. For example:</p> -<pre>var dt = event.dataTransfer; -dt.mozSetDataAt("image/png", stream, 0); -dt.mozSetDataAt("application/x-moz-file", file, 0); -dt.setData("text/uri-list", imageurl); -dt.setData("text/plain", imageurl); -</pre> -<p>Note that the <a href="/En/DragDrop/DataTransfer#mozGetDataAt.28.29" title="mozGetDataAt">mozGetDataAt</a> method is used for non-text data. As some contexts may only include some of these types, it is important to check which type is made available when receiving dropped images.</p> -<h2 id="node" name="node">Dragging Nodes</h2> -<p>Nodes and elements in a document may be dragged using the <code>application/x-moz-node</code> type. This data for the type should be a DOM node. This allows the drop target to receive the actual node where the drag was started from. Note that callers from a different domain will not be able to access the node even when it has been dropped.</p> -<p>You should always include a plain text alternative for the node.</p> -<h2 id="custom" name="custom">Dragging Custom Data</h2> -<p>You can also use other types that you make up for custom purposes. You should strive to always include a plain text alternative unless that object being dragged is specific to a particular site or application. In this case, the custom type ensures that the data cannot be dropped elsewhere.</p> -<h2 id="filestoos" name="filestoos">Dragging files to an operating system folder</h2> -<p>There are cases in which you may want to add a file to an existing drag event session, and you may also want to write the file to disk when the drop operation happens over a folder in the operating system when your code receives notification of the target folder's location. This only works in extensions (or other privileged code) and the data flavor "application/moz-file-promise" should be used. The following sample offers an overview of this advanced case:</p> -<pre class="brush: js">// currentEvent is a given existing drag operation event - -currentEvent.dataTransfer.setData("text/x-moz-url", URL); -currentEvent.dataTransfer.setData("application/x-moz-file-promise-url", URL); -currentEvent.dataTransfer.setData("application/x-moz-file-promise-filename", leafName); -currentEvent.dataTransfer.mozSetDataAt('application/x-moz-file-promise', - new dataProvider(success,error), - 0, Components.interfaces.nsISupports); - -function dataProvider(){} - -dataProvider.prototype = { - QueryInterface : function(iid) { - if (iid.equals(Components.interfaces.nsIFlavorDataProvider) - || iid.equals(Components.interfaces.nsISupports)) - return this; - throw Components.results.NS_NOINTERFACE; - }, - getFlavorData : function(aTransferable, aFlavor, aData, aDataLen) { - if (aFlavor == 'application/x-moz-file-promise') { - - var urlPrimitive = {}; - var dataSize = {}; - - aTransferable.getTransferData('application/x-moz-file-promise-url', urlPrimitive, dataSize); - var url = new String(urlPrimitive.value.QueryInterface(Components.interfaces.nsISupportsString)); - console.log("URL file orignal is = " + url); - - var namePrimitive = {}; - aTransferable.getTransferData('application/x-moz-file-promise-filename', namePrimitive, dataSize); - var name = new String(namePrimitive.value.QueryInterface(Components.interfaces.nsISupportsString)); - - console.log("target filename is = " + name); - - var dirPrimitive = {}; - aTransferable.getTransferData('application/x-moz-file-promise-dir', dirPrimitive, dataSize); - var dir = dirPrimitive.value.QueryInterface(Components.interfaces.nsILocalFile); - - console.log("target folder is = " + dir.path); - - var file = Cc['@mozilla.org/file/local;1'].createInstance(Components.interfaces.nsILocalFile); - file.initWithPath(dir.path); - file.appendRelativePath(name); - - console.log("output final path is =" + file.path); - - // now you can write or copy the file yourself... - } - } -} -</pre> -<p>{{ languages( { "ja": "Ja/DragDrop/Recommended_Drag_Types" } ) }}</p> diff --git a/files/es/web/api/htmlcanvaselement/toblob/index.html b/files/es/web/api/htmlcanvaselement/toblob/index.html deleted file mode 100644 index 4759cd6250..0000000000 --- a/files/es/web/api/htmlcanvaselement/toblob/index.html +++ /dev/null @@ -1,261 +0,0 @@ ---- -title: HTMLCanvasElement.toBlob() -slug: Web/API/HTMLCanvasElement/toBlob -translation_of: Web/API/HTMLCanvasElement/toBlob ---- -<div> -<div> -<div>{{APIRef("Canvas API")}}</div> -</div> -</div> - -<p>EL metodo <strong><code>HTMLCanvasElement.toBlob()</code></strong> crea un objeto {{domxref("Blob")}} que representa la imagen contenida en el canvas; este archivo puede ser cacheado en el disco oo guardado en la memoria a desicion del user agent. Si la propiedad <code>type</code> no se especifica el tipo de la imagen será <code>image/png</code>. La imagen creada tiene una resolución de 96dpi.<br> - El tercer argumento es usado con las imagenes <code>image/jpeg</code> para especificar la calidad de salida.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="syntaxbox"><var>void <em>canvas</em>.toBlob(<em>callback</em>, <em>type</em>, <em>encoderOptions</em>);</var> -</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt>callback</dt> - <dd>A callback function with the resulting {{domxref("Blob")}} object as a single argument.</dd> - <dt><code>type</code> {{optional_inline}}</dt> - <dd>A {{domxref("DOMString")}} indicating the image format. The default type is <code>image/png</code>.</dd> - <dt><code>encoderOptions</code> {{optional_inline}}</dt> - <dd>A {{jsxref("Number")}} between <code>0</code> and <code>1</code> indicating image quality if the requested type is <code>image/jpeg </code>or <code>image/webp</code>. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.</dd> -</dl> - -<h3 id="Return_value">Return value</h3> - -<p>None.</p> - -<h2 id="Examples">Examples</h2> - -<h3 id="Getting_a_file_representing_the_canvas">Getting a file representing the canvas</h3> - -<p>Once you have drawn content into a canvas, you can convert it into a file of any supported image format. The code snippet below, for example, takes the image in the {{HTMLElement("canvas")}} element whose ID is "canvas", obtains a copy of it as a PNG image, then appends a new {{HTMLElement("img")}} element to the document, whose source image is the one created using the canvas.</p> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); - -canvas.toBlob(function(blob) { - var newImg = document.createElement("img"), - url = URL.createObjectURL(blob); - - newImg.onload = function() { - // no longer need to read the blob so it's revoked - URL.revokeObjectURL(url); - }; - - newImg.src = url; - document.body.appendChild(newImg); -}); -</pre> - -<p>Note that here we're creating a PNG image; if you add a second parameter to the <code>toBlob()</code> call, you can specify the image type. For example, to get the image in JPEG format:</p> - -<pre class="brush: js"> canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality</pre> - -<div> -<h3 id="A_way_to_convert_a_canvas_to_an_ico_(Mozilla_only)">A way to convert a canvas to an ico (Mozilla only)</h3> - -<p>This uses <code>-moz-parse</code> to convert the canvas to ico. Windows XP doesn't support converting from PNG to ico, so it uses bmp instead. A download link is created by setting the download attribute. The value of the download attribute is the name it will use as the file name.</p> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var d = canvas.width; -ctx = canvas.getContext("2d"); -ctx.beginPath(); -ctx.moveTo(d / 2, 0); -ctx.lineTo(d, d); -ctx.lineTo(0, d); -ctx.closePath(); -ctx.fillStyle = "yellow"; -ctx.fill(); - -function blobCallback(iconName) { - return function(b) { - var a = document.createElement("a"); - a.textContent = "Download"; - document.body.appendChild(a); - a.style.display = "block"; - a.download = iconName + ".ico"; - a.href = window.URL.createObjectURL(b); - } -} -canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', - '-moz-parse-options:format=bmp;bpp=32');</pre> -</div> - -<h3 id="Save_toBlob_to_disk_with_OS.File_(chromeadd-on_context_only)">Save toBlob to disk with OS.File (chrome/add-on context only)</h3> - -<div class="note"> -<p>This technique saves it to the desktop and is only useful in Firefox chrome context or add-on code as OS APIs are not present on web sites.</p> -</div> - -<pre class="brush: js">var canvas = document.getElementById("canvas"); -var d = canvas.width; -ctx = canvas.getContext("2d"); -ctx.beginPath(); -ctx.moveTo(d / 2, 0); -ctx.lineTo(d, d); -ctx.lineTo(0, d); -ctx.closePath(); -ctx.fillStyle = "yellow"; -ctx.fill(); - -function blobCallback(iconName) { - return function(b) { - var r = new FileReader(); - r.onloadend = function () { - // r.result contains the ArrayBuffer. - Cu.import('resource://gre/modules/osfile.jsm'); - var writePath = OS.Path.join(OS.Constants.Path.desktopDir, - iconName + '.ico'); - var promise = OS.File.writeAtomic(writePath, new Uint8Array(r.result), - {tmpPath:writePath + '.tmp'}); - promise.then( - function() { - console.log('successfully wrote file'); - }, - function() { - console.log('failure writing file') - } - ); - }; - r.readAsArrayBuffer(b); - } -} - -canvas.toBlob(blobCallback('passThisString'), 'image/vnd.microsoft.icon', - '-moz-parse-options:format=bmp;bpp=32');</pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p>A low performance polyfill based on toDataURL.</p> - -<pre class="brush: js">if (!HTMLCanvasElement.prototype.toBlob) { - Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', { - value: function (callback, type, quality) { - - var binStr = atob( this.toDataURL(type, quality).split(',')[1] ), - len = binStr.length, - arr = new Uint8Array(len); - - for (var i=0; i<len; i++ ) { - arr[i] = binStr.charCodeAt(i); - } - - callback( new Blob( [arr], {type: type || 'image/png'} ) ); - } - }); -} -</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('HTML WHATWG', "scripting.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change since the latest snapshot, {{SpecName('HTML5 W3C')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>No change</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', "scripting-1.html#dom-canvas-toblob", "HTMLCanvasElement.toBlob")}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Snapshot of the {{SpecName('HTML WHATWG')}} containing the 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>{{CompatNo}}<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop('19')}}</td> - <td>{{CompatIE(10)}}{{property_prefix("ms")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}<sup>[2]</sup></td> - </tr> - <tr> - <td>Image quality parameter (jpeg)</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoDesktop('25')}}</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>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>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("19")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - <tr> - <td>Image quality parameter (jpeg)</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatGeckoMobile("25")}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Chrome does not implement this feature yet. See <a href="http://crbug.com/67587">bug 67587</a>.</p> - -<p>[2] WebKit does not implement this feature yet. See {{WebKitBug("71270")}}.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The interface defining it, {{domxref("HTMLCanvasElement")}}.</li> - <li>{{domxref("Blob")}}</li> -</ul> diff --git a/files/es/web/api/mediasource/index.html b/files/es/web/api/mediasource/index.html deleted file mode 100644 index 2f5ff914c9..0000000000 --- a/files/es/web/api/mediasource/index.html +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: MediaSource -slug: Web/API/MediaSource -translation_of: Web/API/MediaSource ---- -<p>{{APIRef("Media Source Extensions")}}{{SeeCompatTable}}</p> - -<p>El <strong><code>MediaSource</code></strong> interfaz representa un recurso de media en datos por un {{domxref("HTMLMediaElement")}} objeto. Un <code>MediaSource</code> objeto puede ser atribuido a un {{domxref("HTMLMediaElement")}} para ser reproducido por el usuario.</p> - -<h2 id="Constructor">Constructor</h2> - -<dl> - <dt>{{domxref("MediaSource.MediaSource", "MediaSource()")}}</dt> - <dd>construye y retorna un <code>MediaSource</code> objeto sin asociar un recurso con buffers.</dd> -</dl> - -<h2 id="Propiedades">Propiedades</h2> - -<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("MediaSource.sourceBuffers")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("SourceBufferList")}} object containing the list of {{domxref("SourceBuffer")}} objects associated with this <code>MediaSource</code>.</dd> - <dt>{{domxref("MediaSource.activeSourceBuffers")}} {{readonlyInline}}</dt> - <dd>Returns a {{domxref("SourceBufferList")}} object containing a subset of the {{domxref("SourceBuffer")}} objects contained within {{domxref("SourceBuffers")}} — the list of objects providing the selected video track, enabled audio tracks, and shown/hidden text tracks.</dd> - <dt>{{domxref("MediaSource.readyState")}} {{readonlyInline}}</dt> - <dd>Returns an enum representing the state of the current <code>MediaSource</code>, whether it is not currently attached to a media element (<code>closed</code>), attached and ready to receive {{domxref("SourceBuffer")}} objects (<code>open</code>), or attached but the stream has been ended via {{domxref("MediaSource.endOfStream()")}} (<code>ended</code>.)</dd> - <dt>{{domxref("MediaSource.duration")}}</dt> - <dd>Gets and sets the duration of the current media being presented.</dd> -</dl> - -<dl> -</dl> - -<dl> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>Inherits properties from its parent interface, {{domxref("EventTarget")}}.</em></p> - -<dl> - <dt>{{domxref("MediaSource.addSourceBuffer()")}}</dt> - <dd>Creates a new {{domxref("SourceBuffer")}} of the given MIME type and adds it to the <code>MediaSource</code>'s {{domxref("SourceBuffers")}} list.</dd> - <dt>{{domxref("MediaSource.removeSourceBuffer()")}}</dt> - <dd>Removes the given {{domxref("SourceBuffer")}} from the {{domxref("SourceBuffers")}} list associated with this <code>MediaSource</code> object.</dd> - <dt>{{domxref("MediaSource.endOfStream()")}}</dt> - <dd>Signals the end of the stream.</dd> - <dt> - <h2 id="Static_methods">Static methods</h2> - </dt> - <dt>{{domxref("MediaSource.isTypeSupported()")}}</dt> - <dd>Returns a {{domxref("Boolean")}} value indicating if the given MIME type is supported by the current user agent — this is, if it can successfully create {{domxref("SourceBuffer")}} objects for that MIME type.</dd> -</dl> - -<h2 id="Examples">Examples</h2> - -<p>The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be <a href="http://nickdesaulniers.github.io/netfix/demo/bufferAll.html">viewed live here</a> (you can also <a href="https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html">download the source</a> for further investigation.)</p> - -<pre class="brush: js">var video = document.querySelector('video'); - -var assetURL = 'frag_bunny.mp4'; -// Need to be specific for Blink regarding codecs -// ./mp4info frag_bunny.mp4 | grep Codec -var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'; - -if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) { - var mediaSource = new MediaSource; - //console.log(mediaSource.readyState); // closed - video.src = URL.createObjectURL(mediaSource); - mediaSource.addEventListener('sourceopen', sourceOpen); -} else { - console.error('Unsupported MIME type or codec: ', mimeCodec); -} - -function sourceOpen (_) { - //console.log(this.readyState); // open - var mediaSource = this; - var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec); - fetchAB(assetURL, function (buf) { - sourceBuffer.addEventListener('updateend', function (_) { - mediaSource.endOfStream(); - video.play(); - //console.log(mediaSource.readyState); // ended - }); - sourceBuffer.appendBuffer(buf); - }); -}; - -function fetchAB (url, cb) { - console.log(url); - var xhr = new XMLHttpRequest; - xhr.open('get', url); - xhr.responseType = 'arraybuffer'; - xhr.onload = function () { - cb(xhr.response); - }; - xhr.send(); -};</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('Media Source Extensions', '#mediasource', 'MediaSource')}}</td> - <td>{{Spec2('Media Source Extensions')}}</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>23</td> - <td>{{CompatGeckoDesktop("25.0")}}<sup>[1]</sup><br> - {{CompatGeckoDesktop("42.0")}}</td> - <td>11<sup>[2]</sup></td> - <td>15</td> - <td>8</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 (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.4.4</td> - <td> - <p>{{CompatNo}}</p> - </td> - <td>{{CompatNo}}</td> - <td>11</td> - <td>30</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Available after switching the <code>about:config</code> preference <code>media.mediasource.enabled</code> to <code>true</code>. In addition, support was limited to a whitelist of sites, for example YouTube, Netflix, and other popular streaming sites. The whitelist was removed and Media Source Extensions was enabled by default in 42+ for all sites.</p> - -<p>[2] Only works on Windows 8+.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("SourceBuffer")}}</li> - <li>{{domxref("SourceBufferList")}}</li> -</ul> diff --git a/files/es/web/api/webvtt_api/index.html b/files/es/web/api/webvtt_api/index.html deleted file mode 100644 index 7a54969a31..0000000000 --- a/files/es/web/api/webvtt_api/index.html +++ /dev/null @@ -1,903 +0,0 @@ ---- -title: Formato de pistas de texto para la web (WebVTT) -slug: Web/API/WebVTT_API -translation_of: Web/API/WebVTT_API ---- -<div>{{DefaultAPISidebar("WebVTT")}}</div> - -<p><span class="seoSummary"><strong>El formato de pistas de texto para la web (WebVTT)</strong> es un formato para mostrar pistas de texto en le tiempo (como subtítulos) usando el elemento {{HTMLElement("track")}}.</span> El propósito principal de los archivos de WebVTT es superponer pistas de texto a un elemento {{HTMLElement("video")}}. WebVTT es un formato basado en el texto, que debe de ser codificado usando {{Glossary("UTF-8")}}. Donde puedes usar espacios también puedes usar tabulaciones. También hay una pequeña API disponible para representar y manejar estas pistas de texto y los datos necesarios para realizar la reproducción del texto en los momentos correctos.</p> - -<h2 id="Archivos_WebVTT">Archivos WebVTT</h2> - -<p>El tipo MIME de los archivos WebVTT es <code>text/vtt</code>.</p> - -<p>Un archivo WebVTT (<code>.vtt</code>) contiene apuntes, que pueden ser tanto de una línea como de varias, como se muestra debajo:</p> - -<pre class="notranslate">WEBVTT - -00:01.000 --> 00:04.000 -- Nunca bebas nitrógeno líquido. - -00:05.000 --> 00:09.000 -- Podría perforar tu estómago. -- Podrías morir. - -NOTE Esta es la última línea en el archivo -</pre> - -<h2 id="Estructura_WebVTT">Estructura WebVTT</h2> - -<p>La estructura de un archivo WevWTT consiste de los siguientes componentes, algunos de ellos opcionales, en este orden:</p> - -<ul> - <li>Una marca de orden de bytes (BOM) opcional.</li> - <li>La cadena de texto "<code>WEBVTT</code>".</li> - <li>Un encabezado de texto opcional a la derecha de <code>WEBVTT</code>. - <ul> - <li>Debe haber al menos un espacio después de <code>WEBVTT</code>.</li> - <li>Podrías usarlo para añadir una descripción al archivo.</li> - <li>Puedes usar cualquier cosa en el encabezado de texto excepto saltos de línea o la cadena "<code>--></code>".</li> - </ul> - </li> - <li>Una línea en blanco, que es equivalente a dos saltos de línea consecutivos.</li> - <li>Cero o más apuntes o comentarios.</li> - <li>Cero o más líneas en blanco.</li> -</ul> - -<h5 id="Ejemplo_1_-_El_archivo_WebVTT_más_simple_posible">Ejemplo 1 - El archivo WebVTT más simple posible</h5> - -<pre class="eval notranslate">WEBVTT -</pre> - -<h5 id="Ejemplo_2_-_Archivo_WebVTT_muy_simple_con_un_encabezado_de_texto">Ejemplo 2 - Archivo WebVTT muy simple con un encabezado de texto</h5> - -<pre class="eval notranslate">WEBVTT - Este archivo no tiene anotaciones. -</pre> - -<h5 id="Ejemplo_3_-_Ejemplo_de_un_archivo_WebVTT_común_con_encabezado_y_anotaciones">Ejemplo 3 - Ejemplo de un archivo WebVTT común con encabezado y anotaciones</h5> - -<pre class="eval notranslate">WEBVTT - Este archivo tiene anotaciones. - -14 -00:01:14.815 --> 00:01:18.114 -- ¿Qué? -- ¿Dónde estamos ahora? - -15 -00:01:18.171 --> 00:01:20.991 -- Este es el país de los murciélagos grandes. - -16 -00:01:21.058 --> 00:01:23.868 -- [ Murciélagos chillando ] -- Ellos no se pondrán entu pelo. Ellos están persiguiendo a los bichos. -</pre> - -<h3 id="Estructura_interna_de_un_archivo_WebVTT">Estructura interna de un archivo WebVTT</h3> - -<p>Vamos a reexaminar uno de nuestros ejemplos previos, y mirar la estructura de las anotaciones con un poco más de detalle.</p> - -<pre class="notranslate">WEBVTT - -00:01.000 --> 00:04.000 -- Nunca bebas nitrógeno líquido. - -00:05.000 --> 00:09.000 -- Podría perforar tu estómago. -- Podrías morir. - -NOTE Esta es la última línea en el archivo</pre> - -<p>En el caso de cada anotación:</p> - -<ul> - <li>La primera línea se empieza con un tiempo, que es el tiempo en el que se empieza a mostrar el téxto que aparece debajo.</li> - <li>En la misma línea, tenemos una cadena de texto "<code>--></code>".</li> - <li>Acabamos la línea con un segundo tiempo, que es el tiempo en el que se termina de mostrar el texto asociado.</li> - <li>Nosotros podemos entonces tener una o más líneas que empiezan con un guión, cada una de ellas conteniendo parte de la pista de texto para mostrar.</li> -</ul> - -<p>También podemos poner comentarios en nuestro archivo <code>.vtt</code>, para ayudarnos a recorddar información importante sobre las partes de nuestro archivo. Estas deben estar en líneas separadas empezando con la cadena <code>NOTE</code>. Aprenderas más sobre eso en la siguiente sección.</p> - -<p>Es importante no usar líneas en blanco extras dentro de una anotación, por ejemplo entre las líneas de tiempo y las anotaciones. WebVTT está basado en líneas, una línea en blanco finalizará la anotación.</p> - -<h2 id="Comentarios_en_WebVTT">Comentarios en WebVTT</h2> - -<p>Los comentarios son un componente opcional que se puede usar para añadir informacion a un archivo WebVTT. Los comentarios estan pensados para aquellos que leen el archivo y no se muestran con las pistas de texto. Los comentarios pueden contener saltos de línea pero no una línea en blanco, que es equivalente a dos saltos de línea consecutivos. Una línea en blanco indica el fin de un comentario.</p> - -<p>Un comentario no puede contener la cadena de texto "<code>--></code>", el símbolo &, o el signo de menor que (<). Si quisieses usar esos caracteres necesitarías hacer un escape usando por ejemplo <code>&amp;</code> para el símbolo &, y &lt; para menor que (<). Tambien es recomendado que uses la secuencia de escape de mayor que <code>&gt;</code> en vez de el simbo de mayor que (<code>></code>) para evitar la confusión con etiquetas.</p> - -<p>Un comentario consiste en tres partes:</p> - -<ul> - <li>La cadena de texto <code>NOTE</code>.</li> - <li>Un espacio o un salto de línea.</li> - <li>Cero o más caracteres que no sean los indicados arriba.</li> -</ul> - -<h5 id="Ejemplo_4_-_Ejemplo_común_de_WebVTT">Ejemplo 4 - Ejemplo común de WebVTT</h5> - -<pre class="eval notranslate">NOTE Esto es un comentario -</pre> - -<h5 id="Ejemplo_5_-_Comentario_multilínea">Ejemplo 5 - Comentario multilínea</h5> - -<pre class="eval notranslate">NOTE -Un comentario que está ocupando -más de una línea. - -NOTE También puedes hacer un comentario -que ocupe más de una línea de esta manera. -</pre> - -<h5 id="Ejemplo_6_-_Uso_común_de_comentarios">Ejemplo 6 - Uso común de comentarios</h5> - -<pre class="eval notranslate">WEBVTT - Traducción de la película que me gusta - -NOTE -Esta traducción esta hecha por Kyle para que -Algunos amigos puedan verla con sus padres. - -1 -00:02:15.000 --> 00:02:20.000 -- Ta en kopp varmt te. -- Det är inte varmt. - -2 -00:02:20.000 --> 00:02:25.000 -- Har en kopp te. -- Det smakar som te. - -NOTE Esta ultima línea puede no estar bien traducida. - -3 -00:02:25.000 --> 00:02:30.000 -- Ta en kopp -</pre> - -<h2 id="Estilizando_anotaciones_WebVTT">Estilizando anotaciones WebVTT</h2> - -<p>Tu puedes estilizar anotaciones WebVTT buscado elementos que coincidan con el pseudoelemento {{cssxref("::cue")}}.</p> - -<h3 id="Dentro_del_CSS_del_sitio">Dentro del CSS del sitio</h3> - -<pre class="brush: css notranslate">video::cue { - background-image: linear-gradient(to bottom, dimgray, lightgray); - color: papayawhip; -} - -video::cue(b) { - color: peachpuff; -} -</pre> - -<p>Aquí, todos los elementos de video estan estilizados para usar un gradiente gris como fondo, con <code>"papayawhip"</code> como color principal. Además el texto en negrita usando el elemento {{HTMLElement("b")}} tiene el color <code>"peachpuff"</code>.</p> - -<p>El ejemplo HTML de abajo actualemte se encarga de mostrar los archivos multimedia él solo.</p> - -<pre class="brush: html notranslate"><video controls autoplay src="video.webm"> - <track default src="track.vtt"> -</video> -</pre> - -<h3 id="Within_the_WebVTT_file_itself">Within the WebVTT file itself</h3> - -<p>You can also define the style directly in the WebVTT file. In this case, you insert your CSS rules into the file with each rule preceded by the string <code>"STYLE"</code> all by itelf on a line of text, as shown below:</p> - -<pre class="notranslate">WEBVTT - -STYLE -::cue { - background-image: linear-gradient(to bottom, dimgray, lightgray); - color: papayawhip; -} -/* Style blocks cannot use blank lines nor "dash dash greater than" */ - -NOTE comment blocks can be used between style blocks. - -STYLE -::cue(b) { - color: peachpuff; -} - -00:00:00.000 --> 00:00:10.000 -- Hello <b>world</b>. - -NOTE style blocks cannot appear after the first cue.</pre> - -<p>We can also use identifiers inside WebVTT file, which can be used for defining a new style for some particular cues in the file. The example where we wanted the transcription text to be red highlighted and the other part to remain normal, we can define it as follows using CSS. Where it must be noted that the CSS uses escape sequences the way they are used in HTML pages:</p> - -<pre class="notranslate">WEBVTT - -1 -00:00.000 --> 00:02.000 -That’s an, an, that’s an L! - -crédit de transcription -00:04.000 --> 00:05.000 -Transcrit par Célestes™ -</pre> - -<pre class="brush: css notranslate">::cue(#\31) { color: lime; } -::cue(#crédit\ de\ transcription) { color: red; }</pre> - -<p>Positioning of text tracks is also supported, by including positioning information after the timings in a cue, as seen below (see {{anch("Cue settings")}} for more information):</p> - -<pre class="notranslate">WEBVTT - -00:00:00.000 --> 00:00:04.000 position:10%,line-left align:left size:35% -Where did he go? - -00:00:03.000 --> 00:00:06.500 position:90% align:right size:35% -I think he went down this lane. - -00:00:04.000 --> 00:00:06.500 position:45%,line-right align:center size:35% -What are you waiting for?</pre> - -<h2 id="WebVTT_cues">WebVTT cues</h2> - -<p>A cue is a single subtitle block that has a single start time, end time, and textual payload. Example 6 consists of the header, a blank line, and then five cues separated by blank lines. A cue consists of five components:</p> - -<ul> - <li>An optional cue identifier followed by a newline.</li> - <li>Cue timings.</li> - <li>Optional cue settings with at least one space before the first and between each setting.</li> - <li>One or more newlines.</li> - <li>The cue payload text.</li> -</ul> - -<h5 id="Example_7_-_Example_of_a_cue">Example 7 - Example of a cue</h5> - -<pre class="eval notranslate">1 - Title Crawl -00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start -Some time ago in a place rather distant....</pre> - -<h3 id="Cue_identifier">Cue identifier</h3> - -<p>The identifier is a name that identifies the cue. It can be used to reference the cue from a script. It must not contain a newline and cannot contain the string "<code>-->"</code>. It must end with a single newline. They do not have to be unique, although it is common to number them (e.g., 1, 2, 3, ...).</p> - -<h5 id="Example_8_-_Cue_identifier_from_Example_7">Example 8 - Cue identifier from Example 7</h5> - -<pre class="eval notranslate">1 - Title Crawl</pre> - -<h5 id="Example_9_-_Common_usage_of_identifiers">Example 9 - Common usage of identifiers</h5> - -<pre class="eval notranslate">WEBVTT - -1 -00:00:22.230 --> 00:00:24.606 -This is the first subtitle. - -2 -00:00:30.739 --> 00:00:34.074 -This is the second. - -3 -00:00:34.159 --> 00:00:35.743 -Third -</pre> - -<h3 id="Cue_timings">Cue timings</h3> - -<p>A cue timing indicates when the cue is shown. It has a start and end time which are represented by timestamps. The end time must be greater than the start time, and the start time must be greater than or equal to all previous start times. Cues may have overlapping timings.</p> - -<p>If the WebVTT file is being used for chapters ({{HTMLElement("track")}} {{htmlattrxref("kind")}} is <code>chapters</code>) then the file cannot have overlapping timings.</p> - -<p>Each cue timing contains five components:</p> - -<ul> - <li>Timestamp for start time.</li> - <li>At least one space.</li> - <li>The string "<code>-->".</code></li> - <li>At least one space.</li> - <li>Timestamp for end time. - <ul> - <li>Which must be greater than the start time.</li> - </ul> - </li> -</ul> - -<p>The timestamps must be in one of two formats:</p> - -<ul> - <li><code>mm:ss.ttt</code></li> - <li><code>hh:mm:ss.ttt</code></li> -</ul> - -<p>Where the components are defined as follows:</p> - -<ul> - <li><code>hh</code> is hours. - - <ul> - <li>Must be at least two digits.</li> - <li>Hours can be greater than two digits (e.g., 9999:00:00.000).</li> - </ul> - </li> - <li><code>mm</code> is minutes. - <ul> - <li>Must be between 00 and 59 inclusive.</li> - </ul> - </li> - <li><code>ss</code> is seconds. - <ul> - <li>Must be between 00 and 59 inclusive.</li> - </ul> - </li> - <li><code>ttt</code> is miliseconds. - <ul> - <li>Must be between 000 and 999 inclusive.</li> - </ul> - </li> -</ul> - -<h5 id="Example_10_-_Basic_cue_timing_examples">Example 10 - Basic cue timing examples</h5> - -<pre class="eval notranslate">00:00:22.230 --> 00:00:24.606 -00:00:30.739 --> 00:00:34.074 -00:00:34.159 --> 00:00:35.743 -00:00:35.827 --> 00:00:40.122</pre> - -<h5 id="Example_11_-_Overlapping_cue_timing_examples">Example 11 - Overlapping cue timing examples</h5> - -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 -00:00:05.000 --> 00:01:00.000 -00:00:30.000 --> 00:00:50.000</pre> - -<h5 id="Example_12_-_Non-overlapping_cue_timing_examples">Example 12 - Non-overlapping cue timing examples</h5> - -<pre class="eval notranslate">00:00:00.000 --> 00:00:10.000 -00:00:10.000 --> 00:01:00.581 -00:01:00.581 --> 00:02:00.100 -00:02:01.000 --> 00:02:01.000</pre> - -<h3 id="Cue_settings">Cue settings</h3> - -<p>Cue settings are optional components used to position where the cue payload text will be displayed over the video. This includes whether the text is displayed horizontally or vertically. There can be zero or more of them, and they can be used in any order so long as each setting is used no more than once.</p> - -<p>The cue settings are added to the right of the cue timings. There must be one or more spaces between the cue timing and the first setting and between each setting. A setting's name and value are separated by a colon. The settings are case sensitive so use lower case as shown. There are five cue settings:</p> - -<ul> - <li><strong>vertical</strong> - - <ul> - <li>Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="2">Table 1 - vertical values</th> - </tr> - </thead> - <tbody> - <tr> - <th><code>vertical:rl</code></th> - <td>writing direction is right to left</td> - </tr> - <tr> - <th><code>vertical:lr</code></th> - <td>writing direction is left to right</td> - </tr> - </tbody> - </table> - </li> - <li><strong>line</strong> - <ul> - <li>Specifies where text appears vertically. If vertical is set, line specifies where text appears horizontally.</li> - <li>Value can be a line number. - <ul> - <li>The line height is the height of the first line of the cue as it appears on the video.</li> - <li>Positive numbers indicate top down.</li> - <li>Negative numbers indicate bottom up.</li> - </ul> - </li> - <li>Or value can be a percentage. - <ul> - <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li> - <li>Must be followed by a percent sign (%).</li> - </ul> - </li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 2 - line examples</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>line:0</code></th> - <td>top</td> - <td>right</td> - <td>left</td> - </tr> - <tr> - <th><code>line:-1</code></th> - <td>bottom</td> - <td>left</td> - <td>right</td> - </tr> - <tr> - <th><code>line:0%</code></th> - <td>top</td> - <td>right</td> - <td>left</td> - </tr> - <tr> - <th><code>line:100%</code></th> - <td>bottom</td> - <td>left</td> - <td>right</td> - </tr> - </tbody> - </table> - </li> - <li><strong>position</strong> - <ul> - <li>Specifies where the text will appear horizontally. If vertical is set, position specifies where the text will appear vertically.</li> - <li>Value is a percentage.</li> - <li>Must be an integer (no decimals) between 0 and 100 inclusive.</li> - <li>Must be followed by a percent sign (%).</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 3 - position examples</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>position:0%</code></th> - <td>left</td> - <td>top</td> - <td>top</td> - </tr> - <tr> - <th><code>position:100%</code></th> - <td>right</td> - <td>bottom</td> - <td>bottom</td> - </tr> - </tbody> - </table> - </li> - <li><strong>size</strong> - <ul> - <li>Specifies the width of the text area. If vertical is set, size specifies the height of the text area.</li> - <li>Value is a percentage.</li> - <li>Must be an integer (i.e., no decimals) between 0 and 100 inclusive.</li> - <li>Must be followed by a percent sign (%).</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 4 - size examples</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>size:100%</code></th> - <td>full width</td> - <td>full height</td> - <td>full height</td> - </tr> - <tr> - <th><code>size:50%</code></th> - <td>half width</td> - <td>half height</td> - <td>half height</td> - </tr> - </tbody> - </table> - </li> - <li><strong>align</strong> - <ul> - <li>Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.</li> - </ul> - - <table> - <thead> - <tr> - <th colspan="4">Table 5 - align values</th> - </tr> - </thead> - <tbody> - <tr> - <th></th> - <th><code>vertical</code> omitted</th> - <th><code>vertical:rl</code></th> - <th><code>vertical:lr</code></th> - </tr> - <tr> - <th><code>align:start</code></th> - <td>left</td> - <td>top</td> - <td>top</td> - </tr> - <tr> - <th><code>align:middle</code></th> - <td>centred horizontally</td> - <td>centred vertically</td> - <td>centred vertically</td> - </tr> - <tr> - <th><code>align:end</code></th> - <td>right</td> - <td>bottom</td> - <td>bottom</td> - </tr> - </tbody> - </table> - </li> -</ul> - -<h5 id="Example_13_-_Cue_setting_examples">Example 13 - Cue setting examples</h5> - -<p>The first line demonstrates no settings. The second line might be used to overlay text on a sign or label. The third line might be used for a title. The last line might be used for an Asian language.</p> - -<pre class="eval notranslate">00:00:05.000 --> 00:00:10.000 -00:00:05.000 --> 00:00:10.000 line:63% position:72% align:start -00:00:05.000 --> 00:00:10.000 line:0 position:20% size:60% align:start -00:00:05.000 --> 00:00:10.000 vertical:rt line:-1 align:end -</pre> - -<h3 id="Cue_payload">Cue payload</h3> - -<p>The payload is where the main information or content is located. In normal usage the payload contains the subtitles to be displayed. The payload text may contain newlines but it cannot contain a blank line, which is equivalent to two consecutive newlines. A blank line signifies the end of a cue.</p> - -<p>A cue text payload cannot contain the string "<code>-->"</code>, the ampersand character (&), or the less-than sign (<). Instead use the escape sequence "&amp;" for ampersand and "&lt;" for less-than. It is also recommended that you use the greater-than escape sequence "&gt;" instead of the greater-than character (>) to avoid confusion with tags. If you are using the WebVTT file for metadata these restrictions do not apply.</p> - -<p>In addition to the three escape sequences mentioned above, there are fours others. They are listed in the table below.</p> - -<table> - <thead> - <tr> - <th colspan="3">Table 6 - Escape sequences</th> - </tr> - </thead> - <tbody> - <tr> - <th>Name</th> - <th>Character</th> - <th>Escape Sequence</th> - </tr> - <tr> - <td>Ampersand</td> - <td>&</td> - <td><code>&amp;</code></td> - </tr> - <tr> - <td>Less-than</td> - <td><</td> - <td><code>&lt;</code></td> - </tr> - <tr> - <td>Greater-than</td> - <td>></td> - <td><code>&gt;</code></td> - </tr> - <tr> - <td>Left-to-right mark</td> - <td></td> - <td><code>&lrm;</code></td> - </tr> - <tr> - <td>Right-to-left mark</td> - <td></td> - <td><code>&rlm;</code></td> - </tr> - <tr> - <td>Non-breaking space</td> - <td><code> </code></td> - <td><code>&nbsp;</code></td> - </tr> - </tbody> -</table> - -<h3 id="Cue_payload_text_tags">Cue payload text tags</h3> - -<p>There are a number of tags, such as <code><bold></code>, that can be used. However, if the WebVTT file is used in a {{HTMLElement("track")}} element where the attribute {{htmlattrxref("kind")}} is <code>chapters</code> then you cannot use tags.</p> - -<ul> - <li><strong>Timestamp tag</strong> - - <ul> - <li>The timestamp must be greater that the cue's start timestamp, greater than any previous timestamp in the cue payload, and less than the cue's end timestamp. The <em>active text</em> is the text between the timestamp and the next timestamp or to the end of the payload if there is not another timestamp in the payload. Any text before the <em>active text</em> in the payload is <em>previous text</em> . Any text beyond the <em>active text</em> is <em>future text</em> . This enables karaoke style captions.</li> - </ul> - - <div> - <h5 id="Example_12_-_Karaoke_style_text">Example 12 - Karaoke style text</h5> - - <pre class="eval notranslate">1 -00:16.500 --> 00:18.500 -When the moon <00:17.500>hits your eye - -1 -00:00:18.500 --> 00:00:20.500 -Like a <00:19.000>big-a <00:19.500>pizza <00:20.000>pie - -1 -00:00:20.500 --> 00:00:21.500 -That's <00:00:21.000>amore -</pre> - </div> - </li> -</ul> - -<p>The following tags are the HTML tags allowed in a cue and require opening and closing tags (e.g., <code><b>text</b></code>).</p> - -<ul> - <li><strong>Class tag</strong> (<code><c></c></code>) - - <ul> - <li>Style the contained text using a CSS class.</li> - </ul> - - <div> - <h5 id="Example_14_-_Class_tag">Example 14 - Class tag</h5> - - <pre class="notranslate"><c.classname>text</c></pre> - </div> - </li> - <li><strong>Italics tag</strong> (<code><i></i></code>) - <ul> - <li>Italicize the contained text.</li> - </ul> - - <div> - <h5 id="Example_15_-_Italics_tag">Example 15 - Italics tag</h5> - - <pre class="notranslate"><i>text</i></pre> - </div> - </li> - <li><strong>Bold tag</strong> (<code><b></b></code>) - <ul> - <li>Bold the contained text.</li> - </ul> - - <div> - <h5 id="Example_16_-_Bold_tag">Example 16 - Bold tag</h5> - - <pre class="notranslate"><b>text</b></pre> - </div> - </li> - <li><strong>Underline tag</strong> (<code><u></u></code>) - <ul> - <li>Underline the contained text.</li> - </ul> - - <div> - <h5 id="Example_17_-_Underline_tag">Example 17 - Underline tag</h5> - - <pre class="notranslate"><u>text</u></pre> - </div> - </li> - <li><strong>Ruby tag</strong> (<code><ruby></ruby></code>) - <ul> - <li>Used with ruby text tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> - </ul> - - <div> - <h5 id="Example_18_-_Ruby_tag">Example 18 - Ruby tag</h5> - - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> - </div> - </li> - <li><strong>Ruby text tag</strong> (<code><rt></rt></code>) - <ul> - <li>Used with ruby tags to display <a href="http://en.wikipedia.org/wiki/Ruby_character">ruby characters</a> (i.e., small annotative characters above other characters).</li> - </ul> - - <div> - <h5 id="Example_19_-_Ruby_text_tag">Example 19 - Ruby text tag</h5> - - <pre class="notranslate"><ruby>WWW<rt>World Wide Web</rt>oui<rt>yes</rt></ruby></pre> - </div> - </li> - <li><strong>Voice tag</strong> (<code><v></v></code>) - <ul> - <li>Similar to class tag, also used to style the contained text using CSS.</li> - </ul> - - <div> - <h5 id="Example_20_-_Voice_tag">Example 20 - Voice tag</h5> - - <pre class="notranslate"><v Bob>text</v></pre> - </div> - </li> -</ul> - -<h2 id="Interfaces">Interfaces</h2> - -<p>There are two interfaces or APIs used in WebVTT which are:</p> - -<h3 id="VTTCue_interface">VTTCue interface</h3> - -<p>It is used for providing an interface in Document Object Model API, where different attributes supported by it can be used to prepare and alter the cues in number of ways.</p> - -<p>Constructor is the first point for starting the Cue which is defined using the default constructor VTTCue(startTime, endTime, text) where starting time, ending time and text for cue can be adjusted. After that we can set the region for that particular cue to which this cue belongs using cue.region. Vertical, horizontal, line, lineAlign, Position, positionAlign, text, size and Align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in HTML using CSS. But the VTTCue interface is within the WebVTT provides the vast range of adjustment variables which can be used directly to alter the Cue. Following interface can be used to expose WebVTT cues in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>AutoKeyword</dfn> { <dfn>"auto"</dfn> }; -enum <dfn>DirectionSetting</dfn> { <dfn>""</dfn> /* horizontal */, <dfn>"rl"</dfn>, <dfn>"lr"</dfn> }; -enum <dfn>LineAlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn> }; -enum <dfn>PositionAlignSetting</dfn> { <dfn>"line-left"</dfn>, <dfn>"center"</dfn>, <dfn>"line-right"</dfn>, <dfn>"auto"</dfn> }; -enum <dfn>AlignSetting</dfn> { <dfn>"start"</dfn>, <dfn>"center"</dfn>, <dfn>"end"</dfn>, <dfn>"left"</dfn>, <dfn>"right"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vttcue" id="ref-for-dom-vttcue-vttcue-1">Constructor</a>(double <dfn>startTime</dfn>, double <dfn>endTime</dfn>, DOMString <dfn>text</dfn>)] -interface <dfn>VTTCue</dfn> : <a href="https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue">TextTrackCue</a> { - attribute <a href="https://w3c.github.io/webvtt/#vttregion" id="ref-for-vttregion-1">VTTRegion</a>? <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-region" id="ref-for-dom-vttcue-region-1">region</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-directionsetting" id="ref-for-enumdef-directionsetting-1">DirectionSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-vertical" id="ref-for-dom-vttcue-vertical-1">vertical</a>; - attribute boolean <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-snaptolines" id="ref-for-dom-vttcue-snaptolines-2">snapToLines</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-1">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-line" id="ref-for-dom-vttcue-line-2">line</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-linealignsetting" id="ref-for-enumdef-linealignsetting-1">LineAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-linealign" id="ref-for-dom-vttcue-linealign-1">lineAlign</a>; - attribute (double or <a href="https://w3c.github.io/webvtt/#enumdef-autokeyword" id="ref-for-enumdef-autokeyword-2">AutoKeyword</a>) <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-position" id="ref-for-dom-vttcue-position-1">position</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-positionalignsetting" id="ref-for-enumdef-positionalignsetting-1">PositionAlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-positionalign" id="ref-for-dom-vttcue-positionalign-1">positionAlign</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-size" id="ref-for-dom-vttcue-size-1">size</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-alignsetting" id="ref-for-enumdef-alignsetting-1">AlignSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-align" id="ref-for-dom-vttcue-align-1">align</a>; - attribute DOMString <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-text" id="ref-for-dom-vttcue-text-1">text</a>; - <a href="https://dom.spec.whatwg.org/#documentfragment">DocumentFragment</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttcue-getcueashtml" id="ref-for-dom-vttcue-getcueashtml-2">getCueAsHTML</a>(); -};</pre> - -<h3 id="VTT_Region_interface">VTT Region interface</h3> - -<p>This is the second interface in WebVTT API.</p> - -<p>The new keyword can be used for defining a new VTTRegion object which can then be used for containing the multiple cues. There are several properties of VTTRegion which are width, lines, regionAnchorX, RegionAnchorY, viewportAnchorX, viewportAnchorY and scroll that can be used to specify the look and feel of this VTT region. The interface code is given below which can be used to expose the WebVTT regions in DOM API:</p> - -<pre class="idl def notranslate">enum <dfn>ScrollSetting</dfn> { <dfn>""</dfn> /* none */, <dfn>"up"</dfn> }; -[<a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-vttregion" id="ref-for-dom-vttregion-vttregion-1">Constructor</a>] -interface <dfn>VTTRegion</dfn> { - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-width" id="ref-for-dom-vttregion-width-1">width</a>; - attribute long <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-lines" id="ref-for-dom-vttregion-lines-1">lines</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchorx" id="ref-for-dom-vttregion-regionanchorx-1">regionAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-regionanchory" id="ref-for-dom-vttregion-regionanchory-1">regionAnchorY</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchorx" id="ref-for-dom-vttregion-viewportanchorx-1">viewportAnchorX</a>; - attribute double <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-viewportanchory" id="ref-for-dom-vttregion-viewportanchory-1">viewportAnchorY</a>; - attribute <a href="https://w3c.github.io/webvtt/#enumdef-scrollsetting" id="ref-for-enumdef-scrollsetting-1">ScrollSetting</a> <a class="idl-code" href="https://w3c.github.io/webvtt/#dom-vttregion-scroll" id="ref-for-dom-vttregion-scroll-1">scroll</a>; -};</pre> - -<h2 id="Methods_and_properties">Methods and properties</h2> - -<p>The methods used in WebVTT are those which are used to alter the cue or region as the attributes for both interfaces are different. We can categorize them for better understanding relating to each interface in WebVTT:</p> - -<ul style="list-style-type: circle;"> - <li> - <h3 id="VTTCue">VTTCue</h3> - - <ul> - <li>The methods which are available in this interface are: - <ul style="list-style-type: circle;"> - <li>GetCueAsHTML to get the HTML of that Cue.</li> - <li>VTT Constructor for creating new objects of Cues.</li> - <li>Autokeyword.</li> - <li>DirectionSetting: to set the direction of caption or text in a file.</li> - <li>LineAlignment: to adjust the line alignment.</li> - <li>PositionAlignSetting: to adjust the position of text.</li> - </ul> - </li> - </ul> - </li> - <li> - <h3 id="VTTRegion">VTTRegion</h3> - - <ul> - <li>The methods used for region are listed below along with description of their functionality: - <ul style="list-style-type: circle;"> - <li>ScrollSetting: For adjusting the scrolling setting of all nodes present in given region.</li> - <li>VTT Region Constructor: for construction of new VTT Regions.</li> - </ul> - </li> - </ul> - </li> -</ul> - -<h2 id="Tutorial_on_how_to_write_a_WebVTT_file">Tutorial on how to write a WebVTT file</h2> - -<p>There are few steps that can be followed to write a simple webVTT file. Before start, it must be noted that you can make use of a notepad and then save the file as ‘.vtt’ file. Steps are given below:</p> - -<ol> - <li>Open a notepad.</li> - <li>The first line of WebVTT is standardized similar to the way some other languages require you to put headers as the file starts to indicate the file type. On the very first line you have to write:</li> -</ol> - -<pre class="notranslate">WEBVTT</pre> - -<p> 3. Leave the second line blank, and on the third line the time for first cue is to be specified. For example, for a first cue starting at time 1 second and ending at 5 seconds, it is written as:</p> - -<pre class="notranslate">00:01.000 --> 00:05.000</pre> - -<ol> - <li>On the next line you can write the caption for this cue which will run from 1<sup>st</sup> second to the 5<sup>th</sup> second, inclusive.</li> - <li>Following the similar steps, a complete WebVTT file for specific video or audio file can be made.</li> -</ol> - -<h2 id="CSS_pseudo-classes">CSS pseudo-classes</h2> - -<p>CSS pseudo classes allow us to classify the type of object which we want to differentiate from other types of objects. It works in similar manner in WebVTT files as it works in HTML file.</p> - -<p>It is one of the good features supported by WebVTT is the localization and use of class elements which can be used in same way they are used in HTML and CSS to classify the style for particular type of objects, but here these are used for styling and classifying the Cues as shown below:</p> - -<pre class="notranslate">WEBVTT - -04:02.500 --> 04:05.000 -J’ai commencé le basket à l'âge de 13, 14 ans - -04:05.001 --> 04:07.800 -Sur les <i.foreignphrase><lang en>playground</lang></i>, ici à Montpellier</pre> - -<p>In the above example it can be observed that we can use the identifier and pseudo class name for defining the language of caption, where <code><i></code> tag is for italics.</p> - -<p>The type of pseudo class is determined by the selector it is using and working is similar in nature as it works in HTML. Following CSS pseudo classes can be used:</p> - -<ul> - <li>Lang (Lanugage): e.g., p:lang(it).</li> - <li>Link: e.g., a:link.</li> - <li>Nth-last-child: e.g., p:nth-last-child(2).</li> - <li>Nth-child(n): e.g., p:nth-child(2).</li> -</ul> - -<p>Where p and a are the tags which are used in HTML for paragraph and link, respectively and they can be replaced by identifiers which are used for Cues in WebVTT file.</p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Specification</th> - <th>Status</th> - <th>Comment</th> - </tr> - <tr> - <td>{{SpecName("WebVTT")}}</td> - <td>{{Spec2("WebVTT")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<h3 id="VTTCue_interface_2"><code>VTTCue</code> interface</h3> - -<div> - - -<p>{{Compat("api.VTTCue", 0)}}</p> - -<h3 id="TextTrack_interface"><code>TextTrack</code> interface</h3> - -<div> - - -<p>{{Compat("api.TextTrack", 0)}}</p> - -<h3 id="Notes">Notes</h3> -</div> -</div> - -<p>Prior to Firefox 50, the <code>AlignSetting</code> enum (representing possible values for {{domxref("VTTCue.align")}}) incorrectly included the value <code>"middle"</code> instead of <code>"center"</code>. This has been corrected.</p> - -<p>WebVTT was implemented in Firefox 24 behind the preference {{pref("media.webvtt.enabled")}}, which is disabled by default; you can enable it by setting this preference to <code>true</code>. WebVTT is enabled by default starting in Firefox 31 and can be disabled by setting the preference to <code>false</code>.</p> - -<p>Prior to Firefox 58, the <code>REGION</code> keyword was creating {{domxref("VTTRegion")}} objects, but they were not being used. Firefox 58 now fully supports <code>VTTRegion</code> and its use; however, this feature is disabled by default behind the preference <code>media.webvtt.regions.enabled</code>; set it to <code>true</code> to enable region support in Firefox 58. Regions are enabled by default starting in Firefox 59 (see bugs {{bug(1338030)}} and {{bug(1415805)}}).</p> diff --git a/files/es/web/api/window/domcontentloaded_event/index.html b/files/es/web/api/window/domcontentloaded_event/index.html deleted file mode 100644 index 0659abde6f..0000000000 --- a/files/es/web/api/window/domcontentloaded_event/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/API/Window/DOMContentLoaded_event -translation_of: Web/API/Window/DOMContentLoaded_event -original_slug: Web/Events/DOMContentLoaded ---- -<p>El evento <code>DOMContentLoaded</code> es disparado cuando el documento HTML ha sido completamente cargado y parseado, sin esperar hojas de estilo, images y subframes para finalizar la carga. Un evento muy diferente - <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> - debería ser usado solo para detectar una carga completa de la página. Es un error increíblemente popular usar <a href="/en-US/docs/Mozilla_event_reference/load"><code>load</code></a> cuando <code>DOMContentLoaded</code> sería mucho más apropiado, así que úsalo con cuidado.</p> - -<p>JavaScript síncrono pausa el parseo del DOM.</p> - -<p>También hay mucho propósito general y bibliotecas autónomas que ofrecen métodos de navegador cruzado para detectar que el DOM está preparado.</p> - -<h2 id="Speeding_up">Speeding up</h2> - -<p>If you want DOM to get parsed as fast as possible after the user had requested the page, some things you could do is turn your <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript asynchronous</a> and to <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">optimize loading of stylesheets</a> which if used as usual, slow down page load due to being loaded in parallel, "stealing" traffic from the main html document.</p> - -<h2 id="General_info">General info</h2> - -<dl> - <dt style="width: 120px; text-align: right; float: left;">Specification</dt> - <dd style="margin: 0px 0px 0px 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> - <dt style="width: 120px; text-align: right; float: left;">Interface</dt> - <dd style="margin: 0px 0px 0px 120px;">Event</dd> - <dt style="width: 120px; text-align: right; float: left;">Bubbles</dt> - <dd style="margin: 0px 0px 0px 120px;">Yes</dd> - <dt style="width: 120px; text-align: right; float: left;">Cancelable</dt> - <dd style="margin: 0px 0px 0px 120px;">Yes (although specified as a simple event that isn't cancelable)</dd> - <dt style="width: 120px; text-align: right; float: left;">Target</dt> - <dd style="margin: 0px 0px 0px 120px;">Document</dd> - <dt style="width: 120px; text-align: right; float: left;">Default Action</dt> - <dd style="margin: 0px 0px 0px 120px;">None.</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="Example">Example</h2> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); -</script> -</pre> - -<pre class="brush: html"><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); - -for(var i=0; i<1000000000; i++) -{} // this synchronous script is going to delay parsing of the DOM. So the DOMContentLoaded event is going to launch later. -</script> -</pre> - -<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>1.0<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("1")}}<sup>[1]</sup></td> - <td>9.0<sup>[2]</sup></td> - <td>9.0</td> - <td>3.1<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>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatGeckoMobile("1")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Bubbling for this event is supported by at least Gecko 1.9.2, Chrome 6, and Safari 4.</p> - -<p>[2] Internet Explorer 8 supports the <code>readystatechange</code> event, which can be used to detect when the DOM is ready. In earlier versions of Internet Explorer, this state can be detected by repeatedly trying to execute <code>document.documentElement.doScroll("left");</code>, as this snippet will throw an error until the DOM is ready.</p> - -<h2 id="Related_Events">Related Events</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> diff --git a/files/es/web/api/worker/postmessage/index.html b/files/es/web/api/worker/postmessage/index.html deleted file mode 100644 index c47fe400fc..0000000000 --- a/files/es/web/api/worker/postmessage/index.html +++ /dev/null @@ -1,206 +0,0 @@ ---- -title: Worker.postMessage() -slug: Web/API/Worker/postMessage -translation_of: Web/API/Worker/postMessage ---- -<p>{{APIRef("Web Workers API")}}</p> - -<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers API</a> posee un metodo llamado <code><strong>postMessage()</strong></code> el cual envia un mensaje al ambito del worker. Este metodo acepta un parametro, el cual es un dato enviado al worker. El dato puede ser un valor o objeto controlado por el algoritmo strctured clone (incluye referencias ciclicas).</p> - -<p>El Worker puede enviar de vuelta información al hilo que lo genero usando el metodo {{domxref("DedicatedWorkerGlobalScope.postMessage")}}.</p> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush: js">myWorker.postMessage(aMessage, transferList);</pre> - -<h3 id="Parameters">Parameters</h3> - -<dl> - <dt><em>aMessage</em></dt> - <dd>The object to deliver to the worker; this will be in the data field in the event delivered to the {{domxref("DedicatedWorkerGlobalScope.onmessage")}} handler. This may be any value or JavaScript object handled by the <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-dom-interfaces.html#transferable">structured clone</a> algorithm, which includes cyclical references.</dd> - <dt><em>transferList</em> {{optional_inline}}</dt> - <dd>An optional <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">array</a> of {{domxref("Transferable")}} objects to transfer ownership of. If the ownership of an object is transferred, it becomes unusable (<em>neutered</em>) in the context it was sent from and it becomes available only to the worker it was sent to.</dd> - <dd>Only {{domxref("MessagePort")}} and {{domxref("ArrayBuffer")}} objects can be transferred.</dd> -</dl> - -<h3 id="Returns">Returns</h3> - -<p>Void.</p> - -<h2 id="Example">Example</h2> - -<p>The following code snippet shows creation of a {{domxref("Worker")}} object using the {{domxref("Worker.Worker", "Worker()")}} constructor. When either of two form inputs (<code>first</code> and <code>second</code>) have their values changed, {{event("change")}} events invoke <code>postMessage()</code> to send the value of both inputs to the current worker.</p> - -<pre class="brush: js">var myWorker = new Worker("worker.js"); - -first.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -} - -second.onchange = function() { - myWorker.postMessage([first.value,second.value]); - console.log('Message posted to worker'); -} -</pre> - -<p>For a full example, see our<a class="external external-icon" href="https://github.com/mdn/simple-web-worker">Basic dedicated worker example</a> (<a class="external external-icon" dir="ltr" href="mailto:aguilahorus@gmail.com">run dedicated worker</a>).</p> - -<div class="note"> -<p><strong>Note</strong>: <code>postMessage()</code> can only send a single object at once. As seen above, if you want to pass multiple values you can send an array.</p> -</div> - -<h2 id="Transfer_Example">Transfer Example</h2> - -<p>This example is of a Firefox addon that transfers an ArrayBuffer from the main thread to the ChromeWorker, and then the ChromeWorker trasnfers it back to the main thread.</p> - -<h4 id="Main_thread_code">Main thread code:</h4> - -<pre class="brush: js">var myWorker = new ChromeWorker(self.path + 'myWorker.js'); - -function handleMessageFromWorker(msg) { - console.log('incoming message from worker, msg:', msg); - switch (msg.data.aTopic) { - case 'do_sendMainArrBuff': - sendMainArrBuff(msg.data.aBuf) - break; - default: - throw 'no aTopic on incoming message to ChromeWorker'; - } -} - -myWorker.addEventListener('message', handleMessageFromWorker); - -// Ok lets create the buffer and send it -var arrBuf = new ArrayBuffer(8); -console.info('arrBuf.byteLength pre transfer:', arrBuf.byteLength); - -myWorker.postMessage( - { - aTopic: 'do_sendWorkerArrBuff', - aBuf: arrBuf // The array buffer that we passed to the transferrable section 3 lines below - }, - [ - arrBuf // The array buffer we created 9 lines above - ] -); - -console.info('arrBuf.byteLength post transfer:', arrBuf.byteLength); -</pre> - -<h4 id="Worker_code">Worker code</h4> - -<pre class="brush: js">self.onmessage = function (msg) { - switch (msg.data.aTopic) { - case 'do_sendWorkerArrBuff': - sendWorkerArrBuff(msg.data.aBuf) - break; - default: - throw 'no aTopic on incoming message to ChromeWorker'; - } -} - -function sendWorkerArrBuff(aBuf) { - console.info('from worker, PRE send back aBuf.byteLength:', aBuf.byteLength); - - self.postMessage({aTopic:'do_sendMainArrBuff', aBuf:aBuf}, [aBuf]); - - console.info('from worker, POST send back aBuf.byteLength:', aBuf.byteLength); -} -</pre> - -<h4 id="Output_logged">Output logged</h4> - -<pre>arrBuf.byteLength pre transfer: 8 bootstrap.js:40 -arrBuf.byteLength post transfer: 0 bootstrap.js:42 - -from worker, PRE send back aBuf.byteLength: 8 myWorker.js:5:2 - -incoming message from worker, msg: message { ... } bootstrap.js:20 -got back buf in main thread, aBuf.byteLength: 8 bootstrap.js:12 - -from worker, POST send back aBuf.byteLength: 0 myWorker.js:7:2</pre> - -<p>We see that byteLength goes to 0 as it is trasnferred. To see a fully working example of this Firefox demo addon see here: <a href="https://github.com/Noitidart/ChromeWorker/tree/aca57d9cadc4e68af16201bdecbfb6f9a6f9ca6b">GitHub :: ChromeWorker - demo-transfer-arraybuffer</a></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', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>No change from {{SpecName("Web Workers")}}.</td> - </tr> - <tr> - <td>{{SpecName('Web Workers', "#dom-worker-postmessage", "Worker.postMessage()")}}</td> - <td>{{Spec2('Web Workers')}}</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>{{CompatVersionUnknown}}</td> - <td>10.0 [1]</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>Firefox Mobile (Gecko)</th> - <th>Firefox OS (Gecko)</th> - <th>IE Phone</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>10.0 [1]</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Internet Explorer does not support {{domxref("Transferable")}} objects.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Worker")}} interface it belongs to.</li> -</ul> diff --git a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html b/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html deleted file mode 100644 index 28675abd79..0000000000 --- a/files/es/web/api/xmlhttprequest/synchronous_and_asynchronous_requests/index.html +++ /dev/null @@ -1,232 +0,0 @@ ---- -title: Solicitudes síncronas y asíncronas -slug: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests -translation_of: Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests ---- -<p><code>XMLHttpRequest</code> soporta solicitudes síncronas y asíncronas, pero la mas preferida es la asíncrona por razones de rendimiento</p> - -<p><span id="result_box" lang="es"><span>Las solicitudes síncronas bloquean la ejecución del código, mientras se procesa la solicitud, dejando a la pantalla congelada y dando una experiencia de usuario poco agradable</span></span></p> - -<h2 id="Peticiones_asíncronas">Peticiones asíncronas</h2> - -<p><span id="result_box" lang="es"><span>Si se utiliza <code>XMLHttpRequest</code> de forma asíncrona, recibirá una devolución de llamada cuando los datos se hayan recibido .</span> <span>Esto permite que el navegador continúe funcionando de forma normal mientras se procesa la solicitud.</span></span></p> - -<h3 id="Ejemplo_Enviar_un_archivo_a_la_consola"><span id="result_box" lang="es"><span>Ejemplo: Enviar un archivo a la consola</span></span></h3> - -<p><span class="short_text" id="result_box" lang="es"><span>Este es el uso más simple de la asíncronia </span></span><code>XMLHttpRequest</code>.</p> - -<pre class="brush: js">var xhr = new XMLHttpRequest(); -xhr.open("GET", "/bar/foo.txt", true); -xhr.onload = function (e) { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - console.log(xhr.responseText); - } else { - console.error(xhr.statusText); - } - } -}; -xhr.onerror = function (e) { - console.error(xhr.statusText); -}; -xhr.send(null); </pre> - -<p>En la linea 2, el ultimo parametro de <code>open()</code> , especifica <code>true</code> para indicar que la solicitud se tratara de forma asíncrona</p> - -<p>Line 3 creates an event handler function object and assigns it to the request's <code>onload</code> attribute. This handler looks at the request's <code>readyState</code> to see if the transaction is complete in line 4, and if it is, and the HTTP status is 200, dumps the received content. If an error occurred, an error message is displayed.</p> - -<p>Line 15 actually initiates the request. The callback routine is called whenever the state of the request changes.</p> - -<h3 id="Ejemplo_Creando_una_funcion_estandar_para_leer_archivos_externos.">Ejemplo: Creando una funcion estandar para leer archivos externos.</h3> - -<p>In some cases you must read many external files. This is a standard function which uses the <code>XMLHttpRequest</code> object asynchronously in order to switch the content of the read file to a specified listener.</p> - -<pre class="brush: js">function xhrSuccess () { this.callback.apply(this, this.arguments); } - -function xhrError () { console.error(this.statusText); } - -function loadFile (sURL, fCallback /*, argumentToPass1, argumentToPass2, etc. */) { - var oReq = new XMLHttpRequest(); - oReq.callback = fCallback; - oReq.arguments = Array.prototype.slice.call(arguments, 2); - oReq.onload = xhrSuccess; - oReq.onerror = xhrError; - oReq.open("get", sURL, true); - oReq.send(null); -} -</pre> - -<p>Usage:</p> - -<pre class="brush: js">function showMessage (sMsg) { - alert(sMsg + this.responseText); -} - -loadFile("message.txt", showMessage, "New message!\n\n"); -</pre> - -<p>The signature of the utility function <em><strong>loadFile</strong></em> declares (i) a target URL to read (via HTTP GET), (ii) a function to execute on successful completion of the XHR operation, and (iii) an arbitrary list of additional arguments that are "passed through" the XHR object to the success callback function.</p> - -<p>Line 1 declares a function invoked when the XHR operation completes successfully. It, in turn, invokes the callback function specified in the invocation of the loadFile function (in this case, the function showMessage) which has been assigned to a property of the XHR object (Line 7). The additional arguments (if any) supplied to the invocation of function loadFile are "applied" to the running of the callback function.</p> - -<p>Line 3 declares a function invoked when the XHR operation fails to complete successfully.</p> - -<p>Line 7 stores on the XHR object the success callback function given as the second argument to loadFile.</p> - -<p>Line 8 slices the arguments array given to the invocation of loadFile. Starting with the third argument, all remaining arguments are collected, assigned to the arguments property of the variable oReq, passed to the success callback function xhrSuccess., and ultimately supplied to the callback function (in this case, showMessage) which is invoked by function xhrSuccess.</p> - -<p>Line 9 designates the function xhrSuccess as the callback to be invoked when the onload event fires, that is, when the XHR sucessfully completes. </p> - -<p>Line 10 designates the function xhrError as the callback to be invoked when the XHR requests fails to complete.</p> - -<p>Line 11 specifies <code>true</code> for its third parameter to indicate that the request should be handled asynchronously.</p> - -<p>Line 12 actually initiates the request.</p> - -<h3 id="Example_using_a_timeout">Example: using a timeout</h3> - -<p>You can use a timeout to prevent hanging your code forever while waiting for a read to occur. This is done by setting the value of the <code>timeout</code> property on the <code>XMLHttpRequest</code> object, as shown in the code below:</p> - -<pre class="brush: js">function loadFile(sUrl, timeout, callback){ - - var args = arguments.slice(3); - var xhr = new XMLHttpRequest(); - xhr.ontimeout = function () { - console.error("The request for " + url + " timed out."); - }; - xhr.onload = function() { - if (xhr.readyState === 4) { - if (xhr.status === 200) { - callback.apply(xhr, args); - } else { - console.error(xhr.statusText); - } - } - }; - xhr.open("GET", url, true); - xhr.timeout = timeout; - xhr.send(null); -}</pre> - -<p>Notice the addition of code to handle the "timeout" event by setting the <code>ontimeout</code> handler.</p> - -<p>Usage:</p> - -<pre class="brush: js">function showMessage (sMsg) { - alert(sMsg + this.responseText); -} - -loadFile("message.txt", 2000, showMessage, "New message!\n"); -</pre> - -<p>Here, we're specifying a timeout of 2000 ms.</p> - -<div class="note"> -<p><strong>Note:</strong> Support for <code>timeout</code> was added in {{Gecko("12.0")}}.</p> -</div> - -<h2 id="Synchronous_request">Synchronous request</h2> - -<div class="note"><strong>Note:</strong> Starting with Gecko 30.0 {{ geckoRelease("30.0") }}, synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.</div> - -<p>In rare cases, the use of a synchronous method is preferable to an asynchronous one.</p> - -<h3 id="Example_HTTP_synchronous_request">Example: HTTP synchronous request</h3> - -<p>This example demonstrates how to make a simple synchronous request.</p> - -<pre class="brush: js">var request = new XMLHttpRequest(); -request.open('GET', '/bar/foo.txt', false); // `false` makes the request synchronous -request.send(null); - -if (request.status === 200) { - console.log(request.responseText); -} -</pre> - -<p>Line 3 sends the request. The <code>null</code> parameter indicates that no body content is needed for the <code>GET</code> request.</p> - -<p>Line 5 checks the status code after the transaction is completed. If the result is 200 -- HTTP's "OK" result -- the document's text content is output to the console.</p> - -<h3 id="Example_Synchronous_HTTP_request_from_a_Worker">Example: Synchronous HTTP request from a <code>Worker</code></h3> - -<p>One of the few cases in which a synchronous request does not usually block execution is the use of <code>XMLHttpRequest</code> within a <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>.</p> - -<p><code><strong>example.html</strong></code> (the main page):</p> - -<pre class="brush: html"><!doctype html> -<html> -<head> -<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> -<title>MDN Example</title> -<script type="text/javascript"> - var worker = new Worker("myTask.js"); - worker.onmessage = function(event) { - alert("Worker said: " + event.data); - }; - - worker.postMessage("Hello"); -</script> -</head> -<body></body> -</html> -</pre> - -<p><code><strong>myFile.txt</strong></code> (the target of the synchronous <code><a href="/en/DOM/XMLHttpRequest" title="/en/XMLHttpRequest">XMLHttpRequest</a></code> invocation):</p> - -<pre>Hello World!! -</pre> - -<p><code><strong>myTask.js</strong></code> (the <code><a href="/en/DOM/Worker" title="/en/DOM/Worker">Worker</a></code>):</p> - -<pre class="brush: js">self.onmessage = function (event) { - if (event.data === "Hello") { - var xhr = new XMLHttpRequest(); - xhr.open("GET", "myFile.txt", false); // synchronous request - xhr.send(null); - self.postMessage(xhr.responseText); - } -}; -</pre> - -<div class="note"><strong>Note:</strong> The effect, because of the use of the <code>Worker</code>, is however asynchronous.</div> - -<p>It could be useful in order to interact in background with the server or to preload some content. See <a class="internal" href="/En/DOM/Using_web_workers" title="en/Using DOM workers">Using web workers</a> for examples and details.</p> - -<h3 id="Adapting_Sync_XHR_usecases_to_the_Beacon_API">Adapting Sync XHR usecases to the Beacon API</h3> - -<p>There are some cases in which the synchronous usage of XMLHttpRequest was not replaceable, like during the <a class="internal" href="/en/DOM/window.onunload" title="en/DOM/window.onunload"><code>window.onunload</code></a> and <a class="internal" href="/en/DOM/window.onbeforeunload" title="en/DOM/window.onbeforeunload"><code>window.onbeforeunload</code></a> events. The <a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a> API can support these usecases typically while delivering a good UX.</p> - -<p><span>The following example (from the <a href="/en-US/docs/Web/API/Navigator/sendBeacon">sendBeacon docs</a>) shows a theoretical analytics code that attempts to submit data to a server by using a synchronous XMLHttpRequest in an unload handler. This results in the unload of the page to be delayed.</span></p> - -<pre class="brush: js">window.addEventListener('unload', logData, false); - -function logData() { - var client = new XMLHttpRequest(); - client.open("POST", "/log", false); // third parameter indicates sync xhr. :( - client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8"); - client.send(analyticsData); -} -</pre> - -<p>Using the <strong><code>sendBeacon()</code></strong> method, the data will be transmitted asynchronously to the web server when the User Agent has had an opportunity to do so, <strong>without delaying the unload or affecting the performance of the next navigation.</strong></p> - -<p>The following example shows a theoretical analytics code pattern that submits data to a server using the by using the <strong><code>sendBeacon()</code></strong> method.</p> - -<pre class="brush: js">window.addEventListener('unload', logData, false); - -function logData() { - navigator.sendBeacon("/log", analyticsData); -} -</pre> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a></li> - <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest" title="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> - <li><a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a></li> - <li><code><a href="/en-US/docs/Web/API/Navigator/sendBeacon">navigator.sendBeacon</a></code></li> -</ul> - -<p>{{ languages( {"zh-cn": "zh-cn/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests" } ) }}</p> diff --git a/files/es/web/css/@document/index.html b/files/es/web/css/@document/index.html deleted file mode 100644 index 8c1ead6ac3..0000000000 --- a/files/es/web/css/@document/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: '@document' -slug: Web/CSS/@document -translation_of: Web/CSS/@document ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>The <strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> restricts the style rules contained within it based on the URL of the document. It is designed primarily for user-defined style sheets, though it can be used on author-defined style sheets, too.</p> - -<pre class="brush: css no-line-numbers">@document url("https://www.example.com/") { - h1 { - color: green; - } -} -</pre> - -<ul> -</ul> - -<h2 id="Syntax">Syntax</h2> - - - -<p>Una regla @document puede especificar una o más funciones coincidentes. Si alguna de las funciones se aplica a una URL determinada, la regla tendrá efecto en esa URL. Las funciones disponibles son:</p> - -<ul> - <li><code>url()</code>, which matches an exact URL.</li> - <li><code>url-prefix()</code>, which matches if the document URL starts with the value provided.</li> - <li><code>domain()</code>, which matches if the document URL is on the domain provided (or a subdomain of it).</li> - <li><code>regexp()</code>, which matches if the document URL is matched by the <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a> provided. The expression must match the entire URL.</li> -</ul> - -<p>The values provided to the <code>url()</code>, <code>url-prefix()</code>, and <code>domain()</code> functions can be optionally enclosed by single or double quotes. The values provided to the <code>regexp()</code> function <em>must</em> be enclosed in quotes.</p> - -<p>Escaped values provided to the <code>regexp()</code> function must additionally be escaped from the CSS. For example, a <code>.</code> (period) matches any character in regular expressions. To match a literal period, you would first need to escape it using regular expression rules (to <code>\.</code>), then escape that string using CSS rules (to <code>\\.</code>).</p> - -<div class="note"> -<p><strong>Note</strong>: There is a -moz-prefixed version of this property — <code>@-moz-document</code>. This has been limited to use only in user and UA sheets in Firefox 59 in Nightly and Beta — an experiment designed to mitigate potential CSS injection attacks ({{bug(1035091)}}).</p> -</div> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example">Example</h2> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">@document url(http://www.w3.org/), - url-prefix(http://www.w3.org/Style/), - domain(mozilla.org), - regexp("https:.*") { - /* CSS rules here apply to: - - The page "http://www.w3.org/" - - Any page whose URL begins with "http://www.w3.org/Style/" - - Any page whose URL's host is "mozilla.org" - or ends with ".mozilla.org" - - Any page whose URL starts with "https:" */ - - /* Make the above-mentioned pages really ugly */ - body { - color: purple; - background: yellow; - } -} -</pre> - -<h2 id="Specifications">Specifications</h2> - -<p><a href="http://www.w3.org/TR/2012/WD-css3-conditional-20120911/#at-document">Initially</a> in {{SpecName('CSS3 Conditional')}}, <code>@document</code> has been <a href="http://www.w3.org/TR/2012/WD-css3-conditional-20121213/#changes">postponed</a> to Level 4.</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.at-rules.document")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a class="external" href="http://lists.w3.org/Archives/Public/www-style/2004Aug/0135">Per-site user style sheet rules</a> on the www-style mailing list.</li> -</ul> diff --git a/files/es/web/css/background-position-x/index.html b/files/es/web/css/background-position-x/index.html deleted file mode 100644 index 16f74f3cb7..0000000000 --- a/files/es/web/css/background-position-x/index.html +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: background-position-x -slug: Web/CSS/background-position-x -translation_of: Web/CSS/background-position-x ---- -<div>{{CSSRef}}</div> - -<p>El <strong><code>background-position-x</code></strong> propiedad de <a href="/en-US/docs/Web/CSS">CSS</a> coloca la posicion horizontal inicial por cada imagen de fondo. La posicion es relativa a la posicion de la capa puesta por {{cssxref("background-origin")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/background-position-x.html")}}</div> - -<p class="hidden">El recurso para este ejemplo interactivo es almacenado en un repositorio GitHub. Si te gustaría contrubuir al proyecto de ejemplos interactivos, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envianos una solicitud.</p> - -<p>The value of this property is overridden by any declaration of the {{cssxref("background")}} or {{cssxref("background-position")}} shorthand properties applied to the element after it.</p> - -<h2 id="Syntax" name="Syntax">Syntax</h2> - -<pre class="brush: css no-line-numbers notranslate">/* Keyword values */ -background-position-x: left; -background-position-x: center; -background-position-x: right; - -/* <percentage> values */ -background-position-x: 25%; - -/* <length> values */ -background-position-x: 0px; -background-position-x: 1cm; -background-position-x: 8em; - -/* Side-relative values */ -background-position-x: right 3px; -background-position-x: left 25%; - -/* Multiple values */ -background-position-x: 0px, center; - -/* Global values */ -background-position-x: inherit; -background-position-x: initial; -background-position-x: unset; -</pre> - -<p>The <code>background-position-x</code> property is specified as one or more values, separated by commas.</p> - -<h3 id="Values">Values</h3> - -<dl> - <dt><code>left</code></dt> - <dd>Aligns the left edge of the background image with the left edge of the background position layer.</dd> - <dt><code>center</code></dt> - <dd>Aligns the center of the background image with the center of the background position layer.</dd> - <dt><code>right</code></dt> - <dd>Aligns the right edge of the background image with the right edge of the background position layer.</dd> - <dt>{{cssxref("<length>")}}</dt> - <dd>The offset of the given background image's left vertical edge from the background position layer's left vertical edge. (Some browsers allow assigning the right edge for offset).</dd> - <dt>{{cssxref("<percentage>")}}</dt> - <dd>The offset of the given background image's horizontal position relative to the container. A value of 0% means that the left edge of the background image is aligned with the left edge of the container, and a value of 100% means that the <em>right</em> edge of the background image is aligned with the <em>right</em> edge of the container, thus a value of 50% horizontally centers the background image.</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="Basic_example">Basic example</h3> - -<p>The following example shows a simple background image implementation, with background-position-x and background-position-y used to define the image's horizontal and vertical positions separately.</p> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div></div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css notranslate">div { - width: 300px; - height: 300px; - background-color: skyblue; - background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); - background-repeat: no-repeat; - background-position-x: center; - background-position-y: bottom 10px; -}</pre> - -<h4 id="Result">Result</h4> - -<p>{{EmbedLiveSample('Basic_example', '100%', 300)}}</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 Backgrounds', '#background-position-longhands', 'background-position-x')}}</td> - <td>{{Spec2('CSS4 Backgrounds')}}</td> - <td>Initial specification of longhand sub-properties of {{cssxref("background-position")}} to match longstanding implementations.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("css.properties.background-position-x")}}</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{cssxref("background-position")}}</li> - <li>{{cssxref("background-position-y")}}</li> - <li>{{cssxref("background-position-inline")}}</li> - <li>{{cssxref("background-position-block")}}</li> - <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="CSS/Multiple backgrounds">Using multiple backgrounds</a></li> -</ul> diff --git a/files/es/web/css/border-radius/index.html b/files/es/web/css/border-radius/index.html deleted file mode 100644 index 39e3ab03d7..0000000000 --- a/files/es/web/css/border-radius/index.html +++ /dev/null @@ -1,320 +0,0 @@ ---- -title: border-radius -slug: Web/CSS/border-radius -tags: - - CSS - - CSS Borders - - CSS Property - - Reference -translation_of: Web/CSS/border-radius ---- -<p>{{ CSSRef() }}</p> - -<h2 id="Resumen">Resumen</h2> - -<p>La propiedad CSS <code>border-radius</code> permite a los desarrolladores Web definir qué tan redondeadas serán las esquinas. La redondez de cada esquina está definida usando uno o dos valores para el radio que define su forma dependiendo si es un círculo o una elipse.</p> - -<p><img alt="Images of CSS3 rounded corners: no rounding, rounding w/ an arc of circle, rounding w/ an arc of ellipse" class="default internal" src="/files/3638/border-radius-sh.png" style="height: 164px; width: 549px;"></p> - -<p>El radio se aplica a todo el {{ Cssxref("background") }}, aun si el elemento no tiene bordes; la posición exacta del recorte es definida por la propiedad {{ Cssxref("background-clip") }}.</p> - -<p>Esta propiedad es un <a href="/en/CSS/Shorthand_properties" title="en/CSS/Shorthand_properties">atajo</a> para establecer las cuatro propiedades {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }} y {{ Cssxref("border-bottom-left-radius") }}.</p> - -<div class="note">As with any shorthand property, individual inherited values are not possible, that is <code>border-radius:0 0 inherit inherit</code>, which would override existing definitions partially. In that case, the individual longhand properties have to be used.</div> - -<p>{{cssinfo}}</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="twopartsyntaxbox">Formal grammar: [ <var><length></var> | <var><percentage></var> ]{1,4} [ / [ <var><length></var> | <var><percentage></var> ]{1,4}] ? - \------------------------------/ \-------------------------------/ - First radii Second radii (optional) -</pre> - -<pre><strong>The syntax of the first radius allows one to four values:</strong> -border-radius: <em>radius</em> -border-radius: <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> -border-radius: <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> -border-radius: <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> - -<strong>The syntax of the second radius also allows one to four values</strong> -border-radius: (first radius values) / <em>radius</em> -border-radius: (first radius values) / <em>top-left-and-bottom-right</em> <em>top-right-and-bottom-left</em> -border-radius: (first radius values) / <em>top-left</em> <em>top-right-and-bottom-left</em> <em>bottom-right</em> -border-radius: (first radius values) / <em>top-left</em> <em>top-right</em> <em>bottom-right</em> <em>bottom-left</em> - -border-radius: inherit -</pre> - -<h3 id="Valores">Valores</h3> - -<table> - <tbody> - <tr> - <td style="vertical-align: top;"><em>radius</em></td> - <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in each corner of the border. It is used only in the one-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> - <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left and bottom-right corners of the element's box. It is used only in the two-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> - <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right and bottom-left corners of the element's box. It is used only in the two- and three-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-left</em></td> - <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-left corner of the element's box. It is used only in the three- and four-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>top-right</em></td> - <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the top-right corner of the element's box. It is used only in the four-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>bottom-right</em></td> - <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-right corner of the element's box. It is used only in the three- and four-value syntaxes.</td> - </tr> - <tr> - <td style="vertical-align: top;"><em>bottom-left</em></td> - <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td> - <td style="vertical-align: top;">Is a {{cssxref("<length>")}} or a {{cssxref("<percentage>")}} denoting a radius to use for the border in the bottom-left corner of the element's box. It is used only in the four-value syntax.</td> - </tr> - <tr> - <td style="vertical-align: top;"><code>inherit</code></td> - <td> </td> - <td style="vertical-align: top;">Is a keyword indicating that all four values are inherited from their parent's element calculated value.</td> - </tr> - </tbody> -</table> - -<h3 id="Valores_2">Valores</h3> - -<dl> - <dt><length></dt> - <dd>Denotes the size of the circle radius or the semi-major and semi-minor axes of the ellipsis. It can be expressed in any unit allowed by the CSS {{cssxref("<length>")}} data types. Negative values are invalid.</dd> - <dt><percentage></dt> - <dd>Denotes the size of the circle radius, or the semi-major and semi-minor axes of the ellipsis, using percentage values. Percentages for the horizontal axis refer to the width of the box, percentages for the vertical axis refer to the height of the box. Negative values are invalid.</dd> -</dl> - -<p>Por ejemplo:</p> - -<pre class="brush: css">border-radius: 1em/5em; - -/* es equivalente a: */ - -border-top-left-radius: 1em 5em; -border-top-right-radius: 1em 5em; -border-bottom-right-radius: 1em 5em; -border-bottom-left-radius: 1em 5em; -</pre> - -<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px; - -/* es equivalente a: */ - -border-top-left-radius: 4px 2px; -border-top-right-radius: 3px 4px; -border-bottom-right-radius: 6px 2px; -border-bottom-left-radius: 3px 4px; -</pre> - -<h2 id="Ejemplos">Ejemplos</h2> - -<pre style="display: inline-block; margin: 10px; border: solid 10px; border-radius: 10px 40px 40px 10px;"> border: solid 10px; - /* the border will curve into a 'D' */ - border-radius: 10px 40px 40px 10px; -</pre> - -<pre style="display: inline-block; margin: 10px; border: groove 1em red; border-radius: 2em;"> border: groove 1em red; - border-radius: 2em; -</pre> - -<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold; border-radius: 13em/3em;"> background: gold; - border: ridge gold; - border-radius: 13em/3em; -</pre> - -<pre style="display: inline-block; margin: 10px; background: gold; border: none; border-radius: 40px 10px;"> border: none; - border-radius: 40px 10px; -</pre> - -<pre style="display: inline-block; margin: 10px; background: black; color: white; border: none; border-radius: 50%;"> border: none; - border-radius: 50%; -</pre> - -<h2 id="Notas">Notas</h2> - -<ul> - <li>Dotted and dashed rounded border corners are rendered as solid in Gecko; see {{ bug("382721") }}.</li> - <li><code>border-radius</code> does not apply to table elements when {{ Cssxref("border-collapse") }} is <code>collapse</code>.</li> - <li>Old versions of WebKit handle multiple values differently, see below.</li> -</ul> - -<h2 id="Especificaciones">Especificaciones</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 Backgrounds', '#border-radius', 'border-radius') }}</td> - <td>{{ Spec2('CSS3 Backgrounds') }}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="Compatibilidad_con_los_navegadores">Compatibilidad con los navegadores</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Firefox (Gecko)</th> - <th>Chrome</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatGeckoDesktop("2.0") }}<br> - {{ CompatGeckoDesktop("1.0") }}{{ property_prefix("-moz") }}</td> - <td>4.0<br> - 0.2{{ property_prefix("-webkit") }}</td> - <td>9.0</td> - <td>10.5</td> - <td>5.0<br> - 3.0{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td>Elliptical borders</td> - <td>{{ CompatGeckoDesktop("1.9.1") }}</td> - <td>yes</td> - <td>yes</td> - <td>yes</td> - <td>yes, but see below</td> - </tr> - <tr> - <td>4 values for 4 corners</td> - <td>yes</td> - <td>4.0</td> - <td>yes</td> - <td>yes</td> - <td>5.0</td> - </tr> - <tr> - <td>Percentages</td> - <td>yes<br> - was {{ non-standard_inline() }} (see below)</td> - <td>yes</td> - <td>yes</td> - <td>11.5</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>iOS Safari</th> - <th>Opera Mini</th> - <th>Opera Mobile</th> - <th>Android Browser</th> - </tr> - <tr> - <td>Basic support</td> - <td>3.2{{ property_prefix("-webkit") }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>2.1{{ property_prefix("-webkit") }}</td> - </tr> - <tr> - <td>Elliptical borders</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>4 values for 4 corners</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td>Percentages</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h3 id="<percentage>_values"><code><percentage></code> values</h3> - -<ul> - <li>are not supported in older Chrome and Safari versions (it was <a class="external" href="http://trac.webkit.org/changeset/66615">fixed in Sepember 2010</a>)</li> - <li>are buggy in Opera prior to 11.50</li> - <li>are implemented in a non-standard way prior to Gecko 2.0 (Firefox 4). <strong>Both</strong> horizontal and vertical radii were relative to the width of the border box.</li> - <li>are not supported in older versions of iOS (prior to 5) and Android versions (prior to WebKit 532)</li> -</ul> - -<h3 id="Gecko_notes">Gecko notes</h3> - -<p>In Gecko 2.0 <code>-moz-border-radius</code> was renamed to <code>border-radius</code>; <code>-moz-border-radius</code> was supported as an alias until Gecko 12.0. In order to conform to the CSS3 standard, Gecko 2.0</p> - -<ul> - <li>changes the handling of {{cssxref("<percentage>")}} values to match the specification. You can specify an ellipse as border on an arbitrary sized element just with <code>border-radius: 50%;</code></li> - <li>makes rounded corners clip content and images (if {{ cssxref("overflow") }}<code>: visible</code> is not set)</li> -</ul> - -<div class="note"><strong>Note:</strong> Support for the prefixed version (<code>-moz-border-radius</code>) was removed in Gecko 13.0 {{ geckoRelease("13.0") }}.</div> - -<h3 id="WebKit_notes">WebKit notes</h3> - -<p>Older Safari and Chrome versions (prior to WebKit 532.5)</p> - -<ul> - <li>support only <strong>one</strong> value for all 4 corners. For different radii the <a href="/en/CSS/border-top-left-radius#Examples" title="en/CSS/border-top-left-radius#Examples">long form properties</a> must be used</li> - <li>don't support the slash <code>/</code> notation. If two values are specified, an elliptical border is drawn on all 4 corners - <pre>/* this is equivalent: */ - --webkit-border-radius: 40px 10px; - border-radius: 40px/10px; -</pre> - </li> -</ul> - -<h3 id="Opera_notes">Opera notes</h3> - -<p>In Opera (prior to Opera 11.60), applying <code>border-radius</code> to replaced elements will not have rounded corners.</p> - -<h2 id="Vea_también">Vea también</h2> - -<ul> - <li>Border-radius-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}</li> -</ul> - -<p>{{ languages( { "de": "de/CSS/border-radius", "fr": "fr/CSS/-moz-border-radius", "ja": "ja/CSS/border-radius", "pl": "pl/CSS/-moz-border-radius" } ) }}</p> diff --git a/files/es/web/css/cascade/index.html b/files/es/web/css/cascade/index.html deleted file mode 100644 index 87b99bd61c..0000000000 --- a/files/es/web/css/cascade/index.html +++ /dev/null @@ -1,202 +0,0 @@ ---- -title: Introducción a CSS en cascada -slug: Web/CSS/Cascade -translation_of: Web/CSS/Cascade ---- -<div>{{CSSRef}}</div> - -<div>La <strong>cascada</strong> es un algoritmo que define como combinar valores de propiedad originarios de diferentes fuentes. Este se encuentra en el núcleo de CSS, como enfatizafo por el nombre: <em>Hojas de Estilo en Cascada</em>. Este articulo explica que es cascada, el orden de las <span class="seoSummary">{{Glossary("CSS")}} </span><a href="/en-US/docs/Web/API/CSSStyleDeclaration">declaraciones</a> en cascada, y como esto te afecta, el desarrollador web.</div> - -<h2 id="¿Cuáles_entidades_CSS_participan_en_la_cascada">¿Cuáles entidades CSS participan en la cascada?</h2> - -<p>Solo las declaraciones CSS, es decir pares de propiedad/valor, participan en la cascada. Esto significa que las <a href="/es/docs/Web/CSS/At-rule">at-rules</a> que contienen entidades distintas de las declaraciones, como una regla <code>@font-face</code> que contiene <em>descriptores</em>, no participan en la cascada. En estos casos, solo la regla-at en su conjunto participa en la cascada: aquí, la <code>@font-face</code> identificada por su descriptor de familia de tipografías. Si se definen varias reglas <code>@font-face</code> con el mismo descriptor, solo se considera la <code>@font-face</code>, como conjunto, más adecuada. </p> - -<p>Mientras que las declaraciones contenidas en la mayoría de las reglas-at -como aquellas en <code>@media</code>, <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@document</span></font> o <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@support</span></font> - participan en la cascada, las declaraciones contenidas en <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@keyframes</span></font> no. Como con <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">@font-face</span></font>, solo la regla-at en su conjunto se selecciona a través del algoritmo en cascada.</p> - -<p>Finalmente, debemos tener en cuenta que {{cssxref ("@ import")}} y {{cssxref ("@ charset")}} obedecen a algoritmos específicos y no se ven afectados por el algoritmo en cascada.</p> - -<h2 id="Origin_of_CSS_declarations">Origin of CSS declarations</h2> - -<p>The CSS cascade algorithm's job is to select CSS declarations in order to determine the correct values for CSS properties. CSS declarations originate from different origins: the <strong>{{anch("User-agent stylesheets")}}</strong>, the <strong>{{anch("Author stylesheets")}}</strong>, and the <strong>{{anch("User stylesheets")}}</strong>.</p> - -<p>Though style sheets come from these different origins, they overlap in scope; to make this work, the cascade algorithm defines how they interact.</p> - -<h3 id="User-agent_stylesheets">User-agent stylesheets</h3> - -<p>The browser has a basic style sheet that gives a default style to any document. These style sheets are named <strong>user-agent stylesheets</strong>. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.</p> - -<p>Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.</p> - -<h3 id="Author_stylesheets">Author stylesheets</h3> - -<p><strong>Author stylesheets</strong> are the most common type of style sheet. These are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme.</p> - -<h3 id="User_stylesheets">User stylesheets</h3> - -<p>The user (or reader) of the web site can choose to override styles in many browsers using a custom <strong>user stylesheet</strong> designed to tailor the experience to the user's wishes.</p> - -<h2 id="Cascading_order">Cascading order</h2> - -<p>The cascading algorithm determines how to find the value to apply for each property for each document element.</p> - -<ol> - <li>It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.</li> - <li>Then it sorts these rules according to their importance, that is, whether or not they are followed by <code>!important</code>, and by their origin. The cascade is in ascending order, which means that <code>!important</code> values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet: - <table class="standard-table"> - <thead> - <tr> - <th scope="col"></th> - <th scope="col">Origin</th> - <th scope="col">Importance</th> - </tr> - </thead> - <tbody> - <tr> - <td>1</td> - <td>user agent</td> - <td>normal</td> - </tr> - <tr> - <td>2</td> - <td>user</td> - <td>normal</td> - </tr> - <tr> - <td>3</td> - <td>author</td> - <td>normal</td> - </tr> - <tr> - <td>4</td> - <td>animations</td> - <td></td> - </tr> - <tr> - <td>5</td> - <td>author</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>6</td> - <td>user</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>7</td> - <td>user agent</td> - <td><code>!important</code></td> - </tr> - <tr> - <td>8</td> - <td>transitions</td> - <td></td> - </tr> - </tbody> - </table> - </li> - <li>In case of equality, the <a href="/en-US/docs/Web/CSS/Specificity" title="/en-US/docs/Web/CSSSpecificity">specificity</a> of a value is considered to choose one or the other.</li> -</ol> - -<h2 id="Resetting_styles">Resetting styles</h2> - -<p>After your content has finished altering styles, it may find itself in a situation where it needs to restore them to a known state. This may happen in cases of animations, theme changes, and so forth. The CSS property {{cssxref("all")}} lets you quickly set (almost) everything in CSS back to a known state.</p> - -<p><code>all</code> lets you opt to immediately restore all properties to any of their initial (default) state, the state inherited from the previous level of the cascade, a specific origin (the user-agent stylesheet, the author stylesheet, or the user stylesheet), or even to clear the values of the properties entirely.</p> - -<h2 id="CSS_animations_and_the_cascade">CSS animations and the cascade</h2> - -<p><a href="/en-US/docs/Web/CSSUsing_CSS_animations" title="/en-US/docs/Web/CSSUsing_CSS_animations">CSS animations</a>, using {{ cssxref("@keyframes")}} at-rules, define animations between states. Keyframes don't cascade, meaning that at any given time CSS takes values from only one single {{cssxref("@keyframes")}}, and never mixes multiple ones together.</p> - -<p>When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.</p> - -<h2 id="Example">Example</h2> - -<p>Let's look at an example involving multiple sources of CSS across the various origins; here we have a user agent style sheet, two author style sheets, a user stylesheet, and inline styles within the HTML:</p> - -<p><strong>User-agent CSS:</strong></p> - -<pre class="brush:css;">li { margin-left: 10px }</pre> - -<p><strong class="brush:css;">Author CSS 1:</strong></p> - -<pre class="brush:css;">li { margin-left: 0 } /* This is a reset */</pre> - -<p><strong class="brush:css;">Author CSS 2:</strong></p> - -<pre class="brush:css;">@media screen { - li { margin-left: 3px } -} - -@media print { - li { margin-left: 1px } -} -</pre> - -<p><strong class="brush:css;">User CSS:</strong></p> - -<pre class="brush:css;">.specific { margin-left: 1em }</pre> - -<p><strong>HTML:</strong></p> - -<pre class="brush:html;"><ul> - <li class="specific">1<sup>st</sup></li> - <li>2<sup>nd</sup></li> -</ul> -</pre> - -<p>In this case, declarations inside <code>li</code> and <code>.specific</code> rules should apply. No declaration is marked as <code>!important</code>, so the precedence order is author style sheets before user style sheets or user-agent stylesheet.</p> - -<p>So three declarations are in competition:</p> - -<pre class="brush:css;">margin-left: 0</pre> - -<pre class="brush:css;">margin-left: 3px</pre> - -<pre class="brush:css;">margin-left: 1px</pre> - -<p>The last one is ignored (on a screen), and the first two have the same selector, hence the same specificity. Therefore, it is the last one that is then selected:</p> - -<pre class="brush:css;">margin-left: 3px</pre> - -<p>Note that the declaration defined in the user CSS, though having a greater specificity, is not chosen as the cascade algorithm is applied before the specificity algorithm.</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 Cascade")}}</td> - <td>{{Spec2("CSS4 Cascade")}}</td> - <td>Added the {{CSSxRef("revert")}} keyword, which allows rolling a property back a cascade level.</td> - </tr> - <tr> - <td>{{SpecName("CSS3 Cascade")}}</td> - <td>{{Spec2("CSS3 Cascade")}}</td> - <td>Removed the override cascade origin, as it was never used in a W3C standard.</td> - </tr> - <tr> - <td>{{SpecName("CSS2.1", "cascade.html", "the cascade")}}</td> - <td>{{Spec2("CSS2.1")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("CSS1", "#the-cascade", "the cascade")}}</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/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">A very simple introduction to the CSS cascade</a></li> - <li>{{CSS_Key_Concepts}}</li> -</ul> diff --git a/files/es/web/css/clip-path/index.html b/files/es/web/css/clip-path/index.html deleted file mode 100644 index a8b5253601..0000000000 --- a/files/es/web/css/clip-path/index.html +++ /dev/null @@ -1,179 +0,0 @@ ---- -title: clip-path -slug: Web/CSS/clip-path -translation_of: Web/CSS/clip-path ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La propiedad CSS <code><strong>clip-path</strong></code> proviene que una porción de un elemento se muestre definiendo una región de recorte para mostrarse, es decir, solo una parte especifica del elemento se mostrara. La región recortada es un path especificado como una URL referenciando a un SVG inline o externo, o un metodo de figura como lo es <a href="/en-US/docs/Web/SVG/Element/circle">circle()</a>. La propiedad clip-path reemplaza la ahora deprecada propiedad <a href="/en-US/docs/Web/CSS/clip">clip</a>.</p> - -<pre class="brush:css no-line-numbers">/* Valores clave */ -clip-path: none; - -/* Valores de imagen */ -clip-path: url(resources.svg#c1); - -/* Valores de caja */ -clip-path: fill-box; -clip-path: stroke-box; -clip-path: view-box; -clip-path: margin-box; -clip-path: border-box; -clip-path: padding-box; -clip-path: content-box; - -/* Valores geometricos */ -clip-path: inset(100px 50px); -clip-path: circle(50px at 0 100px); -clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); - -/* Valores Geometricos y de caja combinados */ -clip-path: padding-box circle(50px at 0 100px); - -/* Valores globales */ -clip-path: inherit; -clip-path: initial; -clip-path: unset; -</pre> - -<p>{{cssinfo}}</p> - -<h2 id="Syntax">Syntax</h2> - -<h3 id="Valores">Valores</h3> - -<dl> - <dt><code>url()</code></dt> - <dd>Represents a URL referencing a clip path element.</dd> - <dt> </dt> - <dt><code>inset()</code>, <code>circle()</code>, <code>ellipse()</code>, <code>polygon()</code></dt> - <dd>A {{cssxref("<basic-shape>")}} function. Such a shape will make use of the specified <code><geometry-box></code> to size and position the basic shape. If no geometry box is specified, the <code>border-box</code> will be used as reference box.</dd> - <dt><code><geometry-box></code></dt> - <dd>If specified in combination with a <code><basic-shape></code>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by {{cssxref("border-radius")}}) as clipping path. The geometry box can be one of the following values: - <dl> - <dt><code>fill-box</code></dt> - <dd>Uses the object bounding box as reference box.</dd> - <dt><code>stroke-box</code></dt> - <dd>Uses the stroke bounding box as reference box.</dd> - <dt><code>view-box</code></dt> - <dd>Uses the nearest SVG viewport as reference box. If a {{SVGAttr("viewBox")}} attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the <code>viewBox</code> attribute and the dimension of the reference box is set to the width and height values of the <code>viewBox</code> attribute.</dd> - <dt><code>margin-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> as the reference box.</dd> - <dt><code>border-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">border box</a> as the reference box.</dd> - <dt><code>padding-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">padding box</a> as the reference box.</dd> - <dt><code>content-box</code></dt> - <dd>Uses the <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">content box</a> as the reference box.</dd> - </dl> - </dd> - <dt><code>none</code></dt> - <dd>There is no clipping path created.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Examples">Examples</h2> - -<pre class="brush:css">/* inline SVG */ -.target { - clip-path: url(#c1); -} - -/* external SVG */ -.anothertarget { - clip-path: url(resources.svg#c1); -} - -/* circle */ -.circleClass { - clip-path: circle(15px at 20px 20px); -}</pre> - -<h2 id="Live_sample">Live sample</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg" - alt="MDN logo"> -<svg height="0" width="0"> - <defs> - <clipPath id="cross"> - <rect y="110" x="137" width="90" height="90"/> - <rect x="0" y="110" width="90" height="90"/> - <rect x="137" y="0" width="90" height="90"/> - <rect x="0" y="0" width="90" height="90"/> - </clipPath> - </defs> -</svg> - -<select id="clipPath"> - <option value="none">none</option> - <option value="circle(100px at 110px 100px)">circle</option> - <option value="url(#cross)" selected>cross</option> - <option value="inset(20px round 20px)">inset</option> -</select> -</pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css">#clipped { - margin-bottom: 20px; - clip-path: url(#cross); -} -</pre> - -<div class="hidden"> -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var clipPathSelect = document.getElementById("clipPath"); -clipPathSelect.addEventListener("change", function (evt) { - document.getElementById("clipped").style.clipPath = evt.target.value; -}); -</pre> -</div> - -<h3 id="Result">Result</h3> - -<p>{{EmbedLiveSample("Live_sample", 230, 250)}}</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 Masks", "#the-clip-path", 'clip-path')}}</td> - <td>{{Spec2('CSS Masks')}}</td> - <td>Extends its application to HTML elements</td> - </tr> - <tr> - <td>{{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}</td> - <td>{{Spec2('SVG1.1')}}</td> - <td>Initial definition (applies to SVG elements only)</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("css.properties.clip-path")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/SVG/Attribute/clip-rule">clip-rule</a>, {{cssxref("mask")}}, {{cssxref("filter")}}</li> - <li><a href="https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/">CSS Shapes, clipping and masking – and how to use them</a></li> - <li><a href="/en-US/docs/Applying_SVG_effects_to_HTML_content">Applying SVG effects to HTML content</a></li> - <li>{{SVGAttr("clip-path")}} SVG attribute</li> -</ul> diff --git a/files/es/web/css/media_queries/testing_media_queries/index.html b/files/es/web/css/media_queries/testing_media_queries/index.html deleted file mode 100644 index 81f1e41608..0000000000 --- a/files/es/web/css/media_queries/testing_media_queries/index.html +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: Probando media queries -slug: Web/CSS/Media_Queries/Testing_media_queries -translation_of: Web/CSS/Media_Queries/Testing_media_queries -original_slug: Web/Guide/CSS/probando_media_queries ---- -<p>{{SeeCompatTable}}</p> -<p>El DOM proporciona características que hacen posible probar los resultados de un media query estructuradamente. Esto es hecho usando la interfaz {{domxref("MediaQueryList") }} y sus métodos y propiedades. Una vez que hayas creado el objeto {{domxref("MediaQueryList") }}, puedes revisar el resultado del query o, como alternativa, recibir notificaciones automáticamente cuando el resultado cambie.</p> -<h2 id="Creating_a_media_query_list" name="Creating_a_media_query_list">Creando una media query list</h2> -<p>Before you can evaluate the results of a query, you need to create the {{domxref("MediaQueryList") }} object representing the media query. To do this, use the {{domxref("window.matchMedia") }} method.</p> -<p>For example, if you want to set up a query list that determines whether the device is in landscape or portrait orientation, you can do so like this:</p> -<pre>var mql = window.matchMedia("(orientation: portrait)"); -</pre> -<h2 id="Checking_the_result_of_a_query" name="Checking_the_result_of_a_query">Revisando el resultado de un query</h2> -<p>Once your media query list has been created, you can check the result of the query by looking at the value of its <code>matches</code> property, which reflects the result of the query:</p> -<pre class="brush: js">if (mql.matches) { - /* The device is currently in portrait orientation */ -} else { - /* The device is currently in landscape orientation */ -} -</pre> -<h2 id="Receiving_query_notifications" name="Receiving_query_notifications">Recibiendo notificaciones query</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 listener than to poll the query's result. To do this, you can call the <code>addListener()</code> method on the {{domxref("MediaQueryList") }} object, specifying an observer that implements the {{domxref("MediaQueryListListener") }} interface:</p> -<pre class="brush: js">var mql = window.matchMedia("(orientation: portrait)"); -mql.addListener(handleOrientationChange); -handleOrientationChange(mql); -</pre> -<p>This code creates the orientation testing media query list, <code>mql</code>, then adds a listener to it. Note that after adding the listener, we actually invoke the listener directly once. This lets our listener perform initial adjustments based on the current device orientation (otherwise, if our code assumes the device is in portrait mode but it's actually in landscape mode at startup, we could have inconsistencies).</p> -<p>The <code>handleOrientationChange()</code> method we implement then would look at the result of the query and handle whatever we need to do on an orientation change:</p> -<pre class="brush: js">function handleOrientationChange(mql) { - if (mql.matches) { - /* The device is currently in portrait orientation */ - } else { - /* The device is currently in landscape orientation */ - } -} -</pre> -<h2 id="Ending_query_notifications" name="Ending_query_notifications">Terminando con las notificaciones query </h2> -<p>Cuando ya no vayas a necesitar recibir las notificaciones sobre los cambios de valro de tu media query, simplemente llama al <code>removeListener()</code> en el {{domxref("MediaQueryList") }}:</p> -<pre>mql.removeListener(handleOrientationChange); -</pre> -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidad con los navegadores</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>Soporte básico</td> - <td>9</td> - <td>{{CompatGeckoDesktop("6.0") }}</td> - <td>10</td> - <td>12.1</td> - <td>5.1</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>Soporte básico</td> - <td>3.0</td> - <td>{{CompatUnknown}}</td> - <td>10</td> - <td>12.1</td> - <td>5</td> - </tr> - </tbody> - </table> -</div> -<h2 id="See_also" name="See_also">Ver también</h2> -<ul> - <li><a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">Media queries</a></li> - <li>{{domxref("window.matchMedia()") }}</li> - <li>{{domxref("MediaQueryList") }}</li> - <li>{{domxref("MediaQueryListListener") }}</li> -</ul> diff --git a/files/es/web/html/attributes/autocomplete/index.html b/files/es/web/html/attributes/autocomplete/index.html deleted file mode 100644 index 553e9a293c..0000000000 --- a/files/es/web/html/attributes/autocomplete/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: The HTML autocomplete attribute -slug: Web/HTML/Attributes/autocomplete -translation_of: Web/HTML/Attributes/autocomplete -original_slug: Web/HTML/Atributos/autocomplete ---- -<p>El atributo <code>autocomplete</code> está disponible en varios tipos de {{HTMLElement("input")}} aquellos que toman un texto o valor numérico como entrada. <span class="seoSummary"><code>autocomplete</code> </span> permite a los desarrolladores web especificar qué permisos si los hay <span class="seoSummary">{{Glossary("user agent")}} </span> debe proporcionar asistencia automatizada para completar los valores de los campos de formulario, así como una guía para el navegador en cuanto al tipo de información que se espera en el campo.</p> - -<p> </p> - -<p>Los valores sugeridos generalmente depende del navegador. Normalmente, provienen de valores ingresados por el usuario, pero también pueden provenir de valores preconfigurados. Por ejemplo, un navegador puede permitir que el usuario guarde su nombre, dirección, número de teléfono y direcciones de correo electrónico para autocompletar así como también datos de tarjetas de crédito.</p> - -<p>Si un elemento {{HTMLElement("input")}} no tiene el atributo <code>autocomplete</code> , entonces los navegadores usan el atributo <code>autocomplete</code> del {{HTMLElement("form")}} que lo contiene. En otras palabras, el {{HTMLElement("form")}} del que el {{HTMLElement("input")}} desciende. También puede ser especificado en el atributo {{htmlattrxref("form", "input")}} del {{HTMLElement("input")}} en cuestión.</p> - -<p>Para más información vea el atributo {{htmlattrxref("autocomplete", "form")}} del elemento {{HTMLElement("form")}}</p> - -<div class="blockIndicator note"> -<p>Para proveer el autocompletado, el navegador necesita del los elementos <code><input></code>:</p> - -<ol> - <li>Que tengan <code>name</code> y/o <code>id</code></li> - <li>Pertenezcan a un elemento <code><form></code></li> - <li>Que el formulario tenga un botón {{HTMLElement("input/submit", "submit")}}</li> -</ol> -</div> - -<h2 id="Valores">Valores</h2> - -<dl> - <dt><code>"off"</code></dt> - <dd>The browser is not permitted to automatically enter or select a value for this field. It is possible that the document or application provides its own autocomplete feature, or that security concerns require that the field's value not be automatically entered. - <div class="note"><strong>Note:</strong> In most modern browsers, setting <code>autocomplete</code> to <code>"off"</code> will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See <a href="/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields">the autocomplete attribute and login fields</a>.</div> - </dd> - <dt><code>"on"</code></dt> - <dd>The browser is allowed to automatically complete the input. No guidance is provided as to the type of data expected in the field, so the browser may use its own judgement.</dd> - <dt><code>"name"</code></dt> - <dd>The field expects the value to be a person's full name. Using <code>"name"</code> rather than breaking the name down into its components is generally preferred because it avoids dealing with the wide diversity of human names and how they are structured; however, you can use the following <code>autocomplete</code> values if you do need to break the name down into its components: - <dl> - <dt><code>"honorific-prefix"</code></dt> - <dd>The prefix or title, such as "Mrs.", "Mr.", "Miss", "Ms.", "Dr.", or "Mlle.".</dd> - <dt><code>"given-name"</code></dt> - <dd>The given (or "first") name.</dd> - <dt><code>"additional-name"</code></dt> - <dd>The middle name.</dd> - <dt><code>"family-name"</code></dt> - <dd>The family (or "last") name.</dd> - <dt><code>"honorific-suffix"</code></dt> - <dd>The suffix, such as "Jr.", "B.Sc.", "PhD.", "MBASW", or "IV".</dd> - <dt><code>"nickname"</code></dt> - <dd>A nickname or handle.</dd> - </dl> - </dd> - <dt><code>"email"</code></dt> - <dd>An email address.</dd> - <dt><code>"username"</code></dt> - <dd>A username or account name.</dd> - <dt><code>"new-password"</code></dt> - <dd>A new password. When creating a new account or changing passwords, this is the "Enter your new password" field, as opposed to any "Enter your current password" field that might be present. This may be used by the browser both to avoid accidentally filling in an existing password and to offer assistance in creating a secure password.</dd> - <dt><code>"current-password"</code></dt> - <dd>The user's current password.</dd> - <dt><code>"organization-title"</code></dt> - <dd>A job title, or the title a person has within an organization, such as "Senior Technical Writer", "President", or "Assistant Troop Leader".</dd> - <dt><code>"organization"</code></dt> - <dd>A company or organization name, such as "Acme Widget Company" or "Girl Scouts of America".</dd> - <dt><code>"street-address"</code></dt> - <dd>A street address. This can be multiple lines of text, and should fully identify the location of the address within its second administrative level (typically a city or town), but should not include the city name, ZIP or postal code, or country name.</dd> - <dt><code>"address-line1"</code>, <code>"address-line2"</code>, <code>"address-line3"</code></dt> - <dd>Each individual line of the street address. These should only be present if the <code>"street-address"</code> is also present.</dd> - <dt><code>"address-level4"</code></dt> - <dd>The finest-grained {{anch("Administrative levels in addresses", "administrative level")}}, in addresses which have four levels.</dd> - <dt><code>"address-level3"</code></dt> - <dd>The third {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least three administrative levels.</dd> - <dt><code>"address-level2"</code></dt> - <dd>The second {{anch("Administrative levels in addresses", "administrative level")}}, in addresses with at least two of them. In countries with two administrative levels, this would typically be the city, town, village, or other locality in which the address is located.</dd> - <dt><code>"address-level1"</code></dt> - <dd>The first {{anch("Administrative levels in addresses", "administrative level")}} in the address. This is typically the province in which the address is located. In the United States, this would be the state. In Switzerland, the canton. In the United Kingdom, the post town.</dd> - <dt><code>"country"</code></dt> - <dd>A country code.</dd> - <dt><code>"country-name"</code></dt> - <dd>A country name.</dd> - <dt><code>"postal-code"</code></dt> - <dd>A postal code (in the United States, this is the ZIP code).</dd> - <dt><code>"cc-name"</code></dt> - <dd>The full name as printed on or associated with a payment instrument such as a credit card. Using a full name field is preferred, typically, over breaking the name into pieces.</dd> - <dt><code>"cc-given-name"</code></dt> - <dd>A given (first) name as given on a payment instrument like a credit card.</dd> - <dt><code>"cc-additional-name"</code></dt> - <dd>A middle name as given on a payment instrument or credit card.</dd> - <dt><code>"cc-family-name"</code></dt> - <dd>A family name, as given on a credit card.</dd> - <dt><code>"cc-number"</code></dt> - <dd>A credit card number or other number identifying a payment method, such as an account number.</dd> - <dt><code>"cc-exp"</code></dt> - <dd>A payment method expiration date, typically in the form "MM/YY" or "MM/YYYY".</dd> - <dt><code>"cc-exp-month"</code></dt> - <dd>The month in which the payment method expires.</dd> - <dt><code>"cc-exp-year"</code></dt> - <dd>The year in which the payment method expires.</dd> - <dt><code>"cc-csc"</code></dt> - <dd>The security code for the payment instrument; on credit cards, this is the 3-digit verification number on the back of the card.</dd> - <dt><code>"cc-type"</code></dt> - <dd>The type of payment instrument (such as "Visa" or "Master Card").</dd> - <dt><code>"transaction-currency"</code></dt> - <dd>The currency in which the transaction is to take place.</dd> - <dt><code>"transaction-amount"</code></dt> - <dd>The amount, given in the currency specified by <code>"transaction-currency"</code>, of the transaction, for a payment form.</dd> - <dt><code>"language"</code></dt> - <dd>A preferred language, given as a valid <a href="https://en.wikipedia.org/wiki/IETF_language_tag">BCP 47 language tag</a>.</dd> - <dt><code>"bday"</code></dt> - <dd>A birth date, as a full date.</dd> - <dt><code>"bday-day"</code></dt> - <dd>The day of the month of a birth date.</dd> - <dt><code>"bday-month"</code></dt> - <dd>The month of the year of a birth date.</dd> - <dt><code>"bday-year"</code></dt> - <dd>The year of a birth date.</dd> - <dt><code>"sex"</code></dt> - <dd>A gender identity (such as "Female", "Fa'afafine", "Male"), as freeform text without newlines.</dd> - <dt><code>"tel"</code></dt> - <dd>A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields: - <dl> - <dt><code>"tel-country-code"</code></dt> - <dd>The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.</dd> - <dt><code>"tel-national"</code></dt> - <dd>The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".</dd> - <dt><code>"tel-area-code"</code></dt> - <dd>The area code, with any country-internal prefix applied if appropriate.</dd> - <dt><code>"tel-local"</code></dt> - <dd>The phone number without the country or area code. This can be split further into two parts, for phone numbers which have an exchange number and then a number within the exchange. For the phone number "555-6502", use <code>"tel-local-prefix"</code> for "555" and <code>"tel-local-suffix"</code> for "6502".</dd> - </dl> - </dd> - <dt><code>"tel-extension"</code></dt> - <dd>A telephone extension code within the phone number, such as a room or suite number in a hotel or an office extension in a company.</dd> - <dt><code>"impp"</code></dt> - <dd>A URL for an instant messaging protocol endpoint, such as "xmpp:username@example.net".</dd> - <dt><code>"url"</code></dt> - <dd>A URL, such as a home page or company web site address as appropriate given the context of the other fields in the form.</dd> - <dt><code>"photo"</code></dt> - <dd>The URL of an image representing the person, company, or contact information given in the other fields in the form.</dd> -</dl> - -<p>See the <a href="https://html.spec.whatwg.org/multipage/forms.html#autofill">WHATWG Standard</a> for more detailed information.</p> - -<div class="note"> -<p><strong>Note:</strong> The <code>autocomplete</code> attribute also controls whether Firefox will — unlike other browsers — <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">persist the dynamic disabled state and (if applicable) dynamic checkedness</a> of an <code><input></code> across page loads. The persistence feature is enabled by default. Setting the value of the <code>autocomplete</code> attribute to <code>off</code> disables this feature. This works even when the <code>autocomplete</code> attribute would normally not apply to the <code><input></code> by virtue of its <code>type</code>. See {{bug(654072)}}.</p> -</div> - -<h2 id="Administrative_levels_in_addresses">Administrative levels in addresses</h2> - -<p>The four administrative level fields (<code>"address-level1"</code> through <code>"address-level4"</code>) describe the address in terms of increasing levels of precision within the country in which the address is located. Each country has its own system of administrative levels, and may arrange the levels in different orders when addresses are written.</p> - -<p><code>"address-level1"</code> always represents the broadest administrative division; it is the least-specific portion of the address short of the country name.</p> - -<h3 id="Form_layout_flexibility">Form layout flexibility</h3> - -<p>Given that different countries write their address in different ways, with each field in different places within the address, and even different sets and numbers of fields entirely, it can be helpful if, when possible, your site is able to switch to the layout expected by your users when presenting an address entry form, given the country the address is located within.</p> - -<h3 id="Variations">Variations</h3> - -<p>The way each administrative level is used will vary from country to country. Below are some examples; this is not meant to be an exhaustive list.</p> - -<h4 id="United_States">United States</h4> - -<p>A typical home address within the United States looks like this:</p> - -<p>432 Anywhere St<br> - Exampleville CA 95555</p> - -<p>In the United States, the least-specific portion of the address is the state, in this case "CA" (the official US Postal Service shorthand for "California"). Thus <code>"address-level1"</code> is the state, or "CA" in this case.</p> - -<p>The second-least specific portion of the address is the city or town name, so <code>"address-level2"</code> is "Exampleville" in this example address.</p> - -<p>United States addresses do not use levels 3 and up.</p> - -<h4 id="United_Kingdom">United Kingdom</h4> - -<p>The UK uses one or two address levels, depending on the address. These are the post town and, in some instances, the locality.</p> - -<h4 id="China">China</h4> - -<p>China can use as many as three administrative levels: the province, the city, and the district.</p> diff --git a/files/es/web/html/element/shadow/index.html b/files/es/web/html/element/shadow/index.html deleted file mode 100644 index 7c5720124f..0000000000 --- a/files/es/web/html/element/shadow/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: <shadow> -slug: Web/HTML/Element/shadow -translation_of: Web/HTML/Element/shadow -original_slug: Web/HTML/Elemento/Shadow ---- -<p>{{obsolete_header}}</p> - -<p><span class="seoSummary">El <strong>HTML <code><shadow></code> element</strong>—es una parte absoluta de la suite tecnológica de <a href="/en-US/docs/Web/Web_Components">Web Components</a> —estaba destinado a ser utilizado como un shadow DOM {{glossary("insertion point")}}. Es posible que lo hayas usado si has creado varias root shadow bajo un shadow host. No es útil en HTML ordinario.</span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Content categories</a></th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Transparent_content_model">Transparent content</a>.</td> - </tr> - <tr> - <th scope="row">Permitted content</th> - <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Flow content</a>.</td> - </tr> - <tr> - <th scope="row">Tag omission</th> - <td>{{no_tag_omission}}</td> - </tr> - <tr> - <th scope="row">Permitted parents</th> - <td>Any element that accepts flow content.</td> - </tr> - <tr> - <th scope="row">Permitted ARIA roles</th> - <td>None</td> - </tr> - <tr> - <th scope="row">DOM interface</th> - <td>{{domxref("HTMLShadowElement")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Attributes">Attributes</h2> - -<p>This element includes the <a href="/en-US/docs/Web/HTML/Global_attributes">global attributes</a>.</p> - -<h2 id="Example">Example</h2> - -<p>Aquí está un ejemplo simple usando el <code><shadow></code> element. Es un archivo HTML con todo lo necesario en él.</p> - -<div class="note"> -<p><strong>Note:</strong> This is an experimental technology. For this code to work, the browser you display it in must support Web Components. See <a href="/en-US/docs/Web/Web_Components#Enabling_Web_Components_in_Firefox">Enabling Web Components in Firefox</a>.</p> -</div> - -<pre class="brush: html"><html> - <head></head> - <body> - - <!-- This <div> will hold the shadow roots. --> - <div> - <!-- This heading will not be displayed --> - <h4>My Original Heading</h4> - </div> - - <script> - // Get the <div> above with its content - var origContent = document.querySelector('div'); - // Create the first shadow root - var shadowroot1 = origContent.createShadowRoot(); - // Create the second shadow root - var shadowroot2 = origContent.createShadowRoot(); - - // Insert something into the older shadow root - shadowroot1.innerHTML = - '<p>Older shadow root inserted by - &lt;shadow&gt;</p>'; - // Insert into younger shadow root, including <shadow>. - // The previous markup will not be displayed unless - // <shadow> is used below. - shadowroot2.innerHTML = - '<shadow></shadow> <p>Younger shadow - root, displayed because it is the youngest.</p>'; - </script> - - </body> -</html> -</pre> - -<p>If you display this in a web browser it should look like the following.</p> - -<p><img alt="shadow example" src="https://mdn.mozillademos.org/files/10083/shadow-example.png" style="height: 343px; width: 641px;"></p> - -<h2 id="Specifications">Specifications</h2> - -<p>This element is no longer defined by any specifications.</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 (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>35</td> - <td>{{CompatGeckoDesktop("28")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>26</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 Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>37</td> - <td>{{CompatGeckoMobile("28")}}<sup>[1]</sup></td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] If Shadow DOM is not enabled in Firefox, <code><shadow></code> elements will behave like {{domxref("HTMLUnknownElement")}}. Shadow DOM was first implemented in Firefox 33 and is behind a preference, <code>dom.webcomponents.enabled</code>, which is disabled by default.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/Web_Components">Web Components</a></li> - <li>{{HTMLElement("content")}}, {{HTMLElement("slot")}}, {{HTMLElement("template")}}, {{HTMLElement("element")}}</li> -</ul> - -<div>{{HTMLRef}}</div> diff --git a/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html b/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html deleted file mode 100644 index e1e70a7747..0000000000 --- a/files/es/web/javascript/reference/global_objects/encodeuricomponent/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: encodeURIComponent -slug: Web/JavaScript/Reference/Global_Objects/encodeURIComponent -tags: - - JavaScript - - URI -translation_of: Web/JavaScript/Reference/Global_Objects/encodeURIComponent -original_slug: Web/JavaScript/Referencia/Objetos_globales/encodeURIComponent ---- -<div>{{jsSidebar("Objects")}}</div> - -<h2 id="Summary" name="Summary">Resumen</h2> - -<p>El método <strong>encodeURIComponent()</strong> codifica un componente URI (Identificador Uniforme de Recursos) al reemplazar cada instancia de ciertos caracteres por una, dos, tres o cuatro secuencias de escape que representan la codificación UTF-8 del carácter (solo serán cuatro secuencias de escape para caracteres compuestos por dos carácteres "sustitutos").</p> - -<h2 id="Syntax" name="Syntax">Sintaxis</h2> - -<pre class="syntaxbox">encodeURIComponent(str);</pre> - -<h3 id="Parameters" name="Parameters">Parámetros</h3> - -<dl> - <dt><code>str</code></dt> - <dd>Cadena. Un componente de un URI.</dd> -</dl> - -<h2 id="Description" name="Description">Descripción</h2> - -<p><code>encodeURIComponent</code> escapes all characters except the following: alphabetic, decimal digits, <code>- _ . ! ~ * ' ( )</code></p> - -<p>Note that an {{jsxref("Objetos_globales/URIError", "URIError")}} will be thrown if one attempts to encode a surrogate which is not part of a high-low pair, e.g.,</p> - -<pre class="brush: js">// high-low pair ok -alert(encodeURIComponent('\uD800\uDFFF')); - -// lone high surrogate throws "URIError: malformed URI sequence" -alert(encodeURIComponent('\uD800')); - -// lone low surrogate throws "URIError: malformed URI sequence" -alert(encodeURIComponent('\uDFFF')); -</pre> - -<p>To avoid unexpected requests to the server, you should call <code>encodeURIComponent</code> on any user-entered parameters that will be passed as part of a URI. For example, a user could type "<code>Thyme &time=again</code>" for a variable <code>comment</code>. Not using <code>encodeURIComponent</code> on this variable will give <code>comment=Thyme%20&time=again</code>. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST <code>comment</code> key equal to "<code>Thyme &time=again</code>", you have two POST keys, one equal to "<code>Thyme </code>" and another (<code>time</code>) equal to <code>again</code>.</p> - -<p>For <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#application/x-www-form-urlencoded-encoding-algorithm"><code>application/x-www-form-urlencoded</code></a> (POST), spaces are to be replaced by '+', so one may wish to follow a <code>encodeURIComponent</code> replacement with an additional replacement of "%20" with "+".</p> - -<p>To be more stringent in adhering to <a class="external" href="http://tools.ietf.org/html/rfc3986">RFC 3986</a> (which reserves !, ', (, ), and *), even though these characters have no formalized URI delimiting uses, the following can be safely used:</p> - -<pre class="brush: js">function fixedEncodeURIComponent (str) { - return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A"); -} -</pre> - -<h2 id="See_also" name="See_also">Examples</h2> - -<p>The following example provides the special encoding required within UTF-8 <code>Content-Disposition</code> and <code>Link</code> server response header parameters (e.g., UTF-8 filenames):</p> - -<pre class="brush: js">var fileName = 'my file(2).txt'; -var header = "Content-Disposition: attachment; filename*=UTF-8''" + encodeRFC5987ValueChars(fileName); - -console.log(header); -// logs "Content-Disposition: attachment; filename*=UTF-8''my%20file%282%29.txt" - - -function encodeRFC5987ValueChars (str) { - return encodeURIComponent(str). - // Note that although RFC3986 reserves "!", RFC5987 does not, - // so we do not need to escape it - replace(/['()]/g, escape). // i.e., %27 %28 %29 - replace(/\*/g, '%2A'). - // The following are not required for percent-encoding per RFC5987, - // so we can allow for a little better readability over the wire: |`^ - replace(/%(?:7C|60|5E)/g, unescape); -} -</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>ECMAScript 3rd Edition.</td> - <td>Standard</td> - <td>Initial definition.</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-15.1.3.4', 'encodeURIComponent')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-encodeuricomponent-uricomponent', 'encodeURIComponent')}}</td> - <td>{{Spec2('ES6')}}</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>{{ 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>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> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_Also" name="See_Also">See also</h2> - -<ul> - <li>{{jsxref("decodeURI")}}</li> - <li>{{jsxref("encodeURI")}}</li> - <li>{{jsxref("decodeURIComponent")}}</li> -</ul> diff --git a/files/es/web/javascript/reference/statements/with/index.html b/files/es/web/javascript/reference/statements/with/index.html deleted file mode 100644 index 9ad9f256c4..0000000000 --- a/files/es/web/javascript/reference/statements/with/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: with -slug: Web/JavaScript/Reference/Statements/with -translation_of: Web/JavaScript/Reference/Statements/with -original_slug: Web/JavaScript/Referencia/Sentencias/with ---- -<div class="warning">El uso de la declaración no es recomendado, ya que puede ser el origen de los errores de confusión y problemas de compatibilidad. See the "Ambiguity Con" paragraph in the "Description" section below for details.</div> - -<div>{{jsSidebar("Statements")}}</div> - -<p>La <strong>sentencia with</strong> extiende el alcance de una cadena con la declaración.</p> - -<h2 id="Sintaxis">Sintaxis</h2> - -<pre class="syntaxbox">with (expresión) { - <em>declaración</em> -} -</pre> - -<dl> - <dt><font face="Consolas, Liberation Mono, Courier, monospace">expresión</font></dt> - <dd>Añade la expresión dada a la declaración. Los parentesis alrededor de la expresión son necesarios.</dd> - <dt><code>declaración</code></dt> - <dd>Se puede ejecutar cualquier declaración. Para ejecutar varias declaraciónes, utilizar una declaración de bloque ({ ... }) para agrupar esas declaraciónes.</dd> -</dl> - -<h2 id="Descripción">Descripción</h2> - -<p>JavaScript looks up an unqualified name by searching a scope chain associated with the execution context of the script or function containing that unqualified name. The 'with' statement adds the given object to the head of this scope chain during the evaluation of its statement body. If an unqualified name used in the body matches a property in the scope chain, then the name is bound to the property and the object containing the property. Otherwise a {{jsxref("ReferenceError")}} is thrown.</p> - -<div class="note">Using <code>with</code> is not recommended, and is forbidden in ECMAScript 5 <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>. The recommended alternative is to assign the object whose properties you want to access to a temporary variable.</div> - -<h3 id="Performance_pro_contra">Performance pro & contra</h3> - -<p><strong>Pro:</strong> The <code>with</code> statement can help reduce file size by reducing the need to repeat a lengthy object reference without performance penalty. The scope chain change required by 'with' is not computationally expensive. Use of 'with' will relieve the interpreter of parsing repeated object references. Note, however, that in many cases this benefit can be achieved by using a temporary variable to store a reference to the desired object.</p> - -<p><strong>Contra:</strong> The <code>with</code> statement forces the specified object to be searched first for all name lookups. Therefore all identifiers that aren't members of the specified object will be found more slowly in a 'with' block. Where performance is important, 'with' should only be used to encompass code blocks that access members of the specified object.</p> - -<h3 id="Ambiguity_contra">Ambiguity contra</h3> - -<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p> - -<pre class="brush: js">function f(x, o) { - with (o) - print(x); -}</pre> - -<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p> - -<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something else than a plain object. Consider this example:</p> - -<div> -<pre class="brush:js">function f(foo, values) { - with (foo) { - console.log(values) - } -} -</pre> - -<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p> -</div> - -<h2 id="Examples">Examples</h2> - -<h3 id="Using_with">Using <code>with</code></h3> - -<p>The following <code>with</code> statement specifies that the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> object is the default object. The statements following the <code>with</code> statement refer to the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a> property and the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> and <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> methods, without specifying an object. JavaScript assumes the <code>Math</code> object for these references.</p> - -<pre class="brush:js">var a, x, y; -var r = 10; - -with (Math) { - a = PI * r * r; - x = r * cos(PI); - y = r * sin(PI / 2); -}</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('ES6', '#sec-with-statement', 'with statement')}}</td> - <td>{{Spec2('ES6')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td>Now forbidden in strict mode.</td> - </tr> - <tr> - <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td> - <td>{{Spec2('ES3')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td> - <td>{{Spec2('ES1')}}</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>{{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>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> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{jsxref("Statements/block", "block")}}</li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li> -</ul> diff --git a/files/es/web/mathml/authoring/index.html b/files/es/web/mathml/authoring/index.html deleted file mode 100644 index f9c30ff92c..0000000000 --- a/files/es/web/mathml/authoring/index.html +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: Redacción de MathML -slug: Web/MathML/Authoring -translation_of: Web/MathML/Authoring ---- -<p>Este artículo explica como redactar funciones matemáticas utilizando el lenguaje MathML. Al igual que HTML, MathML puede describirse con etiquetas y atributos. HTML puede volverse interminable cuando tu documento contiene estructuras avanzadas como listas o tablas pero afortunadamente existen varios generadores, desde simple notaciones, editores WYSIWYG y otros Sistemas de Administración de Contenido (CMS) utilizados para la creación de páginas web.</p> - -<p>Las notaciones Matemáticas son aún más complejas con estructuras que contienen fracciones, raíces cuadradas o matrices que seguramente requerirán sus propias etiquetas. Como consecuencia, las buenas herramientas de redacción de MathML son importantes y más adelante describimos algunas opciones. En particular, el équipo MathML de Mozilla ha creado <a href="https://github.com/fred-wang/TeXZilla/">TeXZilla</a>, un convertor de LaTeX a MathML compatible con Unicode, para ser utilizado en muchos scenari descrito ahí. Desde luego, la lista no es de ninguna manera definitiva y estás invitado a revisar la <a class="external" href="https://www.w3.org/Math/Software/">Lista de Software MathML de W3C</a> donde puedes encontrar diferentes herramientas.</p> - -<p>Hay que señalar que por diseño, MathML está bien integrado en HTML5 y particularmente puedes utilizar las características Web comunes como CSS, DOM, Javascript o SVG. Esto está fuera del ámbito de este artículo pero cualquiera con conocimientos básicos de lenguajes Web será capaz de combinar fácilmente estas características con MathML. Revisa <a href="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents" title="/en-US/docs/Mozilla/MathML_Project#Sample_MathML_Documents">nuestros demos</a> y <a href="/en-US/docs/Web/MathML" title="en/MathML/Element">referencias de MathML</a> para más detalles.</p> - -<h2 id="Fundamentos">Fundamentos</h2> - -<h4 id="Example_in_HTML5_(text/html)" name="Example_in_HTML5_(text/html)">Utilizar MathML en páginas HTML</h4> - -<p>Puedes utilizar MathML dentro de un documento HTML5:</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> -<head> - <title>MathML in HTML5</title> -</head> -<body> - - <h1>MathML in HTML5</h1> - - <p> - Square root of two: - <math> - <msqrt> - <mn>2</mn> - </msqrt> - </math> - </p> - -</body> -</html> </pre> - -<p>Content MathML no esta soportado por el navegador. Es recomendable convertir tu content MathML markup en Presentation MathML antes de publicarlo, por ejemplo con la ayuda de la hoja de calculo <a class="external external-icon" href="https://code.google.com/p/web-xslt/source/browse/trunk/#trunk/ctop">ctop.xsl</a> . Las herramientas mencionadas en esta pagina generan Presentation MathML.</p> - -<h4 id="sect1"> </h4> - -<h4 id="Para_navegadores_sin_soporte_a_MathML">Para navegadores sin soporte a MathML</h4> - -<p>Desafortunadamente, algunos navegadores no son capaces de renderizar ecuaciones MathML o tienen un soporte limitado. Por lo tanto necesitará usar MathML polyfill para proveer el renderizado. Si necesita solo construcciones matematicas básicas tales como las utilizadas en esta wiki de MDN entonces una pequeña hoja de cálculo <a href="https://github.com/fred-wang/mathml.css">mathml.css</a> podria ser suficiente. Para usarlo, solo inserta una linea en el header de tu documento:</p> - -<pre class="brush: html language-html"><script src="http://fred-wang.github.io/mathml.css/mspace.js"></script></pre> - -<p>If you need more complex constructions, you might instead consider using the heavier <a href="https://www.mathjax.org" title="http://www.mathjax.org">MathJax</a> library as a MathML polyfill:</p> - -<pre class="brush: html language-html"><script src="http://fred-wang.github.io/mathjax.js/mpadded.js"></script></pre> - -<p>Note that these two scripts perform feature detection of the <a href="/en-US/docs/Web/MathML/Element/mspace">mspace</a> or <a href="/en-US/docs/Web/MathML/Element/mpadded">mpadded</a> elements (see the browser compatibility table on these pages). If you don't want to use this link to GitHub but instead to integrate these polyfills or others in your own project, you might need the detection scripts to verify the level of MathML support. For example the following function verifies the MathML support by testing the mspace element (you may replace <code>mspace</code> with <code>mpadded</code>):</p> - -<pre class="brush: js language-js"> function hasMathMLSupport() { - var div = document.createElement("div"), box; - div.innerHTML = "<math><mspace height='23px' width='77px'/></math>"; - document.body.appendChild(div); - box = div.firstChild.firstChild.getBoundingClientRect(); - document.body.removeChild(div); - return Math.abs(box.height - 23) <= 1 && Math.abs(box.width - 77) <= 1; -}</pre> - -<p>Alternatively, the following UA string sniffing will allow to detect the rendering engines with native MathML support (Gecko and WebKit). Note that UA string sniffing is not the most reliable method and might break from version to version:</p> - -<pre class="brush: js language-js">var ua = navigator.userAgent; -var isGecko = ua.indexOf("Gecko") > -1 && ua.indexOf("KHTML") === -1 && ua.indexOf('Trident') === -1; -var isWebKit = ua.indexOf('AppleWebKit') > -1 && ua.indexOf('Chrome') === -1;</pre> - -<h4 id="sect2"> </h4> - -<p>Mathematical fonts</p> - -<p><strong>Note: browsers can only use a limited set of mathematical fonts to draw stretchy MathML operators. However, implementation of the OpenType MATH table is in progress in Gecko & WebKit. This will provide a generic support for mathematical fonts and simplify the settings described in this section.</strong></p> - -<p>To get a good mathematical rendering in browsers, some <a href="/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MathML fonts</a> are required. It's a good idea to provide to your visitors a link to the <a href="/docs/Mozilla/MathML_Project/Fonts" title="/docs/Mozilla/MathML_Project/Fonts">MDN page that explains how to install MathML fonts</a>. Alternatively, you can just make them available as Web fonts. You can get these fonts from the <a href="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/" title="https://addons.mozilla.org/en-US/firefox/addon/mathml-fonts/">MathML-fonts add-on</a> ; the xpi is just a zip archive that you can fetch and extract for example with the following command:</p> - -<pre class="brush: bash language-html">wget https://addons.mozilla.org/firefox/downloads/latest/367848/addon-367848-latest.xpi -O mathml-fonts.zip; \ -unzip mathml-fonts.zip -d mathml-fonts</pre> - -<p>Then copy the <code>mathml-fonts/resource/</code> directory somewhere on your Web site and ensure that the woff files are served with the correct MIME type. Finally, include the <code>mathml-fonts/resource/mathml.css</code> style sheet in your Web pages, for example by adding the following rule to the default style sheet of your Web site:</p> - -<pre class="brush: css language-css">@import url('/path/to/resource/mathml.css');</pre> - -<p><span>You then need to modify the font-family on the <math> elements and</span>, for Gecko, the on ::-moz-math-stretchy pseudo element too. For example to use STIX fonts:</p> - -<pre class="language-html"><span class="brush: css"><span class="brush: css">math { - font-family: STIXGeneral; -} - -</span>::-moz-math-stretchy { - font-family: STIXNonUnicode, STIXSizeOneSym, STIXSize1, STIXGeneral; -} -</span></pre> - -<p><span>Try the <a href="/docs/Mozilla/MathML_Project/MathML_Torture_Test" title="/docs/Mozilla/MathML_Project/MathML_Torture_Test">MathML torture test</a></span> to compare the rendering of various fonts and the CSS rules to select them.</p> - -<h4 id="Utilizar_MathML_en_documentos_XML_(XHTML_EPUB_etc.)">Utilizar MathML en documentos XML (XHTML, EPUB, etc.)</h4> - -<p>Si por alguna razón necesitas utilizar MathML en documentos XML, asegúrate de cumplir con los requisitos habituales: documentos bien realizados, el uso correcto de la especificación MIME, el prefijo MathML <code>"http://www.w3.org/1998/Math/MathML"</code> en la raíz<code> <math></code>. Por ejemplo, la versión XHTML del ejemplo anterior luce de esta manera:<br> - </p> - -<pre class="brush: xml"><?xml version="1.0" encoding="UTF-8"?> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" - "http://www.w3.org/Math/DTD/mathml2/xhtml-math11-f.dtd"> -<html xmlns="http://www.w3.org/1999/xhtml"> -<head> - <title>XHTML+MathML Example</title> -</head> -<body> - -<h1>XHTML+MathML Example</h1> - - <p> - Square root of two: - <math xmlns="http://www.w3.org/1998/Math/MathML"> - <msqrt> - <mn>2</mn> - </msqrt> - </math> - </p> - -</body> -</html> </pre> - -<p>Note that if you use MathML as a standalone .mml or .svg documents or inside an EPUB book, it may not always be possible to use MathJax as a polyfill for rendering engines without MathML support. Hence whether MathML can be handled will vary according to the tools used to read these documents.</p> - -<h4 id="Utilizar_MathML_en_correos_electrónicos">Utilizar MathML en correos electrónicos</h4> - -<p>Los clientes de correos modernos pueden enviar y recibir correos electrónicos en el formato HTML5 y por lo tanto pueden manejar expresiones de tipo MathML. Asegúrate de tener las opciones de "Enviar como HTML" y "Ver como HTML" habilitadas. En Thunderbird, puedes utilizar el comando "Insertar HTML" para pegar tu código HTML+MathML. <a href="http://disruptive-innovations.com/zoo/MathBird/" title="http://disruptive-innovations.com/zoo/MathBird/">MathBird</a> es un complemento conveniente de Thunderbird para insertar este tipo de expresiones MathML utilizando la sintaxis AsciiMath.<br> - <br> - De nuevo, la forma en como MathML es manejada y la calidad de cómo se muestran estas expresiones <a href="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121" title="http://www.maths-informatique-jeux.com/blog/frederic/?post/2012/11/14/Writing-mathematics-in-emails#c121">depende del cliente de correo electrónico</a>. Aún si tu navegador es compatible con MathML, tu servicio de correo electrónico puede evitar que envíes o recibas correos con expresiones MathML.</p> - -<h2 id="Conversion_from_a_Simple_Syntax">Conversion from a Simple Syntax</h2> - -<p>There are many simple notations (e.g. wiki or markdown syntaxes) to generate HTML pages. The same is true for MathML: for example ASCII syntaxes as used in calculators or the more powerful LaTeX language, very popular among the scientific community. In this section, we present some of these tools to convert from a simple syntax to MathML.</p> - -<ul> - <li>pros: - <ul> - <li>Writing mathematical expressions may only require a standard text editor.</li> - <li>Many tools are available, some of them are compatible with the classical LaTeX-to-pdf workflow.</li> - <li>This gives access to advanced features of LaTeX like macros.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This may be harder to use: people must learn a syntax, typos in the code may easily lead to parsing or rendering errors etc</li> - <li>The interface is not user-friendly: only code editor without immediate display of the mathematical expression.</li> - <li>None of the syntax has been standardized, making cross-compatibility between converters difficult. Even the popular LaTeX language keeps having new packages added.</li> - </ul> - </li> -</ul> - -<h3 id="Client-side_Conversion">Client-side Conversion</h3> - -<p>In a Web environment, the most obvious method to convert a simple syntax into a DOM tree is to use Javascript and of course many libraries have been developed to perform that task.</p> - -<ul> - <li>pros: - <ul> - <li>This is very easy setup: only a few Javascript and CSS files to upload and/or a link to add to your document header.</li> - <li>This is a pure Web-based solution: everything is done by the browsers and no other programs must be installed or compiled.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This won't work if the visitor has Javascript disabled.</li> - <li>The MathML code is not exposed to Web crawlers (e.g. those of math search engines or feed aggregators). In particular, your content won't show up properly on Planet.</li> - <li>The conversion must be done at each page load, may be slow and may conflict with the HTML parsing (e.g. "<" for tags or "$" for money amounts)</li> - <li>You may need to synchronize the Javascript converter with other Javascript programs on your page.</li> - </ul> - </li> -</ul> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has an <a href="https://github.com/fred-wang/x-tex"><x-tex></a> custom element, that can be used to write things like</p> - -<pre class="language-html"><span class="brush: html"><<span class="start-tag">x-tex</span>></span><span>\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1</span><span class="brush: html"></<span class="end-tag">x-tex</span>></span></pre> - -<p>and get it automatically converted into MathML. This is still a work-in-progress, but could be improved in the future thanks to Web Components and shadow DOM. Alternatively, you can use the more traditional <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#parsing-tex-expressions-in-your-web-page">Javascript parsing of expressions at load time</a> as all the other tools in this section do.</p> - -<p>One simple client-side conversion tools is <a href="http://www1.chapman.edu/%7Ejipsen/mathml/asciimath.html" title="http://www1.chapman.edu/~jipsen/mathml/asciimath.html">ASCIIMathML</a>. Just download the <a href="https://mathcs.chapman.edu/%7Ejipsen/mathml/ASCIIMathML.js" title="http://mathcs.chapman.edu/~jipsen/mathml/ASCIIMathML.js">ASCIIMathML.js</a> script and copy it to your Web site. Then on your Web pages, add a <code><script></code> tag to load ASCIIMathML and the mathematical expressions delimited by <code>`</code> (grave accent) will be automatically parsed and converted to MathML:</p> - -<pre class="brush: html language-html"><html> -<head> -... -<script type="text/javascript" src="ASCIIMathML.js"></script> -... -</head> -<body> -... -<p>blah blah `x^2 + y^2 = r^2` blah ... -...</pre> - -<p><a href="https://math.etsu.edu/LaTeXMathML/" title="http://math.etsu.edu/LaTeXMathML/">LaTeXMathML</a> is a similar script that allows to parse more LaTeX commands. The installation is similar: copy <a href="https://math.etsu.edu/LaTeXMathML/LaTeXMathML.js" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.js">LaTeXMathML.js</a> and <a href="https://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css" title="http://math.etsu.edu/LaTeXMathML/LaTeXMathML.standardarticle.css">LaTeXMathML.standardarticle.css</a>, add links in the header of your document and the LaTeX content of your Web page marked by the "LaTeX" class will be automatically parsed and converted to HTML+MathML:</p> - -<pre class="brush: html language-html"><head> -... -<script type="text/javascript" src="LaTeXMathML.js"></script> -<link rel="stylesheet" type="text/css" href="LaTeXMathML.standardarticle.css" /> -... -</head> - -<body> -... - -<div class="LaTeX"> -\documentclass[12pt]{article} - -\begin{document} - -\title{LaTeXML Example} -\maketitle - -\begin{abstract} -This is a sample LaTeXML document. -\end{abstract} - -\section{First Section} - - $ \sum_{n=1}^{+\infty} \frac{1}{n^2} = \frac{\pi^2}{6} $ - -\end{document} -</div> -...</pre> - -<p><a href="https://mathscribe.com/author/jqmath.html" title="http://mathscribe.com/author/jqmath.html">jqMath</a> is another script to parse a simple LaTeX-like syntax but which also accepts non-ASCII characters like <code>√{∑↙{n=1}↖{+∞} 6/n^2} = π</code> to write <math> <mrow> <msqrt> <mrow> <munderover> <mo>∑</mo> <mrow> <mi>n</mi> <mo>=</mo> <mn>1</mn> </mrow> <mrow> <mo>+</mo> <mi>∞</mi> </mrow> </munderover> <mfrac> <mn>6</mn> <msup> <mi>n</mi> <mn>2</mn> </msup> </mfrac> </mrow> </msqrt> <mo>=</mo> <mi>π</mi> </mrow> </math>. The installation is similar: download and copy the relevant <a href="https://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip" title="http://mathscribe.com/downloads/mathscribe-unix-0.4.0.zip">Javascript and CSS files</a> on your Web site and reference them in your page header (see the <code>COPY-ME.html</code> file from the zip archive for an example). One of the advantage of jqMath over the previous scripts is that it will automatically add some simple CSS rules to do the mathematical layout and make the formulas readable on browsers with limited MathML support.</p> - -<p><a name="mathjax"></a>Another way to work around the lack of MathML support in some browsers is to use <a href="https://www.mathjax.org/" title="http://www.mathjax.org/">MathJax</a>. However, note that you may find conflicts and synchronization issues between MathJax and the Javascript libraries previously mentioned. So if you really want to use MathJax as a MathML polyfill, you'd better use its own LaTeX/ASCIIMath parsers too. Note that on the one hand MathJax has better parsing and rendering support but on the other hand it is much bigger, more complex and slower than the previous Javascript libraries. Fortunately, you can use MathJax's CDN so that you don't need to install it on your Web server. Also, the slowest part of MathJax is currently its HTML-CSS / SVG output modes so we recommend to use the Native MathML output for Gecko-based browsers. Hence a typical configuration to use the AMS-LaTeX input is:</p> - -<pre class="brush: html language-html">... - <script type="text/x-mathjax-config"> - MathJax.Hub.Config({ - MMLorHTML: { prefer: { Firefox: "MML" } } - }); - </script> - <script type="text/javascript" - src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"> - </script> - </head> - <body> - \[ \tau = \frac{x}{y} + \sqrt{3} \] -...</pre> - -<p>Note that <a href="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters" title="http://docs.mathjax.org/en/latest/tex.html#tex-and-latex-math-delimiters">the dollar delimiters are not used by default</a>. To use the ASCIIMathML input instead, just replace <code>TeX-AMS-MML_HTMLorMML</code> by <code>AM-MML_HTMLorMML</code>. MathJax has many other features, see the <a href="http://docs.mathjax.org/en/latest/" title="http://docs.mathjax.org/en/latest/">MathJax documentation</a> for further details.</p> - -<h3 id="Command-line_Programs">Command-line Programs</h3> - -<p>An alternative way is to parse the simple syntax before publishing your web pages. That is, you use command-line programs to generate them and publish these static pages on your server.</p> - -<ul> - <li>pros: - <ul> - <li>You get static Web pages: the LaTeX source don't need to be parsed at each page load, the MathML code is exposed to Web crawlers and you can put them easily on any Web server.</li> - <li>Binary programs may run faster than Javascript programs and can be more sophisticated e.g. have a much complete LaTeX support or generate other formats like EPUB.</li> - <li>You can keep compatibility with other tools to generate pdf e.g. you can use the same .tex source for both latex and latexml.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This requires to install programs on your computer, which may be a bit more difficult or they may not be available on all platforms.</li> - <li>You must run the programs on your computer and have some kind of workflow to get the Web pages at the end ; that may be a bit tedious.</li> - <li>Binary programs are not appropriate to integrate them in a Mozilla extension or XUL application.</li> - </ul> - </li> -</ul> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be used <a href="https://github.com/fred-wang/TeXZilla/wiki/Using-TeXZilla#usage-from-the-command-line">from the command line</a> and will essentially have the same support as itex2MML described below. However, the stream filter behavior is not implemented yet.</p> - -<p>If you only want to parse simple LaTeX mathematical expressions, you might want to try tools like <a href="https://golem.ph.utexas.edu/%7Edistler/blog/itex2MML.html" title="http://golem.ph.utexas.edu/~distler/blog/itex2MML.html">itex2MML</a> or <a href="http://gva.noekeon.org/blahtexml/" title="http://gva.noekeon.org/blahtexml/">Blahtex</a>. The latter is often available on Linux distributions. Let's consider the former, which was originally written by Paul Gartside at the beginning of the Mozilla MathML project and has been maintained by Jacques Distler since then. It's a small stream filter written in C/C++ and generated with flex and bison ; in particular it is very fast. Install flex/bison as well as the classical compiler and make tools. On Unix, you can then download itex2MML, build and install it:</p> - -<pre class="brush: bash language-html">wget http://golem.ph.utexas.edu/~distler/blog/files/itexToMML.tar.gz; \ -tar -xzf itexToMML.tar.gz; \ -cd itex2MML/itex-src; -make -sudo make install</pre> - -<p>Now suppose that you have a HTML page with TeX fragments delimited by dollars:</p> - -<pre class="brush: html language-html">input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}<code class="language-html">input.html - -... -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$\sqrt{a^2-3c}$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> -</body> -</html>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> -</body> -</html>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} input.html - -... -</head> -<body> - <p>$\sqrt{a^2-3c}<code class="language-html">input.html - -... -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$\sqrt{a^2-3c}$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>$$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $$<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code>lt;/p> - <p>$ {\sum_{i=1}^N i} = \frac{N(N+1)}{2} $</p> -</body> -</html>lt;/p> -</body> -</html></pre> - -<p>Then to generate the HTML page input.html with TeX expressions replaced by MathML expressions, just do</p> - -<pre class="language-html">cat input.html | itex2MML > output.html</pre> - -<p>There are even more sophisticated tools to convert arbitrary LaTeX documents into HTML+MathML. For example <a href="https://www.tug.org/tex4ht/">TeX4ht</a> is often included in TeX distributions and has an option to use MathML instead of PNG images. This command will generate an XHTML+MathML document foo.xml from a foo.tex LaTeX source:</p> - -<pre class="language-html"> mk4ht mzlatex foo.tex # Linux/Mac platforms - mzlatex foo.tex # Windows platform -</pre> - -<p><a href="https://dlmf.nist.gov/LaTeXML/">LaTeXML</a> is another tool that is still actively developed but the release version is rather old, so you'd better <a href="https://github.com/KWARC/LaTeXML">install the development version</a>. In particular, this version can generate HTML5 and EPUB documents. Here is the command to execute in order to create a foo.html Web page from the foo.tex LaTeX source:</p> - -<pre class="language-html"> latexml --dest foo.xml foo.tex - latexmlpost --dest foo.html --format=html5 foo.xml -</pre> - -<p>If you want to have a MathJax fallback for non-Gecko browsers, copy the <a href="/es/docs/Web/MathML/Authoring$edit#mathjax-fallback">Javascript lines given above</a> into a <code>mathjax.js</code> file and use the <code>--javascript</code> parameter to tell LaTeXML to include that file:</p> - -<pre class="language-html"> latexmlpost --dest foo.html --format=html5 --javascript=mathjax.js foo.xml -</pre> - -<p>If your LaTeX document is big, you might want to split it into several small pages rather putting everything in a single page. This is especially true if you use the MathJax fallback above, since in that case MathJax will take a lot of time to render the equations in non-Gecko browsers. Use the <code>--splitat</code> parameter for that purpose. For example, this will split the pages at the <code>\section</code> level:</p> - -<pre class="language-html"> latexmlpost --dest foo.html --format=html5 --splitat=section foo.xml -</pre> - -<p>Finally, to generate an EPUB document, you can do</p> - -<pre class="language-html"> latexmlc --dest foo.epub --splitat=section foo.xml -</pre> - -<h3 id="Server-side_Conversion">Server-side Conversion</h3> - -<ul> - <li>pros: - <ul> - <li>Conversion is done server-side and the MathML output can be cached, which is more efficient and cleaner than client-side conversion.</li> - </ul> - </li> - <li>cons: - <ul> - <li>This might be a bit more difficult to set up, since you need some admin right on your server.</li> - </ul> - </li> -</ul> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> can be <a href="https://github.com/fred-wang/TeXZilla/wiki/Advanced-Usages#using-texzilla-as-a-web-server">used as a Web server</a> in order to perform server-side LaTeX-to-MathML conversion. <a href="https://dlmf.nist.gov/LaTeXML/">LaTeXML</a> can also be used as a deamon to run server-side. <a href="https://github.com/gwicke/mathoid">Mathoid</a> is another tool based on MathJax that is also able to perform additional MathML-to-SVG conversion.</p> - -<p><a href="http://instiki.org/show/HomePage">Instiki</a> is a Wiki that integrates itex2MML to do server-side conversion. In future versions, <a href="https://www.mediawiki.org/wiki/MediaWiki">MediaWiki</a> will support server-side conversion too.</p> - -<h2 id="Graphical_Interface">Graphical Interface</h2> - -<h3 id="Input_Box">Input Box</h3> - -<p><a href="https://github.com/fred-wang/TeXZilla">TeXZilla</a> has several interfaces, including a <a href="https://ckeditor.com/addon/texzilla">CKEditor plugin</a> used on MDN, an <a href="http://fred-wang.github.io/TeXZilla/">online demo</a>, a <a href="https://addons.mozilla.org/en-US/firefox/addon/texzilla/">Firefox add-on</a> or a <a href="http://r-gaia-cs.github.io/TeXZilla-webapp/">FirefoxOS Webapp</a>. <a href="http://abisource.org/">Abiword</a> contains a small equation editor, based on itex2MML.<a href="http://www.bluegriffon.com/"> Bluegriffon</a> is a mozilla-based Wysiwyg HTML editor and has an add-on to insert MathML formulas in your document, using ASCII/LaTeX-like syntax.</p> - -<p style="text-align: center;"><img alt="BlueGriffon" src="mathml-shot1.png"></p> - -<h3 id="WYSIYWG_Editors">WYSIYWG Editors</h3> - -<p><a href="https://www.firemath.info/">Firemath</a> is an extension for Firefox that provides a WYSIWYG MathML editor. A preview of the formula is displayed using the rendering engine of Mozilla. The generated MathML code is available at the bottom. Use the text field for token elements and buttons to build advanced constructions. Once you are done, you can save your document as a XHTML page.</p> - -<p><a href="https://www.openoffice.org/">OpenOffice</a> and <a href="https://libreoffice.org/">LibreOffice</a> have an equation editor (File → New → Formula). It is semi-WYSIWYG: you enter the source of the formula using the equation panel/keyboard and a preview of the formula is regularly refreshed. The editor uses its own syntax "StarMath" for the source but MathML is also generated when the document is saved. To get the MathML code, save the document as mml and open it with any text editor. Alternatively, you can extract the odf file (which is actually a zip archive) and open an xml file called <code>content.xml</code>.</p> - -<p style="text-align: center;"><img alt="Open Office Math" src="openoffice.png"></p> - -<p><a href="https://www.w3.org/Amaya/">Amaya</a> is the W3C's web editor, which is able to handle MathML inside XHTML documents. Use the Elements and the Special Chars panels to create various advanced mathematical constructs. Simple text such as <code>a+2</code> is automatically parsed and the appropriate MathML markup is generated. Once you are done, you can directly save your XHTML page and open it in Mozilla.</p> - -<h2 id="Optical_Character_Handwriting_Recognition">Optical Character & Handwriting Recognition</h2> - -<p><a href="https://www.inftyreader.org/">Inftyreader</a> is able to perform some Optical Character Recognition, including translation of mathematical equations into MathML. Other tools can do handwriting recognition such as the <a href="https://windows.microsoft.com/en-za/windows7/use-math-input-panel-to-write-and-correct-math-equations">Windows Math Input Panel</a></p> - -<p>or the online converter <a href="http://webdemo.visionobjects.com/" title="http://webdemo.visionobjects.com/portal.html">Web Equation</a>.</p> - -<p>Original Document Information</p> - -<div class="originaldocinfo"> -<ul> - <li>Author(s): Frédéric Wang</li> - <li>Other Contributors: Florian Scholz</li> - <li>Last Updated Date: April 2, 2011</li> - <li>Copyright Information: Portions of this content are © 2010 by individual mozilla.org contributors; content available under a Creative Commons license | <a class="external" href="https://www.mozilla.org/foundation/licensing/website-content.html">Details</a>.</li> -</ul> -</div> - -<p> </p> diff --git a/files/es/web/mathml/authoring/openoffice.png b/files/es/web/mathml/authoring/openoffice.png Binary files differdeleted file mode 100644 index 4876bc83df..0000000000 --- a/files/es/web/mathml/authoring/openoffice.png +++ /dev/null diff --git a/files/es/web/media/formats/index.html b/files/es/web/media/formats/index.html deleted file mode 100644 index b11ddc3580..0000000000 --- a/files/es/web/media/formats/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: 'Media type and format guide: image, audio, and video content' -slug: Web/Media/Formats -tags: - - API - - Audio - - Codecs - - Containers - - File Types - - Files - - Filetypes - - Landing - - Media - - NeedsTranslation - - TopicStub - - Types - - Video - - Web - - formats -translation_of: Web/Media/Formats ---- -<p>{{QuickLinksWithSubpages("/en-US/docs/Web/Media")}}</p> - -<p>Since nearly its beginning, the web has included support for some form of visual media presentation. Originally, these capabilities were limited, and were expanded organically, with different browsers finding their own solutions to the problems around including still and video imagery on the web. The modern web has powerful features to support the presentation and manipulation of media, with several media-related APIs supporting various types of content. Generally, the media formats supported by a browser are entirely up to the browser's creators, which can complicate the work of a web developer.</p> - -<p><span class="seoSummary">This guide provides an overview of the media file types, {{Glossary("codec", "codecs")}}, and algorithms that may comprise media used on the web.</span> It also provides browser support information for various combinations of these, and suggestions for prioritization of formats, as well as which formats excel at specific types of content.</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 class="Documentation" id="References">References</h2> - -<h3 id="Images">Images</h3> - -<dl> - <dt><span class="hidden"> </span><a href="/en-US/docs/Web/Media/Formats/Image_types">Image file type and format guide</a></dt> - <dd>Covers support of image file types and content formats across the major web browsers, as well as providing basic information about each type: benefits, limitations, and use cases of interest to web designers and developers.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Images_for_web_designers">Image file types for web designers</a></dt> - <dd>Fundamental information about the various image file types that may be useful for web designers, including best practices and use cases for each type, and guidelines for choosing the right image file format for specific types of content.</dd> -</dl> - -<h3 id="Media_file_types_and_codecs">Media file types and codecs</h3> - -<dl> - <dt><a href="/en-US/docs/Web/Media/Formats/Containers">Media containers (file types)</a></dt> - <dd>A guide to the file types that contain media data. Some are audio-specific, while others may be used for either audio or combined audiovisual content such as movies. Includes overviews of each of the file types supported by the major web browsers, along with browser support information and supported features.</dd> -</dl> - -<dl> - <dt><a href="/en-US/docs/Web/Media/Formats/Audio_codecs">Web audio codec guide</a></dt> - <dd>A guide to the audio codecs allowed for by the common media containers, as well as by the major browsers. Includes benefits, limitations, key specifications and capabilities, and use cases. It also covers each browser's support for using the codec in given containers.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Video_codecs">Web video codec guide</a></dt> - <dd>This article provides basic information about the video codecs supported by the major browsers, as well as some that are not commonly supported but that you might still run into. It also covers codec capabilities, benefits, limitations, and browser support levels and restrictions.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/codecs_parameter">The "codecs" parameter in common media types</a></dt> - <dd>When specifying the MIME type describing a media format, you can provide details using the <code>codecs</code> parameter as part of the type string. This guide describes the format and possible values of the <code>codecs</code> parameter for the common media types.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/WebRTC_codecs">Codecs used by WebRTC</a></dt> - <dd><a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> doesn't use a container, but instead streams the encoded media itself from peer to peer using {{domxref("MediaStreamTrack")}} objects to represent each audio or video track. This guide discusses the codecs commonly used with WebRTC.</dd> -</dl> -</div> - -<div class="section"> -<h2 class="Documentation" id="Guides">Guides</h2> - -<h3 id="Concepts">Concepts</h3> - -<dl> - <dt><a href="/en-US/docs/Web/Media/Formats/Audio_concepts">Digital audio concepts</a></dt> - <dd>An introduction to how audio is converted into digital form and stored for use by computers. It explains basic concepts about how audio is sampled, as well as concepts such as sample rate, audio frames, and audio compression.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Video_concepts">Digital video concepts</a></dt> - <dd>A guide to fundamental concepts involved with digital video as used on the web, including basics about color formats, chroma subsampling, how human perception influences video coding, and so forth.</dd> -</dl> - -<h3 id="Tutorials_and_how-tos">Tutorials and how-tos</h3> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Learning: Video and audio content</a></dt> - <dd>This tutorial introduces and details the use of media on the web.</dd> - <dt><a href="/en-US/docs/Web/Media/Formats/Support_issues">Handling media support issues in web content</a></dt> - <dd>In this guide, we look at how to build web content that maximizes quality or performance while providing the broadest possible compatibility, by choosing media formats wisely, and offering fallbacks and alternate formats where it would be helpful.</dd> -</dl> - -<h2 id="Other_topics">Other topics</h2> - -<dl> - <dt><a href="/en-US/docs/Web/API/Media_Capabilities_API">Media Capabilities API</a></dt> - <dd>The Media Capabilities API lets you discover the encoding and decoding capabilities of the device your app or site is running on. This lets you make real-time decisions about what formats to use and when.</dd> -</dl> -</div> -</div> diff --git a/files/es/web/svg/element/foreignobject/index.html b/files/es/web/svg/element/foreignobject/index.html deleted file mode 100644 index ea64360cbb..0000000000 --- a/files/es/web/svg/element/foreignobject/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: foreignObject -slug: Web/SVG/Element/foreignObject -translation_of: Web/SVG/Element/foreignObject ---- -<div>{{SVGRef}}</div> - -<p>El elemento <code>foreignObject</code> permite la inclusión de un namespace XML externo que tiene su contenido gráfico dibujado por un diferente user-agent. El contenido gráfico externo incluido está sujeto a las transformaciones SVG y composición.</p> - -<p>The contents of <code>foreignObject</code> are assumed to be from a different namespace. Any SVG elements within a <code>foreignObject</code> will not be drawn, except in the situation where a properly defined SVG subdocument with a proper <code>xmlns</code> attribute specification is embedded recursively. One situation where this can occur is when an SVG document fragment is embedded within another non-SVG document fragment, which in turn is embedded within an SVG document fragment (e.g., an SVG document fragment contains an XHTML document fragment which in turn contains yet another SVG document fragment).</p> - -<p>Usually, a <code>foreignObject</code> will be used in conjunction with the {{ SVGElement("switch") }} element and the {{ SVGAttr("requiredExtensions") }} attribute to provide proper checking for user agent support and provide an alternate rendering in case user agent support is not available.</p> - -<h2 id="Usage_context">Usage context</h2> - -<p>{{svginfo}}</p> - -<h2 id="Example">Example</h2> - -<pre class="brush: xml"><svg width="400px" height="300px" viewBox="0 0 400 300" - xmlns="http://www.w3.org/2000/svg"> - <desc>This example uses the 'switch' element to provide a - fallback graphical representation of a paragraph, if - XHTML is not supported.</desc> - - <!-- The 'switch' element will process the first child element - whose testing attributes evaluate to true.--> - <switch> - - <!-- Process the embedded XHTML if the requiredExtensions attribute - evaluates to true (i.e., the user agent supports XHTML - embedded within SVG). --> - <foreignObject width="100" height="50" - requiredExtensions="<span id="the-code"><span class="s">http://www.w3.org/1999/xhtml</span></span>"> - <!-- XHTML content goes here --> - <body xmlns="http://www.w3.org/1999/xhtml"> - <p>Here is a paragraph that requires word wrap</p> - </body> - </foreignObject> - - <!-- Else, process the following alternate SVG. - Note that there are no testing attributes on the 'text' element. - If no testing attributes are provided, it is as if there - were testing attributes and they evaluated to true.--> - <text font-size="10" font-family="Verdana"> - <tspan x="10" y="10">Here is a paragraph that</tspan> - <tspan x="10" y="20">requires word wrap.</tspan> - </text> - </switch> -</svg> -</pre> - -<h2 id="Attributes">Attributes</h2> - -<h3 id="Global_attributes">Global attributes</h3> - -<ul> - <li><a href="/en-US/docs/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> - <li><a href="/en-US/docs/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation ">Presentation attributes</a> »</li> - <li>{{ SVGAttr("class") }}</li> - <li>{{ SVGAttr("style") }}</li> - <li>{{ SVGAttr("externalResourcesRequired") }}</li> - <li>{{ SVGAttr("transform") }}</li> -</ul> - -<h3 id="Specific_attributes">Specific attributes</h3> - -<ul> - <li>{{ SVGAttr("x") }}</li> - <li>{{ SVGAttr("y") }}</li> - <li>{{ SVGAttr("width") }}</li> - <li>{{ SVGAttr("height") }}</li> -</ul> - -<h2 id="DOM_Interface">DOM Interface</h2> - -<p>This element implements the <code><a href="/en-US/docs/DOM/SVGForeignObjectElement" title="en/DOM/SVGForeignObjectElement">SVGForeignObjectElement</a></code> interface.</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>1.0</td> - <td>1.9</td> - <td>{{ CompatNo() }}</td> - <td>2.0</td> - <td>3.0</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>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>2.0</td> - <td>{{ CompatNo() }}</td> - <td>2.0</td> - <td>3.0</td> - </tr> - </tbody> -</table> -</div> - -<p>The chart is based on <a href="/en-US/docs/SVG/Compatibility_sources" title="en/SVG/Compatibility sources">these sources</a>.</p> diff --git a/files/es/web/xslt/element/number/index.html b/files/es/web/xslt/element/number/index.html deleted file mode 100644 index 519c2361c2..0000000000 --- a/files/es/web/xslt/element/number/index.html +++ /dev/null @@ -1,170 +0,0 @@ ---- -title: number -slug: Web/XSLT/Element/number -tags: - - Todas_las_Categorías - - XSLT -translation_of: Web/XSLT/Element/number -original_slug: Web/XSLT/number ---- -<p>{{XsltRef}}</p> - -<p>El elemento <code><xsl:number></code> hace conteos secuenciales. También puede ser usado para darle formato a los números.</p> - -<h3 id="Sintaxis" name="Sintaxis">Sintaxis</h3> - -<pre><xsl:number - count=EXPRESION - level="single" | "multiple" | "any" - from=EXPRESION - value=EXPRESION - format=FORMAT-STRING - lang=XML:LANG-CODE - letter-value="alphabetic" | "traditional" - grouping-separator=CARACTER - grouping-size=NUMERO /></pre> - -<h3 id="Atributos_requeridos" name="Atributos_requeridos">Atributos requeridos</h3> - -<p>Ninguno.</p> - -<h3 id="Atributos_opcionales" name="Atributos_opcionales">Atributos opcionales</h3> - -<dl> - <dt><code>count</code></dt> - <dd>Indica que es lo que debe ser numerado de manera secuencial. Usa una expresión XPath.</dd> -</dl> - -<dl> - <dt><code>level</code></dt> - <dd>Define cuantos niveles del documento deben ser tomados en cuenta para generar la secuencia numérica. Tiene 3 valores permitidos: <code>single</code>, <code>multiple</code>, y <code>any</code>. El valor por preestablecido es <code>single</code>:</dd> -</dl> - -<dl> - <dd> - <dl> - <dt><code>single</code></dt> - <dd>Numera los nodos hermanos de manera secuencia, como en los listados. ... CONTINUAR DESDE AQUÍ...</dd> - <dd>Numbers sibling nodes sequentially, as in the items in a list. The processor goes to the first node in the <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor-or-self"><code>ancestor-or-self</code></a> axis that matches the <code>count</code> attribute and then counts that node plus all its preceding siblings (stopping when it reaches a match to the <code>from</code> attribute, if there is one) that also match the <code>count</code> attribute.If no match is found, the sequence will be an empty list.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt><code>multiple</code></dt> - <dd>Numbers nodes as a composite sequence that reflects the hierarchic position of the node, e.g. 1.2.2.5. (The nested format can be specified with the <code>format</code> attribute, e.g. A.1.1). The processor looks at all <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestors</code></a> of the current node and the current node itself, stopping when it reaches a match for the <code>from</code> attribute, if there is one. For each node in this list that matches the <code>count</code> attribute, the processor counts how many preceding matching siblings it has, and adds one for the node itself. If no match is found, the sequence will be an empty list.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt><code>any</code> (Not supported at this time.)</dt> - <dd>Numbers all matching nodes, regardless of level, sequentially. The <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/ancestor"><code>ancestor</code></a>, <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/self"><code>self</code></a>, and <a href="es/Transforming_XML_with_XSLT/Mozilla_XSLT%2f%2fXPath_Reference/Axes/preceding"><code>preceding</code></a> axes are all considered. The processor starts at the current node and proceeds in reverse document order, stopping if it reaches a match to any <code>from</code> attribute. If no match to the <code>count</code> attribute is found, the sequence will be an empty list. This level is not supported at this time.</dd> - </dl> - </dd> -</dl> - -<dl> - <dt>from</dt> - <dd>Specifies where the numbering should start or start over. The sequence begins with the first descendant of the node that matches the <code>from</code> attribute.</dd> -</dl> - -<dl> - <dt>value</dt> - <dd>Applies a given format to a number. This is a quick way to format a user-supplied number (as opposed to a node sequence number) in any of the standard <code><xsl:number></code> formats.</dd> -</dl> - -<dl> - <dt>format</dt> - <dd>Defines the format of the generated number:</dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="1"</dt> - <dd>1 2 3 . . . (This is the only format supported at this time)</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="01"</dt> - <dd>01 02 03 . . . 09 10 11 . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="a"</dt> - <dd>a b c . . .y z aa ab . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="A"</dt> - <dd>A B C . . . Y Z AA AB . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="i"</dt> - <dd>i ii iii iv v . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dt>format="I"</dt> - <dd>I II III IV V . . .</dd> - </dl> - </dd> -</dl> - -<dl> - <dt>lang (Not supported at this time.)</dt> - <dd>Specifies which language's alphabet should be used in letter-based numbering formats.</dd> -</dl> - -<dl> - <dt>letter-value</dt> - <dd>Disambiguates between numbering sequences that use letters. Some languages have more than one numbering system that use letters. If both systems begin with the same token, ambiguity can arise. This attribute can have the value "<code>alphabetic</code>" or "<code>traditional</code>". The default is "<code>alphabetic</code>".</dd> -</dl> - -<dl> - <dt>grouping-separator</dt> - <dd>Specifies what character should be used as the group (e.g. thousands) separator. The default is the comma (<code>,</code>).</dd> -</dl> - -<dl> - <dt>grouping-size</dt> - <dd>Indicates the number of digits that make up a numeric group. The default value is "<code>3</code>".</dd> -</dl> - -<h3 id="Type" name="Type">Type</h3> - -<p>Instruction, appears within a template.</p> - -<h3 id="Defined" name="Defined">Defined</h3> - -<p>XSLT, section 7.7</p> - -<h3 id="Gecko_support" name="Gecko_support">Gecko support</h3> - -<p>Partial support. See comments above.</p> |
