diff options
562 files changed, 3860 insertions, 4144 deletions
diff --git a/PEERS_GUIDELINES.md b/PEERS_GUIDELINES.md index 56ad521d50..83c4777329 100644 --- a/PEERS_GUIDELINES.md +++ b/PEERS_GUIDELINES.md @@ -1,6 +1,4 @@ -# Peer Guidelines - -## Translated content +# Translated Content Peer Guidelines ## Policies for community maintenance teams @@ -41,11 +39,9 @@ The review teams for each locale are: - French (`fr`) content — the [@yari-content-fr](https://github.com/orgs/mdn/teams/yari-content-fr) team, which consists of: - - [@nicolas-goudry](https://github.com/nicolas-goudry) - - [@JNa0](https://github.com/JNa0) - [@tristantheb](https://github.com/tristantheb) - - [@LEMIBANDDEXARI](https://github.com/LEMIBANDDEXARI) - [@SphinxKnight](https://github.com/SphinxKnight) + - [@audrasjb](https://github.com/audrasjb) - Japanese (`ja`) content — the [@yari-content-ja](https://github.com/orgs/mdn/teams/yari-content-ja) team, which consists of: 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/learn/html/introduction_to_html/getting_started/index.html b/files/de/learn/html/introduction_to_html/getting_started/index.html index 1ee9d1214e..d8966f8964 100644 --- a/files/de/learn/html/introduction_to_html/getting_started/index.html +++ b/files/de/learn/html/introduction_to_html/getting_started/index.html @@ -354,7 +354,7 @@ window.addEventListener("load", drawOutput); <p>Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!</p> -<pre class="brush: example-bad html notranslate"><a href="http://www.example.com'>Ein Link als Beispiel.</a></pre> +<pre class="example-bad brush: html notranslate"><a href="http://www.example.com'>Ein Link als Beispiel.</a></pre> <p>Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:</p> 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/_redirects.txt b/files/es/_redirects.txt index a65d6ee1d2..b0cfd8f626 100644 --- a/files/es/_redirects.txt +++ b/files/es/_redirects.txt @@ -2476,7 +2476,8 @@ /es/docs/Web/MathML/Elemento /es/docs/Web/MathML/Element /es/docs/Web/MathML/Elemento/math /es/docs/Web/MathML/Element/math /es/docs/Web/Performance/mejorando_rendimienot_inicial /es/docs/Web/Performance/Optimizing_startup_performance -/es/docs/Web/Progressive_web_apps/Developer_guide/Instalar /es/docs/Web/Progressive_web_apps/Developer_guide/Installing +/es/docs/Web/Progressive_web_apps/Developer_guide/Instalar /es/docs/Web/Progressive_web_apps/Installing +/es/docs/Web/Progressive_web_apps/Developer_guide/Installing /es/docs/Web/Progressive_web_apps/Installing /es/docs/Web/Reference/Events /es/docs/Web/Events /es/docs/Web/Reference/Events/animationend /es/docs/Web/API/HTMLElement/animationend_event /es/docs/Web/Reference/Events/beforeunload /es/docs/Web/API/Window/beforeunload_event diff --git a/files/es/_wikihistory.json b/files/es/_wikihistory.json index 83a0192a58..3c8ab55145 100644 --- a/files/es/_wikihistory.json +++ b/files/es/_wikihistory.json @@ -20358,14 +20358,14 @@ "Deng_C1" ] }, - "Web/Progressive_web_apps/Developer_guide/Installing": { - "modified": "2020-09-20T03:25:41.762Z", + "Web/Progressive_web_apps/Installable_PWAs": { + "modified": "2020-09-20T03:54:28.154Z", "contributors": [ "Nachec" ] }, - "Web/Progressive_web_apps/Installable_PWAs": { - "modified": "2020-09-20T03:54:28.154Z", + "Web/Progressive_web_apps/Installing": { + "modified": "2020-09-20T03:25:41.762Z", "contributors": [ "Nachec" ] 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/es/web/progressive_web_apps/developer_guide/installing/index.html b/files/es/web/progressive_web_apps/installing/index.html index 6ef244a88d..c68442e46c 100644 --- a/files/es/web/progressive_web_apps/developer_guide/installing/index.html +++ b/files/es/web/progressive_web_apps/installing/index.html @@ -1,6 +1,6 @@ --- title: Instalar y desinstalar aplicaciones web -slug: Web/Progressive_web_apps/Developer_guide/Installing +slug: Web/Progressive_web_apps/Installing tags: - Android - Apps @@ -18,7 +18,7 @@ tags: - aplicaciones web progresivas - instalar translation_of: Web/Progressive_web_apps/Developer_guide/Installing -original_slug: Web/Progressive_web_apps/Developer_guide/Instalar +original_slug: Web/Progressive_web_apps/Developer_guide/Installing --- <p>{{draft}}</p> 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 e08fe6bda3..35c4e4acda 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 @@ -1499,10 +1499,10 @@ /ja/docs/DOM/window.mozInnerScreenY /ja/docs/Web/API/Window/mozInnerScreenY /ja/docs/DOM/window.name /ja/docs/Web/API/Window/name /ja/docs/DOM/window.navigator /ja/docs/Web/API/Window/navigator -/ja/docs/DOM/window.navigator.appCodeName /ja/docs/orphaned/Web/API/NavigatorID/appCodeName -/ja/docs/DOM/window.navigator.appCodeName-redirect-1 /ja/docs/orphaned/Web/API/NavigatorID/appCodeName -/ja/docs/DOM/window.navigator.appName /ja/docs/orphaned/Web/API/NavigatorID/appName -/ja/docs/DOM/window.navigator.appVersion /ja/docs/orphaned/Web/API/NavigatorID/appVersion +/ja/docs/DOM/window.navigator.appCodeName /ja/docs/Web/API/Navigator/appCodeName +/ja/docs/DOM/window.navigator.appCodeName-redirect-1 /ja/docs/Web/API/Navigator/appCodeName +/ja/docs/DOM/window.navigator.appName /ja/docs/Web/API/Navigator/appName +/ja/docs/DOM/window.navigator.appVersion /ja/docs/Web/API/Navigator/appVersion /ja/docs/DOM/window.navigator.battery /ja/docs/Web/API/Navigator/battery /ja/docs/DOM/window.navigator.buildID /ja/docs/Web/API/Navigator/buildID /ja/docs/DOM/window.navigator.cookieEnabled /ja/docs/Web/API/Navigator/cookieEnabled @@ -1511,12 +1511,12 @@ /ja/docs/DOM/window.navigator.mozIsLocallyAvailable /ja/docs/Web/API/Navigator/mozIsLocallyAvailable /ja/docs/DOM/window.navigator.onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/DOM/window.navigator.oscpu /ja/docs/Web/API/Navigator/oscpu -/ja/docs/DOM/window.navigator.platform /ja/docs/orphaned/Web/API/NavigatorID/platform -/ja/docs/DOM/window.navigator.product /ja/docs/orphaned/Web/API/NavigatorID/product +/ja/docs/DOM/window.navigator.platform /ja/docs/Web/API/Navigator/platform +/ja/docs/DOM/window.navigator.product /ja/docs/Web/API/Navigator/product /ja/docs/DOM/window.navigator.productSub /ja/docs/Web/API/Navigator/productSub /ja/docs/DOM/window.navigator.registerContentHandler /ja/docs/orphaned/Web/API/Navigator/registerContentHandler /ja/docs/DOM/window.navigator.registerProtocolHandler /ja/docs/Web/API/Navigator/registerProtocolHandler -/ja/docs/DOM/window.navigator.userAgent /ja/docs/orphaned/Web/API/NavigatorID/userAgent +/ja/docs/DOM/window.navigator.userAgent /ja/docs/Web/API/Navigator/userAgent /ja/docs/DOM/window.navigator.vendor /ja/docs/Web/API/Navigator/vendor /ja/docs/DOM/window.navigator.vendor-redirect-1 /ja/docs/Web/API/Navigator/vendor /ja/docs/DOM/window.navigator.vendorSub /ja/docs/Web/API/Navigator/vendorSub @@ -1723,9 +1723,9 @@ /ja/docs/DOM:window.moveTo /ja/docs/Web/API/Window/moveTo /ja/docs/DOM:window.name /ja/docs/Web/API/Window/name /ja/docs/DOM:window.navigator /ja/docs/Web/API/Window/navigator -/ja/docs/DOM:window.navigator.appCodeName /ja/docs/orphaned/Web/API/NavigatorID/appCodeName -/ja/docs/DOM:window.navigator.appName /ja/docs/orphaned/Web/API/NavigatorID/appName -/ja/docs/DOM:window.navigator.appVersion /ja/docs/orphaned/Web/API/NavigatorID/appVersion +/ja/docs/DOM:window.navigator.appCodeName /ja/docs/Web/API/Navigator/appCodeName +/ja/docs/DOM:window.navigator.appName /ja/docs/Web/API/Navigator/appName +/ja/docs/DOM:window.navigator.appVersion /ja/docs/Web/API/Navigator/appVersion /ja/docs/DOM:window.navigator.buildID /ja/docs/Web/API/Navigator/buildID /ja/docs/DOM:window.navigator.cookieEnabled /ja/docs/Web/API/Navigator/cookieEnabled /ja/docs/DOM:window.navigator.isLocallyAvailable /ja/docs/Web/API/Navigator/mozIsLocallyAvailable @@ -1733,12 +1733,12 @@ /ja/docs/DOM:window.navigator.mozIsLocallyAvailable /ja/docs/Web/API/Navigator/mozIsLocallyAvailable /ja/docs/DOM:window.navigator.onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/DOM:window.navigator.oscpu /ja/docs/Web/API/Navigator/oscpu -/ja/docs/DOM:window.navigator.platform /ja/docs/orphaned/Web/API/NavigatorID/platform -/ja/docs/DOM:window.navigator.product /ja/docs/orphaned/Web/API/NavigatorID/product +/ja/docs/DOM:window.navigator.platform /ja/docs/Web/API/Navigator/platform +/ja/docs/DOM:window.navigator.product /ja/docs/Web/API/Navigator/product /ja/docs/DOM:window.navigator.productSub /ja/docs/Web/API/Navigator/productSub /ja/docs/DOM:window.navigator.registerContentHandler /ja/docs/orphaned/Web/API/Navigator/registerContentHandler /ja/docs/DOM:window.navigator.registerProtocolHandler /ja/docs/Web/API/Navigator/registerProtocolHandler -/ja/docs/DOM:window.navigator.userAgent /ja/docs/orphaned/Web/API/NavigatorID/userAgent +/ja/docs/DOM:window.navigator.userAgent /ja/docs/Web/API/Navigator/userAgent /ja/docs/DOM:window.navigator.vendor /ja/docs/Web/API/Navigator/vendor /ja/docs/DOM:window.navigator.vendorSub /ja/docs/Web/API/Navigator/vendorSub /ja/docs/DOM:window.onabort /ja/docs/Web/API/GlobalEventHandlers/onabort @@ -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,20 +3168,18 @@ /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/IndexedDB_API/Basic_Concepts_Behind_IndexedDB /ja/docs/orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +/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 /ja/docs/Web/API/Navigator/registerContentHandler /ja/docs/orphaned/Web/API/Navigator/registerContentHandler -/ja/docs/Web/API/Navigator/userAgent /ja/docs/orphaned/Web/API/NavigatorID/userAgent -/ja/docs/Web/API/NavigatorConcurrentHardware /ja/docs/orphaned/Web/API/NavigatorConcurrentHardware -/ja/docs/Web/API/NavigatorConcurrentHardware/hardwareConcurrency /ja/docs/orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency -/ja/docs/Web/API/NavigatorID /ja/docs/orphaned/Web/API/NavigatorID -/ja/docs/Web/API/NavigatorID/appCodeName /ja/docs/orphaned/Web/API/NavigatorID/appCodeName -/ja/docs/Web/API/NavigatorID/appName /ja/docs/orphaned/Web/API/NavigatorID/appName -/ja/docs/Web/API/NavigatorID/appVersion /ja/docs/orphaned/Web/API/NavigatorID/appVersion -/ja/docs/Web/API/NavigatorID/platform /ja/docs/orphaned/Web/API/NavigatorID/platform -/ja/docs/Web/API/NavigatorID/product /ja/docs/orphaned/Web/API/NavigatorID/product -/ja/docs/Web/API/NavigatorID/userAgent /ja/docs/orphaned/Web/API/NavigatorID/userAgent +/ja/docs/Web/API/NavigatorID /ja/docs/Web/API/Navigator +/ja/docs/Web/API/NavigatorID/appCodeName /ja/docs/Web/API/Navigator/appCodeName +/ja/docs/Web/API/NavigatorID/appName /ja/docs/Web/API/Navigator/appName +/ja/docs/Web/API/NavigatorID/appVersion /ja/docs/Web/API/Navigator/appVersion +/ja/docs/Web/API/NavigatorID/platform /ja/docs/Web/API/Navigator/platform +/ja/docs/Web/API/NavigatorID/product /ja/docs/Web/API/Navigator/product +/ja/docs/Web/API/NavigatorID/userAgent /ja/docs/Web/API/Navigator/userAgent /ja/docs/Web/API/NavigatorLanguage /ja/docs/Web/API/Navigator /ja/docs/Web/API/NavigatorLanguage.languages /ja/docs/Web/API/Navigator/languages /ja/docs/Web/API/NavigatorLanguage/language /ja/docs/Web/API/Navigator/language @@ -3224,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 @@ -3234,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 @@ -3496,17 +3485,17 @@ /ja/docs/Web/API/window.mozRequestAnimationFrame /ja/docs/Web/API/Window/requestAnimationFrame /ja/docs/Web/API/window.name /ja/docs/Web/API/Window/name /ja/docs/Web/API/window.navigator /ja/docs/Web/API/Window/navigator -/ja/docs/Web/API/window.navigator.appCodeName /ja/docs/orphaned/Web/API/NavigatorID/appCodeName -/ja/docs/Web/API/window.navigator.appName /ja/docs/orphaned/Web/API/NavigatorID/appName +/ja/docs/Web/API/window.navigator.appCodeName /ja/docs/Web/API/Navigator/appCodeName +/ja/docs/Web/API/window.navigator.appName /ja/docs/Web/API/Navigator/appName /ja/docs/Web/API/window.navigator.battery /ja/docs/Web/API/Navigator/battery /ja/docs/Web/API/window.navigator.language /ja/docs/Web/API/Navigator/language /ja/docs/Web/API/window.navigator.onLine /ja/docs/Web/API/Navigator/onLine /ja/docs/Web/API/window.navigator.oscpu /ja/docs/Web/API/Navigator/oscpu -/ja/docs/Web/API/window.navigator.platform /ja/docs/orphaned/Web/API/NavigatorID/platform -/ja/docs/Web/API/window.navigator.product /ja/docs/orphaned/Web/API/NavigatorID/product +/ja/docs/Web/API/window.navigator.platform /ja/docs/Web/API/Navigator/platform +/ja/docs/Web/API/window.navigator.product /ja/docs/Web/API/Navigator/product /ja/docs/Web/API/window.navigator.productSub /ja/docs/Web/API/Navigator/productSub /ja/docs/Web/API/window.navigator.registerContentHandler /ja/docs/orphaned/Web/API/Navigator/registerContentHandler -/ja/docs/Web/API/window.navigator.userAgent /ja/docs/orphaned/Web/API/NavigatorID/userAgent +/ja/docs/Web/API/window.navigator.userAgent /ja/docs/Web/API/Navigator/userAgent /ja/docs/Web/API/window.navigator.vendor /ja/docs/Web/API/Navigator/vendor /ja/docs/Web/API/window.navigator.vendorSub /ja/docs/Web/API/Navigator/vendorSub /ja/docs/Web/API/window.onabort /ja/docs/Web/API/GlobalEventHandlers/onabort @@ -4082,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 @@ -4366,7 +4355,6 @@ /ja/docs/Web/Reference/Events/vrdisplayconnected /ja/docs/Web/API/Window/vrdisplayconnect_event /ja/docs/Web/Reference/Events/vrdisplaydisconnected /ja/docs/Web/API/Window/vrdisplaydisconnect_event /ja/docs/Web/Reference/Events/vrdisplaypresentchange /ja/docs/Web/API/Window/vrdisplaypresentchange_event -/ja/docs/Web/SVG/Element/solidColor /ja/docs/orphaned/Web/SVG/Element/solidColor /ja/docs/Web/Security/CSP /ja/docs/Web/HTTP/CSP /ja/docs/Web/Security/CSP/CSP_policy_directives /ja/docs/Web/HTTP/Headers/Content-Security-Policy /ja/docs/Web/Security/CSP/Default_CSP_restrictions /ja/docs/Web/HTTP/Headers/Content-Security-Policy diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index cc8248c8af..243b94cab0 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": [ @@ -17815,6 +17830,17 @@ "Potappo" ] }, + "Web/API/IndexedDB_API/Basic_Terminology": { + "modified": "2020-03-25T11:26:36.526Z", + "contributors": [ + "Uemmra3", + "Wind1808", + "wbamberg", + "SphinxKnight", + "mandel59", + "yyss" + ] + }, "Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria": { "modified": "2019-05-23T13:25:35.305Z", "contributors": [ @@ -18820,6 +18846,33 @@ "rootx" ] }, + "Web/API/Navigator/appCodeName": { + "modified": "2019-03-23T23:49:17.312Z", + "contributors": [ + "fscholz", + "jsx", + "ethertank", + "Potappo" + ] + }, + "Web/API/Navigator/appName": { + "modified": "2019-03-23T23:49:11.201Z", + "contributors": [ + "fscholz", + "khalid32", + "ethertank", + "Potappo" + ] + }, + "Web/API/Navigator/appVersion": { + "modified": "2019-03-23T23:49:20.671Z", + "contributors": [ + "fscholz", + "khalid32", + "ethertank", + "Potappo" + ] + }, "Web/API/Navigator/battery": { "modified": "2020-10-15T21:22:04.664Z", "contributors": [ @@ -18925,6 +18978,12 @@ "rootx" ] }, + "Web/API/Navigator/hardwareConcurrency": { + "modified": "2020-10-15T22:16:03.921Z", + "contributors": [ + "shisama" + ] + }, "Web/API/Navigator/keyboard": { "modified": "2020-10-15T22:09:25.704Z", "contributors": [ @@ -19017,12 +19076,31 @@ "Wind1808" ] }, + "Web/API/Navigator/platform": { + "modified": "2020-10-15T21:16:44.396Z", + "contributors": [ + "yyss", + "fscholz", + "arunpandianp", + "ethertank", + "Potappo" + ] + }, "Web/API/Navigator/presentation": { "modified": "2020-11-03T12:01:37.262Z", "contributors": [ "mfuji09" ] }, + "Web/API/Navigator/product": { + "modified": "2019-03-23T23:49:28.986Z", + "contributors": [ + "fscholz", + "khalid32", + "ethertank", + "Potappo" + ] + }, "Web/API/Navigator/productSub": { "modified": "2020-10-15T21:16:44.835Z", "contributors": [ @@ -19081,6 +19159,18 @@ "yuta0801" ] }, + "Web/API/Navigator/userAgent": { + "modified": "2020-10-15T21:16:43.171Z", + "contributors": [ + "mfuji09", + "pcw", + "kenmori", + "fscholz", + "khalid32", + "ethertank", + "Potappo" + ] + }, "Web/API/Navigator/vendor": { "modified": "2020-10-15T21:16:44.842Z", "contributors": [ @@ -48531,6 +48621,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": [ @@ -48915,12 +49012,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": [ @@ -49207,23 +49298,6 @@ "mikamikuh" ] }, - "orphaned/Web/API/HTMLOrForeignElement": { - "modified": "2020-10-15T22:28:17.699Z", - "contributors": [ - "mfuji09" - ] - }, - "orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB": { - "modified": "2020-03-25T11:26:36.526Z", - "contributors": [ - "Uemmra3", - "Wind1808", - "wbamberg", - "SphinxKnight", - "mandel59", - "yyss" - ] - }, "orphaned/Web/API/Navigator/registerContentHandler": { "modified": "2020-10-15T21:15:53.115Z", "contributors": [ @@ -49240,76 +49314,6 @@ "fscholz" ] }, - "orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency": { - "modified": "2020-10-15T22:16:03.921Z", - "contributors": [ - "shisama" - ] - }, - "orphaned/Web/API/NavigatorID": { - "modified": "2019-03-23T23:01:19.867Z", - "contributors": [ - "fscholz" - ] - }, - "orphaned/Web/API/NavigatorID/appCodeName": { - "modified": "2019-03-23T23:49:17.312Z", - "contributors": [ - "fscholz", - "jsx", - "ethertank", - "Potappo" - ] - }, - "orphaned/Web/API/NavigatorID/appName": { - "modified": "2019-03-23T23:49:11.201Z", - "contributors": [ - "fscholz", - "khalid32", - "ethertank", - "Potappo" - ] - }, - "orphaned/Web/API/NavigatorID/appVersion": { - "modified": "2019-03-23T23:49:20.671Z", - "contributors": [ - "fscholz", - "khalid32", - "ethertank", - "Potappo" - ] - }, - "orphaned/Web/API/NavigatorID/platform": { - "modified": "2020-10-15T21:16:44.396Z", - "contributors": [ - "yyss", - "fscholz", - "arunpandianp", - "ethertank", - "Potappo" - ] - }, - "orphaned/Web/API/NavigatorID/product": { - "modified": "2019-03-23T23:49:28.986Z", - "contributors": [ - "fscholz", - "khalid32", - "ethertank", - "Potappo" - ] - }, - "orphaned/Web/API/NavigatorID/userAgent": { - "modified": "2020-10-15T21:16:43.171Z", - "contributors": [ - "mfuji09", - "pcw", - "kenmori", - "fscholz", - "khalid32", - "ethertank", - "Potappo" - ] - }, "orphaned/Web/API/NavigatorPlugins": { "modified": "2019-03-23T23:01:18.262Z", "contributors": [ @@ -49355,56 +49359,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": [ @@ -49846,16 +49800,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": [ @@ -50137,12 +50081,6 @@ "mfuji09" ] }, - "orphaned/Web/SVG/Element/solidColor": { - "modified": "2020-12-06T03:41:32.485Z", - "contributors": [ - "mfuji09" - ] - }, "orphaned/Web/Security/Information_Security_Basics": { "modified": "2020-03-15T03:29:26.429Z", "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/contribute/markdown_in_mdn/index.html b/files/ja/mdn/contribute/markdown_in_mdn/index.html new file mode 100644 index 0000000000..21658cef2b --- /dev/null +++ b/files/ja/mdn/contribute/markdown_in_mdn/index.html @@ -0,0 +1,417 @@ +--- +title: MDN の Markdown +slug: MDN/Contribute/Markdown_in_MDN +tags: + - MDN +--- +<div>{{MDNSidebar}}</div> + +<div class="notecard warning"> + +<h4>警告</h4> + +<p>現在、 MDN のすべてのコンテンツを HTML から Markdown に変換しているところです。現在、 HTML または Markdown でページを書くことができますが、私たちは一つの章の中で書式を混在させたくありません。</p> + +<p>現時点では、 (訳注: 英語版の) JavaScript のドキュメント (<a href="/en-US/docs/Web/JavaScript">https://developer.mozilla.org/en-US/docs/Web/JavaScript</a> 以下のページ) のみが Markdown になっていますので、このページはサイトのその部分にのみ適用されます。サイトの他の部分については、 HTML でドキュメントを書いてください。</p> + +</div> + +<p>このページでは、 Markdown を使用してどのように MDN のドキュメントを書くかを説明します。ベースラインとして GitHub-Flavored Markdown (GFM) を選択し、 GFM では容易にサポートされていない MDN で行う必要のあるいくつかのことに対応するために、いくつかの拡張機能を追加しました。</p> + +<h2>ベースライン: GitHub-Flavored Markdown</h2> + +<p>MDN Markdown のベースラインは GitHub-Flavored Markdown (GFM、 <a href="https://github.github.com/gfm/">https://github.github.com/gfm/</a>) です。このページで特に明記されていないものについては、 GFM の仕様を参照してください。また、 GFM は CommonMark (<a href="https://spec.commonmark.org/">http://spec.commonmark.org/</a>) の上位互換です。</p> + +<h2>コードブロックの例</h2> + +<p>GFM や CommonMark では、「コードフェンス」を使用して <code><pre></code> ブロックを区切ることができます。冒頭のコードフェンスの後には、「情報文字列」と呼ばれるテキストが続くことがあります。仕様書によると、次の通りです。</p> + +<blockquote> + <p>情報文字列の最初の単語は、通常、コードサンプルの言語を指定するために使用され、コードタグの class 属性に表示されます。</p> +</blockquote> + +<p>情報文字列には、次のように複数の単語を含めることができます。</p> + +<pre> +```fee fi fo fum +// some example code +``` +</pre> + +MDN では、書き手はコードブロックのサンプルにコードフェンスを使用します。ライターは情報文字列の最初の単語を使用してコードサンプルの言語を指定する必要があり、これはブロックの構文強調表示を提供するために使用されます。以下の単語に対応しています。 + +<ul> + <li><code>bash</code></li> + <li><code>cpp</code> (for C/C++)</li> + <li><code>css</code></li> + <li><code>html</code></li> + <li><code>java</code></li> + <li><code>js</code> (JavaScript 向け)</li> + <li><code>json</code></li> + <li><code>php</code></li> + <li><code>python</code></li> + <li><code>sql</code></li> + <li><code>xml</code></li> + <li><code>wasm</code> (WebAssembly テキスト書式向け)</li> +</ul> + +例えば、次のようにします。 + +<pre> +```js +const greeting = "I will get syntax highlighting"; +``` +</pre> + +<p>書き手は以下の追加の単語のいずれかを使用することができますが、これらの単語は言語の単語の後に置く必要があります。</p> + +<ul> + <li><code>example-good</code>: この例を良い例 (採用すべきもの) としてスタイル付けする</li> + <li><code>example-bad</code>: この例を悪い例 (避けるべきもの) としてスタイル付けする</li> + <li><code>hidden</code>: このコードブロックをページに表示しません。これはライブサンプルで使用するためのものです。</li> +</ul> + +例: + +<pre> +```js example-good +const greeting = "I'm a good example"; +``` +</pre> + +<h3>議論リファレンス</h3> + +<p>この課題は <a href="https://github.com/mdn/content/issues/3512">https://github.com/mdn/content/issues/3512</a> で解決しました。</p> + +<h2>メモ、警告、コールアウト</h2> + +<p>コンテンツの一部に特別な注意を喚起したい場合があります。そのためには、特別な最初の段落を持つ GFM ブロック引用を使用します。 GFM ブロック引用には、「メモ」「警告」「コールアウト」の 3 種類があります。</p> + +<ul> + <li>メモを追加するには、 GFM ブロック引用の最初の段落を <code>**Note:**</code> で始めてください。</li> + <li>警告を追加するには、 GFM ブロック引用の最初の段落を <code>**Warning:**</code> で始めてください。</li> + <li>コールアウトを追加するには、 GFM ブロック引用の最初の段落を <code>**Callout:**</code> で始めてください。</li> +</ul> + +<p>メモと警告は、出力に <strong>Note:</strong> または <strong>Warning:</strong> というテキストが表示されますが、コールアウトは表示されません。このため、コールアウトは、独自のタイトルを提供したい場合に適しています。</p> + +<p>マークアップの処理は、指定された正確な文字ではなく、生成された AST に基づいて行われます。つまり、 <code><strong>Note:</strong></code> もメモを生成します。ただし、スタイルの問題として Markdown の構文が必要です。</p> + +<p>複数行は、通常の段落と同じように、空のブロック引用行によって生成されます。さらに、スペースのない複数の行は通常の Markdown の行と同様に扱われ、連結されます。</p> + +<p>ブロック引用には、コードブロックやその他のブロック要素を含めることができます。</p> + +<p>"Note:" や "Warning:" というテキストは、レンダリングされた出力にも表示されるため、翻訳に配慮する必要があります。実際には、 MDN で対応しているすべてのロケールがこれらの文字列の独自の翻訳を提供しなければならず、プラットフォームは構成が特別な処理を必要とすることを示すものとして認識しなければならないことを意味します。</p> + +<h4>例</h4> + +<h5>注</h5> + +<pre> +> **Note:** これがメモの書き方です。 +> +> 複数行を入れることもできます。 +</pre> + +<p>これで次のような HTML が生成されます。</p> + +<pre class="brush: html"> +<div class="notecard note"> + <p><strong>Note:</strong> これがメモの書き方です。</p> + <p>複数行を入れることもできます。</p> +</div> +</pre> + +<p>この HTML は次のように、強調ボックスとして描画されます。</p> + +<div class="notecard note"> + <p><strong>Note:</strong> これがメモの書き方です。</p> + <p>複数行を入れることもできます。</p> +</div> + +<h5>警告</h5> + +<pre> +> **Warning:** これが警告の書き方です。 +> +> 複数の段落を入れることもできます。 +</pre> + +<p>これで次のような HTML が生成されます。</p> + +<pre class="brush: html"> +<div class="notecard warning"> + <p><strong>Warning:</strong> これが警告の書き方です。</p> + <p>複数の段落を入れることもできます。</p> +</div> +</pre> + +<p>この HTML は次のように、強調ボックスとして描画されます。</p> + +<div class="notecard warning"> + <p><strong>Warning:</strong> これが警告の書き方です。</p> + <p>複数の段落を入れることもできます。</p> +</div> + +<h5>コールアウト</h5> + +<pre> +> **Callout:** **これがコールアウトの書き方です。** +> +> 複数の段落を入れることもできます。 +</pre> + +<p>これで次のような HTML が生成されます。</p> + +<pre class="brush: html"> +<div class="callout"> + <p><strong>これがコールアウトの書き方です。</strong></p> + <p>複数の段落を入れることもできます。</p> +</div> +</pre> + +<p>この HTML は次のように、強調ボックスとして描画されます。</p> + +<div class="callout"> + <p><strong>これがコールアウトの書き方です。</strong></p> + <p>複数の段落を入れることもできます。</p> +</div> + +<h5>翻訳された警告</h5> + +<p>(訳注: 現時点では日本語の見出しには対応していません。)</p> + +<p>例えば、ドイツ語で "Warning" を "Warnung" としたい場合、ドイツ語のページで次のように書きます。</p> + +<pre> +> Warnung: So schreibt man eine Warnung. +</pre> + +<p>これは次のように表示されます。</p> + +<pre class="brush: html"> +<div class="notecard warning"> + <p><strong>Warnung:</strong> So schreibt man eine Warnung.</p> +</div> +</pre> + +<h5>コードブロックを含むメモ</h5> + +<p>この例はコードブロックを含んでいます。</p> + +<pre> +> **Note:** これがメモの書き方です。 +> +> コードブロックを含むことができます。 +> +> ```js +> const s = "コードブロックの中です"; +> ``` +> こんな感じです。 +</pre> + +<p>これで次のような HTML が生成されます。</p> + +<pre class="brush: html"> +<div class="notecard note"> + <p><strong>Note:</strong> これがメモの書き方です。</p> + <p>コードブロックを含むことができます。</p> + <pre class="brush: js">const s = "コードブロックの中です";</pre> + <p>こんな感じです。</p> +</div> +</pre> + +<p>この HTML は次のようにコードブロックと一緒に描画されます。</p> + +<div class="notecard note"> + <p><strong>Note:</strong> これがメモの書き方です。</p> + <p>コードブロックを含むことができます。.</p> + <pre class="brush: js">const s = "コードブロックの中です";</pre> + <p>こんな感じです。</p> +</div> + +<h3>議論リファレンス</h3> + +<p>この課題は <a href="https://github.com/mdn/content/issues/3483">https://github.com/mdn/content/issues/3483</a> で解決されました。</p> + +<h2>定義リスト</h2> + +<p>MDN で定義リストを作成するためには、 GFM 順序なしリスト ({{HTMLElement("ul")}}) を変更した書き方をします。</p> + +<ul> + <li>GFM <code><ul></code> は任意の数の最上位の GFM <code><li></code> 要素を含みます。</li> + <li>最上位の GFM <code><li></code> 要素は、最後の要素として GFM <code><ul></code> 要素を含みます。</li> + <li>最終的に含まれる <code><ul></code> は、単一の GFM <code><li></code> 要素を含み、この中身は <code>: </code> (コロンに続いて空白) で始まるテキストでなければなりません。この要素はブロック要素、例えば段落、コードブロック、埋め込みリスト、メモなどを含むことができます。</li> +</ul> + +<p>最上位の GFM <code><li></code> 要素は、次のように + <code><dt></code>/<code><dd></code> の組に変換されます。</p> + +<ul> + <li>最上位の GFM <code><li></code> 要素は、GFM <code><li></code> 要素として解析され、その内部コンテンツは、 <code><dt></code> の内容を構成しますが、最後に入れ子になった <code><ul></code> については例外で、 <code><dt></code> には含まれません。 + <li>最後に入れ子になった <code><ul></code> の中の <code><li></code> 要素は、GFM <code><li></code> 要素として解析され、その内容は <code><dd></code> の内容を構成しますが、先頭の <code>: </code> は捨てられます。</li> +</ul> + +例えば、これは <code><dl></code> です。 + +<pre> +* term1 + * : My description of term1 + +* `term2` + * : My description of term2 + + It can have multiple paragraphs, and code blocks too: + + ```js + const thing = 1; + ``` +</pre> + +GFM/CommonMark では、これは次の HTML を生成します。 + +<pre class="brush: html"> +<ul> + <li> + <p>term1</p> + <ul> + <li>: My description of term1</li> + </ul> + </li> + <li> + <p><code>term2</code></p> + <ul> + <li> + <p>: My description of term2</p> + <p>It can have multiple paragraphs, and code blocks too:</p> + <pre> + <code class="brush: js">const thing = 1;</code> + </pre> + </li> + </ul> + </li> +</ul> +</pre> + +MDN では、これは次の HTML を生成します。 + +<pre class="brush: html"> +<dl> + <dt> + <p>term1</p> + </dt> + <dd>My description of term1</dd> + <dt> + <p><code>term2</code></p> + </dt> + <dd> + <p>My description of term2</p> + <p>It can have multiple paragraphs, and code blocks too:</p> + <pre> + <code class="brush: js">const thing = 1;</code> + </pre> + </dd> +</dl> +</pre> + +<p>この構文で書かれた定義リストは、 <code><dt></code>/<code><dd></code> 要素のペアで構成されます。この構文では、 2 つ以上の連続した <code><dt></code> 要素、または 2 つ以上の連続した <code><dd></code> 要素を持つリストを書くことはできません。パーサーはこれをエラーとして扱います。 MDN 上のほとんどすべての定義リストがこの制限で動作することを期待しており、動作しないものについては、生の HTML に戻ることができます。</p> + +<p>複数の <code><dt></code> 項目を 1 つの <code><dd></code> に関連付ける必要がある場合の回避策として、以下のように複数の用語をカンマで区切って 1 つの <code><dt></code> として提供することを検討してください。<p> + +<pre> +* `param1`, `param2`, `param3` + * : My description of params 1, 2, and 3 +</pre> + +<p>ここで説明する構文の根拠は、 CommonMark を期待するツール (Prettier や GitHub のプレビューなど) で十分に機能すると同時に、記述と解析が適度に簡単であることです。</p> + +<h3>議論リファレンス</h3> + +<p>この課題は <a href="https://github.com/mdn/content/issues/4367">https://github.com/mdn/content/issues/4367</a> で解決されました。</p> + +<h2>表</h2> + +<p>GFM では (ただし CommonMark を除く)、表の構文として <a href="https://github.github.com/gfm/#tables-extension-">https://github.github.com/gfm/#tables-extension-</a> があります。これを利用していますが、 GFM の構文は HTML で利用可能な機能の一部しか対応していません。</p> + +<p>ですから、ここでの一般的な原則は、可能な限り GFM Markdown の構文を使用し、必要に応じて生の HTML に戻る必要があるということです。</p> + +<p>GFM の表の構文は、主に以下のような制限があります。</p> + +<ul> + <li>GFM の表ではヘッダー行が必要です。</li> + <li>GFM の表ではヘッダー列を設定することができません。</li> + <li>GFM は表のセル内にある GFM ブロック要素を解析しません。例えば、表のセル内にリストを入れることはできません。</li> + <li>GFM は <code><table></code>, <code><tr></code>, <code><th></code>, <code><td></code> 以外の表要素に対応していません。</li> + <li>GFM は <code>colspan</code>, <code>rowspan</code>, <code>scope</code> のような表要素の属性に対応していません。</li> +</ul> + +<p>これらのみ対応の機能を使用する必要がある場合は、表を HTML で記述する必要があります。</p> + +<p>また、 <code><caption></code> 要素を表に使用することはお勧めしません。これも GFM の構文の規則外になるからです。</p> + +<p>GFM の表の構文では、行の最初と最後のパイプ記号を省略することができます。 MDN の編集者は、読みやすさのためにこれらのパイプ記号を記入する必要があります。</p> + +<p>つまり、 MDN の編集者はこのスタイルを使用する必要があります。</p> + +<pre> +| Heading 1 | Heading 2 | Heading 3 | +|-----------|-----------|-----------| +| cell 1 | cell 2 | cell 3 | +| cell 4 | cell 5 | cell 6 | +</pre> + +<p>このスタイルではありません。</p> + +<pre> +Heading 1 | Heading 2 | Heading 3 + --- | --- | --- +cell 1 | cell 2 | cell 3 +cell 4 | cell 5 | cell 6 +</pre> + +<h3>議論リファレンス</h3> + +<p>この課題は <a href="https://github.com/mdn/content/issues/4325">https://github.com/mdn/content/issues/4325</a> で解決しました。</p> + +<h2>上付き・下付き文字</h2> + +<p>HTML の {{HTMLElement("sup")}} および {{HTMLElement("sub")}} 要素を必要に応じて使用することができますが、可能な限り代替策を採ってください。具体的には次のようにします。</p> + +<ul> + <li>べき乗については、 <code>2^53</code> のようにキャレットを使用してください。</li> + <li>1<sup>st</sup> のような序数表現では、 "first" のように言葉を使用してください。</li> + <li>脚注については、脚注参照を <code><sup>[1]</sup></code> のようにマークアップする必要はありません。不必要なものです。</li> +</ul> + +<h3>議論リファレンス</h3> + +<p>この課題は <a href="https://github.com/mdn/content/issues/4578">https://github.com/mdn/content/issues/4578</a> で解決しました。</p> + +<h2>ページ概要</h2> + +<p><em>ページ概要</em>はページの最初の「コンテンツ」の段落、すなわち、ページのフロントマター、<a href="#kumascript">サイドバー、ページバナーのマクロ</a>の後に表示される最初のテキストです。</p> + +<p>この概要は検索エンジン最適化 (SEO) のために使用され、また、マクロによってはページリストに自動的に含まれます。 + したがって、最初の段落は、簡潔で説明的なものでなければなりません。</p> + +<h3>議論リファレンス</h3> + +<p>この課題は <a href="https://github.com/mdn/content/issues/3923">https://github.com/mdn/content/issues/3923</a> で解決しました。</p> + +<h2>KumaScript</h2> + +<p>文章のコンテンツに、 KumaScript のマクロ呼び出しを含めることができます。</p> + +<pre> + +The **`margin`** [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) property +sets the margin area on all four sides of an element. It is a shorthand for +\{{cssxref("margin-top")}}, \{{cssxref("margin-right")}}, \{{cssxref("margin-bottom")}}, +and \{{cssxref("margin-left")}}. + +\{{EmbedInteractiveExample("pages/css/margin.html")}} + +The top and bottom margins have no effect on replaced inline elements, such as +\{{HTMLElement("span")}} or \{{HTMLElement("code")}}. + +</pre> 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/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html index defff78437..4f00d1637e 100644 --- a/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html +++ b/files/ja/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -15,7 +15,7 @@ original_slug: Using_Firefox_1.5_caching <h2 id=".E3.81.AF.E3.81.98.E3.82.81.E3.81.AB" name=".E3.81.AF.E3.81.98.E3.82.81.E3.81.AB">はじめに</h2> -<p><a href="/ja/Firefox_1.5_for_developers" title="ja/Firefox_1.5_for_developers">Firefox 1.5</a> ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は <strong>bfcache</strong>（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。</p> +<p><a href="/ja/Firefox_1.5_for_developers">Firefox 1.5</a> ではウェブページ全体をその JavaScript の状態も含めてメモリ内にキャッシュし、1 つのブラウザセッションとして使用します。訪問したページ間の戻る、進むという動作にページのロードが不要になり、JavaScript の状態も保存されます。この機能によってページナビゲーションが非常に高速化します。この機能は <strong>bfcache</strong>（"Back-Forward Cache" のこと）と呼ばれることもあります。このキャッシュ状態はユーザがブラウザを閉じるまで保存されます。</p> <p>Firefox がページをキャッシュしない場合があります。ページがキャッシュされないプログラム的な理由でよくあるものをいくつか以下に示します。</p> @@ -187,6 +187,6 @@ function loadOnlyFirst() { <h2 id="Firefox_.E7.94.A8.E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E9.96.8B.E7.99.BA" name="Firefox_.E7.94.A8.E6.8B.A1.E5.BC.B5.E6.A9.9F.E8.83.BD.E3.81.AE.E9.96.8B.E7.99.BA">Firefox 用拡張機能の開発</h2> -<p>Firefox 1.5 の <a href="/ja/Building_an_Extension" title="ja/Building_an_Extension">拡張機能</a> はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては <code>load</code> イベントをリスンし、キャッシュされないようにするトリガについては <code>pageshow</code> イベントをリスンしてください。</p> +<p>Firefox 1.5 の <a href="/ja/Building_an_Extension">拡張機能</a> はこのキャッシュ機能を許容するものである必要があります。1.5 とそれより前のバージョンの両方と互換性を持つ Firefox の拡張機能を開発したいのであれば、キャッシュされるようにするトリガについては <code>load</code> イベントをリスンし、キャッシュされないようにするトリガについては <code>pageshow</code> イベントをリスンしてください。</p> <p>例えば Firefox 用 Google ツールバーは、1.5 とそれより前のバージョンの両方と互換性を持たせるためには、autolink 関数については <code>load</code> イベントをリスンすべきであり、PageRank 関数については <code>pageshow</code> イベントをリスンすべきです。</p> diff --git a/files/ja/mozilla/firefox/releases/13/index.html b/files/ja/mozilla/firefox/releases/13/index.html index 1be4add1b3..3b59a7e858 100644 --- a/files/ja/mozilla/firefox/releases/13/index.html +++ b/files/ja/mozilla/firefox/releases/13/index.html @@ -39,7 +39,7 @@ translation_of: Mozilla/Firefox/Releases/13 <li>{{ domxref("window.setTimeout()") }} および {{ domxref("window.setInterval()") }} メソッドは、付加的な引数である "遅延" をコールバックルーチンに渡さないようになりました。</li> <li>{{ domxref("Blob","Blob.mozSlice()") }} メソッドの接頭辞を削除しました。</li> <li>{{ domxref("Blob") }} コンストラクタをサポートしました。</li> - <li><a href="/ja/DOM/Storage#globalStorage" title="ja/DOM/Storage#globalStorage"><code>globalStorage</code></a> のサポートを削除しました。</li> + <li><a href="/ja/DOM/Storage#globalStorage"><code>globalStorage</code></a> のサポートを削除しました。</li> <li>バックグラウンドの処理の状態や結果を報告するために用いる {{ domxref("DOMRequest") }} インタフェースを新たに追加しました。</li> <li>{{ domxref("HTMLOptionElement", "HTMLOptionElement.index()") }} メソッドは、{{ HTMLElement("option") }} が {{ HTMLElement("datalist") }} HTML 要素の内部にあるときに誤った値 <code>-1</code> ではなく <code>0</code> を返すようになりました。</li> <li>{{ domxref("DOMException") }} のうち DOM Level 4 で定義された部分を実装しました。</li> @@ -65,7 +65,7 @@ translation_of: Mozilla/Firefox/Releases/13 <h3 id="WebGL">WebGL</h3> <ul> - <li><a href="/ja/WebGL/Using_Extensions#EXT_texture_filter_anisotropic" title="ja/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a> 拡張のサポートを追加しました。異方性テクスチャフィルタリングは、テクスチャが貼り付けられた斜めのプリミティブを表示する際のミップマップテクスチャのアクセスの品質を向上させます。</li> + <li><a href="/ja/WebGL/Using_Extensions#EXT_texture_filter_anisotropic"><code>EXT_texture_filter_anisotropic</code></a> 拡張のサポートを追加しました。異方性テクスチャフィルタリングは、テクスチャが貼り付けられた斜めのプリミティブを表示する際のミップマップテクスチャのアクセスの品質を向上させます。</li> </ul> <h3 id="MathML">MathML</h3> diff --git a/files/ja/mozilla/firefox/releases/14/index.html b/files/ja/mozilla/firefox/releases/14/index.html index 4e2ebb8a22..be3496df2a 100644 --- a/files/ja/mozilla/firefox/releases/14/index.html +++ b/files/ja/mozilla/firefox/releases/14/index.html @@ -24,14 +24,14 @@ translation_of: Mozilla/Firefox/Releases/14 <h3 id="DOM">DOM</h3> <ul> - <li><a href="/ja/DOM/DOM_event_reference/input" title="ja/DOM/DOM_event_reference/input">input</a> イベントが <a href="/en/DOM/Element.contentEditable" title="en/DOM/Element.contentEditable">contenteditable</a> エディタをホストしている要素および <a href="/en/DOM/document.designMode" title="document.designMode">designMode</a> エディタのルート要素上での編集でも発生するようになりました。</li> + <li><a href="/ja/DOM/DOM_event_reference/input">input</a> イベントが <a href="/en/DOM/Element.contentEditable" title="en/DOM/Element.contentEditable">contenteditable</a> エディタをホストしている要素および <a href="/en/DOM/document.designMode" title="document.designMode">designMode</a> エディタのルート要素上での編集でも発生するようになりました。</li> <li>{{ domxref("DOMException", "DOMException.code") }} は最新の DOM Level 4 仕様に従って非推奨になりました。</li> <li>{{ domxref("Range.insertNode()") }} が 折り畳まれた (collapsed) 範囲上で用いられたときに正しく動作するようになりました。</li> <li>{{ domxref("BlobBuilder", "MozBlobBuilder") }} インタフェースが {{ domxref("Blob") }} コンストラクタの利用を促すために非推奨になりました。<code>MozBlobBuilder</code> を利用した場合、Web コンソールに警告が表示されます。</li> <li>{{ domxref("DOM_Mutation_Observers","MutationObserver") }} のサポートが導入されました。これは、パフォーマンスに関する多くの問題がある DOM3 の Mutation Events の置き換えとして設計されました。</li> <li>{{ domxref("HTMLImageElement") }} インタフェースの <code>x</code> <code><code>プロパティおよび </code>y</code> プロパティは Gecko 7.0 で削除されましたが、互換性の理由でこのリリースから復活しました。</li> <li>{{ domxref("Document") }} のメソッドである <code>execCommandShowHelp()<code><code> と<code><code> </code></code></code></code></code><code>queryCommandText() は、今まで何もしませんでしたが、削除されました。</code></li> - <li><code>GeoPositionAddress</code> インタフェースは、<a href="/Ja/Using_geolocation" title="Ja/Using_geolocation">Geolocation</a> API で廃止された仕様の一部であり、削除されました。</li> + <li><code>GeoPositionAddress</code> インタフェースは、<a href="/Ja/Using_geolocation">Geolocation</a> API で廃止された仕様の一部であり、削除されました。</li> <li>{{ domxref("Storage", "localStorage/sessionStorage") }} がプロパティアクセスを通した宣言されていないキーに対して <code>null</code> ではなく<code> undefined</code> を正しく返すようになりました。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/19/index.html b/files/ja/mozilla/firefox/releases/19/index.html index d61dcc05d8..3dae46cb2e 100644 --- a/files/ja/mozilla/firefox/releases/19/index.html +++ b/files/ja/mozilla/firefox/releases/19/index.html @@ -57,7 +57,7 @@ translation_of: Mozilla/Firefox/Releases/19 <ul> <li><code>getBrowserSelection()</code> が、テキスト入力フィールドで選択されているテキストを返すようになりました。このため、ユーザがパスワードフィールドではないテキスト入力フィールドでテキストを選択したときに、<code>gContextMenu.isTextSelected</code> が <code>true</code> になります ({{bug("565717")}})。</li> - <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm" title="ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm">Dict.jsm</a>: <a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary" title="ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary"><code>Dict()</code></a> が JSON 文字列を受け入れるようになりました。<a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()" title="ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()"><code>Dict.toJSON()</code></a> メソッドが追加され、これは JSON 文字列を返します ({{bug("727967")}})。</li> + <li><a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm">Dict.jsm</a>: <a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#Creating_a_dictionary"><code>Dict()</code></a> が JSON 文字列を受け入れるようになりました。<a href="/ja/docs/Mozilla/JavaScript_code_modules/Dict.jsm#toJSON()"><code>Dict.toJSON()</code></a> メソッドが追加され、これは JSON 文字列を返します ({{bug("727967")}})。</li> </ul> <h3 id="Interface_changes" name="Interface_changes">インタフェースの変更点</h3> diff --git a/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html index ea919ee652..c9e52ddc98 100644 --- a/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html +++ b/files/ja/mozilla/firefox/releases/3.5/updating_extensions/index.html @@ -26,9 +26,9 @@ firefox -createProfile testBeta2 <p>テストが完了したら、今度は常用のプロファイルを使って、再度その拡張機能を使ってみます。 この作業は、保存されている既存のデータとの互換性を確認するのに役立ちます。</p> <h3 id="addons.mozilla.org_に登録されている拡張機能の更新">addons.mozilla.org に登録されている拡張機能の更新</h3> <p>ついに、更新した拡張機能を公開するときが来ました。 もし自分の拡張機能に一切コードの変更が必要ない場合は、AMO のダッシュボードにログインして、互換性のあるバージョンを更新するだけで済みます。 何らかの変更を加えた場合は、新しいバージョンを AMO にアップロードする必要があります。</p> -<p>詳しくは <a class="internal" href="/ja/Submitting_an_add-on_to_AMO" title="ja/Submitting an add-on to AMO">AMO へのアドオンの登録</a> を参照してください。</p> +<p>詳しくは <a class="internal" href="/ja/Submitting_an_add-on_to_AMO">AMO へのアドオンの登録</a> を参照してください。</p> <h2 id="Places_データベースへのアクセス">Places データベースへのアクセス</h2> -<p>Firefox 3.1 以前は、<a class="internal" href="/ja/Storage" title="ja/Storage">Storage API</a> を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。</p> +<p>Firefox 3.1 以前は、<a class="internal" href="/ja/Storage">Storage API</a> を使って Places データベースへ直接アクセスする場合、以下のように少々工夫が必要でした。</p> <pre class="brush: js">var places = Components.classes["@mozilla.org/file/directory_service;1"]. getService(Components.interfaces.nsIProperties). get("ProfD", Components.interfaces.nsIFile); @@ -42,7 +42,7 @@ var db = Components.classes["@mozilla.org/storage/service;1"]. getService(Components.interfaces.nsPIPlacesDatabase).DBConnection; </pre> <h2 id="テキストボックスの検索">テキストボックスの検索</h2> -<p><a class="internal" href="/ja/XUL/textbox" title="ja/XUL/Textbox"><code>textbox</code></a> の種類のひとつ、<code>timed</code> は廃止予定となりました。代わりに <code>search</code> を使ってください。</p> +<p><a class="internal" href="/ja/XUL/textbox"><code>textbox</code></a> の種類のひとつ、<code>timed</code> は廃止予定となりました。代わりに <code>search</code> を使ってください。</p> <p>Firefox 3 では、以下のようなコードが使われていたはずです。</p> <pre><textbox type="timed" timeout="1000" oncommand="alert(this.value);"/> </pre> @@ -50,7 +50,7 @@ var db = Components.classes["@mozilla.org/storage/service;1"]. <pre><textbox type="search" timeout="1000" oncommand="alert(this.value);"/> </pre> <h2 id="JSON">JSON</h2> -<p>JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、<a class="internal" href="/ja/Using_JSON_in_Firefox" title="/ja/Using JSON in Firefox">Firefox で JSON を使用する</a> をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、<a class="internal" href="/ja/JSON" title="ja/JSON">JSON</a> のページからリンクされている記事を参照してください。</p> +<p>JSON.jsm JavaScript モジュールは Firefox 3.1 では削除され、ネイティブの JSON オブジェクトサポートに置き換えられました。 詳しくは、<a class="internal" href="/ja/Using_JSON_in_Firefox" title="/ja/Using JSON in Firefox">Firefox で JSON を使用する</a> をご覧ください。JSON のより一般的な概要と、各種バージョンの Firefox で JSON を使う方法については、<a class="internal" href="/ja/JSON">JSON</a> のページからリンクされている記事を参照してください。</p> <p>Firefox 3 と Firefox 3.1 の両方について互換性を確保するには、以下のように記述します。</p> <pre class="brush: js">if (typeof(JSON) == "undefined") { Components.utils.import("resource://gre/modules/JSON.jsm"); @@ -67,7 +67,7 @@ var db = Components.classes["@mozilla.org/storage/service;1"]. <p>Firefox 3.1 では、カスタマイズ可能なツールバーの挙動が次のように変更されました。<xul:toolbar/> バインディングは、関連付けられた <xul:toolbarpalette/> からツールバー削除、もしくはツールバーへ追加するようになりました。これまでは、項目を複製してツールバーへコピーしていました。 つまり、パレットには、ツールバー上に存在しないアイテムしか含めることができません。これまでの挙動では、ツールバー上に表示されているかどうかに関わらず、カスタマイズ可能なすべての要素が含まれていました。 これは、<xul:toolbarpalette/> からカスタマイズ可能なすべてのツールバー項目を取得できることに依存した処理を行っていたり、ツールバーのカスタマイズ中に動的にパレットへ項目を挿入し、それらを利用可能にしようとしているアドオンで問題となる可能性があります。 詳しくは、{{ Bug(407725) }} と {{ Bug(467045) }} をご覧ください。</p> <h2 id="興味深い新機能">興味深い新機能</h2> <h3 id="すべてのタブのイベントを監視する">すべてのタブのイベントを監視する</h3> -<p>Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、<a class="internal" href="/ja/Listening_to_events_on_all_tabs" title="ja/Listening to events on all tabs">すべてのタブのイベントを監視する</a> をご覧ください。</p> +<p>Firefox 3.1 では、すべてのタブを監視するプログレスリスナーを追加、削除できるようになりました。 詳しくは、<a class="internal" href="/ja/Listening_to_events_on_all_tabs">すべてのタブのイベントを監視する</a> をご覧ください。</p> <h2 id="テーマ開発者の方へ">テーマ開発者の方へ</h2> -<ul> <li><a class="internal" href="/ja/Theme_changes_in_Firefox_3.1" title="ja/Theme changes in Firefox 3.1">Firefox 3.1 でのテーマ関連の変更</a> を確認してください。</li> <li>Mozillazine フォーラムの <a class="topictitle external" href="http://forums.mozillazine.org/viewtopic.php?f=18&t=665138" title="http://forums.mozillazine.org/viewtopic.php?f=18&t=665138">Theme changes for FF3.1</a> を参照して、3.0 から 3.1 の間に行われた、テーマ開発者に影響するすべての変更の概要、一覧を確認してください。 このスレッドでは、CSS の新機能 (nth-child、-moz-box-shadow など)、既存の UI 部品への変更、UI 全体の改善、Firefox 3.1 の新機能 (audio/video のサポート、プライベートブラウジング、セッション復元機能の拡張、ボックス・ウィンドウ・テキストシャドウ) が議論されています。</li> +<ul> <li><a class="internal" href="/ja/Theme_changes_in_Firefox_3.1">Firefox 3.1 でのテーマ関連の変更</a> を確認してください。</li> <li>Mozillazine フォーラムの <a class="topictitle external" href="http://forums.mozillazine.org/viewtopic.php?f=18&t=665138" title="http://forums.mozillazine.org/viewtopic.php?f=18&t=665138">Theme changes for FF3.1</a> を参照して、3.0 から 3.1 の間に行われた、テーマ開発者に影響するすべての変更の概要、一覧を確認してください。 このスレッドでは、CSS の新機能 (nth-child、-moz-box-shadow など)、既存の UI 部品への変更、UI 全体の改善、Firefox 3.1 の新機能 (audio/video のサポート、プライベートブラウジング、セッション復元機能の拡張、ボックス・ウィンドウ・テキストシャドウ) が議論されています。</li> </ul> diff --git a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html index 910891d3dd..8a7859aa32 100644 --- a/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/ja/mozilla/firefox/releases/3/updating_extensions/index.html @@ -12,7 +12,7 @@ original_slug: Updating_extensions_for_Firefox_3 <h3 id="Step_1_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E6.9B.B4.E6.96.B0.E3.81.99.E3.82.8B" name="Step_1:_.E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.82.92.E6.9B.B4.E6.96.B0.E3.81.99.E3.82.8B">Step 1: インストール定義ファイルを更新する</h3> -<p>最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために <a href="/ja/Install_Manifests" title="ja/Install_Manifests">インストール定義ファイル</a> (<code>install.rdf</code>) を更新する作業です。</p> +<p>最初のステップ、そして、ほとんどの拡張機能にとって必要となるたったひとつのステップは、Firefox 3 との互換性を示すために <a href="/ja/Install_Manifests">インストール定義ファイル</a> (<code>install.rdf</code>) を更新する作業です。</p> <p>ファイルを開いて、互換性がある Firefox の最高バージョンを示す行を見つけます。Firefox 2 向けの拡張機能であれば、以下のように書かれているはずです。</p> @@ -34,11 +34,11 @@ original_slug: Updating_extensions_for_Firefox_3 <h4 id=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AB.E7.BF.BB.E8.A8.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B" name=".E3.82.A4.E3.83.B3.E3.82.B9.E3.83.88.E3.83.BC.E3.83.AB.E5.AE.9A.E7.BE.A9.E3.83.95.E3.82.A1.E3.82.A4.E3.83.AB.E3.81.AB.E7.BF.BB.E8.A8.B3.E3.82.92.E8.BF.BD.E5.8A.A0.E3.81.99.E3.82.8B">インストール定義ファイルに翻訳を追加する</h4> -<p>Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは <a href="/ja/Localizing_extension_descriptions" title="ja/Localizing_extension_descriptions">拡張機能の説明の翻訳</a> をご覧ください。</p> +<p>Firefox 3 は、翻訳された説明文を指定するための新しいプロパティを、インストール定義ファイル内でサポートしています。今までの方法も引き続き動作しますが、この新しい方法を利用すれば、アドオンが無効化されていたりインストールが保留されている場合も、各言語で説明文を表示できるようになります。詳しくは <a href="/ja/Localizing_extension_descriptions">拡張機能の説明の翻訳</a> をご覧ください。</p> <h3 id="Step_2_.E5.AE.89.E5.85.A8.E3.81.AA.E6.9B.B4.E6.96.B0.E3.82.92.E6.8F.90.E4.BE.9B.E3.81.97.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E7.A2.BA.E8.AA.8D.E3.81.99.E3.82.8B" name="Step_2:_.E5.AE.89.E5.85.A8.E3.81.AA.E6.9B.B4.E6.96.B0.E3.82.92.E6.8F.90.E4.BE.9B.E3.81.97.E3.81.A6.E3.81.84.E3.82.8B.E3.81.8B.E7.A2.BA.E8.AA.8D.E3.81.99.E3.82.8B">Step 2: 安全な更新を提供しているか確認する</h3> -<p>あなたが独自にアドオンを配布していて、<a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは <a href="/ja/Extension_Versioning,_Update_and_Compatibility#Securing_Updates" title="ja/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">安全な更新</a> をご覧ください。</p> +<p>あなたが独自にアドオンを配布していて、<a class="link-https" href="https://addons.mozilla.org">addons.mozilla.org</a> のような安全なアドオン提供サービスを利用していない場合、アドオンの更新に安全な方法を用いる必要があります。つまり、SSL を利用した Web サイト上で更新を提供するか、暗号鍵を使って更新情報に署名する必要があります。詳しくは <a href="/ja/Extension_Versioning,_Update_and_Compatibility#Securing_Updates">安全な更新</a> をご覧ください。</p> <h3 id="Step_3_.E5.A4.89.E6.9B.B4.E3.81.95.E3.82.8C.E3.81.9F_API_.E3.81.AB.E5.AF.BE.E5.BF.9C.E3.81.99.E3.82.8B" name="Step_3:_.E5.A4.89.E6.9B.B4.E3.81.95.E3.82.8C.E3.81.9F_API_.E3.81.AB.E5.AF.BE.E5.BF.9C.E3.81.99.E3.82.8B">Step 3: 変更された API に対応する</h3> @@ -55,31 +55,31 @@ original_slug: Updating_extensions_for_Firefox_3 <h4 id=".E3.83.96.E3.83.83.E3.82.AF.E3.83.9E.E3.83.BC.E3.82.AF.E3.81.A8.E5.B1.A5.E6.AD.B4" name=".E3.83.96.E3.83.83.E3.82.AF.E3.83.9E.E3.83.BC.E3.82.AF.E3.81.A8.E5.B1.A5.E6.AD.B4">ブックマークと履歴</h4> -<p>あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、<a href="/ja/Places" title="ja/Places">Places</a> という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、<a href="/ja/Places_migration_guide" title="ja/Places_migration_guide">Places への移行ガイド</a> で詳しく解説しています。</p> +<p>あなたの拡張機能から何らかの方法でブックマークや履歴のデータにアクセスしている場合、Firefox 3 と互換性を持たせるには多くの作業が必要です。これらの情報にアクセスするための古い API は、<a href="/ja/Places">Places</a> という新しいアーキテクチャに置き換えられました。既存の拡張機能を Places API に対応させる方法については、<a href="/ja/Places_migration_guide">Places への移行ガイド</a> で詳しく解説しています。</p> <h4 id=".E3.83.80.E3.82.A6.E3.83.B3.E3.83.AD.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3" name=".E3.83.80.E3.82.A6.E3.83.B3.E3.83.AD.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3">ダウンロードマネージャ</h4> -<p>RDF データ形式から <a href="/ja/Storage" title="ja/Storage">Storage</a> API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>、<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>、<a href="/ja/Monitoring_downloads" title="ja/Monitoring_downloads">ダウンロードの監視</a> を参照してください。</p> +<p>RDF データ形式から <a href="/ja/Storage">Storage</a> API への移行にあたって、ダウンロードマネージャの API にも若干変更が加えられました。これに関する移行作業は非常に簡単なはずです。また、複数のダウンロードマネージャリスナーをサポートするため、ダウンロードの進捗状況を監視する API にも変更がありました。詳しくは <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadManager" title="">nsIDownloadManager</a></code>、<code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDownloadProgressListener" title="">nsIDownloadProgressListener</a></code>、<a href="/ja/Monitoring_downloads">ダウンロードの監視</a> を参照してください。</p> <h4 id=".E3.83.91.E3.82.B9.E3.83.AF.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3" name=".E3.83.91.E3.82.B9.E3.83.AF.E3.83.BC.E3.83.89.E3.83.9E.E3.83.8D.E3.83.BC.E3.82.B8.E3.83.A3">パスワードマネージャ</h4> <p>あなたの拡張機能からパスワードマネージャを利用してユーザのログイン情報にアクセスしている場合、新しいログインマネージャ API を利用するように更新する必要があります。</p> <ul> - <li><a href="/ja/Using_nsILoginManager" title="ja/Using_nsILoginManager">nsILoginManager の使い方</a> という記事には、パスワードマネージャとログインマネージャの両方を用いることで、Firefox 3 とそれ以前のバージョンの両方で機能拡張を動作させるデモなど、コードサンプルが載っています。</li> - <li><code><a href="/ja/nsILoginInfo" title="ja/nsILoginInfo">nsILoginInfo</a></code></li> - <li><code><a href="/ja/nsILoginManager" title="ja/nsILoginManager">nsILoginManager</a></code></li> + <li><a href="/ja/Using_nsILoginManager">nsILoginManager の使い方</a> という記事には、パスワードマネージャとログインマネージャの両方を用いることで、Firefox 3 とそれ以前のバージョンの両方で機能拡張を動作させるデモなど、コードサンプルが載っています。</li> + <li><code><a href="/ja/nsILoginInfo">nsILoginInfo</a></code></li> + <li><code><a href="/ja/nsILoginManager">nsILoginManager</a></code></li> </ul> -<p>あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは <a href="/ja/Creating_a_Login_Manager_storage_module" title="ja/Creating_a_Login_Manager_storage_module">ログインマネージャ用ストレージモジュールの作成</a> をご覧ください。</p> +<p>あなたが拡張機能の中で独自のパスワードストレージを提供したい場合は、組み込みのパスワードマネージャストレージを上書きすることもできます。詳しくは <a href="/ja/Creating_a_Login_Manager_storage_module">ログインマネージャ用ストレージモジュールの作成</a> をご覧ください。</p> <h4 id=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97_.28.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97.E3.80.81.E3.83.91.E3.83.8D.E3.83.AB.29" name=".E3.83.9D.E3.83.83.E3.83.97.E3.82.A2.E3.83.83.E3.83.97_.28.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.82.B3.E3.83.B3.E3.83.86.E3.82.AD.E3.82.B9.E3.83.88.E3.83.A1.E3.83.8B.E3.83.A5.E3.83.BC.E3.80.81.E3.83.84.E3.83.BC.E3.83.AB.E3.83.81.E3.83.83.E3.83.97.E3.80.81.E3.83.91.E3.83.8D.E3.83.AB.29">ポップアップ (メニュー、コンテキストメニュー、ツールチップ、パネル)</h4> -<p>XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては <a href="/ja/XUL/PopupGuide" title="ja/XUL/PopupGuide">ポップアップの使用</a> ガイドをご覧ください。特筆すべき点は、<code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> が非推奨となり、新しい <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> と <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code> に置き換えられたことです。</p> +<p>XUL のポップアップシステムは Firefox 3 で大幅に変更されました。ポップアップシステムには、メインメニュー、コンテキストメニュー、ポップアップパネルが含まれます。新しいシステムの仕組みについては <a href="/ja/XUL/PopupGuide">ポップアップの使用</a> ガイドをご覧ください。特筆すべき点は、<code>popup.<span id="m-showPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/showPopup">showPopup</a></code></span></code> が非推奨となり、新しい <code>popup.<span id="m-openPopup"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopup">openPopup</a></code></span></code> と <code>popup.<span id="m-openPopupAtScreen"><code><a href="https://developer.mozilla.org/ja/docs/Mozilla/Tech/XUL/Method/openPopupAtScreen">openPopupAtScreen</a></code></span></code> に置き換えられたことです。</p> <h4 id=".E8.87.AA.E5.8B.95.E8.A3.9C.E5.AE.8C" name=".E8.87.AA.E5.8B.95.E8.A3.9C.E5.AE.8C">自動補完</h4> -<p><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> インタフェースの <code><a href="/ja/NsIAutoCompleteController#handleEnter.28.29" title="ja/NsIAutoCompleteController#handleEnter.28.29">handleEnter()</a></code> メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。</p> +<p><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAutoCompleteController" title="">nsIAutoCompleteController</a></code> インタフェースの <code><a href="/ja/NsIAutoCompleteController#handleEnter.28.29">handleEnter()</a></code> メソッドは、テキストが自動補完ポップアップから選択されたか、ユーザが自分で入力した後 Enter キーを押したかを示す引数を受け付けるよう変更が行われました。</p> <h4 id="DOMParser" name="DOMParser">DOMParser</h4> @@ -133,16 +133,16 @@ original_slug: Updating_extensions_for_Firefox_3 <li><code><a class="external" rel="freelink">chrome://browser/base/utilityOverlay.js</a></code> は、セキュリティ上の理由からサポートされなくなりました。これまでこのスクリプトを利用していた場合は、<code><a class="external" rel="freelink">chrome://browser/content/utilityOverlay.js</a></code> へ切り替えてください。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIAboutModule" title="">nsIAboutModule</a></code> の実装には、<code>getURIFlags</code> メソッドのサポートが必要になりました。詳しくは <a href="https://dxr.mozilla.org/mozilla-central/source/netwerk/protocol/about/public/nsIAboutModule.idl" rel="custom">nsIAboutModule.idl</a> を参照してください。これは新しい <code>about:</code> URI を提供する拡張機能に影響します (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=337746" title='FIXED: [FIX]Move "safe about" hardcoding out of security manager'>バグ 337746</a>)。</li> <li><code><a href="/ja/docs/Mozilla/Tech/XUL/tabbrowser" title="tabbrowser">tabbrowser</a></code> 要素は「ツールキット」の一部ではなくなりました (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=339964" title="FIXED: move tabbrowser.xml out of mozilla/toolkit and into mozilla/browser">バグ 339964</a>)。このため、この要素は今後 XUL アプリケーションや拡張機能の中では利用できません。ただし、Firefox のメインウィンドウ (browser.xul) では今後も使われます。</li> - <li><a href="/ja/nsISupports_proxies" title="ja/nsISupports_proxies">nsISupports プロキシ</a> の変更と、おそらくスレッド関連インタフェースへの変更については、ドキュメントを用意する必要があります。</li> + <li><a href="/ja/nsISupports_proxies">nsISupports プロキシ</a> の変更と、おそらくスレッド関連インタフェースへの変更については、ドキュメントを用意する必要があります。</li> <li>XUL ファイル内で <code><?xml-stylesheet ?></code> などの XML 処理命令を用いている場合、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=319654" title="FIXED: Processing instructions in XUL are not added to the content model">バグ 319654</a> で行われた以下の変更に注意してください。 <ol> <li>XML PI が XUL ドキュメントの DOM に追加されました。これは、<a href="/ja/docs/Web/API/Document/firstChild" title="この項目についての文書はまだ書かれていません。書いてみませんか？"><code>document.firstChild</code></a> が必ずしもルート要素を返すとは限らない、ということを意味します。スクリプト内でルートドキュメントを得るには、代わりに <a href="/ja/docs/Web/API/Document/documentElement" title="Document.documentElement は、その document のルート要素 (例えば、 HTML 文書の場合は <html> 要素) である Element を返します。"><code>document.documentElement</code></a> を用いてください。</li> <li><code><?xml-stylesheet ?></code> と <code><?xul-overlay ?></code> 処理命令は、ドキュメントの前文以外の場所に書かれた場合、動作しなくなりました。</li> </ol> </li> - <li><code>window.addEventListener("load", myFunc, true)</code> が、Web コンテンツが読み込まれた際 (ブラウザのページ読み込み時) に呼び出されなくなりました。これは、inner ウィンドウと outer ウィンドウの関係が変わったことによります (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">バグ 296639</a>)。簡単な修正方法は、<a href="/ja/Code_snippets/Tabbed_browser#Detecting_page_load" title="ja/Code_snippets/Tabbed_browser#Detecting_page_load">ここ</a> に書かれているように <code>gBrowser.addEventListener("load", myFunc, true)</code> を使うことです。この方法は Firefox 2 でも有効です。</li> + <li><code>window.addEventListener("load", myFunc, true)</code> が、Web コンテンツが読み込まれた際 (ブラウザのページ読み込み時) に呼び出されなくなりました。これは、inner ウィンドウと outer ウィンドウの関係が変わったことによります (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=296639" title="FIXED: Split windows into an inner and outer object">バグ 296639</a>)。簡単な修正方法は、<a href="/ja/Code_snippets/Tabbed_browser#Detecting_page_load">ここ</a> に書かれているように <code>gBrowser.addEventListener("load", myFunc, true)</code> を使うことです。この方法は Firefox 2 でも有効です。</li> <li><code>content.window.getSelection()</code> は、文字列を返す、非推奨となった <code>content.document.getSelection()</code> とは異なり、オブジェクトを返します (<code>toString()</code> を使えば文字列に変換できます)。</li> - <li><code>event.preventBubble()</code> は Firefox 3 で非推奨となり、Firefox 3 で削除されました。Firefox 2 でも動作する <a href="/ja/DOM/event.stopPropagation" title="ja/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a> を使ってください。</li> + <li><code>event.preventBubble()</code> は Firefox 3 で非推奨となり、Firefox 3 で削除されました。Firefox 2 でも動作する <a href="/ja/DOM/event.stopPropagation"><code>event.stopPropagation()</code></a> を使ってください。</li> <li><code>setTimeout()</code> を使って開始されるタイマーは、<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=52209" title="FIXED: JS timers can fire while a modal dialog is open">バグ 52209</a> のために行われた修正によって、モーダル形式のウィンドウではブロックされるようになりました。代わりに <code><a href="/ja/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsITimer" title="">nsITimer</a></code> を使ってください。</li> <li>信頼できないソース（例：Web サイト）が拡張のクロームにアクセスできるようにする必要がある場合は、新しい <a href="../../../../ja/Chrome_Registration#contentaccessible" rel="internal"><code>contentaccessible</code> フラグ</a> を使わなければなりません。</li> </ul> diff --git a/files/ja/orphaned/developing_add-ons/index.html b/files/ja/orphaned/developing_add-ons/index.html index 7cdb848269..2223fbf2a2 100644 --- a/files/ja/orphaned/developing_add-ons/index.html +++ b/files/ja/orphaned/developing_add-ons/index.html @@ -4,6 +4,6 @@ slug: orphaned/Developing_add-ons original_slug: Developing_add-ons --- <p>Mozilla ベースのソフトウェアはたいていアドオンを通して拡張可能です。アドオンには、拡張機能、プラグイン、テーマの 3 つの主なタイプがあります。このページはFirefox、Thunderbird、あるいは、Mozilla プラットフォームをベースにしたその他のソフトウェア向けのアドオンを作成するために必要となる情報、および、作成したアドオンを配布する方法のガイドを提供します。</p> -<table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="アドオンに関するトピックス">アドオンに関するトピックス</h2> </td> </tr> <tr> <td> <dl> <dt><a class="internal" href="/ja/Submitting_an_add-on_to_AMO" title="ja/Submitting an add-on to AMO">アドオンを AMO に提出する</a></dt> <dd>アドオン開発者がアドオンを正しくパッケージし配布するために助けとなる情報を提供します。このページには Mozilla のアドオン配布 Web サイトである addons.mozilla.org についての情報が含まれています。</dd> <dt><a class="internal" href="/ja/Extensions" title="ja/Extensions">拡張機能</a></dt> <dd>拡張機能は Firefox や SeaMonkey、Thunderbird のような Mozilla アプリケーションに新しい機能を追加します。ツールバーボタンから完全に新しい形態のものまであらゆるものを追加できます。</dd> <dt><a class="internal" href="/ja/Plugins" title="ja/Plugins">プラグイン</a></dt> <dd>Mozilla ベースのソフトウェアにネイティブでは扱えないコンテンツを表示させることを可能にさせるバイナリコンポーネントである、プラグインの作成方法についての情報。</dd> <dt><a class="internal" href="/ja/Jetpack" title="ja/Jetpack">Jetpack</a></dt> <dd>あらゆる人のためのブラウザ拡張開発システムです。Jetpack 開発者はモダンな web のツールである HTML と CSS、JavaScript を知っているだけで良いのです。</dd> </dl> </td> <td> <dl> <dt><a class="internal" href="/ja/Themes" title="ja/Themes">テーマ</a></dt> <dd>テーマはユーザに Mozilla ベースのアプリケーションによって提供されているユーザインターフェースの見た目をカスタマイズさせることを可能にします。</dd> <dt><a class="internal" href="/ja/Creating_OpenSearch_plugins_for_Firefox" title="ja/Creating OpenSearch plugins for Firefox">検索エンジンプラグイン</a></dt> <dd>Firefox は検索ボックスで異なる検索エンジンをサポートすることを可能にする検索エンジンプラグインをサポートしています。</dd> <dt><a class="internal" href="/ja/addons.mozilla.org_(AMO)_API_Developers'_Guide" title="ja/addons.mozilla.org (AMO) API Developers' Guide">addons.mozilla.org (AMO) API Developers' Guide</a></dt> <dd>AMO Developers' Guide は addons.mozilla.org からアドオンにつての情報を入手するための AMO API の利用方法を説明します。</dd> <dt><a href="/ja/The_Mozilla_platform" title="ja/The Mozilla platform">Mozilla プラットフォーム</a></dt> <dd>API および技術のすべて、また、それらをあなた自身のプロジェクトで利用する方法を含む、Mozilla プラットフォームについての情報。</dd> </dl> </td> </tr> </tbody> +<table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="アドオンに関するトピックス">アドオンに関するトピックス</h2> </td> </tr> <tr> <td> <dl> <dt><a class="internal" href="/ja/Submitting_an_add-on_to_AMO">アドオンを AMO に提出する</a></dt> <dd>アドオン開発者がアドオンを正しくパッケージし配布するために助けとなる情報を提供します。このページには Mozilla のアドオン配布 Web サイトである addons.mozilla.org についての情報が含まれています。</dd> <dt><a class="internal" href="/ja/Extensions">拡張機能</a></dt> <dd>拡張機能は Firefox や SeaMonkey、Thunderbird のような Mozilla アプリケーションに新しい機能を追加します。ツールバーボタンから完全に新しい形態のものまであらゆるものを追加できます。</dd> <dt><a class="internal" href="/ja/Plugins">プラグイン</a></dt> <dd>Mozilla ベースのソフトウェアにネイティブでは扱えないコンテンツを表示させることを可能にさせるバイナリコンポーネントである、プラグインの作成方法についての情報。</dd> <dt><a class="internal" href="/ja/Jetpack">Jetpack</a></dt> <dd>あらゆる人のためのブラウザ拡張開発システムです。Jetpack 開発者はモダンな web のツールである HTML と CSS、JavaScript を知っているだけで良いのです。</dd> </dl> </td> <td> <dl> <dt><a class="internal" href="/ja/Themes">テーマ</a></dt> <dd>テーマはユーザに Mozilla ベースのアプリケーションによって提供されているユーザインターフェースの見た目をカスタマイズさせることを可能にします。</dd> <dt><a class="internal" href="/ja/Creating_OpenSearch_plugins_for_Firefox">検索エンジンプラグイン</a></dt> <dd>Firefox は検索ボックスで異なる検索エンジンをサポートすることを可能にする検索エンジンプラグインをサポートしています。</dd> <dt><a class="internal" href="/ja/addons.mozilla.org_(AMO)_API_Developers'_Guide">addons.mozilla.org (AMO) API Developers' Guide</a></dt> <dd>AMO Developers' Guide は addons.mozilla.org からアドオンにつての情報を入手するための AMO API の利用方法を説明します。</dd> <dt><a href="/ja/The_Mozilla_platform">Mozilla プラットフォーム</a></dt> <dd>API および技術のすべて、また、それらをあなた自身のプロジェクトで利用する方法を含む、Mozilla プラットフォームについての情報。</dd> </dl> </td> </tr> </tbody> </table> <p>{{ languages( { "en": "en/Developing_add-ons", "zh-cn": "cn/Developing_add-ons"} ) }}</p> diff --git a/files/ja/orphaned/installing_extensions/index.html b/files/ja/orphaned/installing_extensions/index.html index 2451f21b18..bd870d9056 100644 --- a/files/ja/orphaned/installing_extensions/index.html +++ b/files/ja/orphaned/installing_extensions/index.html @@ -7,7 +7,7 @@ tags: original_slug: Installing_extensions --- <p>{{ Gecko_minversion_header(1.9) }}</p> -<p>toolkit ベースのアプリケーション（Firefox やその他の <a href="/ja/XULRunner" title="ja/XULRunner">XULRunner</a> を使用したアプリケーション）向けの拡張機能をインストールする機能をインストーラに持たせたい場合について、Gecko 1.9（Firefox 3）は Windows、Mac OS X、Linux 上でそれを簡単に行えるようにするための機能を提供します。Windows ユーザについては、当面の所は<a href="/ja/Adding_Extensions_using_the_Windows_Registry" title="ja/Adding_Extensions_using_the_Windows_Registry">レジストリを使って拡張機能をインストールする方法</a>も利用できます。</p> +<p>toolkit ベースのアプリケーション（Firefox やその他の <a href="/ja/XULRunner">XULRunner</a> を使用したアプリケーション）向けの拡張機能をインストールする機能をインストーラに持たせたい場合について、Gecko 1.9（Firefox 3）は Windows、Mac OS X、Linux 上でそれを簡単に行えるようにするための機能を提供します。Windows ユーザについては、当面の所は<a href="/ja/Adding_Extensions_using_the_Windows_Registry">レジストリを使って拡張機能をインストールする方法</a>も利用できます。</p> <p>現在、Mac OS X および Linux においては、ユーザのコンピュータ内のあらかじめ決められた位置のディレクトリに拡張機能をコピーするだけでよいです。</p> <p>この方法を通じてインストールされた拡張機能については、新しく作成された物・既に存在していた物を問わず、そのアプリケーションのすべてのプロファイルに対してインストールされる事に注意してください。</p> <h3 id="Windows" name="Windows">Windows</h3> diff --git a/files/ja/orphaned/localizing_extension_descriptions/index.html b/files/ja/orphaned/localizing_extension_descriptions/index.html index 184c1756de..06eaa77384 100644 --- a/files/ja/orphaned/localizing_extension_descriptions/index.html +++ b/files/ja/orphaned/localizing_extension_descriptions/index.html @@ -9,7 +9,7 @@ tags: original_slug: Localizing_extension_descriptions --- <h3 id="Gecko_1.9_.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA" name="Gecko_1.9_.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA">Gecko 1.9 におけるローカライズ</h3> -<p>Gecko 1.9 には、アドオンの説明や他のメタデータのローカライズに関して、新しく、より強力な方法が盛り込まれています。各言語の説明はすべて、<code>em:localized</code> プロパティを使って <a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> ファイルに書かれます。<code>em:localized</code> それぞれが、情報が使われるべきロケールを示す <code>em:locale</code> プロパティを少なくとも 1 つと、そのロケールの様々な文字列を持ちます。以下の例はこのデモです (ほとんどの一般的なマニフェストプロパティは簡潔にするため削除してあります)。</p> +<p>Gecko 1.9 には、アドオンの説明や他のメタデータのローカライズに関して、新しく、より強力な方法が盛り込まれています。各言語の説明はすべて、<code>em:localized</code> プロパティを使って <a href="/ja/Install_Manifests">install.rdf</a> ファイルに書かれます。<code>em:localized</code> それぞれが、情報が使われるべきロケールを示す <code>em:locale</code> プロパティを少なくとも 1 つと、そのロケールの様々な文字列を持ちます。以下の例はこのデモです (ほとんどの一般的なマニフェストプロパティは簡潔にするため削除してあります)。</p> <pre><?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" @@ -54,14 +54,14 @@ original_slug: Localizing_extension_descriptions <h3 id="Gecko_1.9_.E4.BB.A5.E5.89.8D.E3.81.AE.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA" name="Gecko_1.9_.E4.BB.A5.E5.89.8D.E3.81.AE.E3.83.AD.E3.83.BC.E3.82.AB.E3.83.A9.E3.82.A4.E3.82.BA">Gecko 1.9 以前のローカライズ</h3> <p>Gecko 1.9 以前では、アドオン開発者は、Firefox や Thunderbird のようなツールキットベースのアプリケーションを対象とする拡張機能にローカライズされた説明を定義するためには以下のような特別な手順が必要でした。</p> <ul> - <li>もしあなたが <a href="/ja/Localizing_an_extension#Localizing_strings_in_JavaScript_code" title="ja/Localizing_an_extension#Localizing_strings_in_JavaScript_code">ローカライズしたプロパティファイル</a> を作っていないのであれば、それを作ってください。他言語が正しく表示されるように、(BOM なしの)UTF-8 エンコードを使うことを忘れないでください。</li> - <li>次の 1 行を、各言語のローカライズしたプロパティファイルに加えてください (EXTENSION_ID はあなたの拡張機能の ID (<a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> の <code><em:id></code> にあります) に合わせてください。また、<var>LOCALIZED_DESCRIPTION</var> にはその言語での拡張機能の説明を入れてください)。 + <li>もしあなたが <a href="/ja/Localizing_an_extension#Localizing_strings_in_JavaScript_code">ローカライズしたプロパティファイル</a> を作っていないのであれば、それを作ってください。他言語が正しく表示されるように、(BOM なしの)UTF-8 エンコードを使うことを忘れないでください。</li> + <li>次の 1 行を、各言語のローカライズしたプロパティファイルに加えてください (EXTENSION_ID はあなたの拡張機能の ID (<a href="/ja/Install_Manifests">install.rdf</a> の <code><em:id></code> にあります) に合わせてください。また、<var>LOCALIZED_DESCRIPTION</var> にはその言語での拡張機能の説明を入れてください)。 <pre>extensions.EXTENSION_ID.description=LOCALIZED_DESCRIPTION</pre> </li> </ul> <ul> - <li>もしあなたが <a href="/ja/Building_an_Extension#Defaults_Files" title="ja/Building_an_Extension#Defaults_Files">デフォルト設定ファイル</a> を作っていないのであれば、それを作ってください。</li> - <li>次の 1 行を、デフォルト設定ファイルに加えてください (<var>EXTENSION_ID</var> は拡張機能の ID (<a href="/ja/Install_Manifests" title="ja/Install_Manifests">install.rdf</a> から)、<var>PATH_TO_LOCALIZATION_FILE</var> は上であなたが加えた、ローカライズしたプロパティファイルへの chrome パスです)。 + <li>もしあなたが <a href="/ja/Building_an_Extension#Defaults_Files">デフォルト設定ファイル</a> を作っていないのであれば、それを作ってください。</li> + <li>次の 1 行を、デフォルト設定ファイルに加えてください (<var>EXTENSION_ID</var> は拡張機能の ID (<a href="/ja/Install_Manifests">install.rdf</a> から)、<var>PATH_TO_LOCALIZATION_FILE</var> は上であなたが加えた、ローカライズしたプロパティファイルへの chrome パスです)。 <pre>pref("extensions.EXTENSION_ID.description", "PATH_TO_LOCALIZATION_FILE");</pre> </li> </ul> diff --git a/files/ja/orphaned/mcd/index.html b/files/ja/orphaned/mcd/index.html index b992797d81..7283dca2de 100644 --- a/files/ja/orphaned/mcd/index.html +++ b/files/ja/orphaned/mcd/index.html @@ -20,8 +20,8 @@ original_slug: MCD ガイド</dt> </dl> <ul> - <li><a href="/ja/MCD/Getting_Started" title="ja/MCD/Getting_Started">Getting Started with MCD</a></li> - <li><a href="/ja/MCD,_Mission_Control_Desktop_AKA_AutoConfig" title="ja/MCD,_Mission_Control_Desktop_AKA_AutoConfig">MCD, Mission Control Desktop AKA AutoConfig</a></li> + <li><a href="/ja/MCD/Getting_Started">Getting Started with MCD</a></li> + <li><a href="/ja/MCD,_Mission_Control_Desktop_AKA_AutoConfig">MCD, Mission Control Desktop AKA AutoConfig</a></li> </ul> </td> <td> diff --git a/files/ja/orphaned/monitoring_http_activity/index.html b/files/ja/orphaned/monitoring_http_activity/index.html index 9af1d8ca31..0a407cc847 100644 --- a/files/ja/orphaned/monitoring_http_activity/index.html +++ b/files/ja/orphaned/monitoring_http_activity/index.html @@ -34,7 +34,7 @@ activityDistributor.addObserver(httpObserver); <h2 id="アクティビティを観察する">アクティビティを観察する</h2> <p>観察可能なクラスは2つあります： ソケットレベルで発生するものと、HTTPトランザクションレベルで発生するものです。</p> <h3 id="観察可能なソケットのアクティビティ">観察可能なソケットのアクティビティ</h3> -<p>{{ interface("nsIHttpActivityDistributor") }} メソッドに報告され<code>た </code>アクティビティが <code>ACTIVITY_TYPE_SOCKET_TRANSPORT</code> の場合、発生したアクティビティの詳細な型を示すアクティビティサブタイプは <a href="/ja/XPCOM_Interface_Reference/nsISocketTransport#nsITransportEventSink.0a_status_codes" title="ja/XPCOM Interface Reference/nsISocketTransport#nsITransportEventSink.0a status codes">socket transport status code</a> となります。</p> +<p>{{ interface("nsIHttpActivityDistributor") }} メソッドに報告され<code>た </code>アクティビティが <code>ACTIVITY_TYPE_SOCKET_TRANSPORT</code> の場合、発生したアクティビティの詳細な型を示すアクティビティサブタイプは <a href="/ja/XPCOM_Interface_Reference/nsISocketTransport#nsITransportEventSink.0a_status_codes">socket transport status code</a> となります。</p> <h3 id="観察可能な_HTTP_のアクティビティ">観察可能な HTTP のアクティビティ</h3> <p>アクティビティタイプ が <code>ACTIVITY_TYPE_HTTP_TRANSACTION の場合</code>、アクティビティサブタイプは <a href="/en/nsIHttpActivityObserver#Activity_subtype_constants" title="en/nsIHttpActivityObserver#Activity subtype constants">activity subtype 定数</a> のうちの1つとなります。これらは送信されるHTTPリクエストヘッダやボディ、受信するHTTPヘッダなどを含むHTTPトランザクション全体を観察するための機能も含みます。</p> <h2 id="参照">参照</h2> diff --git a/files/ja/orphaned/monitoring_wifi_access_points/index.html b/files/ja/orphaned/monitoring_wifi_access_points/index.html index 2a07703194..41e2b09236 100644 --- a/files/ja/orphaned/monitoring_wifi_access_points/index.html +++ b/files/ja/orphaned/monitoring_wifi_access_points/index.html @@ -4,7 +4,7 @@ slug: orphaned/Monitoring_WiFi_access_points original_slug: Monitoring_WiFi_access_points --- <p>{{ gecko_minversion_header("1.9.1") }}</p> -<p>UniversalXPConnect 特権を用いたコードを利用することで、周囲の WiFi アクセスポイントの SSID 、 MAC アドレス、信号強度の一覧を取得することができます。この機能は、主に WiFi 情報に基づいた <a class="internal" href="/Ja/Using_geolocation" title="Ja/Using geolocation">geolocation</a> サービスのために導入されました。</p> +<p>UniversalXPConnect 特権を用いたコードを利用することで、周囲の WiFi アクセスポイントの SSID 、 MAC アドレス、信号強度の一覧を取得することができます。この機能は、主に WiFi 情報に基づいた <a class="internal" href="/Ja/Using_geolocation">geolocation</a> サービスのために導入されました。</p> <h2 id="例">例</h2> <p>この例では、利用可能なアクセスポイントの一覧を出力します。</p> <div class="note"><strong>注意:</strong> wiki の仕様上、 21 行目の表示がおかしくなることがあります。最初の "dd" は単純に "d" ですが、どういうわけか余分な1文字が付いてしまうようです。</div> diff --git a/files/ja/orphaned/mozmill/index.html b/files/ja/orphaned/mozmill/index.html deleted file mode 100644 index 59dadee8ad..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" title="ja/Mozmill Tests/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" title="ja/Mozmill Tests">Mozmill Tests</a> のドキュメントを見て、テスト書きへの貢献や MozMill テストの実行についてのイメージをつかんでください。既存のテストは、新しい Firefox のリリースのための <a href="/ja/Mozmill/Release_Testing" title="ja/Mozmill/Release Testing">リリーステスト</a>のサイクルで実行されます。</p> -<p>また、Mozilla Messaging チームには、<a href="/ja/Thunderbird/Thunderbird_MozMill_Testing" title="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" title="ja/Mozmill Tests/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" title="ja/Mozmill/Mozmill Controller Object">controller object reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Elements_Library_Object" title="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" title="ja/Mozmill Tests/Mozmill Base Object Interfaces">mozmill object reference</a></li> <li><a href="/ja/Mozmill/Mozmill_Unit_Test_Framework" title="ja/Mozmill Tests/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/nsidomhtmlmediaelement/index.html b/files/ja/orphaned/nsidomhtmlmediaelement/index.html index 133e28a8aa..bebce9d830 100644 --- a/files/ja/orphaned/nsidomhtmlmediaelement/index.html +++ b/files/ja/orphaned/nsidomhtmlmediaelement/index.html @@ -5,7 +5,7 @@ original_slug: NsIDOMHTMLMediaElement --- <p></p> -<p><code>nsIDOMHTMLMediaElement</code> インターフェースは HTML 5 における <a class="internal" href="/Ja/HTML/Element/Audio" title="Ja/HTML/Element/Audio"><code>audio</code></a> および <a class="internal" href="/Ja/HTML/Element/Video" title="Ja/HTML/Element/Video"><code>video</code></a> 要素の実装に用いられています。</p> +<p><code>nsIDOMHTMLMediaElement</code> インターフェースは HTML 5 における <a class="internal" href="/Ja/HTML/Element/Audio"><code>audio</code></a> および <a class="internal" href="/Ja/HTML/Element/Video"><code>video</code></a> 要素の実装に用いられています。</p> <div class="note"><strong>注意:</strong> <code> cue ranges</code> 機能の仕様は現在流動的な状況にあり、 HTML 5 標準においては大幅に改訂が加えられるか、置き換えられてしまう可能性があります。そのため、現時点では Firefox ではこの機能に対応していません。</div> @@ -28,22 +28,22 @@ original_slug: NsIDOMHTMLMediaElement <table class="standard-table"> <tbody> <tr> - <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#addCueRange()" title="Ja/NsIDOMHTMLMediaElement#addCueRange()">addCueRange</a>(in DOMString className, in float start, in float end, in boolean pauseOnExit, in nsIDOMHTMLVoidCallback enterCallback, in nsIDOMHTMLVoidCallback exitCallback);</code></td> + <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#addCueRange()">addCueRange</a>(in DOMString className, in float start, in float end, in boolean pauseOnExit, in nsIDOMHTMLVoidCallback enterCallback, in nsIDOMHTMLVoidCallback exitCallback);</code></td> </tr> <tr> - <td><code>DOMString <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#canPlayType()" title="Ja/NsIDOMHTMLMediaElement#canPlayType()">canPlayType</a>(in DOMString type);</code></td> + <td><code>DOMString <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#canPlayType()">canPlayType</a>(in DOMString type);</code></td> </tr> <tr> - <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#load()" title="Ja/NsIDOMHTMLMediaElement#load()">load</a>();</code></td> + <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#load()">load</a>();</code></td> </tr> <tr> - <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#pause()" title="Ja/NsIDOMHTMLMediaElement#pause()">pause</a>();</code></td> + <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#pause()">pause</a>();</code></td> </tr> <tr> - <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#play()" title="Ja/NsIDOMHTMLMediaElement#play()">play</a>();</code></td> + <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#play()">play</a>();</code></td> </tr> <tr> - <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#removeCueRanges()" title="Ja/NsIDOMHTMLMediaElement#removeCueRanges()">removeCueRanges</a>(in DOMString className);</code></td> + <td><code>void <a class="internal" href="/Ja/NsIDOMHTMLMediaElement#removeCueRanges()">removeCueRanges</a>(in DOMString className);</code></td> </tr> </tbody> </table> @@ -339,8 +339,8 @@ original_slug: NsIDOMHTMLMediaElement <h2 id="See_also" name="See_also">参考資料</h2> <ul> - <li><code><a class="internal" href="/Ja/HTML/Element/Video" title="Ja/HTML/Element/Video">video</a></code></li> - <li><a class="internal" href="/Ja/HTML/Element/Audio" title="Ja/HTML/Element/Audio"><code>audio</code></a></li> - <li><a class="internal" href="/Ja/HTML/Element/Source" title="Ja/HTML/Element/Source"><code>source</code></a></li> - <li><a class="internal" href="/Ja/Using_audio_and_video_in_Firefox" title="Ja/Using audio and video in Firefox">Using audio and video in Firefox</a></li> + <li><code><a class="internal" href="/Ja/HTML/Element/Video">video</a></code></li> + <li><a class="internal" href="/Ja/HTML/Element/Audio"><code>audio</code></a></li> + <li><a class="internal" href="/Ja/HTML/Element/Source"><code>source</code></a></li> + <li><a class="internal" href="/Ja/Using_audio_and_video_in_Firefox">Using audio and video in Firefox</a></li> </ul> diff --git a/files/ja/orphaned/nsidynamiccontainer/index.html b/files/ja/orphaned/nsidynamiccontainer/index.html index cd637a460a..f88bfabae7 100644 --- a/files/ja/orphaned/nsidynamiccontainer/index.html +++ b/files/ja/orphaned/nsidynamiccontainer/index.html @@ -27,10 +27,10 @@ original_slug: nsIDynamicContainer <p>継承元: <a href="/en/nsISupports" title="en/nsISupports">nsISupports</a></p> <h2 id="メソッドの概要"><br> メソッドの概要</h2> -<p><code>void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerNodeOpening</a>(in <a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a> aContainer, in <a href="/en/nsINavHistoryQueryOptions" title="en/nsINavHistoryQueryOptions">nsINavHistoryQueryOptions</a> aOptions);</code><br> - <code>void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerNodeClosed</a>(in <a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a> aContainer);<br> - void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerRemoving</a>(in long long aItemId);<br> - void <a href="/ja/nsIDynamicContainer" title="ja/nsIDynamicContainer">onContainerMoved</a>(in long long aItemId, in long long aNewParent, in long aNewIndex);</code></p> +<p><code>void <a href="/ja/nsIDynamicContainer">onContainerNodeOpening</a>(in <a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a> aContainer, in <a href="/en/nsINavHistoryQueryOptions" title="en/nsINavHistoryQueryOptions">nsINavHistoryQueryOptions</a> aOptions);</code><br> + <code>void <a href="/ja/nsIDynamicContainer">onContainerNodeClosed</a>(in <a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a> aContainer);<br> + void <a href="/ja/nsIDynamicContainer">onContainerRemoving</a>(in long long aItemId);<br> + void <a href="/ja/nsIDynamicContainer">onContainerMoved</a>(in long long aItemId, in long long aNewParent, in long aNewIndex);</code></p> <h2 id="メソッド">メソッド</h2> <h3 id="onContainerNodeOpening()">onContainerNodeOpening()</h3> <p>与えられたコンテナノードが新たにノードが作成されようとするときに呼ばれます。<br> @@ -82,7 +82,7 @@ original_slug: nsIDynamicContainer <p>与えられたコンテナが丁度移動されようとしているときに呼ばれます。bookkeepingを行う処理に備えて存在します。このメソッドはコンテナが移動された<strong>後に</strong>呼ばれます。</p> <h3 id="関連記事">関連記事</h3> <ul> - <li><a href="/ja/Places" title="ja/Places">Places</a></li> + <li><a href="/ja/Places">Places</a></li> <li><a href="/en/nsINavHistoryContainerResultNode" title="en/nsINavHistoryContainerResultNode">nsINavHistoryContainerResultNode</a></li> <li><a href="/en/nsINavHistoryQueryOptions" title="en/nsINavHistoryQueryOptions">nsINavHistoryQueryOptions</a></li> </ul> diff --git a/files/ja/orphaned/participating_in_the_mozilla_project/index.html b/files/ja/orphaned/participating_in_the_mozilla_project/index.html index fa46754515..7f2722c81b 100644 --- a/files/ja/orphaned/participating_in_the_mozilla_project/index.html +++ b/files/ja/orphaned/participating_in_the_mozilla_project/index.html @@ -5,9 +5,9 @@ original_slug: Participating_in_the_Mozilla_project --- <p>もしあなたが Mozilla プラットフォームに関連するコードでのバグの修正やその他の仕事を手伝うことに興味があるのなら、あなたに適切な方向を指し示すであろう文書がここで見つけられます。</p> <table class="mainpage-table"> <tbody> <tr> <td> <h2 id="ドキュメンテーショントピックス">ドキュメンテーショントピックス</h2> -<dl> <dt><a class="internal" href="/ja/Developer_Guide" title="ja/Mozilla developer guide">Mozilla 開発者ガイド</a><br> </dt> <dd>Mozilla のコードベースに貢献するための開発 Tips とガイド。</dd> <dt><a class="internal" href="/ja/Developer_Guide/Source_Code" title="Ja/Mozilla source code">Mozilla ソースコード</a><br> </dt> <dd>ダウンロードもしくはバージョン管理システムを通してMozilla のコードを手に入れる方法とあなたのコードをツリーに入れる方法についての情報。<br> </dd> <dt><a class="internal" href="/ja/Developer_Guide/Build_Instructions" title="Ja/Build Documentation">ビルドに関するドキュメンテーション</a><br> </dt> <dd>Firefox と Thunderbird を含む、Mozilla プロジェクトのビルド方法についての情報。<em>このページは内容の整理を必要としています。</em><br> </dd> <dt><a class="internal" href="/Ja/The_Mozilla_platform" title="Ja/The Mozilla platform">Mozilla プラットフォーム</a><br> </dt> <dd>Mozilla プラットフォームについての情報。その API 群と技術のすべて、そして、あなた自身のプロジェクトでそれらを利用する方法など。</dd> <dt><a class="internal" href="/Project:ja/How_to_Help" title="Project:ja/How to Help">Mozilla を文書化する</a> <br> </dt> <dd> Mozilla のためおよび開かれた Web のために私たちのドキュメンテーションの作成と改善に協力してください。</dd> <dt><a class="internal" href="/Ja/Debugging" title="Ja/Debugging">デバッグ</a><br> </dt> <dd>Mozilla のコードをデバッグするときに従うべき、役に立つTips とガイドライン。</dd> <dt><a class="internal" href="/ja/QA" title="Ja/QA">品質保証（QA)</a><br> </dt> <dd>テストおよびバグトラッキングについての情報。</dd> <dt><a class="internal" href="/ja/Localization" title="ja/Localization">ローカライゼーション</a><br> </dt> <dd>Mozilla プロジェクトやドキュメンテーションなどを複数の言語に翻訳することに関する情報。</dd> +<dl> <dt><a class="internal" href="/ja/Developer_Guide">Mozilla 開発者ガイド</a><br> </dt> <dd>Mozilla のコードベースに貢献するための開発 Tips とガイド。</dd> <dt><a class="internal" href="/ja/Developer_Guide/Source_Code">Mozilla ソースコード</a><br> </dt> <dd>ダウンロードもしくはバージョン管理システムを通してMozilla のコードを手に入れる方法とあなたのコードをツリーに入れる方法についての情報。<br> </dd> <dt><a class="internal" href="/ja/Developer_Guide/Build_Instructions">ビルドに関するドキュメンテーション</a><br> </dt> <dd>Firefox と Thunderbird を含む、Mozilla プロジェクトのビルド方法についての情報。<em>このページは内容の整理を必要としています。</em><br> </dd> <dt><a class="internal" href="/Ja/The_Mozilla_platform">Mozilla プラットフォーム</a><br> </dt> <dd>Mozilla プラットフォームについての情報。その API 群と技術のすべて、そして、あなた自身のプロジェクトでそれらを利用する方法など。</dd> <dt><a class="internal" href="/Project:ja/How_to_Help" title="Project:ja/How to Help">Mozilla を文書化する</a> <br> </dt> <dd> Mozilla のためおよび開かれた Web のために私たちのドキュメンテーションの作成と改善に協力してください。</dd> <dt><a class="internal" href="/Ja/Debugging">デバッグ</a><br> </dt> <dd>Mozilla のコードをデバッグするときに従うべき、役に立つTips とガイドライン。</dd> <dt><a class="internal" href="/ja/QA">品質保証（QA)</a><br> </dt> <dd>テストおよびバグトラッキングについての情報。</dd> <dt><a class="internal" href="/ja/Localization">ローカライゼーション</a><br> </dt> <dd>Mozilla プロジェクトやドキュメンテーションなどを複数の言語に翻訳することに関する情報。</dd> </dl></td> <td> <h2 id="ツール">ツール</h2> -<dl> <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a><br> </dt> <dd>Mozilla プロジェクトのための問題を追跡するために使われている <a class="internal" href="/ja/Bugzilla" title="ja/Bugzilla">Bugzilla</a> データベース。<br> </dd> <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a><br> </dt> <dd>Web 上で Mozilla のソースコードレポジトリをブラウズ、検索できます。<br> </dd> <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a><br> </dt> <dd><a class="internal" href="/ja/Bonsai" title="ja/Bonsai">Bonsai</a> ツールを使えば、レポジトリ上のどのファイルを誰が変更し、そして、いつそれがなされたのかを見つけられます。 <br> </dd> <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a><br> </dt> <dd><a class="internal" href="/ja/Tinderbox" title="ja/Tinderbox">Tinderbox</a> はツリーのステータス（現在ビルドが成功しているかどうか）を示します。作業ツリーでの作業を確実にするために、チェックインとチェックアウトの前にチェックしてください。</dd> <dt><a class="internal" href="/ja/Crash_reporting" title="Ja/Crash reporting">クラッシュトラッキング</a><br> </dt> <dd><a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> および <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> クラッシュ報告システムについての情報。</dd> <dt><a class="external" href="http://graphs.mozilla.org/">パフォーマンストラッキング</a><br> </dt> <dd>Mozilla プロジェクトのパフォーマンス情報が見られます。</dd> <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html">開発者フォーラム</a><br> </dt> <dd>Mozilla の開発上の問題について話すことができるディスカッションフォーラムのトピック別リスト。<br> </dd> +<dl> <dt><a class="link-https" href="https://bugzilla.mozilla.org/" title="https://bugzilla.mozilla.org/">Bugzilla</a><br> </dt> <dd>Mozilla プロジェクトのための問題を追跡するために使われている <a class="internal" href="/ja/Bugzilla">Bugzilla</a> データベース。<br> </dd> <dt><a class="external" href="http://mxr.mozilla.org/" title="http://mxr.mozilla.org/">MXR</a><br> </dt> <dd>Web 上で Mozilla のソースコードレポジトリをブラウズ、検索できます。<br> </dd> <dt><a class="external" href="http://bonsai.mozilla.org/cvsqueryform.cgi" title="http://bonsai.mozilla.org/cvsqueryform.cgi">Bonsai</a><br> </dt> <dd><a class="internal" href="/ja/Bonsai">Bonsai</a> ツールを使えば、レポジトリ上のどのファイルを誰が変更し、そして、いつそれがなされたのかを見つけられます。 <br> </dd> <dt><a class="external" href="http://tinderbox.mozilla.org/showbuilds.cgi" title="http://tinderbox.mozilla.org/showbuilds.cgi">Tinderbox</a><br> </dt> <dd><a class="internal" href="/ja/Tinderbox">Tinderbox</a> はツリーのステータス（現在ビルドが成功しているかどうか）を示します。作業ツリーでの作業を確実にするために、チェックインとチェックアウトの前にチェックしてください。</dd> <dt><a class="internal" href="/ja/Crash_reporting">クラッシュトラッキング</a><br> </dt> <dd><a class="link-https" href="https://crash-reports.mozilla.com/reports" title="https://crash-reports.mozilla.com/reports">Socorro</a> および <a class="external" href="http://talkback-public.mozilla.org/search/start.jsp" title="http://talkback-public.mozilla.org/search/start.jsp">Talkback</a> クラッシュ報告システムについての情報。</dd> <dt><a class="external" href="http://graphs.mozilla.org/">パフォーマンストラッキング</a><br> </dt> <dd>Mozilla プロジェクトのパフォーマンス情報が見られます。</dd> <dt><a class="external" href="http://www.mozilla.org/community/developer-forums.html">開発者フォーラム</a><br> </dt> <dd>Mozilla の開発上の問題について話すことができるディスカッションフォーラムのトピック別リスト。<br> </dd> </dl></td> </tr> </tbody> </table> <p> {{ languages( { "en": "en/Participating_in_the_Mozilla_project"} ) }}</p> diff --git a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html index 1d7222b299..cf4b6916f1 100644 --- a/files/ja/orphaned/tools/add-ons/dom_inspector/index.html +++ b/files/ja/orphaned/tools/add-ons/dom_inspector/index.html @@ -26,12 +26,12 @@ original_slug: DOM_Inspector <h2 id="Documentation" name="Documentation">ドキュメンテーション</h2> <dl> - <dt><a href="/ja/DOM_Inspector/Introduction_to_DOM_Inspector" title="ja/DOM_Inspector/Introduction_to_DOM_Inspector">DOM Inspector 入門</a></dt> + <dt><a href="/ja/DOM_Inspector/Introduction_to_DOM_Inspector">DOM Inspector 入門</a></dt> <dd>DOM Inspector を始めるのに役立つガイド付きのチュートリアルです。</dd> </dl> <dl> - <dt><a href="/ja/DOM_Inspector/DOM_Inspector_FAQ" title="ja/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt> + <dt><a href="/ja/DOM_Inspector/DOM_Inspector_FAQ">DOM Inspector FAQ</a></dt> <dd><small>DOM Inspector に関するよくある質問への解答です。</small></dd> </dl> diff --git a/files/ja/orphaned/web/api/htmlorforeignelement/index.html b/files/ja/orphaned/web/api/htmlorforeignelement/index.html deleted file mode 100644 index 99197278cb..0000000000 --- a/files/ja/orphaned/web/api/htmlorforeignelement/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: HTMLOrForeignElement -slug: orphaned/Web/API/HTMLOrForeignElement -tags: - - API - - HTML - - HTMLElement - - HTMLOrForeignElement - - Interface - - MathML - - MathMLElement - - Mixin - - Reference - - SVG - - SVGElement - - ミックスイン -translation_of: Web/API/HTMLOrForeignElement -original_slug: Web/API/HTMLOrForeignElement ---- -<div>{{APIRef("HTML DOM")}}{{Draft}}</div> - -<p><span class="seoSummary"><strong><code>HTMLOrForeignElement</code></strong> ミックスインは、 {{DOMxRef("HTMLElement")}}, {{DOMxRef("SVGElement")}}, {{DOMxRef("MathMLElement")}} の各インターフェイスで共通のいくつかの機能を説明します。</span>これらのインターフェイスは、もちろん、以下の列挙したものに加えたものに加えてもっと機能があります。</p> - -<div class="blockIndicator note"> -<p><strong>メモ</strong>: <code>HTMLOrForeignElement</code> はミックスインであり、インターフェイスではありません。実際に <code>HTMLOrForeignElement</code> 型のオブジェクトを生成することはできません。</p> -</div> - -<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("HTML WHATWG", "dom.html#htmlorsvgelement", '<code>HTMLOrForeignElement</code>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("api.HTMLOrForeignElement")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{DOMxRef("HTMLElement")}}</li> - <li>{{DOMxRef("SVGElement")}}</li> - <li>{{DOMxRef("MathMLElement")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html b/files/ja/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html deleted file mode 100644 index 5a65babc30..0000000000 --- a/files/ja/orphaned/web/api/indexeddb_api/basic_concepts_behind_indexeddb/index.html +++ /dev/null @@ -1,218 +0,0 @@ ---- -title: 基本的な概念 -slug: orphaned/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -tags: - - Advanced - - IndexedDB - - concepts -translation_of: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB -original_slug: Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB ---- -<p>{{DefaultAPISidebar("IndexedDB")}}</p> - -<div class="summary"> -<p><strong>IndexedDB</strong> は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つ ウェブアプリケーションを作成できますので、オンラインとオフラインの両方で動作するアプリケーションになります。IndexedDB は大量のデータを保存するアプリケーション (例えばレンタル店の DVD カタログ) や、動作するために持続的なインターネット接続が不要なアプリケーション (例えばメールクライアント、To-Do リスト、メモ帳) で役に立ちます。</p> -</div> - -<h2 id="About_this_document" name="About_this_document">このドキュメントについて</h2> - -<p>この概論では、IndexedDB の本質的な概念や用語について論じます。これにより全体像を示すとともに、重要な概念を説明します。</p> - -<p>以下の役に立つ項目があります:</p> - -<ul> - <li>IndexedDB の設計と構造の概観については、<a href="#concepts">重要な概念</a>を見てください。</li> - <li>IndexedDB の用語について詳しく学ぶには、<a href="#definitions">定義</a>の章をご覧ください。</li> - <li>API の使用方法に関する詳しいチュートリアルについては、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB" title="IndexedDB/IndexedDB primer">IndexedDB を使用する</a>をご覧ください。</li> - <li>IndexedDB API のリファレンスドキュメントについては、メインページ <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> のサブページをご覧ください。IndexedDB で使用するオブジェクト型について記載しています。</li> - <li>ブラウザーがバックグラウンドでデータの保存を扱う方法について詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>をご覧ください。</li> -</ul> - -<h2 id="Overview_of_IndexedDB" name="Overview_of_IndexedDB">IndexedDB の概要</h2> - -<p>IndexedDB では、"キー" でインデックス付けされたオブジェクトを保存および取り出すことができます。データベースに対して施したすべての変更は、トランザクションで発生します。たいていの Web ストレージ技術と同様に、IndexedDB も<a href="http://www.w3.org/Security/wiki/Same_Origin_Policy">同一生成元ポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> - -<p>IndexedDB は、<a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">Web Workers</a> を含むほとんどの状況で使用できる<a href="/ja/docs/Web/API/IndexedDB_API#Asynchronous_API" title="IndexedDB#Asynchronous_API">非同期</a> API です。以前は Web Workers で使用するための<a href="/ja/docs/Web/API/IndexedDB_API#Synchronous_API" title="IndexedDB#Synchronous_API">同期</a> API も含まれていましたが、Web コミュニティが無関心であったために仕様から削除されました。</p> - -<p>IndexedDB と競合する仕様である WebSQL データベースがありましたが、W3C は 2010 年 11 月 18 日に非推奨にしました。IndexedDB も WebSQL もデータ保存の技術ですが、提供する機能が異なります。WebSQL データベースはリレーショナルデータベースシステムであるのに対して、IndexedDB はインデックス付きのテーブルシステムです。</p> - -<h2 id="concepts" name="concepts">重要な概念</h2> - -<p>ほかのタイプのデータベースを扱った経験から想定していることがあるなら、IndexedDB を扱うときにはそれを捨てましょう。そして、以下の重要な概念を覚えておいてください:</p> - -<ul> - <li> - <p><strong>IndexedDB データベースはキーと値のペアを保存します。</strong>値は複雑な構造のオブジェクトにすることができます。また、キーはそれらのオブジェクトのプロパティにすることができます。分類された一覧表だけでなく、高速検索のためにオブジェクトの任意のプロパティを使用するインデックスを作成することができます。</p> - </li> - <li> - <p><strong>IndexedDB はトランザクショナルデータベースモデルに基づいて構築されます。</strong>IndexedDB で行うことはすべて、<a href="#gloss_transaction">トランザクション</a>環境で発生します。IndexedDB API はインデックス、テーブル、カーソルなどを表す多くのオブジェクトを提供していますが、それらは個々のトランザクションに結びつけられています。よって、トランザクションの外部でコマンドを実行したりカーソルを開くことはできません。トランザクションには明確な存続期間がありますので、完了後にトランザクションを使おうとすると例外が発生します。また、トランザクションは自動コミットであり、手動コミットはできません。</p> - - <p>このトランザクションモデルは、ユーザーが同時に 2 つの異なるタブを使用して ウェブ アプリのインスタンスを 2 つ開いた場合に何が起きるかを考慮すると、とても役に立ちます。トランザクショナルな操作がなければ、2 つのインスタンスでお互いの変更点が干渉するでしょう。データベースのトランザクションについて詳しくない場合は、<a class="link-https" href="https://en.wikipedia.org/wiki/Database_transaction">Wikipedia の Database transaction の記事</a> (<a class="link-https" href="https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B6%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3" title="トランザクション">日本語版</a>) をご覧ください。また、定義の章の<a href="#gloss_transaction">トランザクション</a>もご覧ください。</p> - </li> - <li> - <p><strong>IndexedDB API はほぼ非同期です。</strong>API はデータを戻り値として返しません。代わりに、コールバック関数を渡さなければなりません。同期的な方法でデータベースに値を "保存" したり、データベースから値を "取り出す" ことはありません。代わりに、データベースで実行する操作を "要求" します。操作が完了すると DOM イベントによって通知され、イベントの種類によって操作が成功したか失敗したかを知ることができます。これは、始めは若干複雑に聞こえますが、健全化対策が組み込まれています。また、<a href="/ja/docs/DOM/XMLHttpRequest" title="https://developer.mozilla.org/en/xmlhttprequest">XMLHttpRequest</a> が動作する方法と同様です。</p> - </li> - <li> - <p><strong>IndexedDB は多くのリクエストを使用します。</strong>リクエストは前述のとおり、成功または失敗の DOM イベントを受け取るオブジェクトです。これらは <code>onsuccess</code> および <code>onerror</code> プロパティを持っています。また、<code>addEventListener()</code> および <code>removeEventListener()</code> を呼び出すことができます。さらに、リクエストの状態を示すプロパティである <code>readyState</code>、<code>result</code>、<code>errorCode</code> を持っています。<code>result</code> プロパティはとりわけ魔法のようであり、リクエストを生成した方法に応じてさまざまなもの (例えば <code>IDBCursor</code> インスタンス、あるいはデータベースに挿入した値に対するキー) になります。</p> - </li> - <li> - <p><strong>IndexedDB は結果が使用可能であることを通知するために、DOM イベントを使用します。</strong>DOM イベントは必ず <code>type</code> プロパティを持っています (IndexedDB では、一般的に <code>"success"</code> または <code>"error"</code> が設定されます)。また、DOM イベントは <code>target</code> プロパティも持っており、イベントがどこで生じたかを示します。ほとんどの場合、イベントの <code>target</code> は、何らかのデータベース操作の実行結果として生成された <code>IDBRequest</code> オブジェクトです。成功イベントは伝播せず、またキャンセルできません。一方、エラーイベントは伝播しますし、キャンセルも可能です。エラーイベントはキャンセルしない限り、実行中のあらゆるトランザクションを中止させますので、とても重要です。</p> - </li> - <li> - <p><strong>IndexedDB はオブジェクト指向です。</strong>IndexedDB は、行と列の集合で表されるテーブルによるリレーショナルデータベースではありません。この重要かつ根本的な違いが、アプリケーションの設計や構築の方法に影響を与えます。</p> - - <p>伝統的なリレーショナルデータストアでは、データを示す行と、名前付きでデータの型を示す列の集合を保存するテーブルを持ちます。一方、IndexedDB はデータの型と、単に持続的な JavaScript オブジェクトを保存するためのオブジェクトストアを作成しなければなりません。それぞれのオブジェクトストアは問い合わせや反復処理を効率的に行うためのインデックスの集合を持つことができます。オブジェクト指向データベース管理システムについて詳しくない場合は、<a href="https://en.wikipedia.org/wiki/Object_database">Wikipedia の Object database の記事</a> (<a href="https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9" title="オブジェクトデータベース">日本語版</a>) をご覧ください。</p> - </li> - <li> - <p><strong>IndexedDB は Structured Query Language (<abbr>SQL</abbr>) を使用しません。</strong>IndexedDB はカーソルを生成するインデックスでクエリーを使用しており、結果セットで反復処理を行うために使用します。NoSQL システムについて詳しくない場合は、<a href="https://en.wikipedia.org/wiki/NoSQL">Wikipedia の NoSQL の記事</a> (<a href="https://ja.wikipedia.org/wiki/NoSQL" title="NoSQL">日本語版</a>) をご覧ください。</p> - </li> - <li> - <p><a name="origin"><strong>IndexedDB は同一生成元ポリシーに従います。</strong></a>生成元は、スクリプトを実行したドメイン、アプリケーション層プロトコル、ドキュメントの URL のポートです。それぞれの生成元が、自身に関連付けられたデータベースセットを持ちます。すべてのデータベースが、どの生成元に所属するかを識別する名称を持ちます。</p> - - <p>IndexedDB に与えられたセキュリティ境界は、アプリケーションが別の生成元のデータにアクセスできないようにします。例えば <a href="http://www.example.com/app/" rel="freelink">http://www.example.com/app/</a> のアプリやページは、同一生成元である <a href="http://www.example.com/dir/" rel="freelink">http://www.example.com/dir/</a> からデータを取り出すことができます。しかし、生成元が異なる <a href="http://www.example.com:8080/dir/" rel="freelink">http://www.example.com:8080/dir/</a> (ポートが異なる) や <a class="link-https" href="https://www.example.com/dir/" rel="freelink">https://www.example.com/dir/</a> (プロトコルが異なる) からデータを取り出すことはできません。</p> - - <div class="note"><strong>注記</strong>: サードパーティの window コンテンツ (例えば {{htmlelement("iframe")}} コンテンツ) は、ブラウザーで<a href="https://support.mozilla.org/kb/disable-third-party-cookies">サードパーティ Cookie を常に拒否する</a>ように設定していない限り、自身が組み込まれた生成元の IndexedDB ストアにアクセスできます ({{bug("1147821")}} をご覧ください)。</div> - </li> -</ul> - -<h2 id="definitions" name="definitions">定義</h2> - -<p>この章では、IndexedDB API で使用する用語について定義および説明します。</p> - -<h3 id="database" name="database">データベース</h3> - -<dl> - <dt><a name="gloss_database">データベース (database)</a></dt> - <dd>主に 1 個以上の<a href="#gloss_object_store" title="#gloss_object_store"><em>オブジェクトストア</em></a>で構成される、情報のリポジトリです。それぞれのデータベースが以下のものを持ちます: - <ul> - <li>名称。これは特定の生成元に所属するデータベースを識別しており、データベースの存続期間を通じて不変です。名称は任意の文字列値です (空文字列を含む)。</li> - <li> - <p>現在の<a href="#gloss_version"><em>バージョン</em></a>。始めにデータベースを生成したとき、バージョンは特に指定しない限り整数の 1 になります。それぞれのデータベースは、任意の時点でバージョンを 1 つだけ持ちます。</p> - </li> - </ul> - </dd> - <dt><a name="durable">永続性 (durable)</a></dt> - <dd> - <p>以前の Firefox では、IndexedDB に<strong>永続性</strong>がありました。つまり、読み書きトランザクションにおいて、{{domxref("IDBTransaction.oncomplete")}} が発生するのは、すべてのデータがディスク上に実際に書き込まれている（フラッシュされている）ことが保証されたときに限ります。</p> - - <p>Firefox 40 以降、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。これは IndexedDB をサポートする他のブラウザーと同じ動作です。この場合、{{Event("complete")}} イベントは OS がデータの書き込みを指示した時点で発生しますが、実際にはデータがディスク上に反映されていない可能性があります。これによりイベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。</p> - - <div class="note"> - <p><strong>注記</strong>: Firefox では、何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証したい場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。これは現在実験的な扱いであり、<code>about:config</code> で <code>dom.indexedDB.experimental</code> を <code>true</code> に設定した場合に限り使用できます。</p> - </div> - </dd> - <dt><a name="gloss_object_store">オブジェクトストア (object store)</a></dt> - <dd> - <p>データベースにデータを保存する仕組みです。オブジェクトストアはレコードを持続的に保持しており、これはキーと値のペアです。オブジェクトストア内のレコードは、<em><a href="#gloss_key">キー</a></em>によって昇順に整列して保存されています。</p> - - <p>すべてのオブジェクトストアは、データベース内で一意な名称を持たなければなりません。オブジェクトストアは、任意で<em><a href="#gloss_keygenerator">キージェネレーター</a></em>や<em><a href="#gloss_keypath">キーパス</a></em>を持つことができます。オブジェクトストアがキーパスを持つ場合は、<em><a href="#gloss_inline_key">インラインキー</a></em>を使用します。それ以外の場合は、<em><a href="#gloss_outofline_key">アウトオブラインキー</a></em>を使用します。</p> - - <p>オブジェクトストアのリファレンスドキュメントとして、{{domxref("IDBObjectStore")}} をご覧ください。</p> - </dd> - <dt><a name="gloss_version">バージョン (version)</a></dt> - <dd>始めにデータベースを生成したとき、バージョンは整数の 1 になります。それぞれのデータベースは、一度に 1 つのバージョンを持ちます。一度に複数のバージョンを持つことはできません。バージョンを変更する唯一の方法は、現在のバージョンより大きなバージョンでデータベースを開くことです。これは <a href="/ja/docs/Web/API/IDBVersionChangeRequest"><code>versionchange</code></a> <em>トランザクション</em>を開始して、<a href="/ja/docs/Web/Reference/Events/upgradeneeded_indexedDB"><code>upgradeneeded</code></a> イベントが発生します。データベースのスキーマを更新できる唯一の場所が、このイベントのハンドラ内です。</dd> - <dd>注記: この定義は<a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">直近の仕様書</a>で説明されており、最新のブラウザーのみ実装しています。古いブラウザーは非推奨かつ削除済みの <a href="/ja/docs/Web/API/IDBDatabase#setVersion()" title="IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a> メソッドを実装しています。</dd> - <dt><a name="gloss_database_connection">データベース接続 (database connection)</a></dt> - <dd><em><a href="#gloss_database">データベース</a></em>を開くことで生成される操作です。データベースは同時に複数の接続を持つことができます。</dd> - <dt><a name="gloss_transaction">トランザクション (transaction)</a></dt> - <dd> - <p>特定のデータベースで行う、原子性を持つデータアクセスやデータ変更の操作のセットです。これは、データベース内のデータと対話する手段です。実際は、データベース内のデータの読み取りや変更はトランザクション内で実施しなければなりません。</p> - - <p>書き込みトランザクションの<a href="#scope"><em>スコープ</em></a>が重ならない限り、ひとつのデータベース接続で同時に複数のアクティブなトランザクションが存在できます。トランザクションのスコープは生成時に定義され、トランザクションがどのオブジェクトストアと対話できるかや、トランザクションの持続期間にわたって保持し続けるかを示します。よって例えば、データベース接続で <code>flyingMonkey</code> オブジェクトストアのみ対象とするスコープを持つ書き込みトランザクションがすでに存在するとき、<code>unicornCentaur</code> オブジェクトストアや <code>unicornPegasus</code> オブジェクトストアをスコープで持つ別のトランザクションを開始できます。読み取りトランザクションは、スコープが重なっていても複数実行できます。</p> - - <p>トランザクションは持続期間が短いものを除き、長時間のトランザクションがストレージ資源をロックする状況から解放するために、ブラウザーが終了させることができます。トランザクションは中止させることができ、トランザクションによるデータベースの変更箇所はロールバックされます。また、開始するトランザクションや中止するトランザクションを待つ必要はありません。</p> - - <p>トランザクションには <code>readwrite</code>、<code>readonly</code>、<code>versionchange</code> の 3 つのモードがあります。オブジェクトストアやインデックスの生成および削除は、<a href="/ja/docs/Web/Reference/Events/versionchange_indexedDB"><code>versionchange</code></a> トランザクションを使用する場合に限り実行できます。トランザクションのタイプについて詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> のリファレンスをご覧ください。</p> - - <p>すべての操作はトランザクション内で発生しますので、トランザクションは IndexedDB の重要な概念です。トランザクションについて、特にバージョニングとの関係については、{{domxref("IDBTransaction")}} および関連ドキュメントをご覧ください。ここにリファレンスドキュメントもあります。</p> - </dd> - <dt><a name="gloss_request">リクエスト (request)</a></dt> - <dd>データベースの読み書きを実施する操作です。すべてのリクエストは、ひとつの読み取りまたは書き込みの操作を表します。</dd> - <dt><a name="gloss_index">インデックス (index)</a></dt> - <dd> - <p>インデックスは<em>参照先オブジェクトストア (referenced object store)</em>から呼び出されて、別のオブジェクトストアのレコードを検索するための特別なオブジェクトストアです。インデックスは持続的なキーと値のストレージであり、インデックスのレコードの値は、参照先オブジェクトストアのレコードのキーです。インデックス内のレコードは、参照先オブジェクトストアでレコードが挿入、更新、削除されるたびに、自動的に収集されます。インデックス内の各レコードは参照先オブジェクトストア内のレコードをひとつだけ示すことができますが、複数のインデックスが同一のオブジェクトストアを参照することもできます。オブジェクトストアが変更されると、そのオブジェクトストアを参照するすべてのインデックスが自動的に更新されます。</p> - - <p>代わりに、<a href="#gloss_key">キー</a>を使用してオブジェクトストア内のレコードを検索することもできます。</p> - - <p>インデックスの使用法について詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB#Using_an_index" title="IndexedDB/Using_IndexedDB#Using_an_index">IndexedDB を使用する</a>をご覧ください。インデックスのリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a> をご覧ください。</p> - </dd> -</dl> - -<h3 id="key" name="key">キーと</h3> - -<dl> - <dt><a name="gloss_key">キー (key)</a></dt> - <dd> - <p>オブジェクトストアに保存された値は、このデータ値によって編成および取り出しされます。オブジェクトストアは<em><a href="#gloss_keygenerator">キージェネレーター</a></em>、<em><a href="#gloss_keypath">キーパス</a></em>、明示的に指定した値の、3 種類の生成源のいずれかからキーを得られます。キーは、自身の前にあるものより大きな数値を持つデータ型であることが必要です。オブジェクトストア内の各レコードはオブジェクトストア内で一意のキーを持たなければならず、オブジェクトストア内で複数のレコードが同じキーを持つことはできません。</p> - - <p>キーは <a href="/ja/docs/JavaScript/Reference/Global_Objects/String" title="JavaScript/Reference/Global_Objects/String">文字列</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global Objects/Date">date</a>、浮動小数点数値、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Array" title="JavaScript/Reference/Global Objects/Array">配列</a>のいずれかの型を使用できます。配列では、キーは空の値から無限大までの範囲を使用できます。また、配列の中に配列を含めることができます。文字列または整数値のキーしか使用できないという条件はありません。</p> - - <p>代わりに、<em><a href="#gloss_index">インデックス</a>を使用してオブジェクトストア内のレコードを検索することもできます。</em></p> - </dd> - <dt><a name="gloss_keygenerator">キージェネレーター (key generator)</a></dt> - <dd>指定した順序で新たなキーを生成する仕組みです。オブジェクトストアがキージェネレーターを持たない場合は、保存するレコードのキーをアプリケーションが提供しなければなりません。ジェネレーターはストア間で共有しません。これはむしろブラウザーの実装の細部であり、Web 開発において実際にはキージェネレーターの生成やアクセスは行いません。</dd> - <dt><a name="gloss_inline_key">インラインキー (in-line key)</a></dt> - <dd>保存される値の一部として保存されるキーです。これは<em>キーパス</em>を使用して見つけます。インラインキーは、ジェネレーターを使用して生成できます。キーが生成されると、キーパスを使用してキーを値の中に保存したり、キーとして使用したりすることができます。</dd> - <dt><a name="gloss_outofline_key">アウトオブラインキー (out-of-line key)</a></dt> - <dd>保存する値とは別に保存されるキーです。</dd> - <dt><a name="gloss_keypath">キーパス (key path)</a></dt> - <dd>オブジェクトストアやインデックスのどこからブラウザーがキーを取り出すべきかを定義します。有効なキーパスは空文字列、JavaScript の識別子、ピリオドで区切られた複数の JavaScript の識別子、あるいはそれらを収めた配列のいずれかを含むことができます。空白を含むことはできません。</dd> - <dt><a name="gloss_value">値 (value)</a></dt> - <dd> - <p>それぞれのレコードは値を持っており、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Boolean" rel="internal" title="JavaScript/Reference/Global_Objects/Boolean">論理値</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Number" rel="internal" title="JavaScript/Reference/Global_Objects/Number">数値</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/String" title="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String">文字列</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Date" title="JavaScript/Reference/Global Objects/Date">date</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Object" title="JavaScript/Reference/Global Objects/Object">オブジェクト</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/Array" rel="internal" title="JavaScript/Reference/Global_Objects/Array">配列</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/RegExp" rel="internal" title="JavaScript/Reference/Global_Objects/RegExp">正規表現</a>、<a href="/ja/docs/JavaScript/Reference/Global_Objects/undefined" title="JavaScript/Reference/Global_Objects/undefined">undefined</a>、null を含む、JavaScript で表現可能なものをどれでも含むことができます。</p> - - <p>オブジェクトまたは配列を保存する場合は、それらのプロパティや値もまた、有効な値をどれでも持つことができます。</p> - - <p>また、<a href="/ja/docs/DOM/Blob" title="DOM/Blob">Blob</a> やファイルも保存可能です。<a href="http://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">仕様書</a> をご覧ください。</p> - </dd> -</dl> - -<h3 id="range" name="range">レンジとスコープ</h3> - -<dl> - <dt id="scope"><a id="gloss_scope" name="gloss_scope">スコープ (scope)</a></dt> - <dd>トランザクションの適用先であるオブジェクトストアやインデックスのセットです。読み取りのみのトランザクションのスコープは、同時に重ね合ったり実行することができます。一方、書き込みトランザクションのスコープは重ね合うことができません。同時に同一のスコープで複数のトランザクションを開始することはできますが、それらはキューに収められ、順番に実行されます。</dd> - <dt id="cursor"><a id="gloss_cursor" name="gloss_cursor">カーソル (cursor)</a></dt> - <dd><em>キーレンジ</em>に属する複数のレコードにわたって反復処理を行うための仕組みです。カーソルは、反復処理を行うインデックスやオブジェクトストアがどれかを示す source を持ちます。またレンジ内の位置や、レコードキーの順序について増加方向に移動しているか減少方向に移動しているかの情報も持ちます。カーソルのリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IDBCursor">IDBCursor</a> や <a href="/ja/docs/Web/API/IDBCursorSync">IDBCursorSync</a> をご覧ください。</dd> - <dt id="key_range"><a id="gloss_keyrange" name="gloss_keyrange">キーレンジ (key range)</a></dt> - <dd> - <p>キーとして使用する、何らかのデータ型の連続的な区間です。キーまたはキーレンジを使用して、オブジェクトストアやインデックスからレコードを取り出すことができます。下限または上限を使用して、レンジを制限またはフィルターリングできます。例えばキーが x から y の間であるすべての値に対して、反復処理を行うことができます。</p> - - <p>キーレンジのリファレンスドキュメントとして、{{domxref("IDBKeyRange")}} をご覧ください。</p> - </dd> -</dl> - -<h2 id="limitations" name="limitations">制限</h2> - -<p>IndexedDB は、クライアントサイドのストレージが必要なほとんどのケースに対応します。しかし、以下のような一部のケースに対して設計されてはいません:</p> - -<ul> - <li>国際化対応の整列。あらゆる言語について、同じ方法で文字列を整列することはできないため、国際化対応の整列はサポートされていません。特定の国際化順序でデータをデータベースに保存することはできませんが、データベースから読み出したデータを自身で整列することはできます。ただし Firefox 43 より、実験的なフラグをを有効化することで<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB#Locale-aware_sorting">ロケール対応のソート</a>が可能になりました (現在は Firefox 限定)。</li> - <li>同期処理。API は、サーバーサイドのデータベースとの同期を考慮して設計されていません。クライアントサイドの IndexedDB とサーバーサードのデータベースで同期するように、コードを記述しなければなりません。</li> - <li>全文検索。API に、SQL の <code>LIKE</code> に相当するものは存在しません。</li> -</ul> - -<p>加えて、以下のような状況でブラウザーがデータベースを削除する場合があることを意識してください:</p> - -<ul> - <li>ユーザーが削除を要求した場合。Cookie、ブックマーク、保存されたパスワード、IndexedDB のデータを含む、Web サイト用に保存されたすべてのデータをユーザーが削除できる設定が多くのブラウザーに存在します。</li> - <li>ブラウザーがプライベートブラウジングモードである場合。"プライベートブラウジング" (Firefox) や "シークレット" (Chrome) といったモードを持つブラウザーがあります。セッションの終了時に、ブラウザーはすべてのデータベースを削除します。</li> - <li>ディスクまたはクォータの容量制限に達した場合。</li> - <li>データが破損した場合。</li> - <li>機能に対して互換性のない変更が施された場合。</li> -</ul> - -<p>正確な状況やブラウザーの機能は時間とともに変化しますが、ブラウザーベンダーの一般的な考え方は、可能な限りデータを維持するよう最大限に努力することです。</p> - -<h2 id="next" name="next">次のステップ</h2> - -<p>主要な概念を習得したら、より具体的なことを学べるようになります。API の使用方法に関するチュートリアルである、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB" title="IndexedDB/IndexedDB primer">IndexedDB を使用する</a>をご覧ください。</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="http://www.w3.org/TR/IndexedDB/"><span style="direction: ltr;">Indexed Database API 仕様</span></a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API" title="IndexedDB">IndexedDB API リファレンス</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB" title="IndexedDB/Using IndexedDB">IndexedDB を使用する</a></li> - <li><a href="http://msdn.microsoft.com/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html b/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html deleted file mode 100644 index e325f3ee41..0000000000 --- a/files/ja/orphaned/web/api/navigatorconcurrenthardware/hardwareconcurrency/index.html +++ /dev/null @@ -1,70 +0,0 @@ ---- -title: navigator.hardwareConcurrency -slug: orphaned/Web/API/NavigatorConcurrentHardware/hardwareConcurrency -translation_of: Web/API/NavigatorConcurrentHardware/hardwareConcurrency -original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>{{AvailableInWorkers}}</p> - -<p><code><strong>navigator.hardwareConcurrency</strong></code> はユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサ数を返す読み取り専用のプロパティです。</p> - -<h2 id="構文">構文</h2> - -<pre class="syntaxbox"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency -</pre> - -<h2 id="値">値</h2> - -<p>論理プロセッサのコア数を示す{{jsxref("Number")}}です。</p> - -<p>現代のコンピューターはCPUに複数の物理プロセッサのコアを持っています（通常は2コアか4コア）。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて一度に複数スレッドを実行することができます。 したがって、例えば4コアのCPUは8個の<strong>論理プロセッサコア</strong>を提供することができます。論理プロセッサのコア数は、コンテキストスイッチを必要とせずに一度に効果的に実行できるスレッドの数を測定するために使用できます。</p> - -<p>しかしながら、ブラウザはより少ない論理コア数を報告することを選択することで、一度に実行できる{{domxref("Worker")}}の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p> - -<h2 id="例">例</h2> - -<p>この例では、ブラウザが報告した論理プロセッサごとに{{domxref("Worker")}}が1つ作られ、新しいWorkerへの参照と、そのWorkerをまだ使用しているかどうかを示すBooleanの値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うWorkerのプールを作っています。</p> - -<pre class="brush: js">let workerList = []; - -for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { - let newWorker = { - worker: new Worker('cpuworker.js'), - inUse: false - }; - workerList.push(newWorker); -}</pre> - -<h2 id="仕様">仕様</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#dom-navigator-hardwareconcurrency', 'navigator.hardwareConcurrency')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="ブラウザでの実装状況">ブラウザでの実装状況</h2> - -<div> - - -<p>{{Compat("api.NavigatorConcurrentHardware.hardwareConcurrency")}}</p> -</div> - -<h2 id="関連情報">関連情報</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html b/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html deleted file mode 100644 index 43e5ae1965..0000000000 --- a/files/ja/orphaned/web/api/navigatorconcurrenthardware/index.html +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: NavigatorConcurrentHardware -slug: orphaned/Web/API/NavigatorConcurrentHardware -tags: - - API - - Concurrency - - HTML DOM - - Interface - - Navigator - - NavigatorCPU - - NavigatorConcurrentHardware - - NeedsBrowserCompatibility - - NeedsTranslation - - Reference - - Threading - - Threads - - TopicStub - - WorkerNavigator - - Workers -translation_of: Web/API/NavigatorConcurrentHardware -original_slug: Web/API/NavigatorConcurrentHardware ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <strong><code>NavigatorConcurrentHardware</code></strong> {{Glossary("mixin")}} adds to the {{domxref("Navigator")}} interface features which allow Web content to determine how many logical processors the user has available, in order to let content and Web apps optimize their operations to best take advantage of the user's CPU.</p> - -<p>{{AvailableInWorkers}}</p> - -<p>The number of <strong>logical processor cores</strong> is a way to measure the number of threads which can effectively be run at once without them having to share CPUs. Modern computers have multiple physical cores in their CPU (two or four cores is typical), but each physical core is also usually able to run more than one thread at a time using advanced scheduling techniques. So a four-core CPU may return 8. The browser may, however, choose to reduce the number in order to represent more accurately the number of {{domxref("Worker")}}s that can run at once</p> - -<h2 id="Properties">Properties</h2> - -<dl> - <dt>{{domxref("NavigatorConcurrentHardware.hardwareConcurrency")}} {{readonlyinline}}</dt> - <dd>Returns the number of logical processors which may be available to the user agent. This value is always at least 1, and will be 1 if the actual number of logical processors can't be determined.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The <code>NavigatorConcurrentHardware</code></em><em> mixin has no methods.</em></p> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorconcurrenthardware', 'NavigatorConcurrentHardware')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - - - -<p>{{Compat("api.NavigatorConcurrentHardware")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{domxref("Navigator")}}</li> - <li>{{domxref("WorkerNavigator")}}</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorid/appcodename/index.html b/files/ja/orphaned/web/api/navigatorid/appcodename/index.html deleted file mode 100644 index 36f09b360f..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/appcodename/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: window.navigator.appCodeName -slug: orphaned/Web/API/NavigatorID/appCodeName -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference -translation_of: Web/API/NavigatorID/appCodeName -original_slug: Web/API/NavigatorID/appCodeName ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>現在のブラウザの内部 "コード" ネームを返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>codeName = window.navigator.appCodeName</code></pre> -<ul> - <li><code>codeName</code> : ブラウザの内部名を表す文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">console.log(window.navigator.appCodeName); -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>Mozilla、Netscape 6、IE5 は全て、内部名に "Mozilla" を用いています。</p> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0()}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/appname/index.html b/files/ja/orphaned/web/api/navigatorid/appname/index.html deleted file mode 100644 index 450525027b..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/appname/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: window.navigator.appName -slug: orphaned/Web/API/NavigatorID/appName -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference - - 要更新 -translation_of: Web/API/NavigatorID/appName -original_slug: Web/API/NavigatorID/appName ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>ブラウザの公式な名前を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><code>appName = window.navigator.appName</code></pre> -<ul> - <li><code>appName</code> は、ブラウザの名前を表す文字列です。</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:js">dump(window.navigator.appName); -// NS6 のコンソールに "Navigator" を出力します。 -</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/index.html b/files/ja/orphaned/web/api/navigatorid/index.html deleted file mode 100644 index bea00f1477..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: NavigatorID -slug: orphaned/Web/API/NavigatorID -tags: - - API -translation_of: Web/API/NavigatorID -original_slug: Web/API/NavigatorID ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>The <code><strong>NavigatorID</strong></code> interface contains methods and properties related to the identity of the browser.</p> - -<p>There is no object of type <code>NavigatorID</code>, but other interfaces, like {{domxref("Navigator")}} or {{domxref("WorkerNavigator")}}, implement it.</p> - -<h2 id="Properties">Properties</h2> - -<p><em>The <code>NavigatorID</code></em><em> interface doesn't inherit any property.</em></p> - -<dl> - <dt>{{domxref("NavigatorID.appCodeName")}} {{readonlyInline}}{{deprecated_inline}}</dt> - <dd>Always returns <code>'Mozilla'</code>, on any browser. This property is kept only for compatibility purpose.</dd> - <dt>{{domxref("NavigatorID.appName")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Returns the official name of the browser. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.appVersion")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Returns the version of the browser as a string. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.platform")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Returns a string representing the platform of the browser. Do not rely on this property to return the correct value.</dd> - <dt>{{domxref("NavigatorID.product")}} {{readonlyInline}} {{deprecated_inline}}</dt> - <dd>Always returns <code>'Gecko'</code>, on any browser. This property is kept only for compatibility purpose.</dd> - <dt>{{domxref("NavigatorID.userAgent")}} {{readonlyInline}}</dt> - <dd>Returns the user agent string for the current browser.</dd> -</dl> - -<h2 id="Methods">Methods</h2> - -<p><em>The </em><em><code>NavigatorID</code></em><em> interface doesn't inherit any method.</em></p> - -<dl> - <dt>{{domxref("NavigatorID.taintEnabled()")}} {{deprecated_inline()}}</dt> - <dd>Always returns <code>false</code>. JavaScript taint/untaint functions were removed in JavaScript 1.2. This method is only kept for compatibility purpose</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Added the <code>appCodeName</code> property and the <code>taintEnabled()</code> method, for compatibility purpose.</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', '#navigatorid', 'NavigatorID')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td>Initial specification.</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{Compat("api.NavigatorID")}}</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>The {{domxref("Navigator")}} and {{domxref("WorkerNavigator")}} interfaces that implement it.</li> -</ul> diff --git a/files/ja/orphaned/web/api/navigatorid/platform/index.html b/files/ja/orphaned/web/api/navigatorid/platform/index.html deleted file mode 100644 index a369a1f12e..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/platform/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: NavigatorID.platform -slug: orphaned/Web/API/NavigatorID/platform -tags: - - API - - Navigator - - NavigatorID - - Property - - Reference - - platform -translation_of: Web/API/NavigatorID/platform -original_slug: Web/API/NavigatorID/platform ---- -<p>{{APIRef("HTML DOM")}}</p> - -<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p> - -<h2 id="Syntax" name="Syntax">構文</h2> - -<pre class="syntaxbox"><em>platform</em> = <em>navigator</em>.platform -</pre> - -<ul> - <li><code>platform</code> : 文字列 (例： "Win32" 、 "Linux i686" 、 "MacPPC" 、 "MacIntel" ...等)</li> -</ul> - -<h3 id="Value" name="Value">値</h3> - -<p>ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断る (または識別できない) 場合は空文字列になります。<code>platform</code> は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。</p> - -<p>例: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</p> - -<h2 id="Example" name="Example">例</h2> - -<pre class="brush:js">console.log(navigator.platform);</pre> - -<h2 id="Notes" name="Notes">注記</h2> - -<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p> - -<p>Firefox は設定項目 <code>general.platform.override</code> で、このプロパティが返す値を上書きできます。</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('HTML WHATWG', '#dom-navigator-platform', 'NavigatorID.platform')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初期定義</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> - - - -<p>{{Compat("api.NavigatorID.platform")}}</p> diff --git a/files/ja/orphaned/web/api/navigatorid/product/index.html b/files/ja/orphaned/web/api/navigatorid/product/index.html deleted file mode 100644 index 7c9649cf3d..0000000000 --- a/files/ja/orphaned/web/api/navigatorid/product/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: window.navigator.product -slug: orphaned/Web/API/NavigatorID/product -tags: - - DOM - - DOM_0 - - Gecko - - Gecko DOM Reference -translation_of: Web/API/NavigatorID/product -original_slug: Web/API/NavigatorID/product ---- -<div> - {{ApiRef}}</div> -<h2 id="Summary" name="Summary">概要</h2> -<p>このプロパティは、現在のブラウザの製品名を返します。</p> -<h2 id="Syntax" name="Syntax">構文</h2> -<pre class="syntaxbox"><i>productName</i> = window.navigator.product -</pre> -<ul> - <li><code>productName</code> : 製品名を表す文字列</li> -</ul> -<h2 id="Example" name="Example">例</h2> -<pre class="brush:html"><script> -function prod() { - dt = document.getElementById("d"); - dt.innerHTML = window.navigator.product; -} -</script> - -<button onclick="prod();">product</button> -<div id="d"> </div> - -<!-- "Gecko" などの文字列が表示される --> -</pre> -<h2 id="Notes" name="Notes">注記</h2> -<p>製品名は、ユーザエージェント全体の文字列の一部（プラットフォームの直後）です。例えば、Netscape 6.1 を表すユーザエージェントでは、製品名は、"Gecko" であり、ユーザエージェント文字列全体は、次の通りです。</p> -<pre>Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1</pre> -<h2 id="Specification" name="Specification">仕様</h2> -<p>{{DOM0}}</p> 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/guide/html/html5/introduction_to_html5/index.html b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html index 861044c138..c1cdd1d6b5 100644 --- a/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html +++ b/files/ja/orphaned/web/guide/html/html5/introduction_to_html5/index.html @@ -9,7 +9,7 @@ original_slug: Web/Guide/HTML/HTML5/Introduction_to_HTML5 --- <p><a class="external" href="https://www.whatwg.org/specs/web-apps/current-work/">HTML5</a> は、HTML 標準の最も新しいバージョンです。HTML5 によって、リッチメディアのサポートだけでなく、ユーザ、彼らのローカルデータ、サーバの間でより簡単にかつ効果的にやり取りするための Web アプリケーションを作成するための拡張されたサポートを提供するための新機能も手に入れることができます。</p> -<p>HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。<a href="/ja/docs/orphaned/Web/Guide/HTML/HTML5" title="ja/HTML/HTML5">HTML5 のメインページ</a>に Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、<a class="external" href="http://caniuse.com/#cats=HTML5">CanIUse</a> ウェブサイトを参照してください。</p> +<p>HTML5 はまだ策定段階にあるため、現在の仕様に対する変更は当然あり得ます。そのため、すべてのブラウザで HTML5 の機能のすべてがサポートされているわけではありません。ですが、Gecko (そしてその拡張である、Firefox) には、素晴らしいほどに、HTML5 の最初の段階のサポートが含まれており、さらなる機能のサポートに対する取り組みを続けています。Gecko は バージョン1.8.1 から HTML5 の機能をサポートし始めました。<a href="/ja/docs/orphaned/Web/Guide/HTML/HTML5">HTML5 のメインページ</a>に Gecko がサポートしている HTML5 の機能のリストがあります。複数ブラウザのサポート状況の詳細な情報については、<a class="external" href="http://caniuse.com/#cats=HTML5">CanIUse</a> ウェブサイトを参照してください。</p> <h2 id="The_HTML5_doctype">HTML5 の DOCTYPE</h2> 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/orphaned/web/javascript/guide/creating_a_regular_expression/index.html b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html index 4da2f3be90..9b09e6c5d2 100644 --- a/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html +++ b/files/ja/orphaned/web/javascript/guide/creating_a_regular_expression/index.html @@ -18,7 +18,7 @@ original_slug: Web/JavaScript/Guide/Creating_a_Regular_Expression </dd> </dl> <ul> - <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp" title="ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li> + <li>次のように、<a href="/ja/JavaScript/Reference/Global_Objects/RegExp">RegExp</a> オブジェクトのコンストラクタ関数を呼び出す。</li> </ul> <pre>var re = new RegExp("ab+c"); </pre> <dl> diff --git a/files/ja/orphaned/web/javascript/guide/expressions/index.html b/files/ja/orphaned/web/javascript/guide/expressions/index.html index 6c27367d80..90deb434f3 100644 --- a/files/ja/orphaned/web/javascript/guide/expressions/index.html +++ b/files/ja/orphaned/web/javascript/guide/expressions/index.html @@ -8,9 +8,9 @@ original_slug: Web/JavaScript/Guide/Expressions <p>概念的に、式は 2 つの種類に分けることができます。ある値を変数に代入するものと、単純にある値を持つものです。例えば、<code>x = 7</code> という式は x に 7 という値を代入する式です。この式自体の評価結果は 7 です。このような式では<em>代入演算子</em>を用います。一方、<code>3 + 4</code> という式では単純に評価結果が 7 になります。この式は代入を行いません。このような式で用いられる演算子は単に<em>演算子</em>と呼ばれます。</p> <p>JavaScript には以下の種類の式があります。</p> <ul> - <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li> - <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li> - <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li> - <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators" title="ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li> + <li>算術式：数値に評価する。例えば 3.14159。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Arithmetic_Operators">算術演算子</a> を使用）</li> + <li>文字列式：文字列に評価する。例えば "Fred" や "234"。（一般に <a href="/ja/Core_JavaScript_1.5_Guide/Operators/String_Operators">文字列演算子</a> を使用）</li> + <li>論理式：true または false に評価する。（よく <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Logical_Operators">論理演算子</a> を用いる)</li> + <li>オブジェクト式：オブジェクトに評価する。（オブジェクトに評価するさまざまな例については <a href="/ja/Core_JavaScript_1.5_Guide/Operators/Special_Operators">特殊演算子</a> を参照）</li> </ul> <p>{{ PreviousNext("JavaScript/Guide/Unicode", "JavaScript/Guide/Operators") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html index 93f9f2c65a..68dab826b1 100644 --- a/files/ja/orphaned/web/javascript/guide/loop_statements/index.html +++ b/files/ja/orphaned/web/javascript/guide/loop_statements/index.html @@ -5,14 +5,14 @@ original_slug: Web/JavaScript/Guide/Loop_Statements --- <h2 id=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87" name=".E3.83.AB.E3.83.BC.E3.83.97.E6.96.87">ループ文</h2> <p>ループは指定した条件が満たされている限り繰り返し実行されるコマンドのセットです。JavaScript は、label はもちろん、for、do while、while といったループ文をサポートしています（label 自体はループ文ではありませんが、これらの文とともに頻繁に使用されます）。さらに、<code>break</code> および <code>continue</code> 文をループ文の中で使うことができます。</p> -<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements" title="ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p> +<p>さらに <code>for...in</code> 文も文を繰り返し実行しますが、これはオブジェクトの操作に使用します。<a href="/ja/Core_JavaScript_1.5_Guide/Object_Manipulation_Statements">オブジェクト操作文</a> をご覧ください。</p> <p>ループ文は以下のとおりです。</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement" title="ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/for_Statement">for 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/do...while_Statement">do...while 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/while_Statement">while 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement">label 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/break_Statement">break 文</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Loop_Statements/continue_Statement">continue 文</a></li> </ul> <p>{{ PreviousNext("JavaScript/Guide/Conditional_Statements", "JavaScript/Guide/Loop_Statements/for_Statement") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html index 48e820e9ae..800a9e95cf 100644 --- a/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html +++ b/files/ja/orphaned/web/javascript/guide/object_manipulation_statements/index.html @@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Guide/Object_Manipulation_Statements <h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E6.93.8D.E4.BD.9C.E6.96.87">オブジェクト操作文</h3> <p>JavaScript はオブジェクトの操作に <code>for...in</code>、<code>for each...in</code> および <code>with</code> 文を使用します。</p> <h4 id="for...in_.E6.96.87" name="for...in_.E6.96.87">for...in 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for...in"><code>for...in</code></a> 文は指定した変数をオブジェクトの全プロパティに対して反復します。それぞれのプロパティに対して JavaScript は指定した文を実行します。<code>for...in</code> 文は次のように使用します。</p> <pre>for (variable in object) { statements } @@ -27,11 +27,11 @@ original_slug: Web/JavaScript/Guide/Object_Manipulation_Statements car.model = Mustang </pre> <p><strong>配列</strong><br> - <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array" title="ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for" title="ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p> + <a href="/ja/Core_JavaScript_1.5_Reference/Global_Objects/Array">Array</a> の要素に対して反復する方法としてこれを用いることは魅力的かもしれませんが、<strong>for...in</strong> 文はその配列の要素に加えてユーザ定義プロパティに対して繰り返すため、独自のプロパティやメソッドを追加するなどして Array オブジェクトに変更を加えると <strong>for...in</strong> 文は数値のインデックスに加えてユーザ定義プロパティの名前を返します。したがって、配列に対して反復したいときには数値のインデックスを用いた従来の <a href="/ja/Core_JavaScript_1.5_Reference/Statements/for">for</a> ループを使用したほうがいいでしょう。</p> <h4 id="for_each...in_.E6.96.87" name="for_each...in_.E6.96.87">for each...in 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in" title="ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6" title="ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/for_each...in"><code>for each...in</code></a> は <a href="/ja/New_in_JavaScript_1.6">JavaScript 1.6</a> で導入されるループ文です。これは <code>for...in</code> に似ていますが、オブジェクトのプロパティの名前ではなく、プロパティの値に対して反復します。</p> <h4 id="with_.E6.96.87" name="with_.E6.96.87">with 文</h4> -<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p> +<p><a href="/ja/Core_JavaScript_1.5_Reference/Statements/with"><code>with</code></a> 文はデフォルトのオブジェクトについて文のセットを実行します。JavaScript はその文のセットにおいて非修飾名を検索し、その名前がデフォルトのオブジェクトのプロパティであるかを決定します。非修飾名がプロパティにマッチすると、そのプロパティがその文で使われます。そうでない場合はローカル変数かグローバル変数が使われます。</p> <p><code>with</code> 文は次のように使用します。</p> <pre>with (object) { statements @@ -47,6 +47,6 @@ with (Math) { y = r * sin(PI/2); } </pre> -<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with" title="ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p> +<p>注意：<code>with</code> 文を使うことでプログラムをより簡潔にすることができますが、<code>with</code> の不適切な使用はプログラムを大幅にスローダウンさせることに繋がります。<a href="/ja/Core_JavaScript_1.5_Reference/Statements/with">Core JavaScript 1.5 Reference:Statements:with</a> を参照してください。</p> <p>{{ PreviousNext("JavaScript/Guide/Loop_Statements/continue_Statement", "JavaScript/Guide/Comments") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html index 6d126722b1..ca2ec31ef2 100644 --- a/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/escape_and_unescape_functions/index.html @@ -12,5 +12,5 @@ original_slug: Web/JavaScript/Guide/Predefined_Functions/escape_and_unescape_Fun unescape(string) </pre> <p>これらの関数は主にサーバサイド JavaScript で URL 中の名前と値のペアのエンコードやデコードに使用されます。</p> - <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent" title="ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div> + <code>escape</code> および <code>unescape</code> 関数は 非 ASCII 文字に対しては正しく機能せず、廃止予定になっています。JavaScript 1.5 以降では <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURI">encodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURI">decodeURI</a></code>、<code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/encodeURIComponent">encodeURIComponent</a></code> および <code><a href="/ja/Core_JavaScript_1.5_Reference/Global_Functions/decodeURIComponent">decodeURIComponent</a></code> を使用してください。</div> <p>{{ PreviousNext("JavaScript/Guide/Predefined_Functions/Number_and_String_Functions", "JavaScript/Guide/Objects_and_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html index 3738bf8da4..e802cc270a 100644 --- a/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html +++ b/files/ja/orphaned/web/javascript/guide/predefined_functions/index.html @@ -7,12 +7,12 @@ original_slug: Web/JavaScript/Guide/Predefined_Functions <h3 id=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0" name=".E5.AE.9A.E7.BE.A9.E6.B8.88.E3.81.BF.E9.96.A2.E6.95.B0">定義済み関数</h3> <p>JavaScript にはトップレベルの定義済み関数がいくつかあります。</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions" title="ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/eval_Function">eval</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isFinite_Function">isFinite</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/isNaN_Function">isNaN</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/parseInt_and_parseFloat_Functions">parseInt と parseFloat</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/Number_and_String_Functions">Number と String</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/Predefined_Functions/escape_and_unescape_Functions">encodeURI と decodeURI、encodeURIComponent、decodeURIComponent（すべて Javascript 1.5 以降で使用可能）</a></li> </ul> </div> <p>{{ PreviousNext("JavaScript/Guide/Using_the_arguments_object", "JavaScript/Guide/Predefined_Functions/eval_Function") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html index 9ed2621e37..41ec88a890 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/creating_the_hierarchy/index.html @@ -6,7 +6,7 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example/Creating_the_Hierarchy <h3 id=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90" name=".E9.9A.8E.E5.B1.A4.E3.81.AE.E4.BD.9C.E6.88.90">階層の作成</h3> <p>Employee の階層を実装するための適当なコンストラクタ関数を定義する方法はいくつかあります。これの定義に何を選択するかは、アプリケーションで何ができるようにしたいかに大きくよります。</p> <p>このセクションではとても単純（かつ比較的柔軟でない）定義の使用方法を示し、継承を機能させる方法を実際に示します。これらの定義では、オブジェクト作成時に何らかのプロパティの値を指定することはできません。新しく作成されるオブジェクトは単にデフォルトの値を取得するだけです。これは後から変更できます。図 8.2 ではこれらの単純な定義を備えた階層を例示します。</p> -<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p> +<p>実際のアプリケーションでは、オブジェクト作成時にプロパティの値を設定できるようにするコンストラクタを定義することになるでしょう（詳しくは <a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a> を参照）。今回はこれらの単純な定義を使用して、継承はどのようにして起こるのかを実際に示していくことにします。</p> <p><img alt="Image:hier02.gif" class="internal" src="/@api/deki/files/1905/=Hier02.gif"><br> <small><strong>図 8.2：Employee オブジェクトの定義</strong></small></p> <p>以下に示すように、Java と JavaScript の <code>Employee</code> の定義は似ています。唯一の相違点は、Java では各プロパティに対して型を指定する必要があるのに対して、JavaScript ではその必要がないことです。また、Java のクラスでは明示的なコンストラクタメソッドを作成する必要があります。</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html index b47856921c..79fd796301 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/index.html @@ -17,14 +17,14 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example </ul> <p>残りの例：</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">階層の作成</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties">オブジェクトのプロパティ</a> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> </ul> </li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/More_Flexible_Constructors">より柔軟なコンストラクタ</a></li> </ul> <div class="noinclude"> <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:Class-Based_vs._Prototype-Based_Languages", "Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html index 80c2494cf2..2cf27ea0ba 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/index.html @@ -6,8 +6,8 @@ original_slug: Web/JavaScript/Guide/The_Employee_Example/Object_Properties <h3 id=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3" name=".E3.82.AA.E3.83.96.E3.82.B8.E3.82.A7.E3.82.AF.E3.83.88.E3.81.AE.E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3">オブジェクトのプロパティ</h3> <p>このセクションでは、プロトタイプチェーンにおいてオブジェクトが他のオブジェクトからどのようにプロパティを継承するのか、また、実行時にプロパティを追加すると何が起きるのかについて論じます。</p> <ul> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> - <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Inheriting_Properties">プロパティの継承</a></li> + <li><a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Object_Properties/Adding_Properties">プロパティの追加</a></li> </ul> <div class="noinclude"> <p>{{ PreviousNext("Core_JavaScript_1.5_Guide:The_Employee_Example:Creating_the_Hierarchy", "Core_JavaScript_1.5_Guide:The_Employee_Example:Object_Properties:Inheriting_Properties") }}</p> diff --git a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html index 159c3c4e01..b860b5871f 100644 --- a/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html +++ b/files/ja/orphaned/web/javascript/guide/the_employee_example/object_properties/inheriting_properties/index.html @@ -6,7 +6,7 @@ original_slug: >- Web/JavaScript/Guide/The_Employee_Example/Object_Properties/Inheriting_Properties --- <h3 id=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF" name=".E3.83.97.E3.83.AD.E3.83.91.E3.83.86.E3.82.A3.E3.81.AE.E7.B6.99.E6.89.BF">プロパティの継承</h3> -<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy" title="ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p> +<p>次の文を用いて（<a href="/ja/Core_JavaScript_1.5_Guide/The_Employee_Example/Creating_the_Hierarchy">図 8.3</a> で示したように）<code>mark</code> オブジェクトを <code>WorkerBee</code> として作成するとします。</p> <pre class="eval">mark = new WorkerBee; </pre> <p>JavaScript は new 演算子に出くわすと、新しく汎用オブジェクトを生成し、この新しいオブジェクトを <code>this</code> キーワードの値として WorkerBee コンストラクタ関数に渡します。コンストラクタ関数は明示的に <code>projects</code> プロパティの値をセットします。さらに、内部的な <code>__proto__</code> プロパティの値として <code>WorkerBee.prototype</code> の値をセットします。（このプロパティ名は最初と最後に 2 文字ずつのアンダースコアが付いています。）<code>__proto__</code> プロパティはプロパティの値を返すのに使用されるプロトタイプチェーンを決定します。これらのプロパティがセットされると JavaScript は新しいオブジェクトを返し、代入文は変数 <code>mark</code> にそのオブジェクトをセットします。</p> @@ -15,7 +15,7 @@ original_slug: >- mark.dept = "general"; mark.projects = []; </pre> -<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited" title="ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p> +<p><code>mark</code> オブジェクトは <code>mark.__proto__</code> の原型的なオブジェクトから name および dept プロパティの値を継承します。WorkerBee コンストラクタによって projects プロパティにローカルの値が代入されます。このことでプロパティとその値を継承することができます。このプロセスの細かいところは <a href="/ja/Core_JavaScript_1.5_Guide/Property_Inheritance_Revisited">プロパティの継承、再び</a> にて議論します。</p> <p>これらのコンストラクタにインスタンス固有の値を渡せないため、この情報は汎用的になります。プロパティの値は WorkerBee によって作成されるすべての新しいオブジェクトに共有される、デフォルトの値になります。もちろん、これらのどのプロパティのでもその値を変えることができます。そのためには次のようにして <code>mark</code> に固有の情報を与えます。</p> <pre class="eval">mark.name = "Doe, Mark"; mark.dept = "admin"; diff --git a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html index 18259c91ce..446895507c 100644 --- a/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html +++ b/files/ja/orphaned/web/javascript/guide/using_the_arguments_object/index.html @@ -30,7 +30,7 @@ myConcat("; ", "elephant", "giraffe", "lion", "cheetah"); // "sage. basil. oregano. pepper. parsley. " を返す myConcat(". ", "sage", "basil", "oregano", "pepper", "parsley"); </pre> - <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function" title="ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p> + <p>さらなる情報については、コア JavaScript リファレンスの <a href="/ja/Core_JavaScript_1.5_Reference/Objects/Function">Function オブジェクト</a> をご覧ください。</p> <p><strong>JavaScript 1.3 以前のバージョン</strong><br> arguments オブジェクトは <code>Function</code> オブジェクトのプロパティであり、次のように関数の名前を前に付けることができます。</p> functionName.arguments{{ mediawiki.external('i') }}</div> diff --git a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html index ee4583e4b4..f94d505365 100644 --- a/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html +++ b/files/ja/orphaned/web/javascript/guide/writing_a_regular_expression_pattern/index.html @@ -5,7 +5,7 @@ original_slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern --- <h3 id=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F" name=".E6.AD.A3.E8.A6.8F.E8.A1.A8.E7.8F.BE.E3.83.91.E3.82.BF.E3.83.BC.E3.83.B3.E3.82.92.E6.9B.B8.E3.81.8F">正規表現パターンを書く</h3> -<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p> +<p>正規表現パターンは、<code>/abc/</code> のような単純な文字、または <code>/ab*c/</code> や <code>/Chapter (\d+)\.\d*/</code> のような単純な文字と特殊文字との組み合わせからなります。最後の例では記憶装置として使われている丸括弧が含まれています。パターンのこの部分でなされたマッチは後で使用できるように記憶されます。詳しくは <a href="/ja/docs/JavaScript/Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> を参照してください。</p> <h4 id="単純なパターンの使用">単純なパターンの使用</h4> @@ -183,7 +183,7 @@ original_slug: Web/JavaScript/Guide/Writing_a_Regular_Expression_Pattern <h4 id="括弧の使用">括弧の使用</h4> -<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches" title="ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p> +<p>正規表現パターンの一部分を括弧で囲むことで、マッチした部分文字列のその部分を記憶しておくことができます。一度記憶すると、後からその部分文字列を呼び戻すことができます。これに関しては <a href="/ja/Core_JavaScript_1.5_Guide/Working_with_Regular_Expressions/Using_Parenthesized_Substring_Matches">括弧で囲まれた部分文字列のマッチの使用</a> で説明しています。</p> <p>例えば、<code>/Chapter (\d+)\.\d*/</code> というパターンでは、エスケープされた文字と特殊文字の部分がその例で、その部分を記憶するように指示しています。これは 'Chapter ' という文字列、それに続く 1 文字以上の数字（\d はいずれかの数字を意味し、+ は 1 回以上の繰り返しを意味する）、それに続く小数点（それ自体は特殊文字であり、小数点の前の \ はパターンが '.' という文字そのものを探すようにすることを意味する）、それに続く 0 文字以上の数字（\d は数字を意味し、* は 0 回以上の繰り返しを意味する）にマッチします。さらに、括弧を使うことで最初のマッチした数値を記憶させます。</p> diff --git a/files/ja/orphaned/web/svg/element/solidcolor/index.html b/files/ja/orphaned/web/svg/element/solidcolor/index.html deleted file mode 100644 index 56480133c7..0000000000 --- a/files/ja/orphaned/web/svg/element/solidcolor/index.html +++ /dev/null @@ -1,84 +0,0 @@ ---- -title: <solidcolor> -slug: orphaned/Web/SVG/Element/solidColor -tags: - - Element - - Experimental - - Reference - - SVG -translation_of: Web/SVG/Element/solidColor -original_slug: Web/SVG/Element/solidColor ---- -<div>{{SVGRef}}{{obsolete_header}}</div> - -<p class="seoSummary"><strong><code><solidcolor></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。</p> - -<p class="note"><strong>注:</strong> これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <code><solidcolor></code> とは異なり、それ自身をグラデーションの定義に使用することができません。</p> - -<h2 id="Usage_context" name="Usage_context">使用場面</h2> - -<p>{{svginfo}}</p> - -<h2 id="Attributes" name="Attributes">属性</h2> - -<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> - -<ul> - <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> - <li><a href="/ja/docs/Web/API/GlobalEventHandlers">グローバルイベント属性</a></li> - <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> - <li><a href="/en-US/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li> -</ul> - -<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> - -<p><em>なし。</em></p> - -<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> - -<p>この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。</p> - -<h2 id="Example" name="Example">例</h2> - -<h3 id="SVG">SVG</h3> - -<pre class="brush: html notranslate"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150"> - <defs> - <!-- solidColor is experimental. --> - <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/> - - <!-- linearGradient with a single color stop is a less elegant way to - achieve the same effect, but it works in current browsers. --> - <linearGradient id="myGradient"> - <stop offset="0" stop-color="green" /> - </linearGradient> - </defs> - - <text x="10" y="20">Circles colored with solidColor</text> - <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)" - fill="white"/> - <circle cx="50" cy="65" r="35" fill="url(#myColor)"/> - - <text x="10" y="120">Circles colored with linearGradient</text> - <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)" - fill="white"/> - <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/> -</svg> -</pre> - -<h3 id="Result" name="Result">結果</h3> - -<p>{{EmbedLiveSample("Example")}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<p>{{Compat("svg.elements.solidcolor")}}</p> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li>{{domxref("SVGSolidcolorElement")}}</li> - <li>{{cssxref("solid-color")}}</li> - <li>{{cssxref("solid-opacity")}}</li> - <li>{{SVGElement("linearGradient")}}</li> -</ul> 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/document/getelementbyid/index.html b/files/ja/web/api/document/getelementbyid/index.html index 47aad75103..6bf6b57b97 100644 --- a/files/ja/web/api/document/getelementbyid/index.html +++ b/files/ja/web/api/document/getelementbyid/index.html @@ -100,7 +100,7 @@ element.id = 'testqq'; var el = document.getElementById('testqq'); // el は null になります </pre> -<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML" title="ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL" title="ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> +<p><strong>HTML 以外の文書</strong>の場合。 DOM の実装では、どの属性が ID 類であるかを示す情報が必要です。 "id" という名前の属性は、文書の DTD で定義されていない限り ID 類とみなされません。 <code>id</code> 属性は <a href="/ja/docs/XHTML">XHTML</a>, <a href="/ja/docs/XUL">XUL</a> などの一般的な場合には ID 類として定義されています。属性が ID 類であるかどうかが分からない実装では、 <code>null</code> を返すでしょう。</p> <h2 id="Specification" name="Specification">仕様書</h2> @@ -145,5 +145,5 @@ var el = document.getElementById('testqq'); // el は null になります <ul> <li>{{domxref("Document")}}: 文書内で要素への参照を取得するために使うことができる他のメソッドやプロパティで使用するための参照。</li> <li>{{domxref("Document.querySelector()")}}: <code>'div.myclass'</code> のようなセレクターを通したクエリのためのもの。</li> - <li><a href="/ja/docs/xml/xml:id" title="ja/docs/xml/id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> + <li><a href="/ja/docs/xml/xml:id">xml:id</a> - <code>getElementById()</code> による XML 文書 (Ajax 呼び出しによって返されるものなど) の 'xml:id' の取得を可能とする便利なメソッドを持つ</li> </ul> diff --git a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html index 65524033fb..4eb86d5287 100644 --- a/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html +++ b/files/ja/web/api/document_object_model/locating_dom_elements_using_selectors/index.html @@ -46,5 +46,5 @@ translation_of: Web/API/Document_object_model/Locating_DOM_elements_using_select <li>{{domxref("Element.querySelectorAll()")}}</li> <li>{{domxref("Document.querySelector()")}}</li> <li>{{domxref("Document.querySelectorAll()")}}</li> - <li><a href="/ja/docs/Code_snippets/QuerySelector" title="ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> + <li><a href="/ja/docs/Code_snippets/QuerySelector">Code snippets for querySelector</a></li> </ul> diff --git a/files/ja/web/api/domstringlist/index.html b/files/ja/web/api/domstringlist/index.html index 27c3d8eb74..dfdf9efb5d 100644 --- a/files/ja/web/api/domstringlist/index.html +++ b/files/ja/web/api/domstringlist/index.html @@ -10,7 +10,7 @@ translation_of: Web/API/DOMStringList --- <p>{{APIRef("DOM")}}</p> -<p><a href="/ja/DOM/DOMString" title="ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p> +<p><a href="/ja/DOM/DOMString">DOMString</a> (strings) のリストを含むいくつかの API が返す型です。</p> <h2 id="Properties" name="Properties">プロパティ</h2> 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/getattributenodens/index.html b/files/ja/web/api/element/getattributenodens/index.html index f56fd71658..fb48807b05 100644 --- a/files/ja/web/api/element/getattributenodens/index.html +++ b/files/ja/web/api/element/getattributenodens/index.html @@ -28,7 +28,7 @@ translation_of: Web/API/Element/getAttributeNodeNS <h3 id=".E6.B3.A8.E8.A8.98" name=".E6.B3.A8.E8.A8.98">注記</h3> -<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode" title="ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS" title="ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> +<p><span class="comment"><code>getAttributeNodeNS</code> is more specific than <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a> in that it allows you to specify attributes that are part of a particular namespace. The corresponding setter method is <a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>.</span> <code>getAttributeNodeNS</code> は特定の名前空間の一部である属性を指定できるという点で <a href="/ja/DOM/element.getAttributeNode">getAttributeNode</a>より特殊です。対応するsetterメソッドは<a href="/ja/DOM/element.setAttributeNodeNS">setAttributeNodeNS</a>です。</p> <p>{{ DOMAttributeMethods() }}<span class="comment">== Specification ==</span></p> 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/api/history_api/working_with_the_history_api/index.html b/files/ja/web/api/history_api/working_with_the_history_api/index.html index c7b71399b2..a2fb053d73 100644 --- a/files/ja/web/api/history_api/working_with_the_history_api/index.html +++ b/files/ja/web/api/history_api/working_with_the_history_api/index.html @@ -54,7 +54,7 @@ history.pushState(stateObj, "page 2", "bar.html"); </li> </ul> -<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> +<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> <p>ある意味では、<code>pushState()</code> の呼び出しは <code>window.location = "#foo";</code> と設定するのと似ています。どちらも、現在のドキュメントに関連する別の履歴エントリの生成とアクティベートを行います。ですが <code>pushState()</code> にはいくらかの利点があります：</p> @@ -77,7 +77,7 @@ history.pushState(stateObj, "page 2", "bar.html"); <p>具体的には、何らかのユーザーのアクションを受け、現在の履歴エントリの URL または state オブジェクトを更新したい場合に <code>replaceState()</code> が役立ちます。</p> -<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm" title="ja/DOM/The structured clone algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> +<div class="note"><strong>注:</strong> Gecko 2.0 {{ geckoRelease("2.0") }} より Gecko 5.0 {{ geckoRelease("5.0") }} に於いては、渡されたオブジェクトは JSON を使用してシリアライズされます。Gecko 6.0 {{ geckoRelease("6.0") }} より、オブジェクトは <a href="/ja/DOM/The_structured_clone_algorithm">the structured clone algorithm</a> を使用してシリアライズされます。これにより多種多様なオブジェクトを安全に渡せるようになります。</div> <h3 id="replaceState_の例">replaceState() の例</h3> diff --git a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html index 23d2cd518f..5a4fded9fe 100644 --- a/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html +++ b/files/ja/web/api/html_drag_and_drop_api/multiple_items/index.html @@ -4,14 +4,14 @@ slug: Web/API/HTML_Drag_and_Drop_API/Multiple_items translation_of: Web/API/HTML_Drag_and_Drop_API/Multiple_items original_slug: DragDrop/Dragging_and_Dropping_Multiple_Items --- -<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29" title="Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> +<p>Mozillaはいくつかの非標準の機能によって、複数の項目のドラッグをサポートしています。それらの機能は<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティや<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>、<a class="internal" href="/Ja/DragDrop/DataTransfer#clearData.28.29">clearData</a>の各メソッドに酷似していますが、データの取得や変更、削除の際などに項目のインデックスを追加の引数として要求します。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>を使うと、<code>dragstart</code>イベントで複数の項目を登録することができます。これは<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドとよく似た働きをします。</p> <pre>var dt = event.dataTransfer; dt.mozSetDataAt("text/plain", "ドラッグされるデータ", 0); dt.mozSetDataAt("text/plain", "ドラッグされる2つめのデータ", 1); </pre> -<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29" title="Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> +<p>この例では2つのドラッグ項目を追加しています。最後の引数は追加する項目のインデックスを示しています。これらの項目は0番から順番に登録するべきで、最後の方（インデックスの大きなもの）から逆順に登録することはできません。また、すでにデータが登録されているインデックスを指定してもう1度データを登録すると、前に登録したデータを置き換えることができます。インデックスとして0を指定すると、<a class="internal" href="/Ja/DragDrop/DataTransfer#setData.28.29">setData</a>メソッドを呼んだのと等しく扱われます。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozClearDataAt.28.29">mozClearDataAt</a>メソッドを使って、指定した項目を削除することもできます。</p> <pre>event.dataTransfer.mozClearDataAt("text/plain", 1); </pre> <p>あるインデックスで示される項目について、最後のデータ形式の削除によって項目全体を削除すると、残りの項目が繰り上がって項目のインデックスが変わることに注意してください。例えば、</p> @@ -36,9 +36,9 @@ dt.mozClearDataAt("text/plain", 1); </pre> <p>幸いなことに、通常は項目を削除する必要がある場合は希で、それよりも、必要に応じて項目を追加するだけの場合の方がずっと多いです。</p> <p>複数の項目のドラッグが使われる場合の代表は、複数のファイルやブックマークをドラッグする時です。この場合には、適切な形式でそれらの項目を追加してください。また必須ではありませんが、それぞれの項目は常に同じ形式でデータを追加するべきです。これによりドロップ対象は、一貫したデータの受け取りを期待できます。</p> -<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29" title="Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> -<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> -<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> +<p>複数のファイルがドラッグされているかどうかを確認するには、<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを調べます。このプロパティにはドラッグされている項目の数がセットされます。もしそのドロップ対象が1つの項目のドロップだけを受け付ける場合には、ドラッグされた項目すべてを拒否することもできますし、最初の項目だけを受け取ることもできます。複数の項目の受け取りを拒否するには、dragoverイベントをキャンセルしないか、<a class="internal" href="/Ja/DragDrop/DataTransfer#effectAllowed.28.29">effectAllowed</a>プロパティに<code>none</code>を指定します。他のイベントリスナがすでにイベントをキャンセルしている場合に備えて、両方を実行しても構いません。</p> +<p>ドロップされた項目のうち最初の項目だけを扱う場合は、1つだけの項目のドラッグの場合と同様に<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使います。これは、何も追加の処理が必要ないドロップ項目を1つだけ受け取るドロップ対象のために有用です。</p> +<p>それに対して、任意のインデックスの項目をデータトランスファーから取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使います。以下の例は、ドラッグされたファイルを取得し、それらを配列に追加するものです。</p> <pre>function onDrop(event) { var files = []; @@ -47,15 +47,15 @@ dt.mozClearDataAt("text/plain", 1); files.push(dt.mozGetDataAt("application/x-moz-file", i)); } </pre> -<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29" title="Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> +<p><a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドを使って、望んでいる形式のデータが存在しているかどうかを確かめたいとも思うでしょう。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティと同様に、このメソッドは、その項目が保持しているデータの型の文字列を返します。<a class="internal" href="/Ja/DragDrop/DataTransfer#types.28.29">types</a>プロパティを取得する事は、インデックスが0の項目の型のリストを取得する事に等しいです。</p> <pre>var types = event.dataTransfer.mozTypesAt(1); </pre> <h2 id="文字列でないデータのドラッグ">文字列でないデータのドラッグ</h2> -<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file" title="Ja/DragDrop/Recommended Drag Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile" title="ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> +<p>上で解説した追加のメソッドが扱えるデータは文字列に限定されず、どんな種類のデータでも指定することができます。例えば、ファイルは<a class="internal" href="/Ja/DragDrop/Recommended_Drag_Types#file">application/x-moz-file</a>型で<a class="internal" href="/ja/nsIFile">nsIFile</a>のオブジェクトとして保持されてドラッグされます。<code>setData</code>メソッドは文字列しかサポートしておらず、 ドラッグするファイルを指定するのには利用できないため、代わりに<a class="internal" href="/Ja/DragDrop/DataTransfer#mozSetDataAt.28.29">mozSetDataAt</a>メソッドを使わなくてはなりません。</p> <pre>dt.mozSetDataAt("application/x-moz-file", file, 0); </pre> <p>複数の項目を扱う必要がない場合でも、このメソッドを使うことによって任意のオブジェクトをデータに指定できます。この場合には、インデックスとして0を指定しておきます。</p> -<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29" title="Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29" title="Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> +<p>同様に、ファイルやその他のオブジェクトを取得するには<a class="internal" href="/Ja/DragDrop/DataTransfer#mozGetDataAt.28.29">mozGetDataAt</a>メソッドを使う必要があります。もし<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使った場合は、値が文字列でない型のデータは空文字として取得されます。ただし、数値のような単純な型のデータについては文字列に変換できるため、この場合は<a class="internal" href="/Ja/DragDrop/DataTransfer#getData.28.29">getData</a>を使っても問題ありません。</p> <h2 id="複数項目のドロップの例">複数項目のドロップの例</h2> <p>以下は、ドロップされた項目のデータとその形式を一覧表示するボックスの例です。</p> <pre><html> @@ -103,7 +103,7 @@ function output(text) </body> </html> </pre> -<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault" title="ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> -<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29" title="Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29" title="Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> +<p>この例は、<a class="internal" href="/ja/DOM/event.preventDefault">preventDefault</a>メソッドによって<code>dragenter</code>イベントと<code>dragover</code>イベントを両方ともキャンセルします。これにより、要素の上でのドロップが可能になっています。</p> +<p>項目をドロップした時に、<code>dodrop</code>関数が呼ばれます。この関数は<a class="internal" href="/Ja/DragDrop/DataTransfer#mozItemCount.28.29">mozItemCount</a>プロパティを見て、いくつの項目がドロップされたのかを調べ、それらに繰り返し処理を行います。それぞれの項目について、型の一覧を得るために<a class="internal" href="/Ja/DragDrop/DataTransfer#mozTypesAt.28.29">mozTypesAt</a>メソッドが呼ばれます。この一覧の生成処理は、ドラッグに対して関連づけられたすべてのデータに対して繰り返されます。</p> <p>この例は、あるドラッグ操作が保持しているデータを確かめたい時に便利です。ただ項目をこの例のドロップ対象にドロップするだけで、ドラッグされたどの項目がどんな形式でどのようなデータを保持しているのかを見ることができます。</p> <p>{{ languages( { "en": "En/DragDrop/Dragging_and_Dropping_Multiple_Items" } ) }}</p> diff --git a/files/ja/web/api/indexeddb_api/basic_terminology/index.html b/files/ja/web/api/indexeddb_api/basic_terminology/index.html new file mode 100644 index 0000000000..e03aeb6c1d --- /dev/null +++ b/files/ja/web/api/indexeddb_api/basic_terminology/index.html @@ -0,0 +1,206 @@ +--- +title: IndexedDB の主な特徴と基本用語 +slug: Web/API/IndexedDB_API/Basic_Terminology +tags: + - Advanced + - IndexedDB + - terminology +translation_of: Web/API/IndexedDB_API/Basic_Terminology +--- +<p>{{DefaultAPISidebar("IndexedDB")}}</p> + +<div class="summary"> +<p>この記事では IndexedDB の主な特徴を説明し、IndexedDB API の理解に関連する重要な用語を紹介しています。</p> +</div> + +<p>また、以下の記事も参考になるでしょう。</p> + +<ul> + <li>APIの使用方法に関する詳細なチュートリアルについては、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>を参照してください。</li> + <li>IndexedDB API のリファレンス文書については、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> のメイン記事と、IndexedDB で使用されるオブジェクトの型を記したそのサブページを参照してください。</li> + <li>ブラウザーがバックグラウンドでデータを保存する方法の詳細については、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>を参照してください。</li> +</ul> + +<h2 id="key_characteristics">主な特徴</h2> + +<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存するための方法です。ネットワークの利用可否にかかわらず、豊富なクエリー機能を備えたウェブアプリケーションを作成できるため、オンラインでもオフラインでも動作します。IndexedDB は、大量のデータを保存するアプリケーション (貸し出し用図書館の DVD カタログなど) や、インターネットへの持続的な接続を必要としないアプリケーション (メールクライアント、ToDo リスト、メモ帳など) に有効です。</p> + +<p>IndexedDB では、「キー」に基づいてインデックス化されたオブジェクトを保存・取得することができます。データベースへの変更は、すべてトランザクション内で行われます。多くのウェブストレージ技術と同様に、IndexedDB は<a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従っています。そのため、ドメイン内の保存データにはアクセスできますが、異なるドメイン間のデータにはアクセスできません。</p> + +<p>他の種類のデータベースでの作業を前提としていると、IndexedDB での作業に戸惑うことがあるかもしれません。そのため、以下のような IndexedDB の主な特徴を覚えておくことが重要です。</p> + +<ul> + <li> + <p><strong>IndexedDB データベースは、キーと値の組を格納します。</strong>値は複雑な構造のオブジェクトで、キーはそのオブジェクトのプロパティです。オブジェクトの任意のプロパティを使用するインデックスを作成して、迅速な検索や並べ替えされた列挙を行うことができます。キーにはバイナリーオブジェクトを使用することができます。</p> + </li> + <li> + <p><strong>IndexedDBは、トランザクションデータベースモデルに基づいて構築されています</strong>。IndexedDB で行うことは、常に<a href="#gloss_transaction">トランザクション</a>のコンテキストで行われます。IndexedDB の API には、インデックス、テーブル、カーソルなどを表す多くのオブジェクトが用意されていますが、これらはそれぞれ特定のトランザクションに関連付けられています。そのため、トランザクションの外でコマンドを実行したり、カーソルを開いたりすることはできません。トランザクションには十分に定義された有効期間があるため、トランザクションが完了した後に使用しようとすると、例外が発生します。また、トランザクションは自動コミットされ、手動でコミットすることはできません。</p> + + <p>このトランザクションモデルは、ユーザーがウェブアプリケーションの 2 つのインスタンスを 2 つの異なるタブで同時に開いた場合のことを考えると、とても有用です。トランザクション操作がなければ、 2 つのインスタンスが互いの変更に干渉してしまう可能性があります。データベースのトランザクションに慣れていない方は、<a class="link-https" href="https://ja.wikipedia.org/wiki/%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B6%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3">Wikipedia のトランザクションに関する記事</a>をご覧ください。また、「定義」の章の<a href="#gloss_transaction">トランザクション</a>もご覧ください。</p> + </li> + <li> + <p><strong>IndexedDB API は、ほとんどが非同期です。</strong>API は値を返すことでデータを提供するわけではありません。コールバック関数を渡す必要があります。同期的な方法でデータベースに値を「格納」したり、データベースから値を「取り出す」ことはしません。代わりに、データベース操作を「リクエスト」します。操作が終了すると DOM イベントで通知され、そのイベントの種類によって操作が成功したか失敗したかが分かります。最初は少し複雑に聞こえるかもしれませんが、そこには健全性を保つための対策が組み込まれています。これは、<a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a> が動作する方法と大きな違いはありません。</p> + </li> + <li> + <p><strong>IndexedDB は多くのリクエストを使用します。</strong>リクエストは、前述の成功または失敗の DOM イベントを受け取るオブジェクトです。このオブジェクトには <code>onsuccess</code> と <code>onerror</code> のプロパティがあり、<code>addEventListener()</code> と <code>removeEventListener()</code> を呼び出すことができます。また、<code>readyState</code>、<code>result</code>、<code>errorCode</code> の各プロパティがあり、リクエストの状態を知ることができます。<code>result</code> プロパティは、リクエストの生成方法 (例えば <code>IDBCursor</code> インスタンスや、データベースに挿入したばかりの値のキー) に応じて、さまざまなものになるため、特に魔法のようなものです。</p> + </li> + <li> + <p><strong>IndexedDB は DOM イベントを使って、結果が利用可能になったことを通知します。</strong> DOM イベントには、必ず <code>type</code> プロパティがあります (IndexedDB では、最も一般的に <code>"success"</code> または <code>"error"</code> に設定されます)。また、DOM イベントには、イベントの目的地を示す <code>target</code> プロパティがあります。ほとんどの場合、イベントの <code>target</code> は、何らかのデータベース操作の結果として生成された <code>IDBRequest</code> オブジェクトです。成功イベントはバブルアップしませんし、キャンセルもできません。一方、エラーイベントはバブリングします、キャンセルも可能です。これは非常に重要なことで、エラーイベントはキャンセルされない限り、実行中のトランザクションを中断します。</p> + </li> + <li> + <p><strong>IndexedDB はオブジェクト指向です。</strong> IndexedDB は、行と列の集合体であるテーブルを持つリレーショナルデータベースではありません。この重要かつ根本的な違いは、アプリケーションの設計・構築方法に影響します。</p> + + <p>従来のリレーショナルデータストアでは、データの行と名前の付いたデータの列の集合体を格納するテーブルがあります。一方、IndexedDB では、データの種類に応じてオブジェクトストアを作成し、そのストアに JavaScript オブジェクトを永続化する必要があります。各オブジェクトストアには、クエリや反復処理を効率的に行うためのインデックスのコレクションを持つことができます。オブジェクト指向データベース管理システムに慣れていない方は、<a href="https://ja.wikipedia.org/wiki/%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9">Wikipedia のオブジェクトデータベースの記事</a>をお読みください。</p> + </li> + <li> + <p><strong>IndexedDB は Structured Query Language (<abbr>SQL</abbr>) を使用しません。</strong>インデックスに対するクエリーを使用してカーソルを生成し、そのカーソルを使用して結果セットを反復処理します。NoSQL システムについてよく知らない方は、<a href="https://ja.wikipedia.org/wiki/NoSQL">Wikipedia の NoSQL に関する記事</a>をご覧ください。</p> + </li> + <li> + <p><a name="origin"><strong>IndexedDB は、同一オリジンポリシーを採用しています</strong></a>。オリジンとは、スクリプトを実行している文書の URL のドメイン、アプリケーション層のプロトコル、およびポートのことです。各オリジンには、それぞれ関連するデータベースのセットがあります。すべてのデータベースには、オリジン内で識別するための名前があります。</p> + + <p>IndexedDB にはセキュリティ境界が課せられており、アプリケーションが異なるオリジンのデータにアクセスすることを防ぎます。例えば、<a href="https://www.example.com/app/">http://www.example.com/app/</a> のアプリやページは、<a href="https://www.example.com/dir/">http://www.example.com/dir/</a> からはオリジンが同じであるためデータを取得することができますが、<a href="https://www.example.com:8080/dir/">http://www.example.com:8080/dir/</a> (ポートが異なる) や <a class="link-https" href="https://www.example.com/dir/">https://www.example.com/dir/</a> (プロトコルが異なる) からは、オリジンが異なるためデータを取得することはできません。</p> + + <div class="note"><strong>メモ</strong>: サードパーティのウィンドウコンテンツ (例: {{htmlelement("iframe")}} コンテンツ) は、ブラウザーがサードパーティのクッキーを受け入れないように設定されていない限り、埋め込まれたオリジンの IndexedDB ストアにアクセスすることができます ({{bug("1147821")}} を参照)。</div> + </li> +</ul> + +<h3 id="limitations">制限事項</h3> + +<p>IndexedDB は、クライアントサイドのストレージを必要とするほとんどのケースをカバーするように設計されています。しかし、以下のようないくつかのケースには対応していません。</p> + +<ul> + <li>国際化に対応した並べ替え。すべての言語で文字列が同じように並べ替えされるわけではないので、国際化に対応した並べ替えには対応していません。データベースは特定の国際化に対応した順序でデータを保存することはできませんが、データベースから読み取ったデータを自分で並べ替えすることはできます。ただし、Firefox 43 以降、実験的なフラグを有効にすることで、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB#locale-aware_sorting">ロケールを考慮した並べ替え</a>が可能になっています (現在は Firefox のみ)。</li> + <li>同期。この API は、サーバー側のデータベースとの同期を行うようには設計されていません。クライアント側の indexedDB データベースとサーバー側のデータベースを同期させるコードを書く必要があります。</li> + <li>全文検索。この API には、 SQL の <code>LIKE</code> 演算子に相当するものがありません。</li> +</ul> + +<p>また、以下のような条件でブラウザーがデータベースを消去することがあるので注意が必要です。</p> + +<ul> + <li>ユーザーが消去を要求した場合。多くのブラウザーには、Cookie、ブックマーク、保存されたパスワード、IndexedDB データなど、特定のウェブサイトに保存されたすべてのデータを消去できる設定があります。</li> + <li>ブラウザーがプライベートブラウジングモードになっている場合。一部のブラウザーには、「プライベートブラウジング」 (Firefox) または「シークレット」 (Chrome) モードがあります。セッションの終了時に、ブラウザーはデータベースを消去します。</li> + <li>ディスクまたはクォータの容量の上限に達した場合。</li> + <li>データが破損した場合。</li> + <li>この機能に対して互換性のない変更が行われた場合。</li> +</ul> + +<p>正確な状況やブラウザーの機能は時間とともに変化しますが、ブラウザーベンダーの一般的な考え方は、可能な限りデータを残すために最善の努力をするというものです。</p> + +<h2 id="core_terminology">主な用語</h2> + +<p>この節では、IndexedDB API の理解に関連する主な用語を定義および説明します。</p> + +<h3 id="database">データベース</h3> + +<dl> + <dt><a name="gloss_database">データベース (database)</a></dt> + <dd>ふつう 1 つ以上の<a href="#gloss_object_store"><em>オブジェクトストア</em></a>で構成される、情報の格納庫です。それぞれのデータベースには以下のものがあります。 + <ul> + <li>名前。これは、特定のオリジン内でデータベースを識別し、その生涯を通じて一定です。名前は任意の文字列値 (空文字列を含む) とすることができます。</li> + <li> + <p>現在の<a href="#gloss_version"><em>バージョン</em></a>。データベースが最初に作成されたとき、特に指定がなければそのバージョンは整数の 1 です。各データベースは、常に 1 つのバージョンしか持つことができません。</p> + </li> + </ul> + </dd> + <dt><a name="durable">永続性 (durable)</a></dt> + <dd> + <p>Firefox では、IndexedDB は以前は<strong>永続性</strong>がありました。つまり、読み書きトランザクションにおいて、すべてのデータがディスクにフラッシュされたことが保証されたときにのみ、{{domxref("IDBTransaction.oncomplete")}} が発行されていました。</p> + + <p>Firefox 40 では、IndexedDB トランザクションは、パフォーマンスを向上させるために、他の IndexedDB に対応するブラウザーと同様に永続性の保証を緩和しています ({{Bug("1112702")}} を参照)。この場合、 {{Event("complete")}} イベントは、OS がデータの書き込みを指示した後に発生しますが、そのデータが実際にディスクにフラッシュされる前に発生する可能性もあります。そのため、イベントは以前よりも早く配信されるかもしれませんが、データがディスクにフラッシュされる前に OS がクラッシュしたり、システムの電源が切れたりすると、トランザクション全体が失われてしまう可能性がわずかながらあります。このような致命的な事象は稀であるため、ほとんどの人はこれ以上気にする必要はありません。</p> + + <div class="note"> + <p><strong>メモ</strong>: Firefox では、何らかの理由で永続性を確保したい場合 (たとえば、後で再計算できない重要なデータを保存している場合)、実験的な (標準外の) <code>readwriteflush</code> モードを使用してトランザクションを作成することで、<code>complete</code> イベントを配信する前にトランザクションをディスクに強制的にフラッシュさせることができます({{domxref("IDBDatabase.transaction")}} を参照)。これは現在実験的なものであり、<code>about:config</code> で <code>dom.indexedDB.experimental</code> 設定項目が <code>true</code> に設定されている場合にのみ使用できます。</p> + </div> + </dd> + <dt><a name="gloss_object_store">オブジェクトストア (object store)</a></dt> + <dd> + <p>データベースにデータを保存する仕組みです。オブジェクトストアはレコードを持続的に保持しており、これはキーと値の組です。オブジェクトストア内のレコードは、<em><a href="#gloss_key">キー</a></em>によって昇順に整列して保存されています。</p> + + <p>すべてのオブジェクトストアには、そのデータベース内で一意となる名前が必要です。オブジェクトストアは、オプションで<em><a href="#gloss_keygenerator">キージェネレーター</a></em>と<em><a href="#gloss_keypath">キーパス</a></em>を持つことができます。オブジェクトストアにキーパスがある場合は<em><a href="#gloss_inline_key">インラインキー</a></em>、ない場合は<em><a href="#gloss_outofline_key">アウトオブラインキー</a></em>が使用されます。</p> + + <p>オブジェクトストアのリファレンス文書は、 {{domxref("IDBObjectStore")}} を参照してください。</p> + </dd> + <dt><a name="gloss_version">バージョン (version)</a></dt> + <dd>始めにデータベースを生成したとき、バージョンは整数の 1 になります。それぞれのデータベースは、一度に 1 つのバージョンを持ちます。一度に複数のバージョンを持つことはできません。バージョンを変更する唯一の方法は、現在のバージョンより大きなバージョンでデータベースを開くことです。</dd> + <dt><a name="gloss_database_connection">データベース接続 (database connection)</a></dt> + <dd><em><a href="#gloss_database">データベース</a></em>を開くことで生成される操作です。データベースは同時に複数の接続を持つことができます。</dd> + <dt><a name="gloss_transaction">トランザクション (transaction)</a></dt> + <dd> + <p>特定のデータベースで行う、原子性を持つデータアクセスやデータ変更の操作のセットです。これは、データベース内のデータと対話する手段です。実際は、データベース内のデータの読み取りや変更はトランザクション内で実施しなければなりません。</p> + + <p>書き込みトランザクションの<a href="#scope"><em>スコープ</em></a>が重ならない限り、ひとつのデータベース接続で同時に複数のアクティブなトランザクションが存在できます。トランザクションのスコープは生成時に定義され、トランザクションがどのオブジェクトストアと対話できるかや、トランザクションの持続期間にわたって保持し続けるかを示します。よって例えば、データベース接続で <code>flyingMonkey</code> オブジェクトストアのみ対象とするスコープを持つ書き込みトランザクションがすでに存在するとき、<code>unicornCentaur</code> オブジェクトストアや <code>unicornPegasus</code> オブジェクトストアをスコープで持つ別のトランザクションを開始できます。読み取りトランザクションは、スコープが重なっていても複数実行できます。</p> + + <p>トランザクションは持続期間が短いものを除き、長時間のトランザクションがストレージ資源をロックする状況から解放するために、ブラウザーが終了させることができます。トランザクションは中止させることができ、トランザクションによるデータベースの変更箇所はロールバックされます。また、開始するトランザクションや中止するトランザクションを待つ必要はありません。</p> + + <p>トランザクションには <code>readwrite</code>、<code>readonly</code>、<code>versionchange</code> の 3 つのモードがあります。オブジェクトストアやインデックスの生成および削除は、<a href="/ja/docs/Web/API/IDBDatabase/versionchange_event"><code>versionchange</code></a> トランザクションを使用する場合に限り実行できます。トランザクションのタイプについて詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> のリファレンスをご覧ください。</p> + + <p>すべての操作はトランザクション内で発生しますので、トランザクションは IndexedDB の重要な概念です。トランザクションについて、特にバージョン付けとの関係については、{{domxref("IDBTransaction")}} および関連文書をご覧ください。ここにリファレンス文書もあります。</p> + </dd> + <dt><a name="gloss_request">リクエスト (request)</a></dt> + <dd>データベースの読み書きを実施する操作です。すべてのリクエストは、ひとつの読み取りまたは書き込みの操作を表します。</dd> + <dt><a name="gloss_index">インデックス (index)</a></dt> + <dd> + <p>インデックスは<em>参照先オブジェクトストア (referenced object store)</em> から呼び出されて、別のオブジェクトストアのレコードを検索するための特別なオブジェクトストアです。インデックスは持続的なキーと値のストレージであり、インデックスのレコードの値は、参照先オブジェクトストアのレコードのキーです。インデックス内のレコードは、参照先オブジェクトストアでレコードが挿入、更新、削除されるたびに、自動的に収集されます。インデックス内の各レコードは参照先オブジェクトストア内のレコードをひとつだけ示すことができますが、複数のインデックスが同一のオブジェクトストアを参照することもできます。オブジェクトストアが変更されると、そのオブジェクトストアを参照するすべてのインデックスが自動的に更新されます。</p> + + <p>代わりに、<a href="#gloss_key">キー</a>を使用してオブジェクトストア内のレコードを検索することもできます。</p> + + <p>インデックスの使用法について詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB#using_an_index" title="IndexedDB/Using_IndexedDB#Using_an_index">IndexedDB を使用する</a>をご覧ください。インデックスのリファレンス文書として、<a href="/ja/docs/Web/API/IDBKeyRange" rel="internal">IDBKeyRange</a> をご覧ください。</p> + </dd> +</dl> + +<h3 id="key">キーと値</h3> + +<dl> + <dt><a name="gloss_key">キー (key)</a></dt> + <dd> + <p>オブジェクトストアに保存された値は、このデータ値によって編成および取り出しされます。オブジェクトストアは<em><a href="#gloss_keygenerator">キージェネレーター</a></em>、<em><a href="#gloss_keypath">キーパス</a></em>、明示的に指定した値の、3 種類の生成源のいずれかからキーを得られます。キーは、自身の前にあるものより大きな数値を持つデータ型であることが必要です。オブジェクトストア内の各レコードはオブジェクトストア内で一意のキーを持たなければならず、オブジェクトストア内で複数のレコードが同じキーを持つことはできません。</p> + + <p>キーは <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">文字列</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">date</a>、浮動小数点数値、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array">配列</a>のいずれかの型を使用できます。配列では、キーは空の値から無限大までの範囲を使用できます。また、配列の中に配列を含めることができます。文字列または整数値のキーしか使用できないという条件はありません。</p> + + <p>代わりに、<em><a href="#gloss_index">インデックス</a>を使用してオブジェクトストア内のレコードを検索することもできます。</em></p> + </dd> + <dt><a name="gloss_keygenerator">キージェネレーター (key generator)</a></dt> + <dd>指定した順序で新たなキーを生成する仕組みです。オブジェクトストアがキージェネレーターを持たない場合は、保存するレコードのキーをアプリケーションが提供しなければなりません。ジェネレーターはストア間で共有しません。これはむしろブラウザーの実装の細部であり、Web 開発において実際にはキージェネレーターの生成やアクセスは行いません。</dd> + <dt><a name="gloss_inline_key">インラインキー (in-line key)</a></dt> + <dd>保存される値の一部として保存されるキーです。これは<em>キーパス</em>を使用して見つけます。インラインキーは、ジェネレーターを使用して生成できます。キーが生成されると、キーパスを使用してキーを値の中に保存したり、キーとして使用したりすることができます。</dd> + <dt><a name="gloss_outofline_key">アウトオブラインキー (out-of-line key)</a></dt> + <dd>保存する値とは別に保存されるキーです。</dd> + <dt><a name="gloss_keypath">キーパス (key path)</a></dt> + <dd>オブジェクトストアやインデックスのどこからブラウザーがキーを取り出すべきかを定義します。有効なキーパスは空文字列、JavaScript の識別子、ピリオドで区切られた複数の JavaScript の識別子、あるいはそれらを収めた配列のいずれかを含むことができます。空白を含むことはできません。</dd> + <dt><a name="gloss_value">値 (value)</a></dt> + <dd> + <p>それぞれのレコードは値を持っており、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Boolean" rel="internal">論理値</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Number" rel="internal">数値</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/String">文字列</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">date</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Object">オブジェクト</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Array" rel="internal">配列</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp" rel="internal">正規表現</a>、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/undefined">undefined</a>、null を含む、JavaScript で表現可能なものをどれでも含むことができます。</p> + + <p>オブジェクトまたは配列を保存する場合は、それらのプロパティや値もまた、有効な値をどれでも持つことができます。</p> + + <p>また、<a href="/ja/docs/Web/API/Blob">Blob</a> やファイルも保存可能です。<a href="https://dvcs.w3.org/hg/IndexedDB/raw-file/tip/Overview.html">仕様書</a> をご覧ください。</p> + </dd> +</dl> + +<h3 id="range">レンジとスコープ</h3> + +<dl> + <dt id="scope"><a id="gloss_scope" name="gloss_scope">スコープ (scope)</a></dt> + <dd>トランザクションの適用先であるオブジェクトストアやインデックスのセットです。読み取りのみのトランザクションのスコープは、同時に重ね合ったり実行することができます。一方、書き込みトランザクションのスコープは重ね合うことができません。同時に同一のスコープで複数のトランザクションを開始することはできますが、それらはキューに収められ、順番に実行されます。</dd> + <dt id="cursor"><a id="gloss_cursor">カーソル (cursor)</a></dt> + <dd><em>キーレンジ</em>に属する複数のレコードにわたって反復処理を行うための仕組みです。カーソルは、反復処理を行うインデックスやオブジェクトストアがどれかを示す source を持ちます。またレンジ内の位置や、レコードキーの順序について増加方向に移動しているか減少方向に移動しているかの情報も持ちます。カーソルのリファレンス文書として、{{domxref("IDBCursor")}} をご覧ください。</dd> + <dt id="key_range"><a id="gloss_keyrange">キーレンジ (key range)</a></dt> + <dd> + <p>キーとして使用する、何らかのデータ型の連続的な区間です。キーまたはキーレンジを使用して、オブジェクトストアやインデックスからレコードを取り出すことができます。下限または上限を使用して、レンジを制限またはフィルターリングできます。例えばキーが x から y の間であるすべての値に対して、反復処理を行うことができます。</p> + + <p>キーレンジのリファレンス文書として、{{domxref("IDBKeyRange")}} をご覧ください。</p> + </dd> +</dl> + +<h2 id="next">次のステップ</h2> + +<p>IndexedDB の主な特徴と主要な用語を理解できたら、より具体的な作業に入ることができます。API の使い方のチュートリアルについては、<a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>をご覧ください。</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li><a href="https://www.w3.org/TR/IndexedDB/">Indexed Database API 仕様書</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API リファレンス</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a></li> + <li><a href="https://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> +</ul> diff --git a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html index 47c47bad45..0db54a15b6 100644 --- a/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html +++ b/files/ja/web/api/indexeddb_api/browser_storage_limits_and_eviction_criteria/index.html @@ -16,12 +16,12 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter <p class="summary">クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術は何種類かがあります。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。この記事では、必要なローカルストレージの容量を確保するために、いつどのローカルコンテンツを破棄するのかをどうやって特定するのかを説明します。</p> <div class="note"> -<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーでおおむね正確ですが、既知の詳細情報も記載しています。 Opera および Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p> +<p><strong>メモ</strong>: 以下の情報はほとんどの最新ブラウザーではおおむね正確ですが、ブラウザー固有の注意事項も知られています。 Opera と Chrome は、すべての場合において同じ動作になるでしょう。 <a href="http://www.opera.com/mobile/mini">Opera Mini</a> (Presto ベースで、サーバー側でレンダリングする) は、クライアントにデータを保存しません。</p> </div> -<h2 id="What_technologies_use_browser_data_storage" name="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2> +<h2 id="What_technologies_use_browser_data_storage">ブラウザーのデータストレージを使用する技術は何か?</h2> -<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではそれらの技術を "クォータクライアント" と呼びます。</p> +<p>Firefox では以下の技術が、必要なデータを保存するためにブラウザーのデータストレージを使用します。ここではこれらの技術を「クォータクライアント」と呼びます。</p> <ul> <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a></li> @@ -31,45 +31,45 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </ul> <div class="note"> -<p><strong>メモ</strong>: Firefox では、 <a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> もすぐに同じストレージ管理ツールとして使えるようになり、それはこの文書で記述します。</p> +<p><strong>メモ</strong>: Firefox では、<a href="/ja/docs/Web/API/Web_Storage_API">ウェブストレージ</a>もまもなく同じストレージ管理ツールを使い始めます。それはこの文書で記述します。</p> </div> <div class="note"> <p><strong>メモ</strong>: プライベートブラウジングモードは、大半のデータストレージに対応していません。ローカルストレージのデータと Cookie は保存されますが、短命です。 — 最後のプライベートブラウジングウィンドウを閉じた時にデータは消去されます。</p> </div> -<p>生成元の "最終アクセス日時" は、これらのいずれかによってアクティブ化/非アクティブ化される origin eviction によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p> +<p>オリジンの「最終アクセス日時」はこれらのうちの何れかがアクティブ化/非アクティブ化されたときに更新されます。オリジン立ち退き (origin eviction) によって、すべてのクォータクライアントでデータ削除が行われたときに更新されます。</p> -<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_System_API">File System API</a> のクォータ管理を制御しています。</p> +<p>Chrome/Opera では、 Quota Management API が <a href="/ja/docs/Web/HTML/Using_the_application_cache">AppCache</a>, <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a>, WebSQL, <a href="/ja/docs/Web/API/File_and_Directory_Entries_API">File System API</a> のクォータ管理を制御しています。</p> -<h2 id="Different_types_of_data_storage" name="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2> +<h2 id="Different_types_of_data_storage">さまざまな種類のデータストレージ</h2> <p>同じブラウザー内で同じ保存方法を使用していても、解釈されるデータストレージの種類はさまざまです。この章では、さまざまなブラウザーで見つけられる多様なストレージについて説明します。</p> <p>ストレージは 2 種類に分けられます。</p> <ul> - <li>永続的: 長期間にわたって保持されることを意図するデータです。これはユーザーが決断した場合にのみ削除されます (例えば Firefox では、各ページのページ情報ダイアログに "ストレージを消去" ボタンがあります)。</li> - <li>一時的: 長期間にわたって維持する必要がないデータです。ストレージの容量制限に達すると、もっとも過去に使用されたものから削除されます ({{anch("LRU policy", "LRU ポリシー")}})。</li> + <li>永続的なもの。長期間保存されることを意図したデータです。これは、ユーザーが選択した場合にのみ削除されます (たとえば、Firefox では、<em>設定</em>に進み、<em>プライバシーとセキュリティ > Cookie とサイトデータ</em>のオプションを使用することで、すべての保存データを削除するか、または選択したオリジンからの保存データのみを削除するかを選択できます)。</li> + <li>一時的なもの。長期間にわたって維持する必要がないデータです。{{anch("Storage limits", "ストレージの容量制限")}}に達すると、 {{anch("LRU policy", "LRU ポリシー")}}によりもっとも古く使用されたものから削除されます。</li> </ul> <p>Firefox では、永続的なストレージが使用されると、ユーザーにはデータが永続的になることを警告するポップアップが表示され、それが良いかどうかを尋ねます。一時的データストレージは明示的にユーザーにプロンプトを表示しません。</p> -<p>既定では、一時的なストレージがほとんどの使用環境 (例えば、標準的な Web アプリ) で使用され、永続的なストレージはインストールされたアプリ (例えば、Firefox OS やデスクトップ版 Firefox にインストールした Firefox アプリ、および Chrome アプリ) で使用されます。</p> +<p>ストレージは既定では一時的です。開発者は <a href="/ja/docs/Web/API/Storage_API">Storage API</a> で利用できる {{domxref("StorageManager.persist()")}} メソッドを使用して永続的なストレージにすることができます。</p> -<h2 id="Where_is_the_data_stored" name="Where_is_the_data_stored">データの保存先は?</h2> +<h2 id="Where_is_the_data_stored">データの保存先は?</h2> -<p>それぞれのストレージタイプが別々のリポジトリに相当しており、ユーザーの Firefox プロファイル内のディレクトリーとは以下のように対応づけられます (ほかのブラウザーでは、若干異なるでしょう):</p> +<p>それぞれのストレージ種別は、個別のリポジトリーーを表します。以下は、ユーザーの Firefox プロファイル下のディレクトリにおける実際のマッピングです (他のブラウザーでは若干異なる場合があります)。</p> <ul> - <li><code><profile>/storage</code> — クォータマネージャ (後述) に管理されている、ストレージの主要なトップレベルディレクトリーです。</li> - <li><code><profile>/storage/permanent</code> — 永続的なデータストレージのリポジトリです。</li> - <li><code><profile>/storage/temporary</code> — 一時的なデータストレージのリポジトリです。</li> - <li><code><profile>/storage/default</code> — 既定のデータストレージのリポジトリです。</li> + <li><code><profile>/storage</code> — クォータマネージャーー (後述) に管理されている、ストレージの主要な最上位ディレクトリーです。</li> + <li><code><profile>/storage/permanent</code> — 永続的なデータストレージのリポジトリーです。</li> + <li><code><profile>/storage/temporary</code> — 一時的なデータストレージのリポジトリーです。</li> + <li><code><profile>/storage/default</code> — 既定のデータストレージのリポジトリーです。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的なタイプのデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは <profile>/storage/default 以下に保存されます。</p> +<p><strong>メモ</strong>: <a href="/ja/docs/Web/API/Storage_API">Storage API</a> の導入後は、"permanent" フォルダーは廃止されると考えられます。"permanent" フォルダーは IndexedDB の永続的な種類のデータベースのみ保存します。ボックスモードが "best-effort" や "persistent" であっても、データは <profile>/storage/default 以下に保存されます。</p> </div> <div class="note"> @@ -81,52 +81,52 @@ translation_of: Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criter </div> <div class="note"> -<p><strong>メモ</strong>: ユーザーが <code><profile>/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化が失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p> +<p><strong>メモ</strong>: ユーザーが <code><profile>/storage</code> の配下に、独自のディレクトリーやファイルを作成すべきではありません。このようなことを行うと、ストレージの初期化に失敗します。例えば、{{domxref("IDBFactory.open()", "open()")}} でエラーイベントが発生します。</p> </div> -<h2 id="Storage_limits" name="Storage_limits">ストレージの制限</h2> +<h2 id="Storage_limits">ストレージの制限</h2> -<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャと飛ばれる内部のブラウザーツールが生成元ごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p> +<p>ブラウザーのストレージの最大容量は動的であり、ハードディスクドライブのサイズに応じて変わります。<strong>グローバルリミット</strong>はディスクの空き量量の 50% に決められます。Firefox では、クォータマネージャーと飛ばれる内部のブラウザーツールがオリジンごとにどれだけディスク容量を使用しているかを絶えず注視しており、必要に応じてデータを削除します。</p> -<p>従ってハードディスクドライブが 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると <strong>origin eviction</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、生成元全体に相当するデータを削除します。生成元内の一部分を削除するような縮小法はありません。生成元内のひとつのデータベースだけ削除すると、矛盾の問題が発生するおそれがあります。</p> +<p>従ってハードディスクドライブの空き容量が 500GB であれば、ブラウザーの合計ストレージサイズは 250GB になります。上限に達すると<strong>オリジン立ち退き (origin eviction)</strong> と呼ばれる処理を実行して、ストレージの総量が再び上限を下回るまで、オリジン全体に相当するデータを削除します。オリジン内の一部分を削除するような縮小法はありません。オリジン内のデータベースをひとつだけ削除すると、矛盾が発生するおそれがあります。</p> -<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれの生成元は、グループ (生成元のグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通り:</p> +<p>また、<strong>グループリミット</strong>というもうひとつの制限もあります。これは、グローバルリミットの 20% として定義されます。それぞれのオリジンは、グループ (オリジンのグループ) の一部です。グループは、eTLD+1 ドメインごとに 1 つ作られます。例えば次の通りです。</p> <ul> - <li><code>mozilla.org</code> — グループ 1、生成元 1</li> - <li><code>www.mozilla.org</code> — グループ 1、生成元 2</li> - <li><code>joe.blogs.mozilla.org</code> — グループ 1、生成元 3</li> - <li><code>firefox.com</code> — グループ 2、生成元 4</li> + <li><code>mozilla.org</code> — グループ 1、オリジン 1</li> + <li><code>www.mozilla.org</code> — グループ 1、オリジン 2</li> + <li><code>joe.blogs.mozilla.org</code> — グループ 1、オリジン 3</li> + <li><code>firefox.com</code> — グループ 2、オリジン 4</li> </ul> <p>このグループでは <code>mozilla.org</code>、<code>www.mozilla.org</code>、<code>joe.blogs.mozilla.org</code> が、合わせてグローバルリミットの 20% を上限としてストレージを使用できます。<code>firefox.com</code> は、別に 20% の上限を持ちます。</p> -<p>これら 2 種類の制限は、制限に達したときの動作が異なります:</p> +<p>これら 2 種類の制限は、制限に達したときの動作が異なります。</p> <ul> - <li>グループリミットは "ハードリミット" とも呼ばれます。 origin eviction を発生させません。</li> - <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので "ソフトリミット" です。</li> + <li>グループリミットは「ハードリミット」とも呼ばれます。オリジン立ち退きを発生させません。</li> + <li>グローバルリミットは、いくらかの領域が解放されて処理を継続できる可能性がありますので「ソフトリミット」です。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当に低メモリな状況では、グループリミットも 8MB となります。</p> +<p><strong>メモ</strong>: グループリミットは、上記で触れた最小のグループリミットにかかわらず、グローバルリミットより大きくすることはできません。グローバルリミットが 8MB といった本当にメモリーが少ない状況では、グループリミットも 8MB となります。</p> </div> <div class="note"> -<p><strong>メモ</strong>: グループリミットに達したとき、あるいは origin eviction で十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p> +<p><strong>メモ</strong>: グループリミットに達したとき、あるいはオリジン立ち退きで十分な空き容量を確保できないときは、ブラウザーで <code>QuotaExceededError</code> が発生します。</p> </div> <div class="note"> <p><strong>メモ</strong>: Chrome では、ソフトおよびハードのストレージのクォータの限界が <strong>M66</strong> から変更されました。詳しい情報は<a href="https://chromium.googlesource.com/chromium/src/+/refs/heads/master/storage/browser/quota/quota_settings.cc#68">こちら</a>にあります。</p> </div> -<h2 id="LRU_policy" name="LRU_policy">LRU ポリシー</h2> +<h2 id="LRU_policy">LRU ポリシー</h2> -<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用された生成元のデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p> +<p>使用可能なディスク領域がすべて埋まったときは、クォータマネージャーーが LRU ポリシーに基づいてデータの削除処理を始めます。もっとも過去に使用されたオリジンのデータが始めに削除され、上限に達しなくなるなるまで削除を繰り返します。</p> -<p>一時的なストレージを使用して、生成元ごとに "最終アクセス日時" を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) 生成元をすべて発見しようとします。これらは、"最終アクセス日時" によって整列されます。 origin eviction を発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用された生成元を削除し続けます。</p> +<p>一時的なストレージを使用して、オリジンごとに「最終アクセス日時」を記録しています。一時的なストレージがグローバルリミットに達する (後に上限をさらに超える) と、現在使用していない (すなわち、データストアを開き続けているタブやアプリがない) オリジンをすべて発見しようとします。これらは、「最終アクセス日時」によって整列されます。オリジン立ち退きを発生させたリクエストを満たすのに十分な領域を確保するまで、もっとも過去に使用されたオリジンを削除し続けます。</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> <li><a href="http://www.html5rocks.com/en/tutorials/offline/quota-research/">Working with quota on mobile browsers</a>, by<a href="http://blog.agektmr.com" title="Eiji Kitamura"> Eiji Kitamura.</a> モバイルブラウザーのクライアント側ストレージについて詳しく分析した記事。</li> diff --git a/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html new file mode 100644 index 0000000000..ac21ce3e45 --- /dev/null +++ b/files/ja/web/api/indexeddb_api/checking_when_a_deadline_is_due/index.html @@ -0,0 +1,213 @@ +--- +title: 期限の確認 +slug: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due +tags: + - Apps + - Date + - Example + - Guide + - IndexedDB + - deadline +translation_of: Web/API/IndexedDB_API/Checking_when_a_deadline_is_due +--- +<div>{{DefaultAPISidebar("IndexedDB")}}</div><div class="summary"> +<p>この記事では、 IndexedDB で保存された期限と現在の日時を照合する複雑な例を見てみましょう。ここでの主な課題は、保存されている期限情報 (月、時、日など) を、<a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a> オブジェクトから取得した現在の日時と照合することです。</p> +</div> + +<img alt="サンプルアプリのスクリーンショット。赤いメインタイトルの「To do app」、テスト用の To Do 項目、ユーザーが新しいタスクを入力するための赤いフォーム。" src="to-do-app.png"> + +<p>この記事で紹介するアプリケーションの例は、 <strong>To-do リスト通知</strong>です。これは、タスクのタイトルと期限を <a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB</a> に格納し、期限になったときに <a href="/ja/docs/Web/API/Notification">Notification</a> および <a href="/ja/docs/Web/API/Vibration_API">Vibration</a> API を使ってユーザーに通知を行う、シンプルな To-do リストアプリケーションです。 <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do リスト通知アプリは GitHub ダウンロード</a>してソースコードをいじったり、<a href="https://mdn.github.io/to-do-notifications/">アプリの動作をライブで閲覧</a>したりすることができます。</p> + +<h2 id="The_basic_problem">基本的な問題点</h2> + +<p>この ToDo アプリでは、まず時間と日付の情報を、機械が読め、表示されたときに人間が理解できる形式で記録し、次にそれぞれの時間と日付が現在の時点で発生しているかどうかをチェックしたいと考えました。基本的には、現在の時刻と日付を確認し、保存されている各イベントの締め切りが現在の時刻と日付に一致するかどうかを確認します。もし一致していれば、ユーザーに何らかの通知をしたいと考えています。</p> + +<p>2 つの {{jsxref("Global_Objects/Date", "Date")}} オブジェクトを比較するだけなら簡単ですが、もちろん人間は JavaScript が理解できるような形式で期限を入力したいわけではありません。人間が読むことのできる日付はかなり違っていて、いくつもの異なる表現があります。</p> + +<h3 id="Recording_the_date_information">日付情報の記録</h3> + +<p>モバイル端末での合理的な使い勝手を提供するために、そして曖昧さを減らすために、 HTML フォームを作成することにしました。</p> + +<img alt="この ToDo アプリのフォームで、タスクのタイトルを入力するフィールドと、期限の年、月、日、時、分の値が入っています。" src="to-do-app-form2.png"> + +<ul> + <li>ToDo リストのタイトルを入力するためのテキスト入力です。これはユーザーの入力作業の中で最も避けられないものです。</li> + <li>期限の「時」と「分」を入力するための数値入力。 <code>type="number"</code> に対応しているブラウザーでは、小さな上下矢印の数字ピッカーが表示されます。モバイルプラットフォームでは、データを入力するためのテンキーが用意されていることが多く、これは便利です。他のプラットフォームでは、標準的なテキスト入力になりますが、これは問題ありません。</li> + <li>期限の日、月、年を入力するための {{HTMLElement("select")}} 要素。これらの値は、ユーザーにとって最も曖昧な入力となるため (7, sunday, sun? 04, 4, April, Apr? 2013, '13, 13?) 日は数値で、月は月名で、年は 4 桁の年号で記録されます。</li> +</ul> + +<p>フォームの送信ボタンが押されると、 <code>addData()</code> 関数が実行され、次のように始まります。</p> + +<pre class="brush: js">function addData(e) { + e.preventDefault(); + + if(title.value == '' || hours.value == null || minutes.value == null || day.value == '' || month.value == '' || year.value == null) { + note.innerHTML += '<li>Data not submitted — form incomplete.</li>'; + return; + } +</pre> + +<p>この部分では、フォームのフィールドにすべての情報が入力されているかどうかを確認します。記入されていない場合は、開発者通知ペイン (アプリの UI の左下を参照) にメッセージを表示して、何が起こっているのかをユーザーに伝え、機能を終了します。このステップは、主に HTML フォームの検証に対応していないブラウザーのためのものです (検証に対応しているブラウザーでは、 HTML で required 属性を使用して検証を強制しています)。</p> + +<pre class="brush: js"> else { + var newItem = [ + { + taskTitle: title.value, + hours : hours.value, + minutes : minutes.value, + day : day.value, + month : month.value, + year : year.value, + notified : "no" + } + ]; + + // open a read/write db transaction, ready for adding the data + var transaction = db.transaction(["toDoList"], "readwrite"); + + // report on the success of opening the transaction + transaction.oncomplete = function(event) { + note.innerHTML += '<li>Transaction opened for task addition.</li>'; + }; + + transaction.onerror = function(event) { + note.innerHTML += '<li>Transaction not opened due to error. Duplicate items not allowed.</li>'; + }; + + // create an object store on the transaction + var objectStore = transaction.objectStore("toDoList"); + + // add our newItem object to the object store + var request = objectStore.add(newItem[0]); </pre> + +<p>この部分では、データベースへの挿入に必要な形式でデータを保存する <code>newItem</code> というオブジェクトを作成します。次の数行では、データベーストランザクションを開き、これが成功したか失敗したかをユーザーに通知するメッセージを提供しています。そして、新しい項目が追加される <code>objectStore</code> が生成されます。データオブジェクトの <code>notified</code> プロパティは、 To-do リストの項目の期限がまだ来ておらず、通知されていないことを示しています。これについては後ほど説明します。</p> + +<div class="note"> +<p><strong>メモ:</strong> 変数 <code>db</code> には IndexedDB のデータベースインスタンスへの参照が格納されています。この変数の様々なプロパティを使用してデータを操作することができます。</p> +</div> + +<pre class="brush: js"> + request.onsuccess = function(event) { + + note.innerHTML += '<li>New item added to database.</li>'; + + title.value = ''; + hours.value = null; + minutes.value = null; + day.value = 01; + month.value = 'January'; + year.value = 2020; + }; + }</pre> + +<p>次の部分では、新しい項目の追加が成功したことを示すログメッセージを作成し、次のタスクが入力できるようにフォームをリセットします。</p> + +<pre class="brush: js"> + // update the display of data to show the newly added item, by running displayData() again. + displayData(); +};</pre> + +<p>最後に <code>displayData()</code> 関数を実行して、アプリ内のデータの表示を更新し、先ほど入力された新しいタスクを表示します。</p> + +<h3 id="Checking_whether_a_deadline_has_been_reached">期限に達したかどうかの確認</h3> + +<p>この時点でデータはデータベースに入っていますが、今度は期限に達しているかどうかをチェックしたいと思います。これを行うのが <code>checkDeadlines()</code> 関数です。</p> + +<pre class="brush: js">function checkDeadlines() { + var now = new Date();</pre> + +<p>まず、空の <code>Date</code> オブジェクトを作成して、現在の日付と時刻を取得します。簡単でしょう？ここからは少し複雑な話になります。</p> + +<pre class="brush: js"> var minuteCheck = now.getMinutes(); + var hourCheck = now.getHours(); + var dayCheck = now.getDate(); + var monthCheck = now.getMonth(); + var yearCheck = now.getFullYear(); +</pre> + +<p><code>Date</code> オブジェクトには、内部の日付や時刻のさまざまな部分を抽出するためのメソッドがいくつかあります。ここでは、現在の分 (簡単な数値として取得)、時 (簡単な数値として取得)、日 (これは <code>getDate()</code> が必要、 <code>getDay()</code> は曜日を 1-7 で返すため)、月 (0-11 の数値を返す。下記参照)、年 (<code>getFullYear()</code> が必要、<code>getYear()</code> は非推奨であり、誰にとってもあまり役に立たない奇妙な値を返します) を読み取ります。</p> + +<pre class="brush: js"> var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + + objectStore.openCursor().onsuccess = function(event) { + var cursor = event.target.result; + + if(cursor) {</pre> + +<p>次にもう一つ、 IndexedDB の <code>objectStore</code> を生成し、 <code>openCursor()</code> メソッドを使用してカーソルを開きます。これは基本的に IndexedDB がストア内のすべての項目を反復処理する方法です。そして、カーソル内に有効な項目が残っている限り、カーソル内のすべての項目をループします。</p> + +<pre class="brush: js"> switch(cursor.value.month) { + case "January": + var monthNumber = 0; + break; + case "February": + var monthNumber = 1; + break; + + // other lines removed from listing for brevity + + case "December": + var monthNumber = 11; + break; + default: + alert('Incorrect month entered in database.'); + }</pre> + +<p>まず最初に行うことは、データベースに保存されている月名を、 JavaScript が理解できる月の数値に変換することです。前に見たように、 JavaScript の Date オブジェクトは月の値を 0 から 11 までの数値として生成します。</p> + +<pre class="brush: js"> if(+(cursor.value.hours) == hourCheck && + +(cursor.value.minutes) == minuteCheck && + +(cursor.value.day) == dayCheck && + monthNumber == monthCheck && + cursor.value.year == yearCheck && + notified == "no") { + + // If the numbers all do match, run the createNotification() + // function to create a system notification + createNotification(cursor.value.taskTitle); + }</pre> + +<p>IndexedDB に格納された値と照合したい現在の時刻と日付の部分がすべて組み立てられたので、いよいよチェックを実行します。ユーザーに期限切れを知らせる何らかの通知を行う前に、すべての値が一致している必要があります。</p> + +<p>ここでの <code>+</code> 演算子は、先頭にゼロが付いている数字を、先頭にゼロが付いていない同等の数字に変換します (例えば 09 -> 9)。これが必要なのは、 JavaScript の Date の数値には先頭にゼロがないが、データにはあるかもしれないからです。</p> + +<p><code>notified == "no"</code> のチェックは、 1 つの To-Do アイテムに対して 1 つの通知しか受け取れないようにするためのものです。各項目のオブジェクトに対して通知が発生すると、その <code>notification</code> プロパティが <code>"yes"</code> に設定されるので、次の繰り返しではこのチェックが通らないようにするために、 <code>createNotification()</code> 関数の中に次のようなコードを入れています (詳しくは <a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>を読んでください)。</p> + +<pre class="brush: js"> // now we need to update the value of notified to "yes" in this particular data object, so the + // notification won't be set off on it again + + // first open up a transaction as usual + var objectStore = db.transaction(['toDoList'], "readwrite").objectStore('toDoList'); + + // get the to-do list object that has this title as it's title + var request = objectStore.get(title); + + request.onsuccess = function() { + // grab the data object returned as the result + var data = request.result; + + // update the notified value in the object to "yes" + data.notified = "yes"; + + // create another request that inserts the item back into the database + var requestUpdate = objectStore.put(data); + + // when this new request succeeds, run the displayData() function again to update the display + requestUpdate.onsuccess = function() { + displayData(); + }</pre> + +<p>すべてのチェックが一致した場合は、 <code>createNotification()</code> 関数を実行して、ユーザーに通知を行います。</p> + +<pre class="brush: js"> cursor.continue(); + } + } +}</pre> + +<p>この関数の最後の行では、カーソルが上に移動し、 IndexedDB に格納されている次のタスクに対して、上記の期限チェックの仕組みが実行されます。</p> + +<h3 id="Keep_on_checking!">チェックし続ける</h3> + +<p>もちろん、上記の期限チェック機能を一度実行するだけでは意味がありません。すべての締切に達していないかどうかを常にチェックし続けたいのです。そのために、 <code>setInterval()</code> を使って 1 秒に 1 回 <code>checkDeadlines()</code> を実行します。</p> + +<pre class="brush: js">setInterval(checkDeadlines, 1000);</pre> diff --git a/files/ja/web/api/indexeddb_api/index.html b/files/ja/web/api/indexeddb_api/index.html index 14369351fa..1d08f26cc8 100644 --- a/files/ja/web/api/indexeddb_api/index.html +++ b/files/ja/web/api/indexeddb_api/index.html @@ -13,54 +13,54 @@ translation_of: Web/API/IndexedDB_API --- <div>{{DefaultAPISidebar("IndexedDB")}}</div> -<p>IndexedDB は、ファイルや blob を含む構造化された多くのデータを保存する、クライアントサイドのローレベル API です。この API は高パフォーマンスなデータの検索を行うために、インデックスを使用します。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。本ページは、MDN における IndexedDB のランディングページです。ここでは API リファレンスへのリンク、使用ガイド、ブラウザーのサポート状況、主要なコンセプトの説明を掲載します。</p> +<p>IndexedDB は、ファイルや blob を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、高パフォーマンスなデータの検索を行うことができます。<a href="/ja/docs/Web/API/Web_Storage_API">Web Storage</a> は比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。ここでは、完全な API リファレンスと使用ガイド、ブラウザーの対応の詳細、および重要な概念の説明へのリンクを提供します。</p> <p>{{AvailableInWorkers}}</p> <div class="note"> -<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にとってはとても複雑に見えるかもしれません。シンプルな API が好ましいのでしたら、IndexedDB をより開発者フレンドリーに扱える <a href="https://localforage.github.io/localForage/">localForage</a> や <a href="http://www.dexie.org/">dexie.js</a>、<a href="https://github.com/erikolson186/zangodb">ZangoDB</a>、<a href="https://pouchdb.com/">PouchDB</a>、<a href="http://jsstore.net/">JsStore</a> などのライブラリを検討してください。</p> +<p><strong>メモ</strong>: IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。シンプルな API が好ましいのであれば、<a href="#see_also">関連情報</a>の節にある IndexedDB をプログラマーにとって扱いやすくするライブラリーを試してみてください。</p> </div> -<h2 id="Key_concepts_and_usage" name="Key_concepts_and_usage">主要概念と使用法</h2> +<h2 id="Key_concepts_and_usage">主要概念と使用法</h2> -<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムですが、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">Structured Clone アルゴリズム</a>がサポートする、任意のオブジェクトを保存できます。データベースのスキーマを定義する、データベースへの接続を確立する、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行うことが必要です。</p> +<p>IndexedDB は SQL ベースの RDBMS に似たトランザクショナルデータベースシステムです。しかし、SQL ベース の RDBMS が固定された列を持つテーブルを使用するのに対して、IndexedDB は JavaScript ベースのオブジェクト指向データベースです。IndexedDB では、<strong>キー</strong>でインデックス付けされたオブジェクトを保存および取り出すことができます。<a href="/ja/docs/Web/API/Web_Workers_API/Structured_clone_algorithm">構造化クローンアルゴリズム</a>に対応した、任意のオブジェクトを保存することができます。データベースのスキーマを定義し、データベースへの接続を確立し、そして一連の<strong>トランザクション</strong>でデータの取り出しや更新を行う必要があります。</p> <ul> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">IndexedDB のコンセプト</a>を詳しく知る</li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB 使用ガイド</a>で、非同期に IndexedDB を扱い方法を基本原理から学ぶ</li> - <li><a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Worker により PWA をオフラインで動作させる</a>で概説されているように、データをオフラインに格納する IndexedDB と資産をオフラインに格納する Service Worker を組み合わせる。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>についてはこちらをご覧ください。</li> + <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB">IndexedDB の使用</a>のガイドで、で、非同期的に IndexedDB を使用する方法を基本原理から学びます。</li> + <li>データをオフラインで保存するための IndexedDB と、資産をオフラインで保存するためのサービスワーカーを組み合わせる方法は、 <a href="/ja/docs/Web/Progressive_web_apps/Offline_Service_workers">サービスワーカーにより PWA をオフラインで動作させる</a>で概説しています。</li> </ul> <div class="note"> -<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a class="external" href="http://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> +<p><strong>メモ</strong>: たいていのウェブストレージ技術と同様に、IndexedDB も<a href="https://www.w3.org/Security/wiki/Same_Origin_Policy">同一オリジンポリシー</a>に従います。よって、保存済みデータは同一ドメイン内からアクセスできますが、異なるドメインにまたがってデータへアクセスすることはできません。</p> </div> -<h3 id="Synchronous_and_asynchronous" name="Synchronous_and_asynchronous">同期と非同期</h3> +<h3 id="Synchronous_and_asynchronous">同期と非同期</h3> -<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と<span style="background-color: #f5f6f5;">非同期</span> API の両方を提供していました。同期 API は <a href="/ja/docs/Web/Guide/Performance/Using_web_workers">Web Worker</a> 内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、<span style="background-color: #f5f6f5;">同期 API</span> はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p> +<p>IndexedDB を扱う操作は非同期に実行しますので、他のアプリケーションを妨げません。 IndexedDB は元々同期 API と非同期 API の両方を提供していました。同期 API は<a href="/ja/docs/Web/API/Web_Workers_API/Using_web_workers">ウェブワーカー</a>内でのみの使用を意図していましたが、必要性に疑問があったため仕様から削除されました。ただし、同期 API はウェブ開発者から十分な要望がある場合は、将来再び導入される可能性があります。</p> -<h3 id="Storage_limits_and_eviction_criteria" name="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3> +<h3 id="Storage_limits_and_eviction_criteria">ストレージの上限と破棄基準</h3> -<p>クライアントサイド (すなわちローカルディスク) に何らかのデータを保存するウェブ技術がいくつかあり、IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Browser storage limits and eviction criteria</a> で、少なくとも Firefox ではどのようにしているかを説明しようとしています。</p> +<p>クライアント側 (すなわちローカルディスク) に何らかのデータを保存するウェブ技術はいくつかあります。IndexedDB はそのような技術としてもっともよく語られます。ブラウザーがどれだけの容量をウェブデータストレージに割り当てるかや、容量の上限に達したときにどのデータを削除するかのプロセスは単純ではなく、またブラウザーにより異なります。<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">ブラウザーのストレージ制限と削除基準</a>で、少なくとも Firefox ではどのようにしているかの解説を試みています。</p> -<h2 id="Interfaces" name="Interfaces">インターフェイス</h2> +<h2 id="Interfaces">インターフェイス</h2> -<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/DOM/window" title="DOM/window">window</a> オブジェクトの <a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> 属性上の <a href="/ja/docs/Web/API/IDBFactory.open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発火したイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p> +<p>データベースへのアクセスを行いたい場合は、<a href="/ja/docs/Web/API/Window">window</a> オブジェクトの <a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB"><code>indexedDB</code></a> 属性上で <a href="/ja/docs/Web/API/IDBFactory/open"><code>open()</code></a> を呼び出してください。このメソッドは {{domxref("IDBRequest")}} オブジェクトを返します。{{domxref("IDBRequest")}} オブジェクト上で発行されたイベントによってアプリケーションが呼び出されることにより、非同期操作が行われます。</p> -<h3 id="Connecting_to_a_database" name="Connecting_to_a_database">データベースへの接続</h3> +<h3 id="Connecting_to_a_database">データベースへの接続</h3> <dl> <dt>{{domxref("IDBEnvironment")}}</dt> <dd>IndexedDB 機能へのアクセスを提供します。{{domxref("window")}} および {{domxref("worker")}} オブジェクトによって実装されています。このインターフェイスは 2.0 仕様の一部ではありません。</dd> <dt>{{domxref("IDBFactory")}}</dt> - <dd>データベースへのアクセスを提供します。<a href="/ja/docs/Web/API/IDBEnvironment.indexedDB"><code>indexedDB</code></a> グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd> + <dd>データベースへのアクセスを提供します。{{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} グローバルオブジェクトによって実装されており、従って API へのエントリーポイントになります。</dd> <dt>{{domxref("IDBOpenDBRequest")}}</dt> <dd>データベースを開くリクエストを表します。</dd> <dt>{{domxref("IDBDatabase")}}</dt> <dd>データベース接続を表します。データベースとのトランザクション処理を行うためのみに使用されます。</dd> </dl> -<h3 id="Retrieving_and_modifying_data" name="Retrieving_and_modifying_data">データの取り出しと変更</h3> +<h3 id="Retrieving_and_modifying_data">データの取り出しと変更</h3> <dl> <dt>{{domxref("IDBTransaction")}}</dt> @@ -72,88 +72,83 @@ translation_of: Web/API/IndexedDB_API <dt>{{domxref("IDBIndex")}}</dt> <dd>こちらも IndexedDB データベース内のデータのサブセットにアクセスできますが、レコードの探索に主キーではなくインデックスを使用します。{{domxref("IDBObjectStore")}} より高速に動作する場合があります。</dd> <dt>{{domxref("IDBCursor")}}</dt> - <dd>オブジェクトストアとインデックスをイテレートします。</dd> + <dd>オブジェクトストアとインデックスを反復処理します。</dd> <dt>{{domxref("IDBCursorWithValue")}}</dt> - <dd>オブジェクトストアとインデックスをイテレートして、カーソルの現在の値を返します。</dd> + <dd>オブジェクトストアとインデックスを反復処理して、カーソルの現在の値を返します。</dd> <dt>{{domxref("IDBKeyRange")}}</dt> <dd>データベースから一定の範囲のデータを取り出すために使用可能な、キーの範囲を定義します。</dd> <dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt> - <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#Parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd> + <dd>データベースから一定の範囲のデータを取り出すために使用可能な、インデックス用に指定したロケール (<a href="/ja/docs/Web/API/IDBObjectStore/createIndex#parameters"><code>createIndex()</code> の optionalParameters</a> をご覧ください) の規則によって並べ替えたキーの範囲を定義します。</dd> </dl> -<h3 id="Custom_event_interfaces" name="Custom_event_interfaces">カスタムイベントインターフェイス</h3> +<h3 id="Custom_event_interfaces">カスタムイベントインターフェイス</h3> -<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します:</p> +<p>本仕様では、以下のカスタムインターフェイスでイベントが発生します。</p> <dl> <dt>{{domxref("IDBVersionChangeEvent")}}</dt> - <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラ関数によってデータベースのバージョンが変更されたことを表します。</dd> + <dd><code>IDBVersionChangeEvent</code> インターフェイスは、{{domxref("IDBOpenDBRequest.onupgradeneeded")}} イベントハンドラー関数によってデータベースのバージョンが変更されたことを表します。</dd> </dl> -<h3 id="Obsolete_interfaces" name="Obsolete_interfaces">廃止インターフェイス</h3> +<h3 id="Obsolete_interfaces">廃止インターフェイス</h3> -<p>仕様の早期段階で定義されていたインターフェイスの一部が、現在、削除されています。以前書いたコードを最新の仕様に合わせて更新する際に必要になるであろうことから、削除されたインターフェイスに関するドキュメントは残してあります:</p> +<p>仕様の早期段階では、以下のようなインターフェイスを定義していましたが、既に削除されています。以前書かれたコードを更新する必要がある場合のために、ドキュメントを残しています。</p> <dl> - <dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt> - <dd>データベースのバージョンの変更リクエストを表現します。データベースのバージョンを変更する方法が ({{domxref("IDBDatabase.setVersion")}} ではなく {{domxref("IDBFactory.open")}} を呼び出すように) 変わりました。また削除された {{domxref("IDBVersionChangeRequest")}} に代わり {{domxref("IDBOpenDBRequest")}} インターフェイスが用意されています。</dd> - <dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt> + <dt>{{domxref("IDBDatabaseException")}} {{deprecated_inline}}</dt> <dd>データベース操作が実行されている間に発生した例外状況を表します。</dd> - <dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBTransaction")}} です。</dd> - <dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBObjectStore")}} です。</dd> - <dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBIndex")}} です。</dd> - <dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBFactory")}} です。</dd> - <dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBEnvironment")}} です。</dd> - <dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBDatabase")}} です。</dd> - <dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt> - <dd>同期型の {{domxref("IDBCursor")}} です。</dd> + <dt>{{domxref("IDBTransactionSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBTransaction")}} です。</dd> + <dt>{{domxref("IDBObjectStoreSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBObjectStore")}} です。</dd> + <dt>{{domxref("IDBIndexSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBIndex")}} です。</dd> + <dt>{{domxref("IDBFactorySync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBFactory")}} です。</dd> + <dt>{{domxref("IDBEnvironmentSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBEnvironment")}} です。</dd> + <dt>{{domxref("IDBDatabaseSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBDatabase")}} です。</dd> + <dt>{{domxref("IDBCursorSync")}} {{deprecated_inline}}</dt> + <dd>同期版の {{domxref("IDBCursor")}} です。</dd> </dl> -<h2 id="Examples" name="Examples">例</h2> +<h2 id="Examples">例</h2> <ul> - <li><a href="http://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li> - <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="http://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li> - <li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> + <li><a href="https://marco-c.github.io/eLibri/">eLibri:</a> Marco Castelluccio が作成した、高度なライブラリおよび電子書籍リーダーアプリケーションです。IndexedDB Mozilla DevDerby の最優秀作品です。</li> + <li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">ライブデモ</a>): リファレンスドキュメントで例示している、参考アプリケーションです。</li> + <li><a href="https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li> </ul> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="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("IndexedDB 2")}}</td> - <td>{{Spec2("IndexedDB 2")}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('IndexedDB')}}</td> - <td>{{Spec2('IndexedDB')}}</td> - <td>初回定義</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">仕様書</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://w3c.github.io/IndexedDB/">Indexed Database API</a></td> + </tr> + </tbody> </table> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li><a class="external" href="https://localforage.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li> - <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB をに対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li> + <li><a href="https://dexie.org/">Dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルターリング、射影、ソート、アップデート、集計をサポートしています。</li> - <li><a href="http://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li> - <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアントサイドのインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li> - <li><a href="https://pouchdb.com">PouchDB</a>: クライアントサイドのブラウザー内の CouchDB 実装で IndexedDB を使っています。</li> + <li><a href="https://jsstore.net/">JsStore</a>: SQL 風の構文による IndexedDB のラッパーです。</li> + <li><a href="https://github.com/mWater/minimongo">MiniMongo</a>: クライアント側のインメモリーの mongodb で localstorage と server sync over http を元にしたもの。MiniMongo は MeteorJS で使われています。</li> + <li><a href="https://pouchdb.com">PouchDB</a>: クライアント側のブラウザー内の CouchDB 実装で IndexedDB を使っています。</li> + <li><a href="https://www.npmjs.com/package/idb">idb</a>: IndexedDB API をほぼ反映した小さな (~1.15k) ライブラリーですが、使いやすさを大きく変える小さな改良が加えられています。</li> + <li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>: IndexedDB で実装された超シンプルで小さな (~600B) プロミスベースのキーバリューストア</li> + <li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage:</a> クライアントサイドのキーバリューストレージ用の小さな (~2kB) プロミスベースのライブラリーです。IndexedDB、localStorage、WebSQL、Cookie で動作します。優先度に基づいて、対応しているストレージを自動的に使用できます。</li> + <li><a href="https://github.com/google/lovefield">lovefield</a>: Lovefield は、ウェブアプリケーション用のリレーショナルデータベースです。 JavaScript で書かれており、クロスブラウザーで動作します。SQL ライクな API を提供しており、高速で安全、かつ簡単に使用できます。</li> + <li><a href="https://github.com/hyoo-ru/mam_mol/tree/master/db">$mol_db</a>: 小さな (~1.3kB) TypeScript のファサードで、プロミスベースの API と自動マイグレーションを備えています。</li> + </ul> diff --git a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html index 333cda62f1..a4727f8781 100644 --- a/files/ja/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/ja/web/api/indexeddb_api/using_indexeddb/index.html @@ -1,46 +1,52 @@ --- -title: IndexedDB を使用する +title: IndexedDB の使用 slug: Web/API/IndexedDB_API/Using_IndexedDB tags: - API - Advanced - Database + - Guide - IndexedDB - Storage - Tutorial + - jsstore translation_of: Web/API/IndexedDB_API/Using_IndexedDB --- <p>{{DefaultAPISidebar("IndexedDB")}}</p> <div class="summary"> -<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つ ウェブアプリケーションを作成できますので、オンラインとオフラインの両方で動作するアプリケーションになります。</p> +<p>IndexedDB は、ユーザーのブラウザー内にデータを永続的に保存する手段です。ネットワークの状態にかかわらず高度な問い合わせ機能を持つウェブアプリケーションを作成できますので、アプリケーションがオンラインとオフラインの両方で動作するようになります。</p> </div> -<h2 id="About_this_document" name="About_this_document">このドキュメントについて</h2> +<h2 id="About_this_document">このドキュメントについて</h2> -<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB" title="IndexedDB/Basic Concepts Behind IndexedDB">IndexedDB の基本的な概念</a>をお読みください。</p> +<p>このチュートリアルでは、IndexedDB の非同期 API の使い方を見ていきます。IndexedDB について詳しくない場合は、始めに <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>をお読みください。</p> -<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> の記事とそのサブ記事をご覧ください。IndexedDB で使用されるオブジェクトの型や、同期 API および非同期 API のドキュメントがあります。</p> +<p>IndexedDB API のリファレンスドキュメントとして、<a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API</a> の記事とそのサブ記事をご覧ください。この記事では、IndexedDB で使用されるオブジェクトの種類と、非同期 API のメソッドについて説明します (同期 API は仕様から削除されました)。</p> -<h2 id="pattern" name="pattern">基本パターン</h2> +<h2 id="pattern">基本パターン</h2> -<p>IndexedDB で推奨される基本パターンは、以下のようになります:</p> +<p>IndexedDB で推奨される基本パターンは、以下のようになります。</p> <ol> <li>データベースを開きます。</li> <li>データベース内に、オブジェクトストアを作成します。</li> <li>データの追加や取り出しといった、データベース操作のトランザクションを開始して、リクエストを行います。</li> - <li>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</li> - <li>結果 (リクエストオブジェクトで見つけることができます) に応じた処理を行います。</li> + <li> + <div>適切な DOM イベントを受け取ることにより、操作が完了するのを待ちます。</div> + </li> + <li> + <div>結果 (リクエストオブジェクトにある) に応じた処理を行います。</div> + </li> </ol> <p>これらの主要な概念を踏まえることで、より具体的な手続きを理解できます。</p> -<h2 id="open" name="open">ストアを作成および構築する</h2> +<h2 id="open">ストアを作成および構築する</h2> -<h3 id="Using_an_experimental_version_of_IndexedDB" name="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3> +<h3 id="Using_an_experimental_version_of_IndexedDB">実験的なバージョンの IndexedDB を使用する</h3> -<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう:</p> +<p>まだ接頭辞を使用しているブラウザーでコードのテストを行いたい場合は、以下のコードを使用するとよいでしょう。</p> <pre class="brush: js">// 以下の行に、テストを行いたい実装の接頭辞を含めてください。 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; @@ -50,35 +56,35 @@ window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // (Mozilla はこれらのオブジェクトに接頭辞をつけていませんので、window.mozIDB* は不要です)</pre> -<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。サポートしているものとして失敗するより、未サポートとする方が好ましいでしょう:</p> +<p>接頭辞を使用している実装は不具合がある、未完成、あるいは古い版の仕様に従っている可能性がありますので注意してください。よって、これらを製品版のコードで使用することは推奨しません。対応しているものとして失敗するより、未対応とする方が好ましいでしょう。</p> <pre class="brush: js">if (!window.indexedDB) { - window.alert("このブラウザーは安定版の IndexedDB をサポートしていません。IndexedDB の機能は利用できません。"); + window.console.log("このブラウザーは安定版の IndexedDB を対応していません。IndexedDB の機能は利用できません。"); } </pre> -<h3 id="Opening_a_database" name="Opening_a_database">データベースを開く</h3> +<h3 id="Opening_a_database">データベースを開く</h3> -<p>プロセス全体は以下のようにして始めます:</p> +<p>プロセス全体は以下のようにして始めます。</p> <pre class="brush: js">// データベースを開く var request = window.indexedDB.open("MyTestDatabase", 3); </pre> -<p>わかりますか? データベースを開くことも他の操作と同様であり、"リクエスト" が必要です。</p> +<p>わかりますか? データベースを開くことも他の操作と同様であり、「リクエスト」が必要です。</p> -<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest" title="IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest" title="IndexedDB/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase" title="IndexedDB/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p> +<p>データベースを開くリクエストは、すぐにはデータベースを開いたりトランザクションを開始したりはしません。<code>open()</code> 関数を呼び出すと、結果 (成功) またはイベントとして扱うエラー値を伴う <a href="/ja/docs/Web/API/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> オブジェクトを返します。IndexedDB のほとんどの他の非同期関数も同様であり、結果またはエラーを伴う <a href="/ja/docs/Web/API/IDBRequest"><code>IDBRequest</code></a> オブジェクトを返します。open 関数の結果は <code><a href="/ja/docs/Web/API/IDBDatabase">IDBDatabase</a></code> のインスタンスです。</p> -<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラでデータベースのスキーマを作成できます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラで更新されたスキーマを提供できます。詳しくは、後ほど<a href="#Updating_the_version_of_the_database">データベースのバージョンを更新する</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p> +<p>open メソッドの第 2 引数は、データベースのバージョンです。データベースのバージョンは、データベースのスキーマ、すなわちデータベース内のオブジェクトストアとその構造を決定します。データベースが存在しない場合に <code>open</code> 操作でデータベースが作成されると、<code>onupgradeneeded</code> イベントが発生し、そのイベントハンドラーでデータベースのスキーマを作成することができます。データベースが存在する場合に従来より高いバージョン番号を指定すると、すぐに <code>onupgradeneeded</code> イベントが発生して、そのイベントハンドラーで更新されたスキーマを提供することができます。詳しくは、後ほど<a href="#updating_the_version_of_the_database">データベースのバージョンの更新</a>で説明します。また、{{domxref("IDBFactory.open")}} のリファレンスページもご覧ください。</p> <div class="warning"> -<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください:<br> +<p><strong>重要</strong>: バージョン番号は <code>unsigned long long</code> 型の数値であり、とても大きい整数にすることができます。また浮動小数点数値は使用できず、使用した場合は <code>upgradeneeded</code> イベントが発生せず、もっとも近い小さな数値に変換されてトランザクションが始まるでしょう。よって、例えばバージョン番号として 2.4 を使用しないでください。<br> <code>var request = indexedDB.open("MyTestDatabase", 2.4); // 行ってはいけません。バージョンは 2 に丸められます</code></p> </div> -<h4 id="Generating_handlers" name="Generating_handlers">ハンドラを生成する</h4> +<h4 id="Generating_handlers">ハンドラーの生成</h4> -<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラを生成することでしょう:</p> +<p>ほぼすべてのリクエスト生成に合わせて始めに行いたいことは、成功およびエラーのハンドラーを生成することでしょう。</p> <pre class="brush: js">request.onerror = function(event) { // request.errorCode に対して行うこと! @@ -89,38 +95,38 @@ request.onsuccess = function(event) { <p>2 つの関数 <code>onsuccess()</code> と <code>onerror()</code> のどちらが呼び出されるのでしょう? すべてが成功すると成功イベント (すなわち <code>type</code> プロパティが <code>"success"</code> である DOM イベント) が、<code>request</code> を <code>target</code> として発生します。イベントが発生すると <code>request</code> の <code>onsuccess()</code> 関数が、success イベントを引数として呼び出されます。一方、何らかの問題がある場合はエラーイベント (すなわち <code>type</code> プロパティが <code>"error"</code> である DOM イベント) が <code>request</code> で発生します。これは、エラーイベントを引数として <code>onerror()</code> 関数を呼び出します。</p> -<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ!)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーが ウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#Storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p> +<p>IndexedDB API は必要なエラー処理を最小限にするよう設計されていますので、多くのエラーイベントを見ることはないでしょう (少なくとも、API に慣れていなければ)。しかしデータベースを開く場合は、エラーイベントが発生する一般的な状況があります。もっとも多いであろう問題は、データベースを作成する許可をユーザーがウェブアプリに与えなかったことです。IndexedDB の主要な設計目標のひとつが、オフラインで使用するために大量のデータを保存できるようにすることです。(各ブラウザーでどれだけの量のストレージを持てるかについては、<a href="/ja/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria#storage_limits" title="IndexedDB#Storage_limits">ストレージの制限</a>をご覧ください)</p> -<p>広告ネットワークやコンピュータを汚染させる悪意のある Web サイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリ上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2015 年 11 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p> +<p>広告ネットワークやコンピューターを汚染させる悪意のあるウェブサイトをブラウザーが許可したくないことは明らかですので、ブラウザーは ウェブアプリが初めてストレージ用に IndexedDB を開こうとしたときに、ユーザーへプロンプトを表示します。ユーザーはアクセスを許可または拒否できます。またブラウザーのプライバシーモードでの IndexedDB ストレージは、匿名のセッションを閉じるまでの間だけメモリー上に存在します (Firefox のプライベートブラウジングモードや Chrome のシークレットモードのことですが、2021 年 5 月現在の Firefox ではこれが<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=781982">未実装です</a>ので、Firefox のプライベートブラウジングでは IndexedDB をまったく使用できません)。</p> -<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう:</p> +<p>ユーザーがデータベース作成の要求を許可して、成功コールバックを実行する成功イベントを受け取ったと想定します。次は何を行うのでしょうか? 以下のリクエストは <code>indexedDB.open()</code> の呼び出しを伴って生成されており、<code>request.result</code> は <code>IDBDatabase</code> のインスタンスですので、以降のためにこれを保存したいことは確実です。よって、コードは以下のようになるでしょう。</p> <pre class="brush: js">var db; var request = indexedDB.open("MyTestDatabase"); request.onerror = function(event) { - alert("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!"); + console.log("なぜ私の ウェブアプリで IndexedDB を使わせてくれないのですか?!"); }; request.onsuccess = function(event) { db = event.target.result; }; </pre> -<h4 id="Handling_Errors" name="Handling_Errors">エラーを処理する</h4> +<h4 id="Handling_Errors">エラーを処理する</h4> -<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラをデータベースオブジェクトに追加することができます:</p> +<p>前述のとおり、エラーイベントはバブリングします。エラーイベントはエラーを発生させたリクエストをターゲットにして、さらにトランザクションや最終的にデータベースオブジェクトへバブリングします。すべてのリクエストにエラーハンドラーを追加することを避けたい場合は、代わりに以下のように、ひとつのエラーハンドラーをデータベースオブジェクトに追加することができます。</p> <pre class="brush: js">db.onerror = function(event) { // このデータベースのリクエストに対するすべてのエラー用の - // 汎用エラーハンドラ! - alert("Database error: " + event.target.errorCode); + // 汎用エラーハンドラー! + console.log("Database error: " + event.target.errorCode); }; </pre> -<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラで処理しなければならないエラーの実例です。</p> +<p>データベースを開く際によく発生するエラーのひとつが <code>VER_ERR</code> です。これはディスクに保存されているデータベースのバージョンが、開こうとしているバージョンより<em>大きい</em>ことを表します。これは、必ずエラーハンドラーで処理しなければならないエラーの実例です。</p> <h3 id="Creating_or_updating_the_version_of_the_database" name="Creating_or_updating_the_version_of_the_database">データベースを作成またはデータベースのバージョンを更新する</h3> -<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラでは、このバージョンのデータベースで必要なオブジェクトストアを作成します:</p> +<p><a name="Updating_the_version_of_the_database"></a>新しいデータベースを作成したり既存のデータベースのバージョンを更新したりする ({{anch("Opening a database","データベースを開く")}}際に、従来より大きなバージョン番号を指定する) と <code>onupgradeneeded</code> イベントが発生して、<code>request.result</code> (すなわち、以下の例の <code>db</code>) に設定した <code>onversionchange</code> イベントハンドラーに <a href="/ja/docs/Web/API/IDBVersionChangeEvent">IDBVersionChangeEvent</a> オブジェクトが渡されます。<code>upgradeneeded</code> イベントのハンドラーでは、このバージョンのデータベースで必要なオブジェクトストアを作成します。</p> <pre class="brush:js;">// このイベントは最新のブラウザーにのみ実装されています request.onupgradeneeded = function(event) { @@ -135,21 +141,19 @@ request.onupgradeneeded = function(event) { <p>既存の名称を使用してオブジェクトストアを作成しようとする (あるいは、存在しない名称のオブジェクトストアを削除しようとする) と、エラーが発生します。</p> -<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラが実行されます。</p> +<p><code>onupgradeneeded</code> イベントから正常に抜けた場合は、データベースを開くリクエストの <code>onsuccess</code> ハンドラーが実行されます。</p> -<p>Chrome 23 以降および Opera 17 以降の Blink/Webkit は、現行バージョンの仕様をサポートします。IE10 以降も同様です。他の実装や古い実装では現行バージョンの仕様を実装しておらず、<code>indexedDB.open(name, version).onupgradeneeded</code> シグネチャが未サポートです。古い Webkit/Blink でデータベースのバージョンを更新する方法について、詳しくは <a href="/ja/docs/Web/API/IDBDatabase#setVersion()_.0A.0ADeprecated" title="IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase のリファレンス記事</a>をご覧ください。</p> +<h3 id="Structuring_the_database">データベースを構築する</h3> -<h3 id="Structuring_the_database" name="Structuring_the_database">データベースを構築する</h3> +<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keypath">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_keygenerator">キージェネレーター</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p> -<p>次に、データベースを構築します。IndexedDB はテーブルではなくオブジェクトストアを使用しており、ひとつのデータベースに複数のオブジェクトストアを含めることができます。値をオブジェクトストアへ保存するたびに、値がキーと関連付けられます。オブジェクトストアで<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keypath" title="IndexedDB#gloss_key_path">キーパス</a>を使用するか<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_keygenerator" title="IndexedDB#gloss key generator">キージェネレータ</a>を使用するかに応じて、キーを供給する方法がいくつか存在します。</p> - -<p>以下の表で、キーを供給するさまざまな方法を示します:</p> +<p>以下の表で、キーを供給するさまざまな方法を示します。</p> <table class="standard-table"> <thead> <tr> <th scope="col">キーパス (<code>keyPath</code>)</th> - <th scope="col">キージェネレータ (<code>autoIncrement</code>)</th> + <th scope="col">キージェネレーター (<code>autoIncrement</code>)</th> <th scope="col">説明</th> </tr> </thead> @@ -181,7 +185,7 @@ request.onupgradeneeded = function(event) { <p>さらにインデックスには、保存されたデータに単純な制限を強制する機能があります。インデックスを作成する際に unique フラグを設定すると、インデックスのキーパスで同じ値を持つオブジェクトが複数保存されないことを、インデックスが保証します。よって例えば人々の集団の情報を保持するオブジェクトストアがある場合に、同じメールアドレスを持つ人が 2 人存在しないことを保証したい場合は、これを強制するために unique フラグを設定したインデックスを使用するとよいでしょう。</p> -<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します:</p> +<p>これには混乱するかもしれませんので、シンプルな例で概念を説明するべきでしょう。始めに、例で使用する顧客データをいくつか定義します。</p> <pre class="brush: js">// 顧客データがどのようなものかを示します const customerData = [ @@ -192,7 +196,7 @@ const customerData = [ <p>もちろん、誰かの社会保障番号を顧客テーブルの主キーとして使用するべきではないですし (社会保障番号を持っていない人もいます)、年齢の代わりに誕生日を保管することもできますが、これらの不適切な選択は利便性のために無視して先へ進みましょう。</p> -<p>次に、データを保存する IndexedDB を作成するところを見てみましょう:</p> +<p>次に、データを保存する IndexedDB を作成するところを見てみましょう。</p> <pre class="brush: js">const dbName = "the_name"; @@ -222,28 +226,28 @@ request.onupgradeneeded = function(event) { objectStore.transaction.oncomplete = function(event) { // 新たに作成した objectStore に値を保存します。 var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers"); - for (var i in customerData) { - customerObjectStore.add(customerData[i]); - } + customerData.forEach(function(customer) { + customerObjectStore.add(customer); + }); }; }; </pre> <p>先に示したように、<code>onupgradeneeded</code> はデータベースの構造を変えることができる唯一の場所です。ここではオブジェクトストアの作成および削除や、インデックスの構築および削除が可能です。</p> -<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前とパラメータオブジェクトです。パラメータオブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p> +<p>オブジェクトストアは <code>createObjectStore()</code> を 1 回呼び出して作成します。このメソッドの引数は、ストアの名前と引数オブジェクトです。引数オブジェクトは省略可能ですが、重要なオプションプロパティを定義したり、作成したいオブジェクトストアの型を改良することができますので、とても重要です。この例では "customers" という名前のオブジェクトストアを要求して、<code>keyPath</code> を定義しています。<code>keyPath</code> は、ストア内で個々のオブジェクトを一意にするプロパティです。この例では、社会保障番号が一意であることが保証されていますので "ssn" にしています。"ssn" は、<code>objectStore</code> に保存するすべてのオブジェクトに与えなければなりません。</p> <p>また、保存されたオブジェクトの <code>name</code> プロパティを参照する、"name" という名前のインデックスも要求しています。<code>createObjectStore()</code> と同様に <code>createIndex()</code> も、作成したいインデックスの型を改良するための省略可能な引数 <code>options</code> オブジェクトを指定できます。<code>name</code> プロパティを持たないオブジェクトを追加することはできますが、そのオブジェクトは "name" インデックス内に現れません。</p> -<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#Using_an_index" title="Using IndexedDB#Using an index">インデックスを使用する</a> をご覧ください。</p> +<p>以上でオブジェクトストアに保存された顧客オブジェクトを、<code>ssn</code> を使用して直接、またはインデックスを使用して名前をもとにして、取り出すことができます。この仕組みについて詳しくは、<a href="#using_an_index">インデックスを使用する</a> をご覧ください。</p> -<h3 id="Using_a_key_generator" name="Using_a_key_generator">キージェネレータを使用する</h3> +<h3 id="Using_a_key_generator">キージェネレーターを使用する</h3> -<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレータを使用できます。デフォルトで、このフラグは設定されません。</p> +<p>オブジェクトストアを作成するときに <code>autoIncrement</code> フラグを設定すると、そのオブジェクトストアでキージェネレーターを使用できます。デフォルトで、このフラグは設定されません。</p> -<p>キージェネレータを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレータを初めて作成した時点では、キージェネレータの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレータの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレータには影響がありません。</p> +<p>キージェネレーターを使用すると、オブジェクトストアに値を追加するのに応じて自動的にキーが生成されます。オブジェクトストアでキージェネレーターを初めて作成した時点では、キージェネレーターの値が常に 1 になります。基本的に、新たに自動生成されるキーは、前のキーから 1 増加した値になります。データベースのトランザクションが中止されるなど、データベースの操作が取り消された場合を除き、キージェネレーターの現在の値が減少することはありません。従って、オブジェクトストアからレコードを削除したりすべてのレコードをクリアしたりしても、オブジェクトストアのキージェネレーターには影響がありません。</p> -<p>以下のように、キージェネレータを持つ別のオブジェクトストアを作成できます:</p> +<p>以下のように、キージェネレーターを持つ別のオブジェクトストアを作成できます。</p> <pre class="brush: js">// indexedDB を開きます。 var request = indexedDB.open(dbName, 3); @@ -255,7 +259,7 @@ request.onupgradeneeded = function (event) { // autoIncrement フラグに true を設定した、"names" という名前のオブジェクトストアを作成します。 var objStore = db.createObjectStore("names", { autoIncrement : true }); - // "names" オブジェクトストアはキージェネレータを持っていますので、値 name のキーは自動的に生成されます。 + // "names" オブジェクトストアはキージェネレーターを持っていますので、値 name のキーは自動的に生成されます。 // 追加したレコードは以下のようになります: // キー : 1 => 値 : "Bill" // キー : 2 => 値 : "Donna" @@ -264,34 +268,34 @@ request.onupgradeneeded = function (event) { } };</pre> -<p>キージェネレータについて詳しくは、<a href="http://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p> +<p>キージェネレーターについて詳しくは、<a href="https://www.w3.org/TR/IndexedDB/#key-generator-concept">"W3C Key Generators"</a> をご覧ください。</p> -<h2 id="Adding_retrieving_and_removing_data" name="Adding_retrieving_and_removing_data">データを追加する、読み出す、削除する</h2> +<h2 id="Adding_retrieving_and_removing_data">データの追加、読み取り、削除</h2> <p>新しいデータベースで何かを行えるようにする前に、トランザクションを開始しなければなりません。トランザクションはデータベースオブジェクトから生じており、トランザクションの対象にしたいオブジェクトストアを指定しなければなりません。トランザクションの内部では、データを保持しているオブジェクトストアへのアクセスや、リクエストの実行が可能です。次に、データベースに変更処理を行うのか、あるいはデータベースから読み出すだけかを決めなければなりません。トランザクションは <code>readonly</code>、<code>readwrite</code>、<code>versionchange</code> の 3 つのモードを使用できます。</p> -<p>データベースの "スキーマ" や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。(最新の仕様を実装していない WebKit ブラウザーは {{domxref("IDBFactory.open")}} メソッドの引数が、データベースの <code>name</code> の 1 つしかありません。よって、<code>versionchange</code> トランザクションを開始するには {{domxref("IDBVersionChangeRequest.setVersion")}} を呼び出さなければなりません)</p> +<p>データベースの「スキーマ」や構造を変更する (オブジェクトストアやインデックスを作成または削除する) には、トランザクションを <code>versionchange</code> モードにしなければなりません。このトランザクションは、<code>version</code> を指定して {{domxref("IDBFactory.open")}} メソッドを呼び出すことによって開きます。</p> <p>既存のオブジェクトストアからレコードを読み出すには、トランザクションで <code>readonly</code> モードまたは <code>readwrite</code> モードを使用できます。既存のオブジェクトストアに変更処理を行うには、トランザクションを <code>readwrite</code> モードにしなければなりません。このようなトランザクションは {{domxref("IDBDatabase.transaction")}} で開きます。このメソッドの引数は 2 つあり、<code>storeNames</code> (アクセスしたいオブジェクトストアの配列で定義されるスコープ) とトランザクションの <code>mode</code> (<code>readonly</code> または <code>readwrite</code>) です。またこのメソッドは、{{domxref("IDBTransaction.objectStore")}} メソッドを持つトランザクションオブジェクトを返します。<code>objectStore</code> メソッドは、オブジェクトストアにアクセスするために使用できます。デフォルトでは、モードを指定しなければ <code>readonly</code> モードでトランザクションを開きます。</p> <div class="note"> -<p><strong>注記</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p> +<p><strong>メモ</strong>: Firefox 40 で、IndexedDB トランザクションはパフォーマンスを向上させるために、永続性の保証を緩和しました ({{Bug("1112702")}} を参照)。以前は <code>readwrite</code> モードのトランザクションで、すべてのデータをディスク上に反映したことが保証された場合に限り {{domxref("IDBTransaction.oncomplete")}} 発生しました。Firefox 40 以降では OS がデータの書き込みを指示した時点で <code>complete</code> が発生しており、実際にはデータがディスク上に反映されていない可能性があります。これにより <code>complete</code> イベントをより早く発生させられますが、データをディスク上に反映する前に OS のクラッシュや電源断が発生するとトランザクション全体を失う危険性が若干あります。このような破壊的な事象はまれですので、ほとんどの利用者は心配する必要がないでしょう。何らかの理由 (例えば、後で再計算できない重要なデータを保存する) で永続性を保証しなければならない場合は、実験的 (非標準) な <code>readwriteflush</code> モード ({{domxref("IDBDatabase.transaction")}} を参照) を使用してトランザクションを生成すると、<code>complete</code> イベントを発生させる前にディスクへの反映を強制させることができます。</p> </div> -<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します:</p> +<p>トランザクションで適切なスコープおよびモードを使用すると、データアクセスを高速化できます。ヒントを 2 つ紹介します。</p> <ul> <li>スコープを定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li> - <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">基本的な概念</a>の記事で <dfn><a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#Database">トランザクション</a></dfn>の定義をご覧ください。</li> + <li><code>readwrite</code> トランザクションモードは、必要な場合に限り指定します。<code>readonly</code> トランザクションはスコープが重なっても複数同時に実行できますが、<code>readwrite</code> トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology">IndexedDB の主な特徴と基本用語</a>の記事で <a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">トランザクション</a>の定義をご覧ください。</li> </ul> -<h3 id="Adding_data_to_the_database" name="Adding_data_to_the_database">データベースにデータを追加する</h3> +<h3 id="Adding_data_to_the_database">データベースにデータを追加する</h3> -<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします:</p> +<p>データベースを作成したら、書き込みを行いたいと考えるでしょう。これは以下のようにします。</p> <pre class="brush:js;">var transaction = db.transaction(["customers"], "readwrite"); -// 注記: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。 -// そのような実装をサポートしたい場合は、以下のように記述します: +// メモ: 古い実験的な実装では、"readwrite" の代わりに非推奨の定数 IDBTransaction.READ_WRITE を使用します。 +// そのような実装をサポートしたい場合は、以下のように記述します。 // var transaction = db.transaction(["customers"], IDBTransaction.READ_WRITE);</pre> <p><code>transaction()</code> 関数は引数が 2 つあり (ひとつは省略可能)、トランザクションオブジェクトを返します。第 1 引数は、トランザクションの対象にするオブジェクトストアのリストです。トランザクションですべてのオブジェクトを対象にしたい場合は空の配列を渡すことができますが、仕様書では空の配列に対して InvalidAccessError を生成すべきとされていますので、行わないようにしてください。第 2 引数に何も指定しなければ、読み取り専用のトランザクションになります。書き込みを行いたい場合は、<code>"readwrite"</code> フラグを渡さなければなりません。</p> @@ -304,7 +308,7 @@ request.onupgradeneeded = function (event) { <pre class="brush: js">// すべてのデータがデータベースに追加されたときに行う処理 transaction.oncomplete = function(event) { - alert("All done!"); + console.log("All done!"); }; transaction.onerror = function(event) { @@ -321,9 +325,9 @@ for (var i in customerData) { <p><code>add()</code> を呼び出して生成されたリクエストの <code>result</code> は、追加された値のキーです。よってこのケースでは、オブジェクトストアでキーパスとして <code>ssn</code> プロパティを使用していますので、追加されたオブジェクトの <code>ssn</code> プロパティと等しくなります。<code>add()</code> 関数では、データベース内に同一のキーを持つオブジェクトが存在しないことを要求しますので注意してください。既存の項目を変更しようとする場合や、既存の項目があるかを配慮しない場合は、{{anch("Updating an entry in the database", "データベース内の項目を更新する")}} の章で説明している <code>put()</code> 関数を使用できます。</p> -<h3 id="Removing_data_from_the_database" name="Removing_data_from_the_database">データベースからデータを削除する</h3> +<h3 id="Removing_data_from_the_database">データベースからのデータの削除</h3> -<p>データの削除もよく似ています:</p> +<p>データの削除もよく似ています。</p> <pre class="brush: js">var request = db.transaction(["customers"], "readwrite") .objectStore("customers") @@ -332,9 +336,9 @@ request.onsuccess = function(event) { // 削除完了! };</pre> -<h3 id="Getting_data_from_the_database" name="Getting_data_from_the_database">データベースからデータを取得する</h3> +<h3 id="Getting_data_from_the_database">データベースからのデータの取得</h3> -<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません:</p> +<p>データベースは情報を持っていますので、いくつかの方法でデータを読み出すことができます。まずは、単純に <code>get()</code> を使用します。以下のように、値を読み出すためにキーを提供しなければなりません。</p> <pre class="brush: js">var transaction = db.transaction(["customers"]); var objectStore = transaction.objectStore("customers"); @@ -344,27 +348,27 @@ request.onerror = function(event) { }; request.onsuccess = function(event) { // request.result に対して行う処理! - alert("Name for SSN 444-44-4444 is " + request.result.name); + console.log("Name for SSN 444-44-4444 is " + request.result.name); };</pre> -<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します:</p> +<p>"単純に" 読み出すにも多くのコードがあります。データベースレベルでエラー処理を行うとすれば、コードを少々短縮できることを以下に示します。</p> <pre class="brush: js">db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) { - alert("Name for SSN 444-44-4444 is " + event.target.result.name); + console.log("Name for SSN 444-44-4444 is " + event.target.result.name); };</pre> <p>どのように動作するかわかりますか? オブジェクトストアが 1 つしかありませんので、トランザクションで必要とするオブジェクトストアのリストを渡さずに、名称を文字列で渡しています。また、データベースから読み出すだけですので、<code>"readwrite"</code> トランザクションは不要です。モードを指定せずに <code>transaction()</code> を呼び出すと、<code>"readonly"</code> トランザクションになります。さらに細かいことですが、実はリクエストオブジェクトを変数に保存していません。DOM イベントはターゲットとしてリクエストを持ちますので、<code>result</code> プロパティを得るためにイベントを使用できます。</p> -<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します:</p> +<p>トランザクションでスコープやモードを制限することにより、データアクセスを高速化できることに留意してください。ヒントを 2 つ紹介します。</p> <ul> <li><a href="#scope">スコープ</a>を定義するときは、必要なオブジェクトストアのみ指定します。これにより、同時にスコープが重なり合うことなく、複数のトランザクションを実行できます。</li> - <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li> + <li>readwrite トランザクションモードは、必要な場合に限り指定します。readonly トランザクションはスコープが重なっても複数同時に実行できますが、readwrite トランザクションはオブジェクトストアに対して 1 個しか実行できません。詳しくは、<a href="/ja/docs/Web/API/IndexedDB_API/Basic_Terminology#gloss_transaction">基本的な概念の記事でトランザクション</a>の定義をご覧ください。</li> </ul> -<h3 id="Updating_an_entry_in_the_database" name="Updating_an_entry_in_the_database">データベース内の項目を更新する</h3> +<h3 id="Updating_an_entry_in_the_database">データベース内の項目の更新</h3> -<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう:</p> +<p>読み出したデータを更新して IndexedDB に書き戻す方法は、とてもシンプルです。先ほどのサンプルを多少更新しましょう。</p> <pre class="brush: js">var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers"); var request = objectStore.get("444-44-4444"); @@ -391,29 +395,29 @@ request.onsuccess = function(event) { <p>ここでは <code>objectStore</code> を作成して、ssn の値 (<code>444-44-4444</code>) で特定される顧客レコードの取り出しを要求しています。リクエストの結果を変数 (<code>data</code>) に代入して、そのオブジェクトの <code>age</code> プロパティを更新します。そして、顧客レコードを <code>objectStore</code> に書き戻して前の値を上書きする、第 2 のリクエスト (<code>requestUpdate</code>) を作成します。</p> <div class="note"> -<p><strong>注記</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p> +<p><strong>メモ</strong>: このケースではデータベースから読み出すだけでなく書き込みも行いたいので、<code>readwrite</code> トランザクションを指定しました。</p> </div> -<h3 id="Using_a_cursor" name="Using_a_cursor">カーソルを使用する</h3> +<h3 id="Using_a_cursor">カーソルの使用</h3> -<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです:</p> +<p><code>get()</code> を使用する際は、読み出したいキーがどれかを知っていることが必要です。オブジェクトストア内のすべての値を渡り歩きたい場合は、カーソルを使用できます。以下のようなものです。</p> <pre class="brush: js">var objectStore = db.transaction("customers").objectStore("customers"); objectStore.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { - alert("Name for SSN " + cursor.key + " is " + cursor.value.name); + console.log("Name for SSN " + cursor.key + " is " + cursor.value.name); cursor.continue(); } else { - alert("No more entries!"); + console.log("No more entries!"); } };</pre> -<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例ではショートハンドを使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストにマッチする項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p> +<p><code>openCursor()</code> 関数は、引数がいくつかあります。第一に、すぐに取得するキーレンジオブジェクトを使用して、読み出すアイテムの範囲を制限できます。第二に、反復処理を行いたい方向を指定できます。上記の例では、すべてのオブジェクトを昇順方向に反復します。カーソルの成功イベントのコールバックは、やや特殊です。カーソルオブジェクト自体は、リクエストの <code>result</code> です (上記の例では略記法を使用しており、<code>event.target.result</code> になります)。そして実際のキーと値は、カーソルオブジェクトの <code>key</code> プロパティと <code>value</code> プロパティで見つかります。進み続けたい場合は、カーソルで <code>continue()</code> を呼び出さなければなりません。データの終端に達した (または、<code>openCursor()</code> リクエストに一致する項目が存在しない) 場合は成功のコールバックを受け取りますが、<code>result</code> プロパティが <code>undefined</code> になります。</p> -<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです:</p> +<p>カーソルをよく使用するパターンのひとつが、以下のようにオブジェクトストア内の全データを読み出して、配列に追加することです。</p> <pre class="brush: js">var customers = []; @@ -424,40 +428,45 @@ objectStore.openCursor().onsuccess = function(event) { cursor.continue(); } else { - alert("Got all customers: " + customers); + console.log("Got all customers: " + customers); } };</pre> <div class="note"> -<p><strong>注記</strong>: Mozilla は、このような処理を行うために <code>getAll()</code> も実装しています (および <code>getAllKeys()</code> もあり、これは現在、about:config の設定項目 <code>dom.indexedDB.experimental</code> で隠しています)。これらは IndexedDB 標準の一部ではなく、将来削除する可能性があります。これらは便利であると考えられますので、実装しました。以下のコードは、前出の例とまったく同じことを行います:</p> +<p><strong>メモ</strong>: それ以外に、このような処理を行うために <code>getAll()</code> (および <code>getAllKeys()</code>)。を使用することができます。以下のコードは、前出の例とまったく同じことを行います。</p> <pre class="brush: js">objectStore.getAll().onsuccess = function(event) { - alert("Got all customers: " + event.target.result); + console.log("Got all customers: " + event.target.result); };</pre> <p>これはオブジェクトを横着な方法で作成するため、カーソルの <code>value</code> プロパティの検索に関してパフォーマンスコストが発生します。例えば <code>getAll()</code> を使用するとき、Gecko はすべてのオブジェクトを一度に作成しなければなりません。例えばそれぞれのキーを検索することにのみ関心がある場合は、<code>getAll()</code> よりもカーソルを使用する方がとても効率的です。オブジェクトストア内の全データの配列を得ようとしている場合は、<code>getAll()</code> を使用しましょう。</p> </div> -<h3 id="Using_an_index" name="Using_an_index">インデックスを使用する</h3> +<h3 id="Using_an_index">インデックスの使用</h3> <p>SSN は個人を一意に識別しますので、キーとして SSN を使用して顧客データを保管することは論理的です。(プライバシーの観点でよいアイデアであるかは別の問題であり、この記事の対象外です) 一方、名前で顧客を検索しなければならない場合は、正しいものが見つかるまでデータベース内のすべての SSN に対して反復処理を行わなければなりません。この方法による検索はとても遅いため、代わりにインデックスを使用するとよいでしょう。</p> -<pre class="brush: js">var index = objectStore.index("name"); +<pre class="brush: js">// 最初に、 request.onupgradeneeded の中にインデックスを生成したか確認してください。 +// objectStore.createIndex("name", "name"); +// まだであれば、 DOMException が発生します。 + +var index = objectStore.index("name"); index.get("Donna").onsuccess = function(event) { - alert("Donna's SSN is " + event.target.result.ssn); -};</pre> + console.log("Donna's SSN is " + event.target.result.ssn); +}; +</pre> <p>"name" カーソルは一意ではないので、<code>name</code> に <code>"Donna"</code> が設定されている項目は複数存在する可能性があります。この場合は常に、キーの値がもっとも小さいものを取得します。</p> -<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します:</p> +<p>指定した <code>name</code> に該当するすべての項目にアクセスしなければならない場合は、カーソルを使用します。インデックス上で、2 種類のカーソルを開くことができます。ノーマルカーソルは、インデックスのプロパティと、オブジェクトストア内のオブジェクトを紐づけます。キーカーソルは、インデックスのプロパティと、オブジェクトストア内にオブジェクトを保存するために使用するキーを紐づけます。これらの違いを以下に示します。</p> <pre class="brush: js">// 顧客レコードのオブジェクト全体を得るために、ノーマルカーソルを使用します。 index.openCursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // cursor.key は "Bill" のような名前、cursor.value はオブジェクト全体です。 - alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); + console.log("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email); cursor.continue(); } }; @@ -468,40 +477,40 @@ index.openKeyCursor().onsuccess = function(event) { if (cursor) { // cursor.key は "Bill" のような名前、cursor.value は SSN です。 // 保存されたオブジェクトの他の部分を直接取得する方法はありません。 - alert("Name: " + cursor.key + ", SSN: " + cursor.value); + console.log("Name: " + cursor.key + ", SSN: " + cursor.value); cursor.continue(); } };</pre> -<h3 id="Specifying_the_range_and_direction_of_cursors" name="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3> +<h3 id="Specifying_the_range_and_direction_of_cursors">カーソルの範囲や方向を指定する</h3> -<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します:</p> +<p>カーソルで参照する値の範囲を制限したい場合は、<code>IDBKeyRange</code> オブジェクトを使用して、<code>openCursor()</code> または <code>openKeyCursor()</code> の第 1 引数として渡します。ひとつのキーのみ許可するキーレンジ、下限または上限の片方を持つキーレンジ、あるいは下限と上限の両方を持つキーレンジを作成できます。境界は "closed" (すなわち、キーレンジは指定した値を含む) または "open" (すなわち、キーレンジは指定した値を含まない) のどちらにもできます。使い方を以下に示します。</p> -<pre class="brush: js">// "Donna" にのみマッチします。 +<pre class="brush: js">// "Donna" にのみ一致します。 var singleKeyRange = IDBKeyRange.only("Donna"); -// "Bill" より先のすべてにマッチします。"Bill" を含みます。 +// "Bill" より先のすべてに一致します。"Bill" を含みます。 var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill"); -// "Bill" より先のすべてにマッチします。ただし "Bill" は含みません。 +// "Bill" より先のすべてに一致します。ただし "Bill" は含みません。 var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true); -// "Donna" までのすべてにマッチします。ただし "Donna" は含みません。 +// "Donna" までのすべてに一致します。ただし "Donna" は含みません。 var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true); -// "Bill" から "Donna" までにマッチします。ただし "Donna" は含みません。 +// "Bill" から "Donna" までに一致します。ただし "Donna" は含みません。 var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true); // いずれかのキーレンジを使用するには、openCursor()/openKeyCursor() の第 1 引数として渡します。 index.openCursor(boundKeyRange).onsuccess = function(event) { var cursor = event.target.result; if (cursor) { - // マッチした場合の処理。 + // 一致した場合の処理。 cursor.continue(); } };</pre> -<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します:</p> +<p>昇順 (すべてのカーソルのデフォルトの方向) ではなく、降順に反復処理を行いたい場合があるかもしれません。方向の切り替えは、<code>openCursor()</code> の第 2 引数に <code>prev</code> を渡すことで実現します。</p> <pre class="brush: js">objectStore.openCursor(boundKeyRange, "prev").onsuccess = function(event) { var cursor = event.target.result; @@ -511,7 +520,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します:</p> +<p>方向を変えたいだけで表示する結果は制限しない場合は、第 1 引数に null を渡します。</p> <pre class="brush: js">objectStore.openCursor(null, "prev").onsuccess = function(event) { var cursor = event.target.result; @@ -521,7 +530,7 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向のパラメータに <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p> +<p>"name" インデックスは一意ではありませんので、<code>name</code> が同じ項目が複数存在する可能性があります。キーは常に一意でなければならないため、オブジェクトストアでこのような状況は発生できないことに注意してください。インデックスに対して反復処理を行う際に重複を取り除きたい場合は、方向の引数に <code>nextunique</code> (逆向きであれば <code>prevunique</code>) を指定します。<code>nextunique</code> または <code>prevunique</code> を使用すると、常にキーが最小の項目が返ります。</p> <pre class="brush: js">index.openKeyCursor(null, "nextunique").onsuccess = function(event) { var cursor = event.target.result; @@ -531,18 +540,18 @@ index.openCursor(boundKeyRange).onsuccess = function(event) { } };</pre> -<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#Constants">IDBCursor Constants</a>" をご覧ください。</p> +<p>有効な方向の引数については、"<a href="/ja/docs/Web/API/IDBCursor#constants">IDBCursor Constants</a>" をご覧ください。</p> -<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab" name="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2> +<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">ウェブアプリが別のタブで開かれているときにバージョンを変更する</h2> -<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します:</p> +<p>データベースのバージョン変更が必要である場合に ウェブアプリでそのようなことを行うときは、ユーザーが古いバージョンの ウェブアプリをタブで開いている場合に別のタブで新しいバージョンのアプリを読み込んだときに発生することを考慮しなければなりません。データベースの実際のバージョンより大きなバージョンを指定して <code>open()</code> を呼び出すときは、データベースに変更を施す前に、他にデータベースを開いているものが明示的に要求を認めなければなりません (それらを閉じるか再読み込みするまで、<code>onblocked</code> イベントが発生します)。使い方を以下に示します。</p> <pre class="brush: js">var openReq = mozIndexedDB.open("MyTestDatabase", 2); openReq.onblocked = function(event) { // 他のタブがデータベースを読み込んでいる場合は、処理を進める前に // それらを閉じなければなりません。 - alert("このサイトを開いている他のタブをすべて閉じてください!"); + console.log("このサイトを開いている他のタブをすべて閉じてください!"); }; openReq.onupgradeneeded = function(event) { @@ -558,12 +567,12 @@ openReq.onsuccess = function(event) { }; function useDatabase(db) { - // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラを追加するようにしてください。 + // 別のページがバージョン変更を求めた場合に、通知されるようにするためのハンドラーを追加するようにしてください。 // データベースを閉じなければなりません。データベースを閉じると、別のページがデータベースをアップグレードできます。 // これを行わなければ、ユーザーがタブを閉じるまでデータベースはアップグレードされません。 db.onversionchange = function(event) { db.close(); - alert("新しいバージョンのページが使用可能になりました。再読み込みしてください!"); + console.log("新しいバージョンのページが使用可能になりました。再読み込みしてください!"); }; // データベースを使用する処理 @@ -572,39 +581,39 @@ function useDatabase(db) { <p>すでに開かれているアプリが新たにデータベースを開こうとするコードを開始したが、古いバージョンのデータベースを使用している状況に対処するため、<code>VersionError</code> エラーもリッスンしましょう。</p> -<h2 id="Security" name="Security">セキュリティ</h2> +<h2 id="Security">セキュリティ</h2> <p>IndexedDB は同一生成元の原則を使用します。すなわち、ストアとサイトの生成元 (通常、サイトのドメインまたはサブドメイン) を紐づけますので、他の生成元からアクセスすることはできません。</p> <p>サードパーティの window コンテンツ (例えば {{htmlelement("iframe")}} のコンテンツ) は、ブラウザーが<a href="https://support.mozilla.org/ja/kb/disable-third-party-cookies">サードパーティ Cookie を禁止していない</a>限り、自身が埋め込まれている生成元の IndexedDB ストアにアクセスできます ({{bug("1147821")}} をご覧ください)。</p> -<h2 id="Warning_About_Browser_Shutdown" name="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2> +<h2 id="Warning_About_Browser_Shutdown">ブラウザーの終了に関する警告</h2> -<p>ブラウザーを終了するとき (例えばユーザーが "終了" や "閉じる" ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします:</p> +<p>ブラウザーを終了するとき (例えばユーザーが「終了」や「閉じる」ボタンをクリックしたとき)、データベースを含むディスクは予期せず削除されたり、データベースストアへのパーミッションが失われたり、次のことが起きたりします。</p> <ol> <li>影響するデータベース (あるいは、ブラウザーを終了する場合はすべての開いているデータベース) の各トランザクションは <code>AbortError</code> とともに中断されます。この効果は各トランザクションで {{domxref("IDBTransaction.abort()")}} が呼ばれたのと同等です。</li> <li>すべてのトランザクションが完了していたら、データベース接続は閉じられます。</li> - <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラを使ってこのイベントをリッスンできます。その結果、データベースが予期せず閉じられたことがわかります。</li> + <li>最後に、データベース接続を表す {{domxref("IDBDatabase")}} オブジェクトは {{event("close")}} イベントを受け取ります。{{domxref("IDBDatabase.onclose")}} イベントハンドラーを使ってこのイベントを待ち受けできます。その結果、データベースが予期せず閉じられたことがわかります。</li> </ol> -<p>上記の挙動は新しく、下記のブラウザーリリース以降で利用できます: Firefox 50, Google Chrome 31 (おおよそ)。</p> +<p>上記の挙動は新しく、ブラウザーの Firefox 50、Google Chrome 31 以降 (おおよそ) のリリースで利用できます。</p> -<p>このブラウザーバージョンの前は、トランザクションは静かに中断され、{{event("close")}} イベントは発火せず、予期せぬデータベースの停止を検出する方法はありませんでした。</p> +<p>このバージョンのブラウザーの前は、トランザクションは暗黙裡に中断され、{{event("close")}} イベントが発行されず、予期せぬデータベースの停止を検出する方法はありませんでした。</p> <p>ユーザーはいつでもブラウザーを終了することができますので、特定のトランザクションが完了することをあてにしたり、完了しなかったことを知ったりすることはできません。この動作が暗示することがいくつかあります。</p> <p>第一に、データベースであらゆるトランザクションが終了したときに、常に一貫性がある状態を保つように注意するべきです。例えば、ユーザーが編集可能な項目のリストを保存する IndexedDB を使用していると想定します。オブジェクトストアを消去してから新たなリストを書き込むことにより、編集後のリストを保存します。あるトランザクションでオブジェクトストアを消去して、別のトランザクションで新たなリストを書き込むとすれば、消去した後かつ書き込む前にブラウザーが閉じられる危険性があり、その場合は空のデータベースが残ります。これを避けるために、消去と書き込みをひとつのトランザクションに結合しましょう。</p> -<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p> +<p>第二に、データベースのトランザクションと unload イベントを紐づけるべきではありません。ブラウザーを閉じることで unload イベントが発生した場合、unload イベントハンドラーで作成したトランザクションは完了しません。ブラウザーのセッションにわたって情報を管理するための直感的な方法は、ブラウザー (または特定のページ) を開いたときに情報を読み込んで、ユーザーとブラウザーとの対話に応じて更新して、ブラウザー (またはページ) を閉じるときに保存する流れです。しかし、これは動作しないでしょう。データベースのトランザクションは unload イベントハンドラーで作成されますが、これらは非同期処理ですので、実行できるようになる前に中止されるでしょう。</p> <p>実は通常のブラウザー終了であっても、IndexedDB のトランザクションが完了するよう保証する手段はありません。{{bug(870645)}} をご覧ください。通常の終了通知の回避策として、トランザクションの状況を追跡して、アンロード時にトランザクションが完了していないことをユーザーに警告するための <code>beforeunload</code> イベントを追加するとよいでしょう。</p> -<p>少なくともアボート通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p> +<p>少なくとも中止通知と{{domxref("IDBDatabase.onclose")}}を追加することで、いつ起こったのかがわかります。</p> -<h2 id="Locale-aware_sorting" name="Locale-aware_sorting">ロケールを意識した並べ替え</h2> +<h2 id="Locale-aware_sorting">ロケールを意識した並べ替え</h2> -<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます:</p> +<p>Mozilla は Firefox 43 以降に、IndexedDB のデータでロケールを意識した並べ替えを行う機能を実装しました。デフォルトでは、IndexedDB は文字列の並べ替えで国際化にまったく対処せず、すべてが英語のテキストであるかのように並べ替えられます。例えば b、á、z、a は以下のように並べ替えられます。</p> <ul> <li>a</li> @@ -613,19 +622,19 @@ function useDatabase(db) { <li>á</li> </ul> -<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p> +<p>これは明らかに、ユーザーが望むデータの並べ替えではありません。例えば Aaron と Áaron は、連絡先一覧で隣り合うべきです。従って適切な国際化並べ替えを実現するには、データセット全体をメモリーに読み込んで、クライアントサイド JavaScript で並べ替えを実行しなければならず、非効率的です。</p> <p>この新機能は、開発者が {{domxref("IDBObjectStore.createIndex()")}} を使用してインデックスを作成する際にロケールを指定できるようにします (引数を確認してください)。データセットに対して反復処理を行うためにカーソルを使用するときに、ロケールを意識した並べ替えを行いたい場合は、特化した {{domxref("IDBLocaleAwareKeyRange")}} を使用できます。</p> <p>また {{domxref("IDBIndex")}} には、ロケールが指定されているか、およびどのロケールが指定されているかを特定するために追加された新たなプロパティがあります。<code>locale</code> (指定されたロケール、または未指定であれば null を返します) と <code>isAutoLocale</code> (プラットフォームの既定のロケールを使用する自動ロケールでインデックスが作成されていれば <code>true</code>、そうでなければ <code>false</code> を返します) です。</p> <div class="note"> -<p><strong>注記</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p> +<p><strong>メモ</strong>: 現在、この機能はフラグで隠されています。有効化して実験するには、<a>about:config</a> に移動して <code>dom.indexedDB.experimental</code> を有効化してください。</p> </div> -<h2 id="Full_IndexedDB_example" name="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2> +<h2 id="Full_IndexedDB_example">包括的な IndexedDB のサンプル</h2> -<h3 id="HTML_Content" name="HTML_Content">HTML コンテンツ</h3> +<h3 id="HTML_Content">HTML コンテンツ</h3> <pre class="brush: html"><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> @@ -760,7 +769,7 @@ function useDatabase(db) { </div> </pre> -<h3 id="CSS_Content" name="CSS_Content">CSS コンテンツ</h3> +<h3 id="CSS_Content">CSS コンテンツ</h3> <pre class="brush: css">body { font-size: 0.8em; @@ -849,7 +858,7 @@ input { } </pre> -<h3 id="JavaScript_Content" name="JavaScript_Content">JavaScript コンテンツ</h3> +<h3 id="JavaScript_Content">JavaScript コンテンツ</h3> <pre class="brush: js">(function () { var COMPAT_ENVS = [ @@ -877,9 +886,7 @@ input { console.log("openDb ..."); var req = indexedDB.open(DB_NAME, DB_VERSION); req.onsuccess = function (evt) { - // ガベージコレクションの問題を避けるため、結果を得る際は - // "req" より "this" を使用する方がよい - // db = req.result; + // db = req.result; と同等 db = this.result; console.log("openDb DONE"); }; @@ -907,7 +914,7 @@ input { return tx.objectStore(store_name); } - function clearObjectStore(store_name) { + function clearObjectStore() { var store = getObjectStore(DB_STORE_NAME, 'readwrite'); var req = store.clear(); req.onsuccess = function(evt) { @@ -996,7 +1003,7 @@ input { // ストア内の次のオブジェクトに移動する cursor.continue(); - // このカウンタは、個別の ID を作成するためだけに使用する + // このカウンターは、個別の ID を作成するためだけに使用する i++; } else { console.log("No more entries"); @@ -1069,7 +1076,7 @@ input { * @param {string} url ダウンロードしてローカルの IndexedDB データベースに保存する * 画像の URL。この URL の背後にあるリソースは、"同一生成元ポリシー" に従います。 * よって、この方法を動作させるために URL は、このコードを配置する - * Web サイト/アプリと同一生成元であることが必要です。 + * ウェブサイト/アプリと同一生成元であることが必要です。 */ function addPublicationFromUrl(biblioid, title, year, url) { console.log("addPublicationFromUrl:", arguments); @@ -1189,8 +1196,8 @@ input { // 警告: 削除するには、作成時に使用したものとまったく同じキーを使用しなければ // なりません。作成時のキーが数値であった場合は、削除時も数値でなければ // なりません。 - req = store.delete(key); - req.onsuccess = function(evt) { + var deleteReq = store.delete(key); + deleteReq.onsuccess = function(evt) { console.log("evt:", evt); console.log("evt.target:", evt.target); console.log("evt.target.result:", evt.target.result); @@ -1198,7 +1205,7 @@ input { displayActionSuccess("Deletion successful"); displayPubList(store); }; - req.onerror = function (evt) { + deleteReq.onerror = function (evt) { console.error("deletePublication:", evt.target.errorCode); }; }; @@ -1298,37 +1305,38 @@ input { openDb(); addEventListeners(); -})(); // Immediately-Invoked Function Expression (IIFE) -</pre> +})(); // Immediately-Invoked Function Expression (IIFE)</pre> <p>{{LiveSampleLink('Full_IndexedDB_example', "オンラインのライブデモを試す")}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<div class="notecard note"> +<p><strong>メモ</strong>: <code>window.indexedDB.open()</code> は非同期です。このメソッドは <code>success</code> イベントが発行されるよりもはるかに前に終了します。すなわち、ある関数 (例えば <code>openDb()</code>) が <code>open()</code> や <code>onsuccess</code> を呼び出すと、 <code>onsuccess</code> ハンドラーが実行されるよりも前に戻ります。この問題は、 <code>transaction()</code> や <code>get()</code> のような他のリクエストメソッドでも言えます。</p> +</div> + +<h2 id="See_also">関連情報</h2> <p>必要に応じて、より多くの情報を知るための記事集です。</p> -<h3 id="Reference" name="Reference">リファレンス</h3> +<h3 id="Reference">リファレンス</h3> <ul> - <li><a href="/ja/docs/Web/API/IndexedDB_API" title="IndexedDB">IndexedDB API リファレンス</a></li> - <li><a href="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_IndexedDB_in_chrome" title="IndexedDB/Using_IndexedDB_in_chrome">chrome で IndexedDB を使用する</a></li> - <li><a href="/ja/docs/Web/API/IndexedDB_API/Using_JavaScript_Generators_in_Firefox">Firefox で JavaScript ジェネレータを使用する</a></li> - <li>Firefox のソースコード内の、IndexedDB <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom%2FindexedDB%2F.*%5C.idl&regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&string=dom/indexedDB/.*\.idl&regexp=1">インタフェースのファイル</a></li> + <li><a href="/ja/docs/Web/API/IndexedDB_API">IndexedDB API リファレンス</a></li> + <li><a href="https://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li> + <li>IndexedDB <a class="link-https" href="https://searchfox.org/mozilla-central/search?q=dom%2FindexedDB%2F.*%5C.idl&path=&case=false®exp=true">インターフェイスファイル</a> (Firefox のソースコード内)</li> </ul> -<h3 id="Tutorials_and_guides" name="Tutorials_and_guides">チュートリアルとガイド</h3> +<h3 id="Tutorials_and_guides">チュートリアルとガイド</h3> <ul> - <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> - <li><a href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> + <li><a href="https://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li> + <li><a href="https://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB — The Store in Your Browser</a></li> </ul> -<h3 id="Libraries" name="Libraries">ライブラリ</h3> +<h3 id="Libraries">ライブラリー</h3> <ul> - <li><a href="http://mozilla.github.io/localForage/">localForage</a>: クライアントサイドのデータストレージ向けに、シンプルな name:value 形式の構文を提供する Polyfill です。バックグラウンドで IndexedDB を使用しますが、IndexedDB をサポートしないブラウザーでは WebSQL や localStorage にフォールバックします。</li> - <li><a href="http://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> + <li><a href="https://localforage.github.io/localForage/">localForage</a>: クライアント側のデータストレージ向けに、シンプルな name:value 形式の構文を提供するポリフィルです。バックグラウンドで IndexedDB を使用しますが、IndexedDB に対応していないブラウザーでは WebSQL や localStorage にフォールバックします。</li> + <li><a href="https://www.dexie.org/">dexie.js</a>: 優良でシンプルな構文により高速なコード開発を可能にする、IndexedDB のラッパーです。</li> <li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>: IndexedDB の MongoDB ライクなインターフェイスで、MongoDB でおなじみのフィルタリング、射影、ソート、アップデート、集計をサポートしています。</li> - <li><a href="http://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li> + <li><a href="https://jsstore.net/">JsStore</a>: シンプルで高度な IndexedDB ラッパーで SQL ライクな文法があります。</li> </ul> diff --git a/files/ja/web/api/navigator/appcodename/index.html b/files/ja/web/api/navigator/appcodename/index.html new file mode 100644 index 0000000000..befb274cb5 --- /dev/null +++ b/files/ja/web/api/navigator/appcodename/index.html @@ -0,0 +1,44 @@ +--- +title: Navigator.appCodeName +slug: Web/API/Navigator/appCodeName +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference +browser-compat: api.Navigator.appCodeName +translation_of: Web/API/NavigatorID/appCodeName +original_slug: Web/API/NavigatorID/appCodeName +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.appCodeName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Mozilla</code>" です。このプロパティは互換性のためだけに維持されています。</p> + +<div class="note"><strong>メモ:</strong> このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Mozilla</code>" を返します。 +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>codeName</em> = navigator.appCodeName +</pre> + +<h3 id="Value">値</h3> + +<p>"<code>Mozilla</code>" という文字列です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appName")}}</li> + <li>{{domxref("Navigator.product")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/appname/index.html b/files/ja/web/api/navigator/appname/index.html new file mode 100644 index 0000000000..0ecf702fba --- /dev/null +++ b/files/ja/web/api/navigator/appname/index.html @@ -0,0 +1,46 @@ +--- +title: Navigator.appName +slug: Web/API/Navigator/appName +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference +browser-compat: api.Navigator.appName +translation_of: Web/API/NavigatorID/appName +original_slug: Web/API/NavigatorID/appName +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.appName</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Netscape</code>" です。このプロパティは互換性ためだけに維持されています。</p> + +<div class="notecard note"> + <h4>メモ</h4> + <p>このプロパティが実際のブラウザー名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Netscape</code>" を返します。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><var>appName</var> = navigator.appName +</pre> + +<h3 id="Value">値</h3> + +<p>文字列 "<code>Netscape</code>" です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appCodeName")}}</li> + <li>{{domxref("Navigator.product")}}</li> +</ul> diff --git a/files/ja/orphaned/web/api/navigatorid/appversion/index.html b/files/ja/web/api/navigator/appversion/index.html index 48436c71ca..d3908733b7 100644 --- a/files/ja/orphaned/web/api/navigatorid/appversion/index.html +++ b/files/ja/web/api/navigator/appversion/index.html @@ -1,13 +1,14 @@ --- -title: NavigatorID.appVersion -slug: orphaned/Web/API/NavigatorID/appVersion +title: Navigator.appVersion +slug: Web/API/Navigator/appVersion tags: - API - Deprecated - - NavigatorID + - Navigator - Property - Reference - appVersion +browser-compat: api.Navigator.appVersion translation_of: Web/API/NavigatorID/appVersion original_slug: Web/API/NavigatorID/appVersion --- @@ -16,7 +17,7 @@ original_slug: Web/API/NavigatorID/appVersion <p>"<code>4.0</code>" またはそのブラウザーのバージョン情報を表す文字列のどちらかを返します。</p> <div class="notecard note"> - <h4>注</h4> + <h4>メモ</h4> <p>このプロパティがブラウザーの正しいバージョンを返すことを期待しないでください。</p> </div> @@ -42,24 +43,8 @@ original_slug: Web/API/NavigatorID/appVersion <h2 id="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('HTML WHATWG', '#dom-navigator-appversion', - 'NavigatorID.appVersion')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} <h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.NavigatorID.appVersion")}}</p> +<p>{{Compat}}</p> diff --git a/files/ja/web/api/navigator/hardwareconcurrency/index.html b/files/ja/web/api/navigator/hardwareconcurrency/index.html new file mode 100644 index 0000000000..cd8a14f7ab --- /dev/null +++ b/files/ja/web/api/navigator/hardwareconcurrency/index.html @@ -0,0 +1,58 @@ +--- +title: Navigator.hardwareConcurrency +slug: Web/API/Navigator/hardwareConcurrency +tags: + - API + - HTML DOM + - Navigator + - Property + - hardwareConcurrency +browser-compat: api.Navigator.hardwareConcurrency +translation_of: Web/API/Navigator/hardwareConcurrency +original_slug: Web/API/NavigatorConcurrentHardware/hardwareConcurrency +--- +<p>{{APIRef("HTML DOM")}}</p> + +<p><code><strong>navigator.hardwareConcurrency</strong></code> は読み取り専用のプロパティで、ユーザーのコンピューター上でスレッドを実行するために使用可能な論理プロセッサー数を返します。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>logicalProcessors</em> = window.navigator.hardwareConcurrency +</pre> + +<h2 id="Value">値</h2> + +<p>論理プロセッサーのコア数を示す数値です。</p> + +<p>現代のコンピューターは CPU に複数の物理プロセッサーのコアがあります (通常は 2 コアか 4 コア)。しかし、通常それぞれの物理コアは高度なスケジューリング技術を用いて、一度に複数スレッドを実行することができます。 したがって、例えば 4 コアの CPU は 8 個の<strong>論理プロセッサーコア</strong>を提供することができます。論理プロセッサーのコア数は、コンテキスト切り替えを必要とせずに一度に効果的に実行できるスレッドの数を測定するために利用できます。</p> + +<p>しかしながら、ブラウザーはより少ない論理コア数を報告することを選択することで、一度に実行できる {{domxref("Worker")}} の数をより正確に表すことがあります。したがって、この数値をユーザーのシステムのコア数の絶対的な測定値として扱わないようにしてください。</p> + +<h2 id="Examples">例</h2> + +<p>この例では、ブラウザーが報告した論理プロセッサーごとに {{domxref("Worker")}} が 1 つ作られ、新しいワーカーへの参照と、そのワーカーをまだ使用しているかどうかを示す論理値の値を含むレコードを作っています。これらのオブジェクトは後で使用するために配列に順々に格納されています。後でリクエストを処理するために使うワーカーのプールを作っています。</p> + +<pre class="brush: js">let workerList = []; + +for (let i = 0; i < window.navigator.hardwareConcurrency; i++) { + let newWorker = { + worker: new Worker('cpuworker.js'), + inUse: false + }; + workerList.push(newWorker); +}</pre> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator")}}</li> + <li>{{domxref("WorkerNavigator")}}</li> +</ul> diff --git a/files/ja/web/api/navigator/index.html b/files/ja/web/api/navigator/index.html index 19a930cabf..b40f8c485a 100644 --- a/files/ja/web/api/navigator/index.html +++ b/files/ja/web/api/navigator/index.html @@ -32,7 +32,7 @@ translation_of: Web/API/Navigator <dt>{{domxref("Navigator.credentials")}} {{readonlyInline}}</dt> <dd>ログインやログアウトの成功といったイベントが発生したときに、資格情報を要求してユーザーエージェントへ通知する手段を提供する {{domxref("CredentialsContainer")}} インターフェイスを返します。</dd> <dt>{{domxref("Navigator.deviceMemory")}} {{readonlyInline}} {{experimental_inline}}</dt> - <dd>端末のメモリーをギガバイト単位で返します。この値は 2 の階乗の最も近い値を 1024 で割った概算値です。</dd> + <dd>端末のメモリーをギガバイト単位で返します。この値は 2 の累乗に最も近い値を 1024 で割った概算値です。</dd> <dt>{{domxref("Navigator.doNotTrack")}} {{readonlyInline}} {{experimental_inline}}</dt> <dd>ユーザーの do-not-track 設定の値を返します。この値が "yes" であるとき、ウェブサイトやアプリケーションはユーザーを追跡するべきではありません。</dd> <dt>{{domxref("Navigator.geolocation")}} {{readonlyInline}}</dt> diff --git a/files/ja/web/api/navigator/platform/index.html b/files/ja/web/api/navigator/platform/index.html new file mode 100644 index 0000000000..c0e4620269 --- /dev/null +++ b/files/ja/web/api/navigator/platform/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.platform +slug: Web/API/Navigator/platform +tags: + - API + - Deprecated + - HTML DOM + - Navigator + - Property + - Reference + - platform +browser-compat: api.Navigator.platform +translation_of: Web/API/NavigatorID/platform +original_slug: Web/API/NavigatorID/platform +--- +<p>{{ APIRef("HTML DOM") }} {{Deprecated_Header}}</p> + +<p>ブラウザーのプラットフォームを表す文字列を返します。仕様書ではブラウザーが常に空文字列を返すことを許可していますので、信頼できる答えを得るためにこのプロパティを頼らないようにしてください。</p> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>platform</em> = navigator.platform +</pre> + +<h3 id="Value">値</h3> + +<p>ブラウザーを実行しているプラットフォームを識別する {{domxref("DOMString")}}、あるいはブラウザーがプラットフォームの識別を断わった (または識別できない) 場合は空文字列になります。<code>platform</code> は空文字列か、ブラウザーを実行しているプラットフォームを表す文字列でなければなりません。</p> + +<p>例: "<code>MacIntel</code>", "<code>Win32</code>", "<code>FreeBSD i386</code>", "<code>WebTV OS</code>"</p> + +<h2 id="Example">例</h2> + +<pre class="brush: js">console.log(navigator.platform);</pre> + +<h2 id="Usage_notes">使用上のメモ</h2> + +<p>Chrome、Edge、Firefox 63 以降を含むほとんどのブラウザーは、64 ビット版の Windows で実行していても <code>"Win32"</code> を返します。 Internet Explorer やバージョン 63 より前の Firefox は <code>"Win64"</code> を返します。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> diff --git a/files/ja/web/api/navigator/product/index.html b/files/ja/web/api/navigator/product/index.html new file mode 100644 index 0000000000..d1f5b35941 --- /dev/null +++ b/files/ja/web/api/navigator/product/index.html @@ -0,0 +1,45 @@ +--- +title: Navigator.product +slug: Web/API/Navigator/product +tags: + - API + - Deprecated + - Navigator + - Property + - Reference +browser-compat: api.Navigator.product +translation_of: Web/API/NavigatorID/product +original_slug: Web/API/NavigatorID/product +--- +<div>{{APIRef("HTML DOM")}} {{Deprecated_Header}}</div> + +<p><strong><code>Navigator.product</code></strong> プロパティの値は、どのブラウザーでも常に "<code>Gecko</code>" です。このプロパティは互換性のためだけに維持されています。</p> + + +<div class="notecard note"> + <p>このプロパティが実際の製品名を返すことを期待しないでください。どのブラウザーもこのプロパティの値として "<code>Gecko</code>" を返します。</p> +</div> + +<h2 id="Syntax">構文</h2> + +<pre class="brush: js"><em>productName</em> = navigator.product +</pre> + +<h3 id="Value">値</h3> + +<p>文字列 "<code>Gecko</code>" です。</p> + +<h2 id="Specifications">仕様書</h2> + +{{Specifications}} + +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> + +<p>{{Compat}}</p> + +<h2 id="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Navigator.appCodeName")}}</li> + <li>{{domxref("Navigator.appName")}}</li> +</ul> diff --git a/files/ja/orphaned/web/api/navigatorid/useragent/index.html b/files/ja/web/api/navigator/useragent/index.html index 6fe20d0c79..d02c88de43 100644 --- a/files/ja/orphaned/web/api/navigatorid/useragent/index.html +++ b/files/ja/web/api/navigator/useragent/index.html @@ -1,13 +1,13 @@ --- -title: NavigatorID.userAgent -slug: orphaned/Web/API/NavigatorID/userAgent +title: Navigator.userAgent +slug: Web/API/Navigator/userAgent tags: - API - - Deprecated - - NavigatorID + - Navigator - Property - Read-only - Reference +browser-compat: api.Navigator.userAgent translation_of: Web/API/NavigatorID/userAgent original_slug: Web/API/NavigatorID/userAgent --- @@ -18,68 +18,50 @@ original_slug: Web/API/NavigatorID/userAgent <div class="note"> <p>仕様書では、ブラウザーがこのフィールドを介して提供する情報をできるだけ少なくすることを求めています。このプロパティの値は、同じブラウザーの将来のバージョンでも同じままであると仮定してはいけません。まったく使用しないようにしたり、ブラウザーの現在のバージョンと過去のバージョンのためだけに使用するようにしてください。新しいブラウザーは、古いブラウザーと同じ UA、またはその一部を使い始めるかもしれません。ブラウザーエージェントが本当にこのプロパティによって広告されたものであるという保証は本当にありません。<br> <br> -また、ブラウザのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。</p> +また、ブラウザーのユーザーはこのフィールドの値を変更することができることを覚えておいてください (UA なりすまし)。</p> </div> <p>ユーザーエージェント文字列の検出に基づくブラウザーの識別は<strong>信頼性が低く</strong>、ユーザーエージェント文字列はユーザーが設定可能なので<strong>推奨されません</strong>。例えば、以下のようになります。</p> <ul> - <li>Mozilla Suite と Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。</li> + <li>Firefox では、 about:config の "general.useragent.override" 設定を使うことができます。いくつかの Firefox の拡張や多機能バーでも設定可能です。</li> <li>Opera 6 以降では、メニューからブラウザー識別文字列を設定できます。</li> - <li>Microsoft Internet Explorer では、 Windows レジストリを利用できます。</li> - <li>Safari と iCab は、メニューから、ブラウザユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。</li> + <li>Microsoft Internet Explorer では、 Windows レジストリーを使用します。</li> + <li>Safari と iCab は、メニューから、ブラウザーユーザエージェントを定義済みの Internet Explorer、または、 Netscape の文字列に変更できます。</li> </ul> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> -<pre class="syntaxbox notranslate">var <var>ua</var> = navigator.userAgent; +<pre class="brush: js">var <var>ua</var> = navigator.userAgent; </pre> -<h3 id="Value" name="Value">値</h3> +<h3 id="Value">値</h3> <p>{{domxref("DOMString")}} で、ブラウザーが {{Glossary("HTTP")}} ヘッダーで提供する完全なユーザーエージェント文字列と、 {{domxref("Navigator")}} オブジェクト上のメソッドやその他の関連メソッドへのレスポンスを指定します。</p> <p>ユーザーエージェント文字列は形式的な構造に基づいて構築されており、いくつかの情報に分解することができます。これらの情報の各部分は、ユーザ－が設定可能な他の Navigator のプロパティから来ています。Gecko ベースのブラウザは以下の一般的な構造に準拠しています。</p> -<pre class="notranslate">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; +<pre class="brush: js">userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; Localization; rv: revision-version-number) product/productSub Application-Name Application-Name-version </pre> -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<pre class="brush:js notranslate">alert(window.navigator.userAgent) +<pre class="brush:js">alert(window.navigator.userAgent) // alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1" </pre> -<ul> -</ul> - -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="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('HTML WHATWG', '#dom-navigator-useragent', 'NavigatorID.userAgent')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>初回定義</td> - </tr> - </tbody> -</table> +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("api.NavigatorID.userAgent")}}</p> +<p>{{Compat}}</p> -<h2 id="See_also" name="See_also">関連情報</h2> +<h2 id="See_also">関連情報</h2> <ul> - <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li> + <li>{{httpheader("User-Agent")}} HTTP ヘッダー</li> </ul> diff --git a/files/ja/web/api/xmlserializer/index.html b/files/ja/web/api/xmlserializer/index.html index 48bd19f8e5..1bae104f64 100644 --- a/files/ja/web/api/xmlserializer/index.html +++ b/files/ja/web/api/xmlserializer/index.html @@ -96,7 +96,7 @@ document.body.insertAdjacentHTML('afterbegin', inp_xmls);</pre> <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a href="/ja/Parsing_and_serializing_XML" title="ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a href="/ja/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> <li>{{domxref("XMLHttpRequest")}}</li> <li>{{domxref("DOMParser")}}</li> </ul> diff --git a/files/ja/web/css/@media/scripting/index.html b/files/ja/web/css/@media/scripting/index.html index af015db428..0d01c7bed8 100644 --- a/files/ja/web/css/@media/scripting/index.html +++ b/files/ja/web/css/@media/scripting/index.html @@ -32,7 +32,7 @@ translation_of: Web/CSS/@media/scripting <h3 id="HTML">HTML</h3> -<pre class="brush: htm notranslatel notranslate"><p class="script-none">スクリプトは利用できません。 :-(</p> +<pre class="brush: html notranslate"><p class="script-none">スクリプトは利用できません。 :-(</p> <p class="script-initial-only">スクリプトはページを読み込んでいる間だけ有効です。残念。</p> <p class="script-enabled">スクリプトは有効です。 :-)</p> </pre> 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/inheritance/index.html b/files/ja/web/css/inheritance/index.html index bf2dd3f663..9bf6dfaa86 100644 --- a/files/ja/web/css/inheritance/index.html +++ b/files/ja/web/css/inheritance/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/inheritance <h2 id="Non-inherited_properties" name="Non-inherited_properties">非継承プロパティ</h2> -<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value" title="ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p> +<p>値を持たない<strong>非継承プロパティ</strong>が要素に指定された場合、要素はプロパティの<a href="/ja/docs/Web/CSS/initial_value">初期値</a>（※各プロパティのページの「概要」の章に記されています）を取得します。</p> <p>非継承プロパティの一般的な例としては {{ Cssxref("border") }} プロパティが挙げられます。次の様なスタイルルールを指定し、</p> 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/padding-bottom/index.html b/files/ja/web/css/padding-bottom/index.html index 877b22fa80..8aa21ff9bb 100644 --- a/files/ja/web/css/padding-bottom/index.html +++ b/files/ja/web/css/padding-bottom/index.html @@ -104,7 +104,7 @@ padding-bottom: unset; <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model" title="ja/CSS/box model">CSS 基本ボックスモデルの紹介</a></li> + <li><a href="/ja/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model">CSS 基本ボックスモデルの紹介</a></li> <li>{{cssxref("padding-top")}}, {{cssxref("padding-right")}}, {{cssxref("padding-left")}} および {{cssxref("padding")}} 一括指定</li> <li>対応付けられる論理的プロパティ: {{cssxref("padding-block-start")}}, {{cssxref("padding-block-end")}}, {{cssxref("padding-inline-start")}}, {{cssxref("padding-inline-end")}} および一括指定の {{cssxref("padding-block")}} と {{cssxref("padding-inline")}}</li> </ul> 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/guide/css/getting_started/challenge_solutions/index.html b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html index df62dacd38..a3825b30aa 100644 --- a/files/ja/web/guide/css/getting_started/challenge_solutions/index.html +++ b/files/ja/web/guide/css/getting_started/challenge_solutions/index.html @@ -3,7 +3,7 @@ title: Challenge solutions slug: Web/Guide/CSS/Getting_started/Challenge_solutions translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions --- -<p>このページは、 <a href="/ja/CSS/Getting_Started" title="ja/CSS/Getting Started">CSS Getting Started</a> チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。</p> +<p>このページは、 <a href="/ja/CSS/Getting_Started">CSS Getting Started</a> チュートリアルにあるチャレンジの解答例です。これ以外の解答も考えられます。以下の章名はチュートリアルページのタイトルと一致します。</p> <h2 id="CSS_をなぜ用いるか"><a href="/ja/CSS/Getting_Started/Why_use_CSS" id="Why_use_CSS_Colors" title="MDC">CSS をなぜ用いるか</a></h2> <h3 id="Colors">Colors</h3> <dl> @@ -16,7 +16,7 @@ translation_of: Web/Guide/CSS/Getting_started/Challenge_solutions <dt> Solution</dt> <dd> - CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/ja/CSS/color_value" title="ja/CSS/color value">CSS Color value</a> for a complete list as well as other ways of specifying colors.</dd> + CSS supports common color names like <code>orange</code>, <code>yellow</code>, <code>blue</code>, <code>green</code>, or <code>black</code>. It also supports some more exotic color names like <code>chartreuse</code>, <code>fuschia</code>, or <code>burlywood</code>. See <a href="/ja/CSS/color_value">CSS Color value</a> for a complete list as well as other ways of specifying colors.</dd> </dl> <h2 id="どのように_CSS_は動作するのか"><a href="/ja/CSS/Getting_Started/How_CSS_works" id="How_CSS_works_DOM_inspector" title="MDC">どのように CSS は動作するのか</a></h2> <h3 id="DOM_inspector">DOM inspector</h3> @@ -244,7 +244,7 @@ h3:before { } </pre> </dd> </dl> -<h2 id="表"><a href="/ja/CSS/Getting_Started/Tables" id="Tables" title="ja/CSS/Getting_Started/Tables">表</a></h2> +<h2 id="表"><a href="/ja/CSS/Getting_Started/Tables" id="Tables">表</a></h2> <h3 id="Borders_on_data_cells_only">Borders on data cells only</h3> <dl> <dt> diff --git a/files/ja/web/guide/html/content_categories/index.html b/files/ja/web/guide/html/content_categories/index.html index 9f0b98251f..cc2b9c20f3 100644 --- a/files/ja/web/guide/html/content_categories/index.html +++ b/files/ja/web/guide/html/content_categories/index.html @@ -84,9 +84,9 @@ translation_of: Web/Guide/HTML/Content_categories <li>{{HTMLElement("area")}}: {{HTMLElement("map")}} 要素の子孫である場合</li> <li>{{HTMLElement("del")}}: 記述コンテンツだけを含む場合</li> <li>{{HTMLElement("ins")}}: 記述コンテンツだけを含む場合</li> - <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop" title="ja/docs/HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> + <li>{{HTMLElement("link")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> <li>{{HTMLElement("map")}}: 記述コンテンツだけを含む場合</li> - <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop" title="ja/docs/HTML/Global attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> + <li>{{HTMLElement("meta")}}: <a href="/ja/docs/HTML/Global_attributes#itemprop"><strong>itemprop</strong></a> 属性がある場合</li> </ul> <h3 id="Embedded_content" name="Embedded_content">埋め込みコンテンツ</h3> diff --git a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html index 07826fa870..8a2b1b2b00 100644 --- a/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html +++ b/files/ja/web/guide/html/editable_content/rich-text_editing_in_mozilla/index.html @@ -50,7 +50,7 @@ translation_of: Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla <p>さらに、 Mozilla には、ドキュメントが designMode になると、そのドキュメント内のイベントが無効になるという特徴があります。designMode をオフにすると (Mozilla 1.5 ではこの切り替えが可能となります)、再びイベントはアクティブになります。</p> -<p><strong>さらなる情報</strong> は、<a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla" title="ja/Migrate apps from Internet Explorer to Mozilla">Migrate apps from Internet Explorer to Mozilla</a> の <a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing" title="ja/Migrate apps from Internet Explorer to Mozilla#Rich text editing">Rich text editing</a> の節をご覧ください。</p> +<p><strong>さらなる情報</strong> は、<a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla">Migrate apps from Internet Explorer to Mozilla</a> の <a class="internal" href="/ja/Migrate_apps_from_Internet_Explorer_to_Mozilla#Rich_text_editing">Rich text editing</a> の節をご覧ください。</p> <h3 id="Examples" name="Examples">例</h3> @@ -277,7 +277,7 @@ img.intLink { border: 0; } <li><code><a href="/ja/docs/Web/API/Document/designMode">designMode</a></code></li> <li><a href="https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/ms537834(v=vs.85)">MSDN: How to Create an HTML Editor Application</a></li> <li><a class="external" href="http://www.kevinroth.com/rte/demo.htm">A closed source, cross-browser rich-text editing demo</a></li> - <li><a href="/ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode" title="ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> + <li><a href="/ja/Rich-Text_Editing_in_Mozilla/Class_xbDesignMode">xbDesignMode; a JavaScript helper class for easier cross-browser development using designMode.</a></li> <li><a class="external" href="http://starkravingfinkle.org/blog/2007/07/firefox-3-contenteditable/">Firefox 3 and contentEditable</a></li> </ul> diff --git a/files/ja/web/guide/parsing_and_serializing_xml/index.html b/files/ja/web/guide/parsing_and_serializing_xml/index.html index 9adb073f0c..5a473bfc8f 100644 --- a/files/ja/web/guide/parsing_and_serializing_xml/index.html +++ b/files/ja/web/guide/parsing_and_serializing_xml/index.html @@ -109,7 +109,7 @@ const xmlStr = serializer.serializeToString(doc);</pre> <h2 id="See_also" name="See_also">関連項目</h2> <ul> - <li><a class="internal" href="/ja/XPath" title="ja/XPath">XPath</a></li> + <li><a class="internal" href="/ja/XPath">XPath</a></li> <li>{{domxref("XMLHttpRequest")}}</li> <li>{{domxref("Document")}}, {{domxref("XMLDocument")}} および {{domxref("HTMLDocument")}}</li> </ul> diff --git a/files/ja/web/html/element/xmp/index.html b/files/ja/web/html/element/xmp/index.html index 639da9a3c8..a2e858eb0f 100644 --- a/files/ja/web/html/element/xmp/index.html +++ b/files/ja/web/html/element/xmp/index.html @@ -26,7 +26,7 @@ translation_of: Web/HTML/Element/xmp <h2 id="Attributes" name="Attributes">属性</h2> -<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal" title="ja/docs/HTML/global attributes">グローバル属性</a> 以外の属性を持ちません。</p> +<p>この要素は、すべての要素が持つ <a href="/ja/docs/HTML/global_attributes" rel="internal">グローバル属性</a> 以外の属性を持ちません。</p> <h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> diff --git a/files/ja/web/html/inline_elements/index.html b/files/ja/web/html/inline_elements/index.html index cb1100ea03..6d4ba241e0 100644 --- a/files/ja/web/html/inline_elements/index.html +++ b/files/ja/web/html/inline_elements/index.html @@ -161,7 +161,7 @@ the block-level element's influence.</div></pre> <h2 id="See_also" name="See_also">関連情報</h2> <ul> - <li><a href="/ja/HTML/Block-level_elements" title="ja/HTML/Block-level_elements">ブロックレベル要素</a></li> + <li><a href="/ja/HTML/Block-level_elements">ブロックレベル要素</a></li> <li><a href="/ja/docs/Web/HTML/Element">HTML 要素リファレンス</a></li> <li>{{cssxref("display")}}</li> <li><a href="/ja/docs/Web/Guide/HTML/Content_categories">コンテンツカテゴリ</a></li> diff --git a/files/ja/web/http/headers/expect-ct/index.html b/files/ja/web/http/headers/expect-ct/index.html index e815e30946..d402887ddb 100644 --- a/files/ja/web/http/headers/expect-ct/index.html +++ b/files/ja/web/http/headers/expect-ct/index.html @@ -6,16 +6,33 @@ tags: - Reference - ヘッダー - レスポンスヘッダー +browser-compat: http.headers.Expect-CT translation_of: Web/HTTP/Headers/Expect-CT --- <p>{{HTTPSidebar}}</p> -<p><code>Expect-CT</code> ヘッダーは、サイトが認証透過性の要件の報告や強制に参加して、サイトの不正な認証情報が通知されない状態を防ぐことができます。</p> +<p><code>Expect-CT</code> ヘッダーは、サイトが<a href="/ja/docs/Web/Security/Certificate_Transparency">証明書の透明性</a>の要件の報告や強制に参加して、サイトの不正な認証情報の使用が通知されない状態を防ぐことができます。</p> + +<p>CT の要件は、以下のいずれかの仕組みで満たすことができます。</p> + +<ul> + <li>個々のログで発行された署名付き証明書のタイムスタンプを埋め込めるようにするための X.509v3 証明書の拡張</li> + <li>ハンドシェイク中に送信される <code>signed_certificate_timestamp</code> 型の TLS 拡張</li> + <li>OCSP ステープリング (つまり、 <code>status_request</code> TLS 拡張) に対応し、 <code>SignedCertificateTimestampList</code> を提供すること</li> +</ul> <div class="note"> <p>サイトが <code>Expect-CT</code> ヘッダーを有効にすると、ブラウザーが<strong><a href="https://www.certificate-transparency.org/known-logs">公開 CT ログ</a></strong>に現れるサイトのすべての認証情報をチェックするよう要求します。</p> </div> +<div class="notecard note"> + <p><strong>メモ:</strong> ブラウザーは、 HTTP では <code>Expect-CT</code> ヘッダーを<strong>無視</strong>し、 HTTPS 接続でのみ効果を発揮します。</p> +</div> + +<div class="notecard note"> +<p><strong>メモ:</strong> <code>Expect-CT</code> は 2021 年 6 月に廃止される可能性が高いです。 2018 年 5 月以降、新しい証明書は既定で SCT に対応することが期待されています。 2018 年 3 月以前の証明書は 39 ヶ月の有効期限が認められていましたが、それらが 2021 年 6 月にすべて失効します。</p> +</div> + <table class="properties"> <tbody> <tr> @@ -29,43 +46,48 @@ translation_of: Web/HTTP/Headers/Expect-CT </tbody> </table> -<h2 id="Syntax" name="Syntax">構文</h2> +<h2 id="Syntax">構文</h2> <pre>Expect-CT: report-uri="<uri>", enforce, max-age=<age></pre> -<h2 id="Directives" name="Directives">ディレクティブ</h2> +<h2 id="Directives">ディレクティブ</h2> <dl> - <dt>max-age</dt> + <dt><code>max-age</code></dt> <dd> <p><code>Expect-CT</code> ヘッダーフィールドを受信した後で、ユーザーエージェントがメッセージを受信したホストを、既知の Expect-CT ホストと見なすべき時間を秒数で指定します。</p> - <p>キャッシュが表現可能な値よりも大きな値を受信した場合や、計算でオーバーフローが発生した場合、キャッシュは値を 2147483648 (2^31) または使用している表現方法で最も大きな整数値とみなします。</p> + <p>キャッシュが表現可能な値よりも大きな値を受信した場合や、計算でオーバーフローが発生した場合、キャッシュは値を 2,147,483,648 (2^31) または使用している表現方法で最も大きな整数値とみなします。</p> </dd> - <dt>report-uri="<uri>" {{optional_inline}}</dt> + <dt><code>report-uri="<uri>"</code> {{optional_inline}}</dt> <dd> - <p>ユーザーエージェントが Expect-CT の失敗を報告する URI を指定します。</p> - <code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに認証透過性ポリシーに従い、違反を報告することを指示します。 - - <p> </p> - </dd> - <dt>enforce {{optional_inline}}</dt> + <p>ユーザーエージェントが <code>Expect-CT</code> の失敗を報告する URI を指定します。</p> + <code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに証明書の透明性ポリシーに従い、違反を報告することを指示します。</dd> + <dt><code>enforce</code> {{optional_inline}}</dt> <dd> - <p>ユーザーエージェントに (報告するだけでなく) 認証透過性ポリシーに従い、ユーザーエージェントが認証透過性ポリシーに違反するコネクションを拒否するよう指示します。</p> + <p>ユーザーエージェントに (報告するだけでなく) 証明書の透明性ポリシーに従い、ユーザーエージェントが証明書の透明性ポリシーに違反するコネクションを拒否するよう指示します。</p> - <p><code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに認証透過性ポリシーに従い、違反を報告することを指示します。</p> + <p><code>enforce</code> ディレクティブと <code>report-uri</code> ディレクティブが両方ともある場合、設定は "enforce-and-report" の設定と呼ばれ、ユーザーエージェントに証明書の透明性ポリシーに従い、違反を報告することを指示します。</p> </dd> </dl> -<h2 id="Example" name="Example">例</h2> +<h2 id="Example">例</h2> -<p>以下の例は認証透過性を24時間強制し、違反を foo.example に報告することを示します。</p> +<p>以下の例は証明書の透明性を 24 時間強制し、違反を <code>foo.example</code> に報告することを示します。</p> <pre>Expect-CT: max-age=86400, enforce, report-uri="https://foo.example/report"</pre> -<h2 id="Specifications" name="Specifications">仕様書</h2> +<h2 id="Notes">メモ</h2> + +<p>信頼ストアに手動で追加されたルート CA は、 <code>Expect-CT</code> の報告/強制を上書きし、抑制します。</p> + +<p>ブラウザーは、サイトが証明書の透明性要件を満たす証明書を提供できることを「証明」しない限り、 <code>Expect-CT</code> ポリシーを記憶しません。ブラウザーは、どの CT ログが証明書のログとして信頼できるとみなされるかについて、独自の信頼モデルを実装しています。</p> + +<p>Chrome のビルドは、インストールのビルド日から 10 週間後に <code>Expect-CT</code> ポリシーの施行を停止するように設計されています。</p> + +<h2 id="Specifications">仕様書</h2> <table class="standard-table"> <thead> @@ -76,12 +98,12 @@ translation_of: Web/HTTP/Headers/Expect-CT </thead> <tbody> <tr> - <td><a href="https://tools.ietf.org/html/draft-ietf-httpbis-expect-ct-07">Internet Draft</a></td> + <td><a href="https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-expect-ct-08">Internet Draft</a></td> <td>Expect-CT Extension for HTTP</td> </tr> </tbody> </table> -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> +<h2 id="Browser_compatibility">ブラウザーの互換性</h2> -<p>{{Compat("http.headers.Expect-CT")}}</p> +<p>{{Compat}}</p> diff --git a/files/ja/web/javascript/about_javascript/index.html b/files/ja/web/javascript/about_javascript/index.html index 072f271b5c..ab4cb35741 100644 --- a/files/ja/web/javascript/about_javascript/index.html +++ b/files/ja/web/javascript/about_javascript/index.html @@ -49,10 +49,10 @@ translation_of: Web/JavaScript/About_JavaScript <dd>C/C++エンジンでMozillaが実装したJavaScript (SpiderMonkey と呼ばれている) について、アプリケーションへの組込方法を含む詳細情報。</dd> <dt><a href="/ja/docs/Rhino">Rhino</a></dt> <dd>Javaで記述されたJavaScript実装(Rhino と呼ばれている) についての詳細情報</dd> - <dt><a href="/ja/docs/JavaScript_Language_Resources" title="ja/JavaScript_Language_Resources">言語リソース</a></dt> + <dt><a href="/ja/docs/JavaScript_Language_Resources">言語リソース</a></dt> <dd>公布されている JavaScript の標準を指します。</dd> - <dt><a href="/ja/docs/JavaScript/A_re-introduction_to_JavaScript" title="ja/A_re-introduction_to_JavaScript">JavaScript「再」入門</a></dt> - <dd><a href="/ja/docs/JavaScript/Guide" title="ja/JavaScript/Guide">JavaScript ガイド</a> および <a href="/ja/docs/JavaScript/Reference" title="ja/JavaScript/Reference">JavaScript リファレンス</a></dd> + <dt><a href="/ja/docs/JavaScript/A_re-introduction_to_JavaScript">JavaScript「再」入門</a></dt> + <dd><a href="/ja/docs/JavaScript/Guide">JavaScript ガイド</a> および <a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a></dd> </dl> <p>JavaScript® は、米国およびその他の国における、Oracle の商標または登録商標です。</p> diff --git a/files/ja/web/javascript/data_structures/index.md b/files/ja/web/javascript/data_structures/index.md index 7f68263671..dc2d9291a8 100644 --- a/files/ja/web/javascript/data_structures/index.md +++ b/files/ja/web/javascript/data_structures/index.md @@ -64,7 +64,7 @@ null 型は値が `null` の 1 つしかありません。詳しくは {{jsxref( 値が代入されていない変数の値は `undefined` になります。詳しくは {{jsxref("undefined")}} および [Undefined](/ja/docs/Glossary/undefined) を参照してください。 -### 整数型 (Number) +### 数値型 (Number) ECMAScript には、**数値型** (Number) と**長整数型** (BigInt、下記参照) の 2 つの組み込み数値型があります。 diff --git a/files/ja/web/javascript/guide/working_with_objects/index.html b/files/ja/web/javascript/guide/working_with_objects/index.html index 6200e1aa36..bf382dd5c7 100644 --- a/files/ja/web/javascript/guide/working_with_objects/index.html +++ b/files/ja/web/javascript/guide/working_with_objects/index.html @@ -109,10 +109,10 @@ myCar.year = 1969</pre> <h2 id="Enumerate_the_properties_of_an_object" name="Enumerate_the_properties_of_an_object">オブジェクトの全プロパティの列挙</h2> -<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla" title="ja/docs/JavaScript/ECMAScript 5 support in Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p> +<p><a href="/ja/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_5_support_in_Mozilla">ECMAScript 5</a> 以降では、オブジェクトのプロパティをリストアップ/トラバース (横断走査) する言語特有の方法が 3 つあります。</p> <ul> - <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in" title="ja/docs/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br> + <li><code><a href="/ja/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> ループ<br> この方法は、オブジェクトとそのプロトタイプチェーンにある列挙可能なプロパティをすべて横断します</li> <li>{{jsxref("Object.keys", "Object.keys(o)")}}<br> このメソッドは、そのオブジェクト独自の (プロトタイプチェーンを除く) 列挙可能なすべてのプロパティ名 ("keys") を配列で返します</li> @@ -288,7 +288,7 @@ fish.displayType(); // 出力 : Fishes</pre> car1.color = 'black'; </pre> -<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype" title="ja/docs/JavaScript/Reference/Global Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p> +<p>詳しくは、<a href="/ja/docs/JavaScript/Reference">JavaScript リファレンス</a>内にある、<code>Function</code> オブジェクトの <a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype"><code>prototype</code> プロパティ</a>を参照してください。</p> <h2 id="Defining_methods" name="Defining_methods">メソッドの定義</h2> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/index.html b/files/ja/web/javascript/reference/global_objects/intl/locale/index.html deleted file mode 100644 index 58744e2b26..0000000000 --- a/files/ja/web/javascript/reference/global_objects/intl/locale/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Intl.Locale -slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale -tags: - - Class - - Internationalization - - Intl - - JavaScript - - Reference - - クラス - - 国際化 -translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale ---- -<div>{{JSRef}}</div> - -<p><span class="seoSummary"><strong><code>Intl.Locale</code></strong> オブジェクトは、 Unicode ロケール識別子を表す Intl オブジェクトの標準組み込みプロパティです。</span></p> - -<div>{{EmbedInteractiveExample("pages/js/intl-locale.html")}}</div> - -<h2 id="Description" name="Description">解説</h2> - -<p><code><strong>Intl.Locale</strong></code> オブジェクトは、 Unicode ロケールをより簡単に操作できるようにするために作成されました。 Unicode は、ロケールを<em>ロケール識別子</em>と呼ばれる文字列で表します。ロケール識別子は、<em>言語識別子</em>と<em>拡張タグ</em>から構成されます。言語識別子はロケールの中核となるもので、<em>言語</em>、<em>文字体系</em>、<em>地域サブタグ</em>から構成されます。ロケールに関する追加情報は、オプションの拡張タグに格納されます。<em>拡張タグ</em>には、暦の種類や時計の種類、数値表記法の種類などのロケールに関する情報が格納されています。</p> - -<p>従来、 Intl API は Unicode と同様に文字列を使用してロケールを表していました。これはシンプルで軽量な解決策であり、うまく機能します。しかし、 Locale クラスを追加することで、言語、文字体系、地域、拡張タグの解析や操作が容易になります。</p> - -<h2 id="Constructor" name="Constructor">コンストラクター</h2> - -<dl> - <dt>{{jsxref("Locale/Locale", "Intl.Locale()")}}</dt> - <dd>新しい <code>Locale</code> オブジェクトを生成します。</dd> -</dl> - -<h2 id="Properties" name="Properties">プロパティ</h2> - -<dl> - <dt><code>Intl.Locale.prototype</code></dt> - <dd><code>Locale</code> コンストラクターのプロトタイプオブジェクトです。</dd> -</dl> - -<h2 id="Instance_properties" name="Instance_properties">インスタンスプロパティ</h2> - -<dl> - <dt>{{jsxref("Locale/baseName", "Intl.Locale.prototype.baseName")}}</dt> - <dd>この <code>Locale</code> に関する基本的な情報を、完全なデータ文字列の部分文字列の形で返します。</dd> - <dt>{{jsxref("Locale/calendar", "Intl.Locale.prototype.calendar")}}</dt> - <dd>このロケールの暦年を示す <code>Locale</code> の部分を返します。</dd> - <dt>{{jsxref("Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}}</dt> - <dd>ロケールの照合規則に大文字・小文字を考慮しているかどうかを返します。</dd> - <dt>{{jsxref("Locale/collation", "Intl.Locale.prototype.collation")}}</dt> - <dd>この <code>Locale</code> の照合の種類を返します。これは、ロケールの規則に従って文字列を並べ替えるために使用します。</dd> - <dt>{{jsxref("Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}}</dt> - <dd>このロケールが使用している時刻保持書式の規約を返します。</dd> - <dt>{{jsxref("Locale/language", "Intl.Locale.prototype.language")}}</dt> - <dd>このロケールに関連づけられた言語を返します。</dd> - <dt>{{jsxref("Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}}</dt> - <dd>このロケールが使用している数値表記法を返します。</dd> - <dt>{{jsxref("Locale/numeric", "Intl.Locale.prototype.numeric")}}</dt> - <dd>このロケールが数字に対して特殊な照合順序を持っているかどうかを返します。</dd> - <dt>{{jsxref("Locale/region", "Intl.Locale.prototype.region")}}</dt> - <dd>このロケールに関連付けられた世界の地域 (通常は国) を返します。</dd> - <dt>{{jsxref("Locale/script", "Intl.Locale.prototype.script")}}</dt> - <dd>このロケールで使われている特定の言語を書く際に使用する文字体系を返します。</dd> -</dl> - -<h2 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h2> - -<dl> - <dt>{{jsxref("Locale/minimize", "Intl.Locale.prototype.minimize()")}}</dt> - <dd>既存の値に基づいて、ロケールの言語、表記法、地域の最も可能性の高い値を取得します。</dd> - <dt>{{jsxref("Locale/maximize", "Intl.Locale.prototype.maximize()")}}</dt> - <dd>既存の値に基づいて、ロケールの言語、表記法、地域の最も可能性の高い値を取得します。</dd> - <dt>{{jsxref("Locale/toString", "Intl.Locale.prototype.toString()")}}</dt> - <dd>このロケールの完全なロケール識別子文字列を返します。</dd> -</dl> - -<h2 id="Specifications" name="Specifications">仕様書</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ES Int Draft', '#locale-objects')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> - -<div> -<p>{{Compat("javascript.builtins.Intl.Locale")}}</p> -</div> - -<h2 id="See_also" name="See_also">関連情報</h2> - -<ul> - <li><a href="https://github.com/zbraniecki/Intl.js/tree/intllocale">The Intl.Locale Polyfill</a></li> - <li><a href="https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers">Unicode locale identifiers spec</a></li> -</ul> diff --git a/files/ja/web/javascript/reference/global_objects/intl/locale/index.md b/files/ja/web/javascript/reference/global_objects/intl/locale/index.md new file mode 100644 index 0000000000..2889af2f7c --- /dev/null +++ b/files/ja/web/javascript/reference/global_objects/intl/locale/index.md @@ -0,0 +1,98 @@ +--- +title: Intl.Locale +slug: Web/JavaScript/Reference/Global_Objects/Intl/Locale +tags: + - Class + - Internationalization + - Intl + - JavaScript + - Locale + - Reference + - クラス + - 国際化 +browser-compat: javascript.builtins.Intl.Locale +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale +--- +{{JSRef}} + +**`Intl.Locale`** オブジェクトは、 Unicode ロケール識別子を表す Intl オブジェクトの標準組み込みプロパティです。 + +{{EmbedInteractiveExample("pages/js/intl-locale.html")}} + +<!-- The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. --> + +## 解説 + +**`Intl.Locale`** オブジェクトは、 Unicode ロケールをより簡単に操作できるようにするために作成されました。 Unicode は、ロケールを*ロケール識別子*と呼ばれる文字列で表します。ロケール識別子は、*言語識別子*と*拡張タグ*から構成されます。言語識別子はロケールの中核となるもので、*言語*、*文字体系*、*地域サブタグ*から構成されます。ロケールに関する追加情報は、オプションの拡張タグに格納されます。*拡張タグ*には、暦の種類や時計の種類、数値表記法の種類などのロケールに関する情報が格納されています。 + +従来、 Intl API は Unicode と同様に文字列を使用してロケールを表していました。これはシンプルで軽量な解決策であり、うまく機能します。しかし、 Locale クラスを追加することで、言語、文字体系、地域、拡張タグの解析や操作が容易になります。 + +## コンストラクター + +- {{jsxref("Intl/Locale/Locale", "Intl.Locale()")}} + - : 新しい `Locale` オブジェクトを生成します。 + +## インスタンスプロパティ + +- {{jsxref("Intl/Locale/baseName", "Intl.Locale.prototype.baseName")}} + - : この `Locale` に関する基本的な情報を、完全なデータ文字列の部分文字列の形で返します。 +- {{jsxref("Intl/Locale/calendar", "Intl.Locale.prototype.calendar")}} + - : このロケールの暦年を示す `Locale` の部分を返します。 +- {{jsxref("Intl/Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}} + - : ロケールの照合規則に大文字・小文字を考慮しているかどうかを返します。 +- {{jsxref("Intl/Locale/collation", "Intl.Locale.prototype.collation")}} + - : この `Locale` の照合の種類を返します。これは、ロケールの規則に従って文字列を並べ替えるために使用します。 +- {{jsxref("Intl/Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}} + - : このロケールが使用している時刻保持書式の規則を返します。 +- {{jsxref("Intl/Locale/language", "Intl.Locale.prototype.language")}} + - : このロケールに関連づけられた言語を返します。 +- {{jsxref("Intl/Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}} + - : このロケールが使用している数値表記法を返します。 +- {{jsxref("Intl/Locale/numeric", "Intl.Locale.prototype.numeric")}} + - : このロケールが数字に対して特殊な照合順序を持っているかどうかを返します。 +- {{jsxref("Intl/Locale/region", "Intl.Locale.prototype.region")}} + - : このロケールに関連付けられた世界の地域 (通常は国) を返します。 +- {{jsxref("Intl/Locale/script", "Intl.Locale.prototype.script")}} + - : このロケールで使われている特定の言語を書く際に使用する文字体系を返します。 + +## インスタンスメソッド + +- {{jsxref("Intl/Locale/maximize", "Intl.Locale.prototype.maximize()")}} + - : 既存の値に基づいて、ロケールの言語、表記法、地域の最も可能性の高い値を取得します。 +- {{jsxref("Intl/Locale/minimize", "Intl.Locale.prototype.minimize()")}} + - : {{jsxref("Intl/Locale/maximize", "Locale.maximize()")}} を呼び出すことで追加されるロケールに関する情報を削除しようとします。 +- {{jsxref("Intl/Locale/toString", "Intl.Locale.prototype.toString()")}} + - : このロケールの完全なロケール識別子文字列を返します。 + +## 例 + +### 基本的な使用 + +{{jsxref("Intl/Locale/Locale", "Intl.Locale")}} のコンストラクターは、もっとも簡単なものでは、ロケール識別子の文字列を引数に取ります。 + +```js +let us = new Intl.Locale('en-US'); +``` + +### Locale コンストラクターの options オブジェクト付きでの使用 + +このコンストラクターは、オプションで構成オブジェクトの引数を取ることができます。たとえば、構成オブジェクトの {{jsxref("Intl/Locale/hourCycle", "hourCycle")}} プロパティに任意の時間サイクル種別を設定し、それをコンストラクターに渡します。 + +```js +let us12hour = new Intl.Locale("en-US", {hourCycle: "h12"}); +console.log(us12hour.hourCycle); // Prints "h12" +``` + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 + +- {{jsxref("Intl")}} +- [Intl.Locale のポリフィル](https://formatjs.io/docs/polyfills/intl-locale) +- [Unicode ロケール識別子の仕様書](https://www.unicode.org/reports/tr35/#Canonical_Unicode_Locale_Identifiers) diff --git a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html index 9c93cf21cc..4064df7666 100644 --- a/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html +++ b/files/ja/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -32,7 +32,7 @@ translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory <dt><code>Memory.prototype.constructor</code></dt> <dd>このオブジェクトのインスタンスを生成した関数を返します。既定では {{jsxref("WebAssembly.Memory()")}} コンストラクターです。</dd> <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> - <dd>メモリに格納されているバッファーを返すアクセサープロパティです。/dd></dd> + <dd>メモリに格納されているバッファーを返すアクセサープロパティです。</dd> </dl> <h3 id="Instance_methods" name="Instance_methods">インスタンスメソッド</h3> diff --git a/files/ja/web/javascript/reference/strict_mode/index.html b/files/ja/web/javascript/reference/strict_mode/index.html index c24a489769..5ef5aaf11e 100644 --- a/files/ja/web/javascript/reference/strict_mode/index.html +++ b/files/ja/web/javascript/reference/strict_mode/index.html @@ -26,7 +26,7 @@ translation_of: Web/JavaScript/Reference/Strict_mode <h2 id="Invoking_strict_mode" name="Invoking_strict_mode">Strict モードの呼び出し</h2> -<p>Strict モードは<em>スクリプト全体</em>または<em>個別の関数</em>に適用できます。括弧 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/block">{}</a></code> で括られるブロック構文には適用できません。そのような場所に適用しようとしても何も起きません。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> コード、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/function">Function</a></code> コード、イベントハンドラ属性、<a href="/ja/DOM/window.setTimeout" title="ja/DOM/window.setTimeout"><code>setTimeout</code></a> コードに渡す文字列、およびこれらに似たものはスクリプト全体であり、Strict モードを呼び出すと期待どおりに動作します。</p> +<p>Strict モードは<em>スクリプト全体</em>または<em>個別の関数</em>に適用できます。括弧 <code><a href="/ja/docs/Web/JavaScript/Reference/Statements/block">{}</a></code> で括られるブロック構文には適用できません。そのような場所に適用しようとしても何も起きません。<code><a href="/ja/docs/Web/JavaScript/Reference/Global_Objects/eval">eval</a></code> コード、<code><a href="/ja/docs/Web/JavaScript/Reference/Statements/function">Function</a></code> コード、イベントハンドラ属性、<a href="/ja/DOM/window.setTimeout"><code>setTimeout</code></a> コードに渡す文字列、およびこれらに似たものはスクリプト全体であり、Strict モードを呼び出すと期待どおりに動作します。</p> <h3 id="Strict_mode_for_scripts" name="Strict_mode_for_scripts">スクリプトでの Strict モード</h3> @@ -79,7 +79,7 @@ export default strict; mistypeVariable = 17; // この行は変数のスペルミスによる参照エラーを投げます。 </pre> -<p>第二に、Strict モードでは、代入文で暗黙的に失敗せずに例外が発生するようにします。例えば、<code>NaN</code> は書き込み不可のグローバル変数です。通常のコードでは <code>NaN</code> に代入しても何も起きません。つまり、開発者は失敗したという通知を受けません。Strict モードでは <code>NaN</code> に代入すると例外が発生します。通常のコードで暗黙的に失敗する代入 (書き込み不可のプロパティへの代入、getter のみのプロパティへの代入、<a href="/ja/JavaScript/Reference/Global_Objects/Object/preventExtensions" title="ja/JavaScript/Reference/Global Objects/Object/preventExtensions">拡張不可</a> オブジェクトへの新規プロパティ割り当て) について、Strict モードでは例外が発生します:</p> +<p>第二に、Strict モードでは、代入文で暗黙的に失敗せずに例外が発生するようにします。例えば、<code>NaN</code> は書き込み不可のグローバル変数です。通常のコードでは <code>NaN</code> に代入しても何も起きません。つまり、開発者は失敗したという通知を受けません。Strict モードでは <code>NaN</code> に代入すると例外が発生します。通常のコードで暗黙的に失敗する代入 (書き込み不可のプロパティへの代入、getter のみのプロパティへの代入、<a href="/ja/JavaScript/Reference/Global_Objects/Object/preventExtensions">拡張不可</a> オブジェクトへの新規プロパティ割り当て) について、Strict モードでは例外が発生します:</p> <pre class="brush: js notranslate">'use strict'; @@ -257,7 +257,7 @@ f(); // TypeError が投げられます <p>Strict モードにより"セキュアな" JavaScript の記述がより簡単になります。現在、一部の Web サイトではユーザー向に対し、Web サイトの<em>他のユーザーが</em>実行することができる JavaScript を記述する方法を提供しています。ブラウザー上の JavaScript はユーザーの個人的な情報にアクセスできることから、そのような JavaScript は禁じられた機能へのアクセスを削除するよう、実行前に部分的に変換する必要があります。JavaScript の柔軟性は、ランタイムによる多くのチェックなしにこれを行うことを事実上不可能にします。ある言語機能は、ランタイムのチェック実行にかなりパフォーマンスのコストがかかるとして広まっています。Strict モードのいくつかの調整、そしてユーザーが投稿した JavaScript が Strict モードのコードであることや信頼できる方法で呼び出されることの要求により、ランタイムのチェックの必要性をかなり減らします。</p> -<p>第一に、Strict モードでは、<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として関数に渡された値をオブジェクトへボクシングしません。非ストリクトモードでの関数にとって <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> は常にオブジェクトになります。this の値は、実行時に this オブジェクト値として提供されたオブジェクトであったり、真偽値・文字列・数値などのプリミティブな値が <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として呼び出した時はオブジェクトへボクシングした値、<code>{{Glossary("Undefined", "undefined")}}</code> または <code>{{Glossary("Null", "null")}}</code> の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> で呼び出された時はグローバルオブジェクトとなります。(特定の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を指定するために <a href="/ja/JavaScript/Reference/Global_Objects/Function/call" title="ja/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/apply" title="ja/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/bind" title="ja/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> を使用してください)。自動的なボクシングはパフォーマンス上のコストがあり、しかしブラウザーでグローバルオブジェクトを公開することは、"セキュアな" JavaScript 環境へのアクセスを提供するグローバルオブジェクトを制限する必要があるためにセキュリティ上の危険性があります。従って Strict モードの関数では、指定された <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を変更せずに使用します:</p> +<p>第一に、Strict モードでは、<code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として関数に渡された値をオブジェクトへボクシングしません。非ストリクトモードでの関数にとって <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> は常にオブジェクトになります。this の値は、実行時に this オブジェクト値として提供されたオブジェクトであったり、真偽値・文字列・数値などのプリミティブな値が <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> として呼び出した時はオブジェクトへボクシングした値、<code>{{Glossary("Undefined", "undefined")}}</code> または <code>{{Glossary("Null", "null")}}</code> の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> で呼び出された時はグローバルオブジェクトとなります。(特定の <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を指定するために <a href="/ja/JavaScript/Reference/Global_Objects/Function/call"><code>call</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/apply"><code>apply</code></a>、<a href="/ja/JavaScript/Reference/Global_Objects/Function/bind"><code>bind</code></a> を使用してください)。自動的なボクシングはパフォーマンス上のコストがあり、しかしブラウザーでグローバルオブジェクトを公開することは、"セキュアな" JavaScript 環境へのアクセスを提供するグローバルオブジェクトを制限する必要があるためにセキュリティ上の危険性があります。従って Strict モードの関数では、指定された <code><a href="/ja/docs/Web/JavaScript/Reference/Operators/this">this</a></code> を変更せずに使用します:</p> <pre class="brush: js notranslate">'use strict'; function fun() { return this; } 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/security/securing_your_site/index.html b/files/ja/web/security/securing_your_site/index.html index 8d375d18b7..915c555d8c 100644 --- a/files/ja/web/security/securing_your_site/index.html +++ b/files/ja/web/security/securing_your_site/index.html @@ -19,7 +19,7 @@ translation_of: Web/Security/Securing_your_site <dl> <dt><a href="/ja/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion">フォームオートコンプリートを無効にするには</a></dt> <dd>Geckoではフォームのオートコンプリートがサポートされています。つまり、ユーザがフォームに入力した値を記憶し、次回訪問時には自動的にその値が入力されることになります。ある特定のデータに関しては、この機能を無効にしたほうが適切かもしれません。</dd> - <dt><a href="/ja/CSS/Privacy_and_the_:visited_selector" title="ja/CSS/Privacy and the :visited selector">プライバシーと :visited セレクター</a></dt> + <dt><a href="/ja/CSS/Privacy_and_the_:visited_selector">プライバシーと :visited セレクター</a></dt> <dd>この記事では悪質なサイトがユーザーの閲覧履歴を取得できないようにするために <code>getComputedStyle()</code> メソッドに加えられた変更について議論しています。</dd> <dt><a href="https://www.owasp.org/index.php/Password_Storage_Cheat_Sheet">安全なアルゴリズムを使用したパスワードのハッシュ</a> (OWASP)</dt> <dd>プレーンテキストでパスワードを格納すると、攻撃者がサイトのユーザーの正確なパスワードを知り、漏洩させることにつながり、ユーザーを危険にさらすことになります。古く安全ではないハッシュアルゴリズム (md5 など) を使用すると、同じ問題が浮上します。メッセージダイジェストアルゴリズム (md5 や sha) ではなくパスワード専用のハッシュアルゴリズム (Argon2, PBKDF2, scrypt, bcrypt など) を使用するようにしてください。この記事はパスワードを格納するときに使用することができるベストプラクティスのショーケースです。</dd> @@ -28,10 +28,10 @@ translation_of: Web/Security/Securing_your_site <h2 id="コンテンツセキュリティ">コンテンツセキュリティ</h2> <dl> - <dt><a href="/ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types" title="ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">サーバーの MIME タイプを正しく設定する</a></dt> + <dt><a href="/ja/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">サーバーの MIME タイプを正しく設定する</a></dt> <dd>MIME タイプを正しく設定しないと、幾つかの潜在的なセキュリティ上の問題が発生します。この記事ではそのうちのいくつかを紹介し、サーバーで MIME タイプを正しく設定する方法を示します。</dd> <dt><a href="/ja/docs/Web/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a></dt> - <dd><code>Strict-Transport-Security:</code> <a href="/ja/HTTP" title="ja/HTTP">HTTP</a> ヘッダーを使うと、そのサイトが HTTPS でのみアクセスされるべきであるということを示すことができます。</dd> + <dd><code>Strict-Transport-Security:</code> <a href="/ja/HTTP">HTTP</a> ヘッダーを使うと、そのサイトが HTTPS でのみアクセスされるべきであるということを示すことができます。</dd> <dt><a href="/ja/docs/Web/HTTP/CORS">HTTP アクセス制御</a></dt> <dd>Cross-Origin Resource Sharing 標準はどのコンテンツが他のドメインから読み込まれるかを示す方法を提供します。この仕組みによりあなたのサイトが意図せず使われることを防いだり、明示的に使用を許可できます。</dd> <dt><a href="/ja/docs/Web/Security/CSP">Content Security Policy</a></dt> diff --git a/files/ja/web/svg/attribute/stroke-linecap/index.html b/files/ja/web/svg/attribute/stroke-linecap/index.html index f6aeccd337..f35c5842e7 100644 --- a/files/ja/web/svg/attribute/stroke-linecap/index.html +++ b/files/ja/web/svg/attribute/stroke-linecap/index.html @@ -7,7 +7,7 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-linecap --- -<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> +<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> <p><code>stroke-linecap</code> 要素は線を引いた時の開いている部分パスの終端の形状を指定します。</p> @@ -68,6 +68,6 @@ translation_of: Web/SVG/Attribute/stroke-linecap <p>以下の要素で <code>stroke-linecap</code> を使うことができます</p> <ul> - <li><a href="/ja/docs/Web/SVG/Element#Shape" title="ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li> - <li><a href="/ja/docs/Web/SVG/Element#TextContent" title="ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li> + <li><a href="/ja/docs/Web/SVG/Element#Shape">Shape 要素</a> »</li> + <li><a href="/ja/docs/Web/SVG/Element#TextContent">Text content 要素</a> »</li> </ul> diff --git a/files/ja/web/svg/attribute/stroke-linejoin/index.html b/files/ja/web/svg/attribute/stroke-linejoin/index.html index 3f72274f37..9c11e91b5e 100644 --- a/files/ja/web/svg/attribute/stroke-linejoin/index.html +++ b/files/ja/web/svg/attribute/stroke-linejoin/index.html @@ -7,7 +7,7 @@ tags: - SVG Attribute translation_of: Web/SVG/Attribute/stroke-linejoin --- -<p>« <a href="/ja/docs/Web/SVG/Attribute" title="ja/SVG/Attribute">SVG 属性リファレンスホーム</a></p> +<p>« <a href="/ja/docs/Web/SVG/Attribute">SVG 属性リファレンスホーム</a></p> <p><code>stroke-linejoin</code> 属性は線を引いた時のパスの曲がりまたは基本的な輪郭の形状を指定します。</p> @@ -73,8 +73,8 @@ translation_of: Web/SVG/Attribute/stroke-linejoin <p>以下の要素で <code>stroke-linejoin</code> 属性を使うことができます</p> <ul> - <li><a href="/ja/SVG/Element#Shape" title="ja/SVG/Element#Shape">Shape 要素</a> »</li> - <li><a href="/ja/SVG/Element#TextContent" title="ja/SVG/Element#TextContent">Text content 要素</a> »</li> + <li><a href="/ja/SVG/Element#Shape">Shape 要素</a> »</li> + <li><a href="/ja/SVG/Element#TextContent">Text content 要素</a> »</li> </ul> <p> </p> diff --git a/files/ja/web/svg/compatibility_sources/index.html b/files/ja/web/svg/compatibility_sources/index.html index 062a2f701d..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" title="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/ja/web/svg/element/animatecolor/index.html b/files/ja/web/svg/element/animatecolor/index.html index 8c5927ffe4..1fbecd53f6 100644 --- a/files/ja/web/svg/element/animatecolor/index.html +++ b/files/ja/web/svg/element/animatecolor/index.html @@ -31,14 +31,14 @@ translation_of: Web/SVG/Element/animateColor <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> diff --git a/files/ja/web/svg/element/animatetransform/index.html b/files/ja/web/svg/element/animatetransform/index.html index 0113d15dbf..5cef265bb3 100644 --- a/files/ja/web/svg/element/animatetransform/index.html +++ b/files/ja/web/svg/element/animatetransform/index.html @@ -42,14 +42,14 @@ translation_of: Web/SVG/Element/animateTransform <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> <li><a href="/ja/docs/Web/SVG/Attribute#Core" title="en/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> <li><a href="/ja/docs/Web/SVG/Attribute#AnimationTiming" title="en/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue" title="ja/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> - <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition" title="ja/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationValue">Animation value attributes</a> »</li> + <li><a href="/ja/docs/Web/SVG/Attribute#AnimationAddition">Animation addition attributes</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> diff --git a/files/ja/web/svg/element/lineargradient/index.html b/files/ja/web/svg/element/lineargradient/index.html index 123c6809c3..41aac08a01 100644 --- a/files/ja/web/svg/element/lineargradient/index.html +++ b/files/ja/web/svg/element/lineargradient/index.html @@ -26,9 +26,9 @@ translation_of: Web/SVG/Element/linearGradient <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> diff --git a/files/ja/web/svg/element/metadata/index.html b/files/ja/web/svg/element/metadata/index.html index 8925ae75ed..10d943d20b 100644 --- a/files/ja/web/svg/element/metadata/index.html +++ b/files/ja/web/svg/element/metadata/index.html @@ -22,7 +22,7 @@ translation_of: Web/SVG/Element/metadata <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> </ul> <h3 id="専用属性">専用属性</h3> diff --git a/files/ja/web/svg/element/radialgradient/index.html b/files/ja/web/svg/element/radialgradient/index.html index b617afb4fb..d948931e6c 100644 --- a/files/ja/web/svg/element/radialgradient/index.html +++ b/files/ja/web/svg/element/radialgradient/index.html @@ -20,9 +20,9 @@ translation_of: Web/SVG/Element/radialGradient <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> diff --git a/files/ja/web/svg/element/rect/index.html b/files/ja/web/svg/element/rect/index.html index 2a6e95ee9e..c4ad070e21 100644 --- a/files/ja/web/svg/element/rect/index.html +++ b/files/ja/web/svg/element/rect/index.html @@ -29,10 +29,10 @@ translation_of: Web/SVG/Element/rect <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent" title="ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Presentation" title="ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#GraphicalEvent">グラフィカルイベント属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Presentation">プレゼンテーション属性</a> »</li> <li>{{ SVGAttr("class") }}</li> <li>{{ SVGAttr("style") }}</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> diff --git a/files/ja/web/svg/element/set/index.html b/files/ja/web/svg/element/set/index.html index 0f2373d15b..ff85e944c3 100644 --- a/files/ja/web/svg/element/set/index.html +++ b/files/ja/web/svg/element/set/index.html @@ -25,12 +25,12 @@ translation_of: Web/SVG/Element/set <h3 id="グローバル属性">グローバル属性</h3> <ul> - <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing" title="ja/Web/SVG/Attribute#ConditionalProccessing">条件処理属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#Core" title="ja/Web/SVG/Attribute#Core">コア属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#AnimationEvent" title="ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#XLink" title="ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget" title="ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> - <li><a href="/ja/Web/SVG/Attribute#AnimationTiming" title="ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#ConditionalProcessing">条件処理属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#Core">コア属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationEvent">アニメーションイベント属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#XLink">Xlink属性</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationAttributeTarget">Animation attribute target attributes</a> »</li> + <li><a href="/ja/Web/SVG/Attribute#AnimationTiming">アニメーションタイミング属性</a> »</li> <li>{{ SVGAttr("externalResourcesRequired") }}</li> </ul> diff --git a/files/ja/web/svg/svg_animation_with_smil/index.html b/files/ja/web/svg/svg_animation_with_smil/index.html index 4961bed4e2..0d70f03fe8 100644 --- a/files/ja/web/svg/svg_animation_with_smil/index.html +++ b/files/ja/web/svg/svg_animation_with_smil/index.html @@ -3,7 +3,7 @@ title: SVG animation with SMIL slug: Web/SVG/SVG_animation_with_SMIL translation_of: Web/SVG/SVG_animation_with_SMIL --- -<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG" title="ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p> +<p>Firefox 4 より、<a class="external" href="http://www.w3.org/TR/REC-smil">Synchronized Multimedia Integration Language</a> (SMIL) を用いた <a href="/ja/SVG">SVG</a> のアニメーションをサポートしています。SMIL では以下のようなことができます:</p> <ul> <li>要素の数値属性 (x, y など) のアニメーション</li> diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.html b/files/ja/web/svg/tutorial/basic_shapes/index.html index 2b87124f8a..9ad6201924 100644 --- a/files/ja/web/svg/tutorial/basic_shapes/index.html +++ b/files/ja/web/svg/tutorial/basic_shapes/index.html @@ -29,47 +29,47 @@ translation_of: Web/SVG/Tutorial/Basic_Shapes </pre> <div class="note"><strong>注意:</strong> <code>stroke</code>、<code>stroke-width</code> および <code>fill</code> の各属性は後のチュートリアルで説明します。</div> <h3 id="Rectangles" name="Rectangles">長方形</h3> -<p><a href="/ja/SVG/Element/rect" title="ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p> +<p><a href="/ja/SVG/Element/rect">rect</a> 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。</p> <pre class="eval"> <rect x="10" y="10" width="30" height="30"/> <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/> </pre> <dl> <dt>x</dt> <dd>長方形の左上の角の位置を示す、X 座標です。</dd> <dt>y</dt> <dd>長方形の左上の角の位置を示す、Y 座標です。</dd> <dt>width</dt> <dd>長方形の幅です。</dd> <dt>height</dt> <dd>長方形の高さです。</dd> <dt>rx</dt> <dd>長方形の角の、X 軸方向の半径です。</dd> <dt>ry</dt> <dd>長方形の角の、Y 軸方向の半径です。</dd> </dl> <h3 id="Circle" name="Circle">円</h3> -<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle" title="ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p> +<p>おそらくあなたの推測どおりで、<a href="/ja/SVG/Element/circle">circle</a> 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。</p> <pre class="eval"> <circle cx="25" cy="75" r="20"/> </pre> <dl> <dt>r</dt> <dd>円の半径です。</dd> <dt>cx</dt> <dd>円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>円の中心の位置を示す、Y 座標です。</dd> </dl> <h3 id="Ellipse" name="Ellipse">楕円</h3> -<p><a href="/ja/SVG/Element/ellipse" title="ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p> +<p><a href="/ja/SVG/Element/ellipse">ellipse</a> は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。</p> <pre class="eval"> <ellipse cx="75" cy="75" rx="20" ry="5"/> </pre> <dl> <dt>rx</dt> <dd>楕円の X 軸方向の半径です。</dd> <dt>ry</dt> <dd>楕円の Y 軸方向の半径です。</dd> <dt>cx</dt> <dd>楕円の中心の位置を示す、X 座標です。</dd> <dt>cy</dt> <dd>楕円の中心の座標を示す、Y 座標です。</dd> </dl> <h3 id="Line" name="Line">直線</h3> -<p><a href="/ja/SVG/Element/line" title="ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p> +<p><a href="/ja/SVG/Element/line">line</a> は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。</p> <pre class="eval"> <line x1="10" x2="50" y1="110" y2="150"/> </pre> <dl> <dt>x1</dt> <dd>点 1 の X 座標です。</dd> <dt>y1</dt> <dd>点 1 の Y 座標です。</dd> <dt>x2</dt> <dd>点 2 の X 座標です。</dd> <dt>y2</dt> <dd>点 2 の Y 座標です。</dd> </dl> <h3 id="Polyline" name="Polyline">ポリライン</h3> -<p><a href="/ja/SVG/Element/polyline" title="ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p> +<p><a href="/ja/SVG/Element/polyline">polyline</a> は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:</p> <pre class="eval"> <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/> </pre> <dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。</dd> </dl> <h3 id="Polygon" name="Polygon">多角形</h3> -<p><a href="/ja/SVG/Element/polygon" title="ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code><rect/></code> 要素を作成するために polygon を用いることができることに留意してください。</p> +<p><a href="/ja/SVG/Element/polygon">polygon</a> は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <code><rect/></code> 要素を作成するために polygon を用いることができることに留意してください。</p> <pre class="eval"> <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/> </pre> <dl> <dt>points</dt> <dd>点のリストで、各々の数値は空白、カンマ、<abbr title="End of line">EOL</abbr>、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。パスを閉じるように描画するため、最後の直線は (2,2) から (0,0) に描画されます。</dd> </dl> <h3 id="Path" name="Path">パス</h3> -<p><a href="/ja/SVG/Element/path" title="ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p> +<p><a href="/ja/SVG/Element/path">path</a> は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの<a href="/ja/SVG/Tutorial/Paths">次のセクション</a>に独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。</p> <pre class="eval"> <path d="M 20 230 Q 40 205, 50 230 T 90230"/> </pre> -<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths" title="ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd> +<dl> <dt>d</dt> <dd>点のリストと、パスの描画方法に関する情報です。詳しくは <a href="/ja/SVG/Tutorial/Paths">Paths</a> をご覧ください。</dd> </dl> <p>{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}</p> <p><span class="comment">Interwiki Languages Links</span></p> diff --git a/files/ja/web/svg/tutorial/patterns/index.html b/files/ja/web/svg/tutorial/patterns/index.html index e0b7fcd4fb..a79fe98e90 100644 --- a/files/ja/web/svg/tutorial/patterns/index.html +++ b/files/ja/web/svg/tutorial/patterns/index.html @@ -8,7 +8,7 @@ translation_of: Web/SVG/Tutorial/Patterns --- <p>{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}</p> -<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern" title="ja/SVG/Element/pattern"><code><pattern></code></a> 要素は SVG ファイルの <code><defs></code> セクションに置かなければなりません。</p> +<p>私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<a href="/ja/SVG/Element/pattern"><code><pattern></code></a> 要素は SVG ファイルの <code><defs></code> セクションに置かなければなりません。</p> <p><img alt="" class="internal" src="/@api/deki/files/350/=SVG_Pattern_Example.png" style="float: right;"></p> 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/ko/web/http/methods/options/index.html b/files/ko/web/http/methods/options/index.html index 4b4b9a030d..8523cea7d6 100644 --- a/files/ko/web/http/methods/options/index.html +++ b/files/ko/web/http/methods/options/index.html @@ -86,7 +86,7 @@ Origin: http://foo.example Access-Control-Request-Method: POST Access-Control-Request-Headers: X-PINGOTHER, Content-Type</pre> -<p>서버는 {{HTTPHeader("Access-Control-Allow-Methods")}}로 응답하고, <code>POST</code>, <code>GET</code>, 그리고 <code>OPTIONS</code> 메소드를 통해서 해당하는 자원을 문의 (query) 할 수 알려준다. 이 헤더는 {{HTTPHeader("Allow")}} 응답 헤더와 비슷하지만 반드시 CORS 에 한해서만 사용된다. </p> +<p>서버는 {{HTTPHeader("Access-Control-Allow-Methods")}}로 응답하고, <code>POST</code>, <code>GET</code>, 그리고 <code>OPTIONS</code> 메소드를 통해서 해당하는 자원을 문의 (query) 할 수 있다고 알려준다. 이 헤더는 {{HTTPHeader("Allow")}} 응답 헤더와 비슷하지만 반드시 CORS 에 한해서만 사용된다. </p> <pre>HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 01:15:39 GMT 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/guide/text_formatting/index.html b/files/zh-cn/web/javascript/guide/text_formatting/index.html index 71d93dfe78..522b3ed362 100644 --- a/files/zh-cn/web/javascript/guide/text_formatting/index.html +++ b/files/zh-cn/web/javascript/guide/text_formatting/index.html @@ -51,7 +51,7 @@ translation_of: Web/JavaScript/Guide/Text_formatting <p>{{jsxref("String")}} 对象是对原始string类型的封装 .</p> -<pre class="notranslate">const foo = new String('foo'); // 创建一个 String 对象 +<pre class="brush: js notranslate">const foo = new String('foo'); // 创建一个 String 对象 console.log(foo); // 输出: [String: 'foo'] typeof foo; // 返回 'object'</pre> @@ -59,14 +59,14 @@ typeof foo; // 返回 'object'</pre> <p>除非必要, 应该尽量使用 String 字面值，因为String对象的某些行为可能并不与直觉一致。举例：</p> -<pre class="notranslate">const firstString = '2 + 2'; //创建一个字符串字面量 +<pre class="brush: js notranslate">const firstString = '2 + 2'; //创建一个字符串字面量 const secondString = new String('2 + 2'); // 创建一个字符串对象 eval(firstString); // 返回数字 4 eval(secondString); // 返回字符串 "2 + 2"</pre> <p><code>String</code> 对象有一个属性 <code>length</code>，标识了字符串中 UTF-16 的码点个数。举例，下面的代码把 13 赋值给了<code>helloLength</code>，因为 "Hello, World!" 包含 13 个字符，每个字符用一个 UTF-16 码点表示。你可以通过数组的方式访问每一个码点，但你不能修改每个字符，因为字符串是不变的类数组对象： </p> -<pre class="notranslate">const hello = 'Hello, World!'; +<pre class="brush: js notranslate">const hello = 'Hello, World!'; const helloLength = hello.length; hello[0] = 'L'; // 无效，因为字符串是不变的 hello[0]; // 返回 "H"</pre> @@ -171,19 +171,19 @@ string text line 2`); <p>为了在一般的字符串中嵌入表达式, 需要使用如下语法:</p> -<pre class="notranslate">const five = 5; +<pre class="brush: js notranslate">const five = 5; const ten = 10; console.log('Fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.'); // "Fifteen is 15 and not 20."</pre> <p>现在, 使用模板字符串, 可以使用语法糖让类似功能的实现代码更具可读性:</p> -<pre class="notranslate">const five = 5; +<pre class="brush: js notranslate">const five = 5; const ten = 10; console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`); // "Fifteen is 15 and not 20."</pre> -<p>更多信息, 请阅读 <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> 中的 <a href="/en-US/docs/Web/JavaScript/Reference/template_strings">Template strings</a>。</p> +<p>更多信息, 请阅读 <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a> 中的 <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>。</p> <h2 id="国际化">国际化</h2> 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/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html index d4645f7dca..508a6a2590 100644 --- a/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html +++ b/files/zh-tw/learn/tools_and_testing/client-side_javascript_frameworks/svelte_todo_list_beginning/index.html @@ -85,30 +85,30 @@ tags: <li>刪除全部已完成任務。</li> </ul> -<h2 id="Building_our_first_component">Building our first component</h2> +<h2 id="Building_our_first_component">建立我們第一個元件</h2> -<p>Let's create a <code>Todos.svelte</code> component — this will contain our list of todos.</p> +<p>建立<code>Todos.svelte</code>元件——這將包含我們的待辦任務。</p> <ol> <li> - <p>Create a new folder — <code>src/components</code>.</p> + <p>建立新資料夾——<code>src/components</code>。</p> <div class="notecard note"> - <p><strong>Note</strong>: you can put your components anywhere inside the <code>src</code> folder, but the <code>components</code> folder is a recognized convention to follow, allowing you to find your components easily.</p> + <p><strong>注意</strong>：你可以把元件們放在<code>src</code>資料夾當中的任何地方，但放在<code>components</code>資料夾是比較常見的做法，也讓你可以更容易地找到元件們。</p> </div> </li> <li> - <p>Create a file named <code>src/components/Todos.svelte</code> with the following content:</p> + <p>建立<code>src/components/Todos.svelte</code>檔案並包含以下內容：</p> <pre class="brush: html"><h1>Svelte To-Do list</h1></pre> </li> <li> - <p>Change the <code>title</code> element in <code>public/index.html</code> to contain the text <em>Svelte To-do list</em>:</p> + <p>改變<code>public/index.html</code>中的<code>title</code>元素內容為<em>Svelte To-do list</em>：</p> <pre class="brush: html"><title>Svelte To-Do list</title></pre> </li> <li> - <p>Open <code>src/App.svelte</code> and replace its contents with the following:</p> + <p>打開<code>src/App.svelte</code>並替換為以下內容：</p> <pre class="brush: html"><script> import Todos from './components/Todos.svelte' @@ -117,7 +117,7 @@ tags: <Todos /></pre> </li> <li> - <p>In development mode, Svelte will issue a warning in the browser console when specifying a prop that doesn't exist in the component; in this case we have a <code>name</code> prop being specified when we instantiate the <code>App</code> component inside <code>src/main.js</code>, which isn't used inside <code>App</code>. The console should currently give you a message along the lines of "<App> was created with unknown prop 'name'". To get rid of this, remove the <code>name</code> prop from <code>src/main.js</code>; it should now look like so:</p> + <p>在開發模式中，當定義屬性沒有存在於元件時，Svelte將會在瀏覽器主控台警示問題；以此例來看，當我們於<code>src/main.js</code>實例化<code>App</code>元件時，由於我們已經明確定義出<code>name</code>屬性，但並無實際在<code>App</code>中使用到。所以主控台現在應該會給你一個警示訊息，如「<App> was created with unknown prop 'name'」。而為了排除這個問題，從<code>src/main.js</code>中移除<code>name</code>屬性；看起來應該要像是如下這樣：</p> <pre class="brush: js">import App from './App.svelte' @@ -129,7 +129,7 @@ export default app</pre> </li> </ol> -<p>Now if you check your testing server URL you'll see our <code>Todos.svelte</code> component being rendered:</p> +<p>假如你現在檢查你的測試伺服器URL，應該會看到<code>Todos.svelte</code>元件已經被渲染出如下畫面：</p> <p><img alt="basic component rendering which a title that says 'Svelte to-do list'" src="02-todos-component-rendered.png" style="border-style: solid; border-width: 1px; display: block; margin: 0 auto;"></p> 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> |