diff options
Diffstat (limited to 'files')
464 files changed, 2042 insertions, 2628 deletions
diff --git a/files/de/glossary/crawler/index.html b/files/de/glossary/crawler/index.html index df3fd9db4b..49dffae66c 100644 --- a/files/de/glossary/crawler/index.html +++ b/files/de/glossary/crawler/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/Crawler <li>{{Interwiki("wikipedia", "Webcrawler")}} auf Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/de/glossary/flexbox/index.html b/files/de/glossary/flexbox/index.html index 1065338721..51175bfd1d 100644 --- a/files/de/glossary/flexbox/index.html +++ b/files/de/glossary/flexbox/index.html @@ -46,7 +46,7 @@ translation_of: Glossary/Flexbox <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/de/glossary/graceful_degradation/index.html b/files/de/glossary/graceful_degradation/index.html index 9116aa8bfb..e40f583b5a 100644 --- a/files/de/glossary/graceful_degradation/index.html +++ b/files/de/glossary/graceful_degradation/index.html @@ -23,7 +23,7 @@ translation_of: Glossary/Graceful_degradation <li>{{Interwiki("wikipedia", "Graceful degradation")}} auf Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/de/docs/Glossary">Glossar</a> diff --git a/files/de/glossary/gzip_compression/index.html b/files/de/glossary/gzip_compression/index.html index 406b66c303..ce7148f7be 100644 --- a/files/de/glossary/gzip_compression/index.html +++ b/files/de/glossary/gzip_compression/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression <li><a href="https://de.wikipedia.org/wiki/Gzip">Gzip auf Wikipedia</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details><summary><a href="/en-US/docs/Glossary">MDN Glossary</a></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details> diff --git a/files/de/glossary/iife/index.html b/files/de/glossary/iife/index.html index 22ca4b8818..4f49e8f694 100644 --- a/files/de/glossary/iife/index.html +++ b/files/de/glossary/iife/index.html @@ -36,7 +36,7 @@ aName // throws "Uncaught ReferenceError: aName is not defined" // Immediately creates the output: result; // "Barry"</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Mehr darüber erfahren <ol> diff --git a/files/de/glossary/local_variable/index.html b/files/de/glossary/local_variable/index.html index d0fcecb97b..ab79186796 100644 --- a/files/de/glossary/local_variable/index.html +++ b/files/de/glossary/local_variable/index.html @@ -18,7 +18,7 @@ function fun(){ } </pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>General knowledge <ol> diff --git a/files/de/glossary/progressive_enhancement/index.html b/files/de/glossary/progressive_enhancement/index.html index 624a77649c..eecee8977e 100644 --- a/files/de/glossary/progressive_enhancement/index.html +++ b/files/de/glossary/progressive_enhancement/index.html @@ -23,7 +23,7 @@ translation_of: Glossary/Progressive_Enhancement <li>{{Interwiki("wikipedia", "Progressive Verbesserung")}} auf Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/de/docs/Glossary">Glossar</a> diff --git a/files/de/glossary/type/index.html b/files/de/glossary/type/index.html index 09a772b7d4..0aee277a07 100644 --- a/files/de/glossary/type/index.html +++ b/files/de/glossary/type/index.html @@ -14,7 +14,7 @@ original_slug: Glossary/Typ <p>Der Typ eines Wertes bestimmt außerdem, welche Arten von Operationen damit zulässig sind. Z.B. können Zahlen nur mit Zahlen multipliziert werden, nicht aber mit Strings oder Booleans. Dieses Wissen ist auch nützlich für den Vergleich von Typen. Denn neben <a href="/de/docs/Web/JavaScript/Datenstrukturen#Primitive_Werte">Primitiven Werten</a> gibt es auch <a href="/de/docs/Web/JavaScript/Datenstrukturen#Objekte">strukturierte Datentypen</a> wie Objekte.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{Interwiki("wikipedia", "Datentyp auf Wikipedia")}}</li> <li><a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Vererbung und Prototypen</a></li> diff --git a/files/de/glossary/type_conversion/index.html b/files/de/glossary/type_conversion/index.html index 39202e3f1d..e3267b4b88 100644 --- a/files/de/glossary/type_conversion/index.html +++ b/files/de/glossary/type_conversion/index.html @@ -23,7 +23,7 @@ var b = Number("0x11"); <p>(b) Der String <code>0x11</code> wird explizit in die Ganzzahl <code>17</code> umgewandelt.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/de/docs/Glossary">Glossar</a> diff --git a/files/de/glossary/user_agent/index.html b/files/de/glossary/user_agent/index.html index bcf4374e8a..6a6436386c 100644 --- a/files/de/glossary/user_agent/index.html +++ b/files/de/glossary/user_agent/index.html @@ -34,7 +34,7 @@ translation_of: Glossary/User_agent <li>{{RFC(2616, "14.43")}}: The <code>User-Agent</code> header</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/de/glossary/webm/index.html b/files/de/glossary/webm/index.html index 4da68d24c7..f910fc066f 100644 --- a/files/de/glossary/webm/index.html +++ b/files/de/glossary/webm/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/webm <li>{{interwiki("wikipedia", "WebM")}} auf Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/de/docs/Glossary">Glossar</a> diff --git a/files/de/glossary/webp/index.html b/files/de/glossary/webp/index.html index 852e6ca068..614ed8c566 100644 --- a/files/de/glossary/webp/index.html +++ b/files/de/glossary/webp/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/webp <li>{{interwiki("wikipedia", "WebP")}} auf Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/de/docs/Glossary">Glossar</a> diff --git a/files/de/glossary/wrapper/index.html b/files/de/glossary/wrapper/index.html index 2dfd58a2c3..e2d0698849 100644 --- a/files/de/glossary/wrapper/index.html +++ b/files/de/glossary/wrapper/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Wrapper <p>{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html index 8d95c681f7..a504bb948a 100644 --- a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html @@ -6,7 +6,7 @@ tags: translation_of: Mozilla/Firefox/Releases/3/Updating_extensions original_slug: Erweiterungen_für_Firefox_3_aktualisieren --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/de/web/accessibility/index.html b/files/de/web/accessibility/index.html index c078419595..b3743b8339 100644 --- a/files/de/web/accessibility/index.html +++ b/files/de/web/accessibility/index.html @@ -74,5 +74,3 @@ original_slug: Web/Barrierefreiheit <li><a href="/en-US/docs/Web/Guide" title="REDIRECT Web">Developer guides</a></li> <li><a href="/en-US/docs/Mozilla/Accessibility" title="Accessibility is the idea that software (among other things) should be designed to be usable and, as much as possible, convenient to use for people with disabilities. Mozilla strives to make its software accessible; the documents below cover the ways in which we do so.">Accessibility and Mozilla</a></li> </ul> - -<section id="Quick_Links"></section> diff --git a/files/de/web/css/css_grid_layout/index.html b/files/de/web/css/css_grid_layout/index.html index d5e810da8e..973301c065 100644 --- a/files/de/web/css/css_grid_layout/index.html +++ b/files/de/web/css/css_grid_layout/index.html @@ -193,7 +193,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/de/web/css/gap/index.html b/files/de/web/css/gap/index.html index 8fbab40969..12d3fa49e2 100644 --- a/files/de/web/css/gap/index.html +++ b/files/de/web/css/gap/index.html @@ -122,7 +122,7 @@ grid-gap: unset; <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/de/web/css/grid-template-areas/index.html b/files/de/web/css/grid-template-areas/index.html index fe40894d2b..c800b19390 100644 --- a/files/de/web/css/grid-template-areas/index.html +++ b/files/de/web/css/grid-template-areas/index.html @@ -135,7 +135,7 @@ grid-template-areas: unset; <li>Video Tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/de/web/css/grid/index.html b/files/de/web/css/grid/index.html index aee6a296fe..649b0f3ccb 100644 --- a/files/de/web/css/grid/index.html +++ b/files/de/web/css/grid/index.html @@ -127,7 +127,7 @@ grid: unset; <li>Verwandte CSS-Eigenschaften: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS-Referenz</a></strong></li> diff --git a/files/de/web/javascript/reference/global_objects/webassembly/index.html b/files/de/web/javascript/reference/global_objects/webassembly/index.html index 4681f473fd..f02c065588 100644 --- a/files/de/web/javascript/reference/global_objects/webassembly/index.html +++ b/files/de/web/javascript/reference/global_objects/webassembly/index.html @@ -107,5 +107,3 @@ WebAssembly.instantiateStreaming(fetch('simple.wasm'), importObject) <li><a href="/en-US/docs/WebAssembly/Concepts">WebAssembly concepts</a></li> <li><a href="/en-US/docs/WebAssembly/Using_the_JavaScript_API">Using the WebAssembly JavaScript API</a></li> </ul> - -<section id="Quick_Links"> </section> diff --git a/files/es/glossary/accessibility_tree/index.html b/files/es/glossary/accessibility_tree/index.html index 0944f31397..812e74631a 100644 --- a/files/es/glossary/accessibility_tree/index.html +++ b/files/es/glossary/accessibility_tree/index.html @@ -28,7 +28,7 @@ translation_of: Glossary/Accessibility_tree <p>Además, el árbol de accesibilidad usualmente contiene información sobre lo que se puede hacer con un elemento: <em>seguir</em> un enlace, <em>completar</em> un cuadro de texto, etc.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">Glossary</a> diff --git a/files/es/glossary/call_stack/index.html b/files/es/glossary/call_stack/index.html index 3eea4ae1cc..9980c2811a 100644 --- a/files/es/glossary/call_stack/index.html +++ b/files/es/glossary/call_stack/index.html @@ -80,7 +80,7 @@ saludar(); <li>{{Interwiki("wikipedia", "Pila de llamadas")}} en Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/es-ES/docs/Glossary">Glosario</a> diff --git a/files/es/glossary/character_set/index.html b/files/es/glossary/character_set/index.html index cbfc145643..5fbd2851e0 100644 --- a/files/es/glossary/character_set/index.html +++ b/files/es/glossary/character_set/index.html @@ -14,7 +14,7 @@ original_slug: Glossary/conjunto_de_caracteres <p>Si un conjunto de caracteres se usa incorrectamente (por ejemplo, Unicode para un artículo codificado en Big5), es posible que no vean más que caracteres rotos, que se llaman {{Interwiki("wikipedia", "Mojibake")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Artículos de Wikipedia <ol> diff --git a/files/es/glossary/first-class_function/index.html b/files/es/glossary/first-class_function/index.html index 1d1e569277..c980b4685c 100644 --- a/files/es/glossary/first-class_function/index.html +++ b/files/es/glossary/first-class_function/index.html @@ -98,7 +98,7 @@ diHola()(); <h3 id="Conocimiento_general">Conocimiento general</h3> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{Interwiki("wikipedia", "First-class_function", "First-class functions")}} on Wikipedia</li> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/es/glossary/identifier/index.html b/files/es/glossary/identifier/index.html index cda711dece..2cbf247479 100644 --- a/files/es/glossary/identifier/index.html +++ b/files/es/glossary/identifier/index.html @@ -24,7 +24,7 @@ original_slug: Glossary/Identificador <li>{{interwiki("wikipedia", "Identificador#Identificadores_en_lenguajes_informáticos", "Identificador")}} en Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/es/docs/Glossary">Glosario</a> diff --git a/files/es/glossary/main_thread/index.html b/files/es/glossary/main_thread/index.html index f58296fe3f..07dd035bae 100644 --- a/files/es/glossary/main_thread/index.html +++ b/files/es/glossary/main_thread/index.html @@ -13,7 +13,7 @@ original_slug: Glossary/Hilo_principal <p>A menos que use intencionalmente un trabajador web, como un trabajador de servicio, JavaScript se ejecuta en el hilo principal, por lo que es fácil que un script provoque retrasos en el procesamiento o la pintura de eventos. Cuanto menos trabajo se requiera del hilo principal, más puede responder ese hilo a los eventos del usuario, pintar y, en general, responder al usuario.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>See also <ol> diff --git a/files/es/glossary/php/index.html b/files/es/glossary/php/index.html index e1677eef56..ccd4177952 100644 --- a/files/es/glossary/php/index.html +++ b/files/es/glossary/php/index.html @@ -40,7 +40,7 @@ translation_of: Glossary/PHP echo $email; ?></pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="http://php.net/">Official website</a></li> <li>{{Interwiki("wikipedia", "PHP")}} en Wikipedia</li> diff --git a/files/es/glossary/pop/index.html b/files/es/glossary/pop/index.html index 2de8816ba8..e9f9a342f4 100644 --- a/files/es/glossary/pop/index.html +++ b/files/es/glossary/pop/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/POP <p>Los clientes usualmente recuperan todos los mensajes y luego los eliminan del servidor, pero POP3 permite retener una copia en el servidor. Casi todos los servidores y clientes de correo actualmente soportan POP3.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="https://es.wikipedia.org/wiki/Protocolo_de_oficina_de_correo">POP</a> en Wikipedia</li> <li><a href="https://tools.ietf.org/html/rfc1734">RFC 1734</a> (Especificación del mecanismo de autenticación de POP3)</li> diff --git a/files/es/glossary/primitive/index.html b/files/es/glossary/primitive/index.html index 2591883ebb..45229b6337 100644 --- a/files/es/glossary/primitive/index.html +++ b/files/es/glossary/primitive/index.html @@ -106,7 +106,7 @@ console.log(foo); // 5 <li>{{Interwiki("wikipedia", "Tipo de dato primitivo")}} en Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{Link("/es/docs/Glossary")}} diff --git a/files/es/glossary/smtp/index.html b/files/es/glossary/smtp/index.html index 3a3591cd0e..1bf01916b1 100644 --- a/files/es/glossary/smtp/index.html +++ b/files/es/glossary/smtp/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/SMTP <p>El protocolo es relativamente simple. Las complicaciones principales incluyen soportar varios mecanismos de autenticación (<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>, MSN, AUTH LOGIN, AUTH PLAIN, etc.), manejo de respuestas de error, y retroceder cuando los mecanismos de autenticación fallan (p. ej., el servidor asegura que soporta un mecanismo, pero no).</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/es/docs/Glossary">Glosario</a> diff --git a/files/es/glossary/type_coercion/index.html b/files/es/glossary/type_coercion/index.html index 7260ab3c2d..a56d69d09c 100644 --- a/files/es/glossary/type_coercion/index.html +++ b/files/es/glossary/type_coercion/index.html @@ -20,4 +20,4 @@ console.log(suma);</pre> <pre class="brush: js">sumar = Number(valor1) + valor2</pre> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/es/glossary/whitespace/index.html b/files/es/glossary/whitespace/index.html index 05638d15ef..b85fe6e3d0 100644 --- a/files/es/glossary/whitespace/index.html +++ b/files/es/glossary/whitespace/index.html @@ -18,7 +18,7 @@ original_slug: Glossary/Espacio_en_blanco <p>La <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">especificación del lenguaje ECMAScript® 2015</a> establece varios puntos de código Unicode como espacio en blanco: <code>U+0009</code> CARACTERES de TABULACIÓN <TAB>, <code>U+000B</code> TABULACIÓN DE LÍNEA <VT>, <code>U+000C</code> FORM FEED <FF>, <code>U+0020</code> ESPACIO <SP>, <code>U+00A0</code> ESPACIO SIN ROTURA <NBSP>, <code>U+FEFF</code> ANCHO CERO NO -BREAK SPACE <ZWNBSP> y otra categoría “Zs” Cualquier otro punto de código Unicode “Separador, espacio” <USP>. Estos caracteres suelen ser innecesarios para la funcionalidad del código.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Especificaciones <ol> diff --git a/files/es/glossary/wrapper/index.html b/files/es/glossary/wrapper/index.html index e6ecc8caa6..e265e08fb5 100644 --- a/files/es/glossary/wrapper/index.html +++ b/files/es/glossary/wrapper/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/Wrapper <p>{{Interwiki("wikipedia", "Wrapper function")}} on Wikipedia</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="https://developer.mozilla.org/es/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html index 2fe00e7ce9..927a5798b8 100644 --- a/files/es/learn/css/first_steps/using_your_new_knowledge/index.html +++ b/files/es/learn/css/first_steps/using_your_new_knowledge/index.html @@ -30,7 +30,7 @@ original_slug: Learn/CSS/First_steps/Usa_tu_nuevo_conocimiento <p>Puedes trabajar en el editor en vivo más abajo, o puedes descargar el punto de partida para trabajar con tu propio editor. Esta es una página HTML, con el inicio del CSS en el <code><head></code> del documento. Si prefieres, puedes mover este CSS a un archivo separado cuando crees el ejemplo en tu computador. Alternativamente, puedes usar una herramienta en línea como <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, o <a href="https://glitch.com/" rel="noopener">Glitch</a> para trabajar en las tareas.</p> <div class="blockIndicator note"> -<p><strong>Nota</strong>: Si te atascas, pide ayuda — mira la sección <a class="external external-icon" href="https://wiki.developer.mozilla.org/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional" rel="noopener">Evaluación o ayuda adicional</a> al final de esta página.</p> +<p><strong>Nota</strong>: Si te atascas, pide ayuda — mira la sección <a class="external external-icon" href="/es/docs/Learn/HTML/Introduccion_a_HTML/Prueba_tus_habilidades:_Enlaces#Evaluaci%C3%B3n_o_ayuda_adicional" rel="noopener">Evaluación o ayuda adicional</a> al final de esta página.</p> </div> <h2 id="Trabajando_con_CSS">Trabajando con CSS</h2> diff --git a/files/es/learn/forms/how_to_structure_a_web_form/index.html b/files/es/learn/forms/how_to_structure_a_web_form/index.html index 1bde629579..e8039ec3f4 100644 --- a/files/es/learn/forms/how_to_structure_a_web_form/index.html +++ b/files/es/learn/forms/how_to_structure_a_web_form/index.html @@ -282,7 +282,7 @@ original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form <h2 id="¡Prueba_tus_habilidades!">¡Prueba tus habilidades!</h2> -<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita <a class="external external-icon" href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure" rel="noopener">Prueba tus habilidades: Estructura de formularios</a>.</p> +<p>Has llegado al final de este artículo pero ¿puedes recordar la información más importante? Puedes encontrar pruebas adicionales para comprobar que has comprendido la información antes de continuar — visita <a class="external external-icon" href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure" rel="noopener">Prueba tus habilidades: Estructura de formularios</a>.</p> <h2 id="Resumen">Resumen</h2> diff --git a/files/es/mozilla/firefox/releases/9/index.html b/files/es/mozilla/firefox/releases/9/index.html index 4e976f6262..276bf245ac 100644 --- a/files/es/mozilla/firefox/releases/9/index.html +++ b/files/es/mozilla/firefox/releases/9/index.html @@ -9,7 +9,7 @@ tags: - TopicStub translation_of: Mozilla/Firefox/Releases/9 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/es/web/css/column-gap/index.html b/files/es/web/css/column-gap/index.html index fc08233bee..b97fb87f29 100644 --- a/files/es/web/css/column-gap/index.html +++ b/files/es/web/css/column-gap/index.html @@ -102,7 +102,7 @@ grid-column-gap: unset; <li>Guía sobre CSS Grid Layout: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Conceptos básicos sobre CSS Grid Layout - Gutters</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong> <a href="/en-US/docs/Web/CSS/Reference">Referencia CSS</a></strong></li> diff --git a/files/es/web/css/css_flow_layout/index.html b/files/es/web/css/css_flow_layout/index.html index 45daafc7a4..7a9d5a763d 100644 --- a/files/es/web/css/css_flow_layout/index.html +++ b/files/es/web/css/css_flow_layout/index.html @@ -35,7 +35,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 3b0aac0c26..9b22e46e0d 100644 --- a/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -554,7 +554,7 @@ dd { <p><span class="notranslate">Puede ser que se te ocurran tus propios casos de uso para la colocación automática o cualquier otra parte del diseño de la cuadrícula.</span> <span class="notranslate"> Si lo hace, créelos como problemas o agréguelos a un problema existente que podría resolver su caso de uso.</span> <span class="notranslate"> Esto ayudará a mejorar las futuras versiones de la especificación.</span></p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 26cff270b6..87214ed390 100644 --- a/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -663,7 +663,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Conceptos_Básicos_del_Posicionamiento_co <p>En este artículo hemos tenido una mirada muy rápida a través de la Especificación de Grid Layout. Juegue un poco con los ejemplos de código, y luego pase a <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">la siguiente parte de esta guía donde realmente nos vamos a adentrar en detalle dentro de CSS Grid Layout</a>.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 445cbac308..9880ecd33d 100644 --- a/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -644,7 +644,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Setting auto margins, using <code>margin-right</code> or <code>margin-left</code> however, or absolutely positioning items using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> offsets would not honor writing modes. In the next guide, we will look further into this interaction between CSS grid layout, box alignment and writing modes. This will be important to understand, if you develop sites that are then displayed in multiple languages, or if you want to mix languages or writing modes in a design.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/css_grid_layout/index.html b/files/es/web/css/css_grid_layout/index.html index d26c21f5fa..042d1f04fb 100644 --- a/files/es/web/css/css_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/index.html @@ -190,7 +190,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <section class="Quick_links" id="Enlaces_Rapidos"> <ol> <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> diff --git a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index d477402114..352c321708 100644 --- a/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -538,7 +538,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <li>ara obtener patrones de diseño comunes adicionales, consulta <em><a href="http://gridbyexample.com">Grid by Example</a></em>, donde hay muchos ejemplos> de diseño de cuadrícula y también algunos patrones de interfaz de usuario más grandes y diseños de página completa.</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html index f747b94b5d..df0c949072 100644 --- a/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/es/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -584,7 +584,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Relacion_de_Grid_Layout <p>Como puedes ver en esta guía, CSS Grid Layout es sólo una parte de tu kit de herramientas. No tengas miedo de mezclarlo con otros métodos de maquetación, para conseguir los diferentes efectos que necesitas.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/es/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/es/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/gap/index.html b/files/es/web/css/gap/index.html index 090d6e9957..70da3da759 100644 --- a/files/es/web/css/gap/index.html +++ b/files/es/web/css/gap/index.html @@ -196,7 +196,7 @@ grid-gap: unset; <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Gutters">Basic concepts of grid layout - Gutters</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/grid-auto-columns/index.html b/files/es/web/css/grid-auto-columns/index.html index 6e5aea4e5a..ad18820261 100644 --- a/files/es/web/css/grid-auto-columns/index.html +++ b/files/es/web/css/grid-auto-columns/index.html @@ -154,7 +154,7 @@ grid-auto-columns: unset; <li>Video tutorial (inglés): <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong><a href="/en-US/docs/Web/CSS/Reference">R</a>eferencia a CSS</strong></li> diff --git a/files/es/web/css/grid-auto-rows/index.html b/files/es/web/css/grid-auto-rows/index.html index cdcf192391..d59decd2b8 100644 --- a/files/es/web/css/grid-auto-rows/index.html +++ b/files/es/web/css/grid-auto-rows/index.html @@ -147,7 +147,7 @@ grid-auto-rows: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/grid-template-areas/index.html b/files/es/web/css/grid-template-areas/index.html index 215ca0b81f..7a5798c4b5 100644 --- a/files/es/web/css/grid-template-areas/index.html +++ b/files/es/web/css/grid-template-areas/index.html @@ -176,7 +176,7 @@ grid-template-areas: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/grid-template-columns/index.html b/files/es/web/css/grid-template-columns/index.html index 63c5bba16d..aba02c3d40 100644 --- a/files/es/web/css/grid-template-columns/index.html +++ b/files/es/web/css/grid-template-columns/index.html @@ -131,7 +131,7 @@ grid-template-columns: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li> diff --git a/files/es/web/css/grid-template-rows/index.html b/files/es/web/css/grid-template-rows/index.html index c3f072c7b3..3db676f169 100644 --- a/files/es/web/css/grid-template-rows/index.html +++ b/files/es/web/css/grid-template-rows/index.html @@ -158,7 +158,7 @@ grid-template-rows: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/grid/index.html b/files/es/web/css/grid/index.html index 11c689058f..1657f4d988 100644 --- a/files/es/web/css/grid/index.html +++ b/files/es/web/css/grid/index.html @@ -180,7 +180,7 @@ grid: unset; <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/es/web/css/minmax()/index.html b/files/es/web/css/minmax()/index.html index aee4d66659..4b91d4aee7 100644 --- a/files/es/web/css/minmax()/index.html +++ b/files/es/web/css/minmax()/index.html @@ -154,7 +154,7 @@ minmax(auto, 300px) </li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>Referencia CSS</strong></a></li> diff --git a/files/fr/glossary/accessibility_tree/index.html b/files/fr/glossary/accessibility_tree/index.html index 80b1d9f653..d5f1f739d0 100644 --- a/files/fr/glossary/accessibility_tree/index.html +++ b/files/fr/glossary/accessibility_tree/index.html @@ -28,7 +28,7 @@ translation_of: Glossary/Accessibility_tree <p>De plus, l'arbre d'accessibilité contient souvent des informations concernant ce qui peut être fait avec un élément : un lien peut être <em>suivi,</em> on peut <em>écrire dans</em> un champ texte etc.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/fr/docs/Glossaire">Glossaire</a> diff --git a/files/fr/glossary/ajax/index.html b/files/fr/glossary/ajax/index.html index 3a37adf62d..e07db98289 100644 --- a/files/fr/glossary/ajax/index.html +++ b/files/fr/glossary/ajax/index.html @@ -17,7 +17,7 @@ original_slug: Glossaire/AJAX <p>Avec les sites web interactifs et les standards modernes du web, AJAX est progressivement remplacé par des fonctions dans les cadres JavaScript et l'API standard officielle {{domxref("Fetch API")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/fr/docs/Glossaire">Glossaire du MND</a>: diff --git a/files/fr/glossary/bootstrap/index.html b/files/fr/glossary/bootstrap/index.html index e2fecc8a9b..2582be5642 100644 --- a/files/fr/glossary/bootstrap/index.html +++ b/files/fr/glossary/bootstrap/index.html @@ -14,7 +14,7 @@ original_slug: Glossaire/Bootstrap <p>Initialement, Bootstrap s'appelait Twitter Blueprint et a été développé par une équipe travaillant chez <a href="https://twitter.com/">Twitter</a>. Il prend en charge la conception réactive et propose des modèles de conception prédéfinis que vous pouvez utiliser directement ou personnalier selon vos besoin avec votre code. Vous n'avez pas non plus à vous soucier de la compatibilité avec les autres navigateurs, car Bootstrap est compatible avec tous les navigateurs modernes et les nouvelles versions de {{glossary("Microsoft Internet Explorer", "Internet Explorer")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{interwiki("wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} sur Wikipédia</li> <li><a href="https://getbootstrap.com/">Télécharger Bootstrap</a></li> diff --git a/files/fr/glossary/brotli_compression/index.html b/files/fr/glossary/brotli_compression/index.html index dc7157d402..3f595b3ed2 100644 --- a/files/fr/glossary/brotli_compression/index.html +++ b/files/fr/glossary/brotli_compression/index.html @@ -23,7 +23,7 @@ original_slug: Glossaire/brotli_compression <li><a href="https://caniuse.com/#feat=brotli">Brotli sur Caniuse</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details> diff --git a/files/fr/glossary/continuous_media/index.html b/files/fr/glossary/continuous_media/index.html new file mode 100644 index 0000000000..b67d26adcc --- /dev/null +++ b/files/fr/glossary/continuous_media/index.html @@ -0,0 +1,10 @@ +--- +title: Médias continus +slug: Glossary/Continuous_Media +translation_of: 'Glossary/Continuous_Media' +--- +<p>Les médias continus (« <i>Continuous Media</i> » en Anglais) sont des données pour lesquelles il existe une relation temporelle entre la source et la destination. Les exemples les plus courants de médias continus sont l'audio et la vidéo animée. Les médias continus peuvent être en temps réel (interactif), où il existe une relation temporelle « étroite » entre la source et le récepteur, ou en streaming (lecture), où la relation est moins stricte.</p> + +<p>CSS peut être utilisé dans une variété de contextes, y compris les médias imprimés. Et certains CSS, en particulier ceux qui sont utilisés pour la mise en page, se comportent différemment selon le contexte dans lequel ils se trouvent.</p> + +<p>Les médias continus identifient donc un contexte où le contenu n'est pas fragmenté. Il coule en continu. Le contenu Web affiché sur un écran est un média continu, tout comme le contenu parlé.</p> diff --git a/files/fr/glossary/favicon/index.html b/files/fr/glossary/favicon/index.html index f5a605604f..f421cff348 100644 --- a/files/fr/glossary/favicon/index.html +++ b/files/fr/glossary/favicon/index.html @@ -15,7 +15,7 @@ original_slug: Glossaire/Favicon <p>Ils sont utilisés pour améliorer l'expérience utilisateur et renforcer la cohérence de la marque. Lorsqu'une icône familière apparaît dans la barre d'adresse du navigateur, par exemple, elle aide les utilisateurs à savoir qu'ils sont au bon endroit.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{interwiki("wikipedia", "Favicon", "Favicon")}} sur Wikipédia</li> <li>Outils diff --git a/files/fr/glossary/http_2/index.html b/files/fr/glossary/http_2/index.html index 6888f9c516..97b4ec6e10 100644 --- a/files/fr/glossary/http_2/index.html +++ b/files/fr/glossary/http_2/index.html @@ -15,7 +15,7 @@ original_slug: Glossaire/HTTP_2 <p>HTTP/2 ne modifie en aucune façon la sémantique d'application de HTTP. Tous les concepts fondamentaux de HTTP 1.1, tels que les méthodes HTTP, les codes d'état, les URL et les champs d'en-tête, restent en place. En revanche, HTTP/2 modifie la façon dont les données sont formatées (encadrées) et transportées entre le client et le serveur, qui gèrent tous deux l'ensemble du processus, et dissimule la complexité de l'application dans la nouvelle couche d'encadrement. Par conséquent, toutes les applications existantes peuvent être fournies sans modification.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Culture générale <ol> diff --git a/files/fr/glossary/http_3/index.html b/files/fr/glossary/http_3/index.html index 5f25500ab6..bd46ed765a 100644 --- a/files/fr/glossary/http_3/index.html +++ b/files/fr/glossary/http_3/index.html @@ -10,7 +10,7 @@ original_slug: Glossaire/HTTP_3 --- <p><span class="seoSummary"><strong>HTTP/3</strong> est la prochaine révision majeure du <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">protocole réseau HTTP</a></span>, succédant à {{glossary("HTTP 2", "HTTP/2")}}. Le point majeur de HTTP/3 est qu'il utilise un nouveau protocole {{glossary("UDP")}} nommé QUIC, au lieu de {{glossary("TCP")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Culture générale <ol> diff --git a/files/fr/glossary/input_method_editor/index.html b/files/fr/glossary/input_method_editor/index.html index 6bb07a44ce..608e4b8145 100644 --- a/files/fr/glossary/input_method_editor/index.html +++ b/files/fr/glossary/input_method_editor/index.html @@ -14,7 +14,7 @@ original_slug: Glossaire/Input_method_editor <li>la saisie de texte à partir d'un écran tactile avec reconnaisance d'écriture manuscrite.</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia articles <ol> diff --git a/files/fr/glossary/internationalization_and_localization/index.html b/files/fr/glossary/internationalization_and_localization/index.html index 4b44e5f3d5..2cb6a543a3 100644 --- a/files/fr/glossary/internationalization_and_localization/index.html +++ b/files/fr/glossary/internationalization_and_localization/index.html @@ -20,7 +20,7 @@ original_slug: Glossaire/Internationalisation_et_localisation <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Disposition Flexbox</a> et <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Grid</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details> diff --git a/files/fr/glossary/intrinsic_size/index.html b/files/fr/glossary/intrinsic_size/index.html new file mode 100644 index 0000000000..684e7fac9f --- /dev/null +++ b/files/fr/glossary/intrinsic_size/index.html @@ -0,0 +1,15 @@ +--- +title: Taille intrinsèque +slug: Glossary/Intrinsic_Size +translation_of: 'Glossary/Intrinsic_Size' +--- + +<p>En CSS, la <em>taille intrinsèque</em> d'un élément est la taille qu'il aurait en fonction de son contenu, si aucun facteur externe ne lui était appliqué. Par exemple, les éléments en ligne sont dimensionnés de manière intrinsèque : la <code>largeur</code>, la <code>hauteur</code>, la marge et le remplissage vertical n'ont aucun impact, contrairement à la marge et au remplissage horizontal.</p> + +<p>La manière dont les tailles intrinsèques sont calculées est définie dans la <a href="https://www.w3.org/TR/css-sizing-3/#intrinsic-sizes">Spécification de dimensionnement intrinsèque et extrinsèque du CSS</a>.</p> + +<p>Le dimensionnement intrinsèque prend en compte la taille <code>min-content</code> et <code>max-content</code> d'un élément. Pour le texte, la taille du <code>min-content</code> serait le fait que le texte soit aussi petit que possible dans le sens linéaire sans provoquer de débordement, en faisant autant d'enveloppement souple que possible. Pour une boîte contenant une chaîne de texte, la taille du <code>min-content</code> serait définie par le mot le plus long. La valeur du mot-clé de <code>min-content</code> pour la propriété {{cssxref("width")}} dimensionnera un élément en fonction de la taille de <code>min-content</code>.</p> + +<p>La taille de <code>max-content</code> est l'inverse — dans le cas du texte, le texte s'afficherait aussi large que possible, sans enveloppement souple, même si un débordement était provoqué. La valeur du mot clé <code>max-content</code> expose ce comportement.</p> + +<p>Pour les images, la taille intrinsèque a la même signification — c'est la taille avec laquelle une image serait affichée si aucun CSS n'était appliqué pour modifier le rendu. Par défaut, les images sont supposées avoir une densité de "1x" pixels (1 pixel de périphérique = 1 pixel CSS) et donc la taille intrinsèque est simplement la hauteur et la largeur du pixel. La taille et la résolution intrinsèques de l'image peuvent être explicitement spécifiées dans les données {{Glossary("EXIF")}}. La densité de pixels intrinsèque peut également être définie pour les images à l'aide de l'attribut {{htmlattrxref("srcset", "img")}} (notez que si les deux mécanismes sont utilisés, la valeur <code>srcset</code> est appliquée "par-dessus" la valeur EXIF).</p> diff --git a/files/fr/glossary/lossless_compression/index.html b/files/fr/glossary/lossless_compression/index.html index b444a78fa4..56aef4c83d 100644 --- a/files/fr/glossary/lossless_compression/index.html +++ b/files/fr/glossary/lossless_compression/index.html @@ -15,7 +15,7 @@ original_slug: Glossaire/Compression_sans_perte <p>{{glossary("Lossy compression")}}, en revanche, résulte en une approximation inexacte, puisque certaines données du fichier d'origine ont été abandonnées, faisant de la compression avec perte une méthode irréversible.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <p><a href="/en-US/docs/Glossary">Glossary</a></p> <ol> diff --git a/files/fr/glossary/same-origin_policy/index.html b/files/fr/glossary/same-origin_policy/index.html index 0a735f4b04..793dbbc73d 100644 --- a/files/fr/glossary/same-origin_policy/index.html +++ b/files/fr/glossary/same-origin_policy/index.html @@ -8,7 +8,7 @@ original_slug: Glossaire/Same-origin_policy <p>Voir <a href="https://developer.mozilla.org/fr/docs/Web/Security/Same_origin_policy_for_JavaScript">Same origin policy</a> pour plus d’informations.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/fr/docs/Glossary">Glossaire MDN</a> : diff --git a/files/fr/glossary/type_coercion/index.html b/files/fr/glossary/type_coercion/index.html index e5d5d1c3b3..1fc965a03a 100644 --- a/files/fr/glossary/type_coercion/index.html +++ b/files/fr/glossary/type_coercion/index.html @@ -24,7 +24,7 @@ console.log(somme);</pre> <pre class="brush: js notranslate">somme = Number(valeur1) + valeur2;</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">Glossary</a> diff --git a/files/fr/glossary/web_server/index.html b/files/fr/glossary/web_server/index.html index 7befc0cad9..5c29bc8ee4 100644 --- a/files/fr/glossary/web_server/index.html +++ b/files/fr/glossary/web_server/index.html @@ -9,7 +9,7 @@ original_slug: Glossaire/Serveur_Web --- <p>Un serveur Web est un logiciel qui s'exécute souvent sur un serveur matériel offrant un service à un utilisateur, généralement appelé client. Un serveur, par contre, est un matériel qui vit dans une pièce remplie d'ordinateurs, communément appelée centre de données.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">Introduction to serversIntroduction aux serveurs</a></li> <li>{{Interwiki("wikipedia", "Server (computing)")}} sur Wikipédia</li> diff --git a/files/fr/glossary/whitespace/index.html b/files/fr/glossary/whitespace/index.html index 624d108ecb..a7e0d55330 100644 --- a/files/fr/glossary/whitespace/index.html +++ b/files/fr/glossary/whitespace/index.html @@ -19,7 +19,7 @@ original_slug: Glossaire/Whitespace <p><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">ECMAScript® 2015 Language Specification</a> spécifie plusieurs points de code Unicode sous forme de white space: U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> et autre catégorie “Zs” Tout autre point de code Unicode “Séparateur, esspace” <USP>. Ces caractères sont généralement inutiles pour la fonctionnalité du code.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Spécifications <ol> diff --git a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html index 27b6617080..33bf88edac 100644 --- a/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html +++ b/files/fr/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -6,24 +6,24 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> -<p>Dans cette leçon, nous verrons quelques unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p> +<p>Dans cette leçon, nous verrons quelques-unes des mises en forme créatives autorisées par les bordures et les arrière-plans CSS. On peut ajouter des dégradés, des images de fond, et des coins arrondis, les arrière-plans et les bordures répondent à de nombreux besoins de mise en forme CSS.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis:</th> - <td>Compétences informatique basiques , <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logicels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> + <th scope="row">Prérequis :</th> + <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>. )</td> </tr> <tr> - <th scope="row">Objectif:</th> + <th scope="row">Objectif :</th> <td>Apprendre comment mettre en forme l'arrière-plan et les bordures.</td> </tr> </tbody> </table> -<h2 id="Mettre_en_forme_larrière-plan_avec_CSS">Mettre en forme l'arrière-plan avec CSS</h2> +<h2 id="styling_backgrounds_in_css">Mettre en forme l'arrière-plan avec CSS</h2> -<p>La propriété CSS {{cssxref("background")}} est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> +<p>La propriété CSS <a href="/fr/docs/Web/CSS/background"><code>background</code></a> est un raccourci pour une famille de propriétés concernant l'arrière-plan. Nous les explorons dans cette partie. On peut rencontrer dans une feuille de style des déclarations de la propriété <code>background</code> difficiles à analyser, tant le nombre de valeurs qu'on peut lui passer est important.</p> <pre class="brush: css">.box { background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, @@ -32,29 +32,29 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>Nous reviendrons un peu plus loin sur le fonctionnement des raccourcis. Pour l'instant, passons en revue les propriétés CSS des arrière-plans.</p> -<h3 id="Couleur_de_fond">Couleur de fond</h3> +<h3 id="background_colors">Couleurs d'arrière-plan</h3> -<p>La propriété {{cssxref("background-color")}} définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a> définit la couleur d'arrière-plan d'un élément HTML. La propriété accepte comme valeur n'importe quelle <code><a href="/fr/docs/Web/CSS/color_value"><color></a></code>. La <code>background-color</code> s'étend sous le contenu dans la zone de remplissage (padding box) de l'élément.</p> -<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément {{htmlelement("span")}}.</p> +<p>Dans l'exemple ci-dessous, nous ajoutons des couleurs de fond à une boîte, un titre et un élément <a href="/fr/docs/Web/HTML/Element/span"><code><span></code></a>.</p> <p><strong>Expérimentez avec ce code, en faisant varier les valeurs <a href="/fr/docs/Web/CSS/color_value"><color></a> dans les différentes déclarations.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 700)}}</p> -<h3 id="Images_de_fond">Images de fond</h3> +<h3 id="background_images">Images d'arrière-plan</h3> -<p>La propriété {{cssxref("background-image")}} permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande, l'autre avec comme fond une petite image représentant une étoile.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a> permet d'afficher une image dans l'arrière-plan d'un élément. L'exemple ci-dessous montre deux boîtes — l'une avec une image de fond trop grande (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/balloons.jpg">balloons.jpg</a>), l'autre avec comme fond une petite image représentant une étoile (<a href="https://mdn.github.io/css-examples/learn/backgrounds-borders/star.png">star.png</a>).</p> -<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimension de la boîte, on n'en voit qu'un coin, alors qu'un image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> +<p>Cet exemple illustre deux points concernant l'utilisation d'images de fond. Par défaut, une image trop large n'est pas redimensionnée pour correspondre aux dimensions de la boîte, on n'en voit qu'un coin, alors qu'une image de fond ne remplissant pas la boîte sera automatiquement répétée en pavage pour occuper tout l'espace disponible. Dans l'exemple, l'image d'origine est juste une étoile.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 700)}}</p> -<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> +<p><strong>Si on spécifie une couleur de fond en plus de l'image de fond, l'image s'affiche par-dessus la couleur. Expérimentez ce comportement en ajoutant une propriété </strong><code>background-color</code><strong> dans l'exemple ci-dessus.</strong></p> -<h4 id="Contrôler_le_background-repeat">Contrôler le background-repeat</h4> +<h4 id="controlling_background-repeat">Contrôler la répétition de l'arrière-plan</h4> -<p>La propriété {{cssxref("background-repeat")}} permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-repeat"><code>background-repeat</code></a> permet de contrôler la répétition d'image pour former des pavages. Les valeurs possibles sont :</p> <ul> <li><code>no-repeat</code> — aucune répétition de l'arrière-plan.</li> @@ -63,13 +63,13 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <li><code>repeat</code> — comportement par défaut : répétition dans les deux directions.</li> </ul> -<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code><strong> et observez.</strong></p> +<p><strong>Expérimentez l'effet de ces valeurs dans l'exemple ci-dessous. La valeur est fixée à <code>no-repeat</code>, une seule étoile apparaît donc. Remplacez par <code>repeat-x</code> et <code>repeat-y</code> et observez.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 600)}}</p> -<h4 id="Dimensionner_limage_de_fond">Dimensionner l'image de fond</h4> +<h4 id="sizing_the_background_image">Dimensionner l'image de fond</h4> -<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété {{cssxref("background-size")}} — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> +<p>Dans l'exemple ci-dessus on voit qu'une image d'arrière-plan est recadrée quand elle dépasse de l'élément dont elle est le fond. Dans un tel cas, la propriété <a href="/fr/docs/Web/CSS/background-size"><code>background-size</code></a> — avec comme valeur une <a href="/fr/docs/Web/CSS/length">longueur</a> ou un <a href="/fr/docs/Web/CSS/percentage">pourcentage</a>, permet d'adapter l'image à l'élément pour en occuper tout le fond.</p> <p>On peut aussi utiliser les mots-clé :</p> @@ -90,9 +90,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> -<h4 id="Positionner_limage_de_fond">Positionner l'image de fond</h4> +<h4 id="positioning_the_background_image">Positionner l'image de fond</h4> -<p>La propriété {{cssxref("background-position")}} permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-position"><code>background-position</code></a> permet de choisir la position de l'arrière-plan à l'intérieur de la boîte dans laquelle il est appliqué. On utilise pour cela un système de coordonnées avec l'origine <code>(0,0)</code> au coin en haut à gauche de la boîte, l'axe (<code>x</code>) étant horizontal, l'axe (<code>y</code>) vertical.</p> <div class="blockIndicator note"> <p><strong>Note </strong>: La valeur par défaut de <code>background-position</code> est <code>(0,0)</code>.</p> @@ -100,7 +100,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p>Les valeurs les plus communes pour <code>background-position</code> se présentent sous la forme d'un couple — une valeur horizontale suivie d'une valeur verticale.</p> -<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page {{cssxref("background-image")}}):</p> +<p>Vous pouvez utiliser les mots-clé tels que <code>top</code> et <code>right</code> (vous trouverez les autres valeurs possibles sur la page <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>) :</p> <pre class="brush: css">.box { background-image: url(star.png); @@ -108,7 +108,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders background-position: top center; }</pre> -<p>Et <a href="/fr/docs/Web/CSS/length">Longueurs</a>, ou <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> +<p>Ainsi que des valeurs de <a href="/fr/docs/Web/CSS/length">longueurs</a>, ou des <a href="/fr/docs/Web/CSS/percentage">pourcentages</a> :</p> <pre class="brush: css">.box { background-image: url(star.png); @@ -116,7 +116,7 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders background-position: 20px 10%; }</pre> -<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> +<p>On peut utiliser simultanément mots-clé, dimensions et pourcentages, par exemple :</p> <pre class="brush: css">.box { background-image: url(star.png); @@ -124,9 +124,9 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders background-position: top 20px; }</pre> -<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédene. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> +<p>La syntaxe à quatre valeurs enfin permet d'indiquer la distance depuis certains bords de la boîte — dans ce cas, la longueur correspond à un décalage par rapport à la valeur précédente. Par exemple dans le CSS ci-dessous on positionne l'arrière-plan à 20px du haut et à 10px de la droite :</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; @@ -134,96 +134,96 @@ original_slug: Apprendre/CSS/Building_blocks/Backgrounds_and_borders <p><strong>Dans l'exemple ci-dessous, modifiez les valeurs pour déplacer l'étoile à l'intérieur de la boîte.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 600)}}</p> <div class="note"> -<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour{{cssxref("background-position-x")}} et {{cssxref("background-position-y")}}, qui permettent de fixer individuellement les positions sur chaque axe.</p> +<p><strong>Note :</strong> <code>background-position</code> est un raccourci pour<a href="/fr/docs/Web/CSS/background-position-x"><code>background-position-x</code></a> et <a href="/fr/docs/Web/CSS/background-position-y"><code>background-position-y</code></a>, qui permettent de fixer individuellement les positions sur chaque axe.</p> </div> -<h3 id="Arrière-plan_dégradé">Arrière-plan dégradé</h3> +<h3 id="gradient_backgrounds">Utiliser un dégradé comme arrière-plan</h3> -<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété {{cssxref("background-image")}}.</p> +<p>Un dégradé — quand on l'utilise pour arrière-plan — se comporte comme une image, il se paramètre aussi avec la propriété <a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>.</p> -<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> +<p>Vous en apprendrez plus sur les différents types de dégradés et tout ce qu'on peut faire avec sur la page MDN consacrée au type <code><a href="/fr/docs/Web/CSS/gradient"><gradient></a></code>. Une manière amusante de découvrir les dégradés est d'utiliser l'un des nombreux générateurs de dégradés CSS disponibles en ligne, par exemple <a href="https://cssgradient.io/">celui-là</a>. Créez votre dégradé puis copiez-collez le code source qui l'a généré.</p> <p>Essayez différents dégradés dans l'exemple ci-dessous. Dans les deux boîtes on trouve respectivement un dégradé linéaire étendu sur toute la boîte et un dégradé circulaire de taille donné, qui du coup se répète.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 650)}}</p> -<h3 id="Images_de_fond_multiples">Images de fond multiples</h3> +<h3 id="multiple_background_images">Images de fond multiples</h3> <p>Il est aussi possible d'ajouter plusieurs images en arrière-plan — il suffit de spécifier plusieurs valeurs pour <code>background-image</code>, chacune séparé par une virgule.</p> -<p>Quand vous faîtes cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> +<p>Quand vous faites cela, il est possible de se retrouver avec plusieurs arrière-plans qui se chevauchent. Les arrière-plans se superposeront les uns sur les autres, avec le dernier se retrouvant sur le dessus, chacun suivant à leur tour, jusqu'au premier.</p> <div class="note"> -<p><strong>Note :</strong> on peut joyeusement mélanger gradients et images de fond classiques.</p> +<p><strong>Note :</strong> On peut joyeusement mélanger dégradés et images de fond classiques.</p> </div> -<p>Les autres propriété <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> +<p>Les autres propriétés <code>background-*</code> peuvent aussi avoir une série de valeurs séparées de virgules, de la même manière que <code>background-image</code>:</p> -<pre class="brush: css notranslate">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right;</pre> -<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l' <code>image3</code> recevra la première valeur, et l' <code>image4</code> recevra la seconde valeur.</p> +<p>Chaque valeur des différentes propriétés va correspondre aux valeurs placées à la même position dans les autres propriétés. Au-dessus, par exemple, la valeur <code>background-repeat</code> de l' <code>image1</code> sera <code>no-repeat</code>. Cependant, qu'arrive-t-il quand différentes propriétés ont différents nombres de valeurs? La réponse est que s'il y a moins de valeurs, elles seront réutilisées — dans l'exemple au-dessus il y a quatre images de fond mais seulement deux valeurs <code>background-position</code>. Les deux premières valeurs seront appliquées aux deux premières images, puis elles seront réutilisées pour les images suivantes — l'<code>image3</code> recevra la première valeur, et l'<code>image4</code> recevra la seconde valeur.</p> -<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. To demonstrate the stacking order, try switching which background image comes first in the list. Or play with the other properties to change the position, size, or repeat values.</strong></p> +<p><strong>Jouons un peu. Dans l'exemple ci-dessous j'ai inclus deux images. Afin de visualiser l'ordre d'empilement, essayez d'alterner la première image d'arrière-plan dans la liste. Vous pouvez aussi modifier les autres propriétés afin de changer la position, la taille ou la répétition.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 600)}}</p> -<h3 id="Attachement_du_fond">Attachement du fond</h3> +<h3 id="background_attachment">Défilement de l'arrière-plan</h3> -<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. C'est contrôlé grâce à la propriété {{cssxref("background-attachment")}} , qui peut prendre ces valeurs:</p> +<p>Une autre option que nous avons à notre disposition pour les arrières-plans est de spécifier comment ils défilent quand le contenu défile lui-même. Ce comportement est contrôlé grâce à la propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> , qui peut prendre ces valeurs:</p> <ul> - <li><code>scroll</code>: Causes the element's background to scroll when the page is scrolled. If the element content is scrolled, the background does not move. In effect, the background is fixed to the same position on the page, so it scrolls as the page scrolls.</li> - <li><code>fixed</code>: Causes an element's background to be fixed to the viewport, so that it doesn't scroll when the page or element content is scrolled. It will always remain in the same position on the screen.</li> - <li><code>local</code>: This value was added later on (it is only supported in Internet Explorer 9+, whereas the others are supported in IE4+) because the <code>scroll</code> value is rather confusing and doesn't really do what you want in many cases. The <code>local</code> value fixes the background to the element it is set on, so when you scroll the element, the background scrolls with it.</li> + <li><code>scroll</code> : L'arrière-plan de l'élément défile lorsqu'on fait défiler la page. Si le contenu de l'élément défile, l'arrière-plan ne bouge pas. Dans la pratique, l'effet obtenu est que l'arrière-plan est fixé à la position de la page et défile comme elle.</li> + <li><code>fixed</code> : L'arrière-plan de l'élément est fixe dans la zone d'affichage (<i lang="en">viewport</i>) et il ne défile pas lorsqu'on fait défiler ou la page ou le contenu de l'élément. L'arrière-plan reste toujours à la même position sur l'écran.</li> + <li><code>local</code> : Cette valeur fut ajoutée plus tard en raison de la confusion engendrée par la valeur <code>scroll</code> et son comportement qui ne correspond pas aux cas d'usage. <code>local</code> permet de fixer l'arrière-plan sur l'élément sur lequel il est défini afin que, lorsqu'on fait défiler l'élément, l'arrière-plan défile avec lui.</li> </ul> -<p>The {{cssxref("background-attachment")}} property only has an effect when there is content to scroll, so we've made a demo to demonstrate the differences between the three values — have a look at <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (also <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">see the source code</a> here).</p> +<p>La propriété <a href="/fr/docs/Web/CSS/background-attachment"><code>background-attachment</code></a> n'a d'effet que lorsque le contenu défile. Pour observer cet effet, nous avons construit une démo afin d'illustrer les différences entre les trois valeurs : <a href="https://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (vous pouvez également consulter <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">le code source de cette démo</a>).</p> -<h3 id="Utiliser_la_propriété_raccourci_background">Utiliser la propriété raccourci background</h3> +<h3 id="using_the_background_shorthand_property">Utiliser la propriété raccourcie background</h3> -<p>As I mentioned at the beginning of this lesson, you will often see backgrounds specified using the {{cssxref("background")}} property. This shorthand lets you set all of the different properties at once.</p> +<p>Comme mentionné au début de cet article, vous verrez souvent des arrières-plans définis grâce à la propriété <a href="/fr/docs/Web/CSS/background"><code>background</code></a>. Cette propriété raccourcie permet de définir les différentes propriétés en une seule déclaration.</p> -<p>If using multiple backgrounds, you need to specify all of the properties for the first background, then add your next background after a comma. In the example below we have a gradient with a size and position, then an image background with <code>no-repeat</code> and a position, then a color.</p> +<p>Si vous utilisez plusieurs arrières-plans, vous devrez indiquer toutes les propriétés pour le premier arrière-plan puis ajouter l'arrière-plan suivant après une virgule. Dans l'exemple qui suit, on a un dégradé avec une taille et une position puis une image d'arrière-plan avec <code>no-repeat</code> et un position et enfin une couleur d'arrière-plan.</p> -<p>There are a few rules that need to be followed when writing background image shorthand values, for example:</p> +<p>Quelques règles sont à respecter lorsqu'on déclare des images d'arrière-plan avec cette propriété raccourcie :</p> <ul> - <li>A <code>background-color</code> may only be specified after the final comma.</li> - <li>The value for <code>background-size</code> may only be included immediately after <code>background-position</code>, separated with the '/' character, like this: <code>center/80%</code>.</li> + <li>La valeur pour <code>background-color</code> ne peut être définie qu'après la virgule finale.</li> + <li>La valeur pour <code>background-size</code> ne peut être incluse qu'immédiatement après celle <code>background-position</code> en la séparant de celle-ci avec une barre oblique (« / »), par exemple : <code>center/80%</code>.</li> </ul> -<p>Take a look at the MDN page for {{cssxref("background")}} to see all of the considerations.</p> +<p>N'hésitez pas à consulter la page de documentation pour <a href="/fr/docs/Web/CSS/background"><code>background</code></a> qui détaille ces différents points.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 850)}}</p> -<h3 id="Arrière-plans_et_accessibilité">Arrière-plans et accessibilité</h3> +<h3 id="accessibility_considerations_with_backgrounds">Arrière-plans et accessibilité</h3> -<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessu une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> +<p>Quand on place un texte sur une image ou une couleur de fond, il faut s'assurer d'un contraste suffisant pour une bonne lisibilité. Quand un texte est écrit par-dessus une image, déclarez toujours une <code>background-color</code> qui rendra le texte lisible si l'image n'est pas chargée.</p> <p>Les lecteurs d'écran ne traitent pas les images de fond, elles ne doivent donc pas être autre chose que décoratives ; tout contenu important doit faire partie de la page HTML et pas de la mise en forme du fond.</p> -<h2 id="Bordures">Bordures</h2> +<h2 id="borders">Bordures</h2> -<p>When learning about the Box Model, we discovered how borders affect the size of our box. In this lesson we will look at how to use borders creatively. Typically when we add borders to an element with CSS we use a shorthand property that sets the color, width, and style of the border in one line of CSS.</p> +<p>Lors de l'apprentissage du modèle de boîte, on a pu voir comment les bordures jouaient un rôle sur la taille de la boîte. Dans cette leçon, nous allons voir comment créer des bordures. Généralement, lorsqu'on ajoute des bordures à un élément avec CSS, on utilise une propriété raccourcie qui définit la couleur, l'épaisseur et le style de la bordure.</p> -<p>We can set a border for all four sides of a box with {{cssxref("border")}}:</p> +<p>On peut définir une bordure pour les quatre côtés d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> :</p> <pre class="brush: css">*.box { border: 1px solid black; }*</pre> -<p>Or we can target one edge of the box, for example:</p> +<p>On peut aussi cibler un seul des côtés de la boîte, par exemple :</p> <pre class="brush: css">.box { border-top: 1px solid black; }</pre> -<p>The individual properties for these shorthands would be:</p> +<p>Les propriétés individuelles équivalentes pour ces notations raccourcies seraient :</p> <pre class="brush: css">.box { border-width: 1px; @@ -231,7 +231,7 @@ background-position: 10px 20px, top right;</pre> border-color: black; }</pre> -<p>And for the longhands:</p> +<p>Pour la propriété qui concerne un des côtés :</p> <pre class="brush: css">.box { border-top-width: 1px; @@ -240,34 +240,34 @@ background-position: 10px 20px, top right;</pre> }</pre> <div class="note"> -<p><strong>Note :</strong> These top, right, bottom, and left border properties also have mapped <em>logical</em> properties which relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). We'll be exploring these in the next lesson, which covers <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">handling different text directions</a>.</p> +<p><strong>Note :</strong> Ces propriétés pour les bordures des côtés haut, droit, bas et gauche ont également des propriétés équivalentes <em>logiques</em> qui ciblent les différents côtés de la boîte en fonction du mode d'écriture du document (par exemple de gauche à droite, de droite à gauche ou bien encore de haut en bas). Nous aborderons celles-ci dans la prochaine leçon qui traitera <a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">de la directionnalité du texte</a>.</p> </div> -<p><strong>There are a variety of styles that you can use for borders. In the example below we have used a different border style for the four sides of my box. Play with the border style, width, and color to see how borders work.</strong></p> +<p><strong>Il existe différents styles qui peuvent être utilisés pour les bordures. Dans l'exemple qui suit, nous avons utilisé un style différent pour chacun des côtés de la boîte. N'hésitez pas à modifier l'exemple pour modifier le style, l'épaisseur et la couleur afin de voir comment les bordures fonctionnent.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 750)}}</p> -<h3 id="Coins_arrondis">Coins arrondis</h3> +<h3 id="rounded_corners">Coins arrondis</h3> -<p>On peut arrondir les coins d'une boîte avec la propriété {{cssxref("border-radius")}} and associated longhands which relate to each corner of the box. Two lengths or percentages may be used as a value, the first value defining the horizontal radius, and the second the vertical radius. In a lot of cases you will only pass in one value, which will be used for both.</p> +<p>On peut arrondir les coins d'une boîte avec la propriété <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a> ou les propriétés détaillées correspondantes (une pour chaque coin de la boîte). Cette propriété peut s'utiliser avec deux longueurs ou pourcentages : la première de ces valeurs définit le rayon horizontal et la seconde le rayon vertical. Dans de nombreux cas, on utilisera une seule valeur qui sera alors utilisée pour les deux rayons de courbure.</p> -<p>Par exemple, Pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> +<p>Par exemple, pour donner par exemple un rayon de 10px à chacun des quatre coins :</p> <pre class="brush: css">.box { border-radius: 10px; }</pre> -<p>Ou de donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> +<p>Ou pour donner au coin en haut à droite un rayon horizontal de 1em et un rayon vertical de 10% :</p> <pre class="brush: css">.box { border-top-right-radius: 1em 10%; }</pre> -<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jettez un œil à la page de documentation de {{cssxref("border-radius")}}, vous y trouverez la syntaxe pour les différentes options.</p> +<p>Dans l'exemple ci-dessus, nous avons d'abord fixé la valeur pour les quatre coins, puis modifié celle du coin en haut à droite. Vous pouvez jouer avec les différentes valeurs pour changer le rendu des coins. Jetez un œil à la page de documentation de <a href="/fr/docs/Web/CSS/border-radius"><code>border-radius</code></a>, vous y trouverez la syntaxe pour les différentes options.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 750)}}</p> -<h2 id="Jouer_avec_les_arrière-plans_et_les_bordures">Jouer avec les arrière-plans et les bordures</h2> +<h2 id="test_your_skills">Testez vos compétences !</h2> <p>Testons vos nouvelles connaissances : en partant de l'exemple fourni plus bas :</p> @@ -277,13 +277,13 @@ background-position: 10px 20px, top right;</pre> <li>Donnez au <code><h2></code> une couleur de fond noire semi-transparente, avec un texte en blanc.</li> </ol> -<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p> +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 700)}}</p> <div class="note"> <p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> </div> -<h2 id="Résumé">Résumé</h2> +<h2 id="summary">Résumé</h2> <p>Nous avons vu beaucoup de choses dans cette leçon, ajouter un arrière-plan à une boîte ou une bordure n'est pas si simple. N'hésitez pas à explorer les pages de référence des propriétés rencontrées si vous voulez creuser les points évoqués ici. Chaque page sur MDN vous proposera de nouveaux exemples sur lesquels vous pourrez continuer à vous entraîner et renforcer vos connaissances.</p> @@ -294,23 +294,23 @@ background-position: 10px 20px, top right;</pre> <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> + <ul> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> + </ul> + </li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> + <li>Arrières-plans et bordures</li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> + </ol>
\ No newline at end of file diff --git a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html index a32606765a..94b5601bf6 100644 --- a/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -1,35 +1,29 @@ --- title: Sélecteurs d'attribut slug: Learn/CSS/Building_blocks/Selectors/Attribute_selectors -tags: - - Apprendre - - Attribut - - CSS - - Débutant - - Sélecteurs translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut --- <p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> -<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p> +<p>Dans l'étude de HTML, nous avons vu les attributs d'un élément. En CSS, on peut utiliser ces attributs pour cibler les éléments. Cette leçon vous montre comment.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> + <th scope="row">Prérequis :</th> + <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Découvrir les sélecteurs d'attribut et comment les utiliser.</td> </tr> </tbody> </table> -<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2> +<h2 id="Sélecteur_de_présence_et_de_valeur">Sélecteur de présence et de valeur</h2> -<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p> +<p>Ces sélecteurs permettent de cibler un élément en fonction de la présence d'un attribut unique (par exemple <code>href</code>), ou sur des correspondances variées avec la valeur d'un attribut donné</p> <table class="standard-table"> <thead> @@ -43,18 +37,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <tr> <td><code>[<em>attr</em>]</code></td> <td><code>a[title]</code></td> - <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td> + <td>Cible les éléments avec un attribut du nom de <em>attr</em> — la valeur entre les crochets droits.</td> </tr> <tr> <td><code>[<em>attr</em>=<em>value</em>]</code></td> <td><code>a[href="https://example.com"]</code></td> - <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td> + <td>Cible les éléments dont l'attribut <em>attr</em> a la valeur <em>value</em> — la chaîne entre guillemets.</td> </tr> <tr> <td><code>[<em>attr</em>~=<em>value</em>]</code></td> <td><code>p[class~="special"]</code></td> <td> - <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p> + <p>Cible les éléments avec un attribut <em>attr</em> dont la valeur est exactement <em>value</em>, ou les éléments dont l'attribut <em>attr</em> contient une ou plusieurs valeurs, dont au moins une correspond à <em>value</em>.</p> <p>Notez que dans une liste de plusieurs valeurs, le séparateur est l'espace.</p> </td> @@ -62,7 +56,7 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <tr> <td><code>[<em>attr</em>|=<em>value</em>]</code></td> <td><code>div[lang|="zh"]</code></td> - <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td> + <td>Cible les éléments avec un attribut <em>attr</em> dont la valeur peut être exactement <em>value</em> ou peut commencer par <em>value</em> immédiatement suivie d'un trait d'union.</td> </tr> </tbody> </table> @@ -70,16 +64,16 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <p>Dans l'exemple ci-dessous vous voyez ces sélecteurs en action :</p> <ul> - <li>Avec <code>li[class]</code> on cible tout élément <code><li></code> possédant un attribut <code>class</code>. On cible ainsi tous les list items sauf le premier.</li> - <li><code>li[class="a"]</code> cible les <code><li></code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code><li></code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li> - <li><code>li[class~="a"]</code> cible tout élément <code><li></code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li> + <li>Avec <code>li[class]</code> on cible tout élément <code><li></code> possédant un attribut <code>class</code>. On cible ainsi tous les éléments de la liste sauf le premier.</li> + <li><code>li[class="a"]</code> cible les <code><li></code> appartenant à la classe <code>a</code> et seulement elle. Un élément <code><li></code> dans la classe <code>a</code> mais aussi dans une autre classe ne sera pas sélectionné. Ce sélecteur cible le deuxième item de la liste.</li> + <li><code>li[class~="a"]</code> cible tout élément <code><li></code> dont l'attribut <code>class</code> contient <code>a</code> dans sa liste de valeurs (séparées par des espaces). Les items deux et trois de la liste sont sélectionnés.</li> </ul> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p> -<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2> +<h2 id="Sélecteurs_ciblant_une_sous-chaîne">Sélecteurs ciblant une sous-chaîne </h2> -<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes <code>box-warning</code> et <code>box-error</code>, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p> +<p>Ces sélecteurs permettent une sélection plus fine des sous-chaînes à l'intérieur de la valeur de l'attribut. Par exemple, vous avez défini des classes <code>box-warning</code> et <code>box-error</code>, vous voulez cibler les classes dont le nom commence par "box-". Le sélecteur d'attribut <code>[class ^= "box-"]</code> est là pour ça.</p> <table class="standard-table"> <thead> @@ -93,18 +87,18 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <tr> <td><code>[<em>attr</em>^=<em>value</em>]</code></td> <td><code>li[class^="box-"]</code></td> - <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td> + <td>élément sélectionné quand la valeur <em>value</em> de l'attribut <em>attr </em>commence par la sous-chaîne <em>value.</em></td> </tr> <tr> <td><code>[<em>attr</em>$=<em>value</em>]</code></td> <td><code>li[class$="-box"]</code></td> - <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td> + <td>élément sélectionné quand la valeur de l'attribut <em>attr </em>finit par la sous-chaîne<em> value.</em> </td> </tr> <tr> <td><code>[<em>attr</em>*=value<em> </em>]</code></td> <td><code>li[class*="box"]</code></td> <td>élément sélectionné quand la<br> - la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td> + la sous-chaîne <em>value </em>apparaît quelque part dans la valeur de l'attribut <em>attr.</em></td> </tr> </tbody> </table> @@ -112,67 +106,51 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_d_atrribut <p>L'exemple suivant montre ces sélecteurs en action :</p> <ul> - <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li> - <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li> - <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelquepart un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li> + <li><code>li[class^="a"]</code> correspond à toute valeur d'attribut commençant par un <em>a,</em> ce sélecteur cible donc les deux premiers items de la liste.</li> + <li><code>li[class$="a"]</code> correspond à toute valeur d'attribut finissant par un <em>a,</em> ce sélecteur cible donc les items un et trois de la liste.</li> + <li><code>li[class*="a"]</code> correspond à toute valeur d'attribut contenant quelque part un <em>a,</em> ce sélecteur cible donc tous les items de la liste.</li> </ul> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p> <h2 id="Sensibilité_à_la_casse">Sensibilité à la casse</h2> -<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majucule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant la parenthèse fermante. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p> +<p>Pour cibler des valeurs d'attribut sans prendre en compte la casse (majuscule ou minuscule indifférentes), ajoutez la valeur <code>i</code> avant le crochet fermant. Ce drapeau signale au navigateur d'identifier les caractères ASCII sans se préoccuper de la casse (<em>a</em> = <em>A</em>). Sans le drapeau <code>i</code>, les valeurs seront identifiées selon la sensibilité à la casse de la langue du document — HTML est sensible à la casse.</p> -<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p> +<p>Dans l'exemple ci-dessous, le premier sélecteur cible les valeurs commençant par un <code>a</code> — seul le premier élément de la liste est ciblé, les deux suivants commencent par un A majuscule. Le second sélecteur est marqué du drapeau <em>insensible à la casse, </em>il cible donc tous les éléments de la liste.</p> <p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p> <div class="blockIndicator note"> -<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> -</div> - -<h2 id="À_faire_vous-mêmes">À faire vous-mêmes</h2> - -<p>Dans l'exemple live ci-dessous, ajoutez les sélecteurs d'attribut pour obtenir les comportements suivants :</p> - -<ul> - <li>Cibler l'élément <code><a></code> ayant un attribut <code>title</code> et colorer sa bordure en rose (<code>border-color: pink</code>).</li> - <li>Cibler l'élément <code><a></code> dont l'attribut <code>href</code> contient le mot <code>contact</code> quelque part dans sa valeur et colorer sa bordure en orange (<code>border-color: orange</code>).</li> - <li>Cibler l'élément <code><a></code> dont la valeur <code>href</code> commence par <code>https</code> et colorer sa bordure en vert (<code>border-color: green</code>).</li> -</ul> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-links.html", '100%', 800)}}</p> - -<div class="blockIndicator note"> -<p><strong>Note </strong>: Vous pouvez <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">jeter un œil à la solution ici</a> — mais essayez d'abord de la trouver par vous-même !</p> +<p><strong>Note </strong>: Dans des contextes normalement insensibles à la casse, on peut forcer la sensibilité avec la valeur <code>s</code> nouvellement introduite, mais sa prise en charge par les navigateurs est inégale ; elle n'est pas très utile dans un contexte HTML.</p> </div> <h2 id="Pas_suivants">Pas suivants</h2> -<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p> +<p>Nous en avons fini avec les sélecteurs d'attribut, vous pouvez maintenant continuer la visite et passer aux <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">sélecteurs de pseudo-classes et pseudo-éléments</a>.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p> <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> + <li>Sélecteurs d'attribut</li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/selectors/index.html b/files/fr/learn/css/building_blocks/selectors/index.html index 5cfbb2cd4e..2ba25e54d4 100644 --- a/files/fr/learn/css/building_blocks/selectors/index.html +++ b/files/fr/learn/css/building_blocks/selectors/index.html @@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> -<p class="summary">Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p> +<p>Dans {{Glossary("CSS")}}, les sélecteurs sont utilisés pour cibler les éléments {{glossary("HTML")}} à mettre en forme dans nos pages web. CSS propose une grande diversité de sélecteurs, offrant ainsi une précision très fine dans la façon de cibler les éléments. Dans cet article nous explorerons en détails le fonctionnement de ces différents types.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Notions de base en l'informatique, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">logiciels de base installés</a>, <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td> + <th scope="row">Prérequis :</th> + <td>Notions de base en l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base installés</a>, <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">savoir manipuler des fichiers</a>, connaissance de base de HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>.) et une première idée du fonctionnement de CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>.)</td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Voir dans les détails comment les sélecteurs CSS fonctionnent.</td> </tr> </tbody> </table> -<h2 id="Quest_ce_quun_sélecteur">Qu'est ce qu'un sélecteur ?</h2> +<h2 id="what_is_a_selector">Qu'est-ce qu'un sélecteur ?</h2> -<p>Vous les avez déjà rencontré : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet </em>de ce sélecteur.</p> +<p>Vous les avez déjà rencontrés : toute règle CSS commence par un sélecteur. Un sélecteur est une expression qui indique au navigateur à quelle entité HTML s'applique la règle CSS correspondante. Le ou les éléments ciblés par le sélecteur sont le <em>sujet</em> de ce sélecteur.</p> -<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> +<p><img alt="Du code où h1 est surligné." src="selector.png" style="border: 1px solid #cccccc;"></p> -<p>Vous avez rencontrés plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p> +<p>Vous avez rencontré plusieurs sélecteurs dans des articles précédents, vous avez vu que les sélecteurs ont différentes façons de cibler le document HTML — on peut par exemple cibler les éléments <code>h1</code>, ou la classe <code>.special</code>.</p> -<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, une spécification mature, la prise en charge par les navigateurs est donc complète.</p> +<p>En CSS, les sélecteurs sont définis dans la spécification CSS Selectors ; comme tout le reste de CSS, le bon fonctionnement des sélecteurs dépend de la prise en charge par les navigateurs. La plupart des sélecteurs que vous rencontrerez sont définis dans la <a href="https://www.w3.org/TR/selectors-3/">spécification de niveau 3 pour les sélecteurs</a>, une spécification mature, aussi la prise en charge par les navigateurs est excellente.</p> -<h2 id="Listes_de_sélecteurs">Listes de sélecteurs</h2> +<h2 id="selector_lists">Listes de sélecteurs</h2> -<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p> +<p>Quand un groupe de déclarations CSS s'applique à plusieurs éléments distincts, on peut combiner les sélecteurs individuels en une liste. Par exemple, si j'ai le même CSS pour un <code>h1</code> et pour une classe <code>.special</code>, je pourrais écrire deux règles :</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css">h1 { color: blue; } .special { color: blue; -} </code></pre> +}</pre> -<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p> +<p>ou bien une seule règle en combinant les sélecteurs, séparés par une virgule :</p> -<pre class="brush: css notranslate"><code>h1, .special { +<pre class="brush: css">h1, .special { color: blue; -} </code></pre> +}</pre> <p>L'espace est valide avant ou après la virgule. Vous trouverez peut-être la version suivante plus lisible avec un sélecteur par ligne :</p> -<pre class="brush: css notranslate"><code>h1, +<pre class="brush: css">h1, .special { color: blue; -} </code></pre> +}</pre> <p>Dans l'exemple live ci-dessous, essayez de combiner les sélecteurs dont les déclarations sont identiques. Le rendu visuel devrait être inchangé.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p> <p>Quand on regroupe ainsi des sélecteurs, si l'un des sélecteurs est invalide la règle toute entière sera ignorée.</p> -<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p> +<p>Dans l'exemple suivant, la règle avec le sélecteur de classe invalide sera ignorée, alors que le <code>h1</code> sera mis en forme comme prévu.</p> -<pre class="brush: css notranslate"><code>h1 { +<pre class="brush: css">h1 { color: blue; } ..special { color: blue; -} </code></pre> +}</pre> <p>En combinant les sélecteurs, la règle est considérée invalide et donc ignorée : ni <code>h1</code> ni les éléments de classe <code>.special</code> ne seront mis en forme.</p> -<pre class="brush: css notranslate"><code>h1, ..special { +<pre class="brush: css">h1, ..special { color: blue; -} </code></pre> +}</pre> -<h2 id="Types_de_sélecteurs">Types de sélecteurs</h2> +<h2 id="types_of_selectors">Types de sélecteurs</h2> <p>On peut regrouper les sélecteurs en différents groupes ; classer les sélecteurs par type vous aidera à identifier l'outil pertinent pour chaque situation. Dans les sections suivantes, nous passons en revue ces différents types de sélecteurs.</p> -<h3 id="Sélecteurs_de_type_de_classe_et_dID">Sélecteurs de type, de classe , et d'ID</h3> +<h3 id="type_class_and_id_selectors">Sélecteurs de type, de classe, et d'ID</h3> -<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code><h1></code> :</p> +<p>Ce groupe inclut les sélecteurs ciblant les élements HTML tels que <code><h1></code> :</p> -<pre class="brush: css notranslate">h1 { }</pre> +<pre class="brush: css">h1 { }</pre> <p>On trouve aussi les sélecteurs ciblant une classe :</p> -<pre class="brush: css notranslate">.box { }</pre> +<pre class="brush: css">.box { }</pre> -<p>ou une ID :</p> +<p>ou un ID :</p> -<pre class="brush: css notranslate">#unique { }</pre> +<pre class="brush: css">#unique { }</pre> -<h3 id="Sélecteurs_dattribut">Sélecteurs d'attribut</h3> +<h3 id="attribute_selectors">Sélecteurs d'attribut</h3> <p>Ce groupe de sélecteurs offre différents mécanismes pour cibler des éléments en fonction de la présence d'un attribut donné pour un élément donné :</p> -<pre class="brush: css notranslate">a[title] { }</pre> +<pre class="brush: css">a[title] { }</pre> <p>Ou même de baser la sélection sur la présence d'un attribut avec une valeur bien précise :</p> -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> +<pre class="brush: css">a[href="https://example.com"] { }</pre> -<h3 id="Pseudo-classes_et_pseudo-éléments">Pseudo-classes et pseudo-éléments</h3> +<h3 id="pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</h3> -<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p> +<p>Ce groupe de sélecteurs inclut les pseudo-classes, qui ciblent des éléments dans un état donné. Par exemple, la pseudo-classe <code>:hover</code> sélectionne un élément seulement s'il est survolé par le pointeur de la souris :</p> -<pre class="brush: css notranslate">a:hover { }</pre> +<pre class="brush: css">a:hover { }</pre> -<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code><p></code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code><span></code> et qu'après coup on appliquait un style sur cet élément.</p> +<p>Ce groupe inclut aussi les pseudo-éléments, qui ciblent une certaine partie d'un élément plutôt que l'élément tout entier. Par exemple, <code>::first-line</code> sélectionne la première ligne d'un texte contenu dans un élément (un <code><p></code> dans l'exemple ci-dessous), comme si la première ligne du texte mis en forme était placée entre <code><span></code> et qu'après coup on appliquait un style sur cet élément.</p> -<pre class="brush: css notranslate">p::first-line { }</pre> +<pre class="brush: css">p::first-line { }</pre> -<h3 id="Combinateurs">Combinateurs</h3> +<h3 id="combinators">Combinateurs</h3> -<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code><article></code> grâce au combinateur enfant (<code>></code>) :</p> +<p>Dans la dernière catégorie, on combine les sélecteurs pour cibler plus finement les éléments dans nos documents. L'exemple suivant sélectionne les paragraphes enfants directs de <code><article></code> grâce au combinateur enfant (<code>></code>) :</p> -<pre class="brush: css notranslate">article > p { }</pre> +<pre class="brush: css">article > p { }</pre> -<h2 id="À_faire_ensuite">À faire ensuite</h2> +<h2 id="next_steps">À faire ensuite</h2> -<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">sélecteurs de type, de classe, et d'ID</a>.</p> +<p>Vous pouvez consulter ci-dessous le tableau de référence des sélecteurs avec des liens directs vers les différents types de sélecteurs dans cette section <em>Apprendre</em> ou dans d'autres rubriques de MDN ; vous pouvez aussi suivre le fil de ce cours et en apprendre plus sur les <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">sélecteurs de type, de classe, et d'ID</a>.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> -<h2 id="Table_de_référence_des_sélecteurs">Table de référence des sélecteurs</h2> +<h2 id="reference_table_of_selectors">Table de référence des sélecteurs</h2> -<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.</p> +<p>Le tableau ci-dessous donne un aperçu des sélecteurs disponibles, ainsi que des liens vers les pages qui vous montreront comment utiliser chaque type de sélecteur. J'ai également inclus un lien vers la page MDN pour chaque sélecteur où vous pouvez vérifier les informations sur la prise en charge par les navigateurs. Pour la suite de ce cours, ou dans vos expériences CSS à venir, cette table sera votre référence quand vous rechercherez des informations sur les sélecteurs.</p> <table class="standard-table"> <thead> @@ -142,83 +142,83 @@ original_slug: Apprendre/CSS/Building_blocks/Selectors </thead> <tbody> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_type">Sélecteur de type</a></td> - <td><code>h1 { }</code></td> - <td><a href="/fr/docs/Apprendre/CSS/Building_blocks/Selectors/Sélecteurs_de_type_classe_ID">Sélecteurs de type</a></td> + <td><a href="/fr/docs/Web/CSS/Type_selectors">Sélecteur de type</a></td> + <td><code>h1 { }</code></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_universels">Sélecteur universel</a></td> - <td><code>* { }</code></td> - <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td> + <td><a href="/fr/docs/Web/CSS/Universal_selectors">Sélecteur universel</a></td> + <td><code>* { }</code></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#the_universal_selector">The universal selector</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_classe">Sélecteur de classe</a></td> - <td><code>.box { }</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td> + <td><a href="/fr/docs/Web/CSS/Class_selectors">Sélecteur de classe</a></td> + <td><code>.box { }</code></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#class_selectors">Class selectors</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_ID">Sélecteur d'ID</a></td> + <td><a href="/fr/docs/Web/CSS/ID_selectors">Sélecteur d'ID</a></td> <td><code>#unique { }</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#id_selectors">ID selectors</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_d_attribut">Sélecteur d'attribut</a></td> - <td><code>a[title] { }</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td> + <td><a href="/fr/docs/Web/CSS/Attribute_selectors">Sélecteur d'attribut</a></td> + <td><code>a[title] { }</code></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td> </tr> <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> + <td><a href="/fr/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td> <td><code>p:first-child { }</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> </tr> <tr> - <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> + <td><a href="/fr/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td> <td><code>p::first-line { }</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_descendant">Sélecteur descendant</a></td> + <td><a href="/fr/docs/Web/CSS/Descendant_combinator">Sélecteur descendant</a></td> <td><code>article p</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#descendant_selector">Descendant combinator</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_enfant">Sélecteur enfant</a></td> + <td><a href="/fr/docs/Web/CSS/Child_combinator">Sélecteur enfant</a></td> <td><code>article > p</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#child_combinator">Child combinator</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Combinateur_de_voisin_direct">Sélecteur de frére adjacent</a></td> + <td><a href="/fr/docs/Web/CSS/Adjacent_sibling_combinator">Sélecteur de frère adjacent</a></td> <td><code>h1 + p</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#adjacent_sibling">Adjacent sibling</a></td> </tr> <tr> - <td><a href="/fr/docs/Web/CSS/Sélecteurs_de_voisins_généraux">Sélecteur de frère général</a></td> + <td><a href="/fr/docs/Web/CSS/General_sibling_combinator">Sélecteur de frère général</a></td> <td><code>h1 ~ p</code></td> - <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td> + <td><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators#general_sibling">General sibling</a></td> </tr> - </tbody> + </tbody> </table> -<h2 id="Dans_ce_module">Dans ce module</h2> +<h2 id="in_this_module">Dans ce module</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html index 2fdf39d902..47e0ee79a1 100644 --- a/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/fr/learn/css/building_blocks/sizing_items_in_css/index.html @@ -6,131 +6,131 @@ original_slug: Apprendre/CSS/Building_blocks/Sizing_items_in_CSS --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> -<div></div> - -<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utlisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aiderons dans le futur.</div> - -<div></div> +<div>Dans les différentes leçons vues jusqu'à présent vous avez rencontré de nombreuses manières de dimensionner les éléments sur une page en utilisant CSS. Comprendre le dimensionnement des différentes caractéristiques de votre design est important. Cette leçon résumera les diverses méthodes pour appliquer une taille via CSS et définira également quelques termes au sujet du dimensionnement qui vous aideront dans le futur.</div> <table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prérequis:</th> - <td> - <p>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="https://developer.mozilla.org/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</p> - </td> - </tr> - <tr> - <th scope="row">Objectif:</th> - <td>Découvrir comment spécifier la taille des éléments en CSS.</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td> + <p>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps">Comment fonctionne CSS</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Découvrir comment spécifier la taille des éléments en CSS.</td> + </tr> + </tbody> </table> -<h2 id="La_taille_naturelle_ou_intrinsèque_des_choses">La taille naturelle ou intrinsèque des choses</h2> +<h2 id="the_natural_or_intrinsic_size_of_things">La taille naturelle ou intrinsèque des choses</h2> -<p>Tous les éléments HTML ont une taille "naturelle", définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle même.</p> +<p>Tous les éléments HTML ont une taille « naturelle », définie avant toute modification par CSS. Un exemple parlant est celui d'un élément image. Une image a une largeur et une hauteur définies dans le fichier image qu'elle incorpore dans la page. On parle d'une <strong>taille intrinsèque </strong>— qui provient de l'image elle-même.</p> -<p>Si vous placer une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code><img></code> ou avec CSS), cela l'affichera en utilisant sa taille intrasèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p> +<p>Si vous placez une image dans une page sans modifier sa hauteur ni sa largeur (que ce soit à en utilisant un attribut sur la balise <code><img></code> ou avec CSS), cela l'affichera en utilisant sa taille intrinsèque. Ci-dessous nous avons l'exemple d'une image à laquelle nous avons ajouté une bordure afin de bien délimiter sa taille.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> -<p>Un élément {{htmlelement("div")}} vide en revanche, n'a pas de taille en soi. Si vous ajouter une {{htmlelement("div")}} à votre HTML sans aucun contenu à l'intérieur,et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc) car il n'y a pas de contenu à l'interieur de celui ci.</p> +<p>Un élément <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> vide en revanche, n'a pas de taille en soi. Si vous ajouter une <a href="/fr/docs/Web/HTML/Element/div"><code><div></code></a> à votre HTML sans aucun contenu à l'intérieur, et que vous lui ajouter une bordure comme nous l'avons fait avec l'image ci-dessus, vous verrez une ligne s'afficher sur la page. Cette ligne résulte de la juxtaposition des bordures horizontales, car il n'y a aucun contenu entre les deux. De plus les bordures s'étendent sur toute la largeur disponible du conteneur, car il s'agit d'un élément de bloc. Un comportement avec lequel vous devriez déjà être familiarisé. Cet élément n'a pas de hauteur (ou plutôt pas de taille dans l'axe de bloc), car il n'y a pas de contenu à l'intérieur de celui-ci.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> -<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte a l'interieur de l'élément vide. Les bordures contiennent maintenant ce texte car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code><div></code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrasèque de l'élément — sa taille est définie par son contenu.</p> +<p>Dans l'exemple ci-dessus; essayez d'ajouter du texte à l'intérieur de l'élément vide. Les bordures contiennent maintenant ce texte, car la hauteur de l'élément est définie par son contenu. De plus, la taille de cette <code><div></code> dans l'axe de bloc provient maintenant de la taille du contenu. Là aussi il s'agit de la taille intrinsèque de l'élément — sa taille est définie par son contenu.</p> -<h2 id="Spécifier_une_taille">Spécifier une taille</h2> +<h2 id="setting_a_specific_size">Spécifier une taille</h2> -<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code><div></code> de l'exemple précédent — nous pouvons lui donner une {{cssxref("width")}} spécifique et une {{cssxref("height")}} spécifique, l'élément à désormais une taille définie peu importe ce qui est placé à l'interieur de celui ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui ci est plus important que l'espace alloué par son conteneur.</p> +<p>Nous pouvons bien entendu donner une taille spécifique aux éléments. Quand une taille est ainsi donnée à un élément (et que son contenu est adapté à cette taille), nous parlons de <strong>taille extrinsèque</strong>. Reprenons notre <code><div></code> de l'exemple précédent — nous pouvons lui donner une <a href="/fr/docs/Web/CSS/width"><code>width</code></a> spécifique et une <a href="/fr/docs/Web/CSS/height"><code>height</code></a> spécifique, l'élément a désormais une taille définie peu importe ce qui est placé à l'intérieur de celui-ci. Comme nous l'avons appris dans <a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">notre précédente leçon sur le concept d'overflow,</a> une hauteur définie peut générer un débordement du contenu si celui-ci est plus important que l'espace alloué par son conteneur.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> <p>Du fait de ce comportement parfois inattendu, fixer la hauteur d'un élément avec une longueur ou en pourcentage est une pratique à utiliser avec parcimonie sur le web.</p> -<h3 id="Avec_les_pourcentages">Avec les pourcentages</h3> +<h3 id="using_percentages">Avec les pourcentages</h3> -<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur auquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui ci correspond à un pourcentage de la largeur du conteneur parent.</p> +<p>De bien des manières, les pourcentages agissent de la même manière que les unités de longueur, et comme nous l'avons vu dans <a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">la leçon sur les valeurs et unités en CSS</a>, ils peuvent souvent être utilisés de manière interchangeable avec les unités de longueur. Lorsque vous utilisez les pourcentages vous devez seulement être conscient de la valeur à laquelle se réfère le pourcentage. Si vous donnez à un bloc enfant une largeur définie en pourcentage, celui-ci correspond à un pourcentage de la largeur du conteneur parent.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> -<p>En effet, les pourcentages sont determinés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code><div></code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code><div</code><code>></code> aurait normalement occupé dans l'élément parent.</p> +<p>En effet, les pourcentages sont déterminés en fonction de la taille de l'élément parent. Si aucun pourcentage n'est spécifié, notre <code><div></code> prendra 100% de l'espace disponible (car il s'agit du comportement par défaut d'un élément de type bloc). En revanche si nous lui donnons une largeur en pourcentage, ce pourcentage fera référence à l'espace que la <code><div</code><code>></code> aurait normalement occupé dans l'élément parent.</p> -<h3 id="Marges_et_remplissage_en_pourcentages">Marges et remplissage en pourcentages</h3> +<h3 id="percentage_margins_and_padding">Marges et remplissage en pourcentages</h3> -<p>Si vous définissez les <code>margins</code> (marges exterieurs) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété {{cssxref("margin")}} à 10% et la propriété {{cssxref("padding")}} à 10% également. Les marges intérieurs et exterieurs sur le haut et le bas de la boite ont la même taille que les marges extérieurs sur la gauche et la droite.</p> +<p>Si vous définissez les <code>margins</code> (marges extérieures) et les <code>paddings</code> (marges intérieurs) avec des pourcentages, vous noterez un comportement inattendu. Dans l'exemple ci-dessous nous avons une boite. Nous avons défini la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> à 10% et la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> à 10% également. Les marges intérieures et extérieures sur le haut et le bas de la boite ont la même taille que les marges extérieures sur la gauche et la droite.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> -<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p> +<p>On pourrait s'attendre, par exemple, à ce que le pourcentage des marges supérieures et inférieures soit un pourcentage de la hauteur de l'élément, et que le pourcentage des marges gauche et droite soit un pourcentage de la largeur de l'élément. Or, ce n'est pas le cas !</p> -<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p> +<p>Lorsque vous utilisez des marges et des remplissages définis en pourcentages, la valeur est calculée à partir de la <strong>taille en ligne</strong> — donc de la largeur lorsque vous travaillez dans un langage horizontal. Dans notre exemple, toutes les marges et tous les renforts représentent 10 % de la largeur. Cela signifie que vous pouvez avoir des marges et un remplissage de taille égale tout autour de la boîte. C'est un fait dont il faut se souvenir si vous utilisez les pourcentages de cette manière.</p> -<h2 id="tailles_min-_et_max-">tailles min- et max- </h2> +<h2 id="min-_and_max-_sizes">Tailles min- et max-</h2> -<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p> +<p>En plus de donner aux choses une taille fixe, nous pouvons demander à CSS de donner à un élément une taille minimale ou maximale. Si vous avez une boîte qui pourrait contenir une quantité variable de contenu, et que vous voulez toujours qu'elle ait <em>au moins</em> une certaine hauteur, vous pourriez lui attribuer la propriété <a href="/fr/docs/Web/CSS/min-height"><code>min-height</code></a>. La boîte sera toujours, au minimum, de cette hauteur, mais deviendra plus grande s'il y a plus de contenu que la boîte que sa hauteur minimale.</p> -<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p> +<p>Dans l'exemple ci-dessous, vous pouvez voir deux boîtes, toutes deux ayant une hauteur définie de 150 pixels. La boîte de gauche a une hauteur de 150 pixels ; la boîte de droite a un contenu qui a besoin de plus d'espace, et elle est donc devenue plus haute que 150 pixels.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> -<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p> +<p>C'est très utile pour traiter des quantités variables de contenu tout en évitant les débordements.</p> -<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p> +<p>Une utilisation courante de <a href="/fr/docs/Web/CSS/max-width"><code>max-width</code></a> consiste à faire en sorte que les images soient réduites si l'espace est insuffisant pour les afficher à leur largeur intrinsèque, tout en s'assurant qu'elles ne deviennent pas plus grandes que cette largeur.</p> -<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p> +<p>À titre d'exemple, si vous définissiez <code>width: 100%</code> sur une image, et que sa largeur intrinsèque était inférieure à son conteneur, l'image serait forcée de s'étirer et de s'agrandir, ce qui lui donnerait un aspect pixelisé. Si sa largeur intrinsèque était supérieure à celle de son conteneur, elle le déborderait. Aucun des deux cas n'est susceptible de correspondre à ce que vous souhaitez.</p> -<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p> +<p>Si vous utilisez plutôt <code>max-width : 100%</code>, l'image est capable de devenir plus petite que sa taille intrinsèque, mais s'arrêtera à 100% de sa taille.</p> -<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p> +<p>Dans l'exemple ci-dessous, nous avons utilisé trois fois la même image. La première image a reçu le <code>width: 100%</code> et se trouve dans un conteneur plus grand qu'elle, elle s'étire donc à la largeur du conteneur. La deuxième image a été dotée du <code>max-width : 100%</code> et ne s'étire donc pas pour remplir le conteneur. La troisième boîte contient à nouveau la même image, également avec <code>max-width : 100%</code> défini ; dans ce cas, vous pouvez voir comment elle a été réduite pour entrer dans le conteneur.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> -<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p> +<p>Cette technique est utilisée pour rendre les images <em>responsive</em>, de sorte que lorsqu'elles sont visualisées sur un appareil plus petit, elles sont réduites de manière appropriée. Vous ne devez cependant pas utiliser cette technique pour charger des images vraiment grandes et les réduire ensuite dans le navigateur. Les images doivent être correctement dimensionnées pour ne pas être plus grandes qu'elles ne doivent l'être pour la plus grande taille à laquelle elles sont affichées dans la conception. Le téléchargement d'images trop grandes ralentira votre site et peut coûter plus cher aux utilisateurs s'ils disposent d'une connexion limitée.</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p> +<div class="notecard note"> + <p><b>Note :</b> En savoir plus sur <a href="/fr/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">les techniques d'images responsives</a>.</p> </div> -<h2 id="Unités_de_la_fenêtre_daffichage">Unités de la fenêtre d'affichage</h2> +<h2 id="viewport_units">Unités de la fenêtre d'affichage</h2> -<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p> +<p>La fenêtre — la surface de la page montrée par le navigateur lorsqu'on navigue sur un site — a aussi des dimensions. Certaines unités CSS sont dédiées à la description des dimensions de la fenêtre — <code>vw</code> pour <em>viewport width</em> (largeur de la fenêtre), et <code>vh</code> pour <em>viewport height </em>(hauteur de la fenêtre). Grâce à ces unités vous pouvez dimensionner un objet en fonction de la fenêtre de l'utilisateur.</p> -<p><code>1vh</code> correspond à 1% dela hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de {{cssxref("font-size")}} 10vh.</p> +<p><code>1vh</code> correspond à 1% de la hauteur de la fenêtre, <code>1vw</code> à 1% sa largeur. Avec ces unités, on peut dimensionner des boîtes aussi bien que du texte. Dans l'exemple ci-dessous, la boîte a pour dimensions 20vh et 20vw. Elle contient la lettre <code>A</code>, de <a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a> 10vh.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> -<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code><iframe></code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p> +<p>Si vous changez les valeurs <code>vh</code> et <code>vw</code>, cela modifiera la taille du conteneur ou de la police ; changer la taille de la fenêtre modifiera également leurs tailles, car elles sont dimensionnées par rapport à la fenêtre de vue. Pour voir l'exemple changer lorsque vous modifiez la taille de la fenêtre, vous devrez charger l'exemple dans une nouvelle fenêtre de navigateur que vous pouvez redimensionner (car le <code><iframe></code> intégré qui contient l'exemple montré ci-dessus est sa fenêtre de vue). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Ouvrez l'exemple</a>, redimensionnez la fenêtre du navigateur et observez ce qui se passe pour la taille de la boîte et du texte.</p> + +<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p> + +<h2 id="test_your_skills">Testez vos compétences !</h2> -<p>Dimensionner les objets en fonction de la fenêtre peut s'avérer utile. Par exemple, pour afficher la section principale en pleine page, il suffit de lui attribuer 100vh, cela poussera le reste du contenu sous la fenêtre ; le reste du contenu n'apparaîtra qu'en la faisant défiler.</p> +<p>Nous avons abordé beaucoup de choses dans cet article, mais pouvez-vous vous souvenir des informations les plus importantes ? Vous pouvez trouver d'autres tests pour vérifier que vous avez retenu ces informations avant de passer à autre chose — voir <a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_tasks">Tester vos compétences : Dimensionnement</a>.</p> -<h2 id="Résumé">Résumé</h2> +<h2 id="summary">Résumé</h2> -<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p> +<p>Cette leçon a voulu vous sensibiliser aux difficultés principales qu'on rencontre dès qu'on veut donner une dimension aux objets sur le Web. Lorsque vous verrez <a href="/fr/docs/Learn/CSS/CSS_layout">les dispositions en CSS</a>, le dimensionnement deviendra crucial pour maîtriser les différents modes de disposition : autant en comprendre les concepts avant d'aller plus loin.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> -<h2 id="Dans_ce_cours">Dans ce cours</h2> +<h2 id="in_this_module">Dans ce module</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de type, de classe et d'ID</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attributs</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/The_box_model">Le modèle de boîte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrière-plans et bordures</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gestion de différentes directions de texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Débordements de contenu</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Définir la taille des éléments en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias et éléments de formulaire</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mise en page de tableaux</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Débogage de CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser votre CSS</a></li> </ol> diff --git a/files/fr/learn/css/building_blocks/the_box_model/index.html b/files/fr/learn/css/building_blocks/the_box_model/index.html index 82b3ffdeff..a673fb36d6 100644 --- a/files/fr/learn/css/building_blocks/the_box_model/index.html +++ b/files/fr/learn/css/building_blocks/the_box_model/index.html @@ -1,52 +1,37 @@ --- -title: Le modèle de Boîte +title: Le modèle de boîte slug: Learn/CSS/Building_blocks/The_box_model -tags: - - Boîte - - CSS - - Disposition - - Débutant - - Mise en page - - Model - - Modèle - - Position - - Positionnement - - border - - box - - display - - margin - - padding translation_of: Learn/CSS/Building_blocks/The_box_model original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> -<p>En CSS, tout élement est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des élements d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p> +<p>En CSS, tout élément est inclus dans une boîte ("<em>box</em>" en anglais). Comprendre le fonctionnement de ces boîtes est essentiel pour maîtriser la mise en page CSS ainsi que le positionement des éléments d'une page HTML. Dans cette leçon, nous verrons en détails le <em>Modèle de Boîtes CSS</em> - son fonctionnement ainsi que sa terminologie - pour vous permettre de réaliser des mises en pages plus complexes.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis:</th> - <td>Compétences informatique basiques, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/en-US/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td> + <th scope="row">Prérequis :</th> + <td>Compétences informatique basiques, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Logiciels de base installés</a>, connaissance simple en <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">manipulation de fichiers</a>, les bases du HTML (voir <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction au HTML</a>), et une esquisse du fonctionnement du CSS (voir <a href="/fr/docs/Learn/CSS/First_steps">premiers pas en CSS</a>).</td> </tr> <tr> - <th scope="row">Objectif:</th> + <th scope="row">Objectif :</th> <td>Apprendre les principes du Modèle de Boîte en CSS, ce qui constitue le Modèle de Boîte et comment passer au modèle alternatif.</td> </tr> </tbody> </table> -<h2 id="Les_Boîtes_en_ligne_et_en_bloc">Les Boîtes "en ligne" et "en bloc"</h2> +<h2 id="block_and_inline_boxes">Les boîtes en ligne et boîte de bloc</h2> -<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em>). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis à vis des autres boîtes :</p> +<p>En CSS, il existe deux type de boîtes : les boîtes <strong>en bloc</strong> ("<em>block boxes</em>" en anglais) et les boîtes <strong>en ligne</strong> (<em>"inline boxes"</em> en anglais ou également « boîtes en incise » en français). Ces deux qualifications renvoient au comportement de la boîte au sein de la page et vis-à-vis des autres boîtes :</p> <p>Si une boîte est définie en bloc, elle suivra alors les règles suivantes :</p> <ul> <li>La boîte s'étend en largeur pour remplir totalement l'espace offert par son conteneur. Dans la plupart des cas, la boîte devient alors aussi large que son conteneur, occupant 100% de l'espace disponible.</li> <li>La boîte occupe sa propre nouvelle ligne et créé un retour à la ligne, faisant ainsi passer les éléments suivants à la ligne d'après.</li> - <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) sont toujours respectées.</li> - <li>Les propriétés {{cssxref("padding")}}, {{cssxref("margin")}} et {{cssxref("border")}} — correspondantes respectivement aux écarts de remplissage interne, externe et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li> + <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) sont toujours respectées.</li> + <li>Les propriétés <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a> — correspondantes respectivement aux écarts de <i lang="en">padding</i>, à la marge et à la bordure de la boîte — auront pour effet de repousser les autres éléments.</li> </ul> <p>À moins que l'on ne décide de changer le type de positionnement de la boîte en "en ligne", certains éléments tels que les titres (<code><h1></code>,<code><h2></code>, etc.) et les paragraphes (<code><p></code>) utilisent le mode "bloc" comme propriété de positionnement extérieur par défaut.</p> @@ -55,40 +40,40 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <ul> <li>La boîte ne crée pas de retour à la ligne, les autres éléments se suivent donc en ligne.</li> - <li>Les propriétés de largeur ({{cssxref("width")}}) et de hauteur ({{cssxref("height")}}) ne s'appliquent pas.</li> - <li>Le padding, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li> - <li>Le padding, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li> + <li>Les propriétés de largeur (<a href="/fr/docs/Web/CSS/width"><code>width</code></a>) et de hauteur (<a href="/fr/docs/Web/CSS/height"><code>height</code></a>) ne s'appliquent pas.</li> + <li>Le <i lang="en">padding</i>, les marges et les bordures verticales (en haut et en bas) seront appliquées mais ne provoqueront pas de déplacement des éléments alentours.</li> + <li>Le <i lang="en">padding</i>, les marges et les bordures horizontales (à gauche et à droite) seront appliquées et provoqueront le déplacement des éléments alentours.</li> </ul> <p>Les éléments <code><a></code>, utilisés pour les liens, ou encore <code><span></code>, <code><em></code> et <code><strong></code> sont tous des éléments qui s'affichent "en ligne" par défaut.</p> -<p>Le type de boîte appliqué à un élement est défini par la valeur de la propriété {{cssxref("display")}} tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieur de positionnement (ou "<em>display</em>" en anglais).</p> +<p>Le type de boîte appliqué à un élément est défini par la valeur de la propriété <a href="/fr/docs/Web/CSS/display"><code>display</code></a> tel que <code>block</code> ou <code>inline</code>, et se réfère à la valeur extérieure de positionnement (ou "<em>display</em>" en anglais).</p> -<h2 id="Aparté_Les_positionnements_intérieurs_et_extérieurs">Aparté : Les positionnements intérieurs et extérieurs</h2> +<h2 id="aside_inner_and_outer_display_types">Aparté : les positionnements intérieurs et extérieurs</h2> <p>Au point où nous en sommes, il faut aborder la différence entre les propriétés de positionnement <strong>intérieurs</strong> ("<em>inner dipslay</em>") et <strong>extérieurs</strong> ("<em>outer display</em>"). Comme nous l'avons évoqué, les boîtes en CSS possèdent un type de positionnement <em>extérieur</em> qui détermine si la boîte est "en ligne" ou bien "en bloc".</p> -<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des élements contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p> +<p>Cependant, les boîtes ont aussi un type de positionnement intérieur, qui décrit le comportement de mise en page des éléments contenus dans la boîte. Par défaut, les éléments contenus dans la boîte sont affichés dans la <strong><a href="/fr/docs/Learn/CSS/CSS_layout/Normal_Flow">disposition normale</a></strong>, ce qui signifie qu'ils se comportent exactement comme n'importe quel autre élément "en bloc" ou "en ligne" (comme décrit auparavant).</p> -<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type depositionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p> +<p>Ce type de positionnement intérieur peut naturellement être modifié, en utilisant la valeur <code>flex</code> de la propriété <code>display</code>. Ainsi, si on donne la propriété <code>display: flex;</code> à un élément, son type de positionnement extérieur est "en bloc" (<code>block</code>), mais son type de positionnement intérieur est modifié en <code>flex</code>. Tout élément directement enfant de cette boîte se voit alors changé en élément flex, et sera mis en page selon les règles précisées dans les spécifications de <a href="/fr/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, dont on reparlera plus tard.</p> <div class="blockIndicator note"> -<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> +<p><strong>Note </strong>: Pour en apprendre d'avantage sur les valeurs prises par la propriété display, et le comportement des boîtes dans une mise en page en bloc ou en ligne, jettez un coup d'oeil au guide MDN sur la <a href="/fr/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Disposition en ligne et en bloc</a>.</p> </div> -<p>Lorque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> +<p>Lorsque vous en apprendrez plus sur la mise en page en CSS, vous découvrirez une variété d'autres valeurs de positionnement intérieur pour une boîte, tel que <code>flex</code>, ou encore <code><a href="/fr/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p> -<p>Les dipositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p> +<p>Les dispositions "en ligne" et "en bloc" demeurent néanmoins le comportement par défaut des éléments sur le Web — ce qui, comme nous l'avons vu, est appelé la <strong>disposition normale</strong> ("<em>normal flow</em>" en anglais), puisque sans instructions supplémentaires de notre part, c'est ainsi que les boîtes sont mises en page.</p> -<h2 id="Exemples_de_quelques_types_de_positionnement">Exemples de quelques types de positionnement</h2> +<h2 id="examples_of_different_display_types">Exemples de quelques types de positionnement</h2> -<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure (un cadre) ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p> +<p>Lançons nous à présent dans la pratique et étudions quelques exemples. Vous trouverez ci-dessous trois éléments HTML différents, mais qui sont tous en postionnement extérieur "en bloc" (<code>block</code>). Le premier est un paragraphe, possèdant une bordure ajoutée en CSS. Le navigateur va alors disposer l'élément comme une boîte "en bloc" lors de sa phase de rendu : le paragraphe occupe alors sa propre nouvelle ligne et s'étend en largeur pour occuper tout l'espace disponible.</p> -<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenue dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p> +<p>Le deuxième élément est une liste, qui est disposée selon la règle <code>display: flex;</code>. Ceci définit une mise en page "flex" pour tous les éléments contenus dans la liste, bien que la liste en elle-même est en disposition "en bloc" — c'est pourquoi elle s'étend en largeur sur une nouvelle ligne, exactement comme le premier paragraphe.</p> <p>Juste en dessous, se trouve un autre paragraphe, diposé en bloc comme le précédent, dans lequel sont insérés deux éléments <code><span></code>. Ces deux éléments sont par défaut disposés "en ligne". Cependant, on a ajouté à l'un des deux <code><span></code> une classe CSS nommée "block" qui lui attribue la propriété <code>display: block;</code>, ce qui explique la différence de mise en page observée.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1050)}}</p> <p>Nous avons dans cet exemple le comportement typique d'un élément en ligne (<code>inline</code>), observant chacune des règles énoncées plus haut : l'élément <code><span></code> du premier paragraphe ne force pas de retour à la ligne et se place à la suite - <em>en ligne</em> donc - des autres éléments.</p> @@ -98,38 +83,38 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p><strong>Dans cet exemple, nous vous invitons à passer de <code>display: inline;</code> à <code>display: block;</code> ou encore de <code>display: inline-flex;</code> à <code>display: flex;</code> pour observer les modifications apportées par ces modes de positionnement.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> -<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environement dans la mise en page.</p> +<p>Vous rencontrerez des mises en page de type "flex" plus tard dans ces lessons, pas d'inquiétude si ce type de positionnement n'est pas maîtrisé. L'important est ici de se souvenir que c'est la valeur de la propriété <code>display</code> qui permet de modifier l'affichage extérieur (en ligne ou en bloc), ce qui définit l'interaction de la boîte par rapport à son environnement dans la mise en page.</p> <p>Pour le reste de la leçon, nous ne parlerons plus que du <strong>type de positionnement extérieur</strong>.</p> -<h2 id="Quest-ce_que_le_Modèle_de_Boîte_en_CSS">Qu'est-ce que le Modèle de Boîte en CSS ?</h2> +<h2 id="what_is_the_css_box_model">Qu'est-ce que le modèle de boîte CSS ?</h2> -<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir le <em>margin</em> (remplissage extérieur), le <em>border</em> (cadre), le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p> +<p>Le modèle de boîte que nous allons voir s'applique totalement aux boîtes en bloc, mais les boîtes en ligne ne reprennent que certains aspects — le modèle est alors simplifié ! Ce modèle définit comment chaque composant de la boîte, à savoir la <em>marge</em>, la <em>bordure</em>, le <em>padding</em> (remplissage intérieur) et le contenu, fonctionnent ensemble pour former l'aspect final rendu à l'écran. Pour ajouter un soupçon de complexité, il est aussi possible de passer du modèle standard à un modèle alternatif.</p> -<h3 id="Les_composants_dune_boîte">Les composants d'une boîte</h3> +<h3 id="parts_of_a_box">Les composants d'une boîte</h3> <p>Lorsque l'on crée une boîte en bloc, on se retrouve avec les composants suivant :</p> <ul> - <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS {{cssxref("width")}} et {{cssxref("height")}}.</li> - <li><strong>La boîte de padding</strong> <strong>(marge intérieure) </strong>: Le padding est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("padding")}} et ses autres propriétés connexes.</li> - <li><strong>La boîte du cadre </strong>: Le cadre englobe le contenu et le padding pour former une bordure. Sa taille et son style sont paramétrés par la propriété {{cssxref("border")}} et ses propriétés sous-jacentes.</li> - <li><strong>La boîte de margin (marge extérieure)</strong> : Le margin est la couche la plus à l'extérieur, englobant le contenu, le padding and le border. Comme le padding, il s'agit d'une zone vierge d'espacement mais qui est cette fois située a l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être controllée sur chaque côté en utilisant la propriété {{cssxref("margin")}} et ses autres propriétés connexes.</li> + <li><strong>La boîte de contenu </strong>: Il s'agit de la zone où sont affichés les éléments contenus par notre boîte, qui peut être dimensionnée en utilisant les propriétés CSS <a href="/fr/docs/Web/CSS/width"><code>width</code></a> et <a href="/fr/docs/Web/CSS/height"><code>height</code></a>.</li> + <li><strong>La boîte de <i lang="en">padding</i></strong> <strong>(marge intérieure) </strong>: Le <i lang="en">padding</i> (ou remplissage en français) est une zone vierge qui se présente comme un espacement encadrant le contenu; sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et ses autres propriétés connexes.</li> + <li><strong>La boîte de bordure </strong>: La bordure englobe le contenu et le <i lang="en">padding</i> pour former une bordure. Sa taille et son style sont paramétrés par la propriété <a href="/fr/docs/Web/CSS/border"><code>border</code></a> et ses propriétés sous-jacentes.</li> + <li><strong>La boîte de marge </strong>: La marge est la couche la plus à l'extérieur, englobant le contenu, le <i lang="en">padding</i> et la bordure. Comme le <i lang="en">padding</i>, il s'agit d'une zone vierge d'espacement mais qui est cette fois située à l'extérieur de l'élément, séparant l'élément des autres éléments de la page. sa taille peut être contrôlée sur chaque côté en utilisant la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> et ses autres propriétés connexes.</li> </ul> <p>Le schéma ci-dessous montre la structure de ces différentes couches:</p> -<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> +<p><img alt="Diagramme du modèle de boîte" src="box-model.png"></p> -<h3 id="Le_Modèle_Standard_de_Boîte_CSS">Le Modèle Standard de Boîte CSS</h3> +<h3 id="the_standard_css_box_model">Le modèle de boîte CSS standard</h3> -<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille des padding et du border (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. Le margin étant extérieur, il ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p> +<p>Dans le modèle standard, lorsque vous spécifiez les propriétés de largeur (<code>width</code>) et de hauteur (<code>height</code>), celles-ci définissent alors la hauteur et la largeur de la boîte de contenu (la boîte la plus à l'intérieur donc). La taille du <i lang="en">padding</i> et de la bordure (s'ils existent) s'ajoutent à la largeur et à la hauteur définies dans <code>width</code> et <code>height</code> pour obtenir les dimensions totales occupées par la boîte. La marge étant extérieure, elle ne rentre pas dans le compte. Ce principe est illustré dans l'exemple ci-dessous.</p> <p>En prenant une boîte définie avec les valeurs suivantes de <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code> :</p> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { width: 350px; height: 150px; margin: 10px; @@ -140,166 +125,166 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p>L'espace occupé par notre boîte dans le modèle standard vaut alors 410px (350 + 25 + 25 + 5 + 5), et la hauteur, 210px (150 + 25 + 25 + 5 + 5), en ajoutant bien les valeurs de <code>padding</code> et de <code>border</code> (deux fois, car ces marges sont présentes aux deux extrêmités de la largeur et de la longeur), aux valeurs de <code>width</code> et de <code>height</code>.</p> -<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> +<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte standard." src="standard-box-model.png"></p> <div class="blockIndicator note"> -<p><strong>Note </strong>: Le margin (marge extérieure) n'est pas comptabilisé dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc au border (le cadre) et ne s'étend pas au margin.</p> +<p><strong>Note </strong>: La marge n'est pas comptabilisée dans la taille totale de la boîte — car bien qu'elle affecte l'espace que la boîte va prendre en définitive dans la page, il ne s'agit que de l'espace extérieur à la boîte. La zone couverte par la boîte s'arrête donc à la bordure et ne s'étend pas à la marge.</p> </div> -<h3 id="Le_Modèle_Alternatif_de_Boîte_CSS">Le Modèle Alternatif de Boîte CSS</h3> +<h3 id="the_alternative_css_box_model">Le modèle de boîte CSS alternatif</h3> -<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constament les dimensions du border et du padding aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le padding et le border. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimension la taille du padding et du border. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes: width = 350px, height = 150px.</p> +<p>À ce stade, vous pourriez penser qu'il n'est pas très commode d'avoir à ajouter constamment les dimensions de la bordure et du <i lang="en">padding</i> aux dimensions du conteneur pour obtenir les dimensions totales de la boîte, et vous n'auriez pas tort ! Pour cela, le CSS possède un modèle de boîte alternatif introduit peu de temps après le modèle standard. En utilisant ce modèle, les paramètres width et height définissent la largeur et la hauteur <strong>totale</strong> de la boîte en comprenant le contenu, le <i lang="en">padding</i> et la bordure. Ainsi, pour obtenir la taille du contenu, il faut retirer aux dimensions la taille du <i lang="en">padding</i> et de la bordure. En reprenant l'exemple précédent avec ce modèle, on obtiendrait les dimensions suivantes : largeur = 350px, hauteur = 150px.</p> -<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> +<p><img alt="Illustration de la taille de la boîte lorsqu'on utilise le modèle de boîte alternatif." src="alternate-box-model.png"></p> -<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte du cadre</strong> (la "<em>border box</em>") comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p> +<p>Le navigateur utilise le modèle standard par défaut. Pour utiliser le modèle alternatif, il faut définir la propriété <code>box-sizing: border-box;</code> sur notre boîte. Cela revient à demander au navigateur de considérer la <strong>boîte de la bordure</strong> comme la zone d'effet de <code>width</code> et <code>height</code>, et non la boîte du contenu comme dans le modèle standard !</p> -<pre class="brush: css notranslate"><code>.box { +<pre class="brush: css">.box { box-sizing: border-box; -} </code></pre> +} </pre> -<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répendu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide de ces quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code><html></code> et en utilisant l'effet cascade du CSS en paramètrant tous les autres éléments sur la valeur hérité du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du coté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p> +<p>Si vous désirez utiliser le modèle alternatif sur tous vos éléments — ce qui est un choix répandu parmi certains cercles de développeurs — vous pouvez le faire simplement à l'aide des quelques instructions ci-dessous, en utilisant <code>box-sizing</code> sur l'élément <code><html></code> et en utilisant l'effet cascade du CSS en paramétrant tous les autres éléments sur la valeur héritée du parent (<code>inherit</code>). Si vous tenez à comprendre le raisonnement derrière ce code, regardez du côté de <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">l'article des Astuces CSS sur box-sizing</a>.</p> -<pre class="brush: css notranslate"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> -<span class="punctuation token">}</span> -<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> - <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: css">html { + box-sizing: border-box; +} +*, *::before, *::after { + box-sizing: inherit; +}</pre> <div class="blockIndicator note"> -<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> +<p><strong>Note </strong>: Pour l'anecdote, le navigateur Internet Explorer utilisait historiquement le modèle alternatif par defaut — sans pour autant fournir un moyen de passer à l'autre modèle !</p> </div> -<h2 id="Manipuler_les_modèles_de_boîtes">Manipuler les modèles de boîtes</h2> +<h2 id="playing_with_box_models">Manipuler les modèles de boîte</h2> <p>Dans l'exemple ci-dessous, se trouvent deux boîtes. Ces deux boîtes possèdent la classe <code>.box</code> qui leur confère les mêmes valeurs pour les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. La seule différence est que la seconde boîte utilise le modèle alternatif.</p> <p><strong>Pouvez-vous modifier les dimensions de la seconde boîte (en lui ajoutant le CSS dans la classe <code>.alternate</code>) pour lui permettre d'avoir la même hauteur et largeur finale que l'autre boîte ?</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> <div class="blockIndicator note"> <p><strong>Note</strong>: vous pouvez trouver une solution <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">ici</a>.</p> </div> -<h3 id="Utiliser_les_DevTools_pour_voir_le_modèle_de_boîte">Utiliser les DevTools pour voir le modèle de boîte</h3> +<h3 id="use_browser_devtools_to_view_the_box_model">Utiliser les outils de développement pour voir le modèle de boîte</h3> -<p>Les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, padding, border et margin) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p> +<p>Les <a href="/fr/docs/Learn/Common_questions/What_are_browser_developer_tools">outils de développement</a> de votre navigateur peuvent vous permettre d'apréhender les concepts de boîte bien plus facilement. Si vous inspectez un élément dans les DevTools de Firefox (clic droit > Examiner l'élément), vous pouvez avoir accès à toutes les propriétés des différentes couches de la boîte (contenu, <i lang="en">padding</i>, bordure et marge) dans l'interface graphique interactive montrée ci-dessous. Inspecter un élément ainsi, c'est s'assurer qu'il possède bien la taille que l'on désire !</p> -<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> +<p><img alt="Inspecter le modèle de boîte d'un élément grâce aux outils de développement de Firefox" src="box-model-devtools.png"></p> -<h2 id="Margins_paddings_et_borders">Margins, paddings, et borders</h2> +<h2 id="margins_padding_and_borders">Marges, remplissages (paddings), et bordures</h2> -<p>Nous avons déjà rencontré ensemble les propriétés {{cssxref("margin")}}, {{cssxref("padding")}} et {{cssxref("border")}}, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatres côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparement chaque côté pour plus de personalisation.</p> +<p>Nous avons déjà rencontré ensemble les propriétés <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a> et <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ainsi que leurs effets dans les exemples précédents. Mais ces propriétés sont des <strong>raccourcis</strong> qui nous permettent de définir ces règles pour les quatre côtés de la boîte d'un seul coup. Ces raccourcis ont donc aussi leurs propriétés équivalentes permettant de régler séparément chaque côté pour plus de personalisation.</p> <p>Regardons de plus près ces nouvelles propriétés.</p> -<h3 id="Les_Margins_Marges_extérieures">Les Margins (Marges extérieures)</h3> +<h3 id="Margin">Les marges</h3> -<p>Le margin est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). Le margin repousse les éléments alentours de le boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, le margin est toujours décompté en surplus de la taille totale de la boîte et est ajouté après que celle-ci a été calculée.</p> +<p>La marge est une zone d'espacement invisible qui encadre votre boîte (une marge extérieure). La marge repousse les éléments alentours de la boîte. On peut de plus lui donner une valeur numérique positive ou bien même négative ! Lorsque cette valeur est négative, cela peut cependant engendrer des superpositions entre votre boîte et d'autres éléments. Que vous utilisiez le modèle alternatif ou standard, la marge est toujours décomptée en surplus de la taille totale de la boîte et est ajoutée après que celle-ci a été calculée.</p> -<p>On peut fixer les quatres margins d'une boîte d'un seul coup à l'aide de la propriété {{cssxref("margin")}}, ou bien régler chaque côté individuelement avec les propriétés équivalentes suivantes :</p> +<p>On peut fixer les quatre marges d'une boîte d'un seul coup à l'aide de la propriété <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a>, ou bien régler chaque côté individuellement avec les propriétés équivalentes suivantes :</p> <ul> - <li>{{cssxref("margin-top")}}</li> - <li>{{cssxref("margin-right")}}</li> - <li>{{cssxref("margin-bottom")}}</li> - <li>{{cssxref("margin-left")}}</li> + <li><a href="/fr/docs/Web/CSS/margin-top"><code>margin-top</code></a></li> + <li><a href="/fr/docs/Web/CSS/margin-right"><code>margin-right</code></a></li> + <li><a href="/fr/docs/Web/CSS/margin-bottom"><code>margin-bottom</code></a></li> + <li><a href="/fr/docs/Web/CSS/margin-left"><code>margin-left</code></a></li> </ul> -<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de margin pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou suprimés (si le margin est négatif) par vos soins.</strong></p> +<p><strong>Dans l'exemple ci-dessous, tentez donc de modifier les valeurs de <code>margin</code> pour voir comment la boîte est repoussée et évolue à cause des espaces créés ou supprimés (si la marge est négative) par vos soins.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 700)}}</p> -<h4 id="La_fusion_des_marges">La fusion des marges</h4> +<h4 id="margin_collapsing">La fusion des marges</h4> -<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des margins qui se touchent, alors ces margins fusionnent pour ne faire plus qu'un seul margin qui aura pour taille la plus grande des deux tailles des margins initiaux.</p> +<p>Le concept de fusion entre les marges est important à maîtriser pour la mise en page. Si deux éléments de votre page ont des marges qui se touchent, alors ces marges fusionnent pour ne faire plus qu'une seule marge qui aura pour taille la plus grande des deux tailles des marges initiaux.</p> -<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux margins se touchent, ils fusionnent ensemble, et ainsi le margin final entre les deux paragraphes est de 50 pixels et non 80, la somme des deux margins.</p> +<p>Dans l'exemple ci-dessous, nous avons deux paragraphes. Le paragraphe du haut a un <code>margin-bottom</code> de 50 pixels. Le second paragraphe a un <code>margin-top</code> de 30 pixels. Puisque ces deux marges se touchent, elles fusionnent ensemble, et ainsi la marge finale entre les deux paragraphes est de 50 pixels et non 80, la somme des deux marges.</p> -<p><strong>Vous pouvez tester cette propriété par vous même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. Le margin visible entre les deux paragraphes demeure inchangé — il conserve sa taille de 50 pixels qui provient du <code>margin-bottom</code> du premier paragraphe.</strong></p> +<p><strong>Vous pouvez tester cette propriété par vous-même en modifiant la propriété <code>margin-top</code> du deuxième paragraphe à 0 dans l'exemple ci-dessous. La marge visible entre les deux paragraphes demeure inchangée — elle conserve sa taille de 50 pixels qui provient de la propriété <code>margin-bottom</code> du premier paragraphe.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 700)}}</p> -<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p> +<p>Il existe quelques règles qui contrôlent la fusion ou non des marges. Pour plus d'informations, référez vous à la page détaillée <a href="/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Maîtriser la fusion des marges</a>. Si vous ne devez retenir qu'une chose, c'est que les marges peuvent fusionner, et que si vos marges ne correspondent pas à vos attentes, c'est certainement ce phénomène qui est derrière.</p> -<h3 id="Les_Borders_Cadres">Les Borders (Cadres)</h3> +<h3 id="borders">Les bordures</h3> -<p>le border (le cadre en français) se situe entre le margin (marge externe) et le padding (marge interne) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille du border s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille du border rends la taille disponible pour le contenu plus petite puisqu'il utilise une partie du <code>width</code> et <code>height</code> disponible.</p> +<p>La bordure se situe entre la marge et le remplissage (<i lang="en">padding</i>) d'une boîte. Si vous utilisez le modèle standard de boîte, la taille de la bordure s'ajoute à la largeur (<code>width</code>) et la hauteur (<code>height</code>) de la boîte. Si vous utilisez le modèle de boîte alternatif, alors la taille de la bordure rend la taille disponible pour le contenu plus petite puisqu'elle utilise une partie de la largeur et de la hauteur disponible.</p> -<p>Pour agir sur le style d'un border, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatres côtés du cadre.</p> +<p>Pour agir sur le style d'une bordure, il existe de nombreuses propriétés qui permettent de régler le style, la taille et la couleur pour chacun des quatre côtés de la bordure.</p> -<p>Vous pouvez naturellement fixer la forme taille et couleur des quatres côtés en une seule fois, par le biais de la propriété <code>border</code>.</p> +<p>Vous pouvez naturellement fixer la forme taille et couleur des quatre côtés en une seule fois, par le biais de la propriété <code>border</code>.</p> <p>Pour régler ces propriétés individuellement pour chacun des côtés, vous pouvez utiliser :</p> <ul> - <li>{{cssxref("border-top")}}</li> - <li>{{cssxref("border-right")}}</li> - <li>{{cssxref("border-bottom")}}</li> - <li>{{cssxref("border-left")}}</li> + <li><a href="/fr/docs/Web/CSS/border-top"><code>border-top</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-right"><code>border-right</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-bottom"><code>border-bottom</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-left"><code>border-left</code></a></li> </ul> <p>Pour modifier la taille, le style ou la couleur de tous les côtés en même temps, utilisez les propriétés suivantes :</p> <ul> - <li>{{cssxref("border-width")}}</li> - <li>{{cssxref("border-style")}}</li> - <li>{{cssxref("border-color")}}</li> + <li><a href="/fr/docs/Web/CSS/border-width"><code>border-width</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-style"><code>border-style</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-color"><code>border-color</code></a></li> </ul> <p>Pour modifier la taille, le style ou la couleur d'un seul coté à la fois, vous pouvez faire l'usage de ces propriétés :</p> <ul> - <li>{{cssxref("border-top-width")}}</li> - <li>{{cssxref("border-top-style")}}</li> - <li>{{cssxref("border-top-color")}}</li> - <li>{{cssxref("border-right-width")}}</li> - <li>{{cssxref("border-right-style")}}</li> - <li>{{cssxref("border-right-color")}}</li> - <li>{{cssxref("border-bottom-width")}}</li> - <li>{{cssxref("border-bottom-style")}}</li> - <li>{{cssxref("border-bottom-color")}}</li> - <li>{{cssxref("border-left-width")}}</li> - <li>{{cssxref("border-left-style")}}</li> - <li>{{cssxref("border-left-color")}}</li> + <li><a href="/fr/docs/Web/CSS/border-top-width"><code>border-top-width</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-top-style"><code>border-top-style</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-top-color"><code>border-top-color</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-right-width"><code>border-right-width</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-right-style"><code>border-right-style</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-right-color"><code>border-right-color</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-bottom-width"><code>border-bottom-width</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-bottom-style"><code>border-bottom-style</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-bottom-color"><code>border-bottom-color</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-left-width"><code>border-left-width</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-left-style"><code>border-left-style</code></a></li> + <li><a href="/fr/docs/Web/CSS/border-left-color"><code>border-left-color</code></a></li> </ul> -<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer un cadre (border). Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages du MDN pour les propriétés des borders (données ci-dessus) vous documentent sur les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p> +<p><strong>Dans l'exemple ci-dessous, nous avons utilisé différentes propriétés, qu'elles soient des raccourcis ou bien les propriétés précises, pour créer une bordure. Amusez-vous à modifier les valeurs de ces différentes propriétés pour vérifier que vous comprenez bien comment elles s'organisent. Les pages MDN pour les propriétés des bordures (données ci-dessus) documentent les différents styles que vous pouvez appliquer à vos pages. N'hésitez pas à les consulter.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 700)}}</p> -<h3 id="Les_Paddings_Marges_intérieures">Les Paddings (Marges intérieures)</h3> +<h3 id="padding">Le padding (remplissage)</h3> -<p>Les paddings (ou marges intérieures) se situent entre le border (le cadre) et la zone du contenu. Contrairement aux margins, on ne peut attribuer une valeur numérique négative à un padding, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière plan à votre élément, celui-ci continuera de s'afficher dans la padding, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu du border (le cadre).</p> +<p>Le <i lang="en">padding</i> (ou remplissage) se situe entre la bordure et le contenu. Contrairement aux marges, on ne peut attribuer une valeur numérique négative à un <i lang="en">padding</i>, la valeur ne peut être que 0 ou bien une valeur positive. Si vous avez défini un arrière-plan à votre élément, celui-ci continuera de s'afficher dans la <i lang="en">padding</i>, et c'est pourquoi cette propriété est souvent utilisée pour repousser le contenu de la bordure.</p> -<p>On peut une fois de plus configurer le padding pour tous les côtés à la fois à l'aide de la propriété {{cssxref("padding")}}, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p> +<p>On peut une fois de plus configurer le <i lang="en">padding</i> pour tous les côtés à la fois à l'aide de la propriété <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, ou bien chaque côté indépendament des autres en utilisant les variantes plus précises suivantes :</p> <ul> - <li>{{cssxref("padding-top")}}</li> - <li>{{cssxref("padding-right")}}</li> - <li>{{cssxref("padding-bottom")}}</li> - <li>{{cssxref("padding-left")}}</li> + <li><a href="/fr/docs/Web/CSS/padding-top"><code>padding-top</code></a></li> + <li><a href="/fr/docs/Web/CSS/padding-right"><code>padding-right</code></a></li> + <li><a href="/fr/docs/Web/CSS/padding-bottom"><code>padding-bottom</code></a></li> + <li><a href="/fr/docs/Web/CSS/padding-left"><code>padding-left</code></a></li> </ul> -<p><strong>Si vous modifiez les valeurs du padding sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p> +<p><strong>Si vous modifiez les valeurs du <i lang="en">padding</i> sur la classe <code>.box</code> de l'exemple ci-dessous, vous pouvez observer comment l'emplacement du texte est impacté par les marges intérieures.</strong></p> -<p><strong>Tentez aussi de modifier la valeur du padding dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le padding peut être modifié sur tout élément pour permettre d'espacer le contenu du cadre.</strong></p> +<p><strong>Tentez aussi de modifier la valeur du <i lang="en">padding</i> dans la classe <code>.container</code>, cela aura pour effet d'espacer le conteneur et la boîte. Le <i lang="en">padding</i> peut être modifié sur tout élément pour permettre d'espacer le contenu de la bordure.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 600)}}</p> -<h2 id="Le_modèle_de_boîte_et_la_disposition_en_ligne">Le modèle de boîte et la disposition en ligne</h2> +<h2 id="the_box_model_and_inline_boxes">Le modèle de boîte et la disposition en ligne</h2> <p>Toutes les règles énoncées plus haut s'appliquent totalement aux boîtes positionnées en bloc. Mais qu'en est-il des boîtes positionnées en ligne, comme l'élément <code><span></code> par exemple ?</p> <p>Dans l'exemple ci-après, nous avons un élément <code><span></code> inclus dans un paragraphe auquel on a défini les propriétés <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> et <code>padding</code>. Vous pouvez alors observer que les paramètres <code>width</code> et <code>height</code> sont totalement ignorés. Les propriétés de <code>margin</code>, <code>padding</code> et <code>border</code> sont quant à elles appliquées, mais n'ont pas modifié l'espacement avec les autres éléments de la page, se superposant ainsi avec les mots environnants dans le paragraphe.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 600)}}</p> -<h2 id="le_positionnement_display_inline-block">le positionnement display: inline-block</h2> +<h2 id="using_display_inline-block">le positionnement display: inline-block</h2> -<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la diposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p> +<p>Il existe une valeur spéciale pour la propriété <code>display</code>, qui constitue un compromis entre la disposition en ligne et la disposition en bloc, une sorte d'entre-deux qui combine ces deux dispositions. Cet état peut-être utile dans les situations où l'on désire utiliser les propriétés <code>width</code> et <code>height</code>, et éviter les superpositions (voir l'exemple précédent), tout en conservant la disposition dans une même ligne (i.e. sans créer de nouvelle ligne, comme le ferait une disposition en bloc).</p> <p>C'est la solution apportée par la disposition <code>display: inline-block;</code> qui emprunte des règles des deux dispositions pour satisfaire ces motivations :</p> @@ -312,44 +297,44 @@ original_slug: Apprendre/CSS/Building_blocks/Le_modele_de_boite <p><strong>Dans cet exemple, nous avons ajouté la propriété <code>display: inline-block;</code> à notre élément <code><span></code>. Changez donc la valeur en <code>display: block;</code> ou bien tentez même de supprimer cette ligne pour observer l'utilité de cette nouvelle disposition.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 700)}}</p> -<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code><a></code> est par défaut "en ligne", comme un <code><span></code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au padding d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p> +<p>Ceci peut-être très utile dans certains cas comme lorsque l'on veut élargir la zone cliquable d'un lien en aggrandissant le <code>padding</code>. l'élément <code><a></code> est par défaut "en ligne", comme un <code><span></code>, mais vous pouvez alors utiliser <code>display: inline-block;</code> pour permettre au <i lang="en">padding</i> d'être ajouté correctement sur la page, améliorant l'accessibilité du lien pour l'utilisateur.</p> -<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un padding aux lien <code><a></code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le padding semble se superposer sur la bordure de l'élément <code><ul></code>. Ceci est dû au fait que <code><a></code> est un élément en ligne.</p> +<p>Vous pouvez rencontrer cette astuce sur bon nombre de menus de navigation dans les sites web. Par exemple, la barre de navigation ci-dessous est affichée en une seule ligne en utilisant la disposition flexbox et nous avons ajouté un <i lang="en">padding</i> aux liens <code><a></code> pour pouvoir modifier la couleur de fond (<code>background-color</code>) au survol du curseur. Le <i lang="en">padding</i> semble se superposer sur la bordure de l'élément <code><ul></code>. Ceci est dû au fait que <code><a></code> est un élément en ligne.</p> -<p><strong>Ajoutez la propriété <code>display: inline-block;</code> en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du padding régler ce problème.</strong></p> +<p><strong>Ajoutez la propriété <code>display: inline-block;</code> en utilisant le sélecteur <code>.links-list a</code> pour voir le respect du <i lang="en">padding</i> régler ce problème.</strong></p> -<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> -<h2 id="Conclusion">Conclusion</h2> +<h2 id="summary">Résumé</h2> <p>À présent vous connaissez tout ce dont vous avez besoin pour comprendre le modèle des boîtes en CSS. N'hésitez pas à revenir jetter un coup d'oeil à ce cours si vous rencontrez encore des problèmes de mise en page : beaucoup de solutions se trouvent ici !</p> -<p>Dans la leçon suivante, ce sont les arrières-plans et cadres qui capterons notre attention, afin de rendre votre mise en page plus attrayante.</p> +<p>Dans la leçon suivante, ce sont les arrières-plans et les bordures qui capteront notre attention, afin de rendre votre mise en page plus attrayante.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> -<h2 id="Dans_ce_module">Dans ce module</h2> +<h2 id="in_this_module">Dans ce module</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> - <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> - </ul> - </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> -</ol> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">Sélecteurs CSS</a> + <ul> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Sélecteurs de classe, de type et d'identifiant</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Sélecteurs d'attribut</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes et pseudo-éléments</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinateurs</a></li> + </ul> + </li> + <li>Le modèle de boîte</li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arrières-plans et bordures</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Gérer la directionnalité du texte</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Overflowing_content">Le dépassement du contenu</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Values_and_units">Valeurs et unités</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionnement des objets en CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, médias, et formulaires</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Styling_tables">Mettre en forme les tableaux</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Debugging_CSS">Déboguer CSS</a></li> + <li><a href="/fr/docs/Learn/CSS/Building_blocks/Organizing">Organiser son code CSS</a></li> + </ol> diff --git a/files/fr/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/learn/css/first_steps/how_css_is_structured/index.html index c8dd73edb2..a5dca8a25a 100644 --- a/files/fr/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/fr/learn/css/first_steps/how_css_is_structured/index.html @@ -1,50 +1,38 @@ --- title: Comment CSS est structuré slug: Learn/CSS/First_steps/How_CSS_is_structured -tags: - - Apprendre - - CSS - - Commentaires - - Débutant - - HTML - - Propriétés - - Structure - - Sélecteurs - - espace - - raccourci - - valeurse translation_of: Learn/CSS/First_steps/How_CSS_is_structured --- <div>{{LearnSidebar}}</div> <div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> -<p class="summary">Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p> +<p>Vous avez maintenant une idée plus claire de CSS. Vous connaissez les bases de son fonctionnement. Il est temps d'explorer plus avant la structure du langage lui-même. Nous avons déjà rencontré nombre des concepts apparaissant dans ce tutoriel ; reportez vous aux leçons précédentes si un concept vous semble peu clair.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prérequis :</th> - <td>Maîtrise élémentaire de l'informatique, <a href="https://developer.mozilla.org/fr/docs/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Apprendre/Commencer_avec_le_web/Gérer_les_fichiers">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Apprendre/HTML/Introduction_à_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> + <th scope="row">Prérequis :</th> + <td>Maîtrise élémentaire de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">suite logicielle de base installée</a>, compétences élémentaires pour <a href="/fr/docs/Learn/Getting_started_with_the_web/Dealing_with_files">travailler avec des fichiers</a>, connaissance de base du HTML (cf. <a href="/fr/docs/Learn/HTML/Introduction_to_HTML">Introduction à HTML</a>), et une idée de <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment fonctionne CSS</a>.</td> </tr> <tr> - <th scope="row">Objectif :</th> + <th scope="row">Objectif :</th> <td>Approfondir les structures syntaxiques fondamentales de CSS</td> </tr> </tbody> </table> -<h2 id="Appliquer_CSS_à_votre_document_HTML">Appliquer CSS à votre document HTML</h2> +<h2 id="applying_css_to_html">Appliquer CSS à votre document HTML</h2> -<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p> +<p>Regardons d'abord les trois méthodes pour appliquer CSS à un document.</p> -<h3 id="Feuille_de_style_externe">Feuille de style externe</h3> +<h3 id="external_stylesheet">Feuille de style externe</h3> -<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p> +<p>Dans la leçon <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a> nous avons lié une feuille de style externe à notre document. C'est la méthode la plus commune pour appliquer CSS à un document. C'est aussi la plus utile : dans la plupart des cas, les différentes pages d'un site ont à peu près la même apparence, on peut donc utiliser le même jeu de règles pour l'apparence de base. Il est dans ce cas commode d'écrire ces règles une seule fois dans une feuille de style commune à toutes les pages.</p> -<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élement HTML <code><link></code> fait référence à ce fichier.</p> +<p>Dans le cas d'une feuille de style externe, les règles CSS sont écrites dans un fichier séparé, avec l'extension <code>.css</code>. Un élément HTML <code><link></code> fait référence à ce fichier.</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> @@ -55,11 +43,11 @@ translation_of: Learn/CSS/First_steps/How_CSS_is_structured <h1>Hello World!</h1> <p>ceci est mon premier exemple CSS</p> </body> -</html></pre> +</html></pre>e -<p>Le fichier CSS devrait ressembler à cela :</p> +<p>Le fichier CSS devrait ressembler à cela :</p> -<pre class="brush: css notranslate">h1 { +<pre class="brush: css">h1 { color: blue; background-color: yellow; border: 1px solid black; @@ -69,30 +57,30 @@ p { color: red; }</pre> -<p>L'attribut <code>href</code> de l'élement {{htmlelement("link")}} doit pointer vers un fichier dans votre système de fichiers.</p> +<p>L'attribut <code>href</code> de l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> doit pointer vers un fichier dans votre système de fichiers.</p> -<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p> +<p>Dans l'exemple ci-dessus, le fichier CSS et le document HTML sont dans le même dossier, mais vous pouvez le placer ailleurs et ajuster le chemin, par exemple :</p> -<pre class="brush: html notranslate"><!-- Dans un sous répertoire nommé styles dans le répertoire courant --> +<pre class="brush: html"><!-- Dans un sous-répertoire nommé styles dans le répertoire courant --> <link rel="stylesheet" href="styles/style.css"> -<!-- Dans un sous répertoire nommé general, lui-même dans un sous répertoire nommé styles, dans le répertoire courant --> +<!-- Dans un sous-répertoire nommé general, lui-même dans un sous-répertoire nommé styles, dans le répertoire courant --> <link rel="stylesheet" href="styles/general/style.css"> -<!-- Dans un sous répertoire nommé styles, un niveau plus haut --> +<!-- Dans un sous-répertoire nommé styles, un niveau plus haut --> <link rel="stylesheet" href="../styles/style.css"></pre> -<h3 id="Feuille_de_style_interne">Feuille de style interne</h3> +<h3 id="internal_stylesheet">Feuille de style interne</h3> -<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML {{htmlelement("head")}} dans un élément {{htmlelement("style")}}. On parle alors de feuille de style interne.</p> +<p>Les règles CSS peuvent être écrites directement dans l'en-tête HTML <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a> dans un élément <a href="/fr/docs/Web/HTML/Element/style"><code><style></code></a>. On parle alors de feuille de style interne.</p> -<p>Le code HTML ci-dessous illustre cette technique :</p> +<p>Le code HTML ci-dessous illustre cette technique :</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> - <title>Mes experimentations CSS</title> + <title>Mes expérimentations CSS</title> <style> h1 { color: blue; @@ -111,17 +99,17 @@ p { </body> </html></pre> -<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p> +<p>Cette méthode peut être utile dans certaines circonstances (un système de gestion de contenu (CMS) qui n'autoriserait pas la modification du fichier <code>style.css</code>). Cette solution est un pis-aller, on préfèrera quand c'est possible une feuille de style externe — dans un site web, avec la méthode de styles internes, le CSS doit être recopié dans chaque page : la mise à jour des styles nécessite donc de modifier chaque fichier.</p> -<h3 id="Styles_en_ligne">Styles en ligne</h3> +<h3 id="inline_styles">Styles en ligne</h3> -<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élement, elles sont déclarées grâce à l'attribut <code>style</code>:</p> +<p>Les styles en ligne sont des déclarations CSS qui n'affectent qu'un seul élément, elles sont déclarées grâce à l'attribut <code>style</code>:</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> - <title>Mes experimentations CSS</title> + <title>Mes expérimentations CSS</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> @@ -129,17 +117,17 @@ p { </body> </html></pre> -<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p> +<p><strong>Cette approche est vraiment à proscrire ! </strong>Le code produit n'est pas maintenable (les modifications ne doivent plus se faire pour chaque page, mais dans chaque page, élément par élément !). Par ailleurs, mélanger le CSS avec le HTML rend la lecture du code plus difficile. En plus d'une meilleure lisibilité du code, séparer le fond de la forme rend le travail d'équipe plus facile.</p> -<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d’être compatibles avec autant de clients de messagerie que possible.</p> +<p>Il existe quelques endroits où les styles en ligne sont communs, voire recommandés. Vous devrez peut-être les utiliser si votre environnement de travail est vraiment restrictif (votre CMS ne vous permet peut-être que de modifier le corps du HTML). Vous les verrez également beaucoup utilisés dans les e-mails HTML afin d'être compatibles avec autant de clients de messagerie que possible.</p> -<h2 id="Jouer_avec_le_CSS_de_cet_article">Jouer avec le CSS de cet article</h2> +<h2 id="playing_with_the_css_in_this_article">Jouer avec le CSS de cet article</h2> -<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p> +<p>Les exemples de cet article sont autant d'occasions pour faire vos premiers tests. Pour ce faire, nous vous recommandons de créer un nouveau répertoire sur votre ordinateur et d'y créer une copie des deux fichiers suivants :</p> <p><strong>index.html</strong> :</p> -<pre class="brush: html notranslate"><!DOCTYPE html> +<pre class="brush: html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> @@ -155,27 +143,27 @@ p { <p><strong>styles.css</strong> :</p> -<pre class="brush: css notranslate">/* Créez votre test CSS ici */ +<pre class="brush: css">/* Créez votre test CSS ici */ p { color: red; }</pre> -<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code><body></code> ... <code></body></code> dans le fichier <code>index.html</code> ; ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p> +<p>Ensuite, lorsque vous rencontrez du code à tester : collez le HTML à mettre en forme entre les balises <code><body></code>…<code></body></code> dans le fichier <code>index.html</code> ; ajoutez les règles CSS dans la feuille <code>styles.css</code>.</p> -<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p> +<p>Si le système que vous utilisez rend difficile la création de fichiers, vous pouvez utiliser l'éditeur interactif ci-dessous pour vos expériences.</p> -<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p> +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 600)}} </p> <p>Bonne lecture !</p> -<h2 id="Sélecteurs">Sélecteurs</h2> +<h2 id="selectors">Sélecteurs</h2> -<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr-FR/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p> +<p>Vous ne pouvez pas parler de CSS sans rencontrer les sélecteurs et nous en avons déjà découvert différents types dans le tutoriel <a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a>. Un sélecteur cible quelque chose dans le document HTML afin de lui appliquer des styles. Quand une mise en forme ne s'applique pas comme prévu, il est probable que le sélecteur concerné ne fonctionne pas comme vous l'attendiez.</p> <p>Chaque règle CSS commence par un sélecteur ou une liste de sélecteurs afin d'indiquer au navigateur les éléments auxquels les règles doivent s'appliquer. Tous les exemples suivants sont des exemples de sélecteurs valides ou de listes de sélecteurs.</p> -<pre class="brush: css notranslate">h1 +<pre class="brush: css">h1 a:link .manythings #onething @@ -184,17 +172,17 @@ a:link .box p:first-child h1, h2, .intro</pre> -<p><strong>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</strong></p> +<p>Essayez de créer des règles CSS qui utilisent les sélecteurs ci-dessus et du code HTML à styler. Si vous ne savez pas ce que signifie la syntaxe ci-dessus, essayez de la rechercher sur MDN !</p> -<div class="blockIndicator note"> -<p><strong>Note </strong>: Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr-FR/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p> +<div class="notecard note"> +<p><strong>Note :</strong> Vous en apprendrez beaucoup plus sur les sélecteurs dans nos tutoriels sur <a href="/fr/docs/Learn/CSS/Building_blocks/Selectors">les sélecteurs CSS</a>, dans un prochain cours.</p> </div> -<h3 id="Spécificité">Spécificité</h3> +<h3 id="specificity">Spécificité</h3> -<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p> +<p>Dans de nombreux cas, deux sélecteurs différents peuvent cibler le même élément HTML. Considérons la feuille de style ci-dessous où j'ai une règle avec un sélecteur <code>p</code> qui colore les paragraphes en bleu, puis une règle qui colore en rouge les éléments dans la classe <code>special</code>.</p> -<pre class="brush: css notranslate">.special { +<pre class="brush: css">.special { color: red; } @@ -202,13 +190,13 @@ p { color: blue; }</pre> -<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p> +<p>Disons que dans notre document HTML, nous avons un paragraphe avec un attribut <code>class</code> valant <code>special</code>. Les deux règles pourraient s'appliquer. Selon vous, quelle sera la couleur du paragraphe ?</p> -<pre class="brush: html notranslate"><p class="special">De quelle couleur suis-je?</p></pre> +<pre class="brush: html"><p class="special">De quelle couleur suis-je?</p></pre> -<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p> +<p>Le langage CSS a des règles pour déterminer quelle mise en forme appliquer en cas de collision de sélecteurs — elles sont appelées <strong>cascade</strong> et <strong>spécificité</strong>. Dans le bloc de code ci-dessous, nous avons défini deux règles pour le sélecteur <code>p</code>, mais le paragraphe finit par être coloré en bleu. En effet, la déclaration qui l'a défini en bleu apparaît plus tard dans la feuille de style et les styles ultérieurs remplacent les précédents. C'est la <em>cascade</em> en action.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { color: red; } @@ -216,61 +204,61 @@ p { color: blue; }</pre> -<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p> +<p>Cependant, dans l'exemple plus haut avec le sélecteur de classe et le sélecteur d'élément, la classe l'emportera, rendant le paragraphe rouge — même s'il apparaît plus tôt dans la feuille de style. Une classe est décrite comme étant plus spécifique ou ayant plus de <em>spécificité</em> que le sélecteur d'élément, elle gagne donc.</p> -<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {...}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p> +<p><strong>Tentez vous-même l'expérience ci-dessus </strong>—<strong> ajoutez le code HTML à votre expérience, puis ajoutez les deux règles <code>p {…}</code> à votre feuille de style. Ensuite, changez le premier sélecteur <code>p</code> en <code>.special</code> pour voir comment il affecte le style.</strong></p> -<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p> +<p>Au premier abord, les règles de cascade et de spécificité peuvent sembler compliquées ; avec une meilleure connaissance de CSS, elles vous paraîtront plus naturelles. Dans le prochain module, l'article <a href="/fr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade et héritage</a> vous détaillera ces principes et expliquera notamment comment calculer la spécificité. Pour le moment, rappelez vous que de tels cas existent et que le CSS peut parfois ne pas s'appliquer comme prévu. Dans une telle situation, souvenez-vous qu'un même élément peut être la cible de plusieurs sélecteurs concurrents.</p> -<h2 id="Propriétés_et_valeurs">Propriétés et valeurs</h2> +<h2 id="properties_and_values">Propriétés et valeurs</h2> <p>Au niveau le plus fondamental, CSS se compose de deux blocs de construction :</p> <ul> - <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li> - <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l’arrière-plan).</li> + <li><strong>Propriétés </strong>: des identifiants lisibles par l'homme indiquant les caractéristiques stylistiques (<code><a href="/fr/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/fr/docs/Web/CSS/width">width</a></code>, <code><a href="/fr/docs/Web/CSS/background-color">background-color</a></code>, par exemple) que vous souhaitez modifier ;</li> + <li><strong>Valeurs </strong>: une valeur est attribuée à chaque propriété spécifiée. Elle indique comment vous souhaitez modifier ces caractéristiques stylistiques (par exemple, en modifiant la couleur de la police, la largeur ou l'arrière-plan).</li> </ul> <p>L'image ci-dessous met en évidence une propriété et une valeur uniques. Le nom de la propriété est <code>color</code> et la valeur <code>blue</code>.</p> -<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style=""></p> +<p><img alt="Une déclaration surlignée au sein du code CSS" src="declaration.png"></p> <p>Une propriété associée à une valeur s'appelle une <em>déclaration CSS</em>. Les déclarations CSS sont placées dans des <em>blocs de déclaration CSS</em>. L'image suivante montre notre CSS avec le bloc de déclaration en surbrillance.</p> -<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style=""></p> +<p><img alt="Un bloc de déclaration surligné" src="declaration-block.png"></p> <p>Enfin, les blocs de déclaration CSS sont associés à des <em>sélecteurs</em> pour produire des <em>ensembles de règles CSS</em> (ou <em>règles CSS</em>). L'image contient deux règles, une pour le sélecteur <code>h1</code> et une pour le sélecteur <code>p</code>. La règle pour <code>h1</code> est mise en surbrillance.</p> -<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style=""></p> +<p><img alt="La règle ciblant h1 est surlignée" src="rules.png"></p> <p>Définir les propriétés CSS sur des valeurs spécifiques est la fonction principale du langage CSS. Le moteur CSS calcule les déclarations qui s'appliquent à chaque élément d'une page afin de le présenter et de le styler de manière appropriée. Ce qui est important à retenir est que les propriétés et les valeurs sont sensibles à la casse en CSS. La propriété et la valeur de chaque paire sont séparées par deux points (<code>:</code>).</p> -<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p> +<p><strong>Recherchez différentes valeurs possibles pour les propriétés suivantes puis écrivez des règles CSS qui les appliquent à différents éléments HTML : </strong></p> <ul> - <li><strong>{{cssxref("font-size")}}</strong></li> - <li><strong>{{cssxref("width")}}</strong></li> - <li><strong>{{cssxref("background-color")}}</strong></li> - <li><strong>{{cssxref("color")}}</strong></li> - <li><strong>{{cssxref("border")}}</strong></li> + <li><strong><a href="/fr/docs/Web/CSS/font-size"><code>font-size</code></a></strong></li> + <li><strong><a href="/fr/docs/Web/CSS/width"><code>width</code></a></strong></li> + <li><strong><a href="/fr/docs/Web/CSS/background-color"><code>background-color</code></a></strong></li> + <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a></strong></li> + <li><strong><a href="/fr/docs/Web/CSS/border"><code>border</code></a></strong></li> </ul> <div class="warning"> -<p><strong>Important </strong>: Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> +<p><strong>Important :</strong> Si la propriété est inconnue ou si la valeur est invalide pour une propriété donnée, la déclaration est considérée comme <em>invalide</em> et complètement ignorée par le moteur CSS du navigateur.</p> </div> <div class="warning"> -<p><strong>Important </strong>: En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> +<p><strong>Important :</strong> En CSS (et dans les autres standards web), l'orthographe américaine a été adoptée comme norme à respecter en cas d'incertitude linguistique. Par exemple, la couleur doit <em>toujours</em> être notée <code>color</code>. <code>couleur</code> ne fonctionnera pas.</p> </div> -<h3 id="Fonctions">Fonctions</h3> +<h3 id="functions">Fonctions</h3> -<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p> +<p>Bien que la plupart des valeurs soient des mots-clés relativement simples ou des valeurs numériques, on peut aussi appeler une fonction pour calculer une valeur dans une déclaration CSS. Un exemple serait la fonction <code>calc()</code>. Cette fonction vous permet de faire des calculs simples à partir de CSS, par exemple :</p> <div id="calc_example"> -<pre class="brush: html notranslate"><div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div></pre> +<pre class="brush: html"><div class="outer"><div class="box">la boite interne vaut 90% - 30px.</div></div></pre> -<pre class="brush: css notranslate">.outer { +<pre class="brush: css">.outer { border: 5px solid black; } @@ -286,14 +274,14 @@ p { <p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> -<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p> +<p>Une fonction est composée du nom de la fonction suivi d'une paire de parenthèses entre lesquelles sont placées les valeurs autorisées pour cette fonction. Dans le cas de l'exemple <code>calc()</code> ci-dessus, on demande que la largeur de cette zone soit égale à 90% de la largeur du bloc conteneur, moins 30 pixels. Ce n'est pas quelque chose que l'on peut calculer à l'avance et simplement entrer la valeur dans le CSS, car on ne sait pas ce que seront 90%. Comme pour toutes les valeurs, chaque fonction a sa page de documentation sur MDN avec des exemples d'utilisation pour en voir le fonctionnement.</p> -<p>Un autre exemple serait les différentes valeurs de la propriété {{cssxref ("<transform>")}}, telles que <code>rotate()</code>.</p> +<p>Un autre exemple serait les différentes valeurs de la propriété <a href="/fr/docs/Web/CSS/<transform>"><code><transform></code></a>, telles que <code>rotate()</code>.</p> <div id="transform_example"> -<pre class="brush: html notranslate"><div class="box"></div></pre> +<pre class="brush: html"><div class="box"></div></pre> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { margin: 30px; width: 100px; height: 100px; @@ -309,22 +297,22 @@ p { <p><strong>Essayez de rechercher différentes valeurs des propriétés suivantes et d'écrire des règles CSS qui les appliquent à différents éléments HTML : </strong></p> <ul> - <li><strong>{{cssxref("transform")}}</strong></li> - <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li> - <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li> + <li><strong><a href="/fr/docs/Web/CSS/transform"><code>transform</code></a></strong></li> + <li><strong><a href="/fr/docs/Web/CSS/background-image"><code>background-image</code></a>, en particulier les valeurs de dégradé</strong></li> + <li><strong><a href="/fr/docs/Web/CSS/color"><code>color</code></a>, en particulier les valeurs rgb/rgba/hsl/hsla</strong></li> </ul> <h2 id="rules">@rules</h2> +e +<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/fr/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code> simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera <code>@import</code> :</p> -<p>Nous n'avons pas rencontré jusqu'ici les <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (prononcer "at-rules"). Ce sont des règles spéciales dictant un comportement CSS. Certaines <code>@rules</code> simples sont composées d'un nom et d'une valeur. Par exemple, pour importer une feuille de style additionnelle dans le CSS principal on utilisera <code>@import</code> :</p> - -<pre class="brush: css notranslate">@import 'styles2.css';</pre> +<pre class="brush: css">@import 'styles2.css';</pre> -<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Requêtes_média">media queries</a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p> +<p>L'une des <code>@rules</code> les plus fréquemment rencontrée est <code>@media</code>, qui permet d'utiliser les <a href="/fr/docs/Web/CSS/Media_Queries"><i lang="en">media queries</i></a> pour appliquer CSS seulement quand certaines conditions sont vérifiées (par ex. quand la résolution de l'écran dépasse une certaine valeur, ou quand l'écran dépasse une certaine largeur).</p> -<p>Dans le CSS ci-dessous, une règle donne à l'élément <code><body></code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p> +<p>Dans le CSS ci-dessous, une règle donne à l'élément <code><body></code> un fond rose. La section <code>@media</code> ne s'appliquera que dans les navigateurs dont la fenêtre est plus large que 30em. Dans ce cas la couleur de fond sera redéfinie à bleue.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { background-color: pink } @@ -334,56 +322,56 @@ p { } }</pre> -<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p> +<p>Tout au long de nos tutoriels CSS, vous rencontrerez d'autres <code>@rules</code>.</p> -<p><strong>Ajoutez une media query à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p> +<p><strong>Ajoutez une <i lang="en">media query</i> à votre CSS pour obtenir des changements de styles basés sur la largeur de la fenêtre. Changez la largeur de la fenêtre de votre navigateur pour contrôler le résultat.</strong></p> -<h2 id="Raccourcis">Raccourcis</h2> +<h2 id="shorthands">Raccourcis</h2> -<p>Certaines propriétés comme {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}}, ou {{cssxref("margin")}} sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p> +<p>Certaines propriétés comme <a href="/fr/docs/Web/CSS/font"><code>font</code></a>, <a href="/fr/docs/Web/CSS/background"><code>background</code></a>, <a href="/fr/docs/Web/CSS/padding"><code>padding</code></a>, <a href="/fr/docs/Web/CSS/border"><code>border</code></a>, ou <a href="/fr/docs/Web/CSS/margin"><code>margin</code></a> sont appelées <strong>propriétés raccourci</strong> — elles permettent d'attribuer plusieurs couples propriété : valeur en une seule ligne. On gagne du temps et le code est plus joli.</p> -<p>Par exemple, la ligne suivante :</p> +<p>Par exemple, la ligne suivante :</p> -<pre class="brush: css notranslate">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données - dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top). - Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin - pour top/bottom, puis left/right */ +<pre class="brush: css">/* Dans les raccourcis à 4 valeurs comme padding ou margin, les valeurs sont données + dans l'ordre top, right, bottom, left (sens des aiguilles d'une montre depuis top). + Il y a d'autres raccourcis, a 2 valeurs par exemple qui padding ou margin + pour top/bottom, puis left/right */ padding: 10px 15px 15px 5px;</pre> <p>produit le même effet que les quatre lignes suivantes réunies :</p> -<pre class="brush: css notranslate">padding-top: 10px; +<pre class="brush: css">padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px;</pre> <p>Alors que :</p> -<pre class="brush: css notranslate">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> +<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> -<p>produit la même chose que tout ce qui suit :</p> +<p>produit la même chose que tout ce qui suit :</p> -<pre class="brush: css notranslate">background-color: red; +<pre class="brush: css">background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-scroll: fixed;</pre> -<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p> +<p>Ce n'est pas le moment d'apprendre tous ces raccourcis — vous les croiserez à travers de nombreux exemples tout au long de ce cours, vous vous réfèrerez alors à notre <a href="/fr/docs/Web/CSS/Reference">référence CSS</a> pour en savoir plus.</p> <p><strong>Ajoutez les déclarations précédentes à votre CSS pour voir comment elles affectent la mise en forme de votre document HTML. Testez différentes valeurs.</strong></p> -<div class="blockIndicator warning"> -<p><strong>Attention </strong>: Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le rccourci ne changeait que les valeurs passées en argument.</p> +<div class="notecard warning"> +<p><strong>Attention :</strong> Les raccourcis vous autorisent à ne pas déclarer certaines valeurs, mais dans ce cas, les valeurs non déclarées sont restaurées à leur valeur par défaut. Cela garantit l'usage d'un ensemble de valeurs qui restent raisonnables. Cela peut par contre vous surprendre, si vous pensiez que le raccourci ne changeait que les valeurs passées en argument.</p> </div> -<h2 id="Commentaires">Commentaires</h2> +<h2 id="comments">Commentaires</h2> -<p>En CSS comme en HTML il est recomandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p> +<p>En CSS comme en HTML il est recommandé d'ajouter des commentaires, pour vous permettre de retrouver comment votre code fonctionne quand vous vous y replongez après quelques mois et pour permettre aussi à d'autres personnes de comprendre votre code quand elles sont amenées à travailler dessus.</p> -<p>En CSS le début des commentaires est signalé par <code>/*</code> et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaire pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante— on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p> +<p>En CSS le début des commentaires est signalé par <code>/*</code> et la fin par <code>*/</code>. Dans le bloc de code ci-dessous, j'ai utilisé des commentaires pour marquer les différentes sections. Cela devient intéressant pour un code de taille importante — on peut alors utiliser les fonctionnalités de recherche de l'éditeur de code pour naviguer dans le fichier.</p> -<pre class="brush: css notranslate">/* mise en forme des éléments de base */ +<pre class="brush: css">/* mise en forme des éléments de base */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; @@ -394,8 +382,8 @@ body { @media (min-width: 70em) { /* On donne un traitement conditionnel de la taille de police globale. - sur de grands écrans, on augmente la valeur de font-size pour une - meilleure lisibilité */ + sur de grands écrans, on augmente la valeur de font-size pour une + meilleure lisibilité */ body { font-size: 130%; } @@ -403,7 +391,7 @@ body { h1 {font-size: 1.5em;} -/* mise en forme des éléments imbriqués dans le DOM */ +/* mise en forme des éléments imbriqués dans le DOM */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line { background-color: red; @@ -419,9 +407,9 @@ div p + p { padding-top: 0; }</pre> -<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur <code>.special</code> a été désactivée par des commentaires :</p> +<p>Les commentaires sont aussi parfois utiles pour rendre temporairement inactive une zone de code (les sections commentées ne sont pas interprétées par le navigateur), par exemple pour identifier la partie de code responsable d'une erreur. Dans l'exemple suivant, la règle pour le sélecteur <code>.special</code> a été désactivée par des commentaires :</p> -<pre class="brush: css notranslate">/*.special { +<pre class="brush: css">/*.special { color: red; }*/ @@ -431,13 +419,13 @@ p { <p><strong>Ajoutez des commentaires à votre CSS, il est bon que cela devienne une habitude.</strong></p> -<h2 id="Espace">Espace</h2> +<h2 id="white_space">Espace</h2> -<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont làa plupart du temps là pour le rendre plus lisible.</p> +<p>On parle ici d'espaces laissés blancs dans le texte, de tabulations, de retour à la ligne. Le navigateur tend à ignorer les espaces dans les codes CSS et HTML ; les espaces dans le code CSS sont la plupart du temps présents pour le rendre plus lisible.</p> -<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p> +<p>L'exemple ci-dessous propose d'écrire une déclaration par ligne — le code produit est facile à comprendre et à maintenir : c'est un bon code.</p> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; @@ -470,9 +458,9 @@ div p + p { } </pre> -<p id="Very_compact">On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p> +<p>On peut écrire le même code CSS en retirant la plupart des espaces — le code ci-dessous est équivalent au précédent pour un navigateur, mais, vous l'admettrez, plus difficile à lire pour un humain !</p> -<pre class="brush: css notranslate">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} @@ -484,34 +472,34 @@ div p + p {padding-top: 0;} <p>La mise en forme de votre code est une question de goût personnel. Si vous travaillez en équipe, vous devrez sans doute vous plier aux conventions admises au sein de cette équipe.</p> -<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p> +<p>Il n'est pourtant pas possible de supprimer tous les espaces dans un fichier CSS. La suppression ou l'ajout d'espaces dans le code CSS peut produire des erreurs. Par exemple, les déclarations suivantes sont valides en CSS :</p> -<pre class="brush: css notranslate">margin: 0 auto; +<pre class="brush: css">margin: 0 auto; padding-left: 10px;</pre> -<p>Mais les suivantes sont invalides :</p> +<p>Mais les suivantes sont invalides :</p> -<pre class="brush: css notranslate">margin: 0auto; +<pre class="brush: css">margin: 0auto; padding- left: 10px;</pre> -<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code> (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p> +<p><code>0auto</code> n'est pas reconnu comme une valeur possible pour la propriété <code>margin</code> (<code>0</code> et <code>auto</code> sont chacune une valeur possible). Deux valeurs attribuées à une même propriété devront toujours être séparées par au moins un espace.</p> -<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p> +<p>Le navigateur ne connaît pas la propriété <code>padding-</code> . Les noms de propriété ou de valeur doivent être écrits tels quels sans rajouter d'espace.</p> -<p><strong>A votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p> +<p><strong>À votre tour, ajoutez ou supprimez des espaces dans votre CSS pour voir dans quels cas rien ne change et dans quels cas tout est cassé.</strong></p> -<h2 id="À_suivre...">À suivre... </h2> +<h2 id="À_suivre…">À suivre…</h2> -<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p> +<p>Il est utile de comprendre, au moins dans les grandes lignes, comment votre navigateur calcule le rendu d'une page web à partir des fichiers HTML et CSS. Dans la prochaine leçon — <a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">Comment CSS fonctionne</a> — nous examinerons donc ce point.</p> <p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> <h2 id="Dans_ce_cours">Dans ce cours</h2> <ol> - <li><a href="/fr/docs/Learn/CSS/First_steps/Qu_est_ce_que_CSS">Qu'est ce que CSS?</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> - <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_is_structured">Comment CSS est structuré</a></li> + <li><a href="/fr/docs/Learn/CSS/First_steps/What_is_CSS">Qu'est ce que CSS?</a></li> + <li><a href="/fr/docs/Learn/CSS/First_steps/Getting_started">Démarrer avec CSS</a></li> + <li>Comment CSS est structuré</li> <li><a href="/fr/docs/Learn/CSS/First_steps/How_CSS_works">CSS comment ça marche ?</a></li> <li><a href="/fr/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Mettre en œuvre vos connaissances</a></li> </ol> diff --git a/files/fr/learn/performance/measuring_performance/index.html b/files/fr/learn/performance/measuring_performance/index.html new file mode 100644 index 0000000000..8ac486bdab --- /dev/null +++ b/files/fr/learn/performance/measuring_performance/index.html @@ -0,0 +1,101 @@ +--- +title: Mesure des performances +slug: Learn/Performance/Measuring_performance +translation_of: 'Learn/Performance/Measuring_performance' +--- +<div>{{LearnSidebar}} {{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</div> + +<p>La mesure des performance fournit un indicateur important pour vous aider à assurer le succès de votre application, site ou service web.</p> + +<p>Par exemple, vous pouvez utiliser les indicateurs de performances pour déterminer la manière dont votre application se charge par rapport à vos concurrents, ou par rapport à vos versions précédentes. Il est recommandé de choisir des indicateurs pertinents en fonction de vos utilisatrices et utilisateurs, du contexte de votre site et de vos objectifs commerciaux. Ces indicateurs doivent être collectés et mesurés de façon cohérente et analysés à partir d'un format qui peut être lu et compris par des parties prenantes non techniques.</p> + +<p>Cet article présente les indicateurs de performances web que vous pouvez utiliser afin de mesurer et optimiser les performances de votre site.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requis :</th> + <td>Bases de l'informatique, <a href="/fr/docs/Learn/Getting_started_with_the_web/Installing_basic_software">logiciels de base</a> installés et connaissances de base <a href="/fr/docs/Learn/Getting_started_with_the_web">des technologies web opérant côté client</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td> + <p>Proposer des informations sur les indicateurs de performance web que vous pouvez collecter avec les différentes API de performances web et présenter des outils qui permettent de visualiser ces données.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="performance_APIs">Les API de mesure des performances</h2> + +<p>Si vous êtes en capacité d'écrire du code pour le web, sachez qu'il existe un grand nombre <a href="/fr/docs/Web/API">d'API Web</a> destinées à créer vos propres outils de mesure de performances.</p> + +<p>Vous pouvez utiliser <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de navigation</a> pour mesurer les performances web côté client. Cela comprend le volume de temps nécessaire pour décharger la page précédente, le temps que prendra la résolution du nom de domaine, le total du temps passé à exécuter le chargement de la page, et bien plus encore. Vous pouvez utiliser les API pour créer des indicateurs de mesure de tous les évènements liés à la navigation affichés dans le diagramme présenté ci-dessous.</p> + +<p><img alt="Voici les différents gestionnaires que l'API d'horodatage de la navigation peut prendre en charge, incluant les gestionnaires suivants (en anglais) : Prompt for unload ; redirect ; unload ; App cache ; DNS ; TCP ; Request ; Response ; Processing ; onLoad ; navigationStart ; redirectStart ; redirectEnd ; fetchStart ; domainLookupEnd ; domainLookupStart ; connectStart (secureConnectionStart) ; connectEnd ; requestStart ; responseStart ; responseEnd ; unloadStart ; unloadEnd ; domLoading ; domInteractive ; domContentLoaded ; domComplete ; loadEventStart ; loadEventEnd." src="navigationtimingapi.jpg"></p> + +<p><a href="/fr/docs/Web/API/Performance_API/Using_the_Performance_API">L'API de performances</a> propose un accès aux informations liées aux performances, ce qui comprend <a href="/fr/docs/Web/API/Performance_Timeline">l'API de chronologie des performances</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">l'API d'horodatage de la navigation</a>, <a href="/fr/docs/Web/API/User_Timing_API">l'API d'horodatage du visiteur</a> ainsi que <a href="/fr/docs/Web/API/Resource_Timing_API">l'API d'horodatage des ressources</a>. Ces interfaces permettent de mesurer précisément le temps que prennent les tâches JavaScript pour se dérouler.</p> + +<p>L'objet <a href="/fr/docs/Web/API/PerformanceEntry"><code>PerformanceEntry</code></a> fait partie de la <em>chronologie des performances</em>. Une entrée <em>performance</em> peut directement être créée en utilisant <em>{{domxref("PerformanceMark","PerformanceMark")}}</em> ou une <em>{{domxref("PerformanceMeasure","PerformanceMeasure")}}</em> (par exemple en appelant la méthode {{domxref("Performance.mark","mark()")}}) sur un point explicite de l'application. Les entrées de performances peuvent aussi être créées de façon indirecte, par exemple lors du chargement d'une ressource graphique.</p> + +<p><a href="/fr/docs/Web/API/PerformanceObserver">L'API PerformanceObserver</a> peut être utilisée pour observer le déroulement d'évènements de mesure des performances et permet de vous notifier de nouvelles <a href="/fr/docs/Web/API/PerformanceEntry">entrées de performances</a> lorsqu'elles enregistrent la chronologie des performances dans le navigateur.</p> + +<p>Si cet article n'a pas pour but de proposer une documentation complète de ces API, il est bon de savoir qu'elles existent. Vous pouvez vous référer à l'article concernant <a href="/fr/docs/Web/Performance/Navigation_and_resource_timings">l'horodatage de navigation</a> pour aller plus loin et découvrir plus d'exemples concernant les API liées à la mesure des performances.</p> + +<h2 id="tools_and_metrics">Outils de mesure</h2> + +<p>Il y a beaucoup d'outils disponibles pour vous aider à améliorer les performances de vos sites. Ils sont généralement classés dans deux catégories :</p> + +<ul> + <li>Les outils qui indiquent ou mesurent les performances, tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> ou le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> et le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> de Firefox. Ces outils vous montrent la vitesse de chargement de votre site ou de votre application. Ils vous indiquent également les points sur lesquels votre application web peut être améliorée.</li> + <li>Les outils qui corrigent le code de votre application web ou de votre site afin d'améliorer ses performances. Par exemple, certains outils de construction empaquettent le code réparti sur plusieurs fichiers en un seul fichier unique afin de réduire le nombre de requêtes HTTP. Il existe aussi des minificateurs qui suppriment tous les espaces de votre code pour réduire la taille des fichiers.</li> +</ul> + +<p>Sur cette page, ces deux catégories d'outils seront abordées. Par ailleurs, en parlant des mesures de performances, nous aborderons bien entendu les indicateurs que vous allez utiliser pour déterminer si les performances de votre site s'améliorent ou non.</p> + +<h3 id="general_performance_reporting_tools">Outils de rapport de performances génériques</h3> + +<p>Les outils tels que <a href="https://developers.google.com/speed/pagespeed/insights/">PageSpeed Insights</a> sont faits pour mesurer les performances des sites. Vous saisissez une URL, puis vous obtenez un rapport de performances en quelques secondes. Le rapport contient les scores obtenus par votre site, que ce soit sur mobile ou sur ordinateur de bureau. C'est un bon point de départ pour savoir d'où vous partez et pour connaître les points d'amélioration.</p> + +<p>Au moment de l'écriture de cette page, voici à quoi ressemblait le rapport de performances du site MDN :</p> + +<p><img alt="Une capture d'écran montrant le rapport PageSpeed Insights de la page d'accueil de Mozilla." src="pagespeed-insight-mozilla-homepage.png" style="border-style: solid; border-width: 1px;"></p> + +<p>Un rapport de performances contient des informations concernant le temps d'attente des visiteurs avant que quelque chose ne s'affiche, le nombre d'octets à télécharger pour afficher la page, et bien plus encore. Cela vous permet également de savoir si les mesures réalisées sont positives ou négatives.</p> + +<p><a href="https://webpagetest.org">webpagetest.org</a> est un autre exemple d'outil capable de tester automatiquement votre site et d'afficher des indicateurs utiles.</p> + +<p>Essayez vos sites favoris sur webpagetest.org et PageSpeed Insights, vous connaîtrez leurs scores de performances.</p> + +<h3 id="network_tools">Outils réseau</h3> + +<p>La plupart des navigateurs ont des outils avec lesquels vous pouvez tester les pages web en cours de chargement pour déterminer leurs performances. Par exemple, le <a href="/fr/docs/Tools/Network_Monitor">moniteur réseau</a> de Firefox retourne des informations détaillées sur toutes les ressources téléchargées sur le réseau ainsi qu'un graphique montrant la durée de téléchargement de chaque ressource.</p> + +<p><img alt="" src="network-monitor.png" style="border-style: solid; border-width: 1px;"></p> + +<p>Vous pouvez aussi utiliser le <a href="/fr/docs/Tools/Performance">moniteur de performances</a> pour mesurer les performances de l'interface de votre application ou de votre site pendant que vous réalisez différentes actions. Cela permet d'identifier les fonctionnalités qui ralentissent le plus votre interface.</p> + +<p><img alt="" src="perf-monitor.png" style="border-style: solid; border-width: 1px;"></p> + +<h2 id="conclusion">Conclusion</h2> + +<p>Cet article était destiné à proposer une vue d'ensemble rapide des indicateurs de performance web que vous pouvez mesurer sur un site ou une application web. Dans le prochain article, nous verrons comment travailler sur la performance perçue et nous découvrirons des techniques permettant de rendre les éléments les plus longs à charger un peu moins lents pour le visiteur, voire pour les masquer complètement.</p> + +<p>{{PreviousMenuNext("Learn/Performance/Perceived_performance", "Learn/Performance/Multimedia", "Learn/Performance")}}</p> + +<h2 id="in_this_module">Dans ce module</h2> + +<ul> + <li><a href="/fr/docs/Learn/Performance/why_web_performance">Le « pourquoi » des performances web</a></li> + <li><a href="/fr/docs/Learn/Performance/What_is_web_performance">Qu'est-ce que sont les performances web ?</a></li> + <li><a href="/fr/docs/Learn/Performance/Perceived_performance">Comment les visiteurs perçoivent-ils les performances ?</a></li> + <li><a href="/fr/docs/Learn/Performance/Measuring_performance">Mesurer les performances</a></li> + <li><a href="/fr/docs/Learn/Performance/Multimedia">Multimédia : images</a></li> + <li><a href="/fr/docs/Learn/Performance/video">Multimédia : vidéos</a></li> + <li><a href="/fr/docs/Learn/Performance/JavaScript">Bonnes pratiques de performances pour JavaScript</a></li> + <li><a href="/fr/docs/Learn/Performance/HTML">Fonctionnalités de HTML liées aux performances</a></li> + <li><a href="/fr/docs/Learn/Performance/CSS">Fonctionnalités de CSS liées aux performances</a></li> + <li><a href="/fr/docs/Learn/Performance/Fonts">Performances et polices d'écriture</a></li> + <li><a href="/fr/docs/Learn/Performance/Mobile">Performances sur mobile</a></li> + <li><a href="/fr/docs/Learn/Performance/business_case_for_performance">Placer le focus sur les performances</a></li> +</ul> diff --git a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html index 19933cfd0d..9905d1e7ae 100644 --- a/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html +++ b/files/fr/learn/tools_and_testing/understanding_client-side_tools/command_line/index.html @@ -481,7 +481,7 @@ printMe(myObj);</pre> <ul> <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview">Client-side tooling overview</a></li> - <li><a href="https://wiki.developer.mozilla.org/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li> + <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Ligne_de_commande">Cours express sur la ligne de commande</a></li> <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a></li> <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Introducing_complete_toolchain">Introducing a complete toolchain</a></li> <li><a href="/fr/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a></li> diff --git a/files/fr/mdn/contribute/localize/index.html b/files/fr/mdn/contribute/localize/index.html index 769f171966..082c1a24ed 100644 --- a/files/fr/mdn/contribute/localize/index.html +++ b/files/fr/mdn/contribute/localize/index.html @@ -32,7 +32,7 @@ tags: <ul> <li>Discussions : <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li> - <li>Contributeurs actuels : <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/JNa0">JNa0</a>, <a href="https://github.com/nicolas-goudry">nicolas-goudry</a>, <a href="https://github.com/LEMIBANDDEXARI">LEMIBANDDEXARI</a></li> + <li>Contributeurs actuels : <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/audrasjb">Jb Audras</a></li> </ul> <h3 id="Japanese_ja">Japonais (ja)</h3> diff --git a/files/fr/mozilla/firefox/releases/3.6/index.html b/files/fr/mozilla/firefox/releases/3.6/index.html index 168ce35f38..0db6534632 100644 --- a/files/fr/mozilla/firefox/releases/3.6/index.html +++ b/files/fr/mozilla/firefox/releases/3.6/index.html @@ -7,7 +7,7 @@ tags: translation_of: Mozilla/Firefox/Releases/3.6 original_slug: Mozilla/Firefox/Versions/3.6 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html index 1912c86e8c..5fdb071214 100644 --- a/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/fr/mozilla/firefox/releases/3/updating_extensions/index.html @@ -6,7 +6,7 @@ tags: translation_of: Mozilla/Firefox/Releases/3/Updating_extensions original_slug: Mise_à_jour_des_extensions_pour_Firefox_3 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/mozilla/firefox/releases/35/index.html b/files/fr/mozilla/firefox/releases/35/index.html index 51627085aa..ccd31bf7db 100644 --- a/files/fr/mozilla/firefox/releases/35/index.html +++ b/files/fr/mozilla/firefox/releases/35/index.html @@ -8,7 +8,7 @@ tags: translation_of: Mozilla/Firefox/Releases/35 original_slug: Mozilla/Firefox/Versions/35 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/mozilla/firefox/releases/4/index.html b/files/fr/mozilla/firefox/releases/4/index.html index 20b62b8bee..42cc40e3dc 100644 --- a/files/fr/mozilla/firefox/releases/4/index.html +++ b/files/fr/mozilla/firefox/releases/4/index.html @@ -7,7 +7,7 @@ tags: translation_of: Mozilla/Firefox/Releases/4 original_slug: Mozilla/Firefox/Versions/4 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/mozilla/firefox/releases/6/index.html b/files/fr/mozilla/firefox/releases/6/index.html index b3c31b4e8e..413996137f 100644 --- a/files/fr/mozilla/firefox/releases/6/index.html +++ b/files/fr/mozilla/firefox/releases/6/index.html @@ -7,7 +7,7 @@ tags: translation_of: Mozilla/Firefox/Releases/6 original_slug: Mozilla/Firefox/Versions/6 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/mozilla/firefox/releases/8/index.html b/files/fr/mozilla/firefox/releases/8/index.html index d6da1ee29c..b59e66f0b9 100644 --- a/files/fr/mozilla/firefox/releases/8/index.html +++ b/files/fr/mozilla/firefox/releases/8/index.html @@ -7,7 +7,7 @@ tags: translation_of: Mozilla/Firefox/Releases/8 original_slug: Mozilla/Firefox/Versions/8 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/mozilla/firefox/releases/9/index.html b/files/fr/mozilla/firefox/releases/9/index.html index e34861ce72..ccef51ab0f 100644 --- a/files/fr/mozilla/firefox/releases/9/index.html +++ b/files/fr/mozilla/firefox/releases/9/index.html @@ -7,7 +7,7 @@ tags: translation_of: Mozilla/Firefox/Releases/9 original_slug: Mozilla/Firefox/Versions/9 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index e8891925b5..14da8cbd47 100644 --- a/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/fr/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -39,7 +39,7 @@ analyseur.connect(distortion); <p>Ces méthodes copient les données dans le tableau passé en paramètre, il faut donc créer un tableau avant de les invoquer. La première produit des nombres flottants à simple précision de 32 bits, qui ne peuvent être stockées dans un simple tableau javascript. Vous devez créer un domxref("Float32Array") }} ou un {{ domxref("Uint8Array") }}, en fonction du type de données que vous traitez.</p> -<p>Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournonns la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.</p> +<p>Par exemple, disons que nous manipulons une fft de fréquence 2048. Nous retournons la valeur {{ domxref("AnalyserNode.frequencyBinCount") }}, qui correspond à la moitié de la fréquence, puis nous appelons la méthode Uint8Array() en passant frequencyBinCount comme argument pour la taille — c'est le nombre de points de données qui seront collectées pour cette fréquence.</p> <pre class="brush: js">analyseur.fftSize = 2048; var tailleMemoireTampon = analyseur.frequencyBinCount; diff --git a/files/fr/web/css/media_queries/index.html b/files/fr/web/css/media_queries/index.html index 38aec3f36c..ad2a10fb01 100644 --- a/files/fr/web/css/media_queries/index.html +++ b/files/fr/web/css/media_queries/index.html @@ -83,5 +83,5 @@ original_slug: Web/CSS/Requêtes_média <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme srlon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li> + <li>La règle-@ {{cssxref("@supports")}} afin d'appliquer une mise en forme selon que l'agent utilisateur prend ou non en charge certaines technologies CSS.</li> </ul> diff --git a/files/fr/web/guide/audio_and_video_delivery/index.html b/files/fr/web/guide/audio_and_video_delivery/index.html index c52fe4bc8b..ec4ed3f773 100644 --- a/files/fr/web/guide/audio_and_video_delivery/index.html +++ b/files/fr/web/guide/audio_and_video_delivery/index.html @@ -1,36 +1,29 @@ --- -title: Intégration Audio et Vidéo +title: Intégration audio et vidéo slug: Web/Guide/Audio_and_video_delivery -tags: - - Audio - - HTML5 - - Media - - Video translation_of: Web/Guide/Audio_and_video_delivery --- -<div class="summary"> -<p>On peut délivrer de l'audio et vidéo sur le web de plusieurs manières, du fichier média statique au live stream (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p> -</div> +<p>On peut distribuer de l'audio et de la vidéo sur le web de plusieurs manières, du fichier média statique au <i lang="en">live stream</i> (flux en direct) adaptatif. Cet article se veut être le point de départ pour explorer les différents mécanismes de diffusion de média sur le web et la compatiblité avec les navigateurs populaires.</p> -<h2 id="Les_éléments_Audio_et_Vidéo">Les éléments Audio et Vidéo</h2> +<h2 id="the_audio_and_video_elements">Les éléments audio et vidéo</h2> -<p>Que l'on traite des fichiers audio pré-enregistrés ou des live streams, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments {{ htmlelement("audio")}} et {{ htmlelement("video")}}. Actuellement, pour supporter tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants:</p> +<p>Que l'on traite des fichiers audio pré-enregistrés ou des flux en directs, le mécanisme pour les rendre disponibles à travers un navigateur reste à peu près le même — via les éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> et <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>. Actuellement, pour prendre en charge tous les navigateurs, il est nécessaire de définir deux formats — bien qu'avec l'adoption des formats MP3 et MP4 dans Firefox et Opera, cela change rapidement. Vous pouvez trouver les informations de compatibilité des navigateurs aux endroits suivants :</p> <ul> - <li><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">Table de compatibilité des Codecs Audio</a></li> - <li><a href="/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">Table de compatibilité des Codecs Audio/Video</a></li> + <li><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#audio_codec_support">Tableau de compatibilité des codecs audio</a></li> + <li><a href="/fr/docs/Web/Media/Formats/Video_codecs">Guide sur les codecs pour les vidéos</a></li> </ul> -<p>Pour délivrer du contenu audio et vidéo, le procédé général est comme suit:</p> +<p>Pour distribuer du contenu audio et vidéo, le processus général se déroule comme suit :</p> <ol> - <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité</li> - <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours (comme une version Flash.)</li> - <li>Définir comment vous voulez jouer/instancier le média (par exemple un élément {{ htmlelement("video") }}, ou peut-être <code>document.createElement('video')</code>)</li> + <li>Vérifier quels formats sont pris en charge par le navigateur via la détection de fonctionnalité ;</li> + <li>Si le navigateur ne lit pas nativement les formats fournis, utiliser un contenu de secours dans un autre format ;</li> + <li>Définir la façon dont vous voulez lire/instancier le média (par exemple un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, ou peut-être via JavaScript avec <code>document.createElement('video')</code>) ;</li> <li>Ajouter le fichier média au lecteur.</li> </ol> -<h3 id="Audio_HTML">Audio HTML</h3> +<h3 id="html_audio">Audio HTML</h3> <pre class="brush: html"><audio controls preload="auto"> <source src="audiofile.mp3" type="audio/mpeg"> @@ -39,18 +32,18 @@ translation_of: Web/Guide/Audio_and_video_delivery <source src="audiofile.ogg" type="audio/ogg"> <!-- fallback pour les navigateurs qui ne supportent pas la balise audio --> - <a href="audiofile.mp3">download audio</a> + <a href="audiofile.mp3">Télécharger l'audio</a> </audio></pre> -<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecteur fluide.</p> +<p>Le code ci-dessus va créer un lecteur audio qui tente de précharger autant d'audio que possible pour une lecture fluide.</p> <div class="note"> -<p><strong>Note</strong>: L'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> +<p><strong>Note :</strong> l'attribut <code>preload</code> peut être ignoré par certains navigateurs mobiles.</p> </div> -<p>Pour plus d'informations voir <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#HTML5_audio_in_detail">Les bases de l'Audio multi-navigateur (Audio HTML5 en détail)</a></p> +<p>Pour plus d'informations voir <a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics#html5_audio_in_detail">Les bases de l'audio multi-navigateur (Audio HTML5 en détails)</a></p> -<h3 id="Vidéo_HTML">Vidéo HTML</h3> +<h3 id="html_video">Vidéo HTML</h3> <pre class="brush: html"><video controls width="640" height="480" poster="initialimage.png" autoplay muted> <source src="videofile.mp4" type="video/mp4"> @@ -63,39 +56,20 @@ translation_of: Web/Guide/Audio_and_video_delivery <track src="subtitles_no.vtt" kind="subtitles" srclang="no" label="Norwegian"> <!-- fallback pour les navigateurs qui ne supportent pas la balise video --> - <a href="videofile.mp4">download video</a> + <a href="videofile.mp4">Télécharger la vidéo</a> </video></pre> -<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une image poster jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p> +<p>Le code ci-dessus crée un lecteur vidéo de dimensions 640x480 pixels, affichant une vignette jusqu'à ce que la vidéo soit lue. On demande à la vidéo de passer en <code>autoplay</code> (jouer automatiquement) mais d'être <code>muted</code> (en sourdine) par défaut.</p> <div class="note"> -<p><strong>Note</strong>: L'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles.</p> + <p><strong>Note :</strong> l'attribut <code>autoplay</code> peut être ignoré par certains navigateurs mobiles et est sujet à controverse lorsqu'il est utilisé à mauvais escient. Il est recommandé de lire <a href="/fr/docs/Web/Media/Autoplay_guide">le guide à ce sujet</a> pour savoir comment l'utiliser pertinemment.</p> </div> -<p>Pour plus d'informations voir {{ htmlelement("video", "l'élément vidéo") }} et <a href="/fr/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo multi-navigateur</a>.</p> - -<h3 id="Contenu_de_secours_Audio_et_Vidéo">Contenu de secours Audio et Vidéo</h3> - -<p>On peut créer un contenu de secours en utilisant Flash. <a href="https://github.com/mediaelement/mediaelement/tree/master/build">Utiliser mediaelement.js</a> par exemple.</p> - -<pre class="brush: html"><audio controls> - <source src="audiofile.mp3" type="audio/mpeg"> - <source src="audiofile.ogg" type="audio/ogg"> - <!-- fallback pour les navigateurs qui ne supportent pas le tag audio --> - <a href="audiofile.mp3">download audio</a> - <object width="320" height="30" type="application/x-shockwave-flash" data="mediaelement-flash-audio.swf"> - <param name="movie" value="mediaelement-flash-audio.swf" /> - <param name="flashvars" value="controls=true&file=audiofile.mp3" /> - </object> -</audio></pre> - -<p>Le procédé est très similaire avec {{ htmlelement("video") }} — il faut juste changer le SWF utilisé.<br> - <br> - <a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Fallbacks">Plus d'option de Fallbacks</a>.</p> +<p>Pour plus d'informations voir <a href="/fr/docs/Web/HTML/Element/video">l'article de référence sur l'élément <code><video></code></a> et <a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">la page sur la création d'un lecteur vidéo multi-navigateur</a>.</p> -<h3 id="Audio_JavaScript">Audio JavaScript</h3> +<h3 id="javascript_audio">Audio JavaScript</h3> -<pre class="brush: js">var myAudio = document.createElement('audio'); +<pre class="brush: js">const myAudio = document.createElement('audio'); if (myAudio.canPlayType('audio/mpeg')) { myAudio.setAttribute('src','audiofile.mp3'); @@ -106,21 +80,21 @@ if (myAudio.canPlayType('audio/mpeg')) { myAudio.currentTime = 5; myAudio.play();</pre> -<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis on place la tête de lecture à 5 secondes et essayons de lire le fichier.</p> +<p>On définit la source de l'audio en fonction du type de fichier audio pris en charge par le navigateur, puis nous plaçons la tête de lecture à 5 secondes et essayons de lire le fichier.</p> <div class="note"> -<p><strong>Note</strong>: <code>Play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action utilisateur.</p> +<p><strong>Note :</strong> <code>play()</code> sera ignoré par certains navigateurs mobiles à moins que l'événement ne soit initié par une action de la personne visitant le site.</p> </div> -<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément {{ htmlelement("audio") }}, permettant ainsi de générer de l'audio à la volée:</p> +<p>Il est également possible de donner un fichier WAV encodé en base64 à l'élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a>, permettant ainsi de générer de l'audio à la volée :</p> <pre class="brush: html"><audio id="player" src="data:audio/x-wav;base64,UklGRvC..."></audio></pre> -<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="http://speak-demo.herokuapp.com">Essayez la démo</a>.</p> +<p><a href="https://github.com/kripken/speak.js/">Speak.js</a> emploie cette technique. <a href="https://speak-demo.herokuapp.com">Essayez la démo</a>.</p> -<h3 id="Vidéo_JavaScript">Vidéo JavaScript</h3> +<h3 id="javascript_video">Vidéo JavaScript</h3> -<pre class="brush: js">var myVideo = document.createElement('video'); +<pre class="brush: js">const myVideo = document.createElement('video'); if (myVideo.canPlayType('video/mp4')) { myVideo.setAttribute('src','videofile.mp4'); @@ -133,207 +107,150 @@ myVideo.height = 320;</pre> <p>On définit la source de la vidéo en fonction du type de fichier vidéo pris en charge par le navigateur, puis on définit la largeur et la hauteur de la vidéo.</p> -<h2 id="API_Web_Audio">API Web Audio</h2> - -<pre class="brush: js"> var context; - var request; - var source; - - try { - context = new (window.AudioContext || window.webkitAudioContext)(); - request = new XMLHttpRequest(); - request.open("GET","http://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true); - request.responseType = "arraybuffer"; - - request.onload = function() { - context.decodeAudioData(request.response, function(buffer) { - source = context.createBufferSource(); - source.buffer = buffer; - source.connect(context.destination); - // auto play - source.start(0); // start was previously noteOn - }); - }; +<h2 id="web_audio_api">API Web Audio</h2> - request.send(); +<pre class="brush: js">let context; +let request; +let source; - } catch(e) { - alert('web audio api not supported'); - }</pre> +try { + context = new AudioContext(); + request = new XMLHttpRequest(); + request.open("GET","https://jplayer.org/audio/mp3/RioMez-01-Sleep_together.mp3",true); + request.responseType = "arraybuffer"; -<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="http://jsbin.com/facutone/1/edit?js">Essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p> + request.onload = function() { + context.decodeAudioData(request.response, function(buffer) { + source = context.createBufferSource(); + source.buffer = buffer; + source.connect(context.destination); + // auto play + source.start(0); // start était précédemment intitulé noteOn + }); + }; -<h2 id="getUserMedia_Stream_API">getUserMedia / Stream API</h2> + request.send(); -<p>Il est également possible de récupérer un live stream de la webcam et/ou du microphone de l'utilisateur avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus large connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p> +} catch(e) { + console.error(`L'API Web Audio n'est pas prise en charge`); +}</pre> -<p>Pour récupérer un flux de la webcam, commencez par créer un élément {{htmlelement("video")}}:</p> +<p>Dans cet exemple, on récupère un fichier MP3 via XHR, on le charge et on le lit (<a href="https://jsbin.com/facutone/1/edit?js">essayez par vous-même</a>). Pour en savoir plus sur l'API Web Audio voir <a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utiliser l'API Web Audio</a>.</p> -<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> +<h2 id="getusermedia_stream_api">getUserMedia / Stream API</h2> -<p>Ensuite, si cette opération est prise en charge, connectez la webcam à l'élément video:</p> +<p>Il est également possible de récupérer un <i lang="en">live stream</i> de la webcam et/ou du microphone de la personne consultant le site avec <code>getUserMedia</code> et l'API Stream. Cela fait partie d'une technologie plus largement connue sous le nom de WebRTC (Web Real-Time Communications) et est compatible avec les dernières versions de Chrome, Firefox et Opera.</p> -<pre class="brush: js">navigator.getUserMedia || - (navigator.getUserMedia = navigator.mozGetUserMedia || - navigator.webkitGetUserMedia || navigator.msGetUserMedia); +<p>Pour récupérer un flux de la webcam, commençons par créer un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> :</p> -window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL; +<pre class="brush: html"><video id="webcam" width="480" height="360"></video></pre> -if (navigator.getUserMedia) { - navigator.getUserMedia({ - video: true, - audio: false - }, onSuccess, onError); -} else { - alert('getUserMedia is not supported in this browser.'); -} +<p>Ensuite, si cette opération est prise en charge, nous connectons la webcam à l'élément video :</p> -function onSuccess(stream) { - var video = document.getElementById('webcam'); +<pre class="brush: js"> +if (navigator.mediaDevices) { + navigator.mediaDevices.getUserMedia({ video: true, audio: false }) + .then(function onSuccess(stream) { + const video = document.getElementById('webcam'); video.autoplay = true; - video.src = window.URL.createObjectURL(stream); + video.srcObject = stream; + }) + .catch(function onError() { + console.error(`Problème de récupération des flux : utilisez-vous une page avec file:/// ou avez-vous décliné la permission ?`); + }); +} else { + console.error(`getUserMedia n'est pas pris en charge par ce navigateur.`); } +</pre> -function onError() { - alert('There has been a problem retreiving the streams - are you running on file:/// or did you disallow access?'); -}</pre> - -<p>Pour en savoir plus, lisez la page <a href="/fr/docs/NavigatorUserMedia.getUserMedia">Navigator.getUserMedia</a>.</p> +<p>Pour en savoir plus, lisez la page <a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>MediaDevices.getUserMedia</code></a>.</p> -<h2 id="Mediastream_Recording">Mediastream Recording</h2> +<h2 id="mediastream_recording">Enregistrement de flux média</h2> -<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.<br> - <br> - Le principe de base est décrit ci-dessus:</p> +<p>De nouveaux standards sont en cours de déploiement pour permettre au navigateur de récupérer le flux du micro ou de la webcam — en utilisant <code>getUserMedia</code> — et l'enregistrer directement avec la nouvelle API MediaRecorder. Pour ce faire, on prend le stream retourné par <code>getUserMedia</code>, on le donne en paramètre à un objet <code>MediaRecorder</code>, puis on utilise le résultat obtenu comme source audio ou video.</p> -<pre class="brush: js">var onSuccess = function(stream) { +<p>Le principe de base est décrit ci-après :</p> - var mediaRecorder = new MediaRecorder(stream); +<pre class="brush: js"> +navigator.mediaDevices.getUserMedia({audio:true}) + .then(function onSuccess(stream) { + const recorder = new MediaRecorder(stream); - mediaRecorder.ondataavailable = function(e) { - var audio = document.createElement('audio'); - audio.src = window.URL.createObjectURL(e.data); - } -} - -navigator.getUserMedia({audio:true}, onSuccess);</pre> - -<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">MediaRecorder API</a> pour plus de détails.</p> + const data = []; + recorder.ondataavailable = function(e) { + data.push(e.data); + }; + recorder.start(); + recorder.onerror = function(e) { + throw e.error || new Error(e.name); // e.name est utilisé pour Firefox + } + recorder.onstop = function(e) { + const audio = document.createElement('audio'); + audio.src = window.URL.createObjectURL(new Blob(data)); + } + setTimeout(function() { + rec.stop(); + }, 5000); + }) + .catch(function onError(error) { + console.log(error.message); + }); +</pre> -<div class="note"> -<p><strong>Note</strong>: MediaRecorder est actuellement uniquement supporté par Firefox et uniquement pour l'audio, mais il existe des solutions pour contourner ce problème, comme la bibliothèque <a href="https://github.com/muaz-khan/WebRTC-Experiment/tree/master/RecordRTC">RecordRTC</a>.</p> -</div> +<p>Voir <a href="/fr/docs/Web/API/MediaRecorder_API">l'API MediaRecorder</a> pour plus de détails.</p> -<h2 id="Extensions_de_Source_Media">Extensions de Source Media</h2> +<h2 id="media_source_extensions_mse">Media Source Extensions (MSE)</h2> -<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE) est un brouillon de travail de W3C qui prévoit d'étendre {{domxref("HTMLMediaElement")}} pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des streams facilite toute une variété de cas d'utilisations comme le straming adaptatif et le décalage temporel des live streams.</p> +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html">Media Source Extensions</a> (MSE ou « extensions pour les sources de média ») est un brouillon de travail (<i lang="en">Working Draft</i> en anglais) du W3C qui prévoit d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour permettre à JavaScript de générer des flux média pour la lecture. Permettre à JavaScript de générer des flux facilite différents cas d'usage comme la diffusion en direct adaptative et le décalage temporel des flux de diffusion en direct.</p> -<h3 id="Extensions_Media_Encrypté_(EME)">Extensions Media Encrypté (EME)</h3> +<h3 id="encrypted_media_extensions_eme">Encrypted Media Extensions (EME)</h3> -<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> est une proposition de W3C d'étendre {{domxref("HTMLMediaElement")}} en fournissant des APIs pour contrôler la lecture de contenu protégé.<br> - <br> - L'API supporte divers cas d'utiilisation, allant de la simple décryption par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui supportent tout une gamme de technologies de décryptage et de protection de contenu.<br> - <br> - Un des principal usage d'EME est de permettre au navigateur d'implémenter le gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques">Digital Rights Management</a>), rendant inutiles les modules extérieurs de type Flash ou Silverlight.</p> +<p><a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/encrypted-media/encrypted-media.html">Encrypted Media Extensions</a> (EME ou « extensions pour les médias chiffrés ») est une proposition du W3C d'étendre <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> en fournissant des API pour contrôler la lecture de contenu protégé.</p> -<div class="note"> -<p><strong>Note</strong>: Un DRM est un système permettant de restreindre l'accès à une ressource (particulièrement les vidéos), ce qui aide à en empêcher la copie.</p> -</div> +<p>L'API prend en charge divers cas d'utilisation, allant du simple déchiffrement par clé aux vidéos protégées par DRM (pourvu que le navigateur implémente ce système). L'échange de licence/clé est contrôlé par l'application, facilitant ainsi le développement d'applications de lecture robustes et qui prennent en charge différentes technologies de déchiffrement et de protection de contenu. Un des principaux usages d'EME est de permettre au navigateur d'implémenter la gestion des DRM (<a href="https://fr.wikipedia.org/wiki/Gestion_des_droits_num%C3%A9riques"><i lang="en">Digital Rights Management</i></a>).</p> -<h3 id="Streaming_adaptatif">Streaming adaptatif</h3> +<h3 id="adaptive_streaming">Diffusion adaptative</h3> -<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter le streaming adaptatif. Un <em>streaming adaptatif</em> est un flux en direct qui s'adapte à la bande passante disponible de l'utilisateur, typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. Le streaming adaptatif est souvent utilisé en conjonction avec le live streaming, où une diffusion fluide de l'audio et vidéo est primordiale.</p> +<p>De nouveaux formats et protocoles ont été (et sont encore) deployés pour faciliter la diffusion adaptative. Une diffusion adaptative est un flux en direct qui s'adapte à la bande passante disponible de la personne utilisant le site. Typiquement, la qualité du stream peut changer en temps réel pour utiliser plus ou moins de bande passante. La diffusion adaptative est souvent utilisée en conjonction avec le <i lang="en">live streaming</i>, où une diffusion fluide de l'audio et vidéo est primordiale.</p> -<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#HLS">HLS</a> et <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video#MPEG-DASH">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="http://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats supportés par DASH, et le dernier par HLS aussi). Si vous êtes interessé par les différents standards, de manière générale, que vous cherchiez une certaine flexibilité ou souhaitiez supporter la plupart des navigateurs modernes, DASH est probablement la meilleure solution.</p> +<p>Les principaux encodages utilisés pour le streaming adaptatif sont <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#hls">HLS</a> et <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video#mpeg-dash">MPEG-DASH</a>. MSE a été conçu avec DASH en tête, il définit les flux d'octets selon <a href="https://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/isobmff-byte-stream-format.html">ISOBMFF</a> et <a href="https://en.wikipedia.org/wiki/M2ts">M2TS</a> (deux formats pris en charge par DASH, le dernier étant également pris en charge par HLS). DASH est probablement la meilleure option en termes de compatibilité, standard et flexibilité.</p> <div class="note"> -<p><strong>Note</strong>: Actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.</p> +<p><strong>Note :</strong> actuellement, Safari ne prend pas en charge DASH, cependant dash.js marche sur les nouvelles versions de Safari prévues pour être publiées avec OSX Yosemite.</p> </div> -<p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni splitting des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.<br> - <br> - Pour plus d'informations, voir <a href="/fr/Apps/Build/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p> - -<h2 id="Débugger_les_problèmes_Audio_Vidéo">Débugger les problèmes Audio / Vidéo</h2> +<p>DASH fournit également un certain nombre de profils, y compris des profils <em>à la demande</em> simples, sans pré-traitement ni séparation des fichiers multimédia. Il existe un certain nombre de services en ligne qui vous permettront de convertir vos média en HLS ou DASH.</p> -<p>Vous avez des problèmes de lecture audio ou vidéo? Essayez la checklist suivante.</p> +<p>Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Live_streaming_web_audio_and_video">Live streaming web Audio et Vidéo</a>.</p> -<h3 id="Est-ce_que_le_navigateur_prend_en_charge_les_formats_fournis">Est-ce que le navigateur prend en charge les formats fournis?</h3> - -<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p> - -<ul> - <li>Audio MP3 (<code>type="audio/mpeg"</code>):<a href="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="http://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>.)</li> - <li>Audio MP4 (<code>type="audio/mp4"</code>):<a href="http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> http://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="http://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>.)</li> - <li>Audio Ogg (<code>type="audio/ogg"</code>):<a href="http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> http://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="http://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>.)</li> - <li>Video MP4 (<code>type="video/mp4"</code>):<a href="http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> http://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="http://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>.)</li> - <li>Video WebM (<code>type="video/webm"</code>):<a href="http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> http://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="http://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>.)</li> - <li>Video Ogg (<code>type="video/ogg"</code>):<a href="http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> http://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="http://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>.)</li> -</ul> - -<p>Si un de ces fichier n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Considérez utiliser un format différent ou un contenu de secours (Flash).<br> - <br> - Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux problèmes possibles:</p> - -<h3 id="Le_serveur_ne_fournit_pas_le_type_MIME_correct_du_fichier">Le serveur ne fournit pas le type MIME correct du fichier</h3> - -<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code>:</p> - -<pre># AddType TYPE/SUBTYPE EXTENSION - -AddType audio/mpeg mp3 -AddType audio/mp4 m4a -AddType audio/ogg ogg -AddType audio/ogg oga - -AddType video/mp4 mp4 -AddType video/mp4 m4v -AddType video/ogg ogv -AddType video/webm webm -AddType video/webm webmv</pre> - -<h3 id="Votre_fichier_n'est_pas_encodé_correctement">Votre fichier n'est pas encodé correctement</h3> - -<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils souivants, qui se sont avérés être généralement fiables:</p> - -<ul> - <li><a href="http://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li> - <li><a href="http://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li> - <li><a href="http://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li> - <li><a href="http://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li> - <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li> - <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li> - <li><a href="http://m.vid.ly/">Vid.ly</a> - Video player,transcoding and delivery</li> - <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li> -</ul> - -<h2 id="Customiser_votre_Lecteur_Media">Customiser votre Lecteur Media</h2> +<h2 id="customizing_your_media_player">Personnaliser votre lecteur média</h2> <p>Vous pouvez vouloir un lecteur audio ou vidéo qui ait le même aspect sur tous les navigateurs, ou simplement vouloir l'adapter à votre site. La technique générale pour y parvenir est d'omettre l'attribut <code>controls</code> afin que les contrôles par défaut du navigateur ne s'affichent pas, et de créer vos propres contrôles en HTML et CSS, avec du JavaScript pour lier vos contrôles à l'API audio/vidéo.</p> -<p>Si vous avez besoin de quelque chose en plus, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progrès sous certaines conditions.</p> +<p>Si vous avez besoin d'aller plus loin, il est possible d'ajouter des fonctionnalités qui ne sont pas présentes par défaut dans les lecteurs, tels que la vitesse de lecture, le choix de la qualité ou mêmes les spectres audio. Vous pouvez également décider de rendre votre lecteur responsive — par exemple, vous pouvez enlever la barre de progression sous certaines conditions.</p> -<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour l'utilisateur.</p> +<p>Vous pouvez détecter les événements de clic, de toucher et/ou de clavier pour déclencher des actions telles que lecture, pause et stop. Il est souvent souhaitable d'ajouter des raccourcis clavier pour plus de commodité et d'accessibilité pour la personne utilisant le lecteur média.</p> <p>Un exemple rapide — d'abord, configurez votre audio et vos contrôles personnalisés en HTML:</p> -<pre class="brush: html"> <audio id="my-audio" src="http://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> - <button id="my-control">play</button></pre> +<pre class="brush: html"> +<audio id="my-audio" src="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"></audio> +<button id="my-control">play</button></pre> <p>Ensuite, ajoutez un peu de JavaScript pour détecter les événements afin de lire et de mettre en pause l'audio:</p> <pre class="brush: js">window.onload = function() { - var myAudio = document.getElementById('my-audio'); - var myControl = document.getElementById('my-control'); + const myAudio = document.getElementById('my-audio'); + const myControl = document.getElementById('my-control'); function switchState() { if (myAudio.paused == true) { myAudio.play(); - myControl.innerHTML = "pause"; + myControl.textContent = "pause"; } else { myAudio.pause(); - myControl.innerHTML = "play"; + myControl.textContent = "play"; } } @@ -350,99 +267,219 @@ AddType video/webm webmv</pre> window.addEventListener( "keypress", checkKey, false ); }</pre> -<p>Vous pouvez <a href="http://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Creating_your_own_custom_audio_player">Customiser votre propre lecteur audio</a>.</p> +<p>Vous pouvez <a href="https://jsbin.com/jujeladu/2/edit">essayer cet exemple ici</a>. Pour plus d'informations, voir <a href="/fr/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#creating_your_own_custom_audio_player">Créer votre propre lecteur audio</a>.</p> + +<h2 id="other_tips_for_audiovideo">Autres conseils pour l'audio/video</h2> -<h2 id="Bibliothèques_JavaScript_AudioVidéo">Bibliothèques JavaScript Audio/Vidéo</h2> +<h3 id="stopping_the_download_of_media">Interrompre le téléchargement d'un média</h3> -<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments {{htmlelement("track")}} pour les sous-titres peuvent également être fournies par les bibliothèques média.</p> +<p>Bien qu'il suffit d'utiliser la méthode <code>pause()</code> pour interrompre la lecture d'un média, le navigateur continue de télécharger le média jusqu'à ce que l'élément correspondant soit nettoyé par le ramasse-miettes.</p> -<h3 id="Audio_uniquement">Audio uniquement</h3> +<p>Voici une astuce qui permet d'arrêter le téléchargement :</p> + +<pre class="brush: js">const mediaElement = document.querySelector("#monIDdeMedia"); +mediaElement.removeAttribute("src"); +mediaElement.load(); +</pre> + +<p>En supprimant l'attribut <code>src</code> de l'élément et en invoquant la méthode <code>load()</code>, on libère les ressources associées à la vidéo, ce qui entraîne l'arrêt du téléchargement. Il est nécessaire d'invoquer <code>load()</code> après le retrait de l'attribut, car sa simple suppression ne relance pas l'algorithme chargement. Si l'élément <code><video></code> dispose également d'éléments descendants <code><source></code>, ceux-ci devraient également être supprimés avant l'appel à <code>load()</code>.</p> + +<p>Si on définit l'attribut <code>src</code> avec une chaîne vide, le navigateur considèrera la source comme un chemin relatif et cela déclenchera une tentative d'un autre téléchargement à partir d'une source qui n'est probablement pas une vidéo valide.</p> + +<h3 id="seeking_through_media">Parcourir la piste du média</h3> + +<p>Les éléments média permettent de placer le curseur de lecture à des instants spécifiques du contenu. Pour cela, on ajustera la propriété <code>currentTime</code> de l'élément (voir <a href="/fr/docs/Web/API/HTMLMediaElement"><code>HTMLMediaElement</code></a> pour plus de détails)</p> + +<p>La propriété <code>seekable</code> de l'élément peut être utilisée afin de déterminer les intervalles disponibles pour de tels déplacements. Cette propriété renvoie un objet <a href="/fr/docs/Web/API/TimeRanges"><code>TimeRanges</code></a> contenant les intervalles temporels accessibles.</p> + +<pre class="brush: js">const mediaElement = document.querySelector('#mediaElementID'); +mediaElement.seekable.start(0); // Renvoie l'instant de départ (en secondes) +mediaElement.seekable.end(0); // Renvoie l'instant de fin (en secondes) +mediaElement.currentTime = 122; // Déplace la lecture à 122 secondes +mediaElement.played.end(0); // Renvoie le nombre de secondes lues par le navigateur +</pre> + +<h3 id="specifying_playback_range">Définir des intervalles de lecture</h3> + +<p>Lors de la définition de l'URI du média d'un élément <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, il est possible d'ajouter des informations supplémentaires pour indiquer la portion du média qu'on souhaite lire. Pour cela, on ajoutera un dièse/croisillon (« # ») suivi de la description du fragment de média.</p> + +<p>Un intervalle temporel se définit avec la syntaxe suivante :</p> + +<pre>#t=[tempsdebut][,tempsfin]</pre> + +<p>La valeur temporelle peut être définie en nombre de secondes (avec une valeur décimale) ou avec un horodatage en heures/minutes/secondes avec un deux-points comme séparateur (par exemple 2:05:01 pour indiquer 2 heures, 5 minutes et 1 seconde).</p> + +<p>Voici quelques exemples :</p> + +<dl> + <dt><code>https://example.com/video.ogv#t=10,20</code></dt> + <dd>Indique que la vidéo devrait jouer l'intervalle compris entre 10 et 20 secondes.</dd> + <dt><code>https://example.com/video.ogv#t=,10.5</code></dt> + <dd>Indique que la vidéo devrait jouer l'intervalle depuis le début et jusqu'à 10,5 secondes.</dd> + <dt><code>https://example.com/video.ogv#t=,02:00:00</code></dt> + <dd>Indique que la vidéo devrait jouer depuis le début et jusqu'à deux heures.</dd> + <dt><code>https://example.com/video.ogv#t=60</code></dt> + <dd>Indique que la vidéo devrait commencer sa lecture à 60 secondes puis continuer jusqu'à la fin.</dd> +</dl> + +<h2 id="error_handling">Déboguer les problèmes audio/vidéo</h2> + +<p>Vous rencontrez des problèmes de lecture audio ou vidéo ? Vérifiez les différents points qui suivent.</p> + +<h3 id="checking_whether_the_browser_supports_the_supplied_formats">Est-ce que le navigateur prend en charge les formats fournis ?</h3> + +<p>Utilisez les fichiers suivants pour vérifier le support de votre format:</p> <ul> - <li><a href="http://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> + <li>Audio MP3 (<code>type="audio/mpeg"</code>) : <a href="https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3"> https://jPlayer.org/audio/mp3/Miaow-01-Tempered-song.mp3</a> (<a href="https://jsbin.com/gekatoge/1/edit">audio MP3 en direct</a>)</li> + <li>Audio MP4 (<code>type="audio/mp4"</code>) : <a href="https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a"> https://jPlayer.org/audio/m4a/Miaow-01-Tempered-song.m4a</a> (<a href="https://jsbin.com/gekatoge/2/edit">audio MP4 en direct</a>)</li> + <li>Audio Ogg (<code>type="audio/ogg"</code>) : <a href="https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg"> https://jPlayer.org/audio/ogg/Miaow-01-Tempered-song.ogg</a> (<a href="https://jsbin.com/gekatoge/4/edit">audio OGG en direct</a>)</li> + <li>Video MP4 (<code>type="video/mp4"</code>) : <a href="https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"> https://jPlayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v</a> (<a href="https://jsbin.com/gekatoge/5/edit">vidéo MP4 en direct</a>)</li> + <li>Video WebM (<code>type="video/webm"</code>) : <a href="https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm"> https://jPlayer.org/video/webm/Big_Buck_Bunny_Trailer.webm</a> (<a href="https://jsbin.com/gekatoge/6/edit">vidéo WebM en direct</a>)</li> + <li>Video Ogg (<code>type="video/ogg"</code>) : <a href="https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv"> https://jPlayer.org/video/ogv/Big_Buck_Bunny_Trailer.ogv</a> (<a href="https://jsbin.com/gekatoge/7/edit">vidéo OGG en direct</a>)</li> </ul> -<h3 id="Vidéo_uniquement">Vidéo uniquement</h3> +<p>Si un de ces fichiers n'est pas lu, c'est que le navigateur que vous testez ne prend pas en charge le format correspondant. Vous pouvez utiliser un format différent ou un contenu de secours.</p> + +<p>Si ces fichiers fonctionnent mais que votre fichier ne fonctionne pas, il y a deux explications possibles, que nous verrons ci-après.</p> + +<h4 id="1._the_media_server_is_not_delivering_the_correct_mime_types_with_the_file">1. Le serveur ne fournit pas le type MIME correct du fichier</h4> + +<p>Bien que les serveurs les prennent généralement en charge, vous allez peut-être avoir besoin d'ajouter ce qui suit à votre fichier <code>.htaccess</code> :</p> + +<pre># AddType TYPE/SUBTYPE EXTENSION + +AddType audio/mpeg mp3 +AddType audio/mp4 m4a +AddType audio/ogg ogg +AddType audio/ogg oga + +AddType video/mp4 mp4 +AddType video/mp4 m4v +AddType video/ogg ogv +AddType video/webm webm +AddType video/webm webmv</pre> + +<h4 id="2._Your_files_have_been_encoded_incorrectly">2. Votre fichier n'est pas encodé correctement</h4> + +<p>Votre fichier n'a peut-être pas été encodé correctement — essayez de l'encoder en utilisant un des outils suivants, qui sont plutôt fiables :</p> + +<ul> + <li><a href="https://audacity.sourceforge.net/">Audacity</a> - Éditeur et enregistreur audio gratuit</li> + <li><a href="https://www.getmiro.com/">Miro</a> - Lecteur audio et vidéo open-source et gratuit</li> + <li><a href="https://handbrake.fr/">Handbrake</a> - Transcodeur vidéo open-source</li> + <li><a href="https://firefogg.org/">Firefogg</a> - Encodage audio et vidéo pour Firefox</li> + <li><a href="https://www.ffmpeg.org/">FFmpeg2</a> - Encodeur en ligne de commande complet</li> + <li><a href="https://libav.org/">Libav</a> - Encodeur en ligne de commande complet</li> + <li><a href="https://m.vid.ly/">Vid.ly</a> - Lecteur Video player, transcodeur et outil de diffusion</li> + <li><a href="https://archive.org/">Internet Archive</a> - Transcodage et stockage gratuit</li> +</ul> + +<h3 id="showing_fallback_content_when_no_source_could_be_decoded">Utiliser du contenu de substitution si la source n'a pu être décodée</h3> + +<p>Il existe une autre méthode pour présenter du contenu alternatif lorsqu'aucune des ressources n'a pu être décodée par le navigateur. Celle-ci consiste à ajouter un gestionnaire d'erreur sur le dernier élément source et d'utiliser celui-ci afin de remplacer l'élément par son contenu alternatif :</p> + +<pre class="brush: html"><video controls> + <source src="dynamicsearch.mp4" type="video/mp4"></source> + <a href="dynamicsearch.mp4"> + <img src="dynamicsearch.jpg" alt="Recherche sur une application"> + </a> + <p>Cliquez sur l'image pour voir une vidéo de démonstration</p> +</video> +</pre> + +<pre class="brush: js"> +let v = document.querySelector('video'), + sources = v.querySelectorAll('source'), + lastsource = sources[sources.length-1]; +lastsource.addEventListener('error', function(ev) { + const d = document.createElement('div'); + d.innerHTML = v.innerHTML; + v.parentNode.replaceChild(d, v); +}, false); +</pre> + +<h2 id="audiovideo_javascript_libraries">Bibliothèques JavaScript audio/vidéo</h2> + +<p>Un certain nombre de bibliothèques JavaScript audio et vidéo existent. Les plus populaires permettent de choisir un design de lecteur cohérent sur tous les navigateurs et fournissent un contenu de secours pour les navigateurs qui ne prennent pas en charge l'audio et vidéo nativement. Le contenu de secours utilise souvent les plugins Adobe Flash ou Microsoft Silverlight. D'autres fonctionnalités telles que les éléments <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a> pour les sous-titres peuvent également être fournies par les bibliothèques média.</p> + +<h3 id="audio_only">Audio uniquement</h3> + +<ul> + <li><a href="https://www.schillmania.com/projects/soundmanager2/">SoundManager</a></li> + <li><a href="https://521dimensions.com/open-source/amplitudejs">AmplitudeJS</a></li> + <li><a href="https://howlerjs.com/">HowlerJS</a></li> +</ul> + +<h3 id="video_only">Vidéo uniquement</h3> <ul> - <li><a href="https://flowplayer.org/">flowplayer</a>: Gratuit, avec un watermark du logo flowplayer. Open source (licence GPL.)</li> - <li><a href="http://www.jwplayer.com">JWPlayer</a>: Nécessite de s'inscrire pour télécharger. Édition Open Source (Liecence Creative Commons.)</li> - <li><a href="http://www.sublimevideo.net/">SublimeVideo</a>: Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li> - <li><a href="http://www.videojs.com/">Video.js</a>: Gratuit et Open Source (Licence Apache 2.)</li> + <li><a href="https://flowplayer.org/">flowplayer</a> : Gratuit, avec un filigrane du logo flowplayer. open source (licence GPL)</li> + <li><a href="https://www.jwplayer.com">JWPlayer</a> : Nécessite de s'inscrire pour télécharger. open source (licence Creative Commons)</li> + <li><a href="https://www.sublimevideo.net/">SublimeVideo</a> : Nécessite de s'inscrire. Configuration par formulaire avec lien vers des bibliothèques hébergées via CDN.</li> + <li><a href="https://www.videojs.com/">Video.js</a> : Gratuit et open source (licence Apache 2)</li> </ul> -<h3 id="Audio_et_Vidéo">Audio et Vidéo</h3> +<h3 id="audio_and_video">Audio et vidéo</h3> <ul> - <li><a href="http://jPlayer.org">jPlayer</a>: Gratuit et Open Source (Licence MIT.)</li> - <li><a href="http://mediaelementjs.com/">mediaelement.js</a>: Gratuit et Open Source (Licence MIT.)</li> + <li><a href="https://jPlayer.org">jPlayer</a> : Gratuit et open source (Licence MIT)</li> + <li><a href="https://mediaelementjs.com/">mediaelement.js</a> : Gratuit et open source (Licence MIT)</li> </ul> -<h3 id="Web_Audio_API">Web Audio API</h3> +<h3 id="web_audio_api_2">Web Audio API</h3> <ul> - <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a>: Un polyfill pour les anciennes versions de Web Audio API; Open Source (Licence Apache 2.)</li> + <li><a href="https://github.com/cwilso/AudioContext-MonkeyPatch">AudioContext monkeypatch</a> : Une prothèse open source (licence Apache 2) pour les anciennes versions de l'API Web Audio</li> </ul> -<h2 id="Tutoriels_Basiques">Tutoriels Basiques</h2> +<h2 id="basic_tutorials">Tutoriels pour apprendre les bases</h2> <dl> - <dt><a href="/en-US/Apps/Build/Manipulating_media/cross_browser_video_player">Creating a cross-browser video player</a></dt> - <dd>A guide to creating a basic cross browser video player using the {{ htmlelement ("video") }} element.</dd> - <dt><a href="/en-US/Apps/Build/Manipulating_media/Video_player_styling_basics">Video player styling basics</a></dt> - <dd>With the cross-browser video player put in place in the previous article, this article now looks at providing some basic, reponsive styling for the player.</dd> - <dt><a href="/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Cross-browser audio basics</a></dt> - <dd> - <div> - <p>This article provides a basic guide to creating an HTML5 audio player that works cross browser, with all the associated attributes, properties and events explained, and a quick guide to custom controls created using the Media API.</p> - </div> - </dd> - <dt><a href="/en-US/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Media buffering, seeking, and time ranges</a></dt> - <dd>Sometimes it's useful to know how much {{ htmlelement("audio") }} or {{ htmlelement("video") }} has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using <a href="/en-US/docs/Web/API/TimeRanges">TimeRanges</a>, and other features of the media API.</dd> - <dt><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></dt> - <dd>The <code>playbackRate</code> property allows us to change the speed or rate at which a piece of web audio or video is playing. This article explains it in detail.</dd> - <dt><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></dt> - <dd>Explains the basics of using the Web Audio API to grab, manipulate and play back an audio source.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/cross_browser_video_player">Créer un lecteur vidéo fonctionnant sur tous les navigateurs (en anglais)</a></dt> + <dd>Guide pour créer un lecteur vidéo simple et fonctionnant sur tous les navigateurs en utilisant l'élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a></dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Video_player_styling_basics">Bases concernant la mise en forme des lecteurs vidéo (en anglais)</a></dt> + <dd>À l'aide du lecteur vidéo mis en place sur l'article précédent, cet article montre comment fournir une mise en forme basique et responsive (en anglais)</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Cross-browser_audio_basics">Les bases pour créer un lecteur audio fonctionnant sur tous les navigateurs (en anglais)</a></dt> + <dd>Cet article propose un guide de base pour créer un lecteur audio HTML5 qui fonctionne sur tous les navigateurs, avec une explication pour tous les attributs, propriétés et évènements associés, ainsi qu'un guide introduisant rapidement les contrôles personnalisés créés avec l'API Media (en anglais)</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/buffering_seeking_time_ranges">Mise en tampon des fichiers médias, recherche et gestion des intervales de temps</a></dt> + <dd>Parfois, il est utile de savoir le temps de téléchargment et de lecture des éléments <a href="/fr/docs/Web/HTML/Element/audio"><code><audio></code></a> ou <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a> sans attendre — un bon exemple d'application est la barre de progression mise en mémoire tampon d'un fichier audio ou vidéo. Cet article présente la construction d'une barre de recherche et mise en mémoire tampon en utilisant l'API <a href="/fr/docs/Web/API/TimeRanges">TimeRanges</a> ainsi que d'autres fonctionnalités de l'API <code>Media</code>.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">Explications concernant la propriété <code>playbackRate</code> proposée par HTML5</a></dt> + <dd>La propriété <code>playbackRate</code> permet de modifier la vitesse ou la fréquence à laquelle un morceau de fichier audio ou vidéo est joué. Cet article l'explique en détails.</dd> + <dt><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisation de l'API Web Audio</a></dt> + <dd>Explique les bases de l'API Web Audio, afin de pouvoir atteindre, manipuler et jouer une ressource audio.</dd> </dl> -<h2 id="Tutoriels_Streaming_de_médias">Tutoriels Streaming de médias</h2> +<h2 id="streaming_media_tutorials">Tutoriels concernant la diffusion en direct (streaming)</h2> <dl> - <dt><a href="/en-US/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Live streaming web audio and video</a></dt> - <dd>Live streaming technology is often employed to relay live events such as sports, concerts and more generally TV and Radio programmes that are output live. Often shortened to just streaming, live streaming is the process of transmitting media 'live' to computers and devices. This is a fairly complex and nascent subject with a lot of variables, so in this article we'll introduce you to the subject and let you know how you can get started.</dd> - <dt><a href="/en-US/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Setting up adaptive streaming media sources</a></dt> - <dd>Let's say you want to set up an adaptive streaming media source on a server, to be consumed inside an HTML5 media element. How would you do that? This article explains how, looking at two of the most common formats: MPEG-DASH and HLS (HTTP Live Streaming.)</dd> - <dt><a href="/en-US/docs/Web/HTML/DASH_Adaptive_Streaming_for_HTML_5_Video">DASH Adaptive Streaming for HTML 5 Video</a></dt> - <dd>Details how to set up adaptive streaming using DASH and WebM.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Live_streaming_web_audio_and_video">Diffusion en direct de fichiers audio et vidéo sur le web</a></dt> + <dd>Les technologies de diffusion en direct sont souvent employées pour diffuser en direct des évènements sportifs, des concerts et plus généralement des programmes télévisuels ou radiophoniques qui se déroulent en direct. Le terme est souvent raccourci en parlant de « direct » ou en anglais de <i lang="en">streaming</i> ou de <i lang="en">live</i>. Il s'agit du processus de transmission en direct d'une source média. Cela est plutôt complexe et sujet à de nombreux paramètres. Cet article fait une présentation générale du sujet et indique comment débuter.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Setting_up_adaptive_streaming_media_sources">Mettre en place une ressource média diffusée en direct adaptative</a></dt> + <dd>Si vous avez besoin de mettre en place une ressource média diffusée en direct et adaptative sur un serveur, et que cette ressource doit être consommée au sein d'un élément média HTML5, cet article explique comment faire. Il détaille les deux principaux formats, MPEG-DASH et HLS (<i lang="en">HTTP Live Streaming</i>)</dd> + <dt><a href="/fr/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video">Diffusion en direct et adaptative DASH pour les vidéos HTML5</a></dt> + <dd>Informations concernant la mise en place d'une diffusion en direct adaptative avec les formats DASH et WebM.</dd> </dl> -<h2 id="Tutoriels_Advancés">Tutoriels Advancés</h2> +<h2 id="advanced_tutorials">Tutoriels avancés</h2> <dl> - <dt><a href="/en-US/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></dt> - <dd>This article explains how to add captions and subtitles to HTML5 {{ htmlelement("video") }}, using <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Video_Text_Tracks_Format" title="WebVTT is a format for displaying timed text tracks (e.g. subtitles) with the <track> element. The primary purpose of WebVTT files is to add subtitles to a <video>.">Web_Video_Text_Tracks_Format</a> and the {{ htmlelement("track") }} element.</dd> - <dt><a href="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser" title="/en-US/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Writing Web Audio API code that works in every browser</a></dt> - <dd>A guide to writing cross browser Web Audio API code.</dd> - <dt><a href="/en-US/Apps/Developing/Manipulating_media/H.264_support_in_Firefox">H.264 support in Firefox</a></dt> - <dd>This article explains the state of support for the H.264 video format in Firefox/Firefox OS, including code examples, tips and tricks.</dd> - <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Easy audio capture with the MediaRecorder API</a></dt> - <dd>Explains the basics of using the MediaRecorder API to directly record a media stream.</dd> + <dt><a href="/fr/docs/Web/Apps/Build/Manipulating_media/Adding_captions_and_subtitles_to_HTML5_video">Ajout de légendes et de sous-titres aux vidéos HTML5</a></dt> + <dd>Cet article explique comment ajouter des légendes et des sous-titres à l'élément HTML5 <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>, en utilisant le format <a href="/fr/docs/Web/API/WebVTT_API">VTT (<i lang="en">Video Text Tracks</i>)</a> et l'élément <a href="/fr/docs/Web/HTML/Element/track"><code><track></code></a>.</dd> + <dt><a href="/fr/docs/Web/Apps/Developing/Manipulating_media/Web_Audio_API_cross_browser">Utiliser l'API Audio de façon compatible</a></dt> + <dd>Un guide pour utiliser l'API Audio de façon compatible sur tous les navigateurs.</dd> + <dt><a href="https://hacks.mozilla.org/2014/06/easy-audio-capture-with-the-mediarecorder-api/">Capture audio simplifiée avec l'API MediaRecorder</a></dt> + <dd>Cet article montre les bases de l'utilisation de l'API MediaRecorder, utilisée afin d'enregistrer un flux média.</dd> </dl> -<div class="note"> -<p><strong>Note</strong>: Les versions de Firefox OS 1.3 et plus supportent le protocole <a href="http://en.wikipedia.org/wiki/Real_Time_Streaming_Protocol">RTSP</a> pour diffuser des vidéos en streaming. Une solution de secours pour les anciennes versions serait d'utiliser <code><video></code> avec un format pris en charge par Gecko (comme WebM).</p> -</div> - -<h2 id="Réferences">Réferences</h2> +<h2 id="references">Références</h2> <ul> - <li><a href="/en-US/docs/Web/HTML/Element/video">The video element</a></li> - <li><a href="/en-US/docs/Web/Guide/Events/Media_events">Media events API</a></li> - <li><a href="/en-US/docs/Web/API/HTMLVideoElement">HTMLVideoElement API</a></li> - <li><a href="/en-US/docs/Web/API/MediaSource">MediaSource API</a></li> - <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li> - <li><a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a></li> - <li><a href="/en-US/docs/Web/API/Navigator.getUserMedia">getUserMedia</a></li> + <li><a href="/fr/docs/Web/HTML/Element/video">L'élément <code><video></code></a></li> + <li><a href="/fr/docs/Web/API/HTMLVideoElement">L'API <code>HTMLVideoElement</code></a></li> + <li><a href="/fr/docs/Web/API/MediaSource">L'API <code>MediaSource</code></a></li> + <li><a href="/fr/docs/Web/API/Web_Audio_API">L'API Web Audio</a></li> + <li><a href="/fr/docs/Web/API/MediaStream_Recording_API">L'API <code>MediaRecorder</code></a></li> + <li><a href="/fr/docs/Web/API/MediaDevices/getUserMedia"><code>getUserMedia()</code></a></li> + <li><a href="/fr/docs/Web/Events#media">Référence des évènements relatifs aux médias</a></li> </ul> - -<p> </p> diff --git a/files/fr/web/html/element/kbd/index.html b/files/fr/web/html/element/kbd/index.html index 6f8cfd69de..b74e3870ae 100644 --- a/files/fr/web/html/element/kbd/index.html +++ b/files/fr/web/html/element/kbd/index.html @@ -120,7 +120,7 @@ translation_of: Web/HTML/Element/kbd <p>{{EmbedLiveSample("Saisie_restituée", 650, 100)}}</p> -<h3 id="Représenter_les_options_de_saisies_à_l’écran">Représenter les options de saisies à l’écran</h3> +<h3 id="Representer_les_options_de_saisies_a_l_ecran">Représenter les options de saisies à l’écran</h3> <p>Imbriquer un élément <code><samp></code> dans un élément <code><kbd></code> représente une saisie basée sur du texte affiché par le système (par exemple des noms de menu, d'éléments de menu, des noms de boutons affichés à l'écran, etc.).</p> @@ -144,7 +144,7 @@ translation_of: Web/HTML/Element/kbd <h4 id="Résultat_5">Résultat</h4> -<p>{{EmbedLiveSample("Représenter_les_options_de_saisies_à_l’écran", 650, 120)}}</p> +<p>{{EmbedLiveSample("Representer_les_options_de_saisies_a_l_ecran", 650, 120)}}</p> <h2 id="Résumé_technique">Résumé technique</h2> diff --git a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html index f3dbfab31d..37e1cae719 100644 --- a/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html +++ b/files/fr/web/mathml/examples/deriving_the_quadratic_formula/index.html @@ -1,14 +1,9 @@ --- title: 'MathML: Dériver la formule quadratique' slug: Web/MathML/Examples/Deriving_the_Quadratic_Formula -tags: - - Débutant - - Education - - Guide - - MathML translation_of: Web/MathML/Examples/Deriving_the_Quadratic_Formula original_slug: Web/MathML/Exemples/Dériver_la_Formule_Quadratique --- -<p>Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :</p> +<p>Dans cette page, on rédige la démonstration de la détermination des racines d'un polynôme quadratique :</p> -<p><math> <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo></mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo></mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo></mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo></mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo></mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p> +<p><math> <mtable columnalign="left"> <mtr> <mtd> <mrow> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo></mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo></mo> <mi>x</mi> </mrow> <mo> + </mo> <mi>c</mi> </mrow> <mo>=</mo> <mn>0</mn> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mi>a</mi> <mo></mo> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mi>b</mi> <mo></mo> <mi>x</mi> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mrow> <mo>=</mo> <mo>-</mo><mi> c</mi><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo></mo> <mi>x</mi> </mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>c</mi> </mrow> <mi>a</mi> </mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On divise par le premier coefficient du polynôme.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mi>x</mi> <mn>2</mn> </msup></mrow> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mi>a</mi> </mfrac> <mo></mo> <mi>x</mi> <mo> + </mo> <msup> <mfenced> <mo> ( </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow> </mfrac> <mo> ) </mo> </mfenced> <mn>2</mn> </msup> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi>c</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow> <mrow> <mi>a</mi> <mo>(</mo> <mn>4</mn> <mi>a</mi> <mo>)</mo> </mrow></mfrac> </mrow> <mo> + </mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">On rajoute un terme pour avoir un carré.</mtext> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt">Ici, on obtient la valeur du discriminant.</mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <msup> <mrow> <mo>(</mo> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>)</mo> </mrow> <mn>2</mn> </msup> <mo>=</mo> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> <mo> + </mo> <mfrac> <mrow> <mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mo>=</mo> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn> </msup> </mrow></mfrac> </msqrt> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> <mtr> <mtd> <mrow> <mrow> <mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo><mi>b</mi> </mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <mfrac> <mrow> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </mrow> <mrow> <mn>4</mn> <msup> <mi>a</mi> <mn>2</mn></msup></mrow></mfrac></msqrt></mrow><mspace depth="1ex" height="0.5ex" width="2ex"></mspace><mrow><mtext mathcolor="red" mathsize="10pt"></mtext></mrow></mrow></mtd></mtr><mtr><mtd><mrow><mrow><mspace depth="1ex" height="0.5ex" width="2.5ex"></mspace> <mrow> <mi>x</mi> </mrow> <mo>=</mo> <mfrac> <mrow> <mo>-</mo> <mi> b</mi> <mo>±</mo><mrow><mo>{</mo><mi>C</mi><mo>}</mo></mrow> <msqrt> <msup> <mi>b</mi> <mn>2</mn> </msup> <mo> - </mo> <mn>4</mn> <mi>a</mi> <mi>c</mi> </msqrt></mrow> <mrow> <mn>2</mn> <mi>a</mi> </mrow></mfrac> </mrow> <mspace depth="1ex" height="0.5ex" width="2ex"></mspace> <mrow><mtext mathcolor="red" mathsize="10pt"></mtext> </mrow> </mrow> </mtd> </mtr> </mtable></math></p> diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 5cc26fadfe..9199fabd2d 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -574,7 +574,7 @@ /ja/docs/Core_JavaScript_1.5_Guide/About /ja/docs/Web/JavaScript/Guide/Introduction /ja/docs/Core_JavaScript_1.5_Guide/About/Core_Language_Features /ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Core_JavaScript_1.5_Guide/Block_Statement /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/ja/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages +/ja/docs/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/Core_JavaScript_1.5_Guide/Core_Language_Features /ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects /ja/docs/Core_JavaScript_1.5_Guide/Creating_New_Objects/Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters @@ -619,7 +619,7 @@ /ja/docs/Core_JavaScript_1.5_Guide:About /ja/docs/Web/JavaScript/Guide/Introduction /ja/docs/Core_JavaScript_1.5_Guide:About:Core_Language_Features /ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Core_JavaScript_1.5_Guide:Block_Statement /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/ja/docs/Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages /ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages +/ja/docs/Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages /ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/Core_JavaScript_1.5_Guide:Core_Language_Features /ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects /ja/docs/Core_JavaScript_1.5_Guide:Creating_New_Objects:Defining_Getters_and_Setters /ja/docs/Web/JavaScript/Guide/Working_with_Objects#defining_getters_and_setters @@ -2129,7 +2129,7 @@ /ja/docs/JavaScript/Guide/About-redirect-1 /ja/docs/Web/JavaScript/Guide/Introduction /ja/docs/JavaScript/Guide/Block_Statement /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling /ja/docs/JavaScript/Guide/Block_Statement-redirect-1 /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/ja/docs/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages +/ja/docs/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/JavaScript/Guide/Closures /ja/docs/Web/JavaScript/Closures /ja/docs/JavaScript/Guide/Core_Language_Features /ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features /ja/docs/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects @@ -2801,7 +2801,6 @@ /ja/docs/Mozilla/Add-ons/WebExtensions/前提条件 /ja/docs/Mozilla/Add-ons/WebExtensions/Prerequisites /ja/docs/Mozilla/Firefox/Releases/Firefox_47_for_developers /ja/docs/Mozilla/Firefox/Releases/47 /ja/docs/Mozilla_Addons_FAQ_(external) https://addons.mozilla.org/faq.php -/ja/docs/Mozmill /ja/docs/orphaned/Mozmill /ja/docs/NPAPI/Constants /ja/docs/Plugins/Guide/Constants /ja/docs/NPAPI:Constants /ja/docs/Plugins/Guide/Constants /ja/docs/Namespace /ja/docs/Glossary/Namespace @@ -3169,6 +3168,7 @@ /ja/docs/Web/API/IDBFactory.cmp /ja/docs/Web/API/IDBFactory/cmp /ja/docs/Web/API/IDBFactory.deleteDatabase /ja/docs/Web/API/IDBFactory/deleteDatabase /ja/docs/Web/API/IDBFactory.open /ja/docs/Web/API/IDBFactory/open +/ja/docs/Web/API/Index /ja/docs/conflicting/Web/API_49b9a84475f11fffb8fc271a7df3c49a /ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ja/docs/Web/API/IndexedDB_API/Basic_Terminology /ja/docs/Web/API/MediaRecorder_API /ja/docs/Web/API/MediaStream_Recording_API /ja/docs/Web/API/Navigator.getUserMedia /ja/docs/Web/API/Navigator/getUserMedia @@ -3221,9 +3221,7 @@ /ja/docs/Web/API/Node.replaceChild /ja/docs/Web/API/Node/replaceChild /ja/docs/Web/API/Node.textContent /ja/docs/Web/API/Node/textContent /ja/docs/Web/API/Node/baseURIObject /ja/docs/Web/API/Node -/ja/docs/Web/API/Node/cloneNode-old /ja/docs/orphaned/Web/API/Node/getUserData /ja/docs/Web/API/Node/firstChild-temp /ja/docs/Web/API/Node/firstChild -/ja/docs/Web/API/Node/getUserData /ja/docs/orphaned/Web/API/Node/getUserData /ja/docs/Web/API/Node/innerText /ja/docs/Web/API/HTMLElement/innerText /ja/docs/Web/API/Node/localName /ja/docs/Web/API/Element/localName /ja/docs/Web/API/Node/namespaceURI /ja/docs/Web/API/Element/namespaceURI @@ -3231,12 +3229,6 @@ /ja/docs/Web/API/Node/prefix /ja/docs/Web/API/Element/prefix /ja/docs/Web/API/NodeList.item /ja/docs/Web/API/NodeList/item /ja/docs/Web/API/NonDocumentTypeChildNode /ja/docs/Web/API/Element -/ja/docs/Web/API/ParentNode /ja/docs/orphaned/Web/API/ParentNode -/ja/docs/Web/API/ParentNode/append /ja/docs/orphaned/Web/API/ParentNode/append -/ja/docs/Web/API/ParentNode/childElementCount /ja/docs/Web/API/Element/childElementCount -/ja/docs/Web/API/ParentNode/children /ja/docs/orphaned/Web/API/ParentNode/children -/ja/docs/Web/API/ParentNode/prepend /ja/docs/orphaned/Web/API/ParentNode/prepend -/ja/docs/Web/API/ParentNode/querySelectorAll /ja/docs/orphaned/Web/API/ParentNode/querySelectorAll /ja/docs/Web/API/Position /ja/docs/Web/API/GeolocationPosition /ja/docs/Web/API/PositionError /ja/docs/Web/API/GeolocationPositionError /ja/docs/Web/API/Push_API/Using_the_Push_API /ja/docs/Web/API/Push_API @@ -4079,7 +4071,7 @@ /ja/docs/Web/JavaScript/Getting_Started /ja/docs/Learn/Getting_started_with_the_web/JavaScript_basics /ja/docs/Web/JavaScript/Guide/About /ja/docs/Web/JavaScript/Guide/Introduction /ja/docs/Web/JavaScript/Guide/Block_Statement /ja/docs/Web/JavaScript/Guide/Control_flow_and_error_handling -/ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages +/ja/docs/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages /ja/docs/Web/JavaScript/Guide/Details_of_the_Object_Model /ja/docs/Web/JavaScript/Guide/Closures /ja/docs/Web/JavaScript/Closures /ja/docs/Web/JavaScript/Guide/Core_Language_Features /ja/docs/orphaned/Web/JavaScript/Guide/Core_Language_Features /ja/docs/Web/JavaScript/Guide/Creating_New_Objects /ja/docs/Web/JavaScript/Guide/Working_with_Objects#creating_new_objects diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index cd93848451..39958cd1f6 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -13592,6 +13592,14 @@ "hashedhyphen" ] }, + "Web/API/Element/append": { + "modified": "2020-10-15T22:19:11.886Z", + "contributors": [ + "mfuji09", + "dskymd", + "isdh" + ] + }, "Web/API/Element/attachShadow": { "modified": "2020-10-15T22:09:56.110Z", "contributors": [ @@ -13635,6 +13643,13 @@ "Marsf" ] }, + "Web/API/Element/children": { + "modified": "2020-11-23T04:45:58.549Z", + "contributors": [ + "segayuu", + "sii" + ] + }, "Web/API/Element/classList": { "modified": "2020-10-15T21:14:13.067Z", "contributors": [ @@ -14095,6 +14110,13 @@ "sii" ] }, + "Web/API/Element/prepend": { + "modified": "2020-10-15T22:22:02.876Z", + "contributors": [ + "mfuji09", + "silverskyvicto" + ] + }, "Web/API/Element/querySelector": { "modified": "2019-03-23T23:02:48.166Z", "contributors": [ @@ -17794,13 +17816,6 @@ "ethertank" ] }, - "Web/API/Index": { - "modified": "2019-01-16T21:57:23.880Z", - "contributors": [ - "mfuji09", - "Marsf" - ] - }, "Web/API/IndexedDB_API": { "modified": "2019-11-01T12:27:47.658Z", "contributors": [ @@ -48588,6 +48603,13 @@ "Wind1808" ] }, + "conflicting/Web/API_49b9a84475f11fffb8fc271a7df3c49a": { + "modified": "2019-01-16T21:57:23.880Z", + "contributors": [ + "mfuji09", + "Marsf" + ] + }, "conflicting/Web/API_dd04ca1265cb79b990b8120e5f5070d3": { "modified": "2019-03-23T23:32:13.721Z", "contributors": [ @@ -48972,12 +48994,6 @@ "Mgjbot" ] }, - "orphaned/Mozmill": { - "modified": "2019-03-24T00:11:57.214Z", - "contributors": [ - "Marsf" - ] - }, "orphaned/New_in_JavaScript_1.8": { "modified": "2019-03-24T00:06:00.366Z", "contributors": [ @@ -49350,56 +49366,6 @@ "Wind1808" ] }, - "orphaned/Web/API/Node/getUserData": { - "modified": "2020-10-15T21:14:35.305Z", - "contributors": [ - "mfuji09", - "AshfaqHossain", - "teoli", - "ethertank", - "dextra", - "Potappo", - "Mgjbot", - "Shoot" - ] - }, - "orphaned/Web/API/ParentNode": { - "modified": "2020-11-23T03:46:53.867Z", - "contributors": [ - "segayuu", - "yyss", - "Marsf", - "YuichiNukiyama" - ] - }, - "orphaned/Web/API/ParentNode/append": { - "modified": "2020-10-15T22:19:11.886Z", - "contributors": [ - "mfuji09", - "dskymd", - "isdh" - ] - }, - "orphaned/Web/API/ParentNode/children": { - "modified": "2020-11-23T04:45:58.549Z", - "contributors": [ - "segayuu", - "sii" - ] - }, - "orphaned/Web/API/ParentNode/prepend": { - "modified": "2020-10-15T22:22:02.876Z", - "contributors": [ - "mfuji09", - "silverskyvicto" - ] - }, - "orphaned/Web/API/ParentNode/querySelectorAll": { - "modified": "2020-10-15T22:26:50.502Z", - "contributors": [ - "mfuji09" - ] - }, "orphaned/Web/API/RTCIdentityErrorEvent": { "modified": "2019-03-23T22:51:24.405Z", "contributors": [ @@ -49841,16 +49807,6 @@ "mfuji09" ] }, - "orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages": { - "modified": "2019-01-16T14:43:33.903Z", - "contributors": [ - "ethertank", - "happysadman", - "Mgjbot", - "electrolysis", - "Kozawa" - ] - }, "orphaned/Web/JavaScript/Guide/Core_Language_Features": { "modified": "2019-03-23T23:42:43.617Z", "contributors": [ diff --git a/files/ja/web/api/index/index.html b/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html index e37c8080c2..cdd2b4c27d 100644 --- a/files/ja/web/api/index/index.html +++ b/files/ja/conflicting/web/api_49b9a84475f11fffb8fc271a7df3c49a/index.html @@ -1,10 +1,11 @@ --- title: 索引 -slug: Web/API/Index +slug: conflicting/Web/API_49b9a84475f11fffb8fc271a7df3c49a tags: - API - Index - Landing translation_of: Web/API/Index +original_slug: Web/API/Index --- <p>{{Index("/ja/docs/Web/API")}}</p> diff --git a/files/ja/glossary/accessibility_tree/index.html b/files/ja/glossary/accessibility_tree/index.html index 44f43dad41..e5fea12351 100644 --- a/files/ja/glossary/accessibility_tree/index.html +++ b/files/ja/glossary/accessibility_tree/index.html @@ -30,7 +30,7 @@ translation_of: Glossary/Accessibility_tree <p>加えて、アクセシビリティツリーは要素によって何が行われるのかについての情報を持つことがよくあります。リンクは <em>followed</em>、テキスト入力は <em>typed into</em>、などです。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/adobe_flash/index.html b/files/ja/glossary/adobe_flash/index.html index 94d75e0453..308303c964 100644 --- a/files/ja/glossary/adobe_flash/index.html +++ b/files/ja/glossary/adobe_flash/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/Adobe_Flash --- <p id="Summary">Flash は Adobe によって開発された廃れつつある技術で、表現力のあるウェブアプリ、マルチメディアコンテンツ、ストリーミングメディアを表示します。 Adobe Flash は対応している{{Glossary("Browser","ウェブブラウザー")}}でプラグインを用いて実行することができます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="https://www.adobe.com/products/flashruntimes.html">公式ウェブサイト</a></li> <li><a href="https://mozilla.github.io/shumway/">Shumway: Mozilla によるフリーな実装</a></li> diff --git a/files/ja/glossary/ajax/index.html b/files/ja/glossary/ajax/index.html index 9112beff79..df4a7a3e76 100644 --- a/files/ja/glossary/ajax/index.html +++ b/files/ja/glossary/ajax/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/AJAX <p>対話型のウェブサイトや最新のウェブ標準では、 AJAX は徐々に JavaScript フレームワーク内の関数や公式の {{domxref("Fetch API")}} 標準に置き換えられています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>: diff --git a/files/ja/glossary/blink/index.html b/files/ja/glossary/blink/index.html index e5a9f6922e..8be8ea6116 100644 --- a/files/ja/glossary/blink/index.html +++ b/files/ja/glossary/blink/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/Blink --- <p>Blink は、 Google によって Chromium の一部 (それゆえ {{glossary("Chrome", "Google Chrome")}} の一部でもある) として開発されたオープンソースのブラウザー用レイアウトエンジンです。特に、 Blink はレイアウト、レンダリング、 {{glossary("DOM")}} の処理を扱う {{glossary("WebKit")}} 内の WebCore ライブラリのフォークとして始まりましたが、現在は独立した{{glossary("rendering engine", "レンダリングエンジン")}}として成立しています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/bootstrap/index.html b/files/ja/glossary/bootstrap/index.html index f1cceee502..775161a6d5 100644 --- a/files/ja/glossary/bootstrap/index.html +++ b/files/ja/glossary/bootstrap/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/Bootstrap <p>Bootstrap は当初 Twitter Blueprint と呼ばれ、 <a href="https://twitter.com/">Twitter</a> の従業員のチームで開発されました。レスポンシブデザインをサポートし、そのまま使用、あるいは自身のコードで必要に応じてカスタマイズできる、定義済みのデザインテンプレートがあります。 Bootstrap はすべての最新のブラウザーと {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} の最近のバージョンと互換性があるので、他のブラウザーとの互換性について心配する必要はありません。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 上の記事 {{interwiki("wikipedia", "Bootstrap", "Bootstrap")}}</li> <li><a href="https://getbootstrap.com/">Bootstrap をダウンロード</a></li> diff --git a/files/ja/glossary/brotli_compression/index.html b/files/ja/glossary/brotli_compression/index.html index e03602d8b3..ba7bf74147 100644 --- a/files/ja/glossary/brotli_compression/index.html +++ b/files/ja/glossary/brotli_compression/index.html @@ -22,7 +22,7 @@ translation_of: Glossary/brotli_compression <li><a href="https://caniuse.com/#feat=brotli">Brotli on Caniuse</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary></summary> {{ListSubpages("/en-US/docs/Glossary")}}</details> diff --git a/files/ja/glossary/browser/index.html b/files/ja/glossary/browser/index.html index 50690ba09b..5fa78604a9 100644 --- a/files/ja/glossary/browser/index.html +++ b/files/ja/glossary/browser/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Browser <li><a href="https://www.opera.com/" rel="external">Opera ブラウザー</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/cacheable/index.html b/files/ja/glossary/cacheable/index.html index da0c62fbbc..6703108ad2 100644 --- a/files/ja/glossary/cacheable/index.html +++ b/files/ja/glossary/cacheable/index.html @@ -44,7 +44,7 @@ translation_of: Glossary/cacheable Cache-Control: no-cache (…)</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/call_stack/index.html b/files/ja/glossary/call_stack/index.html index cc188a1e09..cfb4875250 100644 --- a/files/ja/glossary/call_stack/index.html +++ b/files/ja/glossary/call_stack/index.html @@ -81,7 +81,7 @@ greeting(); <li>ウィキペディアの{{Interwiki("wikipedia", "コールスタック")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/character_set/index.html b/files/ja/glossary/character_set/index.html index ad352b9d4f..b61119f7c3 100644 --- a/files/ja/glossary/character_set/index.html +++ b/files/ja/glossary/character_set/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/character_set <p>文字コードが誤って使用すると (例えば、Big5 でエンコードされた記事に Unicode を使用すると)、壊れた文字ばかりが表示されることがあり、これは{{Interwiki("wikipedia", "文字化け")}}と呼ばれます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia の記事 <ol> diff --git a/files/ja/glossary/cipher/index.html b/files/ja/glossary/cipher/index.html index b7c490fb22..d0da8882df 100644 --- a/files/ja/glossary/cipher/index.html +++ b/files/ja/glossary/cipher/index.html @@ -25,7 +25,7 @@ translation_of: Glossary/Cipher <li>{{Interwiki("wikipedia", "公開鍵暗号")}}は、暗号化と復号に異なる鍵を使用します。</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/cors-safelisted_response_header/index.html b/files/ja/glossary/cors-safelisted_response_header/index.html index f4167ef9cb..610851f1ea 100644 --- a/files/ja/glossary/cors-safelisted_response_header/index.html +++ b/files/ja/glossary/cors-safelisted_response_header/index.html @@ -28,7 +28,7 @@ translation_of: Glossary/CORS-safelisted_response_header <pre>Access-Control-Expose-Headers: X-Custom-Header, Content-Length</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>関連情報 <ol> diff --git a/files/ja/glossary/crawler/index.html b/files/ja/glossary/crawler/index.html index 27b2a48e77..cbca2a132d 100644 --- a/files/ja/glossary/crawler/index.html +++ b/files/ja/glossary/crawler/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Crawler <li>Wikipedia の {{Interwiki("wikipedia", "クローラ")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> <ol> diff --git a/files/ja/glossary/cross_axis/index.html b/files/ja/glossary/cross_axis/index.html index 71ea43b706..54f812182a 100644 --- a/files/ja/glossary/cross_axis/index.html +++ b/files/ja/glossary/cross_axis/index.html @@ -44,7 +44,7 @@ translation_of: Glossary/Cross_Axis <li>CSS フレックスボックスガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">フレックスアイテムの折り返しのマスター</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/cryptographic_hash_function/index.html b/files/ja/glossary/cryptographic_hash_function/index.html index 6325537826..3adf8f4578 100644 --- a/files/ja/glossary/cryptographic_hash_function/index.html +++ b/files/ja/glossary/cryptographic_hash_function/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Cryptographic_hash_function <p>MD5 や SHA-1 などの暗号化ハッシュ関数は、衝突耐性を大幅に低下させる攻撃が見つかったため、破損しているとみなされています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li>Wikipedia 上の {{Interwiki("wikipedia", "暗号学的ハッシュ関数")}}</li> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/cryptography/index.html b/files/ja/glossary/cryptography/index.html index 3c3b66574a..d69cb85abc 100644 --- a/files/ja/glossary/cryptography/index.html +++ b/files/ja/glossary/cryptography/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/Cryptography --- <p><span class="seoSummary"><strong>暗号学</strong>（Cryptography、cryptology）は、メッセージを安全に符号化して送信する方法を研究する科学です。暗号学は、安全でない環境でメッセージを符号化および復号するために使用されるアルゴリズムの設計および研究と、それらの応用です。</span><strong> データの機密性</strong>だけではなく、暗号学はまた、<strong>識別</strong>、<strong>認証</strong>、<strong>否認防止</strong>、および<strong>データの完全性</strong>にも取り組んでいます。したがって、<strong>暗号システム</strong>、つまり文脈における暗号方式の使い方も研究します。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/css_preprocessor/index.html b/files/ja/glossary/css_preprocessor/index.html index 0b49383a52..477555d4a8 100644 --- a/files/ja/glossary/css_preprocessor/index.html +++ b/files/ja/glossary/css_preprocessor/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/CSS_preprocessor <p>CSS プリプロセッサーを使うためには、 CSS コンパイラーをウェブ{{Glossary("server", "サーバー")}}にインストールするか、 CSS プリプロセッサーを使用して開発環境でコンパイルしてから、コンパイル済みの CSS ファイルをウェブサーバーにアップロードする必要があります。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>有名な CSS プリプロセッサーの例 <ol> diff --git a/files/ja/glossary/css_selector/index.html b/files/ja/glossary/css_selector/index.html index 3f492fd842..3ce618a2dd 100644 --- a/files/ja/glossary/css_selector/index.html +++ b/files/ja/glossary/css_selector/index.html @@ -55,7 +55,7 @@ div.warning { <p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>CSS 入門内の <a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS セレクターについての詳細</a></li> <li>基本的なセレクター diff --git a/files/ja/glossary/database/index.html b/files/ja/glossary/database/index.html index 325a9fd9cb..04780b6718 100644 --- a/files/ja/glossary/database/index.html +++ b/files/ja/glossary/database/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/Database <p>ブラウザー上で動く {{glossary("IndexedDB")}} と呼ばれる独自データベースシステムもあります。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{Interwiki("wikipedia", "データベース")}} (Wikipedia) <ol> diff --git a/files/ja/glossary/document_directive/index.html b/files/ja/glossary/document_directive/index.html index 62ab3c4f65..1bd12aec9b 100644 --- a/files/ja/glossary/document_directive/index.html +++ b/files/ja/glossary/document_directive/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Document_directive <p>完全な一覧は<a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy#Document_directives">文書ディレクティブ</a>を参照してください。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/dom/index.html b/files/ja/glossary/dom/index.html index ca4f417603..b3596d1125 100644 --- a/files/ja/glossary/dom/index.html +++ b/files/ja/glossary/dom/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/DOM <p>DOM は当初、仕様書がありませんでしたが、ブラウザが{{Glossary("JavaScript")}} の実装を始めた頃に追加されました。このレガシーな DOM は DOM0 と呼ばれることもあります。今日、 WHATWG が DOM Living Standard を保守しています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 上の記事「{{interwiki("wikipedia", "Document_Object_Model", "The Document Object Model")}}」</li> <li>MDN 上の記事「<a href="/ja/docs/DOM">DOM ドキュメント</a>」</li> diff --git a/files/ja/glossary/endianness/index.html b/files/ja/glossary/endianness/index.html index 81e6499b26..c95e78710d 100644 --- a/files/ja/glossary/endianness/index.html +++ b/files/ja/glossary/endianness/index.html @@ -22,7 +22,7 @@ translation_of: Glossary/Endianness <li><em>ミックスドエンディアン</em> (古く非常に稀): <code>0x34 0x12 0x78 0x56</code></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>関連情報 <ol> diff --git a/files/ja/glossary/favicon/index.html b/files/ja/glossary/favicon/index.html index 56888a703d..8e64aa7598 100644 --- a/files/ja/glossary/favicon/index.html +++ b/files/ja/glossary/favicon/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Favicon <p>ファビコンはユーザエクスペリエンスを向上させ、ブランドの一貫性を保つために使用されます。例えば使い慣れたアイコンがブラウザのアドレスバーに表示されるのを見ることで、ユーザは自分が適切な場所 (<em>訳注:WEBページなど</em>) にいることを理解します。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 上の {{interwiki("wikipedia", "Favicon", "Favicon")}}</li> <li>ツール diff --git a/files/ja/glossary/fetch_directive/index.html b/files/ja/glossary/fetch_directive/index.html index d67ab580cb..dc26da2516 100644 --- a/files/ja/glossary/fetch_directive/index.html +++ b/files/ja/glossary/fetch_directive/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/Fetch_directive <p>完全な一覧については<a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy#Fetch_directives">フェッチディレクティブ</a>を参照してください。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/first-class_function/index.html b/files/ja/glossary/first-class_function/index.html index 65c47009f7..b1efc7acb3 100644 --- a/files/ja/glossary/first-class_function/index.html +++ b/files/ja/glossary/first-class_function/index.html @@ -94,7 +94,7 @@ sayHello()(); <p><em>二重括弧 <code>()()</code> を使用して、返された関数を呼び出しています。</em></p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><em>Wikipedia の {{Interwiki("wikipedia", "First-class functions", "First-class functions")}}</em></li> <li><em><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> </em> diff --git a/files/ja/glossary/flexbox/index.html b/files/ja/glossary/flexbox/index.html index d07dc40a1d..ba18dce238 100644 --- a/files/ja/glossary/flexbox/index.html +++ b/files/ja/glossary/flexbox/index.html @@ -47,7 +47,7 @@ translation_of: Glossary/Flexbox <li>CSS Flexbox ガイド: <em><a href="/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Flexbox の典型的な使用例</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/forbidden_header_name/index.html b/files/ja/glossary/forbidden_header_name/index.html index 0574d9ae23..b69c1ce340 100644 --- a/files/ja/glossary/forbidden_header_name/index.html +++ b/files/ja/glossary/forbidden_header_name/index.html @@ -46,7 +46,7 @@ translation_of: Glossary/Forbidden_header_name <p><strong>注</strong>: <code>User-Agent</code> ヘッダーは<a href="https://fetch.spec.whatwg.org/#terminology-headers">仕様としては</a>禁止ではなくなりました (Firefox 43 で実装された forbidden header name list を参照)。 Fetch の <a href="/ja/docs/Web/API/Headers">Headers</a> オブジェクトや、XHR の <a href="/ja/docs/Web/API/XMLHttpRequest#setRequestHeader%28%29">setRequestHeader()</a> などでこのヘッダーを設定することが可能です。ただし、 Chrome は Fetch リクエストからこのヘッダーを暗黙的に削除します（<a href="https://bugs.chromium.org/p/chromium/issues/detail?id=571722">Chromium バグ 571722</a> を参照）。</p> </div> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/fork/index.html b/files/ja/glossary/fork/index.html index f903f8c91e..7420671a57 100644 --- a/files/ja/glossary/fork/index.html +++ b/files/ja/glossary/fork/index.html @@ -25,7 +25,7 @@ translation_of: Glossary/Fork <li><a href="https://www.libreoffice.org/about-us/who-are-we/">LibreOffice (OpenOffice からのフォーク)</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>General Knowledge <ol> diff --git a/files/ja/glossary/fps/index.html b/files/ja/glossary/fps/index.html index 0b7e8483e3..553be80946 100644 --- a/files/ja/glossary/fps/index.html +++ b/files/ja/glossary/fps/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/FPS <p>映画では一般に、フレームレートは 24fps です。フレームレートが低くても大丈夫なのは、被写体ぶれで錯覚が発生するためです。コンピューターの画面上を動く場合は被写体ぶれはありません (被写体ぶれのある画像<a href="/ja/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">スプライト</a>を動かしている場合を除いて)。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">Glossary</a> diff --git a/files/ja/glossary/global_object/index.html b/files/ja/glossary/global_object/index.html index b855e3940f..628dd47dc0 100644 --- a/files/ja/glossary/global_object/index.html +++ b/files/ja/glossary/global_object/index.html @@ -55,7 +55,7 @@ window.greeting(); // ふつうに greeting(); を呼び出すのと同じ console.log("Hi!"); }</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN 用語集</a> diff --git a/files/ja/glossary/graceful_degradation/index.html b/files/ja/glossary/graceful_degradation/index.html index 8889a1f2ee..8aea866d62 100644 --- a/files/ja/glossary/graceful_degradation/index.html +++ b/files/ja/glossary/graceful_degradation/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/Graceful_degradation <p>これは、ウェブサイトが複数の未知のユーザーエージェントからアクセスされるという状況下で、ウェブ開発者が最良の可能性を持ったウェブサイトを開発することに集中できるようにするために有用なテクニックです。{{Glossary("Progressive enhancement","プログレッシブエンハンスメント")}}は関連していますが、異なります。これはよくグレースフルデグラデーションとはがy句の方向に進むように見えます。実際には、両方のアプローチが有効であり、互いに補完することができます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 上の {{Interwiki("wikipedia", "en:Graceful degradation")}} (英語)</li> <li><a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">一般的な HTML と CSS の問題への対処</a></li> diff --git a/files/ja/glossary/grid/index.html b/files/ja/glossary/grid/index.html index 602be55cf9..cc152f0623 100644 --- a/files/ja/glossary/grid/index.html +++ b/files/ja/glossary/grid/index.html @@ -59,7 +59,7 @@ translation_of: Glossary/Grid <p>{{ EmbedLiveSample('example', '500', '330') }}</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>CSS グリッドレイアウトガイド:<br> <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本コンセプト</a></em></li> diff --git a/files/ja/glossary/grid_tracks/index.html b/files/ja/glossary/grid_tracks/index.html index d5984585a5..f184db7037 100644 --- a/files/ja/glossary/grid_tracks/index.html +++ b/files/ja/glossary/grid_tracks/index.html @@ -58,7 +58,7 @@ translation_of: Glossary/Grid_Tracks <p>暗黙的グリッドにおけるトラックは、既定では自動的に大きさが決定されますが、 {{cssxref("grid-auto-rows")}} および {{cssxref("grid-auto-columns")}} プロパティでこれらのトラックの大きさを定義することもできます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>CSS グリッドレイアウトガイド:<br> <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウトの基本概念</a></em></li> diff --git a/files/ja/glossary/gzip_compression/index.html b/files/ja/glossary/gzip_compression/index.html index 2be218311e..438bb68818 100644 --- a/files/ja/glossary/gzip_compression/index.html +++ b/files/ja/glossary/gzip_compression/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression <li>ウィキペディアの「<a href="https://ja.wikipedia.org/wiki/Gzip">Gzip</a>」の記事</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details><summary><a href="/ja/docs/Glossary">MDN 用語集</a></summary> {{ListSubpages("/ja/docs/Glossary/")}}</details> diff --git a/files/ja/glossary/hotlink/index.html b/files/ja/glossary/hotlink/index.html index 7342ea9432..c74cabf899 100644 --- a/files/ja/glossary/hotlink/index.html +++ b/files/ja/glossary/hotlink/index.html @@ -10,7 +10,7 @@ translation_of: Glossary/Hotlink <p>この行為は、リンク先のオブジェクトをホストしているウェブサイトの帯域幅を勝手に利用することになるため、多くの場合はひんしゅくを買う行為であり、また著作権上の懸念 — 許可なく行われた場合は窃盗とみなされます — を引き起こす可能性もあるためです。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/http_2/index.html b/files/ja/glossary/http_2/index.html index 92c8b4eee3..5637de57a3 100644 --- a/files/ja/glossary/http_2/index.html +++ b/files/ja/glossary/http_2/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/HTTP_2 <p>HTTP/2 は HTTP のアプリケーション的な意味を何も変更していません。 HTTP 1.1 にあった主要な概念、たとえば HTTP メソッド、ステータスコード、 URI、ヘッダーフィールドなどはすべてそのまま残っています。その代わり、 HTTP/2 はデータを書式化 (フレーム化) するしてクライアントとサーバー間で転送する方法を、プロセス全体の管理と、新しいフレーム化レイヤーの中の複雑さをアプリケーションから隠蔽することの両面で変更しました。結果として、既存のすべてのアプリケーションが変更なしに配信することができます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/http_3/index.html b/files/ja/glossary/http_3/index.html index 3ab4b18867..a6ff8f0ab1 100644 --- a/files/ja/glossary/http_3/index.html +++ b/files/ja/glossary/http_3/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/HTTP_3 --- <p><span class="seoSummary"><strong>HTTP/3</strong> は {{glossary("HTTP 2", "HTTP/2")}} に続く <a href="/ja/docs/Web/HTTP/Basics_of_HTTP">HTTP ネットワークプロトコル</a> の今後のメジャーリビジョンです。</span> HTTP/3 の主なポイントは {{glossary("TCP")}} の代わりに QUIC という新しい {{glossary("UDP")}} プロトコルを使用することです。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/http_header/index.html b/files/ja/glossary/http_header/index.html index b660077dc9..b14fc35fb4 100644 --- a/files/ja/glossary/http_header/index.html +++ b/files/ja/glossary/http_header/index.html @@ -47,7 +47,7 @@ X-Cache: Hit from cloudfront X-Cache-Info: cached </pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>仕様書 <ol> diff --git a/files/ja/glossary/https/index.html b/files/ja/glossary/https/index.html index f8dec3774e..e7a1222d58 100644 --- a/files/ja/glossary/https/index.html +++ b/files/ja/glossary/https/index.html @@ -11,9 +11,9 @@ tags: - 用語集 translation_of: Glossary/https --- -<p><strong>HTTPS</strong> は {{Glossary("HTTP")}} プロトコルを暗号化したバージョンです。 HTTPS は通常、 {{Glossary("SSL")}} または {{Glossary("TLS")}} を用いてクライアントとサーバー間のすべての通信を暗号化します。この安全な接続により、クライアントは機密データをサーバーと安全に交換できます (例えば、銀行取引やオンラインショッピングなどで)。</p> +<p><strong>HTTPS</strong> (<strong><em>HyperText Transfer Protocol Secure</em></strong>) は {{Glossary("HTTP")}} プロトコルを暗号化したバージョンです。 HTTPS は通常、 {{Glossary("SSL")}} または {{Glossary("TLS")}} を用いてクライアントとサーバー間のすべての通信を暗号化します。この安全な接続により、クライアントは機密データをサーバーと安全に交換できます (例えば、銀行取引やオンラインショッピングなどで)。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/identifier/index.html b/files/ja/glossary/identifier/index.html index e22d1551e4..1be1ea7bd6 100644 --- a/files/ja/glossary/identifier/index.html +++ b/files/ja/glossary/identifier/index.html @@ -22,7 +22,7 @@ translation_of: Glossary/Identifier <li>ウィキペディアの{{interwiki("wikipedia", "識別子#プログラミング言語における識別子", "識別子")}}の記事</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/iife/index.html b/files/ja/glossary/iife/index.html index afc9e02e2d..2a4cdd8363 100644 --- a/files/ja/glossary/iife/index.html +++ b/files/ja/glossary/iife/index.html @@ -45,7 +45,7 @@ aName // "Uncaught ReferenceError: aName is not defined" が発生します // Immediately creates the output: result; // "Barry"</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>学習記事 <ol> diff --git a/files/ja/glossary/index.html b/files/ja/glossary/index.html index 89c12fb984..d51376af2a 100644 --- a/files/ja/glossary/index.html +++ b/files/ja/glossary/index.html @@ -46,7 +46,7 @@ translation_of: Glossary <div class="hidden"> <h2 id="Subnav">Subnav</h2> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li> </ol> diff --git a/files/ja/glossary/input_method_editor/index.html b/files/ja/glossary/input_method_editor/index.html index 23e219fdc5..e1fb0a7083 100644 --- a/files/ja/glossary/input_method_editor/index.html +++ b/files/ja/glossary/input_method_editor/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Input_method_editor <li>手書き文字認識を使用したタッチ画面のテキスト入力</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia の記事 <ol> diff --git a/files/ja/glossary/internationalization_and_localization/index.html b/files/ja/glossary/internationalization_and_localization/index.html index c4d2c7a8f0..eec68b6b94 100644 --- a/files/ja/glossary/internationalization_and_localization/index.html +++ b/files/ja/glossary/internationalization_and_localization/index.html @@ -19,7 +19,7 @@ translation_of: Glossary/Internationalization_and_localization <li><a href="/ja/docs/Learn/CSS/CSS_layout/Flexbox">フレックスボックス</a> および <a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">グリッドレイアウト</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary></summary> {{ListSubpages("/ja/docs/Glossary")}}</details> diff --git a/files/ja/glossary/key/index.html b/files/ja/glossary/key/index.html index df0a7de825..a08dee7426 100644 --- a/files/ja/glossary/key/index.html +++ b/files/ja/glossary/key/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Key <p>{{Glossary("symmetric-key cryptography", "共通鍵暗号")}}においては、同じ鍵が暗号化と復号の両方に使用されます。{{Glossary("public-key cryptography", "公開鍵暗号")}}においては、<em>公開鍵</em>と<em>秘密鍵</em>と呼ばれる、一対の関連した鍵が存在します。公開鍵は自由に使用できますが、一方、秘密鍵は秘密に保たれます。公開鍵は、メッセージを対応する秘密鍵だけで復号できるように暗号化できます。逆もまた同様です。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/latency/index.html b/files/ja/glossary/latency/index.html index d84963a318..18025d1cb5 100644 --- a/files/ja/glossary/latency/index.html +++ b/files/ja/glossary/latency/index.html @@ -22,4 +22,4 @@ translation_of: Glossary/Latency <li><a href="/ja/docs/Web/Performance/Understanding_latency">レイテンシーを理解する</a></li> </ul> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/ja/glossary/ligature/index.html b/files/ja/glossary/ligature/index.html index 10d86f4457..9add721662 100644 --- a/files/ja/glossary/ligature/index.html +++ b/files/ja/glossary/ligature/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/Ligature <p>{{cssxref("font-variant-ligatures")}} を使用してウェブページで合字を実装できます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 上の {{Interwiki("wikipedia", "合字")}}</li> </ol> diff --git a/files/ja/glossary/local_variable/index.html b/files/ja/glossary/local_variable/index.html index 2ebec4cb7a..c08ceb49c8 100644 --- a/files/ja/glossary/local_variable/index.html +++ b/files/ja/glossary/local_variable/index.html @@ -19,7 +19,7 @@ function fun(){ } </pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/loop/index.html b/files/ja/glossary/loop/index.html index b578c13eec..87a3ad1569 100644 --- a/files/ja/glossary/loop/index.html +++ b/files/ja/glossary/loop/index.html @@ -74,7 +74,7 @@ while(i < 5){ <li>コードブロックは変数 (i) が5未満である限り、実行が継続します。</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>General Knowledge <ol> diff --git a/files/ja/glossary/lossless_compression/index.html b/files/ja/glossary/lossless_compression/index.html index 02d357c941..4d19c7fb92 100644 --- a/files/ja/glossary/lossless_compression/index.html +++ b/files/ja/glossary/lossless_compression/index.html @@ -18,7 +18,7 @@ translation_of: Glossary/Lossless_compression <p>一方、{{glossary("Lossy compression", "非可逆圧縮")}}は元のファイルから一部のデータを犠牲にすることで厳密ではない近似値を使用しており、元に戻すことができない圧縮方法です。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/ltr/index.html b/files/ja/glossary/ltr/index.html index 397daf4258..7d217b681a 100644 --- a/files/ja/glossary/ltr/index.html +++ b/files/ja/glossary/ltr/index.html @@ -18,7 +18,7 @@ translation_of: Glossary/ltr <li><a href="/ja/docs/Web/Localization">ローカリゼーションと国際化</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> <ul> diff --git a/files/ja/glossary/main_thread/index.html b/files/ja/glossary/main_thread/index.html index 9d00165a98..e938019977 100644 --- a/files/ja/glossary/main_thread/index.html +++ b/files/ja/glossary/main_thread/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/Main_thread <p>意識的に <a href="/ja/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service worker</a> などの <a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">Web worker</a> を使用しない限り、 JavaScript はメインスレッド上で実行されるので、イベント処理や描画の中で簡単にスクリプトが遅延を発生させます。メインスレッドで動作させる必要がある処理が少ないほど、メインスレッドがユーザーのイベントに応答したり、描画したりすることが増え、ユーザーへの反応が全般的に良くなります。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>関連情報 <ol> diff --git a/files/ja/glossary/markup/index.html b/files/ja/glossary/markup/index.html index 87720bac15..55a3f47d0b 100644 --- a/files/ja/glossary/markup/index.html +++ b/files/ja/glossary/markup/index.html @@ -25,7 +25,7 @@ translation_of: Glossary/markup <dd>文書の区間をプログラムがどのように扱うべきかでラベル付けします。例えば、 HTML の {{HTMLElement("td")}} は HTML の表でセルを定義します。</dd> </dl> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/mathml/index.html b/files/ja/glossary/mathml/index.html index b62d92e8eb..8b12fe6cf9 100644 --- a/files/ja/glossary/mathml/index.html +++ b/files/ja/glossary/mathml/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/MathML --- <p id="Summary"><strong>MathML</strong> ({{glossary("XML")}} のアプリケーション) は、ウェブページにおいて数式を表現するためのオープンスタンダードです。 1998年に、 W3C は{{glossary("browser","ブラウザー")}}で数式を表現するための MathML の最初の勧告を行いました。 MathML には科学コンテンツや音声合成などの他のアプリケーションもあります。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/method/index.html b/files/ja/glossary/method/index.html index 87ebec0b02..71cdb78a93 100644 --- a/files/ja/glossary/method/index.html +++ b/files/ja/glossary/method/index.html @@ -30,7 +30,7 @@ translation_of: Glossary/Method <li><a href="/ja/docs/Web/JavaScript/Reference/Methods_Index">JavaScript 内蔵メソッド一覧</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/microsoft_edge/index.html b/files/ja/glossary/microsoft_edge/index.html index 3ea638fa04..4c4d18d6a9 100644 --- a/files/ja/glossary/microsoft_edge/index.html +++ b/files/ja/glossary/microsoft_edge/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/Microsoft_Edge --- <p><strong>Microsoft Edge</strong> は、グラフィカルな無料の{{glossary("World Wide Web", "ウェブ")}}{{Glossary("browser", "ブラウザー")}}で、 Microsoft Windows に付属しており、マイクロソフトが 2014年から開発しています。 Edge は、最初は Spartan として知られ、長い間使われた {{glossary("Microsoft Internet Explorer","Internet Explorer")}} を置き換えました。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>関連情報 <ol> diff --git a/files/ja/glossary/navigation_directive/index.html b/files/ja/glossary/navigation_directive/index.html index dee9fa9d4c..12f4755214 100644 --- a/files/ja/glossary/navigation_directive/index.html +++ b/files/ja/glossary/navigation_directive/index.html @@ -35,7 +35,7 @@ translation_of: Glossary/Navigation_directive </ul> </div> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> <ol> diff --git a/files/ja/glossary/null/index.html b/files/ja/glossary/null/index.html index b30a109f76..947770c90b 100644 --- a/files/ja/glossary/null/index.html +++ b/files/ja/glossary/null/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/Null <pre class="brush: js notranslate">typeof null === 'object' // true</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><strong><a href="/ja/docs/Glossary">用語集</a></strong> diff --git a/files/ja/glossary/number/index.html b/files/ja/glossary/number/index.html index b8a0f46148..c05c75d94c 100644 --- a/files/ja/glossary/number/index.html +++ b/files/ja/glossary/number/index.html @@ -27,7 +27,7 @@ translation_of: Glossary/Number <li>JavaScript のグローバルオブジェクト {{jsxref("Number")}}</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN 用語集</a> diff --git a/files/ja/glossary/php/index.html b/files/ja/glossary/php/index.html index fca5f317c4..e63281bdb2 100644 --- a/files/ja/glossary/php/index.html +++ b/files/ja/glossary/php/index.html @@ -46,7 +46,7 @@ translation_of: Glossary/PHP echo $email; ?></pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="http://php.net/">公式ウェブサイト</a></li> <li>Wikipedia 上の {{Interwiki("wikipedia", "PHP")}}</li> diff --git a/files/ja/glossary/pop/index.html b/files/ja/glossary/pop/index.html index dbc645592e..9e22ae74e1 100644 --- a/files/ja/glossary/pop/index.html +++ b/files/ja/glossary/pop/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/POP <p>メールクライアントは通常、サーバーからすべてのメッセージを受信し、すべてのメッセージを削除します。 しかし、POP3 はサーバーにメッセージのコピーを残すことができます。現在、ほぼすべてのメールサーバーとクライアントは POP3 に対応しています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li>ウィキペディア上の {{Interwiki("wikipedia", "Post Office Protocol", "POP")}}</li> <li><a href="https://tools.ietf.org/html/rfc1734">RFC 1734</a> (POP3 認証機構の仕様)</li> diff --git a/files/ja/glossary/primitive/index.html b/files/ja/glossary/primitive/index.html index 9d5601efb7..8984a59342 100644 --- a/files/ja/glossary/primitive/index.html +++ b/files/ja/glossary/primitive/index.html @@ -106,7 +106,7 @@ console.log(foo); // 5 <li>Wikipedia の {{Interwiki("wikipedia", "プリミティブ型")}} の記事</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/public-key_cryptography/index.html b/files/ja/glossary/public-key_cryptography/index.html index c07fd6eff7..6f56845f36 100644 --- a/files/ja/glossary/public-key_cryptography/index.html +++ b/files/ja/glossary/public-key_cryptography/index.html @@ -21,7 +21,7 @@ translation_of: Glossary/Public-key_cryptography <p>よく使われる公開鍵暗号システムには、 RSA (署名と暗号化の両方), DSA (署名用) Diffie-Hellman (キーの承認用) などがあります。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN 用語集</a> diff --git a/files/ja/glossary/python/index.html b/files/ja/glossary/python/index.html index 463f70a1e0..e4f1c2705c 100644 --- a/files/ja/glossary/python/index.html +++ b/files/ja/glossary/python/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Python <p>Python は OSI に承認されたオープンソースライセンスのもとで開発され、商用を含めて無料で利用や配布をすることができます。 Phython のライセンスは <a href="https://www.python.org/psf">Python Software Foundation</a> が管理しています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Learn more <ol> diff --git a/files/ja/glossary/reporting_directive/index.html b/files/ja/glossary/reporting_directive/index.html index 53016c2dc2..b99c3f66d7 100644 --- a/files/ja/glossary/reporting_directive/index.html +++ b/files/ja/glossary/reporting_directive/index.html @@ -14,7 +14,7 @@ translation_of: Glossary/Reporting_directive <p>完全な一覧については<a href="/ja/docs/Web/HTTP/Headers/Content-Security-Policy#Reporting_directives">報告ディレクティブ</a>を参照してください。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/response_header/index.html b/files/ja/glossary/response_header/index.html index ea7ab0a5e9..9ebbff20d8 100644 --- a/files/ja/glossary/response_header/index.html +++ b/files/ja/glossary/response_header/index.html @@ -30,7 +30,7 @@ X-Cache-Info: not cacheable; meta data too large X-kuma-revision: 1085259 x-frame-options: DENY</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Learn more <ol> diff --git a/files/ja/glossary/rng/index.html b/files/ja/glossary/rng/index.html index 7e9ab60041..b76c3aa1a5 100644 --- a/files/ja/glossary/rng/index.html +++ b/files/ja/glossary/rng/index.html @@ -29,7 +29,7 @@ translation_of: Glossary/RNG <li>{{domxref("Crypto.getRandomValues()")}}: 暗号学的に安全な数値を提供するためのものです。</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li>{{domxref("RandomSource")}}</li> <li>{{jsxref("Math.random()")}}</li> diff --git a/files/ja/glossary/rtl/index.html b/files/ja/glossary/rtl/index.html index 984c7c1b02..9a56edad73 100644 --- a/files/ja/glossary/rtl/index.html +++ b/files/ja/glossary/rtl/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/rtl <p>RTL とは対照的に、LTR (Left To Right, 左書き) は、英語 (<code>en</code>, <code>en-US</code>, <code>en-GB</code>, など)、スペイン語 (<code>es</code>)、フランス語 (<code>fr</code>) などの他の言語で使用されます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/rtsp/index.html b/files/ja/glossary/rtsp/index.html index 5602756b37..34fb63db06 100644 --- a/files/ja/glossary/rtsp/index.html +++ b/files/ja/glossary/rtsp/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/RTSP <li><a href="https://tools.ietf.org/html/rfc7826">RFC 7826</a> (このプロトコルの動作を詳細に定義した文書の一つ)</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/same-origin_policy/index.html b/files/ja/glossary/same-origin_policy/index.html index b32de8dbfd..fc1990bcc6 100644 --- a/files/ja/glossary/same-origin_policy/index.html +++ b/files/ja/glossary/same-origin_policy/index.html @@ -10,7 +10,7 @@ translation_of: Glossary/Same-origin_policy --- <p><span class="seoSummary"><strong>同一オリジンポリシー</strong>は重要なセキュリティの仕組みであり、ある{{Glossary("origin", "オリジン")}}から読み込まれた文書やスクリプトが、どのように他のオリジンからのリソースと対話することができるかを制限するものです。</span>悪意ある行動を起こしかねないリソースを分離し、攻撃の可能性を縮小するのに役立ちます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>: diff --git a/files/ja/glossary/scroll_container/index.html b/files/ja/glossary/scroll_container/index.html index 0a14dc52dd..a7cf59a79f 100644 --- a/files/ja/glossary/scroll_container/index.html +++ b/files/ja/glossary/scroll_container/index.html @@ -10,7 +10,7 @@ translation_of: Glossary/Scroll_container <p>スクロールコンテナーによって、ユーザーは領域をあふれて表示から切り取られ非表示になる部分をスクロールさせることができます。スクロールコンテナーの見える部分は、{{glossary("Scrollport", "スクロールポート")}}と呼ばれます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>: diff --git a/files/ja/glossary/scrollport/index.html b/files/ja/glossary/scrollport/index.html index 5312164657..f7b81d7c7c 100644 --- a/files/ja/glossary/scrollport/index.html +++ b/files/ja/glossary/scrollport/index.html @@ -10,7 +10,7 @@ translation_of: Glossary/Scrollport --- <p><ruby><strong>スクロールポート</strong><rp> (</rp><rt>scrollport</rt><rp>) </rp></ruby>は、文書の{{glossary("Scroll container", "スクロールコンテナー")}}の視覚的なビューポートです。スクロールコンテナーはコンテナーに <code>overflow: scroll</code> を適用するか、 <code>overflow: auto</code> であふれるほどの量のコンテンツがあるときに生成されます。スクロールポートはコンテナーのパディングボックスと一致し、ボックスとして見ることができるコンテンツがスクロールすることを表します。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a>: <ul> diff --git a/files/ja/glossary/semantics/index.html b/files/ja/glossary/semantics/index.html index 70231ee848..6c37d8cc9a 100644 --- a/files/ja/glossary/semantics/index.html +++ b/files/ja/glossary/semantics/index.html @@ -77,7 +77,7 @@ translation_of: Glossary/Semantics <li>Wikipedia 上の {{interwiki("wikipedia", "意味論#コンピュータ科学", "コンピュータ科学におけるセマンティクスの意味")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN 用語集</a> diff --git a/files/ja/glossary/simd/index.html b/files/ja/glossary/simd/index.html index 927f59a073..58c01d9fdb 100644 --- a/files/ja/glossary/simd/index.html +++ b/files/ja/glossary/simd/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/SIMD <p>処理やデータ集合に並列処理を使わない逐次的アーキテクチャの {{Glossary("SISD")}} についても参照ください。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/sld/index.html b/files/ja/glossary/sld/index.html index 65fb5eace4..b2c008bed4 100644 --- a/files/ja/glossary/sld/index.html +++ b/files/ja/glossary/sld/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/SLD <p>もう一つの例として、 <code>developer.mozilla.org</code> では、 <code>developer</code> サブドメインが、 Mozilla ウェブサイトの開発者向け (developer) の章を含むサブドメインを指定するのに使われています。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia articles <ol> diff --git a/files/ja/glossary/smtp/index.html b/files/ja/glossary/smtp/index.html index 07e25051e1..e7ce6f0d37 100644 --- a/files/ja/glossary/smtp/index.html +++ b/files/ja/glossary/smtp/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/SMTP <p>このプロトコルは比較的単純です。最も複雑な部分は、様々な認証のメカニズム (<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>、<a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>、<a class="external" href="http://ja.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>、MSN、AUTH LOGIN、AUTH PLAIN、他) をサポートすること、エラーレスポンスを取り扱うこと、そして認証メカニズムが失敗した時 (例、サーバーがあるメカニズムのサポートを要求するが、実際にはサポートしていない) にフォールバックを行うことです。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/spa/index.html b/files/ja/glossary/spa/index.html index 8104b00051..5606ba8dc0 100644 --- a/files/ja/glossary/spa/index.html +++ b/files/ja/glossary/spa/index.html @@ -25,7 +25,7 @@ translation_of: Glossary/SPA <li><a href="https://vuejs.org/">Vue.JS</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia の記事 <ol> diff --git a/files/ja/glossary/ssl/index.html b/files/ja/glossary/ssl/index.html index cce9581963..9b80b31eba 100644 --- a/files/ja/glossary/ssl/index.html +++ b/files/ja/glossary/ssl/index.html @@ -15,7 +15,7 @@ original_slug: Glossary/SSL_Glossary --- <p class="seoSummary">SSL (Secure Sockets Layer) は古いセキュリティ標準技術で、サーバーとクライアントの間に暗号化されたネットワークリンクを作成し、そこを通過するデータが非公開で安全であることを保証するためのものでした。SSL の現在のバージョンは 3.0 で、1999年に Netscape 社がリリースしたものですが、{{Glossary("TLS", "TLS (Transport Layer Security)")}} プロトコルに置き換えられました。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>関連情報 <ol> diff --git a/files/ja/glossary/static_method/index.html b/files/ja/glossary/static_method/index.html index a2fb2df971..b5f0dc4213 100644 --- a/files/ja/glossary/static_method/index.html +++ b/files/ja/glossary/static_method/index.html @@ -32,7 +32,7 @@ translation_of: Glossary/Static_method myNotification.close();</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>一般知識 <ol> diff --git a/files/ja/glossary/strict_mode/index.html b/files/ja/glossary/strict_mode/index.html index 1c42c36f72..507089d112 100644 --- a/files/ja/glossary/strict_mode/index.html +++ b/files/ja/glossary/strict_mode/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/strict_mode <p>スクリプト全体を厳格モードにする場合は、他の文の前に <code>"use strict";</code> 文を含めることで呼び出すことができます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode">厳格モード</a></li> <li><a href="/ja/docs/Web/JavaScript/Reference/Strict_mode/Transitioning_to_strict_mode">厳格モードへの移行</a></li> diff --git a/files/ja/glossary/symbol/index.html b/files/ja/glossary/symbol/index.html index 2f124346a1..3e79791c59 100644 --- a/files/ja/glossary/symbol/index.html +++ b/files/ja/glossary/symbol/index.html @@ -94,7 +94,7 @@ alert(_Sym.description); // Sym</pre> <li>{{jsxref("Object.getOwnPropertySymbols()")}}</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN 用語集</a> diff --git a/files/ja/glossary/symmetric-key_cryptography/index.html b/files/ja/glossary/symmetric-key_cryptography/index.html index cf1c615d08..d940480562 100644 --- a/files/ja/glossary/symmetric-key_cryptography/index.html +++ b/files/ja/glossary/symmetric-key_cryptography/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Symmetric-key_cryptography <p>現在使用されている共通鍵暗号アルゴリズムの多くはブロック暗号です。すなわち、データをブロック単位で暗号化します。それぞれのブロック長は固定長であり、アルゴリズムによって決まります。例えば、 {{Glossary("AES")}} は16バイトのブロックを使用します。ブロック暗号は常に<em>{{Glossary("Block cipher mode of operation", "モード")}}</em>とともに使用され、ブロック長よりも長いメッセージを安全に暗号化する方法を指定しています。例えば、 AES は cipher であるのに対し、 CTR, CBC, GCM はすべてのモードで使用されます。適切ではないモードを使用したり、モードを誤って使用したりした場合は、基礎となる暗号化によって提供されるセキュリティが完全に損なわれることがあります。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/tcp/index.html b/files/ja/glossary/tcp/index.html index 794087a55b..f56a9624f3 100644 --- a/files/ja/glossary/tcp/index.html +++ b/files/ja/glossary/tcp/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/TCP <p>TCP の役割は、パケットがエラーなく信頼性高く配信されることを保証することです。 TCP には輻輳制御があり、初期要件が小さいものから、コンピューター、サーバー、ネットワークが対応している帯域の水準まで大きさが拡大します。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> <ol> diff --git a/files/ja/glossary/thread/index.html b/files/ja/glossary/thread/index.html index 0f00e80ab5..8d847273aa 100644 --- a/files/ja/glossary/thread/index.html +++ b/files/ja/glossary/thread/index.html @@ -18,7 +18,7 @@ translation_of: Glossary/Thread <p>全体的に見て、オペレーティングシステム内のこれらのスレッドは非常に有用であることがわかります。これらのスレッドは、コンテキストの切り替え時間を最小限に抑え、より効率的な通信を可能にし、マルチプロセッサアーキテクチャのさらなる利用を可能にします。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>関連情報 <ol> diff --git a/files/ja/glossary/tls/index.html b/files/ja/glossary/tls/index.html index a1691b3135..4a0bc4c55f 100644 --- a/files/ja/glossary/tls/index.html +++ b/files/ja/glossary/tls/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/TLS <p><strong>注</strong>: TLS 1.0 と 1.1 への対応は、2020年の初頭にすべての主要なブラウザーから削除される予定です。今後はウェブサーバーが TLS 1.2 や 1.3 に対応していることを確認する必要があります。 Firefox はバージョン74時点で、古いバージョンの TLS を使用しているサーバーに接続する場合に <a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect">Secure Connection Failed</a> エラーを返すようになる予定です ({{bug(1606734)}})。</p> </div> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>仕様書 <ol> diff --git a/files/ja/glossary/type/index.html b/files/ja/glossary/type/index.html index 82708c1ad5..bded089712 100644 --- a/files/ja/glossary/type/index.html +++ b/files/ja/glossary/type/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Type <p>値のデータ型は、その値に対してどの操作が有効であるかにも影響します。例えば、整数には整数を乗算することができますが、文字列には乗算できません。これはデータ型間の比較にも役立つ知識です。また、同じ構造体であっても、<a href="/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">プロトタイプチェーン</a>の中には構造体を継承したものがあるかもしれないので、構造体間の比較は「簡単におこなえる」話題ではありません。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/type_coercion/index.html b/files/ja/glossary/type_coercion/index.html index 43d3788a49..bacbc44aaf 100644 --- a/files/ja/glossary/type_coercion/index.html +++ b/files/ja/glossary/type_coercion/index.html @@ -25,7 +25,7 @@ console.log(sum);</pre> <pre class="brush: js">sum = Number(value1) + value2;</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> diff --git a/files/ja/glossary/type_conversion/index.html b/files/ja/glossary/type_conversion/index.html index e43a936f9d..8116cba723 100644 --- a/files/ja/glossary/type_conversion/index.html +++ b/files/ja/glossary/type_conversion/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Type_Conversion --- <p><ruby>型変換<rp> (</rp><rt>Type conversion</rt><rp>)</rp></ruby> (または<ruby>型キャスト<rp> (</rp><rt>typecasting</rt><rp>) </rp></ruby>) は、データをあるデータ型から別なデータ型に変換することを意味します。<em>暗黙の型変換</em>は、コンパイラーが自動的にデータ型を割り当てるものの、その場でソースコードで<em>明示的に</em>型変換が必要な場合もあります。例えば、 <code>5+2.0</code> という命令が与えられた場合、浮動小数点の <code>2.0</code> は暗黙的に整数に型キャストされますが、 <code>Number("0x11")</code> という命令が与えられた場合、 "0x11" の文字列は明示的に数値の17として型キャストされます。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">用語集</a> <ol> diff --git a/files/ja/glossary/user_agent/index.html b/files/ja/glossary/user_agent/index.html index 944694e0a4..74ecbff310 100644 --- a/files/ja/glossary/user_agent/index.html +++ b/files/ja/glossary/user_agent/index.html @@ -39,7 +39,7 @@ translation_of: Glossary/User_agent <li>{{RFC(2616, "14.43")}}: The <code>User-Agent</code> header</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/glossary/web_performance/index.html b/files/ja/glossary/web_performance/index.html index bed6c986b2..08fcbf6fd6 100644 --- a/files/ja/glossary/web_performance/index.html +++ b/files/ja/glossary/web_performance/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Web_performance <li><a href="/ja/docs/Glossary/Perceived_performance">知覚パフォーマンス</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary></summary> {{ListSubpages("/ja/docs/Glossary")}}</details> diff --git a/files/ja/glossary/web_server/index.html b/files/ja/glossary/web_server/index.html index bc9269cfcd..699b5c7300 100644 --- a/files/ja/glossary/web_server/index.html +++ b/files/ja/glossary/web_server/index.html @@ -8,7 +8,7 @@ translation_of: Glossary/Web_server --- <p>ウェブサーバーは、ユーザーにサービスを提供するハードウェアサーバー上で動作するソフトウェアのことで、通常はクライアントから参照されます。一方、サーバーは、一般的にデータセンターと呼ばれるコンピューターであふれた部屋にあるハードウェアの一部です。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ja/docs/Learn/Common_questions/What_is_a_web_server">サーバーの紹介</a></li> <li>Wikipedia の {{interwiki("wikipedia", "サーバ")}}</li> diff --git a/files/ja/glossary/webassembly/index.html b/files/ja/glossary/webassembly/index.html index 0ab345779e..f53eb382ea 100644 --- a/files/ja/glossary/webassembly/index.html +++ b/files/ja/glossary/webassembly/index.html @@ -8,7 +8,7 @@ translation_of: Glossary/WebAssembly --- <p><strong>WebAssembly</strong> (<em>Wasm</em>) は、オープン{{Glossary("binary", "バイナリ")}}プログラミング言語です。モダンウェブ{{Glossary("Browser", "ブラウザ")}}で動作します。パフォーマンスを高め、かつ/もしくは、ウェブページのための新しい機能を提供します。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>詳細 <ol> diff --git a/files/ja/glossary/whitespace/index.html b/files/ja/glossary/whitespace/index.html index b3400336fa..7b3baf85b9 100644 --- a/files/ja/glossary/whitespace/index.html +++ b/files/ja/glossary/whitespace/index.html @@ -19,7 +19,7 @@ translation_of: Glossary/Whitespace <p><a href="https://www.ecma-international.org/ecma-262/6.0/#sec-white-space">ECMAScript® 2015 言語仕様書</a>では、いくつかの Unicode コードポイントをホワイトスペースとして定めています。 U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP> および その他のカテゴリ “Zs” Unicode の他の “Separator, space” コードポイント <USP> に属するすべての文字です。これらの文字はふつう、コードの機能性には不要なものです。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>仕様書 <ol> diff --git a/files/ja/glossary/wrapper/index.html b/files/ja/glossary/wrapper/index.html index 3b7ab758af..13e1374c0a 100644 --- a/files/ja/glossary/wrapper/index.html +++ b/files/ja/glossary/wrapper/index.html @@ -18,7 +18,7 @@ translation_of: Glossary/Wrapper <p>Wikipedia の {{Interwiki("wikipedia", "Wrapper function")}}</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Glossary">MDN Web Docs 用語集</a> diff --git a/files/ja/learn/forms/form_validation/index.html b/files/ja/learn/forms/form_validation/index.html index 156709f76a..c167a03576 100644 --- a/files/ja/learn/forms/form_validation/index.html +++ b/files/ja/learn/forms/form_validation/index.html @@ -428,7 +428,7 @@ input:focus:invalid { <li> メッセージはブラウザーのロケールに依存しており、ある言語のページでエラーメッセージが別の言語で表示されることがあり、これは下記の Firefox スクリーンショットで見ることができます。</li> </ul> -<p><img alt="Example of an error message with Firefox in French on an English page" src="https://wiki.developer.mozilla.org/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> +<p><img alt="Example of an error message with Firefox in French on an English page" src="/files/4329/error-firefox-win7.png" style="height: 97px; width: 228px;"></p> <p>これらのメッセージの外見やテキストを変更するには、<a href="/ja/docs/Web/API/Constraint_validation" rel="external">制約検証 API</a> の最も一般的なユースケースです。この使用法を例で詳しく見てみましょう。</p> diff --git a/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html b/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html index a338b31625..7a0cf12f4c 100644 --- a/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html +++ b/files/ja/mdn/contribute/howto/create_and_edit_pages/index.html @@ -111,7 +111,7 @@ translation_of: MDN/Contribute/Howto/Create_and_edit_pages <p><em>別のページからリンクせずに新しいページを作成するには</em>、ブラウザの URL フィールドに一意のページ名を入力します。たとえば、次のように入力します。</p> -<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/FooBar</pre> +<pre class="language-html notranslate">https://developer.mozilla.org/en-US/docs/FooBar</pre> <p>MDN は "FooBar" というタイトルの新しいページを作成し、エディターを開いて新しいページにコンテンツを追加することができます。エディターモードの使用方法については、この記事の「<a href="#Editing_an_existing_page">既存のページを編集する</a>」セクションを参照してください。</p> @@ -122,7 +122,7 @@ translation_of: MDN/Contribute/Howto/Create_and_edit_pages <li>ブラウザーの URL 欄に下記のように入力する</li> </ol> -<pre class="language-html notranslate">https://wiki.developer.mozilla.org/en-US/docs/new</pre> +<pre class="language-html notranslate">https://developer.mozilla.org/en-US/docs/new</pre> <p>MDN は新しいページを作成し、エディターを開いて新しいページにコンテンツを追加することができます。エディターモードの使用方法については、この記事の「<a href="#Editing_an_existing_page">既存のページを編集する</a>」セクションを参照してください。</p> diff --git a/files/ja/mdn/contribute/howto/tag/index.html b/files/ja/mdn/contribute/howto/tag/index.html index 2f8c6d0811..14c6353ddc 100644 --- a/files/ja/mdn/contribute/howto/tag/index.html +++ b/files/ja/mdn/contribute/howto/tag/index.html @@ -211,7 +211,7 @@ translation_of: MDN/Contribute/Howto/Tag <h2 id="Tagging_and_search_filters" name="Tagging_and_search_filters">タグ付けと検索フィルター</h2> -<p>検索フィルターは、 MDN のページを正しくタグ付けしないと正しく動作しません。検索フィルターと検索するタグの一覧表は以下の通りです。(検索フィルターは <a href="https://wiki.developer.mozilla.org">wiki</a> (編集) サイトでのみ使用されます。読み込み専用サイトではフィルターなしの別の検索システムを使用しています。)</p> +<p>検索フィルターは、 MDN のページを正しくタグ付けしないと正しく動作しません。検索フィルターと検索するタグの一覧表は以下の通りです。(検索フィルターは <a href="https://developer.mozilla.org">wiki</a> (編集) サイトでのみ使用されます。読み込み専用サイトではフィルターなしの別の検索システムを使用しています。)</p> <div class="blockIndicator note"> <p><strong>注:</strong> もし「タグ名」のところに複数のタグがあった場合は、それらのタグのうち1つ以上が一致すれば検索されるという意味です。</p> diff --git a/files/ja/mdn/contribute/localize/index.html b/files/ja/mdn/contribute/localize/index.html index b62fbf6f67..6d17044446 100644 --- a/files/ja/mdn/contribute/localize/index.html +++ b/files/ja/mdn/contribute/localize/index.html @@ -30,7 +30,7 @@ translation_of: MDN/Contribute/Localize <ul> <li>ディスカッション: <a href="https://chat.mozilla.org/#/room/#l10n-fr:mozilla.org">Matrix (#l10n-fr channel)</a></li> - <li>現在の貢献者: <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/JNa0">JNa0</a>, <a href="https://github.com/nicolas-goudry">nicolas-goudry</a>, <a href="https://github.com/LEMIBANDDEXARI">LEMIBANDDEXARI</a></li> + <li>現在の貢献者: <a href="https://github.com/SphinxKnight">SphinxKnight</a>, <a href="https://github.com/tristantheb">tristantheb</a>, <a href="https://github.com/audrasjb">Jb Audras</a></li> </ul> <h3 id="Japanese_ja">日本語 (ja)</h3> diff --git a/files/ja/mdn/guidelines/css_style_guide/index.html b/files/ja/mdn/guidelines/css_style_guide/index.html index 46c2646719..7501925e4a 100644 --- a/files/ja/mdn/guidelines/css_style_guide/index.html +++ b/files/ja/mdn/guidelines/css_style_guide/index.html @@ -20,7 +20,7 @@ translation_of: MDN/Guidelines/CSS_style_guide <p>これらのスタイルは、記事内容のスタイリング中に発生する最も一般的な状況をカバーするように開発されているので、可能な限り使用可能なクラスを使用するようにしてください。標準的なコンテンツのルックアンドフィールからの分岐が多すぎると、一貫性や可読性を損ないます。あなたのページが絶対に特別なカスタムスタイリングを必要としていると感じたら、まず <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse フォーラム</a>でその話題を切り出す必要があります。</p> <div class="blockIndicator note"> -<p><strong>注</strong>: 特定のクラスが MDN で使用されている場所を検索する場合は、<code>https://developer.mozilla.org/ja/search?locale=en-US&css_classnames=<var>desired-css-class</var></code> という形式の URL を使用して検索できます。たとえば、 Google のカードグリッドレイアウトを使用するページを見つけるには、URL <a href="/ja/search?locale=*&css_classnames=card-grid">https://wiki.developer.mozilla.org/ja/search?locale=*&css_classnames=card-grid</a> を試してください。</p> +<p><strong>注</strong>: 特定のクラスが MDN で使用されている場所を検索する場合は、<code>https://developer.mozilla.org/ja/search?locale=en-US&css_classnames=<var>desired-css-class</var></code> という形式の URL を使用して検索できます。たとえば、 Google のカードグリッドレイアウトを使用するページを見つけるには、URL <a href="/ja/search?locale=*&css_classnames=card-grid">https://developer.mozilla.org/ja/search?locale=*&css_classnames=card-grid</a> を試してください。</p> </div> <div class="blockIndicator warning"> diff --git a/files/ja/orphaned/mozmill/index.html b/files/ja/orphaned/mozmill/index.html deleted file mode 100644 index 8082bcbbe4..0000000000 --- a/files/ja/orphaned/mozmill/index.html +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: Mozmill -slug: orphaned/Mozmill -tags: - - MozMill -original_slug: Mozmill ---- -<p>MozMill はテストツールであり、Gecko ベースのアプリケーション (Firefox, Thunderbird, Songbird 等) の自動テストを書くためのフレームワークです。これは、<a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/9018">拡張機能</a> としてビルドされており、IDE (integrated development environment) も含まれています。また、<a class="external" href="http://pypi.python.org/pypi?%3Aaction=search&term=mozmill&submit=search" title="http://pypi.python.org/pypi?:action=search&term=mozmill&submit=search">コマンドライン版のクライアント</a>もあり、テストを書いたり実行したり、テストのデバッグの助けにもなります。MozMill には、ユーザとの対話をシミュレートする機能的なテストを書く助けとなる、大規模な API が用意されています。同様に、完全な <a class="internal" href="/ja/Mozmill/Mozmill_Unit_Test_Framework">ユニットテスト API</a> もあります。</p> -<p><a class="link-https" href="https://wiki.mozilla.org/QA/Mozmill_Test_Automation">Mozmill テスト自動化プロジェクト</a> は、2009 年 1 月に開始され、Firefox のための自動テスト作業をカバーしています。<a class="link-https" href="https://wiki.mozilla.org/QA/Mozmill_Test_Automation">プロジェクトのページ</a>をご覧になるか、<a href="/ja/Mozmill_Tests">Mozmill Tests</a> のドキュメントを見て、テスト書きへの貢献や MozMill テストの実行についてのイメージをつかんでください。既存のテストは、新しい Firefox のリリースのための <a href="/ja/Mozmill/Release_Testing">リリーステスト</a>のサイクルで実行されます。</p> -<p>また、Mozilla Messaging チームには、<a href="/ja/Thunderbird/Thunderbird_MozMill_Testing">MozMill による Thunderbird のテスト</a>を扱うアクティブなプロジェクトがあります。</p> -<h2 id="インストール">インストール</h2> -<p>Mozmill は、2 通りの異なる方法でインストールできます。多くの場合は、add-ons.mozilla.org からダウンロードできる <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/9018" title="https://addons.mozilla.org/en-US/firefox/addon/9018">Mozmill Extension</a> をお勧めします。この拡張機能には統合された開発環境といくつかのオーサリングツール、テストを実行するためのグラフィカルなインタフェースが含まれています。<a href="/ja/Mozmill_Tests#Run_Mozmill_restart_tests" title="https://developer.mozilla.org/ja/Mozmill_Tests#Run_Mozmill_restart_tests">再起動テスト</a>とオペレーティングシステムの対話に興味のある上級ユーザには、python <a class="external" href="http://pypi.python.org/pypi/pip">pip</a> (or <a class="external" href="http://pypi.python.org/pypi/setuptools">setuptools</a>) パッケージインストーラを使用した <a class="external" href="http://pypi.python.org/pypi?%3Aaction=search&term=mozmill&submit=search" title="http://pypi.python.org/pypi?:action=search&term=mozmill&submit=search">コマンドライン版のクライアント</a> のインストールをお勧めします。</p> -<h3 id="拡張機能版">拡張機能版</h3> -<p>拡張機能版をインストールするには、アドオンマネージャの "アドオンを入手" タブを開いて Mozmill を検索し、インストールするだけです。<a class="link-https" href="https://addons.mozilla.org/ja/firefox/addon/9018">addons.mozilla.org</a> の Web サイトから直接インストールすることもできます。アプリケーションを再起動してインストールを完了してください。</p> -<h3 id="コマンドライン版のクライアント">コマンドライン版のクライアント</h3> -<p>コマンドライン版の MozMill をインストールするには、さらにいくつかの手順が必要になります。この手順はオペレーティングシステムにより多少異なります。</p> -<h4 id="Windows">Windows</h4> -<p>MozMill の前に、MozillaBuildSetup パッケージをシステムにインストールしてください。このパッケージの <a class="external" href="http://ftp.mozilla.org/pub/mozilla.org/mozilla/libraries/win32/MozillaBuildSetup-Latest.exe">最新ビルド</a>を入手し、手動でインストールしてください。l10n.bat ファイルを実行した後、MozMill コマンドライン版のクライアントをインストールしてください。</p> -<pre><code>$ easy_install pip -$ pip install mozmill -$ pip install mercurial (Visual Studio がインストールされていない環境では、この <a href="http://hg.mozilla.org/qa/mozmill-automation/raw-file/tip/setup/py25.reg">レジストリファイル</a> をダウンロードして適用し、<a href="http://people.mozilla.com/~hskupin/mozmill-crowd/mozmill-windows.zip">MozMill のバイナリパッケージ</a> を手動でインストール (setup ファイルまたは setup.cmd をコマンドプロンプトで実行) してください。) -</code></pre> -<h4 id="Mac_OS_X">Mac OS X</h4> -<p>Mac OS X 10.4 の環境の場合は、先に <a class="external" href="http://python.org/download/">python.org</a> から Python 2.5 以降のバージョンをダウンロードしてインストールする必要があります。その後、MozMill を setuptools でインストールしてください。</p> -<pre><code>$ curl -O http://peak.telecommunity.com/dist/ez_setup.py</code> -<code>$ sudo python ez_setup.py -$ sudo easy_install pip</code> -$ sudo pip install mozmill mercurial -</pre> -<h4 id="Ubuntu">Ubuntu</h4> -<p>MozMill を Ubuntu にインストールするには、ターミナルで次の 2 つのコマンドを実行するだけです:</p> -<pre>$ sudo apt-get install python-pip python-dev -$ sudo pip install mozmill mercurial</pre> -<h2 id="MozMill_の更新">MozMill の更新</h2> -<p>MozMill を拡張機能としてインストールした場合は、新しいバージョンがリリースされた時に、アプリケーションから自動的に通知されます。コマンドライン版のクライアントを更新するには、次のコマンドを実行してください (sudo は Windows 環境では不要です):</p> -<pre>$ sudo pip install --upgrade mozmill -</pre> -<h2 id="さらに読むべきもの">さらに読むべきもの</h2> -<p>他にも、いくつかの MozMill の概要を説明するページがあります。後で参照するため、これらのページをブックマークに追加しておくと良いでしょう。</p> -<ul> <li><a href="/ja/Mozmill/First_Steps/Tutorial:_Introduction_to_Mozmill">Introduction to Mozmill</a> - 必要な MozMill の各 API オブジェクトの詳細なチュートリアル</li> <li><a href="/ja/Mozmill_Tests" title="https://developer.mozilla.org/ja/Mozmill_Tests">Mozmill tests</a> - コマンドラインから MozMill を実行する方法</li> -</ul> -<h4 id="リファレンスデスク">リファレンスデスク</h4> -<ul> <li><a href="/ja/Mozmill/Mozmill_Controller_Object">controller object reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Elements_Library_Object">elementslib object reference</a> (Mozmill 2.0 で非推奨 - <a href="/ja/Mozmill/Finding_Mozmill_Elements" title="Finding_Mozmill_Elements">finding mozmill elements</a> 参照)</li> <li><a href="/ja/Mozmill/Mozmill_Element_Object" title="element object reference">element object reference</a> (Mozmill 2.0+)</li> <li><a href="/ja/Mozmill/Finding_Mozmill_Elements" title="Finding Mozmill Elements">finding mozmill elements</a> (Mozmill 2.0+)</li> <li><a href="/ja/Mozmill/Mozmill_Base_Object_Interfaces">mozmill object reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Unit_Test_Framework">unit test API reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Element_Object/Extending_the_MozMill_element_hierarchy" title="https://developer.mozilla.org/ja/Mozmill/Mozmill_Element_Object/Extending_Element_Hierarchy">extending the element hierarchy</a></li> -</ul> -<h2 id="バグ">バグ</h2> -<p>Mozmill は、Mozilla プロジェクト内の多くのテストシステムと同様に、開発段階にあります。バグを見つけたときは、<a class="link-https" href="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=JSBridge&component=Mozmill&component=MozRunner&product=Testing" title="https://bugzilla.mozilla.org/buglist.cgi?query_format=advanced&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=ASSIGNED&bug_status=REOPENED&component=JSBridge&component=Mozmill&component=MozRunner&product=Testing">既知のバグ</a> のリストですでに報告されていないか確認してください。まだ報告されていない場合は、"<code>Testing</code>" の製品カテゴリの "<code>Mozmill</code>" コンポーネント下に <a class="link-https" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Testing">新たなバグとして報告</a>してください。バグ報告の際は、バグを再現するためのできるだけ詳細な情報と MozMill のテストを添付してください。よろしくお願いします！</p> -<div class="noinclude"> <p>{{ languages( { "en": "en/Mozmill" } ) }}</p> -</div> diff --git a/files/ja/orphaned/web/api/node/getuserdata/index.html b/files/ja/orphaned/web/api/node/getuserdata/index.html deleted file mode 100644 index 8c0a07a058..0000000000 --- a/files/ja/orphaned/web/api/node/getuserdata/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Node.getUserData() -slug: orphaned/Web/API/Node/getUserData -tags: - - API - - DOM - - Method - - Node - - Obsolete - - Reference - - メソッド -translation_of: Web/API/Node/getUserData -original_slug: Web/API/Node/getUserData ---- -<div>{{APIRef("DOM")}}{{obsolete_header}}</div> - -<p><code><strong>Node.getUserData()</strong></code> メソッドは、以前 {{domxref("Node.setUserData()")}} によってノードに設定されたすべてのユーザーデータを {{domxref("DOMUserData")}} 形式で返します。</p> - -<div class="note"> -<p><code>Node.setUserData</code> および {{domxref("Node.getUserData")}} メソッドはウェブコンテンツから利用できなくなりました。 {{domxref("Element.dataset")}} または <a href="/ja/docs/JavaScript/Reference/Global_Objects/WeakMap"><code>WeakMap</code></a> を代わりに利用することができます。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>userData</em> = <em>someNode</em>.getUserData(<em>userKey</em>);</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<ul> - <li><code>userKey</code> は指定されたノードに関連付けられた特定のデータを選択するためのキーです。指定されたノードに複数のキーが、それぞれの値を所持して割り当てられている可能性があります。</li> -</ul> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush: js">var d = document.setUserData('key', 15, null); -console.log(document.getUserData('key')); // 15</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM3 Core', 'core.html#Node3-getUserData', 'Node.getUserData()')}}</td> - <td>{{Spec2('DOM3 Core')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.Node.getUserData")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("Node.setUserData()")}}</li> - <li>{{domxref("UserDataHandler")}}</li> - <li>{{domxref("DOMUserData")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/append/index.html b/files/ja/orphaned/web/api/parentnode/append/index.html deleted file mode 100644 index 1206957c43..0000000000 --- a/files/ja/orphaned/web/api/parentnode/append/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ParentNode.append() -slug: orphaned/Web/API/ParentNode/append -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference -translation_of: Web/API/ParentNode/append -original_slug: Web/API/ParentNode/append ---- -<p>{{APIRef("DOM")}}</p> - -<p><strong><code>ParentNode.append()</code></strong> メソッドは、{{domxref("Node")}} オブジェクト、または {{domxref("DOMString")}} オブジェクトのセットを <code>ParentNode</code> の最後に追加します。 {{domxref("DOMString")}} オブジェクトは {{domxref("Text")}} ノードと同等に挿入されます。</p> - -<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> - -<ul> - <li><code>ParentNode.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> - <li><code>ParentNode.append()</code> は戻り値を持っていませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> - <li><code>ParentNode.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> 一つのノードだけしか追加することができせん。</li> -</ul> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">// [Throws, Unscopable] -ParentNode.append(...<var>nodesOrDOMStrings</var>) // returns undefined -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>nodes</code></dt> - <dd>追加する {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトのセット</dd> -</dl> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Appending_an_element" name="Appending_an_element">要素の追加</h3> - -<pre class="brush: js notranslate">let parent = document.createElement("div") -let p = document.createElement("p") -parent.append(p) - -console.log(parent.childNodes) // NodeList [ <p> ] -</pre> - -<h3 id="Appending_text" name="Appending_text">テキストの追加</h3> - -<pre class="brush: js notranslate">let parent = document.createElement("div") -parent.append("Some text") - -console.log(parent.textContent) // "Some text"</pre> - -<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3> - -<pre class="brush: js notranslate">let parent = document.createElement("div") -let p = document.createElement("p") -parent.append("Some text", p) - -console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.append_is_unscopable" name="ParentNode.append_is_unscopable">ParentNode.append() はスコープが効かない</h3> - -<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js notranslate">let parent = document.createElement("div") - -with(parent) { - append("foo") -} -// ReferenceError: append is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>append()</code> メソッドはInternet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p> - -<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('append')) { - return; - } - Object.defineProperty(item, 'append', { - configurable: true, - enumerable: true, - writable: true, - value: function append() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.appendChild(docFrag); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.ParentNode.append")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.prepend()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("ChildNode.after()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/children/index.html b/files/ja/orphaned/web/api/parentnode/children/index.html deleted file mode 100644 index 537c91d1c6..0000000000 --- a/files/ja/orphaned/web/api/parentnode/children/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ParentNode.children -slug: orphaned/Web/API/ParentNode/children -tags: - - API - - Child - - Child Nodes - - DOM - - HTMLCollection - - Node - - ParentNode - - Property - - children -translation_of: Web/API/ParentNode/children -original_slug: Web/API/ParentNode/children ---- -<div>{{ APIRef("DOM") }}</div> - -<p>{{domxref("ParentNode")}} の <strong><code>children</code></strong> プロパティは、呼び出された際のノードの子{{domxref("Element", "要素", "", 1)}}ノードをすべて含んだ動的な（生きている） {{domxref("HTMLCollection")}} を返す、読み取り専用プロパティです。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate">let <em>children</em> = <var>node</var>.children;</pre> - -<h3 id="Value" name="Value">値</h3> - -<p><em><code>node</code></em> の子の DOM要素の生きている順序付きコレクションの、 {{ domxref("HTMLCollection") }} です。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p> - -<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p> - -<h2 id="Example" name="Example">例 </h2> - -<pre class="brush: js notranslate">const foo = document.getElementById('foo'); -for (let i = 0; i < foo.children.length; i++) { - console.log(foo.children[i].tagName); -}</pre> - -<h2 id="Polyfill" name="Polyfill">Polyfill</h2> - -<pre class="brush: js notranslate">// Overwrites native 'children' prototype. -// Adds Document & DocumentFragment support for IE9 & Safari. -// Returns array instead of HTMLCollection. -;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.children == null) { - Object.defineProperty(constructor.prototype, 'children', { - get: function() { - let i = 0, node, nodes = this.childNodes, children = []; - while (node = nodes[i++]) { - if (node.nodeType === 1) { - children.push(node); - } - } - return children; - } - }); - } -})(window.Node || window.Element); -</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様</th> - <th scope="col">状態</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初めての定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<p>{{Compat("api.ParentNode.children")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}} インターフェイス</li> - <li> - <div class="syntaxbox">このインターフェイスを実装する次のオブジェクトタイプ。{{domxref("Document")}}、{{domxref("Element")}}、 および {{domxref("DocumentFragment")}}</div> - </li> - <li> - <div class="syntaxbox">{{domxref("Node.childNodes")}}</div> - </li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/index.html b/files/ja/orphaned/web/api/parentnode/index.html deleted file mode 100644 index 5d1ec6c97e..0000000000 --- a/files/ja/orphaned/web/api/parentnode/index.html +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: ParentNode -slug: orphaned/Web/API/ParentNode -tags: - - API - - DOM - - Finding Elements - - Finding Nodes - - Interface - - Locating Elements - - Locating Nodes - - Managing Elements - - Managing Nodes - - Mixin - - Node - - ParentNode - - Reference - - Selectors -translation_of: Web/API/ParentNode -original_slug: Web/API/ParentNode ---- -<div>{{APIRef("DOM")}}</div> - -<p><span class="seoSummary"><code><strong>ParentNode</strong></code> ミックスインは、子を持つことができるすべての型の {{domxref("Node")}} オブジェクトに特有のメソッドやプロパティを含みます。</span>これは、{{domxref("Element")}} と {{domxref("Document")}}、{{domxref("DocumentFragment")}} オブジェクトに実装されています。</p> - -<p>対象のノードや要素を見つけるために<a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>を使用する方法について、詳しくは<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクタを使用した DOM 要素の指定</a>をご覧ください。</p> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt>{{domxref("ParentNode.childElementCount")}} {{readonlyInline}}</dt> - <dd>オブジェクトが持つ子の数を表す <code>unsigned long</code> 値を返します。</dd> - <dt>{{domxref("ParentNode.children")}} {{readonlyInline}}</dt> - <dd>この <code>ParentNode</code> の子であるすべての {{domxref("Element")}} 型のオブジェクトを含む実際の {{domxref("HTMLCollection")}} を返します。要素ではないノードは省きます。</dd> - <dt>{{domxref("ParentNode.firstElementChild")}} {{readonlyInline}}</dt> - <dd>この <code>ParentNode</code> の最初の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd> - <dt>{{domxref("ParentNode.lastElementChild")}} {{readonlyInline}}</dt> - <dd>この <code>ParentNode</code> の最後の子である {{domxref("Element")}} を返します。存在しない場合は <code>null</code> を返す。</dd> -</dl> - -<h2 id="Methods" name="Methods">メソッド</h2> - -<dl> - <dt>{{domxref("ParentNode.append()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code> の最後の子の後ろに、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd> - <dt>{{domxref("ParentNode.prepend()")}} {{experimental_inline}}</dt> - <dd><code>ParentNode</code> の最初の子の前に、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを挿入します。{{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</dd> - <dt>{{domxref("ParentNode.querySelector()")}}</dt> - <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする最初の {{domxref("Element")}} を返します。</dd> - <dt>{{domxref("ParentNode.querySelectorAll()")}}</dt> - <dd>現在の要素をルートとして、指定したセレクターのグループにマッチする要素のリストを表す {{domxref("NodeList")}} を返します。</dd> - <dt>{{domxref("ParentNode.replaceChildren()")}}</dt> - <dd>ノードの既存の子ノードを、指定した新しい子ノードのセットに入れ替えます。</dd> -</dl> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インターフェイスを {{domxref("ChildNode")}} と {{domxref("ParentNode")}} に分割しました。{{domxref("ParentNode.firstElementChild")}} と {{domxref("ParentNode.lastElementChild")}}、{{domxref("ParentNode.childElementCount")}} プロパティは、後者で定義されていません。<br> - {{domxref("ParentNode.children")}} プロパティが追加されました。<br> - {{domxref("ParentNode.querySelector()")}}、{{domxref("ParentNode.querySelectorAll()")}}、{{domxref("ParentNode.append()")}}、{{domxref("ParentNode.prepend()")}} メソッドが追加されました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td><code>ElementTraversal</code> 基本インターフェイスにこのプロパティの初期定義が追加され、{{domxref("Element")}} で使われます。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.ParentNode")}}</p> - -<h2 id="See_also" name="See_also">関連項目</h2> - -<ul> - <li>{{domxref("ChildNode")}} 基本インターフェース。</li> - <li> - <div class="syntaxbox">このミックスインを実装したオブジェクト型: {{domxref("Document")}} と {{domxref("Element")}}、{{domxref("DocumentFragment")}}。</div> - </li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/prepend/index.html b/files/ja/orphaned/web/api/parentnode/prepend/index.html deleted file mode 100644 index 8c6c87cede..0000000000 --- a/files/ja/orphaned/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: ParentNode.prepend() -slug: orphaned/Web/API/ParentNode/prepend -tags: - - API - - DOM - - Method - - Node - - ParentNode - - Reference - - prepend -translation_of: Web/API/ParentNode/prepend -original_slug: Web/API/ParentNode/prepend ---- -<p>{{APIRef("DOM")}}</p> - -<p><strong><code>ParentNode.prepend()</code></strong> メソッドは、{{domxref("Node")}} オブジェクトまたは {{domxref("DOMString")}} オブジェクトのセットを {{domxref("ParentNode")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox notranslate"><em>ParentNode</em>.prepend(<em>...nodesToPrepend</em>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>nodesToPrepend</code></dt> - <dd>現在 <code>ParentNode</code> にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは {{domxref("Node")}} オブジェクトまたは文字列として指定できます。文字列は新しい {{domxref("Text")}} ノードとして挿入されます。</dd> -</dl> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p><code>undefined</code>.</p> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<ul> - <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加させることができません。</li> -</ul> - -<h2 id="Examples" name="Examples">例</h2> - -<h3 id="Prepending_an_element" name="Prepending_an_element">要素の前に追加</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var p = document.createElement("p"); -var span = document.createElement("span"); -parent.append(p); -parent.prepend(span); - -console.log(parent.childNodes); // NodeList [ <span>, <p> ] -</pre> - -<h3 id="Prepending_text" name="Prepending_text">テキストの前に追加</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -parent.append("Some text"); -parent.prepend("Headline: "); - -console.log(parent.textContent); // "Headline: Some text"</pre> - -<h3 id="Appending_an_element_and_text" name="Appending_an_element_and_text">要素とテキストの追加</h3> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); -var p = document.createElement("p"); -parent.prepend("Some text", p); - -console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]</pre> - -<h3 id="ParentNode.prepend_is_unscopable" name="ParentNode.prepend_is_unscopable">ParentNode.prepend() はスコープが効かない</h3> - -<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> - -<pre class="brush: js notranslate">var parent = document.createElement("div"); - -with(parent) { - prepend("foo"); -} -// ReferenceError: prepend is not defined </pre> - -<h2 id="Polyfill">Polyfill</h2> - -<p><code>prepend()</code> メソッドは Internet Explorer 9 以上であれば以下のコードでポリフィルを当てることができます。</p> - -<pre class="brush: js notranslate">// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md -(function (arr) { - arr.forEach(function (item) { - if (item.hasOwnProperty('prepend')) { - return; - } - Object.defineProperty(item, 'prepend', { - configurable: true, - enumerable: true, - writable: true, - value: function prepend() { - var argArr = Array.prototype.slice.call(arguments), - docFrag = document.createDocumentFragment(); - - argArr.forEach(function (argItem) { - var isNode = argItem instanceof Node; - docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem))); - }); - - this.insertBefore(docFrag, this.firstChild); - } - }); - }); -})([Element.prototype, Document.prototype, DocumentFragment.prototype]);</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.ParentNode.prepend")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("ParentNode")}} および {{domxref("ChildNode")}}</li> - <li>{{domxref("ParentNode.append()")}}</li> - <li>{{domxref("Node.appendChild()")}}</li> - <li>{{domxref("Node.insertBefore()")}}</li> - <li>{{domxref("ChildNode.before()")}}</li> - <li>{{domxref("Element.insertAdjacentElement()")}}</li> - <li>{{domxref("NodeList")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html b/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html deleted file mode 100644 index 01e307ed31..0000000000 --- a/files/ja/orphaned/web/api/parentnode/queryselectorall/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: ParentNode.querySelectorAll() -slug: orphaned/Web/API/ParentNode/querySelectorAll -tags: - - API - - DOM - - Document - - Finding Elements - - Finding Nodes - - Method - - ParentNode - - Reference - - Searching Elements - - Searching Nodes - - Selectors - - querySelectorAll -translation_of: Web/API/ParentNode/querySelectorAll -original_slug: Web/API/ParentNode/querySelectorAll ---- -<div>{{ApiRef("DOM")}}</div> - -<p>{{domxref("ParentNode")}} ミックスインは <code><strong>querySelectorAll()</strong></code> メソッドを定義しており、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを示す {{domxref("NodeList")}} を返します。</p> - -<p>単一の結果のみが必要な場合は、代わりに {{domxref("ParentNode.querySelector", "querySelector()")}} メソッドを使用することを検討してください。</p> - -<div class="note"> -<p><strong>メモ:</strong> このメソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} として実装されています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); -</pre> - -<h3 id="Parameters" name="Parameters">引数</h3> - -<dl> - <dt><code>selectors</code></dt> - <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> -</dl> - -<div class="note"> -<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> -</div> - -<h3 id="Return_value" name="Return_value">返値</h3> - -<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの1つ以上に一致する子孫ノード1つに対して1つずつの {{domxref("Element")}} を含みます。</p> - -<div class="note"> -<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> -</div> - -<h3 id="Exceptions" name="Exceptions">例外</h3> - -<dl> - <dt><code>SyntaxError</code></dt> - <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> -</dl> - -<h2 id="Examples" name="Examples">例</h2> - -<p>文書内のすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を入手します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("p");</pre> - -<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("div.note, div.alert"); -</pre> - -<p>次に、 <code>test</code> という ID を持つコンテナ内に位置し、直接の親要素が <code>highlighted</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> - -<pre class="brush: js">var container = document.querySelector("#test"); -var matches = container.querySelectorAll("div.highlighted > p");</pre> - -<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> - -<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> - -<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> - -<pre class="brush: js">var container = document.querySelector("#userlist"); -var matches = container.querySelectorAll("li[data-active=1]");</pre> - -<h2 id="User_notes" name="User_notes">ユーザーのメモ</h2> - -<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> - -<h3 id="HTML">HTML</h3> - -<p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> - -<pre class="brush: html"><div class="outer"> - <div class="select"> - <div class="inner"> - </div> - </div> -</div></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1 です。0 ではありません! -</pre> - -<p>この例では、<code>select</code> class を持つ <code><div></code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> - -<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> - -<pre class="brush: js">var select = document.querySelector('.select'); -var inner = select.querySelectorAll(':scope .outer .inner'); -inner.length; // 0</pre> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>初回定義</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 1", "#interface-definitions", "document.querySelector()")}}</td> - <td>{{Spec2("Selectors API Level 1")}}</td> - <td>元の定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.ParentNode.querySelectorAll")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> - <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> - <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> - <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li> - <li>メソッドは {{domxref("Element.querySelectorAll()")}}, {{domxref("Document.querySelectorAll()")}}, {{domxref("DocumentFragment.querySelectorAll()")}} で利用可能です</li> -</ul> diff --git a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html b/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html deleted file mode 100644 index 23daae0e6b..0000000000 --- a/files/ja/orphaned/web/javascript/guide/class-based_vs._prototype-based_languages/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Class-Based vs. Prototype-Based Languages -slug: orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages -original_slug: Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages ---- -<h3 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E.E3.81.A8.E3.83.97.E3.83.AD.E3.83.88.E3.82.BF.E3.82.A4.E3.83.97.E3.83.99.E3.83.BC.E3.82.B9.E8.A8.80.E8.AA.9E">クラスベース言語とプロトタイプベース言語</h3> -<p>Java や C++ といったクラスベースのオブジェクト指向言語はクラスとインスタンスという 2 つの異なる実体があるという概念に基づいています。</p> -<ul> <li>クラスはあるオブジェクトの集合を特徴付けるすべてのプロパティ（Java ではメソッドとフィールドを、C++ ではメンバをプロパティと見なす）を定義する。クラスとはそれが表すオブジェクトの集合の特定のメンバではなく、抽象的なものである。例えば、Employee クラスで従業員すべてを含む集合を表す。</li> <li>一方、インスタンスはクラスを実例にしたものである。つまり、そのメンバの 1 つということである。例えば、Victoria は Employee クラスのインスタンスとなることができる。このクラスは特定の個人を従業者として表すものである。インスタンスはその親クラスのプロパティを正確に保持する（それに他ならない）。</li> -</ul> -<p>JavaScript のようなプロトタイプベース言語はこの区別がありません。単にオブジェクトがあるだけです。プロトタイプベース言語には原型的なオブジェクトという概念があります。このオブジェクトは新しいオブジェクトの初期プロパティを取得する元になるテンプレートとして使用されます。どのオブジェクトもそれ独自のプロパティを指定できます。オブジェクト作成時にも実行時にも可能です。さらに、どのオブジェクトも別のオブジェクトに対するプロトタイプとして関連付けることができます。2 つ目のオブジェクトが 1 つ目のオブジェクトのプロトタイプを共有するということもできます。</p> -<h4 id=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9" name=".E3.82.AF.E3.83.A9.E3.82.B9.E3.81.AE.E5.AE.9A.E7.BE.A9">クラスの定義</h4> -<p>クラスベース言語ではクラス定義ごとにクラスを定義します。定義では特殊なメソッドを指定してそのクラスのインスタンスを作成することができます。そのようなメソッドはコンストラクタと呼びます。コンストラクタメソッドはインスタンスのプロパティに対する初期値を指定することができます。また、作成時に他の適当な処理を実行することもできます。new 演算子をコンストラクタメソッドと一緒に用いることでクラスのインスタンスを作成できます。</p> -<p>JavaScript は同様のモデルに従っていますが、コンストラクタと別になっているクラス定義がありません。その代わりに、プロパティと値からなる特定の初期的なセットを持つオブジェクトを作成するコンストラクタ関数を定義します。どの JavaScript 関数もコンストラクタとして使用できます。new 演算子をコンストラクタ関数とともに使用することで新しいオブジェクトを作成します。</p> -<h4 id=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF" name=".E3.82.B5.E3.83.96.E3.82.AF.E3.83.A9.E3.82.B9.E3.81.A8.E7.B6.99.E6.89.BF">サブクラスと継承</h4> -<p>クラスベース言語ではクラス定義を通じてクラスの階層を作ります。クラス定義では新しいクラスがある既存のクラスのサブクラスになるように指定することができます。サブクラスはスーパークラスの全プロパティを継承します。さらに新しくプロパティを追加したり継承したものを変更することもできます。例えば、Employee クラスが name および dept プロパティのみを含んでおり、Manager は reports プロパティを追加する Employee のサブクラスであるとします。この場合、Manager クラスのインスタンスは name、dept、reports という 3 つのプロパティをすべて持つことになります。</p> -<p>JavaScript では、原型的なオブジェクトをどのコンストラクタ関数にも結びつけることができるようにして継承を実装しています。そのため、全く同じような Employee と Manager の例を作成することができますが、使用する用語が若干異なります。まず、Employee コンストラクタ関数を定義します。これは name および dept プロパティを指定します。次に Manager コンストラクタ関数を定義します。これは reports プロパティを指定します。最後に新しい Employee オブジェクトを Manager コンストラクタ関数に対するプロトタイプとして代入します。そして新しい Manager を作成すると、このオブジェクトは Employee オブジェクトから name および dept プロパティを継承します。</p> -<h4 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E8.BF.BD.E5.8A.A0.E3.81.A8.E5.89.8A.E9.99.A4">プロパティの追加と削除</h4> -<p>クラスベース言語では一般的にクラスをコンパイル時に生成し、コンパイル時または実行時にクラスのインスタンスを作成します。クラス定義後にそのクラスのプロパティの数や型を変更することはできません。しかし、JavaScript ではどんなオブジェクトでも実行時にプロパティを追加したり削除したりすることができます。あるオブジェクトのセットでプロトタイプとして使用されているオブジェクトにプロパティを追加すると、そのプロトタイプの使用元であるオブジェクトにも新しいプロパティが追加されます。</p> -<h4 id=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81" name=".E9.81.95.E3.81.84.E3.81.AE.E6.A6.82.E8.A6.81">違いの概要</h4> -<p>次の表でこれらの違いをいくつか短くまとめてみます。この章の残りで、JavaScript のコンストラクタとプロトタイプを用いてオブジェクト階層を作成することについての詳細を説明していきます。また、この方法が Java ではどう変わるかという比較もします。</p> -<table class="fullwidth-table"> <tbody> <tr> <th>クラスベース (Java)</th> <th>プロトタイプベース (JavaScript)</th> </tr> <tr> <td>クラスとインスタンスは異なる実体である。</td> <td>すべてのオブジェクトはインスタンスである。</td> </tr> <tr> <td>クラス定義を用いてクラスを定義する。また、コンストラクタメソッドを用いてクラスをインスタンス化する。</td> <td>コンストラクタ関数を用いてオブジェクトのセットを定義し、作成する。</td> </tr> <tr> <td><code>new</code> 演算子を用いて単一のオブジェクトを作成する。</td> <td>同じ。</td> </tr> <tr> <td>既存のクラスのサブクラスを定義するクラス定義を用いてオブジェクト階層を構築する。</td> <td>コンストラクタ関数に結びつけられたプロトタイプとしてオブジェクトを代入することでオブジェクト階層を構築する。</td> </tr> <tr> <td>クラスチェーンに従ってプロパティを継承する。</td> <td>プロトタイプチェーンに従ってプロパティを継承する。</td> </tr> <tr> <td>クラス定義がクラスの全インスタンスの全プロパティを指定する。実行時に動的にプロパティを追加することはできない。</td> <td>コンストラクタ関数またはプロトタイプがプロパティの初期セットを指定する。個々のオブジェクトやオブジェクトの全体のセットに動的にプロパティを追加したり、それらからプロパティを除去したりできる。</td> </tr> </tbody> -</table> -<div class="noinclude"> -<p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Predefined_Core_Objects:String_Object", "Core_JavaScript_1.5_Guide:The_Employee_Example") }}</p> -</div> -<p>{{ languages( { "zh-tw": "zh_tw/Core_JavaScript_1.5_教學/以類別為基礎的語言_vs._以原型為基礎的語言", "en": "en/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages", "es": "es/Gu\u00eda_JavaScript_1.5/Lenguajes_basados_en_clases_frente_a_basados_en_prototipos", "fr": "fr/Guide_JavaScript_1.5/Langages_bas\u00e9s_sur_les_classes_et_langages_bas\u00e9s_sur_les_prototypes", "pl": "pl/Przewodnik_po_j\u0119zyku_JavaScript_1.5/J\u0119zyki_oparte_na_klasach_vs._oparte_na_prototypach", "zh-cn": "cn/Core_JavaScript_1.5_Guide/Class-Based_vs._Prototype-Based_Languages" } ) }}</p> diff --git a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html index 74051e9a9d..d54da1283b 100644 --- a/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html +++ b/files/ja/web/api/canvasrenderingcontext2d/setlinedash/index.html @@ -25,7 +25,7 @@ translation_of: Web/API/CanvasRenderingContext2D/setLineDash <h2 id="例">例</h2> -<h3 id="簡単な例">簡単な例</h3> +<h3 id="Basic_example">簡単な例</h3> <p>この例では、<code>setLineDash()</code>メソッドを使用して、実線の上に破線を描画します。</p> @@ -58,7 +58,7 @@ ctx.stroke(); <p>{{ EmbedLiveSample('Basic_example', 700, 180) }}</p> -<h3 id="いくつかの一般的な模様">いくつかの一般的な模様</h3> +<h3 id="Some_common_patterns">いくつかの一般的な模様</h3> <p>この例は、さまざまな一般的な破線のパターンを示しています。</p> diff --git a/files/ja/web/api/element/append/index.html b/files/ja/web/api/element/append/index.html new file mode 100644 index 0000000000..82feaa6f91 --- /dev/null +++ b/files/ja/web/api/element/append/index.html @@ -0,0 +1,100 @@ +--- +title: Element.append() +slug: Web/API/Element/append +tags: + - API + - DOM + - Method + - Node + - Element + - Reference +browser-compat: api.Element.append +translation_of: Web/API/Element/append +original_slug: Web/API/ParentNode/append +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.append()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトを <code>Element</code> のの最後の子の後に挿入します。 {{domxref("DOMString")}} オブジェクトは等価な {{domxref("Text")}} ノードとして挿入されます。</p> + +<p>{{domxref("Node.appendChild()")}} との違いは次の通りです。</p> + +<ul> + <li><code>Element.append()</code> は {{domxref("DOMString")}} も追加することができますが、<code>Node.appendChild()</code> は{{domxref("Node")}} オブジェクトのみを受け付けます。</li> + <li><code>Element.append()</code> には返値がありませんが、<code>Node.appendChild()</code> は追加された{{domxref("Node")}} オブジェクトを返します。</li> + <li><code>Element.append()</code> は複数のノードや文字列を追加することができますが、<code>Node.appendChild()</code> はノードを 1 つだけしか追加することができせん。</li> +</ul> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"> +append(...nodesOrDOMStrings) +</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodesOrDOMStrings</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の位置に挿入することができません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Appending_an_element">要素の追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +let p = document.createElement("p") +div.append(p) + +console.log(div.childNodes) // NodeList [ <p> ] +</pre> + +<h3 id="Appending_text">テキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +div.append("Some text") + +console.log(div.textContent) // "Some text"</pre> + +<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div") +let p = document.createElement("p") +div.append("Some text", p) + +console.log(div.childNodes) // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="The_append_method_is_unscopable">append メソッドはスコープが効かない</h3> + +<p><code>append()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">let div = document.createElement("div") + +with(div) { + append("foo") +} +// ReferenceError: append is not defined </pre> + + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.prepend()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Element.after()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/childelementcount/index.html b/files/ja/web/api/element/childelementcount/index.html index a06357d366..57d59747ce 100644 --- a/files/ja/web/api/element/childelementcount/index.html +++ b/files/ja/web/api/element/childelementcount/index.html @@ -1,96 +1,42 @@ --- -title: ParentNode.childElementCount +title: Element.childElementCount slug: Web/API/Element/childElementCount tags: - API - DOM - - ParentNode - Property -translation_of: Web/API/ParentNode/childElementCount + - Reference +browser-compat: api.Element.childElementCount +translation_of: Web/API/Element/childElementCount original_slug: Web/API/ParentNode/childElementCount --- <div>{{ APIRef("DOM") }}</div> -<p>読み取り専用の <code><strong>ParentNode.childElementCount</strong></code> プロパティは、与えられた要素の子要素の数を表す <code>unsigned long</code> 値を返します。</p> +<p><code><strong>Element.childElementCount</strong></code> は読み取り専用のプロパティで、この要素の子要素の数を返します。</p> -<div class="note"> -<p>このプロパティは、当初 {{domxref("ElementTraversal")}} 基本インターフェースで定義されていました。このインターフェースには 2 セットの異なるプロパティが含まれており、一つは子要素を持つ {{domxref("Node")}} を対象とし、もう一つはその子要素群を対象としたものでしたが、これらは 2 つの基本インターフェースである {{domxref("ParentNode")}} と {{domxref("ChildNode")}} に移されました。この際、<code>childElementCount</code> は {{domxref("ParentNode")}} へ移されました。これは技術的な変更であり、互換性に影響を与えるものではありません。</p> -</div> +<h2 id="Syntax">構文</h2> -<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="brush: js">element.childElementCount;</pre> -<pre class="syntaxbox notranslate">var <var>count</var> = <em>node</em>.childElementCount; -</pre> - -<dl> - <dt><code>count</code></dt> - <dd><code>unsigned long</code> 型(つまり整数型)の戻り値.</dd> - <dt><code>node</code></dt> - <dd>{{domxref("Document")}}、{{domxref("DocumentFragment")}}、 {{domxref("Element")}}を表現するオブジェクト.</dd> -</dl> - -<h2 id="例">例</h2> +<h2 id="Example">例</h2> -<pre class="brush:js notranslate">var foo = document.getElementById('foo'); -if (foo.childElementCount > 0) { +<pre class="brush:js">let sidebar = document.getElementById('sidebar'); +if (sidebar.childElementCount > 0) { // Do something } </pre> +<h2 id="Specification">仕様書</h2> +{{Specifications}} -<h2 id="IE8_IE9Safari向けの互換コード">IE8, IE9/Safari向けの互換コード</h2> - -<p>このプロパティは IE9 より前のバージョンでサポートされていません。IE9とSafariでは <code>Document</code> と <code>DocumentFragment</code> においてサポートされていません。</p> - -<pre class="brush:js notranslate">;(function(constructor) { - if (constructor && - constructor.prototype && - constructor.prototype.childElementCount == null) { - Object.defineProperty(constructor.prototype, 'childElementCount', { - get: function() { - var i = 0, count = 0, node, nodes = this.childNodes; - while (node = nodes[i++]) { - if (node.nodeType === 1) count++; - } - return count; - } - }); - } -})(window.Node || window.Element);</pre> - -<h2 id="Specification" name="Specification">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状況</th> - <th scope="col">コメント</th> - </tr> - <tr> - <td>{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}</td> - <td>{{Spec2('DOM WHATWG')}}</td> - <td><code>ElementTraversal</code> インターフェースを {{domxref("ChildNode")}} と <code>ParentNode</code> に分割。このメソッドは後者で定義されています。<br> - {{domxref("Document")}} と {{domxref("DocumentFragment")}} が新しいインターフェースを実装しました。</td> - </tr> - <tr> - <td>{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}</td> - <td>{{Spec2('Element Traversal')}}</td> - <td>この初期定義は <code>ElementTraversal</code> 基本インターフェースに追加され、{{domxref("Element")}} で使用します。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザの実装状況</h2> - - +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.ParentNode.childElementCount")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li>基本インターフェースの {{domxref("ParentNode")}} と {{domxref("ChildNode")}}</li> - <li>この基本インターフェースを実装するオブジェクト型: {{domxref("Document")}}, {{domxref("Element")}}, {{domxref("DocumentFragment")}}</li> + <li>{{domxref("Document.childElementCount")}}</li> + <li>{{domxref("DocumentFragment.childElementCount")}}</li> </ul> diff --git a/files/ja/web/api/element/children/index.html b/files/ja/web/api/element/children/index.html new file mode 100644 index 0000000000..5dd887af4f --- /dev/null +++ b/files/ja/web/api/element/children/index.html @@ -0,0 +1,58 @@ +--- +title: Element.children +slug: Web/API/Element/children +tags: + - API + - DOM + - Element + - HTMLCollection + - Property + - children +browser-compat: api.Element.children +translation_of: Web/API/Element/children +original_slug: Web/API/ParentNode/children +--- +<div>{{ APIRef("DOM") }}</div> + +<p><strong><code>children</code></strong> は読み取り専用のプロパティで、生きた {{domxref("HTMLCollection")}} で呼び出された要素の子{{domxref("Element", "要素", "", 1)}}をすべて返します。</p> + +<p><code>Element.children</code> は要素のノードしか含みません。すべての子ノード、例えばテキストやコメントノードなどを取得するには、 {{domxref("Node.childNodes")}} を使用してください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"> +// Getter +collection = myElement.children; + +// No setter; read-only property +</pre> + +<h3 id="Return_value">返値</h3> + +<p>生きた {{ domxref("HTMLCollection") }} で、 <code><var>node</var></code> の子の DOM 要素の順序付きコレクションを返します。コレクションの {{domxref("HTMLCollection.item()", "item()")}} メソッドか、 JavaScript の配列スタイルの記法を使って、コレクション内の個々の子ノードにアクセスすることができます。</p> + +<p>ノードが子要素を持たない場合、 <code>children</code> は要素を含まず、<code>length</code> は <code>0</code> です。</p> + +<h2 id="Example">例 </h2> + +<pre class="brush: js">const myElement = document.getElementById('foo'); +for (let i = 0; i < myElement.children.length; i++) { + console.log(myElement.children[i].tagName); +} +</pre> + +<h2 id="Specification">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li> + {{domxref("Node.childNodes")}} + </li> +</ul> diff --git a/files/ja/web/api/element/prepend/index.html b/files/ja/web/api/element/prepend/index.html new file mode 100644 index 0000000000..9a0a993e08 --- /dev/null +++ b/files/ja/web/api/element/prepend/index.html @@ -0,0 +1,98 @@ +--- +title: Element.prepend() +slug: Web/API/Element/prepend +tags: + - API + - DOM + - Method + - Node + - Element + - Reference + - prepend +translation_of: Web/API/Element/prepend +original_slug: Web/API/ParentNode/prepend +--- +<p>{{APIRef("DOM")}}</p> + +<p><strong><code>Element.prepend()</code></strong> メソッドは、一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトをこの {{domxref("Element")}} の最初の子の前に挿入します。 {{domxref("DOMString")}} オブジェクトは、同等の {{domxref("Text")}} ノードとして挿入されます。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js">prepend(...nodesOrDOMStrings); +</pre> + +<h3 id="Parameters">引数</h3> + +<dl> + <dt><code>nodesOrDOMStrings</code></dt> + <dd>挿入する一連の {{domxref("Node")}} または {{domxref("DOMString")}} オブジェクトです。</dd> +</dl> + +<h3 id="Return_value">返値</h3> + +<p><code>undefined</code>.</p> + +<h3 id="Exceptions">例外</h3> + +<ul> + <li>{{domxref("HierarchyRequestError")}}: ノードを階層の特定の箇所に追加することができません。</li> +</ul> + +<h2 id="Examples">例</h2> + +<h3 id="Prepending_an_element">要素の前に追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +let p = document.createElement("p"); +let span = document.createElement("span"); +div.append(p); +div.prepend(span); + +console.log(div.childNodes); // NodeList [ <span>, <p> ] +</pre> + +<h3 id="Prepending_text">テキストの前に追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +div.append("Some text"); +div.prepend("Headline: "); + +console.log(div.textContent); // "Headline: Some text"</pre> + +<h3 id="Appending_an_element_and_text">要素とテキストの追加</h3> + +<pre class="brush: js">let div = document.createElement("div"); +let p = document.createElement("p"); +div.prepend("Some text", p); + +console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]</pre> + +<h3 id="The_prepend_method_is_unscopable">prepend() メソッドはスコープが効かない</h3> + +<p><code>prepend()</code> メソッドは <code>with</code> 文の中ではスコープが効きません。詳しくは {{jsxref("Symbol.unscopables")}} をご覧ください。</p> + +<pre class="brush: js">let div = document.createElement("div"); + +with(div) { + prepend("foo"); +} +// ReferenceError: prepend is not defined </pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element.append()")}}</li> + <li>{{domxref("Node.appendChild()")}}</li> + <li>{{domxref("Node.insertBefore()")}}</li> + <li>{{domxref("Element.before()")}}</li> + <li>{{domxref("Element.insertAdjacentElement()")}}</li> + <li>{{domxref("NodeList")}}</li> +</ul> diff --git a/files/ja/web/api/element/queryselectorall/index.html b/files/ja/web/api/element/queryselectorall/index.html index ec2323fa35..08dc56b7c0 100644 --- a/files/ja/web/api/element/queryselectorall/index.html +++ b/files/ja/web/api/element/queryselectorall/index.html @@ -1,5 +1,5 @@ --- -title: element.querySelectorAll +title: Element.querySelectorAll() slug: Web/API/Element/querySelectorAll tags: - API @@ -13,59 +13,57 @@ tags: - Selecting Elements - Selectors - querySelector +browser-compat: api.Element.querySelectorAll translation_of: Web/API/Element/querySelectorAll +original_slug: Web/API/ParentNode/querySelectorAll --- <div>{{APIRef("DOM")}}</div> -<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは対象要素の子孫の内、与えられた CSS セレクターに一致する要素リストを示す静的な（生きていない） {{domxref("NodeList")}} を返します（起点となる要素は、たとえマッチしていても含まれません）。</p> +<p>{{domxref("Element")}} の <code><strong>querySelectorAll()</strong></code> メソッドは、静的な (生きていない) {{domxref("NodeList")}} で、メソッド呼び出しの時点でそのオブジェクトの子孫にあたる要素のうち、一連のセレクターに一致するもののリストを返します。</p> -<div class="note"> -<p><strong>注:</strong> このメソッドは {{domxref("ParentNode")}} ミックスインの {{domxref("ParentNode.querySelectorAll", "querySelectorAll()")}} メソッドを元に実装されています。</p> -</div> - -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); +<pre class="brush: js"><var>elementList</var> = <em>parentNode</em>.querySelectorAll(<var>selectors</var>); </pre> -<h3 id="Parameters" name="Parameters">引数</h3> +<h3 id="Parameters">引数</h3> <dl> <dt><code>selectors</code></dt> - <dd>マッチのための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}} です。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>文字列でなければならず、そうでない場合は <code>SyntaxError</code> 例外がスローされます。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> + <dd>一致させるための 1 つまたは複数のセレクターを含む {{domxref("DOMString")}}。この文字列は妥当な <a href="/ja/docs/Web/CSS/CSS_Selectors">CSS セレクター</a>でなければならず、そうでない場合は <code>SyntaxError</code> 例外が発生します。セレクターの仕様と要素の識別の詳細は、<a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a>を参照してください。複数のセレクターを指定する際は、カンマで区切ります。</dd> </dl> <div class="note"> -<p><strong>注:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は{{domxref("Document.querySelector#Escaping_special_character", "特殊文字のエスケープ", "", 1)}}を参照してください。</p> +<p><strong>メモ:</strong> 標準の CSS 構文の一部ではない文字は、バックスラッシュ文字を使ってエスケープしなければなりません。 JavaScript でもバックスラッシュによるエスケープが使われているため、これらの文字を使った文字列リテラルを記述する際は、特に注意する必要があります。詳細は {{anch("Escaping special characters")}} を参照してください。</p> </div> -<h3 id="Return_value" name="Return_value">戻り値</h3> +<h3 id="Return_value">返値</h3> -<p>指定されたセレクターのうち1つ以上にマッチする {{domxref("Element")}} オブジェクトを含んだ非ライブな {{domxref("NodeList")}} です。</p> +<p>生きていない {{domxref("NodeList")}} で、指定されたセレクターの 1 つ以上に一致する子孫ノード 1 つに対して 1 つずつの {{domxref("Element")}} を含みます。</p> <div class="note"> -<p><strong>メモ:</strong> 指定した <code>selectors</code> に<a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 疑似要素</a>が含まれている場合、返されるリストは常に空になります。</p> +<p><strong>メモ:</strong> 指定された <code>selectors</code> が <a href="/ja/docs/Web/CSS/Pseudo-elements">CSS 擬似要素</a>を含む場合、返されるリストは常に空になります。</p> </div> -<h3 id="Exceptions" name="Exceptions">例外</h3> +<h3 id="Exceptions">例外</h3> <dl> <dt><code>SyntaxError</code></dt> - <dd>指定した <code>selectors</code> の構文が妥当ではない。</dd> + <dd>指定された <code>selectors</code> の構文が妥当ではない。</dd> </dl> -<h2 id="Example" name="Example">例</h2> +<h2 id="Examples">例</h2> -<h3 id="dataset_selector_attribute_selectors" name="dataset_selector_attribute_selectors">dataset セレクターと属性セレクター</h3> +<h3 id="dataset_selector_attribute_selectors">データセットセレクターと属性セレクター</h3> -<pre class="brush: html notranslate"><section class="box" id="sect1"> +<pre class="brush: html"><section class="box" id="sect1"> <div class="funnel-chart-percent1">10.900%</div> <div class="funnel-chart-percent2">3700.00%</div> <div class="funnel-chart-percent3">0.00%</div> </section> </pre> -<pre class="brush: js notranslate">// dataset セレクター +<pre class="brush: js">// データセットセレクター const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]`)]; // 属性セレクター @@ -75,129 +73,95 @@ const refs = [...document.querySelectorAll(`[data-name*="funnel-chart-percent"]` // const refs = [...document.querySelectorAll(`[class~="funnel-chart-percent"]`)]; </pre> -<h3 id="Obtaining_a_list_of_matches" name="Obtaining_a_list_of_matches">一致のリストを入手する</h3> +<h3 id="Obtaining_a_list_of_matches">一致するもののリストの入手</h3> -<p>次の例では、<code>myBox</code> 要素の中に存在するすべての {{HTMLElement("p")}} 要素の {{domxref("NodeList")}} を取得しています。</p> -<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("p"); -</pre> +<p>{{domxref("NodeList")}} で <code>"myBox"</code> 要素の中にあるすべての {{HTMLElement("p")}} 要素を取得するには、次のようにします。</p> + +<pre class="brush: js">var matches = myBox.querySelectorAll("p");</pre> -<p>次の例では、<code>mybox</code> 内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> +<p>次の例では、文書内にある <code>note</code> または <code>alert</code> のいずれかのクラスを持つ、すべての {{HTMLElement("div")}} 要素のリストを返します。</p> -<pre class="brush: js notranslate">var matches = myBox.querySelectorAll("div.note, div.alert"); +<pre class="brush: js">var matches = myBox.querySelectorAll("div.note, div.alert"); </pre> -<p>次の例では、<code>test</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>highlighted</code> のクラスを持つ {{domxref("div")}} である <code>p</code> 要素のリストを取得します。</p> +<p>次に、 <code>"test"</code> という ID を持つコンテナー内に位置し、直接の親要素が <code>"highlighted"</code> クラスを持つ {{HTMLElement("div")}} である、<code><p></code> 要素のリストを取得します。</p> -<pre class="brush: js notranslate">var container = document.querySelector("#test"); +<pre class="brush: js">var container = document.querySelector("#test"); var matches = container.querySelectorAll("div.highlighted > p");</pre> -<p>次の例では、<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使って、文書内にある、 <code>data-src</code> 属性を持つ文書内の {{domxref("iframe")}} 要素のリストを返します。</p> +<p>次の例では<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a>を使用しており、 <code>data-src</code> という名前の属性を持つ、文書内の {{HTMLElement("iframe")}} 要素のリストを返します。</p> -<pre class="brush: js notranslate">var matches = domument.querySelectorAll("iframe[data-src]"); -</pre> +<pre class="brush: js">var matches = document.querySelectorAll("iframe[data-src]");</pre> -<p>次の例では、属性セレクターを使って、「ID が <code>userlist</code> である要素内の、<code>data-active</code> 属性を持ち、その値が <code>1</code> である要素群」のリストを返します。</p> +<p>次の例では、ID が <code>userlist</code> の要素の中にあり、<code>data-active</code> 属性を持ち、その値が <code>1</code> であるリスト項目のリストを返すため、属性セレクターが使用されています。</p> -<pre class="brush: js notranslate">var container = document.querySelector("#userlist"); +<pre class="brush: js">var container = document.querySelector("#userlist"); var matches = container.querySelectorAll("li[data-active='1']");</pre> -<h3 id="Accessing_the_matches" name="Accessing_the_matches">一致したリストへアクセスする</h3> +<h3 id="Accessing_the_matches">一致したものへのアクセス</h3> -<p>一旦、一致した要素の {{domxref("NodeList")}}} が返されると、それをちょうど配列のように試すことができます。配列が空である (<code>length</code> プロパティが 0 である) 場合は、一致がなかったということです。</p> +<p>一致した要素の {{domxref("NodeList")}} が返されると、配列と同様に調べることができます。配列が空であれば (つまり、 <code>length</code> プロパティが 0 であれば)、一致するものが見つからなかったということです。</p> -<p>それ以外の場合は、単純に標準の配列表記を使って、リストの内容にアクセスすることができます。次のように、任意の一般的なループ処理を使うことができます。</p> +<p>それ以外の場合は、標準的な配列記法でリストの内容にアクセスすることができます。次のような一般的なループ文を使用することができます。</p> -<pre class="brush: js notranslate">var highlightedItems = userList.querySelectorAll(".highlighted"); +<pre class="brush: js">var highlightedItems = userList.querySelectorAll(".highlighted"); highlightedItems.forEach(function(userItem) { deleteUser(userItem); });</pre> <div class="note"> -<p><strong>注: </strong>NodeList は純正な配列ではないので、slice, some, map などのArray メソッドを持っていません。Array.from(nodeList) を使うことで純正の配列に変換することができます。</p> + <p><strong>メモ:</strong> NodeList は、本物の配列ではありません。つまり、slice、some、map などの配列メソッドを持っていません。これを配列に変換するには、 Array.from(nodeList) のようにします。</p> </div> -<h2 id="User_notes" name="User_notes">特殊な例</h2> +<h2 id="User_notes">ユーザーのメモ</h2> -<p><code>querySelectorAll()</code> は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> +<p>querySelectorAll() は、最も一般的な JavaScript DOM ライブラリと異なる動作を持ち、意図しない結果をもたらすことがあります。</p> -<h3 id="HTML" name="HTML">HTML</h3> +<h3 id="HTML">HTML</h3> <p>次の、入れ子になった 3 つの {{HTMLElement("div")}} ブロックを持つ HTML について検討します。</p> -<pre class="brush: html notranslate"><div class="outer"> +<pre class="brush: html"><div class="outer"> <div class="select"> <div class="inner"> </div> </div> </div></pre> -<h3 id="JavaScript" name="JavaScript">JavaScript</h3> +<h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var select = document.querySelector('.select'); +<pre class="brush: js">var select = document.querySelector('.select'); var inner = select.querySelectorAll('.outer .inner'); -inner.length; // 1, not 0! +inner.length; // 1 です。0 ではありません! </pre> -<p>この例では、<code>"select"</code> class を持つ <code><div></code> の文脈で <code>".outer .inner"</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>".inner"</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> +<p>この例では、<code>select</code> class を持つ <code><div></code> の文脈で <code>.outer .inner</code> を選択するとき、<code>.outer</code> が基準となる要素（<code>.select</code> で検索される）の子孫ではないにもかかわらず、<code>.inner</code> class を持つ要素が見つけられています。<code>querySelectorAll()</code> はデフォルトでは、セレクターの最後の要素が検索スコープに含まれているかどうかのみ検証します。</p> -<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> +<p>{{cssxref(":scope")}} 擬似クラスを使うと、基準となる要素の子孫だけが一致するようになり、期待される挙動を取り戻すことができます。</p> -<pre class="brush: js notranslate">var select = document.querySelector('.select'); +<pre class="brush: js">var select = document.querySelector('.select'); var inner = select.querySelectorAll(':scope .outer .inner'); inner.length; // 0 </pre> -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">策定状況</th> - <th scope="col">コメント</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td>Living standard</td> - </tr> - <tr> - <td>{{SpecName("Selectors API Level 2", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("Selectors API Level 2")}}</td> - <td>変更なし</td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-parentnode-queryselectorall", "ParentNode.querySelectorAll()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td>初期定義</td> - </tr> - <tr> - <td>{{SpecName('Selectors API Level 1','#queryselectorall','querySelectorAll')}}</td> - <td>{{Spec2('Selectors API Level 1')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - -<div> -<p>{{Compat("api.Element.querySelectorAll")}}</p> -</div> +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の特定</a></li> - <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> - <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors">属性セレクター</a></li> - <li>{{domxref("Element.querySelector()")}}</li> - <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li> - <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> - <li>{{domxref("ParentNode.querySelector()")}} および {{domxref("ParentNode.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector" title="Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> + <li><a href="/ja/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors">セレクターを使用した DOM 要素の指定</a></li> + <li>CSS ガイドの<a href="/ja/docs/Web/CSS/Attribute_selectors">属性セレクター</a></li> + <li>MDN 学習エリアの<a href="/ja/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">属性セレクター</a></li> + <li>{{domxref("Element.querySelector()")}}</li> + <li>{{domxref("Document.querySelector()")}} および {{domxref("Document.querySelectorAll()")}}</li> + <li>{{domxref("DocumentFragment.querySelector()")}} および {{domxref("DocumentFragment.querySelectorAll()")}}</li> + <li><a href="/ja/docs/Code_snippets/QuerySelector"><code>querySelector()</code> のコードスニペット</a></li> </ul> diff --git a/files/ja/web/css/css_flow_layout/index.html b/files/ja/web/css/css_flow_layout/index.html index a16c0cbd4f..3021ce3f4a 100644 --- a/files/ja/web/css/css_flow_layout/index.html +++ b/files/ja/web/css/css_flow_layout/index.html @@ -43,7 +43,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "ブロック (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index b6a71891c9..118bc26766 100644 --- a/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -554,7 +554,7 @@ dd { <p>It may be that you come up with your own use cases for auto-placement or any other part of grid layout. If you do, raise them as issues or add to an existing issue that could solve your use case. This will help to make future versions of the specification better.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 0037394932..667917d069 100644 --- a/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -664,7 +664,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 536a0e931a..3f83a21dbd 100644 --- a/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -648,7 +648,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p><code>margin-right</code> または <code>margin-left</code> で自動マージンを使用した場合、および <code>top</code> 、<code>right</code> 、<code>bottom</code> 、<code>left</code> を使って位置を絶対指定した場合、書字方向が尊重されません。次のガイドでは、CSS グリッドレイアウト・ボックス配置と書字方向の間における相互作用を見ていきます。複数の言語で表示するサイトを開発したり、言語や書字方向を混ぜたサイトをデザインするなら、非常に役立つでしょう。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/index.html b/files/ja/web/css/css_grid_layout/index.html index 77237096cf..59e1592ef5 100644 --- a/files/ja/web/css/css_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/index.html @@ -206,7 +206,7 @@ translation_of: Web/CSS/CSS_Grid_Layout <h2 id="Subnav">Subnav</h2> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 6358de6b22..5f67402f98 100644 --- a/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ja/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -436,7 +436,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>That’s all I need. I don’t need to do any calculations, grid automatically removed my 10 pixel gutter track before assigning the space to the <code>1fr</code> column tracks. As you start to build out your own layouts, you will find that the syntax becomes more familiar and you choose the ways that work best for you and the type of projects you like to build. Try building some common patterns with these various methods, and you will soon find your most productive way to work. Then, in the next guide we will look at how grid can position items for us - without us needing to use placement properties at all!</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 2650339665..476cf929bf 100644 --- a/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ja/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -574,7 +574,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <li><a href="/ja/docs/Web/CSS/CSS_Columns">段組みレイアウトガイド</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-column-start/index.html b/files/ja/web/css/grid-column-start/index.html index 851c96552c..cf2f596e8d 100644 --- a/files/ja/web/css/grid-column-start/index.html +++ b/files/ja/web/css/grid-column-start/index.html @@ -181,7 +181,7 @@ grid-column-start: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-column/index.html b/files/ja/web/css/grid-column/index.html index 8f96c2f915..3a6f29ac1d 100644 --- a/files/ja/web/css/grid-column/index.html +++ b/files/ja/web/css/grid-column/index.html @@ -132,7 +132,7 @@ translation_of: Web/CSS/grid-column <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-row/index.html b/files/ja/web/css/grid-row/index.html index 5ec045442a..7531bbfdec 100644 --- a/files/ja/web/css/grid-row/index.html +++ b/files/ja/web/css/grid-row/index.html @@ -149,7 +149,7 @@ grid-row: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">行ベースの配置</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ja/web/css/grid-template-areas/index.html b/files/ja/web/css/grid-template-areas/index.html index ab3aa7b42a..f753d8596d 100644 --- a/files/ja/web/css/grid-template-areas/index.html +++ b/files/ja/web/css/grid-template-areas/index.html @@ -126,7 +126,7 @@ grid-template-areas: unset; <li>動画チュートリアル: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template-columns/index.html b/files/ja/web/css/grid-template-columns/index.html index 8dd5cc65cc..d0b5627b94 100644 --- a/files/ja/web/css/grid-template-columns/index.html +++ b/files/ja/web/css/grid-template-columns/index.html @@ -158,7 +158,7 @@ grid-template-columns: unset; <li><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Subgrid">Subgrid</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid-template/index.html b/files/ja/web/css/grid-template/index.html index 7108c8f12b..c80fd2a006 100644 --- a/files/ja/web/css/grid-template/index.html +++ b/files/ja/web/css/grid-template/index.html @@ -152,7 +152,7 @@ footer { <li>動画チュートリアル:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/grid/index.html b/files/ja/web/css/grid/index.html index f952fbd25d..6b5a8f0d1f 100644 --- a/files/ja/web/css/grid/index.html +++ b/files/ja/web/css/grid/index.html @@ -140,7 +140,7 @@ grid: unset; <li>グリッドレイアウトガイド: <em><a href="/ja/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">グリッドテンプレート領域 - グリッド定義の一括指定</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/minmax()/index.html b/files/ja/web/css/minmax()/index.html index 9ab7b88e97..ca68c8d134 100644 --- a/files/ja/web/css/minmax()/index.html +++ b/files/ja/web/css/minmax()/index.html @@ -156,7 +156,7 @@ minmax(auto, 300px) </li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ja/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ja/docs/Web/CSS/Reference"><strong>CSS リファレンス</strong></a></li> diff --git a/files/ja/web/css/text-decoration-color/index.html b/files/ja/web/css/text-decoration-color/index.html index 7b0322e9d0..f41da12a5c 100644 --- a/files/ja/web/css/text-decoration-color/index.html +++ b/files/ja/web/css/text-decoration-color/index.html @@ -3,14 +3,18 @@ title: text-decoration-color slug: Web/CSS/text-decoration-color tags: - CSS - - CSS テキスト - - CSS テキスト装飾 - - CSS プロパティ - - HTML スタイル - - HTML 色 + - CSS Property + - CSS Text + - CSS Text Decoration + - HTML Colors + - HTML Styles - Reference - - text-decoration-color - - 色 + - Styling HTML + - Styling text + - color + - colors + - 'recipe:css-property' +browser-compat: css.properties.text-decoration-color translation_of: Web/CSS/text-decoration-color --- <div>{{ CSSRef }}</div> @@ -21,14 +25,13 @@ translation_of: Web/CSS/text-decoration-color <div>{{EmbedInteractiveExample("pages/css/text-decoration-color.html")}}</div> -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> <p>CSS はそれぞれの線種ごとに固有の色を指定する仕組みを直接は持っていません。しかしながら、この効果は要素を入れ子にして、それぞれの要素毎に ({{cssxref("text-decoration-line")}} プロパティで) 異なる線種を適用し、 (code>text-decoration-color で) 線の色を指定することで実現できます。</p> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* <color> 値 */ -text-decoration-color: currentColor; +text-decoration-color: currentcolor; text-decoration-color: red; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); @@ -37,21 +40,40 @@ text-decoration-color: transparent; /* グローバル値 */ text-decoration-color: inherit; text-decoration-color: initial; +text-decoration-color: revert; text-decoration-color: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> - <dt>{{cssxref("<color>")}}</dt> - <dd>装飾線の色です。</dd> + <dt>{{cssxref("<color>")}}</dt> + <dd>装飾線の色です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Accessibility_concerns">アクセシビリティの考慮</h2> + +<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> + +<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> + +<ul> + <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> + <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h3 id="Formal_syntax">形式文法</h3> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> + +<h3 id="Basic_example">基本的な例</h3> <pre class="brush: html"><p>This paragraph has <s>some erroneous text</s> inside it that I want to call attention to.</p></pre> @@ -62,51 +84,22 @@ text-decoration-color: unset; } s { - text-decoration-line: <code>line-through</code>; + text-decoration-line: line-through; text-decoration-color: red; text-decoration-style: wavy; }</pre> <p>{{ EmbedLiveSample('Examples') }}</p> -<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮事項</h2> - -<p>テキストの色、テキストが置かれている背景、テキストの装飾線の間のコントラスト比が、弱視の人がページの内容を読むことができるように十分に高いことを確認ことが重要です。色のコントラスト比は、テキストと背景の色の輝度を比較して決定されます。</p> - -<p>色だけで意味を伝えるべきではありません。例えば、テキストの色と text-decoration-color の変更だけでは、リンクにフォーカスがあることを示すのに十分ではありません。</p> - -<ul> - <li><a href="https://webaim.org/resources/contrastchecker/">WebAIM: Color Contrast Checker</a></li> - <li><a href="/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li> - <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{ SpecName('CSS3 Text Decoration', '#text-decoration-color-property', 'text-decoration-color') }}</td> - <td>{{ Spec2('CSS3 Text Decoration') }}</td> - <td>初回定義。 {{cssxref("text-decoration")}} プロパティが複数の関連するプロパティを定義する一括指定になりました。</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-decoration-color")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>複数の行内装飾プロパティを一度に設定するときは、代わりに一括指定の {{cssxref("text-decoration")}} プロパティを使った方が便利かもしれません。</li> diff --git a/files/ja/web/css/text-emphasis/index.html b/files/ja/web/css/text-emphasis/index.html index 8d838fe112..6d0ae6bf2c 100644 --- a/files/ja/web/css/text-emphasis/index.html +++ b/files/ja/web/css/text-emphasis/index.html @@ -14,21 +14,28 @@ translation_of: Web/CSS/text-emphasis --- <div>{{CSSRef}}</div> -<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>text-emphasis</code></strong> プロパティは、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> +<p><strong><code>text-emphasis</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> のプロパティで、 (空白や制御文字を除く) テキストに圏点を適用します。これは {{cssxref("text-emphasis-style")}} と {{cssxref("text-emphasis-color")}} の<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p> <div>{{EmbedInteractiveExample("pages/css/text-emphasis.html")}}</div> -<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> - <p><code>text-emphasis</code> プロパティは、 {{cssxref("text-decoration")}} とは大きく異なります。 <code>text-decoration</code> プロパティは継承されず、指定される装飾は要素全体にわたって適用されます。しかし、 <code>text-emphasis</code> は継承されます。これは、子孫に対して圏点を変更できることを意味します。</p> -<p>圏点の大きさは、ルビと同様にフォントの大きさの約50%であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> +<p>圏点の大きさは、ルビと同様にフォントの大きさの約 50% であり、 <code>text-emphasis</code> は現在の行間隔が圏点を表示するのに十分でない場合、行の高さに影響を与えることがあります。</p> <div class="note"> -<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。稀にこれを必要とする場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> +<p><code>text-emphasis</code> は、 {{cssxref("text-emphasis-position")}} の値をリセットしません。これは、圏点のスタイルと色がテキストで異なる場合に、圏点の位置を要求することがほとんど見込まれないためです。これを必要とするような珍しい場合は、プロパティ {{cssxref("text-emphasis-position")}} を使用してください。</p> </div> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Constituent_properties">構成要素のプロパティ</h2> + +<p>このプロパティは以下のプロパティの一括指定です。</p> + +<ul> + <li><a href="/ja/docs/Web/CSS/text-emphasis-color"><code>text-emphasis-color</code></a></li> + <li><a href="/ja/docs/Web/CSS/text-emphasis-style"><code>text-emphasis-style</code></a></li> +</ul> + +<h2 id="Syntax">構文</h2> <pre class="brush:css no-line-numbers">/* 初期値 */ text-emphasis: none; /* 圏点なし */ @@ -38,7 +45,7 @@ text-emphasis: 'x'; text-emphasis: '点'; text-emphasis: '\25B2'; text-emphasis: '*' #555; -text-emphasis: 'foo'; /* 使用するべきではない。計算されるか 'f' のみが表示される */ +text-emphasis: 'foo'; /* 使用するべきではない。 'f' のみとして計算や表示が行われる */ /* キーワード値 */ text-emphasis: filled; @@ -52,18 +59,19 @@ text-emphasis: filled sesame #555; /* グローバル値 */ text-emphasis: inherit; text-emphasis: initial; +text-emphasis: revert; text-emphasis: unset; </pre> -<h3 id="Values" name="Values">値</h3> +<h3 id="Values">値</h3> <dl> <dt><code>none</code></dt> <dd>圏点なし。</dd> <dt><code>filled</code></dt> - <dd>図形は単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> + <dd>図形が単色で塗りつぶされます。 <code>filled</code> も <code>open</code> も指定されない場合は、これが既定値です。</dd> <dt><code>open</code></dt> - <dd>図形は中抜きになります。</dd> + <dd>図形が中抜きになります。</dd> <dt><code>dot</code></dt> <dd>記号として小さな円を表示します。 filled dot は <code>'•'</code> (<code>U+2022</code>)、 open dot は <code>'◦'</code> (<code>U+25E6</code>) です。</dd> <dt><code>circle</code></dt> @@ -75,18 +83,22 @@ text-emphasis: unset; <dt><code>sesame</code></dt> <dd>記号としてゴマを表示します。 filled sesame は <code>'﹅'</code> (<code>U+FE45</code>)、 open sesame は<code>'﹆'</code> (<code>U+FE46</code>) です。これは、他の図形が与えられていない場合、縦書きモードで既定の形状です。</dd> <dt><code><string></code></dt> - <dd>記号として文字列を表示します。 <code><string></code> には1<em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、1つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> + <dd>記号として文字列を表示します。 <code><string></code> には 1 <em>文字</em>を超える文字列を指定しないでください。ユーザーエージェントは、 1 つより多い書記素クラスターから構成される文字列を短縮したり無視したりする可能性があります。</dd> <dt><code><color></code></dt> - <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentColor</code> です。</dd> + <dd>記号の色を定義します。 color を指定しない場合、既定では <code>currentcolor</code> です。</dd> </dl> -<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> +<h2 id="Formal_definition">公式定義</h2> + +<p>{{CSSInfo}}</p> + +<h2 id="Formal_syntax">形式文法</h2> {{csssyntax}} -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> -<h3 id="A_heading_with_emphasis_shape_and_color" name="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> +<h3 id="A_heading_with_emphasis_shape_and_color">強調して色を付けた見出し</h3> <p>この例は、見出しの各文字に三角形の圏点を付けて描画します。</p> @@ -100,36 +112,19 @@ text-emphasis: unset; <pre class="brush: html"><h2>これは重要です！</h2></pre> -<h4 id="Result" name="Result">結果</h4> +<h4 id="Result">結果</h4> <p>{{EmbedLiveSample("A_heading_with_emphasis_shape_and_color", 500, 70)}}</p> -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - <th scope="col">状態</th> - <th scope="col">備考</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Text Decoration', '#text-emphasis-property', 'text-emphasis')}}</td> - <td>{{Spec2('CSS3 Text Decoration')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +<h2 id="Specifications">仕様書</h2> -<p>{{cssinfo}}</p> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("css.properties.text-emphasis")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li>個別指定プロパティ: {{cssxref('text-emphasis-style')}}, {{cssxref('text-emphasis-color')}}</li> diff --git a/files/ja/web/exslt/index.html b/files/ja/web/exslt/index.html index fde3c0c0c4..f3a787e9f5 100644 --- a/files/ja/web/exslt/index.html +++ b/files/ja/web/exslt/index.html @@ -10,7 +10,7 @@ translation_of: Web/EXSLT <p>{{XSLTRef}}</p> <div> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/XSLT">XSLT</a></strong></li> <li><strong><a href="https://developer.mozilla.org/en-US/docs/Web/EXSLT">EXSLT</a></strong></li> diff --git a/files/ja/web/mathml/element/mfenced/index.html b/files/ja/web/mathml/element/mfenced/index.html index e931d5dc22..210ce30041 100644 --- a/files/ja/web/mathml/element/mfenced/index.html +++ b/files/ja/web/mathml/element/mfenced/index.html @@ -49,7 +49,7 @@ translation_of: Web/MathML/Element/mfenced <h3 id="余分な区切り記号（）は無視される">余分な区切り記号（<code>,</code>）は無視される</h3> -<p>サンプルレンダリング: <img alt="[a|b|c|d|e]" src="https://wiki.developer.mozilla.org/files/3195/mfenced02.png"></p> +<p>サンプルレンダリング: <img alt="[a|b|c|d|e]" src="/files/3195/mfenced02.png"></p> <p>ブラウザーでのレンダリング: <math> <mfenced close="]" open="[" separators="||||,"> <mi>a</mi> <mi>b</mi> <mi>c</mi> <mi>d</mi> <mi>e</mi> </mfenced> </math></p> diff --git a/files/ja/web/svg/compatibility_sources/index.html b/files/ja/web/svg/compatibility_sources/index.html index 0b4c730fb7..f8f78b7a30 100644 --- a/files/ja/web/svg/compatibility_sources/index.html +++ b/files/ja/web/svg/compatibility_sources/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Compatibility_sources <p>以下の情報源が SVG 要素と属性の互換性の確認に活用できます。</p> <ul> - <li><a href="/ja/docs/SVG_in_Firefox">https://wiki.developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li> + <li><a href="/ja/docs/SVG_in_Firefox">https://developer.mozilla.org/ja/docs/SVG_in_Firefox</a> Firefoxに対する改編履歴あり</li> <li><a class="external" href="http://www.webkit.org/projects/svg/status.xml">http://www.webkit.org/projects/svg/status.xml</a> WebKit, Safari, Chrome 向けの<a class="external" href="http://wayback.archive.org/web/*/http://www.webkit.org/projects/svg/status.xml">記録書庫</a></li> <li>Opera 9 以降向けの追加情報は <a class="external" href="http://www.opera.com/docs/specs/opera9/svg/">http://www.opera.com/docs/specs/opera9/svg/</a> 、 Opera 8向けは <a class="external" href="http://www.opera.com/docs/specs/opera8/">http://www.opera.com/docs/specs/opera8/</a></li> <li><a class="external" href="http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx">http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx</a> IE9 向けの対応状況へのヒント</li> diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 472e365864..11da27c514 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -456,6 +456,7 @@ /ko/docs/Web/API/HTMLHyperlinkElementUtils/href /ko/docs/Web/API/HTMLAnchorElement/href /ko/docs/Web/API/HTML_드래그_앤_드롭_API /ko/docs/Web/API/HTML_Drag_and_Drop_API /ko/docs/Web/API/HTML_드래그_앤_드롭_API/Drag_operations /ko/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations +/ko/docs/Web/API/Index /ko/docs/conflicting/Web/API /ko/docs/Web/API/Navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.battery/window.navigator.battery /ko/docs/Web/API/Navigator/battery /ko/docs/Web/API/Navigator.connection/window.navigator.connection /ko/docs/Web/API/Navigator/connection diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index 9547a8024f..c666f061e0 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -5525,12 +5525,6 @@ "bsidesoft" ] }, - "Web/API/Index": { - "modified": "2019-03-06T12:18:21.576Z", - "contributors": [ - "alattalatta" - ] - }, "Web/API/IndexedDB_API": { "modified": "2020-02-21T12:46:53.785Z", "contributors": [ @@ -17539,15 +17533,9 @@ ] }, "conflicting/Web/API": { - "modified": "2019-03-23T23:30:26.179Z", + "modified": "2019-03-06T12:18:21.576Z", "contributors": [ - "wbamberg", - "fscholz", - "oohii", - "hyeonseok", - "PillarLee", - "junho85", - "francisco.jordano" + "alattalatta" ] }, "conflicting/Web/API/Document_Object_Model": { diff --git a/files/ko/web/api/index/index.html b/files/ko/conflicting/web/api/index.html index c06701815a..d74c755289 100644 --- a/files/ko/web/api/index/index.html +++ b/files/ko/conflicting/web/api/index.html @@ -1,10 +1,11 @@ --- title: Index -slug: Web/API/Index +slug: conflicting/Web/API tags: - API - Index - Landing translation_of: Web/API/Index +original_slug: Web/API/Index --- <p>{{Index("/ko/docs/Web/API")}}</p> diff --git a/files/ko/glossary/bootstrap/index.html b/files/ko/glossary/bootstrap/index.html index d2d6cff4b3..2382a0edf3 100644 --- a/files/ko/glossary/bootstrap/index.html +++ b/files/ko/glossary/bootstrap/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Bootstrap <p>Bootstrap은 당초 Twitter Blueprint라고 불렸으며, <a href="https://twitter.com/"> Twitter</a> 개발자에 의해 개발되었습니다. 반응형 디자인을 지원하며 그대로 사용하거나 필요에 따라 자신의 코드에 맞추어 사용할 수 있는 사전 정의된 디자인 템플릿이 있습니다. 부트스트랩은 모든 모던 브라우저와 {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 의 최근 버전과 호환되기 때문에 타 브라우저와의 호환성에 대해 걱정하지 않으셔도 됩니다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 의 기사 {{interwiki("wikipedia", "Bootstrap", "Bootstrap")}}</li> <li><a href="https://getbootstrap.com/">Bootstrap 다운로드</a></li> diff --git a/files/ko/glossary/browser/index.html b/files/ko/glossary/browser/index.html index 093879c392..feec75cd91 100644 --- a/files/ko/glossary/browser/index.html +++ b/files/ko/glossary/browser/index.html @@ -19,7 +19,7 @@ translation_of: Glossary/Browser <li><a href="http://www.opera.com/" rel="external">Opera Browser</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Glossary">MDN 웹 문서 용어 사전</a> diff --git a/files/ko/glossary/character_set/index.html b/files/ko/glossary/character_set/index.html index 7c6d876238..ddbeae2236 100644 --- a/files/ko/glossary/character_set/index.html +++ b/files/ko/glossary/character_set/index.html @@ -28,4 +28,4 @@ translation_of: Glossary/character_set </li> </ol> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/ko/glossary/cross_axis/index.html b/files/ko/glossary/cross_axis/index.html index 0824f20777..3b9702032c 100644 --- a/files/ko/glossary/cross_axis/index.html +++ b/files/ko/glossary/cross_axis/index.html @@ -40,7 +40,7 @@ translation_of: Glossary/Cross_Axis <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a> diff --git a/files/ko/glossary/endianness/index.html b/files/ko/glossary/endianness/index.html index 8963a4ee47..5aec7a0e0a 100644 --- a/files/ko/glossary/endianness/index.html +++ b/files/ko/glossary/endianness/index.html @@ -21,7 +21,7 @@ translation_of: Glossary/Endianness <li>혼합 엔디언(구형, 매우 드묾): <code>0x34 0x12 0x78 0x56</code></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>같이 보기 <ol> diff --git a/files/ko/glossary/flexbox/index.html b/files/ko/glossary/flexbox/index.html index 644393b94e..1d302b45af 100644 --- a/files/ko/glossary/flexbox/index.html +++ b/files/ko/glossary/flexbox/index.html @@ -48,7 +48,7 @@ translation_of: Glossary/Flexbox <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Glossary">MDN Web Docs 용어 사전</a> diff --git a/files/ko/glossary/global_object/index.html b/files/ko/glossary/global_object/index.html index f976e6b08d..3c22e644c0 100644 --- a/files/ko/glossary/global_object/index.html +++ b/files/ko/glossary/global_object/index.html @@ -54,7 +54,7 @@ window.greeting(); // It is the same as the normal invoking: greeting(); console.log("Hi!"); }</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ko/glossary/graceful_degradation/index.html b/files/ko/glossary/graceful_degradation/index.html index 31303a2431..4c3090087d 100644 --- a/files/ko/glossary/graceful_degradation/index.html +++ b/files/ko/glossary/graceful_degradation/index.html @@ -20,7 +20,7 @@ translation_of: Glossary/Graceful_degradation <li>{{Interwiki("wikipedia", "Graceful degradation")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ko/glossary/http_2/index.html b/files/ko/glossary/http_2/index.html index e873bd11c2..28035d1f1c 100644 --- a/files/ko/glossary/http_2/index.html +++ b/files/ko/glossary/http_2/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/HTTP_2 <p>HTTP/2는 HTTP의 어플리케이션 의미를 수정하지 않습니다. HTTP 메소드, 상태 코드, URI, 헤더 필드와 같은 HTTP 1.1의 핵심 개념은 그대로 유지됩니다. 대신, HTTP/2는 전체 프로세스를 관리하는 두 가지 방식, 데이터의 포맷(프레임) 방식과 클라이언트-서버 사이의 전송 방식을 수정하여 새로운 프레임 계층 내에서 어플리케이션 복잡성을 숨깁니다. 그 결과, 기존의 모든 어플리케이션은 수정 과정을 거치지 않고 전달될 수 있습니다. </p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>참고 <ol> diff --git a/files/ko/glossary/iife/index.html b/files/ko/glossary/iife/index.html index c9ccc8be4b..86c2951685 100644 --- a/files/ko/glossary/iife/index.html +++ b/files/ko/glossary/iife/index.html @@ -37,7 +37,7 @@ aName // throws "Uncaught ReferenceError: aName is not defined" // 즉시 결과를 생성한다. result; // "Barry"</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>더 알아보기 <ol> diff --git a/files/ko/glossary/index.html b/files/ko/glossary/index.html index bf00206eda..4dbd0c6429 100644 --- a/files/ko/glossary/index.html +++ b/files/ko/glossary/index.html @@ -31,7 +31,7 @@ translation_of: Glossary <div class="hidden"> <h2 id="Subnav">Subnav</h2> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a></strong>{{ListSubpagesForSidebar("/en-us/docs/Glossary", 1)}}</li> </ol> diff --git a/files/ko/glossary/method/index.html b/files/ko/glossary/method/index.html index d994f9b1ae..c83ba7d73d 100644 --- a/files/ko/glossary/method/index.html +++ b/files/ko/glossary/method/index.html @@ -24,7 +24,7 @@ translation_of: Glossary/Method <li><a href="/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ko/glossary/null/index.html b/files/ko/glossary/null/index.html index bbf1e8f80e..2ffd866dfd 100644 --- a/files/ko/glossary/null/index.html +++ b/files/ko/glossary/null/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Null <pre class="brush: js notranslate">typeof null === 'object' // true</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><strong><a href="/en-US/docs/Glossary">Glossary</a></strong> diff --git a/files/ko/glossary/primitive/index.html b/files/ko/glossary/primitive/index.html index 38f8e55645..95b13b196f 100644 --- a/files/ko/glossary/primitive/index.html +++ b/files/ko/glossary/primitive/index.html @@ -7,7 +7,7 @@ tags: - JavaScript translation_of: Glossary/Primitive --- -<p>{{Glossary("JavaScript")}}에서 <strong>원시 값</strong>(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 7종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}, 그리고 {{glossary("null")}}이 존재합니다. +<p>{{Glossary("JavaScript")}}에서 <strong>원시 값</strong>(primitive, 또는 원시 자료형)이란 {{Glossary("object", "객체")}}가 아니면서 {{glossary("method", "메서드")}}도 가지지 않는 데이터입니다. 원시 값에는 7종류, {{Glossary("string")}}, {{Glossary("number")}}, {{glossary("bigint")}}, {{Glossary("boolean")}}, {{Glossary("undefined")}}, {{Glossary("symbol")}}, 그리고 {{glossary("null")}}이 존재합니다. <p>대부분의 경우, 원시 값은 언어 구현체의 가장 저급(low level) 단계에서 나타냅니다.</p> @@ -105,7 +105,7 @@ console.log(foo); // 5 <li>위키백과 {{Interwiki("wikipedia", "원시 자료형")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Glossary">용어 사전</a> diff --git a/files/ko/glossary/semantics/index.html b/files/ko/glossary/semantics/index.html index 256defb7d1..adbd800d6d 100644 --- a/files/ko/glossary/semantics/index.html +++ b/files/ko/glossary/semantics/index.html @@ -124,7 +124,7 @@ translation_of: Glossary/Semantics <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ko/glossary/smtp/index.html b/files/ko/glossary/smtp/index.html index f38e300389..29246d4bdf 100644 --- a/files/ko/glossary/smtp/index.html +++ b/files/ko/glossary/smtp/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/SMTP <p>SMTP는 상대적으로 직관적입니다. 복잡함을 유발하는 주요 원인은 다양한 인증 방법(<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>, <a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>, MSN, AUTH LOGIN, AUTH PLAIN...) 지원, 오류 응답 처리, 인증 실패(서버에서 어떤 방법을 지원한다고 주장했으나 사실 아닐 때 등) 시 처리 등입니다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Glossary">용어 사전</a> diff --git a/files/ko/glossary/ssl/index.html b/files/ko/glossary/ssl/index.html index d522912ce3..b405fade0f 100644 --- a/files/ko/glossary/ssl/index.html +++ b/files/ko/glossary/ssl/index.html @@ -5,7 +5,7 @@ translation_of: Glossary/SSL --- <p class="seoSummary">Secure Sockets Layer(SSL)는 클라이언트와 서버 간의 안전한 링크를 통해 송수신되는 모든 데이터를 안전하게 보장하는 과거의 보안 표준 기술이었다. SSL 버전 3.0은 Netscape가 1999년에 발표했으며 현재에는 {{Glossary("TLS", "Transport Layer Security (TLS)")}} 로 대체되었다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>See also <ol> diff --git a/files/ko/glossary/tcp/index.html b/files/ko/glossary/tcp/index.html index e7d09d2492..e2a8840f19 100644 --- a/files/ko/glossary/tcp/index.html +++ b/files/ko/glossary/tcp/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/TCP <p>TCP의 역할은 에러가 없이 패킷이 신뢰할 수 있게 전달 되었는지 보증해 주는 것이다. TCP는 동시제어가 가능하다. 이는 초기 요청이 작게 시작해도 컴퓨터들과 서버들의 대역폭의 깊이가 증가해도 네트워크가 지원할 수 있다는 것을 뜻한다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">Glossary</a> diff --git a/files/ko/glossary/tls/index.html b/files/ko/glossary/tls/index.html index df1e21aad0..fade050e75 100644 --- a/files/ko/glossary/tls/index.html +++ b/files/ko/glossary/tls/index.html @@ -11,7 +11,7 @@ translation_of: Glossary/TLS <p><strong>Note</strong>: TLS 1.0 와 1.1 2020년 초부터 대부분의 브라우저에서 지원하지 않을 예정이다; 웹 브라우저가 TLS 1.2 나 TLS 1.3을 지원하는지 확인해보는 것이 좋을 것이다. Firefox는 버전 74 이후로 구 TLS 버전을 사용해서 서버에 연결을 시도할 경우 <a href="https://support.mozilla.org/en-US/kb/secure-connection-failed-firefox-did-not-connect">Secure Connection Failed</a> 에러를 반환한다. ({{bug(1606734)}}).</p> </div> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Specifications <ol> diff --git a/files/ko/glossary/user_agent/index.html b/files/ko/glossary/user_agent/index.html index dbfda1be0c..db272254e9 100644 --- a/files/ko/glossary/user_agent/index.html +++ b/files/ko/glossary/user_agent/index.html @@ -39,7 +39,7 @@ translation_of: Glossary/User_agent <li>{{RFC(2616, "14.43")}}: <code>User-Agent</code> 헤더</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Glossary">MDN 웹 문서 용어 사전</a> diff --git a/files/ko/glossary/wrapper/index.html b/files/ko/glossary/wrapper/index.html index 3c0786921b..65a6ceda46 100644 --- a/files/ko/glossary/wrapper/index.html +++ b/files/ko/glossary/wrapper/index.html @@ -13,7 +13,7 @@ translation_of: Glossary/Wrapper <p>Wikipedia의 {{Interwiki("wikipedia", "Wrapper function")}} </p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ko/learn/javascript/objects/basics/index.html b/files/ko/learn/javascript/objects/basics/index.html index a31c5ed163..258ecf7d14 100644 --- a/files/ko/learn/javascript/objects/basics/index.html +++ b/files/ko/learn/javascript/objects/basics/index.html @@ -78,10 +78,10 @@ person.interests[1] person.bio() person.greeting()</pre> -<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며 이제 멋진 간단한 구문으로 액세스 할 수 있습니다!</p> +<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며, 멋진 간단한 구문으로 액세스 할 수 있습니다!</p> <div class="note"> -<p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p> +<p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="https://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p> </div> <p>자, 이제 뭘 해볼까요? 객체는 각기 다른 이름(위의 예에서는 <code>name</code> 과 <code>age</code>)과 값(예제에서, <code>['Bob', 'Smith']</code> 과 <code>32</code>)을 갖는 복수개의 멤버로 구성됩니다. 한 쌍의 이름과 값은 ',' 로 구분되야 하고, 이름과 값은 ':' 으로 분리됩니다. 결국 문법은 아래와 같은 패턴이 됩니다.</p> @@ -263,7 +263,7 @@ var myVideo = document.querySelector('video');</pre> <p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> -<h2 id="In_this_module">이 모듈 에서는</h2> +<h2 id="In_this_module">이 과정에서는</h2> <ul> <li><a href="/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li> diff --git a/files/ko/web/accessibility/aria/index.html b/files/ko/web/accessibility/aria/index.html index c1c77f78f4..15b2741987 100644 --- a/files/ko/web/accessibility/aria/index.html +++ b/files/ko/web/accessibility/aria/index.html @@ -123,7 +123,7 @@ translation_of: Web/Accessibility/ARIA <p>{{glossary("Accessibility", "접근성")}}, {{glossary("AJAX")}}, <a href="/ko/docs/JavaScript">JavaScript</a></p> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Web/Guide">웹 개발</a></li> <li><a href="/ko/docs/Mozilla/Accessibility">접근성과 Mozilla</a></li> diff --git a/files/ko/web/css/css_flow_layout/index.html b/files/ko/web/css/css_flow_layout/index.html index 32928121ff..76314bf596 100644 --- a/files/ko/web/css/css_flow_layout/index.html +++ b/files/ko/web/css/css_flow_layout/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index ce1ce28415..e638a98944 100644 --- a/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ko/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -706,7 +706,7 @@ tags: <p>이 글에서는 Grid 레이아웃 표준 문서에 나와 있는 내용을 아주 간단히 살펴보았습니다. 코드 예제를 좀 더 연구해 보시고, <a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/그리드_레이아웃과_다른_레이아웃_방법과의_관계">안내서의 다음 부분으로 넘어가서 CSS 그리드 레이아웃의 세부 사항을 조금 더 심도 있게 살펴보시기 바랍니다</a>.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html index 10bfeb4262..4f435fb772 100644 --- a/files/ko/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/ko/web/css/css_grid_layout/grid_template_areas/index.html @@ -474,7 +474,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas <p>만약 지금까지의 초반 가이드들을 쭉 훑어보셨다면, 이제 라인을 기준으로 한 배치나 이름이 지명된 영역을 사용해서 그리드 레이아웃을 만드실 수 있는 위치까지 도달하셨습니다. 다음엔 충분한 시간을 가지고 그리드를 사용해서 몇몇 일반적인 레이아웃 패턴을 만들어 보시도록 하십시오. 앞으로 더 배워야 할 많은 새로운 기술 용어들이 있지만, 이들의 문법은 비교적 이해하기 쉬울 겁니다. 여러 예제를 다루시면서, 지금까지 다루지 않았던 것들에 대한 여러 의문점과 복잡한 사용 사례들을 마주칠 수 있을 겁니다. 이번 가이드의 나머지 부분에서는 표준 명세서에 있는 좀 더 자세한 사항들을 알아 볼 예정입니다. 그래서 앞으로 소개될 기술을 가지고 좀 더 복잡한 고급 레이아웃을 만들 수 있게 되시길 바랍니다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/css_grid_layout/index.html b/files/ko/web/css/css_grid_layout/index.html index f3d2b42199..bb81aaa02b 100644 --- a/files/ko/web/css/css_grid_layout/index.html +++ b/files/ko/web/css/css_grid_layout/index.html @@ -194,7 +194,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index bc0957fb2e..c2b23b1652 100644 --- a/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ko/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -438,7 +438,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>필요한 건 이게 전부 다입니다. 복잡한 계산 작업도 필요하지 않고, 그리드가 1fr 크기의 세로 열 트랙에 공간을 할당하기 전에, 자동으로 10픽셀 크기의 경계 여백 트랙이 차지하는 공간을 알아서 제거해 줍니다. 차차 여러분만의 레이아웃을 만들다 보면, 용법에 점점 더 익숙해 지면서 자기에게 맞는 작업 방식을 터득하게 되고, 나중에 만들고자 하는 프로젝트의 유형에 따라 적당한 것을 고를 수 있는 요령이 생기게 되실 겁니다. 우선은 지금까지 소개된 여러 방법들을 가지고 몇몇 자주 쓰이는 레이아웃의 형태들을 만들어 보신다면, 아마도 곧 가장 효율적인 자기만의 작업 방식을 찾으실 수 있을 겁니다. 그러면, 다음 가이드에선 배치 관련 프로퍼티를 전혀 쓰지 않고도 아이템들이 그리드 위에 알아서 배치되도록 만드는 방법을 알아보겠습니다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 91b32582b4..a61eee8963 100644 --- a/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ko/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -590,7 +590,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid <p>또한, 그리드에 배치된 아이템들은 원하시면 명확히 지정해서 서로 자리가 겹치게 할 수도 있다는 것을 잊지 마십시오. 이렇게 하면 특이하고 멋진 효과를 만들어 낼 수도 있습니다만, 만약에 시작 혹은 마지막 라인을 잘못 지정해 놓았다면, 의도치 않은 곳에서 서로 겹쳐 버리는 결과를 가져올 수도 있습니다. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a>는 배우시면서 매우 유용하게 사용될 수 있는데, 특히나 그리드가 상당히 복잡한 경우에는 더 그렇습니다.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 8483386140..153caa2bc5 100644 --- a/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ko/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -566,7 +566,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>이번 가이드에서 보셨듯이 CSS 그리드 레이아웃은 단지 여러분이 구현해 볼 수 있는 여러 기술 중 한 부분일 뿐입니다. 원하시는 다양한 효과를 얻기 위해서 다른 레이아웃 기술끼리 서로 혼합해서 사용하는 것을 두려워하지 마십시오.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ko/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/ko/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/grid-area/index.html b/files/ko/web/css/grid-area/index.html index 5cfc24af42..33608d6daf 100644 --- a/files/ko/web/css/grid-area/index.html +++ b/files/ko/web/css/grid-area/index.html @@ -149,7 +149,7 @@ grid-area: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/css/grid/index.html b/files/ko/web/css/grid/index.html index d40269e901..785d8f3e3b 100644 --- a/files/ko/web/css/grid/index.html +++ b/files/ko/web/css/grid/index.html @@ -135,7 +135,7 @@ grid: unset; <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ko/web/html/element/del/index.html b/files/ko/web/html/element/del/index.html index 47dd0c67da..7d973e7c33 100644 --- a/files/ko/web/html/element/del/index.html +++ b/files/ko/web/html/element/del/index.html @@ -71,8 +71,8 @@ here is the rest of the paragraph.</p> <p>대부분의 스크린 리더는 기본값에서 <code><del></code> 요소의 존재를 표현하지 않습니다. 그러나 CSS {{cssxref("content")}} 속성과 {{cssxref("::before")}}, {{cssxref("::after")}} 의사 요소를 사용하면 소리내어 읽도록 할 수 있습니다.</p> -<pre class="brush: css">ins::before, -ins::after { +<pre class="brush: css">del::before, +del::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; @@ -82,11 +82,11 @@ ins::after { width: 1px; } -ins::before { +del::before { content: " [제거 부분 시작] "; } -ins::after { +del::after { content: " [제거 부분 끝] "; }</pre> diff --git a/files/pl/glossary/accessibility_tree/index.html b/files/pl/glossary/accessibility_tree/index.html index e67c81a88e..e0d8aab2b3 100644 --- a/files/pl/glossary/accessibility_tree/index.html +++ b/files/pl/glossary/accessibility_tree/index.html @@ -28,7 +28,7 @@ translation_of: Glossary/Accessibility_tree <p>Dodatkowo, drzewo dostępności często zawiera informacje o tym co można z danym elementem, zrobić: hiperłącze można <em>kliknąć,</em> pole tekstowe <em>wypełnić</em>, itd.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">Glossary</a> diff --git a/files/pl/glossary/semantics/index.html b/files/pl/glossary/semantics/index.html index 72cd9321d4..bb0a02961d 100644 --- a/files/pl/glossary/semantics/index.html +++ b/files/pl/glossary/semantics/index.html @@ -69,7 +69,7 @@ original_slug: Glossary/Semantyka <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/pl/web/css/css_grid_layout/index.html b/files/pl/web/css/css_grid_layout/index.html index 0894a70679..933e531b6a 100644 --- a/files/pl/web/css/css_grid_layout/index.html +++ b/files/pl/web/css/css_grid_layout/index.html @@ -186,7 +186,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pl/web/css/grid/index.html b/files/pl/web/css/grid/index.html index 6829a1ea22..d213f14e80 100644 --- a/files/pl/web/css/grid/index.html +++ b/files/pl/web/css/grid/index.html @@ -143,7 +143,7 @@ grid: unset; <li>Grid Layout Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 5a35fcaf0f..daca4b07f7 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -471,6 +471,7 @@ /pt-BR/docs/Web/API/API_Web_Audio /pt-BR/docs/Web/API/Web_Audio_API /pt-BR/docs/Web/API/API_Web_Audio/Sintetizador_simples /pt-BR/docs/Web/API/Web_Audio_API/Simple_synth /pt-BR/docs/Web/API/API_de_Desempenho /pt-BR/docs/Web/API/Performance_API +/pt-BR/docs/Web/API/AnimationEvent/initAnimationEvent /pt-BR/docs/conflicting/Web/API/AnimationEvent/AnimationEvent /pt-BR/docs/Web/API/ArrayBuffer /pt-BR/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer /pt-BR/docs/Web/API/AudioContext/currentTime /pt-BR/docs/Web/API/BaseAudioContext/currentTime /pt-BR/docs/Web/API/BatteryManager.charging /pt-BR/docs/Web/API/BatteryManager/charging diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index 83b7c2febe..42e4e9b280 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -3632,13 +3632,6 @@ "takahan" ] }, - "Web/API/AnimationEvent/initAnimationEvent": { - "modified": "2019-03-23T22:45:29.493Z", - "contributors": [ - "teoli", - "takahan" - ] - }, "Web/API/AnimationEvent/pseudoElement": { "modified": "2019-03-23T22:45:35.200Z", "contributors": [ @@ -16368,6 +16361,13 @@ "RafaelGiordanno" ] }, + "conflicting/Web/API/AnimationEvent/AnimationEvent": { + "modified": "2019-03-23T22:45:29.493Z", + "contributors": [ + "teoli", + "takahan" + ] + }, "conflicting/Web/API/Crypto/getRandomValues": { "modified": "2019-03-23T22:43:17.216Z", "contributors": [ diff --git a/files/pt-br/web/api/animationevent/initanimationevent/index.html b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.html index 03ccaaa987..9227514b83 100644 --- a/files/pt-br/web/api/animationevent/initanimationevent/index.html +++ b/files/pt-br/conflicting/web/api/animationevent/animationevent/index.html @@ -1,6 +1,6 @@ --- title: AnimationEvent.initAnimationEvent() -slug: Web/API/AnimationEvent/initAnimationEvent +slug: conflicting/Web/API/AnimationEvent/AnimationEvent tags: - AnimationEvent - Apps @@ -10,6 +10,7 @@ tags: - Obsolento - Web Animations translation_of: Web/API/AnimationEvent/initAnimationEvent +original_slug: Web/API/AnimationEvent/initAnimationEvent --- <p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p> diff --git a/files/pt-br/glossary/accessibility_tree/index.html b/files/pt-br/glossary/accessibility_tree/index.html index a177742c3c..6e5eef7f72 100644 --- a/files/pt-br/glossary/accessibility_tree/index.html +++ b/files/pt-br/glossary/accessibility_tree/index.html @@ -33,7 +33,7 @@ original_slug: Glossario/arvore_de_acessibilidade -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="https://developer.mozilla.org/pt-BR/docs/Glossario">Glossário</a> diff --git a/files/pt-br/glossary/ascii/index.html b/files/pt-br/glossary/ascii/index.html index 7ad4110f05..5715661e87 100644 --- a/files/pt-br/glossary/ascii/index.html +++ b/files/pt-br/glossary/ascii/index.html @@ -10,7 +10,7 @@ tags: translation_of: Glossary/ASCII original_slug: Glossario/ASCII --- -<p>ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario/UTF-8">UTF-8</a> substituiu-o na web.</p> +<p>ASCII (Código Padrão Americano para o Intercâmbio de Informação) é um dos mais populares métodos de codificação usado por computadores para converter letras, números, pontuações e códigos de controle dentro do formato digital. Desde 2007, <a href="/pt-BR/docs/Glossario/UTF-8">UTF-8</a> substituiu-o na web.</p> <h2 id="Aprenda_mais">Aprenda mais</h2> diff --git a/files/pt-br/glossary/call_stack/index.html b/files/pt-br/glossary/call_stack/index.html index 772871f93d..fb6a3f1290 100644 --- a/files/pt-br/glossary/call_stack/index.html +++ b/files/pt-br/glossary/call_stack/index.html @@ -76,7 +76,7 @@ saudacao(); <li>{{Interwiki("wikipedia", "Call stack")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/pt-br/glossary/character_encoding/index.html b/files/pt-br/glossary/character_encoding/index.html index bc14288cbf..8fc5c0e4ef 100644 --- a/files/pt-br/glossary/character_encoding/index.html +++ b/files/pt-br/glossary/character_encoding/index.html @@ -4,7 +4,7 @@ slug: Glossary/character_encoding translation_of: Glossary/character_encoding original_slug: Glossario/character_encoding --- -<p>Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario/UTF-8">UTF-8</a>), especificamos como a sequência de bytes deve ser interpretada.</p> +<p>Uma codificação define um mapeamento entre bytes e texto. Uma sequência de bytes permite diferentes interpretações textuais. Ao especificar uma codificação específica (como <a href="/pt-BR/docs/Glossario/UTF-8">UTF-8</a>), especificamos como a sequência de bytes deve ser interpretada.</p> <p>Por exemplo, em HTML, normalmente declaramos uma codificação de caracteres UTF-8, usando a seguinte linha:</p> diff --git a/files/pt-br/glossary/css_preprocessor/index.html b/files/pt-br/glossary/css_preprocessor/index.html index 2663a70f15..9b2c1a969b 100644 --- a/files/pt-br/glossary/css_preprocessor/index.html +++ b/files/pt-br/glossary/css_preprocessor/index.html @@ -11,7 +11,7 @@ original_slug: Glossario/CSS_preprocessor <p>Para usar um pré-processador, você deve instalar um compilador CSS no seu servidor web; Ou usar o pré-processador CSS para compilar no ambiente de desenvolvimento, e então fazer upload do arquivo CSS compilado para o servidor web.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Alguns dos pré-processadores CSS mais populares: <ol> diff --git a/files/pt-br/glossary/graceful_degradation/index.html b/files/pt-br/glossary/graceful_degradation/index.html index ec0a588454..482e8f9e3d 100644 --- a/files/pt-br/glossary/graceful_degradation/index.html +++ b/files/pt-br/glossary/graceful_degradation/index.html @@ -11,7 +11,7 @@ original_slug: Glossario/degradação_graciosa <p>É uma técnica útil que permite aos desenvolvedores da Web se concentrarem no desenvolvimento dos melhores sites possíveis, uma vez que esses sites são acessados por vários user-agents desconhecidos.<br> {{Glossary("Progressive enhancement")}} está relacionado, mas é diferente - geralmente visto como na direção oposta à degradação graciosa. Na realidade, ambas as abordagens são válidas e geralmente podem se complementar.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{Interwiki("wikipedia", "Graceful degradation")}} on Wikipedia</li> <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li> diff --git a/files/pt-br/glossary/grid/index.html b/files/pt-br/glossary/grid/index.html index a34050d2e4..0271c8c497 100644 --- a/files/pt-br/glossary/grid/index.html +++ b/files/pt-br/glossary/grid/index.html @@ -54,7 +54,7 @@ original_slug: Glossario/Grade <p>{{ EmbedLiveSample('example', '500', '330') }}</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>CSS Grid Layout Guide:<br> <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout">Basic concepts of grid layout</a></em></li> diff --git a/files/pt-br/glossary/http_header/index.html b/files/pt-br/glossary/http_header/index.html index ba2fc63046..69d7d28678 100644 --- a/files/pt-br/glossary/http_header/index.html +++ b/files/pt-br/glossary/http_header/index.html @@ -51,7 +51,7 @@ X-Cache: Hit from cloudfront X-Cache-Info: cached </pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Especificações <ol> diff --git a/files/pt-br/glossary/preflight_request/index.html b/files/pt-br/glossary/preflight_request/index.html index 2d9717b2ce..c790be6a56 100644 --- a/files/pt-br/glossary/preflight_request/index.html +++ b/files/pt-br/glossary/preflight_request/index.html @@ -10,11 +10,11 @@ tags: translation_of: Glossary/Preflight_request original_slug: Glossario/Preflight_request --- -<p>Uma requisição <em>preflight</em> de <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/CORS">CORS</a> é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.</p> +<p>Uma requisição <em>preflight</em> de <a href="/en-US/docs/Glossary/CORS">CORS</a> é uma requisição de {{Glossary ("CORS")}} que verifica se o protocolo {{Glossary ("CORS")}} é entendido e se o servidor aguarda o método e cabeçalhos('headers') especificados.</p> <p>É uma requisição {{HTTPMethod("OPTIONS")}}, que usa três cabeçalhos de solicitação HTTP: {{HTTPHeader("Access-Control-Request-Method")}}, {{HTTPHeader("Access-Control-Request-Headers")}}, e o cabeçalho {{HTTPHeader("Origin")}}.</p> -<p>Uma requisição <em>preflight</em> é emitida automaticamente por um navegador, quando necessário. Geralmente, os desenvolvedores front-end não precisam criar essas solicitações. Ela acontece quando a requisição é qualificada <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Preflighted_requests">"para ser preflighted"</a> e omitida para <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests">requisições simples</a>.</p> +<p>Uma requisição <em>preflight</em> é emitida automaticamente por um navegador, quando necessário. Geralmente, os desenvolvedores front-end não precisam criar essas solicitações. Ela acontece quando a requisição é qualificada <a href="/en-US/docs/Web/HTTP/CORS#Preflighted_requests">"para ser preflighted"</a> e omitida para <a href="/en-US/docs/Web/HTTP/CORS#Simple_requests">requisições simples</a>.</p> <p>Por exemplo, o cliente pode perguntar ao servidor se este permitiria uma requisição {{HTTPMethod ("DELETE")}}, antes de enviá-la, usando uma requisição <em>preflight</em>:</p> @@ -31,7 +31,7 @@ Access-Control-Allow-Origin: https://foo.bar.org Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE Access-Control-Max-Age: 86400</pre> -<p>A resposta da requisição <em>preflight </em>pode ser opcionalmente cacheada para requisições realizadas na mesma url usando o cabeçalho <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">Access-Control-Max-Age</a> como no exemplo acima.</p> +<p>A resposta da requisição <em>preflight </em>pode ser opcionalmente cacheada para requisições realizadas na mesma url usando o cabeçalho <a href="/en-US/docs/Web/HTTP/Headers/Access-Control-Max-Age">Access-Control-Max-Age</a> como no exemplo acima.</p> <h2 id="Veja_também">Veja também</h2> diff --git a/files/pt-br/glossary/proxy_server/index.html b/files/pt-br/glossary/proxy_server/index.html index 7b5d1e09f9..f8c13289a1 100644 --- a/files/pt-br/glossary/proxy_server/index.html +++ b/files/pt-br/glossary/proxy_server/index.html @@ -16,6 +16,6 @@ original_slug: Glossario/Proxy_server <h2 id="Aprenda_Mais">Aprenda Mais</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/pt-PT/docs/Web/HTTP/Proxy_servers_and_tunneling">Servidores proxy e túneis</a></li> + <li><a href="/pt-PT/docs/Web/HTTP/Proxy_servers_and_tunneling">Servidores proxy e túneis</a></li> <li><a href="https://pt.wikipedia.org/wiki/Proxy">Proxy</a> em Wikipedia</li> </ul> diff --git a/files/pt-br/glossary/semantics/index.html b/files/pt-br/glossary/semantics/index.html index c22d183b04..66c4e5aeb2 100644 --- a/files/pt-br/glossary/semantics/index.html +++ b/files/pt-br/glossary/semantics/index.html @@ -75,7 +75,7 @@ original_slug: Glossario/Semantica <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/pt-br/glossary/utf-8/index.html b/files/pt-br/glossary/utf-8/index.html index bf2330c204..90001abd27 100644 --- a/files/pt-br/glossary/utf-8/index.html +++ b/files/pt-br/glossary/utf-8/index.html @@ -4,7 +4,7 @@ slug: Glossary/UTF-8 translation_of: Glossary/UTF-8 original_slug: Glossario/UTF-8 --- -<p>UTF-8 (UCS Transformation Format 8) é a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario/character_encoding">codificação de caracteres</a> mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/ASCII">ASCII</a> e pode representar qualquer caractere Unicode padrão.</p> +<p>UTF-8 (UCS Transformation Format 8) é a <a href="/pt-BR/docs/Glossario/character_encoding">codificação de caracteres</a> mais comum da World Wide Web. Cada caractere é representado por um a quatro bytes. UTF-8 é compatível com versões anteriores do <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/ASCII">ASCII</a> e pode representar qualquer caractere Unicode padrão.</p> <p>Os primeiros 128 caracteres UTF-8 correspondem exatamente aos primeiros 128 caracteres ASCII (numerados de 0 a 127), o que significa que o texto ASCII existente já é UTF-8 válido. Todos os outros caracteres usam dois a quatro bytes. Cada byte tem alguns bits reservados para fins de codificação. Como caracteres não ASCII requerem mais de um byte para armazenamento, eles correm o risco de serem corrompidos se os bytes forem separados e não forem recombinados.</p> diff --git a/files/pt-br/glossary/viewport/index.html b/files/pt-br/glossary/viewport/index.html index 0d7ffbc9e8..f76c16f0f3 100644 --- a/files/pt-br/glossary/viewport/index.html +++ b/files/pt-br/glossary/viewport/index.html @@ -13,7 +13,7 @@ original_slug: Glossario/Viewport <p>A porção da viewport que está visível no momento é chamada de <strong>visual viewport</strong> . Esta pode ser menor que a viewport de layout, assim é quando o usuário efetua uma pinçada/zoom. O <strong> viewport</strong> <strong>de</strong> <strong>layout</strong> permanece o mesmo, mas a visual viewport se torna menor.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Conhecimentos gerais <ol> diff --git a/files/pt-br/learn/accessibility/index.html b/files/pt-br/learn/accessibility/index.html index 0c34fc5f4c..774cb527e9 100644 --- a/files/pt-br/learn/accessibility/index.html +++ b/files/pt-br/learn/accessibility/index.html @@ -19,7 +19,7 @@ translation_of: Learn/Accessibility --- <div>{{LearnSidebar}}</div> -<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p> +<p class="summary">Aprender HTML, CSS e Javascript é útil se você quer se tornar um desenvolvedor web, mas seu conhecimento precisa ir além. Você deve usá-las de forma a maximizar a audiencia dos seus sites, e permitir que todos possam acessar o conteúdo. Para conseguir isso, será necessário seguir boas práticas, realizar testes em vários navegadores (<a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">cross browser testing</a>) e pensar em acessibilidade desde o início do desenvolvimento. Este módulo abordará a acessibilidade em detalhes.</p> <h2 id="Visão_geral">Visão geral</h2> @@ -39,7 +39,7 @@ translation_of: Learn/Accessibility <h2 id="Prerequisitos">Prerequisitos</h2> -<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p> +<p>Para ter o máximo proveito deste módulo, recomendamos que esteja familiarizados com pelos os dois primeiros módulos de <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, e <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, ou melhor ainda, com as partes principais do módulo de acessibilidade de cada capítulo, à medida em que vai estudando.</p> <div class="note"> <p><strong>Nota</strong>: Se você está estudando em um dispositivo que não pode criar novos arquivos, voce pode testar os exemplos em alguma aplicação de codificação online, como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> diff --git a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html index bd6ddd381b..de86333e93 100644 --- a/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html +++ b/files/pt-br/learn/getting_started_with_the_web/html_basics/index.html @@ -149,7 +149,7 @@ original_slug: Aprender/Getting_started_with_the_web/HTML_basico <p>Agora, tente adicionar um título adequado à sua página HTML logo acima do elemento {{htmlelement("img")}}.</p> <div class="blockIndicator note"> -<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p> +<p><strong>Nota</strong>: Você verá que seu nível de cabeçalho 1 tem um estilo implícito. Não use elementos de cabeçalho para aumentar ou negritar o texto, pois eles são usados para <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">acessibilidade</a> e <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">outros motivos, como SEO</a>. Tente criar uma sequência significativa de títulos em suas páginas, sem pular os níveis.</p> </div> <h3 id="Parágrafo">Parágrafo</h3> diff --git a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html index 68b897a9a6..5bd53a3318 100644 --- a/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/pt-br/learn/getting_started_with_the_web/javascript_basics/index.html @@ -101,7 +101,7 @@ meuCabecalho.textContent = 'Ola mundo!';</pre> </div> <div class="note"> -<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p> +<p><strong>Nota</strong>: Para mais detalhes sobre a diferença entre <code>var</code> e <code>let</code>, veja<a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#The_difference_between_var_and_let"> A diferença entre var e let</a>.</p> </div> <p>Depois de declarar uma variável, você pode dar a ela um valor:</p> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html index ae9111133f..7b16c8b0a2 100644 --- a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -119,7 +119,7 @@ original_slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content <p>Cada elemento <code><source></code> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.</p> <div class="note"> -<p><strong>Nota</strong>: Consulte o nosso <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p> +<p><strong>Nota</strong>: Consulte o nosso <a href="/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p> </div> <h3 id="Outros_recursos_de_<video>">Outros recursos de <video></h3> @@ -220,7 +220,7 @@ mediaElem.audioTracks.onaddtrack = function(event) { <li>Da mesma forma, em ambientes em que a reprodução do áudio seria uma distração ou perturbação (como em uma biblioteca ou quando um parceiro está tentando dormir), ter legendas pode ser muito útil.</li> </ul> -<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p> +<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p> <div class="note"> <p><strong>Nota</strong>: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".</p> @@ -271,7 +271,7 @@ This is the second. <p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> -<p>Para mais detalhes, leia <a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p> +<p>Para mais detalhes, leia <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p> <div class="note"> <p><strong>Nota</strong>: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.</p> @@ -303,11 +303,11 @@ This is the second. <ul> <li>Os elementos de mídia HTML: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, {{htmlelement("track")}}.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li> + <li><a href="/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li> + <li><a href="/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li> + <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li> + <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li> <li>Opções automatizadas para <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduzir multimídia.</a></li> </ul> diff --git a/files/pt-br/learn/index.html b/files/pt-br/learn/index.html index 9c76dd4242..954b677386 100644 --- a/files/pt-br/learn/index.html +++ b/files/pt-br/learn/index.html @@ -37,7 +37,7 @@ original_slug: Aprender </ul> <div class="note"> -<p><strong>Nota</strong>: Nosso <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p> +<p><strong>Nota</strong>: Nosso <a href="/pt-BR/docs/Glossario">glossário</a> fornece definições de terminologia.</p> </div> <p>{{LearnBox({"title":"Entrada aleatória do glossário"})}}</p> diff --git a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html index 6f110ad3e0..189781c609 100644 --- a/files/pt-br/learn/javascript/building_blocks/conditionals/index.html +++ b/files/pt-br/learn/javascript/building_blocks/conditionals/index.html @@ -612,6 +612,6 @@ window.addEventListener('load', updateCode); <h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2> -<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p> +<p>Você chegou ao final deste artigo, mas você consegue se lembrar das informações mais importantes? Você pode encontrar mais alguns testes para verificar se reteve essas informações antes de prosseguir — Veja <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Conditionals">Teste suas habilidades: Condicionais</a>.</p> <p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p> diff --git a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html index ad934caa43..4197b0aa26 100644 --- a/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html +++ b/files/pt-br/learn/javascript/client-side_web_apis/client-side_storage/index.html @@ -14,7 +14,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage <tbody> <tr> <th scope="row">Pré-requisitos:</th> - <td>Noções básicas de JavaScript (consulte as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td> + <td>Noções básicas de JavaScript (consulte as <a href="/en-US/docs/Learn/JavaScript/First_steps">primeiras etapas </a><a href="/en-US/docs/Learn/JavaScript/First_steps"> </a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">blocos de construção</a> , <a href="/en-US/docs/Learn/JavaScript/Objects">objetos JavaScript</a> ), as <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">noções básicas de APIs do lado do cliente</a></td> </tr> <tr> <th scope="row">Objetivo:</th> @@ -25,7 +25,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage <h2 id="Armazenamento_do_lado_do_cliente">Armazenamento do lado do cliente?</h2> -<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p> +<p>Em outro lugar na área de aprendizagem MDN, falamos sobre a diferença entre <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">sites estáticos</a> e <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">sites dinâmicos</a> . A maioria dos principais sites modernos são dinâmicos - eles armazenam dados no servidor usando algum tipo de banco de dados (armazenamento do lado do servidor) e, em seguida, executam o código do <a href="/en-US/docs/Learn/Server-side">lado do servidor</a> para recuperar os dados necessários, inserem-nos em modelos de página estática e fornecem o HTML resultante para o cliente a ser exibido pelo navegador do usuário.er.</p> <p>O armazenamento do lado do cliente funciona em princípios semelhantes, mas tem usos diferentes. Consiste em APIs JavaScript que permitem armazenar dados no cliente (ou seja, na máquina do usuário) e recuperá-los quando necessário. Isso tem muitos usos distintos, como:</p> @@ -39,7 +39,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs/Client-side_storage <p>Freqüentemente, o armazenamento do lado do cliente e do lado do servidor são usados juntos. Por exemplo, você pode baixar um lote de arquivos de música (talvez usados por um jogo da web ou aplicativo de reprodutor de música), armazená-los em um banco de dados do cliente e reproduzi-los conforme necessário. O usuário só teria que baixar os arquivos de música uma vez - em visitas subsequentes, eles seriam recuperados do banco de dados.</p> <div class="note"> -<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p> +<p><strong>Nota</strong> : Existem limites para a quantidade de dados que você pode armazenar usando APIs de armazenamento do lado do cliente (possivelmente por API individual e cumulativamente); o limite exato varia dependendo do navegador e, possivelmente, com base nas configurações do usuário. Consulte <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Limites de armazenamento do navegador e critérios de despejo</a> para obter mais informações..</p> </div> <h3 id="Old_school_Cookies">Old school: Cookies</h3> diff --git a/files/pt-br/learn/javascript/client-side_web_apis/index.html b/files/pt-br/learn/javascript/client-side_web_apis/index.html index cb2fe46cd9..854ecb4ff7 100644 --- a/files/pt-br/learn/javascript/client-side_web_apis/index.html +++ b/files/pt-br/learn/javascript/client-side_web_apis/index.html @@ -32,7 +32,7 @@ original_slug: Aprender/JavaScript/Client-side_web_APIs <h2 id="Guias">Guias</h2> <dl> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introdução a APIs para a web</a></dt> <dd>Primeiro, vamos começar com apis de alto nível — o que elas são, como elas funcionam, quando usar no seu código, como elas são estruturadas? Nós veremos diferentes tipos de classses principais e o que elas são, e quais são as possibilidades de uso.</dd> <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulando documentos</a></dt> <dd>Quando estiver codificando páginas da web ou aplicações, uma das coisas mais comuns que você irá fazer será manipular documentos da web de alguma forma. Normalmente isso é feito usando o Document Object Model (DOM), um conjunto de APIs para controlar o HTML e a informação sobre os estilos que usa fortemente o objeto {{domxref("Document")}}. Neste artigo vamos ver como usar o DOM em detalhes, juntamente com outras APIs interessantes que podem alterar seu ambiente de desenvolvimento de modos interessantes.</dd> diff --git a/files/pt-br/learn/javascript/first_steps/variables/index.html b/files/pt-br/learn/javascript/first_steps/variables/index.html index 88b45eaf8f..73cef40bcd 100644 --- a/files/pt-br/learn/javascript/first_steps/variables/index.html +++ b/files/pt-br/learn/javascript/first_steps/variables/index.html @@ -310,7 +310,7 @@ const horasNoDia = 24;</span></span></span></span></pre> <h2 id="Teste_suas_habilidades!">Teste suas habilidades!</h2> -<p>Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja <a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis">Teste suas habilidades: variáveis</a>.</p> +<p>Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes? Você pode encontrar alguns testes adicionais para verificar se você reteve essas informações antes de prosseguir — veja <a href="/pt-BR/docs/Learn/JavaScript/First_steps/Teste_suas_habilidades:_variaveis">Teste suas habilidades: variáveis</a>.</p> <h2 id="Sumário">Sumário</h2> @@ -321,13 +321,13 @@ const horasNoDia = 24;</span></span></span></span></pre> <h2 id="Neste_módulo">Neste módulo</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é JavaScript?</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/What_went_wrong">O que deu errado? Resolvendo problemas no JavaScript</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Vari%C3%A1veis">Armazenando as informações que você precisa — Variáveis</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Matematica">Matemática básica no JavaScript — números e operadores</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Strings">Trabalhando com textos — strings em JavaScript</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> - <li><a href="https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas">Avaliação: Gerador de histórias bobas</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/O_que_e_JavaScript">O que é JavaScript?</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/A_first_splash">Um primeiro mergulho no JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/What_went_wrong">O que deu errado? Resolvendo problemas no JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Vari%C3%A1veis">Armazenando as informações que você precisa — Variáveis</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Matematica">Matemática básica no JavaScript — números e operadores</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Strings">Trabalhando com textos — strings em JavaScript</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Useful_string_methods">Métodos úteis de string</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/pt-BR/docs/Learn/JavaScript/First_steps/Gerador_de_historias_bobas">Avaliação: Gerador de histórias bobas</a></li> </ul> diff --git a/files/pt-br/learn/javascript/index.html b/files/pt-br/learn/javascript/index.html index 2d0226b691..9a3f199b62 100644 --- a/files/pt-br/learn/javascript/index.html +++ b/files/pt-br/learn/javascript/index.html @@ -41,15 +41,15 @@ original_slug: Aprender/JavaScript <p>Este tópico contém os seguintes módulos, em uma ordem que sugerimos para estudá-los.</p> <dl> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt> + <dt><a href="/pt-BR/docs/Learn/JavaScript/First_steps">Primeiros passos em JavaScript</a></dt> <dd>Em nosso primeiro módulo JavaScript, primeiro responderemos algumas questões fundamentais como "o que é JavaScript?", "Como ele se parece?" E "o que ele pode fazer?", antes de passar para sua primeira experiência prática de escrever JavaScript. Depois disso, discutimos alguns recursos chave do JavaScript em detalhes, como variáveis, cadeias de caracteres, números e matrizes.</dd> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt> + <dt><a href="/pt-BR/docs/Aprender/JavaScript/Elementos_construtivos">Blocos de codigo JavaScript</a></dt> <dd>Neste módulo, continuaremos a falar sobre os principais recursos fundamentais do JavaScript, voltando nossa atenção para os tipos mais comuns de blocos de código<strong>,</strong> como instruções condicionais, funções e eventos. Você já viu essas coisas no curso, mas apenas de passagem, aqui discutiremos tudo explicitamente.</dd> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt> + <dt><a href="/pt-BR/docs/Aprender/JavaScript/Objetos">Introdução a objetos em JavaScript</a></dt> <dd>Em JavaScript, a maioria das coisas são objetos, desde seus principais recursos até as APIs do navegador. Você pode até criar seus próprios objetos.É importante entender a natureza orientada a objetos do JavaScript se você quiser ir mais longe com seu conhecimento da linguagem e escrever um código mais eficiente, portanto, fornecemos este módulo para ajudá-lo. Aqui ensinamos a teoria e a sintaxe de objetos em detalhes, observamos como criar seus próprios objetos e explicamos quais são os dados JSON e como trabalhar com eles.</dd> - <dt><strong><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt> + <dt><strong><a href="/pt-BR/docs/Learn/JavaScript/Asynchronous">JavaScript Assíncrono</a></strong></dt> <dd>Neste módulo, examinamos o JavaScript assíncrono, por que é importante e como ele pode ser usado para lidar efetivamente com possíveis operações de bloqueio, como a busca de recursos de um servidor.</dd> - <dt><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt> + <dt><a href="/pt-BR/docs/Aprender/JavaScript/Client-side_web_APIs">API's Web do lado cliente</a></dt> <dd>Ao escrever JavaScript para sites ou aplicativos da Web, você não vai muito longe antes de começar a usar APIs - interfaces para manipular diferentes aspectos do navegador e do sistema operacional em que o site está sendo executado, ou até dados de outros sites ou serviços. Neste módulo, vamos explorar o que são as APIs e como usar algumas das APIs mais comuns que você encontrará com frequência em seu trabalho de desenvolvimento.</dd> </dl> diff --git a/files/pt-br/learn/javascript/objects/basics/index.html b/files/pt-br/learn/javascript/objects/basics/index.html index 340fc9dd82..ab5da689b9 100644 --- a/files/pt-br/learn/javascript/objects/basics/index.html +++ b/files/pt-br/learn/javascript/objects/basics/index.html @@ -236,7 +236,7 @@ var meuVideo = document.querySelector('video');</pre> <h2 id="Teste_suas_habilidades_!">Teste suas habilidades !</h2> -<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> +<p>Você chegou ao fim desse artigo,entretanto você consegue lembrar as informações mais importantes? Você pode encontrar mais testes para verificar se você consolidou as informações antes que você siga adiante — veja <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">Test your skills: Object basics</a>.</p> <h2 id="Resumo">Resumo</h2> diff --git a/files/pt-br/learn/javascript/objects/json/index.html b/files/pt-br/learn/javascript/objects/json/index.html index 3f28b6d5ab..2db3354e1a 100644 --- a/files/pt-br/learn/javascript/objects/json/index.html +++ b/files/pt-br/learn/javascript/objects/json/index.html @@ -19,7 +19,7 @@ original_slug: Aprender/JavaScript/Objetos/JSON <tr> <th scope="row">Pré-requisitos</th> <td> - <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p> + <p>Conhecimento básico em informática, conhecimento básico de HTML e CSS, conhecimento básico de JavaScript veja <a href="/en-US/docs/Learn/JavaScript/First_steps">Primeiros passos</a> e <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Construindo blocos</a>) e o básico de OOJS (veja <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introdução a objetos</a>).</p> </td> </tr> <tr> diff --git a/files/pt-br/learn/server-side/django/deployment/index.html b/files/pt-br/learn/server-side/django/deployment/index.html index 1c4b766923..4ab5fde0b2 100644 --- a/files/pt-br/learn/server-side/django/deployment/index.html +++ b/files/pt-br/learn/server-side/django/deployment/index.html @@ -108,7 +108,7 @@ original_slug: Learn/Server-side/Django/Hospedagem <h2 id="Preparando_seu_site_para_publicação">Preparando seu site para publicação</h2> -<p>O <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto do site do Django</a> criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.</p> +<p>O <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">esqueleto do site do Django</a> criado usando as ferramentas django-admin e manage.py é configurado para tornar o desenvolvimento mais fácil. Muitas das configurações do projeto Django (especificadas em settings.py) devem ser diferentes para produção, por motivos de segurança ou desempenho.</p> <div class="note"> <p><strong>Dica:</strong> É comum ter um arquivo <strong>settings.py</strong> separado para produção e importar configurações confidenciais de um arquivo separado ou de uma variável de ambiente. Este arquivo deve ser protegido, mesmo se o resto do código-fonte estiver disponível em um repositório público.</p> diff --git a/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html b/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html index 57dd82946d..7cf8e52177 100644 --- a/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html +++ b/files/pt-br/learn/server-side/first_steps/client-server_overview/index.html @@ -34,7 +34,7 @@ translation_of: Learn/Server-side/First_steps/Client-Server_overview <h2 id="Web_servers_e_HTTP_uma_introdução">Web servers e HTTP (uma introdução)</h2> -<p>Navegadores Web se comunicam com <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores Web</a> usando o <strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a>). Quando você clica em um link em uma página web, envia um formulário, ou faz uma pesquisa, o browser envia uma Requisição HTTP para o servidor.</p> +<p>Navegadores Web se comunicam com <a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">servidores Web</a> usando o <strong>H</strong>yper<strong>T</strong>ext<strong>T</strong>ransfer <strong>P</strong>rotocol (<a href="/en-US/docs/Web/HTTP">HTTP</a>). Quando você clica em um link em uma página web, envia um formulário, ou faz uma pesquisa, o browser envia uma Requisição HTTP para o servidor.</p> <p>A requisição inclui:</p> diff --git a/files/pt-br/learn/server-side/first_steps/website_security/index.html b/files/pt-br/learn/server-side/first_steps/website_security/index.html index e32ac4fa3b..2873b597ca 100644 --- a/files/pt-br/learn/server-side/first_steps/website_security/index.html +++ b/files/pt-br/learn/server-side/first_steps/website_security/index.html @@ -162,7 +162,7 @@ original_slug: Learn/Server-side/First_steps/Seguranca_site <p>Este artigo explicou o conceito de segurança na web e algumas das ameaças mais comuns contra as quais o site deve tentar se proteger. Mais importante, você deve entender que uma aplicação web não pode confiar em nenhum dado do navegador. Todos os dados do usuário devem ser limpos antes de serem exibidos ou usados em consultas SQL e chamadas do sistema de arquivos.</p> -<p>Com este artigo, você chegou ao final <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Learn/Server-side/First_steps">deste módulo</a>, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um <em>Framework web</em> e iniciar a programação.</p> +<p>Com este artigo, você chegou ao final <a href="/pt-BR/docs/Learn/Server-side/First_steps">deste módulo</a>, abordando seus primeiros passos na programação de sites em relação ao servidor. Esperamos que você tenha gostado de aprender esses conceitos fundamentais e agora esteja pronto para selecionar um <em>Framework web</em> e iniciar a programação.</p> <p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p> diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html index ba7a1cba3e..d5a2cc7b07 100644 --- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html +++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/index.html @@ -28,7 +28,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks <p class="summary">Depois disso, forneceremos alguns tutoriais que abordam os fundamentos de alguns dos principais frameworks, que fornecem contexto e familiaridade suficientes para começar a se aprofundar mais. Queremos que avance e aprenda sobre estruturas de uma maneira pragmática que não se esqueça das melhores práticas fundamentais da plataforma da web, como acessibilidade.</p> -<p class="summary"><strong><a href="https://wiki.developer.mozilla.org/pr-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p> +<p class="summary"><strong><a href="/pt-BR/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Comece agora, com "Introdução às estruturas do lado do cliente"</a></strong></p> <h2 id="Pré_-_requisitos">Pré - requisitos</h2> @@ -52,7 +52,7 @@ translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks </div> <dl> - <dt><a href="c">1. </a><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt> + <dt><a href="c">1. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Começando com o React</a></dt> <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd> <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. </a><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Começando com a nossa lista "to do" do React</a></dt> <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd> diff --git a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html index 047ed8a804..f81e618a91 100644 --- a/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html +++ b/files/pt-br/learn/tools_and_testing/client-side_javascript_frameworks/vue_getting_started/index.html @@ -29,7 +29,7 @@ original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_ini <h2 id="Um_Vue_mais_claro"><span class="tlid-translation translation" lang="pt"><span title="">Um Vue mais claro</span></span></h2> -<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/jQuery">JQuery</a>.</p> +<p>O Vue é uma estrutura JavaScript moderna que fornece recursos úteis para aprimoramento progressivo - ao contrário de muitos outros frameworks, você pode usar o Vue para aprimorar o HTML existente. Isso permite que você use o Vue como um substituto para uma biblioteca como o <a href="/en-US/docs/Glossary/jQuery">JQuery</a>.</p> <p>Dito isto, você também pode usar o Vue para escrever aplicativos de página única (Single Page Applications - SPAs) inteiros. Isso permite criar marcações gerenciadas inteiramente pelo Vue, o que pode melhorar a experiência e o desempenho do desenvolvedor ao lidar com aplicativos complexos. Também permite tirar proveito das bibliotecas para roteamento do lado do cliente (client-side) e gerenciamento de estado quando necessário. Além disso, o Vue adota uma abordagem "intermediária" das ferramentas, como roteamento do lado do cliente e gerenciamento de estado. Embora a equipe mantenedora do Vue sugira bibliotecas para essas funções, elas não são agrupadas diretamente no Vue. Isso permite que você selecione bibliotecas de gerenciamento de estado/roteamento diferentes, se elas se ajustarem melhor ao seu aplicativo.</p> diff --git a/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html b/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html index 5aa68832a6..51cca9b9e5 100644 --- a/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html +++ b/files/pt-br/mozilla/add-ons/webextensions/api/tabs/index.html @@ -23,7 +23,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <p>You can use most of this API without any special permission. However:</p> <ul> - <li>To access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the <code>"tabs"</code> <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. + <li>To access <code>Tab.url</code>, <code>Tab.title</code>, and <code>Tab.favIconUrl</code>, you need to have the <code>"tabs"</code> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permission</a>. <ul> <li>In Firefox, this also means you need <code>"tabs"</code> to {{WebExtAPIRef("tabs.query()")}} by URL.</li> @@ -45,7 +45,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dd>This object contains a boolean indicating whether the tab is muted, and the reason for the last state change.</dd> <dt>{{WebExtAPIRef("tabs.PageSettings")}}</dt> <dd> - <p>Used to control how a tab is rendered as a PDF by the <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF" title="Saves the current page as a PDF. This will open a dialog, supplied by the underlying operating system, asking the user where they want to save the PDF."><code>tabs.saveAsPDF()</code></a> method.</p> + <p>Used to control how a tab is rendered as a PDF by the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/saveAsPDF" title="Saves the current page as a PDF. This will open a dialog, supplied by the underlying operating system, asking the user where they want to save the PDF."><code>tabs.saveAsPDF()</code></a> method.</p> </dd> <dt>{{WebExtAPIRef("tabs.Tab")}}</dt> <dd>This type contains information about a tab.</dd> @@ -76,7 +76,7 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.captureVisibleTab()")}}</dt> <dd>Creates a data URI encoding an image of the visible area of the currently active tab in the specified window.</dd> <dt>{{WebExtAPIRef("tabs.connect()")}}</dt> - <dd>Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd> + <dd>Sets up a messaging connection between the extension's background scripts (or other privileged scripts, such as popup scripts or options page scripts) and any <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> running in the specified tab.</dd> <dt>{{WebExtAPIRef("tabs.create()")}}</dt> <dd>Creates a new tab.</dd> <dt>{{WebExtAPIRef("tabs.detectLanguage()")}}</dt> @@ -92,9 +92,9 @@ translation_of: Mozilla/Add-ons/WebExtensions/API/tabs <dt>{{WebExtAPIRef("tabs.getAllInWindow()")}} {{deprecated_inline}}</dt> <dd>Gets details about all tabs in the specified window.</dd> <dt>{{WebExtAPIRef("tabs.getCurrent()")}}</dt> - <dd>Gets information about the tab that this script is running in, as a <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd> + <dd>Gets information about the tab that this script is running in, as a <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/Tabs/Tab" title="This type contains information about a tab."><code>tabs.Tab</code></a> object.</dd> <dt>{{WebExtAPIRef("tabs.getSelected()")}} {{deprecated_inline}}</dt> - <dd>Gets the tab that is selected in the specified window. <strong>Deprecated: use <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a> instead.</strong></dd> + <dd>Gets the tab that is selected in the specified window. <strong>Deprecated: use <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/query" title="Gets all tabs that have the specified properties, or all tabs if no properties are specified."><code>tabs.query({active: true})</code></a> instead.</strong></dd> <dt>{{WebExtAPIRef("tabs.getZoom()")}}</dt> <dd>Gets the current zoom factor of the specified tab.</dd> <dt>{{WebExtAPIRef("tabs.getZoomSettings()")}}</dt> diff --git a/files/pt-br/web/accessibility/aria/aria_techniques/index.html b/files/pt-br/web/accessibility/aria/aria_techniques/index.html index 446c2132d4..f57b903f74 100644 --- a/files/pt-br/web/accessibility/aria/aria_techniques/index.html +++ b/files/pt-br/web/accessibility/aria/aria_techniques/index.html @@ -17,26 +17,26 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <h3 id="Funções_de_widget">Funções de widget</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">button</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">checkbox</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">link</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/button_role" title="Using the button role">button</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role" title="Using the checkbox role">checkbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_link_role" title="Using the Link role">link</a></li> <li>menuitem</li> <li>menuitemcheckbox </li> <li>menuitemradio</li> <li>option</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role" title="en/ARIA/ARIA_Techniques/Using_the_progressbar_role">progressbar</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radio</a></li> <li>scrollbar</li> <li>searchbox</li> <li>separator (when focusable)</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_slider_role" title="en/ARIA/ARIA_Techniques/Using_the_slider_role">slider</a></li> <li>spinbutton</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">treeitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Switch_role">switch</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_textbox_role" title="en/ARIA/ARIA_Techniques/Using_the_textbox_role">textbox</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Treeitem_Role">treeitem</a></li> </ul> <h3 id="Funções_compostas">Funções compostas</h3> @@ -45,13 +45,13 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <ul> <li>combobox</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (incluindo as funções <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader)</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a> (incluindo a função option)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Grid_Role">grid</a> (incluindo as funções <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a>, <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Gridcell_Role">gridcell</a>, rowheader, columnheader)</li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="en/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a> (incluindo a função option)</li> <li>menu</li> <li>menubar</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup (veja a função radio)</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (incluindo as funções <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">tree</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_radio_role" title="en/ARIA/ARIA_Techniques/Using_the_radio_role">radiogroup (veja a função radio)</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tablist_Role">tablist</a> (incluindo as funções <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tab_Role">tab</a> and <a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tabpanel_Role">tabpanel</a>)</li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tree_Role">tree</a></li> <li>treegrid</li> </ul> @@ -59,63 +59,63 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <ul> <li></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">article</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Application_Role">application</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Article_Role" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_article_role">article</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Cell_Role">cell</a></li> <li>columnheader</li> <li>definition</li> <li>directory</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Document_Role">document</a></li> <li>feed</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Figure_Role">figure</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_group_role" title="en/ARIA/ARIA_Techniques/Using_the_group_role">group</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/heading_role">heading</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Role_Img">img</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/List_role">list</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Listitem_role">listitem</a></li> <li>math</li> <li>none</li> <li>note</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_presentation_role" title="en/ARIA/ARIA_Techniques/Using_the_presentation_role">presentation</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Row_Role">row</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Rowgroup_Role">rowgroup</a></li> <li>rowheader</li> <li>separator</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role">table</a></li> <li>term</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">tooltip</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/textbox_role">textbox</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_toolbar_role" title="en/ARIA/ARIA_Techniques/Using_the_toolbar_role">toolbar</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Tooltip_Role">tooltip</a></li> </ul> <h3 id="Funções_de_ponto_de_referência">Funções de ponto de referência</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">banner</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_banner_role" title="en/ARIA/ARIA_Techniques/Using_the_banner_role">banner</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Complementary_role">complementary</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Contentinfo_role">contentinfo</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Form_Role">form</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Main_role">main</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Navigation_Role">navigation</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Region_role">region</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Search_role">search</a></li> </ul> <h3 id="Funções_de_regiões_ativa">Funções de regiões ativa</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">log</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role">alert</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_log_role" title="Using the Log role">log</a></li> <li>marquee</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_status_role" title="Using the link role">status</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/ARIA_timer_role">timer</a></li> </ul> <h3 id="Funções_de_janela">Funções de janela</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alertdialog_role">alertdialog</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role">dialog</a></li> </ul> <h2 id="Estados_e_propriedades">Estados e propriedades</h2> @@ -131,30 +131,30 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <li>aria-expanded</li> <li>aria-haspopup</li> <li>aria-hidden</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-invalid_attribute" title="Using the aria-invalid attribute">aria-invalid</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute" title="Using the aria-labelledby attribute">aria-label</a></li> <li>aria-level</li> <li>aria-modal</li> <li>aria-multiline</li> <li>aria-multiselectable</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-orientation_attribute">aria-orientation</a></li> <li>aria-placeholder</li> <li>aria-pressed</li> <li>aria-readonly</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-required_attribute" title="Using the aria-required property">aria-required</a></li> <li>aria-selected</li> <li>aria-sort</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemax_attribute" title="Using the aria-required attribute">aria-valuemax</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuemin_attribute">aria-valuemin</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuenow_attribute">aria-valuenow</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-valuetext_attribute">aria-valuetext</a></li> </ul> <h3 id="Atributos_da_região_ativa">Atributos da região ativa</h3> <ul> <li>aria-live</li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute" title="en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute">aria-relevant</a></li> <li>aria-atomic</li> <li>aria-busy</li> </ul> @@ -169,16 +169,16 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <h3 id="Atributos_de_relacionamento">Atributos de relacionamento</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute" title="Role">aria-activedescendant</a></li> <li>aria-colcount</li> <li>aria-colindex</li> <li>aria-colspan</li> <li>aria-controls</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Annotations#Associating_annotated_elements_with_their_details">aria-details</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute" title="Using the aria-labelledby attribute">aria-describedby</a></li> + <li><a href="/en-US/docs/Web/Accessibility/ARIA/Annotations#Associating_annotated_elements_with_their_details">aria-details</a></li> <li>aria-errormessage</li> <li>aria-flowto</li> - <li><a href="https://wiki.developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> + <li><a href="/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute" title="en/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">aria-labelledby</a></li> <li>aria-owns</li> <li>aria-posinset</li> <li>aria-rowcount</li> @@ -190,5 +190,5 @@ translation_of: Web/Accessibility/ARIA/ARIA_Techniques <h3 id="Propriedades_específicas_do_MicrosoftEdge">Propriedades específicas do MicrosoftEdge</h3> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li> + <li><a href="/en-US/docs/Web/API/x-ms-aria-flowfrom">x-ms-aria-flowfrom</a> {{Non-standard_Inline}}</li> </ul> diff --git a/files/pt-br/web/api/canvas_api/index.html b/files/pt-br/web/api/canvas_api/index.html index 46e4a4d406..b44b04e793 100644 --- a/files/pt-br/web/api/canvas_api/index.html +++ b/files/pt-br/web/api/canvas_api/index.html @@ -10,9 +10,9 @@ original_slug: Web/HTML/Canvas --- <p>{{CanvasSidebar}}</p> -<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p> +<p class="summary">A <strong>Canvas API</strong> provê maneiras de desenhar gráficos via <a href="/en-US/docs/Web/JavaScript">JavaScript</a> e via elemento <a href="/en-US/docs/Web/HTML">HTML</a> {{HtmlElement("canvas")}}. Entre outras coisas, ele pode ser utilizado para animação, gráficos de jogos, visualização de dados, manipulação de fotos e processamento de vídeo em tempo real.</p> -<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code><canvas></code>, desenha gráficos 2D e 3D acelerados por hardware.</p> +<p class="summary">A Canvas API foca amplamente em gráficos 2D. A <a href="/en-US/docs/Web/WebGL">WebGL API</a>, que também usa o elemento <code><canvas></code>, desenha gráficos 2D e 3D acelerados por hardware.</p> <h2 id="Exemplo_básico">Exemplo básico</h2> @@ -58,7 +58,7 @@ ctx.fillRect(10, 10, 150, 100); </ul> <div class="blockIndicator note"> -<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> +<p><strong>Nota:</strong> As interfaces relacionadas ao <code>WebGLRenderingContext</code> são referenciadas sob <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p> </div> <p>{{domxref("CanvasCaptureMediaStream")}} é uma interface relacionada.</p> @@ -67,15 +67,15 @@ ctx.fillRect(10, 10, 150, 100); <dl> <dt></dt> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt> <dd>Um tutorial compreensivo abordando o uso básico da API de Canvas e suas funcionalidades avançadas.</dd> <dt><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Mergulhando no Canvas HTML5</a></dt> <dd>Uma introdução prática e extensa à API Canvas e WebGL.</dd> <dt><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Guia Canvas</a></dt> <dd>Uma referência acessível para a API Canvas.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt> + <dt><a href="/en-US/docs/Web/API/Canvas_API/A_basic_ray-caster">Demonstração: Um <em>ray-caster</em> básico</a> </dt> <dd>Uma demonstração de animação <em>ray-tracing</em> usando canvas.</dd> - <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt> + <dt><a href="/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulando vídeos usando canvas</a></dt> <dd>Combinando {{HTMLElement("video")}} e {{HTMLElement("canvas")}} para manipular dados de vídeo em tempo real.</dd> </dl> @@ -100,7 +100,7 @@ ctx.fillRect(10, 10, 150, 100); </ul> <div class="blockIndicator note"> -<p><strong>Nota:</strong> Veja a <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p> +<p><strong>Nota:</strong> Veja a <a href="/en-US/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL API</a> para bibliotecas 2D e 3D que usam WebGL.</p> </div> <h2 id="Especificações">Especificações</h2> @@ -126,10 +126,10 @@ ctx.fillRect(10, 10, 150, 100); <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> -<p>Aplicações Mozilla ganharam suporte para <code><canvas></code> a partir do Gecko 1.8 (<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code><canvas></code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code><canvas></code>.</p> +<p>Aplicações Mozilla ganharam suporte para <code><canvas></code> a partir do Gecko 1.8 (<a href="/en-US/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). O elemento foi originalmente introduzido pela Apple para o Dashboard OS X e Safari. O Internet Explorer suporta <code><canvas></code> quando inclui-se um script do projeto Explorer Canvas, da google. Google Chrome e Opera 9 também suportam <code><canvas></code>.</p> <h2 id="Ver_também">Ver também</h2> <ul> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/WebGL">WebGL</a></li> + <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> </ul> diff --git a/files/pt-br/web/api/web_audio_api/index.html b/files/pt-br/web/api/web_audio_api/index.html index 8e6e3323bd..14c6707eb4 100644 --- a/files/pt-br/web/api/web_audio_api/index.html +++ b/files/pt-br/web/api/web_audio_api/index.html @@ -424,7 +424,7 @@ function voiceMute() { // toggle to mute and unmute sound <li><a href="https://github.com/bit101/tones">Tones</a>: a simple library for playing specific tones/notes using the Web Audio API.</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <h3 id="Quicklinks">Quicklinks</h3> <ol> diff --git a/files/pt-br/web/css/@media/aspect-ratio/index.html b/files/pt-br/web/css/@media/aspect-ratio/index.html index b40690add2..5889b66713 100644 --- a/files/pt-br/web/css/@media/aspect-ratio/index.html +++ b/files/pt-br/web/css/@media/aspect-ratio/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/@media/aspect-ratio --- <div>{{cssref}}</div> -<p>A <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Caracter%C3%ADsticas_de_m%C3%ADdia">característica de mídia</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.</p> +<p>A <a href="/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Caracter%C3%ADsticas_de_m%C3%ADdia">característica de mídia</a> <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> <strong><code>aspect-ratio</code></strong> pode ser utilizada para testar a taxa de aspecto de sua {{glossary("viewport")}}.</p> <h2 id="Sintaxe">Sintaxe</h2> diff --git a/files/pt-br/web/css/_colon_root/index.html b/files/pt-br/web/css/_colon_root/index.html index 523b54d1e0..e7b4dc0bba 100644 --- a/files/pt-br/web/css/_colon_root/index.html +++ b/files/pt-br/web/css/_colon_root/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:root' <h2 id="Sumário">Sumário</h2> -<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:root</code></strong> se equipara à raíz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, <code>:root</code> representa o elemento {{HTMLElement("html")}} e é identico ao seletor html, exceto que sua <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity">especificidade</a> é mais alta.</p> +<p>A <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classe CSS</a> <strong><code>:root</code></strong> se equipara à raíz de uma árvore, que por sua vez representa o documento. Aplicado ao HTML, <code>:root</code> representa o elemento {{HTMLElement("html")}} e é identico ao seletor html, exceto que sua <a href="/pt-BR/docs/Web/CSS/Specificity">especificidade</a> é mais alta.</p> <h2 id="Sintaxe">Sintaxe</h2> diff --git a/files/pt-br/web/css/align-content/index.html b/files/pt-br/web/css/align-content/index.html index 8496933d41..b0f512aefb 100644 --- a/files/pt-br/web/css/align-content/index.html +++ b/files/pt-br/web/css/align-content/index.html @@ -3,7 +3,7 @@ title: align-content slug: Web/CSS/align-content translation_of: Web/CSS/align-content --- -<p>A propriedade <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> ou do eixo de bloco de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">grid</a>.</p> +<p>A propriedade <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>align-content</code></strong> define a distribuição entre e ao redor dos items do conteúdo do eixo transversal de uma <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">flexbox</a> ou do eixo de bloco de uma <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">grid</a>.</p> <p>O exemplo interativo abaixo use Grid Layout para demonstrar alguns dos valores dessa propriedade.</p> diff --git a/files/pt-br/web/css/animation-fill-mode/index.html b/files/pt-br/web/css/animation-fill-mode/index.html index c12c7d0e3b..c752ed2957 100644 --- a/files/pt-br/web/css/animation-fill-mode/index.html +++ b/files/pt-br/web/css/animation-fill-mode/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/animation-fill-mode --- <div>{{CSSRef}}</div> -<p>A propriedade CSS <strong><code>animation-fill-mode</code></strong> define como uma animação <a href="https://wiki.developer.mozilla.org/en/CSS">CSS</a> aplica estilos ao seu destino antes e depois de sua execução.</p> +<p>A propriedade CSS <strong><code>animation-fill-mode</code></strong> define como uma animação <a href="/en-US/docs/Web/CSS">CSS</a> aplica estilos ao seu destino antes e depois de sua execução.</p> <div>{{EmbedInteractiveExample("pages/css/animation-fill-mode.html")}}</div> diff --git a/files/pt-br/web/css/class_selectors/index.html b/files/pt-br/web/css/class_selectors/index.html index b98a793b0b..72a381fdb1 100644 --- a/files/pt-br/web/css/class_selectors/index.html +++ b/files/pt-br/web/css/class_selectors/index.html @@ -8,7 +8,7 @@ tags: - Seletores translation_of: Web/CSS/Class_selectors --- -<p>O <strong>seletor de classes</strong> <a href="/en-US/docs/CSS">CSS</a> corresponde aos elementos com base no conteúdo de seus atributos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a>.</code></p> +<p>O <strong>seletor de classes</strong> <a href="/en-US/docs/CSS">CSS</a> corresponde aos elementos com base no conteúdo de seus atributos <code><a href="/en-US/docs/Web/HTML/Global_attributes#attr-class">class</a>.</code></p> <pre class="brush: css no-line-numbers notranslate">/* Todos os elementos com class="espaçoso" */ .espaçoso { diff --git a/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 1078b0dbae..c52732f11c 100644 --- a/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/pt-br/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -671,7 +671,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Nesse artigo abordamos um pouco da especificação do Grid Layout. Pratique com os exemplos propostos, depois disso passe para a próxima parte onde estudaremos mais a fundo o CSS Grid Layout.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pt-br/web/css/css_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/index.html index 28ebe9c2d6..828a548bd9 100644 --- a/files/pt-br/web/css/css_grid_layout/index.html +++ b/files/pt-br/web/css/css_grid_layout/index.html @@ -134,7 +134,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Referência</strong></a></li> diff --git a/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 358ada6d07..01353d4cab 100644 --- a/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/pt-br/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -581,7 +581,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <li><a href="/en-US/docs/Web/CSS/CSS_Columns">Multiple-column Layout Guides</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pt-br/web/css/grid-auto-flow/index.html b/files/pt-br/web/css/grid-auto-flow/index.html index 717fe7bd31..17e79eb8f3 100644 --- a/files/pt-br/web/css/grid-auto-flow/index.html +++ b/files/pt-br/web/css/grid-auto-flow/index.html @@ -150,7 +150,7 @@ grid-auto-flow: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introduzindo arrumação automática no grid e ordem</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pt-br/web/css/grid-template-columns/index.html b/files/pt-br/web/css/grid-template-columns/index.html index cb145bad70..670da61fb2 100644 --- a/files/pt-br/web/css/grid-template-columns/index.html +++ b/files/pt-br/web/css/grid-template-columns/index.html @@ -136,7 +136,7 @@ grid-template-columns: unset; <li>Tutorial em vídeo: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong><a href="/en-US/docs/Web/CSS/Reference">Referência do CSS</a></strong></li> diff --git a/files/pt-br/web/css/grid-template-rows/index.html b/files/pt-br/web/css/grid-template-rows/index.html index f4e45409b6..1feae6ed50 100644 --- a/files/pt-br/web/css/grid-template-rows/index.html +++ b/files/pt-br/web/css/grid-template-rows/index.html @@ -147,7 +147,7 @@ grid-template-rows: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pt-br/web/css/grid/index.html b/files/pt-br/web/css/grid/index.html index 35abbc525a..52783bbbfc 100644 --- a/files/pt-br/web/css/grid/index.html +++ b/files/pt-br/web/css/grid/index.html @@ -128,7 +128,7 @@ grid: unset; <li>Guia de Layout de Grade: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/pt-br/web/css/initial_value/index.html b/files/pt-br/web/css/initial_value/index.html index 2a042a41db..8abf9aea9a 100644 --- a/files/pt-br/web/css/initial_value/index.html +++ b/files/pt-br/web/css/initial_value/index.html @@ -11,11 +11,11 @@ original_slug: Web/CSS/valor_inicial --- <div>{{cssref}}</div> -<p>O <strong>Valor inicial</strong> de uma propriedade <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS">CSS</a> é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.</p> +<p>O <strong>Valor inicial</strong> de uma propriedade <a href="/pt-BR/docs/Web/CSS">CSS</a> é o seu valor padrão, como listado em sua tabela de definição. O uso do valor inicial varia caso a propriedade seja herdada ou não.</p> <ul> - <li>Para <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/inheritance#Propriedades_herdadas">propriedades herdadas</a>, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> seja fornecido.</li> - <li>Para <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/inheritance#Propriedades_nao_herdadas">propriedades não-herdadas</a>, o valor inicial é usado em todos os elementos, enquanto nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> é fornecido</li> + <li>Para <a href="/pt-BR/docs/Web/CSS/inheritance#Propriedades_herdadas">propriedades herdadas</a>, o valor inicial é usado apenas em seu elemento raíz, desde que nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> seja fornecido.</li> + <li>Para <a href="/pt-BR/docs/Web/CSS/inheritance#Propriedades_nao_herdadas">propriedades não-herdadas</a>, o valor inicial é usado em todos os elementos, enquanto nenhum <a class="CSS 2" href="/pt-BR/docs/Web/CSS/valor_espeficifco" title="Valor especifico">valor especificado</a> é fornecido</li> </ul> <div class="blockIndicator note"> diff --git a/files/pt-br/web/css/pseudo-classes/index.html b/files/pt-br/web/css/pseudo-classes/index.html index 40cb2ea24c..5e332aab0e 100644 --- a/files/pt-br/web/css/pseudo-classes/index.html +++ b/files/pt-br/web/css/pseudo-classes/index.html @@ -20,7 +20,7 @@ button:hover { <p>Pseudo-classes permitem que você aplique um estilo a um elemento não apenas em relação ao conteúdo da árvore do documento, mas também em relação a fatores externos como o histórico de navegação ({{CSSxRef(":visited")}}, por exemplo), o status do seu conteúdo (como {{ CSSxRef(":checked")}} em certos elementos de um formulário), ou a posição do mouse (como {{CSSxRef(":hover")}}, que permite saber se o mouse está sobre um elemento ou não).</p> <div class="note"> -<p><strong>Observação:</strong> Diferentemente das pseudo-classes, <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elementos</a> podem ser usados para estilizar uma <em>parte específica</em> de um elemento.</p> +<p><strong>Observação:</strong> Diferentemente das pseudo-classes, <a href="/pt-BR/docs/Web/CSS/Pseudo-elementos">pseudo-elementos</a> podem ser usados para estilizar uma <em>parte específica</em> de um elemento.</p> </div> <h2 id="Sintaxe">Sintaxe</h2> diff --git a/files/pt-br/web/guide/printing/index.html b/files/pt-br/web/guide/printing/index.html index 7819266b9f..7d2da90fe6 100644 --- a/files/pt-br/web/guide/printing/index.html +++ b/files/pt-br/web/guide/printing/index.html @@ -60,7 +60,7 @@ translation_of: Web/Guide/Printing </html> </pre> -<div><a href="https://wiki.developer.mozilla.org/samples/domref/printevents.html">Ver Exemplo</a></div> +<div><a href="/samples/domref/printevents.html">Ver Exemplo</a></div> <h3 id="Imprimir_uma_página_externa_sem_abri-la">Imprimir uma página externa sem abri-la</h3> diff --git a/files/pt-br/web/html/element/embed/index.html b/files/pt-br/web/html/element/embed/index.html index 32469c38d5..21568d0d96 100644 --- a/files/pt-br/web/html/element/embed/index.html +++ b/files/pt-br/web/html/element/embed/index.html @@ -52,7 +52,7 @@ translation_of: Web/HTML/Element/embed <dt>{{htmlattrdef("src")}}</dt> <dd>A URL do recurso que está sendo incorporado.</dd> <dt>{{htmlattrdef("type")}}</dt> - <dd>O <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/MIME_type">tipo MIME</a> a ser usado para a seleção do <em>plug-in</em> de instanciação.</dd> + <dd>O <a href="/en-US/docs/Glossary/MIME_type">tipo MIME</a> a ser usado para a seleção do <em>plug-in</em> de instanciação.</dd> <dt>{{htmlattrdef("width")}}</dt> <dd>A largura apresentada do recurso, em CSS pixels. Este deve ser um valor absoluto; porcentagens <em>não </em>são permitidas.</dd> <dt></dt> diff --git a/files/pt-br/web/html/element/img/index.html b/files/pt-br/web/html/element/img/index.html index f87f9f0bcf..4e23168ce4 100644 --- a/files/pt-br/web/html/element/img/index.html +++ b/files/pt-br/web/html/element/img/index.html @@ -187,7 +187,7 @@ translation_of: Web/HTML/Element/img <li><a class="external external-icon" href="https://www.w3.org/WAI/tutorials/images/decision-tree/">An alt Decision Tree • Images • WAI Web Accessibility Tutorials</a></li> <li><a class="external external-icon" href="https://axesslab.com/alt-texts/">Alt-texts: The Ultimate Guide — Axess Lab</a></li> <li><a class="external external-icon" href="https://www.deque.com/blog/great-alt-text-introduction/">How to Design Great Alt Text: An Introduction | Deque</a></li> - <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li> <li><a class="external external-icon" href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li> </ul> @@ -195,7 +195,7 @@ translation_of: Web/HTML/Element/img <p>O atributo {{htmlattrxref("title")}} não é um substituto aceitável para o atributo <code>alt</code>. Além disso, evite duplicar o valor do atributo <code>alt</code> no atributo <code>title</code> para uma mesma imagem. Isso pode fazer com que alguns programas leitores de tela narrem duas vezes a descrição, o que pode criar uma experiência confusa para usuários.</p> -<p>Evite usar o atributo <code>title</code> como uma forma suplementar de legenda para a descrição do <code>alt</code>. Caso a imagem precise de uma legenda, prefisa os elementos <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/figure">figure</a></code> e <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code>.</p> +<p>Evite usar o atributo <code>title</code> como uma forma suplementar de legenda para a descrição do <code>alt</code>. Caso a imagem precise de uma legenda, prefisa os elementos <code><a href="/en-US/docs/Web/HTML/Element/figure">figure</a></code> e <code><a href="/en-US/docs/Web/HTML/Element/figcaption">figcaption</a></code>.</p> <p>O valor do atributo <code>title</code> é geralmente mostrado ao usuário como uma dica, que aparece após o usuário parar o cursor sobre a imagem. Apesar de <em>poder</em> <em>prover</em> informações adicionais ao usuário, não se deve assumir todos os usuários vão vê-lo, pois o mesmo pode possuir apenas um teclado ou uma tela de toque (touchscreen). Se você considera a informação particularmente importante para o usuário, prefira o uso de elementos inline.</p> diff --git a/files/pt-br/web/html/global_attributes/contenteditable/index.html b/files/pt-br/web/html/global_attributes/contenteditable/index.html index 56794951ad..19b19fd774 100644 --- a/files/pt-br/web/html/global_attributes/contenteditable/index.html +++ b/files/pt-br/web/html/global_attributes/contenteditable/index.html @@ -68,7 +68,7 @@ translation_of: Web/HTML/Global_attributes/contenteditable <ul> <li><a href="/en-US/docs/Web/Guide/HTML/Editable_content">Tornando o conteúdo editável</a></li> - <li>Todos os <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a></li> + <li>Todos os <a href="/pt-BR/docs/Web/HTML/Global_attributes">atributos globais</a></li> <li>{{domxref("HTMLElement.contentEditable")}} e {{domxref("HTMLElement.isContentEditable")}}</li> <li>A propriedade {{cssxref("caret-color")}} do CSS.</li> <li><a href="https://developer.mozilla.org/pt-BR/docs/Web/Events/input">Evento de <code>input</code> - <code>HTMLElement</code></a></li> diff --git a/files/pt-br/web/html/global_attributes/tabindex/index.html b/files/pt-br/web/html/global_attributes/tabindex/index.html index 9357c66c56..85cb06ff01 100644 --- a/files/pt-br/web/html/global_attributes/tabindex/index.html +++ b/files/pt-br/web/html/global_attributes/tabindex/index.html @@ -21,7 +21,7 @@ translation_of: Web/HTML/Global_attributes/tabindex <li>um <em>valor negativo</em> (geralmente <code>tabindex="-1"</code>) significa que o elemento não deve ser localizado pela navegação sequencial do teclado, mas pode ser focável visualmente ou com JavaScript. Isso é mais útil para criar widgets accessíveis com JavaScript. <div class="note"> - <p>Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um <code>tabindex</code> negativo utilizando o teclado, porém um script pode o fazer utilizando o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">método</a> <code>focus()</code>.</p> + <p>Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um <code>tabindex</code> negativo utilizando o teclado, porém um script pode o fazer utilizando o <a href="/en-US/docs/Web/API/HTMLElement/focus">método</a> <code>focus()</code>.</p> </div> </li> <li><code>tabindex="0"</code> significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, mas a sua posição será definida pela ordem no código-fonte do documento;</li> diff --git a/files/pt-br/web/http/headers/index.html b/files/pt-br/web/http/headers/index.html index bb02e87319..996ace6cf4 100644 --- a/files/pt-br/web/http/headers/index.html +++ b/files/pt-br/web/http/headers/index.html @@ -71,13 +71,13 @@ translation_of: Web/HTTP/Headers <h2 id="Client_hints">Client hints</h2> -<p>O recurso HTTP <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> ainda está em desenvolvimento. A documentação está disponível no site do <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP working group.</a></p> +<p>O recurso HTTP <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> ainda está em desenvolvimento. A documentação está disponível no site do <a href="https://httpwg.org/http-extensions/client-hints.html">HTTP working group.</a></p> <dl> <dt>{{HTTPHeader("Accept-CH")}} {{experimental_inline}}</dt> - <dd>Os servidores podem dar suporte para o <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> usando o campo de cabeçalho Accept-CH ou um elemento HTML <meta> equivalente com atributo http-equiv ([HTML5]).</dd> + <dd>Os servidores podem dar suporte para o <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> usando o campo de cabeçalho Accept-CH ou um elemento HTML <meta> equivalente com atributo http-equiv ([HTML5]).</dd> <dt>{{HTTPHeader("Accept-CH-Lifetime")}} {{experimental_inline}}</dt> - <dd>Os servidores podem solicitar ao cliente que lembre-se do conjunto de <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> que o servidor dá suporte por um período de tempo especificado, para permitir a entrega de <a href="https://wiki.developer.mozilla.org/docs/Glossary/Client_hints">Client hints</a> em solicitações seguidas ao servidor de origem([RFC6454]).</dd> + <dd>Os servidores podem solicitar ao cliente que lembre-se do conjunto de <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> que o servidor dá suporte por um período de tempo especificado, para permitir a entrega de <a href="/pt-BR/docs/Glossary/Client_hints">Client hints</a> em solicitações seguidas ao servidor de origem([RFC6454]).</dd> <dt>{{HTTPHeader("Content-DPR")}} {{experimental_inline}}</dt> <dd><span class="tlid-translation translation" lang="pt"><span title="">Um número que indica a proporção entre pixels físicos sobre pixels CSS da resposta de imagem selecionada.</span></span></dd> <dt>{{HTTPHeader("DPR")}} {{experimental_inline}}</dt> @@ -177,7 +177,7 @@ translation_of: Web/HTTP/Headers <dt>{{HTTPHeader("Origin")}}</dt> <dd>Inddica de onde uma busca se origina.</dd> <dt>{{HTTPHeader("Timing-Allow-Origin")}}</dt> - <dd>Especifica as origens que tem permissão para ver valores de atributos recuperados por meio de recursos da API de Tempo de Recurso (<a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>) que, de outra forma, seriam relatados como zero devido a restrições de origem cruzada (cross-origin restrictions).</dd> + <dd>Especifica as origens que tem permissão para ver valores de atributos recuperados por meio de recursos da API de Tempo de Recurso (<a href="/pt-BR/en-US/docs/Web/API/Resource_Timing_API">Resource Timing API</a>) que, de outra forma, seriam relatados como zero devido a restrições de origem cruzada (cross-origin restrictions).</dd> </dl> <h2 id="Do_Not_Track">Do Not Track</h2> diff --git a/files/pt-br/web/javascript/guide/modules/index.html b/files/pt-br/web/javascript/guide/modules/index.html index a9f6162954..a3b0c0bd53 100644 --- a/files/pt-br/web/javascript/guide/modules/index.html +++ b/files/pt-br/web/javascript/guide/modules/index.html @@ -83,7 +83,7 @@ modules/ <p>No entanto, decidimos continuar usando .js, pelo menos por enquanto. Para que os módulos funcionem corretamente em um navegador, você precisa garantir que seu servidor os esteja servindo com um cabeçalho Content-Type que contenha um tipo MIME JavaScript, como text / javascript. Caso contrário, você receberá um erro estrito de verificação do tipo MIME, de acordo com as linhas "O servidor respondeu com um tipo MIME não JavaScript" e o navegador não executará seu JavaScript. A maioria dos servidores já define o tipo correto para arquivos .js, mas ainda não para arquivos .mjs. Servidores que já veiculam arquivos .mjs incluem corretamente <a href="https://pages.github.com/">GitHub Pages</a> e <code><a href="https://github.com/http-party/http-server#readme">http-server</a></code> para Node.js.</p> -<p>Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> para arquivos <code>.mjs</code>). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.</p> +<p>Tudo bem se você já estiver usando esse ambiente ou se não estiver, mas souber o que está fazendo e tiver acesso (ou seja, você pode configurar o servidor para definir a configuração correta <code><a href="/en-US/docs/Web/HTTP/Headers/Content-Type">Content-Type</a></code> para arquivos <code>.mjs</code>). No entanto, isso pode causar confusão se você não controlar o servidor do qual está servindo arquivos ou publicar arquivos para uso público, como estamos aqui.</p> <p>Para fins de aprendizado e portabilidade, decidimos manter o<code>.js</code>.</p> diff --git a/files/pt-br/web/javascript/guide/regular_expressions/index.html b/files/pt-br/web/javascript/guide/regular_expressions/index.html index 038cccb762..17363ea837 100644 --- a/files/pt-br/web/javascript/guide/regular_expressions/index.html +++ b/files/pt-br/web/javascript/guide/regular_expressions/index.html @@ -40,7 +40,7 @@ translation_of: Web/JavaScript/Guide/Regular_Expressions <p>Usando o construtor, a compilação da expressão regular é realizada em tempo de execução. Use o construtor quando souber que o padrão da expressão regular irá mudar ou quando o padrão for desconhecido, oriundo de outra fonte, uma entrada de usuário por exemplo.</p> <div class="blockIndicator note"> -<p>Nota: Se você já está familiarizado com as formas de uma expressão regular, também pode ler o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">resumo</a> para uma rápida pesquisa de um padrão específico.</p> +<p>Nota: Se você já está familiarizado com as formas de uma expressão regular, também pode ler o <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Cheatsheet">resumo</a> para uma rápida pesquisa de um padrão específico.</p> </div> <h2 id="Escrevendo_um_padrão_de_expressão_regular"><a id="escrita_expressao_regular" name="escrita_expressao_regular">Escrevendo um padrão de expressão regular</a></h2> diff --git a/files/pt-br/web/javascript/reference/classes/index.html b/files/pt-br/web/javascript/reference/classes/index.html index 0157d8ff82..1f028c9772 100644 --- a/files/pt-br/web/javascript/reference/classes/index.html +++ b/files/pt-br/web/javascript/reference/classes/index.html @@ -16,7 +16,7 @@ translation_of: Web/JavaScript/Reference/Classes <h2 id="Definindo_classes">Definindo classes</h2> -<p>As Classes são, de fato, "funções especiais", e, assim como você pode definir <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/function">"function expressions"</a> e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Statements/function">"function declarations"</a>, a sintaxe de uma classe possui dois componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">"class expressions</a>" e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">"class declarations"</a>.</p> +<p>As Classes são, de fato, "funções especiais", e, assim como você pode definir <a href="/pt-BR/docs/Web/JavaScript/Reference/Operators/function">"function expressions"</a> e <a href="/pt-BR/docs/Web/JavaScript/Reference/Statements/function">"function declarations"</a>, a sintaxe de uma classe possui dois componentes: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">"class expressions</a>" e <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">"class declarations"</a>.</p> <h3 id="Declarando_classes">Declarando classes</h3> diff --git a/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html b/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html index b26e3037f2..33951d7a94 100644 --- a/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/reflect/defineproperty/index.html @@ -60,7 +60,7 @@ obj.x // 7 <h3 id="Verificando_se_a_definição_da_propriedade_foi_bem-sucedida">Verificando se a definição da propriedade foi bem-sucedida</h3> -<p>Com o {{jsxref ("Object.defineProperty")}}, que retorna um objeto se for bem-sucedido ou lança um {{jsxref ("TypeError")}}, você usaria um bloco <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a> para detectar qualquer erro que ocorreu ao definir uma propriedade.</p> +<p>Com o {{jsxref ("Object.defineProperty")}}, que retorna um objeto se for bem-sucedido ou lança um {{jsxref ("TypeError")}}, você usaria um bloco <a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a> para detectar qualquer erro que ocorreu ao definir uma propriedade.</p> <p>Como <code>Reflect.defineProperty</code> retorna um status de sucesso booleano, você pode usar apenas um bloco <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else</a></code> aqui:</p> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html b/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html index 4b5aab2c22..e6b2f349f1 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/anchor/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor <div>O método <strong><code>anchor()</code></strong> cria uma string começando com uma tag inicial <code><a name="..."></code>, um texto e uma tag final <code></a></code>.</div> <div class="blockIndicator warning"> -<p>Não use este método. Ao invés, use <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento <a> tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p> +<p>Não use este método. Ao invés, use <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento <a> tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p> </div> <h2 id="Sintaxe">Sintaxe</h2> @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/anchor <h2 id="Descrição">Descrição</h2> -<p>Não use este método. Ao invés, use <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento <em><code><a></code></em> tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p> +<p>Não use este método. Ao invés, use <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. Além disso, a especificação HTML não permite mais que o elemento <em><code><a></code></em> tenha um atributo <strong>"name"</strong>, portanto, esse método nem mesmo cria uma tag válida.</p> <h2 id="Exemplos">Exemplos</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/big/index.html b/files/pt-br/web/javascript/reference/global_objects/string/big/index.html index 624f0b9b5b..0c269a0d7c 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/big/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/big/index.html @@ -12,10 +12,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/big --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <strong>big()</strong> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/big"><big></a> fazendo com que o texto dentro dele seja exibido uma uma fonte maior.</p> +<p>O método <strong>big()</strong> cria um elemento HTML <a href="/en-US/docs/Web/HTML/Element/big"><big></a> fazendo com que o texto dentro dele seja exibido uma uma fonte maior.</p> <div class="note"> -<p><strong>Nota de uso:</strong> O elemento <big> foi removido no <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p> +<p><strong>Nota de uso:</strong> O elemento <big> foi removido no <a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p> </div> <h2 id="Sintaxe">Sintaxe</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html b/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html index 4b179a09de..cd7c399edd 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/blink/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/blink --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code><strong>blink()</strong></code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/blink"><blink></a> que faz uma string piscar.</p> +<p>O método <code><strong>blink()</strong></code> cria um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/blink"><blink></a> que faz uma string piscar.</p> <div class="warning"> <p><strong>Aviso:</strong> A criação de textos que piscam é desaprovada por vários padrões de acessibilidade. O próprio elemento <code><blink></code> não é padrão e está obsoleto!</p> @@ -23,7 +23,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/blink <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/blink"><blink></a>.</p> +<p>Uma string contendo um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/blink"><blink></a>.</p> <h2 id="Descrição">Descrição</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html b/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html index 17bb7d54fb..134d8cae04 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/bold/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/bold --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code><strong>bold()</strong></code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/b"><b></a> que faz com que uma string seja exibida em negrito.</p> +<p>O método <code><strong>bold()</strong></code> cria um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/b"><b></a> que faz com que uma string seja exibida em negrito.</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/bold <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/b"><b></a> .</p> +<p>Uma string contendo um elemento HTML <a href="/pt-BR/docs/Web/HTML/Element/b"><b></a> .</p> <h2 id="Descrição">Descrição</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html b/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html index badb2d8a27..e8d07e6fa2 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/charcodeat/index.html @@ -30,7 +30,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/charCodeAt <h2 id="Descrição">Descrição</h2> -<p>Os pontos de código Unicode variam de <code>0</code> a <code>1114111</code> (<code>0x10FFFF</code>). Os primeiros 128 pontos de código Unicode são uma correspondência direta da codificação de caracteres ASCII. (Para informações sobre Unicode, veja o <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals">JavaScript Guide</a>.)</p> +<p>Os pontos de código Unicode variam de <code>0</code> a <code>1114111</code> (<code>0x10FFFF</code>). Os primeiros 128 pontos de código Unicode são uma correspondência direta da codificação de caracteres ASCII. (Para informações sobre Unicode, veja o <a href="/pt-BR/docs/Web/JavaScript/Guide/Values,_variables,_and_literals">JavaScript Guide</a>.)</p> <div class="blockIndicator note"> <p><strong>Nota</strong>: o <code>charCodeAt()</code> sempre retornará um valor menor do que <code>65536</code>. Isso ocorre pois os pontos de código mais altos são representados por um par de pseudo-caracteres "substitutos" (de menor valor) que são usados para compreender o caracter real.<br> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html b/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html index 0c50035e13..3ec9b911fa 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/fixed/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <strong><code>fixed()</code></strong> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/tt"><tt></a></code> que faz com que uma string seja exibida em uma fonte de densidade fixa.</p> +<p>O método <strong><code>fixed()</code></strong> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/tt"><tt></a></code> que faz com que uma string seja exibida em uma fonte de densidade fixa.</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fixed <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string que representa o elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/tt"><tt></a>.</p> +<p>Uma string que representa o elemento HTML <a href="/en-US/docs/Web/HTML/Element/tt"><tt></a>.</p> <h2 id="Descrição">Descrição</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html b/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html index 1680cefa36..48e38246c7 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/fontcolor/index.html @@ -13,10 +13,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>fontcolor()</code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font"><font></a> que faz com que uma string seja exibida na cor especificada.</p> +<p>O método <code>fontcolor()</code> cria um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font"><font></a> que faz com que uma string seja exibida na cor especificada.</p> <div class="note"> -<p><strong>Nota de uso:</strong> O elemento <code><font></code> foi removido do <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/color_value">propriedade CSS correspondente</a>.</p> +<p><strong>Nota de uso:</strong> O elemento <code><font></code> foi removido do <a href="/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="/pt-BR/docs/Web/CSS/color_value">propriedade CSS correspondente</a>.</p> </div> <h2 id="Sintaxe">Sintaxe</h2> @@ -27,12 +27,12 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontcolor <dl> <dt><code>color</code></dt> - <dd>Deve ser um string que expresse uma cor em formato hexadecimal ou o nome, em Inglês, de uma cor. Os nomes das cores estão listados na referência de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/color_value#Palavras-chave_de_cores">cores CSS</a>.</dd> + <dd>Deve ser um string que expresse uma cor em formato hexadecimal ou o nome, em Inglês, de uma cor. Os nomes das cores estão listados na referência de <a href="/pt-BR/docs/Web/CSS/color_value#Palavras-chave_de_cores">cores CSS</a>.</dd> </dl> <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font"><font></a>.</p> +<p>Uma string contendo um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font"><font></a>.</p> <h2 id="Descrição">Descrição</h2> @@ -53,7 +53,7 @@ console.log(worldString.fontcolor('FF00') + ' está vermelho em hexadecimal nest // '<font color="FF00">Olá, mundo</font> está vermelho em hexadecimal nesta linha' </pre> -<p>Com o objeto <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p> +<p>Com o objeto <code><a href="/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p> <pre class="brush: js notranslate">document.getElementById('#oIdDoElemento').style.color = 'red'; </pre> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html b/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html index ae429d6089..9aebe0f72a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/fontsize/index.html @@ -13,10 +13,10 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>fontsize()</code> cria um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font"><font></a> que faz com que uma string seja exibida no tamanho da fonte especificada.</p> +<p>O método <code>fontsize()</code> cria um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font"><font></a> que faz com que uma string seja exibida no tamanho da fonte especificada.</p> <div class="note"> -<p><strong>Nota de uso:</strong> O elemento <code><font></code> foi removido do <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p> +<p><strong>Nota de uso:</strong> O elemento <code><font></code> foi removido do <a href="/pt-BR/docs/Web/HTML/HTML5">HTML5</a> e não deve mais ser usado. Em vez disso, web developers devem usar a <a href="/pt-BR/docs/Web/CSS/font-size">propriedade CSS correspondente</a>.</p> </div> <h2 id="Sintaxe">Sintaxe</h2> @@ -32,11 +32,11 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/fontsize <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/font"><font></a>.</p> +<p>Uma string contendo um elemento HTML <a href="/en-US/docs/Web/HTML/Element/font"><font></a>.</p> <h2 id="Descrição">Descrição</h2> -<p>Ao especificar o tamanho como um inteiro, você define o tamanho da fonte do texto para um dos 7 tamanhos definidos. Ao especificar <code>size</code> como uma string como "-2", você ajusta o tamanho da fonte do texto em relação ao tamanho definido na tag <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/basefont"><basefont></a>.</p> +<p>Ao especificar o tamanho como um inteiro, você define o tamanho da fonte do texto para um dos 7 tamanhos definidos. Ao especificar <code>size</code> como uma string como "-2", você ajusta o tamanho da fonte do texto em relação ao tamanho definido na tag <a href="/en-US/docs/Web/HTML/Element/basefont"><basefont></a>.</p> <h2 id="Exemplos">Exemplos</h2> @@ -51,7 +51,7 @@ console.log(worldString.big()); // <big>Olá, mundo</big> console.log(worldString.fontsize(7)); // <font size="7">Olá, mundo</fontsize> </pre> -<p>Com o objeto <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p> +<p>Com o objeto <code><a href="/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a></code> você pode obter o atributo <code>style</code> do elemento e manipulá-lo de forma mais genérica, por exemplo:</p> <pre class="brush: js notranslate">document.getElementById('#oIdDoElemento').style.fontSize = '0.7em'; </pre> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html b/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html index 2b4c297da8..9a25d313b7 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/italics/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/italics --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>italics()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/i"><i></a></code> que faz com que uma string fique em itálico.</p> +<p>O método <code>italics()</code> cria um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/i"><i></a></code> que faz com que uma string fique em itálico.</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/italics <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/i"><i></a></code>.</p> +<p>Uma string contendo um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/i"><i></a></code>.</p> <h2 id="Descrição">Descrição</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/link/index.html b/files/pt-br/web/javascript/reference/global_objects/string/link/index.html index 92a0962be8..2f35d2ec58 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/link/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/link/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/link --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>link()</code> cria uma string que representa o código para um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a"><a></a></code> a ser usado como um link de hipertexto para outro URL.</p> +<p>O método <code>link()</code> cria uma string que representa o código para um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/a"><a></a></code> a ser usado como um link de hipertexto para outro URL.</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -28,13 +28,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/link <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/HTML/Element/a"><a></a></code>.</p> +<p>Uma string contendo um elemento HTML <code><a href="/pt-BR/docs/Web/HTML/Element/a"><a></a></code>.</p> <h2 id="Descrição">Descrição</h2> -<p>Use o método <code>link()</code> para criar um elemento HTML <code><a></code>. A string retornada pode então ser adicionada ao documento por meio de <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/API/Document/write">document.write()</a></code> ou <code><a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/API/Element/innerHTML">element.innerHTML</a></code>.</p> +<p>Use o método <code>link()</code> para criar um elemento HTML <code><a></code>. A string retornada pode então ser adicionada ao documento por meio de <code><a href="/pt-BR/docs/Web/API/Document/write">document.write()</a></code> ou <code><a href="/pt-BR/docs/Web/API/Element/innerHTML">element.innerHTML</a></code>.</p> -<p>Os links criados com o método <code>link()</code> tornam-se elementos na array de links do objeto <code>document</code>. Veja <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Document/links">document.links</a></code>.</p> +<p>Os links criados com o método <code>link()</code> tornam-se elementos na array de links do objeto <code>document</code>. Veja <code><a href="/en-US/docs/Web/API/Document/links">document.links</a></code>.</p> <h2 id="Exemplos">Exemplos</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html b/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html index 8a58612705..6e8892272a 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/localecompare/index.html @@ -34,7 +34,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/localeCompare <dd> <p>Esses argumentos personalizam o comportamento da função e permitem que os aplicativos especifiquem o idioma cujas convenções de formatação devem ser usadas. Em implementações que ignoram os argumentos <em><code>locales</code></em> e <em><code>options</code></em>, a localidade usada e a forma da string retornada são inteiramente dependentes da implementação.</p> - <p>Consulte o <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">construtor </a><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">Intl.Collator()</a></code> para obter detalhes sobre esses parâmetros e como usá-los.</p> + <p>Consulte o <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">construtor </a><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator">Intl.Collator()</a></code> para obter detalhes sobre esses parâmetros e como usá-los.</p> </dd> </dl> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/match/index.html b/files/pt-br/web/javascript/reference/global_objects/string/match/index.html index ee96efe8a5..817ce012cc 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/match/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/match/index.html @@ -15,7 +15,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match <h2 id="Summary" name="Summary">Resumo</h2> -<p>O método <code>match()</code> retorna uma correspondência entre uma string com uma <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>.</p> +<p>O método <code>match()</code> retorna uma correspondência entre uma string com uma <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>.</p> <h2 id="Syntax" name="Syntax">Sintaxe</h2> @@ -25,7 +25,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match <dl> <dt><code>regexp</code></dt> - <dd>Um objeto de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>. Se <em><code>regexp</code></em> não for uma <strong><code>RegExp</code></strong>, o mesmo será convertido para uma nova RegExp usando <code>new <strong>RegExp</strong>(<em>regexp</em>)</code>.<br> + <dd>Um objeto de <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>. Se <em><code>regexp</code></em> não for uma <strong><code>RegExp</code></strong>, o mesmo será convertido para uma nova RegExp usando <code>new <strong>RegExp</strong>(<em>regexp</em>)</code>.<br> <br> Se você não fornecer nenhum parâmetro ao usar o método <code>match()</code>, você obterá um {{jsxref ("Array")}} com uma string vazia: <code>[""]</code>.</dd> </dl> @@ -48,7 +48,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match <dl> <dt><code>groups</code></dt> - <dd>Um objeto de grupos de captura nomeados cujas chaves são os nomes, e valores são os grupos de captura ou {{jsxref ("undefined")}} se nenhum grupo de captura nomeado foi definido. Consulte <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos e Intervalos</a> para obter mais informações.</dd> + <dd>Um objeto de grupos de captura nomeados cujas chaves são os nomes, e valores são os grupos de captura ou {{jsxref ("undefined")}} se nenhum grupo de captura nomeado foi definido. Consulte <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">Grupos e Intervalos</a> para obter mais informações.</dd> <dt><code>index</code></dt> <dd>O índice da pesquisa em que o resultado foi encontrado.</dd> <dt><code>input</code></dt> @@ -106,7 +106,7 @@ console.log(matches_array); </pre> <div class="blockIndicator note"> -<p><strong>Nota:</strong> Veja também {{jsxref("String.prototype.matchAll()")}} e <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions#Pesquisa_avan%C3%A7ada_com_Flags">Pesquisa avançada com sinalizadores</a>.</p> +<p><strong>Nota:</strong> Veja também {{jsxref("String.prototype.matchAll()")}} e <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions#Pesquisa_avan%C3%A7ada_com_Flags">Pesquisa avançada com sinalizadores</a>.</p> </div> <h3 id="Usando_grupos_de_captura_nomeados">Usando grupos de captura nomeados</h3> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html b/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html index ce5c1cb121..66e09136e6 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/matchall/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll --- <div>{{JSRef}}</div> -<p>O método <code>matchAll()</code> retorna um iterador de todos os resultados correspondentes a uma string em relação a uma <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>, incluindo <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a>.</p> +<p>O método <code>matchAll()</code> retorna um iterador de todos os resultados correspondentes a uma string em relação a uma <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">expressão regular</a>, incluindo <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a>.</p> <div>{{EmbedInteractiveExample("pages/js/string-matchall.html")}}</div> @@ -38,13 +38,13 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/matchAll <h3 id="Valor_retornado">Valor retornado</h3> -<p>Um <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Iteratores_e_geradores">iterador</a> (que não é um iterável reinicializável).</p> +<p>Um <a href="/pt-BR/docs/Web/JavaScript/Guide/Iteratores_e_geradores">iterador</a> (que não é um iterável reinicializável).</p> <h2 id="Exemplos">Exemplos</h2> <h3 id="Regexp.exec_e_matchAll">Regexp.exec() e matchAll()</h3> -<p>Antes da adição do <code>matchAll()</code> ao JavaScript, era possível usar chamadas <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (e regexes com a sinalização (flag) <code>/g</code>) em um loop para obter todas as correspondências:</p> +<p>Antes da adição do <code>matchAll()</code> ao JavaScript, era possível usar chamadas <a href="/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">regexp.exec</a> (e regexes com a sinalização (flag) <code>/g</code>) em um loop para obter todas as correspondências:</p> <pre class="brush: js notranslate">const regexp = RegExp('foo[a-z]*','g'); const str = 'table football, foosball'; diff --git a/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html b/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html index dbab5a42d8..33d3f06b71 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/normalize/index.html @@ -113,7 +113,7 @@ console.log(string2.codePointAt(0).toString(16)); // f1</pre> <p>Por exemplo:</p> <ul> - <li>o ponto de código U+FB00 representa a <a href="https://wiki.developer.mozilla.org/en-US/docs/Glossary/Ligature">ligadura</a> <code>"ff"</code>. É compatível com dois pontos de código U+0066 consecutivos (<code>"ff"</code>).</li> + <li>o ponto de código U+FB00 representa a <a href="/en-US/docs/Glossary/Ligature">ligadura</a> <code>"ff"</code>. É compatível com dois pontos de código U+0066 consecutivos (<code>"ff"</code>).</li> <li>o ponto de código U+24B9 representa o símbolo <code>"Ⓓ"</code>. É compatível com o ponto de código U+0044 (<code>"D"</code>).</li> </ul> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html b/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html index 8f75880d13..ee7cfe856f 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/raw/index.html @@ -11,7 +11,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/raw --- <div>{{JSRef}}</div> -<p>O método estático <code>String.raw()</code> é uma função tag de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings">modelos literais</a>, similar ao prefixo <code>r</code> no Python ou o prefixo <code>@</code> no C# para string literais (Mas não é <em>idêntico</em>, existe uma diferença, veja explicações nessa <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">discussão</a>). Ele é usado para pegar as strings no formato "cru" de modelos literais, isto é, substituições (ex: <font face="consolas, Liberation Mono, courier, monospace"><span style="">${foo}</span></font>) são processados, mas "escapes" (ex:. <code>\n</code>) não são.</p> +<p>O método estático <code>String.raw()</code> é uma função tag de <a href="/pt-BR/docs/Web/JavaScript/Reference/template_strings">modelos literais</a>, similar ao prefixo <code>r</code> no Python ou o prefixo <code>@</code> no C# para string literais (Mas não é <em>idêntico</em>, existe uma diferença, veja explicações nessa <a href="https://bugs.chromium.org/p/v8/issues/detail?id=5016">discussão</a>). Ele é usado para pegar as strings no formato "cru" de modelos literais, isto é, substituições (ex: <font face="consolas, Liberation Mono, courier, monospace"><span style="">${foo}</span></font>) são processados, mas "escapes" (ex:. <code>\n</code>) não são.</p> <p>{{EmbedInteractiveExample("pages/js/string-raw.html")}}</p> @@ -46,7 +46,7 @@ String.raw`templateString` <h2 id="Descrição">Descrição</h2> -<p>Na maioria dos casos, <code>String.raw()</code> é usado com modelos de strings. A primeira sintaxe mencionada acima raramente é usada, porque o mecanismo JavaScript a chamará com os argumentos apropriados para você, assim como com outras <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings">funções de tag</a>.</p> +<p>Na maioria dos casos, <code>String.raw()</code> é usado com modelos de strings. A primeira sintaxe mencionada acima raramente é usada, porque o mecanismo JavaScript a chamará com os argumentos apropriados para você, assim como com outras <a href="/pt-BR/docs/Web/JavaScript/Reference/template_strings">funções de tag</a>.</p> <p><code>String.raw()</code> é a única função de tag embutida de strings de template; ele funciona exatamente como a função de modelo padrão e executa a concatenação. Você pode até reimplementá-lo com o código JavaScript normal.</p> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html b/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html index 481d976cb6..bb73f2e35b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/replace/index.html @@ -35,7 +35,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/replace <dd>A função (function) chamada cria uma nova substring (para ser colocada no lugar da substring recebida pelo parametro #1). Os argumentos fornececidos para essa função estão descritos na seção "<a href="#" id="Specifying_a_string_as_a_parameter">Especificando uma função como parâmetro</a>" mais abaixo.</dd> <dt><code>flags</code> {{non-standard_inline}}</dt> <dd> - <p>Uma string especificando uma combinação de <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">flags de expressão regular</a>. O uso do parâmetro <code>flags</code> no método <code>String.prototype.replace()</code> é não-padrão. Ao invés de usar este parâmetro, use um objeto {{jsxref("Global_Objects/RegExp", "RegExp")}} com as flags correspondentes. O valor deste parâmetro deve ser uma string consistindo em um ou mais dos seguintes caracteres para afetar a operação, tais como descrito:</p> + <p>Uma string especificando uma combinação de <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">flags de expressão regular</a>. O uso do parâmetro <code>flags</code> no método <code>String.prototype.replace()</code> é não-padrão. Ao invés de usar este parâmetro, use um objeto {{jsxref("Global_Objects/RegExp", "RegExp")}} com as flags correspondentes. O valor deste parâmetro deve ser uma string consistindo em um ou mais dos seguintes caracteres para afetar a operação, tais como descrito:</p> <dl> <dt><code>g</code></dt> @@ -159,7 +159,7 @@ console.log(newstr); // retorna "Twas the night before Christmas..."</code></pre> <div class="blockIndicator note"> -<p><strong>Nota:</strong> Veja <a href="https://wiki.developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">este guia</a> para maiores explicações as sobre expressões regulares.</p> +<p><strong>Nota:</strong> Veja <a href="/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions">este guia</a> para maiores explicações as sobre expressões regulares.</p> </div> <h3 id="Usando_global_e_ignore_com_replace">Usando <code>global</code> e <code>ignore</code> com <code>replace()</code></h3> @@ -176,7 +176,7 @@ console.log(newstr); <h3 id="Trocando_palavras_em_uma_string">Trocando palavras em uma string</h3> -<p>O script a seguir troca as palavras na string. Para o texto que vai substituir, o script usa <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a> e os padrões de substituição <code>$1</code> e <code>$2</code>.</p> +<p>O script a seguir troca as palavras na string. Para o texto que vai substituir, o script usa <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions/Groups_and_Ranges">grupos de captura</a> e os padrões de substituição <code>$1</code> e <code>$2</code>.</p> <pre class="notranslate"><code>var re = /(\w+)\s(\w+)/; var str = 'John Smith'; diff --git a/files/pt-br/web/javascript/reference/global_objects/string/small/index.html b/files/pt-br/web/javascript/reference/global_objects/string/small/index.html index dbec8f2227..a6e2d0809b 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/small/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/small/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/small --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>small()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/small"><small></a></code> que faz com que uma string seja exibida em uma fonte pequena.</p> +<p>O método <code>small()</code> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/small"><small></a></code> que faz com que uma string seja exibida em uma fonte pequena.</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/small <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/small"><small></a></code>.</p> +<p>Uma string contendo um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/small"><small></a></code>.</p> <h2 id="Descrição">Descrição</h2> @@ -40,7 +40,7 @@ console.log(worldString.big()); // <big>Olá, mundo</big> console.log(worldString.fontsize(7)); // <font size="7">Olá, mundo</fontsize> </pre> -<p>Com o objeto <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a> você pode pegar o atributo de estilo do elemento e manipulá-lo de forma mais genérica, por exemplo:</p> +<p>Com o objeto <a href="/en-US/docs/Web/API/ElementCSSInlineStyle/style">element.style</a> você pode pegar o atributo de estilo do elemento e manipulá-lo de forma mais genérica, por exemplo:</p> <pre class="brush: js notranslate">document.getElementById('#oIdDoElemento').style.fontSize = '0.7em'; </pre> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html b/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html index 890938382b..c7490676e6 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/strike/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/strike --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>strike()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/strike"><strike></a></code> que faz com que uma string seja exibida com o texto riscado.</p> +<p>O método <code>strike()</code> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/strike"><strike></a></code> que faz com que uma string seja exibida com o texto riscado.</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/strike <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/strike"><strike></a></code>.</p> +<p>Uma string contendo um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/strike"><strike></a></code>.</p> <h2 id="Descrição">Descrição</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html b/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html index f687eb6c76..8782607d25 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/sub/index.html @@ -12,7 +12,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/sub --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>sub()</code> cria um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/sub"><sub></a></code> que faz com que uma string seja exibida como subscrito (texto pequeno).</p> +<p>O método <code>sub()</code> cria um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/sub"><sub></a></code> que faz com que uma string seja exibida como subscrito (texto pequeno).</p> <h2 id="Sintaxe">Sintaxe</h2> @@ -20,7 +20,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/sub <h3 id="Valor_retornado">Valor retornado</h3> -<p>Uma string contendo um elemento HTML <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/sub"><sub></a></code>.</p> +<p>Uma string contendo um elemento HTML <code><a href="/en-US/docs/Web/HTML/Element/sub"><sub></a></code>.</p> <h2 id="Descrição">Descrição</h2> diff --git a/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html b/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html index 7fd1b9cd38..1cee97e0ed 100644 --- a/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html +++ b/files/pt-br/web/javascript/reference/global_objects/string/sup/index.html @@ -13,7 +13,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/sup --- <div>{{JSRef}} {{deprecated_header}}</div> -<p>O método <code>sup()</code> cria um elemento HTML <code><a class="external external-icon" href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/sup" rel="noopener"><sup></a></code> que faz com que uma string seja exibida como sobrescrito.</p> +<p>O método <code>sup()</code> cria um elemento HTML <code><a class="external external-icon" href="/en-US/docs/Web/HTML/Element/sup" rel="noopener"><sup></a></code> que faz com que uma string seja exibida como sobrescrito.</p> <h2 id="Sintaxe">Sintaxe</h2> diff --git a/files/pt-br/web/javascript/reference/statements/export/index.html b/files/pt-br/web/javascript/reference/statements/export/index.html index f429a13988..f2761d77ce 100644 --- a/files/pt-br/web/javascript/reference/statements/export/index.html +++ b/files/pt-br/web/javascript/reference/statements/export/index.html @@ -167,7 +167,7 @@ console.log(foo); // 4.555806215962888</pre> <ul> <li>Você pode incluir esse script no seu código HTML através do elemento {{htmlelement("script")}} do tipo="module", de modo que ele seja reconhecido e tratado apropriadamente.</li> - <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li> + <li>Você não pode executar módulos JS através de <code>file://</code> URL — você receberá errors <a href="/en-US/docs/Web/HTTP/CORS">CORS</a>. Você deve rodá-los através de um servidor HTTP.</li> </ul> <h3 id="Usando_a_exportação_padrão">Usando a exportação padrão</h3> diff --git a/files/pt-br/web/web_components/index.html b/files/pt-br/web/web_components/index.html index e354616656..accbaec2f7 100644 --- a/files/pt-br/web/web_components/index.html +++ b/files/pt-br/web/web_components/index.html @@ -86,7 +86,7 @@ translation_of: Web/Web_Components <dt>CSS pseudo-elementos</dt> <dd>Pseudo-elementos relacionados especificamente a elementos customizados: <ul> - <li>{{cssxref("::part")}}: Representa qualquer elemento dentro de uma <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> que tenha um atributo {{HTMLAttrxRef("part")}} correspondente.</li> + <li>{{cssxref("::part")}}: Representa qualquer elemento dentro de uma <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow tree</a> que tenha um atributo {{HTMLAttrxRef("part")}} correspondente.</li> </ul> </dd> </dl> diff --git a/files/ru/glossary/accessibility_tree/index.html b/files/ru/glossary/accessibility_tree/index.html index 6f530f1449..ed2039245d 100644 --- a/files/ru/glossary/accessibility_tree/index.html +++ b/files/ru/glossary/accessibility_tree/index.html @@ -30,7 +30,7 @@ translation_of: Glossary/Accessibility_tree <p>Пока еще в черновике Web Incubator Community Group, <strong><a href="https://wicg.github.io/aom/explainer.html">Объектная модель доступности</a> (AOM)</strong> намерена внедрить API, которые упрощают выражение семантики доступности и потенциально разрешают доступ к вычисленному дереву доступности.</p> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ru/docs/Glossary">Глоссарий</a> diff --git a/files/ru/glossary/bootstrap/index.html b/files/ru/glossary/bootstrap/index.html index 23ef352d7b..33e7b73a2a 100644 --- a/files/ru/glossary/bootstrap/index.html +++ b/files/ru/glossary/bootstrap/index.html @@ -14,7 +14,7 @@ original_slug: Глоссарий/Bootstrap <p>Изначально Bootstrap назывался Twitter Blueprint и был разработан командой, работающей в <a href="https://twitter.com/">Twitter</a>. Он поддерживает адаптивный дизайн и имеет предопределённые шаблоны дизайна, которые вы можете использовать из коробки или настроить для своих нужд с помощью кода. Вам также не нужно беспокоиться о совместимости с другими браузерами, так как Bootstrap совместим со всеми современными браузерами и новыми версиями {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} .</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{interwiki("wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} в Wikipedia</li> <li><a href="https://getbootstrap.com/">Скачать Bootstrap</a></li> diff --git a/files/ru/glossary/call_stack/index.html b/files/ru/glossary/call_stack/index.html index ba24aad619..21f77b6330 100644 --- a/files/ru/glossary/call_stack/index.html +++ b/files/ru/glossary/call_stack/index.html @@ -90,7 +90,7 @@ greeting(); <li>{{Interwiki("wikipedia", "Call stack")}} на Википедии</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ru/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/crawler/index.html b/files/ru/glossary/crawler/index.html index a54589ad50..daf7041a5c 100644 --- a/files/ru/glossary/crawler/index.html +++ b/files/ru/glossary/crawler/index.html @@ -12,7 +12,7 @@ original_slug: Глоссарий/Crawler <li><a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D1%80%D0%BE%D0%B1%D0%BE%D1%82">Поисковый робот</a> на Википедии</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/fps/index.html b/files/ru/glossary/fps/index.html index 8634a68c4c..6a6fd11b56 100644 --- a/files/ru/glossary/fps/index.html +++ b/files/ru/glossary/fps/index.html @@ -18,4 +18,4 @@ original_slug: Глоссарий/FPS <li>{{Interwiki("wikipedia", "Кадровая частота")}} на Википедии</li> </ul> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/ru/glossary/global_object/index.html b/files/ru/glossary/global_object/index.html index 93b4b1acfc..cfda431f7c 100644 --- a/files/ru/glossary/global_object/index.html +++ b/files/ru/glossary/global_object/index.html @@ -51,7 +51,7 @@ window.greeting(); // Тоже самое что и обычный вызов: g console.log("Hi!"); }</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/http_2/index.html b/files/ru/glossary/http_2/index.html index dbf27aa9ba..0a0853d092 100644 --- a/files/ru/glossary/http_2/index.html +++ b/files/ru/glossary/http_2/index.html @@ -14,7 +14,7 @@ original_slug: Глоссарий/HTTP_2 <p>HTTP/2 никоим образом не изменяет семантику применяемую HTTP. Все основные концепции HTTP 1.1, такие как методы HTTP, коды статусов, URI, и поля заголовков останутся прежними. Вместо этого HTTP/2 изменит порядок(форму) данных и способ их передачи между клиентом и сервером, которые управляют всем процессом, и скроет сложность применения в новом обрамляющем слое. Это позволит использовать существующие приложения без изменений.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Основные сведения <ol> diff --git a/files/ru/glossary/loop/index.html b/files/ru/glossary/loop/index.html index 21221d230a..673db13cbd 100644 --- a/files/ru/glossary/loop/index.html +++ b/files/ru/glossary/loop/index.html @@ -73,7 +73,7 @@ while(i < 5){ <li>Блок кода будет продолжать работать, пока переменная (i) меньше 5.</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Общие сведения <ol> diff --git a/files/ru/glossary/method/index.html b/files/ru/glossary/method/index.html index a6c4943d83..ca791c83f1 100644 --- a/files/ru/glossary/method/index.html +++ b/files/ru/glossary/method/index.html @@ -28,7 +28,7 @@ original_slug: Глоссарий/Method <li><a href="/ru/docs/Web/JavaScript/Reference">Список встроенных методов JavaScript</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ru/docs/Glossary">Глоссарий MDN</a> diff --git a/files/ru/glossary/scroll_container/index.html b/files/ru/glossary/scroll_container/index.html index 5b43899c2c..3de9232490 100644 --- a/files/ru/glossary/scroll_container/index.html +++ b/files/ru/glossary/scroll_container/index.html @@ -8,7 +8,7 @@ original_slug: Глоссарий/Scroll_container <p>Scroll-контейнер позволяет пользователю с помощью прокрутки достигать участков переполняющего содержимого, которые в ином случае были бы обрезаны и поэтому недоступны для просмотра. Видимая часть scroll-контейнера называется {{glossary("Scrollport", "scrollport")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>: diff --git a/files/ru/glossary/semantics/index.html b/files/ru/glossary/semantics/index.html index 3fe96846c9..c4c0ce785d 100644 --- a/files/ru/glossary/semantics/index.html +++ b/files/ru/glossary/semantics/index.html @@ -70,7 +70,7 @@ original_slug: Глоссарий/Semantics <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/type_coercion/index.html b/files/ru/glossary/type_coercion/index.html index f7fe414b3c..74080fad6c 100644 --- a/files/ru/glossary/type_coercion/index.html +++ b/files/ru/glossary/type_coercion/index.html @@ -27,7 +27,7 @@ console.log(sum);</pre> <pre class="brush: js">sum = Number(value1) + value2;</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ru/docs/Glossary">Глоссарий</a> diff --git a/files/ru/glossary/type_conversion/index.html b/files/ru/glossary/type_conversion/index.html index eae5f14c8a..14f47a0438 100644 --- a/files/ru/glossary/type_conversion/index.html +++ b/files/ru/glossary/type_conversion/index.html @@ -13,7 +13,7 @@ original_slug: Глоссарий/Type_Conversion --- <p>Преобразование типов (type conversion) означает передачу данных из одного типа данных в другой. <em>Неявное преобразование</em> происходит, когда компилятор автоматически присваивает (назначает) типы данных, но исходный код также может <em>явно</em> требовать преобразования для завершения. Например, в случае инструкции <code>5+2.0</code>, число с плавающей точкой <code>2.0</code> неявно преобразуется в целое число, но в случае инструкции <code>Number("0x11")</code> строка "0x11" явно преобразуется в типизированное число 17.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ru/docs/Glossary">Глоссарий</a> diff --git a/files/ru/glossary/whitespace/index.html b/files/ru/glossary/whitespace/index.html index 059b742fbf..ff6d6f9541 100644 --- a/files/ru/glossary/whitespace/index.html +++ b/files/ru/glossary/whitespace/index.html @@ -10,7 +10,7 @@ original_slug: Глоссарий/Пробельные_символы <p><a href="https://html.spec.whatwg.org/">Текущий стандарт HTML</a> описывает как пробельные 5 символов из таблицы ASCII: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR и U+0020 SPACE. В тексте они будут отображены как обычные пробелы, а последовательность пробельных символов, в большинстве случаев, будет схлопнута в один пробел (это поведение можно изменить CSS-свойством {{cssxref("white-space")}}). Они могут быть использованы как разделители между названием элемента и его атрибутами, между названиями классов и т. д.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Спецификация <ol> diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index 9bfa53d259..2bb74d406d 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -398,7 +398,7 @@ function voiceMute() { // toggle to mute and unmute sound <li><a href="https://github.com/mattlima/mooog">Mooog</a>: jQuery-style chaining of AudioNodes, mixer-style sends/returns, and more.</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <h3 id="Quicklinks">Quicklinks</h3> <ol> diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 3863c2862e..ee7162f19b 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -45,7 +45,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 0bf469ac46..4fd846a256 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -665,7 +665,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В данной статье мы очень кратко рассмотрели спецификацию Grid Layout. Поиграйте с примерами кода и переходите <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">к следующей части нашего гида, где мы детально покопаемся в недрах CSS Grid Layout</a>.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 80d1ad38af..cce90b7f30 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -644,7 +644,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Однако, если вы устанавливаете автоматические поля, используя <code>margin-right</code> или <code>margin-left</code>, или абсолютно позиционирующий элемент, используя <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index d94570b6f2..f7b2f65cb7 100644 --- a/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/ru/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -440,7 +440,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <p><a href="https://drafts.csswg.org/css-logical/">Спецификация логических свойств CSS</a> имеет целью изменить это и в будущем мы сможем использовать <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties">логические эквиваленты</a> для свойств, такие как {{cssxref ("margin-left")}} и {{cssxref ("margin-right") }}, в нашем CSS. Firefox уже реализовал их, поэтому вы можете попробовать их прямо сейчас в Firefox. Я знаю в будущем, как только эти корабли повсюду, ваши знания «Блокировать и встроить» с помощью Grid означают, что вы точно знаете, как их использовать.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index bdf9906212..830df019a4 100644 --- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html @@ -471,7 +471,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html index 4e6e70cf5f..bac225352c 100644 --- a/files/ru/web/css/css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/index.html @@ -177,7 +177,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 043d708e69..4d95530d74 100644 --- a/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/ru/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -434,7 +434,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 682f3051b8..8c8713b6b4 100644 --- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -594,7 +594,7 @@ original_slug: >- <p>Также помните, что элементы на гриде могут перекрывать друг друга, если вы намеренно разместили их так, чтобы они друг друга перекрывали. Подобное поведение позволяет получить интересные эффекты, но, если вы некорректно задали начальные и конечные линии, результат может неприятно вас удивить. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> будет крайне полезен в процессе обучения, особенно, когда вы строите сложные гриды.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index 625700ca08..42a0ac6b0d 100644 --- a/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -534,7 +534,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <li>For additional common layout patterns see <em><a href="http://gridbyexample.com">Grid by Example</a></em>, where there are many smaller examples of grid layout and also some larger UI patterns and full page layouts.</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index d92d33d0f7..1d3c710434 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -567,7 +567,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Как вы могли увидеть, CSS Grid Layout - это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index 2712892e54..eef3305724 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -140,7 +140,7 @@ grid-area: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 226db2bb76..3d8b2e0892 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -150,7 +150,7 @@ grid-auto-flow: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html index 5817eef381..b3e5722198 100644 --- a/files/ru/web/css/grid-row-start/index.html +++ b/files/ru/web/css/grid-row-start/index.html @@ -173,7 +173,7 @@ grid-row-start: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 3e9a83e744..9930232eec 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -124,7 +124,7 @@ grid-template-areas: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 546a42ed31..15278dec92 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -150,7 +150,7 @@ grid-template-columns: unset; <li>Видео туториал: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index e4343f33b6..0a0d5ec229 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -139,7 +139,7 @@ grid-template-rows: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index f400457ae7..d46d0121c6 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -130,7 +130,7 @@ grid: unset; <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong><a href="/en-US/docs/Web/CSS/Reference">CSS ссылки </a></strong></li> diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html index 5f9739d1ae..d4a4a37361 100644 --- a/files/ru/web/css/minmax()/index.html +++ b/files/ru/web/css/minmax()/index.html @@ -132,7 +132,7 @@ minmax(auto, 300px) <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/ru/web/index.html b/files/ru/web/index.html index 2f9e882a5d..e084f7e316 100644 --- a/files/ru/web/index.html +++ b/files/ru/web/index.html @@ -6,7 +6,7 @@ tags: - Web translation_of: Web --- -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="/ru/docs/Web">Веб-технологии для разработчиков </a></strong></li> <li class="toggle"> diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 83915af3b0..566a22782a 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1377,6 +1377,7 @@ /zh-CN/docs/Web/API/IDBCursor.direction /zh-CN/docs/Web/API/IDBCursor/direction /zh-CN/docs/Web/API/IDBFactory.open /zh-CN/docs/Web/API/IDBFactory/open /zh-CN/docs/Web/API/IDBObjectStore.openCursor /zh-CN/docs/Web/API/IDBObjectStore/openCursor +/zh-CN/docs/Web/API/Index /zh-CN/docs/conflicting/Web/API /zh-CN/docs/Web/API/IndexedDB_API/IDBObjectStore /zh-CN/docs/Web/API/IDBObjectStore /zh-CN/docs/Web/API/Intersection_Observer_API/点观察者API的时序元素可见性 /zh-CN/docs/Web/API/Intersection_Observer_API/Timing_element_visibility /zh-CN/docs/Web/API/Location.replace /zh-CN/docs/Web/API/Location/replace @@ -1641,7 +1642,7 @@ /zh-CN/docs/Web/API/window.requestAnimationFrame /zh-CN/docs/Web/API/Window/requestAnimationFrame /zh-CN/docs/Web/API/剪贴板_API /zh-CN/docs/Web/API/Clipboard_API /zh-CN/docs/Web/API/开发式平台 /zh-CN/docs/Web/API/Push_API -/zh-CN/docs/Web/API/指数 /zh-CN/docs/Web/API/Index +/zh-CN/docs/Web/API/指数 /zh-CN/docs/conflicting/Web/API /zh-CN/docs/Web/API/支付_请求_接口 /zh-CN/docs/Web/API/Payment_Request_API /zh-CN/docs/Web/API/支付_请求_接口/Concepts /zh-CN/docs/Web/API/Payment_Request_API/Concepts /zh-CN/docs/Web/API/消息事件 /zh-CN/docs/Web/API/MessageEvent diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 091b99d93b..c7337931f9 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -16296,13 +16296,6 @@ "ice-i-snow" ] }, - "Web/API/Index": { - "modified": "2020-09-07T03:42:22.980Z", - "contributors": [ - "SphinxKnight", - "hl7514576" - ] - }, "Web/API/IndexedDB_API": { "modified": "2020-08-17T03:58:13.141Z", "contributors": [ @@ -47010,11 +47003,10 @@ ] }, "conflicting/Web/API": { - "modified": "2019-03-23T23:09:29.332Z", + "modified": "2020-09-07T03:42:22.980Z", "contributors": [ - "mySoul", - "teoli", - "AlexChao" + "SphinxKnight", + "hl7514576" ] }, "conflicting/Web/API/Beacon_API": { diff --git a/files/zh-cn/web/api/index/index.html b/files/zh-cn/conflicting/web/api/index.html index e910b907d2..70b70e7ec2 100644 --- a/files/zh-cn/web/api/index/index.html +++ b/files/zh-cn/conflicting/web/api/index.html @@ -1,7 +1,7 @@ --- title: 指数 -slug: Web/API/Index +slug: conflicting/Web/API translation_of: Web/API/Index -original_slug: Web/API/指数 +original_slug: Web/API/Index --- <p>{{Index("/zh-CN/docs/Web/API")}}</p> diff --git a/files/zh-cn/glossary/character_set/index.html b/files/zh-cn/glossary/character_set/index.html index 9dc43c66b5..450d517a72 100644 --- a/files/zh-cn/glossary/character_set/index.html +++ b/files/zh-cn/glossary/character_set/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/character_set <p>如果一个字符集使用不正确(例如，对于以 Big5 编码的文章使用 Unicode)，你可能会看到全是乱码，这被称为 {{Interwiki("wikipedia", "Mojibake")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Wikipedia 文章 <ol> diff --git a/files/zh-cn/glossary/crawler/index.html b/files/zh-cn/glossary/crawler/index.html index 27d5a0f735..048962ae9b 100644 --- a/files/zh-cn/glossary/crawler/index.html +++ b/files/zh-cn/glossary/crawler/index.html @@ -16,7 +16,7 @@ translation_of: Glossary/Crawler <li>维基百科上关于{{Interwiki("wikipedia", "Web crawler")}}的内容</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/">MDN网络文档术语表</a> diff --git a/files/zh-cn/glossary/cross_axis/index.html b/files/zh-cn/glossary/cross_axis/index.html index 63d0665cce..1c67022dc9 100644 --- a/files/zh-cn/glossary/cross_axis/index.html +++ b/files/zh-cn/glossary/cross_axis/index.html @@ -37,7 +37,7 @@ original_slug: Glossary/交叉轴 <li>CSS 弹性容器指南：<em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Mastering wrapping of flex items</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/css_selector/index.html b/files/zh-cn/glossary/css_selector/index.html index 88170cdb72..d5967dc2f9 100644 --- a/files/zh-cn/glossary/css_selector/index.html +++ b/files/zh-cn/glossary/css_selector/index.html @@ -53,7 +53,7 @@ div.warning { <p>{{EmbedLiveSample("glossary-selector-details", 640, 210)}}</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>查看我们的关于选择器的介绍 <a href="/zh-CN/docs/Learn/CSS/Building_blocks/Selectors">CSS选择器</a></li> <li>基础选择器 diff --git a/files/zh-cn/glossary/database/index.html b/files/zh-cn/glossary/database/index.html index 5b0c1a3082..3e8a5ebb4b 100644 --- a/files/zh-cn/glossary/database/index.html +++ b/files/zh-cn/glossary/database/index.html @@ -14,7 +14,7 @@ original_slug: Glossary/数据库 <p>浏览器也有他们特有的数据库系统，被称作 {{glossary("IndexedDB")}}。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>维基百科上的词条 {{Interwiki("wikipedia", "Database")}} <ol> diff --git a/files/zh-cn/glossary/flexbox/index.html b/files/zh-cn/glossary/flexbox/index.html index c03d2df467..617ab9d377 100644 --- a/files/zh-cn/glossary/flexbox/index.html +++ b/files/zh-cn/glossary/flexbox/index.html @@ -43,7 +43,7 @@ translation_of: Glossary/Flexbox <li>CSS Flexbox Guide: <em><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typical use cases of flexbox</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/fork/index.html b/files/zh-cn/glossary/fork/index.html index 6778a8ff6c..66c421a698 100644 --- a/files/zh-cn/glossary/fork/index.html +++ b/files/zh-cn/glossary/fork/index.html @@ -22,7 +22,7 @@ translation_of: Glossary/Fork <li><a href="https://www.libreoffice.org/about-us/who-are-we/">LibreOffice, a fork of OpenOffice</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>基本知识 <ol> diff --git a/files/zh-cn/glossary/global_object/index.html b/files/zh-cn/glossary/global_object/index.html index 5635c4661d..81732082ce 100644 --- a/files/zh-cn/glossary/global_object/index.html +++ b/files/zh-cn/glossary/global_object/index.html @@ -50,7 +50,7 @@ window.greeting(); // It is the same as the normal invoking: greeting(); console.log("Hi!"); }</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/graceful_degradation/index.html b/files/zh-cn/glossary/graceful_degradation/index.html index 2982cc0074..721c5cc632 100644 --- a/files/zh-cn/glossary/graceful_degradation/index.html +++ b/files/zh-cn/glossary/graceful_degradation/index.html @@ -22,7 +22,7 @@ original_slug: Glossary/优雅降级 <li>维基百科的{{Interwiki("wikipedia", "优雅降级")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web 文档词汇表</a> diff --git a/files/zh-cn/glossary/gzip_compression/index.html b/files/zh-cn/glossary/gzip_compression/index.html index 8c7e9e0f4a..800d8c12a6 100644 --- a/files/zh-cn/glossary/gzip_compression/index.html +++ b/files/zh-cn/glossary/gzip_compression/index.html @@ -17,7 +17,7 @@ translation_of: Glossary/GZip_compression <li>中文维基百科上的 <a href="https://zh.wikipedia.org/wiki/Gzip">Gzip</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li> <details open><summary><a href="/zh-CN/docs/Glossary">MDN 术语表</a></summary> {{ListSubpages("/zh-CN/docs/Glossary")}}</details> diff --git a/files/zh-cn/glossary/http_2/index.html b/files/zh-cn/glossary/http_2/index.html index 0572bafbf0..c3af127d0d 100644 --- a/files/zh-cn/glossary/http_2/index.html +++ b/files/zh-cn/glossary/http_2/index.html @@ -10,7 +10,7 @@ translation_of: Glossary/HTTP_2 <p>HTTP/2 不会修改 HTTP 协议的语义。 HTTP 1.1中的所有核心概念（例如 HTTP 方法，状态码，URI 和 headers）都得以保留。 而是修改了 HTTP/2 数据在客户端和服务器之间的格式（帧）和传输方式，这两者都管理整个过程，并在新的框架层内隐藏了应用程序的复杂性。 所以，所有现有的应用程序都可以不经修改地交付。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>常识 <ol> diff --git a/files/zh-cn/glossary/http_3/index.html b/files/zh-cn/glossary/http_3/index.html index abd624776b..96350153cb 100644 --- a/files/zh-cn/glossary/http_3/index.html +++ b/files/zh-cn/glossary/http_3/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/HTTP_3 --- <p><strong><font><font>HTTP/3</font></font></strong><font><font>是</font></font><font><font>继</font></font>{{glossary("HTTP 2", "HTTP/2")}}<font><font>即将到来的</font><a href="/zh-CN/docs/Web/HTTP/Basics_of_HTTP"><font>HTTP网络协议的</font></a><font>主要修订版。</font></font><font><font>HTTP/3的要点是它使用名为QUIC</font><font>的新</font></font>{{glossary("UDP")}}<font><font>协议代替</font></font>{{glossary("TCP")}}<font><font>。</font></font></p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>基础知识 <ol> diff --git a/files/zh-cn/glossary/http_header/index.html b/files/zh-cn/glossary/http_header/index.html index e176995fc8..abb83200b4 100644 --- a/files/zh-cn/glossary/http_header/index.html +++ b/files/zh-cn/glossary/http_header/index.html @@ -48,7 +48,7 @@ X-Cache: Hit from cloudfront X-Cache-Info: cached </pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>规范 <ol> diff --git a/files/zh-cn/glossary/index.html b/files/zh-cn/glossary/index.html index 2d27a1dfde..43354124dd 100644 --- a/files/zh-cn/glossary/index.html +++ b/files/zh-cn/glossary/index.html @@ -29,7 +29,7 @@ translation_of: Glossary <p>如果你想要了解更多关于如何对该术语表做贡献的相关信息，请访问<a href="/zh-CN/docs/MDN/Doc_status/Glossary">术语表文档状态页面</a>。</p> <div class="hidden"> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="/zh-CN/docs/Glossary">MDN Web 文档术语</a></strong>{{ListSubpagesForSidebar("/zh-CN/docs/Glossary", 0)}}</li> </ol> diff --git a/files/zh-cn/glossary/input_method_editor/index.html b/files/zh-cn/glossary/input_method_editor/index.html index 381c2ac71b..d4d1a6b9e0 100644 --- a/files/zh-cn/glossary/input_method_editor/index.html +++ b/files/zh-cn/glossary/input_method_editor/index.html @@ -15,7 +15,7 @@ translation_of: Glossary/Input_method_editor <li>使用手写识别在触摸屏上输入文本</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>维基百科文章 <ol> diff --git a/files/zh-cn/glossary/latency/index.html b/files/zh-cn/glossary/latency/index.html index 8159d00ea3..bc6eb38d21 100644 --- a/files/zh-cn/glossary/latency/index.html +++ b/files/zh-cn/glossary/latency/index.html @@ -16,4 +16,4 @@ translation_of: Glossary/Latency <li>理解延迟</li> </ul> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/zh-cn/glossary/ligature/index.html b/files/zh-cn/glossary/ligature/index.html index 4e22b4d696..e919f9d405 100644 --- a/files/zh-cn/glossary/ligature/index.html +++ b/files/zh-cn/glossary/ligature/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/Ligature <p>你可以在网页中使用 {{cssxref("font-variant-ligatures")}} 来实现连字</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{interwiki("wikipedia", "Typographic ligature", "Ligature")}} on Wikipedia</li> </ol> diff --git a/files/zh-cn/glossary/main_thread/index.html b/files/zh-cn/glossary/main_thread/index.html index ceb985bb00..2ce47d1a6f 100644 --- a/files/zh-cn/glossary/main_thread/index.html +++ b/files/zh-cn/glossary/main_thread/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/Main_thread <p>除非故意使用 <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers">web worker</a>，比如 <a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">service worker</a>，不然 JavaScript 只在线程中运行，所以脚本的运行时，很容易导致事件处理流程或绘制的延迟。主线程中运行的工作越少，就有越多的余地来处理用户事件，页面绘制和对用户保持响应。 </p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>另可参考 <ol> diff --git a/files/zh-cn/glossary/method/index.html b/files/zh-cn/glossary/method/index.html index 0d4e53b15d..54706f64d1 100644 --- a/files/zh-cn/glossary/method/index.html +++ b/files/zh-cn/glossary/method/index.html @@ -24,7 +24,7 @@ translation_of: Glossary/Method <li><a href="/en-US/docs/Web/JavaScript/Reference/Methods_Index">List of JavaScript built-in methods</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/zh-cn/glossary/nullish/index.html b/files/zh-cn/glossary/nullish/index.html index bcde8071c5..dff466ef8f 100644 --- a/files/zh-cn/glossary/nullish/index.html +++ b/files/zh-cn/glossary/nullish/index.html @@ -11,9 +11,3 @@ translation_of: Glossary/Nullish <p>{{Draft}}</p> <p>一个 nullish 值要么是 {{JSxRef("null")}} 要么是 {{JSxRef("undefined")}}。nullish 值总是 <a href="/zh-CN/docs/Glossary/Falsy">falsy</a>.。</p> - -<section id="Quick_Links"> -<ul> - <li class="hidden">{{Page("/en-US/docs/Glossary/Primitive", "Quick_Links")}}</li> -</ul> -</section> diff --git a/files/zh-cn/glossary/smtp/index.html b/files/zh-cn/glossary/smtp/index.html index 1bc6829af1..19c5cc7ad8 100644 --- a/files/zh-cn/glossary/smtp/index.html +++ b/files/zh-cn/glossary/smtp/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/SMTP <p>该协议相对简单。最复杂的部分在于添加支持不同的验证机制（<a class="external" href="http://en.wikipedia.org/wiki/Generic_Security_Services_Application_Program_Interface"><abbr title="Generic Security Services Application Program Interface">GSSAPI</abbr></a>， <a class="external" href="http://en.wikipedia.org/wiki/CRAM-MD5"><abbr title="challenge-response authentication mechanism">CRAM-MD5</abbr></a>，<a class="external" href="http://en.wikipedia.org/wiki/NTLM"><abbr title="NT LAN Manager">NTLM</abbr></a>，MSN，AUTH LOGIN，AUTH PLAIN等），处理错误响应以及在验证机制错误时进行状态回退（如服务器声明其支持某种机制但其实并不）。 </p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Glossary">术语表</a> diff --git a/files/zh-cn/glossary/type_conversion/index.html b/files/zh-cn/glossary/type_conversion/index.html index 863855caad..300aba36e3 100644 --- a/files/zh-cn/glossary/type_conversion/index.html +++ b/files/zh-cn/glossary/type_conversion/index.html @@ -10,7 +10,7 @@ original_slug: Glossary/类型转换 --- <p class="syntaxbox">类型转换（或类型变换；英文：Type conversion, typecasting）是指将数据由一种类型变换为另一种类型。在编译器自动赋值时,会发生<em>隐式转换</em>，但在代码中，也可以用一些写法强制要求进行<em>显式转换</em>。例如：在表达式 <code>5 + 2.0</code> 中，整数 <code>5</code> 被隐式转换为浮点数，但 <code>Number("0x11")</code> 和 "0x11" 则被显式转换为数字 17。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Glossary">术语</a> diff --git a/files/zh-cn/mozilla/firefox/releases/3.6/index.html b/files/zh-cn/mozilla/firefox/releases/3.6/index.html index 920c40fa26..a0b87cca2a 100644 --- a/files/zh-cn/mozilla/firefox/releases/3.6/index.html +++ b/files/zh-cn/mozilla/firefox/releases/3.6/index.html @@ -3,7 +3,7 @@ title: Firefox 3.6 for developers slug: Mozilla/Firefox/Releases/3.6 translation_of: Mozilla/Firefox/Releases/3.6 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html index 1202baaa23..a6eac54159 100644 --- a/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/zh-cn/mozilla/firefox/releases/3/updating_extensions/index.html @@ -6,7 +6,7 @@ tags: translation_of: Mozilla/Firefox/Releases/3/Updating_extensions original_slug: Updating_extensions_for_Firefox_3 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-cn/web/api/canvas_api/index.html b/files/zh-cn/web/api/canvas_api/index.html index c10f589b23..b2bb060ed4 100644 --- a/files/zh-cn/web/api/canvas_api/index.html +++ b/files/zh-cn/web/api/canvas_api/index.html @@ -135,4 +135,4 @@ ctx.fillRect(10, 10, 150, 100);</code></pre> <li><a href="/en-US/docs/Web/WebGL">WebGL</a></li> </ul> -<section id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/zh-cn/web/api/subtlecrypto/index.html b/files/zh-cn/web/api/subtlecrypto/index.html index 24dec9a283..c173e906e8 100644 --- a/files/zh-cn/web/api/subtlecrypto/index.html +++ b/files/zh-cn/web/api/subtlecrypto/index.html @@ -28,8 +28,8 @@ translation_of: Web/API/SubtleCrypto <p>这些函数你可以用来实现系统中的隐私和身份验证等安全功能。<strong>SubtleCrypto </strong>API提供了如下加密函数：</p> <p>* <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/sign">sign()</a></code> 、 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/verify">verify()</a></code>: 创建和验证数字签名。<br> - * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></code> and <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></code>: 加密和解密数据。<br> - * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></code>: create a fixed-length, collision-resistant digest of some data.</p> + * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/encrypt">encrypt()</a></code> 和 <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/decrypt">decrypt()</a></code>: 加密和解密数据。<br> + * <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest">digest()</a></code>：为数据生成一个定长的，防碰撞的消息摘要。</p> <h3 id="密钥管理功能">密钥管理功能</h3> @@ -232,9 +232,9 @@ translation_of: Web/API/SubtleCrypto <dl> <dt>{{domxref("SubtleCrypto.encrypt()")}}</dt> - <dd><code>以算法、密钥、</code>明文<code>为参数，返回一个包含加密数据的 </code>{{jsxref("Promise")}}对象。</dd> + <dd>以算法、密钥、明文为参数，返回一个包含加密数据的 {{jsxref("Promise")}} 对象。</dd> <dt>{{domxref("SubtleCrypto.decrypt()")}}</dt> - <dd><code>以算法、密钥、</code>明文<code>为参数，返回一个包含解密数据的 </code>{{jsxref("Promise")}}对象。</dd> + <dd>以算法、密钥、密文为参数，返回一个包含解密数据的 {{jsxref("Promise")}} 对象。</dd> <dt>{{domxref("SubtleCrypto.sign()")}}</dt> <dd>以文本、算法和密码为参数，返回一个包含签名的 {{jsxref("Promise")}}。</dd> <dt>{{domxref("SubtleCrypto.verify()")}}</dt> diff --git a/files/zh-cn/web/api/web_audio_api/index.html b/files/zh-cn/web/api/web_audio_api/index.html index f4f25afdfa..75edbde9bf 100644 --- a/files/zh-cn/web/api/web_audio_api/index.html +++ b/files/zh-cn/web/api/web_audio_api/index.html @@ -443,7 +443,7 @@ function voiceMute() { // toggle to mute and unmute sound <li><a href="https://github.com/goldfire/howler.js/">howler.js</a>: a JS audio library that defaults to <a href="https://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html">Web Audio API</a> and falls back to <a href="http://www.whatwg.org/specs/web-apps/current-work/#the-audio-element">HTML5 Audio</a>, as well as providing other useful features.</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <h3 id="Quicklinks">Quicklinks</h3> <ol> diff --git a/files/zh-cn/web/css/_doublecolon_before/index.html b/files/zh-cn/web/css/_doublecolon_before/index.html index e71e51a49b..c26c09f813 100644 --- a/files/zh-cn/web/css/_doublecolon_before/index.html +++ b/files/zh-cn/web/css/_doublecolon_before/index.html @@ -33,7 +33,7 @@ p::before { content: "Hello world!"; } </pre> <h3 id="Adding_quotation_marks" name="Adding_quotation_marks">加入引用标记</h3> -<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssref("::after")}}</code>来插入引用性文本。</p> +<p>使用 <code>::before </code>伪元素的一个简单示例就是用于加入引号。此处同时使用了 <code>::before</code> 和 <code>{{Cssxref("::after")}}</code>来插入引用性文本。</p> <h4 id="HTML_内容">HTML 内容</h4> diff --git a/files/zh-cn/web/css/css_flow_layout/index.html b/files/zh-cn/web/css/css_flow_layout/index.html index e6736b7023..4338eb2f88 100644 --- a/files/zh-cn/web/css/css_flow_layout/index.html +++ b/files/zh-cn/web/css/css_flow_layout/index.html @@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html index 9386a5ef17..f1c3a4ecc2 100644 --- a/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/auto-placement_in_css_grid_layout/index.html @@ -555,7 +555,7 @@ dd { <p>可能你在使用自动定位或网格布局的其他功能时也会遇到问题，如果遇到了，请把它们抛出来，或者作为用例追加到已有问题上，一方面便于解决，另一方面也会帮助规范在未来的新版本变得更好。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 57d8f1b75c..0659a28b3a 100644 --- a/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -685,7 +685,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>在本文章中我们快速对网格布局的概念有了个基本的了解。利用示例代码进行练习，然后<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">接下来我们正式开始挖掘关于网格布局的各种细节</a>。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><strong><a href="/zh-CN/docs/Web/CSS/Reference">CSS 参考</a></strong></li> diff --git a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index 0b5c506a1f..9496e10a87 100644 --- a/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -643,7 +643,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>CSS 网格布局和盒模型对齐规范是为了解决 CSS 中的书写模式而设计的，这意味着，如果你用一种从右到左的语言工作，比如阿拉伯语，那网格的起始线就应该是从右上开始，此时 justify-content: start 也将使网格轨道从网格的右侧开始。为 <code>margin-right</code> 和 <code>margin-left</code> 设置自动外边距，或者使用绝对位置如 <code>top<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，</span></font></code><code>right<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">，</span></font></code><code>bottom</code> 和 <code>left</code> 来设置偏移量对书写模式来说并不是一种友好的表达方式。在下一篇文章中，我们会深入讨论 CSS 网格布局、盒模型对齐和书写模式之间的关系，理解这些原理，对于开发用多种语言显示的网站，或者设计混合了多种语言和书写模式的页面将大有益处。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html index e67b69a9fa..3e606beaa6 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_and_progressive_enhancement/index.html @@ -393,7 +393,7 @@ img { <li><a href="https://css-tricks.com/css-grid-in-ie-css-grid-and-the-new-autoprefixer">CSS Grid and the New Autoprefixer</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html index 286a249901..a68be27726 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_layout_and_accessibility/index.html @@ -121,7 +121,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/CSS_Grid_Layout_and_Accessibility <p>作为一种开始思考这些问题的方式，当使用 CSS 网格布局时，建议阅读 Leonie Watson 的 <em><a href="http://tink.uk/flexbox-the-keyboard-navigation-disconnect/">Flexbox & the Keyboard Navigation Disconnect</a>。<a href="https://www.youtube.com/watch?v=spxT2CmHoPk">来自 ffconf 的 Leoie 的演示视频</a>有助于了解屏幕阅读器如何使用 CSS 的视觉表示进行工作。Adrian Roselli 也发表了 <a href="http://adrianroselli.com/2015/10/html-source-order-vs-css-display-order.html">tab order in various browsers</a> —— 尽管这是在 Firefox 完全实现网格支持之前。</em></p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><em><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></em></li> <li><em><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></em></li> diff --git a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html index 216a6fa669..9608cd5fda 100644 --- a/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html +++ b/files/zh-cn/web/css/css_grid_layout/css_grid_logical_values_and_writing_modes/index.html @@ -444,7 +444,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <p><a href="https://drafts.csswg.org/css-logical-props/">CSS 逻辑属性规范</a> 的目标是改变现状，在未来的 CSS 中，{{cssxref("margin-left")}} 和 {{cssxref("margin-right")}} 将与<a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">逻辑属性</a>相同。Firefox 已经实现了，所以你现在就可以在 Firefox 中试上一试。未来如果得到全面支持，那么通过网格学习到的“块和行内”的知识，你也能马上举一反三地用在其他地方了。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html index bdbddab744..5c3d8b05d5 100644 --- a/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/zh-cn/web/css/css_grid_layout/grid_template_areas/index.html @@ -482,7 +482,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas <p>如果你通过阅读本指南前面的几篇文章已经开始上手了，那么你应该是用基于线的定位方式或用命名区域的方式来创建网格布局的。花费一些时间用网格去创建常见的布局模式，虽然还有很多的术语要学习，不过语法是非常一目了然的。在你练习开发的过程中可能会遭遇到一些问题，并且用我们没有讲过的方法去解决它们。在本指南后面的文章中，我们将着眼于更多规范中的细节 —— 目标是让你能用它创建出更加复杂的布局。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/index.html index 17f637d96f..46faef1a06 100644 --- a/files/zh-cn/web/css/css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/index.html @@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html index 86699a10f4..4ca790f7b7 100644 --- a/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html +++ b/files/zh-cn/web/css/css_grid_layout/layout_using_named_grid_lines/index.html @@ -428,7 +428,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>这就是我们需要的，不用做任何计算，网格在分配 1fr 的列轨道空间之前会自动把 10 像素的轨道间距删除掉。在你动手创建自己的布局的过程中，语法会变得越来越熟悉，你能找到适于自己的方法和喜欢创建的项目类型。尝试用不同的方法去创建一些通用的布局模式，你会找到最适合自己的工作方式。在下一篇文章中我们会探讨如何用网格定位元素 —— 根本不需要使用定位属性！</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 004634d8b8..89a3d38534 100644 --- a/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/zh-cn/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -600,7 +600,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid <p>再者，记住你明确定位的元素是可以互相重叠的。有时你能用这点创造一些有趣的效果，但有时也会因为你定位错了线而导致不正确的重叠。<a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> 可以在你学习时给你帮助，特别是当你的网格比较复杂时。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html index a20d8b626a..e052b14da2 100644 --- a/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/realizing_common_layouts_using_css_grid_layout/index.html @@ -535,7 +535,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/利用CSS网格布局实现常用布局 <li>有关其他常见布局模式，请参见 <a href="http://gridbyexample.com">Grid by Example</a>, 这里有许多网格布局的小例子，也有一些较大的UI模式和完整的页面布局。</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html index 6294c4aa25..2f3ed187ba 100644 --- a/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/zh-cn/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -580,7 +580,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>正如本文中所述，CSS Grid Layout 只是您工具包的一部分。不要害怕在布局时将它与其他布局方法混用，大胆用它获得你想要的效果吧。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS索引</strong></a></li> diff --git a/files/zh-cn/web/css/grid-area/index.html b/files/zh-cn/web/css/grid-area/index.html index d5c5c3d9e2..4f35049aee 100644 --- a/files/zh-cn/web/css/grid-area/index.html +++ b/files/zh-cn/web/css/grid-area/index.html @@ -220,7 +220,7 @@ grid-area: unset;</pre> <li>Video tutorial: <em><a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-auto-columns/index.html b/files/zh-cn/web/css/grid-auto-columns/index.html index 7b24f9199e..fa64012b44 100644 --- a/files/zh-cn/web/css/grid-auto-columns/index.html +++ b/files/zh-cn/web/css/grid-auto-columns/index.html @@ -149,7 +149,7 @@ grid-auto-columns: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-auto-flow/index.html b/files/zh-cn/web/css/grid-auto-flow/index.html index bf53cdd92b..3f6d6cf6c0 100644 --- a/files/zh-cn/web/css/grid-auto-flow/index.html +++ b/files/zh-cn/web/css/grid-auto-flow/index.html @@ -154,7 +154,7 @@ grid-auto-flow: unset;</pre> <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-auto-placement-order/">Introducing Grid auto-placement and order</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-auto-rows/index.html b/files/zh-cn/web/css/grid-auto-rows/index.html index a448a6833b..536e625a8a 100644 --- a/files/zh-cn/web/css/grid-auto-rows/index.html +++ b/files/zh-cn/web/css/grid-auto-rows/index.html @@ -148,7 +148,7 @@ grid-auto-rows: unset; <li>视频教程：<em><a href="http://gridbyexample.com/video/series-auto-placement-order/">引入网格自动放置和排序</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-CN/docs/Web/CSS/Reference"><strong>CSS参考</strong></a></li> diff --git a/files/zh-cn/web/css/grid-column/index.html b/files/zh-cn/web/css/grid-column/index.html index d826b70c60..c8f01a098a 100644 --- a/files/zh-cn/web/css/grid-column/index.html +++ b/files/zh-cn/web/css/grid-column/index.html @@ -138,7 +138,7 @@ translation_of: Web/CSS/grid-column <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-row/index.html b/files/zh-cn/web/css/grid-row/index.html index 4f5826271a..83baa1020b 100644 --- a/files/zh-cn/web/css/grid-row/index.html +++ b/files/zh-cn/web/css/grid-row/index.html @@ -144,7 +144,7 @@ grid-row: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template-areas/index.html b/files/zh-cn/web/css/grid-template-areas/index.html index 15cdc56df2..89b09a064f 100644 --- a/files/zh-cn/web/css/grid-template-areas/index.html +++ b/files/zh-cn/web/css/grid-template-areas/index.html @@ -141,7 +141,7 @@ grid-template-areas: unset; /* 未设置 */ <li>视频教程<em>：<a href="http://gridbyexample.com/video/grid-template-areas/">Grid Template Areas</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template-columns/index.html b/files/zh-cn/web/css/grid-template-columns/index.html index bb3150a257..3cd25ea361 100644 --- a/files/zh-cn/web/css/grid-template-columns/index.html +++ b/files/zh-cn/web/css/grid-template-columns/index.html @@ -140,7 +140,7 @@ grid-template-columns: unset; <li>视频教程: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template-rows/index.html b/files/zh-cn/web/css/grid-template-rows/index.html index fdffd201ff..7ab2365eeb 100644 --- a/files/zh-cn/web/css/grid-template-rows/index.html +++ b/files/zh-cn/web/css/grid-template-rows/index.html @@ -153,7 +153,7 @@ grid-template-rows: unset; <li>视频教程: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid-template/index.html b/files/zh-cn/web/css/grid-template/index.html index 0b79fc80d3..7b305e2862 100644 --- a/files/zh-cn/web/css/grid-template/index.html +++ b/files/zh-cn/web/css/grid-template/index.html @@ -146,7 +146,7 @@ footer { <li>视频教程：<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/grid/index.html b/files/zh-cn/web/css/grid/index.html index 2e4e255ebe..ff04b9027c 100644 --- a/files/zh-cn/web/css/grid/index.html +++ b/files/zh-cn/web/css/grid/index.html @@ -133,7 +133,7 @@ grid: unset; <li><em>网格布局指南：</em><em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-cn/web/css/minmax()/index.html b/files/zh-cn/web/css/minmax()/index.html index 3d78c94ddf..4509e35f5d 100644 --- a/files/zh-cn/web/css/minmax()/index.html +++ b/files/zh-cn/web/css/minmax()/index.html @@ -138,7 +138,7 @@ minmax(auto, 300px) <li>视频教程：<em><a href="http://gridbyexample.com/video/series-minmax/">Introducing minmax()</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li> </li> <li><a href="/zh-CN/docs/Web/CSS"><strong>CSS</strong></a></li> diff --git a/files/zh-cn/web/http/methods/index.html b/files/zh-cn/web/http/methods/index.html index 6f926a633d..036f553cf5 100644 --- a/files/zh-cn/web/http/methods/index.html +++ b/files/zh-cn/web/http/methods/index.html @@ -14,15 +14,15 @@ translation_of: Web/HTTP/Methods --- <p>{{HTTPSidebar}}</p> -<p>HTTP 定义了一组<strong>请求方法</strong>, 以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作. 虽然他们也可以是名词, 但这些请求方法有时被称为HTTP动词. 每一个请求方法都实现了不同的语义, 但一些共同的特征由一组共享：: 例如一个请求方法可以是 {{glossary("safe")}}, {{glossary("idempotent")}}, 或 {{glossary("cacheable")}}.</p> +<p>HTTP 定义了一组<strong>请求方法</strong>，以表明要对给定资源执行的操作。指示针对给定资源要执行的期望动作。虽然他们也可以是名词, 但这些请求方法有时被称为HTTP动词。每一个请求方法都实现了不同的语义，但一些共同的特征由一组共享：例如一个请求方法可以是 {{glossary("safe")}}, {{glossary("idempotent")}}, 或 {{glossary("cacheable")}}。</p> <dl> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a></code></dt> - <dd>GET方法请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.</dd> + <dd>GET方法请求一个指定资源的表示形式，使用GET的请求应该只被用于获取数据。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/HEAD">HEAD</a></code></dt> - <dd>HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体.</dd> + <dd>HEAD方法请求一个与GET请求的响应相同的响应，但没有响应体。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/POST">POST</a></code></dt> - <dd>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用. </dd> + <dd>POST方法用于将实体提交到指定的资源，通常导致在服务器上的状态变化或副作用。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/PUT">PUT</a></code></dt> <dd>PUT方法用请求有效载荷替换目标资源的所有当前表示。</dd> <dt><code><a href="/en-US/docs/Web/HTTP/Methods/DELETE">DELETE</a></code></dt> diff --git a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html index 0ea7538a96..8b00401fcc 100644 --- a/files/zh-cn/web/javascript/guide/grammar_and_types/index.html +++ b/files/zh-cn/web/javascript/guide/grammar_and_types/index.html @@ -447,8 +447,8 @@ console.log(a[0]); // 3</pre> <pre class="brush: js notranslate">3.14 -.2345789 // -0.23456789 --3.12e+12 // -3.12*10<sup>12</sup> -.1e-23 // 0.1*10<sup>-23</sup>=10<sup>-24</sup>=1e-24 +-3.12e+12 // -3.12*10^12 +.1e-23 // 0.1*10^(-23)=10^(-24)=1e-24 </pre> <h3 id="对象字面量_Object_literals">对象字面量 (Object literals)</h3> diff --git a/files/zh-cn/web/javascript/reference/statements/import/index.html b/files/zh-cn/web/javascript/reference/statements/import/index.html index b7634d9cef..203ce9b8cc 100644 --- a/files/zh-cn/web/javascript/reference/statements/import/index.html +++ b/files/zh-cn/web/javascript/reference/statements/import/index.html @@ -21,7 +21,7 @@ translation_of: Web/JavaScript/Reference/Statements/import <p>语法</p> -<pre class="syntaxbox notranslate">import <em>defaultExport</em> from "<em>module-name</em>"; +<pre class="syntaxbox brush: js notranslate">import <em>defaultExport</em> from "<em>module-name</em>"; import * as <em>name</em> from "<em>module-name</em>"; import { <em>export </em>} from "<em>module-name</em>"; import { <em>export</em> as <em>alias </em>} from "<em>module-name</em>"; @@ -95,7 +95,7 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>整个模块仅为副作用（中性词，无贬义含义）而导入，而不导入模块中的任何内容（接口）。 这将运行模块中的全局代码, 但实际上不导入任何值。</p> -<pre class="notranslate"><code>import '/modules/my-module.js';</code></pre> +<pre class="brush: js notranslate">import '/modules/my-module.js';</pre> <h3 id="导入默认值">导入默认值</h3> @@ -116,9 +116,9 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 // specific, named imports </pre> -<p>When importing a default export with {{anch("Dynamic Imports", "dynamic imports")}}, it works a bit differently. You need to destructure and rename the "default" key from the returned object.</p> +<p>当用{{anch("动态导入")}}的方式导入默认导出时，其工作方式有所不同。你需要从返回的对象中解构并重命名 "default" 键。</p> -<pre class="notranslate">(async () => { +<pre class="brush: js notranslate">(async () => { if (somethingIsTrue) { const { default: myDefault, foo, bar } = await import('/modules/my-module.js'); } @@ -140,15 +140,15 @@ var promise = import("module-name");//这是一个处于第三阶段的提案。 <p>关键字import可以像调用函数一样来动态的导入模块。以这种方式调用，将返回一个 <code>promise</code>。</p> -<pre class="brush: js notranslate"><code>import('/modules/my-module.js') +<pre class="brush: js notranslate">import('/modules/my-module.js') .then((module) => { // Do something with the module. - });</code> + }); </pre> <p>这种使用方式也支持 <code>await</code> 关键字。</p> -<pre class="brush: js notranslate"><code>let module = await import('/modules/my-module.js');</code></pre> +<pre class="brush: js notranslate">let module = await import('/modules/my-module.js');</pre> <h2 id="示例">示例</h2> @@ -227,6 +227,6 @@ for (const link of document.querySelectorAll("nav > a")) { <li>Limin Zhu, Brian Terlson and Microsoft Edge Team: <a href="https://blogs.windows.com/msedgedev/2016/05/17/es6-modules-and-beyond/">Previewing ES6 Modules and more from ES2015, ES2016 and beyond</a></li> <li>Hacks blog post by Jason Orendorff: <a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a></li> <li>Hacks blog post by Lin Clark: <a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a></li> - <li>Axel Rauschmayer's book: <a class="external" href="http://exploringjs.com/es6/ch_modules.html">"Exploring JS: Modules"</a></li> + <li>Axel Rauschmayer's book: <a class="external" href="https://exploringjs.com/es6/ch_modules.html">"Exploring JS: Modules"</a></li> <li>The Modern JavaScript Tutorial(javascript.info): <a class="external" href="https://javascript.info/import-export">Export and Import</a></li> </ul> diff --git a/files/zh-cn/web/javascript/reference/statements/return/index.html b/files/zh-cn/web/javascript/reference/statements/return/index.html index 9debeab7af..8c82917d96 100644 --- a/files/zh-cn/web/javascript/reference/statements/return/index.html +++ b/files/zh-cn/web/javascript/reference/statements/return/index.html @@ -69,11 +69,11 @@ a + b;</pre> <pre class="brush: js">function counter() { for (var count = 1; ; count++) { // 无限循环 console.log(count + "A"); // 执行5次 - if (count === 5) { - return; - } - console.log(count + "B"); // 执行4次 + if (count === 5) { + return; } + console.log(count + "B"); // 执行4次 + } console.log(count + "C"); // 永远不会执行 } diff --git a/files/zh-tw/_redirects.txt b/files/zh-tw/_redirects.txt index b7266c16c2..a74261d6e4 100644 --- a/files/zh-tw/_redirects.txt +++ b/files/zh-tw/_redirects.txt @@ -512,6 +512,7 @@ /zh-TW/docs/Using_files_from_web_applications /zh-TW/docs/Web/API/File/Using_files_from_web_applications /zh-TW/docs/Using_geolocation /zh-TW/docs/Web/API/Geolocation_API /zh-TW/docs/Web/API/Ambient_Light_Events /zh-TW/docs/orphaned/Web/API/Ambient_Light_Events +/zh-TW/docs/Web/API/AnimationEvent/initAnimationEvent /zh-TW/docs/Web/API/AnimationEvent/AnimationEvent /zh-TW/docs/Web/API/Body /zh-TW/docs/orphaned/Web/API/Body /zh-TW/docs/Web/API/Body/json /zh-TW/docs/orphaned/Web/API/Body/json /zh-TW/docs/Web/API/Canvas_API/Drawing_graphics_with_canvas /zh-TW/docs/conflicting/Web/API/Canvas_API/Tutorial diff --git a/files/zh-tw/_wikihistory.json b/files/zh-tw/_wikihistory.json index d8927a29a7..74a41f5f01 100644 --- a/files/zh-tw/_wikihistory.json +++ b/files/zh-tw/_wikihistory.json @@ -2874,7 +2874,7 @@ "fscholz" ] }, - "Web/API/AnimationEvent/initAnimationEvent": { + "Web/API/AnimationEvent/AnimationEvent": { "modified": "2019-03-23T22:58:50.823Z", "contributors": [ "teoli", diff --git a/files/zh-tw/glossary/adobe_flash/index.html b/files/zh-tw/glossary/adobe_flash/index.html index 8e09c12f7b..3fcfabd140 100644 --- a/files/zh-tw/glossary/adobe_flash/index.html +++ b/files/zh-tw/glossary/adobe_flash/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/Adobe_Flash --- <p id="Summary">Flash 是一個由 Adobe 開發的過時網路技術。它能展現出富有表現力的 Web 程式、向量圖形、還有各種多媒體。Adobe Flash 需要在{{Glossary("瀏覽器")}}安裝相對應的擴充套件後才能使用。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="https://www.adobe.com/products/flashruntimes.html">官方網站</a></li> <li><a href="https://mozilla.github.io/shumway/">Shumway，由 Mozilla 實作的自由軟體</a></li> diff --git a/files/zh-tw/glossary/bootstrap/index.html b/files/zh-tw/glossary/bootstrap/index.html index 1fa3eca197..63d8470d1c 100644 --- a/files/zh-tw/glossary/bootstrap/index.html +++ b/files/zh-tw/glossary/bootstrap/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/Bootstrap <p>起初 Bootstrap 被稱為 Twitter Blueprint，並且由 <a href="https://twitter.com/">Twitter</a> 的內部團隊開發。它支援響應式設計、提供已經設計好能直接使用的設計樣板、或著針對該樣板，做出需要的自訂更動。在開發過程中，由於 Bootstrap 已經與當代瀏覽器，還有最新版 {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} 相容，在使用 Bootstrap 開發時也不需要多操心相容性問題。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>維基百科的{{interwiki("wikipedia", "Bootstrap")}}</li> <li><a href="https://getbootstrap.com">Bootstrap 官方網站</a>（<a href="https://bootstrap.hexschool.com">非官方中文翻譯</a>）</li> diff --git a/files/zh-tw/glossary/character_set/index.html b/files/zh-tw/glossary/character_set/index.html index 0bbdcf4f19..3e5681f399 100644 --- a/files/zh-tw/glossary/character_set/index.html +++ b/files/zh-tw/glossary/character_set/index.html @@ -12,7 +12,7 @@ translation_of: Glossary/character_set <p>如果字符集使用不當（像是用 Unicode 閱覽 Big5 編碼的文章），可能會看到一大堆破碎的文字。這些破碎的文字，一般被俗稱為{{Interwiki("wikipedia", "亂碼")}}。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>維基百科 <ol> diff --git a/files/zh-tw/glossary/css_preprocessor/index.html b/files/zh-tw/glossary/css_preprocessor/index.html index b450a2dea9..8184c5046c 100644 --- a/files/zh-tw/glossary/css_preprocessor/index.html +++ b/files/zh-tw/glossary/css_preprocessor/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/CSS_preprocessor <p>要使用 CSS 預處理器，你需要在{{Glossary("伺服器")}}安裝 CSS 編譯器，或是在開發環境透過 CSS 預處理器編譯後，上傳編譯好的 CSS 到伺服器。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>以下列出幾個最受歡迎的 CSS 預處理器： <ol> diff --git a/files/zh-tw/glossary/php/index.html b/files/zh-tw/glossary/php/index.html index 1b27ff0c82..aab9d1a64b 100644 --- a/files/zh-tw/glossary/php/index.html +++ b/files/zh-tw/glossary/php/index.html @@ -37,7 +37,7 @@ translation_of: Glossary/PHP echo $email; ?></pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="http://php.net/">PHP - 官方網站</a></li> <li>維基百科的 {{Interwiki("wikipedia", "PHP")}}</li> diff --git a/files/zh-tw/glossary/python/index.html b/files/zh-tw/glossary/python/index.html index 61d6a4b107..0a936217d1 100644 --- a/files/zh-tw/glossary/python/index.html +++ b/files/zh-tw/glossary/python/index.html @@ -9,7 +9,7 @@ translation_of: Glossary/Python <p>Python 是在 OSI 認可的開源許可證規範下開發的，使其能自由使用與分發，即使是商用亦然。目前 Python 許可證是由 <a href="https://www.python.org/psf">Python Software Foundation</a> 管理的。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>進一步理解 <ol> diff --git a/files/zh-tw/glossary/ruby/index.html b/files/zh-tw/glossary/ruby/index.html index 1e1832c8a8..221dd62c66 100644 --- a/files/zh-tw/glossary/ruby/index.html +++ b/files/zh-tw/glossary/ruby/index.html @@ -7,7 +7,7 @@ translation_of: Glossary/Ruby <p>Ruby 也可以指 HTML 文件內，東亞文字的註釋方法。請參考 {{HTMLElement("ruby")}} 元素。</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>深入了解 <ol> diff --git a/files/zh-tw/glossary/spa/index.html b/files/zh-tw/glossary/spa/index.html index 7bf0e740dc..d76369e1f9 100644 --- a/files/zh-tw/glossary/spa/index.html +++ b/files/zh-tw/glossary/spa/index.html @@ -19,7 +19,7 @@ translation_of: Glossary/SPA <li><a href="https://vuejs.org/">Vue.JS</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>維基百科 <ol> diff --git a/files/zh-tw/learn/javascript/building_blocks/events/index.html b/files/zh-tw/learn/javascript/building_blocks/events/index.html index 9bb566a61d..f9ca1fc99f 100644 --- a/files/zh-tw/learn/javascript/building_blocks/events/index.html +++ b/files/zh-tw/learn/javascript/building_blocks/events/index.html @@ -83,4 +83,4 @@ original_slug: Web/Guide/HTML/Event_attributes <p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p> -<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> +<section id="Quick_links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section> diff --git a/files/zh-tw/mozilla/firefox/releases/3.6/index.html b/files/zh-tw/mozilla/firefox/releases/3.6/index.html index f053267778..7a247ac6c6 100644 --- a/files/zh-tw/mozilla/firefox/releases/3.6/index.html +++ b/files/zh-tw/mozilla/firefox/releases/3.6/index.html @@ -3,7 +3,7 @@ title: Firefox 3.6 技術文件 slug: Mozilla/Firefox/Releases/3.6 translation_of: Mozilla/Firefox/Releases/3.6 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-tw/mozilla/firefox/releases/35/index.html b/files/zh-tw/mozilla/firefox/releases/35/index.html index d15394097d..be1e55dea8 100644 --- a/files/zh-tw/mozilla/firefox/releases/35/index.html +++ b/files/zh-tw/mozilla/firefox/releases/35/index.html @@ -3,7 +3,7 @@ title: Firefox 35 技術文件 slug: Mozilla/Firefox/Releases/35 translation_of: Mozilla/Firefox/Releases/35 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-tw/mozilla/firefox/releases/6/index.html b/files/zh-tw/mozilla/firefox/releases/6/index.html index bd3141a249..92591ea074 100644 --- a/files/zh-tw/mozilla/firefox/releases/6/index.html +++ b/files/zh-tw/mozilla/firefox/releases/6/index.html @@ -3,7 +3,7 @@ title: Firefox 6 技術文件 slug: Mozilla/Firefox/Releases/6 translation_of: Mozilla/Firefox/Releases/6 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-tw/mozilla/firefox/releases/8/index.html b/files/zh-tw/mozilla/firefox/releases/8/index.html index 51ca78d6e7..3d8da3f091 100644 --- a/files/zh-tw/mozilla/firefox/releases/8/index.html +++ b/files/zh-tw/mozilla/firefox/releases/8/index.html @@ -3,7 +3,7 @@ title: Firefox 8 技術文件 slug: Mozilla/Firefox/Releases/8 translation_of: Mozilla/Firefox/Releases/8 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-tw/mozilla/firefox/releases/9/index.html b/files/zh-tw/mozilla/firefox/releases/9/index.html index 39e727c628..1c441a0fe2 100644 --- a/files/zh-tw/mozilla/firefox/releases/9/index.html +++ b/files/zh-tw/mozilla/firefox/releases/9/index.html @@ -3,7 +3,7 @@ title: Firefox 9 技術文件 slug: Mozilla/Firefox/Releases/9 translation_of: Mozilla/Firefox/Releases/9 --- -<div><section class="Quick_links" id="Quick_Links"> +<div><section id="Quick_links"> <ol> <li class="toggle"> <details> diff --git a/files/zh-tw/web/api/animationevent/initanimationevent/index.html b/files/zh-tw/web/api/animationevent/animationevent/index.html index de5c7efe15..eebaac85f0 100644 --- a/files/zh-tw/web/api/animationevent/initanimationevent/index.html +++ b/files/zh-tw/web/api/animationevent/animationevent/index.html @@ -1,6 +1,6 @@ --- title: AnimationEvent.initAnimationEvent() -slug: Web/API/AnimationEvent/initAnimationEvent +slug: Web/API/AnimationEvent/AnimationEvent tags: - API - AnimationEvent @@ -9,6 +9,7 @@ tags: - Obsolete - Web Animations translation_of: Web/API/AnimationEvent/initAnimationEvent +original_slug: Web/API/AnimationEvent/initAnimationEvent --- <p>{{obsolete_header}}{{non-standard_header}}{{ apiref("Web Animations API") }}</p> diff --git a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 57e89bdf94..c29958f3db 100644 --- a/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/zh-tw/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -656,7 +656,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>In this article we have had a very quick look through the Grid Layout Specification. Have a play with the code examples, and then move onto <a href="https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">the next part of this guide where we will really start to dig into the detail of CSS Grid Layout</a>.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-tw/web/css/css_grid_layout/index.html b/files/zh-tw/web/css/css_grid_layout/index.html index 0fd5616848..dd32113679 100644 --- a/files/zh-tw/web/css/css_grid_layout/index.html +++ b/files/zh-tw/web/css/css_grid_layout/index.html @@ -193,7 +193,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/zh-TW/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/zh-TW/docs/Web/CSS/Reference"><strong>CSS 參考</strong></a></li> diff --git a/files/zh-tw/web/css/grid-row/index.html b/files/zh-tw/web/css/grid-row/index.html index e3e6daca74..4f2a2270de 100644 --- a/files/zh-tw/web/css/grid-row/index.html +++ b/files/zh-tw/web/css/grid-row/index.html @@ -137,7 +137,7 @@ grid-row: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-line-based-placement/">Line-based placement</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-tw/web/css/grid-template-columns/index.html b/files/zh-tw/web/css/grid-template-columns/index.html index ac327e5b4e..690f7125df 100644 --- a/files/zh-tw/web/css/grid-template-columns/index.html +++ b/files/zh-tw/web/css/grid-template-columns/index.html @@ -139,7 +139,7 @@ grid-template-columns: unset; <li>Video tutorial: <em><a href="http://gridbyexample.com/video/series-define-a-grid/">Defining a Grid</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> diff --git a/files/zh-tw/web/css/grid-template/index.html b/files/zh-tw/web/css/grid-template/index.html index 9682acb462..e4a13e78f0 100644 --- a/files/zh-tw/web/css/grid-template/index.html +++ b/files/zh-tw/web/css/grid-template/index.html @@ -140,7 +140,7 @@ footer { <li>Video tutorial:<em> <a href="http://gridbyexample.com/video/grid-template-shorthand/">Grid Template shorthand</a></em></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Web/CSS"><strong>CSS</strong></a></li> <li><a href="/en-US/docs/Web/CSS/Reference"><strong>CSS Reference</strong></a></li> |